/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
mobile, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end css reset */

/* universal */

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

a {
	text-decoration: none;
	color: black;
	cursor: pointer;
	cursor: hand;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
	background-color: #EFEDEC;
	font-family: 'Source Code Pro', sans-serif;
	font-weight: 300;
}

i {
	font-style: italic;
}

h1 {
	font-weight: 900;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 1.5px;
}

/* project year, set next to the title on each project page */
.proj-year {
	font-weight: 300;
}

h2 {
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: .75px;
}

p {
	font-size: 16px;
	line-height: 24px;
}

b {
	font-weight: 500;
}

.header {
	color: black;
	text-decoration: none;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: 2px;
	margin-bottom: 12px;
}

.header-text:hover {
	font-weight: 200;
}

.intro {
	margin-bottom: 24px;
}

.a-text {
	color: black;
	text-decoration: none;
	box-shadow: inset 0 -4px #FFFFFF;
	border-bottom: 4px solid #FFFFFF;
	transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
}

@media (hover: hover) {
	.a-text:hover {
		box-shadow: inset 0 -4px #86807A;
		border-bottom: 4px solid #86807A;
	}
}

/* media queries */

	/* large query */

	@media (min-width: 768px) {

		/* universal */

		.sidebar-mobile, .openbtn, .header-mobile, 
		#geofilters-buena-park-mobile {
			display: none;
		}

		@media (hover: hover) {
			.mobile-only {
				display: none;
			}
		}

		.wrapper {
			margin: 0 auto;
			padding: 48px;
			max-width: 1120px;
		}

		/* sidebar */

		.sidebar {
			position: fixed;
			width: calc(25% - 24px);
			max-width: 256px;
			min-width: 184px;
		}

		.sidebar-links {
			line-height: 32px;
			white-space: nowrap;
		}

		/* content wrap */

		.content-wrap {
			width: 75%;
			float: right;
		}

		@media (max-width: 831px) {
			.content-wrap {
				width: calc(100% - 184px);
			}
		}

		/* project header */

		.proj-header-image {
			width: 100%;
			margin-bottom: 48px;
		}

		/* project description */

		.proj-description {
			width: 75%;
			margin: 0 auto 48px auto;
		}

		/* project images */

		.proj-image-wrap {
			margin-bottom: 72px;
		}

		.proj-image {
			width: 100%;
			margin-bottom: 32px;
		}

		.proj-image-left, .proj-image-left-flex {
			width: calc(50% - 16px);
			margin-right: 32px;
			margin-bottom: 32px;
		}

		.proj-image-right, .proj-image-right-flex {
			width: calc(50% - 16px);
			float: right;
			margin-bottom: 16px;
		}

		.caption {
			width: 75%;
			margin: -16px auto 32px auto;
		}

		/* project grid */

		.proj {
			width: 50%;
			float: left;
			padding-bottom: 50%;
			height: 0;
			position: relative;
			background-color: #DFDDDC;
		}

		.proj-thumb {
			width: 100%;
			height: 100%;
			display: block;
			position: absolute;
		}

		.proj-caption {
			color: white;
			position: absolute;
			bottom: 0;
			z-index: 1000;
			padding: 32px;
			pointer-events: none;
			opacity: 0;
			transition: all 0.1s ease-in-out;
			-moz-transition: all 0.1s ease-in-out;
			-webkit-transition: all 0.1s ease-in-out;
			-o-transition: all 0.1s ease-in-out;
		}

		.proj-caption h1 {
			font-size: 16px;
			line-height: 24px;
			font-weight: 700;
			letter-spacing: .75px;
		}

		.proj-caption-bg {
			position: absolute;
			z-index: 999;
			pointer-events: none;
			width: 100%;
			height: 100%;
			background-image: linear-gradient(rgba(0,0,0,0), 
				rgba(0,0,0,.6) 60%, rgba(0,0,0,.85));
			opacity: 0;
			transition: all 0.1s ease-in-out;
			-moz-transition: all 0.1s ease-in-out;
			-webkit-transition: all 0.1s ease-in-out;
			-o-transition: all 0.1s ease-in-out;
		}

		@media (hover: hover) {
			.proj:hover .proj-caption {
				opacity: 1;
			}
		}

		@media (hover: hover) {
			.proj:hover .proj-caption-bg {
				opacity: 1;
			}
		}

		/* project page mini grid */

		.proj-grid-mini {
			width: 100%;
		}

		.more-projects {
			width: 75%;
			margin: 0 auto 32px auto;
		}

		.proj-mini {
			width: 33.33%;
			float: left;
			padding-bottom: 33.33%;
			height: 0;
			position: relative;
			background-color: #DFDDDC;
		}

		.proj-mini-darken {
			position: absolute;
			z-index: 999;
			pointer-events: none;
			width: 100%;
			height: 100%;
			background-image: radial-gradient(rgba(0,0,0,0), 
				rgba(0,0,0,.25));
			opacity: 0;
			transition: all 0.1s ease-in-out;
			-moz-transition: all 0.1s ease-in-out;
			-webkit-transition: all 0.1s ease-in-out;
			-o-transition: all 0.1s ease-in-out;
		}

		@media (hover: hover) {
			.proj-mini:hover .proj-mini-darken {
				opacity: 1;
			}
		}

		/* odds and ends */

		.odds-and-ends-intro {
			width: 75%;
			margin: 20px auto 48px auto;
		}

		/* about */

		.about {
			width: 75%;
			margin: 0 auto;
		}

		.about-sec-top {
			margin: 0 -32px;
			padding: 0 32px 48px 32px;
			border-bottom: 1px dashed #000000;
		}

		.about-sec {
			margin: 32px -32px 0 -32px;
			padding: 0 32px 32px 32px;
			border-bottom: 1px dashed #000000;
		}

		/* footer */

		footer {
			text-align: center;
			margin: 48px 0 0 25%;
		}

	}

	/* mobile query */

	@media (max-width: 767px) {

		/* universal */

		.sidebar, .proj-caption, 
		#geofilters-buena-park-desktop {
			display: none;
		}

		.wrapper {
			position: relative;
			margin: 0;
		}

		/* sidebar */

		.sidebar-mobile {
			height: 100%;
			width: 0;
			visibility: hidden;
			position: fixed;
			z-index: 2000;
			top: 0;
			right: 0;
			background-color: #FFFFFF;
			overflow-x: hidden;
			padding: 0;
			transition: all 0.25s ease-in-out;
			-moz-transition: all 0.25s ease-in-out;
			-webkit-transition: all 0.25s ease-in-out;
			-o-transition: all 0.25s ease-in-out;
		}

		.sidebar-mobile.open {
			width: 50%;
			visibility: visible;
		}

		.sidebar-mobile-links {
			padding: 80px 24px;
		}

		.sidebar-mobile .a-text {
			line-height: 32px;
			white-space: nowrap;
			text-decoration: none;
			box-shadow: inset 0 -4px #EFEDEC;
			border-bottom: 4px solid #EFEDEC;
			transition: all 0.1s ease-in-out;
			-moz-transition: all 0.1s ease-in-out;
			-webkit-transition: all 0.1s ease-in-out;
			-o-transition: all 0.1s ease-in-out;
		}

		@media (hover: hover) {
			.sidebar-mobile .a-text:hover {
				box-shadow: inset 0 -4px #86807A;
				border-bottom: 4px solid #86807A;
			}
		}

		/* the menu buttons are real <button>s; strip the browser's default button look */
		.closebtn, .openbtn {
			background: none;
			border: none;
			padding: 0;
			font-family: inherit;
			line-height: 1;
			cursor: pointer;
			-webkit-appearance: none;
			appearance: none;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
		}

		.closebtn {
			position: absolute;
			color: black;
			top: 30px;
			right: 30px;
			font-size: 36px;
			font-weight: 900;
			text-decoration: none;
			transition: all 0.1s ease-in-out;
			-moz-transition: all 0.1s ease-in-out;
			-webkit-transition: all 0.1s ease-in-out;
			-o-transition: all 0.1s ease-in-out;
		}

		@media (hover: hover) {
			.closebtn:hover {
				color: #EFEDEC;
			}
		}

		.openbtn {
			position: absolute;
			top: 30px;
			right: 30px;
			font-size: 36px;
			font-weight: 900;
			cursor: pointer;
			cursor: hand;
			color: black;
			transition: all 0.1s ease-in-out;
			-moz-transition: all 0.1s ease-in-out;
			-webkit-transition: all 0.1s ease-in-out;
			-o-transition: all 0.1s ease-in-out;
		}

		@media (hover: hover) {
			.openbtn:hover {
				color: #ffffff;
			}
		}

		.header-mobile {
			padding: 24px 24px 0 24px;
		}

		@media (max-width: 351px) {
			.intro {
				font-size: 14px;
				line-height: 21px;
			}
		}

		/* content wrap */

		.content-wrap {
			width: 100%;
		}

		/* project header */

		.proj-header-image {
			width: 100%;
		}

		/* project description */

		.proj-description {
			width: 100%;
			padding: 24px;
		}

		/* project images */

		.proj-image-wrap {
			margin-bottom: 48px;
		}

		.proj-image, .proj-image-left-flex, .proj-image-right-flex {
			width: 100%;
			margin-bottom: 24px;
		}

		.proj-image-left {
			width: calc(50% - 12px);
			margin-right: 24px;
			margin-bottom: 24px;
		}

		.proj-image-right {
			width: calc(50% - 12px);
			float: right;
			margin-bottom: 8px;
		}

		.caption {
			margin: -16px 24px 24px 24px;
		}

		/* project grid */

		.proj {
			width: 50%;
			float: left;
			padding-bottom: 50%;
			height: 0;
			position: relative;
			background-color: #DFDDDC;
		}

		.proj-thumb {
			width: 100%;
			height: 100%;
			display: block;
			position: absolute;
			transition: all 0.1s ease-in-out;
			-moz-transition: all 0.1s ease-in-out;
			-webkit-transition: all 0.1s ease-in-out;
			-o-transition: all 0.1s ease-in-out;
		}

		.proj-caption-bg {
			position: absolute;
			z-index: 999;
			pointer-events: none;
			width: 100%;
			height: 100%;
			background-image: radial-gradient(rgba(0,0,0,0), 
				rgba(0,0,0,.25));
			opacity: 0;
			transition: all 0.1s ease-in-out;
			-moz-transition: all 0.1s ease-in-out;
			-webkit-transition: all 0.1s ease-in-out;
			-o-transition: all 0.1s ease-in-out;
		}

		@media (hover: hover) {
			.proj:hover .proj-caption-bg {
				opacity: 1;
			}	
		}

		/* project page mini grid */

		.proj-grid-mini {
			width: 100%;
		}

		.more-projects {
			margin: 0 24px 24px 24px;
		}

		.proj-mini {
			width: 50%;
			float: left;
			padding-bottom: 50%;
			height: 0;
			position: relative;
			background-color: #DFDDDC;
		}

		.proj-mini-darken {
			position: absolute;
			z-index: 999;
			pointer-events: none;
			width: 100%;
			height: 100%;
			background-image: radial-gradient(rgba(0,0,0,0), 
				rgba(0,0,0,.25));
			opacity: 0;
			transition: all 0.1s ease-in-out;
			-moz-transition: all 0.1s ease-in-out;
			-webkit-transition: all 0.1s ease-in-out;
			-o-transition: all 0.1s ease-in-out;
		}
		
		@media (hover: hover) {
			.proj-mini:hover .proj-mini-darken {
				opacity: 1;
			}
		}

		/* odds and ends */

		.odds-and-ends-intro {
			margin: 48px 24px 24px 24px;
		}

		/* about */

		.about {
			width: 100%;
			padding: 24px;
		}

		.about-sec-top {
			margin: 0 -24px;
			padding: 0 24px 48px 24px;
			border-bottom: 1px dashed #000000;
		}

		.about-sec {
			margin: 24px -24px 0 -24px;
			padding: 0 24px 24px 24px;
			border-bottom: 1px dashed #000000;
		}

		/* footer */

		footer {
			text-align: center;
			margin: 24px;
		}

		/* individual ids */

		#geofilters-chicago-mobile, #geofilters-buena-park-mobile {
			width: calc(100% - 48px);
			margin: 0 24px 24px 24px;
		}

	}