#threejs-canvas {
	opacity: 0;
	transition: opacity 2s;
}

[loaded] #threejs-canvas {
	opacity: 1;
}

.scene {
	width: 50px;
	height: 50px;
	border: 1px solid #CCC;
	margin: 100px;
	perspective: 800px;
}

.input-group .scene {
	margin: 25px;
}

.cube {
	width: 50px;
	height: 50px;
	position: relative;
	transform-style: preserve-3d;
	transform: translateZ(-50px);
	transition: transform 1s;
}

.cube__face {
	position: absolute;
	width: 50px;
	height: 50px;
	border: 2px solid black;
	
	/*
	line-height: 50px;
	font-size: 40px;
	font-weight: bold;
	color: white;
	*/

	text-align: center;
	transition: transform 1s;
	background:white;
}

.cube--unpack .cube__face {
    /* transform: none; */
}

.cube.show-front {
	transform: translateZ(-50px) rotateY( 0deg);
}
.cube.show-right {
	transform: translateZ(-50px) rotateY( -90deg);
}
.cube.show-back {
	transform: translateZ(-50px) rotateY(-180deg);
}
.cube.show-left {
	transform: translateZ(-50px) rotateY( 90deg);
}
.cube.show-top {
	transform: translateZ(-50px) rotateX( -90deg);
}
.cube.show-bottom {
	transform: translateZ(-50px) rotateX( 90deg);
}
.cube.show-diagonal {
	transform: translateZ(-50px) rotateX(45deg) rotateZ(45deg);
}
.cube.show-unpack {
	transform: translateZ(-50px) rotateY( 0deg);
}

.cube.show-unpack .cube__face--top {
	transform: rotateX(0deg) translateZ(50px) translateY(-55px);
}

.cube.show-unpack .cube__face--left {
	transform: rotateY(0deg) translateZ(50px) translateX(-55px);
}

.cube.show-unpack .cube__face--right {
	transform: rotateY(0deg) translateZ(50px) translateX(55px);
}

.cube.show-unpack .cube__face--front {
	transform: translateZ(50px);
}

.cube.show-unpack .cube__face--bottom {
	transform: rotateX(0deg) translateZ(50px) translateY(55px);
}

.cube.show-unpack .cube__face--back {
	transform: rotateY(0deg) translateZ(50px) translateX(-110px); /* attached to left HAS HITCH */
	transform: rotateY(0deg) translateZ(50px) translateX(110px); /* attached to right */
}

.cube__face--front {
	background-image: url("../img/spatial-reasoning/svg-circle-outline.svg");
	background-size: 100%;
	transform: rotateY( 0deg) translateZ(25px);
}
.cube__face--right {
	background-image: url("../img/spatial-reasoning/svg-rectangle.svg");
	background-size: 100%;
	transform: rotateY( 90deg) translateZ(25px);
}
.cube__face--back {
	background-image: url("../img/spatial-reasoning/svg-triangle.svg");
	background-size: 100%;
	transform: rotateY(180deg) translateZ(25px);
}
.cube__face--left {
	background-image: url("../img/spatial-reasoning/svg-diamond-outline.svg");
	background-size: 100%;
	transform: rotateY(-90deg) translateZ(25px);
}
.cube__face--top {
	background-image: url("../img/spatial-reasoning/svg-cross.svg");
	background-size: 100%;
	transform: rotateX( 90deg) translateZ(25px);
}
.cube__face--bottom {
	background-image: url("../img/spatial-reasoning/svg-square.svg");
	background-size: 100%;
	transform: rotateX(-90deg) translateZ(25px);
}

label {
	margin-right: 10px;
}