/*==============================================================================================
  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%;} svg:not(:root) {overflow: hidden;} 
/* Hides giant arrows that show up on inventory pages on Chrome */
.cf .widgets svg[class*="fa"], .cf .widgets-details svg[class*="fa"] {display: none !important;}
/* Fix row margin problem in listings */
.cf .row {margin: 0 !important;}

/*============================================================================================== 
  Base Styles
================================================================================================*/
* {box-sizing: border-box !important;} .clear {clear: both;} img {border: 0;max-width:100%;} 
html {font-size: 16px; overflow-x: hidden;}
@media screen and (max-width: 768px) {html {font-size: 14px;}}
@media screen and (max-width: 575px) {html {font-size: 18px;}}
body {font-family: 'Roboto', sans-serif; margin: 0; padding: 0; background-color: #fff; color: #111; font-size: 1.0rem; overflow-x: hidden;}
.z-100 {z-index: 100;} .z-200 {z-index: 200;} .z-300 {z-index: 300;} .z-400 {z-index: 400;} .z-500 {z-index: 500;} .z-600 {z-index: 600;} .z-700 {z-index: 700;} .z-800 {z-index: 800;} .z-900 {z-index: 900;}

.mynewbox {padding: 10px;}


/*===================== 
		VIDEO
=======================*/
.myvid1 > * > html > body > .media-container > .media-element > #VidControl{background-image: url("../siteart/about-bg-1.jpg"); }

.banner-flex1 > .vidwrap {width: 40% !important; overflow: hidden; max-height: 400px; margin-top: 8px;}

@media screen and (max-width: 1000px) { 
.banner-flex1 > .vidwrap {width: 75% !important; overflow: hidden; max-height: 400px;}
}

@media screen and (max-width: 800px) { 
.banner-flex1 > .vidwrap {width: 100% !important; overflow: hidden; max-height: 400px;}
}




 /* Layout for this demo */
.vidwrap{
  position: relative;
  max-width: 1500px;
  width: 100%;
  margin: auto;
}

 /* The outer-div to move the elements */
.box-video{
  position: relative;
  width: 100%;
  margin:0 auto 20px auto;
  cursor: pointer;
  overflow: hidden;
}

 /* Set Cover aka Background-Image */
.box-video .bg-video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 2;
}

 /* Add light shade to make play button visible*/
.bg-video::after{ 
	content:'';
	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	background-color: rgba(0,0,0,0.1);
  	z-index: 3;
  	}


/* The Play-Button using CSS-Only */
.box-video .bt-play {
  position: absolute;
  top:50%;
  left:50%;
  margin:-30px 0 0 -30px;
  display: inline-block;
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.1);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  text-indent: -999em;
  cursor: pointer;
  z-index:2;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

/* The Play-Triangle */
.box-video .bt-play:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  height: 0;
  width: 0;
  margin: -12px 0 0 -6px;
  border: solid transparent;
  border-left-color: #000;
  border-width: 12px 20px;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.box-video:hover .bt-play {
  transform: scale(1.1);
}

/* When Class added the Cover gets hidden... */
.box-video.open .bg-video{
  visibility: hidden;
  opacity: 0;

  -webkit-transition: all .6s .8s;
  transition: all .6s .8s;  
}

/* and iframe shows up */
.box-video.open .video-container{
  opacity: 1;
  -webkit-transition: all .6s .8s;
  transition: all .6s .8s;
}

/* Giving the div ratio of 16:9 with padding */
.video-container {
	position: relative;
	width: 100%;
	height: 0;
  margin: 0;
  z-index: 1;
	padding-bottom: 56.27198%;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}




/*============================================================================================== 
  Inv
===============================================================================================*/
.list-content .list-main-section .list-container .list-listing .listing-top-right .view-listing-details-link {
	background-color: #A00000 !important;
}

.view-listing-details-link {
	background-color: #A00000 !important;
}

.list-content .list-listing-mobile .email-seller-link {
	height: auto !important;
}

.list-content .list-listing-mobile .dealer-phone-container .dealer-phone-call {
	border: 1px solid #A00000 !important;
	color: #A00000 !important;
}

.body-content {
	font-family: 'Montserrat', sans-serif !important;
}

.listing-top-right {
	font-family: 'Montserrat', sans-serif !important;
}

.listing-top-right .listing-dealer-info {
    font-family: 'Montserrat', sans-serif !important;
}

.list-content .list-main-section .list-container .list-listing .listing-top-right .listing-dealer-info>* {
    margin-bottom: 5px;
	font-family: 'Montserrat', sans-serif !important;
}

.listing-portion-title {
	font-family: 'Montserrat', sans-serif !important;
	color: #A00000 !important;
}

.list-title-text {
	font-family: 'Montserrat', sans-serif !important;
	color: #A00000 !important;

}

.list-top-section {
	margin-top: 50px !important;
}

.list-page-nav {
	background-color: #A00000 !important;
}

.list-page-number {color: #A00000 !important;}

.contact-options a {background-color: #A00000 !important; color: white !important;}

.ui-selectmenu-button {
	color: #A00000 !important;
}

.offer-btn {
	background-color: #A00000 !important;
}

.data-label {
	background-color: #A00000 !important;
}

.detail-content-mobile .detail-contact-bar .contact-bar-btn {
	background-color: #A00000 !important; color: white !important;
}

.dealer-phone-mobile {
	background-color: #A00000 !important;
	border: 0px solid !important;
}

.offer-btn-mobile {
	background-color: #A00000 !important;
	border: 0px solid !important;
}

.fin-calc-btn-mobile { 
background-color: #A00000 !important; color: white !important;
	border: 0px solid !important;
}

.faceted-search-content .faceted-section-box .faceted-option-checkbox-container label input {margin: 5px;}
.show-all-modal .all-options-container .option-container .faceted-option-checkbox-container label input {margin: 5px;}

.send-email-btn-mobile {
	background-color: #A00000 !important;
	border: 0px solid !important;
}

.g-recaptcha {
	background-color: #A00000 !important;
}

.price {
	color: #A00000 !important;
}

.send-email-btn {
	color: #A00000 !important;
    border: 1px solid #A00000 !important;
}

.back-button {
	color: #A00000 !important;
    border: 1px solid #A00000 !important;
}

.fin-calc {
	color: #A00000 !important;
}

.listing-prices__retail-price, .list-top-section .list-listings-count {
	color: #000!important;
}

.mobile-button-done {
	background-color: #A00000 !important;
	margin: auto !important;
}

.video-chat-link {
	height: auto !important;
}

.detail-content {
    margin: 0 auto;
    max-width: 1124px;
    padding-left: 24px;
    padding-top: 30px;
    padding-bottom: 30px;
}

.breadcrumbs {
    font-size: 14px !important;
}

.search-results {
	font-size: 14px !important;
}

.apply-button, .selected-facet {
	background-color: #A00000 !important;
}

/*============================================================================================== 
  Typography
===============================================================================================*/
.roboto {font-family: 'Roboto', sans-serif; font-weight: 400;}
.montserrat {font-family: 'Montserrat', sans-serif; font-weight: 400;}

.light {font-weight: 300;}
.semi-bold {font-weight: 500;}
.bold {font-weight: 700;}
.italic {font-style: italic;}

.white {color: #fff;}
.grey {color: #666;}
.light-grey {color: #999;}
.red {color: #A00000;}

h1.extralarge {font-size: 4em;}

.text-shadow {text-shadow: 2px 2px 2px rgba(0,0,0,0.6);}
.text-capitalize {text-transform: uppercase !important;}
.underline {text-decoration: underline;}

h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat'; font-weight: 700;}
h1 {font-size: 2.4rem;} h2 {font-size: 2.0rem;} h3 {font-size: 1.7rem;} h4 {font-size: 1.4rem;} h5 {font-size: 1.2rem;} h6 {font-size: 0.8rem;}

.container.cf h1 {font-size: 2.2rem !important; font-family: 'Montserrat',sans-serif !important; font-weight: 700 !important; line-height: 2.6rem !important;}
.container.cf h2 {font-size: 1.8rem !important; font-family: 'Montserrat',sans-serif !important; font-weight: 700 !important; line-height: 2.2rem !important;}
.container.cf h3 {font-size: 1.5rem !important; font-family: 'Montserrat',sans-serif !important; font-weight: 700 !important; line-height: 1.9rem !important;}
.container.cf h4 {font-size: 1.2rem !important; font-family: 'Montserrat',sans-serif !important; font-weight: 700 !important; line-height: 1.6rem !important;}
.container.cf h5 {font-size: 1.0rem !important; font-family: 'Montserrat',sans-serif !important; font-weight: 700 !important; line-height: 1.4rem !important;}
.container.cf h6 {font-size: 0.6rem !important; font-family: 'Montserrat',sans-serif !important; font-weight: 700 !important; line-height: 1.0rem !important;}

.home-h1 {font-size: 25px; text-transform: uppercase; color: #fff;}

.large {font-size: 1.3rem;} .medium {font-size: 1.2rem;} .small {font-size: 0.8rem;}

.notep {font-family: 'Montserrat'; font-size: 15px; padding-left: 25px; padding-right: 25px;}

@media screen and (min-width: 1400px) {
    .medium-xl {font-size: 1.1rem !important;}
    .large-xl {font-size: 1.3rem !important;}
}

@media screen and (min-width: 992px) {
	.text-right-lg {text-align: right !important;} .text-left-lg {text-align: left !important;} .text-center-lg {text-align: center !important;}
}

@media screen and (min-width: 768px) {
	.text-right-md {text-align: right !important;} .text-left-md {text-align: left !important;} .text-center-md {text-align: center !important;}
	nav .nav-item {padding: 0 0.4rem!important;}
}

@media screen and (min-width: 575px) {
	.text-right-sm {text-align: right !important;} .text-left-sm {text-align: left !important;} .text-center-sm {text-align: center !important;}
}

/*==============================================================================================
  Borders, Backgrounds, Shadows
==============================================================================================*/
.white-bg {background-color: white;}
.black-bg {background-color: black;}
.red-bg {background-color: #A00000;}
.cubes-bg {background: url('/siteart/subtle-patterns/cubes-bg.jpg') repeat;}

.drop-shadow {box-shadow: 1px 1px 2px 3px rgba(0,0,0,0.2);}

hr.thick {border-width: 5px;}
hr.small {max-width: 80px;}
hr.white {border-color: white;}
hr.red {border-color: #A00000;}

/*==============================================================================================
  Link Styles
==============================================================================================*/
a {text-decoration: none; color: #A00000;}
a:hover  {color: #333;}
a.white, .white a {color: #fff !important;}
a.dark, .dark a {color: #333 !important;}

/*==============================================================================================
  Header Styles
==============================================================================================*/
/* Shrink the hamburger icon a little on mobile */
.navbar-toggler {padding: 0.2rem !important; background-color: transparent !important; border: 1px solid !important;}
.navbar-toggler-icon {width: 3rem !important; height: 3rem !important;}
/* Edit Nav Items */
nav .nav-item {padding: 0 0.8rem; text-transform: uppercase; font-family: 'Roboto', sans-serif; font-size: 1rem;}
nav .nav-item > .nav-link {padding: 0 0;}
/* Edit Active Nav */
nav .nav-item.active > a {}
/* Edit Subnav */
a.dropdown-item { text-transform: capitalize !important;}

@media screen and (max-width: 992px) {
    nav {width: 100%;}
    nav .nav-item {
        padding: 15px 0.8rem 15px 2.0rem;
    }
}

@media screen and (max-width: 768px) {
	.quicksearch {padding-bottom: 7px;}
}

/*==============================================================================================
  Carousel Styles
==============================================================================================*/
/* Fixes issue with transition in Firefox */
.carousel-item {transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; -webkit-backface-visibility: visible; backface-visibility: visible;}

/*==============================================================================================
  COVID Styles
==============================================================================================*/
.covid {background-color:#ee1328!important;padding:15px 25px;}
.covid-p {color:#fff;}
.covid-link {color:#fff; font-weight:700;}
.covid-link:hover {color:#fff;text-decoration:underline;}

/*==============================================================================================
  Scrolling Inv Styles
==============================================================================================*/
.scrolling-wrap {width:100%; height:90px; overflow:hidden;}
.scrolling {width:100%; height:92px;}

/*==============================================================================================
  Footer Styles
==============================================================================================*/


.navbar-dark .navbar-nav .nav-link {
    color: white !important;
    font-weight: 700;
}