html
{
font-family: 'Nunito', Times, serif;
font-size: 16px;
font-weight: 300;
line-height: 24px;
}

html,
body
{
margin: 0;
padding: 0;
overflow-x: hidden;
background: #FFF;
}

html.mobile h3
{
font-size: 1.5em;
line-height: 1.5em;
}

#app>header
{
background: #467937 url('../img/header.jpg') repeat-x bottom center;
background-size: cover;
height: 0;
padding-bottom: 100%;
}

html.mobile #app>header
{
text-align: center;
}

html.mobile-no #app>header
{
background-size: contain;
height: 0;
padding-bottom: 45%;
position: relative;
}

html.mobile-no #app>header>div
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

html.mobile-no #app>header nav
{
position: absolute;
top: 0;
left: 0;
padding: 1em;
}

html.mobile-no #app>header nav a:hover
{
text-decoration: underline;
}

html.mobile-no #app>header .downloads
{
position: absolute;
top: 0;
right: 0;
padding: 1em;
}

#app>header ul
{
list-style-type: none;
margin: 0;
padding: 0;
vertical-align: middle;
}

#app>header li
{
display: inline-block;
vertical-align: middle;
}

#app>header a
{
color: #FFF;
display: inline-block;
text-decoration: none;
}

#app>header li+li
{
margin-left: 1em;
}

#app>header a.page
{
font-weight: bold;
letter-spacing: 0.01625em;
text-shadow: 0.0625em 0.0625em 0.125em rgba( 0, 0, 0, 0.75 );
}

h1
{
color: #FFF;
margin: 0;
text-shadow: 0.03125em 0.03125em 0.0625em rgba( 0, 0, 0, 0.75 );
}

html.mobile h1
{
font-size: 3em;
padding: 3em 0 1em;
text-align: center;
}

main>section,
#app>footer
{
text-align: center;
padding: 3em 0;
position: relative;
}

main>section:after
{
content: "";
display: table;
clear: both;
}

main>section>div,
#app>footer>div
{
margin: 0 auto;
max-width: 1000px;
padding: 0 1em;
text-align: left;
vertical-align: top;
}

h2,
h2+*
{
display: inline;
font-size: 1.125em;
font-weight: normal;
}

h2+*:before
{
content: " ";
}

main>section>div>h3
{
margin: 0 0 1.5em;
text-align: center;
letter-spacing: 0.01625em;
}

h4
{
font-size: 1.25em;
letter-spacing: 0.008125em;
line-height: 1em;
margin: 0.5em 0 0.5em;
}

img
{
width: 100%;
}

.download img
{
max-width: 100%;
width: auto;
}

.c
{
text-align: center;
}

.r
{
text-align: right;
}

.mv
{
margin: 1em 0;
}

main
{
background: url( '../img/grass.png' ) repeat-x center top;
background-size: auto 3em;
top: -1.5em;
padding-top: 3em;
position: relative;
}

main a
{
color: #FFF;
text-decoration: underline;
}

#about
{
background: #467937;
color: #FFF;
}

.sample
{
position: relative;
margin: 1em 0;
}

.sample h3
{
position: absolute;
color: #FFF;
margin: 0;
top: 0.75em;
left: 1em;
text-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.3 );
}

.sample ul
{
margin: 0;
list-style-type: none;
padding: 0;
text-align: center;
}

.sample li
{
display: inline-block;
margin-top: 0.25em;
}

.sample li+li
{
margin-left: 0.25em;
}

.sample ul a
{
display: block;
color: #000;
text-decoration: none;
padding: 0.25em 0.375em;
background: #8cb6b4;
color: #FFF;
border-radius: 0.375em;
}

#tracklist
{
background: #f0f1e7;
}

ul.songs
{
list-style-type: none;
padding: 0;
float: left;
}

ul.songs li
{
margin-bottom: 1.5em;
}

#press
{
background: #73b0b0;
}

#press h3
{
color: #FFF;
}

#press h4
{
margin: 0 0 0.25em;
}

#press a
{
text-decoration: none;
}

#press article
{
margin: 2.5em 0 1.5em;
text-align: center;
}

#press .link
{
color: #C1FFFF;
text-decoration: underline;
}

#bonnie-pearson-hirdes
{
background: #92c9c7;
}

#bonnie-pearson-hirdes h3
{
color: #FFF;
}

#bonnie-pearson-hirdes p
{
font-size: 1.125em;
line-height: 1.5em;
}

#overlay
{
background-color: rgba( 0, 0, 0, 0.75 );
opacity: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: opacity 0.5s;
pointer-events: none;
}

#overlay.visible
{
opacity: 1;
display: block;
pointer-events: auto;
}

#video
{
background: #000 url( '../img/loader.gif' ) no-repeat center center;
background-size: 60px 60px;
position: absolute;
box-shadow: 2px 2px 4px rgba( 0, 0, 0, 0.25 );
overflow: hidden;
line-height: 1.25em;
text-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.5 );
}

#video .slides
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

#video .slides>div
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}

#video .slides>div>img
{
display: block;
position: absolute;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}

#video .slides>div>div
{
display: block;
position: absolute;
bottom: 0;
z-index: 10;
width: 100%;
text-align: center;
padding: 1em;
color: #FFF;
}

#video .slides>div>div>div
{
display: block;
}

@keyframes show
{
from { visibility: hidden; opacity: 0; }
1% { opacity: 0; visibility: visible; }
to { opacity: 1; visibility: visible; }
}
 
@-webkit-keyframes show
{
from { visibility: hidden; opacity: 0; }
1% { opacity: 0; visibility: visible; }
to { opacity: 1; visibility: visible; }
}

.download
{
margin: 1em 0;
}

.show
{
animation: show 0.4s forwards;
-webkit-animation: show 0.4s forwards;
}

.hidden
{
visibility: visible;
}

.controls
{
z-index: 10000;
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
color: #FFF;
line-height: 1.25em;
}

.controls>*
{
display: block;
float: left;
font-weight: bold;
position: absolute;
padding: 1em;
}

.controls .close
{
-webkit-filter: drop-shadow( 1px 1px 2px rgba( 0, 0, 0, 0.5 ) );
filter: drop-shadow( 1px 1px 2px rgba( 0, 0, 0, 0.5 ) );
}

.slider
{
height: 2em;
width: calc( 100% - 8em );
}

.elapsed
{
bottom: 0;
left: 0;
}

.duration
{
bottom: 0;
right: 0;
}

.close
{
top: 0;
right: 0;
}

.elapsed span,
.duration span
{
display: block;
width: 2em;
text-align: right;
vertical-align: top;
}

@media only screen and (min-width: 800px) {

	html.mobile-no h1
	{
	text-align: center;
	font-size: 7em;
	position: relative;
	top: 30%;
	line-height: 1em;
	}

	html.mobile-no .c_r
	{
	direction: rtl;
	}

	html.mobile-no [class*="c_2_"]
	{
	direction: ltr;
	vertical-align: top;
	}

	html.mobile-no .c_2_1
	{
	width: 48%;
	display: inline-block;
	}

	html.mobile-no .c_2_2
	{
	width: 48%;
	display: inline-block;
	margin-left: 4%;
	}

	html.mobile-no .c_r>.c_2_1
	{
	margin-left: 4%;
	}

	html.mobile-no .c_r>.c_2_2
	{
	margin-left: 0;
	}

}

@media only screen and (min-width: 800px) and (max-width: 1023px) {

	html.mobile-no ul.songs li
	{
	width: 47.5%;
	float: left;
	margin-right: 5%;
	}

	html.mobile-no ul.songs li:nth-child(2n)
	{
	margin-right: 0;
	}

	html.mobile-no ul.songs li:nth-child(2n+1)
	{
	clear: both;
	}

	html.mobile-no #video
	{
	font-size: 1.25em;
	}
	
}

@media only screen and (min-width: 1024px) {

	html.mobile-no ul.songs li
	{
	width: 30%;
	float: left;
	margin-right: 5%;
	}

	html.mobile-no ul.songs li:nth-child(3n)
	{
	margin-right: 0;
	}

	html.mobile-no ul.songs li:nth-child(3n+1)
	{
	clear: both;
	}

	html.mobile-no #video
	{
	font-size: 1.5em;
	}

	html.mobile-no #video .slides>div>div>div
	{
	display: inline-block;
	}

	html.mobile-no #video .slides>div>div>div+div:before
	{
	content: "/";
	padding: 0 0.5em;
	display: inline-block;
	}
	
}