@import "/assets/fonts/poppins/fonts.css";
@import "/assets/fonts/subaruicons/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
    FIXED_HEADER
    MOBILE LEAD DRIVER

    cta             1971D4
    cta hover       16427c
    main            333
    main hover      222

/*------------------------------------*
    $CUSTOM_PROPERTIES
\*------------------------------------*/
:root {
    --cta-background-color: #1971D4;
    --cta-font-color: #fff;
    --cta-hover-color: #3A8EEE;
    --main-color: #1d252c;
} 

/*------------------------------------*
    $FONT_FAMILY
\*------------------------------------*/
body { font-family: 'poppins-regular', sans-serif; }
.heading-xl, .heading-lg, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: 'poppins-regular', sans-serif; }
.btn, #inventorySearchWidget .isTitle, .srpRefineSearch .panel-title, .srpVehicle h2, .srpVehicle h1.vehicleTitle, #vehiclePageViews h2, .featuredVehicle .title h3, label, b, strong { font-weight: normal !important; }
.btn, label, b, strong, .heading-bold { font-family: 'poppins-medium', sans-serif; }

/*------------------------------------*
    $FONT_COLOR
\*------------------------------------*/
hr { border-top-color: #ddd; }
.text-default, .text-main { color: #333; }
.text-cta { color: #1971D4; }
.text-muted { color: #767676; }

/*------------------------------------*
    $FONT_SIZE
\*------------------------------------*/
@media (max-width: 991px) {
body, .btn, .dropdown-menu, .form-control { font-size: 13px; }
}

/*------------------------------------*
    $BACKGROUND COLORS
\*------------------------------------*/

.bg-main {
    background-color: #1d252c;
    border: 1px solid transparent;
    color: #fff;
}
.bg-cta {
    background-color: #1971D4;
    border: 1px solid transparent;
    color: #fff;
}
.bg-alt1 {
    background-color: #EFEFEF;
    border: 1px solid transparent;
}
.bg-alt2 {
    background-color: #E6E6E6;
    border: 1px solid transparent;
}
.bg-alt3 {
    background-color: #6C6C6D;
	color: #fff;
    border: 1px solid transparent;
}
.bg-white {
    background-color: #fff;
    border: 1px solid transparent;
}
.offerBlock {
    background-color: #1d252c;
    color: #fff;
}

@media (max-width:767px) {
.snap-content { background-color: #fff !important; }
}
/*------------------------------------*
    $LAYOUT
\*------------------------------------*/
.contentWrapper { padding-bottom: 2em; }
.contentSectionO, .contentSectionE { padding: 65px 0; }

@media (min-width: 992px) {
.bannerWrapper { padding: 35px 0; }
.bannerWrapper.bannerLayout02 { padding: 0; }
}
@media (max-width:991px) {
.contentSectionO, .contentSectionE { padding: 45px 0; }
}
@media (max-width:767px) {
.contentSectionO, .contentSectionE { padding: 35px 0; }
}

/*------------------------------------*
    $ANCHOR
\*------------------------------------*/
a { color: #1971D4; }
a:hover { color: #3A8EEE; }
.bg-alt1 a:not(.btn) { color: #186AC9; }
p a, p a:hover, p a:focus, #content a { text-decoration: underline; }
a.btn, .model-container a, .panel-heading > a { text-decoration: none !important; }

/*------------------------------------*
    $LIST GROUP
\*------------------------------------*/

/*------------------------------------*
    $PANEL
\*------------------------------------*/
.panel, .panel-heading, .panel-footer { border-radius: 0; }
.panel { box-shadow: none; }
.panel-title { font-weight: bold; }
.panel-heading a { color: #186AC9; }
/*------------------------------------*
    $WELL
\*------------------------------------*/
.well {
    box-shadow: none;
    border-radius: 0;
}
.well a:not(.btn) { color: #186AC9; }
/*------------------------------------*
    $TABLE
\*------------------------------------*/

/*------------------------------------*
    $TABS
\*------------------------------------*/
.nav-tabs.nav-justified > li > a, .nav-tabs > li > a { background-color: #eee; color: #186AC9; }
.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: #1d252c;
    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;
}
.pagination > li > a, .pagination > li > span { color: #1d252c; }
.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover { color: #222; }
.badge { background-color: #767676; }
/*------------------------------------*
    $BTN
\*------------------------------------*/
.btn {
    border-radius: 0;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    letter-spacing: 1.3px;
	border-width: 2px;
	text-decoration: none;
}
.btn-lg {
    padding: 12px 30px;
    font-size: 14px;
}
.srpRefineSearch #accordion ul li a { border-radius: 3px; } /* used on srp refine search section - leave in IF you are removing border radius from all buttons */
/*------------------------------------*
    $BTN_CTA
\*------------------------------------*/
.btn-cta {
    color: #fff;
    background-color: #1971D4;
    border-color: #1971D4;
}
.btn-cta:hover, .btn-cta:focus, .btn-cta:active, .btn-cta.active, .open > .dropdown-toggle.btn-cta {
    color: #fff;
    background-color: #3A8EEE;
    border-color: #3A8EEE;
}
/*------------------------------------*
    $BTN_MAIN
\*------------------------------------*/
.btn-main, .btn-alt3.active, .nav .btn-alt3.active /* used on specials pages as tabs */ {
    color: #fff;
    background-color: #1d252c;
    border-color: #1d252c;
}
.btn-main:hover, .btn-main:focus, .btn-main:active, .btn-main.active, .open .dropdown-toggle.btn-main {
    color: #fff;
    background-color: #3A6AA3;
    border-color: #3A6AA3;
}
.showroom .menu .btn-alt3 { background-image: none; } /* used on showroom page, in the left menu section */
/*------------------------------------*
    $BTN_ALT1
\*------------------------------------*/
.btn-alt1 {
    color: #1971D4;
    background-color: transparent;
    border-color: #1971D4;
}
.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: #1971D4;
    border-color: #1971D4;
}
/*------------------------------------*
    $BTN_ALT2
\*------------------------------------*/
.btn-alt2 {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}
.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: #111;
    background-color: #fff;
    border-color: #fff;
}
/*------------------------------------*
    $BTN_ALT3
\*------------------------------------*/
.btn-alt3 {
    color: #fff;
    background-color: #666;
    border-color: #666;
}
.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: #444;
    border-color: #444;
}
/*------------------------------------*
    $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;
}
/*------------------------------------*
    $HOME_MISC
\*------------------------------------*/

/* Reduce size of homepage banner disclaimer button via DES-121356 */
.homepage #disclaimerBtn.btn-sm { font-size: 10px; padding: 3px 8px; right: 0; }

/*------------------------------------*
    $HOME_QUICK-NAV
\*------------------------------------*/

/* Quick Nav 1 */
.quick-nav-1 { display: flex; flex-flow: row wrap; }
.quick-nav-1 .quick-nav-item { position: relative; overflow: hidden; width: 33.333%; }
.quick-nav-1 .quick-nav-item .quick-nav-content h3,
.quick-nav-1 .quick-nav-item .quick-nav-content .quick-nav-button { position: absolute; bottom: 10%; left: 0; right: 0; transform: translateY(50%); text-align: center; transition: all 1s; z-index: 1; }
.quick-nav-1 .quick-nav-button .btn { background-color: transparent; border: 2px solid #fff; }
.quick-nav-1 .quick-nav-button .btn:hover, .quick-nav-1 .quick-nav-button .btn:focus { background-color: #fff; border: 2px solid #fff; color: #222; }

@media (min-width: 768px) {
.quick-nav-1 .quick-nav-item .quick-nav-content .quick-nav-button { bottom: 0; opacity: 0; }
.quick-nav-1 .quick-nav-item:hover .quick-nav-content h3 { bottom: 60%; }
.quick-nav-1 .quick-nav-item:hover .quick-nav-content .quick-nav-button { bottom: 40%; opacity: 1; }
.quick-nav-1 .quick-nav-item .bg-overlay { transition: all .5s; }
.quick-nav-1 .quick-nav-item:hover .bg-overlay { background-color: rgba(0, 0, 0, .8); position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.quick-nav-1 .quick-nav-button .btn { padding: 15px 45px; }
}
@media (max-width: 767px) {
.quick-nav-1 .quick-nav-item { width: 100%; }
.quick-nav-1 .quick-nav-item .quick-nav-content h3 { bottom: 80px; }
.quick-nav-1 .quick-nav-item .quick-nav-content .quick-nav-button { bottom: 50px; }
}

/*------------------------------------*
    $HOME_INVENTORY SEARCH BUTTONS
\*------------------------------------*/


/*------------------------------------*
    $WIDGET_INVENTORY SEARCH
\*------------------------------------*/


/*------------------------------------*
    $WIDGET_BANNER
\*------------------------------------*/
.bannerLayout02 #inventorySearchWidget { color: #fff; padding: 10px 25px 15px; }
#inventorySearchWidget .btn-main { background-color: #1971D4; border-color: #1971D4; color: #fff; }
#inventorySearchWidget .btn-main:hover { background-color: #3A8EEE; border-color: #3A8EEE; color: #fff; }

@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: #000; }
}

/*------------------------------------*
    $WIDGET_MODELBAR
\*------------------------------------*/
.modelBar.panel {
    border: none;
    padding: 0 1.5em;
    margin: 0;
    background: none;
}
.ttMpg, .ttYear, .ttMake { display: none; }
#modelBarWidget .vehicle, .mbCustomBtn { cursor: pointer; }
.modelBar .mbPopUpTitle { margin: 4px 0 8px; }
.modelBar .ptMpg {
    position: absolute;
    bottom: -10px;
    right: 0px;
    font-weight: bold;
    background-color: #eee;
    padding: 6px 8px 2px;
    border-radius: 4px 0 4px 0;
}
.modelBar .ptMpgLabel { font-size: 11px; }
.modelBar .popoverTitle .btn {
    margin: 0 0 8px;
    text-align: center;
}
.modelBar .popoverTitle .col-sm-6 {
    padding-left: 4px;
    padding-right: 4px;
}
.modelBar .popoverTitle.row { padding: 0 10px; }
/* MPG Fix */
.modelBar .col-model-thumb {
    position: relative;
    margin: -5px 0;
}
.modelBar .ttMpg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
.mbThumbTitle, .mbTitleModel {
    margin-top: -10px;
    color: #222;
}

/*------------------------------------*
    $SOCIAL_MEDIA
\*------------------------------------*/
.socialSec ul .fa { background-color: #2c2c2c; border-radius: 25px; color: #fff; height: 50px; margin: 5px 3px; padding-top: 18px; text-align: center; width: 50px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.socialSec .fa.fa-facebook { background-color: #375594; }
.socialSec .fa.fa-facebook:hover { background-color: #2e487d; }
.socialSec .fa.fa-twitter { background-color: #00a7ef; }
.socialSec .fa.fa-twitter:hover { background-color: #0398d9; }
.socialSec .fa.fa-youtube-play { background-color: #EB242E; }
.socialSec .fa.fa-youtube-play:hover { background-color: #d51923; }
.socialSec .fa.fa-google-plus { background-color: #CF0F0F; }
.socialSec .fa.fa-google-plus:hover { background-color: #b10c0c; }
.socialSec .fa.fa-linkedin { background-color: #0077B5; }
.socialSec .fa.fa-linkedin:hover { background-color: #00679d; }
.socialSec .fa.fa-pinterest { background-color: #BD081C; }
.socialSec .fa.fa-pinterest:hover { background-color: #a60719; }
.socialSec .fa.fa-instagram { background-color: #1C5380; }
.socialSec .fa.fa-instagram:hover { background-color: #123f63; }
.socialSec .fa.fa-rss { background-color: #FA6900; }
.socialSec .fa.fa-rss:hover { background-color: #e05f01; }
.socialSec .fa.fa-flickr { background-color: #ff0084; }
.socialSec .fa.fa-flickr:hover { background-color: #da0272; }
.socialSec .fa.fa-foursquare { background-color: #2D5BE3; }
.socialSec .fa.fa-foursquare:hover { background-color: #254fca; }
.socialSec .fa.fa-yelp { background-color: #D32323; }
.socialSec .fa.fa-yelp:hover { background-color: #b81919; }

/*------------------------------------*
    $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
\*------------------------------------*/
#offerDropdownTitle, #offerFormInstruction { color: #fff; }
#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; }
}
/*------------------------------------*
    $SRP/VDP
\*------------------------------------*/
.details-header .vehicle-title__year, #srp_filter .range-wrapper .rangeLabel .rangeDash { color: #767676!important; }

/*------------------------------------*
    $SRP Feature Logos - 01073002
\*------------------------------------*/
.vehicle-card--mod .vehicle-more-info .icon-img { max-width: 180px; margin: 5px; grid-template-columns: none; }
.vehicle-card--mod .vehicle-more-info .icon-img__benefit, .benefits-highlights .feature-image__benefit { border: 0 !important; }

/*------------------------------------*
    $VDP Feature Logos - 01073002
\*------------------------------------*/
.benefits-highlights .feature-image__benefit { border: 0 !important; padding: 7px !important; width: fit-content; vertical-align: middle; }
.benefits-highlights .feature-image__benefit .img-responsive { max-width: 180px; }

/*------------------------------------*
    $SRP/VDP Consumer Reports Badge - SF01375212 
\*------------------------------------*/
.vehicle-card[data-model="LEGACY"] .consumerReports { display: none; }
.vdp.vdp--mod[data-model="LEGACY"] .consumerReports { display: none; }

#offerContainer .help-block, #offerContainer.bg-main a:not(.btn) {
  color:inherit !important;
}

.well .form-group .help-block {
    color: #333;
}

/*------------------------------------*
    ADA - Elements must meet minimum color contrast ratio thresholds - 01419984
\*------------------------------------*/
.subaru-maintenance-schedule__form-questions .form-question[aria-hidden="true"] {
    opacity: 1 !important;
}

/* Carousels */
.carousel-control:focus-visible .fa { outline: 3px solid Highlight; outline: 3px auto -webkit-focus-ring-color !important; outline-offset: 1px !important; }
.carousel-indicators li { width: 12px; height: 12px; margin: 1px 5px; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.8); background-color: rgba(0,0,0,0.1); }
.carousel-indicators .active { width: 14px; height: 14px; margin: 0 4px; background-color: var(--cta-background-color); }
[id^=carouselWithDisclaimer-] [id^=disclaimerModal-] .banner-disclaimer-content { background-color: #fff!important; color: #000!important; }
#carousel-Main .carousel-control { opacity: 0.6; }
#carousel-Main .carousel-control:hover { opacity: 0.9; }
#carousel-Main .carousel-control .fa { background: #000; height: 45px; width: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 21px; }
#carousel-Main .carousel-control.left .fa { margin-right: auto; }
#carousel-Main .carousel-control.right .fa { margin-left: auto; }

@media (min-width: 1200px) {
#carousel-Main .carousel-control { width: 9%; }
}
@media (max-width: 1199px) {
#carousel-Main .carousel-control .fa { font-size: 27px; border-radius: 0; height: 33px; width: 33px; }
#carouselWithDisclaimer-Main .carousel-navigation-controls .carousel-control { bottom: 20px !important; top: 20px !important; padding: 0; }
}