@import url("global.css");

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

	COLORS
	
------------------------------------------

DCI Blue: #062862
DCI Light Blue: #95cfe4
DCI Orange: #e76836
Body text: #686f75
Background color: #fefefe

*/




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

	TYPOGRAPHY
		
------------------------------------------
*/

.content p{
	margin-bottom: 1.875em;
}

.content h1{
	font-size: 2.8125em;
	margin-bottom: 0.4em;
}

.content blockquote{
	width: 100%;
	float: left;
	padding-top: 1.625em;
	padding-right: 2.25em;
	margin-bottom: 1.5em;
}

	blockquote:before{
		display: block;
		content: "";
		height: 2px;
		background: #e76836;
		position: relative;
		left: 0em;
		top: -1.3125em;
		width: 8.75em;
	}

	.content blockquote p{
		color: #e76836;
		font-size: 1.5em; 
		line-height: 1.5em;
		font-weight: 300;
		margin-bottom: .325em;
	}
	
		.content blockquote p:last-child{
			font-size: .9375em;
			font-weight: 500;
			-webkit-font-smoothing: antialiased;
		}
		
			.content blockquote p:last-child:before{
				font-family: "dci" !important;
				content: "\63";
				font-style: normal !important;
				font-weight: normal !important;
				font-variant: normal !important;
				text-transform: none !important;
				speak: none;
				line-height: 1;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				
				font-size: 1.375em;
				line-height: 1em;
				position: relative;
				top: .25em;
				margin-right: .875em;
			}
	
		.content blockquote p span{
			font-size: 0.625em; 
		}

/* Content */
.content ul{
	margin-bottom: 2em;
	list-style: none;
}

	.content ul li{
		margin-bottom: 1.25em;
		padding-left: 2.2em;
		display: block;
		text-indent: -.625em;
		box-sizing: border-box;
		vertical-align: top;
	}
	
		.content ul li:before{
			font-family: "dci" !important;
			content: "\64";
			font-style: normal !important;
			font-weight: normal !important;
			font-variant: normal !important;
			text-transform: none !important;
			speak: none;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			position: relative;
			left: -2.2em;
			font-size: .625em;
			color: #e76836;
		}

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

	LAYOUT
	
------------------------------------------
*/

/* Graphic */
#graphic{
	width: 100%;
	height: 15.625em;
	background-size: auto 100%;
	background-position: center top;
	background-attachment: fixed;
	/* margin-bottom: 4.125em; */
}
	
	#graphic .overlay{
		width: 100%;
		height: 100%;
		background: rgba(6,40,98,0.275);
		position: static;
	}
	
	.page-id-65 #graphic .overlay{ /* up contrast for contact page image */
		background: rgba(6,40,98,0.4);
	}
	
	#graphic .overlay .text,
	#graphic .overlay .text-mobile{
		text-align: center;
		position: relative;
		top: 50%;
		transform: translate(0, -50%);
		-webkit-transform: translate(0, -50%);
		-moz-transform: translate(0, -50%);
		-ms-transform: translate(0, -50%);
	}
	
		#graphic .overlay .text-mobile{
			display: none;
		}
	
		#graphic .overlay .text h1,
		#graphic .overlay .text-mobile h1{
			color: #fff;
			font-size: 3.8125em;
			font-weight: 300;
			text-shadow: 0px 0px 27px rgba(3, 21, 52, 1);
		}

/* Primary Container */
#container{
	width: 100%;
	padding: 0 3.75em;
	padding: 0 4.63320463320463%; /* 60 / 1295 */
	padding-bottom: 3%;
	padding-top: 2.40540540540541%; /* 70 / 1295 */
	position: relative;
	box-sizing: border-box;
	z-index: 10;
	background: transparent url('../img/grid_top_right.png') no-repeat right top;
	background-size: 525px 522px;
}

	/* Bottom Divider Line */
	#container.divider:before{
		display: block;
	    content: "";
	    height: 2px;
	    background: #e76836;
	    position: absolute;
	    margin-right: 0;
	    right: 4.63320463320463%;
	    bottom: -1.5em;
	    width: calc(90.7335907335907% - 5em);
	    z-index: 9999;
	}
	
	/* Bottom Divider + 
	#page-cta:before{
		display: block;
		width: 3.875%;
		height: 50px;
	    content: '';
	    background: url('../img/footer_plus.png') no-repeat;
	    background-size: 100% auto;
	    position: absolute;
	    left: 0;
	    top: 0%;
	    margin-top: -1.55em;
	    z-index: 9999;
	}
	*/

/* Main Content */
.main{
	width: 63.8297872340426%;
	float: left;
	min-height:500px;
}

.main2{
	width: 100%;
	float: left;
}
	.main.full{
		width: 63.8297872340426%;
		margin: 0 auto;
		float: none;
	}

/* Sidebar */
.sidebar{
	width: 27.7104247104247%;
	float: right;
}

/* Sub Navigation */
.subnav{
	width: 27.7104247104247%;
	float: right;
	background: #c1699a;
	color:#fff;
}
.subnav p { color:#fff;}
	.subnav h3{
		width: 93.75%;
		padding: .75em 1.5em .5em;
		line-height: 1em;
		box-sizing: border-box;
		background: #72194a;
		color: #fff;
		text-transform: uppercase;
		position: relative;
		left: -2.4125em;
		top: 0.869565217391304em;
	}
	
		.subnav h3 span{
			font-size: .825em;
			display: block;
			margin-top: 0em;
			margin-right: 1.375em;
			float: left;
		}
.subnav h6 { color:#fff; font-weight:600;}	
	.subnav ul{
		padding-top: 1.625em;
		padding-bottom: 0.9375em;
	}
	
		.subnav ul li{
			padding: 0 2.625em;
			margin-bottom: 1.3125em;
			box-shadow: border-box;
		}
		
			.subnav ul li a{
				font-weight: 600;
				-webkit-font-smoothing: antialiased;
				color: #ffffff;
			}
			
				.subnav ul li.current_page_item a,
				.subnav ul li a:hover{
					color: #062862;
					/* font-size: 1.125em; */
				}
				
				
				
/* Mobile Sub Navigation */
.subnav-mobile{
	width: 100%;
	float: none;
	margin-bottom: 2.5em;
	background: #95cfe3;
	display: none;
}

	.subnav-mobile h3{
		width: 100%;
		padding: .75em 1.5em .5em 1.825em;
		line-height: 1em;
		box-sizing: border-box;
		font-size: 1.4375em;
		background: #001f5b;
		color: #fff;
		text-transform: uppercase;
		letter-spacing: 1px;
		text-align: left;
		position: relative;
		margin-bottom: 0;
		cursor: pointer;
	}
	
		.subnav-mobile h3.mobile{
			display: none;
		}
	
		.subnav-mobile h3 span{
			font-size: .825em;
			display: inline-block;
			margin-top: 0em;
			margin-right: .9375em;
			position: relative;
			top: .0875em;
		}
	
	.subnav-mobile ul{
		padding-top: 1.625em;
		padding-bottom: 1.625em;
		margin-bottom: 0;
		display: none;
	}
	
		.content .subnav-mobile ul li,
		.content.service .subnav-mobile ul li{
			width: 100%;
			padding: 0 2.625em;
			margin-bottom: 1.3125em;
			margin-right: 0 !important;
			box-sizing: border-box;
			text-indent: 0;
		}
		
			.subnav-mobile ul li:before{
				display: none;
			}
			
			.subnav-mobile ul li:last-child{
				margin-bottom: 0;
			}
		
			.subnav-mobile ul li a{
				font-weight: 600;
				-webkit-font-smoothing: antialiased;
				color: #ffffff;
			}
			
				.subnav-mobile ul li.current_page_item a,
				.subnav-mobile ul li a:hover{
					color: #062862;
					/* font-size: 1.125em; */
				}
		
			

/* Project Thumbnail */
	.proj-thumb {
		background-color: #3d3b3c;
		width: 32%; /* 376 / 1175 */
		float: left;
		position: relative;
		margin-right: 2%; /* 23.5 / 1175 */
		margin-bottom: 2%; /* 23.5 / 1175 */
		-webkit-box-shadow: 0px 0px 29px 0px rgba(31,108,140,0);
		-moz-box-shadow: 0px 0px 29px 0px rgba(31,108,140,0);
		box-shadow: 0px 0px 29px 0px rgba(31,108,140,0);
		transition: all 0.5s;
	}
	
	.proj-thumb:hover {
		-webkit-box-shadow: 0px 0px 29px 0px rgba(31,108,140,0.5);
		-moz-box-shadow: 0px 0px 29px 0px rgba(31,108,140,0.5);
		box-shadow: 0px 0px 29px 0px rgba(31,108,140,0.5);
	}
	
	.proj-thumb:nth-child(3n) {
		margin-right: 0;
	}
	
		.proj-thumb img {
			opacity: 0.4;
			z-index: 5;
			position: relative;
		}

		.proj-thumb h3 {
			color: #fefefe;
			width: 80%;
			position: absolute;
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			-moz-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			z-index: 10;
			text-align: center;
		}
		
		.proj-thumb h3 a,
		.proj-thumb h3 a:hover {
			color: #fefefe;
			text-decoration: none;
		}


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

	SIDEBAR MODULES
	
------------------------------------------
*/

/* -----  Contact Module  ---- */

.mod-contact{
	width: 100%;
	padding: 2.75em 2.375em 2em 2.375em;
	box-sizing: border-box;
	background: #a61d68 url('../img/mod_contact_bg2.jpg') no-repeat;
	background-size: cover;
	margin: 1.25em 0;
}

	.mod-contact.top{ margin: 0 0 1.25em 0; }

	.mod-contact h3{
		line-height: 1em;
		margin-bottom: 0.956521739130435em;
		color: #fff;
		text-transform: uppercase;
	}
	
	.mod-contact .wpcf7 form.wpcf7-form p{
		margin-bottom: 0.625em;
		position: relative;
	}
	
		.mod-contact .wpcf7 form.wpcf7-form p span,
		.mod-contact .wpcf7 form.wpcf7-form p span input,
		.mod-contact .wpcf7 form.wpcf7-form p span textarea{
			width: 100%;
			font-family: "ff-din-web", Helvetica, Arial, sans-serif;
			font-weight: 400;
			font-size: 1em;
			line-height: 1em;
			border: none;
		}
			
			.mod-contact .wpcf7 form.wpcf7-form p span input{
				max-height: 3.375em;
			}
			
			.mod-contact .wpcf7 form.wpcf7-form p span input,
			.mod-contact .wpcf7 form.wpcf7-form p span textarea{
				padding: 7.25% 1.5em 6.5% 1.5em;
				box-sizing: border-box;
				background: #ac417c;
				resize: none;
				color: #fff;
			}
			
			@-moz-document url-prefix() {
				
				.mod-contact .wpcf7 form.wpcf7-form p span input{
					box-sizing: content-box;
					width: calc(100% - 3em);
				}
				
			}
			
			.mod-contact .wpcf7 form.wpcf7-form p span textarea{
				overflow: auto;
			}
			
			.mod-contact .wpcf7 form.wpcf7-form p span.dci-right-arrow{
				display: block;
				position: absolute;
				width: 2.5em;
				left: 11em;
				top: 2.25em;
				font-size: .625em;
				color: #e76836;
			}
			
				.mod-contact .wpcf7 form.wpcf7-form p input.wpcf7-submit{
					background: #fff;
					border: none;
					font-size: 1.0em;
					font-weight: 400;
					padding: 1.25em 3.875em 1.0875em 2.25em;
					cursor: pointer;
					color: #062862;
					font-family: "ff-din-web", Helvetica, Arial, sans-serif;
					line-height: 1.0em;
					display: block;
				}
				
					.mod-contact .wpcf7 form.wpcf7-form p input.wpcf7-submit:hover{
						color: #e76836;
					}
					
			
				::-webkit-input-placeholder { color: #fff; }
				:-moz-placeholder { color: #fff; }
				::-moz-placeholder { color: #fff; }
				:-ms-input-placeholder { color: #fff;}
			
		.mod-contact .wpcf7 form.wpcf7-form p img.ajax-loader{
			height: 0px;
		}
		
/* ---- End Contact Module ---- */

/* ---- Mobile Contact Module ---- */

	.locations{
		float: left;
		display: none;
	}
	
	.callouts{
		float: left;
		clear: both;
	}
	
		.callouts h4{
			margin-bottom: 1em;
		}
		
		.callouts em{
			font-style: italic;
		}
	
	.mod-contact.mobile{
		max-width: 45%;
		margin-top: .5em;
		float: left;
		display: none;
	}
	
	div.wpcf7-mail-sent-ok{
		color: #fff;
		font-family: "ff-din-web", Helvetica, Arial, sans-serif;
	}
	
/* ---- Locations Module ---- */

.mod-locations{
	background: #95cfe3;
	box-sizing: border-box;
	padding: 2em 2.625em 2.5em 2.625em;
	margin-bottom: 1.25em;
}

	.mod-locations h3{
		text-transform: uppercase;
		margin-bottom: .9375em;
	}

	.mod-locations h4{
		margin-top: 1.5em;
		line-height: 1.5em;
		margin-bottom: .875em;
	}
	
		.mod-locations h4:first-of-type{
			margin-top: 0;
		}
	
	.mod-locations p{
		color: #fff;
		line-height: 1.375em;
	}


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

	SEARCH PAGE
	
------------------------------------------
*/

.search{
	margin-bottom: 1em;
}

	.search ul li{
		padding-left: 0;
		text-indent: 0;
		margin-bottom: 2.5em;
		line-height: 1.5em;
	}
	
		.search ul li:before{
			display: none;
		}
		
		.search ul li h3{
			margin-bottom: .25em;
		}
		
			.search ul li h3 a{
				color: #062862;
			}
			
				.search ul li h3 a span{
					font-weight: 600;
				}
			
				.search ul li h3 a:hover{
					color: #e76836;
				}
	
	
/*
------------------------------------------

	PAGINATION
	
------------------------------------------
*/

.wp-pagenavi{
	font-family: "ff-din-web", Helvetica, Arial, sans-serif;
	color: #062862;
	margin-top: 3em;
}

	.wp-pagenavi span.pages{
		border: none;
		margin: 0 15px 0 0;
		padding: .25em 15px .125em 0;
		border-right: 1px solid #062862;
		
	}
	
	.wp-pagenavi span.current{
		border: none;
		
	}
	
	.wp-pagenavi a.page{
		border: none;
		color: #95cfe4;
		font-weight: bold;
	}
	
		.wp-pagenavi a.page:hover{
			color: #062862;
		}
	
	.wp-pagenavi a.nextpostslink,
	.wp-pagenavi a.previouspostslink{
		border: none;
		color: #062862;
	}
	
	
	
	
	
	



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

	MEDIA QUERIES
	
------------------------------------------
*/

@media (min-width: 64em){ /* DESKTOP 1024px */ 
	
	#graphic {
		background-size: 100% auto;
	}
	
}


@media only screen 
and (max-width: 63.9375em){ /* MOBILE 1023px */
	
	/* -- Layout -- */
	
	#graphic{
		background-attachment: scroll;
		background-size: cover;
	}
	
	#container{
		padding-left: 2.8125em;
		padding-right: 2.8125em;
	}
	
		#main .main{
			width: 100%;
		}
		
		.subnav{
			display: none;
		}
		
		.subnav-mobile{
			display: block;
		}
		
	/* -- Sidebar -- */
	.sidebar{
		width: 100%;
		float: left;
		display: none;
	}
	
		.mod-contact{
			max-width: 20.3125em;
		}
		
	/* -- Mobile Contact -- */
	.locations{
		width: 45%;
		margin-left: 5%;
		float: left;
		display: block;
	}
	
	.callouts{
		margin-top: 1.5em;
		float: left;
		clear: both;
	}
	
	.mod-contact.mobile{
		max-width: 50%;
		margin-top: .25em;
		float: left;
		display: block;
	}
	
}


@media (max-width: 53.75em){ /* MOBILE 860px */ 
	
	#container.proj-listing {
		font-size: 0.75em;
	}
	
}


@media (max-width: 50em){ /* MOBILE 800px */ 
	
	.main{
		width: 100%;
	}
	
	.subnav, .sidebar {
		display: none;
	}
		
}


@media (max-width: 48em){ /* MOBILE 768px */ 
	
	#graphic .overlay .text h1 {
		font-size: 3em;
	}
	
	.proj-thumb {
		width: 48.93617021276596%; /* 575 / 1175 */
	}
	
	#container .proj-thumb:nth-child(3n) { margin-right: 0; }
	#container .proj-thumb:nth-child(odd) { margin-right: 2%; }
	#container  .proj-thumb:nth-child(even) { margin-right: 0; }
	
}

@media only screen
and (max-width: 47.9375em){ /* 767px */
	
	#container{
		background: transparent;
	}
	
	.content blockquote{
		width: 95%;
		float: none;
		padding-top: 0;
		padding-left: 5%;
		border-left: 2px solid #e76836;
	}		
	
		.content blockquote:before{
			display: none;
		}
		
		.content blockquote p{
			font-size: 1.125em;
		}
		
	/* -- Mobile Contact -- */
	.locations{
		width: 100%;
		margin-left: 0;
		margin-top: 1.5em;
	}
	
	.callouts{
		margin-top: 0;
		clear: both;
	}
	
	.mod-contact.mobile{
		max-width: 100%;
		margin-top: .25em;
		display: block;
	}
	
	
	
}


@media only screen
and (max-width: 40.625em){ /* 650px */
	
	
	/* ------- LAYOUT ------- */
	#container{
		padding:  2.25em 1.875em 3% 1.875em;
	}
		
		#graphic .overlay .text h1 {
			font-size: 2.5em;
		}
	
	
	/* ------- CONTENT ------- */
	.content h1{
		font-size: 2.25em;
		margin-bottom: 0.4em;
	}

}


@media only screen
and (max-width: 31.25em){ /* 500px */
	
	
	/* Mobile Subnav */
	.subnav-mobile.default h3{ display: none; }
	.subnav-mobile.default h3.mobile{ display: block; }
	
	
	/* Header Graphic */
	#graphic {
		height: 10em;
	}
	
		#graphic .overlay .text{
			display: none;
		}
		
		#graphic .overlay .text-mobile{
			display: block;
		}
		
			#graphic .overlay .text-mobile h1{
				font-size: 2em;	
			}
	
}


@media only screen
and (max-width: 28.125em){ /* 450px */
	
	.content h1{
		font-size: 1.625em;
	}
	
}


@media (max-width: 25em){ /* MOBILE 400px */ 
	
	#container {
		font-size: 1em;
	}
	
		.proj-thumb {
			width: 100%;
			float: none;
			margin-right: 0;
		}
		
		#container .proj-thumb:nth-child(odd) {
			margin-right: 0;	
		}
		
	.subnav-mobile h3{
		font-size: 1.25em;
	}	
	
	.mod-contact .wpcf7 form.wpcf7-form p span input, 
	.mod-contact .wpcf7 form.wpcf7-form p span textarea{
		font-size: .875em;
	}
	
}


@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) /* RETINA */{ 
  
	#container{
		background: transparent url('../img/grid_top_right%402x.png') no-repeat right top;
		background-size: 525px 522px;
	}
  
}