body{
   overflow-x:hidden;
}

.nowrap{
  white-space: nowrap;
}



/* ===================================
   Video
====================================== */
.hero {
  position: relative;
  overflow: hidden;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  z-index: -100;
}

.custom-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* ===================================
   Dejanos platicarte
====================================== */
.card-1{
    background: linear-gradient(270deg, #363636 0%, rgba(196, 196, 196, 0) 83.33%);
    border-radius: 10px;
    width: 320px;
    height: 134px;
    padding: 10px;
}

.card-2{
  background: linear-gradient(90deg, #363636 0%, rgba(196, 196, 196, 0) 83.33%);
  border-radius: 10px;
  width: 340px;
  height: 112px;
  padding: 10px;
  position: relative;
}

.img-center{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}

.icons img{
  opacity: 0.05;
  width: 80%;
}

.magenta{
  left: -20%;
}

.cyan{
  right: -20%;
}

/* =====================================================
   Efecto cambio de color en el background
========================================================= */
        
.bg-background-fade {background-color: black}
.color-1, .color-2, .color-3, .color-4, .color-5 {-webkit-transition: background-color 700ms linear; -moz-transition: background-color 700ms linear; -o-transition: background-color 700ms linear; -ms-transition: background-color 700ms linear; transition: background-color 700ms linear;}
.color-1 {background-color: black;}
.color-2 {background-color: white;}
   

 /* =====================================================
   Background gradient Dejanos platicarte y Equipo
========================================================= */
.gradient-right-to-left{
  background: linear-gradient(90.00deg, #191C23 -0.95%, rgba(25, 28, 35, 0.5) 51.09%, rgba(25, 28, 35, 0.05) 97.4%);
  border-radius: 10px;
}

.gradient-left-to-right{
  background: linear-gradient(280.00deg, #191C23 -0.95%, rgba(25, 28, 35, 0.5) 51.09%, rgba(25, 28, 35, 0.05) 97.4%);
  border-radius: 10px;
}

/* ===================================
   Background image
====================================== */

/*.parallax {position: relative !important; background-size: cover !important; overflow: hidden; background-attachment: fixed !important; transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; -o-transition-duration: 0s;}*/
.fix-background {background-attachment: fixed !important; background-position: center center; background-repeat: no-repeat; background-size: cover !important; overflow: hidden; position: relative; transition-duration: 0.2s; transition-timing-function: ease-in;}
.cover-background {position: relative !important; background-size: cover !important; overflow: hidden !important; background-position: center !important; background-repeat: no-repeat !important;}


/* ===================================
   Swiper carousel
====================================== */
/* swiper auto width */
.swiper-auto-slide .swiper-slide {width: 100%;}
.swiper-auto-slide.swiper-container {height: calc(100% - 300px); top: 100px; margin: 0 auto; overflow: visible; position: absolute; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transition: all 0.3s ease-in-out 0.7s; -webkit-transition: all 0.3s ease-in-out 0.7s; -moz-transition: all 0.3s ease-in-out 0.7s; -ms-transition: all 0.3s ease-in-out 0.7s; -o-transition: all 0.3s ease-in-out 0.7s; width: 100%;}
.swiper-auto-slide .swiper-scrollbar {left: 20%; opacity: 1; position: absolute; width: 60%; bottom:-50px; border-radius: 0; height: 1px}
.swiper-auto-slide .swiper-scrollbar-drag {border-radius: 0; background: transparent;}
.swiper-auto-slide .swiper-scrollbar-drag:before{cursor:move; position: absolute; content: ""; background: black; width: 13px; height: 13px; border-radius: 100%; top:-6px; left: calc(50% - 13px);}
/*.swiper-auto-slide .swiper-slide {filter: contrast(130%); -webkit-filter:contrast(130%); -moz-filter: contrast(130%); -ms-filter: contrast(130%); -o-filter: contrast(130%); filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -ms-filter: grayscale(1); -o-filter: grayscale(1); transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s;}
.swiper-auto-slide .swiper-slide.swiper-slide-active {filter: contrast(0); -webkit-filter:contrast(0); -moz-filter: contrast(0); -ms-filter: contrast(0); -o-filter: contrast(0); filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); -o-filter: grayscale(0); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out;}
.swiper-auto-slide .swiper-slide .absolute-middle-center h2 {opacity: 0; margin-bottom: 10px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transform: translateY(-60px); -webkit-transform: translateY(-60px); -moz-transform: translateY(-60px); -ms-transform: translateY(-60px); -o-transform: translateY(-60px);}
.swiper-auto-slide .swiper-slide.swiper-slide-active .absolute-middle-center h2 {opacity: 1; transition: all 0.3s ease-in-out 0.7s; -webkit-transition: all 0.3s ease-in-out 0.7s; -moz-transition: all 0.3s ease-in-out 0.7s; -ms-transition: all 0.3s ease-in-out 0.7s; -o-transition: all 0.3s ease-in-out 0.7s; transform: translateY(0px); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px);}
.swiper-auto-slide .swiper-slide span {opacity: 0; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}*/
/*.swiper-auto-slide .swiper-slide.swiper-slide-active span {opacity: 1; transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}*/


/* next prev button style 2 */
.swiper-next-style2,.swiper-prev-style2 {position: absolute; bottom: -60px; cursor: pointer; text-transform: uppercase; outline: none; color: black}
.swiper-next-style2 {right: 10%;}
.swiper-prev-style2 {left: 10%;}


/* square pagination */
/*.white-move .swiper-slide {cursor: url("../images/icon-move-light.png"), move;}
.black-move .swiper-slide {cursor: url("../images/icon-move-black.png"), move;}
.white-move.swiper-vertical-pagination .swiper-slide {cursor: url("../images/icon-move-light-vertical.png"), move;}
.black-move.swiper-vertical-pagination .swiper-slide {cursor: url("../images/icon-move-black-vertical.png"), move;}*/

/*Gallerya proyecto*/
      .gallery .swiper {
        width: 100%;
        height: 550px;
      }

      .gallery .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .gallery .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .gallery .swiper-slide {
        max-width: 50%;
        max-height: 450px;
      }

/* =====================================================
   Carrusel Nuestros proyectos
========================================================= */
.footer-card{
  display: grid;
  grid-template-columns: 20% 80%;
}

.footer-card-p{
  overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

//* ===================================
    Parallax
====================================== */
.elements-float img {
 position: absolute;
 width: 200px;
 left: calc(50% - 100px);
 margin: 550px auto;
 opacity: 0.15;
}
.elements-float .laso {
 margin-left: 0px !important;
 top: -550px !important;
}


.elements-float-mini .laso {
 margin-left: -30% !important;
 top: -640px !important;
}
  


.elements-float .cyan {
 margin-left: 0px !important;
 bottom: 850px !important;
} 


.elements-float .magenta {
 margin-left: 0px !important;
 top: -550px !important;
} 


/* ===================================
    Redes sociales
====================================== */
.cover-main {
     min-height: 700px;
}

.elements-float,
.elements-float-mini {
   /*position: absolute;*/
   z-index: 0;
   width: 98%;
   /*height: 1px;*/
  
}
 
.extra-large-icon i{
      filter: invert(1);
}

.extra-large-icon i:hover{
     filter: brightness(0) invert(1);
}

.extra-large-icon span i:hover{
     filter: brightness(0) invert(1);
}


/* ===================================
    Contacto
====================================== */
.background-black-contacto{
  background-color:#2C2C2C;
  border-radius: 5px;
  border-color:#2C2C2C;
}

.boton-enviar{
  background: #FFFFFF;
  border-radius: 5px;
  color: #010006;
  min-width: 159px;
  min-height: 39px;
  padding: 5px 20px;
}

.boton-enviar:hover{
  border-color: white;
  color: white;
  background: transparent;
}

.transform-180{
  transform: rotate(180deg);
}

header.sticky nav.navbar-fixed-top.header-light.white-link .header-menu-button a {
  color: red;
}

.icono-equipo{
  position: absolute;
  right: 0;
  top: 0;
  padding: 15px 15px 0px 0px;
}

.form-msj-error {
  border-radius: 0.25rem;
  color: #2f3a3b;
  background-color: #f0cc01;
}

.form-msj-success{
  border-radius: 0.25rem;
  color: #FFF;
  background-color: gray;
}

/* ===================================
    Nota proyecto
====================================== */


.video-responsive {
    /*height: 100vh;*/
    /*width: 100%;*/
    /*overflow:hidden*/;
    /*padding-bottom:400px;*/ /* Adecua este valor para controlar la altura del video */
    /*position:relative;*/
    /*height:100%;*/

}
.video-responsive iframe{
    width:100%;
    height: 550px;
   /* position:absolute;*/
}


.project-title{
    display: grid;
    grid-template-columns: 10% 90%;
    align-items: center;
}

.social-second { filter: invert(1);}



/* ===================================
    Media
====================================== */

@media screen and (min-width: 992px) {
    .hero {
      height: 100%;
    }

    .custom-video,
    .news-detail-image {
      object-fit: cover;
      width: 100vw;
      height: 100vh;
    }

    .nameSocial{
      display: none;

    }
  .supportCarrusel{
    justify-content: center;
  }

}

@media (min-width: 1199px) {
  .team{
    display: grid;
    grid-template-columns: 40% 60%;
    margin: 30px 0px;
  }

  header.sticky a .social { filter: invert(1);}
  .nameSocial{
    display: none;

  }

  .supportCarrusel{
    justify-content: center;
  }

}

@media (max-width: 991px) {
  .team{
    display: inline-block;
    grid-template-columns: 0%;
    margin:0px;
  }

  /*.team{
    display: grid;
    grid-template-columns: 40% 60%;
    margin: 30px 0px;
  }*/

  header.sticky a .social { filter: none;}
  .nameSocial{
    display: initial;

  }

  .social-second { filter:none;}
  header nav.navbar .navbar-nav > li > a, nav.navbar.bootsnav ul.nav > li > a {
    color: white;
  }

  .nameSocial{
    display: none;

  }

  .supportCarrusel{
    justify-content: none;
  }

}

@media (max-width: 767px) {
  /*.team{
    display: grid;
    grid-template-columns: 40% 60%;
    margin: 30px 0px;
  }*/

  .team{
    display: inline-block;
    grid-template-columns: 0%;
    margin:0px;
  }

  .nameSocial{
    display: initial;

  }

  .social-second { filter:none;}
  header nav.navbar .navbar-nav > li > a, nav.navbar.bootsnav ul.nav > li > a {
    color: white;
  }

  .supportCarrusel{
    justify-content: none;
  }
}

@media (max-width: 575px) {
  .sm-text-card{
    font-size: 10px;
    line-height: 16px;
  }

  .sm-text-title-card{
    font-size: 10px;
    line-height: 16px;
  }

  .nameSocial{
    display: initial;

  }  
  .social-second { filter:none;}
  header nav.navbar .navbar-nav > li > a, nav.navbar.bootsnav ul.nav > li > a {
    color: white;
  }

  .todo {
    flex-direction: column-reverse;
  }

  .cyan {
    top: -80px !important;
  }

  .elements-float, .elements-float-mini{
    width: 93% !important;
  }
  
  .supportCarrusel{
    justify-content: none;
  }

  .gallery .swiper {
    width: 100%;
    height: 300px;
  }

}