﻿/***** BEGIN RESET 
font-family: komet, sans-serif;
font-family: "muli", sans-serif;
*****/

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;  
} 

/* fadeInDown */
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 1;
    -webkit-transform: none; } }
@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 1;
    -moz-transform: none; } }
@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -o-transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 1;
    -o-transform: none; } }
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -50%, 0); }
  100% {
    opacity: 1;
    transform: none; } }

.u--fadeInDown {
  -webkit-animation: fadeInDown 1s ease-in;
  -moz-animation: fadeInDown 1s ease-in;
  -o-animation: fadeInDown 1s ease-in;
  animation: fadeInDown 1s ease-in; }
/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #c49647; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #c49647;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {font-family: "muli", sans-serif !important;}
h1,h2,h3,h4,h5,h6{font-family: komet, sans-serif !important;}
p{font-family: "muli", sans-serif !important;}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}

/*--- HEADER STYLES ---------------------*/
header {box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;}
.top-bar {background: #111111;color: #fff;padding: 10px 0;border-bottom: 1px solid #222222;position: relative;z-index: 9999;}
.top-bar a {color: #fff;transition: .3s all;}
.top-bar a i {opacity: .5;transition:.3s all;}
.top-bar a:hover i {opacity: 1;}
.top-bar .flex-container {justify-content: space-between;}
.contact-info {display: flex; gap: 20px;}
.main-header {background: #000;position: relative;}
.logo img {max-width: 100%;width: 200px;}
.main-header .flex-container {justify-content: space-between;align-items: center}
.right-side {gap: 20px;position:relative}
.right-side a {color: #fff;transition: .3s all;}
.right-side a i {opacity: .5;}
.right-side a:hover i {opacity: 1;}
/*---INVENTORY SEARCH IN HEADER---*/
.search-wrap {width: 100%;}
#search {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #111;
  z-index: 999;
	position: absolute;
	    display: flex;
    align-items: center;
    justify-content: center;
}

form.search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;  width: 90% !important;
	margin: 0 auto;
}

.search-bg {
  -webkit-animation: fadeInDown .3s ease-out;
  -moz-animation: fadeInDown .3s ease-out;
}
button.search-btn {background: transparent;padding: 10px;font-size: 22px;border: none;color: #c49647;transition:.3s all;}
button.search-btn:hover {opacity: .5}

.searchTerm::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #f8f8f8;
  opacity: 1; /* Firefox */
}
.searchTerm:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #f8f8f8;
}
.searchTerm::-ms-input-placeholder { /* Microsoft Edge */
  color: #f8f8f8;
}
.search-wrap {
}
.search-header input[type="text"] {width: 100%;border: none !important;font-size: 18px !important;color: #f8f8f8 !important;font-family: komet, sans-serif !important;;font-weight: 600 !important;letter-spacing: 2px !important;-webkit-user-select: initial;-khtml-user-select: initial;-moz-user-select: initial;-ms-user-select: initial;user-select: initial;height: auto !important;background: #111;line-height: 28px;text-transform: uppercase;}

.search-header input:-webkit-autofill,.search-header input:-webkit-autofill:focus {background: #111 !important;color: #f8f8f8 !important;}

.search-nav {opacity: .7;transition: ease all 0.2s !important;}
.search-nav:hover {opacity: 1;}

.search-header input:focus {outline: none;}


/*---BODY--------------------------------*/
.pg-content h1 {font-size: 42px;text-transform: uppercase;font-weight: 500;margin-bottom: 10px;}
.pg-content h1 span {font-weight: 900;}
.wid90{width: 90%;margin: 0 auto;}
.pg-content .wid90 {max-width: 1400px;}
#pad-l {padding: 30px 0;}
#pad-xl {padding: 60px 0;}
.pad {padding: 50px 0;}
.flex-container {display: flex;}
.grid-container {display: grid;}
.center {text-align: center;}
.hero {background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.65) 100%),url("/siteart/hero.jpg") no-repeat;background-size: cover;background-position: center center;max-height: 600px;height: 50vh;min-height: 450px;display: flex;align-items: center;justify-content: flex-start;}
.hero-txt{max-width: 800px;margin: 0;color: #fff;}
.hero-txt h1 {font-size: 48px;font-weight: 900;line-height: 1;margin-bottom: 20px;}
.hero-txt h1 span {
    letter-spacing: 1px;
    font-size: 32px;
    display: block;
    margin-top: 10px;
    font-weight: 600;
}
.black-bar {height: 10px;background-color: #111111;
background-image: url("/siteart/otis-redding.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */width: 100%;}
.hero-txt p {font-size: 16px;line-height: 1.25;}
.hero-txt a {margin-top: 30px;display: block;width: fit-content; color: #000 !important;}
.manu-holder {background: #111;color: #fff;}
.manu-holder .flex-container {align-items: center;}
.manu-txt {flex: 25%;}
.manu-wrap {flex: 75%;overflow: hidden;}
.manu-holder p {font-weight: 700;line-height: 1.25;font-size: 18px;}
.manu-slide a {opacity: .5;transition:.3s all;}
.manu-slide a:hover {opacity: 1;}
.manu-slide img {max-width: 100%;filter: brightness(0) invert(1);}
.manu-slide div {margin: 0 30px;}
.home-img,.home-txt {flex: 1;flex-basis: 50%;}
.home-txt {display: flex;align-items: center;justify-content: center;}
.home-img {overflow: hidden;}
.home-img img {object-fit: cover;object-position: center center;    height: 100%;
    width: 100%;}
.home-txt h2 {font-size: 36px;font-weight: 800;text-transform: uppercase; margin-bottom: 10px;}
.home-txt h3 {font-size: 22px;margin-bottom: 10px;font-weight: 800;}
.home-box {padding: 20px;border: 1px solid #e8e8e8;margin-bottom: 10px;}
.home-box:last-of-type{margin-bottom: 0;}
.home-txt ul li::before {color: #000;opacity: .5; content: "\2b"; margin-right: 5px; font-family: "Font Awesome 6 Free"; font-weight: 900;font-size: 12px;}
.home-txt ul li {margin-bottom: 10px;}
.home-txt .wid90 {width:80% !important}
.home-box:first-of-type a {font-weight: 600;color: #c49647;display: block;margin-top: 20px;}
.home-box.link-box {padding: 0;}
.home-box.link-box a {font-size: 18px;transition: .3s all;display: block;width: 100%;padding: 20px;text-transform: uppercase;font-weight: 900;letter-spacing: 1px;color: #000;font-family: komet, sans-serif !important;display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;}
.home-box a {line-height: 2;font-weight: 600;color:#333;transition:.4s all;}
.home-box a:hover {color: #c49647;}
.home-box.link-box a:hover {color: #c49647}

.home-box.link-box a i {opacity: .5;transition: .3s all;color: #000 !important;}
.home-box.link-box a:hover i {opacity: 1;}

.home-categories{ background: #222;padding: 40px 0;color: #fff;}
.home-categories h2 {text-transform: uppercase;font-weight: 600;font-size: 32px;}
.home-categories hr {max-width:90px;height: 8px;margin: 10px auto 20px;background: #c49647;border: none;}
.home-categories .grid-container {grid-template-columns: repeat(4, 1fr);gap:20px;grid-auto-rows: minmax(100px, auto);}
.cat {overflow: hidden;position: relative;}
.cat img {transition: all 500ms;height: 100%;width: 100%;object-fit: cover;-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.overlay{transition: all 500ms;position: absolute;top: 0;left:0;right:0;bottom: 0;background: rgba(51,51,51,0.65);display: flex;align-items: center;justify-content: center;}
.cat-title { color: #fff;text-align: center;}
.cat-title h3 {
font-size: 28px;	
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
text-transform: uppercase;
font-weight: 800 !important;
letter-spacing: 1px; transition: all 500ms;}

.cat:hover .cat-title h3{font-size: 36px;}
.cat:hover .cat-title span {font-size: 22px;}
.cat:hover img {filter: none !important;}
.cat:hover .overlay {;background: rgba(51,51,51,0.25);}
.cat-title span strong {font-weight: 900 !important;}
.cat-title span {transition: all 500ms;text-transform: uppercase;letter-spacing: 2px;font-size: 18px;display: block;font-weight: 400 !important;}
.map-bg {
    background: #000000;
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #fff;
	padding:0 !important;
	overflow: hidden;
}

/*
.map-bg::before {
    content: "";
    background-image: url("/siteart/map-new.png");
       background-repeat: no-repeat;
    background-size: 100%;
    top: -56%;
    right: 0;
    bottom: 0;
    left: 50%;
    position: absolute;
    opacity: .65;
}
*/
.map-bg .wid90 {z-index: 99;}
.map-bg .wid90 div {width: 50%;display: block;}
.half-side, .half-map {
    flex-basis: 50%;
}
.half-map img {height: 100%;width: 100%;object-fit: cover;object-position: center center;opacity:.75;}
.half-side {display: flex;align-items: center;}
.half-side div {margin-left: 10%;padding: 10% 0;}
.map-bg .flex-container {gap: 10%;}

.map-bg h2 {
    font-size: 42px;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1.25;margin-bottom: 10px;
}
.map-bg h2 span {
    font-weight: 500;
    text-transform: none;
}

.map-bg a {margin-top: 40px;display: block;width: fit-content;}
/*----REQUEST DEALER ACCESS---*/
.form-wrap {margin-top: 20px;}
.flex-row {display: flex;gap: 10px;margin-bottom: 10px;}
.flex-input{
	width:100%;
	display: flex;
	flex-direction: column;
	text-align: left;
}
#formpage input,#formpage select {
	padding: 10px;
	border: 1px solid #f1f1f1;
	font-family: "muli", sans-serif !important;
	color: #000;
	font-size: 16px;
	margin-top: 5px;
    border-radius: 2px;
	background:#fff;
}

#formpage input:focus {
	border: 1px solid #eaeaea;
	border-radius:2px
}

#formpage option{color:#333;background:#fff;}

/*===PLACEHOLDER TEXT STYLES===*/

#formpage ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #767676;
}
#formpage ::-moz-placeholder { /* Firefox 19+ */
  color: #767676;
}
#formpage :-ms-input-placeholder { /* IE 10+ */
  color: #767676;
}
#formpage :-moz-placeholder { /* Firefox 18- */
  color: #767676;
}

#formpage textarea {
	padding: 10px;
	border: 1px solid #f1f1f1;
	color: #000;
	font-size: 16px;
	background: #fff;
	height: 85px;
	border-radius:2px;
	margin-top:10px;font-family: "muli", sans-serif !important;
}

#formpage textarea:focus{
	border: 1px solid #eaeaea;
	border-radius:2px
} 

.CaptchaPanel{width:100%;padding: 0 !important;}

.CaptchaImagePanel img{width:200px;}

.CaptchaWhatsThisPanel a{color:#333;}

.submit-button{
	padding:10px 0px 10px 0px;
	position:relative;
	text-align:center;
}
.CaptchaWhatsThisPanel a {font-weight: 700;transition:.3s all !important;}
.CaptchaWhatsThisPanel a:hover {text-decoration: underline;}

/*--------BUTTON STYLES--------------------*/
button {transition: .3s all;cursor: pointer;}
button.gold-btn {padding: 15px;font-size: 16px;background: #c49647;border: 1px solid #c49647;border-radius: 3px;font-weight: 600;font-family: "muli", sans-serif !important;color: #000;}

button.gold-btn:hover {background:#8d6a2d;border-color: #8d6a2d;}

/*-------- FOOTER STYLES ----------------*/
footer{background: #111111;padding: 40px 0;}
footer .flex-container {justify-content: space-between;gap: 2%;}
footer ul li a {color: #fff;transition: .3s all;}
footer ul li a:hover {opacity: .5;}
footer ul li {margin-bottom: 15px;}
.foot-title {font-family: komet, sans-serif !important;color: #fff;text-transform: uppercase;font-weight: 700;letter-spacing: 1px;opacity: .5;margin-bottom: 10px;display: block;}
.foot-col {flex: 1;}

/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1450px) {
	.map-bg .flex-container {
    gap: 0;
}
	.map-bg h2 {
		font-size: 36px;}
}
@media only screen and (max-width: 1200px) {
	.hero {height: 40vh;}
	.hero h1 {font-size: 44px;}
	.hero h1 span {font-size:28px;}
	.home-categories .grid-container {grid-template-columns: repeat(2, 1fr);}
	.cat {max-height: 200px;}
	header button.gold-btn {font-size: 14px;}
	.logo img {max-width: 200px;}
	.map-bg::before {left: 33%;}
}

@media only screen and (max-width: 1100px) {
	.half-side {
    flex-basis: 100%;
}
	
	.map-bg .flex-container {flex-wrap:wrap;position:relative;width: 100%;}
	.half-side div {margin: 0 auto;width: 90%;z-index: 9;}
	.half-map {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        bottom: 0;
        left: 5%;
        right: 0;
}
	.half-map img {opacity: .35;}
}
@media only screen and (max-width: 1000px) {
	.right-side.flex-container{order: -1;}
	.nav-wrap {flex:unset !important;}
	header .request-btn{display: none;}
	.logo img {max-width: 250px;}
}
@media only screen and (max-width: 900px) { 
	.home-img {display: none;}
	.home-txt .wid90 {width: 90% !important;}
	.flex-foot,.flex-row {flex-wrap:wrap;}
	.manu-wrap {flex:2 !important;}
	.manu-txt {flex: 1 !important;}
	.manu-holder p {font-size: 16px !important;}
	h2 {font-size: 32px !important;}
	.map-bg {min-height: 190px;}
	.flex-foot {flex-wrap:wrap;gap:30px !important;}
	.foot-col {flex-basis: 33%;}
}
@media only screen and (max-width: 767px) {
	.map-bg::before {left: 0 !important;}
	.contact-info span {display: none;}
	.head-hours {display: none;}
	h2 {font-size: 28px !important;}   
	.hero h1 {font-size: 36px;} 
	.hero h1 span{font-size: 24px;}
	
	.pg-content h1 {font-size: 36px;}
}
@media only screen and (max-width: 610px) {
	.cat-title h3 {font-size: 22px;}
	.cat-title span {font-size: 16px;}
}
@media only screen and (max-width: 500px) {
	.map-bg::before {left: 0 !important;}
	.contact-info span {display: none;}
	.head-hours {display: none;}
	h2 {font-size: 32px !important;} 
	.hero h1 {font-size: 36px;}
	.hero h1 span {font-size: 22px;}
	.manu-holder .flex-container {flex-wrap:wrap;gap: 20px;}
	.manu-txt,.manu-wrap {flex-basis: 100% !important;text-align: center;}
	.slick-track {overflow: hidden;margin: 0 !important;}
	.search-header input[type="text"] {font-size: 15px !important;}
	button.search-btn {font-size: 18px !important;}
	.home-categories .grid-container {grid-template-columns: repeat(1, 1fr);}
	.logo img {max-width: 190px;}
		.cat {max-height: 150px;}
	.foot-col {flex-basis: 100%}
	.pg-content h1 {font-size: 28px;}
	.pg-content h1 span {display: block;}
}
@media only screen and (max-width: 400px) {
	
	h2 {font-size: 22px !important;}
	.hero h1 { font-size: 32px;}
}






