/**************************************** Reset ****************************************/
*
{
	border: 0;
	box-sizing: border-box;
	font: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

:focus
{
	outline: 0;
}

html
{
	height: 100%;
}

body
{
	max-width: 100%;
	min-height: 100%;
	overflow-y: scroll;
	width: 100%;
}

address, article, aside, blockquote, body, details, dialog, dd, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, li, main, nav, ol, p, pre, section, ul
{
	display: block;
}

a, a:hover, a:visited, a:active
{
	text-decoration: none;
}

blockquote, q
{
	quotes: none;
}

blockquote::before, blockquote::after, q::before, q::after
{
	content: '';
	content: none;
}

ol, ul
{
	list-style: none;
}

table
{
	border-collapse: collapse;
	border-spacing: 0;
}

/***************************************************************************************/

@font-face
{
	font-display: swap;
	font-family: "HansKendrick";
	font-style: normal;
	font-weight: normal;
	src: url('../f/HansKendrick-Regular.woff2') format('woff2'), url('../f/HansKendrick-Regular.woff') format('woff');
}

body
{
	background-color: #fafafd;
	color: #242528;
	display: flex;
	flex-direction: column-reverse;
	font-family: "HansKendrick", sans-serif;
	font-size: calc(12px + 0.5vw);
}

nav > a
{
	display: block;
}

nav > a > div
{
	font-size: 1.5em;
	line-height: 3rem;
	padding-left: 2rem;
}

.sign-in-logo
{
	background-image: url("../i/sign-in.svg");
	background-origin: content-box;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 50%;
	display: block;
	font-size: 0;
	height: 2.6rem;
	margin: 0.2rem 2rem 0.2rem 0;
	position: absolute;
	right: 0;
	width: 2.6rem;
}

.sign-in-logo:hover
{
	background-image: url("../i/signed-in.svg");
	background-size: 100%;
}

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

main
{
	-ms-flex: 1;
	-o-flex: 1;
	-webkit-flex: 1;
	background-color: inherit;
	color: inherit;
	display: flex;
	flex: 1;
	flex-direction: column;
}

main > header
{
	margin: 1rem;
	width: 15%;
}

main > header > a
{
	display: block;
}

.homepage-video
{
	margin: 0 auto 0;
	width: 100%;
}

.embed-container
{
	height: 0;
	max-width: 100%;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}

.embed-container iframe, .embed-container object, .embed-container embed
{
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.homepage-text, .homepage-banner
{
	margin: 1rem auto 0;
	text-align: center;
	width: 70%;
}

footer
{
	-ms-flex: 1;
	-o-flex: 1;
	-webkit-flex: 1;
	-webkit-justify-content: flex-end;
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
}

.homepage-banner a, .homepage-banner a:visited, .homepage-banner a:active
{
	color: #005548;
	padding: 0 1px 1px;
}

.homepage-banner a:hover
{
	border-bottom: 2px solid #005548;
}

.homepage-banner-contents
{
	border: 2px solid currentColor;
	border-radius: 0.2em;
	font-size: 0.8em;
	padding: 0.4em;
	text-align: center;
}

footer > a
{
	display: block;
	margin: 2rem auto 0;
	width: 20%;
}

@media screen and (min-width: 376px)
{
	.homepage-video
	{
		margin-top: 1rem;
		width: 80%;
	}

	footer > a
	{
		width: 10%;
	}
}

@media screen and (min-width: 801px)
{
	body
	{
		flex-direction: row-reverse;
	}

	nav, main
	{
		max-width: 50%;
	}

	nav
	{
		-ms-flex: 1;
		-o-flex: 1;
		-webkit-flex: 1;
		display: flex;
		flex: 1;
		position: relative;
	}

	nav > a
	{
		-ms-flex: 1;
		-o-flex: 1;
		-webkit-flex: 1;
		display: flex;
		flex: 1;
		text-decoration: none;
		writing-mode: vertical-lr;
	}

	nav > a > div
	{
		line-height: inherit;
		margin: 1.2em auto auto auto;
		padding: 0;
	}

	.sign-in-logo
	{
		-ms-transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		bottom: 0;
		font-size: 0;
		height: 10%;
		left: 6.25%;
		margin: 0 0 1vw 0;
		position: absolute;
		transform: translate(-50%, 0);
		width: 7.5%;
	}

	.homepage-video
	{
		width: 90%;
	}

	.homepage-video, .homepage-text, .homepage-banner
	{
		padding-left: 12.5%;
	}

	footer > a
	{
		margin: 1rem;
	}
}

.about-nav
{
	background-color: #fafafd;
	color: #242528;
}

.musicians-nav
{
	background-color: #005548;
	color: #ffe0e4;
}

.promoters-nav
{
	background-color: #ffe0e4;
	color: #005548;
}

.events-nav
{
	background-color: #5f224d;
	color: #f4f7bc;
}

.commissions-nav
{
	background-color: #f4f7bc;
	color: #5f224d;
}

.projects-nav
{
	background-color: #a0a0a2;
	color: #242528;
}

.learning-nav
{
	background-color: #0e4c7d;
	color: #f9dbc1;
}

.directory-nav
{
	background-color: #7d123a;
	color: #c4f6e6;
}