/* css animations */

@keyframes iconanim-1 {
    0% {
        transform: translate(0, 10px) rotate(0deg);
    }
    20% {
        transform: translate(6.18px, 3.59px) rotate(72deg);
    }
    40% {
        transform: translate(9.51px, -2.93px) rotate(144deg);
    }
    60% {
        transform: translate(3.09px, -9.51px) rotate(216deg);
    }
    80% {
        transform: translate(-6.18px, -3.59px) rotate(288deg);
    }
    100% {
        transform: translate(0, 10px) rotate(360deg);
    }
}

@keyframes iconanim-2 {
    0% {
        transform: translate(3.09px, -9.51px) rotate(360deg);
    }
    20% {
        transform: translate(0, 10px) rotate(288deg);
    }
    40% {
        transform: translate(9.51px, -2.93px) rotate(216deg);
    }
    60% {
        transform: translate(-6.18px, -3.59px) rotate(144deg);
    }
    80% {
        transform: translate(6.18px, 3.59px) rotate(72deg);
    }
    100% {
        transform: translate(3.09px, -9.51px) rotate(0deg);
    }
}

@keyframes iconanim-3 {
    0% {
        transform: translate(3.09px, -9.51px) rotate(0deg);
    }
    20% {
        transform: translate(9.51px, -2.93px) rotate(72deg);
    }
    40% {
        transform: translate(0, 10px) rotate(144deg);
    }
    60% {
        transform: translate(6.18px, 3.59px) rotate(216deg);
    }
    80% {
        transform: translate(-6.18px, -3.59px) rotate(288deg);
    }
    100% {
        transform: translate(3.09px, -9.51px) rotate(360deg);
    }
}

.rotate-low {
    animation: iconanim-1 60s linear infinite;
}

.rotate-mid {
    animation: iconanim-2 40s linear infinite;
}

.rotate-high {
    animation: iconanim-3 20s linear infinite;
}