@keyframes btnFilterHover {
    0% {
        transform: translate(0);
    }

    10% {
        transform: translate(-2px,-2px);
    }

    20% {
        transform: translate(2px,-2px);
    }

    30% {
        transform: translate(-2px,2px);
    }

    40% {
        transform: translate(2px,2px);
    }

    50% {
        transform: translate(-2px,-2px);
    }

    60% {
        transform: translate(2px,-2px);
    }

    70% {
        transform: translate(-2px,2px);
    }

    80% {
        transform: translate(-2px,-2px);
    }

    90% {
        transform: translate(2px,-2px);
    }

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

@keyframes textLoadingTranForm {
    0% {
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        filter: blur(0);
        opacity: 1;
    }
}

@keyframes hoverCardProduct {
    0% {
        box-shadow: rgba(44, 95, 44, 0.5) 0.5px 1px 5px
    }

    100% {
        box-shadow: rgba(44, 95, 44, 0.5) 0.5px 1px 20px;
    }
}

@keyframes btnFilterRotate {
    0% {
        transform: rotate(0deg);
        transform-origin: 0 0;
    }

    10% {
        transform: rotate(2deg);
    }

    20% {
        transform: rotate(-4deg);
    }

    30% {
        transform: rotate(4deg);
    }

    40% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(4deg);
    }

    60% {
        transform: rotate(-4deg);
    }

    70% {
        transform: rotate(4deg);
    }

    80% {
        transform: rotate(-2deg);
    }

    90% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0deg);
        transform-origin: 0 0;
    }
}

@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadein-right {
    0% {
        transform: translateX(50px);
        opacity: 0;
    }

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

@keyframes fadein-left {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }

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

@keyframes fadein-top-right {

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

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

@keyframes fadein-top-left {

    0% {
        transform: translateX(-50px) translateY(-50px);
        opacity: 0;
    }

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

@keyframes fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slideDown {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

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

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

@keyframes slide-in-right {
    0% {
        transform: translateX(200%);
    }

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

@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blinkingCursor {
    from {
        border-right-color: rgba(255,255,255,.75);
    }

    to {
        border-right-color: transparent;
    }
}