@import 'reset.css';
@import 'fonts.css';
@import 'popup.css';

@media (orientation: landscape) { .portrait { display:none; } }
@media (orientation: portrait) { .landscape { display:none; } }

.invisible {visibility: hidden;}
.novisible {display: none;}
.no-desktop { display: none; }
.no-responsive {display: initial; }
.no-mobile { display: initial; }
.no-scroll { overflow: hidden;  }
.clearfix:after { content: ""; display: table; clear: both; }
.fleft { float: left; text-align: left; }
.fright { float: right; text-align: right; }
.wfull { width: 100%; }
.w100 { max-width: 1800px; margin: auto; }
.w80 { width: 80%; max-width: 1400px; margin: auto; }
.ofcover { height: 100%; width:100%; object-fit: cover; object-position: 50% 50%; }
.ofcontain { height: 100%; width:100%; object-fit: contain; object-position: 50% 50%; }
.vcenter { position: absolute; top: 50%; transform: translate(0, -50%); } /* siempre dentro de un relative */
.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* siempre dentro de un relative */
.slider .flickity-page-dots { bottom: -30px; }
.slider .flickity-page-dots .dot { background: none; border: solid 1px #000000; }
.slider.dots-dentro .flickity-page-dots { bottom: 20px; }
.slider.dots-dentro .flickity-page-dots .dot { background: none; border: solid 1px #FFFFFF; }
.col { padding:0px 3%; float: left; }
.w14 { width: 25%; } .w13 { width: 33%; } .w12 { width: 50%; } .w23 { width: 66%; } 
.w15 { width: 20%; } .w25 { width: 40%; } .w35 { width: 60%; } .w45 { width: 80%; } 
.w11 { width: 10%; } .w21 { width: 20%; } .w31 { width: 30%; } .w41 { width: 40%; } .w51 { width: 50%; } .w61 { width: 60%; } .w71 { width: 70%; } .w81 { width: 80%; } .w91 { width: 90%; }
.transitionall {  -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
.transitionslow {  -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }
.arrow { border: solid black; border-width: 0 1px 1px 0; display: inline-block; padding: 2.5px; }
.right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.left { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); }
.down { transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.overflowhidden { overflow: hidden; }
.rotate {transform: rotate(180deg);}


/* GENERAL -------------------------------------------------------------------------------- */
/* Ojo! El FullPage.js pinta las capas donde quiere, no definir demasiado elementos fixed con HEADER .content.fixed etc */


BODY { font-family: 'Apercu'; font-size: 1.0rem; font-weight: normal; text-align: left; color: #000000; letter-spacing: 2px; }
A { color: #000000; }
P { line-height: 150%; }
H1, H2, H3 { font-size: 3.4rem; margin: 30px 0px; text-transform: uppercase; }
H2 { display: inline; }
H3 { font-size: 1.4rem; }
SUP {font-size: 1.6rem; position: relative; top: -30px; }

NAV {  }
NAV .wrapper { display: inline-block;  margin-bottom: 28px; }
NAV .wrapper:last-of-type { margin-bottom: 0px; } 
NAV HR { border:0; height: 0; }
NAV A { display: block; }
NAV A:hover H2 { text-decoration: underline; }

BODY #fp-nav ul li .fp-tooltip { color: #000000; }
BODY.blanco #fp-nav ul li .fp-tooltip { color: #FFFFFF; }
BODY.blanco #fp-nav ul li a span, BODY.blanco .fp-slidesNav ul li a span { background: #FFFFFF; }

/*
NAV A::before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000000; visibility: hidden; transform: scaleX(0); transition: all 0.1s ease-in-out 0s; }
NAV A:hover::before { visibility: visible; transform: scaleX(1); }
*/

BODY HEADER IMG { width: 140px;  }
BODY HEADER IMG.blanco { display:none; }
BODY.blanco HEADER IMG.blanco { display: initial;  }
BODY.blanco HEADER IMG:not(.blanco) { display: none;  }

BODY HEADER A.idioma { font-size: 1.3rem; font-weight: 100; }	
BODY HEADER A.idioma.active { font-weight: 800; text-decoration: underline; }
BODY HEADER DIV.idiomas { width: 70px; }
BODY HEADER DIV.idiomas-opciones { display: none; }
BODY HEADER DIV.idiomas-opciones A.idioma { display: block; margin: 5px; }
BODY HEADER DIV.idiomas-opciones A.idioma.novisible { display: none; }

.section { position: relative; background: #CCCCCC; }
.content { width: 100%; padding: 40px; }
.content.nav { z-index: 50; }
.content.fixed { position: fixed; z-index: 100; }
.content.over { background: #CCCCCC; height: 100vh; z-index: 10; padding: 0; opacity: 0; }
.content.over.active { width: 120%; height: 120%; opacity: 1; }
.content.over IMG { display: none; }
.content.tcenter { text-align: center;  }
.content.bottom { bottom: 0px; z-index: 50; }
.content.bottom P, .content.bottom A { text-transform: uppercase; letter-spacing: 0px; max-width: 200px; margin: auto; font-weight: 500; line-height: 120%; }
.content.absolute { position: absolute; width: 100vw; }
.content.texto { z-index:50; }
.content.texto P { max-width: 70%; font-size: 1.4rem; margin: 30px auto; }
.content.texto A { margin-right: 20px; margin-top: 20px; font-size: 1.2rem; text-transform: uppercase; border: 2px solid #000000; padding: 10px 12px; display: inline-block; }
.content.texto A.icono { padding: 10px; }
.content.texto A.icono ION-ICON { font-size: 1.1rem; top: 4px; position: relative; margin-right: 5px;}
.content.slider { opacity: .9; padding: 0;}
.content.slider IMG { height: 100vh;}

.section.blanco, BODY.blanco .section, BODY.blanco NAV A, BODY.blanco HEADER A.idioma { color: #FFFFFF; }		
.section.blanco A, BODY.blanco .section.blanco A { color: #FFFFFF; border-color: #FFFFFF; }	


.section:last-of-type .next_arrow {display:none;}
.section:last-of-type .home_arrow {display:block !important;}
/* CLASES DANI  -------------------------------------------------------------------------------- */
.popup-grid-women, .popup-grid-men {height:100vh; width: 100%; background-color:#ffffff; position:absolute; z-index:9999; display:flex; flex-direction:column; display:none; overflow: scroll;} 
.popup-grid-women.activado{display:block;}
.popup-grid-men.activado{display:block;}
.head{height:15vh; width:100%; display:flex; justify-content: center;}
.head .titular{ display:flex; justify-content: center; align-items: center; width: 80%;}
.titular h2{margin:15px 0px; font-size:2.2vw; font-weight: 400;}
.exit{ display:flex; justify-content:flex-end; align-items:center; color:#000000; cursor:pointer; font-weight: 800;text-align:center; font-size:24px;}
.exit img{width: 30px; height: 30px;margin:5px; display: block!important;}
.wrap{background-color: rgb(255, 255, 255); width: 100%; height:84vh;display:flex; flex-wrap:wrap; align-items: center; justify-content: center;}
.wrap-articulo{height:26vh; width:18%; background-color:rgb(255, 255, 255); margin:5px; display:flex; justify-content:center; align-items: center;}
.articulo{ height:95%; width:60%; background-color: rgb(255, 255, 255); display:flex; justify-content:center; align-items: center; }
.articulo video{ height:100%; }
.ediciones-anteriores{margin-top:2rem;}
.ediciones-anteriores a{margin-top: 10px; font-size:1rem;}
.ediciones-anteriores .action-desplegable {display:flex; align-items:baseline; justify-content:center; width: 100%;}
.ediciones-anteriores .action-desplegable p{margin-top: 10px; font-size:1rem; color: rgb(255, 255, 255); text-transform: uppercase;}
.ediciones-anteriores .action-desplegable img{width: 1rem; margin-left: 5px; transition: 0.4s;}
.ediciones-anteriores .desplegable {display:none; overflow-y: scroll;} 
.ediciones-anteriores .desplegable .wrapp{display:flex; flex-direction:column;} 
.ediciones-anteriores .desplegable a h2{color: rgb(254, 254, 255); font-size: 1rem; text-transform:uppercase;} 
.ediciones-anteriores .desplegable a:hover{opacity: 0.7;} 
.ediciones-anteriores .desplegable.active{display:flex;}
/* RESPONSIVE RESPONSIVE  -------------------------------------------------------------------------------- */
/* RESPONSIVE RESPONSIVE  -------------------------------------------------------------------------------- */
/* RESPONSIVE RESPONSIVE  -------------------------------------------------------------------------------- */


@media only screen and (max-width : 1600px) {

}

@media (hover: none) {

}

@media only screen and (max-width : 1024px) {
	H3 { margin: 10px 0px; }
	HEADER .content { padding: 28px; padding-top: 28px; }
	.content { padding: 28px; padding-top: 60px; }
	.content.bottom { display: none; }
}	

@media only screen and (max-width : 1023px) {
	.no-responsive {display: none;}
	.no-desktop { display: initial; }
	.wrap:last-child{padding-bottom: 3rem;}
	.wrap-articulo{width:24%;}
	.wrap-articulo:last-child{margin-bottom: 5rem;}
	.head{height:11vh;}
	.popup-grid-women, .popup-grid-men {overflow: scroll;}

}

@media only screen and (max-width : 767px), (max-height : 767px) {
	.no-mobile { display: none; }

	H1, H2, H3 { font-size: 2rem; font-weight: 500; margin: 10px 0px; }
	NAV H3 { display: none; }
	SUP { display: block; top: 0px; font-size: 1.2rem; }

	BODY HEADER IMG { width: 110px; }
	BODY HEADER A.idioma { font-size: 1.1rem; }

	.content H1, .content H2 { font-size: 1.6rem; }
	.content H3 { font-size: 1rem; }
	.content.texto P { max-width: 90%; font-size: 0.9rem; font-weight: 500; line-height: 120%; letter-spacing: 0px; margin: 15px auto; }
	.content.texto A { margin-right: 0px; display: block; margin: 10px auto; width: 80%; max-width: 400px; font-size: 1rem; }

}

@media only screen and (max-width: 600px) {
	.wrap-articulo{width:36%;}
	.wrap{justify-content:space-between; width: 65%; margin:auto;}
	.head{height:11vh;}
	.titular h2 {margin:0px 0px;font-size: 130%;}
	.ediciones-anteriores a{margin-top: 16px; font-size:1rem;}
  }