/*Infografia CSS*/

@-webkit-keyframes bounce {
  0% {
    top: 0em;
  }
  50% {
    top: .25em;
  }
  100% {
    top: 0em;
  }
}
@-moz-keyframes bounce {
  0% {
    top: 0em;
  }
  50% {
    top: .25em;
  }
  100% {
    top: 0em;
  }
}
@-o-keyframes bounce {
  0% {
    top: 0em;
  }
  50% {
    top: .25em;
  }
  100% {
    top: 0em;
  }
}
@keyframes bounce {
  0% {
    top: 0em;
  }
  50% {
    top: .25em;
  }
  100% {
    top: 0em;
  }
}

body { background: #f5f4f4; }

#infografia {
  width: 1220px;
  max-width: 1280px;
  padding: 0 50px 50px 50px;
  margin: 0px auto;
  position: relative;
  /*max-height: 4100px;*/
}

#single-infografia { background: #fff; }

.info-header { display: none; }

.bloque {
  width: 100%;
  position: relative;
}

#header { display: inline-block; width: 100%; }

.logo { width: 70px; height: 70px; margin:30px 0 0 30px; float: left; }
.logo .logo-info a {
  
}
.logo .logo-info a img {
  width: 100%;
  /*position: absolute;
  top: 30px;
  left: 30px;
  background: #0079c8;*/
}

#tarjeta { float: right; }
#tarjeta::after { content: ""; display: block; clear: both }
.tarjeta { display: table; margin-right: 36px; }
.tarjeta > div { display: table-cell; vertical-align: bottom; }
.tarjeta p {
  color: #8ba7cd;
  font-size: 12px;
  font-style: italic;
  margin-right: 15px;
  padding: 0;
  font-weight: 500;
  text-align: right;
  position: relative;
  bottom: 5px;
}

/*Show only on mobile*/
.tarjeta-img-mobile { display: none; }
.tarjeta-img { display: block; /*top: -300px;*/ position: relative; }
.claim-tarjeta { /*opacity: 0;*/ }

#titulo {
  margin-top: 48px;
}
.titulo { width: 100%; clear: both;text-align: center; }
.titulo .image {
  position: relative;
  width: 300px;
  margin: 0px auto;
}
.titulo .image img {
  z-index: 3;
  position: relative;
  margin: 0px auto;
  /*opacity: 0;*/
  top: -150px;
}
.titulo .title {
  /*position: relative;
  top: -150px;
  opacity: 0;
  z-index: 999;*/
}
.titulo .title h1 { color: #2e3f55; font-size: 35px; text-transform: uppercase; margin: 50px 0 0px 0; }
.titulo .title p { color: #00a0e0;font-size: 18px; margin: 30px 0 0px 0; }
.titulo .title p span{ color: #2e3f55;}

.links_header_title {
  position: relative;
  z-index: 99;
  margin-top: 50px;
}
.link_header_title {
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
  width: 50%;
  height: 370px;
  z-index: 0;
  cursor: pointer;
  /*opacity: 0;*/
  position: relative;

}
.link_header_title.pago-directo{background: url(../../img/i2/pago_directo.png)center 0 no-repeat;}
.link_header_title.pago-directo:hover,
.link_header_title.pago-directo.active {background:#bfe0e0 url(../../img/i2/pago_directo_on.png)center 0 no-repeat;}
.link_header_title.reembolso{background: url(../../img/i2/reembolso.png)center 0 no-repeat;}
.link_header_title.reembolso:hover,
.link_header_title.reembolso.active {background:#dff4fc url('../../img/i2/reembolso_on.png')center 0 no-repeat;}
.link_header_title.active { border-bottom: none; }

.link_header_title small {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #219ed6;
  position: absolute;
  bottom: 40px;
  text-align: center;
  width: 100%;  
}
.link_header_title p span{
  max-width: 150px;
  margin: 0 auto;
  padding: 5px 30px 5px 30px;
  -webkit-transition: background-color 0.5s ease-out linear;
  transition: background-color 0.5s ease-out linear;
}
.link_header_title:hover p span,
.link_header_title.active p span {
  letter-spacing: 8px;
  color: #00335b;
  padding: 5px 30px 15px 30px;
  border-bottom: 1px #00335b solid;
}
.link_header_title:hover small,
.link_header_title.active small {bottom: 20px;}
.link_header_title img {
  width: 100%;
  max-width: 230px;
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 -25%;
}
.link_header_title p {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 500;
  color: #031522;
  position: absolute;
  bottom: 50px;
  text-align: center;
  width: 100%;
}
.titulo_texto {
  background: #bfe0e0;
  display: inline-block;
}
.titulo_texto.opcion-2 { background: #dff4fc; }
.titulo_texto p {
  font-size: 17px;
  color: #00335b;
  width: 50%;
  text-align: center;
  margin: 80px auto 238px auto;
}

.oculto { display: none; }

#brazo,
#reloj,
#mundo,
#mosaico,
#telefono,
#paises,
#ordenador,
#corazon,
#solicitud,
#final { display: table; position: relative; width: 100%; height: 600px; margin: -170px 0 0 0; }

#reloj { margin: 0; height: 1000px; }
#mundo { margin: 0; height: 500px; }
#mosaico { margin: 0; height: 850px; }
#telefono { margin: 0; height: 680px; }
#paises { margin: 0; height: 660px; }
#ordenador { height: 840px; }
#corazon { margin: 0; height: 780px; }
#solicitud { margin: 0; height: 740px; }
#final { margin: 0; height: 77px; }

.brazo img,
.reloj img,
.mundo img,
.telefono img,
.ordenador img,
.corazon img,
.solicitud img,
.casas00 img{
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -58px;
}
.reloj img { margin-left: -112px; z-index: 10; }
.reloj img.arrow {
  margin-left: -24px;
  top: 215px;
  z-index: 1;
}
.mundo img { margin-left: -165px; z-index: 10; }

.telefono img.linea-descontinua {     z-index: 20;
    margin-left: -6px;
    top: 0;}
.telefono img.iconos {     z-index: 10;
    margin-left: -98px;
    top: 105px;}
.telefono img.mano {     z-index: 30;
    margin-left: -47px;
    top: 196px;}
.telefono img.mundo {     z-index: 10;
    margin-left: 6px;
    top: 90px; }

.brazo img.nube0 { top: 270px; left: auto; right: 290px; margin: 0; }
.brazo img.nube1 { top: 348px; left: 295px; margin: 0; }
.brazo img.nube2 { top: 360px; left: 340px; margin: 0; }
.reloj img.nube3 { top: 188px; left: 384px; margin: 0; }
.reloj img.nube4 { top: 170px; left: 680px; margin: 0; }
.reloj img.nube5 { top: 387px; left: 398px; margin: 0; }
.reloj img.nube6 { top: 318px; left: 422px; margin: 0; }
.reloj img.nube7 { top: 345px; left: 586px; margin: 0; }
.reloj img.nube8 { top: 346px; left: 669px; margin: 0; }

.brazo p {
  position: absolute;
  bottom: 90px;
  left: 50%;
  width: 30%;
  text-align: center;
  margin: 0 0 0 -168px;
  color: #00335b;
}

.mundo p {
  position: absolute;
  background: #ccecf9;
  text-align: center;
  padding: 110px 200px;
  font-size: 20px;
  margin: 0;
  top: 165px;
  z-index: 1;
  color: #00335b;
}
.mundo p span { background: #fff; }

.reloj > strong { font-size: 26px; color: #239ed6; text-transform: uppercase; position: absolute; top: 270px; left: 50%; margin-left: -108px; }
.reloj > span { font-size: 128px; font-weight:600; color: #239ed6; text-transform: uppercase; position: absolute; top: 300px; left: 50%; margin-left: -85px; z-index: 10; }
.reloj > span.subtitle { font-size: 29px; font-weight: 100; color: #ed7102; text-transform: uppercase; top: 424px; margin-left: -62px; }

.reloj > div h2, .reloj > div h3 {position: absolute; font-size: 14px; color: #ed7102; width: 100%; } 
.reloj > div p { position: absolute; font-size: 14px; color: #00335b;}
.reloj > div h2 { text-transform: uppercase; top:120px;}
.reloj > div h3 { text-transform: uppercase; top:140px; color: #fff; background: #239ed6; display: inline-block; padding: 2px 8px 0; line-height: 20px; }
.reloj > div { position: absolute; width: 30%; left: 50%; margin: 0; top: 480px;}
.reloj > div.doctor { text-align: left;  }
.reloj > div.doctor img { position: absolute; left: 20px; margin-left: 0;}
.reloj > div.doctor h2, .reloj > div.doctor h3, .reloj > div.doctor p{left: 20px;}
.reloj > div.bocadillos { text-align: right; background: url('../../img/i2/linea_puntos.png') no-repeat right 0; margin-left: -336px; display: block; height: 100%; }
.reloj > div.bocadillos img { position: absolute; right:0; margin-left:-20px; }
.reloj > div.bocadillos h2, .reloj > div.bocadillos h3, .reloj > div.bocadillos p{left: -20px;}
.reloj > div.doctor p,
.reloj > div.bocadillos p{top: 170px; margin-right: 20px;}
.reloj > div.ambulancia { top: 800px; width: 100%; left: 0; margin: 0; }
.reloj > div.ambulancia > p { width: 22%; text-align: right; position: absolute; left: 50%; text-transform: uppercase; margin-left: -275px; color: #00335b; font-size: 16px; }
.reloj > div.ambulancia > p > a { color: #fff; background: #239ed6; padding: 4px; }
.reloj > div.ambulancia > img { position: absolute; left: 50%; margin-left: -24px; }

.mosaico > div { position: absolute; width: 50%; left: 50%; top: 240px;}
.mosaico > div.iconos { left: 0; }
.mosaico > div.iconos > img { position: absolute; }
.mosaico > div.iconos > img.ambulancia { top: 290px; right: 160px; }
.mosaico > div.iconos > img.bocadillos { top: 0; right: 114px; }
.mosaico > div.iconos > img.brazo { top: 0; right: 0; }
.mosaico > div.iconos > img.burbuja { top: 100px; left: 310px; }
.mosaico > div.iconos > img.calendario { top: 236px; left: 80px; }
.mosaico > div.iconos > img.clock { top: 114px; left: 114px; }
.mosaico > div.iconos > img.corazon { top: 256px; right: 234px; }
.mosaico > div.iconos > img.enfermero { top: 14px; left: 200px; }
.mosaico > div.iconos > img.estetoscopio { top: 138px; left: 220px; }
.mosaico > div.iconos > img.luna { top: -40px; right: 82px; }
.mosaico > div.iconos > img.notas { top: 120px; right: 155px; }
.mosaico > div.iconos > img.plus0 { top: 200px; left: 90px; }
.mosaico > div.iconos > img.plus1 { top: 220px; left: 224px; }
.mosaico > div.iconos > img.plus2 { top: 355px; left: 275px; }
.mosaico > div.iconos > img.probetas { top: 230px; left: 175px; }
.mosaico > div.iconos > img.mobile { display: none; }

.mosaico > div > h2 { font-size: 40px; font-weight: 100; color: #2e3f55; width: 50%; line-height: 36px; margin-left: 30px; margin-top: 0;}
.mosaico > div > h3 { font-size: 18px; font-weight: 100; color: #00a0e0; border-bottom: 5px solid #dfe1be; margin-left: 30px; padding-bottom: 15px;}
.mosaico > div > ul { list-style-type: none; margin: 50px 30px 0; padding: 0; }
.mosaico > div > ul > li { font-size: 15px; color: #2e3f55; margin-bottom: 15px;}
.mosaico > div > ul > li > span { color: #00a0e0; margin-right: 18px; width: 18px; display: inline-block; text-align: right; }

.telefono > h2 {font-size: 40px;color: #239ed6;position: absolute;left: 50%;margin-left: -223px;top: 360px;font-weight: 100;}
.telefono > h3 { font-size: 20px;color: #00a0e0;position: absolute;margin-left: -81px;left: 50%;top: 440px;border-bottom: 5px solid #69319e;font-weight: 100;padding-bottom: 9px;}
.telefono > p { font-size: 15px; color: #00335b; position: absolute; top: 500px; width: 40%; text-align: center; left: 50%; margin-left: -224px; }
.telefono > p > span { background: #eff1d6; }
.telefono > p > a { font-size: 18px; font-weight: 500;}

.paises .pais { width: 33%; position: absolute; top: 0; left: 0; }
.paises .pais h4 { margin: 0 12% 16px; padding: 10px 0; text-transform: uppercase; border-bottom: 2px solid #00335b; font-size: 16px; color: #009ee0; font-weight: 500; }
.paises .pais p { margin: 0 12%; font-size: 14px; line-height: 16px; color: #00335b; }
.paises .pais p .separador { display: block; width: 15%; height: 1px; background: #a9aaac; margin: 20px 0 10px; }
.paises .pais p br + br { display: block; margin: 6px 0; content: ' '; }
.paises .first .pais { left: 0; }
.paises .first .pais:nth-child(2) { top: 150px; }
.paises .first .pais:nth-child(3) { top: 270px; }
.paises .second .pais { left: 33%; }
.paises .second .pais:nth-child(2) { top: 150px; }
.paises .second .pais:nth-child(3) { top: 270px; }
.paises .third .pais { left: 66%; }
.paises .third .pais:nth-child(2) { top: 150px; }
.paises .third .pais:nth-child(3) { top: 270px; }

.casa { position: absolute; top: 450px; width: 100%; }
.casa .linea { width: 32%; display: inline-block; border-bottom: 3px solid #dfdfbf; margin: 5%; }
/*.casa img { display: inline-block; xwidth: 15%; }*/
.casas00 { display: inline-block; width: 15%; }


.ordenador img { margin-left: -119px; top: 70px; }
.ordenador img.arrow { margin-left: -52px; top: 340px; }
.ordenador h2 { font-size: 26px; position: absolute; top: 500px; left: 0; width: 100%; text-transform: uppercase; text-align: center; line-height: 20px; color: #00335b; }
.ordenador h2 span { font-size: 20px; }
.ordenador p { font-size: 14px; text-align: center; position: absolute; width: 40%; top: 570px; left: 50%; margin-left: -224px; color: #00335b;}
.ordenador .selector { position: absolute; top: 650px; left: 50%; margin-left: -218px; width: 436px; }

.corazon .corazon-header { background: #fce8d5; position: absolute; width: 100%; height: 264px; }
.corazon .corazon-header img { margin-left: -260px; top: -22px; }
.corazon img.nube9 { top: 30px; left: 240px; margin: 0; }
.corazon img.nube10 { top: 202px; left: 448px; margin: 0; z-index: 10; }
.corazon img.nube11 { top: -16px; left: 752px; margin: 0; }
.corazon img.nube12 { top: 140px; left: 750px; margin: 0; }
.corazon img.nube13 { top: 130px; left: 810px; margin: 0; }
.corazon > p { position: absolute; top: 320px; width: 40%; text-align: center; margin-left: -224px; left: 50%; color: #00335b;}
.corazon .territorio { position: absolute; top: 440px; left: 50%; width: 40%; }
.corazon .territorio h2 { color: #00335b; font-size: 26px; width: 55%; margin: 0 80px 0 0; display: inline-block; }
.corazon .territorio h2 span { color: #ed7102; font-size: 15px; font-weight: 500;}
.corazon .territorio h3 { font-size: 14px; margin: 0 80px 0 0; display: inline-block; }
.corazon .territorio img { top: 20px; left: auto; right: 0; }
.corazon .territorio.internacional { margin-left: -488px; text-align: right; }
.corazon .territorio.nacional { margin-left: 40px; }
.corazon .territorio.nacional h2 { margin: 0 0 0 80px; }
.corazon .territorio.internacional h3,
.corazon .territorio.nacional h3 { font-weight: 100; color: #00335b;}
.corazon .territorio.internacional h3{margin: 0 80px 0 0;}
.corazon .territorio.nacional h3 {margin: 0 0 0 80px; }

.corazon .territorio.nacional p { color: #00335b;}
.corazon .territorio.nacional img { right: auto; left: 0; margin: 0; }
.corazon .selector { display: inline-block; position: relative; margin-left: 0; width: 339px; }

.solicitud > img { margin-left: -83px; }
.solicitud > h2 { font-size: 35px; color: #00335b; position: absolute; left: 0; margin: 0; top: 240px; width: 100%; text-align: center; font-weight: 100;}
.solicitud > h3 { font-size: 26px; color: #2e3f55; position: absolute; margin: 0; top: 200px; font-weight: 300; width: 100%; left: 0; text-align: center; }
.solicitud > .separador { width: 12%; height: 5px; background: #dfe1be; position: absolute; left: 50%; margin-left: -6%; top: 300px; }
.solicitud > p { font-size: 15px; color: #00335b; position: absolute; top: 320px; width: 50%; text-align: center; left: 54%; margin-left: -336px; }
.solicitud > div { position: absolute; width: 30%; left: 50%; margin: 0; top: 430px; text-align: center; }
.solicitud > div  img { position: absolute; left: 50%; margin-left: -100px; }
.solicitud > div  h3 { font-size: 18px; color: #00335b; position: absolute; top: 150px; width: 100%; }
.solicitud > div  p { font-size: 14px; color: #00335b; position: absolute; top: 210px; width: 100%; }
.solicitud > .notas { margin-left: -336px; background: url('../../img/i2/linea_puntos.png') no-repeat bottom right; height: 240px; }

.opcion-2 #paises { height: 1300px; }
.opcion-2 .paises .pais { width: 50%; }
.opcion-2 .paises .pais p { margin: 20px 12%; }
.opcion-2 .paises .pais p a { color: #614387; }
.opcion-2 .paises .pais p span { font-size: 10px; font-weight: bold; }
.opcion-2 .paises .pais p br + br { display: block; margin: 0; }
.opcion-2 .paises .pais .separador { width: auto; height: 1px; border-bottom: 3px dotted #000; margin: 20px 12%; }
.opcion-2 .paises .first .pais { left: 0; }
.opcion-2 .paises .first .pais:nth-child(2) { top: 380px; }
.opcion-2 .paises .first .pais:nth-child(3) { top: 680px; }
.opcion-2 .paises .second .pais { left: 50%; }
.opcion-2 .paises .second .pais:nth-child(2) { top: 300px; }
.opcion-2 .paises .second .pais:nth-child(3) { top: 600px; }
.opcion-2 .telefono img { top: 1090px; }
.opcion-2 .telefono p { top: 1210px; }

.ribbon_turquoise_tablet, .ribbon_blue_tablet, .ribbon_green_tablet, .ribbon_green2_tablet, .ribbon_orange_tablet { display: none; }

.ribbon_turquoise,
.ribbon_blue,
.ribbon_green,
.ribbon_green2,
.ribbon_orange {
  width: 223px;
  height: 245px;
  background-size: 100%;
  position: absolute;
  left: -49px;
  top: -80px;
  /*opacity: 0;*/
  z-index: 9;
}

.ribbon_turquoise p,
.ribbon_blue p,
.ribbon_green p,
.ribbon_green2 p,
.ribbon_orange p {
  text-transform: uppercase;
  font-weight: 500;
  position: absolute;
  right: 0;
  top: 65px;
  padding-right: 20px;
  max-width: 220px;
  text-align: right;
}
.ribbon_turquoise p { color: #008385; }
.ribbon_blue p { color: #009ee0; }
.ribbon_green p { color: #ed7102; }
.ribbon_green2 p { color: #9da719; }
.ribbon_orange p { color: #ea7020; }

.ribbon_turquoise small,
.ribbon_blue small,
.ribbon_green small,
.ribbon_green2 small,
.ribbon_orange small {
  text-transform: uppercase;
  font-weight: 500;
  position: absolute;
  right: 0;
  top: 60px;
  padding-right: 20px;
  max-width: 140px;
  text-align: right;
  font-size: 12px;
  color: #8f8f8f;
}

.final-button {
  background: #0e5c92;
  text-align: center;
  padding: 32px;
  border-top: 1px solid white;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}
.final-button:hover {background: #031f32;}
.selector {
  background: #fff;
  margin: 0;
  text-align: left;
  display: block;
  position: relative;
  width: 100%;
  border: 1px solid #00335b;
  z-index: 100;
}
.selector .first-option {
  padding: 20px;
  height: 64px;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  background: #fff;
  cursor: pointer;
  display: block;
}
.selector .first-option:before { display: none; }
.selector .first-option:after {
  content: '\f107';
  font-family: FontAwesome;
  font-size: 30px;
  line-height: 26px;
  color: #00335b;
  display: block;
  float: right;
}
.selector .first-option.opened:after { content: '\f106'; }
.selector .first-option span { font-family: 'Gotham A'; position: initial; color: #00335b;}
.selector .options { display: none; }
.selector .options ul { margin: 0; padding: 0; }
.selector .options li {
  background: #e8f5fa;
  list-style: none;
  padding: 8px 30px;
  border-top: 1px solid #000;
  color: #00335b;
  font-size: 14px;
  height: 64px;
  line-height: 48px;
  cursor: pointer;

  -moz-transition: none;
  -webkit-transition: none;
  transition: none;
}
.selector .options li span { font-size: 12px; color: #807f7f; }
.selector .options li:hover,
.selector .options li:hover:after { background: url(img/i2/download.png) no-repeat 95% #fff; }

/* ANIMATIONS */

.animation-element {
  opacity: 0;

  -moz-transition: all 1000ms ease-out;
  -webkit-transition: all 1000ms ease-out;
  -o-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;

  -webkit-transition-delay: 500ms; /* Safari */
  transition-delay: 500ms;
}
.animation-element.in-view {
  opacity: 1;

  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}
.fade-in {
  opacity: 0;

  -moz-transition: all 1000ms ease-out;
  -webkit-transition: all 1000ms ease-out;
  -o-transition: all 1000ms ease-out;
  transition: all 1000ms ease-out;

  -webkit-transition-delay: 500ms; /* Safari */
  transition-delay: 1000ms;
}
.slide-left {
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.slide-right {
  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);
}

.bounce-up {
  -moz-transform: translate3d(0px, 100px, 0px);
  -webkit-transform: translate3d(0px, 100px, 0px);
  -o-transform: translate(0px, 100px);
  -ms-transform: translate(0px, 100px);
  transform: translate3d(0px, 100px, 0px);
}

.bounce-down {
  -moz-transform: translate3d(0px, -100px, 0px);
  -webkit-transform: translate3d(0px, -100px, 0px);
  -o-transform: translate(0px, -100px);
  -ms-transform: translate(0px, -100px);
  transform: translate3d(0px, -100px, 0px);
}