body {
	padding: 0px;
	margin: 0px;
	font-family: "Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	background-color: #F5F5F5;

	font-size: 17px;

}



a {
	color: #0088FF;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	}




div.container {
	position: relative;
	//top: 85px;
	margin: 24px;
	//padding-bottom: 2000px;
	//background-color: red;
	color: #1f1f1f;
	line-height: 32px;

	//max-width: 780px;




}

div.max_width_container {
	max-width: 840px;
	margin: auto;
}

div.flex_container {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-left: -24px;
	margin-bottom: 48px;

}

div.fullwidth_text {
	max-width: 840px;
	margin: 0 auto;
	margin-bottom: 48px;
}


div.top_bar {
	position: -webkit-sticky;
	position: sticky;
	//width: 100%;
	top: 0px;

	background-color: #EFEFEF;
	z-index: 100;
	padding: 24px 24px 18px 24px;
}


a.a_top_bar {
	display: inline-block;
	padding-left: 12px;
	padding-right: 12px;
	margin-right: 12px;
	padding-top: 6px;
	padding-bottom: 6px;
	color: #000000;

	border-bottom: 7px solid #EFEFEF;
}

a.a_top_bar:hover {
	text-decoration: none;
	border-bottom: 7px solid #D7371f;
}

.current {
	border-bottom: 7px solid #D7371f !important;
}


div.hero {
	position: relative;
	width: 100%;
	height: 400px;
	background-color: #CCCCCC;
	overflow: hidden;
	background-image: url('images/Chris_San_Francisco_2.jpg');
	background-size: cover;
	background-position: 50% 30%;


}

div.hero_scrim {
	position: absolute;
	width: 100%;
	height: 400px;
	background: linear-gradient(rgba(255,255,255,0) 40%, rgba(0,0,0,.8));

}


div.hero_text {
	position: absolute;
	width: 100%;
	text-align: center;
	color: #FFFFFF;
	font-weight: 500;
	font-size: 32px;
	text-shadow: 0px 2px 4px #222222;
	letter-spacing: 1px;

	padding-top: 24px;
	padding-bottom: 0px;

	//margin-top: 240px;
	// margin-left: 24px;
	// margin-right: 24px;

	//background-color: orange;
	bottom: 0px;

}

div.hero_subtext {
	margin-top: 15px;
	font-size: 24px;
	font-weight: 300;
	text-shadow: 0px 2px 1px #222222;
	//line-height: 24px;
	letter-spacing: 0px;

}



div.portfolio_image {
	flex: 1;
	position: relative;
	min-width: 272px;
	height: 40%;
	margin-left: 24px;
	margin-bottom: 24px;
	overflow: hidden;
	//background-size: cover;
	//background-position: 50% 30%;

	//text-align: center;

	// width: 100%;
	// max-width: 350px;
	// height: auto;
	// overflow: hidden;
	// //background-color: black;
	// margin-bottom: 24px;
	// margin-left: 24px;
}


div.portfolio_image:hover .project_image, 
div.portfolio_image a:focus .project_image  {
	filter:brightness(.5);
	cursor: hand;
}
div.portfolio_image:hover .project_name, 
div.portfolio_image a:focus .project_name  {
	visibility: visible;
	cursor: hand;
}



div.project_image {
	position: relative;
	width: 100%;
	height: 320px;
	background-size: cover;
	background-position: 50% 30%;
	//z-index: 0;
}

div.project_name {
	position: absolute;
	display: inline-block;
	visibility: hidden;
	width: 270px;
	//width: 100%;
	// margin-left: 18px;
	// margin-right: 18px;
	//box-sizing: border-box;
	color: #FFFFFF;
	z-index: 10;
	//margin-top: -140px;
	//filter:brightness(1);
	//margin-left: 18px;
	//padding-right: 18px;
	//margin-top: 204px;

	//max-width: 236px;
	font-size: 32px;
	line-height: 36px;
	//z-index:90;

	// top: 50%;
	// //left: 50%;
	// transform: translate(0%, -50%);


	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;


	// To make text left aligned:
	// remove left: 50%;
	// Set translate to (0%, -50%);
	// remove width: 270px;
	// set margin-left and margin-right to 18px
	// remove text-align: center;


}





img.portfolio_image {
	// width: 100%;
	background-size: cover;
}

div.portfolio_section_heading {
	// Comment out to remove sticky
	// position: -webkit-sticky;
	// position: sticky;
	// background-color: #F5F5F5;
	// z-index: 90;
	// top: 81px;
	//
	font-size: 21px;
	line-height: 30px;
	color: #444444;
	font-weight: 800;
	padding-bottom: 32px;

}


.horizontal_rule_red {
	margin-top: 12px;
	height: 7px;
	background-color: #D7371F;
	width: 70px;
}



footer {
	padding: 48px 24 48px 24px;
	text-align: center;
	background-color: #EFEFEF;

	font-size: 12px;
	color: #1F1F1F;
}




@media screen and (min-width: 1528px) {

div.container {
	max-width: 1480px;
	margin: 0 auto;
	margin-top: 24px;
}


}











div.section_header {
	font-size: 14px;
	font-weight: 800;
}

p {
	margin-top: 6px;
}


div.hero_subtext_infopage {
	font-size: 18px;
}


div.flex {
	display: flex;
}


// div.infopage_fullwidth {
// 	max-width: 960px;
// }

div.document_navigation_column {
	//display: inline-block;
	//background-color: orange;
	margin-right: 24px;

}

div.document_navigation {
	position: -webkit-sticky;
	position: sticky;
	top: 100px;
}

.document_navigation_a {
	color: #0088CC;
	text-decoration: none;
	display: block;
	margin-bottom: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 20px;
	padding-right: 10px;
	width: 110px;
	font-size: 14px;
	line-height: 20px;
}

.document_navigation_a:hover {
	// background-color: #ffffff;
	// color: #0088CC;
	text-decoration: none;

	background-color: #0088CC;
	color: #FFFFFF;
}

.highlight {
	background-color: #0088CC;
	color: #FFFFFF;
}

.highlight:hover {
	background-color: #0088CC;
	color: #FFFFFF;
}


div.image {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-bottom: 17px;
}

img.infopage {
	//position: absolute;
	top: 0px;
	width: 100%;
	left: 0px;
	right: 0px;
	bottom: 0px;
}

div.alert {
	background-color: #E6E6E6;
	padding-left: 12px;
	padding-top: 12px;
	padding-bottom: 5px;
	padding-right: 12px;
	font-size: 17px;
	margin-bottom: 18px;
	border-left: 6px solid #D9D9D9;
	//line-height: 21px;
}




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

div.top_bar {
	position: relative;
}

div.infopage_max_width_container {
	height: 44px;
	overflow: hidden;
}

a.a_top_bar {
	display: block;
	text-align: center;
	padding-left: 12px;
	padding-right: 12px;
	margin-right: 0px;
	padding-top: 12px;
	padding-bottom: 12px;
	//color: #000000;
	border: none;


}

a.a_top_bar:hover {
	text-decoration: none;
	//border-bottom: 7px solid #D7371f;
	border: none;
}

.current {
	border-bottom: none;
	font-weight: 600;
	color: #D7371f !important;

}


div.hero_text {
	margin-top: 180px;
}

}



@media screen and (max-width: 767px) {
	div.document_navigation_column {
		display: none;
	}
}