@import "/assets/fonts/mazdatype/fonts.css";
@import "/assets/fonts/mazdaicons/fonts.css";
/*------------------------------------*

    TABLE OF CONTENT - $ search prefix

	CUSTOM_PROPERTIES
    FONT_FAMILY
    FONT_COLOR
    FONT_SIZE
    BACKGROUND COLORS
    LAYOUT
    ANCHOR
    LIST GROUP
    PANEL
    WELL
    TABLE
    TABS
    NAV RESET
    NAVTABS
    NAV-INVERSE
    PAGINATION
    BTN
    BTN_CTA
    BTN_MAIN
    BTN_ALT1
    BTN_ALT2
    BTN_ALT3
    BTN_NAV1 AND BTN_NAV2
    HOME_MISC
    HOME_QUICK-NAV
    HOME_INVENTORY SEARCH BUTTONS
    WIDGET_INVENTORY SEARCH
    WIDGET_BANNER
    WIDGET_MODELBAR
	VDP_EDITS
    FIXED_HEADER
    MOBILE LEAD DRIVER

    cta            #737373
    cta hover      #2b2b2b
    main            101010
    main hover     #737373

    OVERRIDES

/*------------------------------------*
	$CUSTOM_PROPERTIES
\*------------------------------------*/
:root {
	--cta-background-color: #737373;
	--cta-font-color: #fff;
	--cta-hover-color: #2b2b2b;
	--main-color: #2B2B2B;
}

/*------------------------------------*
    $FONT_FAMILY
\*------------------------------------*/
body { font-family: 'MazdaType-Regular'; }
strong, b, .btn { font-family: 'MazdaType-Bold'; }
.heading-xl, .heading-lg, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: 'MazdaType-Medium'; text-transform: uppercase; }
h1, h2, h3, h4, h5, h6 { letter-spacing: .2em; }
p { font-size: 16px; line-height: 28px; }
/*.h1, h1 { font-size: 34px; }
.h2, h2 { font-size: 28px; }
.h5, h5 { font-size: 15px; }*/
.btn { letter-spacing: .2em; }
.btn, #inventorySearchWidget .isTitle, .srpRefineSearch .panel-title, .srpVehicle h2, .srpVehicle h1.vehicleTitle, #vehiclePageViews h2, .featuredVehicle .title h3, strong, b { font-weight: normal !important; }
.vdp__left-column :not(i), .vdp__right-column :not(i), .wasabi_srp * { font-family: 'MazdaType-Regular', sans-serif; }
.wasabi_srp .vehicleTitleInner, .vehicle-details__header .vehicleTitleInner, .srp-results-count, .srp-results .btn { letter-spacing: .1em; }

/* Remove Letter Spacing on New VDP Price */
.h4.vdp-price { letter-spacing: inherit; }

/* Adjust VDP Price Size on Sriracha - DES-46507 */
@media (min-width: 992px){
    .vdp-price-price { font-size: 2.25em !important; }
    .vdp-price-price > sup { left: -5px !important; }
}

/* Fix VDP Modal Close Button - DES-45913 */
.modal-header .close { font-family: Helvetica Neue,Helvetica,Arial,sans-serif; }
.galleria-exit { font-family: Helvetica Neue,Helvetica,Arial,sans-serif; }

/* Service Specials Heading */
.special-offerValue h2 { font-size: 26px !important; }

/* Heading Fix on Manufacturer Incentives Page - DES-46235 */
@media (max-width: 539px) {
#content-main-incentives .header { font-size: 24px; }
}

/* Confirm Availability Button Padding/Letter Spacing Fix - DES-75333 */
.vdp-vehicle-title .ePriceBtn { letter-spacing: 0.5px; padding: 10px 12px; }
@media (min-width: 992px) {
    .vdp-vehicle-title h1.h4 { padding: 0 220px 0 0; }
}

/*------------------------------------*
    $FONT_COLOR
\*------------------------------------*/
hr { border-top-color: #ddd; }
.text-default { color: #333; } /* place default body color here */
.text-main { color: #101010; }
.text-cta { color: #767676; }
.bg-main .text-cta, .bg-main .text-muted { color: #949494; }
.bg-alt1 .text-cta, .bg-alt1 .text-muted, .bg-light .text-cta, .bg-light .text-muted { color: #707070; }
.bg-alt4 .text-cta, .bg-alt4 .text-muted, .bg-dark .text-cta, .bg-dark .text-muted { color: #7f7f7f; }

/*------------------------------------*
    $FONT_SIZE
\*------------------------------------*/

@media (max-width:991px) {
body, .btn, .dropdown-menu, .form-control { font-size: 13px; }
}
/*------------------------------------*
    $BACKGROUND COLORS
\*------------------------------------*/

.bg-main {
    background-color: #2B2B2B;
    border: 1px solid transparent;
    color:#fff;
}
.bg-cta {
    background-color: #737373;
    border: 1px solid transparent;
    color: #fff;
}
.bg-alt1 {
    background-color: #F5F5F5;
    border: 1px solid transparent;
}
.bg-alt2 {
    background-color: #E7E7E7;
    border: 1px solid transparent;
}
.bg-alt3 {
    background-color: #999999;
    border: 1px solid transparent;
	color: #2E2E2E;
}
.bg-alt4 {
    background-color: #101010;
    border: 1px solid transparent;
	color: #fff;
}
.offerBlock {
    background-color: #2B2B2B;
    color: #fff;
}

@media (max-width:767px) {
.snap-content { background-color: #fff !important; }
}
/*------------------------------------*
    $LAYOUT
\*------------------------------------*/

/*.contentWrapper { padding-bottom: 2em; }*/
.contentWrapper .mazda-footer { margin-top: 2em; }
.contentSectionO, .contentSectionE { padding: 45px 0; }

@media (min-width: 992px) {
.bannerLayout01 { padding: 45px 0; }
}
@media (max-width: 991px) and (min-width: 768px) {
.bannerLayout01 { padding: 25px 0 10px; }
}
@media (max-width:991px) {
.contentSectionO, .contentSectionE { padding: 35px 0; }
.bannerWrapper.bannerLayout02 { padding: 0; }
}
@media (max-width:767px) {
.heading-lg {font-size: 32px;}
.contentSectionO, .contentSectionE { padding: 30px 0; }
}
/*------------------------------------*
    $ANCHOR
\*------------------------------------*/
a { color: #707070; }
a:hover, a:focus { color: #2b2b2b; }
.bg-main a:not(.btn) { color: #949494; }
.bg-alt1 a:not(.btn), .bg-light a:not(.btn), .well a:not(.btn), .panel-heading a:not(.btn) { color: #707070; }
.bg-alt4 a:not(.btn), .bg-alt4 .btn-underline, .bg-dark a:not(.btn), footer a:not(.btn) { color: #A2A2A2; }
.bg-alt4 a:hover, .bg-dark a:hover { color: #fff; }
.bg-alt4 .btn-underline:hover::after { background-color: #fff; }
p a, p a:hover, p a:focus { text-decoration: underline; }
/*------------------------------------*
    $LIST GROUP
\*------------------------------------*/

/*------------------------------------*
    $PANEL
\*------------------------------------*/
.panel, .panel-heading, .panel-footer { border-radius: 0; }
.panel { box-shadow: none; }
.panel-title { font-weight: bold; }
/*------------------------------------*
    $WELL
\*------------------------------------*/
.well {
    box-shadow: none;
    border-radius: 0;
}
/*------------------------------------*
    $TABLE
\*------------------------------------*/

/*------------------------------------*
    $TABS
\*------------------------------------*/
.nav-tabs.nav-justified > li > a, .nav-tabs > li > a { background-color: #eee; color: #6B6B6B; }
.nav-tabs.nav-justified > .active > a { border-bottom-color: transparent; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background-color: #fff; }
/* tabs inside well */
.well .nav-tabs.nav-justified > .active > a { background-color: #f5f5f5; }
.well .panel .nav-tabs.nav-justified > .active > a { background-color: #fff; }
/*------------------------------------*
    $NAVTABS
\*------------------------------------*/
.nav-pills li.active a, .nav-pills li.active a:hover, .nav-pills li.active a:focus {
    background-color: #101010;
    border-color: transparent;
    color: #fff;
}
/*------------------------------------*
    $NAV-INVERSE
\*------------------------------------*/

/*------------------------------------*
    $PAGINATION
\*------------------------------------*/
.pagination .active a, .pagination .active span, .pagination .active a:hover, .pagination .active span:hover, .pagination .active a:focus, .pagination .active span:focus {
    background-color: #767676;
    border-color: transparent;
    color: #fff;
}
/*------------------------------------*
    $BTN
\*------------------------------------*/
.btn {
    font-size:13px;
    border-radius: 3px;
    text-transform: uppercase;
    padding: 12px 15px;
    border-width:2px;
    -moz-transition: background-color 200ms linear 0s, color 200ms linear 0s, border-color 200ms linear 0s;
    -webkit-transition: background-color 200ms linear 0s, color 200ms linear 0s, border-color 200ms linear 0s;
    transition: background-color 200ms linear 0s, color 200ms linear 0s, border-color 200ms linear 0s;
}
.srpRefineSearch #accordion ul li a { border-radius: 0; } /* used on srp refine search section - leave in IF you are removing border radius from all buttons */
@media (min-width:768px) {
.btn {padding: 12px 23px;}
.specialBlock .specialContainer .viewVehicleDetails .btn { padding: 12px; }
}

/* Tertiary Button Underline */

.btn-underline {
    position: relative;
    padding: 0 0 6px;
}

.btn-underline::after {
    transition: background-color .3s, border-color .3s, color .3s, opacity .3s, -webkit-transform .3s, visibility 0s;
    transition: background-color .3s, border-color .3s, color .3s, opacity .3s, transform .3s, visibility 0s;
    transition-timing-function: ease, ease, ease, ease, ease, ease;
    transition-timing-function: cubic-bezier(.445, .05, .55, .95);
    background-color: #999;
    bottom: 0;
    content: '';
    display: block;
    height: 2px;
    position: absolute;
    width: 100%;
}

.btn-underline:hover::after {
    background-color: #2b2b2b;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}

/*------------------------------------*
    $BTN_CTA
\*------------------------------------*/
.btn-cta {
    color: #fff;
    background: #101010;
    border-color: #101010;
}
.btn-cta:hover, .btn-cta:focus, .btn-cta:active, .btn-cta.active, .open > .dropdown-toggle.btn-cta {
    color: #fff;
    background: #737373;
    border-color: #737373;
}
/*------------------------------------*
    $BTN_MAIN
\*------------------------------------*/
.btn-main, .btn-alt3.active, .nav .btn-alt3.active /* used on specials pages as tabs */ {
    color: #101010;
    background: #fff;
    border-color: #101010;
}
.btn-main:hover, .btn-main:focus, .btn-main:active, .btn-main.active, .open .dropdown-toggle.btn-main {
    color: #fff;
    background: #737373;
    border-color: #737373;
}
.showroom .menu .btn-alt3 { background-image: none; } /* used on showroom page, in the left menu section */
/*------------------------------------*
    $BTN_ALT1
\*------------------------------------*/
.btn-alt1 {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}
.btn-alt1:hover, .btn-alt1:focus, .btn-alt1:active, .btn-alt1.active, .open .dropdown-toggle.btn-alt1, .nav .btn-alt1:hover, .nav .btn-alt1:focus, .nav .btn-alt1:active, .nav .btn-alt1.active {
    color: #fff;
    background-color: #737373;
    border-color: #737373;
}
/*------------------------------------*
    $BTN_ALT2
\*------------------------------------*/
.btn-alt2 {
    color: #fff;
    background-color: #636363;
    border-color: #636363;
}
.btn-alt2:hover, .btn-alt2:focus, .btn-alt2:active, .btn-alt2.active, .open .dropdown-toggle.btn-alt2, .nav .btn-alt2:hover, .nav .btn-alt2:focus, .nav .btn-alt2:active, .nav .btn-alt2.active {
    color: #fff;
    background-color: #4F4F4F;
    border-color: #4F4F4F;
}
/*------------------------------------*
    $BTN_ALT3
\*------------------------------------*/
.btn-alt3 {
    color: #fff;
    background-color: #000;
    border-color: #000;
}
.btn-alt3:hover, .btn-alt3:focus, .btn-alt3:active, .open .dropdown-toggle.btn-alt3, .nav .btn-alt3:hover, .nav .btn-alt3:focus, .nav .btn-alt3:active {
    color: #fff;
    background-color: #111;
    border-color: #111;
}
/*------------------------------------*
    $BTN_ALT4
\*------------------------------------*/
.btn-alt4 {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}
.btn-alt4:hover, .btn-alt4:focus, .btn-alt4:active, .open .dropdown-toggle.btn-alt4, .nav .btn-alt4:hover, .nav .btn-alt4:focus, .nav .btn-alt4:active {
    color: #111;
    background-color: #fff;
    border-color: #fff;
}
/*------------------------------------*
    $BTN_NAV1 and $BTN_NAV2
\*------------------------------------*/
.btn-nav1, .btn-nav2 {
    color: #fff;
    background-color: transparent;
    border-color: transparent #000 transparent transparent;
    border-radius: 0;
}
.btn-nav1:hover, .btn-nav1:focus, .btn-nav1:active, .btn-nav1.active, .open .dropdown-toggle.btn-nav1, .btn-nav2:hover, .btn-nav2:focus, .btn-nav2:active, .btn-nav2.active, .open .dropdown-toggle.btn-nav2 {
    color: #fff;
    background-color: #000;
    border-color: #000;
    border-radius: 0;
}

#svSubmit.btn {padding: 6px 14px;}

/*------------------------------------*
    $HOME_MISC
\*------------------------------------*/
#carousel .carousel-control {
    opacity: 1;
    text-shadow: none;
}

#carousel .carousel-control .fa {
    font-size: 36px;
}

#carousel .carousel-control .fa-angle-left::before,
#carousel .carousel-control .fa-angle-right::before {
    font-family: 'standard-icon-font';
}

#carousel .carousel-control .fa-angle-left::before {
    content: "\f119";
}

#carousel .carousel-control .fa-angle-right::before {
    content: "\f11a";
}

#carousel .carousel-indicators {
    height: 24px;
}

#carousel .carousel-indicators li {
    width: 14px;
    height: 14px;
    margin: 0 6px;
    border: 0;
    background-color: transparent;
    position: relative;
}

#carousel .carousel-indicators li::after {
    background-color: #fff;
    border: 2px solid transparent;
    border-radius: 50%;
    content: "";
    left: 50%;
    height: 10px;
    margin: 0 6px !important;
    opacity: .8;
    position: absolute;
    right: 0;
    transform: translate(-50%, -50%);
    transition: all .35s cubic-bezier(.645, .045, .355, 1);
    top: 50%;
    width: 10px;
}

#carousel .carousel-indicators li.active::after {
    background-color: transparent;
    border: 2px solid #fff;
    height: 20px;
    width: 20px;
}

#carousel .carousel-indicators li.active::after,
#carousel .carousel-indicators li:hover::after {
    opacity: 1;
}

#carouselWithDisclaimer .carousel-inner img {
	width: 100%;
}

#dealerOnCoupon #couponFooter span.couponDisclaimer {
	color: #767676!important;
}

/*------------------------------------*
    $HOME_QUICK-NAV1
\*------------------------------------*/
.quickNav .quickNavItem {
    overflow: hidden;
    position: relative;
}
.quickNav .quickNavHeading {
    letter-spacing: 2px;
    padding: 25px;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 1;
    background: #000;
}
.quickNav .quickNavHeading hr {
    width: 40px;
}

@media (min-width: 992px) {
    .quickNav .quickNavItem:hover .img-background {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.quickNav .quickNavItem .img-background,
.quickNav .quickNavItem:hover .img-background {
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}
}
@media (max-width: 991px) {
.quickNav .quickNavHeading {padding: 10px 15px;}
}
@media (max-width: 767px) {
.quickNav .quickNavHeading {text-align: center;}
.quickNav .quickNavHeading .h2 {font-size: 21px;}
}

/*------------------------------------*
    $HOME_QUICK-NAV2
\*------------------------------------*/
.quickNav2 .quickNavItem i, .quickNav2 .quickNavItem .linkRed {
    transition: all 250ms ease-in-out;
}
.quickNav2 .quickNavItem:hover i {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.quickNav2 .quickNavItem .linkRed {
    text-transform: uppercase;
    font-size: 13px;
    font-family: 'MazdaType-Bold';
    border-bottom: 2px solid #fff;
    padding-bottom: 5px;
    line-height: 18px;
    display: inline-block;
}
.quickNav2 a:hover .linkRed {border-bottom: 2px solid #7f7f7f;}

@media (max-width: 991px) and (min-width: 768px) {
.quickNav2 .quickNavItem .linkRed {font-size: 16px;}
}
@media (min-width: 768px) {
.quickNav2 .col-sm-4:nth-last-child(2) { border-right: 1px solid #444; border-left: 1px solid #444; }
}
@media (max-width: 767px) {
.quickNav2 .col-sm-4:nth-last-child(2) { border-top: 1px solid #444; border-bottom: 1px solid #444; margin-top: 35px; margin-bottom: 35px; padding-top: 35px; padding-bottom: 35px; }
}


/*------------------------------------*
    $HOME_INVENTORY SEARCH BUTTONS
\*------------------------------------*/


/*------------------------------------*
    $WIDGET_INVENTORY SEARCH
\*------------------------------------*/
.horizontalInventorySearch .form-group select::-ms-expand { display: none; }
.horizontalInventorySearch #submit_button.btn-cta {
    padding: 6px 23px;
    background: #7f7f7f;
    border-color: #7f7f7f;
}
.horizontalInventorySearch #submit_button.btn-cta:hover,
.horizontalInventorySearch #submit_button.btn-cta:active,
.horizontalInventorySearch #submit_button.btn-cta:focus {
    background: #fff;
    border-color: #fff;
    color:#101010;
}

/*------------------------------------*
    $WIDGET_BANNER
\*------------------------------------*/
.bannerLayout01 > .container { background-color: #000; }
.bannerLayout01 #inventorySearchWidget { color: #fff; padding: 10px 8px; }
.bannerLayout02 #inventorySearchWidget { color: #fff; padding: 10px 25px 15px; }
.bannerWrapper .btn-main { background-color: #7f7f7f; border-color: #7f7f7f; color: #fff; }
.bannerWrapper .btn-main:hover { background-color: #2b2b2b; border-color: #2b2b2b; }

@media (min-width: 992px) {
.bannerLayout02 #inventorySearchWidget { background-color: rgba(0,0,0,.85); margin-top: 35px; }
}
@media (max-width: 991px) and (min-width: 768px) {
.bannerLayout02 > .container { width: 100%; }
}
@media (max-width: 991px) {
.bannerLayout02 #inventorySearchWidget { background-color: #101010; }
}

/*------------------------------------*
    $WIDGET_MODELBAR
\*------------------------------------*/
.modelBarBg .sectionHeading { font-size: 20px; margin-bottom: 20px; }
.modelBar.panel {
    border: none;
    padding: 0 1.5em;
    margin: 0;
    background: none;
}
.ttMpg, .ttYear, .ttMake { display: none; }
#modelBarWidget .vehicle, .mbCustomBtn { cursor: pointer; }
.mbThumbTitle, .mbTitleModel {
    margin-top: -10px;
    color: #333;
}
.modelBarBg .col-model-thumb .carImage { background-size: cover !important; padding-top: 60% !important; -moz-transform: scale(0.85); -webkit-transform: scale(0.85); transform: scale(0.85); transition: all 400ms ease-in-out; }
.modelBarBg .col-model-thumb .carImage:hover { -moz-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }

/*------------------------------------*
    $VDP_EDITS PER DES-140711
\*------------------------------------*/

.priceDrop .priceDrop--btn__collapse, .priceDrop .priceDrop--btn__collapse:active, .priceDrop .priceDrop--btn__collapse:hover, .priceDrop .priceDrop--btn__collapse:focus, #priceDrop--collapse .priceDrop--collapse__wrapper > div a.get--btn__priceDropAlert { border-color: #000 !important; color: #000 !important; font-family: 'MazdaType-Regular' !important; }
.priceDrop #priceDrop--collapse { background-color: #000 !important; }
#priceDrop--collapse .priceDrop--collapse__wrapper > div a.get--btn__priceDropAlert { padding-left: 10px !important; padding-right: 10px !important; }
.vdp-vehicle-title .ePriceBtn { border-color: #000 !important; border-radius: 3px !important; letter-spacing: inherit !important; padding-left: 1px !important; }
.vdp-vehicle-title .ePriceBtn .fa { display: none !important; }
.vdp-vehicle-title .text-muted { color: #000 !important; font-family: 'MazdaType-Regular' !important; opacity: 1 !important; }
.vdp-vehicle-title .ePriceBtn:hover, .vdp-vehicle-title .ePriceBtn:focus { background-color: #737373 !important; border-color: #737373 !important; color: #fff !important; }
.vdp-vehicle-title .ePriceBtn:hover .text-muted, .vdp-vehicle-title .ePriceBtn:focus .text-muted { color: #fff !important; }

/*------------------------------------*
    $FIXED_HEADER
    jQuery('.headerWrapper').addClass('fixedHeaderArea');

    -add a padding-top to content div based on height of header section (may need multiple media queries)
\*------------------------------------*/
@media(min-width:992px) {
.fixedHeaderArea { background: #fff; }
.fixedHeaderArea ~ #content { padding-top: 180px; }
}
/*------------------------------------*
    $MOBILE LEAD DRIVER
\*------------------------------------*/
.offerBlock, #offerContainer { background-color: #444; }
#offerBar {
    text-align: center;
    padding: 8px 0;
}
#offerBar ul { margin-bottom: 0; }
#offerBar, #offerBar .h1 { font-size: 20px; }

@media (min-width:768px) and (max-width:1199px) {
#offerBar, #offerBar .h1 { font-size: 24px; }
}

@media (min-width:1200px) {
#offerBar, #offerBar .h1 {
    font-size: 32px;
    line-height: 28px;
}
}


/*------------------------------------*
    $UPDATES
\*------------------------------------*/

/* SRP trustmark-image class fix*/
.trustmark-image {width: 200px !important;}

/*VDP Confirm Availability Fix CO-575 */

.vdp-vehicle-title .ePriceBtn { letter-spacing: 0.5px; padding: 10px 12px; }

@media (min-width: 992px) {
    .vdp-vehicle-title h1 { padding: 0 220px 0 0; }
}
@media (max-width: 991px) {
    .vdp-vehicle-title h1 { padding: 0; }
}



/*------------------------------------*
    $SPECIALS (MAZDA)
\*------------------------------------*/
.card__body .card__actions .btn {
	width: 100%;
}
.card__body .card__disclaimer {
	border-top: 1px solid #d5d5d5;
	padding-top: 1em;
}


/* DES-174649 */
.srpVehicleSpecial {
    background: url("https://cdn.dlron.us/assets/shared/images/inventory/specialRibbonMazda.png") no-repeat !important;
}


/*------------------------------------*
    $SRP CHANGES (DES-183180)
\*------------------------------------*/

.wasabi_srp--mod .srp-search, .vehicle-card--mod { box-shadow: none !important; }
.search-bar { border-radius: 0 !important; }
.srp-search.stick-head #opensearch-submit { border-radius: 3px; color: #fff; background: #101010; border-color: #101010; font-size: 13px; text-transform: uppercase; }
.srp-search.stick-head #opensearch-submit:hover, .srp-search.stick-head #opensearch-submit:focus { color: #fff; background: #737373; border-color: #737373; }
#searchFilterSort .srp-sort .custom-select .custom-options .custom-option, .srp-sort .custom-select .custom-options .custom-option { font-size: 14px; }
#srp_filter, #searchFilterSort .filter-sort__sort-dropdown, #searchFilterSort .show-filters-button__label, #filter-buttons .show-filters-button__label, #filter-buttons .sort-dropdown__label, .srp-sort .custom-select .custom-options .custom-option, #filter-buttons, .oav-cta--mobile .oav-cta__text { text-transform: uppercase; }
#collapse-options-body-expanded .checkbox { font-size: 12px; }
#srp_filter .custom-checkbox .checkbox::before, .wasabi_srp .vehicle-compare-button-container .vehicle-compare-button-container--left.custom-checkbox .checkbox::before { border-radius: 3px !important; }
#srp_filter .custom-checkbox input[type="checkbox"]:checked + .checkbox::before, .wasabi_srp .vehicle-compare-button-container .vehicle-compare-button-container--left.custom-checkbox input[type="checkbox"]:checked + .checkbox::before { background-color: #101010 !important; border-color: #101010 !important; }
.vehicle-card--mod { border: 1px solid #ddd; }
.vehicle-card--mod .vehicle-title__year, .vehicle-card--mod .vehicle-title__make-model, .vehicle-card--mod .vehicle-title__trim { font-family: 'MazdaType-Bold'; color: #101010 !important; font-weight: normal !important; }
.wasabi_srp button, .wasabi_srp .btn { font-family: 'MazdaType-Bold' !important; font-size: 13px !important; font-weight: normal !important; text-transform: uppercase; }
.vehicle-compare-checkbox__label { font-family: 'MazdaType-Bold'; font-size: 13px !important; letter-spacing: 2px !important; text-transform: uppercase; }
.vehicle-card .vehicle-compare-button-container--right .vehicle-compare-button { border-bottom: 1px solid var(--cta-background-color) !important; font-size: 12px !important; letter-spacing: 2px !important; line-height: .8; text-transform: uppercase !important; }
.srp-pagination .pagination > li > a, .srp-pagination .pagination > li > span { border-color: transparent !important; font-family: 'MazdaType-Medium'; }
.srp-pagination .pagination > li > a { background-color: transparent !important; color: #767676 !important; }
.srp-pagination .pagination > li.disabled > a { color: #767676 !important; }
.srp-pagination .pagination li.active.disabled a { color: #101010 !important; border-bottom: 2px solid #101010 !important; }
.srp-pagination .pagination a:hover { color: #101010 !important; }


/*------------------------------------*
    $VDP CHANGES (DES-183248, DES-193306)
\*------------------------------------*/

.vdp #confirm-availability .fa { display: none; }
.vdp .vehicle-images .thumbnails--desktop__sidebar { margin-left: 0; }
.vdp .all-features .feature-tabs__link { background-color: #d5d5d5; border-color: transparent; border-radius: 3px !important; text-transform: uppercase; }
.vdp .all-features .feature-tabs__link--active, .vdp .all-features .feature-tabs__link:hover, .vdp .all-features .feature-tabs__link:active, .vdp .all-features .feature-tabs__link:focus { color: #101010; }
.vdp .all-features .feature-tabs__link:hover, .vdp .all-features .feature-tabs__link:active, .vdp .all-features .feature-tabs__link:focus { background-color: #c5c5c5; }
.vdp .top-actions #confirm-availability.lead-action, .vehicle-images .thumbnails #load-more-vehicles #load-more-vehicles__btn { padding: 12px 40px; }
.vdp .top-actions #confirm-availability, .vehicle-images .thumbnails #load-more-vehicles #load-more-vehicles__btn { border-color: #101010; box-shadow: none; color: #101010; text-transform: uppercase; }
.vdp .top-actions #confirm-availability:hover, .vdp .top-actions #confirm-availability:focus, .vehicle-images .thumbnails #load-more-vehicles #load-more-vehicles__btn:hover, .vehicle-images .thumbnails #load-more-vehicles #load-more-vehicles__btn:focus { background-color: transparent; border-color: #999; color: #999; }
.vdp .top-actions .lead-action, .vehicle-images .thumbnails #load-more-vehicles #load-more-vehicles__btn { height: inherit !important; font-weight: normal !important; }
#vehicle-details .vehicle-title__year, #vehicle-details .vehicle-title__make-model, #vehicle-details .vehicle-title__trim { color: #101010; font-family: 'MazdaType-Bold'; font-size: 30px; font-weight: normal; }
#vehicle-details .details-header .vehicle-status__label { text-transform: uppercase; }
.vehicle-info__heading, .vehicle-highlights__heading, .dealer-comments__heading, .all-features__heading, .warranty__heading, .similar-vehicles .similar-vehicles__title, .benefits-highlights__heading, .vehicle-images .thumbnails #load-more-vehicles #load-more-vehicles__btn { text-transform: uppercase !important; }
.similar-vehicles .similar-vehicles__title { letter-spacing: .2em; }
.similar-vehicles__cards .vehicleTitleInner .vehicleTitle__year-make-model span.text-muted, .similar-vehicles__cards .vehicleTitleInner .vehicleTitle__year-make-model .vehicleTitle__make-model, .similar-vehicles__cards .vehicleTitleInner .vehicleTitle__trim { color: #101010 !important; font-family: 'MazdaType-Bold' !important; font-weight: normal !important; font-size: 20px !important; }
.similar-vehicles .vehicleCard .buy-content .vehiclePricingHighlight.featuredPrice, .vehiclePricingStack .singlePrice .vehiclePricingHighlight { text-align: left !important; }
.vdp #price-stack .btn, .vdp #price-stack .btn strong { font-family: 'MazdaType-Bold' !important; }
.vdp .custom-block__heading, .dealer-location__heading, .vdp .similar-vehicles .similar-vehicles__title { font-size: 20px !important; }
.vdp .details-header__status .vehicle-status { border: 2px solid #ececec; display: inline-block; margin-top: 8px; padding: 8px 12px; }
.vdp .details-header .vehicle-status__icon { margin-right: 5px; }


/*------------------------------------*
    $SUBNAV BAR (DES-198349)
\*------------------------------------*/

.mazda-sub-nav { border-bottom: 1px solid #d5d5d5; }
.mazda-sub-nav-inner { position: relative; }
.mazda-sub-nav-item-1 { display: none; }
.mazda-sub-nav-inner .mazda-sub-nav-item-2 { position: absolute; top: 0; right: 0; }
.mazda-sub-nav-item-2 .btn-main { letter-spacing: .15em; }
#mazdatoggle .panel-body { background-color: transparent; }
#mazdatoggle ul li a { color: #333; font-family: 'MazdaType-Bold'; font-size: 13px; letter-spacing: .2em; padding: 10px 0; text-transform: uppercase; }

@media (min-width: 1441px) {
.mazda-sub-nav>.container { width: 1440px; }
}
@media (max-width: 991px) {
.mazda-sub-nav>.container { padding: 0; width: 100%; }
}
@media (max-width: 991px) and (min-width: 768px) {
#mazdatoggle ul li a { font-size: 12px; }
.mazda-sub-nav-item-1 #mazdatoggle { margin-left: 15px; }
.mazda-sub-nav-item-2 .btn-main { margin-right: 15px; }
}
@media (min-width: 768px) {
.mazda-sub-nav { min-height: 61px; }
.mazda-sub-nav-inner { padding: 20px 0; }
.mazdasubnav-toggle { display: none !important; }
#mazdatoggle.collapse { display: inline-block; }
#mazdatoggle ul li { display: inline; margin-right: 25px; }
#mazdatoggle li { position: relative; }
#mazdatoggle li::after { background-color: #d5d5d5; content: ''; height: 22px; right: -12px; position: absolute; width: 1px; }
#mazdatoggle { position: relative; }
#mazdatoggle .panel-body::after { background-color: #fff; content: ''; height: 25px; right: 5px; position: absolute; top: 0; width: 10px; }
.mazda-sub-nav-inner .mazda-sub-nav-item-2 { top: 6px; }
}
@media (max-width: 767px) {
.mazda-sub-nav { min-height: 43px; }
.mazda-sub-nav-item .btn-main { background-color: transparent; border: 0; box-shadow: none; color: #000; padding-left: 0; padding-right: 0; }
.mazdasubnav-toggle.collapsed .fa::before { content: "\f107"; }
#mazdatoggle li { padding-bottom: 0; }
#mazdatoggle li a { display: block; }
.mazda-sub-nav-item-1 .btn-main { margin-left: 15px; }
.mazda-sub-nav-item-2 .btn-main { margin-right: 15px; }
#mazdatoggle { background-color: rgba(221, 221, 221, .9); left: 0; right: 0; padding-left: 15px; padding-right: 15px; position: absolute; width: 100%; z-index: 101; }
}

/*------------------------------------*
    $Incentives Model Filter Dropdown CHANGES (SF-01054742)
\*------------------------------------*/
#content-main-incentives .uiRtiDropMenu.dropdown-menu { text-transform: uppercase; }

/*------------------------------------*
    $The homepage banner rotator disclaimer popup is showing white text because of the bg-main styling (SF-01211665)
\*------------------------------------*/
.bg-main .banner-disclaimer-content { color: #333; }

/*------------------------------------*
    $SRP-VDP Consumer Reports Badge
\*------------------------------------*/
/* SRP SF01390403 */
.vehicle-card--mod .vehicle-more-info .icon-img__benefit { border: 0 !important; }
.vehicle-card[data-model="Mazda3 Hatchback"] .consumerReports, .vehicle-card[data-model="Mazda3 Sedan"] .consumerReports { display: none; }

/* VDP SF01390403 */
.benefits-highlights .feature-image__benefit { border: 0 !important; }
.vdp.vdp--mod[data-model="Mazda3 Hatchback"] .consumerReports, .vdp.vdp--mod[data-model="Mazda3 Sedan"] .consumerReports { display: none; }