/* =Structure
----------------------------------------------- */
body {
	background:#fff;
	color:#000;
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	line-height:1.625;
	margin:0;
}
body, input, textarea, button {
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

a {
	color:#000;
	text-decoration:none;
	
	-webkit-transition: color 300ms ease;
	-moz-transition: color 300ms ease;
	-ms-transition: color 300ms ease;
	-o-transition: color 300ms ease;	 
	transition: color 300ms ease;
}
a:hover { color:#666; }

nav ul {
	list-style:none;
	margin:0;
	padding:0;
}

#container {
	min-width:320px;
}

img {
	max-width:100%;
	height:auto;
}


/* =Footer
----------------------------------------------- */
#footer {
	background:#363636;
	color:#fff;
	padding:1em;
	position:relative;
}

#social-links {
	margin:1em 0;
	text-align:center;
}
#social-links a {
	background:url(../img/social-links.png) left top no-repeat;
	background-size:50px;
	display:inline-block;
	margin:0 10px;
	width:30px;
	height:30px;
	
	zoom:1;
	*display:inline;
}
#social-links .soundcloud,
#social-links .bandcamp { width:50px; }

#social-links .facebook { background-position:left top; }
#social-links .twitter { background-position:left -35px; }
#social-links .soundcloud { background-position:left -70px; }
#social-links .bandcamp { background-position:left -105px; }

#copyright {
	font-size:11px;
	text-align:center;
	text-transform:uppercase;
	width:100%;
}


/* =Albums
----------------------------------------------- */
.album {
	border-bottom:2px solid #363636;
	overflow:hidden;
	position:relative;
	width:100%;
	height:1000px;
}

.album .artwork {
	background:center top fixed no-repeat;
	background-size:contain;
	margin:0 auto;
	position:relative;
	width:100%;
	height:100%;
}
.touch .album .artwork,
.no-fixed .album .artwork { background-attachment:scroll; }

.album .album-title {
	line-height:1;
	margin:0;
	position:absolute;
	text-align:center;
	width:100%;
}

.album .next-link {
	border-radius:6px;
	line-height:30px;
	font-weight:bold;
	margin:18px;
	padding:0 1em;
	position:absolute;
		bottom:0;
		right:0;
	text-transform:uppercase;
	white-space:nowrap;
	width:auto;
	height:30px;
	
	-webkit-transform:translateZ(0);
	
	-webkit-transition:bottom 300ms ease;
	-moz-transition:bottom 300ms ease;
	-o-transition:bottom 300ms ease;
	transition:bottom 300ms ease;
}
.album .next-link:hover { bottom:-5px; }
.album .next-link:after {
	border-top:6px solid #363636;
	border-right:6px solid transparent;
	border-left:6px solid transparent;
	content:"";
	margin:0 0 -5px -6px;
	position:absolute;
		bottom:0;
		left:50%;
	width:0;
	height:0;
}

.album-links {
	margin-left:-212px;
	opacity:0;
	position:absolute;
		bottom:50px;
		left:50%;
	
	-webkit-transition:opacity 300ms ease;
	-moz-transition:opacity 300ms ease;
	-o-transition:opacity 300ms ease;
	transition:opacity 300ms ease;
}
.album.current .album-links { opacity:1; }
.album-links a {
	background:url(../img/album-links.png) left top no-repeat;
	background-size:166px;
	border:5px solid #000;
	border-radius:80px;
	display:block;
	float:left;
	margin:8px;
	opacity:.75;
	width:80px;
	height:80px;
	
	-webkit-transition:opacity 300ms ease;
	-moz-transition:opacity 300ms ease;
	-o-transition:opacity 300ms ease;
	transition:opacity 300ms ease;
}
.album-links a:hover { opacity:1; }
.album-links .itunes { background-position:left top; }
.album-links .spotify { background-position:left -85px; }
.album-links .soundcloud { background-position:left -170px; }
.album-links .bandcamp { background-position:left -255px; }


/* =Header
----------------------------------------------- */
#header {
	background-color:#000;
}
#header .artwork {
	background-image:url(../img/cs-header.jpg);
}
#header .album-title {
	color:#fff;
	bottom:30%;
	left:0;
	text-transform:uppercase;
}

#header .next-link {
	background:#3a7f86;
	color:#fff;
}
#header .next-link:after { border-top-color:#3a7f86; }


/* =Deceptively Heavy
----------------------------------------------- */
#dh .artwork {
	background-image:url(../img/dh-album.jpg);
}
#dh .album-title {
	bottom:55%;
	left:0;
}
#dh .album-title img { width:61%; }

#dh .album-links a {
	border-color:#3a7f86;
	background-color:#fff;
}
#dh .album-links .itunes { background-position:right top; }
#dh .album-links .spotify { background-position:right -85px; }
#dh .album-links .soundcloud { background-position:right -170px; }
#dh .album-links .bandcamp { background-position:right -255px; }

#dh .next-link {
	background:#0c1e23;
	color:#fff;
}
#dh .next-link:after { border-top-color:#0c1e23; }


/* =Halfway Pleased
----------------------------------------------- */
#hp .artwork {
	background-image:url(../img/hp-album.jpg);
}
#hp .album-title {
	bottom:83%;
	left:0;	
}
#hp  .album-title img { width:24.7%; }

#hp .album-links a { background-color:#fff; }

#hp .next-link {
	background:#ffd401;
	color:#272010;
}
#hp .next-link:after { border-top-color:#ffd401; }


/* =Mayfield
----------------------------------------------- */
#mf {
	background:rgb(255,255,255);
	background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZlZDUwMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWQ1MDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background:-webkit-linear-gradient(left, #fff 0%, #fff 50%, #ffd401 50%, #ffd401 100%);
	background:-moz-linear-gradient(left, #fff 0%, #fff 50%, #ffd401 50%, #ffd401 100%);
	background:-ms-linear-gradient(left, #fff 0%, #fff 50%, #ffd401 50%, #ffd401 100%);
	background:-o-linear-gradient(left, #fff 0%, #fff 50%, #ffd401 50%, #ffd401 100%);
	background:linear-gradient(left, #fff 0%, #fff 50%, #ffd401 50%, #ffd401 100%);
}
#mf .artwork {
	background-image:url(../img/mf-album.jpg);
}
#mf .album-title {
	bottom:53%;
	left:23.4%;
	margin-left:-3.7%;
	width:8.6%;
}

#mf .album-links a { background-color:#ffd401; }

#mf .next-link {
	background:#363636;
	color:#ddd;
}
#mf .next-link:after { border-top-color:#363636; }


/* =Helper Classes
----------------------------------------------- */

/* Image replacement */
.ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	/* IE 6/7 fallback */
	*text-indent: -9999px;
}
.ir:before {
	content: "";
	display: block;
	width: 0;
	height: 100%;
}

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {
	display: none !important;
	visibility: hidden;
}

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible {
	visibility: hidden;
}

/* Clearfix */
.cf:before, .cf:after,
.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}
.cf:after, .clearfix:after { clear: both; }
.cf, .clearfix { *zoom: 1; }


/* =Retina Displays
----------------------------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
	#social-links a { background-image:url(../img/social-links_2x.png); }
}


/* =Responsive Design
----------------------------------------------- */
@media screen and (max-width:600px) {
	.album-links {
		margin-left:-104px;
		bottom:60px;
	}
	.album-links a {
		background-size:83px;
		border-width:2px;
		margin:4px;
		width:40px;
		height:40px;
	}
	.album-links .itunes { background-position:left top; }
	.album-links .spotify { background-position:left -42.5px; }
	.album-links .soundcloud { background-position:left -85px; }
	.album-links .bandcamp { background-position:left -127.5px; }
	#dh .album-links .itunes { background-position:right top; }
	#dh .album-links .spotify { background-position:right -42.5px; }
	#dh .album-links .soundcloud { background-position:right -85px; }
	#dh .album-links .bandcamp { background-position:right -127.5px; }
}