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

.DebutUnderlord #TakeoverPageLeft,.DebutUnderlord #DebutBackgroundImage
{
	background-image: none;
	background-color: black;
}

#ModelBackground,#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
{
	background-color: none;
	height: 800px;
}

#InformationBackground
{
	width: 100%;
	height: 100%;
	background-color: #251D1Bee;
	box-shadow: #000000f8 0px 0px 10px 0px ;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #000 ), color-stop( .32, #000 ), color-stop( .34, #251D1Bff ), to( #0E1919ee ) );
}

#InformationBody
{
	padding: 24px;
	width: 100%;
	horizontal-align: center;
}

.DebutUnderlord #Intro
{
	color: #5A7C52;
	font-size: 22px;
	margin-bottom: 4px;
}

#NameContainer
{
	transform: rotateX(30deg) translateY(-10px);
}

#HeroNameGlow,#HeroName
{
	height: 76px;
	text-overflow: shrink;
	font-size: 60px;
	font-weight: semibold;
	text-transform: uppercase;
	color: gradient( radial, 50% 50%, 0% 0%, 300px 300px, from( #E8C25F ), color-stop( .56, #DA8741 ), to( #ff4C11 ) );
	letter-spacing: 3px;
	margin-left: 16px;
	margin-top: 0px;
	text-shadow: none;
}

#HeroNameGlow
{
	color: gradient( radial, 50% 50%, 0% 0%, 300px 300px, from( #C2713D ), color-stop( .76, #452512 ), to( #452512 ) );
	pre-transform-scale2d: 1.01;
	font-weight: bold;
	margin-top: 2px;
}

#HeroNameCellContainer
{
	vertical-align: bottom;
	margin-bottom: 48px;
	transition-property: brightness;
	transition-duration: .15s;
	transition-timing-function: ease-in-out;
}

#HeroNameCellContainer.DebutUnderlord Label
{
	font-size: 28px;
	margin-top: 0px;
	text-shadow: 0px 1px 6px 1.0 #e5a6a422;
}

#FrontpageCellUnderlordDebut:hover #HeroNameCellContainer
{
	brightness: 3;
}

#Ability1
{
	background-image: url("s2r://panorama/images/spellicons/monkey_king_boundless_strike_png.vtex");
}

#Ability2
{
	background-image: url("s2r://panorama/images/spellicons/monkey_king_tree_dance_png.vtex");
}

#Ability3
{
	background-image: url("s2r://panorama/images/spellicons/monkey_king_primal_spring_png.vtex");
}

#Ability4
{
	background-image: url("s2r://panorama/images/spellicons/monkey_king_jingu_mastery_png.vtex");
}

#Ability5
{
	background-image: url("s2r://panorama/images/spellicons/monkey_king_mischief_png.vtex");
}

#Ability6
{
	background-image: url("s2r://panorama/images/spellicons/monkey_king_wukongs_command_png.vtex");
	margin-right: 0px;
}

#ItemLore
{
	margin: 16px;
	margin-top: 24px;
	font-size: 20px;
	color: #C29853;
}

#FrontPageUnderlordCell
{
	width: 689px;
	height: 500px;
}

#FrontPageUnderlordCell #ModelBackground
{
	opacity: 0;
	transition-property: opacity, pre-transform-scale2d;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
}

#FrontPageUnderlordCell #ModelBackground.SceneLoaded
{
	opacity: 1;
}

#CustomFooterDetails.DebutUnderlord
{
	opacity: 1;
	margin-bottom: 6px;
	margin-left: 8px;
	color: #808f8d;
}

#FrontpageCellUnderlordDebut:hover #CustomHeader
{
	background-color: #7AFCFC;
}

#InnerPanel
{
	height: fill-parent-flow(1);
	vertical-align: bottom;
	margin-bottom: 0px;
}

#InnerPanel #Buttons
{
	vertical-align: bottom;
}

#HeaderBG
{
	background-image: url("s2r://panorama/images/leaf_pages/debut_monkey_king/mk_debut_panel_bg_psd.vtex");
	background-size: contain;
	background-position: 50% 0%;
	overflow: clip;
	opacity: 0;
	transition-property: opacity, pre-transform-scale2d;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
	width: 100%;
	height: 258px;
}

.Initialize #HeaderBG
{
	opacity: 1;
}

#Talent,.NewHero .AbilityIcon
{
	width: 64px;
	height: 64px;
}

#Talent
{
	wash-color: #DD9548;
	margin-left: 16px;
	tooltip-position: bottom;
	tooltip-body-position: 100%;
	transition-property: wash-color;
	transition-duration: .15s;
	transition-timing-function: ease-in-out;
}

#Talent:hover
{
	wash-color: #FCC45F;
}

.NewHero #ItemLore
{
	margin-top: 56px;
}

#ItemSubtitle
{
	margin-top: -26px;
	margin-bottom: 16px;
}

#MKComic
{
	width: 180px;
	height: 200px;
	overflow: noclip;
	vertical-align: bottom;
	horizontal-align: center;
	margin-bottom: 150px;
	margin-left: 320px;
	pre-transform-scale2d: 1.05;
	opacity: 0;
	transition-property: opacity, pre-transform-scale2d;
	transition-duration: 2s;
	transition-timing-function: ease-in-out;
}

#MKComic.Initialize
{
	pre-transform-scale2d: 1;
	opacity: 1;
}

#MKComic:hover #ComicTable
{
	border-color: #392F2B;
}

#ComicTable
{
	width: 180px;
	height: 190px;
	background-color: #342A26;
	background-color: gradient( radial, 50% 50%, 0% 0%, 300px 300px, from( #39302A ), color-stop( .46, #000 ), to( #000 ) );
	border-radius: 6px;
	border: 2px solid #1F1F1B;
	box-shadow: fill #000000f8 0px 0px 10px 0px ;
}

#ImagePanel
{
	padding-top: 16px;
	transform: translateX( -110px ) translateY( -100px ) rotateZ(-20deg);
	width: 320px;
	height: 320px;
}

.ComicPage,#MKComicBook
{
	vertical-align: middle;
}

#MKComic:hover #ImagePanel
{
	transform: translateX( -64px ) translateY( -72px ) rotateZ(0deg);
}

#MKComic:hover #MKComicBook
{
	transform: rotateY(-165deg) rotateX(25deg) rotateZ(6deg);
}

#MKComic:hover .ComicPage
{
	pre-transform-scale2d: 1;
}

#MKComic:hover #InsidePanel
{
	wash-color: white;
}

#MKComic:hover #CoverImage
{
	opacity: 0;
	wash-color: black;
}

#MKComic:hover #CoverBackground
{
	wash-color: white;
}

#InsidePage
{
	background-image: url("s2r://panorama/images/banners/comic/comic_mk_inside_right_psd.vtex");
}

#CoverImage
{
	background-image: url("s2r://panorama/images/banners/comic/comic_mk_cover_psd.vtex");
}

#CoverBackground
{
	background-image: url("s2r://panorama/images/banners/comic/comic_mk_inside_left_psd.vtex");
}

#ReadComic
{
	width: 100%;
	height: 22px;
	text-overflow: shrink;
	text-align: center;
	vertical-align: bottom;
	horizontal-align: center;
	color: #C29853;
	font-size: 16px;
	letter-spacing: 2px;
	transform: translateY(0px);
	wash-color: black;
	transition-property: transform, wash-color;
	transition-duration: .25s, .45s;
	transition-timing-function: ease-in-out;
	text-transform: uppercase;
}

#MKComic:hover #ReadComic
{
	transform: translateY(20px);
	wash-color: white;
}