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

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

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

#ModelBackground.Initialize
{
	saturation: 1;
	contrast: 1;
	transition-duration: 0s;
}

#DebutInformation
{
	background-color: none;
	width: 620px;
	height: 820px;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 2s;
	transition-timing-function: ease-in;
}

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

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

#InformationBody
{
	padding: 32px;
	padding-top: 0px;
	padding-bottom: 64px;
	horizontal-align: center;
	width: 620px;
	height: 720px;
}

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

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

.Style2Visible #InformationBodyBackground
{
	wash-color: #8c9b49;
}

.Style1Visible #Style1ButtonLabel,.Style2Visible #Style2ButtonLabel
{
	opacity: 0;
}

.Style2Visible #Style1ButtonLabel,.Style1Visible #Style2ButtonLabel
{
	opacity: 1;
}

#DemoButtonStyle1,#DemoButtonStyle2
{
	visibility: collapse;
}

.Style1Visible #DemoButtonStyle1,.Style2Visible #DemoButtonStyle2
{
	visibility: visible;
}

#InnerPanel
{
	height: 472px;
	vertical-align: bottom;
	background-color: transparent;
	border: 0px solid transparent;
	opacity-mask: url("s2r://panorama/images/masks/softedge_vertical_vscroll_wide_psd.vtex")1;
	padding-right: 24px;
}

#ItemName
{
	font-size: 46px;
	letter-spacing: 3px;
	text-overflow: shrink;
	height: 54px;
	text-align: center;
	vertical-align: bottom;
	horizontal-align: center;
	color: #dfef4a;
	text-shadow: 0px 1px 12px 3.0 #474c15;
	opacity: 0;
}

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

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

.Style2Visible #ItemName2,.Style1Visible #ItemName
{
	opacity: 1;
	transition-duration: .3s;
}

.VideoPanel
{
	margin-bottom: 16px;
	border-radius: 16px;
	border: 1px solid #123B46;
}

.HeaderPanel
{
	width: 100%;
}

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

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

#ItemSubtitle
{
	horizontal-align: center;
	margin-top: -24px;
}

.HeaderPanel Label
{
	color: #51aB74;
}

#Portrait
{
	background-image: url("s2r://panorama/images/leaf_pages/debut_arcana_pudge/customportrait_psd.vtex");
	width: 96px;
	height: 118px;
}

#HeroIcon
{
	background-image: url("s2r://panorama/images/heroes/npc_dota_hero_pudge_alt_png.vtex");
	width: 96px;
	height: 54px;
	vertical-align: top;
	margin-top: 16px;
}

#AbilityIcons
{
	width: 135px;
	flow-children: right-wrap;
}

#AbilityIcons > Panel
{
	background-size: 100%;
	width: 48px;
	height: 48px;
	vertical-align: top;
}

#AbilityIcon
{
	background-image: url("s2r://panorama/images/spellicons/pudge/arcana/pudge_meat_hook_arcana_png.vtex");
}

#AbilityIcon2
{
	background-image: url("s2r://panorama/images/spellicons/pudge/arcana/pudge_rot_arcana_png.vtex");
}

#AbilityIcon3
{
	background-image: url("s2r://panorama/images/spellicons/pudge/arcana/pudge_flesh_heap_arcana_png.vtex");
}

#AbilityIcon4
{
	background-image: url("s2r://panorama/images/spellicons/pudge/arcana/pudge_dismember_arcana_png.vtex");
}

.CustomSquare
{
	border-color: #255D61;
}

#MinimapIcon
{
	background-image: url("s2r://panorama/images/heroes/icons/npc_dota_hero_pudge_alt1_png.vtex");
	width: 32px;
	height: 32px;
	vertical-align: bottom;
	margin-bottom: 10px;
	border: 0px solid transparent;
}

#QualityContainer
{
	opacity: 0;
	transition-property: opacity;
	transition-duration: .8s;
	transition-timing-function: ease-in-out;
}

#QualityContainer.Initialize
{
	opacity: 1;
}

.HeaderLabel
{
	color: #7B8C8D;
}

VerticalScrollBar .ScrollThumb
{
	background-color: #245A5E;
}

VerticalScrollBar:hover .ScrollThumb,VerticalScrollBar:active .ScrollThumb
{
	background-color: #31BDAC;
}

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

#MainContainer.Initialize
{
	wash-color: #fff;
}

.DemoSpacer
{
	height: 8px;
}

DOTAPurchaseButton
{
	width: 100%;
}

#Buttons
{
	flow-children: down;
	margin-right: 48px;
	min-width: 200px;
	opacity: 0;
	transition-property: opacity;
	transition-duration: .8s;
	transition-timing-function: ease-in-out;
}

#Buttons.Initialize
{
	opacity: 1;
}

#FooterPanel
{
	margin-bottom: 72px;
	height: fit-children;
}

.Promo
{
	visibility: visible;
	width: 390px;
	margin-bottom: 22px;
}

.BulletList
{
	margin-bottom: 6px;
}

#StyleContainer
{
	opacity: 0;
	width: 600px;
	height: 200px;
	horizontal-align: center;
	vertical-align: bottom;
	margin-bottom: 190px;
	margin-right: 792px;
	transition-property: opacity;
	transition-duration: 1s;
	transition-timing-function: ease-in;
}

.Style1Visible #StyleContainer #Form1,.Style2Visible #StyleContainer #Form2
{
	opacity: 1;
}

#StyleContainer.Initialize
{
	opacity: 1;
	transition-duration: 0s;
}

.FormLabel
{
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 22px;
	margin-bottom: -6px;
	color: #FFE9CC88;
	text-shadow: 0px 1px 3px 3.0 #000;
}

.FormName
{
	text-transform: uppercase;
	font-size: 32px;
	color: #FFE9CC;
	text-shadow: 0px 0px 13px 1.0 #EF8D2855;
	text-shadow: 0px 1px 3px 3.0 #000;
}

.Style1Visible .FormName
{
	color:#f28463;
}

.Style2Visible .FormName
{
	color:#eaf162;
}

#Form1,#Form2
{
	opacity: 0;
	transition-property: opacity, wash-color, saturation;
	transition-duration: 0.4s;
	transition-timing-function: ease-in;
}

.Style1Visible #Form1
{
	opacity: 1;
}

.Style2Visible #Form2
{
	opacity: 1;
}

.StylesBlock
{
	flow-children: down;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition-property: opacity;
	transition-duration: .32s;
	transition-timing-function: ease-in;
}

.FormLore
{
	font-size: 18px;
	color: white;
	text-shadow: 0px 1px 3px 3.0 #000;
}

#StyleButtons
{
	width: 700px;
	opacity: 0;
	height: fit-children;
	horizontal-align: center;
	vertical-align: bottom;
	margin-bottom: 190px;
	margin-right: 690px;
	transition-property: opacity;
	transition-duration: 1s;
	transition-timing-function: ease-in;
}

.Style1Visible #StyleButtons,.Style2Visible #StyleButtons
{
	opacity: 1.0;
	transition-duration: 0.0s;
}

#NextButton
{
	horizontal-align: right;
	border-radius: 8px;
	height: 64px;
	background-image: url("s2r://panorama/images/textures/glassbutton_pudge_psd.vtex");
	background-size: 100%;
	border: 2px solid black;
	padding-left: 16px;
	padding-right: 16px;
	opacity: 1;
	transition-property: hue-rotation, background-image;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
}

#NextButton.Initialize
{
	opacity: 1;
}

#NextButton:hover
{
	background-image: url("s2r://panorama/images/textures/glassbutton_pudge_hover_psd.vtex");
}

.Style2Visible #NextButton
{
	background-image: url("s2r://panorama/images/textures/glassbutton_pudge_psd.vtex");
	hue-rotation: 30deg;
}

.Style2Visible #NextButton:hover
{
	background-image: url("s2r://panorama/images/textures/glassbutton_pudge_hover_psd.vtex");
}

.ButtonBevel:disabled
{
	opacity: 0;
}

#ButtonFX
{
	width: 520px;
	height: 160px;
	horizontal-align: center;
	vertical-align: bottom;
	margin-bottom: 140px;
	margin-right: 200px;
	hue-rotation: 230deg;
	brightness: 5;
	contrast: 1.2;
	saturation: 1;
	wash-color: #f008;
	opacity: 0;
	transition-property: brightness, hue-rotation, wash-color, contrast, opacity;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
}

.Style2Visible #ButtonFX
{
	hue-rotation: 0deg;
	wash-color: #3EEBB088;
}