/*====================================== 
		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 *smh* */
.container.cf .widgets svg[class*="fa"], .container.cf .widgets-details svg[class*="fa"] {display: none !important;}




	
/*====================================== 

			Typography

=======================================*/

.roboto {font-family: 'Roboto'; font-weight: 400;}
.roboto-bold {font-family: 'Roboto'; font-weight: 700;}
.roboto-bold-italic {font-family: 'Roboto'; font-weight: 700; font-style: italic;}
.roboto-italic {font-family: 'Roboto'; font-weight: 400; font-style: italic;}
.roboto-light {font-family: 'Roboto'; font-weight: 300;}

.oswald {font-family: 'Oswald', sans-serif; font-weight: 400;}
.oswald-light {font-family: 'Oswald', sans-serif; font-weight: 300;}
.oswald-bold {font-family: 'Oswald', sans-serif; font-weight: 700;}
.oswald-bold-italic {font-family: 'Oswald', sans-serif; font-weight: 700; font-style: italic;}

html {font-size: 16px;}

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

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 {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: 'Oswald','Roboto',sans-serif !important; font-weight: 700 !important; line-height: 2.6rem !important;}
.container.cf h2 {font-size: 1.8rem !important; font-family: 'Oswald','Roboto',sans-serif !important; font-weight: 700 !important; line-height: 2.2rem !important;}
.container.cf h3 {font-size: 1.5rem !important; font-family: 'Oswald','Roboto',sans-serif !important; font-weight: 700 !important; line-height: 1.9rem !important;}
.container.cf h4 {font-size: 1.2rem !important; font-family: 'Oswald','Roboto',sans-serif !important; font-weight: 700 !important; line-height: 1.6rem !important;}
.container.cf h5 {font-size: 1.0rem !important; font-family: 'Oswald','Roboto',sans-serif !important; font-weight: 700 !important; line-height: 1.4rem !important;}
.container.cf h6 {font-size: 0.6rem !important; font-family: 'Oswald','Roboto',sans-serif !important; font-weight: 700 !important; line-height: 1.0rem !important;}

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

.header-logos{
	max-width: 480px;
}


.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}


.category-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1600px;
  margin: 0 auto;
}


.category-item{
  position: relative;
  display: block;       
  border-radius: 4px;
  overflow: hidden;        
  aspect-ratio: 4 / 3;    
  text-decoration: none;
  color: inherit;
}


.category-item img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease; /* smooth scale */
  will-change: transform;
}


.category-button{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 64px;
  padding: 12px 16px;
  text-align: center;
  text-transform: uppercase;
  background: rgba(0,0,0,0.8);
  color: #fff;
  transition: background-color .25s ease, color .25s ease;
}


.category-button i{
  margin-left: .4rem;
  transition: transform .25s ease;
}


.category-item:hover img{
  transform: scale(1.05);           
}
.category-item:hover .category-button{
  background: #DD1935;
  color: #fff;
}
.category-item:hover .category-button i{
  transform: translateX(4px);
}

.category-item:focus-visible{
  outline: 2px solid #2f2f2f;
  outline-offset: 2px;
}
.category-item:focus-visible img{
  transform: scale(1.05);
}
.category-item:focus-visible .category-button{
  background: ##DD1935;
  color: #fff;
}
.category-item:focus-visible .category-button i{
  transform: translateX(4px);
}

@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;}
}

@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;}
}

/*====================================== 

			Kubota Slideshow Styles

========================================*/


.w3-content-w3-section {
    margin: auto;
}


/*====================================== 

			Base Styles

========================================*/
* {box-sizing: border-box !important;}

.clear {clear: both;}
img {border: 0;max-width:100%;} 

body {
    font-family: 'Oswald', sans-serif;
    margin: 0;
	padding:0;
	background-color: #fff;
	color: #111;
	font-size: 1.0rem;
}

.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;}




/*====================================== 

	Borders, Backgrounds, Shadows

========================================*/
.lines-bg {background: url(../siteart/subtle-patterns/lines-bg.png) repeat;}

.white-bg {background-color: white;}
.grey-bg {background-color: #333;}
.red-bg {background-color: #DD1935;}

hr.thick {border-width: 5px;}
hr.white {border-color: white;}
hr.red {border-color: #DD1935;}


/*====================================== 

			Link Styles

=======================================*/

a {text-decoration: none; color: #222;}
a:hover  {color: #666; text-decoration: none;}
a.white {color: #fff;}
.white a {color: #fff;}
a.dark {color: #333}
a.hov-under:hover {text-decoration: underline;}
a.hov-nudge:hover {margin-left: 10px; transition: 0.3s;}





/*======================================

			Header Styles

=======================================*/

header{width:100%; display: block;}

/* Shrink the hamburger icon a little on mobile */
.navbar-toggler {padding: 0.2rem;}
.navbar-toggler-icon {width: 1.2rem; height: 1.2rem;}
/* Edit Nav Items */
nav .nav-item {padding: 0 0.15rem; text-transform: uppercase; font-family: 'Oswald', sans-serif; font-weight: 400;}
nav .nav-item > .nav-link {padding: 0 0;}
/* Edit Active Nav */
nav .nav-item.active {}
nav .dropdown-menu > a {text-transform: none !important;}

.nav-text.align-self-center {max-width:480px;}
.nav-text .container-fluid .col-auto {margin:0 auto;}
header .nav-text img {display:inline-block;}


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

@media screen and (max-width: 1200px) {
    nav .nav-item {padding: .4rem 0.1rem; font-size: 1.0rem;}
	.category-grid{grid-template-columns: repeat(3, 1fr);}
}

@media screen and (max-width: 1000px){
	.category-grid{grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 600px){
	.category-grid{grid-template-columns: repeat(1, 1fr);}
}

@media screen and (min-width: 1365px) {
    nav .nav-item {font-size: 0.9rem;}
}

@media screen and (min-width: 1550px) {
    nav .nav-item {padding: 0 0.4rem; font-size: 0.9rem;}
}

@media screen and (min-width: 1670px) {
    nav .nav-item {padding: 0 1.0rem; font-size: 1.2rem;}
}

@media screen and (max-width: 1370px) {
    .nav-text.align-self-center {max-width:220px;}
}


/*======================================

			Carousel Styles

======================================*/
.financingbanner  {
	width:100%;
    background: #000;
    text-align: center; 
    margin: 0 auto;
    padding: 10px 0;

}
.financingbanner img {
	width:96%;
    max-width: 1500px;
}

.carousel-card {
	position: absolute; 
	bottom: 10px; 
	left: 10%;
	width: 50%;
}

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







/*======================================

		Inventory Buttons Styles

======================================*/
#buttons-row {margin-top: -10%;}
#buttons-row > div {border: 5px solid white;}
#buttons-row a:hover > h3 {font-size: 2.0rem;}

/* Showrooms */
.img-link-tile > a > p {
    
    background-color: rgba(0,0,0,0.8);
    width: calc(100% - 1.825rem);
    transition: 0.3s;
}

.img-link-tile > a:hover > p {background-color: rgba(221,25,53,0.8);}







/*======================================

		Contact Form Styles

======================================*/

form#contact-form input, form#contact-form textarea, form#contact-form select, form#contact-form input#CaptchaAnswer {
	width: 100%;
	padding: 5px 10px;
	margin: 6px 0;
	border: 1px solid #ddd;
	border-radius: 0;
}

form#contact-form select {color: #6f6f6f;}

input[type="date"]:not(.has-value):before{
  color: #777;
  content: attr(placeholder);
}

input[type="date"] {color: #777;}

form#contact-form textarea {height: 150px;}

form#contact-form input, form#contact-form textarea {-webkit-appearance: none;}

form#contact-form input[type="checkbox"], form#contact-form input[type="radio"] {
	width: 15px;
	height: 18px;
	border: 1px solid #aaa;
	border-radius: 0;
	background-color: white;
	outline-color: rgba(255,127,0,0.7);
	padding: 0;    
    margin-bottom: -1px;
    margin-top: 10px;
}

form#contact-form input[type="checkbox"]:hover, form#contact-form input[type="radio"]:hover {cursor: pointer;}

form#contact-form input[type="checkbox"]:checked, form#contact-form input[type="radio"]:checked {
	border: 1px solid #aaa;
	background-color: #DD1935;
	box-shadow: inset -1px -1px 1px 0px #fff, inset 1px 1px 1px 0px #fff;
}

form#contact-form input:focus, form#contact-form textarea:focus {border: 1px solid #bbb;}


/*===================== 
	Inventory styles 
=======================*/

.body-content .body-wrapper {padding:2% 0;}
.list-content .list-title .list-title-text {
    font-size: 1em !important;
}
.list-content h2.listing-portion-title {
    font-size: 1em !important;
}
.list-content h3.dealer-name{font-size: 1em !important;}

/*----View Details Button----*/
.view-listing-details-link {background:#DD1935 !important; color: #fff !important;}
.view-listing-details-link:hover {background:#000 !important; color: #fff !important;}

/*----Price----*/
.listing-main-stats .price {color:#000 !important;}

/*------- Faceted Search------*/
.faceted-search-content .selected-facets-container .selected-facet{background: #DD1935 !important; color:#fff !important;}

/*----Make an Offer Button----*/
.main-detail-data .offer-btn {background:#DD1935 !important; color:#fff !important;}
.main-detail-data .offer-btn:hover {background:#000 !important; color:#fff !important;}

/*----Details Price----*/
.detail-price {color:red!important;}
.detail-content .detail-main-body .main-detail-data .details-fin-calc .detail-btn-calc{padding: 10px !important;}

/*----Breadcrumb - Search Results button----*/
.detail-content .search-results {color:red !important;}

.detail-content-mobile .detail-additional-data .data-row .data-label{
	background:#000 !important; color:#fff !important;
}

/*----Specs----*/
.detail-content .data-row .data-label {background:#000 !important; color:#fff !important;}

.detail-content-mobile .detail-main-body .main-detail-data .send-email-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .offer-btn-mobile, .detail-content-mobile .detail-main-body .main-detail-data .dealer-phone-mobile-container .dealer-phone-mobile, .detail-content-mobile .detail-main-body .main-detail-data .fin-calc-btn-mobile{
	background:#000 !important; 
	color:#fff !important;
}

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

.contact-options a {background:#000 !important; color:#fff !important;}

/* ---- Parts ----- */
.parts-listing-container .parts-button{background: #DD1935 !important; color:#fff !important;}
.parts-listing-container .parts-button:hover{background:#000 !important; color:#fff !important}
	
#part-detail-content .part-detail-additional-data .data-row .data-label{background:#000 !important; color:#fff !important;}

/*------------------------------Compare Page---------------------------------*/
.cs-btns a{
	background:#000 !important; color:#fff !important;
}
.cs-btns a:hover{
	background:#DD1935 !important; color:#fff !important;
}




/*======================================

		Scrolling Inv Styles

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




/*======================================

		  Responsive Styles

======================================*/


/*===== Bootstrap col-lg breakpoint =====*/
@media screen and (max-width: 992px) {html {font-size: 16px;}}

@media screen and (max-width: 800px) {html {font-size: 14px;}}

/*===== Bootstrap col-md breakpoint =====*/
@media screen and (max-width: 768px) {html {font-size: 18px;}}


/*===== Bootstrap col-sm breakpoint =====*/
@media screen and (max-width: 575px) {
	
}