@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0; }


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; }

/*---These are Variables. They are being used in place of the hex color easily changes site colors but updating these variables----*/
:root {
  --color-primary: #C44906;
  --color-secondary: #35403E;
  --color-warm-background: #efebe4;
  --color-text: #222;
  --font-heading: "Oswald", sans-serif;
  --font-body: "Roboto Condensed", sans-serif; }

/*-------- BODY STYLES --------*/
* {
  box-sizing: border-box; }

body {
  font-family: var(--font-body); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading); }

a {
  text-decoration: none !important; }

.red-btn, .gray-btn { width: 190px; box-shadow: 0 0 4px 2px rgba(0, 0, 0, .1); margin: 3px; background: #fff; border-radius: 40px; padding: 5px; display: flex; flex-direction: row; justify-content: space-between;
  & p { font-size: 14px !important; margin: 0 !important; text-align: left !important; padding: 0 0 0 10px !important; display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: center; align-self: center; height: 45px; color: var(--color-text) !important; font-weight: 400; }
}
.red-btn i, .gray-btn i { width: 45px; transition: .4s ease; height: 45px; align-self: center; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; border-radius: 50%; color: #fff; font-size: 16px; }
.red-btn i { transform: rotate(-45deg); background: var(--color-primary); }
.gray-btn i { transform: rotate(-45deg); background: var(--color-secondary); }

.red-btn:hover i, .gray-btn:hover i {
  transform: rotate(0deg); }

/*--- HEADER STYLES ---------------------*/
.top-wrapper { width: 100%; background: var(--color-warm-background); }

.top-header {
  max-width: 1410px;
  margin: 0 auto;
  width: 100%;
  padding: 2rem 1.4rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items:center;
  flex-wrap:wrap;
  justify-content: space-between; }

.top-left { max-width: 112px; width: 100%;
  & img { width: 100%; }
}

.top-right { max-width: 200px; width: 100%; 
  & a { display: flex; flex-direction: row; justify-content: flex-start; width: 100%;
    & i { width: 50px; flex-wrap: wrap; height: 50px; border-radius: 50%; margin-right: 10px; align-self: center; display: flex; justify-content: center; padding: 10px; border: solid 1px var(--color-primary); align-content: center; font-size: 20px; color: var(--color-primary); }
    & p { color: var(--color-secondary); font-size: 18px; font-weight: 800; font-family: var(--font-body);
      & span { font-size: 12px; font-weight: 400; }
    }
  }
}

.top-center {
  max-width: 500px;
  width: 100%;
  }

/*-------Search-----------*/
.search-wrapper { display: flex; flex-direction: row; justify-content: flex-start; padding: 5px 5px 5px 10px; background: #fff; border: solid 1px #ccc; border-radius: 25px; --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  & input { width: calc(100% - 30px); background: #fff; border: none !important; padding: 8px 12px; box-sizing: border-box; }
  input::placeholder { color: #7a7979; font-size:14px; font-family:var(--font-body);}
  & input:focus, & input:active { border: none !important; }
  & button { border: none !important; transition: .3s ease; border-radius: 50%; height: 35px; width: 35px; padding: 5px; box-sizing: border-box; background: var(--color-secondary); font-size: 14px; color: #fff;
    &:hover { background: var(--color-primary); cursor: pointer; }
  }
  & .search-row { display: flex; flex-direction: row; justify-content: flex-start; width: 100%; }
}


.page-wrap { max-width: 1400px; margin: 0 auto; width: 100%; padding: 10px; box-sizing: border-box; }


/*--------Fleet Assests----------*/
.gray-back { width: 100%; background:#f1f0ef; padding: 3em 1em; color:#1f1f1f;}

.flex2 { display: flex; flex-direction: row; justify-content: center; }

.flex2item { width: 50%; padding: 10px; box-sizing: border-box; }

.fleet {
  & h2 { font-size: 65px; font-weight: 600; color: #fff; line-height: 70px; padding-bottom: 60px;
    @media only screen and (max-width: 1200px) { font-size: 50px; line-height: 55px; padding-right: 20px; }
    @media only screen and (max-width: 700px) { font-size: 40px; line-height: 45px; padding-right: 0; }
    @media only screen and (max-width: 500px) { font-size: 30px; line-height: 35px; }
  }
  & p { font-size: 14px; line-height: 22px; color: var(--color-text); font-family: var(--font-body); color: #fff; padding-bottom: 20px; }
}

.icons { width: 100%; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 15px; }

.icon { width: calc(50% - 8px); color: #fff; padding-bottom: 60px;
  & i { background: var(--color-primary); color: #fff; font-size: 25px; height: 60px; width: 60px; align-self: center; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; border-radius: 50%; }
  & h3 { font-size: 20px; color: #fff; padding: 20px 0; }
  & p { font-size: 14px; line-height: 22px; color: var(--color-text); font-family: var(--font-body); color: #fff !important; }
}




/*-------- FOOTER STYLES ----------------*/
.footer { width: 100%; display: flex; flex-direction: row; justify-content: space-between; }

.footer-left { max-width: 430px; width: 100%;
  & h2 { font-size: 25px; font-weight: 800; color:#1f1f1f;; line-height: 50px;
    @media only screen and (max-width: 700px) { font-size: 38px; line-height: 42px; }
    @media only screen and (max-width: 500px) { font-size: 28px; line-height: 32px; }
  }
  & p { font-size: 16px; line-height: 26px; color:#1f1f1f; font-family: var(--font-body); color:#1f1f1f; padding: 10px 0 15px 0; font-weight: 400; }
  & a { color:#c3132b;font-weight: 600; font-size: 15px; transition: .4s ease;
    &:hover { text-decoration:underline!important; }
  }
}

.footer-right { max-width: 700px; width: 100%; display: flex; flex-direction: row; justify-content: space-between; }

.foot-col { width: 33%; padding: 3% 10px;color:#1f1f1f;
  & p { font-size: 16px; font-family: var(--font-heading); color:#1f1f1f; font-weight: 500; letter-spacing:1px; text-transform:uppercase; }
  & hr { width: 100%; background:#bdbdbd; border: none; height: 1px; margin: 10px 0; }
  & a {color:#1f1f1f; display: block; font-size: 14px; line-height: 28px; font-weight: 400;
    &:hover { text-decoration: underline; }
    i{-webkit-text-stroke:1px #1f1f1f; color:transparent; padding-right:3px;}
  }
}

.bottom-footer { width: 100%; padding: 20px; border-top: solid 1px #ccc; margin-top: 40px;
  & p { font-size: 14px; text-align:center; line-height: 22px; font-family: var(--font-body); color: #1f1f1f; }
}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.body-wrapper > div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .buy-now-link,
.body-wrapper > div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .check-availability-link,
.body-wrapper > div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .email-seller-link,
.body-wrapper > div:not(.detail-wrapper) .faceted-section-box .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .apply-button,
.body-wrapper > div:not(.detail-wrapper) .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .apply-button,
.body-wrapper > div:not(.detail-wrapper) button.page-nav {
  background: var(--color-secondary) !important;
  color: #fff !important; }

.body-wrapper > div:not(.detail-wrapper) .view-listing-details-link,
.body-wrapper > div:not(.detail-wrapper) .contact-options a,
.body-wrapper > div:not(.detail-wrapper) .fin-calc-mobile > a,
.body-wrapper > div:not(.detail-wrapper) button.g-recaptcha.button,
.body-wrapper > div:not(.detail-wrapper) .show-all-modal .apply-button,
.body-wrapper > div:not(.detail-wrapper) .show-all-modal .nuf-button,
.body-wrapper > div:not(.detail-wrapper) .list-error-container .info button,
.body-wrapper > div:not(.detail-wrapper) .mobile-done-button-container .mobile-done-button,
.body-wrapper > div:not(.detail-wrapper) a.buy-btn.gtm-buynow.des-buy-now,
.body-wrapper > div:not(.detail-wrapper) a.buy-btn.des-buy-now,
.body-wrapper > div:not(.detail-wrapper) button.selected-facet.ts-button,
.body-wrapper > div:not(.detail-wrapper) .detail-contact-bar .contact-bar-btn {
  background: var(--color-secondary) !important;
  color: #fff !important; }

.body-wrapper > div:not(.detail-wrapper) .view-listing-details-link:hover,
.body-wrapper > div:not(.detail-wrapper) .contact-options a:hover,
.body-wrapper > div:not(.detail-wrapper) .fin-calc-mobile > a:hover,
.body-wrapper > div:not(.detail-wrapper) button.g-recaptcha.button:hover,
.body-wrapper > div:not(.detail-wrapper) .email-seller-link:hover,
.body-wrapper > div:not(.detail-wrapper) .mc-nav-controls .mc-icon-navarrow span,
.body-wrapper > div:not(.detail-wrapper) a.buy-btn.gtm-buynow.des-buy-now:hover,
.body-wrapper > div:not(.detail-wrapper) a.buy-btn.des-buy-now:hover,
.body-wrapper > div:not(.detail-wrapper) .detail-contact-bar .contact-bar-btn:hover {
  background: var(--color-primary) !important;
  color: #fff !important; }

.body-wrapper > div:not(.detail-wrapper) .faceted-section-box .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .back-button,
.body-wrapper > div:not(.detail-wrapper) .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .back-button,
.body-wrapper > div:not(.detail-wrapper) .show-all-modal .back-button,
.body-wrapper > div:not(.detail-wrapper) .parts-listing-container .mobile-parts-detail-container .dealer-phone-container a {
  color: #000 !important;
  border: 1px solid #000 !important; }

.body-wrapper > div:not(.detail-wrapper) .list-title .list-title-text,
.body-wrapper > div:not(.detail-wrapper) .parts-top-section .parts-title-and-breadcrumbs .parts-title .parts-title-text span,
.body-wrapper > div:not(.detail-wrapper) .title-media-buttons-heading h1 {
  color: #000 !important;
  line-height: 28px !important; }

.body-wrapper > div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .listing-dealer-info .dealer-name,
.body-wrapper > div:not(.detail-wrapper) .list-main-section .list-container .fin-calc,
.body-wrapper > div:not(.detail-wrapper) .list-listing-mobile .listing-dealer-info .spec-value,
.body-wrapper > div:not(.detail-wrapper) .fin-calc,
.body-wrapper > div:not(.detail-wrapper) .fin-calc p,
.body-wrapper > div:not(.detail-wrapper) .list-main-section .list-container .list-error .info,
.body-wrapper > div:not(.detail-wrapper) .parts-bottom-section .parts-list-view .parts-list-content .error-message,
.body-wrapper > div:not(.detail-wrapper) .info,
.body-wrapper > div:not(.detail-wrapper) .list-title .list-listings-count,
.body-wrapper > div:not(.detail-wrapper) .parts-top-section .parts-title-and-breadcrumbs .parts-title .parts-listings-count,
.body-wrapper > div:not(.detail-wrapper) .list-top-section .listing-option-bar .list-listings-count,
.body-wrapper > div:not(.detail-wrapper) span.part-list-price.bold,
.body-wrapper > div:not(.detail-wrapper) .dealer-company-header,
.body-wrapper > div:not(.detail-wrapper) .dealer-info h3,
.body-wrapper > div:not(.detail-wrapper) .listing-description-text,
.body-wrapper > div:not(.detail-wrapper) .paging-container .list-page-number,
.body-wrapper > div:not(.detail-wrapper) .paging-container .page-number,
.body-wrapper > div:not(.detail-wrapper) .listing-main-stats .price,
.body-wrapper > div:not(.detail-wrapper) .list-container-flexrow .price-container .price,
.body-wrapper > div:not(.detail-wrapper) h2.listing-portion-title,
.body-wrapper > div:not(.detail-wrapper) .list-listing-mobile .price-container .price,
.body-wrapper > div:not(.detail-wrapper) .compare-listings-container .compare-container .comp-header-img .comp-title-close-cont .compare-title,
.body-wrapper > div:not(.detail-wrapper) .compare-listings-container .compare-container .compare-price,
.body-wrapper > div:not(.detail-wrapper) .rent-title,
.body-wrapper > div:not(.detail-wrapper) .rent-title-details,
.body-wrapper > div:not(.detail-wrapper) span.list-title-text,
.body-wrapper > div:not(.detail-wrapper) a.search-results-link,
.body-wrapper > div:not(.detail-wrapper) h3.listing-portion-title {
  color: #000 !important; }

.body-wrapper > div:not(.detail-wrapper) .mobile-option-bar .mobile-option-bar-filter,
.body-wrapper > div:not(.detail-wrapper) span.listing-prices__retail-price,
.body-wrapper > div:not(.detail-wrapper) span.parts-listings-count {
  color: #000 !important; }

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

@media only screen and (max-width: 1300px) {
  
  .footer { flex-direction: column; }
  .footer-left, .footer-right { padding: 10px; width: 100%; }
}

@media only screen and (max-width: 1000px) {
  .flex2 { flex-direction: column; }
  .flex2item { width: 100%; padding: 10px 0; }
  .gray-back, .service, .tan-back { padding: 40px 0; }
}
@media only screen and (max-width: 900px) {
  .top-center { display: none; }

}
@media only screen and (max-width: 700px) {
  
  .footer-right { flex-direction: column; padding-top: 20px; }
  .foot-col { width: 100%; padding: 10px; }
 
}
@media only screen and (max-width: 600px) {
  .top-right { display: none; }
  .top-left { margin: 0 auto; }
  
}
@media only screen and (max-width: 550px) {
  .icon { width: calc(100% - 8px); padding: 20px 0; }
}
@media only screen and (max-width: 420px) {
  .footer-left { & a { font-size: 16px; } }
}
@media only screen and (max-width: 380px) {
  .footer-left { & a { font-size: 14px; font-weight: 400; } }
}