/*Infografia CSS*/

body{height: auto !important;}
body.active{overflow: auto !important;}
.counter-order, .current_block{display: none;}

.counteer_pixel, .counteer_pixel_current{position: fixed;font-size: 50px;left: 0;}


section.logo{position: absolute;}
section.logo .logo-info{}
section.logo .logo-info img{

    position: absolute;
    width: 70px;
    height: 70px;
    top: 30px;left: 30px;background: #0079c8;}

.fp-section#3{background: red}

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

.container-info{width: 100%}
/*Show only on mobile*/
.ventajas-top-mobile, .mobile-info-visible{display: none;}
.tarjeta-img-mobile{display: none;}
.tarjeta-img{display: block;top: -300px;position: relative;}
.claim-tarjeta{opacity: 0}

.heart{display: block;}
.heart_tablet{display: none;}

.arrow-down-start{
    margin-top: 10px;
}
.arrow-down-start i{
    color: white;
    font-size: 30px;
    position: relative;
    -webkit-animation: bounce 1s infinite ease-in-out;
    -moz-animation: bounce 1s infinite ease-in-out;
    animation: bounce 1s infinite ease-in-out;
    text-shadow: 0px 1px 1px rgba(150, 150, 150, 0.5);
}


@-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;
  }
}

/********************
*****HEADER INFO*****
********************/

header.info-header{

    height: 97px;background: transparent;top: 22px;left: 0;width: 100%;border: 0;position: absolute;padding: 0 72px;z-index: -11111;}


.info-header .logo-info{}
.info-header .logo-info img{
    position: relative;
    top: auto;
    height: 100%;
    width: auto;
    background: #0079c8;
}
/********************
**END HEADER INFO****
********************/
.active{border:0}
.section, .fp-tableCell{}

.bloque_1{height: 820px;width: 100%;position: relative;}
.bloque_1b{height: 770px;width: 100%;position: relative;background-repeat: no-repeat;background: background: rgba(206,223,230,1);background: -moz-linear-gradient(top, rgb(212, 231, 246) 0%, rgb(214, 231, 243) 24%,  rgba(206,223,230,0.46) 54%, rgba(206,223,230,0.13) 87%, rgba(206,223,230,0) 100%);background: -webkit-gradient(left top, left bottom, color-stop(0%, rgb(212, 231, 246)), color-stop(24%, rgb(214, 231, 243)), color-stop(54%, rgba(206,223,230,0.46)), color-stop(87%, rgba(206,223,230,0.13)), color-stop(100%, rgba(206,223,230,0)));background: -webkit-linear-gradient(top, rgb(212, 231, 246) 0%, rgb(214, 231, 243) 24%,  rgba(206,223,230,0.46) 54%, rgba(206,223,230,0.13) 87%, rgba(206,223,230,0) 100%);background: -o-linear-gradient(top, rgb(212, 231, 246) 0%, rgb(214, 231, 243) 24%,  rgba(206,223,230,0.46) 54%, rgba(206,223,230,0.13) 87%, rgba(206,223,230,0) 100%);background: -ms-linear-gradient(top, rgb(212, 231, 246) 0%, rgb(214, 231, 243) 24%,  rgba(206,223,230,0.46) 54%, rgba(206,223,230,0.13) 87%, rgba(206,223,230,0) 100%);background: linear-gradient(to bottom, rgb(212, 231, 246) 0%, rgb(214, 231, 243) 24%, rgba(206,223,230,0.46) 54%, rgba(206,223,230,0.13) 87%, rgba(206,223,230,0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedfe6', endColorstr='#cedfe6', GradientType=0 );}
.bloque_2{height: 620px;width: 100%;position: relative;display: block;background-repeat: no-repeat;background: background: rgba(206,223,230,1);background: -moz-linear-gradient(top, rgba(206,223,230,1) 0%, rgba(206,223,230,0.76) 24%, rgba(206,223,230,0.46) 54%, rgba(206,223,230,0.13) 87%, rgba(206,223,230,0) 100%);background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(206,223,230,1)), color-stop(24%, rgba(206,223,230,0.76)), color-stop(54%, rgba(206,223,230,0.46)), color-stop(87%, rgba(206,223,230,0.13)), color-stop(100%, rgba(206,223,230,0)));background: -webkit-linear-gradient(top, rgba(206,223,230,1) 0%, rgba(206,223,230,0.76) 24%, rgba(206,223,230,0.46) 54%, rgba(206,223,230,0.13) 87%, rgba(206,223,230,0) 100%);background: -o-linear-gradient(top, rgba(206,223,230,1) 0%, rgba(206,223,230,0.76) 24%, rgba(206,223,230,0.46) 54%, rgba(206,223,230,0.13) 87%, rgba(206,223,230,0) 100%);background: -ms-linear-gradient(top, rgba(206,223,230,1) 0%, rgba(206,223,230,0.76) 24%, rgba(206,223,230,0.46) 54%, rgba(206,223,230,0.13) 87%, rgba(206,223,230,0) 100%);background: linear-gradient(to bottom, rgba(206,223,230,1) 0%, rgba(206,223,230,0.76) 24%, rgba(206,223,230,0.46) 54%, rgba(206,223,230,0.13) 87%, rgba(206,223,230,0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedfe6', endColorstr='#cedfe6', GradientType=0 );}
.bloque_3{height: 528px;width: 100%;position: relative;background: white;top: 0;}
.bloque3b{height: 270px;width: 100%;position: relative;background: white;top: 28px;margin-bottom: 65px;}
.bloque4{height: 100%;width: 100%;position: relative;background: transparent;overflow: hidden;}
.bloque5{height: 1060px;width: 100%;position: relative;background: transparent;margin-top: 0;overflow: hidden;}

#tarjeta{display: block; width: 100%}
#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;
}

#title_heart{
    margin-top: 48px;
}
.title{
    position: relative;
    top: -150px;
    opacity: 0;
    z-index: 999;
}
.title_heart{width: 100%; clear: both;text-align: center;}
.title_heart .image{
    position: relative;
    width: 300px;
    margin: 0px auto;
}
.title_heart .image img{
    z-index: 3;
    position: relative;
    margin: 0px auto;
    opacity: 0;
    top: -150px;
}

.title_heart .title h1{color: #55677e;font-size: 46px;text-transform: uppercase;margin: 50px 0 0px 0;}
.title_heart .title p{text-transform: uppercase;color: #00a0e0;font-size: 24px;margin: 0;font-weight: 500;letter-spacing: 2px;}

.links_header_title{
    position: relative;
    z-index: 99;
    margin-top: 50px;
}
.link_header_title{
    display: inline-block;
    margin: 0 20px;
    text-align: center;
    width: 180px;
    height: 180px;
    border: 8px solid white;
    padding: 20px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50%;
    position: relative;
    z-index: 0;
    cursor: pointer;
    opacity: 0;
}

.link_header_title::before{
  content: "";
  display:block;
  position: absolute;
  text-align: center;
  height: 10000px;
  background: white;
  left: 78px;
  bottom: 170px;
  width: 4px;
}

.link_header_title small{
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: #55677e;
}
.link_header_title img{
    width: 52px;
}
.link_header_title p{
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    color: #55677e;
}

#buildings{display: table;position: absolute;bottom: 0;width: 100%;}
.ribbon_red_tablet, .ribbon_blue_tablet{display: none;}

.ribbon_red{
    width: 222px;
    height: 250px;
    background-size: 100%;
    position: absolute;
    left: -70px;
    top: 100px;
    opacity: 0;
    z-index: 9;
}
.ribbon_red p{
    text-transform: uppercase;
    color: white;
    font-weight: 600;
    position: absolute;
    right: 0;
    top: 75px;
    padding-right: 20px;
    max-width: 140px;
    text-align: right;
}

.ribbon_red small{
  color: white;
  font-weight: 500;
  position: absolute;
  right: 0;
  top: 60px;
  padding-right: 20px;
  max-width: 140px;
  text-align: right;
  font-size: 12px;
}

.ribbon_blue{
    width: 222px;
    height: 250px;
    background-size: 100%;
    position: absolute;
    left: -70px;
    top: 25px;
    opacity: 0;
    z-index: 9999;
}
.ribbon_blue p{
    text-transform: uppercase;
    color: white;
    font-weight: 600;
    position: absolute;
    right: 0;
    top: 75px;
    text-align: right;
    padding-right: 20px;
}
.ribbon_blue small{
    color: white;
    font-weight: 500;
    position: absolute;
    right: 0;
    top: 60px;
    text-align: right;
    padding-right: 20px;
    font-size: 12px;
}
.buildings{display: table-cell;vertical-align: bottom;overflow: hidden;position: relative;width: 100%;height: 630px;}
.buildings img{vertical-align: bottom;}
.buildings img.road{
    position: absolute;
    bottom: 0;
    left: 2px;
    z-index: 50;
    opacity: 1;
}

img.globo{
    position: absolute;
    left: 678px;
    bottom: 380px;
    opacity: 0;
}
img.mano_recta_on{position: absolute;left: 645px;bottom: 50px;z-index: 7;opacity: 0;}
img.mano_recta_off{position: absolute;left: 645px;bottom: -450px;z-index: 7;}
img.mano_correo_on{position: absolute;left: 430px;bottom: 50px;opacity: 0;z-index: 6;}
img.mano_correo_off{position: absolute;left: 430px;bottom: 50px;z-index: 6;-ms-transform: rotate(90deg);     -ms-transform-origin: 0% 100%;     -webkit-transform: rotate(90deg);     -webkit-transform-origin: 0% 100%;transform: rotate(90deg);transform-origin: 0% 100%;}
img.mano_buscar_off{position: absolute;left: 552px;bottom: 0;z-index: 1;-ms-transform: rotate(90deg); /* IE 9 */-ms-transform-origin: 0% 100%; /* IE 9 */-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */-webkit-transform-origin: 0% 100%; /* Chrome, Safari, Opera */transform: rotate(90deg);transform-origin: 0% 100%;}
img.mano_buscar_on{position: absolute;left: 552px;bottom: 0;z-index: 1;opacity: 0;}
img.ambulance{position: absolute;left: -400px;bottom: 42px;z-index: 10;}
img.buildings_img{position: absolute;left: 0px;bottom: 0px;z-index: 0;opacity: 0;}

.number{
    display: table;
}
.number > div{display: table-cell;vertical-align: middle;}
.number#uno{
  position: absolute;
  left: 209px;
  bottom: 285px;
  opacity: 0;
}

.number#dos{
  position: absolute;
  left: 380px;
  bottom: 430px;
  opacity:0;
}
.number .icon {
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  z-index: 9;
  color: rgb( 232, 82, 84 );
  width: 55px;
  height: 55px;
  border: 1px dotted #949eab;
  text-align: center;
  vertical-align: middle;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  padding-top: 5px;
}
.number .icon small{
    font-size: 12px;
    text-transform: capitalize;
    display: block;
}
.number .icon span{}

.number .text{
  font-size: 14px;
  color: rgb( 108, 110, 113 );
  font-weight: bold;
  text-transform: uppercase;
  text-align: left;
  z-index: 71;
  max-width: 206px;
  position: relative;
  left: 15px;
}


.section-doctors-container{
    height: 515px;
}
img.medico{position: absolute;left: 400px;bottom: 90px;opacity: 0;width: 170px;}
img.cirujano{position: absolute;left: 235px;bottom: 90px;opacity: 0;width: 170px;}
.ribbon-large{width: 660px;height: 80px;position: absolute;right: -15px;top: 50px;opacity: 0;}
.ribbon-large p{
    font-size: 16px;
    color: white;
    text-transform: uppercase;
    padding-left: 75px;
    position: relative;
    top: 10px;
}

.contact-section#red_mobile{display: none;}
.contact-section{
    position: absolute;
    right: 0;
    top: 130px;
    display: block;
    width: 480px;
}
.contact-section ul{
    margin: 0;
    padding: 0;
    padding-right: 0;
}
.contact-section li{
    list-style: none;
    display: table;
    width: 100%;
    margin-top: 0;
    padding-right: 135px;
    border-bottom: 1px solid #DCDCDC;
    padding: 12px 0;
}
.contact-section li > div{display: table-cell;vertical-align: middle;}
.contact-section li div.list-icon{
    width: 150px;
}
.contact-section li div.contact-info{
}
.contact-section li span{width: 85px;height: 85px;background: #0b598b;padding: 1px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;display: block;float: left;margin-right: 15px;}
.contact-section li:first-child span, .contact-section li:last-child span{background: #0e89da }

.contact-section i{
    position: relative;
    left: 22px;
    top: 22px;
    color: white;
    font-size: 40px;
}
.contact-section h2{color: #023352; font-size: 13px;margin: 0;padding: 0;text-transform: uppercase;}
.contact-section p{font-size: 15px;color: #0e89da;width: 85%;margin: 0;}
.contact-section p.number{font-size: 30px;font-weight: 500;}
.contact-section p.mail{font-size: 16px}

.banco h1{color: #6ac4ff;font-size: 32px;text-align: center;font-weight: 500;text-transform: uppercase;margin-bottom: 25px;margin-top: 0;padding-top: 0;opacity: 0;position: relative;top: -20px;}

.ventajas-notificar{}
.ventajas-notificar div.grid_6{padding-top: 15px;opacity: 0;position: relative;}
.ventajas-notificar div.grid_6:last-child{
    position: relative;
    left: 20px;
}
.ventajas-notificar div.grid_6:first-child{
    border-right: 1px solid #65b4e2;
    right: 20px;
    position: relative;
}
.ventajas-notificar p{font-size: 16px; color: #6f7070;text-align: right;width: 260px;padding-right: 45px;margin: 0;}
.ventajas-notificar span{display:block;color: #6f7070;font-weight: 600;font-size: 24px;}
.ventajas-notificar div.grid_6:last-child p{text-align: left;padding-left: 45px;padding-right: 0;width: 270px;}
.ventajas-notificar p strong{color: #0079c8}

.illustrations-banco{
    overflow: hidden;
}
.illustrations-banco img{position: absolute;}
img.ventajas_bupachica-perro{
    bottom: 2px;
    left: 150px;
    z-index: 1;
    opacity: 0;
}
img.ventajas_bupachico-bicicleta{
    left: 0px;
    bottom: 2px;
    opacity: 0;
}
img.ventajas_bupafarola{
    right: 80px;
    left: auto;
    bottom: 0;
}
img.ventajas_bupamariposas{
    bottom: 90px;
    left: 0px;
    opacity: 0;
}
img.ventajas_bupamayores{
    left: 350px;
    bottom: 2px;
    z-index: 0;
    opacity: 0;
}
img.ventajas_bupasuelo{
    left: 0;
    bottom: 0;
    width: 100%;
}


.ventajas-banco-text{
    padding: 0 20px 0px 20px;
}
.ventajas-banco-text .vbt-box{width: 20%;float: left;padding: 0 25px;height: 155px;border-left: 1px solid #e0f0f9;opacity: 0;position: relative;top:-20px;}
.ventajas-banco-text .vbt-box:first-child{border:0}
.ventajas-banco-text p{font-size: 12px; color: #6f7070;margin: 2px 0px;}
.ventajas-banco-text p strong{color: #0079c8}

.ventajas-banco-text span{
      display: block;
    color: #6f7070;
    font-weight: 600;
    font-size: 24px;
}
.ribbon-large-2{position: relative;left: 0;width: 660px;height: 90px;top:-20px;opacity: 0;}
.ribbon-large-2 p{font-size: 16px;text-transform: uppercase;color: white;position: relative;top: 25px;width: 590px;padding-left: 72px;}

.hospital_block{}
.hospital_block img{position: absolute;left: 0;}
img.arboles{
    z-index: 4;
    opacity: 0;
    bottom: 0;
}
img.hospital{
    z-index: 6;
    bottom: 0;
    opacity: 0;
}
img.nubes{
    z-index: 3;
    bottom: 20px;
    opacity: 0;
    
}
img.sol{
    z-index: 1;
    bottom: 120px;
    left: 755px;
    opacity: 0;
}
img.white_bg{
    z-index: 0;
    opacity: 0;
}

.footer-info{
    color: #6f7070;
}

.footer-info h1{
     color: #6ac4ff;
     font-size: 32px;
     text-align: center;
     font-weight: 500;
     text-transform: uppercase;
     margin-bottom: 35px;
     margin-top: 0;
     padding-top: 50px;
     position: relative;
     opacity: 0;
}
.footer-info .grid_4{opacity: 0; top: -20px}

.block-footer-info{margin-bottom: 45px}
.header-footer-info{
    text-align: center;
    padding-bottom: 0px;
    border-bottom: 1px solid #4599cf;
    margin: 0 40px;
}
.header-footer-info span{
    font-size: 50px;
    font-weight: 500;
    color: #0e89da;
}
.header-footer-info h1{
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 100;
    margin: 0;
    margin-top: 22px;
    height: 50px;
    color: #0e89da;
    padding-top: 0;
    opacity: 1;
}

.body-footer-info{
    padding: 0px 80px 0 40px;
}
.body-footer-info h2{
    font-size: 12px;
    color: black;
    text-transform: uppercase;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 15px;
}
.list-footer-info{display:table;margin-bottom: 15px;}
.list-footer-info > div{display:table-cell;vertical-align: middle;}
.number-list-footer{
    vertical-align: top !important;
}
.number-list-footer span{
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 9;
    color: #6f7070;
    width: 40px;
    height: 40px;
    border: 1px dotted #949eab;
    text-align: center;
    vertical-align: middle;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: relative;
    padding-top: 12px;
    display: block;
}
.text-list-footer{
    padding-left: 15px;
    font-size: 12px;
}
.text-list-footer p{}

.final-button{
    background: #0e5c92;
    text-align: center;
    padding: 32px;
    border-top: 1px solid white;
    margin-bottom: 40px;
}
.final-button p{
    padding: 0;
    margin: 0;
    text-transform: uppercase;
    color: white;
}
.final-button a{}


.footer_info{margin: 0 -1000px}