@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Lato);
html{overflow-y:scroll;}
body {margin:0;font-family: 'Lato', sans-serif;color:#fff;background:#2f3d2e;}

/* ===== TOP NAV ================================================================ */
#nav-container {height:60px;width:100%;background:#6a8139;text-align:center;border-bottom:12px solid #2f3d2e;}
#nav-inner {/*background:blue;*/width:92%;max-width:1126px;margin:0 auto;height:60px;overflow:hidden;}
#header-nav {/*background:orange;*/float:right;text-align:right;width:100%;height:60px;}
.mainNav {/*background:pink;*/font-size:22px;list-style-type: none;padding:0;margin-top:15px;}
.mainNav li {display:inline;padding:0 2%;border-right:1px solid #fff;}
.mainNav li:last-child {padding-right:0;border-right:0;}
.mainNav li a, .mainNav li a:visited {color:#fff;text-decoration:none;}
.mainNav li a:hover, .mainNav li a:active {color:#2f3d2e;}
body#home a#homenav,
body#services a#servicesnav,
body#about a#aboutnav,
body#projects a#projectsnav,
body#contact a#contactnav {color: #2f3d2e;}

/* ===== MAIN IMAGE ============================================================= */
#main-image img {width:100%;height:auto;}
#main-image {margin:-302px auto -4px;width:98%;max-width:1200px;height:auto;} /*margin: higher number = higher positioning*/
/*#main-image-index img {width:100%;height:auto;}
#main-image-index {margin:-302px auto -4px;width:98%;max-width:1200px;height:auto;}
#main-image-index-sm {display:none;}*/

/* ===== PAGE HEAD ============================================================== */
#page-head-container {height:50px;background-image:url("../images/page-head-BG.png");}
#page-head {width:92%;max-width:1126px;margin:0 auto;height:50px;}
#page-title {display:inline-block;background:#823134;padding:17px 20px 0;font-size:22px;height:33px;}

/* ===== PAGE CONTENT =========================================================== */
#page-content-container {width:92%;max-width:1126px;margin:20px auto;overflow:hidden;}
.page-2-col-container {overflow:hidden;}
#page-left-column {width:48%;float:left;}
#page-right-column {width:48%;float:right;}
.page-3-col-container {overflow:hidden;}
.page-3-col-left, .page-3-col-mid, .page-3-col-right {width:31%;float:left;padding-left:10px;}
.staff-list {list-style-type:none;margin-left:-50px;}
.staff-list li {padding-bottom:20px;}
.staff-list li:last-child {padding-bottom:0;} /* removes separation when list is stacked vertically */
.staff-list-3 {margin-left:10px;}

/* ===== FOOTER ================================================================= */
#footer-container {width:100%;height:auto;background:#6a8139;}
#footer {width:92%;max-width:1126px;text-align:center;font-size:15px;margin:0 auto;padding:10px;}
.footer-info {display:inline-block;padding-left:14px;}


/*#home-headline-container {width:92%;max-width:1126px;margin:0 auto;}
#home-headline {font-size:40px;color:#823134;
	width:100%;max-width:400px;height:auto;margin-top:100px;
	transform: translate(60%, 2px);
    -webkit-transform: translate(60%, 2px);
    -moz-transform: translate(60%, 2px);
    -o-transform: translate(60%, 2px);
    -ms-transform: translate(60%, 2px);
}*/

.google-map {position: relative;height: 200px;overflow: hidden;}
.google-map iframe {position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}



/* ===== LOGO (must follow other divs in CSS ==================================== */
#logo-container {width:92%;max-width:1126px;margin:0 auto;}
#logo img, #logo-h img {width:100%;height:auto;}
#logo-h {display:none;}
#logo {
	width:100%;max-width:200px;height:auto;margin-top:-73px;
	transform: translate(20%, 2px);
    -webkit-transform: translate(20%, 2px);
    -moz-transform: translate(20%, 2px);
    -o-transform: translate(20%, 2px);
    -ms-transform: translate(20%, 2px);
}
h3 {margin-top:0;}
hr {margin-top: -10px;width:50%;text-align:left;margin-left:0;}
ul {margin-left:-23px;}
.no-top-margin {margin-top:0;}
a:link {color: #9abc51;text-decoration: none;}
a:visited {color: #9abc51;}
a:hover {color: #FFF;}
a:active {color: #FFF;}

/* ===== RESPONSIVE ============================================================= */
@media only screen and (max-width: 1100px) {
#logo {
	width:100%;max-width:150px;margin-top:-73px;
	transform: translate(20%, 2px);
    -webkit-transform: translate(20%, 2px);
    -moz-transform: translate(20%, 2px);
    -o-transform: translate(20%, 2px);
    -ms-transform: translate(20%, 2px);
}
#main-image {margin:-212px auto -4px;}
/*#main-image-index {margin:-212px auto -4px;}*/
}

@media only screen and (max-width: 1000px) {
	
#contact .page-3-col-left, #contact .page-3-col-mid, #contact .page-3-col-right {width:100%;float:none;padding-left:10px;}	
.staff-list-3 {margin-left:-50px;}
	
}
@media only screen and (max-width: 900px) {
#logo {
	width:100%;max-width:125px;margin-top:-73px;
	transform: translate(10%, 2px);
    -webkit-transform: translate(10%, 2px);
    -moz-transform: translate(10%, 2px);
    -o-transform: translate(10%, 2px);
    -ms-transform: translate(10%, 2px);
}
#main-image/*, #main-image-index*/ {margin:-163px auto -4px;}
}
@media only screen and (max-width: 800px) {
.mainNav {font-size:16px;margin-top:18px;}
}
@media only screen and (max-width: 700px) {
/*.page-3-col-container {overflow:hidden;}*/
#projects .page-3-col-left, #projects .page-3-col-mid, #projects .page-3-col-right {width:100%;float:none;padding-left:10px;}
#projects ul {margin: 0 0 0 -23px;}
.projects-h4-mobile {margin-top:20px;}
}
@media only screen and (max-width: 640px) {
.mainNav {font-size:14px;margin-top:20px;}
#logo {
	width:100%;max-width:100px;margin-top:-73px;
	transform: translate(0, 2px);
    -webkit-transform: translate(0, 2px);
    -moz-transform: translate(0, 2px);
    -o-transform: translate(0, 2px);
    -ms-transform: translate(0, 2px);
}
#main-image/*, #main-image-index*/ {margin:-118px auto -4px;}
#page-left-column, #page-right-column {width:100%;float:none;}
.google-map {margin-top:20px;}
}

@media only screen and (max-width: 540px) {
#main-image {margin:-53px auto -4px;width:98%;max-width:1200px;height:auto;} /*margin: higher number = higher positioning*/
/*#main-image-index {display:none;}
#main-image-index-sm {display:block;margin:-100px auto -4px;width:98%;max-width:540px;height:auto;}
#main-image-index-sm img {width:100%;}*/
#logo {display:none;}
#logo-h {display:block; /* makes the div visible after display:none above */
	width:100%;max-width:320px;margin:-70px auto 0;
	transform: translate(0, 2px);
    -webkit-transform: translate(0, 2px);
    -moz-transform: translate(0, 2px);
    -o-transform: translate(0, 2px);
    -ms-transform: translate(0, 2px);}
body#home a#homenav,
body#services a#servicesnav,
body#about a#aboutnav,
body#projects a#projectsnav,
body#contact a#contactnav {color: #6a8139;}
}