﻿/* BEGIN RESET */
* {background:transparent; border:0; margin:0; padding:0; font-family:'roboto_condensedregular', Arial, sans-serif; font-style:normal; line-height:normal; -webkit-text-size-adjust: none;}
ol, ul, li {list-style: none; font-size:15px; line-height:25px;}
.clear {clear: both; height:0px; margin:0;}

@font-face {
    font-family: 'bebas_neuebold';
    src: url('/fonts/bebasneue_bold-webfont.eot');
    src: url('/fonts/bebasneue_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/bebasneue_bold-webfont.woff2') format('woff2'),
         url('/fonts/bebasneue_bold-webfont.woff') format('woff'),
         url('/fonts/bebasneue_bold-webfont.ttf') format('truetype'),
         url('/fonts/bebasneue_bold-webfont.svg#bebas_neuebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensedregular';
    src: url('../fonts/RobotoCondensed-Regular-webfont.eot');
    src: url('../fonts/RobotoCondensed-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/RobotoCondensed-Regular-webfont.woff') format('woff'),
         url('../fonts/RobotoCondensed-Regular-webfont.ttf') format('truetype'),
         url('../fonts/RobotoCondensed-Regular-webfont.svg#roboto_condensedregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {font-family:'bebas_neuebold', Arial, sans-serif; font-size:60px; color:#fff; line-height:60px;}
h2 {font-family:'bebas_neuebold', Arial, sans-serif; font-size:36px; color:#f15c22;}
h3 {font-family:'bebas_neuebold', Arial, sans-serif; font-size:32px; color:#f15c22; margin-bottom:5px;}
h4 {font-size:18px; color:#f15c22;}
h5 {font-family:'bebas_neuebold', Arial, sans-serif; font-size:24px; margin-top:30px;}

p {font-size:16px; line-height:24px; margin-bottom:10px;}

.style1 {font-size:16px; line-height:24px; margin-bottom:20px; font-style:italic; color:#f15c22;}

.hosted-content #listings-title {color:#000 !important;}

a {text-decoration:none;}

/* BASIC STYLES */
#contentwrap {width:90%; margin:0 auto;}
#pagewrap {width:75%; margin:2% auto;}

/* HEADER */
header {background: url(../siteart/footerbg.jpg) repeat; position:fixed; width:100%; z-index:999999999999;}

.navwrap {float:left; width:70%;}
.socialmedia {float:right; width:20%; text-align:right;}
.socialmedia img {width:10%; margin:2.5% .5% 1%;}

/* CONTENT STYLES */
#main {width:100%; margin-bottom:-5px; padding-top:50px;}
.mainimg {width:100%;}
.tagline {position:absolute; top:125px; right:100px; color:#f15c22; font-size:26px; z-index:400; text-align:right;}
.tagline img {width:55%;}
.tagline a {color:#f15c22;}

.pageleft {float:left; width:47%; border:1px solid #f15c22; padding:1%; margin-bottom:2%;}
.pageright {float:right; width:47%; border:1px solid #f15c22; padding:1%; margin-bottom:2%;}

.threecolumn {float:left; width:30%; border:1px solid #f15c22; height:300px; padding:1%; margin-right:1%;}

.marketing img {height:auto; width:49%; margin:0 .5% .5% 0; vertical-align:top;}
.marketing2 img {height:auto; width:32%; margin:0 .5% .5% 0; vertical-align:top;}
.marketing3 img {height:auto; width:97.5%; margin:0 0 .5% 0;}

.left {float:left; width:30%;}
.left img {width:50%;}
.left a {color:#f15c22;}
.right {float:right; width:20%;}
.right img {width:100%;}

#contactwrap {width:75%; margin:2% auto;}
#contactwrap a {color:#f15c22;}
.contactright {float:right; width:40%;}
.contactright img {width:100%;}
.contactleft {float:left; width:40%;}

.wrapper {border-bottom:1px solid #000; padding:10px 0; margin:10px auto;}
.invleft {float:left; width:15%;}
.invright {float:right; width:85%;}
#gal_container {padding:0; margin:0 auto;}
#gal_container img {height:150px; margin:0 5px 5px 0; border:1px #666666 solid;}

#colorblock {background: url(../siteart/texture.jpg) repeat; padding:1.25% 0; line-height:30px; color:#fff;}
.formfield {width:31.3%; float:left; margin:5px 25px 5px 0; font-family:'bebas_neuebold', Arial, sans-serif; color:#000;}
   
#formpage input  {width:100%; background:#fff; padding:5px; margin:.25% 0; border:1px solid #000;}
#formpage input.larger  {width:100%; background:#fff; padding:5px; margin:.25% 0;}
#formpage select {width:101.9%; background:#fff; padding:5px; margin:.25% 0; border:1px solid #000;}
#formpage textarea {width:96.85%; height:85px; background:#fff; padding:5px; border:1px solid #000;}

/* focus states of various types of fields */
#formpage input:focus,#formpage textarea:focus,#formpage select:focus {background:#fff; border:1px solid #f15c22;}

#formpage input.button,#formpage input.button:focus {float:left; width:100px;  margin:0; padding:7px 0; background:#f15c22; border:2px #f15c22 solid; font-size:22px; line-height:14px; color:#fff; text-transform:uppercase; font-family:'bebas_neuebold', Arial, sans-serif; }
#formpage input.button:hover {
	background: #f15c22; 
    background: -webkit-linear-gradient(#f15c22, #d94b14);
    background: -o-linear-gradient(#f15c22, #d94b14);
    background: -moz-linear-gradient(#f15c22, #d94b14); 
    background: linear-gradient(#f15c22, #d94b14);
	border:2px #f15c22 solid;
} 

/*control the Captcha */
.CaptchaPanel {margin:0 0 0 0 !important; padding:0 0 0 0 !important; text-align: left !important; line-height:normal !important;}
.CaptchaImagePanel {margin:15px 0 0 0; padding:0 0 0 0;}
.CaptchaMessagePanel {padding:0 0 0 0 !important; margin:0 0 0 0 !important; font-weight:normal !important; font-size:12px; line-height:14px;}
.CaptchaAnswerPanel {margin:0 0 0 0; padding:2px 0px 2px 0px !important;}
.CaptchaWhatsThisPanel {line-height:0; margin:0 0 0 0; padding:3px 0 15px 0 !important;}
.CaptchaWhatsThisPanel a {color:#fff; line-height:12px; font-size:12px;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;} 
.captcha {width:24%;}

/* ICON BUTTONS */
.homeinventory {width:33.33%; float:left; color:#fff;}
.homeinventory img {width:100%;}

.hovereffect {width: 100%; height: 100%; float: left; overflow: hidden; position: relative; text-align: left; cursor: default;}
.hovereffect .overlay {width: 75%; position: absolute; overflow: hidden; top: 75px; left: 75px;}

.hovereffect img {display: block; position: relative; -webkit-transition: all 0.4s ease-in; transition: all 0.4s ease-in;}
.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
  filter: grayscale(1) blur(3px);
  -webkit-filter: grayscale(1) blur(3px);
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.hovereffect a.info {display:inline-block; font-size:28px; font-weight:800; width:90%; color:#fff; line-height:30px; padding-top:2%; text-align:center;}

.btn {font-family:'bebas_neuebold', Arial, sans-serif; font-size:20px; background:#f15c22; width:25%; padding:5px 0;}
.btn:hover {
	background:#background: #f15c22; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#f15c22, #d94b14); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#f15c22, #d94b14); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#f15c22, #d94b14); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#f15c22, #d94b14); /* Standard syntax */ 
}

/* FOOTER */
footer {background: url(../siteart/footerbg.jpg) repeat; padding:1.5% 0;}
footer a {color:#f15c22;}
.footerleft {float:left; width:38%;}
.bottomnav a:hover {color:#000;}
a.footerlink:link, a.footerlink:visited, a.footerlink:active{font-size:11px; color:#000;}
a.footerlink:hover {font-size:11px; color:#f15c22;}
.footertext{font-size:11px; color:#000;}
.smallfootertext{font-size:11px; color:#000;}
.divfooter {width:100%;}

.footerright {float:right; width:28%; text-align:right;} 
.footerright img {height:100px; width:auto; margin-top:10px; display:inline-block;}

/************************************************ Responsive Styles **/
@media screen and (max-width: 1880px) and (min-width:1481px) {
h1 {font-size:36px; line-height:38px;}
h2 {font-size:30px; line-height:41px;}
h3 {font-size:28px; line-height:41px;}

.socialmedia img {width:13%;}
.tagline {top:120px; left:50px; font-size:22px;}
.tagline img {width:18%;}

.formfield {width:31%;}

.hovereffect .overlay {top: 25px; left: 50px;}
.btn {width:50%;}

.threecolumn {height:425px;}

.footerleft {width:55%;}
}

@media screen and (max-width: 1480px) and (min-width:1281px) {
h1 {font-size:36px; line-height:38px;}
h2 {font-size:30px; line-height:41px;}
h3 {font-size:28px; line-height:41px;}

.socialmedia img {width:13%;}
.tagline {top:120px; left:50px; font-size:22px;}
.tagline img {width:15%;}

.formfield {width:31%;}

.hovereffect .overlay {top: 25px; left: 50px;}
.btn {width:50%;}

.threecolumn {height:425px;}

.footerleft {width:55%;}
}

@media screen and (max-width: 1280px) and (min-width:1025px) {
h1 {font-size:32px; line-height:38px;}
h2 {font-size:28px; line-height:41px;}
h3 {font-size:24px; line-height:41px;}

#pagewrap {width:90%; margin:5% auto;}
.navwrap {width:70%}
.socialmedia {margin-top:8px;}
.socialmedia img {width:13%;}
.tagline {top:115px; left:50px; font-size:18px;}
.tagline img {width:15%;}
.tagline a {font-size:18px;}

.formfield {width:30%;}
.captcha {width:40%;}
#formpage textarea {width:95%;}

.hovereffect .overlay {top: 10px; left: 40px; width:85%; font-size:14px;}
.btn {width:50%; font-size:16px; }

.threecolumn {height:450px;}

.footerleft {width:68%;}
}

@media screen and (max-width: 1024px) and (min-width:768px) {
h1 {font-size:24px; line-height:26px;}
h2 {font-size:22px; line-height:21px;}
h3 {font-size:20px; line-height:41px;}

#pagewrap {width:90%; margin:5% auto;}
.navwrap {width:85%}
.socialmedia {width:15%; margin-top:8px;}
.socialmedia img {width:21%;}
.tagline {top:75px; right:50px; font-size:18px;}
.tagline a {font-size:18px;}
.tagline img {width:35%;}

.formfield {width:29%;}
.captcha {width:50%;}
#formpage textarea {width:95%;}

.hovereffect .overlay {top: 10px; left: 20px; width:90%; font-size:11px; line-height:16px;}
.btn {font-size:12px; width:35%; padding:3px 0;}

.threecolumn {height:615px;}

#contactwrap {width:90%; margin:5% auto;}

#gal_container img {height:100px;}

.footerleft {width:60%;}
}

@media screen and (max-width: 767px) and (min-width:650px) {
h1 {font-size:18px; line-height:21px;}
h2 {font-size:16px; line-height:14px;}
h3 {font-size:12px; line-height:41px;}
h4 {font-size:10px; line-height:11px;}
p {font-size:12px; line-height:18px;}

#main {padding-top:40px;}
#pagewrap {width:90%; margin:5% auto;}
.navwrap {width:85%}
.socialmedia {width:15%; margin-top:5px;}
.socialmedia img {width:21%;}
.tagline {top:65px; right:25px; font-size:14px;}
.tagline img {width:30%;}
.tagline a {font-size:14px;}

.formfield {width:44%;}
.captcha {width:50%;}
#formpage textarea {width:93%;}

.hovereffect .overlay {top:15px; left:20px; width:90%; font-size:9px; line-height:12px;}
.btn {font-size:10px; width:35%; padding:2px 0;}

.threecolumn {float:none; width:100%; height:auto; margin:0 0 10px 0;}

#contactwrap {width:90%; margin:5% auto;}
#gal_container img {height:75px;}

.invleft {width:20%;}
.invright {width:75%;}

.footerleft {width:65%;}
.footerright img {height:75px; width:auto;}
}

@media screen and (max-width: 649px) and (min-width:401px) {
h1 {font-size:14px; line-height:16px;}
h2 {font-size:18px; line-height:25px;}
h3 {font-size:16px; line-height:25px;}
h4 {font-size:16px;}
p {font-size:12px; line-height:18px;}

#main {padding-top:40px;}
#pagewrap {width:90%; margin:5% auto;}
.navwrap {width:50%}
.socialmedia {width:35%; margin-top:5px;}
.socialmedia img {width:21%;}
.tagline {top:61px; right:15px; font-size:11px;}
.tagline img {width:15%;}
.tagline a {font-size:11px;}

#colorblock {padding:3% 0;}
.formfield {width:95%; margin:5px auto;}
.captcha {width:94%;}
#formpage textarea {width:95%;}
#formpage input.button,#formpage input.button:focus {font-size:18px;}

.homeinventory {width:100%;}
.hovereffect .overlay {top:25px; left:25px; width:90%; font-size:12px; line-height:16px;}
.btn {font-size:14px; width:35%; padding:2px 0;}

.pageleft {float:none; width:90%; padding:5%;}
.pageright {float:none; width:90%; padding:5%;}

.threecolumn {float:none; width:100%; height:auto; margin:0 0 10px 0;}

.marketing img {height:auto; width:100%; margin:0 auto;}
.marketing2 img {height:auto; width:100%; margin:0 auto;}

#contactwrap {width:90%; margin:5% auto;}

.invleft {float:none; width:100%;}
.invright {float:none; width:100%;}
#gal_container img {height:75px;}

footer {padding:3% 0;}
.footerleft {float:none; width:100%;}
.footerright {float:none; width:100%; text-align:left;}
.footerright img {height:75px; width:auto;}
}

@media screen and (max-width:400px)  {
h1 {font-size:8px; line-height:10px;}
h2 {font-size:16px; line-height:20px;}
h3 {font-size:16px; line-height:25px;}
h4 {font-size:14px;}
p {font-size:12px; line-height:18px;}

#main {padding-top:40px;}
#pagewrap {width:90%; margin:5% auto;}
.navwrap {width:50%}
.socialmedia {width:40%; margin-top:8px;}
.socialmedia img {width:15%;}
.tagline {top:45px; right:10px; font-size:8px;}
.tagline img {width:10%;}
.tagline a {font-size:8px;}

#colorblock {padding:3% 0;}
.formfield {width:95%; margin:5px auto;}
.captcha {width:94%;}
#formpage textarea {width:95%;}
#formpage input.button,#formpage input.button:focus {width:75px;font-size:14px;}
.submit {font-size:12px;}

.homeinventory {width:100%;}
.hovereffect .overlay {top:10px; left:15px; width:89%; font-size:10px; line-height:12px;}
.btn {font-size:10px; width:35%; padding:2px 0;}

.pageleft {float:none; width:90%; padding:5%;}
.pageright {float:none; width:90%; padding:5%;}

.threecolumn {float:none; width:100%; height:auto; margin:0 0 10px 0;}

.marketing img {height:auto; width:100%; margin:0 auto;}
.marketing2 img {height:auto; width:100%; margin:0 auto;}

.invleft {float:none; width:100%;}
.invright {float:none; width:100%;}
#gal_container img {height:auto; width:100%; margin:0 auto 5px;}

#contactwrap {width:90%; margin:5% auto;}
.contactleft {float:none; width:100%;}
.contactright {float:none; width:100%;}
footer {padding:3% 0;}
.footerleft {float:none; width:100%;}
.footerright {float:none; width:100%; text-align:left;}
.footerright img {height:50px; width:auto;}
}
