@font-face {
    font-family: 'Gt sectra';
    src: url('../fonts/GT-Sectra-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Gt sectra';
    src: url('../fonts/GT-Sectra-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Gt sectra fine';
    src: url('../fonts/GT-Sectra-Fine-Black-Italic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: block;
}

@font-face {
    font-family: 'Gt sectra';
    src: url('../fonts/GT-Sectra-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Gt sectra display';
    src: url('../fonts/GT-Sectra-Display-Bold-Italic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: block;
}

@font-face {
    font-family: 'Gt sectra fine book';
    src: url('../fonts/GT-Sectra-Fine-Book-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: block;
}

@font-face {
    font-family: 'Gt sectra display';
    src: url('../fonts/GT-Sectra-Display-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Gt sectra book';
    src: url('../fonts/GT-Sectra-Book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Gt sectra fine';
    src: url('../fonts/GT-Sectra-Fine-Bold-Italic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: block;
}

html {
    height: 100%;
}

body {
    overflow: hidden;
    height: 100%;
    background-color: #11014c;
    font-family: 'Gt sectra book', sans-serif;
    color: #878ff6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

}


.current-step-5 .inner {
    overflow: hidden;
}

/*
main{
    opacity: 0;
    transform: scale(.95);
}
main.visible{
        opacity: 1;
           transition: all 1000ms ease-in-out;
               transform: scale(1)
}
*/

.inner {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    perspective: 700px;
}

.bkg {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 500ms ease-in-out;
    z-index: 1;
}

.bkg.mobile {
    display: none;
}

.bkg line {
    stroke: #5f5fed;
    stroke-width: 1px;
    opacity: 0.25;
}

.wrapper {
    z-index: 3;
    position: relative;
    width: 100%;
    height: 58.3vw;
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: "a1 a2 a3 a4 a5 a6 a7 a8 a9 a10 a11 a12" "b1 b2 b3 b4 b5 b6 b7 b8 b9 b10 b11 b12" "c1 c2 c3 c4 c5 c6 c7 c8 c9 c10 c11 c12" "d1 d2 d3 d4 d5 d6 d7 d8 d9 d10 d11 d12" "e1 e2 e3 e4 e5 e6 e7 e8 e9 e10 e11 e12" "f1 f2 f3 f4 f5 f6 f7 f8 f9 f10 f11 f12" "g1 g2 g3 g4 g5 g6 g7 g8 g9 g10 g11 g12";
}

/* SVG */
.choice-bg {
    fill: #11014c;
}

/* GENERAL BLOCKS */

.logo-link {
    position: absolute !important;
    left: auto;
    top: 3.8vw;
    right: 3.5%;
    bottom: auto;
    cursor: pointer;
    z-index: 10;
}


.logo-reveal.logo-link {
    right: 2.5%;
}

.logo-link svg {
    width: 1.3vw;
}

.logo-reveal {
    display: none;
}

.logo-link svg {
    fill: #B3C3FF;
    transition: fill 400ms cubic-bezier(0.75, 0, 0.25, 1);
}

.logo-link:hover svg {
    fill: #fff000;
}

.step-number-container {
    grid-area: c12;
    grid-column-end: span 1;
    grid-row-end: span 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.464vw;
    line-height: 3.5vw;
}

.step-number {
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 350ms ease-in-out;
}


.flowers {
    grid-area: b8;
    grid-column-end: span 4;
    grid-row-end: span 5;

    background: linear-gradient(180deg, rgba(14, 1, 56, 1) 0%, rgba(41, 25, 138, 1) 100%);
    border: 1px solid #251874;

    border-top-left-radius: calc(100vw / 12);
    border-bottom-right-radius: calc(100vw / 12);
    position: relative;
}


.intro.homeFlower {
    grid-column-end: span 2;
    grid-row-end: span 2;
    z-index: 0 !important;
    position: absolute !important;

}


.homeFlower img {
    transform: scale(0);
    transition: all 700ms ease-in;
    width: 100%;
    height: 100%;
}

.homeFlower.hover img {
    transform: scale(1);
    transition: all 500ms ease-out;
}


.step-0-flower1 svg {
    /*animation:shineHome 9s -6s linear infinite;*/
}

.step-0-flower3 svg {
    animation: shineHome 9s -3s linear infinite;

}

.step-0-flower4 svg {
    animation: shineHome 9s 0s linear infinite;

}

.step-0-flower2 {
    grid-area: f1;
    grid-column-end: span 2;
    grid-row-end: span 2;
}

.step-0-flower2 svg {
    animation: shineHome 10s 0s linear infinite;
}

.deco-star {
    animation: spin 30s linear infinite;
    transform-origin: center center;
}


@keyframes shineHome {
    0% {
        opacity: 0
    }

    40% {
        opacity: 0
    }

    70% {
        opacity: 1
    }

    80% {
        opacity: 1
    }
    90% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}


/* CTA */

.previous-cta {
    grid-area: a1;
    grid-column-end: span 1;
    grid-row-end: span 1;
    transform: rotate(180deg);
}

.step-0-cta {
    grid-area: e10;
    grid-column-end: span 2;
    grid-row-end: span 2;
}


.step-4-cta {
    grid-area: e5;
    grid-column-end: span 2;
    grid-row-end: span 2;
}

.cta {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(95, 95, 237, 0.26);
    border-radius: 50%;
    background-color: #11014c;
    box-sizing: border-box;
    cursor: pointer;
}

.previous-cta {
    background-color: transparent;
}

.cta-bg {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff000;
    transform: scale(0);
    transition: all 800ms cubic-bezier(0.75, 0, 0.25, 1);
    pointer-events: none;
}

.cta svg {
    position: relative;
    z-index: 2;
    width: 20%;
    fill: #fff000;
    transition: all 800ms cubic-bezier(0.75, 0, 0.25, 1);
    pointer-events: none;
}

.cta:hover svg,
.cta.hovered svg,
.choice-1:hover svg,
.choice-2:hover svg,
.choice-3:hover svg {
    fill: black;
}

.cta-text {
    position: relative;
    z-index: 2;
    color: #fff000;
    transition: color 800ms cubic-bezier(0.75, 0, 0.25, 1);
    font-size: 1.464vw;
}

.cta:hover .cta-text,
.cta.hovered .cta-text,
.choice-1:hover .cta-text,
.choice-2:hover .cta-text,
.choice-3:hover .cta-text {
    color: black;
}

.cta:hover .cta-bg,
.cta.hovered .cta-bg,
.choice-1:hover .cta-bg,
.choice-2:hover .cta-bg,
.choice-3:hover .cta-bg {
    transform: scale(1);
}

.cta-invert .cta-bg {
    transform: scale(1);
}

.cta-invert:hover .cta-bg {
    transform: scale(0);
}

.cta-invert .cta-text {
    color: black;
}

.cta-invert:hover .cta-text {
    color: #fff000;
}


/* ETAPES */

body.current-step-0 .intro {
    opacity: 1;
    position: relative;
    z-index: 5;
    pointer-events: all;
}

body.current-step-1 .step-1 {
    opacity: 1;
    position: relative;
    z-index: 5;
    pointer-events: all;
}

body.current-step-1 .step-number.nb-1 {
    opacity: 1;
}

body.current-step-2 .step-2 {
    opacity: 1;
    position: relative;
    z-index: 5;
    pointer-events: all;
}

body.current-step-2 .step-number.nb-2 {
    opacity: 1;
}

body.current-step-3 .step-3 {
    opacity: 1;
    position: relative;
    z-index: 5;
    pointer-events: all;
}

body.current-step-3 .step-number.nb-3 {
    opacity: 1;
}

body.current-step-4 .step-4 {
    opacity: 1;
    position: relative;
    z-index: 5;
    pointer-events: all;
}

body.current-step-5 .reveal {
    opacity: 1;
    position: absolute;
    z-index: 5;
    pointer-events: all;
}

body.current-step-5 .step-5 {
    opacity: 1;
    position: relative;
    pointer-events: all;
}

body.current-step-5 .inner {
    background: rgb(22, 6, 86);
    background: linear-gradient(185deg, rgba(22, 6, 86, 1) 0%, rgba(42, 26, 139, 1) 100%);
}

body.current-step-5 .bkg {
    opacity: 0;
    pointer-events: none;
}

body.current-step-5 .wrapper {
    display: block;
    opacity: 1;
    pointer-events: none;
    width: inherit;
    height: inherit;
    overflow: hidden;
    z-index: 1000;
}

body.current-step-5 .sound-control {
    position: fixed;
    bottom: 2.5%;
    right: 1.5%;
}


body.current-step-5 .logo-reveal {
    display: block;
    z-index: 100;
}

body.current-step-5 .wrapper .logo-link {
    display: none;
}


.intro,
.step-1,
.step-2,
.step-3,
.step-4,
.step-5,
.reveal {
    opacity: 0;
    position: relative;
    z-index: 4;
    pointer-events: none;
    transition: opacity 1000ms ease, transform 1s 1s;
}


.step-0-cta {
    transition: opacity .600s ease;
}


.intro .h1-title {
    transform: translateY(5%);
    opacity: 0;
}

.intro .paragraph-default {
    transform: translateY(20%);
    opacity: 0;
}


.intro.step-0-cta {
    transform: scale(0);
    opacity: 1;
}

.current-step-0 .h1-title {
    transform: translateY(0);
    opacity: 1;
    transition: all 3000ms .5s ease-out;
}

.current-step-0 .paragraph-default {
    transform: translateY(0);
    opacity: 1;
    z-index: 6;
    transition: all 3000ms .75s ease-out;
}

.current-step-0 .step-0-cta {
    transform: scale(1);
    transition: all 1000ms 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 6;
}

.logo-link {
    opacity: 0;
}

.current-step-0 .logo-link {
    opacity: 1;
    transition: all 1000ms 1s ease-out;
}


.text-block {
    transform: translateY(5%);
}

.choice-1 {
    transform: translateX(-1vw);
}

.choice-2 {
    transform: translateX(-2vw);
}

.choice-3 {
    transform: translateX(-3vw);
}


.current-step-4 .step-4.text-block,
.current-step-1 .step-1.text-block,
.current-step-2 .step-2.text-block,
.current-step-3 .step-3.text-block {
    transition: opacity 2000ms .15s ease, transform 2000ms .15s ease;
    transform: translateY(0);
}

.current-step-1 .step-1.choice-1,
.current-step-2 .step-2.choice-1,
.current-step-3 .step-3.choice-1 {
    transition: opacity 2000ms .3s ease, transform 2000ms .3s ease;
    transform: translateX(0);
}

.current-step-1 .step-1.choice-2,
.current-step-2 .step-2.choice-2,
.current-step-3 .step-3.choice-2 {
    transition: opacity 2000ms .45s ease, transform 2000ms .45s ease;
    transform: translateX(0);
}

.current-step-1 .step-1.choice-3,
.current-step-2 .step-2.choice-3,
.current-step-3 .step-3.choice-3 {
    transition: opacity 2000ms .6s ease, transform 2000ms .6s ease;
    transform: translateX(0);
}


.reveal {
    transition: opacity 5s ease-in-out;
    overflow: hidden;
    z-index: 1;
}

.text-block {
    grid-area: a2;
    grid-column-end: span 5;
    grid-row-end: span 3;
    display: flex;
    align-items: center;
    padding: 0 0 0 3.5vw;
}


.step-0-text-block {
    grid-area: b2;
    grid-column-end: span 6;
    grid-row-end: span 4;
    padding: 2vw 0 0 3vw;
}

.step-0-text-block.vip {
    grid-column-end: span 9;
    grid-row-end: span 4;
}

.h1-title {
    margin-top: 0;
    margin-bottom: 3vw;
    font-family: 'Gt sectra book', sans-serif;
    font-size: 6.6vw;
    line-height: 7vw;
    font-weight: 400;
}

.italic-text {
    font-family: 'Gt sectra fine book', sans-serif;
    font-style: italic;
}

.paragraph-default {
    margin: 0;
    font-family: 'Gt sectra book', sans-serif;
    font-size: 1.9vw;
    line-height: 3vw;
}

.step-4.text-block {
    grid-area: c2;
    grid-column-end: span 5;
    grid-row-end: span 3;
    display: flex;
    align-items: flex-start;
}

.h2-title {
    margin-top: 0;
    font-family: 'Gt sectra book', sans-serif;
    font-size: 3.85vw;
    line-height: 4.3vw;
    font-weight: 400;
}

.choice-1 {
    grid-area: d2;
}

.choice-2 {
    grid-area: e2;
}

.choice-3 {
    grid-area: f2;
}

.choice-1,
.choice-2,
.choice-3 {
    grid-column-end: span 4;
    grid-row-end: span 1;
    position: relative;
    font-size: 1.611vw;
    line-height: 2vw;
    padding-left: 3.5vw;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.step-1-1-cta,
.step-2-1-cta,
.step-3-1-cta,
.step-1-3-cta,
.step-2-3-cta,
.step-3-3-cta,
.step-1-2-cta,
.step-2-2-cta,
.step-3-2-cta {
    position: absolute !important;
    top: 0;
    right: 0;
    height: 100%;
    width: calc(100% / 4);
}


/* REVEAL */

.reveal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.flowers-reveal-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.flower-wrapper-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
}

.flower-wrapper-2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 50%;
    text-align: right;
}

.flower-wrapper-3 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 50%;
    display: flex;
}

.flower-wrapper-4 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: flex-end;
}

.flower-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    margin-top: 2vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    transition: all 500ms ease-in-out;
    pointer-events: none;
}

.flower-title {
    font-size: 2.5vw;
    line-height: 3.3vw;
    color: #B3C3FF;
}

.flower-keyword {
    transition: all 800ms ease-in-out;
}

.flower-keyword.active {
    color: white;
}

.flower-keyword.hover {
    /*opacity: .75;*/
}


.reveal-text {
    pointer-events: auto;
    padding-bottom: 3vw;
}

.flower-text-cta {
    width: 10vw;
    height: 10vw;
    margin: 0 auto 0;
    background-color: #11014c73;
    opacity: 0;
    pointer-events: none;
    transform: scale(.8);
}

.flowers-reveal-cursor {
    pointer-events: none;
    position: fixed;
    z-index: 9;
}

.indicator-wrapper {
    pointer-events: none;
    position: fixed;
    z-index: 8;
}


.flowers-reveal-indication {
    width: 10vw;
    height: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1vw;
    transform: translate(-50%, -50%) scale(.5);
    border: 1px solid #B3C3FF70;
    color: rgba(255, 255, 255, .5);
    border-radius: 10vw;
    color: white;
    position: fixed;
    left: 50%;
    bottom: 5vh;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    line-height: 1.4vw;
    transition: all 2s ease;
}

.flowers-reveal-indication.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;

}

.cursor-content {
    width: 10vw;
    height: 10vw;
    background-color: rgb(255 255 255 / 80%);
    border-color: #B3C3FF;
    border-radius: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0);
    text-align: center;
    font-size: 1.1vw;
    transform: translate(-50%, -50%) scale(.5);
    opacity: 0;
    transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
    line-height: 1.4vw;
}


.cursor-content.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;

    color: #11014C;
    transition: transform 200ms ease-in-out, opacity 200ms ease-in-out, color 1s .2s ease;
}

.flowers-reveal-indication.visible:after,
.cursor-content:after {
    content: "";
    position: absolute;
    width: 10vw;
    height: 10vw;
    border-radius: 10vw;
    border: 1px solid #B3C3FF;
    opacity: .3;
    animation: zoom 1.5s ease-out infinite;
    pointer-events: none;
}


@keyframes zoom {
    0% {
        transform: scale(1);
        opacity: .5;
    }

    70% {
        transform: scale(1.66);
        opacity: 0;
    }

    100% {
        transform: scale(1.66);
        opacity: 0;
    }
}


.word-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.particle {
    width: 2px;
    height: 2px;
    border-radius: 2px;
    position: absolute;
    background: white;
    transition: all 1s ease-out;
}


.reveal-line {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
}


.reveal-line.visible {
    opacity: 1;
    pointer-events: auto;
    transition: transform 5s ease-in-out, opacity 5s ease-in-out;
    transform: translateY(0%);
}

.flower-text-cta.visible {
    opacity: 1;
    pointer-events: auto;
    transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;
    transform: scale(1);
}


.reveal-line:nth-child(1) {
    transition-delay: .5s;
}

.reveal-line:nth-child(2) {
    transition-delay: 1s;
}

.reveal-line:nth-child(3) {
    transition-delay: 1.5s;
}

.reveal-line:nth-child(4) {
    transition-delay: 2s;
}

.reveal-line:nth-child(5) {
    transition-delay: 2.5s;
}


.hidden {
    opacity: 0;
    pointer-events: none;
}

/* OVERLAY */
.overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    height: 100%;
    background: rgba(13, 0, 60, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 500ms ease-in-out;
}

.overlay-text-block {
    transition: all 600ms ease-in-out;
    z-index: 2;
    position: relative;
}

.overlay-contact {
    display: inline-block;
    position: relative;
    color: #878ff6;
    font-size: 1.318vw;
    line-height: 1.684vw;
    text-decoration: none;
    margin: 3.294vw 0;
    transition: color 350ms ease-in-out;
}

.overlay-contact:hover {
    color: #fff000;
}

.overlay-contact:before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #878ff6;
    transition: background-color 350ms ease-in-out;
}

.overlay-contact:hover:before {
    background-color: #fff000;
}

.overlay-links-container {
    display: flex;
    justify-content: space-between;
    border: 1px solid rgba(95, 95, 237, 0.26);
}

.overlay-link {
    cursor: pointer;
    font-size: 1.171vw;
    padding: 1.830vw 3.294vw;
    border: 1px solid transparent;
    transition: all 400ms cubic-bezier(0.75, 0, 0.25, 1);
    color: #878ff6;
    text-decoration: none;
    position: relative;
}

.share-link:before,
.overlay-link:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #fff000;
    transform: scaleY(0);
    transform-origin: top right;
    z-index: 0;
    transition: transform 400ms cubic-bezier(0.75, 0, 0.25, 1);
}

.share-link:hover:before,
.overlay-link:hover:before {
    transform: scaleY(1);
    transform-origin: bottom left;
}

.overlay-link > div {
    position: relative;
    z-index: 2;
}

.overlay-link:nth-child(2) {
    border-left: 1px solid rgba(95, 95, 237, 0.26);
    border-right: 1px solid rgba(95, 95, 237, 0.26);
}

.overlay-link:hover {
    color: black !important;
}

.overlay-cta {
    width: 11vw;
    height: 11vw;
    margin: 3vw auto 0;
    font-size: 1.171vw;
    line-height: 1.757vw;
    background: #11014c9c;
}


.overlay-cta .cta-text {
    font-size: 1.2vw;
    line-height: 1.6vw;
}

/* SHARE */
.share-content-block {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 600ms ease-in-out;
    z-index: 2;
    pointer-events: none;
}

.overlay-bkg {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.share-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 75vh;
    color: #B3C3FF;
    border: 1px solid rgba(95, 95, 237, 0.26);
}

.share-content-block:not(.hidden) .share-content {
    pointer-events: auto;
}

.share-cross {
    position: absolute;
    top: -6vh;
    left: 50%;
    transform: translateX(-50%) scale(1);
    width: 4vh;
    height: 4vh;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 400ms ease-in-out;
}

.share-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 1px;
    background-color: #B3C3FF;
    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: center center;
    transition: background 400ms ease-in-out;
}

.share-line:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.share-cross:hover {
    transform: translateX(-50%) rotate(-90deg);
}

.share-cross:hover .share-line {
    background-color: #fff000;
}

.share-img-container {
    width: 100%;
    display: flex;
}

.share-img {
    width: 100%;
    object-fit: cover;
}

.share-text-container {
    background: rgba(1, 0, 50, 0.71);
    padding: 4vh;
    text-align: left;
    border-top: 1px solid rgba(95, 95, 237, 0.26);
    border-bottom: 1px solid rgba(95, 95, 237, 0.26);
}

.share-text {
    font-size: 2.4vh;
    line-height: 2.8vh;
}

.share-hashtags {
    font-size: 2vh;
    line-height: 2.5vh;
}

.share-links-container {
    background: rgba(1, 0, 50, 0.71);
    display: flex;
    justify-content: space-between;
}

.share-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% / 3);
    padding: 2.5vh 0;
    text-decoration: none;
    font-size: 2vh;
    color: #B3C3FF;
    border: 1px solid transparent;
    transition: all 400ms cubic-bezier(0.75, 0, 0.25, 1);
    position: relative;
}

.share-link > * {
    position: relative;
    z-index: 2;
}


.share-link:nth-child(2) {
    border-left: 1px solid rgba(95, 95, 237, 0.26);
    border-right: 1px solid rgba(95, 95, 237, 0.26);
}

.share-link svg {
    fill: #B3C3FF;
    margin-right: 1.46vw;
    transition: all 400ms cubic-bezier(0.75, 0, 0.25, 1);
}

.share-link:hover {
    color: #000;

}

.share-link:hover svg {
    fill: #000;
}

/* SLIDER */
.slider-content-block {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    transition: all 600ms ease-in-out;
    background: rgb(17, 1, 76);
    background: linear-gradient(0deg, rgba(17, 1, 76, 1) 0%, rgba(32, 15, 114, 1) 100%);
}

.turn-phone {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(17, 1, 76, 1) 0%, rgba(32, 15, 114, 1) 100%);
    justify-content: center;
    align-items: center;
}

.turn-phone svg {
    fill: #B3C3FF;
    transform: rotate(270deg);
}

@media screen and (max-height: 500px) and (orientation: landscape) {
    .turn-phone {
        display: flex;
        z-index: 10;
        pointer-events: none;
    }
}

.slider-top-content {
    position: absolute;
    top: 15vh;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 1.611vw;
    line-height: 2.343vw;
    z-index: 2;
}

.slider-cross {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%) scale(1);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 400ms ease-in-out;
}

.slider-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 1px;
    background-color: #B3C3FF;
    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: center center;
}

.slider-line:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.slider-cross:hover {
    transform: translateX(-50%) scale(0.9);
}

.slider-intro {
    color: #B3C3FF;
    font-size: 1.611vw;
    line-height: 2.32vw;
}

.slider-flower {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.swiper-wrapper {
    display: flex;
}

.swiper-slide {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    border-left: 1px solid rgba(95, 95, 237, 0.26);
    box-sizing: border-box;
    padding-bottom: 8.7vh;
}

.swiper-slide:first-child {
    border: none;
}

.slide-img-container {
    height: 40vh;
    margin-bottom: 49px;
}

.slide-img-container img {
    height: 100%;
}

.slide-name {
    color: #B3C3FF;
    font-size: 1.611vw;
    line-height: 2.343vw;
}

.slide-keyword {
    margin-top: 0.732vw;
    font-size: 1.611vw;
    line-height: 2.343vw;
}


/* Width > 100vh */
@media screen and (min-aspect-ratio: 1000/583) {
    .wrapper {
        height: 100%;
        width: 171.5vh;
    }

    body.current-step-5 .wrapper {
        display: block;
        opacity: 1;
        pointer-events: none;
        width: inherit;
        height: inherit;
        overflow: hidden;
    }


    .logo-link {
        top: 6.5vh;
        right: 3.5%;
    }

    .logo-reveal.logo-link {
        right: 2.5%;
    }

    .logo-link svg {
        width: 2.23vh;
    }


    .step-number-container {
        font-size: 2.5vh;
        line-height: 6vh;
    }

    .h1-title {
        font-size: 11.3vh;
        line-height: 12vh;
        font-weight: 400;
        margin-bottom: 5vh;
    }

    .h2-title {
        font-size: 6.6vh;
        line-height: 7.37vh;
    }

    .paragraph-default {
        font-size: 3.25vh;
        line-height: 5vh;
    }

    .choice-1,
    .choice-2,
    .choice-3 {
        font-size: 2.75vh;
        padding-left: 6vh;
    }

    .cta-text {
        font-size: 2.5vh;
    }

    .text-block {
        padding: 0 0 0 6vh;
    }

}

/* Mobile */
/*@media screen and (max-width: 768px) {*/
@media screen and (max-aspect-ratio: 1/1) {
    body {
        overflow: initial;
    }

    .inner {
        justify-content: flex-start;
        align-items: flex-start;
    }

    .wrapper {
        width: 100%;
        height: 166vw;
        display: grid;
        grid-template-rows: repeat(10, 1fr);
        grid-template-columns: repeat(6, 1fr);
        grid-template-areas: "a1 a2 a3 a4 a5 a6" "b1 b2 b3 b4 b5 b6" "c1 c2 c3 c4 c5 c6" "d1 d2 d3 d4 d5 d6" "e1 e2 e3 e4 e5 e6" "f1 f2 f3 f4 f5 f6" "g1 g2 g3 g4 g5 g6" "h1 h2 h3 h4 h5 h6" "i1 i2 i3 i4 i5 i6" "j1 j2 j3 j4 j5 j6";

    }

    .bkg,
    .bkg-gradient {
        display: none;
    }

    .bkg.mobile {
        display: block;
        height: auto;
    }


    .logo-link {
        right: 5vw;
    }


    .step-number-container {
        display: none;
    }

    .h1-title {
        font-size: 11vw;
        line-height: 12vw;
        font-weight: 400;
        margin-bottom: 2vw;
    }

    .h2-title {
        font-size: 5.4vw;
        line-height: 7.5vw;
        width: 80%;
        margin: 0 auto;
        color: #B3C3FF;
    }

    .h2-title br {
        display: none;
    }

    .paragraph-default {
        font-size: 4.800vw;
        line-height: 7.467vw;
    }

    .choice-1,
    .choice-2,
    .choice-3 {
        font-size: 3.467vw;
        padding-left: 3.467vw;
    }

    .cta-text {
        font-size: 2.5vh;
    }

    .logo-link svg {
        width: 3vw;
    }

    /*  CONTENT  */
    .flowers {
        grid-area: a1;
        grid-column-end: span 6;
        grid-row-end: span 3;
        border-top-left-radius: 0;
        border-bottom-right-radius: 0;
        background: linear-gradient(180deg, rgba(18, 1, 76, 1) 0%, rgba(65, 48, 198, 1) 100%);
        border: none;
    }

    .previous-cta {
        grid-area: j1;
        grid-column-end: span 1;
        grid-row-end: span 1;
        /* transform: translate(50%, 50%) rotate(180deg); */
        background-color: #11014c;
    }


    .sound-control.visible {
        opacity: 1;
        pointer-events: auto;
        cursor: pointer;
        border: 1px solid #251874;
        border-radius: 20vw;
    }

    .step-0-text-block {
        grid-area: c1;
        grid-column-end: span 6;
        grid-row-end: span 5;
        padding: 0 11vw;
    }

    .step-0-cta {
        grid-area: h4;
        grid-column-end: span 2;
        grid-row-end: span 2;
    }


    .text-block,
    .step-4.text-block {
        grid-area: d1;
        grid-column-end: span 6;
        grid-row-end: span 2;
        display: flex;
        align-items: center;
        padding: 0 2vw;
        text-align: center;
    }

    .choice-1 {
        grid-area: f2;
    }

    .choice-2 {
        grid-area: g2;
    }

    .choice-3 {
        grid-area: h2;
    }

    .choice-1,
    .choice-2,
    .choice-3 {
        grid-column-end: span 4;
        grid-row-end: span 1;
        position: relative;
        font-size: 4vw;
        line-height: 5.6vw;
        padding-left: 0;
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .step-1-1-cta,
    .step-2-1-cta,
    .step-3-1-cta,
    .step-1-3-cta,
    .step-2-3-cta,
    .step-3-3-cta,
    .step-1-2-cta,
    .step-2-2-cta,
    .step-3-2-cta {
        display: none;
    }

    .step-4-cta {
        grid-area: f3;
        grid-column-end: span 2;
        grid-row-end: span 2;
    }

    /* REVEAL */
    .reveal {
        overflow: hidden;
    }

    .flowers-reveal-container {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .flower-wrapper-1,
    .flower-wrapper-2,
    .flower-wrapper-3,
    .flower-wrapper-4 {
        display: none;
    }


    .flower-title {
        font-size: 6vw;
        line-height: 8vw;
    }

    .flower-text-cta {
        width: 33.333vw;
        height: 33.333vw;
        margin-top: 3vw;
    }

    /* OVERLAY */
    .overlay-text-block {
        width: 75%;
    }

    .overlay-content {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 12;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        transition: all 500ms ease-in-out;
    }

    .overlay-contact {
        font-size: 3.467vw;
        line-height: 6.133vw;
        margin-top: 9.867vw;
    }

    .overlay-links-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border: 1px solid rgba(95, 95, 237, 0.26);
        margin-top: 9.867vw;
    }

    .overlay-link {
        font-size: 3.467vw;
        line-height: 6.133vw;
        padding: 15px 15px 17px;
        border: 1px solid transparent;
    }

    .overlay-link:nth-child(2) {
        border: 1px solid rgba(95, 95, 237, 0.26);
    }

    .overlay-link:hover {
        border-color: #fff000;
        color: #fff000;
    }

    .overlay-cta {
        width: 33.333vw;
        height: 33.333vw;
        margin: 37px auto 0;
    }

    .cta-text {
        font-size: 3.467vw;
        line-height: 6.133vw;
    }

    /* SHARE */
    .share-content-block {
        padding: 0 6%;
        box-sizing: border-box;
    }

    .share-content {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 75vh;
        color: #B3C3FF;
        border: 1px solid rgba(95, 95, 237, 0.26);
    }

    .share-text-container {
        padding: 35px 30px;
    }

    .share-text {
        font-size: 3.733vw;
        line-height: 6.400vw;
    }

    .share-hashtags,
    .share-link {
        font-size: 3.200vw;
        line-height: 5.867vw;
    }

    .share-link {
        padding: 15px;
    }

    .facebook svg {
        height: 11px;
    }

    .linkedin svg,
    .twitter svg {
        width: 11px;
    }

    .share-link svg {
        margin-right: 5px;
    }

    /* SLIDER */
    .slider-top-content {
        top: 15vh;
        font-size: 4.267vw;
        line-height: 6.933vw;
        width: 90%;
    }

    .slider-cross {
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%) scale(1);
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: transform 400ms ease-in-out;
    }

    .slider-intro {
        font-size: 4.267vw;
        line-height: 6.933vw;
    }

    .swiper-slide:first-child {
        border: none;
    }

    .slide-img-container {
        height: auto;
        margin-bottom: 30px;
    }

    .slide-img-container img {
        height: auto;
        width: 75%;
    }

    .slide-name {
        font-size: 4.267vw;
        line-height: 6.933vw;
    }

    .slide-keyword {
        font-size: 4.267vw;
        line-height: 6.933vw;
    }

    .current-step-4 .previous-cta {
        opacity: 1;
        z-index: 2;
        pointer-events: auto;

    }


    /******/
    .flower-text-container {
        width: 66%;
        margin-top: 10vw;
    }

    .reveal-line.visible {
        display: inline;
    }

    .logo-reveal.logo-link {
        right: 5vw;
    }


    .overlay-cta .cta-text {
        font-size: 3.2vw;
        line-height: 3.6vw;
    }


    .cursor-content,
    .flowers-reveal-indication {
        width: 30vw;
        height: 30vw;
        border-radius: 40vw;
        font-size: 3.2vw;
        line-height: 3.6vw;
    }


    .flowers-reveal-indication.visible:after,
    .cursor-content:after {
        width: 30vw;
        height: 30vw;
        border-radius: 40vw;
    }

    .cursor-content {
        transition: transform 50ms ease-in-out, opacity 50ms ease-in-out;
    }


    .paragraph-default br,
    .flower-title br {
        display: none;
    }


    .swiper-slide {
        border-left: none;
    }

    .stars {
        padding: 0 !important;
    }

    .stars svg {
        width: 100vw;
        height: 100vw;
    }

    .big-stars {
        transform: scale(2.8);
    }


    .step-0-flower1,
    .step-0-flower2,
    .step-0-flower3,
    .step-0-flower4 {
        grid-area: a1;
        display: none;
    }


}


.hfa1 {
    grid-area: a1;
}

.hfa2 {
    grid-area: a2;
}

.hfa3 {
    grid-area: a3;
}

.hfa4 {
    grid-area: a4;
}

.hfa5 {
    grid-area: a5;
}

.hfa6 {
    grid-area: a6;
}

.hfa7 {
    grid-area: a7;
}

.hfa8 {
    grid-area: a8;
}

.hfa9 {
    grid-area: a9;
}

.hfa10 {
    grid-area: a10;
}

.hfa11 {
    grid-area: a11;
}

.hfb1 {
    grid-area: b1;
}

.hfb2 {
    grid-area: b2;
}

.hfb3 {
    grid-area: b3;
}

.hfb4 {
    grid-area: b4;
}

.hfb5 {
    grid-area: b5;
}

.hfb6 {
    grid-area: b6;
}

.hfb7 {
    grid-area: b7;
}

.hfb8 {
    grid-area: b8;
}

.hfb9 {
    grid-area: b9;
}

.hfb10 {
    grid-area: b10;
}

.hfb11 {
    grid-area: b11;
}

.hfc1 {
    grid-area: c1;
}

.hfc2 {
    grid-area: c2;
}

.hfc3 {
    grid-area: c3;
}

.hfc4 {
    grid-area: c4;
}

.hfc5 {
    grid-area: c5;
}

.hfc6 {
    grid-area: c6;
}

.hfc7 {
    grid-area: c7;
}

.hfc8 {
    grid-area: c8;
}

.hfc9 {
    grid-area: c9;
}

.hfc10 {
    grid-area: c10;
}

.hfc11 {
    grid-area: c11;
}


.hfd1 {
    grid-area: d1;
}

.hfd2 {
    grid-area: d2;
}

.hfd3 {
    grid-area: d3;
}

.hfd4 {
    grid-area: d4;
}

.hfd5 {
    grid-area: d5;
}

.hfd6 {
    grid-area: d6;
}

.hfd7 {
    grid-area: d7;
}

.hfd8 {
    grid-area: d8;
}


.hfe1 {
    grid-area: e1;
}

.hfe2 {
    grid-area: e2;
}

.hfe3 {
    grid-area: e3;
}

.hfe4 {
    grid-area: e4;
}

.hfe5 {
    grid-area: e5;
}

.hfe6 {
    grid-area: e6;
}

.hfe7 {
    grid-area: e7;
}

.hfe8 {
    grid-area: e8;
}

.hff1 {
    grid-area: f1;
}

.hff2 {
    grid-area: f2;
}

.hff3 {
    grid-area: f3;
}

.hff4 {
    grid-area: f4;
}

.hff5 {
    grid-area: f5;
}

.hff6 {
    grid-area: f6;
}

.hff7 {
    grid-area: f7;
}

.hff8 {
    grid-area: f8;
}


@media screen and (max-aspect-ratio: 1/1) {

    .hfa6,
    .hfa7,
    .hfa8,
    .hfa9,
    .hfa10,
    .hfa11 {
        display: none;
    }

    .hfb6,
    .hfb7,
    .hfb8,
    .hfb9,
    .hfb10,
    .hfb11 {
        display: none;
    }


    .hfc6,
    .hfc7,
    .hfc8,
    .hfc9,
    .hfc10,
    .hfc11 {
        display: none;
    }

    .hfd6 {
        grid-area: g1;
    }

    .hfd7 {
        grid-area: g2;
    }

    .hfd8 {
        grid-area: h1;
    }

    .hfe6 {
        grid-area: h2;
    }

    .hfe7 {
        grid-area: i1;
    }

    .hfe8 {
        grid-area: i2;
    }


    .hff6,
    .hff7,
    .hff8 {
        display: none;
    }


}


/* ipad */

@media screen and (max-aspect-ratio: 1/1) and (min-width: 481px) {

    .inner {
        overflow: hidden;
        justify-content: center;
        align-items: center;

    }


    .wrapper,
    .bkg.mobile {
        height: 100vh;
        width: calc(100vh / 10 * 6);
        margin: 0 auto;
        top: auto;
        left: auto;
    }


    .h1-title {
        font-size: 6vh;
        line-height: 7vh;
        font-weight: 400;
        margin-bottom: 1vh;
    }

    .h2-title {
        font-size: 3.24vh;
        line-height: 4vh;
        width: 85%;
        margin: 0 auto;
        color: #B3C3FF;
    }

    .choice-1, .choice-2, .choice-3 {
        font-size: 2.4vh;
        line-height: 3.2vh;

    }

    .flower-text-container {
        width: 60%;
        margin-top: 8vh;
    }

    .flower-title {
        font-size: 3vh;
        line-height: 4vh;
    }

    .flower-text-cta {
        width: 14vh;
        height: 14vh;
        margin-top: 6vh;
    }

    .cta-text {
        font-size: 2vh;
        line-height: 4vh;
    }

    .cursor-content, .flowers-reveal-indication {
        width: 14vh;
        height: 14vh;
        border-radius: 40vh;
        font-size: 2vh;
        line-height: 2.5vh;
    }


    .flowers-reveal-indication.visible:after,
    .cursor-content:after {
        width: 14vh;
        height: 14vh;
        border-radius: 40vh;
    }

    .swiper-slide {
        padding-bottom: 11.7vh;
    }
    .slide-img-container img {
        width: 100%;
    }
}