/* Prettified by Source 2 Viewer 11.1.0.0 - https://valveresourceformat.github.io */

.DebutJuggernaut #TakeoverPageLeft,.DebutJuggernaut #DebutBackgroundImage
{
	background-image: none;
	background-color: black;
	width: 100%;
}

#ModelBackground,#JuggernautArcanaScene
{
	transform: scaleX(1);
	width: 100%;
	height: 100%;
	opacity: 0;
	pre-transform-scale2d: 1;
	vertical-align: middle;
	horizontal-align: center;
	transition-property: opacity, wash-color, saturation;
	transition-duration: 2s;
	transition-timing-function: ease-in;
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

#JuggernautArcanaScene.SceneLoaded
{
	opacity: 1;
}

#DebutInformation
{
	background-color: none;
	width: 620px;
	height: 820px;
	opacity: 0;
}

#TakeoverPageLeft.Initialize #DebutInformation
{
	opacity: 1;
}

#InformationBackground
{
	width: 100%;
	height: 100%;
}

#InformationBody
{
	padding: 32px;
	padding-top: 0px;
	horizontal-align: center;
}

#InformationBodyBackground
{
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/leaf_pages/debut_arcana_juggernaut/debut_brush_bg_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	wash-color: #1D525D;
	opacity: .8;
	transition-property: wash-color;
	transition-duration: .8s;
	transition-timing-function: ease-in-out;
}

.Style2Visible #InformationBodyBackground
{
	wash-color: #9A4A51;
}

.Style1Visible #Style1ButtonLabel,.Style2Visible #Style2ButtonLabel
{
	opacity: 0;
}

.Style2Visible #Style1ButtonLabel,.Style1Visible #Style2ButtonLabel
{
	opacity: 1;
}

#DemoButtonStyle1,#DemoButtonStyle2
{
	visibility: collapse;
}

.Style1Visible #DemoButtonStyle1,.Style2Visible #DemoButtonStyle2
{
	visibility: visible;
}

.DebutJuggernaut #Intro
{
	color: #5A7C52;
	font-size: 22px;
	margin-bottom: 4px;
}

.DebutJuggernaut #HeroNameGlow,.DebutJuggernaut #HeroName
{
	font-size: 68px;
	font-weight: semibold;
	text-transform: uppercase;
	color: #9BF79E;
	letter-spacing: 3px;
	margin-left: 16px;
	margin-top: -16px;
	text-shadow: none;
	opacity-mask: url("s2r://panorama/images/masks/scratches_horizontal_psd.vtex")1;
}

.DebutJuggernaut #HeroNameGlow
{
	color: transparent;
	text-shadow: 0px 1px 12px 1.0 #e5a6a444;
	opacity-mask: url("s2r://panorama/images/masks/scratches_horizontal_psd.vtex")0;
}

#HeroNameCellContainer
{
	vertical-align: bottom;
	margin-bottom: 48px;
	transition-property: brightness;
	transition-duration: .15s;
	transition-timing-function: ease-in-out;
}

#HeroNameCellContainer.DebutJuggernaut Label
{
	font-size: 28px;
	margin-top: 0px;
	text-shadow: 0px 1px 6px 1.0 #e5a6a422;
}

#FrontpageCellUnderlordDebut:hover #HeroNameCellContainer
{
	brightness: 3;
}

.DebutJuggernaut #Ability1
{
	background-image: url("s2r://panorama/images/spellicons/abyssal_underlord_firestorm_png.vtex");
}

.DebutJuggernaut #Ability2
{
	background-image: url("s2r://panorama/images/spellicons/abyssal_underlord_pit_of_malice_png.vtex");
}

.DebutJuggernaut #Ability3
{
	background-image: url("s2r://panorama/images/spellicons/abyssal_underlord_atrophy_aura_png.vtex");
}

.DebutJuggernaut #Ability4
{
	background-image: url("s2r://panorama/images/spellicons/abyssal_underlord_dark_rift_png.vtex");
	margin-right: 0px;
}

.DebutJuggernaut #ItemLore
{
	margin: 16px;
	font-size: 18px;
	opacity-mask: url("s2r://panorama/images/masks/textvignette_psd.vtex");
}

#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.DebutJuggernaut
{
	opacity: 1;
	margin-bottom: 6px;
	margin-left: 8px;
	color: #808f8d;
}

#FrontpageCellUnderlordDebut:hover #CustomHeader
{
	background-color: #7AFCFC;
}

.DebutJuggernaut #InnerPanel
{
	height: 372px;
	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;
}

.DebutJuggernaut #InnerPanel #Buttons
{
	vertical-align: bottom;
}

#ItemName2,#ItemName
{
	font-size: 46px;
	letter-spacing: 3px;
	text-overflow: shrink;
	height: 54px;
	text-align: center;
	vertical-align: bottom;
	horizontal-align: center;
	color: #34EEC5;
	opacity: 0;
	transition-property: opacity;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
}

#ItemName2
{
	color: #D05050;
	text-shadow: 0px 1px 12px 3.0 #D0505022;
}

.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;
}

#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;
}

.Style2Visible #TitleFX
{
	hue-rotation: 200deg;
	saturation: .8;
	wash-color: #f77;
}

#ItemSubtitle
{
	horizontal-align: center;
	margin-top: -24px;
}

.HeaderPanel Label
{
	color: #51aB74;
}

#Portrait
{
	background-image: url("s2r://panorama/images/leaf_pages/debut_arcana_juggernaut/customportrait_psd.vtex");
	width: 96px;
	height: 118px;
}

#HeroIcon
{
	background-image: url("s2r://panorama/images/heroes/npc_dota_hero_juggernaut_alt1_png.vtex");
	width: 96px;
	height: 54px;
	vertical-align: top;
	margin-top: 16px;
}

#AbilityIcons
{
	width: 130px;
	flow-children: right-wrap;
}

#AbilityIcon
{
	background-image: url("s2r://panorama/images/spellicons/juggernaut_blade_dance_arcana_png.vtex");
	background-size: 100%;
	width: 48px;
	height: 48px;
	vertical-align: top;
}

#AbilityIcon2
{
	background-image: url("s2r://panorama/images/spellicons/juggernaut_blade_fury_arcana_png.vtex");
	background-size: 100%;
	width: 48px;
	height: 48px;
	vertical-align: top;
}

#AbilityIcon3
{
	background-image: url("s2r://panorama/images/spellicons/juggernaut_healing_ward_arcana_png.vtex");
	background-size: 100%;
	width: 48px;
	height: 48px;
	vertical-align: top;
}

#AbilityIcon4
{
	background-image: url("s2r://panorama/images/spellicons/juggernaut_omni_slash_arcana_png.vtex");
	background-size: 100%;
	width: 48px;
	height: 48px;
	vertical-align: top;
}

.CustomSquare
{
	border-color: #255D61;
}

#MinimapIcon
{
	background-image: url("s2r://panorama/images/heroes/icons/npc_dota_hero_juggernaut_alt1_png.vtex");
	width: 32px;
	height: 32px;
	vertical-align: bottom;
	margin-bottom: 10px;
	border: 0px solid transparent;
}

.HeaderLabel
{
	color: #7B8C8D;
}

VerticalScrollBar .ScrollThumb
{
	background-color: #245A5E;
}

VerticalScrollBar:hover .ScrollThumb,VerticalScrollBar:active .ScrollThumb
{
	background-color: #31BDAC;
}

#MainContainer
{
	width: 100%;
	height: 100%;
}

.DemoSpacer
{
	height: 8px;
}

DOTAPurchaseButton
{
	width: 100%;
}

#Buttons
{
	flow-children: down;
	margin-right: 48px;
	min-width: 200px;
}

#FooterPanel
{
	margin-bottom: 72px;
	height: fit-children;
}

.Promo
{
	visibility: visible;
	width: 390px;
	margin-bottom: 22px;
}

.CloseButton
{
	horizontal-align: right;
	background-color: #133843;
	border: 1px solid #25907F;
	margin: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	wash-color: #25907F;
}

.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-delay: 3s;
	transition-timing-function: ease-in;
}

.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:#95E2E3;
}

.Style2Visible .FormName
{
	color:#F2BC92;
}

#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-delay: 3s;
	transition-timing-function: ease-in;
}

#NextButton
{
	horizontal-align: right;
	border-radius: 8px;
	height: 64px;
	background-image: url("s2r://panorama/images/textures/glassbutton_pink_psd.vtex");
	background-size: 100%;
	border: 0px solid transparent;
	padding-left: 16px;
	padding-right: 16px;
	transition-property: brightness, hue-rotation, background-image;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
}

#NextButton:hover
{
	brightness: 3;
}

.Style2Visible #NextButton
{
	background-image: url("s2r://panorama/images/textures/glassbutton_teal_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-mask: url("s2r://panorama/images/masks/softedge_circle_png.vtex")1;
	opacity: 0;
	transition-property: brightness, hue-rotation, wash-color, contrast, opacity;
	transition-duration: 0.3s;
	transition-delay: 3s;
	transition-timing-function: ease-in;
}

.Style2Visible #ButtonFX
{
	hue-rotation: 0deg;
	wash-color: #3EEBB088;
}

#TakeoverPageLeft.Initialize #StyleButtons,#TakeoverPageLeft.Initialize #ButtonFX,#TakeoverPageLeft.Initialize #StyleContainer
{
	opacity: 1;
}

