/* 
Title:		Reset default browser styles
Author: 	dan@simplebits.com, based on Eric Meyer's Reset CSS: http://meyerweb.com/eric/tools/css/reset
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, 
address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, 
var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; border: 0; outline: 0; background: transparent; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; }
input[type="submit"], button{ -webkit-appearance:none; -webkit-border-radius:0; border-radius:0; }


/* ESTILOS GENERALES 
--------------------------------------------------------------------------------------------------------------------------- */
body { background: rgba(49,25,18,1); font-family:Helvetica, sans-serif; color:#FFF; }
.fondo { 
	width:100%; height:100%; position:fixed; top:0; z-index:-2;
	background:url(../imagenes/bg-almacen-00.jpg) fixed center 100%; opacity:0.15; }
.fblanco { 
	width:100%; height:100%; position:fixed; top:0; background:rgba(255,255,255,0.65); z-index:-1; }	
.h50 { width:100%; height:50px; }
.h100 { width:100%; height:100px; }


.btn { width:100%; display:block; text-align:center; line-height:60px; background:rgba(94,161,160,0.5); color:#FFF; }
.btn-rosa { width:100%; display:block; text-align:center; line-height:40px; background:rgba(235,133,135,0.65); color:#FFF; }
.btn:hover, .btn-rosa:hover { font-weight:bold; }
.error { border:1px dotted rgba(223,33,36,1.00); color:#9D1315; }	
.delete { color:rgba(69,38,28,1); }
.delete:hover { font-weight:bold; }



/* ESTILOS PARA EL NAV
--------------------------------------------------------------------------------------------------------------------------- */
nav { 
	width:100%; height:100%; position:fixed; top:0; left:0; 
	background:rgba(94,161,160,0.95); overflow-y:scroll; z-index:200; display:none; }
nav ul { width:70%; margin:100px 15% 100px 15%; text-align:center; }
nav ul li { width:100%; margin-bottom:15px; }
nav ul li h1 { font-size:42px; line-height:60px; }
nav ul li a { width:100%; display:block; font-size:18px; line-height:60px; color:#FFF; border:3px solid #FFF; }
nav ul li a:hover { font-size:24px; }
#cerrar { 
	width:60px; height:60px; text-align:center; line-height:60px; position:absolute; top:50px; right:50px;
	font-size:42px; color:#FFF; }
#cerrar:hover { font-size:54px; }



/* ESTILOS PARA EL HEADER
--------------------------------------------------------------------------------------------------------------------------- */
header { width:100%; padding:3% 0 2% 0; position:fixed; top:0; left:0; text-align:center; color:rgba(69,38,28,1); }
header h1 { font-size:60px; line-height:72px; text-transform:uppercase; }
#menu { 
	width:100px; height:100px; display:block; position:fixed; top:3%; right:50px;
	background:url(../imagenes/btn-menu.png); background-size:cover; background-position:top; }
#menu:hover { background-position:bottom; } 
	
	

/* ESTILOS PARA EL CONTENIDO
--------------------------------------------------------------------------------------------------------------------------- */
#contenido { 
	width:100%; height:80%; margin:0; position:fixed; top:20%; left:0; background:rgba(255,255,255,0.5); overflow-y:scroll; }
#contenido article { width:60%; margin-left:20%; color:rgba(69,38,28,0.5); }



/* ESTILOS PARA LAS LISTAS CON ENLACES
--------------------------------------------------------------------------------------------------------------------------- */
#contenido .list { width:100%; }
#contenido .list li { 
	width:94%; height:40px; padding:10px 3% 10px 3%; margin-bottom:2px; background:rgba(255,255,255,0.75); position:relative; }
#contenido .list li a { width:100%; display:block; font-size:18px; line-height:40px; color:rgba(69,38,28,0.5); }
#contenido .list li a span { 
	width:40px; height:40px; display:block; position:absolute; top:10px; right:10px;
	background:url(../imagenes/btn-adelante.png) no-repeat; background-size:cover; background-position:top;  } 
#contenido .list li a:hover { color:rgba(69,38,28,0.85); } 
#contenido .list li a:hover span { right:15px; } 
#contenido .list li a span.cantidad { 
	width:60px; height:40px; display:block; position:absolute; top:10px; right:80px; 
	background:transparent; font-size:21px; text-align:center; } 

#contenido .list li .l20 { width:20%; text-align:center; display:inline-block; vertical-align:top; }
#contenido .list li .l60 { width:60%; display:inline-block; vertical-align:top; }


#contenido li.buscar { 
	width:94%; padding:20px 3% 15px 3%; margin-bottom:2px; background:rgba(255,255,255,0.9); position:relative;		
}
#contenido .buscar input { 
	width:100%; height:45px; border:0; background:transparent; padding:0; margin:0; 
	-webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; 
	font-family:Helvetica, sans-serif; font-size:21px; line-height:30px; text-align:left; color:rgba(69,38,28,0.75);
}

#contenido .buscar span {
	width:40px; height:40px; display:block; position:absolute; top:20px; right:10px;
	background:url(../imagenes/btn-buscar.png) no-repeat; background-size:cover; background-position:top;
}

#contenido .pregunta label { 
	width:100%; display:block; margin-bottom:3px; 
	font-size:12px; font-weight:bold; line-height:20px; text-transform:uppercase; color:rgba(69,38,28,1); }
#contenido .pregunta input, #contenido .pregunta textarea, #contenido .pregunta select  { 
	width:100%; min-height:24px; border:0; background:transparent; padding:0; margin:0; 
	-webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; 
	font-family:Helvetica, sans-serif; font-size:21px; line-height:24px; text-align:center; color:rgba(69,38,28,0.5); }
#contenido .pregunta .abajo { 
	width:24px; height:24px; display:block; position:absolute; top:22px; right:10px;
	background:url(../imagenes/btn-abajo.png); background-size:cover; background-position:top; }



/* ESTILOS PARA LAS LISTAS CON DETALLES
--------------------------------------------------------------------------------------------------------------------------- */
#contenido .det { width:100%; }
#contenido .det li { 
	width:94%; padding:10px 3% 15px 3%; margin-bottom:2px; background:rgba(255,255,255,0.75); position:relative; }
#contenido .det li h2 { font-size:24px; line-height:30px; margin:10px 0 5px 0; text-transform:uppercase; }
#contenido .det li .titulo { 
	width:100%; display:block; margin-bottom:3px; 
	font-size:12px; font-weight:bold; line-height:20px; text-transform:uppercase; color:rgba(69,38,28,1); }
#contenido .det li p { width:100%; font-size:21px; line-height:26px; color:rgba(69,38,28,0.5); }

#contenido .det li .corto { width:25%; text-align:center; display:inline-block; vertical-align:top; }
#contenido .det li .medio { width:50%; display:inline-block; vertical-align:top; }
#contenido .det li .largo { width:75%; display:inline-block; vertical-align:top; }

#contenido .det li .l10 { width:10%; text-align:center; display:inline-block; vertical-align:top; }
#contenido .det li .l20 { width:20%; text-align:center; display:inline-block; vertical-align:top; }
#contenido .det li .l50 { width:50%; display:inline-block; vertical-align:top; }
#contenido .det li .l60 { width:60%; display:inline-block; vertical-align:top; }


/* ESTILOS PARA LAS LISTAS CON OPCIONES
--------------------------------------------------------------------------------------------------------------------------- */
.opciones { width:100%; text-transform:uppercase; }
.opciones li { 
	width:94%; padding:15px 3% 10px 3%; margin-bottom:1px;
	background:rgba(255,255,255,0.85); position:relative; }
.opciones li a { width:100%; line-height:40px; display:block; font-size:24px; color:rgba(69,38,28,1); }
.opciones li a:hover { font-weight:bold; }
.opciones li.titulo { 
	width:94%; padding:20px 3% 15px 3%; margin-bottom:1px; display:block; 
	background:rgba(235,133,135,1); position:relative; }
.opciones li.titulo a { color:#FFF; }
.opciones li.titulo span { 
	width:40px; height:40px; display:block; position:absolute; top:15px; right:20px; z-index:100;
	background:url(../imagenes/btn-abajoblanco.png); background-size:cover; background-position:top;  }
#opciones { display:none; }


/* ESTILOS PARA LOS FORMULARIOS DE CONTENIDO
--------------------------------------------------------------------------------------------------------------------------- */
#contenido form { width:100%; text-align:center; }	
#contenido form h2 { font-size:32px; line-height:40px; text-transform:uppercase; margin:10px 0 20px 0; }
#contenido .pregunta { 
	width:94%; padding:10px 3% 15px 3%; margin-bottom:5px; background:rgba(255,255,255,0.5); position:relative; }	
#contenido .pregunta label { 
	width:100%; display:block; margin-bottom:3px; 
	font-size:12px; font-weight:bold; line-height:20px; text-transform:uppercase; color:rgba(69,38,28,1); }
#contenido .pregunta input, #contenido .pregunta textarea, #contenido .pregunta select  { 
	width:100%; min-height:24px; border:0; background:transparent; padding:0; margin:0; 
	-webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; 
	font-family:Helvetica, sans-serif; font-size:21px; line-height:24px; text-align:center; color:rgba(69,38,28,0.5); }
#contenido .pregunta .abajo { 
	width:24px; height:24px; display:block; position:absolute; top:22px; right:10px;
	background:url(../imagenes/btn-abajo.png); background-size:cover; background-position:top; }	
#contenido .pregunta:hover .abajo { background-position:bottom; } 	
#contenido input[type="submit"] { 
	width:100%; padding:10px 0 10px 0; margin:5px 0 15px 0; background:rgba(69,38,28,0.65); border:0;
	font-size:21px; line-height:40px; text-align:center;; color:#FFF; text-transform:uppercase; }	
#contenido input[type="submit"]:hover { background:rgba(69,38,28,0.75); cursor:pointer; }	


/* ESTILOS PARA EL ASIDE
--------------------------------------------------------------------------------------------------------------------------- */
aside { width:100%; position:fixed; bottom:0; left:0; background:rgba(94,161,160,0.7); z-index:100; display:block; }
aside a { 
	width:100%; display:block; font-size:26px; line-height:90px; font-weight:normal;
	text-transform:uppercase; text-align:center; color:#FFF; }
aside a:hover { font-size:28px; }

/* ESTILOS PARA EL ASIDE NOTIFICACIONES
--------------------------------------------------------------------------------------------------------------------------- */
.notificaciones { background:rgba(182,11,14,0.75); }


/* ESTILOS PARA EL LIGHTBOX
--------------------------------------------------------------------------------------------------------------------------- */
.lightbox { width:100%; height:100%; position:fixed; top:0; left:0; z-index:300; background:rgba(94,161,160,0.9); }
.lightbox form { 
	width:36%; margin:0 30% 0 30%; padding:100px 2% 200px 2%; background:rgba(255,255,255,0.7); text-align:center; }	
.lightbox form h2 { 
	font-size:32px; line-height:40px; margin:10px 0 20px 0; text-transform:uppercase; color:rgba(69,38,28,1); }
.lightbox .pregunta { 
	width:94%; padding:10px 3% 15px 3%; margin-bottom:5px; background:rgba(255,255,255,0.5); position:relative; }	
.lightbox .pregunta label { 
	width:100%; display:block; margin-bottom:3px; 
	font-size:12px; font-weight:bold; line-height:20px; text-transform:uppercase; color:rgba(69,38,28,1); }
.lightbox .pregunta input, .lightbox .pregunta textarea, .lightbox .pregunta select  { 
	width:100%; min-height:24px; border:0; background:transparent; padding:0; margin:0; 
	-webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important; 
	font-family:Helvetica, sans-serif; font-size:21px; line-height:24px; text-align:center; color:rgba(69,38,28,0.5); }
.lightbox .pregunta .abajo { 
	width:24px; height:24px; display:block; position:absolute; top:22px; right:10px;
	background:url(../imagenes/btn-abajo.png); background-size:cover; background-position:top; }	
.lightbox .pregunta:hover .abajo { background-position:bottom; } 	
.lightbox input[type="submit"] { 
	width:100%; padding:10px 0 10px 0; margin:5px 0 15px 0; background:rgba(69,38,28,0.65); border:0;
	font-size:21px; line-height:40px; text-align:center;; color:#FFF; text-transform:uppercase; }	
.lightbox input[type="submit"]:hover { background:rgba(69,38,28,0.75); cursor:pointer; }	

.lightbox .det { 
	width:36%; margin:0 30% 0 30%; padding:20px 2% 20px 2%; background:rgba(255,255,255,0.7); text-align:center; }
.lightbox .det li { 
	width:94%; padding:10px 3% 15px 3%; margin-bottom:2px; background:rgba(255,255,255,0.75); position:relative; }
.lightbox .det li h2 { 
	font-size:32px; line-height:40px; margin:10px 0 10px 0; text-transform:uppercase; color:rgba(69,38,28,1); }
.lightbox .det li .titulo { 
	width:100%; display:block; margin-bottom:3px; 
	font-size:12px; font-weight:bold; line-height:20px; text-transform:uppercase; color:rgba(69,38,28,1); }
.lightbox .det li p { width:100%; font-size:21px; line-height:26px; color:rgba(69,38,28,0.5); }

.lightbox .det li .corto { width:20%; display:inline-block; }
.lightbox .det li .medio { width:60%; display:inline-block; }
.lightbox .det li .largo { width:80%; display:inline-block; }


/* ADAPTACIONES PARA DISPOSITIVOS MOVILES
---------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (min-device-width : 320px) and (max-device-width : 750px)  {
	
	#contenido article { width:90%; margin-left:5%; color:rgba(69,38,28,0.5); }
	
}