* { 	
	margin:			0;
	padding:		0;
}

html {	
	height:			100%;
}

body {	
	height:			100%; 
	background: 	#f6f6f0;
	font:			normal normal 300 100% 'Open Sans', sans-serif;
	color:			#202020;
	line-height: 	130%;
}




/* ----------- */
div#wrap {
	position:		relative;
	min-height:		100%;
	min-width:		280px;
	padding:		0 20px;
}

	div.align-C,
	div.align-L,
	div.align-R {
		position:		relative; 
		max-width:		1064px;
		padding:		0;
	}
	div.align-C { 
		margin:			0 auto 0 auto;
	}
	div.align-L {
		margin:			0 0 0 auto; 
	}
	div.align-R {
		margin:			0 auto 0 0; 
	}

@media only screen and ( min-width: 960px ) and ( max-width: 1199px )
{
	div.align-C,
	div.align-L,
	div.align-R {
		max-width:		900px;
	}
}

@media only screen and ( min-width: 768px ) and ( max-width: 959px )
{
	div.align-C,
	div.align-L,
	div.align-R {
		max-width:		700px;
	}
}

@media only screen and ( min-width: 481px ) and ( max-width: 767px ) 
{
	div.align-C,
	div.align-L,
	div.align-R {
		max-width:		580px;
	}
}

@media only screen and ( max-width: 480px )
{
	div.align-C,
	div.align-L,
	div.align-R {
		max-width:		440px;
	}	
}




/* ------------- */
div.pairs,
div.thirds {
	position:		relative;
	max-width:		100%;
}

div.pairs > div {
	position:		relative;
	width:			48%;
}
div.pairs > div:first-child {
	float:			left;
}
div.pairs > div:last-child {
	float:			right;
}

div.thirds > div {
	width:			28%;
	float:			left;
}
div.thirds > div:first-child {
	margin-right:	8%;
}
div.thirds > div:last-child {
	float:			right;
}

@media only screen and ( max-width: 767px ) 
{
	div.pairs > div,
	div.thirds > div {
		float:			none;
		width:			100%;
	}
	div.thirds > div:first-child {
		margin-right:	0;
	}
}




/* --------------------- */
p { 
	font-size:		19px;
	margin-bottom:	20px; 
	line-height: 	145%;
}

h1 {  
	font-weight:	300;
	font-size:		32px;
	margin:			10px 0 30px 0;
	line-height: 	110%;
}

h2 {  
	font-weight:	300;
	font-size:		28px;
	margin:			0 0 20px 0;
	line-height: 	120%;
}


ul {
    font-size:		19px;
	line-height: 	145%;
	list-style: 	circle;
	margin-left:    30px;
}

ul li {
    margin-bottom:	20px;

}

ol {}

li {}

a { 
	color:				#26669c;
	outline:			none; 
	cursor:				pointer;
	text-decoration:	none; 
}

a:hover	{ 
	color:				#26669c; 
	text-decoration:	underline; 
}

strong {
	font-weight:		600;
}


hr {
	display:		block;
	height:			0px;
	border:			1px solid #d9d9d9;
	border-bottom:	1px solid #fff;
}

img {
	border-radius:	3px;
}



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

}






/* ------------------ */

header {
	position:		relative;
	width:			100%;
	padding-bottom:	48px;
}

	.logo {
		float:		left;
		width:		195px;
		margin:		0;
		padding:	30px 0 0 0;
	}
		.logo img {
			display:	block;
			width:		100%;
			height:		auto;
		}
	
	
	nav.menu {
		width:		auto;
		margin:		0 0 0 auto;
		padding:	0;
	}

		nav.menu ul {
			float:			right;
			list-style: 	none inside none;
			padding: 		45px 1px 0 0;
			font-weight: 	400;
		}

		nav.menu ul > li {
			display:	block;
			float:		right;
			margin:		0 0 0 6px;
			font-size:	18px;
		}

		nav.menu li a {
			display:		block;
			padding:		5px 10px;
			color:			#000;
		}
		nav.menu li a:hover {
			color:				#26669c;
			text-decoration:	none;
		}
		nav.menu li:first-child > a {
			padding:		5px 0 5px 10px;
		}
		
	
	.controls {
		float:		right;
		padding:	21px 0 0 0;
	}
		.button {
			float:		right;
			padding:	10px;
			text-align: right;
			margin:		0 0 0 10px;
			cursor:		pointer;
		}
		
		.button:first-child {
			padding:	10px 0 10px 10px;
		}
		
		.button:before {
			font-family: 		FontAwesome;
			color:				#404040;
			font-size:			28px;
		}
		.button.mobile-menu:before {
			content: 			"\f0c9";
		}	
		.button.search:before {
			content: 			"\f002";
		}
	

@media only screen and ( max-width: 767px ) 
{
	header {
		padding-bottom:	18px;
	}
	
	.logo {
		width:		165px;
		padding:	20px 0 0 0;
	}
}
	
	
	

/* ------------------------- */

main { 
	position:		relative;
	width:			100%;
	padding-bottom:	100px;
}

	section.content article { 
		position:		relative; 
		margin:			0;
		
	}
	section.content article a { 
		text-decoration:	underline; 
	}
	
	
		
	section.content.side article {
		position:		relative;
		float:			right;
		width:			34%;	
	}
	section.content.side aside { 
		position:		relative; 
		float:			left; 
		width:			62%;
	}
	
	
	
	.project-summary {
		padding:		0 0 60px 0;
	}
	.project-summary .artwork {
		position:		relative;
		float:			left;
		width:			62%;
		padding-top:	6px;
	}
	.project-summary .description,
	.project-summary .project-title	{
		position:		relative; 
		float:			right; 
		width:			34%;
	}
	
	.videodiv {
	    padding-bottom: 60%;
	}
	


@media only screen and ( min-width: 960px ) and ( max-width: 1199px )
{
	section.content.side article {
		width:			44%;	
	}
	section.content.side aside { 
		width:			52%;
	}
}

@media only screen and ( min-width: 768px ) and ( max-width: 959px )
{
	section.content.side article {
		width:			54%;	
	}
	section.content.side aside { 
		width:			42%;
	}
}

@media only screen and ( max-width: 767px ) 
{
	section.content.side article,
	section.content.side aside,
	.project-summary .artwork,
	.project-summary .description,
	.project-summary .project-title	{
		float:			none;
		width:			100%;
	}
	
	section.content.side article,
	.project-summary .description {
		margin-bottom:	46px;
	}
	
	.project-summary .artwork {
	    padding-bottom: 50%;
		margin-bottom:	24px;
	}
	
	.project-summary .project-title h2 {
		margin-bottom:	8px;
	}
	
}






/* ------------- */
footer { 
	position:		relative;
	width:			100%;
	padding:		0 0 40px 0;
}
footer p { 
	font-size:		15px;
	line-height: 	140%;
}





/* ------------- */
.sizeable {
	display:	 block;
	width:		 100%;
	height:		 auto;
}

.sizeablevid {
    position:    absolute;
    width:		 100%;
	height:		 100%;
}

.clear {
	height:		0px;
	clear:		both;
}

.c {
	text-align:		center;
}
.r {
	text-align:		right;
}

.label {
	font-weight:	400;
}

.desktop-only {
	display:	block;
}
.mobile-only {
	display:	none;
}



h1.tagline {
	font-size:	44px;
	max-width:	700px;
	text-align:	right;
	margin:		36px 0 20px auto;		
}

@media only screen and ( min-width: 768px ) and ( max-width: 959px )
{
	h1.tagline {
		font-size:	36px;
		margin-top:	26px;
	}
}

@media only screen and ( max-width: 767px ) 
{
	.desktop-only {
		display:	none;
	}
	.mobile-only {
		display:	block;
	}
	
	h1.tagline {
		font-size:	30px;
		margin-top:	16px;
		text-align:	center;
	}
}



/* Mobile slide nav 
------------------------------ */
div#horizontal-slide-nav {
	position:		fixed;
	z-index:		1000;
	top:			0px;
	left:			0px;
	width:			220px;
	background:		#f3f3f3;
	min-height:		100%;
	padding:		20px 0 0 0;
	border-right: 	1px solid #cfcfcf;
	border-bottom: 	1px solid #cfcfcf;
	display:		none;
}
	.slide-nav-wrap {
		 width:			220px;
		 float:			right;
	}

	div#horizontal-slide-nav .slide-nav-wrap > ul {
		list-style-type:	none;
		border-bottom:		1px solid #fff;
		margin:				0 0 50px 0;
	}
	div#horizontal-slide-nav .slide-nav-wrap > ul > li {
		padding: 			0;
		border-bottom:		1px solid #e9e9e9;
		border-top:			1px solid #fff;
		font-size:			24px;
	}	
	div#horizontal-slide-nav .slide-nav-wrap > ul > li:first-child {
		border-top: 0;
	}
	div#horizontal-slide-nav .slide-nav-wrap > ul > li a {
		display:			block;
		padding: 			15px 20px 15px 40px;
		color:				#202020;
	}
	div#horizontal-slide-nav .slide-nav-wrap > ul > li a:after {
		content: 			"\f054";
		font-family: 		FontAwesome;
		color:				#ccc;
		font-size:			13px;
		padding:			0px 0 0 0;
		float:				right;
	}

#indextitle {
    width:          100%;
	font-weight:	300;
	font-size:		40px;
	margin:			30px 0 30px 0;
	line-height: 	110%;
	text-align:     center;
}