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

DOTASnapfireDebutPage
{
	width: 100%;
	height: 100%;
}

#ModelContainer
{
	width: 100%;
	height: 100%;
	background-color: black;
}

#Model
{
	transform: scaleX(1);
	width: 100%;
	height: 100%;
	opacity: 0;
	pre-transform-scale2d: 1;
	vertical-align: middle;
	horizontal-align: center;
	transition-property: opacity;
	transition-duration: 2s;
	transition-timing-function: ease-in;
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

#Model.SceneLoaded
{
	opacity: 1;
}

#DebutInformation
{
	width: 640px;
	height: 840px;
	horizontal-align: center;
	margin-top: 180px;
	margin-left: 950px;
	opacity: 0.0;
	transition-property: opacity;
	transition-duration: 1.0s;
}

.AspectRatio4x3 #DebutInformation
{
	margin-left: 800px;
	margin-top: 200px;
	ui-scale: 90%;
}

#DebutInformation.Initialize
{
	transition-duration: 0.0s;
	opacity: 1.0;
}

#InformationBackground
{
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/leaf_pages/debut_hoodwink/debut_bg_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
}

#InformationBody
{
	width: 100%;
	height: 740px;
	flow-children: down;
}

#Introducing
{
	color: white;
	font-size: 22px;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	letter-spacing: 4px;
	z-index: 10;
	font-family: titleFont;
	font-weight: bold;
	margin-bottom: -30px;
	text-shadow: 0px 0px 8px 8.0 #000000;
}

#HeroNameContainer
{
	margin-top: -60px;
	width: 100%;
	opacity-mask: url("s2r://panorama/images/leaf_pages/debut_snapfire/hero-name-mask_psd.vtex");
}

.Title
{
	background-image: url("s2r://panorama/images/leaf_pages/debut_hoodwink/hoodwink_logo_en_psd.vtex");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 270px;
	img-shadow: 0px 0px 10px 2.0 #000000;
}

.Language_schinese .Title
{
	background-image: url("s2r://panorama/images/leaf_pages/debut_hoodwink/hoodwink_logo_cn_psd.vtex");
}

#HeroAttributes
{
	margin-top: -54px;
	flow-children: right;
	horizontal-align: center;
	margin-bottom: 8px;
}

#HeroAttributes Label
{
	font-size: 20px;
	text-transform: uppercase;
	color: #ffffffee;
	letter-spacing: 2px;
	text-shadow: 0px 0px 10px 5.0 #000000;
	margin-top: 35px;
}

.RoleLabel
{
	margin-right: 8px;
	font-weight: light;
}

#AttackType
{
	margin-left: 8px;
	margin-right: 8px;
	font-weight: semi-bold;
}

#HeroAbilities
{
	flow-children: right;
	horizontal-align: center;
	margin-top: 12px;
}

#HeroAbilities DOTAAbilityImage,#HeroAbilities #Talent
{
	margin: 0px 4px;
	width: 100px;
	height: 100px;
	tooltip-position: bottom;
	tooltip-body-position: 50% 50%;
	img-shadow: 0px 0px 10px 5.0 #000000;
}

#Talent
{
	background-size: 74%;
	background-position: center;
	wash-color: #FFD9A0;
}

#Lore
{
	margin-top: 24px;
	width: 100%;
	padding: 0px 54px;
	color: #fff;
	text-shadow: 0 2px 2px #000;
	horizontal-align: center;
	text-align: left;
	font-family: titleFont;
	text-align: justify;
	font-size: 18px;
	line-height: 30px;
}

#Buttons
{
	horizontal-align: center;
}

#CloseButton
{
	horizontal-align: right;
	width: 36px;
	height: 36px;
	margin-top: -14px;
	wash-color: #fff;
	horizontal-align: right;
	width: 36px;
	height: 36px;
	wash-color: #fff;
	background-color: #00000090;
	border-radius: 100%;
	background-size: 50%;
	width: 32px;
	height: 32px;
}

#CloseButton:hover
{
	background-color: #000000;
}

#FooterPanel
{
	vertical-align: bottom;
	horizontal-align: center;
	margin-bottom: 50px;
}

.PreviewMode
{
	background-color: gradient( linear, 0% 100%, 0% 0%, from( #af5417 ), to( #af5417 ) );
	opacity: 0.9;
	border-top: 1px solid #faa46a;
	box-shadow: #27110250 6px 0px 12px ;
	height: 49px;
}

.PreviewMode.SmallDemoButton .DemoButton
{
	height: 49px;
	padding: 4px 24px 4px 24px;
}

.ToLoadout
{
	height: 49px;
	padding: 0px 20px;
}

#HeroButtons
{
	margin-bottom: 70px;
	flow-children: down;
	horizontal-align: center;
	vertical-align: bottom;
	margin-right: 20px;
}

#DemoButtons
{
	flow-children: right;
}

#ToNextHero
{
	width: 100%;
}

#ToNextHero Label
{
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	letter-spacing: 2px;
	margin-top: 24px;
}

#ToNextHero Label:hover
{
	brightness: 2.0;
}

#DemoHeroButton
{
	width: 260px;
	height: 48px;
	vertical-align: middle;
}

#ToLoadout
{
	height: 48px;
	font-size: 16px;
}

#ToLoadout Label
{
	font-size: 18px;
	vertical-align: middle;
}

.ButtonBevel
{
	padding: 4px 24px;
}