@charset "utf-8";
/*! CSS Document */
/*!========= NORMALIZE STYLES(do not edit) ============= */ /*!!normalize.css v1.0.1 | MIT License | git.io/normalize */
*{margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}body{margin:0; padding:0;}a:focus{outline:thin dotted}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}legend{border:0;padding:0;white-space:normal}button,input,select,textarea{margin:0}button,input{line-height:normal}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}img,img a{border:0}

html {
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}
body {
    font-size:100%;
    font-family: 'Open Sans', sans-serif;
    color:#000;
	background-color: #161b1f;
}

h1 {
	font-size: 38px;
    line-height: 150%;
    text-align: left;
    font-weight: normal;
}

.clear {
	clear:both;
}
#wrapper {
	background-color:#FFF;
	color:#333;
}


#logo {
	float:left;
	padding:30px 0 30px 30px;
}

#utilityNav {
	float:right;
	padding:58px 55px 0 0;
}
#utilityNav .linkedIcon {
	position:relative;
	top:9px;
}
nav {
	background-color:#222;
	padding:20px 0 20px 0;
	text-align:center;
}

nav ul {
	display:block;
}

nav ul li {
	display:inline-block;
}

nav ul li a {
	text-decoration:none;
	color:#FFF;
	font-size:20px;
	font-weight:400;
	display:block;
	padding:0 50px 0 50px;
}

nav ul li a:hover, .current {
	color:#cd3b3b;
}

a {
	color:#b01818;
}
a:hover {
	text-decoration:none;
}
h1, h2 {
	font-size:38px;
	line-height:48px;
	margin:0 0 20px 0;
}

p {
	font-size:16px;
	line-height:24px;
	margin:0 0 15px 0;
}

.clear {
	clear:both;
}

/*====BANNER====*/

#banner {
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.28);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.28);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.28);
	position:relative;
	background-image:url(../img/banner.png);
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	height:250px;
}
.bannerTxt {
	text-align:center;
	color:#FFF;
}
.bannerTxt h1 {
	font-size:24px;
	line-height:26px;
	text-align:center;
	font-weight:500;
	padding:80px 0 4px 0;
	margin:0;
}
.bannerTxt h2 {
	font-size:36px;
	line-height:38px;
	font-weight:500;
	margin:0;
}

/*====CONTENT====*/

#ctas {
	box-sizing: border-box;
	padding:40px 50px 70px 50px;
	border-bottom:1px solid #E0E0E0;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.12);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.12);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.12);
}

#ctas h2 {
	padding:0 0 10px 0;	
}

#ctas h2, #contact h2 {
	font-size:38px;
	line-height:150%;
	text-align:left;
	font-weight:normal;
}


.ctaHeader {
	width:1024px;
	margin:0 auto;
	padding:0 0 60px 0;
}

.ctaBox {
	float:left;
	width:33%;
}

.ctaBox img {
	max-width:100%;
	display:block;
}

.ctaBox a {
	display:block;
	float:left;
	position:relative;
	z-index:0;
}

.ctaBox a:hover .gradient {
	opacity:0;
}
.gradient {
	position:absolute;
	left:0;
	top:0;
	z-index:10;
	opacity: 0.8;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
.hide {
	display:none;
	padding:30px;
}

.holdImg {
	text-align:center;
}

.hide img {
	width:100%;
	margin:20px auto 50px auto;
	display:block;
	-webkit-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.32);
	-moz-box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.32);
	box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.32);
}
.hide img.mobile {
	width:35%;
	display:inline-block;
	margin:0 5% 0 0;
}
.hide h2 {
	border-bottom:1px solid #ccc;
	font-weight:600;
}
.hide a {
	display:block;
	margin:20px 0 20px 0;
}
.hide p {
	padding:20px 30px 30px 30px;
}

.staceyimg {
	float: left;
    margin: 0 42px 0 0;
}

#content {

	padding:40px 0 40px 0;
	-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.12);
	-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.12);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.12);
}

.subWrapper {
	width:1024px;
	margin:0 auto;
}

/* =========== CONTACT ============= */

#contact {
	padding:30px 0 30px 0;
	width:1024px;
	margin:0 auto;
}

#contact h2 {
	padding:0 0 20px 0;
	text-align:center;
}


.contactLeft, .contactMid, .contactRight {
	box-sizing:border-box;
	float:left;
}

.contactLeft {
	width: 31%;
    padding: 30px 48px 30px 86px;
}
.contactMid {
	float: left;
    width: 35%;
}

.contactRight {
	border-right: none;
    width: 34%;
    float: right;
    padding: 30px 107px 30px 0;
}

.contactMid, .contactRight {
	padding:30px 0 30px 30px;
}

.contactMid a, .contactRight a{
	position:relative;
	top: -12px;
	display:inline-block;
	padding: 0 0 0 15px;
}
.contactLeft .phone {
	font-size:18px;
}

.contactRight {
	border-right:none;
}

.ctaText {
	background-color:#212121;
	color:#FFF;
	font-size:24px;
	line-height:120%;
	text-align:center;
	padding:15px 0 15px 0;
	font-weight:normal;
	display:block;
	position:absolute;
	bottom:0;
	z-index:5;
	width:100%;
}

.phoneIcon, .emailIcon, .linkedIcon {
	display:inline-block;
	width:32px;
	height:32px;
	background-size:32px 32px;
	background-repeat:no-repeat;
}

.phoneIcon {
	background-image:url(../img/smartphone.png);	
}

.emailIcon {
	background-image:url(../img/email.png);
}

.linkedIcon {
	background-image:url(../img/linkedIn.png);
}

.contactPhone {
	font-size:18px;
	position:relative;
	top:-8px;
	display:inline-block;
	padding:0 0 0 15px;
}

/* =========== SUBPAGES ============= */


.portfolioBox {
	display:block;
	float:left;
	width:24%;
	height:254px;
	transition: linear 0.23s;
	position:relative;
	margin:4px 4px 0px 0;
}

.portfolioBox:hover {
	opacity:0.75;
}

.portfolioBox .gradient {
	width:100%;
	height: 100%;
}

.portfolioBox .ctaText {
	padding:10px 0 10px 0;
	font-size: 16px;
}

.portfolioBox  img {
	width:100%;
}

.portImg.small {
	width:auto;
}

.portfolioHold {
	padding:30px 0 30px 0;
}

/*===FOOTER===*/

footer {
	background-color:#000;
	color:#FFF;
	padding:60px 50px 60px 50px;
	font-size:16px;
	text-align:center;
	border-top:6px solid #b01818;
}

footer a {
	color:#FFF;
	text-decoration:none;

}
footer a:hover {
	text-decoration:underline;
}

footer ul {
	list-style-type:none;
	line-height:28px;
	display:block;
	margin:0 0 20px 0;
}

footer ul li {
	display:inline;
}

#copyright {
	font-size:18px;
}

/*==== BLOG ====*/

#blog {
	padding:40px;
}

#blog p {
	font-size:24px;
	line-height:30px;
	margin:0 0 20px 0;	
}

#blog article {
	width:80%;
	float:left;
}
#blog aside {
	width:20%;
	float:left;
}

/*=================== MEDIA QUERIES ===============*/

@media screen and (min-width:1281px) and (max-width:6000px) {
	#wrapper {
		width:1280px;
		margin:0 auto;
	}
}

@media screen and (max-width:1280px) {
	#wrapper {
		width:100%;
	}
	.ctaHeader {
		width:100%;
		box-sizing:border-box;
		padding: 0 0 20px 0;
	}
	#contact {
		padding: 30px 50px 30px 50px;
		width: 100%;
		margin:0 auto;
		box-sizing:border-box;
	}
	.phoneIcon, .emailIcon, #contact .linkedIcon {
		display:none;
	}
	.subWrapper {
		width:100%;
		box-sizing:border-box;
		padding:0 5% 0 5%;
	}
	.portfolioBox {
		height:auto;
	}
}

@media screen and (max-width:940px) {
	nav ul li a {
		font-size:18px;
		padding:0 20px 0 20px;
	}
	.ctaText {
		font-size:18px;
	}
	.portfolioBox .ctaText {
		font-size:14px;
	}
}

@media screen and (max-width:840px) {
	#logo, #utilityNav {
		width:100%;
		float:none;
		display:inline-block;
		text-align:center;
	}
	#logo {
		padding:20px 0 0 0;
	}
	#utilityNav {
		padding:0 0 20px 0;
	}
	.portfolioBox {
		width:32%;
	}
	.hide h2, h1, h2 {
		font-size:28px;
		line-height:32px;
	}
}
@media screen and (max-width:767px) {
	
	.ctaBox {
		width:100%;
		float:none;
		clear:both;
		margin:0 0 15px 0;
		box-sizing:border-box;
		padding:0 5% 0 5%;
	}
	.ctaBox a {
		float:none;
		width:100%;
	}
	.ctaBox img {
		width: 100%;
	}
	nav ul li a {
		font-size: 16px;
	}
	.contactLeft, .contactMid, .contactRight {
		float:none;
		width:100%;
		padding:0 0 15px 0;
		text-align:center;
	}
	.contactPhone,.contactMid a, .contactRight a {
		position:static;
		padding:0;
	}
	#contact h2 {
		padding: 0 0 8px 0;
	}

}
@media screen and (max-width:600px) {
	#ctas h2, #contact h2 {
		font-size: 32px;
		line-height: 140%;
	}
	#ctas h2 {
		padding: 0 0 0px 0;
	}

}

@media screen and (max-width:500px){
	nav ul li a {
		font-size: 16px;
		padding: 0 9px 0 9px;
	}
	#utilityNav {
		font-size:16px;
	}
	.portfolioBox {
		width:48%;
	}
}

@media screen and (max-width:400px) {
	nav {
		padding:20px 0 8px 0;
	}
	nav ul li a {
		font-size: 16px;
		padding: 0 9px 9px 9px;
	}
	.bannerTxt h2 {
		font-size: 30px;
		line-height: 34px;
	}
	#ctas h2, #contact h2 {
		font-size: 26px;
	}
	p {
		font-size: 14px;
		line-height: 22px;
	}
	#copyright {
		font-size: 16px;
	}
	.linkedIcon {
		width: 28px;
		height: 28px;
		background-size: 28px;
	}
	.ctaBox {
		padding:0;
	}
	.portfolioBox {
		width:100%;
		float:none;
		margin:0 0 10px 0;
	}
	.staceyimg {
		float:none;
		margin:0 0 15px 0;
		max-width:100%;
		display:block;
	}
}