#intro{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    padding-top: 15vh;
    width: 100%;
    pointer-events: none;
}
#intro .txt{
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
    pointer-events: auto;
}
#intro .txt h1{
    font-size: 9vw;
    margin: 0;
    font-weight: 100;
    color: #e87878;
    opacity: 0;
    font-family: 'Six Caps', sans-serif;
}
#intro .txt .wrapper{
    position: absolute;
    top: 40px;
    max-width: 460px;
    opacity: 0.1;
    pointer-events: none;
}
#intro .txt .wrapper ul{list-style: none;}
#intro .txt .wrapper li{
    font-size: 11vw;
    font-weight: 100;
    color: #40b4d0;
    letter-spacing: .15em;
    display: inline-block;
    margin: 0;
    opacity:0;
    transform:  scale(0.50);
}
#intro .txt p{color: #b1b1b1; opacity: 0;margin-top: 10px;}
#theGrid .grid a{
    display: none;
}
.dropdown{
    transition: all 1s ease;
    opacity: 1;
}
.dropdown:hover{
    cursor: pointer;
    opacity: 0.7;
    color: #40b4d0;
}
.dropdown.current{
    color: #40b4d0;
    border-bottom: 2px solid #40b4d0;
    padding-bottom: 2px;
}
#theGrid .grid a.negativo .meta--details span{
    color: #a4e7ad;
}
#theGrid .grid a.positivo .meta--details span{
    color:#E87878;
}
.city{
    width: 100%;
    position: absolute;
    bottom: 0;
    display: block;
    z-index: 9999;
}
.city.SJ, .city.HD, .city.AL, .city.CA, .city.GN, .city.PN, .city.LM{display: none;}
#det_sj {
    opacity: 0;
    display: none;
}
.detail.c101{background-image: url(../img/ficha/101.png);     background-position: center;}
.detail.c102{background-image: url(../img/ficha/102.png);     background-position: center;}
.detail.c103{background-image: url(../img/ficha/103.png);     background-position: center;}
.detail.c104{background-image: url(../img/ficha/104.png);     background-position: center;}
.detail.c105{background-image: url(../img/ficha/105.png);     background-position: center;}
.detail.c106{background-image: url(../img/ficha/106.png);     background-position: center;}
.detail.c107{background-image: url(../img/ficha/107.png);     background-position: center;}
.detail.c108{background-image: url(../img/ficha/108.png);     background-position: center;}
.detail.c109{background-image: url(../img/ficha/109.png);     background-position: center;}
.detail.c110{background-image: url(../img/ficha/110.png);     background-position: center;}
.detail.c111{background-image: url(../img/ficha/111.png);     background-position: center;}
.detail.c112{background-image: url(../img/ficha/112.png);     background-position: center;}
.detail.c113{background-image: url(../img/ficha/113.png);     background-position: center;}
.detail.c114{background-image: url(../img/ficha/114.png);     background-position: center;}
.detail.c115{background-image: url(../img/ficha/115.png);     background-position: center;}
.detail.c116{background-image: url(../img/ficha/116.png);     background-position: center;}
.detail.c117{background-image: url(../img/ficha/117.png);     background-position: center;}
.detail.c118{background-image: url(../img/ficha/118.png);     background-position: center;}
.detail.c119{background-image: url(../img/ficha/119.png);     background-position: center;}
.detail.c120{background-image: url(../img/ficha/120.png);     background-position: center;}

.detail.c201{background-image: url(../img/ficha/201.png);     background-position: center;}
.detail.c202{background-image: url(../img/ficha/202.png);     background-position: center;}
.detail.c203{background-image: url(../img/ficha/203.png);     background-position: center;}
.detail.c204{background-image: url(../img/ficha/204.png);     background-position: center;}
.detail.c205{background-image: url(../img/ficha/205.png);     background-position: center;}
.detail.c206{background-image: url(../img/ficha/206.png);     background-position: center;}
.detail.c207{background-image: url(../img/ficha/207.png);     background-position: center;}
.detail.c208{background-image: url(../img/ficha/208.png);     background-position: center;}
.detail.c209{background-image: url(../img/ficha/209.png);     background-position: center;}
.detail.c210{background-image: url(../img/ficha/210.png);     background-position: center;}
.detail.c211{background-image: url(../img/ficha/211.png);     background-position: center;}
.detail.c212{background-image: url(../img/ficha/212.png);     background-position: center;}
.detail.c213{background-image: url(../img/ficha/213.png);     background-position: center;}
.detail.c214{background-image: url(../img/ficha/214.png);     background-position: center;}
.detail.c215{background-image: url(../img/ficha/215.png);     background-position: center;}

.detail.c301{background-image: url(../img/ficha/301.png);     background-position: center;}
.detail.c302{background-image: url(../img/ficha/302.png);     background-position: center;}
.detail.c303{background-image: url(../img/ficha/303.png);     background-position: center;}
.detail.c304{background-image: url(../img/ficha/304.png);     background-position: center;}
.detail.c305{background-image: url(../img/ficha/305.png);     background-position: center;}
.detail.c306{background-image: url(../img/ficha/306.png);     background-position: center;}
.detail.c307{background-image: url(../img/ficha/307.png);     background-position: center;}
.detail.c308{background-image: url(../img/ficha/308.png);     background-position: center;}

.detail.c401{background-image: url(../img/ficha/401.png);     background-position: center;}
.detail.c402{background-image: url(../img/ficha/402.png);     background-position: center;}
.detail.c403{background-image: url(../img/ficha/403.png);     background-position: center;}
.detail.c404{background-image: url(../img/ficha/404.png);     background-position: center;}
.detail.c405{background-image: url(../img/ficha/405.png);     background-position: center;}
.detail.c406{background-image: url(../img/ficha/406.png);     background-position: center;}
.detail.c407{background-image: url(../img/ficha/407.png);     background-position: center;}
.detail.c408{background-image: url(../img/ficha/408.png);     background-position: center;}
.detail.c409{background-image: url(../img/ficha/409.png);     background-position: center;}
.detail.c410{background-image: url(../img/ficha/410.png);     background-position: center;}

.detail.c501{background-image: url(../img/ficha/501.png);     background-position: center;}
.detail.c502{background-image: url(../img/ficha/502.png);     background-position: center;}
.detail.c503{background-image: url(../img/ficha/503.png);     background-position: center;}
.detail.c504{background-image: url(../img/ficha/504.png);     background-position: center;}
.detail.c505{background-image: url(../img/ficha/505.png);     background-position: center;}
.detail.c506{background-image: url(../img/ficha/506.png);     background-position: center;}
.detail.c507{background-image: url(../img/ficha/507.png);     background-position: center;}
.detail.c508{background-image: url(../img/ficha/508.png);     background-position: center;}
.detail.c509{background-image: url(../img/ficha/509.png);     background-position: center;}
.detail.c510{background-image: url(../img/ficha/510.png);     background-position: center;}
.detail.c511{background-image: url(../img/ficha/511.png);     background-position: center;}

.detail.c601{background-image: url(../img/ficha/601.png);     background-position: center;}
.detail.c602{background-image: url(../img/ficha/602.png);     background-position: center;}
.detail.c603{background-image: url(../img/ficha/603.png);     background-position: center;}
.detail.c604{background-image: url(../img/ficha/604.png);     background-position: center;}
.detail.c605{background-image: url(../img/ficha/605.png);     background-position: center;}
.detail.c606{background-image: url(../img/ficha/606.png);     background-position: center;}
.detail.c607{background-image: url(../img/ficha/607.png);     background-position: center;}
.detail.c608{background-image: url(../img/ficha/608.png);     background-position: center;}
.detail.c609{background-image: url(../img/ficha/609.png);     background-position: center;}
.detail.c610{background-image: url(../img/ficha/610.png);     background-position: center;}
.detail.c611{background-image: url(../img/ficha/611.png);     background-position: center;}

.detail.c701{background-image: url(../img/ficha/701.png);     background-position: center;}
.detail.c702{background-image: url(../img/ficha/702.png);     background-position: center;}
.detail.c703{background-image: url(../img/ficha/703.png);     background-position: center;}
.detail.c704{background-image: url(../img/ficha/704.png);     background-position: center;}
.detail.c705{background-image: url(../img/ficha/705.png);     background-position: center;}
.detail.c706{background-image: url(../img/ficha/706.png);     background-position: center;}

.intro_letter{
  animation: typeIntroFrames linear 2s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: typeIntroFrames linear 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: typeIntroFrames linear 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -ms-animation: typeIntroFrames linear 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}
.intro_letter.l1{
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -ms-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s;
}
.intro_letter.l2{
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.intro_letter.l3{
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.intro_letter.l4{
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
    -ms-animation-delay: 0.9s;
    -o-animation-delay: 0.9s;
    animation-delay: 0.9s;
}
.intro_letter.l5{
    -webkit-animation-delay: 1.2s;
    -moz-animation-delay: 1.2s;
    -ms-animation-delay: 1.2s;
    -o-animation-delay: 1.2s;
    animation-delay: 1.2s;
}
.intro_letter.l6{
    -webkit-animation-delay: 1.4s;
    -moz-animation-delay: 1.4s;
    -ms-animation-delay: 1.4s;
    -o-animation-delay: 1.4s;
    animation-delay: 1.4s;
}
@keyframes typeIntroFrames{
  0% {
    opacity:0;
    transform:  scale(0.50);
  }
  100% {
    opacity:1;
    transform:  scale(1.00) ;
  }
}
@-moz-keyframes typeIntroFrames{
  0% {
    opacity:0;
    -moz-transform:  scale(0.50);
  }
  100% {
    opacity:1;
    -moz-transform:  scale(1.00) ;
  }
}
@-webkit-keyframes typeIntroFrames {
  0% {
    opacity:0;
    -webkit-transform:  scale(0.50);
  }
  100% {
    opacity:1;
    -webkit-transform:  scale(1.00) ;
  }
}
@-ms-keyframes typeIntroFrames {
  0% {
    opacity:0;
    -ms-transform:  scale(0.50);
  }
  100% {
    opacity:1;
    -ms-transform:  scale(1.00) ;
  }
}

.startCallanimation{
  animation: startCallFrames linear 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: startCallFrames linear 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: startCallFrames linear 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -ms-animation: startCallFrames linear 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}
@keyframes startCallFrames{
  0% { transform:  rotate(0deg);}
  20%{ transform:  rotate(5deg);}
  40%{ transform:  rotate(-2deg);}
  60%{ transform:  rotate(2deg);}
  80%{ transform:  rotate(-1deg);}
  100%{transform:  rotate(0deg);}
}
@-moz-keyframes startCallFrames{
  0% { -moz-transform:  rotate(0deg);}
  20%{ -moz-transform:  rotate(5deg);}
  40%{ -moz-transform:  rotate(-2deg);}
  60%{ -moz-transform:  rotate(2deg);}
  80%{ -moz-transform:  rotate(-1deg);}
  100%{-moz-transform:  rotate(0deg);}
}
@-webkit-keyframes startCallFrames {
  0% { -webkit-transform:  rotate(0deg);}
  20%{ -webkit-transform:  rotate(5deg);}
  40%{ -webkit-transform:  rotate(-2deg);}
  60%{ -webkit-transform:  rotate(2deg);}
  80%{ -webkit-transform:  rotate(-1deg);}
  100%{-webkit-transform:  rotate(0deg);}
}
@-ms-keyframes startCallFrames {
  0% { -ms-transform:  rotate(0deg);}
  20%{ -ms-transform:  rotate(5deg);}
  40%{ -ms-transform:  rotate(-2deg);}
  60%{ -ms-transform:  rotate(2deg);}
  80%{ -ms-transform:  rotate(-1deg);}
  100%{-ms-transform:  rotate(0deg);}
}

@media screen and (max-width: 599px) {
    #intro .txt {pointer-events: none !important;}
    #intro .txt h1 {font-size: 25vw;padding-top: 20vw;}
    #intro .txt p {width: 90vw;margin: 50px auto;}
}