/***** 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 --------*/
:root {
--yellow: #FBCD11 !important;
--darkgrey: #202020 !important;
--grey: #232323 !important;
--offwhite: #F5F5F5 !important;
--light: #D8D8D8 !important;
--black: #000000 !important;
--white: #ffffff !important;
--header: nexa, sans-serif !important;
--body: open-sans, sans-serif !important;
--stencil: nexa-rust-sans-black-2, sans-serif !important;
}
html{scroll-behavior: smooth;}
h1,h2,h3,h4,h5,h6{font-family: var(--header);}
body {font-family: var(--body);overflow-x: hidden;}
p {font-family: var(--body);font-size: 16px;line-height: 1.5;}
a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}
hr{border: none;height: 1px;background: #000;opacity: .1;margin: 15px 0;}
/*--- HEADER STYLES ---------------------*/
header {background-color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);z-index: 10;position: relative;padding-top: 40px;}
.top-bar {padding: 5px 0;}
.flex-icons {gap: 5px;}
.flex-icons a {height: 40px;width: 40px;display: inline-flex;align-items: center;justify-content: center;background: var(--yellow);color: var(--black) !important;font-size: 20px !important;border-radius: 5px;}
.main-head {padding: 10px 0;}
.logo img {max-width:200px;width:100%;}
.phone-head {padding-bottom: 10px;}
.phone-head a[href^="tel:"]:before {content: "\f095";font-family: FontAwesome;display: inline-block;margin-right: 5px;color: var(--yellow);}
.phone-head a{font-size: 18px;font-weight: 900 !important;color:#000;font-family:var(--stencil);}
.nav-wrap .flex-container {align-items: center;gap: 30px;}
.nav-wrap .yellow-btn {max-width: 140px !important;line-height: 1.5;width:100% !important;box-sizing: border-box;padding: 10px 15px !important;}
.nav-wrap.grey-bg {background-image: url(/siteart/warning-bg-2.svg);background-repeat: repeat;background-size: contain;background-position: center center;background-color:#111;}
.nav-wrap .yellow-btn:hover {background:#333 !important}
.top-bar.wid90.center a{color:#000}
.top-bar.wid90.center h3 {
/* text-transform: uppercase; */
font-size: 15px;
font-weight: 500 !important;
letter-spacing: .25px;
line-height: 2;
}
.yellow-bg{background-color:var(--yellow);}
.top-bar.wid90.center i {
transform: rotate(230deg);
}
.yellow-bg.fixed-banner {
position: fixed;
top: 0;
left: 0;box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
right: 0;
z-index: 90;
}
/*---Search Bar---*/
.search-head {min-width: 500px;}
.search-head form,.search-box form { width: 100%;display: flex;background: #fff;padding: 8px;border: 1px solid #CFCFCF;box-sizing: border-box;border-radius: 10px;}
.search-head input,.search-box input {background:none;border:0px!important;outline:none!important;padding:0px;margin:0;font-family: var(--body) !important;width:100%;font-size: 15px;line-height: 2;padding-inline-start: 5px;}
.search-head button,.search-box button {background:none;border:0px!important;outline:none!important;padding:0px;margin:0; font-size: 20px;cursor: pointer;color:var(--darkyellow)}
/*---HERO--*/
.flex-hero {width: 100%;}
.flex-item {position: relative; flex-grow: 1;background-color: var(--black);transition: flex-grow 0.5s ease-in-out;color:var(--white);background-repeat: no-repeat;background-size: cover;min-height: 500px;cursor: pointer;}
.flex-item:hover {flex-grow: 2;background-color: #000;}
#manuals{background-image:url("/siteart/man-reading-manuals.webp");background-position: center center;}
#parts{background-image:url("/siteart/parts-bg.webp");background-position: center center;}
#winches{background-image:url("/siteart/winch-bg.webp");background-position: center center;}
#kits{background-image:url("/siteart/rebuild-kits.webp");background-position: center center;}
.triangle-down {display: inline-block;position: absolute;top: 0;transform: rotate(180deg);left: 0;right: 0;bottom: 65%;clip-path: polygon(50% 0%, 0 100%, 100% 100%);background: rgb(251 205 17 / 50%);}
.hero-title {position: absolute;top: 0;left: 0;right: 0;bottom: 0;padding: 10px;height: 100%;width: 100%;box-sizing: border-box;display: inline-flex;align-items: flex-end;justify-content: center;background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 15%, rgba(0, 0, 0, .85) 100%);color:var(--white)}
.hero-title h2 {text-align: center;font-family: var(--stencil);font-weight: 900;font-size: 26px;width: 100%;padding-bottom:55px;transition:.5s all;}
.hero-title h2 span {display: block;font-size: 18px;}
.hero-section .flex-container {gap:5%;align-items: flex-start}
.hero-section .main-txt {flex: 2;}
.sub-txt {flex: 1;}
.hero-section h1 {font-size: 42px;line-height: 1.15;}
.grid-services {grid-template-columns: repeat(4, 1fr);gap: 30px;}
.service-box { background: var(--offwhite); padding: 30px; box-sizing: border-box; border: 1px solid var(--light);border-radius: 10px;color:var(--black)}
.service-box a {color:var(--black); display: inline-block;}
.service-box i {height: 45px;width: 45px;display: inline-flex;align-items: center;justify-content: center;color: var(--yellow);background: var(--black) !important;font-size: 22px !important;border-radius: 5px;margin-bottom: 15px;}
.service-box h3 {text-transform: uppercase;font-weight: 900;font-size: 18px;font-family:var(--stencil)}
.flex-home {gap: 5%;}
.flex-home h2 {font-size: 28px;margin-bottom: 15px;}
.row-img {display: flex;flex-direction: column;gap: 8px;flex:1}
.home-img {gap:8px;flex:1;height: 100%;}
.row-img .page-img {flex: 1;}
.home-img .page-img {border-radius: 5px;}
.home-txt {display: inline-flex;align-items: center;}
/*---BODY--------------------------------*/
.sub-pg h1 {font-size: 42px;font-weight: 900;}
.grey-quarter {background: linear-gradient(to left, #101010 25%, #fff 25%), url("/siteart/pinstriped-suit.png");background-blend-mode: screen;background-size: auto;background-repeat: repeat;}
#yellow-txt {color:var(--yellow)}
.black-bg {background-color:var(--black)}
.dark-bg {background-color:var(--grey)}
.grey-bg {background-color:var(--offwhite)}
.white-txt {color:var(--offwhite)}
.wid90 {width:90%;margin:0 auto;}
.flex-container {display: flex;}
.grid-container {display: grid;}
.page-wid{max-width: 1400px;}
.center {text-align: center;}
.pad-xl{padding-top:80px;padding-bottom:80px;}
.pad-xl-top{padding-top:80px;}
.pad-l-top{padding-top:40px;}
.pad-l-bottom{padding-bottom:40px;}
.pad-xl-bottom{padding-bottom:80px;}
.pad-l{padding-top:40px;padding-bottom:40px;}
.relative {position: relative;}
.base-align {align-items: baseline;}
.align-center {align-items:center !important;}
.just-center{justify-content: center;}
.space-between{justify-content: space-between;}
.just-between{justify-content: space-between;}
.just-end{justify-content: flex-end;}
.align-right {text-align: right !important;}
.align-left {text-align: left !important;}
.block,#block {display: block !important;}
.half-page {flex-basis: 50%;}
.quarter-pg {flex-basis: 25%;}
.third-pg {flex-basis: 33%;}
.full-pg {flex: 1;}
.page-img {overflow: hidden;}
.page-img img {height: 100%;width:100%;object-fit: cover;}
.yellow-overlay {background-color: var(--yellow);overflow: hidden;}
.yellow-overlay img {opacity: 0.65;filter: blur(2px);}
.page-content a {color:#111;}
.page-content a:hover {color:#333}
/*--Brand Swiper--*/
.brandSwiper .swiper-slide {text-align: center !important;}
.brandSwiper img {max-width: 190px !important;width: 100%;}
/*--Manuals Table--*/
.page-content table {border-collapse: collapse;width: 100%;}
.page-content th, .page-content td {border: 1px solid #B8B8B8;padding: 10px;text-align: left;}
.page-content th {background-color: #f2f2f2;text-transform: uppercase;font-weight: 900;font-family: var(--header);letter-spacing: 1px;font-size: 15px;}
.page-content td a {color:#333;transition:.3s all;}
.page-content td a:hover {color:#4F4F4F;text-decoration: underline;opacity:.85;}
.page-content td {font-size: 15px;}
.manual-pg td a:after {content:'\f56d';font-family: FontAwesome;display: inline-block;margin-left: 4px;color:#000;opacity:.5;font-size: 14px;}
.info-box {width: 100%;vertical-align: top;display: inline-block;text-align: left;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);padding: 20px;background-color: #fff;border-radius: 8px;margin: auto;box-sizing: border-box;}
/*---ACCORDION---*/
.accordion-container,
.subaccordion-container{margin: 15px 0;}
.accordion,.subaccordion{display: block; position: relative; margin-bottom: 10px; color: #666; border-radius: 5px; transition: all .2s ease-in-out;}
.accordion:hover{}
.accordion .accordion-header,
.subaccordion .subaccordion-header{display: flex; align-items: center; font-weight: 700; border-radius: 5px; cursor: pointer;margin-bottom: 10px;}
.accordion .accordion-header:after,.subaccordion .subaccordion-header:after{font-family: "Font Awesome 5 Free"; font-size: 18px; font-weight: 900; content: "\f107"; margin-left: 20px; color: #ddd;}
.accordion .accordion-header h3,.accordion .accordion-header h2 {line-height: 2;font-size: 18px;}
.subaccordion .subaccordion-header h4 {line-height: 2;font-size: 16px;}
.accordion .accordion-content,.subaccordion .subaccordion-content {display: none;padding: 20px;border-left: 2px dotted #e8e8e8 !important;}
.accordion .accordion-content p,.subaccordion .subaccordion-content p {color:#000;}
.accordion .accordion-content ul li a, .subaccordion .subaccordion-content ul li a {line-height: 2;font-weight: 600;font-size: 15px;display: inline-block !important;padding: 5px 10px;box-sizing: border-box;transition:.3s all;width: 100%;}
.accordion.active {color: #000;}
.accordion .accordion-content ul li a:hover, .subaccordion .subaccordion-content ul li a:hover {opacity:.75}
.accordion.active{}
.accordion.active:hover{}
.accordion.active .accordion-header:after,.subaccordion.active .subaccordion-header:after{transform: rotate(90deg); color: #999;}
.accordion.active h2,.subaccordion.active h4 {color: #111;}
.manual-pg ul li a:after {content:'\f56d';font-family: FontAwesome;display: inline-block;margin-left: 5px;color:#000;opacity:.5;font-size: 14px;}
.faq .accordion-header {justify-content: space-between}
.terms-pg ul{list-style: disc;padding-inline-start: 30px;}
.manual-pg .accordion-content li:nth-of-type(odd) {
background: #f3f3f3;
}
/*---contact page---*/
.contact-pg .flex-container,.manual-pg .flex-container {gap:5%;}
.contact-box {display:block;margin-bottom: 30px;}
.contact-form {width: 100%;vertical-align: top;display: inline-block;text-align: left;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);padding: 20px;background-color: #fff;border-radius: 8px;margin: auto;box-sizing: border-box;}
.contact-box a {font-weight: 900;color: #2a3439;margin-top: 5px;display: inline-block;transition:.3s all;}
.contact-box a:hover {color: #5B5B5B;}
.contact-box h2 {font-size: 20px;letter-spacing: 1px;}
.contact-box i.fa-brands {font-size: 24px;}
.include-captcha {display: none;}
.yellow-button {padding: 20px;display: inline-flex;align-items: center;border-radius: 15px;margin-top: 10px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);text-transform: uppercase;font-weight: 900 !important;background: var(--yellow);width: 100%;justify-content: space-between;box-sizing: border-box;transition:.3s all}
.yellow-button:hover {background:var(--black) !important;color:var(--white) !important}
.yellow-button h3 {font-weight: 900;font-size: 18px !important;}
.quote-btn:after {font-family: "Font Awesome 5 Free"; font-size: 20px; font-weight: 900; content: "\f178"; margin-left: 20px;}
/*---BREADCRUMBS---*/
nav[aria-label="breadcrumb"] ul {font-size: 15px;display: flex;list-style: none;padding: 0;margin: 0;width: 100%;padding: 10px 0;}
nav[aria-label="breadcrumb"] li {padding: 0;}
nav[aria-label="breadcrumb"] a{padding: 8px 0;border-radius: 90px;font-size: 15px;color: var(--darkgrey);font-weight: 800;transition: .3s all;opacity: .85;text-decoration: none;box-sizing: border-box;display: inline-block;}
nav[aria-label="breadcrumb"] a:hover {color:var(--yellow)}
nav[aria-label="breadcrumb"] li+li:before {content: "|";padding: 8px 10px;opacity:.75;}
nav[aria-label="breadcrumb"] span {padding: 8px 0;font-size: 15px;font-weight: 500;text-decoration: none;box-sizing: border-box;display: inline-block;}
/*--------BUTTONS STYLES--------------------*/
.yellow-btn {padding: 15px;font-size: 15px;line-height: 1;cursor: pointer;transition: .4s all;font-weight: 500;text-transform: uppercase;font-family: var(--header);color:var(--black);background:var(--yellow);font-weight: 600;border-radius: 8px;border: 1px solid var(--yellow);display: inline-block;text-align: center}
.yellow-btn:hover {background:var(--darkgrey);border-color:var(--darkgrey);color:var(--white)}
button.continue-btn {background: none;border: none;}
.continue-btn span {padding: 15px 20px;font-size: 16px;line-height: 1;cursor: pointer;transition: .4s all;font-weight: 500;font-family: var(--header);color:var(--yellow);background:var(--black);font-weight: 600;border-radius: 8px;border: 1px solid var(--black);display: inline-block;text-align: center}
.continue-btn span i {transform: rotate(-45deg);}
.contact-form .continue-btn span i {transform: rotate(45deg);}
.continue-btn:hover span {color:var(--yellow);background:var(--black);border-color:var(--black)}
.white-btn span {padding: 15px 20px;font-size: 16px;line-height: 1;cursor: pointer;transition: .4s all;font-weight: 500;font-family: var(--header);color:var(--black);background:var(--white);font-weight: 600;border-radius: 8px;border: 1px solid var(--white);display: inline-block;text-align: center}
.white-btn span i {transform: rotate(-45deg);color:var(--yellow)}
.black-btn span {padding: 15px 20px;font-size: 16px;line-height: 1;cursor: pointer;transition: .4s all;font-weight: 500;font-family: var(--header);color:var(--white);background:var(--black);font-weight: 600;border-radius: 8px;border: 1px solid var(--black);display: inline-block;text-align: center}
.black-btn span i {transform: rotate(-45deg);color:var(--yellow)}
.black-round {padding: 15px 20px;font-size: 16px;line-height: 1;cursor: pointer;transition: .4s all;font-weight: 500;font-family: var(--header);color:var(--white);background:var(--black);font-weight: 600;border-radius: 8px;border: 1px solid var(--black);display: inline-block;text-align: center}
form .black-round {width: 100%;}
.black-round:hover {background:var(--grey)}
#myBtn {font-family: graphie, sans-serif !important;color: inherit;border: none;font: inherit;cursor: pointer;outline: inherit;position: fixed;bottom: 16px;left: 16px;width: 48px;height: 48px;background: rgba(242, 242, 242, 0.8);transition: background 0.3s ease-out 100ms;border-radius: 48px;padding: 12px;display: none;}
#myBtn:hover {background-color: #555;}
.sub-hero {background-image:linear-gradient(90deg,rgba(251, 205, 17, .75) 0%, rgba(251, 205, 17, .75) 100%),url("/siteart/inv-bg.jpg");background-size: cover;background-position: center center; height: 10vh;min-height: 100px;overflow: hidden;background-color: var(--yellow);}
/*-------- FOOTER STYLES ----------------*/
footer{}
.foot-col {flex-basis: 25%;}
.foot-col li strong {font-size: 16px;margin-bottom: 10px;display: block;}
.foot-col li a {color:var(--offwhite);transition: .3s all;line-height: 2;font-size: 15px;}
.foot-col li a:hover {color:var(--white)}
.foot-col li a[href^="tel:"] {font-weight: 900;margin-bottom: 10px;display: block;font-size: 16px;}
footer h3 {text-transform: uppercase;font-size: 22px;font-family: var(--stencil);font-weight: 900;line-height: 1;}
footer .grey-bg {padding: 20px 0;}
footer a.yellow-btn {min-width: 190px;}
.search-box {gap: 10px;}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
#inv *:not(.fa):not(.far):not(.fas):not(.fab):not(.material-icons){font-family: var(--header) !important;} /* Reset font, ignore icons */
.listing-top-right a, .lower-detail-data-left button, .send-email-btn, .media-buttons a, .media-buttons button, .faceted-search, .listing-dealer-info a, .view-listing-details-link, .main-detail-data .contact-options a, .fin-calc-btn-mobile, .selected-facet, .page-nav, .apply-button, .back-button, .calculator-btn, .mobile-done-button,.list-content .list-error-container .info button:not(.login-button) {
-moz-border-radius:8px !important;
-o-border-radius:8px !important;
-webkit-border-radius:8px !important;
border-radius:8px !important;
}
.faceted-search-content .faceted-section-box .faceted-option-checkbox-container label input {margin: 2px 3px 3px 4px;}
.faceted-text-input-searchType .search-type input[type=checkbox], .faceted-text-input-searchType .search-type input[type=radio] {margin: 0px 3px 0px 6px;}
.bread-crumbs-heading .return-links .return-links-link span, #no-compare-listings, .bread-crumbs-heading .return-links .return-links-link i {color:var(--yellow) !important;}
.hosted-content .attachment-search .search-checkboxes label .row {margin-left:0 !important;margin-right:0 !important;margin-bottom:0px !important;}
.view-listing-details-link, .selected-facet, .view-listing-details-link, .buy-now-link, .check-availability-link, .email-seller-link, .offer-btn, .buy-btn, .dealer-phone-mobile, .offer-btn-mobile, .send-email-btn-mobile, .send-wholesale-email-btn-mobile, .fin-calc-btn-mobile, .mobile-breadcrumb, .main-detail-data .contact-options a, button.g-recaptcha.button, .page-nav, .apply-button, .mobile-done-button, .dealer-btns-bottom a,.list-content .list-error-container .info button:not(.login-button) {background:var(--yellow) !important;color:var(--black) !important;}
.selected-facet, .dealer-phone-mobile, .offer-btn, .offer-btn-mobile, .fin-calc-btn-mobile, .send-wholesale-email-btn-mobile, .send-email-btn-mobile, .buy-now-link, .view-listing-details-link, .main-detail-data .contact-options a, button.g-recaptcha.button, .page-nav, .apply-button, .mobile-done-button{border: solid 1px var(--yellow) !important; transition: ease all 0.2s !important;}
.selected-facet:hover, .dealer-phone-mobile:hover, .offer-btn:hover, .offer-btn-mobile:hover, .fin-calc-btn-mobile:hover, .send-wholesale-email-btn-mobile:hover, .send-email-btn-mobile:hover, .buy-now-link:hover, .view-listing-details-link:hover, .main-detail-data .contact-options a:hover, button.g-recaptcha.button:hover, .page-nav:hover, .apply-button:hover, .mobile-done-button:hover, .dealer-btns-bottom a:hover,.list-content .list-error-container .info button:not(.login-button):hover {color: #fff !important; background: var(--black) !important;border-color: var(--black) !important;}
.check-availability-link, .email-seller-link, .video-chat-link, .faceted-search, .faceted-show-all-btn, .cs-btns a, .calculator-btn {background: #000 !important; border: solid 1px #000 !important; transition: ease all 0.2s !important;}
.check-availability-link:hover, .email-seller-link:hover, .video-chat-link:hover, .faceted-search:hover, .faceted-show-all-btn:hover, .cs-btns a:hover, .calculator-btn:hover {background: #333 !important; border-color: #333 !important;color:#fff !important;}
.list-content .list-title .list-listings-count, .list-content .list-main-section .list-container .list-listing .listing-top .listing-top-left .listing-main-stats .price, #parts-content .parts-top-section .parts-title-and-breadcrumbs .parts-title .parts-listings-count, #inv .error-message, #inv .info, .detail-content .detail-main-body .main-detail-data .detail-price, .detail-content .search-results, .list-content .list-top-section .listing-option-bar .list-listings-count, .detail-price, .compare-price, .compare-title {color: #000 !important;}
.list-content .list-error-container .info .selected-facet {background: none !important;border: none !important;}
/* heading */
.list-content .list-title .list-title-text, .detail-content-mobile .detail-main-body .detail-mobile-top .detail-title, .main-detail-data .detail-title, .parts-title-text {
padding-left: 4px;
}
.detail-content .detail-additional-data .data-row .data-label, .detail-content-mobile .detail-additional-data .data-row .data-label, .part-detail-additional-data .data-label, .part-detail-content .detail-contact-bar {background: #000 !important;}
.detail-content-mobile .detail-contact-bar .contact-bar-btn, .list-page-nav, .contact-options a {background: #000 !important;}
.list-main-section .contact-options a {border: #000 solid 1px !important; transition: ease all 0.2s !important;}
.list-main-section .contact-options a:hover {background: #333 !important; border-color:#333 !important;color: #fff!important;}
.detail-content .dealer-info .phone-and-email .send-email-btn, .list-content .list-listing-mobile .dealer-phone-container a, .back-button {border-color: #000!important; color: #000!important;}
.material-icons, .collapsible-content a {color:#fff!important;}
#parts-content .parts-bottom-section .parts-list-view .parts-list-content .parts-listing-container .parts-listing-column .parts-button.view-details {background-color: #000!important;}
.detail-content-mobile .detail-main-body .main-detail-data .dealer-phone-mobile-container .dealer-phone-mobile{margin-right:0!important;}
.detail-content .detail-main-body .main-detail-data .details-fin-calc .detail-btn-calc{height: 48px !important; box-sizing: border-box;}
/*---------- RESPONSIVE STYLES ----------*/
.mobile-small{display: none;}
.mobile-border{display: none;background-image: url(/siteart/mobile-border.svg);background-repeat: repeat;background-size: contain;background-position: center center;}
@media only screen and (max-width:1350px) {
.flex-item {min-height: 400px;}
.flex-item h2 {font-size: 22px;}
.flex-item h2 span {font-size: 16px;}
}
@media only screen and (max-width: 1150px) {
.flex-home h2 {font-size: 28px;}
.home-txt div {padding: 20px 0;}
.service-box h3 {font-size: 16px;}
.hero-section h1 {font-size: 36px;}
.flex-item {min-height: 300px;}
.flex-item h2 {font-size: 18px;}
.flex-item h2 span {font-size: 15px;}
}
@media only screen and (max-width: 1050px) {
.main-txt,.sub-txt {flex-basis: 50% !important;}
.grid-services {grid-template-columns: repeat(2, 1fr);}
.flex-home {flex-wrap: wrap-reverse;gap: 30px;}
.flex-home .half-page {flex-basis: 100%;}
.home-txt div {padding: 0;}
footer .grey-bg .flex-container {flex-wrap:wrap;gap: 15px;}
footer .grey-bg .flex-container .half-page {flex-basis: 100%;}
.home-img {display: none;}
.search-box {flex-wrap: nowrap !important;gap: 10px !important;}
.hero-title h2 {padding-bottom: 50px;}
.manual-pg.grey-quarter {background:#fff;}
.manual-pg .third-pg .info-box {background: #232323;color: #F5F5F5;}
}
@media only screen and (max-width: 1090px) {
.nav-wrap {display: none;}
.phone-head strong { display: flex; font-size: 14px !important; gap: 10px;}
.phone-head a[href^="tel:"] {display: inline-block;font-size: 14px;}
.hero-section h1 {font-size: 32px;}
.search-head {min-width: 350px;}
.flex-foot {flex-wrap: wrap;gap: 10px;}
.mobile-border {display: block;width: 100%;height: 8px;}
}
@media only screen and (max-width: 1000px) {
.yellow-bg.fixed-banner {position: unset!important}
header{padding-top: 0!important}
.contact-pg .flex-container{flex-wrap:wrap;gap: 30px;}
.full-pg,.quarter-pg {flex-basis:100% !important;}
.contact-pg .flex-container,.manual-pg .flex-container {flex-wrap:wrap;gap: 30px;}
.contact-pg .half-page,.manual-pg .third-pg {flex-basis: 100%;}
}
@media only screen and (max-width: 850px) {
.hero-section .flex-container {flex-wrap:wrap;gap:15px;}.main-txt,.sub-txt {flex-basis: 100% !important;}
}
@media only screen and (max-width: 768px) {
.flex-container.flex-hero { flex-direction: column;gap:4px;}
.flex-item:hover {flex-grow: 0;}
.flex-item {min-height: 160px;flex-grow: 0;}
.flex-item h2 {font-size: 22px;padding-bottom: 0 !important;}
.triangle-down {bottom: 50%;background: rgb(251 205 17 / 35%);}
.hero-title {align-items: center !important;}
.main-head .flex-container {gap: 30px;}
.search-head {min-width: 100%;}
.manual-pg table, .manual-pg thead, .manual-pg tbody, .manual-pg th, .manual-pg td, .manual-pg tr {display: block;}
.manual-pg thead {display: none; }
.manual-pg tr {margin-bottom: 15px;border: 1px solid #ccc;padding: 10px; }
.manual-pg td {position: relative;padding-left: 50%;text-align: left;border: none;border-bottom: 1px solid #eee; }
.manual-pg td::before {position: absolute;top: 10px;left: 10px;width: 45%;padding-right: 10px;white-space: nowrap;font-weight: bold; }
.manual-pg td:nth-of-type(1)::before { content: "Current Production Parts"; }
.manual-pg td:nth-of-type(2)::before { content: "Service"; }
.manual-pg td:nth-of-type(3)::before { content: "Hyster Legacy Parts"; }
.manual-pg td:nth-of-type(4)::before { content: "Service"; }
.grey-quarter {background:#fff;}
.search-head form {display: none;}
.phone-head strong {flex-wrap: wrap}
.phone-head a {flex-basis: 100%;}
}
@media only screen and (max-width: 600px) {
.search-box {flex-wrap:wrap !important;}
.search-box form,footer a.yellow-btn {flex-basis: 100%;}
.foot-col {flex-basis: 45%;}
.accordion .accordion-header h2 {font-size: 18px;}
}
@media only screen and (max-width: 550px) {
.grid-services {grid-template-columns: repeat(1, 1fr);}
.foot-col {flex-basis: 100%;}
.flex-foot {gap: 30px;}
.search-head {display: none;}
.phone-head {padding-bottom: 0}
.main-head .flex-container {align-items: flex-end !important;}
.logo,.right-side {flex: 1;}
.manual-pg td {position: relative;padding: 2.5em 1em 1em 1em;text-align: left;border: none;border-bottom: 1px solid #eee;background: #fff;}
.manual-pg td::before {position: absolute;top: 0.5em;left: 1em;font-weight: bold;color: #333;}
#menu-button a { font-size: 15px;
font-weight: 900 !important;
color: #000;
font-family: var(--stencil);}
.tablet-menu {display: none;}
.mobile-small {display:block;
text-align: center;
background: var(--offwhite);
}
.main-head {padding-bottom: 0;}
.main-head .flex-container {padding-bottom: 10px;align-items:flex-start !important;}
}
@media only screen and (max-width: 550px) {
.phone-head strong{text-align: right;}
.phone-head em {display: block;}
}
@media only screen and (max-width: 350px) {
.main-head .flex-container {flex-wrap:wrap;gap: 10px;text-align: center;}
.logo, .right-side {flex-basis: 100%;}
.phone-head strong {
text-align: center;
}
.phone-head a[href^="tel:"]:before {content:none}
}