/* This file was generated with Grunt using Compass - Last modification: Thu May 12th 2016, 11:25:21 AM *//* ------------------------ */ /* ---- GLOBAL STYLING ---- */ /* ------------------------ */ /* TOC 1. Imports & General 2. Footer 3. Showcase 4. Promotions */ /* 1. IMPORTS & GENERAL ------------------------------------------------ */ /* Mazda Project Global common used mixins The following file contains several mixings that can be used across the site. @author luis.corrales@possible.com, hugo.alvarez@possible.com @version 0.1 @created June 12th, 2013 @updated September 12th, 2014 @ToDo - Specify the places where each mixin is being used. */ /** Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you'll need vendor prefix CSS properties. */ /* Mazda Project Mazda VLP components File: _go_to_panel_button.scss @author sebastian.gamboa@possible.com @version 0.1 @created 08/09/2013 @updated 08/09/2013 */ /** * goToPanelButton * Red button at the beginning of each panel (VLP) */ /* line 56, home/gui/*.png */ .gui-sprite, .goToPanelButton div .gui-btn-nextPanel-on, .goToPanelButton div .gui-btn-nextPanel { background-image: url('/MusaWeb/musa2/images/home/gui.png'); background-repeat: no-repeat; } /* line 22, ../../scss/global/components/_go_to_panel_button.scss */ .goToPanelButton { display: block; position: relative; z-index: 15; top: -35px; left: 50%; overflow: hidden; width: 72px; height: 72px; margin: 0 auto 0 -35px; text-align: center; text-indent: -99999px; color: #d00000; line-height: 0px; padding: 0px; text-decoration: none; } /* line 39, ../../scss/global/components/_go_to_panel_button.scss */ .goToPanelButton sup { display: none; position: absolute; } /* line 44, ../../scss/global/components/_go_to_panel_button.scss */ .goToPanelButton div { display: block; width: 72px; height: 100%; position: relative; margin: 0 auto; } /* line 84, ../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .goToPanelButton div .gui-btn-nextPanel-on { background-position: 0 0; } /* line 84, ../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .goToPanelButton div .gui-btn-nextPanel { background-position: 0 -72px; } /* line 53, ../../scss/global/components/_go_to_panel_button.scss */ .goToPanelButton div span { display: block; width: 72px; height: 100%; position: absolute; top: 0; left: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; } /* line 65, ../../scss/global/components/_go_to_panel_button.scss */ .ie8 .goToPanelButton div span, .ie9 .goToPanelButton div span { filter: none; } /* line 69, ../../scss/global/components/_go_to_panel_button.scss */ .goToPanelButton div span.active { opacity: 0; filter: alpha(opacity=0); } /* line 72, ../../scss/global/components/_go_to_panel_button.scss */ .ie8 .goToPanelButton div span.active, .ie9 .goToPanelButton div span.active { filter: none; display: none; } /* line 81, ../../scss/global/components/_go_to_panel_button.scss */ .goToPanelButton:hover span.active { opacity: 1; filter: alpha(opacity=100); } /* line 84, ../../scss/global/components/_go_to_panel_button.scss */ .ie8 .goToPanelButton:hover span.active, .ie9 .goToPanelButton:hover span.active { filter: none; } /* line 18, ../../scss/home/r_home.scss */ html { overflow-y: auto; overflow-x: hidden; background-color: #333; } /* line 23, ../../scss/home/r_home.scss */ html body { background-color: #fff; } /* line 27, ../../scss/home/r_home.scss */ html .container-fluid { padding: 0; } /* HERO SLIDER ------------------------------------------------ */ /* ---------------------------- */ /* --- HOMEPAGE HERO SLIDER --- */ /* ---------------------------- */ /* line 8, ../../scss/home/panels/hero/_hero_slider.scss */ .hero-aspect-keeper { background-color: black; position: relative; width: 100%; } /* line 12, ../../scss/home/panels/hero/_hero_slider.scss */ .hero-aspect-keeper .tooltip-box-mobile.tooltip-opened { height: 50%; bottom: 0px; top: auto; } /* line 16, ../../scss/home/panels/hero/_hero_slider.scss */ .hero-aspect-keeper .tooltip-box-mobile.tooltip-opened .close-disclaimer-mobile-btn { margin-top: 12px; } /* line 20, ../../scss/home/panels/hero/_hero_slider.scss */ .hero-aspect-keeper:before { content: ""; display: block; padding-top: 68.389375%; } @media screen and (orientation: landscape) and (max-device-width: 767px) { /* line 20, ../../scss/home/panels/hero/_hero_slider.scss */ .hero-aspect-keeper:before { padding-top: 60.25%; } } @media (min-width: 768px) { /* line 20, ../../scss/home/panels/hero/_hero_slider.scss */ .hero-aspect-keeper:before { padding-top: 38.64%; } } /* line 35, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; padding: 0; margin: 0; } /* line 44, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero-disclaimer { width: 75px; } /* line 48, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .slidesjs-container { height: 100% !important; width: 100% !important; } /* line 51, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .slidesjs-container.tooltip-opened { z-index: 111; } @media (min-width: 420px) { /* line 51, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .slidesjs-container.tooltip-opened { z-index: 10; } } /* line 58, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .slidesjs-container .slidesjs-control { height: 100% !important; width: 100% !important; } /* line 61, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .slidesjs-container .slidesjs-control .slidesjs-slide { height: 100% !important; width: 100% !important; } /* line 68, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .slidesjs-pagination { margin-left: auto; margin-right: auto; position: relative; margin-top: -21.5%; width: 135px; z-index: 109; } @media screen and (orientation: landscape) and (max-device-width: 767px) { /* line 68, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .slidesjs-pagination { margin-top: -16%; } } @media (min-width: 768px) { /* line 68, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .slidesjs-pagination { margin-top: -3%; } } /* line 83, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .slidesjs-pagination li { margin: 0 1px; display: inline-block; } /* line 87, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .slidesjs-pagination li a { margin-left: 5px; margin-right: 5px; height: 0; width: 12px; float: left; cursor: pointer; padding-top: 12px; background: url(/MusaWeb/musa2/images/home/showcase/nav_dots_xs.png) no-repeat 0 0 transparent; overflow: hidden; } @media (min-width: 768px) { /* line 87, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .slidesjs-pagination li a { padding-top: 15px; width: 15px; background: url(/MusaWeb/musa2/images/home/showcase/nav_dots.png) no-repeat 0 0 transparent; } } /* line 105, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .slidesjs-pagination li a.active { background-position: 0px -12px; } @media (min-width: 768px) { /* line 105, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .slidesjs-pagination li a.active { background-position: 0px -15px; } } /* line 116, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero { padding-left: 0; padding-right: 0; position: absolute; top: 0; } /* line 122, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .container { height: 100%; } /* line 126, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero * { opacity: 100; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } /* line 129, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero *.hidden { display: block !important; opacity: 0 !important; } /* line 135, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .tooltip-box, #hero-slide-container .hero .row { z-index: 300; } /* line 139, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .hero-button { z-index: 100; } /* line 143, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .full-clickable-img { position: absolute; height: 100%; width: 100%; top: 0; left: 0; z-index: 10; background: rgba(0, 0, 0, 0.01) !important; /*MUSA-4423*/ } /* line 153, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .container { height: 100%; } /* line 157, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .tooltip-box-mobile { display: none; background: #1e1e1f; padding: 30px 8px 10px 10px; width: 296px; height: 129px; border-radius: 7px; min-width: 296px; max-width: 768px; min-height: 83px; background-color: #000; max-height: 768px; } /* line 170, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .tooltip-box-mobile .tooltip-text { font-size: 12px; color: #666; line-height: 15px; overflow: auto; height: 100%; padding: 10px; text-align: left; padding-top: 30px; } /* line 181, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .tooltip-box-mobile .close-hero-mobile-disclaimer { position: absolute; right: 2%; top: 3%; height: 20px; width: 20px; background: url("/MusaWeb/musa2/images/global/dealer_map/close.png") no-repeat; background-position: 0 0; } /* line 191, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .tooltip-box-mobile.tooltip-opened { display: block; } /* line 196, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .tooltip-mobile-disclaimer-inline { display: inline; cursor: pointer; color: #d00000; text-decoration: underline; display: inline !important; } @media (min-width: 768px) { /* line 196, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .tooltip-mobile-disclaimer-inline { display: none !important; } } /* line 208, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .background-image { position: absolute; display: block; width: 100%; height: 82.5%; } @media screen and (orientation: landscape) and (max-device-width: 767px) { /* line 208, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .background-image { margin-top: -4.8%; height: 98%; } } @media (min-width: 768px) { /* line 208, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .background-image { height: 100%; } } /* line 225, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .info-container { margin-top: 20px; z-index: 100; } /* line 229, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .info-container #hp_hero1 { margin: 0px; } @media screen and (min-width: 1024px) { /* line 232, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .info-container #hp_hero3 { margin-left: 0; } } /* line 240, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .info-container .header-line-1 h2 { color: #fff; font-size: 16px; font-family: interstate-bold, sans-serif, arial; letter-spacing: -0.05em; text-align: center; } @media all and (min-width: 480px) { /* line 240, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .info-container .header-line-1 h2 { font-size: 20px; } } @media all and (min-width: 768px) { /* line 240, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .info-container .header-line-1 h2 { font-size: 22px; text-align: left; } } @media all and (min-width: 992px) { /* line 240, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .info-container .header-line-1 h2 { font-size: 26px; } } @media all and (min-width: 1200px) { /* line 240, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .info-container .header-line-1 h2 { font-size: 32px; } } /* line 263, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .info-container .header-line-2 h4 { font-size: 9px; font-family: interstate-bold, sans-serif, arial; text-align: center; padding-top: 1%; padding-bottom: 1%; color: #999; } /* line 271, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .info-container .header-line-2 h4 white { color: #fff; } @media all and (min-width: 480px) { /* line 263, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .info-container .header-line-2 h4 { font-size: 11px; } } @media all and (min-width: 768px) { /* line 263, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .info-container .header-line-2 h4 { font-size: 12px; text-align: left; } } @media all and (min-width: 992px) { /* line 263, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .info-container .header-line-2 h4 { font-size: 14px; padding-top: 2%; } } @media all and (min-width: 1200px) { /* line 263, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .info-container .header-line-2 h4 { font-size: 16px; } } /* line 294, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .bottom-button-container { position: absolute; width: 100%; height: 18%; bottom: 0px; left: 0px; padding: 0; text-align: center; background: #d00000; text-decoration: none; } @media screen and (orientation: landscape) and (max-device-width: 767px) { /* line 294, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .bottom-button-container { height: 18%; margin-top: -4.8%; position: absolute; left: 0; } } /* line 313, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .bottom-button-container .hero-button { position: relative; width: 100%; display: block; background: none; padding: 0; margin: 0; font-size: 1em; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (min-device-width: 768px) { /* line 313, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .bottom-button-container .hero-button { font-size: 1.3em; } } /* line 331, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero:first-child { position: relative; } /* line 337, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container { width: 80%; } @media all and (min-width: 768px) { /* line 337, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container { width: 100%; } } /* line 344, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-1 { margin-top: 20px; } @media all and (min-width: 768px) { /* line 344, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-1 { margin-top: 0px; } } /* line 351, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-1 h2 { text-align: left; font-size: 12px; } @media (min-width: 480px) { /* line 351, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-1 h2 { font-size: 20px; margin-bottom: -1%; } } @media screen and (orientation: landscape) and (max-device-width: 767px) { /* line 351, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-1 h2 { font-size: 18px; margin-bottom: -1%; } } @media screen and (orientation: landscape) and (max-device-width: 568px) { /* line 351, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-1 h2 { font-size: 12px; margin-bottom: -1%; } } @media all and (min-width: 768px) { /* line 351, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-1 h2 { text-align: center; font-size: 18px; margin-bottom: -1%; } } @media all and (min-width: 850px) { /* line 351, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-1 h2 { font-size: 20px; } } @media all and (min-width: 930px) { /* line 351, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-1 h2 { font-size: 22px; } } @media all and (min-width: 992px) { /* line 351, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-1 h2 { font-size: 26px; margin-bottom: -1%; } } @media all and (min-width: 1200px) { /* line 351, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-1 h2 { font-size: 32px; margin-bottom: -1.5%; } } /* line 393, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-2 h4 { text-align: left; } @media screen and (orientation: landscape) and (max-device-width: 767px) { /* line 393, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-2 h4 { font-size: 10px; } } @media screen and (orientation: landscape) and (max-device-width: 568px) { /* line 393, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-2 h4 { font-size: 6px; } } @media (min-width: 480px) { /* line 393, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-2 h4 { font-size: 10px; } } @media all and (min-width: 768px) { /* line 393, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-2 h4 { font-size: 12px; text-align: center; } } @media all and (min-width: 992px) { /* line 393, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-2 h4 { font-size: 14px; } } @media all and (min-width: 1200px) { /* line 393, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero.mobile-left .info-container .header-line-2 h4 { font-size: 16px; } } /* line 428, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form { margin: 0; height: auto; } /* line 431, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .form-group { margin: 0px; } /* line 434, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .locate-dealer-input { float: left; width: 80%; height: 40px; font-size: 1.3em; border: none; color: #000; padding-left: 2%; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } /* line 444, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .locate-dealer-input::-webkit-input-placeholder { color: #000; } /* line 448, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .locate-dealer-input:-moz-placeholder { /* Firefox 18- */ color: #000; opacity: 1; } /* line 452, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .locate-dealer-input::-moz-placeholder { /* Firefox 19+ */ color: #000; opacity: 1; } /* line 456, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .locate-dealer-input:-ms-input-placeholder { color: #000; } /* line 461, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .error-input { border: 1px solid #d00000; } /* line 464, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .error-input::-webkit-input-placeholder { color: #d00000; } /* line 467, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .error-input:-moz-placeholder { /* Firefox 18- */ color: #d00000; } /* line 470, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .error-input::-moz-placeholder { /* Firefox 19+ */ color: #d00000; } /* line 473, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .error-input:-ms-input-placeholder { color: #d00000; } /* line 476, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .locate-dealer-button { color: #990000; float: right; background-color: #fff; width: 20%; height: 40px; font-size: 1.4em; border: none; } /* line 485, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .form-error { top: 0; background: #fff; } /* line 490, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .go-button { height: 100%; width: 100%; background-color: #333; text-decoration: none; display: inline-block; padding-left: 3px; padding-right: 3px; color: #999; cursor: pointer; position: relative; } /* line 502, ../../scss/home/panels/hero/_hero_slider.scss */ .locate-dealer-mobile .locate-dealer-form .go-button .vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top: 28%; } /* line 511, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .hero-button.aligned-button { position: absolute; top: 76%; margin-left: -5em; left: 50%; } @media (min-width: 992px) { /* line 511, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .hero-button.aligned-button { top: 75.1%; margin-left: -4.6em; } } @media (min-width: 1200px) { /* line 511, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .hero-button.aligned-button { top: 73.5%; margin-left: -5.2em; } } @media (min-width: 1501px) { /* line 511, ../../scss/home/panels/hero/_hero_slider.scss */ #hero-slide-container .hero .hero-button.aligned-button { top: 77.5%; margin-left: -5.2em; } } /* line 3, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container { text-align: center; position: absolute; left: 0; top: -6%; /*** MUSA-5336 before: -2% */ } @media (min-width: 480px) { /* line 3, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container { top: -1em; } } @media screen and (orientation: landscape) and (max-device-width: 767px) { /* line 3, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container { top: -3.5%; } } @media screen and (orientation: landscape) and (max-device-width: 520px) { /* line 3, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container { top: -1.5%; } } @media (min-width: 768px) { /* line 3, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container { top: -2%; } } @media (min-width: 1024px) { /* line 3, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container { top: 1%; } } @media (min-width: 1200px) { /* line 3, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container { top: 1%; } } /* line 33, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-1 { width: 100%; } /* line 37, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-1 h2 { text-align: center; font-size: 14px; color: #fff; margin-bottom: -1%; } @media (min-width: 480px) { /* line 37, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-1 h2 { font-size: 20px; margin-bottom: -1%; } } @media screen and (orientation: landscape) and (max-device-width: 767px) { /* line 37, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-1 h2 { font-size: 18px; margin-bottom: -1%; } } @media screen and (orientation: landscape) and (max-device-width: 568px) { /* line 37, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-1 h2 { font-size: 12px; margin-bottom: -1%; } } @media all and (min-width: 768px) { /* line 37, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-1 h2 { font-size: 22px; margin-bottom: -1%; } } @media all and (min-width: 992px) { /* line 37, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-1 h2 { font-size: 26px; margin-bottom: -1%; } } @media all and (min-width: 1200px) { /* line 37, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-1 h2 { font-size: 32px; margin-bottom: -1.5%; } } /* line 71, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-1 span { color: #000; font-family: interstate-bold, sans-serif, arial; } /* line 77, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-2 { width: 100%; float: center; } /* line 81, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-2 h4 { text-align: center; font-size: 8px; margin-top: 3%; margin-bottom: 1.3%; } @media screen and (orientation: landscape) and (max-device-width: 767px) { /* line 81, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-2 h4 { font-size: 10px; } } @media screen and (orientation: landscape) and (max-device-width: 568px) { /* line 81, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-2 h4 { font-size: 6px; } } @media (min-width: 480px) { /* line 81, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-2 h4 { font-size: 10px; } } @media all and (min-width: 768px) { /* line 81, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-2 h4 { font-size: 12px; } } @media all and (min-width: 992px) { /* line 81, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-2 h4 { font-size: 14px; margin-top: 0; margin-bottom: 1%; } } @media all and (min-width: 1200px) { /* line 81, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-2 h4 { font-size: 16px; } } /* line 112, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .info-container .header-line-2 h4 .hero-disclaimer { text-align: left; } /* line 119, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .button-cointainer-center { display: block; width: 100%; top: 27%; position: absolute; left: 0; } @media all and (min-width: 1200px) { /* line 119, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .button-cointainer-center { top: 25%; } } /* line 134, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .button-cointainer-center .hero-button { position: relative; } /* line 139, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .split-mobile { display: block; } @media (min-width: 768px) { /* line 139, ../../scss/home/panels/hero/templates/_template3.scss */ #hero-slide-container .hero.template-3 .split-mobile { display: inline; } } /* line 3, ../../scss/home/panels/hero/templates/_template1.scss */ #hero-slide-container .hero.template-1 .info-container { margin-top: 1%; } @media (min-width: 500px) { /* line 3, ../../scss/home/panels/hero/templates/_template1.scss */ #hero-slide-container .hero.template-1 .info-container { margin-top: 2%; } } @media (min-width: 768px) { /* line 3, ../../scss/home/panels/hero/templates/_template1.scss */ #hero-slide-container .hero.template-1 .info-container { float: right; width: 80%; margin-right: 6.8%; } } @media (min-width: 1024px) { /* line 3, ../../scss/home/panels/hero/templates/_template1.scss */ #hero-slide-container .hero.template-1 .info-container { margin-right: auto; } } /* line 16, ../../scss/home/panels/hero/templates/_template1.scss */ #hero-slide-container .hero.template-1 .info-container h2, #hero-slide-container .hero.template-1 .info-container h4 { color: #000; font-family: interstate-light, interstatemazda-light, sans-serif, arial; } @media (min-width: 768px) { /* line 16, ../../scss/home/panels/hero/templates/_template1.scss */ #hero-slide-container .hero.template-1 .info-container h2, #hero-slide-container .hero.template-1 .info-container h4 { text-align: right; } } @media (min-width: 768px) { /* line 24, ../../scss/home/panels/hero/templates/_template1.scss */ #hero-slide-container .hero.template-1 .info-container .header-line-1 h2 { letter-spacing: 5px; } } @media (min-width: 1200px) { /* line 24, ../../scss/home/panels/hero/templates/_template1.scss */ #hero-slide-container .hero.template-1 .info-container .header-line-1 h2 { letter-spacing: 7px; } } /* line 33, ../../scss/home/panels/hero/templates/_template1.scss */ #hero-slide-container .hero.template-1 .info-container .header-line-2 { margin-bottom: 1%; } /* line 35, ../../scss/home/panels/hero/templates/_template1.scss */ #hero-slide-container .hero.template-1 .info-container .header-line-2 h4 { font-family: interstate-bold; } @media (min-width: 768px) { /* line 35, ../../scss/home/panels/hero/templates/_template1.scss */ #hero-slide-container .hero.template-1 .info-container .header-line-2 h4 { letter-spacing: 2.3px; padding-top: 0.5%; padding-bottom: 2.5%; } } /* line 3, ../../scss/home/panels/hero/templates/_template4.scss */ #hero-slide-container .hero.template-4 .info-container { margin-top: 1.5%; } /* line 5, ../../scss/home/panels/hero/templates/_template4.scss */ #hero-slide-container .hero.template-4 .info-container .hero-button { margin: auto !important; display: block; text-align: center; width: 200px; } @media (min-width: 1200px) { /* line 5, ../../scss/home/panels/hero/templates/_template4.scss */ #hero-slide-container .hero.template-4 .info-container .hero-button { width: 27%; } } /* line 14, ../../scss/home/panels/hero/templates/_template4.scss */ #hero-slide-container .hero.template-4 .info-container .header-line-1 h2 { font-family: interstate-light, sans-serif, arial; } @media (min-width: 768px) { /* line 14, ../../scss/home/panels/hero/templates/_template4.scss */ #hero-slide-container .hero.template-4 .info-container .header-line-1 h2 { letter-spacing: 0.22em; } } /* line 20, ../../scss/home/panels/hero/templates/_template4.scss */ #hero-slide-container .hero.template-4 .info-container .header-line-2 h4 { padding: 1% 0px; font-family: interstate; } /* line 26, ../../scss/home/panels/hero/templates/_template4.scss */ #hero-slide-container .hero.template-4 .info-container .header-line-2 { max-width: 82%; margin: auto; } @media (min-width: 868px) { /* line 26, ../../scss/home/panels/hero/templates/_template4.scss */ #hero-slide-container .hero.template-4 .info-container .header-line-2 { max-width: 72%; } } /* line 35, ../../scss/home/panels/hero/templates/_template4.scss */ #hero-slide-container .hero.template-4 .header-line-1 h2, #hero-slide-container .hero.template-4 .header-line-2 h4 { color: #333333; text-align: center; } /* line 3, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container { padding-top: 3%; } @media all and (min-width: 768px) { /* line 3, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container { padding-top: 3%; } } @media screen and (orientation: landscape) and (max-device-width: 767px) { /* line 3, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container { padding-top: 3%; } } @media (max-width: 667px) { /* line 15, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .black-fonts h1 { color: #000000 !important; } /* line 16, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .black-fonts h2 { color: #000000 !important; } /* line 17, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .black-fonts h4 { color: #000000 !important; } /* line 19, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .black-fonts h4 small { color: #000000 !important; } } @media (max-width: 480px) { /* line 26, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .black-fonts h1 { color: #000000 !important; } /* line 27, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .black-fonts h2 { color: #000000 !important; } /* line 28, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .black-fonts h4 { color: #000000 !important; } /* line 30, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .black-fonts h4 small { color: #000000 !important; } } /* line 38, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container { margin-top: 0; } /* line 41, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-1 { width: 100%; } /* line 43, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-1 h1 { font-family: interstate,Arial,sans-serif; letter-spacing: 8px; text-align: center; font-size: 72px; letter-spacing: 24px; margin-bottom: -51px; color: #fff; } @media (min-width: 1500px) and (max-width: 1900px) { /* line 43, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-1 h1 { font-size: 61px; margin-bottom: -34px; } } @media (min-width: 1300px) and (max-width: 1500px) { /* line 43, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-1 h1 { font-size: 56px; margin-bottom: -24px; } } @media (min-width: 1024px) and (max-width: 1300px) { /* line 43, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-1 h1 { font-size: 50px; margin-bottom: -20px; } } @media (min-width: 768px) and (max-width: 1024px) { /* line 43, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-1 h1 { font-size: 42px; margin-bottom: -16px; letter-spacing: 20px; } } @media (min-width: 480px) and (max-width: 768px) { /* line 43, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-1 h1 { font-size: 32px; margin-bottom: -16px; letter-spacing: 14px; } } @media (max-width: 480px) { /* line 43, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-1 h1 { font-size: 22px; margin-bottom: 0px; letter-spacing: 10px; } } /* line 78, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-1 h1 small { font-size: 10px; color: #fff; vertical-align: top; line-height: 16px; margin-left: -6px; } /* line 87, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-1 h2 { text-align: center; font-size: 1.3em; font-family: interstate-light, sans-serif, arial; letter-spacing: 0.12em !important; color: #000; } @media (min-width: 480px) { /* line 87, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-1 h2 { font-size: 1.8em; margin: auto; } } @media (min-width: 768px) { /* line 87, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-1 h2 { margin-top: 1.3%; color: #fff; font-size: 1.45em; } } @media (min-width: 1200px) { /* line 87, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-1 h2 { font-size: 2.75em; margin-top: 1.2%; } } /* line 111, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-1 span { color: #000; font-family: interstate-bold, sans-serif, arial; } /* line 118, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-2 { width: 100%; float: center; } /* line 122, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-2 h4 { text-align: center; font-family: interstate-light, sans-serif, arial; letter-spacing: 0.17em !important; color: #000; font-size: 0.75em; } @media (min-width: 480px) { /* line 122, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-2 h4 { font-size: 1.2em; padding-top: 0.4%; } } @media (min-width: 768px) { /* line 122, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-2 h4 { color: #fff; font-size: 1em; margin-top: 0.3%; } } @media (min-width: 1200px) { /* line 122, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-2 h4 { font-size: 1.7em; margin-top: 0.5%; } } /* line 145, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .info-container .header-line-2 h4 .hero-disclaimer { text-align: left; } /* line 152, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .bottom-hero { position: relative; } @media (min-width: 1900px) { /* line 152, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .bottom-hero { top: 70%; } } @media (min-width: 1500px) and (max-width: 1900px) { /* line 152, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .bottom-hero { top: 65%; } } @media (min-width: 1300px) and (max-width: 1500px) { /* line 152, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .bottom-hero { top: 60%; } } @media (min-width: 1024px) and (max-width: 1300px) { /* line 152, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .bottom-hero { top: 56%; } } @media (min-width: 768px) and (max-width: 1024px) { /* line 152, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .bottom-hero { top: 52%; } } @media (min-width: 480px) and (max-width: 767px) { /* line 152, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .bottom-hero { top: 0%; } } /* line 172, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .bottom-hero .spacer { visibility: hidden; display: block; } /* line 176, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .bottom-hero h4 { text-align: center; font-family: interstate-light, sans-serif, arial; color: #000; font-size: 0.73em; } @media (min-width: 480px) { /* line 176, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .bottom-hero h4 { font-size: 0.95em; } } @media (min-width: 768px) { /* line 176, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .bottom-hero h4 { color: #fff; margin-top: 1.4%; margin-bottom: 2%; font-size: 0.9em; letter-spacing: 0.11em; } } @media (min-width: 1200px) { /* line 176, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .bottom-hero h4 { margin-top: -1.2%; margin-bottom: 1.7%; font-size: 1.72em; letter-spacing: 0.11em; } } /* line 201, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .bottom-hero h4 small { color: #000; font-size: 100%; } @media (min-width: 768px) { /* line 201, ../../scss/home/panels/hero/templates/_template9.scss */ #hero-slide-container .hero.template-9 .container .bottom-hero h4 small { color: #fff; } } /* line 215, ../../scss/home/panels/hero/templates/_template9.scss */ .touch #hero-slide-container .hero.template-9 .container .info-container .header-line-1 h1 { font-size: 20px !important; margin-bottom: 0px; letter-spacing: 10px !important; } @media screen and (orientation: landscape) { /* line 222, ../../scss/home/panels/hero/templates/_template9.scss */ .touch #hero-slide-container .hero.template-9 .container .bottom-hero h4 { color: #ffffff; } } @media screen and (max-width: 480px) { /* line 227, ../../scss/home/panels/hero/templates/_template9.scss */ .touch #hero-slide-container .hero.template-9 .container .bottom-hero h4 { margin-top: 0%; } } @media screen and (orientation: portrait) { /* line 220, ../../scss/home/panels/hero/templates/_template9.scss */ .touch #hero-slide-container .hero.template-9 .container .bottom-hero { top: 2%; } } /* line 236, ../../scss/home/panels/hero/templates/_template9.scss */ .touch #hero-slide-container .hero.template-9 .container .info-container .header-line-2 { color: #ffffff; } @media screen and (orientation: portrait) { /* line 236, ../../scss/home/panels/hero/templates/_template9.scss */ .touch #hero-slide-container .hero.template-9 .container .info-container .header-line-2 { padding-bottom: 18%; } } @media screen and (max-width: 480px) { /* line 236, ../../scss/home/panels/hero/templates/_template9.scss */ .touch #hero-slide-container .hero.template-9 .container .info-container .header-line-2 { padding-bottom: 0%; } } @media screen and (max-width: 667px) { /* line 236, ../../scss/home/panels/hero/templates/_template9.scss */ .touch #hero-slide-container .hero.template-9 .container .info-container .header-line-2 { padding-bottom: 0%; } } /* line 250, ../../scss/home/panels/hero/templates/_template9.scss */ .touch #hero-slide-container .hero.template-9 .container .info-container .header-line-1 h1 { color: #ffffff; text-align: center; font-size: 42px; letter-spacing: 22px; } /* line 5, ../../scss/home/panels/hero/customs/_custom1.scss */ #hero-slide-container .hero.hero-custom-1 .container .info-container .header-line-1 h2 { color: #fff; font-family: interstate-light, sans-serif, arial; } @media (max-width: 479px) { /* line 5, ../../scss/home/panels/hero/customs/_custom1.scss */ #hero-slide-container .hero.hero-custom-1 .container .info-container .header-line-1 h2 { padding: 0 15%; } } @media (min-width: 480px) { /* line 5, ../../scss/home/panels/hero/customs/_custom1.scss */ #hero-slide-container .hero.hero-custom-1 .container .info-container .header-line-1 h2 { width: 76%; } } @media (min-width: 584px) { /* line 5, ../../scss/home/panels/hero/customs/_custom1.scss */ #hero-slide-container .hero.hero-custom-1 .container .info-container .header-line-1 h2 { width: 61%; } } @media (min-width: 720px) { /* line 5, ../../scss/home/panels/hero/customs/_custom1.scss */ #hero-slide-container .hero.hero-custom-1 .container .info-container .header-line-1 h2 { width: 50%; } } @media (min-width: 768px) { /* line 5, ../../scss/home/panels/hero/customs/_custom1.scss */ #hero-slide-container .hero.hero-custom-1 .container .info-container .header-line-1 h2 { width: 100%; font-size: 1.7em; margin-top: -1%; margin-bottom: 1%; } } @media (min-width: 1200px) { /* line 5, ../../scss/home/panels/hero/customs/_custom1.scss */ #hero-slide-container .hero.hero-custom-1 .container .info-container .header-line-1 h2 { font-size: 2.3em; margin-top: 0; margin-bottom: 0; } } /* line 38, ../../scss/home/panels/hero/customs/_custom1.scss */ #hero-slide-container .hero.hero-custom-1 .container .info-container .header-line-2 h4 { color: #fff; } @media (min-width: 768px) { /* line 38, ../../scss/home/panels/hero/customs/_custom1.scss */ #hero-slide-container .hero.hero-custom-1 .container .info-container .header-line-2 h4 { font-size: 1.2em; } } @media (min-width: 1200px) { /* line 38, ../../scss/home/panels/hero/customs/_custom1.scss */ #hero-slide-container .hero.hero-custom-1 .container .info-container .header-line-2 h4 { font-size: 1.4em; margin-top: 0.2%; } } /* line 51, ../../scss/home/panels/hero/customs/_custom1.scss */ #hero-slide-container .hero.hero-custom-1 .container .info-container .bottom-hero .spacer { visibility: hidden; display: block !important; } /* line 5, ../../scss/home/panels/hero/customs/_custom3.scss */ #hero-slide-container .hero.hero-custom-3 .container .info-container .header-line-1 h2 { color: #fff; font-family: interstate-light, sans-serif, arial; font-size: 1.5em; margin-top: 2%; letter-spacing: 0.12em; } @media screen and (orientation: landscape) and (max-device-width: 767px) { /* line 5, ../../scss/home/panels/hero/customs/_custom3.scss */ #hero-slide-container .hero.hero-custom-3 .container .info-container .header-line-1 h2 { font-size: 2em; } } @media screen and (orientation: landscape) and (max-device-width: 568px) { /* line 5, ../../scss/home/panels/hero/customs/_custom3.scss */ #hero-slide-container .hero.hero-custom-3 .container .info-container .header-line-1 h2 { font-size: 2em; } } @media (min-width: 480px) { /* line 5, ../../scss/home/panels/hero/customs/_custom3.scss */ #hero-slide-container .hero.hero-custom-3 .container .info-container .header-line-1 h2 { font-size: 2.08em; margin-top: 0; } } @media (min-width: 768px) { /* line 5, ../../scss/home/panels/hero/customs/_custom3.scss */ #hero-slide-container .hero.hero-custom-3 .container .info-container .header-line-1 h2 { font-size: 2.2em; margin-top: 0; } } @media (min-width: 992px) { /* line 5, ../../scss/home/panels/hero/customs/_custom3.scss */ #hero-slide-container .hero.hero-custom-3 .container .info-container .header-line-1 h2 { font-size: 2.8em; } } @media (min-width: 1200px) { /* line 5, ../../scss/home/panels/hero/customs/_custom3.scss */ #hero-slide-container .hero.hero-custom-3 .container .info-container .header-line-1 h2 { font-size: 3.4em; } } /* line 36, ../../scss/home/panels/hero/customs/_custom3.scss */ #hero-slide-container .hero.hero-custom-3 .container .info-container .header-line-2 h4 { color: #fff; font-weight: normal; font-size: 1.1em; margin-top: 1%; letter-spacing: 0.1em; } @media screen and (orientation: landscape) and (max-device-width: 767px) { /* line 36, ../../scss/home/panels/hero/customs/_custom3.scss */ #hero-slide-container .hero.hero-custom-3 .container .info-container .header-line-2 h4 { font-size: 1.5em; } } @media screen and (orientation: landscape) and (max-device-width: 568px) { /* line 36, ../../scss/home/panels/hero/customs/_custom3.scss */ #hero-slide-container .hero.hero-custom-3 .container .info-container .header-line-2 h4 { font-size: 1.5em; } } @media (min-width: 480px) { /* line 36, ../../scss/home/panels/hero/customs/_custom3.scss */ #hero-slide-container .hero.hero-custom-3 .container .info-container .header-line-2 h4 { font-size: 1.5em; margin-top: 1%; } } @media (min-width: 768px) { /* line 36, ../../scss/home/panels/hero/customs/_custom3.scss */ #hero-slide-container .hero.hero-custom-3 .container .info-container .header-line-2 h4 { font-size: 1.03em; margin-top: 0.5%; } } @media (min-width: 992px) { /* line 36, ../../scss/home/panels/hero/customs/_custom3.scss */ #hero-slide-container .hero.hero-custom-3 .container .info-container .header-line-2 h4 { font-size: 1.3em; margin-top: 0; padding-top: 1.5%; padding-bottom: 2%; } } @media (min-width: 1200px) { /* line 36, ../../scss/home/panels/hero/customs/_custom3.scss */ #hero-slide-container .hero.hero-custom-3 .container .info-container .header-line-2 h4 { font-size: 1.6em; padding-top: 2%; } } @media (min-width: 768px) and (max-width: 800px) { /* line 4, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container { top: -1em !important; } /* line 6, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-1 h2 { font-size: 20px; } /* line 9, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-2 h4 { margin-bottom: 2%; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { /* line 18, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-2 { width: 85%; margin: auto; } } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* line 29, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-1 h2 { margin-top: 0; } /* line 32, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-2 h4 { letter-spacing: 2.5px !important; margin-bottom: 2%; } } /* line 38, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container { top: 0.5em; } /* line 40, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-1 h2 { font-family: interstate-light, interstatemazda-light, sans-serif, arial; color: #fff; letter-spacing: 0.08em; } /* line 45, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-2 h4 { font-family: interstate-regular, interstatemazda-regular, sans-serif, arial; color: #fff; } /* line 49, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-2 h4 small { font-size: 70%; vertical-align: top; color: #fff; font-weight: bold; } @media (min-width: 480px) { /* line 58, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-1 h2 { font-size: 18px; } } @media (min-width: 1200px) { /* line 64, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-1 h2 { font-size: 37px; } } @media only screen and (max-device-width: 360px) and (orientation: portrait) { /* line 72, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-1 h2 { font-size: 12px; } } @media screen and (orientation: landscape) and (max-device-width: 767px) { /* line 78, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-1 h2 { font-size: 22px; } /* line 81, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-2 h4 { font-size: 13px; } } @media screen and (orientation: landscape) and (max-device-width: 568px) { /* line 86, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-1 h2 { font-size: 20px; } /* line 89, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-2 h4 { font-size: 12px; } } @media (min-width: 768px) { /* line 95, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-1 h2 { letter-spacing: 6px; } /* line 98, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-2 h4 { margin-top: 5px; letter-spacing: 4.3px; font-size: 12px; } /* line 103, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .red-button { font-size: 13px; } } @media (min-width: 1200px) { /* line 109, ../../scss/home/panels/hero/customs/_custom5.scss */ #hero-slide-container .hero.hero-custom-5 .info-container .header-line-2 h4 { margin-top: 5px; letter-spacing: 4.3px; font-size: 16px; } } /* PROMOTIONS ------------------------------------------------ */ /* --------------------------- */ /* --- HOMEPAGE PROMOTIONS --- */ /* --------------------------- */ /* line 5, ../../scss/home/panels/_promotions.scss */ #home_promo { background: url("/MusaWeb/musa2/images/home/promo/dt_hp_promo_bg.jpg"); background-color: #850303; background-size: 50% 100%; background-repeat: no-repeat; background-position: right; max-height: 400px; } /* line 13, ../../scss/home/panels/_promotions.scss */ #home_promo .promo { padding-top: 5%; padding-bottom: 6%; /* ------------------------ */ /* THIS IS A FIX FOR THE PROMOS IN HP */ /* ------------------------ */ } /* line 17, ../../scss/home/panels/_promotions.scss */ #home_promo .promo .promo-link { text-decoration: none; display: block; position: relative; max-width: 295px; margin: 0 auto; } /* line 24, ../../scss/home/panels/_promotions.scss */ #home_promo .promo .promo-link .image-container { height: auto; width: auto; position: relative; background-color: red; } /* line 30, ../../scss/home/panels/_promotions.scss */ #home_promo .promo .promo-link .image-container .img-rollover { background: #d00000; display: block; width: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; opacity: 0.8; filter: alpha(opacity=80); } /* line 41, ../../scss/home/panels/_promotions.scss */ #home_promo .promo .promo-link h5 { color: #fff; font: 11.5px interstate-bold, sans-serif, arial; padding: 4% 0; } @media (min-width: 1024px) { /* line 41, ../../scss/home/panels/_promotions.scss */ #home_promo .promo .promo-link h5 { font: 15px interstate-bold, sans-serif, arial; padding: 6% 0; } } /* line 52, ../../scss/home/panels/_promotions.scss */ #home_promo .promo .promo-link p { font: 12px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif, arial; color: #ccc; } @media (min-width: 1024px) { /* line 52, ../../scss/home/panels/_promotions.scss */ #home_promo .promo .promo-link p { font: 13px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif, arial; } } /* line 63, ../../scss/home/panels/_promotions.scss */ .csstransitions #home_promo .promo .promo-link:hover .image-container .img-rollover { opacity: 1; filter: alpha(opacity=100); } /* line 69, ../../scss/home/panels/_promotions.scss */ #home_promo .promo .promo-link #eAccessoryDealerSearch { padding: 0px 5px; } /* line 72, ../../scss/home/panels/_promotions.scss */ #home_promo .promo .promo-link #eAccessoryDealerSearch #accessory-search { display: block; float: left; background-color: #670001; padding: 5px 10px; border: none; font: 12px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif, arial; color: #ccc; outline: 0; margin-right: 2%; width: 55%; } @media (min-width: 1024px) { /* line 72, ../../scss/home/panels/_promotions.scss */ #home_promo .promo .promo-link #eAccessoryDealerSearch #accessory-search { font: 13px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif, arial; } } /* line 89, ../../scss/home/panels/_promotions.scss */ #home_promo .promo .promo-link #eAccessoryDealerSearch #submit { display: block; float: right; font: 0.9em "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif, arial; outline: 0; border: none; margin-top: 0px; padding: 7px 8%; } @media (min-width: 992px) { /* line 89, ../../scss/home/panels/_promotions.scss */ #home_promo .promo .promo-link #eAccessoryDealerSearch #submit { padding: 7px 10%; } } /* line 103, ../../scss/home/panels/_promotions.scss */ #home_promo .promo .promo-link #eAccessoryDealerSearch .accessory-error { text-align: left; padding-top: 30px; color: #cc0000; } /* line 115, ../../scss/home/panels/_promotions.scss */ #home_promo .promo:first-child .promo-link { margin: 0; } /* line 121, ../../scss/home/panels/_promotions.scss */ #home_promo .promo:last-child .promo-link { margin: 0 0 0 auto; } /* VEHICLES PANEL ------------------------------------------------ */ /* ------------------------- */ /* --- HOMEPAGE VEHICLES --- */ /* ------------------------- */ /* line 5, ../../scss/home/panels/_vehicles.scss */ #vehicle-container { background-color: #eee; } /* line 8, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .title { font-size: 1.3em; font-weight: bold; letter-spacing: 0.1em; color: #000; } @media (max-width: 767px) { /* line 16, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb-style { position: absolute; width: 50%; height: 100%; z-index: 100; margin-left: -3.5%; max-width: 205px; } } @media (min-width: 480px) and (max-width: 767px) { /* line 16, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb-style { margin-left: calc(48vw - 205px); } } /* line 31, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .link-to-vlp { position: relative; display: block; } @media (min-width: 768px) { /* line 31, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .link-to-vlp { padding-top: 40%; } } @media (min-width: 992px) { /* line 31, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .link-to-vlp { padding-top: 35%; } } @media (min-width: 1200px) { /* line 31, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .link-to-vlp { padding-top: 30%; } } /* line 45, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb { color: #333; border-top: solid; border-top-width: 1px; border-top-color: #ccc; border-bottom: solid; border-bottom-width: 1px; border-bottom-color: #fff; cursor: pointer; width: 100vw; /*left: calc(-50vw + 50%); MUSA-4629*/ } @media (min-width: 768px) { /* line 45, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb { height: 210px; } } /* line 60, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .car-type-title { text-align: left; margin: 5px 0 0 6%; font-weight: bold; } @media (min-width: 768px) { /* line 60, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .car-type-title { height: 10px; margin: 0 0 5px 6%; } } @media (min-width: 768px) { /* line 45, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb { cursor: initial; border: none; width: 25%; left: 0; } } /* line 78, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .car-thumb-event { width: 100%; height: auto; } /* line 82, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .car-thumb-img { margin-left: 14px; max-width: 205px; width: 100%; } @media (min-width: 480px) and (max-width: 767px) { /* line 82, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .car-thumb-img { margin-left: calc(48vw - 205px); } } @media (min-width: 768px) { /* line 82, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .car-thumb-img { padding-left: 0px; padding-right: 0px; margin-left: -11px; position: absolute; top: 0; width: 100%; } } @media (min-width: 992px) { /* line 82, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .car-thumb-img { width: 83%; } } /* line 104, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .info-text { text-align: left; padding-top: 2%; padding-bottom: 2%; z-index: 12; } @media (max-width: 767px) { /* line 104, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .info-text { margin-left: -4%; padding-right: 0; } } @media (min-width: 768px) { /* line 104, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .info-text { padding-top: 3%; padding-bottom: 0px; } } /* line 120, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .info-text h6 { font-size: 1.25em; color: #d00000; font-weight: bold; text-transform: uppercase; } /* line 127, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .info-text .price { color: #000; font-weight: bold; padding-bottom: 3%; } /* line 133, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .info-text .description { color: #555; font-size: 95%; } /* line 139, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .dim-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #eeeeee; opacity: 0.6; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; display: block; z-index: 100; } /* line 151, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .dim-overlay.hidden { opacity: 0; display: block !important; } /* line 157, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .hero-button { display: none; margin-bottom: 1em; font-family: interstate, sans-serif, arial; text-transform: uppercase; font-size: 0.9em; padding: 0.7em 5%; width: 40%; text-align: center; } @media (min-width: 768px) { /* line 157, ../../scss/home/panels/_vehicles.scss */ #vehicle-container .vehicle-wrapper .car-thumb .hero-button { display: inline-block !important; } } /* line 175, ../../scss/home/panels/_vehicles.scss */ #promo-mobile { background-color: white; border-top: 1px solid #CCC; } /* line 180, ../../scss/home/panels/_vehicles.scss */ #promo-mobile a { text-decoration: none; } /* line 184, ../../scss/home/panels/_vehicles.scss */ #promo-mobile .promo-inside { width: 100%; height: 90px; display: block; margin: 0 auto; } /* line 192, ../../scss/home/panels/_vehicles.scss */ #promo-mobile .promo-inside h4 { font-size: 1.3em; color: #d00000; font-weight: bold; text-transform: uppercase; text-align: left; font-family: Arial,Helvetica,sans-serif; padding-top: 15px; padding-bottom: 10px; letter-spacing: -.05em; } /* line 205, ../../scss/home/panels/_vehicles.scss */ #promo-mobile .promo-inside p { color: #555; font-size: 95%; line-height: 15px; text-align: left; } /* line 212, ../../scss/home/panels/_vehicles.scss */ #promo-mobile .promo-inside img.car-promo-img { position: absolute; top: 5px; left: 52vw; width: 50%; max-width: 150px; } /*margin-top: -7px;*/ /*padding-bottom: 7px;*/ /* CTA PANEL ------------------------------------------------ */ /* ------------------------- */ /* --- HOMEPAGE VEHICLES --- */ /* ------------------------- */ /* line 6, ../../scss/home/panels/_cta.scss */ #cta-container .cta-container { width: 50%; float: left; position: relative; } /* line 11, ../../scss/home/panels/_cta.scss */ #cta-container .cta-container:before { content: ""; display: block; padding-top: 83%; } /* line 17, ../../scss/home/panels/_cta.scss */ #cta-container .cta-container .cta-grid { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-top: solid; border-top-width: 1px; border-top-color: #d00000; } /* line 28, ../../scss/home/panels/_cta.scss */ #cta-container .cta-container .cta-grid.search-inventory-cta { background: url(/MusaWeb/musa2/images/home/cta/mobile_search_inventory.jpg) left center no-repeat; background-size: 100% 100%; } /* line 32, ../../scss/home/panels/_cta.scss */ #cta-container .cta-container .cta-grid.certified-preowned-cta { background: url(/MusaWeb/musa2/images/home/cta/mobile_cpo.jpg) left center no-repeat; background-size: 100% 100%; } /* line 36, ../../scss/home/panels/_cta.scss */ #cta-container .cta-container .cta-grid.special-offers-cta { background: url(/MusaWeb/musa2/images/home/cta/mobile_estimate_payments.jpg) left center no-repeat; background-size: 100% 100%; } /* line 40, ../../scss/home/panels/_cta.scss */ #cta-container .cta-container .cta-grid.estimate-payments-cta { background: url(/MusaWeb/musa2/images/home/cta/mobile_special_offers.jpg) left center no-repeat; background-size: 100% 100%; } /* line 45, ../../scss/home/panels/_cta.scss */ #cta-container .cta-container .cta-grid p { text-decoration: none; width: 100%; color: #fff; font-size: 2em; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; text-transform: uppercase; }