/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

* { margin: 0; padding: 0; }

	body {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		background-image: url(../images/concrete-bg.jpg);
	}
	
a { text-decoration: none; color: #F24043; }
a:hover { text-decoration: underline; }

h1 { margin-top: 1.125em; margin-bottom: 0.5em; }
.left-main h1 img { width: 33.68421052631579%; max-width: 100%; }
.right-main h1 img { width: 49.12280701754386%; max-width: 100%; }
.left-main h1.inner.services img { width: 41.57894736842105%; max-width: 41.57894736842105%; }
.left-main h1.inner.contact img { width: 49.12280701754386%; max-width: 49.12280701754386%; }
.left-main h1.inner.work img { width: 30.91190108191654%; max-width: 30.91190108191654%; }
.right-main h1.inner.contact img { width: 41.57894736842105%; width: 41.57894736842105%; }

.large-container {
	width: 100%;
	background: url(../images/large-container-bg.gif) repeat-y top center;
	overflow: hidden;
}

.top-bar {
	position: absolute;
	width: 100%;
	background-color: #333;
	height: 28px;
}

.serv-box {
	width: 50%;
	float: left;
}

ol, ul {
  margin-left: 1em;
  margin-bottom: 1em;
  margin-top: 1em;
  line-height: 1.5em;
  font-size: 0.8125em
}

ul li, ol li {
  padding-left: 0.1875em;
}


/*.twelvecol.top {
	height: 268px;
}*/

.logo-eh {
	width: 42.228%;
	margin-top: 40px;
	float: left;
}

.logo-eh img { width: 100%; max-width: 100%; }

.top-text {
	width: 100%;
	font-size: 1.5125em;
	color: #ff0000;
	line-height: 1.3125em;
	text-align: right;
	margin-top: 0em;
	float: left;
}

.top-text p { padding: 0; }

.slide-bg { width: 50%; position: relative; height: 31.125em; display: block; }

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

.slide-logo img { width: 5.9375em; height: 5.9375em; position: absolute; z-index: 100; top: -2.8em; left: 3em; }

.top-right {
	width: 50%;
	position: relative;
	float: right;
	top: 3.05em;
}

.top-right-bg { background-image: url(../images/top-right-bg.jpg); width: 100%; max-width: 100%; height: 31.125em; }

.right-header { width: 34.73684210526316%; }
.right-header img { width: 100%; max-width: 100%; margin-left: 1.75em; margin-top: 1.00em; }

.top-right-bg p { font-size: 1.125em; color: #fff; line-height: 1.5em; margin-left: 1.45em; margin-top: .5em; }

.right-main { margin-left: 3.125em; width: 100%; max-width: 100%; color: #837163; font-size: 0.8125em; }
.left-main { width: 100%; max-width: 100%; color: #837163; font-size: 0.8125em; }
.left-main p, .right-main p { line-height: 1.5em; padding-top: 1em; }

ol, ul { margin: 0; padding: 0; }
ul li, ol li { margin: 0; padding: 0; }

.footer-top-bg {
	width: 100%;
	max-width: 100%;
	background-image: url(../images/footer-top-bg.jpg);
	height: 54px;
	margin-top: 20px;
}

.footer-bg {
	background-color: #333;
}

.footer-links {
	float: left;
	margin-left: 50px;
	font-size: 0.625em;
	color: #999;
	font-weight: bold;
	margin-top: 29px;
}

.footer-links a { color: #FFFFFF; font-weight: bold; font-size: 12px; }
.footer-links p { line-height: 1.8em; }

.bottom-logo-eh img {
	width: 43.7719298245614%;
	margin-top: 10px;
}

.copy { float: right; text-align: right; }
.copy p { font-size: 0.625em; color: #666666; line-height: 0.875em; font-weight: bold; margin-top: 150px; margin-bottom: 10px; }

.category-buttons {
	list-style: none;
	width: 100%;
}

.category-buttons a {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 50px;
	background-position: 0 0;
	color: #fff;
	font-size: 1.3125em;
	font-weight: bold;
	z-index: 100;
	background-color: #72675A;
	margin: 12px 0 12px 36px;
	padding-left: 0;
}

.category-buttons a:hover { background-color: #595146; }

.category-buttons li {
	display: block;
	width: 57.01754385964912%;
	list-style: none;
	margin-left: 1.45em;
	margin-top: 1.2em;
	padding-left: 0;
}

.category-buttons li span { position: relative; width: 100%; display: block; }
.category-buttons li span img { width: 22.25609756097561%; max-width: 22.25609756097561%; left: -36px; top: -12px; position: absolute; z-index: 101; }

.category-buttons li span.text { padding-top: 0.5em; margin-left: 3.125em; }

.category-buttons li:first-child { margin-top: 1.45em; }

.twelvecol.inner img { width: 100%; max-width: 100%; margin-top: 3.05em; }

/*---- NAV Classes ----*/

.nav-bg { width: 49.73684210526316%; float: right; } /* 567px / 1140px */

ul.nav { display: block; width: 100%; margin-left: 0; margin-top: 0; }
	
/* 142px / 567px */
.nav a {
	display: block;
	width: 100%;
	height: 16.75em;
	position: relative;
	margin: 0;
}

.nav a:hover, .nav a.current { background-color: #ccc; opacity:0.9; filter:alpha(opacity=90); /* For IE8 and earlier */ }

.nav li {
	float: left;
	vertical-align: top;
	margin-left: 0px;
	width: 25%;
	list-style: none;
	padding-left: 0;
}

.nav li:first-child { margin-left: 0; }

.nav a span { position: absolute; bottom: 14px; right: 10%; font-size: 1.5em; font-weight: bold; color: #fff; text-decoration: none; } /* font-size: 24px / 16px = 1.5em */

.nav a.home { background-color: #F45959; opacity:0.8; filter:alpha(opacity=80); }
.nav a.home:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ }
.nav a.home.current { background-color: #ccc; }

.nav a.services { background-color: #F22C2F; opacity:0.8; filter:alpha(opacity=80); }
.nav a.services:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ }
.nav a.services.current { background-color: #ccc; }

.nav a.work { background-color: #DA0E13; opacity:0.8; filter:alpha(opacity=80); }
.nav a.work:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ }
.nav a.work.current { background-color: #ccc; }

.nav a.contact { background-color: #9A0A0D; opacity:0.8; filter:alpha(opacity=80); }
.nav a.contact:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ }
.nav a.contact.current { background-color: #ccc; }


/* ============================= */
/* !  Layout for 1024 Desktop    */
/* ============================= */

@media only screen and (max-width: 1024px) {
	
	.category-buttons a { height: 41px; }
	
	.copy { font-size: 1.1em; }
	.copy p { line-height: 1.4em; }
	
	.footer-links a { font-size: 12px; }
	.footer-links p { font-size: 10px; }
	
	.left-main p, .right-main p { font-size: 1.2em; line-height: 1.5em; }
	
	}
	
@media handheld, only screen and (max-width: 768px) {
	.category-buttons a { height: 25px; }
	.right-main { margin-left: 0; }
	
	
}

/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {

	body {
		
	}
	
	.photogallery .photos a { pointer-events: none; cursor: default; }
	.photogallery .photos a img { display: block; }
	
	ul { margin-left: 2em; margin-top: 2em; margin-bottom: 2em; }
	
	ul.category-buttons { margin-left: 0; margin-top: 0; margin-bottom: 0; }
	
	.twelvecol.inner { display: none; }
	
	h1 { margin-bottom: 0.5em; clear: both; }
	
	.footer-top-bg { display: none; }
	.footer-links p { display: none; }
	.footer-links { margin-left: 2.9em; }
	.footer-bg { margin-top: 20px; text-align: center; }
	
	.copy { text-align: center; width: 100%; }
	.copy p { margin-top: 30px; }
	
	.links-container { margin: 0 auto; width: 100%; text-align: center; }
	
	.right-main { margin-left: 0; }
	
	.category-buttons li { text-align: center; margin: 0 auto; }
	.category-buttons li span img { display: none; }
	.category-buttons li span.text { margin-left: 0; padding-top: 8px; }
	.category-buttons a { height: 3.125em; text-align: center; margin: 0; }
	.category-buttons li { margin-top: 2em; }
	.top-right-bg { height: 39.125em; }
	
	.slide-bg { display: none; }
	.slide-bg img { display: none; }
	
	.top-right { width: 100%; }
	
	.nav-bg {
		display: block;
		float: none;
		width: 100%;
		position: relative;
		top: 0;
	}
	
	.nav a span { right: auto; text-align: center; width: 100%; }
	
	.nav li:first-child { margin-left: -1px; }
	
	.logo-eh { float: none; text-align: center; width: 100%; margin: 1.25em 0 1.30em; }
	
	.top-bar { display: none; }
	
	/* .twelvecol.top { height: 238px; } */
	
	.top-text { text-align: center; }
	
}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}