/*RSP COMMON: 05-20-2020* - tweaked for Big league chew

/************************************************
PIECES
************************************************ */



/************************************************
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;
	
}





/************************************************
PIECES 
*************************************************/
/*PAYOFF BKG SCREEN POSITION*/
#game_results_screen {
	position: absolute;
	opacity: 0; /*hidden*/
	width: 810px !important;
	height: 750px !important;
	top:0;
	left:0;
}
@media only screen and (max-width : 767px) {
#game_results_screen { 
  width: 410px !important;
  height: 690px !important;
}
}



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

/*CARDS*/
#game_cards {
	position: absolute;
	top:270px;
	left:112px;
	width: 1090px;
	height: 1px;
 border: solid 0px red;
}

.card-wrapper {
  width: 146px;
  height: 300px;
  perspective: 600px;
  float:left;
  margin:15px;
 _border: solid 1px blue;
}

.card {
  width: 100%;
  height: 100%;
  transition: transform .5s; /*durantion of flip*/
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}
/*
.card-back  {
 
}
 */
 
.card-back img,
.card-front img {
 width: 146px;
  height: 300px;

}

 
 .card-back {
   _opacity: 1;
  position: absolute;
 top: 0;
 left: 0;
  z-index: 9999;
  _border: solid 20px aqua; 
  cursor: pointer;
  position: relative;
  
 }
 .is-flipped .card-back{
  _opacity: 0;
  _border: solid 20px purple; 
  
 }
 
 .card-front {
  
  position: absolute;
 top: 0;
 left: 0;
  z-index: 999;
   opacity: 0;
  _border: solid 20px pink; 
  
 }
 
 .is-flipped .card-front{
  opacity: 1;
  _border: solid 20px yellow; 
  
  opacity: 0;
    -webkit-animation-name: card-fade-in;
    animation-name: card-fade-in;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    animation-delay: 0s;
   z-index: 99999;
  
   cursor: auto;
 
  
 }
 
 /*fade out*/
@-webkit-keyframes card-fade-in {
  0% {
    opacity: 0;
  }
 
  100% {
    opacity: 1;
   
  }
}

@keyframes card-fade-in {
  0% {
    opacity: 0;
  }
 
  100% {
    opacity: 1;
   
  }
}


@media only screen and (max-width : 767px) {
#game_cards {
	position: absolute;
	top:290px;
	left:30px;
	width: 550px;
	height: 392px;
	transform:scale(.70);
	-webkit-transform:scale(.70);
	transform-origin:0 0;
	-webkit-transform-origin:0 0;
}

.card-wrapper {
  margin:30px 10px 40px 10px;
}
}
/*CARD RADIUS IF NECESSARY*/
.card,
.card-front,
.card-back,
.card-back img {
	/*border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	*/
}





/************************************************
WIN OR LOSE OPTION TO BE INSIDE HERE
*************************************************/
#game_results_options {
	position: absolute;
	width: 810px !important;
	height: 920px !important;
	top:0;
	left: 3000px; /*remove from the page to avoid issues, gets moved in at after the game is played*/
}
@media only screen and (max-width : 767px) {
#game_results_options { 
  width: 410px !important;
  height: 1110px !important;
}
}

/*LOST: SINGLE BUTTON - CLICK TO WEBSITE*/
#lost_button_link_out {
	position: absolute;
	width: 810px !important;
	height: 750px !important;
	top:0;
}
#lost_button_link_out div{
	width: 810px !important;
	height: 750px !important;	
}
#lost_button_link_out img{
	position:absolute;
	top: 425px;
	left: 147px;
	/**/
	width:518px !important;
	height:auto;
	
}
@media only screen and (max-width : 767px) {
#lost_button_link_out {
	width: 410px !important;
	height: 770px !important;
}
#lost_button_link_out div{
	width: 410px !important;
	height: 770px !important;	
}
#lost_button_link_out img{
	position:absolute;
	top: 285px;
	left: 55px;
	/**/
	width:300px !important;
	height:auto;
}
}




/*WON: REDEEM FORM*/

#redeem_button {
	float:left;
	width: 810px !important;
	height: 750px !important;
	position: absolute;
	
}

#redeem_button img{
	width:435px;
	margin-top:435px;
	margin-left:190px;
}



#redeem_form {
	opacity:0;
	padding:16px 20px 25px 20px;
	left:0px;
	width:710px;
	height:auto !important;
	margin:445px 0 0 30px !important;
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
	float:left;
	/**/
	background-color: rgba(255, 255, 255, .9); 
	-webkit-box-shadow:inset 0px 0px 0px 1px #ffffff;
    -moz-box-shadow:inset 0px 0px 0px 1px #ffffff;
    box-shadow:inset 0px 0px 0px 1px #ffffff;
}



#redeem_form h1 {
	display:block;
	float:left;
	color:#000000;
	font-size:20px !important;
	line-height:22px !important;
	text-align:center;
	width:95%;
	margin: 0 2.5% 15px 2.5% !important;
}


#redeem_form .form-filled {
	width:47.75%;
	color:#000000 !important;
}
#redeem_form .form-filled .firstname,
#redeem_form .form-filled .lastname {
	float:left;
	padding-right:3px;
	width:auto;
}
#redeem_form .email {
	width:47.7%;
	float:right;
}
#redeem_form .email .form-filled{
	width:93.75%;
}

#redeem_form .address1 {
	width:66.75%;
	float:left;
}
#redeem_form .address2 {
	width:32%;
	float:right;
}

#redeem_form .city {
	width:31.25%;
	margin-right:1.25%;
	float:left;
}
#redeem_form .state {
	width:31.15%;
	float:left;
}
#redeem_form .state .form-filled{
	width:100%;
}
#redeem_form .zip {
	width:32%;
	float:right;
}
#redeem_form .zip {
	width:32%;
	float:right;
}
.form-submit {
    margin-top: 5px;
    width: 100%;
}
#redeem_form .form-submit input {
	width:45% !important;
}


@media only screen and (max-width : 767px) {
#redeem_button { 
  width: 410px !important;
  height: 690px !important;
}
#redeem_button img{
	width:334px;
	margin-top:290px;
	margin-left:38px;
}
#redeem_form {
	opacity:0;
	padding:15px 20px 30px 20px;
	left:0px;
	width:330px;
	margin:290px 0 0 20px !important;
}
#redeem_form .form-filled {
	width:94%;
}
#redeem_form .email,
#redeem_form .address1 {
	width:100%;
	float:left;
}

#redeem_form .address2 {
	width:48.75%;
	float:left;
}

#redeem_form .city {
	width:48.75%;
	float:right;
	margin:0;
}
#redeem_form .state {
	width:42%;
	float:left;
}
#redeem_form .zip {
	width:48.75%;
	float:right;
	margin:0;
}
#redeem_form .form-submit input {
	width:100% !important;
}
}

/*WON: SEND COUPON FORM AT CLICK*/
#won_send_coupon {
	float:left;
	width: 810px !important;
	height: 750px !important;
}
#won_send_coupon .form-submit {
   position:absolute;
	top:0px;
	left:0px;
	margin-top: 0px;
	position:relative;
	width:auto;
}


@media only screen and (max-width : 767px) {
#won_send_coupon { 
  width: 410px !important;
  height: 690px !important;
}
}
/*FUNCTIONS*/
.result-screen-fade-in,
.result-options-fade-in {
		  -webkit-animation-name: fadein;
          animation-name: fadein;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: .5s;
          animation-duration: .5s;
		  left: 0 !important;
}

/*WIN SHOW FORM WHEN HIT REDEEM*/
.result-redeem-fade-in {
  -webkit-animation-name: fadein;
          animation-name: fadein;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: .5s;
          animation-duration: .5s;
		  left: 0px !important; /*bring it into view*/
		  z-index: 999999 !important; /*bring it to the top*/
}

/*WIN SHOW FORM WHEN HIT REDEEM*/
.btn-redeem-out {
		  left: 3000px !important; /*bring it into view*/
}


/************************************************
HIDE ALL RESULT OPTIONS
*************************************************/
#game_results_options #redeem_button {
	display:none
}
	
#game_results_options #redeem_form {
	display:none
}
	
#game_results_options #won_send_digital {
	display:none
}
	
#game_results_options #won_no_thank_you {
	display:none
}

#game_results_options #won_button_link_out {
	display:none
}

#game_results_options #lost_button_link_out {
	display:none
}

#game_results_options #lost_link_thank_you {
	display:none
}

#game_results_options #button_social {
	display:none
}