/* This file was generated with Grunt using Compass - Last modification: Fri Nov 21st 2014, 6:36:16 PM *//* Mazda Project Mazda3 2014 Upcomming landing page The following file contains all the styles for the upcomming Mazda3 2014 landing page. @author rafael.aguilar@possible.com @author luis.corrales@possible.com @author roberto.vasquez@possible.com @version 0.1 @created June 12th, 2014 @updated June 12th, 2014 */ /* 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 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. */ /** _reset.scss Mazda global reset @author @created - @updated 8-08-2013 */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ /* line 15, ../../../../scss/global/_reset.scss */ 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, i, 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%; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ /* line 35, ../../../../scss/global/_reset.scss */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } /* line 39, ../../../../scss/global/_reset.scss */ body { line-height: 1; } /* line 42, ../../../../scss/global/_reset.scss */ ol, ul { list-style: none; } /* line 45, ../../../../scss/global/_reset.scss */ blockquote, q { quotes: none; } /* line 48, ../../../../scss/global/_reset.scss */ blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* line 53, ../../../../scss/global/_reset.scss */ table { border-collapse: collapse; border-spacing: 0; } /* ------------------- */ /* --- MAZDA FONTS --- */ /* ------------------- */ @font-face { font-family: interstateBlack; src: url("/MusaWeb/musa2/fonts/interstate/inters01.eot"); } @font-face { font-family: interstateBlack; src: url("/MusaWeb/musa2/fonts/interstate/inters01.ttf"); } @font-face { font-family: 'mazda'; src: url("/MusaWeb/musa2/fonts/mazda/mazda-rg.eot"); src: url("/MusaWeb/musa2/fonts/mazda/mazda-rg.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/mazda/mazda-rg.woff") format("woff"), url("/MusaWeb/musa2/fonts/mazda/mazda-rg.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/mazda/mazda-rg.svg#mazda") format("svg"); } @font-face { font-family: 'mazda-bold'; src: url("/MusaWeb/musa2/fonts/mazda/mazda-bd.eot"); src: url("/MusaWeb/musa2/fonts/mazda/mazda-bd.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/mazda/mazda-bd.woff") format("woff"), url("/MusaWeb/musa2/fonts/mazda/mazda-bd.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/mazda/mazda-bd.svg#mazda-bold") format("svg"); } @font-face { font-family: 'interstate'; src: url("/MusaWeb/musa2/fonts/interstate/58a3426e-ba6f-439a-8aa4-7831a1c7a806-2.eot"); src: url("/MusaWeb/musa2/fonts/interstate/58a3426e-ba6f-439a-8aa4-7831a1c7a806-2.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/interstate/58a3426e-ba6f-439a-8aa4-7831a1c7a806-3.woff") format("woff"), url("/MusaWeb/musa2/fonts/interstate/58a3426e-ba6f-439a-8aa4-7831a1c7a806-1.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/interstate/58a3426e-ba6f-439a-8aa4-7831a1c7a806-4.svg#interstate") format("svg"); } @font-face { font-family: 'interstate-black'; src: url("/MusaWeb/musa2/fonts/interstate-black/c86845f6-6105-4106-973f-bef75961e89a-2.eot"); src: url("/MusaWeb/musa2/fonts/interstate-black/c86845f6-6105-4106-973f-bef75961e89a-2.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/interstate-black/c86845f6-6105-4106-973f-bef75961e89a-3.woff") format("woff"), url("/MusaWeb/musa2/fonts/interstate-black/c86845f6-6105-4106-973f-bef75961e89a-1.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/interstate-black/c86845f6-6105-4106-973f-bef75961e89a-4.svg#interstate-black") format("svg"); } @font-face { font-family: 'interstate-black-cond'; src: url("/MusaWeb/musa2/fonts/interstate-black-cond/6dfea724-138b-43f9-999d-52a44b2a9f5e-2.eot"); src: url("/MusaWeb/musa2/fonts/interstate-black-cond/6dfea724-138b-43f9-999d-52a44b2a9f5e-2.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/interstate-black-cond/6dfea724-138b-43f9-999d-52a44b2a9f5e-3.woff") format("woff"), url("/MusaWeb/musa2/fonts/interstate-black-cond/6dfea724-138b-43f9-999d-52a44b2a9f5e-1.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/interstate-black-cond/6dfea724-138b-43f9-999d-52a44b2a9f5e-4.svg#interstate-black-cond") format("svg"); } @font-face { font-family: 'interstate-bold'; src: url("/MusaWeb/musa2/fonts/interstate-bold/f47e2fae-a62d-49a3-8232-25aa587d2b3e-2.eot"); src: url("/MusaWeb/musa2/fonts/interstate-bold/f47e2fae-a62d-49a3-8232-25aa587d2b3e-2.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/interstate-bold/f47e2fae-a62d-49a3-8232-25aa587d2b3e-3.woff") format("woff"), url("/MusaWeb/musa2/fonts/interstate-bold/f47e2fae-a62d-49a3-8232-25aa587d2b3e-1.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/interstate-bold/f47e2fae-a62d-49a3-8232-25aa587d2b3e-4.svg#interstate-bold") format("svg"); } @font-face { font-family: 'interstate-bold-italic'; src: url("/MusaWeb/musa2/fonts/interstate-bold-italic/a03a85a1-5904-459e-8017-6642ced9390d-2.eot"); src: url("/MusaWeb/musa2/fonts/interstate-bold-italic/a03a85a1-5904-459e-8017-6642ced9390d-2.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/interstate-bold-italic/a03a85a1-5904-459e-8017-6642ced9390d-3.woff") format("woff"), url("/MusaWeb/musa2/fonts/interstate-bold-italic/a03a85a1-5904-459e-8017-6642ced9390d-1.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/interstate-bold-italic/a03a85a1-5904-459e-8017-6642ced9390d-4.svg#interstate-bold") format("svg"); } @font-face { font-family: 'interstatemazda-light'; src: url("/MusaWeb/musa2/fonts/interstate/InterstateMazda-Light.eot"); src: url("/MusaWeb/musa2/fonts/interstate/InterstateMazda-Light.eot?#iefix") format("embedded-opentype"); src: url("/MusaWeb/musa2/fonts/interstate/InterstateMazda-Light.ttf") format("truetype"); } @font-face { font-family: 'interstate-light-italic'; src: url("/MusaWeb/musa2/fonts/interstate/InterstateMazda-LightItalic.eot"); src: url("/MusaWeb/musa2/fonts/interstate/InterstateMazda-LightItalic.eot?#iefix") format("embedded-opentype"); src: url("/MusaWeb/musa2/fonts/interstate/InterstateMazda-LightItalic.ttf") format("truetype"); } @font-face { font-family: 'interstateCondensed'; src: url("/MusaWeb/musa2/fonts/interstate/interstate_blackcondensed-webfont.eot"); src: url("/MusaWeb/musa2/fonts/interstate/interstate_blackcondensed-webfont.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/interstate/interstate_blackcondensed-webfont.woff") format("woff"), url("/MusaWeb/musa2/fonts/interstate/interstate_blackcondensed-webfont.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/interstate/interstate_blackcondensed-webfont.svg#imbold") format("svg"); font-weight: bold; font-style: normal; } @font-face { font-family: 'Interstate-BoldCondensed'; src: url("/MusaWeb/musa2/fonts/interstate-bold-cond/interstate_bold_condensed.eot"); src: url("/MusaWeb/musa2/fonts/interstate-bold-cond/interstate_bold_condensed.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/interstate-bold-cond/interstate_bold_condensed.svg#Interstate Bold Condensed") format("svg"), url("/MusaWeb/musa2/fonts/interstate-bold-cond/interstate_bold_condensed.woff") format("woff"), url("/MusaWeb/musa2/fonts/interstate-bold-cond/interstate_bold_condensed.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Interstate-RegCompressed'; src: url("/MusaWeb/musa2/fonts/interstate-regularCompressed/Interstate_RegularCompressed.ttf"); font-weight: normal; font-style: normal; } @font-face { font-family: 'interstatemazda-italic'; src: url("/MusaWeb/musa2/fonts/interstate/InterstateMazda-Italic.ttf"); } @font-face { font-family: 'interstate-light'; src: url("/MusaWeb/musa2/fonts/interstate/Interstate-Light.otf"); } @font-face { font-family: 'vni-helvebold'; src: url("/MusaWeb/musa2/fonts/vni-helvetica/vhelveb-webfont.eot"); src: url("/MusaWeb/musa2/fonts/vni-helvetica/vhelveb-webfont.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/vni-helvetica/vhelveb-webfont.woff") format("woff"), url("/MusaWeb/musa2/fonts/vni-helvetica/vhelveb-webfont.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/vni-helvetica/vhelveb-webfont.svg#vni-helvebold") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'vni-helveitalic'; src: url("/MusaWeb/musa2/fonts/vni-helvetica/vhelvei-webfont.eot"); src: url("/MusaWeb/musa2/fonts/vni-helvetica/vhelvei-webfont.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/vni-helvetica/vhelvei-webfont.woff") format("woff"), url("/MusaWeb/musa2/fonts/vni-helvetica/vhelvei-webfont.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/vni-helvetica/vhelvei-webfont.svg#vni-helveitalic") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'vni-helvenormal'; src: url("/MusaWeb/musa2/fonts/vni-helvetica/vhelven-webfont.eot"); src: url("/MusaWeb/musa2/fonts/vni-helvetica/vhelven-webfont.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/vni-helvetica/vhelven-webfont.woff") format("woff"), url("/MusaWeb/musa2/fonts/vni-helvetica/vhelven-webfont.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/vni-helvetica/vhelven-webfont.svg#vni-helvenormal") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'aritasbregular'; src: url("/MusaWeb/musa2/fonts/korean/-vsb-webfont.eot"); src: url("/MusaWeb/musa2/fonts/korean/-vsb-webfont.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/korean/-vsb-webfont.woff") format("woff"), url("/MusaWeb/musa2/fonts/korean/-vsb-webfont.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/korean/-vsb-webfont.svg#aritasbregular") format("svg"); font-weight: normal; font-style: normal; } /* line 13, ../../../../scss/global/_buttons.scss */ .btn { display: inline-block; *display: inline; /* IE7 inline-block hack */ *zoom: 1; padding: 4px 12px; margin-bottom: 0; font-size: 13px; font-family: "interstateBlack", sans-serif, arial; line-height: 20px; text-align: center; text-decoration: none; text-transform: uppercase; vertical-align: middle; cursor: pointer; color: #008AD0; text-shadow: 0 -1px 1px rgba(14, 14, 14, 0.75); background-color: #ebebeb; background-image: -moz-linear-gradient(top, #fff, #cfcece); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#cfcece)); background-image: -webkit-linear-gradient(top, #fff, #cfcece); background-image: -o-linear-gradient(top, #fff, #cfcece); background-image: linear-gradient(to bottom, #ffffff, #cfcece); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFCFCECE', GradientType=0); border-color: #cfcece #cfcece #a9a7a7; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #cfcece; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); border: 1px solid #c8c8c8; border: 0; border-bottom-color: #afafaf; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; *margin-left: .3em; -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } /* line 132, ../../../../scss/global/_mixins.scss */ .btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { color: #008AD0; background-color: #cfcece; *background-color: #c2c1c1; } /* line 139, ../../../../scss/global/_mixins.scss */ .btn:active, .btn.active { background-color: #b6b4b4 \9; } /* line 44, ../../../../scss/global/_mixins.scss */ .btn:first-child { *margin-left: 0; } /* line 35, ../../../../scss/global/_buttons.scss */ .btn:hover, .btn:focus { color: #008AD0; text-decoration: none; } /* line 46, ../../../../scss/global/_buttons.scss */ .btn:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } /* line 51, ../../../../scss/global/_buttons.scss */ .btn.active, .btn:active { background-image: none; outline: 0; -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); } /* line 59, ../../../../scss/global/_buttons.scss */ .btn.disabled, .btn[disabled] { cursor: default; background-image: none; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=6500); opacity: 65; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } /* line 68, ../../../../scss/global/_buttons.scss */ a.btn { color: #FFF; } /* line 70, ../../../../scss/global/_buttons.scss */ a.btn:focus { color: #FFF; } /* line 76, ../../../../scss/global/_buttons.scss */ .btn-small { padding: 0px 12px; font: 1em/2.5em interstate, sans-serif, arial; } /* line 84, ../../../../scss/global/_buttons.scss */ .red-button { padding: 8px 15px; margin-top: 2%; font: 10px interstate-bold, sans-serif, arial; text-decoration: none; color: #fff !important; background: #d00000; background: -moz-linear-gradient(top, #d00000, #7e0000); background: -webkit-gradient(linear, 0 0, 0 100%, from(#d00000), to(#7e0000)); background: -webkit-linear-gradient(top, #d00000, #7e0000); background: -o-linear-gradient(top, #d00000, #7e0000); background: linear-gradient(to bottom, #d00000, #7e0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFD00000', endColorstr='#FF7E0000', GradientType=0); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } @media (min-width: 992px) { /* line 84, ../../../../scss/global/_buttons.scss */ .red-button { font: 12px interstate-bold, sans-serif, arial; } } @media (min-width: 1200px) { /* line 84, ../../../../scss/global/_buttons.scss */ .red-button { padding: 10px 30px; margin-top: 3%; font: 16px interstate-bold, sans-serif, arial; } } /* line 105, ../../../../scss/global/_buttons.scss */ .red-button:hover { background: #950000; background: -moz-linear-gradient(top, #950000, #5a0000); background: -webkit-gradient(linear, 0 0, 0 100%, from(#950000), to(#5a0000)); background: -webkit-linear-gradient(top, #950000, #5a0000); background: -o-linear-gradient(top, #950000, #5a0000); background: linear-gradient(to bottom, #950000, #5a0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF950000', endColorstr='#FF5A0000', GradientType=0); text-decoration: none; } /* line 114, ../../../../scss/global/_buttons.scss */ .red-button-refresh { padding: 8px 15px; margin-top: 2%; font: 10px interstate, sans-serif, arial; text-decoration: none; color: #fff !important; background: #d00000; background: -moz-linear-gradient(top, #d00000, #7e0000); background: -webkit-gradient(linear, 0 0, 0 100%, from(#d00000), to(#7e0000)); background: -webkit-linear-gradient(top, #d00000, #7e0000); background: -o-linear-gradient(top, #d00000, #7e0000); background: linear-gradient(to bottom, #d00000, #7e0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFD00000', endColorstr='#FF7E0000', GradientType=0); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } @media (min-width: 992px) { /* line 114, ../../../../scss/global/_buttons.scss */ .red-button-refresh { font: 12px interstate-bold, sans-serif, arial; } } @media (min-width: 1200px) { /* line 114, ../../../../scss/global/_buttons.scss */ .red-button-refresh { padding: 10px 30px; margin-top: 3%; font: 16px interstate-bold, sans-serif, arial; } } /* line 383, ../../../../scss/global/_mixins.scss */ .red-button-refresh:hover { background: #950000; background: -moz-linear-gradient(top, #950000, #5a0000); background: -webkit-gradient(linear, 0 0, 0 100%, from(#950000), to(#5a0000)); background: -webkit-linear-gradient(top, #950000, #5a0000); background: -o-linear-gradient(top, #950000, #5a0000); background: linear-gradient(to bottom, #950000, #5a0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF950000', endColorstr='#FF5A0000', GradientType=0); text-decoration: none; } /* line 119, ../../../../scss/global/_buttons.scss */ .gray-button-refresh { padding: 8px 15px; margin-top: 2%; font: 10px interstate, sans-serif, arial; text-decoration: none; color: #fff !important; background: #656565; background: -moz-linear-gradient(top, #656565, #404040); background: -webkit-gradient(linear, 0 0, 0 100%, from(#656565), to(#404040)); background: -webkit-linear-gradient(top, #656565, #404040); background: -o-linear-gradient(top, #656565, #404040); background: linear-gradient(to bottom, #656565, #404040); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF656565', endColorstr='#FF404040', GradientType=0); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } @media (min-width: 992px) { /* line 119, ../../../../scss/global/_buttons.scss */ .gray-button-refresh { font: 12px interstate-bold, sans-serif, arial; } } @media (min-width: 1200px) { /* line 119, ../../../../scss/global/_buttons.scss */ .gray-button-refresh { padding: 10px 30px; margin-top: 3%; font: 16px interstate-bold, sans-serif, arial; } } /* line 383, ../../../../scss/global/_mixins.scss */ .gray-button-refresh:hover { background: #494949; background: -moz-linear-gradient(top, #494949, #303030); background: -webkit-gradient(linear, 0 0, 0 100%, from(#494949), to(#303030)); background: -webkit-linear-gradient(top, #494949, #303030); background: -o-linear-gradient(top, #494949, #303030); background: linear-gradient(to bottom, #494949, #303030); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF494949', endColorstr='#FF303030', GradientType=0); text-decoration: none; } /* line 124, ../../../../scss/global/_buttons.scss */ .red-button-awards { padding: 8px 15px; margin-top: 2%; font: 10px interstate-bold, sans-serif, arial; text-decoration: none; color: #fff !important; background: #d00000; background: -moz-linear-gradient(top, #d00000, #7e0000); background: -webkit-gradient(linear, 0 0, 0 100%, from(#d00000), to(#7e0000)); background: -webkit-linear-gradient(top, #d00000, #7e0000); background: -o-linear-gradient(top, #d00000, #7e0000); background: linear-gradient(to bottom, #d00000, #7e0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFD00000', endColorstr='#FF7E0000', GradientType=0); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } /* line 135, ../../../../scss/global/_buttons.scss */ .red-button-awards:hover { background: #950000; background: -moz-linear-gradient(top, #950000, #5a0000); background: -webkit-gradient(linear, 0 0, 0 100%, from(#950000), to(#5a0000)); background: -webkit-linear-gradient(top, #950000, #5a0000); background: -o-linear-gradient(top, #950000, #5a0000); background: linear-gradient(to bottom, #950000, #5a0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF950000', endColorstr='#FF5A0000', GradientType=0); text-decoration: none; } /* General Rules */ /* line 2, ../../../../scss/garage/2014/M3N/_reset.scss */ html #main_wrap { min-width: 975px; width: 100%; position: relative; } /* line 8, ../../../../scss/garage/2014/M3N/_reset.scss */ #main_content { display: block; width: 100%; min-height: 250px; position: relative; margin: 0; padding: 0; float: none; color: #3e484a; background: #000; } /* line 21, ../../../../scss/garage/2014/M3N/_reset.scss */ #main_content h3 { color: #999; font: 13px interstate-bold, sans-serif, arial; padding: 0; margin: 19px 0 16px 0; } /* line 29, ../../../../scss/garage/2014/M3N/_reset.scss */ .global_header_wrapper { width: 100%; background: #f9f9f9; border-top: 5px #008ad0 solid; } /* line 35, ../../../../scss/garage/2014/M3N/_reset.scss */ #global_header { top: -5px; } /* line 39, ../../../../scss/garage/2014/M3N/_reset.scss */ .global_header_wrapper .shadow { display: block; width: 216px; height: 94px; position: absolute; left: -216px; z-index: 1; background: url(/MusaWeb/musa2/images/garage/landing/slides-design/bg-header-shadow.png) no-repeat 0 0; } /* line 49, ../../../../scss/garage/2014/M3N/_reset.scss */ #garage_disclaimer { display: block; top: 20px; width: 975px; margin: 0; position: relative; bottom: 0; left: 240px; z-index: 0; font-size: 9px !important; line-height: 12px !important; color: #666666; text-align: left !important; font-weight: normal; text-decoration: none; } /* line 67, ../../../../scss/garage/2014/M3N/_reset.scss */ #garage_disclaimer .footer_disclaimers { width: 935px; } /* line 71, ../../../../scss/garage/2014/M3N/_reset.scss */ #garage_disclaimer p { color: #666 !important; font-size: 9px !important; line-height: 14px; margin-bottom: 20px; } /* line 79, ../../../../scss/garage/2014/M3N/_reset.scss */ #garage_footer { width: 975px; margin: 0 auto; z-index: 11; position: relative; } /* line 85, ../../../../scss/garage/2014/M3N/_reset.scss */ .ie7 #garage_footer, .ie8 #garage_footer { margin-top: 10px; } /* line 91, ../../../../scss/garage/2014/M3N/_reset.scss */ #disclaimer_foot { width: 975px; margin: 0 auto; z-index: 11; position: relative; } /* line 97, ../../../../scss/garage/2014/M3N/_reset.scss */ #disclaimer_foot p { margin: 0 0 10px; } /* line 102, ../../../../scss/garage/2014/M3N/_reset.scss */ .imageReplacement { overflow: hidden; text-indent: -99999px; } /** * -------------------------------- BEGIN RESET CODE FOR SUB NAV -------------------------------- * * The following code will hide all the elements in the subnav for the M3 mini garage VLP as * the options should not be available for this particular page because the backend support * for this model has not been added yet. * @author luis.corrales@possible.com * @author michael.gutierrez@possible.com */ /* line 121, ../../../../scss/garage/2014/M3N/_reset.scss */ .bg_M3N #garage_subNav .subnav a, .bg_M3N #garage_subNav .subnav h3, .bg_M3X #garage_subNav .subnav a, .bg_M3X #garage_subNav .subnav h3 { display: none; } /* line 125, ../../../../scss/garage/2014/M3N/_reset.scss */ .bg_M3N #garage_subNav .subnav #subnav_vehicle_info, .bg_M3X #garage_subNav .subnav #subnav_vehicle_info { width: 310px; } /* -------------------------------- END RESET CODE FOR SUB NAV -------------------------------- */ /* Mazda Project Mazda3 2014 Upcomming landing page File: _base.scss This file contains the defaults styling. Basically it states the basic styling for any element in the page. Most of the styling in this page will probably consist in single element selectors. @author rafael.aguilar@possible.com @author luis.corrales@possible.com @author roberto.vasquez@possible.com @version 0.1 @created June 12th, 2014 @updated June 12th, 2014 */ /* line 20, ../../../../scss/garage/2014/M3N/_base.scss */ #main_content { width: 100%; background-color: #000; margin-top: -14px; } /* line 27, ../../../../scss/garage/2014/M3N/_base.scss */ .header { color: #900; font: 36px/48px interstate-bold-italic, sans-serif, arial; text-transform: uppercase; } /* line 33, ../../../../scss/garage/2014/M3N/_base.scss */ .panel-copy { color: #FFF; font: 13px/22px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif, arial; } /* line 38, ../../../../scss/garage/2014/M3N/_base.scss */ .panel { width: 100%; height: 660px; position: relative; } /* line 44, ../../../../scss/garage/2014/M3N/_base.scss */ .panel .panel-background { width: 100%; min-width: 975px; position: absolute; top: 0; left: 0; z-index: -1; } /* line 54, ../../../../scss/garage/2014/M3N/_base.scss */ .goToPanelButton { display: block; position: relative; z-index: 15; top: -35px; overflow: hidden; width: 30px; height: 30px; padding: 20px; margin: 0 auto; text-align: center; text-indent: -99999px; color: #d00000; } /* line 68, ../../../../scss/garage/2014/M3N/_base.scss */ .goToPanelButton span { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(/MusaWeb/musa2/images/garage/landing/slides-design/btn-next-arrow.png) no-repeat 0 0; } /* line 79, ../../../../scss/garage/2014/M3N/_base.scss */ a { text-decoration: none; } /* line 83, ../../../../scss/garage/2014/M3N/_base.scss */ .clearBoth { clear: both; } /* line 86, ../../../../scss/garage/2014/M3N/_base.scss */ .top.goToButton { display: block; width: 70px; height: 70px; overflow: hidden; position: absolute; left: 73%; top: 84%; text-indent: -99999px; background: url(/MusaWeb/musa2/images/garage/landing/slides-design/btn-go-to-top.png) no-repeat 0 0; } /* line 96, ../../../../scss/garage/2014/M3N/_base.scss */ .top.goToButton:hover { background: url(/MusaWeb/musa2/images/garage/landing/slides-design/btn-go-to-top-roll.png) no-repeat 0 0; } /* Header */ /* line 5, ../../../../scss/garage/2014/M3N/_subnav.scss */ .superscrollorama-pin-spacer { display: block; width: 1px; height: 0; background: yellow; } /* line 12, ../../../../scss/garage/2014/M3N/_subnav.scss */ #hidden-subnav { display: block; width: 0; height: 0; background: yellow; position: absolute; top: 0; left: 0; margin-top: 0; } /* line 23, ../../../../scss/garage/2014/M3N/_subnav.scss */ #subnav_vehicle_info { width: 173px; top: 1px; } /* line 28, ../../../../scss/garage/2014/M3N/_subnav.scss */ #subnav_vehicle_info h2 { margin: 27px 0 0 4px; color: #fff; font: 14px/16px mazda-bold, sans-serif, arial; text-transform: none; } /* line 34, ../../../../scss/garage/2014/M3N/_subnav.scss */ .ie7 #subnav_vehicle_info h2, .ie8 #subnav_vehicle_info h2, .ie9 #subnav_vehicle_info h2 { margin: 0; } /* line 41, ../../../../scss/garage/2014/M3N/_subnav.scss */ #subnav_vehicle_info h3 { margin: 0; color: #ccc; font-size: 10px; line-height: 12px; } /* line 48, ../../../../scss/garage/2014/M3N/_subnav.scss */ #subnav_vehicle_info h3 span { padding: 0; } /* line 52, ../../../../scss/garage/2014/M3N/_subnav.scss */ ul.social_links { display: none; } /* line 56, ../../../../scss/garage/2014/M3N/_subnav.scss */ #garage_subNav { width: 100%; height: 60px; position: relative; background: #333; z-index: 1000; margin-top: -5px; } /* line 65, ../../../../scss/garage/2014/M3N/_subnav.scss */ #garage_subNav.sticky { position: fixed; top: 0; } /* line 70, ../../../../scss/garage/2014/M3N/_subnav.scss */ #garage_subNav ul.subnav { width: 978px; margin: 0 auto; } /* line 75, ../../../../scss/garage/2014/M3N/_subnav.scss */ ul.subnav li { margin: 26px 0 0 23px; } /* line 80, ../../../../scss/garage/2014/M3N/_subnav.scss */ ul.subnav li:first-child { width: 173px; margin-top: 0; } /* line 85, ../../../../scss/garage/2014/M3N/_subnav.scss */ .ie7 ul.subnav li:first-child, .ie8 ul.subnav li:first-child, .ie9 ul.subnav li:first-child { width: 168px; } /* line 91, ../../../../scss/garage/2014/M3N/_subnav.scss */ ul.subnav li.drop { margin-left: 0; margin-right: 17px; } /* Mazda Project YouTube Video player Module File: YouTubeModule.js This file contains the styling for the YouTube garage module. @author luis.corrales@possible.com @version 0.1 @created June 17th, 2014 @updated June 17th, 2014 */ /* line 17, ../../../../scss/garage/utils/YouTubeModule.scss */ .youtube-video { width: 75%; height: 75%; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; z-index: 11; } /* line 28, ../../../../scss/garage/utils/YouTubeModule.scss */ .youtube-video .youtube-video-player { width: 100%; height: 100%; position: absolute; top: 0; left: 0; visibility: visible; } /* line 37, ../../../../scss/garage/utils/YouTubeModule.scss */ .youtube-video .youtube-video-close-button { width: 58px; height: 58px; display: block; position: absolute; right: -25px; top: -25px; background-image: url(/MusaWeb/musa2/images/garage/utils/YouTube-close.png); } /* line 50, ../../../../scss/garage/utils/YouTubeModule.scss */ .youtube-video.closed { display: none; } /* ===================== CSS LINT ===================== */ /* Mazda Project Mazda3 2014 Upcomming landing page File: _modules.scss This file contains the styling for certain modules used along the page @author luis.corrales@possible.com @version 0.1 @created July 12th, 2014 @updated July 12th, 2014 */ /** * Video Hotspot module * This module consist on creating a hotspot to contain a play button along * with some information about the video. * @see Hero panel in www.mazdausa.com/MusaWeb/displayPage.action?pageParameter=modelsMain&vehicleCode=M3N#hero */ /* line 26, ../../../../scss/garage/2014/M3N/_modules.scss */ .videoHotspot, .videoHotspot .hiddenText, .videoHotspot .playButton, .videoHotspot:hover, .videoHotspot:hover .hiddenText, .videoHotspot:hover .playButton { -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } /* line 34, ../../../../scss/garage/2014/M3N/_modules.scss */ .videoHotspot, .videoHotspot .message { position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; } /* line 43, ../../../../scss/garage/2014/M3N/_modules.scss */ .videoHotspot { width: 100%; height: 100%; display: block; z-index: -1; background: url(/MusaWeb/musa2/images/garage/landing/slides-design/aspect-16-9.png) repeat; /* 2. Elements State =================================================================== */ /* Normal state, only the play button shows*/ /* Hover state, the play button is more white and the text shows up*/ } /* line 54, ../../../../scss/garage/2014/M3N/_modules.scss */ .videoHotspot .message { width: 370px; height: 70px; line-height: 70px; } /* line 61, ../../../../scss/garage/2014/M3N/_modules.scss */ .videoHotspot .message span { height: 100%; display: block; float: left; line-height: 70px; } /* line 70, ../../../../scss/garage/2014/M3N/_modules.scss */ .videoHotspot .playButton { width: 70px; height: 70px; display: inline-block; margin: 0 10px; } /* line 83, ../../../../scss/garage/2014/M3N/_modules.scss */ .videoHotspot { color: #FFF; } /* line 87, ../../../../scss/garage/2014/M3N/_modules.scss */ .videoHotspot .hiddenText { opacity: 0; filter: alpha(opacity=0); } /* line 93, ../../../../scss/garage/2014/M3N/_modules.scss */ .videoHotspot .playButton { background: url(/MusaWeb/musa2/images/garage/2014/M3N/panel_1/btn-video-play.png) no-repeat center center; background-size: 100%; } /* line 104, ../../../../scss/garage/2014/M3N/_modules.scss */ .videoHotspot:hover .hiddenText { opacity: 1; filter: alpha(opacity=100); } /* line 111, ../../../../scss/garage/2014/M3N/_modules.scss */ .videoHotspot:hover .playButton { background: url(/MusaWeb/musa2/images/garage/2014/M3N/panel_1/btn-video-play-roll.png) no-repeat center center; background-size: 100%; } /* Mazda Project Mazda3 2014 Upcomming landing page File: _layout.scss This file divides the page into sections and holds one or more slides of the site together. @author rafael.aguilar@possible.com @author luis.corrales@possible.com @author roberto.vasquez@possible.com @version 0.1 @created June 12th, 2014 @updated June 12th, 2014 */ /* Mazda Project Mazda3 2014 Upcomming landing page File: _panel_1_HeroImage.scss This file contains the styling for the Panel No.1 of the page. It consist of a static hero image, a videos and photos button and finally a play button in the middle that will open an overlay to play a YouTube video. @author rafael.aguilar@possible.com @author luis.corrales@possible.com @author roberto.vasquez@possible.com @version 0.1 @created June 12th, 2014 @updated June 12th, 2014 */ /* line 24, ../../../../scss/garage/2014/M3N/panels/_panel_1_HeroImage.scss */ #hero .header { width: 630px; margin: 0 auto; padding-top: 33px; text-align: center; } /* line 31, ../../../../scss/garage/2014/M3N/panels/_panel_1_HeroImage.scss */ #hero .panel-copy { width: 430px; margin: 2px auto 0; text-align: center; } /* line 36, ../../../../scss/garage/2014/M3N/panels/_panel_1_HeroImage.scss */ #hero .panel-copy a { color: #ffffff; text-decoration: underline; margin-top: 8px; display: block; font-weight: bold; } /* line 44, ../../../../scss/garage/2014/M3N/panels/_panel_1_HeroImage.scss */ .bg_M3X #hero .panel-copy { color: #333333; } /* line 49, ../../../../scss/garage/2014/M3N/panels/_panel_1_HeroImage.scss */ #hero .photosAndVideos { width: 133px; position: absolute; bottom: 9%; right: 0; left: 0; margin: auto; text-align: center; display: inline-block; height: 29px; padding: 0 14px; -webkit-border-radius: 2px; border-radius: 2px; background-color: #d00000; background: url(/MusaWeb/musa2/images/garage/landing/slides-design/red-button.png) no-repeat scroll 0 0 #d00000; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdlMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d00000), color-stop(100%, #7e0000)); background-image: -moz-linear-gradient(top, #d00000 0%, #7e0000 100%); background-image: -webkit-linear-gradient(top, #d00000 0%, #7e0000 100%); background-image: linear-gradient(to bottom, #d00000 0%, #7e0000 100%); font: 12px/29px interstate, sans-serif, arial; text-decoration: none; text-transform: uppercase; text-align: center; color: #fff; } /* line 278, ../../../../scss/global/_mixins.scss */ #hero .photosAndVideos:hover { background-color: #950000; background: url(/MusaWeb/musa2/images/garage/landing/slides-design/red-button-hover.png) no-repeat scroll 0 0 #950000; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk1MDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVhMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #950000), color-stop(100%, #5a0000)); background-image: -moz-linear-gradient(top, #950000 0%, #5a0000 100%); background-image: -webkit-linear-gradient(top, #950000 0%, #5a0000 100%); background-image: linear-gradient(to bottom, #950000 0%, #5a0000 100%); } /* Mazda Project Mazda3 2014 Upcomming landing page File: _panel_2_Photos&Videos.scss @author rafael.aguilar@possible.com @author luis.corrales@possible.com @author roberto.vasquez@possible.com @version 0.1 @created June 12th, 2014 @updated June 12th, 2014 */ /* line 18, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos { background: #333333; } /* line 20, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos .loader { display: none; width: 48px; height: 48px; position: absolute; left: 50%; top: 42%; z-index: 1100; margin-left: -24px; margin-top: -24px; background-image: url(/MusaWeb/musa2/images/garage/loading_animation.gif); } /* line 35, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos a.next { position: absolute; left: 50%; margin-left: -35px; } /* line 41, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.section-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* line 49, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos .thumbnails-carousel li div.selected { position: absolute; display: block; width: inherit; } /* line 54, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos .thumbnails-carousel li div.notSelected { position: absolute; display: none; } /* line 59, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.hero-container { width: auto; height: auto; overflow: hidden; } /* line 64, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.hero-container h2 { position: absolute; width: 100%; text-align: center; font-family: interstate,sans-serif,arial; font-size: 13px; line-height: 1.5em; padding-top: 4%; text-transform: uppercase; color: #8b8c8c; } /* line 76, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.hero-container img.hero-img { width: 100%; } /* line 84, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.hero-container a.hero-prev, #photos-videos div.hero-container a.hero-next { position: absolute; top: 42%; width: 3.7%; min-width: 39px; max-width: 60px; cursor: pointer; } /* line 92, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.hero-container a.hero-prev img, #photos-videos div.hero-container a.hero-next img { width: 100%; } /* line 97, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.hero-container a.hero-prev { left: 6.25%; } /* line 101, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.hero-container a.hero-next { right: 6.25%; } /* line 105, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.hero-container a.hero-videos-photos { position: absolute; width: 8.375%; top: 76.5%; left: 18.5%; font-size: 1em; } /* line 112, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.hero-container a.hero-videos-photos img { width: 100%; position: absolute; } /* line 117, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.hero-container a.hero-videos-photos span { position: absolute; width: 100%; text-align: center; text-transform: uppercase; color: #ffffff; text-decoration: none; font-size: 1.090909em; line-height: 2.4em; font-family: interstate,sans-serif,arial; } /* line 131, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.carousel-container { width: 70%; height: 18%; margin-left: 15%; position: relative; bottom: 0; } /* line 138, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.carousel-container div.list_carousel { position: relative; width: 100%; height: 62%; } /* line 144, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.carousel-container a.carousel-page-prev, #photos-videos div.carousel-container a.carousel-page-next { position: relative; float: left; top: 45%; width: 10px; height: 16px; cursor: pointer; } /* line 154, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.carousel-container a.carousel-page-prev { margin-right: 97%; background-image: url("/MusaWeb/musa2/images/garage/2014/M3N/panel_2/thumb-arrow-left.png"); } /* line 159, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.carousel-container a.carousel-page-next { background-image: url("/MusaWeb/musa2/images/garage/2014/M3N/panel_2/thumb-arrow-right.png"); } /* line 163, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.carousel-container .caroufredsel_wrapper { width: 90%; margin-left: 5%; } /* line 169, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.carousel-container ul.thumbnails-carousel li { float: left; width: 16.5%; } /* line 173, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos div.carousel-container ul.thumbnails-carousel li img { width: 100%; cursor: pointer; } /* line 180, ../../../../scss/garage/2014/M3N/panels/_panel_2_Photos&Videos.scss */ #photos-videos .explore-mazda3-button { width: 133px; position: absolute; top: 30%; right: 0; left: 0; margin: auto; text-align: center; display: inline-block; height: 29px; padding: 0 14px; -webkit-border-radius: 2px; border-radius: 2px; background: #d00000; background: -moz-linear-gradient(top, #d00000 0%, #7e0000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d00000), color-stop(100%, #7e0000)); background: -webkit-linear-gradient(top, #d00000 0%, #7e0000 100%); background: -o-linear-gradient(top, #d00000 0%, #7e0000 100%); background: -ms-linear-gradient(top, #d00000 0%, #7e0000 100%); background: linear-gradient(to bottom, #d00000 0%, #7e0000 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d00000', endColorstr='#7e0000',GradientType=0 ); font: 12px/29px interstate, sans-serif, arial; text-decoration: none; text-transform: uppercase; color: #fff; } /* Mazda Project Mazda3 2014 Upcomming landing page File: _panel_3_KMU.scss @author rafael.aguilar@possible.com @author luis.corrales@possible.com @author roberto.vasquez@possible.com @version 0.1 @created June 12th, 2014 @updated June 12th, 2014 */ /* line 20, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu h2 { width: 100%; margin: 0 0 20px 0; font: 13px/15px interstate, sans-serif, arial; color: #999; text-align: center; } /* line 29, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu h3 { margin: 0px 0px 21px; font: 36px/39px interstate-bold-italic, sans-serif, arial; color: #fff; text-align: center; text-transform: uppercase; } /* line 37, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu p { margin: 0 0 30px; font: 13px/22px interstate, sans-serif, arial; text-align: center; color: #fff; } /* line 44, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form { width: 784px; margin: 0 auto; font: 12px/15px interstate, sans-serif, arial; color: #999; } /* line 50, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form fieldset > div { margin: 0 0 15px; } /* line 54, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form label { display: inline-block; width: 122px; } /* line 59, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form label span { color: #c90000; } /* line 63, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form input[type='text'], #kmu form input[type='email'] { width: 238px; padding: 5px 8px 3px; background: #dedddd; border: 1px solid #c0c0c0; -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.3); box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.3); -webkit-border-radius: 2px; border-radius: 2px; color: #666666; } /* line 76, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form .check-field label { width: auto; } /* line 80, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form .last-name { display: none; } /* line 85, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form .dropdown-wrapper { display: inline-block; margin-left: 16px; position: relative; background: #dedddd; border: 1px solid #c0c0c0; -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.3); box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.3); -webkit-border-radius: 2px; border-radius: 2px; padding: 0 2px 1px 0; overflow: hidden; vertical-align: middle; width: 67px; } /* line 100, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form .dropdown-wrapper select { position: relative; background: transparent; border: none; color: #666666; width: 90px; height: 21px; margin: 0; padding: 2px 0; z-index: 1; -webkit-appearance: none; } /* line 113, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form .dropdown-wrapper .dropdown-button { position: absolute; height: 18px; width: 18px; right: 2px; top: 2px; border-left: 1px solid #b2b1b1; background: #dedddd url(/MusaWeb/musa2/images/insidemazda/contact/img_dropdown_arrow.png); z-index: 0; } /* line 125, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form .submit-field { text-align: right; padding-right: 8px; } /* line 131, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .errortext { display: none; width: 778px; margin: 0 auto 10px; } /* line 136, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .errortext li { margin: 0 0 0 14px; padding: 0; list-style: circle; background: none; color: #c90000; } /* line 144, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .errortext p { margin: 0; text-align: left; color: #c90000; } /* line 151, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .first-name-error, #kmu .last-name-error, #kmu .email-error, #kmu .email-match-error, #kmu .city-error, #kmu .state-error, #kmu .zip-error { display: none; } /* line 161, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .success-message { display: none; text-align: center; } /* line 166, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .required-flag { float: right; } /* line 169, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .required-flag p { width: auto; margin: 0; color: #999; } /* line 175, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .required-flag p span { color: #c90000; } /* line 180, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu #first-name { width: 170px; } /* line 184, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu #last-name { width: 170px; margin-left: 16px; } /* line 189, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .name-field { float: left; } /* line 193, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .email-field { float: left; } /* line 197, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .re-email-field { float: left; margin-left: 17px; } /* line 202, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .address-1-field { clear: both; float: left; } /* line 207, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .address-2-field { float: left; margin-left: 17px; } /* line 212, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .city-field { clear: both; float: left; } /* line 217, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form .state-zip-field { float: left; width: 50%; } /* line 221, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form .state-zip-field div.dropdown-wrapper { width: 70px; float: left; } /* line 226, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form .state-zip-field div.zip-wrapper { float: left; } /* line 230, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form .state-zip-field select { width: 93px; } /* line 235, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form .state-zip-field label { width: 44px; margin: 0 0 0 5px; } /* line 240, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu form .state-zip-field input { width: 70px; } /* line 245, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .submit-field { clear: both; margin-left: 16%; } /* line 250, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu #hidden-submit { display: none; } /* line 254, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .submit-action { display: inline-block; height: 29px; padding: 0 14px; -webkit-border-radius: 2px; border-radius: 2px; background-color: #d00000; background: url(/MusaWeb/musa2/images/garage/landing/slides-design/red-button.png) no-repeat scroll 0 0 #d00000; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdlMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d00000), color-stop(100%, #7e0000)); background-image: -moz-linear-gradient(top, #d00000 0%, #7e0000 100%); background-image: -webkit-linear-gradient(top, #d00000 0%, #7e0000 100%); background-image: linear-gradient(to bottom, #d00000 0%, #7e0000 100%); font: 12px/29px interstate, sans-serif, arial; text-decoration: none; text-transform: uppercase; text-align: center; color: #fff; } /* line 278, ../../../../scss/global/_mixins.scss */ #kmu .submit-action:hover { background-color: #950000; background: url(/MusaWeb/musa2/images/garage/landing/slides-design/red-button-hover.png) no-repeat scroll 0 0 #950000; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk1MDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVhMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #950000), color-stop(100%, #5a0000)); background-image: -moz-linear-gradient(top, #950000 0%, #5a0000 100%); background-image: -webkit-linear-gradient(top, #950000 0%, #5a0000 100%); background-image: linear-gradient(to bottom, #950000 0%, #5a0000 100%); } /* line 258, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .privacy-policy { margin-left: 5%; display: inline-block; position: relative; top: 6px; font: 13px/15px interstate, sans-serif, arial; text-transform: uppercase; text-decoration: underline; color: #999; } /* line 270, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ #kmu .explore-mazda3-button { display: inline-block; height: 29px; padding: 0 14px; -webkit-border-radius: 2px; border-radius: 2px; background-color: #d00000; background: url(/MusaWeb/musa2/images/garage/landing/slides-design/red-button.png) no-repeat scroll 0 0 #d00000; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdlMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d00000), color-stop(100%, #7e0000)); background-image: -moz-linear-gradient(top, #d00000 0%, #7e0000 100%); background-image: -webkit-linear-gradient(top, #d00000 0%, #7e0000 100%); background-image: linear-gradient(to bottom, #d00000 0%, #7e0000 100%); font: 12px/29px interstate, sans-serif, arial; text-decoration: none; text-transform: uppercase; text-align: center; color: #fff; } /* line 278, ../../../../scss/global/_mixins.scss */ #kmu .explore-mazda3-button:hover { background-color: #950000; background: url(/MusaWeb/musa2/images/garage/landing/slides-design/red-button-hover.png) no-repeat scroll 0 0 #950000; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk1MDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVhMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #950000), color-stop(100%, #5a0000)); background-image: -moz-linear-gradient(top, #950000 0%, #5a0000 100%); background-image: -webkit-linear-gradient(top, #950000 0%, #5a0000 100%); background-image: linear-gradient(to bottom, #950000 0%, #5a0000 100%); } /* line 275, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ .touch .errortext li { float: left; display: inline; width: 30%; } /* line 281, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ .touch #kmu h2 { margin: -25px 0 4px 0; } /* line 284, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ .touch #kmu h3 { margin: 0px 0px 0px; font: 26px/26px interstate-bold-italic, sans-serif, arial; } /* line 288, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ .touch #kmu p { margin: 0 0 0px; font: 11px/17px interstate, sans-serif, arial; margin-bottom: 20px; } /* line 294, ../../../../scss/garage/2014/M3N/panels/_panel_3_KMU.scss */ .touch #kmu form fieldset > div { margin-bottom: 8px; } /* Mazda Project Mazda3 2014 Upcomming landing page File: _panel_4_Event_Promos.scss @author rafael.aguilar@possible.com @author luis.corrales@possible.com @author roberto.vasquez@possible.com @version 0.1 @created June 12th, 2014 @updated June 12th, 2014 */ /* line 18, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ #event-promo { height: auto; } /* line 20, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ #event-promo h2, #event-promo h4 { font: 1.083em/1.083em interstate, sans-serif, arial; color: #000; text-align: inherit; margin: -10px 0 0 0; } /* line 28, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ #event-promo h4 { margin: 0 0 5%; } /* line 32, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ #event-promo h3 { font: 3em/1em interstate-bold-italic, sans-serif, arial; color: #900; text-align: inherit; margin: 13px 0px; } /* line 37, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ #event-promo h3 sup { font-size: 1em; } /* line 42, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ #event-promo p { margin: 0 0 3%; font: 1.083em/1.083em interstate, sans-serif, arial; text-align: inherit; color: #666; } /* line 48, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ #event-promo p strong { color: #333; font-weight: bold; } /* line 54, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ #event-promo div.section-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* line 61, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ #event-promo div.section-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } /* line 71, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ #event-promo .section-content { width: 36%; position: relative; top: 7%; left: 11%; } /* line 78, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ #event-promo .enter-promo { display: inline-block; height: 29px; padding: 0 14px; -webkit-border-radius: 2px; border-radius: 2px; background-color: #d00000; background: url(/MusaWeb/musa2/images/garage/landing/slides-design/red-button.png) no-repeat scroll 0 0 #d00000; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QwMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdlMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d00000), color-stop(100%, #7e0000)); background-image: -moz-linear-gradient(top, #d00000 0%, #7e0000 100%); background-image: -webkit-linear-gradient(top, #d00000 0%, #7e0000 100%); background-image: linear-gradient(to bottom, #d00000 0%, #7e0000 100%); font: 12px/29px interstate, sans-serif, arial; text-decoration: none; text-transform: uppercase; text-align: center; color: #fff; margin: 3% 0 5%; font: 13px/2.23em interstate, sans-serif, arial; display: block; width: 180px; text-align: center; } /* line 278, ../../../../scss/global/_mixins.scss */ #event-promo .enter-promo:hover { background-color: #950000; background: url(/MusaWeb/musa2/images/garage/landing/slides-design/red-button-hover.png) no-repeat scroll 0 0 #950000; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk1MDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVhMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #950000), color-stop(100%, #5a0000)); background-image: -moz-linear-gradient(top, #950000 0%, #5a0000 100%); background-image: -webkit-linear-gradient(top, #950000 0%, #5a0000 100%); background-image: linear-gradient(to bottom, #950000 0%, #5a0000 100%); } /* line 87, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ #event-promo .updates-link, #event-promo .terms-link { display: block; margin: 0 0 13px; color: #333; font-size: 1.083em; line-height: 13px; font-weight: bold; text-decoration: underline; } /* line 99, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ #event-promo img.aspect { position: relative; width: 100%; } /* line 103, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ #event-promo .videoHotspot { width: 50%; position: absolute; right: 0; left: auto; margin: inherit; } /* line 111, ../../../../scss/garage/2014/M3N/panels/_panel_4_Event_Promos.scss */ .ie8 #event-promo { height: auto; }