﻿/***** 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 {overflow-x: hidden;}

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: 'barlow', sans-serif;}

/*--- HEADER STYLES ---------------------*/

header {width: 80%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
header img {width: 125px;}
header .get-in-touch button {background: #eda340; color: #132135; font-family: 'barlow', sans-serif; font-size: 14px; line-height: 14px; text-transform: uppercase; border: none; width: 135px; padding: 30px 0; font-weight: 600; letter-spacing: 1px;}
header .get-in-touch button:hover {width: 145px; transition: .5s; letter-spacing: 1.5px;}
.button-menu {display: none;}

#Solutions, #Viably, #Support {width: 100%; margin: 0 auto; background: #132135; height: 680px; position: absolute !important; z-index: 500;}
.nav-flex-open {position: absolute; width: 100%;}
.sub-nav-width {width: 80%; margin: 0 auto; padding-top: 100px; display: flex; gap: 100px;}
.sub-nav-width > ul, .sub-cat-links > ul {width: 300px;}
.sub-nav-width > ul > li:first-child, .sub-cat-links > ul > li:first-child {font-family: 'barlow', sans-serif; font-size: 18px; color: #fff; line-height: 28px; font-weight: 600; letter-spacing: .5px;}
.sub-nav-width > ul li, .sub-cat-links > ul li {padding-bottom: 20px; font-weight: 400; font-size: 16px; line-height: 26px; color: rgba(255,255,255,0.80); letter-spacing: .5px;}
.sub-nav-width > ul li a, .sub-cat-links > ul li a {display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,0.80);}
.sub-nav-width > ul li a:hover p, .sub-cat-links > ul li a:hover {text-decoration: underline; color: #fff; font-weight: 600;}
#Solutions h3 a, #Viably h3 a, #Support h3 a {color: #fff; font-size: 40px; float: right;}
#Solutions h3, #Viably h3, #Support h3 {width: 80%; margin: 0 auto; position: relative; z-index: 800; padding-top: 35px;}

/*---BODY--------------------------------*/

.hero-content h1 {font-family: 'itc-avant-garde-gothic-pro', sans-serif; font-size: 56px; line-height: 66px; color: #fff; padding-bottom: 10px; font-weight: 700; font-style: normal;}
.hero-content p {font-family: 'barlow', sans-serif; font-size: 24px; line-height: 34px; color: #fff;}

/*--------FORM STYLES--------------------*/




/*-------- FOOTER STYLES ----------------*/

footer {background: #132135;}
footer img {width: 175px; margin-bottom: 70px;}
.footer-wrap {width: 80%; margin: 0 auto; padding: 75px 0 230px 0;}
.footer-flex {display: flex; justify-content: space-between; gap: 50px;}
.footer-flex > div {width: 100%;}
footer p {font-family: 'barlow', sans-serif; font-size: 15px; line-height: 25px; color: #fff; text-transform: uppercase; font-weight: 600; letter-spacing: .5px;}
.footer-flex hr {width: 100%; border: 1px #fff solid; margin: 20px 0 30px 0;}
.footer-flex ul {padding-bottom: 35px;}
footer ul li {padding-bottom: 8px;}
footer ul li a {color: #fff; font-size: 18px; line-height: 28px; font-family: 'barlow', sans-serif;}
footer ul li a:hover {color: #26D07C; transition: .5s;}
footer h2 {color: #fff; font-size: 18px; line-height: 28px; font-family: 'itc-avant-garde-gothic-pro', sans-serif; font-weight: 700; font-style: normal;}
.footer-contact {margin-top: 50px;}
.footer-contact p {display: flex; gap: 10px; align-items: center; margin-bottom: 25px;}
.footer-contact p i {font-size: 25px; line-height: 25px;}
.footer-contact p a {color: #fff; font-size: 15px; line-height: 25px; font-family: 'barlow', sans-serif; text-transform: none; font-weight: 400;}
.footer-contact p a:hover {color: #26D07C; transition: .5s;}
.footer-socials {display: flex; gap: 13%; margin-top: 50px;}
.footer-socials a i {color: #fff; font-size: 25px; line-height: 25px;}
.footer-bottom {display: flex; gap: 50px; padding-top: 35px;}
.footer-bottom hr {width: 100%; border: 1px #fff solid; height: 0px;}
.footer-bottom button p {color: #132135; font-size: 16px; line-height: 16px; font-family: 'barlow', sans-serif; text-transform: uppercase;}
.footer-bottom button {display: flex; gap: 10px; align-items: center; width: 215px; background: #EDA340; padding: 15px 0 17px 0; border: none; justify-content: center;}
.footer-bottom a:hover button {gap: 20px; transition: .5s;}

.footer-style {background: #26D07C; height: 30px;}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/

.inv-hero {background: url("/siteart/inv-hero.jpg") no-repeat; background-position: center; background-size: cover;}
.hero-overlay {background: linear-gradient(100.67deg,rgba(0,20,26,.83) 28.33%,rgba(0,20,26,0) 93.05%);}
.hero-content {width: 80%; margin: 0 auto; padding: 230px 0 75px 0;}

.list-redesign {padding-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: #26D07C !important;}
.faceted-search-content .faceted-section-box .faceted-search, .faceted-search-content .faceted-section-box .faceted-btn-container .faceted-show-all-btn, .listing-carousel .recommended-listings-section .view-all-link, .listing-carousel .recommended-auctions-section .view-all-link {background: #132135 !important;}
.faceted-search-content .selected-facets-container .selected-facet, .list-container-flexrow .view-listing-details-link, .list-container-flexrow .dealer-phone-call, .list-container-flexrow .dealer-phone-text, .usedthinkviablycomhdev-88jlbf {background: #EDA340 !important; color: #132135 !important;}

.detail-wrapper {padding: 50px 0 !important;}

/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1350px) {
	header, .sub-nav-width, .hero-content, .footer-wrap, #Solutions h3, #Viably h3, #Support h3 {width: 85%;}
	footer ul li a {font-size: 17px; line-height: 27px;}
}

@media only screen and (max-width: 1280px) {
	.get-in-touch {display: none;}
	.button-menu {display: contents;}
	.button-menu-flex {display: flex; gap: 10px; align-items: center;}
	.contact-button button {background: #eda340; color: #132135; font-family: 'barlow', sans-serif; font-size: 14px; line-height: 14px; text-transform: uppercase; border: none; width: 135px; padding: 30px 0; font-weight: 600; letter-spacing: 1px;}
	.contact-button button:hover {width: 145px; transition: .5s; letter-spacing: 1.5px;}
	#Solutions, #Viably, #Support {display: none !important;}
}

@media only screen and (max-width: 1250px) {
	footer ul li a {font-size: 16px; line-height: 26px;}
}

@media only screen and (max-width: 1150px) {
	footer ul li a {font-size: 15px; line-height: 25px;}
}

@media only screen and (max-width: 1050px) {
	footer ul li a {font-size: 14px; line-height: 24px;}
}

@media only screen and (max-width: 980px) {
	.footer-flex > div:nth-child(2), .footer-flex > div:nth-child(3), .footer-flex > div:nth-child(4), .footer-flex > div:last-child {display: none;}
	.footer-socials {gap: 35px;}
	.footer-bottom {gap: 25px;}
	footer img {margin-bottom: 50px;}
}

@media only screen and (max-width: 650px) {
	.hero-content h1 {font-size: 50px; line-height: 60px;}
	.hero-content p { font-size: 22px; line-height: 32px;}
}

@media only screen and (max-width: 500px) {
	.hero-content h1 {font-size: 45px; line-height: 55px;}
	.hero-content p { font-size: 20px; line-height: 30px;}
}

@media only screen and (max-width: 450px) {
	.contact-button button {width: 125px; padding: 25px 0;}
	.contact-button button:hover {width: 135px;}
}

@media only screen and (max-width: 400px) {
	header img {width: 80%;}
	.hero-content h1 {font-size: 40px; line-height: 50px;}
	.hero-content p { font-size: 18px; line-height: 28px;}
}

@media only screen and (max-width: 350px) {
	header {gap: 5px;}
	header img {width: 100%;}
	.contact-button button {width: 120px;}
	.contact-button button:hover {width: 130px;}
}

@media only screen and (max-width: 300px) {
	header img {width: 80%;}
	.hero-content h1 {font-size: 35px; line-height: 45px;}
	.hero-content p { font-size: 16px; line-height: 26px;}
	.footer-bottom hr {display: none;}
	.footer-bottom button, .footer-bottom a {width: 100%;}
}