/*---------------------------------------------------------------------------------*/
/*--------------------------- VARIABLES TAMAÑO ICONOS -----------------------------*/
/*---------------------------------------------------------------------------------*/
:root {
 --base-size:18%;
 --half-size:9%;
}



/*----------------------------*/
/*- ICONOS: DIRECCION VIENTO -*/
/*----------------------------*/
.C{display:none; visibility: hidden;}
/*.N{transform: rotate(45deg);}
.NE{transform: rotate(45deg);}
.E{transform: rotate(90deg);}
.SE{transform: rotate(135deg);}
.S{transform: rotate(180deg);}
.SO{transform: rotate(-135deg);}
.O{transform: rotate(-90deg);}
.NO{transform: rotate(-45deg);}*/
.N{transform: rotate(180deg);}
.NE{transform: rotate(-135deg);}
.E{transform: rotate(-90deg);}
.SE{transform: rotate(-145deg);}
.S{transform: rotate(0);}
.SO{transform: rotate(45deg);}
.O{transform: rotate(90deg);}
.NO{transform: rotate(135deg);}

/*---------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------*/

/*----------------------------*/
/*-- ESTILOS COMUNES TIEMPO --*/
/*----------------------------*/
#divContenidos{background:#bcbcbc;}
div.BloqueTiempo{background:#bcbcbc; color:#fff;}
span.HideDesktop{visibility: hidden; display: none;}
li.destacado{font-weight:bolder; font-size:1.1em;}

/*---------------------------*/
/*---- BLOQUE: MAPA 2COL ----*/
/*---------------------------*/
.TiempoMapa2c{width:100%; text-align:center; padding-bottom:1em; padding-top:1.5em;}
.TiempoMapa2c .ColumnaTiempo{width:30%; display:inline-block; text-align:left; margin-right:3%; position:relative; vertical-align: middle;}
.TiempoMapa2c .ColumnaTiempoMapa{width:65%; margin-right:0;}
.TiempoMapa2c .mapa{width:100%; height:auto;}
.TiempoMapa2c .iconoTiempo{position:absolute; width:20%; width:var(--base-size); height:auto; z-index:999; display:none; filter: drop-shadow( -0px -0px 5px #00000061); -webkit-filter: drop-shadow( -0px -0px 5px #00000061); text-align:center;}

.TiempoMapa2c h1{color:#3b6a92; padding-left:0.6em; font-size: 2.7em; font-weight:lighter; font-family: 'Merriweather', serif;}
.TiempoMapa2c h2{color:#000000b3; font-size:1.8em; font-family: 'Merriweather', serif; margin-bottom:1em; padding-left:0.9em;}
.TiempoMapa2c h2 b.selected{color:#3b6a92;}
.TiempoMapa2c h2 b:hover, .TiempoMapa2c h2 span:hover{cursor:pointer; cursor:hand; text-decoration:underline;}

.TiempoMapa2c ul{color:lightgray; padding: 0 1em; list-style-type: none; font-size:1.5em;}
.TiempoMapa2c ul li{padding:0.35em 0;}
.TiempoMapa2c ul li a{color:#fff;}
.TiempoMapa2c ul li a:hover{color:#fff;}

.TiempoMapa2c div.tiempoDestacado{width: 25%; position: absolute; bottom: 10.5%; right: 2.5%; text-align: center; font-size: 1.2em; min-width: 140px;}
.TiempoMapa2c div.tiempoDestacado p > i{margin-left:0.3em;}
.TiempoMapa2c div.tiempoDA {bottom: 65.5%; right: 67%;}
.TiempoMapa2c div.tiempoDB {bottom: 7.5%; right: 2.5%;}
.TiempoMapa2c div.tiempoDP {bottom: 41.5%; right: 2.5%;}
.TiempoMapa2c div.tiempoDS {bottom: 2%; right: 65.5%;}
.TiempoMapa2c div.tiempoDSG {bottom: 15.5%; right: 4.5%;}
.TiempoMapa2c div.tiempoDV {bottom: 4.5%; right: 2.5%;}
.TiempoMapa2c div.tiempoDLR {bottom: 70.5%; right: 2.5%;}
.TiempoMapa2c div.tiempoTAL {bottom: 4.5%; right: 2.5%;}
.TiempoMapa2c div.tiempoTCR {bottom: 0; right: 2.5%;}
.TiempoMapa2c div.tiempoTCU {top: 5%; right: 2.5%;}
.TiempoMapa2c div.tiempoTTO {bottom: 4.5%; right: 2.5%;}
.TiempoMapa2c div.tiempoTGU {bottom: -0.5%; right: 2.5%;}

.TiempoMapa2c div.tiempoDestacado h2{padding: 0; font-size: 1.1em; margin-bottom: 5%; text-transform:uppercase; color:#3b6a92; font-weight:900;}
.TiempoMapa2c div.tiempoDestacado hr{color:#3b6a92; width:90%;}
.TiempoMapa2c div.tiempoDestacado p{font-size:inherit; margin: 5% 0;}

/*---------------------------*/
/*--- BLOQUE 1: MAPA 4COL ---*/
/*---------------------------*/

div.BloqueTiempo4c{font-family: 'Merriweather', serif;}

div.BloqueTiempo4c h1{color:#3b6a92; font-size:2.65em; margin:0.75em 1em;}
div.BloqueTiempo4c h1 a{color:#3b6a92;}
div.BloqueTiempo4c > h2{color:#3b6a92; font-size:1.5em; font-weight:200; margin-bottom:0.25em; padding-left: 1.75em}

div.BloqueTiempo4c div.horas{width: auto; display: inline-block; font-size: 1.5em; padding: 0.2em; margin: 0 1em 1em 1.45em;}
div.TiempoMapa2c div.horas{margin-top:1.5em; font-size:0.8em;}
div.BloqueTiempo4c div.horas span, div.TiempoMapa2c div.horas b{border-left: solid 1px #a5a5a5; padding: 0.2em 1em; background: #dadada99; color:#3b6a92;}
div.BloqueTiempo4c div.horas span:hover, div.TiempoMapa2c div.horas b:hover{cursor:pointer; cursor:hand;text-decoration:underline;}
div.BloqueTiempo4c div.horas span:first-child, div.TiempoMapa2c div.horas b:first-child{border-left:none;}
div.BloqueTiempo4c div.horas span.selected, div.TiempoMapa2c div.horas b.selected{font-weight: bolder; background: #fff; color:#3b6a92;}
div.BloqueTiempo4c .iconoTiempo{filter: drop-shadow( -0px -0px 5px #00000061); -webkit-filter: drop-shadow( -0px -0px 5px #00000061); text-align:center;}

div.BloqueTiempo4c div.ColumnasDetalleTiempo{display:flex; justify-content:space-evenly; flex-wrap: wrap;}
div.BloqueTiempo4c div.ColumnaTiempo{min-width: 145px; max-width: 210px; width: 19%; margin: 0 1em;}
div.BloqueTiempo4c div.ColumnaTiempo hr{color: #3b6a92;}
div.BloqueTiempo4c div.ColumnaTiempo div.diaSemana{font-size:1.9em; margin:0 0.5em;}
div.BloqueTiempo4c div.ColumnaTiempo div.temperaturaDia img{display: inline-block; vertical-align: middle;width: 64%;height: auto;}
div.BloqueTiempo4c div.ColumnaTiempo div.temperaturaDia div{display: inline-block; vertical-align: middle; font-size: 2.5em; width: 33%; text-align: right;}
div.BloqueTiempo4c div.ColumnaTiempo div.temperaturaDia div p{font-size:inherit; margin:0.25em 0;}
div.BloqueTiempo4c div.ColumnaTiempo div.descripcionTemperaturaDia{font-size:1.5em; margin: 0.5em 0;}
div.BloqueTiempo4c div.ColumnaTiempo div.detalleTiempoDia table{margin: 1em 0;}
div.BloqueTiempo4c div.ColumnaTiempo div.detalleTiempoDia td.separator{height:0.5em;}
div.BloqueTiempo4c div.ColumnaTiempo div.detalleTiempoDia td.datos{max-width:28%;font-size:1.6em; padding-left:0.5em; min-width:3.5em;}
div.BloqueTiempo4c div.ColumnaTiempo div.detalleTiempoDia td.texto{width:70%;max-width:70%; padding-right:1em; text-align:right; border-right:solid 1px #3b6a92;}
div.ColumnaTiempo span.dirViento{font-size:0.6em; font-weight:100; padding-left:0.3em; font-family: 'Merriweather', serif;}

div.BloqueTiempo4c div.ColumnaMasDias{margin-top:3em; display:none;}
.btnMasDias{ color: #3b6a92; font-size: 1.3em; font-weight: 200; padding:0.5em; font-family: 'Merriweather', serif; text-align:right; }
.btnMasDias span:hover{text-decoration: underline; cursor: pointer; cursor: hand;}

/*---------------------------*/
/*------ CRÉDITO AEMET ------*/
/*---------------------------*/
.CreditoTiempo{margin-top: 2em; font-size: 0.85em; text-align: right; color: #000000b3; padding: 0.5em;}
.CreditoTiempo a{color: #353535; font-weight: 500;}


/*---------------------------*/
/*------ MEDIA QUERIES ------*/
/*---------------------------*/

@media only screen and (min-width:999px) {
   .TiempoMapa2c .ColumnaTiempoMapa.MapaDB{transform: scale(1.1);}
   .TiempoMapa2c div.tiempoDB{right:4.5%;}
}
@media only screen and (max-width:999px) {
   .TiempoMapa2c .ColumnaTiempo{vertical-align:top;}
   .TiempoMapa2c .ColumnaTiempoMapa{vertical-align:top;}
   .TiempoMapa2c ul{font-size:1.25em;}
}
@media only screen and (max-width:750px) {
    #divContenidos{width:100%;} 
    
   .TiempoMapa2c span.HideDesktop{visibility: visible; display: inherit;}
   .TiempoMapa2c .ColumnaTiempo{width:95%; margin:auto;}
   .TiempoMapa2c .ColumnaTiempoMapa{width:95%; margin:auto;}
   .TiempoMapa2c ul{font-size: 1.25em; position: absolute; right: 0; z-index: 9999; background: #838383e6; text-align:right; max-height: 0;}
    .TiempoMapa2c ul li a{color:white;}
   .TiempoMapa2c h2 span{float:right; padding-right:1em;}
   .TiempoMapa2c h2 span >i{transition: transform .2s ease-in; display:inline-block; font-style: normal;}
   .TiempoMapa2c span.MenuActivo >i{transform:rotate(45deg);}

   .TiempoMapa2c #ListaLocalidades.MenuActivo{transition: max-height 0.75s ease-in; max-height:150vw; overflow:scroll; -ms-overflow-style: none; overflow: -moz-scrollbars-none; }
   .TiempoMapa2c #ListaLocalidades.MenuActivo::-webkit-scrollbar { width: 0 !important;}
   .TiempoMapa2c #ListaLocalidades{transition: max-height 0.75s ease-out;max-height: 0; overflow:hidden;}
    
    div.BloqueTiempo4c div.ColumnaTiempo{min-width: 185px; max-width: 280px; width: 40%; margin: 0 1.5em 2em 1.5em;}
}
@media only screen and (max-width:550px) {  
   
   .TiempoMapa2c h2{font-size:1.5em;}
   .TiempoMapa2c .ColumnaTiempo{width:100%; margin:auto;}
   .TiempoMapa2c h2 span{float:none; display:block;margin-top:1.5em;}
   .TiempoMapa2c ul{text-align:left; right:inherit;}
   .TiempoMapa2c div.tiempoDestacado{font-size: 0.8em; min-width: 120px;}
    .TiempoMapa2c div.tiempoDestacado hr {width: 75%;}
    
    div.BloqueTiempo4c{font-size:0.9em;}
    div.BloqueTiempo4c h1 {font-size: 2.35em;}
    div.BloqueTiempo4c div.ColumnaTiempo{min-width: 150px; max-width:210px; width: 40%; margin: 0 1.5em 2em 1.5em;}
    div.BloqueTiempo4c div.horas{font-size: 1.1em; margin: 1em auto; display: block; text-align: center;}
}

 @media only screen and (max-width:365px) {  
	div.BloqueTiempo4c div.ColumnaTiempo{min-width: 210px;}
 }
            


/* ---------------------------------------- */
/* ---------- ESTILOS TIEMPO COSTA -------- */
/* ---------------------------------------- */

div#divContenidos{padding:0;}
.BloqueTiempoCosta .iconoTiempo{transform: scale(0.8);}

.BloqueTiempoCosta .BloqueTiempoProvincia{clear:both;}

        @media only screen and (min-width: 550px) 
        {
           .BloqueTiempoCosta  .ColumnaTiempoMapa {vertical-align:top;}
            .BloqueTiempoCosta .MapaCantabria{float:left;}
        }

        @media only screen and (max-width: 750px) {
            div.BloqueTiempoCosta > .TiempoMapa2c #ListaLocalidadesAsturias.MenuActivo, div.BloqueTiempoCosta > .TiempoMapa2c #ListaLocalidadesCantabria.MenuActivo, div.BloqueTiempoCosta > .TiempoMapa2c #ListaLocalidadesPaisVasco.MenuActivo {
                transition: max-height 0.75s ease-in;
                max-height: 150vw;
                overflow: scroll;
                -ms-overflow-style: none;
                overflow: -moz-scrollbars-none;
            }
            .BloqueTiempoCosta .TiempoMapa2c #ListaLocalidadesAsturias.MenuActivo::-webkit-scrollbar, .BloqueTiempoCosta .TiempoMapa2c #ListaLocalidadesCantabria.MenuActivo::-webkit-scrollbar, .BloqueTiempoCosta .TiempoMapa2c #ListaLocalidadesPaisVasco.MenuActivo::-webkit-scrollbar {
                    width: 0 !important;
            }

            .BloqueTiempoCosta .TiempoMapa2c #ListaLocalidadesAsturias, .BloqueTiempoCosta .TiempoMapa2c #ListaLocalidadesCantabria, .BloqueTiempoCosta .TiempoMapa2c #ListaLocalidadesPaisVasco {
                transition: max-height 0.75s ease-out;
                max-height: 0;
                overflow: hidden;
            }

            .TiempoMapa2c span.HideDesktop
            {
                font-style: normal;
                font-size: 1.3em;
                position: relative;
                top: -0.5em;
                left:0.5em;
            }

            .BloqueTiempoCosta .TiempoMapa2c span.HideDesktop i {font-style: normal;}
        }

        div.BloqueTiempoCosta > div.TiempoMapa2c div.provincias h2{padding:0; font-size: 1.35em; padding-bottom: 0.25em;}

        div.BloqueTiempoCosta div.BloqueTiempo4c div.provincias span, div.BloqueTiempoCosta div.TiempoMapa2c div.provincias b {
            border-left: solid 1px white;
            padding: 0.2em 0.75em;
            /*background: #3b6a92ab;
            color: #f8f5f5d6;*/
            background: #3b6a92;
            color: #fff;
        }

        .BloqueTiempoCosta div.BloqueTiempo4c div.provincias span, .BloqueTiempoCosta div.TiempoMapa2c div.horas b {
            border-left: solid 1px #3b6a92;
            background: #dadada;
        }
        .BloqueTiempoCosta div.TiempoMapa2c div.horas b.selected{background:#fff;}
        .BloqueTiempoCosta div.TiempoMapa2c div.horas b#TiempoHoy{border:none;}

        div.BloqueTiempoCosta div.TiempoMapa2c div.provincias b#linkAsturias{border:none;}

         div.BloqueTiempoCosta div.TiempoMapa2c div.provincias b.selected{
            background: #3b6a92;
            color: #fff;
         }
        
         .BloqueTiempoCosta .submenu {z-index:9999; top:0; width:100%; max-width:999px;}

         h1.TituloTiempo{color:#65829b; text-align:left; padding-bottom:0.3em;}
         h1.TituloTiempo a{color:inherit; display:inline-block;}
         h1.TituloTiempo b{font-weight: bold; color: #3b6a92; display:inline-block;}

/* ---------------------------------------- */