:root
{
	--main_bg: #ffffff;
	--main_fg: #4d4d4d;
	font-size: 18px;
}

@font-face
{
	font-family: 'PTSans';
	src: url('fonts/PT_Sans-Narrow-Web-Regular.ttf');
}

@font-face
{
	font-family: 'Hind';
	src: url('fonts/Hind-Regular.ttf');
}

@font-face
{
	font-family: 'Hind';
	src: url('fonts/Hind-Bold.ttf');
	font-weight: bold;
}

::selection
{
	color: #ffffff;
	background: rgba(138,43,226,.99);
	text-shadow: none;
}

::-moz-selection
{
	color: #ffffff;
	background: rgba(138,43,226,.99);
	text-shadow: none;
}

body
{
	color: var(--main_fg);
	background-color: var(--main_bg);
	font-family: 'Hind', sans-serif;
	text-align: center;
	margin: 0 20px;
}

a
{
	color: #037ee2;
	text-decoration: none;
}

a:hover
{
	color: #0261ae;
	text-decoration: underline;
}

h1
{
	font-family: 'PTSans', sans-serif;
	text-transform: uppercase;
	font-size: 1.7rem;
	font-weight: 400;
	margin: 0;
}

#secondary h1
{
	border-top: 1px solid #e6e6e6;
	padding-top: 15px;
}

h2
{
	font-size: 1.1rem;
	margin: 0;
	margin-top: 1rem;
}

#page
{
	display: inline-block;
	margin: 0 auto;
	font-size: 0; /* to permit line breaks in the html between #navigation and #content */
}

#navigation
{
	font-size: 1rem;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	line-height: 2rem;
	padding: 1rem 0;
	padding-right: 20px;
}

#navigation a
{
	color: var(--main_fg);
	text-decoration: none;
}

#navigation li, #navigation h1
{
	padding: 0 10px;
}

#navigation li:hover
{
	background-color: #eaeaea;
}

#navigation ul
{
	margin: 0;
	margin-top: 0.5rem;
	padding: 0;
	list-style-type: none;
}

#content
{
	background-image: url('./img/kc_page_background.png');
	background-repeat: no-repeat;
	background-position: center -290px;
	background-size: 894px;
	line-height: 1.5rem;
	width: 900px;
	display: inline-block;
	vertical-align: top;
	text-align: center;
	font-size: 0; /* to permit line breaks in the html between #factsheet_menu and #primary */
}

#logo
{
	width: 604px;
	height: 278px;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	margin: 10px 0;
}

#factsheet_menu
{
	width: 25%;
	font-size: 1rem;
	background-color: var(--main_bg);
	box-sizing: border-box;
	vertical-align: top;
	display: inline-block;
	text-align: left;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

#factsheet_menu ul
{
	margin: 0px;
}

#primary, #secondary
{
	width: 75%;
	background-color: var(--main_bg);
	box-sizing: border-box;
	vertical-align: top;
	display: inline-block;
	text-align: left;
	padding-top: 1rem;
}

#primary div, #secondary div
{
	font-size: 1rem;
	margin: 1rem 0;
	box-sizing: border-box;
}

#videos_container
{
	font-size: 0 !important;
}

#trailer_wrapper
{
	display: inline-block;
	margin: 8px !important;
}

#trailer
{
	background-color: #180226;
}

video
{
	box-sizing: border-box;
	display: inline-block;
	margin: 8px;

	width: 533px;
	height: 334px;
}

video.video_square
{
	width: 334px;
	height: 334px;
}

#screenshots
{
	font-size: 0 !important;
}

.screenshot
{
	box-sizing: border-box;
	display: inline-block;
	margin: 8px;

	width: 433px;
	height: 244px;
}

a:nth-child(odd) .screenshot
{
	margin: 8px 9px 9px 8px;
}

#secondary
{
	padding: 0;
	width: auto;
	display: block;
}

#logo_gfx img
{
	box-sizing: border-box;
	border: 1px solid #d1d1d1;
	background-color: #eaeaea;
	display: block;
	background-image: url('./img/checkerboard.png');
	background-repeat: repeat;
	background-size: 45px;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

#logo_gfx .character
{
	display: inline-block;
	margin-right: 10px;
}

#logo_gfx a img
{
	margin-bottom: 10px;
}

#logo_gfx #characters
{
	margin: 0;
	font-size: 0;
}

.team_contact
{
	vertical-align: top;
	width: 50%;
	display: inline-block;
}

.contact_home:after
{
	content: " |";
	color: #dadada;
	font-weight: normal;
}

#copy
{
	font-size: 0.8rem !important;
	border-top: 1px solid #e6e6e6;
	padding-top: 15px;
	text-align: right;
}

@media screen and (max-width: 1200px)
{
	#page
	{
		width: 100%;
		margin: 0;
	}

	#navigation
	{
		width: 28%;
	}

	#content
	{
		width: 67%;
	}

	#factsheet_menu
	{
		width: 30%;
	}

	#primary
	{
		width: 70%;
	}

	#trailer_wrapper
	{
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
		margin: 8px 0 !important;
	}

	#trailer
	{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
	
	img:not(.char_img), video
	{
		width: 100% !important;
		height: auto !important;
		margin: 8px 0 !important;
	}
}

@media screen and (max-width: 950px)
{
	#logo
	{
		width: 302px;
		height: 139px;
	}

	#content
	{
		background-position: center -280px;
		background-size: 694px;
	}

	#factsheet_menu
	{
		width: 35%;
	}

	#primary
	{
		width: 65%;
	}
}

@media screen and (max-width: 800px)
{
	#page
	{
		width: 100%;
	}

	#navigation
	{
		width: 100%;
	}

	#content
	{
		width: 100%;
	}

	#factsheet_menu
	{
		width: 100%;
	}

	#primary
	{
		width: 100%;
	}
}

@media screen and (max-width: 650px)
{
	#logo_gfx a:nth-child(2):not(.character) img, #logo_gfx a:nth-child(4):not(.character) img
	{
		width: 80% !important;
		height: auto !important;
	}

	.team_contact
	{
		width: 100%;
	}
}