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

#CustomHeroBackground
{
	opacity: 1;
}

.AspectRatio21x9 #CustomHeroBackground
{
	opacity-mask: url("s2r://panorama/images/heroes/backgrounds/test/mask_right_psd.vtex");
	opacity-mask-position: -120px -50px;
}

#CustomHeroBackground #HeroBackground
{
	width: 100%;
	height: 100%;
	background-image: url("s2r://panorama/images/heroes/backgrounds/generic_bg_psd.vtex");
	saturation: 1;
	background-size: cover;
	transition-property: background-image;
	transition-timing-function: ease-in-out;
	transition-duration: .32s;
}

.hero_atlas #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/abrams_bg_psd.vtex");
}

.hero_bebop #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/bebop_bg_psd.vtex");
}

.hero_bookworm #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/patience_bg_psd.vtex");
}

.hero_nano #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/calico_bg_psd.vtex");
}

.hero_doorman #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/doorman_bg_psd.vtex");
}

.hero_drifter #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/drifter_bg_psd.vtex");
}

.hero_dynamo #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/dynamo_bg_psd.vtex");
}

.hero_frank #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/victor_bg_psd.vtex");
}

.hero_orion #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/grey_talon_bg_psd.vtex");
}

.hero_haze #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/haze_bg_psd.vtex");
}

.hero_astro #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/astro_bg_psd.vtex");
}

.hero_inferno #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/infernus_bg_psd.vtex");
}

.hero_tengu #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/ivy_bg_psd.vtex");
}

.hero_kelvin #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/kelvin_bg_psd.vtex");
}

.hero_ghost #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/geist_bg_psd.vtex");
}

.hero_lash #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/lash_bg_psd.vtex");
}

.hero_forge #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/mcginnis_bg_psd.vtex");
}

.hero_mirage #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/mirage_bg_psd.vtex");
}

.hero_krill #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/krill_bg_psd.vtex");
}

.hero_chrono #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/paradox_bg_psd.vtex");
}

.hero_synth #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/pocket_bg_psd.vtex");
}

.hero_priest #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/priest_bg_psd.vtex");
}

.hero_punkgoat #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/billy_bg_psd.vtex");
}

.hero_gigawatt #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/seven_bg_psd.vtex");
}

.hero_shiv #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/shiv_bg_psd.vtex");
}

.hero_magician #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/magician_bg_psd.vtex");
}

.hero_vampirebat #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/mina_bg_psd.vtex");
}

.hero_hornet #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/vindicta_bg_psd.vtex");
}

.hero_viscous #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/viscous_bg_psd.vtex");
}

.hero_viper #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/vyper_bg_psd.vtex");
}

.hero_warden #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/warden_bg_psd.vtex");
}

.hero_wraith #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/wraith_bg_psd.vtex");
}

.hero_yamato #CustomHeroBackground #HeroBackground
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/yamato_bg_psd.vtex");
}

.AspectRatio16x10 #CustomHeroBackground #HeroBackground
{
	background-position: -120px 0px;
}

.AspectRatio21x9 #CustomHeroBackground #HeroBackground
{
	background-position: -120px -50px;
}

#CustomHeroBackground #Section1
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/test/mask_nw_psd.vtex");
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	z-index: 10;
	animation-name: section1Anim;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	visibility: collapse;
}

#CustomHeroBackground #Section2
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/test/mask_center_psd.vtex");
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	z-index: 10;
	animation-name: section2Anim;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	visibility: collapse;
}

#CustomHeroBackground #Section3
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/test/mask_bottom_psd.vtex");
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	animation-name: section3Anim;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	visibility: collapse;
}

#CustomHeroBackground #Section4
{
	background-image: url("s2r://panorama/images/heroes/backgrounds/test/mask_ne_psd.vtex");
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	animation-name: section1Anim;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	visibility: collapse;
}

@keyframes 'section1Anim'
{
	0%
	{
		transform: rotateZ(0deg) skew(2deg);
	}

	20%
	{
		pre-transform-scale2d: 1;
	}

	40%
	{
		pre-transform-scale2d: 1.01;
	}

	60%
	{
		pre-transform-scale2d: 1;
		transform: skew(-2deg);
	}

	80%
	{
		pre-transform-scale2d: 1.01;
	}

	100%
	{
		transform: rotateZ(0deg) skew(2deg);
		pre-transform-scale2d: 1;
	}

}

@keyframes 'section2Anim'
{
	0%
	{
		transform: rotateZ(0deg) skew(2deg);
	}

	20%
	{
		pre-transform-scale2d: 1;
	}

	40%
	{
		pre-transform-scale2d: 1.02;
	}

	60%
	{
		pre-transform-scale2d: 1;
		transform: skew(2deg);
	}

	80%
	{
		pre-transform-scale2d: 1.02;
	}

	100%
	{
		transform: rotateZ(0deg) skew(2deg);
		pre-transform-scale2d: 1;
	}

}

@keyframes 'section3Anim'
{
	0%
	{
		transform: rotateZ(0deg) skew(-2deg);
	}

	20%
	{
		pre-transform-scale2d: 1;
	}

	40%
	{
		pre-transform-scale2d: 1.03;
	}

	60%
	{
		pre-transform-scale2d: 1;
		transform: skew(2deg);
	}

	80%
	{
		pre-transform-scale2d: 1.03;
	}

	100%
	{
		transform: rotateZ(0deg) skew(-2deg);
		pre-transform-scale2d: 1;
	}

}
