/* FESTIVE CHESTS POPUP */
#divAppFestiveChests
{
    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;
}

#divAppFestiveChests.show
{
    animation:showFestiveChests 0.25s;
    display:block;
    opacity:1;
}

#divAppFestiveChests #divFestiveChestsPopup
{
    background-color:#1b1c20;
	background-image:url('../images/promotions/festiveChests/background.webp');
	background-position:center bottom;
	background-repeat:no-repeat;
	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:600px;
    left:50%;
    opacity:0;
    overflow:hidden;
    padding:30px;
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    width:520px;
}

#divAppFestiveChests.show #divFestiveChestsPopup
{
    animation:showFestiveChests 0.25s;
    opacity:1;
}

#divAppFestiveChests #btnClosePopup
{
	background:linear-gradient(0deg, rgba(0, 0, 0, 0) 18%, rgba(255, 127, 0, 0.2) 89.5%), #101425;
	border:2px solid #16e8eb;
	border-radius:50%;
	box-shadow:0px 0px 10px 0px #000000;
	cursor:pointer;
	height:28px;
	position:absolute;
	right:10px;
	top:10px;
	width:28px;
}

#divAppFestiveChests #btnClosePopup:before
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #000000;
	content:"";
	height:2px;
	left:4px;
	position:absolute;
	top:13px;
	transform:rotate(45deg);
	transition:background-color 0.25s;
	width:20px;
}

#divAppFestiveChests #btnClosePopup:after
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #000000;
	content:"";
	height:2px;
	left:4px;
	position:absolute;
	top:13px;
	transform:rotate(-45deg);
	transition:background-color 0.25s;
	width:20px;
}

#divAppFestiveChests #btnClosePopup:hover:before, #divAppFestiveChests #btnClosePopup:focus:before, #divAppFestiveChests #btnClosePopup:hover:after, #divAppFestiveChests #btnClosePopup:focus:after
{
	background-color:#16e8eb;
}

#divAppFestiveChests .divChestView, #divAppFestiveChests .divLeaderboardView
{
	display:none;
}

#divAppFestiveChests.chestsView .divChestView, #divAppFestiveChests.leaderboardView .divLeaderboardView
{
	display:block;
}

/* CHEST VIEW */
#divAppFestiveChests #divAvailableChests
{
	background-color:rgba(0, 0, 0, 0.75);
	border:2px solid #16e8eb;
	border-radius:20px;
	box-shadow:0px 0px 10px 0px #000000;
	color:#16e8eb;
	font-size:22px;
	font-weight:600;
	left:10px;
	line-height:32px;
	overflow:hidden;
	position:absolute;
	text-align:center;
	top:10px;
}

#divAppFestiveChests #divAvailableChests:before
{
	background-color:#252525;
	content:"Chests:";
	display:block;
	color:#ffffff;
	font-family:"Jost", sans-serif;
	font-size:14px;
	letter-spacing:1.1px;
	line-height:18px;
	padding:3px 10px;
}

#divAppFestiveChests .divChestsHeading
{
	background-image:url('../images/promotions/festiveChests/heading.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:100%;
	filter:drop-shadow(0px 0px 5px #000000);
	height:310px;
	left:50%;
	position:absolute;
	top:20px;
	transform:translateX(-50%);
	width:400px;
}

#divAppFestiveChests #divHeadingTimer
{
	color:#ffffff;
	font-weight:600;
	left:calc(50% - 140px);
	line-height:65px;
	position:relative;
	text-align:center;
	top:208px;
	width:280px;
}

#divAppFestiveChests #divHeadingTimer .countdownTimer
{
	height:60px;
}

#divAppFestiveChests #divHeadingTimer .countdownTimer .divTimerLabel
{
	line-height:25px;
	padding-top:0px;
	text-shadow:none;
}

#divAppFestiveChests #divHeadingTimer .countdownTimer .divTimerLabel:before, #divAppFestiveChests #divHeadingTimer .countdownTimer .divTimerLabel:after
{
	display:none;
}

#divAppFestiveChests #divHeadingTimer .countdownTimer .divDaysValue, #divAppFestiveChests #divHeadingTimer .countdownTimer .divHoursValue, #divAppFestiveChests #divHeadingTimer .countdownTimer .divMinutesValue, #divAppFestiveChests #divHeadingTimer .countdownTimer .divSecondsValue
{
	background-color:rgba(0, 0, 0, 0.5);
	box-shadow:0px 0px 5px #e600ff, inset 0px 0px 5px #e600ff;
	font-size:18px;
	height:30px;
	line-height:30px;
	text-shadow:0px 0px 5px #e600ff;
	top:25px;
}

#divAppFestiveChests #divHeadingTimer .countdownTimer .divSecondsValue
{
	box-shadow:0px 0px 5px #e600ff, inset 0px 0px 5px #e600ff, 0px 0px 10px #e600ff, inset 0px 0px 10px #e600ff, 0px 0px 15px #e600ff, inset 0px 0px 15px #e600ff;
	text-shadow:0px 0px 5px #e600ff, 0px 0px 10px #e600ff, 0px 0px 15px #e600ff;
}

#divAppFestiveChests #divHeadingTimer .countdownTimer .divDaysLabel, #divAppFestiveChests #divHeadingTimer .countdownTimer .divHoursLabel, #divAppFestiveChests #divHeadingTimer .countdownTimer .divMinutesLabel, #divAppFestiveChests #divHeadingTimer .countdownTimer .divSecondsLabel
{
	display:none;
}

#divAppFestiveChests #btnShowLeaderboard
{
	background-image:url('../images/promotions/festiveChests/button1.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:100%;
	color:#ffffff;
	cursor:pointer;
	filter:drop-shadow(0px 0px 5px #000000);
	font-size:18px;
	height:50px;
	left:calc(50% - 140px);
	line-height:50px;
	position:absolute;
	text-align:center;
	top:318px;
	transition:color 0.25s;
	width:280px;
}

#divAppFestiveChests #btnShowLeaderboard:hover, #divAppFestiveChests #btnShowLeaderboard:focus
{
	color:#16e8eb;
}

#divAppFestiveChests #btnHowItWorks
{
	background-image:url('../images/promotions/festiveChests/button2.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:100%;
	color:#ffffff;
	cursor:pointer;
	height:58px;
	filter:drop-shadow(0px 0px 5px #000000);
	font-size:16px;
	left:calc(50% - 110px);
	line-height:75px;
	position:absolute;
	text-align:center;
	top:362px;
	transition:color 0.25s;
	width:220px;
}

#divAppFestiveChests #btnHowItWorks:hover, #divAppFestiveChests #btnHowItWorks:focus
{
	color:#16e8eb;
}

#divAppFestiveChests #btnClaimAll
{
	background-image:url('../images/promotions/festiveChests/button2.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:100%;
	color:#ffffff;
	cursor:pointer;
	display:none;
	height:58px;
	filter:drop-shadow(0px 0px 5px #000000);
	font-size:16px;
	left:calc(50% - 110px);
	line-height:75px;
	position:absolute;
	text-align:center;
	top:415px;
	transition:color 0.25s;
	width:220px;
}

#divAppFestiveChests #btnClaimAll:hover, #divAppFestiveChests #btnClaimAll:focus
{
	color:#16e8eb;
}

#divAppFestiveChests #btnClaimAll.show
{
	display:block;
}

#divAppFestiveChests .divChestsSubHeading
{
	bottom:140px;
	color:#ffffff;
	font-size:36px;
	left:0px;
	line-height:30px;
	opacity:0;
	position:absolute;
	right:0px;
	text-align:center;
	text-shadow:0px 0px 2px #000000, 0px 0px 5px #000000, 0px 0px 15px #000000;
	transition:opacity 0.25s;
}

#divAppFestiveChests .divChestsSubHeading span
{
	color:#ff7f00;
	font-weight:600;
}

#divAppFestiveChests.chestsAvailable .divChestsSubHeading
{
	opacity:1;
}

#divAppFestiveChests.chestSelected .divChestsSubHeading
{
	opacity:0;
}

#divAppFestiveChests .divChests
{
	bottom:38px;
	height:100px;
	left:calc(50% - 200px);
	position:absolute;
	width:400px;
}

#divAppFestiveChests .divChests:after
{
	color:#ffffff;
	content:"NO CHESTS AVAIALBLE";
	font-size:24px;
	font-weight:600;
	left:0px;
	position:absolute;
	text-align:center;
	text-shadow:0px 0px 5px #000000, 0px 0px 10px #000000;
	top:48px;
	width:100%;
}

#divAppFestiveChests.chestsAvailable .divChests:after
{
	display:none;
}

#divAppFestiveChests #divChest1, #divAppFestiveChests #divChest2, #divAppFestiveChests #divChest3
{
	background-position:center;
	background-repeat:no-repeat;
	background-size:100%;
	filter:grayscale(1);
	float:left;
	height:100px;
	position:relative;
	transition:background-image 0.25s, opcaity 0.25s;
	width:120px;
}

#divAppFestiveChests #divChest1
{
	background-image:url('../images/promotions/festiveChests/redChest.webp');
	margin-right:20px;
}

#divAppFestiveChests #divChest2
{
	background-image:url('../images/promotions/festiveChests/blueChest.webp');
	margin-right:20px;
}

#divAppFestiveChests #divChest3
{
	background-image:url('../images/promotions/festiveChests/purpleChest.webp');
}

#divAppFestiveChests.chestSelected #divChest1.openChest
{
	background-image:url('../images/promotions/festiveChests/redChestOpen.webp');
	cursor:default;
	opacity:1;
}

#divAppFestiveChests.chestSelected #divChest2.openChest
{
	background-image:url('../images/promotions/festiveChests/blueChestOpen.webp');
	cursor:default;
	opacity:1;
}

#divAppFestiveChests.chestSelected #divChest3.openChest
{
	background-image:url('../images/promotions/festiveChests/purpleChestOpen.webp');
	cursor:default;
	opacity:1;
}

#divAppFestiveChests.chestsAvailable #divChest1, #divAppFestiveChests.chestsAvailable #divChest2, #divAppFestiveChests.chestsAvailable #divChest3
{
	cursor:pointer;
	filter:grayscale(0);
}

#divAppFestiveChests.chestSelected #divChest1, #divAppFestiveChests.chestSelected #divChest2, #divAppFestiveChests.chestSelected #divChest3
{
	cursor:default;
	opacity:0;
}

#divAppFestiveChests #divChestReward
{
	background-color:rgba(0, 0, 0, 0.75);
	border-radius:0px;
	bottom:65px;
	box-shadow:0px 0px 5px 5px rgba(0, 0, 0, 0.75);
	color:#ff7f00;
	font-family:"Palatino Linotype", serif;
	font-size:0px;
	height:0px;
	left:50%;
	line-height:0px;
	opacity:0;
	position:absolute;
	text-align:center;
	transform:translate(-50%, -50%);
	transition:border-radius 0.25s, font-size 0.25s, height 0.25s, line-height 0.25s, opacity 0.25s, width 0.25s;
	white-space:nowrap;
	width:0px;
}

#divAppFestiveChests #divChestReward.show
{
	border-radius:30px;
	font-size:40px;
	height:70px;
	line-height:70px;
	opacity:1;
	width:260px;
}

#divAppFestiveChests #divChestRewardValue:after
{
	color:#ffffff;
	content:"Points";
	margin-left:10px;
}

#divAppFestiveChests #btnCloseChestReward
{
	background:linear-gradient(0deg, rgba(0, 0, 0, 0) 18%, rgba(255, 127, 0, 0.2) 89.5%), #101425;
	border:2px solid #16e8eb;
	border-radius:50%;
	box-shadow:0px 0px 10px 0px #000000;
	cursor:pointer;
	display:none;
	height:28px;
	position:absolute;
	right:-10px;
	top:-10px;
	width:28px;
}

#divAppFestiveChests #divChestReward.show #btnCloseChestReward
{
	display:block;
}

#divAppFestiveChests #btnCloseChestReward:before
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #000000;
	content:"";
	height:2px;
	left:4px;
	position:absolute;
	top:13px;
	transform:rotate(45deg);
	transition:background-color 0.25s;
	width:20px;
}

#divAppFestiveChests #btnCloseChestReward:after
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #000000;
	content:"";
	height:2px;
	left:4px;
	position:absolute;
	top:13px;
	transform:rotate(-45deg);
	transition:background-color 0.25s;
	width:20px;
}

#divAppFestiveChests #btnCloseChestReward:hover:before, #divAppFestiveChests #btnCloseChestReward:focus:before, #divAppFestiveChests #btnCloseChestReward:hover:after, #divAppFestiveChests #btnCloseChestReward:focus:after
{
	background-color:#16e8eb;
}

/* LEADERBOARD VIEW */
#divAppFestiveChests #btnBackToChests
{
	background:linear-gradient(0deg, rgba(0, 0, 0, 0) 18%, rgba(255, 127, 0, 0.2) 89.5%), #101425;
	border:2px solid #16e8eb;
	border-radius:50%;
	box-shadow:0px 0px 10px 0px #000000;
	cursor:pointer;
	height:28px;
	left:10px;
	position:absolute;
	top:10px;
	width:28px;
}

#divAppFestiveChests #btnBackToChests:before
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #000000;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:13px;
	transition:background-color 0.25s;
	width:12px;
}

#divAppFestiveChests #btnBackToChests:hover:before, #divAppFestiveChests #btnBackToChests:hover:before
{
	background-color:#16e8eb;
}

#divAppFestiveChests #btnBackToChests:after
{
	border-left:2px solid #ffffff;
	border-top:2px solid #ffffff;
	content:"";
	height:8px;
	left:8px;
	position:absolute;
	top:9px;
	transform:rotate(-45deg);
	transition:border-color 0.25s;
	width:8px;
}

#divAppFestiveChests #btnBackToChests:hover:after, #divAppFestiveChests #btnBackToChests:hover:after
{
	border-color:#16e8eb;
}

#divAppFestiveChests #divMyPoints
{
	background-color:rgba(0, 0, 0, 0.75);
	border:2px solid #16e8eb;
	border-radius:20px;
	box-shadow:0px 0px 10px 0px #000000;
	color:#16e8eb;
	font-size:18px;
	font-weight:600;
	height:55px;
	line-height:30px;
	overflow:hidden;
	position:absolute;
	right:calc(50% + 8px);
	text-align:center;
	top:10px;
	width:100px;
}

#divAppFestiveChests #divMyPoints:before
{
	background-color:#252525;
	content:"My Points:";
	display:block;
	color:#ffffff;
	font-family:"Jost", sans-serif;
	font-size:14px;
	letter-spacing:1.1px;
	line-height:18px;
	padding:3px 0px;
	white-space:nowrap;
}

#divAppFestiveChests #divMyPosition
{
	background-color:rgba(0, 0, 0, 0.75);
	border:2px solid #16e8eb;
	border-radius:20px;
	box-shadow:0px 0px 10px 0px #000000;
	color:#16e8eb;
	font-size:18px;
	font-weight:600;
	height:55px;
	left:calc(50% + 8px);
	line-height:30px;
	overflow:hidden;
	position:absolute;
	text-align:center;
	top:10px;
	width:100px;
}

#divAppFestiveChests #divMyPosition:before
{
	background-color:#252525;
	content:"My Position:";
	display:block;
	color:#ffffff;
	font-family:"Jost", sans-serif;
	font-size:14px;
	letter-spacing:1.1px;
	line-height:18px;
	padding:3px 0px;
	white-space:nowrap;
}

#divAppFestiveChests #divLeaderboardScroller
{
	background-image:url('../images/promotions/festiveChests/backgroundLeaderboard.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	bottom:20px;
	filter:drop-shadow(0px 0px 10px #000000);
	left:calc(50% - 240px);
	overflow-x:scroll;
	overflow-y:hidden;
	position:absolute;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
	top:75px;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
	width:480px;
}

#divAppFestiveChests #divLeaderboardScroller::-webkit-scrollbar
{
	background:transparent;
	height:0px;
	width:0px;
}

#divAppFestiveChests #divLeaderboards
{
	height:100%;
	position:relative;
	white-space:nowrap;
}

#divAppFestiveChests .divLeaderboardContainer
{
	display:inline-block;
	height:100%;
	position:relative;
	top:0px;
	width:100%;
}

#divAppFestiveChests .divLeaderboardTile
{
	bottom:50px;
	left:60px;
	position:absolute;
	right:65px;
	top:92px;
}

#divAppFestiveChests .divLeaderboardTimer .countdownTimer
{
	height:75px;
}

#divAppFestiveChests .divLeaderboardTimer .countdownTimer .divTimerLabel
{
	display:none;
}

#divAppFestiveChests .divLeaderboardTimer .countdownTimer .divDaysValue, #divAppFestiveChests .divLeaderboardTimer .countdownTimer .divHoursValue, #divAppFestiveChests .divLeaderboardTimer .countdownTimer .divMinutesValue, #divAppFestiveChests .divLeaderboardTimer .countdownTimer .divSecondsValue
{
	background-color:rgba(0, 0, 0, 0.5);
	box-shadow:0px 0px 5px #e600ff, inset 0px 0px 5px #e600ff;
	font-size:18px;
	height:30px;
	line-height:30px;
	text-shadow:0px 0px 5px #e600ff;
	top:10px;
}

#divAppFestiveChests .divLeaderboardTimer .countdownTimer .divSecondsValue
{
	box-shadow:0px 0px 5px #e600ff, inset 0px 0px 5px #e600ff, 0px 0px 10px #e600ff, inset 0px 0px 10px #e600ff, 0px 0px 15px #e600ff, inset 0px 0px 15px #e600ff;
	text-shadow:0px 0px 5px #e600ff, 0px 0px 10px #e600ff, 0px 0px 15px #e600ff;
}

#divAppFestiveChests .divLeaderboardDate
{
	color:#ffffff;
	font-size:20px;
	line-height:24px;
	text-align:center;
}

#divAppFestiveChests .divLeaderboardDate span
{
	font-weight:600;
	text-shadow:0px 0px 10px #000000, 0px 0px 5px #01eff9;
}

#divAppFestiveChests .divLeaderboardComplete
{
	color:#ff7f00;
	font-size:18px;
	line-height:20px;
	text-align:center;
}

#divAppFestiveChests .divLeaderboardComplete:before
{
	content:"LEADERBOARD COMPLETED";
}

#divAppFestiveChests .divLeaderboardComplete:after
{
	color:#ffffff;
	content:"CONGRATULATIONS TO OUR WINNERS";
	display:block;
	font-size:14px;
}

#divAppFestiveChests .divLeaderboardList
{
	bottom:0px;
	color:#ffffff;
	left:0px;
	overflow:auto;
	position:absolute;
	right:0px;
	text-shadow:0px 0px 5px #000000, 0px 0px 5px #000000;
	top:110px;
}

#divAppFestiveChests .divLeaderboardItem
{
	background-color:rgba(0, 0, 0, 0.75);
	border:2px solid #ffa54b;
	border-radius:10px;
	font-size:13px;
	height:50px;
	line-height:20px;
	margin-bottom:5px;
	width:calc(100% - 4px);
}

#divAppFestiveChests .divLeaderboardPosition
{
	float:left;
	text-align:center;
	width:40px;
}

#divAppFestiveChests .divLeaderboardUser
{
	float:left;
	width:90px;
}

#divAppFestiveChests .divLeaderboardPoints
{
	float:right;
	margin-right:20px;
}

#divAppFestiveChests .divLeaderboardPrize
{	    
    margin-top:5px;
	padding-left:15px;
}

#divAppFestiveChests #btnPreviousLeaderboard
{
	border-bottom:20px solid transparent;
	border-right:15px solid #ffffff;
	border-top:20px solid transparent;
	cursor:pointer;
	filter:drop-shadow(0px 0px 5px #000000);
	height:0px;
	position:absolute;
	right:calc(50% + 160px);
	top:182px;
	width:0px;
}

#divAppFestiveChests #btnNextLeaderboard
{
	border-bottom:20px solid transparent;
	border-left:15px solid #ffffff;
	border-top:20px solid transparent;
	cursor:pointer;
	filter:drop-shadow(0px 0px 5px #000000);
	height:0px;
	left:calc(50% + 160px);
	position:absolute;
	top:182px;
	width:0px;
}

/* HOW IT WORKS POPUP */
#divAppFestiveChests #divHowItWorks
{
    display:none;
	filter:drop-shadow(0px 0px 10px #000000);
	height:100%;
    left:0px;
    opacity:0;
    overflow:hidden;
    position:absolute;
    top:0px;
    width:100%;
}

#divAppFestiveChests #divHowItWorks:before
{
    background:linear-gradient(0deg, rgba(0, 0, 0, 0) 18%, rgba(58, 29, 0, 0.2) 89.5%), #101425;
	bottom:4%;
	content:"";
	display:block;
    left:5%;
    position:absolute;
	right:4%;
    top:6%;
	z-index:-1;
}

#divAppFestiveChests #divHowItWorks:after
{
    background-image:url('../images/promotions/festiveChests/howItWorksBackground.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	bottom:0px;
	content:"";
	display:block;
    left:0px;
    position:absolute;
	right:0px;
    top:0px;
	z-index:-1;
}

#divAppFestiveChests #divHowItWorks.show
{
    animation:showFestiveChests 0.25s;
	display:block;
    opacity:1;
}

#divAppFestiveChests #btnCloseHowItWorks
{
	background:linear-gradient(0deg, rgba(0, 0, 0, 0) 18%, rgba(255, 127, 0, 0.2) 89.5%), #101425;
	border:2px solid #16e8eb;
	border-radius:50%;
	box-shadow:0px 0px 10px 0px #000000;
	cursor:pointer;
	height:28px;
	position:absolute;
	right:10px;
	top:10px;
	width:28px;
}

#divAppFestiveChests #btnCloseHowItWorks:before
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #000000;
	content:"";
	height:2px;
	left:4px;
	position:absolute;
	top:13px;
	transform:rotate(45deg);
	transition:background-color 0.25s;
	width:20px;
}

#divAppFestiveChests #btnCloseHowItWorks:after
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #000000;
	content:"";
	height:2px;
	left:4px;
	position:absolute;
	top:13px;
	transform:rotate(-45deg);
	transition:background-color 0.25s;
	width:20px;
}

#divAppFestiveChests #btnCloseHowItWorks:hover:before, #divAppFestiveChests #btnCloseHowItWorks:focus:before, #divAppFestiveChests #btnCloseHowItWorks:hover:after, #divAppFestiveChests #btnCloseHowItWorks:focus:after
{
	background-color:#16e8eb;
}

#divAppFestiveChests .divHowItWorksContent
{
	bottom:10%;
	color:#ffffff;
	content:"";
	display:block;
    left:10%;
    overflow-y:auto;
	position:absolute;
	right:10%;
    top:10%;
}

#divAppFestiveChests .divHowItWorksButtons
{
	margin:30px 0px;
}

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

/* MEDIA QUERIES */
@media (max-height:700px)
{
	/* FESTIVE CHESTS POPUP */
	#divAppFestiveChests #divFestiveChestsPopup
	{
		height:calc(100% - 100px);
        overflow-y:auto;
        top:20px;
        transform:translate(-50%, 0%);
	}
}

@media (max-width:580px)
{
	#divAppFestiveChests #divFestiveChestsPopup
    {
        border-radius:0px;
        height:calc(100% - 60px);
        left:0px;
        overflow-y:auto;
        top:0px;
        transform:translate(0%, 0%);
        width:calc(100% - 60px);
    }

	#divAppFestiveChests .divChestsHeading
	{
		top:65px;
	}

	#divAppFestiveChests #btnShowLeaderboard
	{
		top:363px;
	}

	#divAppFestiveChests #btnHowItWorks
	{
		top:407px;
	}

	#divAppFestiveChests #btnClaimAll
	{
		top:460px;
	}

	/* LEADERBOARD VIEW */
	#divAppFestiveChests #divLeaderboardScroller
	{
		bottom:10px;
	}

	#divAppFestiveChests .divLeaderboardTile
	{
		bottom:60px;
		top:16.5%;
	}

	#divAppFestiveChests .divLeaderboardList
	{
		top:130px;
	}

	#divAppFestiveChests #btnPreviousLeaderboard, #divAppFestiveChests #btnNextLeaderboard
	{
		top:26%;
	}
}

@media (max-width:480px)
{
	#divAppFestiveChests #divLeaderboardScroller
	{
		left:0px;
		right:0px;
		width:auto;
	}

	#divAppFestiveChests .divLeaderboardTile
	{
		bottom:50px;
		left:50px;
		right:55px;
	}

	#divAppFestiveChests .divLeaderboardList
	{
		top:115px;
	}

	#divAppFestiveChests #btnPreviousLeaderboard
	{
		right:calc(50% + 140px);
	}

	#divAppFestiveChests #btnNextLeaderboard
	{
		left:calc(50% + 135px);
	}
}

@media (max-width:420px)
{
	#divAppFestiveChests .divChestsHeading
	{
		top:50px;
		width:350px;
	}

	#divAppFestiveChests #divHeadingTimer
	{
		left:calc(50% - 140px);
		top:200px;
		width:280px;
	}

	#divAppFestiveChests .countdownTimer
	{
		height:68px;
	}

	#divAppFestiveChests .countdownTimer .divDaysValue, #divAppFestiveChests .countdownTimer .divHoursValue, #divAppFestiveChests .countdownTimer .divMinutesValue, #divAppFestiveChests .countdownTimer .divSecondsValue
	{
		height:25px;
		line-height:25px;
		width:40px;
	}

	#divAppFestiveChests #btnShowLeaderboard
	{
		left:calc(50% - 120px);
		top:330px;
		width:240px;
	}

	#divAppFestiveChests #btnHowItWorks
	{
		left:calc(50% - 100px);
		top:370px;
		width:200px;
	}

	#divAppFestiveChests #btnClaimAll
	{
		left:calc(50% - 100px);
		top:420px;
		width:200px;
	}
	
	#divAppFestiveChests .divChests
	{
		left:calc(50% - 180px);
		width:360px;
	}

	#divAppFestiveChests #divChest1, #divAppFestiveChests #divChest2
	{
		margin-right:0px;
	}
}

@media (max-width:380px)
{
	#divAppFestiveChests .divLeaderboardTile
	{
		left:40px;
		right:45px;
	}
}