/*CONFIGURABLE MATCH*/
/*9 flip tiles with BKG reveal*/
/*postion RIGHT*/
/************************************************
ELEMENTS Z-INDEX: THIS IS DIFFERENT FROM WHEEL AND SLOT
*************************************************/
/*this is the PLAY IMAGE inside the table td*/
.page-visual { 
z-index: 9 !important;
 
}
/*this is the table td with ALL COPY AND RESULTS*/
.page-content { 
z-index: 99 !important;
}
/*this is the play copy - Gets covered by the result screen*/
#match_game_content { 
 z-index: 999 !important; 
}
/*this is the MATCH BOARD*/
#game_match_board { 
	z-index: 99999 !important;
}
#game_cards  { /*this is the ALL CARDS IN THE MATCH BOARD*/
	z-index: 99999 !important;
}
/*this is the result content*/
#game_results_options {
  z-index: 99999 !important;
 
}
/*this is the result screen image*/
#game_results_screen  {
  z-index: 9999 !important;
 background-color: _yellow;
 
}

/*CONFIGURE MATCH ONLY PIECES*/
#dv_intro_lottie_animation {
 z-index: 999999 !important;
 
 
}
#dv_game_mask {
 z-index: 99999 !important;
 background-color: yellow !important;
 
}




/************************************************
PIECES 
*************************************************/
/*PAYOFF BKG SCREEN POSITION*/
#game_results_screen {
	position: absolute;
	opacity: 0; /*hidden*/
	width: 810px !important;
	height: 750px !important;
	top:0;
	left: 810px; /*Set the form off the page*/
}

@media only screen and (max-width : 767px) {
#game_results_screen{ 
  width: 410px !important;
  height: 690px !important;
}

}


/************************************************
GAME PLAY BKG IMAGE 
*************************************************/
#game_match td.page-visual{
 vertical-align: top !important;
}
@media only screen and (max-width : 767px) {
#game_match td.page-visual{ 
  
}
}


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

/*POSITION OF THE BOARD WITH THE CARDS*/
#game_cards {
	position: absolute;
	top:128px;
	left:293px;
	width: 500px;
	height: 500px;
}

@media only screen and (max-width : 767px) {
#game_cards {
	position: absolute;
	top:280px;
	left:15px;
	/*scale*/
	transform:scale(.77);
	-webkit-transform:scale(.77);
	transform-origin:0 0;
	-webkit-transform-origin:0 0;
}

}



/************************************************
CARDS: CONFIGURABLES
*************************************************/
.card-wrapper {
  width: 150px;
  height: 150px;
  perspective: 600px;
 float:left;
 padding-top:7.5px !important;
 padding-left:7.5px !important;
 padding-bottom:7.5px !important;
 padding-right:7.5px !important;
 display: block !important;
 transform-style: preserve-3d;
 
}
/*making the cards with radius*/
.card-wrapper,
.card-wrapper img,
.card,
.card img,
.card-front,
.card-front img,
.card-back,
.card-back img {
	/*border-radius: 8px !important;
	-moz-border-radius: 8px !important;
	-webkit-border-radius: 8px !important;*/
}
.card {
  position: relative;
  width: 150px;
  height: 150px;
  cursor: pointer;
  transform-style: preserve-3d;
 float:left;
  transition: transform .5s; /*speed of the flip*/
}
.card img{
  width: 100%;
  height: 100%;

}


.card.is-flipped {
  
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card-front {
 overflow:hidden; /*this is for the regular match*/
}

.card-back {
  webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,.5) !important;
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,.5) !important;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,.5) !important;
 transition: transform .5s ease 0s;
}
.card-back:hover {
 /*
 -webkit-transition: transform .5s ease 0s;
 -moz-transition: transform .5s ease 0s;
 transition: transform .5s ease 0s;
 /**/
/*-webkit-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.5)!important;
-moz-box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.5)!important;
box-shadow: 2px 4px 5px 0px rgba(0,0,0,0.5)!important;
 */
 /*-webkit-transform: translateY(-150%) translateX(-150%) rotate(1500deg);
  transform: translateY(-150%) translateX(-150%) rotate(1500deg);*/
}

/*******************************
TYPE OF FLIP
********************************/

/* -----------------------------
FLIP TOP DOWN
------------------------------- 
.card {
 transform-origin: center bottom;
}
.card.is-flipped {
 transform: translateY(-100%) rotateX(-180deg);
}
.card-front {
 transform: rotateX(-180deg);
}
.card-back:hover {
 -webkit-transform: perspective(1000px) rotateX(-15deg) !important;
 -moz-transform: perspective(1000px) rotateX(-15deg) !important;
 transform: perspective(1000px) rotateX(-15deg) !important;
}
*/

/* -----------------------------
FLIP TOP UP
------------------------------- */
.card {
 transform-origin: center top;
}
.card.is-flipped {
 transform: translateY(100%) rotateX(180deg);
}
.card-front {
 transform: rotateX(-180deg);
}
.card-back:hover {
 -webkit-transform: perspective(1000px) rotateX(15deg) !important;
 -moz-transform: perspective(1000px) rotateX(15deg) !important;
 transform: perspective(1000px) rotateX(15deg) !important;
}






/* -----------------------------
FLIP LEFT
------------------------------- 
.card {
 transform-origin: center left;
}
.card.is-flipped {
 transform: translateX(100%) rotateY(-180deg);
}
.card-front {
 transform: rotateY(180deg);
}
.card-back:hover {
 -webkit-transform: perspective(1000px) rotateY(-15deg); 
 -moz-transform: perspective(1000px) rotateY(-15deg); 
 transform: perspective(1000px) rotateY(-15deg); 
}
*/


/* -----------------------------
FLIP RIGHT
------------------------------- 
.card {
 transform-origin: center right;
}
.card.is-flipped {
 transform: translateX(-100%) rotateY(180deg);
}
.card-front {
 transform: rotateY(180deg);
}
.card-back:hover {
 -webkit-transform: perspective(1000px) rotateY(15deg); 
 -moz-transform: perspective(1000px) rotateY(15deg); 
 transform: perspective(1000px) rotateY(15deg); 
}
*/


/* -----------------------------
FLIP: LARGE AT ROLLOVER
------------------------------- */

.card-back:hover {
 -webkit-transform: perspective(1000px) rotateX(0) scale(1.1)!important;
 -moz-transform: perspective(1000px) rotateX(0) scale(1.1) !important;
 transform: perspective(1000px) rotateX(0) scale(1.1) !important;
 /**/
 	transform-origin: center;
	-webkit-transform-origin: center;
}

/*WINNING CARD FLASH*/


/*MOVED TO VARIABLES*/



/************************************************
WIN OR LOSE OPTION TO BE INSIDE HERE
*************************************************/
#game_results_options {
	position: absolute;
	width: 810px !important;
	height: 920px !important;
	top:0px;
 opacity: 0;
	left: 810px; /*Set the form off the page*/
}


@media only screen and (max-width : 767px) {
#game_results_options { 
  width: 410px !important;
  height: 1110px !important;
}
}



#game_match .page-content #match_game_content,
/**/
#game_match .page-content #win_standard,
#game_match .page-content #win_redeem_form,
#game_match .page-content #win_send_digital_prize,
#game_match .page-content #win_app_integration,
/**/
#game_match .page-content #lose_standard,
#game_match .page-content #lose_app_integration,
#game_match .page-content #lose_offer
{
 position: absolute;
 top: 0 !important;
 left: 0 !important;
 height: 750px; /*this should match the height of the graphic of the page*/
 width: 770px; /*width of how much you want copy VR visual*/
 padding: 0 20px 0 20px;
/*using flex to center vertically*/
 display: flex;
  align-items: center;
 flex-direction: column;
 justify-content: center;
}

#wheel_game_content #title_copy,
/**/
#send_digital_win_screen_title,
#form_win_screen_title,
#standard_win_screen_title,
#ai_win_screen_title,
/**/
#standard_lose_screen_title,
#ai_lose_screen_title,
#lose_offer_screen_title 
{
 text-align: center;
 width: 100% !important;
 padding: 0 !important;
 margin: 0 !important;
}

#wheel_game_content #copy_copy,
/**/
#send_digital_win_screen_copy,
#form_win_screen_copy,
#standard_win_screen_copy,
#ai_win_screen_copy,
/**/
#standard_lose_screen_copy,
#ai_lose_screen_copy,
#lose_offer_screen_copy{
 text-align: center;
 width: 100% !important;
}

#send_digital_win_screen_result_copy,
#form_win_screen_result_copy,
#standard_win_screen_result_copy,
#ai_win_screen_result_copy,
/**/
#standard_lose_screen_result_copy, 
#ai_lose_screen_result_copy, 
#lose_offer_screen_result_copy{
 text-align: center;
 width: 100% !important;
}

#ai_win_screen_button_1,
#ai_win_screen_button_2,
#ai_win_screen_button_3,
#standard_win_screen_button_1,
#standard_win_screen_button_2,
#standard_win_screen_button_3,
#send_digital_win_screen_button_1,
#send_digital_win_screen_button_2,
#send_digital_win_screen_button_3,
#form_win_screen_button_1,
#form_win_screen_button_2,
#form_win_screen_button_3,
#form_win_screen_show_results_button,
/**/
#standard_lose_screen_button_1,
#standard_lose_screen_button_2,
#standard_lose_screen_button_3,
#ai_lose_screen_button_1,
#ai_lose_screen_button_2,
#ai_lose_screen_button_3,
#lose_offer_screen_button_1,
#lose_offer_screen_button_2,
#lose_offer_screen_button_3
{
 width: calc(100% - 26px);
 margin: 10px 0% 10px;
 text-align: center;
}
/*GAME PLAY*/
#game_match .page-content #match_game_content {
 
}

/*GAME PLAY AT SPIN CLICK:*/

/*HIDE FORM FOR BUTTON WHEN CLICKED*/
.btn-redeem-out,
#form_win_screen_show_results_button.btn-redeem-out {
		  margin-left: 3000px !important; /*out of view when clicked*/
 left: 3000px !important; /*out of view when clicked*/
}

/*HIDE SPIN FOR BUTTON WHEN CLICKED*/
.btn-spin-out,
#spin_button.btn-spin-out  {
		  margin-left: 3000px !important; /*out of view when clicked*/
 left: 3000px !important; /*out of view when clicked*/
}

/*MOVE BEHIND WHEN SPIN BUTTON IS CLICKED*/
.div-move-behind,
#match_game_content.div-move-behind {
 z-index: 9;
}
/*ALL WIN OPTIONS*/

/*WIN TYPE: STANDARD*/
#game_match .page-content #win_standard {
 
}
/*WIN TYPE: WITH REDEEM FORM*/
#game_match .page-content #win_redeem_form {
 
}
/*WIN TYPE: WITH DIGITAL PRIZE*/
#game_match .page-content #win_send_digital_prize {
 
}
/*WIN TYPE: WITH APP INTEGRATION*/
#game_match .page-content #win_app_integration {
 
}

/*ALL LOSE OPTIONS*/

/*LOSE TYPE: STANDARD*/
#game_match .page-content #lose_standard {
 
}
/*LOSE TYPE: APP INTEGRATION*/
#game_match .page-content #lose_app_integration {
 
}
/*LOSE TYPE: OFFER*/
#game_match .page-content #lose_offer {
 
}


@media only screen and (max-width : 767px) {
#game_match .page-content #match_game_content,
/**/
#game_match .page-content #win_standard,
#game_match .page-content #win_redeem_form,
#game_match .page-content #win_send_digital_prize,
#game_match .page-content #win_app_integration,
/**/
#game_match .page-content #lose_standard,
#game_match .page-content #lose_app_integration,
#game_match .page-content #lose_offer{
 /*position: absolute;


 display: block;
 
 */
  top: 0 !important;
 left: 0 !important;
 width: 370px; 
 height: auto; 
  padding: 0 20px 0 20px;
  align-items: center;
 flex-direction: column;
 justify-content: center;
}


}



/************************************************
FORM FUNCTIONS
*************************************************/
/*this hides the form: a class: .result-redeem-fade-in get added to the form to show it when the button is clicked*/
#game_results_options #redeem_form {
    display: none;
}

#redeem_form {
 opacity: 0;
 position: absolute;
 /*postion the form*/
 top: 0 !important;
 left: 3000px !important; /*Set the form off the page*/
 /*size the form*/
    width: calc(100% - 22px) !important;
    height: auto !important;
 padding: 20px 10px 10px 10px; /*add padding bottom to accomomodate the error*/
 /* form styles*/
    background-color: rgba(255, 255, 255, .9);/*see through the form*/
 border: solid 1px #999999;
 opacity: 1;
 z-index: 99;
}

.result-redeem-fade-in#redeem_form {
 left: 0 !important /*Postion the form on the page whn BTN clicked*/
 
}
#redeem_form h1 {
 text-align: center;
 font-size: 20px;
 line-height: 22px;
 padding-bottom: 10px !important;
}
/*if you want to overwrite the copy on the form, use this*/
/*#redeem_form h1 {
  font-size: 0px;
 line-height: 0px;
}
#redeem_form h1::after {
  content: " copy here";
 display: block;
 font-size: 20px;
 line-height: 22px;
}
*/
/*FIELDS*/
/*these are the fields that bring in the values from the form in the registration*/

#redeem_form .form-filled {
	width: calc(100% - 22px);
	color:#000000 !important;
}
#redeem_form .form-filled .firstname,
#redeem_form .form-filled .lastname {
	float:left;
	padding-right:3px;
	width:auto;
}

#redeem_form .state {
	width:5%;
	float:left;
}
#redeem_form .state .form-filled{
	width:100%;
 text-align: center;
}

/*these are the fields that needs input*/

#redeem_form .address1 {
	width:100%;
	float:left;
}
#redeem_form .address2 {
	width:100%;
	float:right;
}
#redeem_form .city {
	width:64%;
	margin-right:2.5%;
	float:left;
}
#redeem_form .zip {
	width:21%;
	float:right;
}

/*these are the fields that needs input*/
.form-submit {
    margin-top: 5px;
    width: 100%;
}
#redeem_form .form-submit input {
	width:75% !important; /*width of the button*/
	height:auto !important;
}

@media only screen and (max-width : 767px) {
 
 #redeem_form {
 opacity: 0;
 position: absolute;
 /*postion the form*/
 top: 0px !important;
 left: 500px !important; /*Set the form off the page*/
 /*size the form*/
    
    height: auto !important;
  
}
 #redeem_form h1 {
 font-size: 16px;
 line-height: 20px;
}
.result-redeem-fade-in#redeem_form {
 left: 0px !important /*Postion the form on the page whn BTN clicked*/
 
}
 .form-filled {
    font-size: 16px;
    line-height: 19px;
    height: 19px;
}
 #redeem_form .city {
	width:100%;
	margin-right:0%;
	float:left;
}
 #redeem_form .zip {
	width:48%;
	float:right;
}
 #redeem_form .state {
	width:43%;
	float:left;
}
 #redeem_form .form-submit input {
	width:100% !important; /*width of the button*/
	height:auto !important;
}

}











/************************************************
SCREENS 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: 1s;
          animation-duration: 1s;
		  left: 0 !important;
}

/*SHOW THE FORM FOR BUTTON WHEN CLICKED*/
#redeem_form.result-redeem-fade-in {
 display: block !important;
}
.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;
}

/*HIDE FOR BUTTON WHEN CLICKED*/
.btn-redeem-out,
#form_win_screen_show_results_button.btn-redeem-out {
		  margin-left: 3000px !important; /*out of view when clicked*/
}

















/************************************************
LOTTIES WINNING ANIMATION
*************************************************/
#form_win_screen_title,
#form_win_screen_result_copy,
#form_win_screen_show_results_button,
/**/
#send_digital_win_screen_title,
#send_digital_win_screen_result_copy,
#send_digital_win_screen_button_1,
#send_digital_win_screen_button_2,
#send_digital_win_screen_button_3,
/**/
#ai_win_screen_title,
#ai_win_screen_result_copy,
#ai_win_screen_button_1,
#ai_win_screen_button_2,
#ai_win_screen_button_3,
/**/
#standard_win_screen_title,
#standard_win_screen_result_copy,
#standard_win_screen_button_1,
#standard_win_screen_button_2,
#standard_win_screen_button_3 {
 z-index: 99 !important; /*in case you want to keep the elements on top and the animation*/

}


#game_match_board { 
 /*z-index: 99999; !important; in case you want to keep the cards on top of everything*/
}



/*animation fade out*/
@-webkit-keyframes animationfadeout {
  0% {
    opacity: 1;
   margin-left: 0 !important;
  }
  95% {
    opacity: 0;
   margin-left: 0 !important;
  }
 100% {
    opacity: 0;
  margin-left: 3000 !important;
  }
}

@keyframes animationfadeout {
  0% {
    opacity: 1;
   margin-left: 0 !important;
  }
  95% {
    opacity: 0;
   margin-left: 0 !important;
  }
 100% {
    opacity: 0;
  margin-left: 3000 !important;
  }
}


.page-visual img {
 opacity: 1 !important;
 
}

#game_results_options {
 opacity: 1 !important;
 
}

/************************************************
WHEN THE GAME IS DONE: class .result-game-done added to the main container #game_match
*************************************************/

#game_match.result-game-done #game_results_options,
_#game_results_options.result-options-fade-in,
_#game_results_options.result-options-fade-in {
 left: 0px !important /*Postion on the page when the all cards are flipped*/
}

/************************************************
LOTTIE INTRO ANIMATION TO CHECK IF IT WORKS
*************************************************/
#dv_game_mask,
#dv_intro_lottie_animation{
	position: absolute;
	width: 810px !important;
	height: 750px !important;
	top:0;
	left: 0; /*Set the form off the page*/
 
}
#dv_game_mask img { 
 	width: 100% !important;
	height: auto !important;
}
#game_results_options.fade-out,
#dv_intro_lottie_animation.fade-out{
 left: -810px !important /*Postion on the page when the all cards are flipped*/
}
@media only screen and (max-width : 767px) {
#dv_game_mask,
#dv_intro_lottie_animation{ 
  width: 410px !important;
  height: 690px !important;
}
}


#dv_lottie_winning_animation {
 position: absolute;
 /*z-index: 999999 !important; /*in case you want to keep the animation on top of everything*/
 top: 0;
 left: 0;
}
#dv_lottie_winning_animation div { /*size of the animation*/
 width: 810px !important;
 height: 750px !important;
 _background-color: orange;
}
#dv_lottie_winning_animation svg { /*size of the animation*/
 /*width: 810px !important;
 height: 750px !important;*/
 _border: solid 2px aqua !important;
}

#dv_lottie_winning_animation.fade-out {
	_margin-left: 3000px !important; /*out of view when animation times out from the config*/
 _left: 3000px !important; /*out of view when animation times out from the config*/
 -webkit-animation-name: animationfadeout;
          animation-name: animationfadeout;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}

@media only screen and (max-width : 767px) {
#dv_lottie_winning_animation {
 top: 0;
 left: 0;
}
 #dv_lottie_winning_animation div { /*size of the animation*/
 width: 410px !important;
 height: 770px !important;
}
#dv_lottie_winning_animation svg { /*size of the animation*/
 height: 50% !important;
 
}
}