@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */



@-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.5s linear;
  animation: flipOutYtest 0.5s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.test2 div {position: absolute; top: 0px; left: 0px; color#fff; background: rgba(0,0,0,0.3);}
.test div {position: absolute; top: 0px; left: 0px; color#fff;background: rgba(0,0,0,0.3);}

@-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.5s linear;
  animation: flipInYtest 0.5s linear;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}



.well{  }

.well .well-item{ position: relative; float: left; width: 300px; height: 242px; border:10px solid #a0a0a0; overflow: hidden;  margin: 23px}
.well .well-item img{
 
}
.correct{
  position: absolute;
  width: 100%;
}
.opposite{
  height: 344px;
  width: 100%;
}
.opposite div{
 height: 344px;
  width: 100%;
}
.opposite .title {padding-top: 120px; margin: 0px}
.opposite-content{
  display: table;
  width: 100%;
  min-height: 340px;
  background-color: #D95E22;
}
.opposite-content-text{ display: table-cell; vertical-align: middle; text-align: center; color: white; font-size: 24px; }
@media screen and (max-width: 750px){
   
   .well .well-item {width: 42%; margin: 10px; border: 3px solid #a0a0a0; height: 122px;}
   .opposite .title {padding-top: 0px;}
   .opposite {height: 133px; overflow: hidden;}
   .opposite div {height: 100px;}
}