@charset "UTF-8";

@font-face
{
	font-family: "neuzeitgrotbold";
	src: url("/css/fonts/neuzeitgrotbold.eot");
	src: url("/css/fonts/neuzeitgrotbold.eot?#iefix") format("embedded-opentype"), url("/css/fonts/neuzeitgrotbold.woff") format("woff"), url("/css/fonts/neuzeitgrotbold.ttf") format("truetype"), url("/css/fonts/neuzeitgrotbold.svg#neuzeitgrotbold") format("svg");
	font-weight: 500;
	font-style: normal;
}

@font-face
{
	font-family: "neuzeitgrotregular";
	src: url("/css/fonts/neuzeitgrot.eot");
	src: url("/css/fonts/neuzeitgrot.eot?#iefix") format("embedded-opentype"), url("/css/fonts/neuzeitgrot.woff") format("woff"), url("/css/fonts/neuzeitgrot.ttf") format("truetype"), url("/css/fonts/neuzeitgrot.svg#neuzeitgrotregular") format("svg");
	font-weight: 500;
	font-style: normal;
}

@font-face
{
	font-family: "neuzeitgrotlight";
	src: url("/css/fonts/neuzeitgrotlight.eot");
	src: url("/css/fonts/neuzeitgrotlight.eot?#iefix") format("embedded-opentype"), url("/css/fonts/neuzeitgrotlight.woff") format("woff"), url("/css/fonts/neuzeitgrotlight.ttf") format("truetype"), url("/css/fonts/neuzeitgrotlight.svg#neuzeitgrotligregular") format("svg");
	font-weight: normal;
	font-style: normal;
}

*
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

body
{
	background-color: #181818;
	color: #FFFFFF;
	font-family: "neuzeitgrotregular", "sans-serif";
	font-size: 100%; /* 16px */
	text-align: center;
}

article
{
	padding: 25px;
	text-align: left;
}

h1
{
	font-family: "neuzeitgrotbold", "sans-serif";
	font-size: 1.5em;
}

p
{
	margin: 20px 0;
	font-family: "neuzeitgrotlight", "sans-serif";
	font-size: 1.12em;
	line-height: 1.5em;
}

a
{
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

a:hover
{
	border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

header
{
	max-width: 50px;
	width: 100%;
	margin: 0 auto 25px auto;
}

footer p
{
	font-size: 0.875em;
}

.wrap
{
	position: relative;
	top: 200px;
	max-width: 580px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

.tools
{
	position: absolute;
	right: 10px;
	bottom: 10px;
}

@media screen and (max-width: 768px)
{
	.wrap
	{
		top: 20px;
	}
	
	.tools
	{
		display: none;
	}
	
	header
	{
		margin: 0 auto 30px auto;
	}
	
	header img
	{
		width: 100%;
	}
}
	
@media screen and (max-width: 320px)
{
	p
	{
		font-size: 1em;
	}
}