.arrow-down {
    max-width: 45px;
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
    animation: up-down 2s infinite;
}

@keyframes up-down {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-16px);
    }
}

.circle.anim-1 {
    animation: particle-animation-1 40s infinite;
}

@keyframes particle-animation-1 {

    0%,
    100% {
        transform: scale(1) translate3d(0, 0, 0);
    }

    50% {
        transform: scale(0.75) translate3d(42px, 75px, -135px);
    }
}

.circle.anim-2 {
    animation: particle-animation-2 40s infinite;
}

@keyframes particle-animation-2 {

    0%,
    100% {
        transform: scale(1) translate3d(0, 0, 0);
    }

    50% {
        transform: scale(0.9) translate3d(-150px, -40px, -135px);
    }
}

.circle.anim-3 {
    animation: particle-animation-3 30s infinite;
}

@keyframes particle-animation-3 {

    0%,
    100% {
        transform: scale(1) translate3d(0, 0, 0);
    }

    50% {
        transform: scale(0.7) translate3d(0px, 150px, -135px);
    }
}

.circle.anim-4 {
    animation: particle-animation-4 25s infinite;
}

@keyframes particle-animation-4 {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(0.8)
    }
}