html, body
{
	margin: 0;
	padding: 0;
	background: #ba743e;

	font-family: 'Press Start 2P', cursive;
	line-height: 1.4em;
	color: #f8c2a6;
	text-shadow: 0 2px 0 #9c5547;
}

/* ==================== */
/* ===== PARALLAX ===== */
/* ==================== */

.parallax
{
	width: 100%;
	float: left;
	overflow-x: hidden;
}

.background
{
	background: url("../images/background.jpg") top center no-repeat;

	position: fixed;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.foreground
{
	position: absolute;
	width: 100%;
	height: 300%;
}

/* ==================== */
/* ===== MAIN SITE ==== */
/* ==================== */

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

.banner
{
	float: left;
	width: 100%;
	margin-top: 10%;
	margin-bottom: 20px;
}

.break
{
	width: 100%;
	float: left;
}

.border
{
	width: 100%;
	float: left;
	background: rgba(23, 11, 4, 0.8);
	background: url("../images/segments/thinvertical.png") top left repeat-y,
				url("../images/segments/thinvertical.png") top right repeat-y,
				rgba(23, 11, 4, 0.8);
	padding-left: 5px;
	padding-right: 5px;
	box-sizing: border-box;
}

.content
{
	width: 100%;
	padding: 2.5% 5% 2.5% 5%;
	line-height: 1.7em;
	box-sizing: border-box;
	float: left;
}

/* ==================== */
/* ======= MEDIA ====== */
/* ==================== */

.video
{
	width: 100%;
	float: left;
}

.screenshots 
{ 
	width: 100%;
	box-sizing: border-box;
	float: left; 

}
.screenshots img
{
	width: 33.3%;
	display: inline;
	float: left;
	opacity: 0.8;
	transition: opacity 0.25s;
}
.screenshots img:hover { opacity: 1; }
.screenshots a:last-child img { margin-right: 0; }

/* ==================== */
/* ==== CHARACTERS ==== */
/* ==================== */

.characters
{
	position: relative;
	width: 100%;
	float: left;
	box-sizing: border-box;
}

.character
{
	position: relative;
	width: 9.09%;
	height: 12%;
	background: #000;
	overflow: hidden;
	float: left;
	cursor: pointer;
}

.character img
{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -16px;
	opacity: 0.6;
	transition: bottom 0.25s, opacity 0.25s;
}

.character .edge
{
	position: absolute;
	top: 0;
	right: 0;
	width: 4px;
	bottom: 0;
	background: url("../images/segments/thinframecharacter.png") repeat-y;
}

.character:hover img
{
	opacity: 1;
	bottom: 0;
}

.gameplay
{
	position: relative;
	float: left;
	box-sizing: border-box;
	width: 100%;
	height: 445px;
}

.gameplay img
{
	position: absolute;
	width: 100%;
}

/* ==================== */
/* ======= MODES ====== */
/* ==================== */

.image-left, .image-right
{
	padding: 0;
}

.image-left img
{
	float: left;
	width: 40%;
}
.image-left span
{
	float: right;
	width: 60%;
	padding: 20px;
	box-sizing: border-box;
}

.image-right img
{
	float: right;
	width: 40%;
}
.image-right span
{
	float: left;
	width: 60%;
	padding: 20px;
	box-sizing: border-box;
}

/* ==================== */
/* ======= FOOTER ===== */
/* ==================== */

.footer
{
	width: 100%;
	padding: 120px 0px 120px;
	text-align: center;
	float: left;
}

/* ==================== */
/* ==== SCALE SITE ==== */
/* ==================== */
@media (min-width: 1600px) {
	.background { background-size: cover; }
}

@media (max-width: 888px) {
	body { font-size: 0.75em; }
	.wrapper { max-width: 90%; }
	.break
	{
		background: url("../images/segments/break_left.png") top left no-repeat, 
					url("../images/segments/break_right.png") top right no-repeat,
					url("../images/segments/break.png") top center no-repeat;
	}
	.bigbreak
	{
		background: url("../images/segments/bigbreak_left.png") top left no-repeat, 
					url("../images/segments/bigbreak_right.png") top right no-repeat,
					url("../images/segments/bigbreak.png") top center no-repeat;
	}
	.title
	{
		background: url("../images/segments/title_left.png") top left no-repeat, 
					url("../images/segments/title_right.png") top right no-repeat,
					url("../images/segments/title.png") top center no-repeat;
	}
}

@media (max-width: 500px) {

	.image-left img, .image-right img { width: 100%; }
	.image-left span, .image-right span { width: 100%; }

}