/* 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,
small, 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;
}






/*//////////////////////////////////////////*/


html, body 		{ height: 100%; }

a, a:visited 	{ color: #00aeef; text-decoration:none; }
a:hover 		{ color: #00aeef; text-decoration:underline; }

body 		{
			background-color:#fff;
			font-family: "proxima-nova",sans-serif;
			font-weight:300;
			font-size: 16px;
			line-height: 20px;
			color: #777;
			height: 100%; 
			min-height: 100%;
			position: relative;
			}
			
#home		{
			background-image: url(../img/backgrounds/background-1.jpg);
			/*background-size: 1600px 890px;*/
			background-size:cover;
			background-position: 50%;
			background-repeat: no-repeat;
			}
			
			
#projects	{
			/*background-image: url(../img/backgrounds/background-2.jpg);
			background-size:cover;
			background-position: 50%;
			background-repeat: no-repeat;*/
			}
	
#wrapper 	{
			width:100%;
			height:100%;
			}
			
			
header 	{
			margin:0 auto;
			text-align:center;
			letter-spacing:0.125em;
			padding:4% 0;
			height:12%;
			min-height:150px;
			 background-color: rgba(255,255,255,0.95);
			}
		
footer		{ width:100%; padding: 5% 0	}

#copyright	{
			display: block;
			text-align: center;
			clear: both;
			font-size: 0.75em;
			margin-top: 5em;
			color: #ccc;
			}
			
			
				
/* Typography */

p 	{	margin-bottom: 1em; }

h1 	{ 
	font-weight:100;
	font-size:4em;
	line-height:0.75em;
	margin:20px 0 10px;
	}

h1 i,
h2 i { clear:left; display:block; font-style:normal; font-size:0.5em; }
h2 i { font-size:0.75em; }


h2 { font-weight:100;
	font-size:2.5em;
	line-height:0.75em;
	margin-bottom:20px;
	}		
		
		
ul.list,
ul.list ul 	{ list-style-type:disc; margin-left:2em; margin-top:1em; }	
ul.list li 	{ line-height:1.25em; margin-bottom:0.5em; }	
			
			
/* Header */

			

.brand 		{
			display:inline-block;
			height:77px;
			width:400px;
			background-image:url(../img/strandhaus-logo@x2.png);
			background-size:400px 77px;

				/*height:54px;
				width:280px;
				background-size:280px 54px;*/
			text-indent:-999999em;
			margin-bottom:10px
			}
			
header menu { margin:3em auto 1em }

#header-photo 		{ margin-bottom:-5px }
#header-photo img 	{ width:100% }
			
ul#main-nav {
			list-style-type: none;
			text-align:center
			}

ul#main-nav li  {
				display:inline-block;	
			}
			
ul#main-nav li a  
			{
			  display: block;
			  margin:0 10px;	
			  color:#888;
			  font-size:1.25em;				
			  letter-spacing:1px;
			  text-decoration:none;
			  font-family: "proxima-nova",sans-serif;
			  font-weight:100;
			}
			
ul#main-nav li a:hover  
			{
			color: #00aeef;
			}
			
			
ul#main-nav li a.active,
#home a.main-nav-home, 
#projects a.main-nav-projects
			{
			color:#00aeef;
			}
			 

.contact	{
			margin:0 auto;
			width:280px;
			font-size:0.9em;
			color:#aaa;
			}
			
.contact a	{
			color:#aaa;
			}
			
			
			
			
			
/* Main */

.whitebg 	{ background-color: rgba(255,255,255,1) }
.bluebg		{ background-color: rgba(0,174,239,0.40); }
.greybg		{ background-color: rgba(248,248,248,1); /*color:#fff;*/ }

.home-main { height:50%; }
			
			
#projects .main { /*margin-top:30%;*/ }
			
.container { width:90%; max-width:1200px; /*padding:5% 0;*/ margin:0 auto;}

.fullwidth { width:100%;}

.container img { width:60%; }
.container img.half-width { width:50%;}
.container img.full-width { width:100%;}


section.photos {padding:50px 0;}

.container img.detail-photo { display: inline-block; width:260px; float:left; margin:20px }


.photo-container { min-height: 100%; width:60%; height:500px; }
.vid-container { min-height: 100%; width:60%; height:auto;}
				
.photo { 
	display:inline-block; 
	min-width:100%; 
	min-height: 100%; 
	background-position: 50% 50% !important;
	background-repeat: no-repeat !important;
	/*background-size: 100% !important;*/
	}

section.photos {
	padding: 20px 5%;
	}

.container img.detail-photo {
	width: 22%;
	margin: 1.5%;
	}
	
.padded { padding:2.5%; }
.container.padded { width:95%;}
		
		
		
		
		
			
.home-intro,
.projects-intro { width:90%; text-align:center; padding:5%; }
			
.home-intro p,
.projects-intro p {
			width: 800px;
			display: block;
			margin: 0 auto;
			font-size:1.5em;
			line-height:1.5em;
			color:#fff;
			font-weight:100;
			text-shadow: 0px 0px 3px rgba(0,0,0,0.65);
			}

.text-blurb { padding:4% 0 0; width:33%; font-size:14px; }




/* Helpers */



.pull-left 	{ float:left; }
.pull-right { float:right; }

.text-blurb.pull-left 	{ margin-left:3%; }
.text-blurb.pull-right 	{ margin-right:3%; }

.row:before,
.row::after {
  content:"";
  display:table;
}
.row::after {
  clear:both;
}
.row: {
  zoom:1; /* For IE 6/7 */
}



@media (max-width: 1199px) {

.text-blurb { padding:2.5% 0 0; font-size:13px; }

}



@media (max-width: 979px) {
	
	header	{
		min-height:180px;
		}
		
	
		
	
	.brand {
		margin-top: 30px;
		height:58px;
		width:300px;
		background-size:300px 58px;
		}
	
		
	.container { width:100%; }
	
	.container img { width: 45%; }
	.photo-container { width:45%; height:400px; }
	.vid-container { width:45%; margin-top:4%; }
	
	.container img.half-width,
	.container img.full-width { width:100%;}
	
	.home-intro p {
		width: 75%;
		font-size: 1.35em;
		line-height: 1.5em;	
		}
		
	
	
	.text-blurb {
	padding: 3% 0 3%;
	width: 45%;
	}
	
	.text-blurb.pull-left 	{ margin-left: 5%; }
	.text-blurb.pull-right 	{ margin-right: 5%; }
	

}


@media (max-width: 767px) {
	
	
  
  	.brand {
		margin-top: 30px;
		height:54px;
		width:280px;
		background-size:280px 54px;
		}
	
	.contact {
		width: 280px;
		}
		
	#header-photo { display:none }
		
	.home-main {
		height:45%;
	}
			
	.home-intro p {
			width: 100%;
			font-weight:500;
			font-size:1.2em;
			line-height:1.4em;
			}
	
	.bluebg		{ background-color: rgba(0,174,239,0.85); }
	
	.container img		{ width:100%; float:none; }
	.photo-container 	{ width:100%; height:200px; }
	.vid-container 		{ width:100%; height:auto; margin-top:0; }
	.photo 				{ background-size: 100% !important;}
	
	
	
	
	
	
	
	.text-blurb		{ width:90%; font-size:1.125em; line-height:1.25em }
	
	.text-blurb	h1	{  font-size:3em }
	.text-blurb	h2	{  font-size:2.25em }
	
	.text-blurb.pull-left 	{ margin: 5%; }
	.text-blurb.pull-right 	{ margin: 5%; }
	
	
	
}




@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    
	.brand { background-image:url(../img/strandhaus-logo@x2.png); }
	
}