body {
		margin: 100px;
		background: #eee;
		font-family: Verdana;
}

/* card */

.card {
	width: 300px ;
	height: 300px;
	margin: 0 auto;
	position: relative;
	perspective: 1400px;
	left: 0;
	transition: all 2s;
}


/* left card */

.left-card {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: pointer;
	box-shadow: 5px 0px 5px rgba(0,0,0,0.1);
	z-index: 1;
	
	transition: transform 2s;
	transform-style: preserve-3d;
	transform-origin: 0 0;
}
.left-card img{
	width: 100%;
}
 .left-card .card-front,
 .left-card .card-back {
	 position: abolsute;
	 width: 100%;
	 height: 100%;
	 top: 0;
	 left: 0;
	 backface-visibility: hidden;
 }
 
 .left-card .card-back {
	 background #f4f4f4;
	 transform: rotateY(180deg);
 }

/* open card */

.card.open .left-card {
		transform: rotateY(-180deg);
}
.card.open {
	left: 150px;
}




/* right card */

.right-card {
	width: 100%;
	height: 100%;
	background: #fff;
	text-align: center;
	padding: 30px;
	box-sizing:border-box;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
	color: #444;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.right-card h2{
	color: crimson;
}