/* CSS for mockup */
@import url(http://fonts.googleapis.com/css?family=Comfortaa:400,700,300);
body {
	background-color: #666;
}
header {
	z-index: 1;
	position: fixed;
	width: 100%;
	background-color: #000;
	color: #fff;
	padding: .25em;
}
nav {
	font-family: 'Comfortaa', cursive;
	font-weight: 300;
	font-size: 1em;
	padding: 0 2em 0 0;
	color: #99cc33;
	text-align: right;
}
nav ul {
	padding: 0;
}
nav ul li {
	display: inline-block;
	padding: 0 1em 0 1em;
}
#wrapper {
	width: 85%;
	margin: 0 auto;
	box-shadow: 0 0 100px #000;
	background-color: #fff;
	/*border: 2px solid #999;*/
	max-width: 1400px;
}
#top {
	background-color: #fff;
	padding: 4em 2em 1em 2em;
}
.logo {
	float: left;
	width: 30%;
	background-color: #fff;
	background-image: url(images/logo.png);
	background-size: 85%;
	background-repeat: no-repeat;
	background-position: left;
	padding: 8em 0 1.5em 0;
}
.graphic {
	float: right;
	width: 60%;
	background-color: #fff;
	background-image: url(images/graphic.png);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: right;
	background-color: #fff;
	padding: 8em 0 1.5em 0;
}
legend {
	font-family: 'Comfortaa', cursive;
	font-weight: 700;
}
fieldset {
/*	border: none;*/
}
textarea {
	width: 95%;
}
input {
	margin: .25em;
}
label {
	margin: .25em;
}
select {
	margin: .25em;
}
#contact {
	margin: 0 auto;
	border: none;
	width: 50%;
	float: left;
	padding: 0;
}
#contact legend {
	font-weight: 700;
	font-size: 1.25em;
	padding: .75em 0 .25em 0;
}
#contact label {
	float: left;
	clear: both;
	display: block;
	padding: 0;
	margin: .75em 0 .25em 0;
	width: 40%;
}
#contact input {
	float: left;
	padding: .25em .50em .25em .5em;
}
#contact div.phone {
	float: left;
	display: inline-block;
}
#contact div.phone input {
	display: inline;
	float: left;
	width: 3em;
}
#contact select {
	float: left;
	display: inline;
	padding: .25em;
}
#info {
	float: right;
	border: none;
	width: 40%;
	padding: 0;
}
#info legend {
	font-weight: 700;
	font-size: 1.25em;
	padding: .75em 0 .25em 0;
}
#info textarea {
	width: 99%;
}
#sendform {
	text-align: left;
	vertical-align: bottom;
	float: none;
	clear: both;
	border: none;
	padding: .75em 0 .25em 0;
	margin: 0;
}
#sendform legend {
	font-weight: 700;
	font-size: 1.25em;
	padding: .75em 0 .25em 0;
}
#formleft_col {
	text-align: right;
	float: left;
	width: 47%;
	border: none;
	padding: 0;
}
#formright_col {
	float: right;
	width: 20%;
	text-align: right;
	padding: 6em 0 0 0;
	margin: 0;
}
#formright_col input {
	margin: 0;
	vertical-align: bottom;
}
#recaptcha_widget_div {
	margin-left: -3px;
}
section	{
	font-family: 'Comfortaa', cursive;
	font-weight: 400;
	color: #000;
	float: none;
	clear: both;
	/*background-color: #ccc;*/
	padding: 1em 2em 0 2em;
	text-align: left;
}
footer {
	float: none;
	clear: both;
	background-color: #99cc33;
	color: #000;
	text-align: center;
	font-family: 'Comfortaa', cursive;
	font-weight: 400;
	padding: 1em 2em 1em 2em;
}
#footernav {
	float: none;
	clear: both;
	text-align: right;
	/*color: #000;*/
	font-family: 'Comfortaa', cursive;
	font-weight: 400;
	padding: 0 2em 0 2em;
}
header a:link {
    color: #fff;
    text-decoration: none;
   transition-duration: .1s;
   transition-timing-function: ease-in;
   transition-delay: 0s;
   -webkit-transition-property: all;
   -webkit-transition-duration: .1s;
   -webkit-transition-timing-function: ease-in;
   -webkit-transition-delay: 0s;
}
header a:visited {
    color: #fff;
    text-decoration: none;
   transition-duration: .1s;
   transition-timing-function: ease-in;
   transition-delay: 0s;
   -webkit-transition-property: all;
   -webkit-transition-duration: .1s;
   -webkit-transition-timing-function: ease-in;
   -webkit-transition-delay: 0s;
}
header a:hover {
    color: #99cc33;
    text-decoration: none;
   transition-duration: .1s;
   transition-timing-function: ease-in;
   transition-delay: 0s;
   -webkit-transition-property: all;
   -webkit-transition-duration: .1s;
   -webkit-transition-timing-function: ease-in;
   -webkit-transition-delay: 0s;
}
header a.active {
    color: #99cc33;
    text-decoration: none;
   transition-duration: .1s;
   transition-timing-function: ease-in;
   transition-delay: 0s;
   -webkit-transition-property: all;
   -webkit-transition-duration: .1s;
   -webkit-transition-timing-function: ease-in;
   -webkit-transition-delay: 0s;
}
#footernav a:link {
    color: #ccc;
    text-decoration: none;
   transition-duration: .1s;
   transition-timing-function: ease-in;
   transition-delay: 0s;
   -webkit-transition-property: all;
   -webkit-transition-duration: .1s;
   -webkit-transition-timing-function: ease-in;
   -webkit-transition-delay: 0s;
}
#footernav a:visited {
    color: #ccc;
    text-decoration: none;
   transition-duration: .1s;
   transition-timing-function: ease-in;
   transition-delay: 0s;
   -webkit-transition-property: all;
   -webkit-transition-duration: .1s;
   -webkit-transition-timing-function: ease-in;
   -webkit-transition-delay: 0s;
}
#footernav a:hover {
    color: #99cc33;
    text-decoration: none;
   transition-duration: .1s;
   transition-timing-function: ease-in;
   transition-delay: 0s;
   -webkit-transition-property: all;
   -webkit-transition-duration: .1s;
   -webkit-transition-timing-function: ease-in;
   -webkit-transition-delay: 0s;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#wrapper {
		width: 100%;
	}
	#contact {
		width: 100%;
	}
	#contact label {
		float: none;
		width: 100%;
		display: block;
		padding: 0;
		margin: .25em 0 .25em 0;
		font-size: 2em;
	}
	#contact input {
		float: none;
		width: 99%;
		display: block;
		margin: 0;
		padding: 0;
		font-size: 2em;
	}
	#info {
		float: none;
		width: 99%;
		margin: 0;
		padding: 0;
	}
	#formleft_col {
		float: left;
		width: 50%;
		font-size: 2em;
	}
	#formright_col {
		float: right;
		width: 25%;
		text-align: right;
		padding: 2.5em 1em 0 0;
		font-size: 2em;
	}
	#contact legend, #info legend, #sendform legend {
		text-align: left;
		padding: 0;
		font-size: 3em;
	}
	section	{
		padding: .5em;
	}
	nav {
		font-family: 'Comfortaa', cursive;
		font-weight: 300;
		font-size: 2em;
		padding: 0 .15em 0 0;
		color: #99cc33;
		text-align: center;
	}
	nav ul li {
		padding: 0 .35em 0 .35em;
	}
	#top {
		padding: 6em .15em 0 .15em;
	}
	.logo {
		float: none;
		width: 100%;
		height: 30vw;
		background-color: #fff;
		background-image: url(images/logo.png);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
	}
	.graphic {
		position: relative;
		visibility: hidden;
		height: 0;
		padding: 0;
		margin: 0;
		z-index: -1;
		background: none;
	}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	#wrapper {
		width: 100%;
	}
	#contact {
		width: 100%;
	}
	#contact label {
		float: none;
		width: 100%;
		display: block;
		padding: 0;
		margin: .25em 0 .25em 0;
		font-size: 2em;
	}
	#contact input {
		float: none;
		width: 99%;
		display: block;
		margin: 0;
		padding: 0;
		font-size: 2em;
	}
	#info {
		float: none;
		width: 99%;
		margin: 0;
		padding: 0;
	}
	#formleft_col {
		float: left;
		width: 50%;
		font-size: 2em;
	}
	#formright_col {
		float: right;
		width: 25%;
		text-align: right;
		padding: 2.5em 1em 0 0;
		font-size: 2em;
	}
	#contact legend, #info legend, #sendform legend {
		text-align: left;
		padding: 0;
		font-size: 3em;
	}
	section	{
		padding: .5em;
	}
	nav {
		font-family: 'Comfortaa', cursive;
		font-weight: 300;
		font-size: 2em;
		padding: 0 .15em 0 0;
		color: #99cc33;
		text-align: center;
	}
	nav ul li {
		padding: 0 .35em 0 .35em;
	}
	#top {
		padding: 6em .15em 0 .15em;
	}
	.logo {
		float: none;
		width: 100%;
		height: 30vw;
		background-color: #fff;
		background-image: url(images/logo.png);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
	}
	.graphic {
		position: relative;
		visibility: hidden;
		height: 0;
		padding: 0;
		margin: 0;
		z-index: -1;
		background: none;
	}
}
@media only screen  and (max-width : 648px) {
	#wrapper {
		width: 100%;
	}
	section	{
		padding: .5em;
		font-size: 1em;
	}
	nav {
		font-family: 'Comfortaa', cursive;
		font-weight: 300;
		font-size: .75em;
		padding: 0 .15em 0 0;
		color: #99cc33;
		text-align: center;
	}
	nav ul li {
		padding: 0 .35em 0 .35em;
	}
	#top {
		padding: 3em .15em 0 .15em;
	}
	.logo {
		float: none;
		width: 100%;
		height: 20vw;
		background-color: #fff;
		background-image: url(images/logo.png);
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center;
	}
	.graphic {
		position: relative;
		visibility: hidden;
		height: 0;
		padding: 0;
		margin: 0;
		z-index: -1;
		background: none;
	}
	#contact {
		width: 100%;
	}
	#contact label {
		float: none;
		width: 100%;
		display: block;
		padding: 0;
		margin: .25em 0 .25em 0;
		font-size: 1em;
	}
	#contact input {
		float: none;
		width: 99%;
		display: block;
		margin: 0;
		padding: 0;
		font-size: 1em;
	}
	#info {
		float: none;
		width: 99%;
		margin: 0;
		padding: 0;
	}
	#formleft_col {
		float: none;
		width: 100%;
		font-size: 2em;
	}
	#formright_col {
		float: none;
		width: 100%;
		text-align: center;
		padding: 1em 0 0 0;
		font-size: 2em;
	}
	#recaptcha_widget_div {
		position: relative;
		left: 20px;
	}
	#contact legend, #info legend, #sendform legend {
		text-align: left;
		padding: 0;
		font-size: 1.5em;
	}
}