/*
font-family: 'Merriweather', serif;
300, 400, 700, 900
*/

.oculto-sm{display: none;}
body{margin: 0;padding: 0;font-family: 'Merriweather', serif;font-weight: 300;font-size: 20px;line-height: 36px;color: #222;background: #fff !important;transition: background-color 1s ease-out;}
::selection{background: #ff0000;color: #fff;}
.clear{clear: both;}
.noMargin{margin-top: 0;}
.noPaddingTop{padding-top: 0 !important;}
ul{margin: 0; padding: 0; list-style-type: none;}
ul li{margin: 0; padding: 0; list-style-type: none;}
.darks{background: #1A1A1F;color: #fff;}
.main.cover{background: url('../media/images/background_cover.jpg') no-repeat center top;background-size: cover;}
.cover{height: 100vh;text-align: center;position: relative;}
.cover .title{display: flex;flex-direction: column;justify-content: center;}
.cover .logos{padding-top: 20px;}
.cover .logos a{padding: 0 10px;}
.cover .logos a img{max-width: 140px;}
.cover .logos a img.Vistazo{max-width: 160px;}
.cover .logos a img.CONNECTAS{max-width: 160px;}
.cover h1 img{max-height: 28vh;}
.cover .Illustration{position: absolute;bottom: 0;height: 90vh;width: 100vw;background: url('../media/images/main_cover.png') no-repeat center bottom;background-size: contain;z-index: 1;}
.cover .Illustration.serbio{background: url('../media/images/expediente-serbio.png') no-repeat center;background-size: 65%;}
.cover .Illustration.rasquina{background: url('../media/images/expediente-rasquina.png') no-repeat center;background-size: 65%;}
.cover .Illustration.elRodeo{background: url('../media/images/expediente-el-rodeo.png') no-repeat center;background-size: 65%;}
.cover .Illustration.villacreses{background: url('../media/images/expediente-villacreses.png') no-repeat center;background-size: 65%;}
.cover .byline{font-size: 14px;}
.cover #expedientesMenu{background: rgba(0,0,0,0.6);padding:20px 20px 0 20px;position: absolute;bottom: 0;text-align: center;width: 100vw;z-index: 2;}
.cover #expedientesMenu a{width: 25%;float: left;display: block;text-decoration: none;line-height: 1.2em;}
.cover #expedientesMenu a img{display: block;width: 60%;margin: 0 auto 5px;position: relative;-webkit-transition: all 0.2s ease;transition: all 0.2s ease;top: 0;}
.cover #expedientesMenu a span{color: white;font-size: 1.5rem;font-weight: 900;padding: 2px 3px;}
.cover #expedientesMenu a:hover img{top: -5px;}
.cover #expedientesMenu a:hover span{background: #f00;}
audio{width: 100%;}

.summary{margin-bottom: 120px;}
.summary p{font-size: 20px;font-weight: 300;display: block;}

.content{padding: 60px 0;}
.content p{margin-bottom: 25px;}
.content .byline{font-size: 1.55rem;color: #666;font-weight: 300;line-height: 1.5em;margin-bottom: 40px;border-top: 1px solid #bbb;padding-top: 20px;}

figure{margin: 60px 0;}
figure img{width: 100%;}
figure img.addBorder{box-shadow: 0 0 15px rgba(0, 0, 0, .3);padding: 15px;}
figure figcaption{color: #777;font-size: 16px;font-family: sans-serif;line-height: 1.5em;padding-top: 10px;font-weight: 400;}

p .capitalLetter{display: block;float: left;height: 86px;margin: 12px 14px 0 2px;}
.extract{margin-top: 50px;}
.extract p{background: #eee;color: #555;padding: 15px;font-size: 16px;margin-bottom: 7px;line-height: 1.5em;font-family: 'JMH Typewriter mono', serif;}
.extract a{color: #999;width: 100%;text-align: right;font-size: 11px;font-weight: 400;margin: 0 0 30px;display: block;}

.audioWrapper{margin: 40px 0 40px;display: block;}
.audioWrapper audio{width: 100%;}
.pieAudio{color: #999;font-size: 14px;font-weight: 400;margin: 0;display: block;}

h2{margin: 70px 0 40px;font-weight: 900;font-size: 3.5rem;}
h2 img{width: 80%;}
h2 img.fullImg{width: 100%;}
h3{font-size: 36px;margin-top: 50px;color: #6C338E;font-weight: 700;}

blockquote{color: #3347AE;font-style: italic;font-size: 28px;font-weight: 300;line-height: 1.5em;padding: 0;border: none;margin: 3.5rem 0;display: block;}

.dialog{}
.dialog .item{padding: 30px 15px;}
.dialog .rightAligned{text-align: right;width: 70%;float: right;}
.dialog .leftAligned{text-align: left;width: 70%;}
.dialog .name{font-size: 16px;}
.dialog .quote{font:600 20px/1.5em 'Quicksand', sans-serif;}
.dialog .rightAligned .quote{color: #D6449E;}
.dialog .leftAligned .quote{color: #6CC8D1;}


.miniMap{background: #eee;height: 300px;width: 400px;}
.miniMap.rightFloated{float: right;margin: 0 -16.66666667% 0 30px;}

.lastData {padding-top: 50vh;}
.lastData .data {margin-bottom: 1.5rem;font-size: 14px;letter-spacing: 1px;}
.lastData .data a{letter-spacing: 0;color: #f00;margin-right: 20px;text-decoration: none;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
.lastData .data a:hover{color: #fff;}
.lastData .data span{font-size: 22px;color: #f00;}
.lastData .data a:hover span{color: #fff;}
.lastData .data span.arrow{top: 3px;position: relative;}
.lastData {font-weight: 400;text-align: center;}
.lastData .serviceInfo{background: #fff;color: #1A1A1F;padding: 20px;}
.lastData img.arrowChapter{width: 15px;}
.lastData img.nextChapter{max-width: 80%;cursor: pointer;border: 2px dotted #1A1A1F;}
.lastData img.nextChapter:hover{border: 2px dotted #f00;cursor: pointer}

.PreMap {}

.PreMap p{font-size: 17px;color: #999;font-weight: 400;line-height: 22px;}
.PreMap .legend i{display: inline-block;opacity: 0.9;width: 18px;position: relative;top: 3px;margin-right: 3px;height: 18px;border-radius: 15px;background: #d6449e;border: 2px solid #7a36a3;}

.mainMap{height: 110vh;background: #eee;position: relative;}
.mainMap iframe{width: 100vw;height: 110vh;}
.mainMap .weDontLikeBanners{background: #fff;opacity: 1;position: absolute;height: 170px;width: 100vw;bottom: 0;z-index: 2;}
i.theEnd{display: inline-block;opacity: 0.9;width: 15px;position: relative;top: 3px;left: 5px;height: 15px;top: 1px;background: #f00;}

.infoReconocer img{padding: 30px 0;max-width: 100%;display: block;}
.infoReconocer h3{text-align: center;}
.irec > div {
  opacity: 0;
  transform: translateY(5vh)
}

footer{padding: 200px 0 50px;display: block;}
footer .credits{border-top: 1px dashed #999;padding-top: 40px;}
footer .credits .title{font-size: 18px;font-weight: 700;margin-bottom: 20px;}
footer .credits p{font-size: 16px;font-weight: 300;line-height: 1.7em;margin-bottom: 15px;}
footer .credits p strong{font-weight: 900;}
footer p a{color: #fff;-webkit-transition: all 0.2s ease;transition: all 0.2s ease;}
footer p a:hover{color: #ff0000;text-decoration: none;}
footer .fyi{margin-top: 40px;}
footer .fyi .logos p{margin-bottom: 10px;}
footer .fyi .logos a{padding: 0 10px 0 0;}
footer .fyi .logos a img{max-width: 110px;}
footer .fyi .logos a img.Vistazo{max-width: 160px;}
footer .fyi .logos a img.ICFJ{max-width: 210px;}
footer .fyi .logos a img.CONNECTAS{max-width: 160px;}
footer .fyi p{font-size: 16px;line-height: 1.5em;font-weight: 300;margin: 20px 0 0;}


.lazy > div {
  opacity: 0;
  transform: translateY(5vh)
}

.fs-infography {
  height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.fs-infography .info-step {
  opacity: 0;
}

.fs-infography-reverse {
  height: 100vh;
  display: flex;
  align-items: center;
}
.fs-infography .info-step {
  
}

.fs-gallery {
  height: 100vh;
  position: relative;
  padding: 0 !important;
}
.fs-gallery .frame {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  pointer-events: none;
}
.fs-gallery .frame:not(:first-child) {
  opacity: 0;
}
.fs-gallery .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-gallery .gallery-footer {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  bottom: 0;
  padding: 5rem 1.5rem 1.5rem;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  font-weight: 400;
  color: #FFFFFF;
  font-size: 18px;
  line-height: 1.5em;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=0 );
}
.fs-gallery .frame .between-containers {
  height: 100%;
  display: flex;
  align-items: center;
}
.fs-gallery .frame p.intro {
  font-size: 22px;
  line-height: 1.5em;
}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin: 50px 0 70px;} 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
figure .embed-container {margin: 0;}
  

.persons {
  display: flex;
  flex-wrap: wrap;
}
.person {
  position: relative;
  padding-bottom: 19px;
  cursor: pointer;
  overflow: hidden;
}
.person .photo {
  position: relative;
  width: 70%;
  padding-top: 70%;
  border-radius: 100%;
  background-color: #4CB648;
  overflow: hidden;
  margin: 0 auto;
}
.person .photo img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.person .photo:hover img{opacity: 0.75;}
.person .name {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4em;
  margin: 6px 0 4px;
  text-align: center;
}
.person .job {
  font-size: 14px;
  line-height: 1.4em;
  text-align: center;
}
.person svg.arrow {
  width: 32px;
  position: absolute;
  fill: #f00;
  top: 101%;
  left: calc(50% - 16px);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.person.active svg.arrow {
  transform: translateY(-100%);
}
.biodisplay {background-color: #f00;color: #FFF;width: 100%;margin-bottom: 30px;}
.biodisplay .cont-wrapper {padding: 25px 30px;}
.biodisplay .bio-content {font-size: 16px;line-height: 1.4em;}
.biodisplay .bio-content p strong{font-weight: 700;}


@media screen and (min-width:768px) and (max-width:1007px){
  .mainMap .weDontLikeBanners{height: 200px;}
  .infoReconocer img{}
}

/* Mobile */
@media screen and (max-width: 767px) {
  .oculto-xs{display: none;}
  .oculto-sm{display: block;}
	body{font-size: 18px;line-height: 34px;color: #444;font-weight: 400;}
	h2 {margin: 70px 0 35px;font-size: 2.75rem;}
	p .capitalLetter{height: 71px;margin: 12px 14px 0 2px;}
	blockquote{font-size: 24px;line-height: 1.4em;}
	.cover .logos a img {max-width: 90px;}
	.cover .logos a img.Vistazo {max-width: 140px;}
  .cover .logos a img.CONNECTAS {max-width: 140px;}
	.cover h1 img {max-width: 100%;max-height: initial;}
	.cover .byline {font-size: 14px;line-height: 1.3em;max-width: 80%;margin: 0 auto;}
	.cover .Illustration{background: url(../media/images/main_cover_mobile.png) no-repeat center bottom;background-size: contain;bottom: 20vh;}
  .cover #expedientesMenu a{width: 50%;margin-bottom: 20px;}
  .cover #expedientesMenu a img{width: 50%;}
  .cover #expedientesMenu{background: rgba(0, 0, 0, 1.0);}
	.summary{margin-bottom: 30px;}
	.dialog .quote{line-height: 1.3em;}
	.dialog .rightAligned, .dialog .leftAligned{width: 90%;}
  .mainMap .weDontLikeBanners{height: 200px;}
	.miniMap.rightFloated{width: 100%;margin: 20px 0 40px;}
	footer .fyi .logos a{margin-bottom: 10px;display: block;}
	footer .fyi .logos a img.ICFJ{margin-left: 0;}
  .fs-gallery .frame p.intro {
    font-size: 18px;
    font-weight: 500;
  }
  .infoReconocer img {width: 80%;margin: 0 auto;}
  .extract a{font-size: 13px;}
}