body, html {
    margin:0;
    overflow: hidden;
    font-size: 16px;
    background-image: url('../images/background.png');
    background-repeat: no-repeat;
    background-size: cover;
}

img {
    height: auto;
    width: auto;
    object-fit: contain;
    object-position: top center;
}

@font-face {
    font-family: NouvelR;
    src: url("../../fonts/NouvelR-Regular.ttf");
}

@font-face {
    font-family: NouvelR;
    src: url("../../fonts/NouvelR-Bold.ttf");
}

.objCover {
    object-fit: cover;
}

#ar-button {
    position: absolute;
    top: 1rem;
    left: 1rem;
    /*width: 4.5rem; */
    width: 15rem; 
}

#ar-button img {
    width: 100%;
    /* width: 4.5rem; */
}

/*#ar-button-mobile {
    display: none;
}*/

.QRcode {
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 2vw;
    top: 13vh;
    display: none;
    border: 2px solid #000;
    background-color: #ffff;
    padding: 1.4rem;
    max-width: 13rem;
}

.QRcode h1 {
    font-family: NouvelR;
    font-weight: bold;
    color: #000;
    text-align: center;
    font-size: 1.2rem;
}

.QRcode p {
    /*margin: 0.8rem 0;*/
    color: #000;
    font-size: 1rem;
    line-height: 0.9rem;
    font-family: NouvelR;
}

.QRcode img {
    width: 65%;
}

.closeQRcode {
    display: flex;
    justify-content: center;
    background-color: rgba(202, 202, 202, 0.952);
    text-decoration: none;
    padding: .4rem 2rem;
    z-index: 1;
    width: 3rem;
    border-radius: 7.7px;
    color:#000;
    margin: auto;
    margin-top: 0.3rem;
}

.loadingContent {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 600;
    color: rgb(74, 144, 226);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.loading {
    width: 270px;
    height: 8px;
    border-radius: 6.5px;
    background-color: #fff;
    margin-bottom: 11px;
}

.loading .barBlue {
    position: absolute;
    height: 8px;
    width: 0;
    border-radius: 6.5px;
    background-color: rgb(74, 144, 226);
}

.model,
#container3d_replace {
    width: 100vw;
    height: 100vh;
    transition: all 0.5s ease;
}

.main-headline {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    top: initial;
    bottom: 4.375rem;
    text-align: center;
    width: 100vw;
}

.main-headline h1 {
    font-family: NouvelR;
    font-style: normal;
    font-weight: bold;
    font-size: 2.125rem;
}

.close-button {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    padding: 0.3rem;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.video-background {
    /*position: absolute;*/
    /*top: 26%;*/
    /*z-index: 2;*/
    /*transform: translate(0, -10%);*/
    width: 440px;
    height: 255px;
}

.universal-wrapper {
    position: absolute;
    width: 530px;
    height: 100vh;
    right: 0px;
    top: 0px;
    background: #FFFFFF;
    display: none;
}

.universal-headline {
    font-family: NouvelR;
    font-style: normal;
    font-weight: 900;
    font-size: 1.65rem;
    line-height: 1.4rem;
    color: #000000;
}

.universal-text {
    font-family: NouvelR;
    font-style: normal;
    font-weight: normal;
    font-size: 1.125rem;
    line-height: 1.3rem;
    color: #000000;
}

.arIcon {
    display: none;
}

@media (max-width: 1399px) {
	html, body{
		font-size: 15px;
    }
}

@media (max-width: 1199px) {
	html, body{
		font-size: 14px;
    } 
}

@media (max-width: 991px) {
	html, body{
		font-size: 13px;
    }    
}

@media (max-width: 767px) {
	html, body{
		font-size: 12px;
    }   

    .model,
    #container3d_replace {
        width: 100vw;
        height:100vh;
        transition: all 0.5s ease;
    }

    .QRcode {
        left: 2vw;
        top: 13vh;
    }

    .universal-wrapper {
        top: initial;
        bottom: 0;
        height: auto;
        width: 100vw;
        padding: 0 0 1rem;
        background: #FFFFFF;
    } 

    .video-background {
        width: 100%;
        height: 170px;
    }

    .universal-text {
        line-height: 1.3rem;
    }

    #ar-button {
        width: 13rem; 
    } 
}

@media (max-width: 575px) {
    html, body{
		font-size: 10px;
    }
}

@media (max-width: 360px) {
    
}