@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'Fira Sans';
    src: url('../../../../cssfonts/FiraSans-Regular.woff2') format('woff2'),
        url('../../../../cssfonts/FiraSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../../../cssfonts/FiraSans-Italic.woff2') format('woff2'),
        url('../../../../cssfonts/FiraSans-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}


@font-face {
    font-family: 'Fira Sans';
    src: url('../../../../cssfonts/FiraSans-Medium.woff2') format('woff2'),
        url('../../../../cssfonts/FiraSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../../../cssfonts/FiraSans-MediumItalic.woff2') format('woff2'),
        url('../../../../cssfonts/FiraSans-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../../../cssfonts/FiraSans-SemiBold.woff2') format('woff2'),
        url('../../../../cssfonts/FiraSans-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('../../../../cssfonts/FiraSans-SemiBoldItalic.woff2') format('woff2'),
        url('../../../../cssfonts/FiraSans-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}




@font-face {
    font-family: 'Inter';
    src: url('../../../../cssfonts/Inter-Regular.woff2') format('woff2'),
        url('../../../../cssfonts/Inter-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Inter';
    src: url('../../../../cssfonts/Inter-Medium.woff2') format('woff2'),
        url('../../../../cssfonts/Inter-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Inter';
    src: url('../../../../cssfonts/Inter-SemiBold.woff2') format('woff2'),
        url('../../../../cssfonts/Inter-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}



div,p,h1,h2,h3,h4,h5,h6,form,table,tr,td,body,ol,ul,li{
	padding:0;
	margin:0;
	background-repeat:no-repeat;
}

div{
	position:relative;
	background-repeat:no-repeat;
}
img{ border:none; }

a{ text-decoration:none; background-repeat:no-repeat; color: #487BA4; }

body {
	-webkit-text-size-adjust:none;
	font-family:'Fira Sans';
	font-size:10px;
	line-height:120%;
	background-color:#FFFFFF;
	text-align:left;
	color:#000000;
	width:100%;
	height:100%;
}

.innerBody{
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	height:100%;
	background-image: url('../images/background_master.jpg');
	background-position: center;
	/* background-size: contain; */
	background-size: cover;
}
.mainContent{
	height:100%;
}

.mainContentInner{
	height:100%;
}

.transparency{
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	height:100%;
	background-color:#FFF;
	opacity:0.5; filter:alpha(opacity=50);
}

#keypadBackground{
	width: 40%;
	margin: 0 auto;
	position: absolute;
  	top: 60%;
  	left: 50%;
  	-ms-transform: translate(-50%, -60%);
  	transform: translate(-50%, -60%);
	background-color: #000;
	box-sizing: border-box;
	padding: 5% 0 8% 0;
	text-align: center;
}

#keypadBackground h1{
	color:#FFF;
	font-size:100%;
	font-weight: 500;
	font-style: normal;
	line-height:1.2em;
}
#keypadBackground h2{
	color:#FFF;
	font-size:47.6%;
	font-weight: 500;
	font-style: normal;
	line-height:1.2em;
}

.innerRing {
	fill: #CCC;
	stroke-width: 0px;
}
.outerRing{
	fill: #FFF;
	stroke-width: 0px;
}
.space{
	fill:none;
	stroke-width: 0px;
}
#pinRings{
	margin: 9% auto 0 auto;
	width:75%;
}
.pinRing{
	display:inline-block;
	width:21%;
	aspect-ratio: 1 / 1;
	margin-left:2%;
	margin-right:2%;
	padding-bottom:5%;
}
.pinRing.filled .innerRing{
	fill:#16C000;
}
#keypad{
	margin: 5% auto 9%;
	width:80%;
}
.keybutton{
	display:inline-block;
	width:23%;
	aspect-ratio: 1 / 1;
	margin-left:5%;
	margin-right:5%;
	background-color:#FFF;
	font-size:135%;
	color:#000;
	border-radius: 50%;
	line-height:1.2em;
	font-weight: 600;
    font-style: normal;
    overflow:hidden;
    margin-bottom:6%;
}

.keybutton.spacer, #keypadGSL .keybutton.spacer{
	background:none;
}

.keybutton.back{
	background-color:#AAA;
	font-size:53%;
	line-height:2.85em;
}

.keybutton.pressed{
	background-color: #E4F9E2;
}

.controlButton{
	display:inline-block;
	box-sizing: border-box;
	border-radius: 5%/10%;
	color:#FFF;
	font-weight: 600;
    font-style: normal;
    font-size:.41em;
    line-height: 1em;
    padding:5%;
    margin-left:5%;
    margin-right:5%;
    background-color: #D90000;
    text-transform: uppercase;
    width:30%;
}
.controlButton.clear{
	background-color: #26B7FF;
}


#header{
	background-color: #000;
	width: 100%;
	position: fixed;
	top:0;
	left:0;
	right:0;
	height: 150px;
	color:#FFF;
}

#header #bannerLogo{
	height:85%;
	width:auto;
	position: absolute;
	left:10%;
	top:7%;
}
.memberInfo{
	position: absolute;
	right: 0px;
	top:0px;
	bottom:0px;
	height:100%;
	box-sizing: border-box;
	padding-right:4%;
}
#memberInfoBlock{
	position:relative;
	box-sizing: border-box;
	white-space: nowrap;
	float:right;
}

.memberInfo #memberCircle{
	position: absolute;
	left:0;
	top:10%;
	height:80%;
	width: auto;
	display:inline-block;
}
#mainMemberInfo .memberCircle{
	margin-bottom:2%;
}

#memberCircle .innerCircle, .memberCircle .outerCircle {
	fill: #AEB593;
	stroke-width: 0px;
}
#memberCircle .outerCircle, .memberCircle .outerCircle{
	fill: #FFF;
	stroke-width: 0px;
}
.memberInfo h1{
	font-weight: normal;
    font-style: normal;
    line-height: 1.2em;
}

.memberInfo h1#memberName{
	text-transform: uppercase;
}
.memberInfo h1#memberTier{
	font-size:155.4%
}
.memberInfo p{
	font-size:110%;
	line-height:1.2em;
}
#birthday{
	position:absolute;
	inset:0;
	width: 100%;
	height:100%;
	animation: hide 0.5s linear 3s 1 forwards;
}
#birthdayMessage{
	background-image: url('../images/happy_birthday.svg');
	background-position: center;
	background-size:contain;
	position:relative;
	top: 0;
  	margin: 0 auto;
	width:80%;
	height:100%;
	animation: pulse 1s linear infinite;
}

@keyframes hide {
    to {
        opacity: 0;
        display:none;
    }
}


@-webkit-keyframes "pulse" {
	0% {
		width:70%;
	}
	
	50% {
		width:90%;
	}
	
	100% {
		width:70%;
	}
}

.kioskhome .darkBG, .kioskgames .darkBG{
	background-color:#000;
	opacity:0.4; filter:alpha(opacity=40);
}

#mainMemberInfo{
	position:absolute;
	top: 36%;
  	left: 50%;
  	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	width:60%;
	height:20%;
	text-align: center;
	color:#FFF;
	box-sizing: border-box;
	background: rgb(0, 0, 0, 0.4);
}


#mainMemberInfo h1{
	font-weight: normal;
    font-style: normal;
    line-height: 1.2em;
    font-size:260%;
}

#mainMemberInfo h1#memberName{
	text-transform: uppercase;
}

#mainMemberInfo .memberCircle{
	height:35%;
	width: auto;
	position:relative;
	margin-top: 13%;
}
.mainMemberInfoInner{
	top: 50%;
  	left: 50%;
  	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
  	height: 50%;
}
.homeButton{
	float:left;
	width:46%;
	margin-left:4%;
	text-align: center;
	color:#FFF;
	padding-top:4%;
	height:100%;
	box-sizing: border-box;
	background: rgb(0, 0, 0, 0.4);
}
.homeButton img{
	width:40%;
}
.homeButton a, #mainMemberInfo a, #endSessionButton a{
	position: absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	cursor: pointer;
}
.played{
	opacity:0.5; filter:alpha(opacity=50);
	background: rgb(0, 0, 0, 0.9);
}

#homeButtons .homeButton:first-child{
	margin-right:4%;
	margin-left:0;
}

#homeButtons .homeButton:first-child img{
	width:50%;
}
#homeButtons .homeButton h1{
 line-height: 1.2em;
 }

#homeButtons{
	position:absolute;
	top: 56%;
  	left: 50%;
  	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
  	width:60%;
  	height:15%;
}
  	
#homeButtons:after {
  content:"";
  display:block;
  clear:both;
 }

#homeButtons h1{
	font-weight: normal;
    font-style: normal;
    line-height: 0.9em;
    font-size:300%;
    position: absolute;
    left:0;
    right:0;
    bottom:7%;
}


#footer{
	background-color: #000;
	width: 100%;
	position: fixed;
	bottom:0;
	left:0;
	right:0;
	height: 115px;
	color:#FFF;
}
#endSessionButton h1{
	font-weight: normal;
    font-style: normal;
    line-height: 1.2em;
    font-size:410%;
    letter-spacing: -1px;
}

#endSessionButton{
	display:block;
	box-sizing: border-box;
	border-radius: 3%/10%;
	color:#FFF;
    padding:1% 4%;
    margin-left:2%;
    background-color: #D90000;
    width:30%;
    height:85%;
    margin-top:1%;
    box-sizing: border-box;
    overflow:hidden;
}

#endSessionButton p{
	 font-size:200%;
	 line-height:1.2em;
}
#progBar{
	height:5%;
	background-color:#FFD417;
	width:100%;
	overflow:hidden;
	margin-top:2%;
}

#acceptButton h1{
	font-weight: normal;
    font-style: normal;
    line-height: 1.2em;
    font-size:5em;
}

#acceptButton{
	display:block;
	box-sizing: border-box;
	border-radius: 3%/10%;
	color:#FFF;
    padding:2% 4%;
    position:absolute;
    right:2%;
    top:0;
    background-color: #2EAD00;
    width:30%;
    height:85%;
    margin-top:1%;
    box-sizing: border-box;
    overflow:hidden;
    background-image: url('../images/accept_tick.svg');
	background-size: auto 75%;
	background-position: 5% center;
	padding-left: 12%;
	padding-right: 2%;
}



.kioskmember .innerBody{
	background-image: url('../images/generic_bg.jpg');
}

.kioskmember #endSessionButton,.kioskgsl #endSessionButton{
	background-image: url('../images/home_icon.svg');
	background-size: auto 85%;
	background-position: 5% center;
	padding-left:12%;
	padding-right:2%;
	width:37%;
}

#memberDetails{
	top: 16%;
  	left: 0;
  	-ms-transform: translate(0, -16%);
  	transform: translate(0, -16%);
  	 box-sizing: border-box;
  	 padding: 0 3%;
  	 color:#FFF;
}
#memberDetails h1{
	font-weight: normal;
	font-style: normal;
	font-size:6em;
	line-height: 1.1em;
	padding-bottom:2%;
}

#memberDetails p{
	font-size:3.6em;
	line-height: 1.4em;
	
}

#memberDetails p.memberPanel{
	background: rgb(255, 255, 255, 0.3);
	text-transform: uppercase;
	margin-right:30%;
	padding:1%;
	margin-top:1%;
	margin-bottom:2%;
	font-weight: 500;
}

.kioskmember .transparency{
	opacity:0.1; filter:alpha(opacity=10);
}

#memberTools{
	position: absolute;
	top: 55%;
	left: 0;
	-ms-transform: translate(0, -55%);
	transform: translate(0, -55%);
	box-sizing: border-box;
	padding: 0 3%;
	color:#FFF;
	width:100%;
}
#memberTools:after {
	content:"";
	display:block;
	clear:both;
 }
.memberToolsButton{
	float:left;
	font-size:5em;
	line-height:1.2em;
	width:18%;
	padding: 5% 0 1%;
	text-align: center;
	background-image: url('../images/crown.svg');
	background-size: auto 40%;
	background-position: center 0;
}
.memberToolsButton .underline{
	position: absolute;
	width:100%;
	bottom:0px;
	left:0px;
	right:0px;
	height:8%;
	background-color:#0093FF;
	display:none;
}

.memberToolsButton.active .underline{
	display:block;
}

#walletButton{
	background-image: url('../images/cashbag.svg');
}

#prizesButton{
	background-image: url('../images/giftbox.svg');
}

.memberToolsButton a{
	display:block;
	position: absolute;
	width:100%;
	height:100%;
	inset:0;
}

.memberInfoBlocks{
	position: absolute;
	left: 0;
	right:0;
	box-sizing: border-box;
	padding: 0 3%;
	color:#FFF;
	width:100%;
}

.memberInfoBlocks .pointsBlock{
	background: rgb(0, 0, 0, 0.7);
	padding:2%;
	margin-bottom:1%;
}

.memberInfoBlocks h1{
	position: absolute;
	right:2%;
	top:0;
	font-size:5.2em;
	line-height:1.2em;
	font-weight:normal;
	padding-top:8%;
}

#walletInfo.memberInfoBlocks h1{
	padding-top:1%;
}

.memberInfoBlocks h2{
	font-size:3.3em;
	line-height:1.2em;
	font-weight:normal;
}
.memberInfoBlocks h3{
	font-size:2.2em;
	line-height:1.2em;
	font-weight:normal;
}

.genericButton{
	display:inline-block;
	box-sizing: border-box;
	border-radius: 3%/20%;
	color:#FFF;
	font-weight: 500;
    font-style: normal;
    font-size:2.2em;
    line-height: 1em;
    padding:1% 2%;
    background-color:#0093FF;
    margin-top:2%;
}

.kioskgsl #keypadGSL{

}
.kioskgsl .innerBody{
	background-image:none;
	background-color:#74808A;
}

#keypadGSL{
	width: 50%;
	margin: 0 auto;
	position: absolute;
  	top: 0;
  	left: 50%;
  	-ms-transform: translate(-50%, 0);
  	transform: translate(-50%, 0);
	box-sizing: border-box;
	padding: 5% 0 8% 0;
	text-align: center;
	display:none;
}

#keypadGSL .keybutton{
	display:inline-block;
	background-color:#899BA8;
	font-size:100%;
	font-size:6.5em;
	color:#FFF;
	border-radius: 0%;
	line-height:1.5em;
	font-weight: 600;
    font-style: normal;
    overflow:hidden;
    margin-bottom:3%;
	margin-left: 3%;
	margin-right: 3%;
}

#keypadGSL #key_back{
	background-image: url('../images/delete_button.svg');
	background-position: center;
	background-size: 65% auto;
}

#feedback{
	text-align:center;
	margin: 0 auto;
	position: absolute;
  	top: 0;
  	left: 50%;
  	-ms-transform: translate(-50%, 0);
  	transform: translate(-50%, 0);
  	width:100%;
}

#feedback h3{
	font-weight:normal;
	font-size:8em;
	color:#FFF;
	line-height:1.2em;
}

#amountBox{
	text-align:center;
}

#amountBox h2{
	font-weight:normal;
	font-size:4.5em;
	color:#FFF;
	line-height:1.2em;
}
#amount{
	background-color:#AFBAC9;
	border:2px solid #242629;
	width:75%;
	margin:3% auto;
	font-size:12.4em;
	line-height:1em;
	box-sizing: border-box;
	padding: 2%;
	overflow:hidden;
}

#keypadGSL .keybutton.pressed{
	background-color: #AABFCC;
}
#lightBox{
	position: absolute;
	inset:0;
	width:100%;
	height:100%;
	display:none;
}
#lightBoxPromo{
	position: absolute;
	inset:0;
	width:100%;
	height:100%;
	display:none;
}
.darkBG{
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	height:100%;
	background-color:#FFF;
	opacity:0.7; filter:alpha(opacity=70);
}
.kiosklogin .darkBG{
	background-color:#000;
	opacity:0.5; filter:alpha(opacity=50);
}

.kiosklogin #lightBox{
	display:block;
}

.kioskgame1 .darkBG, .kioskgame2 .darkBG, .kioskgame3 .darkBG{
	opacity:0.3; filter:alpha(opacity=30);
}

#popUpBox,#popUpBoxPromo{
	margin: 0 auto;
	/*
	position: absolute;
  	top: 50%;
  	left: 50%;
  	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
  	*/
  	top: 40%;
	background-color: #000;
	box-sizing: border-box;
	padding: 3% 0 8% 0;
	text-align: center;
	width:60%;
	height:20%;
	color:#FFF;
	z-index:1000;
}
#popUpBoxPromo{
	padding: 3% 3% 8% 3%;
}
#popUpBox .genericButton,#popUpBoxPromo .genericButton{
	background-color:#2EAD00;
	margin: 0 auto;
	position: absolute;
  	top: 90%;
  	left: 50%;
  	-ms-transform: translate(-50%, -90%);
  	transform: translate(-50%, -90%);
  	font-size:4em;
  	padding:3% 8%;
  	border-radius: 10%/20%;
}

#popUpBox p,#popUpBoxPromo p{
	font-size:4em;
	line-height:1.3em;
	padding-bottom:4%;
}

.kioskgame1 #popUpBox p,.kioskgame2 #popUpBox p,.kioskgame3 #popUpBox p,#popUpBoxPromo p{
	font-size:6em;
}

.kioskgame1 #popUpBox .tomorrow,.kioskgame2 #popUpBox .tomorrow,.kioskgame3 #popUpBox .tomorrow{
	font-size:3em;
	padding-top:1em;
}
.kioskgame1 #popUpBox,.kioskgame2 #popUpBox,.kioskgame3 #popUpBox,#popUpBoxPromo{
	width:61%;
	height:38%;
	animation: popupShow 0.5s linear;
    -webkit-animation: popupShow 0.5s linear;
    top: 30%;
}

@keyframes popupShow {
	0% {
		transform: scale(0.01);
		-webkit-transform: scale(0.01);
	}
	
	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}

.kioskgame1 #popUpBox .star, .kioskgame2 #popUpBox .star, .kioskgame3 #popUpBox .star, #popUpBoxPromo .star{
	animation: starspin 3s linear infinite;
    -webkit-animation: starspin 3s linear infinite;
    -webkit-filter: drop-shadow(0em 0em 6em rgba(255, 240, 140, 1));
  	filter: drop-shadow(0em 0em 6em rgba(255, 240, 140, 1));
}

.kioskgame1 #popUpBox .starDiv, .kioskgame2 #popUpBox .starDiv, .kioskgame3 #popUpBox .starDiv, #popUpBoxPromo .starDiv{
	animation: starpulse 1s ease-in-out infinite;
}

@keyframes starpulse {
	0% {
		transform: scale(0.8);
		-webkit-transform: scale(0.8);
	}
	
	50%{
		transform: scale(1);
		-webkit-transform: scale(1);
	}
	100% {
		transform: scale(0.8);
		-webkit-transform: scale(0.8);
	}
}


@keyframes starspin {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	

	100% {
		transform: rotate(359deg);
		-webkit-transform: rotate(359deg);
	}
}


#spinner, #loadingSpinner {
	background-image: url('../images/spinner.gif');
	background-position: center;
	background-size:contain;
   width: 20%;
   height: 20%;
   margin: 0 auto;position: absolute;
	top: 14%;
  	left: 50%;
  	-ms-transform: translate(-50%, -14%);
  	transform: translate(-50%, -14%);
}
#loadingSpinner{
	top: 22%;
	-ms-transform: translate(-50%, -22%);
  	transform: translate(-50%, -22%);
}
.loadingSpinner{
	background-image: url('../images/spinner.gif');
	background-position: center;
	background-size:contain;
   width: 20%;
   margin: 0 auto;
}
#prizesInfo{
	overflow-x: hidden;
	overflow-y: auto;
}
.prizesBlock h2{
	position: absolute;
	top: 20%;
	width: 65%;
	overflow: hidden;
	left: 2%;
}

.prizesBlock h3{
	left: 70%;
	position: relative;
}
.prizesBlock h4{
	left: 70%;
	position: relative;
	font-size: 1.8em;
	line-height: 1.2em;
	font-weight: normal;
	padding-top:1%;
}
.prizesBlock h5{
	font-size: 2.2em;
	line-height: 1.2em;
	font-weight: normal;
	position: absolute;
	left: 2%;
	bottom: 15%;
}

#transactionData{
	padding-top:2%;
}

.transactionsBlock{
	background-color:#0567CF;
	padding:1%;
	margin-top:1%;
}
.transactionsBlock p{
	display:inline-block;
	width:46%;
	font-size: 3.3em;
	line-height: 1.1em;
}
.transactionsBlock p:last-child{
	text-align:right;
	width:27%;
}
.transactionsBlock p:nth-child(2){
	text-align: center;
	width:27%;
}

#eplus{
	overflow-x: hidden;
	overflow-y: auto;
}

.kioskgame1 #gamecontent{
	display:none;
	animation: boxgrow 1s ease-out;
    -webkit-animation: boxgrow 1s ease-out;
}
.kioskgames #footer, .kioskgame1 #footer, .kioskgame2 #footer, .kioskgame3 #footer{
	background: none;
}

.kioskgames .innerBody{
	background-image: url('../images/game_menu_bg.jpg');
}

.kioskgames #gamechoices {
	position:absolute;
	text-align: center;
	top:26%;
}

.kioskgames #gamechoices a{

}

.kioskgames #gamechoices a img{
	width:80%;
	margin-bottom:6em;
	-webkit-filter: drop-shadow(1em 1em 1em rgba(0, 0, 0, 0.6));
  	filter: drop-shadow(1em 1em 1em rgba(0, 0, 0, 0.6));
}

.kioskgame1 .innerBody{
	background-image: url('../images/pirate_bg.jpg');
}

.kioskgame2 .innerBody{
	background-image: url('../images/card_bg.jpg');
}

.kioskgame3 .innerBody{
	/* background-image: url('../images/card_bg.jpg'); */
	
	background-image:none;
	background-color:#A71F00;
}
.kioskgame1 .boxes{
	display:inline-block;
	background-image: url('../images/chest_closed.png');
	background-position: left top;
	background-size: contain;
	-webkit-filter: drop-shadow(1em 1em 1em rgba(0, 0, 0, 0.4));
  	filter: drop-shadow(1em 1em 1em rgba(0, 0, 0, 0.4));
	position:absolute;
	padding-right:2em;
	animation: boxbounce 1s ease-in-out infinite;
    -webkit-animation: boxbounce 1s ease-in-out infinite;
	
}

.kioskgame2 #gamecontent{
	display:none;
}

.kioskgame2 .cardholder{
	width:35em;
	position:absolute;
}

.kioskgame2 .cards{
	display:block;
	margin: 0 auto;
	background-image: url('../images/back.png');
	background-position: left top;
	background-size: 100% 100%;
	box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.4);
	/*
	-webkit-filter: drop-shadow(1em 1em 1em rgba(0, 0, 0, 0.4));
  	filter: drop-shadow(1em 1em 1em rgba(0, 0, 0, 0.4));
  	*/
	border-radius: 2em;
	width:35em;
	/* overflow:hidden; */
}

.kioskgame2 .cards img{
	width:1em;
	height:54.6em;
}
/* 366 height */

.kioskgame2 #cardholder1{	left:16em; top:60em; animation: dealcards1 0.5s ease-out ; -webkit-animation: dealcards1 0.5s ease-out ; }
.kioskgame2 #cardholder2{	left:57em; top:60em; animation: dealcards2 1s ease-out ; -webkit-animation: dealcards2 1s ease-out ;  }
.kioskgame2 #cardholder3{	left:16em; top:120em; animation: dealcards3 1.5s ease-out ; -webkit-animation: dealcards3 1.5s ease-out ;  }
.kioskgame2 #cardholder4{	left:57em; top:120em; animation: dealcards4 2s ease-out ; -webkit-animation: dealcards4 2s ease-out ;  }

@keyframes dealcards1 {
	0% {
		left:-40em; top: 10em;
	}
	
	5% {
		left:-40em; top: 10em;
	}
}

@keyframes dealcards2 {
	0% {
		left:-40em; top: 10em;
	}
	
	10% {
		left:-40em; top: 10em;
	}
}
@keyframes dealcards3 {
	0% {
		left:-40em; top: 10em;
	}
	
	15% {
		left:-40em; top: 10em;
	}
}
@keyframes dealcards4 {
	0% {
		left:-40em; top: 10em;
	}
	
	20% {
		left:-40em; top: 10em;
	}
}

.kioskgame2 .cards.selected{
	animation: cardswell 0.5s linear;
    -webkit-animation: cardswell 0.5s linear;
}

@keyframes cardswell {
	0% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
	50% {
		transform: scale(1.1);
		-webkit-transform: scale(1.05);
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}
.kioskgame2 #spadeHolder{
	position: absolute;
	top:0;
	left:0;
	right:0;
	width:100%;
}

.kioskgame2 #spadeicon{
	position: absolute;
	margin: auto;
	left: 0;
	right:0;
	top:23.5em;
	width:10em;
	height:12em;
	animation: spadefly 2s linear infinite;
    -webkit-animation: spadefly 2s linear infinite;
}

@keyframes spadefly {
	0% {
		transform: scale(1);
		-webkit-transform: scale(1);
		opacity:0;
	}
	50% {
		transform: scale(3);
		-webkit-transform: scale(2);
		opacity:.7;
	}
	
	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
		opacity:0;
	}
}

/*
.kioskgame1 canvas{
	-webkit-filter: drop-shadow(0 0 10em rgba(255, 255, 255, 1));
  	filter: drop-shadow(0 0 10em rgba(255, 255, 255, 1));
}
*/
.kioskgame1 .boxes.selected{
	animation: boxbounce 0.2s linear infinite;
    -webkit-animation: boxbounce 0.2s linear infinite;
}

.kioskgame1 .boxes img{
	width:40em;
	height:auto;
}

.kioskgame1 #box1{	left:13em; top:40em;  }
.kioskgame1 #box2{	left:60em; top:55em;  }
.kioskgame1 #box3{	left:13em; top:80em;  }
.kioskgame1 #box4{	left:60em; top:95em;  }

.kioskgame1 .boxes.win{
	background-image: url('../images/chest_prize.png');
}

.kioskgame1 .boxes.nowin{
	background-image: url('../images/chest_empty.png');
}

@keyframes boxgrow {
	0% {
		transform: scale(0.01);
		-webkit-transform: scale(0.01);
	}
	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
	}
}

@keyframes boxbounce {
	0% {
		transform: rotate(-2deg);
		-webkit-transform: rotate(-2deg);
	}
	50% {
		transform: rotate(2deg);
		-webkit-transform: rotate(2deg);
	}
	100% {
		transform: rotate(-2deg);
		-webkit-transform: rotate(-2deg);
	}
}
/*
#gamesButton{
	opacity:0.5; filter:alpha(opacity=50);
	background: rgb(0, 0, 0, 0.9);
}
*/
#keypadBackground,#header,#mainMemberInfo,#homeButtons,#footer,#memberDetails,#memberTools,#pointsInfo,#keypadGSL,#amountBox,#feedback,#popUpBox,#gamecontent{
	/* display:none; */
}

#hiddenbutton{
	position: absolute;
	background:none;
	display:block;
	width: 10%;
	height: 5%;
	right: 0;
	bottom: 5%;
	cursor: default;
}

.lose1{
	animation: spinwheel1 7s ease-out forwards;
    -webkit-animation: spinwheel1 7s ease-out forwards;
}
.lose2{
	animation: spinwheel2 7s ease-out forwards;
    -webkit-animation: spinwheel2 7s ease-out forwards;
}
.lose3{
	animation: spinwheel3 7s ease-out forwards;
    -webkit-animation: spinwheel3 7s ease-out forwards;
}
.lose4{
	animation: spinwheel4 7s ease-out forwards;
    -webkit-animation: spinwheel4 7s ease-out forwards;
}
.lose5{
	animation: spinwheel6 7s ease-out forwards;
    -webkit-animation: spinwheel6 7s ease-out forwards;
}
.win1{
	animation: spinwheel5 7s ease-out forwards;
    -webkit-animation: spinwheel5 7s ease-out forwards;
}
@keyframes spinwheel1 {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	100% {
		transform: rotate(1440deg);
		-webkit-transform: rotate(1440deg);
	}
}

@keyframes spinwheel2 {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	100% {
		transform: rotate(1380deg);
		-webkit-transform: rotate(1380deg);
	}
}
@keyframes spinwheel3 {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	100% {
		transform: rotate(1320deg);
		-webkit-transform: rotate(1320deg);
	}
}
@keyframes spinwheel4 {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	100% {
		transform: rotate(1500deg);
		-webkit-transform: rotate(1500deg);
	}
}
@keyframes spinwheel5 {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	100% {
		transform: rotate(1560deg);
		-webkit-transform: rotate(1560deg);
	}
}
@keyframes spinwheel6 {
	0% {
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	100% {
		transform: rotate(1620deg);
		-webkit-transform: rotate(1620deg);
	}
}
#wheelFG{
	position: absolute;
	left:0;
	top:58em;
}

#wheelFG img{
	width:100%;
}

#wheelBox{
	position: absolute;
	left:0;
	top:78em;
	text-align: center;
	width:100%;
}

#wheelBox img{
	width:63em;
}
#text{
	position: absolute;
	left:0;
	top:0;
	width:100%;
}

#tent img{
	width:100%;
	-webkit-filter: drop-shadow(0em 1em 1em rgba(0, 0, 0, 0.6));
  	filter: drop-shadow(0em 1em 1em rgba(0, 0, 0, 0.6));
}

#mc{
	position: absolute;
	left:0;
	top:128em;
	width:100%;
}

#mc img{
	position:absolute;
	left:65em;
	height:60em;
	-webkit-filter: drop-shadow(0em 1em 1em rgba(0, 0, 0, 0.6));
  	filter: drop-shadow(0em 1em 1em rgba(0, 0, 0, 0.6));
}
#stars{
	pointer-events: none;
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	height:190em;
	
	background-image: url('../images/stars.webp');
	background-position: center;
	background-size: cover;
	opacity:0.5; filter:alpha(opacity=50);
}
#spinit{
	position: absolute;
	display:block;
	width:70em;
	height:70em;
	margin: 0 auto;
	top:75em;
	left:20em;
	z-index:100;
}

#spinclick{
	position:absolute;
	width:40em;
	top:85em;
	left:60em;
	-webkit-filter: drop-shadow(0em 1em 1em rgba(0, 0, 0, 0.6));
  	filter: drop-shadow(0em 1em 1em rgba(0, 0, 0, 0.6));
}