@keyframes fadeout {
    0% {
        opacity: 1;
    }
    50% {
        transform: translatey(0) scale(1.35);
    }
    100% {
        transform: translatey(-15%) scale(1.35);
        opacity: 0;
        display: none;
    }
}

@keyframes fadein {
    0% {
        opacity: 0.5;
        transform: translatey(-15%) scale(1.35);
    }
    100% {
        transform: translatey(0) scale(1);
        opacity: 1;
    }
}

@keyframes additemtocart {
    0% {
        transform: scale(1);
    }
    33% {
        transform: translate(0dvw, 0dvh) scale(0.1);
    }
    100% {
        transform: translate(-9dvw, 45dvh) scale(0);
    }
}

@keyframes cartadditem {
    0% {
        transform: scale(1);
    }
    33% {
        transform: scale(1);
    }
    66% {
        transform: scale(2.6);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes openwa {
    0% {
        width: 0px;
        bottom: -40vh;
    }
    75% {
        bottom: 6px;
    }
    100% {
        width: 100%;
        bottom: 0;
    }
}

@keyframes openshopmodal {
    0% {
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }
    100% {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

@keyframes openshop {
    0% {
        opacity: 0;
        transform: rotate3d(0.1, 0.5, 0.1, 90deg);
    }
    10% {
        transform: rotate3d(0.1, 0.5, 0.1, 80deg);
    }
    100% {
        opacity: 1;
        transform: rotate3d(0, 0, 0, 0deg);
    }
}

.additemtocart {
    animation: additemtocart 0.6s forwards !important;
}

.cartadditem {
    animation: cartadditem 0.6s forwards !important;
}

.fadein {
    animation: fadein 0.25s forwards !important;
}

.fade {
    animation: fadeout 0.25s forwards !important;
}

.loader-hide-up {
    opacity: 0;
    transform: translate(0, -100vh) !important;
    pointer-events: none;
}

.loader-hide-up-right {
    opacity: 0;
    transform: translate(100vw, -100vh) !important;
    pointer-events: none;
}

.loader-hide-right {
    opacity: 0;
    transform: translate(100vw, 0) !important;
    pointer-events: none;
}

.loader-hide-down-right {
    opacity: 0;
    transform: translate(100vw, 100vh) !important;
    pointer-events: none;
}

.loader-hide-down {
    opacity: 0;
    transform: translate(0, 100vh) !important;
    pointer-events: none;
}

.loader-hide-down-left {
    opacity: 0;
    transform: translate(-100vw, 100vh) !important;
    pointer-events: none;
}

.loader-hide-left {
    opacity: 0;
    transform: translate(-100vw, 0) !important;
    pointer-events: none;
}

.loader-hide-up-left {
    opacity: 0;
    transform: translate(-100vw, -100vh) !important;
    pointer-events: none;
}

.loader-hide-up-rotate-right {
    opacity: 0;
    transform: translate(0, -100vh) rotate(90deg) !important;
    pointer-events: none;
}

.loader-hide-up-right-rotate-right {
    opacity: 0;
    transform: translate(100vw, -100vh) rotate(90deg) !important;
    pointer-events: none;
}

.loader-hide-right-rotate-right {
    opacity: 0;
    transform: translate(100vw, 0) rotate(90deg) !important;
    pointer-events: none;
}

.loader-hide-down-right-rotate-right {
    opacity: 0;
    transform: translate(100vw, 100vh) rotate(90deg) !important;
    pointer-events: none;
}

.loader-hide-down-rotate-right {
    opacity: 0;
    transform: translate(0, 100vh) rotate(90deg) !important;
    pointer-events: none;
}

.loader-hide-down-left-rotate-right {
    opacity: 0;
    transform: translate(-100vw, 100vh) rotate(90deg) !important;
    pointer-events: none;
}

.loader-hide-left-rotate-right {
    opacity: 0;
    transform: translate(-100vw, 0) rotate(90deg) !important;
    pointer-events: none;
}

.loader-hide-up-left-rotate-right {
    opacity: 0;
    transform: translate(-100vw, -100vh) rotate(90deg) !important;
    pointer-events: none;
}

.loader-hide-up-rotate-left {
    opacity: 0;
    transform: translate(0, -100vh) rotate(-90deg) !important;
    pointer-events: none;
}

.loader-hide-up-right-rotate-left {
    opacity: 0;
    transform: translate(100vw, -100vh) rotate(-90deg) !important;
    pointer-events: none;
}

.loader-hide-right-rotate-left {
    opacity: 0;
    transform: translate(100vw, 0) rotate(-90deg) !important;
    pointer-events: none;
}

.loader-hide-down-right-rotate-left {
    opacity: 0;
    transform: translate(100vw, 100vh) rotate(-90deg) !important;
    pointer-events: none;
}

.loader-hide-down-rotate-left {
    opacity: 0;
    transform: translate(0, 100vh) rotate(-90deg) !important;
    pointer-events: none;
}

.loader-hide-down-left-rotate-left {
    opacity: 0;
    transform: translate(-100vw, 100vh) rotate(-90deg) !important;
    pointer-events: none;
}

.loader-hide-left-rotate-left {
    opacity: 0;
    transform: translate(-100vw, 0) rotate(-90deg) !important;
    pointer-events: none;
}

.loader-hide-up-left-rotate-left {
    opacity: 0;
    transform: translate(-100vw, -100vh) rotate(-90deg) !important;
    pointer-events: none;
}

.loader-hide-up-rotate-scale {
    opacity: 0;
    transform: translate(0, -100vh) rotate(90deg) scale(0) !important;
    pointer-events: none;
}

.loader-hide-up-right-rotate-scale {
    opacity: 0;
    transform: translate(100vw, -100vh) rotate(90deg) scale(0) !important;
    pointer-events: none;
}

.loader-hide-right-rotate-scale {
    opacity: 0;
    transform: translate(100vw, 0) rotate(90deg) scale(0) !important;
    pointer-events: none;
}

.loader-hide-down-right-rotate-scale {
    opacity: 0;
    transform: translate(100vw, 100vh) rotate(90deg) scale(0) !important;
    pointer-events: none;
}

.loader-hide-down-rotate-scale {
    opacity: 0;
    transform: translate(0, 100vh) rotate(90deg) scale(0) !important;
    pointer-events: none;
}

.loader-hide-down-left-rotate-scale {
    opacity: 0;
    transform: translate(-100vw, 100vh) rotate(90deg) scale(0) !important;
    pointer-events: none;
}

.loader-hide-left-rotate-scale {
    opacity: 0;
    transform: translate(-100vw, 0) rotate(90deg) scale(0) !important;
    pointer-events: none;
}

.loader-hide-up-left-rotate-scale {
    opacity: 0;
    transform: translate(-100vw, -100vh) rotate(90deg) scale(0) !important;
    pointer-events: none;
}