﻿/*===================== 
	Color information
	
	-
	-
	-
	-
		 
=======================*/
/*===================== 
	CSS reset/normalize 
=======================*/

/**Correct `block` display not defined in IE 8/9.**/
article,aside,details,figcaption,figure,footer,header,hgroup,
main,nav,section,summary {display: block;}
pre {white-space: pre-wrap;}
small { font-size: 80%;}


/*===================== 
	@Font-Face 
=======================*/
.detail__title {font-family: 'Muli', sans-serif !important;}

.body-content {width: auto !important;}

.breadcrumbs__link > a {color: gray !important; font-size: 14px !important;}
.breadcrumbs__list-item > a {color: gray !important; font-size: 11px !important;}
.sort-by-dropdown-container > label > span {color: gray !important;}
.option-name {padding-left: 5px !important;}

/*===================== 
	base styles 
=======================*/

html {
    font-family: Arial, sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
	}

body {
    margin: 0;
	background-color: #000000!important;
}

svg:not(:root) {overflow: hidden;/*reset*/}
	
/* clear floats */ 
.group:before,
.group:after {content: ""; display: table;} 
.group:after {clear: both;}
.group {zoom: 1;}	
.clear { clear: both;}
	
/*image replacement*/
.hide-text {
	text-indent:  100%;
	white-space:  nowrap;
	overflow:  hidden;
	}	

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
	border-style: solid;
    height: 0;
	} 

img { border: 0;} 
	
/*===================== 
	typography 
=======================*/

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	}
	h1 {font-size: 2em;}

p {
	font-family: 'Muli', sans-serif;
	font-size: 16px;
	margin: 0;
}

	
h1 {
	font-family: 'Mr Dafoe', cursive;
	font-size: 36px;
}
		

h2 {
	font-family: 'Muli', sans-serif;
	font-size: 26px;
}

	
h3 {
}


h4 {
}


h5 {
}


h6 {
}

.white {color: #FFFFFF;}


/*===================== 
	link styles 
=======================*/

a:focus {outline: thin dotted;/*reset*/
	}
	
a,
a:link, 
a:visited, 
a:active {
	outline: 0;/*reset*/
    color: #aaa; 
    text-decoration:none;
	}
	a:hover  {
		outline: 0;/*reset*/
		text-decoration: none;
		color: #ccc;
		}  

/*===================== 
	header styles 
=======================*/
header {
	margin: 0 auto;
	width: 100%;
}
.header-logo {
	
}
.header-banner {
	color: #ffffff;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
}
.header-wrap {
	max-width: 1600px;
    display: block;
    margin: auto;
    padding: 20px;
}
i.fas.fa-angle-down {
    /* font-weight: 600; */
    font-size: 14px;
}




/*===================== 
	nav styles 
=======================*/

nav.primary {
	padding:0;
	display:block;
	margin:0 auto;
	position:relative;
	text-align: center;
	}

nav ul {
	padding:0;
	margin:0;
}

nav ul  li {

}

nav > ul > li {
	display:inline-block;
	list-style-type:none; 
	margin: 0px 10px;
}

nav ul  li a {
	font-family: 'Muli', sans-serif;
    font-size: 15px;
/*  letter-spacing: .25px; */
    color: #04f70f!important;
	padding-bottom: 10px;
}	
			
nav ul  li a:hover {
	color: #FFFFFF!important;
}


/* Appearance of the sub-level links */

nav.primary ul li li a { 
	line-height: ;
	color: ;
	text-align:;
	font-size: ;
	font-weight:;
	}
	
nav.primary ul li li a:hover { 
	color: #CCCCCC;
	}
	
nav.primary ul li li:hover { 
	}
	
	
/* This controls the Primary nav dropdowns for sublinks. Should not have to edit this too much */
nav.primary ul ul {
	display: none;
    position: absolute;
    min-width: 200px;
    background-color: #000000;
    border: 1px solid #04f70f;
    border-top: none;
    padding: 15px;
    text-align: left;
    margin-top: 10px;
    padding-top: 0px;
    padding-bottom: 5px;
}
nav.primary ul ul ul {
    position: absolute; 
    left: 100%;
    top:0; 
}
nav.primary ul li:hover > ul {  
    display: block;
    line-height:18px; 
    z-index: 2000 !important;
}
nav.primary ul ul li {
    float: none; 
    position: relative;
	display:block;
    margin:0;
	width:100%;
	margin-bottom: 8px;
}

.dropdown_arrow {
	display: inline-block !important;
}

.dropdown_style {
	font-size: ;
	font-weight: ;
}


/******** End of primary Nav ***************/


/*===================== 
	mobile nav
=======================*/

#menu-button{ /* initially will need to be hidden */
	display: block;
	font-size: 32px;
	width:100%;
	position: relative;
	z-index: 400;/* needs to be lower than nav.mobile, adjust as needed */
	padding: ;
	background: #04f70f;
	border-bottom: ;
	text-align: right;
	min-height: 0 !important;
	}
	#menu-button a{
		 color:#000;
		 text-decoration: none;
		 text-align: right !important;
	  }

nav.mobile {
	display:block;
	position: fixed;
	top: 0;
	left: -250px;
	width: 250px;
	height: 100%;
	background: #000;
	z-index: 500; /* needs to be higher than #menu-button, adjust as needed */
	overflow:auto;
}
nav.mobile h3 { /* Menu header styles */
	position: relative;
	padding: 12px 10px;
	color: #fff;
	font-size: 1.2em;
	font-weight: 400;
	border-bottom: 4px solid #222;
}
nav.mobile .mymenu-toggle { /* Menu close button */
	position: absolute;
	top: 12px;
	right: 10px;
	display: inline-block;
	padding: 6px 9px 5px;
	font-family: Arial, sans-serif;
	font-weight: 700;
	line-height: 1;
	background: #222;
	color: #999;
	text-decoration: none;
	vertical-align: top;
}
.mymenu-toggle {
	text-align: right;
	font-size: 28px;
	color: #000;
}

.mymenu-toggle a:hover {
	color: #000 !important;
}

.close_mobile {
	font-size: 26px !important;
	font-weight: 900;
	text-align: right;
}

nav.mobile .mymenu-toggle:hover { /* Menu close button on hover */
	color: #fff;
}
nav.mobile ul {
	list-style: none;
	font-weight: 300;
	margin:0;
	padding:0;
}
nav.mobile ul li {
	padding: 8px 0 6px 0 !important;
}
nav.mobile ul li a {
	position: relative;
	display: block;
	padding-left: 14px;
	color: #999;
	text-decoration: none;
	font-size: 15px;
	letter-spacing: 1px;
}
nav.mobile ul li a:hover {
	background:;
	color: #2b2b2b;
}


nav.mobile ul li li a { /* appearance of the sub-level links */
	position: relative;
	display: block;
	padding: 0px 10px 0px 15px;
	color: #000;
	text-decoration: none;
	text-transform: none !important;
	margin-left: 10px;
}
nav.mobile ul li li li a { /* appearance of third level sub-level links if needed */
	background: #666;
	position: relative;
	display: block;
	padding: 10px 10px 10px 25px;
	color: #000;
	text-decoration: none;
}
nav.mobile ul li span.click{/* dropdown menu idicator arrow be sure to include this image with your image files */ 
	background:url(../siteart/menu-dropdown-arrow.png) 10px 12px no-repeat;
	background-size:55%;
	position:relative;
	display:block;
	float:right;
	margin:-44px 0 0 0;
	cursor:pointer;
	z-index: 12399994;
	width:44px;
	height:44px;
	-webkit-transition:background-size .3s ease-in-out;
	-moz-transition:background-size .3s ease-in-out;
	transition:background-size .3s ease-in-out;
}
nav.mobile ul li span.click:hover{
	background-size:60%;
}





/*===================== 
	homepage styles 
=======================*/
.button-wrap {
	max-width: 1600px;
	display: block;
	margin: 20px auto;
	padding: 20px;
}
.inventory-img {
	width: 100%;
    position: relative;
}
.inv-button {
	font-family: 'Muli', sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .25px;
    color: #04f70f;
    background-color: #000000;
    border: none;
    padding: 10px;
    width: 200px;
    display: block;
    margin: auto;
	bottom: 75px;
    position: relative;
}
.inv-button:hover {
	color: #000000;
    background-color: #04f70f;
}

	
/*===================== 
	inventory styles 
=======================*/
.col-xs-12.col-sm-12.col-md-3.col-mg-4 {box-sizing: border-box;}
.col-xs-12.col-sm-12.col-md-9.col-mg-8 {box-sizing: border-box;}
.col-xs-12 {box-sizing: border-box;}
.hidden-xs.hidden-sm.col-md-12.primary {box-sizing: border-box;}
.col-xs-12 #menu-button {box-sizing: border-box;}
.hidden-md.hidden-lg.hidden-xl.mymenu-toggle {box-sizing: border-box;}
.col-xs-12.hidden-md.hidden-lg.hidden-xl.mobile {box-sizing: border-box;}

@charset "utf-8";
/* CSS Document */

/*-------- PADDING AND SUCH --------*/
/* Use these if you so please. */

.detail-content {
    padding: 3.145833VW 0;
}

.list-content {
    max-width: 1300px !important;
}


/*-------- COLORS --------*/

:root {
    /* All text that appears outside of the colored boxes, background for the colored boxes */
    /* Insurance/Financing buttons */
    /* Some titles, some buttons */
}

/*
NOTE: Variables do not work in IE. Here is a workaround:

1.	Code using the variables as you normally would.
2.  When you are finished, save everything and make a backup copy of the file in a convenient location. This file will be useful in case you need to change any colors in the future, since we are going to be overwriting the variables in the main file.
3.	Paste your css into the left section here: https://madlittlemods.github.io/postcss-css-variables/playground/
4.	Copy the css to the right, and paste it over everything in this document.
*/

/*------------------------------ START CSS STYLES. REPLACE EVERYTHING BELOW THIS ---------------------------------*/


/*------------------------------ General Listings Page---------------------------------*/


/*------------------------------Parts Page---------------------------------*/
#parts-content {
    padding: 2.145833VW 0;
}

#parts-content .parts-bottom-section .parts-list-view .parts-list-content .error-message {
    color: #000000 !important;
}

.criteria-header {
    color: #000000 !important;
}

#parts-content .parts-bottom-section .parts-list-view .parts-search-content .parts-search-window .parts-search-form .parts-radio {
    color: #000000 !important;
}

#parts-content .parts-bottom-section .parts-list-view .parts-list-content .parts-listing-container .parts-listing-column .parts-button.view-details {
    background: undefined !important;
}

#parts-content .parts-bottom-section .parts-list-view .parts-list-content .parts-listing-container {
    background: #000000 !important;
}

/*---Mobile Buttons----*/
.detail-content-mobile .detail-main-body .main-detail-data .dealer-phone-mobile-container .dealer-phone-mobile {
    background: undefined !important;
    border: #ffffff !important;
}

.detail-content-mobile .detail-main-body .main-detail-data .buy-btn-mobile {
    background: undefined !important;
    border: #ffffff !important;
}

.detail-content-mobile .detail-main-body .main-detail-data .offer-btn-mobile {
    background: undefined !important;
    border: #ffffff !important;
}

.detail-content-mobile .detail-main-body .main-detail-data .send-email-btn-mobile {
    background: undefined !important;
    border: #ffffff !important;
}

.detail-content-mobile .detail-main-body .main-detail-data .send-wholesale-email-btn-mobile {
    background: undefined !important;
    border: #ffffff !important;
}

.detail-content-mobile .detail-contact-bar .contact-bar-btn {
    background: undefined !important;
    border: #ffffff !important;
}

.detail-content-mobile .detail-contact-bar .contact-bar-btn {
    background: undefined !important;
    border: #ffffff !important;
}

.detail-content-mobile .detail-additional-data .data-row .data-label {
    background: undefined !important;
    border: #ffffff !important;
}

.detail-content-mobile .detail-main-body .main-detail-data .fin-calc-btn-mobile {
    background: undefined !important;
    border: #ffffff !important;
}

.detail-content-mobile .detail-additional-data .data-row .data-label {
    color: #000000 !important;
}



.detail-content-mobile * {
    color: #000000 !important;
}

.detail-content-mobile .detail-main-body .detail-mobile-top .detail-category {
    color: #ffffff !important;
}

.detail-content-mobile .detail-additional-data .data-row .data-value {
    background: #000000 !important;
}

.currency-selector select {
    color: #ffffff !important;
}

span.currency-selector {
    color: #ffffff !important;
}

h1.detail-title {
    color: #ffffff !important;
}

.detail-content-mobile .dealer-info .address-and-contact * {
    color: #ffffff !important;
}

.detail-content-mobile .dealer-info h3 {
    color: #ffffff !important;
}

.fin-calc p {
    color: #ffffff !important;
}

.fin-calc p strong {
    color: #ffffff !important;
}

.sort-by-dropdown-container span{
	color: #fff!important;
}

/*----All Details (e.g. year, manu, etc.)----*/
.detail-additional-data * {
    color: #ffffff !important;
}
.detail-content .detail-additional-data .data-row .data-value {
    color: #ffffff !important;
}
.detail-content-mobile .share-listing {
    color: #ffffff !important;
}

.detail-content .detail-additional-data .data-row .data-label {background-color: #9D9D9D!important;}
.detail-content .detail-main-body .main-detail-data .details-fin-calc .detail-btn-calc {background: #7d7d7d!important; padding: 10px!important;}
.detail-content-mobile .detail-additional-data .data-row .data-label {background-color: #7d7d7d!important;}
.detail-content-mobile .detail-contact-bar .contact-bar-btn {background-color: #7d7d7d!important;}
.detail-content-mobile .detail-main-body .main-detail-data .fin-calc-btn-mobile {background-color: #7d7d7d!important; margin-bottom: 15px!important;}
.detail-content-mobile .detail-main-body .main-detail-data .send-email-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .send-wholesale-email-btn-mobile {background-color: #7d7d7d!important;}
.detail-content-mobile .detail-main-body .main-detail-data .buy-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .offer-btn-mobile {background-color: #7d7d7d!important;}
.detail-content-mobile .detail-main-body .main-detail-data .dealer-phone-mobile-container .dealer-phone-mobile {background-color: #7d7d7d!important;}
.modal-content .form-main-content .modal-left-col .calculator-btns .calculator-btn {color: #ffffff!important;}
.mc-thumb-toggles .mc-btn span:last-of-type {color: #ffffff!important;}
.mc-thumb-toggles .mc-btn {color: #ffffff!important;}
button.g-recaptcha.button {background-color: #04f70f!important;}
.spec-icon {background-color: #7d7d7d!important; border-radius: 5px!important;}
.faceted-search-content .faceted-section-box .show-all-modal .show-all-modal-content-container {color: #000!important;}

.list-content .list-listing-mobile .email-seller {color: #FFFFFF!important;}
.list-content .list-listing-mobile .view-listing-details-link {color: #FFFFFF!important;}
.faceted-search-content .selected-facets-container .selected-header{
color: #dfdfdf !important	
}
.faceted-search-content .selected-facets-container .selected-facet{
    color: #fff!important;
    background: #808080!important;	
}
.show-all-modal .show-all-modal-content-container{
	background: #000!important;
	color: #fff!important;
}
.ts-modal-header .close{
    background-color: #000!important;
    color: #ffffff!important;	
}
/*===================== 
	footer styles 
=======================*/

footer {
	margin: 0;
	width: 100%;
	}
	
a.footerlink:link,
a.footerlink:visited, 
a.footerlink:active {
	text-decoration: none; 
	font-size:13px;
	color: #222;
	}
	a.footerlink:hover {
		text-decoration:none; 
		font-size:13px;
		color: #fff;
		}

.footertext {
	font-size:13px; 
	color:#666;
	}

.smallfootertext {
	font-size:10px; 
	color:#666;
	}

.divfooter {
	max-width:1200px; 
	text-align:center; 
	margin:0 auto;
	}

.footer-wrap {
	color: #ffffff;
    text-align: center;
    padding: 20px;
}
.copyright-wrap {
	margin-top: 10px;
}
.copyright-text {
	font-size: 11px;
}
.copyright-link {
	color: #FFFFFF!important;
}
.copyright-link:hover {
	color: #04f70f!important;
}


/*========================= 
	 Responsive styles 
===========================*/

/*==========  Non-Mobile First Method  ==========*/
@media only screen and (max-width : 1316px) {
	nav > ul > li {margin: 0px 8px;}
}

@media only screen and (max-width : 1192px) {
	nav ul  li a {font-size: 15px;}
}

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1199px) {


}

@media only screen and (max-width : 1099px) {
	nav > ul > li {margin: 0px 5px;}
	.header-wrap {padding: 20px 10px;}
}


/* Medium Devices, Desktops */
@media only screen and (max-width : 991px) {
	.header-wrap {padding: 0px;}
	.header-logo {display: block; margin: auto; max-width: 300px; width: 100%; margin-top: 20px;}
	.header-banner {margin-top: 0px; font-size: 30px;}
	.container.body-content a {color: #000!important;}
}


/* Small Devices, Tablets */
@media only screen and (max-width : 767px) {


}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
 	.header-banner {font-size: 26px;}
 
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {


}