:root {
  --imagine-text:#e2261b;
  --footer-bg-color: #000;
  --footer-menu-hover:#e2261b;
  --client-animation-cards:-4500px;
  --side-nav-hover: #e1251b;
}



@media (min-width: 892px) {
  :root {
    --client-animation-cards:-4000px;
  }
}

@media(max-height:1440px) {
  :root {
    --client-animation-cards:-3750px;
  }
}


body {
  overflow-x: hidden;
}

footer {
  font-family: "Open Sans", sans-serif;
  padding: 48px 8px 108px 8px;
  background-color:var(--footer-bg-color);
  color:#fff;
}

footer a {
  text-decoration: none;
  color: #fff;
  transition: color 0.15s ease-out 100ms;
}
footer a:hover {
  color: var(--footer-menu-hover);
}

.footer-links {
  width: 210px;
  height: 79px;
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}
.footer-links-first {
  height: 71px;
  width: auto;
}
.footer-net {
  display: flex;
  flex-direction: row;
  width: 136px;
  height: 42px;
  gap: 16px;
}
.footer-1 {
  width: 42px;
  height: 42px;
}
.footer-2 {
  width: 42px;
  height: 42px;
}
.footer-3 {
  width: 42px;
  height: 42px;
}
.address {
  padding-left: 16px;
  padding-right: 16px;
  margin-top: 16px;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
}
.address-talk {
  font-size: 32px;
  font-weight: 900;
}
.address-body {
  font-size: 20px;
  justify-content:space-betweenn;
  padding-left: 16px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-left:-14px;
  font-weight:100;
}
.address-support {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.location_icon {
  height: 23px;
  width: 25px;
}
.address-anim {
  opacity: 0;
  transform: perspective(1200px) translateX(-97px) translateY(-97px) scale(0) rotate(0deg) rotateX(0deg) rotateY(0deg) translateZ(0px);
  transition: 0.25s ease;
}
.address-anim-visible {
  transform: perspective(1200px);
  opacity: 1;
}
.address-places {
  display: flex;
  flex-direction: column;
  gap: 32px;
  font-size: 18px;
  line-height: 28px;
}
.address-title {
  font-size: 20px;
  font-weight: 500;
}
.city-title {
  color: var(--product-title);
}
.address-3-col {
  display: none;
}


.send-link-fill {
  fill: #fcfcfc;
  transition: all 0.25s;
}
.send-link-stroke {
  stroke: #fcfcfc;
  transition: all 0.25s;
}

.send-link:hover .send-link-fill {
  fill: #e2261b;
}

.send-link:hover .send-link-stroke {
  stroke: #e2261b;
}


@media (min-width: 892px) {
 
  footer {
      padding: 70px 16px 140px 16px;
 }
  .footer-links {
      width: 311px;
      height: 100px;
      gap: 24px;
 }
  .footer-links-first {
      height: 61px;
 }
  .footer-net {
      width: 200px;
      height: 42px;
      gap: 16px;
 }
  .footer-1 {
      width: 42px;
      height: 42px;
 }
  .footer-2 {
      width: 42px;
      height: 42px;
 }
  .footer-3 {
      width: 42px;
      height: 42px;
 }
  .address {
      padding-left: 20px;
      padding-right: 20px;
      font-size: 20px;
 }
  .address-talk {
      font-size: 32px;
      margin-left:-12px;
 }
  .address-body {
      flex-direction: row;
      justify-content: space-between;
      margin-left: 12px;
      margin-right: 12px;
 }

}


@media (min-width: 1440px) {




  footer {
      padding: 100px 70px 130px 70px;
 }
  .address {
      font-size: 20px;
 }
  .address-talk {
      font-size: 32px;
      margin-left:-12px;
 }
  .address-title {
      font-size: 20px;
 }

  .one-line {
      display: block;
 }
  .two-lines {
      display: none;
 }

  .field-2 {
      grid-column: span 2;
 }
  .footer-1 {
      width: 42px;
      height: 42px;
 }
  .footer-2 {
      width: 42px;
      height: 42px;
 }
  .footer-3 {
      width: 42px;
      height: 42px;
 }
 .address-body {

    margin-left:0px;
  }
}

@media (min-width: 1000px) {
  .address-places {
      display: none;
 }
  .address-3-col {
      display: flex;
 }
}


.clientes-section {
  flex-direction: column;
  width:100% !important;
  margin-top:0px !important;
}
.container-clientes {
  height: 200px;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.clientes-tittle {
  width: 100%;
  text-align: center;
  font-size:36px;
  font-weight:800;
  display: block;
  margin-top: 40px;
}

.clientes-section-inner {
  display: flex;
  flex-flow: column;
  align-items: center;
  div.container {
      transition: all 0.3s ease;
 }
  @media (max-width: 992px) {
      padding: 10px 20px;
 }
}
.clientes-section.slide-option {
  margin: 0 0 50px 0;
  .no-marg {
      margin: 0 0 0 0;
 }
}
div.highway-slider {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 90px;
  div.highway-barrier {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 180px;
      overflow: hidden;
      position: relative;
 }
  ul.highway-lane {
      display: flex;
      height: 100%;
      li.highway-car {
          margin: 0 10px;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
     }
 }
}
@keyframes translatestf {
  0% {
      transform: translateX(100%);
 }
  100% {
      transform: translateX(-500%);
 }
}

#stffull div.highway-barrier {
  ul.highway-lane {
      width: 500%;
      li.highway-car {
          animation: translatestf 30s linear infinite;
     }
 }
}



@keyframes translateinfinite {
  0% {
    opacity:0;
  }
  1%{
    opacity:1;
  }
  98% {
    opacity:1;
  }
  100% {
      transform: translateX(var(--client-animation-cards));
      opacity:0;
 }
}


#infinite div.highway-barrier {
  align-self: center;
  &::before, &::after {
      content: " ";
      position: absolute;
      z-index: 9;
      width: 180px;
      height: 100%;
 }
  &::before {
      top: 0;
      left: 0;
 }
  &::after {
      top: 0;
      right: 0;
 }
  ul.highway-lane {
      width: calc(150px * 26);
      li.highway-car {
          width: 180px;
          animation: translateinfinite 66s linear infinite;
          span.fab {
              font-size: 65px;
         }
     }
 }
}


.image-logo {
  scale: 0.9;
 /* transition: box-shadow 0.15s ease-out 100ms;
  */
  transition: 0.8s ease 100ms;
  opacity: 1;
 /* transform: perspective(1200px) translateX(-97px) translateY(0px) scale(0) rotate(0deg) rotateX(0deg) rotateY(0deg) translateZ(0px);*/
}
.image-logo-visible {
  transform: perspective(1200px);
  opacity: 1;
}




.counter-highlighter {
  opacity:0;
  transition: 0.75s ease-out;
}

.counter-highlighter-anim{
  opacity:1;
}

.imagine-text{
  text-align: center;
  transform: translateX(24px);
  color: var(--imagine-text);
  color:white;
  transition: 0.75s ease-out;
  margin-top: 0;
    margin-bottom: 0;
}

.imagine-text-anim{
  transform: translateX(1px);
}

.imagine-text-group {
  opacity:0;
  color:white;
  transition: 0.75s ease-out;
}

.imagine-text-anim .imagine-text-group {
  color:#e2261b;
  opacity:1;
}


.products{
  background-position-x: -40px;
  transition: 1.75s ease-out;
}

.products-anim {
  background-position-x: 0px;
  background-size:cover;
}

.img-casos {
  opacity:0;
  transition: 0.75s ease-out;
}

.img-casos-anim {
  opacity:1;
}

.first-banner {
  display:block;
}
.first-banner-mobile{
  display:none;
}

.logo_small {
  display: none;
  margin-left: 18px;
}

.logo_big {
  display:block;
}

.open-menu {
  left:50% !important;
}

.small-invisible {
  display:block;
}

.small-show {
  display:none !important;
}

#text-small-inner-container {
  width:80%;
  margin:auto;
}

#who-we-are-title-2 {
  font-family: "Gotham Black";
  font-weight: 900;
  font-size: 8vw;
  text-align: center;
  position: relative;
}

#texto-2 {
  display: block;
  width: 96%;
  font-size: 2.6vw;
  line-height: 3.4vw;
  z-index: 3;
}
#texto-2 b{
  font-weight:700;
  font-size: 2.6vw;
}
#text-small-inner-container-2{
  display: flex;
  justify-content: center;
}

.counter-big{
  display:block;
}

.counter-small {
  display:none;
}

#ubicaciones {
  position: relative;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #343434;
  color:#fff;
  padding-top: 24px;
  padding-bottom:24px;
}

#mapa {
  display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

#mapa-info {
 
  justify-content: end; */
  border-radius: 10px;
  position: absolute;
  /* margin-left: 269px; */
  /* bottom: 51px; */
  padding: 8px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  display: grid;
  grid-template-columns: repeat(2, fit-content(20%));
  grid-column-gap: 8px;
  margin-top: 0px;
    
}

#mapa-info :first-child {
  grid-column: 1 / -1;
}
.mapa-provincia{
  font-weight: 800;
  font-size:20px;
}
.mapa-title{
  color:#9b9a9a;
  font-weight: 800;
  font-size:15px;
  width: max-content;
}

.mapa-text {
  color: #e2261b;
  font-weight: 800;
    font-size: 15px;
    width: max-content;
}

#map-container {
  width:700px;
  height:817px;
}

#mapa-outer {
  width: 612px;
    display: flex;
    justify-content: end;
    height: 400px;
    bottom: -71px;
    position: absolute;
    pointer-events: none;
}

@media only screen and (max-width: 930px){
  /* first banner */
 
 .first-banner {
    display:none;
  }

  .first-banner-mobile{
    margin-top:100px;
    display: flex;
    flex-direction: column;
    color: #fff;
  }

  .first-banner-video-mobile{
    width:100%;
    height:auto;
  }

  .first-banner-cta-mobile {
    background:url("../images/banner-main/fondo_rojo.jpg");
    padding: 48px 24px 48px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .first-banner-message-mobile-1
  {
    font-size: 8vw;
    font-family: "gotham black", sans-serif;
   font-weight: bold;
    display: block;
    line-height: 8.5vw;
    width: 67vw;
    font-weight: 700;
    color:#000;
  }
  
  .first-banner-message-mobile-2
  {
    font-size: 7.5vw;
    line-height: 9.5vw;
    font-weight: 900;
  }

  .logo_small {
    display: block;
  }
  
  .logo_big {
    display:none;
  }


 

  .sidenav a {
    font-size: 2.1rem !important;
  }

  .social {
    max-width:50% !important;
  }
  
  .small-invisible {
    display:none !important;
  }
  
  .small-show {
    display:flex !important;
  }

  .counter1 {
    margin-left: 0;
  }
  
  .counter2 {
    margin-right: -150px;
  }
  
  .counter3 {
    margin-left: 0;
  }
  #map-container {
    width:600px;
    height:700px;
  }

  .mapa-provincia{
    font-size:16px;
  }
  .mapa-title{
    font-size:14px;
  }
  
  .mapa-text {
      font-size: 14px;
  }

  #mapa-outer {
    width: 534px;
    bottom: -108px;
  }
}

@media only screen and (max-width: 1200px){
  .open-menu {
    left:0% !important;
  }
}

@media only screen and (max-width: 650px){
  .sidenav a {
    font-size: 1.9rem !important;
  }

 .icon-counter {
  width:50%;
 }

 .counter-detail1 {
  margin-left: -66px;
 }
 .counter-detail span {
  font-size: 2.3rem;
 }
 .counter-detail p {
  font-size: 1.3rem;
 }

 .counter-big{
  display:none;
}

.counter-small {
  display:block;
}
/*
#mapa-info {
  justify-content: end;
  border-radius: 10px;
  padding: 8px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  display: flow;
  width: 70%;
  margin-left:0px;
  position:relative;
  bottom:0;
  margin-top: -16px;

}

.mapa-title{
  padding-right:4px;
}
.mapa-text{
  padding-right:4px;
}
*/
#map-container {
  width:85vw;
  height:calc(85vw * 7 / 6);
}
#mapa-outer {
  width: 74vw;
        height: 74vw;
        /* bottom: calc(-634px +(85vw* 7 / 6)); */

        top: 59vw;
}
#mapa-info span{
  font-size:2vw;
}
/*
#mapa-outer {
  width: 100vw;
  bottom: -3px;
  justify-content: center;
  height: fit-content;
  position: relative;
}
  */

}


@media only screen and (max-width: 768px){
  .slide .image-data {

    right: 50% !important;

    width: 80% !important;
    
    transform: translate(50%, 0%) !important;
  }
}

.sidenav {
  min-height: 100%;
  height: 100%;
  /* 100% Full-height */
  width: 100%;
  /* 0 width - change this with JavaScript */
  position: fixed;
  /* Stay in place */
  z-index: 200;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  left: 100%;
  background-color: var(--side-nav-background);
  /* Black*/
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 80px;
  /* Place content 60px from the top */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
}


/* The navigation menu links */
.sidenav a {
  font-family: "Gotham Medium", sans-serif;
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  display: block;
  font-size: 2.5rem;
  box-shadow: inset 0 0 0 0 var(--side-nav-hover);
  color: #fff;
  padding: 0 0.25rem;
  margin: 0 -0.25rem;
  transition: color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: -6px;
  right: 8px;
  font-size: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

@media (min-width: 892px) {
  .sidenav {
    /*  display: none; */
  }
}


.men {
  display: flex;
  flex-direction: column;
  height: 60%;
  padding: 20px;
  margin: 40px;
  justify-content: space-between;
}

.link-1:hover {
  color: #fff;
  box-shadow: inset 320px 0 0 0 var(--side-nav-hover);
}

.link-2:hover {
  color: #fff;
  box-shadow: inset 220px 0 0 0 var(--side-nav-hover);
}
.link-3:hover {
  color: #fff;
  box-shadow: inset 220px 0 0 0 var(--side-nav-hover);
}
.link-4:hover {
  color: #fff;
  box-shadow: inset 500px 0 0 0 var(--side-nav-hover);
}
.link-4-5:hover {
  color: #fff;
  box-shadow: inset 220px 0 0 0 var(--side-nav-hover);
}
.link-5:hover {
  color: #fff;
  box-shadow: inset 310px 0 0 0 var(--side-nav-hover);
}
.link-6:hover {
  color: #fff;
  box-shadow: inset 180px 0 0 0 var(--side-nav-hover);
}
.link-7:hover {
  color: #fff;
  box-shadow: inset 280px 0 0 0 var(--side-nav-hover);
}


.contenedor-linea {
  position: relative;
  height: 6vw;
  overflow: hidden;
}

.contenedor-linea span {
  font-weight: 800;
  font-size: 6vw;
  color: black;
  line-height: 6vw;
  top: 6vw;
  position: relative;
}

#clientes-section-inner-1{
  display:flex;
  gap: 24px;
  overflow-x: hidden;
}

.image-logo-visible {
  transform: perspective(1200px);
  opacity: 1;
}


/* Swiper */

.main-swiper {
  height: 100vh;
  width: 100%;
}
.wrapper-swiper,
.slide {
  position: relative;
  width: 100%;
  height: 100%;
}
.slide {
  overflow: hidden;
}
.slide::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
 /* background-color: rgba(0, 0, 0, 0.4); */
  z-index: 10;
}
.slide .image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.slide .image-data {
  position: absolute;
    bottom: 36px;
    right: 36px;
    text-align: justify;
    width: 400px;
    z-index: 100;
    padding:24px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
}
.image-data span.text {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
}
.image-data span.title {
  font-size: 34px;
  font-weight: 600;

  color: #fff;
}
a.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 25px;
  color: #333;
  background: #fff;
  text-decoration: none;
  margin-top: 25px;
  transition: all 0.3s ease;
}
a.button:hover {
  color: #fff;
  background-color: #c87e4f;
}

/* swiper button css */
.nav-btn {
  height: 50px !important;
  width: 50px !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.nav-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}
.swiper-button-next {
  right: 50px;
}
.swiper-button-prev {
  left: 50px;
}
.nav-btn::before,
.nav-btn::after {
  font-size: 25px !important;
  color: #fff;
}
.swiper-pagination-bullet {
  opacity: 1;
  height: 12px;
  width: 12px;
  background-color: #fff;
  visibility: hidden;
}
.swiper-pagination-bullet-active {
  border: 2px solid #fff;
  background-color: #c87e4f;
}

@media screen and (max-width: 768px) {
  .nav-btn {
    visibility: hidden;
  }
  .swiper-pagination-bullet {
    visibility: visible;
  }
}


.quienes-somos {
  position:absolute;
  top:0;
}

#highlights  {
  margin-top:-50px;
}

#cobertura {
  position:absolute;
  top:60px;
}

#potencia{
  position:absolute;
  top:0;
}

#clientes{
  position:absolute;
  top:-85px;
}

#contactanos{
  position:absolute;
  top:-100px;
}

.quienes-container{
  position: relative;
}

#productos {
  position:absolute;
  top:-100px;
}