#device-overlay-qrcode {
    width: 100%;
    height: 100%;
    position: fixed;
}

    #device-overlay-qrcode .qr-code-overlay {
        background: black;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        position: fixed;
        z-index: 0;
    }

    #device-overlay-qrcode .cover-qr-code {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 10;
        padding-top: 200px;
    }

#device-overlay-qrcode .cover-qr-code p {
    color: white;
    font-size: 20px;
    padding: 10px 0px; 
}

html, body {
    background: none !important;
    width: 100% !important;
    height: 100% !important;
}

    body:after {
        background: none !important;
    }

#device-overlay-qrcode {
    width: 100%;
    height: 100%;
    position: relative;
    max-height: 100%;
    overflow: hidden;
    background: #1e356e
}
#sky-background {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}
#ground-background {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 10;
}

#moon-background {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 11;
}
#characters-wrap {
    width: 100%;
    height: auto;
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 12;
}

#characters-background {
    width: auto;
    margin: 0px auto;
    display: block;
}

.box-desktop {
    z-index: 20;
    width: 500px;
    position: absolute;
}
.box-conent img {
    float: left;
    width: 150px;
}
.box-conent p {
    font-size: 20px;
    color: white;
    font-family: 'UVNVan';
    margin-top: 17px;
}

.message-btn {
    width: 100px;
}
.message-btn {
    width: 100px;
    display: block;
    float: right;
    margin-right: 20px;
    cursor: pointer
}
.box__content {
    padding-bottom: 20px !important;
}
#desktop-message {
   
    -webkit-animation: jump 1.5s ease 0s infinite normal ;
    animation: jump 1.5s ease 0s infinite normal ;
}
#desktop-message,
#desktop-message-2 {
    width: 500px;
    left: 50%;
    margin-left: -250px;
    top: 17%;
}

#logo {
    position: absolute;
    z-index: 20;
    width: 100px;
    left: 50%;

    top: 3%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

    #logo img {
        width: 100%;
        height: auto;
                top:16px;
    }

.box-desktop .box__content {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 30px !important;
}


#desktop-message-2 .box-conent p span {
    font-size: 20px;
    font-weight: bold;
    color: #ffe48f;
}

.box-desktop .btn-close {
    position: absolute;
    top: -17px;
    right: -17px;
    cursor: pointer;
}


@-webkit-keyframes jump {
    0%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    20%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40%{
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    50%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    60%{
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    80%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes jump {
    0%{
        transform: translateY(0);
    }
    20%{
        transform: translateY(0);
    }
    40%{
        transform: translateY(-30px);
    }
    50%{
        transform: translateY(0);
    }
    60%{
        transform: translateY(-15px);
    }
    80%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(0);
    }
}


@media screen and (max-width: 1366px) {
    #characters-background {
        width: 65%;
    }
    #logo2 {
        top: 14% !important;
    }
}

#logo2 {
    z-index: 20;
    position: absolute;
    width: 25%;
    left: 50%;
    top: 12%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

#logo2 img{
    width: 100%;
}