/***** BEGIN RESET *****/
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 --------*/
body {}
:root {
--orange: #db6422 ;
--white: #fff ;
--black: #000 ;
--yellow: #e8b100;
--grey: #404040;
--gray: #404040;
}
a:link, a:visited, a:active {text-decoration:none;}
a:hover, button:hover {text-decoration:none; cursor: pointer !important;}
hr{border:#000 1px solid;}
html {font-family: 'Roboto', sans-serif;}
.bold {font-weight: 600 !important;}
.orange {color: var(--orange) !important;}
.black {color: var(--black) !important;}
.white {color: var(--white) !important;}
.yellow {color: var(--yellow) !important;}
.heading-sm {Font-size: 24px; font-weight: 700;}
.heading-lg {font-family: 'Roboto', sans-serif; font-size: 35px; color: #DB6422; font-weight: 600; padding-bottom: 10px;}
.fine-print {font-style: italic !important; font-size: 14px !important; line-height: 1 !important;}
/*---BODY--------------------------------*/
.yellow-bkgd {background-color: var(--yellow) !important;}
.orange-bkgd {background-color: var(--orange) !important;}
.grey-bkgd {background-color: var(--grey) !important;}
.gray-bkgd {background-color: var(--grey) !important;}
.width100 {width: 100% !important;}
.width80 {width: 80% !important;}
.margin0 {margin: 0 !important;}
.padding50 {padding: 50px 0}
header {background: #DB6422; width: 100%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
header div {width: 95%; margin: 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 15px; padding: 8px 0;}
header div i {color: #fff; font-size: 18px;}
#hoglund-header header {background: #eeb21d !important;}
/*---HEADER--------------------------------*/
.nci-small img {width: 125px !important;}
/*---DEFAULT---*/
#hero-nav {display: flex; width: 95%; margin: 0 auto; justify-content: space-between; gap: 10px;}
#trucks {background: url("../siteart/hero-tabs/trucks.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
#yellow-bus {background: url("../siteart/hero-tabs/yellow-bus.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
#white-bus {background: url("/siteart/hero-tabs/white-bus.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
#leasing {background: url("../siteart/hero-tabs/leasing.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
#recruitment {background: url("/siteart/hero-tabs/recruitment.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
.nav-overlay {background: linear-gradient(to top,rgba(0,0,0,.90),rgba(0,0,0,.20)); width: 100%; height: 380px; display: flex; justify-content: center; align-items: flex-end; text-align: center;}
.nav-overlay > div {margin-bottom: 25px;}
.nav-overlay > div h2 {color: #fff; font-size: 30px; text-transform: uppercase; font-weight: 600; font-family: 'Roboto', sans-serif; line-height: 30px;}
.nav-overlay > div > div {width: 180px; margin: 0 auto; display: flex; gap: 5px; margin-top: 8px;}
.nav-overlay div hr {border: 1px #fff solid; width: 22px; height: 0px;}
.nav-overlay div p {color: #fff; text-transform: uppercase; font-size: 14px;}
#hero-nav a:hover .nav-overlay {background: linear-gradient(to top, rgba(219,100,34,.90),rgba(219,100,34,.20)); box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
#hero-nav a:hover {transition: .5s;}
.mobile-herosurround {display: none;}
.herosurround {position: relative; height: 635px;}
#hero {height: 1582px; height: max(824px, 82.39583vw); position: relative;}
.herosurround #hero {height: 711px; height: max(370px, 37.03125vw); display: flex; align-items: center; z-index: -1; overflow: hidden;}
.player {width: 100vw; height: 100vh; z-index: -600; position: relative;}
video {height: 635px !important; overflow: hidden; object-fit: cover;}
.overlaytext li {background: #F0F0F0; border-radius: 5px; width: 100%; margin-bottom: 5px; padding: 15px 20px 15px 20px; color: #000; font-family: 'Roboto', sans-serif; font-size: 18px; font-weight: 600; text-transform: uppercase; text-align: center; height: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;}
.overlaytext li i {color: #DB6422; font-size: 28px;width: 100%; margin-bottom: 7px;}
.overlaytext a:hover li {background: #DB6422; color: #fff;}
.overlaytext a:hover i {color: #fff;}
.hero-arrow {display: flex; justify-content: center; padding: 60px 0 40px 0;}
.hero-arrow i {color: rgba(255,255,255,0.20); font-size: 25px;}
.hero-arrow a:hover i {color: #BE561E; transition: .5s;}
#hero-video {height: 100%;}
.overlaytext {width: 95%; margin: 0 auto;}
.overlaytext ul {display: flex; gap: 10px; margin-top: 30px;}
.overlaytext a {width: 100%;}
#inventory {width: 95%; margin: 0 auto; margin-top: 60px; margin-bottom: 60px;}
.customers-first {width: 80%;}
.customers-first h1 {font-family: 'Roboto', sans-serif; font-size: 20px; color: #000; font-weight: 600; padding-bottom: 5px;}
.customers-first p {font-size: 17px; font-weight: 400; font-family: 'Roboto', sans-serif; color: #000; line-height: 27px;}
.customers-first p a {color: #BE561E; border-bottom: 1px transparent solid;}
.customers-first p a:hover {border-bottom: 1px #BE561E solid; transition: .5s;}
.customers-first hr {width: 60px; margin: 0; border: 2px #BE561E solid; margin-bottom: 10px; margin-top: 5px;}
#welcome-to {width: 65%; margin: 0 auto; margin-top: 100px; margin-bottom: 100px;}
.map-wrap img {max-width: 100%; width: 100%;}
.location-map-links {position: relative;}
.location-map-links img {max-width: 100%; width: 100%;}
.heroreel img {width: 100% !important;max-width: 100%;}
.no-hover a:hover img {box-shadow: none !important; transform: none !important;}
/*---HOGLUND BUS---*/
.hbc-hero-tabs img {width: 100%;}
.hbc-home-content {width: 100% !important;}
#school-commercial {width: 90%; margin: 0 auto; display: flex; padding: 50px 0; justify-content: center; gap: 50px;}
#school-commercial a {text-align: center;}
#school-commercial a:hover img {transition: .5s; transform: translateY(-6px);}
#school-commercial img {width: 100%;}
#school-commercial h1, #school-commercial h2 {font-size: 30px; text-transform: uppercase; margin-top: 15px; line-height: 35px; color: #000}
#school-commercial p {font-weight: bold; font-size: 18px; line-height: 26px; color: #000;}
#school-commercial button {background: #eeb21d; border: none; width: 200px; padding: 10px 0; font-size: 16px; font-weight: bold; font-family: 'Roboto', sans-serif; text-transform: uppercase; margin-top: 10px;}
#school-commercial button:hover {background: #000; color: #fff;}
.gray-background {background:#c0bfbf;}
.gray-sections {width:16%;padding-right:50px;border-right: 3px solid #fff;}
.gray-sections.general {width:21%;padding-right:50px;border-right: 3px solid #fff;}
.gray-background.flex {display:flex;margin:0 auto;justify-content: space-evenly;width: 97%;}
.flex {display: flex;justify-content: space-between;}
.lodging-flex {display: flex;justify-content: space-between;}
.agenda-title {width: 90%;margin: 90px auto 10px;}
.gray-sections ul {list-style:disc; margin-left:20px;}
.lodging ul {list-style:disc; margin-left:20px;}
.gray-sections ul li {padding-top:9px;}
ol.sessions {list-style:decimal;margin-left:20px;}
ol.sessions li {padding-top: 29px;font-weight: 600;}
.lodging ul li {padding-top: 10px;}
.agenda-wrapper {background:#c0bfbf;padding: 30px 0;}
span.larger-font {font-size:86px;}
.yellow-button a{color:#fff;text-align:center;font-size: 74px;;font-weight:700;line-height: 1;}
.yellow-background-lodging a{color:#fff;font-size:17px;font-weight:700;line-height: 1;}
.image img {width:100%;max-width: 933px;margin-top: 70px;}
.image {position:relative;}
.lodging {width:40%;position:relative;}
.hbc-wrapper {width: 90%; margin: 0 auto; margin-top: 50px; margin-bottom: 100px;}
.yellow-button {background: #eeb21d !important; padding: 30px 47px; position: absolute; right: 0; width: 100%; max-width: 580px; border-radius: 50px 0 0 50px; text-align:center;}
.yellow-background-lodging {background: #eeb21d !important; padding: 41px 41px; position: absolute; left: -521px; bottom: 4px; width: 100%; max-width: 521px; border-radius: 30px 0 0 30px;}
i.fa-solid.fa-location-dot {font-size:41px;}
.text-flex {display:flex;gap: 18px;font-size:19px;}
span.large-text.lodging {font-size: 27px;}
.seats h2 {margin-bottom:20px;}
span.large-font {font-size: 88px;}
.hbc-wrapper h1 {font-size: 40px;margin-bottom: 8px;}
.agenda-title h2, .sessions h2, .seats h2, .lodging h2 {font-size: 33px;text-transform:uppercase;}
/*---SHOWROOM---*/
#showroom {width: 90%; margin: 0 auto; margin-top: 50px; margin-bottom: 100px;}
#showroom h1 {font-family: 'Roboto', sans-serif; font-size: 35px; color: #DB6422; font-weight: 600; padding-bottom: 10px; }
#showroom span {font-family: 'Roboto', sans-serif; font-size: 35px; color: #DB6422; font-weight: 600; padding-bottom: 10px; }
#showroom p {font-size: 17px; font-weight: 400; font-family: 'Roboto', sans-serif; color: #000; line-height: 27px;}
#showroom button {background: #973D0C; border: none; width: 220px; padding: 10px 0; color: #fff; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: 14px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; margin: 0px; margin-top: 25px;}
#showroom button:hover {background: #A94D1A; transition: .5s;}
#showroom p a {color: #000; border-bottom: 1px transparent solid;}
#showroom p a:hover {border-bottom: 1px #DB6422 solid; transition: .5s;}
#international {background: url("/siteart/international.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
.showroom-links img {width: 100%;}
.showroom-trucks img {width: 100%;}
.showroom-content {margin: 40px 0 80px 0;}
.p-highlight p {background: #000; color: #fff !important; padding: 10px; text-align: center;}
/*---BUILD MY INTERNATIONAL---*/
.build-international {display: flex; flex-wrap: wrap; gap: 15px; justify-content: flex-start;}
.build-international a {width: 24%;}
.cv {background: url("/siteart/build-my-international/cv-series.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
.mv {background: url("/siteart/build-my-international/mv-series.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
.hv {background: url("/siteart/build-my-international/hv-series.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
.hx {background: url("/siteart/build-my-international/hx-series.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
.lt {background: url("/siteart/build-my-international/lt-series.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
.rh {background: url("/siteart/build-my-international/rh-series.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
.build-overlay {height: 300px; display: flex; justify-content: center; align-items: center;}
.build-international a:hover .build-overlay {background: rgba(219,100,34,0.70); transition: .5s;}
.build-international h2 {background: #DB6422; color: #fff; text-align: center; padding: 10px 0; text-transform: uppercase; font-size: 20px;}
.build-international a:hover h2 {background: #A94D1A; transition: .5s; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
/*---CV SERIES---*/
.iframe-container {margin-top: 50px !important; margin-bottom: 100px;}
/*---MV SMARTBUY PAGE---*/
.fb-offers {display: flex; align-items: center; justify-content: center; gap: 25px;}
.fb-offers img {width: 33%; max-width: 200px; max-height: 100%;}
.chassis-icon {height: 150px;width: 100px !important;}
.fb-offers div { display: flex; flex-direction: column; gap: 10px; text-align: left; justify-content: center; width: 67%;}
.fb-offers div h3 {font-size: 18px;}
.fb-offers div ul {font-size: 14px !important; list-style: disc; margin-left: 15px;}
/*---financing---*/
.finance-hero {width: 90%; margin: 0 auto; margin-top: 40px;}
.finance-hero img {width: 100%; display: block;}
.finance-hero .disclaimer {padding: 30px; background-color: #DB6422;}
.finance-hero .disclaimer p {color: #000; font-style: italic; font-size: 14px;}
.finance h2 {font-family: 'Roboto', sans-serif; font-size: 25px; color: #DB6422; font-weight: 600; text-transform: uppercase; padding-top: 25px; padding-bottom: 10px;}
/*---ELECTRIC VEHICLES---*/
.electric h2 {text-transform: uppercase; color: #BB5116; font-size: 20px; padding-bottom: 10px; padding-top: 0px;}
.electric p span {color: #434343;}
.electric div p {padding: 10px 0;}
/*---S13PROMO---*/
.s13-main {width: 90%; margin: 0 auto; margin-top: 40px; margin-bottom: 40px;position: relative;}
.s13-main img {width: 100%; display: block;}
.s13-main h2{font-size: 35px;}
.s13-main p{font-size: 17px; font-weight: 400; font-family: 'Roboto', sans-serif; color: #000; line-height: 27px;}
.s13-full-banner{width: 100%; margin: 0;}
.s13-full-banner img{width: 100%; display: block; margin: 0 auto;}
.side-left{width: 60%;}
.side-right{width: 40%;}
.side-right img{width: 50%; justify-self: center;}
.side-right .overflow-img{width: 160%; justify-self: end;}
.s13-main ul li{color: #dd702d; font-weight: 600; list-style: disc; margin-left: 20px; padding-top: 40px; font-size: 26px;}
.truck-brands{display: flex; margin-bottom: 25px;}
.truck-brand{width: 20%; justify-items: center;}
.truck-brand img{width: 60%;}
.s13-full-banner .s13-banner-bkgrd-btm > img {width: 95%; margin: 0 auto;}
/*---S13---*/
.powertrain img {width: 100%; margin-top: 50px; margin-bottom: 50px;}
.powertrain h2 {padding-top: 0px;}
.powertrain p span {color: #DB6422;}
.powertrain div p {padding-bottom: 10px;}
.iframe-wrapper {padding: 50px 0;}
.iframe-wrapper video {width: 100%; aspect-ratio: 16 / 9;}
.flex {display: flex;}
.s13-section {padding: 25px 0; border-bottom: 2px solid #000;}
.flex.black-twothirds {display: flex; padding-top: 20px;}
.black-twothirds .black-section {width: 100%; background-color: #000; background-image: url("../siteart/black-bg.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center;}
.black-section .wid-90, .description .wid-90 {width: 85%; margin: 0 auto; padding: 30px 0;}
.wid-90 img {max-width: 100%; margin: 0 auto;}
.black-twothirds .description {width: 50%;}
.flex.international {gap: 10px; margin-top: 20px;}
.flex.international img {width: 100%;}
.flex.three {padding-top: 40px; padding-bottom: 15px;}
.flex.three .col-3 {width: 100%;}
.flex.three .col-3 .wid-90 {width: 75%; margin: 0 auto;}
.flex.three .two-third {width: 100%;}
.flex.three .one-third {width: 50%;}
.two-third .wid-90, .one-third .wid-90 {width: 85%; margin: 0 auto;}
p.specifications {column-count: 2;}
p.specifications strong{text-transform: uppercase;}
.flex.three table, .flex.three th, .flex.three tr, .flex.three td {border: 1px solid #000;}
.flex.curves {padding-bottom: 15px;}
.flex.curves button {color: #000; font-weight: 600;background-color: transparent;font-size: 16px;border: none;}
.flex.curves button.orange {color: #A74006;text-decoration: underline;}
.flex.drop.three {background: #000;padding: 0;align-items: center;}
.padit {padding: 25px 0;}
.flex.drop .two-third {background: #000;}
.flex.drop .one-third {background: #DB6422;border-bottom-left-radius: 20px;border-top-left-radius: 20px;cursor: pointer;}
.flex.drop .one-third.left {border-radius: 20px;border-bottom-left-radius: 0;border-top-left-radius: 0;}
.flex.drop .one-third h2 {font-size: 48px;padding: 40px 0;}
.dark.panel {background-color: #444;margin: 0;}
.flex.downloads {margin-top: 40px;flex-wrap: wrap;gap: 30px;justify-content: flex-start;}
.flex.download {align-items: center;}
.flex.download .download-type {display: block;max-width: 75px;}
.download-title {background: #000;padding: 20px;border-top-right-radius: 15px;border-bottom-right-radius: 15px;width: 100%;flex-wrap: wrap;gap: 10px;}.download-title img {max-width: 50px;}
.white {color: #fff;}
.heading {font-size: 34px;text-transform: uppercase;}
.sm-heading {font-size: 28px;text-transform: uppercase;}
.wid-90 {width: 90%;margin: 0 auto;}
.dark.panel .wid-90 {padding: 40px 0;}
/*Accordion*/
.flex-container.flex-services {justify-content: space-between;gap: 15px;}
.flex-services .page-head {flex: 1;}
.service-section {flex: 1;}
.accordion {background: transparent;color: #555;cursor: pointer;padding: 15px 22px;font-size: 14px;width: 100%;margin: 0 auto;text-align: left;border: none;outline: none;font-family: 'Poppins', sans-serif !important;transition: 0.4s;display: flex;align-items: center;justify-content: space-between;font-weight: 400;letter-spacing: 1px;border: 1px #323232 solid;}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {}
.panel ul.fa-ul {padding-inline-start: 0px;}
/* Style the accordion panel. Note: hidden by default */
.panel {background-color: white;max-height: 0;overflow: hidden;transition: max-height 0.2s ease-out;margin: 8px 0;}
.panel p {padding: 10px 0;line-height: 24px; font-size: 16px;}
/*---SERVICE-LOCATION PAGES---*/
.location-exterior {width: 100%;object-fit: cover; object-position: center center;}
.bodyshop-services {flex-direction: column;}
.fb-thirds {display: flex;flex-direction: row;width: 100%;}
.fb-thirds div{width: 33.33%;}
.fb-thirds.truck-service ul{width: 33.33%;color: #dd702d;font-weight: 600;list-style: disc;margin-left: 20px;}
.fb-half {display: flex;flex-direction: row;}
.fb-half div {width: 50%;}
.fb-half div p{line-height: 1 !important;}
.common-services .fb-half ul{display: flex;flex-direction: column;gap: 40px;width: 50%;color: #fff;list-style: disc;margin-left: 20px;}
.hours-container {display: flex;flex-direction: column;width: 100%;}
.open-hours {display: flex;align-items: baseline;gap: 12px;}
.open-hours p {margin: 0;white-space: nowrap;}
.ellipsis {flex: 1 1 auto;min-width: 0;height: 0;border-top: 0;border-right: 0;border-left: 0;border-bottom: 3px dotted #808080 !important;margin: 0;}
#HBC-common-services .common-services {position: relative;background-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.4) 100%), url("../siteart/service-locations/diagnostic-computer.jpg");background-size: cover;background-position: center center;padding: 40px;border-bottom: 20px solid var(--yellow);}
.common-services {position: relative;background-image: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 50%, rgba(0,0,0,0.4) 100%), url("../siteart/service-locations/diagnostic-computer.jpg");background-size: cover;background-position: center center;padding: 40px;border-bottom: 20px solid var(--orange);}
.common-services h2{color: #fff;font-size: 50px;font-weight: 700;text-transform: uppercase;margin-bottom: 10px;}
.common-services div.fb-half {gap: 25px;}
.common-services ul {color: #fff;font-size: 20px;font-weight: 600;text-transform: capitalize;}
.ctas-footer {margin: 30px 0 ;text-align: center;}
.ctas-footer > p {margin-top: 20px;}
.ctas-thirds {align-self: center;text-align: center;margin: 30px 0px;}
.ctas-thirds h3{color: #000;font-size: 40px;}
.ctas-thirds p{color: #d36313 !important;font-weight: 600!important;margin-bottom: 30px;}
.ctas-thirds p.yellow {color: var(--yellow) !important;}
.ctas-thirds a{color: #fff;background-color: #d36313;padding: 10px;border-radius: 10px;margin-top: 15px;}
.employee-profile h4 {font-size: 25px;}
.employee-headshot {width: 75%;height: auto;max-height: 300px !important;margin: auto;}
.employee-email {font-size: 18px !important;}
/* EMPLOYEE PROFILE SLIDER STYLES */
#employee-slider {display: flex;overflow-x: auto;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;gap: 1rem;}
/* Hide scrollbar — Chrome, Safari, Edge */
#employee-slider::-webkit-scrollbar {display: none;}
/* Hide scrollbar — Firefox */
#employee-slider {scrollbar-width: none;}
.slider-wrap {position: relative;-ms-overflow-style: none;}
.slider-btn {top: 50%;transform: translateY(-50%);z-index: 2;background: transparent !important;box-shadow: none !important;cursor: pointer;}
.slider-btn img {height: 50px;}
.next-prev-buttons-fb{display: flex; flex-direction: row; justify-content: space-around;}
.next-prev-buttons-ps{display: flex; flex-direction: row; justify-content: space-between;}
.slider-btn.prev { left: 0.25rem; width: 45%;}
.slider-btn.next { right: 0.25rem; width: 45%;}
.button-prev { left: 1%;}
.button-next { right: 1%;}
.button-prev, .button-next{top: 50%;transform: translateY(-50%);z-index: 2;cursor: pointer;border: none;background: none;position: absolute;}
.button-prev img {height: 50px;}
.button-next img {height: 50px;}
.fb-half {display: flex;overflow-x: auto;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;gap: 1rem;}
.fb-half .employee-profile {flex: 0 0 100%;scroll-snap-align: start;box-sizing: border-box;}
.fb-half .employee-profile { flex-basis: 50%; }
/*=FILTER SALE=*/
#filterSale .finance-hero{width: 90%; margin-top: 40px; margin-bottom: 40px;}
#filterSale .container{display: flex; width: 100%;}
#filterSale .container.btm-btn{text-align: center;}
#filterSale .banner{background-color: #DB6422; padding: 20px; text-align: center;}
#filterSale .flex-half{width: 50%;}
#filterSale ul li{font-weight: 600; list-style: disc; margin-left: 20px; font-size: 35px;}
#filterSale .flex-half img{width: 100%; height: auto; object-fit: contain; padding: 30px 20px 30px 0px;}
#filterSale .flex-half.left ul{padding: 50px 0 20px 50px;}
#filterSale .flex-half.left p{padding: 0px 40px 0px 20px; color: #DB6422; font-size: 20px;}
#filterSale .flex-third{width: 33.333%;}
#filterSale .flex-third img{width: 90%; padding: 0 5px;}
#filterSale .s13-main {width: 90%; margin: 0 auto; margin: 40px auto; position: relative;}
#filterSale .s13-header-link h1 {font-size: 55px; color: #000; line-height: 75px; margin-bottom: 20px;}
/*=MONTHLY PARTS SPECIALS=*/
.monthly-section{width: 90%; display: block; justify-self: center; margin: 20px auto 20px auto;}
.partsthirds {width: 100%; display: flex;}
.partshalf{width: 100%; display: flex;}
.parts-border{border: 5px #E5E5E5 solid; padding: 20px;}
.partshalf-section {width: 50%; display: flex;}
.partshalf-section-str {width: 50%; display: block;}
.partsTwoThird-section {width: 45%;}
.partsTwoThird-section-str {width: 100%;}
.partsOneThird-section {width: 55%; text-align: center; align-content: center;}
.partsOneThird-section img {width: 50%; justify-content: center; text-align: center;}
.partsOneThird-section-str img {width: 100%; justify-content: center; text-align: center;}
.partsthirds-section {width: 33.333%; border: 5px #E5E5E5 solid; padding: 20px; display: flex;}
.sideoff{border-left: 0px;}
.bottomoff{border-bottom: 0px;}
.topoff{border-top: 0px;}
.monthly-section h3 {background: #DB6422; border-radius: 100px; color: #fff; font-size: 50px; line-height: 50px; display: flex; justify-content: flex-start; padding: 10px 20px; width: fit-content; margin-bottom: 10px;}
.monthly-section h3 span {font-size: 25px; line-height: 25px;}
.monthly-section h4 {font-size: 27px; line-height: 30px; text-transform: uppercase; padding-left: 20px; overflow-wrap: break-word;}
.monthly-section h5 {font-size: 30px; line-height: 35px; padding-left: 20px; color: #DB6422; margin-top: 5px;}
.monthly-section ul {padding-left: 40px; margin-top: 10px;}
.monthly-section li {list-style: disc; font-size: 18px; line-height: 28px;}
.items{width: 100%; display: flex;}
.eightyfive {width: 85%!important;}
.disclaimer {background-color: #000; color: #fff; margin: 20px auto; width: 90%; display: block; justify-self: center; padding: 40px;}
.disclaimer p{line-height: 25px; font-size: 18px;}
.disclaimer h2{font-family: 'Roboto', sans-serif; font-size: 30px; color: #DB6422; font-weight: 600; text-transform: uppercase; padding-bottom: 10px; }
.brake-drum-full{width: 100%; display: flex; margin: 40px auto 0px auto;}
.brake-drum-full-grey{width: 100%; display: flex; margin: 0 auto; padding: 40px;}
.orange-bk{background-color: #E56B1E;}
.brake-drum-full-center{width: 100%; justify-items: center; padding-bottom: 20px; text-align: center;}
.brake-drum-half{width: 50%; justify-items: center; padding-bottom: 20px;}
.brake-drum-half-grey{width: 50%; padding-bottom: 20px;}
.brake-drum-full h2 {color: #fff; font-size: 50px; align-content: center;}
.brake-drum-full-grey h2 {color: #000; font-size: 50px; align-content: center;}
.brake-drum-full h3 {color: #fff; font-size: 100px; display: flex; width: fit-content; align-items: center;}
.brake-drum-full-grey h3 {color: #E56B1E; font-size: 30px; margin-top: 15px;}
.brake-drum-full h3 span {font-size: 40px; line-height: 32px; padding-left: 4px;}
.brake-drum-full h4 {font-size: 25px; line-height: 30px; text-transform: uppercase; overflow-wrap: break-word;}
.brake-drum-half-grey ul {padding-left: 40px; margin-top: 10px;}
.brake-drum-half-grey ol {padding-left: 15px; margin-top: 10px;}
.brake-drum-half-grey ul li {list-style: disc; font-size: 18px; line-height: 28px;}
.brake-drum-half-grey ol li {list-style: auto; font-size: 18px; line-height: 28px;}
.brake-drum-half-grey img{width: 80%;}
span .each-pricing {font-size: 25px!important;}
.grey-bk{background-color: #E5E3E2;}
#university .flex-container, #lodging .flex-container{display: flex; justify-content: center;}
#university ul li{list-style: inside; margin: 10px 0px 10px 20px; font-size: 22px;}
#university .register{width: 27vw;}
#university .flex-half, #lodging .flex-half{width: 50%; }
#university-full .weekly{background-color: #ddd; padding: 20px;}
.day-week h3{text-transform: uppercase;}
.day-week p{margin: 10px 0;}
.day-week{width: 20%; font-size: 20px;}
.left-border-yellow{border-left: 2px #e8b100 solid; margin: 0px 10px;}
#university .indent{text-align: right;}
#lodging .indent{padding-left: 45px;}
#university, #lodging{width: 90%; margin: 50px auto;}
#university-full{width: 100%; margin: 50px auto;}
#university-full h2{text-transform: uppercase; width: 90%; justify-self: center; font-size: 30px;}
#lodging h2{text-transform: uppercase; font-size: 30px;}
#university p, #lodging p{font-size: 20px; font-weight: 400; font-family: 'Roboto', sans-serif; color: #000; line-height: 27px;}
.agenda{background-color: #000; color: #fff; padding: 10px 0px;}
.weekly{}
.weekly-agenda{display: flex; width: 90%; justify-self: center; justify-content: space-between;}
#lodging .flex-half img{width: 100%;}
#lodging p.bullets{margin: 10px 0px 10px 20px; font-size: 22px;}
.hyatt{text-align: right; font-size: 25px; margin: 15px 0}
.curriculum-list {display:grid; grid-template-columns: 1fr 1fr 1fr;}
/*=PARTS SPECIALS FEB26=*/
#partSpecial .finance-hero{width: 90%; margin-top: 40px; margin-bottom: 40px;}
#partSpecial .container{display: flex; width: 100%;}
#partSpecial .banner{background-color: #DB6422; padding: 20px; text-align: center;}
#partSpecial .flex-half{width: 50%;}
#partSpecial .flex-half img{width: 100%;}
#partSpecial .flex-two-thirds{width: 66.667%;}
#partSpecial .flex-two-thirds img{width: 100%;}
#partSpecial .flex-one-third{width: 33.333%;}
#partSpecial .flex-one-third img{width: 100%;}
#partSpecial .s13-main {width: 90%; margin: 0 auto; margin: 40px auto; position: relative;}
#partSpecial .s13-header-link h1 {font-size: 55px; color: #000; line-height: 75px; margin-bottom: 20px;}
/*=PRESEASON SALE=*/
#preSeasonSale .flex-one-third{width: 33.333%;}
#preSeasonSale .flex-one-third img{width: 100%;}
#preSeasonSale .clutch-item-box{display: flex; width: 100%; margin-bottom: 10px}
#preSeasonSale .clutch-item{display: block; width: 50%;}
#preSeasonSale .clutch-item img{width: 100%;}
#preSeasonSale .price-display {display: flex; align-items: flex-start; margin-bottom: 5px; width: 13vw; background-color: #FF6600; padding: 10px 0 10px 20px; border-radius: 50px;}
#preSeasonSale .price-section {margin-bottom:20px; padding-right: 10px;}
#preSeasonSale .coupon-box{background: #fff; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); align-content: space-evenly;}
#preSeasonSale .dollar-amount{font-size: 3vw; font-weight: bold; line-height: 1; color: #fff;}
#preSeasonSale .cent-amount{font-size: 2vw; font-weight: bold; line-height: 1; color: #fff;}
.hero-button{position: absolute; bottom: 0; right: 0; margin: 0 5% 5% 0; width: 25%;}
.half-bottom{height: 48.25%; margin-top: 20px;}
.buttons {position:absolute!important; text-align:right; bottom:9%; right:60px;width:35%;display:flex; flex-direction:column; gap:5vh;}
/*=SCHOOL BUS PARSTS=*/
#schoolBusParts .three-items {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px;}
#schoolBusParts .finance-hero{width: 90%; margin-top: 40px; margin-bottom: 40px;}
#schoolBusParts .container {display: flex;}
#schoolBusParts .flex-third {width: 33.33%;}
#schoolBusParts .flex-third img{width: 100%; padding: 0 10px;}
#schoolBusParts .s13-main {width: 90%; margin: 0 auto; margin: 40px auto; position: relative;}
#schoolBusParts .s13-header-link h1 {font-size: 55px; color: #000; line-height: 75px; margin-bottom: 20px;}
#freonSale .freonContainerDesktop {margin: 0 auto; padding-bottom: 40px; padding-top: 40px; width: 90%;}
#freonSale .details{width: 90%; margin: 0 auto; padding-top: 40px;}
#freonSale ol li{list-style: auto; margin-left: 25px;}
#freonSale .flex-one-third{width: 33.333%;}
#freonSale .flex-one-third img{width: 100%;}
#freonSale .specialContainer{width: 100%; display: flex; padding: 40px;}
#freonSale .scHalf{width: 50%; text-align: center;}
#freonSale .scHalf img{width: 50%;}
#freonSale .price-display {display: flex; align-items: flex-start; margin-bottom: 5px; width: fit-content; background-color: #FF6600; padding: 10px 40px; border-radius: 50px;}
#freonSale .price-section {margin-bottom:20px; justify-items: center;}
#freonSale .coupon-box{background: #fff; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); align-content: space-evenly;}
#freonSale .dollar-amount{font-size: 4vw; font-weight: bold; line-height: 1; color: #fff;}
#freonSale .per-unit {font-size: 1em; color: #fff; margin-left:5px; background: center;}
#freonSale .specialInfo {margin: 20px; text-align: left;}
#freonSale .specialInfo h2 {font-size: 45px;}
#freonSale .specialInfo h2 span {font-size: 30px;}
#freonSale .specialInfo p {font-size: 22px;}
/*Mobile freon*/
#freonSale #mobile.freonContainerMobile {margin: 0 auto; padding-bottom: 40px; padding-top: 40px; width: 90%; display: none;}
#freonSale #mobile .specialContainerMobile{width: 100%; display: block; padding: 20px;}
#freonSale #mobile .scfull {width: 100%; text-align: center;}
#freonSale #mobile .scfull img {width: 50%;}
#freonSale #mobile .two-prices {display: block; align-items: center; justify-content: space-around; padding: 40px 0;}
#freonSale #mobile .price-display{justify-content: center; width: 100%;}
#freonSale #mobile .dollar-amount{font-size: 40px; font-weight: bold; line-height: 1; color: #fff;}
#freonSale #mobile .price-section {margin-bottom: unset; justify-items: center;}
.prices-orange-bkgd-tpl {background-color: #DB6422; width: fit-content; padding: 5px 25px 5px 25px;}
.prices-orange-bkgd-tpl span {color: #fff !important;}
.prices-orange-bkgd-quad {background-color: #DB6422; width: fit-content; padding: 5px 25px 5px 25px;}
.prices-orange-bkgd-quad span {color: #fff !important;}
.prices-orange-bkgd-quin {background-color: #DB6422; width: fit-content; padding:5px 15px;}
.prices-orange-bkgd-quin span {color: #fff !important;}
.prices-yellow-bkgd-tpl {background-color: #eeb21d; width: 300px; padding: 0 0 5px 50px;}
.prices-yellow-bkgd-tpl span {color: #fff !important;}
.prices-yellow-bkgd-quad {background-color: #eeb21d; width: 350px; padding: 0 0 5px 50px;}
.prices-yellow-bkgd-quad span {color: #fff !important;}
.prices-flex-wrapper {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; flex-direction: row;}
.prices-flex {display: flex; flex-direction: column;}
.crazy {padding: 0 35px;}
#partsSpecials.swiper{width: 90%; height: 100%; padding: unset;}
#partsSpecials .swiper-slide{text-align: left; font-size: 26px; justify-content: center; align-items: center;}
#partsSpecials .swiper-slide img{display: block; width: 100%; height: 100%; object-fit: cover;}
.swiper-button-prev img, .swiper-button-next img{z-index: 99999;}
.monthly-deals-bottom{display: flex;}
.monthly-deals-bottom img.right{display: block;}
.monthly-deals-bottom img.left{display: block;}
.download-buttons{display: flex; position: absolute; z-index: 9999; bottom: 0; right: 0; justify-content: flex-end;}
.details-buttons img{width: 50%;}
#btn-left-km{ max-width: 50%}
#btn-right-km{max-width: 19%}
/*===================*/
.mobile-service-box h2 {margin: 15px 0;}
.mobile-service-box h4 {font-size: 24px;}
#mv-sb-banner {border-radius: 0; background-color: transparent;display: flex;justify-content: center; align-items: center;}
#mv-sb-banner a {flex: 0 0 90%;font-size: clamp(15px, 5vw, 25px);}
.service-location-banner {width: 100%;background-color: #1a1a1a;margin-top: 50px;position: relative;overflow: hidden;border-radius: 5px;}
.service-banner-content {font-size: 30px;color: #fff;display: flex;flex-direction: row;justify-content: space-between;}
.service-banner-text {margin-right: 20px;text-align: right;align-self: center;font-size: 30px;}
.service-banner-text strong {font-size: 40px;}
.grid-6x {display: grid;grid-template-columns: repeat(6, minmax(220px, 1fr));gap: 16px;width: 90%;margin: auto;}
.service-banner-list { margin: 0; text-align: left; }
.service-banner-list h4 {padding-left: 15px;}
.service-banner-list .heading-sm { margin: 0 0 6px; }
.service-banner-list ul { list-style: disc; margin: 0; padding-left: 30px; text-align: left;}
.orange-underline {border-bottom: 5px solid var(--orange);}
.yellow-underline {border-bottom: 5px solid var(--yellow);}
@media (max-width: 1450px) {.grid-6x { grid-template-columns: repeat(5, minmax(220px, 1fr)); }}
@media (max-width: 1250px) {.grid-6x { grid-template-columns: repeat(4, minmax(220px, 1fr)); }}
@media (max-width: 1042px) {.grid-6x { grid-template-columns: repeat(3, minmax(220px, 1fr)); }}
@media (max-width: 720px) {.grid-6x { grid-template-columns: repeat(2, minmax(220px, 1fr)); }}
@media (max-width: 510px) {.grid-6x { grid-template-columns: 1fr; }}
/* SERVICE-LOCATION-BANNER SHINE EFFECT */
.service-location-banner::before {content: "";position: absolute;top: -60%;left: -70%;width: 80%;height: 220%;background: linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.18) 45%,
rgba(255,255,255,0.38) 50%,
rgba(255,255,255,0.18) 55%,
rgba(255,255,255,0) 100%);transform: skewX(-24deg) translateX(0);pointer-events: none;opacity: 0;}
.service-location-banner:hover::before {animation: banner-shine 1.4s ease-in-out forwards;color :#db6422;}
@keyframes banner-shine {
0% { transform: skewX(-24deg) translateX(0); opacity: 0; }
10% { opacity: 1; }
50% { transform: skewX(-24deg) translateX(320%); opacity: 1; }
90% { opacity: 0; }
100% { transform: skewX(-24deg) translateX(320%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.service-location-banner:hover::before { animation: none; }
}
.cta-button-reverse {flex: 0 0 25%;background: #db6422;color: white;padding: 30px 0;font-size: 24px;font-weight: bold;border: none;border-radius: 0 50px 50px 0;cursor: pointer;text-decoration: none;display: flex;justify-content: center;align-items: center;transition: transform 0.2s, box-shadow 0.2s;box-shadow: 0 4px 15px rgba(255, 140, 66, 0.3);}
.cta-button-reverse:hover {box-shadow: 0 6px 20px rgba(255, 140, 66, 0.8);}
/*---SERVICE---*/
.service-box {border: 1px #DADADA solid; width: 370px; height: 100%; margin-top: 60px;}
.service-box div {width: 85%; margin: 0 auto; padding: 20px 0;}
.service-box h3 {color: #DB6422; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: 22px; padding-bottom: 10px;}
.service-box p, .bold-p p {color: #434343 !important;}
.service {display: flex; justify-content: space-between; gap: 50px;}
.service > div:first-child {width: 90%;}
table.service-dept {border: 1px solid #dededf;height: 100%;width: 100%;table-layout: auto;border-collapse: collapse;border-spacing: 1px;text-align: left;}
.service-dept a {color: #943805;}
.service-dept caption {text-align: left;}
.service-dept th {border: 1px solid #dededf;background-color: #eceff1;color: #000000;padding: 5px;}
.service-dept td {border: 1px solid #dededf;background-color: #ffffff;color: #000000;padding: 5px;}
td.email {line-break: anywhere;}
/*---LOCATIONS---*/
.location-flex iframe {margin-top: 20px; width: 100%;}
#showroom hr {border: 1px #D8D8D8 solid; margin: 40px 0 15px 0; width: 100%;}
.location-box {width: 510px !important;}
.popup-table p a:hover {box-shadow: none !important;}
/*---SCHOOL BUSES---*/
.bus-img {display: flex; margin-top: 20px;}
.bus-img img {width: 220px;}
/*---COMMERCIAL BUSES---*/
.product-lines i {color: #DB6422;}
.product-lines p {margin-bottom: 5px !important;}
/*---PARTS DEPARTMENT---*/
.border-frame {border: 1px #E0E0E0 solid;}
.frame-width {width: 95%; padding: 40px 0 60px 0; margin: 0 auto;}
#banner {background: url("/siteart/banner-bkgrd.jpg") no-repeat; background-position: center; background-size: cover;}
.parts-img-links {margin-top: 30px; display: flex; gap: 10px; margin-bottom: 30px;}
.parts-img-links a:hover img, .hbc-hero-tabs a:hover img {box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; transition: .5s; transform: translateY(-6px);}
.banner-overlay {background: rgba(47,47,47,0.80);}
.banner-overlay div {width: 95%; margin: 0 auto; text-align: center; padding: 30px 0 35px 0;}
.banner-overlay h2 {color: #fff; font-size: 25px; margin-bottom: 3px;}
.banner-overlay p {color: #fff; font-size: 16px;}
#banner a:hover .banner-overlay {background: rgba(219,100,34,0.80); transition: .5s;}
.pop-a a:hover {border-bottom: none !important; color: #2f2f2f !important;}
/*---POP-UP -----------------------------------*/
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box {width: 50%;margin: 0 auto;background: rgba(0,0,0,0.2);padding: 35px;border-radius: 20px/50px;background-clip: padding-box;text-align: center;}
.popup .close {position: absolute;top: 25px;font-size: 30px;font-weight: bold;text-decoration: none;color: #000;}
.popup .close:hover {transform: translateY(0px);}
.popup .content {max-height: 60%;overflow: auto;}
/*Let's make it appear when the page loads*/
.overlay:target:before {display: none;}
.overlay:before {content:"";top: 0;left: 0;right: 0;bottom: 0;display: block;background: rgba(0, 0, 0, 0.5);position: fixed;z-index: 99999;}
.overlay .popup {background: #fff;border-radius: 0px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;width: 100%;position: absolute;top: 0;left: 0;right: 0;float:none;padding: 40px 0;margin: 0 auto;text-align:left;z-index: 99999;-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;overflow-x:hidden;overflow-y:scroll;max-height:100vh;}
.popup-width {width: 95%; margin: 0 auto;}
.popup-header {display: flex; justify-content: space-between; margin-bottom: 25px;}
.popup-header h3 {margin-top: 10px !important; line-height: 0px !important;}
.popup-table {display: flex; justify-content: space-between;}
.popup-table li {line-height: 25px; padding: 6px 0 3px 0; font-size: 14px;}
#close {font-size: 25px;}
.close {font-size: 25px;}
/*---SERVICE DEPARTMENT---*/
.map-wrap { position: relative; }
.map-wrap img { width: 100%; height: auto; display: block; }
.hotspots { position: absolute; inset: 0; z-index: 2;}
.hotspot {position: absolute;background: transparent;border: 0;cursor: pointer;}
.hotspot:focus-visible { outline: 2px solid #f37421; }
#our-service-locations {position: relative;overflow: visible;}
#our-service-locations h2 {font-size: clamp(24px, 5vw, 55px);}
#our-service-locations div.heading-lg {text-align: right;margin-right: 50px;}
.service-location-map {height: 700px;margin-top: -120px;padding-left: 50px;}
.hover-map {background: url("../siteart/service-locations/international-background-aerial-traffic-junction-darkened.jpg") ;background-size: cover;background-position: center 75%;}
.fb-half.map-highlights {position: relative;justify-content: space-between;align-items: center;overflow: visible;}
.fb-half.map-highlights div {width: 50%;color: #fff;padding:30px 0;gap: 50px;font-weight: 700;justify-content: center;}
.fb-half.map-highlights div ul {display: flex;flex-direction: column;gap: 20px;}
.fb-half.map-highlights div ul a li[data-brand="nci"]:hover {color: var(--orange);}
.fb-half.map-highlights div ul a li[data-brand="hoglund"]:hover {color: var(--yellow);}
.fb-half.map-highlights div ul a li {display: flex;align-items: center;color: #fff;}
.fb-half.map-highlights div ul a li i{font-size: 6px;}
.map-footer {background-color: #000;text-align: right;align-items: center;padding: 25px;gap: 25px;display: flex;justify-content: space-between;}
.map-footer div:first-child {text-align: left;background-color: #fef8ee;padding: 20px;font-weight: 700;font-size: 24px;vertical-align: middle;}
.map-footer div:first-child p{display: flex;align-items: center;gap: 10px;}
.map-footer div:last-child {width: 50%;}
.map-footer div:last-child h4 {font-size: 24px;}
.map-footer div:last-child p {color: #fff;}
.cta-sticky-right {position: absolute; right: 0; bottom: -95px;padding: 20px; background-color: var(--orange);text-align: right;color: var(--white); border-radius: 20px 0 0 20px;transition: 0.3s ease all;}
.cta-sticky-right:hover {box-shadow: 0 4px 8px rgba(232, 177, 0, 0.4);transition: 0.3s ease all;}
.cta-sticky-right.yellow-bkgd:hover {box-shadow: 0 4px 10px rgba(232, 177, 0, 0.5) !important;transition: 0.3s ease all;}
.section-header-left {font-size: clamp(24px, 5vw, 75px);width: 100%;margin-left: 5%;margin-top: 35px;}
.service-banner {color: #fff;text-align: center;padding: 40px 0 45px 0;margin-top: 10px;margin-bottom: 20px;}
.service-banner.common-services-grid {background-color: transparent;}
#service-banner.common-services-grid {background-image: url("/siteart/international-dashboard-display-close-up-Darkened.jpg");background-repeat: no-repeat;background-position: center top;background-size: cover;}
.service-banner-wrap h3 {display: flex;width: 90%;margin: 0 auto;text-align: center;justify-content: center;gap: 20px;flex-wrap: wrap;}
.service-banner-wrap { margin-bottom: 30px; }
#service-banner h3 { color: #fff; font-size: 22px; margin-bottom: 3px; }
#service-banner i { color: #FF7528; }
.service-card-fb {display: grid;grid-template-columns: 1fr 1fr;gap: 50px;}
.service-card {display: flex;flex-direction: column;gap: 15px;background: #e5e5e5;padding: 20px;}
.service-card ul {list-style: disc;padding-left: 20px;}
.service-card ul li{margin-bottom: 10px;}
.badge-fb {display: flex;flex-direction: row;justify-content: space-between;align-items: baseline;}
.learnmore-badge {padding: 10px;border-radius: 10px;color: var(--white) !important;background-color: var(--orange);transition: 0.3s ease all;}
.learnmore-badge:hover {box-shadow: 0 4px 8px rgba(219, 100, 34, 0.4);transition: 0.3s ease all;cursor: pointer;}
.learnmore-badge-yellow {padding: 10px;border-radius: 10px;color: var(--white) !important;background-color: var(--yellow);transition: 0.3s ease all;}
.learnmore-badge-yellow:hover {box-shadow: 0 4px 8px rgba(232, 177, 0, 0.4);transition: 0.3s ease all;cursor: pointer;}
.centered {text-align: center;margin: auto;}
.headroom {padding: 50px 0;}
/*---BODY SHOP---*/
.s13-header-link h1 {color: #000; font-size: 65px; line-height: 75px; margin-bottom: 20px;}
.s13-banner-bkgrd {background: #000;}
.s13-banner-bkgrd-btm {position: relative; bottom: -120px;}
.s13-full-dealership {width: 90%; margin: 0 auto; margin-top: 120px;}
.s13-full-dealership h2, .s13-integrated h2 {font-size: 65px; line-height: 75px; margin-bottom: 15px;}
.s13-full-dealership p, .s13-integrated p {font-size: 18px; line-height: 28px; font-size: 600;}
.s13-links-flex {display: flex; gap: 10px; margin-top: 50px; margin-bottom: 100px;}
.s13-links-flex a {width: 100%;}
.s13-links-flex a:hover {transform: translateY(-5px); transition: .8s;}
.s13-links-flex img {width: 100%;}
.s13-links-flex div {background: #dd702d; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; padding: 20px 20px;}
.s13-links-flex h3 {color: #fff; text-transform: uppercase; text-align: center; font-size: 25px; line-height: 35px;}
.s13-links-flex a:hover div {background: #CE6321; transition: .8s;}
h2.bodyshop {font-size: 50px;font-weight: bold;margin-bottom: 40px;width: 68%;text-align: center;display: block;}
h1.bodyshop{text-align: right;}
.bodyshop-hero img{width: 100%;}
.bodyshop-hero {position:relative;}
/* Swiper Container */
.swiper {width: 100%;height: 100%;padding: 0 70px;}
.swiper-slide {display: flex;flex-direction: column;}
.swiper-slide img {width: 100%;height: auto;}
.swiper-slide-label {padding: 10px;font-size: 14px;color: #000;text-align: left;}
.custom-next-btn {right: -90px !important;}
.custom-prev-btn {left: -90px !important;}
.custom-nav-btn {background-color: #db6422 !important;width: 50px !important;height: 50px !important;border-radius: 50% !important;}
.swiper-container {max-width: 1500px;margin: 0 auto;}
/* White arrows centered in circles */
.custom-nav-btn::after {font-size: 30px !important;font-weight: bolder !important;color: white !important;}
.bodyshop-container{display: flex;}
.bodyshop-services{width: 65%;display: flex;margin: 20px;gap: 25px;}
.bodyshop-sidemap{width: 35%;background-color: #efefef;}
.bodyshop-flexhalf{width: 50%;display: grid;margin: 10px;text-align: center;}
.bodyshop-flexhalf img{width: 50%;justify-self: center;margin-bottom: 7px;}
.bsshoptabs{margin-bottom: 20px;font-size: 14px;}
.sidemap-location{margin: 20px;}
.contact-banner {background-color: #1a1a1a;color: white;display: flex;justify-content: space-between;align-items: stretch; margin-top: 60px;padding: 0;}
.contact-content {flex: 1;padding: 15px 40px;}
.contact-content h2 {color: #DB6422;font-size: 28px;margin-bottom: 12px;font-weight: bold;}
.contact-content p {color: #ffffff;font-size: 14px;line-height: 1.6;max-width: 620px;}
.banner-text {color: #ffffff!important;}
.cta-button {flex: 0 0 25%;background: #db6422;color: white;font-size: 50px;font-weight: bold;border: none;border-radius: 50px 0 0 50px;cursor: pointer;text-decoration: none;display: flex;justify-content: center;align-items: center;transition: transform 0.2s, box-shadow 0.2s;box-shadow: 0 4px 15px rgba(255, 140, 66, 0.3);}
.cta-button:hover {box-shadow: 0 6px 20px rgba(255, 140, 66, 0.4);}
.mapcontainer{display: flex;justify-content: space-between;}
.bsflexedgeright{text-align: right;}
/*---BODY SHOP HOURS---*/
.shop-hours {width: 100% !important; display: flex; justify-content: space-between; padding: 0px !important;}
.shop-hours li {color: #434343; font-size: 18px; line-height:30px;}
/*---ABOUT BODY SHOP---*/
.shop-flex {display: flex; gap: 75px;}
.shop-flex > div:first-child {width: 65%;}
.shop-flex > div:last-child {width: 35%; margin-top: 12px;}
.shop-flex img {width: 100%;}
/*---UPDATED BODY SHOP PAGE---*/
.bodyshop-section {display:flex; }
.bodyshop-section-services {display:grid; grid-template-columns: 1fr 1fr 1fr; width:100%; margin:20px; gap:30px;}
.bodyshoptabs{margin-bottom: 20px;font-size: 18px; text-align: center;}
.bodyshoptabs p {font-size: 22px;text-align: center; margin-top:8px;}
h2.bodyshop {font-size: 50px;font-weight: bold;margin-bottom: 40px;width: 100%;text-align: left;display: block;}
.tab-header {font-weight: 900!important; font-size:26px!important; text-transform: uppercase;margin-top:8px;}
.bodyshop-location {background-color:#efefef; width:100%; padding:60px; }
.split-screen {display:flex; width:50%; }
.location-info {display:flex; gap:30px; }
.left-info {width:50%;}
.right-info {width:50%;}
.bodyshop-location {font-family:'Roboto', sans-serif;}
.clear {margin:50px;}
h3.location-title {font-size: 25px;font-weight: bold;display: block;}
/*---ONLINE BROCHURES---*/
.flex-brochure1 {display: flex; width: 100%;}
.flex-brochure2 {display: flex;}
.online-brochures img {width: 100%;}
.online-brochures h3 {font-size: 40px; color: #000;}
.category {width: 30%; margin: 0 1% 30px 1%; background: #eee;}
.category h2 {color:#DB6422; background: #fff; width: 100%; text-align: center; font-size: 25px;line-height: 40px; text-transform: none;}
.category img {margin: 10px; width: calc(100% - 20px);}
.download-list {margin: 5px 15px 25px; display: block; justify-content: space-between;}
.download-list-line {display: flex; justify-content: space-between; height: 44px;}
.download-list p {font-size: 13px!important; line-height: 18px!important; margin-bottom: 5px;}
.online-brochures a:hover {box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; transition: .5s; transform: translateY(-6px);}
.brochure-banner img {width: 90%; margin: 0 5%;}
.brochure-finance { background: #000; color: #fff!important; display: flex;}
.brochure-finance-btn {height: 160px; font-size: 31px; font-weight: 600; width: 100%; border-radius: 0 20px 20px 0; background-color:#DB6422; color: #fff; padding: 15px 30px;}
.brochure-finance-btn:hover {background-color:#A74F11}
.brochure-finance-right {text-align: right; margin: 20px 5% 40px auto; float: right;}
.brochure-finance-right h2 {font-size: 40px; line-height:70px;margin: 15px 0;}
.brochure-finance-right p {font-size: 14px; margin-left: 30px;}
.online-brochures-dark {background-color: #000!important; color: #fff!important; margin-top: 0!important;padding-top: 30px;}
.category-dark {width: 30%; margin: 0 1% 30px 1%; background: #000;}
.category-dark h2 {color:#DB6422; background: #000; width: 100%; text-align: center; font-size: 25px;line-height: 40px; text-transform: none;}
.category-dark img {margin: 10px; width: calc(100% - 20px);}
.category-dark ul {margin: 5px 15px 25px;}
.category-dark ul li {font-size: 13px; line-height: 24px;}
.pmargin {margin: 0 5%;}
.category-wide {width: 47%; margin: 0 1% 30px 1%; background: #eee;}
.category-wide h2 {color:#DB6422; background: #fff; width: 100%; text-align: center; font-size: 25px;line-height: 40px; text-transform: none;}
.category-wide-left {width: 40%; margin: 10px;}
.category-wide-left ul {margin: 5px 15px 25px;}
.category-wide-left ul li {font-size: 13px; line-height: 24px;}
.category-wide-right {width: 56%; margin: 10px 15px 10px 25px; padding-bottom: 15px;}
.category-wide-right h4 {font-size: 16px; line-height: 24px; margin: 10px 0;}
.category-wide-right p {font-size: 13px;}
.category-wide-right ul {font-size: 13px; list-style: outside; margin-bottom: 15px;}
.brochure-download {background-color: #DB6422; color: #000!important; font-size: 13px; font-weight: 600; text-transform: uppercase; padding: 4px 6px; border-radius: 5px; width: 82px!important; height: 25px; margin-top: 4px;}
/* Brochures Section Styles */
.brochures-section {padding: 40px 0;}
.brochures-section h2 {font-size: 40px;color: #000;margin: 20px 5%;}
.brochures-section > p { margin: 0 5% 50px;font-size: 16px;line-height: 24px;color: #333;}
/* Slider Container */
.brochure-slider-wrapper {position: relative;margin: 0 5%;}
.brochure-slider-container {overflow: hidden;position: relative;}
.brochure-slider-track {display: flex;transition: transform 0.5s ease;}
/* Brochure Card Wrapper */
.brochure-card-wrapper {min-width: calc(33.333% - 20px);margin: 0 10px;display: flex;flex-direction: column;}
.brochure-card-wrapper h3 {font-size: 32px;color: #000;text-align: center;margin: 0 0 20px 0;padding: 0 10px;text-transform: none;}
/* Brochure Cards */
.brochure-card {background: #eee;overflow: hidden;flex: 1;}
.brochure-card-image {width: 100%;height: 300px;object-fit: cover;}
.brochure-card-content {padding: 20px;}
.brochure-download-list {display: flex;flex-direction: column;gap: 10px;}
.brochure-download-item {display: flex;justify-content: space-between;align-items: center;min-height: 35px;}
.brochure-download-item p {font-size: 13px;line-height: 18px;margin: 0;flex: 1;padding-right: 10px;}
.brochure-download-btn {background-color: rgba(253, 185, 19, 0.9);color: #000;font-size: 13px;font-weight: 600;text-transform: uppercase;padding: 4px 6px;border-radius: 5px;width: 82px;height: 25px;text-align: center;text-decoration: none;display: flex;align-items: center;justify-content: center;transition: 0.3s;}
.brochure-download-btn:hover {box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;transform: translateY(-2px);}
/* Slider Arrows */
.brochure-arrow {position: absolute;top: 50%;transform: translateY(-50%);background: rgba(253, 185, 19, 0.9);color: #FFFFFF;border: none;font-size: 40px;width: 50px;height: 50px;cursor: pointer;z-index: 10;border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: 0.3s;}
.brochure-arrow.left {left: -25px;}
.brochure-arrow.right {right: -25px;}
/*---MAP + HOURS---*/
.loc-par{padding: 0 0 15px 0;}
.location-border > div {width: 90%; margin: 0 auto; padding: 20px 0 0px 0;}
.location-border h2 {background: none !important; text-align: left !important; margin-top: 12px;}
.build-international a:hover .location-border h2 {box-shadow: none;}
.build-international a .location-border i {display: contents; font-size: 20px !important;}
.build-international a:hover .location-border i {font-size: 20px !important; transition: 0s !important;}
.build-international .location:hover {box-shadow: none !important;}
#showroom .location-border p {font-size: 16px; line-height: 26px;}
#close:hover {box-shadow: none !important;}
.close:hover {box-shadow: none !important;}
.location-hours {display: flex; gap: 75px; margin-bottom: 15px;}
/*.map-hours .overlay .popup {width: 68%; top: 20vw; padding-top: 20px;}*/
.map-hours .popup-header {justify-content: flex-end;}
.popup-hours {width: 370px;}
.map-hours .popup-table {gap: 100px;}
.map-hours .popup h2 {text-transform: uppercase; color: #000; font-size: 20px; background: none !important; text-align: left !important; padding: 10px 0 5px 0!important;}
.map-hours .popup-table li {font-size: 16px; line-height: 16px;}
.map-hours .popup-hours {width: 620px;}
.map-hours .popup-table p {font-size: 16px !important; line-height: 27px !important;}
.map-hours #Rochester .overlay .popup, .map-hours #Sanborn .overlay .popup, .map-hours #Sioux .overlay .popup, .map-hours #Spencer .overlay .popup {top: 125vw;}
.map-hours #Cloud .overlay .popup, .map-hours #Willmar .overlay .popup, .popup {top: 50%!important; transform: translateY(-50%)!important;}
.open-location { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; }
/*---CAREERS---*/
#openings {background: url("/siteart/openings.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
#internships {background: url("/siteart/internship.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
#powerup {background: url("/siteart/powerup-program.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
.career-overlay {background: linear-gradient(to top,rgba(0,0,0,1.00),rgba(0,0,0,.10)); height: 300px; display: flex; justify-content: center; align-items: center;}
.career-links a {width: 100%;}
.career-links img {width: 100%;}
.career-links a:hover img {transition: .5s; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.career-links h3 {color: #fff; text-transform: uppercase; font-size: 25px; border-bottom: 1px transparent solid;}
.career-links a:hover h3 {border-bottom: 1px #fff solid; transition: .5s;}
/*---CAREER OPENINGS---*/
#career-flex {display: flex; justify-content: space-between;}
#career-flex button {margin-top: 5px !important; width: 100%; text-align: left; padding: 10px 20px; font-weight: bold; font-size: 16px; box-shadow: none;}
#map-locations {width: 25%;}
#career-flex h3 {text-transform: uppercase; font-weight: bold; font-size: 16px; margin-top: 30px; margin-bottom: 8px;}
.career-drop {width: 60%;}
.career-drop p {color: #2f2f2f !important; margin-bottom: 10px;}
.panel-width {padding-top: 20px;}
.panel-width a {color: #DB6422; font-weight: bold; text-transform: uppercase;}
.panel-width a:hover {color: #A94D1A;}
.panel-width a:hover i {padding-left: 10px; transition: .5s;}
.mobile-drop {display: none;}
.equipment-form a {color: #DB6422;}
.equipment-form a:hover {color: #A94D1A; transition: .5s;}
/*Accordion*/
.flex-container.flex-services {justify-content: space-between;gap: 15px;}
.flex-services .page-head {flex: 1;}
.service-section {flex: 1;}
.accordion {background: #DB6422;color: #fff;cursor: pointer;padding: 15px 40px;font-size: 14px;margin: 0 auto;text-align: left;border: none;outline: none;font-family: 'Roboto', sans-serif !important;transition: 0.4s;display: flex;align-items: center;justify-content: space-between;font-weight: 300;letter-spacing: 1px;text-transform: uppercase;justify-content: center;}
.panel ul.fa-ul {padding-inline-start: 0px;}
.panel {background-color: white;max-height: 0;overflow: hidden;transition: max-height 0.2s ease-out;margin: 5px 0;}
.panel p {padding: 0px 0;}
/*---BRAKE DRUM BULK DEALS---*/
.brake-drum-banner {background: #DB6422;}
.brake-drum-banner-wrap {width: 90%; margin: 0 auto; padding: 20px 0; display: flex; justify-content: center; align-items: center; gap: 100px;}
.banner-price-flex {display: flex; align-items: center; gap: 10px;}
.banner-price-flex > p {font-size: 90px; line-height: 90px; font-family: 'roboto', sans-serif; color: #fff; font-weight: bold;}
.banner-price-flex > div p {font-size: 50px; line-height: 35px; font-family: 'roboto', sans-serif; color: #fff; font-weight: bold;}
.banner-price-flex > div p span {font-size: 35px; line-height: 35px;}
.banner-or {font-family: 'roboto', sans-serif; font-size: 35px; line-height: 35px; color: #fff; font-weight: bold; text-transform: uppercase;}
.banner-price {text-align: center;}
.banner-price > p {font-family: 'roboto', sans-serif; font-size: 25px; line-height: 35px; color: #000; text-transform: uppercase; font-weight: bold; margin-top: 5px;}
.brake-drum-content {width: 90%; margin: 0 auto;}
.brake-drum-content-wrap {padding: 20px 0; display: flex; justify-content: space-between; gap: 50px; align-items: center;}
.brake-drum-content-wrap > div:first-child {width: 50%;}
.brake-drum-content-wrap > div:last-child {width: 50%; text-align: center;}
.brake-drum-content-wrap > div:last-child img {width: 95%; margin: 0 auto; transform: rotate(90deg);}
.brake-drum-content-wrap h1 {font-family: 'roboto', sans-serif; font-size: 50px; line-height: 60px; color: #000; text-transform: uppercase; font-weight: bold; margin-bottom: 10px;}
.brake-drum-content-wrap p {font-family: 'roboto', sans-serif; font-size: 18px; line-height: 30px; color: #000; margin-bottom: 10px;}
.brake-drum-content-wrap p span {color: #DB6422; font-family: 'roboto', sans-serif; font-weight: bold; font-size: 20px; line-height: 30px;}
.brake-drum-content-wrap ul {padding-left: 20px;}
.brake-drum-content-wrap ul li {list-style: decimal; font-family: 'roboto', sans-serif; font-size: 18px; line-height: 30px; color: #000; marign-bottom: 5px;}
.brake-drum-footer {border-top: 1px #bbb solid;}
.brake-drum-footer-wrap {width: 90%; margin: 0 auto; padding: 50px 0; display: flex; justify-content: space-between; gap: 50px;}
.flex-one-third{width: 33.333%;}
.flex-one-third img{width: 100%;}
/*--------FORM STYLES--------------------*/
.consign-form h1 {font-family: 'Roboto', sans-serif; font-size: 35px; color: #DB6422; font-weight: 600; text-transform: uppercase; padding-bottom: 10px;}
.consign-form {width: 85%; margin: 0 auto; margin-top: 50px; border-radius: 5px; position: relative; margin-bottom: 100px;}
.consign-form p {font-size: 18px; font-weight: 400; font-family: 'Roboto', sans-serif; color: #6F6F6F; line-height: 28px; padding-bottom: 10px;}
.consign-form form input {background: #F3F3F3; border: none; width: 100%; padding: 13px 0 13px 17px; font-family: 'inter-variable', sans-serif; font-size: 14px;}
.consign-form td {width: 100%;}
.consign-form form {width: 99%;}
.consign-form form textarea {width: 100%; background: #F3F3F3; border: none; padding: 13px 0 13px 17px; font-family: 'inter-variable', sans-serif; font-size: 14px;}
.consign-form form select {width: 100%; background: #F3F3F3; border: none; padding: 13px 0 13px 17px; font-family: 'inter-variable', sans-serif; font-size: 14px;}
.consign-form form tr {display: flex; gap: 25px; margin-bottom: 12px;}
.consign-form form table {width: 100%;}
.consign-form form .submitselect {background: #DB6422; border: none; width: 220px; padding: 10px 0; color: #000; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: 14px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: flex; justify-content: center;}
.consign-form form .submitselect:hover {background: #A94D1A; transition: .5s;}
.consign-form form .CaptchaMessagePanel {color: #303030; font-weight: normal; font-size: 15px;}
.consign-form form .CaptchaWhatsThisPanel a {color: #303030; border-bottom: 1px transparent solid;}
.consign-form form .CaptchaWhatsThisPanel a:hover {border-bottom: 1px #303030 solid; transition: .5s;}
.consign-form form .submit {background: #DB6422; border: none; width: 220px; padding: 10px 0; color: #fff; font-family: 'Roboto', sans-serif; text-transform: uppercase; font-size: 14px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.consign-form form .submit:hover {background: #A94D1A; transition: .5s; cursor: pointer !important;}
.form-wrapper h2 {font-family: 'Roboto', sans-serif; font-size: 25px; color: #DB6422; font-weight: 600; text-transform: uppercase; padding-top: 15px;}
.form-wrapper h3 {color: #0F380F; font-size: 20px; margin-top: 30px; line-height: 28px;}
.consign-form #continue {display: flex; margin-top: 10px;}
.get-in-touch {margin-bottom: 60px;}
.anonymous input {width: 25px !important; margin: 0; margin-bottom: 10px;}
.pick-interest {margin-bottom: 0px !important; padding-bottom: 4px !important;}
/* S13 FORM */
.form-container .form-box {margin: 0 auto;}
.dark.panel #form-submit {margin-bottom: 250px;}
.form-box {background: #fff;padding: 5px 15px;box-shadow: 0 9px 30px -8px rgba(0,0,0,0.4);width: 70%;}
.form-box .heading {padding: 15px 0;}
.form-flex {display: flex;justify-content: center;gap: 30px;margin: 10px 0;}
.form-flex label {font-family: "Roboto", sans-serif;font-size: 15px;font-weight: 600;padding-bottom: 5px;display: inline-block;}
.form-flex input, .form-flex select, .form-flex textarea, .form-flex .orange-btn, .form-flex div {width: 100%;}
.form-flex input, .form-flex select, .form-flex textarea {background: #000;color: #fff;font-family: "Roboto", sans-serif;font-size: 15px;padding: 15px;border: none;border-radius: 0;}
.form-flex input::placeholder, .form-flex textarea::placeholder {color: #fff;}
.form-flex input:focus-visible, .form-flex select:focus-visible, .form-flex textarea:focus-visible {outline: none;}
textarea {height: 150px;}
.CaptchaPanel {font-family: "Roboto", sans-serif;}
#captcha {display: none;}
#captcha a {color: #fff;}
.orange-btn {background-color: #DB6422;color: #fff;padding: 15px;border: none;transition: all .3s ease-in;font-size: 24px;text-transform: uppercase;font-weight: 800;}
.orange-btn:hover {background-color: #000;}
/*-------- Parts Specials ----------------*/
.gradient-overlay{position: relative;display: inline-block;z-index: 999;}
.gradient-overlay::after{content: "";position: absolute;inset: 0;background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .25) 100%); pointer-events: none; width: 100%; justify-self: center; z-index: 999;}
section#parts-specials-banner {display:flex; padding:30px 0 80px;}
section#parts-specials-banner img{width: 100%; max-width: 90%; margin: 0 auto; text-align:center;}
.black-background {background: #000; padding: 20px 0 60px;}
#monthly-deals{padding-bottom: 50px;}
#monthly-deals h2{width: 90%;margin-left: 5%;padding-top: 30px;padding-bottom: 30px;color: #000;font-size: 75px;text-transform: uppercase;}
.monthly-deal-slider.slick-initialized.slick-slider {width: 90%;margin: 0 auto;}
.monthly-deal-slider .slick-slide img {max-width: 100%;}
.monthly-deal-slider .slick-prev:before, .monthly-deal-slider .slick-next:before {color:#DB6422;}
.monthly-deal-slider .slick-prev {left: -2.5%;z-index: 9999;}
.monthly-deal-slider .slick-next {right: 0px;z-index: 9999;}
.quarterly-deal-slider.slick-initialized.slick-slider {width: 90%;margin: 0 auto;}
.quarterly-deal-slider .slick-slide img {max-width: 90%;}
.quarterly-deal-slider .slick-prev:before, .quarterly-deal-slider .slick-next:before {color:#DB6422;}
.quarterly-deal-slider .slick-prev {left: 25px;z-index: 9999;}
.quarterly-deal-slider .slick-next {right: 117px;z-index: 9999;}
#Quarterly-deals h2{width: 95%;text-align:right;padding-bottom: 30px;color: #fff;font-size: 75px;text-transform: uppercase;}
#Quarterly-deals{border-top:4px solid #DB6422;}
.truck-logo img{width:100%;margin-top: 42px;max-width:51px;}
.quarterly-top p{color: #fff;font-size: 35px;font-weight: bold;}
.quarterly-top{display: flex;justify-content: space-between;align-items: center;}
span.little-pdf {font-size: 15px;}
.quarterly-button {margin-top: 41px;justify-self: flex-end;width: 100%;}
img.imgpartsspecial{width: 34.9%;}
.quarterly-button.imgpartsspecial{position: absolute;bottom: 0px;left: 153%;}
.quarterly-button.imgpartsspecialleft {position: absolute;bottom: 0px;left: 34px;}
.quarterly-button-s.imgpartsspecial{position: absolute;bottom: 0px;left: 145%;}
.monthly-something{position: relative;display: inline-block;}
.quarterly-something{position: relative;display: inline-block;}
.quarterly-button-s {margin-top: 41px;justify-self: flex-end;width: 100%;}
#overlay{background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9)), url("/siteart/parts-specials/new/JAN26-Tool-Specials-Flyer-12-30-25-THUMBNAIL.jpg");background-size: cover;background-position: center;height: 100%;width: 100%;}
.quarterly-column{width: 90%;display: flex;margin-bottom: 1%;padding-left: 35px;}
.quarterly-right{width: 50%;display: flex;position: relative;z-index: 1000;}
.quarterly-right-quarter{width: 14%;display: flex;}
.quarterly-column a{width: 50%;}
.quarterly-column img{width: 6%;}
button.quarterly-button.yellow {background:#eeb21d !important;color: #fff!important;}
button.quarterly-button.orange {background:#DB6422!important;color: #fff!important;}
span.yellow {font-size: 17px;color:#eeb21d !important;}
span.orange {font-size: 17px;color:#DB6422 !important;}
#request-specials h2{width: 90%;margin-left: 5%;padding-top: 30px;padding-bottom: 30px;color: #000;font-size: 75px;text-transform: uppercase;}
#request-specials .specials h2{width: 90%;margin-left: 0px;padding-top: 0px;padding-bottom: 0px;color: #000;font-size: 30px!important;text-transform: uppercase;}
.row-flex {position:relative;width: 90%;margin: 0 auto;display: flex;gap:80px 60px;}
.deal-list img {width:100%; max-width:500px;}
.row-flex img:hover {background:black;}
.row-flex:hover:after {Position:absolute;content:"";top:0;left:0;width:100%;height:100%;z-index:4;pointer-events:none;background:rgba(0,0,0, 0.5);transition:ease-in-out;}
.column:hover {z-index:5;}
.date-flex {display: flex;padding:0 0 20px 0;flex-direction: column;font-size: 18px;}
.location-border.specials {width: 100%;max-width: 558px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);}
span.title {font-weight:bold;font-size:25px;text-transform:uppercase;}
.small-orange{color:#943B09!important; margin: 0px;}
.address-flex {display: flex;justify-content: space-between;}
section#request-specials {width: 90%;margin: 0 auto;padding-bottom: 80px;}
#last-bit{width: 100%;margin: 50px auto;position: relative;display: flex;background: #000;}
#last-bit h2{text-transform: uppercase;font-size: 35px;padding-top: 0px;}
#last-bit p{margin-bottom: 8px;}
.last-left{width: 55%;display: flex;align-items: center;}
.ggg{width: 90%;margin: auto;color: #fff;}
.click-here {background: #DB6422;padding: 50px 0 50px 0;width: 45%;font-size: clamp(2.5rem, 0rem + 3.3333vw, 5rem);color: #fff !important;border-radius: 30px 0px 0px 30px;text-transform:uppercase;text-align: center;align-content: center;}
.click-here a{color:#fff !important;cursor: pointer;}
.call-here-yellow{background: #e8b100;padding: 25px 25px 25px 0px;width: 70%!important;font-size: 33px;color: #fff!important;border-radius: 30px 0 0 30px;text-transform: uppercase;justify-content: flex-end;}
.call-here{background: #DB6422;padding: 25px 25px 25px 0px;width: 70%!important;font-size: 33px;color: #fff!important;border-radius: 30px 0 0 30px;text-transform: uppercase;justify-content: flex-end;}
.call-button{display: flex;width: 105.6%;justify-content: flex-end;margin: 25px 0 25px 0;;}
p span.monthly-title {font-size: clamp(1.5rem, 1.383rem + 0.5851vw, 2.1875rem ) !important; color: #000;}
.quarterly-top.monthly {width: 100%; display: block;justify-content: space-between;align-items: flex-end;margin-bottom: 13px;}
.location-border.specials h2, .location-border.specials i.fa-solid.fa-location-dot{font-size:28px !important;}
.build-international.online-brochures .tablink1.location a{color:#000;}
#request-specials .build-international{justify-content: center;}
#request-specials .build-international a{color:#000 ;display: flex; width: 100%; align-items: center; margin: 10px 0}
a.contact {margin-bottom: 20px;}
/* Pop up */
.item{width: 100%; left:0; overflow-y:scroll; display:none; padding-bottom:50px; margin:0 auto;padding-top:50px;top:0;position:fixed;z-index: 101;height: 100%;}
html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth;}
.clear { clear: both;}
.item-container{top:150px; overflow:scroll;max-height:90vh; box-sizing:border-box; max-width: 600px;margin:0 auto;background: #fff;position: relative;z-index: 103;box-shadow: 0 2px 5px rgba(0,0,0,.5); width:98%;}
.item-container .closeshow{position:absolute; top:10px; right:10px; width:40px; height:40px; padding:3px; font-size:40px; font-weight:700; color:#000;}
.item-container .closeshow:hover{cursor:pointer; color:#eb7203; background:transparent!important;}
.show-links{width:100%; display:flex; flex-direction:row; flex-wrap:wrap;}
.show-links a{width:calc(25% - 10px); padding:0; margin:5px; background:transparent;}
.show-links a img{width:100%; box-sizing:border-box; height:200px; object-fit:cover; border:solid 1px #000;}
.show-links a p{width:100%; padding:12px; text-align:center; transition:.3s ease; background:#eb7203; box-sizing:border-box; font-weight:600; border:solid 1px #000; color:#000; }
.show-links a:hover p{background:#000; color:#fff;}
/*---AIR SPRING SALE---*/
.air-spring-specs {width: 100%; margin-top: 50px;}
.air-spring-specs img {width: 100%; border: 3px #000 solid;}
.air-spring {width: 90%; margin: 0 auto; display: flex; padding: 50px 0 0 0;}
.air-spring-flex {width: 100%; display: flex; align-items: center; gap: 10px; padding-left: 30px; padding-right: 30px;}
.air-spring-flex > div {width: 100%;}
.air-spring-flex img {width: 100%;}
.air-spring-flex h3 {background: #DB6422; border-radius: 100px; color: #fff; font-size: 80px; line-height: 80px; display: flex; justify-content: flex-start; padding: 20px 30px; width: 255px; margin-bottom: 10px;}
.air-spring-flex h3 span {font-size: 40px; line-height: 40px;}
.air-spring-flex h4 {font-size: 40px; line-height: 45px; text-transform: uppercase; padding-left: 30px;}
.air-spring-flex ul {padding-left: 50px; margin-top: 10px;}
.air-spring-flex li {list-style: disc; font-size: 18px; line-height: 28px;}
@media only screen and (max-width: 1250px) {
.air-spring-flex h3 {font-size: 70px; line-height: 70px; width: 231px;}
.air-spring-flex h3 span {font-size: 35px; line-height: 35px;}
.air-spring-flex h4 {font-size: 35px; line-height: 40px;}
}
@media only screen and (max-width: 1100px) {
.air-spring-flex h3 {font-size: 60px; line-height: 60px; width: 206px;}
.air-spring-flex h3 span {font-size: 30px; line-height: 30px;}
.air-spring-flex h4 {font-size: 30px; line-height: 35px;}
}
@media only screen and (max-width: 1000px) {
.air-spring {flex-wrap: wrap;}
.air-spring-flex {padding: 0px !important;}
.air-spring-flex h3 {font-size: 80px; line-height: 80px; width: 255px;}
.air-spring-flex h3 span {font-size: 40px; line-height: 40px;}
.air-spring-flex h4 {font-size: 40px; line-height: 45px;}
}
@media only screen and (max-width: 800px) {
.air-spring-flex h3 {font-size: 70px; line-height: 70px; width: 231px;}
.air-spring-flex h3 span {font-size: 35px; line-height: 35px;}
.air-spring-flex h4 {font-size: 35px; line-height: 40px;}
}
@media only screen and (max-width: 600px) {
.air-spring-flex h3 {font-size: 60px; line-height: 60px; width: 206px;}
.air-spring-flex h3 span {font-size: 30px; line-height: 30px;}
.air-spring-flex h4 {font-size: 30px; line-height: 35px;}
}
@media only screen and (max-width: 500px) {
.air-spring-flex {flex-wrap: wrap;}
.air-spring {gap: 50px;}
.air-spring-flex > div:last-child {text-align: center;}
.air-spring-flex img {width: 80%; margin: 0 auto;}
.air-spring-flex {gap: 25px;}
}
/*---GRILLE GUARD SALE---*/
.grille-guard, .cylinder-head {width: 90%; margin: 0 auto; padding: 50px 0;}
.cylinder-head {display: flex;}
.grille-guard-flex {padding: 50px 30px; display: flex; gap: 10px; align-items: center;}
.cylinder-head-flex {justify-items: center;}
.cylinder-head-pad {padding: 50px 30px; justify-items: center;}
.cylinder-head-pad h2{text-align: center; font-size: 50px;}
.grille-guard > div:first-child {border: 5px #E5E5E5 solid; border-bottom: 0px;}
.grille-guard > div:last-child {border: 5px #E5E5E5 solid;}
.grille-guard-flex > div:first-child {width: 40%;}
.grille-guard-flex > div:last-child {width: 60%;}
.grille-guard-flex h3, .cylinder-head-flex h3 {background: #DB6422; border-radius: 100px; color: #fff; font-size: 50px; line-height: 50px; display: flex; justify-content: flex-start; padding: 10px 20px; width: 231px; margin-bottom: 10px;}
h3.blackback{background-color: black; color: #fff; text-decoration: line-through; text-decoration-color: #DB6422;}
.grille-guard-flex h3 span, .cylinder-head-flex h3 span {font-size: 25px; line-height: 25px;}
.grille-guard-flex h4, .cylinder-head-flex h4 {font-size: 40px; line-height: 45px; text-transform: uppercase; padding-left: 20px;}
.grille-guard-flex h5, .cylinder-head-flex h5 {font-size: 30px; line-height: 35px; padding-left: 20px; color: #DB6422; margin-top: 5px;}
.grille-guard-flex ul, .cylinder-head-flex ul {padding-left: 40px; margin-top: 10px;}
.grille-guard-flex li, .cylinder-head-flex li {list-style: disc; font-size: 18px; line-height: 28px;}
.grille-guard-flex img, .cylinder-head-flex img {width: 100%;}
.grump-flex{display: flex; justify-content:space-around;}
.cylinder-head > div:first-child {border: 5px #E5E5E5 solid; width: 50%; border-right: 0px;}
.cylinder-head > div:last-child {border: 5px #E5E5E5 solid; width: 50%;}
.cylinder-head-flex > div:first-child {width: 70%; padding: 50px 30px;}
.cylinder-head-flex > div:last-child {width: 100%;}
@media only screen and (max-width: 1000px) {
.grille-guard-flex {flex-wrap: wrap; gap: 50px;}
.grille-guard-flex > div:first-child {width: 100%;}
.grille-guard-flex > div:last-child {width: 100%;}}
@media only screen and (max-width: 1100px) {
.cylinder-head {display: block;}
.cylinder-head > div:first-child {border: 5px #E5E5E5 solid; width: 100%; border-bottom: 0px;}
.cylinder-head > div:last-child {border: 5px #E5E5E5 solid; width: 100%;}
.cylinder-head-flex {flex-wrap: wrap; gap: 50px;}
.cylinder-head-flex > div:first-child {width: 80%;}
.cylinder-head-flex > div:last-child {width: 100%;}
}
@media only screen and (max-width: 600px) {
.grille-guard-flex {padding: 50px 20px;}
.cylinder-head-flex {padding: 50px 20px;}
.cylinder-head-pad h2 {font-size: 30px;}
.grump-flex{display: block;}
.cylinder-head-flex > div:first-child {width: 100%;}
}
@media only screen and (max-width: 500px) {
.grille-guard-flex h3 {font-size: 40px; line-height: 40px; width: 193px;}
.grille-guard-flex h3 span {font-size: 20px; line-height: 20px;}
.grille-guard-flex h4 {font-size: 35px; line-height: 40px;}
.grille-guard-flex h5 {font-size: 25px; line-height: 30px;}
.cylinder-head-flex h3 {font-size: 40px; line-height: 40px; width: 193px;}
.cylinder-head-flex h3 span {font-size: 20px; line-height: 20px;}
.cylinder-head-flex h4 {font-size: 35px; line-height: 40px;}
.cylinder-head-flex h5 {font-size: 25px; line-height: 30px;}
}
/*-------- PARTS AND CONTACTS STYLES ----------------*/
.parts-header {margin-bottom: 40px;padding-left: 20px;}
.parts-header h1 {font-size: 2.5rem;font-weight: bold;color: #333;}
.parts-locations-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;max-width: 1600px;margin: 0 auto;}
.parts-location-card {background: white;padding: 30px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);display: flex;flex-direction: column;}
.parts-location-name {font-size: 30px;font-weight: bolder;margin-bottom: 20px;color: #333;}
.parts-address-section {display: flex;align-items: flex-start;gap: 12px;margin-bottom: 20px;}
.parts-map-icon {width: 16px; }
.parts-address-text {color: #333;line-height: 1.5;font-weight: bold;}
.parts-hours {margin-bottom: 25px;color: #333;}
.parts-hours-row {display: flex;justify-content: space-between;margin-bottom: 5px;font-weight: bold;}
.parts-manager-section {margin-bottom: 20px;}
.parts-manager-name {font-weight: bolder;font-size: 25px;margin-bottom: 4px;color: #333;}
.parts-manager-title {margin-bottom: 8px;font-weight: bold;}
.parts-manager-phone {color: #333!important;margin-bottom: 4px;font-weight: bold;}
.parts-manager-email {color: #666;text-decoration: none;word-break: break-all;}
.parts-location-card.orange .parts-manager-email {color: #DB6422;}
.parts-location-card.yellow .parts-manager-email {color: #FDB913;}
.parts-call-button {display: block;padding: 20px 30px;border-radius: 25px 0 0 25px;color: white;text-decoration: none;font-weight: bold;font-size: 25px;text-align: center;margin-top: auto;margin-right: -30px;margin-bottom: 0;margin-left: 25%;width: calc(75% + 30px);}
.parts-location-card.orange .parts-call-button {background-color: #DB6422;}
.parts-location-card.yellow .parts-call-button {background-color: #FDB913;}
.parts-call-button:hover {opacity: 0.9;}
/* Parts Request Section Styles */
.hbc-parts-section {background-color: #000;padding: 40px 0 40px 60px;margin-bottom: 40px;position: relative;}
.hbc-parts-content {max-width: 2200px;margin: 0 auto;display: grid;grid-template-columns: 1fr 35%;gap: 0;align-items: stretch;height: 100%;}
.hbc-parts-text-wrapper {text-align: left;padding-right: 40px;display: flex;flex-direction: column;justify-content: center;max-width: 70%;}
.hbc-parts-title {color: #fff;font-size: 32px;font-weight: bold;margin-bottom: 15px;}
.hbc-parts-text {color: #fff;font-size: 16px;line-height: 1.6;margin: 0;}
.hbc-parts-button {display: flex;align-items: center;justify-content: center;background-color: #DB6422;color: #FFFFFF;font-size: 60px;font-weight: bold;padding: 20px 30px;border-radius: 50px 0 0 50px;text-decoration: none;box-shadow: 0 4px 15px rgba(255, 140, 0, 0.4);text-align: center;margin: -40px 0 -40px 0;}
.oil-container {max-width: 1600px;margin: 0 auto;padding-bottom: 40px;padding-top: 40px;}
.top-row {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;margin-bottom: 20px;}
.third-row {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;margin-top: 20px;margin-bottom: 20px;}
.three-items {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;margin-top: 20px;}
.coupon-box {background: white;padding: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);}
.price-display {display: flex;align-items: flex-start;margin-bottom: 20px;}
.dollar-amount {font-size: 90px;font-weight: bold;color: #ff6600;line-height: 1;}
.cents-container {display: flex;flex-direction: column;align-items: flex-start;margin-left: 4px;}
.cent-amount {font-size: 50px;font-weight: bold;color: #ff6600;line-height: 1;}
.per-unit {font-size: 12px;color: #666;margin-top: 2px;}
.image-container {margin-bottom: 20px;text-align: center;display: flex;align-items: center;justify-content: center;}
.image-container img {max-width: 100%;max-height: 345px;height: auto;width: auto;object-fit: contain;border-radius: 4px;padding-right: 25px;}
.text-content h2 {font-size: 30px;margin-bottom: 10px;color: #333;}
.text-content p {font-size: 14px;color: #666;margin-bottom: 10px;line-height: 1.5;}
.text-content h3 {font-size: 20px;color: #555;font-weight: 600;}
.dual-product-container {display: flex;gap: 20px;margin-bottom: 20px;}
.product-item {flex: 1;}
.long-box {background: white;padding: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);}
.long-box-content {display: grid;grid-template-columns: repeat(2, 1fr);gap: 30px;margin-bottom: 20px;}
.item-section {display: flex;flex-direction: column;}
.single-box-container {margin-top: 20px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;position: relative;min-height: 400px;}
.single-box-content {background: white;padding: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);display: flex;flex-direction: column;}
.button-container {display: flex;flex-direction: column;gap: 15px;justify-content: center;position: absolute;right: calc((100vw - 1600px) / -2);width: 700px;top: 50%;transform: translateY(-50%);}
.button-container-half {display: flex;flex-direction: column;gap: 15px;justify-content: center;align-items: center;}
.large-button {font-weight: bold;border: none;border-radius: 80px 0 0 80px;cursor: pointer;transition: all 0.3s ease;color: white;text-align: center;text-transform: uppercase;line-height: 1.3;}
.large-button:first-child {background-color: #DB6422;font-size: 45px;padding: 55px 60px;width: 100%;}
.large-button {background-color: #DB6422;font-size: 30px;padding: 20px 40px;width: 75%;align-self: flex-end;}
/* Responsive adjustments */
@media (max-width: 1662px){
.swiper-container{max-width:1300px;}
}
@media (max-width: 1609px){
.hyatt{font-size:20px;}
}
@media (max-width: 1312px){
.hyatt{font-size:17px;}
}
@media (max-width: 1312px){
.hyatt{font-size:13px;}
}
@media (max-width: 910px){
.buttons{gap:3vh; width:30%;}
}
@media (max-width: 660px){
.buttons{gap:2vh; width:28%;}
}
@media (max-width: 502px){
.buttons{gap:1vh; width:28%;right:45px;}
}
@media (max-width: 360px){
.buttons{gap:0vh; width:28%;right:25px;}
}
@media (max-width: 798px){
.hyatt{font-size:20px;}
}
@media (max-width: 1353px){
.split-screen{display: flex; flex-direction: column; width:100%; }
.left-info{width:100%;}
.right-info{width:100%;}
}
@media (max-width: 1170px){
.bodyshoptabs img {width:70%;}
}
@media (max-width: 683px){
.bodyshoptabs img {width:70%;}
.bodyshop-section-services {display:grid; grid-template-columns: 1fr 1fr;}
.location-info {display: flex; flex-direction: column; width:100%; }
}
@media (max-width: 435px){
.bodyshoptabs img {width:70%;}
.bodyshop-section-services {display:grid; grid-template-columns: 1fr;}
}
@media (max-width: 1260px) {#last-bit h2{font-size: 24px!important;}}
@media (max-width: 1200px) {.parts-locations-grid {grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 768px) {
.parts-locations-grid {grid-template-columns: 1fr;}
#preSeasonSale .third-row{grid-template-columns: 1fr;}
.parts-header h1 {font-size: 2rem;}
.parts-location-card {padding: 20px;}
}
@media (max-width: 968px) {
.hbc-parts-section {padding: 40px 20px;}
.hbc-parts-content {grid-template-columns: 1fr;gap: 30px;}
.hbc-parts-text-wrapper {padding-right: 0;}
.hbc-parts-button {margin: 0;border-radius: 20px;font-size: 24px;}
}
@media (max-width: 1190px) {
.large-button:first-child { font-size: 30px;}
}
@media (max-width: 1080px) {
.curriculum-list {display:grid; grid-template-columns: 1fr 1fr;}
}
@media (max-width: 768px) {
.top-row {grid-template-columns: 1fr;}
.long-box-content {grid-template-columns: 1fr;}
.dollar-amount {font-size: 36px;}
.cent-amount {font-size: 20px;}
.single-box-container {grid-template-columns: 1fr;min-height: auto;}
.button-container {position: static;width: 100%;transform: none;}
.large-button {width: 100% !important;border-radius: 35px;}
.large-button:last-child {align-self: stretch;}
}
@media (max-width: 1650px) and (min-width: 769px) {
.button-container {right: 0;width: 50%;}
}
@media (max-width: 717px) {
.curriculum-list {display:grid; grid-template-columns: 1fr;}
}
@media (max-width: 450px) {
.large-button:last-child { font-size: 20px;}
.large-button:first-child {font-size: 20px; padding: 30px; 60px;}
}
/*-------- commercial bus STYLES ----------------*/
.brand-container {
max-width: 2200px;
margin: 0 auto;
}
.brand-section {
overflow: hidden;
}
.brand-header {
background-color: #000;
border: 1px solid #FDB913;
padding: 40px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
transition: all 0.3s ease;
}
.brand-header:hover {
background-color: #111;
}
.brand-header img {
max-width: 300px;
max-height: 80px;
object-fit: contain;
}
.brand-content {max-height: 0;overflow: hidden;transition: max-height 0.5s ease;background-color: #0scroll-margin-top: 175px;}
.brand-content.active {max-height: 2200px;}
.brand-title {color: #000;background: #e5e5e5;font-size: 28px;font-weight: bold;text-align: center;padding: 30px 20px 10px;margin: 0;}
.cards-wrapper {position: relative;padding: 40px 60px;background: #e5e5e5;}
.cards-container {overflow: hidden;}
.cards-track {display: flex;transition: transform 0.4s ease;gap: 30px;}
.card {flex: 0 0 calc(50% - 15px);background-color: #e5e5e5;padding-left: 10px;padding-right: 10px;overflow: hidden;}
.card-main-image {width: 100%;height: 350px;object-fit: cover;}
.card-content {padding: 25px;}
.card-subheading {font-size: 20px;font-weight: bold;color: #000000;margin-bottom: 15px;}
.card-subheading strong {font-size: 30px;font-weight: bolder;}
.card-text {font-size: 14px;line-height: 1.6;color: #000;margin-bottom: 20px;}
.card-images {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;}
.card-image-wrapper {display: flex;flex-direction: column;align-items: center;}
.card-image-label {font-size: 11px;color: #000;margin-top: 5px;text-align: left;}
.card-small-image {width: 100%;height: 180px;object-fit: cover; /* Change from cover to contain */object-position: center;background-color: #000; /* Add black background so all images look uniform */cursor: pointer;transition: transform 0.2s;}
.arrow .fas {margin-top: 5px;}
.arrow {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(253, 185, 19, 0.9);color: #fff;border: none;width: 50px;height: 50px;font-size: 30px;cursor: pointer;border-radius: 50%;display: flex;align-items: center;justify-content: center;z-index: 10;transition: background-color 0.3s;line-height: 1;padding-bottom: 7px;}
.arrow:hover {background-color: #FDB913;}
.arrow.left {left: 10px;}
.arrow.right {right: 10px;}
.arrow:disabled {opacity: 0.3;cursor: not-allowed;}
/* TABLET STYLES - Between desktop and mobile */
@media (max-width: 1200px) {
.cards-wrapper {padding: 40px 50px;}
.card-main-image {height: 300px;}
}
/* SMALL TABLET / LARGE MOBILE - Single column starts here */
@media (max-width: 850px) {
.card {flex: 0 0 100%;}
.cards-wrapper {padding: 30px 50px;}
.arrow { width: 45px; height: 45px; font-size: 35px; padding-bottom: 6px;}
.arrow.left {left: 5px;}
.arrow.right {right: 5px;}
.brand-header {padding: 30px 20px; min-height: 100px;}
.brand-header img { max-width: 250px; max-height: 70px;}
.brand-title {font-size: 24px; padding: 25px 15px 10px;}
.card-content {padding: 20px;}
.card-subheading {font-size: 18px;}
.card-subheading strong {font-size: 26px;}
.card-text {font-size: 14px;}
.card-main-image {height: auto; max-height: 300px; object-fit: contain; background-color: #e5e5e5;}
.card-images {grid-template-columns: 1fr; gap: 15px;}
.card-small-image { height: 180px;}
}
/* MOBILE STYLES - Small phones */
@media (max-width: 600px) {
.brand-container {padding: 10px;}
.cards-wrapper {padding: 20px 40px;}
.arrow {width: 38px; height: 38px; font-size: 28px; padding-bottom: 5px;}
.arrow.left { left: 2px;}
.arrow.right { right: 2px;}
.brand-header {padding: 20px 10px;min-height: 80px;border: 2px solid #FDB913;}
.brand-header img {max-width: 200px; max-height: 60px;}
.brand-title {font-size: 18px;padding: 20px 10px 10px;}
.card-content {padding: 15px;}
.card-subheading {font-size: 16px;}
.card-subheading strong {font-size: 22px;}
.card-text {font-size: 13px;line-height: 1.5;}
.card-main-image {max-height: 250px;}
.card-small-image {height: 160px;}
.card-image-label {font-size: 10px;}
}
/* EXTRA SMALL MOBILE - Very small phones */
@media (max-width: 400px) {
.cards-wrapper {padding: 15px 35px;}
.arrow {width: 32px;height: 32px;font-size: 24px;padding-bottom: 4px;}
.brand-title {font-size: 16px;padding: 15px 8px 8px;}
.card-content {padding: 12px;}
.card-subheading {font-size: 15px;}
.card-subheading strong {font-size: 20px;}
.card-text {font-size: 12px;}
.card-main-image {max-height: 200px;}
.card-small-image {height: 140px;}
.s13-full-dealership h2 {font-size: 35px; line-height: 45px;}
.s13-full-dealership p {font-size: 16px; line-height: 26px;}
}
/* Contact Section Styles */
.hbc-contact-section {margin-top: 40px;position: relative;}
.hbc-contact-title {color: #000000;font-size: 48px;font-weight: bold;text-align: right;padding: 40px 20px 20px;margin: 0;background-color: #ffffff;}
.hbc-contact-background {max-width: 2200px;margin: 0px auto 0;background-image: url('/siteart/new edits/international-background-aerial-traffic-junction-darkened.JPG');background-size: cover;background-position: center;padding: 40px 40px 60px;position: relative;}
.hbc-contact-content {display: grid;grid-template-columns: 1fr 1fr;gap: 40px;align-items: center;}
.hbc-map-container {display: flex;justify-content: center;align-items: flex-start;margin-top: -80px;position: relative;z-index: 2;}
.hbc-contact-map {width: 100%;max-width: 800px;height: auto;transition: opacity 0.3s ease;margin-top: -300px;}
.hbc-salespeople-container {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: auto auto;gap: 20px;}
.hbc-salesperson {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 15px;background-color: rgba(0,0,0,0.7);padding: 30px;border-radius: 8px;cursor: pointer;transition: all 0.3s ease;border: 2px solid transparent;min-height: 320px;}
.hbc-salesperson:nth-child(1) {grid-column: 1;grid-row: 1;}
.hbc-salesperson:nth-child(2) {grid-column: 2;grid-row: 1;}
.hbc-salesperson:nth-child(3) {grid-column: 1;grid-row: 2;}
.hbc-salesperson:hover {background-color: rgba(253, 185, 19, 0.2);border-color: #FDB913;transform: translateY(-5px);}
.hbc-salesperson-image {width: 180px;height: 180px;object-fit: cover;}
.hbc-salesperson-info {flex: 1;text-align: left;}
.hbc-salesperson-name {color: #fff;font-size: 24px;font-weight: bold;margin-bottom: 5px;}
.hbc-salesperson-title {color: #fff;font-size: 16px;margin-bottom: 5px;}
.hbc-salesperson-phone {color: #fff!important;font-size: 14px;margin-bottom: 5px;}
.hbc-salesperson-email {color: #FDB913;font-size: 14px;text-decoration: none;transition: color 0.3s;}
.hbc-salesperson-email:hover {color: #fff;}
.van-bus-contact-background {max-width: 2200px;margin: 0px auto 0;background-color: #e5e5e4;padding: 40px 40px 60px;position: relative;}
.van-bus-contact-title {color: #000000;font-size: 60px;text-align: center;margin: 0; padding-bottom:10px;}
.van-bus-map-container {display: flex;justify-content: center;align-items: flex-start;position: relative;z-index: 2;}
.van-bus-contact-map {width: 100%;max-width: 800px;height: auto;transition: opacity 0.3s ease;}
.van-bus-salesperson-image {display: flex;width: 100%;max-width: 400px;height: auto; }
.van-bus-salesperson-info {text-align: left;}
.van-bus-salespeople-container {display: column;gap: 20px;}
.van-bus-contact-content {display: flex;justify-content: center;gap: 45px;align-items: center;}
.van-bus-salesperson-name {color: #000;font-size: 38px;font-weight: bold;margin-bottom: 5px;}
.van-bus-inventory-section {padding: 40px 0 40px 60px;margin-bottom: 40px;position: relative;}
.van-bus-inventory-button {display: flex;align-items: center;justify-content: center;background-color: #FDB913;color: #FFFFFF;font-size: 28px;font-weight: bold;padding: 20px 30px;border-radius: 50px 50px 50px 50px;text-decoration: none;text-align: center;margin: 10px 10px 10px 10px;}
.van-bus-inventory-button:hover {background-color: #000; }
.button-row{ margin-top: 30px; margin-bottom: 30px; margin-left: 10px; margin-right: 10px; display: flex; justify-content: center; gap: 10px; text-align: center; }
.button-row img {width: 65%;}
.img-btn {width:68%;}
.brand-list {font-size:24px; font-weight: 600; width: 50%;}
.right-brand-content {display: flex; justify-content: flex-end; align-items: center; }
.panel a {width:40%; display: flex; justify-content: center;}
/* -------- accordion STYLES ----------------*/
.brand-bar {display: grid;grid-template-columns: repeat(7, 1fr);gap: 8px;}
.brand-bar .accordion img {width: 125px;}
.brand-bar .accordion {background-color: #fff !important;color: #000;cursor: pointer;padding: 8px;font-size: 18px;box-sizing: border-box;width: 100%;transition: 0.4s;}
.brand-bar .accordion i {padding-left: 15px;font-size: 15px;transition: .3s ease;}
.brand-bar .panels {width: 100%;}
.panels .panel {max-height: 0;overflow: hidden;transition: max-height 0.3s ease;background: #fff;margin-top: 2px; }
.panels .panel-width {padding-top 20px; padding-bottom: 20px; padding-left:40px; padding-right: 40px; display: grid !important;grid-template-columns: 1fr 1fr !important; }
.panel-width {border-bottom: solid 8px #fdb913e6; border-top: solid 8px #fdb913e6; }
/* Make the button a positioning context */
.brand-bar .accordion{position: relative;background: #fff !important;border: none;cursor: pointer;padding: 20px 36px 20px 20px;width: 100%;display: flex;align-items: center;justify-content: center;}
/* The caret (chevron) — triangle shape */
.brand-bar .accordion::after {content: "";position: absolute;right: 50%;bottom: 0px;transform: translateX(50%) translateY(0);width: 0;height: 0;opacity: 0;transition: transform .25s ease, opacity .2s ease;border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 10px solid #fdb913e6;}
/* Show + flip the caret ONLY when this button is active */
.brand-bar .accordion.active::after {opacity: 1;transform: translateY(-50%) rotate(180deg);}
/* Inventory Section Styles */
.hbc-inventory-section {background-color: #000;padding: 40px 0 40px 60px;margin-bottom: 40px;position: relative;}
.hbc-inventory-content {max-width: 2200px;margin: 0 auto;display: grid;grid-template-columns: 1fr 35%;gap: 0;align-items: stretch;height: 100%;}
.hbc-inventory-text-wrapper {text-align: left;padding-right: 40px;display: flex;flex-direction: column;justify-content: center;max-width: 70%;}
.hbc-inventory-title {color: #fff;font-size: 32px;font-weight: bold;margin-bottom: 15px;}
.hbc-inventory-text {color: #fff;font-size: 16px;line-height: 1.6;margin: 0;}
.hbc-inventory-button {display: flex;align-items: center;justify-content: center;background-color: #FDB913;color: #FFFFFF;font-size: 60px;font-weight: bold;padding: 20px 30px;border-radius: 50px 0 0 50px;text-decoration: none;box-shadow: 0 4px 15px rgba(253, 185, 19, 0.4);text-align: center;margin: -40px 0 -40px 0;}
/*-------- video resources STYLES ----------------*/
.video-section {background-color: #000;border-top: 2px solid #FFD700;border-bottom: 2px solid #FFD700;padding: 40px 20px;position: relative;}
.section-header {text-align: right;margin-bottom: 30px;padding-right: 60px;}
.section-header h2 {color: #FFD700;font-size: 2.5rem;font-weight: bold;text-transform: uppercase;letter-spacing: 2px;}
.carousel-container {position: relative;max-width: 1400px;margin: 0 auto;padding: 0 60px;}
.carousel-wrapper {overflow: hidden;}
.carousel-track {display: flex; transition: transform 0.4s ease-in-out; gap: 40px;}
.video-card {min-width: 390px; max-width: 390px; flex-shrink: 0;}
.video-card-inner {background-color: transparent;display: flex;flex-direction: column;}
.video-wrapper {position: relative;width: 390px;height: 220px;overflow: hidden;cursor: pointer;border-radius: 8px;background-color: #000;}
.video-wrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: none;}
.video-info {padding: 15px 5px;}
.video-title {color: #fff;font-size: 1rem;font-weight: bold;margin-bottom: 8px;line-height: 1.3;}
.video-description {color: #ccc;font-size: 0.85rem; line-height: 1.4;margin-bottom: 10px;}
.dropdown-toggle {background-color: #eeb21d;color: #000;border: none;padding: 8px 16px;border-radius: 6px;cursor: pointer;font-weight: bold;display: inline-flex;align-items: center;gap: 8px;margin-top: 5px;transition: background-color 0.3s;font-size: 0.85rem;}
.dropdown-toggle:hover {background-color: #FFC700;}
.dropdown-icon {transition: transform 0.3s;}
.dropdown-icon.open {transform: rotate(180deg);}
.dropdown-content {max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;}
.dropdown-content.open {max-height: 800px;}
.instructions-list {color: #ccc; padding: 10px 0 0 20px; line-height: 1.6; font-size: 0.8rem;}
.instructions-list li {margin-bottom: 6px;}
.carousel-arrow {position: absolute; top: 35%; transform: translateY(-50%); background-color: #eeb21d; color: #fff; border: none; width: 45px; height: 45px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; z-index: 10; transition: background-color 0.3s, transform 0.2s; display: flex; align-items: center; justify-content: center;}
.carousel-arrow:hover {background-color: #FFC700; transform: translateY(-50%) scale(1.1);}
.carousel-arrow.left {left: -10px;}
.carousel-arrow.right {right: -10px;}
.carousel-arrow:disabled {background-color: #555; cursor: not-allowed; opacity: 0.5;}
.carousel-arrow:disabled:hover {transform: translateY(-50%) scale(1);}
/* Bus/Van Walk-Arounds Section Styles */
.walkaround-section {background-color: #fff; padding: 60px 20px;}
.walkaround-container {max-width: 1400px;margin: 0 auto;}
.walkaround-title {color: #000; front-size: 2.5rem; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 40px; text-align: left;}
.walkaround-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 50px;}
.walkaround-card {display: flex; flex-direction: column;}
.walkaround-video-wrapper {position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; background-color: #000;}
.walkaround-video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}
.walkaround-info {padding: 15px 5px;}
.walkaround-video-title {color: #000; font-size: 1.1rem; font-weight: bold; margin-bottom: 10px; line-height: 1.3;}
.walkaround-description {color: #333; font-size: 0.95rem; line-height: 1.5;}
.walkaround-button-container {text-align: center;}
.walkaround-button {display: inline-block; background-color: #eeb21d; color: #fff; font-size: 1.3rem; font-weight: bold; padding: 18px 40px; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); text-transform: uppercase; letter-spacing: 1px;}
/*-------- FOOTER STYLES ----------------*/
#footer {background: #1B1B1B; position: relative;}
.locations {display: flex; flex-wrap: wrap; gap: 5px; position: relative; top: -35px;}
.locations p {color: #DB6422; font-size: 15px; text-transform: uppercase; font-weight: 800; font-family: 'Roboto', sans-serif;}
.locations p span {color: #DB9522;}
.locations li a {font-size: 13px; color: #fff; font-family: 'Roboto', sans-serif; line-height: 18px;}
.full-locations a p {color: #DB6422; font-size: 18px; font-family: 'Roboto', sans-serif; font-weight: 800; text-transform: uppercase; line-height: 22px;}
.footer-width {width: 95%; margin: 0 auto; padding: 50px 0 60px 0; display: flex; justify-content: space-between; align-items: center;}
.quick-links p {color: #DB6422; font-size: 15px; font-family: 'Roboto', sans-serif; font-weight: 800; text-transform: uppercase; line-height: 23px; margin-bottom: 8px;}
.quick-links > div > div {display: flex; gap: 40px;}
.footer-width > div:first-child {width: 85%;}
.quick-links ul li a {font-size: 13px; color: #fff; text-transform: uppercase; line-height: 30px;}
.quick-links button {background: #BE561E; width: 233px; padding: 10px 0 12px 0; color: #fff; font-family: 'Roboto', sans-serif; font-size: 13px; text-transform: uppercase; border: none; margin-top: 25px;}
.footer-logos {align-items: center; display: flex; gap: 40px;}
.quick-links {display: flex; flex-wrap: wrap; justify-content: flex-end; width: 24%; gap: 50px;}
.quick-links button:hover {background: #A94D1A; transition: .5s;}
#footer ul li a:hover {color: #E3824C; transition: .5s;}
.full-locations a:hover i {padding-left: 10px; transition: .5s;}
.locations > div {width: 185px; margin-bottom: 10px;}
.footer-logos img {width: 100%;}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.inv-header {margin-bottom: 0px !important;}
.inv-header .showroom-content {margin-bottom: 0px !important;}
/*.header-drop {box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; position: relative;}*/
.list-content, .detail-wrapper {margin-top: 50px !important; margin-bottom: 100px !important;}
.list-top-section .list-listings-count, .listing-prices__retail-price, .listing-prices__discount-formatted-price, .listing-prices__alternate-retail-price, .listing-prices__exclusive-wholesale-price, .parts-list-content .error-message {color: #DB6422 !important;}
.list-top-section .listing-option-bar-content .list-listings-count {display: contents !important;}
.faceted-search-content .selected-facets-container .selected-facet, .northcentralintlcomhdev-a0om98.MuiPaginationItem-previousNext, .northcentralintlcomhdev-88jlbf, .list-content .list-error-container .info button:not(.login-button), .list-container-flexrow .view-listing-details-link {background: #DB6422 !important;}
.disclaimer span {font-family: 'Roboto', sans-serif !important; font-size: 16px !important; line-height: 24px !important;}
.northcentralintlcomhdev-88jlbf:hover {background: #A94D1A !important; transition: .5s !important;}
.parts-list-content {margin-top: 50px !important; margin-bottom: 100px !important;}
/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width: 1708px) {
.row-flex {position: relative; justify-content: center; flex-wrap:wrap;}
}
@media only screen and (max-width: 1600px) {
.map-hours .popup-hours {width: 680px;}
.swiper-container {max-width: 1200px;}
.custom-next-btn {right: -70px !important;}
.custom-prev-btn {left: -70px !important;}
.s13-header-link h1, .s13-full-dealership h2, .s13-integrated h2 {font-size: 55px; line-height: 65px;}
.s13-banner-bkgrd-btm {bottom: -105px;}
.s13-full-dealership {margin-top: 105px;}
}
@media only screen and (max-width: 1590px){
#request-specials h2{font-size: 65px;}
}
@media only screen and (max-width: 1588px) {
.yellow-background-lodging {width: 680px;}
.image img {width: 100%;max-width: 773px;margin-top: 90px;}
.yellow-background-lodging {
background: #eeb21d !important;
padding: 31px 41px;
position: absolute;
left: -471px;
bottom: 4px;
width: 100%;
max-width: 471px;
border-radius: 20px 0 0 20px;}
}
@media only screen and (max-width: 1550px) {
.herosurround {height: 600px;}
video {height: 600px !important;}
}
@media (max-width: 1516px) {
.panel {max-height: 312px;}
}
@media only screen and (max-width: 1500px) {
.build-overlay {height: 280px;}
.card-small-image {height: 130px;}
#filterSale .s13-header-link h1 {font-size: 45px;}
#fifthWheel .s13-header-link h1 {font-size: 45px;}
#partSpecial .s13-header-link h1 {font-size: 45px;}
#coolingSolutions .s13-header-link h1 {font-size: 45px;}
#schoolBusParts .s13-header-link h1 {font-size: 45px;}
}
@media only screen and (max-width: 1444px) {
.image img {width: 60%; max-width: unset; display: flex; margin-top: 100px; margin:0 auto;}
.yellow-background-lodging {background: #eeb21d !important; padding: 21px 41px; position: absolute; left: -471px; bottom: 4px; width: 60% !important; margin: 0 auto !important; max-width: 471px; border-radius: 10px 0 0 10px;}
span.larging-text.lodging {font-size:24px;}
.text-flex {font-size:17px;}
.side-right .overflow-img{position: absolute; bottom: 0; width: 65%; right: 0px;}
}
@media only screen and (max-width: 1400px) {
.build-overlay {height: 260px;}
.map-hours .popup-hours {width: 740px;}
.nav-overlay {height: 340px;}
.nav-overlay > div h2 {font-size: 25px; line-height: 25px;}
.nav-overlay div p {font-size: 13px;}
.overlaytext li {font-size: 17px; border-radius: 3px;}
.overlaytext li i {font-size: 25px;}
.swiper-container {max-width: 1000px;}
.custom-next-btn {right: -60px !important;}
.custom-prev-btn {left: -60px !important;}
.s13-header-link h1, .s13-full-dealership h2, .s13-integrated h2 {font-size: 45px; line-height: 55px;}
.s13-banner-bkgrd-btm {bottom: -90px;}
.s13-full-dealership {margin-top: 100px;}
.s13-links-flex div {padding: 15px 20px;}
.s13-links-flex h3 {font-size: 20px; line-height: 30px;}
}
@media only screen and (max-width: 1380px) {
.quarterly-top.monthly .monthly-title {font-size: 21px !important;}
#request-specials h2{font-size: 55px;}
}
@media only screen and (max-width: 1350px) {
.service > div:first-child {width: 65%;}
.gray-background.flex {flex-wrap:wrap;flex-direction:column;align-items: center;}
.gray-sections {width: 68%;border-right:none;border-top:3px solid #fff;padding: 24px;}
.gray-sections.general {width: 68%;border-right:none;border-top:3px solid #fff;padding: 24px;}
.flex-brochure1 {display: block;}
.category-wide {width: 97%;}
div.fb-half.map-highlights {flex-direction: column;}
.service-location-map {height: auto; width: 50%; margin-top: 0;}
}
@media (max-width: 1331px) {
.brand-bar .accordion img {width: 89px;}
}
@media only screen and (max-width: 1300px) {
.build-overlay {height: 240px;}
.consign-form {width: 90%;}
.shop-flex > div:last-child {width: 40%;}
section#request-specials .build-international a {width: 48.5% !important;}
#university .register{width: 100%;}
}
@media only screen and (max-width: 1392px) {
.lodging-flex {flex-direction:column;gap:50px;}
.yellow-background-lodging {position:relative!important;padding: 21px 41px;width: 100%;max-width: unset;border-radius: 0;left:0;}
.text-flex {justify-content: center;display:flex;}
.image img {max-width:unset;margin-top:0;}
.lodging {width:100%;display}
}
@media only screen and (max-width: 1280px) {
.footer-width > div:first-child {width: 58%;}
#footer img {width: 160px;}
.cta-button { font-size: 28px;}
.card-small-image {height: 100px;}
}
@media only screen and (max-width: 1250px) {
.customers-first {width: 100%; margin: 0 auto;}
.inv-overlay div h2 {font-size: 25px; line-height: 30px; padding-bottom: 1px;}
.inv-overlay div p {font-size: 16px; line-height: 24px;}
.inv-overlay {height: 250px;}
.online-brochures h2 {font-size: 18px;}
.map-hours .popup-hours {width: 800px;}
.career-overlay {height: 280px;}
.nav-overlay {height: 300px;}
.nav-overlay > div h2 {font-size: 22px; line-height: 22px;}
.nav-overlay div hr {width: 20px;}
.nav-overlay > div > div {gap: 0px;}
.overlaytext li {font-size: 16px;}
.hbc-large img {width: auto !important;}
}
@media only screen and (max-width: 1200px) {
.footer-width > div:first-child {width: 60%;}
.build-overlay {height: 220px;}
.build-international a:hover i {font-size: 80px;}
.consign-form {width: 95%;}
.shop-flex {flex-wrap: wrap; gap: 12px;}
.shop-flex > div:first-child {width: 100%;}
.shop-flex > div:last-child {width: 550px;}
.finance-hero {margin-top: 0px; width: 95%;}
#showroom {width: 95%;}
#map-locations {width: 30%;}
.career-drop {width: 70%;}
#career-flex {gap: 40px;}
.inv-callto {gap: 20px;}
.image-container img {max-height: 250px;}
#filterSale .s13-header-link h1 {font-size: 37px;}
#fifthWheel .s13-header-link h1 {font-size: 37px;}
#partSpecial .s13-header-link h1 {font-size: 37px;}
#coolingSolutions .s13-header-link h1 {font-size: 37px;}
#schoolBusParts .s13-header-link h1 {font-size: 37px;}
.hbc-contact-content {grid-template-columns: 1fr;gap: 30px;}
.hbc-map-container {margin-top: 0;}
.hbc-contact-map {margin-top: 0;max-width: 60%;}
.swiper-container {max-width: 800px;}
.custom-next-btn {right: 10px !important;top: 40%!important;}
.custom-prev-btn {left: 10px !important;top: 40%!important;}
.s13-header-link h1 {font-size: 35px; line-height: 45px;}
.s13-banner-bkgrd-btm {bottom: -75px;}
}
@media only screen and (max-width: 1180px) {
.row-flex {justify-content: center;}
}
@media only screen and (max-width: 1167px) {
.panels .panel-width {display: grid; grid-template-columns: 1fr!important;}
.right-brand-content {display: flex; justify-content: flex-start; }
.brand-list {font-size: 18px;}
.panel {max-height: 360px;}
}
@media only screen and (max-width: 1118px) {
.quarterly-top.monthly .monthly-title {font-size: 18px !important;}
}
@media only screen and (max-width: 1165px){
#request-specials h2{font-size: 50px;}
}
@media only screen and (max-width: 1150px) {
.footer-width {flex-wrap: wrap;}
.footer-width > div:first-child {width: 100%;}
.quick-links {width: 100%; justify-content: space-between; gap: 0px; margin-top: 50px; align-items: end;}
.service > div:first-child {width: 60%;}
.map-hours .popup-hours {width: 860px;}
#hero-nav {flex-wrap: wrap; justify-content: center;}
#trucks, #yellow-bus, #white-bus, #leasing, #recruitment {width: 32.5%;}
.nav-overlay {height: 380px;}
.nav-overlay > div h2 {font-size: 25px; line-height: 25px;}
.overlaytext ul {flex-wrap: wrap; justify-content: center;}
.overlaytext a {width: 32.5%;}
.hbc-hero-tabs a {width: 35%;}
.items{display: grid; grid-template-columns: auto auto;}
}
@media only screen and (max-width: 1130px) {
#coolingSolutions .three-items{display: block;}
#schoolBusParts .three-items{display: block;}
}
@media only screen and (max-width: 1100px) {
.build-overlay {height: 200px;}
.build-international {gap: 5px;}
.build-international a {width: 24.5%;}
.service {flex-wrap: wrap; gap: 0px;}
.service > div:first-child {width: 100%;}
.service-box {margin-top: 40px;}
.brochure-finance-btn {height: 160px; font-size: 24px; width: auto;}
.ctas-footer .fb-thirds {flex-direction: column;}
.ctas-footer .fb-thirds div {width: 100%;}
#preSeasonSale .price-display{ width: 14vw;}
#ezSale .oneBrushBox h2{font-size: 20px;}
#ezSale .thirdsBrushBox h2{font-size: 20px;}
.fb-offers div {width: 50% !important;}
}
@media only screen and (max-width: 1078px) {
.brand-bar .accordion img {width: 49px;}
}
@media only screen and (max-width: 1060px){
#request-specials h2{font-size: 45px;text-align: center;}
}
@media only screen and (max-width: 1050px) {
.online-brochures h2 {font-size: 16px;}
#showroom .location-border p {font-size: 14px; line-height: 24px;}
.map-hours .popup-hours {width: 920px;}
.career-overlay {height: 260px;}
.career-links h3 {font-size: 22px;}
#school-commercial h1, #school-commercial h2 {font-size: 28px; line-height: 33px;}
#school-commercial p {font-size: 17px;}
#school-commercial button {font-size: 15px;}
.bodyshop-sidemap {width: 39%;}
.s13-links-flex h3 {font-size: 18px; line-height: 28px;}
}
@media only screen and (max-width: 1024px) {
.walkaround-grid {grid-template-columns: repeat(2, 1fr); gap: 30px;}
.brochure-card-wrapper {min-width: calc(50% - 20px);}
}
@media only screen and (max-width: 1000px) {
.click-here {position: relative;font-size:40px;border-radius:none;}
section#request-specials {padding:0;}
.inv-overlay {height: 200px;}
.inv-overlay div h2 {font-size: 20px; line-height: 25px;}
.inv-overlay div p {font-size: 14px; line-height: 20px;}
.disclaimer span {font-size: 14px !important; line-height: 20px !important;}
.inv-overlay div {padding-bottom: 12px;}
.inv-callto {gap: 5px;}
.build-overlay {height: 180px;}
.consign-form form {width: 98%;}
.popup-table li {line-height: 22px; font-size: 12px;}
.map-hours .popup-hours {width: 100%;}
.popup-table iframe {width: 85% !important;}
#welcome-to {width: 75%;}
#Willmar iframe, #Fargo iframe, #Bismarck iframe, #Dickinson iframe, #East-Grand iframe {width: 100% !important;}
.yellow-button{width:100%!important; max-width:unset!important;text-align:center;position:relative;border-radius: 0;}
span.large-font {font-size:unset;}
.flex {flex-direction:column;gap:50px;}
.flex.international, .flex.black-twothirds, .flex.drop.three, .flex.download, .download-title {flex-direction: row; gap: 0;}
.flex.drop.three {flex-wrap: wrap;}
.flex.drop .one-third, .flex.drop .one-third.left {width: 100%; order: 2; border-radius: 0;}
.flex.drop .two-third {padding: 20px 0;}
.flex.drop .one-third h2 {font-size: 34px;}
.yellow-button a {font-size:34px;}
.sessions, .seats {text-align:center;}
ol.sessions {display:flex;flex-direction:column;align-items:center;}
.yellow-button a {font-size:24px;}
.service-banner-content {padding: 25px 0;}
.service-banner-content .cta-button-reverse {display: none;}
.service-banner-text {text-align: center; align-self: center; width: 100%; margin: 0;}
.side-left{width: 100%;}
.side-right{width: 100%;}
.side-right img{width: 30%; justify-self: unset;}
.side-right .overflow-img{width: 60%;}
#filterSale .s13-header-link h1 {font-size: 30px;}
#fifthWheel .s13-header-link h1 {font-size: 30px;}
#partSpecial .s13-header-link h1 {font-size: 30px;}
#coolingSolutions .s13-header-link h1 {font-size: 30px;}
#schoolBusParts .s13-header-link h1 {font-size: 30px;}
#ezSale .brushItem .dollar-amount{font-size: 40px;}
#ezSale .brushItem .cent-amount{font-size: 25px;}
.partsthirds{display: block;}
.partshalf{display: block;}
.partshalf-section{width: 100%;}
.partsthirds-section{width: 100%;}
.bottomoff{border-left: 5px #E5E5E5 solid;}
.sideoff{border-left: 5px #E5E5E5 solid;}
.partsMobile{border-top: 0px;}
.partsTwoThird-section{width: 100%;}
.partsOneThird-section{width: 100%; padding-top: 20px;}
.brake-drum-full-grey{ display: block;}
.brake-drum-half-grey{width: 100%;}
.partshalf-section-str{ width: 100%;}
}
@media (max-width: 968px) {
.hbc-inventory-section {padding: 40px 20px;}
.hbc-inventory-content {grid-template-columns: 1fr;gap: 30px;}
.hbc-inventory-text-wrapper {padding-right: 0;}
.hbc-inventory-button {margin: 0;border-radius: 20px;font-size: 24px;}
.hbc-contact-title {font-size: 36px;text-align: center;padding: 30px 15px 15px;}
.hbc-contact-background {padding: 20px 20px 40px;}
.hbc-salespeople-container {gap: 15px;}
.hbc-salesperson {min-height: auto;padding: 20px;}
.hbc-salesperson:nth-child(3) {grid-column: 1;}
.hbc-salesperson-image {width: 140px;height: 140px;}
.hbc-salesperson-info {text-align: left;;}
.hbc-salesperson-name {font-size: 20px;}
.hbc-salesperson-title, .hbc-salesperson-phone, .hbc-salesperson-email {font-size: 13px;}}
@media (max-width: 953px) {
.swiper-container {max-width: 95%;padding: 0 10px;}
.custom-next-btn {right: 15px !important;}
.custom-prev-btn {left: 15px !important;}
.custom-nav-btn {width: 45px !important;height: 45px !important;}
.custom-nav-btn::after {font-size: 26px !important;}
.s13-header-link h1 {font-size: 25px; line-height: 35px;}
.s13-banner-bkgrd-btm {bottom: -60px;}
.s13-links-flex {flex-wrap: wrap;}
.s13-links-flex a {width: 49%;}
.s13-links-flex h3 {font-size: 20px; line-height: 30px;}
}
@media only screen and (max-width: 950px) {
.online-brochures h2 {font-size: 14px;}
#showroom .location-border p {font-size: 12px; line-height: 22px;}
.popup-table iframe {width: 75% !important;}
.parts-img-links {gap: 5px;}
.career-overlay {height: 240px;}
#Willmar iframe, #Fargo iframe, #Bismarck iframe, #Dickinson iframe, #East-Grand iframe {width: 100% !important;}
.flex.black-twothirds {flex-wrap: wrap;}
.black-twothirds .description {width: 100%;}
.left-border-yellow{display: none;}
.weekly-agenda{display: grid; grid-template-columns: auto auto; grid-row-gap: 20px; grid-column-gap: 20px;}
.day-week{width: 100%;}
}
@media only screen and (max-width: 900px) {
section#Quarterly-deals h2 {text-align: center;}
.build-international a {width: 32.5%;}
.build-overlay {height: 200px;}
.popup-table iframe {width: 35% !important;}
.overlaytext ul, .inv-callto {gap: 10px;}
#Willmar iframe, #Fargo iframe, #Bismarck iframe, #Dickinson iframe, #East-Grand iframe {width: 100% !important;}
.brochure-finance-btn {height: 180px; font-size: 20px!important; text-align: left!important;}
.category {width: 47%;}
.map-hours .overlay .popup {width: 85%;}
div.fb-half.map-highlights div {width: 80%;margin: auto;}
}
@media only screen and (max-width: 850px) {
.popup-table iframe {width: 100% !important;}
.popup-table {flex-wrap: wrap;}
.map-hours .popup-table {gap: 40px;}
.career-overlay {height: 220px;}
.career-links h3 {font-size: 20px;}
.career-drop p {font-size: 16px !important; line-height: 25px !important;}
#trucks, #yellow-bus, #white-bus, #leasing, #recruitment {width: 48.5%;}
.overlaytext a {width: 48.5%;}
.hbc-hero-tabs a {width: 49%;}
#school-commercial h1, #school-commercial h2 {font-size: 25px; line-height: 30px;}
#school-commercial {width: 95%;}
#school-commercial p {font-size: 16px;}
#school-commercial button {font-size: 14px;}
.card-small-image {height: 180px;}
.last-left{width: 100%;}
#last-bit{display: block;}
.click-here{border-radius: 0px;width: 100%;padding:25px 0;}
.ggg{margin: 20px auto;}
.large-button {font-size: 25px;}
#filterSale .container {display: block;}
#filterSale ul li {font-size: 30px;}
#filterSale .flex-half {display: flex; flex-wrap: wrap; width: 100%;}
#filterSale .flex-half img {padding-left: 20px;}
#filterSale .flex-third {width: 50%; justify-self: center;}
#freonSale #mobile.freonContainerMobile {display: block;}
#freonSale #desktop.freonContainer {display: none;}
.brake-drum-banner-wrap {justify-content: space-between; gap: 0px;}
.brake-drum-content-wrap {flex-wrap: wrap;}
.brake-drum-content-wrap > div:first-child {width: 100%;}
.brake-drum-content-wrap > div:last-child {width: 100%;}
.brake-drum-footer-wrap {flex-wrap: wrap;}
.brake-drum-footer-wrap > div {width: 100% !important;}
.brake-drum-footer-wrap > div > a {width: 500px !important; margin: 0 auto; display: block;}
}
@media only screen and (max-width: 800px) {
video {height: auto !important;}
.player {width: auto; height: auto;}
.overlaytext li span {width: 90%; margin: 0 auto; display: block;}
.inv-callto {flex-wrap: wrap;}
.inv-callto a {width: 49%;}
.footer-logos {width: 100%; margin-top: 50px;}
.build-overlay {height: 180px;}
.location-flex iframe {width: 100% !important;}
#showroom hr {width: 100% !important;}
.location-box {width: 100% !important;}
.parts-img-links img {width: 100%;}
.popup-table li {line-height: 18px; font-size: 10px;}
.shop-flex > div:last-child {width: 100%;}
.drop-hide {display: none;}
#map-locations {width: 100%;}
.mobile-drop {display: contents;}
.career-drop {width: 100%;}
.panel {margin: 8px 0;}
section#request-specials .build-international a {width: 100% !important;}
.overlaytext li {font-size: 16px;}
#welcome-to {width: 85%; margin-top: 80px; margin-bottom: 80px;}
.image-container img { padding-right: 0px;}
.category-dark {width: 98%;}
.service-card-fb {grid-template-columns: 1fr;}
#filterSale .s13-header-link h1 {font-size: 22.5px; line-height: 35px;}
#fifthWheel .s13-header-link h1 {font-size: 22.5px; line-height: 35px;}
#partSpecial .s13-header-link h1 {font-size: 22.5px; line-height: 35px;}
#coolingSolutions .s13-header-link h1 {font-size: 22.5px; line-height: 35px;}
#schoolBusParts .s13-header-link h1 {font-size: 22.5px; line-height: 35px;}
.van-bus-contact-content {display: flex; flex-direction: column;}
.brand-bar {display: grid; grid-template-columns: repeat(3, 1fr);}
.brand-bar .accordion img {width: 93px;}
.weekly-agenda{grid-template-columns: auto;}
#lodging .flex-container{display: block;}
#lodging .flex-half{width: 100%;}
#lodging .indent{padding-left: unset; padding-top: 40px;}
}
@media only screen and (max-width: 770px) {
.parts-call-button {width: calc(75% + 21px);}
#preSeasonSale .price-display{ width: fit-content; justify-content: center; padding: 5px 30px;}
#preSeasonSale .dollar-amount{font-size: 8vw;}
#preSeasonSale .cent-amount{font-size: 6vw;}
#preSeasonSale .clutch-item-box{display: block;}
#preSeasonSale .clutch-item{width: 100%;}
#preSeasonSale .clutch-item img{width: 50%;}
#preSeasonSale .top-row{grid-template-columns: 1fr;}
.image-center{text-align: center;}
.half-bottom{height: unset;}
#ezSale .brushbox{grid-template-columns: 2fr}
}
@media only screen and (max-width: 768px) {
.walkaround-title {font-size: 1.8rem; margin-bottom: 30px;}
.walkaround-grid {grid-template-columns: 1fr; gap: 30px;}
.walkaround-button {font-size: 1.1rem; padding: 15px 30px;}
.section-header h2 {font-size: 1.8rem;}
.carousel-container {padding: 0 50px;}
.carousel-arrow {width: 35px; height: 35px; font-size: 1.2rem;}
.video-card {min-width: calc(100vw - 120px); max-width: calc(100vw - 120px);}
.video-wrapper { width: 100%; height: auto; aspect-ratio: 16/9;}
.carousel-track {gap: 20px;}
.video-info {padding: 15px 10px;}
.video-title {font-size: 1.1rem;}
.video-description {font-size: 0.9rem;}
.swiper-container {max-width: 100%;padding: 0 5px;}
.custom-next-btn {right: 10px !important;}
.custom-prev-btn {left: 10px !important;}
.custom-nav-btn {width: 40px !important;height: 40px !important;}
.custom-nav-btn::after {font-size: 22px !important;}
.s13-banner-bkgrd-btm {bottom: -50px;}
.contact-banner {flex-direction: column;text-align: center;padding: 30px 20px;}
.contact-content h2 {font-size: 24px;}
.contact-content p {font-size: 13px;}
.cta-button {font-size: 24px;padding: 15px 40px;}
.brochure-card-wrapper {min-width: calc(100% - 20px);}
.brochures-section h2 {font-size: 30px;}
}
@media only screen and (max-width: 750px) {
.career-overlay {height: 200px;}
.career-links h3 {font-size: 18px;}
.brochure-banner img {width: 100%; margin: 0;}
.bodyshop-container{flex-direction: column;}
.cta-button {border-radius: 40px;}
h2.bodyshop {width: 100%;}
.bodyshop-services{width: 95%; margin: 10px;}
.bodyshop-sidemap{width: 100%;}
.bodyshop-flexhalf{width: 100%; margin: 0;}
.bodyshop-flexhalf img{width: 30%;}
.bsshoptabs{margin-bottom: 25px; font-size: 15px;}
.sidemap-location{margin: 15px;}
.side-right .overflow-img{position: unset; justify-self: center; margin-top: 25px; width: 100%;}
.side-left ul{justify-self: center;}
.s13-main ul li{padding-top: 12px;}
.side-right img{justify-self: center; width: 40%;}
#university .flex-container {display: block;}
#university .flex-half{width: 100%;}
#university .indent{padding-left: unset; padding-top: 20px;}
#university .indent h2{margin-bottom: 10px;}
}
@media only screen and (max-width: 700px) {
.build-overlay {height: 160px;}
.build-international a:hover i {font-size: 60px;}
.consign-form form {width: 97%;}
.overlaytext {margin-top: 30px;}
.inv-callto {gap: 5px;}
.heading, .flex.drop .one-third h2 {font-size: 24px;}
.sm-heading {font-size: 20px;}
#coolingSolutions .container{display: block;}
#coolingSolutions .flex-third {width: 70%; justify-self: center; padding-bottom: 10px;}
#schoolBusParts .container{display: block;}
#schoolBusParts .flex-third {width: 70%; justify-self: center; padding-bottom: 10px;}
.banner-price-flex > p {font-size: 80px; line-height: 80px;}
.banner-price-flex > div p {font-size: 40px; line-height: 30px;}
.banner-price-flex > div p span {font-size: 30px; line-height: 30px;}
.banner-price > p {font-size: 22px; line-height: 32px;}
.banner-or {font-size: 30px; line-height: 30px;}
}
@media only screen and (max-width: 680px) {
.popup-table li {font-size: 8px;}
.image img {
width: 100%;
max-width: unset;
display: flex;
margin-top: 100px;
margin:0 auto;}
.yellow-background-lodging { background: #eeb21d !important;
padding: 21px 41px;
position: absolute;
width: 100% !important;
margin: unset !important;
border-radius: 0;}
}
@media screen and (max-width: 670px) {
div.fb-half.map-highlights div {width: 100%;flex-direction: column;align-items: left;gap: 20px;}
div.fb-half.map-highlights div ul {margin-left: 50px;}
.map-footer {flex-direction: column;}
.map-footer div:last-child {width: 100%;text-align: left;}
}
@media only screen and (max-width: 650px) {
.career-overlay {height: 180px;}
.career-links h3 {font-size: 16px;}
.overlaytext ul {flex-wrap: wrap;}
.overlaytext {margin-top: 20px;}
.overlaytext ul {margin-top: 30px;}
h2.service-banner-text strong{font-size: 24px;}
h2.service-banner-text {font-size: 18px;}
.cta-sticky-right {display: none;}
#coolingSolutions .flex-third {width: 50%; justify-self: center;}
.banner-price-flex > p {font-size: 70px; line-height: 70px;}
.banner-price-flex > div p {font-size: 30px; line-height: 25px;}
.banner-price-flex > div p span {font-size: 25px; line-height: 25px;}
.banner-price > p {font-size: 20px; line-height: 30px;}
.banner-or {font-size: 25px; line-height: 25px;}
.brake-drum-content-wrap h1 {font-size: 40px; line-height: 50px;}
.brake-drum-full{display: block; justify-items: center;}
}
@media only screen and (max-width: 600px) {
#showroom h1, .consign-form h1 {font-size: 30px; line-height: 35px;}
#showroom p, .consign-form p {font-size: 16px; line-height: 25px;}
.consign-form h2, .finance h2 {font-size: 22px;}
.quick-links button, #showroom button, .consign-form form .submitselect, .consign-form form .submit {font-size: 13px;}
.build-international a {width: 49.5%;}
.build-overlay {height: 200px;}
.build-international h2 {font-size: 18px;}
.consign-form form tr {gap: 10px; margin-bottom: 10px; flex-wrap: wrap;}
.consign-form form select {width: 100%;}
.consign-form form {width: 100%;}
.consign-form form input, .consign-form form textarea {width: 100% !important;}
.electric h2 {font-size: 18px;}
.service-box {width: 100%;}
.service-box h3 {font-size: 20px;}
.service-box div {width: 90%;}
.banner-overlay h2 {font-size: 22px; line-height: 26px; margin-bottom: 5px;}
.banner-overlay p {font-size: 14px;}
.popup-header h3 {font-size: 18px;}
#service-banner h3 {font-size: 20px;}
.consign-form form .anonymous input {width: 25px !important;}
.anonymous label {font-size: 14px;}
.shop-hours li {font-size: 16px; line-height: 28px;}
.online-brochures h2 {font-size: 14px !important;}
.map-hours .popup h2 {font-size: 20px !important; margin-bottom: 0px !important;}
.career-links {flex-wrap: wrap; width: 95%; margin: 0 auto; margin-top: 30px;}
.career-overlay {height: 280px;}
.career-links h3 {font-size: 20px;}
.career-drop p {font-size: 14px !important; line-height: 23px !important;}
#career-flex button {font-size: 14px !important;}
.customers-first h1 {font-size: 18px;}
.customers-first p {font-size: 15px; line-height: 25px;}
#welcome-to {width: 95%; margin-top: 60px; margin-bottom: 60px;}
.locations > div:first-child, .locations > div:nth-child(2) {display: none;}
.locations {position: inherit; margin-top: 30px; margin-bottom: 30px;}
.locations p {font-size: 14px;}
.locations li a {font-size: 12px;}
.locations > div {width: 173px;}
.full-locations a p {font-size: 16px; line-height: 21px;}
.quick-links p {font-size: 14px; margin-bottom: 5px;}
.quick-links ul li a {font-size: 12px; line-height: 27px;}
.quick-links button {font-size: 12px; margin-top: 20px;}
.showroom-trucks {margin: 50px 0;}
.accordion {font-size: 17px; padding: 15px 25px;}
.nav-overlay {height: 340px;}
.overlaytext a {width: 100%;}
#school-commercial {flex-wrap: wrap;}
p.specifications {column-count: 1;}
.form-flex {flex-wrap: wrap; gap: 20px; padding: 5px 0;}
.category {width: 98%;}
.flex-brochure2 {display: block;}
.category-wide-left {width: 94%; margin: 10px 2% 10px 4%;}
.category-wide-right {width: 94%; margin: 10px 2% 10px 4%;}
.brochure-finance-right h2 {font-size: 24px; line-height:40px;}
.brochure-finance {flex-wrap: wrap;}
.map-hours .overlay .popup {width: 90%;}
#coolingSolutions .flex-third {width: 100%; padding-bottom: 10px;}
#filterSale .flex-third {width: 100%; padding-bottom: 10px;}
.hbc-contact-title {font-size: 28px;}
.hbc-salespeople-container {grid-template-columns: 1fr;grid-template-rows: auto;}
.hbc-salesperson:nth-child(1),
.hbc-salesperson:nth-child(2),
.hbc-salesperson:nth-child(3) {grid-column: 1;grid-row: auto;}
.hbc-salesperson-image {width: 120px;height: 120px;}
.custom-next-btn {right: -5px !important;top: 30%!important;}
.custom-prev-btn {left: -5px !important;top: 30%!important;}
.custom-nav-btn {width: 35px !important;height: 35px !important;}
.custom-nav-btn::after {font-size: 18px !important;}
.s13-header-link h1 {text-align: center; font-size: 20px; line-height: 30px;}
.s13-banner-bkgrd-btm {bottom: -40px;}
}
@media only screen and (max-width: 580px) {
.s13-links-flex a {width: 48.5%;}
}
@media only screen and (max-width: 550px) {
.build-international a {width: 49.2%;}
.consign-form form input, .consign-form form textarea {width: 96.5%;}
.popup-table {flex-wrap: wrap; gap: 10px;}
.inv-callto a {width: 48%;}
.nav-overlay {height: 300px;}
.nav-overlay > div h2 {font-size: 22px; line-height: 22px;}
.hbc-hero-tabs a {width: 48%;}
.items{grid-template-columns: auto;}
#april p.bullets{margin: 5px 0 0 20px; font-size: 4vw;}
#april .dollar-amount{font-size: 10vw;}
#april .cents-amount{font-size: 6vw;}
.banner-price-flex > p {font-size: 60px; line-height: 60px;}
.banner-price-flex > div p {font-size: 25px; line-height: 22px;}
.banner-price-flex > div p span {font-size: 22px; line-height: 22px;}
.banner-price > p {font-size: 18px; line-height: 28px;}
.banner-or {font-size: 22px; line-height: 22px;}
.brake-drum-footer-wrap > div > a {width: 100% !important;}
.brake-drum-footer-wrap {gap: 10px;}
}
@media (max-width: 505px){
#request-specials h2{font-size: 30px;}
}
@media only screen and (max-width: 500px) {
.build-overlay {height: 180px;}
.bus-img {width: 100%;}
.bus-img img {width: 50%;}
#service-banner h3 {font-size: 18px;}
.overlaytext ul {margin-top: 20px;}
.nci-small img {width: 80% !important;}
.nci-small a {text-align: right;}
.hbc-large img {width: 90% !important;}
span.large-text.lodging {font-size: 19px;}
i.fa-solid.fa-location-dot {font-size:31px;}
.common-services > .fb-half {flex-direction: column;}
.common-services > .fb-half ul {width: 90%;}
.s13-banner-bkgrd-btm {bottom: -30px;}
.s13-full-dealership {margin-top: 80px;}
.s13-links-flex a {width: 100%;}
.badge-fb {flex-direction: column;}
.partsthirds-section{display: block; justify-items: center;}
.partshalf-section{display: block; justify-items: center;}
}
@media only screen and (max-width: 491px) {
.brand-bar .accordion img {width: 75px;}
.button-row {display: grid; grid-template-columns: 1fr 1fr; text-align: center;}
.panel {max-height: 900px;}
.right-brand-content {display: flex; flex-direction: column; align-items: flex-start;}
.brand-list {width: 100%;}
.img-btn {width: 98%;}
}
@media only screen and (max-width: 480px) {
.banner-price-flex > p {font-size: 50px; line-height: 50px;}
.banner-price-flex > div p {font-size: 22px; line-height: 20px;}
.banner-price-flex > div p span {font-size: 20px; line-height: 20px;}
.banner-price > p {font-size: 16px; line-height: 26px;}
.banner-or {font-size: 20px; line-height: 20px;}
.brake-drum-content-wrap h1 {font-size: 35px; line-height: 45px;}
.brake-drum-content-wrap p, .brake-drum-content-wrap ul li {font-size: 17px;}
.brake-drum-content-wrap p span {font-size: 18px;}
}
@media only screen and (max-width: 450px) {
.build-international a {width: 100%;}
.build-overlay {height: 280px;}
.build-international {gap: 10px;}
.build-international a:hover i {font-size: 100px;}
.consign-form form input, .consign-form form textarea {width: 96%;}
.parts-img-links {gap: 5px;}
.border-frame {border: none;}
.frame-width {width: 100%; padding: 0px; margin: 0 auto;}
#showroom .location-border p {font-size: 16px; line-height: 26px;}
.location-border h2 {font-size: 18px !important;}
.map-hours .popup h2 {font-size: 18px !important;}
.map-hours .popup-table li {font-size: 14px; line-height: 22px;}
.map-hours .popup-table p {font-size: 14px !important; line-height: 28px !important;}
.career-links {width: 100%;}
.career-overlay {height: 260px;}
.map-hours #Mankato .overlay .popup {top: 480vh;}
.map-hours #mtown .overlay .popup {top: 600vh;}
.map-hours #Sioux .overlay .popup {top: 960vh;}
.map-hours #Ulm .overlay .popup {top: 750vh;}
.map-hours #Cloud .overlay .popup {top: 1060vh;}
.map-hours #Sanborn .overlay .popup {top: 910vh;}
.map-hours #Spencer .overlay .popup {top: 1000vh;}
.map-hours #Marshall .overlay .popup {top: 530vh;}
.map-hours #Rapid .overlay .popup {top: 800vh;}
.map-hours #Alexandria .overlay .popup {top: 70vh;}
.map-hours #Albert .overlay .popup {top: 50vh}
.map-hours #Rochester .overlay .popup {top: 860vh;}
.map-hours #Mason .overlay .popup {top: 1380vh;}
.map-hours #Glencoe .overlay .popup {top: 420vh;}
.map-hours #Corcoran .overlay .popup {top: 220vh;}
.map-hours #Willmar .overlay .popup {top: 1100vh}
.map-hours #Fargo .overlay .popup {top: 800vh;}
.map-hours #Bismarck .overlay .popup {top: 120vh;}
.map-hours #Bloomington .overlay .popup {top: 375vh;}
.map-hours #Dickinson .overlay .popup {top: 275vh;}
.map-hours #East-Grand .overlay .popup {top: 325vh;}
.map-hours #Monticello .overlay .popup {top: 700vh;}
#trucks, #yellow-bus, #white-bus, #leasing, #recruitment {width: 100%;}
.hbc-hero-tabs a {width: 100%;}
.image-container img {max-height: 175px;}
.parts-call-button {font-size: 15px;}
#filterSale ul li {font-size: 25px;}
#filterSale .flex-half.left ul {padding: 50px 0 20px 20px;}
}
@media only screen and (max-width: 429px) {
.brand-bar {display: grid; grid-template-columns: repeat(2, 1fr);}
.do h2 {font-size: 36px!important;}
.finance-hero h3 {font-size: 36px!important;}
.van-bus-contact-title {font-size: 38px!important;}
.panels .panel-width {padding-left: 20px;}
.button-row {display: grid; grid-template-columns: 1fr; text-align: center;}
}
@media only screen and (max-width: 400px) {
.footer-logos img {width: 100% !important;}
.build-overlay {height: 260px;}
.consign-form form input, .consign-form form textarea {width: 95.5%;}
#service-banner h3 {font-size: 16px;}
.career-overlay {height: 240px;}
.overlaytext li {padding: 12px 20px;}
.prices-orange-bkgd-quin{width: unset;}
.prices-orange-bkgd-quad{width: unset;}
.prices-orange-bkgd-tpl{width: unset;}
.prices-yellow-bkgd-quad{width: unset;}
.prices-yellow-bkgd-tpl{width: unset;}
.s13-banner-bkgrd-btm {bottom: -20px;}
.s13-full-dealership {margin-top: 50px;}
.s13-integrated h2 {font-size: 35px; line-height: 45px;}
.s13-integrated p {font-size: 16px; line-height: 26px;}
.s13-links-flex h3 {font-size: 18px; line-height: 28px;}
.brake-drum-banner-wrap {flex-wrap: wrap; justify-content: center; gap: 20px;}
.brake-drum-banner-wrap > div {width: 100%;}
.banner-price-flex {justify-content: center;}
.banner-or {text-align: center;}
.banner-price-flex > p {font-size: 60px; line-height: 60px;}
.banner-price-flex > div p {font-size: 25px; line-height: 22px;}
.banner-price-flex > div p span {font-size: 22px; line-height: 22px;}
.banner-price > p {font-size: 18px; line-height: 28px;}
.banner-or {font-size: 22px; line-height: 22px;}
.brake-drum-content-wrap h1 {font-size: 30px; line-height: 40px;}
}
@media only screen and (max-width: 380px) {
.locations > div {width: 165px;}
.full-locations a p {font-size: 15px; line-height: 21px;}
.quick-links p {font-size: 13px; margin-bottom: 5px;}
.quick-links ul li a {font-size: 11px; line-height: 27px;}
.quick-links button {font-size: 11px; margin-top: 20px;}
}
@media only screen and (max-width: 350px) {
.overlaytext li {font-size: 15px;}
#welcome-to h3, #showroom h1, .consign-form h1 {font-size: 25px; line-height: 30px;}
#welcome-to p, #showroom p, .consign-form p {font-size: 14px; line-height: 24px;}
#welcome-to button, #showroom button, .consign-form form .submitselect, .consign-form form .submit {font-size: 12px; width: 100%;}
.consign-form h2, .finance h2 {font-size: 20px;}
.quick-links button {width: 100%;}
.quick-links > div:first-child {width: 100%;}
.quick-links > div > div {gap: 10px; justify-content: space-between;}
#footer img {width: 140px;}
.footer-logos {gap: 20px;}
.quick-links button {font-size: 12px;}
.build-overlay {height: 240px;}
.build-international h2 {font-size: 16px;}
.build-international a:hover i {font-size: 80px;}
.consign-form form input, .consign-form form textarea {width: 95%;}
.electric h2 {font-size: 14px;}
.service-box h3 {font-size: 18px;}
.parts-img-links {flex-wrap: wrap; justify-content: center; width: 100%;}
.banner-overlay h2 {font-size: 20px; line-height: 24px;}
.banner-overlay p {font-size: 12px;}
.machinery-button a {width: 100%;}
.popup-header h3 {font-size: 16px;}
.shop-hours li {font-size: 16px; line-height: 26px;}
#showroom .location-border p {font-size: 14px; line-height: 24px;}
.location-border h2 {font-size: 16px !important;}
.location-hours {gap: 5px; justify-content: space-between;}
.career-overlay {height: 220px;}
.career-links h3 {font-size: 18px;}
.inv-callto a {width: 100%;}
.accordion {font-size: 14px; padding: 15px 15px;}
#school-commercial h1, #school-commercial h2 {font-size: 22px; line-height: 27px;}
#school-commercial p {font-size: 15px;}
#filterSale .flex-third {width: 100%;}
}
@media only screen and (max-width: 300px) {
.build-overlay {height: 200px;}
.consign-form form input, .consign-form form textarea {width: 94%;}
#service-banner h3 {font-size: 14px;}
.career-overlay {heoght: 200px;} }
@media only screen and (max-width: 280px) {
.build-overlay {height: 180px;}
.build-international a:hover i {font-size: 60px;} }