﻿@import url(../../../styles/global.css);

:root {
    --header-font: #1e90ff;
    --padding-left: 80px;
    --padding-left-mobile: 16px;
    --margin-top-section: 87px;
    --margin-top-section-mobile: 34px;
}

.container-fluid {
    max-width: 1920px;
}

.container {
    color: white;
}

.header-container {
    position: relative !important;
    height: auto;
}

.header-body {
    /*  z-index: 100;*/
    position: absolute;
    color: white;
    padding-left: var(--padding-left);
    top: 18%;
}


.img-responsive {
    width: 100% !important;
}

.header-body-title {
    font: normal normal 500 16px / 16px BMWTypeNextRegular;
    letter-spacing: 9.6px;
}

.header-series-subtitle {
    font: normal normal 300 252px / 242px BMWTypeNext !important;
}

.header-body-subtitle {
    font: normal normal 300 25px / 38px BMWTypeNext;
}

.featured-special-offer-container {
    margin-top: 0px;
    border-bottom: unset;
}

.visualizer-title {
    margin-top: 7%;
    text-align: center;
    font: normal normal bold 32px / 32px BMWTypeNextThin;
    text-transform: uppercase;
}

.visualizer-subtitle {
    padding-top:20px;
    font: normal normal 300 20px / 26px BMWTypeNextLight;    
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #1F1F1F;
}

.vehicle-image-group {
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 7%;
}

    .vehicle-image-group .vehicle-image {
        padding-top: 0px !important;
    }

.visualizer-options {
    text-align: center;
}

#tab-visualizer-1 {
    margin: 0 auto;
    width: 50%;
}

.color-block-group {
    width: 60%;
    margin: 0 auto;
    margin-top: 3%;
    left: 7%;
}

.visualizer-wrapper {
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.visualizer-colour-txt {
    font-size: 17px;
    font-family: 'BMWTypeNextBold';
    color: rgb(38, 38, 38);
}

.visualizer-colour-border {
    width: 10%;
    border: 2.2px solid black;
    text-align: center;
    margin: 0 auto;
    margin-top: 2%;
}

.paint-colours {
    margin-top: 3%;
}

.active-color-name {
    font-size: 16px;
    font-family: 'BMWTypeNext';
}

.btn-inventory {
    margin: 0 auto;
    width: 26%;
    height: 52px;
    background: #1C69D4 0% 0% no-repeat padding-box;
    border-radius: 4px;
    text-align: center;
    margin-top: 30px;
    font: normal normal bold 16px / 21px BMWTypeNextThin;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 0.99;
}

.btn-inventory-body {
    margin: 0 auto;
    width: 13%;
    height: 52px;
    background: #1C69D4 0% 0% no-repeat padding-box;
    border-radius: 4px;
    text-align: center;
    margin-top: 30px;
    font: normal normal bold 16px / 21px BMWTypeNextThin;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 0.99;
}

.performance-header-container {
    margin-top: var(--margin-top-section);
}

.performance-header-body {
    padding-left: 0px !important;
}

.performance-header-container .slick-dots {
    top: 92% !important;
}

.slick-dots li button:before {
    color: white !important;
}

.performance-header-title {
    text-align: center;
    font: normal normal 300 32px/35px BMWTypeNext;
    letter-spacing: 0px;
    color: #1F1F1F;
    text-transform: uppercase;
    opacity: 1;
}

.performance-header-txt {
    padding-top:20px;
    color: black;
    font: normal normal 300 20px/26px BMWTypeNextLight;
    width: 64%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #1F1F1F;
}

.performance-image
{
    padding-top:92px;
}

.performance-header-vid {
    margin-left: auto;
    margin-right: auto;
}

.highlight-contain {
    width: 37%;
}

.highlight-container {
    margin-top: 80px;
    margin-left: 12%;
}

.highlight-txt-container {
    /* width: 92%;*/
}

.highlight-header1 {
    font: normal normal 300 40px / 50px BMWTypeNextLight;
    letter-spacing: 0px;
    color: #1F1F1F !important;
    opacity: 1;
    padding-left: 8px;
}

.highlight-header2 {
    font: normal normal 300 40px / 50px BMWTypeNextLight;
    color: #1F1F1F !important;
    padding-left: 8px;
}

.highlight-body {
    padding-top: 20px;
    font: normal normal 300 20px/26px BMWTypeNextLight !important;
    padding-left: 8px;
    width: 90%;
    letter-spacing: 0px;
    color: #1F1F1F !important;
    opacity: 1;
}

.highlight-img1 {
    padding-top: 80px;
}

.highlight-img3 {
    padding-top: 42px;
    max-width: 679px;
}

.specs-container {
    margin-top: var(--margin-top-section);
    margin-left: 29%;
}

.specs-right-container {
    margin-left: 10%;
    margin-top: 40px;
}

.specs-hp-value, .specs-hp {
    font: normal normal 300 193px/220px BMWTypeNextLight;
}

.specs-left-container {
    border-right: 2px solid black;
    padding-top: 50px;
    height: 31vw;
}

.specs-wheel-value, .specs-torque-value, .specs-acceleration-value {
    font: normal normal 300 50px/68px BMWTypeNextLight;
}

.specs-torque-value, .specs-acceleration-value {
    margin-top: var(--margin-top-section);
}

.specs-wheel, .specs-torque, .specs-acceleration {
    font: normal normal bold 16px/22px BMWTypeNextLight;
}

.interior-container {
    margin-top: 0px;
    padding-top: 110px;
    background: #F2F2F2 0% 0% no-repeat padding-box;
}

.exterior-container {
    margin-top: var(--margin-top-section);
    padding-top: 110px;
    background: #F2F2F2 0% 0% no-repeat padding-box;
}

.interior-body {
    text-align: center;
    color: #1F1F1F;
}

.interior-header {
    font: normal normal bold 16px/22px BMWTypeNextLight;
    letter-spacing: 8px;
    color: #1F1F1F;
    text-transform: uppercase;
    opacity: 1;
}

.interior-title1 {
    font: normal normal 300 40px/50px BMWTypeNextLight;
    letter-spacing: 0px;
    color: #1F1F1F;
    text-transform: uppercase;
    opacity: 1;
    padding-top: 10px;
}

.interior-title2 {
    width:40%;
    margin: 0 auto;
    font: normal normal 300 20px/26px BMWTypeNextLight;
    padding-top: 17px;
    letter-spacing: 0px;
    color: #1F1F1F;
    opacity: 1;
}

.interior-specs {
    background: #F2F2F2 0% 0% no-repeat padding-box;
    padding-top: 80px;
}

.interior-specs1-body {
    width: 53%;
    margin-top: 23%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 80px;
}

.interior-specs2-body {
    width: 53%;
    margin-top: 38%;
    margin-right: auto;
    margin-left: auto;
}

.interior-specs2-img, .interior-specs2-title {
    margin-top: var(--margin-top-section);
}

.interior-specs1-img {
    /*float: right;*/
}

.interior-specs1-title, .interior-specs2-title {
    font: normal normal bold 22px / 30px BMWTypeNextBold;
    letter-spacing: 0.55px;
    color: #1F1F1F;
    text-transform: capitalize;
    opacity: 1;
}


.interior-specs1-txt, .interior-specs2-txt {
    font: normal normal 300 16px/22px BMWTypeNextThin;
    letter-spacing: 0px;
    color: #1F1F1F !important;
    opacity: 1;
    padding-top: 18.5px;
}

.exterior-design {
    margin-top: 100px;
    margin-right: auto;
    margin-left: auto;
}

.exterior-design-header {
    text-align: center;
    font: normal normal bold 16px/22px BMWTypeNextBold;
    letter-spacing: 8px;
    color: #1F1F1F;
    text-transform: uppercase;
    opacity: 1;
}

.exterior-design-subheader {
    text-align: center;
    font: normal normal 300 40px/50px BMWTypeNextLight;
    letter-spacing: 0px;
    color: #1F1F1F;
    text-transform: uppercase;
    opacity: 1;
    padding-top: 19px;
}

.exterior-design-slider {
    margin-top: 30px !important;
}

.interior-specs-img {
    margin-top: 0px;
}


.form-container {
    margin-top:70px;
    display: flex;
    background: #F2F2F2 0% 0% no-repeat padding-box;
}

.form-header-wrapper {
    width: 31.5vw;
}

.form-Sub {
    opacity: 1;
    padding-top: 5vw;
    padding-left: 80px;
}

.form-img, .form-element {
    flex: 1;
}

.form-img {
    padding-right: 0px;
    background: #F2F2F2 0% 0% no-repeat padding-box;
}

.form-fields {
    padding-top: 20px;
}

.form-element {
    color: black;
    padding-top: 0px;
    padding-left: 0px !important;
    background: #F2F2F2 0% 0% no-repeat padding-box;
}

.form-control {
    width: 100%;
    height: 50px;
    border: 1px solid #1F1F1F;
    opacity: 1;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
}

#OptIn {
    width: 25px;
    height: 15px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #262626;
    opacity: 1;
}


.form-optin {
    font: normal normal 300 14px/18px BMWTypeNextLight;
    letter-spacing: 0px;
    color: #1F1F1F;
    opacity: 1;
}

.form-legal {
    margin-top: 3.5vw;
    font: normal normal 300 12px/15px BMWTypeNextThin;
    letter-spacing: 0px;
    color: #1F1F1F;
}

.form-header {
    font: normal normal 300 35px/40px BMWTypeNextLight;
    letter-spacing: 0.88px;
    color: #1F1F1F;
    text-transform: uppercase;
    opacity: 1;
}

.form-header-sub {
    padding-top: 10px;
    font: normal normal 300 16px/22px BMWTypeNextThin;
    letter-spacing: 0px;
    color: #1F1F1F;
    opacity: 1;
}

.form-header-sub2 {
    padding-top: 10px;
    font: normal normal 300 16px/22px BMWTypeNextThin;
    letter-spacing: 0px;
    color: #1F1F1F;
    opacity: 1;
}

.form-group {
    font: normal normal bold 16px/30px BMWTypeNextBold;
    letter-spacing: 0px;
    color: #1F1F1F;
    opacity: 1;
    margin-bottom: 20px !important;
}

.ddl-language {
    font: normal normal 300 15px/22px BMWTypeNextLight;
    letter-spacing: 0px;
    color: #262626;
    opacity: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 10px;
}

#btnSub {
    width: 100%;
    height: 52px;
    background: #1C69D4 0% 0% no-repeat padding-box;
    border-radius: 4px;
    text-align: center;
    margin-top: 30px;
    font: normal normal bold 16px/21px BMWTypeNextThin;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 0.99;
}

.form-confirm-msg {
    font: normal normal bold 30px / 30px BMWTypeNextLight;
    letter-spacing: 0px;
    color: #1F1F1F;
    opacity: 1;
    text-align: center;
    margin-top: 30%;
}

.form-legal a {
    color: #2a6496 !important;
}

.no-padding-right {
    padding-right: 0px;
}

.no-padding-left {
    --padding-left: 0px;
}

.no-right-padding {
    padding-right: 0px;
}

.no-left-padding {
    padding-left: 0px;
}

/*img slider*/
.model-image-slider {
    text-align: center;
}

.model-image-slider h2 {
        font-size: 50px;
        line-height: 60px;
        letter-spacing: 5px;
}

.model-image-slider h1 {
        text-align: center;
        font-size: 16px;
        line-height: 30px;
        letter-spacing: 8px;
        text-transform: uppercase;
        font-family: "BMWTypeNextBold";
        padding-top: 100px;
}

.model-image-slider .image-header {
        display: block;
        font-family: "BMWTypeNextBold";
        font-size: 22px;
        line-height: 30px;
        margin-bottom: 10px;
        letter-spacing: 0.55px;
}

.model-image-slider .image-description {
        font: normal normal 300 16px / 22px BMWTypeNextThin;
        letter-spacing: 0px;
        color: #1F1F1F;
        opacity: 1;
}

.model-image-container {
    position: relative;
    margin: 20px 15%;
}

    .model-image-container .slick-prev, .model-image-container .slick-next {
        overflow: hidden;
        position: absolute;
        z-index: 2;
        /*top: 35%;*/
        transform: translateY(-50%);
        border-radius: 50%;
        background: #fff;
        padding: 20px;
        width: 50px;
        height: 50px;
        box-shadow: 0 3px 16px rgba(0, 0, 0, 0.16);
        border: none;
        cursor: pointer;
    }

        .model-image-container .slick-prev:before,
        .model-image-container .slick-next:before {
            font-family: "slick";
            font-size: 20px;
            font-weight: bold;
            line-height: 1;
            opacity: 0.75;
            color: black;
            -webkit-font-smoothing: antialiased;
        }

        .model-image-container .slick-prev:before {
            content: "";
            position: absolute;
            top: 0%;
            left: 0%;
            background: #fff;
            width: 100%;
            height: 100%;
        }

        .model-image-container .slick-next:before {
            content: " ";
            position: absolute;
            top: 0%;
            left: 0%;
            background: #fff;
            width: 100%;
            height: 100%;
        }

        .model-image-container .slick-prev:after {
            content: " ";
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: center center no-repeat;
            background-image: url(/Content/SpecialEditions/img/Slider/right-arrow.png);
            background-size: contain;
            width: 24px;
            height: 24px;
            transform: translate(-50%, -50%) rotate(180deg);
        }

        .model-image-container .slick-next:after {
            content: " ";
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: center center no-repeat;
            background-image: url(/Content/SpecialEditions/img/Slider/right-arrow.png);
            background-size: contain;
            width: 24px;
            height: 24px;
        }

.model-image-container .slick-dots {
        top: 92%;
        bottom: unset;
        transform: translateY(-50%);
        z-index: 3;
}

.model-image-container .slick-dots li button:before {
        font-size: 10px;
}

.interior-body-container
{
    margin-top:25%;
}

@media (max-width: 1650px) {
    .model-image-container .slick-dots {
        top: 73%;
    }
}



@media (max-width: 820px) {
    .model-image-container .slick-dots {
        top: 57%;
    }
}

@media (max-width: 769px) {
    .model-image-container .slick-dots {
        top: 65%;
    }
}

@media (max-width: 430px) {
    .model-image-container .slick-dots {
        top: 45%;
    }
}

@media (max-width: 425px) {
    .model-image-container .slick-dots {
        top: 38%;
    }
}

@media (max-width: 375px) {
    .model-image-slider h2 {
        font-size: 35px;
    }
}

@media (min-width: 1881px) {
    .model-image-container {
        /* margin: 20px 0%;*/
    }
}

@media (max-width: 1440px) {
    .model-image-container {
        margin: 20px 5%;
    }
}

@media (max-width: 1024px) {

    .header-img {
        content: url("../../SpecialEditions/img/540i/header-page.png")
    }

    .model-image-container {
        margin: 20px 0%;
    }

    .performance-header-container .model-image-container {
        margin: 20px 5%;
    }

    .model-image-container .slick-dots {
        top: 95%;
    }

    .highlight1-img {
        content: url("../../SpecialEditions/img/x5/highlight-2.png");
    }

    .highlight2-img {
        content: url("../../SpecialEditions/img/x5/highlight-1.png");
    }

    .btn-inventory {
        width: 100%;
    }

    .btn-inventory-body {
        width: 50%;
    }

    .color-block-group {
        width: 100%;
    }
}



@media (min-width: 530px) and (max-width:820px) {
    .header-container .header-series-subtitle {
        font: normal normal 300 119px / 139px BMWTypeNext !important;
    }
}

.model-image-container .exterior-description {
    text-align: center;
    /*padding: 0 25%;*/
    margin-top: 3%;
}



@media (min-width:1350px) and (max-width:1445px) {
    .color-block-group {
        width: 64%;
        left: 2%;
    }
}

@media (min-width:1200px) and (max-width:1350px) {
    .color-block-group {
        width: 68.5%;
    }
}

@media (min-width:1200px) and (max-width:1750px) {

    .form-control {
        height: 40px;
    }

    .form-Sub {
        padding-top: 10px;
    }

    .form-legal {
        margin-top: 0px;
    }

    #btnSub {
        margin-top: 10px;
    }
}


@media (max-width:1199px) {
    .header-body {
        top: 1%;
    }

    .performance-header-img {
        width: 100%;
    }

    .performance-header-txt {
        width: 89%;
    }

    .highlight-container {
        margin-left: 0px;
    }

    .highlight-contain {
        width: 100%;
    }

    .highlight-body {
        padding-left: 0px;
        width: 100%;
    }

    .highlight-txt-container {
        text-align: center;
    }

    .highlight-img1, .highlight-img2, .highlight-img3 {
        max-width: 692px;
        margin-right: auto;
        margin-left: auto;
    }

    .highlight-img1, .highlight-img2 {
        padding-top: 42px;
    }

    .specs-container {
        text-align: center;
        margin-left: 0px;
    }

    .specs-left-container {
        border-right: 0;
    }

    .specs-right-container {
        margin-left: 0px;
        border-left: 2px solid black;
        width: 50%;
        margin: 0 auto;
    }

    .specs-wheel-value {
        margin-top: var(--margin-top-section);
    }

    .form-container {
        display: block !important;
        padding-left: 0px;
    }

    .form-element {
        padding-left: 15px !important;
    }

    .form-Sub {
        padding-left: 20px;
    }

    .form-img {
        /*padding-right:15px;*/
    }

    .form-control {
        width: 100%;
    }

    #btnSub {
        width: 100%;
    }

    .interior-specs1-body {
        padding-left: 0px;
    }
}

@media (max-width:450px) {


    .header-img {
        content: url("../../SpecialEditions/img/540i/header-page-mobile.png") !important;
    }

    .header-body-title {
        font: normal normal 300 20px/45px BMWTypeNextThin !important;
    }


    .header-body-subtitle {
        /*width: 60vw;*/
        font: normal normal 300 25px/25px BMWTypeNextThin !important;
    }

    .highlight-container {
        margin: 0 !important;
        margin-top: 42px !important;
    }

    .specs-left-container {
        text-align: left;
        padding-left: 20vw;
    }

    .specs-right-container {
        padding-top: 0px !important;
        margin-top: 45vw !important;
        border-left: 2px solid black;
        margin-left: 20px;
        text-align: left;
        padding-left: 16vw;
    }

    .highlight1-img {
        content: url("../../SpecialEditions/img/x5/highlight-2.png");
    }

    .highlight2-img {
        content: url("../../SpecialEditions/img/x5/highlight-1.png");
    }

    .interior-specs1Img-mobile, .interior-specs2Img-mobile {
        padding-right: 0px;
        padding-left: 0px;
    }

    .visualizer-img {
        width: unset !important;
        max-width: 460px;
        margin-left: 5px;
    }

    .btn-inventory-body {
        width: 100%;
    }

    #tab-visualizer-1 {
        width: 100%;
    }

    .visualizer-wrapper .vehicle-image-group {
        margin-top: 15.5%;
    }

    .visualizer-title {
        font: normal normal bold 25px / 25px BMWTypeNextThin;
    }

    .color-block-group {
        left: 0;
    }

    .featured-special-offer-container {
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    .model-image-container .slick-prev, .model-image-container .slick-next {
        width: 20px;
        height: 20px;
    }  
    
    .exterior-design-slider > .model-image-container > .slick-arrow {
        top: 47%;
    }

    .exterior-design-slider > .model-image-container > .slick-dots {
        top: 93%;
    }

    .model-image-container .slick-next {
        right: 0.5% !important;
    }

    .model-image-container .slick-prev {
        left: 0.5% !important;
    }

    .model-image-container .slick-prev:after, .model-image-container .slick-next:after {
        background-size: 50% 50%;
    }

    .model-image-container .slick-prev, .model-image-container .slick-next
    {
        padding:12px;
    }

    .specs-acceleration-value {
        width: 97%;
        font: normal normal 300 32px / 38px BMWTypeNextLight !important;
    }
}

@media (min-width:768px) and (max-width:1025px) {
    .performance-header-txt {
        font: normal normal 300 27px/31px BMWTypeNextLight !important;
    }

    .visualizer-colour-txt {
        font-size: 20px;
    }

    .active-color-name {
        font-size: 19px;
    }

    .specs-hp-value, .specs-hp {
        font: normal normal 300 100px/110px BMWTypeNextLight !important;
    }

    .specs-wheel-value, .specs-torque-value, .specs-acceleration-value {
        font: normal normal 300 42px / 58px BMWTypeNextLight !important;
    }

    .specs-wheel, .specs-torque, .specs-acceleration {
        font: normal normal bold 20px / 26px BMWTypeNextRegular !important;
    }

    .interior-title2, .interior-specs1-txt, .interior-specs2-txt {
        font: normal normal 300 18px/24px BMWTypeNextLight !important;
    }

    .form-header-sub, .form-header-sub2 {
        font: normal normal 300 20px / 26px BMWTypeNextThin !important;
    }
}

@media (max-width: 1025px) {

    .header-body {
        top: 1%;
        padding-left: var(--padding-left-mobile);
    }

    .header-body-title {
        font: normal normal 300 25px/45px BMWTypeNextThin;
    }

    .performance-header-container {
        margin-top: var(--margin-top-section-mobile);
    }

    .performance-header-txt {
        font: normal normal 300 16px/22px BMWTypeNextLight;
    }

    .performance-header-img {
        padding-top: 0px;
    }

    .model-image-slider {
        margin-top: var(--margin-top-section-mobile);
    }

    .highlight-container {
        margin-top: var(--margin-top-section-mobile);
    }

    .highlight-header1, .highlight-header2 {
        padding-left: 0px;
    }

    .highlight-txt-container {
        text-align: unset !important;
    }

    .highlight-body {
        font: normal normal 300 16px/22px BMWTypeNextLight;
    }

    .specs-container {
        margin-top: var(--margin-top-section-mobile);
    }

    .highlight-header1, .highlight-header2 {
        font: normal normal 300 35px/40px BMWTypeNextLight;
    }

    .specs-hp-value, .specs-hp {
        font: normal normal 300 80px/90px BMWTypeNextLight;
        letter-spacing: 8px;
    }

    .specs-wheel-value, .specs-torque-value, .specs-acceleration-value {
        margin-top: var(--margin-top-section-mobile);
        font: normal normal 300 32px/48px BMWTypeNextLight;
        letter-spacing: 3.5px;
        color: #1F1F1F;
        opacity: 1;
    }

    .specs-wheel, .specs-torque, .specs-acceleration {
        font: normal normal bold 16px/22px BMWTypeNextRegular;
        letter-spacing: 0.4px;
        color: #1F1F1F;
        text-transform: capitalize;
        opacity: 1;
    }


    .interior-container {
        margin-top: 0px;
        padding-top: 70px;
    }

    .exterior-container {
        margin-top: 70px;
        padding-top: 70px;
    }

    .interior-header {
        font: normal normal bold 16px/22px BMWTypeNextBold;
        letter-spacing: 8px;
        color: #1F1F1F;
        text-transform: uppercase;
        opacity: 1;
    }

    .interior-title1 {
        padding-top: 15px;
        font: normal normal 300 32px/40px BMWTypeNextLight;
        letter-spacing: 0px;
        color: #1F1F1F;
        text-transform: uppercase;
        opacity: 1;
    }

    .interior-title2 {
        width:100%;
        text-align: center;
        font: normal normal 300 16px/22px BMWTypeNextLight;
        letter-spacing: 0px;
        color: #1F1F1F;
        opacity: 1;
    }

    .interior-specs {
        display: flex;
        flex-direction: column;
        padding-top: 60px;
    }

    .interior-specs1Img-mobile {
        order: 1;
        margin-top: 0px;
        /*padding-left: 15px;*/
    }

    .interior-specs1Txt-mobile {
        padding-left:0px;
        order: 2;
        padding-top: var(--margin-top-section-mobile);
        font: normal normal 300 16px/22px BMWTypeNextLight !important;
        letter-spacing: 0px;
        color: #1F1F1F;
        opacity: 1;
    }

    .interior-specs1Txt-container
    {
        padding-bottom:80px;
    }

    .interior-specs2Img-mobile {
        order: 3;
    }

    .interior-specs2Txt-mobile {
        padding-bottom:50px;
        order: 4;
        font: normal normal 300 16px/22px BMWTypeNextLight !important;
        letter-spacing: 0px;
        color: #1F1F1F;
        opacity: 1;
    }


    .interior-specs1-body {
        width: 95%;
        padding-left: 20px;
        margin-top: 0px;
    }


    .interior-specs2-body {
        width: 95%;
        padding-left: 20px;
        margin-top: 0px;
        padding-bottom: 0px;
    }

    .interior-specs1-title, .interior-specs2-title {
        font: normal normal bold 20px/30px BMWTypeNextBold;
        letter-spacing: 0.5px;
        color: #1F1F1F;
        text-transform: capitalize;
        opacity: 1;
    }

    .interior-specs2-img {
        /*margin-top: 70px;*/
    }

    .interior-specs2-title {
        margin-top: var(--margin-top-section-mobile);
    }

    .interior-specs1-txt, .interior-specs2-txt {
        padding-top: 23px;
    }

    .exterior-design {
        margin-top: 60px !important;
    }

    .exterior-design-header {
        font: normal normal bold 16px/22px BMWTypeNextBold;
        letter-spacing: 8px;
        color: #1F1F1F;
        text-transform: uppercase;
        opacity: 1;
    }

    .exterior-design-subheader {
        font: normal normal 300 35px/50px BMWTypeNextRegular;
        letter-spacing: 0px;
        color: #1F1F1F;
        text-transform: uppercase;
        opacity: 1;
    }

    .exterior-design-slider {
        margin-top: 38px !important;
    }

    .image-header {
        text-align: center;
        font: normal normal bold 20px/30px BMWTypeNextLight !important;
        letter-spacing: 0.5px;
        color: #1F1F1F;
        text-transform: capitalize;
        opacity: 1;
    }

    .image-description {
        text-align: center;
        font: normal normal 300 16px/22px BMWTypeNextLight !important;
        letter-spacing: 0px;
        color: #1F1F1F;
        opacity: 1;
    }

    .form-container {
        margin-top: 40px !important;
        margin-left: -15px;        
        padding-left: 0px;
    }

    .form-Sub {
        padding-top: var(--margin-top-section-mobile);
    }

    .form-header {
        font: normal normal 300 34px/40px BMWTypeNextLight !important;
        letter-spacing: 0.88px;
        color: #1F1F1F;
        text-transform: uppercase;
        opacity: 1;
    }

    .form-header-wrapper {
        width: unset;
    }

    .form-img {
        padding-top: 0px;
    }

    .slick-next {
        right: 1% !important;
    }

    .slick-prev
    {
      left: 1% !important;
    }

    .performance-image {
        content: url("../../SpecialEditions/img/540i-mobile.png") !important;
    }

    .visualizer-title {
        margin-top: 92px;
    }
}

@media(min-width:2160px) {

    .form-header-wrapper {
        width: unset;
    }

    .form-Sub {
        padding-left: 100px;
    }
}


@media (min-width:4000px) {
    .header-body-title {
        font: normal normal 100 55px / 125px BMWTypeNextThin;
    }

    .performance-header-txt {
        font: 300 35px / 40px BMWTypeNextLight;
    }

    .highlight-header1, .highlight-header2 {
        font: normal normal 300 55px / 65px BMWTypeNextLight;
    }

    .highlight-body {
        font: normal normal 300 30px / 35px BMWTypeNextLight !important;
    }

    .oneicon-header {
        font: normal normal 300 55px / 65px BMWTypeNextThin;
    }

    .oneicon-txt {
        font: normal normal 300 30px / 35px BMWTypeNextThin;
    }

    .lemans-txt, .oxford-txt {
        font: normal normal bold 25px / 30px BMWTypeNextBold;
    }

    .interior-header {
        font: normal normal bold 26px / 32px BMWTypeNextLight;
    }

    .interior-title1 {
        font: normal normal 300 55px / 65px BMWTypeNextLight;
    }

    .interior-title2 {
        font: normal normal 300 35px / 40px BMWTypeNextLight;
    }

    .interior-specs1-title, .interior-specs2-title {
        font: normal normal bold 32px / 40px BMWTypeNextBold;
    }

    .interior-specs1-txt, .interior-specs2-txt {
        font: normal normal 300 25px / 32px BMWTypeNextLight;
    }

    .image-header {
        font-family: "BMWTypeNextBold" !important;
        font-size: 32px !important;
        line-height: 40px !important;
    }

    .image-description {
        font-family: "BMWTypeNextLight" !important;
        font-size: 20px !important;
    }

    .form-header {
        font: normal normal 300 45px / 50px BMWTypeNextLight;
    }

    .form-header-sub {
        font: normal normal 300 26px / 32px BMWTypeNextThin;
    }

    .form-header-sub2 {
        font: normal normal 300 26px / 32px BMWTypeNextThin;
    }

    .form-group {
        font: normal normal bold 26px / 40px BMWTypeNextBold;
    }

    .form-legal {
        font: normal normal 300 22px / 25px BMWTypeNextThin;
    }

    #btnSub {
        font-size: 25px;
    }

    .form-confirm-msg {
        font: normal normal bold 30px / 40px BMWTypeNextLight;
    }
}

@media(min-width:731px) {
    .header-container {
        background: linear-gradient(90deg,#000 10%,#000c 20%,#0009 30%,#0006 40%,#0003 50%,#0000 60%,#0000);
    }

    .header-img {
        position: relative;
        z-index: -1;
        display: block;
    }
}

@media(max-width:620px) {
    .specs-right-container {
        padding-top: 60px;
        width: 100%;
    }

    .interior-specs1Img-mobile {
        padding-left: 0px;
    }
}

@media(min-width:1446px) and (max-width:1850px) {
    .color-block-group {
        left: 2%;
    }
}

@media (min-width:1350px) and (max-width:1490px) {
    .specs-left-container {
        width: 350px;
    }
}

@media (min-width:1200px) and (max-width: 1440px) {
    .header-body {
        top: 18%;
    }
}

@media(max-width:991px) {
    .no-padding-right {
        padding-right: 15px;
    }

    .no-padding-left {
        padding-left: 15px;
    }
}

@media(max-width:730px) {

    .header-container {
        height: 160vw;
        background-color: black;
    }

    .header-body {
        top: 49% !important;
        padding-left: 0px !important;
        width: 100%;
        text-align: center;
    }

    .header-img {
        content: url("../../SpecialEditions/img/540i/header-page-mobile.png") !important;
    }

    .header-series-subtitle {
        font: normal normal 300 119px / 108px BMWTypeNext !important;
        padding-top: 10px;
    }

    .header-body-subtitle {
        font: normal normal 300 19px / 28px BMWTypeNext !important;
        padding-top: 20px;
    }
}


@media (min-width:1200px) and (max-width:1349px) {
    .specs-left-contain {
        width: 42%;
    }
}

@media (min-width:1200px) and (max-width:1520px) {
    .specs-left-container
    {
        height:40vw;
    }
}

@media (min-width:1356px) and (max-width:1603px) {
    .form-group {
        font: normal normal bold 13px / 30px BMWTypeNextBold;
    }
    .form-header-wrapper
    {
        width:90%;
    }
}

@media (min-width:1200px) and (max-width:1355px) {
    .form-group {
        font: normal normal bold 11.5px / 30px BMWTypeNextBold;
    }

    .form-header-wrapper
    {
        width:90%;
    }
}


