#hud_titan { position: absolute; top: 670px; left: 200px; }
	#hud_hunter { position: absolute; top: 790px; left: 250px; }
	#hud_warlock { position: absolute; top: 910px; left: 300px; }
	
	#hud_class_image_titan { position: absolute; top: 45px;	left: -125px; height: 80px;	width: 175px; background-image: url("data/assets/1.jpg"); background-repeat: no-repeat; background-size: auto; outline: 1px solid #BA3334;	}
	#hud_class_image_hunter { position: absolute; top: 45px; left: -125px; height: 80px; width: 175px; background-image: url("data/assets/2.jpg"); background-repeat: no-repeat; background-size: auto; outline: 1px solid #455D83; }
	#hud_class_image_warlock { position: absolute; top: 45px; left: -125px; height: 80px; width: 175px;	background-image: url("data/assets/3.jpg");	background-repeat: no-repeat; background-size: auto; outline: 1px solid #A89C30; }
		
	#level-box-left_titan  { position: absolute; top: 20px; left: -10px; width: 125px; height: 125px; background: #BA3334; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); display: flex; align-items: center; justify-content: center; }
	#level-box-left_hunter { position: absolute; top: 20px;	left: -10px; width: 125px; height: 125px; background: #455D83; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); display: flex; align-items: center; justify-content: center; }
	#level-box-left_warlock { position: absolute; top: 20px; left: -10px; width: 125px; height: 125px; background: #A89C30; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); display: flex; align-items: center; justify-content: center; }
	
	.level-box-left  { width: 122px; height: 122px; background: #1d2327; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
    .level-box { position: absolute; top: 18px;	left: 0px; width: 130px; height: 130px; background: black; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); display: flex; align-items: center; justify-content: center; color: white; text-shadow: 2px 1px black; }
		
	#level-box_titan  { width: 120px; height: 120px; background: orange; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); display: flex;	align-items: center; justify-content: center; }
	#level-box_hunter  { width: 120px; height: 120px; background: orange; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); display: flex; align-items: center; justify-content: center; }
	#level-box_warlock  { width: 120px;	height: 120px; background: orange; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); display: flex; align-items: center; justify-content: center; }
	
	.level-box-2  { width: 110px; height: 110px; background: grey; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); display: flex; align-items: center; justify-content: center; }
	.level-box-3 { width: 107px; height: 107px; background: #292929; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); display: flex; align-items: center; justify-content: center; }
   
	#level_titan { position: absolute; font-size: 35px; font-weight: 500; top: 28px; color: white; }
	#level_hunter { position: absolute; font-size: 35px; font-weight: 500; top: 28px; color: white; }
	#level_warlock { position: absolute; font-size: 35px; font-weight: 500; top: 28px; color: white; }
	
	#exp_titan { position: absolute; top: 63px; font-size: 14px; color: white; }
	#exp_hunter { position: absolute; top: 63px; font-size: 14px; color: white; }
	#exp_warlock { position: absolute; top: 63px; font-size: 14px; color: white; }
	
	.hp-box-1 {	position: absolute;	top: 54px; left: 103px; width: 505px; height: 27px; clip-path: polygon(0% 0%, 478px 0%, 100% 100%, 27px 100%); background: grey; display: flex; align-items: center; justify-content: center; z-index: 2;}
	.hp-box-2 { width: 500px; height: 25px; clip-path: polygon(0% 0%, 475px 0%, 100% 100%, 25px 100%); background: #1d2327; }
	
	#hp-bar_titan {	width: 500px; height: 25px; clip-path: polygon(0% 0%, 475px 0%, 100% 100%, 25px 100%); background: linear-gradient(90deg,rgba(253, 29, 29, 0.90) 25%, rgba(252, 176, 69, 0.90) 100%); }
	#hp-bar_hunter {	width: 500px; height: 25px; clip-path: polygon(0% 0%, 475px 0%, 100% 100%, 25px 100%); background: linear-gradient(90deg,rgba(253, 29, 29, 0.90) 25%, rgba(252, 176, 69, 0.90) 100%); }
	#hp-bar_warlock {	width: 500px; height: 25px; clip-path: polygon(0% 0%, 475px 0%, 100% 100%, 25px 100%); background: linear-gradient(90deg,rgba(253, 29, 29, 0.90) 25%, rgba(252, 176, 69, 0.90) 100%); }

	#hp_titan {	position: absolute; width: 485px; height: 20px; left: 5px; top: 5px; color: white; text-shadow: 2px 1px black; font-size: 9px;	text-align: center;	z-index: 5;	font-size: 15px; }
	#hp_hunter { position: absolute; width: 485px; height: 20px; left: 5px; top: 5px; color: white; text-shadow: 2px 1px black;	font-size: 9px;	text-align: center;	z-index: 5;	font-size: 15px; }
	#hp_warlock { position: absolute; width: 485px; height: 20px; left: 5px; top: 5px; color: white; text-shadow: 2px 1px black; font-size: 9px;	text-align: center;	z-index: 5;	font-size: 15px; }

	.mp-box-1 { position: absolute; top: 84px; left: 108px; width: 500px; height: 22px; clip-path: polygon(22px 0%, 100% 0%, 478px 100%, 0% 100%); background: grey; display: flex; align-items: center; justify-content: center;  z-index: 2;}
	.mp-box-2 { width: 495px; height: 20px; clip-path: polygon(20px 0%, 100% 0%, 475px 100%, 0% 100%); background: #1d2327; }
	
	#mp-bar_titan  { width: 495px; height: 20px; clip-path: polygon(20px 0%, 100% 0%, 475px 100%, 0% 100%); background: linear-gradient(90deg,rgba(11, 45, 79, 0.9) 35%, rgba(0, 212, 255, 0.9) 100%); }
	#mp-bar_hunter  { width: 495px; height: 20px; clip-path: polygon(20px 0%, 100% 0%, 475px 100%, 0% 100%); background: linear-gradient(90deg,rgba(11, 45, 79, 0.9) 35%, rgba(0, 212, 255, 0.9) 100%); }
	#mp-bar_warlock  { width: 495px; height: 20px; clip-path: polygon(20px 0%, 100% 0%, 475px 100%, 0% 100%); background: linear-gradient(90deg,rgba(11, 45, 79, 0.9) 35%, rgba(0, 212, 255, 0.9) 100%); }
	
	#mp_titan {	position: absolute;	width: 485px; height: 20px; left: 0px; top: 2px; color: white; text-shadow: 2px 1px black;	font-size: 9px;	text-align: center;	z-index: 5;	font-size: 15px; }
	#mp_hunter {	position: absolute;	width: 485px; height: 20px; left: 0px; top: 2px; color: white; text-shadow: 2px 1px black;	font-size: 9px;	text-align: center;	z-index: 5;	font-size: 15px; }
	#mp_warlock {	position: absolute;	width: 485px; height: 20px; left: 0px; top: 2px; color: white; text-shadow: 2px 1px black;	font-size: 9px;	text-align: center;	z-index: 5;	font-size: 15px; }
	
	.special-box-1  { position: absolute; top: 107px; left: 95px; width: 150px; height: 12px; background: grey; clip-path: polygon(12px 0%, 100% 0%, 138px 100%, 0% 100%); display: flex; align-items: center; justify-content: center; }
	.special-box-2 { width: 145px; height: 10px; clip-path: polygon(10px 0%, 100% 0%, 135px 100%, 0% 100%); background: #1d2327; }
	
	#special_titan  { width: 145px; height: 10px; clip-path: polygon(10px 0%, 100% 0%, 135px 100%, 0% 100%); background: linear-gradient(90deg,rgba(253, 171, 29, 0.75) 25%, rgba(252, 209, 69, 0.75) 100%); }
	#special_hunter { width: 145px; height: 10px; clip-path: polygon(10px 0%, 100% 0%, 135px 100%, 0% 100%); background: linear-gradient(90deg,rgba(253, 171, 29, 0.75) 25%, rgba(252, 209, 69, 0.75) 100%); }
	#special_warlock { width: 145px; height: 10px; clip-path: polygon(10px 0%, 100% 0%, 135px 100%, 0% 100%); background: linear-gradient(90deg,rgba(253, 171, 29, 0.75) 25%, rgba(252, 209, 69, 0.75) 100%); }
	
	#special_name {	position: absolute; width: 145px; height: 10px; left: 0px; top: 1px; color: white; text-shadow: 2px 1px black;	font-size: 9px;	text-align: center;	z-index: 5;	}	
	
	#skills_titan { position: absolute; top: 0px; left: 100px; }
	#skills_hunter { position: absolute; top: 0px; left: 50px; }
	#skills_warlock { position: absolute; top: 0px; left: 0px; }
	.skill_border { position: absolute; top: 60px; left: 450px; height: 36px; width: 595px; border-top: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(255, 255, 255, .3); border-right: 1px solid rgba(255, 255, 255, .3);  z-index: 1; }
	
	#skill_titan_1 { position: absolute; cursor: pointer; top: 50px; left: 660px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .5); background-color: #1d2327; background-image: url("data/skills/titan_skill_1.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }
	#skill_titan_2 { position: absolute; cursor: pointer; top: 50px; left: 730px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .5); background-color: #1d2327; background-image: url("data/skills/titan_skill_2.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }
	#skill_titan_3 { position: absolute; cursor: pointer; top: 50px; left: 800px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .5); background-color: #1d2327; background-image: url("data/skills/titan_skill_3.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }
	#skill_titan_4 { position: absolute; cursor: pointer; top: 50px; left: 910px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .5); background-color: #1d2327; background-image: url("data/skills/titan_skill_4.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }
	#skill_titan_5 { position: absolute; cursor: pointer; top: 50px; left: 980px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .5); background-color: #1d2327; background-image: url("data/skills/potion.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }
	
	#skill_hunter_1 { position: absolute; cursor: pointer; top: 50px; left: 660px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .5); background-color: #1d2327; background-image: url("data/skills/hunter_skill_1.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }
	#skill_hunter_2 { position: absolute; cursor: pointer; top: 50px; left: 730px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .5); background-color: #1d2327; background-image: url("data/skills/hunter_skill_2.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }
	#skill_hunter_3 { position: absolute; cursor: pointer; top: 50px; left: 800px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .5); background-color: #1d2327; background-image: url("data/skills/hunter_skill_3.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }
	#skill_hunter_4 { position: absolute; cursor: pointer; top: 50px; left: 910px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .5); background-color: #1d2327; background-image: url("data/skills/hunter_skill_4.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }
	#skill_hunter_5 { position: absolute; cursor: pointer; top: 50px; left: 980px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .3); background-color: #1d2327; background-image: url("data/skills/potion.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }
	
	#skill_warlock_1 { position: absolute; cursor: pointer; top: 50px; left: 660px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .5); background-color: #1d2327; background-image: url("data/skills/warlock_skill_1.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }
	#skill_warlock_2 { position: absolute; cursor: pointer; top: 50px; left: 730px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .5); background-color: #1d2327; background-image: url("data/skills/warlock_skill_2.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }
	#skill_warlock_3 { position: absolute; cursor: pointer; top: 50px; left: 800px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .5); background-color: #1d2327; background-image: url("data/skills/warlock_skill_3.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }
	#skill_warlock_4 { position: absolute; cursor: pointer; top: 50px; left: 910px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .5); background-color: #1d2327; background-image: url("data/skills/warlock_skill_4.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }
	#skill_warlock_5 { position: absolute; cursor: pointer; top: 50px; left: 980px; height: 55px; width: 55px; border: 1px solid rgba(255, 255, 255, .5); background-color: #1d2327; background-image: url("data/skills/potion.png"); background-repeat: no-repeat; background-size: contain; z-index: 2; }