#game {
  background: #fff;
	padding: 5px;
}
.clear { clear: both;}

/* define the 3D perspective view and dimension of each card. */
.card1, .card2 {
  -webkit-perspective: 600;
	-o-perspective: 600;
	-moz-perspective: 600;
	-ms-perspective: 600;
	perspective: 600;
	-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
	width: 128px;
	height: 169px;
	float: left;
	padding: 5px;
	
}


.face {
  border-radius: 10px;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left:0;
	
	
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	transition: all 1s;
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}



.front {
  background: #eaa;
	-webkit-transform: rotate3d(0,1,0,-180deg);
	-o-transform: rotate3d(0,1,0,-180deg);
	-moz-transform: rotate3d(0,1,0,-180deg);
	-ms-transform: rotate3d(0,1,0,-180deg);
	transform: rotate3d(0,1,0,-180deg);
	z-index: 8;
}

.back {
  
	background: #966;
	z-index: 10;
}

.card-flipped .front {
  -webkit-transform: rotate3d(0,1,0,0deg);
	-o-transform: rotate3d(0,1,0,0deg);
	-moz-transform: rotate3d(0,1,0,0deg);
	-ms-transform: rotate3d(0,1,0,0deg);
	transform: rotate3d(0,1,0,0deg);
	z-index: 8;
}

.card-flipped .back {
  -webkit-transform: rotate3d(0,1,0,180deg);
	-o-transform: rotate3d(0,1,0,180deg);
	-moz-transform: rotate3d(0,1,0,180deg);
	-ms-transform: rotate3d(0,1,0,180deg);
	transform: rotate3d(0,1,0,180deg);
	z-index: 10;
}

.cardACESpades {
  background: url(../images/AceSpades.png);
	background-repeat: no-repeat;
}

.cardACEHearts {
  background: url(../images/AceHearts.png);
	background-repeat: no-repeat;
}

.cardBack {
  background: url(../images/cardback.png);
	background-repeat: no-repeat;	
}