body {
	background: #111;
	color: #ccc;
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
	font-size: 16px;
}

h1, h2 {
	text-transform: uppercase;
	font-weight: 300;
	text-align: center;
}

h1 {
	color: #f45c0d;
	font-size: 40px;
	line-height: 38px;
	margin-bottom: .5em;
	font-weight: 300;
}

h2 {
	color: rgba(255, 255, 255, .75);
	font-size: 16px;
	letter-spacing: 1px;
	font-weight: 300;
	font-variant: normal;
}

h3 {
	color: rgba(255, 255, 255, 1);
	font-size: 20px;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 1px;
	line-height: 1em;
	margin-bottom: 8px;
}

h4 {
	font-weight: 400;
	margin: 32px 0 4px 0;
}

h4 a {
	color: #F45D0E;
}

h4 a:hover {
	color: #fff;
}

p {
	line-height: 1.5em;
	margin-bottom: 1em;
	font-weight: 300;
	font-size: 16px;
}

a {
	color: #fff;
	text-decoration: none;
}

a:hover {
	color: #F45D0E;
}

#intro {
	color: rgba(255, 255, 255, .75);
	font-size: 16px;
	letter-spacing: 1px;
	font-weight: 300;
	font-variant: normal;
}


h1#phoboslab-logo {
	text-indent: -5000px;
	overflow: hidden;
	color: #fff;
	margin-top: 6em;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE2MHB4IiBoZWlnaHQ9IjIwcHgiIHZpZXdCb3g9IjAgMCAxNjAgMjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPHRpdGxlPlBIT0JPU0xBQjwvdGl0bGU+CiAgICA8ZyBpZD0iUEhPQk9TTEFCIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMC4zMzgsMS4yNjMgTDYuNTIwLDEuMjYzIEMxMC4xNjcsMS4yNjMgMTIuMDAzLDQuMjE4IDEyLjAwMyw3LjE3NCBDMTIuMDAzLDEwLjEzMCAxMC4xNjcsMTMuMDYxIDYuNTIwLDEzLjA2MSBMMi44MDEsMTMuMDYxIEwyLjgwMSwxOC45NDcgTDAuMzM4LDE4Ljk0NyBMMC4zMzgsMS4yNjMgWiBNMi44MDEsMTAuNTM0IEw2LjUyMCwxMC41MzQgQzguNTczLDEwLjUzNCA5LjU4Nyw4Ljg2NyA5LjU4Nyw3LjIgQzkuNTg3LDUuNTA3IDguNTczLDMuODQgNi41MjAsMy44NCBMMi44MDEsMy44NCBMMi44MDEsMTAuNTM0IFogTTE5LjI4NSwxLjI4OCBMMTkuMjg1LDguNzQxIEwyNi40MzQsOC43NDEgTDI2LjQzNCwxLjI4OCBMMjguODk3LDEuMjg4IEwyOC44OTcsMTguOTQ3IEwyNi40MzQsMTguOTQ3IEwyNi40MzQsMTEuMjY3IEwxOS4yODUsMTEuMjY3IEwxOS4yODUsMTguOTQ3IEwxNi44NDYsMTguOTQ3IEwxNi44NDYsMS4yODggTDE5LjI4NSwxLjI4OCBaIE00OS4wNTMsMTAuMTA1IEM0OS4wNTMsOC4yODYgNDguMzUyLDYuNjk0IDQ3LjI2Niw1LjUzMiBDNDYuMTMwLDQuMzQ1IDQ0LjU2MSwzLjYxMiA0Mi44OTQsMy42MTIgQzQxLjIyOCwzLjYxMiAzOS42ODIsNC4zNDUgMzguNTcxLDUuNTMyIEMzNy40NjAsNi42OTQgMzYuNzYwLDguMzExIDM2Ljc2MCwxMC4xMDUgQzM2Ljc2MCwxMS44OTggMzcuNDYwLDEzLjUxNSAzOC41NzEsMTQuNjc3IEMzOS42ODIsMTUuODY1IDQxLjIyOCwxNi41OTcgNDIuODk0LDE2LjU5NyBDNDQuNTYxLDE2LjU5NyA0Ni4xMzAsMTUuODY1IDQ3LjI2NiwxNC42NzcgQzQ4LjM1MiwxMy41MTUgNDkuMDUzLDExLjkyNCA0OS4wNTMsMTAuMTA1IEw0OS4wNTMsMTAuMTA1IFogTTM0LjI5NywxMC4xMDUgQzM0LjI5Nyw3LjYwNCAzNS4yODcsNS4zNTUgMzYuODA4LDMuNzEzIEMzOC4zNTQsMi4wNzEgNDAuNTI3LDEuMDM1IDQyLjg5NCwxLjAzNSBDNDUuMjg1LDEuMDM1IDQ3LjQzNSwyLjA3MSA0OS4wMDQsMy43MTMgQzUwLjUyNiw1LjM1NSA1MS41MTYsNy42MDQgNTEuNTE2LDEwLjEwNSBDNTEuNTE2LDEyLjYwNiA1MC41MjYsMTQuODU0IDQ5LjAwNCwxNi40OTYgQzQ3LjQzNSwxOC4xNjQgNDUuMjg1LDE5LjE3NCA0Mi44OTQsMTkuMTc0IEM0MC41MjcsMTkuMTc0IDM4LjM1NCwxOC4xNjQgMzYuODA4LDE2LjQ5NiBDMzUuMjg3LDE0Ljg1NCAzNC4yOTcsMTIuNjA2IDM0LjI5NywxMC4xMDUgTDM0LjI5NywxMC4xMDUgWiBNNTkuMjEwLDMuNzEzIEw1OS4yMTAsOC4zMTEgTDYzLjc3NCw4LjMxMSBDNjYuNDMxLDguMzExIDY2LjQ3OSwzLjcxMyA2My44MjIsMy43MTMgTDU5LjIxMCwzLjcxMyBaIE01Ni43OTQsMS4yODggTDYzLjgyMiwxLjI4OCBDNjUuOTQ4LDEuMjg4IDY3LjMwMCwyLjU1MSA2Ny45MjgsNC4xOTMgQzY4LjYwNCw1LjkzNiA2OC4zODcsNy45NTcgNjYuNjk2LDkuMjIxIEM2OC42MjgsMTAuMDggNjkuMzI5LDExLjk0OSA2OS4zMjksMTMuNjE2IEM2OS4zMjksMTYuMjY5IDY3LjY2MiwxOC45NDcgNjQuNDI2LDE4Ljk0NyBMNTYuNzk0LDE4Ljk0NyBMNTYuNzk0LDEuMjg4IFogTTU5LjIxMCwxMC44MzcgTDU5LjIxMCwxNi40NzEgTDY0LjQyNiwxNi40NzEgQzY2LjA2OCwxNi40NzEgNjYuODkwLDE1LjAzMSA2Ni44OTAsMTMuNjQyIEM2Ni44OTAsMTIuMjUyIDY2LjA2OCwxMC44MzcgNjQuNDI2LDEwLjgzNyBMNTkuMjEwLDEwLjgzNyBaIE04OC42MzksMTAuMTA1IEM4OC42MzksOC4yODYgODcuOTM4LDYuNjk0IDg2Ljg1Miw1LjUzMiBDODUuNzE3LDQuMzQ1IDg0LjE0NywzLjYxMiA4Mi40ODAsMy42MTIgQzgwLjgxNCwzLjYxMiA3OS4yNjgsNC4zNDUgNzguMTU3LDUuNTMyIEM3Ny4wNDYsNi42OTQgNzYuMzQ2LDguMzExIDc2LjM0NiwxMC4xMDUgQzc2LjM0NiwxMS44OTggNzcuMDQ2LDEzLjUxNSA3OC4xNTcsMTQuNjc3IEM3OS4yNjgsMTUuODY1IDgwLjgxNCwxNi41OTcgODIuNDgwLDE2LjU5NyBDODQuMTQ3LDE2LjU5NyA4NS43MTcsMTUuODY1IDg2Ljg1MiwxNC42NzcgQzg3LjkzOCwxMy41MTUgODguNjM5LDExLjkyNCA4OC42MzksMTAuMTA1IEw4OC42MzksMTAuMTA1IFogTTczLjg4MywxMC4xMDUgQzczLjg4Myw3LjYwNCA3NC44NzMsNS4zNTUgNzYuMzk0LDMuNzEzIEM3Ny45NDAsMi4wNzEgODAuMTE0LDEuMDM1IDgyLjQ4MCwxLjAzNSBDODQuODcxLDEuMDM1IDg3LjAyMSwyLjA3MSA4OC41OTEsMy43MTMgQzkwLjExMiw1LjM1NSA5MS4xMDIsNy42MDQgOTEuMTAyLDEwLjEwNSBDOTEuMTAyLDEyLjYwNiA5MC4xMTIsMTQuODU0IDg4LjU5MSwxNi40OTYgQzg3LjAyMSwxOC4xNjQgODQuODcxLDE5LjE3NCA4Mi40ODAsMTkuMTc0IEM4MC4xMTQsMTkuMTc0IDc3Ljk0MCwxOC4xNjQgNzYuMzk0LDE2LjQ5NiBDNzQuODczLDE0Ljg1NCA3My44ODMsMTIuNjA2IDczLjg4MywxMC4xMDUgTDczLjg4MywxMC4xMDUgWiBNMTA4LjAyMSw1LjczNCBMMTA1LjYwNiw1LjgzNSBDMTA1LjI2OCw0LjI0NCAxMDMuNjI2LDMuNTYyIDEwMi4xNTMsMy41ODcgQzEwMS4wMTgsMy42MTIgOTkuNzYyLDQuMDE2IDk5LjA4NSw0LjkyNiBDOTguNzQ3LDUuMzgxIDk4LjYyNyw1Ljk2MiA5OC42NzUsNi41NjggQzk4Ljc5Niw4LjM4NyAxMDAuNzA0LDguNjE0IDEwMi41MTUsOC43OTEgQzEwNC44MzMsOS4wOTQgMTA3LjcwNyw5LjcyNiAxMDguMzU5LDEyLjU1NSBDMTA4LjQzMiwxMi45MzQgMTA4LjQ4MCwxMy4zNjQgMTA4LjQ4MCwxMy43MTcgQzEwOC40ODAsMTcuMTI4IDEwNS4yNDQsMTkuMDk4IDEwMi4yMDEsMTkuMDk4IEM5OS41OTMsMTkuMDk4IDk2LjQyOSwxNy40ODIgOTYuMTE1LDE0LjMyNCBMOTYuMDkxLDEzLjg0NCBMOTguNTU0LDEzLjc5MyBMOTguNTc4LDE0LjE3MiBMOTguNTc4LDE0LjA3MSBDOTguNzQ3LDE1LjcxMyAxMDAuNjU1LDE2LjU3MiAxMDIuMjI1LDE2LjU3MiBDMTA0LjAzNiwxNi41NzIgMTA2LjAxNywxNS41MTEgMTA2LjAxNywxMy42OTIgQzEwNi4wMTcsMTMuNTE1IDEwNS45OTMsMTMuMzEzIDEwNS45NDQsMTMuMDg2IEMxMDUuNjU1LDExLjc0NyAxMDMuOTE2LDExLjUyIDEwMi4yMjUsMTEuMzQzIEM5OS41OTMsMTEuMDY1IDk2LjUwMSwxMC40NTggOTYuMjM2LDYuNzcwIEw5Ni4yMzYsNi43OTUgQzk2LjEzOSw1LjYwOCA5Ni40MjksNC40MjEgOTcuMTUzLDMuNDM1IEM5OC4yODgsMS44OTQgMTAwLjMxNywxLjA4NiAxMDIuMjczLDEuMDg2IEMxMDQuODgyLDEuMDg2IDEwNy41ODcsMi41MDEgMTA4LjAyMSw1LjczNCBMMTA4LjAyMSw1LjczNCBaIE0xMTUuODg0LDEuMjg4IEwxMTUuODg0LDE2LjM5NSBMMTIzLjgyOSwxNi4zOTUgTDEyMy44MjksMTguOTQ3IEwxMTMuNDQ1LDE4Ljk0NyBMMTEzLjQ0NSwxLjI4OCBMMTE1Ljg4NCwxLjI4OCBaIE0xMzMuMDIwLDExLjM0MyBMMTM3LjIyMiwxMS4zNDMgTDEzNS4xNDUsNS4xMDMgTDEzMy4wMjAsMTEuMzQzIFogTTEzOC4xNjQsMTMuNzQzIEwxMzIuMTAyLDEzLjc0MyBDMTMxLjQ1MCwxNS4zNiAxMzAuNjA1LDE3LjQ4MiAxMzAuMDc0LDE4Ljk0NyBMMTI3LjQ0MSwxOC45NDcgTDEzNC4yMjgsMS4wMzUgTDEzNi4wMTUsMS4wMzUgTDE0Mi44MDEsMTguOTQ3IEwxNDAuMTkzLDE4Ljk0NyBMMTM4LjE2NCwxMy43NDMgWiBNMTQ5LjIzOSwzLjcxMyBMMTQ5LjIzOSw4LjMxMSBMMTUzLjgwMyw4LjMxMSBDMTU2LjQ2MCw4LjMxMSAxNTYuNTA4LDMuNzEzIDE1My44NTIsMy43MTMgTDE0OS4yMzksMy43MTMgWiBNMTQ2LjgyNCwxLjI4OCBMMTUzLjg1MiwxLjI4OCBDMTU1Ljk3NywxLjI4OCAxNTcuMzI5LDIuNTUxIDE1Ny45NTcsNC4xOTMgQzE1OC42MzQsNS45MzYgMTU4LjQxNiw3Ljk1NyAxNTYuNzI2LDkuMjIxIEMxNTguNjU4LDEwLjA4IDE1OS4zNTgsMTEuOTQ5IDE1OS4zNTgsMTMuNjE2IEMxNTkuMzU4LDE2LjI2OSAxNTcuNjkyLDE4Ljk0NyAxNTQuNDU2LDE4Ljk0NyBMMTQ2LjgyNCwxOC45NDcgTDE0Ni44MjQsMS4yODggWiBNMTQ5LjIzOSwxMC44MzcgTDE0OS4yMzksMTYuNDcxIEwxNTQuNDU2LDE2LjQ3MSBDMTU2LjA5OCwxNi40NzEgMTU2LjkxOSwxNS4wMzEgMTU2LjkxOSwxMy42NDIgQzE1Ni45MTksMTIuMjUyIDE1Ni4wOTgsMTAuODM3IDE1NC40NTYsMTAuODM3IEwxNDkuMjM5LDEwLjgzNyBaIE0xNDkuMjM5LDEwLjgzNyI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4=);
	background-position: center 0;
	background-repeat: no-repeat;
	padding: 0;
	background-size: 480px 60px;
	height: 60px;
	margin-bottom: 30px;
}

canvas#bg {
	position: fixed;
	left: 0;
	top: 0;
}

div#content {
	width: 100%;
	margin: 1em 0 6em 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 2;
}

div#head {
	position: relative;
	min-width: 320px;
	max-width: 1024px;
	margin: 0 auto;
	text-align: center;	
}

div.section {
	min-width: 320px;
	max-width: 1024px;
	margin: 0 auto;

	padding-top: 64px; 
}

div.section-head {
	margin-bottom: 6em;
}

div#foot p {
	text-align: center;
	font-size: 12px;
	margin-bottom: 32px;
}


/* ------------------------------------------------------------------------- 
Columns */

div.columns {
	left: 0;
	right: 0;
	margin: 0 auto;
}

div.columns-1 { width: 320px; }
div.columns-2 { width: 640px; }
div.columns-3 { width: 960px; }

div.column-box {
	text-align: left;
	width: 288px;
	float: left;
	padding: 0 16px 64px 16px;
}

div.columns-1 div.column-box,
div.columns-2 div.column-box:nth-child(2n+1),
div.columns-3 div.column-box:nth-child(3n+1) {
	clear: left;
}

div.column-3-2, 
div.column-3-1-2 
{
	float: left;
	padding: 0 20px 32px 20px;
	width: 280px;
}

div.columns-2 div.column-3-2, 
div.columns-3 div.column-3-2,
div.columns-2 div.column-3-1-2 {
	width: 600px;
}

div.columns-1 h1#phoboslab-logo {
	margin-top: 3em;
	background-size: 280px 40px;
	height: 60px;
	margin-bottom: 30px;
}


/* ------------------------------------------------------------------------- 
Hamburger Menu for mobile */

div#menu {
	display: none;
}

a#menu-button {
	opacity: 0.7;
	position: fixed;
	top: 12px;
	right: 18px;
	z-index: 12;
	width: 20px;
	height: 11px;
	border-top: 3px solid #fff;
	border-bottom: 3px solid #fff;
	background-repeat: no-repeat;
}

a#menu-button span {
	background-color: #fff;
	position: absolute;
	top: 50%;

	left: 0;
	width: 100%;
	height: 3px;
	margin-top: -1.5px; /* half height */
}

a.menu-button:hover {
	border-top: 0.375em double rgba(244, 93, 14, 1);
	border-bottom: 2px solid rgba(244, 93, 14, 1);
}

div#menu-items {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,.8);
	width: 100%;
	z-index: 9;
	border-bottom: 1px solid rgba(0,0,0,1);
}

div#menu-items a {
	display: block;
	padding: 8px 8px 8px 16px;
	background: rgba(255,255,255,.05);
	border-bottom: 1px solid rgba(255,255,255,.15);
	text-transform: uppercase;
}



/* ------------------------------------------------------------------------- 
Scroll Tip and Arrow */

a.scroll-tip {
	display: block;
	position: fixed;
	right: 20px;
	height: 16px;
	top: 0;
	z-index: 10;
	font-size: 12px;
	background: rgba(0, 0, 0, .45);
	color: rgba(255, 255, 255, .7);
	padding: 5px 5px;
	border-radius: 3px;
	border-bottom-right-radius: 0; 
	border-top-right-radius: 0;
	font-weight: 400;
}

a.scroll-tip.active:hover, a.scroll-tip:hover {
	color: rgba(255, 255, 255, .85);
	background: rgba(244, 93, 14, 1);
}

a.scroll-tip.active {
	color: rgba(255, 255, 255, .9);
}

a.scroll-tip:after {
	content: " ";
	display: block;
	position: absolute;
	right: -13px;
	height: 0;
	top: 0;
	border-top: 13px solid transparent;
	border-left: 13px solid rgba(0, 0, 0, .45);
	border-bottom: 13px solid transparent;
}

a.scroll-tip:hover:after {
	border-left: 13px solid rgba(244, 93, 14, 1);
}



/* ------------------------------------------------------------------------- 
Games */

div.game p {
	font-size: 14px;
	color: rgba(255, 255, 255, .8);
}

div.game h3 {
}

	
div.game p.available {
	margin-top: 2em;
	margin-bottom: 0em;
}

img.game-screenshot {
	margin-left: -4px;
	border-radius: 8px;
	border: 4px solid rgba(0, 0, 0, .15);
	width: 280px;
}

span.year {
	color: rgba(255, 255, 255, .3);
	font-weight: 300;
	letter-spacing: 1px;
}

a.button {
	font-size: 12px;
	background: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .7);
	padding: 3px 6px;
	border-radius: 3px;
	font-weight: 400;
}

a.button:hover {
	color: rgba(255, 255, 255, .85);
	background: rgba(244, 93, 14, 1);
}

.clear {
	clear: both;
}



/* ------------------------------------------------------------------------- 
Projects */

div.project {
	padding: 0 16px 64px 16px;
}

div.project:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

img.project-screenshot {
	margin-left: -4px;
	border-radius: 8px;
	border: 4px solid rgba(0, 0, 0, .15);
}

div.columns-3 img.project-screenshot {
	float: left;
	width: 600px;
	margin-right: 32px;
}

div.columns-2 img.project-screenshot {
	width: 600px;
	margin-bottom: 16px;
}

div.columns-1 img.project-screenshot {
	width: 280px;
}


/* -------- Blog */

blockquote {
	position:relative;
	margin: 48px 0 64px 0;
	font-size: 14px;
	line-height: 1.5em;
	color: rgba(255,255,255,.85);
	font-style: italic;
	font-weight: 300;
	text-indent: 24px;
}

blockquote:before {
	display: block;
	content: "\201C";
	font-size: 72px;
	position: absolute;
	left: -40px;
	top: 0px;
	color: rgba(255,255,255,0.5);
}

cite {
	margin-top: 4px;
	font-style: normal;
	text-indent: 0;
	display: block;
}

cite:before {
	content: "\2014 \2009";
}

a.author {
	font-weight: 400;
	text-transform: uppercase;
	color: rgba(244, 93, 14, 1);
}

a.author:hover {
	color: #fff;
}

p.abstract {
	margin: 4px 0 8px 8px;
	font-size: 14px;
	font-weight: 300;
}

div.blog-articles {
	/*margin-bottom: 64px;*/
	margin: 48px 0 64px 0;
}