﻿/***** BEGIN RESET *****/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0; font-family: 'Roboto Condensed', sans-serif;
}

ol, ul, li {list-style: none;}
body, html {height: 100%; overflow-x:hidden;}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address, img {  display: block;  } 

/***** END RESET *****/

/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {clear: both;}
.cf {*zoom: 1;}

/*ul.breadcrumb {padding:10px 16px;list-style:none;background-color:#f5f5f5;border:1px solid #ddd;margin-top:20px;}
ul.breadcrumb li {display:inline;font-size:16px;}
ul.breadcrumb li+li:before {padding:8px;color:#000;content:"/\00a0";}
ul.breadcrumb li a {color:#000;text-decoration:none;font-weight:700;}
ul.breadcrumb li a:hover {color:#000;text-decoration:underline;}*/

h1, h2, h3, h4, h5 {font-weight:700;line-height:normal;margin-bottom:5px; font-family: 'Oswald', sans-serif; text-transform:uppercase;}
h1 {font-size:30px;}
h3 {font-size:22px; color:#fff;}
h4 {font-size:18px; color:#9bcf33; margin-top:10px;}
strong {font-weight:700;}
p, ul li {font-weight:300;font-size:1.1em;line-height:1.6em;}

a:link, a:active, a:visited {text-decoration:none;}

hr {border:1px solid #ccc;}

#sitewidth {width:90%; margin:0 auto;}
.wrapper {width:75%; text-align:center; margin:60px auto;}

/* header styles */
header {max-width:100%;background:#9bcf33; text-align:right; height:130px; position:relative;} 
header a {font-family: 'Oswald', sans-serif; font-size:22px; color:#fff; font-weight:400;}
.header {overflow:hidden;max-width:35%;width:100%;display:inline-block;float:left;}
#header-skew {width:100%;
-webkit-transform: skewX(-20deg) skewY(0deg);
-moz-transform: skewX(-20deg) skewY(0deg);
-o-transform: skewX(-20deg) skewY(0deg);
transform: skewX(-20deg) skewY(0deg);
transform-origin:top left;
background:#000;
overflow: hidden;
position: relative;
height:130px;
}
.logo {padding:10px 0;width:50%;height:auto; position:absolute; left:90px; top:0px; z-index:9999999;}
.logo img {max-width:100%;height:auto;}

.main {width:100%;}
.main img {width:100%;}
.slidebtn {position:absolute; top:225px; background:#9bcf33; width:10%; left:45%; right:45%; text-align:center; color:#fff; padding:5px 10px; font-family: 'Oswald', sans-serif; }

.box {background:#ebebeb; padding:20px 0; margin-bottom:10px;}

/* BLURBS */
.blurbs {background:#000 url("../siteart/1773204.jpg") no-repeat; color:#fff;}
#skew-col-1 {background-color:rgba(155, 207, 51, 0.5); display:inline-block; width:33.33%; vertical-align:top; padding:30px 0;
-webkit-transform: skewX(-20deg) skewY(0deg);
-moz-transform: skewX(-20deg) skewY(0deg);
-o-transform: skewX(-20deg) skewY(0deg);
transform: skewX(-20deg) skewY(0deg);
transform-origin:top left;
overflow: hidden;
position: relative;
}

#skew-col-2 {display:inline-block; width:33.33%; vertical-align:top; padding:30px 0; margin-left:-4px;}
#blurb-no-skew {width:80%; margin:0 auto;}

#skew-col-3 {background-color:rgba(166, 223, 52, 0.4); display:inline-block; width:33.33%; vertical-align:top; padding:30px 0; margin-left:-4px;
-webkit-transform: skewX(-20deg) skewY(0deg);
-moz-transform: skewX(-20deg) skewY(0deg);
-o-transform: skewX(-20deg) skewY(0deg);
transform: skewX(-20deg) skewY(0deg);
transform-origin:bottom right;
overflow: hidden;
position: relative;
}

#blurb {width:70%; margin:0 auto;
-webkit-transform: skewX(20deg) skewY(0deg);
-moz-transform: skewX(20deg) skewY(0deg);
-o-transform: skewX(20deg) skewY(0deg);
transform: skewX(20deg) skewY(0deg)
}

button {background:#000; color:#fff; font-family: 'Oswald', sans-serif; border:none; padding:5px 20px; margin-top:10px;}

/* CTA */
.contactwrap {background:#000 url("../siteart/picjumbo.com_IMG_9998.jpg") no-repeat; padding:7% 0 0;}
.contactbtn {border:1px solid #9bcf33; padding:10px 0; text-align:center; color:#fff; width:40%; margin:0 auto 7%; font-family: 'Oswald', sans-serif; font-weight:600; font-size:26px;}

/* CONTACT FORM */
.contactform {background-color:rgba(0, 0, 0, 0.7); padding:50px 0 60px;}
.col-1 {display:inline-block; width:60%; vertical-align:middle;}
.col-2 {display:inline-block;float:right; width:35%; vertical-align:middle; text-align:center; margin-top:20px;}



/* FORM */
#formpage {vertical-align:top;}
#formpage div {vertical-align:top; padding:5px 5px;}
.col-4 {display:inline-block; width:23%; margin-right:.25%; vertical-align:top;}
.form-col-3 {display:inline-block; width:30%; vertical-align:top;}
#formpage input {padding:6px 5px; border:1px solid #8e8d8d; color:#000; font-size:12px;}
#formpage textarea {padding:6px 5px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px;}

 
/* selects have similar styles to input & textarea fields, but with no padding. Text in a dropdown select is positioned differently */
#formpage select {border:1px solid #8e8d8d; color:#000; vertical-align:middle; font-size:12px; line-height:normal; padding:5px; width:100%;}
#formpage input  {width:100%;}
#formpage input.larger  {width:100%;}
#formpage textarea {width:100%; height:85px;}

#formpage input.checkbox {padding:0;  border:0; margin:0 5px 0 0; width:13px; height:13px; display:inline;  background-color:#fff;}
#formpage input.radio {padding:0;  border:0; margin:0 5px 0 0; width:15px; height:15px; display:inline;}

/* focus states of various types of fields */
#formpage input:focus,#formpage textarea:focus,#formpage select:focus {background:#FFF;  color:#000; border:1px solid #9bcf33; outline-style:none;}
#formpage input.radio:focus,#formpage input.checkbox:focus {background:none;  border:0; outline-style:none;}
 
/*control the Captcha */
.captchawrap {width:50%; margin:0 auto;}
#captcha {width:100%; margin:0 auto; text-align:center;}
.CaptchaPanel {margin:0 auto !important; padding:0 0 0 0 !important; text-align: center !important; line-height:normal !important;}
.CaptchaImagePanel {margin:0 0 0 0; padding:0 0 0 0;}
.CaptchaMessagePanel {padding:0 0 0 0 !important; margin:0 auto !important; font-weight:normal !important; font-size:12px; line-height:14px; color:#fff;}
.CaptchaAnswerPanel {margin:0 auto; padding:2px 0px 2px 0px !important;}
.CaptchaWhatsThisPanel {line-height:0; margin:0 0 0 0; padding:8px 0 8px 0 !important; font-size:12px;}
.CaptchaWhatsThisPanel a {color:#000;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;}  
.CaptchaImage {width:30%; margin: 10px auto 0;}

a.button {width:80%; margin:0 auto; font-weight:bold; text-transform:uppercase; color:#fff; height:28px; line-height:28px; display:inline-block; text-align:center; background:linear-gradient(#9bcf33, #89b82a);margin-top:0; font-family: 'Oswald', sans-serif;}
a.button:hover {background-position:bottom; text-decoration:none; background:linear-gradient(#89b82a, #9bcf33);}

input.button{width:80%; font-weight:bold; text-transform:uppercase; color:#fff!important; height:28px!important; line-height:0px!important; text-align:center; font-size:16px!important; background:linear-gradient(#9bcf33, #89b82a); border:0; margin:2px auto; font-family: 'Oswald', sans-serif;}
input.button:hover {background-position:bottom; height:28px; cursor:pointer; background:linear-gradient(#89b82a, #9bcf33);}


a.button-col-1 {width:100%; margin:0 auto; font-weight:bold; text-transform:uppercase; color:#fff; height:28px; line-height:28px; display:inline-block; text-align:center; background:linear-gradient(#9bcf33, #89b82a);margin-top:0; font-family: 'Oswald', sans-serif;}
a.button-col-1:hover {background-position:bottom; text-decoration:none; background:linear-gradient(#89b82a, #9bcf33);}




/* FOOTER */
#colorblock {background:#000; color:#fff; font-size:14px; padding:10px 0;}
#colorblock a {font-size:14px; color:#fff;}
footer {background:#9bcf33; color:#fff;}
footer p {font-weight:300;font-size:14px;line-height:1.4em;}
footer a:link, footer a:active, footer a:visited {text-decoration:none;color:#fff;}
footer a:hover {text-decoration:none;color:#98999a;}

.footleft {float:left; padding:30px 0; width:60%;}
.col-3 {display:inline-block; width:23%; margin-right:7%; vertical-align:top;}
.footright {float:right; width:40%; text-align:center;}
.footerskew {width:100%; height: auto;
-webkit-transform: skewX(-20deg) skewY(0deg);
-moz-transform: skewX(-20deg) skewY(0deg);
-o-transform: skewX(-20deg) skewY(0deg);
transform: skewX(-20deg) skewY(0deg);
transform-origin:bottom right;
background:#88b729;
overflow: hidden;
position: relative;
}

.footerlogo {
padding:30px 0% 30px 25%;max-width:100%;height:auto;
-webkit-transform: skewX(20deg) skewY(0deg);
-moz-transform: skewX(20deg) skewY(0deg);
-o-transform: skewX(20deg) skewY(0deg);
transform: skewX(20deg) skewY(0deg)

}



/************************************************ Responsive Styles **/

@media screen and (max-width: 1680px){
.logo {left:40px;}
.footerlogo {padding:30px 0% 30px 20%;}

	.form-col-3 {width:45%;}
}

@media screen and (max-width: 1540px){
#header-skew {width:100%;
-webkit-transform: skewX(0deg) skewY(0deg);
-moz-transform: skewX(0deg) skewY(0deg);
-o-transform: skewX(0deg) skewY(0deg);
transform: skewX(0deg) skewY(0deg);
height:130px;}

.logo {left:35px;}
	
.slidebtn {top:150px; width:20%; left:40%; right:40%;}	
	
#skew-col-1 {
-webkit-transform: skewX(0deg) skewY(0deg);
-moz-transform: skewX(0deg) skewY(0deg);
-o-transform: skewX(0deg) skewY(0deg);
transform: skewX(0deg) skewY(0deg);
transform-origin:top left;
overflow: hidden;
position: relative;
}
	
#skew-col-3 {
-webkit-transform: skewX(0deg) skewY(0deg);
-moz-transform: skewX(0deg) skewY(0deg);
-o-transform: skewX(0deg) skewY(0deg);
transform: skewX(0deg) skewY(0deg);
transform-origin:top left;
overflow: hidden;
position: relative;
}
	
#blurb {width:80%; 
-webkit-transform: skewX(0deg) skewY(0deg);
-moz-transform: skewX(0deg) skewY(0deg);
-o-transform: skewX(0deg) skewY(0deg);
transform: skewX(0deg) skewY(0deg)}
	
.footerskew {width:100%; height: auto;
-webkit-transform: skewX(0deg) skewY(0deg);
-moz-transform: skewX(0deg) skewY(0deg);
-o-transform: skewX(0deg) skewY(0deg);
transform: skewX(0deg) skewY(0deg);
transform-origin:bottom right;
background:#88b729;
overflow: hidden;
position: relative;}

.footerlogo {
padding:30px 0% 30px 25%;max-width:100%;height:auto;
-webkit-transform: skewX(0deg) skewY(0deg);
-moz-transform: skewX(0deg) skewY(0deg);
-o-transform: skewX(0deg) skewY(0deg);
transform: skewX(0deg) skewY(0deg)}
	
.col-4 {width:31%;}
	
.footleft {padding:30px 0 15px;}
.footerlogo {padding:30px 0 30px 12%;}
}

@media screen and (max-width: 1280px){
	.header {height:100px;}
header {height:100px;}
.logo {left:25px;}
.logo img {width:60%;}
	
.slidebtn {top:125px;}	
	
.contactbtn {width:60%;}
.col-4 {width:46%;}	
	
.footleft {display:block; width:100%; padding-bottom:20px;}
.col-3 {width:26%; margin-right:6%;}
.footright {display:none;}
	
}

@media screen and (max-width: 1180px){

.wrapper {width:90%; margin:20px auto;}

.slidebtn {top:100px;}	
	
}

@media screen and (max-width: 1024px){
h1 {font-size:20px;}
h3 {font-size:18px;}
p, ul li {font-size:1em;line-height:1.4em;}

.slidebtn {top:90px; font-size:14px;}	

.contactbtn {width:75%; font-size:18px;}

.hosted-content #listings-title {font-size:1.2rem!important;}
	
.form-col-3 {display:block; width:100%;}

}



@media screen and (max-width: 767px){
h3 {font-size:16px;}

header a {font-size:18px;}
.logo {left:10px;top:12px;}
.slidebtn {top:60px; width:40%; left:30%; right:30%;}	

#skew-col-1 {display:block; width:100%;}
#skew-col-2 {display:block; width:100%;}
#skew-col-3 {display:block; width:100%;}

.contactbtn {width:90%; font-size:16px;}

.col-1 {display:block; width:96%;}
.col-2 {display:block; width:100%;}
.col-4 {display:block; width:100%; margin-right:0;}	

.col-3 {display:block; width:100%; margin-bottom:10px;}	
	
.captchawrap {width:50%;}	
.CaptchaImage {width:100%; margin: 10px auto 0;}	
	
	
}
 
 

@media screen and (max-width: 500px){
h1 {font-size:16px;}
h3 {font-size:13px;}
p, ul li {font-size:1em;line-height:1.3em;}

header {height:auto;}
.logo {width:80%; left:10%; top:0px; margin:0 auto; padding-bottom:0;}
.logo img {width:100%;}
.header {height:auto; max-width:100%; float:none; margin-bottom:10px;}
.slidebtn {display:none;}	

.contactbtn {width:90%; font-size:10px;}
	
.captchawrap {width:75%;}
	.CaptchaImage {margin-bottom:0;}	

	
}