body {
	margin: 0px;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 24px;
}

::selection {
  background: #f2f2f2;
}

::-moz-selection {
  background: #f2f2f2;
}

/* Header & Logo */

#header {
	font-weight: 300;
	height: 96px;
	background: white;
	box-shadow: inset 0px -1px 0px #e0e0e0;
	position: fixed;
	width: 100%;
}

#header-content {
	margin-left: auto;
	margin-right: auto;
}

#face {
	width: 52px;
	height: 64px;
	margin-top: 16px;
	padding-left: 24px;
	position: absolute;
}

#logo {
	width: 322px;
	height: 42px;
	margin-left: 88px;
	padding-top: 27px;
	position: absolute;
	opacity:1;
}

/* Navigation */

a {
	text-decoration: none;
}

.nav a:link, a:visited {
	color: #1f1f1f;
	transition: all 0.25s ease-in-out;
}

.nav-inactive a:hover, a:active {
	color: #808080;
	transition: all 0.25s ease-in-out;
}

.nav {
	overflow: auto;
	zoom: 1;
	padding: 0px;
	margin-top: 28px;
	float: right;
	margin-right: 4px;
}

.nav-active {
	padding: 3px 12px 8px 12px;
	display: inline-block;
	float: left;
	margin-right: 4px;
	background-color: #1f1f1f;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.nav-active a {
	color: white;
}

.nav-inactive {
	padding: 3px 12px 8px 12px;
	display: inline-block;
	float: left;
	margin-right: 4px;
}

/* Content Area */

.content {
	padding-top: 96px;
}

.headline {
	padding-top: 64px;
	padding-bottom: 8px;
	margin-left: 16px;
	margin-right: 16px;
	box-shadow: inset 0px -1px 0px #e0e0e0;
}

h1 {
	height: 32px;
	font-size: 24px;
	font-weight: 300;
	color: #bfbfbf;
	display: inline;
}

h1:before {
	display: block;
	content: " ";
	margin-top: -128px;
	height: 128px;
	visibility: hidden;
}

.blogheadline {
	color: #1f1f1f;
}

a.attribution {
	font-size: 12px;
	font-weight: 400;
	margin-left: 8px;
	color: #bfbfbf;
	height: 32px;
	display: inline;
	text-transform: uppercase;
	transition: all 0.25s ease-in-out;
}

a.attribution:hover, a:active {
	color: #808080;
	transition: all 0.25s ease-in-out;
}

a.download {
	color: #1f1f1f;
	height: 32px;
	float: right;
	display: inline;
	transition: all 0.25s ease-in-out;
}

a.download:hover, a.download:active {
	color: #808080;
	transition: all 0.25s ease-in-out;
}

.grid {
	width: 800px;
	margin: 0px auto;
	clear: both;
}

.post {
	width: 600px;
	margin: 0px auto;
	clear: both;
}

.blogcontent {
	margin: 16px;
	display: inline-block;
	float: left;
}

iframe {
	margin-bottom: 24px;
}

.postimage {
	width: 568px;
	margin-bottom: 16px;
}

.blogcontent a {
	font-weight: 400;
	color: #404040;
	padding-bottom: 2px;
	border-bottom: 1px solid #e0e0e0;
	transition: all 0.25s ease-in-out;
}

.blogcontent a:hover, .blogcontent a:active {
	background: #f0f0f0;
	transition: all 0.25s ease-in-out;
}

.blogcontent p {
	font-size: 16px;
	font-weight: 300;
	line-height: 150%;
	margin: 0px 0px 16px 0px;
}

p.blockquote {
	color: #BFBFBF;
	line-height: 150%;
	margin: 0 0 16px 0;
	padding-left: 16px;
	border-left: 1px solid #e0e0e0;
}

.screens {
	margin: 12px 4px;
}

img {
	border: none;
}

.iosicon {
	width: 120px;
	height: 120px;
	margin: 20px;
	display: inline-block;
	float: left;
}

.osxicon {
	width: 128px;
	height: 128px;
	margin: 16px;
	display: inline-block;
	float: left;
}

.thumb {
	width: 128px;
	height: 128px;
	margin: 16px;
	display: inline-block;
	float: left;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.iphone {
	width: 240px;
	height: 426px;
	margin: 12px;
	display: inline-block;
	float: left;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.ipad {
	width: 768px;
	height: 576px;
	margin: 12px;
	display: inline-block;
	float: left;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#footer {
	width: 800px;
	margin: 0px auto;
	clear: both;
	font-size: 12px;
	font-weight: 400;
	color: #bfbfbf;
	width: 768px;
}

#copy {
	height: 16px;
	padding-top: 48px;
	padding-bottom: 72px;
	margin: auto;
	text-align: center;
}

#dribbble {
	color: #ea4c89;
}

#twitter {
	color: #55acee;
}

#reserve {
	color: #1f1f1f;
}


@media (max-width: 864px) {
	#logo {
		display: none;
	}
}

@media (device-width: 768px) {
	body {
		font-weight: 400;
	}
	
	h1 {
		font-weight: 400;
	}

}

@media (max-device-width: 414px) {
	body {
		font-weight: 400;
		font-size: 14px;
	}
	
	h1 {
	font-weight: 400;
	
	}
	
	#header {
		height: 48px;
	}
	
	#face {
		width: 26px;
		height: 32px;
		margin-top: 8px;
		padding-left: 8px;
	}
	
	.nav {
		margin-top: 13px;
		margin-right: 4px;
	}
	
	.nav-active {
		padding: 1px 6px 4 6px;
		margin-right: 4px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		color: white
	}
	
	.nav-active a {
		color: white;
	}
	
	.nav-inactive {
		padding: 1px 6px 4px 6px;
		margin-right: 2px;
	}
	
	h1 {
		font-size: 14px;
	}

	h1:before {
		display: block;
		content: " ";
		margin-top: -64px;
		height: 64px;
		visibility: hidden;
	}

	.content {
		padding-top: 48px;
	}
	
	.grid {
		width: 320px;
	}
	
	.headline {
		padding-top: 16px;
		padding-bottom: 8px;
		margin-left: 8px;
		margin-right: 8px;
		box-shadow: inset 0px -1px 0px #e0e0e0;
	}

	a.attribution {
		font-size: 6px;
		font-weight: 400;
		margin-left: 4px;
		height: 16px;
		display: inline;
		text-transform: uppercase;
	}
	
	a.attribution:hover, a.attribution:active {
		color: #808080;
	}

	a.download {
		height: 16px;
		float: right;
		display: inline;
	}
	
	.post {
		width: 320px;
		margin: 0px auto;
		clear: both;
	}
	
	.blogcontent {
		margin: 8px;
		display: inline-block;
		float: left;
	}
	
	iframe {
		margin-bottom: 12px;
		width: 304;
		height: 160;
	}

	.postimage {
		width: 304px;
		margin-bottom: 8px;
	}
	
	.blogcontent a {
		font-weight: 400;
		color: #404040;
		padding-bottom: 1px;
		border-bottom: 1px solid #e0e0e0;
	}
	
	.blogcontent a:hover, .blogcontent a:active {
		background: #f0f0f0;
	}
	
	.blogcontent p {
		font-size: 12px;
		font-weight: 400;
		line-height: 150%;
		margin: 0px 0px 8px 0px;
	}
	
	p.blockquote {
		margin: 0 0 8px 0;
		padding-left: 8px;
		border-left: 1px solid #e0e0e0;
	}
	
	#grid img {
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	
	.iosicon {
		width: 60px;
		height: 60px;
		margin: 10px;
	}
	
	.osxicon {
		width: 64px;
		height: 64px;
		margin: 8px;
	}
	
	.thumb {
		width: 64px;
		height: 64px;
		margin: 8px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}

	.iphone {
		width: 92px;
		height: 164px;
		margin: 6px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
	}
	
	.ipad {
		width: 300px;
		height: 225px;
		margin: 6px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
	}
	
	#footer {
		width: 320px;
	}
}