﻿/* BEGIN RESET */
* {background:transparent; border:0; margin:0; padding:0; font-family: 'Montserrat', sans-serif; font-style: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;}

.h1 {font-size:48px; font-weight:700; color:#e3171a; text-transform:uppercase;}
h2 {font-size:22px;}
#contentwrapper h2 {
    color:#fff;
}

h3 {font-size:21px; font-weight:800;margin-bottom:5px; color:#fff;}
h4 {font-size:21px; color:#e3171a;}
p {font-size:16px; line-height:20px;}

a {text-decoration:none;}

/* BASIC STYLES */
body {overflow-x:hidden;}
#contentwrapper {width:90%; margin:0px auto;}
#inventorywrap {margin:30px auto;}

.hosted-content .listings-wrapper .listings-list .listing-banner h2 {color:#000 !important;}

/* HEADER */
#mobileheader {display:none;}
#bar {background:#e3171a; padding:10px 0; color:#fff;}
#bar a {color:#fff;}
#bar a:hover {color:#ccc;}
.icon {width:1%;}
.logo {float:left; width:17%; padding:15px 0;}
.logo img {width:100%;}
.headerright {float:right; width:77%; margin-top:45px;}
.navwrap {float:left; width:80%; margin-top:10px;}
.headerlogo {float:right; width:20%;}
.fb {float:right; width:12%; text-align:right;}
.fb img {width:100%;}

/* CONTENT STYLES */
#main {width:100%;}
#main img {width:100%;}

.tagline {position:absolute; width:650px; top:500px; right:100px; font-size:36px; font-weight:700; color:#fff;}

/*PARTS*/
.partswrap {border-bottom:1px solid #000; margin:1% 0; padding:1% 0;}
.parts {float:left; width:25%;}
.parts img {width:100%;}
.partsdescription {float:right; width:70%;}
#manu {width:90%; margin:0 auto; text-align:center;}
#manu img {margin:1% 2%;}

/* ICON BUTTONS */
.homeinventory {width:23%; margin:1%; float:left;}
.homeinventory img {width:100%;}

.hovereffect {width: 100%; height: 100%; float: left; overflow: hidden; position: relative; text-align: center; cursor: default;}
.hovereffect .overlay {width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0;}

.hovereffect img {display: block; position: relative; -webkit-transition: all 0.4s ease-in; transition: all 0.4s ease-in; z-index:99;}
.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(2px);
  -webkit-filter: grayscale(1) blur(2px);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.box {background:#e3171a; z-index:999999; display:inline-block; font-size:26px; font-weight:700; width:100%; color:#fff; padding:3.5% 0; text-align:right;}
.box a {color:#fff;}

.brand-cont-1 {
    padding:50px 0;
    width:100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:20px 5%;
}
.brand-cont-1 a img {
     width:100%;
    height: auto;
    display: block;
    margin:0 auto;
    transition: all 0.2s ease-in;
}
.brand-cont-1 a:hover {
    opacity: 0.6;
}



/* FORM */
#colorblock {background: url(../siteart/bg.jpg) repeat; padding:1.5% 0; color:#fff;}

#formpage {vertical-align:top; margin-top:10px;}
#formpage div {vertical-align:top; padding:3px 5px;}

.twocolum {width:48.4%; float:left; margin-right:1%;}

#formpage input {padding:6px 5px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px; background:#fff; margin-bottom:10px;}
#formpage textarea {padding:6px 5px; border:1px solid #8e8d8d; color:#8e8d8d; font-size:12px; background:#fff;}

/* 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:#8e8d8d; 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:99%; height:85px;}

/* focus states of various types of fields */
#formpage input:focus,#formpage textarea:focus,#formpage select:focus {background:#FFF;  color:#000; border:1px solid #c73132; outline-style:none;}
#formpage input.radio:focus,#formpage input.checkbox:focus {background:none;  border:0; outline-style:none;}
  
a.button {float:right; border:1px solid #e3171a; color:#e3171a; font-size:14px; font-weight:bold; padding:10px 0; width:200px; text-transform:uppercase; display:inline-block; text-align:center; margin-top:15px; }
a.button:hover {border:1px solid #fff; color:#fff;}
 
#formpage input.button,#formpage input.button:focus {float:right; background:none; width:200px; padding:10px 0; border:1px solid #e3171a; font-size:14px; font-weight:bold; color:#e3171a;}
#formpage input.button:hover {border:1px solid #fff; color:#fff;}

/*control the Captcha */
#captcha {width:100%; margin:0 auto;}
.CaptchaPanel {margin:0 0 0 0 !important; padding:0 0 0 0 !important; text-align: left !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 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:0 0 8px 0 !important;}
.CaptchaWhatsThisPanel a {color:#fff;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;}  

/* SCROLLING INVENTORY */
.scrolling-wrap {width:100%; height:90px; overflow:hidden; padding:2px 0 7px;}
.scrolling{width:100%; height:92px;}

/* FOOTER */
footer {background: url(../siteart/bg.jpg) repeat; padding-top:25px; color:#fff;}
.linkswrap {float:left; width:15%; color:#fff; margin-bottom:25px;}
.linkswrap a {color:#fff!important;}
.linkswrap a:hover {color:#e3171a!important;}

.footerleft {float:left; width:60%;}
a.footerlink:link, a.footerlink:visited, a.footerlink:active{font-size:10px; color:#fff;}
a.footerlink:hover {font-size:10px; color:#ccc;}
.footertext{font-size:10px; color:#fff;}
.smallfootertext{font-size:10px; color:#fff;}
.divfooter {width:100%; line-height:11px;}

.footerright {float:right; width:18%; margin-top:20px;}
.footerright img {width:100%;}
.barright {float:right; width:2.5%; margin-top:10px; text-align:right;}
.barright img {width:100%;}


/************************************************ Responsive Styles **/
@media screen and (max-width: 1880px) and (min-width:1281px) {
.headerright {width:82%;}

.twocolum {width:48%;}
#formpage textarea {width:98.5%;}
}

@media screen and (max-width: 1480px) and (min-width:1281px) {
.headerright {width:80%}	
.logo {width:20%;}
.icon {width:1.5%;}
.fb {width:15%;}
.tagline {top:425px; right:50px;}

#manu img {height:100px;}

.twocolum {width:48%;}
#formpage textarea {width:98.5%;}

.linkswrap {width:20%;}
.footerright {width:23%;}
}

@media screen and (max-width: 1280px) and (min-width:1024px) {
.h1 {font-size:36px;}
.headerright {width:80%}	
.logo {width:20%;}
.icon {width:1.5%;}
.fb {width:15%;}
.tagline {top:300px; right:-150px; font-size:28px;}

#manu img {height:65px;}

.twocolum {width:47.5%;}
#formpage textarea {width:98%;}

.linkswrap {width:20%;}
.footerright {width:23%;}
.footerleft {width:75%;}
}

@media screen and (max-width: 1023px) and (min-width:768px) {
.h1 {font-size:30px;}
#bar { padding-bottom:2px; font-size:12px;}
header {display:none !important;}
#mobileheader {display:block;}
.navwrap {float:right; width:10%; margin-top:-1px;}	
.mobilecontact {float:left; width:85%;}
.icon {width:2%; margin-top:3px;}
.headerright {width:70%; margin-top:20px;}
.headerlogo {width:35%;}
.logo {width:24%;}

.tagline {top:300px; right:-275px; font-size:24px;}

.box {font-size:22px; padding:3% 0 2.5%;}

.twocolum {width:47.5%;}
#formpage textarea {width:98%;}
.box {font-size:20px; padding:2.5% 0;}

#inventorywrap {width:90%;}

#manu img {height:50px;}

.linkswrap {width:25%;}
.footerright {width:23%;}
.footerleft {width:90%;}
a.footerlink:link, a.footerlink:visited, a.footerlink:active{font-size:9px;}
a.footerlink:hover {font-size:9px;}
.footertext{font-size:9px;}
.smallfootertext{font-size:9px;}
.divfooter {line-height:14px;}
.barright {width:3%; margin-top:10px;}
}

@media screen and (max-width: 767px) and (min-width:551px) {
.h1 {font-size:22px;}
#bar { padding-bottom:2px; font-size:12px;}
header {display:none !important;}
#mobileheader {display:block;}
.navwrap {float:right; width:10%; margin-top:-1px;}	
.mobilecontact {float:left; width:90%; margin:2px 0 8px;}
.icon {width:2.75%; margin-top:3px;}
.headerright {width:45%; margin-top:28px;}
.headerright img {width:100%;}
.headerlogo {width:55%; margin-right:-25px;}
.logo {width:28%;}

.tagline {top:275px; right:-350px; font-size:20px;}

.twocolum {width:46.5%;}
#formpage textarea {width:98%;}
.box {font-size:18px; padding:2.5% 0;}

#inventorywrap {width:90%;}

#manu img {height:35px;}

a.button {padding:5px 0; width:100px; margin:10px 0; }
#formpage input.button,#formpage input.button:focus {padding:5px 0; width:100px; margin:10px 0;}

.linkswrap {width:33%;}
.footerright {width:23%;}
.footerleft {width:90%;}
a.footerlink:link, a.footerlink:visited, a.footerlink:active{font-size:9px;}
a.footerlink:hover {font-size:9px;}
.footertext{font-size:9px;}
.smallfootertext{font-size:9px;}
.divfooter {line-height:14px;}
.barright {width:3%; margin-top:10px;}
}

@media screen and (max-width: 550px) and (min-width:381px) {
.h1 {font-size:22px;}
h2 {font-size:18px;}
h4 {font-size:16px;}
p {font-size:12px; line-height:16px;}
#bar { padding-bottom:2px; font-size:12px;}
header {display:none !important;}
#mobileheader {display:block;}
.navwrap {float:right; width:10%; margin-top:-1px;}	
.mobilecontact {float:left; width:90%; margin:2px 0 5px;}
.icon {width:2.75%; margin-top:3px;}
.headerright {width:50%; margin-top:28px;}
.headerright img {width:100%;}
.headerlogo {width:75%; margin-right:-25px;}
.logo {width:45%;}

.tagline {top:215px; right:-375px; font-size:20px;}

.twocolum {float:none; width:95%; margin-right:0;}
#formpage textarea {width:98%;}
.box {font-size:14px; padding:2.5% 0;}

#inventorywrap {width:90%;}

.parts {width:40%;}
.partsdescription {width:55%;}
#manu img {height:25px;}

a.button {padding:5px 0; width:100px; margin:10px 0; }
#formpage input.button,#formpage input.button:focus {padding:5px 0; width:100px; margin:0 0 10px;}
#captcha {width:95%; margin:0 auto;}

.linkswrap {width:45%;}
.footerright {display:none;}
.footerleft {width:100%;}
a.footerlink:link, a.footerlink:visited, a.footerlink:active{font-size:9px;}
a.footerlink:hover {font-size:9px;}
.footertext{font-size:9px;}
.smallfootertext{font-size:9px;}
.divfooter {line-height:14px; margin-bottom:10px;}
.barright {float:none; width:5%; margin-bottom:10px;}

}

@media screen and (max-width:380px) {
.h1 {font-size:12px;}
h2 {font-size:12px;}
h4 {font-size:12px;}
p {font-size:10px; line-height:16px;}
#bar { padding-bottom:2px; font-size:12px;}
header {display:none !important;}
#mobileheader {display:block;}
.navwrap {float:right; width:10%; margin-top:-1px;}	
.mobilecontact {float:left; width:60%; margin:2px 0 5px; font-size:11px; line-height:20px;}
.icon {display:none;}
.headerright {float:none; width:65%; margin:10px auto;}
.headerright img {width:100%;}
.headerlogo {float:none; width:100%; margin-right:0;}
.logo {float:none; width:90%; margin:0 auto;}

.tagline {display:none;}

.twocolum {float:none; width:93%; margin-right:0;}
#formpage textarea {width:98%;}

.homeinventory {width:100%; margin:1% auto; float:none;}
.box {font-size:14px; padding:2.5% 0;}

#inventorywrap {width:90%;}

.parts {float:none; width:100%;}
.partsdescription {float:none; width:100%;}
#manu img {height:20px;}

a.button {font-size:12px; padding:5px 0; width:100px; margin:10px 0; }
#formpage input.button,#formpage input.button:focus {font-size:12px; padding:5px 0; width:100px; margin:0 0 10px;}
#captcha {width:95%; margin:0 auto;}

.linkswrap {float:none; width:100%;}
.footerright {display:none;}
.footerleft {width:100%;}
a.footerlink:link, a.footerlink:visited, a.footerlink:active{font-size:9px;}
a.footerlink:hover {font-size:9px;}
.footertext{font-size:9px;}
.smallfootertext{font-size:9px;}
.divfooter {line-height:14px; margin-bottom:10px;}
.barright {float:none; width:5%; margin-bottom:10px;}
}
