@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);


::selection{
background:transparent;
}


::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 6px;
	background-color: #F5F5F5 ;
}

::-webkit-scrollbar-thumb
{
	background-color: #000000;
	border: 0px solid #555555;

}


body {
    font-family: 'Open Sans', sans-serif;
    margin:0px;
    background-color: gray;    
    height:100%;
    width:100%;
    overflow: hidden;
    /*display:none;*/
}

h1 {
    margin:0px;
    margin-top:10px;
    font-weight:900;
    font-size:22px;
    line-height: 1em;
    clear:both;
    color:#333333;
}

h2 {
    margin: 0px;
    margin-top:0px;
    font-size: 14px;
    line-height: 1.4em;
    clear:both;
    border-bottom: solid 3px black;
}

h3 {
    font-size:0.65em;
    clear:both;
    font-weight:400;
    margin:0px;
    margin-top:10px;
    line-height: 1.4em;

}

h3 .moreinfo{
    font-size: 12px;
    line-height: 3em;
    background-color: black;
    color:white;
}



h4 {
    font-size: 0.65em;
    font-weight:400;
    line-height: 1.2em;
    margin:0px;
    margin-top:0px;
    background-color: black;
    color:white;
}

h5 {   
    font-size: 1em;
    font-weight:700;
}

h8 {      
    font-size: 0.9em;
    display:block;
    height:1em;
    border-top:1px white solid;
    line-height: 1em;
    padding-top: 2px;
}

h9 {
    margin-top: 10px;   
    font-size: 0.7em;
    height:1em;
    line-height: 1em;
    padding-top: 2px;
}

select{
    -webkit-appearance:none 
    border: 1px solid black;
    box-shadow:0px;
}

select:hover, select:active{
    border: 1px solid black;
    box-shadow:0px;
    -webkit-appearance:none ;
}

option:hover, option:active, option:checked{
    background:gray;
     -webkit-appearance: none;
}




#Map {
    position: relative;
    width:100%;
    background:rgb(240,240,240);
    margin:auto;
/*    height:800px;*/

}

#menu {
    position: relative;
    height:250px;
    background: rgb(240,240,240);
    color: #333333;
    min-width: 1280px;
    width:100%;
    overflow: hidden;
    border-top:3px solid black;

}

.box{
    height:100%;
    float: left;
    padding-left: 10px;
    
}

#intro {
    /*width:25%;*/
    width:300px;

}

#graficas {

        min-width: 150px;
    margin-top:10px;
}

#filtros {
 width:200px;

}



.minimap {
    border: solid 0px black;
    opacity:0.7;
    /*float: left;*/
    height:45px;
    width: 100%;
    min-width:20px;
    margin-top: 5px;
    margin-bottom: 5px;
    position:relative;
        
   -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter:url(../pictures/filters.svg#grayscale);
    
	filter: gray; /* IE 6-9 */
    
    cursor:pointer;

}

.minimap:hover {
   -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
  filter:none; /* IE 6-9 */
    opacity:1;
    
}

#selector {

   /* min-width:60px;*/
}

#catMenu {
    font-size: 12px;
    margin-top:10px;
    height:20px;
    background: black;
    color:white;  
}

#compMenu, #compMenu:active {
    font-size: 10px;
    color:black;
    height: 95px;
    margin-top:10px;
    border:1px gray solid;
    background:transparent;
    -webkit-appearance:none ;
}


#catMenu, #compMenu {
    width:100%;   
}

option{}

#slidebox {
   overflow:auto;
    height: 215px; 
}

#slidebox2 {
   overflow-x:auto;
    height: 257px; 
    display: block;
    
    overflow-y:hidden;
}

#slidebox3 {
   overflow:auto;
    height: 120px; 
}

#minimap1 {
    background: url('../pictures/map1.png');   
}


#minimap2 {

    background: url('../pictures/map2.png');
}

#minimap3 {
    background: url('../pictures/map3.png');
}

#minimap4 {
    background: url('../pictures/map4.png');
}

.chart {
    height:245px;
    margin: 0 auto;
    width:150px;

    
}

#chart2 {
    display:none;
}

#chart3 {
    display:none;
}

#chart4 {
    display:none;
}

#fog {
    background:rgba(255,255,255,0.5);
    visibility: hidden;
    pointer-events: none;
    position:absolute;
    height:100%;
    width:100%;
    top:0px;
    left:0px;
    z-index:5;
    
}





#dada1, #dada2, #dada3, #dada4 {
    font-size: 20px;
    font-weight: 700;
}

#dada1t,#dada2t,#dada3t,#dada4t {
    margin-top: 0px;
    font-size: 0.6em;
}

#dades {
    min-width:70px;
    width:1%;
    padding-top:10px;
        
}

#descriptor {
    width:2%;
    min-width:230px;
}

#imgllegenda {

    margin-top:5px;
    height:140px;

    
}

#start {
    position: absolute;
    height:100%;
    width:100%;
    background:rgba(255,255,255,0.8);
    z-index: 10000;
}

#video {
    border:1px dotted black;
    position:absolute;
    left:50%;
    top:50%;
    -webkit-filter:brightness(108.5%);
    display:none;
}

#ajuntament img{
    position:absolute;
    z-index: 1000;
    top:0px;
    right:0px;
    padding:10px;
    width:150px;
    
}

#logo img {
    position:absolute;
    z-index: 1000;
    top:60px;
    right:0px;
    padding:10px;
    width:150px;

}

.button {
    position:absolute;
    height: 23px;
    width:50px;
    z-index:1000;
    background-color: white;
    border:1px solid rgba(0,0,0,0.4);
    bottom:260px;
    font-size: 12px;
    padding-top: 0px;
    text-align: center;
    cursor:pointer;
}

#button1 {
    left:42px;
    background-image: url('../pictures/play.png')
}

#button2 {
    left:42px;
    bottom:288;
    font-weight: 600;
    line-height: 22px;
    
}

#button3 {
    left:170px;
}

#button4 {
    left:230px;
}

#credits {
    position: absolute;
    height:100%;
    width:100%;
    background:rgba(255,255,255,0.8);
    z-index: 10000;
    display:none;
    font-size:15px;
}

#moreInfo {
    position: absolute;
    height:100%;
    width:100%;
    background:rgba(255,255,255,0.8);
    z-index: 10000;
    display:none;
}

#credits2 {
    position: absolute;
    left: 10%;
    top:50px;
    width:300px
    
}

#credits a {
    color:black;
    font-weight: 900;
    border-bottom: 3px solid black;
    text-decoration: none;
}

#skip {
    width:70px;
    border: 2px solid gray;
    padding: 10px;
    position: absolute;
    left:50%;
    top:50%;
    color: black;
    z-index: 2000;
    font-size: 20px;
    font-weight: 900;
    background-color: rgba(255,255,255,0.5);
    display: none;
    text-align: right;
    color:gray;
}

#moreInfo2 {
    width:500px;
    height:90%;
    left:100px;
    top:5%;
    position:absolute;
    overflow: auto;
}

#moreInfo2 img{
    width: 490px;
    opacity: 1;
}

.sb{
    
    /*margin-top: 20px;*/
    margin-top: 5px;
    margin-bottom: 0px;
    height:30px;
}
#telon {
    background:white;
    width:100%;
    height:100%;
    position:absolute;
    z-index:20000;
}