﻿/***** BEGIN RESET *****/
@import url("https://use.typekit.net/tea1nph.css");
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 --------*/
:root {
  --black: #000;
  --dark-red: #991D21;
  --red: #DF2A2A;
  --dark-grey: #383838;
  --grey: #6A7282;
  --light-grey: #D1D5DC;
  --super-light-grey: #F6F6F6;
}

/***** 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;
}

h1, h2, h3, h4 {
	font-family: 'oswald', sans-serif;
}

/*-------- BODY STYLES --------*/

body {

}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}


/*-------- UNIVERSAL STYLES ----------------*/
.wrapper {
	padding: 0 15px; 
	margin: 0 auto;
	max-width: 1650px;
}

.flex {display: flex;}
.btn-top {margin-top: 40px;}
.small-title {align-items: center; gap: 10px; flex-wrap: wrap;}
.special-dash {margin: 0; width: 60px; border-bottom: #991D21 3px solid;border-top: 0; border-left: 0; border-right: 0;}
.check-list {margin-top: 35px;}
.check-list li {gap: 10px; align-items: center; margin-top: 15px;}
.check-list li i {padding: 5px; color: #fff; background: var(--red);}
.p-link {transition: all .4s ease-out; color: var(--dark-red);}
.p-link:hover {color: var(--red);}
.p-top {margin-top: 20px;}

/*---Headings---*/
.heading-lg {font-size: 75px; line-height: 80px; color: #fff; text-transform: uppercase; margin-bottom: 25px;}
.heading-mdlg {font-size: 55px; line-height: 65px; color: var(--black); text-transform: uppercase; margin-bottom: 20px;}
.heading-md {font-size: 35px; line-height: 45px; color: var(--black); text-transform: uppercase; margin-bottom: 10px;}
.heading-sm {font-size: 25px; line-height: 30px; color: var(--black); text-transform: uppercase; margin-bottom: 15px;}
.sub-head {font-size: 16px; text-transform: uppercase; line-height: 22px; font-family: 'inter-18pt', sans-serif; font-weight: 700; letter-spacing: 1.2px;}

.p-sm {font-size: 16px; line-height: 25px; color: var(--dark-grey); font-family: 'inter-18pt', sans-serif;}
.p-md {font-size: 18px; line-height: 30px; color: var(--dark-grey); font-family: 'inter-18pt', sans-serif;}
.p-lg {font-size: 20px; line-height: 30px; color: var(--light-grey); font-family: 'inter-18pt', sans-serif;}

/*---Buttons---*/
.btn-red, .btn-outline, .btn-outline-white, .btn-outline-red, .btn-outline-black, .btn-white {
	display: inline-block;
	background: var(--dark-red);
	color: #fff;
	padding: 10px 20px;
	font-size: 16px;
	font-family: 'oswald', sans-serif;
	border: #991D21 solid 2px!important;
	transition: all .4s ease-out;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 1.4px;
}
.btn-red:hover {border: #991D21 solid 2px; background: transparent; color: var(--dark-red);}

.btn-outline-white {background: transparent!important; border: #fff 2px solid!important;}
.btn-outline-white:hover {background: #fff!important; color: var(--black)!important;}
.btn-outline-red {background: transparent!important; border: #991D21 solid 2px!important; color: #991D21!important;}
.btn-outline-red:hover {background: var(--dark-red)!important; color: #fff!important;}
.btn-outline-black {background: transparent!important; border: #000 solid 2px!important; color: var(--black)!important;}
.btn-outline-black:hover {background: var(--black)!important; color: #fff!important;}
.btn-white {background: #fff!important; color: var(--dark-red); border: #fff 2px solid!important;}
.btn-white:hover {background: transparent!important; color: #fff!important;}

/*--- HERO STYLES ---------------------*/
.home-hero {background: url("/siteart/home-hero.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
.home-hero .wrapper, .inner-hero .wrapper {padding-top: 180px!important; padding-bottom: 180px!important;}
.home-hero p, .inner-hero p {max-width: 650px; color: #fff!important;}
.small-title {margin-bottom: 15px;}
.home-hero .special-dash, .inner-hero .special-dash {border-bottom: #fff 3px solid!important;} 
.home-hero .flex, .inner-hero .flex {flex-wrap: wrap; gap: 15px;}
.home-hero > div, .inner-hero > div {background: linear-gradient(90deg, rgba(0, 0, 0, 0.80) 30.46%, rgba(0, 0, 0, 0.20) 99.98%);}
.home-hero .heading-lg span {color: var(--red)!important;}

#custom-builds .inner-hero {background: url("/siteart/Rusty-Rangers.JPG") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#tag-a-long .inner-hero {background: url("/siteart/hero_tagalong.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#gooseneck .inner-hero {background: url("/siteart/hero_gooseneck.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#lowboy .inner-hero {background: url("/siteart/hero_lowboy.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#tilt .inner-hero {background: url("/siteart/hero_tilt.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#dealer-info .inner-hero {background: url("/siteart/dealer-info-hero.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#about .inner-hero {background: url("/siteart/about-hero.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#parts .inner-hero {background: url("/siteart/parts-hero.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#contact .inner-hero {background: url("/siteart/contact-hero.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#quote .inner-hero {background: url("/siteart/quote-hero.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#blog .inner-hero {background: url("/siteart/blog-hero.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#choose-lowboy .inner-hero {background: url("/siteart/choose-loyboy.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#choose-the-right-trailer .inner-hero {background: url("/siteart/choose-the-right-trailer.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#custom-gooseneck .inner-hero {background: url("/siteart/custom-gooseneck.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#custom-ramps .inner-hero {background: url("/siteart/custom-ramps.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#custom-suspension .inner-hero {background: url("/siteart/custom-suspension.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#custom-tag-a-long .inner-hero {background: url("/siteart/custom-tag-a-long.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#custom-trailer-cost .inner-hero {background: url("/siteart/aggregate-conveyor-trailer.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#custom-trailer-questions .inner-hero {background: url("/siteart/custom-trailer-question.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#electronic-drum-break .inner-hero {background: url("/siteart/electronic-drum-break.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#exact-cutom-trailer .inner-hero {background: url("/siteart/exact-custom-trailer.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#gooseneck-vs-tagalong .inner-hero {background: url("/siteart/gooseneck-vs-tagalong.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#loyboy-vs-flatbed .inner-hero {background: url("/siteart/lowboy-vs-flathead.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#tilt-vs-beavertail .inner-hero {background: url("/siteart/tilt-vs-beavertail.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}
#trailer-tires .inner-hero {background: url("/siteart/trailer-tires.jpg") no-repeat; background-size: cover; background-position: center; background-color: var(--black);}

.breadcrumbs {gap: 20px; padding-top: 15px !important; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.breadcrumbs a {color: var(--dark-red); font-weight: 700; font-family: 'inter-18pt', sans-serif; transition: all .4s ease-out; font-size: 16px; line-height: 25px;}
.breadcrumbs a:hover {color: var(--red);}
.breadcrumbs hr {margin: 0; border: #383838 solid 1px; height: 20px;}

/*---BODY--------------------------------*/
/*---col-4---*/
.col-4 {background: var(--black);}
.col-4 .wrapper {padding-top: 35px!important; padding-bottom: 35px!important; justify-content: space-around; text-align: center; gap: 30px; flex-wrap: wrap;}
.col-4 .heading-md {color: var(--red)!important; margin-bottom: 0!important;}
.col-4 p {color: var(--light-grey)!important; text-transform: uppercase;}

/*---inventory---*/
.inventory {padding-top: 80px!important; padding-bottom: 80px!important;}
.inventory .small-title {color: var(--dark-red); justify-content: center;}
.inventory .heading-mdlg {text-align: center;}
.inventory .p-md {text-align: center; max-width: 650px; margin: 0 auto;}

.inventory .inventory-cards {gap: 30px; flex-wrap: wrap; justify-content: center; margin-top: 50px;}
.inventory .inventory-cards .box-outline {max-width: calc(30% - 15px); width: 100%; border: solid 1px #E5E7EB;}
.inventory .box-outline .img-height {height: 250px;}
.inventory .box-outline .img-height img {width: 100%; height: 100%; object-fit: cover;}
.inventory .box-outline > div:last-child {padding: 25px 25px 50px 25px;}
.inventory .box-outline .p-sm {margin-bottom: 15px;}
.inventory .box-outline a {color: var(--dark-red); font-family: 'inter-18pt', sans-serif; text-transform: uppercase; font-size: 16px; font-weight: 700; letter-spacing:1.4px; transition: all .4s ease-out;}
.inventory .box-outline a:hover {color: var(--red);}

/*---about (section on home page)---*/
.about {background: var(--black); padding-top: 80px; padding-bottom: 80px;}
.about .wrapper {justify-content: space-between; align-items: center; gap: 40px;}
.about .small-title {color: var(--red);}
.about .special-dash {border-bottom: #DF2A2A 3px solid!important;}
.about .wrapper > div:first-child {min-width: 430px;}
.about .wrapper > div:first-child .heading-mdlg {color: #fff;}
.about .wrapper > div:first-child .heading-mdlg span {color: var(--red);}
.about .p-md {max-width: 650px; color: var(--super-light-grey);}
.about ul li > .p-sm {color: var(--super-light-grey)!important;}
.about .wrapper > div:last-child {max-width: 900px; width: 100%;}
.about .wrapper > div:last-child .flex {gap: 20px; margin-top: 20px;}
.about .wrapper .grey-box {background: rgba(255,255,255,.15); padding: 35px; box-sizing: border-box; width: 100%;}
.about .wrapper .grey-box .heading-mdlg {color: var(--red); font-size: 60px; line-height: 70px; margin-bottom: 0!important;}
.about .wrapper .grey-box .p-sm {color: var(--light-grey); text-transform: uppercase;}
.about .wrapper .grey-box .heading-md {color: #fff; margin-bottom: 0!important;}

/*---img-right---*/
.img-right {background: var(--super-light-grey); padding-top: 80px; padding-bottom: 80px;}
.img-right .wrapper {justify-content: space-between; gap: 40px;}
.img-right .small-title {color: var(--dark-red);}
.img-right .heading-mdlg {max-width: 550px;}
.img-right .p-md {max-width: 700px; min-width: 430px;}
.img-right .check-list li i {background: var(--dark-red)!important;}
.img-right .wrapper > div:last-child {max-width: 900px; width: 100%;}
.img-right .black-box {padding: 35px; background: var(--black);}
.img-right .black-box ul li {align-items: center; gap: 10px;}
.img-right .black-box ul li .p-lg {color: var(--red)!important; font-weight: 500; font-family: 'oswald', sans-serif!important; letter-spacing: 1.4px;}
.img-right .black-box ul li .p-sm {color: var(--light-grey)!important;}
.img-right .black-box .heading-sm {color: var(--super-light-grey)!important; margin-bottom: 40px;}
.img-right .black-box ul li {margin-top: 15px;}
.img-right .img-height {max-width: 900px; height: 200px; margin-top: 25px;}
.img-right .img-height img {width: 100%; height: 100%; object-fit: cover;}

/*---quote-center---*/
.quote-center {padding-top: 70px!important; padding-bottom: 80px!important; font-family: 'oswald', sans-serif!important; text-align: center;}
.quote-center .p-quote {color: var(--dark-red); font-size: 120px; line-height: 120px; margin-bottom: 20px;}
.quote-center .heading-md {max-width: 1100px; margin: 0 auto; margin-bottom: 40px;}
.quote-center .p-lg {color: var(--dark-grey); font-weight: 700;}
.quote-center .p-md {color: var(--grey);}
.quote-center .flex {gap: 10px; justify-content: center; margin-top: 20px;}
.quote-center .flex i {font-size: 15px; color: var(--dark-red);}

/*---col-2---*/
.col-2 {padding-top: 80px!important; padding-bottom: 80px!important;}
.col-2 .small-title {color: var(--dark-red); justify-content: center;}
.col-2 .heading-mdlg {text-align: center;}
.col-2 > .flex:last-child {justify-content: center; gap: 40px; margin-top: 50px;}
.col-2 > .flex:last-child > div {padding: 35px; border: solid 1px #E5E7EB; max-width: 1000px; width: 100%;}
.col-2 > .flex:last-child > div > i {font-size: 20px; padding: 15px; color: #fff; margin-bottom: 20px;}
.col-2 .box-1 i {background: var(--dark-red);}
.col-2 .box-2 i {background: var(--black);}
.col-2 ul {margin-top: 20px;}
.col-2 ul li {margin-top: 5px; align-items: center; gap: 5px;}
.col-2 .box-1 ul li span {color: var(--dark-red);}
.col-2 ul li span {font-size: 30px;}

/*---col-4-title---*/
.col-4-title {background: var(--black); padding-top: 80px; padding-bottom: 120px;}
.col-4-title .small-title {justify-content: center; color: var(--red);}
.col-4-title .special-dash {border-bottom: #DF2A2A 3px solid;}
.col-4-title .heading-mdlg {text-align: center; color: #fff!important;}
.col-4-title .wrapper > div:last-child {justify-content: center; gap: 50px; margin-top: 100px;}
.col-4-title .wrapper > div:last-child > div {max-width: 700px; width: 100%;}
.col-4-title .heading-md {color: var(--red)!important;}
.col-4-title .heading-sm {color: #fff!important; font-size: 20px!important; letter-spacing: .35px;}
.col-4-title .p-sm {color: var(--light-grey);}

/*---col-3---*/
.col-3 {padding-top: 80px; padding-bottom: 80px;}
.col-3 > div:first-child {justify-content: space-between; align-items: flex-end; margin-bottom: 50px; gap: 30px; flex-wrap: wrap;}
.col-3 .heading-mdlg {margin-bottom: 0;}
.col-3 .small-title {color: var(--dark-red);}
.col-3 .cards-flex {gap: 30px;}
.col-3 .blog-card {max-width: 580px; width: 100%;}
.col-3 .img-height {max-width: 580px; width: 100%; height: 250px;}
.col-3 .img-height img {width: 100%; height: 100%; object-fit: cover;}
.col-3 .blog-card > div:last-child {padding: 40px 30px;}
#home .col-3 .blog-card > div:last-child {padding: 40px 15px;}
.col-3 .blog-card a {color: var(--dark-red); transition: all .4s ease-out; font-family: 'inter-18pt', sans-serif; font-size: 16px; font-weight: 600; text-transform: uppercase;}
#home .col-3 .blog-card a {text-transform: capitalize!important;}
.col-3 .blog-card a:hover {color: var(--red);}
.col-3 .blog-card .p-sm {margin-bottom: 15px;}
.col-3 .p-md {max-width: 1000px; margin-bottom: 40px;}

/*---center-red---*/
.centered-red {background: var(--dark-red); padding-top: 80px; padding-bottom: 80px;}
.centered-red .heading-mdlg {color: #fff; text-align: center; margin: 0 auto 20px; max-width: 1020px; width: 100%;}
.centered-red .p-lg, .centered-red .p-md {color: #fff!important; text-align: center; max-width: 640px; margin: 0 auto;}
.centered-red .btn-top {display: flex; justify-content: center;}
.centered-red .wrapper > .flex {justify-content: center; gap: 20px; margin-top: 40px; flex-wrap: wrap;}
.centered-red .wrapper > .flex .flex {background: rgba(255,255,255,.15); border: solid .5px #fff; padding: 20px 25px; align-items: center; gap: 15px;}
.centered-red i {color: #fff; font-size: 20px;}
.centered-red .flex .p-sm {text-transform: uppercase; color: rgba(255,255,255,.7)!important; margin-bottom: -5px;}
.centered-red .wrapper > .flex .flex a {color: #fff; font-family: 'oswald', sans-serif; font-size: 25px;}
.centered-red .wrapper > .flex .flex a:hover {text-decoration: underline;}

.centered-red .heading-sm {color: #fff; text-align: center; margin-top: 30px;}
.centered-red ul p {color: #fff; text-align: center;}

/*--------PAGE STYLES--------------------*/
/*---thankyou---*/
/*---about---*/
.center-list {padding-top: 80px!important; padding-bottom: 80px!important;}
.center-list .small-title {justify-content: center; align-items: center; color: var(--dark-red);}
.center-list .heading-mdlg {text-align: center;}
.center-list .p-md {text-align: center; margin: 0 auto 40px; max-width: 800px; width: 100%;}
.center-list > div:nth-child(4) {gap: 40px; justify-content: center;}
.center-list ul {flex-direction: column; gap: 20px;}
.center-list ul li {gap: 10px; align-items: center; margin-top: 15px;}
.center-list ul i {background: var(--dark-red) !important; padding: 5px; color: #fff;}
.center-list .btn-top {dispaly: inline-block; margin: 40px auto 0; text-align: center;}

#about .check-list li a {transition: all .4s ease-out;}
#about .check-list li a:hover {color: var(--red);}

/*---inner-blog---*/
.center-section {background: var(--super-light-grey); padding-top: 80px!important; padding-bottom: 80px!important;}
.center-section .p-md {text-align: center; max-width: 1200px; width: 100%; margin: 20px auto 0;}
.center-section .heading-mdlg, .center-section .heading-sm {text-align: center;}
.center-section .heading-sm {margin-top: 40px;}
.center-section .small-title {align-items: center; justify-content: center; color: var(--dark-red);}
.center-section ul {justify-content: center; gap: 20px; margin-bottom: 40px; flex-wrap: wrap;}
.center-section .check-list li i {background: var(--dark-red)!important;}

.blog-inner .img-right-big .heading-mdlg, .blog-inner .img-right-big .p-md {max-width: 900px!important; width: 100%;}
.col-2 .p-md {max-width: 1100px; width: 100%; margin: 0 auto; text-align: center;}
.bg-grey {background: var(--super-light-grey)!important;}
.blog-inner .centered-red .p-md {max-width: 1000px!important; margin: 20px auto 0;}

.custom-builds-delivered .p-md {margin: 0 auto; max-width: 900px; width:100%; color: #fff; text-align: center;}
.custom-builds-delivered i {margin-left: 10px;}
.custom-builds-delivered a {transition: all .4s ease-out; color: var(--red)!important;}
.custom-builds-delivered a:hover {color: #fff!important;}
.custom-builds-delivered h4 {margin-top: 20px; font-size: 20px; color: var(--red)!important;}

/*---trailer-pages---*/
.title-left {padding-top: 80px!important; padding-bottom: 80px!important;}
.title-left .sub-head {color: var(--dark-red);}
.title-left > div:last-child {justify-content: space-between; gap: 30px;}
.title-left .p-md {max-width: 1100px; width: 100%;}
.title-left .heading-mdlg {max-width: 500px; width: 100%;}

/*-custom-builds,tilt-*/
#custom-builds .col-3 .heading-mdlg, #tilt .col-3 .heading-mdlg  {margin-bottom: 20px;}
.img-right-big {background: #fff;}
.img-right-big .img-height {height: 600px; margin-top: 0;}

.custom-builds-delivered {background: var(--black); padding-top: 80px; padding-bottom: 80px;}
.custom-builds-delivered .sub-head {color: var(--red); text-align: center;}
.custom-builds-delivered .special-dash {border-bottom: #DF2A2A 3px solid;}
.custom-builds-delivered .small-title {justify-content: center; align-items: center;}
.custom-builds-delivered .heading-mdlg {color: #fff; text-align: center;}
.custom-builds-delivered .flex-boxes {gap: 30px; flex-wrap: wrap; justify-content: center; margin-top: 50px;}
.custom-builds-delivered .heading-sm {color: #fff;}
.custom-builds-delivered .p-sm {color: var(--light-grey);}
.custom-builds-delivered .box-outline {border: #fff solid 1px; padding: 25px; max-width: calc(32% - 10px); width: 100%; box-sizing: border-box;}
.custom-builds-delivered .p-top {margin: 40px auto 0;}

.img-right .wrapper .grey-box {padding: 35px; box-sizing: border-box; width: 100%; border: #383838 solid 1px;}
.img-right .spec-section {max-width: 900px; width: 100%; margin-top: 40px;}
.img-right .spec-section .flex {gap: 20px; margin-top: 20px;}
.img-right .spec-section .heading-mdlg {color: var(--dark-red); margin-bottom: 0 !important;}
.img-right .spec-section .heading-md {margin-bottom: 0 !important;}
.img-right .spec-section .p-sm {text-transform: uppercase;}

/*-tag-a-long,gooseneck-*/
#tag-a-long .img-right .p-md {margin-top: 20px;}
.img-right-inner .black-box .p-sm {color: var(--light-grey);}
.img-right-inner .img-height {height: 500px;}
#tag-a-long .col-3 > div:first-child, #gooseneck .col-3 > div:first-child, #lowboy .col-3 > div:first-child {justify-content: center;}
#tag-a-long .col-3 .small-title, #gooseneck .col-3 .small-title, #lowboy .col-3 .small-title {justify-content: center; align-items: center;}
#tag-a-long .col-3 > div:last-child, #gooseneck .col-3 > div:last-child, #lowboy .col-3 > div:last-child {display: flex; justify-content: center; align-items: center; margin-top: 40px;}
#tag-a-long .col-3 .heading-mdlg, #gooseneck .col-3 .heading-mdlg, #lowboy .col-3 .heading-mdlg {text-align: center;}

#gooseneck .about .wrapper > div:first-child .p-sm {color: var(--light-grey);}
#gooseneck .about .heading-sm {color: #fff; margin-top: 40px;}

/*---dealer-info---*/
#dealer-info .img-right .p-md, #dealer-info .img-right .heading-mdlg {max-width: 900px;}
#dealer-info .img-right .check-list, #about .img-right .check-list {margin-bottom: 40px;}
.dealer-form {background: var(--super-light-grey); }

/*---contact,quote,parts---*/
/*--------FORM STYLES--------------------*/
.quote-form .p-sm {max-width: 700px; text-align: left!important; margin-bottom: 20px;}
.form-all {box-sizing: border-box;max-width: 1100px!important; width: 100%;margin: 0 auto;text-align: center;padding-top: 80px!important; padding-bottom: 120px!important;}

.form-all .small-title {color: var(--dark-red); justify-content: center; align-items: center;}
.form-all .p-md {margin: 0 auto 40px; max-width: 950px; width: 100%;}

.label {font-family: 'inter-18pt', sans-serif;text-align: left!important;color: var(--dark-grey);}
.label-row {margin-bottom: 15px;}
.flex-row {display: flex;width: 100%; gap: 15px; margin-bottom: 15px;}

/*Form Half*/
.form-half {display: inline-block;width: 50%;}
.form-half input {padding: 15px;width: 100%;border: solid 1px #383838;background: none; font-family: 'inter-18pt', sans-serif; box-sizing: border-box;}

/*Form Message*/
.form-full textarea {width: 100%; padding: 15px; border: solid 1px #383838; background: none; box-sizing: border-box; margin-bottom: -8px; font-family: 'inter-18pt', sans-serif;}
.form-full {margin: 15px 0 30px 0;}

/*checkbox*/
.checkbox {text-align:left; margin-bottom:20px!important;margin-top: 0;}
.checkbox fieldset > label > .label-row {display: inline-block;}
.checkbox p {margin-bottom: 10px;}

/*--------Captcha--------------------*/
.include-captcha{display:none;}
#submit-btn {float: right;}
.CaptchaWhatsThisPanel > a, .CaptchaMessagePanel {color: #383838;font-family: 'inter-18pt', sans-serif;}
.CaptchaPanel {text-align: right!important;}
.captcha-button {float: right;}


/*-------- FOOTER STYLES ----------------*/
.my-site-footer {background: var(--black); padding-top: 80px;}
.my-site-footer .footer-top {justify-content: space-between; margin-bottom: 130px; gap: 50px;}
.my-site-footer .img-height img {max-width: 300px; width: 100%;}
.my-site-footer .footer-top .p-sm {max-width: 300px; color: var(--super-light-grey); margin-top: 10px; margin-bottom: 20px;}
.my-site-footer .footer-top li {margin-top: 10px;}
.my-site-footer .footer-top a {color: var(--super-light-grey); font-family: 'inter-18pt', sans-serif; font-size: 16px; transition: all .4s ease-out;}
.my-site-footer .footer-top a:hover {color: var(--red)!important;}
.my-site-footer .footer-top i {color: var(--dark-red); margin-right: 10px;}
.my-site-footer .footer-heading {color: #fff; font-family: 'oswald', sans-serif; margin-bottom: 40px; letter-spacing: 1.4px; font-size: 20px;}
.my-site-footer .footer-bottom {padding-bottom: 30px;}
.my-site-footer .footer-bottom p {color: var(--light-grey)!important;}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.list-top-section .list-listings-count, .parts-list-content .error-message, .parts-list-content .parts-title-and-breadcrumbs .parts-listings-count, #no-compare-listings, .bread-crumbs-heading .return-links i, .bread-crumbs-heading .return-links span {color: var(--dark-red)!important;}

.listing-prices__retail-price {color: var(--dark-grey)!important; font-family: 'oswald', sans-serif!important;}

.list-container-flexrow .view-listing-details-link, .faceted-search-content .selected-facets-container .selected-facet, .listing-carousel .recommended-listings-section .view-all-link, #compare-page-print-this, .ts-modal-container .form-bottom .captcha-and-submit .captcha-placeholder button, .ts-modal-container .form-bottom .captcha-and-submit .captcha-placeholder button, .print-list-top-section .print-event-header .print-this {background: var(--dark-red)!important; transition: all .4s ease-out!important;}
.list-container-flexrow .view-listing-details-link:hover, .faceted-search-content .selected-facets-container .selected-facet:hover, .listing-carousel .recommended-listings-section .view-all-link:hover, #compare-page-print-this:hover, .ts-modal-container .form-bottom .captcha-and-submit .captcha-placeholder button:hover, .ts-modal-container .form-bottom .captcha-and-submit .captcha-placeholder button:hover, .print-list-top-section .print-event-header .print-this:hover {background: var(--dark-grey)!important;}


/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (min-width: 2000px) {
	.my-site-header > .flex {padding: 0 15px; margin: 0 auto; max-width: 2000px; }
}

@media only screen and (max-width: 1200px) {
	.inventory .inventory-cards, .col-2 > .flex:last-child {gap: 20px;}
	.inventory .inventory-cards .box-outline {max-width: calc(50% - 15px);}
}

@media only screen and (max-width: 1100px) {
	.img-right-big .wrapper {flex-wrap: wrap;}
	.img-right-big .img-height {height: 300px; max-width: 1100px;}
	.img-right-big .wrapper > div:last-child {max-width: 1100px; width: 100%;}
	.center-list > div:nth-child(4) {gap: 10px; flex-wrap: wrap;}
	.center-list ul {gap: 10px;}
	.center-list ul {max-width: 370px; width: 100%;}
	#home .col-3 .cards-flex {flex-wrap: wrap;}
	#home .col-3 .blog-card, #home .col-3 .img-height {max-width: 1100px;}
}

@media only screen and (max-width: 1000px) {
	.col-4-title .wrapper > div:last-child {gap: 40px; flex-wrap: wrap;}
	.col-3 .blog-card > div:last-child, #home .col-3 .blog-card > div:last-child {padding: 30px 15px;}
}

@media only screen and (max-width: 930px) {
	.about .wrapper .grey-box, .img-right .wrapper .grey-box {padding: 30px;}
	.title-left > div:last-child {flex-wrap: wrap; gap: 0;}
}

@media only screen and (max-width: 900px) {
	.about .wrapper, .img-right .wrapper {flex-wrap: wrap;}
	.about .wrapper > div:first-child, .img-right .p-md {min-width: 100px;}
	.col-3 .cards-flex {flex-wrap: wrap;}
	.col-3 .blog-card, .col-3 .img-height {max-width: 900px;}
	.my-site-footer .footer-top {flex-wrap: wrap;}
	.my-site-footer .footer-heading {margin-bottom: 30px;}
	.img-right-inner .img-height {height: 300px;} 
}

@media only screen and (max-width: 800px) {
	.custom-builds-delivered .box-outline {max-width: calc(50% - 20px);}
}

@media only screen and (max-width: 730px) {
	.heading-lg {font-size: 50px; line-height: 55px;}
	.heading-mdlg, .about .wrapper .grey-box .heading-mdlg {font-size: 35px; line-height: 40px;}
	.heading-md {font-size: 25px; line-height: 35px;}
	.heading-sm {font-size: 18px; line-height: 19px;}
	.custom-builds-delivered h4 {font-size: 16px; line-height: 19px;}
	.p-lg {font-size: 18px; line-height: 25px;}
	.inventory .box-outline > div:last-child {padding: 15px 15px 30px 15px;}
	.quote-center .p-quote {margin-bottom: -20px;}
	.col-2 > .flex:last-child {flex-wrap: wrap;}
}

@media only screen and (max-width: 630px) {
	.home-hero .wrapper, .inner-hero .wrapper {padding-top: 80px!important; padding-bottom: 80px!important;}
	.quote-center {padding-bottom: 0!important;}
	.col-4-title, #tag-a-long .col-3, #gooseneck .col-3, #lowboy .col-3 {padding-bottom: 80px!important;}
	.col-3 {padding-bottom: 50px!important;}
	.flex-row {flex-wrap: wrap;}
	.form-half {width: 100%;}
}

@media only screen and (max-width: 530px) {
	.inventory .inventory-cards .box-outline, .custom-builds-delivered .box-outline {max-width: 100%;}
}

@media only screen and (max-width: 430px) {
	.inventory .small-title, .col-2 .small-title, .col-4-title .small-title {align-items: center!important;}
	.small-title {flex-direction: column; align-items: flex-start;}
}

@media only screen and (max-width: 400px) {
	.about .wrapper > div:last-child .flex, .img-right .spec-section .flex {flex-wrap: wrap;}
	.img-right .black-box, .col-2 > .flex:last-child > div {padding: 25px;}
	.heading-lg {font-size: 40px; line-height: 45px;}
}

