html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
html, body {
    height: 100%;
}
canvas {
    display: block;
}
body {
    margin: 0;
}
#unity-container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-image: url("background.png");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
#unity-canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    /*background: #231F20;*/
}
#loading-cover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
#unity-background {
    width: 100% !important;
    height: 100% !important;
	position: relative;
}
#unity-loading-bar {
	width: 300px;
	height: 95px;
	
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-position-x: center;
    background-position-y: center;
}
#unity-logo {
    text-align: center;
}
#unity-logo img {
    max-width: 80%;
}
#unity-progress-bar-empty {
    width: 100%;
    height: 100%;
    text-align: left;
	background-image: url("loading-bar-empty.svg");
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}
#unity-progress-bar-mask {
    width: 100%;
    height: 100%;
    -webkit-mask-image: url("background.png");
    -webkit-mask-size: 0%;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("background.png");
    mask-size: 0%;
    mask-repeat: no-repeat;
}
#unity-progress-bar-full {
    width: 100%;
    height: 100%;
    background-image: url("loading-bar.svg");
    background-repeat: no-repeat;
    background-position: center;
}
.light #unity-progress-bar-empty {
    border-color: black;
}
.light #unity-progress-bar-full {
    /*background: black;*/
	opacity: 0;
}

#unity-fullscreen-button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    background: url('fullscreen-button.png') no-repeat center;
    background-size: contain;
}

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    position: absolute;
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: auto; 
    margin-bottom: auto; 
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }