/* This file was generated with Grunt using Compass - Last modification: Thu May 12th 2016, 11:29:40 AM *//* VLP VARIABLES */ /* 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 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/9f3ea8b1-4946-4ead-8064-c7231d5bca7d-2.eot"); src: url("/MusaWeb/musa2/fonts/interstate-bold/9f3ea8b1-4946-4ead-8064-c7231d5bca7d-2.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/interstate-bold/9f3ea8b1-4946-4ead-8064-c7231d5bca7d-3.woff") format("woff"), url("/MusaWeb/musa2/fonts/interstate-bold/9f3ea8b1-4946-4ead-8064-c7231d5bca7d-1.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/interstate-bold/9f3ea8b1-4946-4ead-8064-c7231d5bca7d-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-light/InterstateMazda-Light.eot"); src: url("/MusaWeb/musa2/fonts/interstate/InterstateMazda-Light.eot?#iefix") format("embedded-opentype"); } @font-face { font-family: 'interstate-light'; src: url("/MusaWeb/musa2/fonts/interstate-light/269a1bf2-709b-445a-9e63-7e581d8ebf14-2.eot"); src: url("/MusaWeb/musa2/fonts/interstate-light/269a1bf2-709b-445a-9e63-7e581d8ebf14-2.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/interstate-light/269a1bf2-709b-445a-9e63-7e581d8ebf14-3.woff") format("woff"), url("/MusaWeb/musa2/fonts/interstate-light/269a1bf2-709b-445a-9e63-7e581d8ebf14-1.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/interstate-light/269a1bf2-709b-445a-9e63-7e581d8ebf14-4.svg#interstate-light") format("svg"); } @font-face { font-family: 'interstate-light-italic'; src: url("/MusaWeb/musa2/fonts/interstate-light-italic/6c033260-1c09-47dd-9e9a-4a533b96c361-2.eot"); src: url("/MusaWeb/musa2/fonts/interstate-light-italic/6c033260-1c09-47dd-9e9a-4a533b96c361-2.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/interstate-light-italic/6c033260-1c09-47dd-9e9a-4a533b96c361-3.woff") format("woff"), url("/MusaWeb/musa2/fonts/interstate-light-italic/6c033260-1c09-47dd-9e9a-4a533b96c361-1.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/interstate-light-italic/6c033260-1c09-47dd-9e9a-4a533b96c361-4.svg#interstate-light-italic") format("svg"); } @font-face { font-family: 'interstate-regular-italic'; src: url("/MusaWeb/musa2/fonts/interstate-regular-italic/37c9e8d8-e679-4e45-98d6-e9e4f9a8685f-2.eot"); src: url("/MusaWeb/musa2/fonts/interstate-regular-italic/37c9e8d8-e679-4e45-98d6-e9e4f9a8685f-2.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/interstate-regular-italic/37c9e8d8-e679-4e45-98d6-e9e4f9a8685f-3.woff") format("woff"), url("/MusaWeb/musa2/fonts/interstate-regular-italic/37c9e8d8-e679-4e45-98d6-e9e4f9a8685f-1.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/interstate-regular-italic/37c9e8d8-e679-4e45-98d6-e9e4f9a8685f-4.svg#interstate-regular-italic") format("svg"); } @font-face { font-family: 'interstateCondensed'; src: url("/MusaWeb/musa2/fonts/interstate-cond/01108f82-f481-49b5-9ddd-8eaeaf8d08330-2.eot"); src: url("/MusaWeb/musa2/fonts/interstate-cond/01108f82-f481-49b5-9ddd-8eaeaf8d0833-2.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/interstate-cond/01108f82-f481-49b5-9ddd-8eaeaf8d0833-3.woff") format("woff"), url("/MusaWeb/musa2/fonts/interstate-cond/01108f82-f481-49b5-9ddd-8eaeaf8d0833-1.ttf") format("truetype"), url("/MusaWeb/musa2/fonts/interstate-cond/01108f82-f481-49b5-9ddd-8eaeaf8d0833-4.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-LightCondensed'; src: url("/MusaWeb/musa2/fonts/interstate-light-cond/0e7db0be-d034-4241-8702-7d8236b74fd2-2.eot"); src: url("/MusaWeb/musa2/fonts/interstate-light-cond/0e7db0be-d034-4241-8702-7d8236b74fd2-2.eot?#iefix") format("embedded-opentype"), url("/MusaWeb/musa2/fonts/interstate-light-cond/0e7db0be-d034-4241-8702-7d8236b74fd2-4.svg#Interstate LightCondensed") format("svg"), url("/MusaWeb/musa2/fonts/interstate-light-cond/0e7db0be-d034-4241-8702-7d8236b74fd2-3.woff") format("woff"), url("/MusaWeb/musa2/fonts/interstate-light-cond/0e7db0be-d034-4241-8702-7d8236b74fd2-1.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: '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 424, vlp/common/exterior/color/*.png */ .color-sprite, .controls-wrapper .color-active-int-new, .controls-wrapper .color-active-swatch-int, .controls-wrapper .control.interior .option.selected, .controls-wrapper .control.interior .option:hover, .controls-wrapper .color-active-swatch-int2, .controls-wrapper .control.interior.swatch2 .option.selected, .controls-wrapper .control.interior.swatch2 .option:hover, .controls-wrapper .color-active-swatch, .controls-wrapper .flatSwatch.selected, .controls-wrapper .color .selected.option.soulRedMetallic, .controls-wrapper .color .selected.option.blueReflexMica, .controls-wrapper .color .selected.option.jetBlackMica, .controls-wrapper .color .selected.option.meteorGrayMica, .controls-wrapper .color .selected.option.ceramicMetallic, .controls-wrapper .color .selected.option.arcticWhite, .controls-wrapper .color .selected.option.crystalWhitePearlMica, .controls-wrapper .flatSwatch:hover, .controls-wrapper .color .option.soulRedMetallic:hover, .controls-wrapper .color .option.blueReflexMica:hover, .controls-wrapper .color .option.jetBlackMica:hover, .controls-wrapper .color .option.meteorGrayMica:hover, .controls-wrapper .color .option.ceramicMetallic:hover, .controls-wrapper .color .option.arcticWhite:hover, .controls-wrapper .color .option.crystalWhitePearlMica:hover, .controls-wrapper .control.color .option.selected, .controls-wrapper .control.color .option:hover, .controls-wrapper .color-active-swatch2, .controls-wrapper .control.color.swatch2 .option.selected, .controls-wrapper .control.color.swatch2 .option:hover, .controls-wrapper #overview .control.color .option.selected, #overview .control.color .controls-wrapper .option.selected, .controls-wrapper #overview .control.color .option:hover, #overview .control.color .controls-wrapper .option:hover, .controls-wrapper .color-all-swatch-shadow, .controls-wrapper .shadow, .controls-wrapper .color-arcticWhite2, .controls-wrapper .color-blueReflex, .controls-wrapper .color-blueReflex2, .controls-wrapper .color-brilliantBlackClearCoat, .controls-wrapper .color-ceramicSilver2, .controls-wrapper .color-crystalBlue2, .controls-wrapper .color-crystalWhite2, .controls-wrapper .color-crystalWhitePearlMica, .controls-wrapper .color-deepCrystalBlue, .controls-wrapper .color-dolphinGrayMica, .controls-wrapper .color-dynamicBlue2, .controls-wrapper .color-int-almond, .controls-wrapper .color-int-almond_m3s, .controls-wrapper .color-int-auburn, .controls-wrapper .color-int-black, .controls-wrapper .color-int-black2, .controls-wrapper .color-int-black_m3s, .controls-wrapper .color-int-black_mx5, .controls-wrapper .color-int-nblack, .controls-wrapper .color-int-new-black, .controls-wrapper .color-int-new-tan, .controls-wrapper .color-int-ntan, .controls-wrapper .color-int-rollover_m3s, .controls-wrapper .color-int-sand, .controls-wrapper .color-int-sand2, .controls-wrapper .color-int-tan, .controls-wrapper .color-jetBlack, .controls-wrapper .color-jetBlack2, .controls-wrapper .color-jetblack3, .controls-wrapper .color-liquidSilver, .controls-wrapper .color-liquidSilver2, .controls-wrapper .color-liquidSilverMetallic, .controls-wrapper .color-meteorGray, .controls-wrapper .color-meteorGray2, .controls-wrapper .color-snowFlakeWhite, .controls-wrapper .color-snowflakeWhitePearl, .controls-wrapper .color-soulRed, .controls-wrapper .color-soulRed2, .controls-wrapper .color-titaniumFlash, .controls-wrapper .color-titaniumFlash2, .controls-wrapper .color-trueRed, .controls-wrapper .color-zealRed { background-image: url('/MusaWeb/musa2/images/vlp/common/exterior/color.png'); background-repeat: no-repeat; } /* line 8, ../../../scss/vlp/components/_color_swatches.scss */ .flatSwatch, .controls-wrapper .color .option.soulRedMetallic, .controls-wrapper .color .option.blueReflexMica, .controls-wrapper .color .option.jetBlackMica, .controls-wrapper .color .option.meteorGrayMica, .controls-wrapper .color .option.ceramicMetallic, .controls-wrapper .color .option.arcticWhite, .controls-wrapper .color .option.crystalWhitePearlMica { padding: 9px 7px; width: 46px !important; height: 56px !important; } /* line 12, ../../../scss/vlp/components/_color_swatches.scss */ .flatSwatch span, .controls-wrapper .color .option.soulRedMetallic span, .controls-wrapper .color .option.blueReflexMica span, .controls-wrapper .color .option.jetBlackMica span, .controls-wrapper .color .option.meteorGrayMica span, .controls-wrapper .color .option.ceramicMetallic span, .controls-wrapper .color .option.arcticWhite span, .controls-wrapper .color .option.crystalWhitePearlMica span { border-radius: 100% !important; width: 31px !important; height: 30px !important; background-image: none !important; } /* line 18, ../../../scss/vlp/components/_color_swatches.scss */ .flatSwatch.selected, .controls-wrapper .color .selected.option.soulRedMetallic, .controls-wrapper .color .selected.option.blueReflexMica, .controls-wrapper .color .selected.option.jetBlackMica, .controls-wrapper .color .selected.option.meteorGrayMica, .controls-wrapper .color .selected.option.ceramicMetallic, .controls-wrapper .color .selected.option.arcticWhite, .controls-wrapper .color .selected.option.crystalWhitePearlMica, .flatSwatch:hover, .controls-wrapper .color .option.soulRedMetallic:hover, .controls-wrapper .color .option.blueReflexMica:hover, .controls-wrapper .color .option.jetBlackMica:hover, .controls-wrapper .color .option.meteorGrayMica:hover, .controls-wrapper .color .option.ceramicMetallic:hover, .controls-wrapper .color .option.arcticWhite:hover, .controls-wrapper .color .option.crystalWhitePearlMica:hover { display: block; } /* line 23, ../../../scss/vlp/components/_color_swatches.scss */ .controls-wrapper { width: 100%; z-index: 29; text-align: center; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-active-int-new { background-position: -4px 0; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-active-swatch-int, .controls-wrapper .control.interior .option.selected, .controls-wrapper .control.interior .option:hover { background-position: -6px -79px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-active-swatch-int2, .controls-wrapper .control.interior.swatch2 .option.selected, .controls-wrapper .control.interior.swatch2 .option:hover { background-position: -4px -165px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-active-swatch, .controls-wrapper .flatSwatch.selected, .controls-wrapper .color .selected.option.soulRedMetallic, .controls-wrapper .color .selected.option.blueReflexMica, .controls-wrapper .color .selected.option.jetBlackMica, .controls-wrapper .color .selected.option.meteorGrayMica, .controls-wrapper .color .selected.option.ceramicMetallic, .controls-wrapper .color .selected.option.arcticWhite, .controls-wrapper .color .selected.option.crystalWhitePearlMica, .controls-wrapper .flatSwatch:hover, .controls-wrapper .color .option.soulRedMetallic:hover, .controls-wrapper .color .option.blueReflexMica:hover, .controls-wrapper .color .option.jetBlackMica:hover, .controls-wrapper .color .option.meteorGrayMica:hover, .controls-wrapper .color .option.ceramicMetallic:hover, .controls-wrapper .color .option.arcticWhite:hover, .controls-wrapper .color .option.crystalWhitePearlMica:hover, .controls-wrapper .control.color .option.selected, .controls-wrapper .control.color .option:hover { background-position: -4px -244px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-active-swatch2, .controls-wrapper .control.color.swatch2 .option.selected, .controls-wrapper .control.color.swatch2 .option:hover, .controls-wrapper #overview .control.color .option.selected, #overview .control.color .controls-wrapper .option.selected, .controls-wrapper #overview .control.color .option:hover, #overview .control.color .controls-wrapper .option:hover { background-position: 0 -330px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-all-swatch-shadow, .controls-wrapper .shadow { background-position: -4px -413px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-arcticWhite2 { background-position: 0 -499px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-blueReflex { background-position: -4px -582px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-blueReflex2 { background-position: 0 -668px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-brilliantBlackClearCoat { background-position: -4px -751px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-ceramicSilver2 { background-position: 0 -837px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-crystalBlue2 { background-position: 0 -920px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-crystalWhite2 { background-position: 0 -1003px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-crystalWhitePearlMica { background-position: -4px -1086px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-deepCrystalBlue { background-position: -4px -1172px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-dolphinGrayMica { background-position: -4px -1258px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-dynamicBlue2 { background-position: 0 -1344px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-almond { background-position: -6px -1427px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-almond_m3s { background-position: -4px -1513px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-auburn { background-position: -4px -1592px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-black { background-position: -6px -1667px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-black2 { background-position: -4px -1753px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-black_m3s { background-position: -4px -1832px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-black_mx5 { background-position: -9px -1911px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-nblack { background-position: -9px -1977px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-new-black { background-position: -9px -2043px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-new-tan { background-position: -9px -2109px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-ntan { background-position: -9px -2175px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-rollover_m3s { background-position: -4px -2241px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-sand { background-position: -6px -2320px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-sand2 { background-position: -4px -2406px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-int-tan { background-position: -9px -2485px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-jetBlack { background-position: -4px -2551px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-jetBlack2 { background-position: 0 -2637px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-jetblack3 { background-position: 0 -2720px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-liquidSilver { background-position: -4px -2803px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-liquidSilver2 { background-position: 0 -2889px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-liquidSilverMetallic { background-position: -4px -2972px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-meteorGray { background-position: -4px -3058px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-meteorGray2 { background-position: 0 -3144px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-snowFlakeWhite { background-position: 0 -3227px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-snowflakeWhitePearl { background-position: -4px -3310px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-soulRed { background-position: -4px -3396px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-soulRed2 { background-position: 0 -3482px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-titaniumFlash { background-position: -4px -3565px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-titaniumFlash2 { background-position: 0 -3651px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-trueRed { background-position: -4px -3734px; } /* line 84, ../../../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */ .controls-wrapper .color-zealRed { background-position: -4px -3820px; } /* line 34, ../../../scss/vlp/components/_color_swatches.scss */ .controls-wrapper .control.color .option.selected, .controls-wrapper .control.color .option:hover { display: block; } /* line 39, ../../../scss/vlp/components/_color_swatches.scss */ .controls-wrapper .control.interior .option.selected, .controls-wrapper .control.interior .option:hover { display: block; } /* line 48, ../../../scss/vlp/components/_color_swatches.scss */ .controls-wrapper .control.color.swatch2 .option.selected, .controls-wrapper .control.color.swatch2 .option:hover { display: block; } /* line 59, ../../../scss/vlp/components/_color_swatches.scss */ .controls-wrapper .control.interior.swatch2 .option.selected, .controls-wrapper .control.interior.swatch2 .option:hover { display: block; } /* line 69, ../../../scss/vlp/components/_color_swatches.scss */ .controls-wrapper .color .option span { border-radius: 100%; width: 31px; height: 30px; } /* line 76, ../../../scss/vlp/components/_color_swatches.scss */ .controls-wrapper .color .option.soulRedMetallic span { background-color: #af1120; } /* line 82, ../../../scss/vlp/components/_color_swatches.scss */ .controls-wrapper .color .option.blueReflexMica span { background-color: #3b5666; } /* line 88, ../../../scss/vlp/components/_color_swatches.scss */ .controls-wrapper .color .option.jetBlackMica span { background-color: #101312; } /* line 94, ../../../scss/vlp/components/_color_swatches.scss */ .controls-wrapper .color .option.meteorGrayMica span { background-color: #616463; } /* line 100, ../../../scss/vlp/components/_color_swatches.scss */ .controls-wrapper .color .option.ceramicMetallic span { background-color: #959a9b; } /* line 106, ../../../scss/vlp/components/_color_swatches.scss */ .controls-wrapper .color .option.arcticWhite span { background-color: #d5d8d5; } /* line 112, ../../../scss/vlp/components/_color_swatches.scss */ .controls-wrapper .color .option.crystalWhitePearlMica span { background-color: #dfdfdf; } /* TERTIARY NAV */ /* line 2, ../../../scss/vlp/M3S/_navigation.scss */ #main_wrap #subnav_vehicle_info { width: 185px; } /* line 4, ../../../scss/vlp/M3S/_navigation.scss */ #main_wrap #subnav_vehicle_info h3 { color: #cccccc; margin: 0; font-size: 10px; line-height: 12px; } /* line 10, ../../../scss/vlp/M3S/_navigation.scss */ #main_wrap #subnav_vehicle_info h2 { font: 16px/10px mazda-bold, sans-serif, arial; } /* line 12, ../../../scss/vlp/M3S/_navigation.scss */ #main_wrap #subnav_vehicle_info h2 span { font: 16px/10px mazda-bold, sans-serif, arial; } /* line 18, ../../../scss/vlp/M3S/_navigation.scss */ #garage_subNav li.drop { background: url("/MusaWeb/musa2/images/garage/subnav_down_white.gif") no-repeat scroll 9px 6px transparent; } /* line 20, ../../../scss/vlp/M3S/_navigation.scss */ #garage_subNav li.drop ul li { margin: 0 5px !important; } /* line 1, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews { height: 374px !important; background-color: #e8e8e8 !important; } /* line 5, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews sup { position: static; } /* line 9, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews .sideArrowButton { display: block; } /* line 11, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews .mboxDefault, #awards-reviews #quote-slide, #awards-reviews .container, #awards-reviews #slides, #awards-reviews .slidejs-container { height: 100%; } /* line 15, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews .panel-title { color: #d00000 !important; padding-top: 0.5%; margin-bottom: -2%; z-index: 99; display: block; position: relative; } /* line 26, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews #quote-slide .container #slides .slidesjs-container { margin-top: 0px; } /* line 30, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews #quote-slide .container #slides .slidesjs-container .slidesjs-control { padding-top: 1%; height: 100% !important; } /* line 34, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews #quote-slide .container #slides .slidesjs-container .slidesjs-control .slide .publication-container { min-height: 11.57em; } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { /* line 34, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews #quote-slide .container #slides .slidesjs-container .slidesjs-control .slide .publication-container { width: 80%; margin: auto; } } @media (min-width: 1200px) and (max-width: 1299px) { /* line 34, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews #quote-slide .container #slides .slidesjs-container .slidesjs-control .slide .publication-container { min-height: 9.3em; } } @media (min-width: 1300px) { /* line 34, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews #quote-slide .container #slides .slidesjs-container .slidesjs-control .slide .publication-container { min-height: 6.3em; } } /* line 51, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews #quote-slide .container #slides .slidesjs-container .slidesjs-control .slide .img-wrap-link h2 { margin-top: 0 !important; color: #000 !important; font-size: 14px !important; font-family: interstate-regular, interstatemazda-regular, sans-serif, arial !important; } /* line 58, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews #quote-slide .container #slides .slidesjs-container .slidesjs-control .slide .img-wrap-link h3 { margin-top: 10px; margin-bottom: 0px; color: #000; font-family: interstate-bold; font-size: 14px; } /* line 65, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews #quote-slide .container #slides .slidesjs-container .slidesjs-control .slide .img-wrap-link .imageAlign { height: 160px; padding-top: 50px; } /* line 69, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews #quote-slide .container #slides .slidesjs-container .slidesjs-control .slide .img-wrap-link a { text-decoration: underline; color: #999; font-size: 14px; display: block; } /* line 76, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews #quote-slide .container #slides .slidesjs-container .slidesjs-control .slide .double { width: 50%; float: left; position: relative; height: auto; text-align: center; padding: 0 30px; } /* line 92, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews.size-975 h2 { font-size: 1.9em !important; } /* line 95, ../../../scss/vlp/M3S/_awards-reviews.scss */ #awards-reviews.size-975 h3 { font-size: 1.8em !important; } /* line 100, ../../../scss/vlp/M3S/_awards-reviews.scss */ .tooltip-box .tooltip-text a { color: #d00000; } /* line 103, ../../../scss/vlp/M3S/_awards-reviews.scss */ .singleAccolade { margin-top: -10%; } /* PERFORMANCE PANEL */ /* line 2, ../../../scss/vlp/M3S/_performance.scss */ #performance { background-image: none; text-align: left; } /* line 6, ../../../scss/vlp/M3S/_performance.scss */ #performance .panel-title { width: 100%; padding-top: 46px; color: #000000; text-align: left; padding-left: 8%; } /* line 14, ../../../scss/vlp/M3S/_performance.scss */ #performance .panel-header { padding-top: 2px; padding-bottom: 8px; color: #CC0000; font-family: interstate,sans-serif,arial,sans-serif,arial; font-size: 3.4em; text-align: left; padding-left: 8%; } /* line 24, ../../../scss/vlp/M3S/_performance.scss */ #performance .panel-copy { color: #000000; text-align: left; padding-left: 8%; line-height: 1.4em; } /* line 32, ../../../scss/vlp/M3S/_performance.scss */ #performance .engine-stats { position: relative; width: 21%; padding-left: 8%; margin-top: 2%; font-family: interstate-bold,sans-serif,arial,sans-serif,arial; } /* line 39, ../../../scss/vlp/M3S/_performance.scss */ #performance .engine-stats .stats-header { text-align: center; font-size: 1.2em; text-transform: capitalize; font-family: interstate-bold,sans-serif,arial,sans-serif,arial; } /* line 45, ../../../scss/vlp/M3S/_performance.scss */ #performance .engine-stats .stat-title { font-size: 1.2em; text-transform: capitalize; font-family: interstate-bold,sans-serif,arial,sans-serif,arial; } /* line 50, ../../../scss/vlp/M3S/_performance.scss */ #performance .engine-stats .stat-value { font-size: 9em; font-family: interstate-bold,sans-serif,arial,sans-serif,arial; float: left; } /* line 55, ../../../scss/vlp/M3S/_performance.scss */ #performance .engine-stats .stat-label { font-size: 2.3em; font-family: interstate-bold,sans-serif,arial,sans-serif,arial; } /* line 59, ../../../scss/vlp/M3S/_performance.scss */ #performance .engine-stats .stat-mpg .stat-label { padding-top: 20%; } /* line 62, ../../../scss/vlp/M3S/_performance.scss */ #performance .engine-stats .stat-mpg .stat-label .tooltip-disclaimer-link { text-decoration: line-through !important; } /* line 66, ../../../scss/vlp/M3S/_performance.scss */ #performance .engine-stats .stat-horsepower { clear: both; margin-top: 4%; } /* line 70, ../../../scss/vlp/M3S/_performance.scss */ #performance .engine-stats .stats-plus { position: absolute; font-size: 5em; top: 40%; margin-left: 27%; font-family: interstate,sans-serif,arial,sans-serif,arial; } /* line 6, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .section-content .panel-title { padding-top: 36px; } /* line 10, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .section-content .panel-header { padding-top: 4px; } /* line 16, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .panel-title { color: #000000; padding-top: 45px; } /* line 21, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .panel-header { color: #CC0000; font-family: interstate, sans-serif, arial, sans-serif, arial; padding-top: 0; } /* line 27, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design sup { font-size: 0.7em; vertical-align: text-top; } /* line 34, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design #bluetooth-popup h3 { text-align: center; margin-top: 48%; padding-bottom: 2%; font: 1.45em/1em interstate-bold, sans-serif, arial; font-style: italic; } /* line 41, ../../../scss/vlp/M3S/_interior-design.scss */ .ie8 #interior-design #bluetooth-popup h3, .ie9 #interior-design #bluetooth-popup h3 { padding-bottom: 3%; } /* line 46, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design #bluetooth-popup p { text-align: center; } /* line 49, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design #bluetooth-popup p sup { font-size: 0.7em; vertical-align: top; position: relative; top: 0.5em; } /* line 59, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design #bluetooth-popup .links-wrapper { padding-top: 1%; text-align: center; } /* line 63, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design #bluetooth-popup .links-wrapper sup { vertical-align: top; font-size: 0.7em; position: relative; top: -0.5em; } /* line 72, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design #seats-popup h3 { text-align: center; margin-top: 60%; } /* line 76, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design #seats-popup p { text-align: center; margin-top: 2%; } /* line 83, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .overlay-content h2 { margin-top: 2%; } /* line 87, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .overlay-content p { color: #ffffff; font-size: 1.3em; line-height: 1.5em; text-align: center; font-weight: normal; } /* line 94, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .overlay-content .panel-title { padding-top: 17px; color: #ffffff; font-size: 13px; } /* line 100, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .overlay-content .panel-header { margin-bottom: 12px; margin-top: 5px; font: 3.4em/1.13em interstate, sans-serif, arial; font-style: normal; color: #ffffff; } /* line 108, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .overlay-content .btn { font-size: 16px; line-height: 20px; padding-left: 4%; padding-right: 4%; margin-top: 20px; } /* line 116, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .overlay-content .two-column-list { margin-top: 22px; } /* line 120, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .overlay-content .close-overlay { top: 65px; } /* line 126, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design #display-screen-overlay .overlay-content p { color: #CC0000; } /* line 129, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design #display-screen-overlay .overlay-content .panel-title { color: #CC0000; } /* line 133, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design #display-screen-overlay .overlay-content .panel-header { color: #CC0000; } /* line 138, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design #display-screen-overlay .overlay-content.bottom .panel-content-text { padding: 0 10%; bottom: 13%; } /* line 144, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design #display-screen-overlay .overlay-content .two-column-list { padding-left: 11.5%; } /* line 149, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .entertainment-features { margin-top: 8%; } /* line 156, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .entertainment-features ul { margin-top: 1%; float: left; } /* line 160, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .entertainment-features ul.conectivity { position: absolute; left: 21%; width: 26%; font-size: 1.1em; } /* line 167, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .entertainment-features ul.audio { position: absolute; right: 17%; width: 32%; font-size: 1.1em; } /* line 174, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design .entertainment-features ul li { font-size: 1.2em; line-height: 1.4em; color: #999999; } /* line 183, ../../../scss/vlp/M3S/_interior-design.scss */ #interior-design #dashboard-overlay .panel-content-text { background-color: rgba(0, 0, 0, 0.85); box-shadow: 0 0 65px 20px #000000; padding-bottom: 3%; } /* line 43, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design body { background: black; } /* line 48, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper { width: 100%; height: 100%; margin: 0 auto; position: relative; } /* line 56, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .section-header { font-family: "interstate", Sans-Serif; font-size: 12px; text-transform: uppercase; color: #999; text-align: center; width: 100%; margin-top: 1.3em; } /* line 66, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .headers { width: 100%; margin: 0 auto; position: absolute; overflow: visible; top: 2%; bottom: 4%; } /* line 73, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .headers .app-header { left: 5%; right: 5%; position: absolute; opacity: 0; filter: alpha(opacity=0); text-align: center; color: white; height: 100%; } /* line 82, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .headers .app-header.selected { z-index: 11; } /* line 85, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .headers .app-header .title { font-size: 3em; margin-top: 0.5em; letter-spacing: -0.03em; font-family: "interstate-bold", Sans-Serif; font-style: italic; color: #900; text-transform: uppercase; line-height: 1.1em; } /* line 95, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .headers .app-header .description { margin-top: 0.4em; margin-left: 6%; margin-right: 6%; font-size: 1.1em; line-height: 1.7em; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif, arial; color: white; } /* line 105, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .headers .app-header .selected-title { font-family: "interstate-light", Sans-Serif; color: white; position: absolute; bottom: 20%; width: 100%; text-align: center; font-size: 2em; letter-spacing: 0.05em; text-transform: capitalize; display: block; } /* line 119, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .headers .app-header .default-instrucction { color: #900; display: block; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif, arial; width: 100%; bottom: 25.5%; font-size: 1.3em; position: absolute; text-align: center; text-transform: none; } /* line 130, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .headers .app-header .subcopy { display: block; margin: 0 auto; position: absolute; left: 27%; right: 26%; top: 38%; color: white; } /* line 142, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .headers .app-header .subcopy .column { font-size: 0.8em; font-family: "interstate-light-italic", Sans-Serif; float: left; font-weight: lighter; text-align: left; line-height: 2; } /* line 150, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .headers .app-header .subcopy .column.col1 { width: 39%; } /* line 151, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .headers .app-header .subcopy .column.col2 { width: 16%; } /* line 152, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .headers .app-header .subcopy .column.col3 { width: 45%; } /* line 154, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .headers .app-header .subcopy .column.col3 .minustext { text-transform: lowercase; } /* line 160, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .headers .app-header:nth-child(1) { opacity: 1; filter: alpha(opacity=0); } /* line 171, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .layout { position: absolute; bottom: 15%; left: 25.8%; right: 25.8%; overflow: hidden; height: 41%; } /* line 181, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .layout .icon { position: absolute; display: block; width: 20%; height: 20%; overflow: visible; } /* line 189, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .layout .icon img { width: 100%; height: auto; } /* line 193, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .layout .icon .baseimage { display: block; position: absolute; width: 100%; height: 100%; } /* line 199, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .layout .icon .baseimage .hover, #interior-design .dash-animation-wrapper .layout .icon .baseimage .reflect { position: absolute; top: 0; left: 0; } /* line 204, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .layout .icon .baseimage .hover { opacity: 0; } /* line 207, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .layout .icon .baseimage .reflect { top: 100%; height: 50%; opacity: 0.09; } /* line 213, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .layout .icon .glow { position: absolute; display: block; opacity: 0; left: -50%; top: -50%; bottom: -150%; right: -50%; z-index: -50; pointer-events: none; } /* line 226, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .layout .icon1 { bottom: 38%; left: -4%; height: 16%; width: 16%; } /* line 232, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .layout .icon2 { bottom: 60%; left: 15%; } /* line 236, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .layout .icon3 { position: absolute; text-align: center; vertical-align: middle; left: 40%; bottom: 68%; } /* line 243, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .layout .icon3 .baseimage { width: 100%; height: auto; } /* line 248, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .layout .icon4 { bottom: 60%; right: 15%; } /* line 252, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .layout .icon5 { height: 16%; width: 16%; bottom: 38%; right: -4%; } /* line 260, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ #interior-design .dash-animation-wrapper .dashbackground { width: 100%; height: auto; margin: 0 auto; display: block; margin-top: 5px; } /* line 198, ../../../scss/vlp/M3S/_interior-design.scss */ .vt #interior-design .dash-animation-wrapper .headers .app-header .title { font-size: 2.4em !important; } /* line 205, ../../../scss/vlp/M3S/_interior-design.scss */ .vt #interior-design #bluetooth-popup h3 { margin-top: 50% !important; padding: 0 29px; line-height: 1.1em; } /* line 211, ../../../scss/vlp/M3S/_interior-design.scss */ .vt #interior-design #bluetooth-popup p { padding: 2px 17px; line-height: 15px; } /* line 217, ../../../scss/vlp/M3S/_interior-design.scss */ .vt #interior-design #seats-popup h3 { margin-top: 50% !important; line-height: 1.2em; font-family: interstate-bold, sans-serif, arial, sans-serif, arial; font-style: italic; } /* line 223, ../../../scss/vlp/M3S/_interior-design.scss */ .vt #interior-design #seats-popup p { padding: 0 10%; } /* line 233, ../../../scss/vlp/M3S/_interior-design.scss */ .ko #interior-design #bluetooth-popup p { padding: 0 10%; } /* line 238, ../../../scss/vlp/M3S/_interior-design.scss */ .ko #interior-design #seats-popup p { padding: 0 15%; } /* line 248, ../../../scss/vlp/M3S/_interior-design.scss */ .zh #interior-design #bluetooth-popup p { padding: 0 10%; } /* line 253, ../../../scss/vlp/M3S/_interior-design.scss */ .zh #interior-design #seats-popup p { padding: 0 15%; } /* line 3, ../../../scss/vlp/M3S/_build-and-price.scss */ #build-and-price .panel-title { text-align: left; } /* line 6, ../../../scss/vlp/M3S/_build-and-price.scss */ #build-and-price .panel-header { color: #990000; text-align: left; } /* line 3, ../../../scss/vlp/M3S/_exterior-view.scss */ #overview .section-content .panel-header, #overview .section-content .panel-copy { color: white; } /* line 7, ../../../scss/vlp/M3S/_exterior-view.scss */ #overview .section-content .panel-copy { font-family: interstate-light,interstatemazda-light,sans-serif,arial; font-size: 1.5em; letter-spacing: 0.2em; } /* line 14, ../../../scss/vlp/M3S/_exterior-view.scss */ #overview .buttons-wrap .btn { display: none; } /* line 17, ../../../scss/vlp/M3S/_exterior-view.scss */ #overview .buttons-wrap #extViewBtn4 { display: inline-block; height: 35px; font-size: 1.5em; padding: 13px 20px; min-width: 260px; } /* line 26, ../../../scss/vlp/M3S/_exterior-view.scss */ #overview .controls-wrapper .option { width: 55px; height: 53px; } /* line 32, ../../../scss/vlp/M3S/_exterior-view.scss */ #overview .control.color .option.selected, #overview .control.color .option:hover { display: block; } /* line 37, ../../../scss/vlp/M3S/_exterior-view.scss */ #overview .control .option-text { color: #ffffff; } /* line 42, ../../../scss/vlp/M3S/_exterior-view.scss */ #overview .buttons-wrap #extViewBtn2, #overview .buttons-wrap #extViewBtn3 { display: none; } /* line 45, ../../../scss/vlp/M3S/_exterior-view.scss */ #overview .buttons-wrap #extViewBtn4 { height: 35px; font-size: 1.5em; padding: 13px 20px; min-width: 260px; } /* line 4, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology .wrapper-slider .static-text-layer { position: relative; top: 67%; left: 6%; width: 100%; margin-top: 0; margin-left: 0; text-align: right; } /* line 15, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology .wrapper-slider #layer4 .text-wrapper { top: 66.4%; } /* line 19, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology .wrapper-slider .text-wrapper { position: absolute; top: 67%; width: inherit; } /* line 25, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology .wrapper-slider .drag .arrow-left { cursor: pointer; top: 42%; } /* line 31, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology .wrapper-slider .drag.rightDrag .arrow-left { background-image: none; } /* line 34, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology .wrapper-slider .drag.rightDrag .arrow-right { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 5-7 */ filter: alpha(opacity=75); /* Netscape */ -moz-opacity: 0.75; /* Safari 1.x */ -khtml-opacity: 0.75; /* Good browsers */ opacity: 0.75; } /* line 45, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .ie8 #skyactiv-technology .wrapper-slider .drag.rightDrag .arrow-right, .ie9 #skyactiv-technology .wrapper-slider .drag.rightDrag .arrow-right { filter: none; } /* line 51, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology .wrapper-slider #drag1 .arrow-left { width: 155%; } /* line 53, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology .wrapper-slider #drag1 .arrow-left .user-direction-copy { position: absolute; top: 43%; left: 32%; font-size: 0.94em; color: #990000; font-weight: bold; line-height: 1.2em; } /* line 65, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology .curtain-content { position: relative; width: 75%; } /* line 68, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology .curtain-content h2.panel-title { width: auto; font-size: 1.45em; text-align: right; position: relative; top: 1%; color: #999; padding-top: 0; line-height: 1.11em; } /* line 78, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology .curtain-content h3.panel-header { font-size: 3.73em; text-align: right; color: #990000; position: relative; top: 1%; margin-top: 1%; } /* line 86, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology .curtain-content p.panel-copy { margin-top: 1%; font-size: 1.35em; text-align: right; color: #666; line-height: 1.6em; } /* line 96, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology .popup-content h3 { position: relative; text-align: center; font-size: 14px; } /* line 101, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology .popup-content p { position: relative; color: #666; text-align: center; font-size: 12px; } /* line 110, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer2 .curtain-content { top: 51%; left: 6%; } /* line 116, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer2 #engine-hs-popup h3 { top: 46%; } /* line 119, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer2 #engine-hs-popup p { top: 50%; line-height: 1.6em; } /* line 123, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer2 #engine-hs-popup img { top: 1%; height: 101%; } /* line 129, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer2 #transmission-hs-popup h3 { top: 49%; } /* line 132, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer2 #transmission-hs-popup p { top: 50%; line-height: 1.6em; } /* line 137, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer2 #transmission-hs-popup img { top: 1%; height: 101%; } /* line 143, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer2 #acceleration-hs-popup h3 { top: 50%; } /* line 146, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer2 #acceleration-hs-popup p { top: 55%; } /* line 149, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer2 #acceleration-hs-popup img { top: 1%; height: 101%; } /* line 156, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer3 .curtain-content { position: relative; top: 56.4%; left: 6%; } /* line 164, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer3 .inner .popup-content img { height: 102%; top: 0.51%; } /* line 171, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer3 #strength-hs-popup h3 { top: 21%; } /* line 174, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer3 #strength-hs-popup p { top: 26%; } /* line 179, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer3 #safer-hs-popup h3 { top: 26%; } /* line 182, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer3 #safer-hs-popup p { top: 33%; } /* line 187, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer4 { height: 101%; } /* line 189, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer4 .wrapper-slider { position: relative; top: 0; } /* line 194, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer4 .inner img { height: 100.2%; } /* line 198, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer4 .inner .popup-content img { height: 102%; top: 0.5%; } /* line 204, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer4 .curtain-content { position: relative; top: 46%; left: 9%; } /* line 208, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer4 .curtain-content a.btn-primary { margin-top: 1.5%; float: right; } /* line 214, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer4 #macPherson-hs-popup p { top: 21%; } /* line 219, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer4 #traction-hs-popup p { top: 28%; } /* line 223, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer4 #stabilizer-hs-popup { top: 26.5%; } /* line 225, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer4 #stabilizer-hs-popup p { top: 40%; } /* line 230, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology #layer4 #independent-rear-hs-popup p { top: 29%; } /* line 235, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ #skyactiv-technology sup { vertical-align: text-top; font-size: 0.8em; } /* line 245, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .ko #skyactiv-technology .curtain-content { margin-left: 5%; } /* line 249, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .ko #skyactiv-technology .popup-text h3 { padding: 0 15%; } /* line 255, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .ko #skyactiv-technology #strength-hs-popup h3 { top: 30% !important; } /* line 258, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .ko #skyactiv-technology #strength-hs-popup p { top: 39% !important; } /* line 263, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .ko #skyactiv-technology #safer-hs-popup h3 { top: 35% !important; } /* line 266, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .ko #skyactiv-technology #safer-hs-popup p { top: 44% !important; } /* line 271, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .ko #skyactiv-technology #macPherson-hs-popup p { top: 34% !important; } /* line 276, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .ko #skyactiv-technology #independent-rear-hs-popup p { top: 43% !important; } /* line 285, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .vt #skyactiv-technology .curtain-content { margin-left: 5%; } /* line 287, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .vt #skyactiv-technology .curtain-content h3.panel-header { font-size: 3em !important; } /* line 292, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .vt #skyactiv-technology .popup-text h3 { padding: 0 15%; font-family: interstate-bold, sans-serif, arial, sans-serif, arial; font-style: italic; line-height: 1.2em; } /* line 298, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .vt #skyactiv-technology .popup-text p { padding: 0 9%; line-height: 1.4em !important; } /* line 304, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .vt #skyactiv-technology #transmission-hs-popup h3 { top: 42% !important; } /* line 307, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .vt #skyactiv-technology #transmission-hs-popup p { top: 42% !important; font-size: 11.4px; line-height: 1.3em !important; } /* line 314, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .vt #skyactiv-technology #macPherson-hs-popup p { top: 34% !important; } /* line 319, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .vt #skyactiv-technology #engine-hs-popup h3 { top: 43% !important; } /* line 322, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .vt #skyactiv-technology #engine-hs-popup p { top: 44% !important; font-size: 11.4px; padding: 0px 11% !important; } /* line 333, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .zh #skyactiv-technology .curtain-content { margin-left: 5%; } /* line 338, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .zh #skyactiv-technology .popup-text h3 { padding: 0 15%; } /* line 341, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .zh #skyactiv-technology .popup-text p { padding: 0 10%; } /* line 347, ../../../scss/vlp/M3S/_skyactiv_technology.scss */ .zh #skyactiv-technology #macPherson-hs-popup p { top: 36% !important; } /* line 17, ../../../scss/vlp/M3S/_braking.scss */ #braking.panel .bottom-content .car-icon { left: 14%; top: 6%; } /* line 22, ../../../scss/vlp/M3S/_braking.scss */ #braking.panel .bottom-content .copy { left: 30%; bottom: 48%; } /* line 26, ../../../scss/vlp/M3S/_braking.scss */ #braking.panel .bottom-content a.video-btn { bottom: 46%; left: 30%; } /* line 38, ../../../scss/vlp/M3S/_braking.scss */ .vt #braking.panel .copy { width: 60%; } /* line 6, ../../../scss/vlp/M3S/_safety.scss */ #safety.safety-static .section-content .panel-header sup { font-size: 0.7em; } /* line 12, ../../../scss/vlp/M3S/_safety.scss */ #safety.safety-static .background-car { position: absolute; right: 20%; z-index: 20; width: 24%; } /* line 19, ../../../scss/vlp/M3S/_safety.scss */ #safety.safety-static .background-lights { position: absolute; right: 20%; z-index: 11; width: 24%; } /* line 25, ../../../scss/vlp/M3S/_safety.scss */ #safety.safety-static .slides { z-index: 15; } /* line 28, ../../../scss/vlp/M3S/_safety.scss */ #safety.safety-static .slides .slide .bg { height: auto; top: 20%; right: 20%; width: 24%; } /* line 34, ../../../scss/vlp/M3S/_safety.scss */ #safety.safety-static .slides .slide .slides-disclaimer { left: 58%; width: 20%; text-align: center; } /* line 41, ../../../scss/vlp/M3S/_safety.scss */ #safety.safety-static .slides .slide .section-content .panel-header sup { font-size: 0.7em; } /* line 44, ../../../scss/vlp/M3S/_safety.scss */ #safety.safety-static .slides .slide .section-content .panel-header .lower { text-transform: lowercase; font-family: interstate, sans-serif, arial; } /* line 50, ../../../scss/vlp/M3S/_safety.scss */ #safety.safety-static .slides .slide .section-content .features .feature { padding-right: 0px; } /* line 52, ../../../scss/vlp/M3S/_safety.scss */ #safety.safety-static .slides .slide .section-content .features .feature p { width: 95%; padding-top: 0.7%; } /* line 56, ../../../scss/vlp/M3S/_safety.scss */ #safety.safety-static .slides .slide .section-content .features .feature .image-icon { padding: 4% 0 1% 0; margin-right: 80%; } /* line 43, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ body { background: black; } /* line 48, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper { width: 100%; height: 100%; margin: 0 auto; position: relative; } /* line 56, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .section-header { font-family: "interstate", Sans-Serif; font-size: 12px; text-transform: uppercase; color: #999; text-align: center; width: 100%; margin-top: 1.3em; } /* line 66, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .headers { width: 100%; margin: 0 auto; position: absolute; overflow: visible; top: 2%; bottom: 4%; } /* line 73, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .headers .app-header { left: 5%; right: 5%; position: absolute; opacity: 0; filter: alpha(opacity=0); text-align: center; color: white; height: 100%; } /* line 82, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .headers .app-header.selected { z-index: 11; } /* line 85, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .headers .app-header .title { font-size: 3em; margin-top: 0.5em; letter-spacing: -0.03em; font-family: "interstate-bold", Sans-Serif; font-style: italic; color: #900; text-transform: uppercase; line-height: 1.1em; } /* line 95, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .headers .app-header .description { margin-top: 0.4em; margin-left: 6%; margin-right: 6%; font-size: 1.1em; line-height: 1.7em; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif, arial; color: white; } /* line 105, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .headers .app-header .selected-title { font-family: "interstate-light", Sans-Serif; color: white; position: absolute; bottom: 20%; width: 100%; text-align: center; font-size: 2em; letter-spacing: 0.05em; text-transform: capitalize; display: block; } /* line 119, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .headers .app-header .default-instrucction { color: #900; display: block; font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif, arial; width: 100%; bottom: 25.5%; font-size: 1.3em; position: absolute; text-align: center; text-transform: none; } /* line 130, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .headers .app-header .subcopy { display: block; margin: 0 auto; position: absolute; left: 27%; right: 26%; top: 38%; color: white; } /* line 142, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .headers .app-header .subcopy .column { font-size: 0.8em; font-family: "interstate-light-italic", Sans-Serif; float: left; font-weight: lighter; text-align: left; line-height: 2; } /* line 150, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .headers .app-header .subcopy .column.col1 { width: 39%; } /* line 151, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .headers .app-header .subcopy .column.col2 { width: 16%; } /* line 152, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .headers .app-header .subcopy .column.col3 { width: 45%; } /* line 154, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .headers .app-header .subcopy .column.col3 .minustext { text-transform: lowercase; } /* line 160, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .headers .app-header:nth-child(1) { opacity: 1; filter: alpha(opacity=0); } /* line 171, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .layout { position: absolute; bottom: 15%; left: 25.8%; right: 25.8%; overflow: hidden; height: 41%; } /* line 181, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .layout .icon { position: absolute; display: block; width: 20%; height: 20%; overflow: visible; } /* line 189, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .layout .icon img { width: 100%; height: auto; } /* line 193, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .layout .icon .baseimage { display: block; position: absolute; width: 100%; height: 100%; } /* line 199, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .layout .icon .baseimage .hover, .dash-animation-wrapper .layout .icon .baseimage .reflect { position: absolute; top: 0; left: 0; } /* line 204, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .layout .icon .baseimage .hover { opacity: 0; } /* line 207, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .layout .icon .baseimage .reflect { top: 100%; height: 50%; opacity: 0.09; } /* line 213, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .layout .icon .glow { position: absolute; display: block; opacity: 0; left: -50%; top: -50%; bottom: -150%; right: -50%; z-index: -50; pointer-events: none; } /* line 226, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .layout .icon1 { bottom: 38%; left: -4%; height: 16%; width: 16%; } /* line 232, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .layout .icon2 { bottom: 60%; left: 15%; } /* line 236, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .layout .icon3 { position: absolute; text-align: center; vertical-align: middle; left: 40%; bottom: 68%; } /* line 243, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .layout .icon3 .baseimage { width: 100%; height: auto; } /* line 248, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .layout .icon4 { bottom: 60%; right: 15%; } /* line 252, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .layout .icon5 { height: 16%; width: 16%; bottom: 38%; right: -4%; } /* line 260, ../../../scss/vlp/M3S/_interior-dashboard-hotspot.scss */ .dash-animation-wrapper .dashbackground { width: 100%; height: auto; margin: 0 auto; display: block; margin-top: 5px; } /* line 2, ../../../scss/vlp/M3S/_engineering.scss */ #engineering .panel-title { position: relative; z-index: 10; text-align: left; margin-left: 130px; line-height: 1; padding-top: 5.6%; } /* line 11, ../../../scss/vlp/M3S/_engineering.scss */ #engineering .panel-header { position: relative; color: #CC0000; z-index: 10; text-align: left; margin-left: 130px; font-family: interstate; padding-top: 0.7%; } /* line 21, ../../../scss/vlp/M3S/_engineering.scss */ #engineering .panel-copy { position: absolute; text-align: left; font-size: 135%; z-index: 10; width: 100%; margin-left: 130px; margin-top: 0; padding-top: 1.1%; color: black; } /* line 27, ../../../scss/vlp/M3S/_engineering.scss */ #engineering .panel-copy .text-block { display: block; margin: 0 auto 2% auto; width: 55%; font-size: 1.4em; line-height: 1.5em; } @media (min-width: 1500px) { /* line 21, ../../../scss/vlp/M3S/_engineering.scss */ #engineering .panel-copy { top: 18%; } } /* line 45, ../../../scss/vlp/M3S/_engineering.scss */ #engineering .popup-content .popup-text { text-align: center; vertical-align: middle; padding: 12%; } /* line 49, ../../../scss/vlp/M3S/_engineering.scss */ #engineering .popup-content .popup-text h3 { margin-top: 20%; margin-bottom: 11%; font-size: 1.3em; line-height: 1.3em; font-family: interstate-bold; } /* line 56, ../../../scss/vlp/M3S/_engineering.scss */ #engineering .popup-content .popup-text p { font-size: 1.1em; line-height: 1.8em; color: black; } /* line 1, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison { max-height: 100%; background-color: #ffffff; height: auto !important; padding-bottom: 12%; } /* line 6, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison .panel-title { padding-top: 4%; font-family: interstate-regular, sans-serif,arial,sans-serif,arial !important; font-weight: normal !important; line-height: 1em; color: #d00000; } /* line 15, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison .panel-header { font-size: 1.37em; } /* line 19, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison #car-trim-comparison { padding: 1% 10% 1% 12%; float: none; overflow: hidden; } /* line 25, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison #car-trim-comparison .trim .image { text-align: left; } /* line 29, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison #car-trim-comparison .trim .copy { padding-left: 10%; } /* line 32, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison #car-trim-comparison .trim .copy .header { font-size: 3em; color: #d00000; font-family: interstate; } /* line 38, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison #car-trim-comparison .trim .copy .subheader { font-size: 1.5em; font-weight: bold; margin-top: 4px; } /* line 44, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison #car-trim-comparison .trim .copy .features { margin-top: 8%; font-size: 1.4em; line-height: 1.6em; margin-bottom: 7%; } /* line 50, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison #car-trim-comparison .trim .copy .features li:before { content: "+"; margin-right: 7px; color: #d00000; font-weight: bolder; font-size: 120%; position: relative; bottom: -1px; } /* line 61, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison #car-trim-comparison .trim .copy .button { text-decoration: none; display: block; padding: 15px 0px; text-align: center; max-width: 200px; color: #d00000; background-color: #eee; font-size: 1.5em; font-weight: 600; } /* line 75, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison #car-trim-comparison .trim .copy .compare-check-button { font-size: 1.8em; font-size: pxtopercent(15); font-family: interstate-bold, sans-serif, arial; color: #d00000; text-transform: uppercase; width: 75%; background-color: #E7E7E7; border-radius: 0; padding: 6% 62% 6% 17%; text-align: left; border: none; margin-bottom: 20%; position: relative; outline: none; background-image: url("/MusaWeb/musa2/images/vlp/responsive/ui-elements/red_check_off.png"); background-position: 75% 50%; background-repeat: no-repeat; background-size: 10%; } /* line 93, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison #car-trim-comparison .trim .copy .compare-check-button.checked { background-image: url("/MusaWeb/musa2/images/vlp/responsive/ui-elements/red_check_on.png"); background-color: #a9a9a9; } /* line 102, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison .btn-container { margin-top: 3.5%; float: none; overflow: hidden; } /* line 107, ../../../scss/vlp/M3S/_trim-comparison.scss */ #trim-comparison .btn-container .btn { font-size: 1.5em; padding: 14px 52px; }