.animation-delay-5 {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}



/*#region  ****  bg-size  ***  */
@keyframes animation-bg-size {
    0% {
        background-size: 10%;
    }

    50% {
        background-size: 60%;
    }

    100% {
        background-size: 10%;
    }
}

@-webkit-keyframes animation-bg-size {
    0% {
        background-size: 10%;
    }

    50% {
        background-size: 60%;
    }

    100% {
        background-size: 10%;
    }
}

.bg-size {
    -webkit-animation-name: animation-bg-size;
    -webkit-animation-duration: 10s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: infinite;
    animation-name: animation-bg-size;
    animation-duration: 10s;
    transform-origin: 50% 50%;
    animation-iteration-count: infinite;
}

/*#endregion*/



/*#region  ****  swing  ***  */
@keyframes animation-swing {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    5% {
        transform: translate(-10px, 0px) rotate(20deg);
    }

    10% {
        transform: translate(12px, 0px) rotate(-20deg);
    }

    15% {
        transform: translate(-5px, 0px) rotate(20deg);
    }

    20% {
        transform: translate(2px, 0px) rotate(-10deg);
    }

    30% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    50% {
        transform: translate(-30px, -300px) rotate(0deg);
    }

    75% {
        transform: translate(0px, 0px) rotate(0deg);
    }

    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

@-webkit-keyframes animation-swing {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    5% {
        -webkit-transform: translate(-50px, 0px) rotate(30deg);
    }

    10% {
        -webkit-transform: translate(25px, 0px) rotate(-30deg);
    }

    15% {
        -webkit-transform: translate(-10px, 0px) rotate(30deg);
    }

    20% {
        -webkit-transform: translate(5px, 0px) rotate(-50deg);
    }

    30% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    50% {
        -webkit-transform: translate(-30px, -300px) rotate(0deg);
    }

    75% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}

.swing {
    -webkit-animation-name: animation-swing;
    -webkit-animation-duration: 10s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: infinite;
    animation-name: animation-swing;
    animation-duration: 10s;
    transform-origin: 50% 50%;
    animation-iteration-count: infinite;
}

/*#endregion*/


/*#region  ****  vibrate  ***  */

@-webkit-keyframes animation-vibrate {
    0% {
        -webkit-transform: translate(2px, 1px) rotate(0deg);
    }

    10% {
        -webkit-transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        -webkit-transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        -webkit-transform: translate(0px, 2px) rotate(0deg);
    }

    40% {
        -webkit-transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        -webkit-transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        -webkit-transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        -webkit-transform: translate(2px, 1px) rotate(-1deg);
    }

    80% {
        -webkit-transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        -webkit-transform: translate(2px, 2px) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(1px, -2px) rotate(-1deg);
    }
}

.vibrate {
    -webkit-animation-name: animation-vibrate;
    -webkit-animation-duration: 10s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: infinite;
    animation-name: animation-vibrate;
    animation-duration: 10s;
    transform-origin: 50% 50%;
    animation-iteration-count: infinite;
}


/*#endregion*/

/*#region  ****  shaking  ***  */

@-webkit-keyframes animation-shaking {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    20% {
        -webkit-transform: translate(-50px, 0px) rotate(0deg);
    }

    40% {
        -webkit-transform: translate(25px, 0px) rotate(0deg);
    }

    60% {
        -webkit-transform: translate(-10px, 0px) rotate(0deg);
    }

    80% {
        -webkit-transform: translate(5px, 0px) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}

.shaking {
    -webkit-animation-name: animation-shaking;
    -webkit-animation-duration: 0.4s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: 1;
}

/*#endregion*/


/*#region  ****  shaking-round  ***  */

@-webkit-keyframes animation-shaking-round {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    20% {
        -webkit-transform: translate(-50px, -20px) rotate(0deg);
    }

    40% {
        -webkit-transform: translate(25px, 20px) rotate(0deg);
    }

    60% {
        -webkit-transform: translate(-10px, 20px) rotate(0deg);
    }

    80% {
        -webkit-transform: translate(5px, -10px) rotate(0deg);
    }

    100% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }
}

.shaking-round {
    -webkit-animation-name: animation-shaking-round;
    -webkit-animation-duration: 0.4s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: 1;
}

/*#endregion*/

/*#region  ****  blink  ***  */

@-webkit-keyframes animation-blink {
    0% {
        opacity: 1.0;
        background-color: black;
        color: yellow;
    }

    50% {
        opacity: 0.3;
        background-color: yellow;
        color: black;
    }

    100% {
        opacity: 1.0;
        background-color: black;
        color: yellow;
    }
}

.blink {
    -webkit-animation-name: animation-blink;
    -webkit-animation-duration: 0.7s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: 2;
    /* -webkit-animation-fill-mode: backwards; */
}

/*#endregion*/

/*#region  ****  addToCart  ***  */

@-webkit-keyframes animation-addToCart {
    0% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    100% {
        opacity: 0;
        left: 0px;
        top: 100px;
        -webkit-transform: translate(0px, 0px) rotate(360deg);
    }
}

@-webkit-keyframes animation-addToCart-rtl {
    0% {
        opacity: 1;
        -webkit-transform: translate(0px, 0px) rotate(0deg);
    }

    100% {
        opacity: 0;
        right: 0px;
        top: 100px;
        -webkit-transform: translate(0px, 0px) rotate(360deg);
    }
}




.add-to-cart {
    position: absolute;
    z-index: 5001;
    opacity: 1;
    /* border: 1px solid gray; */

    -webkit-animation-name: animation-addToCart;
    -webkit-animation-duration: 0.4s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}

.add-to-cart-rtl {
    position: absolute;
    z-index: 5001;
    opacity: 1;
    /* border: 1px solid gray; */

    -webkit-animation-name: animation-addToCart-rtl;
    -webkit-animation-duration: 0.4s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
}

/* .shake {
    display:inline-block
} */

/*#endregion*/