.floating {

    animation: floating 3s ease infinite;
    will-change: transform;

    &:hover {
    animation-play-state: paused;
}

}

.floating-lg {

animation: floating-lg 3s ease infinite;

}

.floating-sm {

animation: floating-sm 3s ease infinite;

}

// Keyframes

@keyframes floating-lg {

0% {
    transform: translateY(0px)
}
50% {
    transform: translateY(15px)
}
100% {
    transform: translateY(0px)
}

}

@keyframes floating {

0% {
    transform: translateY(0px)
}
50% {
    transform: translateY(10px)
}
100% {
    transform: translateY(0px)
}

}

@keyframes floating-sm {

0% {
    transform: translateY(0px)
}
50% {
    transform: translateY(5px)
}
100% {
    transform: translateY(0px)
}

}