/* Prettified by Source 2 Viewer 11.1.0.0 - https://valveresourceformat.github.io */

.PopupPanel
{
	width: 810px;
	padding: 0px;
	overflow: clip;
	flow-children: none;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #333f ), to( #222f ) );
}

.Contents
{
	flow-children: down;
	width: 100%;
}

.CloseButton
{
	horizontal-align: right;
	width: 30px;
	height: 30px;
	background-size: 60%;
	background-color: #444;
	margin-top: 8px;
	margin-right: 8px;
}

.OverlayText
{
	flow-children: down;
	text-align: center;
	horizontal-align: center;
}

#CenterText
{
	horizontal-align: center;
	flow-children: right;
	height: 32px;
	margin-bottom: 4px;
}

#SplashImage
{
	horizontal-align: center;
	width: 810px;
	height: 550px;
	background-image: url("s2r://panorama/images/econ/bundles/dueling_fates_bundle_splash_png.vtex");
	background-repeat: no-repeat;
	background-size: cover;
	transition-property: brightness;
	transition-duration: 0.22s;
	transition-timing-function: ease-in-out;
}

#SplashImage:hover
{
	brightness: 1.4;
}

#Contents
{
	flow-children: down;
	margin-left: 20px;
	margin-top: 20px;
	background-color: #000e;
	padding: 16px 20px 20px 20px;
}

#TitleBox
{
	background-color: #000000aa;
	width: 100%;
	height: 140px;
}

#Title
{
	width: 100%;
	text-align: center;
	horizontal-align: center;
	padding-top: 16px;
	color: #CCAF82;
	margin-top: 54px;
	font-size: 36px;
	text-transform: uppercase;
	text-shadow: 0px 0px 12px #CCAF8233;
	letter-spacing: 6px;
	text-overflow: shrink;
	height: 140px;
}

#SubTitle
{
	width: 100%;
	text-align: center;
	horizontal-align: center;
	color: white;
	margin-top: 40px;
	font-size: 20px;
	text-transform: uppercase;
	text-shadow: 0px 0px 12px #f7deb533;
	letter-spacing: 2px;
}

@keyframes 'OnSaleGlow'
{
	0%
	{
		box-shadow: fill 0px 0px 8px #99ff9999;
	}
	
	100%
	{
		box-shadow: fill 0px 0px 16px #99ff99;
	}
	
}

#MessageContainer
{
	flow-children: right;
	margin-bottom: 20px;
}

#OnSale
{
	margin-top: 12px;
	horizontal-align: center;
	flow-children: right;
	padding: 8px 18px 8px 18px;
	animation-duration: 0.75s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

#SalePercent
{
	font-size: 30px;
	font-weight: bold;
	color: #ff6600;
	horizontal-align: center;
	text-align: center;
	text-transform: uppercase;
	vertical-align: bottom;
	letter-spacing: 3px;
}

#SaleDate
{
	font-size: 30px;
	text-shadow: none;
	color: #ff6600;
	text-transform: uppercase;
	vertical-align: bottom;
	margin-left: 8px;
	letter-spacing: 3px;
	font-weight: bold;
}

#Message
{
	color: #ccc;
	width: fill-parent-flow( 1.0 );
	vertical-align: middle;
	font-size: 20px;
	padding: 0 40px;
	margin-top: 4px;
	margin-bottom: 4px;
	text-align: center;
}

#DetailsButton
{
	horizontal-align: center;
	vertical-align: bottom;
	margin-bottom: 20px;
	box-shadow: black 0px 0px 8px 0px ;
	margin-top: 20px;
}