@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; 
}
/*_______main_______________________________________*/
.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; 
}
/*_______main_______________________________________*/
.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; 
}
/*_______main_______________________________________*/
.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; 
}


/*_______main_______________________________________*/