@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: 96%;  min-height: 280px; margin-left: auto; margin-right: auto; height: auto; }

.well .well-item{ position: relative; float: left; width: 28.5%; min-height: 280px; margin: 1%; padding:1%; text-align:center; border:#004ea0 5px solid; border-radius:35px 0;}
.well .well-item img{
}
.correct{
  position: absolute;border-radius:20px;
  width: 94%; background:#fff; min-height:280px;
}
.correct img { margin:6% 0 1% 0;-moz-opacity:0.3; filter:alpha(opacity=30); opacity:0.3;max-width:94%; height:auto !important; height:100%;}
.correct h3 {font-size:1.6em; padding:15px 0;}
.correct p { line-height:24px; color:#777; font-size:1.2em; padding:0 2%;}
.opposite{
  min-height: 280px;
  width: 100%;
}
.opposite div{
  min-height: 280px;
  width: 100%;
}
.opposite-content{
  display: table;
  width: 100%;
  min-height: 280px; border-radius:23px;
  background-color: #004ea0;
}
.opposite-content-text{ display: table-cell; vertical-align: middle; text-align: center; color: white;}
.opposite-content-text h3 { font-size:1.6em; padding:15px 0 15px 0;}
.opposite-content-text p { padding:0 5%;font-size:1.2em;line-height:24px;}