:root {
  --main-green-color: #3a9303;
}

* { margin: 0; padding: 0; }


body {
	background-color:#FFF;
	font-family: 'Verdana', sans-serif;
	color: #222222;
}
#top_page {
	
	width: 100%; 
	border-bottom: #ccc8c8;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	z-index: 1;
	background-color: white;
	position: fixed;
}
#top_page img {
	width: 20%;
	float: left;
}


#facebook {
	position: relative;
    top: -34px;
    right: 1.7em;
    float: right;
    height: 0;
	
}
/*#facebook img {
bottom: 0;
}*/
#topnav {
	/* width: 100%; */
	height: 70px;
	/* padding: 1em 0 0 0; */
	background-color: #e6f1df;
}
#topnav li {
	font-family: Arial, Helvetica, sans-serif;
	list-style: none;
	font-size: 0.9em;
	text-transform: uppercase;
	text-align: center;
	/*    letter-spacing: 4px;
*/
	float: left;
	width: 25%;
	/* height: 23px; */
	padding: 1.8em 0% 0% 0;
}

#topnav li a {
	/* my col: */
	position: relative;
	color: #666;
	letter-spacing: 3px;
}


#home #topnav li.home a:before,
#about #topnav li.about a:before,
#portfolio #topnav li.portfolio a:before{
	visibility: visible;
    background-color: #a0a0a0;
	  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
#topnav li:hover a {

	position: relative;
  	text-decoration: none;

}
 #topnav li a:before  {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

#topnav li a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
/*
#banner_review {

	color: #fff;
	position: absolute;
	font-family: serif;

	bottom: 18%;
	font-style: oblique;
	right: 3%;
	padding: 0.8em;
	
	background-color: #383737ad;
	font-size: 1.3rem;
	animation-duration: 1s;
	animation-name: fadein;
}*/

@keyframes slidedown {
  from {
	  top: -4em;
	  opacity: 0;
  }

  to {
   	opacity: 1;
	top: 0;
  }
}
@keyframes in_from_left {
  from {
    left: -4em;
	 opacity: 0;
  }
  to {
   left: 0;
    opacity: 1;
  }
}
@keyframes in_from_right {
  from {
    left: 4em;
	 opacity: 0;
  }
  to {
   left: 0;
    opacity: 1;
  }
}
/*@keyframes underliner {
  from {
   transform: scaleX(0);
  }
  to {
   transform: scaleX(1);
  }
}*/

#banner 
{
	padding-top: 6em;

}
		
#banner img, #right img
{
	animation-duration: 1s;
    animation-name: slidedown;
	display: block;
	margin: 0 auto 1em auto;
	position:relative;
}

.clear{
	clear:both;
}
	

#maincontent{
	float:left;
	padding: 3% 3%  2% 3%;
	width: 50%;
	/*background-color:#ddd;*/
	margin: 1em 2% 0 2%;
	/* border-right: dotted 5px #f9a038; */
}
.halfbox {
	float:left;
	width: 34%;
	padding: 0 8% 0 8%;
}
.halfbox img{
	width: 100%;

}
.thirdbox {
	float:left;
	width: 25%;
    padding: 0 4% 0 4%;
}
#boxleft{
	float:left;
	padding: 0% 3%  1em 7%;
	width: 50%;
	/*background-color:#ddd;*/
	margin: 0em 2% 0 2%;
}

#about #boxleft img {

	width: 100%;
	border:#666 1px solid;
}

#nogaps{
	font-size:0;
}
#boxright{
	/* margin: 0; */
	float:right;
	margin: 2em 4% 1em 0;
	padding: 0% 3% 1em 3%;
	width: 25%;
	background-color:#ddd;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border: 9px 9px 9px 9px;
	border-radius: 9px;
}
#boxright img {
	float: left;
	width: 100%;
	padding: 0 1em 1em 0;
}
#pricing #boxright{
	    /* padding: 1em; */
	    padding: 1em 3% 1em 4%;
}
#pricing li{
	    /* padding: 1em; */
}
#boxcentre{
	width: 70%;
	margin: 1em 15% 0 15%;
	
}
#boxcentre img {
	width:auto;
	max-width: 100%;
	float: none;
}
#right{
	float: left;
	padding: 3% 3% 3% 3%;
	width: 32%;
	/* background-color:#fff; */
	margin: 1em 0 0 0;
}
p {
font-family: 'Quicksand', sans-serif;
/*	font-family: 'Montserrat', sans-serif;
font-family: 'Raleway', sans-serif;
/*font-family: 'Verdana', sans-serif;*/
/*	color:#555;
*/	margin-bottom:.8em;
	font-size: 1rem;
	/* font-family: sans-serif; */
}

h1 {
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 5px;
	font-size: 1.4em;
	font-weight: normal;
	margin: 1.5em 0 0.4em 0;
	padding: 0px;
	text-align: center;
	color: #666;
	border-bottom: #666 1px solid;
}
#boxright h1 {
	margin-top: 1em;
}
.in_from_left{ 
	
	position: relative;
	animation: in_from_left 2s ease-in-out forwards;
	
}
.in_from_right{ 
	
	position: relative;
	animation: in_from_right 2s ease-in-out forwards;
	
}/*
.underliner {
	animation: underliner;
}
#temp {
	width: 100px;
	height: 100px;
}*/

hr {
	color: #FFFFFF;
}
#container, #container2 {
	
	width: 80%;
	margin: 1em auto 0 auto;
}
 
#container2 img {
	width: 20%;
	float:left;
}
.image {
  width: 100%;
}
#portfolio_container {
	background-color: #bdbdbd;
	font-size: 0;
	padding: 2% 0 0 2%;
}
.portfolio_box, .portfolio_box_small {
  	width: 31.3%;
  	display: inline-block;
  	vertical-align: top;
  	font-size: 0;
  	 position: relative; 
  	padding: 0% 2% 2% 0%;
}
.portfolio_box_small {
	 width: 23%;
	 }

.portfolio_box img, .portfolio_box_small img {
  width: 100%;
  font-size: 0;
}


.portfolio_overlay {

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96%;
  width: 96%;
  opacity: 0;
  transition: .7s ease;
  background-color: var(--main-green-color);
}

.portfolio_box:hover .portfolio_overlay{
  opacity: 1;
}

.portfolio_text a, .portfolio_text a:visited, .portfolio_text a:link{
	color: white;

}
.portfolio_text {
	display:block;
	color: white;
	font-size: 12pt;
	/* font-size: 1.9vw; */
	padding: 1.8em;
}
#green_section {
	background-color: var(--main-green-color);
	color: white;
	padding: 0em 10% 2em 10%;
	/* margin: 1em 0 0 0; */
}
#green_section h1{
	color: white;
	border-bottom: #fff 1px solid;
	padding: 1.2em 0 0 0;
	margin: 0 0 1em 0;
}
a, a:link, a:visited, a:active
{
	color: #3a9303;
	text-decoration: none;
}
a:hover
{
	color: #016f01;
	text-decoration: none;

}
#footer a, #green_section a {
	color:#b0f584;
}
div#footer a:hover, #green_section a:hover {
    color: #fff;
}

#left {
	float: left;
	width:150px;
	z-index:1;
	padding-top: -20px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 32px;
}


/* This CSS is used for the Show/Hide functionality. */

section {
	background-color: #dadada;
	/* padding: 1em; */
	margin-bottom: 6px;
	padding: .5em 1em;
}
.question {
	margin: 0 0 1em 0;
	font-size: 0.9em;
}
input[type=checkbox] { /* change "blue" browser chrome to green */
filter:  invert(0%) hue-rotate(253deg) brightness(1.1);

}
.question input{
	width: 1.6em;
	height: 1.3em;
	/* display: block; */
	left: 0.4em;
	top: 0.3em;
	position: relative;
}
.collapsible {
  /*cursor: text; */

}


.content {
	margin: 0.5em 0 0 0;
	padding: 0 0.6em;
	max-height: 0;
	font-size: .9em;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.5s , opacity 1s, padding 0.5s;
	background-color: #f1f1f1;
}


.reveal, .hide {
	background-repeat: no-repeat;
	/*	padding-left: 2.4em;
*/
	font-size: .8em;
	float: right;
	cursor: pointer;
	background-position: 6px;
	}


.reveal:before{
	content: "Explain this +";
}

.hide:after{
	content: "Hide -";
}

#pricing input[type=text] {

	margin: 0;
	width: 3.6em;
	height: 1.6em;
		
}

#total p{
	text-align:center;
	font-weight: bold;

}

#pricing_table{

width: 100%;
font-size: 0.8em;

}
#pricing_table 
td:nth-child(odd) {
	background: #CCC;
}
#pricing_table 
td:nth-child(even) {
	background: #b7b7b7;
}
#pricing_table td {padding: 0.6em;}
/*#footer
{
	border-top: #2241b1 solid 1px;
clear: both;
padding: 1em 0 0 0;
margin: 2em;
}
#footer p{
	font-size: 80%;
	}
*/
#footer{
	font-size: 1em;
	clear: both;
	padding: 2em 0 2em 0;
	color: #fff;
	/* margin: 2em; */
	background-color: #808080;
	margin: 2em 0 0 0;
	/* margin: 2; */
	}


#heading {
	float:left;
	width:100%;
	height:25px;
	z-index:1;
	text-align: center;

}

h2 {
	font-family: 'Quicksand', sans-serif;
	text-align:center;
	font-size: 1.2em;

	color: var(--main-green-color);
	margin: 0 0 0.2em 0;
	padding: 0px;
}
.biog_pic {
	float: left;
	padding : .2em  1em 1em 0;
	width: 50%;
}
.comments li{
	
	font-style:italic;
	list-style:none;
	margin: 0 0 1em 0;
	
}
		
#home #boxcentre li {
	list-style-type: none;
    font-family: 'Quicksand', sans-serif;
    margin: 0.3em 0 0 0;
    /* font-size: 1rem; */
    text-align: center;
	
}
#boxcentre li {
/*	opacity: 1;
	animation-duration: 2s;
	animation-name: fadein;*/
/*	animation-duration: 2s;
*/	line-height: 1.2em;
	position: relative;
	
}/*
@keyframes fadein {
 from{
	/*  font-size: 0.5em;
	  left: -8em; 
	  opacity: 0;
  }

  to{
   	opacity: 1;
	left: 0; 
	/*font-size: inherit;
 }
}

#boxcentre li:nth-child(1) {
	animation-duration: 2s;
}
#boxcentre li:nth-child(2) {
	animation-duration: 4s;
}
#boxcentre li:nth-child(3) {
	animation-duration:6s;
}*/
.large {
	font-size: 18px;
}

.small {
	font-size: 11px;
}

.red{
	color: #cc1111;

}
.green{
	color: #33CC00;

}
.small_print{
	font-size: .75em;
	color: #636363;
}

ul.sponsor {
	    list-style: none;
margin-left: 2em;
	}
	
.slicknav_menu {
	display:none;
}	
/* Contact form ****/
label {
	/* font-family: Arial, Helvetica, sans-serif; */
	font-size: 1em;
	font-weight: normal;
	margin: 0 0 0.4em 0;
	padding: 0px;
	color: #3b880b;
}
input[type=text] {
  width: 100%;
  padding: 5px 8px;
  margin: 3px 0 0.5em 0;
/*  display: inline-block;
*/  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1em;
}
textarea {
  width: 100%;
  height:5em;
  padding: 3px 9px;
  margin: 4px 0 0.5em 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 1.3em;
  resize: none;
}
input[type=submit] {
  width: 100%;
  background-color: #3a9303;
  color: white;
  padding: 9px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.3em;
}
#contact  input[type=text].captcha {
	width: 176px;
}

input[type=submit]:hover {
  background-color: #2b6f02;
}

.email {
 display:none;
}
#error_box {
color:#C00;
}
	
@media screen and (max-width: 800px) {
body {
font-size: 110%;
}
#topnav li {
	font-size: 85%;
}
#topnav li a {
	letter-spacing: 0;
}
.portfolio_text {
	
font-size: 1.9vw;
}

}
@media screen and (max-width: 640px) {


 body {
font-size: 120%;
/*background-image:none;*/
}

 #topnav {
 display:none;
}
.js #menu {
	display:none;
}

.js .slicknav_menu {
	display:block;
	position: fixed;
	width: 100%;
	z-index: 1;
}
.portfolio_box {
    width: 48%;
}
.portfolio_box_small {
    width: 48%;
    /* padding-right: 3%; */
}
.portfolio_text {
	
font-size: 2.7vw;
}
.halfbox {
   
    width: 85%;
}
.reveal {
display:none;
	}
#boxleft, #boxright {
	width: 83%;
}
#about #boxright{
	margin-top:1em;
}
}