@charset "UTF-8";

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////// GLOBAL /// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* ---------------------------------------------------------------------- RESET --- */
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,input,textarea,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{outline:none;margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}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:"";content:none;}ins,a{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}*{-webkit-tap-highlight-color:rgba(0,0,0,0);}

/* ----------------------------------------------------------------------- FONT --- */
@font-face {
    font-family: 'courier_sans';
    src: url('../font/courier_sans.eot');
    src: url('../font/courier_sans.eot?#iefix') format('embedded-opentype'),
         url('../font/courier_sans.woff') format('woff'),
         url('../font/courier_sans.ttf') format('truetype'),
         url('../font/courier_sans.svg#courier') format('svg');
    font-style: normal;
    font-weight: 400;
    text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- APPLICATION --- */
html,
body {
	height: 100%;
	min-height: 320px;
	-webkit-overflow-scrolling: touch;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body {
	margin: 0;
	font-family: 'courier_sans';
	font-weight: 400;
	font-size: 16px;
	background-color: #232323;
	color: #ffffff;
}
body.artist,
body.release {
	background-color: #e9e9e9;
	color: #232323;
}



/* //////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////// HEADER /// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* --------------------------------------------------------------------- HEADER --- */
header {
	z-index: 4;
	position: fixed;
	top: 0;
	box-sizing: border-box;
	width: 100%;
	padding: 16px 0;
	pointer-events: none;
	/* transition: padding 200ms linear 0s; */
}
@media screen and (min-width: 720px) {
	body.min header { padding: 16px 0; }
}
@media screen and (min-width: 1200px) {
	header { padding: 1.333% 0; }
}
@media screen and (min-width: 2400px) {
	header { padding: 32px 0; }
}

/* --------------------------------------------------------------------- TOGGLE --- */
header .toggle {
	z-index: 3;
	position: absolute;
	top: 12.5px;
	right: 12.5px;	
	display: block;
	font-size: 2em;
	line-height: 1em;
	color: rgba(255,253,255,0.3);
	cursor: pointer;
	pointer-events: all;
}
header .toggle:hover { color: rgba(255,255,255,1); }
body.nav header .toggle { color: #232323; }
header .toggle:before { content: '☰'; }
@media screen and (min-width: 720px) {
	header .toggle { display: none; }
	body.nav header .toggle { display: block; }
}

/* ----------------------------------------------------------------------- LOGO --- */
header .logo {
	z-index: 2;
	overflow: auto;
	display: block;	
	position: relative;
	width: 66.667%;
	height: auto;
	max-height: 320px;
	max-width: 800px;
	margin: 0 16px;
	pointer-events: all;
	background-position: top;
	background-size: 100% 300%;
	background-image: url(../gfx/logo.png);
	background-repeat: no-repeat;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	/* transition: width 200ms linear 0s; */
}
body.nav header .logo { background-position: bottom; }
header .logo img { 
	float: left;
	width: 100%; 
	border: 0;  
	pointer-events: none;
	opacity: 0;
}
@media screen and (min-width: 720px) {
	header .logo { width: 480px; }
	body.min header .logo { 
		width: 315px; 
		max-width: 66.667%;
	}
}
@media screen and (min-width: 1200px) {
	header .logo { margin: 0 1.333%; }
}
@media screen and (min-width: 1440px) {
	header .logo { width: 33.333%; }
}
@media screen and (min-width: 2400px) {
	header .logo {
		margin: 0 32px;
		width: 800px;
	}
}
header .logo .copyright {
	position: absolute;
	top: 0;
	left: 0;
	width: 31.0625%;
	height: 77.65625%;
	-ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
	pointer-events: none;
	opacity: 0;
	/* transition: opacity 0s linear 0s; */
}
@media screen and (min-width: 720px) {
	header .logo .copyright { 
		opacity: 1; 
		/* transition: opacity 200ms linear 200ms; */
	}
	header .logo .copyright .position {
		display: block;
		position: absolute;
		top: 50%;
		left: 16px;
		margin-top: -12px;
		font-size: 12px;
		line-height: 1em;
		color: #232323;
	}
	body.min header .logo .copyright { 
		opacity: 0; 
		/* transition: opacity 0s linear 0s; */
	}
}

/* ------------------------------------------------------------------------ NAV --- */
header nav {
	z-index: 1;
	position: absolute;
	display: none;
	padding-left: 16px; 
	pointer-events: none;
	/* transition: width 200ms linear 0s; */
}
header nav:hover { pointer-events: all;	}
body.nav header nav {
	position: relative;
	display: block;
	margin-top: 76px;
	margin-left: 16px;
	width: calc(100% - 48px) !important;
}
@media screen and (min-width: 720px) {
	header nav {
		bottom: 0; 
		right: 0;
		display: block;
		width: calc(100% - 544px);
		margin: 16px;
	}
	body.min header nav { 
		max-width: calc(100% - 379px);
		width: 480px;
		margin-bottom: 16px;
	}
}
@media screen and (min-width: 1024px) {
	header nav { 
		right: 0;
		width: 480px; 
	}
}
@media screen and (min-width: 1200px) {
	header nav { margin: 1.333%; }
}
@media screen and (min-width: 1440px) {
	header nav { width: 33.333% !important; }
}
@media screen and (min-width: 2400px) {
	header nav {
		margin: 32px;
		width: 800px !important;
	}
}
body.nav header nav:before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
}
header nav a {
	position: relative;
	display: block;
	margin-left: -16px;
	font-size: 16px;
	line-height: 1.3125em;
	color: #ffffff;
	opacity: 0.7;
	/* transition: opacity 400ms ease-in; */
	/* transition: font 300ms linear; */
	pointer-events: all;
}
body.nav header nav a {
	padding-bottom: 1.3125em;
	pointer-events: all; 
}
body.nav nav a,
body.artist nav a,
body.release nav a { color: #232323; }
body.index nav a { opacity: 0.3; }
body.index header nav:hover a { 
	opacity: 0.7; 
	/* transition: opacity 200ms ease-out; */
}
header nav a:hover { 
	opacity: 1 !important; 
	/* transition: opacity 200ms ease-out; */
}
header nav a.select { opacity: 1; }
body.nav header nav a { opacity: 1 !important; }
header nav a:before {
	content: '';
	display: inline-block;
	margin-bottom: 0.25em;
	width: 10px;
	height: 1px;
	background-image: url(../gfx/nav_light.png);
	background-repeat: repeat-x;
	background-position: center;
	background-size: 1px;
}
body.nav header nav a:before,
body.artist header nav a:before,
body.release header nav a:before { background-image: url(../gfx/nav_dark.png); }
header nav a.select:before {
	display: table-cell;
	width: 100%;
	height: 2px;
}
header nav a:after {
	content: attr(data-label);
	display: inline-block;
	padding-left: 10px;
	pointer-events: all;
}
header nav a.select:after { display: table-cell; }



/* //////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////// MAIN /// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* ----------------------------------------------------------------------- MAIN --- */
main {
	z-index: 1;
	position: relative;
	display: block;
	min-height: 100%;
	overflow: hidden;
	box-sizing: border-box;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
main:before {
	z-index: 3;
	content: '';
	position: fixed;
	top: 0;
	display: block;	
	width: 100%;
	height: 0;
	padding-bottom: calc(26.667% + 32px);
	background-color: #232323; 
	/* transition: all 200ms linear 0s; */
}
body.artist main:before,
body.release main:before { background-color: #e9e9e9; }
main:after {
	z-index: 2;
	content: '';
	position: fixed;
	top: 0;
	display: block;	
	width: 100%;
	height: 0;
	padding-bottom: 16px;
	margin-top: calc(26.667% + 32px);
	background: -moz-linear-gradient(top, rgba(35,35,35,1) 0%, rgba(35,35,35,0) 100%);
	background: -webkit-linear-gradient(top, rgba(35,35,35,1) 0%,rgba(35,35,35,0) 100%); 
	background: linear-gradient(to bottom, rgba(35,35,35,1) 0%,rgba(35,35,35,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#232323', endColorstr='#00232323', GradientType=0 );
	/* transition: all 200ms linear 0s; */
}
body.artist main:after,
body.release main:after { 
	background: -moz-linear-gradient(top, rgba(233,233,233,1) 0%, rgba(233,233,233,0) 100%);
	background: -webkit-linear-gradient(top, rgba(233,233,233,1) 0%,rgba(233,233,233,0) 100%); 
	background: linear-gradient(to bottom, rgba(233,233,233,1) 0%,rgba(233,233,233,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#00e9e9e9', GradientType=0 );
}
@media screen and (min-width: 720px) {
	main:before { padding-bottom: 208px; }
	body.artist main:before,
	body.release main:before { padding-bottom: 240px; }
	body.min main:before { padding-bottom: 142px; }
	body.artist.min main:before,
	body.release.min main:before { padding-bottom: 158px; }
	main:after { 
		margin-top: 208px;  
		padding-bottom: 32px;
	}
	body.artist main:after,
	body.release main:after { margin-top: 240px; }
	body.min main:after { 
		margin-top: 142px; 
		padding-bottom: 16px;
	}
	body.artist.min main:after,
	body.release.min main:after { margin-top: 158px; }
}
@media screen and (min-width: 1200px) {
	main { padding-bottom: calc(1.333% - 16px); }
	main:before { padding-bottom: calc(192px + 1.333%); }
	body.artist main:before,
	body.release main:before { padding-bottom: calc(176px + 5.332%); }
	main:after { 
		margin-top: calc(192px + 1.333%); 
		padding-bottom: 2.666%;
	}
	body.artist main:after,
	body.release main:after { margin-top: calc(176px + 5.332%); }
}
@media screen and (min-width: 1440px) {
	main:before { padding-bottom: 14.666%; }
	body.artist main:before,
	body.release main:before { padding-bottom: 17.333%; }
	main:after { margin-top: 14.666%; }
	body.artist main:after,
	body.release main:after { margin-top: 17.333%; }
}
@media screen and (min-width: 2400px) {
	main { padding-bottom: 16px;	 }
	main:before { padding-bottom: 352px; }
	body.artist main:before,
	body.release main:before { padding-bottom: 416px; }
	main:after { 
		margin-top: 352px ;
		padding-bottom: 64px;
	}
	body.artist main:after,
	body.release main:after { margin-top: 416px; }
}

/* -------------------------------------------------------------------- FEATURE --- */
.feature {
	z-index: 1;
	position: relative;
	display: block;
	margin: 16px;
	margin-bottom: 0;
	margin-top: calc(26.667% + 48px);
	/* transition: margin-top 0s linear 0s; */
}
@media screen and (min-width: 720px) {
	.feature { 
		float: right;
		clear: right;
		width: 496px; 
		margin-top: 240px;
		/* transition: margin-top 200ms linear 0s; */
	}
	body.min .feature { margin-top: 158px; }
}
@media screen and (min-width: 1200px) {
	.feature { 
		margin-top: calc(176px + 5.332%);
		margin-right: 1.333%; 
	}
}
@media screen and (min-width: 1440px) {
	.feature { 
		width: calc(33.333% + 16px); 
		margin-top: 17.333%;
	}
}
@media screen and (min-width: 2400px) {
	.feature { 
		margin-top: 416px;
		margin-right: 32px;
		width: 816px;
	}
}
.feature img { 
	width: 100%; 
	pointer-events: none;
}

/* ---------------------------------------------------------------------- BLOCK --- */
section,
article,
footer {
	z-index: 1;
	position: relative;
	margin: 16px;
	margin-top: 0;
	line-height: 1.5em;
	/* transition: margin-top 0s linear 0s; */
}
@media screen and (min-width: 720px) {
	section,
	article,
	footer { 
		float: right;
		clear: right;
		max-width: calc(60% - 16px);
		width: 496px; 
		/* transition: margin-top 200ms linear 0s; */
	}
	section:first-of-type,
	article:first-of-type { margin-top: 240px; }
	body.artist section:first-of-type,
	body.release section:first-of-type { margin-top: 272px; }
	body.artist .banner ~ section:first-of-type,
	body.release .banner ~ section:first-of-type { margin-top: 32px; }
	body.min section:first-of-type,
	body.min article:first-of-type { margin-top: 158px; }
	
}
@media screen and (min-width: 1200px) {
	section,
	article,
	footer { margin-right: 1.333%; }
	section:first-of-type,
	article:first-of-type { margin-top: calc(192px + 4%); }
	body.artist section:first-of-type,
	body.release section:first-of-type { margin-top: calc(176px + 8%); }
}
@media screen and (min-width: 1440px) {
	section,
	article,
	footer { width: calc(33.333% + 16px); }
	section:first-of-type,
	article:first-of-type { margin-top: 17.333%; }
	body.artist section:first-of-type,
	body.release section:first-of-type { margin-top: 20%; }
}
@media screen and (min-width: 2400px) {
	section,
	article,
	footer { 
		margin-right: 32px;
		width: 816px;
	}
	section:first-of-type,
	article:first-of-type { margin-top: 416px; }
	body.artist section:first-of-type,
	body.release section:first-of-type { margin-top: 480px; }
}
article {
	margin-bottom: 32px;
	padding-top: 16px;
	border-top: solid 1px rgba(255,255,255,0.1);
}
article:last-child {
	margin-bottom: 16px;
}
article[data-time]:after {
	content: attr(data-time);
	position: absolute;
	top: 8px;
	right: 0;
	font-family: 'courier_sans';
	font-size: 12px;
	font-style: normal;
}
@media screen and (min-width: 2400px) {
	article[data-time]:after {
		font-size: 14px;
	}
}
article img { 
	width: 100%; 
	margin-bottom: 16px;
}
article section {
	width: 100%;
	margin: 0 !important;
	max-width: none;
}
article section .track hr {
	border-bottom: solid 1px rgba(255,255,255,0.1);
}


/* //////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////// COMPONENT /// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* ------------------------------------------------------------------------ TAB --- */
.tab {
	z-index: 4;
	position: fixed;
	top: 0;
	right: 0;
	display: none;
	margin: 16px;
	width: 126px;
	height: 126px;
	color: #ffffff;
	-ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	pointer-events: none;
	/* transition: opacity 400ms ease-in; */
	opacity: 0.3;
}
body.min .tab { display: none; }
.feature:hover ~ .tab { 
	/* transition: opacity 200ms ease-out; */
	opacity: 1;	
}
@media screen and (min-width: 720px) {
	.tab { 
		display: block;
		margin-top: 82px; 
	}
}
@media screen and (min-width: 1200px) {
	.tab { 
		margin-top: calc(66px + 1.333%);
		margin-right: 1.333%;
	}
}
@media screen and (min-width: 1440px) {
	.tab { margin-top: calc(14.667% - 126px); }
}
@media screen and (min-width: 2400px) {
	.tab { 
		margin-right: 32px; 
		margin-top: 226px;
	}
} 
.tab .position {
	position: absolute;
	bottom: 0;
	left: 0;	
}

/* --------------------------------------------------------------------- BANNER --- */
.banner {
	z-index: 4;
	position: relative;
	display: none;
	width: 100%;
	height: calc(100vh - 1.5px);
	background-color: #E9E9E9;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-transform: translateZ(0);
   	-ms-transform: translateZ(0);
   	transform: translateZ(0);  
}
.banner:hover { cursor: pointer; }
@media screen and (min-width: 720px) {
	.banner { display: block; }
}
.banner:before {
	content: "\220f ";
	position: absolute;
	bottom: 16px;
	left: 0;
	right: 0;
	display: block;
	margin: 0 auto;
	width: 100px;
	height: 100px;
	font-size: 32px;
	text-align: left;
	line-height: 100px;
	-ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	opacity: 0.3;
	/* transition: opacity 400ms ease-in; */
}
.banner:hover:before {
	opacity: 1;
	/* transition: opacity 200ms ease-out; */
}
@media screen and (min-width: 720px) {
	.banner:after {
		content: '';
		position: absolute;
		left: 0;
		bottom: -32px;
		display: block;
		height: 0;
		padding-bottom: 32px;
		width: calc(40% - 32px); 
		min-width: calc(100% - 544px);
		margin-left: 16px;
		background: -moz-linear-gradient(top, rgba(233,233,233,1) 0%, rgba(233,233,233,0) 100%);
		background: -webkit-linear-gradient(top, rgba(233,233,233,1) 0%,rgba(233,233,233,0) 100%); 
		background: linear-gradient(to bottom, rgba(233,233,233,1) 0%,rgba(233,233,233,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#00e9e9e9', GradientType=0 );
	}
}
@media screen and (min-width: 1200px) {
	.banner:after {
		bottom: -2.667vw;
		width: calc(98.667% - 528px);
		min-width: inherit;
		margin-left: 1.333%;
		padding-bottom: 2.666%;
	}
}
@media screen and (min-width: 1440px) {
	.banner:after { width: calc(64% - 32px); }
}
@media screen and (min-width: 2400px) {
	.banner:after { 
		bottom: -64px;
		width: calc(100% - 896px);
		margin-left: 32px; 
		padding-bottom: 64px;
	}
}
.banner:last-child:after { content: none; }

/* -------------------------------------------------------------------- HEADING --- */
h1,
h2 {
	-webkit-touch-callout: default;
	-webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;	
}
h1 {
	z-index: 2;
	position: relative;
	box-sizing: border-box;
	display: block;
	margin: 16px;
	margin-top: calc(26.667% + 48px);
	font-family: "Hoefler Text A", "Hoefler Text B";
	font-size: 40px;
	font-style: italic;
	font-weight: 400;
	text-rendering: optimizeLegibility;
	pointer-events: none;
	/* transition: margin-top 200ms linear 0s; */
}
@media screen and (min-width: 720px) {
	h1 { 
		z-index: 5;
		position: fixed;
		top: 0;
		margin-top: 240px;
		width: calc(100% - 32px);
		padding-right: 60%;
	}
	body.min h1 { margin-top: 158px; }
}
@media screen and (min-width: 1200px) {
	h1 { 
		width: calc(100% - 2.666%);
		margin-top: calc(192px + 4%); 
		margin-left: 1.333%; 
	}
}
@media screen and (min-width: 1440px) {
	h1 { margin-top: 17.333%; }
}
@media screen and (min-width: 2400px) {
	h1 { 
		width: calc(100% - 64px);
		margin-top: 416px;
		margin-left: 32px;
	}
}
body.artist h1,
body.release h1 {
	border-top: solid rgba(35,35,35,0.5) 1px;
	padding-top: 8px;
}
body.release h1[data-artist]:before {
	content: attr(data-artist);	
	display: block;
	margin-bottom: 8px;
	font-family: 'courier_sans';
	font-size: 16px;
	font-style: normal;
	letter-spacing: 0px;
}
body.release h1[data-release]:after {
	content: attr(data-release);
	position: absolute;
	top: 8px;
	right: 0;
	font-family: 'courier_sans';
	font-size: 12px;
	font-style: normal;
}
h2 {
	display: inline;
	margin-bottom: 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid #ffffff;
	line-height: 1.3125em;
}
body.artist h2,
body.release h2 {
	color: #232323;
	border-color: #232323;
}
h2:after { 
	content:'';
	display: block;
	margin-bottom: 20px;
}

/* ----------------------------------------------------------------------- TEXT --- */
section p,
article p { 
	margin-bottom: 1.3125em;	 
	-webkit-touch-callout: default;
	-webkit-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}
section p:last-child,
article p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------- PREVIEW --- */
.preview {
	width: 160px;
	height: 160px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
@media screen and (min-width: 1200px) {
	.preview { 
		width: calc(128px + 2.667vw);
		height: calc(128px + 2.667vw);
	}
}
@media screen and (min-width: 2400px) {
	.preview { 
		width: 192px;
		height: 192px;
	}
}

/* ----------------------------------------------------------------------- ITEM --- */
.item {
	position: relative;
	display: block;
	border-top: solid 1px;
	padding-bottom: 16px;
	height: 63px;
	pointer-events: all; 
	cursor: pointer;
}
.item:hover { cursor: pointer; }
.item:not(:hover) { 
	border-color: #ffffff; 
	color: #ffffff !important;
}
@media screen and (min-width: 1200px) {
	.item { padding-bottom: calc(1.333vw); }
}
@media screen and (min-width: 2400px) {
	.item { padding-bottom: 32px !important; }
}
.item:after {
	content: "\220f ";
	position: absolute;
	top: 8px;
	right: 0;
	color: #ffffff;
}
@media screen and (min-width: 720px) {
	.item[data-release]:before {
		content: attr(data-release);
		position: absolute;
		top: 8px;
		right: 0;
		font-family: 'courier_sans';
		font-size: 12px;
		font-style: normal;
	}
	body.catalogue .item:after { top: 29px; }
}
@media screen and (min-width: 2400px) {
	.item[data-release]:before { font-size: 14px; }
}
.item .artist,
.item .title {
	z-index: 2;
	position: relative;
	color: #ffffff;
}
.item .artist { padding-top: 8px; }
.item .preview { 
	display: none; 
	right: 100%;
}
@media screen and (min-width: 720px) {
	.item .preview {
		z-index: 1;
		position: absolute;
		top: -1px;
		margin-right: 16px;
		display: none;
	}
	.item:hover .preview { display: block; }
	.item:nth-last-child(-n+1) .preview {
		top: auto;
		bottom: 0;
	}
	.item:first-child .preview {
		top: -1px;
		bottom: auto;
	}
}
@media screen and (min-width: 1200px) {
	.item .preview { margin-right: 1.333vw; }
}
@media screen and (min-width: 2400px) {
	.item .preview { margin-right: 32px; }
}

/* ---------------------------------------------------------------------- ASIDE --- */
aside {
	z-index: 1;
	position: relative;
	box-sizing: border-box;
	margin: 16px;
	line-height: 1.3125em;
	-webkit-touch-callout: default;
	-webkit-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}
@media screen and (min-width: 720px) {
	aside { 
		position: fixed;
		left: 0;
		bottom: 0;
		width: calc(40% - 32px); 
		min-width: calc(100% - 544px);
	}
}
@media screen and (min-width: 1200px) {
	aside {
		width: calc(98.667% - 528px);
		min-width: inherit;
		margin: 1.333%;
		padding-left: calc(144px + 2.667vw);
	}
}
@media screen and (min-width: 1440px) {
	aside { width: calc(64% - 32px); }
}
@media screen and (min-width: 2400px) {
	aside { 
		width: calc(100% - 896px);
		margin: 32px; 
		padding-left: 208px;
	}
}
aside .preview {
	margin-right: 16px;
	margin-bottom: 16px;
}
@media screen and (min-width: 720px) {
	aside .preview {
		position: absolute;
		top: -176px;
		left: 0;
		margin-bottom: 0;
	}
    body.artist aside .preview { display: none; }
}
@media screen and (min-width: 1200px) {
	aside .preview {
		top: auto;
		bottom: 0;
	}
}
aside a { 
	display: block; 
	color: #232323; 
}
aside a:hover { cursor: pointer; }
aside a:after { 
	content: " \220f"; 
	color: #232323; 
}
aside a:first-of-type:before { display: none; }
@media screen and (min-width: 720px) {
	aside a:before { display: none; }
}
@media screen and (min-width: 1200px) {
	aside a { display: inline; }
	aside a:before { 
		content: '/ ';
		display: inline; 
	}
}
body.artist aside {
	padding-left: 0;
}

/* -------------------------------------------------------------------- RELEASE --- */
a.release {
	position: relative;
	display: block;
	border-bottom: solid 1px;
	margin-bottom: 16px;
	padding-bottom: 16px;
	min-height: 47px;
	pointer-events: all; 
	cursor: pointer;
	-webkit-touch-callout: default;
	-webkit-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;	
}
a.release:last-child { margin-bottom: 0; }
a.release:hover { cursor: pointer; }
a.release:not(:hover) { 
	border-color: rgba(35,35,35,0.1); 
	color: #232323;
}
@media screen and (min-width: 1200px) {
	a.release { padding-bottom: calc(1.333vw); }
}
@media screen and (min-width: 2400px) {
	a.release { padding-bottom: 32px !important; }
}
a.release:after {
	content: "\220f ";
	position: absolute;
	top: 29px;
	right: 0;
	color: #232323;	
	pointer-events: all; 
}
@media screen and (min-width: 720px) {
	a.release[data-release]:before {
		content: attr(data-release);
		position: absolute;
		top: 8px;
		right: 0;
		font-family: 'courier_sans';
		font-size: 12px;
		font-style: normal;
	}
	a.release:not(:hover):before  { color: #232323;	}
}
@media screen and (min-width: 2400px) {
	a.release[data-release]:before {
		font-size: 14px;
	}
}
a.release .artist,
a.release .title {
	z-index: 2;
	position: relative;
	color: #232323;
}
a.release .artist { 
	display: inline-block; 
	padding-top: 8px;
}
a.release .title { width: 75%; }

/* ---------------------------------------------------------------------- TRACK --- */
.track {
	pointer-events: none;
	position: relative;
	overflow: hidden;
	display: block;
	padding-bottom: 23px;
	line-height: 1;
	-webkit-touch-callout: default;
	-webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;	
}
.track[data-audio]:before {
	content: '';
	pointer-events: all;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 24px;
	display: block; 
	cursor: pointer;
}
.track hr {
	position: relative;
	top: 7px;
	border: 0;
	margin: 0;
	border-bottom: solid 1px rgba(35,35,35,0.1);
	width: 100%;
}
.track .number { 
	width: 40px; 
	-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;	
}
.track .number:after { content: '/ '; }
.track .title { pointer-events: all; }
.track[data-audio] .title:hover { cursor: pointer; }
.track * {
	float: left;
	width: calc(100% - 40px);
}
.track audio {
	display: none;
}
.track .control {
	pointer-events: all;
	display: block;
	position: absolute;
	right: -7px;
	width: 24px;
	height: 24px;
	cursor: pointer;
	background-image: url('../gfx/control.svg');
	background-size: 48px 72px;
	background-color: rgba(35,35,35,0.1);
}
.track .control:before {
	content: '';
	z-index: -1;
	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	margin: 1px 0 0 1px;
}
.track .control[data-action="play"] {
	background-position: top left;
}
.track .control[data-action="pause"] {
	background-position: top right;
}
.track.load .control {
	display: none;
}
.track.load:after {
    position: absolute;
    right: -7px;
    border-radius: 100%;
    display: block;
    width: 24px;
    height: 24px;
    content: '';
    transform-origin: 12px 12px;
    animation: rotate 1s linear infinite;
    background-image: url('../gfx/spinner.svg');
    background-size: 48px 24px;
    background-position: left;
}
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.track .progress {
	pointer-events: all;
	position: absolute;
	z-index: 1;
	bottom: 16px;
	left: 0;
	width: 100%;
	height: 1px;
	cursor: pointer;
}
.track .progress:before {
	content: '';
	position: absolute;
	left: 0;
	display: block;
	height: 12px;
	top: 0;
	transform: translate(0, -5px);
	width: 100%;
	background-color: transparent;
}
.track .progress .bar {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
}

article section .track.load:after {
	background-position: right;
}
article section .track .control {
	background-color: rgba(255,255,255,.1);
}
article section .track:hover .control:before,
article section .track audio + .control:before,
article section .track .progress .bar { background-color: white; }
article section .track .control[data-action="play"] {
	background-position: bottom left;
}
article section .track .control[data-action="pause"] {
	background-position: bottom right;
}

/* ----------------------------------------------------------------------- LINK --- */
a.link { 
	display: block; 
	color: #fff; 
}
a.link:hover { cursor: pointer; }
a.link:after { content: " \220f"; }
a.link:first-child { margin-top: 20px; }
a.link:last-child { margin-bottom: 40px; }

/* --------------------------------------------------------------------- CREDIT --- */
.credit {
    padding-left: 0;
}
.credit a {
    font-size: 14px;
    display: block;
    opacity: .3;
    color: white;
}

.credit a:hover { opacity: .7; }
.credit a:after { content: none; }

body.artist .credit a,
body.release .credit a { color: #232323; }


/* //////////////////////////////////////////////////////////////////////////////// */
/* ///////////////////////////////////////////////////////////////////// FOOTER /// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* --------------------------------------------------------------------- FOOTER --- */
footer {
	overflow: hidden;
	padding-top: 16px;
	max-width: none;
}
@media screen and (min-width: 720px) {
	footer { padding-top: 32px; }
}
@media screen and (min-width: 1200px) {
	footer { padding-top: 2.666%; }
}
@media screen and (min-width: 1440px) {
	//
}
@media screen and (min-width: 2400px) {
	footer { padding-top: 64px; }
}

footer section {
    float: left;
    overflow: hidden;
    max-width: none;
    margin: 0 16px 0 0;
    margin-top: 0 !important;
}
footer section:last-child { margin-right: 0; }
@media screen and (max-width: 480px) {
	footer section { float: none; }
	footer section:first-child { margin-bottom: 16px; }
}

footer:hover a,
footer:hover input,
footer:hover button { opacity: 0.7; }

footer a {
    font-size: 16px;
    line-height: 1.3125em;
    position: relative;
    display: block;
    float: left;
    clear: left;
    pointer-events: all;
    opacity: 0.3;
    color: #fff;
}
footer .link a:hover { opacity: 1 !important; }

footer input {
    line-height: 1.3125em;
    width: 100%;
    padding: 0;
    vertical-align: top;
    opacity: .3;
    color: white;
    border: 0;
    border-radius: 0;
    background-color: transparent;
}
footer input:focus { opacity: .3; }
footer:hover input:focus { opacity: 1; }
footer input::-webkit-input-placeholder { color: white; }
footer input:-ms-input-placeholder { color: white; }
footer input::-moz-placeholder { color: white; }
footer input:-moz-placeholder { color: white; }

footer .error input { color: red; }

footer button {
    font: inherit;
    display: inline-block;
    height: 1.3125em;
    margin-top: -3px;
    padding: 0;
    cursor: pointer;
    vertical-align: top;
    opacity: .3;
    color: white;
    border: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    background-color: transparent;
}
footer button:hover { opacity: 1; }
footer button:before {
	content: 'Go';
	position: relative;
	top: -2px;
}
footer button:after {
    content: ' \220f';
    color: white;
}


footer .link { width: calc(35% - 8px); }
footer .mail { width: calc(65% - 8px); }
@media screen and (max-width: 480px) {
	footer .link,
	footer .mail { width: 100%; }
}
footer .link a:before {
    display: inline-block;
    width: 10px;
    height: 1px;
    margin-bottom: .25em;
    content: '';
    background-image: url(../gfx/nav_light.png);
    background-repeat: repeat-x;
    background-position: center;
    background-size: 1px;
}
footer .link a:after {
    display: inline-block;
    padding-left: 10px;
    content: attr(data-label);
    pointer-events: all;
}
footer .mail form > div {
	 position: absolute; 
	 left: -5000px;
}