.memory {
	height: 100%;
	background: #EEEEEE;
}

.memory .container {
	width: 100%;
	height: 100%;
	font-size: 0;
	white-space: nowrap;
}

.memory .buttonContainer {
	width: 400px;
	margin: auto;
	margin-bottom: 15px;
}

.memory .memoryPage {
	display: inline-block;
	width: 100%;
	height: 100%;
	font-size: 0.85rem;
	white-space: normal;
	padding: 50px;
	box-sizing: border-box;
	overflow: hidden;
	text-align: center;
	vertical-align: top;
	position: relative;
	color: #333333;
}

.memory .memoryPage .center {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.memory .memoryPage .questionCount {
	font-size: 0.7rem;
}

.memory .memoryPage .question {
	margin: auto;
	margin-bottom: 20px;
}

.memory .memoryPage img {
	display: block;
	height: 400px;
	margin: auto;
}

.memory .memoryPage .answer {
	opacity: 0;
	margin: auto;
	margin-top: 20px;
}

.memory .memoryPage .answer.display {
	opacity: 1;
}

.memory .timer {
	display: none;
	position: absolute;
	width: 250px;
	height: 250px;
	right: 50px;
	bottom: 50px;
	
	background-image: url("/images/clock.svg");
	background-size: contain;
	
	-webkit-transform-origin: center center;
	transform-origin: center center;
}

.memory .timer.active {
	display: block;
}

.memory .timer canvas {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}