@charset "UTF-8";
 @-webkit-keyframes flipOutYtest {
 from {
 -webkit-transform: perspective(1400px);
 transform: perspective(1400px);
}
 40% {
 -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
 transform: perspective(1400px) rotate3d(0, 1, 0, 60deg);
 opacity: 1;
}
 50% {
 -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
 transform: perspective(1400px) rotate3d(0, 1, 0, 90deg);
 opacity: 0;
}
 to {
 -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
 transform: perspective(1400px) rotate3d(0, 1, 0, 180deg);
 opacity: 0;
}
}
.test {
	-webkit-animation: flipOutYtest 0.75s linear;
	animation: flipOutYtest 0.75s linear;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
 @-webkit-keyframes flipInYtest {
 from {
 -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
 transform: perspective(1400px) rotate3d(0, 1, 0, -180deg);
 opacity: 0;
}
 50% {
 -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
 transform: perspective(1400px) rotate3d(0, 1, 0, -90deg);
 opacity: 0;
}
 60% {
 -webkit-transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
 transform: perspective(1400px) rotate3d(0, 1, 0, -60deg);
 opacity: 1;
}
 to {
 -webkit-transform: perspective(1400px);
 transform: perspective(1400px);
 opacity: 1;
}
}
.test2 {
	-webkit-animation: flipInYtest 0.75s linear;
	animation: flipInYtest 0.75s linear;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.well {
	width: 1200px;
	min-height: 250px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	overflow: hidden;
	margin-top: 30px;
}
.well .well-item {
	position: relative;
	float: left;
	width: 23%;
	min-height: 250px;
	margin: 1%;
}
.well .well-item img {
	width: 100%;
	min-height: 250px;
}
.correct {
	position: absolute;
	width: 100%;
}
.opposite {
	min-height: 250px;
	width: 100%;
}