body, html{
	margin: 0;
	padding: 0;
	position: relative;
	overflow-x: hidden;
	font-family: 'PT Sans', sans-serif, Arial, Helvetica;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4em;
	color: #000;
}
body{background: #fff;}
body img{border: none;}
.green_bg{background: #00a389;}
.light_bg{background: #e9e9e9;}
.black_bg{background: #000;}
.wrap{
	margin: 0 auto 0 auto;
	position: relative;
	width: 90%;
	max-width: 1200px;
}
.wrap.full{
	width: 100%;
	max-width: 1334px;
}
@media screen and (max-width: 1350px){
	body, html{font-size: 16px;}
}
	
/*---------------FONT STYLES--------------*/
h1, h2, h3, h4, p, a, ol, ul, li{margin: 0; padding: 0;}
h1{
	margin: 0 0 30px 0;
	font-family: 'Titillium Web', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3em;
}
h2{
	margin: 0 0 25px 0;
	padding: 10px 0 0 0;
	font-family: 'Titillium Web', sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3em;
}
h2:first-child, h1 + h2{padding: 0;}
h2.block{
	margin: 0;
	padding: 12px 30px 15px 30px;
	position: absolute;
	top: -1px;
	left: 8%;
	z-index: 10;
	background: #00a389;
}
h3{
	margin: 0 0 15px 0;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3em;
}
p{margin: 0 0 20px 0;}
a{
	text-decoration: none;
	color: #00a389;
	-webkit-transition: color 300ms ease;
	-moz-transition: color 300ms ease;
	-o-transition: color 300ms ease;
	transition: color 300ms ease;
}
.green_bg a{color: #fff;}
.black_bg a{color: #fff;}
a:hover, .green_bg a:hover{color: #000;}
.black_bg a:hover{color: #00a389;}
a:focus{outline: none;}
ul li{list-style: none;}
table{margin: 0 0 20px 0; border-collapse: collapse;}
input, textarea, select{
	margin: 0;
	padding: 5px 5px 5px 5px;
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-family: 'PT Sans', sans-serif;
	font-size: 18px;
	line-height: 1.4em;
	background: #e9e9e9;
	border: 3px solid #e9e9e9;
	border-radius: 0;
	-webkit-transition: border 300ms ease;
	-moz-transition: border 300ms ease;
	-o-transition: border 300ms ease;
	transition: border 300ms ease;
}
input[type="text"], input[type="button"], input[type="submit"]{-webkit-appearance: none;}
input:focus, textarea:focus, select:focus{border-color: #00a389; outline: none;}
input::-moz-focus-inner{padding: 0; border: none;}
select{width: 100%;}
@media screen and (max-width: 960px){
	h1{font-size: ;}
	h2{font-size: ;}
	h3{font-size: ;}
}
@media screen and (max-width: 720px){
	h1{font-size: ;}
	h2{font-size: ;}
	h2.block{margin-top: -1px; position: relative; float: left;}
	h3{font-size: ;}
}
@media screen and (max-width: 480px){
	h1{font-size: ;}
	h2{font-size: ;}
	h3{font-size: ;}
}
	
/*---------------TOP--------------*/
#top .wrap{padding: 28% 0 170px 0;}
#top .img{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 52px;
	right: 0;
	right: calc(-50vw + 50%);
	z-index: -1;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #000;
	background-size: cover;
}
#logo_box{
	padding: 30px 50px 30px 0;
	position: absolute;
	top: 35%;
	background: #fff;
}
#logo{display: block; width: 300px; height: 94px;}
#logo object, #logo img{
	display: block;
	width: 100%;
	height: 94px;
	pointer-events: none;
}
.box1{
	position: absolute;
	top: 0;
	left: -32px;
	width: 172px;
	height: 8%;
	opacity: 0.5;
	background: #afddd5;
}
.box2{
	position: absolute;
	top: 25%;
	left: -176px;
	width: 188px;
	height: 8.275%;
	opacity: 0.5;
	background: #005953;
}
.box3{
	position: absolute;
	top: 75%;
	left: -106px;
	width: 226px;
	height: 13%;
	opacity: 0.5;
	background: #00a389;
}
.js .fadein{
	-webkit-transition: all 800ms ease;
	-moz-transition: all 800ms ease;
	-o-transition: all 800ms ease;
	transition: all 800ms ease;
}
.js .animate .fadein, .js .animate2 .fadein{
	opacity: 0;
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	-ms-transform: translateX(-20px);
	-o-transform: translateX(-20px);
	transform: translateX(-20px);
}
.js .animate .fadein.rev, .js .animate2 .fadein.rev{
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	-ms-transform: translateX(20px);
	-o-transform: translateX(20px);
	transform: translateX(20px);
}
.js .delay1{
	-webkit-transition-delay: 200ms;
	-moz-transition-delay: 200ms;
	-o-transition-delay: 200ms;
	transition-delay: 200ms;
}
.js .delay2{
	-webkit-transition-delay: 400ms;
	-moz-transition-delay: 400ms;
	-o-transition-delay: 400ms;
	transition-delay: 400ms;
}
#nav_toggle{
	padding: 15px 20px 0 62px;
	display: none;
	position: absolute;
	top: 8%;
	left: -20px;
	height: 39px;
	float: left;
	z-index: 1000;
	cursor: pointer;
	font-family: 'Titillium Web', sans-serif;
	font-size: 18px;
	color: #000;
	background: #fff;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}
#nav_toggle:after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	width: 50px;
	content: '';
	background: #fff;
}
#nav_toggle .bar{
	display: block;
	position: absolute;
	left: 20px;
	width: 28px;
	height: 3px;
	background: #000;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
#nav_toggle .bar1{top: 16px;}
#nav_toggle .bar2{top: 26px;}
#nav_toggle .bar3{top: 26px;}
#nav_toggle .bar4{top: 36px;}
.csstransforms .show_nav #nav_toggle .bar1{top: 36px; opacity: 0;}
.csstransforms .show_nav #nav_toggle .bar4{top: 16px; opacity: 0;}
.csstransforms .show_nav #nav_toggle .bar2, .csstransforms .show_nav #nav_toggle .bar3{
	-webkit-transition-delay: 150ms;
	-moz-transition-delay: 150ms;
	-o-transition-delay: 150ms;
	transition-delay: 150ms;
}
.csstransforms .show_nav #nav_toggle .bar2{
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.csstransforms .show_nav #nav_toggle .bar3{
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
@media screen and (max-width: 1350px){
	#logo_box{padding: 20px 35px 20px 0;}
	#logo{width: 270px; height: 85px;}
	#logo object, #logo img{height: 85px;}
}
@media screen and (max-width: 960px){
	#top .img{left: 48px;}
	#nav_toggle{display: block;}
}
@media screen and (max-width: 720px){
	#top .img{left: 36px;}
	#logo_box{padding: 15px 28px 15px 0;}
	#logo{width: 210px; height: 66px;}
	#logo object, #logo img{height: 66px;}
}
@media screen and (max-width: 360px){
	#top .img{left: 36px;}
	#logo_box{padding: 15px 28px 15px 0;}
	#logo{width: 180px; height: 56px;}
	#logo object, #logo img{height: 56px;}
}
	
/*---------------NAV--------------*/
.nav_wrap{
	position: absolute;
	top: 8%;
	left: 0;
	width: 100%;
}
nav{
	margin: 0 0 0 -5.5555%;
	padding: 0 20px 0 5.5555%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	background: #fff;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
nav li{float: left;}
nav li a{
	padding: 15px 10px 15px 10px;
	display: block;
	font-size: 18px;
	text-transform: uppercase;
	color: #000;
}
nav li a:hover{color: #00a389;}
nav li.current a{font-family: 'Titillium Web', sans-serif; font-size: 20px; font-weight: 700;}
@media screen and (max-width: 1350px){
	nav li a{font-size: 16px;}
	nav li.current a{font-size: 18px;}
}
@media screen and (max-width: 960px){
	nav{
		margin: 64px 0 0 -5.5555%;
		padding: 0 0 0 5.5555%;
		left: -20px;
		width: 200px;
		opacity: 0;
		visibility: hidden;
		overflow: visible;
		background: #fff;
	}
	.show_nav nav{left: 0; opacity: 1; visibility: visible;}
	nav ul{margin: 0 0 0 -20px; padding: 10px 0 10px 0;}
	nav li{float: none;}
	nav li a{padding: 8px 20px 8px 20px;}
}
	
/*---------------CONTENT--------------*/
main{display: block;}
main ul{margin: 0 0 20px 0;}
main p + ul{margin: -10px 0 20px 0;}
main li{
	margin: 0 0 8px 0;
	padding: 0 0 0 15px;
	background: url(images/bullet.png) 13px 4px no-repeat;
}
.generatedcontent main li{position: relative; background: none;}
.generatedcontent main li:before{
	position: absolute;
	top: 13px;
	left: 4px;
	width: 5px;
	height: 1px;
	content: '';
	background: #000;
}
.content{padding-top: 60px; padding-bottom: 40px;}
.center{text-align: center;}
.col1{margin: 0 5% 0 0; width: 30%; float: left;}
.col2{width: 30%; float: left;}
.col3{width: 30%; float: right;}
.col4{width: 65%; float: right;}
.col3 .img{
	position: absolute;
	top: 60px;
	left: 70%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.col3 .img.p{bottom: 0; right: 0;}
.col3 .img.l{bottom: 60px; right: -5.5555%;}
.cols2{
	margin: 0 0 25px 0;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 40px;
	-moz-column-gap: 40px;
	column-gap: 40px;
}
.cols2 li{
	overflow: auto;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid-column;
}
.clear{clear: both;}
.btn{
	padding: 10px 20px 10px 20px;
	display: inline-block;
	cursor: pointer;
	font-family: 'Titillium Web', sans-serif;
	text-transform: uppercase;
	color: #fff;
	border: none;
	background: #00a389;
}
.btn:hover, .btn:focus{background: #000;}
.intro{
	font-family: 'Titillium Web', sans-serif;
	font-size: 35px;
	font-weight: 700;
	line-height: 1.3em;
	color: #00a389;
}
.green_bg .intro{color: #fff;}
.intro2{font-size: 24px; line-height: 1.3em; color: #00a389;}
.green_bg .intro2{color: #fff;}
.services{
	padding-top: 37.5%;
	position: relative;
	color: #fff;
	overflow: hidden;
	background: #000;
}
.services li{background-image: url(images/bullet_white.png);}
.generatedcontent .services li:before{background: #fff;}
.service{
	margin-top: 37.5%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.service:target{margin: 0; position: relative;}
.js .service:target{margin-top: 37.5%; position: absolute;}
.service.opened.loaded{margin: 0; position: relative; z-index: 5;}
.service a{
	margin-top: -37.5%;
	padding: 37.5% 0 0 0;
	display: block;
	position: absolute;
	top: 0;
	width: 25%;
	color: #fff;
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-filter: saturate(0%);
	filter: saturate(0%);
}
.service .s1{left: 0;}
.service .s2{left: 25%;}
.service .s3{left: 50%;}
.service .s4{left: 75%;}
.service a:hover, .service a.current{color: #fff; -webkit-filter: none; filter: none;}
.service a:after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	content: '';
	background: rgba(0,0,0,0.5);
}
.service a:hover:after, .service a.current:after{opacity: 0; visibility: hidden;}
.no-rgba .service a:after{background: url(images/black50.png) repeat;}
.service a h3{
	margin: -100px 0 0 0;
	position: absolute;
	display: table;
	top: 50%;
	left: 10%;
	width: 80%;
	height: 200px;
	z-index: 5;
	font-size: 30px;
	text-align: center;
}
.service a:hover h3{background: rgba(0,0,0,0.7);}
.service a.current h3{background: #000;}
.service a h3:after{
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 0;
	content: '';
	background: none;
}
.service a:hover h3:after{background: rgba(0,0,0,0.7);}
.service a.current h3:after{height: 200px; background: #000;}
.service a h3 span{padding: 0 10px 0 10px; display: table-cell; vertical-align: middle;}
.services, .service a, .service a:after, .service a h3, .service a h3:after, .service .description, .service .content, .spacer{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.service .description{height: 0; overflow: hidden;}
.js .service .description{overflow: visible;}
.service:target .description{position: static; height: auto;}
.js .service .description{height: 0;}
.service .content{padding-left: 5%; padding-right: 5%; position: relative;}
.js .service .content{opacity: 0; visibility: hidden;}
.js .service.opened .content{opacity: 1; visibility: visible;}
.js .spacer{display: block; height: 0;}
.person{
	margin: 40px 0 20px 0;
	padding: 15px 20px 15px 20px;
	max-width: 375px;
	width: 80%;
	background: #222;
}
.person:first-child{margin-top: 0;}
.person h3{margin: 0 0 5px 0; color: #fff;}
.person h4{font-weight: 400; font-size: 16px; color: #00a389;}
.contact .left{
	margin-left: -5.5555%;
	padding-left: 5.5555%;
	padding-right: 5%;
	float: left;
	width: 36%;
}
.contact .left:after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: -3000px;
	right: 59%;
	z-index: -1;
	content: '';
	background-color: inherit;
}
.contact .input{margin: 0 0 10px 170px; clear: both;}
.contact label span{
	margin: 3px 0 0 -170px;
	padding: 5px 0 5px 0;
	display: block;
	width: 150px;
	float: left;
}
.contact input, .contact select, .contact textarea{float: left;}
.contact .btn{width: auto; float: right;}
.contact .right{width: 54%; float: right;}
.contact .g-recaptcha{float: right;}
.contact .thanks{display: none;}
#thankyou:target .thanks{display: block;}
#thankyou:target form{display: none;}
@media screen and (max-width: 1350px){
	.intro{font-size: 30px;}
	.intro2{font-size: 22px;}
	.service a h3{margin-top: -90px; height: 180px; font-size: 26px;}
}
@media screen and (max-width: 960px){
	.content{padding-top: 45px; padding-bottom: 25px;}
	.col1, .col4{margin: 0; width: auto; float: none;}
	.col_bottom{position: relative; width: 100%; float: left;}
	.col2, .col3{width: 47.5%;}
	.col3 .img{top: 0; left: 52.5%;}
	.col3 .img.p{bottom: -25px;}
	.col3 .img.l{bottom: 20px;}
	.intro{font-size: 26px;}
	.intro2{font-size: 20px;}
	.person:first-child{margin-top: 40px;}
	.service a h3{margin-top: -80px; height: 160px; font-size: 22px;}
	.contact .left{
		margin: 0 -5.5555% 0 -5.5555%;
		padding-right: 5.5555%;
		width: auto;
		float: none;
	}
	.contact .left:after{display: none;}
	.contact .right{width: auto; float: none;}
}
@media screen and (max-width: 720px){
	.content{padding-top: 30px; padding-bottom: 10px;}
	.cols .left, .cols .right{width: auto; float: none;}
	.cols2{
		margin: 0;
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
	.col2, .col3{width: auto; float: none;}
	.col3 .img{margin: 0 0 20px 0; padding: 56.25% 0 0 0; position: static;}
	.img_wrap{max-width: 400px;}
	.services{padding: 0;}
	.service, .js .service:target{margin: 0; position: relative;}
	.service a{
		margin: 0;
		padding-top: 200px;
		position: relative;
		display: block;
		width: 100%;
	}
	.service .s1, .service .s2, .service .s3, .service .s4{left: auto;}
	.js .service .description{overflow: hidden;}
	.js .spacer{display: none;}
}
@media screen and (max-width: 550px){
	.contact .input{margin-left: 0;}
	.contact label span{margin-left: 0; width: auto;float: none;}
	.contact .g-recaptcha{float: none;}
}
@media screen and (max-width: 480px){
	.service a{padding-top: 160px;}
	.service a h3{margin-top: -60px; height: 120px;}
}
	
/*---------------FOOTER--------------*/
footer{
	padding: 35px 0 40px 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 1.3em;
	color: #000;
}
footer a{color: #000;}
footer a:hover{color: #00a389;}
footer img{margin: 0 0 8px 0; width: 30px;}
#backtotop{
	position: fixed;
	bottom: 10%;
	right: -36px;
	width: 36px;
	height: 36px;
	opacity: 0;
	z-index: 200;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
#backtotop img{width: 100%; pointer-events: none;}
#backtotop.visible{right: 5px; opacity: 0.5;}
#backtotop.visible:hover{opacity: 1;}
@media screen and (max-width: 720px){
	footer{padding: 25px 0 30px 0;}
}