@import "/assets/fonts/ToyotaType/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
    NAVTABS
    NAV-INVERSE
    PAGINATION
    BTN
    BTN_CTA
    BTN_MAIN
    BTN_ALT1
    BTN_ALT2
    BTN_ALT3
    BTN_NAV1o
    BTN_NAV2
    HOME_MISC
    HOME_QUICK-NAV
    HOME_INVENTORY SEARCH BUTTONS
    WIDGET_INVENTORY SEARCH 
    WIDGET_BANNER
    SOCIAL_MEDIA
    WIDGET_MODELBAR 
    WIDGET_FEATURED VEHICLES SCROLLER
    INVENTORY_VDP
    INVENTORY_SRP
    FIXED_HEADER
    
    cta             EB0A1E
    cta hover       c4161c
    main            343434  
    main hover      111111
      
    light grey      eceeed
    dark grey       393939

/*------------------------------------*
    $CUSTOM_PROPERTIES
\*------------------------------------*/
:root {
    --cta-background-color: #EB0A1E;
    --cta-font-color: #fff;
    --cta-hover-color: #c4161c;
    --main-color: #333;
}

/*------------------------------------*
    $FONT_FAMILY
\*------------------------------------*/
body { font-family: 'ToyotaType-Book', sans-serif; }
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: 'ToyotaType-Semibold', sans-serif; }
.btn, b, strong, .strong, label { font-family: 'ToyotaType-Semibold', sans-serif; }
#inventorySearchWidget .isTitle, .srpRefineSearch .panel-title, .srpVehicle h2, .srpVehicle h1.vehicleTitle, #vehiclePageViews h2 { font-weight: normal; }

.font-light { font-family: 'ToyotaType-Light'; }
.font-regular { font-family: 'ToyotaType-Regular'; }
.font-bold { font-family: 'ToyotaType-Semibold'; }

/*------------------------------------*
    $FONT_COLOR
\*------------------------------------*/
hr { border-top-color: #ddd; }
.text-default { color: #333; }
.text-main { color: #343434; }
.text-cta { color: #EB0A1E; }
.text-alt { color: #ddd; }

/*------------------------------------*
    $FONT_SIZE
    
    Headers scale based on body
    font-size. Bootstrap default body
    font size is 14px.
\*------------------------------------*/
@media (max-width: 1199px) and (min-width: 992px) {
.modelBarBg .mbTitleModel { font-size: 12px; }
}

/*------------------------------------*
    $CUSTOM FONT SIZE
\*------------------------------------*/


/*------------------------------------*
    $BACKGROUND COLORS  
\*------------------------------------*/
.bg-main {
    background-color: #000;
    border: 1px solid transparent;
    color: #fff;
}
.bg-cta {
    background-color: #EB0A1E;
    border: 1px solid transparent;
    color: #fff;
}
.bg-alt1 {
    background-color: #eceeed;
    border: 1px solid transparent;
}
.bg-alt1 .text-muted {
	color: #6B6B6B;
}
.bg-alt2 {
    background-color: #2C2C2C;
	color: #fff;
    border: 1px solid transparent;
}
.bg-alt3 {
    background-color: #EDF0F5;
    border: 1px solid transparent;
}
.bg-parallax {
    background-color: rgba(34,34,34,.9);
    border: 1px solid transparent;
    color: #fff;
}
.offerBlock,
.offerBlock .bg-main {
    background-color: #222;
    color: #fff;
}

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

@media (max-width: 991px) and (min-width: 768px) {
.contentSectionE, .contentSectionO { padding: 45px 0; }
}
@media (max-width: 767px) {
.contentSectionE, .contentSectionO { padding: 40px 0; }
}
/*------------------------------------*
    $ANCHOR
\*------------------------------------*/
a { color: #EB0A1E; }
.bg-alt1 a:not(.btn) { color: #D7091A; }
a:hover, a:active, a:focus { color: #c4161c; }
/*------------------------------------*
    $LIST GROUP
\*------------------------------------*/
.list-group-item { }
a.list-group-item { }
a.list-group-item:hover, a.list-group-item:focus { }
/*------------------------------------*
    $PANEL
\*------------------------------------*/
.panel, .panel-heading, .panel-footer { border-radius: 0; }
.panel { box-shadow: none; }
.panel-title { font-weight: bold; }
.panel-default .panel-heading { }
.panel-default .panel-footer { }
.panel-default .panel-heading + .panel-collapse .panel-body { }
.panel-default>.panel-heading a:not(.btn) { color: #D7091A; }
/*------------------------------------*
    $WELL
\*------------------------------------*/
.well { box-shadow: none; border-radius: 0; }
.well a:not(.btn) { color: #D7091A; }
/*------------------------------------*
    $TABLE
\*------------------------------------*/
.table thead tr th { border-color: #ccc; }
.table thead tr th, .table tbody tr th, .table tfoot tr th, .table thead tr d, .table tbody tr td, .table tfoot tr td { border-color: #ccc; }
/*------------------------------------*
    $TABS
\*------------------------------------*/
.nav-tabs.nav-justified > li > a, .nav-tabs > li > a { background-color: #eee; color: #D7091A; }
.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; color: var(--main-color); }
.well .panel .nav-tabs.nav-justified > .active > a { background-color: #fff; }
/*------------------------------------*
    $NAV_RESET
\*------------------------------------*/
.navbar { min-height: 1em; }/*~14~*/
.navbar-static-top { border-width: 0; }
.navbar-nav li a { padding: 0.714em 0.6em; }/*~10~*/
.navbar-nav li .dropdown-menu {
    overflow: hidden;
    padding: 0;
    min-width: 120px;
}

@media (min-width: 992px) {
.navbar-nav li:last-child .dropdown-menu {
    left: auto;
    right: 0;
    text-align: right;
}
}

@media (max-width:991px) {
.navbar-nav li a { padding: 0.714em 0.500em; }/*~10x7~*/
}

@media (min-width: 768px) {
.navbar-default .navbar-collapse {
    margin-left: -15px;
    margin-right: -15px;
}
}

@media (max-width: 767px) {
.navbar-fixed-top {
    margin-left: 0;
    margin-right: 0;
}
}
/*------------------------------------*
    $NAVTABS
\*------------------------------------*/
.nav-pills li.active a, .nav-pills li.active a:hover, .nav-pills li.active a:focus {
    background-color: #bbbbbb;
    border-color: #bbbbbb;
    color: #fff;
}
.nav-pills li.active .triangle { border-top-color: #bbbbbb; }
/*------------------------------------*
    $NAV-INVERSE    
\*------------------------------------*/

/*------------------------------------*
    $PAGINATION
\*------------------------------------*/
.pagination { border-radius: 4px; }
.pagination li a, .pagination li span {
    background-color: #fff;
    border: 1px solid #ccc;
}
.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 {
    border: 2px solid transparent;
    border-radius: 35px;
    text-transform: uppercase;
    -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;
}
.btn-lg {
    font-size: 16px;
}

/*------------------------------------*
    $BTN_CTA    
\*------------------------------------*/
.btn-cta {
    color: #fff;
    background: #EB0A1E;
    border-color: #EB0A1E;
}
.btn-cta:hover, .btn-cta:focus, .btn-cta:active, .btn-cta.active, .open > .dropdown-toggle.btn-cta {
    color: #fff;
    background: #c4161c;
    border-color: #c4161c;
}
/*------------------------------------*
    $BTN_MAIN   
\*------------------------------------*/
.btn-main, .btn-alt3.active, .nav .btn-alt3.active {
    color: #fff;
    background-color: #343434;
    border-color: #343434;
}
.btn-main:hover, .btn-main:focus, .btn-main:active, .btn-main.active, .open .dropdown-toggle.btn-main {
    color: #fff;
    background-color: #111111;
    border-color: #111111;
}
/*------------------------------------*
    $BTN_ALT1   
\*------------------------------------*/
.btn-alt1 {
    color: #000;
    background-color: #fff;
    border-color: #ddd;
}
.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: #000;
    background-color: #eee;
    border-color: #ccc;
}
/*------------------------------------*
    $BTN_ALT2   
\*------------------------------------*/
.btn-alt2 {
    color: #000;
    background-color: #ccc;
    border-color: #ccc;
}
.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: #000;
    background-color: #ddd;
    border-color: #ddd;
}
/*------------------------------------*
    $BTN_ALT3   
\*------------------------------------*/
.btn-alt3 {
    color: #ededed;
    background-color: #393939;
    border-color: #393939;
}
.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: #ededed;
    background-color: #333;
    border-color: #333;
}
/*------------------------------------*
    $BTN_NAV1   
\*------------------------------------*/
.btn-nav1 {
    color: #000;
    background-color: transparent;
    border-color: transparent #F5F5F5 transparent transparent;
}
.btn-nav1:hover, .btn-nav1:focus, .btn-nav1:active, .btn-nav1.active, .open .dropdown-toggle.btn-nav1 {
    color: #000;
    background-color: #F5F5F5;
    border-color: #F5F5F5;
}
/*------------------------------------*
    $BTN_NAV2   
\*------------------------------------*/
.btn-nav2 {
    color: #000;
    background-color: transparent;
    border-color: transparent #F5F5F5 transparent transparent;
}
.btn-nav2:hover, .btn-nav2:focus, .btn-nav2:active, .btn-nav2.active, .open .dropdown-toggle.btn-nav2 {
    color: #000;
    background-color: #F5F5F5;
    border-color: #F5F5F5;
}
/*------------------------------------*
    $HOME_MISC
\*------------------------------------*/
.bannerWrapper { padding: 40px 0; }

@media (max-width:991px) and (min-width:768px) {
.bannerWrapper { padding: 25px 0 10px; }
.contentTop { padding: 25px 0; }
}

@media (max-width:767px) {
.bannerWrapper { padding: 0; }
.contentTop { padding: 15px 0; }
}
/*------------------------------------*
    $HOME_QUICK-NAV
\*------------------------------------*/

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

/*------------------------------------*
    $WIDGET_INVENTORY SEARCH
\*------------------------------------*/
#inventorySearchWidget {
    color: #fff;
    padding: 0 5px 10px;
}
#inventorySearchWidget .isTitle {
    font-size: 18px;
    margin-top: 15px;
    text-transform: uppercase;
}
#inventorySearchWidget .btn-main {
    background-color: #EB0A1E;
    border-color: #EB0A1E;
}
#inventorySearchWidget .btn-main:hover {
    background-color: #c4161c;
    border-color: #c4161c;
}

@media (max-width: 1199px) {
#inventorySearchWidget .isTitle {
    font-size: 16px;
    margin-top: 10px;
}
#inventorySearchWidget .margin-bottom_5x { margin-bottom: 0.4em !important; }
#inventorySearchWidget .radio-inline label { font-size: 13px; }
}
/*------------------------------------*
    $WIDGET_BANNER
\*------------------------------------*/

/*------------------------------------*
    $SOCIAL_MEDIA
\*------------------------------------*/
.socialSec ul .fa { background-color: #000; border-radius: 25px; color: #fff; height: 50px; margin: 5px 3px; padding-top: 18px; text-align: center; width: 50px; transition: all 250ms 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: #833AB4; }
.socialSec .fa.fa-instagram:hover { background-color: #C13584; }
.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; }
.socialSec .fa.fa-tiktok { background-color: #2ab0ba; }
.socialSec .fa.fa-tiktok:hover { background-color: #69C9D0; }

/*------------------------------------*
    $WIDGET_MODELBAR
\*------------------------------------*/
.modelBar {
    background: none;
    border: none;
    margin-top: 0;
    margin-bottom: 0;
}
.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: #333;
}
/*------------------------------------*
    $WIDGET_FEATURED VEHICLES SCROLLER
\*------------------------------------*/
#featuredVehiclesScroller { height: 230px; }
/*------------------------------------*
    $INVENTORY_VDP
\*------------------------------------*/
#lotSeparator.otherLot, #lotSeparator.myLot { background: #d6020a none repeat scroll 0 0!important; }
.details-header .vehicle-title__year, #srp_filter .range-wrapper .rangeLabel .rangeDash { color: #767676!important; }
/*  SOCIAL MEDIA        */
.socialMedia .dropdown-menu { min-width: 40px; }
.socialMedia .dropdown-menu li a { padding: 0; }
.socialMedia .dropdown-menu li a:hover { cursor: pointer; opacity: .8; }
/*  DESCRIPTION TABS    */
.vehicleDescriptionTabs .triangle {
    border-left: 8px solid rgba(0, 0, 0, 0);
    border-right: 8px solid rgba(0, 0, 0, 0);
    border-top: 8px solid transparent;
    bottom: -8px;
    left: 50%;
    margin-left: -8px;
    position: absolute;
    width: 10px;
    z-index: 100;
    display: none;
}
.vehicleDescriptionTabs .nav li a { position: relative; }
.vehicleDescriptionTabs .nav .active .triangle { display: block; }
.vehicleDescriptionTabs .panel-title .active .btn-default { background: #ededed !important; }
/*  SUB CONTENT         */
.vehicleSubContent .panel-body {
    overflow-y: auto;
    height: 500px;
}
.vehicleDescriptionTabs .panel-body { height: 500px; }
.recentViewDetails { height: 120px; }

@media (max-width: 1199px) {
.vehicleImgLinks .nav-pills li {
    display: block;
    margin: 0 0 .5em;
    width: 100%;
}
.vehicleImgLinks .nav-pills li:last-child { margin: 0; }

.vehicleSubContent .panel-body { overflow-y: auto; }
.vehicleDescriptionTabs .panel-body { height: 400px; }
.vehicleReviews .panel-body, .vehicleContactForm { height: 500; }
}

@media (max-width: 991px) {
.vehicleSubContent .panel-body { overflow-y: auto; }
}

@media (max-width: 767px) {
.srpVehicleDetails { margin-top: .5em; }
.srpVehicleDetails li { display: inline-block; }
.vehicleReviews .panel-body, .vehicleContactForm { height: auto; }
.vehicleDescriptionTabs .nav .active .triangle { display: none; }
}

/*------------------------------------*
    $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-color: #eceeed; }
.fixedHeaderArea ~ #content { padding-top: 180px; }
}
/*------------------------------------*
    $MOBILE LEAD DRIVER
\*------------------------------------*/
#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;
}
}

/*------------------------------------*
    $DIGITAL GARAGE
\*------------------------------------*/
@media (max-width: 991px) and (min-width: 768px) {
.desktop .digitalGarage { margin-top: 18px; }
}
@media (max-width: 767px) {
.mobile .digitalGarage { margin-top: 18px; }
}

/* Fix showroom menu style for Toyota compliance */
.showroom .menu li.active .btn-default { background-color: #ddd; border-color: #ddd; color: #000; }

/* Fix for pre-approved form text color */
.Get-Pre-Approved-page #inventorySearchWidget { color: #333 !important; }


/*------------------------------------*
    ADA links 
\*------------------------------------*/
#content-main p a, #privacyPolicy p a, [class^="contentSection"] p a, .mrp-mpg__disclaimer a, .disclaimers-list__item a { text-decoration: underline; }