
.memory_row {
  list-style-type: none;	
}

#timer {
  position:absolute;
	right:50px;
	top:20px;
	font-size:40px;
}

#message {
	position:absolute;
	right:50px;
	font-size:50px;
	top:150px;
}

#game_finished {
  position:absolute;
  top:-1000px;
  -webkit-transition:top 1s;
  -moz-transition:top 1s;
  transition:top 1s;
  background:#fff;
  width:500px;
  left:280px;
  height:180px;
  z-index:1000;
  font-size:22px;
  color:#fff;
  text-align:center;
  padding-top:80px;
  background:#384f95;
  opacity:0.8;
}
#game_finished a {
  font-weight: bold;
}

#game_finished a:hover {
	cursor:pointer;
	color:#fff;
	text-decoration:none;

}

.memory_cell {
  float:left;
  width:119px;
  height:168px;
  margin:0px 10px;
  cursor:pointer;
  position:relative;
	perspective:1000px;
	-webkit-perspective: 1000px;
  z-index:1;
}

.memory_cell_shake {
  animation-name: shake; 
	animation-duration: 0.8s; 
	transform-origin:50% 50%; 
	animation-iteration-count: infinite; 
	animation-timing-function: linear; 

	-moz-animation-name: shake; 
	-moz-animation-duration: 0.8s; 
	-moz-transform-origin:50% 50%; 
	-moz-animation-iteration-count: infinite; 
	-moz-animation-timing-function: linear; 

	-webkit-animation-name: shake; 
	-webkit-animation-duration: 0.8s; 
	-webkit-transform-origin:50% 50%; 
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-timing-function: linear; 
}

.memory_card {
	width:100%;
	height:100%; 
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;

  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

.memory_uncover > .memory_card {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.memory_face {
	position:absolute;
	width:118px;
	height:168px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.memory_front {

	background: url('../img/D.png');
}

.memory_back {
	background:#fff;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
  box-sizing: border-box;
  display: block;
}

.memory_back img {
	width:100%;
	height:100%;
}



@keyframes shake{ 
0% { transform: translate(2px, 1px) rotate(0deg); } 
10% { transform: translate(-1px, -2px) rotate(-1deg); } 
20% { transform: translate(-3px, 0px) rotate(1deg); } 
30% { transform: translate(0px, 2px) rotate(0deg); } 
40% { transform: translate(1px, -1px) rotate(1deg); } 
50% { transform: translate(-1px, 2px) rotate(-1deg); } 
60% { transform: translate(-3px, 1px) rotate(0deg); } 
70% { transform: translate(2px, 1px) rotate(-1deg); } 
80% { transform: translate(-1px, -1px) rotate(1deg); } 
90% { transform: translate(2px, 2px) rotate(0deg); } 
100% { transform: translate(1px, -2px) rotate(-1deg); } 
} 

@-moz-keyframes shake{ 
0% { -moz-transform: translate(2px, 1px) rotate(0deg); } 
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); } 
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); } 
30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 
40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); } 
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); } 
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 
90% { -moz-transform: translate(2px, 2px) rotate(0deg); } 
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); } 
} 

@-webkit-keyframes shake { 
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } 
} 
