@keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        /*opacity: 1;*/
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.bounceIn-now {
    animation-duration: calc(1s * 0.75);
    animation-name: bounceIn;
    animation-fill-mode: forwards;
}

.bounceIn-1s {
    animation-duration: calc(1s * 0.75);
    animation-name: bounceIn;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
}

.bounceIn-2s {
    animation-duration: calc(1s * 0.75);
    animation-name: bounceIn;
    animation-fill-mode: forwards;
    animation-delay: 0.7s;
}

@keyframes revealArc {
    0% {

    }

    1% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.path-to-add-now {
    animation: revealArc 1s linear forwards;
}

.path-to-add-1s {
    animation: revealArc 1s linear forwards;
    animation-delay: 0.6s;
}

.path-to-add-2s {
    animation: revealArc 1s linear forwards;
    animation-delay: 1s;
}

@keyframes cover_move {
    0%{
        top: 0;
    }
    100%{
        top: 255vh;
    }
}

@keyframes appear {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.p5s1-to-add {
    animation-delay: 1s;
    animation: appear 5s forwards linear;
}

.p5cover-to-add {
    animation-delay: 1s;
    animation: cover_move 5s forwards linear;
}