:root{
	--gray:#3D3D3D;
	--orange:#FA7F08;
	--orangered:#F24405;
}

body{
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	margin:0 0 0 0;
	cursor:default;
	font-size: 1vw;
	color: var(--gray);
	background: white;
}
input[type="button"],input[type="submit"],button{
	border:none;
	background:none;
	font-size:1em;
	cursor:pointer;
}
img{
	border:none;
}
a{
	color: inherit;
	text-decoration: none;
}
*[onclick],*[href]{
	cursor: pointer;
}
textarea{
	resize:none;
}
.clr{
	clear:both;
}
.columnas2{
	-webkit-column-count:2;
	-moz-column-count:2;
	column-count:2;
}
.columnas3{
	-webkit-column-count:3;
	-moz-column-count:3;
	column-count:3;
}
.columnas4{
	-webkit-column-count:4;
	-moz-column-count:4;
	column-count:4;
}
.columnas5{
	-webkit-column-count:5;
	-moz-column-count:5;
	column-count:5;
}
.grid2{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 0;
	grid-auto-rows: minmax(50%, auto);
}
.grid3{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 0;
	grid-auto-rows: minmax(33%, auto);
}
.grid5{
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 0;
	grid-auto-rows: minmax(20%, auto);
}
.flex{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.site_error>div{
	margin: 0 auto;
	padding: 1em;
	color: white;
	background: #E33;
	text-align: center;
	width: 50%;
	min-width: 280px;
	border-radius: 0.15em;
	font-weight:600;
	font-size: 1.2em;
}
.site_error{
	position: fixed;
	top:-20em;
	opacity: 0;
	z-index: 100;
	width: 100%;
	
	-webkit-animation: siteError 5s 1;
	-moz-animation: siteError 5s 1;
	animation: siteError 5s 1;
}

.site_success>div{
	margin: 0 auto;
	padding: 1em;
	color: white;
	background: #295;
	text-align: center;
	width: 50%;
	min-width: 280px;
	border-radius: 0.15em;
	font-weight:600;
	font-size: 1.2em;
}
.site_success{
	position: fixed;
	top:-20em;
	opacity: 0;
	z-index: 100;
	width: 100%;
	
	-webkit-animation: siteError 5s 1;
	-moz-animation: siteError 5s 1;
	animation: siteError 5s 1;
}

@keyframes siteError{
	0%{opacity:1;top:5em;}
	90%{opacity:1}
	99%{opacity:0;top:5em;}
	100%{opacity:0;top:-20em;}
}

.hide_me{
	height: 0;
	width: 0;
	overflow: hidden;
	opacity: 0;
	font-size: 1px;
}

a,input,button,*[onclick],*[href],a>*{
	transition: all .25s ease-in-out;
	cursor: pointer;
}

/* GENERALES */

header{
	position: fixed;
	top:0;
	left:0;
	right: 0;
	background: var(--gray);
	color: white;
	height: 7em;
	z-index: 10;
	box-shadow: rgba(0,0,0,0.3) 0 0 1em;
	overflow: visible;
	border-bottom: var(--orange) solid 4px;
}
#menu_opener{
	float:left;
	margin: 1em;
	width:5em;
	height:5em;
	background: #333;
	border-radius: 4px;
}
#menu_opener>div{
	height:4px;
	margin: 6px auto 0 auto;
	background: #9EF8EE;
	width: 4em;
	border-radius: 4px;
	position: relative;
	top: 0;
	transform: rotate(0deg);
	opacity: 1;
	transition: all .25s ease-in-out;
}
#menu_opener>div:first-child{
	margin-top: 1.5em;
}
#menu_opener.opened>div{ background: var(--orange); }
#menu_opener.opened>div:nth-child(1){
	top: 10px;
	transform: rotate(45deg);
}
#menu_opener.opened>div:nth-child(3){
	top: -10px;
	transform: rotate(-45deg);
}
#menu_opener.opened>div:nth-child(2){
	opacity: 0;
}

#logo{
	float: left;
	margin-right: 5%;
	position: relative;
	z-index: 11;
}
#logo img{
	display: block;
	height: 14em;
}

nav{
	height: 4em;
	margin: 1.5em 1em;
	text-align: right;
}
form input[type="text"],form input[type="tel"],form input[type="email"],form input[type="number"],form input[type="date"],form input[type="search"],form input[type="password"],form textarea,form select{
	display: block;
	width: 96%;
	padding: 0.5em 2%;
	font: inherit;
	border:#666 solid 1px;
	font-size: 1.25em;
	border-radius: 0.25em;
	margin-bottom: 1em;
}
form input[type="button"],form input[type="submit"],form button{
	background: var(--orangered);
	color: white;
	padding: 0.5em 1em;
	font: inherit;
	text-transform: uppercase;
	font-size: 1.25em;
	margin: 0 0.5em;
	border-radius: 0.25em;
}
form input[type="button"]:hover,form input[type="submit"]:hover,form button:hover{
	background: var(--orange);
}
form #captcha input[type="number"]{
	width: 4em;
	text-align: center;
	display: inline-block;
	padding: 0.5em 0.25em;
}
#captcha{
	text-align: center;
}

#addresses{
	grid-gap:1.5em;
	padding: 5%;
}
#addresses>div{
	box-shadow: #CCC 0 0 1em;
	padding: 1em;
	border-radius: 0.5em;
}


nav form{
	float: left;
	width: 50%;
	padding: 0.5em 0;
}
nav>a{
	display: inline-block;
	padding: 0 1em;
	border-right: #999 solid 2px;
	text-align: center;
}
nav>a:last-child{
	border-right: none;
}
nav>a i.fa{
	display: block;
	font-size: 2.5em;
	margin-bottom: 0.25em;
}
nav>a:nth-child(2) i.fa{ color:#22BABB; }
nav>a:nth-child(3) i.fa{ color:#9EF8EE; }
nav>a:nth-child(4) i.fa{ color:var(--orange); }
nav>a:hover{
	color: #CCC;
}
nav>a:hover i.fa{
	color:white;
}
#submenu{
	background: var(--gray);
	padding: 0.5em 5%;
	margin: 0 0 0 15%;
	position: relative;
	top: 4px;
	text-align: left;
}
#submenu a{
	display: inline-block;
	padding: 0 0.5em;
	margin: 0 1em;
}
#submenu a:hover{
	color: #CCC;
}

menu{
	position: fixed;
	top: 8em;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(220,220,220,0.85);
	animation: fadeIn 1s 1;
	display: none;
	margin: 0;
	z-index: 9;
	font-size: 0.85em;
}
@keyframes fadeIn{
	from{ opacity: 0; }
	to{ opacity: 1; }
}
menu>div{
	background: white;
	box-shadow: rgba(0,0,0,0.5) 0 0.5em 1em;
	margin: 2.5em auto;
	width: 80%;
}
menu img{
	display: block;
	max-width: 100%;
}
#menu_sidebar{
	float: left;
	width: 30%;
	text-align: left;
	line-height: 2em;
	border-right: #666 solid 1px;
	text-transform: uppercase;
}
#menu_sidebar h4{
	margin: 0 0 0.5em 0;
	padding: 0.5em;
	background: var(--orangered);
	color: white;
	font-size: 1.5em;
}
#menu_sidebar a{
	display: block;
	padding: 0 1em;
	font-weight: bold;
	font-size: 1.2em;
}
#menu_sidebar a:hover{
	color: #3CC;
}
#menu_sales{
	float: right;
	width: 65%;
	padding: 2.25%;
}
#menu_sales .grid3{
	grid-gap:2em;
}

#content{
	margin: 10em 5% 5% 5%;
}
#content img{
	max-width: 100%;
}

footer{
	background: #DDD;
	color: #666;
	padding: 2.5%;
}

footer .grid3{
	grid-gap:2.5%;
}
footer .grid3 .grid3{
	grid-gap:2em;
	font-size: 0.8em;
	text-transform: uppercase;
	text-align: left;
}
footer .grid3 .grid3 a{
	display: block;
	margin-bottom: 1em;
}

.payment_methods i.fa{
	font-size: 2em;
	max-height: 2em;
	margin-bottom: 0.25em;
	display: block;
}
.payment_methods img{
	font-size: 2em;
	max-height: 1em;
	margin-bottom: 0.25em;
	display: block;
}

.footer_redes{
	text-align: right;
}
.footer_redes a{
	font-size: 3em;
	display: inline-block;
	margin-left: 0.5em;
}


#newsletter{
	padding: 2.5%;
	background: var(--orangered);
	color: white;
}
#newsletter>*{
	display: inline-block;
	max-width: 40%;
	float: left;
	margin-right: 1.5rem;
}
#newsletter form input[type="email"]{
	width: 60%;
	display: inline-block;
	margin-bottom: 0.5em;
}
#newsletter form input[type="submit"]{
	background: #666;
}
#newsletter>i.fa{
	color: #FA3;
	font-size: 3em;
	text-shadow: black 0 0 2px,black 0 0 2px,black 0 0 2px,black 0 0 2px,black 0 0 2px,black 0 0 2px,black 0 0 2px,black 0 0 2px,black 0 0 2px,black 0 0 2px;
}
#newsletter>a{
	display: inline-block;
	padding: 0.25em 2em;
	border-radius: 2em;
	background: var(--orange);
	margin-top: 1em;
}
#newsletter>h4{
	margin: 0 1.5em 0 0;
}


#top_cart_total:before{
	content: attr(data-total);
	display: block;
	position: absolute;
	margin-left: 3.5em;
	background: #6BB;
	min-width: 1em;
	height: 1em;
	line-height: 1em;
	font-size: 0.85em;
	font-weight: bold;
	border-radius: 1em;
	padding: 0.25em;
	text-align: center;
}


/* HOME */

.homebanner{
	margin: 1.5em auto;
}
#slider{
	width: 100%;
	overflow: hidden;
}
#slider>div{
	width: 500%;
	position: relative;
	left: 0;
}
#slider>div>a{
	display: block;
	float: left;
	width: 20%;
}
#slider_control{
	position: relative;
	top: -3em;
}
#slider_control i.fa{
	display: inline-block;
	margin: 0 0.5em;
	opacity: 0.4;
}
#slider_control i.fa:hover,#slider_control i.fa.active{
	opacity: 1;
}

#home_categories{
	grid-gap:1em;
}
#home_categories a{
	display: inline-block;
	background: #EEE;
	line-height: 4em;
	font-size: 1.2em;
	padding: 0.5em;
	max-width: 20%;
	flex-grow: 1;
    flex-shrink: 1
    flex-basis: auto;
    text-align: left;
    color: #666;
}
#home_categories img{
	height: 4em;
	float: left;
	margin-right: 1em;
}
#home_categories a:hover{
	opacity: 0.8;
}

#hogar{
	margin-top: 5%;
}
#hogar h1{
	text-align: left;
	margin: 0;
	text-transform: uppercase;
	font-size: 1.5em;
	color: var(--orangered);
}

#hogar_categories{
	grid-gap:1em;
}
#hogar_categories a{
	display: inline-block;
	background: var(--orange) url(imagenes/homebtn2.jpg) left center no-repeat;
	background-size: contain;
	line-height: 4em;
	padding: 0.25em 0.5em 0.25em 2em;
	max-width: 25%;
	flex-grow: 1;
    flex-shrink: 1
    flex-basis: auto;
    text-align: left;
    color: white;
    font-size: 1.5em;
}
#hogar_categories img{
	height: 4em;
	float: right;
}
#hogar_categories a:hover{
	opacity: 0.8;
}

#content .flex{
	-webkit-grid-gap:2%;
	-moz-grid-gap:2%;
	grid-gap:2%;
	width: 100%;
}
.product_item{
	display: block;
	padding: 1%;
	border-radius: 0.5em;
	box-shadow: rgba(0,0,0,0.3) 0 0.5em 1em;
	width: 16%;
	flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    margin-bottom: 2em;
}
.product_item(5n) {
  wrap-after: flex; /* New proposed syntax */
  page-break-after: always; /* CSS 2.1 syntax */
  break-after: always; /* CSS 3 syntax */
}

.product_item:hover{
	box-shadow: var(--orangered) 0 0 0 4px;
}
.product_item img{
	display: block;
	margin: 0 auto;
	max-height: 12em;
}
.product_item>div:first-child{
	height: 12em;
}
.product_item strike{
	color: #AAA;
}
.price{
	color: var(--orangered);
	font-size: 2em;
	margin: 0.5em 0;
}
.price:before{
	content:'$ ';
}
.price:after{
	content:' MXN';
	font-size: 0.5em;
}

#products{
	margin: 5% 0;
}
#products h1{
	text-align: left;
}
.noresults{
	display: block;
	text-align: center;
	font-size: 2em;
	color: #999;
}

#breadcrumbs{
	color: #999;
	margin: 10% 15% 0 15%;
	text-align: left;
}
#breadcrumbs a:hover{
	text-decoration: underline;
}

/* PRODUCTO */

#product{
	text-align: left;
	margin-top: 5%;
}

#product_summary{
	float: right;
	width: 40%;
}
#product_summary h1{
	margin: 0 0 1em 0;
	font-size: 3em;
	text-transform: uppercase;
}
#product_summary h5{
	font-size: 1em;
	color: #CCC;
	font-weight: normal;
}
#product_gallery,#product_data{
	float: left;
	width: 55%;
}

#product_summary .price{
	font-size: 3em;
}

#product_summary form{
	margin: 1em auto;
	display: block;
}
#product_summary form input[type="number"]{
	display: inline-block;
	width: 4em;
}
#product_gallery_menu{
	float: left;
	width: 15%;
}
#product_gallery_menu img{
	box-shadow: #CCC 0 0 0 1px;
}
#product_main_image{
	float: right;
	width: 80%;
}
#product_main_image img{
	box-shadow: #CCC 0 0 0 1px;
}


#product_data{
	margin: 5% 0;
	padding: 1em;
	border-bottom: var(--orange) solid 1px;
	border-top: var(--orange) solid 1px;
}
#product_data p{
	line-height: 2em;
	font-size: 0.85em;
	color: #999;
	text-align: justify;
}

/* CUENTA */

#login,#register{
	padding: 5% 15%;
}
#login h2,#register h2{
	color: var(--orangered);
	text-align: left;
	font-size: 3em;
	text-transform: uppercase;
}
form a{
	text-decoration: underline;
}
form label{
	text-align: left;
}
#register p{
	text-align: left;
	line-height: 1.8em;
}
#register p a{
	text-decoration: underline;
}
#register form{
	text-align: left;
}
.order_list_item{
	text-align: left;
	padding: 1em;
	margin: 1em auto;
	border: var(--orangered) solid 2px;
	border-radius: 0.5em;
}
.order_list_item h4{
	text-transform: uppercase;
	color: var(--orangered);
	margin: 0;
	font-size: 1.5em;
}
.order_list_item button{
	background: var(--orangered);
	color: white;
	padding: 0.25em 1em;
	margin-right: 1em;
	border-radius: 0.25em;
}

/* CARRITO */

#cart{
	padding: 2.5% 15%;
	text-align: left;
}
#cart h2{
	color: var(--orangered);
	text-align: left;
	font-size: 3em;
	text-transform: uppercase;
}
#cart>div{
	margin-bottom: 1em;
	padding: 1em;
	border-radius: 0.5em;
	border:#CCC solid 1px;
}
#cart h4{
	color: var(--orangered);
	margin: 0;
	font-size: 1.5em;
	text-transform: uppercase;
}
#cart .cart_item h4{
	font-size: 1em;
	text-align: right;
}
#cart_total{
	text-align: right;
}
#payment_type_actions h4{
	display: inline-block;
}
#payment_type_actions select{
	padding: 0.5em 2%;
	font: inherit;
	border:#666 solid 1px;
	border-radius: 0.25em;
	float: right;
}
#cart>div a,#cart>div button{
	display: inline-block;
	background: var(--orangered);
	color: white;
	padding: 0.25em 1em;
	margin: 0 0.5em;
	border-radius: 0.25em;
	text-transform: uppercase;
}
#cart>div button{
	float: right;
}
#cart>div button:hover,#cart>div a:hover{
	background: var(--orange);
}

.cart_item{
	font-size: 0.9em;
	text-transform: uppercase;
	padding: 0.5em 0;
	border-bottom: #CCC solid 1px;
}
.cart_item img{
	height: 3em;
	position: relative;
	top: 0.5em;
	float: left;
}
.cart_item>*{
	display: inline-block;
	margin: 0 0.5em;
	min-width: 15%;
}
.cart_item>i.fa{
	color: var(--orangered);
	font-size: 1.25em;
	float: right;
	min-width: 0;
}

.sumary_item{
	padding: 1em;
	border: #CCC solid 1px;
	border-radius: 0.5em;
	margin-bottom: 1em;
}
.sumary_item h4{
	font-size: 1.5em;
	color: var(--orangered);
	text-align: right;
	margin: 0;
}
#modal h2{
	color: var(--orangered);
	margin: 0;
	font-size: 3em;
}


#checkout_section{
	padding: 5% 20%;
	text-align: left;
}
#checkout_section h2{
	color: var(--orangered);
	text-align: left;
	font-size: 3em;
	text-transform: uppercase;
}
#checkout_section>h4{
	color: #095;
	font-size: 3em;
	text-align: center;
	margin: 0.5em auto;
}
.payment_div,#payment_type_container{
	background: #EEE;
	padding: 1.5em;
	border-radius: 0.5em;
	margin-bottom: 1em;
}
#payment_type_container{
	grid-gap:0.5em;
}
#payment_type_container>div{
	padding: 2em 0.5em;
	background: #F8F8F8;
	border-radius: 0.25em;
	text-align: center;
}
.payment_div{
	display: none;
	text-align: center;
}
form #card_fields select{
	width: 35%;
	display: inline-block;
	margin: 0 0.5em 1em 0.5em;
}
#card_fields small{
	position: relative;
	top: -1em;
}
.payment_div button,.payment_div input[type="submit"],.payment_div input[type="button"]{
	margin: 1em 0 0 0;
	width: 100%;
	font-size: 1.5em;
}
.payment_div button{
	background: var(--orangered);
	color: white;
	padding: 0.5em 1em;
	margin-right: 1em;
	border-radius: 0.25em;
}
#payment_type_container{
	line-height: 2em;
	font-size: 1.25em;
}
#payment_type_container i.fa{
	color: var(--orangered);
	font-size: 1.2em;
}
#payment_type_container img{
	height: 1.25em;
	position: relative;
	top: 0.25em;
}






/* MODAL */

#modal{
	background:rgba(0,0,0,0.75);
	position:fixed;
	display:none;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:10;
	text-align:center;
}
#modal>div{
	display:block;
	width:60%;
	min-width: 40vh;
	margin:0;
	background:#FFF;
	text-align: left;
	overflow: auto;
	position: fixed;
	top:0;
	right:0;
	bottom:0;
	box-shadow: #000 0 0 2em -1em;
	animation: reelIn 0.5s 1;
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
}
@keyframes reelIn{
	0%{ right:-50%; }
	100%{ right:0%; }
}
#modal>div>input[type="button"]{
	margin: 2em 0 1em 2em;
	float: left;
}

#modal>div img{
	display:block;
	max-width:100%;
	margin:0 0 0 0;
}
#modal>div>*{
	padding: 1em 5%;
}

#modal>div>h4{
	margin: 0;
	font-size: 2em;
	text-transform: uppercase;
	padding: 1em 5% 0 5%;
	color: #069;
}
#modal>div>small{
	margin: 0;
	padding: 0 5% 2em 5%;
	text-transform: uppercase;
	color: #999;
}
#modal>div>div.event_tile_content{
	color: #666;
	line-height: 1.6em;
	width: 75%;
}
#modal .dateline{
	font-size: 1.5em;
}
#modal .dateline>span{
	display: inline-block;
	color: #343830;
	padding: 0 0.5em;
}

#modal>input:first-child{
	float:right;
	font-size: 4em;
	margin: 0.2em 0.75em;
	color: black;
	opacity: 0.6;
	padding: 0;
	background: none;
	position: relative;
	z-index: 12;
}
#modal>input:first-child:hover{
	opacity: 0.85;
}
#modal div.event_tile_content{
	text-align: justify;
}
#modal div.event_tile_image{
	max-height: 30vh;
	overflow: hidden;
	animation: foldUp 0.5s 1;
	clear: both !important;
	max-width: 100%;
}
#modal div.event_tile_image:hover{
	max-height: 200vh;
	animation: unfoldDown 0.5s 1;
}
@keyframes unfoldDown{
	0%{ max-height: 30vh; }
	100%{ max-height: 200vh; }
}
@keyframes foldUp{
	0%{ max-height: 200vh; }
	100%{ max-height: 30vh; }
}



/* RESPONSIVO */

.mobile_only{
	display:none !important;
}

@media all and (max-width:960px){
	body{
		font-size:16px;
	}
	.mobile_only{
		display:block !important;
	}
	.desktop_only{
		display:none !important;
	}
	.columnas2,.columnas3{
		-webkit-column-count:1;
		-moz-column-count:1;
		column-count:1;
	}
	.columnas4{
		-webkit-column-count:2;
		-moz-column-count:2;
		column-count:2;
	}
	.columnas5{
		-webkit-column-count:3;
		-moz-column-count:3;
		column-count:3;
	}
	.grid2,.grid3,.grid5,.flex{
		display: block;
	}
	
	header{
		height:60px;
	}
	#logo>img{
		height: 25vw;
	}
	nav{
		padding: 0;
		height: 60px;
		margin: 0;
	}
	nav form{
		display: none;
	}
	nav>a{
		font-size: 2.25vw;
		height: 50px;
		padding: 5px;
		text-transform: uppercase;
	}
	#submenu{
		display: none;
	}
	
	#menu_opener{
		width: 50px;
		margin: 5px;
		height: 50px;
	}
	#menu_opener>div{
		width: 40px;
		height: 4px;
		margin-top: 6px;
	}
	#menu_opener>div:first-child{
		margin-top: 12px;
	}
	
	#modal>div{
		width: 80%;
	}
	
	menu{
		top: 60px;
		padding: 0;
	}
	menu>div{
		width: 100%;
		margin: 0;
	}
	
	#menu_sidebar{
		width: auto !important;
		float: none;
		border: none;
	}
	#menu_sidebar>a{
		font-weight: normal;
	}
	#content{
		margin: 80px 0;
	}
	#slider_control{
		top: -2em;
	}
	
	#home_categories a,#hogar_categories a{
		display: block;
		text-align: left;
		margin-bottom: 1px;
		max-width: none;
	}
	
	.product_item{
		font-size: 0.8em;
		width: 42%;
		padding: 2%;
		margin: 2%;
		float: left;
	}
	.product_item h4{
		font-size: 1em;
		margin: 0;
	}
	.product_item .price{
		font-size: 1em;
	}
	
	#newsletter>*{
		display: block;
		width: auto;
		text-align: center;
		float: none;
		max-width: none;
		margin-bottom: 1em;
	}
	footer,footer>div>div,footer>div>div>div{
		text-align: center !important;
	}
	.footer_menu a{
		display: inline-block;
		background: #EEE;
		padding: 0.5em 1em;
		border-radius: 0.5em;
		margin-bottom: 0.5em;
	}
	
	.footer_redes{
		margin-top: 2em;
	}
	.footer_redes a{
		margin: 0 0.5em;
	}
	#breadcrumbs{
		text-align: right;
		width: 65%;
		margin: 0 0 0 30%;
	}
	#product{
		padding: 5%;
	}
	#product_summary,#product_gallery,#product_data{
		width: auto;
		float: none;
		margin-bottom: 2em;
	}
	h1,h2{
		font-size: 2em !important;
		margin: 0 !important;
	}
	#products{
		padding: 5%;
	}
	
	#login,#register,#cart,#checkout_section{
		padding: 5%;
	}
	#cart>div a,#cart>div button{
		float: none !important;
		margin-bottom: 0.5em;
	}
	#checkout_section{
		text-align: center;
	}
	#checkout_section h4{
		font-size: 1.5em;
	}
	#payment_type_container{
		text-align: left;
		line-height: 3em;
	}
}