

body{
	background-color:#f6f6f6;
	text-align:center;
	margin:0;
	padding:0;
	font-family: 'Open Sans Condensed', sans-serif;
	color:#575555;
}
#bod{
	background-color:#fff;
	width:1400px;
	max-width:calc(100% - 40px);
	padding: 255px 20px 0px 20px;
	margin:0 auto;
	box-shadow:0 0 12px rgba(0,0,0,0.1);
}


a{
	color:#C34500;
}
.orange{
	color:#C34500;
}


/* ############################
 			MAIN MENU 
############################# */


.mainMenu{
	margin:0;
	padding:0;
	list-style:none;
	height:250px;
	margin-top:-250px;
}
.mainMenu li{
	width:calc(25% - 55.5px);
	margin:0;
	float:left;
	font-size:30px;
	text-transform:uppercase;
	height:22px;
	line-height:22px;
	padding: 90px 0 110px 0;
	position:relative;
}
	.mainMenu li a{
		height:100%;
		display:block;
		color:#000;
		text-decoration:none;
		transition:300ms;
	}
	.mainMenu li a:hover{
		color:#C34500;
	}
	
	.mainMenu li.home{
		margin:0;	
		height:250px;
		line-height:22px;
		padding: 0px 0 0px 0;
		width:222px;
		background-image:url('../../images/hayden-logo-stacked.png');
		background-position:center center;
		background-repeat:no-repeat;
		transition:300ms;
		opacity:1;
	}
	.mainMenu li.home a{
		opacity:0;
	}
	
	.mainMenu li a::before{
		content:'';
		background-image:url('../../images/dots.png');
		height:7px;
		width:60%;
		background-repeat:repeat-x;
		position:absolute;
		bottom:50px;
		left:20%;
		display:block;
	}
	
	.mainMenu li.home a::before{
		display:none;
	}


.textBlock.homeBlurb h1{
	display:inline;
	font-weight:inherit;
	color:inherit;
	font-size:inherit;
	text-transform:none;
}	
	
/* ############################
			FOOTER 
############################# */

.footer{
	position:relative;
	clear:both;
	margin-top:80px;
	margin-left:-20px;
	margin-right:-20px;
	background-color:#373737;
	border-top:solid 30px #C34500;
	color:#fff;
	font-size:24px;
	padding:0px 60px 20px 60px;
}
.footer::after{
	content:'';
	clear:both;
	display:block;
}

.footer .leftCol{
	width:53%;
	float:left;
	text-align:left;
}
	.footer .leftCol h2{
		font-weight:normal;
		font-size:1.25em;
		margin-left:80px;
	}
	
	.footer .leftCol .contactBlock{
		margin-left:40px;
		width:calc(70% - 120px);
		background-image:url('../../images/dots.png');
		background-repeat:repeat-x;
		background-position: top left;
		padding-top:24px;
		margin-bottom:24px;
		padding-left:120px;
	}
	
	.footer .leftCol .contactBlock .label{
		color:#8d8c8c;
		text-transform:uppercase;
		text-align:right;
		margin-left:-120px;
		float:left;
		width:100px;
	}
	
.footer .rightCol{
	width:47%;
	float:left;
	font-size:0.92em;
	text-align:left;
}

.footer .rightCol .lowerlogo img{
	width:415px;
}

.footer .copyright{
	color:#8d8c8c;
	font-size:0.8em;
}


	
	
	

/* ############################
			TEXT 
############################# */



.textBlock{
	clear:both;
	font-size:42px;
	line-height:1.3em;
	text-align:center;
	margin: 30px 100px;
}

.dotsAbove{
		background-image:url('../../images/dots.png');
		background-repeat:repeat-x;
		background-position: top left;
		padding-top:40px;
}

.dotsBelow{
		background-image:url('../../images/dots.png');
		background-repeat:repeat-x;
		background-position: bottom left;
		padding-bottom:40px;
}




.textBlock .portrait{
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	background-color:#dedede;
	float:left;
	width:260px;
	height:240px;
	float:left;
	margin-right:30px;
}
.textBlock .bio{
	float:left;
	width:calc(100% - 290px);
}


.textBlock h1{
	margin-top:0px;
	font-weight:300;
	font-size:2.0em;
	text-transform:uppercase;
	color:#C34500;
	color:#999;
}

.textBlock h2{
	font-weight:400;
	color:#C34500;
}


.ourTeam,
.services{
	list-style:none;
	text-align:left;
	font-size:0.6em;
	line-height:1.4em; 
	padding:0;
	margin:0; 
}
.ourTeam li::after,
.services li::after{
	content:'';
	display:block;
	clear:both;
}
.ourTeam li,
.services li
 {
	margin:0;
	padding:40px 0 40px 0;
}

.ourTeam li ul,
.services li ul{
	margin:0 0 0 32px;
	padding:0 0 12px 0;
}


.services li li{
 	list-style:disc;
	margin:0 0px 0 10px;
	padding:0 0 0 0px;
	font-size:0.9em;
}

.ourTeam li li,
.services.portfolio li li{
 	list-style:disc;
	margin:0 32px 0 0px;
	padding:0 0 0 0px;
	width:35%;
	float:left;
	font-size:0.9em;
}

.portfolioPiece h3{
	text-transform:uppercase; color:#999; font-weight:300;
}
.portfolioPiece h3 span{
	color:#dedede;
}



.services .portrait{
	position:relative;
	overflow:hidden;
	text-indent:-985px;
}
.services .portrait::after{
	content:'';
	position:absolute;
	top:0px;
	left:0px;
	width:calc(100%);
	height:100%;
	background-image:url('../../images/grain.png');
	z-index:40;
	opacity:0.8;
	transition:500ms;
}
.services .portrait:hover::after{
	opacity:0;
}


.ourTeam h2, .ourTeam h3, .services h2, .services h3{
	margin:0;
}
.ourTeam h2{
	color:#C34500;
	font-size:1.4em;
	font-weight:600;
}
.ourTeam h2 span{
	color:#999;
	font-weight:400;
	font-size:0.6em;
}
.ourTeam h3{
	font-size:0.9em;
	margin-top:-6px; 
	margin-bottom:8px;
	font-weight:600;
	color:#777;
}
.ourTeam a.viewBio,
a.viewDetails
{
	font-size:0.8em;
	font-weight:bold;
	display:inline-block;
	margin-left:8px;
	color:#777;
	text-decoration:none;
	transition:500ms;
}
.ourTeam a.viewBio:hover,
a.viewDetails:hover{
	color:#C34500;
}
.ourTeam a.viewBio i.fa,
a.viewDetails i.fa{
	font-size:0.8em;
}

.services h2{
	font-weight:400;
	color:#C34500;
}





	
.fullBio{
	font-size:20px;
	line-height:1.2em;
	text-align:left;
	margin:60px 40px 0px 40px;
	min-height:300px;
}
.fullBio h1{
	font-size:1.1em;
	padding-top:6px;
	margin-top:38px;
	text-transform:uppercase;
	color:#aeaeae;
	border-top: solid 1px #ccc;
	font-weight:700; 
}

.fullBio h2{
	font-size:1.4em;
	color:#C34500;
}
.fullBio h3{
	font-size:1.4em;
}

.fullBio h4{
	font-size:1.0em;
	color:#C34500;
}
.fullBio h5{
	font-size:1.0em;
}

.fullBio .ourTeam{
	font-size:1.2em;
	margin-bottom:-12px;
}
	.fullBio .ourTeam h3{
		font-size:1.0em;
	}
	.fullBio .ourTeam::after{
		display:block;
		content:'';
		clear:both;
		height:1px;
	}
	.fullBio .ourTeam .portrait{
		float:left;
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center center;
		width: 120px;
		height:120px;
		margin-right:16px;
	}
	

.marketList{
	list-style:none;
	margin:-38px auto 18px auto;
	padding:0;
	padding-bottom:40px;
	width:90%;
}
	.marketList li{
		display:inline-block;
		margin:3px 0px 3px -1px;
		padding:4px 18px;
		line-height:24px;
		font-size:32px;
		border-right:solid 1px #dedede;
		border-left:solid 1px #dedede;
	}
		.marketList li a{
			text-decoration:none;
			color:#999;
			
		}
		.marketList li a.select{
			color:#C34500;
		}
	

.projectDetails h1{
	font-size:1.1em;
	padding-top:6px;
	margin-top:38px;
	text-transform:uppercase;
	color:#aeaeae;
	border-top: solid 1px #ccc;
	font-weight:700; 
}
.projectDetails h2{
	font-size:1.1em;
	color:#C34500;
	margin-bottom:8px;
}
.projectDetails h3{
	font-size:1.1em;
	margin-bottom:8px;
}
.projectDetails h4{
	font-size:1.0em;
	color:#C34500;
	margin-bottom:8px;
}
.projectDetails h5{
	font-size:1.0em;
	margin-bottom:8px;
}	
	
.projectDetails p,
.projectDetails ul{
	margin-top:0px;
}
	
.projectDetails{
	text-align:left;
}	
.projectDetails h2.projectTitle{
	font-weight:300;
	font-size:1.8em;
	color:#C34500;
	margin-bottom:0px;
	margin-top:0px;
	text-transform:uppercase;
}
.projectDetails h3.projectTitle{
	margin-top:6px;
	font-size:1.3em;
	font-weight:300;
	color:#999;
	margin-bottom:24px;
	text-transform:uppercase;
}
	
.projectDetails .pDCol1{
	float:left; width:40%; margin-right:30px;
}
.projectDetails .pDCol2{
	float:left; width:calc(60% - 30px); font-size:0.6em; line-height:1.4em; 
}	
	
	
 .projectPhotos{
 	clear:both;
	width:calc(100% + 10px);
	margin-right:-10px;
	margin-top:-10px;
 }
 .projectPhoto{
 	float:left;
	width: calc(33.3% - 10px);
	padding-bottom: calc(33.3% - 20px);
	margin-right:10px;
	margin-top:10px;
	background-size:cover;
	background-position:center;
	transition:500ms;
	opacity:0.9;
 }
  .projectPhoto:hover{
  	opacity:1;
  }
 
  .projectPhotos::after{
  	content:' ';
	display:block;
	clear:both;
  }




.contactMap{
	float:left; width:50%;
}


.contactText{
	float:left; width:45%; margin-left:5%; font-size:0.8em; line-height:1.2em; text-align:left;
}

	
	
	
	
/* ############################
			BOXES 
############################# */



.projectBoxes::after{
	content:'';
	display:block;
	clear:both;
	height:20px;
}
.projectBoxes .column{
	width:calc(50% - 0px);
	margin:0px;
	float:left;
}

.featureBox{
	background-color:#ececec;
	margin:10px;
	position:relative;
	float:left;
	width:calc(100% - 20px);
	padding-bottom: calc(72% + 00px);
	transition:500ms;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	overflow:hidden;
}

	.featureBox.lils{	
		width:calc(50% - 20px);
		padding-bottom: calc(36% + 20px);
	}

	.featureBox a{
		text-decoration:none;
		color:inherit;
		display:block;
		width:100%;
		height:100%;
		position:absolute;
		z-index:9000; 
	}

	.featureBox h2{
		font-weight:normal;
		text-transform:uppercase;
		font-size:42px;
		text-align:right;
		position:absolute;
		top:8px;
		right:16px;
		margin:0px;
		transition:500ms;
		z-index:60;
		color:#fff;
	}

	.featureBox:hover{
		background-color:#C34500;
	}
	.featureBox:hover h2{
		color:#fff;
	}
	
	.featureBox img{
		position:absolute;
		z-index:20;
		top:0px;
		left:-8px;
		width:calc(100% + 8px);
		height:auto;
		transition:500ms;
	}
	
	.featureBox.lils img{
		width:calc(100% + 6px);
		left:-6px;
	}


.featureBox::after{
	content:'';
	position:absolute;
	top:0px;
	left:-8px;
	width:calc(100% + 8px);
	height:100%;
	background-image:url('../../images/grain.png');
	z-index:40;
	opacity:1;
	transition:500ms;
}
.featureBox.lils::after{
	width:calc(100% + 6px);
	left:-6px;
}

	
	.featureBox:hover img,
	.featureBox:hover::after{
		left:0px;
	}

.featureBox img{
    filter: grayscale(100%); /* Current draft standard */
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: url(resources.svg#desaturate); /* Gecko */
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
}
.featureBox:hover img{
	filter: none; /* Current draft standard */
    -webkit-filter:none; /* New WebKit */
    -moz-filter: none;
    -ms-filter: none; 
    -o-filter: none); /* Not yet supported in Gecko, Opera or IE */ 
    filter: none; /* Gecko */
    filter: none; /* IE */
    -webkit-filter:none; /* Old WebKit */

}


	
/* ############################
			MISC PAGE 
############################# */


.miscPage h1{
	margin-top:0px;
	font-weight:300;
	font-size:2.0em;
	text-transform:uppercase;
	color:#C34500;
	color:#999;
}

.miscPage h2{
	font-weight:400;
	color:#C34500;
}

.miscPage h3{
	font-size:1em;
	color:inherit;
	font-weight:inherit;
}

.miscPage p, .miscPage ul {
	font-size: 0.7em;
    line-height: 1.4em;
	text-align:left;
}