/* CSS RESET */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements  */
ul,
ol,
li {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* END CSS RESET */

/* FLEX LAYOUT */
.container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

section {
    position: relative;
}
  
.item {
    width: 50%;
  }
  
.item.full {
    width: 100%;
  }
/* END FLEX LAYOUT */

body {
    background-color: #000000;
}

.page_wrapper {
    width: 100%;
    max-width: 4000px;
    margin: 0 auto;
    overflow: hidden;
}

/* angled div */
.slanted-div {
    position: relative;
    padding: 0px 0px;
    background: #181818;
    overflow: visible;
    z-index: 1;
}

/* where the magic happens */
.slanted-div.top {
    clip-path: polygon(0 0, 1840px 114px, 1840px 100%, 0 100%);
    padding-top: 112px;
    margin-top: -114px;
}

.slanted-div.top.reverse {
    clip-path: polygon(0 114px, 1840px 0, 1840px 100%, 0 100%);
    padding-top: 112px;
    margin-top: -114px;
}
  
.slanted-div.bottom {
    clip-path: polygon(0 0, 1840px 100%, 1840px 114px, 0 100%);
    padding-bottom: 112px;
    margin-bottom: -114px;
}

.slanted-div.top.bottom {
    clip-path: polygon(0 0, 1840px 114px, 1840px 114px, 0 100%);
}

.slanted-div.bottom.reverse_b {
    clip-path: polygon(0 0, 1840px 114px, 1840px 114px, 0 100%);
}

.slanted-div.top.bottom.reverse_b {
    clip-path: polygon(0 0, 1840px 114px, 1840px 1482px, 0 100%);
}

/* universal styling */

h1,
h2,
h3,
h4,
p,
.quote {
    font-family: 'maison_neueextended_light';
    font-style: normal;
    color: #FFFFFF;
}

h1 {
    font-family:'maison_neueextended_demibold';
    font-weight: 600;
    font-size: 75px;
    line-height: 73px;
    /* or 97% */
    letter-spacing: -0.015em;
    text-align: left;
}

h2 {
    font-family:'maison_neueextended_demibold';
    font-weight: 600;
    font-size: 55px;
    line-height: 57px;
    /* or 104% */
    letter-spacing: -0.015em;
    text-align: left;
    padding-bottom: 59px; 
}

p {

    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    text-align: left;
}

p span {
    font-weight: bold;
}

.container.hero p {
    font-weight: 400;
    font-size: 20px;
    line-height: 25px;
    /* or 125% */
    letter-spacing: 0.01em;
    text-align: left;
}


/* HERO */

.container.hero {
    padding-top: 170px;
    background: linear-gradient(246.56deg, #373737 11.64%, #000000 85.99%);
    max-width: 1840px;
    margin: 0 auto;
}

.container.hero h1, .container.hero p {
    padding-left: 50px;
    padding-bottom: 36px;
}

.container.hero p {
    max-width: 585px;
}

.container.hero p span {
    font-family: 'maison_neueextended_bold';
}

.hero_image {
    position: relative;
    width: 100%;
    max-width: 577px;
    padding-right: 50px;
}

.container.hero .item {
    position: relative;
    z-index: 5;
}

.container.hero ul li {
    display: inline-block;
    vertical-align: middle;
}

.container.hero ul li img {
    width: 39px;
    margin-top: 10px;
    margin-right: 10px;
    border:none;
}

.container.hero ul li:first-child img {
    display: inline-block;
    width: 88px;
}

.container.hero ul li:first-child {
    text-align: center;
    display: inline-block;
    margin-right: 85px;
}

.container.hero ul li p {
    padding: 0px;
    max-width: unset;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    /* identical to box height, or 127% */
    text-align: center;
    letter-spacing: 0.05em;
    color: #FFFFFF;
    text-align: center;
}


/* SECTION ONE */

section.one {
    padding-top: 86px !important;
}

@media screen and (max-width: 1420px) {
    section.one {
        padding-top: 70px !important;
    }
}

@media screen and (max-width: 1148px) {
    section.one {
        margin-top: -80px !important;
        padding-top: 60px !important;
    }
}

@media screen and (max-width: 986px) {
    section.one {
        padding-top: 50px !important;
    }
}

@media screen and (max-width: 834px) {
    section.one {
        padding-top: 40px !important;
    }
}

@media screen and (max-width: 658px) {
    section.one {
        padding-top: 30px !important;
    }
}

@media screen and (max-width: 500px) {
    section.one {
        padding-top: 20px !important;
    }
}

section.one .stripe {
    position: absolute;
    background: #f6be36;
    top: 2px;
    height: 12%;
    width: 200%;
    transform: skewY(4deg);
}


/* SECTION TWO */

section.two .container, .slanted-div.top.two:before {
    margin-top: -114px;
    padding-top: 114px;
    border-left: 135px solid #00C9EF;
}

.slanted-div.top.two .item p {
    padding-top: 20px;
    padding-left: 10%;
}

.circle {
    position: absolute;
    top: 0px;
    left: -50px;
    z-index: 20;
    transform: rotate(4deg);
}

.slanted-div.top.two .container:first-child .item {
    position: relative;
    padding-bottom: 100px;
}


/* SECTION THREE */

section.three .container .item.left img {
    float: right;
}


section.three .container .item.left {
    padding-right: 50px;
}

section.three .container .item.left p {
    font-family: 'maison_neueextended_medium';
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    /* or 129% */
    text-align: right;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    width: 100%;
    max-width: 590px;
    float: right;
    padding-left: 25px;
}

section.three .container .item.right p {
    padding-bottom: 24px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    /* or 150% */
    letter-spacing: 0.01em;
    color: #FFFFFF;
    width: 100%;
    max-width: 572px;
    padding-right: 25px;
}

section.three .container .item.left p:last-child {
    font-style: italic;
    font-size: 18px;
    padding-top: 18px;
}

section.three .container {
    border-left: 135px solid #00C9EF;
    background-image: url(https://assets.bwbx.io/s3/mspandorasbox/bmw/images/P90450195-highRes.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 1000px;
    padding-bottom: 300px;
}


/* SECTION FOUR */

.slanted-div.top.four {
    background-image: url(https://assets.bwbx.io/s3/mspandorasbox/bmw/images/podcast_bg_grey.jpg);
}

section.four .container ul {
    position: relative;
    z-index: 2;
    text-align: left;
    width: 80%;
    max-width: 1231px;
    margin: 20px auto;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    padding-top: 15px;
    padding-bottom: 15px;
}

section.four .container ul li {
    display: inline-block;
    vertical-align: middle;
}

section.four .container ul li img {
    position: relative;
    width: 69px;
    z-index: 1;
    margin-right: 20px;
  }

  section.four .container ul li p {
    position: relative;
    width: 100%;
    max-width: 1231px;
    margin: 0 auto;
    z-index: 1;
    line-height: 69px;
}

section.four #waveform-1-text {
    position: relative;
    width: 80%;
    max-width: 1231px;
    margin: 0 auto;
    z-index: 1;
    font-weight: 400;
    font-size: 56px;
    line-height: 75px;
    /* or 134% */
    letter-spacing: -0.015em;
    color: #FFFFFF;
    z-index: 1;
    padding-top: 50px;
    padding-bottom: 100px;
}

@media screen and (max-width: 768px) {
    section.four #waveform-1-text {
        font-size: 20px;
        line-height: 28px;
    }
}
   
section.four #waveform-1-text span {
   opacity: 0.3;
   transition: 1s;
   font-family: 'maison_neuelight';
}

section.four .container .waveform {
    position: relative;
    width: 80%;
    max-width: 1231px;
    margin: 0 auto;
    z-index: 2;
}


/* SECTION SIX */

.slanted-div.top.six {
    background-image: url(https://assets.bwbx.io/s3/mspandorasbox/bmw/images/Grid_White.svg);
    background-size: cover;
}


section.six .item {
    padding-top: 110px;
    padding-left: 50px;
} 

section.six h2 {
    padding-right: 25px;
    padding-left: 50px;
}

section.six p {
  width: 100%;
  max-width: 584px;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  padding-bottom: 24px;
  width: 100%;
  max-width: 655px;
  padding-left: 50px;
  padding-right: 25px;
}

section.six p.quote {
    font-size: 28px;
    line-height: 36px;
    /* or 129% */
    letter-spacing: 0.01em;
}

section.six .item.left p {
    width: 100%;
    max-width: 705px;
    padding-right: 0px;
}

section.six .item p.quote {
    width: 100%;
    max-width: 596px;
}

section.six .item p.quote span {
    display: block;
    padding-top: 18px;
    font-size: 18px;
    font-style: italic;
}

section.six .item.left p:first-child {
    padding-top: 50px;
}

section.six .contain {
    width: 100%;
    max-width: 680px;
    float: right;
    padding-bottom: 50px;
}

section.six .rectangle {
    padding-left: 50px;
}

section.six .rectangle_r {
    padding-top: 60px;
    padding-left: 50px;
}

section.six .container .item .moodboard1,
section.six .container .item .moodboard2 {
   height: 700px;
   position: relative;
   width: 100%;
}


@media screen and (max-width: 1210px) {
    section.six .container .item .moodboard1,
    section.six .container .item .moodboard2 {
        height: 680px;
    }
}

@media screen and (max-width: 1168px) {
    section.six .container .item .moodboard1,
    section.six .container .item .moodboard2 {
        height: 600px;
    }
}

@media screen and (max-width: 970px) {
    section.six .container .item .moodboard1,
    section.six .container .item .moodboard2 {
        height: 530px;
    }
}

@media screen and (max-width: 768px) {
    section.six .container .item .moodboard2 {
        position: relative;
        top: -60px;
    }
}

section.six .container .item .moodboard1 .moodboard-image,
section.six .container .item .moodboard2 .moodboard-image {
   position: absolute;
}

#mb1 {
    top: -79px;
    left: 0;
    mix-blend-mode: screen;
}

#mb2 {
   bottom: 230px;
   right: 0;
}

#mb3 {
   right: 0;
   bottom: 256px;
}

#mb4 {
   right: 0;
   top: -117px;
}

#mb5 {
   bottom: 200px;
   left: 50px;
}

#mb6 {
   top: -140px;
   left: 50px;
}

#mb7 {
    top: 0;
    left: 0;
}

#mb8 {
    top: 20px;
    right: 0;
}

#mb9 {
    top: 180px;
    left: 10px;
}

#mb10 {
    top: 320px;
    left: -30px;
}

#mb11 {
    bottom: 120px;
    right: 0;
}

#mb12 {
    bottom: 20px;
    right: 0;
}

@media screen and (max-width: 1160px) {
    #mb9 {
        top: 153px;
    }
}

@media screen and (max-width: 880px) {
    #mb9 {
        top: 110px;
    }

    #mb10 {
        top: 240px;
    }
}

@media screen and (max-width: 768px) {
    #mb2 {
        bottom: 70px;
    }

    #mb3 {
        bottom: 146px;
    }

    #mb5 {
        bottom: 80px;
    }

    #mb11 {
        bottom: 0;
    }

    #mb12 {
        bottom: -110px;
    }
}

/* SECTION EIGHT */
section.eight {
    padding-top: 80px !important;
    background: #000000;
}

.slanted-div.top.reverse.eight:before {
    border-top: 80px solid #b91919;
    z-index: 5;
    height: 0px;
    overflow: hidden;
}

section.eight .rectangle {
    padding-top: 200px;
    padding-left: 50px;
    line-height: 20px;
}

section.eight h2 {
    padding-right: 25px;
    padding-left: 50px;
    width: 100%;
    max-width: 550px;
}

section.eight p {
    width: 100%;
    max-width: 710px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    padding-bottom: 24px;
    width: 100%;
    padding-left: 50px;
    padding-right: 25px;
}

section.eight .contain {
    width: 100%;
    max-width: 680px;
    float: right;
    padding-bottom: 50px;
}

.item.car_hood {
    background-image: url(https://assets.bwbx.io/s3/mspandorasbox/bmw/images/P90449087-highRes.jpg);
    background-position: 0;
    background-repeat: no-repeat;
    background-size:cover;
    position: relative;
    top: 0px;
}

.item.car_hood:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    transform-origin: top left;
    transform: skewY(-4deg);
}

section.eight .stripe {
    position: absolute;
    background: #b91919;
    top: -14px;
    height: 12%;
    width: 200%;
    transform: skewY(-4deg);
    z-index: 5;
}

@media screen and (max-width: 1080px) {
    section.eight .stripe {
        top: 20px;
    }
}

@media screen and (max-width: 768px) {
    section.eight .stripe {
        top: 30px;
    }
}

/* SECTION TEN */
section.ten {
    background: #000000;
}

section.ten .item p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    padding-bottom: 24px;
    padding-left: 50px;
    padding-right: 25px;
}

section.ten .item.bmw_leaving {
    background-image: url(https://assets.bwbx.io/s3/mspandorasbox/bmw/images/P90449415-highRes.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    padding-bottom: 400px;
}

section.ten .item:nth-child(2) {
    padding-top: 80px;
    padding-bottom: 200px;
}

/* SECTION ELEVEN */
.slanted-div.top.eleven {
    background-image: url(https://assets.bwbx.io/s3/mspandorasbox/bmw/images/podcast_bg2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
}

section.eleven .container ul {
    position: relative;
    z-index: 2;
    text-align: left;
    width: 80%;
    max-width: 1231px;
    margin: 20px auto;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    padding-top: 15px;
    padding-bottom: 15px;
}

section.eleven .container ul li {
    display: inline-block;
    vertical-align: middle;
}

section.eleven .container ul li img {
    position: relative;
    width: 69px;
    z-index: 1;
    margin-right: 20px;
  }

section.eleven .container ul li p {
    position: relative;
    width: 100%;
    max-width: 1231px;
    margin: 0 auto;
    z-index: 1;
    line-height: 69px;
}

section.eleven #waveform-2-text {
    position: relative;
    width: 80%;
    max-width: 1231px;
    margin: 0 auto;
    z-index: 1;
    font-weight: 400;
    font-size: 56px;
    line-height: 75px;
    /* or 134% */
    letter-spacing: -0.015em;
    color: #FFFFFF;
    z-index: 1;
    padding-top: 50px;
    padding-bottom: 100px;
}

@media screen and (max-width: 768px) {
    section.eleven #waveform-2-text {
        font-size: 20px;
        line-height: 28px;
    }
}
   
section.eleven #waveform-2-text span {
   opacity: 0.3;
   transition: 1s;
}

section.eleven .container .waveform {
    position: relative;
    width: 80%;
    max-width: 1231px;
    margin: 0 auto;
    z-index: 2;
}

/* SECTION TWELVE */
section.twelve .container {
    justify-content: center;
    background-color: #FFFFFF;
    border-right: 100px solid #F7BD37;
}

@media screen and (max-width: 1080px) {
    section.twelve .container {
        border-right-width: 50px;
    }
}

@media screen and (max-width: 768px) {
    section.twelve .container {
        border-right: none;
    }
}

section.twelve .container h2,
section.twelve .container p {
    color: #000000;
}

section.twelve .container .item.right {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 50px;
    padding-right: 50px;
}


section.twelve .container .item.right img,
section.twelve .container .item.right h2,
section.twelve .container .item.right p {
    max-width: 640px;
}

section.twelve .container .item.left {
    padding-top: 100px;
    padding-bottom: 250px;
    padding-left: 50px;
    padding-right: 50px;
}

section.twelve .container .item.left img,
section.twelve .container .item.left h2,
section.twelve .container .item.left p {
    max-width: 640px;
}


section.twelve .container .item.logo_sticker {
    position: relative;
    z-index: 1;
    background-image: url(https://assets.bwbx.io/s3/mspandorasbox/bmw/images/logo_sticker.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

section.twelve .container .item.woman_detailing {
    position: relative;
    z-index: 1;
    background-image: url(https://assets.bwbx.io/s3/mspandorasbox/bmw/images/P90450475-highRes.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}


/* SECTION THIRTEEN */

section.thirteen .container, .slanted-div.top.thirteen:before, .slanted-div.thirteen.bottom.reverse_b:after {
    margin-top: -114px;
    padding-top: 114px;
    margin-bottom: -114px;
    padding-bottom: 114px;
    border-left: 135px solid #0146A3;
}

section.thirteen .contain {
    width: 100%;
    max-width: 525px;
    float: right;
    padding-bottom: 50px;
}

section.thirteen .rectangle {
    padding-top: 100px;
    padding-left: 50px;
    line-height: 20px;
}

section.thirteen h2 {
    padding-right: 25px;
    padding-left: 50px;
    width: 100%;
    max-width: 550px;
}

section.thirteen p {
    width: 100%;
    max-width: 605px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    padding-bottom: 24px;
    width: 100%;
    padding-left: 50px;
    padding-right: 25px;
}

section.thirteen .contain {
    width: 100%;
    max-width: 680px;
    float: right;
    padding-bottom: 50px;
}

section.thirteen .man_detailing {
    width: 100%;
    max-width: 605px;
    padding-bottom: 24px;
    padding-left: 50px;
    padding-right: 25px;
}

section.thirteen .item.right img {
    width: 100%;
    max-width: 635px;
    padding-top: 100px;
    padding-right: 100px;
    padding-bottom: 100px;
}

section.thirteen .item.right p {
    width: 100%;
    max-width: 545px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    padding-bottom: 24px;
    width: 100%;
    padding-left: 0px;
    padding-right: 25px;
}

/* SECTION FIFTEEN */
section.fifteen {
    background-image: url(https://assets.bwbx.io/s3/mspandorasbox/bmw/images/podcast_bg_navy.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding-top: 100px;
    padding-bottom: 100px;
}

section.fifteen .container ul {
    position: relative;
    z-index: 2;
    text-align: left;
    width: 80%;
    max-width: 1231px;
    margin: 20px auto;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    padding-top: 15px;
    padding-bottom: 15px;
}

section.fifteen .container ul li {
    display: inline-block;
    vertical-align: middle;
}

section.fifteen .container ul li img {
    position: relative;
    width: 69px;
    z-index: 1;
    margin-right: 20px;
  }

  section.fifteen .container ul li p {
    position: relative;
    width: 100%;
    max-width: 1231px;
    margin: 0 auto;
    z-index: 1;
    line-height: 69px;
}

section.fifteen #waveform-3-text {
    position: relative;
    width: 80%;
    max-width: 1231px;
    margin: 0 auto;
    z-index: 1;
    font-weight: 400;
    font-size: 56px;
    line-height: 75px;
    /* or 134% */
    letter-spacing: -0.015em;
    color: #FFFFFF;
    z-index: 1;
    padding-top: 50px;
    padding-bottom: 100px;
}

@media screen and (max-width: 768px) {
    section.fifteen #waveform-3-text {
        font-size: 20px;
        line-height: 28px;
    }
}
   
section.fifteen #waveform-3-text span {
   opacity: 0.3;
   transition: 1s;
}

section.fifteen .container .waveform {
    position: relative;
    width: 80%;
    max-width: 1231px;
    margin: 0 auto;
    z-index: 2;
}

/* SECTION SIXTEEN */
section.sixteen {
    padding-top: 200px !important;
    background: #0E0E0E;
}


section.sixteen .item.right p {
    width: 100%;
    max-width: 720px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    padding-bottom: 24px;
    padding-left: 50px;
    padding-right: 25px;
}

section.sixteen .rectangle {
    padding-left: 50px;
    line-height: 20px;
}

section.sixteen h2 {
    padding-right: 25px;
    padding-left: 50px;
    width: 100%;
    max-width: 720px;
}

section.sixteen .m_sports_package {
    width: 100%;
    max-width: 545px;
    padding-bottom: 24px;
    padding-left: 0px;
    padding-right: 25px;
}

section.sixteen .m_sports_seat {
    width: 100%;
    max-width: 545px;
    padding-bottom: 24px;
    padding-left: 0px;
    padding-right: 25px;
}

section.sixteen .contain {
    width: 100%;
    max-width: 545px;
    float: right;
    padding-left: 50px;
    padding-bottom: 50px;
}

section.sixteen .animated_text {
    padding-right: 25px;
}

section.sixteen .text-box {
    border: 1px solid #FFFFFF;
}

section.sixteen .animated_text p {
    padding: 30px;
    width: 100%;
}

section.sixteen .animated_text.right{
    padding-bottom: 24px;
    padding-left: 50px;
    padding-right: 25px;
    max-width: 500px;
}

section.sixteen p.quote {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: 0.01em;
    width: 100%;
    max-width: 480px;
    padding-left: 50px;
}
section.sixteen p.quote span {
    display: block;
    padding-top: 25px;
    font-size: 18px;
    font-style: italic;
}

section.sixteen .rectangle.lower {
    padding-top: 40px;
}

/* SECTION SEVENTEEN */
section.seventeen {
    background: #181818;
}

/* SECTION EIGHTEEN */
section.eighteen {
    padding-bottom: 40px;
}
section.eighteen .rectangle, section.eighteen h2 {
    padding-left: 50px;
}

section.eighteen .rectangle {
    width: 330px;
    height: 8px;
}

.main-carousel {
    padding-bottom: 40px;
}

/* FOOTER */
footer {
    background: #363636;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}

footer p {
    width: 80%;
    max-width: 1140px;
    font-size: 25px;
    line-height: 32px;
    margin: 0 auto;
    text-align: center;
}

.page_wrapper {
    width: 100%;
    max-width: 1840px;
    margin: 0 auto;
}

.mobile {
    display: none;
}

@media only screen and (max-width: 1080px) {
    h1, h2 {
        font-size: 33px;
        line-height: 33px;
    }

    p, section.three .container .item.right p, section.six p, section.eight p, section.ten .item p, 
    section.thirteen p, section.thirteen .item.right p, section.sixteen .item.right p {
        font-size: 12px;
        line-height: 18px;
    }

    .container.hero p {
        font-size: 12px;
        line-height: 18px;
        margin-right: 20px;
        max-width: 370px;
    }

    section.three .container, section.two .container, .slanted-div.top.two:before {
        border-left: 74px solid #00C9EF;
    }

    section.three .container .item.left p {
        font-size: 20px;
        line-height: 22px;
    }

    section.three .container .item.left p:last-child {
        font-size: 14px;
        padding-top: 18px;
    }

    .container.hero ul li:first-child {
        margin-right: 85px;
        margin-left: 10px;
    }

    .container.hero ul li:first-child img {
        width: 58px;
        margin-right: 22px;
    }

    .container.hero ul li p {
        font-size: 8px;
        line-height: 15px;
    }

    .container.hero ul li img {
        width: 30px;
        margin-right: 5px;
    }    

    .hero_image {
        max-width: 400px;
    }

    section.three .container {
        padding-top: 800px;
        padding-bottom: 120px;
    }

    section.four .container p.subtitles, section.eleven .container p.subtitles, section.fifteen .container p.subtitles {
        font-size: 25px;
        line-height: 34px;
    }

    section.six .item {
        padding-top: 60px;
    }

    section.six .item.left p:first-child {
        padding-top: 0px;
    }

    section.six .item.right {
        padding-top: 30px;
    }


    section.six p.quote, section.sixteen p.quote {
    font-size: 20px;
    line-height: 22px;
    }

    section.six .item p.quote {
        max-width: 450px;
    }

    section.eight h2 {
        max-width: 440px;
    }

    section.eight .rectangle {
        padding-top: 140px;
    }

    section.twelve .container .item.right h2 {
        max-width: 400px;
    }

    section.twelve .container .item.left {
        padding-bottom: 130px;
    }
    
    section.thirteen .container, .slanted-div.top.thirteen:before, .slanted-div.thirteen.bottom.reverse_b:after {
        border-left: 74px solid #0146A3;
    }
    
}

@media only screen and (max-width: 768px) {
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }

    p, section.three .container .item.right p, section.six p, section.eight p, section.ten .item p, 
    section.thirteen p, section.thirteen .item.right p, section.sixteen .item.right p {
        font-size: 14px;
        line-height: 19px;
        width: auto;
        max-width: none;
    }

    .hero_image {
        display: none;
    }

    .item {
        width: 100%;
    }

    .container.hero {
        padding-top: 100px;
        padding-bottom: 50px;
    }

    .container.hero .item {
        padding-bottom: 40px;
    }

    section.three .container, section.two .container, .slanted-div.top.two:before {
    border-left: none;
    }

    .slanted-div.top.two .item p {
        padding-left: 25px;
        padding-right: 25px;
    }

    .circle {
        display: none;
    }

    .slanted-div.top.two .container:first-child .item {
        padding-bottom: 30px;
    }

    section.three .container .item.left p {
        float: none;
        text-align: left;
    }

    section.three .container .item.left p {
        padding-left: 0px;
        margin-left: 25px;
        margin-right: 25px;
    }

    section.three .container .item.left img {
        float: none;
        margin-left: 30px;
    }

    section.three .item.right {
        background: #161616;
        padding-top: 25px;
        margin-top: 25px;
        padding-bottom: 140px;
    }
    section.three .container {
        padding-top: 900px;
        padding-bottom: 0px;
    }

    section.three .container .item.right p {
        padding: 0px;
        margin-left: 25px;
        margin-right: 25px;
        padding-bottom: 20px;
    }

    section.six .item {
        padding: 0px;
        padding-top: 30px;
    }

    section.six .item h2, section.six .item p,
    section.eight .item h2, section.eight .item p {
        padding: 0px;
        padding-bottom: 20px;
        margin: 0;
        margin-left: 25px;
        margin-right: 25px;
    }

    section.six .rectangle,
    section.eight .rectangle {
        padding-left: 25px;
    }

    section.six .item.left p {
        width: auto;
        max-width: none;
    }

    section.six .rectangle_r {
        padding-left: 25px;
    }

    section.six .contain {
        float: none;
    }

    section.eight .contain {
        float: none;
        width: auto;
        max-width: none;
    }

    section.ten .item p {
        padding: 0px;
        padding-bottom: 20px;
        margin-left: 25px;
        margin-right: 25px;
    }

    section.ten .item.bmw_leaving {
        display: none;
    }

    section.ten .item:nth-child(2) {
        padding-top: 60px;
        padding-bottom: 100px;
    }

    .item.logo_sticker {
        height: 400px;
    }

    .slanted-div.top.eleven::after {
        display: none;
    }

    section.thirteen .container, 
    .slanted-div.top.thirteen:before, 
    .slanted-div.thirteen.bottom.reverse_b:after {
        border-left: none;
    }

    section.twelve .container .item.right h2, 
    section.twelve .container .item.right img,  
    section.twelve .container .item.right p {
        max-width: auto;
    }

    section.twelve .container .item.right {
        padding: 0px;
        padding-top: 30px;
        margin-left: 25px;
        margin-right: 25px;
        margin-bottom: 25px;
    }

    section.twelve .container .item.right h2 {
        padding-bottom: 30px;
    }

    section.twelve .container .item.left {
        max-width: auto;
        padding: 0px;
        padding-bottom: 40px;
        margin-left: 25px;
        margin-right: 25px;
    }

    section.twelve .container .item.woman_detailing {
        height: 400px;
    }

    section.thirteen .rectangle {
        padding-top: 45px;
    }

    section.thirteen .man_detailing {
        display: none;
    }

    section.thirteen .rectangle {
        padding-left: 25px;
    }

    section.thirteen h2 {
        padding: 0;
        padding-bottom: 30px;
        margin: 0;
        margin-left: 25px;
        margin-right: 25px;
        width: auto;
        max-width: none;
    }

    section.thirteen .item p {
        padding: 0px;
        padding-bottom: 20px;
        margin-left: 25px;
        margin-right: 25px;
    }

    section.thirteen .item.right img {
        width: 100%;
        padding: 0px;
        padding-bottom: 40px;
        max-width: none;
    }

    section.thirteen .contain {
        float: none;
        width: auto;
        max-width: none;
    }

    section.fifteen .container p.subtitles {
        padding-bottom: 30px;
    }

    section.sixteen .mobile img {
        width: 100%;
    }

    section.sixteen .m_sports_package {
        padding: 0px;
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 25px;
        width: 100%;
        max-width: none;
    }

    section.sixteen .rectangle {
        padding-left: 25px;
    }

    section.sixteen h2 {
        padding: 0;
        padding-bottom: 30px;
        margin: 0;
        margin-left: 25px;
        margin-right: 25px;
        width: auto;
        max-width: none;
    }

    section.sixteen .item p, 
    section.sixteen .item.right p {
        padding: 0px;
        padding-bottom: 20px;
        padding-left: 25px;
        padding-right: 25px;
    }

    section.sixteen .animated_text {
        padding-right: 0px;
    }

    section.sixteen .animated_text .text-box {
        padding-top: 20px;
        margin-left: 25px;
        margin-right: 25px;
        margin-bottom: 30px;
    }

    section.sixteen .m_sports_seat {
        padding: 0px;
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 25px;
        width: 100%;
        max-width: none;
    }

    section.sixteen .text-box {
        padding-top: 20px;
        margin-left: 25px;
        margin-right: 25px;
        margin-bottom: 30px;
    }

    section.sixteen .animated_text.right {
        padding: 0px;
        width: 100%;
        max-width: none;
    }

    .rectangle {
        width: 50%;
    }
}

.video-full{
    display: block;
    width:100%;
}

/* waypoints */
.wp-off,.wp-off-delay{
    opacity:0;
}

.wp-off.wp-on,.wp-off-delay.wp-on{
    transition:opacity .5s linear;
    opacity:1;
}

section.one .wp-off.stripe{
    top:100px;
    transition:all .5s ease-out;
    z-index:999;
}

section.one .wp-off.wp-on.stripe{
    top:2px;
}

.waveform-player{
    position:relative;
    margin:60px auto;
    max-width:1200px;
    width:90%;
}

.waveform-player-container{
    position:relative;
    top:0px;
    left:0px;
    width:100%;
    height:170px;
    overflow: hidden;
}

.waveform-player-container wave{
    position: absolute;
    left:0px;
    top:0px;
    width:100%;
}

.waveform-player-controls{
    text-align: left;
    margin-top:20px;
    padding:14px 0px;
    position:relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
}

.waveform-player-controls-btn{
    position:relative;
    width:69px;
    height:69px;
    margin-right:20px;
    border:none;
    border-radius:50%;
    background-color:#FFFFFF;
    cursor: pointer;
}


.waveform-player-controls-btn::after{
    margin-left:4px;
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 24px;
    border-color: transparent transparent transparent #142654;
}


.waveform-player-controls-btn.playing::after{
    margin-left:0px;
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width: 24px;
    height: 30px;
    border-style: solid;
    border-width: 0px 8px;
    border-color: #142654;
}

.waveform-player-controls-title{
    flex:1;
    color:#FFFFFF;
    font-size:30px;
    line-height: 52px;
    font-family:'maison_neuedemibold';
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    .waveform-player-controls-title {
        font-size: 18px;
        line-height: 32px;
    }    

    .waveform-player-controls-btn {
        width: 44px;
        height: 44px;
    }
    .waveform-player-controls-btn:after {
        border-width: 10px 0 10px 18px;
    }
}

wave{
    overflow:hidden !important;
}



/* carousel buttons */
.flickity-prev-next-button.next{
    right:calc(50% - 70px);
    z-index:999;
}

.flickity-prev-next-button.previous{
    left:calc(50% - 70px);
    z-index:999;
}

/* animated_text 1  */

.animated_text_1{
    position:relative;
}

.animated_text_1 .text-box{
    opacity:0;
    transition-delay: .25s !important;
    transition:all .25s linear;
    overflow: hidden;
}

.animated_text_1 .text-box p{
    opacity:0;
    transition-delay: .5s !important;
    transition:opacity .5s linear;
}

.animated_text_1::before{
    content:'';
    position:absolute;
    height:0px;
    width:0px;
    border-radius: 50%;
    top:-150px;
    left:50%;
    transform:translateX(-50%);
    background-color: #FFFFFF; 
    transition:all .25s linear;
}

.animated_text_1::after{
    content:'';
    position:absolute;
    height:0px;
    width:1px;
    top:-150px;
    left:50%;
    background-color: #FFFFFF;
    transition:all .25s linear;
}

.animated_text_1.text-on .text-box{
    opacity:1;
}

.animated_text_1.text-on .text-box p{
    opacity:1;
}

.animated_text_1.text-on::before{
    opacity:1;
    width:12px;
    height:12px;
}

.animated_text_1.text-on::after{
    height:150px;
}

/* animated_text 1  */

.animated_text_2{
    position:relative;
}

.animated_text_2 .text-box{
    opacity:0;
    transition-delay: .25s !important;
    transition:all .25s linear;
    overflow: hidden;
}

.animated_text_2 .text-box p{
    opacity:0;
    transition-delay: .5s !important;
    transition:opacity .5s linear;
}

.animated_text_2::before{
    content:'';
    position:absolute;
    height:0px;
    width:0px;
    border-radius: 50%;
    left:-150px;
    top:50%;
    transform:translateY(-50%);
    background-color: #FFFFFF; 
    transition:all .25s linear;
}

.animated_text_2::after{
    content:'';
    position:absolute;
    width:0px;
    height:1px;
    left:-150px;
    top:50%;
    background-color: #FFFFFF;
    transition:all .25s linear;
}

.animated_text_2.text-on .text-box{
    opacity:1;
}

.animated_text_2.text-on .text-box p{
    opacity:1;
}

.animated_text_2.text-on::before{
    opacity:1;
    width:12px;
    height:12px;
}

.animated_text_2.text-on::after{
    width:200px;
}



/* horizontal scrolling slideshow */

.row {
   display: flex;
   flex-wrap: wrap;
   width: 100%
}

.col-xs-offset-0 {
   margin-left: 0
}

.col-xs-1 {
   flex: 0 0 auto;
   width: 8.33333%;
   padding: 0 15px;
   box-sizing: border-box
}

.col-xs-offset-1 {
   margin-left: 8.33333%
}

.col-xs-2 {
   flex: 0 0 auto;
   width: 16.66667%;
   padding: 0 15px;
   box-sizing: border-box
}

.col-xs-offset-2 {
   margin-left: 16.66667%
}


.horizontal-scroll {
   /* background-color: #181818; */
   height: 400vh;
   position: relative;
   transition: background-color 0.5s;
}

.horizontal-scroll.dark {
   background-color: #000;
}

.horizontal-scroll .horizontal-scroll--sticky {
   height: 100vh;
   width: 100vw;
   position: sticky;
   top: 0px;
   transform: translateY(20px);
   overflow: hidden
}

.horizontal-scroll .horizontal-scroll--sticky .horizontal-scroll--content {
   width: auto;
   will-change: transform;
   transform-style: preserve-3d;
   padding-left: 10vw;
   padding-right: 20px;
   position: absolute;
   top: 50%
}

.horizontal-scroll .horizontal-scroll--sticky .horizontal-scroll--content .text-intro {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   flex-direction: column
}

.horizontal-scroll .horizontal-scroll--sticky .horizontal-scroll--content .text-intro p {
   margin: 0;
   font-family: 'SterlingDisplay', serif
}

.horizontal-scroll .horizontal-scroll--sticky .horizontal-scroll--content img {
   margin: 0;
   height: 70vh;
   width: auto
}

.horizontal-scroll .horizontal-scroll--sticky .horizontal-scroll--content .row {
   width: auto;
   flex-wrap: unset
}

.horizontal-scroll .horizontal-scroll--sticky .horizontal-scroll--content .col-xs-2 {
   padding: 0;
   margin: 0 10px;
   width: auto
}