/* Created by http://artifitialsystem.com */

* {margin: 0; padding: 0; scrollbar-width: thin; scrollbar-color: #F2911A;}
*::-webkit-scrollbar {width: 12px;}
*::-webkit-scrollbar-track {background: #F2911A;}
*::-webkit-scrollbar-thumb {background-color: #000; border-radius: 20px; border: 1px solid #FFF;}

@import url(//db.onlinewebfonts.com/c/2f62b2adcfeebbcd96c76adaf2bd05aa?family=Montserrat+Medium);
@import url(//db.onlinewebfonts.com/c/06cab1a0b0536008f269a1323d2598b6?family=Montserrat+SemiBold);
@import url(//db.onlinewebfonts.com/c/07689d4eaaa3d530d58826b5d7f84735?family=Montserrat);
@import url(//db.onlinewebfonts.com/c/ff53f5557a4d4a84f53df7610743dbf8?family=Montserrat+ExtraLight);
@import url(//db.onlinewebfonts.com/c/1f275ed58d6a371ccde9215a3963cc41?family=Montserrat+ExtraBold);
@import url(//db.onlinewebfonts.com/c/629a55a7e793da068dc580d184cc0e31?family=Open+Sans);
@import url(//db.onlinewebfonts.com/c/b812035768ba3b9e92b0a01c747eecbd?family=Helvetica+Neue);
@import url(//db.onlinewebfonts.com/c/a64ff11d2c24584c767f6257e880dc65?family=Helvetica);

@font-face {font-family: "Montserrat Medium"; src: url("//db.onlinewebfonts.com/t/2f62b2adcfeebbcd96c76adaf2bd05aa.eot"); src: url("//db.onlinewebfonts.com/t/2f62b2adcfeebbcd96c76adaf2bd05aa.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/2f62b2adcfeebbcd96c76adaf2bd05aa.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/2f62b2adcfeebbcd96c76adaf2bd05aa.woff") format("woff"), url("//db.onlinewebfonts.com/t/2f62b2adcfeebbcd96c76adaf2bd05aa.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/2f62b2adcfeebbcd96c76adaf2bd05aa.svg#Montserrat Medium") format("svg"); }

@font-face {font-family: "Montserrat SemiBold"; src: url("//db.onlinewebfonts.com/t/06cab1a0b0536008f269a1323d2598b6.eot"); src: url("//db.onlinewebfonts.com/t/06cab1a0b0536008f269a1323d2598b6.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/06cab1a0b0536008f269a1323d2598b6.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/06cab1a0b0536008f269a1323d2598b6.woff") format("woff"), url("//db.onlinewebfonts.com/t/06cab1a0b0536008f269a1323d2598b6.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/06cab1a0b0536008f269a1323d2598b6.svg#Montserrat SemiBold") format("svg"); }

@font-face {font-family: "Montserrat"; src: url("//db.onlinewebfonts.com/t/07689d4eaaa3d530d58826b5d7f84735.eot"); src: url("//db.onlinewebfonts.com/t/07689d4eaaa3d530d58826b5d7f84735.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/07689d4eaaa3d530d58826b5d7f84735.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/07689d4eaaa3d530d58826b5d7f84735.woff") format("woff"), url("//db.onlinewebfonts.com/t/07689d4eaaa3d530d58826b5d7f84735.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/07689d4eaaa3d530d58826b5d7f84735.svg#Montserrat") format("svg");}

@font-face {font-family: "Montserrat ExtraLight"; src: url("//db.onlinewebfonts.com/t/ff53f5557a4d4a84f53df7610743dbf8.eot"); src: url("//db.onlinewebfonts.com/t/ff53f5557a4d4a84f53df7610743dbf8.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/ff53f5557a4d4a84f53df7610743dbf8.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/ff53f5557a4d4a84f53df7610743dbf8.woff") format("woff"), url("//db.onlinewebfonts.com/t/ff53f5557a4d4a84f53df7610743dbf8.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/ff53f5557a4d4a84f53df7610743dbf8.svg#Montserrat ExtraLight") format("svg"); }

@font-face {font-family: "Open Sans"; src: url("//db.onlinewebfonts.com/t/629a55a7e793da068dc580d184cc0e31.eot"); src: url("//db.onlinewebfonts.com/t/629a55a7e793da068dc580d184cc0e31.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/629a55a7e793da068dc580d184cc0e31.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/629a55a7e793da068dc580d184cc0e31.woff") format("woff"), url("//db.onlinewebfonts.com/t/629a55a7e793da068dc580d184cc0e31.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/629a55a7e793da068dc580d184cc0e31.svg#Open Sans") format("svg"); }

@font-face {font-family: "Montserrat ExtraBold"; src: url("//db.onlinewebfonts.com/t/1f275ed58d6a371ccde9215a3963cc41.eot"); src: url("//db.onlinewebfonts.com/t/1f275ed58d6a371ccde9215a3963cc41.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/1f275ed58d6a371ccde9215a3963cc41.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/1f275ed58d6a371ccde9215a3963cc41.woff") format("woff"), url("//db.onlinewebfonts.com/t/1f275ed58d6a371ccde9215a3963cc41.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/1f275ed58d6a371ccde9215a3963cc41.svg#Montserrat ExtraBold") format("svg"); }

@font-face {font-family: "Helvetica Neue"; src: url("//db.onlinewebfonts.com/t/b812035768ba3b9e92b0a01c747eecbd.eot"); src: url("//db.onlinewebfonts.com/t/b812035768ba3b9e92b0a01c747eecbd.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b812035768ba3b9e92b0a01c747eecbd.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/b812035768ba3b9e92b0a01c747eecbd.woff") format("woff"), url("//db.onlinewebfonts.com/t/b812035768ba3b9e92b0a01c747eecbd.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/b812035768ba3b9e92b0a01c747eecbd.svg#Helvetica Neue") format("svg"); }

@font-face {font-family: "Helvetica"; src: url("//db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot"); src: url("//db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.woff") format("woff"), url("//db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica") format("svg"); }

body {line-height: normal; overflow-x: hidden;}
html {font-size: 16px; scroll-behavior: smooth;}
header, footer, section, aside, nav, article, div {display: block; border: 1px dashed transparent;}
section {overflow: hidden; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;}

.wrapper {width: 100%; height: auto;} /*height: 700px; overflow: hidden;*/

/* Header */
header {overflow: hidden; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center;}
  
  /* Header Imagotipo */  
  .header-sec1 {width: 100%; height: 20%; display: flex; flex-flow: wrap;}
  .imagotipo {width: 15%; height: 100%; display: grid; place-items: center;}

  /* Header Menu */
  nav{width: 69%; height: 100%; display: grid; place-items: center;}
  nav li {display: inline-block; line-height: 130px;}
  nav a {outline: none; text-decoration: none; color: black; font-family: "Montserrat Medium"; font-size: 24px; margin: 10px; letter-spacing: -1.5px;}
  
  /* Efecto Hover Menu */
  nav a {background-image: linear-gradient(to right, #F2911A, #F2911A 50%, black 50%); background-size: 200% 100%; background-position: -100%; display: inline-block;padding: 0; position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; ttransition: all 0.3s ease-in-out;}
  nav a:before {content: ''; background: #F2911A; display: block; position: absolute; bottom: 40px; left: 0; width: 0; height: 3px; transition: all 0.3s ease-in-out;}
  nav a:hover {background-position: 0;}
  nav a:hover::before {width:100%;}

  /* Header Sesion */
  .menuoptions {width: 15%; height: 100%; display: grid; place-items: center;}

   /* Boton Header Sesion #F2911A */
  .menuoptions a {font-family: "Montserrat"; font-size: 1rem; background-color: #F2911A; color: white; font-weight: 600; border: none; padding: 10px 20px; position: relative; text-decoration: none; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1); 0s;}
  .menuoptions a:hover {color: #FFF !important; background-color: transparent; text-shadow: nthree;}
  .menuoptions a:hover:before {left: 0%; right: auto;	width: 100%;}
  .menuoptions a:before {display: block; position: absolute; top: 0px; right: 0px; height: 100%; width: 0px; z-index: -1; content: ''; color: #FFF !important; background: #000;	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1); 0s;}

  /* Swipper Slider */
  slider {width: 100%; height: 80%; display: flex; align-items: center; justify-content: center; padding: 0%;}
    .swiper {width: 100%; height: 100%;}
    .swiper-slide {position: relative;}
    .swiper-slide img {width: 100%; height: 100%; object-fit: fill;}
    .swiper .swiper-button-prev, .swiper .swiper-button-next {color: #F2911A;}

  /* Texto Contenido Slider */
  .texto-animado {width: 60%; height: 50%; position: absolute; top: 50%; left: 70%; transform: translate(-50%, -50%); color: #FFF; text-align: center;}
  .texto-animado h1 {font-family: "Montserrat SemiBold"; font-size: 3rem; color: #FFF; margin-bottom: 2rem;}
  .texto-animado p {font-family: "Montserrat ExtraLight"; font-size: 1.5rem; line-height: 1.2; color: #FFF; max-width: 80%; margin: 0 auto; margin-bottom: 3rem;}
  .texto-animado h1, .texto-animado p {opacity: 0;}

  /* Texto Animado Contenido Slider */
  .swiper-slide-active .texto-animado h1 {animation: fade-in-left 2s ease-out forwards;}
  .swiper-slide-active .texto-animado p {animation: fade-in-top 2s ease-out forwards;}

  @keyframes fade-in-left {
    from {opacity: 0; transform: translateX(-50%);} to {opacity: 1; transform: translateX(0);}
  }

  @keyframes fade-in-top {
    from {opacity: 0; transform: translateY(-50%);} to {opacity: 1; transform: translateY(0);}
  }

  /* Boton Contenido Slider */
  .texto-animado a {font-family: "Open Sans"; font-size: 1.1rem; background-color: transparent; color: white; border: 4px solid white; padding: 10px 20px; position: relative; text-decoration: none; transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1); 0s;}
  .texto-animado a:hover {color: #FFF !important; background-color: transparent; text-shadow: nthree;}
  .texto-animado a:hover:before {left: 0%; right: auto;	width: 100%;}
  .texto-animado a:before {display: block; position: absolute; top: 0px; right: 0px; height: 100%; width: 0px; z-index: -1; content: ''; color: #FFF !important; background: #F2911A;	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1); 0s;}

/* Seccion 1 */

  /* Sección 1 - Articulo 1 */
  .sec1_art1  {width: 70%; height: 40%; display: grid; place-items: center;}
  .sec1_art1 h1 {font-family: "Montserrat ExtraBold"; font-size: 3rem; color: #F2911A;}
  .sec1_art1 p {font-family: "Montserrat ExtraLight"; font-size: 1.5rem; color: black; text-align: center;}

  /* Sección 1 - Articulo 2 */
  .sec1_art2 {width: 86%; height: 60%; padding: 130px 0px 0px 270px; background-image: url("../img/brand_people.png"); background-repeat: no-repeat; background-position: center; background-size: 100% 105%;}
  .sec1_art2_record {float: left; width: 30%; height: 200px; background-color: white; margin-left: 40px; text-align: center;}
  .sec1_art2_record img {margin: 15px;}
  .numero {font-family: "Helvetica Neue"; font-size: 3rem; color: black;}
  .sec1_art2_record h4 {font-family: "Helvetica"; font-size: 1.2rem; color: black;}
  #contador {animation-name: contador; animation-duration: 2s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; opacity: 0;}
  @keyframes contador {
    from {
      opacity: 0;
      transform: translateY(100px) scale(0.5);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

/* Sección 2 */

.video_titulo {width: 100%; height: 15%; display:grid; place-items: center;}
.video_titulo h1 {font-family: "Montserrat ExtraBold"; font-size: 3rem; color: #F2911A;}
.video_seccion {width: 100%; height: 85%; display: grid; place-items: center;}
.show_video {width: 95%; height: 90%; border: solid 10px #F2911A; overflow: hidden;}

/* Sección 3 */
.sec2_clients {width: 100%; height: 100%; display: flex; flex-flow: wrap;}
.sec2_titulos {width: 29%; height: 100%; background-color: black; display: grid; place-items: center;}

  /*.sec2_titulo {padding: 60% 0% 0% 10%}*/
  .sec2_titulo h1 {font-family: "Montserrat ExtraBold"; font-size: 3.5rem; color: #F2911A;}
  .sec2_logos {width: 70%; height: 100%; display: flex; flex-flow: wrap;}
  .sec2_logo {width: 49%; height: 33%; display: flex; align-items: center; justify-content: center;} 
  .zoom {transition: transform .2s;}
  .zoom:hover {transform: scale(1.2);}

/* About US */

  /* Banner */
  .banner {width: 100%; height: 80%; display: flex; flex-flow: wrap;}
    .banner_texto {width: 70%; height: 100%; display: grid; place-items: center; background-color: #000;}
    .banner_texto p {margin: 3em; font-family: "Montserrat"; font-size: 1.7rem; color: #FFF; text-align: justify;}
    .banner_imagen {width: 29.5%; height: 100%; display: grid; place-items: center;}

  /* Carta */

  .about {width: 100vw; height: auto; display: flex; flex-direction: column; align-items: center;}
    .content {width: 100vw; height: 70vh; display: grid; place-items: center;} 
      .letter {width: 90%; height: 90%; display: flex; flex-flow: wrap;}
        .letter_imagen {width: 40%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-right: 5px solid #F2911A;}
        .img_radius {width: 18em; height: 18em; border-radius: 50%;}
        .letter_texto {width: 59%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 50px;}
        .letter_texto h1 {font-family: "Montserrat SemiBold"; font-size: 2.8rem; color: #F2911A;}
        .letter_texto p {margin-left: 2em; margin-right: 2em; font-family: "Montserrat ExtraLight"; font-size: 2rem; color: #000; text-align: justify;}

 /* Valores */

.values {width: 100vw; height: 260vh; display: flex; flex-direction: column;}
  .values_title {width: 100%; height: 5%; display: grid; place-items: center;}
    .values_title h1 {font-family: "Montserrat SemiBold"; font-size: 3.5rem; color: #F2911A;}
  .values
  .values_banners {width: 100%; height: 100%; display: flex; flex-flow: wrap; justify-content: center; gap: 50px; margin-top: 2em;}
    .banner1, .banner2 {width: 90%; height: 21%; display: flex; flex-flow: wrap;}
      .imgleft {width: 40%; height: 100%; display: grid; place-items: center;}
        .imgleft img {object-fit: fill; width:100%; height:100%;}
      .txtrigth {width: 59%; height: 100%; display: grid; place-items: center;}
        .txtrigth span {font-family: "Helvetica"; font-size: 4rem; color: #000;}
      .imgrigth {width: 40%; height: 100%; display: grid; place-items: center;}
        .imgrigth img {object-fit: fill; width:100%; height:100%;}
      .txtleft {width: 59%; height: 100%; display: grid; place-items: center; background-color: #F2911A;}
        .txtleft span {font-family: "Helvetica"; font-size: 4rem; color: #FFF;}

/* Services */

.main {width: 100%; height: 80%; display: flex; justify-content: center; align-items: center;}
.main_left {width: 40%; height: 95%; display: flex; flex-direction: column; margin: 1em; box-sizing: border-box;}
.main_left_a {width: 100%; height: 70%; display: grid; place-items: center; margin-bottom: 1em;}
.main_left_b {width: 100%; height: 30%; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #F2911A;}
.type1 {font-family: "Montserrat SemiBold"; font-size: 3rem; color: #FFF;}
.type2 {font-family: "Montserrat ExtraLight"; font-size: 2rem; color: #FFF;}
.main_rigth {width: 52%; height: 95%; display: grid; place-items: center; margin: 1em; box-sizing: border-box; background: pink;}

.main_up {width: 100%; height: 65%; display: flex; flex-flow: wrap; justify-content: center; margin: 1em; box-sizing: border-box;}
.main_up_a {width: 45%; height: 100%; display: grid; place-items: center; margin-right: 3em;}
.main_up_b {width: 45%; height: 100%; display: grid; place-items: center; background-color: #D8A806;}
.main_up_b_text {width: 80%; height: auto;}
.main_up_b_text .type1 {font-family: "Montserrat ExtraBold"; font-size: 5rem; color: #FFF;}
.main_up_b_text .type2 {font-family: "Montserrat SemiBold"; font-size: 3rem; color: #FFF;}
.main_up_b_text p {font-family: "Montserrat ExtraLight"; font-size: 2rem; color: #FFF; text-align: justify;}
.main_down {width: 95%; height: 25%; display: grid; place-items: center; margin: 1em; box-sizing: border-box; background: #F2911A;}
.main_down_text {width: 80%; height: auto; text-align: center;}
.main_down_text .type1 {font-family: "Montserrat ExtraLight"; font-size: 2.5rem; color: #FFF;}
.main_down_text .type2 {font-family: "Montserrat SemiBold"; font-size: 2.5rem; color: #FFF;}

.space {width: 95%; height: 95%; position: relative;}
.getimage1 {width: 60%; position: absolute;}
.gettransp1 {width: 55%; height: 90%; display: grid; place-items: center; position: absolute; left: 40%; top: 10%; background-color: rgba(216,168,6,0.8);}
.getimage2 {width: 60%; position: absolute; right: 0;}
.gettransp2 {width: 55%; height: 90%; display: grid; place-items: center; position: absolute; left: 5%; top: 10%; background-color: rgba(242,145,26,0.8);}
.gettext {width: 80%; height: auto; line-height: 2rem;}
.gettext h1 {font-family: "Montserrat SemiBold"; font-size: 3rem; color: #FFF;}
.gettext p, .gettext li{font-family: "Montserrat ExtraLight"; font-size: 1.8rem; color: #FFF; text-align: justify;}
.gettext ul {list-style-type: square; padding-left: 1.5rem;}



/* Footer */
footer {overflow: hidden; width: 100vw; height: 100vh; display: flex; flex-direction: column;} 

  .footer_logo {width: 100%; height: 18%; background-color: #F2911A; display: flex;}
  .footer_logo img {margin-left: 5%;}
  .footer_sec1 {width: 100%; height: 56%; background-color: #F2911A; display: flex; flex-flow: wrap;}
  .footer_sec1_article1 {width: 45%; height: 100%; display: flex; flex-direction: column; background-color: #F2911A;} 
  .footer_sec1_article1 h1 {margin-top: 1%; margin-left: 10%; color: white; font-family: "Montserrat"; font-size: 1.2rem; font-weight: 700;}
  .footer_sec1_article1 p {margin-left: 10%; color: white; line-height: 1.8rem; font-family:"Montserrat"; font-size: 1.1rem;}
  .footer_sec1_article1 i{font-size: 1.1rem;}

  .footer_sec1_article2 {width: 27%; height: 100%; display: flex; flex-direction: column; background-color: #F2911A;} 
  .footer_sec1_article2 h1 {margin-top: 1%;  margin-left: 15%; color: white; font-family:"Montserrat"; font-size: 2rem; font-weight: 600;}
  .footer_sec1_article2 ul {list-style-type: square;  margin-left: 20%; line-height: 30px; font-family:"Montserrat"; font-size: 20px; color:white;}
  .footer_sec1_article2 li:hover {color:black;}
  .footer_sec1_article2 a:link {color: #FFF; text-decoration: none;}  
  .footer_sec1_article2 a:hover {color: #000;}  
  .footer_sec1_article2 a:visited {color: #FFF;} 
  .footer_sec1_article2 a:active {color: #FFF;} 

  .footer_sec1_article3 {width: 27%; height: 100%; display: flex; flex-direction: column; background-color: #F2911A;} 
  .footer_sec1_article3 h1 {margin-top: 1%; margin-left: 15%; color: white; font-family:"Montserrat"; font-size: 2rem; font-weight: 600;}
  .footer_sec1_article3 ul {list-style-type: square; margin-left: 20%; line-height: 30px; font-family:"Montserrat"; font-size: 1.1rem; color:white;} 
  .footer_sec1_article3 li:hover {color:black;}
  .footer_sec1_article3 a:link {color: #FFF; text-decoration: none;}  
  .footer_sec1_article3 a:hover {color: #000;}  
  .footer_sec1_article3 a:visited {color: #FFF;} 
  .footer_sec1_article3 a:active {color: #FFF;}

  .footer_sec2 {width: 100%; height: 26%; display: flex; flex-flow: wrap;}
  .footer_sec2_article1 {width: 20%; height: 100%; display: grid; place-items: center;}
  .footer_sec2_article1 i {font-size: 6rem; color: black;}
  .footer_sec2_article1 i:hover {color: #F2911A;}

  .footer_sec2_article2 {width: 59.5%; height: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center; gap: 10px;}
  .footer_sec2_article2 h1 {font-family: "Montserrat Medium"; font-size: 1.5rem; font-weight: 100; color: #000}
  .footer_sec2_article2 i {color: #F2911A; font-size: 4rem; margin-left: 0.5em;}
  .footer_sec2_article2 i:hover {color: black;}
  .footer_sec2_article2 span, .footer_sec2_article2 a {font-family: "Montserrat ExtraLight"; font-size: 1rem; text-decoration: none;}
  .footer_sec2_article2 a:hover {color: #000;}  
  .footer_sec2_article2 a:visited {color: #000;} 
  .footer_sec2_article2 a:active {color: #000;}

  .footer_sec2_article3 {width: 20%; height: 100%; display: flex; align-items: center; justify-content: center;}
  .footer_sec2_article3 i {font-size: 6rem; color: black;} 
  .footer_sec2_article3 i:hover {color: #F2911A;}

/*.section {background-image: url("../img/maqueta.png"); background-repeat: no-repeat; background-position: center; background-size: cover; } 

.sec1_record {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 300px;}
 */