#divAppBirthdayBonusPopup
{
    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;
}

#divAppBirthdayBonusPopup.show
{
	animation:showBirthdayBonusesPopup 0.25s;
	display:block;
	opacity:1;
}

#divAppBirthdayBonusPopup #divBirthdayBonusPopup
{
	background-color:#180520;
	background-image:url('../images/promotions/birthdayBonuses/background.webp');
	background-position:center;
	background-size:100% 100%;
	box-shadow:0px 0px 50px #000000;
    height:560px;
	left:50%;
    opacity:0;
	overflow:hidden;
	position:absolute;
    top:50%;
	transform:translate(-50%, -50%);
	width:512px;
}

#divAppBirthdayBonusPopup.show #divBirthdayBonusPopup
{
    animation:showBirthdayBonusesPopup 0.25s;
	opacity:1;
}

#divAppBirthdayBonusPopup #btnCloseBirthdayPopup
{
	background:linear-gradient(130deg, #5e4600 0%, #af811b 40%, #af811b 65%, #5e4600 100%);
	border-radius:50%;
	cursor:pointer;
	box-shadow:inset 0px 2px 2px -2px rgba(255, 255, 255, 0.75), inset 0px -2px 2px -2px rgba(0, 0, 0, 0.75), 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
	height:25px;
	position:absolute;
	right:20px;
	top:20px;
	width:25px;
	z-index:1;
}

#divAppBirthdayBonusPopup #btnCloseBirthdayPopup:before
{
	background-color:#332c04;
	content:"";
	height:3px;
	left:4px;
	position:absolute;
	top:11px;
	transform:rotate(45deg);
	width:18px;
}

#divAppBirthdayBonusPopup #btnCloseBirthdayPopup:after
{
	background-color:#332c04;
	content:"";
	height:3px;
	left:4px;
	position:absolute;
	top:11px;
	transform:rotate(-45deg);
	width:18px;
}

#divAppBirthdayBonusPopup .divPopupHeading
{
	background-image:url('../images/promotions/birthdayBonuses/heading.webp');
	background-position:center;
	background-size:cover;
	filter:drop-shadow(0px 0px 10px black) drop-shadow(0px 0px 25px black);
	height:114px;
	left:calc(50% - 220px);
	position:absolute;
	top:35px;
	width:440px;
}

#divAppBirthdayBonusPopup .divPopupSubheading
{
	color:#f6cc55;
	font-size:18px;
	left:30px;
	position:absolute;
	right:30px;
	text-align:center;
	text-shadow:0px 0px 5px #000000;
	top:160px;
}

#divAppBirthdayBonusPopup #divBirthdayPresentsContainer
{
	left:0px;
	position:absolute;
	right:0px;
	top:265px;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

#divAppBirthdayBonusPopup #divBirthdayPresentsContainer:before
{
	border-radius:50%;
	box-shadow:0px 0px 100px 50px #ac7f29;
	content:"";
	display:block;
	height:0px;
	left:50%;
	position:absolute;
	top:100px;
	transform:translateX(-50%);
	width:250px;
}

#divAppBirthdayBonusPopup .divBirthdayPresent
{
	cursor:pointer;
	position:absolute;
	top:50%;
	transition:transform 0.25s;
}

#divAppBirthdayBonusPopup .divBirthdayPresent:hover
{
	transform:scale(1.05);
}

#divAppBirthdayBonusPopup .divBirthdayPresent.opening
{
	cursor:default;
	transform:scale(1.10);
	transition:transform 0.5s;
}

#divAppBirthdayBonusPopup .divBirthdayPresent.claimed
{
	cursor:default;
	transform:scale(1.10);
	transition:transform 0s;
}

#divAppBirthdayBonusPopup .divBirthdayPresent.position1of1
{
	left:calc(50% - 60px);
}

#divAppBirthdayBonusPopup .divBirthdayPresent.position1of2
{
	left:calc(30% - 60px);
}

#divAppBirthdayBonusPopup .divBirthdayPresent.position2of2
{
	left:calc(70% - 60px);
}

#divAppBirthdayBonusPopup .divBirthdayPresent.position1of3
{
	left:calc(20% - 60px);
}

#divAppBirthdayBonusPopup .divBirthdayPresent.position2of3
{
	left:calc(50% - 60px);
}

#divAppBirthdayBonusPopup .divBirthdayPresent.position3of3
{
	left:calc(80% - 60px);
}

#divAppBirthdayBonusPopup .divBirthdayPresent:before
{
	background-position:center;
	background-size:cover;
	content:"";
	display:block;
	filter:drop-shadow(0px 0px 10px #000000);
	height:164px;
	position:absolute;
	transition:filter 0.25s;
	width:120px;
}

#divAppBirthdayBonusPopup .divBirthdayPresent.claimed:before
{
	height:133px;
	transform:translate(-68px, 29px);
	width:184px;
}

#divAppBirthdayBonusPopup .divBirthdayPresent:nth-child(1):before
{
	background-image:url('../images/promotions/birthdayBonuses/presentRed.webp');
}

#divAppBirthdayBonusPopup .divBirthdayPresent.claimed:nth-child(1):before
{
	background-image:url('../images/promotions/birthdayBonuses/presentRedOpen.webp');
}

#divAppBirthdayBonusPopup .divBirthdayPresent:nth-child(2):before
{
	background-image:url('../images/promotions/birthdayBonuses/presentGreen.webp');
}

#divAppBirthdayBonusPopup .divBirthdayPresent.claimed:nth-child(2):before
{
	background-image:url('../images/promotions/birthdayBonuses/presentGreenOpen.webp');
}

#divAppBirthdayBonusPopup .divBirthdayPresent:nth-child(3):before
{
	background-image:url('../images/promotions/birthdayBonuses/presentBlue.webp');
}

#divAppBirthdayBonusPopup .divBirthdayPresent.claimed:nth-child(3):before
{
	background-image:url('../images/promotions/birthdayBonuses/presentBlueOpen.webp');
}

#divAppBirthdayBonusPopup .divBirthdayPresent:hover:before, #divAppBirthdayBonusPopup .divBirthdayPresent.opening:before, #divAppBirthdayBonusPopup .divBirthdayPresent.claimed:before
{
	filter:drop-shadow(0px 0px 5px rgba(246, 204, 85, 0.8)) drop-shadow(0px 0px 10px rgba(246, 204, 85, 0.5));
}

#divAppBirthdayBonusPopup .divBirthdayPresent:after
{
	bottom:-35px;
	color:#f6cc55;
	font-size:16px;
	left:0px;
	position:absolute;
	text-align:center;
	text-shadow:0px 0px 5px #000000;
	top:175px;
	width:120px;
}

#divAppBirthdayBonusPopup .divBirthdayPresent.opening:after, #divAppBirthdayBonusPopup .divBirthdayPresent.claimed:after
{
	display:none;
}

#divAppBirthdayBonusPopup .divBirthdayPresent:nth-child(1):after
{
	content:"Present 1";
}

#divAppBirthdayBonusPopup .divBirthdayPresent.position1of1:nth-child(1):after
{
	content:"Click to Claim";
}

#divAppBirthdayBonusPopup .divBirthdayPresent:nth-child(2):after
{
	content:"Present 2";
}

#divAppBirthdayBonusPopup .divBirthdayPresent:nth-child(3):after
{
	content:"Present 3";
}

#divAppBirthdayBonusPopup .divPresentReward
{
	background-image:url('../images/promotions/birthdayBonuses/rewardGem.webp');
	background-size:100% 100%;
	color:#ffffff;
	filter:drop-shadow(0px 0px 5px #000000) drop-shadow(0px 0px 10px #a02ecf);
	font-size:14px;
	left:-10px;
	line-height:16px;
	padding:15px;
	position:absolute;
	text-align:center;
	text-shadow:0px 0px 1px #000000, 0px 0px 5px #000000;
	top:-25px;
	transform:scale(0) translateY(80px);
	transition:transform 0.25s;
	width:100px;
}

#divAppBirthdayBonusPopup .divPresentReward.show
{
	transform:scale(1) translateY(0px);
}

#divAppBirthdayBonusPopup .spnRewardValue
{
	color:#f6cc55;
	font-size:18px;
	font-weight:600;
}

#divAppBirthdayBonusPopup .btnClaimNow
{
	background:linear-gradient(130deg, #af811b 0%, #f6cc55 40%, #f6cc55 60%, #af811b 100%);
	border-radius:5px;
	box-shadow:inset 0px 2px 2px -2px rgba(255, 255, 255, 0.75), inset 0px -2px 2px -2px rgba(0, 0, 0, 0.75);
	color:#111111;
	cursor:pointer;
	font-size:14px;
	font-weight:600;
	left:0px;
	line-height:16px;
	padding:8px 0px;
	position:absolute;
	text-align:center;
	top:175px;
	width:120px;
}

#divAppBirthdayBonusPopup .btnClaimNow.hide
{
	display:none;
}

#divAppBirthdayBonusPopup .btnClaimNow:hover, #divAppBirthdayBonusPopup .btnClaimNow:focus
{
	transform:scale(1.05);
}

/* ANIMATION KEY FRAMES */
@keyframes showBirthdayBonusesPopup
{
	0%   {opacity:0;}
	1%   {opacity:0;}
	100% {opacity:1;}
}

/* MEDIA QUERIES */
@media (max-height: 560px)
{
    #divAppBirthdayBonusPopup #divBirthdayBonusPopup
    {
		height:100%;
        overflow-y:auto;
    }
}

@media (max-width: 512px)
{
    #divAppBirthdayBonusPopup #divBirthdayBonusPopup
    {
		background-size:130% 105%;
		border:3px solid #af811b;
		border-radius:10px;
		box-shadow:none;
		height:calc(100% - 6px);
        overflow-y:auto;
		width:calc(100% - 6px);
    }

	#divAppBirthdayBonusPopup #btnCloseBirthdayPopup
	{
		right:10px;
		top:10px;
	}

	#divAppBirthdayBonusPopup .divPopupHeading
	{
		height:104px;
		left:calc(50% - 200px);
		top:30px;
		width:400px;
	}

	#divAppBirthdayBonusPopup .divPopupSubheading
	{
		font-size:16px;
		top:150px;
	}

	#divAppBirthdayBonusPopup #divBirthdayPresentsContainer
	{
		bottom:20px;
		top:195px;
	}

	#divAppBirthdayBonusPopup #divBirthdayPresentsContainer:before
	{
		height:300px;
		width:0px;
	}

	#divAppBirthdayBonusPopup .divBirthdayPresent:before
	{
		height:150px;
		width:110px;
	}

	#divAppBirthdayBonusPopup .divBirthdayPresent.claimed:before
	{
		height:122px;
		transform:translate(-62px, 27px);
		width:169px;
	}

	#divAppBirthdayBonusPopup .divBirthdayPresent:after
	{
		top:155px;
	}

	#divAppBirthdayBonusPopup .divBirthdayPresent.position1of1
	{
		left:calc(50% - 55px);
	}

	#divAppBirthdayBonusPopup .divBirthdayPresent.position1of2
	{
		left:calc(50% - 55px);
		top:10%;
	}

	#divAppBirthdayBonusPopup .divBirthdayPresent.position2of2
	{
		left:calc(50% - 55px);
		top:50%;
	}

	#divAppBirthdayBonusPopup .divBirthdayPresent.position1of3
	{
		left:calc(50% - 55px);
		top:0%;
	}

	#divAppBirthdayBonusPopup .divBirthdayPresent.position2of3
	{
		left:calc(50% - 55px);
		top:33%;
	}

	#divAppBirthdayBonusPopup .divBirthdayPresent.position3of3
	{
		left:calc(50% - 55px);
		top:66%;
	}

	#divAppBirthdayBonusPopup .divPresentReward
	{
		top:40px;
	}

	#divAppBirthdayBonusPopup .btnClaimNow
	{
		left:-5px;
		top:130px;
	}
}

@media (max-width: 420px)
{
	#divAppBirthdayBonusPopup #divBirthdayBonusPopup
    {
		background-size:150% 105%;
    }
	
	#divAppBirthdayBonusPopup .divPopupHeading
	{
		height:88px;
		left:calc(50% - 170px);
		top:20px;
		width:340px;
	}

	#divAppBirthdayBonusPopup .divPopupSubheading
	{
		font-size:13px;
		top:110px;
	}

	#divAppBirthdayBonusPopup #divBirthdayPresentsContainer
	{
		bottom:15px;
		top:145px;
	}

	#divAppBirthdayBonusPopup #divBirthdayPresentsContainer:before
	{
		height:250px;
		top:150px;
	}

	#divAppBirthdayBonusPopup .divBirthdayPresent:before
	{
		height:137px;
		width:100px;
	}

	#divAppBirthdayBonusPopup .divBirthdayPresent.claimed:before
	{
		height:108px;
		transform:translate(-52px, 27px);
		width:150px;
	}

	#divAppBirthdayBonusPopup .divBirthdayPresent:after
	{
		left:-10px;
		top:140px;
	}

	#divAppBirthdayBonusPopup .divPresentReward
	{
		top:35px;
	}

	#divAppBirthdayBonusPopup .btnClaimNow
	{
		top:115px;
	}
}