*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	z-index: 5;
	font-size: 1.01em;
	list-style: none;
	font-family: 'Tajawal', Arial, sans-serif !important; 
}

body{
	min-width: 1300px;
    overflow-y: scroll;
	overflow-x: hidden;
}

.contenedor{
	max-width: 1300px;
	min-width: 1300px;
	margin: auto;
}


header{
	width: 100%;
	float: left;
	clear: both;
	background-size: 100% auto;
	background-position: center center;
	padding-top: 1em;
	margin-bottom: 0.5em;
	background-repeat: no-repeat;
	position: relative;
	background-image: -webkit-gradient(
		linear,
		right top,
		left top,
		color-stop(0, #4F4F4F),
		color-stop(1, #000000)
	);
	background-image: -o-linear-gradient(left, #4F4F4F 0%, #000000 100%);
	background-image: -moz-linear-gradient(left, #4F4F4F 0%, #000000 100%);
	background-image: -webkit-linear-gradient(left, #4F4F4F 0%, #000000 100%);
	background-image: -ms-linear-gradient(left, #4F4F4F 0%, #000000 100%);
	background-image: linear-gradient(to left, #4F4F4F 0%, #000000 100%);
}
header .barra{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1.2em;
	background-color: white;
	z-index: 0;
}
header #logo{
	width: 25%;
	margin: 0.5em 0;
	margin-left: 35%;
	float: left;
	clear: left;	
}

header #logo img{
	width: 100%;
	float: left;
	clear: both;	
	border-radius: 0.8em;
	padding: 0.5em;
}

header #datos{
	width: 31.5%;
	float: right;
	clear: right;
	margin-top: 3em;
	font-size: 0.9em;
	color: #EFEFEF;
}

header #datos .dato{
	float: right;
	clear: both;
	margin: 0.3em 0.5em;
	padding-left: 1.7em;
	font-family: 'Montserrat','Satisfy', Arial;
}

header #datos .tel{
	background-image: url(../img/telefono.png);
	background-repeat: no-repeat;
	background-size: auto 70%;
	background-position: center left;
}
header #datos .ciudad{
	background-image: url(../img/ubicacion.png);
	background-repeat: no-repeat;
	background-size: auto 70%;
	background-position: center left;
}
header #datos .redes a{
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: center left;
	width: 1.9em;
	height: 1.9em;
	float: left;
	margin-left: 1em;
}
header #datos .redes a.face{
	background-image: url(../img/facebook.png);
}
header #datos .redes a.insta{
	background-image: url(../img/instagram.png);
}

header #datos .redes a.face:hover{
	background-image: url(../img/facebook_hover.png);
}
header #datos .redes a.insta:hover{
	background-image: url(../img/instagram_hover.png);
}


header menu{
	width: 100%;
	float: left;
	clear: both;	
	padding: 0.8em;
	z-index: 1;
	position: relative;
	background-color: rgba(133,171,0,0.98);


}
header menu ul#menu-principal{
	width: 60%;
	float: left;	
}
header menu ul li{
	float: left;
	color: white;
	padding: 0 0.5em;
}
header menu ul li a{
	float: left;
	color: white;
	width: 100%;
	text-decoration: none;
	padding: 0.2em 0.5em;
	border-radius: 0.3em;
}
header menu ul li a span.cantidad{
	background-color: #cc3b3b;
	padding: 0.1em 0.5em;
	margin-left: 0.3em; 
	border-radius: 0.2em;
	font-size: 0.8em;
}
header menu ul li a .cantidad:hover{
	background-color: #f3eded;
	color: black;
}
header menu ul li a:hover{
	background-color: rgba(74,148,78,0.99);
	text-decoration: none;
	color: #eee;
}
header menu ul#menu-usuario{
	width: 40%;
	float: right;	
}
header menu ul#menu-usuario li{
	float: right;
	font-size: 0.9em;
}
header menu ul#menu-usuario li a{
	background-repeat: no-repeat;
	background-position: 0.2em center;
	background-size: auto 60%;
	padding-left: 1.6em;
}

header menu ul#menu-usuario li .usuario{
	background-image: url(../img/login.png);
}

header menu ul#menu-usuario li .carrito{
	background-image: url(../img/carrito2.png);
}
header menu ul#menu-usuario li .pedido{
	background-image: url(../img/pedido.png);
}

header menu ul#menu-usuario li .soporte{
	background-image: url(../img/soporte.png);
}


header#celular{
	display: none;
}

header#barra_superior{
	display: none;
}

menu#celular{
	display:none;
}

footer{
	width: 100%;
	background-color: rgba(133,171,0,0.98);
	float: left;
	clear: both;
	overflow: hidden;
	color: white;
	float: left;
	clear: both;
	font-size: 1.1em;
}
footer #firma{
	font-family: 'Tajawal', sans-serif !important; 
	width: 100%;
	padding: 2em;
	border-top: solid #1f5122 0.1em;
	float: left;
	clear: both;
	color: #EEE;
	font-size: 0.8em;
	min-height: 20em;
	background-image: -webkit-gradient(
		linear,
		right top,
		left top,
		color-stop(0, #4F4F4F),
		color-stop(1, #000000)
	);
	background-image: -o-linear-gradient(left, #4F4F4F 0%, #000000 100%);
	background-image: -moz-linear-gradient(left, #4F4F4F 0%, #000000 100%);
	background-image: -webkit-linear-gradient(left, #4F4F4F 0%, #000000 100%);
	background-image: -ms-linear-gradient(left, #4F4F4F 0%, #000000 100%);
	background-image: linear-gradient(to left, #4F4F4F 0%, #000000 100%);
	
}
footer menu{
	width: 100%;
	padding: 0em;
	border-top: solid rgba(109, 139, 0, 0.98) 0.08em;
	float: left;
	clear: both;
	overflow: hidden;
}
footer menu ul{
	float: left;
	clear: left;
	width: 70%;
	padding: 2.5em 0;
	
}
footer menu li{
	float: left;	
	margin-right: 0.6em;
}
footer menu li a{
	float: left;
	width: 100%;
	color: white;
	text-decoration: none;
	padding: 0.3em 0.8em;
	font-family: 'Tajawal', sans-serif;
}
footer menu li a#actual{
	background-color: red;
}
footer menu li a:hover{
	background-color: rgba(54,128,58,0.9);
	text-decoration: none;
	color: #eee;
}

footer #logo{
	margin-top: 0.9em;
	width: 16%;
	float: right;
	overflow: hidden;
	padding: 0em;
	clear: right;
}
footer #logo img{
	width: 100%;
	float: left;
	overflow: hidden;
}


@media only screen and (max-width: 1350px)  {
	body{
		min-width: 1100px;	
	}	
	.contenedor{
		max-width: 1100px;
		min-width: 1100px;
	}
	
	header{
	}	
	header #barra_superior{}
	
	header #barra_superior h1#sponsor{
		font-size: 0.7em;
	}
	header #barra_superior a#login{
		font-size: 0.7em;
	}
	header #barra_superior a#login:hover{
	}
	header #barra_superior #telefono{
		font-size: 0.7em;
	}
	header #barra_superior #ubicacion{
		font-size: 0.7em;
	}
	
	header #logo{
		width: 30%;
		padding: 0.9em;
		margin: 0em 0;
		margin-left: 33%;
		float: left;
		clear: left;	
	}
	
	header #logo img{
		width: 100%;
		float: left;
		clear: both;	
		border-radius: 0.8em;
		padding: 0.5em;
	}
	
	header #datos{
		width: 25.5%;
		float: right;
		clear: right;
		margin-top: 2em;
		font-size: 0.9em;
		color: #EFEFEF;
	}
	header menu#principal{
		width: 79%;
	}
	header menu#principal ul{
	}
	header menu ul li{
		margin-left: 0em;
		margin-right: 0em;
		padding-left: 0.1em;
		padding-right: 0.1em;
	}
	header menu#principal ul li a{
		margin: 0.15em 0em;
		padding: 2.25em 1em;	
	}
	header menu#principal ul li a#actual{
		margin: 1.5em 0.2em;
		padding: 1em 1.8em;	
	}
	header menu#principal ul li a:hover{
		margin: 0.15em;
		padding: 2.25em 1em;	
		padding-bottom: 1em;
	}
	header menu#principal ul li a#actual:hover{
		margin: 1.5em 0.2em;
		padding: 1em 1.8em;	
	}


	footer{
	}
	footer #firma{
		font-size: 0.8em;		
	}
	footer menu{
	}
	footer menu ul{
		width: 70%;
		padding: 1.5em 0;
		
	}
	footer menu li{
		margin-right: 0.6em;
	}
	footer menu li a{
		padding: 0.3em 0.8em;
	}
	footer menu li a#actual{
	}
	footer menu li a:hover{
	}
	footer #logo{
	}
	footer #logo img{
	}
	
}

@media only screen and (max-width: 1150px)  {
	body{
		min-width: 960px;	
	}	
	.contenedor{
		max-width: 960px;
		min-width: 960px;
	}
}

@media only screen and (max-width: 900px)  {
	body{
		min-width: 300px;	
	}	
	.contenedor{
		max-width: auto;
		min-width: auto;
	}	
	header{
		display: none;
	}
	
	header#celular{
		display: inline-block;
		width: 100%;
		float: left;
		clear: both;
		background-color: rgba(24, 24, 24, 0.98);
		border-bottom: solid 0.1em #EEE;
		background-image: none;
		margin: 0;
		padding: 0;		
		background-image: -webkit-gradient(
			linear,
			right top,
			left top,
			color-stop(0, #4F4F4F),
			color-stop(1, #000000)
		);
		background-image: -o-linear-gradient(left, #4F4F4F 0%, #000000 100%);
		background-image: -moz-linear-gradient(left, #4F4F4F 0%, #000000 100%);
		background-image: -webkit-linear-gradient(left, #4F4F4F 0%, #000000 100%);
		background-image: -ms-linear-gradient(left, #4F4F4F 0%, #000000 100%);
		background-image: linear-gradient(to left, #4F4F4F 0%, #000000 100%);
	}
	
	header#celular a#menu-celular{
		background-image: url(../img/menu2.png);
		background-position: center center;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 8.5vw;
		height: 10vw;
		margin: 5.5vw;
		float: right;
	}
	header#celular img#icono{
		width: 30%;
		margin: 1em;
		float: left;
	}
	menu#celular{		
		display: none;
		width: 100%;
		float: left;
		clear: both;
		background-color: #23282d;
	}	
	menu#celular ul{		
		width: 100%;
		float: left;
		clear: both;
	}
	menu#celular ul li{		
		width: 100%;
		float: left;
		clear: both;
	}
	menu#celular ul li a{		
		width: 100%;
		float: left;
		clear: both;
		color: #EEE;
		text-decoration: none;
		text-align: center;
		padding: 0.8em 0;
	}
	header#barra_superior{
		width: 100%;
		float: left;
		clear: both;
		display: inline-block;
		background-image: none;
		background-color: #111;
		margin: 0;
		padding: 0.5em 0;
	}
	
	header#barra_superior a.usuario{
		background-image: url(../img/login.png);
	}

	header#barra_superior a.carrito{
		background-image: url(../img/carrito2.png);
	}
	header#barra_superior a.pedido{
		background-image: url(../img/pedido.png);
	}

	header#barra_superior a#login{
		width: 28%;
		float: right;	
		font-weight: normal;
		font-size: 0.8em;
		color: #EEE;
		text-decoration: none;
		padding-left: 20px;
		background-position: center left;
		background-repeat: no-repeat;
		background-size: auto 80%;
		margin: 0.5em 1.1%;
		padding-top: 0.2em;
	}
	header#barra_superior a#login:hover{
		color: #ba0000;
		/*background-image: url(../img/login_hover.png);*/
	}
	header#barra_superior #telefono{
		width: 32%;
		padding-top: 0.2em;
		float: left;	
		font-size: 0.8em;
		color: #EEE;
		text-decoration: none;
		padding-left: 20px;
		background-image: url(../img/telefono2.png);
		background-position: center left;
		background-repeat: no-repeat;
		background-size: auto 80%;
		margin: 0.5em 2.1%;
	}


	footer{
	}
	footer #firma{
		padding: 2em;		
	}
	footer menu{
	}
	footer menu ul{
		display: none;
		
	}
	footer menu li{
	}
	footer menu li a{
	}
	footer menu li a#actual{
	}
	footer menu li a:hover{
	}
	footer #logo{
		width: 70%;
		padding: 1em;
		margin: 0.2em 15%;
	}
	footer #logo img{
	}
	
}