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

html, body {
	margin:0;
	padding:0;
}

html {
	height:100%;

	background:url(../img/layout/fondo.jpg) 50% 50% no-repeat fixed #fff;
	-o-background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
}

body {
	font-family: 'Niramit', sans-serif;
	font-size:18px;
	line-height:20px;
	font-weight:300;
	text-align:justify;
	color:#666;
}

/* herramientas */

img { border:0; }

a { color:inherit; text-decoration:none; }
a:hover { color:#FC0; text-decoration:none; text-shadow:0 0 3px #fff; }
a:active, a:focus { outline:0; }

a, a:hover, .top > div:nth-child(2) a img, .top > div:nth-child(2) a:hover img, .menu-icono, .menu-icono:hover, .cerrar-icono li, .cerrar-icono li:hover, #movil, .productos a > img, .productos a:hover > img { -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; }

.clear { clear:both;  }

/* titulos */

h1 {
	margin: 0 0 15px 0;
	padding: 0;

	font-size: 36px;
	line-height: 36px;
	text-transform: uppercase;
	text-align: left;
	color: #333;
}

h2 {
	margin: 0 0 10px 0;
	padding: 0;

	font-size: 28px;
	line-height: 28px;
	text-transform: uppercase;
	text-align: left;
	color: #333;
}

h3 {
	margin: 0 0 10px 0;
	padding: 0;

	font-size: 20px;
	line-height: 20px;
	text-transform: uppercase;
	text-align: left;
	color: #333;
}

h4 {
    display: block;
    
    margin: 0 0 5px 0;
	padding: 0 0 5px 0;

	font-size: 80%;
    font-weight: 200;
	line-height: 100%;
	text-align: left;
}

@media only screen and (max-width:549px) {
    h4 { min-height: 20px; }
}

@media only screen and (min-width:550px) and (max-width:767px) {
	h4 { min-height: 40px; }
}

@media only screen and (min-width:768px) and (max-width:1023px) {
	h4 { min-height: 60px; }
}

@media only screen and (min-width:1024px) {
	h4 { min-height: 80px; }
}

/* fondos */

.fondo-sombra {
	margin:auto;
	padding:60px 0 0 0;

	width:100%; max-width:1644px;

	background:url(../img/layout/fondo-sombra.png) 0 90px no-repeat;
	-o-background-size:100% 780px;
	-moz-background-size:100% 780px;
	-webkit-background-size:100% 780px;
	background-size:100% 780px;
}

.contenedor {
	margin:auto;

	width:91.2%; max-width:1500px;
	
	
	border-radius:0 40px 0 0;
	overflow:hidden;

	background:url(../img/layout/fondo-blanco.png);
}

.contenedor-informacion {
	margin:auto;

	width:90%;
}

/* top */

.top {
	position:relative;

	width:100%;
	height:160px;

	background:url(../img/layout/top-fondo.jpg) no-repeat;
	-o-background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
}

.top > div:nth-child(1) {
	position:absolute; top:0; bottom:0; left:20px;
	
	margin:auto;
	
	width:210px;
	height:94px;
}

.top > div:nth-child(1) img {
	display:block;
	
	width:100%;
	height:auto;
}

.top > div:nth-child(2) {
	position:absolute; top:45px; right:30px;
	
	margin:auto;
}

.top > div:nth-child(2) a:hover img {
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
}

.top > div:nth-child(2) > div:nth-child(1) {
	float:right;
}

.top > div:nth-child(2) > div:nth-child(1) > ul {
	margin:0;
	padding:0;
	
	width:100%;
}

.top > div:nth-child(2) > div:nth-child(1) > ul > li {
	margin:0;
	padding:0;

	height:20px;
	
	float:left;
	list-style:none;
}

.top > div:nth-child(2) > div:nth-child(1) > ul > li img {
	display:block;
	
	width:auto;
	height:100%;
}

.top > div:nth-child(2) > div:nth-child(1) > ul > li:nth-child(1) {
	margin:0 10px 0 0;
	padding:0 10px 0 0;

	border-right:1px solid #8c8c8c;
}

nav {
	margin:10px 0 0 0;
	padding:5px 0 0 0;

	float:right;
	clear:both;
	
	border-top:1px dashed #ccc;
	
	font-size:18px;
	line-height:18px;
	text-transform:uppercase;
	color:#8c8c8c;
}

nav > ul {
	margin:0;
	padding:0;
}

nav > ul > li {
	margin:0 15px 0 0;
	padding:0;
	
	float:left;
	list-style:none;
}

nav > ul > li:last-child { margin:0 0 0 0; }

nav font {
	vertical-align:middle;
}

nav img {
	display:inline-block;
	vertical-align:middle;
	
	margin:0 0 0 5px;
	
	width:auto;
	height:30px;
}

/* menú ícono */

.menu-icono {
	position:absolute; top:55px; right:0; bottom:0;
	display:none;
	
	margin:auto;
	
	width:50px;
	height:50px;
	
	cursor:pointer;
}

.menu-icono:hover { width:60px; }

.menu-icono > ul {
	margin:15px 0 0 0;
	padding:0;
	
	height:20px;
	overflow:hidden;
}

.menu-icono > ul > li {
	display:block;
	
	margin:0 auto 5px auto;
	padding:0;
	
	width:100%;
	height:3px;
	
	list-style:none;
	
	background:#999;
}

/* cerrar icon */

.cerrar-icono {
	position:absolute; top:20px; left:20px;
	
	margin:0;
	padding:0;
	
	width:40px;
	height:40px;

	cursor:pointer;
}

.cerrar-icono {
	position:absolute; top:20px; left:20px;
	
	margin:0;
	padding:0;
	
	width:40px;
	height:40px;

	cursor:pointer;
}

.cerrar-icono li {
	position:absolute; top:18px; left:0;
	list-style:none;
	
	margin:0;
	padding:0;
	
	width:100%;
	height:3px;
	
	background:#fff;
}

.cerrar-icono li:first-child {
	-ms-transform: rotate(45deg); /* IE 9 */
	-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
	transform: rotate(45deg);
}

.cerrar-icono li:last-child {
	-ms-transform: rotate(135deg); /* IE 9 */
	-webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
	transform: rotate(135deg);
}

.cerrar-icono:hover li:first-child {
	-ms-transform: rotate(135deg); /* IE 9 */
	-webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
	transform: rotate(135deg);
}

.cerrar-icono:hover li:last-child {
	-ms-transform: rotate(45deg); /* IE 9 */
	-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
	transform: rotate(45deg);
}

#movil {
	z-index:1;
	position:fixed; top:0; bottom:0;
	
	display:table;
	
	margin:auto;

	width:70%; max-width:350px;
	height:100%;
	
	background:url(../img/layout/menu-movil-fondo.png);
	box-shadow:0 0 30px #333;
	
	font-size:30px;
	line-height:30px;
	color:#fff;
	text-align:center;
}

#movil > div {
	display:table-cell;
	vertical-align:middle;
}

#movil > div > ul {
	margin:0;
	padding:0;
}

#movil > div > ul > li {
	margin:0 0 5px 0;
	padding:0 0 15px 0;
	
	list-style:none;
	
	border-bottom: 1px dotted #ccc;
}

#movil > div > ul > li:last-child { border-bottom:none; }

#movil > div > ul > li img { display:none; }

.activo { right:0; }
.inactivo { right:-100%; }

@media only screen and (max-width:768px) {
	.menu > ul { display:none; }
	.menu-icono { display:block; }
}

/* inicio */

.slider {
	position:relative;
	
	margin:0;
	padding:0;
	
	width:100%;
	height:400px;
}

.slider img {
	position:absolute;
	
	margin:0;
	padding:0;
	
	width:100%;
	height:100%;
	
	-o-object-fit: cover;
	object-fit: cover;
}

.inicio {
	font-size:22px;
	line-height:22px;
	font-weight:300;
	text-align:center;
	text-transform:uppercase;
	color:#fff;
}

.inicio > ul > li > a > div {
	display:table;

	width:100%;
	height:80px;
}

.inicio > ul > li:nth-child(1) > a > div { background:#a44b0a; }
.inicio > ul > li:nth-child(2) > a > div { background:#a4730a; }
.inicio > ul > li:nth-child(3) > a > div { background:#a4970a; }
.inicio > ul > li:nth-child(4) > a > div { background:#90a40a; }

.inicio > ul > li > a > div > div {
	display:table-cell;
	vertical-align:middle;
	
	background:url(../img/inicio/encabezados-fondo.png);
	-o-background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	background-size:cover;
}

.inicio img {
	display:block;
	
	width:100%;
	height:auto;
}

.inicio span {
	display:block;
	
	font-size:12px;
}

/* layout */

.sombra img {
	display:block;

	width:100%;
	height:70px;
}

.info img {
	display:block;
	
	margin:0 0 10px 0;
	
	width:100%;
	height:auto;
	
	box-shadow:0 0 20px #999;
}

/* productos */


.productos {
    margin: 0 0 80px 0;
    padding: 0 0 30px 0;
    
    border-bottom: 1px dashed #999;
    
    font-size: 90%;
    line-height: 100%;
    text-align: left;
}

.productos > ul {
    float: left;
    
    margin: 0;
    padding: 0;
    
    width: 100%;
}

.productos > ul > li > a:first-child {
	display: block;
    overflow: hidden;
	
	margin: 0 0 25px 0;
	
	width: 100%;
	
    border-radius: 20px;
	box-shadow: 0 0 20px #999;
}

.productos > ul > li > a:first-child > img {
	display:block;
	
	width:100%;
	height:100%;
	
	-o-object-fit: cover;
	object-fit: cover;
}

.productos > ul > li > a:first-child:hover > img {
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
}

.productos > ul > li > a:last-child::before, .productos > ul > li > a:last-child:hover::before {
    display: block;
    
    margin: 0 0 -2px 0;

    content: '\25B2';
    color: #D0080B;
    text-align: center;
    text-shadow: none;
}

.ficha-tecnica {
    padding: 12px 0 10px 0;

    border-radius: 6px;
    background: #D0080B;
    transition: .5s;

    font-size: 70%;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
}

.ficha-tecnica img {
    vertical-align: middle;
    
    margin: -4px 5px 0 0;

    width: 18px;
    height: auto;
}


/* columnas */

.col > ul {
	margin: 0;
	padding: 20px 0;
	
	width: 100%;
	
	float: left;
}

.col > ul > li {
	padding: 0;
	
	float: left;
	list-style: none;
}

@media only screen and (max-width:549px) {
	/* C2 */
	.c2 > ul > li { margin:0 0 20px 0;	width:100%; }

	/* C3 */
	.c3 > ul > li { margin:0 0 20px 0;	width:100%; }
	
	/* 2 */
	.c4 > ul > li { margin:0 0 100px 0;	width:100%; }
    .c4 > ul > li:last-of-type { margin: 0 0 40px 0; }
}

@media only screen and (min-width:550px) and (max-width:767px) {
	/* C2 */
	.c2 > ul > li { margin:0 0 20px 0;	width:100%; }

	/* C3 */
	.c3 > ul > li { margin:0 5% 20px 0;	width:47.5%; }
	.c3 > ul > li:nth-child(2n+0) { margin:0 0 20px 0;	}
	.c3 > ul > li:nth-child(2n+1) { clear:both;	}
	.c3 > ul > li:last-child { width:100%; }
	
	/* C4 */
	.c4 > ul > li { margin:0 10% 100px 0;	width:45%; }
	.c4 > ul > li:nth-child(2n+0) { margin:0 0 100px 0;	}
	.c4 > ul > li:nth-child(2n+1) { clear:both;	}
}

@media only screen and (min-width:768px) and (max-width:1023px) {
	/* C2 */
	.c2 > ul > li { margin:0 5% 20px 0;	width:47.5%; }
	.c2 > ul > li:nth-child(2n+0) { margin:0 0 20px 0;	}
	.c2 > ul > li:nth-child(2n+1) { clear:both;	}

	/* C3 */
	.c3 > ul > li { margin:0 5% 20px 0;	width:47.5%; }
	.c3 > ul > li:nth-child(2n+0) { margin:0 0 20px 0;	}
	.c3 > ul > li:nth-child(2n+1) { clear:both;	}
	.c3 > ul > li:last-child { width:100%; }
	
	/* C4 */
	.c4 > ul > li { margin: 0 10% 100px 0; width: 26.666666666666667%; }
	.c4 > ul > li:nth-child(3n+0) { margin: 0 0 100px 0;	}
	.c4 > ul > li:nth-child(3n+1) { clear:both;	}
}

@media only screen and (min-width:1024px) {
	/* C2 */
	.c2 > ul > li { margin:0 5% 20px 0;	width:47.5%; }
	.c2 > ul > li:nth-child(2n+0) { margin:0 0 20px 0;	}
	.c2 > ul > li:nth-child(2n+1) { clear:both;	}

	/* C3 */
	.c3 > ul > li { margin:0 5% 20px 0;	width:30%; }
	.c3 > ul > li:nth-child(3n+0) { margin:0 0 20px 0;	}
	.c3 > ul > li:nth-child(3n+1) { clear:both;	}
	
	/* C4 */
	.c4 > ul > li { margin: 0 9.333333333333333% 100px 0; width: 18%; }
	.c4 > ul > li:nth-child(4n+0) { margin: 0 0 100px 0;	}
	.c4 > ul > li:nth-child(4n+1) { clear:both;	}
}


/* base */

.base {
	position:relative;

	width:100%;
	height:500px;
	
	font-size:16px;
	line-height:16px;
	text-align:center;
	text-transform:uppercase;
	color:#fff;
	text-shadow:0 0 5px #000;
}

.base > div:nth-child(1) {
	z-index:1;
	position:absolute; top:0; right:0; bottom:0; left:0; 
	
	margin:auto;

	width:91.2%; max-width:1499.5px;
	height:100%;

	background:url(../img/layout/fondo-blanco.png);
}

.base > div:nth-child(2) {
	z-index:2;
	position:absolute; top:0; right:0; bottom:0; left:0;

	width:100%;
	height:100%;

	background:url(../img/layout/base.png) 50% 50% no-repeat;
}

.base > div:nth-child(3) {
	z-index:3;
	position:absolute; top:100px; right:0; bottom:0; left:0; 
	
	margin:auto;
	
	width:90%;
	height:200px;
}

.base > div:nth-child(3) > div:nth-child(1) {
	margin:0 auto 20px auto;
	padding:20px;

	max-width:360px;
	height:auto;
	
	border-radius:20px;
	background:#FFF;
	
	box-shadow:0 0 20px #333;
}

.base > div:nth-child(3) > div > a {
	width:46%;
}

.base > div:nth-child(3) > div > a:nth-child(1) { float:left; }
.base > div:nth-child(3) > div > a:nth-child(2){ float:right; }

.base > div:nth-child(3) > div > a > img {
	display:block;
	
	margin:auto;

	width:100%;
	height:auto;
}

.base > div:nth-child(3) > span { display:block; margin:10px 0 0 0; font-size:14px; line-height:14px; }