/*Universal*/
:root {
    --primary-color: #1c69d4;
    --secondary-color: #414141;
    --background-color: #e7e7e7;
}

@font-face {
    font-family: TypeNextCondensedProBold;
    src: url('/fonts/TypeNextCondensedPro/BMWTypeNextCondensedProTT-Bold.woff') format("woff");
    font-weight: bold;
    font-style: bold;
}

@font-face {
    font-family: TypeNextCondensedProLight;
    src: url('/fonts/TypeNextCondensedPro/BMWTypeNextCondensedProTT-Light.woff') format("woff");
}

@font-face {
    font-family: TypeNextProRegular;
    src: url('/fonts/TypeNext/BMWTypeNext-Regular.woff2') format("woff");
}

@font-face {
    font-family: TypeNextProBold;
    src: url('/fonts/TypeNext/BMWTypeNext-Bold.woff2') format("woff");
}

* {
    font-family: "BMWTypeNextCondensedProTT-Light", sans-serif;
    font-weight: 400;
    line-height: 32px;
}

p, h1, h2, h3, h4, h5, h6 {
    color: #414141
}

.row {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

html {
    scroll-behavior: smooth;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
}

body {
    box-sizing: border-box;
}

.row > * {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/*Navigation*/


.logo-img {
    width: 40%;
}



/*Home Page*/

.direct-cta-button a.btn {
    padding: 0.5rem 1.5rem;
    background: transparent;
    color: #fff;
    font-weight: 900;
    font-size: 25px;
    border-radius: 2px;
    transition: all 500ms ease-in-out;
}

    .direct-cta-button a.btn:hover {
        background: #fff;
        color: gray;
    }
/*Newsletter*/
.inputWithButton {
    background-color: #fff;
    display: flex;
    border: 1px solid #b5b5b5;
    border-radius: 5px;
    align-items: center;
    overflow: hidden;
    width: 500px;
}

    .inputWithButton .searchInpt {
        height: 100%;
        width: 100%;
        min-height: 60px;
        border: none;
        padding: 0 50px 0 20px;
        color: #6a6a6a;
        font-size: 16px;
        line-height: 20px;
        font-weight: 400;
    }

        .inputWithButton .searchInpt:focus {
            outline: none;
        }

    .inputWithButton .btnSearch {
        margin: 10px;
        border: none;
        padding: 10px 15px;
        cursor: pointer;
        border-radius: 5px;
        color: #fff;
        font-size: 13px;
        line-height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
    }

        .inputWithButton .btnSearch.btnOrange {
            background: #fd942b;
        }

        .inputWithButton .btnSearch.btnAqua {
            background: #1C69D4;
        }

        .inputWithButton .btnSearch .icon {
            margin-left: 10px;
            display: inline-flex;
        }

    .inputWithButton .item:first-child {
        flex-grow: 1;
    }
/*Cookie Policy*/
#cookie-policy {
    margin: 8rem 5rem;
}
/*Forms*/
#modelSelector {
    display: flex;
    justify-content: space-between
}

.center button {
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    background: #f5f5f5;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 5px;
}


.contact-form .close-btn, .contact-form-td .close-btn-td, .contact-form-ls .close-btn-ls {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: #1C69D4;
    color: #fff;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.contact-form, .contact-form-td, .contact-form-ls {
    width: 50%;
    top: 2%;
    left: 25%;
    position: absolute;
    overflow: hidden;
}

    .contact-form label, .contact-form-td label, .contact-form-ls label {
        display: block;
        font-weight: bold;
    }

    .contact-form input[type=text], .contact-form input[type=email], .contact-form input[type=tel] {
        padding: 12px 0;
        margin: 10px 0;
        box-sizing: border-box;
    }

    .contact-form-td input[type=text], .contact-form-td input[type=email], .contact-form-td input[type=tel] {
        padding: 12px 0;
        margin: 10px 0;
        box-sizing: border-box;
    }

    .contact-form-ls input[type=text], .contact-form-ls input[type=email], .contact-form-ls input[type=tel] {
        padding: 12px 0;
        margin: 10px 0;
        box-sizing: border-box;
    }

    .contact-form input, .contact-form textarea {
        background: #F7F7F7;
        border: none;
        width: 100%;
        padding: 10px;
    }

    .contact-form-td input, .contact-form-td textarea {
        background: #F7F7F7;
        border: none;
        width: 100%;
        padding: 10px;
    }

    .contact-form-ls input, .contact-form-ls textarea {
        background: #F7F7F7;
        border: none;
        width: 100%;
        padding: 10px;
    }

.form-container {
    background: #FFF;
}

.form-content .form-title {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
}

.btn-frm {
    display: inline-block;
    position: absolute;
    float: right;
    bottom: 3rem;
    right: 6rem;
    font-size: 18px;
    color: #fff;
    background: #1C69D4;
    padding: 13px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 30%;
}

.btn-frm-general {
    position: relative;
    font-size: 18px;
    color: #fff;
    background: #1C69D4;
    padding: 13px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}

.btn-frm-getoffer {
    position: relative;
    font-size: 18px;
    color: #fff;
    background: #1C69D4;
    padding: 13px 20px;
    bottom: 5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}

.btn-frm:hover, .btn-frm-general:hover, .btn-frm-getoffer {
    opacity: 0.8
}

.contact-form .form-fields {
    padding: 0 5rem;
}

.contact-form-td .form-fields {
    padding: 0 5rem;
}

.contact-form-ls .form-fields {
    padding: 0 5rem;
}

.tacbox label {
    display: inline-block;
    padding-right: 2px;
    overflow: hidden;
}

.tacbox input {
    vertical-align: middle;
    width: 1rem;
}

    .tacbox input[type=checkbox] {
        transform: scale(2);
        margin-left: 1rem;
    }

.tacbox label span {
    vertical-align: middle;
    margin-left: 1rem;
}

.tacbox {
    height: auto;
    margin-top: 2rem;
}

.getoffer-form .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: #1C69D4;
    color: #fff;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}

.getoffer-form {
    width: 60%;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -10%);
    position: absolute;
    overflow: hidden;
    padding: 5rem;
}

    .getoffer-form label {
        display: block;
        font-weight: bold;
    }

    .getoffer-form input[type=text], .getoffer-form input[type=email], .getoffer-form input[type=tel] {
        padding: 12px 0;
        margin: 10px 0;
        box-sizing: border-box;
    }


    .getoffer-form input, .getoffer-form textarea {
        background: #F7F7F7;
        border: none;
        width: 100%;
        padding: 10px;
    }

    .getoffer-form .form-fields {
        padding: 0 5rem;
    }

.getofferForm {
    display: block; /* Hidden by default */
    position: sticky; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.test-drive-booking {
    background: #fff
}
/*Link-Vehicles*/
.link-image > img {
    width: 100%;
    object-fit: cover;
}

.link-vehicles {
    padding: 2rem 2rem 2rem 2rem;
}

.link-vehicles-det {
    border-bottom: 3px solid #888888;
}

.link-title {
    padding: 1rem 0 0 0;
}

    .link-title .link-tit {
        font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
        font-size: 2.25rem;
        line-height: 49px
    }

    .link-title .link-desc {
        font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
        font-weight: 400;
        font-size: 1.5rem;
        color: #888
    }

@media (min-width: 320px) and (max-width:480px) {

    .link-vehicles {
        padding: 0;
    }

    .link-image {
        width: 100% !important;
    }

    .link-title {
        width: 100% !important;
        display: grid;
        justify-items: center;
        padding: 2rem;
    }
}

@media (min-width: 481px) and (max-width:1200px) {
    .link-vehicles {
        padding: 0;
    }

    .link-image {
        width: 100% !important;
    }

    .link-title {
        width: 100% !important;
        display: grid;
        justify-items: center;
        padding: 2rem;
    }
}



@media (min-width: 1201px) and (max-width:1919px) {
    .link-title {
        padding: 5rem 0 0 0;
    }
}

@media (min-width:1920px) {
    .link-vehicles {
        padding: 2rem 10rem 0 10rem;
    }

    .link-vehicles-det {
        border-bottom: 3px solid #888888;
    }

    .link-title {
        padding: 6rem 0 0 0;
    }

        .link-title .link-tit {
            font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
            font-size: 2.25rem;
            line-height: 49px
        }

        .link-title .link-desc {
            font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
            font-weight: 400;
            font-size: 1.5rem;
            color: #888
        }
}
/*Link-Vehicles*/



.button-vehicles {
    font-family: "BMWTypeNextCondensedProTT-Bold", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
}

.direct-wrapper-grid {
    display: grid;
    place-items: center;
}

.direct-content {
    width: 100%;
    background-color: rgba(28,105,212,1);
    height: 350px;
    padding: 4rem 0 0 0;
    position: relative;
}

    .direct-content * {
        z-index: 99;
    }

    .direct-content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 0;
    }

.direct-background {
    display: grid;
    place-items: center;
    width: 100%;
}

.direct-heading {
    width: auto;
    color: rgba(255,255,255,1);
    font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
    ;
    font-size: 2.5rem;
    opacity: 1;
    display: table;
    margin: 0 auto;
}

.direct-description {
    width: auto;
    color: rgba(255,255,255,1);
    font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
    ;
    font-size: 1.5rem;
    opacity: 1;
    display: table;
    margin: 0 auto;
}

.direct-cta-button {
    display: grid;
    place-items: center;
    padding: 1rem 0 0 0;
}

.newsletter-wrapper-grid {
    display: grid;
    place-items: center;
}

.newsletter-content {
    width: 100%;
    background-color: black;
    height: 450px;
    display: grid;
    place-content: center;
    position: relative;
}

    .newsletter-content * {
        z-index: 2;
    }

    .newsletter-content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
    }

.newsletter-background {
    display: grid;
    place-items: center;
    width: 100%;
}

.newsletter-heading {
    width: auto;
    color: rgba(255,255,255,1);
    font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
    letter-spacing: 3px;
    font-size: 36px;
    opacity: 1;
    display: table;
    margin: 0 auto;
}

.newsletter-description {
    width: auto;
    color: rgba(255,255,255,1);
    font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
    letter-spacing: 3px;
    font-size: 20px;
    opacity: 1;
    display: table;
    margin: 0 auto;
}

.newsletter-cta-button {
    font-family: "BMWTypeNextCondensedProTT-Bold", sans-serif;
    display: grid;
    place-items: center;
    padding: 3rem 0 0 0;
}

.subscribe-wrapper {
    color: white;
    font-weight: bold;
    width: 545px;
}

.form-wrapper {
    padding: 0.4em;
    background-color: white;
}

.input-field {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

input[type="email"] {
    width: 100%;
    border: none;
    padding-left: 5px;
}

    input[type="email"]:active {
        border: none;
    }

input::placeholder {
    padding-left: 5px;
}

button.news-letter-submit {
    border: none;
    background-color: #1C69D4;
    color: white;
    padding: 8px 16px;
    font-size: 1rem;
    cursor: pointer;
}


/*Main Carousel*/
.carousel-indicators [data-bs-target] {
    width: 16px !important;
    height: 16px !important;
    border-radius: 100% !important;
}

.carousel-inner-main {
    position: relative;
    width: 100%;
    overflow: hidden;
}

@media (min-width: 768px) {
    .carousel-inner {
        display: flex;
    }
}

/*Main Carousel*/


/*Footer*/
.sec-content a, .footer-sec-menu a {
    list-style: none;
    text-decoration: none;
}

.bmwlv-footer-container {
    background-color: #fff;
    color: #000;
    margin-top: 45px;
}

.bmwlv-uxn-footer-container {
    background-color: #FFFFFF;
}

.bmwlv-main-footer {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 300;
    background: #e6e6e6;
    margin: 0;
    padding: 0;
}

.bmwlv-footer-container .bmwlv-uxn-container li {
    list-style: none;
    padding: 0.5rem 0 0 0rem;
}

.bmwlv-footer-container .bmwlv-uxn-container ul {
    padding: 0;
}

.footer-main-menu, .footer-sec-menu {
    padding: 3rem 8rem 3rem 8rem;
}

    .footer-main-menu h3 {
        /*text-align: center;*/
    }

.bmwlv-footer-container .bmwlv-uxn-container li .footer-tag {
    text-decoration: none;
}

.footer-title {
    color: #666 !important;
    font-size: 18px;
    font-weight: 500;
}

    .footer-title:hover {
        color: #262626 !important;
    }

.bmwlv-uxn-footer-container .footer-sec-menu ul li {
    display: inline-block;
    padding-right: 5rem;
}

.bmwlv-uxn-socials-container ul li {
    display: flex;
    float: right;
    padding-right: 2rem;
    height: 100%;
    align-items: center;
}

.bmwlv-uxn-socials-container {
    padding: 3rem 8rem 1rem 8rem;
}

.footer-socials {
    padding-bottom: 2rem;
    border-bottom: 3px solid black;
}

.bmwlv-uxn-container {
    position: relative;
}

.soc-title {
    float: right;
    padding-right: 16.5rem;
    padding-bottom: 1rem;
}

.sec-footer {
    color: #1366d7 !important;
    font-size: 18px;
    font-weight: bold;
}

.sec-content li:last-child {
    padding-right: 0;
}

@media screen and (max-width:500px) {
    .bmwlv-uxn-socials-container {
        padding: 2rem 1rem 1rem 1rem;
    }

        .bmwlv-uxn-socials-container ul li {
            display: inline-block;
            padding-right: 1.5rem !important;
            float: right;
        }


    .bmwlv-uxn-footer-container .footer-sec-menu ul li {
        display: inline-block;
        padding-right: 1rem;
        text-align: center;
        padding-bottom: 1rem;
    }

    .bmwlv-uxn-footer-container .footer-sec-menu ul {
        padding-left: 0rem;
    }

    .footer-main-menu, .footer-sec-menu {
        padding: 3rem 0rem 3rem 0rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .bmwlv-uxn-socials-container ul li {
        display: inline-block;
        text-align: center;
        padding-right: 6rem;
    }

    .bmwlv-uxn-socials-container {
        padding: 3rem 5rem 1rem 5rem;
    }

    .bmwlv-uxn-footer-container .footer-sec-menu ul li {
        display: inline-block;
        padding-right: 0.5rem;
        text-align: center;
        padding-bottom: 1rem;
    }

    .bmwlv-uxn-footer-container .footer-sec-menu ul {
        padding-left: 0rem;
    }

    .footer-main-menu, .footer-sec-menu {
        padding: 3rem 0rem 3rem 0rem;
    }
}

.accordion-footer {
    background-color: #252525;
    color: #fafafa;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

    .accordion-footer:hover {
        background-color: #ccc;
    }

    .accordion-footer::after {
        color: #FFFF;
        font-weight: 900;
        margin-left: 5px;
        font-family: "Font Awesome 5 Free";
        content: "\f107";
        float: right;
        padding-left: 10px
    }

.activeaccordion-footer:after {
    font-weight: 900;
    margin-left: 5px;
    font-family: "Font Awesome 5 Free";
    content: "\f106";
    color: #FFFF;
    float: right;
    padding-left: 10px;
}

.panel-footer-link {
    padding: 0 0;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
/*Footer*/

/*News Page at Home*/
/*
    **
    ** Probably a better way to do this but here is my version of a post grid layout similar to a masonry layout. Work in progess.
    */



a {
    text-decoration: none;
    cursor: pointer;
}

    a.btn {
        padding: .5rem 1.5rem;
        background: white;
        color: gray;
        font-weight: 500;
        border-radius: 20px;
        transition: all 150ms ease-in-out;
    }

        a.btn:hover {
            background: #000A52;
            color: white;
        }

.news-page-header {
    height: 30%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    text-align: center;
}

.hero-text {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%
}

    .hero-text > * {
        color: #000;
    }

    .hero-text > h1 {
        font-size: 2.5rem;
    }

    .hero-text > p {
        font-size: 1.5rem;
    }

/*
    ** Blog Post Grid
    */
.post-grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto;
    grid-gap: 0%;
    max-width: auto;
    margin: 0 auto 0rem;
}

    .post-grid-container .post {
        position: relative;
        border: none;
        overflow: hidden;
        margin-bottom: 0;
        background: transparent;
        -webkit-box-shadow: 3px 5px 8px -1px rgba(0, 0, 0, 0);
        -moz-box-shadow: 3px 5px 8px -1px rgba(0, 0, 0, 0);
        box-shadow: 3px 5px 8px -1px rgba(0, 0, 0, 0);
        transition: box-shadow .3s ease-in-out;
    }

        .post-grid-container .post:hover {
            -webkit-box-shadow: 3px 5px 8px -1px rgba(0,0,0,0.5);
            -moz-box-shadow: 3px 5px 8px -1px rgba(0,0,0,0.5);
            box-shadow: 3px 5px 8px -1px rgba(0,0,0,0.5);
        }

    .post-grid-container .post-text {
        position: absolute;
        bottom: 1rem;
        left: 0;
        padding: 0 20px;
        background: rgba(63, 73, 91, 0.5);
        height: auto;
        color: #FFFFFF;
    }

.post a {
    color: white;
    text-shadow: 2px 1px 4px rgb(0, 0, 0);
}

.post img {
    opacity: 1;
    object-fit: cover;
    transition: all .9s ease-in-out;
}



.post:nth-child(1) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 4;
    max-height: 600px;
}


    .post:nth-child(1):hover img {
        transform: scale(1.2);
    }

.post:nth-child(2) {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 1;
    max-height: 300px;
}


    .post:nth-child(2):hover img {
        transform: scale(1.2);
    }

.post:nth-child(3) {
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
    max-height: 300px;
}

    .post:nth-child(3):hover img {
        transform: scale(1.2);
    }

.post:nth-child(4) {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    max-height: 300px;
}

    .post:nth-child(4):hover img {
        transform: scale(1.2);
    }

.post:nth-child(5) {
    grid-column-start: 4;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    max-height: 300px;
}

    .post:nth-child(5):hover img {
        transform: scale(1.2);
    }







@media only screen and (max-width:500px) {
    post:nth-child(1), .post:nth-child(2), .post:nth-child(3), .post:nth-child(4), .post:nth-child(5) {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 4;
        max-height: 320px;
    }

    .post-grid-container {
        display: block;
    }


    .news-page-header {
        height: 25%;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }

    .img-fluid {
        max-width: 100%;
        height: 18rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .post:nth-child(1), .post:nth-child(2), .post:nth-child(3), .post:nth-child(4), .post:nth-child(5) {
        max-height: 400px;
    }

    .post-grid-container {
        display: block;
    }

    .post {
        height: 400px;
        margin-bottom: 5%;
    }

    .news-page-header {
        height: 25%;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }

    .img-fluid {
        max-width: 100%;
        height: 18rem;
    }
}

.post-title {
    font-family: "BMWTypeNextCondensedProTT-Medium",sans-serif;
    font-size: 1.3rem;
    color: #fff;
    padding: 0.5rem;
}
/*News Page at Home*/


/*Offers*/
.carousel-inner-offer {
    padding: 0 !important;
    margin: 0;
}

.carousel-inner {
    padding: 1em;
}

.card {
    margin: 0 0.5em;
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
    border: none;
}

.carousel-control-prev-offer {
    padding: 3rem 0 0 0;
    background-color: transparent;
    border: none
}

.carousel-control-next-offer {
    padding: 3rem 0 0 4rem;
    background-color: transparent;
    border: none
}

@media (min-width: 768px) {
    .carousel-item-offer {
        margin-right: 0;
        flex: 0 0 33.333333%;
        display: block;
    }

    .carousel-inner {
        display: flex;
    }
}

.card .img-wrapper {
    max-width: 100%;
    height: 20em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card img {
    max-height: 100%;
}

@media (max-width: 767px) {
    .card .img-wrapper {
        height: 17em;
    }
}

.offers-heading {
    display: grid;
    width: auto;
    color: black;
    font-size: 40px;
    opacity: 1;
    font-weight: 400
}

.offers-description {
    display: grid;
    place-items: center;
    width: auto;
    color: #888888;
    font-size: 24px;
    opacity: 1;
}

.view-offers-button {
    display: grid;
    padding: 3rem 0 0 0;
    font-family: "BMWTypeNextCondensedProTT-Bold",sans-serif;
    font-weight: 700,bold;
}

.spec-offers {
    padding: 2rem 0 0 0;
}

.carousel-btns {
    width: 100%
}
/*Offers*/


/*Side Links*/
.side-links {
    padding: 2rem 0 2rem 0;
    background-color: #E7E7E7;
}

.side-title {
    font-size: 1.625rem;
    text-decoration: none !important;
    color: #000000;
}

.side-title-logo {
    width: 50px;
    height: 50px;
}

.side-container {
    border-right: 2px solid black;
}

.sidebar-space {
    font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
    font-weight: 400;
    font-size: 1.2rem;
    padding-left: 1rem;
    letter-spacing: 4px;
}

.vertical {
    border-right: 3px solid #000000;
    height: 3rem;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .side-title {
        font-size: 1rem;
    }

    .sidebar-space {
        padding-left: 0.4rem;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .side-title {
        font-size: 1.625rem;
    }
}

/* Mobile Responsive */
/* • 320px — 480px: Mobile devices
• 481px — 768px: iPads, Tablets -hamburger menu for ipad and mobile
• 769px — 1024px: Small screens, laptops -constant
• 1025px — 1200px: Desktops, large screens -ito yung may media query
• 1201px and more —  Extra large screens, TV

 */
@media (min-width: 320px) and (max-width:480px) {
    .sidebar-space {
        font-size: 1rem;
    }

    .sidebar-links {
        width: 100% !important;
    }

    .vertical {
        border-right: none;
        height: 3rem;
    }

    .side-title-logo {
        width: 20px;
        height: 20px;
    }
}

@media (min-width: 481px) and (max-width:1200px) {
    .sidebar-space {
        font-size: 1rem;
    }

    .side-title-logo {
        width: 25px;
        height: 25px;
    }
}


@media (min-width: 1201px) and (max-width:1919px) {
    .sidebar-space {
        font-size: 1.5rem;
    }
}

@media (min-width:1920px) {
    .sidebar-space {
        font-size: 1.5rem;
    }
}








/* SIde Links*/

/*News Page*/
.galleryBrand {
    width: 102%;
    margin-left: -11px;
    padding-right: 5px;
    padding-left: 0px;
    font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
    ;
}

    .galleryBrand .fgx-brand-lt-h1 {
        font-size: 2.75rem !important;
        line-height: 1rem;
        text-align: center
    }

    .galleryBrand .fgx-brand-lt-h1 {
        font-size: 18px
    }

    .galleryBrand .fgx-brand-lt-h2 {
        color: #626466;
        font-size: 16px !important;
        font-weight: bold;
        text-align: center
    }

    .galleryBrand .fgx-brand-lt-h2 {
        font-size: 16px;
        text-transform: none
    }

    .galleryBrand img {
        width: 100%
    }

    .galleryBrand .brand-gallery {
        padding: 0
    }

        .galleryBrand .brand-gallery .row {
            margin-left: 0;
            margin-right: 0
        }

    .galleryBrand .padding-min {
        padding: 0;
        margin: 0
    }

    .galleryBrand .flexbox {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap
    }

    .galleryBrand .flexinline {
        display: -webkit-inline-box;
        display: -moz-inline-box;
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;
        flex-wrap: wrap
    }

    .galleryBrand .flex-vcenter {
        flex-direction: column;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .galleryBrand .flex-center {
        align-items: center
    }

    .galleryBrand .flex-order-1 {
        order: 1
    }

    .galleryBrand .flex-order-2 {
        order: 3
    }

    .galleryBrand .flex-order-3 {
        order: 2
    }

    .galleryBrand .flex-order-4 {
        order: 4
    }

    .galleryBrand .heading, .galleryBrand .feature-tile-container, .galleryBrand .small-tile-container, .galleryBrand .four-tile-container, .galleryBrand .four-tile-container .small-tile, .galleryBrand .four-tile-container-long, .galleryBrand .four-tile-container-long .small-tile {
        width: 100%
    }

    .galleryBrand .hidden-tile {
        display: none
    }

        .galleryBrand .hidden-tile.tile-show {
            display: block
        }

    .galleryBrand .mobile {
        display: block
    }

    .galleryBrand .desktop {
        display: none
    }

    .galleryBrand .subheadline {
        display: none
    }

    .galleryBrand .social-item {
        position: relative
    }

        .galleryBrand .social-item a {
            overflow: hidden;
            display: block
        }

        .galleryBrand .social-item:hover img {
            -moz-transform: scale(1.1);
            -webkit-transform: scale(1.1);
            transform: scale(1.1)
        }

        .galleryBrand .social-item picture img {
            -moz-transition: all .3s;
            -webkit-transition: all .3s;
            transition: all .3s
        }

    .galleryBrand .social-label-overlay {
        position: absolute;
        bottom: 0;
        width: 100%;
        min-height: 20px
    }

        .galleryBrand .social-label-overlay.blue-bg {
            background: rgba(6,120,188,0.9)
        }

        .galleryBrand .social-label-overlay.blue-bg {
            background: rgba(45,150,205,0.75)
        }

        .galleryBrand .social-label-overlay.black-bg {
            background: rgba(0,0,0,0.5)
        }

    .galleryBrand .social-label-container {
        font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
        ;
        width: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding-top: 5%;
        padding-bottom: 5%
    }

        .galleryBrand .social-label-container:not(.fgx-brand-mobile-container-pad) {
            padding: 5%
        }

        .galleryBrand .social-label-container.cta-align-center {
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center
        }

        .galleryBrand .social-label-container .black-txt {
            color: #000
        }

        .galleryBrand .social-label-container .white-txt {
            color: #fff
        }

        .galleryBrand .social-label-container span {
            flex-grow: 1
        }

            .galleryBrand .social-label-container span.arrow-bg {
                color: #fff;
                font-size: 60px;
                flex-grow: 0;
                line-height: 0
            }

            .galleryBrand .social-label-container span.arrow-bg {
                font-size: 2.4rem
            }

                .galleryBrand .social-label-container span.arrow-bg:hover:before {
                    content: "\48"
                }

    .galleryBrand .social-view-all {
        text-align: center;
        padding: 15px 0;
        background-color: #0276b3;
        cursor: pointer;
        width: 100%
    }

    .galleryBrand .social-view-all {
        background-color: #0276b3
    }

        .galleryBrand .social-view-all .social-toggle {
            display: inline-block;
            margin: 0;
            border-bottom: 2px solid transparent
        }

        .galleryBrand .social-view-all .viewAll, .galleryBrand .social-view-all .viewLess {
            color: #fff;
            font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
            ;
            font-size: 24px;
            position: relative;
            vertical-align: middle
        }

        .galleryBrand .social-view-all .viewAll, .galleryBrand .social-view-all .viewLess {
            text-transform: uppercase;
            font-size: 18px;
            font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
            ;
        }

        .galleryBrand .social-view-all .viewLess {
            display: none
        }

        .galleryBrand .social-view-all .view-glyph {
            color: #fff;
            font-size: 2rem;
            padding-left: 10px
        }

        .galleryBrand .social-view-all .view-glyph {
            font-size: 1.4rem;
            font-weight: 700;
            padding-left: 3px
        }

            .galleryBrand .social-view-all .view-glyph:before {
                content: "\4f"
            }

            .galleryBrand .social-view-all .view-glyph.icon-minus-outline-50px:before {
                content: "\51"
            }

        .galleryBrand .social-view-all:hover {
            background-color: #102b4e
        }

            .galleryBrand .social-view-all:hover .social-toggle {
                border-bottom: 2px solid #0276b3
            }

    .galleryBrand .social-item.videotile .social-label-container span.arrow-bg {
        font-size: 30px
    }

        .galleryBrand .social-item.videotile .social-label-container span.arrow-bg:hover:before {
            content: "\58"
        }

        .galleryBrand .social-item.videotile .social-label-container span.arrow-bg:hover:before {
            content: "\e627"
        }

@media(min-width:768px) {
    .galleryBrand .mobile {
        display: none
    }

    .galleryBrand .desktop {
        display: block
    }

    .galleryBrand .flex-order-2 {
        order: 2
    }

    .galleryBrand .flex-order-3 {
        order: 3
    }

    .galleryBrand .hidden-tile {
        display: block
    }

    .galleryBrand .heading-75 {
        width: 75%
    }

    .galleryBrand .feature-tile-container {
        width: 50%
    }

    .galleryBrand .small-tile-container {
        width: 25%
    }

    .galleryBrand .four-tile-container {
        width: 50%
    }

        .galleryBrand .four-tile-container .small-tile {
            width: 50%
        }

    .galleryBrand .four-tile-container-long {
        width: 100%
    }

        .galleryBrand .four-tile-container-long .small-tile {
            width: 25%
        }

    .galleryBrand .social-label-container {
        padding: 5%
    }

        .galleryBrand .social-label-container span {
            font-size: 12px
        }

        .galleryBrand .social-label-container span {
            font-size: 1.4rem
        }

            .galleryBrand .social-label-container span.arrow-bg {
                padding: 0
            }

    .galleryBrand .feature-tile .social-label-container, .galleryBrand .feature-tile-container .social-label-container {
        padding: 3%
    }

        .galleryBrand .feature-tile .social-label-container span, .galleryBrand .feature-tile-container .social-label-container span {
            flex-grow: 0;
            font-size: 21px
        }

            .galleryBrand .feature-tile .social-label-container span.arrow-bg, .galleryBrand .feature-tile-container .social-label-container span.arrow-bg {
                font-size: 96px
            }

            .galleryBrand .feature-tile .social-label-container span.arrow-bg, .galleryBrand .feature-tile-container .social-label-container span.arrow-bg {
                font-size: 4.4rem
            }

    .galleryBrand .five-tile-layout .heading, .galleryBrand .five-tile-layout .small-tile-container {
        width: 50%
    }

    .galleryBrand .five-tile-layout .four-tile-container {
        width: 100%
    }
}

@media(min-width:768px) {
    .galleryBrand .subheadline {
        display: block
    }
}

@media(max-width:768px) {
    .galleryBrand .brand-gallery .fgx-brand-lt-h1 {
        padding: 30px 0;
        font-size: 2.6rem;
        line-height: 2.6rem
    }
}

.galleryBrand .brand-gallery.brand-ds-style .heading-container {
    max-width: 100%;
    overflow: hidden;
    position: relative;
    min-height: 100px;
    text-align: center
}

@media(min-width:768px) {
    .galleryBrand .brand-gallery.brand-ds-style .heading-container {
        min-height: 225px
    }
}

.galleryBrand .brand-gallery.brand-ds-style .heading-container.has-bg-image .heading-content {
    color: #fff
}

.galleryBrand .brand-gallery.brand-ds-style .heading-img-bg {
    position: absolute;
    z-index: -1;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

    .galleryBrand .brand-gallery.brand-ds-style .heading-img-bg img {
        min-width: 100%;
        width: auto
    }

.galleryBrand .brand-gallery.brand-ds-style .heading-content {
    padding-top: 40px;
    padding-bottom: 40px
}

.galleryBrand .brand-gallery.brand-ds-style .subheadline {
    display: block;
    padding-top: 16px;
    margin-bottom: 0
}

    .galleryBrand .brand-gallery.brand-ds-style .subheadline.fgx-brand-ds {
        letter-spacing: 1px
    }

@media(min-width:768px) {
    .galleryBrand .brand-gallery.brand-ds-style .column-container {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-flex-flow: row nowrap;
        -webkit-flex-direction: row;
        -webkit-justify-content: center;
        -webkit-align-content: center;
        -webkit-align-items: stretch;
        flex-flow: row nowrap;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        align-items: stretch
    }

        .galleryBrand .brand-gallery.brand-ds-style .column-container .column-item {
            -webkit-box-flex: 0 1 33.3%;
            -moz-box-flex: 0 1 33.3%;
            -webkit-flex: 0 1 33.3%;
            -ms-flex: 0 1 33.3%;
            flex: 0 1 33.3%
        }

            .galleryBrand .brand-gallery.brand-ds-style .column-container .column-item.column-large {
                -webkit-box-flex: 0 1 66.6%;
                -moz-box-flex: 0 1 66.6%;
                -webkit-flex: 0 1 66.6%;
                -ms-flex: 0 1 66.6%;
                flex: 0 1 66.6%
            }
}

.galleryBrand .brand-gallery.brand-ds-style .tile-item {
    width: 100%
}

.galleryBrand .brand-gallery.brand-ds-style .social-label-overlay {
    min-height: 56px
}

    .galleryBrand .brand-gallery.brand-ds-style .social-label-overlay.blue-bg {
        background: rgba(0,9,91,0.9)
    }

.galleryBrand .brand-gallery.brand-ds-style .social-label-container {
    padding: 16px;
    display: block
}

    .galleryBrand .brand-gallery.brand-ds-style .social-label-container span.arrow-bg {
        position: relative;
        display: inline-block;
        width: 10px;
        height: 14px;
        font-size: 14px;
        margin-left: 8px;
        margin-top: -2px;
        vertical-align: baseline;
        line-height: initial
    }

        .galleryBrand .brand-gallery.brand-ds-style .social-label-container span.arrow-bg:before {
            position: absolute;
            font-size: 32px;
            top: -8px;
            left: -11px;
            line-height: 1.0
        }

.galleryBrand .brand-gallery.brand-ds-style .social-item.videotile .social-label-container span.arrow-bg {
    font-size: 20px;
    width: 20px;
    height: 16px
}

    .galleryBrand .brand-gallery.brand-ds-style .social-item.videotile .social-label-container span.arrow-bg:before {
        font-size: 20px;
        top: -2px;
        left: 0
    }

.galleryBrand .brand-gallery.brand-ds-style .social-view-all {
    padding: 24px 0;
    background-color: #f2f2f2
}

    .galleryBrand .brand-gallery.brand-ds-style .social-view-all .viewAll, .galleryBrand .brand-gallery.brand-ds-style .social-view-all .viewLess {
        color: #00095b;
        font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
        ;
        font-size: 18px;
        line-height: 1;
        letter-spacing: 1px;
        font-weight: 400
    }

    .galleryBrand .brand-gallery.brand-ds-style .social-view-all .view-glyph {
        color: #00095b;
        font-size: 16px
    }










.expanded-feature {
    width: 102%;
    text-align: center;
    position: relative;
    z-index: 1;
    padding-top: 20px
}

    .expanded-feature.brand-ds-container {
        padding-top: 48px;
        padding-bottom: 48px
    }

        .expanded-feature.brand-ds-container .sub-component-wrap:not(.no-pad) {
            padding: 32px 24px
        }

    .expanded-feature .expanded-header .iconcta {
        color: #0276b3;
        font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
        ;
        font-weight: regular
    }

    .expanded-feature .expanded-header .iconcta {
        font-size: 1.7rem;
        font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
        ;
    }

        .expanded-feature .expanded-header .iconcta i {
            font-size: 3rem;
            top: -2px;
            position: relative
        }

    .expanded-feature .expanded-header .global-cta-expanded-feature.btn-primary, .expanded-feature .expanded-header .global-cta-expanded-feature.btn-secondary, .expanded-feature .expanded-header .global-cta-expanded-feature.btn-secondary-alt, .expanded-feature .expanded-header .global-cta-expanded-feature.btn-icon, .expanded-feature .expanded-header .global-cta-expanded-feature.btn-icon-light, .expanded-feature .expanded-header .global-cta-expanded-feature.btn-icon-light-alt, .expanded-feature .expanded-header .global-cta-expanded-feature.btn-link {
        margin: 4rem auto 0
    }

    .expanded-feature .expanded-header .global-cta-expanded-feature.btn-primary, .expanded-feature .expanded-header .global-cta-expanded-feature.btn-secondary, .expanded-feature .expanded-header .global-cta-expanded-feature.btn-secondary-alt, .expanded-feature .expanded-header .global-cta-expanded-feature.btn-icon, .expanded-feature .expanded-header .global-cta-expanded-feature.btn-icon-light, .expanded-feature .expanded-header .global-cta-expanded-feature.btn-icon-light-alt, .expanded-feature .expanded-header .global-cta-expanded-feature.btn-link {
        text-transform: uppercase;
        margin: 40px 0 15px 0;
        box-shadow: 0 2px 3px 0 rgba(0,0,0,0.15);
        letter-spacing: 1px;
        outline-offset: 2px
    }

    .expanded-feature .expanded-header.brand-ds-style .expanded-img-wrap {
        padding-top: 0;
        padding-bottom: 32px
    }

    .expanded-feature .expanded-header.brand-ds-style .btn-primary, .expanded-feature .expanded-header.brand-ds-style .btn-primary-icon, .expanded-feature .expanded-header.brand-ds-style .btn-primary-outline, .expanded-feature .expanded-header.brand-ds-style .btn-primary-outline-icon, .expanded-feature .expanded-header.brand-ds-style .btn-secondary, .expanded-feature .expanded-header.brand-ds-style .btn-secondary-alt, .expanded-feature .expanded-header.brand-ds-style .btn-secondary-outline, .expanded-feature .expanded-header.brand-ds-style .btn-secondary-outline-icon {
        min-width: 230px
    }

    .expanded-feature .expanded-header.brand-ds-style .iconcta {
        margin-top: 32px
    }

        .expanded-feature .expanded-header.brand-ds-style .iconcta .icon:before {
            top: -9px
        }

    .expanded-feature .expanded-header.brand-ds-style .fgx-divider-line {
        display: block;
        max-width: 740px;
        width: 90%;
        height: 1px;
        background-color: rgba(0,0,0,0.4);
        margin-top: 24px;
        margin-left: auto;
        margin-right: auto
    }

    .expanded-feature .expanded-header.brand-ds-style .expanded-feature-headline {
        margin-top: 0;
        margin-bottom: 0;
        color: #00095b
    }

    .expanded-feature .expanded-header.brand-ds-style .item {
        padding-top: 8px
    }

        .expanded-feature .expanded-header.brand-ds-style .item .ml-wrapper {
            margin-left: auto;
            margin-right: auto;
            max-width: 820px
        }

@media only screen and (min-width:768px) and (max-width:991px) {
    .expanded-feature .expanded-header.brand-ds-style .item .ml-wrapper {
        max-width: 700px
    }
}

@media only screen and (max-width:767px) {
    .expanded-feature .expanded-header.brand-ds-style .item .ml-wrapper {
        max-width: 280px;
        padding-left: 0;
        padding-right: 0
    }
}

.expanded-feature .expanded-header.brand-ds-style a.global-cta-expanded-feature {
    margin-top: 32px
}

.expanded-feature .expanded-header.brand-ds-style p.global-cta-expanded-feature {
    margin-bottom: 0
}

    .expanded-feature .expanded-header.brand-ds-style p.global-cta-expanded-feature > a:not(:first-child) {
        margin-left: 16px
    }

    .expanded-feature .expanded-header.brand-ds-style p.global-cta-expanded-feature > a:not(:last-child) {
        margin-right: 16px
    }

@media screen and (min-width:320px) and (max-width:767px) {
    .expanded-feature .expanded-header.brand-ds-style p.global-cta-expanded-feature > a:not(:first-child) {
        margin-left: 0
    }

    .expanded-feature .expanded-header.brand-ds-style p.global-cta-expanded-feature > a:not(:last-child) {
        margin-right: 0
    }

    .expanded-feature .expanded-header.brand-ds-style p.global-cta-expanded-feature > a.fgx-hide-on-mobile {
        display: none
    }
}

.expanded-feature .expanded-header.brand-ds-style p.global-cta-expanded-feature.fgx-mobile-only {
    display: none
}

@media screen and (min-width:320px) and (max-width:767px) {
    .expanded-feature .expanded-header.brand-ds-style p.global-cta-expanded-feature.fgx-mobile-only {
        display: block
    }
}

.expanded-feature .expanded-header.brand-ds-style p.icon-cta-expanded-feature {
    margin-bottom: 0
}

.expanded-feature .expanded-header.brand-ds-style .context-disclosure {
    margin-bottom: 0;
    padding-top: 16px
}

.expanded-feature .expanded-header.brand-ds-style .ml-wrapper .mltext, .expanded-feature .expanded-header.brand-ds-style .context-disclosure {
    color: #4d4d4d
}

.expanded-feature .expanded-content {
    width: 100%
}

.expanded-feature .expanded-background img {
    width: 100%;
    height: 100%
}

.expanded-feature .expanded-header {
    font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
    ;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    position: relative
}

    .expanded-feature .expanded-header .item .ml-wrapper .mltext a:not(.moreDesc):not(.lessDesc) {
        text-decoration: underline
    }

    .expanded-feature .expanded-header .item .ml-wrapper .mltext a:not(.moreDesc):not(.lessDesc) {
        text-decoration: none;
        border-bottom: 2px solid #0276b3
    }

    .expanded-feature .expanded-header .item > span.description {
        display: block;
        line-height: 1.8em;
        margin-left: auto;
        margin-right: auto
    }

    .expanded-feature .expanded-header .item > .description > span > p {
        display: inline;
        margin: 0
    }

    .expanded-feature .expanded-header .more_text {
        display: none
    }

    .expanded-feature .expanded-header a.read_more {
        display: inline
    }

.expanded-feature .show-inline-force {
    display: inline !important
}

.expanded-feature .expanded-img-wrap {
    padding-top: 10px;
    padding-bottom: 10px
}

    .expanded-feature .expanded-img-wrap img {
        width: 100%
    }

.expanded-feature .context-disclosure {
    text-align: center;
    font-size: 1.1rem;
    margin-bottom: 15px;
    padding-top: 2px
}

    .expanded-feature .context-disclosure span {
        display: block;
        padding-left: 10px
    }

        .expanded-feature .context-disclosure span.expanded-disc p {
            margin: 0
        }

.expanded-feature .sub-component-wrap {
    padding: 25px;
    position: relative
}

    .expanded-feature .sub-component-wrap.no-pad {
        padding: 0 !important
    }

.expanded-feature .mltext {
    padding-top: 2px
}

    .expanded-feature .mltext p {
        margin: 0
    }

.expanded-feature .sub-component-wrap.side-by-side::before, .expanded-feature .sub-component-wrap.side-by-side::after {
    content: " ";
    display: block;
    height: 0;
    clear: both
}

@media only screen and (max-width:767px) {
    .expanded-feature {
        background-image: none !important
    }

        .expanded-feature .expanded-background {
            display: none !important
        }

            .expanded-feature .expanded-background.show-mobile {
                display: block !important
            }
}

@media only screen and (min-width:768px) {
    .expanded-feature .expanded-content {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%
    }

    .expanded-feature .expanded-header .fgx-brand-exlt-h2 {
        font-size: 30px
    }

    .expanded-feature .expanded-header .item .ml-wrapper .mltext {
        font-size: 16px;
        max-width: 800px
    }

    .expanded-feature .expanded-header .item .ml-wrapper .mltext {
        font-size: 16px;
        font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
        ;
    }

    .expanded-feature .expanded-header .mltext {
        height: auto !important
    }

    .expanded-feature .expanded-header .mllink {
        display: none !important
    }

    .expanded-feature .expanded-header a.read_more {
        display: none
    }

    .expanded-feature .expanded-header .more_text {
        display: inline
    }

    .expanded-feature .expanded-img-wrap {
        padding-left: 0;
        padding-right: 0
    }

    .expanded-feature .context-disclosure {
        width: 100%;
        max-width: 740px;
        margin-left: auto;
        margin-right: auto
    }

    .expanded-feature .sub-component-wrap.side-by-side {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap
    }

        .expanded-feature .sub-component-wrap.side-by-side > div {
            display: block;
            -webkit-box-flex: 0;
            -webkit-flex: 0 0 50%;
            -ms-flex: 0 0 50%;
            flex: 0 0 50%;
            flex-basis: 50%;
            margin: 0
        }

            .expanded-feature .sub-component-wrap.side-by-side > div:not(:last-child) {
                padding-right: 12px
            }

            .expanded-feature .sub-component-wrap.side-by-side > div:not(:first-child) {
                padding-left: 12px
            }
}

.cq-wcm-edit .expanded-feature .sub-component-wrap.side-by-side {
    display: block
}

    .cq-wcm-edit .expanded-feature .sub-component-wrap.side-by-side > div {
        display: block;
        float: none !important;
        width: initial
    }

.aem-AuthorLayer-Edit .expanded-feature .sub-component-wrap.side-by-side {
    display: block
}

    .aem-AuthorLayer-Edit .expanded-feature .sub-component-wrap.side-by-side > div {
        display: block;
        float: none !important;
        width: initial
    }

.btn-more {
    background-color: transparent;
    border-color: transparent;
}

.card {
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
}

    /* On mouse-over, add a deeper shadow */
    .card:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

h2 {
    font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
}

.hero-image {
    position: relative;
}

.text-overlay {
    font-family: "BMWTypeNextCondensedProTT-Medium", sans-serif;
    position: absolute;
    bottom: -8px;
    right: 0px;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 400;
    color: white;
    backdrop-filter: blur(1px) brightness(65%);
    text-align: right;
    text-transform: uppercase;
}


.heroTitle {
    position: relative;
    bottom: 0px;
    right: 50px;
}

#news-articles-news {
    padding: 20px 85px 30px 85px;
    margin: 10px;
}

.hero-image-header-news {
    height: 15%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-text-news {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
}

#gallery-news {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

#gallery-news-mobile {
    line-height: 0;
    -webkit-column-count: 3; /* split it into 5 columns */
    -webkit-column-gap: 1px; /* give it a 5px gap between columns */
    -moz-column-count: 3;
    -moz-column-gap: 1px;
    column-count: 3;
    column-gap: 1px;
}

#gallery-news img {
    width: 100%;
    height: 100% !important;
    margin-bottom: 1px; /* to match column gap */
    object-fit: cover;
}

#gallery-news-mobile img {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 1px; /* to match column gap */
}

@media (max-width: 1200px) {
    #gallery-news {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }

    #gallery-news-mobile {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media (max-width: 1000px) {
    #gallery-news {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }

    #gallery-news-mobile {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media (max-width: 400px) {
    #gallery-news {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }

    #gallery-news-mobile {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}



.hero-image-news {
    position: relative;
}

    .hero-image-news:hover img {
        opacity: 0.6;
        transition-delay: 0.1s;
    }

.text-overlay-newspage {
    position: absolute;
    bottom: 8px;
    right: 0px;
    padding: 5px;
    background: rgba(63, 73, 91, 0.5);
    height: 85px;
}

.heroTitle-news {
    position: relative;
    bottom: 0px;
}

.label-overlay-newspage {
    /*padding-left: 10px;*/
    background-color: transparent;
    font-weight: 400;
    font-size: 0.9rem;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
    text-transform: uppercase;
    color: white;
}

@media screen and (max-width:500px) {


    /*h3, h4 {
        font-size: calc(1rem + .3vw) !important;
    }

    h5 {
        font-size: 1rem !important;
    }
        */
}

/*News Article Page*/






/*Special Offers*/
.special-offer-title, .special-offer-legend {
    display: flex;
    align-items: center;
    justify-content: center;
}

.special-offer-title, .special-offer-duration {
    padding: 2rem 3rem 0 3rem;
}

.special-offer-content {
    padding: 1rem 5rem 0 5rem;
}


.so-contact-content, .special-offer-legend {
    background-color: #F6F4F4;
    padding: 1rem;
}

.so-contact-content {
    display: grid;
}

.special-offer-legend {
    padding-top: 2rem;
}



.so-legend {
    display: flex;
    list-style: none;
}


.so-duration {
    font-size: 1.25rem;
}





@import url('https://fonts.googleapis.com/css?family=Hind:300,400&display=swap');

.accordion-item-special-offer {
    padding-right: 1rem;
}

.accordion .accordion-item {
    border-bottom: 1px solid #e5e5e5;
}

    .accordion .accordion-item button[aria-expanded='true'] {
        border-bottom: 1px solid #03b5d2;
    }

.accordion-item {
    border: 0px solid black !important;
}

.accordion button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: 1em 0;
    color: #7288a2;
    font-size: 1.15rem;
    font-weight: 400;
    border: none;
    background: none;
    outline: none;
}

    .accordion button:hover, .accordion button:focus {
        cursor: pointer;
        color: #03b5d2;
    }

        .accordion button:hover::after, .accordion button:focus::after {
            cursor: pointer;
            color: #03b5d2;
            border: 1px solid #03b5d2;
        }



    .accordion button .icon {
        display: inline-block;
        position: absolute;
        top: 18px;
        right: 70px;
        width: 30px;
        height: 30px;
        border: 0px solid white;
        background-color: #2D96CD;
    }

        .accordion button .icon::before {
            display: block;
            position: absolute;
            content: '';
            top: 13px;
            left: 7px;
            width: 15px;
            height: 2px;
            background: white;
        }

        .accordion button .icon::after {
            display: block;
            position: absolute;
            content: '';
            top: 7px;
            left: 14px;
            width: 2px;
            height: 15px;
            background: white;
        }

    .accordion button[aria-expanded='true'] {
        color: #03b5d2;
    }

        .accordion button[aria-expanded='true'] .icon::after {
            width: 0;
        }

        .accordion button[aria-expanded='true'] + .accordion-content {
            opacity: 1;
            max-height: 1000rem;
            transition: all 200ms linear;
            will-change: opacity, max-height;
        }

.accordion .accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
}

    .accordion .accordion-content p {
        font-size: 22px;
        font-weight: 100;
        margin: 0 0;
    }

.col-3 {
    max-width: 25% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}



.card {
    margin: 0 0 !important;
}

/*.content-service {
    padding: 5rem 5rem 5rem 5rem;
}*/



.card-special {
    color: #2D96CD;
}
/*Wheelset Storage*/


.special-offer-title, .special-offer-buttons {
    padding: 2rem 5rem 2rem 5rem;
}

.special-offer-buttons {
    display: grid;
    place-items: center
}




.so-contact-content, .special-offer-legend {
    background-color: #F6F4F4;
    padding: 1rem;
}

.special-offer-legend {
    padding-top: 2rem;
}


.so-legend, .so-buttons {
    display: flex;
    list-style: none;
}




.so-buttons-title {
    background-color: #1C69D4;
    color: #FFFFFF;
}

.so-duration {
    font-size: 1.25rem;
}


/*SummerWheels*/

@import url('https://fonts.googleapis.com/css?family=Hind:300,400&display=swap');

.accordion-item-special-offer {
    padding-right: 1rem;
}

.accordion .accordion-item {
    border-bottom: 1px solid #e5e5e5;
}

    .accordion .accordion-item button[aria-expanded='true'] {
        border-bottom: 1px solid #03b5d2;
    }

.accordion-item {
    border: 0px solid black !important;
}

.accordion button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: 1em 0;
    color: #7288a2;
    font-size: 1.15rem;
    font-weight: 400;
    border: none;
    background: none;
    outline: none;
}

    .accordion button:hover, .accordion button:focus {
        cursor: pointer;
        color: #03b5d2;
    }

        .accordion button:hover::after, .accordion button:focus::after {
            cursor: pointer;
            color: #03b5d2;
            border: 1px solid #03b5d2;
        }

    .accordion button .accordion-title {
        font-size: 25px
    }

    .accordion button .icon {
        display: inline-block;
        position: absolute;
        top: 18px;
        right: 70px;
        width: 30px;
        height: 30px;
        border: 0px solid white;
        background-color: #2D96CD;
    }

        .accordion button .icon::before {
            display: block;
            position: absolute;
            content: '';
            top: 13px;
            left: 7px;
            width: 15px;
            height: 2px;
            background: white;
        }

        .accordion button .icon::after {
            display: block;
            position: absolute;
            content: '';
            top: 7px;
            left: 14px;
            width: 2px;
            height: 15px;
            background: white;
        }

    .accordion button[aria-expanded='true'] {
        color: #03b5d2;
    }

        .accordion button[aria-expanded='true'] .icon::after {
            width: 0;
        }

        .accordion button[aria-expanded='true'] + .accordion-content {
            opacity: 1;
            max-height: 1000rem;
            transition: all 200ms linear;
            will-change: opacity, max-height;
        }

.accordion .accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
}

    .accordion .accordion-content p {
        font-size: 22px;
        font-weight: 100;
        margin: 0 0;
    }

.card-special, .card-text-2, .accordion-title {
    padding: 0.5rem;
    font-weight: 900 !important;
}

.card-title, .price-text {
    font-weight: 900 !important;
}

.price-text {
    display: block;
    text-align: center;
}

.col-3 {
    max-width: 25% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}



.card {
    margin: 0 0 !important;
}

.content-service {
    padding: 5rem 2rem 5rem 2rem;
}

.card-body {
    padding: 0.5rem !important;
}

.card-special {
    color: #2D96CD;
}


.special-offer-title {
    padding: 2rem 5rem 0 5rem;
}




.so-contact-content, .special-offer-legend {
    background-color: #F6F4F4;
    padding: 1rem;
}

.special-offer-legend {
    padding-top: 2rem;
}



.so-legend {
    display: flex;
    list-style: none;
}



.so-duration {
    font-size: 1.25rem;
}


/*Gap Insurance*/

.special-offer-title {
    padding: 2rem 5rem 0 5rem;
}



.so-contact-content, .special-offer-legend {
    background-color: #F6F4F4;
    padding: 1rem;
}

.special-offer-legend {
    padding-top: 2rem;
}

.so-contact {
    font-size: 1.3rem;
    padding: 2rem 0;
    justify-content: center;
    text-align: center;
}

.contact-content {
    display: flex;
    align-items: center;
    justify-content: center
}

.so-legend {
    display: flex;
    list-style: none;
}



.so-duration {
    font-size: 1.25rem;
}



.text-overlay-secondary {
    font-family: "BMWTypeNextCondensedProTT-Regular", sans-serif;
    font-size: 1.25rem;
}

.gap-contact {
    padding: 2rem 25rem 0 25rem
}

.wrapper-insurance, .gap-computation, .gap-offer-images {
    padding: 2rem 5rem 0 5rem;
}

    .wrapper-insurance .inner-content:nth-child(even) .insurance-content {
        order: 1;
    }

.inner-content {
    display: flex;
    flex-direction: row;
}

.box {
    height: auto;
    width: 50%;
}

.box-1 {
    padding: 2rem 4rem 2rem 2rem;
}

.insurance-content {
    display: grid;
    place-items: center;
}

.insurance-title {
    font-size: 2.25rem;
}

.insurance-description {
    font-size: 1.5rem;
}

.gap-offer-desc, .insurance-contract, .gap-coverage {
    display: grid;
    place-items: center;
}

.insurance-contract {
    padding-bottom: 3rem;
}

.gap-coverage {
    padding: 3rem 0;
}

.gap-offer {
    display: flex;
    align-items: center;
    place-content: center;
    color: #0066B1;
    font-size: 2rem;
    padding: 3rem 0;
}

.insurance-contract-title, .coverage-title {
    font-size: 2rem;
}

.insurance-contract-desc, .coverage-desc {
    font-size: 1.5rem;
    color: #414141
}

.coverage-desc {
    padding: 0 5rem;
}


.inner-gap {
    display: flex;
    flex-direction: row;
}

.box1 {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    height: auto;
    width: 50%;
    margin: 10px;
    font-size: 1rem;
}

.box--box1 {
    background-color: #E7E7E7;
}

.box--box2 {
    background-color: #0066B1;
    color: #FFFFFF
}

.box--box1 {
    display: grid;
    place-items: center;
}

.box--box2 {
    display: grid;
    place-items: center;
}
/*BMW Leather*/
.box-leather {
    box-shadow: 0 10px 30px rgb(0 0 0 / 20%);
    height: 200px;
    width: 50%;
    margin: 10px;
    font-size: 1.5rem;
    padding: 1rem;
}
/*BMW NANOCOATING*/
.box-nano {
    box-shadow: 0 10px 30px rgb(0 0 0 / 20%);
    height: 200px;
    width: 50%;
    margin: 10px;
    font-size: 1.5rem;
}
/*Contactles Service*/
.bmw-contactless-service {
    padding: 2rem 5rem 3rem 5rem;
}
/*BMW Care Products*/
table {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}

    table caption {
        font-size: 1.5em;
        margin: .5em 0 .75em;
    }

    table tr {
        background-color: #f8f8f8;
        border: 1px solid #ddd;
        padding: .35em;
    }

    table th,
    table td {
        padding: .625em;
        text-align: center;
    }

    table td {
        font-size: 1.25rem;
    }

    table th {
        font-size: 1.5rem;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

@media screen and (max-width: 600px) {
    table {
        border: 0;
    }

        table caption {
            font-size: 1.3em;
        }

        table thead {
            border: none;
            clip: rect(0 0 0 0);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
        }

        table tr {
            border-bottom: 3px solid #ddd;
            display: block;
            margin-bottom: .625em;
        }

        table td {
            border-bottom: 1px solid #ddd;
            display: block;
            font-size: .8em;
            text-align: right;
        }

            table td::before {
                /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
                content: attr(data-label);
                float: left;
                font-weight: bold;
                text-transform: uppercase;
            }

            table td:last-child {
                border-bottom: 0;
            }
}

.care-tables {
    padding: 4rem 5rem 0 5rem;
}

/*M Performance*/

.card {
    box-shadow: 0 0 15px rgba(0,0,0,0.07);
    margin: 1rem 0;
}

.card-grp {
    height: auto;
}


.image-card {
    min-height: 10rem;
    margin-bottom: 1rem;
    background-color: #fff;
}

    .image-card .img-container img {
        max-width: 100%;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .image-card .text {
        flex-grow: 1;
        line-height: 0.9
    }

    .image-card .title {
        display: grid;
        place-items: center;
        font-size: 1.3rem;
        color: #FFFFFF;
        background-color: #1C69D4;
        height: 5rem;
    }

    .image-card .sub-title {
        color: black;
        display: grid;
        place-items: center;
        font-size: 1.2rem;
    }

a, a:hover {
    text-decoration: none
}

.bmw-offer-cards {
    display: grid;
    place-items: center
}

.special-offer-title {
    padding: 2rem 5rem 0 5rem;
}

.bmw-offer-cards {
    padding: 2rem;
}

.so-title {
    font-size: 2rem;
}

.so-desc {
    display: grid;
    place-items: left;
    font-size: 1.5rem;
    padding: 1rem 0;
}

.so-contact-content, .special-offer-legend {
    background-color: #F6F4F4;
    padding: 1rem;
}

.special-offer-legend {
    padding-top: 2rem;
}


.so-legend {
    display: flex;
    list-style: none;
}

.so-legend-title, .so-buttons-title {
    padding: 1rem;
    font-size: 1rem;
    text-transform: uppercase;
}

.so-legend-title {
    border-right: 2px solid black;
}

    .so-legend-title:last-child {
        border-right: none;
    }

.text-overlay-secondary {
    font-size: 1.25rem;
}

.gap-contact {
    padding: 2rem 0 0 0;
}

.wrapper-insurance, .gap-computation, .gap-offer-images {
    padding: 2rem 5rem 0 5rem;
}

    .wrapper-insurance .inner-content:nth-child(even) .insurance-content {
        order: 1;
    }



.box {
    height: auto;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
}



.insurance-content {
    display: grid;
    place-items: center;
}

.insurance-title {
    font-size: 2.25rem;
}

.insurance-description {
    font-size: 1.5rem;
}

.gap-offer-desc, .bmw-perf, .gap-coverage {
    display: grid;
    place-items: center;
}

.bmw-perf {
    padding-bottom: 3rem;
}

.gap-coverage {
    padding: 3rem 0;
}


.bmw-perf-title {
    padding: 3rem 0;
    font-size: 2.25rem;
}

.bmw-perf-desc {
    font-size: 1.5rem;
    color: #414141
}

.bmw-perf-desc {
    padding: 0 5rem;
}


.inner-gap {
    display: flex;
    flex-direction: row;
}

.box--box1 {
    background-color: #E7E7E7;
}

.box--box2 {
    background-color: #0066B1;
    color: #FFFFFF
}

.box--box1, .box--box2 {
    display: grid;
    place-items: center;
}




/*Service Video*/
.service-video {
    padding: 5rem;
}

.video-content {
    font-size: 24px;
    padding: 0 5rem 0 5rem;
}

/*Special Offers Page*/
.card-body-so {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
    height: 13rem;
}

.so-list {
    padding: 1rem 5rem 1rem 5rem;
}

.crossbar-link, .bike-link {
    text-decoration: none;
}

/*BMW Lifestyles*/
.photo-gallery {
    padding: 5rem;
}

    .photo-gallery .item {
        padding: 1rem 1rem 1rem 1rem;
    }

.special-offer-content-maintenance {
    padding: 2rem 5rem 0 5rem;
}
/*Contact Page*/
.so-list-wrapper {
    padding: 2rem 5rem;
}

@media screen and (max-width:500px) {
    .so-list-wrapper {
        padding: 1rem 0rem 1rem 0rem;
    }
}

.contact-name {
    font-size: 18px;
    line-height: 1.5rem;
    height: 2.5rem;
    margin-bottom: 1rem;
}

.contact-details, .contact-number, .contact-position {
    font-size: 14px;
    line-height: 1.5rem;
    height: 3.5rem;
}

/**Contacts*/

.so-list-wrapper a {
    text-decoration: none;
    border-radius: 5px;
}

#contact-location {
    margin: 0 5rem;
    overflow: hidden;
}

    #contact-location h2 {
        padding-top: 2rem;
    }

    #contact-location h3 {
        font-size: 1.5rem;
        padding-bottom: 1rem;
    }

    #contact-location > h2, #contact-location > h3 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.contact-detail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 2rem;
    border-bottom: 1px solid #dfdfdf;
}

#contact-location .contact-sm-dt {
    margin-bottom: 0.5rem;
}

    #contact-location .contact-sm-dt p {
        margin-bottom: 0;
    }

.contact-sm-dt a, .contact-sm-dt-1 a {
    text-decoration: none;
}

#contact-location .contact-sm-dt h3 {
    font-size: 1.2rem;
    font-weight: bold;
}

.contact-sm-dt-1 h3 {
    font-size: 1.2rem !important;
    font-weight: bold;
}

.contact-detail-1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    place-items: center;
    margin-top: 2rem;
}

    .contact-detail-1 .contact-sm-dt-1:nth-child(2) {
        background: #0066B1;
        border-radius: 2px
    }

        .contact-detail-1 .contact-sm-dt-1:nth-child(2):hover {
            transform: scale(1.1);
            opacity: 0.8;
        }

        .contact-detail-1 .contact-sm-dt-1:nth-child(2) h3 a {
            color: #fff;
        }

        .contact-detail-1 .contact-sm-dt-1:nth-child(2) h3 {
            padding-bottom: 0 !important;
            padding: 0.6rem;
        }


@media (min-width: 320px) and (max-width:480px) {
    #contact-location {
        margin: 0;
    }

    .contact-detail {
        grid-template-columns: repeat(1, 1fr);
    }

    .contact-sm-dt {
        text-align: center;
    }

    .contact-detail-1 {
        grid-template-columns: repeat(1, 1fr);
    }

        .contact-detail-1 .contact-sm-dt-1:nth-child(2) {
            margin: 1rem 0 2rem 0;
        }
}

@media(min-width: 481px) and (max-width:1200px) {
    #contact-location {
        margin: 0;
    }

    .contact-detail {
        grid-template-columns: repeat(4, 1fr);
    }
}

/*BMW Calculator*/

.operationalMonthly button, .financialMonthly button {
    font-size: 1rem;
}

.precioMes > .monthly-price-op, .precioMesFi > .monthly-price-fi {
    font-weight: bold;
    font-size: 2rem;
}

.precioMes > .month-op {
    font-weight: 500;
    font-size: 1.5rem;
}


.operationalMonthly, .financialMonthly {
    padding: 0px;
}

.lease {
    padding: 5rem;
}

.slidecontainer h2, .data h2, .data * {
    font-size: 1.5rem;
}

.slidecontainer {
    line-height: 1.5rem;
    padding: 10px 0;
}

.butt-calculator {
    display: flex;
    background-color: #FFFFFF;
    text-align: center;
    border-radius: 0rem 0rem 0rem 0rem;
}

.operational {
    width: 50%;
    background-color: #FFFFFF;
    border: none;
    border-radius: 0rem 0rem 0rem 0rem;
    color: #2D96CD;
    font-size: 30px;
    padding: 1rem;
    margin: 5px;
    border-bottom: 3px solid #2D96CD;
}

.financial {
    width: 50%;
    background-color: #FFFFFF;
    border: none;
    border-radius: 0rem 0rem 0rem 0rem;
    color: #2D96CD;
    font-size: 30px;
    padding: 1rem;
    margin: 5px;
    border-bottom: 3px solid #2D96CD
}

.calculator-home {
    display: flex;
    flex-wrap: wrap;
}

.in-flex-calculator {
    flex: 1;
    min-width: 300px;
    background-color: #FFFFFF;
}

    .in-flex-calculator:first-child {
        flex: 1;
        margin-bottom: 0px;
    }

.calculo-calculator {
    background-color: #FFFFFF;
    padding: 1rem;
    margin: 2rem 0 0 0;
    border-radius: 18px;
}

.calculo-calculatorfi {
    background-color: #fff;
    padding: 1rem;
    margin: -3rem 1rem;
}

.form-calculator {
    background-color: #fff;
    padding: 3rem;
    border-radius: 0rem 0rem 1rem 1rem;
    margin-bottom: 1rem;
}

    .form-calculator span {
        background-color: #fff;
    }

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 19px;
    background: #CEE6F1;
    outline: none;
    opacity: 0.9;
    -webkit-transition: 0.2s;
    transition: opacity 0.2s;
    border-radius: 1px;
    margin: auto;
    display: block;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}

    .slider:hover {
        opacity: 1;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 35px;
        height: 35px;
        background: #102B4E;
        cursor: pointer;
        border-radius: 10px;
        transition: all 200ms ease-in-out;
    }

    .slider::-moz-range-thumb {
        transition: all 200ms ease-in-out;
    }

    .slider:active::-webkit-slider-thumb {
        transform: scale(1.3);
    }

    .slider:active::-moz-range-thumb {
        transform: scale(1.3);
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        background: #102B4E;
        cursor: pointer;
        border-radius: 50%;
    }

html, body {
    height: 100%;
}

#calOperational {
    display: block;
}

#calFinancial {
    display: none;
}

#calFinancialTotal {
    display: none;
}

.operational.disabled {
    color: #012E40;
    background-color: #FFFFFF;
    border-bottom: 3px solid #012E40;
}

.operational.active {
    width: 50%;
    background-color: #F8F8F8;
    border: none;
    border-radius: 0rem 0rem 0rem 0rem;
    color: #2D96CD;
    font-size: 19px;
    padding: 1rem;
    margin: 5px;
    border-bottom: 3px solid #2D96CD;
}

.financial.disabled {
    color: #012E40;
    background-color: #FFFFFF;
    border-bottom: 3px solid #012E40;
}

.financial.active {
    width: 50%;
    background-color: #F8F8F8;
    border: none;
    border-radius: 0rem 0rem 0rem 0rem;
    color: #2D96CD;
    font-size: 19px;
    padding: 1rem;
    margin: 5px;
    border-bottom: 3px solid #2D96CD;
}

input#precio {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.333333;
    color: #12161c;
    text-align: left;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #b9bdbe;
    border-radius: 8px 0px 0px 8px;
    border-right: none;
    width: 100%;
}

input#precioFi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.333333;
    color: #12161c;
    text-align: left;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #b9bdbe;
    border-radius: 8px 0px 0px 8px;
    border-right: none;
    width: 100%;
}

select#combustible {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.333333;
    color: #12161c;
    text-align: left;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #b9bdbe;
    border-radius: 8px 8px 8px 8px;
    width: 100%;
}

select#combustibleFi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.333333;
    color: #12161c;
    text-align: left;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #b9bdbe;
    border-radius: 8px 8px 8px 8px;
    width: 100%;
}

.input-icon {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.333333;
    color: #12161c;
    text-align: center;
    white-space: nowrap;
    background-color: #EEEEEE;
    border: 1px solid #b9bdbe;
    border-radius: 0px 8px 8px 0px;
    border-left: none;
}

.slidecontainerinput {
    display: flex;
}


.data {
    display: flex;
    padding-top: 0.5rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 0px;
}

.but-calculo {
    padding: 0px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    background-color: #012E40;
    color: #fff;
    padding: 1rem;
    border-radius: 18px;
    border: none;
    font-size: 1rem;
    font-weight: 400;
    line-height: 24px;
    box-shadow: 0 8px 16px 0 rgba(5, 61, 99, 0.4);
}

#ejCalFi {
    position: relative;
    margin-top: 0rem;
}

@media only screen and (min-width: 1100px) {
    .calculator-home {
        padding: 0rem 0rem;
    }
}

@media only screen and (max-width: 600px) {
    #ejCalFi {
        margin-top: 0rem;
    }
}

.text-overlay {
    position: absolute;
    bottom: -8px;
    right: 0px;
    padding: 1.5rem;
    font-size: 1.5rem;
    font-weight: 400;
    color: white;
    backdrop-filter: blur(1px) brightness(65%);
    text-align: right;
    text-transform: uppercase;
}

    .text-overlay strong > span {
        margin-right: 2rem;
    }

.Leasing-details {
    padding: 75px 150px 0 130px;
}

@media screen and (max-width:500px) {


    .operationalMonthly, .financialMonthly {
        width: 100% !important;
    }

        .operationalMonthly h3 {
            font-size: 1.5rem !important;
        }

        .operationalMonthly #pagoMes {
            font-size: 2rem !important;
        }

        .financialMonthly #pagoMesFi {
            font-size: 2rem !important;
        }

    .data {
        padding-top: 1rem !important;
    }

    .Leasing-details {
        padding: 10px 15px 0 15px;
    }



    .financeContent {
        width: 100%;
        text-align: center;
        padding-top: 1rem;
    }

    .calculator-title h1 {
        font-size: 1.2rem;
    }

    h5 {
        font-size: 1rem !important;
    }

    h4 {
        font-size: calc(1.1rem + .3vw) !important;
    }

    .text-overlay {
        position: absolute;
        bottom: -8px;
        right: 0px;
        padding: 1.5rem;
        font-size: 1rem;
        font-weight: 400;
        color: white;
        backdrop-filter: blur(1px) brightness(65%);
        text-align: right;
        text-transform: uppercase;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .operationalMonthly, .financialMonthly {
        width: 100% !important;
    }


        .operationalMonthly #pagoMes {
            font-size: 2rem !important;
        }

        .financialMonthly #pagoMesFi {
            font-size: 2rem !important;
        }

    .data {
        padding-top: 1rem !important;
    }

    .Leasing-details {
        padding: 10px 15px 0 15px;
    }

    .financeContent {
        width: 100%;
        text-align: center;
        padding-top: 1rem;
    }
}

.lease {
    margin-top: 3.5rem;
}
/*Landing Blocks*/

.content-item .content-buttons {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

    .content-item .content-buttons a {
        display: inline-flex;
        background: #1C69D4;
        color: #fff;
        text-decoration: none;
        padding: 1rem;
    }

.card-item {
    width: 100%;
    padding: 1rem 0 2rem 0;
}

    .card-item > p {
        padding-bottom: 2rem;
    }

a.btn-link {
    text-decoration: none;
    color: var(--secondary-color);
    font-size: 24px;
}

    a.btn-link i {
        padding-right: 8px;
    }



/*Media Query*/

@media (min-width: 320px) and (max-width:480px) {
    .text-overlay {
        padding: 0;
        font-size: 1rem;
    }

        .text-overlay strong {
            padding-right: 0;
        }

    .img-fluid {
        width: 100%;
        object-fit: cover;
        height: auto;
    }

    .special-offer-content {
        padding: 0 1rem 0 1rem;
    }

    .contact-content {
        flex: 0 0 100% !important;
    }

    .so-contact {
        font-size: 1.2rem;
    }

    .wrapper-insurance {
        padding: 1rem 0 0 0;
    }

    .inner-content {
        flex-direction: column;
    }

    .box {
        width: 100%;
        max-width: 100%;
        object-fit: cover;
    }

    .box-1 {
        padding: 2rem 1rem
    }

    .special-offer-duration, .special-offer-buttons {
        padding: 1rem 1rem 0 1rem;
    }

    .so-buttons {
        flex-direction: column;
        padding: 0;
    }

        .so-buttons > a {
            padding-bottom: 1rem;
        }

    .so-buttons-title {
        border-right: none;
        text-align: center;
        padding: 2rem 2rem 2rem 2rem;
        font-size: 1rem;
    }

    .text-overlay-secondary {
        font-size: 1rem;
    }

    .so-cards {
        margin-right: 0px !important;
    }

    .contact-name {
        font-size: 22px;
        height: auto;
        margin-bottom: 1rem;
    }

    .accordion button .accordion-title {
        font-size: 15px
    }

    .accordion button .icon {
        top: 20px;
        right: 0px;
    }

    .card-title {
        font-size: 1rem;
    }

    .accordion .accordion-content p {
        font-size: 14px;
    }

    .accordion-content .row > div {
        padding: 0 !important;
    }

    .so-legend-title, .so-buttons-title {
        padding: 0.2rem;
        font-size: 1rem;
    }

    .special-offer-title, .special-offer-duration {
        padding: 1rem;
        align-items: center;
    }

    .bmw-offer-cards {
        padding: 0;
        align-items: center;
    }

    .so-title {
        font-size: 1.5rem;
    }

    .so-desc {
        font-size: 1.25rem;
    }

    .so-legend {
        flex-direction: column;
    }

    .so-legend-title {
        border-right: none
    }

    .content-service {
        padding: 0;
    }

    .wrapper-insurance, .gap-computation, .gap-offer-images {
        padding: 0;
    }

    .coverage-desc {
        padding: 1rem;
    }

    .insurance-contract {
        padding: 1rem;
    }

    .gap-offer {
        padding: 1rem;
        font-size: 1.5rem;
    }

    .gap-coverage {
        padding: 1rem;
    }

    .insurance-contract-title, .coverage-title {
        font-size: 1.5rem;
    }

    .so-legend {
        flex-direction: column;
    }

    .so-legend-title {
        border-right: none;
    }

    .bmw-perf-desc {
        padding: 0 1rem;
    }

    .bmw-perf-title {
        padding: 2rem 0;
        font-size: 2rem;
    }

    .bmw-contactless-service {
        padding: 1rem;
    }

    .box-nano {
        font-size: 1rem;
    }

    .care-tables {
        padding: 1rem;
    }

    table td {
        font-size: 1rem;
    }

    .inner-gap {
        flex-direction: column;
    }

    .box--box1, .box--box2 {
        width: 94%;
    }

    .photo-gallery {
        padding: 0;
    }

    .special-offer-content-maintenance {
        padding: 1rem;
    }

    .special-offer-duration .row .col-6 > img {
        display: none;
    }

    .video-content {
        padding: 1rem;
    }

    .service-video {
        padding: 0;
    }

    .lease {
        padding: 0;
    }

    .operational, .financial {
        font-size: 1.3rem;
    }

    .form-calculator {
        padding: 1rem;
    }

    .slidecontainer h2, .data h2, .data * {
        font-size: 1.3rem;
    }

    .calculo-calculator {
        margin: 0;
    }

    .leasing-description {
        font-size: 1rem;
        padding: 1rem;
    }

    .label-overlay-newspage {
        font-size: 1.2rem;
    }

    #navbarSupportedContent {
        display: none;
    }

    #menu ul {
        padding-left: 20px;
        list-style: none;
    }

        #menu ul li a span {
            font-size: 1rem;
            color: #fff;
        }

    #menu .service-dropdown-content a span {
        font-size: 1rem;
    }

    label .burger {
        width: 2em;
        height: 2em;
        top: 1em;
        left: 1em;
    }

    .logo-img {
        width: 14% !important;
        position: absolute;
        z-index: 3;
        right: 1rem;
        top: 10px;
        height: auto;
        object-fit: 0;
    }

    .text-center {
        padding: 0 !important;
    }

    .carousel-inner-offer {
        padding: 2rem 0 0 0 !important;
    }

    .direct-heading {
        text-align: center;
    }

    .news-page-header > div > img {
        height: 100%;
        max-height: 16rem;
        object-fit: cover;
    }

    .hero-text {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        transform: translate(-50%, -50%);
    }

    .newsletter-heading, .newsletter-description {
        text-align: center;
    }

    .subscribe-wrapper {
        width: 360px;
    }

    .bmwlv-uxn-socials-container ul {
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .footer-socials {
        padding-bottom: 0;
    }

    .bmwlv-uxn-socials-container div h3 span {
        float: none;
    }

    #first {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .test-drive-booking {
        width: 100% !important;
    }

    #model-block {
        margin: 2rem 0;
    }

        #model-block .content-right {
            padding: 0 0;
        }

        #model-block h1 {
            font-size: 25px;
        }

    .col-6.content-right {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .col-6.content-left {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    #model-block .content-item {
        padding: 2rem 2rem 2rem 2rem;
    }

    .content-item .content-buttons {
        flex-direction: column;
    }

        .content-item .content-buttons a {
            width: 100%;
            justify-content: center;
            margin-top: 1rem;
        }

    #cookie-policy {
        margin: 0rem 2rem;
    }

    .contact-form, .contact-form-td, .contact-form-ls {
        width: 100%;
        top: 0;
        left: 0;
    }

        .contact-form .form-fields, .contact-form-td .form-fields, .contact-form-ls .form-fields {
            padding: 0 1rem;
        }

    .input-forms {
        position: relative;
        opacity: 1;
    }

    .label-forms {
        position: relative;
    }

    .btn-frm {
        width: 100%;
        right: 0;
    }

    .btn-frm-notpopup {
        top: 0;
        position: relative
    }

    .getoffer-form {
        width: 100% !important;
        padding: 1rem !important;
    }

        .getoffer-form .form-fields {
            padding: 0 1rem;
        }

    .btn-frm {
        position: relative !important;
        right: 0 !important;
        width: 100% !important;
    }

    .side-links {
        height: 10rem;
    }

    .inputWithButton {
        width: 100%
    }

        .inputWithButton .btnSearch {
            padding: 10px 10px;
        }
}

@media (min-width: 481px) and (max-width:1200px) {
    .vertical {
        border-right: 0px solid #000000;
    }

    .img-fluid {
        width: 100%;
        object-fit: cover;
        height: auto;
    }

    .text-overlay strong {
        padding-right: 0;
    }

    .text-overlay-secondary {
        font-size: 1rem;
    }

    .contact-name {
        font-size: 22px;
    }

    .contact-position {
        font-size: 18px;
    }

    .accordion-content .row > div {
        padding: 0 !important;
    }

    .accordion button .icon {
        top: 20px;
        right: 0px;
    }

    .content-service {
        padding: 0;
    }

    .content-service {
        padding: 0;
    }

    .wrapper-insurance, .gap-computation, .gap-offer-images {
        padding: 0;
    }

    .coverage-desc {
        padding: 1rem;
    }

    .insurance-contract {
        padding: 1rem;
    }

    .gap-offer {
        padding: 1rem;
        font-size: 1.5rem;
    }

    .gap-coverage {
        padding: 1rem;
    }

    .insurance-contract-title, .coverage-title {
        font-size: 1.5rem;
    }

    .so-legend {
        flex-direction: column;
    }

    .so-legend-title {
        border-right: none;
    }

    .box1 {
        font-size: 1.5rem;
    }

    .card-grp {
        height: 13rem;
    }

    .bmw-perf-desc {
        padding: 0 1rem;
    }

    .bmw-perf-title {
        padding: 2rem 0;
        font-size: 2rem;
    }

    .special-offer-title, .bmw-offer-cards {
        padding: 2rem;
    }

    .bmw-contactless-service {
        padding: 1rem;
    }

    .wrapper-insurance .inner-content:nth-child(even) {
        flex-direction: row-reverse
    }

    .care-tables {
        padding: 1rem;
    }

    .special-offer-duration .row .col-6 > img {
        display: none;
    }

    .special-offer-content {
        padding: 1rem;
    }

    .lease {
        padding: 0;
    }

    .operational, .financial {
        font-size: 1.5rem;
    }

    .form-calculator {
        padding: 1rem;
    }

    .slidecontainer h2, .data h2, .data * {
        font-size: 1.5rem;
    }

    .calculo-calculator {
        margin: 0;
    }

    .leasing-description {
        font-size: 1.25rem;
        padding: 1rem;
    }

    .operationalMonthly h3 {
        font-size: 1.5rem !important;
    }

    #menu ul {
        padding-left: 40px;
        list-style: none;
    }

        #menu ul li a span {
            font-size: 1.5rem;
            color: #fff;
        }

    #menu .service-dropdown-content a span {
        font-size: 1.5rem;
    }

    .logo-img {
        width: 10% !important;
        position: absolute;
        z-index: 3;
        right: 2rem;
        top: 16px;
    }

    label .burger {
        width: 3em;
        height: 3em;
        top: 2em;
        left: 2em;
    }

    .newsletter-heading, .newsletter-description {
        text-align: center;
    }

    .bmwlv-uxn-socials-container ul {
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .footer-socials {
        padding-bottom: 0;
    }

    .bmwlv-uxn-socials-container div h3 span {
        float: none;
    }

    #model-block {
        margin: 2rem 0;
    }

        #model-block .content-right {
            padding: 0 0;
        }

    .col-6.content-right {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .col-6.content-left {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    #model-block .content-item {
        padding: 2rem 2rem 2rem 2rem;
    }

    #cookie-policy {
        margin: 0rem 2rem;
    }

    .so-list-wrapper {
        padding: 2rem 1rem;
    }

    .contact-form, .contact-form-td, .contact-form-ls {
        width: 100%;
        top: 0;
        left: 0;
    }

        .contact-form .form-fields, .contact-form-td .form-fields, .contact-form-ls .form-fields {
            padding: 0 1rem;
        }

    .input-forms {
        position: relative;
        opacity: 1;
    }

    .label-forms {
        position: relative;
    }

    .btn-frm {
        width: 100%;
        right: 0;
    }

    .btn-frm-notpopup {
        top: 0;
        position: relative
    }

    .getoffer-form {
        width: 100% !important;
        padding: 1rem !important;
    }

        .getoffer-form .form-fields {
            padding: 0 1rem;
        }

    .btn-frm {
        position: relative !important;
        right: 0 !important;
        width: 100% !important;
    }
}


@media (min-width: 1201px) and (max-width:1919px) {
    .gap-contact {
        padding: 2rem 10rem 0 10rem;
    }

    .text-overlay {
        font-size: 1.5rem;
        padding: 1.5rem;
    }

    .contact-name {
        height: 3rem;
        margin-bottom: auto;
    }

    .contact-details, .contact-number, .contact-position {
        height: 3.5rem;
    }

    .so-contact {
        font-size: 1.5rem;
    }

    .so-title {
        font-size: 2.25rem;
    }

    .accordion button .icon {
        right: 0px;
    }

    .accordion-content .row > div {
        padding: 0 !important;
    }

    .box1 {
        box-shadow: 0 10px 30px rgb(0 0 0 / 20%);
        height: auto;
        width: 50%;
        margin: 10px;
        font-size: 1.5rem;
    }

    .special-offer-title {
        padding: 2rem 3rem 0 3rem;
    }

    .photo-gallery {
        padding: 2rem;
    }

    #gallery-news img {
        width: 100% !important;
        height: 100% !important;
        margin-bottom: 1px; /* to match column gap */
        object-fit: cover;
    }

    .label-overlay-newspage {
        font-size: 1rem;
    }

    .spec-offers {
        padding: 2rem 1rem 0 1rem !important;
    }
}

@media (min-width:1920px) {
    .special-offer-content {
        padding: 2rem 5rem 0 5rem;
    }

    .special-offer-content-maintenance {
        padding: 2rem 5rem 0 5rem !important;
    }

    .special-offer-duration {
        padding: 2rem 5rem 0 7rem;
    }

    .special-offer-title {
        padding: 2rem 0;
    }

    .gap-contact {
        padding: 2rem 25rem 0 25rem
    }

    .text-overlay {
        font-size: 1.5rem;
        padding: 1.5rem;
    }

    .box-1 {
        padding: 5rem;
    }

    .box {
        height: auto;
        width: 50%;
        object-fit: cover;
    }

    .wrapper-insurance, .gap-computation, .gap-offer-images {
        padding: 2rem 5rem 0 5rem;
    }

    .inner-content {
        display: flex;
        flex-direction: row;
    }

    .so-list-wrapper {
        padding: 2rem 5rem 2rem 5rem;
    }

    .contact-name {
        font-size: 28px;
        line-height: 2rem;
        height: 2.5rem;
        margin-bottom: 2rem;
    }

    .contact-details, .contact-number, .contact-position {
        font-size: 18px;
        height: 4rem;
    }

    .card-body-so {
        height: 15rem;
    }

    .so-contact {
        font-size: 1.5rem;
    }

    .so-title {
        font-size: 2.5rem;
        padding: 0 5rem;
    }

    .so-desc {
        display: grid;
        place-items: left;
        font-size: 1.5rem;
        padding: 1rem;
    }

    .so-legend-title, .so-buttons-title {
        padding: 2rem 4rem 2rem 4rem;
        font-size: 1.5rem;
    }

    .accordion button .accordion-title {
        padding: 1em 1.5em 1em 5rem;
        font-size: 28px
    }

    .accordion-content .row > div {
        padding: 0 !important;
    }

    .box1 {
        box-shadow: 0 10px 30px rgb(0 0 0 / 20%);
        height: 100px;
        width: 50%;
        margin: 10px;
        font-size: 1.5rem;
    }

    .image-card .title {
        font-size: 1.5rem;
        height: 5rem;
    }

    .image-card .sub-title {
        font-size: 1.5rem;
    }

    .bmw-offer-cards {
        padding: 2rem 5rem 0 5rem;
    }

    .photo-gallery {
        padding: 2rem 5rem 2rem 5rem !important;
    }

    #gallery-news img {
        width: 100% !important;
        height: 100% !important;
        margin-bottom: 1px; /* to match column gap */
        object-fit: cover;
    }

    .label-overlay-newspage {
        font-size: 1.5rem;
    }

    .guarantee-details {
        padding: 2rem 5rem;
    }

    #guarantee-wrapper {
        padding: 1rem 3rem;
    }

    .spec-offers {
        padding: 5rem 10rem 0 10rem;
    }
    /*.direct-wrapper-grid {
        padding: 5rem 10rem 5rem 10rem;
    }*/
}

/*Styles from loading*/
#loader-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 15000;
    overflow: hidden;
    background-color: #000000;
    height: 100%;
    display: none;
}

    #loader-wrapper.show {
        display: block;
    }

.loader-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}