/*
---------------
Website styling
---------------
*/



/*
------------------------------------------------
Reset all styles to defaults across all browsers
------------------------------------------------
*/
*{margin:0;padding:0;}article,aside,blockquote,div,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,legend,main,nav,pre,q,section{display:block;}body,html{font-size:16px;line-height:1;}button,input,select,textarea{display:inline;font-size:1em;zoom:1;}a,abbr,br,code,i,kbd,label,span,sub,sup{display:inline;}abbr,fieldset,img{border:none;}caption,code,i,kbd,th{font-style:normal;font-weight:normal;text-decoration:none;}caption{display:table-caption;}code{font-size:1em;}col{display:table-column;}colgroup{display:table-column-group;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:700;}input,select{vertical-align:middle;}li{display:list-item;}ol,ul{list-style:none;}sub{vertical-align:sub;}sup{vertical-align:super;}table{display:table;border-collapse:collapse;border-spacing:0;}tbody{display:table-row-group;}td,th{display:table-cell;}tfoot{display:table-footer-group;}thead{display:table-header-group;}tr{display:table-row;}



/*
-----------------------------------------------------
Main body element and default webpage link styling
Also font size scaling options for larger resolutions
-----------------------------------------------------
*/
body { 
	background: #f0f0f0 url('../images/background.png') no-repeat 0 0;
	background-attachment: fixed;
	background-size: cover;
	color: #282828;
	font-family: Montserrat, "Open Sans", Tahoma, Verdana, Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.75;
	margin: 0 auto;
	overflow-x: hidden;
	position: relative;
}
body a:link,
body a:visited,
body a:focus,
body a:hover,
body a:active {
	color: #f0f0f0;
	text-decoration: none;
}
@media screen and (min-width: 1024px) {
body {
	font-size: 1.25em;
}
}
@media screen and (min-width: 1440px) {
body {
	font-size: 1.5em;
}
}
@media screen and (min-width: 2560px) {
body {
	font-size: 2em;
}
}
@media screen and (min-width: 3840px) {
body {
	font-size: 3em;
}
}
@media screen and (min-width: 5120px) {
body {
	font-size: 4em;
}
}
@media screen and (min-width: 7680px) {
body {
	font-size: 6em;
}
}



/*
------------------
Website navigation
------------------
*/
body #nav {
	background: #f0f0f0;
	box-sizing: border-box;
	color: #282828;
	margin: auto;
	position: relative;
	text-align: center;
	z-index: 64;
}
body #nav ul li {
	display: block;
}
body #nav ul li a:link,
body #nav ul li a:visited {
	color: #cd5151;
	display: block;
	font-weight: 700;
	padding: 0.5em 2em;
}
body #nav ul li a:focus,
body #nav ul li a:hover {
	background: #cd5151;
	/*border-radius: 1em;*/
	color: #f0f0f0;
}
body #nav ul li a:active {
	background: #282828;
}
@media screen and (min-width: 640px) {
body #nav {
	max-width: 64em;
	padding: 1%;
	position: sticky;
	top: 0;
	z-index: 64;
}
body #nav ul li {
	display: inline-block;
}
body #nav ul li a:link,
body #nav ul li a:visited {
	display: inline-block;
}
}
@media screen and (min-width: 1440px) {
body #nav {
	font-size: 0.75em;
	max-width: 85.33333em;
}
}



/*
----------------------
Main content container
----------------------
*/
body #content {
	background: #f0f0f0 url('../images/main.png') no-repeat 0 0;
	background-size: cover;
	margin: auto;
	max-width: 64em;
	overflow: hidden;
}



/*
---------------
Homepage header
---------------
*/
body #content #hero {
	background: url('../images/mic.png') no-repeat 0 0;
	background-size: contain;
	color: #f0f0f0;
	/*height: 810px;*/
	padding: 0;
	width: 100%;
}
body #content #hero #text-group {
	background: rgba(0, 0, 0, 0.25);
	text-align: center;
}
body #content #hero #text-group h1 {
	/*font-size: 2.66667em;
	line-height: 810px;*/
	text-align: center;
}
body #content #hero #text-group span#intro {
	/*font-size: 1.33333em;*/
	left: 50%;
	/*line-height: 810px;*/
	margin-left: -50%;
	margin-top: -64px;
	position: absolute;
	width: 100%;
	z-index: 32;
}
body #content #hero #text-group span#slogan {
	/*font-size: 0.75em;*/
	left: 50%;
	/*line-height: 810px;*/
	margin-left: -50%;
	margin-top: 64px;
	position: absolute;
	text-transform: uppercase;
	width: 100%;
	z-index: 32;
}
@media screen and (min-width: 320px) {
body #content #hero {
	height: 169px;
}
body #content #hero #text-group h1 {
	font-size: 2em;
	line-height: 169px;
}
body #content #hero #text-group span#intro {
	font-size: 1em;
	line-height: 169px;
	margin-top: -64px;
}
body #content #hero #text-group span#slogan {
	font-size: 0.5em;
	line-height: 169px;
	margin-top: 64px;
}
}
@media screen and (min-width: 640px) {
body #content #hero {
	height: 337px;
}
body #content #hero #text-group h1 {
	font-size: 3.2em;
	line-height: 337px;
}
body #content #hero #text-group span#intro {
	font-size: 1.6em;
	line-height: 337px;
	margin-top: -64px;
}
body #content #hero #text-group span#slogan {
	font-size: 0.9em;
	line-height: 337px;
	margin-top: 64px;
}
}
@media screen and (min-width: 1024px) {
body #content #hero {
	height: 540px;
}
body #content #hero #text-group h1 {
	font-size: 3.2em;
	line-height: 540px;
}
body #content #hero #text-group span#intro {
	font-size: 1.6em;
	line-height: 540px;
	margin-top: -64px;
}
body #content #hero #text-group span#slogan {
	font-size: 0.9em;
	line-height: 540px;
	margin-top: 64px;
}
}
@media screen and (min-width: 1280px) {
body #content #hero {
	height: 675px;
}
body #content #hero #text-group h1 {
	line-height: 675px;
}
body #content #hero #text-group span#intro {
	line-height: 675px;
}
body #content #hero #text-group span#slogan {
	line-height: 675px;
}
}
@media screen and (min-width: 1440px) {
body #content #hero {
	height: 759px;
}
body #content #hero #text-group h1 {
	font-size: 2.66667em;
	line-height: 759px;
}
body #content #hero #text-group span#intro {
	font-size: 1.33333em;
	line-height: 759px;
}
body #content #hero #text-group span#slogan {
	font-size: 0.75em;
	line-height: 759px;
}
}
@media screen and (min-width: 1600px) {
body #content #hero {
	height: 810px;
}
body #content #hero #text-group h1 {
	line-height: 810px;
}
body #content #hero #text-group span#intro {
	line-height: 810px;
}
body #content #hero #text-group span#slogan {
	line-height: 810px;
}
}



/*
------------------------
Webpage content sections
------------------------
*/
body #content .section {
	background: rgba(255, 255, 255, 0.25);
	/*box-sizing: border-box;*/
	padding: 2em;
}
body #content .section h1 {
	font-size: 1.5em;
	text-align: center;
	text-decoration: underline;
}
body #content .section h1 + h2,
body #content .section p + h2 {
	margin: 2em 0 1em 0;
}
body #content .section h2 {
	font-size: 1em;
	margin: 0 0 1em 0;
}
body #content .section p {
	margin: 1em 0;
}
body #content .section p:first-of-type {
	margin-top: 0;
}
body #content .section p:last-of-type {
	margin-bottom: 0;
}
body #content .section .bold {
	font-weight: 700;
}
body #content .section .italic {
	font-style: italic;
}
body #content .section .note {
	background: #f0f0f0;
	border-left: 0.5em solid #282828;
	color: #282828;
	font-style: italic;
	font-weight: 700;
	margin-top: 2em;
	padding: 1em;
}
body #content .section .note a:link,
body #content .section .note a:visited {
	background: #cd5151;
	color: #f0f0f0;
	display: inline-block;
	padding: 0.5em 1em;
	text-transform: uppercase;
	vertical-align: middle;
}
body #content .section .note a:link:first-of-type,
body #content .section .note a:visited:first-of-type {
	margin-left: 1em;
}
body #content .section .note a:focus,
body #content .section .note a:hover {
	background: #cd5151;
	color: #f0f0f0;
}
body #content .section .note a:active {
	background: #282828;
}
body #content .section .small {
	font-size: 0.875em;
}
@media screen and (min-width: 1024px) {
body #content .section {
	float: left;
	max-width: 57%;
	padding: 4%;
}
body #content .section .note a:link,
body #content .section .note a:visited {
	font-size: 0.75em;
}
body #content .section .small {
	font-size: 0.88889em;
}
body #content .section.full {
	max-width: 92%;
}
}
@media screen and (min-width: 1440px) {
body #content .section .note a:link,
body #content .section .note a:visited {
	font-size: 0.5em;
}
body #content .section .small {
	font-size: 0.75em;
}
}



/*
----------------------
Webpage music sections
----------------------
*/
body #content .music-section {
	background: rgba(0, 0, 0, 0.1);
	overflow-y: scroll;
}
body #content .music-section h2 {
	color: #f0f0f0;
}
body #content .music-section h2 a:link,
body #content .music-section h2 a:visited {
	background: #f0f0f0;
	color: #282828;
	display: inline-block;
	margin-left: 1em;
	padding: 0.5em 1em;
	text-transform: uppercase;
	vertical-align: middle;
}
body #content .music-section h2 a:focus,
body #content .music-section h2 a:hover {
	background: #cd5151;
	color: #f0f0f0;
}
body #content .music-section h2 a:active {
	background: #282828;
}
body #content .music-section .mp3 + h2 {
	margin-top: 2em;
}
@media screen and (min-width: 1024px) {
body #content .music-section {
	float: right;
	overflow-y: scroll;
	width: 27%;
}
body #content .music-section h2 a:link,
body #content .music-section h2 a:visited {
	font-size: 0.75em;
}
}
@media screen and (min-width: 1440px) {
body #content .music-section h2 a:link,
body #content .music-section h2 a:visited {
	font-size: 0.5em;
}
}



/*
--------------------
Webpage image blocks
--------------------
*/
body #content .section .image-block {
	margin-top: 2em;
	text-align: center;
}
body #content .section .image-block img {
	display: inline-block;
	margin: 0.25em;
}
body #content .section .image-block img.horizontal {
	height: auto;
	width: 30%;
}
body #content .section .image-block img.vertical {
	height: 30%;
	width: auto;
}