/***** BEGIN RESET *****/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,600;1,700;1,800&display=swap');
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;	
}

ol, ul {
	list-style: none;
}

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 {  
    display: block;  
} 

/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/
h1, h2, h3, h4, h5 {font-family: 'Open Sans', sans-serif; letter-spacing: 1px; line-height: normal}
p, a {font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; line-height: 26px;}


body {
font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 16px; line-height: 26px;
}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:none; height: 1px; background: #ddd; margin: 3% 0; }

.center {text-align: center}
.italic {font-style: italic}
.white {color:#fff;}
.red {color:#D34534}
.lt {font-weight: 300;}

.width-80 {width: 80%; margin: 0 auto;}
.padding25, #padding25 {padding: 25px 0;}
.padding50, #padding50 {padding: 50px 0;}

.blk-bg {background: #000; display: inline-block; width: 100%}
.gray-bg {background: #E6E6E6; display: inline-block; width: 100%;}
.metal-bg {background: url(/siteart/drk-grey-tread.jpg); background-size: cover;}
.flex-stretch {display: flex; flex-direction: row; align-items: stretch;}
.flex-center {display: flex; flex-direction: row; align-items: center;}

/*--- HEADER STYLES ---------------------*/
.header {background: url(/siteart/header-bg.jpg); background-size: cover; }
.header-flex {display: flex; flex-direction: row; align-items: center; width: 60%; margin: 0 auto;}
.logo {width: 40%; text-align: left;}
.logo img {max-width: 300px; width: 100%; text-align: left}
.head-text {text-align: right; width: 60%;}
.head-text h4 {font-size: 20px; font-weight: 300;}
.bold-text {font-weight: 700;}
.head-text p {font-size: 16px; letter-spacing: 1px; color:#212121;}
.head-text p a {color:#333; transition: .3s ease;}
.head-text p a:hover {color:#D0402A}



/*---BODY--------------------------------*/
.blk-bg h2 {font-size: 35px;}
.blk-bg h4 {font-size: 25px;}

.ql {width: 30%; margin: 1% 1%;}
.ql img {width: 100%;}
.ql .ql-btn {width: 100%; background: #fff; text-align: center; color:#D34534; font-size: 16px; font-weight: 500; padding: 10px 0; transition: .3s ease; margin-top:0px; letter-spacing: 1px;}
.ql:hover .ql-btn {background: #D34534; color:#fff; letter-spacing: 2px; }
.hp-left {width: 30%; margin-right: 5%;}
.hp-left h2 {font-size: 70px; text-align: right;}
.hp-right {width: 70%; }
.mfg-logo {width: 20%; margin: 2% 4%; }
.mfg-logo:hover img{ opacity: .6; transition: .3s ease; }
.mfg-logo img {width: 100%; text-align: center;}

.hero {width: 100%;}
.hero img {width: 100%;}
.col-2 {width: 50%; margin: 2% 2%;}
.col-2 a {color:#000; font-weight: 700; transition: .2s ease;}
.col-2 a:hover {color:#D34534; font-weight: 700;}

.flex-brand {display: flex; flex-direction: row; align-items: stretch; flex-wrap: wrap;}
.flex-brand a {width: 29%; margin: 1%; text-align: center; border: 1px solid #d8d8d8; transition: .3s ease; }
.flex-brand a:hover {box-shadow: 1px 1px 10px #ddd;  transition: .3s ease;}
.flex-brand a:hover .brand-cat h3 {background: #333; color:#fff; transition: .3s ease;}
.cat-img-bg{
	height:162px;
	background-size:cover !important;
	background-position:center center !important;
}

.cat-img{
	width: 100%; 
	margin: 0 auto;
}
.cat-img2{
	width: 100%; 
	margin: 0 auto;
}
.cat-img img {
    width: auto;
    padding-top: 15px;
    text-align: center;
    height: 150px;
    margin: 0 auto;
}
.cat-img2 img {
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.brand-cat h3{
	text-transform:uppercase;
	color:#333;
	font-size: 16px;
	text-align:center;
	padding: 20px 0;
	border-top:1px solid #d8d8d8;
	margin-top:0 !important;
}

.border-mfg-showroom:hover {box-shadow: 0px 0px 0px transparent;}



/*--------FORM STYLES--------------------*/




/*-------- FOOTER STYLES ----------------*/
footer{background: url(/siteart/lt-grey-tread.jpg); background-size: cover; padding-top:5%;}
.footer-bg {background: rgba(0,0,0,.80); padding: 2% 0; display: inline-block; width: 100%;}
.footer-flex {display: flex; flex-direction: row; align-items: stretch; width: 80%; margin: 0 auto;}
.foot-col {width: 25%; margin: 1% 1%; text-align: left;}
.foot-col h3 {color:#fff;}
.foot-col p, .foot-col a {color:#fff; transition: .2s ease;}
.foot-col a:hover {color:#D0402A;}

.copyright {background: #000; text-align: center; padding: 15px 0; color:#fff; font-size: 12px; letter-spacing: 1px; font-weight: 400;}




/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/

.view-listing-details-link, .detail-additional-data .data-row .data-label, .contact-options a, .fin-calc-mobile > a {background:rgba(94,94,94,1.00) !important; color:#fff;}

.detail-additional-data .data-row .data-label {background:#000 !important; color:#fff;}
.detail-contact-bar .contact-bar-btn {background: #D0402A !important;}




/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1400px) {
	.cat-img img {height: 115px;}
}
@media only screen and (max-width: 1300px) {
	.flex-brand a {width: 47%;}
}
@media only screen and (max-width: 1100px) {
	.header-flex, .footer-flex {width: 90%; margin: 0 auto;}
	.width-80 {width: 90%;}
	.hp-left h2 {font-size: 50px; margin-right: 2%;}
	.flex-brand a {width: 47%;}
	.footer-flex {flex-wrap: wrap;}
	.foot-col {width: 47%; margin: 1% 1%;}
	
}
@media only screen and (max-width: 900px) {
	.header-flex {display: block; text-align: center; margin: 0 auto}
	.logo {width: 100%; text-align: center;}
	.head-text {width: 100%; text-align: center; padding-bottom: 10px;}
	.head-text h4 {font-size: 18px;}
	.flex-center, .flex-stretch {display: block; }
	.ql {width: 100%; margin: 10px 0;}
	.hp-left {width: 100%; text-align: center;}
	.hp-left h2 {text-align: center; font-size: 50px; padding-bottom: 10px;}
	.hp-right {width: 100%;}
	.logo-bar {text-align: center; margin: 0 auto;}
	.mfg-logo {display: inline-block;}
	.col-2 {width: 100%; padding: 5% 0;}
	.flex-brand {display: inline-block; margin: 1% auto; width: 98%; border:none}
	.flex-brand a {width: 100%; margin: 0 auto; border:none;}
	.brand-cat { border:1px solid #ddd; margin: 2% 0;}
}


@media only screen and (max-width: 767px) {
	.blk-bg h2 {font-size: 25px;}
	.blk-bg h4 {font-size: 18px;}
	
}