/* ==========================================================================
Image Rotate Widget - Start
========================================================================== */

.image-rotate-wrap {
    display: block;
}

.image-rotate-container {
    display: inline-block;
}

.image-rotate-container img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Continuous Rotation Animation */
@keyframes rotateClockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateCounterClockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

.image-rotate-container.animate-rotate.rotate-normal img {
    animation: rotateClockwise 10s linear infinite;
}

.image-rotate-container.animate-rotate.rotate-reverse img {
    animation: rotateCounterClockwise 10s linear infinite;
}

/* ==========================================================================
Image Rotate Widget - End
========================================================================== */