@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;600;700&display=swap');

.os-animation{opacity:0;}
.os-animation.animated{opacity:1;}
.os-animation1{opacity:0;}
.os-animation1{opacity:1;}
html,body{width:100%;height:100%;font-family: 'Sarabun', sans-serif;}
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#ffffff;z-index:9999;}
#loader2{width:186px;height:60px;position:absolute;left:50%;top:50%;background:url(../imagenes/logo.png) no-repeat center 0;margin-left:-101px;margin-top:-38px;}
#loader{width:256px;height:256px;position:absolute;left:50%;top:50%;background:url(../imagenes/load.gif) no-repeat center 0;margin-left:-128px;margin-top:-128px;}
*{
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}
iframe{display:block;border:none;}

.os-animation{opacity:0;}
.os-animation.animated{opacity:1;}

#bandera{ z-index:999; width:1200px; right:50%; margin-right:-600px; position:absolute; top:100px; text-align:right}

#slide1{text-align:center;width:100%; height:100%;min-height:700px; z-index:1;}
#semos{text-align:center;width:100%; height:100%;min-height:700px; z-index:1;}
#contactame{text-align:center;width:100%; height:100%;min-height:900px; z-index:1;}
#videosh{text-align:center;width:100%; height:100%;min-height:700px; z-index:1; background:url(../imagenes/fondo2.jpg) no-repeat 50% 50% ;background-size:cover; text-align:center;}
#elheader{ width:100%; height:100px; top:0px; left:0; position:absolute; background-color:#ffffff;}
#certificaciones{text-align:center;width:100%; height:90%;min-height:650px; z-index:1;}

#footi{text-align:center;width:100%; background-color:#017c2b;}


.linki{color:#007c2a;font-size:17px; font-weight:700; text-transform:uppercase; opacity:1;line-height:91px;  margin-top:-14px; }

/* Underline From Left */
.linki {
display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}
.linki:before {
content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  background: #007c2a;
  height: 4px;
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.linki:hover:before {
-webkit-transform: translateY(0);
  transform: translateY(0);
}


.texto1{color:#ffffff;font-size:17px; line-height:150%; }
.texto2{color:#ffffff;font-size:25px; line-height:150%; }
.texto3{color:#ffffff;font-size:70px; line-height:100%; font-weight:600; }
.texto4{color:#017c2b;font-size:50px; line-height:110%; }
.texto5{color:#392f2c;font-size:50px; line-height:110%; font-weight:600;  }.texto5a{color:#392f2c;font-size:50px; line-height:110%;  font-weight:600; }
.texto6{color:#392f2c;font-size:19px; line-height:180%; }.texto6a{color:#007c2a;font-size:19px; line-height:180%; }
.texto7{color:#392f2c;font-size:45px; line-height:110%; }

.forma{text-align:left;HEIGHT:50px;width:90%;border:0; font-size:14PX;color:#392f2c;font-weight:400;padding-left:30px; background-color:#f1f2f4; border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; }


.boton{text-align:center;HEIGHT:50px;width:96%;border:0; font-size:14PX;color:#ffffff;font-weight:400; background-color:#017c2b; border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; cursor:pointer;}



*:focus {
    outline: none;
}


#lose, #lose1,#lose2, #lose3,#lose4{display:inline-block;vertical-align:top;}
#lose{width:100%;height:100%; vertical-align:middle; text-align:left; }
#lose1{width:50%;margin-right:-4px; text-align:right;height:100%; }
#lose2{width:50%;margin-right:-4px;text-align:right; background:url(../imagenes/somos.jpg) no-repeat 50% 50% ;background-size:cover; text-align:center; height:100%; }
#lose3{width:50%;margin-right:-4px; text-align:right;height:100%;}
#lose4{width:50%;margin-right:-4px;text-align:right; background:url(../imagenes/contacto.jpg) no-repeat 50% 50% ;background-size:cover; text-align:center; height:100%; }

#sublose, #sublose1,#sublose2{display:inline-block;vertical-align:top;}
#sublose{width:600px;vertical-align:middle; text-align:left; }
#sublose1{width:450px;margin-right:-4px; text-align:justify;}
#sublose2{width:150px;margin-right:-4px;text-align:right;}

#lineaverde{ width:100%; height:12px; background-color:#017c2b; }
#lineaverde2{ width:600px; height:12px; background-color:#017c2b; }

#prodos{width:100%;}
#prodos1{ width:90%; max-width:850px; text-align:left;}


#prodosabajo{width:100%; background:url(../imagenes/productos.jpg) no-repeat 50% 50%  ;  }

.elslide{ width:100%; height:700px;}

.elvideo2{width:1000px;height:564px; }

.para{ color:#000000; font-size:16px; text-decoration:none; line-height:27px;}

.enlaceabajo{font-weight:600; color:#ffffff; font-size:19px; text-decoration:none; line-height:180%; text-transform:uppercase; }
.elotro{font-weight:400; color:#ffffff; font-size:16px; text-decoration:none;}

#abajo, #abajo1,#abajo2,#abajo3,#abajo4,#abajo5,#abajo6,#abajo7,#abajo8,#abajo0{display:inline-block;vertical-align:top;}
#abajo{width:1200px;vertical-align:middle; text-align:left; font-weight:400; color:#ffffff; font-size:16px; text-decoration:none; line-height:150%; }
#abajo1{width:350px;margin-right:-4px; text-align:left;}
#abajo2{width:250px;margin-right:-4px;text-align:left;}
#abajo3{width:300px;margin-right:-4px;text-align:left;}
#abajo4{width:300px;margin-right:-4px;text-align:left;}
#abajo5{width:100%;margin-right:0px; height:1px; background-color:#FFFFFF; opacity:.4; text-align:left;}
#abajo6{width:550px;margin-right:-4px;text-align:left; margin-top:11px;}
#abajo7{width:450px;margin-right:-4px;text-align:left;}
#abajo8{width:200px;margin-right:-4px;text-align:left; margin-top:11px;}

.lata{ width:90%;}

#arriba{width:1200px;vertical-align:middle; text-align:left; }


#invisible{ width:100%; height:80px; }

#invisible2{ width:100%; height:80px;}


#certifica, #certifica1,#certifica2,#certifica3,#certifica4{display:inline-block;vertical-align:top;}
#certifica{width:1200px;vertical-align:middle; text-align:center; }
#certifica1{width:100%;margin-right:0px; text-align:center; }
#certifica2{width:220px;margin-right:-4px;text-align:center;}
#certifica3{width:350px;margin-right:-4px;text-align:center;}
#certifica4{width:300px;margin-right:-4px;text-align:center;}


#productosnew, #productosnew1,#productosnew2,#productosnew3, #productosnew4{display:inline-block;vertical-align:top;}
#productosnew{width:100%; vertical-align:middle; text-align:left; }
#productosnew1{width:50%;margin-right:-4px; text-align:right;}
#productosnew2{width:50%;margin-right:-4px;text-align:right; background-size:cover; text-align:center; }
#productosnew3{ display:none;}

.elprodos{ width:100%; height:900px;}

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

#abajo{width:1000px;vertical-align:middle; text-align:left; font-weight:400; color:#ffffff; font-size:16px; text-decoration:none; line-height:150%; }
#abajo1{width:300px;margin-right:-4px; text-align:left;}
#abajo2{width:200px;margin-right:-4px;text-align:left;}
#abajo3{width:250px;margin-right:-4px;text-align:left;}
#abajo4{width:250px;margin-right:-4px;text-align:left;}
#abajo6{width:450px;margin-right:-4px;text-align:left; margin-top:11px;}
#abajo7{width:350px;margin-right:-4px;text-align:left;}
#abajo8{width:200px;margin-right:-4px;text-align:left; margin-top:11px;}

#arriba{width:1000px;vertical-align:middle; text-align:left; }

.linki{font-size:16px;}

#certifica{width:900px;vertical-align:middle; text-align:left; }
#certifica1{width:100%;margin-right:0px; text-align:left; }
#certifica2{width:220px;margin-right:-4px;text-align:left;}
#certifica3{width:350px;margin-right:-4px;text-align:left;}
#certifica4{width:300px;margin-right:-4px;text-align:left;}

#bandera{ z-index:999; width:1000px; right:50%; margin-right:-500px; position:absolute; top:100px; text-align:right}

}

@media screen and (max-width:1200px){
#sublose{width:420px;vertical-align:middle; text-align:left; }
#sublose1{width:100%;margin-right:0px; text-align:left;}
#sublose2{width:0px;margin-right:0px;text-align:right;}
#lose3{width:55%; text-align:center;}
#lose4{width:45%; }
.texto4{font-size:45px; }
.texto5{font-size:45px;}

.elvideo2{width:800px;height:451px; }
}

@media screen and (max-width:1020px){
#abajo{width:800px;vertical-align:middle; text-align:left; font-weight:400; color:#ffffff; font-size:16px; text-decoration:none; line-height:150%; }
#abajo1{width:300px;margin-right:-4px; text-align:center;}
#abajo2{width:200px;margin-right:-4px;text-align:center;}
#abajo3{width:300px;margin-right:-4px;text-align:center;}
#abajo4{width:100%;margin-right:0px;text-align:center; margin-top:25px;}
#abajo6{width:100%;margin-right:0px;text-align:center; margin-top:0px;}
#abajo7{width:100%;margin-right:0px;text-align:center;}
#abajo8{width:100%;margin-right:0px;text-align:center; margin-top:0px;}
	
	#certifica{width:900px;vertical-align:middle; text-align:left; }
#certifica1{width:100%;margin-right:0px; text-align:left; }
#certifica2{width:220px;margin-right:-4px;text-align:left;}
#certifica3{width:350px;margin-right:-4px;text-align:left;}
#certifica4{width:300px;margin-right:-4px;text-align:left;}
	
}

@media screen and (max-width:1000px){#lineaverde,#lineaverde2{ display:none;}
#semos{ min-height:980px;}
#sublose{width:90%;vertical-align:middle; text-align:left; }
.texto4{font-size:50px; }
.texto5{font-size:50px;}

#contactame{height:1000px; }
#lose{ height:1000px;}
#lose1{width:100%;margin-right:0px; text-align:center;height:550px; }
#lose2{width:100%;margin-right:0px;text-align:right; background:url(../imagenes/somos.jpg) no-repeat 50% 50% ;background-size:cover; text-align:center; height:430px; }
#lose3{width:100%; margin-right:0px; text-align:center;  height:800px; }
#lose4{width:100%;margin-right:0px;text-align:right; background:url(../imagenes/contacto.jpg) no-repeat 50% 50% ;background-size:cover; text-align:center; height:200px; }
}

@media screen and (max-width:920px){
#certifica{width:90%;vertical-align:middle; text-align:left; }
#certifica1{width:100%;margin-right:0px; text-align:left; }
#certifica2{width:100%;margin-right:0px; text-align:left;}
#certifica3{width:100%;margin-right:0px; text-align:left;}
#certifica4{width:100%;margin-right:0px; text-align:left;}	

#certificaciones{min-height:950px; z-index:1;}

#productosnew{width:100%; vertical-align:middle; text-align:left; }
#productosnew1{ display:none;}
#productosnew2{width:100%;margin-right:0px;text-align:right; background-size:cover; text-align:center; }
#productosnew3{width:100%;margin-right:0px; text-align:right; display:inline-block;}


}


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

#abajo{width:90%;}
#abajo1{width:100%;margin-right:0px; text-align:center;}
#abajo2{width:100%;margin-right:0px;text-align:center;}
#abajo3{width:100%;margin-right:0px;text-align:center;}

.elvideo2{width:600px;height:339px; }
}

@media screen and (max-width:620px){
.elvideo2{width:450px;height:254px; }
}

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


.lata{ width:100%;}

#certificaciones{min-height:1050px; z-index:1;}

}

@media screen and (max-width:700px){
#invisible{ display:none;}
#semos{ min-height:1200px;}

#lose1{width:100%;margin-right:0px; text-align:center;height:700px; }
}

@media screen and (max-width:640px){
#lose3{height:850px; }
#lose4{height:150px; }
}
.ball {
    margin: 0 auto;
    -moz-animation: spin 1.5s infinite linear;
    -webkit-animation: spin 1.5s infinite linear;
}

@-moz-keyframes spin {
    0% {
opacity: 1;   -moz-transform: translateX(-5px); }

    100% {
opacity: 1;  -moz-transform: translateX(5px);   }
}



@-webkit-keyframes spin {
    0% {
opacity: 1; -webkit-transform: translateX(-5px); }

    100% {
opacity: 1; -webkit-transform: translateX(5px); }  
}


.button_container {
  position: absolute;
  top: 0px;;
  right: 0px;
  height: 69px;
  width: 69px;
  cursor: pointer;
  background:url(../imagenes/menu.png);
  z-index: 10;
  -webkit-transition: opacity .25s ease;
  -moz-transition: opacity .25s ease;
  transition: opacity .25s ease;
}

.button_container:hover {
  opacity: 1;
}
.button_container.active {
  background:url(../imagenes/menu2.png); 
  height: 69px;
  width: 69px;
}

.overlay {
	background-color:#017c2b;  position: fixed;
    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: 1;
  visibility: visible;
  height: 100%;
}
.overlay.open li {
  -webkit-animation: fadeInRight .5s ease forwards;
  -moz-animation: fadeInRight .5s ease forwards;
          animation: fadeInRight .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 nav {
  position: relative;
  top: 50%; left:5%;
  -webkit-transform: translateY(-35%);
  -moz-transform: translateY(-35%);
          transform: translateY(-35%);
  
  font-weight: 700;
  text-align: center;
  margin-right:52px;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%; width:100%;
}
.overlay ul li {
  display: inline-block;
  min-height:30px;
  position: relative;
  opacity: 0;
  min-width:18%; text-align:center;
}
.overlay ul li a {
  display: inline-block;
  position: relative;
  color: #ffffff;
  text-decoration: none;
  overflow: hidden;
  font-size: 42px;
  opacity:1; text-transform:uppercase;
}
.overlay ul li a:hover,a:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
  width: 100%;font-size: 42px;
  opacity:1;-webkit-transition: .25s;
  transition: .25s;opacity:.8;
}




#menumovil{ display:none;}
  
.ren1{ width:130px;}


#logomovil{ display:none;}

#logo{ z-index:9999;position: absolute;top:0px; margin-top:0;
  left: 50%; margin-left:-76px; 
  height: 123px;
  width: 152px; display:block;}
  
@media screen and (max-width:1050px){
.ren1{ width:0px;}

#elheader{ width:100%; height:80px; top:0px; left:0; position:absolute;background:url(../imagenes/fondoarriba2.jpg) no-repeat center center;}

#arriba{display:none;}

#bandera{ z-index:999; width:1000px; right:40px; margin-right:0; position:absolute; top:80px; text-align:right}

#face{ display:none; }

#barra{ width:100%; height:90px; position:absolute;}

#logomovil{ z-index:9999;position: absolute;top:0px; margin-top:0;
  left: 50px;
  height: 123px;
  width: 152px; display:block;}
#logo{ display:none;}

#menumovil{ z-index:999;position: absolute;top:5px; margin-top:0;
  right: 30px;
  height: 69px;
  width: 69px; display:block;}

.overlay nav {
  top: 40%;
}

.overlay ul li {
  display: inline-block;
  min-height: 70px;
  position: relative;
  opacity: 0;
  min-width:100%; text-align:center;
}

.texto3{ font-size:55px;}

}


.grises img {
filter: url('#grayscale'); /* Versión SVG para IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); /* Para cuando es estándar funcione en todos */
filter: Gray(); /* IE4-8 and 9 */

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.grises img:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}