/* ----------------- first Stage */
.mockup {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000000;
}

.bg {
    position: absolute;
    width: auto;
    height: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%);
}

.phoneBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(502 / 1920 * 100vw);
    height: calc(855 / 1920 * 100vw);
}
.phone {
    position: absolute;
    width: 100%;
}
.pageBox, .dcIframe {
    position: absolute;
    width: 90%;
    height: 93%;
    top: 3%;
    left: 4%;
    border-radius: 2vw;
    overflow: hidden;
}
.page {
    position: absolute;
    width: 100%;
}
.dcIframe {
    border: none;
}






/* ----- media queries */
@media (max-aspect-ratio: 320/481) {
    .manual {
        transform: translateY(300%);
    }
    @keyframes heartBeat {
        100% {transform: translateY(300%) scale(0.9);}
    }
    .newBg {
        width: auto;
        height: 100vh;
    }
    .cta {
        bottom: 4%;
    }
}

@media (max-aspect-ratio: 320/630) {
    .manual {
        transform: translateY(400%);
    }
    @keyframes heartBeat {
        100% {transform: translateY(400%) scale(0.9);}
    }
    .bot2Box.move {
        width: calc(217 / 886* 100vw);
        transform: rotate(-7deg);
        top: 55%;
        left: 41%;
    }
    /* .bot1Box.move {
        width: calc(268/886*100vw);
        transform: rotate(5deg);
        transition: 0.3s ease-in-out;
        top: 45%;
        left: 69%;
    } */
    .bot1Box.move {
        transform: rotate(10deg);
        transition: 0.5s ease-in-out;
        top: 48%;
        left: 67%;
    }

}

@media (min-aspect-ratio: 540/721) {
    
}