@font-face
{
	font-family: "Alegreya";
	src: url(/bbStatic/fonts/Alegreya_Sans/AlegreyaSans-Light.ttf);
}

@font-face
{
	font-family: "muli";
	src: url(/bbStatic/fonts/Muli/Muli-Light.ttf);
}

html { height: 100%; }
html body
{
	min-height: 100%;
	font-family: muli, 'Helvetica Neue', Arial, sans-serif;
	/*-webkit-font-smoothing: antialiased;*/
}

#main { min-height: 82vh; }

h1, h2, h3, h4 { font-family: Alegreya }

#hero
{
	background: url("band.jpg");
	height: 50vw;
	background-size: 100%;
	background-position: 0px -20px;
	padding: 5rem;
	position: relative;
	width: 100%;
}

#topHead { height: 40px; line-height: 40px; padding: 0 8px;}

.lead
{
	padding: 1rem;
	width: 50%;
	font-size: 1.5rem;
	line-height: 1.7;
	background: rgba(80,100,80,.5);
	border-radius: 10px;
	font-weight: 100;
	position: absolute;
	top: 10vw;
	left: 6vw;
}

.intro
{
	max-width: 920px;
	margin: 2em auto;
	font-size: 22px;
	padding: 1em;
}

@media (max-width: 1008px ) { .lead { font-size: 2vw; } }
@media (max-width: 740px ) { .lead { width: 100%; position: static; background: transparent; font-size: 1.5rem; } }

@media (max-width: 740px ) { .max740{ display: none;} }
@media (max-width: 440px ) { .max440 { display: none;}  .cols440 { flex-direction: column; }  .order2-440 { order: 2 }}

#hero h1 { font-size: 3rem; }

.charMenu
{
	display: flex;
	display: -webkit-flex;
	width: 80%;
	margin: .5rem auto 0;
	justify-content: space-around;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	height: 100px;
}

.charMenu > div
{
	border-radius: 100px;
	background: #333;
	padding: .5em;
	width: 2em;
	height: 2em;
	text-align: center;
	margin: 1px;
	display: flex;
	justify-content: center;
	transition: height 1000ms ease;
	align-items: center;
}

.charMenu .playing
{
	background-color:  #A8B5C1;
}

.charMenu > div.scaleSelector
{
	background: none;
	Xborder: 1px solid #333;
	position: relative;
	opacity: .2;
}

.charMenu > div.scaleSelector:hover { opacity: 1; background: none; }

.charMenu > div:hover { Xtransform: scale(1.3,1.3); transition: transform 100ms; }

.charMenu .keydown, .charMenu > div:hover
{
	background-color:  #C4A660;
}

@media (max-width: 820px ) { .charMenu { display: block; height: auto; } .charMenu > div { display: inline-block; } }

.scalename { text-align: center; opacity: 0; transition: opacity 300ms; -webkit-font-smoothing: antialiased; }
.scalename.show { opacity: 1 }

.teasers
{
	display: flex;
	display: -webkit-flex;
	justify-content: space-around;
	align-items: center;
	justify-content: center;
}

.teasers > div { flex: 1; }

@media (max-width: 440px ) { .teasers > div { width: 100%; }}

.addBand
{
	background: none;
	color: white;
	font-weight: 100;
	border-radius: 0;
	border: 1px solid gray;
	margin: 3em;
}

.thinpage
{
	max-width: 768px;
	margin: 2em auto;
	text-align: center;
}

.thinpage h1 { margin-bottom: 1em;}

.thinpage.framed { padding: 2em 1em; border: 1px solid gray; margin: 4em auto; }

.indentpage
{
	width: 96%;
	margin: auto;
}

form#addBand input { padding: .5em; font-size: 1.5rem; }
form#addBand textarea { padding: 1em; font-size: 1.2rem; }

.story { white-space: pre-wrap; }

.bcard { border: 0px solid gray; padding: 1em; background: #222; overflow: hidden; position: relative; cursor: pointer; margin: 8px; }
.bcard img { filter: grayscale(1); -webkit-filter: grayscale(1); opacity: .85; transition: opacity 500ms; max-height: 100%; }
.bcard img:hover { opacity: 1 }
.bcard .name { font-size: 1.5rem; text-align: center; }
.bcard .story { padding-top: .5em; }

.recentAdditions { text-align: center; }
.recentAdditions > div { font-style: italic; margin: 1em; }
h4.recent { font-size: 24px; font-weight: normal; }

.awesomplete { color: gray; }

.bandImageHolder
{
	margin: 10px auto;
	padding: 10px;
	border: 1px solid #333;
	position: relative;
	display: inline-block;
}

.bcard .bandImageHolder
{
	max-width: 522px;   /* 522 - 20 padding - 2 border = 500px image */
	height: 18vw;
	padding: 0;
	border: 1px solid transparent;
	text-align: center;
	position: relative;
	overflow: hidden;
	display: flex;
	display: -webkit-flex;
	justify-content: center;
	align-items: center;
}

@media (max-width: 740px ) { .bcard .bandImageHolder { height: 32vw }}
@media (max-width: 440px ) { .bcard .bandImageHolder { height: 46vw }}

.bcard .imageBDrop
{
	opacity: 1;
	position: absolute;
}

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

.mainBandView { padding: 10px; }
.mainBandView .story { text-align: left; padding: 1em; font-size: 1.2rem; }

footer { margin: 4em 2em;  text-align: center; font-size: .8rem; letter-spacing: 1.4px;}
footer a, footer a:link, footer a:visited, footer a:active { color: #BED1E6 }

.love { color: #e74c3c; display: inline-block; }
.love:hover { animation: pulse 2s infinite; }
@keyframes pulse
{
	30% { transform: scale(1.25) }
	60% { transform: scale(1) }
}

.attribution { font-size: .9em; position: absolute; bottom: 5px; right: 5px; opacity: 0.5; }

.topMenu { margin: 0 }
.topMenu > li { display: inline-block; margin: 0 0.5em; }

h2.quizQuestion
{
	max-width: 400px;
	margin: auto;
	font-size: 32px;
}

.quizAnswer
{
	margin: 2em;
}

.answer.button { margin: 2em; }

.midiPlay { text-align: center; border: 1px solid #333; padding: 1em; max-width: 748px; margin: auto; }
.midiPlay div { padding: 4px 8px; cursor: pointer; }
.midiPlay img { width: 25px; height: 25px; margin-right: .5em; }
.midiPlay div.playing { color: #333; background: #A8B5C1 }
.midiPlay div.playing img { animation: rotate 4s infinite linear; }
@keyframes rotate
{
	100% { transform: rotate(360deg) }
}

div.awesomplete > ul > li { text-align: left; list-style: none; }

.hide
{
	display: none;
}