/*Base
********************************************/
@font-face { font-family: "icons"; src:url("../fonts/bmwicons.eot"); src:url("../fonts/bmwicons.eot?#iefix") format("embedded-opentype"), url("../fonts/bmwicons.woff") format("woff"), url("../fonts/bmwicons.ttf") format("truetype"), url("../fonts/bmwicons.svg#bmwicons") format("svg"); font-weight: normal; font-style: normal; }

@font-face {
    font-family: 'BMWTypeNext';
    src: url('/Content/fonts/BMWTypeNextTT-Thin.woff') format('woff'), url('/Content/fonts/BMWTypeNext-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'BMWTypeNext';
    src: url('/Content/fonts/BMWTypeNextTT-Light.woff') format('woff'), url('/Content/fonts/BMWTypeNext-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'BMWTypeNext';
    src: url('/Content/fonts/BMWTypeNextTT-Regular.woff') format('woff'), url('/Content/fonts/BMWTypeNext-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BMWTypeNext';
    src: url('/Content/fonts/BMWTypeNextTT-Bold.woff') format('woff'), url('/Content/fonts/BMWTypeNext-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}


/*character mapping
    down carrot:      'w'
    up carrot:        'z'
    <:                'x'
    >:                'y'
    -:                'b'
    x:                't'
    +:                'a'
    magnifying glass: 'i'
    volume low:       'v'
    volume high:      'B'
    mute:             'A'
    camera:           'f'
    share:            'g'
    print:            'h'
    down-thin-chev:   'e'
    up-thin-chev:     'd'
    left-thin-chev:   'G'
    right-thin-chev:  'H'
    first-page        'I'
    last-Page         'J'
    download          'K'
*/


html,body{ font-family: 'BMWTypeNext', Arial, sans-serif; font-weight: 300;}
html { padding:0px; margin:0px; }
html.noScroll { overflow: hidden; position: fixed; }
body {overflow-y: scroll; min-height:100%; position:relative; color:#262626; padding:0px; margin:0px; padding:0px; margin:0px; font-size:15px;  z-index:1; /*<--z-index used for javascript window size*/}
* { text-size-adjust: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none;}
input, select, textarea { }
a { color:#0653b6;}
    a:hover { text-decoration:none; color:#1c69d4; }

p { margin-bottom: 0px; }

img { border: none; max-width: 100%;}

h1 { font-size:25px; font-weight: 300; line-height:2rem; }
h2 { font-size:25px; font-weight: 300; line-height:1.8rem; }
h3 { font-size:18px; font-weight: 300; line-height:1.2rem;}
h4 { font-size:15px; font-weight: 300; }
hr { height:0px; background-color:transparent; border:none; border-top:1px solid #ebebeb; display:none;}


.find { background: url('/Content/img/inputSprite-retina.png') no-repeat; background-position: 3px -41px; background-size: 24px 251px; padding-left: 30px;}

a:focus,
select:focus,
input[type=submit]:focus,
input[type=text]:focus,
input[type=tel]:focus,
input[type=email]:focus,
.checkbox input[type=checkbox]:focus ~ .field:before,
.infoBubble:focus,
.infoBubble .close:focus,
.buttonGroup .button:focus span,
.button:focus,
.radioGroup input[type=radio]:focus + label:before  { outline:none; box-shadow: 0 0 7px rgba(3, 122, 239, 1); }

input, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; font-size: 15px; }
/*select { background:url('/_GlobalAssets/images/selectArrow.png') no-repeat right 15px;} <!--Drop down arrows for select boxes :-( */


select, input[type=submit] {-webkit-appearance: none; border-radius: 0;}
    select, input[type=text], input[type=email], input[type=tel] { padding:10px; box-sizing:border-box; -moz-box-sizing:border-box; }

    label, .label, .radioGroup, .checkbox { display: block; padding: 5px 0px; margin: 0px; position: relative; box-sizing: border-box; transition: padding .3s ease-out .2s; }
    label:after, .label:after, .radioGroup:after, .checkbox:after { content: ''; display: block; height: 1px; clear: both; }
    label:before, .label:before, .radioGroup:before, .checkbox:before {
        content: ''; display: block; width: 26px; height: 26px; position: absolute; bottom: 9px; right: 0px; opacity: 0; transition: opacity .3s ease-in; background-size: 24px 24px; background-repeat: no-repeat; background-image: url('/Content/img/blackSpinner.gif'); }


    label.loading, .label.loading, .radioGroup.loading, .checkbox.loading { padding-right: 30px; transition-delay: 0s; }
    label.loading:before, .label.loading:before, .radioGroup.loading:before, .checkbox.loading:before { opacity: 1; transition-delay: .1s; }
    label .title, .label .title, .radioGroup .title { display: block; padding: 10px 0px 10px 0px; box-sizing: border-box; }
    label input[type=text], label input[type=tel], label input[type=email], .label input[type=text], .label input[type=email], .label input[type=tel], label textarea, .label textarea, label select, .label select, .radioGroup .group, .checkbox label { width: 100%; display: block; box-sizing: border-box; }
    label input[type=text], label input[type=tel], label input[type=email], .label input[type=text], .label input[type=email], .label input[type=tel], label textarea, .label textarea, label select, .label select { border: 2px solid #c7c7c7; }
    label mark, .label mark { display: block; clear: both; background-color: transparent; font-size: .8em; padding: 4px 0px; }
    label mark small, .label mark small { display: block; margin-bottom: 1em; }
    label .geoLocateButton, .label .geoLocateButton { position: absolute; right: 0px; }

.phoneExtension { /*overflow:hidden;*/ padding-top: 4px; position: relative; /*padding-right:25px; margin-right:-25px;*/ margin-bottom: -1em }
    .phoneExtension .fields {  display:block; position: relative; box-sizing: border-box; padding-bottom:1.3em; }
    .phoneExtension .ext[type=text], .phoneExtension .ext[type=tel] { display:none; width: 65px; }
    .phoneExtension.extensionState .ext { display:block; position: absolute; top: 0px; right: 0px; }
    .phoneExtension.extensionState .fields { padding-right: 70px; }
    .phoneExtension .fields label { font-size:10px; width:64px; right:0px; position:absolute; bottom:0px; display:none;}
    .phoneExtension.extensionState .fields label { display:block; }
    .phoneExtension input[type=text], .phoneExtension .ext[type=tel] { border:2px solid #c7c7c7; width: 100%; }
    .phoneExtension .validationMessage { bottom:37px; right:-23px;}

input[type=text]:disabled, input[type=email]:disabled, input[type=tel]:disabled, select:disabled, textarea:disabled { background-position: right -12px; background-color: #edebeb; color: #c1bfbf; }

.validationMessage { display: none; background:url(../img/valSprite.png) no-repeat left -50px; z-index:100; position:absolute; width:15px; height:15px; right: -25px; bottom:20px; }
    .error .validationMessage { display: inline-block; }
    .error input[type=tel],
    .error input[type=text],
    .error input[type=email],
    .error input[type=password],
    .error select,
    .error textarea { border:2px solid #b71d1d; color:#c03123; }
    .error .title { color:#c03123;}
    .error.checkbox { color:#c03123;}
    .error [class^="field-validation"] { opacity: 1; display: block; }
    .error .validationMessage [class^="field-validation"] { margin-left: 22px; color: #c03123 !important; }
    [class^="field-validation"][data-valmsg-for="ErrorSummary"] { float:none;}
    .valid .validationIcon { opacity:0; }
    .errorMessageBox { border:1px solid #faaeae; background-color:#fdeeee; padding:10px; color:#c03123;}
    textarea { min-height:100px; padding:10px; }
    .requiredIndicator { color:#c03123; opacity:1; }
    .requiredStar { color:#c03123;}
    .requiredStar.hide { display: none; }
    textarea + .validationMessage { bottom:auto; top:45px;}
    [class^="field-validation"] { display:none; }

.screenReaderContext { position: absolute; left: -999em; width: 0px; overflow: hidden; }

.radioGroup { }
    .radioGroup legend { font-weight:100; font-size:inherit; margin:0px; }
    .radioGroup .group { padding:5px 0px 0px 0px; margin:0px; display:inline-block; }
    .radioGroup label { display:inline-block; vertical-align:middle;  padding: 5px 0px 5px 35px; }
    .radioGroup input[type=radio] { display:inline-block; vertical-align:middle; position:absolute; opacity: 0; margin: 12px 11px; }
    .radioGroup label:before { opacity: 1; left:4px; top: 2px; content: ""; position: absolute; display: inline-block; height: 22px; width:23px; background-image: url('Content/img/inputSprite-retina.png');  background-size: 24px 251px; background-position: 0px -158px; background-repeat:no-repeat; border:2px solid #c7c7c7; border-radius:14px;}
    .radioGroup input[type=radio]:checked + label:before { background-position:-1px -213px; }
    .radioGroup.columns .group { width:auto; }


.checkbox { margin-top: 10px;  }
    .checkbox label {  }
    .checkbox input[type=checkbox]:focus { box-shadow:none;}
    .checkbox input[type=checkbox]:checked ~ label:before { background-position: -3px -4px; }
    .checkbox .field { padding:3px 0px 5px 35px; display:block; position:relative; box-sizing:border-box; }
    .checkbox .field:before { content:''; border: 2px solid #c7c7c7; background-color:#ffffff; position:absolute; left:4px; top:0px; z-index:100; height: 18px; width: 18px; background:#ffffff url('/Content/img/inputSprite-retina.png') -3px -20px no-repeat;  background-size: 24px 251px;}
    .checkbox input[type=checkbox]:checked + .field:before { background-position: -3px -4px; }
    .checkbox > input[type=checkbox] { position:absolute; left:5px; top:6px; outline:0px solid #c7c7c7; z-index:50; width:0px; opacity:0; }

fieldset { border:none; margin: 0px; padding: 0px; }
    fieldset legend { font-size:18px; font-weight:300; line-height:1.2rem; margin:0px 0px 15px 0px; padding:0px 0px 0px 0px; }

.datepicker { display: block; }
    .datepicker #Datepicker { display: inline-block; padding-left: 30px; background-image: url('/_GlobalAssets/images/inputSprite-retina.png'); background-size: 24px 251px; background-position: 3px -94px; background-repeat:no-repeat;}

aside.breakpointNum:before { /*display:none;*/ content: '1 column'; }

/*Layout
********************************************/
#siteWrapper { max-width: 1280px; margin:0px auto; padding:0px 30px 45px 30px; box-sizing:border-box; min-height: 100%; border: 1px solid transparent; }
.ciForm fieldset { margin-top: 40px; }
form.ciForm { border:1px solid transparent;}
.ciForm [class^="field-validation"] {
    color: #c03123;
}


/*Module
********************************************/

.button { text-align: center; font-size: 15px; width: 100%; text-decoration: none; position: relative; cursor: pointer; border: none; font-weight: bold; display: table; box-sizing: border-box; color: #ffffff; min-height: 40px; line-height: 1.1em; background-position: 0px 0px; background-repeat: no-repeat; transition: background-color .2s ease-in; }
    .button:after { content: ''; background-image: url('/Content/img/whiteSpinner.gif'); background-repeat: no-repeat; background-size: 24px 24px; width: 26px; height: 26px; position: absolute; right: 4px; top: 50%; margin-top: -12px; opacity: 0; transition: opacity .2s ease-in; }

button.button { position: relative; display: inline-block; }
    button.button:before { content: ''; position: absolute; width: 5px; height: 100%; vertical-align: middle; }
    button.button span { display: inline; }
    .button span { display: table-cell; text-align: center; vertical-align: middle; padding: 0px 10px; height: 40px; }
    button.button::-moz-focus-inner { border-width: 0px; }
    .button:hover { text-decoration: none; color: #ffffff; }
    .button.primary { background-color: #0653b6; }
    .button:before { content: ''; width: 1px; height: 100%; position: relative; display: inline-block; vertical-align: middle; opacity: 0; }
    .button.primary:hover { background-color: #2064f5; }
    .button.primary.loading:before { opacity: 1; left: 8px; }
    .button.secondary { background-color: #757575; }
    .button.secondary:hover { background-color: #a6a6a6; }
    /*.button.close { width: 20px; height: 20px; padding: 0px; background-color: #b71d1d; position: relative; }
        .button.close:after { content: ''; font-family: 'icons'; font-size: 10px; }*/
    .button.accordionToggle { background-color: #1751ca; }
    .button.accordionToggle:after { content: 'd'; opacity: 1; background-image: none; font-family: 'icons'; display: inline-block; vertical-align: middle; font-size: 16px; padding: 5px 10px 0px 10px; }
    .button.accordionToggle.open:after { content: 'e'; }
    .button.plusMinus { background-color: #1751ca; width: 40px; height: 40px; position: relative; text-indent: -9000px; display: inline-block; }
    .button.plusMinus:after { content: 'a'; opacity: 1; background-image: none; font-family: 'icons'; display: block; vertical-align: middle; font-size: 16px; padding: 0px 7px; text-indent: 0px; position: absolute; left: 0px; top: 25px; }
    .button.plusMinus.open:after { content: 'b'; }
    .button.share { background-color: #1751ca; width: 40px; height: 40px; position: relative; text-indent: -9000px; display: inline-block; }
    .button.share:after { content: 'g'; opacity: 1; background-image: none; font-family: 'icons'; display: block; vertical-align: middle; font-size: 16px; padding: 0px 7px; text-indent: 0px; position: absolute; left: 0px; top: 25px; }
    .button.print { background-color: #1751ca; width: 40px; height: 40px; position: relative; text-indent: -9000px; display: inline-block; }
    .button.print:after { content: 'h'; opacity: 1; background-image: none; font-family: 'icons'; display: block; vertical-align: middle; font-size: 16px; padding: 0px 7px; text-indent: 0px; position: absolute; left: 0px; top: 25px; }
    .button.download { background-color: #1751ca; width: 40px; height: 40px; position: relative; text-indent: -9000px; display: inline-block; }
    .button.download:after { content: 'K'; opacity: 1; background-image: none; font-family: 'icons'; display: block; vertical-align: middle; font-size: 16px; padding: 0px 7px; text-indent: 0px; position: absolute; left: 0px; top: 25px; }

 .button[disabled=disabled],
    .button:disabled,
    .button[disabled=disabled]:hover,
    .button:disabled:hover, .button.disabled,
    .button.disabled:hover { cursor: default; background-color: #e6e6e6; color: #4d4d4d; }
    .button.disabled:after, .button[disabled=disabled]:after { background-image: url('/Content/img/blackSpinner.gif'); }
    .button.loading:after { opacity: 1; }

.closeX { text-decoration: none; color: #ffffff; text-indent: -900px; display: block; overflow: hidden; width: 30px; margin-left: 5px; margin-bottom: 5px; height: 30px; background-color: #0653b6; position: relative; }
    .closeX:after { text-indent: 0px; content: ""; display: block; margin: -7px 0px 0px -6px; color: #FFF; font-family: "icons"; top: 50%; position: absolute; background: url("/_GlobalAssets/images/icons.svg") no-repeat scroll -20px -15px transparent; background-size: 52px 529px; width: 13px; height: 13px; left: 50%; }


.ciForm .ciSelect { padding:0px; margin:0px 0px 5px 0px; min-height:40px;}
    .ciForm .ciSelect select { padding:8px 10px 10px 10px; margin: 0px; position:relative; min-height:40px;}
    .ciForm .ciSelect:after{ box-sizing:border-box; padding: 10px 0px 0px 0px; height: 40px; font-size: 18px; width: 40px; z-index: 1; color: #fff; background-color: #1c69d4; position: absolute; bottom: 0px; right: 0px; content: "w"; font-family: 'icons'; pointer-events: none; text-align: center; }
    .ciForm label input[type=text],.ciForm label input[type=tel], .ciForm label input[type=email], .ciForm .label input[type=text],.ciForm .label input[type=tel],.ciForm .label input[type=email], .ciForm label select, .ciForm .label select, .ciForm .radioGroup .group, .ciForm .phoneExt .group { max-height:40px; }

.geoLocateButton { width: 40px; height: 40px; overflow: hidden; text-indent: -900px; background: #1c69d4 url('/Content/img/geoIcon.png') no-repeat 9px 10px; background-size: 20px 19px; z-index: 250; position: absolute; }
    .geoLocateButton.loading { background-image: url('/Content/img/spinner.gif'); }

.horzRangeSlider { }
    .horzRangeSlider input[type=text] { border: 2px solid #c7c7c7; }
    .horzRangeSlider .min { width: 100px; float: left; }
    .horzRangeSlider .max { width: 100px; float: right; }
    .horzRangeSlider .min .title, .horzRangeSlider .max .title { padding-top: 0px; }

.buttonGroup { overflow:hidden;}
    .buttonGroup .button { background-color: transparent; padding:0px 5px; margin:10px -5px 0px -5px; }
    .buttonGroup .button:focus { box-shadow:none; }
    .buttonGroup .button:hover { background-color: transparent; }
    .buttonGroup .primary span { background-color: #1751ca; }
    .buttonGroup .secondary span { background-color: #757575; }
    .buttonGroup .primary:hover span { background-color: #2064f5; }
    .buttonGroup .secondary:hover span { background-color: #a6a6a6; }

[data-expanded] { padding-left:30px; position:relative; }
    [data-expanded]:before { font-size:30px; position:absolute; display:block; left:0px; width:40px; height:40px; text-align:center; vertical-align:top; line-height:1em; box-sizing:border-box; -moz-box-sizing:border-box; }
    [data-expanded="true"]:before { content:'-'; padding-top:2px; }
    [data-expanded="false"]:before { content:'+'; padding-top:5px; }

.infoBubble { border-radius:9px 9px 9px 9px;
              position:relative;
              line-height:1em;
              color:#262626;
              cursor:pointer;
              display:inline-block;
              vertical-align:middle;
              width:16px;
              height:16px;
              background: url('/_GlobalAssets/images/2016_BrandCI_InfoIcon.png') no-repeat right -46px;
              background-size: 16px;
              border-radius:10px;
}

.infoBubble:hover { background: url('/_GlobalAssets/images/2016_BrandCI_InfoIcon.png') no-repeat right 0px; background-size: 16px; }

    .infoBubble > * { display:none; box-sizing: border-box; }
    .infoBubble.selected { z-index:450; }
    .infoBubble.selected > *:first-child { cursor:default; display:block; width: 100%; height:100%; position: fixed; background-color: #ffffff; top: 0px; left: 0px; padding: 40px;  }
    .infoBubble .close { text-decoration:none; color:#ffffff; text-indent:-900px; position:absolute; float:right; right: 10px; top: 10px; display:block; overflow:hidden; width:30px; margin-left:5px; margin-bottom:5px; height:30px; background-color:#0653b6; }
    .infoBubble .close:after { text-indent: 0px; content: ""; display: block; margin: -7px 0px 0px -6px; color: #FFF; font-family: "icons"; top: 50%; position: absolute; background: url("/_GlobalAssets/images/icons.svg") no-repeat scroll -20px -15px transparent; background-size:52px 529px; width: 13px; height: 13px; left: 50%; }
    .infoBubble .close:hover { background-color:#2064f5; }





.drawer { border-top: 1px solid #bbbbbb; border-bottom: 1px solid #bbbbbb; padding: 8px 0px 8px 0px; margin: 10px 0px; }
    .drawer > header { font-weight: bold; padding-bottom: 0px; }
    .drawer .drawerContent { /*margin-bottom:10px;*/ }
    .drawer .button.plusMinus, .drawer .button.share { margin-right: 10px; margin-top: 0px; vertical-align: middle; }


.modalWindow { background-color: rgba(255, 255, 255, 0.90); position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px; z-index: 500; box-sizing: border-box; padding: 20px; display: none; overflow-y: scroll; }
    .modalWindow .modal { background-color: #ffffff; position: relative; padding: 20px; box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75); margin-bottom: 20px; }
    .modalWindow .closeX { position: absolute; right: 10px; top: 10px; }
    .modalWindow .modal > header { font-weight: bold; font-size: 18px; padding: 0px; min-height: 12px; }
    .modalWindow.open { display: block; }


.chevronLink { font-weight: bold; color: #666666; text-decoration: none; position: relative; padding-left: 20px; }
    .chevronLink:before { content: 'H'; font-family: 'icons'; display: inline-block; left: 0px; position: absolute; top: 50%; margin-top: -8px; font-size: 14px; }
    .chevronLink.back:before { content: 'G'; }

@media speech {
    .chevronLink:before { content: ''; }
}

#inventoryAlertForm p.successBox.ng-scope {
    color: green;
}

.ciForm .divider {
    max-width: 100%;
}

.divider,
.divider-vert {
    display: block;
    position: relative;
}

.divider[data-content]::after,
.divider-vert[data-content]::after {
    background: #fff;
    color: #757575;
    content: attr(data-content);
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 0 .4rem;
    transform: translateY(-.65rem);
}

.divider {
    border-top: .05rem solid #c7c7c7;
    height: .05rem;
    margin: .4rem 0;
}

.divider[data-content] {
    margin: .8rem 0;
}

.divider-vert {
    display: block;
    padding: .8rem;
}

.divider-vert::before {
    border-left: .05rem solid #c7c7c7;
    bottom: .4rem;
    content: "";
    display: block;
    left: 50%;
    position: absolute;
    top: .4rem;
    transform: translateX(-50%);
}

.divider-vert[data-content]::after {
    left: 50%;
    padding: .2rem 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}


/* Loading panel: https://jsfiddle.net/mshaker88/u41rgq3e
     $('form.ciForm').submit(function(event) {
            if ($(this).valid()) {
                $('#loadingPanel').fadeIn();
            }
        });
*/
#loadingPanel {
    background: #ffffff;
    color: #666666;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 5000;
    top: 0;
    left: 0;
    float: left;
    text-align: center;
    padding-top: 25%;
    opacity: .80;
}

#loadingPanel .spinner {
    margin: 0 auto;
    height: 64px;
    width: 64px;
    animation: rotate 0.8s infinite linear;
    border: 5px solid #2064f5;
    border-right-color: transparent;
    border-radius: 50%;
}
@keyframes rotate {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
/*End Loading Panel*/