/* #################################################################################*/
/*@ANIMATIONS:
/* #################################################################################*/

@keyframes mockup-bounce {

    0%,
    100% {
        transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(0);
    }

    50% {
        transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-20px);
    }
}

@keyframes shrink-width {
    0% {
        width: 100%;
    }

    100% {
        width: 0;
    }
}

@keyframes unshrink-width {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes fadeUp-aboutUsImages {
    from {
        opacity: 0;
        transform: scale(0.5) translateY(500px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes bounce-aboutUsImages {

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

    50% {
        opacity: 1;
        transform: translateY(-10px);
    }
}

@keyframes scaleBounce-aboutUsImages {

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

    50% {
        transform: scale(1.03);
    }
}

@keyframes fadeUp-lineStroke {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 0.3;
        transform: translateY(0);
    }
}

@keyframes fadeOut-lineStroke {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 0;
    }
}

@keyframes slide-and-rotate {
    from {
        transform: translateX(-200%) rotate(180deg);
    }

    to {
        transform: translateX(0) rotate(360deg);
    }
}

@keyframes slide-out-and-rotate {
    from {
        transform: translateX(0) rotate(360deg);
    }

    to {
        transform: translateX(-200%) rotate(180deg);
    }
}

@keyframes slide-in-from-left-plain {
    from {
        transform: translateX(-200%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slide-out-to-left-plain {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-200%);
    }
}

@keyframes fadeUp-bgSpicesDecor {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bounce-bgSpicesDecor {

    0%,
    100% {
        opacity: 1;
        transform: translateX(0);
    }

    50% {
        opacity: 1;
        transform: translateX(-20px);
    }
}


@keyframes infinite-scroll-animation {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes infinite-scroll-animation-reverse {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}