/*
Theme Name: Room 34 (2016)
Theme URI: 
Author: Room 34 Creative Services, LLC
Author URI: http://room34.com
Description: 
Version: 1.0
License: Unauthorized use or redistribution is prohibited
License URI: 
Tags: 
Text Domain: rm34
*/

/*
COLORS:

Teal		rgb(105,161,168)	#69a1a8
Light teal	rgb(172,211,216)	#acd3d8
Red-orange	rgb(234,73,55)		#ea4937
Dark gray	rgb(57,54,58)		#39363a
Mid gray	rgb(114,108,116)	#726c74

*/

/* IMPORT */

@import url('css/reset.css');
@import url('css/gravity-forms.css');


/* FONTS */


/* STANDARD HTML */

html { -webkit-text-size-adjust: 100%; }

body {
	background: rgb(105,161,168) url('images/scanlines.png') left top repeat fixed; background-size: 10px 10px;
	color: rgb(57,54,58);
	font-family: 'aktiv-grotesk', sans-serif;
	font-size: 116.667%;
	font-weight: normal;
	line-height: 1.5em;
	overflow-x: hidden;
	overflow-y: scroll;
}

* {
	box-sizing: border-box;
}

a, a:visited {
	color: rgb(105,161,168);
	text-decoration: none;
}

a:hover {
	color: rgb(234,73,55);
}

b, strong { font-weight: bold; }

blockquote {
	background: transparent url('images/scanlines.png') left top repeat;
	background-size: 10px 10px;
	box-shadow: inset 0 0 200px rgba(0,0,0,0.1);
	/*color: rgba(255,255,255,0.9);*/
	font-family: 'aktiv-grotesk-extended', sans-serif;
	font-weight: 200;
	font-size: 116.667%;
	line-height: 1.333em;
	margin: 0 0 1.5em 0;
	padding: 1.5em;
	position: relative;
}

	/*blockquote * { color: rgba(255,255,255,0.9) !important; }*/

	blockquote *:last-child { margin-bottom: 0 !important; }

form {
	clear: both;
	display: block;
	margin: 0 0 1.5em 0;
}

	input {
		border-radius: 0;
		font-size: 88.889%;
		font-family: 'aktiv-grotesk', sans-serif;
		line-height: 1.5em;
		max-width: 100%;
		vertical-align: top;
	}

	*:-ms-input-placeholder { color: rgb(204,204,204); font-size: 66.667%; line-height: 2.5em; text-transform: uppercase; }
	*:-moz-placeholder { color: rgb(204,204,204); font-size: 66.667%; line-height: 2.5em; text-transform: uppercase; }
	*::-webkit-input-placeholder { color: rgb(204,204,204); font-size: 66.667%; line-height: 2.5em; text-transform: uppercase; }

	input:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=submit]) {
		border: 1px solid rgb(204,204,204);
		font-family: 'aktiv-grotesk', sans-serif;
		height: 2.1em;
		margin-right: 0;
		margin-left: 0;
		padding: 0.167em 0.333em;
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
	}
	input:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=submit]):focus {
		border: 1px solid rgb(105,161,168);
		outline: none;
	}
	
	.bgcolor:not(.white) input { border: none !important; }
	
	input[type=submit], button.button {
		border: none;
		border-radius: 3px;
		font-family: 'aktiv-grotesk', sans-serif;
		height: 2.1em;
		line-height: 2.1em;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
	}
	
	select {
		background: rgb(255,255,255) url('images/select_arrows.png') right 5px center no-repeat;
		background-size: 9px 15px;
		cursor: context-menu;
		border: 1px solid rgb(204,204,204);
		border-radius: 0;
		display: inline-block;
		font-family: 'aktiv-grotesk', sans-serif;
		font-size: 100%;
		height: 2em;
		line-height: 2em;
		margin: 0 0.5em 0.5em 0;
		min-width: 60%;
		padding: 0 22px 0 0.333em;
		width: auto;
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
	}
	select::-ms-expand { display: none; }
	select:focus {
		border: 1px solid rgb(105,161,168);
		outline: none;
	}
	
	textarea {
		border: 1px solid rgb(204,204,204);
		border-radius: 0;
		font-size: 88.889%;
		font-family: 'San Francisco', -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif !important;
		line-height: 1.5em;
		padding: 0.167em 0.333em !important;
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
	}
	textarea:focus {
		border: 1px solid rgb(105,161,168);
		outline: none;
	}

h1, h2, h3, h4, h5, h6 {
	color: rgb(234,73,55);
	font-family: 'aktiv-grotesk-extended', sans-serif;
	font-weight: 200;
	margin: 0.667em 0 0.5em 0;
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; }
h1 { font-size: 350%; line-height: 1.1em; }
h2 { font-size: 300%; line-height: 1.125em; }
h3 { font-size: 225%; line-height: 1.167em; }
h4 { font-size: 150%; line-height: 1.25em; }
h5 { font-size: 120%; line-height: 1.428em; }
h6 { font-size: 100%; line-height: 1.5em; text-transform: uppercase; }

hr {
	background: rgb(243,243,243);
	border: none;
	height: 1px;
	margin: 1.5em 0;
	width: 100%;
}
.bgcolor:not(.white) hr {
	background: rgb(255,255,255);
	background: rgba(255,255,255,0.75);
}
hr:first-child { margin-top: 0; }

i, em { font-style: italic; }

iframe {
	width: 100%;
}

img {
	height: auto;
	max-width: 100%;
	width: auto;
}

ins {
	font-weight: bold;
	text-decoration: none;
}

p, ul, ol, dl {
	margin: 0 0 1.5em 0;
}

	li { }
	
	li ul:not(:first-child), li ol:not(:first-child), li dl:not(:first-child)
	{ margin-top: 1.5em; }
	
	dt, dd { }
	
	dt {
		clear: both;
		font-weight: bold;
		margin: 0;
		padding: 0;
	}
	
	dd {
		clear: both;
		margin: 0 0 1em 0;
		padding: 0;	
	}

/* CUSTOM CSS CLASSES */

.alignleft, *[style*='text-align: left'] {
	clear: left !important;
	float: left;
	margin: 1em 1.5em 1em 0 !important;
}

.aligncenter, *[style*='text-align: center'] {
	clear: both;
	display: block;
	margin: 0 auto;
	text-align: center;
	width: auto;
}

.alignright, *[style*='text-align: right'] {
	clear: right !important;
	float: right;
	margin: 1em 0 1em 1.5em !important;
}

img.alignleft, img.alignright { max-width: 40%; }

.auto-columns {
	columns: 3;
	column-gap: 3em;
	margin: 3em 0;
}

.basic, .search-results:not(.post-type-archive-project) .entry-header, .search-results:not(.post-type-archive-project) .entry-content {
	background: rgb(255,255,255);
	margin: 0;
	padding: 3.333em 20%;
	width: 100%;
}

.bgcolor { }
.bgcolor:not(.white) {
	color: rgb(255,255,255);
	color: rgba(255,255,255,0.9);
}

.bgcolor.gray { background-color: rgb(57,54,58); }
.bgcolor.teal { background-color: rgb(105,161,168); }
.bgcolor.orange { background-color: rgb(234,73,55); }
.bgcolor.white { background-color: rgb(255,255,255); }

	.bgcolor:not(.white) a, .bgcolor:not(.white) a:visited {
		color: rgb(255,255,255);
		font-weight: bold;
	}
	.bgcolor:not(.white) a:hover {
		text-decoration: underline;
	}

.button {
	background-color: rgb(105,161,168);
	border: 1px solid rgb(105,161,168);
	border-radius: 3px;
	color: rgb(255,255,255) !important;
	cursor: pointer;
	display: inline-block;
	font-family: 'aktiv-grotesk', sans-serif;
	font-weight: normal !important;
	margin-bottom: 0.5em;
	padding: 0.333em 0.667em;
	text-decoration: none !important;
}

.button:hover, .button.toggle:hover {
	background-color: rgb(234,73,55);
	border-color: rgb(234,73,55);
	color: rgb(255,255,255) !important;
	text-decoration: none !important;
}

.button.inactive, .button.inactive:hover {
	background-color: rgb(170,170,170);
}

.button.toggle {
	background-color: rgb(255,255,255);
	color: rgb(105,161,168) !important;
}

.button.toggle.on {
	background-color: rgb(105,161,168);
	color: rgb(255,255,255) !important;
}

ul.buttons {
	display: block;
	list-style: none !important;
	padding: 0 !important;
}

	ul.buttons li {
		display: inline-block;
		margin: 0 0.667em 0 0;
	}

.bgcolor .button {
	background-color: transparent;
	border: 1px solid rgba(255,255,255,0.5);
}
.bgcolor .button:hover {
	border: 1px solid rgba(255,255,255,0.75);
}

.bgcolor .button.priority {
	background-color: rgb(105,161,168);
	border-color: rgb(105,161,168);
	color: rgb(255,255,255) !important;
}
.bgcolor .button.priority:hover {
	background-color: rgb(234,73,55);
	border-color: rgb(234,73,55);
}

.bgcolor.white .button:not(.priority) {
	background-color: rgb(105,161,168);
	border: 1px solid rgb(105,161,168);
}
.bgcolor.white .button:not(.priority):hover {
	background-color: rgb(234,73,55);
	border-color: rgb(234,73,55);
}

.callout {
	display: block;
	position: relative;
}
	
	.callout_content {
		display: table;
		position: relative;
		table-layout: fixed;
		width: 100%;
		z-index: 2;
	}
	.callout:not(.white) .callout_content * { color: rgb(255,255,255); }

		.callout .image {
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			display: table-cell;
			padding: 4em 6em;
			text-align: center;
			vertical-align: top;
		}
	
			.callout .image img {
				display: block;
				margin: 0 auto;
				width: auto;
			}
	
		.callout .text {
			color: rgb(255,255,255);
			color: rgba(255,255,255,0.9);
			display: table-cell;
			padding: 3.333em;
			vertical-align: top;
		}
		.callout.white .text { color: rgb(57,54,58) !important; }

		.callout.image_float-left .text {
			padding-right: 3.333em; padding-left: 2em;
		}
		.callout.image_float-right .text {
			padding-right: 2em; padding-left: 3.333em;
		}
	

.clearfix:after {
	clear: both;
	content: '';
	display: table;
}

.clear_columns {
	clear: both;
	-moz-column-count: 1;
	-webkit-column-count: 1;
	column-count: 1;
}

.columns {
	background: rgb(255,255,255);
	display: table;
	margin: 0;
	padding-top: 2em; padding-bottom: 2em;
	padding-left: 4%; padding-right: 4%;
	table-layout: fixed;
	width: 100%;
}

.basic + .columns { padding-top: 0; }

.basic .columns { padding-left: 0; padding-right: 0; }

.columns.columns-2-even {
	padding-left: 10%; padding-right: 10%;
}

	.column {
		display: table-cell;
		padding: 0 2em;
		vertical-align: top;
	}
	
	.basic .column { padding: 2em; }
	.basic .column:first-of-type { padding-left: 0; }
	.basic .column:last-of-type { padding-right: 0; }
	
	.columns-2-wide-left .column_1, .columns-2-wide-right .column_2 {
		width: 66.667%;
	}

	.columns-2-wide-right .column_1, .columns-2-wide-left .column_2 {
		width: 33.333%;
	}

.content {
	clear: both;
	display: block;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
}

	.content ol, .content ul { padding-left: 1em; }
	.content ol { list-style: decimal; }
	.content ul { list-style: disc; }
	.content li { margin: 0 0 0.833em 0; }

	.entry-content {
		display: block;
	}
	
		.entry-content.basic > p:first-of-type {
			font-size: 116.667%; line-height: 1.428em;
		}
		
		.entry-content.basic > *:last-child { margin-bottom: 0 !important; }
		
		.entry-content img {
			display: block;
			margin: 1.5em auto;
			text-align: center;
		}
		
	.entry-header { }
	
	.content .entry-header { margin-bottom: 0 !important; padding-bottom: 0.5em !important; }
	.content .entry-header + .entry-content { margin-top: 0 !important; padding-top: 0 !important; }
		
	.entry-meta {
		color: rgb(114,108,116);
		font-size: 80%;
		line-height: 1.333em;
		margin: 1em 0 !important;
	}

		div.entry-meta a, div.entry-meta a:visited { color: inherit !important; }
		div.entry-meta a:hover { text-decoration: underline; }

.debug { display: none; }
body.admin-bar .debug {
	border: 1px solid gray;
	display: block;
	font-family: monospace;
	font-size: 85%;
	height: 15em;
	line-height: 1.25em;
	margin: 1em auto;
	overflow: scroll;
	width: 80%;
}

.expanders {
	background: rgb(255,255,255);
}

	.expander {
		clear: both;
		display: block;
		margin-bottom: 1em;
		margin-left: -30px;
	}
	.expander:after { clear: both; content: ''; display: table; } /* Clearfix */
	
		.expander .toggle {
			background: transparent url('images/toggle_closed.svg') left center no-repeat;
			background-size: 16px 16px;
			cursor: pointer;
			padding: 5px 0 0 30px;
			-moz-user-select: none;
			-webkit-user-select: none;
			user-select: none;
		}
		
			.expander .toggle * {
				margin: 0;
			}
		
		.expander.open .toggle {
			background-image: url('images/toggle_open.svg');
		}
		
		.expander .content {
			border-top: none;
			display: block;
			height: 0;
			overflow: hidden;
			padding: 0.5em 0 0 30px !important;
			transition: max-height 200ms ease;
		}
		
		.expander.open .content {
			height: auto;
			padding: 1em 0 1em 30px;
		}
	
.hero {
	border-bottom: 20px solid rgb(57,54,58);
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%;
}

	.hero * {
		-moz-user-select: none;
		-webkit-user-select: none;
	}

	.slides {
		background: rgb(114,108,116);
		height: auto;
		list-style: none;
		margin: 0 !important;
		padding: 0 !important;
		position: relative;
		width: 100%;
		z-index: 1;
	}
	
		.slides li {
			display: block;
			height: auto;
			margin: 0;
			opacity: 0;
			overflow: hidden;
			padding: 0;
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			transition: opacity 400ms;
			z-index: 1;
		}
		
		.slides li.current {
			position: relative;
			opacity: 1;
			z-index: 2;
		}
		
		.slides img {
			display: block;
			height: auto;
			position: relative;
			transform: rotate(-7deg) scale(1.25,1.25);
			width: 100%;
			z-index: 1;
		}
		.hero[data-hero-size=half_hero] .slides img {
			transform: rotate(-7deg) scale(1.5,1.5);
		}
		
		.slides .blocklink {
			color: inherit;
			display: block;
			overflow: hidden;
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			text-indent: -9999px;
			z-index: 4;
		}
		
		.slides .caption {
			background: rgba(234,73,55,0.9) url('images/scanlines.png') left top repeat; background-size: 10px 10px;
			color: rgb(255,255,255) !important;
			font-size: 88.889%;
			line-height: 1.5em;
			padding: 1.5em 2em;
			position: absolute; top: auto; right: auto; bottom: 5em; left: 7.5%;
			width: 42.857%;
			z-index: 3;
		}
		.slides .caption.left {
			right: auto; left: 7.5%;
		}
		.slides .caption.right {
			right: 7.5%; left: auto;
		}
		
			.slides .caption * { color: rgb(255,255,255); }
		
			.slides .caption > *:last-child { margin-bottom: 0 !important; }
		
		.slides .hero-overlay {
			background: transparent url('images/scanlines.png') left top repeat; background-size: 10px 10px;
			box-shadow: inset 0 0 200px rgba(0,0,0,0.333);
			-moz-mix-blend-mode: multiply;
			-webkit-mix-blend-mode: multiply;
			mix-blend-mode: multiply;
			opacity: 0.667;
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			z-index: 2;
		}
	
	.slide_select {
		list-style: none;
		margin: 0; padding: 0 !important;
		position: absolute; top: auto; right: auto; bottom: 1em; left: 7.5%;
		width: 100%;
		z-index: 2;
	}
	
		.slide_select li {
			background: transparent;
			background: rgba(255,255,255,0.25);
			border: 1px solid rgb(255,255,255);
			cursor: pointer;
			display: inline-block;
			height: 0.75em;
			opacity: 0.333;
			overflow: hidden;
			margin: 0 0.5em 0 0;
			text-indent: -999px;
			transition: opacity 200ms;
			width: 0.75em;
		}
		.hero:hover .slide_select li { opacity: 0.667; }
		.hero:hover .slide_select li:hover { opacity: 1; }
		
		.slide_select li.current {
			background: rgb(105,161,168);
			cursor: default;
			opacity: 1 !important;
		}
	
	.slide_navigation {
		background-size: contain;
		cursor: pointer;
		height: 60px;
		margin-top: -30px;
		opacity: 0.5;
		overflow: hidden;
		position: absolute; top: 50%; bottom: auto;
		text-indent: -999px;
		transition: opacity 200ms;
		width: 60px;
		z-index: 3;
	}
	.hero:hover .slide_navigation { opacity: 0.667; }	
	.hero:hover .slide_navigation:hover { opacity: 1; }
	
	.slide_navigation.prev {
		background: transparent url('images/previous.svg') center center no-repeat;
		right: auto; left: 0;
	}
	
	.slide_navigation.next {
		background: transparent url('images/next.svg') center center no-repeat;
		right: 0; left: auto;
	}

ul.inline {
	display: block;
	list-style: none;
	padding: none !important;
}

	ul.inline li {
		display: inline-block;
		margin: 0 1.333em 0 0;
	}

	ul.alignright.inline li {
		margin: 0 0 0 1.333em;
	}

.no-column-break {
	-webkit-column-break-inside: avoid;
}

.project { }

	ul.project_meta {
		display: block;
		font-size: 75%;
		list-style: none;
		margin: 0;
		padding: 0;
		text-transform: uppercase;
	}
	
		ul.project_meta li {
			display: inline-block;
			margin: 0 1.5em 0 0;
		}
	
	.project .ingredients, .project .preparation
	{ padding: 2.5em 16.667%; }
	
	.project .ingredients:after, .project .preparation:after
	{ clear: both; content: ''; display: table; /* Clearfix */ }
	
	.project .ingredients .ingredients_list {
		-moz-column-count: 2;
		-moz-column-gap: 3em;
		-webkit-column-count: 2;
		-webkit-column-gap: 3em;
		column-count: 2;
		column-gap: 3em;
	}
	
		.project .ingredients h2 { margin-top: 0; }
	
		.project .ingredients .ingredients_list p,
		.project .ingredients .ingredients_list ul,
		.project .ingredients .ingredients_list li
		{
			line-height: 1.333em;
			list-style: none;
			margin: 0;
			padding: 0 0 0.667em 0;
			-webkit-column-break-inside: avoid;
		}

.project_finder { }

	.project_finder ul.buttons li { margin-right: 0.167em; }

	.project_finder .button {
		font-size: 83.333%;
		padding: 0.1em 0.5em;
	}

.relative { position: relative; }

	.relative .absolute.fill {
		display: block;
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	}
	.relative .absolute.fill.blocklink {
		background: transparent;
		font-size: 1px;
		text-indent: -9999px;
		transition: background 0.4s;
	}
	.relative .absolute.fill.blocklink:hover {
		background: rgba(0,0,0,0.025);
	}

.small {
	font-size: 88.889%;
	line-height: 1.5em;
}
.small.button {
	font-size: 75%;
}

.social { }

	.social ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	
	.social li {
		display: inline-block;
		margin: 0 0 1.5em 5px !important;
		overflow: hidden;
		text-indent: -999px;
	}
	.social li:last-of-type { margin-right: 0 !important; }
	
	.social a, .social a:visited {
		background: rgba(114,108,116,0.333) url('images/social_sprites_x2.png') 40px 0px no-repeat;
		background-size: 520px 64px;
		border-radius: 3px;
		display: block;
		height: 32px;
		transition: all 0.25s;
		width: 32px;
	}
	
	.social a[href*=facebook] { background-position: 0px 0px; }
	.social a[href*=twitter] { background-position: -40px 0px; }
	.social a[href*=instagram] { background-position: -160px 0px; }
	.social a[href*=google] { background-position: -200px 0px; }
	.social a[href*=youtube] { background-position: -280px 0px; }
	.social a[href*=vimeo] { background-position: -320px 0px; }
	.social a[href*=tumblr] { background-position: -360px 0px; }
	
	.social a:hover {
		border-bottom: none;
	}

	.social a[href*=facebook]:hover { background-position: 0px -32px; }
	.social a[href*=twitter]:hover { background-position: -40px -32px; }
	.social a[href*=instagram]:hover { background-position: -160px -32px; }
	.social a[href*=google]:hover { background-position: -200px -32px; }
	.social a[href*=youtube]:hover { background-position: -280px -32px; }
	.social a[href*=vimeo]:hover { background-position: -320px -32px; }
	.social a[href*=tumblr]:hover { background-position: -360px -32px; }

.spotlight {
	background: rgb(255,255,255);
	padding: 2.5em 5%;
}
.basic + .spotlight { padding-top: 1.5em; }

	ul.tiles {
		display: block;
		margin: 1.333em -40px 0 0;
		padding: 0;
	}
	
	.column ul.tiles { margin-left: 0; }
	
		ul.tiles li {
			background-color: rgb(238,238,238);
			display: inline-block;
			margin: 0 40px 40px 0;
			padding: 0;
			position: relative;
			vertical-align: top;
			width: 29%;
			width: calc(33.333% - 40px);
		}
		
		ul.tiles.plain li { background-color: transparent; }
		
		.column ul.tiles li {
			width: 44%;
			width: calc(50% - 40px);
		}
		
			ul.tiles li > a {
				color: inherit !important;
				display: block !important;
				overflow: hidden !important;
				position: absolute !important;
				top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
				text-indent: -999px !important;
				z-index: 2 !important;
			}
		
			ul.tiles li > a:hover {
				border: none !important;
			}
			
			ul.tiles li:not(.callout) h3 {
				font-family: 'aktiv-grotesk-extended', sans-serif;
				font-size: 133.333%;
				font-weight: 200;
				line-height: 1.25em;
				margin: 0.667em 0 0.5em 0;
			}
		
			ul.tiles li .image {
				display: block;
				overflow: hidden;
				position: relative;
				width: 100%;
			}
			
			ul.tiles.plain li .image { border-top: none; }
			
				ul.tiles li .image img {
					display: block;
					height: auto;
					position: relative;
					transform: rotate(-7deg) scale(1.25,1.25);
					width: 100%;
					z-index: 1;
				}
				
				ul.tiles li .image .image_overlay {
					background: transparent url('images/scanlines.png') left top repeat; background-size: 10px 10px;
					box-shadow: inset 0 0 50px rgba(0,0,0,0.333);
					-moz-mix-blend-mode: multiply;
					-webkit-mix-blend-mode: multiply;
					mix-blend-mode: multiply;
					opacity: 0.667;
					position: absolute; top: 0; right: 0; bottom: 0; left: 0;
					z-index: 2;
				}
			
			ul.tiles li .text {
				padding: 1.333em !important;
			}
			
			ul.tiles li.callout .text {
				padding: 3em 1.5em 140px 1.5em !important;
			}
			
			ul.tiles li .text > *:first-child { margin-top: 0 !important; }
			ul.tiles li .text > *:last-child { margin-bottom: 0 !important; }

			ul.tiles li .title {
				margin: 0;
			}
		
			ul.tiles li .description {
				font-size: 88.889%;
				line-height: 1.5em;
				margin: 0;
			}
			
				ul.tiles li .description * { margin: 0 !important; }
			
			ul.tiles li .entry-meta {
				margin: 0.5em 0 0 0;
				position: relative;
				z-index: 3;
			}
			

/* DOM ELEMENTS */

#wrapper {
	background: rgb(57,54,58);
	box-shadow: 0 0 50px rgba(0,0,0,0.333), 0 0 5px rgba(0,0,0,0.667);
	margin: 0 auto;
	max-width: 1920px;
	min-width: 280px;
	overflow-x: hidden;
	padding: 0;
	width: 100%;
}

	#header {
		background: rgb(57,54,58);
		display: block;
		font-family: 'aktiv-grotesk', sans-serif;
		height: 120px;
		margin: 0 auto;
		max-width: 1920px;
		position: fixed; top: 0; right: 0; bottom: auto; left: 0;
		transition: all 0.333s;
		width: 100%;
		z-index: 3;
	}
	
	body.admin-bar #header { top: 32px; }
	
	body.scrolled #header {
		height: 60px;
	}
		
		#logo {
			margin: 0;
			position: absolute; top: 18px; right: auto; bottom: auto; left: 5%;
			transition: all 0.333s;
			width: 360px;
		}
		
		body.scrolled #logo {
			top: 8px; width: 180px;
		}
		
			#logo h1 {
				line-height: 1px;
				margin: 0;
				padding: 0;
			}
		
			#logo a {
				display: block;
				margin: 0;
				padding: 0;
				position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			}

		#nav_handle { display: none; }
		
		#primary_navigation {
			font-size: 90%;
			font-weight: bold;
			position: absolute; top: 42px; right: 5%; bottom: 0; left: auto;
			text-align: right;
			transition: all 0.333s;
			width: auto;
		}
		
		body.scrolled #primary_navigation {
			font-size: 14px;
			line-height: 21px;
			top: 16px;
		}
		
		#primary_navigation .menu {
			display: table;
			float: right;
			list-style: none;
			margin: 0 -0.667em 0 0;
			padding: 0;
			text-align: left;
			width: auto;
		}
		
			#primary_navigation .menu > ul > li {
				display: table-cell;
				border-bottom: 2em solid transparent; /* Affordance for hover menus */
				padding: 0;
				position: relative;
				z-index: 1;
			}
			
			#primary_navigation .menu > ul > li:hover {
				z-index: 2;
			}
			
				#primary_navigation .menu > ul > li > a {
					background-color: transparent;
					border-radius: 4px;
					border: 1px solid transparent;
					color: rgb(255,255,255) !important;
					display: inline-block;
					margin-left: 2px;
					padding: 2px 0.667em;
					text-transform: uppercase;
					white-space: nowrap;
				}
				
				#primary_navigation .menu > ul > li > a:hover {
					background-color: rgb(234,73,55);
					border: 1px solid transparent !important;
					color: rgb(255,255,255) !important;
				}
				
				#primary_navigation .menu > ul > li.current_page_item > a,
				#primary_navigation .menu > ul > li.current_page_ancestor > a,
				body.post-type-archive-project #primary_navigation .page-item-123 > a,
				body.single-project #primary_navigation .page-item-123 > a
				{
					border: 1px solid rgba(255,255,255,0.5);
				}
							
				#primary_navigation .menu > ul > li > ul {
					display: none;
				}
				
				#primary_navigation .menu > ul > li:hover > ul {
					background: rgb(234,73,55);
					border-radius: 4px;
					display: block;
					line-height: 1.5em;
					margin: 15px 0 0 0;
					padding: 3px;
					position: absolute; top: 100%; right: auto; bottom: auto; left: 0;
					text-align: left;
					width: 200px;
				}
				/* http://www.cssarrowplease.com */
				#primary_navigation .menu > ul > li:hover > ul:after {
					border: 7px solid transparent;
					border-bottom-color: rgb(234,73,55);
					content: ' ';
					height: 0;
					margin-left: 0;
					position: absolute; bottom: 100%; left: 21px;
					pointer-events: none;
					width: 0;
				}
				
				body.scrolled #primary_navigation .menu > ul > li:hover > ul {
					width: 180px;
				}
				
				#primary_navigation .menu > ul > li:last-of-type:hover > ul {
					right: 0; left: auto;
				}
				#primary_navigation .menu > ul > li:last-of-type:hover > ul:after {
					right: 21px !important; left: auto;
				}
				
					#primary_navigation .menu > ul > li > ul * { color: rgb(255,255,255) !important; }
					
					#primary_navigation .menu > ul > li > ul li { margin: 0; }

					#primary_navigation .menu > ul > li > ul a {
						background: transparent;
						border: none;
						border-radius: 3px;
						display: block;
						margin: 0;
						padding: 0.5em 1em;
					}
			
					#primary_navigation .menu > ul > li > ul a:hover {
						background: rgba(0,0,0,0.05);
					}
		
		#primary_navigation .search {
			display: none;
		}
										
	#page {
		clear: both;
		display: block;
		margin: 0;
		padding: 120px 0 0 0;
		position: relative;
		z-index: 1;
	}
	
	#footer {
		color: rgb(105,161,168) !important;
		font-family: 'aktiv-grotesk', sans-serif;
		font-size: 75%;
		margin: 0;
		padding: 2em 5%;
		position: relative;
		z-index: 0;
	}
	
	#footer * { color: rgb(105,161,168) !important; }

	#footer:after { clear: both; content: ''; display: table; } /* Clearfix */
    
		#footer .social {
			float: right;
			margin-left: 1.25em;
			position: relative; z-index: 2;
		}
		
		#footer .contact {
			display: block;
			line-height: 1.5em;
			margin: -0.25em 0 0.75em 0;
			position: relative; z-index: 1;
		}
		
			#footer .contact ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}

			#footer .contact li {
				display: inline-block;
				margin: 0 1em 0 0;
				white-space: nowrap;
			}
			
			#footer .contact br {
				display: none;
			}
		
		#footer .copyright {
			font-size: 90%;
			line-height: 1.5em;
			margin: 0;
			opacity: 0.7;
			position: relative; z-index: 1;
		}

#popover {
	display: block;
	font-size: 88.889%;
	line-height: 1.5em;
	padding: 1.5em 3.333em;
	position: fixed; top: auto; right: -480px; bottom: 0.667em; left: auto;
	text-align: center;
	transition: right 0.4s;
	width: 480px;
	z-index: 2;
}

#popover.open {
	box-shadow: 0 0 20px rgba(0,0,0,0.5);
	right: 0;
}

	#popover p { margin: 0; }

	#popover > .close {
		cursor: pointer;
		float: right;
		font-size: 200%;
		margin-top: -0.5em;
		margin-right: -1.333em;
	}
	
	#popover > h3 {
		font-size: 150%;
		margin: 0 0 0.333em 0;
	}
	
	#popover > div:not(.close) {
	}
	
	#popover form { margin: 0; }
	
		#popover form input:not([type=submit]) {
			height: 2.1em;
			line-height: 2.1em;
		}

		#popover *:-ms-input-placeholder { line-height: 3.6em; }
		#popover *:-moz-placeholder { line-height: 3.6em; }
		#popover *::-webkit-input-placeholder { line-height: 3.6em; }

#swipebox-overlay {
	background-color: rgba(57,54,58,0.5) !important;
}


/* WP ADMIN */

#wpadminbar .ab-item, #wpadminbar .ab-label { font-family: sans-serif !important; }
#tinymce {
	background: rgb(255,255,255) !important;
	padding: 1em !important;
}

	/*#tinymce:first-of-type > p:first-of-type {
		font-size: 116.667%; line-height: 1.428em;
	}*/


/* CSS3 MEDIA QUERIES */

/* PRINT */
@media print {

	/* Basic settings */	
	* {
		background: white !important;
		border: none !important;
		-moz-box-shadow: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		color: black !important;
		text-shadow: none !important; 
		filter: none !important; 
		-ms-filter: none !important;
	}
	@page { margin: 10% 5%; }
	h1, h2, h3, p { orphans: 3; widows: 3; }
	h1, h2, h3 { page-break-after: avoid; }
	
	body { }
	body:before {
		content: 'Printing a web page? Really?';
	}
	
	body * { display: none !important; }
		
}


/* LARGE SCREENS (content area over 1440 pixels) */
@media screen and (min-width: 1440px) {

	body { font-size: 133.333%; }

	.basic, .search-results:not(.post-type-archive-project) .entry-header, .search-results:not(.post-type-archive-project) .entry-content {
		padding-left: 22.5%; padding-right: 22.5%;
	}

	.slides .caption { width: 37.5%; }
	
	#header { height: 150px; }
	
	#logo { top: 22px; width: 440px; }
	
	#primary_navigation { top: 54px; }
	
	#primary_navigation .menu > ul > li:hover > ul { width: 240px; }
	
	#page { padding-top: 150px; }

}


/* SMALLER COMPUTERS (content area under 1200 pixels) */
@media screen and (max-width: 1200px) {

	.basic, .search-results:not(.post-type-archive-project) .entry-header, .search-results:not(.post-type-archive-project) .entry-content {
		padding-left: 17.5%; padding-right: 17.5%;
	}

	.slides .caption { width: 62.5%; }
	
}


/* TABLETS (content area under 1024 pixels) */
@media screen and (max-width: 1024px) {

	body { font-size: 100%; }

	.basic, .search-results:not(.post-type-archive-project) .entry-header, .search-results:not(.post-type-archive-project) .entry-content {
		padding-left: 12.5%; padding-right: 12.5%;
	}

	.columns.columns-2-even {
		padding-left: 10%; padding-right: 10%;
	}

	ul.tiles { margin-right: -30px; }
	
		ul.tiles li {
			margin: 0 30px 30px 0;
			width: calc(33.333% - 30px);
		}

		.column ul.tiles li {
			width: calc(50% - 30px);
		}

	#header {
		height: 60px;
	}
	
	#logo { top: 8px; width: 180px; }
	
	#primary_navigation {
		font-size: 14px;
		line-height: 21px;
		top: 16px;
	}
	
	body.scrolled #primary_navigation .search { display: none; }

	#page {
		line-height: 1.5em;
		padding-top: 60px;
	}

}


/* PHONES (content area under 782 pixels) */
@media screen and (max-width: 782px) {

	body { font-size: 88.889%; }

	blockquote { font-size: 133.333%; line-height: 1.25em; }

	h1 { font-size: 244.444%; line-height: 1.091em; }
	h2 { font-size: 200%; line-height: 1.167em; }
	h3 { font-size: 133.333%; line-height: 1.25em; }
	h4 { font-size: 105.555%; line-height: 1.579em; }
	h5 { font-size: 100%; line-height: 1.5em; }

	.alignleft, .aligncenter, .alignright, img.alignleft, img.alignright {
		clear: both;
		display: block;
		float: none;
		margin: 1em auto !important;
		max-width: 100%;
		width: auto;
	}
	
	.basic, .search-results:not(.post-type-archive-project) .entry-header, .search-results:not(.post-type-archive-project) .entry-content {
		padding: 2em 5%;
	}
	
	.button.toggle {
		font-size: 75%;
		line-height: 1.5em;
		margin-right: 0;
		padding: 0.333em 0.5em 0.167em 0.5em;
	}
	
	ul.buttons li { margin-right: 0.167em; }

	.callout_content, .callout .image, .callout .text {
		display: block;
		width: 100%;
	}
	
	.callout .image[style] { min-height: 240px; }

	.callout_content .image, .callout_content .text { padding: 1.5em 5% !important; }

	.columns {
		display: block;
		padding: 2em 0;
		width: 100% !important;
	}
		
	.column {
		display: block;
		margin: 0 auto 1.5em auto !important;
		padding: 0 !important;
		width: 90% !important;
	}
	
	.basic .column { padding: 0 !important; }

	.expander { margin-left: 0; }

	.slides li {
		max-height: none;
		overflow: visible;
	}

	.slides .caption {
		background: rgb(234,73,55);
		font-size: 88.889%;
		line-height: 1.5em;
		margin-top: 0;
		padding: 1.5em 5%;
		position: relative; top: auto; right: 0 !important; bottom: 0; left: 0 !important;
		width: 100%;
		z-index: 3;
	}
	
	.slide_select { display: none; }
	
	.slp_map, .slp_map + .entry-meta { display: none; }

	ul.tiles {
		display: block;
		margin: 15px 0;
	}
	
	ul.tiles li, .column ul.tiles li {
		display: block;
		margin: 0 0 15px 0;
		width: 100%;
	}

		ul.tiles li.callout .text {
			padding: 1.5em !important;
		}

	body.admin-bar #header { top: 45px; }
	
	#header, body.scrolled #header {
		font-size: 100%;
		height: 60px;
		right: 0; left: 0;
		width: 100%;
	}

	#logo, body.scrolled #logo {
		top: 8px; left: 15px;
		width: 180px;
	}
		
	#nav_handle {
		background: transparent url('images/hamburger_menu.svg') center center no-repeat;
		background-size: contain;
		border: 8px solid transparent;
		cursor: context-menu;
		display: block;
		height: 44px;
		padding: 0;
		position: absolute; top: 7px; right: 12px; bottom: auto; left: auto;
		width: 44px;
	}
	body.nav_open #nav_handle {
		background-image: url('images/close_x.svg');
	}

	#primary_navigation { display: none; }
	body.nav_open #primary_navigation {
		background: rgb(57,54,58);
		box-shadow: 0 2px 4px -3px rgba(0,0,0,0.75);
		display: block;
		height: auto;
		padding: 0.5em;
		position: absolute; top: 100%; right: 0; bottom: auto; left: 0;
		z-index: 9;
	}
		
		#primary_navigation .menu {
			display: block;
			font-size: 18px;
			line-height: 1.5em !important;
			padding: 0.5em 20px 0.5em 47px;
			text-align: left;
			width: 100%;
		}
		
			#primary_navigation .menu > ul > li {
				display: block;
				border-bottom: none;
				margin: 0;
			}

				#primary_navigation .menu > ul > li > a {
					background: transparent !important;
					border: none !important;
					color: rgb(255,255,255) !important;
					display: inline-block;
					font-size: 133.333%;
					padding: 0.167em 0;
				}
				
				#primary_navigation .menu > ul > li > a:hover,
				#primary_navigation .menu > ul > li:last-of-type > a:hover
				{
					background: transparent !important;
					border: none !important;
					color: rgb(234,73,55) !important;
				}
				
				#primary_navigation .menu > ul ul { display: none !important; }

								
		body.scrolled #primary_navigation .menu {
			position: relative; top: auto; right: auto; bottom: auto; left: auto;
			transition: none;
		}

		#primary_navigation .search,
		body.scrolled #primary_navigation .search
		{
			display: block;
			position: relative; top: auto; right: auto; bottom: auto; left: 15px;
			text-align: left;
		}

	#page {
		padding-top: 60px;
	}
	
	#footer .widget {
		clear: both;
		float: none !important;
	}

	#footer .widget .menu > li {
		margin: 0 1.5em 0 0;
	}

	#footer .widget:nth-of-type(2n) .menu > li {
		margin: 0 1.5em 0 0;
	}
	
	#footer .social {
		float: none !important;
		margin-left: 0;
	}
	
	.social li {
		display: inline-block;
		margin: 0  5px 1.5em 0 !important;
	}
	
	#footer .contact li { display: block; }
	#footer .contact a { color: inherit !important; }
	#footer .contact br { display: block; }

	#popover {
		font-size: 75%;
		right: -100%; bottom: 0;
		width: 100%;
	}
	
	#wpadminbar { position: fixed !important; }

}


/* HIGH RESOLUTION IMAGE REPLACEMENTS */
@media	only screen and (-moz-min-device-pixel-ratio: 1.5),
		only screen and (-o-min-device-pixel-ratio: 3/2),
		only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-devicepixel-ratio: 1.5),
		only screen and (min-resolution: 1.5dppx)
{

	select { background-image: url('images/select_arrows_x2.png'); }

	.social a, .social a:visited { background-image: url('images/social_sprites_x2.png'); }
		
}