@font-face {
  font-family: 'Graphik Web';
  src: url('fonts/Graphik-Light-Web.eot');
  src: url('fonts/Graphik-Light-Web.eot#iefix') format('embedded-opentype'),
     url('fonts/Graphik-Light-Web.woff') format('woff'),
     url('fonts/Graphik-Light-Web.ttf') format('truetype'),
     url('fonts/Graphik-Light-Web.svg#Graphik-Light') format('svg');
  font-weight:  300;
  font-style:   normal;
  font-stretch: normal;
}
@font-face {
  font-family: 'Graphik Web';
  src: url('fonts/Graphik-Regular-Web.eot');
  src: url('fonts/Graphik-Regular-Web.eot#iefix') format('embedded-opentype'),
     url('fonts/Graphik-Regular-Web.woff') format('woff'),
     url('fonts/Graphik-Regular-Web.ttf') format('truetype'),
     url('fonts/Graphik-Regular-Web.svg#Graphik-Regular') format('svg');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}
@font-face {
  font-family: 'Graphik Web';
  src: url('fonts/Graphik-RegularItalic-Web.eot');
  src: url('fonts/Graphik-RegularItalic-Web.eot#iefix') format('embedded-opentype'),
     url('fonts/Graphik-RegularItalic-Web.woff') format('woff'),
     url('fonts/Graphik-RegularItalic-Web.ttf') format('truetype'),
     url('fonts/Graphik-RegularItalic-Web.svg#Graphik-RegularItalic') format('svg');
  font-weight:  400;
  font-style:   italic;
  font-stretch: normal;
}
@font-face {
  font-family: 'Graphik Web';
  src: url('fonts/Graphik-Medium-Web.eot');
  src: url('fonts/Graphik-Medium-Web.eot#iefix') format('embedded-opentype'),
     url('fonts/Graphik-Medium-Web.woff') format('woff'),
     url('fonts/Graphik-Medium-Web.ttf') format('truetype'),
     url('fonts/Graphik-Medium-Web.svg#Graphik-Medium') format('svg');
  font-weight:  500;
  font-style:   normal;
  font-stretch: normal;
}
@font-face {
  font-family: 'Atlas Typewriter Web';
  src: url('fonts/AtlasTypewriter-Regular-Web.eot');
  src: url('fonts/AtlasTypewriter-Regular-Web.eot#iefix') format('embedded-opentype'),
     url('fonts/AtlasTypewriter-Regular-Web.woff') format('woff'),
     url('fonts/AtlasTypewriter-Regular-Web.ttf') format('truetype'),
     url('fonts/AtlasTypewriter-Regular-Web.svg#Atlas Typewriter Web') format('svg');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

body {
	background:#161616;
	color:#909090;
	font-size:18px;
  	font-family: 'Graphik Web', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight:400;
	line-height:1.8;
	text-align:center;
	margin:0 20px;
	text-rendering: optimizeLegibility;
}

main {
	width:100%;
	max-width:900px;
	margin:0 auto;
	text-align:center;;
}

header {
	margin:4em 0;
	text-align: center;
}
header img {	
	margin: 0 auto;
}

a {
  color: #eee;
  text-decoration: none;
  -webkit-transition: color 200ms linear;
  -moz-transition: color 200ms linear;
  transition: color 200ms linear;
}

a:hover {
  text-decoration: underline;
  outline: 0;
}

h1 {
	font-size:28px;
	margin:0 auto 1em;
	text-align:center;
	color:#fff;
}

ol, p, ul {
	margin:0 auto 1em;
	max-width:740px;
	width:100%;
	text-align:left;
}

img.flex-feature {
  max-width: 100%;
  height: auto;
  margin:1em 0;
}

@media only screen and (max-width: 450px) {
	body {
		font-size: 16px;
	}
	h1 {
		font-size:21px;
	}
}

@media only screen and (orientation: portrait) {
	main {
		width:100%;
	}
}

@media only screen and (orientation: landscape) {
	main {
		width:100%;
	}
}