body,html{
    color: #2e2c2d;
}
.head {
  background-color: #6fb3fa;
  color: white;
  padding: 6px;

}
.head a{
  color: #f9f5f5;
}
.data-contact span{
  margin: 2px 15px;
}
.data-contact span i{
  margin: 2px 5px;
}
.head a:hover{
  text-decoration: none;
  color: #fff;
}
.video-main{
  position: relative;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  /* background-color: rgba(111,179,250, 0.605); */
}
.bg-transparent .navbar-brand img{
  width: 200px;
}

.bg-transparent.menu-fixed .navbar-brand img{
  width: 100px;
}
.bg-transparent{
  padding: 20px 40px;
  position: absolute;
  width: 100%;
}
.bg-transparent a.nav-link{

  color: hsla(0, 0%, 100%, .8) !important;
  font-size: 23px;
}
#navbarSupportedContent .nav-item{
  /* color: #666; */
  position: relative;
  display: inline-block;
}
#navbarSupportedContent .nav-item:after{
  /* border-top: 5px solid #4AC8ED; */
  position: absolute;
  left: 50%;
  content: '';
  height: 3px;
  background: #4AC8ED;
  transition: all 0.5s linear;
  width: 0;
  top: -3px;
}
#navbarSupportedContent .nav-item:hover:after{
  width: 100%;
  left: 0px;
}
.dropdown:hover .dropdown-menu {
      display: block;
}
.ux-shape-divider {
    --divider-top-width: 100%;
    --divider-width: 100%;
    left: 0;
    line-height: 0;
    overflow: hidden;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.ux-shape-divider svg {
    display: block;
    height: 150px;
    left: 50%;
    position: relative;
    transform: translateX(-50%)
}

.ux-shape-divider--top {
    top: -1px;
    transform: rotate(180deg)
}

.ux-shape-divider--top svg {
    width: calc(var(--divider-top-width) + 2px)
}

.ux-shape-divider--bottom {
    bottom: 1px
}

.ux-shape-divider--bottom svg {
    width: calc(var(--divider-width) + 2px)
}



.ux-shape-divider--flip svg {
    transform: translateX(-50%) rotateY(180deg)
}

.ux-shape-divider--to-front {
    z-index: 2
}

.ux-shape-divider .ux-shape-fill {
  fill: rgba(111,179,250, 0.605);
}

.ux-shape-divider--top .ux-shape-fill {
    fill: rgba(111,179,250, 0.605);
}


.separator{
  position: relative;

}

.menu-fixed{
  position: fixed;
  top: 0;
  background: rgba(214, 230, 253, 0.9) !important;
  box-shadow: 1px 4px 8px 1px #ddd;
  z-index: 100000000;
  padding: 5px 40px;
}

.menu-fixed a.nav-link{
  color: #666 !important;
}

video{
  /* -webkit-filter: grayscale(100%);
  filter: grayscale(50%); */
 /*  height: 92vh;
  width: 100%; */
}

.text-header{
  position: absolute;
  z-index: 1;
  /* left: 50%; */
  /* margin-left: -480px; */
  top: 400px;
  width: 100%;
  text-align: center;

}

.text-header h1{
  color: #fff;
  /* text-shadow: 2px 2px 4px #000; */
  font-size: 80px !important;
}

.title-section{
  font-size: 40px;
  font-weight: bold;
  color: #666;
  align-items: center;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  position: relative;
  width: 100%;
  }

.title-section b{
  background-color: currentColor;
  display: block;
  flex: 1;
  height: 2px;
  opacity: .1;
}

section{

}

.title-section-main{
  text-transform: initial;
  padding: 1px 20px;
  margin-bottom:20px ;

}

.descr{
  font-size: 24px;
  color: #666;
  text-align: justify;
}

.tag {
}

.tag {
  opacity: 0;
  transform: translate(0, 10vh);
  transition: all 3s;
}

.tag.visible {
  opacity: 1;
  transform: translate(0, 0);
  position: relative;
}

section{
  /* background-image: url('/img/purtiy.jpg'); */
  position: relative;
}
.bg-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.bg-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.overlay{
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.overlay.black{
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 0;
}
.p-50{
  padding: 50px;
}
.p-150{
  padding: 150px;
}
.p-100{
  padding: 100px;
}
.p-80{
  padding: 100px;
}
.mb-50{
  margin-bottom: 50px;
}
.mt-50{
  margin-top: 50px;
}
.mt-70{
  margin-top: 70px;
}
.mt-100{
  margin-top: 100px;
}
.mb-100{
  margin-bottom: 100px;
}

.productos.row{
  color: #111111;
}

.btn-more{
  position: absolute;
  width: 100%;
  /* height: 50px; */
  background-color: #fff;
  left: 0;
  bottom: 0;
  padding: 15px;
  color: #fff;
  opacity:0;
  font-weight: bold;
}

a.btn-more{
  color: #fff;
}

.card:hover{
  cursor: pointer;
}

.card:hover .btn-more, .btn-more:hover{
  background-color: #e46b24;
  opacity: 1;
  cursor: pointer;
  transition: opacity 1.5s,transform 2.3s,background-color 2.3s;

}

.btn-primary{
  background-color: #4AC8ED;
  border-color: #4AC8ED;
}

.data-contact-e a{
  font-size: 20px;
  color:#2e2c2d;
}

.btn-success{
  background-color: #76c161;
  border-color: #76c161;
}

.row.boletin{
  background: #fff;
  padding: 15px;
  border-radius: 12px;
  box-shadow: 1px 5px 8px -1px #ccc;
}

footer{
  background: #2e2c2d;
  color: #fff;
  padding: 90px;
  border-bottom: 2px solid #ffee7e;
}

footer a:hover{
  text-decoration: underline;
  color: #fffff6;

}
footer a{
  color: #fff;
}

html {
  scroll-behavior: smooth;
}

footer ul li{
  list-style: none;
}

.class_1,.class_4,.class_7,.class_10,.class_13,.class_16{
    transform: translate(-10vh,0);
}

.class_2,.class_5,.class_8,.class_11,.class_14,.class_17{
    transform: translate(10vh,0);
}

.class_3,.class_6,.class_9,.class_12,.class_15,.class_18{
    transform: translate(0,10vh);
}

/* .about-us,.contac-tag{
  transform: translate(-10vh,0);
}
.call-tag,.newsletter-tag{
  transform: translate(10vh,0);
}
.history-tag{
  transform: translate(0,10vh);
} */

@media (width <= 768px){
  .green-sanisys, .green-mail, .pipeline{
    display: none;
  }

  .bg-transparent{
    background-color:transparent;
  }

  .video-main{

    height: 100vh;
  }

  .descr{
    font-size: 15px;

  }
  .p-100, .p-80{
    padding: 20px;
  }
  .p-100 h2, .p-80 h2{
    font-size: 20px;
  }

  .card{
    margin-bottom: 20px;
  }

  .text-header h1{
    font-size: 50px !important;
    top: -100px;
  }

  .class_1,.class_4,.class_7,.class_10,.class_13,.class_16{
    transform: translate(-3vh,0);
    }

    .class_2,.class_5,.class_8,.class_11,.class_14,.class_17{
        transform: translate(1px,0);
    }

    .class_3,.class_6,.class_9,.class_12,.class_15,.class_18{
        transform: translate(0,3vh);
    }

  /* .about-us,.contac-tag{
    transform: translate(-3vh,0);

  }
  .call-tag,.newsletter-tag{
    transform: translate(1px,0);

  }
  .history-tag{
      transform: translate(0,3vh);

  } */

  .modal{
    margin-top: 60px;
  }
}

footer ul li, footer ul{
  padding: 0;
  margin: 0;
}

.text-shadow-5 {
    text-shadow: 5px 5px 16px rgba(0, 0, 0, .6);
}

.menu-mobile{
  display: inline-block !important;
  background:rgba(255, 255, 255, 0.95);
  width: 75%;
  position: absolute;
  z-index: 2;
  height: 100vh;
  color: hsla(0, 0%, 40%, .85);
}


.menu-mobile a{
  color: hsla(0, 0%, 40%, .85);
}

.menu-mobile li{
  padding: 10px 15px;
  border-top: 1px solid  hsla(0, 0%, 40%, .10);
}

.menu-mobile li i{
  margin: 0 15px;
}

.menun{
  width: 100%;
  height: 100vh;
  background: red;
  left: 0;
  top: 0;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100000000000000000;

}

.hide{
  display: none;
}

.close-menun{
  float: right;
  color: #fff;
 margin-right: 20px;
  margin-top: 20px;
  font-size: 20px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.copy{
  background-color: #303030;
  color: hsla(0,0%,100%,.5);
  padding: 15px;
  text-align: center;
  width: 100%;

}

.copy a{
  color: hsla(0,0%,100%,.5);
}

/* .products-tag{
  transform: translate(-5vh,-5vh);
} */
/* .products-tag.visible{
  transform: translateZ(0) scale(1);
} */

.paginations{
    padding: 15px 0;
}
.paginations  svg{
    width: 20px !important;
}

.paginations .leading-5{
    padding: 10px !important;
}

.btn-success{
  background-color: #e46b24;
  border-color: #e46b24;
}

.btn-success:hover{
    background-color: #e46b24;
  border-color: #ffee7e;
}

.btn-primary{
    background-color: #6fb3fa;
    border-color: #6fb3fa;
}