/*-----------------------------------
GAME: WHEEL - FULL RIGHT
------------------------------------*/

/************************************************
WHEEL POSITION
*************************************************/
/*FULL RIGHT*/
/*WHEEL SHAPE and POSITION*/

#game_wheel_wheel {
  /*size*/
   width:520px;
  height:520px;
  /*postion*/
  top:112px;
  left:702px;
 opacity: 1 !important;

}


@media only screen and (max-width : 767px) {
/************************************************
WHEEL POSITION
*************************************************/
#game_wheel_wheel {
  /*size*/
  width:355px;
  height:355px;
  /*postion*/
  top:280px !important;
  left:28px !important;
 
}

}





/*-----------------------------------
RESULTS SCREEN PIECES, FUNCTIONS AND OPTION
------------------------------------*/







/************************************************
BTNS POSITIONS
*************************************************/
/*BTN POSITION*/


#button_spin {
	/*POSITION and SIZE*/
	left: 700px;
	top: 100px;
 z-index: 10000 !important;
 cursor: pointer !important;
 opacity: 0;
}

#button_spin img{
	/*POSITION and SIZE*/
 height: 530px;
 width: 530px;
  cursor: pointer !important;
}

@media only screen and (max-width : 767px) {
 #button_spin {
	/*POSITION and SIZE*/
	left: 30px !important;
	top: 260px !important;
 z-index: 10000 !important;
 cursor: pointer !important;
}

#button_spin img{
	/*POSITION and SIZE*/
 height: 380px !important;
 width: 350px !important;
  cursor: pointer !important;
}
}








	




/****************************************
BTNS:
*****************************************/

#button_spin img,
#game_results_options  #button_redeem img,
#game_results_options #button_visit img,
.form-submit img {
	background-color:#ffffff !important;
}





.spin-wheel {
  -webkit-animation-name: spin-and-move;
          animation-name: spin-and-move;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
-webkit-transition: all 3s cubic-bezier(.33,.33,.16,1.9);
animation-timing-function: all 3s cubic-bezier(.33,.33,.16,1.9);
		  /*WHEEL SPINNING TIME*/
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
 
}


@-webkit-keyframes spin-and-move {
  0% {
  -webkit-transform: translateY(0) translateX(0) rotate(0deg) scale(100%);
  transform: translateY(0) translateX(0) rotate(0deg) scale(100%);
  }
  100% {
  -webkit-transform: translateY(97%) translateX(10%) rotate(360deg) scale(90%);
  transform: translateY(97%) translateX(00%) rotate(360deg) scale(90%);
  }
  }
  @keyframes spin-and-move {
  0% {
  -webkit-transform: translateY(0) translateX(0) rotate(0deg) scale(100%);
  transform: translateY(0) translateX(0) rotate(0deg) scale(100%);
  }
  100% {
  -webkit-transform: translateY(97%) translateX(10%) rotate(360deg) scale(90%);
  transform: translateY(97%) translateX(00%) rotate(360deg) scale(90%);
  }
  } 


@-webkit-keyframes spin-and-move-mobile {
  0% {
  -webkit-transform: translateY(0) translateX(0) rotate(0deg) scale(100%);
  transform: translateY(0) translateX(0) rotate(0deg) scale(100%);
  }
  100% {
  -webkit-transform: translateY(97%) translateX(-10%) rotate(-20deg) scale(90%);
  transform: translateY(97%) translateX(-100%) rotate(-20deg) scale(90%);
  }
  }
  @keyframes spin-and-move-mobile {
  0% {
  -webkit-transform: translateY(0) translateX(0) rotate(0deg) scale(100%);
  transform: translateY(0) translateX(0) rotate(0deg) scale(100%);
  }
  100% {
  -webkit-transform: translateY(50%) translateX(85%) rotate(-20deg) scale(90%);
  transform: translateY(50%) translateX(85%) rotate(-20deg) scale(90%);
  }
  } 


@media only screen and (max-width : 767px) {
 
 .spin-wheel {
  -webkit-animation-name: spin-and-move-mobile;
          animation-name: spin-and-move-mobile;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
-webkit-transition: all 3s cubic-bezier(.33,.33,.16,1.9);
animation-timing-function: all 3s cubic-bezier(.33,.33,.16,1.9);
		  /*WHEEL SPINNING TIME*/
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
 
}
 

}
.button-spin-out {
 margin-left: 3000px
}


.show-game-results {
 opacity: 0; /*set to transparent*/
 -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: 1.5s;
          animation-duration: 1.5s;
 /**/
 animation-delay: 1s;
  display: block;
}



/*fade in*/
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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






/************************************************
WHEEL
*************************************************/
/*WHEEL SHAPE and POSITION*/
#game_board {
 /*position: absolute;*/
}
#game_wheel_wheel {
 position: absolute;
}
#game_wheel_wheel img{
  height: 100%;
  width: 100%;
}

/************************************************
POINTER
*************************************************/
/*POINTER SHAPE AND POSITION*/
#game_wheel_pointer {
  
  position: absolute;
  height: 0;
  width: 0;
  -webkit-transform: scaley(2);
          transform: scaley(2);
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  border-color: red;
  border-style: solid;
  
}


/************************************************
PAYOFF BKG SCREEN
*************************************************/
/*PAYOFF BKG SCREEN POSITION*/
#game_results_screen {
	position: absolute;
	top:0;
	left:0;
}

/************************************************
RESULTS SCREEN PIECES, FUNCTIONS AND OPTIONS
*************************************************/
/*RESULTS POSITION*/
#game_results_options {
  position: absolute;
  top:0;
  left:0;
}

/************************************************
RESULT TYPE: REDEEM FORM
*************************************************/
#redeem_form {
	position:absolute !important;
	top:0px;
}



/************************************************
REDEEM FORM
*************************************************/
#redeem_form {
	position:absolute !important;
	top: 100px;
}
#redeem_form .firstname div,
#redeem_form .lastname div,
#redeem_form .email div,
#redeem_form .telephone div,
#redeem_form .address1 div,
#redeem_form .address2 div,
#redeem_form .city div,
#redeem_form .state div {
	float:left;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	line-height:35px;
	margin: 0 0 10px 0;
	width: calc( 99.9% - 2em);
	padding: 0px 1em 0px 1em;
	background-color:#ffffff;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: #999999;
	border-left-color: transparent;
}
/*first and left*/
#redeem_form .first-last-wrapper {
	float:left;
	width: calc( 99.9% - 2em);
	padding: 0px 1.25em 0px .75em;
	margin: 0 0 10px 0;
	background-color:#ffffff;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: transparent;
	border-right-color: transparent;
	border-bottom-color: #999999;
	border-left-color: transparent;
}
#redeem_form .firstname div,
#redeem_form .lastname div{
	width: auto;
	padding: 0px 5px 0px 0px;
	margin: 0;
	border:none;
}
/**BTN**/
.form-submit {
}
#redeem_form .form-submit input{
	margin:0 20% 20px 20%;
	width:60%;
}
@media only screen and (max-width : 767px) {
#redeem_form .form-submit input{
	margin:0 0 20px 0;
	width:100%;
}
}


/************************************************
GAME BTN
*************************************************/
#button_spin,
#button_redeem,
#button_visit {
  position:absolute !important;
	 cursor:pointer;
}
#button_spin img,
#button_redeem img,
#button_visit img,
.form-submit img {
	animation: glowing 1500ms infinite;
 animation: none;
}

#button_spin .view-desktop,
#button_redeem .view-desktop,
#button_visit .view-desktop,
.form-submit .view-desktop {
	display:block;
}
#button_spin .view-mobile,
#button_redeem .view-mobile,
#button_visit .view-mobile,
.form-submit .view-mobile {
	display:none;
}


@media only screen and (max-width : 767px) {
#button_spin .view-desktop,
#button_redeem .view-desktop,
#button_visit .view-desktop,
.form-submit .view-desktop {
	display:none;
}

#button_spin .view-mobile,
#button_redeem .view-mobile,
#button_visit .view-mobile,
.form-submit .view-mobile {
	display:block;	
}
#button_spin img,
#button_redeem img,
#button_visit img {
	width:270px;
}
}



/************************************************
ELEMENTS FOR TESTING
*************************************************/
/*game: before playing elements*/
.page-visual {
	z-index: 9;
}
#game_wheel_wheel {
  	z-index: 999;
}
#game_wheel_pointer {
  	z-index: 999;
 	/*testing*/
}
#button_spin {
 	 z-index: 999;
}
/*game: after playing elements*/
#game_results_screen {
 	z-index: 99;
	display:_block !important;
}
#game_results_options {
	z-index: 9999;
	width:100%;
	display:_block !important;
}
#button_redeem {
  	z-index: 9999;
}
#redeem_form {
	z-index: 9999;
	display:_block !important;
}

/************************************************
SUBMIT BTN
*************************************************/

.form-submit {
    padding: 0px;
	text-align:center;
}
.form-submit input {
    padding: 0px !important;
	margin:0px !important;
	margin-bottom:15px !important;
	max-width:290px;
}
@media only screen and (max-width : 767px) {
	.form-submit input {
	max-width:80%;
	margin-bottom:20px !important;
}
}

/************************************************
DEMO: SUBMIT BTN - WHEN IS AN IMAGE
*************************************************/

.form-submit {
    padding: 0px;
	text-align:center;
}
.form-submit img {
    padding: 0px !important;
	margin:0px !important;
	margin-bottom:15px !important;
	max-width:290px;
}
@media only screen and (max-width : 767px) {
	.form-submit img {
	max-width:80%;
	margin-bottom:20px !important;
}
}