*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
/*======== reset/cleanup of browser css =============*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul {list-style:none;}caption,th {text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;}
body{font-size:12px;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}select, input, textarea {font:99% arial,helvetica,clean,sans-serif;}pre, code {font:115% monospace;*font-size:100%;}
/*======== reset/cleanup of browser css =============*/

.cb{clear:both;display:block;}
.sc{clear:both;*zoom:1;}
.sc:after{content:".";display:block;height:0;clear:both;visibility:hidden; }


body{
	background:#fff;
	border:0;
	padding:0;
	margin:0;
	font:normal 14px "hn";
	color:#333;
}


a{ text-decoration:none;}

input.textinput,textarea.textinput{
	border:1px #999 solid;
	color:#333;
	padding:25px 15px;
	width:100%;
}
.textinput:active,.textinput:focus{
	border-color:#333;
}
textarea{min-height:5em;max-width:100%;min-width:100%;}

.check input{
	display:none;
}
.check{
	position:relative;
	padding-left:50px;
	padding-right:45px;
	white-space:nowrap;
	display:inline-block;
	height:40px;
	margin-bottom:20px;
}
.check:before{
	content:"";
	text-align:center;
	display:block;
	border:1px #999 solid;
	width:40px;
	height:40px;
	position:absolute;
	top:-11px;
	left:0;
	font-size:30px;
}
.check.on:before{
	content:"x";
}

/*========= generic snippets ========*/
.btn{
	display:inline-block;
	font-size:18px;
	padding:20px;
	text-align:center;
	width:100%;
	max-width:275px;
	border:1px #333 solid;
	color:#333;
	cursor:pointer;
}
.page-header .btn{
	border-color:#fff;
}
.btn.alt{
	background:#00BF00;
	color:#fff;
	border:0;
	padding:10px 30px;
	max-width:auto;
	width:auto;
}

.heart{
	display:inline-block;
	width:20px;height:20px;
	background:url("/assets/ui/heart-white-80.png") no-repeat;
	background-size:100% auto;
	position:relative;
	color:transparent;
}

/*============ site layout and skin ==========*/
#container{
	
}
#header, .page-header,  #footer{
	background:#231F20;
}
#header, .page-header, #header a, .page-header a, #footer a{
	color:#fff
}
#header{
	height:75px;	
	position:relative;
}
.has-header #header{/*page has a header graphic on it so that should bleed underneath the nav*/
	width:100%;
	position:absolute;
	left:0;top:0;
	z-index:3;
	background:transparent;
}
#header #logo{
	position:absolute;
	left:22px;
	top:22px;
	display:block;
	width:40px;
	height:37px;
	background:url("/assets/ui/w-white-80.png") no-repeat top center;
	background-size:100% auto;
}

#nav-main{
	position:absolute;
	right:20px;
	top:32px;
}
#nav-main a{
	display:inline-block;
	padding-left:20px;
}
#mobile-nav{
	display:none;
	position:absolute;
	right:20px;
	top:25px;
	width:30px;
	height:29px;
	background:url("/assets/ui/mobilemenu.png") no-repeat top center;
	background-size:100% auto;
	cursor:pointer;
}

#footer{
	padding:36px 20px;
	position:relative;
}
#footer, #footer a{
	color:#fff;
	font-size:16px;
}
#footer #footer-content{
	text-align:center;
}
#footer .copy{
	position:absolute;
	right:15px;
	bottom:10px;
}


.page-header{/*dark full width background*/
	width:100%;
	padding:80px 40px;
	background-size:cover;
	background-position:top center;
	background-repeat:no-repeat;
}
/*================ centered callout ===============*/
.callout{/*centered content with a large headline, a sentence, and a big button*/
	max-width:650px;
	margin:auto;
	text-align:center;
}
.callout h1, .callout h2{
	font-size:35px;
	margin:20px auto;
}
.callout h3{
	font-size:22px;
	line-height:1.4em;
	margin-bottom:30px;
}
.page-content .callout h3{
	text-align:left;
}
.page-content{
	padding:60px 20px;
}
.page-content .callout{
	margin-bottom:75px;
}

.page-content-superheader{
	background:#231f20;
	margin:0;
	padding-top:80px;
}
.callout-bgalt{
	background:#fff;
	padding:40px 0 60px 0;
}
.page-content-superheader .callout{

}

/*======== photos =================================*/
.photo-row{
	max-width:870px;
	text-align:center;
	margin:auto;
	margin-bottom:160px;
}
.photo-row:after{
	content:"";
	display:block;
	clear:both;
}
.photo-row ul:after{
	content:"";
	display:block;
	clear:both;
	margin-bottom:40px;
}
.photo-row h2{
	font-size:35px;
}
.photo-row li{
	background:#333;
	display:block;
	float:left;
	text-align:center;
}
.photo-row li .img{
	display:block;
	width:100%;
	height:100%;
	background-size:cover;
	background-position:top center;
	background-repeat:no-repeat;
}
.photo-row li h3{
	margin-top:15px;
	color:#000;
	
}
.photo-row.photos3 li{
	width:28.39%;
	height:316px;
	float:left;
	margin:60px 0;
}
.photo-row.photos3 li:nth-child(3n+2){/*center elements padded*/
	margin:60px 7.38%;
}
.photo-row.photos4 ul:after{
	margin-bottom:60px;
}
.photo-row.photos4{
	max-width:670px;
}
.photo-row.photos4 li{
	width:18.9%;
	margin:30px 2.98507462686567%;
	height:135px;
}

/*========== line line with big button==========*/
.oneliner{
	max-width:750px;
	margin:auto;
	text-align:center;
	clear:both;
}
.oneliner h2{
	font-size:38px;
	display:inline;
}
.oneliner .btn{
	margin-left:0.5em;
	position:relative;
	top:-5px;
}


/*================== list with images on the left and copy on the right =========*/
.listing, .listing a{
	color:#333;
}
.listing{
	max-width:710px;
	margin:40px auto 80px auto;

}
.listing .item{
	margin-bottom:130px;
	clear:both;
}
.listing .item:after,.listing:after{content:"";display:block;clear:both;}
.listing .item:last-child{margin-bottom:0;}
.listing .limg{
	float:left;
	width:200px;
	height:300px;
	background-size:cover;
	background-position:top center;
	background-repeat:no-repeat;
}
.listing .lcontent{
	margin-left:260px;
}
.listing .ltitle{
	display:block;
	font-size:34px;
	font-weight:bold;
	margin-bottom:20px;
}
.listing .ltext{
	font-size:16px;
	line-height:1.3em;
}
/*=========== wider version of listing ===========*/
.listing.wide{
	max-width:860px;
}
.listing.wide .limg{
	width:415px;
	height:277px;
}
.listing.wide .lcontent{
	margin-left:445px;
}


/*====================== big bullet list (UNUSED! REMOVE AFTER 2 mar 2015)==========*/
.big-bullets{
	max-width:800px;
	margin:auto;
}
.big-bullets li{
	display:block;
	float:left;
	width:45%;
	margin-bottom:80px;
	min-height:200px;
}
.big-bullets li:nth-child(odd){
	margin-right:5%;
}
.big-bullets h3{
	font-weight:bold;
	font-size:35px;
	margin-bottom:30px;
	padding-left:65px;
	position:relative;
}
.big-bullets h3:before{
	content:"";
	display:inline-block;
	background:#333;
	width:55px;
	height:55px;
	border-radius:50%;
	position:absolute;
	left:0px;
	top:-6px;
}
.big-bullets h2{
	text-align:center;
	display:block;
	margin-bottom:60px;
	font-size:40px;
	font-weight:bold;
}



/*============== face pile for about page ==============*/
.facepile{
	max-width:930px;/*is really 800, but compensating for all the margins*/
	margin:60px auto;
	text-align:left;
}
.facepile h2{
	font-size:60px;
	font-weight:bold;
	margin-bottom:55px;
	display:block;
	text-align:center;
}
.facepile li{
	width:150px;
	height:290px;
	margin:0 38px;
	display:inline-block;
	text-align:center;
	vertical-align:top;
}
.facepile .img{
	width:144px;
	height:144px;
	margin-bottom:20px;
	display:block;
	border-radius:50%;
	overflow:hidden;
}
.facepile .img img{
	width:100%;height:100%;
}
.facepile h3{
	font-size:16px;
}
.facepile h4{
	font-size:12px;
}
.facepile h5:before, .facepile h5:after{
	content:'"';
}



/*============ contact forms =============*/
.contact-form{
	max-width:684px;
	margin:auto;
	position:relative;
}
.contact-form h2{
	font-size:35px;
	display:block;
	text-align:center;
}
.contact-form table{
	text-align:left;
	width:100%;
}
.contact-form td{
	padding:15px;
}
.contact-form label{
	display:block;
	font-size:18px;
}
.contact-form label.check{
	display:inline-block;
}
.contact-form div.text-counter{
	text-align:right;
	margin-top:10px;
}
.contact-form .buttons{
	text-align:center;
}
.contact-form .buttons .btn{
	padding-left:50px;padding-right:50px;
}
.contact-form.completed table{display:none;}
.contact-form.completed .thx{display:block;}
.contact-form .thx{
	display:none;
	text-align:center;
	padding:150px 0;
	font-style:italic;
}
.contact-form.working:after{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#fff;
	opacity:0.5;
	cursor:wait;
}


/*========== jobs page ============*/
.jobs .page-content{
	max-width:650px;
	margin:auto;
	font-size:18px;
}
.jobs h3{
	font-size:30px;
	font-weight:bold;
	text-align:center;
	margin-bottom:1em;
}
.jobs .callout h3{
	font-size:22px;
	font-weight:normal;
}
.jobs strong{
	font-weight:bold;
	font-size:22px;
}
.jobs .job-position{
	margin-bottom:2em;
	line-height:1.3em;
}
.jobs ul ul{
	margin-left:2em;
	margin-bottom:1em;
}


/*======== blopg ============*/
.blogtext a{
	color:#8888ff;
}
.blogtext a:hover{
	text-decoration: underline
}
.blogtext{
	font-size:16px;
	line-height:1.5em;
	max-width:700px;
	padding-bottom:60px;
	margin:auto;
	clear:both;
}
.blogtext img{
	max-width:100%;
	margin:10px 0;
}

/*======================= media queries =============*/

@media screen and (max-width:980px){
	.facepile li{
		margin:0 15px;
	}
}

@media screen and (max-width:760px){
	.listing.wide .limg{
		width:150px;
		height:101px;
	}
	.listing.wide .lcontent{
		margin-left:170px;
	}
	.listing.wide .ltitle{
		padding:0;
		margin:10px 0;
	}
}

@media screen and (max-width:640px){
	.big-bullets li{
		float:none;
		margin-right:0 !important;
		width:100%;
		min-height:auto;
		
	}
}

@media screen and (max-width:580px){
	.photo-row.photos3 li{
		float:none;
		width:100%;
		clear:both;
		margin-bottom:50px;
	}
	.photo-row.photos3 li:nth-child(3n+2){
		margin:inherit;
	}
	.photo-row.photos3 li:last-child{
		margin-bottom:70px;
	}
	
	input.textinput, textarea.textinput{
		padding:10px 5px;
	}
	.contact-form td{padding:5px;}
	.contact-form h2{font-size:25px;}
	.oneliner h2{
		display:block;
		margin-bottom:0.5em;
	}
	.facepile{
		text-align:center;
	}
}

@media screen and (max-width:520px){
	#mobile-nav{display:block;}
	.nav-on #nav-main{
		background:rgba(0,0,0,0.9);
		visibility:visible;
		width:100%;
	}
	#nav-main{
		overflow:hidden;
		visibility:hidden;
		position:fixed;
		right:0;
		top:75px;
		height:100%;
		border:1px rgba(255,255,255,0.03) solid;
		width:0;
		transition:width .2s;
		z-index:10;
	}
	#nav-main a{
		font-size:18px;
		display:block;
		padding:30px 20px 20px 30px;
		text-align:left;
		border-bottom:1px #333 solid;	
		border-width:0 0 1px 1px;
		font-weight:bold;
	}

	.listing{
		margin-top:0;
	}
	.listing .item{
		margin-bottom:40px;
	}
	.listing .limg{
		width:100px;
		height:150px;
	}
	.listing .lcontent{
		margin-left:120px;
	}
	.listing .ltitle{
		font-size:25px;
		margin:15px 0;
	}
	
	.listing .ltext{
		font-size:14px;
	}
		
}

@media screen and (max-width:450px){
	.photo-row.photos4{
		width:275px;
		margin:20px auto;
	}
	.photo-row.photos4 li{
		width:125px;
		height:150px;
		margin:20px 0;
		background:transparent;
	}
	.photo-row.photos4 li:nth-child(odd){
		margin-right:20px;
	}
	.photo-row.photos4 .img{
		width:125px;
		height:134px;
	}
}

@media screen and (max-width:400px){
	.listing.wide .lcontent{
		margin-left:0;
		padding-top:10px;
	}
	.listing.wide .limg{
		float:none;
		width:100%;
		height:170px;
	}
	.facepile{
		margin-left:-10px;
		margin-right:-10px;
	}
	.facepile li{
		margin:0 10px;
	}
	.facepile li:nth-child(even){
		margin-right:0;

	}
}

@media screen and (max-width:350px){
	.listing .lcontent{
		clear:both;
		margin-left:0;
		padding-top:10px;
	}
	.listing .ltitle{
		margin:0;margin-bottom:10px;
	}
	.listing .limg{
		float:none;
		width:100%;
		height:390px;
	}
}