* { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; 
}

body {
	color: #333;
	background-color: #fff;
	font-family: "Lato", sans-serif;
	font-size: 100%;
	font-weight: 300;
	line-height: 150%;
	margin: 0;
	padding: 0;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

h1 {
	color: #e74c3c;
	font-family: "Oswald", sans-serif;
	font-size: 2em;
	font-weight: 300;

	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

h1:target { padding-top: 50px;}

/** Nav Styles **/

header {
	background-color: #e74c3c;
	margin: 0;
	overflow: auto;
	padding: 0;
}

header nav { 
	background-color: #e74c3c;
	margin: 0;
	padding: 2em;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}

header nav ul {
	display: inline;
	list-style: none;
	padding-left: 0;
	overflow: auto;
}

header nav ul li.sub-nav { 
	display: inline;
	overflow: auto;
}

header nav ul ul {
	display: inline;
	float: right;
}

header nav ul ul li {
	padding: 0 2em;
	float: left;
}

header nav ul #name { 
	display: inline; 
	padding-bottom: 0.2em;
}

header nav ul ul li:last-of-type { padding-right: 0;}

header nav ul li a { 
	color: #fff;
	font-family: "Oswald", sans-serif;
	font-size: 1.25em;
	font-weight: 300;	
	text-decoration: none;
}

header nav ul #name a { font-size: 1.5em ;}

#name:hover , header nav ul ul li:hover a, header nav ul ul li.active a { box-shadow: inset 0 -2px 0 0 #fff; }

.slicknav_menu { display: none;}

main {
	margin: 0;
	padding: 0;
}

main.project-page { margin-top: 5em;}
/** Signature Styles **/

#hello { 
	margin: 5em 0 0 0;
	padding: 8em 6em 10em;
	overflow: auto;
	width: auto;
}

#hello .signature {
	overflow: auto;
	width: auto;
}

#hello .signature svg {
	float: right;
	max-height: 100%;
	max-width: 95%;
}

/** About Styles **/

#about {
	background-color: #333;
	color: #fff;
	overflow: auto;
	padding: 4em 6em;
	width: auto;
}

#about p:nth-of-type(2) {
	color: #e74c3c;
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	margin-top: 1.5em;
}

/** Project Styles **/

#projects {
	overflow: auto;
	padding: 4em 6em;
	width: auto;
}

#projects .row {
	margin: 2em 0;
	overflow: auto;
	width: auto;
}

#projects .project {
	float: left;
	width: 48%;
}

#projects .project:nth-of-type(odd) {
	margin-right: 2em;
}

.project h2 {
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-size: 1.25em;
	margin: 0;
}

.project h2 a {
	color: #333;
	text-decoration: none;

	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.project h2:hover a { color: #e74c3c;}

.project ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.project ul li {
	color: #e74c3c;
	display: inline;
	font-style: italic;
	font-weight: 400;
}

.project .project-preview {
	margin-top: 0.25em;
	overflow: auto;
	position: relative;
	width: auto;
	z-index: 0;
}

#stem .project-preview {
	background: url("../images/stem/stem-preview.jpg") no-repeat center center;
	background-size: cover;
}

#stella .project-preview {
	background: url("../images/stella/stella-preview-text.jpg") no-repeat bottom right;
	background-size: cover;
}

#red-suns .project-preview {
	background: url("../images/red-suns/red-suns-preview.jpg") no-repeat center center;
	background-size: cover;
}

#shifting .project-preview {
	background: url("../images/shifting-emphasis/shifting-emphasis-preview.jpg") no-repeat top center;
	background-size: cover;
}

#kababeque .project-preview {
	background: url("../images/kababeque/kababeque-preview.jpg") no-repeat center center;
	background-size: cover;
}

#aatm .project-preview {
	background: url("../images/aatm/aatm-preview.jpg") no-repeat left center;
	background-size: cover;
}

.project .project-preview:after {
	content: '';
	display: block;
	padding-top: 50%;
} 

.project .project-content {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

.project .project-content span {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;

	z-index: 1;

	-moz-transition: background-color 1s ease;
	-webkit-transition: background-color 1s ease;
	transition: background-color 1s ease;
}

.project .project-content:hover span {
	background-color: rgba(231, 76, 60, 0.5)
}

.project ul li:after { content: ",";}
.project ul li:last-child:after { content: "";}

/** Project Styles -- Individual Page **/

.project-single { 
	overflow: auto;
	padding: 4em; 
}

.project-nav {
	margin-bottom: 2em;
}

.project-nav a { 
	color: #333;
	font-family: "Oswald", sans-serif;
	font-size: 1.25em;
	display: inline;
	margin-bottom: 0.5em;
	text-decoration: none;

	-moz-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.project-nav a:hover { color: #e74c3c;}
.project-nav a:nth-of-type(2) { float: right;}

.project-nav a .fa-angle-left { 
	color: #e74c3c;
	margin-right: 0.15em;}

.project-nav a .fa-angle-right { 
	color: #e74c3c;
	margin-left: 0.15em;
}

.project-info, .project-images { float: right; }
.project-info { width: 40%;}

.project-images { 
	margin-right: 2em;
	width: 55%;
}

.project-images .project-single-img img {
	display: block;
	margin: 0 auto 1em;
	max-width: 100%;
}

.project .img-container img { max-width: 100%;}

.project-info h2 { 
	font-size: 2em;
	line-height: 125%;
}
.project-info ul { margin: 0.75em 0;}
.project-info ul li { font-size: 1.25em;}
.project-info p { font-size: 1em;}
.project-info q, .project-info q + p { font-style: italic;}
.project-info a { font-size: 1.15em; }
.project-single > a:hover, .project-info a:hover { color: #e74c3c;}

.project-info a { 
	color: #333;
	font-style: italic;
	text-decoration: none;
}

.project-info .fa-external-link { 
	color: #e74c3c;
	padding-left: 0.5em;
}

/* Footer Styles **/

footer {
	background-color: #e74c3c;
	overflow: auto;
	padding: 2em;
}

footer .contact, footer .social { 
	display: inline;
	float: left;
	width: 50%;
}

footer .social { text-align: right;}

footer h1 { 
	color: #fff;
	font-size: 1.5em;
}

footer ul {
	list-style: none;
	padding-left: 0;
}

footer ul li { display: block; }

footer a {
	color: #fff;
	text-decoration: none;
}

footer .social ul li { display: block;}

.fa-stack:hover .fa-stack-2x { color: #fff;}
.fa-stack:hover .fa-stack-1x { color: #e74c3c;}

.fa-stack-2x { color: #333;}
.fa-stack-1x { color: #fff;}

@media screen and (max-width: 1007px) {

	#projects .row { margin: 0;}

	#projects .project {
		float: none;
		margin: 2em 0 0;
		width: auto;
	}

	#projects #stem {margin-top: 0.5em;}
	#projects .project:nth-of-type(odd) { margin-right: 0; }

	.project-info, .project-images { 
		float: none;
		width: auto;
	}

	.project-images { 
		margin-right: 0;
		padding: 0 3em;
	}

	.project-info { margin-bottom: 3em;}
	.project h2 { font-size: 1.75em;}
	.project ul { margin: 0.5em 0; }
	.project ul li { font-size: 1.25em;}


}

@media screen and (max-width: 40em) {

	body { line-height: 125%;}

	header nav { padding: 1.25em 0 0;}

	header nav ul { 
		display: block;
		margin: 0;
		overflow: auto;
		padding: 0.5em 1.25em 1.25em;
	}

	h1 { font-size: 1.5em}
	#menu { display: none; }
	.slicknav_menu { display: inline;}
	a { outline: 0;}

	.slicknav_nav li {
		border-top: 1px solid #fff;
		padding: 1.5em 2em;
	}

	.slicknav_nav li a {
		color: #fff;
		font-family: "Oswald", sans-serif;
		font-size: 1.5em;
		text-decoration: none;
	}

	.slicknav_nav li:hover { background-color: #fff}
	.slicknav_nav li:last-of-type { border-bottom: 1px solid #ffffff;}
	.slicknav_nav li:last-of-type:hover { border-bottom: 1px solid #e74c3c;}
	.slicknav_nav li:hover a { color: #e74c3c; }
	#about, #projects, footer { padding: 2em;}
	#hello { padding: 4em 2em;}
	#hello h1 { margin-top: 0;}
	#about p { font-size: 0.9em}
	#projects .project h2 { font-size: 1.25em;}
	#projects .project ul { margin: 0;}
	#projects .project ul li { font-size: 1em;}

	.project-single { padding: 4em 2em;}

	.project-info h2 { font-size: 1.5em;}
	.project-info ul li { font-size: 1em;}
	.project-info p { font-size: 0.9em}
	.project-info a { font-size: 1em;}
	.project-images { padding: 0;}

	footer .contact, footer .social{ 
		display: block;
		float: none;
		width: auto;
	}

	footer .social ul { margin-bottom: 0;}	
	footer .social ul li { overflow: hidden;}

	footer .social ul li a:first-of-type {
		display: inline-block;
		margin: 0.65em 0 0 0.25em;
	}

	footer .social ul li a:nth-of-type(2) { float: left;}
	footer .contact div:first-of-type { margin-top: 1em;}
	footer .contact h1, footer .social h1 { margin-bottom: 0.25em}

	footer .social { 
		margin-top: 1em;
		text-align: left;}
}