@charset "UTF-8";
/* CSS Document */

body {
	background:#B6D35D;
}

/*------- LOGO ---------*/

@media (min-width:500px) {
	
#header {
	height:250px;
	max-width:900px;
	margin: 0 auto;
}
	
	#logo {
		width:1200px;
		height:150px;
		margin:-50px 0 auto 20%;
	}
	
	#logo .paint {
		height:150px;	
	}
	
	#logo img.roller {
		width: 244px; 
		height: 182px;
		margin:-7px 0 -25px -240px;	
	}
	
	#logo img.name {
		width: 375px;
		height: 153px;
		margin:-1px auto -2px -3px;  	
	}

}

@media (max-width:499px) {
	
	#header {
	height:200px;
	max-width:499px;
	margin: 0 auto;
	}
	
	
	#logo {
		width:600px;
		height:100px;
		margin:-15px 0 auto 20%;
	}
	
	#logo .paint {
		height:100px;	
	}
	
	#logo img.roller {
		width: 162px; 
		height: 122px;
		margin:-5px 0 -17px -160px;	
	}
	
	#logo img.name {
		width: 250px;
		height: 102px;
		margin:-1px auto -1px -2px;  	
	}

}



#logo {
	-ms-transform: rotate(-10deg); /* IE 9 */
    -webkit-transform: rotate(-10deg); /* Safari */
    transform: rotate(-10deg);
	float:left;
}

#logo .paint {
    background:#0066A2;
    display: inline-block;
	float:right;
}
#logo .paint {
    -webkit-animation: w100 1.2s ease-out ;
	animation: w100 1.2s ease-out;
}
#logo .w100 {
    width: 100%;
}
@-webkit-keyframes w100 {
    0% { width: 1%; }
    100% { width: 100%; }
}

@keyframes w100 {
    0% { width: 1%; }
    100% { width: 100%; }
}

.opacity {
	-webkit-animation: v100 2.4s ease-in-out;
	animation: v100 2.4s ease-in-out;
}

.v100 {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

@-webkit-keyframes v100 {
    0% { opacity: 0.0; filter: alpha(opacity=0); }
    50% { opacity: 0.0; filter: alpha(opacity=0); }
	100% { opacity: 1.0; filter: alpha(opacity=100);  }
}

@keyframes v100 {
    0% { opacity: 0.0; filter: alpha(opacity=0); }
    50% { opacity: 0.0; filter: alpha(opacity=0); }
	100% { opacity: 1.0; filter: alpha(opacity=100);  }
}
/*------- END LOGO ---------*/


/*------- NAV ---------*/
@media (max-width:899px) {
#nav ul {
	float:right;
	margin-top:80px;
	display:block;
	clear:both;
	list-style-type:none;
	text-align:center;
}

#nav li {
	display:inline-block;
	margin: 0;
}

#nav li a {

	font-size: 12px;
	font-weight:700;
	text-decoration: none;
	padding:6px 8px;
	background:#FFFFFF;
	color: #B6D35D;

}

#nav li a:hover {
	background: #0066A2;
	color:#FFFFFF;
	transition: 1s;
    -webkit-transition: 1s; /* Safari 3.1 to 6.0 */
}

}
@media (min-width:900px) {
#nav {
	-ms-transform: rotate(-10deg); /* IE 9 */
    -webkit-transform: rotate(-10deg); /* Safari */
    transform: rotate(-10deg);
	
	float:right;
	margin-top:6px;
	display:block;
	clear:both;
}

#nav ul {
	list-style-type:none;
	text-align:center;
}

#nav li {
	display:inline-block;
	
}

#nav li a {

	font-size: 12px;
	font-weight:700;
	text-decoration: none;
	padding:6px 8px;
	background:#B6D35D;
	color: #000000;
	border-left:solid 1px #0066A2;

}

.first{ 
	border-left:none !important;
}

#nav li a:hover {
	background: #0066A2;
	color:#FFFFFF;
	transition: 1s;
    -webkit-transition: 1s; /* Safari 3.1 to 6.0 */
}

}

/*------- END NAV ---------*/

/*------- CONTENT ---------*/

#content {
	max-width:900px;
	width:100%;	
	margin: 0 auto;
}

#content h1 { 
	text-align:center;
	font-size:16px;
	margin:20px auto 10px;
	font-weight:600;
}

#content h2 {
	text-align: center;
	font-size:50px;
	color:#FFFFFF;
	text-shadow: 0 0 7px #666666;
}

#content h4 {
	text-align: center;
	font-size:34px;
	color:#FFFFFF;
	text-shadow: 0 0 7px #666666;
}

#content p {
	margin: 0 0 15px 0; 	
}

#content hr {
	border:none;
	clear: both;
	margin:20px;
}

#content a {
	color:#0066A2;
	font-weight:bold;
}

#content a:hover {
	color:#FFFFFF;
	text-decoration:none;
	background: #0066A2;	
}

@media (min-width:500px) {

.half{
	width:46%;
	padding:2%;
	float: left;
	position:relative;
	display:inline-block;
}
	
.reference {
	width:260px;
	height:320px;
	padding:40px 90px 40px 50px;
	background-image:url(../images/reference.svg);
	background-repeat:no-repeat;
	background-size:contain;

}
	
}

@media (max-width:499px) {

.half{
	width:94%;
	padding:3%;
	position:relative;
	display:inline-block;
}
	
.reference {
	width:260px;
	height:320px;
	padding:40px 90px 40px 50px;
	background-image:url(../images/reference.svg);
	background-repeat:no-repeat;
	background-size:contain;
	margin-left:-3%;
}

}

.reference h3 {
	color:#FFFFFF;
	font-size:22px;
	margin-bottom:5px;
	font-weight:bold;	
}
.reference p {
	color:#FFFFFF;	
}

/*------- END CONTENT ---------*/

/* -- FORM -- */

form {
	margin:20px 0;	
}

label {
	display:block;
	postion:relative;
	clear:right;
	float:right;
	vertical-align:center;
	font-size:14px;
	color:#000;
	width:100%;
	text-align:right;
}

label.top {
	vertical-align:top !important;	
	
}

input {
	float:right;
	font-size:14px;
	width:72%;
	padding:12px 2%;
	margin:-10px 2% 24px 2%;
	border:none;
	background:#D3E59E;
	color: #0066A2;
}

textarea {
	float:right;
	font-size:16px;
	width:72%;
	max-width:72%;
	height:200px;
	padding:8px 2%;
	margin:-10px 2% 24px 2%;
	border:none;
	background:#D3E59E;
	color: #0066A2;
}

input:focus, textarea:focus { 
	outline: #000; 
	background:#FFFFFF;
}

input[type=submit] {
	color: #FFFFFF;
	font-size:16px;
	width:76%;
	padding:12px 2%;
	margin:-10px 2% 24px 2%;
	border:none;
	background:#0066A2;
	
	-webkit-box-shadow: 1px 1px 5px 1px #000;
	box-shadow: 1px 1px 5px 1px #000;
	
	
}

input[type=submit]:hover {
	background: #00;
	color:#FFFFFF;
	-webkit-box-shadow: 0px 0px 5px 1px #000;
	box-shadow: 0px 0px 5px 1px #000;
	transition: 1s;
    -webkit-transition: 1s; /* Safari 3.1 to 6.0 */
}
/* -- END FORM -- */


#footer p {
	font-size:10px;
	text-align:center;
	
}