@font-face {
    font-family: 'Apercu Regular';
    src: url('fonts/Apercu-Regular.woff2') format('woff2'),
        url('fonts/Apercu-Regular.woff') format('woff'),
        url('fonts/Apercu-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Apercu Medium';
    src: url('fonts/Apercu-Medium.woff2') format('woff2'),
        url('fonts/Apercu-Medium.woff') format('woff'),
        url('fonts/Apercu-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Source Serif Pro';
    src: url('fonts/SourceSerifPro-Bold.woff2') format('woff2'),
    url('fonts/SourceSerifPro-Bold.woff') format('woff'),
    url('fonts/SourceSerifPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

:root {
    --var2px : 0.1044vw;            /* 2px 0.125rem     */
    --var4px : 0.2083333333vw;      /* 4px 0.250rem     */
    --var6px : 0.3125vw;            /* 6px 0.375rem     */
    --var10px : 0.5208333333vw;     /* 10px 0,625rem    */
    --var12px : 0.625vw;            /* 12px 0.75rem     */
    --var16px : 0.8333333333vw;     /* 16px 1rem        */
    --var18px : 0.9375vw;           /* 18px 1.125rem    */
    --var-18px : -0.9375vw;           /* 18px 1.125rem    */
    --var24px : 1.25vw;             /* 24px 1.5rem      */
    --var-24px : -1.25vw;             /* 24px 1.5rem      */
    --var27px : 1.40625vw;          /*      */
    --var28px : 1.4583333333vw;     /* 28px 1.75rem     */
    --var30px : 1.5625vw;           /* 30px 1.875rem    */
    --var32px : 1.6666666667vw;     /* 32px 2rem        */
    --var-32px : -1.6666666667vw;     
    --var36px : 1.875vw;            /* 36px 2.25rem     */
    --var48px : 2.5vw;              /* 48px 3rem        */
    --var60px : 3.125vw;            /* 60px 3.75rem     */
    --var-60px : -3.125vw;            
    --var72px : 3.75vw;             /* 72px 4.5rem      */
    --var74px : 3.8541666667vw;     /* 74px 4.625rem    */
    --var80px : 4.1666666667vw;     /* 80px 5rem        */
    --var84px : 4.375vw;            /* 84px 5.25rem     */
    --var88px : 4.583vw;            /*     */
    --var100px : 5.208vw;           /*    */
    --var180px : 9.375vw;           /* 180px 11.25rem   */
    --var336px : 17.5vw;            /* 336px 21rem      */
    --var360px : 18.75vw;           /* 360px 22.5rem    */
    --var400px : 20.8333333333vw;   /* 400px 25rem      */
    --var420px : 21.875vw;          /* 420px 26.25rem   */
}

@media screen and (max-width: 500px) {
    :root {
        --var2px : 0.2297vw;            /* 4.4px      */
        --var4px : 0.4583333333vw;      /* 8.8px     */
        --var6px : 0.6875vw;            /* 13.2px     */
        --var10px : 1.1458333333vw;     /* 22px     */
        --var12px : 1.375vw;            /* 26.4px     */
        --var16px : 1.8333333333vw;     /* 35.2px     */
        --var18px : 2.0625vw;           /* 39.6px     */
        --var-18px : -2.0625vw;         /* -39.6px    */
        --var24px : 2.75vw;             /* 52.8px     */
        --var-24px : -2.75vw;           /* -52.8px    */
        --var27px : 3.09375vw;          /* 59.4px   */
        --var28px : 3.2083333333vw;     /* 61.6px     */
        --var30px : 3.4375vw;           /* 66px     */
        --var32px : 3.6666666667vw;     /* 70.4px     */
        --var-32px : -3.6666666667vw;   /* -70.4px    */
        --var36px : 4.125vw;            /* 79.2px     */
        --var48px : 5.5vw;              /* 105.6px    */
        --var60px : 6.875vw;            /* 132px    */
        --var-60px : -6.875vw;          /* -132px   */
        --var72px : 8.25vw;             /* 158.4px    */
        --var74px : 8.4791666667vw;     /* 162.8px    */
        --var80px : 9.1666666667vw;     /* 176px    */
        --var84px : 9.625vw;            /* 184.8px    */
        --var88px : 10.0826vw;          /* 193.6px    */
        --var100px : 11.4576vw;         /* 220px    */
        --var180px : 20.625vw;          /* 396px    */
        --var336px : 38.5vw;            /* 739.2px    */
        --var360px : 41.25vw;           /* 792px    */
        --var400px : 45.8333333333vw;   /* 880px   */
        --var420px : 48.125vw;          /* 924px   */
    }
}

html {
    font-size: 16px;
}
body{
    margin: 0;
    font-size: var(--var36px, 36px);
    color: white;
    background: black;
    font-family: 'Apercu Regular', sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

@media screen and (max-width: 1000px) {
    body {
        height: 100dvh;
        overflow: hidden;
    }
}

body>div {

    margin: auto 0;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    /* height: auto;
    aspect-ratio: 1920/1080;
    min-height: 100px;*/

}

@media screen and (max-width: 1000px) {
    body>div {
        overflow: hidden;
        height: 100dvh;
    }
}





/* Default */

a {
    color: inherit;
    text-decoration: none;
}
video {
    width: 100%;
    height: 100%;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

h2 {
    font-size: var(--var48px, 48px);
    font-weight: normal;
}
h3 {
    font-weight: normal;
}
h4 {
    font-weight: normal;
}
h5 {
    font-weight: normal;
}
h6 {
    font-weight: normal;
}





/* Header */

header {
    position: fixed;
    z-index: 1;
    width: 100vw;
    padding: var(--var24px, 24px);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--var24px, 24px);
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%);
}
@media screen and (max-width: 500px) {
    header {
        flex-wrap: wrap;
    }
}
header.hide-it {
    display: none;
}
header h1 {
    margin:0;
    font-size: var(--var36px, 36px);
    font-weight: 100;
    line-height: 100%;
    margin-right: auto;
}
header h1 span {
    font-family: 'Source Serif Pro', serif;
    font-weight: bold;
}
header breadcrumb {
    display: flex;
    flex-direction: row;
    border: var(--var2px, 2px) solid;
    border-radius: var(--var6px, 6px);
    align-items: center;
    height: var(--var72px, 72px);
    background: rgba( 0, 0, 0, 0.15 );
    overflow: hidden;
}
@media screen and (max-width: 500px) {
    header breadcrumb {
       /* width: 100%;*/
    }
}
header breadcrumb a {
    display: block;
    padding: 0 var(--var24px, 24px) 0 var(--var60px, 60px);
    box-sizing: border-box;
    line-height: var(--var72px, 72px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='72' viewBox='0 0 38 72' fill='none'%3E%3Cpath d='M1 0.644661L36.3553 36L1 71.3553' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: left center;
    background-size: auto var(--var74px, 74px);
    flex-shrink: 0;
}
header breadcrumb a:first-child {
    background: none;
    padding: 0 var(--var24px, 24px) 0 var(--var24px, 24px);
}





/* Main */

main {
    width: 100vw;
    height: 100%;
    margin: 0;
    
}





/* Button */

button {
    appearance: none;
    border: var(--var2px, 2px) solid;
    background: none;
    color: white;
    height: var(--var72px, 72px);
    border-radius: var(--var6px, 6px);
    padding: 0 var(--var24px, 24px);
    font-size: var(--var36px, 36px);
    cursor: pointer;
    box-sizing: border-box;
    min-width: var(--var84px, 84px);
    background: rgba( 0, 0, 0, 0.15 );
}
button:hover {
    background: rgba( 255, 255, 255, 0.25 );
}
button#home-button {
    text-indent: -5000px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='30' viewBox='0 0 32 30' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 16.2906L15.918 0.372589L32 16.4545V29.5455L31.9181 29.6274H23.4779C23.4779 29.6274 12.1257 29.6274 9.52209 29.6274H0V16.2906ZM22 29.6274H11C10.9661 29.3807 11 27.1287 11 26.8726C11 23.835 13.4624 21.3726 16.5 21.3726C19.5376 21.3726 22 23.835 22 26.8726C22 27.1287 22.0339 29.3807 22 29.6274ZM24 27.6274C24.0248 27.3792 24 27.1274 24 26.8726C24 22.7305 20.6421 19.3726 16.5 19.3726C12.3579 19.3726 9 22.7305 9 26.8726C9 27.1274 8.97519 27.3792 9 27.6274H2V17.1191L15.918 3.20102L30 17.283V27.6274H24Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: var(--var32px, 32px) auto;
}
button#skip-button {
    text-indent: -5000px;
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='33' viewBox='0 0 34 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.052002 32L0.052002 0L2.052 0L2.052 32H0.052002Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32.052 17H0.052002V15H32.052V17Z' fill='white'/%3E%3Cline x1='32.3449' y1='16.7071' x2='16.3478' y2='0.710018' stroke='white' stroke-width='2'/%3E%3Cline x1='32.2591' y1='15.2071' x2='15.9957' y2='31.4706' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: var(--var32px, 32px) auto;
}
button#close-button {
    text-indent: -5000px;
    background-image: url("data:image/svg+xml,%3Csvg width='31' height='32' viewBox='0 0 31 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M28.6378 30.845L0 2.20718L1.41421 0.792969L30.052 29.4308L28.6378 30.845Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M30.052 2.56936L1.41421 31.2072L0 29.793L28.6378 1.15514L30.052 2.56936Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: var(--var30px, 30px) auto;
}
.msbv-button {
    font-size: var(--var36px, 36px);
    border: var(--var2px, 2px) solid;
    padding: 0 var(--var36px, 36px);
    line-height: var(--var72px, 72px);
    border-radius: var(--var72px, 72px);
    background: rgba( 0, 0, 0, 0.15 );
}
.msbv-button:hover {
    background: rgba( 255, 255, 255, 0.25 );
}
.msbv-button.loading::before {
  content: "";
  display: block;
  position: absolute;
  margin-left: var(--var-24px, -24px);
  margin-top: var(--var27px, 27px);
  width: var(--var18px, 18px);
  height: var(--var18px, 18px);
  border-radius: 50%;
  background: radial-gradient(farthest-side,#FFFFFF 94%,#0000) top/3.8px 3.8px no-repeat,
  conic-gradient(#0000 30%,#FFFFFF);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3.8px),#000 0);
  animation: spinner-l 0.6s infinite linear;
}
@keyframes spinner-l {
   100% {
      transform: rotate(1turn);
   }
}
.msbv-button.off {
    opacity: 0.5;
    pointer-events: none;
}





/* Layer */

.msbv-layer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

@media screen and (max-width: 1000px) {
    .msbv-layer {
        overflow: scroll;
    }
}

/* Layer 1 */
#msbv-layer-1 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
}
#msbv-layer-1 video {
    position: absolute;
    z-index: 0;
}
#msbv-layer-1>div {
    position: absolute;
    z-index: 1;
    padding: var(--var36px, 36px) var(--var48px, 48px);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.00) 100%);
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    bottom: 0;
    box-sizing: border-box;

}
#msbv-layer-1>div>div {

    display: flex;
    gap: var(--var24px, 24px);
    flex-direction: row;

}

@media screen and (max-width: 1000px) {
    #msbv-layer-1>div {
        justify-content: center;
    }
}

@media screen and (max-width: 500px) {
    #msbv-layer-1>div {
        justify-content: center;
    }
}

#msbv-layer-1>div>div.msbv-headphone {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    line-height: 200%;
}

@media screen and (max-width: 1000px) {
    #msbv-layer-1>div>div.msbv-headphone {
        display: none;
    }
}

#msbv-layer-1>div>div.msbv-headphone:before {
    
    content: "";
    display: block;
    width: var(--var100px, 100px);
    height: var(--var88px, 88px);
    flex-direction: row;
    align-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='88' viewBox='0 0 101 88' fill='none'%3E%3Cpath d='M96.3099 53.4578V45.7999C96.3099 20.5389 75.7721 0 50.51 0C25.2479 0 4.71011 20.5378 4.71011 45.7999V53.4578C1.61922 56.4923 -0.0348011 60.8812 0.655459 65.4703L1.47595 71.14C2.50048 78.086 8.48702 83.087 15.3245 83.087C15.5025 83.087 15.7022 83.0653 15.8802 83.0653C16.336 84.3894 17.2042 85.5442 18.3373 86.4124C19.5832 87.3327 21.0592 87.8146 22.5483 87.8146C22.9042 87.8146 23.2385 87.7929 23.5945 87.7364L28.639 86.9897C32.5158 86.421 35.1942 82.8092 34.6299 78.9324L30.141 48.4136C29.5723 44.5586 25.9518 41.8584 22.0837 42.4228L17.0392 43.1695C15.1725 43.4473 13.5141 44.4241 12.3941 45.9695C11.5258 47.1373 11.0614 48.4701 10.9919 49.8723C9.94566 50.1501 8.94724 50.5408 8.01381 51.0401V45.7828C8.01381 22.3578 27.0713 3.29588 50.5008 3.29588C73.9258 3.29588 92.9877 22.3533 92.9877 45.7828V51.0401C92.0674 50.5495 91.0558 50.1501 90.0096 49.8723C89.8533 46.5512 87.3745 43.673 83.9623 43.1825L78.9178 42.4358C75.0411 41.8671 71.4378 44.5456 70.8605 48.4266L66.3716 78.9454C65.8029 82.8005 68.4814 86.4254 72.3625 87.0027L77.407 87.7494C77.763 87.8059 78.0973 87.8276 78.4532 87.8276C79.964 87.8276 81.4313 87.337 82.6643 86.4254C83.8321 85.5571 84.6743 84.4024 85.1214 83.0783C85.2993 83.0783 85.499 83.1 85.677 83.1C92.5101 83.1 98.492 78.0773 99.5256 71.153L100.346 65.4833C101.036 60.8947 99.3563 56.4796 96.2914 53.4707L96.3099 53.4578ZM4.74456 70.6492L3.92408 64.9796C3.13397 59.7006 6.40294 54.743 11.3692 53.2237L15.272 79.7616C10.0712 79.7399 5.54765 75.937 4.75759 70.6495L4.74456 70.6492ZM15.0462 47.9443C15.6583 47.1325 16.5222 46.6116 17.5251 46.4422L22.5696 45.6955C22.7476 45.6738 22.9473 45.6521 23.1253 45.6521C24.9834 45.6521 26.5939 47.0066 26.8718 48.8864L31.3606 79.4052C31.6602 81.4716 30.2363 83.4078 28.1698 83.6943L23.1253 84.441C22.1355 84.5973 21.137 84.3412 20.3253 83.7291C19.5134 83.117 18.9925 82.2531 18.8232 81.2502L14.3343 50.7314C14.178 49.7416 14.4341 48.7649 15.0463 47.9314L15.0462 47.9443ZM80.6937 83.7632C79.8819 84.3753 78.8834 84.6314 77.8937 84.4751L72.8491 83.7284C70.7827 83.4289 69.3502 81.5057 69.6583 79.4393L74.1472 48.9205C74.4467 46.854 76.3916 45.4302 78.4364 45.7297L83.4809 46.4764C85.5473 46.7759 86.9799 48.6991 86.6717 50.7655L82.1828 81.2843C82.0482 82.2828 81.5143 83.1511 80.6807 83.7632L80.6937 83.7632ZM97.0995 65.0047L96.279 70.6743C95.4889 75.9533 90.9436 79.7779 85.7646 79.7865L89.6674 53.2486C94.625 54.7594 97.9027 59.704 97.1125 65.0045L97.0995 65.0047Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;

}

/* Layer 2 */
#msbv-layer-2 {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}
#msbv-layer-2 video {
    position: absolute;
    z-index: 0;
}
#msbv-layer-2>div {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    padding: var(--var24px, 24px);
}

/* Layer 3 */
#msbv-layer-3 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--var72px, 72px) 0;
}

#msbv-layer-3>div {
    display: flex;
    flex-direction: column;
    margin: auto 0;
    padding: 0 var(--var180px, 180px);
    gap: var(--var80px, 80px);
}

@media screen and (max-width: 500px) {
    #msbv-layer-3>div {
        padding: 0 var(--var36px, 36px);
    }
}

/* Layer 4 */
#msbv-layer-4 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: var(--var72px, 72px) 0;
    gap: 0;
}

@media screen and (max-width: 1000px) {
    #msbv-layer-4 {
        padding: var(--var180px, 180px) 0;
    }
}

@media screen and (max-width: 500px) {
    #msbv-layer-4 {
        padding: var(--var336px, 336px) 0  var(--var180px, 180px) 0;
    }
}

#msbv-layer-4>div {
    margin: auto 0 0 0;
    padding: 0 var(--var180px, 180px);
}

@media screen and (max-width: 500px) {
    #msbv-layer-4>div {
        padding: 0 var(--var24px, 24px);
    }
}

#msbv-layer-4>div.msbvGridContainer {
    margin: 60px 0 auto 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    row-gap: var(--var24px, 24px);
    column-gap: var(--var36px, 36px);
}

@media screen and (max-width: 1000px) {
    #msbv-layer-4>div.msbvGridContainer {
        margin: 30px 0 30px 0;
    }
}

#msbv-layer-4>div.msbvGridContainer a {
    display: flex;
    width: var(--var360px, 360px);
    flex-basis: var(--var360px, 360px);
    flex-direction: column;
    gap: 0;
    transition: opacity 0.5s ease-out;;
}

@media screen and (max-width: 1000px) {
    #msbv-layer-4>div.msbvGridContainer a {
        width: calc( 50vw - var(--var48px, 48px) );
    }
}

@media screen and (max-width: 500px) {
    #msbv-layer-4>div.msbvGridContainer a {
        width: calc( 100vw - var(--var48px, 24px) );
    }
}

#msbv-layer-4>div.msbvGridContainer a img {
    width: var(--var360px, 360px);
    aspect-ratio: 16/9;
    height: auto;
    border: var(--var2px, 2px) solid;
    object-fit: cover;
    object-position: center;
    background-color: black;
}

@media screen and (max-width: 1000px) {
    #msbv-layer-4>div.msbvGridContainer a img {
        width: calc( 50vw - var(--var48px, 48px) );
    }
}

@media screen and (max-width: 500px) {
    #msbv-layer-4>div.msbvGridContainer a img {
        width: calc( 100vw - var(--var48px, 48px) );
    }
}

#msbv-layer-4>div.msbvGridContainer a h3 {
    font-size: var(--var27px, 27px);
    text-align: center;
    padding-bottom: var(--var10px, 10px);
}

@media screen and (max-width: 1000px) {
    #msbv-layer-4>div.msbvGridContainer a h3 {
        font-size: var(--var36px, 36px);
    }
}
#msbv-layer-4>div.msbvGridContainer a h4 {
    font-size: var(--var18px, 18px);
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-weight: bold;
    gap: var(--var10px, 10px);
    padding: var(--var4px, 4px) var(--var12px, 12px) 0 var(--var12px, 12px);
}

@media screen and (max-width: 1000px) {
    #msbv-layer-4>div.msbvGridContainer a h4 {
        font-size: var(--var36px, 36px);
    }
}

#msbv-layer-4>div.msbvGridContainer a h4 span {
    font-weight: normal;
}

/* Layer 5 */
#msbv-layer-5 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--var72px, 72px) 0;
}

@media screen and (max-width: 1000px) {
    #msbv-layer-5 {
        padding: var(--var180px, 180px) 0;
    }
}

@media screen and (max-width: 500px) {
    #msbv-layer-5 {
        padding: var(--var336px, 336px) 0  var(--var180px, 180px) 0;
    }
}

#msbv-layer-5 .mainContainer {
    display: flex;
    flex-direction: row;
    gap: var(--var80px, 80px);
    margin: auto 0;
    padding: 0;
    align-items: flex-start;
}

@media screen and (max-width: 1000px) {
    #msbv-layer-5 .mainContainer {
        flex-direction: column;
        padding: 0 var(--var24px, 24px) var(--var48px, 48px) var(--var24px, 24px);
        box-sizing: border-box;
    }
}

#msbv-layer-5 .mainContainer>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    margin: auto 0;
    gap: var(--var60px, 60px);
    max-width: 68vw;
}

@media screen and (max-width: 500px) {
    #msbv-layer-5 .mainContainer>div:nth-child(2) {
        max-width: 100%;
    }
}

#msbv-layer-5 .mainContainer .sticker {
    border: var(--var2px, 2px) solid;
    text-align: center;
    width: var(--var336px, 336px);
    height: var(--var336px, 336px);
    border-radius: var(--var336px, 336px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--var48px, 48px);
    transform: rotate(-5deg);
    margin-top: var(--var-60px, -60px);
}

body[data-lang="fr"] #msbv-layer-5 .mainContainer .sticker {

    width: 22vw;
    height: 22vw;
    transform: rotate(-5deg) translateY(4vw);

}

#msbv-layer-5 .mainContainer h2 {
    font-weight: bold;
}

/* Layer 6 */
#msbv-layer-6 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--var72px, 72px) 0;
}

@media screen and (max-width: 1000px) {
    #msbv-layer-6 {
        padding: var(--var180px, 180px) 0;
    }
}

@media screen and (max-width: 500px) {
    #msbv-layer-6 {
        padding: var(--var336px, 336px) 0  var(--var180px, 180px) 0;
    }
}

#msbv-layer-6 h2 {
    border: var(--var2px, 2px) solid;
    padding: var(--var24px, 24px);
    transform: rotate(-3deg);
    display: flex;
    flex-direction: column;
    gap: var(--var12px, 12px);
    text-align: center;
    font-size: var(--var48px, 48px);
}
#msbv-layer-6 h2 span{
    font-size: var(--var36px, 36px);
}

#msbv-layer-6>div {
    margin: auto 0 var(--var80px, 80px) 0;
    padding: 0 var(--var180px, 180px);
}

#msbvStatsContainer {
    display: flex;
    flex-direction: row;
    margin: 0 0 auto 0 !important;
    padding: 0 !important;
    gap: var(--var80px, 80px);
    align-items: center;
}

@media screen and (max-width: 1000px) {
    #msbvStatsContainer {
        padding-bottom: var(--var48px, 48px) !important;
    }
}

@media screen and (max-width: 500px) {
    #msbvStatsContainer {
        flex-direction: column;
    }
}

#msbvStatsContainer h3{
    text-align: center;
    font-size: var(--var36px, 36px);
    flex-basis: 50%;
    width: var(--var420px, 420px);
}
#msbvStatsContainer>div{
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    gap: var(--var10px, 10px);
}
#msbvStatsContainer>div>div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--var24px, 24px);
}
#msbvStatsContainer>div>div>div:nth-child(2) {
    width: var(--var400px, 400px);
    background-color: rgba( 255, 255, 255, 0.25 );
    height: var(--var18px, 18px);
    border-radius: var(--var18px, 18px);
}
#msbvStatsContainer>div>div>div:nth-child(2)>div {
    background-color: white;
    height: var(--var18px, 18px);
    border-radius: var(--var18px, 18px);
    transition: width 0.5s ease-out;
}
#msbvStatsContainer>div>div>div:nth-child(2)>div.stucked {
    width: var(--var18px, 18px) !important;
}

/* Layer 7 */
#msbv-layer-7 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--var72px, 72px) 0;
}

@media screen and (max-width: 1000px) {
    #msbv-layer-7 {
        padding: var(--var180px, 180px) 0;
    }
}

@media screen and (max-width: 500px) {
    #msbv-layer-7 {
        padding: var(--var336px, 336px) 0  var(--var180px, 180px) 0;
    }
}

#msbv-layer-7>div {
    margin: auto 0 0 0;
    padding: 0 var(--var180px, 180px);
}

@media screen and (max-width: 500px) {
    #msbv-layer-7>div {
        padding: 0 var(--var24px, 24px);
    }
}

#msbv-layer-7 .msbvGridContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  align-items: flex-start;
    gap: var(--var48px, 48px);
    padding: 0 var(--var180px, 180px);
    margin: var(--var48px, 48px) 0 auto 0;
    transition: opacity 0.5s ease-out;
}

@media screen and (max-width: 500px) {
    #msbv-layer-7 .msbvGridContainer {
        flex-direction: column;
        padding: 0 var(--var24px, 24px) var(--var48px, 48px) var(--var24px, 24px);
    }
}

#msbv-layer-7 .msbvGridContainer>div {

    flex-basis: 50%;
    flex-shrink: 1;
    flex-grow: 0;
    width: 400px;

}

@media screen and (max-width: 500px) {
    #msbv-layer-7 .msbvGridContainer>div {

        flex-basis: 100%;
        flex-shrink: 1;
        flex-grow: 0;
        width: 100%;

    }
}

#msbv-layer-7 .msbvGridContainer>div .image_container {
    margin-bottom: var(--var10px, 10px);
    border-radius: var(--var12px, 12px);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#msbv-layer-7 .msbvGridContainer>div img {
    display: block;
    max-width: 400px;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center center;
    transform: translateY(-1px);
    background-color: black;
}

@media screen and (max-width: 500px) {
    #msbv-layer-7 .msbvGridContainer>div img {
        max-width: 100%;
        width: 100%;
    }
}

#msbv-layer-7 .msbvGridContainer>div p {
    font-size: var(--var24px, 24px);
    text-align: center;
    margin: 0;
}

/* Layer 8 */
#msbv-layer-8 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--var72px, 72px) 0;
}
#msbv-layer-8 div {
    margin: auto 0;
    padding: 0 var(--var180px, 180px);
}

/* Layer 9 */
#msbv-layer-9 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--var72px, 72px) 0;
}
#msbv-layer-9>div {
    margin: auto 0;
    padding: 0 var(--var180px, 180px);
}
#msbv-layer-9 .mainContainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#msbv-layer-9 .mainContainer h2 {
    text-align: center;
    font-size: var(--var48px, 48px);
}
#msbv-layer-9 .mainContainer h3 {
    text-align: center;
    font-size: var(--var36px, 36px);
}
#msbv-layer-9 .mainContainer>div {
    margin: auto;
    margin-top: var(--var60px,60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#msbv-layer-9 .mainContainer>div>* {
    width: auto;
}

/* Layer 10 */
#msbv-layer-10 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--var72px, 72px) 0;
}

@media screen and (max-width: 1000px) {
    #msbv-layer-10 {
        padding: var(--var180px, 180px) 0;
    }
}

@media screen and (max-width: 500px) {
    #msbv-layer-10 {
        padding: var(--var336px, 336px) 0  var(--var180px, 180px) 0;
    }
}

#msbv-layer-10>div {
    margin: auto 0;
    padding: 0 var(--var180px, 180px);
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 500px) {
    #msbv-layer-10>div {
        padding: 0 var(--var24px, 24px);
    }
}

#msbv-layer-10>div>h2 {
    font-size: var(--var48px, 48px);
    text-align: center;
    font-weight: bold;
}
#msbv-layer-10>div>h3 {
    font-size: var(--var48px, 48px);
    text-align: center;
}
#msbv-layer-10>div>div:nth-child(3) {
    font-size: var(--var48px, 48px);
    text-align: center;
    margin: var(--var60px, 60px) auto var(--var80px, 80ox);
}
#msbv-layer-10>div>div.subtext {
    font-size: var(--var24px, 24px);
    text-align: center;
}
#msbv-layer-10>div #buttonHolder,
#msbv-layer-10>div#buttonHolder,
#msbv-layer-11>div#buttonHolder {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: var(--var24px, 24px);
    margin-bottom: var(--var60px, 60px);
}

@media screen and (max-width: 500px) {
    #msbv-layer-10>div #buttonHolder,
    #msbv-layer-10>div#buttonHolder,
    #msbv-layer-11>div#buttonHolder {
        flex-direction: column;
    }
}

#msbv-layer-10>div#buttonHolder{
  margin-bottom: 0;
  margin-top: 0;
}
#msbv-layer-11>div#buttonHolder {
  margin-top: 0;
  margin-bottom: auto !important;
}
.msbv-layer-11-5>div {
  margin-bottom: 0 !important;
}


/* Layer 11 */
#msbv-layer-11 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--var72px, 72px) 0;
}
#msbv-layer-11>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto 0;
    padding: 0 var(--var180px, 180px);
}
#msbv-layer-11>div h2 {
    text-align: center;
    font-size: var(--var48px, 48px);
    font-weight: bold;
    margin-bottom: var(--var48px, 48px);
}
#msbv-layer-11>div>div {
    text-align: center;
    font-size: var(--var36px, 36px);
}
#msbv-layer-11>div>.msbv-button {
    margin-top: var(--var60px, 60px);;
}

/* Layer imprint */
#msbv-layer-imprint {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: var(--var72px, 72px) 0;
}
@media screen and (max-width: 1000px) {
    #msbv-layer-imprint {
        padding: var(--var180px, 180px) 0;
    }
}

@media screen and (max-width: 500px) {
    #msbv-layer-imprint {
        padding: var(--var336px, 336px) 0  var(--var180px, 180px) 0;
    }
}
#msbv-layer-imprint>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto 0 0 0;
    padding: 0 7vw;
}
@media screen and (max-width: 500px) {
    #msbv-layer-imprint>div {
        padding: 0 var(--var24px, 24px);
    }
}
#msbv-layer-imprint>div h2 {
    text-align: left;
    font-size: var(--var48px, 48px);
    font-weight: bold;
    margin-bottom: var(--var48px, 48px);
}
#msbv-layer-imprint>div>div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2rem;
    font-size: var(--var24px, 24px);
    text-align: left;
    margin-bottom: 1vw;
}

@media screen and (max-width: 500px) {
    #msbv-layer-imprint>div>div {
        flex-direction: column;
    }
}

#msbv-layer-imprint>div>div>div {
    flex-basis: 100%;
    width: 100%;
}
#msbv-layer-imprint>div>div>div strong {
    font-family: 'Source Serif Pro', serif;
    font-weight: bold;
}
#msbv-layer-imprint>div>div>div img {
    display: block;
    height: 10vw;
    width: auto;
    margin-bottom: 1vw;
    
}
#msbv-layer-imprint>div>div>div img.ekm {
    filter: invert();
}
#msbv-layer-imprint>div>div>div img.skkg {
    height: 5vw;
    margin-top: 2vw;
}

/* form */
form {
    display:flex;
    flex-direction: column;
    gap: var(--var24px, 24px);
}
.msbvInputRadio {
    display: flex;
    flex-direction: row;
}
.msbvInputRadio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.msbvInputRadio label {
    display: flex;
    flex-direction: row;
    gap: var(--var24px, 24px);
    font-size: var(--var48px, 48px);
    line-height: 100%;
    cursor: pointer;
}
.msbvInputRadio label>div {
    display: block;
    border:var(--var2px, 2px) solid;
    width: var(--var48px, 48px);
    height: var(--var48px, 48px);
    border-radius: var(--var48px, 48px);
    box-sizing: border-box;
    flex-shrink: 0;
}
.msbvInputRadio label:hover > div {
    background-color: rgba( 255, 255, 255, 0.25 );
}
.msbvInputRadio input:checked+label>div {
    background-color: rgba( 255, 255, 255, 1 );
}

#progressContainer {
    position: absolute;
    width: 100vw;
    height: var(--var10px, 10px);
    margin: 0;
    padding:0 !important;
    justify-content: flex-start !important;
    bottom: 0;
}
#progressBar {
    width: 0%;
    height: 100%;
    background-color: #FFF;
    /* transition: width 0.25s linear; */
}
#msbv-video-player {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}
#msbv-video-player video {
    position: absolute;
    z-index: 0;
}

#close-button {
    z-index: 1;
    position: absolute;
    top: var(--var24px, 24px);
    right: var(--var24px, 24px);
}




/* DEBUG */
#debug {
    position: fixed;
    padding: 8rem 1rem;
    box-sizing: border-box;
    color: red;
    z-index: 1000;
    pointer-events: none;
    font-size: 12px;
    font-family: monospace;
    line-height: 150%;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
    align-items: flex-start;
}
#debug p{
    margin: 0;
    padding: 0 0.25rem;
    background: rgba(0, 0, 0, 0.75);
}



/* Main Video Player */
#main-video-player {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: #000;
    overflow: hidden;

}

#videoPlayPauseButton {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba( 255, 0, 255, 0.25 ); */

}



.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;

}
@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    2%, 4% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }
    6%, 10%, 14%, 18% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    8%, 12%, 16% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    20% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes tada {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    2%, 4% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    }
    6%, 10%, 14%, 18% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    }
    8%, 12%, 16% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    }
    20% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}