@charset "utf-8";
/* CSS Document */
*{font-family:"Century Gothic", "Trebuchet MS", Verdana, sans-serif; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
header, section, footer, aside, nav, article, figure, figcaption, hgroup, div{display:block; margin:0;}
a{text-decoration:none; color:inherit;}
html{min-height:100% !important;}
body{margin:0px 0px;min-height:100% !important;font-size:10pt; background-color:#ffffff; color:#2c3644;}
#nada, .nada{clear:both;}
/*CABECERA*/
.wrapper1{display:block;width:1300px; margin:0px auto; max-width:100%;}
.verde{height:50px; width:100%; background-color:#373e43;}
nav.flex{display:flex; justify-content:space-between; height:50px;}
nav.flex>div{height:50px; line-height:50px; position:relative; color:#ffffff}
nav.flex>div.p{padding-left:40px;}
nav.flex>div.p:before{position:absolute; left:10px; top:5px;}
nav.flex>div.p.u:before{content:url(img/contacto_u.png)}
nav.flex>div.p.t:before{content:url(img/contacto_t.png)}
nav.flex>div.p.m:before{content:url(img/contacto_m.png)}
nav.flex>div:not(.p){padding-right:10px; padding-top:5px;}


.cabecera_fondo{width:100%;height:120px; display:flex;}
#nombrecab{width:500px; background:url(img/logo.png) no-repeat; margin:25px auto;}
/*Navegador*/
#fondo1{width:100%; position:relative;}
#fondo1 img{width:100%; height:auto; display:block;}
#navegador {display:flex; position:absolute; left:0px; right:0px; top:0px; height:55px; justify-content:center; margin:0px; flex-wrap:wrap;}
#navegador a li{color:#eeeeee;}
#navegador li{display:inline-block; list-style: none; height:55px; line-height:55px; color:#eeeeee; padding-left:40px; padding-right:40px; margin:0px; font-weight:700;}
#navegador li:hover{color:#ffffff;}

#navegador2{display:none; width:40px; height:40px; background-color:#222222; overflow:hidden; position:absolute; top:4px; right: 4px; padding-top:40px; border-radius:8px; opacity:0.6; z-index:100;}
#navegador2:hover{width:calc(100% - 8px); height:auto; opacity:0.9;}
#navegador2::before {content:url(img/menu2.png); height:40px; text-align:right; padding-top:2px; padding-right:2px; position:absolute; right:2px; top:2px;}
#navegador2 li{display:block; list-style: none; height:40px; line-height:40px; color:#ffffff; text-align:right; padding-right:10px;}

	/*Fin navegadores*/
/*FIN CABECERA*/
/*CUERPO*/

div.azul{width:100%; background-color:#006699;}
div.inicio{padding:80px; font-size:1.5em; padding-bottom:130px; background-color:#373e43;}
div.inicio>section{width:90%; color:#ffffff; text-align:center; max-width:1024px; margin:0px auto;}
div.boton1{margin:40px auto; width:300px; text-align:center; background-color:#ffffff; max-width:100%; height:40px; line-height:40px; margin-bottom:100px; font-size:0.7em; color:#2c3644;}

section.items{position:relative; padding-left:10px; padding-right:10px; margin-top:-170px; z-index:10;}
section.items>div{display:flex; justify-content:space-between; flex-wrap:wrap; max-width: 1280px; margin:0px auto; width:95%;}
section.items>div figure{width:360px; background:#ffffff; text-align:center; margin:20px auto; border-radius:10px; overflow:hidden; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15); max-width:90%;}
section.items>div figure>img{width:100%; height:auto;}
section.items>div figure>figcaption{margin-top:20px; font-weight:bold; color:#4a4f54;}
section.items>div figure>p{text-align:center; padding:10px; padding-top:0px; color:#88959e;}

section.items2{position:relative; margin-top:-150px; padding-top:180px; background-color:#fa0001; z-index:5; padding-bottom:100px;}
section.items2>h1{color:#ffffff; font-size:2em; text-align:center;}
section.items2>div>img{display:block; margin:50px auto; margin-bottom:0px; max-width:90%; height:auto;}

div.nos{display:flex; padding:40px; width:90%; max-width:1200px;}
div.nos>div{position:relative; flex:1 1 60%; width:60%;}
div.nos>div>p{position:absolute; top:40%; transform:translateY(-40%); padding:40px; border-bottom:#66dddd 1px solid; width:90%; line-height:30px; text-align:justify; }
div.nos>img{flex:0 0 40%; width:40%; height:auto;}
div.nosotros{padding-top:40px; padding-bottom:40px; font-size:1.2em; letter-spacing:0.15em;}
div.nosotros>p{display:block; width:60%; min-width:300px; margin:0px auto; color:#ffffff; text-align:center; }
div.verde2{width:100%; background-color:#373e43; color:#ffffff; position:relative; padding-bottom:170px; padding-top:40px;}
div.nos2{display:flex; justify-content:space-around; }
div.nos2>figure{flex:0 0 40%; width:40%; text-align:center; }

div.tiendas{padding-bottom:180px; width:90%; max-width:1200px;}
.tiendas>article{display:flex; padding:40px; border-bottom:#cccccc 1px solid;}
.tiendas>article h1{color:#fa0001;}
.tiendas>article>div{flex:1 1; padding-left:40px; padding-right:40px;}
.tiendas>article>article{flex:0 0 40%; width:40%; height:auto;}
.tiendas>article>article>img{width:100%; height:auto;}
.tiendas div.u, .productos div.t{padding-left:40px; position:relative; margin-bottom:40px;}
.tiendas div.u:before{content:url(img/ti1.png); position:absolute; top:0px; left:0px;}
.tiendas div.t:before{content:url(img/ti2.png); position:absolute; top:0px; left:0px;}
.tiendas div.boton3{background-color:#fa0001; color:#ffffff; margin-top:40px; padding-left:30px; padding-right:60px; height:32px; line-height:32px; position:relative; width:300px; border-radius:5px;}
.tiendas div.boton3::after {content:url(img/contacto_w.png); position:absolute; right:10px; top:6px;}
.tiendas div.tn{display:flex; margin:20px auto; flex-wrap:wrap; justify-content: space-between;}

.wrapper1.productos{width:1024px; max-width:100%;padding-bottom:180px;}
.productos>article{display:flex; padding:40px; border-bottom:#cccccc 1px solid;}
.productos>article h1{color:#fa0001;}
.productos>article>div{flex:1 1;}
.productos>article>img, .productos>article>figure{flex:0 0 300px;}
.productos>article>img{width:300px; height:auto;}
.productos>article>div{padding-left:20px; padding-right:20px;}
.productos div.boton3{width:100px; padding:10px; text-align:center; margin-top:40px; border:#e3e9ed 2px solid; border-radius:20px;}
.productos div.tn{display:flex; margin:20px auto; flex-wrap:wrap; justify-content: space-between;}
.productos div.tn img{width:100px; height:auto; margin:10px auto;}

.productos>article>figure>img{ width:100%;  height:auto;}
.productos>article:nth-child(even)>div{text-align:right}
.productos>article:nth-child(even) div.boton3{float:right; }

section.items2b{margin-top:0px; padding-bottom:180px; background-color:#fa0001; z-index:5; padding-top:50px;}
h1.conce{text-align:center; color:#fa0001; padding-top:20px; padding-bottom:20px;}

.contacto{padding-top:100px; padding-bottom:50px; max-width:800px; width:95%;}
.contacto h2{text-align:center; color:#fa0001; font-size:2em;}
.contacto form{background-color:#ffffff; padding:20px; display:flex; justify-content:space-between; flex-wrap:wrap; flex-direction:row;}
.contacto form>input{flex:0 1 48%; background-color:#ffffff; border:#e3e9ed 2px solid; height:40px; text-align:left; padding-left:12px; margin-bottom:20px; border-radius:5px;}
.contacto h3{text-align:center; font-size:1em; font-weight:normal; }

.contacto form>textarea{flex:1 1 90%; background-color:#ffffff; border:#e3e9ed 2px solid; height:200px; padding-top:14px; padding-left:12px; border-radius:5px;}
.contacto form>input[type=submit]{flex:0 1 100%; background-color:#fa0001; color:#ffffff; height:40px; line-height:40px; text-align:center; border:#baca04 0px solid; margin:20px auto; width:90%; border-radius:6px;}

div.ct{text-align:right}
div.ct>h1{margin-top:-40px;}
div.ct>div.p{padding:10px; padding-right:40px; position:relative;}
div.ct>div.p:before{position:absolute; right:10px; filter: sepia(20%) saturate(100%) brightness(10%) hue-rotate(90deg);}
div.ct>div.p.u:before{content:url(img/contacto_u.png)}
div.ct>div.p.t:before{content:url(img/contacto_t.png)}
div.ct>div.p.m:before{content:url(img/contacto_m.png)}
div.ct>div:not(.p){padding-right:10px; padding-top:5px;}
div.ct div.wa{display:block; background-color:#3190b0; color:#ffffff; height:32px; line-height:32px; border:#baca04 0px solid; margin:20px auto; width:240px; float:right; text-align:center; border-radius:6px;}

/*PIE DE LA PAGINA*/
#firma{height:32px;width:100%;line-height:32px; text-align:center; color:#CCCCCC; font-size:8pt; background-color:#222222;}
#firma a{color:#CCCCCC;	font-size:8pt;text-decoration:none;}
.tn img{padding:10px;}
/*FIN DE PIE DE LA PAGINA*/

@media screen and (max-width: 1400px) {
	.wrapper1, .wrapper2, #bannerPrincipal, .cuerpo1, .contenido, #contenidon, #navegador ul, #contenidoc, #pie{width:100%;}
}
@media screen and (max-width: 850px) {
	nav.flex>div{white-space: nowrap; max-width: 25%; overflow: hidden; text-overflow: ellipsis;}
	#navegador li{padding-left:10px; padding-right:10px; font-size:10pt;}
}
@media screen and (max-width: 480px) {
	#navegador {display:none;}
	#navegador2 {display:block;}
	.wrapper1.in{margin-top:0px;}
	#fondo1.in{margin-top:-120px;}
	div.inicio{background-size:cover;}
	div.inicio>section{width:100%;}
	section.items>div{justify-content:center; }
	.cabecera_fondo{display:block; text-align:center; height:auto;}
	.wrapper1.in .cabecera_fondo{display:block; text-align:center; height:120px;}
	#nombrecab{display:none; height:90px; margin:0px auto;}
	#navegador {text-align:center;}
	#navegador li{padding-left:10px; padding-right:10px; font-size:8pt; height:40px; line-height:40px;}
	#pie{padding:0px;}
	#pie aside{width:90%; display: block; text-align: center; margin: 10px; vertical-align: top; font-size: 9pt; padding:0px; padding-top:10px;}
	#pie aside p{text-align:center; }
	.wrapper3{margin:0px auto;}
	div.nosotros{text-align:center;}
	div.nos{display:block;}
	div.nos>div{width:100%; position:static; }
	div.nos>div>p{position:static; transform:none; }
	div.nos>img{width:100%}
	div.nos2{display:block; padding:40px; padding-bottom:170px;}
	div.nos2>figure{width:100%; text-align:center; }
	.productos>article, .tiendas>article {display:block;}
	div.contacto{display:block; padding:20px;}
	div.contacto>div:nth-child(2){padding:20px;}
	div.contacto iframe{max-width:100%;}
	div.ct{margin-top:40px;}
	div.nos{padding:0px}
	div.nos>div>p{width:100%;}
	.contactof>form{padding:0px;}
	div.ct>div.wa{text-align:center;}
	.contacto form>input{width:90%;}
	.tiendas>article>img{width:100%;}
	.tiendas>article>div{padding:0px;}
	.tiendas div.boton3{padding-left:10px; padding-right:30px; width:auto; margin-bottom:20px;}
}