#app {
	font-family: HelveticaNeue-Light, Helvetica, Arial, sans-serif;
	text-align: center;
	margin-top: 2em;
	-webkit-tap-highlight-color: transparent;
}

#popup {
	z-index: 999;
	min-width: 18em;
	padding: 4em 2em 12em;
	background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 1px 0 rgba(0,0,0,0.3), 0 0 6px 2px rgba(0,0,0,0.15);

	position: fixed;
	top: 10px;
	left: 50%;

	transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
}

.hidden {
	display: none;
}

.grid {
	display: inline-block;
	width: 6em;
	height: 6em;

	perspective: 800px;
	-webkit-perspective: 800px;
}

.slot, .tile, .front, .back {
	position: absolute;
	top: 0;
	left: 0;
}

.tile, .front, .back {
	width: 100%;
	height: 100%;
}

.front, .back {
	stroke: white;
	stroke-width: 2px;

	backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;

	transition: transform 0.3s ease-out;
	-o-transition: -o-transform 0.3s ease-out;
	-moz-transition: -moz-transform 0.3s ease-out;
	-webkit-transition: -webkit-transform 0.3s ease-out;
}

.front {
	z-index: 2;
	transform: rotateY(0deg); /* preset angle */
	-o-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
}

.back {
	transform: rotateY(180deg); /* preset angle (flipped) */
	-o-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

.unexposed svg use:hover {
	cursor: pointer;
}

#timer {
	color: tomato;
}

.bonus {
	position: absolute;
	left: 50%;
	top: 4.2em;
	color: green;

	transform: translate(1em, 0);
	-o-transform: translate(1em, 0);
	-moz-transform: translate(1em, 0);
	-webkit-transform: translate(1em, 0);

	animation: rise 1.5s;
	-webkit-animation: rise 1.5s;
}

@keyframes rise {
	to {
		top: 3em;
		color: transparent;
		animation-timing-function: ease;
	}
}
@-webkit-keyframes rise {
	to {
		top: 3em;
		color: transparent;
		animation-timing-function: ease;
	}
}