/*
	NORMALIZE
*/

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
  display: block;
}

audio, canvas, video {
  display: inline-block;
}

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

a {
  text-decoration: none;
  transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

a:hover, a:focus, a:active {
  text-decoration: none;
  outline: none;
}

b, strong {
  font-weight: bold;
}

code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

small {
  font-size: 80%;
}

img {
  border: 0;
  display: inline-block;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  margin: 0;
}

ul, li {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
  margin-top: 0;
}

ol li {
  list-style-type: decimal;
}

p {
  line-height: 1em;
  margin-bottom: 0;
  margin-top: 0;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  margin-top: 0;
  margin-bottom: 0;
}

blockquote {
  margin: 0;
  padding: 0;
}




/*
  FUENTES
*/

/* FONT-FACE ELIMINADO */

  
/* FONT-FACE ELIMINADO */

  
/* FONT-FACE ELIMINADO */


/* FONT-FACE ELIMINADO */

  
/* FONT-FACE ELIMINADO */


/* FONT-FACE ELIMINADO */


@font-face {
font-family: 'Playfair Display';
src: url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-regular-webfont.eot');
src: url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-regular-webfont.woff') format('woff'),url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-regular-webfont.ttf') format('truetype'), url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-regular-webfont.svg#PlayfairDisplay') format('svg');
font-weight: normal;
font-style: normal;
}
  
@font-face {
font-family: 'Playfair Display';
src: url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-italic-webfont.eot');
src: url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-italic-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-italic-webfont.woff') format('woff'),url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-italic-webfont.ttf') format('truetype'), url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-italic-webfont.svg#PlayfairDisplay') format('svg');
font-weight: normal;
font-style: italic;
}
  
@font-face {
font-family: 'Playfair Display';
src: url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-bold-webfont.eot');
src: url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-bold-webfont.woff') format('woff'),url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-bold-webfont.ttf') format('truetype'), url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-bold-webfont.svg#PlayfairDisplay') format('svg');
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: 'Playfair Display';
src: url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-bolditalic-webfont.eot');
src: url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-bolditalic-webfont.woff') format('woff'), url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-bolditalic-webfont.ttf') format('truetype'), url('/fonts/v1.x/v1.0/playfair_display/playfairdisplay-bolditalic-webfont.svg#PlayfairDisplay') format('svg');
font-weight: 700;
font-style: italic;
}


/*
 Generales  
*/

body{ background-color:#FF8B64; padding: 120px; font-family: 'MarcinAntB', sans-serif;}
main{  display: block; text-align:center; }

/*
  Portada
*/

.mujeres{ margin: 0 auto; padding: 0; display: block; display: inline-block; }
.mujeres li{ margin:1px 1px 0 0; width: calc(20% - 1px); padding-bottom: 16.5%; height: 0; float: right; position: relative; text-align: center; overflow:hidden; transition: all 0.5s linear;}
.mujeres li.primer{ width: calc(40% - 1px); padding-bottom: 33%; background-color: #FF8B64; text-align: right;  animation: moverXopacidad 1s forwards; }
.mujeres li.primer h1{ font-family: 'Playfair Display'; font-size: 80px; font-weight: 700; font-style: italic; line-height: 70%; margin:20px 0  40px; letter-spacing: -2px;}
.mujeres li.primer h1 b{ display: block;}
.mujeres li.primer h1 span{ font-size:36px;}
.mujeres li.primer p{ padding-left:40px; font-size: 16px; line-height: 145%; margin-bottom: 40px;}

.mujeres li.primer .logo-pais {  background: url(/iconos/v2.x/v2.0/logos/el_pais_blanco.svg) no-repeat center; background-size: cover; width: 100px; height: 21px; text-indent: 9999px; display: block; float: right; overflow: hidden;}
.mujeres li.primer .logo-materia { background: url(/iconos/v2.x/v2.0/logos/materia_blanco.svg) center no-repeat; background-size: cover; display: block; text-indent: 9999px; width: 70px; height: 25px; float: right; overflow: hidden; margin-left: 20px;display: none;}

.mujeres li.doble-ancho{  width: calc(40% - 1px); }

.mujeres li a{ color: #FFF;font-family: 'Playfair Display'; display: block;width: 100%; height: 100%;  }
.mujeres li img{ object-fit: cover; position: absolute; top: 0; left: 0; height: 100%; width: 100%; transition: all 0.5s ; }
.mujeres li h2{ position: absolute; top: 50%; left: 50%;transform: translate(-50%,-50%); font-size: 26px; font-style: italic; text-align: center; width: 70%;  opacity: 0; transition: all 0.5s ;  word-spacing: 100vw; }
.mujeres li.mujer:hover{
   -moz-box-shadow: rgba(0, 0, 0, 1) 10px 10px 55px inset;
  -webkit-box-shadow: rgba(0, 0, 0, 1) 10px 10px 55px inset;
  box-shadow: rgba(0, 0, 0, 1) 10px 10px 55px inset;
}
.mujeres li:hover h2{ opacity:1; }
.mujeres li:hover img{ width: 125%; height: 125%; opacity: 0.8} 

.mujeres li.cita{text-align: left;}
.mujeres li.cita .contenido-cita{ position: absolute; top: 50%; transform: translateY(-50%); padding: 0 30px;  animation: moverYopacidad 1s forwards; animation-delay: 0.8s; opacity: 0}
.mujeres li.doble-ancho .contenido-cita{ padding: 0 60px; }
.mujeres li.cita h3{ font-family: 'Playfair Display'; font-size: 18px; font-weight: 700; letter-spacing: -1px; margin-bottom: 20px; }
.mujeres li.doble-ancho h3{ font-size: 22px; }
.mujeres li.cita .nombre{  font-weight: 700; color:#FFF;  font-size:13px; text-transform: uppercase;}

.barra_compartir{ position: absolute; left: 50%; top: 50%;  pointer-events: auto; transform: translate(-50%,-50%); display: block; width: 150px; height: 40px; }
.barra_compartir ul{margin: 0;padding: 0;list-style: none;}
.barra_compartir ul li{display: block;margin: 0;float: left;width: 40px;height: 40px; margin:0 5px }
.barra_compartir ul li a{display: inline-block;text-indent: 100%;white-space: nowrap; overflow: hidden;width: 40px;height: 40px; border: 2px solid #FFF; background-position: center; background-size: auto 16px;background-repeat: no-repeat; border-radius: 100%; transition: all 0.6s; }
.barra_compartir ul li a:hover{ opacity: 0.5 }
.barra_compartir .facebook{background-image: url(../img/facebook.svg);}
.barra_compartir .twitter{background-image: url(../img/twitter.svg);}
.barra_compartir .googlemas1{background-image: url(../img/google.svg);}

footer{ text-align: center; margin:100px auto 50px auto; clear: both; font-size: 14px; color: #000; position: relative; padding-top: 50px;max-width: 800px;}
footer:before{ content: ''; width: 240px; position: absolute; top: 0; left: 50%; height: 2px; display: block; background: #000; transform: translateX(-50%); }
footer p{ margin-bottom: 10px;  line-height: 135% }
footer p.separador{ margin-top: 40px; }
footer a{ color: #000; font-weight: 600;}

footer h1{ font-family: 'Playfair Display'; font-size: 60px; font-weight: 700; font-style: italic; line-height: 70%; margin:20px 0  40px; letter-spacing: -2px;}
footer h1 span{ font-size:36px;}


/*
  Ficha
*/
.ficha-mujeres{ width: 100%; min-height: calc(100vh - 240px); background-color: #FFF; position: relative; text-align: right; padding: 50px;}
.ficha-mujeres h1{ padding-left: 65%; margin-bottom: 30px; font-family: 'Playfair Display'; font-size: 70px; font-weight: 700; font-style: italic; line-height: 100%; letter-spacing: -2px; animation: moverXopacidad 1s forwards; word-spacing: 100vw;}  
.ficha-mujeres .foto-ficha{  position: absolute; top: 0; left: 0; object-fit: cover; height: 100%; width: 60%; transition: all 0.5s ;}
.ficha-mujeres p{ padding-left: 65%; font-size: 15px; margin-bottom: 30px; line-height: 145%;}
.ficha-mujeres p.profesion{ margin-bottom: 0; font-weight: 700;  }
.ficha-mujeres p.fechas{ font-weight: 700;}
.ficha-mujeres p.cita{ font-family: 'Playfair Display'; font-size: 24px; line-height: 120%; font-style: italic; font-weight: 700; letter-spacing: -1px; margin-bottom: 40px; padding-left: 70%; }
.ficha-mujeres a.mas-info{ font-weight: 800; font-size: 13px; color:#000; text-transform: uppercase;  display: block;}

.botones-galeria a{ position: absolute; top: 50%; transform: translateY(-50%); display: block; display: block; width: 30px; height: 240px;}
.botones-galeria a.siguiente{ right: -30px;}
.botones-galeria a.anterior{ left: -30px;}
.botones-galeria a figure{ opacity:0; height: 240px; position: absolute; left:0; top: 0; transition: all 0.5s; pointer-events: none; overflow: hidden;}
.botones-galeria a figure img{ width: 320px; height: 240px; max-width: none; } 
.botones-galeria a .boton{ z-index:3; border:1px solid #000; position: absolute; left: 0; top: 105px; width: 240px; background: #000; display: inline-block; text-align: center; height: 30px; line-height: 30px; text-transform: uppercase; color: #FFF; font-weight: 700; font-size: 15px; transform: translateX(-105px) rotate(90deg);}
.botones-galeria a.anterior .boton{transform: translateX(-105px) rotate(-90deg);}
.botones-galeria a:hover figure{ opacity:1; pointer-events: auto;}
.botones-galeria a.siguiente figure{ left: auto; right: 0;} 
.botones-galeria .nombre-mujer{position: absolute; top: 50%; left: -50%;transform: translate(-50%,-50%); font-family: 'Playfair Display'; font-style: italic;  font-size: 26px; text-align: center; width: 70%; color: #FFF; transition: all 0.5s linear;  word-spacing: 100vw;}
.botones-galeria a.siguiente .nombre-mujer{ left: 150%; }
.botones-galeria a:hover .nombre-mujer{  left: 50%; }

.ficha-mujeres .barra_compartir{ position: relative; left: auto; top: auto;  pointer-events: auto; transform:none; display: inline-block; width: 150px; height: 40px; clear: both; margin-top: 30px;  }
.ficha-mujeres .barra_compartir ul li a{border: 2px solid #000;}
.ficha-mujeres .barra_compartir .facebook{background-image: url(../img/facebook_negro.svg);}
.ficha-mujeres .barra_compartir .twitter{background-image: url(../img/twitter_negro.svg);}
.ficha-mujeres .barra_compartir .googlemas1{background-image: url(../img/google_negro.svg);}

.close-button { height: 36px; width: 36px; position: absolute; top: 10px; left: 10px; box-sizing: border-box; line-height: 36px; display: inline-block; text-indent: 9999em; overflow: hidden;}
.close-button:before, .close-button:after { transform: rotate(-45deg); content: ""; position: absolute; top: 50%; left: 50%; margin-top: -5px; margin-left: -18px; display: block; height: 4px; width: 36px;background-color: #fff; transition: all 0.25s ease-out;}
.close-button:after { transform: rotate(-135deg);}
.close-button:hover:before, .close-button:hover:after {  transform: rotate(0deg);}

/*
  Responsive
*/

@media (max-width: 1499px){

  body{ padding: 80px;}

  .mujeres li.primer h1{ font-size: 70px;  margin:10px 0  20px;}
  .mujeres li.primer h1 span{ font-size:34px;}
  .mujeres li.primer p{  margin-bottom: 20px;}
} 


@media (max-width: 1279px){

  body{ padding: 40px;}

  .mujeres li.primer h1{ font-size: 60px; margin-top: 1px  }
  .mujeres li.primer h1 span{ font-size:30px;}
  .mujeres li.primer p{ padding-left:20px; font-size: 15px; line-height: 135%;}
  .mujeres li.cita h3{ font-size: 17px;  margin-bottom: 10px; }
  .mujeres li.cita .contenido-cita{ padding: 0 20px; }
  .mujeres li.cita .nombre{  font-size:12px;}
  .mujeres li h2{  font-size: 20px;} 

  .ficha-mujeres h1{ font-size: 60px;}  
  .ficha-mujeres p.cita{ font-size: 22px;  padding-left: 65%; }
}

@media (max-width: 1023px){

  .mujeres li{ width: calc(25% - 1px); }
  .mujeres li.primer{ width: calc(50% - 1px); }
  .mujeres li.doble-ancho{  width: calc(50% - 1px); }
  .empty{ display: none; }
  .mujeres li.primer h1{ font-size: 55px; margin-top: 1px  }
  .mujeres li.primer h1 span{ font-size:28px;}

  .ficha-mujeres h1{ font-size: 50px; padding-left: 60%; margin-bottom: 20px; letter-spacing: -2px;}  
  .ficha-mujeres .foto-ficha{  width: 55%;}
  .ficha-mujeres p{ padding-left: 60%; margin-bottom: 20px; line-height: 135%;}
  .ficha-mujeres p.cita{ font-size: 20px;  padding-left: 60%; }

}

@media (max-width: 899px){

  body{ padding: 30px;}

  .mujeres li{ width: calc(33% - 1px); padding-bottom: 25%; }
  .mujeres li.primer{ width: calc(66% - 1px); padding-bottom: 50%; }
  .mujeres li.doble-ancho{  width: calc(66% - 1px); }

    .mujeres li.cita .contenido-cita{ padding: 0 15px; }

  .ficha-mujeres{ min-height: auto; background-color: transparent;  padding:0; text-align: left; }
  .ficha-mujeres h1{ padding: 0; margin-bottom: 30px; font-size: 50px; }  
  .ficha-mujeres .foto-ficha{  position: relative; top: auto; left: auto; object-fit: fill; height: auto; width: calc(100% + 60px); max-width: none; margin:0 -30px 30px;}
  .ficha-mujeres p{ padding:0;}
  .ficha-mujeres p.cita{  font-size: 24px;  padding-left: 0;  text-align: center; max-width: 80%; margin:0 auto 30px;}

  .ficha-mujeres .barra_compartir{ margin:20px 50%; transform: translate(-50%,0); display: block; width: 150px; height: 40px; }
  .ficha-mujeres .barra_compartir ul li a{border: 2px solid #FFF;}
  .ficha-mujeres .barra_compartir .facebook{background-image: url(../img/facebook.svg);}
  .ficha-mujeres .barra_compartir .twitter{background-image: url(../img/twitter.svg);}
  .ficha-mujeres .barra_compartir .googlemas1{background-image: url(../img/google.svg);}

  .botones-galeria a{ top: 40vw; transform: none; }

  .close-button { left: auto; right: 0; top: 8px }
}

@media (max-width: 767px){

  body{ padding: 20px;}

  .mujeres li{ width: calc(50% - 1px); padding-bottom: 40%; }
  .mujeres li.primer{ width: 100%; padding-bottom: 20px; overflow: visible; height: auto; }
  .mujeres li.doble-ancho{  width: 100%; }
  .mujeres li.primer p{ padding-left:0; font-size: 15px; line-height: 145%; }

  .ficha-mujeres h1{ font-size: 38px; padding-right: 40px;  word-spacing: 100vw; } 
  .ficha-mujeres .foto-ficha{  ; width: calc(100% + 40px); max-width: none; margin:0 -20px 30px;}

  .botones-galeria a.siguiente{  right: -20px;}
  .botones-galeria a.anterior{ left: -20px;}

  .botones-galeria a:hover figure{ display: none;}

  footer h1{ font-size: 46px;}
  footer h1 span{ font-size:26px;}
}

@media (max-width: 399px){

  .mujeres li.cita .contenido-cita{ padding: 0 5px; }
  .mujeres li.cita h3{ font-size: 15px; line-height: 100%; margin-bottom: 5px; }
  .mujeres li.cita .nombre{  font-size:11px;}

  .botones-galeria a{ top: 45vw}

  footer h1{ font-size: 34px;}
  footer h1 span{ font-size:22px;}

  .barra_compartir{ width: 135px;  }
  .barra_compartir ul li{display: block;margin: 0;float: left;width: 40px;height: 40px; margin:0 2px }
}

@keyframes moverXopacidad {
  0% {
    transform: translateX(8rem);
    opacity: 0;
    visibility: hidden;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }
}

@keyframes moverYopacidad {
  0% {
    transform: translateY(4rem);
    opacity: 0;
    visibility: hidden;
  }
  100% {
    transform: translateY(-50%);
    opacity: 1;
    visibility: visible;
  }
}