@import "/assets/fonts/hyundai/fonts.css";
/*------------------------------------*
    TABLE OF CONTENT - $ search prefix

	CUSTOM_PROPERTIES
    FONT_FAMILY
    FONT_COLOR
    FONT_SIZE
    BACKGROUND COLORS
    ANCHOR
    LIST GROUP
    PANEL
    WELL
    TABLE
    TABS
    NAV RESET
    NAVTABS
    NAV-INVERSE
    FORM CONTROL
    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
    WIDGET_FEATURED VEHICLES SCROLLER
    SOCIAL_SEC
    FOOTER
    FIXED_HEADER
    SRP/VDP

    cta             2d96cd
    cta hover       2a8bbe
    main            1c394f
    main hover      192e3e

/*------------------------------------*
	$CUSTOM_PROPERTIES
\*------------------------------------*/
:root {
	--cta-background-color: #002c5f;
	--cta-font-color: #fff;
	--cta-hover-color: #014390;
	--main-color: #000;
}

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

/* Font Weight Classes */
.font-regular { font-family: 'HyundaiSansHead-Regular'; }
.font-bold { font-family: 'HyundaiSansHead-Bold'; }

.vdp__left-column :not(i), .vdp__right-column :not(i), .wasabi_srp * { font-family: 'HyundaiSansHead-Regular', sans-serif; }

/*------------------------------------*
    $FONT_COLOR
\*------------------------------------*/
hr { border-top-color: #ddd; }
.text-default { color: #333; }
.text-white { color: #fff; }
.text-main { color: #1f1f21; }
.text-cta { color: #002c5f; }
.bg-alt1 .text-muted { color: #6E6E6E; }

/*------------------------------------*
    $FONT_SIZE

    Headers scale based on body
    font-size. Bootstrap default body
    font size is 14px.
\*------------------------------------*/
@media (max-width: 991px) {
body, .dropdown-menu, .form-control { font-size: 13px; }
.btn { font-size: 15px; }
}

/*------------------------------------*
    $BACKGROUND COLORS
\*------------------------------------*/
.bg-main {
    background-color: #1f1f21;
    color: #fff;
    border: 1px solid transparent;
}
.bg-cta {
    background-color: #002c5f;
    color: #fff;
    border: 1px solid transparent;
}
.bg-alt1 {
    background-color: #f3f3f3;
    color: #000;
    border: 1px solid transparent;
}
.bg-alt2 {
    background-color: #333333;
    color: #fff;
    border: 1px solid transparent;
}
.bg-alt3 {
    background-color: #3f5162;
    color: #fff;
    border: 1px solid transparent;
}
.bg-alt4 {
    background-color: #000;
	color: #fff;
    border: 1px solid transparent;
}
.offerBlock {
    background-color: #000;
    color: #fff;
}

@media (max-width: 767px) {
.snap-content { background-color: #fff !important; }
}

/*------------------------------------*
    $LAYOUT
\*------------------------------------*/
.contentSectionE, .contentSectionO { padding: 50px 0; }

@media (max-width: 991px) and (min-width: 768px) {
.contentSectionE, .contentSectionO { padding: 35px 0; } 
}
@media (max-width: 767px) {
.contentSectionE, .contentSectionO { padding: 30px 0; }
}

/*------------------------------------*
    $ANCHOR
\*------------------------------------*/
a { color: #002c5f; }
a:hover, .btn:hover, .btn:active, .btn:focus { color: #014390; }
.bg-main a:not(.btn), .bg-alt4 a:not(.btn) { color: inherit; }
p a, p a:hover, p a:focus { text-decoration: underline; }
/*------------------------------------*
    $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 { }
/*------------------------------------*
    $WELL
\*------------------------------------*/
.well {
    box-shadow: none;
    border-radius: 0;
}
/*------------------------------------*
    $TABLE
\*------------------------------------*/
.table thead tr th { }
.table thead tr th, .table tbody tr th, .table tfoot tr th, .table thead tr d, .table tbody tr td, .table tfoot tr td { }
/*------------------------------------*
    $TABS
\*------------------------------------*/
.nav-tabs.nav-justified > li > a, .nav-tabs > li > a { background-color: #eee; }
.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: #002A44;
    border-color: transparent;
    color: #fff;
}
/*------------------------------------*
    $FORM CONTROL
\*------------------------------------*/
.input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn { border-radius: 0; }

/*------------------------------------*
    $NAV-INVERSE
\*------------------------------------*/
.navbar-inverse { }
/*------------------------------------*
    $PAGINATION
\*------------------------------------*/
.pagination { }
.pagination li a, .pagination li span { }
.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-radius: 0;
    font-weight: normal !important;
    transition: all 300ms ease-in-out 0s;
    padding: 8px 20px;
}
.btn-lg {
    padding: 10px 25px;
}
/*------------------------------------*
    $BTN_CTA
\*------------------------------------*/
.btn-cta {
    color: #fff;
    background: #002c5f;
    border-color: #002c5f;
}
.btn-cta:hover, .btn-cta:focus, .btn-cta:active, .btn-cta.active, .open > .dropdown-toggle.btn-cta {
    color: #fff;
    background: #014390;
    border-color: #014390;
}
/*------------------------------------*
    $BTN_MAIN
\*------------------------------------*/
.btn-main, .btn-alt3.active, .nav .btn-alt3.active {
    color: #fff;
    background-color: #000;
    border-color: #000;
}
.btn-main:hover, .btn-main:focus, .btn-main:active, .btn-main.active, .open .dropdown-toggle.btn-main {
    color: #fff;
    background-color: #002c5f;
    border-color: #002c5f;
}
/*------------------------------------*
    $BTN_ALT1
\*------------------------------------*/
.btn-alt1 {
    color: #222;
    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: #014390;
    border-color: #014390;
}
/*------------------------------------*
    $BTN_ALT2
\*------------------------------------*/
.btn-alt2 {
    color: #000;
    background-color: transparent;
    border-color: #000;
}
.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: #1f1f21;
    border-color: #1f1f21;
}
/*------------------------------------*
    $BTN_ALT3
\*------------------------------------*/
.btn-alt3 {
    color: #fff;
    background-color: #6e6e6e;
    border-color: #6e6e6e;
}
.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: #084590;
    border-color: #084590;
}
/*------------------------------------*
    $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: #fff;
    background-color: #014390;
    border-color: #014390;
}
/*------------------------------------*
    $BTN_ALT5
\*------------------------------------*/
.btn-alt5 {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}
.btn-alt5:hover, .btn-alt5:focus, .btn-alt5:active, .open .dropdown-toggle.btn-alt5, .nav .btn-alt5:hover, .nav .btn-alt5:focus, .nav .btn-alt5:active {
    color: #fff;
    background-color: #000;
    border-color: #000;
}
/*------------------------------------*
    $BTN_NAV1 and $BTN_NAV2
\*------------------------------------*/
.btn-nav1, .btn-nav2 {
    color: #000;
    background-color: transparent;
    border-color: transparent #ddd transparent #ddd;
}
.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: #000;
    background-color: #ddd;
    border-color: #ddd;
}

/*------------------------------------*
    $HOME_MISC
\*------------------------------------*/
.cpo-benefits .item-benefits {display: table; padding-bottom: 15px;}
.cpo-benefits .item-icon {padding-right: 25px; width: 60px;}
.cpo-benefits span {display: table-cell; vertical-align: top;}
.cpo-benefits .item-content img {height: 32px;}

@media (min-width: 992px) {
    .cpo-benefits .item-benefits {height: 115px;}
}

/*------------------------------------*
    $HOME_QUICK-NAV
\*------------------------------------*/
.quickNav a:hover { color: inherit; }
.quickNav .blockSec {overflow: hidden; background-color: rgba(0,44,95,1);}
.quickNav .imgHover {position: relative; margin: 7px 0; text-align: left;}
.quickNav .gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.8) 100%);
}
.quickNav .hoverSec {
    -moz-transition: all 700ms ease-in-out 0s;
    -webkit-transition: all 700ms ease-in-out 0s;
    transition: all 700ms ease-in-out 0s;
}
.quickNav a:hover .hoverSec {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: .4;
}
.quickNav .imgHover .title { 
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 15px 20px; 
    z-index: 3;
}
@media (max-width: 767px) {
    .quickNav .hoverSec {padding-top: 35% !important;}
}

/*------------------------------------*
    $HOME_INVENTORY SEARCH BUTTONS
\*------------------------------------*/
@media (max-width: 767px) {
.mobileSearchNewBlock, .mobileSearchUsedBlock, .mobileViewSpecialsBlock { position: relative; border-top: 2px solid #fff; }
.searchNewBlockM .btn, .searchUsedBlockM .btn, .specialsBlockM .btn { font-size: 20px; }
.searchNewBlockM, .searchUsedBlockM, .specialsBlockM { position: absolute; top: 25%; left: 5%; }
}
/*------------------------------------*
    $WIDGET_INVENTORY SEARCH
\*------------------------------------*/
#block1 {
    padding-left: 0;
    padding-right: 0;
}
#inventorySearchWidget {
    padding: 10px;
}
#inventorySearchWidget .isTitle {
    font-weight: normal !important;
    font-size: 22px;
}
.bannerWrapper.bannerLayout01 #block1 {
    box-shadow: none;
}
.bannerWrapper.bannerLayout01 #inventorySearchWidget .btn-main {
    background-color: #002c5f;
    border-color: #002c5f;
}
.bannerWrapper.bannerLayout01 #inventorySearchWidget .btn-main:hover {
    background-color: #014390;
    border-color: #014390;
}
.bannerWrapper.bannerLayout02,
.bannerWrapper.bannerLayout02 #block1 {
    box-shadow: none;
    padding: 0;
}
.bannerWrapper.bannerLayout02 #inventorySearchWidget {
    background: #2d96cd;
    padding: 10px 20px;
    color: #fff;
}
.bannerWrapper.bannerLayout02 #inventorySearchWidget .btn-main {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    margin-top: 10px;
}
.bannerWrapper.bannerLayout02 #inventorySearchWidget .btn-main:hover {
    background-color: #fff;
    color: #2d96cd;
    margin-top: 10px;
}

@media(min-width:1250px) {
    .bannerWrapper.bannerLayout02 #inventorySearchWidget { margin-top: 40px; }
}
@media(max-width:1249px) and (min-width:992px) {
    .bannerWrapper.bannerLayout02 #inventorySearchWidget { margin-top: 25px; }
}
@media(min-width:1200px) {
    .bannerWrapper.bannerLayout01 #block1 { padding-right: 30px; }
}
@media(min-width:992px) {
    .bannerWrapper { padding: 40px 0; }
}
/*------------------------------------*
    $WIDGET_BANNER
\*------------------------------------*/

/*------------------------------------*
    $SOCIAL_MEDIA
\*------------------------------------*/
.socialSec ul .fa { color: #fff; height: 35px; margin-right: 5px; padding-top: 9px; text-align: center; width: 35px; }

/*------------------------------------*
    $WIDGET_MODELBAR
\*------------------------------------*/
.modelBar.panel {
    border: none;
    padding: 0;
    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: #333;
}

@media(max-width:992px) {
.modelBar.panel {
    border: none;
    padding: 0 1em;
}
}

/*------------------------------------*
    $FOOTER
\*------------------------------------*/
footer { background-color: #f3f3f3; margin-top: 0 !important; }
footer .providerLogo { display: none !important; }
.homepage .fordGlobalDisclosure { padding: 25px 15px 15px; }

/*------------------------------------*
    $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: 123px; }
}

/*------------------------------------*
    $SRP/VDP
\*------------------------------------*/
.details-header .vehicle-title__year { color: #767676!important; }

/*------------------------------------*
    $MLD
\*------------------------------------*/
#offerBar { padding: 10px 0; }
#offerContainer { background-color: #000; }
#offerDropdownTitle { color: #FFF; }
.offerBlock ul {text-align: center; margin: 0;}

/*------------------------------------*
    $Click_To_Buy_ICON
\*------------------------------------*/
.ctb-logo{display: none !important}

/* DES-149858 */
#orderparts > .row > .col-md-6:nth-of-type(1) > .form-group:nth-of-type(5) { display: none; }
.navLinks ul.staffNav li a.staffNavTabs.navbar-inverse { color: var(--main-color); }
#mobileLeadDriverForm .help-block { color: inherit; }

a.learn-more-cta {  text-decoration: underline; }  
.about-container a.learn-more-cta { color: #fff; }