/************************************************
ELEMENTS Z-INDEX 
*************************************************/
.page-visual {
z-index: 9;
}
#game_match_board {
	z-index: 9999;
}
#game_cards  {
	z-index: 99999;
}
#game_results_options {
  z-index: 99999 !important;
  opacity:1 !important;
  
}
#redeem_button {
  z-index:99 !important;
  
}
#lost_button_link_out {
  z-index:999999 !important;
   opacity:1 !important;
  
}
#game_results_screen {
	z-index: 99;
	
}


/************************************************
GAME BOARD 
*************************************************/
#game_match_board {
	position: absolute;
	width: 100% !important;
	height: 750px !important;
	left:0;
	top:0;
 _border: solid 1px yellow;
}
@media only screen and (max-width : 767px) {
#game_match_board { 
  width: 410px !important;
  height: 690px !important;
}
}

/*CARDS*/
#game_cards {
	position: absolute;
	top:120px;
	left:180px;
	width: 915px;
	height: 1px;
 _border: solid 1px red;
}

/************************************************
FADE IN MATCH GAME
*************************************************/
.card-wrapper {
  width: 305px;
  height: auto;
  perspective: 600px;
  float:left;
  margin:0px;
 _border: solid 1px blue;
}
.card-wrapper img{
  width: 100%;
}

/***************************
CARD FRONT: 
THIS IS WHAT USER SEES FIRST
****************************/
/*CARD FRONT: BOTTLE EMPTY*/
 .card-front {
  position: absolute;
 top: 0;
 left: 0;
  z-index: 999;
   opacity: 1;
  _background-color: pink;
 }
/*CARD FRONT: BOTTLE EMPTY WHEN CLICKED*/
.is-flipped .card-front,
.card-1.is-flipped .card-front,
.card-2.is-flipped .card-front,
.card-3.is-flipped .card-front{
  opacity: 1;
    animation-name: card-front-fade-out;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-delay: 0s;
   z-index: 99999;
   cursor: auto;
 }
 @keyframes card-front-fade-out {
  0% {
   transform: rotate(0deg);
   opacity: 1;
   
  }
 50% {
  transform: rotate(-2160deg);
  opacity: 1;
  }
 99% {
  transform: rotate(-2160deg);
   
  }
  100% {
   opacity: 0;

   
  }
}
/***************************
CARD BACK: 
THIS IS WHAT MATCHES
****************************/
 .card-back {
   opacity: 0;
  position: absolute;
 top: 0;
 left: 0;
  z-index: 9999;
  _background-color: aqua;
  cursor: pointer;
  position: relative;
 }
/*WHEN CLICKED*/
 .is-flipped .card-back{
  _background-color: red;
  opacity: 0;
    animation-name: card-back-fade-in;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-delay: .2s;
   z-index: 9999999;
   cursor: auto;
 }
 
@keyframes card-back-fade-in {
  0% {
    opacity: 0;
  }
 
  100% {
    opacity: 1;
   
  }
}

/***************************
CARDS ANIMATE IN: 
****************************/

.card-1 .card-front{
  animation-name: slideInDown-card-1;
  animation-duration: .55s;
  animation-fill-mode: both;
 animation-delay: .85s;
  }
  @keyframes slideInDown-card-1 {
  0% {
   transform: rotate(720deg);
   margin-top: -500px;
  }
  100% {
   transform: rotate(0deg);
   margin-top: 0px;
  }
  } 

.card-2 .card-front{
  animation-name: slideInDown-card-2;
  animation-duration: .65s;
  animation-fill-mode: both;
 animation-delay: .76s;
  }
  @keyframes slideInDown-card-2 {
  0% {
   transform: rotate(-720deg);
   margin-top: -500px;
  }
  100% {
   transform: rotate(0deg);
   margin-top: 0px;
  }
  } 
.card-3 .card-front{
  animation-name: slideInDown-card-3;
  animation-duration: .55s;
  animation-fill-mode: both;
 animation-delay: .85s;
  }
  @keyframes slideInDown-card-3 {
  0% {
   transform: rotate(720deg);
   margin-top: -500px;
  }
  100% {
   transform: rotate(0deg);
   margin-top: 0px;
  }
  } 


/***************************
PLAY SCREEN
***************************/

.page-visual {
 opacity: 0;
    animation-name: play-screen-fade-in;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-duration: .5s;
    animation-delay: 1s;
   cursor: auto;
 }
 
@keyframes play-screen-fade-in {
  0% {
    opacity: 0;
  }
 
  100% {
    opacity: 1;
   
  }
}

/***************************
RESULT SCREEN
***************************/

#game_results_screen {
 opacity: 0;
 }


/***************************
WHEN ALL CARDS ARE CLICKED
***************************/
/*1) match Card Shake, non matching fades out*/

.result-game-done .card-1 {
 animation-name: tada, card-1-move;
  animation-duration: .5s;
  animation-delay: 1.5s, 2.5s;;
  animation-fill-mode: both;
 animation-fill-mode: forwards; 
 position: relative;
  }

@keyframes card-1-move {
  0% {
  left: 0;
  }
  100% {
   left: 150px;
  }
  } 



.result-game-done .card-3 {
 animation-name: tada, card-3-move;
  animation-duration: .5s;
  animation-delay: 1.5s, 2.5s;;
  animation-fill-mode: both;
 animation-fill-mode: forwards; 
 position: relative;
  }

@keyframes card-3-move {
  0% {
  right: 0;
  }
  100% {
   right: 150px;
  }
  } 

  @keyframes tada {
  0% {
  transform: scale3d(1, 1, 1);
  }
  10%, 20% {
  transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
  transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  100% {
  transform: scale3d(1, 1, 1);
  }
  } 

.result-game-done .card-2{
  opacity: 1;
    animation-name: non-match-fade-out;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-duration: .5s;
    animation-delay: 1.2s;
   z-index: 99999;
   cursor: auto;
 }
 @keyframes non-match-fade-out {
  0% {
   opacity: 1;
   
  }
  100% {
   opacity: 0;

   
  }
}

/*2) play fade out*/

.result-game-done .page-visual {
 opacity: 1;
    animation-name: play-screen-fade-out;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-duration: .5s;
    animation-delay: 2s;
   cursor: auto;
 }
 
@keyframes play-screen-fade-out {
  0% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
   
  }
}

/*3) result fade in*/

.result-game-done #game_results_screen {
 opacity: 0;
    animation-name: game_results-fade-in;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-duration: .5s;
    animation-delay: 2.5s;
   cursor: auto;
 }
 
@keyframes game_results-fade-in {
  0% {
    opacity: 0;
  }
 
  100% {
    opacity: 1;
   
  }
}

@media only screen and (max-width : 767px) {
	/************************************************
GAME BOARD 
*************************************************/
#game_match_board {
	position: absolute;
	width: 100% !important;
	height: 610px !important;
	left:0;
	top:0;
 _border: solid 1px yellow;
}


/*CARDS*/
#game_cards {
	position: absolute;
	top:120px;
	left:10px;
	width: 390px;
	height: 1px;
 _border: solid 1px red;
}

/************************************************
FADE IN MATCH GAME
*************************************************/
.card-wrapper {
  width: 194px;
  height: auto;
  perspective: 600px;
  float:left;
  margin:0px;
 _border: solid 1px blue;
}
.card-wrapper img{
  width: 194px;
}
 
/***************************
CARDS ANIMATE IN: 
****************************/

.card-1 .card-front{
  animation-name: slideInDown-card-1-mobile;
  }
  

.card-2 .card-front{
  animation-name: slideInDown-card-2-mobile;
  }
  
.card-3 {
 position: relative;
 left: -100px;
 top: 0px;
}

.card-3 .card-front{
  animation-name: slideInDown-card-3-mobile;
  }
  
 

/***************************
WHEN ALL CARDS ARE CLICKED
***************************/
/*1) match Card Shake, non matching fades out*/

.result-game-done .card-1 {
 animation-name: tada, card-1-move-mobile;
  animation-duration: .5s;
  animation-delay: 1.5s, 2.5s;;
  animation-fill-mode: both;
 animation-fill-mode: forwards; 
 position: relative;
 
  }
.result-game-done .card-3 {
 animation-name: tada, card-3-move-mobile;
  animation-duration: .5s;
  animation-delay: 1.5s, 2.5s;;
  animation-fill-mode: both;
 animation-fill-mode: forwards; 
 position: relative;
  }
}


@keyframes card-1-move-mobile {
  0% {
  left: 0;
   top: 0px;
  }
  100% {
   left: 0px;
   top: -30px;
  }
  } 

@keyframes card-3-move-mobile {
  0% {
 left: -100px;
  top: 0px;
  }
  100% {
 left: 0px;
   top: -250px;
  }
  } 


/********************************
MOBILE ANIMATIONS
*********************************/
@keyframes slideInDown-card-2-mobile {
  0% {
   transform: rotate(-720deg);
   margin-top: -600px;
  }
  100% {
   transform: rotate(0deg);
   margin-top: 30px;
  }
  } 

@keyframes slideInDown-card-3-mobile {
  0% {
   transform: rotate(720deg);
   margin-top: -800px;
  }
  100% {
   transform: rotate(0deg);
   margin-top: 0px;

  }
  } 

@keyframes slideInDown-card-1-mobile {
  0% {
   transform: rotate(720deg);
   margin-top: -600px;
  }
  100% {
   transform: rotate(0deg);
   margin-top: 30px;
  }
  }