/* Land & repeat game*/

.land {
  background-color:tomato;
  width:100%;
  height: 100%;
  min-height: 100%;
  position:absolute;
  top:0px;
  left:0px;
  z-index:1;
  display: flex;
  
  transform: scale(1);
  transition: all .2s ease-in-out;
  transition-duration: 700ms, 0s;
  transition-delay: 0s, 1s;   
}

.land-hide{
  transform: scale(0);
  transition: all .2s ease-in-out;
  transition-duration: 700ms, 0s;
  transition-delay: 0s, 1s;  
}

.land-msg {
  background-color:tomato;
  width:53%;
  height:50%;
  min-height: 200px;
  margin: auto auto;
}

.memorama-flip{
  -webkit-transform: rotateY(0deg);  
          transform: rotateY(0deg);
  
  animation-name: memorama-flip;
  animation-duration: 1200ms;
  animation-delay: 800ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;    
  animation-fill-mode: forwards;    
}

@keyframes memorama-flip {     
      50% {transform: rotateY(180deg) ;}    
} 

.memorama{
  color:orange;
  font-size:11vw;
  font-family: 'Concert One', cursive;
}

/* button style by: http://callmenick.com/post/stylish-css-buttons*/
.btn-play{
  position:absolute;
  left:35%;
  top:95%;
  font-size:2vw;
  margin: 0 10px 0 0;
  padding: 15px 45px;  
  color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px #27496d;
  outline:none;
  
  visibility:hidden;
  opacity:0; 
  animation-name: btn-play-show;
  animation-duration: 800ms;
  animation-delay: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;    
  animation-fill-mode: forwards;  
}

@keyframes btn-play-show { 
  100% {    
         visibility:visible;
         opacity:1;
       }
}

.btn-play:hover,
.btn-play.hover {
  background-color: #417cb8
}

.btn-play:active,
.btn-play.active {
  background-color: #417cb8;
  box-shadow: 0 5px #27496d;
  transform: translateY(5px);
}

.btn-play-again{
  position:absolute;
  left:35%;
  top:60%;
}

.result-msg{
  color:orange;
  font-size:4vw;
  font-family: 'Concert One', cursive;
}

/* Game*/
.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 10px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center; 
}

.card
{
  width:100%;  
  height: 100%;
  position:relative;
}
.card-front, 
.card-back
{
  position:absolute;
  top:0px;
  left:0px;  
  width:100%;  
  height: 100%;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  
    -webkit-transition: -webkit-transform 300ms;
    transition: transform 300ms;
  
    -webkit-transition-timing-function: linear;
            transition-timing-function: linear;    
}

.card-back {
-webkit-transform: rotateY(0deg);  
    transform: rotateY(0deg);
}

.card-back-flip 
{
    -webkit-transform: rotateY(270deg);
            transform: rotateY(270deg);
    scale(-1, 1)
}

.card-front {    
    -webkit-transform: rotateY(-270deg);
            transform: rotateY(-270deg);
}

.card-front-flip
{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    scale(-1, 1)
}

.card-front-no
{
  animation-name: card-front-no;
  animation-duration: 200ms;
  animation-timing-function: lineal;
  animation-iteration-count: 15;    
  animation-fill-mode: forwards;  
}

@keyframes card-front-no {   
  0%  { transform: translateX(0px); }    
  33% { transform: translateX(4px); }  
  70% { transform: translateX(-7px);}
  100%{ transform: translateX(3px); }  
} 

.card-front-yes
{
  animation-name: card-front-yes;
  animation-duration: 200ms;
  animation-timing-function: ease;
  animation-iteration-count: 5;    
  animation-fill-mode: forwards;  
}

@keyframes card-front-yes {     
  0%  { transform: translateY(0px);}    
  33% { transform: translateY(3px);}  
  70% { transform: translateY(-7px);}
  100%{ transform: translateY(4px);}  
}