.objviewer{
    width: 50%;
    height: 500px;
    max-width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    position:relative;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(228,228,228,1) 100%);
    
    background: url('/wp-content/assets/grass.jpg');
    background-position-x: 0%;
    background-position-y: 0%;
    background-position: 49% 66%;
}
.objviewer:not([data-loaded="100"]):after{
    content: '';
    width:100%;
    height:100%;
    display:block;
    background: rgba(255,255,255,0.5);
    z-index: 1;
    position: absolute;
    top:0;
    left:0;
}
.objviewer:not([data-loaded="100"]):before{
    content: attr(data-loaded)"%";
    width:50px;
    height:50px;
    display:flex;
    justify-content: center;
    align-items: center;
    color:white;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
    position: absolute;
    font-size: 12px;
    line-height: normal;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    border-radius:100%;
    z-index: 2;
}
.objviewer > *{
    outline: none;
}
.objviewer[data-error]:before{
    display: none !important;
}
.objviewer__error{
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    position: absolute;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius:10px;
    z-index: 2;
    color: white;
}