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

@define prizeRewardMeterLength: 600px;
@define prizeRewardPerPixel: 55000.0;
#OverviewBackgroundArena,#OverviewBackground
{
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/compendium/international2018/compendium/keyarena_fg_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;
	horizontal-align: center;
}

.AspectRatio4x3 #OverviewBackgroundArena,.AspectRatio16x10 #OverviewBackgroundArena
{
	background-size: cover;
}

#LeftBlock
{
	horizontal-align: center;
}

#MajorLogo
{
	width: 370px;
	height: 200px;
	background-image: url("s2r://panorama/images/compendium/international2018/compendium/2017_international_logo_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;
	width: 463px;
	height: 250px;
	margin-top: -20px;
}

#LeftBlock .BlueButton
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #1AA1CF ), to( #14729E ) );
	box-shadow: fill -8px 0px 16px 0px #199BC810;
}

#ScheduleButtonContents
{
	horizontal-align: center;
	vertical-align: middle;
	margin-bottom: 3px;
}

#PopOut
{
	width: 16px;
	height: 16px;
	background-image: url("s2r://panorama/images/control_icons/arrow_top_right_png.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-top: 4px;
}

#ScheduleButton
{
	horizontal-align: center;
	vertical-align: bottom;
	width: 90%;
	height: 52px;
	visibility: collapse;
}

#ScheduleButton:hover
{
	brightness: 1.5;
}

#ScheduleButton Label
{
	font-size: 22px;
	letter-spacing: 2px;
	color: white;
	text-shadow: none;
}

.CompendiumTopSection
{
	width: 1392px;
	height: 800px;
	horizontal-align: center;
}

#VideoStream
{
	width:800px;
	height:545px;
	horizontal-align:center;
	vertical-align:bottom;
	padding-bottom:10px;
	visibility:collapse;
}

.NotLive #VideoStream
{
	height:500px;
}

#MovieUpsell
{
	visibility:collapse;
}

#MovieCountdown
{
	visibility:collapse;
}

#MovieOver
{
	visibility:collapse;
}

.SelfEventActive .Ended #MovieOver
{
	visibility:visible;
	width:100%;
	margin-top:220px;
	horizontal-align: center;
}

.SelfEventActive .NotLive #MovieCountdown
{
	visibility:visible;
	width:100%;
	margin-top:220px;
	horizontal-align: center;
}

.SelfEventNotActive #MovieUpsell
{
	visibility:visible;
	width:75%;
	horizontal-align: center;
	vertical-align:middle;
}

.SelfEventActive #VideoStream
{
	visibility:visible;
}

.SelfEventActive .Ended #VideoStream
{
	visibility:collapse;
}

.CompendiumBottomSection
{
	width: 1392px;
	height: 800px;
	horizontal-align: center;
}

#OverviewContent
{
	width: 100%;
	height: 430px;
	margin-top: 32px;
}

.OverviewBlock
{
	margin-bottom: 23px;
}

.OverviewColumn
{
	margin-top: 14px;
	width: 400px;
	height: 100%;
}

.OverviewHeading
{
	text-transform: uppercase;
	letter-spacing: 3px;
	color: white;
	font-size: 18px;
}

.OverviewDetails
{
	color: #666666;
}

#Beam
{
	width: 100%;
	height: 100%;
	transform: scaleY(-1) scaleX(.25);
}

.SpotlightContainer
{
	width: 20%;
	height: 100%;
	transform-origin: 50% 100%;
	vertical-align: bottom;
	visibility: collapse;
	animation-duration: 7.11s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	opacity-mask: url("s2r://panorama/images/masks/softedge_box_png.vtex") 1.0;
}

@keyframes 'Spotlight1'
{
	0%
	{
		transform: rotateZ( 45deg ) translateY( -50px );
	}
	
	50%
	{
		transform: rotateZ( -15deg ) translateY( -50px );
	}
	
	100%
	{
		transform: rotateZ( 45deg ) translateY( -50px );
	}
	
}

@keyframes 'Spotlight2'
{
	0%
	{
		transform: rotateZ( -37deg ) ;
	}
	
	50%
	{
		transform: rotateZ( 5deg ) ;
	}
	
	100%
	{
		transform: rotateZ( -37deg ) ;
	}
	
}

@keyframes 'Spotlight3'
{
	0%
	{
		transform: rotateZ( 45deg ) ;
	}
	
	50%
	{
		transform: rotateZ( 15deg ) ;
	}
	
	100%
	{
		transform: rotateZ( 45deg ) ;
	}
	
}

@keyframes 'Spotlight4'
{
	0%
	{
		transform: rotateZ( 5deg ) translateX( 200px ) translateY( -100px );
	}
	
	50%
	{
		transform: rotateZ( -55deg ) translateX( 200px ) translateY( -100px );
	}
	
	100%
	{
		transform: rotateZ( 5deg ) translateX( 200px ) translateY( -100px );
	}
	
}

#Spot1
{
	animation-name: Spotlight1;
	margin-left: -130px;
}

#Spot1 #Beam
{
	transform: scaleY(-1) scaleX(0.35);
}

#Spot2
{
	animation-name: Spotlight2;
	animation-duration: 8.21s;
	horizontal-align: right;
}

#Spot3
{
	animation-name: Spotlight3;
	animation-duration: 9.4s;
	horizontal-align: left;
	margin-left: -100px;
}

#Spot3 #Beam
{
	transform: scaleY(-1) scaleX(0.4);
}

#Spot4
{
	animation-name: Spotlight4;
	animation-duration: 9.21s;
	horizontal-align: right;
	pre-transform-scale2d: 1.4;
	transform-origin: 50% 110%;
}

#Spot4 #Beam
{
	transform: scaleY(-1) scaleX(0.6);
}

#PrizePool
{
	horizontal-align: center;
	vertical-align: middle;
	margin-top: 0px;
	width: 100%;
	transition-property: opacity!immediate;
	transition-duration: 0.0s;
	transition-timing-function: ease-in;
	opacity: 1;
}

.PrizePoolReceived #PrizePool
{
	transition-property: opacity!immediate;
	transition-duration: 0.5s;
	transition-timing-function: ease-in;
	opacity: 1;
}

#PrizePoolBG
{
	width: 95%;
	height: 72px;
	vertical-align: middle;
	horizontal-align: center;
	margin-top: 12px;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( bp_color1&00 ), color-stop( 0.5, bp_color1&ff ), to( bp_color1&00 ) );
	transform: translateZ(-40px);
}

#PrizePoolLabel
{
	horizontal-align: center;
	text-shadow: 0px 1px 2px 3 #000000;
	color: #A19994;
}

#PrizePoolAmount
{
	color: #fff;
	text-shadow: 0px 0px 12px 1.0 accentColorGlow;
}

.LabelDepth
{
	font-size: 102px;
	font-weight: thin;
	margin-top: 0px;
	transform: rotateX(40deg);
	color: #162B40;
	horizontal-align: center;
	text-align: center;
	padding-right: 20px;
}

#PrizePoolDepth1
{
	transform: rotateX(41deg) translateY(2px) translateZ(-2px);
}

#PrizePoolDepth2
{
	transform: rotateX(41deg) translateY(4px) translateZ(-4px);
	color: #162B40;
}

#PrizePoolDepth3
{
	transform: rotateX(41deg) translateY(6px) translateZ(-6px);
	color: #162B40;
	text-shadow: 0px 0px 12px 8 #000000;
}

#PrizeInfo
{
	height: 16px;
	margin-bottom: 4px;
}

#LeftDetails
{
	visibility: visible;
	horizontal-align:left;
}

#RightDetails
{
	visibility: collapse;
	horizontal-align:right;
}

#Dates
{
	horizontal-align: center;
}

#Dates .OverviewDetails
{
	text-transform: uppercase;
	color: #A19994;
	margin-left: 8px;
	letter-spacing: 2px;
}

.InfoIcon
{
	wash-color: #A19994;
	opacity: .6;
}

.PrizeRewardMeter
{
	margin-top: 450px;
	horizontal-align: center;
	flow-children: down;
}

#PreviousPrizePoolLabel
{
	horizontal-align: center;
	text-shadow: 0px 1px 2px 3 #000000;
	color: #A19994;
}

.PrizePoolRewardDesc
{
	margin-top: 4px;
	horizontal-align: center;
	width: 700px;
	text-align: center;
	text-shadow: 0px 1px 2px 3 #000000;
	color: accentColor;
}

.ProgressMeterContainer
{
	margin-top: 12px;
	margin-left: 20px;
	width: prizeRewardMeterLength;
	horizontal-align: center;
}

.ProgressBackgroundContainer
{
	width: 100%;
	height: 36px;
	margin-top: 2px;
	opacity-mask: url("s2r://panorama/images/masks/softeredge_right_png.vtex");
}

.ProgressMeterBackground
{
	width: 100%;
	height: 100%;
	border-top-left-radius: 18px;
	border-bottom-left-radius: 18px;
	border: 6px solid black;
}

.ProgressMeterBackground2
{
	width: 100%;
	height: 100%;
	margin: 2px;
	border-top-left-radius: 18px;
	border-bottom-left-radius: 18px;
	border: 2px solid white;
}

#ProgressMeter
{
	height: 100%;
	border-top-left-radius: 18px;
	border-bottom-left-radius: 18px;
	background-color: backgroundBrightColor;
	width: 350px;
}

.MarkerContainer
{
	flow-children: down;
}

.Marker
{
	background-color: white;
	border: 1px solid black;
	width: 4px;
	height: 40px;
}

.MarkerDesc
{
	margin-top: 4px;
	width: 100px;
	margin-left: -50px;
	text-align: center;
	text-shadow: 0px 1px 2px 3 #000000;
	color: accentColor;
}

.RewardDesc
{
	width: 100px;
	margin-left: -50px;
	font-size: 14px;
	text-align: center;
	text-shadow: 0px 1px 2px 3 #000000;
	color: accentColor;
}

.FirstPrizeMark
{
	margin-left: 451px;
}

.SecondPrizeMark
{
	margin-left: 545px;
}