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

DOTADDBPromoPage
{
	width: 100%;
	height: 100%;
}

#DDBMainContainer
{
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/leaf_pages/ddb_s1_promo/bg_moon_psd.vtex");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

#DDBContentContainer
{
	horizontal-align: center;
	vertical-align: middle;
	flow-children: down;
	width: 1392px;
	height: 800px;
	margin-top: 20px;
}

#DDBHeader
{
	flow-children: right;
	width: 100%;
	height: 184px;
}

#DDBLogo
{
	width: 486px;
	height: 156px;
	background-image: url("s2r://panorama/images/leaf_pages/ddb_s1_promo/ddb_logo_main_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 32px;
}

#DDBLogoWhite
{
	width: 486px;
	height: 156px;
	background-image: url("s2r://panorama/images/leaf_pages/ddb_s1_promo/ddb_logo_main_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 32px;
	margin-left: -32px;
}

#DDBInfo
{
	flow-children: down;
	width: 100%;
	height: 100%;
}

#DDBInfoHeader
{
	flow-children: right;
}

#NFLogo
{
	width: 106px;
	height: 36px;
	background-image: url("s2r://panorama/images/leaf_pages/ddb_s1_promo/nf_logo_full_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 24px;
}

#DDBInfoHeader Label
{
	text-transform: uppercase;
	color: #ccc;
	letter-spacing: 1px;
	font-size: 26px;
	font-weight: thin;
	text-decoration: underline;
}

#DDBInfoHeader Label:hover
{
	color: #fff;
}

#DDBBody
{
	height: 100%;
	width: 100%;
	flow-children: right;
}

#DDBInfoBody
{
	margin-top: 4px;
	padding-right: 88px;
}

#DDBInfoBody Label
{
	font-size: 20px;
	color: rgb(177, 194, 226);
	text-shadow: 1px 1px 3px 3 black;
	color: gradient( linear, 0% 0%, 100% 0%, from( rgb(177, 194, 226) ), color-stop( 0.32, rgb(177, 194, 226) ), color-stop( 0.5, rgb(255, 255, 255) ), color-stop( 0.7, rgb(255, 255, 255) ),to( rgb(161, 185, 228) ) );
}

.DDBColumn
{
	height: 100%;
	width: fill-parent-flow(1);
	margin-right: 40px;
	background-color: #000c;
	border: 1px solid black;
	box-shadow: 0px 0px 14px black;
}

.BringForward
{
	z-index: 1;
}

.DDBColumnContent
{
	width: 330px;
	height: 640px;
	transition-property: opacity;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
}

.Release
{
	margin-right: 0px;
}

.ColumnImage
{
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	transition-property: pre-transform-scale2d, saturation, wash-color, brightness, opacity;
	transition-duration: .21s;
	transition-timing-function: ease-in-out;
	pre-transform-scale2d: 1;
	color: #1B4A73;
	wash-color: #3d719e;
	opacity: .75;
}

.Announcement .ColumnImage
{
	background-image: url("s2r://panorama/images/leaf_pages/ddb_s1_promo/column_slyrak_psd.vtex");
}

.Teaser .ColumnImage
{
	background-image: url("s2r://panorama/images/leaf_pages/ddb_s1_promo/column_davion_psd.vtex");
}

.Trailer .ColumnImage
{
	background-image: url("s2r://panorama/images/leaf_pages/ddb_s1_promo/column_mirana_psd.vtex");
}

.Release .ColumnImage
{
	background-image: url("s2r://panorama/images/leaf_pages/ddb_s1_promo/column_invoker_psd.vtex");
}

.DDBColumn.Unlocked:hover .ColumnImage
{
	pre-transform-scale2d: 1.04;
}

.CountdownContainer
{
	horizontal-align: center;
	vertical-align: middle;
	transition-property: pre-transform-scale2d, opacity;
	transition-duration: .41s;
	transition-timing-function: ease-in-out;
}

.CountdownNumber
{
	font-size: 32px;
	vertical-align: bottom;
	margin-left: 2px;
	color: rgb(217, 229, 255);
	color: #3d83c4;
	font-weight: bold;
	horizontal-align: center;
	text-align: center;
	width: 100%;
	opacity: .2;
}

.NextUp .CountdownNumber,.NextUp .CountdownLabel
{
	opacity: 1;
}

.NextUp .CountdownNumber
{
	color: white;
}

.CountdownLabel
{
	width: 100%;
	font-size: 12px;
	vertical-align: bottom;
	margin-bottom: 2px;
	margin-right: 2px;
	color: #3d83c4;
	text-transform: uppercase;
	font-family: radiance-condensed;
	font-weight: light;
	horizontal-align: center;
	text-align: center;
	opacity: .2;
}

.CountdownUnit
{
	flow-children: down;
	margin: 2px;
	min-width: 56px;
}

.DDBColumn:not(.Unlocked) .DDBColumnContent
{
	opacity: 0;
}

.Unlocked .ColumnImage
{
	saturation: 1;
	wash-color: #fff;
	brightness: 1;
	opacity: 1;
}

.Unlocked .CountdownContainer
{
	opacity: 0;
	pre-transform-scale2d: 2;
}

.ColumnFooter
{
	vertical-align: bottom;
	width: 100%;
	flow-children: down;
	margin-bottom: 16px;
}

.ColumnFooter Label
{
	width: 100%;
	text-align: center;
}

.ColumnDate
{
	color: #81c2ff;
	font-size: 26px;
	font-weight: thin;
	transition-property: opacity;
	transition-duration: 0.32s;
	transition-timing-function: ease-in-out;
	max-height: 32px;
}

.Unlocked .ColumnDate
{
	opacity: 0;
}

.Unlocked .ColumnLabel
{
	color: white;
	font-size: 22px;
	text-transform: uppercase;
	font-weight: bold;
}

.ColumnAction,.ColumnLabel
{
	color: #3d83c4;
	font-size: 22px;
	text-transform: uppercase;
	text-shadow: 1px 1px 4px 2 black;
	transition-property: color, font-weight;
	transition-duration: .41s;
	transition-timing-function: ease-in-out;
}

.ColumnAction
{
	opacity: 0;
	transition-property: color, font-weight, opacity;
	transition-duration: .21s;
	transition-timing-function: ease-in-out;
	color: #fff;
	font-weight: bold;
}

.Unlocked .ColumnAction
{
	opacity: 0;
}

.Unlocked:hover .ColumnAction
{
	opacity: 1;
}

#FGEmbersScene,#EmbersScene
{
	width: 100%;
	height: 100%;
}

#FGEmbersScene
{
	z-index: 2;
}

#DavionScene
{
	width: 100%;
	height: 50%;
	opacity-mask: url("s2r://panorama/images/masks/softedge_right_bottom_psd.vtex");
	transition-property: brightness, opacity;
	transition-duration: 0.21s;
	transition-timing-function: ease-in-out;
	opacity: .7;
}

#MiranaSceneBG,#MiranaScene
{
	width: 100%;
	height: 100%;
	transition-property: brightness, opacity;
	transition-duration: 0.21s;
	transition-timing-function: ease-in-out;
	opacity: 1;
	brightness: 1;
}

#MiranaSceneBG
{
	opacity: 1;
}

.DDBColumn:hover #DavionScene
{
	brightness: 3;
	opacity: 1;
}

#DDB_LogoWhite,#DDB_LogoBlack
{
	width: 100%;
	height: 110px;
	vertical-align: bottom;
	background-image: url("s2r://panorama/images/leaf_pages/ddb_s1_promo/ddb_logo_black_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	margin: 16px;
	margin-right: 12px;
}

#DDB_LogoWhite
{
	background-image: url("s2r://panorama/images/leaf_pages/ddb_s1_promo/ddb_logo_white_psd.vtex");
	width: 100%;
	height: 102px;
}

#DDB_Logo
{
	width: 100%;
	height: 92px;
	vertical-align: bottom;
	background-image: url("s2r://panorama/images/leaf_pages/ddb_s1_promo/ddb_logo_main_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	margin: 16px;
	margin-right: 12px;
	z-index: 2;
}

#NF_LogoShort
{
	width: 64px;
	height: 110px;
	vertical-align: top;
	horizontal-align: right;
	background-image: url("s2r://panorama/images/leaf_pages/ddb_s1_promo/nf_logo_short_psd.vtex");
	background-size: contain;
	background-repeat: no-repeat;
	margin: 16px;
	margin-top: 20px;
}

#InvokerBG,#MiranaBG,#DavBG
{
	width: 100%;
	height: 100%;
}

#EmbersScene,#SlyFGImg,#SlyBGImg,#InvokerBGImg,#MiranaBGImg,#DavBGImg
{
	width: 100%;
	height: 100%;
	transition-property: pre-transform-scale2d, brightness, wash-color, contrast;
	transition-duration: 0.21s;
	transition-timing-function: ease-in-out;
	contrast: 1;
}

.DDBColumn:hover #DavBGImg
{
	brightness: 1.9;
}

.DDBColumn:hover #MiranaBGImg
{
	brightness: 2.9;
}

.DDBColumn:hover #EmbersScene
{
	brightness: 4;
}

.DDBColumn:hover #SlyBGImg
{
	brightness: 4;
	contrast: 1.1;
}

#DDBOverlay
{
	width: 100%;
	height: 40%;
	vertical-align: bottom;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #0000 ), color-stop( 0.5, #441A1433 ), color-stop( 0.8, #441A1488 ),to( #441A1466 ) );
}

#DDBOverlay Label
{
	color: white;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	margin-bottom: 24px;
	text-shadow: 1px 1px 6px 2 black;
}

#SlyrakContainer
{
	width: 100%;
	height: 100%;
	vertical-align: bottom;
}

#SlyFGImgEye
{
	width: 20px;
	height: 20px;
	x: 106px;
	y: 221px;
	z-index: 4;
	animation-name: EyeReflection;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	opacity: .7;
}

@keyframes 'EyeReflection'
{
	0%
	{
		transform: translateX( -0.5px ) translateY( 0.5px );
		brightness: 1;
	}
	
	10%
	{
		transform: translateX( -0.5px ) translateY( 0.5px );
		brightness: 2;
	}
	
	20%
	{
		transform: translateX( 0.5px ) translateY( -0.5px );
		brightness: 1.15;
	}
	
	30%
	{
		transform: translateX( -0.5px ) translateY( 0.5px );
		brightness: 1.5;
	}
	
	40%
	{
		transform: translateX( 0.5px ) translateY( -0.5px );
		brightness: 1;
	}
	
	50%
	{
		transform: translateX( -0.5px ) translateY( 0.5px );
		brightness: 2;
	}
	
	60%
	{
		transform: translateX( -0.5px ) translateY( 0.5px );
		brightness: 1.5;
	}
	
	70%
	{
		transform: translateX( -0.5px ) translateY( 0.5px );
		brightness: 2;
	}
	
	80%
	{
		transform: translateX( 0.5px ) translateY( -0.5px );
		brightness: 1.6;
	}
	
	90%
	{
		transform: translateX( -0.5px ) translateY( 0.5px );
		brightness: 1.2;
	}
	
	100%
	{
		transform: translateX( -0.5px ) translateY( 0.5px );
		brightness: 1;
	}
	
}

#DavContainer
{
	width: 326px;
	height: width-percentage(178.487%);
	vertical-align: bottom;
	margin-left: 4px;
	overflow: noclip;
}

#MiranaContainer
{
	width: 326px;
	height: width-percentage(178.487%);
	width: 100%;
	height: 100%;
	vertical-align: bottom;
	overflow: noclip;
}

#DDB_DavFG
{
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/leaf_pages/ddb_s1_promo/davfg_psd.vtex");
	background-size: cover;
	background-repeat: no-repeat;
}

#DDB_DavFGCape
{
	width: 96%;
	height: width-percentage(72.35%);
	margin-left: 37.65%;
	margin-top: 14.4%;
}

#DDB_MiranaFGSheet
{
	width: 100%;
	height: width-percentage(201.14%);
	margin-left: -2px;
	margin-top: 0%;
}

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

.InvokerSceneOrb
{
	width: 100px;
	height: 100px;
	border: 1px solid black;
	opacity-mask: url("s2r://panorama/images/masks/softedge_circle_sharp_png.vtex");
	animation-name: OrbMotion;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

#InvokerSceneBGQuas
{
	width: 120px;
	height: 120px;
	horizontal-align: right;
	pre-transform-scale2d: 1.32;
	margin-right: 24px;
}

#InvokerSceneBGWex
{
	width: 100px;
	height: 100px;
	pre-transform-scale2d: 1.32;
	margin-top: 122px;
}

#InvokerSceneFGExort
{
	horizontal-align: right;
	vertical-align: middle;
	transform: translateX(24px);
	width: 120px;
	height: 120px;
	pre-transform-scale2d: 1.5;
}

@keyframes 'OrbMotion'
{
	0%
	{
		transform: translateX( -2.5px ) translateY( 3.5px );
	}
	
	50%
	{
		transform: translateX( 2.5px ) translateY( -13.5px );
	}
	
	100%
	{
		transform: translateX( -2.5px ) translateY( 3.5px );
	}
	
}