@charset "utf-8";
/* CSS Document */
charset "utf-8";
/* CSS Document */

* { border:0;
margin:0;
padding:0;
box-sizing:border-box; }
body{ margin:0}
a { text-decoration:none; }
img, video { max-width:100%;}
strong, #contac input[type="submit"] { font-weight:700; }
a:hover, input[type="submit"]:hover { opacity:0.8;}
input[type="submit"] { -webkit-appearance: none;}

body {font-family:'Poppins', sans-serif; font-size:14px; color:#646569; background:#fff; font-weight:300;}

.verde{color:#c2d501;}

#top, #nav, #slide, #boton-h, #home, #tit, #main, #footer { 
display:block; width:100%;
}
#top { height:80px; }
#top h1, #top p { display:inline-block;  /*vertical-align:middle;*/}
#top h1 { width:30.5%; margin-top: 20px;}
#top p { width:69%; text-align:right; }
#top a { color:#104281; font-weight:400; padding-left:5px;}

#nav { background:#c2d501; color:#666; z-index:20; margin-top: -17px; height:40px;}
#nav a { font-family:'Poppins', sans-serif; font-size:14px; font-weight:700; }

.galeria {width:100%; height:450px;}
#logos {height:240px; text-align:center; display:block; margin-top: 120px;}

.productos{  display: contents;}
.cubo{ 	width: 116px; height:130px; display:inline-block; }
.ppp{display:inline-block; padding:1px;}
#ppul{display: flex; justify-content: center; flex-wrap: wrap;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; margin-left: -40px;}


.diablo {color:#666; }

#slogan{width:100%; height:120px; background-color:#b7d8eb; align-items: center; font-size:36px; text-align:center; margin-top: -48px;}
#slogan p{padding-top:30px;}

.cuadrado {width:350px; height:350px; float:left; margin-top:60px; font-size:36px; text-align:left;}
.central {margin-left:29px; margin-right:29px;}
.cuadrado p{padding-left:30px; line-height:42px;}
.iz{ padding-left:40px; }
.de { padding-right:40px; margin-top:60px; }

.cont { width:1110px; margin:0 auto;}

.cuarto { width:22%; color:#999; padding-top: 40px; float:left; font-size:14px; padding-left:20px;  }
.cuarto span{font-weight:700; font-size:18px; padding-top:60px; color:#FFFFFF;}

#pie{ display:inline-block; vertical-align:top; width:100%; height:240px; background-color:#000000;}
#pie2{align-items: top; margin:auto;}
#pdos{ margin-left:20px; }
#ptres{ margin-left:20px; }
#pcuatro{ margin-left:4px; }
#gh {width:100%;  text-align:center; background-color:#FFFFFF; color:#999; font-size:12px; display:block;}

/*empresa */

.titsector {color:#c2d501; font-size:34px; text-align:center; padding-top:190px; font-weight:500;}
#empresa {padding:40px 0 40px 0; -webkit-column-count: 2;  -moz-column-count: 2; column-count: 2;  -webkit-column-gap: 80px; -moz-column-gap: 80px; column-gap: 80px;}

/*productos*/
.gris {color:#666; font-size:34px; text-align:center; padding-top:28px; font-weight:500;}
.fdogris{ width:100%; background-color:#eee; display: inline-flex; }
.fdoblanco{ width:100%; background-color:#fff; display: inline-flex; }

#topproductos {background-color:#FFFFFF; width:100%; height:120px;}

.boton a{color:#666; width:255px; line-height:40px; display:inline-block; background:#c2d501;  text-align:center; font-weight:700; }
.icono { float:left; width:26%; text-align:right; padding-top:48px; padding-left: 60px; box-sizing: border-box !important; }
.produtxt {float:right; width:60%; text-align:left; padding-top: 20px; box-sizing: border-box !important;}
h2 {font-size:36px; color:#c2d501; font-weight:300; line-height: 20px;}

.boton{ margin-top:30px; margin-bottom: 40px }

.pro p{text-align:center; margin-top: 12px;}

#barra {width:100%; height:40px; background-color:#eee; display:block;}
#txtbarra{padding-top:10px; box-sizing: border-box !important; }
#listaprods{margin-top:60px;}
.contenedorp{width:255px; height:336px; margin-bottom:60px;  }
.pro{width:255px; height:255px; border:#ccc 1px solid;}
.margender {margin-right:30px;}

#listaprods li{display:inline-block; /*padding:6px;*/}
#listaprods ul{ display: flex; justify-content: left; flex-wrap: wrap;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; margin-left: -40px;}
.contenedorp{ display: inline-block; }
.q { margin-right:30px; }


/*item*/

h3{ font-weight:300; color:#666666; text-align:left; font-size:34px; margin-top: -10px; margin-bottom:30px;  }

.g{width:258px; height:40px; background-color:#eee; display:block; float:left; padding-left: 10px;  box-sizing: border-box !important; padding-top: 10px; }
.ele {border-left:#ccc 1px solid;}
.bl {width:258px; height:40px; background-color:#fff; display:block; float:left; padding-left: 10px; box-sizing: border-box !important; padding-top: 10px; }

.contact input,  select, .contact textarea { padding:5px 10px;  font:inherit; height:40px; background:#fff; display:block; vertical-align:top; font-size:16px; margin-bottom:30px; width:100%; color:#666;  border:solid 1px #ccc; border-style:solid;  box-sizing: border-box !important; }
.contact textarea { height:110px; margin-bottom:30px;  box-sizing: border-box !important; }
.contact input[type="submit"] { width:100%; background:#c2d501; color:#666;  border:none;  font-family:inherit; font-size:16px; margin-bottom:0; font-weight:bold; float:right; height: 40px;  box-sizing: border-box !important;}

.col2 { display:inline-block; vertical-align:top;  width:540px;}
.right-gap { margin-right:25px;}

#fotog {width:540px; display:block; float:left; border:#ccc 1px solid; margin-top:60px; margin-bottom:60px;}
#detalle {width:540px; margin-top:60px; margin-left:28px; float:left;}
#fpedido {width:100%; background-color:#eee; display:inline-block; margin-top:0px;}
.centrar {text-align:center;}

/*servicios*/
.servimagen {width:350px; float:left; }
.ventinueve {margin-left:29px; margin-bottom:60px;}

.si{font-size:36px; text-align:left; height:350px; padding-left:30px; line-height:42px; padding-top: 1px;}

#coniconos {width:100%; background-color:#FFFFFF; height:220px; display:block; margin:auto;}
.divicono{width:33%; text-align:center; margin-left: auto; margin-right: auto; float:left;}

 .ug-textpanel-description{line-height: 60px; top:105px}

@media screen and (max-width: 1110px){
#empresa {
    padding: 40px;
}
.galeria{width:100%; }
#txtbarra {    padding-left: 10px;}
#fotog { width: 45%; }
.col2 { width:48%; }

}

@media screen and (max-width: 1100px){
.cont { width: 100%; }
#top p { width: 68%; }
.cuadrado { width: 31.5%; }
.servimagen { width: 31.5%; }
#listaprods ul {justify-content: center;}
.q{ margin-right: inherit;}
.contenedorp {   padding: 15px;}
}

@media screen and (max-width: 1060px){
#logos { height: 320px; }

}

@media screen and (max-width: 1053px){
.central { margin-left: 2.5%;   margin-right: 2.5%; }

.ventinueve{ margin-left: 2.5%;   margin-right: 2.5%;}
.servimagen { width: 30%; }
}

@media screen and (max-width: 970px){
.cuarto { width: 20%; }

#detalle { width: 50%; }
.bl {  width: 50%; }
.g {  width: 50%; }

}

@media screen and (max-width: 840px){
.cuadrado {font-size: 28px;}

#nav { overflow:visible; height:30px; width: 100%;
    margin-top: 10px;}
/*Make dropdown links appear inline*/
	#nav ul {
		position: relative; z-index:40;display: none; margin-top:10px;
	}
	/*Create vertical spacing*/
	#nav li {
		margin-bottom: 0px;
	}
	/*Make all menu links full width*/
	#nav ul li, #nav  li a {
		 display:block;
	}
	/*Display 'show menu' link*/
	.show-menu {display:block;  line-height:30px; cursor:pointer; font-size:16px; color:#000; padding:0; text-transform:uppercase;	}
.show-menu img { vertical-align: text-bottom; margin-left:0;}
ul#menu { width:200px; float:right; top:12px;  margin-right:18px; }
ul#menu li { padding:0;}
ul#menu li a {background:#fff; /*color:#666;*/ padding:8px 10px;}	

#nav a { width:100%; }
.si {    font-size: 26px;}


}

@media screen and (max-width: 680px){
.cuadrado { font-size: 22px; }


.col2 { width: 98%;}
.right-gap { margin-right: auto;}
.si {    font-size: 20px;}

}

@media screen and (max-width: 600px){
.cuadrado { font-size: 18px; }
#pcuatro { margin-left: 20px;}
#fotog {    width: 96%; }
#detalle {    width: 98%; margin-left: 10px; }
#fpedido { margin-top:40px; }
h2{line-height:32px; }
.icono { padding-left:10px; }
}

@media screen and (max-width: 534px){
#pie { height: 280px;}
}

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

.cuadrado { font-size: 14px; }
.cuadrado p { line-height: 22px; }
#logos {     height: 420px; }
#slogan p {  padding-top: 10px; }
#nav a {    width: 95%;}
.mobile-menu { line-height:30px; }
#pcuatro { padding-top:10px }
.cuarto { font-size:12px; }
#empresa {column-count: 1;}
.servimagen {    width: 350px; margin-left: 12%; }
.si {    font-size: 30px;}
.divicono {
    width: 100%; padding-top: 30px;
}
#abc{ margin-top:60px;}
#topproductos { line-height: 36px;}
}

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

.cuadrado { width: 350px; font-size: 40px; margin-left: 11%; }
.cuadrado p { line-height: 42px; }
#tresc { margin:auto; }
.cuarto {    width: 60%; font-size: 16px;}
#pie { height:auto; }
#puno{ margin-left:20px; }
.icono{ display:block; width:100%; text-align: center; }
.produtxt{ display:block; width:100%; }
h2{ padding:0 20px; }
.produtxt p{ padding:0 20px; }
.boton { text-align: center;}
#abc {
    margin-top: 80px;
}
}

@media screen and (max-width: 412px){
.cuadrado {  margin-left: 8%; }
/*.boton a {    width: 200px;}*/
.servimagen { margin-left: 8%; }
#abc {
    margin-top: 100px;
}
}

@media screen and (max-width: 400px){
#slogan { line-height:36px; }
#slogan p {   padding-top: 26px;}
.cuadrado, .servimagen {margin-left: 6%; }
#fotog {
    width: 99%;
}
.ug-gallery-wrapper .ug-textpanel-description { font-size:40px; }
#abc {
    margin-top: 120px;
}
}

@media screen and (max-width: 360px){
.cuadrado, .servimagen {margin-left: 2%; }
#top img{max-width:160px; }
#top h1 {margin-top: 24px;}
/*.boton a { width: 180px;}*/
#abc {
    margin-top: 180px;
}
#txtbarra {
    font-size: 13px;
}
}

@media screen and (max-width: 330px){
#logos {    height: 720px;}
.cuadrado {max-width: 324px; font-size: 36px;}
#slogan{    font-size: 28px;}
.servimagen {max-width: 324px; }
.ug-textpanel-description { font-size:36px; margin-top:220px; }
#abc{ margin-top:280px;}
}