html,body {
    height: 100%;
    width: 100%;
}
body {
	font-family: Monospace;
	color: #fff;
	margin: 0px;
	overflow: hidden;
}
#player {
    height: 100%;
    width: 100%;
}
.buttonContainer {
    display: none;
	position:absolute;
	top:50px;
	left:50px;
	width:50px;
	height:50px;
}
/*.color {
	background-image:url("../img/swatchOverlay.png");
}*/
.button {
	border-radius: 0px;
	width:40px;
	height:40px;
	margin:15px;
	border: 1px #ccc solid;
	cursor:pointer;
	background-size: contain;
	float:left;
}
#gold {
	background-color:#c5b9a6;
}
#black {
	background-color:#020202;
}
#silver {
	background-color:#cccccc;
}
#white {
	background-color:#ffffff;
}

.container {
	opacity:0;
}

.container.done {
	animation: fadeIn 0.5s linear;
	animation-fill-mode: forwards;	
}



.loader:after {
	border-radius: 50%;
	width: 10em;
	height: 10em;
	content:" ";
}
.loader {
	width:50px;
	height:50px;
	left:calc(50% - 30px);
	top:calc(50% - 30px);
	border-radius:50%;
	font-size: 10px;
	position: absolute;
	text-indent: -9999em;
	border-top: 10px solid #ccc;
	border-right: 10px solid #ccc;
	border-bottom: 10px solid #ccc;
	border-left: 10px solid #aaa;
	transform: translateZ(0);
	animation: load 1.1s infinite linear;
}

.loader.done {
	animation: fadeOut 0.5s linear;
	animation-fill-mode: forwards;
}

@keyframes load {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
} 

@keyframes fadeIn {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

@keyframes fadeOut {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}