/* Prettified by Source 2 Viewer 11.1.0.0 - https://valveresourceformat.github.io */

DOTAReferencePage
{
	margin: 0px;
}

.SafeDashboardPage
{
	width: 1392px;
	margin: 110px 10px 130px 10px;
}

#MainContainer
{
	width: 100%;
	height: 100%;
	overflow: noclip;
}

#BackgroundContainer
{
	width: 100%;
	height: 100%;
}

#BackgroundPlate
{
	margin-top: 40px;
	width: 100%;
	height: 100%;
	background-color: #000000cc;
	box-shadow: #00000066 0px 0px 6px 0px ;
}

.BackgroundImage
{
	margin-top: 40px;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	transition-property: opacity, transform, pre-transform-scale2d, border-radius;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

#BackgroundSplash
{
	margin-top: 40px;
	opacity: 1;
	background-image: url("s2r://panorama/images/leaf_pages/halloween2015/bigsplash_psd.vtex");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
	border-radius: 0%;
}

#BackgroundHeaderImage
{
	opacity: 0;
	background-image: url("s2r://panorama/images/leaf_pages/halloween2015/backgroundimage_psd.vtex");
	background-position: 50% 0%;
	background-size: contain;
	transform: translateX(-320px) translateY(320px);
}

#ForegroundImage
{
	width: 609px;
	height: 243px;
	horizontal-align: right;
	opacity: 0;
	background-image: url("s2r://panorama/images/leaf_pages/halloween2015/earthshakertiny_psd.vtex");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	pre-transform-scale2d: 1.7;
	transform: translateX(-320px) translateY(320px) rotateZ( 20deg);
	transition-property: opacity, transform, pre-transform-scale2d;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

.PageTwoActive #BackgroundHeaderImage
{
	opacity: 1;
	transform: translateX(0px) translateY(0px);
}

.PageTwoActive #ForegroundImage
{
	opacity: 1;
	pre-transform-scale2d: 1;
	transform: translateX(0px) translateY(0px) rotateZ( 0deg);
}

.PageTwoActive #BackgroundSplash
{
	opacity: 0;
	pre-transform-scale2d: .7;
	transform: translateX(380px) translateY(-290px);
	box-shadow: none;
	border-radius: 50%;
}

#DetailsHeader,#Header
{
	margin-top: 48px;
	horizontal-align: center;
	transition-property: opacity, transform, pre-transform-scale2d;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

#DetailsHeader
{
	margin-top: 28px;
	margin-left: 22px;
	horizontal-align: left;
	opacity: 0;
}

#Body
{
	width: 100%;
	height: 520px;
	margin-top: 192px;
	opacity: 0;
	transform: translateY(500px);
	transition-property: opacity, transform;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

.PageTwoActive #Body
{
	opacity: 1;
	transform: translateY(0px);
}

.DMainTitle,.MainTitle
{
	font-size: 62px;
	letter-spacing: 5px;
	color: #BBFFC7;
	text-shadow: 0px 0px 10px 3.0 #69FFB222;
	margin-top: 32px;
	horizontal-align: center;
}

.DMainTitle
{
	horizontal-align: left;
	font-size: 48px;
}

.Language_english .PageTwoActive #Header
{
	pre-transform-scale2d: 0.8;
	transform: translateX(-360px) translateY(-36px);
}

DOTADashboard:not(.Language_english) .PageTwoActive #Header
{
	opacity: 0;
}

DOTADashboard:not(.Language_english) .PageTwoActive #DetailsHeader
{
	opacity: 1;
}

.DSubTitle,.SubTitle
{
	margin-top: 0px;
	font-size: 26px;
	font-weight: thin;
	text-transform: uppercase;
	text-shadow: 1px 1px 4px 3.0 #000000;
	color: #69FFB288;
	letter-spacing: 3px;
	horizontal-align: center;
	transition-property: opacity, transform;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

.DSubTitle
{
	font-size: 20px;
	horizontal-align: left;
}

.Language_english .PageTwoActive .SubTitle
{
	transform: translateX(-152px);
}

.SplashDescription,.Description
{
	width: 500px;
	opacity: 0;
	text-shadow: 0px 0px 2px 3.0 #000000;
	font-size: 20px;
	font-weight: thin;
	margin-top: 138px;
	margin-left: 22px;
	transform: translateY(0px);
	transition-property: opacity, transform;
	transition-duration: 0.3s;
	transition-delay: 0.3s;
	transition-timing-function: ease-in-out;
}

.SplashDescription
{
	opacity: 1;
	horizontal-align: right;
	vertical-align: bottom;
	color: white;
	font-size: 28px;
	text-align: right;
	margin-bottom: 154px;
	margin-right: 54px;
	transition-duration: 0.3s;
	transition-delay: 0.0s;
}

.PageTwoActive .SplashDescription
{
	opacity: 0;
	transform: translateY(-220px);
}

.PageTwoActive .Description
{
	opacity: 1;
	transition-duration: 0.2s;
	transition-delay: 0.0s;
}

#PanelContainer
{
	margin-top: 32px;
	width: fit-children;
	height: 432px;
	flow-children: right;
	horizontal-align: center;
	opacity: 1;
}

#PanelArt
{
	margin-bottom: -40px;
	width: 100%;
	height: 432px;
	flow-children: right;
	horizontal-align: center;
	vertical-align: bottom;
	opacity: 1;
}

.TipPanel
{
	margin-left: 8px;
	margin-right: 8px;
	height: 100%;
	width: 328px;
	background-color: #00000044;
	border: 1px solid #FAAB6708;
}

.TipTitle
{
	color: #BBF7BA;
	font-size: 22px;
	letter-spacing: 2px;
	background-color: #000000aa;
	width: 100%;
	text-transform: uppercase;
	padding-left: 12px;
	padding-top: 6px;
}

.TipDescription
{
	padding: 16px;
	color: #8FA58E;
}

#Candles
{
	width: 311px;
	height: 161px;
	horizontal-align: right;
	vertical-align: bottom;
	visibility: collapse;
	border: 1px solid orange;
}

#CandlesModel
{
	width: 276px;
	height: 252px;
	horizontal-align: right;
	vertical-align: bottom;
	margin-right: -32px;
	margin-bottom: -42px;
	opacity: 0;
	transform: translateY(0px);
	transition-property: opacity, transform;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

#BatsModel
{
	margin-top: 40px;
	width: 70%;
	height: 25%;
	horizontal-align: right;
	vertical-align: top;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.4s;
	transition-timing-function: ease-in-out;
}

.PageTwoActive #BatsModel
{
	opacity: 1;
}

.PageTwoActive #CandlesModel
{
	opacity: 1;
	transform: translateY(0px);
}

.PanelArtImage
{
	vertical-align: bottom;
	transform: scale3d( .8, .8, 1);
}

#Tip1 Image
{
	margin-left: -42px;
	margin-bottom: -6px;
}

#Tip2 Image
{
	margin-left: -8px;
	margin-bottom: -6px;
}

#Tip3 Image
{
	margin-left: -8px;
	margin-bottom: 0px;
}

#Tip4 Image
{
	margin-left: 24px;
	margin-bottom: 16px;
}

.HalloweenButtonBevel
{
	box-shadow: #77FFCB11 0px 0px 12px 0px ;
	border: 1px solid #69FFBA;
	transition-property: opacity, transform, box-shadow, border;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}

.HalloweenButtonBevel:hover
{
	box-shadow: #77FFCB22 0px 0px 16px 0px ;
	border: 1px solid #69FFBA;
}

#GoToPageButton
{
	vertical-align: bottom;
	horizontal-align: center;
	margin-bottom: 32px;
	opacity: 0;
}

.PageTwoActive #GoToPageButton
{
	opacity: 1;
}

#ClosePageButton
{
	horizontal-align: right;
}

#GoToDetailsButton Label,#GoToPageButton Label
{
	font-size: 24px;
	padding-left: 32px;
	padding-right: 32px;
	padding-top: 6px;
	padding-bottom: 6px;
	margin-top: 5px;
}

#GoToDetailsButton
{
	vertical-align: bottom;
	horizontal-align: right;
	margin-bottom: 64px;
	transform: translateX(0px);
	margin-right: 52px;
}

.PageTwoActive #GoToDetailsButton
{
	opacity: 0;
	transform: translateY(-120px);
}

.TipPanel
{
	animation-name: FadeIn;
	animation-duration: 1.2s;
	animation-delay: 0.0s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

@keyframes 'FadeIn'
{
	0%
	{
		brightness: 1;
	}
	
	50%
	{
		brightness: 4;
	}
	
	100%
	{
		brightness: 1;
	}
	
}

#Panel1
{
	animation-delay: 0.4s;
}

#Panel2
{
	animation-delay: 0.8s;
}

#Panel3
{
	animation-delay: 1.2s;
}

#Panel4
{
	animation-delay: 1.6s;
}

.MainTitle:hover
{
	animation-name: SpookyAnim;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes 'SpookyAnim'
{
	25%
	{
		transform: translateX( 1px );
		pre-transform-scale2d: 0.99;
		text-shadow: -2px -2px 10px 3.0 #69FFB222;
	}
	
	50%
	{
		transform: translateY( -1px );
		pre-transform-scale2d: 1;
		text-shadow: 0px 0px 12px 3.0 #69FFB222;
	}
	
	75%
	{
		transform: translateX( -1px );
		pre-transform-scale2d: 0.99;
		text-shadow: 2px 2px 10px 3.0 #69FFB222;
	}
	
}

