html, body 
{ 
	width: 100%;
	height: 100%;
	background: #fbc254;
	font-family: helvetica, sans-serif;
}

.section
{
	position: relative;
	width: 100%;
	float: left;
}

.wrapper
{
	width: 800px;
	margin: 0 auto;
}


@media(max-width: 888px)
{
	.wrapper { width: 90%; margin-left: 5%; }
}

.press
{
	position: fixed;
	right: 16px;
	top: 16px;
	padding: 8px 16px 8px 16px;
	background: #fd4076;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

.bugs
{
	position: fixed;
	right: 16px;
	top: 69px;
	padding: 8px 16px 8px 16px;
	background: #fd4076;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

.press:hover,.bugs:hover { color: #fd4076; background: #000; }

/* ---- BANNER ---- */
/* ---------------- */

.banner
{
	height: 100%;
	overflow: hidden;
	background: url("../img/spiritbanner/bg.png") repeat-x;
}

	@-webkit-keyframes bgstars
	{
		from { transform: translate3d(0, 0, 0); }
		to { transform: translate3d(-3216px, 2904px, 0); }
	}

	.banner .bgstars
	{
		position: absolute;
		left: 0;
		top: -2904px;
		width: 5000px;
		height: 4000px;
		background-repeat: repeat;
		background-image: url("../img/spiritbanner/bgstars.png");
		-webkit-animation: bgstars 60s linear infinite;
		animation: bgstars 60s linear infinite; 
	}

	@-webkit-keyframes stars
	{
		from { transform: translate3d(0, 0, 0); }
		to { transform: translate3d(-4824px, 5024px, 0); }
	}

	.banner .stars 
	{ 
		position: absolute;
		left: 0;
		top: -5024px;
		width: 8000px;
		height: 8000px;
		background-repeat: repeat;
		background-image: url("../img/spiritbanner/stars.png");
		-webkit-animation: stars 10s linear infinite;
		animation: stars 10s linear infinite; 
	}

	.banner .parallax
	{
		position: absolute;
		width: 100%;
		height: 300%;
		background-repeat: repeat-x;
		background-position: center top;
	}

	.banner .cloudsA { background-image: url("../img/spiritbanner/cloudsA.png"); }
	.banner .cloudsB { background-image: url("../img/spiritbanner/cloudsB.png"); }

	.banner .wandersong
	{
		width: 100%;
		height: 100%;
		position: absolute;
		text-align: center;
	}

	.banner .wandersong img 
	{
		position: absolute; 
		left: 50%;
		top: 50%;
		transform: translate3d(-50%, -50%, 0);
		max-width: 100%; max-height: 100%; 
	}

	.banner .overlay
	{
		position: absolute;
		width: 100%;
		height: 100%;
		background: url("../img/spiritbanner/overlay.png") repeat-x center bottom;
	}

/* --- greg ---- */
.merch
{
	width: 100%;
	padding-bottom: 20px;
	float: left;
	text-align:center;
}

.merchl
{
	width: 100%;
	padding-bottom: 20px;
	float: left;
outline-color: #fd4076;
	outline-width:5px;
}

.merchl img
{
	float: left;
	max-width: 100%;
	margin-top: 20px;
	
	outline-color: #fd4076;
	outline-width:5px;
	outline-style:auto;
}

.merchr
{
	width: 100%;
	padding-bottom: 20px;
	float: left;
}

.merchr img
{
	max-width: 100%;
	float: right;
	margin-top: 20px;
	
	outline-color: #fd4076;
	outline-width:5px;
	outline-style:auto;
}

.merch img 
{ 
	width: 100%; 
	float: left; 
	margin-bottom: 20px;
}

.ost{
	margin-bottom: 20px;
	text-align:center;
}

.ost iframe{
	margin:0 auto;
	width: 100%;
}
@media(min-width: 800px){
	.ost iframe{
		margin:0 auto;
		margin-left: 6.25%;
		width: 94.75%;
	}	
}


.ost h2{
	color: #550085;
	font-size: 1.35em;
	line-height: 1.3em;
}

.ost h2 a{
	color: #fd4076;
}

/* ----- BUTTONS ---- */
/* ------------------ */

.buttons
{
	width: 100%;
	padding-bottom: 20px;
	float: left;
}

.buttons a
{
	width: 32%;
	margin-right: 2%;
	float: left;
	transition: margin 0.25s, padding 0.25s;
}

.buttons a span.box
{
	width: 100%;
	float: left;
	background: #fd4076;
	color: #fff;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 0 0 rgba(0,0,0,0);
	transition: box-shadow 0.25s, background 0.25s;
}

.buttons a img 
{ 
	width: 40px; 
	margin: 10px;
	margin-right: 0;
	float: left; 
}
.buttons a span.title 
{ 
	margin-top: 20px;
	width: calc(100% - 80px);
	text-align: center;
	font-weight: bold;
	font-size: 1.4em;
	float: left;
}
.buttons a span.title img
{ 
	margin-left: 40px;
	margin-top:0;
	width: calc(100% - 80px);
	float: left;
}
.buttons a span.subtitle 
{ 
	width: 100%; 
	padding: 8px;
	font-weight: bold;
	box-sizing: border-box;
	float: left;
	color: rgba(255,255,255,0.8);
	background: rgba(0,0,0, 0.25);
	transition: background 0.25s;
}

.buttons .wrapper a:last-child  { margin-right: 0; }
.buttons_2 .wrapper a:first-child  { margin-left:16%; }

.buttons a:hover 
{ 
	margin-top: -20px;
	padding-bottom: 20px;
}
.buttons a:hover span.box
{
	background: #000;
	box-shadow: 0 20px 15px rgba(0,0,0,0.4);
}
.buttons a:hover span.subtitle
{
	background: rgba(255,255,255,0.15);
}

@media(max-width: 800px)
{
	.buttons a { width: 100%; margin-right: 0; margin-bottom: 10px; }
	.buttons a img { width: 32px; margin: 10px; margin-right: 0; }
	.buttons a span.title { margin-top: 16px; }
	.buttons a:hover { margin-top: -5px; padding-bottom: 5px; }
}

/* ----- MEDIA ---- */
/* ---------------- */

.video
{
	width: 100%;
	padding-bottom: 200px;
	float: left;
	background: url("../img/castle.png") repeat-x center bottom;
}

.video a { margin: 0; padding: 0; }
.video a img
{
	width: calc(34% - 8px);
	float: left;
	margin: 0 4px 4px 0;
	padding: 0;
}
.video a:nth-child(3n+1) img
{
	margin-right: 0;
}

.video .trailer { 
	float: left; 
	width: 100%; 
	background-color: #000; 
	margin-bottom: 20px;
}


/* ---- CONTENT --- */
/* ---------------- */

.content
{
	width: 100%;
	float: left;
	background: #550085;
	font-size: 1.35em;
	color: #fbc254;
	line-height: 1.3em;
	padding: 60px 0 0 0;
}

.content h2 { text-align: center; }

.content a { color: #fd4076; text-decoration: none; font-weight: bold; }
.content a:hover { color: #fff; }
.content b { font-weight: bold; }

/* ----- TEAM ----- */
/* ---------------- */

.team
{
	width: 100%;
	float: left;
	background: #550085;
	padding: 60px 0 60px 0;
}

.team a
{
	width: 30%;
	float: left;
	margin-right: 5%;
	text-decoration: none;
	transition: margin 0.25s;
	text-align: center;
}
.team a:nth-child(3n+0) { margin-right: 0; }

.team a img { width: 100%; border-radius: 50%; transition: border-radius 0.25s; }
.team h1 { color: #fbc254; font-size: 1.4em; line-height: 1.0em; margin: 0; padding: 12px 0 0 0; }
.team h2 { color: #fd4076; font-size: 1.1em; line-height: 1.0em; margin: 0; padding: 6px 0 0 0; }

.team a:hover { margin-top: -32px; }
.team a:hover img { border-radius: 8px; }

@media(max-width: 600px)
{
	.video { padding-bottom: 100px; }
	.content { font-size: 1.1em; padding-top: 5%; }
	.team { padding-top: 5%; }
	.team h1 { font-size: 0.8em; }
	.team h2 { font-size: 0.7em; }
}

/* ---- FOOTER ---- */
/* ---------------- */

.footer
{
	background: #000;
	padding: 120px 0 120px 0;
	text-align: center;
	font-size: 1.2em;
	line-height: 1.6em;
	color: #666;
}
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { color: #fbc254; }

.siteby { font-size: 0.7em; }