/*
	Dark Violet: #312f33
	Darker Violet: #222123
	Darker Violet: #1d1c1e
	White: #ffffe9
	Blue: #99d8ff
*/
*, *::before, *::after { box-sizing: border-box;}
html, body, h1, h3, h4, p { margin:0; padding:0;}
html, body {
	height: 100%;
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
body {
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	letter-spacing:0.35px;
	color: #ffffe9;
	background-color: #262527;
}
a { color:#99d8ff;}
strong { font-weight:bolder;}

.container {position:relative; width:100%; max-width:1140px; margin:0 auto;}
.container-wide {position:relative; width:100%; max-width:1280px; margin:0 auto;}
.row { display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap;}
.col {-ms-flex-preferred-size:0; flex-basis:0; -ms-flex-positive:1; flex-grow:1; max-width:100%;}
.col-min {-ms-flex:0 0 auto; flex:0 0 auto; width:auto; max-width:100%;}
.col-4 { position:relative; width:100%; -ms-flex:0 0 33.333333%; flex:0 0 33.333333%; max-width:33.333333%;}
.col-6 { position:relative; width:100%; -ms-flex:0 0 50%; flex:0 0 50%; max-width:50%;}
.justify-content-center {-ms-flex-pack:center!important; justify-content:center!important;}
.line-break { height:2px; background-color:#262527;}
.blue-streak { height:2px; background-color:#99d8ff;}

/************************** Page Sections */
.header-section, .line-break, .footer-section { flex-shrink:0;}
.header-section { background-color:#312f33;}
.main-section { flex:1 0 auto; padding:40px 24px; font-family:"Raleway"; line-height:28px; background-color:#312f33;}
/*.main-section .container{ padding:0 20px; background-color:#312f33;}*/
.footer-section { padding:15px 0px; background-color:#262527;}
.footer-section p { margin:0; font-size:16px;}

/************* BOX MODULE *************/
.box-collection 		{ margin-left:-1.4%; margin-right:-1.4%;}
.box-collection div		{ min-width:310px!important;}
.box-container-square	{ width:100%; padding-top:100%; position:relative;}
.box-container-rect 	{ width:100%; padding-top:50%; position:relative;}
.box-inner-small 		{ position:absolute; top:0; padding:4%; width:100%; height:100%;}
.box-inner-big 			{ position:absolute; top:0; padding:2%; width:100%; height:100%;}

/************************** Game Card */
.project-card 			{ display:block; position:relative; width:100%; height:100%; margin:0; padding:0%; text-align:center; text-decoration:none; line-height:20px; color:#ffffe9; background:#262527; transition:all .2s;}
.project-card:hover		{ transform:scale(1.05);}
.project-card .project-title	{ display:block; height:42px; margin:0; padding-left:0px; padding-top:10px; font-weight:600; color:#312f33; background:#99d8ff;}
.project-card .project-image 	{ display:block; position:relative; height:56%; padding:0; line-height:0px; text-align:left; overflow:hidden;}
.project-card .project-image img{ display:block; position:relative;}
.project-card .project-info		{ display:block; padding:0px 12px; padding-top:6%; font-family:'Raleway'; font-weight:normal;}
.project-card .project-date		{ display:block; position:absolute; bottom:0; width:100%; padding:7% 3%; font-family:'Oxygen'; font-size:14px; line-height:14px; font-weight:bold; color:#99d8ff;}
.project-card .project-tri		{ display:block; position:absolute; bottom:0; right:0; width:0; height:0; margin:3%; border-top-width:20px; border-top-style:solid; border-top-color:transparent; border-right-width:20px; border-right-style:solid; border-right-color:#99d8ff;}

h1 { margin-top:29px; margin-bottom:29px; margin-left:22px; font-family:"Big Shoulders Text", "Saira Extra Condensed"; font-size:58px; font-weight:100; line-height:44px; letter-spacing:1px; color:#99d8ff;}
h3 { margin-bottom:36px; font-weight:normal; font-size:30px;}
h4 { margin-bottom:6px; font-size:20px; color:#99d8ff;}
p { margin-bottom:14px; font-size:18px;}
nav { margin:auto 0; width:auto; height:100%; float:right; overflow:hidden;}
nav a { display:flex; flex-direction:column; justify-content:center; width:128px; height:100%; position:relative; padding-top:0px; text-align:center; font-weight:600; font-size:12px; line-height:100%; letter-spacing:2px; color:#99d8ff; text-decoration:none; white-space:nowrap;}
nav a:hover { color:#312f33; background-color:#99d8ff;}

.button-blue { display:block; position:absolute; top:73%; left:0; right:0; width:200px; height:40px; margin:0 auto; padding:10px 0; line-height:16px; border:2px solid #99d8ff; text-align:center; text-decoration:none;}
.button-blue:hover { background:#99d8ff; color:#262527;}
.game-display { position:relative; width:560px; height:315px; margin:0 auto; background:#262527; overflow:hidden;}
.game-display img { position:relative; width:100%; transform:scale(1.4);}
.about-images, .screenshots { margin-top:40px; line-height:0;}
.about-images img { margin:0px 20px; border:2px #262527;}
.screenshots { width:92%; margin-left:auto; margin-right:auto;}
.screenshots .col-4 { padding:10px 10px; }

.copyright { padding:0px 24px; color:#ffffe9;}