@charset "UTF-8";


body { font-family: 'Titillium Web', Helvetica,Helvetica Neue,Arial,sans-serif; font-size: 12px; line-height: 18px; /*background-color: #323232;*/ background-color: #e8e9e8;}
* {margin: 0; padding: 0;}
ul, ol {list-style-type: none; margin: 0;}
a {}
img {}

h1 {font-size: 30px; line-height: 40px; font-weight: 300; color:#646464; margin-bottom: 20px;}

.in-page-anchor {height: 0; padding: 0; margin: 0; font-size: 0; line-height: 0;}
nav {/*height: 56px;*/ position: relative;}
nav ul {display: none; clear: both; background-color: #646464; position: absolute; top: /*56px*/ 0; left: 0; width: 100%; z-index: 200;}	
nav.expand ul {display: block;}
nav ul li a {font-size: 1.6rem; display: block; padding: 20px; text-align: center; text-decoration: none;}
nav.main-nav .menu-toggle  {display: block; position: absolute; top: 5px; right: 10px;/* text-indent: -100em;*/ overflow: hidden; background-color: transparent; width: 43px; height: 43px; padding: 0; /*border: 2px solid rgba(255,255,255,0.7);*/ border-radius: 5px; z-index: 100;}
nav.main-nav .menu-toggle:hover {cursor: pointer;}
nav.main-nav .menu-toggle:before {   content: "\f0c9";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #fff;
    font-size: 30px;
    padding-right: 0.5em;
    position: absolute;
    top: 12px;
    left: 8px; z-index: 101;}
nav.main-nav.expand .menu-toggle  { }
nav.main-nav li {display: block; float: none;}
nav.main-nav li.mobile-menu {display: block;}
/*nav.main-nav li:nth-child(2), nav.main-nav li:nth-child(3),nav.main-nav li:nth-child(4), nav.main-nav li:nth-child(5) {display: none;}*/
nav.main-nav li a {display: block; float: none; font-size: 1.3rem; padding: 20px 7.5px 22px 7.5px; color: #fff; border-right: none; border-bottom: solid 1px #888; font-weight: 300;}
nav.main-nav li:first-of-type a {border-left: none;}
nav.main-nav li:nth-of-type(2) a {border-left: none;}
nav.main-nav li a:hover {color: #8CC63F;}
nav.main-nav li a.nav-active {color: #8CC63F;}	

header {}

header .logo {background-color: #646464; text-align: center; padding: 20px 20px 40px 20px; border-bottom: solid 3px #fff; position: relative;}

header .logo .email {display: block; position: absolute; right: 60px; bottom: 20px;}

header .logo .email a {color: #fff; text-decoration: none; font-size: 15px;}

header .logo .email a:hover {text-decoration: underline;}

header .green-bar {background-color: #8CC63F; font-size: 20px; text-align: right; color: #fff; padding: 12px 60px;}

header .green-bar span { padding-left: 18px; 	width: 10px; height: 18px;
	background-image:url(../images/new-files/arrow.png);
	background-repeat: no-repeat;
	background-size: 12px 20px; background-position: 0px 5px; font-weight: 200;}

.wrapper {width: 960px; margin: 0 auto;}

.full-width img {width: 100%; height: auto;}

.body-content section {text-align: center;}

section { font-size: 16px; line-height: 25px;  padding: 0; color: #646464; }

section p {margin-bottom: 20px;}

.section-padding {padding: 30px; border: solid 1px #646464; background-color: #e8e9e8; }

.section-margin {margin: 0 0 20px 0;}

.portfolio h1 {color: #fff; display: none;}

.portfolio ul:after { content: ""; display: table; clear: both;}

.portfolio ul li img {width: 100%; height: auto;}

.portfolio ul li {/*display: none;*/ width: 33%; display: block; float: left; margin: 0 0 4px 0.5%;}


.portfolio ul li:nth-of-type(3n+1) {margin-left: 0; clear: left;}

/*.portfolio ul li:first-of-type {display: block;}

.portfolio ul li:first-of-type a {display: block; position: relative;}*/

.portfolio ul li a {display: block; position: relative; line-height: 0;}

.portfolio ul li a img {width: 100%;}

.portfolio ul li a span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	/*font-size: 100px;
	color: rgba(255,255,255,0.5);
	margin: -60px 0 0 -20px;*/
	width: 30px; height: 50px;
	background-image:url(../images/new-files/arrow.png);
	background-repeat: no-repeat;
	background-size: 30px 50px;
	margin: -25px 0 0 -15px;
	opacity: 0.35;
}

.portfolio ul li a span i {display: none;}

.portfolio ul li a:hover span {
	
		opacity: 1;
	/*color: rgba(255,255,255,1);*/

}

.portfolio ul li a:before  {transition:background-color 0.2s ease-out; content: ""; display: block; background-color:rgba(102,153,51,0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.portfolio ul li:hover a:before {background-color:rgba(140, 198, 63,0.9); } 

.portfolio ul li .development-name {padding: 3px; border: solid 1px #646464; font-size: 16px; background-color: #fff;}
.portfolio ul li:hover .development-name {background-color: #646464; color: #fff;  transition:background-color 0.2s ease-out; }
.portfolio ul li .development-name.position-above {margin-bottom: 3px;}
.portfolio ul li .development-name.position-below {margin-top: 3px;}

.portfolio ul li:nth-of-type(1) .development-name.position-below, .portfolio ul li:nth-of-type(2) .development-name.position-below, .portfolio ul li:nth-of-type(3) .development-name.position-below, .portfolio ul li:nth-of-type(7) .development-name.position-below, .portfolio ul li:nth-of-type(8) .development-name.position-below, .portfolio ul li:nth-of-type(13) .development-name.position-below, .portfolio ul li:nth-of-type(14) .development-name.position-below {display: none;}

footer {background-color: #646464; padding: 5px 30px; color: #fff;}

.button {display: inline-block; padding: 10px 20px; border-radius: 4px; color: #fff; text-decoration: none; background-color: rgba(140, 198, 63,1);}

.button:hover {background-color: #646464;}

.hh-image-panel {position: relative;}

.image-overlay {position: absolute; top: 0 left: 0; width: 100%; padding: 20px; box-sizing:border-box;}

.image-overlay .overlay-column-1 {width: 100%; float: left;}

.image-overlay .overlay-column-1 h1 {color: #fff; border: solid 1px #fff; padding: 30px 75px; text-align: left; font-size: 30px;}

.image-overlay .overlay-column-1 h1 span {display: block; font-weight: 200;}

.image-overlay .overlay-column-1 h1 span strong {font-weight: 500;}

.image-overlay .overlay-column-2 {width: 19%; float: left; margin-left: 2%;}

.image-overlay .overlay-column-2 h2 {color: #fff; font-size: 16px;  border: solid 1px #fff; padding: 10.3px 20px; text-align: left; margin-bottom: 12px;}

.image-overlay .overlay-column-2 h2 span {display: block; font-weight: 200;}

.image-overlay .overlay-column-2 h2 span strong {}