/***** BEGIN RESET *****/
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oleo+Script:wght@700&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;
}


/*---POP-UP -----------------------------------*/

*, *:after, *:before {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
}
.overlay {
        
}

.pop-col-1 {
    padding:0 0 20px 0;
}


.pop-up-content p {
    text-align: center;
    font-size:30px;
    font-weight: 700;
    color:#1b2565;
    font-family: 'Barlow', sans-serif;
    line-height: normal;   
}
.pop-up-content p span {
    font-weight: 500;
    font-size:24px;
}
.popup .close {
    position: absolute;
    top: 10px;
    right: 15px;
                transition: all 0.2s;
                font-size: 30px;
                font-weight: bold;
                text-decoration: none;
                color: #000;
                border: 1px solid #fff;
                padding:0 5px 5px 5px;
}
.popup .close:hover {
  background: #000;
    color:#fff;
}
.popup .content {
  max-height: 60%;
  overflow: auto;
}

/*Let's make it appear when the page loads*/
.overlay:target:before {
    display: none;
}
.overlay:before {

}
.overlay .popup {
                background: #f1f1f1;
                border:3px solid #fff;
                border-radius: 30px;
                width: 90%;
                max-width: 600px;
                position: fixed;
                top: 6vw;
                left: 0;
                right: 0;
                float:none;
                padding: 40px;
                box-sizing: border-box;
                margin: 0 auto;
                text-align:left;
                -webkit-transition: all 0.6s ease-in-out;
                -moz-transition: all 0.6s ease-in-out;
                transition: all 0.6s ease-in-out;
                color:#000;
                font-size: 16px;font-weight: 400;
    animation: fade-in 15s ease-in-out both;
}
.overlay:target .popup {
    top: -180%;
    left: -100%;
}


@keyframes fade-in {
  0% {
    opacity: 0;
      z-index: -1;
  }
  98% {
    opacity: 0;
      z-index: -1;
  }
  100% {
    opacity: 1;
      z-index: 999999999999;
  }
}

.form-flex {
    display: flex;
    flex-wrap: wrap;
    gap:20px;
}
.pop-up-input {
    width:100%;
    box-sizing: border-box;
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.05);
}

.inv-cat-popup {
    position: fixed;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    background:rgba(0,0,0,0.6);
    display: none;
    z-index: -1;
    animation: fade-2 1s ease-in-out both;
    padding-top:6vw;
    overflow: auto;
}
.inv-cat-popup-cont {
    background: #f1f1f1;
    border:3px solid #fff;
    border-radius: 30px;
    width: 90%;
    max-width: 600px;
    float:none;
    padding: 40px;
    box-sizing: border-box;
    margin: 0 auto;    
    z-index: 1;
    overflow: auto;
    position: relative;
}
.inv-cat-popup-cont .close {
    position: absolute;
    top: 10px;
    right: 15px;
    transition: all 0.2s;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #000;
    border: 1px solid #fff;
    padding:0 5px 5px 5px;
}
.inv-cat-popup-cont .close:hover {
  background: #000;
    color:#fff;
}
.inv-cat-popup h3 {
    text-align: center;
    text-transform: uppercase;
    padding-bottom:10px;
}
.inv-cat-popup ul {
    display: flex;
    flex-wrap: wrap;
    gap:10px;
    padding:10px 0 0 0;
}
.inv-cat-popup ul li {
    padding:0;
    margin:0;
    list-style: none;
    width:calc(50% - 5px);
}
.inv-cat-popup ul li a {
    background: #1b2565;
    padding: 11px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    display: block;
    letter-spacing: 1px;
    transition: .5s ease;
    text-transform: uppercase;
}
.inv-cat-popup ul li a:hover {
    background: #000;
}
.inv-cat-popup.open {
    display: block;
}

@keyframes fade-2 {
  0% {
    opacity: 0;
      z-index: -1;
  }
  100% {
    opacity: 1;
      z-index: 500;
  }
}


/*-------- BODY STYLES --------*/

body, p {
font-family: 'Barlow', sans-serif;
	font-size: 18px; 
	line-height: 26px;
}
h1, h2, h3, h4, h5 {font-family: 'Barlow', sans-serif; letter-spacing: 1px;}
a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}
a:hover .fas {color:#7C9FDD; transition: .3s ease;}

hr{border:#000 .5px solid;}
a:hover {transition: .3s ease;}
.width-90 {width: 90%; margin: 0 auto;}
.width-80 {width: 80%; margin: 0 auto;}
.width-70 {width: 70%; margin: 0 auto;}
.width-60 {width: 60%; margin: 0 auto;}
.padding25, #padding25 {padding: 25px 0}
.padding50, #padding50 {padding: 50px 0}
.padding100, #padding100 {padding: 100px 0}

.bl-btn {background:#1b2565; padding: 15px 40px; color:#fff; text-align: center; text-transform: uppercase; font-size: 16px; letter-spacing: 1px; font-weight: 700; transition: .5s ease; display:inline-block; vertical-align:middle; margin:2px 0; }
.bl-btn:hover {background:#121946;  border-radius: 0; }
.black-btn {background:#000; padding: 15px 40px; color:#fff; text-align: center; text-transform: uppercase; font-size: 16px; letter-spacing: 1px; font-weight: 700;  display:inline-block; vertical-align:middle; transition: .5s ease; }
.black-btn:hover {background:#212121; border-radius: 0; }
.white-btn {background:#fff; padding: 15px 40px; color:#000; text-align: center; text-transform: uppercase; font-size: 16px; letter-spacing: 1px; font-weight: 700;  display:inline-block; vertical-align:middle; transition: .5s ease;}
.white-btn:hover {background:#f1f1f1;  border-radius: 0;  }

.bold {font-weight: 900;}

hr {height: .25px; background: #ddd; border:0;}

.lt-gray-bg {background: #f1f1f1; display: inline-block; width: 100%;}
/*--- HEADER STYLES ---------------------*/
.white-overlay {background:#f1f1f1}
.header {display: flex; flex-wrap: wrap; align-items: center; width: 100%; margin: 0 auto; padding:0 2%;box-sizing: border-box; background:rgba(255,255,255,0.7);}
.logo {width: 20%; padding-top:10px;}
.logo img {max-width: 250px; width: 100%;}
.header-right {width: 80%; text-align: right;}
.info-right { display: flex; justify-content: flex-end;align-items: center;gap:0 10px;}
.header-btn {background: #000; padding: 11px 25px; color:#fff; font-weight: 600; text-align: center;display: inline-block;  letter-spacing: 1px; transition: .5s ease;}
.header-btn:hover {background: #1b2565;  border-radius: 0; }
.header-btn-1 {background: #1b2565; padding: 11px 25px; color:#fff; font-weight: 600; text-align: center;display: inline-block;  letter-spacing: 1px; transition: .5s ease;}
.header-btn-1:hover {background: #000;  border-radius: 0; }
.info-right .fab {background: #1B2565; width: 40px; padding: 15px 0; color:#fff; text-align: center; transition: .2s ease;}
.info-right .fab:hover {background: #121946; width: 40px; padding: 15px 0; color:#fff; text-align: center}
.info-mobile {
    display: none;
}

.slider-financing {
    width:100%;
    padding:40px;
    box-sizing: border-box;
}
.slider-financing a {
    font-size: 2vw;
    color:red;
    text-align: center;
}
.slider-financing a:hover {
    opacity: 0.9;
}

/*---BODY--------------------------------*/
.hero {background: url("/siteart/hero-bg-3.jpg"); background-size: cover; min-height: 600px; background-position: center center; position: relative;background-color:#000;}
.hero-text {padding: 3% 0;}
.hero-text h1 {font-size: 45px; line-height: 50px; font-weight: 400; color:#fff; text-shadow: 1px 2px 3px #333;}
.hero-text h2 {font-size: 85px; line-height: 82px; font-weight: 800; color:#fff;text-shadow: 1px 2px 3px #333;}
.hero-text .bl-btn {margin-top:25px;}

.hero-text2 {padding: 3% 0;}
.hero-text2 h1 {font-size: 45px; line-height: 50px; font-weight: 400; color:#1B2565; }
.hero-text2 h2 {font-size: 85px; line-height: 82px; font-weight: 800; color:#1B2565;}
.hero-text2 .bl-btn {margin-top:25px;}

.home-video-cont {
    width: 100%;
    background: #000;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 200px;
}
.home-video-cont video {
    max-width: 550px;
    width:100%;
    height: auto;
    margin:0 auto;
    display: block;
}
.hero-banner-1 {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background:#000;
    margin:20px 0;
}
.img-left {
    width:30%; 
    padding:20px;
    box-sizing: border-box;
}
.img-left img {
    max-width: 200px;
    height: auto;
    width:100%;
    display: block;
    margin:0 auto;
}
.banner-middle {
    width:40%; 
    padding:20px;
    box-sizing: border-box;
    text-align: center;
}
.banner-middle p {
    font-size: 24px;
    color:#fff;
    font-weight: 700;
    margin-bottom:20px;
}
.banner-middle p span {
    font-size: 30px;
    color: #fff;
    font-weight: 400;
    margin-top: 10px;
    display: block;
}
.img-right {
    width:30%; 
    box-sizing: border-box;
}
.img-right img {
    max-width: 350px;
    height: auto;
    width: 100%;
    display: block;
    margin: 0 auto;
    border: 20px solid #000;
}

.great-lakes {background: url(/siteart/great-lakes-overlay.jpg); background-size: cover; background-attachment: fixed; padding: 3.5% 0; text-align: center;  width: 100%; margin: 1% auto;}
 .great-left {width: 30%; margin-right: 2%;}

 .great-left h4 {color:#000; font-size: 30px; line-height: 35px; text-align: left;}
 p.great-right { color:#000; text-align: left; width: 70%; margin: 0 auto; }


.ql {background: #fff;  padding-bottom: 2%; padding-right: 2%; padding-left: 2%; width: 31%; margin:3% .5% 0 .5%; transition: .3s ease;  }
.ql .fas-btn {background:#1b2565; border-radius: 50px; padding: 10px 15px; text-align: center; color:#fff; margin-top:-32px; display: inline-block; font-size: 18px;}
.ql h3 {padding-top:4%; color:#fff; font-size: 18px; letter-spacing: 1px; font-weight: 800;}
.ql:hover {background:#1b2565; color:#fff; transition: .3s ease; margin: 1% .5% 0 .5%;}
.ql:hover .fas-btn {background: #fff; color:#000;}
.ql#shop {background:url(../siteart/service-ql/shop.jpg); background-size: cover; transition: .3s ease; background-position: bottom;background-color:#000;}
.ql#shop:hover {  margin: 2% .5% 0 .5%;}
.ql#trailerrepair {background: url(../siteart/trailer-repair-learn.jpg); background-size: cover; transition: .3s ease; background-position: bottom;background-color:#000;}

.ql#mobilerepair {background: url(../siteart/service-learn.jpg); background-size: cover; transition: .3s ease; background-position: center;background-color:#000;}
.ql#request {background: url(../siteart/service-request-learn.jpg); background-size: cover; transition: .3s ease; background-position: center;background-color:#000;}
.ql#contact {background: url(/siteart/service-ql/contact.jpg); background-size: cover; transition: .3s ease; background-position: center;background-color:#000;}
.ql#staff {background: url(/siteart/service-ql/staff.jpg); background-size: cover; transition: .3s ease; background-position: center;background-color:#000;}
.ql#resources {background: url(/siteart/service-ql/resources.jpg); background-size: cover; transition: .3s ease; background-position: center;background-color:#000;}


a.exclusive {background-image: url(/siteart/exclusive-hover.png); background-size: cover; text-align: center;  border-radius: 20px; display: inline-block; width: 100%; margin-top:15px; transition: .5s ease; margin-top:3%;background-color:#000;}
a.exclusive:hover {background-image: url(/siteart/trailerdealers.png); transition: .5s ease;background-color:#000;}
a.exclusive h3 {color:#fff;font-size: 35px;font-weight: 300}
a.exclusive h4 {color:#fff;  padding-top:10px;}
a.exclusive:hover h3 { color:#1b2565; }
a.exclusive:hover h4 {color:#1b2565;}

.flex-center {display: flex; flex-direction: row; align-items: center; position: relative; }

.flex-just {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between}


.flex-cont-2 {display: flex; flex-direction: row; justify-content: space-between; position: relative; flex-wrap: wrap;}
.dryvan-left {width: 60%; }
.dryvan-left img {width: 90%;}
.dryvan-right {width: 40%; margin: 0 auto; text-align: center; padding: 5% 5%; background:rgba(249,249,249,.3); }
.dryvan-right h2 {text-align: center; font-size: 48px; line-height: 50px; font-weight: 500;  letter-spacing: 2px;}
.dryvan-right p {font-size: 18px;  line-height: 25px; max-width: 300px; width: 100%; text-align: center; margin: 0 auto; padding: 25px 0;}
.dryvan-right .fa-circle {font-size: 5px;}
.dryvan-right .bl-btn, .dryvan-right .black-btn {margin: 0% 2%}

.parts-store {background:url(/siteart/PartsRoom2.jpg); background-size: cover; background-position: center;  border-top-right-radius: 25px; border-bottom-right-radius: 25px; width: 50%; padding: 15% 0;background-color:#000;}
.parts-store h2 {color:#fff; text-align: center; font-size: 70px; font-weight: 400; line-height: 60px; letter-spacing: 2px;}
.parts-text {background: #131313; margin-left: 1%; width: 50%; transition: .3s ease; padding: 9% 0; }
.parts-text h2 {font-size: 40px; line-height: 42px; color:#fff;}

.parts-text:hover {background:#212121; margin-left: 1%; width: 50%;}
.parts-text p {color:#fff; font-size: 18px; line-height: 26px; padding: 25px 0;}
.parts-text a {color:#fff; font-weight: 600; padding-bottom: 25px; transition: .3s ease; letter-spacing: 1px;}
.parts-text a:hover .fas {color:#7C9FDD; transition: .3s ease;}
.parts-text a .white-btn .fas { color:#1b2565; transition: .3s ease;}
.parts-text a .white-btn:hover .fas, .parts-text a .white-box:hover .fas {margin-left: 0; color:#7C9FDD;}
.parts-text a .white-btn:hover { transition: .3s ease; border-radius: 0; }
.parts-text a .white-box {padding: 15px 25px; color:#1b2565; margin-left: 2%; display: inline-block; vertical-align: middle;background: #fff; transition: .3s ease; }
.parts-text a .white-box:Hover {border-radius: 10px; }

.welcome.let-us-know h3 {text-align:center;margin-bottom:20px;}

.part-logo-cont {
    width:90%;
    margin:0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.part-logo-cont-1 {
    width:11%;
    margin:20px auto;
}


.flex-stretch {display: flex; flex-direction: row; align-items: stretch;}
.mobile-repair {width: 50%; border-top-left-radius: 25px; border-bottom-left-radius: 25px; padding:10% 0;background: #1b2565}
.mobile-repair p {color:#fff; padding: 25px 0;}
.service-icon {margin-top:25px;}
.mobile-repair .service-icon a .fa-cogs, .mobile-repair .service-icon a .fa-tools {padding: 15px 0; width: 50px;  color:#1b2565; text-align: center; margin-right: 25px; background: #fff;margin: 5px 0;transition: .5s ease;}
.mobile-repair .service-icon a:hover .fa-cogs, .mobile-repair .service-icon a:hover .fa-tools {border-radius: 10px; transition: .5s ease; box-shadow: 1px 1px 5px #000; color:#7C9FDD}
.mobile-repair h2 {font-size: 40px; line-height: 42px;}
.mobile-repair .service-icon a:hover .fas {color:#7C9FDD; transition: .3s ease;}
.mobile-repair .service-icon a {color:#fff; text-transform: uppercase;  font-weight: 600; letter-spacing: 1px;}
.mobile-image {background: url(/siteart/service.jpg); background-size: cover; background-position: center; width: 50%; border-top-right-radius: 25px; border-bottom-right-radius: 25px; text-align: center; position: relative}
.mobile-image h2 {font-size: 50px; line-height: 48px; color:#fff; font-weight: 400; margin-top:20%; letter-spacing: 2px;}

.flex-top {display: flex; flex-direction: row; }
.gray-radius {background: #F7F7F7; border-radius: 25px; width: 40%; height: 500px; margin-left: 10%; margin-top:5%; margin-bottom: -500px;}
.trailer {margin-left: 0%;width: 40%;}
.trailer img {width: 100%;}
.trailer-text {width: 50%;  padding: 5% 3%; margin-left: 5%; max-height: 300px;}
.trailer-text h2 {font-size: 50px; font-weight: 500; line-height: 50px;}
.trailer-text p {padding:25px 0; max-width: 650px; width: 100%;}
.trailer-text a {color:#000; font-weight: 700; letter-spacing: 1px;}
.trailer-text a:hover .fas {color:#7C9FDD; transition: .3s ease;}

.testimonial {background: #212121;}
.testimonial h2 {font-size: 45px; line-height: 45px; font-weight: 500; color:#fff;}
.testimonial p {color:#fff;}

/* SERVICE */
.service-hero {background: url(/siteart/service-hero2.jpg); background-size: cover; background-position: bottom}
.col-4 {  width: 25%; margin: 3% .5%; padding: 2% 3% 5% 3%;}
.p-s-bottom-links-cont {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:5px;
    margin:10px auto 50px auto;
}

.p-s-bottom-links {
    width:24%;
    min-height: 200px;
    padding:2% 3% 5% 3%;
    box-sizing: border-box;
}
.p-s-bottom-links#switchers {background: #333; background-size: cover; transition: .3s ease; background-position: bottom}
.p-s-bottom-links#switchers:hover {background: #ccc; background-size: cover;background-position: bottom}
.p-s-bottom-links#trailerrepair {background: url(../siteart/trailer-repair-learn.jpg); background-size: cover; transition: .3s ease; background-position: bottom;background-color:#000;}
.p-s-bottom-links#trailerrepair:hover {background: url(../siteart/trailer-repair-learn-hover.jpg); background-size: cover;background-position: bottom;background-color:#000;}
.p-s-bottom-links#mobilerepair {background: url(/siteart/service-learn.jpg); background-size: cover; transition: .3s ease; background-position: bottom;background-color:#000;}
.p-s-bottom-links#mobilerepair:hover {background: url(/siteart/service-learn-hover.jpg); background-size: cover;background-position: bottom;background-color:#000;}
.p-s-bottom-links#request {background: url(/siteart/service-request-learn.jpg); background-size: cover; transition: .3s ease; background-position: bottom;background-color:#000;}
.p-s-bottom-links#request:hover {background: url(/siteart/service-request-learn-hover.jpg); background-size: cover;background-position: bottom;background-color:#000;}
.p-s-bottom-links#utility {
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.60) 0%,rgba(0,0,0,0.60) 100%), url(../siteart/utility-trailer-repair-learn.jpg);
    background-image: -moz-linear-gradient(270deg,rgba(0,0,0,0.60) 0%,rgba(0,0,0,0.60) 100%), url(../siteart/utility-trailer-repair-learn.jpg);
    background-image: -o-linear-gradient(270deg,rgba(0,0,0,0.60) 0%,rgba(0,0,0,0.60) 100%), url(../siteart/utility-trailer-repair-learn.jpg);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.60) 0%,rgba(0,0,0,0.60) 100%), url(../siteart/utility-trailer-repair-learn.jpg);
    background-size: cover;
    transition: .3s ease;
    background-position: bottom
}
.p-s-bottom-links#utility:hover {
    background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,0.40) 0%,rgba(0,0,0,0.40) 100%), url(../siteart/utility-trailer-repair-learn.jpg);
    background-image: -moz-linear-gradient(270deg,rgba(0,0,0,0.40) 0%,rgba(0,0,0,0.40) 100%), url(../siteart/utility-trailer-repair-learn.jpg);
    background-image: -o-linear-gradient(270deg,rgba(0,0,0,0.40) 0%,rgba(0,0,0,0.40) 100%), url(../siteart/utility-trailer-repair-learn.jpg);
    background-image: linear-gradient(180deg,rgba(0,0,0,0.40) 0%,rgba(0,0,0,0.40) 100%), url(../siteart/utility-trailer-repair-learn.jpg);
    background-size: cover;
    transition: .3s ease;
    background-position: bottom
}
.p-s-bottom-links h2 {color:#fff; font-weight: 800; padding-top:2%;}
.p-s-bottom-links h4 {color:#fff; font-weight: 500;}

/* AUTOCAR */
.carbon-hero {background: url(/siteart/carbonfiber-bg.jpg); background-size: cover; background-position: center;background-color:#000;}
.autocar-hero {}
.blk-bg {background: #212121; text-align: center; margin: 0 auto; padding: 25px 0;}
.blk-bg img {text-align: center; margin: 0 auto; max-width: 100%; width: 100%; display: block;box-sizing: border-box;}
/* MOBILE REPAIR */
.mobile-hero {background: url(/siteart/mobile-hero-blue.jpg); background-size: cover;}
.welcome p {padding: 25px 0; }
.welcome p a {color:#1B2565; font-weight: 600}
.welcome p a:hover {color:#7C9FDD; font-weight: 600}
.resources p {padding: 25px 0; }
.resources p a {color:#1B2565; font-weight: 600}
.resources p a:hover {color:#7C9FDD; font-weight: 600}
.resources .bl-btn {width:100%; display: block; background: none; color:#000; text-decoration: underline; text-align: left; transition: .2s ease; padding: 10px 0; }
.resources .bl-btn:hover {color:#848484; }
.col-2-bg {background: #f3f3f3; padding: 5% 5%; border-radius: 25px; width: 40%;}
.col-2-bg2 {background: url(/siteart/box-bg.jpg); background-attachment: fixed; padding: 5% 5%; border-radius: 25px; width: 40%;}

.col-1-2-bg {background: #f3f3f3; margin:0 0 2.25% 0; padding: 5% 5%; border-radius: 25px; width: 49%;}

.col-2 {width: 50%; margin: 1% 1%;}
.col-2 img {width: 100%;}

.col-img-section-1 {
     margin: 1% 1%;
    width: 40%;
}

.col-img-section-2 {
     margin: 1% 1%;
    width: 28%;
}

.col-img-section-1 img {width: 100%;}
.col-img-section-2 img {width: 100%;}

/* SERVICE REQUEST */
.lt-gray {background: #f3f3f3; padding: 5% 0; border-radius: 25px;}

/* ABOUT US */
.gray-bg {background:rgba(245,245,245,.30); padding: 3% 0;}
.gray-bg h1 {font-size: 50px; line-height: 55px; text-align: center; color:#000}
.gray-bg h1 .fas {color:#7C9FDD}
.gray-bg  p {text-align: center; padding: 20px 0;}
.team {width: 27%; margin: 1% 1%; background: #fff; padding: 2% 2%;}
.team img {width: 100%;border-radius: 20px;filter:drop-shadow(0 0 10px rgba(0,0,0,0.1));}
.team h3 {font-size: 25px; font-weight: 800; padding-bottom: 15px;}
.team h4 {font-family: 'Oleo Script', cursive; font-size: 30px; padding: 15px 0; text-align: center;}
.team .black-btn {width: 100%; padding: 15px 0; margin-bottom: 5px; }
.team .bl-btn {width: 100%; padding: 15px 0; margin-bottom: 5px;}

.flex-cont-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text-cont-1 {
    width:60%;
}
.video-cont-1 {
    width:39%;
}
.video-cont-1 iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.com-img-cont {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.com-img-cont div {
    margin:20px 0;
}
.col-1-3 {
    width:32%;
}
.col-1-2 {
    width:48%;
}
.com-img-cont img {
    width:100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.video-cont {
    width:100%;
    height: auto;
    margin:0 0 20px 0;
}

.flex-cont-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top:20px;
}
.testimonial-1 {
    padding:20px;
    box-sizing: border-box;
}


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

.form-hide {
    display: none;
}

.flex-form{
	width:100%;
	text-align: left;
	margin: 0 auto;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	font-size: 15px;
}

.flex-form h3{
	width:100%;
	text-transform: uppercase;
	font-weight: 600;
	border-top:2px solid #eee;
	padding:20px 0 20px 0;
	margin-top:40px;
	font-family: 'Barlow', sans-serif;
}

.flex-form h4{
	width:100%;
	text-transform: uppercase;
	font-weight: 600;
	margin-top:40px;
	padding:10px 0;
	font-size: 16px;
}
.flex-form label{font-weight: normal;font-family: 'Barlow', sans-serif;}

.flex-form span{text-align: left; margin: 0; font-size: 12px;font-family: 'Barlow', sans-serif;}


.flex-form #formpage input, select{margin-top:5px;}

.flex-form .flex-row{
	display: flex; 
	justify-content: space-between; 
	align-items: flex-end; 
	width: 100%;
}

.flex-border{
	border:2px solid #eee;
	padding:20px;
}

.flex-input{
	width:100%;
	display: flex;
	flex-direction: column;
	margin: 10px 5px 5px 5px;
	text-align: left;
	font-family: 'Barlow', sans-serif;
}



.check-container {display: inline-block; text-align: left; margin: 0;}
.check-container input[type="checkbox"]{display: inline-block; width:20px !important;}
	



/*form styles*/
.parts-request{
	width:100%;
	padding:40px 0;
	text-align:left;
	margin-top:40px;
	border-top:1px solid #eaeaea;
}

.parts-request h3{text-transform:uppercase;font-family: 'Barlow', sans-serif;}

#formpage {
	width:100%;
	vertical-align: top;
	display:inline-block;
	text-align:left;
}

#formpage p{
	text-align:left;font-family: 'Barlow', sans-serif;
}
#formpage h4{margin-top:30px;font-family: 'Barlow', sans-serif;}

.form-half{
	width:48%;
	display: inline-block;
	vertical-align: middle;
	margin: 10px;
}

.add-part{
	padding:30px;
	border:1px solid #f1f1f1;
	margin:20px 0 0 0
}
.add-part h4{margin:0 0 10px 10px !important;font-family: 'Barlow', sans-serif;}


.formfield {
	width: 100%;
	display:inline-block;
	margin-right: 10px;
	margin-top: 10px;
	min-width: 175px;
	text-align:left;
	font-family: 'Barlow', sans-serif;
}

#formpage input,select {
	padding: 6px 5px 10px;
	border: 1px solid #fff;
	font-family: 'Barlow', sans-serif;
	color: #000;
	font-size: 16px;
	margin-top: 5px;
    border-radius: 2px;
	background:#fff;
}

#formpage input:focus {
	border: 1px solid #fff;
	border-radius:2px
}

#formpage option{color:#333;background:#fff;font-family: 'Barlow', sans-serif;}

/*===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 input.submit-button, #formpage input.submit-button:focus, .submit-button-1 {
	background:#333; 
	color:#fff;
	padding:15px;
	text-decoration:none;
	transition:ease-in .3s;
	font-size: 16px; 
	font-weight: 600;
	width: 150px;
	border:none;
	height:auto;
	border-radius: 10px;
	font-family: 'Barlow', sans-serif;
    cursor: pointer;
    text-align: center;
}



#formpage input.submit-button:hover, .submit-button-1:hover{
	background:#7C9FDD; 
	border-radius: 0px;
	font-family: 'Barlow', sans-serif;
	transition:ease-out .3s;
}

input[type="button"],
input[type="submit"] {
	-webkit-appearance: none;
}

#formpage textarea {
	padding: 6px 5px;
	border: 1px solid #fff;
	color: #000;
	font-size: 16px;
	background: #fff;
	width: 100%;
	height: 85px;
	border-radius:2px;
	margin-top:10px;
	font-family: 'Barlow', sans-serif;
    box-sizing: border-box;
}

#formpage textarea:focus{
	border: 1px solid #eaeaea;
	border-radius:2px;
	font-family: 'Barlow', sans-serif;
} 

.CaptchaPanel{width:100%; text-align: center; margin: 0 auto; }

.CaptchaImagePanel img{width:200px;text-align: center; margin: 0 auto; }

.CaptchaAnswerPanel{
	width:250px;text-align: center; margin: 0 auto; 
}
.CaptchaWhatsThisPanel a{color:#333;font-family: 'Barlow', sans-serif;text-align: center; margin: 0 auto; }

.submit-button{
	padding:10px 0px 10px 0px;
	position:relative;
	width:100%;
	text-align:center;
}

/*end form styles*/




@media screen and (max-width: 1170px)  {
	.form-half{width: 46%;}
}

@media screen and (max-width: 1000px)  {
    .part-logo-cont-1 {
        width:23%;
    }
    .slider-financing a {
        font-size: 22px;
    }
}

@media screen and (max-width: 900px)  {
	.flex-form .flex-row{flex-wrap: wrap;}
    .img-left, .banner-middle {
        width:50%;
    }
    .img-right {
        width:100%;
    }
    .text-cont-1 {
        width:100%;
    }
    .video-cont-1 {
        width:100%;
    }
    
}

@media screen and (max-width: 700px)  {
	.form-half{width: 98%;}
    .pop-up-content p {
        font-size:24px;   
    }
    .pop-up-content p span {
        font-size:16px;
    }
    .overlay .popup {
      max-height: 90vh;
      overflow: auto;
    }
    .slider-financing a {
        font-size: 20px;
    }

}

@media screen and (max-width: 450px)  {
	.add-part{padding: 20px;}
    .part-logo-cont-1 {
        width:31%;
    }
    .img-left, .banner-middle {
        width:100%;
    }
    .slider-financing a {
        font-size: 7vw;
    }
	
	.flex-foot .col-3 .column-count {
		column-count: 1;
	}
}




/*-------- FOOTER STYLES ----------------*/
footer{background: #000; margin-top:-5px;}
.flex-foot {display: flex; flex-direction: row; align-items: stretch;}
.col-3 .column-count {column-count: 2; column-gap: 25px;}
.col-3 {width: 33%;}
.col-3 h3 {color:#fff; font-weight: 700; font-size: 22px; text-transform: uppercase; padding-bottom: 10px;}
.col-3 p, .col-3 a {color:#fff; text-transform: uppercase; font-size: 18px; line-height: 30px; transition: .3s ease;}
.col-3 a .fab {font-size: 22px; margin: 5px 3px;}
.col-3 a .fab:hover {color:#7C9FDD; border-bottom: 0px solid transparent;}
.col-3 a svg {color:#000; transition: .3s ease;}
.col-3 a:hover svg {color:#7C9FDD; transition: .3s ease;}
.col-3 a[href^="tel:"] {color:#fff !important;}

.col-3:last-child{text-align: center;}
.col-3:last-child a{display: inline-block; margin: 6px auto; font-size: 14px;}
.col-3 img {display: block; max-width: 200px; width: 100%; margin: auto;}

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

/* INVENTORY STYLES */

.list-content .list-main-section .list-container .list-listing .listing-top-right .view-listing-details-link, .faceted-search-content .selected-facets-container .selected-facet, .list-content .list-listing-mobile .view-listing-details-link, .list-content .list-listing-mobile .buy-now-link, .list-content .list-listing-mobile .check-availability-link, .list-content .list-listing-mobile .email-seller-link, .detail-content .detail-main-body .main-detail-data .offer-btn, .detail-content .detail-main-body .main-detail-data .buy-btn, .detail-content-mobile .detail-main-body .main-detail-data .dealer-phone-mobile-container .dealer-phone-mobile, .detail-content-mobile .detail-main-body .main-detail-data .offer-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .send-email-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .send-wholesale-email-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .fin-calc-btn-mobile, .list-container-flexrow .view-listing-details-link, .modal-content .form-bottom .captcha-and-submit .captcha-placeholder button {background:#1B2565 !important; color:#fff !important}


.list-content .list-title .list-title-text, .detail-content-mobile .detail-main-body .detail-mobile-top .detail-title {font-size: 22px; line-height: 26px;}

.detail-content .detail-additional-data .data-row .data-label, .detail-content-mobile .detail-additional-data .data-row .data-label {background:#1B2565!important; color:#fff !important; text-transform: uppercase; letter-spacing: 1px;font-family: 'Barlow', sans-serif;}
.detail-content-mobile .detail-contact-bar .contact-bar-btn, .faceted-search-content .mobile-done-button-container .mobile-done-button {background: #000 !important; color:#fff !important}

.detail-content .detail-main-body .main-detail-data .offer-btn, .detail-content .detail-main-body .main-detail-data .buy-btn {float:none;}
.modal-content .modal-top .modal-title, .listing-description, .list-content .listing-portion-title, .list-content .list-title .list-title-text, .detail-content .dealer-info h3, .dealer-info, .detail-content-mobile .dealer-info h3, .fin-calc p, .detail-content-mobile .detail-main-body .detail-mobile-top .detail-title {color:#000 !important;font-family: 'Barlow', sans-serif;}
body .noUi-connect {background: #000; border: 1px solid #000;}
body .noUi-handle {background: #1B2565;}
.faceted-search-content .faceted-section-box .faceted-slider .sliderLabel input[type='text'] {border:1px solid #000 !important;}
.faceted-search-content .faceted-section-head h5, .faceted-search-content .selected-facets-container .selected-header strong {font-weight: 600; text-transform: uppercase !important;font-family: 'Barlow', sans-serif;}
.faceted-search-content .faceted-section-box .faceted-option-checkbox-container .option-name {font-family: 'Barlow', sans-serif; font-size: 14px; letter-spacing: 2px;font-weight: 500; line-height: 14px !important; margin-left: 5px;}
.modal-content .modal-top .modal-title, .listing-description, .list-content .listing-portion-title, .list-content .list-title .list-title-text, .detail-content .dealer-info h3, .dealer-info, .detail-content-mobile .dealer-info h3, .fin-calc p, .detail-content-mobile .detail-main-body .detail-mobile-top .detail-title {font-size: 14px; font-family: 'Barlow', sans-serif; font-weight: 500; }
.row:nth-child(even) {background: transparent !important;}





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

@media only screen and (max-width: 1400px) {
	.logo {width: 15%;}
	.header-right {width: 85%}
	
}

@media only screen and (max-width: 1300px) {
	.width-70 {width: 90%;}
	.width-80 {width: 90%;}
	.gray-radius {height: 400px; margin-bottom: -400px;}
}

@media screen and (max-width:1259px){
    .header {
        padding:0 20px;
        justify-content: center;
        gap:0 20%;
    } 
    .header-right {
      width: 100%;
         display: flex;
        text-align: center;
        justify-content: center;
    }
    .header-btn, .header-btn-1 {
        padding: 10px;
        font-size: 14px;
    }
    .info-right {display: none;}
    
    .info-mobile {
        display: flex;
        gap:0 20px;
    }
    
}

@media only screen and (max-width: 1100px) {
	.hero-text h1 {font-size: 30px; line-height: 28px;}
	.hero-text h2 {font-size: 60px; line-height: 55px;}
	a.exclusive h3 {line-height: 35px;}
	.flex-center {display: block}
	.flex-stretch, .flex-top {display: block;}
	.dryvan-left {width: 100%;}
	.dryvan-right {width: 90%;}
	#padding100 {padding: 25px 0}
	.parts-store, .parts-text, .parts-text:hover, .mobile-repair, .mobile-image {width: 100%; padding: 35px 0; margin: .5% auto;}
	.mobile-image, .parts-store {height: 200px;}
	.mobile-image h2 {margin-top:0; padding: 5% 0;}
	.trailer-text {width: 90%; margin: 1% auto; display: inline-block; padding-bottom: 5%;}
	.trailer {width: 100%; text-align: center; display: none;}
	.trailer img {max-width: 300px; width: 100%;}
	.flex-foot {display: block;}
	.col-3 {width: 100%; text-align: left; margin: 2% auto;}
	.col-3 img {text-align: center; float: none; margin: 2% auto;} 
	.hero {min-height: 400px;}
	.col-4 {display: inline-block; width: 42%; vertical-align: middle; margin: 1% .5%;}
	.col-2-bg {width: 90%; margin: 1% auto;}
	.col-2, .col-img-section-1, .col-img-section-2 {width: 100%; margin: 1% auto;}
	.team {display: inline-block; width: 25%;}
	.gray-radius {display: none;}
	.textured-bg .width-80 {width: 100%}
	.great-left, .great-right {width: 100%}
	.great-left {width: 80%; margin: 15px auto; text-align: center;}
	p.great-right {width: 80%; margin: 0 auto;}
	.ql {display: inline-block; width: 44%; margin:1% .5% ;}
	.ql:hover { margin:1% .5% ;}
	.ql#shop:hover {margin:1% .5%;}
    .p-s-bottom-links {
        width:48%;
    }
    .col-1-2-bg {width: 100%;margin:20px 0;}
    
}


@media only screen and (max-width: 900px) {
	.parts-store h2 {font-size: 50px; line-height: 52px;}
	footer {margin-top:5% ; display: inline-block; width: 100%;}
	.team {display: inline-block; width: 95%; margin: 2% auto;}
	.width-60 {width: 90%; margin: 0 auto;}

}


@media only screen and (max-width: 800px) {
    
    
    .header {
      padding: 0;
    }
    .logo {
        width:auto;
    }
    .logo img {
      max-width: 200px;
      width: 100%;
    }
}

@media only screen and (max-width: 700px) {
	hr.mobile-none {display: none;}
	.hero-text h1 {font-size: 25px; line-height: 28px;}
	.hero-text h2 {font-size: 45px; line-height: 42px;}
	.lt-gray h2 {font-size: 24px;}
	.header {width: 100%;padding:0;}

	.header-right {width: 100%;}
	.ql {display: inline-block; width:96%; margin:1.25% .5% ; padding-bottom: 25px;}
	.ql:hover { margin:1.25% .5% ;}
	.trailer-text {padding-bottom: 20%}
	.com-img-cont div {
      width:100%!important;
    }
    .col-1-2 {
        width:100%;
    }
    .com-img-cont img {
         margin:40px auto;
    }
        .info-mobile {
      padding:5px 0 10px 0;
    }

}


@media only screen and (max-width: 500px) {
	a.exclusive h3 {width: 90%; margin: 0 auto; font-size: 30px;}
	.bl-btn, .black-btn, .dryvan-right .bl-btn, .dryvan-right .black-btn {width: 100%; padding: 15px 0; margin:5px auto; text-align: center;}
	.p-s-bottom-links h2 {font-size: 20px; line-height: 22px;}
	.p-s-bottom-links h4 {font-size: 16px;}
	.great-left, p.great-right {width: 100%}
    .inv-cat-popup ul li {
        width:100%;
    }
    .p-s-bottom-links {
        width:100%;
    }

}