@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),
	local('MaterialIcons-Regular'),
	url(MaterialIcons-Regular.woff2) format('woff2'),
	url(MaterialIcons-Regular.woff) format('woff'),
	url(MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
  
	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;
  
	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;
  
	/* Support for IE. */
	font-feature-settings: 'liga';
  }

@font-face {
	font-family: 'rubik';
	font-weight: normal;
    font-style: normal;
	src: url(Rubik-Regular.ttf) format('truetype');
}

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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
*{box-sizing: border-box;}
*:focus {outline: none;}
a{text-decoration: none;}
a img{border: 0;}
a{
	overflow: hidden;
}
html{font-size:62.5%;}
input,textarea{margin: 0; border: 0;}
body{
	font: normal 1.3rem/2rem 'rubik', 'Verdana';
	color: #333;
	background: #2B2B2B;
}
body > input{
	display: none;
}
body > input + label{
	color: #fff;
	cursor: pointer;
	display: none;
	top: 0rem;
	position: fixed;
	right: 0rem;
	width: 4.2rem;
	padding: 1rem 1rem 0 1rem;
	height: 4.2rem;
	z-index: 10;
	text-align: center;
	background: #000;
	border-radius: 0.5rem 0 0 0.5rem;
}
body > input#radiocuenta + label{
	right: 8.4rem;
}
body > input#radiobuscador + label{
	right: 4.2rem;
}
body > input#radiocerrar + label{
	top: 4.2rem;
}
header > div, #principal > div, footer > div{
    max-width: 98rem;
    margin: 0 auto;
    padding: 0 1rem;
    position:relative;
}
header{
    background: #2B2B2B;
}

nav, #cuenta{
	font: normal 1rem/2.5rem 'rubik', 'Verdana';
	text-transform: uppercase;
}
#cuenta{
	position: absolute;
	top: 0;
	right: 0;
	z-index: 8;
	background: #000;
	padding: 0 1rem 0 1rem;
	border-radius: 0.5rem;
	min-width: 15rem;
}
#cuenta li > ul{
	display: none;
}
#cuenta ul > li{
	display: list-item;
}
#cuenta > li:hover > ul{
	display: block;
}
nav li{
	display: inline;
	padding-right: 1rem;
}
nav li:nth-child(n+7){
	display: none;
}
nav li a, #cuenta a{
	color: #aaa;
}
nav li a:hover, #cuenta a:hover{
	color: #fff;
}
header #logo{
	display: inline-block;
	height: 9.1rem;
}

header #logo img{
	color: #FFA304;
	width: 30rem;
	margin-top: 3rem;
}
header #banner{
	float: right;
	padding-top: 1rem;
	text-align: center;
}
header #banner img{
	max-width: 46.8rem;
	width: 100%;
}
header #buscador{
	position:relative;
	background: #3c3c3c;
	padding: 1rem 1rem 1rem 24rem;
	height: 4.5rem;
	border-radius: 0.5rem 0.5rem 0 0;
}
header #buscador > div:nth-of-type(1){
	position:absolute;
	top: 0;
	left: 0;
	font: bold 2rem/4.5rem 'rubik', 'Verdana';
	display: inline-block;
	background: #FFA304;
	width: 22rem;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	border-radius: 0.5rem 0 0 0;
}
header #buscador form{
	word-spacing: 0;
	display: inline-block;
	width: 80%;
}
header #buscador form select, header #buscador form input{
	padding-left: 0.5rem;
	font: normal 1.3rem/2.5rem 'rubik', 'Verdana';
	color: #333;
	float: left;
	height: 2.5rem;
	border: none;
}
header #buscador form select{
	border-radius: 0.5rem 0 0 0.5rem;
	width: 35%;
}
header #buscador form input{
	width: 50%;
}
header #buscador form input[type=submit]{
	color: #fff;
	background: #FFA304;
	border-radius: 0 0.5rem 0.5rem 0;
	width: 15%;
	padding: 0;
	text-transform: uppercase;
	font-weight: bold;
}
header #buscador > div#carrito{
	float: right;
	
}
header #buscador > div#carrito a{
	position:relative;
}
header #buscador > div#carrito i{
	position: absolute;
	left: -3rem;
}
header #buscador a{
	font-size: 1.5rem;
	line-height: 2.4rem;
}
.iconocarro, header #buscador a{
	color: #FFA304;
}
header #buscador a span{
	color: #fff;
}
footer{
	background: #2B2B2B;
	padding: 2rem 0;
}
footer #siguenos{

}
footer > div > div{
	display: inline-block;
	width: 30.5rem;
	font: normal 1.1rem/2.4rem 'rubik', 'Verdana';
}
footer > div > div > p{
	font: bold 1.3rem/3rem 'rubik', 'Verdana';
	color: #ddd; 
}
footer #siguenos a img{
	width: 2.4rem;
}
footer #llamanos a{
	position:relative;
	display: inline-block;
	padding-left: 2.6rem;
}
footer #llamanos i{
	position: absolute;
	left: 0rem;
}
footer #metodosdepago img{
	max-height: 2.4rem;
}
footer #copy{
	text-align: center;
	border-top: 0.1rem solid #444;
	color: #999;
	font: normal 1.2rem 'rubik', 'Verdana';
	padding: 2rem 0;
}
footer a{
	color: #ddd;
}
footer a:hover{
	color: #fff;
}
#principal{
	background: #f2f2f2;
	overflow: hidden;
	padding-bottom: 2rem;
}
aside{
	width: 22rem;
	float: left;
}
aside a:hover{
	color: #000;
}
aside > *{
	background: #fff;
	padding: 1rem;
	border-radius: 0.5rem;
}
aside > ul:first-child{
	border-radius: 0 0 0.5rem 0.5rem;
}
aside > ul li a{
	color: #666;
	display: block;
	border-bottom: 0.1rem solid #eee;
	padding: 0.5rem 0;
}
aside > ul li:last-child a{
	border: none;
}
article{
	width: 72rem;
	float: right;
	padding-top: 1rem;
	position: relative;
}
article > ul + p, article > p.listo{
	position:relative;
	padding: 0.5rem 1rem;
	text-align: center;
	border-radius: 0.5rem;
	margin-bottom: 1rem;
	background: #E5F8E0; 
	border: 0.1rem solid #C3EEC5; 
	color: #58A13B; 
}
article > ul + p.error{
	background-color: #F8E1E1;
	border-color: #EECEC4;
	color: #A13B45; 
}
article > ul + p i{
	position: absolute;
	margin-left: -3rem;
	margin-top: -0.3rem;
}
/***********************************************************************************************/	
fieldset > legend{
	font: bold 1.2rem/3.6rem 'rubik', 'Verdana';
	color: #c90;
	text-decoration: underline;
}
#h1, article > h2{
	height: 3.6rem;
	border-radius: 0.5rem;
	position:relative;
	list-style: none;
	margin-bottom: 1rem;
	overflow: hidden;
}
article > h2{
	border-bottom: 0.2rem solid #FFA304;
	border-radius: 0;
	font: bold 1.2rem/3.6rem 'rubik', 'Verdana';
}
	#h1 li{
		float:left;
		position: relative;
		background: #fff;
	}
	#h1 li:first-child{
		border-radius: 0.3rem 0 0 0.3rem;
	}	
	#h1 li a, #h1 h1{
		font: bold 1.2rem/3.6rem 'rubik', 'Verdana';
		color: #333;
		display: block;
		position: relative;
		padding: 0 2rem 0 4rem;
		z-index: 4;
		height: 3.6rem;
	}
	#h1 li:first-child a{
		padding: 0.5rem 0.5rem 0.5rem 1rem;
	}
	#h1 li span{ 
		position:absolute;
		right: -3.6rem;
		top: 0;
		border-color: transparent;
		border-style: solid;
		border-width: 1.8rem;
		height: 0;
		width: 0;
		border-left-color: #f2f2f2;
		z-index: 3;
	}
	
	#h1 li span span{ 
		position:absolute;
		right: -1.7rem;
		top: -1.8rem;
		border-color: transparent;
		border-style: solid;
		border-width: 1.8rem;
		height: 0;
		width: 0;
		border-left-color: #fff;
	}
	#h1 li:hover a{
		color: #fff;
	}
	#h1 li:hover{
		background: #666;
	}
	#h1 li:hover span{ 
		
	}
	#h1 li:hover span span{ 
		border-left-color: #666;
	}
	
	
	#h1 h1{
		cursor:default;
		color: #000;
	}
	#h1 li.h1{
		background: none;
	}
	#h1 li.h1 span, #h1 li.h1:hover span,#h1 li.h1 span span, #h1 li.h1:hover span span {
		display: none;
	}

.filtros{
	overflow: hidden;
	font: bold 1.3rem/3rem 'rubik' ;
	margin-bottom: 1rem;
}
	.filtros a{
		color: #000;
		position:relative;
		margin-right: 2.3rem;
		margin-left: 1rem;
	}
	.filtros span{
		font-weight: bold; 
	}
	.filtros .ordenar{
		float: left;
	}
	.filtros .filtrar{
		float: right;
	}
	.filtros a i{
		position:absolute;
		right: -2,2em;
		top: -0.4rem;
	}
	.filtros a.active.asc i::before{
		content: "arrow_drop_up";
	}
	.filtros a.active.desc i::before{
		content: "arrow_drop_down";
	}
	.filtros .filtrar a i::before{
		content: "check_box_outline_blank";
	}
	.filtros .filtrar a.active i::before{
		content: "check_box";
	}
/***************************************     ARTICLE     ******************************************************/
article .contenido{
	overflow: hidden;
}
article a{
	color: #000;
}
.bannercategoria img{
	max-width: 100%;
}
.listacategorias{
	text-align: center;
}
.listacategorias a{
	display: inline-block;
	margin-bottom: 1rem;
	margin-right: 2rem;
}
.listacategorias img{
	border-radius: 0.5rem;
}
.listaproductos{

}
.listaproductos li {
	display: inline-block;
	width: 23.1rem;
	margin: 0 1rem 1rem 0;
}
.listaproductos li:nth-child(3n){
	margin-right: 0;
}
.listaproductos a{
	padding: 1rem;
	display: block;
	background: #fff;
	border-radius: 0.5rem;
	border: 0.1rem solid #fff;
	height: 30rem;
}
.listaproductos a:hover{
	border-color: #ddd;
}
.listaproductos a > *{
	margin-bottom: 1rem;
}
.listaproductos a span{
	display: block;
}
.listaproductos a h2{
	color: #333;
	text-transform: uppercase;
	font-weight: bold;
}
.listaproductos a img{
	margin: 0 auto 1rem auto;
	display: block;
	width: 10rem;
	height: 7.5rem;
}
.listaproductos a span.precio{
	color: #FA0F0C;
	position: relative;
	font-weight: bold;
}
.listaproductos a span.precio span{
	text-decoration:line-through;
	color: #aaa;
	position:absolute;
	top: 0;
	right: 0;
}
.listaproductos a span.precio span::before{
	content: "Antes: ";
}
.listaproductos a span.avance{
	color: #666;
}

p.precio span:nth-of-type(1){
	color: #FA0F0C;
	font-weight: bold;
}
p.precio span:nth-of-type(2){
	text-decoration:line-through;
	color: #aaa;
}
p.precio span:nth-of-type(2)::before{
	content: "Antes: ";
}
p.mensaje{
	margin-top: 1rem;
}
div.agregar a, div.agregar input[type="submit"], a.pagar{
	background: #FFA304;
	color: #fff;
	display: inline-block;
	border-radius: 0.5rem;
	padding: 0 1rem;
}
p.stock .disponible{
	color: #070;
}
p.stock .pre-venta{
	color: #f90;
}
p.stock .agotado{
	color: #900;
}
p.stock .temporalmente-agotado{
	color: #070;
}
.lista.admin{

}
.lista.admin{
	font: normal 1.3rem/3rem "rubik";
}
.lista.admin li{
	position:relative;
	padding-left: 15rem;
	border-bottom: 0.1rem solid #d9d9d9;
}
.lista.admin li > span{
	position:absolute;
	left: 0;
}
.lista.admin li  > span.acciones{
	left: 4rem;
	top: 0.3rem;
}
.lista.admin .acciones input[type="checkbox"]{
	display: none;
}
.lista.admin .acciones input[type="checkbox"] + label{
	width: 2.4rem;
	overflow: hidden;
}
.lista.admin .acciones input[type="checkbox"]:checked ~ a.eliminar{
	display: initial;
}
.lista.admin .acciones input[type="checkbox"]:checked + label{
	display: none;
}
.lista.admin li  span.acciones a.eliminar{
	display: none;
	position:absolute;
	right: -2.7rem;
	top: 0rem;
}
.lista.admin li  span.extra{
	position:absolute;
	display: inline-block;
	right: 0;
	left: auto;
}

.orden{
	width: 100%;
	margin-bottom: 1rem;
	font: normal 1.3rem/3.4rem "rubik";
}
.orden strong{
	font-weight: bold;
	margin-right: 1rem;
}
.orden{
	text-align: left;
}
.orden th{
	font-weight: bold;
}
.orden tr{
	border-bottom: 0.1rem solid #e0e0e0;
}
.orden tr:last-child{
	border-bottom: none;
}
.orden tbody input{
	width: 3rem;
}
/**********************************************************************************************************************************/
div.pager, article form input[type="submit"]{
	margin-top: 1rem;
	position: relative;
	text-transform: uppercase;
	font: bold 1rem/2.6rem 'rubik', 'Verdana';
	clear: both;
	overflow: hidden;
}
div.pager ul{
	float: left;
	position: relative;
	list-style: none;
}
div.pager a, article form input[type="submit"]{
	color: #333;
	border-radius: 0.5rem;
	display: block;
	padding: 0 1rem;
	background: #fff;
	cursor: pointer;
}
div.pager a.inactive{
	display: none;
}
div.pager li{
	float: left;
	margin-right: 0.5rem;
}
div.pager  a.siguiente, div.pager  a.anterior, div.pager .pagerbotones a{
	
}
div.pager a:hover{
	color: #fff;
	background: #666;
}
div.pager  li.active a{
	background: none;
	color: #666;
}

div.pager  div img{
	vertical-align: text-bottom;
}

div.pager .pagerbotones{
	float: right;
}
div.pager .pagerbotones a{
	position:relative;
	padding-left: 3rem;
}

div.pager .pagerbotones i{
	position:absolute;
	left: 0.2rem;
	top: 0.1rem;
}
article form{
	font: normal 1.3rem/2.6rem 'rubik', 'Verdana';
}
article form dt{
	font-weight: bold;
}
article form dd{
	margin-bottom: 1rem;
}
article form dd > input, article form dd > select, article form dd > textarea{
	width: 40%;
	padding: 1rem;
	border-radius: 0.5rem;
	background: #fafafa;
	border: 0.1rem solid #e0e0e0;
}
article form dd > textarea{
	width: 100%;
}
article form dd > input[type="checkbox"]{
	width: 2rem !important;
}
article form dd > *:focus{
	background: #fff;
	border-color: #d0d0d0;
	transition: 0.3s ease-in-out;
}
.galeria{
	position:absolute;
}
.galeria img{
	border-radius: 0.5rem;
}
.galeria input{
	display: none;
}
.galeria label{
	cursor: zoom-in;
}
.galeria label img{

}

.galeria div img{
	display: none;
	width: 30.6rem;
}
.galeria input + label{
	border-bottom: 0.2rem solid rgba(255,0,0,0);
}
.galeria input:checked + label{
	border-color: #d0d0d0;
}
.galeria input:nth-of-type(1):checked ~ div img:nth-child(1){
	display: block;
}
.galeria input:nth-of-type(2):checked ~ div img:nth-child(2){
	display: block;
}
.galeria input:nth-of-type(3):checked ~ div img:nth-child(3){
	display: block;
}

.datosproducto{
	padding-left: 32rem;
	min-height: 32rem;
	margin-bottom: 1rem;
}
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#novedades { overflow: hidden; }
div#novedades figure img { width: 20%; float: left; }
div#novedades figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

@media screen and (max-width: 64rem) {
	body > input + label{
		display: block;
	}
	#contenedor{
		padding-top: 4.2rem;
	}
	header #logo{
		position: fixed;
		z-index: 9;
		font: normal 2rem/4.2rem 'logo';
		background: #000;
		left: 0;
		top: 0;
		width: 100%;
		display: block;
		padding-left: 1rem;
		box-shadow: 0px 5px 10px #000;
		height: 4rem;
	}
	header #logo img{
		margin-top: 1rem;
		width: 26rem;
	}
	nav li, #cuenta li{
		padding: 0.5rem 0;
	}
	#cuenta li > ul{
		display: block;
	}
	#radiomenu ~ #contenedor nav, #radiocuenta ~ #contenedor #cuenta{
		padding: 4.2rem 1rem 1rem 1rem;
		font: normal 1.3rem/2.4rem 'rubik', 'Verdana';
		text-transform: none;
		position: fixed;
		z-index: 8;
		background: #000;
		width: 0;
		top: 0;
		left: 100%;
		overflow: scroll;
		height: 100%;
		transition: 0.3s ease-in-out;
		text-transform: uppercase;
	}
	#radiocuenta ~ #contenedor #cuenta{
		left: -100%;
		border-radius: 0;
	}
	#radiomenu:checked ~ #contenedor nav, #radiocuenta:checked ~ #contenedor #cuenta{
		width: 100%;
		left: 0;
	}
	
	nav li, nav li:nth-child(n+7){
		display: list-item;
	}
	nav li:nth-child(n+8) a:before{
		content: "- ";
	}
	nav li a{
		display: block;
	}
	
	header #banner{
		float: none;
		display: block;
	}
	header #buscador{
		padding: 1rem;
		background: #000;
		height: auto;
		position: fixed;
		z-index: 8;
		top: -20rem;
		left: 0;
		width: 100%;
		box-shadow: 0px 5px 10px #000;
		transition: 0.3s ease-in-out;
	}
	#radiobuscador:checked ~ #contenedor > header > div > div#buscador{
		top: 4.2rem;
		border-radius: 0;
	}

	body > input#radiocerrar + label{
		display: none;
	}
	body > input:not(#radiocerrar):checked ~ #radiocerrar + label{
		display: block;
	}
	header #cuenta{
		position:fixed;
		top: -10rem;
		z-index: 8;
	}
	#radiocuenta:checked ~ #contenedor > header > div > #cuenta{
		top: 4.2rem;
	}
	header #buscador > div:nth-of-type(1){
		display: none;
	}
	header #buscador form{
		width: 100%;
	}
	header #buscador form select{
		width: 100%;
		margin-bottom: 1rem;
		border-radius: 0.5rem;
	}
	header #buscador form input{
		width: 70%;
		border-radius: 0.5rem 0 0 0.5rem;
	}
	header #buscador form input[type=submit]{
		width: 30%;
		border-radius: 0 0.5rem 0.5rem 0;
	}
	header #buscador > div#carrito{
		float: none;
		height: 4rem;
		text-align: center;
	}
	header #buscador > div#carrito i{
		position: 	;
	}


	footer > div > div{
		display: block;
		text-align: center;
		width: auto;
	}
	aside{
		display: none;
	}
	article{
		float: none;
		width: auto;
	}
	#h1{
		border-bottom: 0.2rem solid #FFA304;
		border-radius: 0;
	}
	#h1 li{
		display: none;
	}
	#h1 li:last-child{
		display: list-item;
	}
	#h1 li:last-child h1{
		padding-left: 0;
		font-size: 1.3rem;
	}
	.filtros .ordenar, .filtros .filtrar{
		float: none;
	}

	.listaproductos li {
		width: 100%;
		margin: 0 0 1rem 0;
	}
	.listaproductos li a{
		padding-left: 13rem;
		height: auto;
	}
	.listaproductos li a img{
		position: absolute;
		margin: 0 0 0 -12rem;
	}
	article form dd > input, article form dd > select, article form dd > textarea{
		width: 100%;
	}
	.galeria{
		position: static;
		margin-bottom: 1rem;
		text-align: center;
	}
	
	.galeria div img{
		width: 100%;
	}
	.galeria label img{
		width: 32.7%;
	}
	.datosproducto{
		padding: 0;
		min-height: auto;
	}
}



@media screen and (max-width: 30rem) {
	header #logo{
		
	}

}