﻿/***** BEGIN RESET *****/
@import url("https://use.typekit.net/hot6ikp.css");
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 --------*/

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}

hr{border:#000 1px solid;}

h1, h2, h3, h4 {
	font-family: 'praxis-next', sans-serif;
}

#home p, #trailer-repair p, header p, footer p, #thankyou p, #shipping p, #about p, #contact p, #brands p, #privacy-policy p, #privacy-policy li {
	color: #1F1B1A;
	font-size: 20px;
	line-height: 35px;
	font-family: 'darkmode-on-cc', sans-serif;
}

#home p {
	color: #fff!important;
}

/*--- HERO STYLES ---------------------*/
.slide-content .flex {justify-content: space-between; align-items: flex-end; margin-bottom: 20px;}
#about .inner-hero  {
	background: url("/siteart/about-trailer-hero.jpg") no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #2F2D2D;
}
#brands .inner-hero  {
	background: url("/siteart/brands-hero.jpg") no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #2F2D2D;
}

#contact .inner-hero  {
	background: url("/siteart/contact-hero.jpg") no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #2F2D2D;
}

#trailer-repair .inner-hero  {
	background: url("/siteart/trailer-repair-hero.jpg") no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #2F2D2D;
}

#shipping .inner-hero  {
	background: url("/siteart/shipping.jpg") no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #2F2D2D;
}

#thankyou .inner-hero  {
	background: url("/siteart/thankyou.jpg") no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #2F2D2D;
}

#privacy-policy .inner-hero  {
	background: url("/siteart/privacy-policy.jpg") no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #2F2D2D;
}


.inner-hero {position: relative; padding: 60px 0 80px;}
.inner-hero .heading-lg {margin-bottom: 20px;}
.inner-hero a {color: #fff; font-size: 18px; font-weight: 600; font-family: 'praxis-next', sans-serif;transition: all .4s ease-out;}
.inner-hero a i {margin-right: 15px;}
.inner-hero a:hover {color: #FF633B;}

/*--------HERO SLIDER--------------------*/

.home-header .slide-content {
	position: absolute;
	bottom: 80px;
	left: 2%;
	right: 2%;
	max-width: 100%;
}

.home-header .slide-content .heading-lg {color: #fff;max-width: 730px;}

.home-header .hero-slide-wrap {
	position: relative;
	overflow: hidden;
	background: #2F2D2D;
}

.home-header .slide-hero {
	width: 100%;
	max-width: 100%;
	height: 750px;
}

.home-header .slick-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.home-header .slide-hero div {
	height: 100%;
}

/*---BODY--------------------------------*/
/*---quicklinks---*/
.quicklinks {padding-top: 100px; padding-bottom: 100px;}
.quicklinks .img-height {
	height: 270px;
	max-width: 30%;
	width: 100%;
	position: relative;
	background: #D14623;
}
.quicklinks > .flex {flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px;}
.quicklinks .img-height img {height: 100%; width: 100%;object-fit: cover;transition: all .4s ease-out;}
.quicklinks .img-height a:hover img {opacity: .3;}
.quicklinks .img-height .flex {position: absolute; bottom: 0; margin: 25px 40px;justify-content: space-between; align-items: center;width: 83%;box-sizing: border-box;}
.quicklinks .img-height .flex i {color: #fff; font-size: 35px;}

/*---center-section---*/
.center-section {position: relative; padding: 200px 0; background: url("/siteart/about-home.jpg") no-repeat; background-position: center; background-size: cover;background-color: #2F2D2D;}
.center-section .heading-md {color: #fff;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.center-section p {font-weight: 500!important; color: #fff!important; margin-bottom: 70px; margin-top: 20px;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.center-section .center-text {text-align: center; max-width: 1080px; margin: 0 auto;}

.center-section .inner-links a {color: #fff;font-family: 'darkmode-on-cc', sans-serif; font-size: 20px;font-weight: 500;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}

/*---brands---*/
.brands-slider {padding-top: 100px;}
.brands-slider .flex {justify-content: space-between; align-items: baseline;}

/*brands-slider*/
.brands {padding-bottom: 15px!important;}
.brands .hero-slide-wrap {
	margin: 0 auto;
}

.brands .brands-logo-image {
	position: relative;
	overflow: hidden;
    height: 160px;
	background: #fff;
	padding: 20px;
	box-sizing: border-box;
	transition: transform .2s;
	border: #1F1B1A solid 1px;
}

.brands .brands-logo-image:hover {
	transform: scale(0.90);
}

.brands .brands-logo-image > a > img {
	display: block;
	width: 100%;
	height: 100%;
	object-position: center;
	object-fit: contain;
}

.brands .slide-brands {
	height: 100%;
	padding-top: 50px;
	padding-bottom: 100px;
    max-width: 1820px;
}

.brands .slide-brands div {
	height: 100%;  
}

/*---orange-bg---*/
.oragne-bg .heading-md {color: #fff;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.oragne-bg {
	background: url("/siteart/financing-home.jpg") no-repeat;
	background-size: cover;
	background-position: center;
	height: 600px;
	position: relative;
	background-color: #2F2D2D;
}
.oragne-bg .flex {
	justify-content: space-between;
	align-items: flex-end;
	bottom: 40px;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
}
.trailer-repair-photos{
	width:100%; display:block; margin:0 auto; margin-top:80px;
}
.tr-image{
	width:33%;
}
/*---PAGES--------------------------------*/
/*---shipping---*//*---thankyou---*/
#shipping .center-text, #thankyou .center-text {text-align: center; padding-top: 100px!important; padding-bottom: 100px!important;}
#shipping .center-text p, #thankyou .center-text p {max-width: 600px; margin: 20px auto 60px;}
#thankyou .center-text .flex {justify-content: center; gap: 20px; flex-wrap: wrap;}

#privacy-policy .our-policy {padding-top: 100px!important; padding-bottom: 100px!important;}
#privacy-policy .our-policy > div {max-width: 1600px;width: 100%;}
#privacy-policy .our-policy .heading-md, #privacy-policy .our-policy .heading-mdsm {margin-bottom: 20px;}
#privacy-policy .our-policy .heading-mdsm {margin-top: 60px;}
#privacy-policy .our-policy .heading-mdsm {color: #1F1B1A!important; text-shadow: none;}
#privacy-policy .button {margin-top: 60px;}
#privacy-policy .list-heading {margin-bottom: 15px; font-weight: 500!important;}
#privacy-policy .break-word {word-break: break-all;}

/*---brands---*/
#brands .text-center {padding-top: 100px!important; padding-bottom: 100px!important;}
#brands .text-center > div:first-child {
	max-width: 825px;
	margin: 0 auto;
	text-align: center;
}
#brands .text-center p {margin-top: 20px; margin-bottom: 60px;}
#brands .text-center > div:first-child > div {justify-content: center; gap: 20px; margin-bottom: 80px; flex-wrap: wrap;}

.text-center .col-5 {
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

.text-center .col-5 .img-height {
	border: #1F1B1A 1px solid;
	padding: 20px;
	max-width: 300px; 
	width: 100%;
	transition: transform .2s;
}
.text-center .col-5 .img-height img {width: 100%; height: 100%;}
.text-center .col-5 .img-height:hover {transform: scale(0.90);}

/*---about---*/
#about .center-section {
	position: relative; 
	padding: 200px 0; 
	background: url("/siteart/about-camping.jpg") no-repeat; 
	background-position: center; 
	background-size: cover;
	background-color: #2F2D2D;
}
#about .img-left {align-items: center; padding-top: 100px!important; padding-bottom: 100px!important;}
#about .img-left p {margin-top: 20px; margin-bottom: 60px;}
#about .img-left .img-height {height: 530px;max-width: 880px; width: 100%;min-width: 500px;}
#about .img-left .img-height img {width: 100%; height: 100%; object-fit: cover;}
#about .img-left > div:last-child {max-width: 790px; margin-left: 100px;}

#about .col-2 {justify-content: space-between; align-items: flex-end; padding-top: 100px!important; padding-bottom: 100px!important;}
#about .col-2 div:first-child {max-width: 1080px; margin-right: 30px;}
#about .col-2 .heading-md {margin-bottom: 20px;}

/*--------FORM STYLES--------------------*/
/*---contact---*//*---trailer-repair---*/
#contact .center-section a i, #trailer-repair .center-section a i {color: #FF633B!important;}
#contact .center-section {
	position: relative; 
	padding: 200px 0; 
	background: url("/siteart/contact-camping.jpg") no-repeat; 
	background-position: center; 
	background-size: cover;
	background-color: #2F2D2D;
}
.center-section a i {margin-right: 15px;}
.center-section .center-text .flex {gap: 50px; justify-content: center; flex-wrap: wrap;}
.center-section .flex a:hover {text-decoration: underline;}

#trailer-repair .center-section {
	position: relative; 
	padding: 200px 0; 
	background: url("/siteart/trailer-reapir-background.jpg") no-repeat; 
	background-position: center; 
	background-size: cover;
	background-color: #2F2D2D;
}

.form-all .heading-md {margin-bottom: 10px;}
.form-all p {max-width: 700px; margin: 15px auto 40px;}

.form-all {
	box-sizing: border-box;
	max-width: 1200px!important; 
	width: 100%;
	margin: 0 auto 100px!important;
	text-align: center;
	padding-top: 100px!important;padding-bottom: 100px!important;
}

 .label {
	font-family: 'darkmode-on-cc', sans-serif;
	text-align: left!important;
	font-weight: 500;
	font-size: 17px;
}

.label-row {margin-bottom: 15px;}

.flex-form {
	width: 100%;
	max-width: 1205px;
	padding: 15px;
	margin: 52px auto;
}

.flex-row {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	width: 100%;
}

.form-half {
	display: inline-block;
	width: calc(50% - 8px);
	margin: 15px 15px 15px 0;
}

.form-half input, .form-half select {
	padding: 15px;
	width: 100%;
	border: 1px solid #2C2C2C;
	font-family: 'darkmode-on-cc', sans-serif;
	box-sizing: border-box;
	background: #fff;
	font-size: 17px;
}

.form-2nd-row {margin-right: 0;}

.form-full textarea {
	width: 100%;
	padding: 15px;
	border: 1px solid #2C2C2C;
	box-sizing: border-box;
	margin-bottom: -8px;
	font-family: 'darkmode-on-cc', sans-serif;
	background: #fff;
}

.form-full {margin: 15px 0 30px 0;}

input::placeholder, textarea::placeholder {color: #2C2C2C;}
select {
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}

/*--------Captcha--------------------*/

.include-captcha{display:none;}
#submit-btn {float: right;}
.CaptchaWhatsThisPanel > a:hover {text-decoration: underline;}
.CaptchaWhatsThisPanel > a, .CaptchaMessagePanel {color: #2C2C2C;font-family: 'darkmode-on-cc', sans-serif;}
.CaptchaPanel {text-align: right!important;}
.captcha-button {float: right;}


/*-------- FOOTER STYLES ----------------*/
.my-site-footer {background: #2F2D2D; padding: 80px 0 25px;}
.my-site-footer .wrapper > .flex:first-child {justify-content: space-between;align-items: flex-end;}
.my-site-footer li {margin-bottom: 25px;}
.my-site-footer li a, .my-site-footer p {
	color: #fff; 
	font-size: 20px;
	font-family: 'darkmode-on-cc', sans-serif;
	font-weight: 600;
}
.my-site-footer li a:hover {color: #FF633B;}
.my-site-footer p {margin-bottom: 25px;}

.my-site-footer .footer-heading {font-size: 30px;font-family: 'praxis-next', sans-serif; margin-bottom: 40px;}
.my-site-footer .footer-logo .img-height {width: 330px;margin-bottom: 40px;}
.my-site-footer .footer-logo .img-height img {width: 100%; height: 100%;}
.my-site-footer .footer-logo i {margin-right: 15px;}

.my-site-footer .footer-links {gap: 150px;}
.my-site-footer .footer-links .flex {gap: 70px;}

.my-site-footer .line-top {border-top: #fff solid 1px; padding-top: 25px; margin-top: 80px;justify-content: flex-end; gap: 15px;}
.my-site-footer .line-top div a {
    background: #FF633B;
    padding: 12px 13px 8px;
    border-radius: 5px;
    transition: all .4s ease-out;
}
.my-site-footer .line-top i {color: #2F2D2D; font-size: 20px;}
.my-site-footer .line-top div a:hover {background: #fff;}

/*-------- COMMON STYLES ----------------*/
.wrapper {
	margin: 0 auto;
    max-width: 1830px;
    padding: 0 15px;
}

.flex {display: flex;}

.text-link {color: #D14623; font-weight: 700;}
.text-link:hover {text-decoration: underline;}

/*headings*/
.heading-lg {font-weight: 700; font-size: 100px; color: #fff; line-height: 110px;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.heading-md {font-weight: 600; font-size: 70px; color: #1F1B1A; line-height: 80px;}
.heading-mdsm {font-weight: 600; font-size: 45px; color: #fff;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}

.hero-span {font-size: 40px; font-weight: 400;}
.h2-span {font-size: 35px; font-weight: 400;}

/*buttons*/

.btn-white {
    display: inline-block;
    color: #1F1B1A;
    background: #fff;
    width: 220px;
    padding: 17px;
    font-family: 'praxis-next', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    transition: all .4s ease-out;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 5px;
}

.btn-orange:hover, .btn-white:hover{background: #2F2D2D; color: #fff;}
.btn-orange-light:hover {background: #fff;}
.btn-brown:hover {background: #FF633B; color: #1F1B1A;}

.btn-orange, .btn-orange-light {
    display: inline-block;
    color: #1F1B1A;
    background: #FF633B;
    width: 220px;
    padding: 17px;
    font-family: 'praxis-next', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    transition: all .4s ease-out;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 5px;
	border: none;
}

.btn-brown {
    display: inline-block;
    color: #fff;
    background: #2C2C2C;
    width: 220px;
    padding: 17px;
    font-family: 'praxis-next', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    transition: all .4s ease-out;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 5px;
}

/*shapes*/

.shape-up {
	clip-path: polygon(13.83% 0%, 86.17% 0%, 100% 100%, 0% 100%);
	background-color: #fff;
	width: 100%;
	max-width: 600px;
	height: 50px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.5px;
	margin: 0 auto;
}

.shape-down {
	clip-path: polygon(0% 0%, 100% 0%, 86.17% 100%, 13.83% 100%);
	background-color: #fff;
	width: 100%;
	max-width: 600px;
	height: 50px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0px;
	margin: 0 auto;
}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/
.list-top-section .list-listings-count, .list-content .price-container .price, .list-content .list-listing .listing-main-stats .auction-price, .calc-button-wrapper > button, .detail__machine-location a, .detail__machine-location-address, .dealer-contact__details_right-col a, .dealer-contact__details_right-col button, .listing-prices__retail-price, .detail__search-results-text span, .detail__breadcrumbs button span {color: #D14623!important;}
.faceted-search-content .selected-facets-container .selected-facet, .list-content .list-error-container .info button:not(.login-button), .list-container-flexrow .view-listing-details-link, .view-listing-details-link {background: #FF633B!important; color: #1F1B1A!important; transition: all .4s ease-out;}
.list-content .list-error-container .info button:not(.login-button):hover, .list-container-flexrow .view-listing-details-link:hover, .view-listing-details-link:hover {background: #2F2D2D!important; color: #fff!important;}

/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1600px) {
	.home-header .slide-content {left: 0%; right: 0%;}	
}

@media only screen and (max-width: 1200px) {
	.my-site-footer .footer-links, .my-site-footer .footer-links .flex, .my-site-footer .wrapper > .flex:first-child {gap: 50px;}
	#about .img-left > div:last-child {margin-left: 30px;}
}

@media only screen and (max-width: 1130px) {
	.quicklinks .img-height {max-width: 49%;}
}

@media only screen and (max-width: 1100px) {
	#about .img-left {flex-wrap: wrap;}
	#about .img-left > div:last-child {margin-left: 0; margin-top: 30px;}
	#about .img-left .img-height {max-width: 1100px; min-width: 200px;height: 400px;}
}

@media only screen and (max-width: 1045px) {
	.quicklinks .img-height {max-width: 100%;}
	.my-site-footer .wrapper > .flex:first-child {flex-wrap: wrap;}
}

@media only screen and (max-width: 950px) {

	.slide-content .flex {flex-direction: column;align-items: flex-start;gap: 40px;}	
}

@media only screen and (max-width: 860px) {
	.text-center .col-5 .img-height {max-width: 200px;}
}

@media only screen and (max-width: 850px) {
	.brands-slider .flex, .oragne-bg .flex {flex-direction: column; gap: 25px;}	
	.oragne-bg .flex {align-items: flex-start;}
	#about .col-2 {flex-wrap: wrap;}
	#about .col-2 div:first-child {margin-right: 0; margin-bottom: 60px;}
	.tr-image{
		width:100%;
		height:200px;
		object-fit:cover;}
}

@media only screen and (max-width: 730px) {
	.heading-lg {font-size: 60px;line-height: 70px;}
	.heading-md {font-size: 45px;line-height: 55px;}
	.heading-mdsm {font-size: 35px;}
	.hero-span {font-size: 30px;}
	.h2-span {font-size: 25px;}
	.center-section {padding: 70px 0 85px;}
	#about .center-section, #contact .center-section, #trailer-repair .center-section {padding: 80px 0;}
	.oragne-bg {height: 450px;}
	
}

@media only screen and (max-width: 630px) {
	.home-header .slide-hero {height: 500px;}
	.quicklinks .img-height {height: 130px;}
	.my-site-footer .footer-links {flex-wrap: wrap;}
	#about .img-left .img-height {height: 200px;}
	.text-center .col-5 .img-height {padding: 5px;}
}

@media only screen and (max-width: 500px) {
	.text-center .col-5 .img-height {max-width: 300px;}
	.flex-row {flex-wrap: wrap;}
	.form-half {width: 100%; margin: 15px 0;}
}

@media only screen and (max-width: 400px) {
	.quicklinks .img-height .flex {margin: 25px 25px;}
	.my-site-footer .footer-logo .img-height {margin: 0 auto 40px; width: 300px;}
	.center-section .inner-links a {font-size: 18px;}
}

@media only screen and (max-width: 360px) {
	.oragne-bg .heading-md {max-width:260px;}
	.heading-lg {font-size: 50px;line-height: 60px;}
	.my-site-footer .footer-logo .img-height {width: 280px;}
	.center-section .inner-links a {word-break: break-all;}
}






