.webp .background{
	background-image: url(../img/demonhunter/bg.jpg);
}
.no-webp .background{
	background-image: url(../img/demonhunter/bg.jpg);
}



/*

.webp .background{
	background-image: url(../img/10years/bg.webp);
}
.no-webp .background{
	background-image: url(../img/10years/bg.jpg);
}

*/

/*
.plattform {
	background-repeat:no-repeat;
	background-size: 108% 100%;
	width: 110%;
	height: 450px;
	height: 53vh;
	min-height: 42vh;
}

.webp .plattform {
	background-image: url(../img/10years/plattform.webp);	
}
.no-webp .plattform {
	background-image: url(../img/10years/plattform.png);	
}
*/

.plattform{
  -webkit-filter: hue-rotate(158deg) saturate(2);
  filter: hue-rotate(158deg) saturate(2);
}

.foreground{
  -webkit-filter: hue-rotate(158deg) saturate(2) brightness(0.6);
  filter: hue-rotate(158deg) saturate(2) brightness(0.6);
}


/*
.foreground {
	background: url(../img/10years/foreground.png) no-repeat center bottom;
	background-size: contain;
	width: 137vw;
	height: 35vw;
	position: absolute;
	left: 40%;
	bottom: 0%;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
*/

#footer a:hover {
	color: #ffc21a;
}

#footer a, #footer a:active, #footer a:focus, #footer a:visited {
	color: #fff;
}

#footer li.divider {
	color: #fff;
}

.webp .logo {
	background-image: url("../img/logo.png");
}
.no-webp .logo {
	background-image: url("../img/logo.png");
}


.mage .icon{
	background-image: url(../img/demonhunter/icon_mage_inactive.png);
}
.hunter .icon{
	background-image: url(../img/demonhunter/icon_hunter_inactive.png);
	left:51%;
}
.warlock .icon{
	background-image: url(../img/demonhunter/icon_warlock_inactive.png);
}
.assassine .icon{
	background-image: url(../img/demonhunter/icon_assassin_inactive.png);
}
.warrior .icon{
	background-image: url(../img/demonhunter/icon_warrior_inactive.png);
}
.berserk .icon{
	background-image: url(../img/demonhunter/icon_berserk_inactive.png);
}
.demonhunter .icon{
	background-image: url(../img/demonhunter/icon_demonhunter_inactive.png);
}




.webp .mage .image{
	background-image: url(../img/demonhunter/mage_inactive.png);
}
.no-webp .mage .image{
	background-image: url(../img/demonhunter/mage_inactive.png);
}

.webp .hunter .image {
	background-image: url(../img/demonhunter/hunter_inactive.png);	
}
.no-webp .hunter .image {
	background-image: url(../img/demonhunter/hunter_inactive.png);	
}

.webp .warlock .image{
	background-image: url(../img/demonhunter/warlock_inactive.png);
}
.no-webp .warlock .image{
	background-image: url(../img/demonhunter/warlock_inactive.png);
}

.webp .assassine .image {
	background-image: url(../img/demonhunter/assassine_inactive.png);
}
.no-webp .assassine .image {
	background-image: url(../img/demonhunter/assassine_inactive.png);
}

.webp .warrior .image{
	background-image: url(../img/demonhunter/warrior_inactive.png);
}
.no-webp .warrior .image{
	background-image: url(../img/demonhunter/warrior_inactive.png);
}

.webp .berserk .image{
	background-image: url(../img/demonhunter/berserk_inactive.png);
}
.no-webp .berserk .image{
	background-image: url(../img/demonhunter/berserk_inactive.png);
}

.webp .demonhunter .image{
	background-image: url(../img/demonhunter/demonhunter_inactive.png);
}
.no-webp .demonhunter .image{
	background-image: url(../img/demonhunter/demonhunter_inactive.png);
}

.chooseclass {
	text-shadow: 0 3px #220007, 0 0 15px #220007, 0 0 30px #220007;
}

.attributes-header{
    text-shadow: 0 3px #220007, 0 0 15px #220007, 0 0 30px #220007;
}


.char .image::before {
	content: " ";
	position: absolute;
	width: 70%;
	height: 20%;
	background: url(../img/demonhunter/blob.png) no-repeat;
	background-size: 100% 100%;
	bottom: -6%;
	left: 20%;
}


.assassine .image::before {
	bottom: -6%;
	left: 15%;
}

.hunter .image::before {
	bottom: -6%;
	left: -4%;
}
.warlock .image::before {
	bottom: -1%;
	left: 20%;
}

.mage .image::before {
	bottom: -3%;
	left: 20%;
}
.berserk .image::before {
	bottom: -5%;
	left: 15%;
}


.trees-left {
	background: url(../img/demonhunter/fg_left.png) no-repeat;
	background-size: contain;
	width: 58vh;
	height: 100vh;
	position: absolute;
	left: -10%;
	top: 0;
	-webkit-transform: translate(-0%, 0);
	-ms-transform: translate(-0%, 0);
	transform: translate(-0%, 0);
	pointer-events: none;
}

.trees-right {
	background: url(../img/demonhunter/fg_right.png) no-repeat;
	background-size: contain;
	width: 43vh;
	height: 50vh;
	position: absolute;
	right: -8%;
	top: 0;
	-webkit-transform: translate(-0%, 0);
	-ms-transform: translate(-0%, 0);
	transform: translate(-0%, 0);
	pointer-events: none;
}

#footer{
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#180808+0,180808+100&0.04+0,1+100 */
background: -moz-linear-gradient(top,  rgba(24,8,8,0.04) 0%, rgba(24,8,8,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(24,8,8,0.04) 0%,rgba(24,8,8,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(24,8,8,0.04) 0%,rgba(24,8,8,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a180808', endColorstr='#180808',GradientType=0 ); /* IE6-9 */

}

.demonhunter .attribute-bar-inner {
	background-image: url(../img/demonhunter/attribute-inner.png);
}

.assassine .attribute-bar-inner {
	background-image: url(../img/demonhunter/attribute-inner_assassin.png);
}

.hunter .attribute-bar-inner {
	background-image: url(../img/demonhunter/attribute-inner_hunter.png);
}

.berserk .attribute-bar-inner {
	background-image: url(../img/demonhunter/attribute-inner_berserk.png);
}

.mage .attribute-bar-inner {
	background-image: url(../img/demonhunter/attribute-inner_mage.png);
}

.warrior .attribute-bar-inner {
	background-image: url(../img/demonhunter/attribute-inner_warrior.png);
}

.warlock .attribute-bar-inner {
	background-image: url(../img/demonhunter/attribute-inner_warlock.png);
}

.druid .attribute-bar-inner {
	background-image: url(../img/demonhunter/attribute-inner_druid.png);
}

.druid .strength .attribute-bar-inner2 {
	background-image: url(../img/demonhunter/attribute-inner_warrior.png);
}

.druid .dexterity .attribute-bar-inner2 {
	background-image: url(../img/demonhunter/attribute-inner_hunter.png);
}