html {
    scroll-behavior: smooth;
}

body {
    --page-padding: 16vw;
    background: black;
    color: white;
    position: relative;
    font-family: 'Open sans', sans-serif;
}

section {
    position: relative;
    padding: 8vh var(--page-padding);
    text-align: center;
}

/*----*/

.logo {
    width: 420px;
    margin-right: 30px;
}

.intro-left {
    display: flex;
}


/*********
 * GLOBAL
 */

h1 {
    font-size: 80px;
    line-height: 70px;
    font-weight: 700;
}

h2 {
    font-size: 36px;
    font-weight: 400;
}

p {
    margin-top: 1em;
    letter-spacing: .1em;
    line-height: 2.5em;
}

.opensans {
    font-family: 'Open Sans', sans-serif;
}

.arimo {
    font-family: 'Arimo', sans-serif;
}

.uc {
    text-transform: uppercase;
}

.fs-14 {
    font-size: 14px;
}

.fs-24 {
    font-size: 24px;
}

.fs-32 {
    font-size: min(7vw, 32px);
}

.ls {
    display: block;
    font-weight: 300;
    letter-spacing: 0.3em;
}

.smaller {
    font-size: 0.8em;
}

.semibold {
    font-weight: 600;
}

.cta {
    --letter-spacing: 0.4em;
    --right-padding: 1em;
    position: relative;
    display: inline-block;
    appearance: none;
    background: none;
    color: white;
    border: 2px solid white;
    padding: 0.6em var(--right-padding) 0.5em calc(var(--right-padding) + var(--letter-spacing));
    font-size: 12px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing);
    cursor: pointer;
    margin-top: 20px;

    width: fit-content;
    margin: 0 auto;
    overflow: hidden;
}

.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: white;
    transition: transform 0.2s ease-in 0s;
    transform: translateY(100%);
    mix-blend-mode: difference;
}

.cta:hover::before {
    transform: translateY(0%);
}



/***************
 * _SECTIONS
 */


.underwater-ruler {
    position: absolute;
    top: 0;
    right: 1.5vw;
    bottom: 0;
    width: 2vw;
    --ruler-color: white;
    --ruler-spacings: 9px;
    --centimeters: repeating-linear-gradient(180deg, var(--ruler-color) 0 1px, rgba(0, 0, 0, 0) 1px calc(var(--ruler-spacings) * 5));
    --millimeters-limit: linear-gradient(to right, black 50%, rgba(0, 0, 0, 0) 50%);
    --millimeters: repeating-linear-gradient(180deg, var(--ruler-color) 0 1px, transparent 1px var(--ruler-spacings));
    background: var(--centimeters), var(--millimeters-limit), var(--millimeters);
    mix-blend-mode: screen;
    opacity: 0.25;
}

.underwater-ruler-new {
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    width: 32px;
    z-index: 100;
    background-size: contain;
    opacity: .5;

    background-image: url(../img/ruler-right.svg);
    background-repeat: repeat-y;

}

.underwater-ruler-new-left {
    position: absolute;
    top: 0;
    left: 20px;
    bottom: 0;
    width: 32px;
    z-index: 100;
    background-size: contain;
    opacity: .5;

    background-image: url(../img/ruler.svg);
    background-repeat: repeat-y;

}

.top-rulers {
    width: 100%;
    height: 940px;
    opacity: 0;
    transition: opacity .5s;
}


.under-anim .top-rulers {
    opacity: 1;
}


.underwater-ruler.left {
    right: auto;
    left: 1.5vw;
    --millimeters-limit: linear-gradient(to left, black 50%, rgba(0, 0, 0, 0) 50%);
}

.section-visual {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

.section-form {
    text-align: center;
}

#participer {
    scroll-margin-top: 80px;
}

.countdown {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.countdown-title {
    font-family: 'Open Sans';
    font-size: 14px;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.9em;
    text-align: center;
}

.countdown .days,
.countdown .hours,
.countdown .minutes,
.countdown .seconds {
    position: relative;
    font-size: max(90px, 8vw);
    font-weight: 800;
    text-shadow: 0px 0px 36px white;
    min-width: 170px;
}

.countdown .days::after,
.countdown .hours::after,
.countdown .minutes::after,
.countdown .seconds::after {
    position: absolute;
    top: 50%;
    right: 50%;
    font-size: 14px;
    text-transform: uppercase;
    color: black;
    letter-spacing: 0.8em;
    margin-right: -0.5em;
    white-space: nowrap;
    transform: translate(50%, -50%);
}

.countdown .days::after {
    content: "jours";
}

.countdown .hours::after {
    content: "heures";
}

.countdown .minutes::after {
    content: "minutes";
}

.countdown .seconds::after {
    content: "secondes";
}

.section-green-blockchain {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;

}


.green-wrapper {
    flex: 1 1 42ch;
    padding: 50px;
}

.video-sticky-container {
    height: 200vh;
}

.video-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.apnea-video {
    width: 100%;
    cursor: pointer;
}




/*****************
 * RAYLIGHTS
 */
.under-water-bg {
    position: relative;
    background-color: black;
    /* background: linear-gradient(to bottom, #000000 100vh, #2e3f51, black);*/
    z-index: 11;
    padding-top: 20vw;
    padding-bottom: 120vh;
    pointer-events: none;

    opacity: var(--opacity);
}

.circles-viewport {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 110vh;
    overflow: hidden;
    z-index: 100;
    opacity: 0;
    transition: opacity .5s;
}

.under-anim .circles-viewport {
    opacity: .25;
}

.circles-viewport::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #0E2024 20%, transparent 100%);
}

.circle {
    --white: #ccFFFF;
    position: absolute;
    bottom: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    
    background: url("../img/raylights-blue.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    opacity: 0;
    transform-origin: top center;
    animation: raylight-anim 4s ease 0s normal both infinite running;
}

.circle-2 {
    animation: raylight-anim 4s ease 1s normal both infinite running;
}

.circle-3 {
    background-image: url("../img/raylights-blue-2.png");
    animation: raylight-anim 4s ease 2s reverse both infinite running;
}

.circle-4 {
    animation: raylight-anim 4s ease 3s normal both infinite running;
}

.circle-5 {
    --white: #00ffe2;
    animation: raylight-anim-bg 4s ease 0s alternate both infinite running;
}



@keyframes raylight-anim {
    0% {
        opacity: 0;
        transform: rotateZ(0);
    }

    50% {
        opacity: 0.35;
    }

    100% {
        opacity: 0;
        transform: rotateZ(-10deg);
    }
}

@keyframes raylight-anim-bg {
    0% {
        opacity: 0.15;
        transform: rotateZ(17deg);
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0.15;
        transform: rotateZ(-10deg);
    }
}
.circles-viewport.rays::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(to bottom, #4d7474, transparent, #0D1F23);
}


.circle {
    animation-play-state: paused;
}

.under-anim .circle {
    animation-play-state: running;
}

.main-content {
    height: 300vh;
    background: linear-gradient(to bottom, #000000, #2e3f51, black);
}


/* -------- */

.placeholder {
    object-fit: contain;
    max-width: 100%;
    padding: 30px;
}


#canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
}


.text-content {
    position: relative;
    z-index: 10;
    max-width: 720px;
    display: flex;
    align-items: center;
    text-align: justify;
    opacity: 0;
    transform: scale(.9);
    margin-bottom: 10vh;
}


.text-content.visible {
    opacity: 1;
    transform: scale(1);
    transition: all 4s ease;
}

.section-intro {
    height: 100vh;
    background: #0f2628;
    display: flex;
    justify-content: center;
    align-items: center;
}


.intro-right {
    padding-left: 60px;
    letter-spacing: .08rem;
    border-left: 2px solid white;
    margin-left: 40px;
    text-shadow: #4c6383 0 0 6px, #4c6383 0 0 60px;
}


.underwater {
    position: relative;
    z-index: 100;
}

.under-water-bkg {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.under-water-gradient {
    position: relative;
}

.section-video {
    padding: 8vh 0 0;
    pointer-events: auto;
}


.preloader {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #0f2628;
    z-index: 1000;
    pointer-events: none;
}

.preloader.hide {
    opacity: 0;
    transition: 1s;
}

.scroll-down {
    position: fixed;
    bottom: 0vw;
    z-index: 100;
    width: 3vw;
    opacity: 1;

    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transition: opacity 1s;
}

.scroll-down.hide {
    animation-play-state: paused;
    opacity: 0;
}


@keyframes floating {
    from {
        transform: translate(0, 0px);
    }

    65% {
        transform: translate(0, -10px);
    }

    to {
        transform: translate(0, -0px);
    }
}


.video-wrapper {
    position: relative;
}

.video-volume-control {
    position: absolute;
    inset: auto auto 1cm;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
}

.no-volume-icon,
.volume-icon {
    width: 3vw;
    height: 3vw;
    opacity: 0;
    transition: all .4s;
}

.no-volume-icon {
    margin-bottom: -0.2vw;
}

.video-wrapper:hover .no-volume-icon,
.video-wrapper:hover .volume-icon {
    opacity: .7;
}

.no-volume-icon.off,
.volume-icon.off {
    display: none;
}



/* Mobile adjustments ----- */
@media screen and (max-width: 1025px) {

    body {
        --page-padding: 12vw;
    }

    .section-green-blockchain {
        flex-direction: column;
    }
}

@media screen and (max-width: 769px) {
    .countdown {
        width: 50vw;
        margin: 10vw auto 0;
    }
}

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


.circles-viewport {
    width: 200vw;
    left: -50vw;
    height: 70vh;
    transition: opacity .5s;
}


.sendinForm{
    width: 90vw;
    height: 710px;
}

    .logo {
        width: 60vw;
    }


.underwater-ruler-new-left {
    left: 0;
}

.underwater-ruler-new {
    right: 0;
}


    /* intro adjustment */
    .intro-left {
        flex-direction: column;
    }

    .section-intro .intro-left {
        width: 100%;
    }

    .section-intro h2 {
        font-size: clamp(14px, 8vw, 36px);
        line-height: 1em;
    }

    .section-intro .intro-right {
        padding-top: min(3vh, 60px);
        border-top: 2px solid white;
        margin-top: min(2vh, 40px);
        padding-left: 0;
        border-left: 0;
        margin-left: 0;
    }



    /* green wrapper adjustment */
    .green-wrapper {
        padding: 0 0 50px;
    }
}





/* Album cover animation ----------*/
.cover-png {
    width: auto;
    height: 100%;
}

.cover-png.turbulence {
    position: absolute;
    filter: url(#turbulence);
}

.album-cover-svg {
    --size: 200px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--size);
    height: var(--size);
    margin: max(50px, 8vw) auto;

    --time: 4000ms;
}

.cover-img-container {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* transition: transform 1s ease 4s, opacity 1s ease 4s; */

    /* opacity: 0;
    transform: scale(0.95); */
    animation: apnea-png var(--time) ease 0s 1 both paused;
}
.draw .cover-img-container {
    animation-play-state: running;
}
@keyframes apnea-png {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    80% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(0.90);
    }
}
.apnea-svg {
    width: auto;
    height: 100%;
    filter: drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.7));
    
    animation: apnea-svg 4s ease 0s 1 both paused;
    /* transition: transform 1s ease 4s; */

    /* transform: scale(0.95); */
}
.draw .apnea-svg {
    /* transform: scale(1); */
    animation-play-state: running;
}

@keyframes apnea-svg {
    0% {
        transform: scale(0.95);
    }

    80% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}
/* animation made with vivus-instant */
.AKjesRDk_0 {
    stroke-dasharray: 196 198;
    stroke-dashoffset: 197;
}

.AKjesRDk_0,
.AKjesRDk_1,
.AKjesRDk_2,
.AKjesRDk_3,
.AKjesRDk_4,
.AKjesRDk_5,
.AKjesRDk_6 {
    --ease: cubic-bezier(0.37, 0.39, 0.68, 0.99);
    animation-play-state: paused, paused;
}

.draw .AKjesRDk_0,
.draw .AKjesRDk_1,
.draw .AKjesRDk_2,
.draw .AKjesRDk_3,
.draw .AKjesRDk_4,
.draw .AKjesRDk_5,
.draw .AKjesRDk_6 {
    --ease: cubic-bezier(0.37, 0.39, 0.68, 0.99);
    --time: 3000ms;
    animation-play-state: running, running;
}

.AKjesRDk_0 {
    animation: AKjesRDk_draw_0 var(--time) var(--ease) 0ms 1 both paused, AKjesRDk_fade var(--time) linear 0ms 1 both paused;
}

.AKjesRDk_1 {
    stroke-dasharray: 280 282;
    stroke-dashoffset: 281;
    animation: AKjesRDk_draw_1 var(--time) var(--ease) 0ms 1 both paused, AKjesRDk_fade var(--time) linear 0ms 1 both paused;
}

.AKjesRDk_2 {
    stroke-dasharray: 196 198;
    stroke-dashoffset: 197;
    animation: AKjesRDk_draw_2 var(--time) var(--ease) 0ms 1 both paused, AKjesRDk_fade var(--time) linear 0ms 1 both paused;
}

.AKjesRDk_3 {
    stroke-dasharray: 608 610;
    stroke-dashoffset: 609;
    animation: AKjesRDk_draw_3 var(--time) var(--ease) 0ms 1 both paused, AKjesRDk_fade var(--time) linear 0ms 1 both paused;
}

.AKjesRDk_4 {
    stroke-dasharray: 597 599;
    stroke-dashoffset: 598;
    animation: AKjesRDk_draw_4 var(--time) var(--ease) 0ms 1 both paused, AKjesRDk_fade var(--time) linear 0ms 1 both paused;
}

.AKjesRDk_5 {
    stroke-dasharray: 602 604;
    stroke-dashoffset: 603;
    animation: AKjesRDk_draw_5 var(--time) var(--ease) 0ms 1 both paused, AKjesRDk_fade var(--time) linear 0ms 1 both paused;
}

.AKjesRDk_6 {
    stroke-dasharray: 483 485;
    stroke-dashoffset: 484;
    animation: AKjesRDk_draw_6 var(--time) var(--ease) 0ms 1 both paused;
}

@keyframes AKjesRDk_draw {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes AKjesRDk_fade {
    0% {
        stroke: rgb(30, 30, 30);
    }

    94.20289855072464% {
        stroke: rgb(155, 155, 155);
    }

    100% {
        stroke: rgb(255, 255, 255);
    }
}

@keyframes AKjesRDk_draw_0 {
    0% {
        stroke-dashoffset: 197;
    }

    86.95652173913044% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes AKjesRDk_draw_1 {
    0% {
        stroke-dashoffset: 281;
    }

    86.95652173913044% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes AKjesRDk_draw_2 {
    0% {
        stroke-dashoffset: 197;
    }

    86.95652173913044% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes AKjesRDk_draw_3 {
    0% {
        stroke-dashoffset: 609;
    }

    86.95652173913044% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes AKjesRDk_draw_4 {
    0% {
        stroke-dashoffset: 598;
    }

    86.95652173913044% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes AKjesRDk_draw_5 {
    0% {
        stroke-dashoffset: 603;
    }

    86.95652173913044% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes AKjesRDk_draw_6 {
    0% {
        stroke-dashoffset: 484;
    }

    86.95652173913044% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 0;
    }
}





.real-content {
    padding-bottom: 20vh;
    background: linear-gradient(rgba(0, 0, 0, 0) 40%, black 90%);
    pointer-events: auto;
}


/**********/

/* parallaxing particles ------ */
body {
    overflow-x: hidden;
}

.parallax-container {
    transform-origin: center top;
    transform: scaleY(calc(1 - var(--scale)));
    position: absolute;
    inset: 0;
    --scale: 0.4;
}

.parallax-wrapper {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: visible;
    transform-origin: center top;
    transform: scaleY(calc(1 / (1 - var(--scale))));
}

.parallaxed.particles {
    display: block;
    position: absolute;
    inset: 0;
    overflow: visible;
    width: 100%;
    height: calc(150% - 50vh);
}

.parallaxed .particle {
    background: red;
    width: 30px;
    height: 31px;

    top: 185%;
}








/* Particles -------- */
.particles {
    position: absolute;
    top: 50vh;
    right: 0;
    width: 100%;
    height: calc(100% - 50vh);
    overflow: hidden;
    opacity: .8;
}

.particle {
    position: absolute;
    left: 0;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    border-radius: 44% 56% 82% 18% / 81% 39% 61% 19%;
    animation-play-state: paused;
}

.under-anim .particle {
    animation-play-state: running;
}

.particle:nth-child(1) {
    top: 89%;
    height: 8px;
    width: 8px;
    background-color: #e0e9c9;
    animation-name: particle-animation-1;
    animation-delay: -0.2s;
    transform: translate3d(7vw, 29vh, 71px);

}

@keyframes particle-animation-1 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.33;
    }

    90% {
        opacity: 0.16;
    }

    100% {
        transform: translate3d(16vw, 27vh, -23px);
        opacity: 0;
    }
}

.particle:nth-child(2) {
    top: 13%;
    height: 6px;
    width: 6px;
    background-color: #bdd8c2;
    animation-name: particle-animation-2;
    animation-delay: -0.4s;
    transform: translate3d(82vw, 2vh, 1px);

}

@keyframes particle-animation-2 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.1;
    }

    90% {
        opacity: 0.12;
    }

    100% {
        transform: translate3d(56vw, 14vh, 34px);
        opacity: 0;
    }
}

.particle:nth-child(3) {
    top: 33%;
    height: 8px;
    width: 8px;
    background-color: #f5c0b8;
    animation-name: particle-animation-3;
    animation-delay: -0.6s;
    transform: translate3d(42vw, 44vh, 28px);

}

@keyframes particle-animation-3 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.35;
    }

    90% {
        opacity: 0.36;
    }

    100% {
        transform: translate3d(46vw, 62vh, 29px);
        opacity: 0;
    }
}

.particle:nth-child(4) {
    top: 20%;
    height: 3px;
    width: 3px;
    background-color: #bcb8e1;
    animation-name: particle-animation-4;
    animation-delay: -0.8s;
    transform: translate3d(25vw, 3vh, 43px);

}

@keyframes particle-animation-4 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.39;
    }

    90% {
        opacity: 0.19;
    }

    100% {
        transform: translate3d(49vw, 80vh, 29px);
        opacity: 0;
    }
}

.particle:nth-child(5) {
    top: 26%;
    height: 3px;
    width: 3px;
    background-color: #c4dbf7;
    animation-name: particle-animation-5;
    animation-delay: -1s;
    transform: translate3d(60vw, 36vh, 61px);

}

@keyframes particle-animation-5 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.36;
    }

    90% {
        opacity: 0.08;
    }

    100% {
        transform: translate3d(2vw, 41vh, -28px);
        opacity: 0;
    }
}

.particle:nth-child(6) {
    top: 50%;
    height: 10px;
    width: 10px;
    background-color: #eee3ee;
    animation-name: particle-animation-6;
    animation-delay: -1.2s;
    transform: translate3d(61vw, 90vh, 22px);

}

@keyframes particle-animation-6 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.2;
    }

    90% {
        opacity: 0.35;
    }

    100% {
        transform: translate3d(3vw, 83vh, -7px);
        opacity: 0;
    }
}

.particle:nth-child(7) {
    top: 36%;
    height: 4px;
    width: 4px;
    background-color: #e4b7f4;
    animation-name: particle-animation-7;
    animation-delay: -1.4s;
    transform: translate3d(24vw, 83vh, 96px);

}

@keyframes particle-animation-7 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.07;
    }

    90% {
        opacity: 0.34;
    }

    100% {
        transform: translate3d(4vw, 84vh, 10px);
        opacity: 0;
    }
}

.particle:nth-child(8) {
    top: 23%;
    height: 7px;
    width: 7px;
    background-color: #f5dfd6;
    animation-name: particle-animation-8;
    animation-delay: -1.6s;
    transform: translate3d(71vw, 48vh, 95px);

}

@keyframes particle-animation-8 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.03;
    }

    90% {
        opacity: 0.34;
    }

    100% {
        transform: translate3d(20vw, 51vh, 18px);
        opacity: 0;
    }
}

.particle:nth-child(9) {
    top: 54%;
    height: 8px;
    width: 8px;
    background-color: #e0bdee;
    animation-name: particle-animation-9;
    animation-delay: -1.8s;
    transform: translate3d(38vw, 25vh, 52px);

}

@keyframes particle-animation-9 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.16;
    }

    90% {
        opacity: 0.34;
    }

    100% {
        transform: translate3d(87vw, 38vh, 34px);
        opacity: 0;
    }
}

.particle:nth-child(10) {
    top: 9%;
    height: 5px;
    width: 5px;
    background-color: #d6c9f9;
    animation-name: particle-animation-10;
    animation-delay: -2s;
    transform: translate3d(30vw, 11vh, 37px);

}

@keyframes particle-animation-10 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.16;
    }

    90% {
        opacity: 0.24;
    }

    100% {
        transform: translate3d(35vw, 81vh, -19px);
        opacity: 0;
    }
}

.particle:nth-child(11) {
    top: 54%;
    height: 3px;
    width: 3px;
    background-color: #e1e2bb;
    animation-name: particle-animation-11;
    animation-delay: -2.2s;
    transform: translate3d(11vw, 39vh, 16px);

}

@keyframes particle-animation-11 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.39;
    }

    90% {
        opacity: 0.35;
    }

    100% {
        transform: translate3d(49vw, 85vh, -5px);
        opacity: 0;
    }
}

.particle:nth-child(12) {
    top: 25%;
    height: 10px;
    width: 10px;
    background-color: #d1bad7;
    animation-name: particle-animation-12;
    animation-delay: -2.4s;
    transform: translate3d(22vw, 81vh, 95px);

}

@keyframes particle-animation-12 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.06;
    }

    90% {
        opacity: 0.08;
    }

    100% {
        transform: translate3d(9vw, 90vh, -43px);
        opacity: 0;
    }
}

.particle:nth-child(13) {
    top: 76%;
    height: 7px;
    width: 7px;
    background-color: #edede9;
    animation-name: particle-animation-13;
    animation-delay: -2.6s;
    transform: translate3d(22vw, 20vh, 58px);

}

@keyframes particle-animation-13 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.19;
    }

    90% {
        opacity: 0.12;
    }

    100% {
        transform: translate3d(78vw, 50vh, -43px);
        opacity: 0;
    }
}

.particle:nth-child(14) {
    top: 65%;
    height: 5px;
    width: 5px;
    background-color: #e6cbc4;
    animation-name: particle-animation-14;
    animation-delay: -2.8s;
    transform: translate3d(59vw, 22vh, 86px);

}

@keyframes particle-animation-14 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.35;
    }

    90% {
        opacity: 0.23;
    }

    100% {
        transform: translate3d(43vw, 80vh, -11px);
        opacity: 0;
    }
}

.particle:nth-child(15) {
    top: 20%;
    height: 6px;
    width: 6px;
    background-color: #ffefd2;
    animation-name: particle-animation-15;
    animation-delay: -3s;
    transform: translate3d(47vw, 7vh, 16px);

}

@keyframes particle-animation-15 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.15;
    }

    90% {
        opacity: 0.3;
    }

    100% {
        transform: translate3d(87vw, 49vh, -33px);
        opacity: 0;
    }
}

.particle:nth-child(16) {
    top: 33%;
    height: 3px;
    width: 3px;
    background-color: #ebcde8;
    animation-name: particle-animation-16;
    animation-delay: -3.2s;
    transform: translate3d(63vw, 68vh, 86px);

}

@keyframes particle-animation-16 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.12;
    }

    90% {
        opacity: 0.27;
    }

    100% {
        transform: translate3d(58vw, 77vh, 20px);
        opacity: 0;
    }
}

.particle:nth-child(17) {
    top: 40%;
    height: 3px;
    width: 3px;
    background-color: #f8feb8;
    animation-name: particle-animation-17;
    animation-delay: -3.4s;
    transform: translate3d(12vw, 74vh, 61px);

}

@keyframes particle-animation-17 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.36;
    }

    90% {
        opacity: 0.26;
    }

    100% {
        transform: translate3d(26vw, 18vh, 43px);
        opacity: 0;
    }
}

.particle:nth-child(18) {
    top: 54%;
    height: 3px;
    width: 3px;
    background-color: #eafdff;
    animation-name: particle-animation-18;
    animation-delay: -3.6s;
    transform: translate3d(75vw, 86vh, 30px);

}

@keyframes particle-animation-18 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.28;
    }

    90% {
        opacity: 0.31;
    }

    100% {
        transform: translate3d(16vw, 10vh, -13px);
        opacity: 0;
    }
}

.particle:nth-child(19) {
    top: 48%;
    height: 9px;
    width: 9px;
    background-color: #d3f3d5;
    animation-name: particle-animation-19;
    animation-delay: -3.8s;
    transform: translate3d(90vw, 44vh, 29px);

}

@keyframes particle-animation-19 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.31;
    }

    90% {
        opacity: 0.15;
    }

    100% {
        transform: translate3d(40vw, 85vh, -16px);
        opacity: 0;
    }
}

.particle:nth-child(20) {
    top: 8%;
    height: 3px;
    width: 3px;
    background-color: #c7cdd2;
    animation-name: particle-animation-20;
    animation-delay: -4s;
    transform: translate3d(71vw, 10vh, 93px);

}

@keyframes particle-animation-20 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.15;
    }

    90% {
        opacity: 0.17;
    }

    100% {
        transform: translate3d(48vw, 39vh, 13px);
        opacity: 0;
    }
}

.particle:nth-child(21) {
    top: 71%;
    height: 4px;
    width: 4px;
    background-color: #bbf2eb;
    animation-name: particle-animation-21;
    animation-delay: -4.2s;
    transform: translate3d(48vw, 10vh, 34px);

}

@keyframes particle-animation-21 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.28;
    }

    90% {
        opacity: 0.4;
    }

    100% {
        transform: translate3d(53vw, 39vh, 5px);
        opacity: 0;
    }
}

.particle:nth-child(22) {
    top: 66%;
    height: 10px;
    width: 10px;
    background-color: #cfe9ef;
    animation-name: particle-animation-22;
    animation-delay: -4.4s;
    transform: translate3d(38vw, 54vh, 74px);

}

@keyframes particle-animation-22 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.03;
    }

    90% {
        opacity: 0.14;
    }

    100% {
        transform: translate3d(70vw, 68vh, -35px);
        opacity: 0;
    }
}

.particle:nth-child(23) {
    top: 3%;
    height: 3px;
    width: 3px;
    background-color: #c0d3d6;
    animation-name: particle-animation-23;
    animation-delay: -4.6s;
    transform: translate3d(36vw, 35vh, 8px);

}

@keyframes particle-animation-23 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.2;
    }

    90% {
        opacity: 0.14;
    }

    100% {
        transform: translate3d(78vw, 65vh, -35px);
        opacity: 0;
    }
}

.particle:nth-child(24) {
    top: 51%;
    height: 7px;
    width: 7px;
    background-color: #ddedfd;
    animation-name: particle-animation-24;
    animation-delay: -4.8s;
    transform: translate3d(38vw, 33vh, 58px);

}

@keyframes particle-animation-24 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.12;
    }

    90% {
        opacity: 0.26;
    }

    100% {
        transform: translate3d(19vw, 88vh, -26px);
        opacity: 0;
    }
}

.particle:nth-child(25) {
    top: 80%;
    height: 10px;
    width: 10px;
    background-color: #d4eeda;
    animation-name: particle-animation-25;
    animation-delay: -5s;
    transform: translate3d(64vw, 73vh, 68px);

}

@keyframes particle-animation-25 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.23;
    }

    90% {
        opacity: 0.21;
    }

    100% {
        transform: translate3d(50vw, 66vh, -41px);
        opacity: 0;
    }
}

.particle:nth-child(26) {
    top: 31%;
    height: 10px;
    width: 10px;
    background-color: #e3b8c8;
    animation-name: particle-animation-26;
    animation-delay: -5.2s;
    transform: translate3d(43vw, 9vh, 35px);

}

@keyframes particle-animation-26 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.18;
    }

    90% {
        opacity: 0.05;
    }

    100% {
        transform: translate3d(19vw, 6vh, 20px);
        opacity: 0;
    }
}

.particle:nth-child(27) {
    top: 50%;
    height: 3px;
    width: 3px;
    background-color: #fbe4b8;
    animation-name: particle-animation-27;
    animation-delay: -5.4s;
    transform: translate3d(5vw, 63vh, 14px);

}

@keyframes particle-animation-27 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.18;
    }

    90% {
        opacity: 0.16;
    }

    100% {
        transform: translate3d(10vw, 46vh, -22px);
        opacity: 0;
    }
}

.particle:nth-child(28) {
    top: 22%;
    height: 4px;
    width: 4px;
    background-color: #fafac9;
    animation-name: particle-animation-28;
    animation-delay: -5.6s;
    transform: translate3d(19vw, 71vh, 27px);

}

@keyframes particle-animation-28 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.07;
    }

    90% {
        opacity: 0.34;
    }

    100% {
        transform: translate3d(68vw, 16vh, 36px);
        opacity: 0;
    }
}

.particle:nth-child(29) {
    top: 73%;
    height: 7px;
    width: 7px;
    background-color: #f8fcfd;
    animation-name: particle-animation-29;
    animation-delay: -5.8s;
    transform: translate3d(86vw, 4vh, 41px);

}

@keyframes particle-animation-29 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.14;
    }

    90% {
        opacity: 0.01;
    }

    100% {
        transform: translate3d(70vw, 2vh, 47px);
        opacity: 0;
    }
}

.particle:nth-child(30) {
    top: 32%;
    height: 5px;
    width: 5px;
    background-color: #bcb8c0;
    animation-name: particle-animation-30;
    animation-delay: -6s;
    transform: translate3d(17vw, 41vh, 35px);

}

@keyframes particle-animation-30 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.22;
    }

    90% {
        opacity: 0.31;
    }

    100% {
        transform: translate3d(27vw, 78vh, -4px);
        opacity: 0;
    }
}

.particle:nth-child(31) {
    top: 35%;
    height: 9px;
    width: 9px;
    background-color: #d3cdb5;
    animation-name: particle-animation-31;
    animation-delay: -6.2s;
    transform: translate3d(70vw, 46vh, 25px);

}

@keyframes particle-animation-31 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.04;
    }

    90% {
        opacity: 0.18;
    }

    100% {
        transform: translate3d(13vw, 4vh, -11px);
        opacity: 0;
    }
}

.particle:nth-child(32) {
    top: 23%;
    height: 9px;
    width: 9px;
    background-color: #e5d4f6;
    animation-name: particle-animation-32;
    animation-delay: -6.4s;
    transform: translate3d(32vw, 20vh, 72px);

}

@keyframes particle-animation-32 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.12;
    }

    90% {
        opacity: 0.18;
    }

    100% {
        transform: translate3d(38vw, 79vh, 24px);
        opacity: 0;
    }
}

.particle:nth-child(33) {
    top: 10%;
    height: 5px;
    width: 5px;
    background-color: #f2e1f0;
    animation-name: particle-animation-33;
    animation-delay: -6.6s;
    transform: translate3d(44vw, 75vh, 51px);

}

@keyframes particle-animation-33 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.01;
    }

    90% {
        opacity: 0.18;
    }

    100% {
        transform: translate3d(3vw, 1vh, 36px);
        opacity: 0;
    }
}

.particle:nth-child(34) {
    top: 26%;
    height: 4px;
    width: 4px;
    background-color: #d5ebde;
    animation-name: particle-animation-34;
    animation-delay: -6.8s;
    transform: translate3d(82vw, 40vh, 99px);

}

@keyframes particle-animation-34 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.26;
    }

    90% {
        opacity: 0.35;
    }

    100% {
        transform: translate3d(79vw, 15vh, -45px);
        opacity: 0;
    }
}

.particle:nth-child(35) {
    top: 39%;
    height: 10px;
    width: 10px;
    background-color: #c5edc9;
    animation-name: particle-animation-35;
    animation-delay: -7s;
    transform: translate3d(66vw, 71vh, 63px);

}

@keyframes particle-animation-35 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.36;
    }

    90% {
        opacity: 0.06;
    }

    100% {
        transform: translate3d(32vw, 63vh, -48px);
        opacity: 0;
    }
}

.particle:nth-child(36) {
    top: 11%;
    height: 7px;
    width: 7px;
    background-color: #d5e7bc;
    animation-name: particle-animation-36;
    animation-delay: -7.2s;
    transform: translate3d(86vw, 24vh, 2px);

}

@keyframes particle-animation-36 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.22;
    }

    90% {
        opacity: 0.15;
    }

    100% {
        transform: translate3d(86vw, 19vh, 38px);
        opacity: 0;
    }
}

.particle:nth-child(37) {
    top: 49%;
    height: 6px;
    width: 6px;
    background-color: #f0f5cd;
    animation-name: particle-animation-37;
    animation-delay: -7.4s;
    transform: translate3d(13vw, 88vh, 19px);

}

@keyframes particle-animation-37 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.14;
    }

    90% {
        opacity: 0.26;
    }

    100% {
        transform: translate3d(35vw, 43vh, 48px);
        opacity: 0;
    }
}

.particle:nth-child(38) {
    top: 19%;
    height: 6px;
    width: 6px;
    background-color: #e2cad9;
    animation-name: particle-animation-38;
    animation-delay: -7.6s;
    transform: translate3d(66vw, 14vh, 75px);

}

@keyframes particle-animation-38 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.13;
    }

    90% {
        opacity: 0.16;
    }

    100% {
        transform: translate3d(31vw, 41vh, 24px);
        opacity: 0;
    }
}

.particle:nth-child(39) {
    top: 76%;
    height: 6px;
    width: 6px;
    background-color: #e8d6f1;
    animation-name: particle-animation-39;
    animation-delay: -7.8s;
    transform: translate3d(16vw, 55vh, 41px);

}

@keyframes particle-animation-39 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.22;
    }

    90% {
        opacity: 0.04;
    }

    100% {
        transform: translate3d(59vw, 19vh, 36px);
        opacity: 0;
    }
}

.particle:nth-child(40) {
    top: 32%;
    height: 6px;
    width: 6px;
    background-color: #f3b5c7;
    animation-name: particle-animation-40;
    animation-delay: -8s;
    transform: translate3d(41vw, 22vh, 65px);

}

@keyframes particle-animation-40 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.22;
    }

    90% {
        opacity: 0.34;
    }

    100% {
        transform: translate3d(44vw, 31vh, 31px);
        opacity: 0;
    }
}

.particle:nth-child(41) {
    top: 20%;
    height: 5px;
    width: 5px;
    background-color: #e8bae6;
    animation-name: particle-animation-41;
    animation-delay: -8.2s;
    transform: translate3d(50vw, 43vh, 37px);

}

@keyframes particle-animation-41 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.06;
    }

    90% {
        opacity: 0.06;
    }

    100% {
        transform: translate3d(46vw, 48vh, -48px);
        opacity: 0;
    }
}

.particle:nth-child(42) {
    top: 74%;
    height: 9px;
    width: 9px;
    background-color: #c5d8d8;
    animation-name: particle-animation-42;
    animation-delay: -8.4s;
    transform: translate3d(77vw, 38vh, 68px);

}

@keyframes particle-animation-42 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.09;
    }

    90% {
        opacity: 0.15;
    }

    100% {
        transform: translate3d(80vw, 88vh, 30px);
        opacity: 0;
    }
}

.particle:nth-child(43) {
    top: 22%;
    height: 6px;
    width: 6px;
    background-color: #e9d5fc;
    animation-name: particle-animation-43;
    animation-delay: -8.6s;
    transform: translate3d(39vw, 77vh, 98px);

}

@keyframes particle-animation-43 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.03;
    }

    90% {
        opacity: 0.35;
    }

    100% {
        transform: translate3d(66vw, 67vh, -9px);
        opacity: 0;
    }
}

.particle:nth-child(44) {
    top: 25%;
    height: 8px;
    width: 8px;
    background-color: #f9fef0;
    animation-name: particle-animation-44;
    animation-delay: -8.8s;
    transform: translate3d(16vw, 90vh, 79px);

}

@keyframes particle-animation-44 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.11;
    }

    90% {
        opacity: 0.09;
    }

    100% {
        transform: translate3d(37vw, 43vh, -6px);
        opacity: 0;
    }
}

.particle:nth-child(45) {
    top: 79%;
    height: 8px;
    width: 8px;
    background-color: #b8e5ee;
    animation-name: particle-animation-45;
    animation-delay: -9s;
    transform: translate3d(44vw, 40vh, 81px);

}

@keyframes particle-animation-45 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.4;
    }

    90% {
        opacity: 0.19;
    }

    100% {
        transform: translate3d(5vw, 12vh, 45px);
        opacity: 0;
    }
}

.particle:nth-child(46) {
    top: 53%;
    height: 3px;
    width: 3px;
    background-color: #f3ebcc;
    animation-name: particle-animation-46;
    animation-delay: -9.2s;
    transform: translate3d(83vw, 70vh, 10px);

}

@keyframes particle-animation-46 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.01;
    }

    90% {
        opacity: 0.26;
    }

    100% {
        transform: translate3d(70vw, 90vh, -38px);
        opacity: 0;
    }
}

.particle:nth-child(47) {
    top: 50%;
    height: 8px;
    width: 8px;
    background-color: #c0edfa;
    animation-name: particle-animation-47;
    animation-delay: -9.4s;
    transform: translate3d(49vw, 73vh, 95px);

}

@keyframes particle-animation-47 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.28;
    }

    90% {
        opacity: 0.21;
    }

    100% {
        transform: translate3d(1vw, 59vh, -39px);
        opacity: 0;
    }
}

.particle:nth-child(48) {
    top: 1%;
    height: 6px;
    width: 6px;
    background-color: #d8cfc8;
    animation-name: particle-animation-48;
    animation-delay: -9.6s;
    transform: translate3d(5vw, 57vh, 10px);

}

@keyframes particle-animation-48 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.01;
    }

    90% {
        opacity: 0.12;
    }

    100% {
        transform: translate3d(61vw, 50vh, 9px);
        opacity: 0;
    }
}

.particle:nth-child(49) {
    top: 38%;
    height: 7px;
    width: 7px;
    background-color: #e5c1e5;
    animation-name: particle-animation-49;
    animation-delay: -9.8s;
    transform: translate3d(75vw, 79vh, 71px);

}

@keyframes particle-animation-49 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.18;
    }

    90% {
        opacity: 0.26;
    }

    100% {
        transform: translate3d(11vw, 84vh, -45px);
        opacity: 0;
    }
}

.particle:nth-child(50) {
    top: 62%;
    height: 7px;
    width: 7px;
    background-color: #e8d5ed;
    animation-name: particle-animation-50;
    animation-delay: -10s;
    transform: translate3d(75vw, 6vh, 27px);

}

@keyframes particle-animation-50 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.38;
    }

    90% {
        opacity: 0.35;
    }

    100% {
        transform: translate3d(72vw, 85vh, -1px);
        opacity: 0;
    }
}

.particle:nth-child(51) {
    top: 72%;
    height: 9px;
    width: 9px;
    background-color: #d3ecb9;
    animation-name: particle-animation-51;
    animation-delay: -10.2s;
    transform: translate3d(32vw, 87vh, 11px);

}

@keyframes particle-animation-51 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.24;
    }

    90% {
        opacity: 0.3;
    }

    100% {
        transform: translate3d(10vw, 71vh, 6px);
        opacity: 0;
    }
}

.particle:nth-child(52) {
    top: 43%;
    height: 3px;
    width: 3px;
    background-color: #edc9f6;
    animation-name: particle-animation-52;
    animation-delay: -10.4s;
    transform: translate3d(75vw, 4vh, 7px);

}

@keyframes particle-animation-52 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.24;
    }

    90% {
        opacity: 0.11;
    }

    100% {
        transform: translate3d(59vw, 78vh, -20px);
        opacity: 0;
    }
}

.particle:nth-child(53) {
    top: 49%;
    height: 4px;
    width: 4px;
    background-color: #c0f8f5;
    animation-name: particle-animation-53;
    animation-delay: -10.6s;
    transform: translate3d(60vw, 53vh, 86px);

}

@keyframes particle-animation-53 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.36;
    }

    90% {
        opacity: 0.31;
    }

    100% {
        transform: translate3d(43vw, 85vh, 23px);
        opacity: 0;
    }
}

.particle:nth-child(54) {
    top: 33%;
    height: 8px;
    width: 8px;
    background-color: #b6bece;
    animation-name: particle-animation-54;
    animation-delay: -10.8s;
    transform: translate3d(44vw, 59vh, 85px);

}

@keyframes particle-animation-54 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.32;
    }

    90% {
        opacity: 0.01;
    }

    100% {
        transform: translate3d(1vw, 59vh, -6px);
        opacity: 0;
    }
}

.particle:nth-child(55) {
    top: 70%;
    height: 7px;
    width: 7px;
    background-color: #c7bada;
    animation-name: particle-animation-55;
    animation-delay: -11s;
    transform: translate3d(21vw, 48vh, 97px);

}

@keyframes particle-animation-55 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.08;
    }

    90% {
        opacity: 0.18;
    }

    100% {
        transform: translate3d(2vw, 77vh, -10px);
        opacity: 0;
    }
}

.particle:nth-child(56) {
    top: 12%;
    height: 3px;
    width: 3px;
    background-color: #bcdbbf;
    animation-name: particle-animation-56;
    animation-delay: -11.2s;
    transform: translate3d(70vw, 22vh, 39px);

}

@keyframes particle-animation-56 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.24;
    }

    90% {
        opacity: 0.24;
    }

    100% {
        transform: translate3d(54vw, 38vh, 15px);
        opacity: 0;
    }
}

.particle:nth-child(57) {
    top: 34%;
    height: 6px;
    width: 6px;
    background-color: #d8c4ff;
    animation-name: particle-animation-57;
    animation-delay: -11.4s;
    transform: translate3d(66vw, 87vh, 51px);

}

@keyframes particle-animation-57 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.38;
    }

    90% {
        opacity: 0.26;
    }

    100% {
        transform: translate3d(85vw, 12vh, -25px);
        opacity: 0;
    }
}

.particle:nth-child(58) {
    top: 33%;
    height: 7px;
    width: 7px;
    background-color: #b8d0f4;
    animation-name: particle-animation-58;
    animation-delay: -11.6s;
    transform: translate3d(26vw, 19vh, 88px);

}

@keyframes particle-animation-58 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.04;
    }

    90% {
        opacity: 0.15;
    }

    100% {
        transform: translate3d(52vw, 40vh, -7px);
        opacity: 0;
    }
}

.particle:nth-child(59) {
    top: 77%;
    height: 6px;
    width: 6px;
    background-color: #fec4c3;
    animation-name: particle-animation-59;
    animation-delay: -11.8s;
    transform: translate3d(44vw, 18vh, 87px);

}

@keyframes particle-animation-59 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.19;
    }

    90% {
        opacity: 0.2;
    }

    100% {
        transform: translate3d(68vw, 62vh, 36px);
        opacity: 0;
    }
}

.particle:nth-child(60) {
    top: 60%;
    height: 4px;
    width: 4px;
    background-color: #faf0ca;
    animation-name: particle-animation-60;
    animation-delay: -12s;
    transform: translate3d(77vw, 83vh, 67px);

}

@keyframes particle-animation-60 {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.12;
    }

    90% {
        opacity: 0.25;
    }

    100% {
        transform: translate3d(51vw, 19vh, -45px);
        opacity: 0;
    }
}





.parallaxed .particle:nth-child(1) {
    top: 113%;
    height: 3px;
    width: 3px;
    background-color: #e9d4e8;
    animation-name: particle-animation-1;
    animation-delay: -0.2s;
    transform: translate3d(77vw, 47vh, 1px);

}

.parallaxed .particle:nth-child(2) {
    top: 174%;
    height: 3px;
    width: 3px;
    background-color: #bccef6;
    animation-name: particle-animation-2;
    animation-delay: -0.4s;
    transform: translate3d(18vw, 90vh, 60px);

}

.parallaxed .particle:nth-child(3) {
    top: 168%;
    height: 3px;
    width: 3px;
    background-color: #dae1b7;
    animation-name: particle-animation-3;
    animation-delay: -0.6s;
    transform: translate3d(3vw, 14vh, 13px);

}

.parallaxed .particle:nth-child(4) {
    top: 33%;
    height: 4px;
    width: 4px;
    background-color: #dec5c8;
    animation-name: particle-animation-4;
    animation-delay: -0.8s;
    transform: translate3d(45vw, 28vh, 22px);

}

.parallaxed .particle:nth-child(5) {
    top: 141%;
    height: 3px;
    width: 3px;
    background-color: #c8caeb;
    animation-name: particle-animation-5;
    animation-delay: -1s;
    transform: translate3d(28vw, 69vh, 2px);

}

.parallaxed .particle:nth-child(6) {
    top: 168%;
    height: 4px;
    width: 4px;
    background-color: #e9fee2;
    animation-name: particle-animation-6;
    animation-delay: -1.2s;
    transform: translate3d(55vw, 73vh, 16px);

}

.parallaxed .particle:nth-child(7) {
    top: 59%;
    height: 3px;
    width: 3px;
    background-color: #f3b8da;
    animation-name: particle-animation-7;
    animation-delay: -1.4s;
    transform: translate3d(60vw, 71vh, 36px);

}

.parallaxed .particle:nth-child(8) {
    top: 29%;
    height: 3px;
    width: 3px;
    background-color: #e6c5f0;
    animation-name: particle-animation-8;
    animation-delay: -1.6s;
    transform: translate3d(65vw, 14vh, 97px);

}

.parallaxed .particle:nth-child(9) {
    top: 28%;
    height: 4px;
    width: 4px;
    background-color: #effbe6;
    animation-name: particle-animation-9;
    animation-delay: -1.8s;
    transform: translate3d(44vw, 14vh, 78px);

}

.parallaxed .particle:nth-child(10) {
    top: 183%;
    height: 4px;
    width: 4px;
    background-color: #cefed8;
    animation-name: particle-animation-10;
    animation-delay: -2s;
    transform: translate3d(78vw, 87vh, 25px);

}

.parallaxed .particle:nth-child(11) {
    top: 45%;
    height: 4px;
    width: 4px;
    background-color: #bbeec9;
    animation-name: particle-animation-11;
    animation-delay: -2.2s;
    transform: translate3d(61vw, 78vh, 72px);

}

.parallaxed .particle:nth-child(12) {
    top: 31%;
    height: 3px;
    width: 3px;
    background-color: #d8cfbe;
    animation-name: particle-animation-12;
    animation-delay: -2.4s;
    transform: translate3d(16vw, 41vh, 47px);

}

.parallaxed .particle:nth-child(13) {
    top: 171%;
    height: 4px;
    width: 4px;
    background-color: #eedfdc;
    animation-name: particle-animation-13;
    animation-delay: -2.6s;
    transform: translate3d(62vw, 4vh, 53px);

}

.parallaxed .particle:nth-child(14) {
    top: 121%;
    height: 3px;
    width: 3px;
    background-color: #b7e5ca;
    animation-name: particle-animation-14;
    animation-delay: -2.8s;
    transform: translate3d(85vw, 52vh, 35px);

}

.parallaxed .particle:nth-child(15) {
    top: 131%;
    height: 3px;
    width: 3px;
    background-color: #c4e0ec;
    animation-name: particle-animation-15;
    animation-delay: -3s;
    transform: translate3d(66vw, 19vh, 13px);

}

.parallaxed .particle:nth-child(16) {
    top: 12%;
    height: 3px;
    width: 3px;
    background-color: #f3e7cf;
    animation-name: particle-animation-16;
    animation-delay: -3.2s;
    transform: translate3d(20vw, 39vh, 86px);

}

.parallaxed .particle:nth-child(17) {
    top: 37%;
    height: 3px;
    width: 3px;
    background-color: #daf1fc;
    animation-name: particle-animation-17;
    animation-delay: -3.4s;
    transform: translate3d(68vw, 80vh, 98px);

}

.parallaxed .particle:nth-child(18) {
    top: 180%;
    height: 4px;
    width: 4px;
    background-color: #e7e3e6;
    animation-name: particle-animation-18;
    animation-delay: -3.6s;
    transform: translate3d(38vw, 67vh, 42px);

}

.parallaxed .particle:nth-child(19) {
    top: 122%;
    height: 4px;
    width: 4px;
    background-color: #eac9d2;
    animation-name: particle-animation-19;
    animation-delay: -3.8s;
    transform: translate3d(39vw, 57vh, 14px);

}

.parallaxed .particle:nth-child(20) {
    top: 22%;
    height: 4px;
    width: 4px;
    background-color: #b7d7bc;
    animation-name: particle-animation-20;
    animation-delay: -4s;
    transform: translate3d(31vw, 1vh, 88px);

}

.parallaxed .particle:nth-child(21) {
    top: 125%;
    height: 3px;
    width: 3px;
    background-color: #e7edbd;
    animation-name: particle-animation-21;
    animation-delay: -4.2s;
    transform: translate3d(84vw, 82vh, 5px);

}

.parallaxed .particle:nth-child(22) {
    top: 68%;
    height: 4px;
    width: 4px;
    background-color: #b8c4dd;
    animation-name: particle-animation-22;
    animation-delay: -4.4s;
    transform: translate3d(75vw, 62vh, 65px);

}

.parallaxed .particle:nth-child(23) {
    top: 147%;
    height: 4px;
    width: 4px;
    background-color: #d2fbfe;
    animation-name: particle-animation-23;
    animation-delay: -4.6s;
    transform: translate3d(89vw, 58vh, 93px);

}

.parallaxed .particle:nth-child(24) {
    top: 120%;
    height: 3px;
    width: 3px;
    background-color: #f0f2e7;
    animation-name: particle-animation-24;
    animation-delay: -4.8s;
    transform: translate3d(22vw, 58vh, 72px);

}

.parallaxed .particle:nth-child(25) {
    top: 129%;
    height: 3px;
    width: 3px;
    background-color: #c5bada;
    animation-name: particle-animation-25;
    animation-delay: -5s;
    transform: translate3d(49vw, 71vh, 2px);

}

.parallaxed .particle:nth-child(26) {
    top: 78%;
    height: 3px;
    width: 3px;
    background-color: #d1b7d2;
    animation-name: particle-animation-26;
    animation-delay: -5.2s;
    transform: translate3d(31vw, 43vh, 69px);

}

.parallaxed .particle:nth-child(27) {
    top: 131%;
    height: 3px;
    width: 3px;
    background-color: #bee7bf;
    animation-name: particle-animation-27;
    animation-delay: -5.4s;
    transform: translate3d(58vw, 89vh, 1px);

}

.parallaxed .particle:nth-child(28) {
    top: 62%;
    height: 4px;
    width: 4px;
    background-color: #e3c8c9;
    animation-name: particle-animation-28;
    animation-delay: -5.6s;
    transform: translate3d(58vw, 35vh, 32px);

}

.parallaxed .particle:nth-child(29) {
    top: 52%;
    height: 4px;
    width: 4px;
    background-color: #e3b7d8;
    animation-name: particle-animation-29;
    animation-delay: -5.8s;
    transform: translate3d(43vw, 67vh, 62px);

}

.parallaxed .particle:nth-child(30) {
    top: 182%;
    height: 3px;
    width: 3px;
    background-color: #c6ecd9;
    animation-name: particle-animation-30;
    animation-delay: -6s;
    transform: translate3d(70vw, 37vh, 98px);

}

.parallaxed .particle:nth-child(31) {
    top: 141%;
    height: 3px;
    width: 3px;
    background-color: #badef2;
    animation-name: particle-animation-31;
    animation-delay: -6.2s;
    transform: translate3d(8vw, 15vh, 25px);

}

.parallaxed .particle:nth-child(32) {
    top: 147%;
    height: 3px;
    width: 3px;
    background-color: #f3ede5;
    animation-name: particle-animation-32;
    animation-delay: -6.4s;
    transform: translate3d(15vw, 30vh, 87px);

}

.parallaxed .particle:nth-child(33) {
    top: 92%;
    height: 4px;
    width: 4px;
    background-color: #f2d0fe;
    animation-name: particle-animation-33;
    animation-delay: -6.6s;
    transform: translate3d(35vw, 17vh, 13px);

}

.parallaxed .particle:nth-child(34) {
    top: 116%;
    height: 3px;
    width: 3px;
    background-color: #edb6ef;
    animation-name: particle-animation-34;
    animation-delay: -6.8s;
    transform: translate3d(16vw, 53vh, 21px);

}

.parallaxed .particle:nth-child(35) {
    top: 72%;
    height: 4px;
    width: 4px;
    background-color: #eec5f6;
    animation-name: particle-animation-35;
    animation-delay: -7s;
    transform: translate3d(69vw, 28vh, 80px);

}

.parallaxed .particle:nth-child(36) {
    top: 91%;
    height: 4px;
    width: 4px;
    background-color: #f3dde6;
    animation-name: particle-animation-36;
    animation-delay: -7.2s;
    transform: translate3d(71vw, 86vh, 99px);

}

.parallaxed .particle:nth-child(37) {
    top: 43%;
    height: 4px;
    width: 4px;
    background-color: #f5c2d8;
    animation-name: particle-animation-37;
    animation-delay: -7.4s;
    transform: translate3d(2vw, 31vh, 96px);

}

.parallaxed .particle:nth-child(38) {
    top: 140%;
    height: 3px;
    width: 3px;
    background-color: #c1ebfe;
    animation-name: particle-animation-38;
    animation-delay: -7.6s;
    transform: translate3d(41vw, 28vh, 32px);

}

.parallaxed .particle:nth-child(39) {
    top: 70%;
    height: 3px;
    width: 3px;
    background-color: #d9c1b8;
    animation-name: particle-animation-39;
    animation-delay: -7.8s;
    transform: translate3d(19vw, 85vh, 67px);

}

.parallaxed .particle:nth-child(40) {
    top: 18%;
    height: 4px;
    width: 4px;
    background-color: #cbcfc6;
    animation-name: particle-animation-40;
    animation-delay: -8s;
    transform: translate3d(74vw, 36vh, 78px);

}

.parallaxed .particle:nth-child(41) {
    top: 55%;
    height: 3px;
    width: 3px;
    background-color: #c9b6f1;
    animation-name: particle-animation-41;
    animation-delay: -8.2s;
    transform: translate3d(37vw, 80vh, 58px);

}

.parallaxed .particle:nth-child(42) {
    top: 92%;
    height: 3px;
    width: 3px;
    background-color: #d7e4b5;
    animation-name: particle-animation-42;
    animation-delay: -8.4s;
    transform: translate3d(17vw, 66vh, 55px);

}

.parallaxed .particle:nth-child(43) {
    top: 70%;
    height: 3px;
    width: 3px;
    background-color: #ebffea;
    animation-name: particle-animation-43;
    animation-delay: -8.6s;
    transform: translate3d(13vw, 19vh, 59px);

}

.parallaxed .particle:nth-child(44) {
    top: 17%;
    height: 4px;
    width: 4px;
    background-color: #c1bbfb;
    animation-name: particle-animation-44;
    animation-delay: -8.8s;
    transform: translate3d(72vw, 29vh, 60px);

}

.parallaxed .particle:nth-child(45) {
    top: 22%;
    height: 3px;
    width: 3px;
    background-color: #e8dfbd;
    animation-name: particle-animation-45;
    animation-delay: -9s;
    transform: translate3d(16vw, 7vh, 28px);

}

.parallaxed .particle:nth-child(46) {
    top: 115%;
    height: 4px;
    width: 4px;
    background-color: #b5cbec;
    animation-name: particle-animation-46;
    animation-delay: -9.2s;
    transform: translate3d(14vw, 12vh, 57px);

}

.parallaxed .particle:nth-child(47) {
    top: 144%;
    height: 4px;
    width: 4px;
    background-color: #f8c8dc;
    animation-name: particle-animation-47;
    animation-delay: -9.4s;
    transform: translate3d(29vw, 79vh, 35px);

}

.parallaxed .particle:nth-child(48) {
    top: 154%;
    height: 4px;
    width: 4px;
    background-color: #daf1fd;
    animation-name: particle-animation-48;
    animation-delay: -9.6s;
    transform: translate3d(15vw, 64vh, 23px);

}

.parallaxed .particle:nth-child(49) {
    top: 148%;
    height: 4px;
    width: 4px;
    background-color: #f9dffa;
    animation-name: particle-animation-49;
    animation-delay: -9.8s;
    transform: translate3d(16vw, 74vh, 59px);

}

.parallaxed .particle:nth-child(50) {
    top: 92%;
    height: 3px;
    width: 3px;
    background-color: #c3dad2;
    animation-name: particle-animation-50;
    animation-delay: -10s;
    transform: translate3d(26vw, 62vh, 53px);

}

.parallaxed .particle:nth-child(51) {
    top: 141%;
    height: 4px;
    width: 4px;
    background-color: #f4bdda;
    animation-name: particle-animation-51;
    animation-delay: -10.2s;
    transform: translate3d(3vw, 11vh, 52px);

}

.parallaxed .particle:nth-child(52) {
    top: 147%;
    height: 3px;
    width: 3px;
    background-color: #c3bcfb;
    animation-name: particle-animation-52;
    animation-delay: -10.4s;
    transform: translate3d(76vw, 47vh, 87px);

}

.parallaxed .particle:nth-child(53) {
    top: 131%;
    height: 4px;
    width: 4px;
    background-color: #eddbfd;
    animation-name: particle-animation-53;
    animation-delay: -10.6s;
    transform: translate3d(11vw, 33vh, 50px);

}

.parallaxed .particle:nth-child(54) {
    top: 129%;
    height: 4px;
    width: 4px;
    background-color: #f9bce9;
    animation-name: particle-animation-54;
    animation-delay: -10.8s;
    transform: translate3d(23vw, 23vh, 50px);

}

.parallaxed .particle:nth-child(55) {
    top: 101%;
    height: 3px;
    width: 3px;
    background-color: #ddf7e4;
    animation-name: particle-animation-55;
    animation-delay: -11s;
    transform: translate3d(35vw, 5vh, 72px);

}

.parallaxed .particle:nth-child(56) {
    top: 65%;
    height: 4px;
    width: 4px;
    background-color: #c3f5dc;
    animation-name: particle-animation-56;
    animation-delay: -11.2s;
    transform: translate3d(5vw, 59vh, 64px);

}

.parallaxed .particle:nth-child(57) {
    top: 108%;
    height: 3px;
    width: 3px;
    background-color: #f6bbc2;
    animation-name: particle-animation-57;
    animation-delay: -11.4s;
    transform: translate3d(16vw, 72vh, 26px);

}

.parallaxed .particle:nth-child(58) {
    top: 166%;
    height: 4px;
    width: 4px;
    background-color: #c4dcfb;
    animation-name: particle-animation-58;
    animation-delay: -11.6s;
    transform: translate3d(25vw, 86vh, 89px);

}

.parallaxed .particle:nth-child(59) {
    top: 175%;
    height: 4px;
    width: 4px;
    background-color: #fbb8c8;
    animation-name: particle-animation-59;
    animation-delay: -11.8s;
    transform: translate3d(32vw, 43vh, 56px);

}

.parallaxed .particle:nth-child(60) {
    top: 150%;
    height: 3px;
    width: 3px;
    background-color: #f0d5c3;
    animation-name: particle-animation-60;
    animation-delay: -12s;
    transform: translate3d(64vw, 44vh, 58px);

}