body { overflow:hidden; background: black;}
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas{ background: url('revv-racing-splash.jpg'); background-size: 100% 100%; }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; bottom; }
#unity-logo { position:fixed; width: 494px; height: 72px; top: 15%; left: 5%; background: no-repeat center; background-size: 60% 60%; }
#unity-progress-bar-empty { color:white; text-align: 15px 0%; position:fixed; bottom: 3%; left: 2%; width: 96%; height: 20px; background: url('progress-bar-empty-dark.png') no-repeat; background-size: 100% 100%; }
#unity-progress-bar-text { color:white; position:absolute; left: 1%; font-family: "Teko", sans-serif; letter-spacing: 3px }
#unity-progress-bar-full { height: 20px; background: url('progress-bar-full-dark.png') no-repeat; background-size: 100% 100%; }
#unity-footer { position: absolute; right:0%; }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
.loader {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      position: absolute;
      animation: rotate 1s linear infinite;
      right: 0%; 
      bottom: 5%;
    }
    .loader::before {
      content: "";
      box-sizing: border-box;
      position: absolute;
      inset: 0px;
      border-radius: 50%;
      border: 5px solid #FFF;
      animation: prixClipFix 2s linear infinite ;
    }

    @keyframes rotate {
      100%   {transform: rotate(360deg)}
    }

    @keyframes prixClipFix {
        0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
        25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
        50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
        75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
        100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
    }
}