/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /*Tablet landscape was added specifically to target the "icon-close" within the legal section on the homepage tout. This icon should NOT show up on desktop but SHOULD show on ipads in landscape mode. The "medium" breakpoint will not work for this as it targets 1174px and below.*/ [class^="icon-"], .contains-mobile-drop-down > .model-nav-link:before, .accessory-image:after, .selectboxit-arrow-container:after, [class*=" icon-"], .contains-mobile-drop-down > .model-nav-link:before, .accessory-image:after, .selectboxit-arrow-container:after { font-family: 'honda-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-ig-alt:before { content: "\e900"; } .icon-menu:before { content: "\e600"; } .icon-close2:before { content: "\e909"; } .icon-trims:before { content: "\e603"; } .icon-gallery:before { content: "\e604"; } .icon-arrow-2-down:before, .selectboxit-arrow-container:after { content: "\e605"; } .icon-arrow-2-right:before { content: "\e606"; } .icon-download:before { content: "\e607"; } .icon-updates:before { content: "\e608"; } .icon-parts:before { content: "\e609"; } .icon-awards:before { content: "\e60a"; } .icon-warranty:before { content: "\e60b"; } .icon-special-offers:before { content: "\e60c"; } .icon-certified-used:before { content: "\e60d"; } .icon-financial:before { content: "\e60e"; } .icon-compare:before { content: "\e60f"; } .icon-wheel:before { content: "\e610"; } .icon-engine:before { content: "\e611"; } .icon-switch-view:before { content: "\e612"; } .icon-seat:before { content: "\e613"; } .icon-plus:before { content: "\e614"; } .icon-check:before { content: "\e615"; } .icon-minus:before { content: "\e616"; } .icon-minus-2:before { content: "\e617"; } .icon-plus-2:before { content: "\e618"; } .icon-arrow-right2:before { content: "\e619"; } .icon-arrow-up2:before { content: "\e61a"; } .icon-grid:before { content: "\e61b"; } .icon-power-equipment:before { content: "\e61c"; } .french .icon-power-equipment:before { content: "\e621"; } .icon-engines:before { content: "\e61d"; } .french .icon-engines:before { content: "\e636"; } .icon-honda_plus:before { content: "\e61e"; } .icon-search2:before { content: "\e61f"; } .icon-scale:before, .accessory-image:after { content: "\e620"; } .icon-power-equipment-fr:before { content: "\e621"; } .icon-sxs-fr:before { content: "\e622"; } .icon-atvs-fr:before { content: "\e623"; } .icon-arrow-left2:before { content: "\e624"; } .icon-merch:before { content: "\e625"; } .icon-payments:before { content: "\e626"; } .icon-find:before { content: "\e627"; } .icon-parts2:before { content: "\e628"; } .icon-marine:before { content: "\e629"; } .icon-sxs:before { content: "\e62a"; } .french .icon-sxs:before { content: "\e622"; } .icon-atvs:before { content: "\e62b"; } .french .icon-atvs:before { content: "\e623"; } .icon-motorcycles:before { content: "\e62c"; } .french .icon-motorcycles:before { content: "\e633"; } .icon-used:before { content: "\e62d"; } .icon-build:before { content: "\e62e"; } .icon-motorcycles-fr:before { content: "\e633"; } .icon-engines-fr:before { content: "\e636"; } .icon-acura:before { content: "\e639"; } .icon-honda:before { content: "\e63a"; } .icon-psp:before { content: "\e920"; } .french .icon-psp:before { content: "\e921"; } .icon-ig:before { content: "\e901"; } .icon-account:before { content: "\e902"; } .icon-logo-primary:before { content: "\e903"; } .icon-fb:before { content: "\e904"; } .icon-yt:before { content: "\e905"; } .icon-twit:before { content: "\e906"; } .icon-search:before { content: "\e907"; } .icon-settings:before { content: "\e908"; } .icon-close:before { content: "\e602"; } .icon-arrow-up:before { content: "\e61a"; } .icon-arrow-down:before, .contains-mobile-drop-down > .model-nav-link:before { content: "\e601"; } .icon-chat:before { content: "\e90c"; } .icon-lock:before { content: "\e90d"; } .icon-menu2:before { content: "\e90e"; } .icon-pin:before { content: "\e90f"; } .icon-arrow-left:before { content: "\e910"; } .icon-arrow-right:before { content: "\e911"; } .icon-footer-honda:before { content: "\e912"; } .icon-myaccount:before { content: "\e913"; } @font-face { font-family: 'HelveticaNeueLT-Light'; src: url("/client/fonts/316021_0_0.eot"); src: url("/client/fonts/316021_0_0.eot?#iefix") format("embedded-opentype"), url("/client/fonts/316021_0_0.woff2") format("woff2"), url("/client/fonts/316021_0_0.woff") format("woff"), url("/client/fonts/316021_0_0.ttf") format("truetype"); } @font-face { font-family: 'HelveticaNeueLT-Bold'; src: url("/client/fonts/2EDEC5_0_0.eot"); src: url("/client/fonts/2EDEC5_0_0.eot?#iefix") format("embedded-opentype"), url("/client/fonts/2EDEC5_0_0.woff2") format("woff2"), url("/client/fonts/2EDEC5_0_0.woff") format("woff"), url("/client/fonts/2EDEC5_0_0.ttf") format("truetype"); } @font-face { font-family: 'HelveticaNeueLT-Roman'; src: url("/client/fonts/2EDEC5_1_0.eot"); src: url("/client/fonts/2EDEC5_1_0.eot?#iefix") format("embedded-opentype"), url("/client/fonts/2EDEC5_1_0.woff2") format("woff2"), url("/client/fonts/2EDEC5_1_0.woff") format("woff"), url("/client/fonts/2EDEC5_1_0.ttf") format("truetype"); } @font-face { font-family: 'founders'; src: url("/client/fonts/FoundersGroteskCond-SmBd.eot"); src: url("/client/fonts/FoundersGroteskCond-SmBd.eot?#iefix") format("embedded-opentype"), url("/client/fonts/FoundersGroteskCond-SmBd.woff") format("woff"); font-weight: 600; font-style: normal; } @font-face { font-family: 'founders'; src: url("/client/fonts/FoundersGroteskCondensedWeb-Medium.eot"); src: url("/client/fonts/FoundersGroteskCondensedWeb-Medium.eot?#iefix") format("embedded-opentype"), url("/client/fonts/FoundersGroteskCondensedWeb-Medium.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: 'national'; src: url("/client/fonts/NationalWebLF-Regular.eot"); src: url("/client/fonts/NationalWebLF-Regular.eot?#iefix") format("embedded-opentype"), url("/client/fonts/NationalWebLF-Regular.woff") format("woff"), url("/client/fonts/NationalWebLF-Regular.ttf") format("truetype"), url("/client/fonts/NationalWebLF-Regular.svg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'national'; src: url("/client/fonts/NationalWeb-Light.eot"); src: url("/client/fonts/NationalWeb-Light.eot?#iefix") format("embedded-opentype"), url("/client/fonts/NationalWeb-Light.woff") format("woff"), url("/client/fonts/NationalWeb-Light.ttf") format("truetype"), url("/client/fonts/NationalWeb-Light.svg") format("svg"); font-weight: 300; font-style: normal; } @font-face { font-family: 'national'; src: url("/client/fonts/NationalWeb-Bold.eot"); src: url("/client/fonts/NationalWeb-Bold.eot?#iefix") format("embedded-opentype"), url("/client/fonts/NationalWeb-Bold.woff") format("woff"), url("/client/fonts/NationalWeb-Bold.ttf") format("truetype"), url("/client/fonts/NationalWeb-Bold.svg") format("svg"); font-weight: 700; font-style: normal; } @font-face { font-family: 'national'; src: url("/client/fonts/NationalWebLF-Semibold.eot"); src: url("/client/fonts/NationalWebLF-Semibold.eot?#iefix") format("embedded-opentype"), url("/client/fonts/NationalWebLF-Semibold.woff") format("woff"), url("/client/fonts/NationalWebLF-Semibold.ttf") format("truetype"), url("/client/fonts/NationalWebLF-Semibold.svg") format("svg"); font-weight: 600; font-style: normal; } @font-face { font-family: 'honda-icons'; src: url("/client/fonts/honda-icons.eot?l0k7y4"); src: url("/client/fonts/honda-icons.eot?#iefixl0k7y4") format("embedded-opentype"), url("/client/fonts/honda-icons.woff?l0k7y4") format("woff"), url("/client/fonts/honda-icons.ttf?l0k7y4") format("truetype"), url("/client/fonts/honda-icons.svg?l0k7y4#honda-icons") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Material Icons'; src: url("/client/fonts/MaterialIcons-Regular.eot"); src: url("/client/fonts/MaterialIcons-Regular.eot?#iefix") format("embedded-opentype"), url("/client/fonts/MaterialIcons-Regular.woff2") format("woff2"), url("/client/fonts/MaterialIcons-Regular.woff") format("woff"), url("/client/fonts/MaterialIcons-Regular.ttf") format("truetype"), url("/client/fonts/MaterialIcons-Regular.svg#materialdesignicons-lightlight") format("svg"); font-weight: normal; font-style: normal; } .gallery-rotator .flickity-prev-next-button { display: block; width: 12%; height: 480px; background: red; border-radius: 0; opacity: 1; background: transparent; } /*File path has been adjusted to absolute paths to fix IE issues on INT & UAT */ .gallery-rotator .flickity-prev-next-button.previous { left: 0; cursor: url("/client/img/cursor_left.cur"), auto; } /*File path has been adjusted to absolute paths to fix IE issues on INT & UAT */ .gallery-rotator .flickity-prev-next-button.next { right: 0; cursor: url("/client/img/cursor_right.cur"), auto; } .gallery-rotator .flickity-prev-next-button svg { display: none; } .unveil-hide img { opacity: 0; transition: opacity .3s ease-in; } @media screen and (min-width: 1173px) { .desktop-hide { display: none !important; } } @media screen and (min-width: 767px) and (max-width: 1174px) { .tablet-hide { display: none !important; } } .accessibility-container { position: relative; z-index: 999; } .accessibility-container .next, .accessibility-container .prev { position: absolute; top: 0; background-color: white; border: 1px solid #0d9be4; color: black; opacity: 0; font-family: "HelveticaNeueLT-Roman"; font-size: 10px; padding-left: 5px; padding-top: 10px; } .accessibility-container .next:focus, .accessibility-container .prev:focus { opacity: 1; } .accessibility-container .prev { left: 0; top: 0; width: 40px; height: 40px; } .accessibility-container .next { right: 0; width: 35px; height: 35px; } .aoda-skip { padding: 20px; width: 100%; text-align: center; background: white; border-bottom: #0d9be4 1px solid; display: block; font-size: 14px; color: black; font-family: "HelveticaNeueLT-Roman"; font-weight: 300; text-decoration: underline; position: absolute; top: -100px; } .aoda-skip:focus { position: relative; top: 0; z-index: 100; } .element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); height: 1px; width: 1px; overflow: hidden; /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } /* ========================================================================== Remodal's necessary styles ========================================================================== */ /* Hide scroll bar */ /* fix zoom issue on modal popup https://github.com/VodkaBears/Remodal/issues/155 */ html.remodal-is-locked { overflow: auto; -ms-touch-action: none; touch-action: none; } /* Anti FOUC */ .remodal, [data-remodal-id] { display: none; } /* Necessary styles of the overlay */ .remodal-overlay { position: fixed; z-index: 9999; top: -5000px; right: -5000px; bottom: -5000px; left: -5000px; display: none; } /* Necessary styles of the wrapper */ .remodal-wrapper { position: fixed; z-index: 10000; top: 0; right: 0; bottom: 0; left: 0; display: none; overflow: auto; text-align: center; -webkit-overflow-scrolling: touch; } .remodal-wrapper:after { display: inline-block; height: 100%; margin-left: -0.05em; content: ""; } /* Fix iPad, iPhone glitches */ .remodal-overlay, .remodal-wrapper { backface-visibility: hidden; } @media screen and (max-width: 767px) { .remodal-overlay, .remodal-wrapper { display: none !important; } } /* Necessary styles of the modal dialog */ .remodal { position: relative; outline: none; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } .remodal-is-initialized { /* Disable Anti-FOUC */ display: inline-block; } /* ========================================================================== Remodal's default mobile first theme ========================================================================== */ /* Default theme styles for the background */ .remodal-bg.remodal-is-opening, .remodal-bg.remodal-is-opened { filter: blur(3px); } /* Default theme styles of the overlay */ .remodal-overlay { background: rgba(255, 255, 255, 0.9); } .remodal-overlay.remodal-is-opening, .remodal-overlay.remodal-is-closing { animation-duration: 0.3s; animation-fill-mode: forwards; } .remodal-overlay.remodal-is-opening { animation-name: remodal-overlay-opening-keyframes; } .remodal-overlay.remodal-is-closing { animation-name: remodal-overlay-closing-keyframes; } /* Default theme styles of the wrapper */ .remodal-wrapper { padding: 10px 10px 0; } /* Default theme styles of the modal dialog */ .remodal { box-sizing: border-box; width: 100%; margin-bottom: 10px; transform: translate3d(0, 0, 0); color: #2b2e38; background: #fff; } .remodal.remodal-is-opening, .remodal.remodal-is-closing { animation-duration: 0.3s; animation-fill-mode: forwards; } .remodal.remodal-is-opening { animation-name: remodal-opening-keyframes; } .remodal.remodal-is-closing { animation-name: remodal-closing-keyframes; } /* Vertical align of the modal dialog */ .remodal, .remodal-wrapper:after { vertical-align: middle; } /* Close button */ .remodal-close { position: absolute; top: 0; right: -35px; display: block; overflow: visible; width: 35px; height: 35px; margin: 0; padding: 0; cursor: pointer; transition: color 0.2s; text-decoration: none; color: #95979c; border: 0; outline: 0; background: transparent; } @media screen and (max-width: 1173px) { .remodal-close { right: 0; top: -30px; } } .remodal-close:hover, .remodal-close:focus { color: #2b2e38; } .remodal-close:before { font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important; font-size: 40px; line-height: 35px; position: absolute; top: 0; left: 0; display: block; width: 35px; content: "\00d7"; text-align: center; } /* Dialog buttons */ .remodal-confirm, .remodal-cancel { font: inherit; display: inline-block; overflow: visible; min-width: 110px; margin: 0; padding: 12px 0; cursor: pointer; transition: background 0.2s; text-align: center; vertical-align: middle; text-decoration: none; border: 0; outline: 0; } .remodal-confirm { color: #fff; background: #81c784; } .remodal-confirm:hover, .remodal-confirm:focus { background: #66bb6a; } .remodal-cancel { color: #fff; background: #e57373; } .remodal-cancel:hover, .remodal-cancel:focus { background: #ef5350; } /* Remove inner padding and border in Firefox 4+ for the button tag. */ .remodal-confirm::-moz-focus-inner, .remodal-cancel::-moz-focus-inner, .remodal-close::-moz-focus-inner { padding: 0; border: 0; } /* Keyframes ========================================================================== */ @keyframes remodal-opening-keyframes { from { transform: scale(1.05); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes remodal-closing-keyframes { from { transform: scale(1); opacity: 1; } to { transform: scale(0.95); opacity: 0; } } @keyframes remodal-overlay-opening-keyframes { from { opacity: 0; } to { opacity: 1; } } @keyframes remodal-overlay-closing-keyframes { from { opacity: 1; } to { opacity: 0; } } /* Media queries ========================================================================== */ @media only screen and (min-width: 641px) { .remodal { max-width: 853px; } } /* IE8 ========================================================================== */ .lt-ie9 .remodal-overlay { background: #2b2e38; } .lt-ie9 .remodal { width: 700px; } .iframe-wrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: 853px; } .remodal .social-media-container { background: white; padding: 15px 10px 15px 10px; font-size: 0; border-bottom: 1px solid #dadada; border-left: 1px solid #dadada; border-right: 1px solid #dadada; } .remodal .video-title { display: inline-block; text-align: left; width: 45%; vertical-align: middle; } .remodal .video-title span { color: black; font-size: 14px; line-height: 18px; display: block; font-family: "HelveticaNeueLT-Roman"; } .remodal .social-media-share { display: inline-block; width: 45%; vertical-align: middle; } .remodal .social-media-share li { display: inline-block; margin-left: 10px; vertical-align: middle; } .remodal .social-media-share li:first-child { margin-left: 0; } /*! Flickity v1.0.2 http://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: grabbing; } /* ---- previous/next buttons ---- */ .flickity-prev-next-button { display: none; position: absolute; top: 50%; width: 44px; height: 44px; border: none; border-radius: 50%; background: white; background: rgba(255, 255, 255, 0.75); cursor: pointer; /* vertically center */ transform: translateY(-50%); } .flickity-prev-next-button:hover { background: white; } .flickity-prev-next-button:focus { outline: none; box-shadow: 0 0 0 5px #09F; } .flickity-prev-next-button:active { filter: alpha(opacity=60); /* IE8 */ opacity: 0.6; } .flickity-prev-next-button.previous { left: 10px; } .flickity-prev-next-button.next { right: 10px; } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; } .flickity-prev-next-button:disabled { filter: alpha(opacity=30); /* IE8 */ opacity: 0.3; cursor: auto; } .flickity-prev-next-button svg { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } .flickity-prev-next-button .arrow { fill: #333; } /* color & size if no SVG - IE8 and Android 2.3 */ .flickity-prev-next-button.no-svg { color: #333; font-size: 26px; } /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; height: 5px; bottom: 0; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; width: 50px; height: 5px; margin: 0 5px; background: #ababab; cursor: pointer; vertical-align: top; } @media screen and (max-width: 767px) { .flickity-page-dots .dot { width: 10px; height: 10px; } } .flickity-page-dots .dot.is-selected { background: #ff2841; } .rotator { padding-bottom: 30px; } .rotator-cell { margin-right: 40px; } .rotator-cell-caption { background: white; padding: 40px 40px 80px 40px; position: relative; top: -2px; text-align: center; } @media screen and (max-width: 1173px) { .rotator-cell-caption { padding: 40px 30px 80px 30px; } } @media screen and (max-width: 767px) { .rotator-cell-caption { padding: 25px 20px 60px 20px; } } .rotator-cell-title { font-size: 40px; display: inline-block; margin: 0 auto; color: black; font-family: "national"; font-weight: 300; text-align: center; } @media screen and (max-width: 767px) { .rotator-cell-title { font-size: 25px; } } .rotator-cell-placeholder .rotator-cards-two-item { background-color: gray; } .features-rotator { padding-bottom: 16px; margin-left: 40px; } @media screen and (max-width: 1173px) { .features-rotator { margin-left: 0px; } } .features-rotator .rotator-cell { width: 510px; margin-bottom: 20px; } @media screen and (max-width: 1173px) { .features-rotator .rotator-cell { transform: translateX(31px); } } @media screen and (max-width: 767px) { .features-rotator .rotator-cell { transform: translateX(20px); margin-right: 10px; } .features-rotator .rotator-cell .feature-video .iframe-wrapper-mobile iframe { max-height: 144px; } } .wallpapers-rotator { padding-bottom: 16px; margin-left: 40px; } @media screen and (max-width: 1173px) { .wallpapers-rotator { margin-left: 0px; } } .wallpapers-rotator .rotator-cell { width: calc(25% - 38px); margin-bottom: 20px; } @media screen and (max-width: 1173px) { .wallpapers-rotator .rotator-cell { transform: translateX(31px); } } @media screen and (max-width: 767px) { .wallpapers-rotator .rotator-cell { margin-right: 5px; width: 210px; } } .trims-preview-rotator { margin-top: 0; margin-left: 40px; } @media screen and (max-width: 1173px) { .trims-preview-rotator { margin-left: 0px; } } .trims-preview-rotator .flickity-slider { padding: 10px 0 60px; } .trims-preview-rotator .rotator-cell { margin-bottom: 20px; width: 616px; } @media screen and (max-width: 1173px) { .trims-preview-rotator .rotator-cell { transform: translateX(31px); } } @media screen and (max-width: 767px) { .trims-preview-rotator .rotator-cell { transform: translateX(20px); width: 255px; margin-right: 10px; } } @media screen and (min-width: 1173px) { .no-touchevents .trims-preview-rotator .rotator-cards-two-item:hover { transform: scale(1.05); } } .page-tout-rotator-wrapper { position: relative; } .page-tout-rotator { padding-bottom: 0; } .page-tout-rotator .flickity-prev-next-button { display: block; width: 15%; height: 80%; background: red; border-radius: 0; opacity: 0; background: white; /*File path has been adjusted to absolute paths to fix IE issues on INT & UAT */ } .page-tout-rotator .flickity-prev-next-button svg { display: none; } .page-tout-rotator .flickity-prev-next-button.previous { left: 0; /*File path has been adjusted to absolute paths to fix IE issues on INT & UAT */ cursor: url("/client/img/cursor_left.cur"), auto; } .page-tout-rotator .flickity-prev-next-button.next { right: 0; cursor: url("/client/img/cursor_right.cur"), auto; } @media screen and (max-width: 767px) { .page-tout-rotator .flickity-prev-next-button { display: none; } } .page-tout-rotator .rotator-cell { width: 100%; margin-right: 0; } .page-tout-rotator .rotator-cell img { width: 100%; } .page-tout-rotator .flickity-page-dots { bottom: 40px; } @media screen and (max-width: 1173px) { .page-tout-rotator .flickity-page-dots { bottom: 47px; } } @media screen and (max-width: 767px) { .page-tout-rotator .flickity-page-dots { bottom: 35px; } } /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar { -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action { -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox { /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container { /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container { margin-right: 30px; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container { /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools { /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 16px; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools { right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer { /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer { margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail { width: 2px; height: 100%; margin: 0 auto; border-radius: 16px; } .mCSB_scrollTools .mCSB_dragger { /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { /* the dragger element */ position: relative; width: 4px; height: 100%; margin: 0 auto; border-radius: 16px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 8px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown { display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown { bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 3. HORIZONTAL SCROLLBAR x-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_horizontal.mCSB_inside > .mCSB_container { margin-right: 0; margin-bottom: 30px; } .mCSB_horizontal.mCSB_outside > .mCSB_container { min-height: 100%; } .mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0; } /* non-visible scrollbar */ .mCSB_scrollTools.mCSB_scrollTools_horizontal { width: auto; height: 16px; top: auto; right: 0; bottom: 0; left: 0; } .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: -26px; } /* scrollbar position: outside */ .mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer { margin: 0 20px; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 2px; margin: 7px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger { width: 30px; /* minimum dragger width */ height: 100%; left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { height: 12px; /* auto-expanded scrollbar */ margin: 2px auto; } .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 8px; /* auto-expanded scrollbar */ margin: 4px 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { display: block; position: absolute; width: 20px; height: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft { left: 0; } .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight { right: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper { position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container { padding-right: 30px; padding-bottom: 30px; box-sizing: border-box; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical { bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal { right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal { left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper { /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container { padding-right: 0; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container { padding-bottom: 0; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden { margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight { transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail { transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools { opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools { opacity: 0; filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight { background-image: url(mCSB_buttons.png); /* css sprites */ background-repeat: no-repeat; opacity: 0.4; filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; } .mCSB_scrollTools .mCSB_buttonUp { background-position: 0 0; /* sprites locations light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px */ } .mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -20px; /* sprites locations light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px */ } .mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -40px; /* sprites locations light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px */ } .mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -56px; /* sprites locations light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px */ } .mCSB_scrollTools .mCSB_buttonUp:hover, .mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover { opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCSB_scrollTools .mCSB_buttonUp:active, .mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active { opacity: 0.9; filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; } /* theme: "dark" */ .mCS-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.15); } .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: rgba(0, 0, 0, 0.85); } .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: rgba(0, 0, 0, 0.9); } .mCS-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0; } .mCS-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px; } .mCS-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px; } /* ---------------------------------------- */ /* theme: "light-2", "dark-2" */ .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.1); border-radius: 1px; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.75); border-radius: 1px; } .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 4px; margin: 6px auto; } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); } .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); } .mCS-light-2.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px 0; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -20px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -40px; } .mCS-light-2.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -56px; } /* theme: "dark-2" */ .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); border-radius: 1px; } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px 0; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -20px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -40px; } .mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -56px; } /* ---------------------------------------- */ /* theme: "light-thick", "dark-thick" */ .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail { width: 4px; background-color: #fff; background-color: rgba(255, 255, 255, 0.1); border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; background-color: #fff; background-color: rgba(255, 255, 255, 0.75); border-radius: 2px; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 4px; margin: 6px 0; } .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 6px; margin: 5px auto; } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); } .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -16px 0; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -16px -20px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -20px -40px; } .mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -20px -56px; } /* theme: "dark-thick" */ .mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); border-radius: 2px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -96px 0; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -96px -20px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -100px -40px; } .mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -100px -56px; } /* ---------------------------------------- */ /* theme: "light-thin", "dark-thin" */ .mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255, 255, 255, 0.1); } .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 2px; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; } .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 2px; margin: 7px auto; } /* theme "dark-thin" */ .mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.15); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px 0; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -20px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -40px; } .mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -56px; } /* ---------------------------------------- */ /* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */ .mCS-rounded.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255, 255, 255, 0.15); } .mCS-rounded.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger { height: 14px; } .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 14px; margin: 0 1px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger { width: 14px; } .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 14px; margin: 1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 16px; /* auto-expanded scrollbar */ height: 16px; margin: -1px 0; } .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 4px; /* auto-expanded scrollbar */ } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { height: 16px; /* auto-expanded scrollbar */ width: 16px; margin: 0 -1px; } .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 4px; /* auto-expanded scrollbar */ margin: 6px 0; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonUp { background-position: 0 -72px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonDown { background-position: 0 -92px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft { background-position: 0 -112px; } .mCS-rounded.mCSB_scrollTools .mCSB_buttonRight { background-position: 0 -128px; } /* theme "rounded-dark", "rounded-dots-dark" */ .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.15); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -80px -72px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -80px -92px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -80px -112px; } .mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -80px -128px; } /* theme "rounded-dots", "rounded-dots-dark" */ .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail { width: 4px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { background-color: transparent; background-position: center; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg=="); background-repeat: repeat-y; opacity: 0.3; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { height: 4px; margin: 6px 0; background-repeat: repeat-x; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp { background-position: -16px -72px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown { background-position: -16px -92px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft { background-position: -20px -112px; } .mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight { background-position: -20px -128px; } /* theme "rounded-dots-dark" */ .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII="); } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -96px -72px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -96px -92px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -100px -112px; } .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -100px -128px; } /* ---------------------------------------- */ /* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */ .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-repeat: repeat-y; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { background-repeat: repeat-x; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); } /* theme "3d", "3d-dark" */ .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger { height: 70px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger { width: 70px; } .mCS-3d.mCSB_scrollTools, .mCS-3d-dark.mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { border-radius: 16px; } .mCS-3d.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail { width: 8px; background-color: #000; background-color: rgba(0, 0, 0, 0.2); box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.5), inset -1px 0 1px rgba(255, 255, 255, 0.2); } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #555; } .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 8px; } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 8px; margin: 4px 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.2); } .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { width: 100%; height: 8px; margin: 4px auto; } .mCS-3d.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-3d.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme "3d-dark" */ .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1); } .mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "3d-thick", "3d-thick-dark" */ .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools { opacity: 1; filter: "alpha(opacity=30)"; -ms-filter: "alpha(opacity=30)"; } .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer { border-radius: 7px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { border-radius: 5px; } .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical { right: 1px; } .mCS-3d-thick.mCSB_scrollTools_vertical, .mCS-3d-thick-dark.mCSB_scrollTools_vertical { box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5); } .mCS-3d-thick.mCSB_scrollTools_horizontal, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal { bottom: 1px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4); width: 12px; margin: 2px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #555; } .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 12px; width: auto; } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer { background-color: #000; background-color: rgba(0, 0, 0, 0.05); box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1); } .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme: "3d-thick-dark" */ .mCS-3d-thick-dark.mCSB_scrollTools { box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #777; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer { background-color: #fff; background-color: rgba(0, 0, 0, 0.05); box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1); } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* ---------------------------------------- */ /* theme: "minimal", "minimal-dark" */ .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical { right: 0; margin: 12px 0; } .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal { bottom: 0; margin: 0 12px; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical { left: 0; right: auto; } .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; } .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger { height: 50px; } .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger { width: 50px; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* theme: "minimal-dark" */ .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.2); filter: "alpha(opacity=20)"; -ms-filter: "alpha(opacity=20)"; } .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.5); filter: "alpha(opacity=50)"; -ms-filter: "alpha(opacity=50)"; } /* ---------------------------------------- */ /* theme "light-3", "dark-3" */ .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail { width: 6px; background-color: #000; background-color: rgba(0, 0, 0, 0.2); } .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; } .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 6px; margin: 5px 0; } .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 12px; } .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { height: 12px; margin: 2px 0; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-light-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme "dark-3" */ .mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* ---------------------------------------- */ /* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */ .mCS-inset.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail { width: 12px; background-color: #000; background-color: rgba(0, 0, 0, 0.2); } .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { width: 6px; margin: 3px 5px; position: absolute; height: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar { height: 6px; margin: 5px 3px; position: absolute; width: auto; top: 0; bottom: 0; left: 0; right: 0; } .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail { width: 100%; height: 12px; margin: 2px 0; } .mCS-inset.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp { background-position: -32px -72px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown { background-position: -32px -92px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft { background-position: -40px -112px; } .mCS-inset.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight { background-position: -40px -128px; } /* theme "inset-dark", "inset-2-dark", "inset-3-dark" */ .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.1); } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp { background-position: -112px -72px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown { background-position: -112px -92px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft { background-position: -120px -112px; } .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight { background-position: -120px -128px; } /* theme "inset-2", "inset-2-dark" */ .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: transparent; border-width: 1px; border-style: solid; border-color: #fff; border-color: rgba(255, 255, 255, 0.2); box-sizing: border-box; } .mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail { border-color: #000; border-color: rgba(0, 0, 0, 0.2); } /* theme "inset-3", "inset-3-dark" */ .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail { background-color: #fff; background-color: rgba(255, 255, 255, 0.6); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail { background-color: #000; background-color: rgba(0, 0, 0, 0.6); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.75); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.85); } .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #000; background-color: rgba(0, 0, 0, 0.9); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.75); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.85); } .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); } /* ---------------------------------------- */ /* apply a natural box layout model to all elements, but allowing components to change */ html { box-sizing: border-box; -webkit-font-smoothing: antialiased; } *, *:after, *:before { box-sizing: inherit; } body { background-color: #f1f1f1; -webkit-text-size-adjust: 100%; overflow-x: hidden; } @media screen and (min-width: 767px) and (max-width: 1173px) { body { left: 0; position: relative; } } .dn { display: none; } a { text-decoration: none; } sup { position: relative; top: -4px; font-size: smaller; } .container { margin: 0 auto; padding: 0 40px; max-width: 1174px; } @media screen and (max-width: 1173px) { .container { padding: 0 30px; } } @media screen and (max-width: 767px) { .container { padding: 0 20px; } } .page-gutter { padding-top: 76px; } @media screen and (max-width: 1173px) { .page-gutter { padding-top: 40px; } } @media screen and (max-width: 767px) { .page-gutter { padding-top: 0; } } @media screen and (max-width: 1173px) { .page-gutter.homepage { padding-top: 0; } } .page-gutter-sub-page { padding-top: 76px; } @media screen and (max-width: 1173px) { .page-gutter-sub-page { padding-top: 40px; } } @media screen and (max-width: 767px) { .page-gutter-sub-page { padding-top: 20px; } } .remove-scroll { position: fixed; width: 100%; } .sr-only { position: absolute !important; top: -9999px !important; left: -9999px !important; font-size: 0; overflow: hidden; width: 1px; height: 1px; opacity: 0; } .popover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(241, 241, 241, 0.98); z-index: 1000; display: none; text-align: center; overflow-y: scroll; } @media screen and (max-width: 1173px) { .popover { text-align: left; background: #f1f1f1; } } .popover-close { position: fixed; top: 48px; right: 48px; color: #ababab; font-size: 18px; transition: color 0.05s; background: rgba(241, 241, 241, 0.98); z-index: 10; } .popover-close:hover { color: #1b1b1b; } @media screen and (max-width: 767px) { .popover-close { top: 20px; right: 20px; background: #f1f1f1; } } .popover-content { position: relative; top: 50%; transform: translateY(-50%); padding-top: 48px; padding-bottom: 48px; } .popover-content.remove-alignment { position: static; top: 0; transform: translateY(0); } @media screen and (max-width: 767px) { .popover-content { position: static; top: 0; transform: translateY(0); } } .popover-content .wysiwyg-wrapper h3 { font-size: 19px; color: #1b1b1b; font-family: 'HelveticaNeueLT-Bold', arial, sans-serif; margin-bottom: 35px; } .popover-content .wysiwyg-wrapper p { font-size: 12px; line-height: 22px; font-family: 'HelveticaNeueLT-Roman', arial, sans-serif; } .popover-title { font-size: 19px; color: #1b1b1b; font-family: 'HelveticaNeueLT-Bold', arial, sans-serif; margin-bottom: 35px; } .popover-description { font-size: 12px; line-height: 22px; font-family: 'HelveticaNeueLT-Roman', arial, sans-serif; } .model-page-subnav { border: 1px solid black; border-radius: 3px; display: table; float: right; } @media screen and (max-width: 767px) { .model-page-subnav { display: none; } } .model-page-subnav a { color: black; padding: 7px 15px; font-size: 14px; font-family: 'HelveticaNeueLT-Bold'; text-align: center; border-left: 1px solid black; display: table-cell; vertical-align: middle; line-height: 16px; border-spacing: 0; } .model-page-subnav a:first-child { border-left: none; } .model-page-subnav a.active { background-color: black; color: white; } @media screen and (max-width: 767px) { .model-page-subnav.alt { display: block; margin-top: 20px; width: 100%; font-size: 0; } .model-page-subnav.alt a { margin-left: 0; width: 50%; display: inline-block; height: 100%; font-size: 11px; text-align: center; padding-left: 0; padding-right: 0; } } .alt-heading { font-size: 42px; font-family: "HelveticaNeueLT-Bold"; text-transform: capitalize; } .alt-heading .highlight { color: #b7b7b7; } .alt-heading.main { padding: 35px 30px; } @media screen and (max-width: 767px) { .alt-heading.main { padding-top: 16px; padding-bottom: 16px; } } @media screen and (max-width: 1173px) { .alt-heading { font-size: 37px; } } @media screen and (max-width: 767px) { .alt-heading { font-size: 25px; } } .paragraph-style-one { line-height: 22px; font-size: 15px; } .paragraph-style-one a { color: #4b9be3; } .tooltip { background-color: black; cursor: pointer; border-radius: 100px; width: 12px; height: 12px; display: inline-block; vertical-align: middle; position: relative; font-family: 'HelveticaNeueLT-Roman'; } .tooltip:hover .tooltip-popup { display: block; } @media screen and (max-width: 767px) { .tooltip { position: relative; top: 0; left: 0; width: 12px; height: 12px; } } .tooltip:after { content: '?'; position: absolute; top: 3px; left: 4px; text-align: center; color: white; font-size: 7px; font-weight: bold; } @media screen and (max-width: 767px) { .tooltip:after { font-size: 6px; left: 4px; top: 3px; } } .tooltip .tooltip-popup { background-color: white; box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.2); font-family: 'HelveticaNeueLT-Roman'; position: absolute; top: -103px; right: -24px; width: 180px; padding: 15px 20px; border-radius: 3px; display: none; font-size: 9px; line-height: 15px; cursor: default; z-index: 5; text-align: left; } @media screen and (max-width: 767px) { .tooltip .tooltip-popup { right: -85px; } } .tooltip .tooltip-popup.alt-bottom { top: 25px; right: -8px; } @media screen and (max-width: 767px) { .tooltip .tooltip-popup.alt-bottom { right: -8px; } } .tooltip .tooltip-popup.alt-bottom:after { top: -9px; bottom: auto; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid white; border-top: none; right: 4px; margin: 0; left: auto; } .tooltip .tooltip-popup.alt-bottom:before { top: -10px; bottom: auto; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #d2d2d2; border-top: none; right: 4px; margin: 0; left: auto; } .tooltip .tooltip-popup:after { content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid white; position: absolute; bottom: -9px; right: 20px; } @media screen and (max-width: 767px) { .tooltip .tooltip-popup:after { left: 0; right: 0; margin: 0 auto; } } .tooltip .tooltip-popup:before { content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #d2d2d2; position: absolute; bottom: -11px; right: 20px; } @media screen and (max-width: 767px) { .tooltip .tooltip-popup:before { left: 0; right: 0; margin: 0 auto; } } .french .tooltip .tooltip-popup { top: -132px; } .french .tooltip .tooltip-popup.alt-bottom { top: 25px; } .scroll-wrapper { height: 90%; overflow: hidden; } .flip-item { transform: translate3d(0, 0, 0); -ms-backface-visibility: hidden; backface-visibility: hidden; } .flip-item.flipping .back, .flip-item.flipping .front { transform: translate3d(0, 0, 0); -ms-backface-visibility: hidden; backface-visibility: hidden; } .flip-item.flipped .front { overflow: hidden; } .flip-item:not(.flipped) .back * { opacity: 0; } .flip-item .back * { opacity: 1; transition: 0.5s opacity; } .mCSB_dragger_bar { border: 1px solid #ddd; background-color: white !important; } .legal-copy:focus { outline: none; } .dropdown-wrapper { position: relative; display: inline-block; } @media screen and (max-width: 767px) { .dropdown-wrapper { width: 100%; } } .dropdown-wrapper sup { font-size: 50%; font-weight: normal; } .touchevents .dropdown-wrapper { z-index: 10; } .validation-summary-errors, .field-validation-error { border: 1px solid red; color: #ed1c24; background-color: #f3e6e7; box-shadow: none; position: relative; min-height: 1em; padding: 1em 1.5em; line-height: 1.4285em; } .validation-summary-errors li { opacity: .85; margin: 0 0 .75em; } .validation-summary-errors li:last-child { margin-bottom: 0; } .field-validation-error { display: block; margin-top: -3px; margin-bottom: .75em; padding-top: 0; border-top: none; } .field-validation-error:last-child { margin-bottom: 0; } .input-validation-error { border-color: red; } .ajax-server-error { display: none; } .main-heading { font-size: 34px; margin: 0 auto; margin-bottom: 25px; color: black; font-family: "national"; font-weight: 300; } @media screen and (max-width: 767px) { .main-heading { font-size: 25px; } } @media screen and (max-width: 1173px) { body, html { overflow-x: hidden; width: 100%; } } .fl { float: left; } .fr { float: right; } .clr { clear: both; } .link-1 { font-size: 20px; color: #0d9be4; line-height: 30px; display: inline-block; font-family: "HelveticaNeueLT-Light"; } .link-1:hover .circle-icon-wrapper { background: #0d9be4; color: #fff; } @media screen and (max-width: 767px) { .link-1 { font-size: 13px; } } .link-1-text { display: inline-block; line-height: 30px; position: relative; top: 2px; margin-right: 4px; vertical-align: middle; } @media screen and (max-width: 767px) { .link-1-text { line-height: 22px; } } .link-1-img { vertical-align: middle; display: inline-block; } .circle-icon-wrapper { border: 1px solid #0d9be4; color: #0d9be4; border-radius: 100%; position: relative; width: 30px; height: 30px; text-align: center; display: inline-block; font-size: 6px; vertical-align: middle; transition: all 0.03s; margin-top: 5px; } .circle-icon-wrapper.icon-arrow-2-right:before { top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; } @media screen and (max-width: 1173px) { .circle-icon-wrapper { width: 20px; height: 20px; font-size: 4px; line-height: 1; margin-top: 2px; padding-top: 7px; } } .circle-icon { width: 25px; height: 25px; line-height: 25px; background: #c4c4c4; border-radius: 100px; font-size: 8px; color: #fff; display: inline-block; text-align: center; padding-left: 1px; } .circle-icon.is-active { background: #8cce37; } @media screen and (max-width: 767px) { .circle-icon { width: 16px; height: 16px; line-height: 16px; font-size: 5px; padding-left: 1px; } } /* Implements support for Material Icons. e.g. face */ .honda-header { background: #fff; z-index: 802; display: block; position: absolute; width: 100%; padding: 0; transition: right 0.3s ease 0s; top: 0px; } @media screen and (min-width: 768px) and (max-width: 1173px) { .honda-header { position: absolute; right: -320px; width: 320px; top: 0; background: #f1f1f1; height: calc(100% - 62px); z-index: 900; border-left: 1px solid #d6d6d6; } .honda-header .container { padding: 0 25px; } .mobile-menu-active .honda-header { position: fixed; right: 0; height: 100%; } } @media screen and (max-width: 767px) { .honda-header { display: none; } .mobile-menu-active .honda-header { display: block; position: fixed; left: 0; top: 0; padding-top: 43px; height: 100%; width: 100%; background: #f1f1f1; overflow: scroll; z-index: 999; } } @media screen and (max-width: 1173px) { .honda-header .navbar-wrapper { position: relative; } } @media print { .honda-header { display: none; } } .french .site-list-item { width: auto; } @media screen and (max-width: 1173px) { .french .site-list-item { width: auto; } } .navbar-wrapper { position: fixed; width: 100%; } @media screen and (max-width: 1173px) { .navbar-wrapper { height: inherit; } } .navbar-fixed { top: 0; } .navbar-fixed .navbar-wrapper { width: 100%; } @media screen and (max-width: 767px) { .navbar-fixed .navbar { position: relative; width: 100%; } } @media screen and (max-width: 1173px) { .navbar-fixed .navbar { background: #f1f1f1; } } .navbar { position: relative; box-shadow: -0.2px 1px 1px rgba(0, 0, 0, 0.14); z-index: 2; background: #fff; } .navbar .container { text-align: center; max-width: 100%; } .navbar .container:after { content: ""; display: table; clear: both; } @media screen and (max-width: 1173px) { .navbar { box-shadow: none; background: none; height: inherit; } .navbar > .container { overflow-x: hidden; overflow-y: scroll; } .navbar .container { position: static; height: 100%; max-width: 100%; padding-bottom: 40px; } } .navbar .navbar-nav { font-size: 0; } @media screen and (max-width: 1173px) { .navbar .navbar-nav { float: none !important; width: 100%; padding: 0 !important; } .navbar .navbar-nav:last-of-type > li:last-child { border-bottom: 0; } .navbar .navbar-nav li { border-bottom: 1px solid #d6d6d6; display: block; margin-right: 0 !important; text-align: left; margin-left: 0; padding: 0 !important; } .navbar .navbar-nav li.my-account-item { width: auto !important; } .navbar .navbar-nav li.my-account-item span.icon-myaccount { display: none; } .navbar .navbar-nav li.my-account-item .account-menu { float: none; } .navbar .navbar-nav li.my-account-item .account-menu .account-icon { width: 100%; height: 46px; } .navbar .navbar-nav li.my-account-item .account-menu div.my-account-container { margin: -10px 0 -12px 0px !important; } .navbar .navbar-nav li .search .icon-text, .navbar .navbar-nav li.my-account-item span.icon-text, .navbar .navbar-nav li a { position: relative; border-bottom: none !important; color: #1b1b1b; font-family: "HelveticaNeueLT-Bold"; font-size: 20px; line-height: 22px; padding: 12px 0; margin: 0; letter-spacing: 0; } .navbar .navbar-nav li .search .icon-text:focus, .navbar .navbar-nav li .search .icon-text:hover, .navbar .navbar-nav li.my-account-item span.icon-text:focus, .navbar .navbar-nav li.my-account-item span.icon-text:hover, .navbar .navbar-nav li a:focus, .navbar .navbar-nav li a:hover { border: none; color: #1b1b1b !important; } .navbar .navbar-nav li .search .icon-text.language-toggle, .navbar .navbar-nav li.my-account-item span.icon-text.language-toggle, .navbar .navbar-nav li a.language-toggle { color: #0d9be4; font-size: 13px; font-weight: 500; line-height: 22px; font-family: 'HelveticaNeueLT-Roman', sans-serif; right: initial; top: initial; } .navbar .navbar-nav li.w-dropdown > a:after { content: '\e911'; position: relative; top: 50%; transform: translateY(-50%); -ms-transform: transformY(-50%); -webkit-transform: translateY(-50%); position: absolute; right: 0; font-family: 'honda-icons'; speak: none; font-size: 21px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .navbar .navbar-nav li .search .icon-text { padding: 0; } .navbar .navbar-nav .dealers span { display: none; } } @media screen and (min-width: 1174px) { .navbar .navbar-nav li.virtual-showroom a, .navbar .navbar-nav li a.honda-in-canada { color: #0d9be4; } } .navbar .navbar-nav li.quicklink-mobile { display: block; } @media screen and (min-width: 1174px) { .navbar .navbar-nav li.quicklink-mobile { display: none; } } .navbar .navbar-nav li.quicklink-mobile a { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .navbar .navbar-nav li.quicklink-mobile a:hover { text-decoration: none; } .navbar .navbar-nav li.quicklink-mobile span { font-size: 25px; display: inline-block; margin: -4px 12px 0 0; padding: 0; vertical-align: middle; } .navbar .navbar-left { float: left; padding: 0 0 0 55px; } .navbar .navbar-left > li { margin-right: 15px; } .navbar .navbar-left > li.active > a, .navbar .navbar-left > li:hover > a { border-bottom: 5px solid #ff2841; } .navbar .navbar-left a { padding: 25px 0 20px; border-bottom: 5px solid #fff; } .navbar .navbar-left .navbar-nav-link:hover, .navbar .navbar-left .quicklink-navbar-nav-link:hover { text-decoration: none; } .navbar .navbar-right { float: right; } .navbar .navbar-right > li { padding: 23px 0 24px; } .navbar .navbar-right .navbar-nav-link:hover, .navbar .navbar-right .navbar-nav-link :active, .navbar .navbar-right .navbar-nav-link :focus, .navbar .navbar-right .quicklink-navbar-nav-link:hover, .navbar .navbar-right .quicklink-navbar-nav-link :active, .navbar .navbar-right .quicklink-navbar-nav-link :focus { color: #0d9be4; } .navbar .navbar-right .navbar-nav-item.desktop { display: block; } @media screen and (max-width: 1173px) { .navbar .navbar-right .navbar-nav-item.desktop { display: none; } } .navbar .navbar-right .navbar-nav-item.mobile { display: none; } @media screen and (max-width: 1173px) { .navbar .navbar-right .navbar-nav-item.mobile { display: block; } } .navbar .navbar-right .navbar-nav-item.my-account-item .my-account div.my-account-container { text-align: left; margin-left: -9px; margin-top: 3px; } .navbar .navbar-right .navbar-nav-item.my-account-item .my-account div.my-account-container .icon-text:hover { text-decoration: underline; } @media screen and (max-width: 1173px) { .navbar .navbar-right { padding: 0; } } .navbar li { display: inline-block; vertical-align: middle; } .navbar li a { color: #1b1b1b; font-family: "HelveticaNeueLT-Bold"; font-size: 13px; line-height: 34px; text-decoration: none; display: block; letter-spacing: 0.025em; -webkit-font-smoothing: antialiased; } .navbar li a:focus, .navbar li a:hover { color: #1b1b1b; text-decoration: underline; } .navbar li.search a { text-decoration: none; } .navbar .navbar-logo { display: inline-block; color: #000; font-size: 30px; margin: 25px 0 0 40px; position: absolute; left: 0%; } @media screen and (max-width: 1173px) { .navbar .navbar-logo { display: none; } } .navbar .navbar-icons { font-size: 0; margin-left: 35px; position: relative; } @media screen and (max-width: 1173px) { .navbar .navbar-icons { display: block; border-bottom: 0; margin-left: 0; } .navbar .navbar-icons ul { text-align: right; } } @media screen and (max-width: 1173px) { .navbar .navbar-icons li { text-align: left; position: relative; } } @media screen and (min-width: 1174px) { .navbar .navbar-icons li { margin-left: 7px; padding: 0 !important; } .navbar .navbar-icons li a { display: block; background-color: #ababab; border-radius: 50%; color: #fff; text-align: center; width: 30px; height: 30px; line-height: 30px; } .navbar .navbar-icons li a.active, .navbar .navbar-icons li a:hover { background-color: #0d9be4; } } .navbar .navbar-icons span { vertical-align: middle; } .navbar .navbar-icons .icon-text { display: none; } .navbar .navbar-icons .icon-search:before { content: '\e907'; } .navbar .navbar-icons .chat .icon-chat { font-size: 16px; } @media screen and (max-width: 1173px) { .navbar .navbar-icons .chat { display: none; } } .navbar .navbar-icons .search .icon-search { font-size: 20px; line-height: 29px; } @media screen and (max-width: 1173px) { .navbar .navbar-icons .search .icon-search { display: none; } .navbar .navbar-icons .search .icon-text { display: block; } .navbar .navbar-icons .search a:hover { background: none; } } .navbar .navbar-icons .search.w-dropdown a:hover { text-decoration: none; } .navbar .navbar-icons .user-menu .icon-account { font-size: 13px; } @media screen and (max-width: 1173px) { .navbar .navbar-icons .user-menu { display: none; } } .navbar .navbar-icons.login-icon { margin-left: 0; } .navbar .navbar-icons.login-icon svg:hover .layer { fill: #0D9BE4; } .navbar .navbar-icons.login-icon li a { background: white; width: 30px; height: 30px; } .navbar .dealers, .navbar .my-account { color: #0d9be4; padding-left: 28px; } .navbar .dealers span, .navbar .my-account span { color: #0d9be4; font-size: 19px; vertical-align: middle; margin-top: -9px; display: inline-block; padding-left: 1px; } .navbar .dealers span.icon-text, .navbar .my-account span.icon-text { font-family: "HelveticaNeueLT-Bold"; font-size: 13px; } .navbar .dealers a, .navbar .my-account a { padding-top: 2px; } .navbar .dealers.active span, .navbar .dealers:hover span, .navbar .my-account.active span, .navbar .my-account:hover span { color: #0d9be4; } .navbar .language-toggle { position: absolute; right: 40px; top: 11px; color: #0d9be4; font-family: "HelveticaNeueLT-Roman"; font-size: 10px; font-weight: 500; line-height: 13px; } .navbar .navbar-right .my-account-item .account-icon.authorized.active div.my-account-container { height: 50px; } .navbar .navbar-nav li a.back-btn, .search-bar-container a.back-btn { color: #0d9be4; display: none; } @media screen and (max-width: 1173px) { .navbar .navbar-nav li a.back-btn, .search-bar-container a.back-btn { display: block; font-size: 20px; font-family: "HelveticaNeueLT-Bold"; } .navbar .navbar-nav li a.back-btn span, .search-bar-container a.back-btn span { padding-right: 6px !important; font-size: 10px !important; vertical-align: middle; font-weight: bold; margin-top: -4px; display: inline-block !important; } } @media screen and (min-width: 1173px) { .w-dropdown:hover .dropdown { display: block; } } .french .quicklink-navbar-nav-link, .french .navbar-nav-link, .french .navbar-nav-link span.icon-text { font-size: 12px; } .dropdown { position: absolute; display: none; width: 100%; background: #fff; left: 0; top: 100%; padding: 47px 0 80px; box-shadow: -0.2px 1px 1px rgba(0, 0, 0, 0.14), inset -0.2px 1px 1px rgba(0, 0, 0, 0.14); } .dropdown.hasQuickLinks { padding-bottom: 15px; } .dropdown h3 { color: #1b1b1b; font-family: "HelveticaNeueLT-Bold"; font-size: 13px; line-height: 27px; letter-spacing: 0.025em; border-bottom: 1px solid #e7e7e7; padding-bottom: 5px; margin-bottom: 18px; } .dropdown .title-placeholder { color: #1b1b1b; font-family: "HelveticaNeueLT-Bold"; font-size: 13px; line-height: 27px; letter-spacing: 0.025em; border-bottom: 1px solid #e7e7e7; padding-bottom: 5px; margin-bottom: 18px; display: block; height: 33px; } @media screen and (max-width: 1173px) { .dropdown .title-placeholder { display: none; } } .dropdown a.locked { color: #ababab; } .dropdown.active { right: 0px; width: 100%; display: block; } @media screen and (max-width: 1173px) { .dropdown { padding: 0; position: absolute; top: 0; z-index: 13; width: 320px; right: 0; left: auto; background: #f1f1f1; overflow-x: hidden; overflow-y: scroll; height: 100%; overflow-x: hidden; overflow-y: scroll; right: -320px; display: block; transition: all 0.3s ease 0s; box-shadow: none; } .dropdown .icon-arrow-left:before { font-size: 20px; } } @media screen and (max-width: 767px) { .dropdown { padding-top: 0; width: 0; right: -100%; } } .search-dropdown { padding: 0; box-shadow: -0.2px 1px 1px rgba(0, 0, 0, 0.22); display: none; } .search-dropdown .search-bar-container { border-bottom: 1px solid #ededed; padding: 10px 0 6px; } .search-dropdown .search-bar-container .container { position: relative; max-width: 100%; } .search-dropdown .search-bar-container .back-btn { padding-bottom: 12px; } .search-dropdown .search-bar-container .icon-find { position: relative; top: 50%; transform: translateY(-50%); -ms-transform: transformY(-50%); -webkit-transform: translateY(-50%); position: absolute; left: 38px; margin-top: 0px; font-size: 24px; color: #ababab; } .search-dropdown .search-bar-container .icon-find:before { content: '\e907'; } @media screen and (max-width: 1173px) { .search-dropdown .search-bar-container .icon-find { display: none; } } .search-dropdown .search-bar-container .icon-close { position: relative; top: 50%; transform: translateY(-50%); -ms-transform: transformY(-50%); -webkit-transform: translateY(-50%); position: absolute; right: 40px; padding: 8px; font-size: 15px; color: #000; margin-top: -2px; } .search-dropdown .search-bar-container .icon-close:before { content: '\e602'; } @media screen and (max-width: 1173px) { .search-dropdown .search-bar-container .icon-close { display: none; } } .search-dropdown .search-bar-container input { background: none; outline: none; border: none; font-family: "HelveticaNeueLT-Light"; padding: 3px 32px; width: 100%; -webkit-appearance: none; font-size: 30px; font-weight: 300; margin: -1px 0 1px; -webkit-font-smoothing: antialiased; position: relative; color: #333; border-radius: 0; } @media screen and (max-width: 1173px) { .search-dropdown .search-bar-container input { font-size: 20px; font-weight: 300; color: #000; border-bottom: 1px solid #000; border-top: 1px solid #dedede; padding: 10px 0; } } .search-dropdown .search-bar-container input::-webkit-input-placeholder { color: #ababab; -webkit-font-smoothing: antialiased; } .search-dropdown .search-bar-container input:-moz-placeholder { /* Firefox 18- */ color: #ababab; -webkit-font-smoothing: antialiased; } .search-dropdown .search-bar-container input::-moz-placeholder { /* Firefox 19+ */ color: #ababab; -webkit-font-smoothing: antialiased; } .search-dropdown .search-bar-container input:-ms-input-placeholder { color: #ababab; -webkit-font-smoothing: antialiased; } .search-dropdown .search-bar-container input[placeholder]:focus::-webkit-input-placeholder { transition: opacity 0.2s 0.2s ease; opacity: 0; } .search-dropdown input::-ms-clear { display: none; } .search-dropdown .results { width: 100%; padding: 0; } @media screen and (max-width: 1173px) { .search-dropdown .results { padding: 0 25px; } } .search-dropdown .results li { border-bottom: 1px solid #ededed; font-family: "HelveticaNeueLT-Roman"; font-size: 33px; } .search-dropdown .results li:hover { color: #fff; background: #ff2841; } .search-dropdown .results li:hover a { color: #fff; } @media screen and (max-width: 1173px) { .search-dropdown .results li { border-bottom: 1px solid #d6d6d6; padding: 10px 0; } .search-dropdown .results li .container { padding: 0; } .search-dropdown .results li:hover { background: none; } .search-dropdown .results li:hover a { color: #000; } } .search-dropdown .results a { padding: 16px 0 12px 60px; color: #666; width: 100%; display: block; } @media screen and (max-width: 1173px) { .search-dropdown .results a { padding: 0; color: #666; font-size: 20px; font-weight: 300; } } .search-dropdown .see-all:hover { color: #fff; background: #ff2841; } .search-dropdown .see-all:hover a { color: #fff; } .search-dropdown .see-all a { color: #000; font-family: "HelveticaNeueLT-Bold"; font-size: 20px; padding-left: 60px; display: block; -webkit-font-smoothing: antialiased; letter-spacing: 0.025em; width: 100%; padding: 17px 0 17px 60px; } .search-dropdown .see-all a:hover { color: #fff; } @media screen and (max-width: 1173px) { .search-dropdown .see-all a { font-size: 20px; text-align: left; padding: 10px 0; } } .subgroups .container { max-width: 810px; font-size: 0; text-align: center; } .subgroups .container.container-narrow { max-width: 810px; } .subgroups .container.container-narrow > .inner-col { width: 27.2839506173%; margin-left: 9.012345679%; } .subgroups .container.container-narrow > .inner-col:first-child { margin-left: 0; } .subgroups .container.container-wide { max-width: 1080px; } .subgroups .container.container-wide > .inner-col { width: 20.462962963%; margin-left: 5.7407407407%; } .subgroups .container.container-wide > .inner-col:first-child { margin-left: 0; } .subgroups .inner-col { display: inline-block; vertical-align: top; text-align: left; } @media screen and (max-width: 1173px) { .subgroups .inner-col { width: 100% !important; margin-left: 0 !important; } .subgroups .inner-col h3 { display: none; } } .subgroups .inner-col:first-child { margin-left: 0; } .subgroups .inner-col a { color: #0d9be4; font-family: "HelveticaNeueLT-Light"; font-size: 17px; font-weight: 300; line-height: 22px; margin-bottom: 8px; -webkit-font-smoothing: antialiased; padding: 0; border: none; letter-spacing: 0; } .subgroups .inner-col a.locked { color: #ababab; } .subgroups .inner-col a:hover { border: none; } .subgroups .inner-col a.navbar-nav-link:hover, .subgroups .inner-col a.quicklink-navbar-nav-link:hover { color: #000; text-decoration: underline; } .subgroups .inner-col li { display: block; padding-bottom: 2px; margin-right: 0; } .subgroups .inner-col li span:not([class]) { color: #0D9BE4; display: inline-block; font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; } .subgroups .col-2 .inner-col { width: 41.935483871%; display: inline-block; vertical-align: top; text-align: left; margin-left: 15.6989247312%; } @media screen and (max-width: 1173px) { .subgroups .col-2 .inner-col { width: 100%; margin-left: 0; } .subgroups .col-2 .inner-col h3 { display: inline-block; } } .subgroups .col-2 .inner-col:first-child { margin-left: 0; } .subgroups .col-1.inner-col { width: 100%; } .subgroups .container-narrow .col-2.inner-col, .subgroups .container-wide .col-2.inner-col { width: 465px; display: inline-block; vertical-align: top; text-align: left; margin-left: 15.6989247312%; } @media screen and (max-width: 1173px) { .subgroups .container-narrow .col-2.inner-col, .subgroups .container-wide .col-2.inner-col { width: 100%; margin-left: 0; } .subgroups .container-narrow .col-2.inner-col h3, .subgroups .container-wide .col-2.inner-col h3 { display: none; } } .subgroups .container-narrow .col-2.inner-col:first-child, .subgroups .container-wide .col-2.inner-col:first-child { margin-left: 0; } .subgroups .third-level > a { display: none; } @media screen and (max-width: 1173px) { .subgroups .third-level > a { display: block; } } .subgroups .third-level > a:after { content: '\e911'; position: relative; top: 50%; transform: translateY(-50%); -ms-transform: transformY(-50%); -webkit-transform: translateY(-50%); position: absolute; right: 0; font-family: 'honda-icons'; speak: none; font-size: 21px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .subgroups .third-level.honda-family-menu-mobile > a:after { content: none; } .subgroups .quicklinks-desktop { border-top: 1px solid #e7e7e7; display: -ms-flexbox; display: flex; padding: 15px 0 0; margin-top: 45px; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 1173px) { .subgroups .quicklinks-desktop { display: none; } } .subgroups .quicklinks-desktop li { margin: 0 2.5%; max-width: 13.5%; } .subgroups .quicklinks-desktop li:first-child { margin-left: 0; } .subgroups .quicklinks-desktop li:last { margin-right: 0; } .subgroups .quicklinks-desktop li a { color: #1b1b1b; font-family: "HelveticaNeueLT-Bold"; font-size: 14px; padding: 25px 0 10px; border: none; line-height: 1.5; } .subgroups .quicklinks-desktop li a span { display: inline-block; font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; color: #0D9BE4; display: block; margin-bottom: 12px; } .subgroups .quicklinks-desktop li a:hover { text-decoration: none; color: #0d9be4; } @media screen and (min-width: 1173px) { .third-level-dropdown .container { padding: 0; } } @media screen and (max-width: 1173px) { .third-level-dropdown { display: none; min-height: 100%; padding: 0; position: absolute; top: 0; z-index: 13; width: 320px; right: 0; left: auto; background: #f1f1f1; overflow-x: hidden; overflow-y: scroll; right: -320px; display: block; transition: all 0.3s ease 0s; } .third-level-dropdown .icon-arrow-left:before { font-size: 20px; } .third-level-dropdown.active { width: 100%; right: 0px; } } @media screen and (max-width: 1173px) and (max-width: 767px) { .third-level-dropdown { padding-top: 0; width: 0; right: -100%; } } .mobile-menu-btn, .navbar-icons { position: relative; } .mobile-menu-btn .element-invisible, .navbar-icons .element-invisible { right: 0; font-size: 0.75em; } .header-mobile .my-account { color: #0d9be4; } .header-mobile .my-account span { font-size: 19px; vertical-align: middle; margin-top: 3px; display: inline-block; padding-right: 1px; } .header-mobile .my-account span.icon-text { display: none; } .header-mobile .my-account a { padding-top: 2px; } /*********************** MySites Login Panels ***********************/ .account-menu { float: right; margin-right: 15px; } @media screen and (min-width: 1174px) { .account-menu { float: none; margin-left: 7px; margin-right: 0; } .account-menu:hover:after { content: ""; position: absolute; bottom: -5px; right: 20px; width: 58px; height: 35px; } .account-menu:hover:before { content: ''; position: absolute; width: 45px; height: 28px; top: 53px; right: 78px; } } @media screen and (min-width: 1175px) { .account-menu:hover .mysites-dropdown { display: block !important; } } .account-menu .account-icon { display: block; cursor: pointer; height: 25px; } .account-menu .account-icon.active .layer { fill: #0D9BE4; } @media screen and (min-width: 1174px) { .account-menu .account-icon { height: 30px; } } .account-menu .account-icon .primary.button { display: inline; } .mysites-dropdown { display: none; } @media screen and (max-width: 1173px) { .mobile-menu-active .my-sites-panel-container .nav-dropdown:after, .mobile-menu-active .my-sites-panel-container .nav-dropdown:before { right: 70px; } } @media screen and (max-width: 767px) { .mobile-menu-active .my-sites-panel-container .nav-dropdown:after, .mobile-menu-active .my-sites-panel-container .nav-dropdown:before { right: 55px; } } .my-sites-panel-container { position: fixed; top: 45px; right: 0; width: 100%; z-index: 10; } @media screen and (min-width: 1173px) { .my-sites-panel-container { position: absolute; top: 76px; right: 20px; width: auto; } } .my-sites-panel-container .nav-dropdown { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; position: relative; width: 320px; background-color: #fff; border: 1px solid #D8D8D8; box-shadow: 0 5px 20px rgba(136, 136, 136, 0.3); padding: 0 25px; z-index: 10; } @media screen and (max-width: 1173px) { .my-sites-panel-container .nav-dropdown { position: fixed; right: 0; width: 100%; max-width: 320px; } .navbar-nav-item .my-sites-panel-container .nav-dropdown:after, .navbar-nav-item .my-sites-panel-container .nav-dropdown:before { right: 240px; } } @media screen and (max-width: 767px) { .my-sites-panel-container .nav-dropdown { width: 100%; max-width: inherit; border-left: 0; border-right: 0; } .navbar-nav-item .my-sites-panel-container .nav-dropdown:after, .navbar-nav-item .my-sites-panel-container .nav-dropdown:before { left: 60px; border-width: 7px; } } @media (max-height: 320px) and (max-width: 570px) { .my-sites-panel-container .nav-dropdown { overflow: auto; min-height: 270px; height: 100%; } .my-sites-panel-container .nav-dropdown:after, .my-sites-panel-container .nav-dropdown:before { position: fixed !important; } .my-sites-panel-container .nav-dropdown:before { top: 30px; } .my-sites-panel-container .nav-dropdown:after { top: 34px; } } @media (max-height: 360px) and (max-width: 640px) { .my-sites-panel-container .nav-dropdown { overflow: auto; min-height: 236px; height: 100%; } .my-sites-panel-container .nav-dropdown:after, .my-sites-panel-container .nav-dropdown:before { position: fixed !important; } .my-sites-panel-container .nav-dropdown:before { top: 30px; } .my-sites-panel-container .nav-dropdown:after { top: 34px; } } .my-sites-panel-container .nav-dropdown:after, .my-sites-panel-container .nav-dropdown:before { position: absolute; right: 55px; bottom: 100%; width: 0; height: 0; content: ''; pointer-events: none; border: solid transparent; } @media screen and (max-width: 1173px) { .my-sites-panel-container .nav-dropdown:after, .my-sites-panel-container .nav-dropdown:before { right: 77px; } } @media screen and (max-width: 767px) { .my-sites-panel-container .nav-dropdown:after, .my-sites-panel-container .nav-dropdown:before { right: 67px; } } .my-sites-panel-container .nav-dropdown:before { border-color: rgba(216, 216, 216, 0); border-bottom-color: #D8D8D8; border-width: 8px; margin-right: -1px; } .my-sites-panel-container .nav-dropdown:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 6px; margin-right: 1px; } .my-sites-panel-container .nav-dropdown .nav-dropdown-item { line-height: 1; border-bottom: 1px solid #EBEBEB; text-align: left; } .my-sites-panel-container .nav-dropdown .nav-dropdown-item:last-child { border: 0; } .my-sites-panel-container .nav-dropdown .nav-dropdown-item a { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; display: block; padding: 18px 0; color: #0d9be4; width: auto !important; height: auto !important; text-align: left; } .my-sites-panel-container .nav-dropdown .nav-dropdown-item a:hover, .my-sites-panel-container .nav-dropdown .nav-dropdown-item a :active, .my-sites-panel-container .nav-dropdown .nav-dropdown-item a :focus { color: #1B1B1B; text-decoration: underline; } .my-sites-panel-container .nav-dropdown .nav-dropdown-item a.active-link { font-weight: bold; } .my-sites-panel-container .nav-dropdown .nav-dropdown-item:not(.contains-logout-link) { padding-left: 10px; } .my-sites-panel-container .nav-dropdown .nav-dropdown-item .nav-dropdown-title { display: block; padding: 18px 0; color: #1B1B1B; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: bold; } .my-sites-panel-container .nav-dropdown .contains-logout-link { position: relative; padding-top: 4px; } .my-sites-panel-container .nav-dropdown .contains-logout-link a.login { position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; color: #58AEDB; padding: 0; } .my-sites-panel-container .nav-dropdown .contains-logout-link a.login:hover { color: #1B1B1B; text-decoration: underline; } .my-sites-panel-container .nav-dropdown.sign-up { padding: 35px; text-align: center; } .my-sites-panel-container .nav-dropdown.sign-up h2 { font-size: 20px; font-weight: bold; line-height: 25px; margin-bottom: 12px; } .my-sites-panel-container .nav-dropdown.sign-up p { font-size: 15px; line-height: 25px; margin-bottom: 20px; } .my-sites-panel-container .nav-dropdown.sign-up .button { width: 100%; max-width: 250px; min-height: 45px; font-size: 15px; line-height: 15px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; border: 1px solid #0C9BE7; border-radius: 3px; text-align: center; padding: 13.125px; transition: background ease 0.25s; display: inline-block; } .my-sites-panel-container .nav-dropdown.sign-up .button.primary { background: #0C9BE7; color: #fff; margin-bottom: 12px; } .my-sites-panel-container .nav-dropdown.sign-up .button.primary:hover, .my-sites-panel-container .nav-dropdown.sign-up .button.primary:focus { text-decoration: none; background-color: #097fbb; } .my-sites-panel-container .nav-dropdown.sign-up .button.secondary { background: transparent; color: #0C9BE7; } .my-sites-panel-container .nav-dropdown.sign-up .button.secondary:hover, .my-sites-panel-container .nav-dropdown.sign-up .button.secondary:focus { color: #fff; background-color: #0C9BE7; text-decoration: none; } .button-blue { z-index: 2; background: #0d9be4; color: #fff; border: 1px solid #0d9be4; border-radius: 3px; font-family: "HelveticaNeueLT-Bold"; line-height: 12px; display: block; padding: 10px 12px; text-align: center; } @media screen and (max-width: 1173px) { .button-blue { padding: 10px 10px; width: 70px; } .french .button-blue { width: 156px; } } @media screen and (max-width: 767px) { .button-blue { width: 70px; } .french .button-blue { width: 156px; } } .header-mobile { display: none; transition: width 0.3s ease 0s; transform: translateZ(0); } @media screen and (max-width: 1173px) { .header-mobile { z-index: 800; position: fixed; top: 0; display: block; width: 100%; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); padding: 10px 0; } .header-mobile .container:after { content: ""; display: table; clear: both; } .header-mobile .navbar-logo { font-size: 20px; color: #000; } .header-mobile .icon-close, .header-mobile .icon-menu { padding-top: 4px; color: #000; } .header-mobile .icon-login { width: 25px; margin-right: 10px; } } @media screen and (max-width: 767px) { .header-mobile { top: 0; right: 0; position: fixed; } } .mobile-menu-active .header-mobile { z-index: 1000; } @media screen and (min-width: 767px) { .mobile-menu-active .header-mobile { width: calc(100% - 320px); } } @media screen and (max-width: 767px) { .mobile-menu-active .header-mobile { left: 0; } } .header-mobile .navbar .navbar-nav li.quicklink-mobile { display: block; } @media screen and (min-width: 1174px) { .header-mobile .navbar .navbar-nav li.quicklink-mobile { display: none; } } .header-mobile .navbar .navbar-nav li.quicklink-mobile a { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; } .header-mobile .navbar .navbar-nav li.quicklink-mobile a:hover { text-decoration: none; } .header-mobile .navbar .navbar-nav li.quicklink-mobile span { font-size: 25px; display: inline-block; margin: -4px 12px 0 0; padding: 0; vertical-align: middle; } @media screen and (max-width: 767px) { .mobile-menu-active { position: fixed; width: 100%; height: 100%; overflow: hidden; } } .honda-footer { padding-top: 44px; padding-bottom: 69px; background: #fff; padding: 60px 0; position: absolute; width: 100%; } @media screen and (max-width: 767px) { .honda-footer { background: #fff; display: block; } } .honda-footer .navbar-logo { color: #1b1b1b; } @media screen and (max-width: 767px) { .honda-footer .navbar-logo { padding-bottom: 30px; text-align: center; float: none; display: block; } } .honda-footer .fc:after { content: ""; display: table; clear: both; } .honda-footer .honda-logo-footer { width: 135px; height: 20px; background-image: url("/client/img/icon-footer-honda.png"); background-size: contain; background-repeat: no-repeat; display: inline-block; } @media print { .honda-footer { display: none; } } .message-bar { text-align: center; border-bottom: 1px solid #d2d2d2; background: #fff; } .message-bar .link-1-text { font-size: 15px; line-height: 18px; padding: 20px 0; } @media screen and (max-width: 1173px) { .message-bar { display: none; } } .social-container { padding-right: 4px; } .social-wrapper { float: right; } @media screen and (max-width: 767px) { .social-wrapper { float: none; } } .social-wrapper li { display: inline-block; } @media screen and (max-width: 767px) { .social-wrapper li { margin-left: 16px; } .social-wrapper li:first-child { margin-left: 0; } } .social-wrapper a { color: #1b1b1b; vertical-align: middle; position: relative; } .social-wrapper a .element-invisible { right: 0; font-size: 0.75em; } .social-wrapper .icon-fb { font-size: 23px; } .social-wrapper .icon-fb:hover { color: #3b5998; } .social-wrapper .icon-yt { font-size: 17px; margin-left: 18px; } .social-wrapper .icon-yt:hover { color: #bb0000; } .social-wrapper .icon-twit { font-size: 29px; margin-left: 10px; } .social-wrapper .icon-twit:hover { color: #00aced; } .social-wrapper .icon-ig-alt { font-size: 35px; margin-left: 3px; } .social-wrapper .icon-ig-alt:hover { color: #ded1c1; } .footer-container { max-width: 687px; margin: 0 auto 38px; padding-bottom: 38px; border-bottom: 1px solid #b7b7b7; margin-bottom: 46px; padding-bottom: 51px; } .footer-container .footer-full-bar { margin-bottom: 44px !important; } @media screen and (max-width: 767px) { .footer-container { padding-bottom: 20px; margin-bottom: 20px !important; } } .footer-container h3 { color: #1b1b1b; font-family: "HelveticaNeueLT-Bold"; font-size: 11px; line-height: 15px; border-bottom: 1px solid #b7b7b7; padding: 0 0 9px; margin: 0 0 12px; } @media screen and (max-width: 767px) { .footer-container h3 { font-size: 13px; border-bottom: 1px solid #d9d9d9; } } @media screen and (max-width: 1173px) { .footer-container .col-4 .inner-col h3 { font-size: 11px; } .footer-container .col-4 .inner-col li a { font-size: 11px; } } @media screen and (max-width: 767px) { .footer-container .col-4 .inner-col { width: 100%; margin-left: 0; } .footer-container .col-4 .inner-col:first-child h3 { padding-top: 0; } .footer-container .col-4 .inner-col:last-child h3 { border-bottom: none; cursor: default; padding-bottom: 12px; padding-top: 28px; } .footer-container .col-4 .inner-col:last-child h3:after { display: none; } .footer-container .col-4 .inner-col:last-child br { display: none; } .footer-container .col-4 .inner-col:last-child a { display: block; font-size: 12px; } .footer-container .col-4 .inner-col:last-child ul { display: block; } .footer-container .col-4 .inner-col:last-child li { border: none; padding: 0; line-height: 19px; margin-bottom: 14px; } .footer-container .col-4 .inner-col ul { display: none; } .footer-container .col-4 .inner-col li { font-size: 13px; } .footer-container .col-4 .inner-col li a { font-size: 13px; } .footer-container .col-4 .inner-col h3 { padding-bottom: 12px; padding-top: 16px; font-size: 13px; margin-bottom: 0; } .footer-container .col-4 .inner-col.expand h3 { cursor: pointer; } .footer-container .col-4 .inner-col.expand li { font-size: 13px; padding: 12px 0; border-bottom: 1px solid #e2e2e2; margin-bottom: 0; } .footer-container .col-4 .inner-col.expand h3:after { font-family: 'honda-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; content: '\e90b'; position: absolute; right: 20px; font-size: 22px; margin-top: -6px; } .footer-container .col-4 .inner-col.expand h3.active:after { content: '\e90a'; } .footer-container .col-4 .inner-col.expand ul.active { display: block; margin-bottom: 17px; } } .footer-container .social-wrapper h3 { display: none; } @media screen and (max-width: 767px) { .footer-container .social-wrapper h3 { border-bottom: 1px solid #e7e7e7; display: block; font-size: 13px; } } .footer-container-link:hover { text-decoration: underline; } .col-4 { font-size: 0; padding-top: 37px; max-width: 687px; margin: 0 auto; } .col-4:after { content: ""; display: table; clear: both; } .col-4 .inner-col { display: inline-block; width: 21.8340611354%; font-size: 0; vertical-align: top; margin-left: 4.2212518195%; float: left; } @media screen and (max-width: 767px) { .col-4 .inner-col { width: 100%; margin-left: 0; float: none; } } .col-4 .inner-col.the-honda-family { margin-left: 0; } .col-4 .inner-col.fr { float: right; } @media screen and (max-width: 767px) { .col-4 .inner-col.fr { float: none; } } .col-4 .inner-col.fr h3 { pointer-events: none; } .col-4 .inner-col:first-child { margin-left: 0; } .col-4 .inner-col a, .col-4 .inner-col li { color: #000; font-family: 'HelveticaNeueLT-Roman'; font-size: 10px; line-height: 14px; } .col-4 .inner-col li { margin-bottom: 6px; } .col-4 .inner-col a[href^=tel] { color: #0d9be4; display: block; margin-top: 3px; cursor: default; } .col-4 a:focus { text-decoration: underline; } .disclaimer-copy { font-size: 10px; line-height: 15px; color: #1b1b1b; text-align: center; max-width: 617px; margin: 0 auto; font-family: 'HelveticaNeueLT-Roman'; } .disclaimer-copy strong { font-family: "HelveticaNeueLT-Bold"; display: block; margin-bottom: 2px; } .disclaimer-copy a { color: #0d9be4; } .disclaimer-copy a:focus { text-decoration: underline; } .disclaimer-copy a:hover { color: #000; text-decoration: underline; } @media screen and (max-width: 767px) { .disclaimer-copy { text-align: left; font-size: 11px; line-height: 19px; } .disclaimer-copy strong { font-size: 12px; margin-bottom: 7px; } } .site-list { font-size: 0; background: #f4f4f4; border-radius: 4px; padding: 23px 0; margin-bottom: 30px; } .site-list-item { display: inline-block; font-size: 20px; height: 50px; width: 12.5%; border-left: 1px solid #ccc; text-align: center; vertical-align: top; } .site-list-item:first-child { border-left: 0; } .site-list-link { display: inline-block; color: #545454; position: relative; top: 50%; transform: translateY(-50%); -ms-transform: transformY(-50%); -webkit-transform: translateY(-50%); } .no-touchevents .site-list-link:hover { color: #1b1b1b; } .site-list-link.icon-honda { font-size: 36px; } .site-list-link.icon-acura { font-size: 36px; } .site-list-link.icon-power-equipment, .site-list-link.icon-power-equipment-fr { font-size: 30px; } .site-list-link.icon-motorcycles, .site-list-link.icon-motorcycles-fr { font-size: 43px; } .site-list-link.icon-atvs, .site-list-link.icon-atvs-fr { font-size: 43px; } .site-list-link.icon-sxs, .site-list-link.icon-sxs-fr { font-size: 43px; } .site-list-link.icon-psp, .site-list-link.icon-psp-fr { font-size: 43px; } .site-list-link.icon-marine { font-size: 20px; } .site-list-link.icon-engines, .site-list-link.icon-engines-fr { font-size: 20px; } @media screen and (max-width: 1173px) { .site-list-link.icon-honda { font-size: 28px; } .site-list-link.icon-acura { font-size: 28px; } .site-list-link.icon-power-equipment, .site-list-link.icon-power-equipment-fr { font-size: 22px; } .site-list-link.icon-motorcycles, .site-list-link.icon-motorcycles-fr { font-size: 35px; } .site-list-link.icon-atvs, .site-list-link.icon-atvs-fr { font-size: 35px; } .site-list-link.icon-sxs, .site-list-link.icon-sxs-fr { font-size: 35px; } .site-list-link.icon-psp, .site-list-link.icon-psp-fr { font-size: 35px; } .site-list-link.icon-marine { font-size: 12px; } .site-list-link.icon-engines, .site-list-link.icon-engines-fr { font-size: 12px; } } .honda-family { background: #ededed; text-align: center; z-index: 805; transition: all 0s linear 0.3s; } .honda-family .site-list-link { transform: translateY(-50%); -webkit-transform: translateY(-50%); } .honda-family ul { background: none; margin-bottom: 0; border-radius: 0; padding: 15px 0; } .honda-family li { display: inline-block; font-size: 20px; height: 32px; width: auto; padding: 0 20px; border-left: 1px solid #ccc; text-align: center; vertical-align: top; } .honda-family a { color: #7b7b7b; vertical-align: top; } .honda-family a.icon-acura { font-size: 42px; } .honda-family a.icon-power-equipment, .honda-family a.icon-power-equipment-fr { font-size: 42px; } .honda-family a.icon-marine { font-size: 42px; top: 15.5px; } .honda-family a.icon-engines, .honda-family a.icon-engines-fr { font-size: 42px; } .honda-family a.icon-psp, .honda-family a.icon-psp-fr { font-size: 44px; top: 51%; } @media screen and (max-width: 767px) { .honda-family { display: none; } } .mobile-menu-active .honda-family { margin-top: -62px; transition: all 0s linear 0s; } .honda-family-overlay { overflow: hidden; top: 0; z-index: 1201; position: fixed; padding: 80px 0px 50px 0px; width: 100%; background-color: #ededed; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; } .honda-family-overlay .close-button { font-size: 30px; font-family: 'honda-icons'; position: absolute; right: 40px; top: 50px; color: #ababab; cursor: pointer; } .honda-family-overlay .close-button:before { content: "\e602"; } .honda-family-overlay h2 { font-size: 40px; text-align: center; color: #1b1b1b; font-family: 'national', arial, sans-serif; } .honda-family-overlay ul { margin: 20px auto; display: table; text-align: center; max-width: 1240px; padding: 15px 0; } .honda-family-overlay ul li { display: table-cell; vertical-align: middle; padding: 0 25px; } .honda-family-overlay ul li:nth-child(n+2) { border-left: 1px solid #ccc; } .honda-family-overlay ul li img { max-width: 100%; max-height: 50px; } .honda-family-overlay .marine, .honda-family-overlay .engine { display: block; } .honda-family-overlay .marine img, .honda-family-overlay .engine img { max-height: 80px; margin-top: 9px; } .honda-family-overlay .power-equipment, .honda-family-overlay .psp { display: block; } .honda-family-overlay .power-equipment img, .honda-family-overlay .psp img { max-height: 80px; margin-top: 9px; } .french .honda-family-overlay .psp img { max-height: 50px; } .honda-family-overlay .honda-logo-container { width: 50%; margin: 0px auto; text-align: center; } .honda-family-overlay .honda-logo-container .honda-logo { width: 10%; max-width: 60px; min-width: 40px; margin: 20px auto; cursor: pointer; display: block; text-align: center; } .honda-family-overlay .honda-logo-container .honda-link { font-family: 'HelveticaNeueLT-Light'; color: #0d9be4; font-size: 20px; margin-bottom: 10px; cursor: pointer; margin: 0 auto; padding-bottom: 0px; border-bottom: 1px solid #0d9be4; display: inline-block; } .overlay { z-index: 100; background-color: black; opacity: 0.7; width: 100%; height: 100%; position: fixed; top: 0; } @media screen and (max-width: 767px) { .honda-family, .honda-family-overlay, .overlay { display: none; } } @media screen and (max-width: 1173px) { .honda-family-overlay ul { width: 80%; } .honda-family-overlay ul li { padding: 0 12px; } .motorcycle img, .atv img, .sxs img { min-height: 34px; } } .red-family { color: #ff2841; } .the-honda-family a { text-decoration: none !important; } @media screen and (max-width: 1173px) { .page-tout { padding-top: 35px; } } @media screen and (max-width: 767px) { .page-tout { padding-top: 0; } } .section-heading { background: #fff; text-align: center; padding: 35px 30px; } .section-heading.alt-bg-color { background: #f1f1f1; } .section-heading.align-left { text-align: left; } @media screen and (max-width: 767px) { .section-heading { padding-top: 16px; padding-bottom: 16px; } } .section-heading-title { font-size: 40px; color: #1b1b1b; font-family: 'national', arial, sans-serif; -moz-font-feature-settings: "lnum" 1, "pnum" 1; -ms-font-feature-settings: "lnum" 1, "pnum" 1; -o-font-feature-settings: "lnum" 1, "pnum" 1; font-feature-settings: "lnum" 1, "pnum" 1; font-weight: 300; } .section-heading-title + * { margin-top: 10px; } @media screen and (max-width: 767px) { .section-heading-title { font-size: 25px; line-height: 26px; } .section-heading-title + * { margin-top: 3px; } } .page-tout-image-wrapper { position: relative; } .page-tout-image { display: block; width: 100%; } .legal-overlay-link { border-bottom: 1px solid #fff; color: #fff; font-size: 15px; display: inline-block; font-family: 'HelveticaNeueLT-Roman', arial, sans-serif; bottom: 17px; left: 37px; position: absolute; text-shadow: 1px 1px 1px #120F10; } @media screen and (max-width: 767px) { .legal-overlay-link { font-size: 10px; } } .mini-touts { font-size: 0; padding: 40px 0; text-align: center; margin: 0 auto; } @media screen and (max-width: 1173px) { .mini-touts { padding: 40px 0 0 0; } } @media screen and (max-width: 767px) { .mini-touts { padding: 40px 0; } } .mini-touts .frame { padding: 0; } .mini-touts .scrollbar { display: none; } .mini-touts .frame { margin-bottom: 0; } @media screen and (max-width: 767px) { .mini-touts { white-space: nowrap; width: 100%; padding-left: 10px; padding-right: 10px; } } .mini-touts .frame { margin-bottom: 0; } @media screen and (max-width: 767px) { .mini-touts { white-space: nowrap; width: 100%; padding-left: 10px; padding-right: 10px; } } .mini-touts.slider { background: transparent none repeat scroll 0 0; } .mini-touts.slider .frame { background: transparent none repeat scroll 0 0; height: auto; } .mini-touts.slider .slidee { width: 100% !important; } .mini-touts.slider .scrollbar { margin-top: 40px; } .mini-tout { background: #fff; display: inline-block; width: 18%; margin: 0 0 0 2%; position: relative; display: inline-block; color: #1b1b1b; vertical-align: top; text-align: left; } .mini-tout .circle-icon-wrapper { position: absolute; bottom: 15px; left: 15px; opacity: 0; transition: opacity 0.1s; } .mini-tout .mini-tout-img img, .mini-tout .circle-icon-wrapper { transition: 0.5s ease-out 0s; } .mini-tout:hover .mini-tout-img img { transform: scale(1.2) translateZ(0); } .mini-tout:hover .circle-icon-wrapper { opacity: 1; } @media screen and (max-width: 1174px) { .mini-tout { margin: 0 7px; } } @media screen and (max-width: 767px) { .mini-tout { white-space: normal; width: 200px; margin: 0 10px; } } .mini-tout-img { overflow: hidden; } .mini-tout-img img { width: 100%; transition: all 0.5s ease-out 0s; } .mini-tout-details { padding: 20px 20px 30px; } .mini-tout-details-tag { font-family: "HelveticaNeueLT-Roman"; font-size: 13px; line-height: 16px; margin-bottom: 10px; display: block; } @media screen and (max-width: 1174px) { .mini-tout-details-tag { font-size: 11px; line-height: 12px; } } @media screen and (max-width: 767px) { .mini-tout-details-tag { font-size: 13px; line-height: 16px; } } .mini-tout-details-title { font-family: "HelveticaNeueLT-Bold"; font-size: 20px; line-height: 25px; padding-bottom: 12px; } @media screen and (max-width: 1174px) { .mini-tout-details-title { font-size: 14px; line-height: 18px; padding-bottom: 10px; } } @media screen and (max-width: 767px) { .mini-tout-details-title { font-size: 20px; line-height: 25px; padding-bottom: 12px; } } .mini-tout-details-description { font-size: 13px; font-family: "HelveticaNeueLT-Roman"; line-height: 20px; padding-bottom: 30px; } @media screen and (max-width: 1174px) { .mini-tout-details-description { font-size: 11px; line-height: 15px; } } @media screen and (max-width: 767px) { .mini-tout-details-description { font-size: 13px; line-height: 20px; } } @media screen and (max-width: 1173px) { body { padding-top: 0; } } @media screen and (max-width: 767px) { body { padding-top: 41px; } } .homepage-tout-legal .scroll-wrapper, .homepage-lower-tout-legal .scroll-wrapper { max-width: 767px; height: 70%; margin: 0 auto; } @media screen and (max-width: 1173px) { .homepage-tout-legal .scroll-wrapper, .homepage-lower-tout-legal .scroll-wrapper { max-width: 574px; } } .tout-primary { position: relative; } .tout-primary .lead-container { text-align: center; padding: 10px 20px 39px; } @media screen and (max-width: 1173px) { .tout-primary .lead-container { padding: 50px 20px 16px; } } @media screen and (max-width: 767px) { .tout-primary .lead-container { padding-top: 4px; padding-bottom: 16px; } } @media screen and (max-width: 1174px) { .tout-primary .mCSB_scrollTools { right: 15px; } } .tout-primary .lead { color: #1b1b1b; font-family: "national"; font-size: 40px; font-weight: 300; line-height: 1; display: block; text-align: center; padding-bottom: 3px; } @media screen and (max-width: 1173px) { .tout-primary .lead { font-size: 30px; padding-bottom: 0; margin-bottom: -4px; } } @media screen and (max-width: 767px) { .tout-primary .lead { font-size: 24px; line-height: 1; padding-bottom: 0; margin-bottom: -5px; } } .tout-primary .lead-cta { color: #0d9be4; font-family: "HelveticaNeueLT-Roman"; font-size: 20px; font-weight: 300; line-height: 20px; letter-spacing: 0.02em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .tout-primary .lead-cta span { vertical-align: middle; border: 1px solid #0d9be4; border-radius: 50%; width: 30px; height: 30px; text-align: center; display: inline-block; font-size: 6px; vertical-align: top; padding-top: 10px; margin-left: 10px; margin-top: -7px; } .tout-primary .lead-cta span:hover { background: #0d9be4; color: #fff; } @media screen and (max-width: 1173px) { .tout-primary .lead-cta { font-size: 14px; } .tout-primary .lead-cta span { width: 22px; height: 22px; font-size: 5px; line-height: 1; margin-top: -2px; padding-top: 8px; } } @media screen and (max-width: 767px) { .tout-primary .lead-cta { font-size: 13px; line-height: 1; } .tout-primary .lead-cta span { margin-left: 5px; } } .tout-primary .img-container { overflow: hidden; } .tout-primary .img-container img { vertical-align: middle; width: auto; position: relative; transform: translateX(-50%); left: 50%; max-height: 400px; } @media screen and (max-width: 1173px) { .tout-primary .img-container img { width: 100%; max-height: 100%; } } @media screen and (max-width: 1173px) { .tout-primary .img-container { max-height: 300px; } } @media screen and (max-width: 767px) { .tout-primary .img-container { max-height: 200px; } } .tout-primary .model-hero-tile { position: relative; } .tout-primary .legal-btn { color: #fff; font-family: "HelveticaNeueLT-Roman"; font-size: 15px; font-weight: 400; border-bottom: 1px solid #fff; padding-bottom: 1px; position: absolute; bottom: 15px; } .tout-primary .legal-flyup { position: absolute; bottom: 45px; left: 0; top: 0; height: 100%; width: 100%; } .tout-primary .legal-flyup .container { height: 100%; } .tout-primary .legal-copy-container { display: none; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; position: absolute; top: 0; background: #fff; width: 100%; height: 100%; padding-top: 94px; } .tout-primary .legal-copy-container.active { display: block; } @media screen and (max-width: 1173px) { .tout-primary .legal-copy-container { padding-top: 60px; } } .tout-primary .legal-copy-container h3 { color: #1b1b1b; font-family: "HelveticaNeueLT-Bold"; font-size: 19px; width: 100%; border-bottom: 1px solid #c4c4c4; padding-bottom: 16px; margin-bottom: 24px; } @media screen and (max-width: 1173px) { .tout-primary .legal-copy-container h3 { font-size: 14px; padding-bottom: 12px; margin-bottom: 14px; } } @media screen and (max-width: 767px) { .tout-primary .legal-copy-container h3 { font-size: 10px; padding-bottom: 6px; margin-bottom: 8px; } } .tout-primary .legal-copy-container p { color: #1b1b1b; font-family: "HelveticaNeueLT-Roman"; font-size: 12px; line-height: 22px; } @media screen and (max-width: 1173px) { .tout-primary .legal-copy-container p { font-size: 7px; line-height: 12px; } } .tout-primary .legal-copy-container .icon-close { font-size: 19px; color: #1b1b1b; font-weight: 300; position: absolute; top: 52px; left: 50%; transform: translateX(-50%); display: block; } @media screen and (max-width: 1174px) { .tout-primary .legal-copy-container .icon-close { top: 25px; font-size: 12px; } } .tout-primary.inner-tout { padding-top: 28px; padding-bottom: 0; } .tout-primary.inner-tout .lead-container { padding-bottom: 34px; } .tout-primary.video-splash { padding: 0; } .tout-primary.video-splash .img-container { min-height: 0; max-height: 100%; } .tout-primary.video-splash video { width: 100%; } .tout-primary.video-splash .video-splash-copy { background: #1e1e1e; margin-top: -3px; padding-top: 46px; position: relative; } @media screen and (max-width: 767px) { .tout-primary.video-splash .video-splash-copy { padding-top: 16px; } } .tout-primary.video-splash .video-splash-copy .container { max-width: 625px; padding-bottom: 57px; } @media screen and (max-width: 767px) { .tout-primary.video-splash .video-splash-copy .container { padding-bottom: 17px; } } .tout-primary.video-splash .video-splash-copy:after { bottom: 100%; left: 50%; border: solid transparent; content: ' '; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(30, 30, 30, 0); border-bottom-color: #1e1e1e; border-width: 20px; margin-left: -20px; } @media screen and (max-width: 1173px) { .tout-primary.video-splash .video-splash-copy:after { border-width: 15px; margin-left: -15px; } } .tout-primary.video-splash .lead-container { padding-bottom: 70px; } @media screen and (max-width: 1173px) { .tout-primary.video-splash .lead-container { padding: 0 66px 52px; } } @media screen and (max-width: 767px) { .tout-primary.video-splash .lead-container { padding: 0 55px 12px; } } .tout-primary.video-splash .lead { color: #fff; padding-bottom: 0; } @media screen and (max-width: 767px) { .tout-primary.video-splash .lead { line-height: 28px; padding: 0 26px; } } .tout-primary.video-splash .lead-desc { color: #fff; font-family: "HelveticaNeueLT-Roman"; font-size: 14px; line-height: 24px; } @media screen and (max-width: 1173px) { .tout-primary.video-splash .lead-desc { font-size: 11px; line-height: 18px; } } @media screen and (max-width: 767px) { .tout-primary.video-splash .lead-desc { font-size: 9px; line-height: 14px; } } .tout-primary.video-splash .sponsor-logos { max-width: 235px; margin: 0 auto; border-bottom: 1px solid #fff; display: block; padding-bottom: 22px; margin-bottom: 28px; text-align: center; } .tout-primary.video-splash .sponsor-logos img { display: inline-block; margin-right: 20px; } .tout-primary.video-splash .sponsor-logos img:last-child { margin-right: 0; } @media screen and (max-width: 767px) { .tout-primary.video-splash .sponsor-logos img { width: 34%; margin-right: 12px; vertical-align: bottom; } } @media screen and (max-width: 767px) { .tout-primary.video-splash .sponsor-logos { max-width: 75px; border-color: #3c3c3c; padding-bottom: 8px; margin-bottom: 14px; vertical-align: bottom; } } .tout-primary.video-splash .sponsor-copy { color: #fff; font-family: "HelveticaNeueLT-Bold"; font-size: 12px; line-height: 19px; text-align: center; letter-spacing: 0.1em; } @media screen and (max-width: 767px) { .tout-primary.video-splash .sponsor-copy { font-size: 7px; line-height: 9px; } } .slider { background: #fff; } .slider .model-card { transform-style: preserve-3d; text-align: center; height: 100% !important; padding: 0 20px; background-color: transparent; } @media screen and (max-width: 767px) { .slider .model-card { padding: 0 15px; } } .slider .model-card .img-container { min-height: 150px; } @media screen and (max-width: 1173px) { .slider .model-card .img-container { min-height: 115px; } } @media screen and (max-width: 767px) { .slider .model-card .img-container { min-height: 130px; } } .slider .model-card img { max-width: 100%; width: auto; } .slider .legal-copy { text-align: left; } @media screen and (max-width: 1173px) { .slider .legal-copy p { font-size: 7px; line-height: 12px; } } .slider .actions-container { position: absolute; bottom: 35px; width: 100%; max-width: 260px; z-index: 2; background: #fff; padding: 0 20px; } @media screen and (max-width: 1173px) { .slider .actions-container { bottom: 0; max-width: 242px; padding: 0; } .slider .actions-container .btn-primary { padding: 11px 0; } } @media screen and (max-width: 767px) { .slider .actions-container { bottom: 0; padding: 0; } .slider .actions-container .btn-primary { width: 100%; margin-bottom: 10px; padding: 15px 0; } } .slider .coming-soon { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; padding: 51px; text-align: center; } .slider .model-header { text-align: center; border-bottom: none; padding-bottom: 0; padding-top: 0; margin-top: 0; } .slider .model-header h3 { padding-right: 0; color: #1b1b1b; font-family: "HelveticaNeueLT-Bold"; font-size: 24px; line-height: 1; padding-bottom: 9px; min-height: 60px; } @media screen and (max-width: 1173px) { .slider .model-header h3 { font-size: 18px; padding-bottom: 2px; } } @media screen and (max-width: 767px) { .slider .model-header h3 { font-size: 17px; padding-bottom: 2px; } } .slider .model-header .price-container { position: relative; width: 100%; top: auto; right: auto; display: inline-block; text-align: center; color: #1b1b1b; font-size: 20px; padding-bottom: 5px; } @media screen and (max-width: 1173px) { .slider .model-header .price-container { padding-bottom: 0; } } .slider .model-header .price-container span { text-align: center; } .slider .model-header .price-container span:not(.msrp-coming-soon) { display: block; font-size: 10px; padding-bottom: 8px; position: relative; white-space: nowrap; color: #000; } @media screen and (max-width: 1173px) { .slider .model-header .price-container span:not(.msrp-coming-soon) { padding-bottom: 2px; } } .slider .model-header .price-container .MSRP { padding-right: 4px; } .slider .model-header .price-container .msrp-coming-soon { line-height: 1.1em; } .slider .model-header .price-container .info-tooltip { bottom: 100%; right: -22px; } @media screen and (max-width: 1173px) { .slider .model-header .price-container .info-tooltip { width: 195px; padding: 9px; } } @media screen and (max-width: 1173px) { .slider .model-header .price-container { font-size: 14px; } } @media screen and (max-width: 767px) { .slider .model-header .price-container { font-size: 15px; } } .slider .desc-container { height: 46px; min-height: 46px; padding-top: 0; } @media screen and (max-width: 1173px) { .slider .desc-container { font-size: 12px; line-height: 15px; margin-top: 1em; } } @media screen and (max-width: 767px) { .slider .desc-container { height: 20px; } } .slider .desc-container .inner-container a { color: #0d9be4; font-size: 10px; font-family: "HelveticaNeueLT-Roman"; } @media screen and (max-width: 1173px) { .slider .desc-container .inner-container a { font-size: 9px; line-height: 11px; } } .slider .desc-container .event p { font-size: 15px; line-height: 22px; font-family: "HelveticaNeueLT-Roman"; position: relative; } @media screen and (max-width: 1173px) { .slider .desc-container .event p { font-size: 12px; line-height: 14px; } .slider .desc-container .event p a { font-size: 9px; } } .model-slider { padding-bottom: 34px; } .model-slider .info-container .msrp-tooltip-trigger { margin-left: 0; } .scrollbar { height: 15px; background: #dddddd; max-width: 500px; border-radius: 20px; margin: 0 auto; } .scrollbar .handle { width: 72px; /* overriden if dynamicHandle: 1 */ height: 100%; background: #fff; border-radius: 20px; border: 1px solid #ddd; cursor: pointer; cursor: hand; } .frame { width: 100%; background: #fff; padding: 0 42px; height: calc(555px + 120px); } @media screen and (max-width: 1173px) { .frame { margin-bottom: 28px; padding: 0 30px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); height: calc(465px + 155px); } } @media screen and (max-width: 767px) { .frame { margin-bottom: 28px; padding: 0 20px; height: calc(525px + 155px); } } .frame .slidee { margin: 0; padding: 0; height: 100%; list-style: none; } .frame .slidee li { float: left; margin: 0 17px 0 0; padding: 0; height: 100%; width: 300px; display: block; position: relative; } @media screen and (max-width: 1173px) { .frame .slidee li { width: 300px; } } @media screen and (max-width: 767px) { .frame .slidee li { width: 300px; } } .frame .slidee li:last-child { margin-right: 0; } .social-slider { background: #f1f1f1; } @media screen and (max-width: 767px) { .social-slider { display: none; } } .social-slider h2 { color: #1b1b1b; font-family: "national"; font-size: 40px; font-weight: 300; line-height: 1; text-align: center; margin-bottom: 30px; } .social-slider .scrollbar { margin-bottom: 37px; } .social-slider .frame { background: #f1f1f1; padding-bottom: 35px; height: auto; } .social-slider .frame .img-container { min-height: 42px; } .social-slider .slidee:after { content: ""; display: table; clear: both; } .social-slider .slidee li { background: #fff; width: 240px; height: auto; margin-right: 20px; position: relative; } .social-slider .icon-fb, .social-slider .icon-ig, .social-slider .icon-twit, .social-slider .icon-yt { width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; text-align: center; font-size: 10px; display: block; padding-top: 6px; position: absolute; top: 9px; left: 16px; transition: background 0.05s; } .social-slider .icon-fb:hover, .social-slider .icon-ig:hover, .social-slider .icon-twit:hover, .social-slider .icon-yt:hover { background: #ababab; } .social-slider .icon-fb { color: #fff; background: #3b5998; font-size: 16px; padding-top: 3px; } .social-slider .icon-yt { color: #fff; background: #bb0000; top: 9px; padding-top: 7px; } .social-slider .icon-ig { color: #fff; background: #ded1c1; font-size: 12px; padding-top: 5px; } .social-slider .icon-ig:after { content: ''; background-color: #ded1c1; width: 4px; height: 4px; border-radius: 50%; position: absolute; top: 9px; left: 9px; } .social-slider .icon-ig:hover:after { background-color: #ababab; } .social-slider .icon-twit { background: #00aced; color: #fff; } .social-slider li .inner-container { padding: 12px 15px 15px; } .social-slider .post-desc { border-bottom: 1px solid #b4b4b4; color: #1b1b1b; font-size: 10px; font-family: "HelveticaNeueLT-Roman"; line-height: 15px; padding-bottom: 8px; /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; } .social-slider .post-desc a { color: #0d9be4; } .social-slider .post-desc a:hover { color: #000; text-decoration: underline; } .social-slider .social-meta { display: block; padding-left: 30px; position: relative; line-height: 14px; padding-top: 11px; } .social-slider .social-meta .profile-img { position: absolute; left: 0; top: 14px; } .social-slider .social-meta .profile-name { font-family: "HelveticaNeueLT-Bold"; color: #1b1b1b; font-size: 10px; display: block; } .social-slider .social-meta .post-time { font-family: "HelveticaNeueLT-Roman"; font-size: 9px; color: #666; } .messaging-banner { width: 100%; background: #ff2841; padding: 13px 0; text-align: center; } @media screen and (max-width: 767px) { .messaging-banner { padding-top: 10px; padding-bottom: 12px; } .messaging-banner strong { display: inline; text-align: center; margin-bottom: 4px; } } .messaging-banner .container { position: relative; } .messaging-banner .icon-close { color: #fff; position: absolute; right: 40px; top: 0; height: 100%; vertical-align: middle; font-size: 13px; } @media screen and (max-width: 1173px) { .messaging-banner .icon-close { right: 20px; font-size: 11px; } } @media screen and (max-width: 767px) { .messaging-banner .icon-close { top: -24px; left: 50%; right: auto; transform: translateX(-50%); } } .messaging-banner-link { color: #fff; text-align: center; font-family: "HelveticaNeueLT-Roman"; font-size: 14px; letter-spacing: 0.045em; display: inline-block; } .messaging-banner-link:before { content: url("/client/img/alert.svg"); display: inline-block; height: 24px; left: -8px; position: relative; top: 6px; width: 24px; margin-top: -10px; } .messaging-banner-link strong { font-family: "HelveticaNeueLT-Bold"; } .messaging-banner-link:hover { text-decoration: underline; } @media screen and (max-width: 1173px) { .messaging-banner-link { font-size: 12px; } .messaging-banner-link:before { height: 14px; left: -6px; position: relative; top: 3px; width: 14px; margin-bottom: 10px; } .messaging-banner-link strong:after { content: '\A'; white-space: pre; } } .video-promo { background: #1e1e1e; width: 100%; position: relative; padding: 50px 20px 50px 20px; } .video-promo:before { content: ''; position: absolute; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #1e1e1e; top: -10px; left: 50%; transform: translate(-10px, -50%); } .video-promo-content { max-width: 550px; margin: 0 auto; line-height: 24px; } .video-promo-tagline { color: white; font-size: 40px; font-family: "national"; display: block; text-align: center; margin-bottom: 20px; } @media screen and (max-width: 767px) { .video-promo-tagline { font-size: 24px; } } .video-promo-details { color: white; font-size: 14px; display: block; text-align: center; font-family: "HelveticaNeueLT-Roman"; } @media screen and (max-width: 767px) { .video-promo-details { font-size: 11px; } } .video-promo-sponsor { padding-top: 75px; display: block; margin: 0 auto; } @media screen and (max-width: 767px) { .video-promo-sponsor { padding-top: 30px; } } .video-promo-sponsor-logos { font-size: 0; text-align: center; max-width: 240px; display: block; margin: 0 auto; border-bottom: 1px solid white; padding-bottom: 10px; } .video-promo-sponsor-logos img { width: 50px; display: inline-block; } .video-promo-sponsor-logos img:first-child { margin-right: 30px; } .video-promo-sponsor-copy { font-size: 12px; font-family: "HelveticaNeueLT-Bold"; color: white; display: block; text-transform: uppercase; max-width: 240px; margin: 0 auto; text-align: center; line-height: 19px; padding-top: 25px; } @media screen and (max-width: 767px) { .video-promo-sponsor-copy { font-size: 10px; } } .model-slider .price-payment-container { margin: 0px !important; } .model-slider .price-payment-container .price-item { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; text-align: center; } .model-slider .price-payment-container .price-item span.price-payment { padding: 5px; font-size: 16px !important; color: #000 !important; text-align: center !important; } .model-slider .price-payment-container .price-item .item-caption { text-align: center; } .model-slider .price-payment-container .price-item .price-value { font-weight: bold; } .model-slider .price-fees-container { margin: 10px 0px 0px !important; border-bottom: none; } .model-slider .price-fees-container .price-fees-caption { white-space: normal !important; padding: 8px 8px 5px 8px !important; } .model-slider .price-weekly-container { margin: 6px 0px 0px !important; color: #000 !important; padding-top: 11px; border-top: 1px silver solid; border-bottom: 1px silver solid; } .model-slider .price-weekly-container .price-item .item-caption { font-size: 10px !important; width: 52%; } .model-slider .price-weekly-container .price-item .item-caption .info-container { margin-top: -18px !important; margin-left: 6px !important; position: absolute !important; } .model-slider .price-weekly-container .price-item .price-term-weekly { font-size: 16px !important; } .model-slider .price-weekly-container .price-item span.price-term-value, .model-slider .price-weekly-container .price-item span.price-term-apr { padding: 4px 0 0 !important; font-size: 16px !important; } .model-slider .list-item.flip-item:first-child .price-weekly-container-home .info-container .info-tooltip { right: -195px !important; } @media screen and (max-width: 768px) { .model-slider .list-item.flip-item:first-child .price-weekly-container-home .info-container .info-tooltip { right: -210px !important; } } .model-slider .list-item.flip-item:first-child .price-weekly-container-home .info-container .info-tooltip:after { right: 275px !important; } @media screen and (max-width: 768px) { .model-slider .list-item.flip-item:first-child .price-weekly-container-home .info-container .info-tooltip:after { right: 215px !important; } } @media screen and (max-width: 768px) { .model-slider .list-item.flip-item:last-child .price-weekly-container-home .info-container .info-tooltip { right: -162px !important; } } @media screen and (max-width: 768px) { .model-slider .list-item.flip-item:last-child .price-weekly-container-home .info-container .info-tooltip:after { right: 162px !important; } } .model-slider .price-weekly-container-home { margin: 6px 0px 20px !important; color: #000 !important; padding-top: 11px; border-top: 1px silver solid; border-bottom: 1px silver solid; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; font-family: 'HelveticaNeueLT-Roman'; padding-bottom: 10px; } .model-slider .price-weekly-container-home .price-item { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; } .model-slider .price-weekly-container-home .price-item .item-caption-price, .model-slider .price-weekly-container-home .price-item .item-caption-weekly, .model-slider .price-weekly-container-home .price-item .item-caption-term, .model-slider .price-weekly-container-home .price-item .item-caption-apr { font-size: 12px; line-height: 12px; font-weight: initial; padding: 5px; } .model-slider .price-weekly-container-home .price-item .item-caption { font-size: 10px !important; width: 52%; } @media screen and (max-width: 768px) { .model-slider .price-weekly-container-home .price-item .item-caption { width: 70% !important; } } .model-slider .price-weekly-container-home .price-item .item-caption .info-container { margin-top: -18px !important; margin-left: 6px !important; position: absolute !important; } .model-slider .price-weekly-container-home .price-item .item-caption .info-container .info-tooltip { width: 250px; height: 280px; z-index: 100; right: -200px !important; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } @media screen and (max-width: 768px) { .model-slider .price-weekly-container-home .price-item .item-caption .info-container .info-tooltip { width: 250px; right: -185px !important; } } .model-slider .price-weekly-container-home .price-item .item-caption .info-container .info-tooltip:after { top: -13px; right: 175px; } @media screen and (max-width: 768px) { .model-slider .price-weekly-container-home .price-item .item-caption .info-container .info-tooltip:after { right: 185px !important; } } .model-slider .price-weekly-container-home .price-item .item-caption .info-container .info-tooltip::-webkit-scrollbar { width: 0.8em; } .model-slider .price-weekly-container-home .price-item .item-caption .info-container .info-tooltip::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .model-slider .price-weekly-container-home .price-item .item-caption .info-container .info-tooltip::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey; } .model-slider .price-weekly-container-home .price-item .price-term-weekly { font-size: 16px !important; } .model-slider .price-weekly-container-home .price-item span.price-term-value, .model-slider .price-weekly-container-home .price-item span.price-term-apr, .model-slider .price-weekly-container-home .price-item span.price-info-apr { padding: 4px 0 0 !important; font-size: 16px !important; } @media screen and (max-width: 1173px) { .model-slider .price-weekly-container-home .price-item span.price-term-value, .model-slider .price-weekly-container-home .price-item span.price-term-apr, .model-slider .price-weekly-container-home .price-item span.price-info-apr { font-size: 13px !important; } } .model-slider .price-weekly-container-home .price-item .price-term-value, .model-slider .price-weekly-container-home .price-item .price-term-apr, .model-slider .price-weekly-container-home .price-item .price-info-apr { padding: 5px; font-weight: bold; font-size: 14px; } .model-slider .price-weekly-container-home .price-item .caption-tooltip { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .model-slider .badge-container-home { -ms-flex-align: center; align-items: center; font-family: 'HelveticaNeueLT-Roman'; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; padding-bottom: 5px; padding-top: 20px; margin-top: 8px; } @media screen and (max-width: 767px) { .model-slider .badge-container-home { padding-top: 8px; margin-top: 5px; } } .model-slider .badge-container-home .badge-text { font-size: 11px; } .model-slider .badge-container-home .badge-svg { width: 90px; height: 90px; margin-top: -15px; } .model-slider .badge-container-home .badge-text { font-family: 'HelveticaNeueLT-Roman'; color: #006600; } .model-slider .badge-container-home .badge-tooltip { font-size: 10px; backface-visibility: hidden; padding-top: 10px; left: 30px; } .model-slider .badge-container-home .segment-tooltip { font-size: 10px; backface-visibility: hidden; padding-top: 10px; top: -37px; left: 72px; } @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .model-slider .badge-container-home .segment-tooltip { left: 78px; } } @media only screen and (device-width: 375px) and (device-height: 667px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) { .model-slider .badge-container-home .segment-tooltip { left: 78px; } } .model-slider .badge-container-home .segment-text { font-size: 10px; display: inherit; padding-top: 15px; font-weight: bold; color: #666; letter-spacing: 0.05pt; } .model-slider .badge-container-home .segment-text span sub { vertical-align: sub; font-size: 9px; } .filter-container { width: 100%; position: relative; height: 96px; } .all-model-filter { display: table; max-width: 708px; width: 100%; margin: 48px auto 36px; border: #000 solid 1px; border-radius: 2px; } @media screen and (max-width: 767px) { .all-model-filter { display: block; background-color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); border: none; border-radius: 3px; padding: 0 19px; position: absolute; top: 28px; z-index: 10; left: 0; margin: 0; } } .all-model-filter a { display: table-cell; font-family: "HelveticaNeueLT-Bold"; color: #151515; font-size: 12px; line-height: 1; letter-spacing: 0.025em; text-align: center; height: 43px; vertical-align: middle; width: 20%; padding-top: 3px; border-right: #000 solid 1px; } .all-model-filter a:last-child { border-right: none; } @media screen and (max-width: 767px) { .all-model-filter a:last-child { border-bottom: none; } } .all-model-filter a.active { background: #000; color: #fff; } @media screen and (max-width: 767px) { .all-model-filter a.active { background: #fff; color: #000; } } .all-model-filter a.buffer { display: none; } @media screen and (max-width: 767px) { .all-model-filter a { display: none; width: 100%; border: none; border-bottom: 1px solid #f0f0f0; font-size: 14px; line-height: 20px; padding: 12px 0; height: auto; text-align: left; } .all-model-filter a br { display: none; } .all-model-filter a.active { display: block; } .all-model-filter a.active:after { position: absolute; right: 20px; top: 20px; font-size: 8px; content: '\e601'; font-family: 'honda-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } @media screen and (max-width: 736px) { .all-model-filter.open a, .all-model-filter.open a.buffer { display: block; } } .all-model-container { margin: 0 auto; width: 100%; padding: 0 40px; } @media screen and (min-width: 1919px) { .all-model-container { max-width: none; } } @media screen and (max-width: 1260px) { .all-model-container { padding: 10px 30px 0; } } @media screen and (max-width: 767px) { .all-model-container { padding: 0 20px; margin-top: -20px; } } .all-model-container .section-primary { border-top: 1px solid #b7b7b7; padding-bottom: 35px; max-width: 1260px; margin: 0 auto; } .all-model-container h2.section-heading { color: #1b1b1b; font-family: "national"; font-size: 40px; font-weight: 300; line-height: 35px; padding-bottom: 24px; } @media screen and (max-width: 767px) { .all-model-container h2.section-heading { font-size: 30px; } } .all-model-container .list-item { width: 23.7288135593%; display: inline-block; margin-right: 1.6949152542%; margin-bottom: 20px; vertical-align: top; height: calc(505px + 230px); min-width: 250px; background: #fff; } @media screen and (min-width: 1919px) { .all-model-container .list-item { height: calc(505px + 220px); max-width: 300px; } } .all-model-container .list-item:nth-child(4n) { margin-right: 0; } .all-model-container .list-item.future-vehicle { height: auto; } @media screen and (max-width: 1260px) { .all-model-container .list-item { height: calc(505px + 245px); width: 31.8181818182%; margin-right: 0; } .all-model-container .list-item:nth-child(3n+2) { margin-right: 2.2727272727%; margin-left: 2.2727272727%; } .all-model-container .list-item:nth-child(3n) { margin-right: 0; } } @media screen and (max-width: 1173px) { .all-model-container .list-item { width: 48.5875706215%; height: calc(580px + 255px); } .all-model-container .list-item:nth-child(odd) { margin-right: 2.8248587571%; } .all-model-container .list-item:nth-child(even) { margin-right: 0; } .all-model-container .list-item:nth-child(3n+2) { margin-left: 0; } } @media screen and (max-width: 780px) { .all-model-container .list-item { height: calc(580px + 170px); } } @media screen and (max-width: 767px) { .all-model-container .list-item { height: calc(580px + 170px); } } @media screen and (max-width: 550px) { .all-model-container .list-item { width: 100%; margin-right: 0 !important; } } @media screen and (max-width: 550px) { .all-model-container .list-item { height: calc(575px + 235px); } } @media screen and (max-width: 450px) { .all-model-container .list-item { height: calc(575px + 185px); } } @media screen and (max-width: 400px) { .all-model-container .list-item { height: calc(570px + 175px); } } @media screen and (max-width: 320px) { .all-model-container .list-item { height: calc(565px + 165px); } } .all-model-container .price-payment-container { margin: 15px 0px 0px !important; } .all-model-container .price-payment-container .price-item { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; width: 100%; } .all-model-container .price-payment-container .price-item span.price-payment { padding: 5px; font-weight: bold; font-size: 16px !important; color: #000 !important; } .all-model-container .price-payment-container .price-item .item-caption { white-space: nowrap; font-size: 9.5px !important; } .all-model-container .price-fees-container { margin: 10px 0px 0px !important; } .all-model-container .price-fees-container .price-fees-caption { display: inherit !important; padding: 8px 8px 5px 8px !important; } .all-model-container .price-weekly-container { margin: 6px 0px 0px !important; color: #000 !important; } .all-model-container .price-weekly-container .price-item .item-caption { font-size: 9.5px !important; } .all-model-container .price-weekly-container .price-item .item-caption .info-container { margin: -7px 0; } .all-model-container .price-weekly-container .price-item .item-caption .info-container .info-tooltip span.selling-price-tooltip, .all-model-container .price-weekly-container .price-item .item-caption .info-container .info-tooltip span.msrp-tooltip { color: #fff !important; } .all-model-container .price-weekly-container .price-item .price-term-weekly { font-size: 16px !important; } .all-model-container .price-weekly-container .price-item span.price-term-value, .all-model-container .price-weekly-container .price-item span.price-term-apr, .all-model-container .price-weekly-container .price-item span.price-info-apr { font-size: 14px !important; } .all-model-container .price-weekly-container-models { display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; width: 100%; -ms-flex-wrap: inherit; flex-wrap: inherit; font-family: 'HelveticaNeueLT-Roman'; padding-bottom: 10px; margin: 6px 0px 0px !important; color: #000 !important; border-bottom: 1px silver solid; min-height: 60px; } .all-model-container .price-weekly-container-models .price-item { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; color: #000 !important; text-align: center; } .all-model-container .price-weekly-container-models .price-item .item-caption-price, .all-model-container .price-weekly-container-models .price-item .item-caption-weekly, .all-model-container .price-weekly-container-models .price-item .item-caption-term, .all-model-container .price-weekly-container-models .price-item .item-caption-apr { font-size: 12px; line-height: 12px; font-weight: initial; padding: 5px; color: #000 !important; } .all-model-container .price-weekly-container-models .price-item .price-term-value, .all-model-container .price-weekly-container-models .price-item .price-term-apr, .all-model-container .price-weekly-container-models .price-item .price-info-apr { padding: 5px; font-weight: bold; font-size: 14px; color: #000 !important; } .all-model-container .price-weekly-container-models .price-item .caption-tooltip { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .all-model-container .price-weekly-container-models .price-item .item-caption { font-size: 9.5px !important; } .all-model-container .price-weekly-container-models .price-item .item-caption .info-container { margin: -7px 0; } .all-model-container .price-weekly-container-models .price-item .item-caption .info-container .info-tooltip { width: 250px; height: 225px; right: -145px; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } @media screen and (max-width: 767px) { .all-model-container .price-weekly-container-models .price-item .item-caption .info-container .info-tooltip { width: 275px; right: -185px; } } .all-model-container .price-weekly-container-models .price-item .item-caption .info-container .info-tooltip:after { right: 195px; } .all-model-container .price-weekly-container-models .price-item .item-caption .info-container .info-tooltip.adjust-apr { right: -180px !important; } .all-model-container .price-weekly-container-models .price-item .item-caption .info-container .info-tooltip span.tooltip-text { color: #fff !important; font-size: 9px !important; } .all-model-container .price-weekly-container-models .price-item .item-caption .info-container .info-tooltip::-webkit-scrollbar { width: 0.8em; } .all-model-container .price-weekly-container-models .price-item .item-caption .info-container .info-tooltip::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .all-model-container .price-weekly-container-models .price-item .item-caption .info-container .info-tooltip::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey; } .all-model-container .price-weekly-container-models .price-item .price-term-weekly { font-size: 16px !important; } .all-model-container .price-weekly-container-models .price-item span.price-term-value, .all-model-container .price-weekly-container-models .price-item span.price-term-apr, .all-model-container .price-weekly-container-models .price-item span.price-info-apr { font-size: 14px !important; } .all-model-container .badge-container-models { -ms-flex-align: center; align-items: center; font-family: 'HelveticaNeueLT-Roman'; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; padding-bottom: 5px; padding-top: 15px; margin-top: 8px; height: 185px; } .all-model-container .badge-container-models .badge-text { font-size: 11px; } .all-model-container .badge-container-models .badge-svg { width: 90px; height: 90px; margin-top: -15px; } .all-model-container .badge-container-models .badge-text { font-family: 'HelveticaNeueLT-Roman'; color: #006600; } .all-model-container .badge-container-models .badge-tooltip { font-size: 10px; backface-visibility: hidden; padding-top: 10px; top: 5px; left: 30px; } .all-model-container .badge-container-models .segment-tooltip { font-size: 10px; backface-visibility: hidden; padding-top: 10px; top: -43px; left: 72px; } @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .all-model-container .badge-container-models .segment-tooltip { top: -30px !important; left: 78px; } } @media only screen and (device-width: 375px) and (device-height: 667px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) { .all-model-container .badge-container-models .segment-tooltip { top: -30px !important; left: 78px; } } .all-model-container .badge-container-models .segment-text { font-size: 10px; display: inherit; padding-top: 15px; font-weight: bold; color: #666; letter-spacing: 0.25pt; } .all-model-container .badge-container-models .segment-text span sub { vertical-align: sub; font-size: 9px; } .listing-primary { font-size: 0; } .listing-primary .info-container .msrp-tooltip-trigger { margin-left: 0.5ch; } .all-models .section-heading { padding: 20px 0 30px; } @media screen and (max-width: 767px) { .all-models .section-heading { padding-top: 6px; padding-bottom: 14px; } } @media screen and (max-width: 767px) { .all-models .section-heading-title { font-size: 30px; } } .all-models .category-title { text-align: center; margin-bottom: 36px; } .all-models .model-card { background: #fff; height: 100%; } .all-models .model-card .model-img { width: 100%; transition: 0.5s ease-out 0s; } .all-models .model-card h3 { color: #1b1b1b; font-family: "HelveticaNeueLT-Bold"; font-size: 17px; line-height: 1; padding-right: 80px; } .all-models .model-card div.inner-container { padding: 0 20px 30px; } .no-touchevents .all-models .model-card:hover .model-img { transform: scale(1.2) translateZ(0); } .all-models .model-card .img-container { overflow: hidden; } .all-models .model-card .badge-container { backface-visibility: hidden; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; padding: 15px; } .all-models .model-card .badge-container img { width: 88px !important; height: 88px; transition: none !important; } .no-touchevents .all-models .model-card .badge-container:hover img { transform: none !important; } .actions-container { margin-top: 20px; } .actions-container:after { content: ""; display: table; clear: both; } .actions-container .btn-primary { border: 1px solid #0d9be4; border-radius: 3px; color: #0d9be4; font-family: "HelveticaNeueLT-Bold"; font-size: 15px; line-height: 12px; width: 45.643153527%; display: block; padding: 16px 0 15px; text-align: center; } .actions-container .btn-primary:first-child { float: left; } .actions-container .btn-primary:last-child { float: right; } .actions-container .btn-primary:hover { background-color: #0d9be4; color: #fff; } .actions-container .btn-primary.standalone { float: none; margin: 0 auto; } @media screen and (max-width: 767px) { .actions-container .btn-primary.standalone { margin-bottom: 15px; } } .book-test-drive-action-container { border-top: 1px solid #b7b7b7; text-align: center; padding: 16px 0; margin-top: 15px; } .book-test-drive-action-container:after { content: ""; display: table; clear: both; } .book-test-drive-action-container .book-test-drive-action-link { color: #ff2841; font-family: "HelveticaNeueLT-Bold"; font-size: 15px; line-height: 12px; display: block; } .book-test-drive-action-container .book-test-drive-action-link:hover { text-decoration: underline; } .virtual-showroom-action-container { display: none; border-top: 1px solid #b7b7b7; text-align: center; padding: 16px 0; } .virtual-showroom-action-container:after { content: ""; display: table; clear: both; } .virtual-showroom-action-container .virtual-showroom-action-link { color: #ff2841; font-family: "HelveticaNeueLT-Bold"; font-size: 15px; line-height: 12px; display: block; } .virtual-showroom-action-container .virtual-showroom-action-link:hover { text-decoration: underline; } .model-header { position: relative; margin-top: 12px; padding-top: 16px; padding-bottom: 11px; border-bottom: 1px solid #b7b7b7; } .model-header .price-container { position: absolute; right: 0; top: -5px; width: 100px; } .model-header .price-container .MSRP { white-space: nowrap; } .model-header .price-container .price-payment { line-height: 19px; color: #1b1b1b; font-size: 17px; font-family: "HelveticaNeueLT-Bold"; text-align: right; } .price-container { line-height: 19px; color: #1b1b1b; font-size: 17px; font-family: "HelveticaNeueLT-Bold"; text-align: right; } .price-container span:not(.msrp-coming-soon) { display: block; color: #666; font-size: 10px; font-family: "HelveticaNeueLT-Roman"; } .price-container .msrp-coming-soon { line-height: 1.1em; } .price-container .model-coming-soon { padding-top: 15px; font-weight: bold; font-size: 16px; } .info-container { display: inline-block; white-space: normal; margin-right: -12px; position: relative; } .info-container .msrp-tooltip-trigger { color: #44ade9; font-size: 14px; font-family: "HelveticaNeueLT-Bold"; text-decoration: none; cursor: pointer; vertical-align: super; margin-left: -2px; } .info-container .msrp-tooltip-trigger:after { margin-left: -3px; background-image: url(../../client/img/tooltipIcon.png); background-size: 12px 12px; display: inline-block; width: 12px; height: 12px; content: ""; background-repeat: no-repeat; /* IE10+ CSS styles go here */ /* EDGE CSS styles go here */ /* MAC Safari styles go here */ } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .info-container .msrp-tooltip-trigger:after { font-size: 12px; } } @supports (-ms-ime-align: auto) { .info-container .msrp-tooltip-trigger:after { font-size: 12px; } } @media not all and (min-resolution: 0.001dpcm) { .info-container .msrp-tooltip-trigger:after { font-size: 12px; } } @media screen and (-moz-overlay-scrollbars) { .info-container .msrp-tooltip-trigger:after { font-size: 12px; } } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .info-container .msrp-tooltip-trigger { /* IE10+ CSS styles go here */ margin-left: -5px; } } @supports (-ms-accelerator: true) { .info-container .msrp-tooltip-trigger { /* EDGE CSS styles go here */ margin-left: -5px; } } @media screen and (max-width: 1174px) { .info-container .msrp-tooltip-trigger { font-size: 8px; } } @media screen and (max-width: 767px) { .info-container .msrp-tooltip-trigger { margin-right: 0; } } .info-container:hover .info-tooltip { display: block; } .info-tooltip { display: none; position: absolute; bottom: calc(100% + 7px); right: -22px; color: #fff; font-family: "HelveticaNeueLT-Roman"; font-size: 9px; line-height: 12px; padding: 13px 15px; width: 218px; background-color: #505050; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); text-align: left; } .info-tooltip.alt-bottom { bottom: auto; z-index: 1; } @media screen and (max-width: 767px) { .info-tooltip.alt-bottom { bottom: auto; right: -22px; } } .info-tooltip.alt-bottom:after { top: -22px; transform: rotate(180deg); } .info-tooltip:after { top: 100%; right: 17px; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(80, 80, 80, 0); border-top-color: #505050; border-width: 7px; margin-left: -7px; margin-top: -1px; } .info-tooltip.active { display: block !important; } .info-tooltip .bap-tooltip-link { color: #fff; } .info-tooltip .bap-tooltip-link:hover { text-decoration: underline; } .french .info-tooltip.alt-bottom { bottom: auto; } @media screen and (max-width: 767px) { .french .trims-preview-rotator .info-tooltip.alt-bottom { right: -21px; } } .legal { color: #0d9be4; font-size: 10px; line-height: 33px; cursor: pointer; text-decoration: underline; } .desc-container { display: table; min-height: 61px; width: 100%; padding-top: 3px; color: #1b1b1b; font-family: "HelveticaNeueLT-Roman"; font-size: 12px; line-height: 19px; border-bottom: 1px solid silver; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; } .desc-container .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .desc-container b, .desc-container strong { font-family: "HelveticaNeueLT-Bold"; } .desc-container .event p { color: #ff344a; font-size: 14px; line-height: 19px; } .desc-container .event a.legal { color: #0d9be4; font-size: 10px; text-decoration: underline; } .legal-copy { background: #fff; font-family: "HelveticaNeueLT-Roman"; font-size: 9px; padding: 10px 20px 15px; } .legal-copy p { color: #1b1b1b; line-height: 15px; } .future-container img { width: 100%; } .hidden { visibility: hidden; } .animated { animation-duration: 0.65s; animation-fill-mode: both; } @keyframes zoomIn { from { opacity: 50%; transform: scale3d(0.75, 0.75, 0.75); } 50% { opacity: 1; } } .zoomIn { animation-name: zoomIn; } .coverage-container { padding: 40px 0 90px 0; background-color: white; } @media screen and (max-width: 767px) { .coverage-container { background-color: #f1f1f1; padding-top: 20px; padding-bottom: 0; } } .coverage-container-large { float: left; width: 70.80078125%; } @media screen and (max-width: 1173px) { .coverage-container-large { margin-top: 25px; } } @media screen and (max-width: 767px) { .coverage-container-large { width: 100%; } } .coverage-container-large p { font-size: 15px; line-height: 25px; font-family: 'HelveticaNeueLT-Roman'; margin-bottom: 20px; } @media screen and (max-width: 767px) { .coverage-container-large p { font-size: 10px; line-height: 16px; } } .coverage-container-large p:first-child { margin-top: 50px; } @media screen and (max-width: 1173px) { .coverage-container-large p:first-child { margin-top: 0; } } .coverage-container-large a { color: #0d9be4; } .coverage-container-small { float: right; width: 17.3828125%; } @media screen and (max-width: 1173px) { .coverage-container-small { margin-top: 25px; } } @media screen and (max-width: 767px) { .coverage-container-small { display: none; } } .coverage-title-wrapper { border-bottom: 1px solid #a1a1a1; width: 70.80078125%; position: relative; padding-bottom: 30px; } @media screen and (max-width: 1173px) { .coverage-title-wrapper { width: 100%; } } @media screen and (max-width: 767px) { .coverage-title-wrapper { padding-bottom: 0; } } .coverage-title-wrapper .icon-warranty { position: absolute; right: 0; top: 0; font-size: 30px; } @media screen and (max-width: 767px) { .coverage-title-wrapper .icon-warranty { font-size: 16px; } } @media screen and (max-width: 767px) { .coverage-title-wrapper .warranty-subtitle { font-size: 15px; width: 75%; line-height: 20px; padding-right: 40px; } } .honda-plus-banner { background-color: #ff2841; padding: 30px 0px 0 0px; width: 100%; max-width: 157px; } .honda-plus-banner .heading { font-size: 18px; color: white; font-family: 'HelveticaNeueLT-Bold'; line-height: 23px; padding-bottom: 65px; display: block; padding-left: 20px; padding-right: 20px; } @media screen and (max-width: 1173px) { .honda-plus-banner .heading { font-size: 15px; } } .honda-plus-logo { background-color: #231f20; color: white; padding-top: 40px; padding-bottom: 35px; text-align: center; font-size: 25px; } @media screen and (max-width: 1173px) { .honda-plus-logo { font-size: 20px; } } .honda-plus-link-container { padding-bottom: 30px; display: block; padding-left: 20px; padding-right: 20px; } .honda-plus-link-container:after { content: ""; display: table; clear: both; } .honda-plus-link-container .link-description { font-size: 10px; font-family: 'HelveticaNeueLT-Bold'; color: white; display: block; float: left; } .honda-plus-link-container .link-circle-arrow { float: right; color: white; border: 1px solid white; margin-top: -15px; } @media screen and (max-width: 1173px) { .honda-plus-link-container .link-circle-arrow { width: 20px; height: 20px; line-height: 18px; font-size: 5px; margin-top: -5px; } } .honda-plus-link-container .link-circle-arrow:hover, .honda-plus-link-container .no-touchevents .list-nav-link:hover .link-circle-arrow, .no-touchevents .list-nav-link:hover .honda-plus-link-container .link-circle-arrow { background-color: #ff2841; } .warranty-subtitle { font-size: 30px; font-family: 'HelveticaNeueLT-Bold'; max-width: 575px; display: block; } @media screen and (max-width: 1173px) { .warranty-subtitle { font-size: 15px; } } @media screen and (max-width: 767px) { .warranty-subtitle { margin-bottom: 15px; display: block; border-bottom: 1px solid #1b1b1b; padding-bottom: 10px; max-width: none; } } .warranty-sub-description { display: block; max-width: 550px; margin-top: 30px; font-family: 'HelveticaNeueLT-Roman'; font-size: 20px; line-height: 29px; } @media screen and (max-width: 1173px) { .warranty-sub-description { font-size: 12px; line-height: 17px; max-width: 425px; } } @media screen and (max-width: 767px) { .warranty-sub-description { margin-top: 0; } } .coverage-2-col-wrapper:after { content: ""; display: table; clear: both; } .warranty-section-title-wrapper { margin-top: 50px; position: relative; } @media screen and (max-width: 1173px) { .warranty-section-title-wrapper { margin-top: 35px; } } @media screen and (max-width: 767px) { .warranty-section-title-wrapper { margin-top: 10px; } } .warranty-section-title-wrapper .icon-warranty { display: none; } @media screen and (max-width: 767px) { .warranty-section-title-wrapper .icon-warranty { position: absolute; right: 0; top: 0; display: block; } } .coverage-blocks { margin-top: 40px; width: 100%; } .coverage-blocks-list { display: inline-block; width: 100%; } .coverage-blocks-list li { padding: 25px 30px 50px 30px; background-color: white; position: relative; width: 31.25%; display: inline-block; margin-left: -4px; margin-right: 3%; margin-bottom: 20px; vertical-align: top; } @media screen and (max-width: 767px) { .coverage-blocks-list li { width: 100%; padding-bottom: 30px; padding-top: 20px; } } .coverage-blocks-list li:nth-child(3n) { margin-right: 0; } .coverage-block-title { display: block; font-size: 25px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; padding-bottom: 25px; border-bottom: 1px solid #8d8d8d; } @media screen and (max-width: 1173px) { .coverage-block-title { font-size: 15px; } } @media screen and (max-width: 767px) { .coverage-block-title { border-bottom: 1px solid #dedede; padding-bottom: 15px; } } .coverage-duration { padding-top: 15px; display: block; font-size: 15px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; position: absolute; bottom: 20px; width: 100%; max-width: 235px; } @media screen and (max-width: 1173px) { .coverage-duration { font-size: 10px; max-width: 191px; } } @media screen and (max-width: 767px) { .coverage-duration { font-size: 10px; max-width: 285px; bottom: 15px; } } .note-wrapper { margin-top: 20px; padding-bottom: 30px; } .note-wrapper-title { font-size: 15px; color: #e72530; font-weight: bold; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .warranty-section { padding-top: 45px; margin-top: 50px; border-top: 1px solid #868686; position: relative; } @media screen and (max-width: 1173px) { .warranty-section { margin-top: 30px; padding-top: 30px; } } @media screen and (max-width: 767px) { .warranty-section { border-top: none; padding-top: 0; } } .warranty-section:after { content: ""; display: table; clear: both; } @media screen and (max-width: 767px) { .warranty-section .list-nav-action { position: relative; display: block; transform: none; top: 0; right: 0; margin-top: 20px; } } .warranty-section .warranty-section-title-wrapper { margin-top: 0; position: relative; } @media screen and (max-width: 767px) { .warranty-section .warranty-section-title-wrapper { float: none; max-width: none; } } .warranty-disclaimer-details { font-size: 15px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 25px; display: block; margin-top: 15px; max-width: 720px; } @media screen and (max-width: 1173px) { .warranty-disclaimer-details { font-size: 10px; line-height: 16px; margin-top: 10px; } } .warranty-disclaimer { padding: 30px 0 20px 0; border-top: 1px solid #868686; } @media screen and (max-width: 767px) { .warranty-disclaimer { padding-bottom: 0; } } .warranty-disclaimer li { margin-top: 40px; max-width: 720px; } @media screen and (max-width: 1173px) { .warranty-disclaimer li { margin-top: 20px; } } .warranty-disclaimer li:first-child { margin-top: 0; } .warranty-disclaimer .warranty-disclaimer-details { margin-top: 0; } .warranty-asterisk { color: #0d9be4; font-size: 15px; font-weight: bold; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .warranty-table-wrapper { clear: both; margin-top: 40px; } @media screen and (max-width: 767px) { .warranty-table-wrapper { margin-top: 25px; } } .warranty-table { width: 48%; display: inline-block; margin-left: -4px; margin-right: 3.9%; vertical-align: top; background-color: white; padding-bottom: 40px; } @media screen and (max-width: 767px) { .warranty-table { display: block; width: 100%; margin-bottom: 15px; } } .warranty-table:nth-child(2) { margin-right: 0; margin-bottom: 0; } .warranty-table table { width: 100%; } .warranty-table table td { background-color: white; padding-bottom: 20px; padding-left: 30px; padding-right: 30px; padding-top: 20px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; position: relative; } .warranty-table table td:after { content: ''; position: absolute; border-bottom: 1px solid #dedede; bottom: 0; left: -25px; width: 100%; margin-right: 50px; } @media screen and (max-width: 767px) { .warranty-table table td { font-size: 10px; padding-top: 15px; padding-bottom: 10px; } } .warranty-table table td.description { font-weight: bold; width: 60%; line-height: 25px; } .warranty-table table td.description:after { content: ''; position: absolute; border-bottom: 1px solid #dedede; bottom: 0; left: 0; width: 100%; margin-left: 20px; } .warranty-table table th { background-color: #dedede; padding: 22px 30px 22px 30px; font-size: 20px; font-weight: bold; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-align: left; } @media screen and (max-width: 767px) { .warranty-table table th { font-size: 14px; } } @media screen and (max-width: 767px) { .warranty-subtitle.alt { border-bottom: none; padding-bottom: 0; } } .awards { margin-top: 20px; } @media screen and (max-width: 767px) { .awards { margin-top: 0; } } .awards .model-page-header { margin-top: 60px; margin-bottom: 45px; } @media screen and (max-width: 1173px) { .awards .model-page-header { margin-top: 40px; margin-bottom: 30px; } } @media screen and (max-width: 767px) { .awards .model-page-header { /*display:none;*/ } } .small-awards-item { padding: 50px 30px 30px 30px; background-color: white; display: inline-block; width: 17.578125%; margin-bottom: 25px; margin-right: 2.5%; font-size: 0; vertical-align: top; position: relative; } .small-awards-item:nth-of-type(5n) { margin-right: 0; } .small-awards-item .award-year { position: absolute; bottom: 30px; } @media screen and (max-width: 1173px) { .small-awards-item { width: 22%; margin-right: 0; font-size: 0; margin-right: 3%; } .small-awards-item:nth-of-type(5n) { margin-right: 3%; } .small-awards-item:nth-of-type(4n) { margin-right: 0px; } } @media screen and (max-width: 767px) { .small-awards-item { width: 45%; margin-right: 0; font-size: 0; margin-right: 4%; } .small-awards-item:nth-of-type(5n) { margin-right: 4%; } .small-awards-item:nth-of-type(4n) { margin-right: 4%; } .small-awards-item:nth-of-type(2n) { margin-right: 0; } } .award-thumbnail { width: 100%; margin-bottom: 50px; } .award-details { border-top: 1px solid black; /*Added because classes cant be added to the element that this is used for dynamically */ } .award-details a { font-size: 15px; color: #4b9be3; font-family: 'HelveticaNeueLT-Roman'; line-height: 20px; display: block; margin: 30px 0 40px 0; word-wrap: break-word; } @media screen and (max-width: 767px) { .award-details a { font-size: 10px; } } @media screen and (max-width: 767px) { .award-details .award-link { display: block; } } .award-title-large { font-size: 20px; font-family: 'HelveticaNeueLT-Bold'; margin-top: 25px; display: block; line-height: 19px; max-width: 205px; line-height: 25px; } @media screen and (max-width: 767px) { .award-title-large { font-size: 12px; line-height: 16px; } } .award-title-small { font-size: 15px; font-family: 'HelveticaNeueLT-Bold'; margin-top: 25px; display: block; line-height: 19px; } @media screen and (max-width: 767px) { .award-title-small { font-size: 11px; line-height: 16px; } } .award-link { font-size: 15px; color: #4b9be3; font-family: 'HelveticaNeueLT-Roman'; line-height: 20px; display: inline-block; margin: 30px 0 40px 0; } @media screen and (max-width: 767px) { .award-link { font-size: 9px; line-height: 14px; } } .award-year { font-size: 15px; color: #ed2534; font-family: 'HelveticaNeueLT-Bold'; display: block; } @media screen and (max-width: 767px) { .award-year { font-size: 12px; } } .awards-rotator { margin-bottom: 40px; } .award-info { font-family: 'HelveticaNeueLT-Roman'; font-size: 15px; line-height: 23px; margin-top: 25px; } @media screen and (max-width: 767px) { .award-info { display: none; } } .award-info.mobile { display: none; } .award-info.mobile .read-more { display: inline-block; font-size: 10px; line-height: 15px; margin: 0; } @media screen and (max-width: 767px) { .award-info.mobile { display: block; } } .award-info:first-child { margin-top: 30px; } @media screen and (max-width: 767px) { .award-info { font-size: 10px; line-height: 15px; } } .awards-rotator .rotator-cell { width: 48%; margin-left: -4px; background-color: white; padding-left: 40px; padding-right: 40px; padding-top: 30px; padding-bottom: 40px; display: inline-block; margin-right: 0; vertical-align: top; } .awards-rotator .rotator-cell:first-child { margin-right: 3.5%; margin-left: 0; } @media screen and (max-width: 767px) { .awards-rotator .rotator-cell:first-child { margin-right: 20px; } } @media screen and (max-width: 767px) { .awards-rotator .rotator-cell { width: 100%; max-width: 225px; } } .large-awards-img { display: inline-block; margin-bottom: 25px; width: 50%; } @media screen and (max-width: 767px) { .large-awards-img { margin-bottom: 20px; } } .large-awards-img .award-thumbnail { margin-bottom: 0; max-width: 100px; } .large-awards-year { display: inline-block; margin-left: -4px; width: 50%; text-align: right; } .read-more-container { clear: both; height: 120px; position: relative; overflow: hidden; padding: 0; } .disclaimer-title { font-size: 30px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; } .disclaimer-section { margin-top: 55px; } .disclaimer-section:first-child { margin-top: 0; } @media screen and (max-width: 767px) { .disclaimer-wrapper { padding-bottom: 75px; } } .disclaimer-section-item { border-top: 1px solid #1b1b1b; margin-top: 60px; } @media screen and (max-width: 767px) { .disclaimer-section-item { margin-top: 45px; } } .disclaimer-section-item.alt-border { border-top: none; margin-top: 0; } .disclaimer-section-item .title { font-size: 15px; font-family: 'HelveticaNeueLT-Bold'; display: block; margin-bottom: 15px; padding-top: 25px; } @media screen and (max-width: 767px) { .disclaimer-section-item .title { font-size: 10px; line-height: 16px; } } .disclaimer-section-item .details { font-size: 15px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 23px; max-width: 650px; } @media screen and (max-width: 767px) { .disclaimer-section-item .details { font-size: 10px; line-height: 16px; } } .disclaimer-section-heading { border-bottom: 1px solid black; padding-bottom: 30px; } @media screen and (max-width: 767px) { .disclaimer-section-heading { font-size: 15px; padding-bottom: 15px; } } .disclaimer-section-heading:after { content: ""; display: table; clear: both; } .disclaimer-section-title { float: left; font-size: 30px; font-weight: bold; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } @media screen and (max-width: 767px) { .disclaimer-section-title { font-size: 15px; } } .disclaimer-section-index { float: right; font-size: 30px; font-weight: bold; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } @media screen and (max-width: 767px) { .disclaimer-section-index { font-size: 15px; } } .subsection-description { font-size: 25px; font-weight: bold; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin-top: 25px; max-width: 650px; line-height: 33px; } @media screen and (max-width: 767px) { .subsection-description { font-size: 12px; line-height: 17px; margin-top: 15px; } } .subsection-description a { color: #0d9be4; } .sub-page-header.alt { background: none; border-bottom: none; } .model-page-header-wrapper.alt-background { background: none; border-bottom: none; } @media screen and (max-width: 767px) { .model-page-header-wrapper.alt-background { padding-bottom: 30px; } } .gallery-row-one { text-align: right; position: relative; margin-top: 30px; } @media screen and (max-width: 767px) { .gallery-row-one { margin-top: 0; } } .gallery-row-one-small { position: absolute; bottom: 0; width: 20.4375%; text-align: right; left: 5%; } @media screen and (max-width: 767px) { .gallery-row-one-small { height: auto; display: block; width: 100%; margin-left: 0; position: static; left: 0; } } @media screen and (max-width: 767px) { .model-page-header-title.gallery-title { display: none; } } .gallery-row-one-large { display: inline-block; width: 100%; padding-left: 27%; } @media screen and (max-width: 767px) { .gallery-row-one-large { display: block; width: 100%; margin-left: 0; padding-left: 0; } } .gallery-thumbnail-one { position: relative; } @media screen and (max-width: 767px) { .gallery-thumbnail-one { margin-bottom: 20px; } } .gallery-thumbnail-one img { width: 100%; } .disclaimer-360 { width: 100%; padding: 12px 0 8px; text-align: center; background: #fff; font-size: 12px; font-family: 'HelveticaNeueLT-Roman', sans-serif; color: #b7b7b7; } .gallery-thumbnail-two { margin-bottom: 17px; max-width: 155px; float: right; position: relative; } @media screen and (max-width: 767px) { .gallery-thumbnail-two { float: none; max-width: none; width: 100%; margin-bottom: 20px; } } .gallery-thumbnail-two:after { content: ""; display: table; clear: both; } .gallery-thumbnail-two img { width: 100%; } .gallery-thumbnail-three { display: inline-block; max-width: 242px; position: relative; } @media screen and (max-width: 767px) { .gallery-thumbnail-three { float: none; max-width: none; width: 100%; margin-bottom: 20px; } } .gallery-thumbnail-three img { width: 100%; } .gallery-thumbnail-four { display: inline-block; width: 70.0589970501%; vertical-align: top; margin-left: -4px; position: relative; } @media screen and (max-width: 767px) { .gallery-thumbnail-four { margin-left: none; width: 100%; display: block; margin-left: 0; } } .gallery-thumbnail-four img { width: 100%; } .gallery-thumbnail-five { display: inline-block; width: 22.8613569322%; vertical-align: top; margin-right: 20px; position: relative; } @media screen and (max-width: 767px) { .gallery-thumbnail-five { margin-right: 0; width: 100%; display: block; margin-bottom: 20px; } } .gallery-thumbnail-five img { width: 100%; } .gallery-thumbnail-six { display: inline-block; width: 72.7272727273%; vertical-align: top; position: relative; } @media screen and (max-width: 767px) { .gallery-thumbnail-six { width: 100%; display: block; } } .gallery-thumbnail-six img { width: 100%; } .gallery-thumbnail-seven { display: inline-block; width: 100%; vertical-align: top; position: relative; } @media screen and (max-width: 767px) { .gallery-thumbnail-seven { width: 100%; display: block; } } .gallery-thumbnail-seven img { width: 100%; } .gallery-thumbnail-eight { display: inline-block; width: 35.3982300885%; vertical-align: bottom; margin-right: 20px; position: relative; } @media screen and (max-width: 767px) { .gallery-thumbnail-eight { width: 100%; display: block; margin-right: 0; margin-bottom: 20px; } } .gallery-thumbnail-eight img { width: 100%; } .gallery-thumbnail-nine { display: inline-block; width: 47.9351032448%; vertical-align: bottom; margin-left: -4px; position: relative; } @media screen and (max-width: 767px) { .gallery-thumbnail-nine { width: 100%; display: block; margin-left: 0; } } .gallery-thumbnail-nine img { width: 100%; } .gallery-thumbnail-ten { display: inline-block; width: 45.4545454545%; vertical-align: top; position: relative; } @media screen and (max-width: 767px) { .gallery-thumbnail-ten { width: 100%; display: block; margin-right: 0; } } .gallery-thumbnail-ten img { width: 100%; } .gallery-thumbnail-eleven { display: inline-block; width: 100%; vertical-align: bottom; margin-left: -4px; position: relative; } @media screen and (max-width: 767px) { .gallery-thumbnail-eleven { width: 100%; display: block; margin-left: 0; } } .gallery-thumbnail-eleven img { width: 100%; } .gallery-thumbnail-twelve { display: inline-block; width: 72.7272727273%; vertical-align: top; position: relative; } @media screen and (max-width: 767px) { .gallery-thumbnail-twelve { width: 100%; display: block; } } .gallery-thumbnail-twelve img { width: 100%; } .gallery-thumbnail-thirteen { display: inline-block; width: 74.2424242424%; vertical-align: top; position: relative; } @media screen and (max-width: 767px) { .gallery-thumbnail-thirteen { width: 100%; display: block; } } .gallery-thumbnail-thirteen img { width: 100%; } .gallery-thumbnail-fourteen { display: inline-block; width: 46.9696969697%; vertical-align: top; position: relative; } @media screen and (max-width: 767px) { .gallery-thumbnail-fourteen { width: 100%; display: block; } } .gallery-thumbnail-fourteen img { width: 100%; } .gallery-row-two { margin-top: 20px; padding-bottom: 20px; } .gallery-row-two:after { content: ""; display: table; clear: both; } @media screen and (max-width: 767px) { .gallery-row-two { margin-top: 0; } } .gallery-row-two-large { width: 66.2109375%; display: inline-block; padding-right: 10px; float: left; } @media screen and (max-width: 767px) { .gallery-row-two-large { width: 100%; display: block; margin-right: 0; padding-right: 0; } } .gallery-row-two-small { width: 32.2265625%; display: inline-block; margin-left: -4px; vertical-align: top; float: right; } @media screen and (max-width: 767px) { .gallery-row-two-small { width: 100%; display: block; margin-left: 0; } } .gallery-row-two-small .gallery-sub-row { text-align: left; } .gallery-row-two-small .gallery-sub-row.alt { text-align: right; } .gallery-sub-row { display: block; text-align: right; margin-bottom: 17px; } .reel-container { position: relative; } .reel-container:hover .reel-icon { display: none; } .reel-container .reel-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; } .reel-container img.three-sixty { width: 640px; height: 360px; } @media screen and (max-width: 1173px) { .reel-container img.three-sixty { width: 310px; height: 174px; } } @media screen and (max-width: 767px) { .reel-container img.three-sixty { width: 360px; height: 203px; } } .reel { width: 620px; height: 385px; } @media screen and (max-width: 1173px) { .reel { width: 310px; height: 300px; } } @media screen and (max-width: 767px) { .reel { width: 360px; height: 250px; } } .gallery-screen { width: 100%; height: 100%; position: fixed; background: #e4e4e4; z-index: 99999; top: 0; display: none; } .gallery-screen .screen-header { background-color: white; width: 100%; position: absolute; top: 0; z-index: 99; opacity: 0.4; transition: opacity 0.4s; } .gallery-screen .screen-header:after { content: ""; display: table; clear: both; } .gallery-screen .screen-header:hover { opacity: 1; } .gallery-screen img { width: 100%; max-height: 1080px; } @media screen and (min-width: 1919px) { .gallery-screen img { max-height: none; } } .gallery-screen.center-images { padding-top: 80px; } .gallery-screen.center-images .screen-caption { background: white; } .gallery-screen.center-images .screen-header { opacity: 1; } .gallery-screen.center-images img { width: auto; max-width: 100%; } .gallery-rotator-wrapper { position: relative; top: 50%; transform: translateY(-50%); } .gallery-rotator { text-align: center; position: relative; } .gallery-rotator .rotator-cell { width: 100%; margin-right: 0; } .gallery-rotator .rotator-cell img { width: 100%; } .gallery-rotator .flickity-prev-next-button { display: block; width: 15%; height: 80%; background: red; border-radius: 0; opacity: 0; background: white; } .gallery-rotator .flickity-prev-next-button svg { display: none; } .gallery-rotator .flickity-prev-next-button.previous { left: 0; cursor: url("/client/img/cursor_left.cur"), auto; } .gallery-rotator .flickity-prev-next-button.next { right: 0; cursor: url("/client/img/cursor_right.cur"), auto; } @media screen and (max-width: 767px) { .gallery-rotator .flickity-prev-next-button { display: none; } } .screen-header-list { float: left; } .screen-header-list li { display: inline-block; border-right: 1px solid #e3e3e3; padding: 0px 30px 0px 30px; margin-left: -4px; height: 80px; line-height: 80px; vertical-align: middle; } .screen-header-list li:first-child { border-left: 1px solid #e3e3e3; } .screen-header-list li .icon-download { font-size: 22px; padding-right: 12px; } .screen-header-list a { color: #1b1b1b; font-size: 14px; font-family: 'HelveticaNeueLT-Bold'; } .screen-header-list a.active { color: #e72530; } .screen-close { float: right; padding: 0px 30px 0px 30px; border-right: 1px solid #e3e3e3; border-left: 1px solid #e3e3e3; color: black; font-size: 20px; height: 80px; line-height: 80px; vertical-align: middle; } .screen-caption { color: black; font-size: 14px; font-family: 'HelveticaNeueLT-Roman'; position: absolute; bottom: 0px; padding-bottom: 25px; padding-top: 25px; padding-left: 100px; padding-right: 100px; background: rgba(255, 255, 255, 0.5); display: block; width: 100%; } .gallery-video-play { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 10px solid white; position: absolute; top: 10px; right: 10px; } @media screen and (max-width: 767px) { .reel-container { margin-bottom: 0; } } .trim-card { background-color: white; width: 100%; margin: 100px auto; padding: 0 40px; } @media screen and (max-width: 1173px) { .trim-card { padding: 0 30px; } } @media screen and (max-width: 767px) { .trim-card { margin-top: 15px; padding: 0 20px; } } .trim-container .info-tooltip.alt-bottom:after, .trim-card .info-tooltip.alt-bottom:after { top: -13px !important; } .price-weekly-container { display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; width: 100%; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: end; align-items: flex-end; margin: 15px 0px 0px -2px; border-top: 1px solid #b7b7b7; font-family: 'HelveticaNeueLT-Roman'; padding-bottom: 10px; } .price-weekly-container .price-item { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-align: center; align-items: center; } @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .price-weekly-container .price-item { -ms-flex-align: start !important; align-items: flex-start !important; } } .price-weekly-container .price-item .item-caption-price, .price-weekly-container .price-item .item-caption-weekly, .price-weekly-container .price-item .item-caption-term, .price-weekly-container .price-item .item-caption-apr { font-size: 12px; line-height: 12px; font-weight: initial; padding: 5px; min-width: 110px; } @media screen and (min-width: 1160px) { .price-weekly-container .price-item .item-caption-price, .price-weekly-container .price-item .item-caption-weekly, .price-weekly-container .price-item .item-caption-term, .price-weekly-container .price-item .item-caption-apr { position: absolute; left: 0; } } .price-weekly-container .price-item .price-term-value, .price-weekly-container .price-item .price-term-apr, .price-weekly-container .price-item .price-info-apr { padding: 5px; font-weight: bold; font-size: 14px; } .price-weekly-container .price-item .caption-tooltip { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .price-weekly-container .price-item .info-tooltip.alt-bottom:after { top: -13px !important; } .trim-rotator .container { width: 100%; } .trim-specs { text-align: center; position: relative; z-index: 100; } .trim-specs:after { content: ""; display: table; clear: both; } .trim-specs .transmission-selector { float: right; } .trim-switch-view { padding-top: 40px; width: 154px; display: inline-block; vertical-align: top; text-align: left; left: 0; overflow: visible; float: left; z-index: 100; } @media screen and (max-width: 767px) { .trim-switch-view { padding-top: 0px; width: 125px; } } .trim-switch-view .card-primary-title-container { float: none; } @media screen and (max-width: 767px) { .trim-switch-view .card-primary-title-container { padding-left: 0; } } .trim-switch-view .card-disclaimer-container { float: none; width: 190px; z-index: 100; position: relative; } @media screen and (max-width: 767px) { .trim-switch-view .card-disclaimer-container { width: 140px; } } @media screen and (max-width: 767px) { .trim-switch-view .switch-view { margin-top: 0px; padding-left: 0; float: none; } } .trim-hero { display: inline-block; vertical-align: top; width: 100%; min-height: 0; z-index: -1; max-height: 365px; } @media screen and (min-width: 768px) { .trim-hero { position: absolute; left: -12px; top: 0; min-height: 295px; padding-left: 150px; padding-right: 150px; } } @media screen and (min-width: 1174px) { .trim-hero { padding-left: 200px; padding-right: 200px; } } .trim-hero img { width: 100%; } .trim-price-transmission { position: absolute; right: -5px; top: 0; padding-top: 40px; text-align: right; z-index: 9; } @media screen and (max-width: 1173px) { .trim-price-transmission { margin-bottom: 40px; } } @media screen and (max-width: 767px) { .trim-price-transmission { padding-top: 20px; margin-bottom: 10px; position: static; display: inline-block; float: right; } } .trim-price-transmission .card-primary-price-container { float: none; } @media screen and (max-width: 767px) { .trim-price-transmission .card-primary-price-container { padding-right: 0; padding-top: 0; text-align: right; } } @media screen and (min-width: 1160px) { .trim-price-transmission .card-primary-price-container { width: 200px !important; } } .trim-price-transmission .card-coming-soon-container { float: none; } @media screen and (max-width: 767px) { .trim-price-transmission .card-coming-soon-container { padding-right: 0; padding-top: 0; text-align: right; } } @media screen and (max-width: 1173px) { .trim-price-transmission .rotator-card-alt-heading { font-size: 12px; } } @media screen and (max-width: 767px) { .trim-price-transmission .transmission-selector { margin-right: 0; } } .trim-price-transmission .selling-price-container { display: none; } .trim-price-transmission.selling-price-province .selling-price-container { display: block; } .trim-price-transmission.selling-price-province .card-primary-price-container:nth-child(1) .msrp-tooltip-trigger { display: none; } .price-weekly-container { display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; width: 103%; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: end; align-items: flex-end; margin: 20px 0px 0px; border-top: 1px solid #b7b7b7; font-family: 'HelveticaNeueLT-Roman'; padding-bottom: 10px; } .price-weekly-container .price-item { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-align: center; align-items: center; } .price-weekly-container .price-item .item-caption-price, .price-weekly-container .price-item .item-caption-weekly, .price-weekly-container .price-item .item-caption-term, .price-weekly-container .price-item .item-caption-apr { font-size: 12px; line-height: 12px; font-weight: initial; padding: 5px; min-width: 110px !important; } @media screen and (min-width: 1160px) { .price-weekly-container .price-item .item-caption-price, .price-weekly-container .price-item .item-caption-weekly, .price-weekly-container .price-item .item-caption-term, .price-weekly-container .price-item .item-caption-apr { position: absolute; left: 0; min-width: 110px !important; } } @media screen and (max-width: 767px) { .price-weekly-container .price-item .item-caption-price .info-tooltip, .price-weekly-container .price-item .item-caption-weekly .info-tooltip, .price-weekly-container .price-item .item-caption-term .info-tooltip, .price-weekly-container .price-item .item-caption-apr .info-tooltip { bottom: auto; right: -50px; } } .price-weekly-container .price-item .price-term-value, .price-weekly-container .price-item .price-term-apr { padding: 5px; font-weight: bold; font-size: 14px; } .price-weekly-container .price-item .caption-tooltip { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .interior-exterior { padding: 0px 0 5px 0; margin-top: 50px; z-index: 100; } .interior-exterior:after { content: ""; display: table; clear: both; } @media screen and (min-width: 768px) { .interior-exterior { margin-top: 240px; } } .interior-exterior-col-large { float: left; width: 62.5%; padding-bottom: 13px; } @media screen and (max-width: 767px) { .interior-exterior-col-large { width: 100%; } } .interior-exterior-col-small { float: right; width: 37.0762711864%; text-align: right; } @media screen and (max-width: 767px) { .interior-exterior-col-small { width: 100%; text-align: left; } } .interior-exterior-title { font-size: 20px; margin-bottom: 20px; display: block; font-family: 'HelveticaNeueLT-Bold'; } @media screen and (max-width: 767px) { .interior-exterior-title { font-size: 15px; } } .color-swatch { width: 80px; background-color: #f1f1f1; display: inline-block; margin-right: 6px; cursor: pointer; vertical-align: bottom; margin-bottom: 10px; } @media screen and (max-width: 767px) { .color-swatch { width: 30%; background-color: white; margin-right: 4px; vertical-align: top; } } .color-swatch img { width: 80px; display: block; } @media screen and (max-width: 767px) { .color-swatch img { width: 100%; } } .color-swatch-detail { font-size: 10px; font-family: 'HelveticaNeueLT-Bold'; line-height: 12px; padding: 6px 20px 0px 6px; display: block; text-align: left; min-height: 80px; } @media screen and (max-width: 767px) { .color-swatch-detail { padding-left: 0; padding-right: 0; padding-top: 12px; min-height: 0; padding-bottom: 22px; } } .highlights { padding: 42px 0 42px 0; border-top: 1px solid #8f8f8f; border-bottom: 1px solid #8f8f8f; font-size: 0; } @media screen and (max-width: 767px) { .highlights { border-top: none; border-bottom: none; padding-bottom: 20px; padding-top: 30px; } } .highlights .highlight-container { width: 45%; display: inline-block; vertical-align: middle; padding-right: 2%; } @media screen and (max-width: 767px) { .highlights .highlight-container { width: 100%; float: none; } } .highlights .specs-group { width: 55%; display: inline-block; vertical-align: middle; text-align: left; } @media screen and (max-width: 767px) { .highlights .specs-group { width: 100%; float: none; border-top: 1px solid #8f8f8f; margin-top: 35px; margin-left: 0; } } .trim-card .highlights .highlight-container { display: inline-block; } .trim-card .highlights .highlight-container .show-virtual-showroom-popup { margin-bottom: 0; } .trim-card .highlights .spec-name { max-height: 55px; display: inline-block; } @media screen and (max-width: 767px) { .trim-card .highlights .spec-name { min-height: 0; max-height: 100%; } } .trim-card .highlights .icons { display: block; margin: 0px 0 18px 0; max-width: 42px; } .trim-card .highlights .specs-col { padding: 0 2% 0 2%; } @media screen and (max-width: 767px) { .trim-card .highlights .specs-col { padding-left: 24.5322245322%; padding-bottom: 12px; } } .btn-container.trim-buttons { padding-top: 0; padding: 30px 0 30px 0; border-top: none; margin-top: 0; border-bottom: 1px solid #8f8f8f; margin-bottom: 55px; } @media screen and (max-width: 767px) { .btn-container.trim-buttons { margin-left: 0; margin-right: 0; margin-bottom: 0; } } .btn-container.trim-buttons .btn-1-container { width: 100%; max-width: 242px; margin-left: 0; } @media screen and (max-width: 767px) { .btn-container.trim-buttons .btn-1-container { display: block; margin: 0 auto 15px auto; display: block; max-width: none; } } .btn-container.trim-buttons .btn-2-container { width: 100%; max-width: 242px; margin-right: 4.0404040404%; } @media screen and (max-width: 1173px) { .btn-container.trim-buttons .btn-2-container { width: 28%; } } @media screen and (max-width: 767px) { .btn-container.trim-buttons .btn-2-container { width: 100%; display: block; margin: 0 auto 15px auto; display: block; max-width: none; } } @media screen and (max-width: 767px) { .btn-container.trim-buttons { border-bottom: none; text-align: center; } } @media screen and (max-width: 767px) { .switch-view { margin-top: 15px; display: inline-block; padding-left: 20px; float: left; } } @media screen and (max-width: 767px) { .switch-view-title-container { float: left; width: 35%; margin-top: 25px; margin-left: 25px; } } .switch-view-title-container:after { content: ""; display: table; clear: both; } .switch-view-icon { display: inline-block; vertical-align: middle; color: #e72530; border-radius: 50%; border: 1px solid #979797; width: 28px; height: 28px; font-size: 12px; line-height: 26px; text-align: center; transform: rotate(360deg) scalex(-1); } .switch-view-icon.switch-reverse { transform: rotate(360deg) scalex(1); } .switch-view-container { margin-top: 10px; } .switch-view-title { display: inline-block; max-width: 75px; vertical-align: middle; padding-left: 10px; color: black; font-size: 15px; font-family: 'HelveticaNeueLT-Bold'; text-indent: -1px; } @media screen and (max-width: 767px) { .switch-view-title { display: block; padding-left: 0; margin-top: 5px; } } @media screen and (max-width: 767px) { .switch-view-title.alt { padding-left: 10px; margin-top: 0; display: inline-block; } } @media screen and (max-width: 767px) { .switch-view-title.alt { padding-left: 10px; margin-top: 0; display: inline-block; } } .card-disclaimer-container { clear: left; float: left; width: 200px; } @media screen and (max-width: 767px) { .card-disclaimer-container { padding-left: 0px; width: 140px; } } .card-disclaimer-container-overview { clear: left; float: left; width: 200px; } @media screen and (max-width: 767px) { .card-disclaimer-container-overview { padding-left: 20px; width: 115px; } } .card-disclaimer { font-size: 10px; color: #1b1b1b; font-family: 'HelveticaNeueLT-Roman'; line-height: 14px; font-weight: 400; } .card-disclaimer.red { color: red; } .card-disclaimer.light-blue { color: #0d9be4; cursor: pointer; } .honda-disclaimer-overlay { overflow: hidden; top: 0; display: none; height: 100%; z-index: 1201; position: fixed; padding: 80px 0px 50px 0px; width: 100%; background-color: #ededed; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; font-family: 'HelveticaNeueLT-Roman'; line-height: 25px; } .honda-disclaimer-overlay .close-button { font-size: 30px; font-family: 'honda-icons'; position: absolute; right: 40px; top: 50px; color: #ababab; cursor: pointer; } .honda-disclaimer-overlay .close-button:before { content: "\e602"; } .honda-disclaimer-overlay p { margin: 0 auto; padding: 2% 15% 2% 15%; width: 80%; text-align: center; } @media screen and (max-width: 767px) { .honda-disclaimer-overlay p { padding: 5%; width: 100%; } } @media screen and (max-width: 1173px) { .honda-disclaimer-overlay p { width: 100%; } } .honda-disclaimer-overlay h3 { margin: 0 auto; text-align: center; font-weight: bold; padding: 10% 10% 0 10%; } .honda-disclaimer-overlay .btn-container { width: 35%; text-align: center; margin: 0 auto; border: none; } .honda-disclaimer-overlay .btn-container .btn-2 { max-width: 300px; padding: 7px; background-color: #0d9be4; color: white; font-family: 'HelveticaNeueLT-Roman',-apple-system,BlinkMacSystemFont, 'Segoe UI','Roboto','Oxygen', 'Ubuntu','Cantarell','Fira Sans', 'Droid Sans','Helvetica Neue','Arial', sans-serif; } .honda-disclaimer-overlay .btn-container .btn-2:hover { color: #0d9be4; background-color: transparent; } @media screen and (max-width: 1173px) { .honda-disclaimer-overlay .btn-container { width: 80%; } } @media screen and (max-width: 767px) { .honda-disclaimer-overlay .btn-container { width: 80%; } } .honda-disclaimer-overlay .btn-container .btn-2-container { width: 45%; margin: 0 auto; line-height: 25px; } @media screen and (max-width: 767px) { .honda-disclaimer-overlay .btn-container .btn-2-container { width: 100%; max-width: 100%; } } .show-virtual-showroom-popup { display: none; border: none; font-family: "Helvetica Neue", Helvetica, "HelveticaNeueLT-Roman", Arial, sans-serif; font-style: normal; font-weight: bold; font-size: 15px; line-height: 18px; text-align: center; padding: 0; color: #ff2841; cursor: pointer; background: transparent; } .show-virtual-showroom-popup:hover { text-decoration: none; } .show-virtual-showroom-popup:hover span { text-decoration: underline; } @media screen and (max-width: 767px) { .show-virtual-showroom-popup { font-size: 12px; line-height: 15px; } } .show-virtual-showroom-popup:before { content: '\25B7'; font-size: 17px; margin-right: 8px; margin-left: -2px; } @media screen and (max-width: 767px) { .show-virtual-showroom-popup:before { font-size: 13px; } } .virtual-showroom-popup { overflow: hidden; top: 0; display: none; height: 100%; z-index: 1201; position: fixed; padding: 80px 0px 50px 0px; width: 100%; background-color: #ededed; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; font-family: 'HelveticaNeueLT-Roman'; line-height: 25px; } .virtual-showroom-popup .close-button { font-size: 30px; font-family: 'honda-icons'; position: absolute; right: 40px; top: 50px; color: #ababab; cursor: pointer; } .virtual-showroom-popup .close-button:before { content: "\e602"; } .virtual-showroom-popup section { padding: 0; width: 66.667%; box-sizing: border-box; } @media screen and (max-width: 767px) { .virtual-showroom-popup section { width: 100%; padding: 120px 20px 20px; height: auto; } } .virtual-showroom-popup div.virtual-showroom-popup-container { padding: 56.25% 0px 0px; position: relative; height: 100%; } .virtual-showroom-popup iframe { top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; } .transmission-selector { border: 1px solid #b7b7b7; margin-top: 25px; border-radius: 3px; width: 92px; } @media screen and (max-width: 767px) { .transmission-selector { float: right; width: 92px; margin-top: 15px; margin-right: 20px; } } .transmission-selector-alt { border: 1px solid #b7b7b7; margin-top: 25px; border-radius: 3px; width: auto; display: inline-block; font-size: 0; } @media screen and (max-width: 767px) { .transmission-selector-alt { clear: both; margin-top: 25px; display: inline-block; white-space: nowrap; } } .transmission-selector-alt .transmission-selector-item { display: inline-block; border-top: none; border-left: 1px solid #b7b7b7; padding-top: 30px; padding-right: 30px; width: 75px; position: relative; z-index: 9; } @media screen and (max-width: 767px) { .transmission-selector-alt .transmission-selector-item { width: 65px; padding-left: 8px; } } .transmission-selector-alt .transmission-selector-item.active .option-indicator { background-color: #8cce37; } .transmission-selector-alt .transmission-selector-item:first-child { border-left: none; } .transmission-selector-alt .transmission-selector-item .option-indicator { background-color: white; left: 35px; top: -20px; } @media screen and (max-width: 767px) { .transmission-selector-alt .transmission-selector-item .option-indicator { left: 30px; top: -15px; } } .transmission-selector-item { font-family: 'HelveticaNeueLT-Roman'; padding-left: 13px; padding-right: 13px; padding-top: 8px; padding-bottom: 8px; border-top: 1px solid #b7b7b7; display: block; text-align: left; } .transmission-selector-item:first-child { border-top: none; } .transmission-selector-acronym { font-size: 16px; font-weight: bold; color: #1b1b1b; display: block; text-transform: uppercase; position: relative; line-height: 18px; } @media screen and (max-width: 767px) { .transmission-selector-acronym { font-size: 13px; line-height: 14px; } } .transmission-selector-type { font-size: 10px; font-weight: bold; color: #1b1b1b; white-space: nowrap; } .option-indicator { position: absolute; background-color: #8cce37; border-radius: 50%; width: 20px; height: 20px; left: 47px; font-size: 8px; color: white; text-align: center; line-height: 20px; } @media screen and (max-width: 767px) { .option-indicator { width: 15px; height: 15px; font-size: 6px; left: 50px; line-height: 15px; } } .transmission-selector-item .option-indicator { background-color: #fff; } .transmission-selector-item.active .option-indicator { background-color: #8cce37; } .btn-container.alt { padding-top: 0; border-bottom: 0; border-top: 1px solid #8f8f8f; margin-top: 15px; padding-top: 30px; } @media screen and (max-width: 767px) { .btn-container.alt { display: block; border-top: none; padding-top: 15px; } } .specs-details:after { content: ""; display: table; clear: both; } @media screen and (max-width: 767px) { .specs-details { margin-top: 0; } } @media screen and (max-width: 767px) { .specs-details .card-primary-details-container { display: none; } } .specs-details-col-small { float: left; margin-top: 30px; border-top: 5px solid black; padding-top: 24px; width: 25.5319148936%; } @media screen and (max-width: 1173px) { .specs-details-col-small { float: none; border-top: none; margin-top: 0; padding-top: 20px; padding-bottom: 30px; } } @media screen and (max-width: 767px) { .specs-details-col-small { width: 100%; padding-top: 0; text-align: center; padding-bottom: 10px; } .specs-details-col-small.visible + .specs-details-col-large { display: block; } .specs-details-col-small.visible .col-small-title:after { content: ""; position: absolute; font-size: 14px; width: 10px; height: 4px; background-color: black; right: 15px; top: 50%; transform: translateY(-50%); } } .specs-details-col-small .col-small-title { font-size: 20px; font-family: 'HelveticaNeueLT-Bold'; line-height: 25px; } @media screen and (max-width: 767px) { .specs-details-col-small .col-small-title { font-size: 14px; background-color: #dedede; cursor: pointer; display: block; border-radius: 3px; margin: 0 auto; text-align: left; padding: 18px 30px 18px 15px; position: relative; width: 100%; } .specs-details-col-small .col-small-title:after { content: "\e614"; font-family: 'honda-icons'; position: absolute; font-size: 12px; right: 15px; top: 50%; transform: translateY(-50%); } } .specs-details-col-large { float: right; margin-top: 30px; border-top: 5px solid black; padding-top: 26px; width: 71.5957446809%; } @media screen and (max-width: 1173px) { .specs-details-col-large { float: none; border-top: none; margin-top: 0; padding-top: 0; width: 100%; } } @media screen and (max-width: 767px) { .specs-details-col-large { display: none; } } .specs-details-col-large .col-large-title { font-size: 15px; font-family: 'HelveticaNeueLT-Bold'; } @media screen and (max-width: 767px) { .specs-details-col-large .col-large-title { font-size: 12px; padding-left: 55px; margin-top: 10px; display: block; } } .specs-details-col-large .col-large-title .icon-arrow-up { display: none; padding-left: 11px; font-size: 11px; } .specs-details-col-large .features-toggle { cursor: pointer; border-bottom: 1px solid #dedede; padding-bottom: 15px; display: block; } .specs-details-col-large .features-toggle .icon-arrow-up { display: inline-block; } @media screen and (max-width: 767px) { .specs-details-col-large .features-toggle .icon-arrow-up { padding-left: 9px; font-size: 8px; } } .specs-details-col-large .features-toggle.features-closed .icon-arrow-up:before { content: "\e601"; } .specs-details-col-large .features-toggle.features-closed { margin-bottom: 55px; } @media screen and (max-width: 767px) { .specs-details-col-large .features-toggle { font-size: 12px; margin-top: 0; margin-bottom: 30px !important; padding-left: 0; } } .responsive-color-swatch { display: none; text-align: center; margin-top: 15px; padding-bottom: 12px; border-bottom: 1px solid #dedede; margin-bottom: 20px; font-size: 15px; font-family: 'HelveticaNeueLT-Bold'; } @media screen and (max-width: 767px) { .responsive-color-swatch { display: block; } } .trim-features-subheader { font-family: 'HelveticaNeueLT-Bold'; } @media screen and (max-width: 767px) { .trim-features-subheader { font-size: 12px; padding-left: 15px; } } .list-exclusive { font-weight: normal; margin-top: 22px; padding-bottom: 45px; line-height: 22px; } @media screen and (max-width: 767px) { .list-exclusive { margin-top: 15px; padding-bottom: 15px; } } .list-exclusive li { border-bottom: 1px solid #dedede; padding-bottom: 15px; margin-bottom: 15px; position: relative; font-family: 'HelveticaNeueLT-Roman'; font-size: 15px; } @media screen and (max-width: 767px) { .list-exclusive li { padding-left: 17px; } } .list-exclusive .option-indicator { left: 0; width: 25px; height: 25px; line-height: 25px; position: relative; display: inline-block; vertical-align: middle; } @media screen and (max-width: 767px) { .list-exclusive .option-indicator { vertical-align: top; } } .list-exclusive .option-indicator-alt { position: relative; background-color: #c4c4c4; border-radius: 50%; width: 25px; height: 25px; font-size: 8px; color: white; text-align: center; line-height: 25px; vertical-align: middle; display: inline-block; } @media screen and (max-width: 767px) { .list-exclusive .option-indicator-alt { vertical-align: top; } } .list-exclusive .list-exclusive-details { padding-left: 30px; display: inline-block; vertical-align: middle; width: 80%; } @media screen and (max-width: 767px) { .list-exclusive .list-exclusive-details { font-size: 12px; line-height: 18px; padding-left: 15px; } } .specs-details-wrapper:after { content: ""; display: table; clear: both; } @media screen and (max-width: 1173px) { .specs-details-wrapper { border-top: solid 5px black; margin-top: 20px; } } @media screen and (max-width: 767px) { .specs-details-wrapper { border-top: none; margin-top: 0px; } } .list-disclaimer { padding-left: 55px; } .disclaimer-text { display: block; line-height: 22px; font-size: 15px; } .hidden .disclaimer-text { overflow: hidden; height: 66px; } @media screen and (max-width: 767px) { .hidden .disclaimer-text { height: 53px; } } @media screen and (max-width: 767px) { .disclaimer-text { font-size: 12px; line-height: 18px; } } .disclaimer-expander { display: none; color: #4b9be3; } @media screen and (max-width: 767px) { .disclaimer-expander { font-size: 12px; line-height: 18px; } } @media screen and (max-width: 767px) { .exterior-swatches { margin-bottom: -13px; } } @media screen and (max-width: 767px) { .interior-swatches { margin-bottom: -30px; } } .trim-features-subheader .icon-arrow-up { display: none; padding-left: 11px; font-size: 11px; } .feature-video { position: relative; } @media screen and (max-width: 767px) { .feature-video-desktop { display: none; } } .btn-feature-play { cursor: pointer; position: absolute; opacity: 0.7; width: 100%; max-width: 120px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .btn-feature-play:hover { opacity: 1; } .iframe-wrapper-mobile { display: none; } @media screen and (max-width: 767px) { .iframe-wrapper-mobile { display: block; text-align: center; } .iframe-wrapper-mobile iframe { width: 100%; height: 100%; } } @media screen and (max-width: 1174px) { .french .transmission-selector-alt .transmission-selector-item { padding-left: 5px; } } @media screen and (max-width: 767px) { .french .transmission-selector-alt .transmission-selector-item { width: 75px; } } .stuck { position: fixed !important; top: 0; } .model-nav-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.8; z-index: 600; display: none; } @media screen and (max-width: 767px) { .model-nav-screen { display: none !important; } } .model-nav-fixed-placeholder { width: 100%; background: #fff; position: relative; z-index: 801; } .container.variant { margin: 0; } .model-nav-container, .model-page-container { max-width: 1174px; padding: 0 40px; } @media screen and (max-width: 1173px) { .model-nav-container, .model-page-container { padding: 0 30px; } } @media screen and (max-width: 767px) { .model-nav-container, .model-page-container { padding: 0 20px; } } .model-nav-wrapper { border-bottom: 1px solid #e2e2e2; border-top: 1px solid #e2e2e2; background: #fff; position: relative; z-index: 100; width: 100%; transform: translate3d(0, 0, 0); -ms-backface-visibility: hidden; backface-visibility: hidden; } .model-nav-wrapper.stuck { box-shadow: 0 4px 3px -2px rgba(0, 0, 0, 0.15); } .model-nav-wrapper .container:after { content: ""; display: table; clear: both; } .model-nav-wrapper.is-fixed { position: fixed; top: 0; left: 0; width: 100%; } @media screen and (max-width: 767px) { .model-nav-wrapper { border-bottom: 0; } } .model-nav { font-size: 0; display: table; width: 100%; text-align: center; box-sizing: content-box; } @media screen and (max-width: 767px) { .model-nav > .model-nav-item:last-child .model-nav-link { border-bottom: 1px solid #dedede; } } @media screen and (max-width: 767px) { .model-nav { display: none; padding: 20px 0 40px; position: absolute; left: 0; width: 100%; background: #fff; text-align: left; z-index: 100; box-shadow: 0 4px 3px -2px rgba(0, 0, 0, 0.15); } } .model-nav-item { display: inline-block; vertical-align: top; position: relative; display: table-cell; } @media screen and (max-width: 767px) { .model-nav > .model-nav-item { padding: 0 40px; } } .model-nav-item.is-open + .model-nav-item .model-nav-link { border-top-color: transparent; } .model-nav-item.is-open > .model-nav-link { border-top-color: transparent; } .model-nav-item:first-child .model-nav-link { margin-left: -2px; padding-left: 0; } @media screen and (max-width: 767px) { .model-nav-item:first-child { border-left: 0; } } @media screen and (max-width: 767px) { .model-nav-item { display: block; border-right: 0; } } .model-nav-link { font-size: 14px; line-height: normal; font-family: 'HelveticaNeueLT-Bold'; color: #000; height: 76px; padding: 0 12px; display: block; position: relative; } @media screen and (max-width: 767px) { .is-open > .model-nav-link { color: #ff2841; } } .alt-color .model-nav-link { color: #4b9be3; } .model-nav-link:after { content: ''; position: absolute; bottom: -1px; left: -1px; width: 100%; height: 5px; background: #ff2841; border-left: 1px solid #ff2841; border-right: 1px solid #ff2841; box-sizing: content-box; display: none; } .is-active .model-nav-link:after { display: block; } @media screen and (max-width: 767px) { .is-active .model-nav-link:after { display: none; } } @media screen and (max-width: 1173px) { .model-nav-link:after { height: 3px; } } .no-touchevents .model-nav-link:hover:after { display: block; } @media screen and (max-width: 767px) { .no-touchevents .model-nav-link:hover:after { display: none; } } @media screen and (max-width: 1173px) { .model-nav-link { padding: 0 10px; height: 43px; font-size: 12px; line-height: 13px; letter-spacing: 0.0180em; } .french .model-nav-link { font-size: 10px; } } @media screen and (max-width: 767px) { .model-nav-link { height: 40px; padding: 0; z-index: 5; position: relative; border-top: 1px solid #dedede; } } .contains-mobile-drop-down.is-open .model-nav-link:before { transform: rotate(180deg); transform-origin: 50% 30%; } .contains-mobile-drop-down > .model-nav-link:before { display: none; font-size: 8px; color: #000; position: absolute; top: 50%; transform: translateY(-50%); right: 0; } @media screen and (max-width: 767px) { .contains-mobile-drop-down > .model-nav-link:before { display: block; } } @media screen and (max-width: 767px) { .contains-mobile-drop-down.is-open { background: #f1f1f1; } } .model-nav-link-container { display: inline-block; position: relative; top: 50%; transform: translateY(-50%); -ms-transform: transformY(-50%); -webkit-transform: translateY(-50%); } .model-nav-toggle-wrapper { display: none; text-align: left; } .model-nav-toggle-wrapper:after { content: ""; display: table; clear: both; } @media screen and (max-width: 767px) { .model-nav-toggle-wrapper { display: block; } } .model-nav-title { float: left; font-size: 24px; color: #1b1b1b; font-family: "HelveticaNeueLT-Bold"; line-height: 40px; text-transform: capitalize; display: none; } @media screen and (max-width: 767px) { .model-nav-title { display: block; font-size: 18px; padding: 10px 0; line-height: 20px; width: 85vw; word-break: break-word; } } .model-nav-title .alt-color { color: #b7b7b7; } .model-nav-toggle { color: #000; float: right; display: inline-block; position: relative; top: 50%; transform: translateY(-50%); -ms-transform: transformY(-50%); -webkit-transform: translateY(-50%); position: absolute; padding: 10px; width: 50px; text-align: center; right: 0; font-size: 8px; } .model-nav-subnav { display: none; margin-bottom: -1px; } @media screen and (max-width: 767px) { .is-open .model-nav-subnav { display: block; } } .more-wrapper { position: absolute; top: 66px; left: 0; width: 100%; background: #fff; font-size: 20px; text-align: left; display: none; z-index: 110; box-shadow: 0 4px 3px -2px rgba(0, 0, 0, 0.15); } .more-wrapper .selectboxit-container .selectboxit { margin-top: 24px; } @media screen and (max-width: 767px) { .more-wrapper .selectboxit-container .selectboxit { margin-top: 0; } } .more-wrapper .selectboxit, .more-wrapper .selectboxit-container, .more-wrapper .dropdown-wrapper { width: 100%; } .more-wrapper .container { padding-top: 30px; padding-bottom: 42px; position: relative; max-width: 920px; } .more-wrapper .container .btn-close { font-size: 16px; color: #1b1b1b; position: absolute; top: 35px; right: -10px; } @media screen and (max-width: 1173px) { .more-wrapper .container { width: 720px; } } .more-wrapper .download-list-link { min-height: 168px; } .more-wrapper .download-list-title { padding: 20px 24px; } @media screen and (max-width: 1173px) { .more-wrapper { top: 44px; } } @media screen and (max-width: 767px) { .more-wrapper { display: none !important; } } .more-nav-container:after { content: ""; display: table; clear: both; } .more-nav-container .list-nav-link { padding: 18px 0; } @media screen and (max-width: 1173px) { .more-nav-container .list-nav-link { padding: 15px 0; } } @media screen and (max-width: 1173px) { .more-nav-container .list-nav-icon { font-size: 19px; } } @media screen and (max-width: 1173px) { .more-nav-container .list-nav-text, .more-nav-container .btn-dropdown { font-size: 12px; } } .more-nav-container .link-circle-arrow { width: 30px; height: 30px; line-height: 28px; font-size: 7px; } @media screen and (max-width: 1173px) { .more-nav-container .btn-dropdown, .more-nav-container .btn-dropdown-icon:before { line-height: 32px; } } @media screen and (max-width: 1173px) { .more-nav-container .btn-dropdown-container { padding: 0 10px; } } @media screen and (max-width: 1173px) { .more-nav-container .btn-dropdown-icon { padding: 0 10px; } } .more-nav-col { width: 47.8813559322%; float: right; } .more-nav-col:first-child { float: left; } .download-wrapper { border-top: 1px solid #c6c6c6; padding-top: 28px; margin-top: 30px; } .dropdown-downloads { display: table; table-layout: fixed; width: 100%; } .dropdown-downloads-item { display: table-cell; padding: 0 8px; } .dropdown-downloads-item:first-child { padding-left: 0; } .dropdown-downloads-item:last-child { padding-right: 0; } .page-footer { padding-bottom: 80px; } .page-footer .container { max-width: 910px; } @media screen and (max-width: 767px) { .page-footer { padding-bottom: 0; } } .page-footer-inner-container { border-top: 1px solid #bbb; margin-top: 60px; padding-top: 30px; font-size: 0; } .page-footer-inner-container:after { content: ""; display: table; clear: both; } @media screen and (max-width: 767px) { .page-footer-inner-container { margin-top: 30px; } } .page-footer-section-right, .page-footer-section-left { display: inline-block; vertical-align: top; font-size: 18px; } @media screen and (max-width: 767px) { .page-footer-section-right, .page-footer-section-left { display: block; } } .page-footer-section-right { width: 46.5060240964%; float: right; } .page-footer-section-right.full-length { width: 100%; float: none; } .page-footer-section-right.full-length .contains-dropdown { height: auto; } .page-footer-section-right.full-length .selectboxit, .page-footer-section-right.full-length .selectboxit-container, .page-footer-section-right.full-length .dropdown-wrapper { width: 75%; float: right; margin-top: -15px; } @media screen and (max-width: 767px) { .page-footer-section-right.full-length .selectboxit, .page-footer-section-right.full-length .selectboxit-container, .page-footer-section-right.full-length .dropdown-wrapper { float: none; margin-top: 10px; width: 100%; } } .page-footer-section-right .selectboxit-container .selectboxit { margin-top: 24px; } @media screen and (max-width: 767px) { .page-footer-section-right .selectboxit-container .selectboxit { margin-top: 0; } } .page-footer-section-right .selectboxit, .page-footer-section-right .selectboxit-container, .page-footer-section-right .dropdown-wrapper { width: 100%; } @media screen and (max-width: 767px) { .page-footer-section-right { margin-left: 0; width: 100%; padding: 24px 0 16px; } .page-footer-section-right .contains-dropdown { height: 130px; } .page-footer-section-right .dropdown-wrapper, .page-footer-section-right .dropdown-mobile-wrapper { display: block; position: relative; top: 0; transform: translateY(0); margin-top: 24px; margin-bottom: 10px; } .page-footer-section-right .btn-dropdown { width: 100%; } .page-footer-section-right .btn-dropdown .btn-dropdown-icon { float: right; } } .page-footer-section-left { width: 48.4337349398%; float: left; } .page-footer-section-left .download-list-item { width: 46.7661691542%; margin-left: 6.4676616915%; } @media screen and (max-width: 767px) { .page-footer-section-left { width: 100%; } .page-footer-section-left .download-list-icon, .page-footer-section-left .download-list-text { display: inline-block; vertical-align: middle; } .page-footer-section-left .download-list-icon { margin: 0; } .page-footer-section-left .download-list-text { width: 60.9756097561%; line-height: 14px; margin-left: 20px; } .page-footer-section-left .download-list-item { width: 100%; margin: 0 0 10px 0; } .page-footer-section-left .download-list-link { min-height: 0; display: table; } .page-footer-section-left .download-list-img, .page-footer-section-left .download-list-title { display: table-cell; vertical-align: middle; } .page-footer-section-left .download-list-img { width: 41.0714285714%; } .page-footer-section-left .download-list-title { width: 58.9285714286%; padding: 0 20px; } } .page-footer-tout { width: 100%; background: #1b1b1b; display: block; } .no-touchevents .page-footer-tout:hover { background: #e72530; } @media screen and (max-width: 767px) { .page-footer-tout { margin-bottom: 10px; } } .page-footer-tout-img img { width: 100%; display: block; } .page-footer-tout-details { font-size: 15px; color: #fff; font-family: 'HelveticaNeueLT-Roman'; padding: 30px; min-height: 142px; } @media screen and (max-width: 767px) { .page-footer-tout-details { min-height: 0; } } .page-footer-tout-header { font-weight: bold; margin-bottom: 14px; } .page-footer-tout-header:after { content: ""; display: table; clear: both; } .page-footer-tout-name { float: left; line-height: normal; } .page-footer-tout-price { float: right; } .page-footer-tout-description { line-height: 20px; } .model-hero-tile .desktop-hero { width: 100%; vertical-align: middle; } @media screen and (max-width: 767px) { .model-hero-tile .desktop-hero { display: none; } } .model-hero-tile .mobile-hero { width: 100%; vertical-align: middle; display: none; } @media screen and (max-width: 767px) { .model-hero-tile .mobile-hero { display: block; } } .model-overview-container { padding: 25px 0; background-color: white; } .model-overview-container .model-page-container { max-width: none; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 767px) { .model-overview-container .model-page-container { -ms-flex-direction: column; flex-direction: column; } } .model-overview-container .model-page-container .page-model-ny-container { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 60%; } .model-overview-container .model-page-container .page-model-ny-container .page-model-name { font-size: 42px; font-family: "HelveticaNeueLT-Bold"; width: 55%; float: left; clear: both; margin-top: 12px; } @media screen and (max-width: 1173px) { .model-overview-container .model-page-container .page-model-ny-container .page-model-name { font-size: 37px; width: 52%; } } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .page-model-ny-container .page-model-name { display: block; width: 100%; float: none; font-size: 36px; margin-left: -2px; } } .model-overview-container .model-page-container .page-model-ny-container .model-year-container { float: left; margin-top: 15px; clear: both; } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .page-model-ny-container .model-year-container { float: none; margin-top: 0; } } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .page-model-ny-container .model-year-container.desktop { display: none; } } .model-overview-container .model-page-container .page-model-ny-container .model-year-container.mobile { display: none; } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .page-model-ny-container .model-year-container.mobile { display: block; } } .model-overview-container .model-page-container .page-model-ny-container .model-year-container a { font-size: 28px; font-family: 'HelveticaNeueLT-Bold'; display: inline-block; text-decoration: none; color: #a4a4a4; border-left: 2px solid black; padding-left: 15px; margin-left: 15px; } .model-overview-container .model-page-container .page-model-ny-container .model-year-container a.active { color: #1b1b1b; } .model-overview-container .model-page-container .page-model-ny-container .model-year-container a:first-child { padding: 0; margin: 0; border-left: none; } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .page-model-ny-container .model-year-container a { font-size: 22px; padding-left: 7px; margin-left: 5px; } } .model-overview-container .model-page-container .page-model-price-container { min-width: 380px; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; padding-right: 70px; /*This will need to be adjusted to maintain alignment in the event that other icons are added to the header nav.*/ max-width: 440px; } .model-overview-container .model-page-container .page-model-price-container:after { content: ""; display: table; clear: both; } @media screen and (max-width: 1173px) { .model-overview-container .model-page-container .page-model-price-container { width: 33%; padding-right: 0px; max-width: none; min-width: 330px; } } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .page-model-price-container { float: none; width: 100%; -ms-flex-pack: end; justify-content: flex-end; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } .model-overview-container .model-page-container .page-model-price-container .badge-container-detail { font-family: 'HelveticaNeueLT-Roman'; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; padding-top: 9px; } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .page-model-price-container .badge-container-detail { padding-top: 30px; padding-left: 10px; } } .model-overview-container .model-page-container .page-model-price-container .badge-container-detail .badge-svg { width: 90px; height: 90px; padding: 0; margin-top: -8px; } .model-overview-container .model-page-container .page-model-price-container .badge-container-detail .badge-text { color: #006600; font-size: 11px; } .model-overview-container .model-page-container .page-model-price-container .badge-container-detail .badge-tooltip { font-size: 0; backface-visibility: hidden; padding-top: 10px; left: 30px; } .model-overview-container .model-page-container .page-model-price-container .badge-container-detail .info-tooltip { z-index: 1000; } .model-overview-container .model-page-container .page-model-price-container .badge-container-detail .segment-text-model { font-size: 10px; display: inherit; padding-top: 15px; font-weight: bold; color: #666; letter-spacing: 0.15pt; } @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .model-overview-container .model-page-container .page-model-price-container .badge-container-detail .segment-text-model { min-width: 205px !important; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; font-size: 9.5px; letter-spacing: 0 !important; } } @media only screen and (device-width: 375px) and (device-height: 667px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) { .model-overview-container .model-page-container .page-model-price-container .badge-container-detail .segment-text-model { min-width: 205px !important; word-break: keep-all; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; font-size: 9.5px; letter-spacing: 0 !important; } } .model-overview-container .model-page-container .page-model-price-container .badge-container-detail span sub { vertical-align: sub; font-size: 9px; } .model-overview-container .model-page-container .page-model-price-container .segment-tooltip { font-size: 10px; backface-visibility: hidden; padding-top: 10px; top: -42px; left: 68px; } @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { .model-overview-container .model-page-container .page-model-price-container .segment-tooltip { top: -42px !important; left: 78px; } } @media only screen and (device-width: 375px) and (device-height: 667px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) { .model-overview-container .model-page-container .page-model-price-container .segment-tooltip { top: -42px !important; left: 78px; } } .model-overview-container .model-page-container .coming-soon-container { float: left; } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .coming-soon-container { float: none; padding-top: 10px; border-top: 1px solid black; margin-top: 10px; } } .model-overview-container .model-page-container .coming-soon-container .coming-soon { font-size: 18px; font-family: 'HelveticaNeueLT-Bold'; display: inline-block; margin-bottom: 5px; margin-top: 30px; } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .coming-soon-container .coming-soon { font-size: 20px; position: relative; top: 4px; margin-top: 10px; } } .model-overview-container .model-page-container .starting-from-container { float: left; width: 127px; } @media screen and (min-width: 1260px) { .model-overview-container .model-page-container .starting-from-container { width: 160px; text-align: right; } } @media screen and (max-width: 1174px) { .model-overview-container .model-page-container .starting-from-container { text-align: right; } } @media screen and (max-width: 1173px) { .model-overview-container .model-page-container .starting-from-container { text-align: right; } } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .starting-from-container { float: none; padding-top: 10px; border-top: 1px solid black; margin-top: 10px; text-align: left; } } .model-overview-container .model-page-container .starting-from-container .info-container { position: relative; } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .starting-from-container .info-container { vertical-align: bottom; } } .model-overview-container .model-page-container .starting-from-container .info-tooltip { right: -22px; bottom: calc(100% + 6px); z-index: 1000; } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .starting-from-container .info-tooltip { right: -140px; } } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .starting-from-container .info-tooltip:after { right: 138px; } } .model-overview-container .model-page-container .starting-from-container .info-container { position: relative; } .model-overview-container .model-page-container .starting-from-container .starting-from { font-size: 14px; font-family: 'HelveticaNeueLT-Bold'; display: inline-block; margin-bottom: 5px; } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .starting-from-container .starting-from { font-size: 12px; position: relative; top: 4px; font-family: 'HelveticaNeueLT-Roman'; } } .model-overview-container .model-page-container .starting-from-container .price { display: block; font-size: 28px; font-family: 'HelveticaNeueLT-Bold'; margin-right: -5px; } @media screen and (max-width: 767px) { .model-overview-container .model-page-container .starting-from-container .price { display: block; margin-top: 5px; vertical-align: middle; font-size: 25px; } } .model-overview-container:after { content: ""; display: table; clear: both; } .model-footer { width: 100%; max-width: 845px; margin: 60px auto 0; padding-top: 30px; border-top: 1px solid #bbbbbb; } .model-footer .col { width: 46.1538461538%; display: inline-block; margin-left: 7.6923%; vertical-align: top; } .model-footer .col:first-child { margin-left: -4px; } .model-footer .col li { margin-top: 25px; border-top: 1px solid #bbbbbb; padding-top: 30px; } .model-footer .col li:after { content: ""; display: table; clear: both; } .model-footer .col li:first-child { margin-top: 0; border-top: none; } .model-footer .col .link-title { float: left; font-family: 'HelveticaNeueLT-Bold'; font-size: 15px; margin-left: 20px; } .model-footer .col .link-icon { float: right; } .features-container { padding-top: 60px; } @media screen and (max-width: 767px) { .features-container { margin-top: 30px; } } .wallpapers-container { padding-top: 40px; padding-bottom: 40px; border-bottom: solid 1px #b7b7b7; } @media screen and (max-width: 767px) { .wallpapers-container .desktop { display: none; height: 0; width: 0; } } .wallpapers-container .mobile { display: none; } @media screen and (max-width: 767px) { .wallpapers-container .mobile { display: block; } } .wallpapers-container .download-list-title { padding: 15px; } .video-container { position: relative; cursor: pointer; } .video-container:before { display: block; position: absolute; content: ''; width: 92px; height: 92px; background-image: url(/client/img/btn-video-play.png); background-repeat: no-repeat; left: 45%; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 767px) { .video-container:before { background-image: none; } } .video-container:hover:before { background-position: left bottom; } .video-container .video-item-container { border-bottom: 1px solid #b7b7b7; margin-top: 60px; } @media screen and (max-width: 767px) { .video-container .video-item-container { margin-top: 30px; } } .video-container .video-item-container .feature-video img { width: 100%; } .video-container .video-item-container .feature-video-title { height: 120px; width: 100%; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; color: black; font-family: "national"; font-size: 40px; font-weight: 300; cursor: text; } @media screen and (max-width: 767px) { .video-container .video-item-container .feature-video-title { font-size: 25px; } } .rotator-cards-one-item { background-color: white; max-width: 510px; width: 100%; margin-top: 30px; font-family: 'HelveticaNeueLT-Roman'; } @media screen and (max-width: 767px) { .rotator-cards-one-item { max-width: 255px; } } .rotator-cards-one-item img { width: 100%; } .rotator-cards-one-item .title { display: block; font-weight: bold; padding-bottom: 20px; font-size: 15px; } @media screen and (max-width: 767px) { .rotator-cards-one-item .title { font-size: 18px; } } .rotator-cards-one-item .inner-details { padding: 30px 11.568627451% 50px 4.901960784%; white-space: normal; } .card-cycler-container { text-align: center; margin-top: 30px; } .card-cycler-container .slide-cycle { width: 100%; max-width: 50px; background-color: black; height: 5px; display: inline-block; cursor: pointer; } @media screen and (max-width: 767px) { .card-cycler-container .slide-cycle { max-width: 25px; height: 3px; } } .card-cycler-container .slide-cycle.active { background-color: #f9273c; } .trim-container { padding-top: 53px; } @media screen and (max-width: 767px) { .trim-container { margin-top: 30px; } } @media screen and (max-width: 767px) { .trim-container .btn-container { margin-top: 0; border-top: none; padding-top: 20px; } } .trim-container .card-primary-price-container { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; float: right; } .card-primary-details-container:after { content: ""; display: table; clear: both; } .rotator-cards-two { padding: 20px 0; } .rotator-cards-two.trim-section { white-space: nowrap; } @media screen and (max-width: 767px) { .rotator-cards-two.trim-section .rotator-cards-two-item { padding: 0; max-width: 255px; padding-bottom: 40px; } } .rotator-cards-two-item { background-color: white; display: inline-block; vertical-align: top; max-width: 616px; width: 100%; font-family: 'HelveticaNeueLT-Roman'; white-space: normal; } .rotator-cards-two-item .highlight-container { margin-top: 30px; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; justify-content: space-between; } .rotator-cards-two-item .highlight-container .show-virtual-showroom-popup { margin-bottom: 15px; } @media screen and (max-width: 767px) { .rotator-cards-two-item .highlight-container .show-virtual-showroom-popup { margin-bottom: 0; } } @media screen and (max-width: 767px) { .rotator-cards-two-item .highlight-container { display: block; padding-left: 20px; padding-right: 20px; } } .rotator-cards-two-item .price-weekly-container { display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; width: 100%; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: inherit; flex-wrap: inherit; -ms-flex-align: end; align-items: flex-end; margin: 20px 0px 0px; border-top: 1px solid #b7b7b7; font-family: 'HelveticaNeueLT-Roman'; padding-bottom: 10px; min-width: 200px; } .rotator-cards-two-item .price-weekly-container .price-item { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-align: center; align-items: center; } @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .rotator-cards-two-item .price-weekly-container .price-item { -ms-flex-align: start !important; align-items: flex-start !important; } } .rotator-cards-two-item .price-weekly-container .price-item .item-caption-price, .rotator-cards-two-item .price-weekly-container .price-item .item-caption-weekly, .rotator-cards-two-item .price-weekly-container .price-item .item-caption-term, .rotator-cards-two-item .price-weekly-container .price-item .item-caption-apr { font-size: 10px; line-height: 12px; font-weight: initial; padding: 5px; min-width: 100px; text-align: left; position: absolute; left: 22px; } @media screen and (min-width: 1160px) { .rotator-cards-two-item .price-weekly-container .price-item .item-caption-price, .rotator-cards-two-item .price-weekly-container .price-item .item-caption-weekly, .rotator-cards-two-item .price-weekly-container .price-item .item-caption-term, .rotator-cards-two-item .price-weekly-container .price-item .item-caption-apr { position: absolute; left: 0; font-size: 12px; } } .rotator-cards-two-item .price-weekly-container .price-item .price-term-value, .rotator-cards-two-item .price-weekly-container .price-item .price-term-apr { padding: 5px; font-weight: bold; font-size: 14px; } .rotator-cards-two-item .price-weekly-container .price-item .caption-tooltip { display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; } .rotator-cards-two-item-container { padding: 45px 50px 60px; } @media screen and (min-width: 1173px) { .no-touchevents .rotator-cards-two-item:hover .rotator-cards-two-item-container:hover { box-shadow: 0 4px 10px -1px rgba(0, 0, 0, 0.35); } } @media screen and (max-width: 767px) { .rotator-cards-two-item-container { padding: 0; } } .card-primary-title-container { float: left; vertical-align: top; } @media screen and (max-width: 767px) { .card-primary-title-container { padding-left: 20px; padding-top: 20px; } } .card-primary-title-container .model { display: block; font-size: 32px; font-family: "HelveticaNeueLT-Bold"; text-transform: capitalize; } @media screen and (max-width: 767px) { .card-primary-title-container .model { font-size: 25px; } } .card-primary-title-container .trim { display: block; font-size: 25px; font-family: "HelveticaNeueLT-Bold"; } @media screen and (max-width: 767px) { .card-primary-title-container .trim { font-size: 13px; } } @media screen and (max-width: 767px) { .card-disclaimer-container { padding-left: 0px; width: 140px; } } @media screen and (max-width: 767px) { .card-disclaimer-container-overview { padding-left: 20px; width: 115px; } } .card-primary-title-container { float: left; vertical-align: top; } @media screen and (max-width: 767px) { .card-primary-title-container { padding-left: 20px; } } .card-primary-price-container { vertical-align: top; text-align: right; position: relative; } .card-primary-price-container:after { content: ""; display: table; clear: both; } @media screen and (min-width: 1260px) { .card-primary-price-container { width: 185px; } } @media screen and (max-width: 767px) { .card-primary-price-container { clear: both; padding-right: 20px; padding-top: 20px; } } @media screen and (max-width: 767px) { .card-primary-price-container .isMsrp { padding-right: 8px !important; } } @media screen and (max-width: 767px) { .card-primary-price-container .isSelling { margin-right: -10px !important; } } .card-primary-price-container .rotator-card-alt-heading { margin-bottom: 5px; } @media only screen and (min-width: 768px) { .card-primary-price-container .rotator-card-alt-heading { min-width: 128px; } } @media screen and (max-width: 767px) { .card-primary-price-container .rotator-card-alt-heading { font-size: 12px; min-width: 122px; } } .card-primary-price-container .price { display: block; font-size: 28px; text-align: right; font-family: 'HelveticaNeueLT-Bold'; margin-right: -5px; } @media screen and (max-width: 767px) { .card-primary-price-container .price { font-size: 15px; } } .card-primary-price-container .price.alt { text-align: right; } .card-coming-soon-container { float: right; vertical-align: top; text-align: right; } .card-coming-soon-container:after { content: ""; display: table; clear: both; } @media screen and (max-width: 767px) { .card-coming-soon-container { padding-right: 20px; padding-top: 20px; } } .card-coming-soon-container .coming-soon { display: block; font-size: 25px; font-family: 'HelveticaNeueLT-Bold'; margin-top: 3px; } @media screen and (max-width: 767px) { .card-coming-soon-container .coming-soon { font-size: 15px; } } .rotator-card-alt-heading { font-size: 15px; margin-bottom: 15px; display: block; font-family: 'HelveticaNeueLT-Roman'; } .rotator-card-alt-heading-two { font-size: 12px; margin-bottom: 5px; display: inline-block; font-family: "HelveticaNeueLT-Roman"; position: relative; } .rotator-card-alt-heading-two .info-container { margin-right: 0; } .rotator-card-alt-heading-two .msrp-tooltip-trigger { vertical-align: top; } .rotator-card-alt-heading-two .info-tooltip { bottom: 25px; right: -23px; z-index: 1000; } .card-pricing-details { border-top: 1px solid #b7b7b7; border-bottom: 1px solid #b7b7b7; display: inline-block; padding: 15px 0 15px 0; margin: 15px -5px 15px 0; max-width: 146px; } .card-pricing-details-item { display: block; font-size: 16px; font-family: "HelveticaNeueLT-Roman"; color: black; margin-top: 10px; text-align: right; } @media screen and (max-width: 767px) { .card-pricing-details-item { font-size: 10px; } } .card-pricing-details-item:first-child { margin-top: 0; } .highlight-title { font-size: 20px; margin-bottom: 15px; display: inline-block; font-family: 'HelveticaNeueLT-Bold'; } @media screen and (max-width: 767px) { .highlight-title { font-size: 15px; } } .highlight-details { line-height: 22px; font-size: 15px; font-family: 'HelveticaNeueLT-Roman'; margin-bottom: 15px; } .highlight-details.incentives { max-width: 600px; margin: 20px auto 0 auto; display: block; } @media screen and (max-width: 767px) { .highlight-details { font-size: 14px; line-height: 23px; } } .incentives { /* incentives table typography, borders, padding */ /* incentives table sticky column headers */ /* incentives table second sticky column headers */ } .incentives .mini-touts { white-space: normal; } @media screen and (max-width: 767px) { .incentives .mini-touts { padding-top: 0; } } .incentives .mini-touts .mini-tout-details { min-height: 240px; padding-bottom: 5px; } @media screen and (max-width: 767px) { .incentives .mini-touts .mini-tout-details { min-height: 140px; } } .incentives .mini-touts .mini-tout-details h3.mini-tout-details-title { font-size: 18px; } @media screen and (max-width: 1173px) { .incentives .mini-touts .mini-tout-details h3.mini-tout-details-title { font-size: 12px; } } .incentives .mini-touts .mini-tout { margin: 10px; } @media screen and (max-width: 767px) { .incentives .mini-touts .mini-tout { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; margin: 0 0 10px 0; } } .incentives .mini-touts p.incentives { padding-bottom: 20px; } .incentives .incentives-table { font-family: "Helvetica Neue", Helvetica, "HelveticaNeueLT-Roman", Arial, sans-serif; text-align: left; line-height: 1.2; font-size: 13px; border-top: 1px solid #999; } .incentives .incentives-table thead th { font-weight: 700; vertical-align: middle; border-right: 1px solid #dedede; border-bottom: 1px solid #999; height: 67px; } .incentives .incentives-table thead th.spacer { border-right: none; } .incentives .incentives-table thead th small { display: block; } .incentives .incentives-table th, .incentives .incentives-table td { padding: 7px 10px; } .incentives .incentives-table tr { border-bottom: 1px solid #dedede; } .incentives .incentives-table tr:nth-child(3n) { border-bottom: 1px solid #999; } .incentives .incentives-table tbody th { vertical-align: top; } .incentives .incentives-table th:last-child { border-right: none; } .incentives .incentives-table tbody td { border-right: 1px solid #dedede; text-align: right; } .incentives .incentives-table tbody td:last-child { border-right: none; } .incentives .incentives-table-content-wrapper { margin: 20px auto; padding: 20px; max-width: 930px; background-color: #ffffff; position: relative; } .incentives .incentives-table-content-wrapper.french { max-width: 1060px; } .incentives .incentives-table-content { overflow-x: auto; } .incentives .incentives-table-sticky-header { padding-top: 0 !important; padding-bottom: 0 !important; border-bottom: 1px solid #999; } .incentives .incentives-table-sticky-header span { position: absolute; font-weight: 700; top: auto; left: 20px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; width: 101px; background: white; height: 89px; padding-right: 10px; border-right: 1px solid #dedede; text-align: left; } .incentives thead th.incentives-table-sticky-header { padding-left: 90px; border: none; } .incentives thead th.incentives-table-sticky-header span { top: 21px; height: 67px; border-bottom: 1px solid #999; } .incentives .incentives-table-second-sticky-header { border-right: 1px solid #dedede; } @media only screen and (min-width: 768px) { .incentives .incentives-table-second-sticky-header { padding-top: 0 !important; padding-bottom: 0 !important; font-weight: normal; vertical-align: middle; border-right: none; } .incentives .incentives-table-second-sticky-header span { position: absolute; top: auto; left: 121px; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; width: 100px; background: white; height: 29px; padding: 0 10px; border-right: 1px solid #dedede; text-align: left; } .incentives thead th.incentives-table-second-sticky-header { padding-left: 90px; border-bottom: none !important; } .incentives thead th.incentives-table-second-sticky-header span { top: 21px; height: 67px; border-bottom: 1px solid #999; } } .incentives button.incentives-table-scroll { position: absolute; background-color: #6cbfea; height: 30px; width: 30px; border-radius: 30px; top: 20px; color: white; display: none; font-family: 'honda-icons'; border: none; } .incentives button.incentives-table-scroll-left { left: -15px; } .incentives button.incentives-table-scroll-right { right: -15px; } .incentives button.incentives-table-scroll-right:before { content: "\e619"; } .incentives button.incentives-table-scroll-left:before { content: "\e624"; } .btn-container { padding-top: 30px; margin-top: 20px; border-top: 1px solid #8f8f8f; } @media screen and (max-width: 767px) { .btn-container { margin-left: 20px; margin-right: 20px; } } .btn-container .btn-1-container { display: inline-block; width: 47.5%; margin-left: -4px; margin-right: 4.0404040404%; } @media screen and (max-width: 767px) { .btn-container .btn-1-container { width: 100%; display: block; margin-bottom: 15px; } } .btn-container .btn-2-container { display: inline-block; width: 47.5%; margin-left: -4px; } .btn-container .btn-2-container:first-child { margin-right: 4.0404040404%; } @media screen and (max-width: 767px) { .btn-container .btn-2-container:first-child { margin-bottom: 15px; } } @media screen and (max-width: 767px) { .btn-container .btn-2-container { width: 100%; display: block; } } .btn-1 { font-size: 14px; color: #f7f3f1; background-color: #ff2841; text-align: center; display: block; padding: 15px 0; text-decoration: none; border-radius: 3px; font-family: 'HelveticaNeueLT-Bold'; } .btn-1:hover { background-color: #d81936; } .btn-1.is-disabled { opacity: 0.5; } .btn-2 { font-size: 14px; color: #0d9be4; text-align: center; display: block; border-radius: 3px; padding: 15px 0; font-family: 'HelveticaNeueLT-Bold'; border: 1px solid #0d9be4; text-decoration: none; } .btn-2:hover { background-color: #0d9be4; color: white; } .btn-2.is-disabled { opacity: 0.5; } .model-view-thumbnail-container { margin-top: 10px; } .model-view-thumbnail-container:after { content: ""; display: table; clear: both; } @media screen and (max-width: 767px) { .model-view-thumbnail-container { margin-top: 15px; } } .model-view-container { float: left; max-width: 150px; } .model-view-container:after { content: ""; display: table; clear: both; } @media screen and (max-width: 767px) { .model-view-container { width: 100%; max-width: none; float: none; } } .model-view-container .view-title { font-size: 15px; color: black; font-family: 'HelveticaNeueLT-Bold'; float: right; text-decoration: none; display: inline-block; background: url("/client/img/switch_view_left.png") no-repeat; background-size: 28px 28px; padding-left: 40px; max-width: 100px; } @media screen and (max-width: 767px) { .model-view-container .view-title { display: block; float: none; padding-left: 0; padding-top: 35px; max-width: 50px; } } .model-view-container .view-title.switched { background: url("/client/img/switch_view_right.png") no-repeat; background-size: 28px 28px; } .model-thumbnail-container { max-width: 338px; float: right; } @media screen and (max-width: 767px) { .model-thumbnail-container { float: none; max-width: 100%; } } .model-thumbnail-container img { width: 100%; } .specs-container { border-top: 1px solid #8f8f8f; padding-top: 20px; margin-top: 35px; font-size: 0; } @media screen and (max-width: 767px) { .specs-container { padding-top: 0; margin-left: 20px; margin-right: 20px; } } .specs-col { display: inline-block; width: 25%; border-left: 1px solid #8f8f8f; text-align: left; vertical-align: top; padding: 0 2% 0 3%; min-height: 120px; } .specs-col:first-child { border-left: none; } @media screen and (max-width: 767px) { .specs-col { width: 100%; padding-top: 0; vertical-align: top; border-left: none; border-bottom: solid 1px #8f8f8f; padding-left: 24.5322245322%; position: relative; min-height: 65px !important; padding-bottom: 12px; } } .specs-col .spec-name { font-size: 14px; line-height: 15px; color: #1b1b1b; font-family: 'HelveticaNeueLT-Bold'; display: block; min-height: 30px; margin-bottom: 5px; vertical-align: top; } @media screen and (max-width: 767px) { .specs-col .spec-name { padding-top: 15px; min-height: 0 !important; max-height: 100%; margin-bottom: 2px; } } .specs-col .spec-details { font-size: 10px; display: block; color: #1b1b1b; font-family: 'HelveticaNeueLT-Roman'; line-height: 14px; font-weight: 400; } .specs-col .icons { display: inline-block; max-width: 40px; width: 100%; margin-bottom: 18px; } @media screen and (max-width: 767px) { .specs-col .icons { position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin-bottom: 0; } } .rotator-video .youtube-video { padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; opacity: 0; display: inline-block; } .rotator-video .youtube-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 998; opacity: 0; } .rotator-video .rotator-video-img { position: absolute; top: 0; z-index: 999; width: 100%; height: 100%; } .rotator-video-btn { background-color: white; opacity: 0.7; position: absolute; width: 100px; height: 100px; text-align: center; border-radius: 50%; z-index: 999; top: 50%; left: 50%; transform: translate(-50%, -50%); } .rotator-video-btn .gallery-video-play { top: 50%; left: 50%; border-top: 18px solid transparent; border-bottom: 18px solid transparent; border-left: 28px solid black; transform: translate(-50%, -50%); } @media screen and (max-width: 1173px) { .prev { display: none; } } @media screen and (max-width: 1173px) { .next { display: none; } } .next.icon-arrow-down { color: white; text-decoration: none; transform: rotate(270deg); } .special-offers-link { cursor: pointer; } .product-family .all-model-container { max-width: none; } .product-family .all-model-container .list-item { height: auto; } .product-family .all-model-container .section-primary { border: none; } .product-family .all-model-container .section-caption { padding: 30px 40px 30px 40px; position: relative; top: -2px; text-align: center; } @media screen and (max-width: 767px) { .product-family .all-model-container .section-caption { padding: 40px 40px 30px 40px; } } .product-family .all-model-container .section-caption .section-title { font-size: 40px; display: inline-block; margin: 0 auto; color: black; font-family: "national"; font-weight: 300; text-align: center; } @media screen and (max-width: 767px) { .product-family .all-model-container .section-caption .section-title { font-size: 25px; } } .product-family .model-header .price-container { width: auto; } .product-family .model-header .price-container span { min-width: 105px; } /*removes extra gap*/ .product-family .back, .product-family .legal-copy { display: none; } /*Independent Tout*/ .model-hero-tile .tout-caption { padding: 40px 40px 40px 40px; position: relative; top: -2px; text-align: center; } .model-hero-tile .tout-caption .tout-title { font-size: 40px; display: inline-block; margin: 0 auto; color: black; font-family: "national"; font-weight: 300; text-align: center; } @media screen and (max-width: 767px) { .model-hero-tile .tout-caption .tout-title { font-size: 25px; } } @media screen and (min-width: 1173px) { .container.features-nav { padding: 0 0 0 40px; max-width: none; } } .list-nav-item { display: table; width: 100%; border-top: 1px solid #c6c6c6; } .list-nav-item:first-child { border-top: 0; } .list-nav-link-wrapper { position: relative; display: block; } .list-nav-link { display: table-cell; vertical-align: middle; padding: 24px 0; } .list-nav-link:after { content: ""; display: table; clear: both; } .list-nav-item:first-child .list-nav-link { padding-top: 8px; } .list-nav-item:last-child .list-nav-link { padding-bottom: 0; } @media screen and (max-width: 1173px) { .list-nav-link { padding: 15px 0; } } .list-nav-icon, .list-nav-text, .list-nav-action { display: inline-block; vertical-align: middle; } .list-nav-icon { margin-right: 10px; font-size: 24px; color: #1b1b1b; width: 30px; text-align: center; } .list-nav-text { font-size: 15px; color: #1b1b1b; font-family: 'HelveticaNeueLT-Bold'; line-height: 18px; } @media screen and (max-width: 1173px) { .list-nav-text { font-size: 14px; } } @media screen and (max-width: 767px) { .list-nav-text { font-size: 12px; } } .list-nav-action { position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .list-nav-action.dropdown-wrapper { z-index: 10; } .link-circle-arrow { border: 1px solid #0d9be4; width: 40px; height: 40px; line-height: 40px; border-radius: 100px; text-align: center; font-size: 8px; color: #0d9be4; } .link-circle-arrow:before { display: inline-block; } .link-circle-arrow:hover, .no-touchevents .list-nav-link:hover .link-circle-arrow { background: #0d9be4; color: #fff; } @media screen and (max-width: 1173px) { .link-circle-arrow { width: 30px; height: 30px; line-height: 28px; font-size: 7px; } } @media screen and (max-width: 767px) { .link-circle-arrow { font-size: 6px; width: 26px; height: 26px; line-height: 24px; } } .model-page-header-wrapper { width: 100%; background: #fff; border-bottom: 1px solid #e6e6e6; position: relative; z-index: 99; } .model-page-header-wrapper .container:after { content: ""; display: table; clear: both; } @media screen and (max-width: 767px) { .model-page-header-wrapper { border-bottom: none; border-top: 1px solid #e6e6e6; background: #f1f1f1; } } @media screen and (max-width: 767px) { .model-page-header-wrapper.sub-page { border-top: none; } } .model-page-header-placeholder { width: 100%; background-color: white; height: 136px; } @media screen and (max-width: 1173px) { .model-page-header-placeholder { height: 115px; } } @media screen and (max-width: 767px) { .model-page-header-placeholder { background-color: transparent; } } .model-page-header { display: table; width: 100%; height: 67px; padding-right: 70px; } @media screen and (max-width: 1173px) { .model-page-header { padding-right: 0; } } @media screen and (max-width: 767px) { .model-page-header { display: block; } } @media screen and (min-width: 1174px) { .model-page-header { height: 67px; } } .model-sub-page-header { padding: 20px 0 20px 0; } @media screen and (max-width: 1173px) { .model-sub-page-header { padding: 0; } } .model-page-header-col { display: table-cell; vertical-align: middle; text-align: right; } .model-page-header-col:first-child { text-align: left; } @media screen and (max-width: 767px) { .model-page-header-col { display: block; text-align: left; } } .model-page-header-title { font-size: 30px; font-family: "HelveticaNeueLT-Bold"; } .model-page-header-title .alt-color { color: #b7b7b7; } @media screen and (max-width: 1173px) { .model-page-header-title { font-size: 37px; padding: 34px 0; } } @media screen and (max-width: 767px) { .model-page-header-title { display: none; } } @media screen and (max-width: 767px) { .model-page-header-nav { margin: 22px 0; } } .model-page-header-nav-item { border-left: 1px solid #8d8d8d; display: inline-block; margin-left: 26px; padding-left: 30px; } .model-page-header-nav-item:first-child { border-left: 0; padding-left: 0; margin-left: 0; } @media screen and (max-width: 767px) { .model-page-header-nav-item { padding-left: 10px; margin-left: 6px; } } .model-page-header-nav-link { cursor: pointer; display: inline-block; } .model-page-header-nav-link.grid-view.is-active .model-page-header-nav-icon { color: #0d9be4; } .model-page-header-nav-link.grid-view .model-page-header-nav-icon { font-size: 25px; } .model-page-header-nav-link.list-view.is-active .model-page-header-nav-icon { color: #0d9be4; } .model-page-header-nav-link.list-view .model-page-header-nav-icon { font-size: 18px; } .model-page-header-nav-link.expand-all .model-page-header-nav-icon, .model-page-header-nav-link.collapse-all .model-page-header-nav-icon { border: 1px solid #089eee; width: 22px; height: 22px; border-radius: 100px; font-size: 12px; text-align: center; line-height: 20px; color: #0d9be4; } .no-touchevents .model-page-header-nav-link:hover.expand-all .model-page-header-nav-icon, .no-touchevents .model-page-header-nav-link:hover.collapse-all .model-page-header-nav-icon { background: #0d9be4; color: #fff; } .model-page-header-nav-text, .model-page-header-nav-icon { display: inline-block; vertical-align: middle; color: #000; } .model-page-header-nav-text { font-size: 14px; font-family: 'HelveticaNeueLT-Bold'; } @media screen and (max-width: 767px) { .model-page-header-nav-text { font-size: 11px; } } .model-page-header-nav-icon { margin-left: 11px; } .model-specs-wrapper, .model-accessories-wrapper { margin-top: 60px; } @media screen and (max-width: 1173px) { .model-specs-wrapper, .model-accessories-wrapper { margin-top: 50px; } } @media screen and (max-width: 767px) { .model-specs-wrapper, .model-accessories-wrapper { margin-top: 0; } } .model-spec-content-wrapper { position: relative; padding: 0 40px; background: #fff; } @media screen and (max-width: 1173px) { .model-spec-content-wrapper { padding: 0 20px; } } @media screen and (max-width: 767px) { .model-spec-content-wrapper { padding: 0 15px; } } .model-spec-content { background: #fff; margin-bottom: 30px; display: none; padding: 28px 0; overflow-x: hidden; } @media screen and (max-width: 1174px) { .model-spec-content { overflow-x: auto; } } .is-open .model-spec-content { display: block; } .model-spec-content:after { width: 236px; border-right: 1px solid #dedede; height: 100%; position: absolute; top: 0; left: 0; background: #fff; content: ''; z-index: 1; } @media screen and (min-width: 1919px) { .model-spec-content:after { width: 502px; border-right: 1px solid #dedede; } } @media screen and (max-width: 1173px) { .model-spec-content:after { width: 216px; } } @media screen and (max-width: 767px) { .model-spec-content:after { width: 124px; } } .model-spec-table { font-family: 'HelveticaNeueLT-Roman'; line-height: 25px; font-size: 15px; } @media screen and (max-width: 1173px) { .model-spec-table { font-size: 14px; } } @media screen and (max-width: 767px) { .model-spec-table { font-size: 11px; line-height: 13px; } } .model-spec-table-heading, .model-spec-table-cell { padding: 28px 20px; border-bottom: 1px solid #dedede; } .model-spec-table-row:first-child .model-spec-table-heading, .model-spec-table-row:last-child .model-spec-table-heading, .model-spec-table-row:first-child .model-spec-table-cell, .model-spec-table-row:last-child .model-spec-table-cell { border-bottom: 0; } @media screen and (max-width: 767px) { .model-spec-table-heading, .model-spec-table-cell { padding: 20px 15px; } } .model-spec-table-heading { font-family: 'HelveticaNeueLT-Bold'; } @media screen and (max-width: 767px) { .model-spec-table-heading { font-size: 12px; } } .model-spec-table-cell { min-width: 134px; max-width: 134px; } .model-spec-table-cell:first-child { font-family: 'HelveticaNeueLT-Bold'; min-width: 195px; max-width: 195px; padding-left: 0; } @media screen and (min-width: 1919px) { .model-spec-table-cell:first-child { min-width: 500px; max-width: 500px; } } @media screen and (max-width: 1173px) { .model-spec-table-cell:first-child { border-bottom: 0; } } @media screen and (max-width: 767px) { .model-spec-table-cell:first-child { font-size: 10px; line-height: 15px; min-width: 108px; max-width: 108px; } } @media screen and (max-width: 767px) { .model-spec-table-cell { min-width: 95px; max-width: 95px; } } .sticky-col-text { position: absolute; top: auto; left: 0; width: 235px; padding-left: 40px; padding-right: 20px; border-top: 28px solid #fff; margin-top: -28px; z-index: 2; } @media screen and (min-width: 1919px) { .sticky-col-text { width: 500px; } } @media screen and (max-width: 1173px) { .sticky-col-text { padding-left: 20px; width: 215px; } } @media screen and (max-width: 767px) { .sticky-col-text { padding-right: 10px; padding-left: 15px; width: 118px; } } .scroll-indicator { width: 40px; height: 40px; border-radius: 100px; position: absolute; top: 20px; background: #6cbfea; font-size: 22px; text-align: center; line-height: 40px; color: #fff; display: block; z-index: 100; } @media screen and (min-width: 1919px) { .scroll-indicator { display: none; } } .scroll-indicator.disabled { background: #c4c4c4; display: none; } .scroll-indicator.icon-arrow-left2 { left: 215px; padding-right: 2px; } @media screen and (max-width: 1173px) { .scroll-indicator.icon-arrow-left2 { left: 195px; } } @media screen and (max-width: 767px) { .scroll-indicator.icon-arrow-left2 { left: 108px; } } .scroll-indicator.icon-arrow-right2 { right: -20px; padding-left: 5px; } @media screen and (max-width: 767px) { .scroll-indicator.icon-arrow-right2 { right: -13px; } } @media screen and (max-width: 767px) { .scroll-indicator { width: 30px; height: 30px; line-height: 30px; right: -15px; font-size: 18px; } } .specs-disclaimer { position: relative; z-index: 2; width: 100%; background: #fff; border-top: 1px solid #dedede; padding: 30px 0; margin-top: -30px; } @media screen and (max-width: 767px) { .specs-disclaimer { padding: 20px 0; } } .specs-disclaimer-item { font-size: 12px; font-family: 'HelveticaNeueLT-Roman', sans-serif; margin-top: 10px; line-height: 18px; color: #7d7d7d; } .specs-disclaimer-item:first-child { margin-top: 0; } @media screen and (max-width: 767px) { .specs-disclaimer-item { font-size: 10px; } } .specs-legal { overflow: visible; } .specs-legal:after { display: none; } .container.full-width { max-width: 1920px; } .container.full-width.alt { max-width: none; } .accordion-item { margin-top: 15px; } .accordion-item:first-child { margin-top: 0; } .accordion-heading { background: #dedede; cursor: pointer; border-radius: 4px; padding: 28px 40px; display: table; width: 100%; } .is-open .accordion-heading { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @media screen and (max-width: 1173px) { .accordion-heading { padding: 23px 20px; } } @media screen and (max-width: 767px) { .accordion-heading { padding: 13px 15px; } } .accordion-heading-text, .accordion-heading-icon { display: table-cell; vertical-align: middle; } .accordion-heading-text { font-size: 20px; color: #1b1b1b; font-family: 'HelveticaNeueLT-Bold'; } @media screen and (max-width: 1173px) { .accordion-heading-text { font-size: 19px; } } @media screen and (max-width: 767px) { .accordion-heading-text { font-size: 14px; } } .accordion-heading-icon { font-size: 23px; text-align: right; } @media screen and (max-width: 1173px) { .accordion-heading-icon { font-size: 22px; } } @media screen and (max-width: 1173px) { .accordion-heading-icon { font-size: 15px; } } .section-nav { margin-top: 25px; } .section-nav-item { display: inline-block; padding-left: 13px; border-left: 1px solid #cfcfcf; margin-left: 13px; vertical-align: bottom; } .section-nav-item:first-child { padding-left: 0; margin-left: 0; border-left: none; } @media screen and (max-width: 1173px) { .section-nav-item { display: none; } } .section-nav-link { font-size: 15px; font-family: 'HelveticaNeueLT-Bold'; color: black; text-decoration: none; display: table-cell; vertical-align: middle; } .section-nav-link:hover { color: #ff2841; } .section-nav-link.is-active { color: #ff2841; } .responsive-select { display: none; } @media screen and (max-width: 767px) { .responsive-select { display: block; } } .section-nav-dropdown-wrapper { display: none; width: 100%; position: relative; } .section-nav-dropdown-wrapper .active-icon { position: absolute; top: 19px; right: 20px; display: inline-block; font-size: 8px; } @media screen and (max-width: 767px) { .section-nav-dropdown-wrapper { display: block; } .model-page-header .section-nav-dropdown-wrapper { margin-top: 20px; } } @media screen and (max-width: 1173px) { .section-nav-dropdown-wrapper.show-tablet { display: block; } } .section-nav-list-wrapper { position: absolute; top: 0; left: 0; width: 100%; z-index: 10; box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.15); display: none; } .section-nav-active-item, .section-nav-list-wrapper { border-radius: 3px; padding: 0 20px 0 20px; background: #fff; } .section-nav-list-item { border-top: 1px solid #dedede; } .section-nav-list-item:first-child { border-top: 0; } .section-nav-active-item, .section-nav-list-link { font-size: 18px; color: #1b1b1b; font-family: 'HelveticaNeueLT-Bold'; padding-top: 15px; padding-bottom: 15px; display: block; } .section-nav-active-item.is-active, .section-nav-list-link.is-active { color: #ff2841; } .section-nav-active-item-text { color: #ff2841; } .accessories-filter { margin-bottom: 5px; margin-top: -5px; font-size: 0; } @media screen and (max-width: 767px) { .accessories-filter { margin-bottom: 5px; } } .accessories-disclaimer { margin-top: 5px; margin-bottom: 5px; font-size: 12px; font-family: HelveticaNeueLT-Roman; } .accessories-filter-item { display: inline-block; margin-left: 18px; } .accessories-filter-item:first-child { margin-left: 0; } .accessories-filter-item .selectboxit { width: 337px; } @media screen and (max-width: 767px) { .accessories-filter-item .selectboxit { width: inherit; } } @media screen and (max-width: 767px) { .accessories-filter-item { margin-left: 0; display: block; } } .accessories-list { display: none; font-size: 0; padding: 15px 0; } .is-open .accessories-list { display: block; } @media screen and (max-width: 767px) { .accessories-list { display: block; padding: 0; } } .accessories-list-item { display: inline-block; width: 31.7796610169%; vertical-align: top; margin-left: 2.3305084746%; margin-top: 20px; } @media screen and (min-width: 1919px) { .accessories-list-item { width: 23%; margin-left: 0%; margin-right: 2.6%; } .accessories-list-item:nth-child(3n+1) { margin-left: 0%; margin-right: 2.6%; } .accessories-list-item:nth-child(4n+4) { margin-right: 0; } } .accessories-list-item img { width: 100%; } .accessories-list-item:nth-child(3n+1) { margin-left: 0; } .accessories-list-view .accessories-list-item { width: 100%; margin-left: 0; } @media screen and (max-width: 1173px) { .accessories-grid-view .accessories-list-item { width: 47.8813559322%; margin-left: 4.2372881356%; } .accessories-grid-view .accessories-list-item:nth-child(3n+1) { margin-left: 4.2372881356%; } .accessories-grid-view .accessories-list-item:nth-child(2n+1) { margin-left: 0; } } @media screen and (max-width: 767px) { .accessories-list-item { margin-top: 11px; } .accessories-list-item:first-child { margin-top: 8px; } .accessories-grid-view .accessories-list-item { display: block; width: 100%; margin-left: 0; } .accessories-grid-view .accessories-list-item:nth-child(3n+1) { margin-left: 0; } } @media screen and (max-width: 767px) { .model-accessories-wrapper { padding-top: 20px; } .model-accessories-wrapper .accordion-item { margin-top: 18px; } .model-accessories-wrapper .accordion-item:first-child { margin-top: 0; } .model-accessories-wrapper .accordion-heading { background: none; padding: 0; cursor: default; } .model-accessories-wrapper .accordion-heading-icon { display: none; } } @media screen and (max-width: 767px) { .accessories-view-switcher { display: none; } } .accessory-container { font-size: 0; font-family: 'HelveticaNeueLT-Roman'; line-height: 20px; position: relative; background: #fff; display: block; min-height: 120px; } .accessories-list-view .accessory-container:after { content: ""; display: table; clear: both; } @media screen and (max-width: 767px) { .accessory-container { padding: 20px; display: none; } .is-open .accessory-container { display: block; } } .accessory-mobile-heading { display: none; background: #dedede; font-size: 10px; width: 100%; border-radius: 3px; font-family: 'HelveticaNeueLT-Bold'; padding: 15px; cursor: pointer; } .is-open .accessory-mobile-heading { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @media screen and (max-width: 767px) { .accessory-mobile-heading { display: table; } } .accessory-mobile-heading-title, .accessory-mobile-heading-price { display: table-cell; } .accessory-mobile-heading-price { text-align: right; } .accessory-image { position: relative; display: block; } .accessory-image:after { position: absolute; width: 27px; height: 27px; text-align: center; line-height: 27px; font-size: 27px; color: #0d9be4; } .accessories-list-view .accessory-image:after { bottom: 12px; right: 12px; } .accessories-grid-view .accessory-image:after { bottom: 20px; right: 20px; } @media screen and (max-width: 767px) { .accessory-image:after { display: none; } } .accessory-image, .accessory-details { font-size: 15px; } .accessories-list-view .accessory-image, .accessories-list-view .accessory-details { display: inline-block; vertical-align: top; } .accessories-list-view .default-image { height: 120px; width: 156px; } .accessories-list-view .accessory-image { float: left; width: 17.3199152542%; } .accessory-image img { display: block; } .accessory-details { padding: 28px 26px; } .accessories-list-view .accessory-details { width: 82.6800847458%; padding: 22px 40px; float: right; } @media screen and (max-width: 767px) { .accessory-details { padding: 20px 0 0; } } .accessory-details-heading { font-weight: bold; display: table; width: 100%; margin-bottom: 11px; } .accessories-list-view .accessory-details-heading { margin-bottom: 8px; } @media screen and (max-width: 767px) { .accessory-details-heading { display: none; } } .accessory-details-title, .accessory-details-price { display: table-cell; width: 60px; } .accessories-list-view .accessory-details-title, .accessories-list-view .accessory-details-price { font-size: 20px; } @media screen and (max-width: 767px) { .accessory-details-description { font-size: 10px; line-height: 14px; } } .accessory-details-title { padding-right: 20px; } .accessory-details-price { text-align: right; } /* * jquery.selectBoxIt.css 3.8.0 * Author: @gregfranko */ /* Common CSS Properties --------------------- These properties will be applied to any themes that you use */ /* SelectBoxIt container */ .selectboxit-container { position: relative; display: inline-block; vertical-align: top; width: inherit; } .selectboxit-container br { display: none; } /* Styles that apply to all SelectBoxIt elements */ .selectboxit-container * { font-size: 15px; color: #0d9be4; font-family: 'HelveticaNeueLT-Bold'; line-height: 38px; /* Prevents text selection */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; -o-user-select: none; user-select: none; outline: none; white-space: nowrap; } @media screen and (max-width: 1173px) { .selectboxit-container * { font-size: 14px; } } @media screen and (max-width: 767px) { .selectboxit-container * { font-size: 16px; } } /* Button */ .selectboxit-container .selectboxit { cursor: pointer; margin: 5px 0; padding: 0; border-radius: 4px; overflow: hidden; display: block; position: relative; } .selectboxit { width: 300px; } /* Height and Vertical Alignment of Text */ .selectboxit-container span, .selectboxit-container .selectboxit-options a { height: 42px; /* Height of the drop down */ line-height: 42px; /* Vertically positions the drop down text */ display: block; } /* Focus pseudo selector */ .selectboxit-container .selectboxit:focus { outline: 0; } /* Disabled Mouse Interaction */ .selectboxit.selectboxit-disabled, .selectboxit-options .selectboxit-disabled { opacity: 0.65; filter: alpha(opacity=65); box-shadow: none; cursor: default; } .selectboxit .selectboxit-option-icon-container { display: none !important; } /* Options List */ .selectboxit-container .selectboxit-options { box-sizing: border-box; min-width: 100%; /* Minimum Width of the dropdown list box options */ *width: 100%; margin: 0; padding: 0; list-style: none; position: absolute; overflow-x: hidden; overflow-y: auto; cursor: pointer; display: none; z-index: 9999999999999; border-radius: 4px; text-align: left; box-shadow: none; } /* Individual options */ .selectboxit-option .selectboxit-option-anchor { padding: 0 30px 0 8px; } /* Individual Option Hover Action */ .selectboxit-option .selectboxit-option-anchor:hover { text-decoration: none; } /* Individual Option Optgroup Header */ .selectboxit-option, .selectboxit-optgroup-header { text-indent: 5px; /* Horizontal Positioning of the select box option text */ margin: 0; list-style-type: none; } /* The first Drop Down option */ .selectboxit-option-first { border-top-right-radius: 6px; border-top-left-radius: 6px; } /* The first Drop Down option optgroup */ .selectboxit-optgroup-header + .selectboxit-option-first { border-top-right-radius: 0px; border-top-left-radius: 0px; } /* The last Drop Down option */ .selectboxit-option-last { border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } /* Drop Down optgroup headers */ .selectboxit-optgroup-header { font-weight: bold; } /* Drop Down optgroup header hover psuedo class */ .selectboxit-optgroup-header:hover { cursor: default; } /* Drop Down down arrow container */ .selectboxit-arrow-container { /* Positions the down arrow */ width: 40px; position: absolute; right: 0; top: 0; } .selectboxit-arrow-container:after { border-left: 1px solid #0d9be4; vertical-align: top; display: inline-block; font-size: 15px; text-align: center; width: 30px; position: absolute; top: 0; right: 0; height: 100%; line-height: 40px; } @media screen and (max-width: 767px) { .selectboxit-arrow-container { width: 28px; } } /* Drop Down down arrow */ .selectboxit .selectboxit-arrow-container .selectboxit-arrow { /* Horizontally centers the down arrow */ margin: 0 auto; position: absolute; top: 0; right: 0; } /* Drop Down down arrow for jQueryUI and jQuery Mobile */ .selectboxit .selectboxit-arrow-container .selectboxit-arrow.ui-icon { top: 30%; } /* Drop Down individual option icon positioning */ .selectboxit-option-icon-container { float: left; } .selectboxit-container .selectboxit-option-icon { margin: 0; padding: 0; vertical-align: middle; } /* Drop Down individual option icon positioning */ .selectboxit-option-icon-url { width: 18px; background-size: 18px 18px; background-repeat: no-repeat; height: 100%; background-position: center; float: left; } .selectboxit-rendering { display: inline-block !important; *display: inline !important; zoom: 1 !important; visibility: visible !important; position: absolute !important; top: -9999px !important; left: -9999px !important; } /* jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */ .jqueryui .ui-icon { background-color: inherit; } /* Another jQueryUI and jQuery Mobile compatability fix - Feel free to remove this style if you are not using jQuery Mobile */ .jqueryui .ui-icon-triangle-1-s { background-position: -64px -16px; } /* Default Theme ------------- Note: Feel free to remove all of the CSS underneath this line if you are not using the default theme */ .selectboxit-btn { border: 1px solid #0d9be4; border-radius: 4px; } .selectboxit-btn .selectboxit-text { overflow: hidden; text-overflow: ellipsis; line-height: 40px; height: 40px; padding: 0 40px 0 14px; max-width: 100%; } .selectboxit-btn.selectboxit-enabled:hover, .selectboxit-btn.selectboxit-enabled:focus { color: #333333; text-decoration: none; background-position: 0 -15px; } .selectboxit-default-arrow { width: 30px; height: 100%; } .selectboxit-list { background-color: #ffffff; border: 1px solid #4b9be3; } .selectboxit-list .selectboxit-option { border-top: 1px solid #4b9be3; } .selectboxit-list .selectboxit-option:first-child { border-top: 0; } .selectboxit-list .selectboxit-option-anchor { color: #4b9be3; font-weight: normal; font-size: 12px; } .selectboxit-list > .selectboxit-focus > .selectboxit-option-anchor { color: #ffffff; background-color: #4b9be3; } .selectboxit-list > .selectboxit-focus > .selectboxit-option-anchor sup { color: #fff; } .selectboxit-list > .selectboxit-disabled > .selectboxit-option-anchor { color: #1c1c1c; } .faq { font-size: 0; padding: 40px 0; text-align: center; margin: 0 auto; } @media screen and (max-width: 767px) { .faq { padding: 0; } } .faq .accordion-list { text-align: left; } .faq .accordion-heading .icon-minus-2:before { content: "\e61a"; font-size: 12px; padding-left: 5px; } .faq .accordion-heading .icon-plus-2:before { content: "\e601"; font-size: 12px; padding-left: 5px; } .faq p.highlight-details { padding: 0 40px; } @media screen and (max-width: 767px) { .faq p.highlight-details { padding: 0 20px; } } .faq-accordion { margin-top: 30px; } .faq-content { line-height: 22px; font-size: 14px; font-family: 'HelveticaNeueLT-Roman'; display: block; margin-bottom: 20px; max-width: 80%; } .download-list { font-size: 0; width: 100%; margin: 0 auto; text-align: center; } .download-list-item { display: inline-block; width: 188px; margin-left: 19px; vertical-align: top; text-align: left; } .download-list-item:first-child { margin-left: 0; } @media screen and (max-width: 1173px) { .download-list-item { width: 126px; margin-left: 20px; } } .download-list-link { display: block; min-height: 322px; background: #1b1b1b; } .no-touchevents .download-list-link:hover { background: #e72530; } @media screen and (max-width: 1173px) { .download-list-link { min-height: 262px; } } .download-list-img { display: block; } .download-list-img img { width: 100%; } .download-list-title { font-size: 15px; color: #fff; display: block; width: 100%; font-family: 'HelveticaNeueLT-Bold'; line-height: 20px; padding: 30px; } @media screen and (max-width: 1173px) { .download-list-title { font-size: 12px; line-height: normal; padding: 20px; } } .download-list-icon { display: block; font-size: 34px; margin-bottom: 15px; } @media screen and (max-width: 1173px) { .download-list-icon { font-size: 23px; } } .wallpapers-rotator .download-list-title { color: #0d9be4; } .form-container { width: 100%; max-width: 650px; margin: 0 auto; padding: 100px 15px; font-family: 'HelveticaNeueLT-Roman'; } .form-container strong { font-weight: bold; } .form-container p { font-size: 15px; line-height: 1.5; margin-bottom: 35px; } .form-container select, .form-container input { height: 45px; border: 1px solid #b6aaa7; border-radius: 3px; box-shadow: none; } .form-container .label-hidden { display: none; } .form-container .form-logo { max-width: 280px; display: block; margin: 0 auto 10px; } .form-container .form-logo img { max-width: 100%; } .form-container .form-date select { height: 30px; } .form-container .form-date .required-field { color: #ff2841; margin-right: 5px; } .form-container .form-title { text-align: center; font-size: 40px; margin-top: 40px; } .form-container .form-subtitle { text-align: center; margin-top: 15px; } .form-container .form-field-container { margin-top: 35px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .form-container .form-field-container .form-field { width: 50%; padding-right: 15px; margin-bottom: 40px; } .form-container .form-field-container .form-field label, .form-container .form-field-container .form-field .manager-approval { display: block; margin-bottom: 0; font-size: 11px; min-height: 40px; line-height: 20px; } .form-container .form-field-container .form-field label .required-field, .form-container .form-field-container .form-field .manager-approval .required-field { color: #ff2841; margin-right: 5px; } .form-container .form-field-container .form-field input, .form-container .form-field-container .form-field select { width: 100%; padding-left: 8px; } .form-container .form-field-container .form-field input.is-error, .form-container .form-field-container .form-field select.is-error { border: 1px solid #E0B4B4; background: #FFF6F6; } .form-container .form-field-container .form-field input.is-error ~ label:before, .form-container .form-field-container .form-field select.is-error ~ label:before { border: 1px solid #E0B4B4; background: #FFF6F6; } .form-container .form-field-container .form-field select { width: 100%; } @media screen and (max-width: 767px) { .form-container .form-field-container .form-field { width: 100%; } } .form-container .form-checkbox { position: relative; } .form-container .form-checkbox input[type='checkbox'] { width: 20px; height: 20px; background: #fff; cursor: pointer; position: absolute; top: 0px; left: 0px; opacity: 0; outline: none; z-index: 9; } .form-container .form-checkbox input[type='checkbox']:checked ~ label:before { background: #8cce37 none repeat scroll 0 0; border: 1px solid #3c9a47; } .form-container .form-checkbox input[type='checkbox']:checked ~ label:after { position: absolute; font-size: 10px; top: 6px; left: 5px; width: 13px; height: 10px; content: ''; background-image: url(../img/form_tick_white.png); color: white; background-repeat: no-repeat; background-size: contain; background-position: center center; } .form-container .form-checkbox input[type='checkbox']:focus ~ label:before { border: 2px solid #0d9be4; } .form-container .form-checkbox label { font-size: 15px; color: black; margin-right: 10px; padding-left: 28px; display: block; } .form-container .form-checkbox label:before { border: 1px solid #9A9A9A; position: absolute; top: 0px; left: 0px; width: 23px; height: 23px; content: ''; background: white; border-radius: 3px; } .form-container .form-terms-conditions { margin-top: 35px; font-size: 11px; } .form-container .form-terms-conditions .form-terms-list-title { margin-bottom: 15px; } .form-container .form-terms-conditions li { margin-bottom: 20px; line-height: 20px; } .form-container .form-terms-conditions .terms-conditions { font-size: 11px; line-height: 20px; padding-left: 40px; } .form-container .form-consent-agreement { font-weight: bold; font-size: 15px; margin-top: 30px; margin-bottom: 45px; line-height: 25px; } .form-container .form-error-message { border: 1px solid red; color: #ed1c24; background-color: #F3E6E7; box-shadow: none; padding: 20px 15px; margin-top: 35px; display: none; } .form-container .form-error-message p { margin-bottom: 0; opacity: 0.85; font-size: 13px; } .form-container .form-submitted-message { background: #f2f2f2; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; display: none; } .form-container .form-submitted-message-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .form-container .form-submitted-message-content .confirmed-tick { max-width: 50%; margin: 0 auto 25px; } .form-container .btn-submit { border: 1px solid #0d9be4; background: #0d9be4; border-radius: 3px; color: #fff; font-family: "HelveticaNeueLT-Bold"; font-size: 14px; line-height: 12px; width: 45.643153527%; display: block; padding: 16px 0 15px; text-align: center; margin: 0 auto; } .form-container .btn-submit a { color: #fff; } .form-container .form-year { height: 30px; width: 60px; padding-left: 8px; } .form-container select.is-error, .form-container .form-year.is-error { border: 1px solid #E0B4B4; background: #FFF6F6; } .form-radio { position: relative; } .form-radio [type="radio"]:checked, .form-radio [type="radio"]:not(:checked) { position: absolute; left: 0; opacity: 0; top: -17px; width: 50px !important; z-index: -9; } .form-radio [type="radio"]:checked + label, .form-radio [type="radio"]:not(:checked) + label { position: relative; padding-left: 28px; cursor: pointer; line-height: 20px; display: inline-block; font-size: 15px; } .form-radio [type="radio"]:checked + label:last-child, .form-radio [type="radio"]:not(:checked) + label:last-child { margin-left: 20px; } .form-radio [type="radio"]:checked + label:before, .form-radio [type="radio"]:not(:checked) + label:before { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 1px solid #ddd; border-radius: 100%; background: #fff; } .form-radio [type="radio"]:checked + label:after, .form-radio [type="radio"]:not(:checked) + label:after { content: ''; width: 12px; height: 12px; background: #8cce37; position: absolute; top: 3px; left: 3px; border-radius: 100%; transition: all 0.2s ease; } .form-radio [type="radio"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } .form-radio [type="radio"]:checked + label:after { opacity: 1; transform: scale(1); } .form-radio [type="radio"]:focus ~ label:before { border: 2px solid #0d9be4; } .release-form-container { width: 100%; max-width: 767px; margin: 0 auto; padding: 100px 15px; font-family: 'HelveticaNeueLT-Roman'; } .release-form-container strong { font-weight: bold; } .release-form-container p { font-size: 15px; line-height: 1.5; margin-bottom: 35px; } .release-form-container ul { padding: 15px 0 15px 30px; } .release-form-container ul li { list-style: disc; margin: 5px; line-height: 1.5; font-size: 15px; } .release-form-container ul li ul li { list-style: circle; } .release-form-container table { font-size: 14px; line-height: 1.5; text-align: center; border: 1px solid silver; width: 100%; } .release-form-container table tr { margin: 5px; } .release-form-container table th { font-weight: bold; padding: 5px; } @media screen and (max-width: 767px) { .release-form-container table th { padding: 1px; font-size: 12px; } } .release-form-container table td input { height: 30px; width: 60%; margin-bottom: 5px; } .release-form-container select, .release-form-container input { height: 45px; border: 1px solid #b6aaa7; border-radius: 3px; box-shadow: none; padding-left: 5px; } .release-form-container .label-hidden { display: none; } .release-form-container .form-logo { max-width: 280px; display: block; margin: 0 auto 10px; } .release-form-container .form-logo img { max-width: 100%; } .release-form-container .form-date select { height: 30px; } .release-form-container .form-date .required-field { color: #ff2841; margin-right: 5px; } .release-form-container .form-title { text-align: center; font-size: 40px; margin-top: 40px; } .release-form-container .form-subtitle { text-align: center; margin-top: 15px; } .release-form-container .form-field-container { margin-top: 20px; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .release-form-container .form-field-container .full-width { width: 100% !important; } .release-form-container .form-field-container .one3rd-width { width: 33.3% !important; } .release-form-container .form-field-container .form-field { width: 50%; padding-right: 3px; margin-bottom: 20px; float: left; } .release-form-container .form-field-container .form-field label, .release-form-container .form-field-container .form-field .manager-approval { display: block; margin-bottom: 0; font-size: 11px; min-height: 25px; line-height: 20px; } .release-form-container .form-field-container .form-field label .required-field, .release-form-container .form-field-container .form-field .manager-approval .required-field { color: #ff2841; margin-right: 5px; } .release-form-container .form-field-container .form-field input, .release-form-container .form-field-container .form-field select { width: 100%; padding-left: 5px; } .release-form-container .form-field-container .form-field input.is-error, .release-form-container .form-field-container .form-field select.is-error { border: 1px solid #E0B4B4; background: #FFF6F6; } .release-form-container .form-field-container .form-field input.is-error ~ label:before, .release-form-container .form-field-container .form-field select.is-error ~ label:before { border: 1px solid #E0B4B4; background: #FFF6F6; } .release-form-container .form-field-container .form-field select { width: 100%; } @media screen and (max-width: 767px) { .release-form-container .form-field-container .form-field { width: 100%; } } .release-form-container .form-field-container.half-width { width: 50% !important; display: block; } @media screen and (max-width: 767px) { .release-form-container .form-field-container.half-width { width: 100% !important; } } @media screen and (max-width: 767px) { .release-form-container .form-field-container { margin-top: 10px; } } .release-form-container .form-checkbox { position: relative; } .release-form-container .form-checkbox input[type='checkbox'] { width: 20px; height: 20px; background: #fff; cursor: pointer; position: absolute; top: 0px; left: 0px; opacity: 0; outline: none; z-index: 9; } .release-form-container .form-checkbox input[type='checkbox']:checked ~ label:before { background: #8cce37 none repeat scroll 0 0; border: 1px solid #3c9a47; } .release-form-container .form-checkbox input[type='checkbox']:checked ~ label:after { position: absolute; font-size: 10px; top: 6px; left: 5px; width: 13px; height: 10px; content: ''; background-image: url(../img/form_tick_white.png); color: white; background-repeat: no-repeat; background-size: contain; background-position: center center; } .release-form-container .form-checkbox input[type='checkbox']:focus ~ label:before { border: 2px solid #0d9be4; } .release-form-container .form-checkbox label { font-size: 15px; color: black; margin-right: 10px; padding-left: 28px; display: block; } .release-form-container .form-checkbox label:before { border: 1px solid #9A9A9A; position: absolute; top: 0px; left: 0px; width: 23px; height: 23px; content: ''; background: white; border-radius: 3px; } .release-form-container .form-terms-conditions { margin-top: 35px; font-size: 11px; } .release-form-container .form-terms-conditions .form-terms-list-title { margin-bottom: 15px; } .release-form-container .form-terms-conditions li { margin-bottom: 20px; line-height: 20px; } .release-form-container .form-terms-conditions .terms-conditions { font-size: 11px; line-height: 20px; padding-left: 40px; } .release-form-container .form-consent-agreement { font-weight: bold; font-size: 15px; margin-top: 30px; margin-bottom: 45px; line-height: 25px; } .release-form-container .form-error-message { border: 1px solid red; color: #ed1c24; background-color: #F3E6E7; box-shadow: none; padding: 20px 15px; margin-top: 35px; display: none; } .release-form-container .form-error-message p { margin-bottom: 0; opacity: 0.85; font-size: 13px; } .release-form-container .form-submitted-message { background: #f2f2f2; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; display: none; } .release-form-container .form-submitted-message-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .release-form-container .form-submitted-message-content .confirmed-tick { max-width: 50%; margin: 0 auto 25px; } .release-form-container .btn-submit { border: 1px solid #0d9be4; background: #0d9be4; border-radius: 3px; color: #fff; font-family: "HelveticaNeueLT-Bold"; font-size: 14px; line-height: 12px; width: 45.643153527%; display: block; padding: 16px 0 15px; text-align: center; margin: 0 auto; } .release-form-container .btn-submit a { color: #fff; } .release-form-container .form-year { height: 30px; width: 60px; padding-left: 8px; } .release-form-container input.is-error, .release-form-container select.is-error, .release-form-container .form-year.is-error { border: 1px solid #E0B4B4; background: #FFF6F6; } .form-radio { position: relative; } .form-radio [type="radio"]:checked, .form-radio [type="radio"]:not(:checked) { position: absolute; left: 0; opacity: 0; top: -17px; width: 50px !important; z-index: -9; } .form-radio [type="radio"]:checked + label, .form-radio [type="radio"]:not(:checked) + label { position: relative; padding-left: 28px; cursor: pointer; line-height: 20px; display: inline-block; font-size: 15px; } .form-radio [type="radio"]:checked + label:last-child, .form-radio [type="radio"]:not(:checked) + label:last-child { margin-left: 20px; } .form-radio [type="radio"]:checked + label:before, .form-radio [type="radio"]:not(:checked) + label:before { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 1px solid #ddd; border-radius: 100%; background: #fff; } .form-radio [type="radio"]:checked + label:after, .form-radio [type="radio"]:not(:checked) + label:after { content: ''; width: 12px; height: 12px; background: #8cce37; position: absolute; top: 3px; left: 3px; border-radius: 100%; transition: all 0.2s ease; } .form-radio [type="radio"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } .form-radio [type="radio"]:checked + label:after { opacity: 1; transform: scale(1); } .form-radio [type="radio"]:focus ~ label:before { border: 2px solid #0d9be4; } .view-special-offers-container { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; margin: 3px -5px 0 0; } @media screen and (min-width: 767px) { .view-special-offers-container { -ms-flex-pack: end; justify-content: flex-end; } } .trim-section .view-special-offers-container { -ms-flex-pack: end; justify-content: flex-end; } .trim-card .view-special-offers-container { -ms-flex-pack: end; justify-content: flex-end; } .view-special-offers-icon, .view-special-offers-link { color: #ff2841; } .view-special-offers-link { border: 0; background: none; padding: 0; cursor: pointer; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; font-family: "HelveticaNeueLT-Bold"; font-size: 14px; text-decoration: none; } @media screen and (min-width: 767px) { .view-special-offers-link { -ms-flex-pack: end; justify-content: flex-end; } } .trim-section .view-special-offers-link { -ms-flex-pack: end; justify-content: flex-end; font-size: 13px; padding: 0 0 0 5px; margin-right: 7px !important; } @media screen and (min-width: 767px) { .trim-section .view-special-offers-link { font-size: 14px; margin-right: 0 !important; } } .starting-from-container .view-special-offers-link { padding: 0 0 0 5px; } @media screen and (max-width: 767px) { .starting-from-container .view-special-offers-link { padding: 0; } } .trim-card .view-special-offers-link { padding: 0 0 0 5px; } .view-special-offers-link:hover span { text-decoration: underline; } .view-special-offers-icon { font-family: "Material Icons"; font-weight: normal; font-style: normal; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; font-size: 18px; line-height: 1; padding: 7px 2px 0 0; height: 24px; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; text-rendering: optimizeLegibility; -moz-font-feature-settings: 'liga'; font-feature-settings: 'liga'; transform: rotate(90deg); } .error-container .wrapper { margin-top: 90px !important; width: 982px; margin: 0 auto 11px; } @media screen and (max-width: 767px) { .error-container .wrapper { margin-top: 30px !important; } } .error-container .wrapper.lower { margin-top: 167px !important; } .error-container .honda-header { display: block !important; } .error-container .content-container { background: #fff; border: 1px solid #e1e1e1; border-radius: 6px; } .error-container h1 { font-family: "HelveticaNeueLT-Bold"; font-size: 38px; line-height: 30px; text-transform: uppercase; margin-bottom: 25px; color: #151515; } .error-container h2 { font-family: Verdana, Geneva, sans-serif; font-size: 18px; color: #c40020; font-weight: bold; line-height: 24px; margin-bottom: 20px; } .error-container p { font-family: HelveticaNeueLT-Roman; font-size: 11px; color: #333; line-height: 16px; margin-bottom: 20px; } .error-container a { font-family: Verdana, Geneva, sans-serif; text-decoration: none; cursor: pointer; color: #0d9be4; cursor: pointer; border-bottom: 1px solid transparent; } .error-container .section { border-top: 1px solid #e6e6e6; padding: 40px; }