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

body, html{
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

@font-face {
  font-family: BentonSansBBVA-Bold;
  src: url('../fonts/BentonSansBBVA-Bold.otf') format("opentype");
}
@font-face {
  font-family: BentonSansBBVA-Book;
  src: url('../fonts/BentonSansBBVA-Book.otf') format("opentype");
}
@font-face {
  font-family: BentonSansBBVA-Light;
  src: url('../fonts/BentonSansBBVA-Light.otf') format("opentype");
}
@font-face {
  font-family: BentonSansBBVA-Medium;
  src: url('../fonts/BentonSansBBVA-Medium.otf') format("opentype");
}



/* --- generales --- */
.contergeneral{
  width: 90%;
  display: block;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
}
.contergeneral100{
  width: 100%;
  display: block;
  max-width: 1400px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.conter90{
  width: 90%;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
.conter90left{
  width: 90%;
  display: block;
  float: left;
}
.conter90right{
  width: 90%;
  display: block;
  float: right;
}
.conter95{
  width: 95%;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
.conter95left{
  width: 95%;
  display: block;
  float: left;
}
.conter99left{
  width: 99%;
  display: block;
  float: left;
}
.conter95right{
  width: 95%;
  display: block;
  float: right;
}
.conter95righta{
  width: 95%;
  display: block;
  float: right;
}
.conter{
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
.opacity0{
  opacity: 0;
}
.textcenter{
  text-align: center !important;
}
.textright{
  text-align: right !important;
}
.textleft{
  text-align: left !important;
}
.imgfull{
  width: 100%;
}
.img90{
  width: 90%;
  margin: 0 auto;
  display: block;
}
.img80{
  width: 80%;
  margin: 0 auto;
  display: block;
}
.img60{
  width: 60%;
  margin: 0 auto;
  display: block;
}
.img50{
  width: 50%;
  margin: 0 auto;
  display: block;
}
.img80left{
  width: 80%;
  display: block;
}
.imglogros{
  width: 85%;
  float: right;
  padding-left: 10px;
}

.conter30{
  display: block;
  width: 30%;
  float: left;
  position: relative;
}
.conter35{
  display: block;
  width: 35%;
  float: left;
  position: relative;
}
.conter33{
  display: block;
  width: 33.33%;
  float: left;
  position: relative;
}
.conter22{
  display: block;
  width: 22.3%;
  float: left;
  position: relative;
}
.conter50{
  display: block;
  width: 50%;
  float: left;
  position: relative;
}
.conter55{
  display: block;
  width: 55%;
  float: left;
  position: relative;
}
.conter50center{
  display: block;
  width: 50%;
  margin: 0 auto;
  position: relative;
}
.conter60center{
  display: block;
  width: 60%;
  margin: 0 auto;
  position: relative;
}
.conter65center{
  display: block;
  width: 65%;
  margin: 0 auto;
  position: relative;
}
.conter65{
  display: block;
  width: 65%;
  float: left;
  position: relative;
}
.conter60{
  display: block;
  width: 60%;
  float: left;
  position: relative;
}

.conter40{
  display: block;
  width: 40%;
  float: left;
  position: relative;
}
.conter45{
  display: block;
  width: 45%;
  float: left;
}
.conter70{
  display: block;
  width: 70%;
  float: left;
}
.conter70center{
  display: block;
  width: 70%;
  margin: 0 auto;
}
.conter80{
  display: block;
  width: 80%;
  float: left;
}
.conter80center{
  display: block;
  width: 80%;
  margin: 0 auto;
}

.conter20{
  display: block;
  width: 20%;
  float: left;
}
.conter21{
  display: block;
  width: 21%;
  float: left;
}
.conter10{
  display: block;
  width: 10%;
  float: left;
}
.conter10a{
  display: block;
  width: 10%;
  float: left;
}
.conter12{
  display: block;
  width: 12.5%;
  float: left;
}
.conter5{
  display: block;
  width: 5%;
  float: left;
}
.conter5a{
  display: block;
  width: 5%;
  float: left;
}
.conter14{
  display: block;
  width: 14.2%;
  float: left;
}
.conter15{
  display: block;
  width: 15%;
  float: left;
}
.conter85{
  display: block;
  width: 85%;
  float: left;
}
.conter25{
  display: block;
  width: 25%;
  float: left;
}
.conter24{
  display: block;
  width: 24%;
  float: left;
}

.conterflex{
  width: 100%;
  display: flex;
  overflow: hidden;
  align-content: center;
  align-items: center;
}
.conterflex2{
  width: 100%;
  display: flex;
  overflow: hidden;
  align-content: center;
  align-items: center;
}
.conterflex3{
  width: 100%;
  display: flex;
  overflow: hidden;
  align-content: center;
  align-items: center;
}
.padtop50px{
  padding-top: 50px;
}
.padtop100px{
  padding-top: 100px;
}
.padbop50px{
  padding-bottom: 50px;
}
.pad50px{
  padding: 50px 0px;
}
.padtop20px{
  padding-top: 20px;
}
.padtop10px{
  padding-top: 10px;
}
.padbot20px{
  padding-bottom: 20px;
}
.mar50px{
  margin: 50px 0px;
}
.martop50px{
  margin-top: 50px;
}
.pad20px{
  padding: 20px 0px;
}
.pad5px{
  padding: 5px 0px;
}
.pad5pix{
  padding: 5px;
}
.pad10px{
  padding: 10px 0px;
}
.pad30px{
  padding: 30px 0px;
}
.martop20px{
  margin-top: 20px;
}
.multy{
  mix-blend-mode: multiply !important;
}

.blanco{
  color: #ffffff !important;
}
.azul{
  color: #52bbec !important;
}
.azul2{
  color: #1683c6 !important;
}
.azul3{
  color: #043278 !important;
}
.azul4{
  color: #1ca7ec !important;
}
.azul5{
  color: #92d2f4 !important;
}
.azul6{
  color: #306fb5 !important;
}
.azul7{
  color: #a0d0f1 !important;
}
.azul8{
  color: #0071bb !important;
}
.azul9{
  color: #3acccb !important;
}
.azul10{
  color: #d6f5f5 !important;
}
.azul11{
  color: #0070b7 !important;
}
.backazul6{
  background-color: #306fb5;
}
.backazul7{
  background-color: #a0d0f1;
}
.backazul9{
  background-color: #3acccb;
}
.backazul10{
  background-color: #d6f5f5;
}
.aqua{
  color: #2ecccc !important;
}

p{
  padding: 0px !important;
  margin: 0px !important;
}
.medium{
  font-family: BentonSansBBVA-Medium !important;
}
.texto{
  font-family: BentonSansBBVA-Book;
  font-size: 15px;
  color: #666666;
}
.nota{
  font-family: BentonSansBBVA-Book;
  font-size: 10px;
  color: #666666;
}
.titulo1{
  font-family: BentonSansBBVA-Bold;
  font-size: 115px;
  line-height: 115px;
  color: #ffffff;
  opacity: .7;
}
.titulo1a{
  font-family: BentonSansBBVA-Bold;
  font-size: 115px;
  line-height: 140px;
  color: #ffffff;
  opacity: .7;
}
.titulo2{
  font-family: BentonSansBBVA-Book;
  font-size: 40px;
  color: #ffffff;
}
.titulo3{
  font-family: BentonSansBBVA-Book;
  font-size: 45px;
  color: #ffffff;
}
.titulo4{
  font-family: BentonSansBBVA-Medium !important;
  font-size: 19px;
  color: #ffffff;
}
.titulo5{
  font-family: BentonSansBBVA-Book !important;
  font-size: 24px;
  color: #ffffff;
}
.contador{
  font-family: BentonSansBBVA-Bold;
  font-size: 50px;
  line-height: 50px;
  color: #ffffff;
}
.destacado{
  font-family: BentonSansBBVA-Book !important;
  font-size: 22px;
  color: #ffffff;
}

.contertextintro{
  width: 90%;
  max-width: 500px;
  float: left;
  padding-top: 50vh;
  display: block;
  overflow: hidden;
}
.contertextintro2{
  width: 90%;
  max-width: 500px;
  float: left;
  padding-top: 30vh;
  display: block;
  overflow: hidden;
}
.contertextintro2a{
  width: 90%;
  max-width: 460px;
  float: left;
  padding-top: 30vh;
  display: block;
  overflow: hidden;
}
.conterdest{
  width: 100%;
  display: block;
  overflow: hidden;
  background-color: #043278;
  padding: 15px;
}
.textitalick{
  font-style: italic;
}
.textupper{
  text-transform: uppercase;
}
ol{
  padding-left: 20px;
  margin: 0px;
}
.tabla {
  width: 100%;
  border-collapse: collapse;
}
th,td{
  padding: 6px;
  border-bottom: 1px solid #a0d0f1;
}
.sinbor{
  border-bottom: 0px solid #fff;
}

/* slider destacados */

.content {
  margin: auto;
  padding: 0px 20px;
  width: 95%;
  max-width: 1200px;
  min-width: 300px;
}

.slick-slider {
  margin: 30px auto 50px;
}

.slick-prev,
.slick-next {
  color: white;
  opacity: 1;
  height: 40px;
  width: 40px;
  margin-top: -20px;
}
.slick-prev path,
.slick-next path {
  fill: #00aae7;
}
.slick-prev:hover path,
.slick-next:hover path {
  fill: #00aae7;
}

.slick-prev {
  left: -35px;
}
.slick-prev svg, .slick-next svg{
  bottom: 10px;
  display: block;
  position: absolute;
}
.slick-next {
  right: -35px;
}

.slick-prev:before,
.slick-next:before {
  content: none;
}

.slick-dots li button:before {
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
  font-size: 8px;
}

.slick-dots li.slick-active button:before {
  color: #FFFFFF;
}

.quote-container {
  min-height: 200px;
  color: #666666;
  font-size: 36px;
  margin: 0 20px;
  position: relative;
}
.quote-container:hover {
  cursor: -webkit-grab;
  cursor: grab;
}
.quote-container .portrait {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 140px;
  width: 140px;
  overflow: hidden;
}
.quote-container .portrait img {
  display: block;
  height: auto;
  width: 100%;
}
.quote-container .quote {
  position: relative;
  z-index: 600;
  padding: 10px 0px 0px 0px;
  margin: 0;
  text-align: left;
}
.quote-container .quote p {
  position: relative;
 /* margin-bottom: 20px;*/
}
.quote-container .quote p:first-child:before {
  content: '\201C';
  color: rgba(255, 255, 255, 0.44);
  font-size: 7.5em;
  font-weight: 700;
  opacity: 1;
  position: absolute;
  top: -.4em;
  left: -.2em;
  text-shadow: none;
  z-index: -10;
}
.quote-container .quote cite {
  display: block;
  font-size: 14px;
}
.quote-container .quote cite span {
  font-size: 16px;
  font-style: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dragging .quote-container {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.octogon {
  -webkit-clip-path: polygon(50% 0%, 38.11% 6.7%, 24.99% 6.72%, 18.06% 18.44%, 6.7% 25%, 6.56% 38.64%, 0% 50%, 6.7% 61.89%, 6.7% 75%, 18.44% 81.94%, 25% 93.3%, 38.64% 93.44%, 50% 100%, 61.88% 93.3%, 75% 93.3%, 81.94% 81.56%, 93.3% 74.9%, 93.44% 61.36%, 100% 50%, 93.3% 38.11%, 93.3% 25%, 81.56% 18.06%, 74.96% 6.7%, 61.36% 6.56%, 50% 0%);
  clip-path: url(#octogon);
  height: 140px;
  width: 140px;
}

@-webkit-keyframes gradient {
  0% {
    background-position: 5% 0%;
  }
  50% {
    background-position: 96% 100%;
  }
  100% {
    background-position: 5% 0%;
  }
}
@keyframes gradient {
  0% {
    background-position: 5% 0%;
  }
  50% {
    background-position: 96% 100%;
  }
  100% {
    background-position: 5% 0%;
  }
}
.puntossvg{
  height: 10px;
}











/* -- menu -- */


.cd-header {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(2, 23, 37, 0.95);
  height: 50px;
  width: 100%;
  z-index: 3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media only screen and (min-width: 768px) {
  .cd-header {
    height: 80px;
    background: transparent;
    box-shadow: none;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-header {
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .cd-header.is-fixed {
    /* when the user scrolls down, we hide the header right above the viewport */
    position: fixed;
    top: -80px;
    background-color: rgba(2, 23, 37, 0);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
  }
  .cd-header.is-visible {
    /* if the user changes the scrolling direction, we show the header */
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  .cd-header.menu-is-open {
    /* add a background color to the header when the navigation is open */
    background-color: rgba(2, 23, 37, 0);
  }
}

.cd-logo {
  display: block;
  position: absolute;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: .875em;
}
.cd-logo img {
  display: block;
}
@media only screen and (min-width: 768px) {
  .cd-logo {
    left: 2.6em;
  }
}

.cd-secondary-nav {
  position: absolute;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 10em;
  /* hidden on small devices */
  display: none;
}
@media only screen and (min-width: 768px) {
  .cd-secondary-nav {
    display: block;
  }
}

.cd-primary-nav-trigger {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 50px;
  background-color: #03263d;
}
.cd-primary-nav-trigger .cd-menu-text {
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  /* hide the text on small devices */
  display: none;
}
.cd-primary-nav-trigger .cd-menu-icon {
  /* this span is the central line of the menu icon */
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 18px;
  height: 2px;
  background-color: white;
  -webkit-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  transition: background-color 0.3s;
  /* these are the upper and lower lines in the menu icon */
}
.cd-primary-nav-trigger .cd-menu-icon::before, .cd-primary-nav-trigger .cd-menu-icon:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: white;
  right: 0;
  -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
  -moz-transition: -moz-transform .3s, top .3s, background-color 0s;
  transition: transform .3s, top .3s, background-color 0s;
}
.cd-primary-nav-trigger .cd-menu-icon::before {
  top: -5px;
}
.cd-primary-nav-trigger .cd-menu-icon::after {
  top: 5px;
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked {
  background-color: rgba(255, 255, 255, 0);
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked::before, .cd-primary-nav-trigger .cd-menu-icon.is-clicked::after {
  background-color: white;
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked::before {
  top: 0;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.cd-primary-nav-trigger .cd-menu-icon.is-clicked::after {
  top: 0;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}
@media only screen and (min-width: 768px) {
  .cd-primary-nav-trigger {
      width: 53px;
      padding-left: 1em;
      background-color: transparent;
      height: 40px;
      line-height: 30px;
      right: 2.2em;
      top: 50%;
      bottom: auto;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      border: 2px solid #2ecccc;
      background-color: #043278;
  }
  .cd-primary-nav-trigger .cd-menu-text {
    display: inline-block;
  }
  .cd-primary-nav-trigger .cd-menu-icon {
    left: auto;
    right: 1em;
    -webkit-transform: translateX(0) translateY(-50%);
    -moz-transform: translateX(0) translateY(-50%);
    -ms-transform: translateX(0) translateY(-50%);
    -o-transform: translateX(0) translateY(-50%);
    transform: translateX(0) translateY(-50%);
  }
}

.cd-primary-nav {
  /* by default it's hidden - on top of the viewport */
  display: flex;
  align-items: center;
  align-content: center;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 73%;
  background: rgba(4, 50, 120, 0.95);
  z-index: 2;
  text-align: center;
  padding: 50px 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: auto;
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
  margin: 0px;
  transition-timing-function: cubic-bezier(1,.01,1,1);
}
.cd-primary-nav2 {
  /* by default it's hidden - on top of the viewport */
  position: fixed;
  right: 0;
  top: 0;
  width: 27%;
  background: rgba(255, 0, 37, 0);
  z-index: 2;
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
  margin: 0px;
  transition-timing-function: cubic-bezier(1,.01,1,1);
  overflow: hidden;
  height: 100%;
  flex: 0 0 100%;
}


.no-touch .cd-primary-nav a:hover {
  background-color: #e36767;
}
.cd-primary-nav .cd-label {
  color: #06446e;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  font-size: 0.875rem;
  margin: 2.4em 0 .8em;
}





.cd-primary-nav.is-visible, .cd-primary-nav2.is-visible {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}


.imgmenu{
  width: 100%;
  /*height: 100%;*/
  transform: scale(1.4);
  position: absolute;
  top: 0;
  -o-object-fit: cover;
  object-fit: cover;
  /*transform: translate(0px);*/
  height: 100%;
  left: 0;
  transition: all 1.5s;
}



.cd-primary-nav2.is-visible img.imgmenu{
  transform: scale(1) !important;
}
@media only screen and (min-width: 768px) {
  .cd-primary-nav {
    padding: 80px 0;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-primary-nav li {
    font-size: 30px;
    font-size: 1.875rem;
  }
  .cd-primary-nav .cd-label {
    font-size: 16px;
    font-size: 1rem;
  }
}
.conterbtnsmenu{
  width: 70%;
  max-width: 650px;
  display: block;
  margin: 0 auto;
}
.link{
  transition: all 0.3s ease-in-out;
  display:inline-block;
  width:400px;
  height:40px;
  font-family: BentonSansBBVA-Medium;
  font-size: 20px;
  color: #ffffff;
  line-height:40px;
  /*border:2px solid white;*/
  border-radius:2px;
  margin:5px;
  position:relative;
  overflow:hidden;
  text-decoration: none;
  float: left;
  text-align: left;
}
.l2:before{
  transition: all 0.5s ease-in-out;  
  content: attr(value);
  display:block;
  height:40px;
  margin-top:-40px;
  cursor: pointer !important;
}
.l2:after{
  transition: all 0.5s ease-in-out;  
  content: attr(value);
    height:40px;
   margin-top:0px; 
   cursor: pointer !important;
}
.l2:hover:after{
  margin-top:40px; 
  cursor: pointer !important; 
}
.l2:hover:before{
  margin-top:0px;
  cursor: pointer !important;
}
.l2:hover{
  cursor: pointer !important;
}
a:hover{
  cursor: pointer !important;
}
.logomenu{
  width: 90%;
  max-width: 120px;
  display: block;
  position: absolute;
  top: 8%;
  left: 7%;
}
.lang-switch{
  position: absolute;
  bottom: 30px;
  right: 30px;
  padding: 4px;
  border-radius: 170px;
  border: 1px solid rgba(46,204,204,.3);
  z-index: 2;
  display: flex;
  font-family: BentonSansBBVA-Book;
}
.lang-switch .lang, .lang-switch .lang a {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #faf7f0;
}
.lang-switch .lang {
  border-radius: 50%;
  opacity: .4;
  cursor: pointer;
}
a {
  text-decoration: none;
}
.lang-switch .lang {
  cursor: pointer;
}
.lang-switch .lang a span {
  position: relative;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.lang-switch .active {
  color: #2ecccc;
  background: #faf7f0;
  opacity: 1;
}
.lang-switch .active a {
  color: #2ecccc;
}




























































































































/* --- home --- */
.home1{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 50px 0px;
  display: flex;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg1.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.imghome1{
  width: 90%;
  max-width: 300px;
  float: right;
  margin-right: -1px;
  opacity: .9;
}
.imghome2{
  width: 90%;
  max-width: 250px;
  float: left;
  opacity: .9;
}
.logohome{
  width: 90%;
  max-width: 120px;
  display: block;
  position: absolute;
  top: 8%;
  left: 5%;
}
.tituloinforme{
  font-family: BentonSansBBVA-Book;
  font-size: 28px;
  color: #ffffff;
}
.contertitulohome{
  width: 90%;
  max-width: 325px;
  display: block;
  position: absolute;
  bottom: 8%;
  left: 5%;
}

/* --- presentacion --- */
.presen1{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 50px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg2.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.presen2{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 50px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg5.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.presen3{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 50px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg5.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.contertitulopres{
  width: 100%;
  height: auto;
  padding: 15px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg3.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.presen4{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 50px 0px;
  display: flex;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg4.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.logros1{
  width: 100%;
  display: block;
  padding: 15px 20px;
  overflow: hidden;
  background-color: rgba(82, 187, 236, .9);
  border: 0px solid #ffffff;
  transition: all .5s;
}
.logros2{
  width: 100%;
  display: block;
  padding: 15px 20px;
  overflow: hidden;
  background-color: rgba(0, 113, 187, .9);
  border: 0px solid #ffffff;
  transition: all .5s;
}
.logros3{
  width: 100%;
  display: block;
  padding: 15px 20px;
  overflow: hidden;
  background-color: rgba(4, 50, 120, .9);
  border: 0px solid #ffffff;
  transition: all .5s;
}
.iconlogros{
  width: 25px;
  display: block;
  float: left;
}
.texticonlogros{
  width: calc(100% - 25px);
  float: left;
  display: block;
  padding-left: 20px;
}
#logros1{
  position: absolute;
  right: -100%;
  transition: all .5s;
}
#logros2{
  position: absolute;
  right: -100%;
  transition: all .5s;
}
#logros3{
  position: absolute;
  right: -100%;
  transition: all .5s;
}
.activelogros{
  right: 0% !important;
}
.conterinterlogros{
  width: 100%;
  display: flex;
  position: relative;
  height: auto;
  min-height: 700px;
  align-content: center;
  align-items: center;
}
a:hover .logros3, a:hover .logros2, a:hover .logros1{
  border: 1px solid #ffffff;
}

.presi1{
  position: fixed;
  top: 0px;
  max-width: 560px;
}
.presi2{
  position: fixed;
  top: 0px;
  max-width: 560px;
}








































/* --- perfil del grupo --- */
.perfil1{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 50px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg6.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.perfil2{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 100px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg7.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.conterinterperfil{
  width: 100%;
  max-width: 395px;
  display: flex;
  position: relative;
  height: auto;
  min-height: 700px;
  align-content: center;
  align-items: center;
  float: right;
  overflow: hidden;
}
.contericonvalores{
  width: 50px;
  display: block;
  overflow: hidden;
  float: left;
  margin-top: -15px;
}
.contertextvalores{
  width: calc(100% - 50px);
  display: block;
  overflow: hidden;
  float: left;
  padding-left: 20px;
}


/* --- estrategia --- */
.estra1{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 50px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg8.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.estra2{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 100px 0px;
}

.estra3{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg9.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}

.cuadroestra1{
  width: 100%;
  display: block;
  float: left;
  height: auto;
  min-height: 33.33vh;
  padding: 22px 15px;
  background-color: rgba(4, 50, 120, .93);
}
.cuadroestra2{
  width: 100%;
  display: block;
  float: left;
  height: auto;
  min-height: 33.33vh;
  padding: 22px 15px;
  background-color: rgba(28, 167, 236, .93);
}
.cuadroestra3{
  width: 100%;
  display: block;
  float: left;
  height: auto;
  min-height: 33.33vh;
  padding: 22px 15px;
  background-color: rgba(0, 113, 187, .93);
}
.cuadroestra4{
  width: 100%;
  display: block;
  float: left;
  height: auto;
  min-height: 33.33vh;
  padding: 22px 15px;
  background-color: rgba(46, 204, 204, .93);
}
.cuadroestra5{
  width: 100%;
  display: block;
  float: left;
  height: auto;
  min-height: 33.33vh;
  padding: 22px 15px;
  background-color: rgba(82, 187, 236, .93);
}
.cuadroestra6{
  width: 100%;
  display: block;
  float: left;
  height: auto;
  min-height: 33.33vh;
  padding: 22px 15px;
  background-color: rgba(4, 50, 120, .93);
}




.cuadroestra1back{
  background-color: rgba(4, 50, 120, 1);
}
.cuadroestra2back{
  background-color: rgba(28, 167, 236, 1);
}
.cuadroestra3back{
  background-color: rgba(0, 113, 187, 1);
}
.cuadroestra4back{
  background-color: rgba(46, 204, 204, 1);
}
.cuadroestra5back{
  background-color: rgba(82, 187, 236, 1);
}
.cuadroestra6back{
  background-color: rgba(4, 50, 120, 1);
}



.contericonestrate{
  width: 30px;
  display: block;
  overflow: hidden;
  float: left;
}
.contertextestrate{
  width: calc(100% - 30px);
  display: block;
  overflow: hidden;
  float: left;
  padding-left: 10px;
}
.contericonestrate2{
  width: 25px;
  display: block;
  overflow: hidden;
  float: left;
}
.contertextestrate2{
  width: calc(100% - 25px);
  display: block;
  overflow: hidden;
  float: left;
  padding-left: 10px;
}
.estra4{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 100px 0px;
}
.cuadroestra7{
  width: 100%;
  display: block;
  float: left;
  height: auto;
  padding: 15px;
  background-color: rgba(0, 113, 187, 1);
}
.cuadroestra8{
  width: 100%;
  display: block;
  float: left;
  height: auto;
  padding: 15px;
  background-color: rgba(82, 187, 236, 1);
}
.estra5{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg10.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
  padding: 100px 0px;
}
.cuadroestra9{
  width: 100%;
  display: block;
  float: left;
  height: auto;
  padding: 15px;
  background-color: rgba(4, 50, 120, .93);
}
.cuadroestra10{
  width: 100%;
  display: block;
  float: left;
  height: auto;
  padding: 15px;
  background-color: rgba(0, 113, 187, .93);
}
.cuadroestra11{
  width: 100%;
  display: block;
  float: left;
  height: auto;
  padding: 15px;
  background-color: rgba(28, 167, 236, .93);
}
.cuadroestra12{
  width: 100%;
  display: block;
  float: left;
  height: auto;
  padding: 15px;
  background-color: rgba(82, 187, 236, .93);
}
.estra6{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px;
}
.estra7{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px;
}
.estra8{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg11.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
  padding: 100px 0px;
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

.flip-card:focus {
    outline: 0;
}

.flip-card:hover .flip-card-inner,
.flip-card:focus .flip-card-inner{
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-card-front {
  color: black;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip-card-back {
  color: white;
  transform: rotateY(180deg);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
































/* --- gobernanza --- */
.gob1{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 50px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg12.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.gob2{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 100px 0px;
}
.gob3{
  width: 100vw;
  height: auto;
  padding: 100px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg13.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.estrudir{
  width: 100%;
  max-width: 950px;
  display: block;
  float: right;
}
.gob4{
  width: 100vw;
  height: auto;
  padding: 100px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg14.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.conterprop{
  width:100%;
  display: block;
  overflow: hidden;
  padding: 20px;
  border: 1px solid #2ecccc;
  height: auto;
  min-height: 455px;
}
.contersup{
  width:100%;
  display: block;
  overflow: hidden;
  padding: 20px;
  border: 1px solid #92d2f4;
  height: auto;
  min-height: 455px;
}
.gob5{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding-bottom: 50px;
}
.gob6{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px;
}
.gob7{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px;
}
.gob8{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px;
}
.gob9{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px;
}
.gob10{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px;
}
.cuadrocanal1{
  width: 100%;
  display: block;
  float: left;
  height: auto;
  padding: 22px;
  background-color: rgba(28, 167, 236, .93);
}
.cuadrocanal2{
  width: 100%;
  display: block;
  float: left;
  height: auto;
  padding: 22px ;
  background-color: rgba(82, 187, 236, .93);
}
.gob11{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px;
}


/* --- cadena de valor --- */
.cadena1{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 50px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg15.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.cadena2{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 100px 0px;
}
.cadena3{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding-bottom: 100px;
}
.cadena4{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px;
}
.cadena5{
  width: 100vw;
  height: auto;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg21.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.backcadena5{
  padding: 50px 30px;
  background-color: rgba(4, 50, 120, .9);
}
hr.saltocadena{
  border-top: 1px solid #0071bb;
  border-bottom: 0px solid #0071bb;
  border-left: 0px solid #0071bb;
  border-right: 0px solid #0071bb;
  margin: 35px 0px 15px 0px;
}
.cadena6{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
}
.cadena7{
  width: 100vw;
  height: auto;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg22.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
  padding: 100px 0px;
}
.imgcadena7{
  width: 90%;
  max-width: 300px;
  display: block;
  margin: 0 auto;
}
.cadena8{
  width: 100vw;
  height: auto;
  min-height:100vh;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg23.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.cadena8con40{
  width: 40%;
  display: block;
  float: left;
  background-color: rgba(4, 50, 120, .9);
  padding: 70px 50px;
  height: auto;
  min-height:100vh;
  display: flex;
  align-items: center;
  align-content: center;
}
.cadena8con40color{
  width: 90%;
  max-width: 450px;
  display: block;
  position: absolute;
  right: 0;
  bottom: 5%;
  height: auto;
  padding: 25px;
  background-color: rgba(28, 167, 236, .93);
}
.cadena9{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 100px 0px 50px 0px;
}
.imgcomunicadena{
  width: 90%;
  max-width: 300px;
  display: block;
  margin: 0 auto;
}
.cadena10{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px 100px 0px;
}
.cadena10a{
  width: 100vw;
  height: auto;
  min-height:100vh;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg28.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.cadena10acon40{
  width: 50%;
  display: flex;
  float: left;
  background-color: rgba(4, 50, 120, .9);
  padding: 70px 50px;
  height: auto;
  min-height:100vh;
  display: flex;
  align-items: center;
  align-content: center;
}
.contercompro{
  width: 90%;
  max-width: 300px;
  display: block;
  position: absolute;
  right: 0px;
  background-color: rgba(4, 50, 120, .9);
  z-index: 1;
  height: 100%;
  top: 0;
  padding: 0px 30px;
  align-items: center;
  align-content: center;
}
.martop30px{
  margin-top: 30%;
}
.cadena11{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 100px 0px 50px 0px;
}
.cadena12{
  width: 100vw;
  height: auto;
  min-height:100vh;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg24.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.contercadena12{
  width: 100%;
  display: flex;
  position: realtive;
  background-color: rgba(4, 50, 120, .9);
  height: auto;
  min-height: 100vh;
  align-items: center;
  align-content: center;
  padding: 100px 0px;
}
.minheight800{
  min-height:895.533px;
}
.cadena12a{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 100px 0px 50px 0px;
}
.cadena12b{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px;
}
.conterazulcadena12a{
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 15px 30px;
  background-color: #043278;
}
.cadena13{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px 100px 0px;
}
.cadena14{
  width: 100vw;
  height: auto;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg25.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.contercadena14{
  width: 100%;
  display: flex;
  position: realtive;
  background-color: rgba(4, 50, 120, .9);
  align-items: center;
  align-content: center;
  padding: 100px 0px;
}
.cadena15{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 100px 0px;
}
.cadena15bloq1{
  width: 100%;
  display: block;
  overflow: hidden;
  background-color: #043278;
  padding: 20px;
}
.cadena15bloq2{
  width: 100%;
  display: block;
  overflow: hidden;
  background-color: #0071bb;
  padding: 20px;
}
.cadena15bloq3{
  width: 100%;
  display: block;
  overflow: hidden;
  background-color: #1ca7ec;
  padding: 20px;
}
.cadena16{
  width: 100vw;
  height: auto;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg26.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
  padding: 100px 0px;
}
.cadena17{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 100px 0px 50px;
}
.cadena18{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px 100px 0px;
}
.conterpro1{
  width: 100%;
  background-color: #3d81c1;
  padding: 9px;
}
.conterpro2{
  width: 100%;
  background-color: #e1f1fb;
  padding: 9px;
}
.conterpro3{
  width: 100%;
  background-color: #69b7eb;
  padding: 9px;
}
.cadena19{
  width: 100vw;
  height: auto;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg27.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.contercadena19{
  width: 100%;
  display: flex;
  position: realtive;
  background-color: rgba(4, 50, 120, .9);
  align-items: center;
  align-content: center;
  padding: 100px 0px;
}
.cadena20{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 100px 0px 50px 0px;
}
.cadena21{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px;
}
.cadena22{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px 100px 0px;
}
.indicadorasgraf{
  width: 90%;
  max-width: 210px;
  float: right;
  display: block;
}









/* --- finanzas sostenibles --- */
.finan1{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 50px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg16.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.finan2{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding-bottom: 100px;
}
.finan3{
  width: 100vw;
  height: auto;
  padding: 50px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg17.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.titulo1bonver{
  width: 100%;
  max-width: 200px;
  display: block;
  margin: 0 auto;
}
.iconbon{
  width: 40px;
  display: block;
  float: left;
  overflow: hidden;
}
.texticonbon{
  width: calc(100% - 40px);
  display: block;
  overflow: hidden;
  float: left;
  padding-left: 10px;
}
.theadbon{
  background-image: url('../img/58.png');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;p
  background-position-y: center;
}
.finan4{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 100px 0px;
}
.finan5{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding-bottom: 100px;
}
.finan6{
  width: 100vw;
  height: auto;
  min-height:100vh;
  padding: 50px 0x;
  display: flex;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg18.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.backfinan6{
  width:100%;
  display: block;
  overflow: hidden;
  padding: 20px;
  background-color: rgba(4, 50, 120, .9);
}
.finan7{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 100px 0px 50px 0px;
}
.finan8{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px 50px 0px;
}
.finan9{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 50px 0px 50px 0px;
}

/* --- contribucion a la comunidad --- */
.contri1{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 50px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg19.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.contri2{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 100px 0px 50px 0px;
}
.contri3{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg20.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.contri3azul{
  width: 50%;
  height: auto;
  min-height: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
  background-image: url('../img/66.png');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.height100{
  height: 100vh !important;
}
.contri4{
  width: 100%;
  display: block;
  overflow: hidden;
  height: auto;
  background-color: #ffffff;
  padding: 100px 0px;
}













/* -- animaciones graficas -- */
.graf1linea1 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
}
.graf1linea1animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .3s;
}
.graf1linea2 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}
.graf1linea2animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}

.graf1linea3 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
}
.graf1linea3animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}


.graf2linea1 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 525;
  stroke-dashoffset: 525;
}
.graf2linea1animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .3s;
}
.graf2linea2 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 490;
  stroke-dashoffset: 490;
}
.graf2linea2animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}

.graf2linea3 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 465;
  stroke-dashoffset: 465;
}
.graf2linea3animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}


.graf3linea1 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 385;
  stroke-dashoffset: 385;
}
.graf3linea1animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .3s;
}
.graf3linea2 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 435;
  stroke-dashoffset: 435;
}
.graf3linea2animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}
.graf3linea3 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 525;
  stroke-dashoffset: 525;
}
.graf3linea3animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}




.graf4linea1 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 325;
  stroke-dashoffset: 325;
}
.graf4linea1animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .3s;
}
.graf4linea2 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 310;
  stroke-dashoffset: 310;
}
.graf4linea2animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}
.graf4linea3 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 375;
  stroke-dashoffset: 375;
}
.graf4linea3animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}

.graf5linea1 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 25;
  stroke-dashoffset: 25;
}
.graf5linea1animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .3s;
}
.graf5linea2 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
}
.graf5linea2animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}
.graf5linea3 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 85;
  stroke-dashoffset: 85;
}
.graf5linea3animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}



.graf6linea1 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 87;
  stroke-dashoffset: 87;
}
.graf6linea1animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .3s;
}
.graf6linea2 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
}
.graf6linea2animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}
.graf6linea3 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
}
.graf6linea3animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}



.graf7linea1 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}
.graf7linea1animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .3s;
}
.graf7linea2 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 215;
  stroke-dashoffset: 215;
}
.graf7linea2animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}



.graf8linea1 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 348;
  stroke-dashoffset: 348;
}
.graf8linea1animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .3s;
}
.graf8linea2 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 462;
  stroke-dashoffset: 462;
}
.graf8linea2animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}
.graf8linea3 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 39;
  stroke-dashoffset: 39;
}
.graf8linea3animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}




.graf9linea2 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}
.graf9linea2animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}
.graf9linea3 {
  stroke-width: 25px;
  stroke-miterlimit: 10;
  fill: transparent;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}
.graf9linea3animated {
  animation: lineaanimate 1s forwards;
  animation-delay: .6s;
}

/* --- descargas --- */
.descarags1{
  width: 100vw;
  height: auto;
  min-height: 100vh;
  padding: 50px 0px 0px 0px;
  display: block;
  overflow: hidden;
  position: relative;
  background-image: url('../img/bg29.jpg');
  background-size: cover;
  /*background-attachment: fixed;*/
  background-repeat: no-repeat;
  align-items: center;
  align-content: center;
  background-position-y: center;
}
.backdescargas{
  width: 100%;
  display: block;
  overflow: hidden;
  padding: 50px 0px;
  background-color: rgba(4, 50, 120, .9);
  margin-top: 150px;
}



/* --- animaciones --- */
.ani1{
  animation: fadeInLeft;
  animation-delay: .3s;
}
.ani2{
  animation: fadeInRight;
  animation-delay: .3s;
}
.ani3{
  animation: fadeIn;
  animation-delay: .6s;
}
.ani4{
  animation: fadeIn;
  animation-delay: .9s;
}
.ani5{
  animation: fadeInLeft;
  animation-delay: .3s;
}
.ani6{
  animation: fadeIn;
  animation-delay: .6s;
}
.ani7animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani8animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani9{
  animation: fadeInLeft;
  animation-delay: .3s;
}
.ani10{
  animation: fadeIn;
  animation-delay: .6s;
}
.ani11{
  animation: fadeInLeft;
  animation-delay: .3s;
}
.ani12{
  animation: fadeIn;
  animation-delay: .6s;
}
.ani13animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani14animate{
  animation: fadeIn;
  animation-delay: .9s;
}
.ani15animate{
  animation: fadeInUp;
  animation-delay: 1.2s;
}
.ani16animate{
  animation: fadeInUp;
  animation-delay: 1.5s;
}

.ani17animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani18animate{
  animation: fadeInUp;
  animation-delay: .6s;
}

.ani19animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani20animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani21animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani22animate{
  animation: fadeInUp;
  animation-delay: .3s;
}

.ani23animate{
  animation: zoomIn;
  animation-delay: .3s;
}

.ani24animate{
  animation: fadeInUp;
  animation-delay: .3s;
}

.ani25animate{
  animation: fadeInRight;
  animation-delay: .3s;
}

.ani26{
  animation: fadeInLeft;
  animation-delay: .3s;
}
.ani27{
  animation: fadeIn;
  animation-delay: .6s;
}

.ani28animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani29animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani30animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani31animate{
  animation: fadeInUp;
  animation-delay: .3s;
}

.ani32animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani33animate{
  animation: fadeIn;
  animation-delay: .9s;
}
.ani34animate{
  animation: fadeIn;
  animation-delay: 1.2s;
}
.ani35animate{
  animation: fadeIn;
  animation-delay: 1.5s;
}
.ani36animate{
  animation: fadeIn;
  animation-delay: 1.8s;
}
.ani37animate{
  animation: fadeIn;
  animation-delay: 2.1s;
}
.ani38animate{
  animation: fadeIn;
  animation-delay: 2.4s;
}
.ani39animate{
  animation: fadeIn;
  animation-delay: 2.7s;
}
.ani40animate{
  animation: fadeIn;
  animation-delay: 3s;
}
.ani41animate{
  animation: fadeIn;
  animation-delay: 3.3s;
}

.ani42animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani43animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani44animate{
  animation: fadeInLeft;
  animation-delay: .3s;
}


.ani45animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani46animate{
  animation: fadeIn;
  animation-delay: .9s;
}
.ani47animate{
  animation: fadeIn;
  animation-delay: 1.2s;
}
.ani48animate{
  animation: fadeIn;
  animation-delay: 1.5s;
}
.ani49animate{
  animation: fadeIn;
  animation-delay: 1.8s;
}
.ani50animate{
  animation: fadeIn;
  animation-delay: 2.1s;
}
.ani51animate{
  animation: fadeIn;
  animation-delay: 2.4s;
}

.ani52animate{
  animation: fadeIn;
  animation-delay: .3s;
}

.ani53animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani54animate{
  animation: fadeInUp;
  animation-delay: .9s;
}
.ani55animate{
  animation: fadeInUp;
  animation-delay: 1.2s;
}
.ani56animate{
  animation: fadeInUp;
  animation-delay: 1.5s;
}
.ani57animate{
  animation: fadeInUp;
  animation-delay: 1.8s;
}
.ani58animate{
  animation: fadeInUp;
  animation-delay: 2.1s;
}

.ani59animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani60animate{
  animation: fadeInUp;
  animation-delay: .6s;
}
.ani61animate{
  animation: fadeIn;
  animation-delay: .3s;
}

.ani62{
  animation: fadeInLeft;
  animation-delay: .3s;
}
.ani63{
  animation: fadeIn;
  animation-delay: .6s;
}

.ani64animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani65animate{
  animation: fadeIn;
  animation-delay: .3s;
}

.ani66animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani67animate{
  animation: fadeIn;
  animation-delay: .9s;
}
.ani68animate{
  animation: fadeIn;
  animation-delay: 1.2s;
}


.ani69animate{
  animation: fadeInLeft;
  animation-delay: .3s;
}
.ani70animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani71animate{
  animation: fadeInRight;
  animation-delay: .3s;
}

.ani72animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani73animate{
  animation: fadeIn;
  animation-delay: .6s;
}

.ani74animate{
  animation: fadeIn;
  animation-delay: .6s;
}


.ani75animate{
  animation: fadeIn;
  animation-delay: .6s;
}

.ani76animate{
  animation: fadeIn;
  animation-delay: .6s;
}


.ani77animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani78animate{
  animation: fadeInUp;
  animation-delay: .9s;
}


.ani79animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani80animate{
  animation: fadeIn;
  animation-delay: .6s;
}
.ani81animate{
  animation: fadeIn;
  animation-delay: .3s;
}

.ani82animate{
  animation: fadeIn;
  animation-delay: .6s;
}
.ani83animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani84animate{
  animation: fadeInLeft;
  animation-delay: .3s;
}
.ani85animate{
  animation: fadeInLeft;
  animation-delay: .3s;
}
.ani86animate{
  animation: fadeInUp;
  animation-delay: .3s;
}

.ani87animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani88animate{
  animation: fadeInRight;
  animation-delay: .9s;
}

.ani89animate{
  animation: fadeIn;
  animation-delay: .6s;
}

.ani90{
  animation: fadeInLeft;
  animation-delay: .3s;
}
.ani91{
  animation: fadeIn;
  animation-delay: .6s;
}

.ani92animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani93animate{
  animation: fadeIn;
  animation-delay: .6s;
}

.ani94animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani95animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani96animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani97animate{
  animation: fadeInUp;
  animation-delay: .3s;
}
.ani98animate{
  animation: fadeIn;
  animation-delay: .3s;
}

.ani99{
  animation: fadeInLeft;
  animation-delay: .3s;
}
.ani100{
  animation: fadeIn;
  animation-delay: .6s;
}


.ani101animate{
  animation: fadeIn;
  animation-delay: .3s;
}
.ani102animate{
  animation: fadeInRight;
  animation-delay: .6s;
}
.ani103animate{
  animation: fadeInRight;
  animation-delay: .6s;
}























@keyframes lineaanimate {
  to {
    stroke-dashoffset: 0;
  }
}