html,
 body {
	 height: 100%;
	 width: 100%;
	 margin: 0;
	 padding: 0;
	 left: 0;
	 top: 0;
	 font-size: 100%;
 }

/* ROOT FONT STYLES */

.hero-bg{
	line-height: 1.5;
	margin: 0 auto;
}

/* TYPOGRAPHY */

h1 {
	font-size: 8rem;
	color: #bc9950;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 8px;
	font-family: 'Garamond', serif;
	font-weight: 300;
	line-height: 9rem;
}

h2 {
	font-size: 3rem;
	color: #bc9950;
	font-weight: 800;
	letter-spacing: 5px;
}

h3 {
	font-size: 2rem;
	color: #bc9950;
	font-weight: 1000;
	letter-spacing: 5px;
	text-transform: uppercase;
	line-height: 2rem;
}

h4 {
	font-size: 1.125rem;
}

h5 {
	font-size: 1rem;
}

h6 {
	font-size: 0.875rem;
}

p {
	font-size: 1.125rem;
	font-weight: 300;
	line-height: 1.8;
}

.font-light {
	font-weight: 300;
}

.font-regular {
	font-weight: 400;
}

.font-heavy {
	font-weight: 700;
}

/* POSITIONING */

.left {
	text-align: left;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.justify {
	text-align: justify;
}

/* ==== GRID SYSTEM ==== */

.container {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.row {
	position: relative;
	width: 100%;
}

.row [class^="col"] {
	float: left;
	margin: 0.5rem 2%;
	min-height: 0.125rem;
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
	width: 96%;
}

.col-1-sm {
	width: 4.33%;
}

.col-2-sm {
	width: 12.66%;
}

.col-3-sm {
	width: 21%;
}

.col-4-sm {
	width: 29.33%;
}

.col-5-sm {
	width: 37.66%;
}

.col-6-sm {
	width: 46%;
}

.col-7-sm {
	width: 54.33%;
}

.col-8-sm {
	width: 62.66%;
}

.col-9-sm {
	width: 71%;
}

.col-10-sm {
	width: 79.33%;
}

.col-11-sm {
	width: 87.66%;
}

.col-12-sm {
	width: 96%;
}

.row::after {
	content: "";
	display: table;
	clear: both;
}

.hidden-sm {
	display: none;
}

@media only screen and (min-width: 33.75em) {  /* 540px */
	.container {
		width: 80%;
	}
}

@media only screen and (min-width: 45em) {  /* 720px */
	.col-1 {
		width: 4.33%;
	}

	.col-2 {
		width: 12.66%;
	}

	.col-3 {
		width: 21%;
	}

	.col-4 {
		width: 29.33%;
	}

	.col-5 {
		width: 37.66%;
	}

	.col-6 {
		width: 46%;
	}

	.col-7 {
		width: 54.33%;
	}

	.col-8 {
		width: 62.66%;
	}

	.col-9 {
		width: 71%;
	}

	.col-10 {
		width: 79.33%;
	}

	.col-11 {
		width: 87.66%;
	}

	.col-12 {
		width: 96%;
	}

	.hidden-sm {
		display: block;
	}
}

@media only screen and (min-width: 70em) { /* 960px */
	.container {
		width: 75%;
		max-width: 70rem;
	}
}

body {
	background-color: #000000;
	font-family: 'Radiance', serif;
}

h2 {
	color:	#D5AD6D; /*if no support for background-clip*/
	background: -webkit-linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
	background: linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

h3 {
	color:	#D5AD6D; /*if no support for background-clip*/
	background: -webkit-linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
	background: linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

div {
	transition: 0.4s ease;
}

#navBarBGRepeat {
	height: 64px;
}


.topcontent {
	padding-top: 600px;
}



.hero-bg {
	background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;
	margin: 0 auto;
	background-color: #230a06;
}

.hero_img {
	opacity: 1;
	width: 100%;
	margin: 0 auto;
	position: absolute;
	max-width: 1800px;
	left: 15%;
	overflow: hidden;
}

.hero-img-mars {
	background-image: url('https://img.dota2.com.cn/dota2/a6/33/a633377fed3ce6193c18e33d122f40051551845837.jpg');
}

.stats-bg {
	/*background-image: url('https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/abilities-bg994ffsd4.png');*/
	background-position: bottom;
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: #230a06;
	padding-bottom: 1px;
}

@keyframes fadeUpIn {
	0% {
		transform: translateY(50px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}



.pushRight {
	animation: 1s ease-out 0s 1 pushRight;
}

.hero-content {
	z-index: 100;
}

.hero-name img {
	width: 80%;
	margin: 0 auto;
}

.fadeUpIn {
	animation: 1s ease-out 0s 1 fadeUpIn;
}

.hero-introducing {
	text-transform: uppercase;
	letter-spacing: 8px;
	font-size: 1.2rem;
	color: #ffffff;
	opacity: 0.7;
}

.stats-pips {
	margin-bottom: 30px;
}

.stats {
	text-align: center;
	font-weight: normal;
	font-size: 1.2rem;
	letter-spacing: 3px;
	color: #ffffff;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.stats_spacer {
	margin: 0px 10px;
}

.stats-type {

}

@keyframes pushRight {
    0% {
        left: -100px;
        opacity: 0;
    }
    100% {
        left: 0px;
        opacity: 1;
    }
}

.attacking {
	width: 100%;
	/*height: 45rem;*/
    margin-bottom: 50px;
}

.attacking img {
	position: absolute;
	width: 100%;
	top: 0px;
	left: 0px;
    margin-top: 20px;
}

.attack_img {
	width: 100%;
	height: auto;
	z-index: 12;
    left: -100px;

}

.creep1_img {
	z-index: 14;
	width: 100%;
	height: auto;
	left: 100px;
    opacity: 0;
    animation-fill-mode: forwards;
}

.creep2_img {
	z-index: 13;
	width: 100%;
	height: auto;
	left: 100px;
    opacity: 0;
    animation-fill-mode: forwards;
}

.creep3_img {
	z-index: 11;
	width: 100%;
	height: auto;
	left: 100px;
    opacity: 0;
    animation-fill-mode: forwards;

}



.lore-bg {
	background-image: url('https://img.dota2.com.cn/dota2/81/32/8132367831188ad445dda3778c60af391551845950.png');
	background-size: 100%;

	/* Create the parallax scrolling effect */
	/*background-attachment: fixed;*/
	background-position: bottom;
	background-repeat: no-repeat;
	background-color: #230a06;
	box-shadow: 5px 5px #000000;

}

.lore-shield {
	/*background-image: url('https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/shield-9dsfs0d.png');*/
	background-size: 40%;
	background-position: right;
	background-repeat: no-repeat;
	height: 80%;
}

.element {
	float: right;
	shape-outside: circle(50%);
	background-image: url('https://img.dota2.com.cn/dota2/1a/af/1aaf480446c600530ba3c38bfe128eae1551845789.png');
	width: 35rem;
	height: 35rem;
	background-size: 85%;
	background-repeat: no-repeat;
	background-position: center;
}

.abilities-bg {
	background-color: #230a06;
	padding-top: 25px;

}

.lore-content {
	margin: 0px 0px 140px 0px;
	color: #000000;
	background-color: rgba(0,0,0,0.3);
	padding: 50px 0px;
}


.lore-intro {
	font-size: 3rem;
	color: #bcbcbc;
	font-weight: 800;
	letter-spacing: 5px;
	text-transform: uppercase;
	margin-bottom: 20px;
	line-height: 3rem;
	padding: 0px 50px;
}

.lore-style {
	text-shadow: 5px 5px rgba(0,0,0,0.6);
	line-height: 3rem;
}


.lore-desc {
	color: #bcbcbc;
	font-weight: 200;
	font-size: 1.3rem;
	letter-spacing: 0.5px;
	line-height: 2rem;
	text-align: justify;
	padding: 0px 50px;
}

.stats-content {
	z-index: 100;
	animation: 1s ease-out 0s 1 fadeUpIn;
	/*transform: translateY(-100px);*/
}

.stats-pip {
	margin-right: 10px;
}

.stats-desc {
	font-size: 1.3rem;
	text-align: justify;
	padding: 0px 20px;
	color: #bcbcbc;
	font-weight: ligher;
}

.stats-desc:first-letter {
	color:	#D5AD6D; /*if no support for background-clip*/
	background: -webkit-linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
	background: linear-gradient(top, #8f6B29, #FDE08D, #DF9F28);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	float: left;
	font-size: 90px;
	line-height: 60px;
	padding: 8px;
	margin-right: 20px;
	background-color: #151515;
	border: solid 1px #bc9950;
	font-family: 'Garamond', serif;
	transform: translateY(10px);
}

.abilities-contain {
	margin: 20px 0px;
	background-image: url('https://img.dota2.com.cn/dota2/4c/2b/4c2b8e2d5d19832fbe9abedd08e0cbe11551846076.png');
	background-size: 102%;
	background-position: top;
	background-repeat: no-repeat;
	background-repeat: no-repeat;
	box-shadow: #000000 3px 3px 30px;
	margin-bottom: 100px;
}

.abilities-intro {
	text-align: center;
	text-transform: uppercase;
}

.abilities-thumbs {
	display: inline-block;
	margin: 20px 0px 10px 0px;
}

.ability_btn {
	width: 65px;
	height: 65px;
	float: left;
	margin-right: 14px;
	border: 1px solid #2d2d2d;
}

.framepos {
	position: relative;
}

.video-overlay {
	position: relative;
}

.video-overlay img {
	position:absolute;
}

.frametop {
	width: 100%;
	z-index: 600;
}

.frameleft {

}

.frameright {
	right: 0px;
	width: auto;
	height: 100%;
	z-index: 700;
}

.framebottom {
	bottom: 0;
	width: 100%;
	z-index: 600;
	transform: rotate(180deg);
}


.ability_btn:hover {
	-webkit-filter: none; /* Safari 6.0 - 9.0 */
	filter: none;
	box-shadow: 0px 0px 20px rgba(255,255,255,0.3);
	transform: translateY(-5px);
}

.ability_btn1 {
	background-image: url('https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/smallbw_1-1.png');
}

.ability_btn1:hover {
	background-image: url('https://steamcdn-a.akamaihd.net/apps/dota2/images/abilities/mars_spear_md.png');
}

.ability_btn2 {
	background-image: url('https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/smallbw_2-1.png');
}

.ability_btn2:hover {
	background-image: url('https://steamcdn-a.akamaihd.net/apps/dota2/images/abilities/mars_gods_rebuke_md.png');
}

.ability_btn3 {
	background-image: url('https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/smallbw_3-1.png');
}

.ability_btn3:hover {
	background-image: url('https://steamcdn-a.akamaihd.net/apps/dota2/images/abilities/mars_bulwark_md.png');
}

.ability_btn4 {
	background-image: url('https://steamcdn-a.akamaihd.net/apps/dota2/images/mars/smallbw_4-1.png');
}

.ability_btn4:hover {
	background-image: url('https://steamcdn-a.akamaihd.net/apps/dota2/images/abilities/mars_arena_of_blood_md.png');
}

.ability_btnimg {
	display: none;
	-webkit-filter: none; /* Safari 6.0 - 9.0 */
	filter: none;
}


.ability_btnimg1 {
	display: block;
	-webkit-filter: none; /* Safari 6.0 - 9.0 */
	filter: none;
	/*border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><defs><linearGradient id='redgradient'><stop offset='0' stop-color='%23FFC14D'/><stop offset='0.362' stop-color='%23FF4834'/><stop offset='1' stop-color='%233B0300'/></linearGradient></defs><g id='Layer_1'><path d='M0,0 L50,0 L50,50 L0,50 L0,0 z' fill='url(%23redgradient)' width='100%' height='100%'/></g></svg>") 10% stretch;*/
}


.ability_img {
	width: 100%;
	display: none;

}

.ability_img img {
	border: 1px solid #2d2d2d;
	margin-top: 20px;
}

.ability_img1 {
	display: block;
}


.video {
	width: 100%;
	display: none;
	border-radius: 6px 6px 0px 0px;
}

.video1 {
	display: block;
}

.ability_desc {
	display: none;
	font-size: 1.2rem;
	color: gray;
	padding: 10px;
}

.ability-desc {
	min-height: 112px;
	text-align: justify;
	margin-top: 10px;
}

.ability_desc1 {
	display: block;
}

.mars_logovid {
	width: 100%;
}

.attacking2 {
	width: 100%;
	margin: 50px 0px 0px 0px;
    opacity: 0;
}

#Footer .Inner
{
	background-image: url( 'https://steamcdn-a.akamaihd.net/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%;
}

.perf_timing_area {
	background-color: #000000;
}
.bottom a{
    text-decoration: none;
}
@media only screen and (max-width: 990px) {
	/* 720px */
	.element {
		display: none;
	}

	.attacking {
		/*height: 20rem;*/
	}
}

@media only screen and (max-width: 1250px) {
	.attacking {
		/*height: 20rem;*/
	}
}

@media only screen and (max-width: 850px) {
	/* 720px */
	.topcontent {
		padding-top: 300px;
	}
}

@media only screen and (max-width: 720px) {
	/* 720px */
	.ability-img {
		display: none;
		max-width: 60px;
	}

	.attacking {
		/*height: 10rem;*/
	}

}

@media only screen and (max-width: 600px) {
	/* 720px */
	.lore-intro {
		padding: 0px 20px;
		font-size: 2.5rem;
	}

	.lore-desc {
		padding: 0px 20px;
		font-size: 1.2rem;
		line-height: 1.8rem;
	}

}

@media only screen and (max-width: 600px) {

    .stats {
        font-size: 10px;
    }
}

@media only screen and (max-width: 1860px) {
	/* 720px */
	.hero_img {
		left: 0%;
	}
}