/* =Whitespace reset
-----------------------------------------------
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
}

a img { border: 0; }

p,
h3,
h4,
h5,
h6,
ul,
ol { margin-bottom: 1.0em; }

ul, ol { margin-left: 20px; }

/* nice transitions */
* {
	-webkit-transition:0.3s;
	transition:0.3s;
}

/* =Structure
-----------------------------------------------
*/
header, footer, section {
	display: block;
}

html,
body {
	margin: 0;
	padding: 0;	
}

#page {
	margin: 0 10%;
}

#masthead {
	position: relative;
	height: 100px;
	margin-bottom: 30px;
	/*border: 1px solid #c0c0c0;
	border-width: 0 1px;*/
}

#logo {
	padding: 40px 30px 0 30px;
	line-height: 1;
}

#primary {
	clear: both;
	padding-left: 31px;
}

/* =Navigation
-----------------------------------------------
*/
#nav {
	position: absolute;
	right: 0;
	top: 0;
	height: 80px;
	margin: 0;
	line-height: 1;
}

#nav li {
	float: left;
	list-style: none;
}

#nav a {
	display: block;
	height: 34px;
	padding: 66px 30px 0 30px;
	/*border-left: 1px solid #c0c0c0;*/
	font-size: 112.5%;
	font-weight: 300;
	text-decoration: none;
	color: #3b3b3b;
}

#nav a:hover {
	background: #f6f6f6;
	background: rgba(255,255,255,0.44);
}

/* =Content
-----------------------------------------------
*/
body {
	font: 300 1.0em/1.5 "Open Sans", sans-serif;
	background: #eee url('img/bg.jpg') left top repeat fixed;
	color: #3b3b3b;
}

a {
	font-weight: 400;
	text-decoration: underline;
	color: #de5900;
}

a:hover {
	text-decoration: none;
}

h1,
.lede {
	margin-bottom: .5em;
	font-size: 187.5%;
	font-weight: 300;
	line-height: 1.47;
}

.lede p {
	margin-bottom: .5em;
}

/* =Form
-----------------------------------------------
*/
input,
textarea {
	width: 33%;
	border: 1px solid #8e8e8e;
	border-radius: 3px;
	font: 300 1.0em/1.5 "Open Sans", sans-serif;
	background: #fff;
	color: #3b3b3b;
	--webkit-appearance: none;
}

textarea {
	width: 55%;
	height: 10em;
}

.button,
input[type="button"] {
	width: auto;
	padding: 0.20em 1em;
	border: 1px solid #de5900;
	border-radius: 3px;
	font-weight: 400;
	background: #ee6900;
	color: #fff;
	box-shadow: inset 0 0 13px rgba(162,65,0,0.25);
}

.button:hover,
input[type="button"]:hover {
	background: #de5900;
	cursor: pointer;
}

label {
	display: block;
}

/* =Portfolio
-----------------------------------------------
*/
.project {
	clear: left;
	width: 100%;
	overflow: auto;
	padding: 30px 0;
}

.project-image {
	float: left;
	width: 40%;
}

.project-image img {
	max-width: 99%;
	border: 1px solid #c0c0c0;
}

.project-content {
	margin-left: 40%;
	padding-left: 30px;
}

/* =Responsive
-----------------------------------------------
*/
@media screen and (min-width: 1240px) {
	#page { width: 960px; margin: 0 auto; }
}

@media screen and (max-width: 960px) {
	#page { margin: 0; }
}

@media screen and (max-width: 800px) {
	#masthead { height: auto; border-width: 0; }
	#logo { padding-top: 20px; text-align: center; }
	#primary { padding: 0 30px; }
	#nav { position: static; height: auto; margin-bottom: 2em; text-align: center; }
	#nav li { float: none; display: inline; }
	#nav a { display: inline; height: auto; padding: .5em 1em; border-width: 0; text-decoration: underline; font-weight: 400; color: #de5900; }
}

@media screen and (max-width: 640px) {
	.lede { font-size: 133%; }
	input { width: 55%; }
	textarea { width: 100%; }
	.project-image { float: none; width: 100%; }
	.project-content { margin-left: 0; padding-left: 0; }
}