.container {
	/* border: 1px solid red; */
	width: 100%;
	max-width: 78rem;
}

.HiddenAnchor
{
	width: 1px;
	height: 1px;
}

.ChangeDetailsExtended
{
	position: relative;
	display: none;
	width: 950px;
	background-color: #0E0E0E;
	border: 1px solid black;
	margin-top: 0px;
	margin-left: -20px;
	padding: 15px;
	padding-left: 20px;
	color: #707070;
}

.ChangeDetailsEToggle
{
	display: block;
	margin-top: 10px;
	color: #CC867A;
}

	.ChangeDetailsEToggle.HideButton
	{
		margin-top: -5px;
		margin-bottom: 15px;
	}

.ChangeDetailsPopup
{
	display: none;
	position: absolute;
	z-index: 100;
	width: 910px;
	background-color: #131313;
	border: 1px solid black;
	margin-top: 5px;
	margin-left: -20px;
	padding: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #707070;
}

.ChangeDetailsExtended .ChangeDetailsPopup
{
	margin-left: -5px;
}

#Heroes b, #Items b
{
	font-size: 18px;
	padding-bottom: 4px;
	margin-top: -10px;
	display: block;
	text-transform: uppercase;
	font-weight: normal;
	font-family: 'Radiance';
	color: #E0E0E0;
}

b span.Reworked
{
	padding-left: 5px;
	color: #FF5307;
}

b span.New
{
	padding-left: 5px;
	color: #36D15E;
}

b span.Scepter
{
	padding-left: 5px;
	color: #00CCFF;
}

b span.Captains
{
	padding-left: 5px;
	color: #36D15E;
}

body {
	background-color: #020103;
	font-family: 'Radiance', san-serif;
	overflow-x: hidden;
}

.spacer-sm {
	margin-top: 20px;
}

.spacer-md {
	margin-top: 50px;
}

.spacer-lg {
	margin-top: 100px;
}

.spacer-xl {
	margin-top: 150px;
}

.spacer-xxl {
	margin-top: 250px;
}

.padding-sm {
	padding: 20px 0px;
}

.padding-md {
	padding: 50px 0px;
}

.padding-lg {
	padding: 100px 0px;
}

.padding-xl {
	padding: 150px 0px;
}

.padding-xxl {
	padding: 250px 0px;
}

.spacer-bottom {
	padding-bottom: 100px;
}

#navBarBGRepeat {
	height: auto;
	box-shadow: 0px 2px 10px #000000;
}

#MobileNav {
	width: 100%;
	background-color: #222222;
	border-bottom: 1px solid #444444;
	box-shadow: 2px 2px 15px #000000;
	z-index: 1000;
	display: none;
	padding: 10px 20px 6px 20px;
	min-height: 56px;
}

#MobileNavLogo {
	margin: 0 auto;
	float: left;
	max-width: 120px;

}

#MobileNavLogo Image {
	max-width: 100px;
}

.logo-mobile {
	max-width: 150px;
	padding-top: 3px;
}

#BackToDota {
	font-size: 12px;
	color: #999999;
	float: right;
	margin-top: 5px;
	text-shadow: none;
	text-decoration: underline;
}

#BacktoDota a:hover {
	color: #999999; !important
}


@media only screen and (max-width: 900px) {
	#navBarBGRepeat {
		display: none;
	}

	#MobileNav {
		display: block;
	}
}

#GradientOverlayBottom {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(0, 0, 0, 0)), color-stop(80%, rgba(0, 0, 0, 0.7)), color-stop(100%, rgba(0, 0, 0, 1)));
	width: 100%;
	height: 100%;
	z-index: 1;
	position: absolute;
	bottom: 0px;
}

#GradientOverlayTop {
	background: -webkit-gradient(linear, left bottom, left top, color-stop(60%, rgba(0, 0, 0, 0)), color-stop(80%, rgba(0, 0, 0, 0.7)), color-stop(100%, rgba(0, 0, 0, 1)));
	width: 100%;
	height: 100%;
	z-index: 1;
	position: absolute;
}

#GradientOverlayRight {
	background-image: linear-gradient(to left, rgba(0,0,0,1) , rgba(0,0,0,0.5) , rgba(0,0,0,0.3), rgba(0,0,0,0) , rgba(0,0,0,0));
	width: 100%;
	height: 100%;
	z-index: 1;
	position: absolute;
	bottom: 0px;
}

.outer
{
	width: 100%;
}

.fullwidth {
	width: 100%;
}

.header-video {
	position: absolute;
	z-index: 0;
	-webkit-mask-image: linear-gradient(to top, transparent 0%, black 20%);
  	mask-image: linear-gradient(to top, transparent 0%, black 100%);
}

#Hero {
	/* background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/header_bg.png"); */
	background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;
	width: 100%;
	/* min-height: 130vh; */
}

.header-bg {
	position: absolute;
	top: 0;
	left: 50%;
	width: 100%;
	transform: translateX(-50%) translateY(0%);
	overflow-x: hidden;
	z-index: -1;
	animation: fade-in 0.4s ease-in-out;
}

.hero-bg {
	/* height: 100vh; */
	width: 100%;
	position: relative;
	overflow: hidden;
}

.heroes {
	width: 100%;
	/* height: 96vh; */
	/* margin: 0 auto; */
}

.header {
	position: relative;
	height: 1080px;
}

.header-void {
	position: absolute;
	max-width: 1266px;
	top: 180px;
	left: -200px;
	z-index: 2;
}

.header-snapfire {
	position: absolute;
	max-width: 940px;
	/* top: 24px; */
	/* right: 18%; */
	z-index: 1;
	right: 0;
}

.intro {
	/* position: relative; */
	/* top: 60vh; */
	/* width: 60%; */
	z-index: 3;
	/* min-height: 600px; */
	margin: 0 auto;
	/* transform: translateY(-450px); */
	margin-top: -440px;
}

.symbol {
	padding: 0 32px;
}

.difficulty {
	width: 12%;
}

.title-main {
	max-width: 1200px;
}

.header-text {
	font-size: 42px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 6px;
	text-align: center;
	color:#F5C5FF;
	text-shadow: 0 0 12px #DA5FF3,
				 0 2px 4px #00000090;
}

.lore-text {
	font-size: 36px;
	line-height: 48px;
	color: #EFAFF0;
	text-shadow: 0 0 6px #EFAFF0;
	text-transform: uppercase;
	letter-spacing: 4px;
	text-align: center;
	/* padding-top: 124px; */
}

#Lore {
	z-index: 4;
	position: relative;
	margin-top: 100px;
	padding-top: 80px;
	padding-bottom: 100px;
}

#VoidSpirit #Lore {
	background-color: #000;
	/* top: -24vw; */
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/void-spirit/gems.png");
	background-size: cover;
	background-position: 50% 50%;
	width: 100%;
	height: 100%;
	box-shadow: inset -1px 0px 4px #EFAFF040,
				0 0 48px #000;
}

#Snapfire #Lore {
	background-color: #0f0100;
	/* top: -22vw; */
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/snapfire/cookies.png");
	background-size: 60%;
	background-position: -50% 50%;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	box-shadow: inset -1px 0px 4px #EFAFF040,
				0 0 48px #000;
}

#VoidSpirit #Lore .hero-lore-header {
	color:#fff;
	text-shadow: 0 0 8px #DA5FF3,
				 0 1px 2px #00000090;
}

#VoidSpirit #Lore .hero-lore {
	color:#EFAFF0;
	text-shadow: 0 0 8px #DA5FF3,
				 0 1px 2px #00000090;
}

#Snapfire #Lore .hero-lore-header {
	color:rgb(255, 196, 181);
	text-shadow: 0 0 8px #EF6D4B,
				 0 1px 2px #00000090;
}

#Snapfire #Lore .hero-lore {
	color:#EF6D4B;
	text-shadow: 0 0 8px #EF6D4B,
				 0 1px 2px #00000090;
}


.hero-hype {
	font-size: 20px;
	font-weight: 200;
	line-height: 200%;
	text-align: center;
	padding-top: 48px;
}

.hero-lore-header {
	font-size: 32px;
	font-weight: normal;
	letter-spacing: 4px;
	line-height: 200%;
	text-transform: uppercase;
	text-align: center;
}

.hero-lore {
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 4px;
	text-align: center;
	padding-top: 24px;
	line-height: 200%;
}

#VoidSpirit .hero-hype {
	color: #fedfff;
	text-shadow: 0 0 4px #EFAFF0;
}

.site-nav {
	width: 100%;
	height: 68px;
	margin-top: 100px;
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/nav_bg.png");
	background-size: cover;
	background-position: center;
}

.site-nav .row {
	width: 70%;	
}

#VoidSpirit #Attributes li {
	display: inline-block;
	padding-top: 12px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 18px;
	font-weight: thin;
	color: #EFAFF0;
	text-shadow: 0 0 6px #EFAFF0;
}

.site-nav li:hover {
	color: #fff;
}

#VoidSpirit {
	/* margin-top: 0px; */
	/* background: rgb(19,7,44); */
	/* background: linear-gradient(180deg, #14092D00 0%, #14092D 60%); */
	/* position: relative; */
	/* z-index: 2; */
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/void-spirit/hero-bg.png");
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	padding-bottom: 200px;
}

#VoidSpirit .top-half,
#VoidSpirit .bottom-half {
	position: relative;
	/* top: -26vw; */
	z-index: 3;
}

#VoidSpirit {

	/* position: absolute;
	top: 0;
	z-index: 1; */
}

#VoidSpirit  .bg-bottom {
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/void-spirit/footer_bg.png");
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat;
	width: 100%;
	min-height: 1820px;
	height: 100%;
	position: absolute;
	bottom: 0;
	z-index: 1;
}

.void-spirit {
	margin-top: -500px;
}

.hero-void {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
}

#HeroIntro {
	margin: 0 auto;
	z-index: 10;
	margin-top: -500px;
}

.hero-title {
	max-width: 960px;
	z-index: 5;
	position: relative;
}

#Attributes {
	width: 50%;
	padding-left: 0px;
}

.video {
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	box-shadow: 0 24px 36px #00000060;
}

#VoidSpirit #Video {
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/void-spirit/portal.png");
	background-size: 90%;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	position: relative;
	padding-top: 240px;
	padding-bottom: 280px;
	margin-top: 100px;
}

#VoidSpirit .video {
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/video_placeholder.png");
}

.void-small {
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/void-spirit/hero_2.png");
	background-size: contain;
	background-position: bottom right;
	background-repeat: no-repeat;
	position: absolute;
	right: -300px;
	bottom: 20px;
	width: 702px;
	height: 738px;
}

#Abilities {
	max-width: 60%;
	z-index: 2;
	position: relative;
	margin-bottom: 60px;
}

#Abilities li {
	display: inline-block;
	margin-bottom: 48px;
}

#Abilities img {
	width: 140px;
	height: 140px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

#VoidSpirit #Abilities img {
	box-shadow: 0px 0px 48px #DA5FF360;
}

.ability-text {
	padding-left: 24px;
}

.skill-title {
	font-size: 26px;
	text-transform: uppercase;
	letter-spacing: 4px;
}

.skill-desc {
	font-size: 17px;
	line-height: 26px;
	vertical-align: middle;
}

#VoidSpirit .skill-title {
	color: #decef5;
	text-shadow: 0 0 8px #EFAFF0;
}

#VoidSpirit .skill-desc {
	color: #decef590;
}

.gems {
	width: 64%;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -140px;
	overflow: hidden;
}

#Snapfire {
	/* top: -190px; */
	position: relative;
	z-index: 4;
	transform: translateY(-200px);
}

#Snapfire  {
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/snapfire/hero-bg.png");
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
	width: 100%;
	/* min-height: 2000px; */
	/* position: absolute; */
	/* top: 0; */
	z-index: 1;
	padding-bottom: 200px;
}

/* #Snapfire  {
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/snapfire/bottom_bg.png");
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat;
	width: 100%;
	min-height: 2608px;
	position: absolute;
	bottom: 0;
	z-index: -1;
} */

#Snapfire .top-half {
	position: relative;
	/* top: -24vw; */
}

#Snapfire .bottom-half {
	/* top: -16vw; */
	position: relative;
	z-index: 4;
}

.hero-snapfire {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
}

#Snapfire #Attributes {
	width: 60%;
}

#Snapfire #Attributes li {
	display: inline-block;
	padding-top: 12px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 18px;
	font-weight: thin;
	color: #EF6D4B;
	text-shadow: 0 0 6px #EF6D4B;
}

#Snapfire .hero-hype {
	color: rgb(255, 217, 208);
	text-shadow: 0 0 4px #EF6D4B;
}

#Snapfire #Video {
	position: relative;
	padding-top: 200px;
	padding-bottom: 200px;
	width: 100%;
	margin-top: 100px;
}

#Snapfire #video {
	z-index: 5;
}

#Snapfire #Abilities img {
	box-shadow: 0px 0px 48px #EF6D4B60;
}

#Snapfire .skill-title {
	color: rgb(255, 217, 208);
	text-shadow: 0 0 8px #EF6D4B;
}

#Snapfire .skill-desc {
	color: rgb(255, 217, 208, 0.7);
}

.kitchen {
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/snapfire/kitchen.png");
	background-size: contain;
	background-position: bottom right;
	background-repeat: no-repeat;
	position: absolute;
	right: -260px;
	bottom: 0px;
	width: 600px;
	height: 600px;
	visibility: visible;
}

.cactus {
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/snapfire/cactus.png");
	background-size: contain;
	background-position: top left;
	background-repeat: no-repeat;
	position: absolute;
	left: -180px;
	top: 30px;
	width: 600px;
	height: 100%;
	z-index: -1;
}


#Wallpaper {
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/wallpaper/wallpaper_bg.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 849px;
	/* top: -680px; */
	position: relative;
	z-index: 5;
	margin-top: -550px;
}

#Wallpaper .container {
	padding-top: 380px;
}

#Wallpaper ul {
	/* padding-left: 20px;
	padding-right: 20px; */
}

.gallery img {
	height: 100%;
	border: 1px solid #DA5FF3;
	box-shadow: 0 0 24px #DA5FF380;
}

.gallery a {
	height: 100%;
}

.gallery li {
	list-style-type: none;
	display: inline;
	margin: 0 12px;
}

#PatchNotes {
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/patch-notes/bg_repeater.jpg");
	background-size: 100%;
	background-repeat: repeat;
	width: 100%;
	/* top: -790px; */
	margin-top: -150px;
	position: relative;
	padding-top: 150px;
}

#PatchNotes .bg-top {
	background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/patch-notes/header_bg.png");
	background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}

#PatchNotes .container {
	position: relative;
}

.patch-notes h1 {
	font-size: 72px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 8px;
	text-align: center;
	color:#F5C5FF;
	text-shadow: 0 0 48px #DA5FF3,
				 0 2px 4px #00000090;
}

.patch-notes h3 {
	font-size: 42px;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 6px;
	text-align: left;
	color:#fff;
	text-shadow: 0 0 12px #D84A0C80,
				 0 2px 4px #00000090;
	margin-bottom: 24px;
	background: #D84A0C;
	background: linear-gradient(90deg, #D84A0C90 0%, #D84A0C00 100%);
	border-left: 1px solid rgb(255, 80, 5);
	padding-left: 24px;
}

.patch-notes h4 {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	line-height: 26px;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 22px;
	font-weight: normal;
	color: #fff;
}

.patch-notes ul {
	list-style: none;
	padding-left: 0px;
}

.patch-notes ul li:before { 
	content:"•"; 
	font-size:12pt; 
	left: -16px;
	top: -2px;
	position: absolute;
	opacity: 0.6;
}

.patch-notes p,
.patch-notes li {
	font-size: 18px;
	line-height: 32px;
	color: #999;
	position: relative;
}

.patch-notes li {
	margin-left: 24px;
}

.tab {
	margin-left: 24px;
}

.general,
.neutral,
.items,
.outposts,
.hero-changes {
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat;
	width: 100%;
}

.general { background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/patch-notes/general_header.png"); height: 800px;}
.neutral { background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/patch-notes/neutral_header.png"); height: 600px;}
.items { background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/patch-notes/items_header.png"); height: 500px;}
.outposts { background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/patch-notes/outpost_header.png"); height: 500px;}
.hero-changes { background-image: url("https://cdn.steamstatic.com/apps/dota2/images/outlanders/patch-notes/heroes_header.png"); height: 700px;}

.ChangeDetailsExtended {
	margin-top: 4px;
}

.ChangeDetailsExtended li
{
	margin-left: 36px;
	padding-right: 24px;
}

.highlight
 {
	font-weight: bold;
}

ul.outpost-details {
	padding-left: 0;
}

.outpost-details li {
}

.outpost-details p {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	line-height: 26px;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 13px;
	font-weight: bold;
}

.drop-rates {
	padding-top: 24px;
}

.drop-rates li {
	font-size: 16px;
	opacity: 0.6;
	line-height: 24px;
	margin-left: 0;
}

.col-4.drop-rates {
	margin-left: 0;
}

ul.drop-rates {
	padding-left: 0;
}

#NeutralItems h5 {
	margin-top: -8px;
}

#PatchNotes .time {
	font-size: 21px;
	text-transform: uppercase;
	letter-spacing: 4px;
	opacity: 1.0;
	margin-bottom: 0px;
}

.drop-rates li:before {
	display: none;
}

.patch-notes .tier-header {
	text-transform: uppercase;
	letter-spacing: 4px;
	font-size: 22px;
	font-weight: normal;
	color: #D84A0C;
}

#Neutrals ul {
	padding-left: 0;
}

.name {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 18px;
	color: #fff;
	margin-top: 12px;
}

.Scepter {
	color: #00CCFF;
	margin-left: 12px;
}

.Reworked {
	color: #FF5307;
	margin-left: 12px;
}

.Captains {
	color: #36D15E;
	margin-left: 12px;
}

.Recipe {
	color: rgb(228, 173, 24);
	margin-left: 12px;
}


#Footer .Inner
{
	background-image: url( 'https://cdn.steamstatic.com/apps/dota2/images/700/footer.jpg' );
	background-color: #000000;
	height: 287px;
	background-position: center;

}

.ability_info {
	background-color: #030303;
	margin-bottom: 80px;
}

.footer {
	background-color: #000000;
	width: 100%;
	padding-top: 30px;
	/* top: -780px; */
	position: relative;
	/* margin-bottom: -780px; */
}

#PageFooter {
	width: 100%;
	background-color: #000000;
	padding: 30px 0px;

}

.footer-logo {
	height: 30px;
	width: auto;
	margin: 0px 20px;
}

#footer-logo {
	width: 100%;
}

.footer-line {
	font-size: 13px;
	line-height: 20px;
	color: #666666;
	margin-top: 10px;
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 160rem) {

	.intro {
		top: 50vh;
	}
} */

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 215rem) {


/* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 38rem) {
	.header {
		height: 700px;
	}
	
	.header-void {
		max-width: 666px;
		top: 0;
	}

	.header-snapfire {
		max-width: 410px;
		right: -50px;
	}

	.lore-text {
		font-size: 18px;
		line-height: 24px;
	}

	.hero-void {
		width: 200%;
		transform: translateX(-25%);
	}
	
	.void-spirit {
		margin-top: 200px;
	}

	.difficulty {
		width: 25%;
	}

	.void-small,
	.kitchen {
		visibility: hidden;
	}
	
	#VoidSpirit #Video,
	#Snapfire #Video {
		padding-top: 100px;
		padding-bottom: 100px;
		margin-top: 0px;
	}

	#Abilities {
		max-width: 100%;
	}

	.ability-text {
		padding-left: 0;
	}

	.hero-snapfire {
		width: 200%;
		transform: translateX(-50%);
		margin-top: 100px;
	}

	.snapfire {
		margin-top: 350px;
	}

	#Snapfire #Lore {
		background-size: cover;
		background-position: center;
	}

	.cactus {
		top: -70px;
	}

	.gallery img {
		margin-bottom: 12px;
	}

	.patch-notes {
		margin-top: 240px;
	}

	.patch-notes h1 {
		font-size: 54px;
	}

	.general {
		height: 400px;
	}

	.outposts {
		height: 300px;
	}

	.neutral {
		height: 300px;
	}

	.items {
		height: 200px;
	}

	.hero-changes {
		height: 380px;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 38rem) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 48rem) {
	.ability-text {
		padding-left: 0;
	}

	.gallery img {
		width: 30%;
	}

}