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

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

#divAppPromotionPopup #divPromotionPopup
{
	background-attachment:local;
	background-image:url('../images/promotions/stPatricksDay/background.webp');
	background-position:center;
	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:560px;
	left:50%;
    opacity:0;
	overflow:hidden;
	position:absolute;
    top:50%;
	transform:translate(-50%, -50%);
	width:512px;
}

#divAppPromotionPopup.show #divPromotionPopup
{
    animation-duration:0.25s;
	animation-name:showPromotionPopup;
	opacity:1;
}

#divAppPromotionPopup .imgPopupHeading
{
	filter:drop-shadow(0px 0px 5px #000000);
	left:calc(50% - 210px);
	margin-top:30px;
	position:relative;
	width:420px;
}

#divAppPromotionPopup #btnInfo
{
	color:#ffffff;
    cursor:pointer;
	filter:drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
	font-size:26px;
    height:40px;
    left:10px;
    line-height:40px;
	position:absolute;
	text-align:center;
    top:10px;
	width:40px;
}

#divAppPromotionPopup #btnClosePopup
{
	cursor:pointer;
	filter:drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
	height:40px;
	position:absolute;
	right:10px;
	top:10px;
	width:40px;
}

#divAppPromotionPopup #btnClosePopup:before
{
	background-color:#ffffff;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(45deg);
	width:24px;
}

#divAppPromotionPopup #btnClosePopup:after
{
	background-color:#ffffff;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(-45deg);
	width:24px;
}

#divAppPromotionPopup .divDetailsBox
{
	background-image:url('../images/promotions/stPatricksDay/infoBox.webp');
	background-position:center;
	background-size:100% 100%;
	color:#ffffff;
	filter:drop-shadow(0px 0px 5px #000000);
	font-family:"JostBold", sans-serif;
	font-size:20px;
	left:50%;
	line-height:20px;
	padding:25px;
	position:absolute;
	text-align:center;
	text-shadow:0px 0px 1px #000000, 0px 0px 5px #000000;
	top:180px;
	transform:translateX(-50%);
	width:300px;
}

#divAppPromotionPopup #divSelectionContainer
{
	filter:grayscale(0.75);
	left:0px;
	pointer-events:none;
	position:absolute;
	right:0px;
	top:360px;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

#divAppPromotionPopup #divSelectionContainer.enable
{
	filter:grayscale(0);
	pointer-events:auto;
}

#divAppPromotionPopup .divSelectionItem
{
	background-image:url('../images/promotions/stPatricksDay/chestClosed.webp');
	background-position:center;
	background-repeat:no-repeat;
	background-size:100% 100%;
	cursor:pointer;
	filter:drop-shadow(0px 0px 3px #358a1f) drop-shadow(0px 0px 6px #358a1f) drop-shadow(3px 6px 8px rgba(0,0,0,0.8)) grayscale(0);
	height:130px;
	position:absolute;
	top:0px;
	transform:translate(-50%, -50%);
	transition:background-image 0.25s, filter 0.75s, height 0.75s, left 0.75s, top 0.75s, width 0.75s;
	width:175px;
}

#divAppPromotionPopup .divSelectionItem:nth-child(1)
{
	left:20%;
}

#divAppPromotionPopup .divSelectionItem:nth-child(2)
{
	left:50%;
}

#divAppPromotionPopup .divSelectionItem:nth-child(3)
{
	left:80%;
}

#divAppPromotionPopup .selectionMade .divSelectionItem
{
	cursor:default;
	filter:drop-shadow(0px 0px 5px #000000) grayscale(1);
}

#divAppPromotionPopup .divSelectionItem:nth-child(1).selected, #divAppPromotionPopup .divSelectionItem:nth-child(2).selected, #divAppPromotionPopup .divSelectionItem:nth-child(3).selected
{
	filter:drop-shadow(0px 0px 3px #358a1f) drop-shadow(0px 0px 6px #358a1f) drop-shadow(3px 6px 8px rgba(0,0,0,0.8)) grayscale(0);
	height:178px;
	left:50%;
	top:50%;
	width:240px;
	z-index:1;
}

#divAppPromotionPopup .divSelectionItem.open
{
	background-image:url('../images/promotions/stPatricksDay/chestOpen.webp');
	cursor:default;
}

#divAppPromotionPopup .divSelectionItem p
{
	color:#ffffff;
	display:block;
	font-size:18px;
	left:50%;
	line-height:20px;
	position:absolute;
	text-align:center;
	text-shadow:0px 0px 1px #000000, 0px 0px 5px #000000, 0px 0px 10px #000000;
	top:50%;
	transform:translate(-50%, -50%);
	width:80%;
}

#divAppPromotionPopup .divSelectionItem p:before
{
	background-color:rgba(114, 98, 242, 0.5);
	border-radius:50%;
	box-shadow:0px 0px 15px 15px rgba(114, 98, 242, 0.5);
	content:"";
	display:block;
	height:100%;
	left:50%;
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
	width:100%;
	z-index:-1;
}

#divAppPromotionPopup #btnPlayNow
{
	background-image:url('../images/promotions/stPatricksDay/button.webp');
	background-size:100% 100%;
	bottom:50px;
	color:#f1cd98;
	cursor:pointer;
	display:none;
	filter:drop-shadow(0px 0px 5px #000000);
	font-family:"JostBold", sans-serif;
	font-size:16px;
	height:50px;
	left:50%;
	line-height:50px;
	margin-right:10px;
	position:absolute;
	text-align:center;
	text-shadow:0px 2px 0px #000000;
	transform:translateX(-50%);
	width:280px;
}

#divAppPromotionPopup #btnPlayNow.show
{
	display:block;
}

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

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

@media (max-width: 512px)
{
    #divAppPromotionPopup #divPromotionPopup
    {
        border-radius:0px;
		box-shadow:none;
		height:100%;
        overflow-y:auto;
		width:100%;
    }

	#divAppPromotionPopup #divSelectionContainer
	{
		bottom:150px;
		top:270px;
	}

	#divAppPromotionPopup .divSelectionItem:nth-child(1)
	{
		left:50%;
		top:20%;
	}

	#divAppPromotionPopup .divSelectionItem:nth-child(2)
	{
		left:50%;
		top:50%;
	}

	#divAppPromotionPopup .divSelectionItem:nth-child(3)
	{
		left:50%;
		top:80%;
	}

	#divAppPromotionPopup #btnPlayNow
	{
		bottom:70px;
	}
}

@media (max-width: 420px)
{
	#divAppPromotionPopup .imgPopupHeading
	{
		left:calc(50% - 150px);
		width:300px;
	}

	#divAppPromotionPopup .divDetailsBox
	{
		font-size:14px;
		padding:15px 25px;
		top:135px;
		width:200px;
	}

	#divAppPromotionPopup #divSelectionContainer
	{
		bottom:100px;
		top:180px;
	}

	#divAppPromotionPopup #btnPlayNow
	{
		bottom:50px;
	}
}