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

.DashboardPage
{
	background-color: black;
}

#ModelContainer
{
	width: 100%;
	height: 100%;
	max-width: 1920px;
	horizontal-align: center;
}

.AspectRatio21x9 #ModelContainer
{
	opacity-mask: url("s2r://panorama/images/masks/softedge_horizontal_png.vtex");
}

#ModelBackground,#Model
{
	transform: scaleX(1);
	width: 100%;
	height: 100%;
	vertical-align: middle;
	horizontal-align: center;
	saturation: 1;
	contrast: 1.1;
	transition-property: opacity, wash-color, saturation, contrast;
	transition-duration: 0.1s;
	transition-timing-function: ease-in;
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

#Model.Initialize
{
	saturation: 1;
	contrast: 1.0;
	transition-duration: 5s;
	opacity: 1.1;
}

#DebutInformation
{
	background-color: none;
	width: 750px;
	height: 850px;
	opacity: 0;
	margin-left: 800px;
	margin-right: 0px;
	margin-bottom: 100px;
	transition-property: opacity;
	transition-duration: 1.5s;
	transition-timing-function: ease-in;
	margin-top: 100px;
}

.CloseButton
{
	horizontal-align: right;
	background-color: #000000;
	border: 2px solid #ffffff;
	margin: 12px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	wash-color: rgba(201,155,88,1);
	margin-top: 65px;
	margin-right: 130px;
	padding: 10px;
}

#DebutInformation.Initialize,#InformationBody.Initialize
{
	opacity: 1;
	transition-duration: 0s;
}

#InformationBackground
{
	width: 100%;
	height: 100%;
}

#InformationBody
{
	padding: 32px;
	padding-top: 40px;
	padding-bottom: 64px;
	width: 680px;
	height: 820px;
}

#InformationBodyBackground
{
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/leaf_pages/debut_mars/mars_bg_png.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
	transition-property: wash-color;
	transition-duration: .0s;
	transition-timing-function: ease-in-out;
}

#InformationBodyBackground.Initialize
{
	opacity: 0.9;
	transition-duration: 0s;
}

#ItemName
{
	font-size: 1px;
	letter-spacing: 10px;
	margin-top: 110px;
	text-align: center;
	vertical-align: bottom;
	horizontal-align: center;
	color: #000000;
	opacity: 0;
	width: 470px;
	height: 130px;
	background-image: url("s2r://panorama/images/leaf_pages/debut_mars/mars_logo_png.vtex");
	background-size: 100%;
	text-shadow: none;
}

.Language_schinese #ItemName,.Language_tchinese #ItemName
{
	background-image: url("s2r://panorama/images/leaf_pages/debut_mars/mars_logo_cn_png.vtex");
}

#ItemName,#InnerPanel,#ItemLore
{
	opacity: 0;
	transition-property: opacity;
	transition-duration: .0s;
	transition-timing-function: ease-in-out;
}

#ItemLore
{
	font-size: 18px;
	line-height: 29px;
	color: #dcdcdc;
	width: 560px;
	padding: 10px 60px;
	font-style: normal;
	font-weight: lighter;
	text-align: left;
	letter-spacing: 0px;
	text-shadow: #000000 1px 1px;
	max-height: 250px;
	text-overflow: shrink;
}

#ItemName.Initialize,#InnerPanel.Initialize,#ItemLore.Initialize
{
	opacity: 1;
	transition-duration: 0s;
}

#TitleContainer
{
	width: 100%;
	horizontal-align: center;
	transform: translateY(-16px);
	transition-property: hue-rotation, wash-color, saturation;
	transition-duration: .1s;
	transition-timing-function: ease-in-out;
}

#TitleFX
{
	width: 100%;
	height: 100%;
	opacity-mask: url("s2r://panorama/images/masks/softedge_box_png.vtex");
}

#HeroSubtitle
{
	margin-top: 20px;
	margin-bottom: 30px;
	margin-left: 10px;
	flow-children: right;
	horizontal-align: center;
	font-size: 16px;
	letter-spacing: 3px;
	font-weight: lighter;
	color: gray;
}

#AttackType
{
	color: #ccc;
	margin-right: 12px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.RolesContainer
{
	width: 400px;
	height: 54px;
	flow-children: right;
}

.RoleLabel
{
	margin-right: 8px;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align: center;
	color: #ffffff;
	tooltip-position: top;
	tooltip-body-position: 50% 50%;
}

#DifficultyPips
{
	padding-left: 10px;
	horizontal-align: center;
	flow-children: right;
	opacity: 0.3;
	tooltip-position: top;
	tooltip-body-position: 50% 50%;
}

#DifficultyPips > Panel
{
	margin-right: 10px;
	width: 12px;
	height: 12px;
	background-size: 100%;
}

#Pip1
{
	background-image: url("s2r://panorama/images/hero_complexity_full_png.vtex");
}

#Pip2
{
	background-image: url("s2r://panorama/images/hero_complexity_empty_png.vtex");
}

#Pip3
{
	background-image: url("s2r://panorama/images/hero_complexity_empty_png.vtex");
}

#AbilityIcons
{
	margin-left: 10px;
	flow-children: right;
	horizontal-align: center;
}

#AbilityIcons > DOTAAbilityImage
{
	width: 70px;
	height: 70px;
	margin-right: 20px;
	background-color: #070707;
	border: 1px solid rgba(69,69,69,0.7);
}

#Talent
{
	width: 70px;
	height: 70px;
	wash-color: #DD9548;
	margin-left: 0px;
	tooltip-position: bottom;
	tooltip-body-position: 100%;
	transition-property: wash-color;
	transition-duration: .15s;
	transition-timing-function: ease-in-out;
	border: 1px solid transparent;
	border-radius: 0px;
	background-size: 90%;
	background-size: 54px 54px;
	background-position: center center;
	background-color: #070707;
	border: 1px solid rgba(69,69,69,0.7);
	tooltip-position: right;
	tooltip-body-position: 0% 0%;
}

#FadeContainer
{
	width: 100%;
	height: 100%;
	background-color: transparent;
}

@keyframes 'FadeAnimation'
{
	0%
	{
		background-color: black;
	}
	
	100%
	{
		background-color: transparent;
	}
	
}

#FadeContainer.Fade
{
	animation-name: FadeAnimation;
	animation-duration: 1s;
}

#BlackBackground
{
	width: 100%;
	height: 100%;
	background-color: transparent;
}

@keyframes 'BackgroundFadeAnimation'
{
	0%
	{
		background-color: transparent;
	}
	
	100%
	{
		background-color: black;
	}
	
}

#BlackBackground.Fade
{
	animation-name: BackgroundFadeAnimation;
	animation-duration: 1s;
}

#MainContainer
{
	width: 100%;
	height: 100%;
	transition-property: wash-color;
	transition-duration: 0.4s;
	transition-timing-function: ease-in;
}

#Intro
{
	color: gray;
	font-size: 18px;
	margin-bottom: 96px;
	margin-top: 90px;
	text-transform: uppercase;
	letter-spacing: 3px;
	text-align: center;
	font-weight: lighter;
	opacity: 0.6;
	horizontal-align: center;
}

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

#DemoHeroButton
{
	width: 280px;
	height: 36px;
	vertical-align: middle;
	margin-right: 20px;
}

#MarsLoadout
{
	margin-left: 40px;
}

.MarsButton
{
	margin-left: 50px;
}

#DemoButton
{
	height: 42px;
}