#mariole_card {
	display: inline-block;
	margin: auto 20px;
	width:160px;
	height:232px;
	background-image:url("assets/cartes.png");
}

#mariole_game .layout input { 
	-webkit-appearance: none;
	border-radius: 10px;
	font-size: x-large;
}
#mariole_answer_next { margin: auto; }
#mariole_answer_color input {
	width: 150px;
	height: 100px;
}
#mariole_answer_symbol img {
	margin: 1em;
	border: 3px outset gray;
}
#mariole_answer_value input {
	font-size: x-large;
	padding: 1em;
	margin: 0.5em;
}

/* retournement de carte */

#mariole_flipcard_stack {
	display: inline-block;
	background-image:url("assets/dos.png");
	width: 160px;
	height: 232px;
}
#mariole_flipcard {
	position: relative;
	width: 160px;
	height: 232px;
	perspective: 500px;
}
#mariole_flipcard_back, #mariole_flipcard_front {
	position:absolute;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	color: green;
	background-color: #f00;
	padding: 10px;
	backface-visibility: hidden; 
	-webkit-backface-visibility: hidden; 
}
#mariole_flipcard_back { background-image:url("assets/dos.png"); }
#mariole_flipcard_front {
	background-image:url("assets/cartes.png");
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}
.mariole_flipped #mariole_flipcard_back {
	transform: rotateY(-180deg);
	transition: transform 0.5s ease-in;
	-webkit-transform: rotateY(-180deg);
	-webkit-transition: -webkit-transform 0.5s ease-in;
}
.mariole_flipped #mariole_flipcard_front {
	transform: rotateY(0deg);
	transition: transform 0.5s ease-in;
	-webkit-transform: rotateY(0deg);
	-webkit-transition: -webkit-transform 0.5s ease-in;
}
.mariole_flipped #mariole_flipcard {
	transform: translateX(-185px);
	transition: transform 0.5s ease-in;
	-webkit-transform: translateX(-185px);
	-webkit-transition: -webkit-transform 0.5s ease-in;
}
#mariole_fakecard { display: inline-block; width: 160px; height: 232px; visibility: hidden; } /* just to center main card */