@charset "UTF-8";

@-webkit-keyframes flipOutYtest {
  from {
    -webkit-transform: perspective(1400px);
    transform: perspective(1400px);
  }

  40% {
    -webkit-transform: perspective(1400px) rotate3d(1, 0, 0, 60deg);
    transform: perspective(1400px) rotate3d(1, 0, 0, 60deg);
    opacity: 1;
  }

  50% {
    -webkit-transform: perspective(1400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(1400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: perspective(1400px) rotate3d(1, 0, 0, 180deg);
    transform: perspective(1400px) rotate3d(1, 0, 0, 180deg);
    opacity: 0;
  }
}

@-webkit-keyframes flipInYtest {
  from {
    -webkit-transform: perspective(1400px) rotate3d(1, 0, 0, -180deg);
    transform: perspective(1400px) rotate3d(1, 0, 0, -180deg);
    opacity: 0;
  }

  50% {
    -webkit-transform: perspective(1400px) rotate3d(1, 0, 0, -90deg);
    transform: perspective(1400px) rotate3d(1, 0, 0, -90deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: perspective(1400px) rotate3d(1, 0, 0, -60deg);
    transform: perspective(1400px) rotate3d(1, 0, 0, -60deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(1400px);
    transform: perspective(1400px);
    opacity: 1;
  }
}

.img-on{
	-webkit-animation: flipOutYtest 0.75s linear;
	animation: flipOutYtest 0.75s linear;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.img-off{
	-webkit-animation: flipInYtest 0.75s linear;
	animation: flipInYtest 0.75s linear;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.wellDiv{
	width: 1000px;
	position: absolute;
	margin-top: -60px;
}

.wellDiv .well-item{
	position: relative;
	float: left;
	margin-left: 10px;
}
.wellDiv .well-item img{
	width: 100px;
	height: 50px;
}
.correct{
	position: absolute;
}