body.shop { background-color:#f2f2f2; }

ul.products { z-index:2; margin:0; padding:0; list-style:none; background-color:#f2f2f2; }
ul.products:after { display:table; clear:both; content:""; }

body.shop ul.products { background-color:transparent; }

ul.products li { float:left; display:block; }
ul.products li:hover { z-index:2; }

ul.products li a { display:block; transition:opacity 100ms ease-in-out; }
/*ul.products:hover li a { opacity:.2; }*/
ul.products.hover li a { opacity:.2; }
ul.products li a:hover { opacity:1; }

ul.products li img.lazy { position:absolute; top:0; left:0; opacity:0; }
ul.products li img { opacity:1; transition:opacity 100ms ease-in-out; }

ul.products li figure { background-color:rgba(0,0,0,.1); }

ul.products figcaption { position:absolute; bottom:0; left:0; background-color:#333; opacity:0; pointer-events:none; }
ul.products figcaption h4 { color:#fff; margin:0; text-transform:uppercase; white-space:nowrap; }
ul.products a:hover figcaption { opacity:1; }

ul.genres { z-index:2; margin:0; padding:0; list-style:none; background-color:#f2f2f2; }

ul.genres li { display:inline-block; vertical-align:top; background-color:#333; }
ul.genres li a { display:block; padding-top:66.6666%; transition:background 100ms ease-in-out; }
ul.genres li a h4 { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; color:#fff; text-transform:uppercase; text-align:center; margin:0; }
ul.genres li a:hover,
ul.genres li a:focus { background-size:0; background-color:rgba(34,34,34,1) !important; }



@media screen and (min-width:1000px) {

	body.shop main { margin-top:300px; }
	
	ul.products { margin-left:100px; width:calc(100% - 320px); margin-bottom:100px; }
	
	ul.products li:first-child figcaption { bottom:40px; left:-30px; }
	ul.products li:first-child figcaption h4 { font-size:32px; line-height:36px; padding:10px 20px; }
	
	ul.products figcaption { bottom:20px; left:-20px; }
	ul.products figcaption h4 { font-size:16px; line-height:18px; padding:7px 12px; }
		
	ul.genres { margin-left:100px; width:calc(100% - 320px); margin-bottom:100px; }
	ul.genres li a h4 { font-size:16px; line-height:18px; padding:0 20px; }

}


@media screen and (min-width:1400px) {
	
	.featured-products + ul.products { margin-top:-100px; }
	
	ul.products li { width:16.6666%; }
	ul.products li:first-child { width:49.9999%; }
	ul.products li:nth-child(11) { clear:both; }
	
	ul.genres li { width:20%; }
	ul.genres li a h4 { padding:0 40px; }
	
	ul.genres li:nth-child(6n-5) a { background-color:rgba(34,34,34,.15); }
	ul.genres li:nth-child(6n-4) a { background-color:rgba(34,34,34,.3); }
	ul.genres li:nth-child(6n-3) a { background-color:rgba(34,34,34,.45); }
	ul.genres li:nth-child(6n-2) a { background-color:rgba(34,34,34,.6); }
	ul.genres li:nth-child(6n) a { background-color:rgba(34,34,34,.75); }
	
}


@media screen and (min-width:1000px) and (max-width:1399px)  {
	
	.featured-products + ul.products { margin-top:-100px; }
	
	ul.products li { width:20%; }
	ul.products li:first-child { width:60%; }
	ul.products li:nth-child(8) { clear:both; }
	
	ul.genres li { width:25%; }
	ul.genres li a h4 { padding:0 30px; }
	
	ul.genres li:nth-child(5n-4) a { background-color:rgba(34,34,34,.15); }
	ul.genres li:nth-child(5n-3) a { background-color:rgba(34,34,34,.3); }
	ul.genres li:nth-child(5n-2) a { background-color:rgba(34,34,34,.45); }
	ul.genres li:nth-child(5n) a { background-color:rgba(34,34,34,.6); }
	
}


@media screen and (min-width:750px) and (max-width:999px) {
	
	
	
}


@media screen and (max-width:749px) {
	
	
	
}


@media screen and (max-width:359px) {
	
	
	
}