/*====================================== 
		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;}


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

			Inventory

=======================================*/
.search-wrapper{max-width:1200px; margin:0 auto; padding:10px; display:none; box-sizing:border-box;}
.search-row{display:flex; flex-direction:row; justify-content: flex-start;}
.search-row input{width:calc(100% - 180px); padding:10px!important; height:50px!important;}
.search-row button{width:180px; color:#fff; text-align:center; border:none; background:#000; padding:10px; border-radius:5px;}


.body-wrapper>div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .buy-now-link,
.body-wrapper>div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .check-availability-link,
.body-wrapper>div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .email-seller-link,
.body-wrapper>div:not(.detail-wrapper) .faceted-section-box .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .apply-button,
.body-wrapper>div:not(.detail-wrapper) .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .apply-button,
.body-wrapper>div:not(.detail-wrapper) button.page-nav {
    background: #f6971a !important;
    color: #000 !important;
}

.body-wrapper>div:not(.detail-wrapper) .view-listing-details-link,
.body-wrapper>div:not(.detail-wrapper) .contact-options a,
.body-wrapper>div:not(.detail-wrapper) .fin-calc-mobile>a,
.body-wrapper>div:not(.detail-wrapper) button.g-recaptcha.button,
.body-wrapper>div:not(.detail-wrapper) .show-all-modal .apply-button,
.body-wrapper>div:not(.detail-wrapper) .show-all-modal .nuf-button,
.body-wrapper>div:not(.detail-wrapper) .list-error-container .info button,
.body-wrapper>div:not(.detail-wrapper) .mobile-done-button-container .mobile-done-button,
.body-wrapper>div:not(.detail-wrapper) a.buy-btn.gtm-buynow.des-buy-now,
.body-wrapper>div:not(.detail-wrapper) a.buy-btn.des-buy-now,
.body-wrapper>div:not(.detail-wrapper) button.selected-facet.ts-button,
.body-wrapper>div:not(.detail-wrapper) .detail-contact-bar .contact-bar-btn {
    background: #f6971a !important;
    color: #fff !important;
}

.body-wrapper>div:not(.detail-wrapper) .view-listing-details-link:hover,
.body-wrapper>div:not(.detail-wrapper) .contact-options a:hover,
.body-wrapper>div:not(.detail-wrapper) .fin-calc-mobile>a:hover,
.body-wrapper>div:not(.detail-wrapper) button.g-recaptcha.button:hover,
.body-wrapper>div:not(.detail-wrapper) .email-seller-link:hover,
.body-wrapper>div:not(.detail-wrapper) .mc-nav-controls .mc-icon-navarrow span,
.body-wrapper>div:not(.detail-wrapper) a.buy-btn.gtm-buynow.des-buy-now:hover,
.body-wrapper>div:not(.detail-wrapper) a.buy-btn.des-buy-now:hover,
.body-wrapper>div:not(.detail-wrapper) .detail-contact-bar .contact-bar-btn:hover {
    color: #333 !important;
    /*----Border----*/
}

.body-wrapper>div:not(.detail-wrapper) .faceted-section-box .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .back-button,
.body-wrapper>div:not(.detail-wrapper) .show-all-modal .show-all-modal-content-container .show-all-modal-content .title-close-row .back-button,
.body-wrapper>div:not(.detail-wrapper) .show-all-modal .back-button,
.body-wrapper>div:not(.detail-wrapper) .parts-listing-container .mobile-parts-detail-container .dealer-phone-container a {
    color: #000 !important;
    border: 1px solid #000 !important;
    /*-----------------------OTHER TEXT STYLES-----------------------*/
    /*----Page Title----*/
}

.body-wrapper>div:not(.detail-wrapper) .list-title .list-title-text,
.body-wrapper>div:not(.detail-wrapper) .parts-top-section .parts-title-and-breadcrumbs .parts-title .parts-title-text span,
.body-wrapper>div:not(.detail-wrapper) .title-media-buttons-heading h1 {
    color: #000 !important;
    line-height: 28px !important;
}

.body-wrapper>div:not(.detail-wrapper) .list-main-section .list-container .list-listing .listing-top-right .listing-dealer-info .dealer-name,
.body-wrapper>div:not(.detail-wrapper) .list-main-section .list-container .fin-calc,
.body-wrapper>div:not(.detail-wrapper) .list-listing-mobile .listing-dealer-info .spec-value,
.body-wrapper>div:not(.detail-wrapper) .fin-calc,
.body-wrapper>div:not(.detail-wrapper) .fin-calc p,
.body-wrapper>div:not(.detail-wrapper) .list-main-section .list-container .list-error .info,
.body-wrapper>div:not(.detail-wrapper) .parts-bottom-section .parts-list-view .parts-list-content .error-message,
.body-wrapper>div:not(.detail-wrapper) .info,
.body-wrapper>div:not(.detail-wrapper) .list-title .list-listings-count,
.body-wrapper>div:not(.detail-wrapper) .parts-top-section .parts-title-and-breadcrumbs .parts-title .parts-listings-count,
.body-wrapper>div:not(.detail-wrapper) .list-top-section .listing-option-bar .list-listings-count,
.body-wrapper>div:not(.detail-wrapper) span.part-list-price.bold,
.body-wrapper>div:not(.detail-wrapper) .dealer-company-header,
.body-wrapper>div:not(.detail-wrapper) .dealer-info h3,
.body-wrapper>div:not(.detail-wrapper) .listing-description-text,
.body-wrapper>div:not(.detail-wrapper) .paging-container .list-page-number,
.body-wrapper>div:not(.detail-wrapper) .paging-container .page-number,
.body-wrapper>div:not(.detail-wrapper) .listing-main-stats .price,
.body-wrapper>div:not(.detail-wrapper) .list-container-flexrow .price-container .price,
.body-wrapper>div:not(.detail-wrapper) h2.listing-portion-title,
.body-wrapper>div:not(.detail-wrapper) .list-listing-mobile .price-container .price,
.body-wrapper>div:not(.detail-wrapper) .compare-listings-container .compare-container .comp-header-img .comp-title-close-cont .compare-title,
.body-wrapper>div:not(.detail-wrapper) .compare-listings-container .compare-container .compare-price,
.body-wrapper>div:not(.detail-wrapper) .rent-title,
.body-wrapper>div:not(.detail-wrapper) .rent-title-details,
.body-wrapper>div:not(.detail-wrapper) span.list-title-text,
.body-wrapper>div:not(.detail-wrapper) a.search-results-link,
.body-wrapper>div:not(.detail-wrapper) h3.listing-portion-title {
    color: #000 !important;
}

.body-wrapper>div:not(.detail-wrapper) .mobile-option-bar .mobile-option-bar-filter,
.body-wrapper>div:not(.detail-wrapper) span.listing-prices__retail-price,
.body-wrapper>div:not(.detail-wrapper) span.parts-listings-count {
    color: #000 !important;
    /*-----------------------MEDIA QUERIES-----------------------*/
}
/*====================================== 

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

html {font-size: 16px;}

.white {color: #fff;}
.grey {color: #666;}
.light-grey {color: #999;}
.orange {color: #F6971A;}

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: 1.5rem !important; font-family: 'Roboto',sans-serif !important; font-weight: 700 !important; line-height: 2.0rem !important;}
.container.cf h2 {font-size: 1.2rem !important; font-family: 'Roboto',sans-serif !important; font-weight: 700 !important; line-height: 1.5rem !important;}
.container.cf h3 {font-size: 1.0rem !important; font-family: 'Roboto',sans-serif !important; font-weight: 700 !important; line-height: 1.2rem !important;}
.container.cf h4 {font-size: 0.9rem !important; font-family: 'Roboto',sans-serif !important; font-weight: 700 !important; line-height: 1.0rem !important;}
.container.cf h5 {font-size: 0.8rem !important; font-family: 'Roboto',sans-serif !important; font-weight: 700 !important; line-height: 1.0rem !important;}
.container.cf h6 {font-size: 0.6rem !important; font-family: '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;}

.orange-text {color:#f6971a}
@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;}
}





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

			Base Styles

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

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

body {
    font-family: roboto, sans-serif;
    margin: 0;
	padding:0;
    background: url(../siteart/page-bg.jpg) center center !important;
    background-attachment: fixed !important;
    background-size: cover !important;
	color: #111;
	font-size: 1.0rem;
	overflow-x: hidden;
}

body#x-broom-body {
    background: url(../siteart/x-broom-page-bg.jpg) center center !important;
    background-attachment: fixed !important;
    background-size: cover !important;
	overflow-x: hidden;

}
body#vacall-body {
    background: url(../siteart/vacall/VACALL_KEWEBSITE_COVER_PIC.jpg) center center!important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	background-size:  cover!important;
	overflow-x: hidden;

}
body#aries-body {
    background: url("../siteart/aries-pipeline/Aries-page-background-pic.png") top center!important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	background-size:  contain!important;
	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;}

@media screen and (min-width: 992px) { .position-lg-absolute {position: absolute !important;} }


.ql {display: inline-block; width: 24.4%;margin:0 auto; margin:10px 5px;}
.orange-bg {padding:10px 10px;}
.ql img#new { width: 23%; text-align: center; margin: 0 auto;}
.ql img#used { width: 23%;text-align: center; margin: 0 auto;}
.ql img#vacall {width: 23%; text-align: center; margin: 0 auto;}
.ql img#x-broom {width: 23%; text-align: center; margin:0 auto;}
.ql img#service {width: 23%; text-align: center; margin: 0 auto;}
.ql img#rentals {width: 23%; text-align: center; margin: 0 auto;}
.ql img#boats {width: 23%; text-align: center; margin: 0 auto;}

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

	Borders, Backgrounds, Shadows

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

.dark-bg {background-color: #333;}
.white-bg {background-color: white;}
.orange-bg {background-color: #F6971A;}

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

hr.thick {border-width: 5px;}
hr.white {border-color: white;}
hr.orange {border-color: #F6971A;}


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

			Link Styles

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

a {text-decoration: none; color: #333;}
a:hover  {color: #666;}
a.white {color: #fff;}
.white a {color: #fff;}
a.dark {color: #333}
a.hov-under:hover {text-decoration: underline;}

/* Home Fade Img Links */
.fade-img-link {background-color: #111;}
.fade-img-link > img {opacity: 0.3; transition: 0.3s;}
a:hover > .fade-img-link > img {opacity: 0.9;}





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

			Header Styles

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

header{
	width:100%;
	display: block;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), 30%, rgba(0,0,0,0));
}
.header-hp {width: 100%;}
.header-hp {width: 100%;}
.mobile-header-hp {display: none;}
.logo {width: 30%; margin:15px 0 0 25px; float: left;}
#header-right { float: right;}
#header-right .phone, #header-right .address {display: inline-block; color:#F6971A; padding:15px 15px;}
#header-right .phone a, #header-right .address a { color:#fff; font-weight: bold; letter-spacing: 1px;}

/* 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.6rem; text-transform: none; font-family: 'Roboto', sans-serif; font-weight: 400;}
nav .nav-item > .nav-link {padding: 0 0;}
/* Edit Active Nav */
nav .nav-item.active {font-weight: 800;}
@media screen and (max-width: 1650px) {	
	nav .nav-item {padding: 0 5px ;}
}
@media screen and (max-width: 1550px) {	
	nav .nav-item {padding: 0 ;}
}
@media screen and (max-width: 1420px) {	
	.mobile-header-hp {	
	width:100%;
	display: block;
    z-index: 100;
    background: #212121;
	}
	.header-hp {display: none;}
	.header-mobile-orange {background: #F6971A; width: 100%; padding:10px 0;display: inline-block; margin: 0 auto; text-align: center;}
	.address, .phone {display: inline-block; text-align: center; margin: 0 auto; color:#fff; padding:0 25px; font-size:14px;}
	.address a, .phone a {color:#fff;}
	.logo-mobile {text-align: center; margin: 0 auto;}
	.logo-mobile img{text-align: center; margin: 0 auto;}
	.navbar-light .navbar-toggler {width: 100% !important}
}
@media screen and (max-width: 575px) {nav .nav-item {padding:0.8rem;}}







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

			Carousel Styles

======================================*/
.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;
}





/* VACALL PAGE */
.white-bg2 {width: 100%; padding: 10px 2%; margin: 0 auto; display: inline-block; background: #fff; margin-bottom: 2%;}
.flex-center {display: flex; flex-direction: row; align-items: center}
.bro-title {width: 40%; text-align: left;}
.flex-bro {display: flex; flex-direction: row; justify-content: flex-end; align-items: center; width: 60%;}

.flex-bro .bro {width: 24%; margin: 1% .5%;}
.flex-bro .bro:hover {opacity: .8;}
.flex-bro a img {width: 100%;}

.img-left {width: 45%; margin-right: 2%;}
.content-right {width: 52%;}

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

		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: lightgray;
  content: attr(placeholder);
}

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

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

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

form#contact-form input[type="checkbox"]:checked {
	border: 1px solid #aaa;
	background-color: #FF7F00;
	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;
}

/* One line Captcha */
.CaptchaPanel {
	margin:0 0 0 0 !important;
	padding:0 0 0 0 !important;
	text-align: center;
	line-height:normal !important;
}

.CaptchaImagePanel {
	margin:0 0 0 0;
	padding:0 0 0 0;
	width: 50%;
	display: inline-block;
	float: left;
}

.CaptchaMessagePanel {
	padding:0 0 0 0 !important;
	margin:0 0 0 0 !important;
	font-weight:normal !important;
	font-size:11px;
	line-height:13px;
	width: 50%;
	display: inline-block;
	float: left;
}

.CaptchaAnswerPanel {
	margin:0 0 0 0;
	padding:2px 0px 2px 0px !important;
}

.CaptchaWhatsThisPanel {
	line-height:0;
	margin:0 0 0 0;
	padding:8px 0 8px 0 !important;
}

.CaptchaWhatsThisPanel a {color:#000;}
.CaptchaWhatsThisPanel a:hover {text-decoration:none;} 
#CaptchaImage {margin-top: 10px !important;}
#CaptchaAnswer {width: 40% !important;}






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

		Scrolling Inv Styles

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






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

			Footer Styles

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






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

		  Responsive Styles

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

@media screen and (max-width: 1700px) {
	.ql {width: 24.1%;}
		.img-left img {width: 100%;}

}
@media screen and (max-width: 1330px) {
	.container.cf h1 {font-size: 1.4rem !important;}
}
@media screen and (max-width: 1150px) {
	.ql {width: 24%;}
}
@media screen and (max-width: 1050px) {
	.ql {width: 23.5%;}
	.search-wrapper{display:block;}
}

/*===== Bootstrap col-lg breakpoint =====*/
@media screen and (max-width: 992px) {
	html {font-size: 16px;}
	.flex-center {display: block;}
	.bro-title, .flex-bro, .img-left, .content-right {width: 100%;}
	.img-left {padding: 10px 0;}
}

@media screen and (max-width: 800px) {
	html {font-size: 14px;}	
	.ql {width: 48%;}
	.ql img#new, .ql img#used, .ql img#service, .ql img#rentals, .ql img#x-broom, .ql img#vacall {width: 47%; text-align: center; margin: o auto;}
	.ql#spacer {display: none;}
}

/*===== Bootstrap col-md breakpoint =====*/
@media screen and (max-width: 768px) {
	html {font-size: 18px;}	
	.flex-bro {flex-wrap: wrap}
	.flex-bro .bro {width: 48%; margin: 1% 1%;}
}

@media screen and (max-width: 670px) {
.search-row input{width:calc(100% - 120px); padding:6px!important; height:35px!important; font-size:12px;}
.search-row button{width:120px; color:#fff; font-size:12px; text-align:center; border:none; background:#000; padding:6px; border-radius:5px;}

}

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

.ql img#new, .ql img#used, .ql img#service, .ql img#rentals,  .ql img#x-broom, .ql img#vacall {width: 100%; text-align: center; margin: o auto;}

	
}

@media only screen and (max-width: 480px) {
	
}

@media screen and (max-width: 447px){
	
}

@media screen and (max-width: 414px){
	
}