@charset "UTF-8";
/* CSS Document */

html {
	overflow-y: scroll;
}
body {
	background: #4b4b4b;
	margin: 0;
}
h1 {
	font-family: "brandon-grotesque", sans-serif;
	letter-spacing: 2px;
	margin: 0 0 40px 0;
}
p {
	color: #666;
	font-family: "chaparral-pro", sans-serif;
	letter-spacing: 1px;
	margin: 0;
}
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
}
#header-container {
	background: #4b4b4b;
	border-bottom: solid 2px #fff;
}
#header {
	margin: auto; overflow: hidden; width: 100%;
}
#hamburger {
	background: #f90;
	color: #fff;
	cursor: pointer;
	float: right;
	font-size: 24px;
	line-height: 72px;
	text-align: center;
	width: 72px;
}
#logo {
	float: left;
}
#logo a {
    cursor: pointer;
    text-decoration: none;
}
#logo h1 {
	color: #f90;
	font-weight: 300;
	line-height: 72px;
	margin: 0 0 0 20px;;
	text-align: center;
}
#desktop-navigation {
	display: none;
}
#mobile-navigation li {
	border-bottom: solid 2px #4b4b4b;
	display: block;
}
#mobile-navigation li:nth-last-child(1) {
	border-bottom: none;
}
#mobile-navigation li a {
	background: #f90;
	color: #fff;
	display: block;
	font-family: "brandon-grotesque", sans-serif;
	letter-spacing: 2px;
	padding: 20px;
	text-decoration: none;
	text-transform: uppercase;
}
.container {
	background: #eee;
}
.container h1 {
	text-transform: uppercase;
}
.row {
	margin: auto;
	padding: 40px 0;
	text-align: center;
	overflow: hidden;
	width: 90%;
}
.row h1 {
	color: #4b4b4b;
	font-size: 24px;
}
.work li {
	margin: 0 0 40px 0;
}
.work li:nth-last-child(1) {
	margin: 0;
}
.work li a, .headshot {
	background: #f90;
	border-radius: 50%;
	box-shadow: 0 0 0 10px rgba(0, 0, 0, .1), 0 0 0 10px rgba(255, 255, 255, .5) inset;
	display: inline-block;
	height: 175px;
	width: 175px;
	transition: all .2s linear;
}
.work a:hover {
	box-shadow: 0 0 0 10px rgba(0, 0, 0,.05), 0 0 0 0 rgba(255 ,255, 255 , .5) inset;
	transition: all .2s linear;
}
.work p {
	color: #333;
	font-weight: bold;
	margin: 20px 0 0 0;
}
.about p {
	color: #fff;
}
.category {
	color: #333;
	font-size: 19px;
	font-weight: bold;
	margin: 0 0 10px 0;
	
}
.category-list {
	color: #f90;
	font-size: 19px;
	font-weight: bold;
	margin: 0 0 20px 0;
	
}
.category-list span {
    color: #333;
}
#footer-container {
	background: #4b4b4b;
	border-top: solid 2px #fff;
}
#footer {
	margin: auto; padding: 20px 0; width: 90%;
}
#footer p {
	font-family: "brandon-grotesque", sans-serif;
	font-size: 13px;
	color: #fff;
	letter-spacing: 2px;
	margin: 0;
}
.last {
	margin: 0;
}

@media only screen and (min-width: 640px) {
	.work li {
		float: left;
		text-align: center;
		width: 50%;
	}
	.work li:nth-last-child(2) {
		margin: 0;
	}
}

@media only screen and (min-width: 800px) {
	#header {
		width: 100%;
	}
	#hamburger-container {
		display: none;
	}
	#logo {
		float: left;
	}
	#mobile-navigation-container {
		display: none;
	}
	#desktop-navigation {
		display: block;
		float: right;
	}
	#desktop-navigation li {
		display: block;
		float: left;
	}
	#desktop-navigation li:nth-last-child(1) {
		border-right: none;
	}
	#desktop-navigation li a {
		color: #fff;
		display: block;
		font-family: "brandon-grotesque", sans-serif;
		font-size: 16px;
		letter-spacing: 2px;
		line-height: 72px;
		padding: 0 20px;
		text-decoration: none;
		text-transform: uppercase;
		transition: background .3s ease-in-out, color .3s ease-in-out;
	}
	#desktop-navigation li a:hover {
		color: #4b4b4b;
		background: #fff;
		transition: background .3s ease-in-out, color .3s ease-in-out;
	}
}

@media only screen and (min-width: 980px) {
	#header {
		width: 90%;
	}
	.work li {
		margin: 0;
		width: 25%;
	}
}