body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { border-radius: 0 20px 0px 20px;
    background-image: url('interactives_background_image.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;}
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo::before {
    content: "3D Interactive model loading";
}
#unity-logo { width: 250px;
    height: 20px; 
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-bottom: 10px; }
#unity-progress-bar-empty {width: 250px; 
    height: 27px;
    background: transparent;
    margin: 0 auto; 
    overflow: visible;
    border: 3px solid #fff; 
   margin-bottom: 24px; 
   display: flex;
    box-sizing: border-box; 
    position: relative; 
    overflow: hidden;
    align-items: center;
    justify-content: flex-start;}
#unity-progress-bar-full { height: 70%;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 3px;
    margin-right: 3px;
    background-color: #fff;
    transition: width 3s cubic-bezier(.4,3.3,.6,1);
    border-radius: 0px;
box-sizing: border-box;
width: 0%; }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }