/* Main Site Styles
================================================== */

body {
/* 	background: #222 url(../images/Topographic-Map-Pattern-1.gif) left top repeat; */
	background: #222;
	color: #FFF;
	font-size: 100%;
	font-weight: normal;
	font-family: -apple-system, "Calibri", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

	.box {padding: 1em;}
	.box *:last-child {margin-bottom: 0;}
	
	img.fit-to-grid {width: 100%; float: left;}
	
	.textright {text-align: right;}
	.textcenter {text-align: center;}
	.textleft {text-align: left;}
	
    .clearfix:before,
    .clearfix:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .clearfix:after {
      clear: both; }
    .clearfix {
      zoom: 1; }
	
/* Typography + Links + Buttons
================================================== */	

h1, h2, h3, h4, h5, h6 {
	color: #f1f1f1;
	font-family: -apple-system, "Calibri", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	margin: 0 0 0.8em;
}

h1 {font-size: 2.6em; line-height: 1.2;}
h2 {font-size: 2.0em; line-height: 1.2;}
h3 {font-size: 1.6em; line-height: 1.2;}
h4 {font-size: 1.2em; line-height: 1.2;}
h5 {font-size: 1.2em; line-height: 1.2;}

p, ul, ol {
	font-size: 1.1em;
	line-height: 1.6em;
	margin: 0 0 1em;
	font-family: -apple-system, "Calibri", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

strong {font-weight: bold;}

a, a:visited {
	color: #f41f14;
	text-decoration: underline;
	outline: 0; 
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;		
}

a:hover, a:focus { color: #FFF; text-decoration: underline; cursor: pointer;}
h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h4 a, h5 a, h6 a {text-decoration: none; color: inherit;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {color: #FFF;}

.pure-button,
.main .page_item a {
	color: #f41f14;
	background: none;
	font-style: italic;
	padding: 0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;		
}

	.pure-button:hover,
	.page_item a:hover {
		color: #FFF;
	}

	
/* Header + Footer
================================================== */	

.hdr {
	background: #FFF;
	border-top: 5px solid #f41f14;
	border-bottom: 5px solid #f41f14;
	overflow: hidden;
	position: relative;
}

	.hdr h1,
	.ftr h1 {
		margin: 0;
		padding: 10px 20px 10px 10px;
		background-color: #FFF;
		display: inline-block;
		float: left;
		position: relative;
	}
	
		h1 img {
			height: 100px;
			width: auto;
			float: left;
		}
		
/*
		.hdr h1:after {
			font-size: 1.5em;
			top: 0;
			right: -70px;
			
			position: absolute;
			content: '';
			margin: 0;
			padding: 0;
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 140px 0 0 70px;
			border-color: transparent transparent transparent #FFF;	
		}
*/
	
	.ftr h1 {
		background: none;
	}

	.pure-menu {
		text-align: right;
		margin: 0;
	}
	
	.pure-menu.pure-menu-horizontal>ul {height: 2em;}

	.hdr .pure-menu {background: none;}
	.ftr .pure-menu {background: none;}
	
	.hdr .pure-menu a,
	.ftr .pure-menu a,
	.pure-form label {
		color: #111;
		font-size: 0.8em;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 0.3em;
	}
	
	.ftr .pure-menu a {color: #f1f1f1}
	
	.hdr .pure-menu a:hover,
	.ftr .pure-menu a:hover {
		background: none;
		text-decoration: none;
	}
	
	.hdr .pure-menu a:hover {color: #f41f14;}
	.ftr .pure-menu a:hover {color: #f41f14;}
	
	.hdr .current-menu-item a {color: #9e1e17;}
	.hdr .current a:hover {color: #FFF;}
	
.ftr,
.feature {
	background: #111;
}

	.ftr {padding: 0 0 1em;}
	
	.ftr .tomoro {
		font-size: 0.8em;
		text-align: right;
		margin: 0;
		padding: 1em;
	}

	.ftr .tomoro a {
		color: #666;
		text-decoration: none;
	}
	
.slicknav_menu {display:none;}

@media screen and (max-width: 960px) {
	#menu {display: none;}
	.slicknav_menu {display:block;}
}	

/* Home Page Styles
================================================== */	

.feature {}

	.feature p {width: 50%;}

.card {
	background-color: #0b0f17;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 5px;
	margin: 0 20px;
	padding: 20px;
	height: 7em;
	position: relative;
}

	.category-projects .card {margin-bottom: 2em;}

	.cards {padding-bottom: 1em;}
	.category .cards .card,
	.home .cards .card {height: 14em;}

	.card .card-title {
		position: absolute;
		top: 20px;
		left: 0;
	
		background: #f41f14;
		color: #FFF;
		display: block;
		padding: 0.5em 1em 0.4em;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 0.9em;
		font-weight: bold;
		line-height: 1.3em;
		width: 50%;
	}
	
	.card .card-title:hover {
		background: #FFF;
		color: #f41f14;
	}
	
	.card .pure-button {
		position: absolute;
		bottom: 1em;
		right: 1em;

		color: #FFF;
		text-align: right;
	}

.spacer {padding-top: 3em;}
	
.tertiary {
	padding-bottom: 3em;
}

	.tertiary figure {
		float: right;
		margin-left: 1em;
		text-align: center;
	}
	
	.tertiary figure img {
		border-radius: 5px;
		margin-bottom: 10px;
	}


/* Individual Page Styles
================================================== */

.wrapper {
	max-width: 1080px;
	margin: 0 auto;
}

.main {}

	.main header.box {padding: 2em 0;}	
	.main header.box h1 {margin: 0;}
	
	.main footer {text-align: right;}
	.main footer .pure-button {margin-left: 1em;}
	
	.main footer nav {padding-right: 2em;}
	.main footer .pure-menu {background: none;}
	.main footer .pure-menu a {padding: 0 0.5em;}
	.main footer .pure-menu a:hover {background: none;}

	.content {
		background: #efefef url(../images/Topographic-Map-Pattern-1-light.gif) left top repeat;
		color: #333;
		padding: 2em;
	}
	.content.nopad {padding: 0;}
	
	.content.content_complex {padding: 0;}
	.content_complex>div {padding: 2em;}
	
	.content h1, .content h2, .content h3, .content h4, .content h5 {
		color: #272e34;
		margin-top: 2em;
	}
	
	.content iframe {width: 100%; height: 300px;}
	
.billboard {
	background-size: cover;
	background-position: center center;
	position: relative;
	width: 100%;
	height: 600px;
}
	
	.billboard h1 {
		position: absolute;
		bottom: 0;

		background: rgba(0,0,0,0.8);
		display: block;
		margin: 0;
		padding: 0.5em 0;
		text-align: center;
		width: 100%;
	}
	
	.no_billboard {
		text-align: center;
		width: 100%;
		padding-top: 5em;
	}
	
.image_block {
	background: #FFF;
	text-align: center;
}

	.image_block img {float: left;}

	.image_block_padded {padding: 1em 0;}
	.image_block_padded img {float: none;}
	
.client_quote {
	text-align: center;
	padding: 2em 0;
	margin: 0 2em;
}	

	.client_quote:before,
	.client_quote:after {
		content: '';
		display: block;
		background: #FFF;
		height: 1px;
		width: 50%;
		margin: 0 25% 2em;
	}

	.client_quote:after {
		margin: 2em 25% 0;
	}
	
	.client_quote span {
		font-size: 1.8em;
		line-height: 1.5em;
		font-style: italic;
	}
	
	.client_quote p {
		font-style: normal;
		margin: 0;
		margin-top: 1em;
	}
	
.our_quote {}

	.our_quote figure {float: left; margin-right: 1em;}
	
	.our_quote span {
		font-size: 1.2em;
		line-height: 1.5em;
		font-style: italic;
	}
	
.nav-next {text-align: right;}	

.pure-form {}

		.pure-form br {display: none;}
		
		.pure-form p {margin: 0;}
	
		.pure-form label,
		.pure-form .pure-button {
			color: #222;
			padding: 1em 0 0 0;
			margin: 0;
			display: inline-block;
		}

		.pure-form p:first-of-type label {padding-top: 0;}
		
		.pure-form input,
		.pure-form textarea {
			color: #6E7A82;
			width: 100%;
			padding: 1em;
			font-size: 1em !important;
		}
		
		.pure-form .pure-button {
			background: #f41f14;
			color: #FFF;
			padding: 1em 2em;
			margin: 1em 0;
			display: inline-block;
			width: auto;
		}
		
		.pure-form .pure-button:hover,
		.pure-form .pure-button:focus {
			background-color: #9e1e17;
		}
		
		.pure-form input[type=text]:focus, .pure-form input[type=password]:focus, .pure-form input[type=email]:focus, .pure-form input[type=url]:focus, .pure-form input[type=date]:focus, .pure-form input[type=month]:focus, .pure-form input[type=time]:focus, .pure-form input[type=datetime]:focus, .pure-form input[type=datetime-local]:focus, .pure-form input[type=week]:focus, .pure-form input[type=number]:focus, .pure-form input[type=search]:focus, .pure-form input[type=tel]:focus, .pure-form input[type=color]:focus, .pure-form select:focus, .pure-form textarea:focus {
			border-color: #4A697D;

			-webkit-transition: all .2s ease-out;
			-moz-transition: all .2s ease-out;
			-ms-transition: all .2s ease-out;
			-o-transition: all .2s ease-out;
			transition: all .2s ease-out;	
		}
		
		.pure-form textarea {
			height: 100px;
		}		
		
		.pure-form .wpcf7-response-output {
			border: 0;
			padding: 1em;
			margin: 1em 0 0;
			background: #FFF;
		}
	

/* Media Queries
================================================== */

/* Retina/HiDPI */
@media 	(-webkit-min-device-pixel-ratio: 2),
		(min-resolution: 192dpi) { 
}


/* Smaller than 960 */
@media (max-width:959px) {
	.main .pure-u-1-6 {width: 10%;}
	.main .pure-u-2-3 {width: 80%;}
}

/* Tablets */
@media (max-width:766px) {
	.cards .pure-u-1-4 {width: 25%;}
	.card {margin: 0; border-radius: 0;}
	.card .card-title {width: 65%;}
	
	.main header.box {padding: 0 2em 1em;}
	.single-post .main.spacer {padding-top: 0;}	

	.main .pure-u-1-6 {width: 5%;}
	.main .pure-u-2-3 {width: 90%;}
	
	.hdr h1 {padding: 10px;}

		h1 img {
			height: 50px;
			width: auto;
		}	
}

/* Phones */
@media only screen and (max-width:480px) {
	h1 {font-size: 1.6em; line-height: 1.2;}
	h2 {font-size: 1.2em; line-height: 1.2;}
	h3 {font-size: 1.2em; line-height: 1.2;}

	p, ul, ol {font-size: 1.0em; line-height: 1.5em;}
		
	.hdr h1 {padding: 5px;}

		h1 img {
			height: 50px;
			width: auto;
		}	

	.ftr .pure-menu {display: none;}
	
	.spacer {padding-top: 1em;}	
	
	.feature p {width: 100%;}
	
	.cards .pure-u-1-4 {width: 50%;}
	.card {height: 5em;}
	.card .card-title {width: 65%;}
	.card .pure-button {display: none;}
	
	.cards {padding-bottom: 0;}
	
	.main .pure-u-1-6 {width: 100%;}
	.main .pure-u-2-3 {width: 100%;}

	.main header.box {padding: 1em;}	
	.content {padding: 1em;}
}