#memory-container {
	margin: 0 auto;
	width: 510px;
	height: 550px;
	margin-top:20px;
}

/* entire container, keeps perspective */
.flip-container {
	-webkit-perspective: 2000px;
	perspective: 2000px;
}

/* flip speed goes here */
.flipper {
	position: relative;
}

.background-green {
	border-style: solid;
	border-top: solid green;
	box-sizing: border-box;
}

/* hide back of pane during swap */
.front-card, .back-card {
	width: 200px;
	position: absolute;
	/*top: 0;
	left: 0;*/
	background-color: grey;
}

.back-card div {
	word-wrap: break-word;
	text-align: center;
	width: 160px;
	height: 160px;
	margin: 0 auto;
	margin-top: 40px;
	font-size: 0.8em;
}

.card-image {
	width: 160px;
	height: 160px;
}

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

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

/* front pane, placed above back */
.front-card {
	z-index: 2;
	/* for firefox 31 */

}

/* back, initially hidden pane */

.show-card {
	animation: show 1s 1;
	opacity: 1;
}

.hide-card {
	animation: hide 1s 1;
	opacity: 0;
}

.memory-card, .front-card, .back-card {
	float: left;
	width: 160px;
	height: 160px;
}



@media only screen and (min-width:324px) and (max-width: 600px)
{
	.memory-card, .front-card, .back-card, .card-image {
		width: 100px;
		height: 100px;
	}
	
	.back-card div {
		padding: 10px;
		width: 80px;
		height: 80px;
		margin: 0 auto;
		margin-top: 10px;
	}
	
	#memory-container {
		width: 324px;
	}
}

@media only screen and (max-height: 750px)
{
.memory-card, .front-card, .back-card, .card-image {
		width: 100px;
		height: 100px;
	}
	
	.back-card div {
		padding: 10px;
		width: 80px;
		height: 80px;
		margin: 0 auto;
		margin-top: 10px;
	}
	#memory-container {
		width: 324px;
	}
}

@media only screen and (max-height: 550px)
{
	.memory-card, .front-card, .back-card, .card-image {
		width: 80px;
		height: 80px;
	}
	
	.back-card div {
		padding: 10px;
		width: 60px;
		height: 60px;
		margin: 0 auto;
		margin-top: 10px;
	}
	#memory-container {
		width: 264px;
	}
}

.memory-card {
	margin: 4px;
}