/******************************************************
RESULT SCREEN
*****************************************************/
#game_results_screen {
 display: none; /*NOT USED*/
}


/*this allow us to flip the cards*/
#game_match .page-content #match_game_content {
z-index: 9999999 !important; 
 height: 1px !important;
 _overflow: hidden !important;
 overflow: visible !important;
}

/******************************************************
WINNING CARDS CONTAINER
*****************************************************/

#game_match.result-game-done .page-content #game_cards::before {
  content: "";
    position: absolute;
    top: 0px;
    left: 0px;
 padding: 10px;
    width: 360px;
    height: 120px !important;
 height: auto; /*making this auto as to match*/
 overflow: _hidden !important;
 /*z-index: 999999 !important; NOT SURE I NEED THIS make the cards on top*/
 -webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
 /**/
 background: rgb(0,209,198);
background: linear-gradient(180deg, #fedb4f, #cc1e05);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fedb4f",endColorstr="#cc1e05",GradientType=1);
 opacity: 0;
 /*ANIMATE*/
          animation-name: winningCardsPanelFadeIn;
          animation-timing-function: ease-out;
          animation-fill-mode: both;
          animation-duration: .5s;
 /**/
 animation-delay: 1s;
}

@keyframes winningCardsPanelFadeIn {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}


/******************************************************
CARDS BEHAVIOR
*****************************************************/

/*WINNING CARDS*/
#game_match.result-game-done .page-content .card-1 img,
#game_match.result-game-done .page-content .card-5 img,
#game_match.result-game-done .page-content .card-9 img{
  animation-name: winningCard;
  animation-duration: .3s;
  animation-iteration-count: 4; /* Plays the animation 3 times */
  animation-fill-mode: both;
  }
  @keyframes winningCard {
  0% {
  outline: 0 solid #f14f0f;
  outline-offset: 0px;
  }
  50% {
 outline: 3px solid #f14f0f;
  outline-offset: -6px;
  }
  100% {
 outline: 0 solid #f14f0f;
  outline-offset: 0px;
  }
  } 
/*LOSING CARDS*/
#game_match.result-game-done .page-content .card-2 .card-front,
#game_match.result-game-done .page-content .card-3 .card-front,
#game_match.result-game-done .page-content .card-4 .card-front,
#game_match.result-game-done .page-content .card-6 .card-front,
#game_match.result-game-done .page-content .card-7 .card-front,
#game_match.result-game-done .page-content .card-8 .card-front
{
          animation-name: fadeout;
          animation-timing-function: ease-out;
          animation-fill-mode: both;
          animation-duration: .5s;
  animation-delay: 1.5s;
}



/*WIN CARD ONE: STAY IN THE SAME POSITION*/
_#game_match.result-game-done .page-content .card-1{
 position: absolute !important;
 top: 8px;
  /*ANIMATE*/

  animation-name: winCardOne;
  animation-duration: .55s;
  animation-fill-mode: both;
 /**/
 animation-delay: 2s;
}
@keyframes winCardOne {
   0% {
   _top: 8px;
  }
  100% {
   _top: -112px;
  }
}


/*WIN CARD TWO: SLIDE ONE UP*/
#game_match.result-game-done .page-content .card-5{
 position: absolute !important;
 top: 8px;
 /*ANIMATE*/
  animation-name: winCardTwo;
  animation-duration: .55s;
  animation-fill-mode: both;
 /**/
 animation-delay: 2s;
}
@keyframes winCardTwo {
   0% {
   top: 8px;
  }
  100% {
   top: -112px;
  }
}


/*WIN CARD THREE: SLIDE TWO UP*/
#game_match.result-game-done .page-content .card-wrapper .card-9{
 position: absolute !important;
 top: 8px;
 /*ANIMATE*/
  animation-name: winCardThree;
  animation-duration: .55s;
  animation-fill-mode: both;
 /**/
 animation-delay: 2s;
}
@keyframes winCardThree {
   0% {
   top: 8px;
  }
  100% {
   top: -232px;
  }
}


/*********************************
WON - GAME DONE SEQUENCE:
1) Matching Card Flash (inside specific css)
2) Non-Matching card Fade Out (inside specific css)
3) Matching Card Slide Up (inside specific css)
=================
THIS TAKES: 2.5 sec
=================
4) Panel Fades In
5) Play LOGO slide Up
6) Instruction Message Fades Out
7) Congratulation Message Slides Down
8) Prize Description Fades In
9) Call To action Slides Up
10) Redeem BTN slides Up
*********************************/

/*********************************
GAME pieces
*********************************/

/*THIS IS THE COLOR PANEL WHERE THE CARDS LAND*/

#game_match.result-game-done .page-content #game_cards::before {
 animation-delay: 2.5s;
}

/*********************************
PlayToWin LOGO
*********************************/
#game_match.result-game-done .page-content #match_game_content #title_copy div:nth-child(2) {
 animation-delay: 2.5s;
}
/*********************************
Play Instructions
*********************************/
#game_match.result-game-done .page-content #match_game_content #title_copy div:nth-child(3) {
 animation-delay: 2s;
}

/*********************************
Win Message
*********************************/
#game_match.result-game-done .page-content #win_app_integration #ai_win_screen_result_copy div:nth-child(1) {
 animation-delay: 2.5s;
}

/*********************************
Prize Message
*********************************/
#game_match.result-game-done .page-content #win_app_integration #ai_win_screen_result_copy div:nth-child(2) {
 animation-delay: 2.5s;
}

/*********************************
Call To action
*********************************/
#game_match.result-game-done .page-content #win_app_integration #ai_win_screen_result_copy div:nth-child(3) {
 animation-delay: 2.5s;
}

#game_match.result-game-done .page-content #win_app_integration #ai_win_screen_button_1 {
 animation-delay: 3s;
}