/***** 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 {
}
a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none; cursor: pointer !important;}
button:hover {cursor: pointer !important;}
hr{border:#000 1px solid;}
html {font-family: 'inter-variable', sans-serif !important;}
/*--- HEADER STYLES ---------------------*/
header {background: #1F1F1F;}
.header-wrap {width: 95%; margin: 0 auto; display: flex; justify-content: space-between;}
.header-left {display: flex; gap: 40px;}
.header-left a {color: #fff; font-size: 14px; line-height: 14px;}
.header-left i {color: #E31D21; font-size: 19px;}
.header-left a {display: flex; align-items: center; gap: 5px;}
.header-right a {background: #E31D21; color: #fff; font-size: 14px; padding: 12px 0; line-height: 19px; width: 200px; display: flex; justify-content: center;}
.header-right a:hover {background: #B9171A; transition: .5s;}
.header-left a:hover i {color: #fff; transition: .5s;}
#header-nav {display: flex; justify-content: space-between; padding: 40px 0; width: 95%; margin: 0 auto; align-items: center;}
.header-search input {background: #EBEBEB !important; border: none !important; font-family: 'inter-variable', sans-serif !important; color: #2A2A2A !important; font-size: 14px !important; line-height: 14px !important; width: 250px !important; padding: 12px 15px 10px 15px !important; border-radius: 0px !important;}
.header-search button {background: none !important; border: none !important; color: #C81F22 !important; font-size: 18px !important; position: absolute !important; right: 50px !important; top: 90px !important;}
/*---BODY--------------------------------*/
/*---DEFAULT---*/
.hero-bkgrd {background: url("/siteart/hero.jpg") no-repeat; background-position: center; background-size: cover;}
.hero-overlay {background: rgb(31,31,31);
background: linear-gradient(270deg, rgba(31,31,31,0) 0%, rgba(31,31,31,0.80) 100%);}
.hero-wrapper {width: 95%; margin: 0 auto; padding: 130px 0;}
.hero-content {width: 570px;}
.hero-content p span {color: #fff; font-size: 20px !important; line-height: 25px !important;}
.hero-content h1 {color: #fff; font-size: 40px; line-height: 50px; font-weight: bold; margin: 10px 0;}
.hero-content p {font-size: 18px; color: #fff; line-height: 30px;}
.hero-content button {margin-top: 20px; background: #fff; border: none; border-radius: 30px; width: 200px; padding: 7px 15px 7px 15px; display: flex; justify-content: space-between; align-items: center; color: #232323; font-size: 15px; font-family: 'inter-variable', sans-serif; line-height: 15px; font-weight: 600;}
.hero-content button i {font-size: 25px;}
.hero-content button p {color: #232323; font-size: 15px; font-family: 'inter-variable', sans-serif; line-height: 15px; font-weight: 600; margin-top: 2px;}
.hero-content button:hover {width: 220px; transition: .5s; background: #E31D21;}
.hero-content button:hover i, .hero-content button:hover p {color: #fff;}
#inv-filter-search {width: 90%; margin: 0 auto; background: #fff; margin-top: -25px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
#inv-filter-search form {display: flex; justify-content: space-between; padding: 30px 40px; gap: 10px; align-items: center;}
#inv-filter-search input, #inv-filter-search select {width: 100%; background: #EBEBEB; border: none; padding: 18px 18px 16px 18px; font-family: 'inter-variable', sans-serif; font-size: 15px; color: #6F6F6F;}
#inv-filter-search button {background: #E31D21; padding: 18px 0 16px 0; width: 190px; color: #fff; font-family: 'inter-variable', sans-serif; font-size: 16px; border: none;}
#inv-filter-search button:hover {background: #1F1F1F; transition: .5s;}
#home-about {display: flex; align-items: center; width: 95%; margin: 0 auto; margin-top: 80px; margin-bottom: 80px; justify-content: space-between;}
#home-about > div:first-child {width: 40%;}
#home-about > div:last-child {width: 50%;}
#home-about > div:first-child img {width: 100%;}
#home-about > div:last-child p span {color: #E31D21; font-size: 20px; line-height: 25px;}
#home-about > div:last-child h2 {color: #1F1F1F; font-size: 40px; line-height: 50px; font-weight: bold; margin: 10px 0;}
#home-about > div:last-child p {color: #1F1F1F; font-size: 18px; line-height: 30px;}
#home-about .about-flex {display: flex; gap: 10px; text-align: center; margin-top: 25px;}
#home-about .about-flex a {background: #F3F3F3; padding: 30px 15px; width: 100%;}
#home-about .about-flex a:hover {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; transition: .5s;}
#home-about .about-flex h3 {font-size: 16px; color: #1F1F1F; line-height: 30px; font-weight: 600; margin: 10px 0 5px 0;}
#home-about .about-flex p {color: #6A6A6A !important; font-size: 14px !important; line-height: 24px !important;}
#home-about .about-flex img {background: #E31D21; padding: 12px 6px; border-radius: 30px;}
#home-about .about-flex a:hover img {background: #B9171A; transition: .5s;}
#home-contact iframe {position: relative; z-index: 500;}
#home-contact .map-contact {z-index: 600; position: absolute; width: 95%; margin: 0 auto;}
#home-contact .map-contact > div {float: right; background: #fff; padding: 50px 40px; margin: 40px 0; width: 570px;}
#home-contact .map-contact-flex {display: flex; justify-content: space-between; margin-top: 20px;}
#home-contact h4 {font-size: 25px; line-height: 30px; color: #1F1F1F; font-weight: 600; margin-bottom: 10px;}
#home-contact p {font-size: 16px; color: #6A6A6A; line-height: 28px;}
#home-contact .map-contact-flex p {color: #1F1F1F; font-size: 16px; line-height: 30px;}
#home-contact .map-contact-flex a {color: #6A6A6A; font-size: 14px; line-height: 25px;}
#home-contact .map-contact-flex a:hover {color: #E31D21; transition: .5s;}
#home-contact .map-contact-flex > div > div {margin-bottom: 12px;}
#home-contact .map-contact button {margin-top: 20px; background: #1F1F1F; border: none; border-radius: 30px; width: 162px; padding: 7px 15px 7px 15px; display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 15px; font-family: 'inter-variable', sans-serif; line-height: 15px; font-weight: 600;}
#home-contact .map-contact button i {font-size: 25px;}
#home-contact .map-contact button p {color: #fff; font-size: 15px; font-family: 'inter-variable', sans-serif; line-height: 15px; font-weight: 600; margin-top: 2px;}
#home-contact .map-contact button:hover {width: 182px; transition: .5s; background: #E31D21;}
/*---CONTACT---*/
#contact-page {width: 95%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; margin-top: 20px; margin-bottom: 80px;}
#contact-page > div {width: 45%;}
#contact-page img {width: 100%; border-radius: 10px;}
#contact-page h1 {color: #1F1F1F; font-size: 40px; line-height: 50px; font-weight: bold;}
#contact-page p {font-size: 16px; color: #1F1F1F; line-height: 26px; margin: 5px 0 10px 0;}
#contact-page .form-flex {display: flex; width: 100%; gap: 15px; margin-bottom: 15px;}
#contact-page .form-flex input {width: 100%; font-family: 'inter-variable', sans-serif; font-size: 15px; line-height: 15px; padding: 12px 0 10px 15px; border: none; background: #F3F3F3; height: 25px;}
#contact-page form {margin-top: 20px;}
#contact-page textarea {font-family: 'inter-variable', sans-serif; font-size: 15px; line-height: 15px; width: 98%; border: none; padding: 12px 0 0px 15px; background: #F3F3F3; height: 150px;}
#contact-page form .submitselect, #contact-page button {margin-top: 30px; background: #1F1F1F; border: none; border-radius: 30px; width: 162px; padding: 7px 15px 7px 15px; display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 15px; font-family: 'inter-variable', sans-serif; line-height: 15px; font-weight: 600;}
#contact-page form .submitselect i, #contact-page button i {font-size: 25px;}
#contact-page form .submitselect p, #contact-page button p {color: #fff; font-size: 15px; font-family: 'inter-variable', sans-serif; line-height: 15px; font-weight: 600; margin-top: 2px; margin-bottom: 0px;}
#contact-page form .submitselect:hover, #contact-page button:hover {width: 182px; transition: .5s; background: #E31D21; cursor: pointer !important;}
#contact-page form img {width: auto; border-radius: 0px;}
#contact-page form .CaptchaAnswerPanel input {height: 25px;}
#contact-page form .CaptchaWhatsThisPanel a {color: #1F1F1F; border-bottom: 1px #1F1F1F solid;}
#contact-page form .submit {background: #1F1F1F; border: none; border-radius: 30px; width: 162px; padding: 12px 15px 10px 15px; color: #fff; font-size: 15px; font-family: 'inter-variable', sans-serif; line-height: 15px; font-weight: 600;}
#contact-page form .submit:hover {transition: .5s; background: #E31D21; cursor: pointer !important;}
#contact-page button {width: 200px; margin-top: 20px;}
#contact-page button:hover {width: 220px;}
/*--------FORM STYLES--------------------*/
/*-------- FOOTER STYLES ----------------*/
footer {background: #1F1F1F;}
.footer-wrap {width: 95%; margin: 0 auto; display: flex; justify-content: space-between; padding: 50px 0;}
footer p {color: #fff; font-family: 'inter-variable', sans-serif; font-size: 20px; text-transform: uppercase; line-height: 45px; font-weight: bold;}
footer li, footer a {color: #fff; font-size: 18px; font-family: 'inter-variable', sans-serif; line-height: 35px;}
footer a {border-bottom: 1px transparent solid;}
footer a:hover {border-bottom: 1px #fff solid; transition: .5s;}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.inventory-nav .header-search button {top: 87px !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 {color: #E31D21 !important;}
.list-container-flexrow .view-listing-details-link, .list-container-flexrow .dealer-phone-call, .list-container-flexrow .dealer-phone-text, .list-container-flexrow .contact-options, .list-container-flexrow .contact-options a, .newtontrucksalescomhdev-88jlbf, .list-content .list-error-container .info button:not(.login-button) {background: #1F1F1F !important;}
.disclaimer span {font-family: 'inter-variable', sans-serif !important; font-size: 14px !important; line-height: 24px !important;}
.detail-wrapper {font-family: 'inter-variable', sans-serif !important;}
.list-content .listing-widgets .Currency a, .listing-widgets-detail .Currency a, .faceted-search-content .selected-facets-container .selected-facet {background: #E31D21 !important;}
/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width: 1300px) {
#contact-page textarea {width: 97.5%;}
}
@media only screen and (max-width: 1200px) {
.header-search {display: none;}
#inv-filter-search {width: 95%;}
#home-about > div:last-child {width: 55%;}
}
@media only screen and (max-width: 1100px) {
#contact-page textarea {width: 97%;}
}
@media only screen and (max-width: 1050px) {
.header-left {display: none;}
.header-wrap {width: 100%; justify-content: flex-end;}
#home-contact .map-contact {position: relative;}
#home-contact .map-contact > div {float: inherit; padding: 50px 0; margin: 40px 0; width: 100%;}
#home-about {flex-wrap: wrap;}
#home-about > div:first-child {display: none;}
#home-about > div:last-child {width: 100%;}
#home-contact .map-contact > div {padding: 0px;}
#contact-page > div:last-child {display: none;}
#contact-page > div {width: 100%;}
#contact-page textarea {width: 98.5%;}
}
@media only screen and (max-width: 1000px) {
#inv-filter-search form {flex-wrap: wrap;}
#inv-filter-search select {width: 49%;}
#inv-filter-search input {width: 45%;}
#inv-filter-search div {width: 49%;}
#inv-filter-search button {width: 100%;}
}
@media only screen and (max-width: 900px) {
#inv-filter-search input {width: 44%;}
#inv-filter-search select {width: 49%;}
}
@media only screen and (max-width: 850px) {
#contact-page textarea {width: 98%;}
}
@media only screen and (max-width: 800px) {
#inv-filter-search input {width: 43.5%;}
#inv-filter-search div {width: 48.5%;}
}
@media only screen and (max-width: 750px) {
.hero-content {width: 100%;}
.hero-overlay {background: linear-gradient(270deg, rgba(31, 31, 31, .30) 0%, rgba(31, 31, 31, 0.80) 100%);}
footer p {font-size: 18px;}
footer li, footer a {font-size: 16px;}
}
@media only screen and (max-width: 700px) {
#inv-filter-search input {width: 43%;}
#inv-filter-search div {width: 48%;}
}
@media only screen and (max-width: 650px) {
#inv-filter-search input, #inv-filter-search select, #inv-filter-search div {width: 100%;}
#contact-page .form-flex {flex-wrap: wrap;}
#contact-page textarea {width: 97.5%;}
}
@media only screen and (max-width: 600px) {
.footer-wrap {flex-wrap: wrap; gap: 30px;}
.footer-wrap > div {width: 100%;}
#home-about .about-flex {flex-wrap: wrap;}
}
@media only screen and (max-width: 500px) {
#inv-filter-search form {padding: 40px 30px;}
#contact-page textarea {width: 97%;}
}
@media only screen and (max-width: 450px) {
#home-contact .map-contact-flex {flex-wrap: wrap;}
#home-contact .map-contact-flex > div {width: 100%;}
.hero-content p span, #home-about > div:last-child {font-size: 18px !important; line-height: 23px !important;}
.hero-content h1, #home-about > div:last-child h2, #contact-page h1 {font-size: 35px; line-height: 45px;}
.hero-content p, #home-about > div:last-child p, #contact-page p {font-size: 16px; line-height: 28px;}
.hero-wrapper {padding: 110px 0;}
#contact-page textarea {width: 96.5%;}
}
@media only screen and (max-width: 400px) {
#header-nav img {width: 100%;}
#header-nav {gap: 30px;}
#inv-filter-search form {padding: 40px 20px;}
#contact-page textarea {width: 96%;}
}
@media only screen and (max-width: 350px) {
.hero-content p span, #home-about > div:last-child {font-size: 16px !important; line-height: 21px !important;}
.hero-content h1, #home-about > div:last-child h2, #contact-page h1 {font-size: 30px; line-height: 40px;}
.hero-content p, #home-about > div:last-child p, #home-contact p, #contact-page p {font-size: 15px; line-height: 26px;}
.hero-wrapper {padding: 90px 0;}
#home-contact h4 {font-size: 22px; line-height: 28px;}
footer p {font-size: 16px;}
footer li, footer a {font-size: 14px; line-height: 30px;}
#contact-page textarea {width: 95.5%;}
}
@media only screen and (max-width: 300px) {
.header-right, .header-right a {width: 100%;}
#inv-filter-search form {padding: 40px 10px;}
#contact-page textarea {width: 95%;}
}
@media only screen and (max-width: 250px) {
#contact-page textarea {width: 94.5%;}
}