#divAppGamblePrize
{
    background-color:rgba(0, 0, 0, 0.75);
    display:none;
    height:100%;
    left:0%;
    opacity:0;
    position:fixed;
    top:0%;
    width:100%;
    z-index:20;
}

#divAppGamblePrize.show
{
	animation-duration:0.25s;
	animation-name:showGamblePrize;
	display:block;
	opacity:1;
}

#divAppGamblePrize #divGamblePrizePopup
{
    background-color:#1b1c20;
    background-image:url('../images/gamblePrize/background.webp');
    background-size:cover;
    border-radius:10px;
    box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 50px #000000;
	height:500px;
    left:50%;
    opacity:0;
	overflow:hidden;
	padding:30px;
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
	width:480px;
}

#divAppGamblePrize.show #divGamblePrizePopup
{
    animation-duration:0.25s;
	animation-name:showGamblePrize;
	opacity:1;
}

#divAppGamblePrize #divGamblePrizePopup:before
{
    background-image:url('../images/gamblePrize/table.webp');
    background-position:center;
    background-size:cover;
    bottom:0px;
    content:"";
    height:180px;
    left:50%;
    position:absolute;
    transform:translateX(-50%);
    width:100%;
}

#divAppGamblePrize #btnClosePopup
{
	cursor:pointer;
	height:40px;
	position:absolute;
	right:20px;
	top:20px;
	width:40px;
}

#divAppGamblePrize #btnClosePopup:before
{
	background-color:#3f4656;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(45deg);
    transition:background-color 0.25s, box-shadow 0.25s;
	width:24px;
}

#divAppGamblePrize #btnClosePopup:after
{
	background-color:#3f4656;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(-45deg);
    transition:background-color 0.25s, box-shadow 0.25s;
	width:24px;
}

#divAppGamblePrize #btnClosePopup:hover:before, #divAppGamblePrize #btnClosePopup:focus:before, #divAppGamblePrize #btnClosePopup:hover:after, #divAppGamblePrize #btnClosePopup:focus:after
{
    background-color:#fbd3ff;
    box-shadow:0px 0px 5px #e600ff;
}

#divAppGamblePrize .divHeading
{
    animation:neonTextFlicker 5s linear 0s infinite;
    color:#ffffff;
    font-family:"Bayshore", sans-serif;
    font-size:80px;
    margin-bottom:15px;
    text-align:center;
}

#divAppGamblePrize .divGambleInfo
{
    color:#ffffff;
    font-size:13px;
    margin-bottom:15px;
}

#divAppGamblePrize .spnBlack
{
    color:#000000;
    font-weight:700;
    text-shadow:0px 0px 5px rgba(255, 255, 255, 0.5);
}

#divAppGamblePrize .spnRed
{
    color:#ff0000;
    font-weight:700;
    text-shadow:0px 0px 5px rgba(255, 0, 0, 0.5);
}

#divAppGamblePrize .divGuessTheCard
{
    color:#ffffff;
    font-size:36px;
    margin-bottom:15px;
    text-align:center;
    text-shadow:0px 0px 10px #e600ff, 0px 0px 15px #e600ff;
}

#divAppGamblePrize #divFlipCard
{
    background-color:transparent;
    bottom:10px;
    height:188px;
    left:50%;
    perspective:1000px;
    position:absolute;
    transform:translateX(-50%);
    width:130px;
}

#divAppGamblePrize .divCardInner
{
    border-radius:10px;
    box-shadow:0px 0px 0px #01eff9, 0px 0px 0px #000000;
    height:100%;
    position:relative;
    transform:rotateX(45deg) scale(0.35);
    transform-style:preserve-3d;
    transition:box-shadow 2s, transform 2s;
    width:100%;
}

#divAppGamblePrize #divFlipCard.bringCardForward .divCardInner
{
    animation:bringCardForward 1s;
    box-shadow:0px 0px 15px #01eff9, 0px 0px 100px #000000;
    transform:rotateX(0deg) rotateY(0deg) scale(1) translateY(-40px);
}

#divAppGamblePrize #divFlipCard.flipCard .divCardInner
{
    animation:flipCard 0.5s;
    transform:rotateX(0deg) rotateY(180deg) scale(1) translateY(-40px);
}

/*#divAppGamblePrize #divFlipCard.flipCard .divCardInner
{
    animation:flipCard 1.5s;
    box-shadow:0px 0px 15px #01eff9, 0px 0px 100px #000000;
    margin-top:0px;
    transform:rotateX(0deg) rotateY(180deg) scale(1) translateY(-40px);
}*/

#divAppGamblePrize .divCardBack
{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    background-color:#ffffff;
    background-image:url('../images/cards/back.jpg');
    background-position:center;
    background-repeat:no-repeat;
    background-size:80%;
    border-radius:10px;
    height:100%;
    position:absolute;
    width:100%;
}

#divAppGamblePrize #divGableCard
{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    background-color:#ffffff;
    background-size:100%;
    border-radius:10px;
    height:100%;
    position:absolute;
    transform:rotateY(180deg);
    width:100%;
}

#divAppGamblePrize #divGableCard.s1
{
	background-image:url('../images/cards/s1.webp');
}

#divAppGamblePrize #divGableCard.s2
{
	background-image:url('../images/cards/s2.webp');
}

#divAppGamblePrize #divGableCard.s3
{
	background-image:url('../images/cards/s3.webp');
}

#divAppGamblePrize #divGableCard.s4
{
	background-image:url('../images/cards/s4.webp');
}

#divAppGamblePrize #divGableCard.s5
{
	background-image:url('../images/cards/s5.webp');
}

#divAppGamblePrize #divGableCard.s6
{
	background-image:url('../images/cards/s6.webp');
}

#divAppGamblePrize #divGableCard.s7
{
	background-image:url('../images/cards/s7.webp');
}

#divAppGamblePrize #divGableCard.s8
{
	background-image:url('../images/cards/s8.webp');
}

#divAppGamblePrize #divGableCard.s9
{
	background-image:url('../images/cards/s9.webp');
}

#divAppGamblePrize #divGableCard.s10
{
	background-image:url('../images/cards/s10.webp');
}

#divAppGamblePrize #divGableCard.s11
{
	background-image:url('../images/cards/s11.webp');
}

#divAppGamblePrize #divGableCard.s12
{
	background-image:url('../images/cards/s12.webp');
}

#divAppGamblePrize #divGableCard.s13
{
	background-image:url('../images/cards/s13.webp');
}

#divAppGamblePrize #divGableCard.c1
{
	background-image:url('../images/cards/c1.webp');
}

#divAppGamblePrize #divGableCard.c2
{
	background-image:url('../images/cards/c2.webp');
}

#divAppGamblePrize #divGableCard.c3
{
	background-image:url('../images/cards/c3.webp');
}

#divAppGamblePrize #divGableCard.c4
{
	background-image:url('../images/cards/c4.webp');
}

#divAppGamblePrize #divGableCard.c5
{
	background-image:url('../images/cards/c5.webp');
}

#divAppGamblePrize #divGableCard.c6
{
	background-image:url('../images/cards/c6.webp');
}

#divAppGamblePrize #divGableCard.c7
{
	background-image:url('../images/cards/c7.webp');
}

#divAppGamblePrize #divGableCard.c8
{
	background-image:url('../images/cards/c8.webp');
}

#divAppGamblePrize #divGableCard.c9
{
	background-image:url('../images/cards/c9.webp');
}

#divAppGamblePrize #divGableCard.c10
{
	background-image:url('../images/cards/c10.webp');
}

#divAppGamblePrize #divGableCard.c11
{
	background-image:url('../images/cards/c11.webp');
}

#divAppGamblePrize #divGableCard.c12
{
	background-image:url('../images/cards/c12.webp');
}

#divAppGamblePrize #divGableCard.c13
{
	background-image:url('../images/cards/c13.webp');
}

#divAppGamblePrize #divGableCard.d1
{
	background-image:url('../images/cards/d1.webp');
}

#divAppGamblePrize #divGableCard.d2
{
	background-image:url('../images/cards/d2.webp');
}

#divAppGamblePrize #divGableCard.d3
{
	background-image:url('../images/cards/d3.webp');
}

#divAppGamblePrize #divGableCard.d4
{
	background-image:url('../images/cards/d4.webp');
}

#divAppGamblePrize #divGableCard.d5
{
	background-image:url('../images/cards/d5.webp');
}

#divAppGamblePrize #divGableCard.d6
{
	background-image:url('../images/cards/d6.webp');
}

#divAppGamblePrize #divGableCard.d7
{
	background-image:url('../images/cards/d7.webp');
}

#divAppGamblePrize #divGableCard.d8
{
	background-image:url('../images/cards/d8.webp');
}

#divAppGamblePrize #divGableCard.d9
{
	background-image:url('../images/cards/d9.webp');
}

#divAppGamblePrize #divGableCard.d10
{
	background-image:url('../images/cards/d10.webp');
}

#divAppGamblePrize #divGableCard.d11
{
	background-image:url('../images/cards/d11.webp');
}

#divAppGamblePrize #divGableCard.d12
{
	background-image:url('../images/cards/d12.webp');
}

#divAppGamblePrize #divGableCard.d13
{
	background-image:url('../images/cards/d13.webp');
}

#divAppGamblePrize #divGableCard.h1
{
	background-image:url('../images/cards/h1.webp');
}

#divAppGamblePrize #divGableCard.h2
{
	background-image:url('../images/cards/h2.webp');
}

#divAppGamblePrize #divGableCard.h3
{
	background-image:url('../images/cards/h3.webp');
}

#divAppGamblePrize #divGableCard.h4
{
	background-image:url('../images/cards/h4.webp');
}

#divAppGamblePrize #divGableCard.h5
{
	background-image:url('../images/cards/h5.webp');
}

#divAppGamblePrize #divGableCard.h6
{
	background-image:url('../images/cards/h6.webp');
}

#divAppGamblePrize #divGableCard.h7
{
	background-image:url('../images/cards/h7.webp');
}

#divAppGamblePrize #divGableCard.h8
{
	background-image:url('../images/cards/h8.webp');
}

#divAppGamblePrize #divGableCard.h9
{
	background-image:url('../images/cards/h9.webp');
}

#divAppGamblePrize #divGableCard.h10
{
	background-image:url('../images/cards/h10.webp');
}

#divAppGamblePrize #divGableCard.h11
{
	background-image:url('../images/cards/h11.webp');
}

#divAppGamblePrize #divGableCard.h12
{
	background-image:url('../images/cards/h12.webp');
}

#divAppGamblePrize #divGableCard.h13
{
	background-image:url('../images/cards/h13.webp');
}

#divAppGamblePrize #btnRed
{
    bottom:150px;
    cursor:pointer;
    height:80px;
    left:10%;
    position:absolute;
    user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    width:80px;
}

#divAppGamblePrize #btnRed:before
{
    background-color:#ff0000;
    border-radius:50%;
    bottom:5px;
    box-shadow:inset 0px 5px 10px -5px #ffffff, inset 0px -5px 10px -5px #000000;
    content:"";
    left:5px;
    position:absolute;
    right:5px;
    top:5px;
    z-index:1;
}

#divAppGamblePrize #btnBlack
{
    bottom:150px;
    cursor:pointer;
    height:80px;
    position:absolute;
    right:10%;
    user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    width:80px;
}

#divAppGamblePrize #btnBlack:before
{
    background-color:#000000;
    border-radius:50%;
    bottom:5px;
    box-shadow:inset 0px 5px 10px -5px #ffffff, inset 0px -5px 10px -5px #333333;
    content:"";
    left:5px;
    position:absolute;
    right:5px;
    top:5px;
    z-index:1;
}

#divAppGamblePrize .svgBorder
{
	animation:rotate1 60s linear 0s infinite;
    filter:drop-shadow(0px 0px 5px #e600ff) drop-shadow(0px 0px 10px #e600ff);
	height:100%;
	left:0px;
	overflow:visible;
	position:absolute;
	top:0px;
	width:100%;
}

#divAppGamblePrize #btnBlack .svgBorder
{
    animation:rotate2 50s linear 0s infinite;
    filter:drop-shadow(0px 0px 5px #01eff9) drop-shadow(0px 0px 10px #01eff9);
}

#divAppGamblePrize .crlOuter
{
	fill:none;
	stroke:#ffffff;
	stroke-linecap:round;
	stroke-width:2px;
}

#divAppGamblePrize #btnRed:after, #divAppGamblePrize #btnBlack:after
{
    color:#ffffff;
    content:"CLICK AGAIN TO CONFIRM";
    display:block;
    font-size:10px;
    font-weight:400;
    left:50%;
    line-height:12px;
    opacity:0;
    position:absolute;
    text-align:center;
    text-shadow:0px 0px 3px #000000;
    top:50%;
    transform:translate(-50%, -50%);
    transition:opacity 0.25s;
    width:70px;
    z-index:1;
}

#divAppGamblePrize #btnRed.selected:after, #divAppGamblePrize #btnBlack.selected:after
{
    opacity:1;
}

/* GAMBLE RESULT POPUP */
#divAppGamblePrize #divGambleResult
{
    background-color:rgba(0, 0, 0, 0.75);
    display:none;
    height:100%;
    left:0%;
    opacity:0;
    position:fixed;
    top:0%;
    width:100%;
    z-index:1;
}

#divAppGamblePrize #divGambleResult.show
{
    animation-duration:0.25s;
	animation-name:showGamblePrize;
	display:block;
	opacity:1;
}

#divAppGamblePrize .divGambleResultPopup
{
    background-color:#1b1c20;
    border-radius:10px;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 50px #000000;
    left:50%;
    opacity:0;
	overflow:hidden;
	padding:30px;
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
	width:420px;
}

#divAppGamblePrize #divGambleResult.show .divGambleResultPopup
{
    animation-duration:0.25s;
	animation-name:showGamblePrize;
	opacity:1;
}

#divAppGamblePrize #divGambleResultHeading
{
    color:#fbd3ff;
    font-size:22px;
    margin-bottom:5px;
    text-align:center;
    text-shadow:0px 0px 5px #e600ff;
}

#divAppGamblePrize #divGambleResultPrize
{
    color:#cffdff;
    font-size:40px;
    font-weight:700;
    margin-bottom:15px;
    text-align:center;
    text-shadow:0px 0px 5px #01eff9;
}

#divAppGamblePrize #divGambleResultMessage
{
    margin-bottom:30px;
}

#divAppGamblePrize #divGambleResultButtons
{
    text-align:center;
}

#divAppGamblePrize #divGambleResultButtons button
{
    margin-right:10px;
}

#divAppGamblePrize #divGambleResultButtons button:last-child
{
    margin-right:0px;
}

/* ANIMATION KEY FRAMES */
@keyframes bringCardForward
{
	0%	 {box-shadow:0px 0px 0px #01eff9, 0px 0px 0px #000000; transform:rotateX(45deg) rotateY(0deg) scale(0.35) translateY(0px);}
	100% {box-shadow:0px 0px 15px #01eff9, 0px 0px 100px #000000; transform:rotateX(0deg) rotateY(0deg) scale(1) translateY(-40px);}
}

@keyframes flipCard
{
	0%	 {transform:rotateX(0deg) rotateY(0deg) scale(1) translateY(-40px);}
    100% {transform:rotateX(0deg) rotateY(180deg) scale(1) translateY(-40px);}
}

@keyframes neonFlicker
{
	0%   {filter:none;}
	1%   {filter:drop-shadow(0px 0px 5px #01eff9) drop-shadow(0px 0px 10px #01eff9);}
    5%   {filter:drop-shadow(0px 0px 5px #01eff9) drop-shadow(0px 0px 10px #01eff9);}
    6%   {filter:none;}
    9%   {filter:none;}
    10%  {filter:drop-shadow(0px 0px 5px #01eff9) drop-shadow(0px 0px 10px #01eff9);}
    16%  {filter:drop-shadow(0px 0px 5px #01eff9) drop-shadow(0px 0px 10px #01eff9);}
    17%  {filter:none;}
    20%  {filter:none;}
    21%  {filter:drop-shadow(0px 0px 5px #01eff9) drop-shadow(0px 0px 10px #01eff9);}
    59%  {filter:drop-shadow(0px 0px 5px #01eff9) drop-shadow(0px 0px 10px #01eff9);}
    60%  {filter:none;}
    64%  {filter:none;}
	65%  {filter:drop-shadow(0px 0px 5px #01eff9) drop-shadow(0px 0px 10px #01eff9);}
    100% {filter:drop-shadow(0px 0px 5px #01eff9) drop-shadow(0px 0px 10px #01eff9);}
}

@keyframes rotate1
{
	0%   {transform:rotate(0deg);}
	100% {transform:rotate(360deg);}
}

@keyframes rotate2
{
	0%   {transform:rotate(0deg);}
	100% {transform:rotate(-360deg);}
}

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

/* MEDIA QUERIES */
@media (max-height: 600px)
{
    #divAppGamblePrize #divGamblePrizePopup
    {
        height:calc(100% - 100px);
        overflow-y:auto;
        top:20px;
		transform:translate(-50%, 0%);
    }
}

@media (max-width: 540px)
{
    #divAppGamblePrize #divGamblePrizePopup
    {
        box-shadow:none;
        border-radius:0px;
        height:calc(100% - 120px);
        left:0px;
        overflow-y:auto;
        padding:20px 20px 100px;
        top:0px;
        transform:translate(0%, 0%);
        width:calc(100% - 40px);
    }

    #divAppGamblePrize #btnClosePopup
    {
        right:15px;
        top:15px;
    }

    #divAppGamblePrize #btnClosePopup:before, #divAppGamblePrize #btnClosePopup:after
    {
        background-color:#fbd3ff;
        box-shadow:0px 0px 5px #e600ff;
    }

    #divAppGamblePrize .divHeading
    {
        font-size:60px;
    }

    #divAppGamblePrize .divGuessTheCard
    {
        font-size:26px;
    }
}

@media (max-width: 500px)
{
    /* GAMBLE RESULT POPUP */
    #divAppGamblePrize .divGambleResultPopup
    {
        max-height:calc(100% - 80px);
        overflow-y:auto;
        width:calc(100% - 80px);
    }
    
    #divAppGamblePrize #divGambleResultPrize
    {
        font-size:36px;
    }
}

@media (max-width: 420px)
{
    #divAppGamblePrize #divGamblePrizePopup
    {
        height:calc(100% - 115px);
        padding:15px 15px 100px;
        width:calc(100% - 30px);
    }

    #divAppGamblePrize #btnClosePopup
    {
        right:10px;
        top:10px;
    }

    #divAppGamblePrize .divHeading
    {
        font-size:50px;
        margin-top:15px;
    }

    #divAppGamblePrize #btnRed
    {
        left:15px;
    }

    #divAppGamblePrize #btnBlack
    {
        right:15px;
    }
}

@media (max-width: 400px)
{
    /* GAMBLE RESULT POPUP */
    #divAppGamblePrize .divGambleResultPopup
    {
        max-height:calc(100% - 50px);
        padding:15px;
        width:calc(100% - 50px);
    }

    #divAppGamblePrize #divGambleResultPrize
    {
        font-size:32px;
    }
}