main { flex-grow:1; background-position:top left; background-repeat:no-repeat; background-size:100% auto; background-attachment:fixed; }

main > h1 { display:table; color:#fff; margin:0; text-transform:uppercase; white-space:nowrap; background-color:#333; }

main > h3 { display:table; font-weight:400; line-height:1em; color:#7c7c7c; background-color:#fff; margin:0; }


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

	main { padding:300px 220px 100px 100px; }
	
	main > h1 { padding:15px 20px; }
	
	main > h3 { font-size:16px; padding:15px 20px; }
	
}


/*
Genre Menu
--------------------------------------------
*/

ul.genres { margin:0; padding:0; list-style:none; }
ul.genres li { display:inline-block; vertical-align:top; color:#fff; background-color:#333; white-space:nowrap; }

ul.genres li a:link,
ul.genres li a:visited,
ul.genres li a:hover,
ul.genres li a:active { display:block; color:#fff; font-weight:200; background-size:0; transition:background 100ms ease-in-out; }

ul.genres > li:nth-child(n) a { background-color:rgba(0,0,0,.1); }
ul.genres > li:nth-child(n+1) a { background-color:rgba(0,0,0,.15); }
ul.genres > li:nth-child(n+2) a { background-color:rgba(0,0,0,.2); }
ul.genres > li:nth-child(n+3) a { background-color:rgba(0,0,0,.25); }

ul.genres li a:hover { background-color:transparent; }

ul.genres ul { display:none; position:absolute; margin:0; padding:0; list-style:none; }
ul.genres li:hover > ul { display:block; }


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

	ul.genres li a { font-size:32px; line-height:36px; white-space:nowrap; padding:10px 20px; }
	
}


/*
Genres
--------------------------------------------
*/


.genre {}

.genre h2 { display:table; color:#fff; background-color:#333; }

.genre ul { margin:0; padding:0; list-style:none; pointer-events:none; }
.genre li { display:inline-block; vertical-align:top; perspective:1000px; pointer-events:all; }

.genre figure { transition:transform 200ms ease-in-out 100ms; transform-style:preserve-3d; }

.genre figure > div { z-index:1; backface-visibility:hidden; transform:rotateX(0deg); }
.genre figure > div:before { position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; content:""; }
.genre figure > div img {}
.genre figure > div .tip { position:absolute; z-index:2; top:0; right:0; text-align:center; background-color:#282828; color:rgba(255,255,255,.8); border-radius:100%; }
.genre figure > div .tip .backorder { position:absolute; z-index:2; top:0; right:0; width:16px; height:16px; border-radius:100%; background-color:#0094de; background-image:url(images/icons/alert.svg); background-position:center; background-repeat:no-repeat; content:""; }
.genre figure > div .tip .exceeds { position:absolute; z-index:2; top:0; right:0; width:16px; height:16px; border-radius:100%; background-color:#0094de; background-image:url(images/icons/alert.svg); background-position:center; background-repeat:no-repeat; content:""; }

.genre figcaption { position:absolute; z-index:2; top:0; left:0; width:100%; height:100%; backface-visibility:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; color:rgba(255,255,255,.8); background-color:#333; transform:rotateY(180deg); }
.genre figcaption .sku { text-transform:uppercase; letter-spacing:normal; }
.genre figcaption h3,
.genre figcaption .dimensions { margin:0; }
.genre figcaption .price {}

.genre figcaption .amount { width:100%; } 

.genre figcaption .amount .add-to-cart { z-index:2; display:table; margin:0 auto; padding:0; letter-spacing:normal; border:0; background:transparent; font-family:'Montserrat', sans-serif; font-weight:400; color:rgba(255,255,255,.8); cursor:pointer; transition:margin 100ms ease-in-out; }
.genre figcaption .amount .add-to-cart:before { position:absolute; z-index:1; top:0; left:50%; width:27px; height:27px; border-radius:100%; margin:0 0 0 6px; background-image:url(images/icons/cart-add.svg); background-color:#282828; background-position:center; background-repeat:no-repeat; content:""; transition:background 100ms ease-in-out; }
.genre figcaption .amount .add-to-cart:hover:before,
.genre figcaption .amount .add-to-cart:focus:before { background-color:#111; }
.genre figcaption .amount .add-to-cart:after { position:absolute; z-index:2; top:0; left:50%; width:30px; height:29px; margin:17px 0 0 -17px; background-image:url(images/icons/cart.svg); background-position:center; background-repeat:no-repeat; content:""; }

.genre figcaption .amount > div { /*position:absolute; z-index:1; top:0; left:0; width:100%;*/ display:table; margin:0 auto; letter-spacing:normal; white-space:nowrap; }

.genre figcaption .amount input[type=number] { display:table; margin:0 auto; border:0; border-radius:100%; background-color:#282828; color:#fff; font-family:'Montserrat', sans-serif; font-weight:200; text-align:center; }
.genre figcaption .amount input[type=number]::-webkit-inner-spin-button, 
.genre figcaption .amount input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.genre figcaption .amount input[type=number] { -moz-appearance:textfield; }

.genre figcaption .amount .remove { position:absolute; top:0; right:0; width:18px; height:18px; border:0; padding:0; border-radius:100%; background-image:url(images/icons/cart-remove.svg); background-position:center; background-repeat:no-repeat; background-color:#1d1d1d; cursor:pointer; transition:background 100ms ease-in-out; }
.genre figcaption .amount .remove:hover,
.genre figcaption .amount .remove:focus { background-color:#f40a57; }

.genre figcaption .amount .backorder { position:absolute; z-index:2; top:0; left:0; width:16px; height:16px; border-radius:100%; background-color:#0094de; background-image:url(images/icons/alert.svg); background-position:center; background-repeat:no-repeat; content:""; }
.genre figcaption .amount .exceeds { position:absolute; z-index:2; top:0; left:0; width:16px; height:16px; border-radius:100%; background-color:#0094de; background-image:url(images/icons/alert.svg); background-position:center; background-repeat:no-repeat; content:""; }

.genre figcaption .out-of-stock { z-index:2; display:table; margin:0 auto; padding:0; letter-spacing:normal; border:0; background:transparent; font-family:'Montserrat', sans-serif; font-weight:400; color:rgba(255,255,255,.8); transition:margin 100ms ease-in-out; }
.genre figcaption .out-of-stock:before { position:absolute; z-index:1; top:0; left:50%; width:16px; height:16px; border-radius:100%; margin:3px 0 0 6px; background-image:url(images/icons/out-of-stock.svg); background-position:center; background-repeat:no-repeat; content:""; transition:background 100ms ease-in-out; }
.genre figcaption .out-of-stock:after { position:absolute; z-index:2; top:0; left:50%; width:30px; height:29px; margin:11px 0 0 -17px; background-image:url(images/icons/cart.svg); background-position:center; background-repeat:no-repeat; content:""; opacity:.3; }



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

	.genre { margin-top:100px; }
	
	.genre h2 { font-size:32px; line-height:36px; white-space:nowrap; padding:10px 20px; margin:0; }
	
	.genre ul { max-width:600px; }
	.genre ul li { width:33.3333%; }
	
	.genre ul li:nth-child(3n-2) { z-index:3; }
	.genre ul li:nth-child(3n-1) { z-index:2; }
	.genre ul li:nth-child(3n) { z-index:1; }
	/*.genre ul li:hover { z-index:4; }*/
	
	/*.genre ul li:hover figure, 
	.genre ul li:focus figure*/
	.genre ul li.flip figure { transition:transform 200ms ease-in-out 0ms; transform:rotateY(180deg); }
	
	.genre figure > div .tip { top:-10px; right:-10px; width:50px; height:50px; font-size:24px; line-height:50px; }
	
	.genre ul li:nth-child(5n-4) figure > div:before { background-color:rgba(0,0,0,.03); }
	.genre ul li:nth-child(5n-3) figure > div:before { background-color:rgba(0,0,0,.06); }
	.genre ul li:nth-child(5n-2) figure > div:before { background-color:rgba(0,0,0,.09); }
	.genre ul li:nth-child(5n-1) figure > div:before { background-color:rgba(0,0,0,.12); }
	.genre ul li:nth-child(5n) figure > div:before { background-color:rgba(0,0,0,.15); }
	
	.genre figure > div .tip .backorder { top:-2px; right:0; }
	.genre figure > div .tip .exceeds { top:-2px; right:0; }
	
	.genre figcaption .sku { font-size:12px; line-height:14px; margin-bottom:20px; }
	
	.genre figcaption h3  { font-size:14px; line-height:18px; letter-spacing:-0.01em; }
	.genre figcaption .dimensions { font-size:12px; line-height:18px; margin-bottom:15px; }
	
	.genre figcaption .price { margin-bottom:15px; }
	
	.genre figcaption .amount { height:70px; overflow:hidden; }
	
	.genre figcaption .amount.add .add-to-cart { margin-top:-70px; }
	.genre figcaption .amount .add-to-cart { font-size:10px; line-height:15px; padding-top:55px; }
	
	.genre figcaption .amount { font-size:10px; line-height:15px; } 
	.genre figcaption .amount input[type=number] { width:50px; height:50px; font-size:24px; line-height:50px; margin-bottom:5px; }

	.genre figcaption .amount .remove { right:50%; margin-right:-30px; } 
	
	.genre figcaption .amount .backorder { top:1px; left:50%; margin-left:-30px; }
	.genre figcaption .amount .exceeds { top:1px; left:50%; margin-left:-30px; }
	
	.genre figcaption .out-of-stock { font-size:10px; line-height:15px; padding-top:49px; }

}