/***** 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: 'Roboto', sans-serif;}
/*--- HEADER STYLES ---------------------*/
header {background: #CC0000; color: #fff; font-family: 'Roboto', sans-serif; font-size: 16px;}
header .header-flex {width: 95%; margin: 0 auto; display: flex; justify-content: space-between; padding: 10px 0; align-items: center;}
header .header-fb {display: flex; gap: 20px; align-items: center; color:#fff;}
header .header-fb a .fa-brands:hover {color:#FFFF37; transition: .3s ease;}
header i {font-size: 20px; color: #fff;}
header a {color: #fff;}
.nav-locations .location-span {margin-top: 5px;}
.nav-locations .location-span p {font-size: 13px; line-height: 20px; font-weight: 600; color: #bbb;}
.nav-locations img {width: 160px;}
/*---BODY--------------------------------*/
.home-link nav.primary ul li:first-child a, .trucks-link nav.primary ul li:nth-child(2) a, .trailers-link nav.primary ul li:nth-child(3) a, .financing-link nav.primary ul li:nth-child(4) a, .sell-link nav.primary ul li:nth-child(5) a, .about-link nav.primary ul li:nth-child(6) a, .contact-link nav.primary ul li:last-child a {background: #CC0000 !important; border-radius: 3px !important;}
/*---DEFAULT---*/
#hero-video {
width: 100%;
height: 80vh;
overflow: hidden;
position: relative;
}
#hero-video .player {
width: 100%;
height: 100%;
}
#hero-video video {
width: 100%;
height: 100%;
object-fit: cover;
}
#search-section {background: url("/siteart/search-bkgrd.jpg") no-repeat; background-position: center; background-size: cover;}
.search-overlay {background: rgba(204,0,0,0.85);}
.search-content {width: 99%; margin: 0 auto; text-align: center; padding: 50px 0 65px 0;}
#search-section .search-buttons button {background: none; border: none; color: #fff; text-transform: uppercase; font-weight: bold; font-size: 15px; width: 180px; padding: 10px 0;}
#search-section .search-buttons button:hover {background: #222222; border-radius: 5px;}
.inventorysearch {background: #222222 !important; border-radius: 5px !important;}
#search-section form {display: flex; gap: 20px; justify-content: center; padding-top: 30px; flex-wrap: wrap;}
#search-section form div {text-align: left; width: 18%;}
#search-section form input, #search-section form select, #search-section form button {width: 100%;}
#search-section form label {color: #fff; font-size: 16px;}
#search-section form input {margin-top: 5px; border: none; padding: 12px 0;}
#search-section form select {margin-top: 5px; border: none; padding: 10px 0;}
#search-section form input::placeholder, #search-section form select {font-family: 'Roboto', sans-serif; font-size: 15px; color: #222; padding-left: 12px; line-height: 15px;}
#search-section form button {color: #fff; font-size: 15px; font-weight: bold; text-transform: uppercase; border: none; background: #222; padding: 12px 0; margin-top: 22px;}
.search-buttons {display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;}
.about-bkgrd {background: url("/siteart/about-bkgrd.jpg") no-repeat; background-position: center; background-size: cover;}
.about-overlay {background: linear-gradient(to top,rgba(34,34,34,1.00),rgba(34,34,34,.40));}
.about-content {width: 90%; margin: 0 auto; padding: 50px 0; display: flex; justify-content: space-between; align-items: center;}
.about-content h1 {color: #fff; font-size: 30px; font-weight: bold; text-transform: uppercase; line-height: 40px; margin-bottom: 10px;}
.about-content h1 span {color: #CC0000;}
.about-content p {color: #fff; font-size: 16px; line-height: 26px;}
.about-welcome {width: 70%;}
.about-img {width: 30%; text-align: right; }
.about-solid {background: #222222;}
.about-nav {width: 90%; margin: 0 auto; display: flex; justify-content: center; gap: 10px;}
.about-nav a {background: linear-gradient(to right,#A10000,#CC0000); width: 100%; height: 315px;}
.about-nav a:hover {transition: .5s; transform: translateY(-6px);}
.about-nav a > div {text-align: center; width: 90%; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; justify-content: center; align-items: center; height: 100%;}
.about-nav a h3 {color: #fff; font-size: 18px; font-weight: bold; text-transform: uppercase;}
.about-nav a p {color: #fff; font-size: 16px; line-height: 24px;}
.about-locations {width: 90%; margin: 0 auto; display: flex; justify-content: center; gap: 10px; padding-top: 100px; padding-bottom: 100px;}
.about-locations > div {width: 100%; background: #fff;}
.houston {background: url("/siteart/houston.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
.dallas {background: url("/siteart/dallas.jpg") no-repeat; background-position: center; background-size: cover; width: 100%;}
.location-overlay {background: linear-gradient(to top,rgba(0,0,0,.80),rgba(0,0,0,.00)); width: 100%;}
.location-overlay h2 {color: #fff; font-size: 32px; font-family: 'Roboto', sans-serif; padding: 200px 0 20px 0; text-align: center;}
.location-links {display: flex; justify-content: space-between; width: 90%; margin: 0 auto; padding: 20px 0; align-items: center;}
.location-inv > a {display: flex; align-items: center; gap: 12px;}
.about-locations li, .about-locations a {color: #2f2f2f; font-size: 16px; font-family: 'Roboto', sans-serif; line-height: 24px;}
.about-locations a:hover {color: #CC0000;}
.location-links ul {margin-bottom: 15px;}
.location-links li {margin-bottom: 5px;}
.location-inv a div {border: 1px #2f2f2f solid; border-radius: 50%; padding: 12px 8px; display: flex;}
.location-inv img {width: 30px;}
.location-fb i {color: #CC0000; font-size: 25px;padding-right:5px;}
.location-fb {display: flex; align-items: center; gap: 5px;}
.location-fb i:hover {color: #8E0000;}
.location-map {padding-top: 30px;}
.dallas-location-map {padding-top: 50px;}
/*---FINANCING---*/
#financing {width: 90%; margin: 0 auto; padding: 50px 0; text-align: center;}
#financing h2 {font-size: 24px; color: #454545; font-family: 'Roboto', sans-serif; text-transform: uppercase; margin-bottom: 15px;}
#financing p {color: #454545; font-size: 17px; line-height: 27px; font-family: 'Roboto', sans-serif; margin-bottom: 10px;}
#financing h3 {color: #454545; font-size: 20px; margin-bottom: 10px; margin-top: -25px;}
#financing button {background: #CC0000; color: #fff; text-transform: uppercase; width: 220px; padding: 10px 0 10px 0; font-size: 14px; line-height: 14px; border: none; margin-top: 8px; margin-bottom: 12px;}
#financing button:hover {background: #A10000; transition: .5s;}
#financing .financing-flex {display: flex; justify-content: center; gap: 50px; margin-top: 50px;}
.financing-flex > div {box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; background: #F6F6F6; border-radius: 5px; border: 1px #C5D4Df solid; width: 400px; padding: 16px;}
.financing-flex > div:hover {border: 1px #CC0000 solid; transition: .5s;}
.financing-flex i {color: #fff; background: #CC0000; padding: 15px; border-radius: 50%; border: 2px #fff solid; font-size: 16px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.financing-flex > div > div {position: relative; top: -40px;}
/*---CREDIT APP---*/
.radio-input {margin-top: 3px;}
.radio-input input {width: 25px !important;}
.radio-input label {font-weight: 300 !important;}
#sell button {background: #CC0000; color: #fff; text-transform: uppercase; width: 220px; padding: 10px 0 10px 0; font-size: 14px; line-height: 14px; border: none; margin-top: 8px; margin-bottom: 12px;}
#sell button:hover {background: #A10000; transition: .5s;}
/*---SELL MY TRUCK---*/
#sell {padding: 50px 0;}
#sell .location-form {width: 100% !important;}
#sell h2 {font-size: 24px; color: #454545; font-family: 'Roboto', sans-serif; text-transform: uppercase; margin-bottom: 15px;}
#sell hr {border: 1px #ccc solid; margin-bottom: 50px; margin-top: 50px;}
#sell label {font-weight: bold; color: #454545; font-size: 16px; line-height: 26px;}
#sell h3 {color: #454545; font-size: 20px; margin-bottom: 3px;}
#sell p {font-size: 16px; color: #454545; line-height: 26px; margin-bottom: 15px;}
#sell select {width: 102.3%; border: 1px #ccc solid; padding: 10px 0 10px 15px; font-family: 'Roboto', sans-serif; font-size: 16px;}
#sell .input-margin input, #sell .input-margin select, #sell .input-margin textarea {margin-top: 5px;}
/*---ABOUT---*/
#about {width: 90%; margin: 0 auto; padding: 50px 0;}
#about h2 {font-size: 24px; color: #454545; font-family: 'Roboto', sans-serif; text-transform: uppercase; margin-bottom: 15px;}
#about p {color: #454545; font-size: 17px; line-height: 27px; font-family: 'Roboto', sans-serif; margin-bottom: 10px;}
#about p a {color: #CC0000; border-bottom: 1px transparent solid;}
#about p a:hover {border-bottom: 1px #CC0000 solid;}
/*---CONTACT---*/
.sub-header {background: #000;}
.sub-head-wrap {width: 90%; margin: 0 auto; padding: 30px 0;}
.sub-head-wrap h1 {color: #fff; font-size: 24px; font-family: 'Roboto', sans-serif; text-transform: uppercase; margin-bottom: 10px;}
.sub-head-links {display: flex; gap: 10px; flex-wrap: wrap;}
.sub-head-links a {color: #C5D4DF; font-family: 'Roboto', sans-serif; font-size: 16px; border-bottom: 1px transparent solid;}
.sub-head-links a:hover {border-bottom: 1px #C5D4DF solid;}
.sub-head-links p {color: #fff; font-family: 'Roboto', sans-serif; font-size: 16px;}
#contact .about-locations > div {border: 1px #CC0000 solid; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
#contact .about-locations {padding-top: 50px !important; padding-bottom: 80px !important;}
.location-contact {width: 90%; margin: 0 auto; display: flex; justify-content: space-between;}
#contact .location-contact p {line-height: 24px;}
#contact hr {width: 90%; margin: 0 auto; border: 1px #ccc solid; margin-bottom: 50px;}
.hide-location-contact {display: none;}
.location-contact-form {width: 90%; margin: 0 auto; display: flex; justify-content: space-between; gap: 30px; margin-bottom: 80px;}
.header-h-bkgrd {background: #2f2f2f; padding: 15px; margin-bottom: 20px;}
.header-h-bkgrd h3 {color: #fff; text-transform: uppercase; font-size: 20px; font-family: 'Roboto', sans-serif;}
.location-form {width: 60%;}
.location-hours {width: 40%;}
.location-day {display: flex; gap: 25px;}
.location-day li {font-size: 16px; font-family: 'Roboto', sans-serif; color: #2f2f2f; line-height: 26px;}
#contact .location-form p {font-size: 16px; line-height: 26px; color: #2f2f2f;}
#contact .location-form button {background: #CC0000; color: #fff; text-transform: uppercase; width: 220px; padding: 10px 0 10px 0; font-size: 14px; line-height: 14px; border: none; margin-top: 15px; margin-bottom: 12px;}
#contact .location-form button:hover {background: #A10000; transition: .5s;}
/*--------FORM STYLES--------------------*/
#contact form {width: 98%;}
.form-flex {display: flex; justify-content: space-between; gap: 30px; margin-bottom: 15px;}
.form-flex > div {width: 100%;}
.form-flex input {width: 100%; border: 1px #ccc solid; padding: 10px 0 10px 15px; font-family: 'Roboto', sans-serif; font-size: 16px;}
.form-flex input:placeholder {color: #ccc;}
.form-textarea textarea {width: 100%; border: 1px #ccc solid; padding: 10px 0 0 15px; font-size: 16px; font-family: 'Roboto', sans-serif; height: 140px;}
.submitselect {background: #CC0000; color: #fff; text-transform: uppercase; width: 120px; display: flex; justify-content: center; padding: 10px 0 8px 0; font-size: 18px; line-height: 18px; margin-top: 20px;}
.CaptchaWhatsThisPanel a {color: #CC0000; border-bottom: 1px transparent solid;}
.CaptchaWhatsThisPanel a:hover {border-bottom: 1px #CC0000 solid;}
.submit {background: #CC0000; color: #fff; text-transform: uppercase; width: 120px; padding: 10px 0 8px 0; font-size: 18px; line-height: 18px; border: none;}
.submitselect:hover, .submit:hover {background: #A10000; transition: .5s;}
/*-------- FOOTER STYLES ----------------*/
footer {background: url("/siteart/footer-bkgrd.jpg") no-repeat; background-position: center; background-size: cover; margin-top: -64px; position: relative;}
.footer-overlay {background: rgba(34,34,34,0.95);}
.footer-wrap {width: 90%; margin: 0 auto; padding: 40px 0 80px 0; display: flex; justify-content: space-between;}
.footer-links {display: flex; gap: 100px;}
footer p {color: #fff; font-weight: bold; text-transform: uppercase; font-family: 'Roboto', sans-serif; font-size: 18px; margin-bottom: 10px;}
footer li a, footer li {font-size: 16px; font-family: 'Roboto', sans-serif; color: #AAB8C3; line-height: 24px; margin-bottom: 5px;}
footer hr {border: 1px #D7D7D7 solid; margin: 20px 0;}
.footer-margin footer {margin-top: 0px !important;}
.footer-mobile {display: none;}
/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.list-redesign {margin-top: 50px !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: #CC0000 !important;}
.disclaimer span {font-family: 'Roboto', sans-serif !important; font-size: 15px !important; line-height: 26px !important;}
.detail-wrapper {margin-top: 50px !important; margin-bottom: 50px !important;}
.portertrkcomhdev-uevdm8, .faceted-search-content .selected-facets-container .selected-facet {background: #CC0000 !important;}
.portertrkcomhdev-xa3411, .portertrkcomhdev-pibxvw {color: #454545 !important;}
.list-content .list-error-container .info button:not(.login-button) {background: #CC0000 !important;}
/*---------- RESPONSIVE STYLES ----------*/
@media only screen and (max-width: 1450px) {
.hide-location-contact {display: contents;}
.show-location-contact {display: none;}
.location-contact {flex-wrap: wrap; gap: 10px;}
.location-contact div {width: 49%;}
.dallas-location-map {padding-top: 112px;}
#contact form {width: 97%;}
}
@media only screen and (max-width: 1250px) {
.location-contact div {width: 100%;}
.dallas-location-map {padding-top: 194px;}
}
@media only screen and (max-width: 1240px) {
.search-content {width: 95%;}
#hero-video {
height: auto;
}
#hero-video video {
width: 100%;
height: auto;
object-fit: contain;
}
}
@media only screen and (max-width: 1100px) {
#contact form {width: 96%;}
#hero-video {
height: auto;
}
#hero-video video {
width: 100%;
height: auto;
object-fit: contain;
}
}
@media only screen and (max-width: 1050px) {
#search-section form div {width: 30% !important;}
.about-nav {flex-wrap: wrap;}
.about-nav a {width: 49%;}
.about-locations, .footer-wrap {flex-wrap: wrap;}
.footer-wrap > div {width: 100%;}
.footer-links {gap: 0px; justify-content: space-between;}
.footer-wrap {gap: 50px; padding: 40px 0 25px 0;}
.footer-wrap > div:last-child {text-align: center;}
footer hr {border: 1px #AAB8C3 solid;}
.show-location-contact {display: contents;}
.hide-location-contact {display: none;}
.location-contact div {width: auto;}
.dallas-location-map {padding-top: 30px;}
#sell form {width: 99%;}
#financing .financing-flex {flex-wrap: wrap;}
}
@media only screen and (max-width: 850px) {
.location-contact-form {flex-wrap: wrap;}
.location-form {width: 100%;}
.location-hours {width: 100%;}
.location-contact-form {gap: 50px;}
#contact form {width: 97%;}
#sell form {width: 98%;}
}
@media only screen and (max-width: 800px) {
header .header-fb {display: none;}
header .header-flex {justify-content: center;}
#search-section form div {width: 46% !important;}
.about-content {flex-wrap: wrap; gap: 40px;}
.about-welcome, .about-img {width: 100%;}
.about-img {text-align: left;}
}
@media only screen and (max-width: 700px) {
.herosurround #hero-video {height: auto;}
#search-section {margin-top: -5px;}
.logo-bkgrd {width: 250px !important;}
#menu-button {font-size: 30px !important;}
.sub-head-wrap h1 {font-size: 20px; margin-bottom: 8px;}
.sub-head-links a, .sub-head-links p {font-size: 15px;}
.sub-head-wrap {padding: 25px 0;}
.about-locations li, .about-locations a, .location-contact p {font-size: 15px;}
.header-h-bkgrd h3 {font-size: 18px;}
.form-flex input, .form-textarea textarea {font-size: 15px;}
.submitselect, .submit {font-size: 16px; line-height: 16px; padding: 12px 0 10px 0;}
.location-day li, #contact .location-form p {font-size: 15px;}
#about h2, #sell h2, #financing h2 {font-size: 22px;}
#about p, #financing p {font-size: 16px;}
#sell h3, #financing h3 {font-size: 18px;}
#sell p {font-size: 15px;}
#sell label {font-size: 15px; line-height: 20px;}
#sell select {font-size: 15px;}
#contact .location-form p {line-height: 24px;}
footer p {font-size: 17px;}
footer li a, footer li {font-size: 15px;}
.location-overlay h2 {font-size: 30px;}
.about-content h1 {font-size: 28px; line-height: 38px;}
.about-nav a h3 {font-size: 17px;}
}
@media only screen and (max-width: 650px) {
.show-location-contact {display: none;}
.hide-location-contact {display: contents;}
.location-contact div {width: 49%;}
#contact form {width: 96%;}
}
@media only screen and (max-width: 600px) {
header {font-size: 15px;}
#search-section form div {width: 96% !important;}
.about-nav a {width: 100%;}
.footer-links {flex-wrap: wrap; gap: 25px;}
.footer-links div {width: 100%;}
.location-contact div {width: 100%;}
#sell form {width: 97%;}
#search-section form {gap: 20px;}
#search-section form button {margin-top: 15px;}
.footer-mobile {display: block; text-align: center;}
.footer-mobile h4 {color:#8988BC; padding-top:15px; letter-spacing: .5px; font-size: 14px;}
.footer-mobile a .fa-brands {color:#fff; font-size: 25px; padding: 10px 5px; text-align: center;}
}
@media only screen and (max-width: 500px) {
.form-flex {flex-wrap: wrap; gap: 15px;}
.financing-flex > div {width: 100%;}
}
@media only screen and (max-width: 450px) {
.location-links {flex-wrap: wrap;}
.location-links > div {width: 100%;}
.logo-bkgrd {width: 200px !important;}
#menu-button {font-size: 25px !important;}
.sub-head-wrap h1 {font-size: 18px; margin-bottom: 5px;}
.sub-head-links a, .sub-head-links p {font-size: 14px;}
.sub-head-wrap {padding: 20px 0;}
.header-h-bkgrd h3 {font-size: 16px;}
.form-flex input, .form-textarea textarea {font-size: 14px;}
.submitselect, .submit {font-size: 15px; line-height: 15px;}
.location-day li, #contact .location-form p {font-size: 14px;}
#contact form {width: 95%;}
#about h2, #sell h2, #financing h2 {font-size: 20px;}
#about p, #financing p {font-size: 15px; line-height: 24px;}
#sell h3, #financing h3 {font-size: 16px;}
#sell p {font-size: 14px;}
#sell label {font-size: 14px;}
#sell select {font-size: 14px;}
footer p {font-size: 16px;}
footer li a, footer li {font-size: 14px;}
.location-overlay h2 {font-size: 28px;}
.about-content h1 {font-size: 26px; line-height: 36px;}
.about-content p {font-size: 15px; line-height: 24px;}
#search-section form input::placeholder, #search-section form select {font-size: 14px;}
#search-section form label {font-size: 15px;}
#search-section form button, #search-section .search-buttons button {font-size: 14px;}
.about-nav a h3 {font-size: 16px;}
.about-nav a p {font-size: 15px;}
}
@media only screen and (max-width: 400px) {
header {font-size: 14px;}
#sell form {width: 96%;}
}
@media only screen and (max-width: 350px) {
.logo-bkgrd {width: 180px !important;}
#contact form {width: 94%;}
#sell form {width: 95%;}
}
@media only screen and (max-width: 300px) {
header {display: none;}
#contact form {width: 93%;}
#sell form {width: 94%;}
#financing button, #sell button, #contact .location-form button {width: 100%;}
footer img {width: 80%;}
}