/* **                               ** */
/* **           S  H  P             ** */
/* **      STYLESHEET v. 0.6        ** */
/* ** . . . . . . . . . . . . . . . ** */
/* * * CUSTOM FONTS * * */
@font-face {
	font-family: shp;
	src: url('fonts/Montserrat-ExtraBold.otf');
	font-weight: normal;
	font-style: normal;
}

/* * * DOCUMENT STYLES * * */
html {
	height: 100%;
}
body {
	background-color: #212121;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: wrap;
	margin: 0;
	height: 100%;
	font-family: Lucida Sans, Verdana, Helvetica, Arial, sans-serif;
	font-size: 100%;
	line-height: 1.5;
	padding: 0;
}
a {text-decoration: none;}
a:link {color: #9933cc;} /*9933cc*/
a:visited {color: #9933cc;} /*9933cc*/
a:active {color: #9999cc;} /*9999cc*/
input, select, textarea {font-family: sans-serif,helvetica; font-size: 8pt;}

/* 
* {
	font-family: inherit;
}
 */
#loader {
	display: block;
	width: 100%;
	color: #a1a1a1;
	text-align: center;
}


/* * * NORMALIZE * * */
html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

/* * * HOME STYLES * * */
.bboard {
	clear: both;
}

/* adapted from https://codepen.io/littlesnippets/pen/gawvxL */
/* @import url(https://fonts.googleapis.com/css?family=Raleway:400,800); */
figure.billboard {
	font-family: shp, Arial, Helvetica;
	position: relative;
	margin: 10px;
	min-width: 220px;
	max-width: 310px;
	max-height: 310px;
	width: 100%;
	overflow: hidden;
	text-align: center;
	background: #000000;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.billboard * {
	-webkit-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}
figure.billboard img {
	opacity: 0.2;
	max-width: 100%;
	position: relative;
	top: 0;
	left: 0;
}
figure.billboard figcaption {
	position: absolute;
	top: 50%;
	left: 30px;
	right: 30px;
	-webkit-transform: rotate(0deg) translateY(-50%) scale(1);
	transform: rotate(0deg) translateY(-50%) scale(1);
	-webkit-transform-origin: center 0;
	transform-origin: center 0;
}
figure.billboard figcaption h2 {
	top: 50%;
	letter-spacing: -1px;
	color: #ffffff;
	text-transform: uppercase;
	padding: 10px 0;
	margin: 0;
	font-weight: 900;
	font-size: 120px;
}
figure.billboard figcaption h2 span {
	font-weight: 900;
}
figure.billboard figcaption:before, figure.billboard figcaption:after {
	background-color: rgba(255, 255, 255, 0.8);
	width: 100%;
	height: 1px;
	position: absolute;
	content: "";
	display: block;
	-webkit-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}
figure.billboard figcaption:before {
	left: 0;
	top: 0;
}
figure.billboard figcaption:after {
	bottom: 0;
	right: 0;
}
figure.billboard.blue {
	background: #091b27;
}
figure.billboard.red {
	background: #2e0e0a;
}
figure.billboard.gray {
	background: #010101;
}
figure.billboard a {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: absolute;
}
figure.billboard:hover img, figure.billboard.hover img {
	opacity: 1;
}
figure.billboard:hover figcaption, figure.billboard.hover figcaption {
	-webkit-transform: rotate(-90deg) translateY(-50%) scale(0.9);
	transform: rotate(-90deg) translateY(-50%) scale(0.9);
	opacity: 0.2;
}

/* * *    FOOTER   * * */
.footer {
	width: 100%;
	left: 0;
	bottom: 0;
}
.home {
	position: absolute;
}
.copyright {
	font-size: 0.8rem;
	color: #a1a1a1;
	text-align: center;
}
.credit, .credit a, .credit a:hover, .credit a:visited {
	font-size: 0.6rem;
	color: #616161;
	text-align: center;
}

.enter {
	display: block;
	margin: 1% auto;
	color: #a1a1a1;
	text-align: center;
	clear: both;
}
.enter a {
	font-size: 1.5em;
	color: #a1a1a1;
	text-decoration: none;
}
.enter a img {
	width: 200px;
	height: auto;
}


/* * *      NAV     * * */
.header {
	display: table;
	width: 100%;
	height: 100px;
	position: absolute;
	left: 0;
	top: 0;
}
.navleft a {
	color: #a1a1a1;
	margin: 0 20px;
	float: right;
}
.navright a {
	color: #a1a1a1;
	margin: 0 20px;
	float: left;
}
.logo {
	display: table-cell;
	width: 307px;	
}


/* * *     ALBUM    * * */
.album {
	display: block;
	width: 100%;
	margin: 1% auto;
	padding: 0;
}


.albumlinks {
	display: block;
	margin: 0.5% auto;
	color: #a1a1a1;
}
.albumlinks a {
	display: block;
	float: left;
	padding: 2px 8px;
	color: #a1a1a1;
	font-size: 0.9em;
	/* letter-spacing: 0.2em; */
	border-left: 1px solid #444;
	border-right: 1px solid #444;
}
.albumlinks a:hover {
	background-color: #444;
	color: #c1c1c1;
}


.cover {
	display: block;
	width: 49.5%;
	float: left;
}
.cover img {
	float: right;
	width: 60%;
}




.songlist {
	display: block;
	width: 49.5%;
	float: left;
	vertical-align: top;
	margin: 0;
	padding-right: 10px;
}
.songlist img {
	float: right;
	width: 40%;
	clear: both;
}
.lyricmenu {
	width: 100%;
	color: #a1a1a1;
	text-align: right;
	clear: both;
}
.lyricmenu a {
	color: #a1a1a1;
	text-decoration: underline;
}


.right {
	display: block;
	width: 49.5%;
	float: right;
	color: #a1a1a1;
	text-align: left;
	vertical-align: top;
	margin: 0;
	padding: 0 0 0 10px;
}

.cover2 {
	display: block;
	width: 49.5%;
	float: right;
}
.cover2 img {
	float: left;
	width: 60%;
}
.left {
	display: block;
	width: 49.5%;
	float: left;
	color: #a1a1a1;
	text-align: right;
	vertical-align: top;
	margin: 0;
	padding-right: 10px;
}
.left div {
	width: 80%;
	float: right;
	margin: 0;
	padding: 0;
}
.albumcopyright {
	font-size: 0.7em;
}
.albumnotes {
	font-size: 0.9em;
	line-height: 1.2;
	margin: 0;
	padding: 0;
}
.lyricsheet {
	font-size: 0.9em;
	color: #e1e1a1;
	padding-left: 10px;
}
.docsheet {
	font-size: 0.9em;
	color: #e1e1a1;
	padding: 0 20px 0 10px;
}
.lyricsheet h2, .docsheet h2 {
	font-weight: bold;
	margin-top: 0;
	padding-top: 0;
}
.lyricsheet .section {
	font-size: 0.8em;
	letter-spacing: 0.25em;
	text-decoration: underline;
	text-transform: lowercase;
}




.doc {
	display: block;
	color: #e1e1a1;
	margin: 1% 20%;
}



/* ** ' ' ' ' ' ' ' ' ' ' ' ' ' ' ' ** */
/* **      CSS BY SCREEN SIZE       ** */
/* ** . . . . . . . . . . . . . . . ** */




/* 
Now let’s see some common breakpoints for widths of devices:

    320px — 480px: Mobile devices
    481px — 768px: iPads, Tablets
    769px — 1024px: Small screens, laptops
    1025px — 1200px: Desktops, large screens
    1201px and more —  Extra large screens, TV
 */


/* Small Devices */
@media only screen and (max-width : 479px) {
	figure.billboard {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		flex: 1;
		align-items: center;
		margin: 2%rem;
		min-width: 25%rem;
		max-width: 28%rem;
		max-height: 28%rem;
		width: 100%;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	}
	.footer {
		width: 100%;
		position: relative;
		clear: both;
		left: 0;
		bottom: 0;
	}
}

/* Small Devices, Phones */
@media only screen and (min-width : 480px) and (max-width : 579px) {
	figure.billboard {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		flex: 1;
		align-items: center;
		margin: 2%rem;
		min-width: 25%rem;
		max-width: 28%rem;
		max-height: 28%rem;
		width: 100%;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
	}
	.footer {
		width: 100%;
		position: relative;
		clear: both;
		left: 0;
		bottom: 0;
	}
}

/* Small Devices, Phones */
@media only screen and (min-width : 580px) and (max-width : 899px) {
	figure.billboard {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		flex: 1;
		align-items: center;
		margin: 2%;
		min-width: 60%;
		max-width: 60%;
		max-height: 60%;
		width: 100%;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	}
	.footer {
		width: 100%;
		position: relative;
		clear: both;
		left: 0;
		bottom: 0;
	}
}

/* Medium Devices, Tablets and Small Desktops */
@media only screen and (min-width : 900px) and (max-width : 1199px) {
	figure.billboard {
		display: inline-block;
		margin: 10px;
		min-width: 180px;
		max-width: 260px;
		max-height: 260px;
		width: 100%;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	}
}

/* Large Desktops */
@media only screen and (min-width : 1200px) {
	figure.billboard {
		display: inline-block;
		margin: 10px;
		min-width: 220px;
		max-width: 310px;
		max-height: 310px;
		width: 100%;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	}
}