:root {
    --distance: 20px;
    --distance-negative: -20px;
}

.hidden-slide-down,
.hidden-slide-up,
.hidden-slide-left,
.hidden-slide-right
{
    display: none !important;
}

.hidden-scroll-slide-down,
.hidden-scroll-slide-down-1,
.hidden-scroll-slide-down-2,
.hidden-scroll-slide-down-3,
.hidden-scroll-slide-up,
.hidden-scroll-slide-left,
.hidden-scroll-slide-right
{
    visibility: hidden !important;
}

.slide-down,
.scroll-slide-down
{
    animation: key-slide-down 1s;
}
.scroll-slide-down-1
{
    animation: key-slide-down 2s;
}
.scroll-slide-down-2
{
    animation: key-slide-down 3s;
}
.scroll-slide-down-3
{
    animation: key-slide-down 4s;
}

.slide-up,
.scroll-slide-up
{
    animation: key-slide-up 1s;
}
.slide-left,
.scroll-slide-left
{
    animation: key-slide-left 1s;
}
.slide-right,
.scroll-slide-right
{
    animation: key-slide-right 1s;
}

.slide-float
{
    animation: key-slide-float 4s ease-in-out infinite;
}

@keyframes key-slide-down {
    0%{
        opacity: 0;
        transform: translateY(var(--distance-negative));
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes key-slide-up {
    0%{
        opacity: 0;
        transform: translateY(var(--distance));
    }
    100%{
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes key-slide-left {
    0%{
        opacity: 0;
        transform: translateX(var(--distance-negative));
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes key-slide-right {
    0%{
        opacity: 0;
        transform: translateX(var(--distance));
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes key-slide-float {
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(var(--distance));
    }
    100%{
        transform: translateY(0);
    }
}