@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
	font-family:'normal';
	src: url("normal.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

@font-face {
	font-family:'cursiva';
	src: url("cursiva.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}


html{width:100%;
	height:100%;
}

body{width:100%;height:100%;transition:all .5s;-moz-transition:all 1s;-webkit-transition:all .5s;-o-transition:all .5s; z-index:9998;}

* { margin: 0px;
padding: 0px; outline: 0;
}
iframe { display:block; border:none; }

.os-animation{
            opacity: 0;
 }  

.os-animation.animated{
            opacity: 1;
 }  
 
 *:focus { 
    outline: none; 
} 

#directo{ width: 74px; height: 74; right: 0; bottom: 0; position: fixed; z-index: 999;}

.texto1{ font-family: "Raleway", sans-serif;color:#1e3d6e; font-size:14px; font-weight:600; text-decoration:none;}
.texto2{font-family: "Inter", sans-serif;color:#ffffff; font-size:50px; line-height:120%;  }
.texto3{font-family: "Bebas Neue", sans-serif;color:#ffffff; font-size:50px; line-height:120%;  }
.texto4{font-family: "Inter", sans-serif;color:#ffffff; font-size:11px; text-transform: uppercase; line-height:30px;    }
.texto5{font-family:'cursiva';color:#293b3f; font-size:86px; }
.texto6{font-family: "Raleway", sans-serif;color:#293b3f; font-size:23px; line-height: 150%; }
.texto7{font-family: "Bebas Neue", sans-serif;color:#293b3f; font-size:56px; line-height:100%; text-transform: uppercase;  }
.texto8{font-family: "Raleway", sans-serif;color:#3e4b4d; font-size:20px; line-height: 150%; }
.texto9{font-family: "Bebas Neue", sans-serif;color:#f2f8f9; font-size:38px; line-height:100%; text-transform: uppercase;  }
.texto10{font-family: "Raleway", sans-serif;color:#f2f8f9; font-size:16px; line-height: 150%; }
.texto11{font-family: "Raleway", sans-serif;color:#f2f8f9; font-size:20px; line-height: 150%; }
.texto12{font-family: "Raleway", sans-serif;color:#ffffff; font-size:20px; line-height: 150%; }
.texto13{font-family: "Raleway", sans-serif;color:#ffffff; font-size:16px; line-height: 150%; }
.texto14{font-family: "Raleway", sans-serif;color:#293b3f; font-size:25px; line-height: 150%; }
.texto15{font-family:'cursiva';color:#293b3f; font-size:80px; line-height: 90%; }
.texto16{font-family:'normal';color:#293b3f; font-size:80px; line-height: 90%;  }

#header{width:100%; height:100px; position: absolute; top: 0; z-index: 9999;}

#head, #head1,#head2{display:inline-block;vertical-align:top;}
#head{width:100%;vertical-align:middle; text-align:center; }
#head1{width:100%;margin-right:0px; height: 30px; text-align:center; background-color: #466a72; }
#head2{width:100%;margin-right:0px;height:70px; text-align:center; background-color: #18383d;  }

#arriba, #arriba1,#arriba2,#arriba3,#arriba4{display:inline-block;vertical-align:top;}
#arriba{width:90%;vertical-align:middle; text-align:left;}
#arriba1{width:23%;margin-right:-4px; text-align:left; margin-top: 6px; }
#arriba2{width:65%;margin-right:-4px; text-align:center; margin-top: 22px; }
#arriba3{width:12%;margin-right:-4px; text-align:right; margin-top: 15px; }
#arriba4{ display: none; }


.lata{ width: 620px;}

.boto{  background:url("../imagenes/boto1.png") no-repeat center center;background-size:cover;transition:all .6s;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; cursor:pointer; width: 130px; height: 44px;}
.boto:hover{ background:url("../imagenes/boto1a.png") no-repeat center center;background-size:cover;}

#inicio{ width: 100%; height: 1020px;  text-align: center; background-color: #dfe3e5;text-align: center;}





#lalin, #lalin1{display:inline-block;vertical-align:top;}
#lalin{width:100%;vertical-align:middle; text-align:left;}
#lalin1{width:100%;margin-right:0px; height: 5px; margin-top: -5px; background:url("../imagenes/lali1.png") repeat-x 0 center; }

#productos{width:100%; background:url("../imagenes/fondo1.jpg") no-repeat center 100%;background-size:cover; text-align: center;}

.lima{ width: 80%; max-width: 592px;}

.linfo{ width: 90%; max-width:790px ; text-align: center; display: inline-block;}

.boto2{  background:url("../imagenes/prodos.png") no-repeat center center;background-size:cover;transition:all .6s;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; cursor:pointer; width: 90%; max-width: 400px;}
.boto2:hover{ background:url("../imagenes/prodos2.png") no-repeat center center;background-size:cover;}


#losproductos{width:100%; height: 950px; background:url("../imagenes/fondo2.jpg") no-repeat center center;background-size:cover; text-align: center;}
#invisible{ width: 100%; height: 150px;}
#escritorio{ display: inline-block;}
#movil{ display: none;}


#donde{width:100%; height: 1282px; background:url("../imagenes/fondo3.jpg") no-repeat center center;background-size:cover; text-align: center;}
#invisible2{ width: 100%; height: 100px;}

.linfo2{ width: 90%; max-width:600px ; text-align: center; display: inline-block;}

#invisible3{ width: 100%; height: 410px;}
#escritorio2{ display: inline-block;}
#movil2{ display: none;}


#limpieza{width:100%;  background:url("../imagenes/fondo4.jpg") no-repeat center center;background-size:cover; text-align: center;}

#lospros, #lospros1,#lospros2{display:inline-block;vertical-align:top;}
#lospros{width:1004px;vertical-align:middle; text-align:center;}
#lospros1{width:260px;margin-right:-4px; text-align:center; }
#lospros2{width:112px;margin-right:-4px; text-align:center; margin-top: 210px; }

#separador{width:100%; height: 700px; background:url("../imagenes/separador.jpg") no-repeat center center fixed;background-size:cover; text-align: center;}


#testimonios{width:100%;  background:url("../imagenes/fondo5.jpg") no-repeat center center;background-size:cover; text-align: center;}


#separados{width:100%; height: 15px; background:url("../imagenes/lali4.png") repeat-x center center;background-size:cover; text-align: center;}
#contacto{ width: 100%; background-color: #19383d; text-align: center;}



#footer{ width: 100%; background-color: #486a74; text-align: center;}
#separatres{width:100%; height: 15px; background:url("../imagenes/lali5.jpg") repeat-x center center;background-size:cover; text-align: center;}

#footi, #footi1,#footi2,#footi3{display:inline-block;vertical-align:top;}
#footi{width:90%;vertical-align:middle; text-align:center;}
#footi1{width:30%;margin-right:-4px; text-align:left; margin-top: 12px;  }
#footi2{width:70%;margin-right:-4px; text-align:right;}
#footi3{ display: none;}

.tabla{ display: inline-block;}

.redes{ opacity:1;transition:all .6s;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s; cursor:pointer;}
.redes:hover{ opacity: .7;}



#lainformacion{width:100%;  background:url("../imagenes/slide1.jpg") no-repeat center center;background-size:cover; text-align: center;}


#lasflechas{ width: 1200px; text-align: left;}

#slideinfo, #slideinfo1,#slideinfo2,#slideinfo3{display:inline-block;vertical-align:top;}
#slideinfo{width:1200px;vertical-align:middle; text-align:center; z-index: 99;}
#slideinfo1{width:841px;  margin-right:-4px; text-align:left;  margin-top: 30px;  }
#slideinfo2{width:359px; margin-right:-4px; text-align:right; margin-top: -400px;  }

.limaslide{ width: 359px; height: 662px;}

#elslide{ width: 1200px; position: relative; bottom: 0; left: 50%; margin-left: -600px; }
#elslide1{position: absolute; width: 359px; right: 0; top: 300px; }

#slidehome{ display: block;}
#slidehomemovil{ display: none;}


@media screen and (max-width:1600px)
 {
#separador{height:600px;}

#inicio{ height: 970px;}
#elslide1{ top: 250px; }      
}

@media screen and (max-width:1300px)
 {
#separador{height:500px;}
#inicio{ height: 920px;}
     
#elslide1{ top: 200px; }        
     
}


@media screen and (max-width:1220px)
 {
#lasflechas{ width: 1000px; text-align: left;}
#slideinfo{width:1000px;vertical-align:middle; text-align:center; z-index: 99;}
#slideinfo1{width:641px;  margin-right:-4px; text-align:left;  margin-top: 30px;  }
     
#elslide{ width: 1000px; margin-left: -500px; }
#elslide1{ top: 200px; }     
     
}

@media screen and (max-width:1041px)
 {
#donde{width:100%; height: 1000px; background:url("../imagenes/fondo3a.jpg") no-repeat center 0;background-size:cover; text-align: center;}
#invisible3{ width: 100%; height: 320px;}
#escritorio2{display: none;}
#movil2{ display: inline-block; }
}


@media screen and (max-width:1024px)
 {

#limpieza{width:100%; background:url("../imagenes/fondo6.jpg") no-repeat center 0;background-size:cover; text-align: center;}
     
#lospros{width:260px;vertical-align:middle; text-align:center;}
#lospros1{width:260px;margin-right:0px; text-align:center; }
#lospros2{width:112px;margin-right:0px; text-align:center; margin-top:0px;  margin-bottom:40px; }     
}

@media screen and (max-width:1020px)
 {
#inicio{ height: 870px;}     
     
#lasflechas{ width: 800px; text-align: left;}
#slideinfo{width:800px;vertical-align:middle; text-align:center; z-index: 99;}
#slideinfo1{width:441px;  margin-right:-4px; text-align:left;  margin-top: 30px;  }
     
#elslide{ width: 800px; margin-left: -400px; }
#elslide1{ width: 300px;  top: 250px; }       
     
.limaslide{ width: 300px; height: 553px;}      
}


@media screen and (max-width:1000px)
 {
#separador{height:400px;}
}

@media screen and (max-width:820px)
 {
.texto7{font-size:46px; }    
     
#slidehomemovil{ display: block; margin-top: 60px;}
#slidehome{ display: none;}     
     
     
#inicio{ height: 500px;}     
     
#lasflechas{ width:90%; text-align: center;}
#slideinfo{width:90%;vertical-align:middle; text-align:center; z-index: 99;}
#slideinfo1{width:100%;  margin-right:0px; text-align:center;  margin-top: 30px;  }
#slideinfo2{width:100%; margin-right:0px; text-align:center; margin-top:10px;  } 

#elslide{ width: 200px; margin-left: -100px; }
#elslide1{ width: 200px; top: 760px; }        
     
.texto15{font-size:60px; }
.texto16{font-size:60px; }     

     
.limaslide{ width: 200px; height: 369px;}     
     
}


@media screen and (max-width:700px)
 {
#footi1{width:100%;margin-right:0px; text-align:center; margin-top: 0px;  }
#footi2{ display: none;}     
#footi3{width:100%;margin-right:0px; text-align:center; margin-top: 30px; display: inline-block;} 
     
#separador{width:100%; height: 300px; background:url("../imagenes/separador.jpg") no-repeat center center;background-size:cover; text-align: center;}
}


@media screen and (max-width:620px)
 {
.texto7{font-size:40px; }     
     
.texto4{font-family: "Inter", sans-serif;color:#ffffff; font-size:11px; text-transform: uppercase; line-height:3px;    }
#head1{width:100%;margin-right:0px; height: 40px;}
}     


@media screen and (max-width:548px)
 {
#invisible3{ width: 100%; height:380px;}     
     
#losproductos{width:100%; height: 728px; background:url("../imagenes/fondo2.jpg") no-repeat center center;background-size:cover; text-align: center;}
#invisible{ width: 100%; height: 120px;}
     #escritorio{ display: none;}
     #movil{ display: inline-block;}
}

     
@media screen and (max-width:500px)
 {
#separador{height:250px;}     
}


.button_container {
  position: absolute;
  top: 0px;;
  right: 0px;
  height: 0px;
  width: 35px;
  cursor: pointer;
  z-index: 9999;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  transition: opacity .25s ease;
}
.button_container:hover {
  opacity: .7;
}
.button_container.active .top {
  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
  -moz-transform: translateY(11px) translateX(0) rotate(45deg);
          transform: translateY(11px) translateX(0) rotate(45deg);
  background: #FFF;
}
.button_container.active .middle {
  opacity: 0;
  background: #FFF;
}
.button_container.active .bottom {
  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-11px) translateX(0) rotate(-45deg);
          transform: translateY(-11px) translateX(0) rotate(-45deg);
  background: #FFF;
}
.button_container span {
  background: #ffffff;
  border: none;
  height: 4px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  transition: all .35s ease;
  cursor: pointer;z-index: 9999;
}
.button_container span:nth-of-type(2) {
  top: 11px;
}
.button_container span:nth-of-type(3) {
  top: 22px;
}

.overlay {
  position: fixed;
  background-color:#466a72;
    top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .35s, visibility .35s, height .35s;
  -moz-transition: opacity .35s, visibility .35s, height .35s;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
.overlay.open {
  opacity: .9;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInUp .5s ease forwards;
  -moz-animation: fadeInUp .5s ease forwards;
          animation: fadeInUp .5s ease forwards;
  -webkit-animation-delay: .35s;
  -moz-animation-delay: .35s;
          animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  -webkit-animation-delay: .4s;
  -moz-animation-delay: .4s;
          animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  -webkit-animation-delay: .45s;
  -moz-animation-delay: .45s;
          animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  -webkit-animation-delay: .50s;
  -moz-animation-delay: .50s;
          animation-delay: .50s;
}
.overlay.open li:nth-of-type(5) {
  -webkit-animation-delay: .55s;
  -moz-animation-delay: .55s;
          animation-delay: .55s;
}
.overlay nav {
  position: relative;
  height: 70%;
  top: 50%;
  -webkit-transform: translateY(-35%);
  -moz-transform: translateY(-35%);
          transform: translateY(-35%);
  
  text-align: center;
  margin-right:;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  min-height: 60px;
  position: relative;
  opacity: 0;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
  font-size: 35px;
  opacity:1; text-transform:uppercase; line-height:100%;font-family: "Bebas Neue", sans-serif; font-weight:400; letter-spacing: 1.2px;
}
.overlay ul li a:hover,a:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%; opacity:.6;
  -webkit-transition: .25s;
  transition: .25s;color:#ffffff;
}
.overlay ul li a:after {
  opacity:.6;-webkit-transition: .25s;
  transition: .25s;
}


@media screen and (max-width:1100px){
#arriba1{ width:35%; text-align:center;}
#arriba2,#arriba3{display:none;}
#arriba4{ display: inline-block;width:65%; height: 55px; margin-left:-4px;text-align:right;  } 
    
#menumovil{ z-index:9999;position: absolute;top: 50px;
  right: 30px;
  height: 27px;
  width: 35px; display:block;}
}

@media screen and (max-width:620px){
#menumovil{ z-index:9999;position: absolute;top: 60px;
  right: 30px;
  height: 27px;
  width: 35px; display:block;}
}



.hvr-icon-back2 {font-family: "Bebas Neue", sans-serif; font-weight:400; letter-spacing: 1px; font-size:19px;
  display: inline-block;
  vertical-align: middle;
transition:all .8s;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s;
 line-height:23px;  color:#ecede5; text-decoration:none;
}
.hvr-icon-back2:hover {
transition:all .8s;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s;
  color:#ecede5;
}
.hvr-icon-back2 .hvr-icon2 {
  transition:all .8s;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s;background:url(../imagenes/hover2.png); 
}
.hvr-icon-back2:hover .hvr-icon2{
  transition:all .8s;-moz-transition:all .6s;-webkit-transition:all .6s;-o-transition:all .6s;background:url(../imagenes/hover.png); 
}