* {
    margin: 0;
    padding: 0;
    user-select: none;
}

body {
    right: 0;
    left: 0;
    margin: auto;
    width: 100%;
    max-width: 300px;
    height: 250px;
    position: relative;
    overflow: hidden;
}

.hidden {
    display: none;
}

.hidden0 {
    display: none;
    opacity: 0;
}

.Wrapper {
    width: 300px;
    height: 250px;
    right: 0;
    left: 0;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.slide1 {
    width: 300px;
    height: 250px;
    top: 0;
    left: 0;
    /* background: url("./img/bg.jpg") no-repeat; */
}

.plate1 {
    left: 3rem;
    margin: auto;
    position: absolute;
    scale: 0.45;
    bottom: -3.9rem;
}

.plate2 {
    left: 1rem;
    margin: auto;
    position: absolute;
    scale: 0.5;
    bottom: -3rem;
}

.copy1 {
    left: 5rem;
    margin: auto;
    position: absolute;
    scale: 0.5;
    /* bottom: 0; */
    top: -0.5rem;
}

.copy2 {
    left: 5rem;
    margin: auto;
    position: absolute;
    scale: 0.5;
    /* bottom: 0; */
    top: -0.5rem;
}
.bg{
    width: 300px;
    height: 250px;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    bottom: 0;
    top: 0;
}
.bg1 {
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    width: 300px;
    height: 250px;
    bottom: 0;
    top: 0;
}

.bg2 {
    width: 300px;
    height: 250px;
    left: 0;
    right: 0;
    margin: auto;
    position: absolute;
    bottom: 0;
    top: 0;
}

.cake1 {
    right: 5.2rem;
    margin: auto;
    position: absolute;
    scale: 0.5;
    bottom: 3.2rem;
    z-index: 9;
}

.cake2 {
    left: 4rem;
    margin: auto;
    position: absolute;
    scale: 0.5;
    bottom: 2.9rem;
    animation-delay: 1s !important;

}

.text2 {
    right: 0;
    left: 0;
    bottom: 0.3rem;
    margin: auto;
    position: absolute;
    scale: 0.6;

}



.text {
    right: 2rem;
    left: auto;
    bottom: 0.5rem;
    margin: auto;
    position: absolute;
    scale: 0.49;
    animation-delay: 1s !important;
}

.hand {
    /* right: 6.4rem;
    bottom: 5rem;
    position: absolute;
    z-index: 1005;
    scale: 0.4 !important; */
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 99999 !important;
    /* scale: 0.4 !important; */
    animation: _mobile-bottom-rectangle-spin-card_swipe-hand-ani 2s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.5, 1, 0.5, 0.8);
}


.slide2 {
    width: 300px;
    height: 250px;
    top: 0;
    left: 0;
    /* background: url("./img/bg.jpg") no-repeat; */
}


.slide3 {
    width: 300px;
    height: 250px;
    top: 0;
    left: 0;
    /* background: url("./img/bg.jpg") no-repeat; */
}

.logo1 {
    left: -8rem;
    bottom: -0.1rem;
    position: absolute;
    scale: 0.5;
}

.logo2 {
    left: -8rem;
    bottom: -0.1rem;
    position: absolute;
    scale: 0.5;
}

@keyframes pulse {
    0% {
        transform: scaleX(1);
        -webkit-transform: scaleX(1);
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -o-transform: scaleX(1);
    }

    50% {
        transform: scale3d(0.95, 0.95, 0.95);
        -webkit-transform: scale3d(0.95, 0.95, 0.95);
        -moz-transform: scale3d(0.95, 0.95, 0.95);
        -ms-transform: scale3d(0.95, 0.95, 0.95);
        -o-transform: scale3d(0.95, 0.95, 0.95);
    }

    to {
        transform: scaleX(1);
        -webkit-transform: scaleX(1);
        -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
        -o-transform: scaleX(1);
    }
}

.pulse {
    animation-name: pulse;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
}

.showZoomInLeft {
    animation-name: showZoomInLeft;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes showZoomInLeft {
    0% {
        transform: translateX(-200%);
    }

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

.showZoomInRight {
    animation-name: showZoomInRight;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes showZoomInRight {
    0% {
        transform: translateX(200%);
    }

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

.showZoomInBottom {
    animation-name: showZoomInBottom;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes showZoomInBottom {
    0% {
        transform: translateY(200%);
    }

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

.zoomOutBottom {
    animation-name: zoomOutBottom;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes zoomOutBottom {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(200%);
    }
}

/* right  */
.ZoomOutRight {
    animation-name: ZoomOutRight;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes ZoomOutRight {
    0% {
        transform: translateX(0%);
    }

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

@keyframes showZoomIn {
    from {
        transform: scale3d(0.5, 0.5, 0.5);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.showZoomIn {
    animation-name: showZoomIn;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1);
    }

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

.fadeIn {
    animation-name: fadeIn;
    animation-duration: 0.8s;
    animation-timing-function: ease-in;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }

    100% {
        opacity: 0;
        transform: scale3d(0.1, 0.1, 0.1);
    }
}

.fadeOut {
    animation-name: fadeOut;
    animation-duration: 1s;
    animation-timing-function: ease-out;
}



/*  Adfinix staf */

#adfinixAdLogo {
    background: #ededed;
    opacity: 0.8;
    transition: 0.2s;
    position: absolute;
    top: 0;
    display: inline-flex;
    right: 0;
    text-decoration: none;
    padding: 3px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Ubuntu, "Helvetica Neue", Oxygen, Cantarell, sans-serif;
    align-items: center;
}

#adfinixAdLogo img {
    width: 15px;
    height: 15px;
}

#adfinixAdLogo span {
    width: 0px;
    transition: 0.2s;
    margin-left: 2px;
    display: inline-block;
    font-size: 10px;
    visibility: hidden;
}

#adfinixAdLogo:hover {
    opacity: 1;
}

#adfinixAdLogo:hover span {
    width: 35px;
    visibility: visible;
}

@media (max-width: 299px) {
    body {
        overflow: hidden;
        /* width: fit-content; */
        transform: scale(0.85, 0.85);
        margin: 0;
        padding: 0;
        text-align: center;
        transform-origin: top left;
    }
}

@media (max-width: 250px) {
    body {
        overflow: hidden;
        /* width: fit-content; */
        transform: scale(0.79, 0.79);
        margin: 0;
        padding: 0;
        text-align: center;
        transform-origin: top left;
    }
}
/* 
.hand {
    animation: _mobile-bottom-rectangle-spin-card_swipe-hand-ani 2s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.5, 1, 0.5, 0.8);
} */



@keyframes _mobile-bottom-rectangle-spin-card_swipe-hand-ani {
    0% {
        transform: translate(-10%, 50%);
        left: 70%;
        bottom: 60vw;
        opacity: 0;
        -webkit-transform: translate(-10%, 50%);
        -moz-transform: translate(-10%, 50%);
        -ms-transform: translate(-10%, 50%);
        -o-transform: translate(-10%, 50%);
}

    20% {
        opacity: 1;
    }

    50% {
        bottom: 60vw;
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    to {
        /*bottom: 10vw;
        */opacity: 0;
        transform: translate(-50%, 50%) rotate(-5deg) ;
        left: 20%;
        -webkit-transform: translate(-50%, 50%) rotate(-5deg) ;
        -moz-transform: translate(-50%, 50%) rotate(-5deg) ;
        -ms-transform: translate(-50%, 50%) rotate(-5deg) ;
        -o-transform: translate(-50%, 50%) rotate(-5deg) ;
}
}
.bounce {
    -webkit-animation: bounce 1.1s both;
    animation: bounce 1.1s both;
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    72% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    81% {
        -webkit-transform: scale(0.84);
        transform: scale(0.84);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    89% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    95% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes bounce {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
    }

    38% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
        opacity: 1;
    }

    55% {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    72% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    81% {
        -webkit-transform: scale(0.84);
        transform: scale(0.84);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    89% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    95% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

.slide-in-right {
    -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }

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

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(1000px);
        transform: translateX(1000px);
        opacity: 0;
    }

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


.heartbeat {
    -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
    animation: heartbeat 1.5s ease-in-out infinite both;
}

@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    10% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    33% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}