body{
	background-color:#b2bdc6;
	background-image:url('cuir.jpg');
	background-size:100% 110%;
	

}

.containerFlip {

	width: 400px;
	height: 480px;
	position: relative;
	margin: 0 auto 40px;
	-webkit-perspective: 2000px;
	-moz-perspective: 2000px;
	perspective: 2000px;
	transform:rotateZ(5deg);
}
.flip{

	
	margin-top:40px;
	width:100%;
	height:100%;
	position:absolute;
	-webkit-transition: -webkit-transform 2s;
	-webkit-transform-style: preserve-3d;
	-moz-transition: -moz-transform 2s;
	-moz-transform-style: preserve-3d;
	-ms-transition: transform 2s;
	-ms-transform-style: preserve-3d;
	transition: transform 2s;
	transform-style: preserve-3d;
}

.faceA, .faceB, .faceAA, .faceBA, .facefin , .facefin_b{

	position:absolute;
	display:block;
	width:100%;
	height:100%;
	background:url(carreau.jpg);
	box-shadow:
	0px 2px 2px 0px rgba(0, 0, 0, 0.5),
	0px 2px 2px 0px rgba(0, 0, 0, 0.5) inset;

	border-left:1px solid #CCC;
	border-radius :0 20px 20px 0;
	-moz-border-radius :0 20px 20px 0;
	-webkit-transform:translatex(50%);
	-moz-transform:translatex(50%);
	-ms-transform:translatex(50%);
	transform:translatex(50%);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	}
	
.faceB,.faceBA,.facefin_b{
	
	-webkit-transform:rotateY(180deg) translatex(-50%);
	-ms-transform:rotateY(180deg) translatex(-50%);
	-moz-transform:rotateY(180deg) translatex(-50%);
	transform:rotateY(180deg) translatex(-50%);
	border-radius : 20px 0 0 20px ;
	
	
}

.faceAA{
	background:url(ori.jpg);
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	-ms-background-size: 100% 100%;
	box-shadow:
	0px 2px 2px 0px rgba(0, 0, 0, 0.5),
	0px 2px 2px 0px rgba(0, 0, 0, 0.5) inset;
}
.faceBA{
	background:url(faceb.jpg);
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	}

.facefin{
	background:url(faceb.jpg);
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
}

.facefin_b{
	background:url(face_fin.jpg);
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	box-shadow:
	0px 2px 2px 0px rgba(0, 0, 0, 0.5),
	0px 2px 2px 0px rgba(0, 0, 0, 0.5) inset;
	}

.bouton{
	
	margin-right:auto;
	width:100px;
	text-align: center;
	padding: .5em 2em .55em;
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

button {
cursor:pointer;
-moz-box-shadow: 0px 0px 10px #343434;
-webkit-box-shadow: 0px 0px 10px #343434;
box-shadow: 0px 0px 10px #343434;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #656565;
background:#cfcfcf;
background-image: -webkit-gradient(linear, left top, left bottom, from(#cfcfcf), to(#656565));
background-image: -moz-linear-gradient(top center, #cfcfcf, #656565);
}

button:hover {
	color:orange;
}