body {
	min-width:320px;
	max-width:1920px;
	margin:auto;
	background:#282828;
	font-family:SourceCodeProRegular;
}
header {
	position:fixed;
	left:0;
	right:0;
	top:0;
	width:100%;
	max-width:1920px;
	margin:auto;
	background:#282828;
	box-shadow:0px 2px 2px rgba(0,0,0,.5);
	z-index:3;
}
nav {
	width:320px;
	margin:auto;
}
nav a {
	display:inline-block;
	vertical-align:bottom;
	color:#fff;
	font-size:12px;
	line-height:20px;
	text-align:left;
	text-transform:uppercase;
}
nav a.menu {
	vertical-align:top;
	width:90px;
	line-height:60px;
	text-align:center;
}
nav a span {
	display:inline-block;
	vertical-align:bottom;
	width:40px;
}
nav a span:first-child {
	text-align:right;
}
nav a figure {
	display:inline-block;
	vertical-align:bottom;
	position:relative;
	top:30px;
	width:60px;
}
nav a figure:after {
	content:'';
	position:absolute;
	left:9px;
	top:9px;
	width:42px;
	height:42px;
	box-shadow:2px 2px 2px rgba(0,0,0,.5);
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
	z-index:-1;
}
nav a:hover, nav a:focus, nav a.active {
	color:#75c5f0;
}
main {
	width:100%;
	height:100%;
	padding-top:60px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	text-align:center;
}
h1 {
	display:block;
	border-top:1px solid #000;
	border-bottom:1px solid #000;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	box-shadow:0 29px rgba(255,255,255,.1) inset, 0 1px rgba(255,255,255,.2) inset;
	background:#282828 url('images/pixelcode_alpha.png') center no-repeat;
	color:#fff;
	font-size:24px;
	font-weight:normal;
	line-height:58px;
	text-align:center;
	text-transform:uppercase;
	cursor:default;
}
[class^='icon-'],
[class*=' icon-'] {
	font-family:'icon';
	speak:never;
	font-weight:normal;
	font-style:normal;
	font-variant:normal;
	text-transform:none;
	line-height:1;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
.icon-react:before {
	content:'\e900';
	color:#61dafb;
}
.icon-html:before {
	content:'\e901';
	color:#e34f26;
}
.icon-css:before {
	content:'\e902';
	color:#1572b6;
}
.icon-js:before {
	content:'\e903';
	color:#f7df1e;
}
.icon-tv:before {
	content:'\e904';
}
.icon-laptop:before {
	content:'\e905';
}
.icon-tablet:before {
	content:'\e906';
}
.icon-phone:before {
	content:'\e907';
}
.spacer {
	width:100%;
	padding:0 3.125%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background:#eee;
}
.spacer span {
	display:inline-block;
	vertical-align:middle;
	width:60px;
	height:40px;
	background:url('images/spacer.png') center no-repeat;
}
.spacer:before, .spacer:after {
	content:'';
	display:inline-block;
	vertical-align:middle;
	width:40%;
	height:1px;
	background:#282828;
}
section {
	display:table;
	width:100%;
	height:100%;
	text-align:left;
}
section article {
	display:table-cell;
	vertical-align:middle;
	width:100%;
	height:100%;
	padding:40px 1.5625%;
}
section.home {
	background:#75c5f0;
}
section.home article {
	text-align:center;
}
section.home article img {
	max-width:400px;
	margin:auto;
}
section.home article span {
	position:relative;
	display:inline-block;
	min-width:155px;
	max-width:320px;
	color:#fff;
	font-size:48px;
	text-transform:uppercase;
	cursor:default;
}
section.projects {
	background:#eee;
}
.screen {
	position:relative;
	float:left;
	width:51.6129%;
	height:auto;
	margin:0 1.6129%;
	padding-bottom:3.2258%;
	overflow:visible;
	cursor:default;
}
.screen .desktop {
	width:93.75%;
	height:auto;
	border:1px solid #282828;
	border-radius:6px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	box-shadow:0px 10px 10px -10px #282828;
	overflow:hidden;
}
.screen .desktop.full {
	width:100%;
}
.screen .desktop .navbar {
	width:100%;
	padding:0 3.3444%;
	border-bottom:1px solid #282828;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background:#fff;
}
.screen .desktop .navbar span {
	display:inline-block;
	vertical-align:middle;
	width:1.7921%;
	height:0;
	margin:0 3.584%;
	padding-bottom:1.7921%;
	border-radius:50%;
	background:#efd765;
	white-space:nowrap;
}
.screen .desktop .navbar span:before {
	content:'';
	display:inline-block;
	vertical-align:top;
	width:100%;
	height:0;
	margin-left:-200%;
	padding-bottom:100%;
	border-radius:50%;
	background:#f5534d;
}
.screen .desktop .navbar span:after {
	content:'';
	display:inline-block;
	vertical-align:top;
	width:100%;
	height:0;
	margin-left:300%;
	padding-bottom:100%;
	border-radius:50%;
	background:#97cd75;
}
.screen .desktop .navbar .website {
	display:inline-block;
	vertical-align:middle;
	width:85.7142%;
	padding:0.3584% 0;
	padding-left:0.8960%;
	margin:1.7921% 0;
	margin-left:3.5842%;
	border:1px solid #282828;
	border-radius:4px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	overflow:hidden;
	color:#282828;
	font-size:12px;
	text-align:left;
}
.screen .desktop .viewport {
	position:relative;
	height:0;
	padding-bottom:53.5117%;
	overflow:hidden;
}
.screen .desktop .viewport img {
	position:absolute;
	left:0;
	top:0;
}
.screen .mobile {
	position:absolute;
	right:0;
	bottom:0;
	width:21.875%;
	border:1px solid #282828;
	border-radius:6px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	box-shadow:0px 10px 10px -10px #282828;
	background:#fff;
}
.screen .mobile:before {
	content:'';
	display:block;
	width:28.9855%;
	height:1px;
	margin:7.2463% auto;
	background:#282828;
}
.screen .mobile:after {
	content:'';
	display:block;
	width:14.4927%;
	height:0;
	margin:7.2463% auto;
	padding-bottom:14.4927%;
	border:1px solid #282828;
	border-radius:50%;
}
.screen .mobile .viewport {
	position:relative;
	width:86.9565%;
	height:0;
	margin:auto;
	padding-bottom:150.7246%;
	border:1px solid #282828;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	overflow:hidden;
}
.screen .mobile .viewport img {
	position:absolute;
	left:0;
	top:0;
}
.description {
	float:right;
	width:41.9354%;
	margin:0;
	margin-left:3.2258%;
	color:#282828;
	cursor:default;
}
.description h2 {
	margin-bottom:3.8461%;
	font-size:24px;
	font-weight:normal;
	line-height:40px;
}
.description table {
	display:inline-block;
}
.description table th {
    padding-right:20px;
	font-size:16px;
	font-weight:normal;
	line-height:40px;
	text-align:left;
	text-transform:uppercase;
}
.description table span {
	display:inline-block;
	vertical-align:middle;
	margin-right:10px;
	font-size:32px;
}
.description p {
	margin:3.8461% 0;
	font-size:14px;
	line-height:20px;
}
.description a {
	display:inline-block;
	padding:0px 40px;
	border:1px solid #282828;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background:#eee;
	color:#282828;
	font-size:14px;
	line-height:48px;
	text-align:center;
	text-transform:uppercase;
	cursor:pointer;
}
.description a:hover, .description a:focus {
	border-color:#75c5f0;
	color:#75c5f0;
}
section.contact {
	border-bottom:60px solid transparent;
}
section.contact article {
	padding:40px 0px;
	background:#333;
	box-shadow:0px 2px 2px rgba(0,0,0,.5);
}
form {
	width:640px;
	margin:auto;
}
.field {
	margin-bottom:20px;
	color:#808080;
	font-size:18px;
	cursor:default;
}
label {
	display:inline-block;
	vertical-align:bottom;
	width:30%;
	padding:5px 0px;
	text-align:left;
	cursor:pointer;
}
label:first-child {
	vertical-align:top;
	text-align:right;
}
input, textarea {
	display:inline-block;
	vertical-align:middle;
	width:40%;
	padding:5px;
	border:0;
	border-bottom:1px solid #808080;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	background:none;
	color:#fff;
	font-family:SourceCodeProRegular;
	font-size:18px;
	overflow:hidden;
}
textarea {
	height:126px;
	resize:none;
}
input[type="submit"] {
	display:block;
	margin:auto;
	padding:10px;
	border:1px solid #808080;
	color:#808080;
	text-align:center;
	cursor:pointer;
}
input:hover, textarea:hover, input:focus, textarea:focus {
	border-color:#75c5f0;
}
input[type="submit"]:hover, input[type="submit"]:focus {
	color:#75c5f0;
}
.message {
	display:none;
	margin:auto;
	padding:10px;
	border:1px solid #333;
	color:#75c5f0;
	text-align:center;
	cursor:default;
}
footer {
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	max-width:1920px;
	height:60px;
	margin:auto;
	background:#282828 url('images/pixelcode_alpha.png') center no-repeat;
	color:#fff;
	font-size:12px;
	line-height:60px;
	text-align:center;
	text-transform:uppercase;
	cursor:default;
	z-index:-1;
}
iframe {
	display:none;
}
@media all and (min-width:640px) {
	section.projects:nth-of-type(odd) .screen {
		float:right;
	}
	section.projects:nth-of-type(odd) .desktop {
		float:right;
	}
	section.projects:nth-of-type(odd) .mobile {
		left:0;
		right:auto;
	}
	section.projects:nth-of-type(odd) .description {
		float:left;
		margin:0;
		margin-right:3.2258%;
		text-align:right;
	}
	section.projects:nth-of-type(odd) .description table span {
		margin-right:0;
		margin-left:10px;
	}
}
@media all and (max-width:639px) {
	section {
		text-align:center;
	}
	.screen {
		width:96.7741%;
	}
	.description {
		width:96.7741%;
	}
	section.projects .description {
		margin:1.6129%;
	}
	form {
		width:480px;
	}
	.field {
		font-size:16px;
	}
	input, textarea {
		font-size:16px;
	}
}
@media all and (max-width:480px) {
	section.home article span {
		font-size:36px;
	}
	form {
		width:310px;
	}
	.field {
		font-size:14px;
	}
	input, textarea {
		font-size:14px;
	}
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min--moz-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:3/2), only screen and (min-device-pixel-ratio:1.5), only screen and (min-resolution:192dpi) {
	h1, footer {
		background:#282828 url('images/retina/pixelcode_alpha.png') center no-repeat;
		background-size:320px 320px;
	}
	.spacer span {
		background:url('images/retina/spacer.png') center no-repeat;
		background-size:40px 40px;
	}
}