body {height: 100%; width: 100%; margin: 0px; padding: 0px; font-family: Times, "Times New Roman", "serif"; background-color: #000;color:#FFF;} 
* {
	box-sizing: border-box;
}
.isHover{
	transition:opacity .3s ease-in-out;
	-webkit-transition:opacity .3s ease-in-out;
	-moz-transition:opacity .3s ease-in-out;
	-ms-transition:opacity .3s ease-in-out;
}
.isHover:hover{
	opacity:.6;
	cursor:pointer;
}

.characterPage {
	background: #000 url("../img/character/character_bg.jpg") no-repeat center top fixed;
	background-size: auto 100%;
	overflow-x: hidden;
    font-size:28px;
    line-height:31px;
}
.characterWrapper {
	max-width: 2000px;
	position: relative;
	margin: 0 auto;
}
.characterMenu {
	position: absolute;
	top: 160px;
	left: 25px;
	width: 100px;
	z-index: 10000;
}
.characterMenuGroup {
	position: absolute;	
}
.characterMenu img {
	display: block;
	width: 80px;
}
.disableClick{
    pointer-events: none;
}
.characterTitle {
	margin: 5% auto 0;

	display: block;

}
.characterTitle img{

	height: 126px;
	width: auto;
}
.dwarfBtn {
	margin-top: -10px;
}
.sorceressBtn {
	margin-top: 13px;
}
@media screen and (max-width: 768px){
	.characterPage {
		font-size:20px;
		line-height:24px;
	}
}
@media screen and (max-width: 750px){
	.characterTitle {
		width: 45%;
	}
}
@media screen and (max-width: 550px){
	.characterMenu {
		display: none;
	}
}
/*GENERAL SETTINGS FOR CHARACTERS */
.characterSection {
	width: 70%;
	margin: 0 auto;
	position: relative;
	padding-top: 50px;
/*	margin-top: -50px;*/
}
.classText {
	width: 47%;
}
.classText img {
	width: 25%;
	margin-bottom: 2%;
}
.characterFrames {
	width: 40%;
	margin-top: 3%;
}
.characterFrames img {
	height: 160px;
}

/*colors for variations*/
.lightGrey { background-color: #bdbdbd }
.rose { background-color: #ff787d }
.mustard { background-color: #ffc162}
.darkBrown { background-color: #32231F }
.lightBrown { background-color: #ac8c71 }
.magenta { background-color: #a00087 }
.lightBlue { background-color: #996d9b }
.lightRed { background-color: #ff6a6e }
.avocado { background-color: #646956 }
.lightPurple { background-color: #6d184a }
.cyan { background-color: #315d7a }
.lightGreen { background-color: #9ac871 }
.darkGreen { background-color: #004e00 }
.red { background-color: #ff6a6e }
.orange { background-color: #c57534 }
.darkGrey { background-color: #44433f }
.lightYellow { background-color: #9a893e }
.lightCyan { background-color: #4a9a89 }
.darkRed { background-color: #773238 }
.colorVariations {
	position: relative;
	left: 18%;
	top: 25px;
}
.cvTitle {
	width: 12%;
	margin-left: 2%;
}
.colorVariationsBGBox {
	background: transparent url("../img/character/variations_box.png") no-repeat left top;
	background-size: 100% auto;
	width: 250px;
	height: 78px;
}
.colorVariationsBGBox div {
    width: 33px;
    height: 33px;
    display: inline-block;
    margin-left: 2px;
    position: relative;
    top: 23px;
    left: 36px;
	cursor: pointer;
}
.colorVariationsBGBox div:before {
	content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.4;
    background-image: url('../img/character/bg_colorvariations.jpg');
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}
@media screen and (max-width: 1650px){
	.colorVariations {
		left: 15%;
	}
	.characterFrames {
		width: 35%;
	}
	.characterFrames img {
		height: 130px;
	}
}
@media screen and (max-width: 1450px){
	.colorVariations {
		left: 10%;
	}
	.characterFrames {
		width: 40%;
	}
	.characterFrames img {
		height: 115px;
	}
}
@media screen and (max-width: 1110px){
	.colorVariations {
		left: 6%;
	}
	.characterFrames img {
		height: 100px;
	}
}
@media screen and (max-width: 967px){
	.characterSection {
		width: 55%;
	}
	.classText {
		width: 100%;
	}
	.characterFrames {
		width: 90%;
	}
	.characterFrames img {
		height: 140px;
	}
	.cvTitle {
		width: 35%;
		margin-left: 5%;
	}
	.colorVariations {
		left: 0;
	}
}
@media screen and (max-width: 768px){
	.characterSection {
		width: 45%;
	}
	.characterFrames {
		width: 100%;
	}
	.characterFrames img {
		height: 100px;
	}
	.colorVariations {
		left: 0;
	}
}
@media screen and (max-width: 550px){
	.characterSection {
		width: 90%;
	}
	.characterFrames {
		width: 100%;
	}
	.characterFrames img {
		height: 140px;
	}
}
/*FIGHTER*/
.fighterLg {
	position: absolute;
	right: 0;
	top: 0;
	width: 45.7%;
}
.surroundMiniCharacter {
 	width: 20%;
    max-width: 350px;
    overflow: hidden;
    position: absolute;
    bottom: -65%;
    left: 20%;

}
.surroundMiniCharacter img {
	height: auto;
	width: 100%;
	display:block
}
#fighter .surroundMiniCharacter{
    width:19.2%
}
.miniCharacterFighter {
	height: 100%;
	width: auto;
	background: url("../img/character/fighter/fighter_color_bar.png") no-repeat;
	background-position: 0 0;
	background-size: auto 100%;	
}


/*AMAZON*/
#amazon {
	margin-top: 10%;
}
.amazonLg {
	position: absolute;
	left: 0;
	top: 0;
	width: 26.7%;
}
.miniCharacterAmazon {
	height: 100%;
	width: auto;
	background: url("../img/character/amazon/amazon_color_bar.png") no-repeat;
	background-position: 0 0;
	background-size: auto 100%;	
}
.wrapperForContentPositionOnRightHalf {
	position: relative;
	left: 40%;
}
#amazon .surroundMiniCharacter{
	width:15.1%
}
.wrapperForContentPositionOnRightHalf .surroundMiniCharacter {
    left: -20%
}
.wrapperForContentPositionOnRightHalf .colorVariations {
	left: 0;
}
/*WIZARD*/
#wizard {
	margin-top: 10%;
}
.wizardLg {
	position: absolute;
	right: 0;
	top: 0;
	width: 41.7%;
}
.miniCharacterWizard {
	height: 100%;
	width: auto;
	background: url("../img/character/wizard/wizard_color_bar.png") no-repeat;
	background-position: 0 0;
	background-size: auto 100%;	
}
#wizard  .surroundMiniCharacter{
	width:13.5%
}
/*ELF*/
#elf {
	margin-top: 10%;
}
#elfTitle {
	width: 11%;
}
.elfLg {
	position: absolute;
	left: 0;
	top: 0;
	width: 34.3%;
}
.miniCharacterElf {
	height: 100%;
	width: auto;
	background: url("../img/character/elf/elf_color_bar.png") no-repeat;
	background-position: 0 0;
	background-size: auto 100%;	
}
#elf .surroundMiniCharacter{
	width:15.6%;
	left:-17%
}
/*Dwarf*/
#dwarf {
	margin-top: 10%;
}
/*
#elfTitle {
	width: 11%;
}
*/
.dwarfLg {
	position: absolute;
	right: 0;
	top: 0;
	width: 36%;
}
.miniCharacterDwarf {
	height: 100%;
	width: auto;
	background: url("../img/character/dwarf/dwarf_color_bar.png") no-repeat;
	background-position: 0 0;
	background-size: auto 100%;	
}
#dwarf .surroundMiniCharacter{
	bottom: 6%;
	width:21.5%
}
/*Sorceress*/
#sorceress {
	margin: 10% auto;
}
#sorceressTitle {
	width: 30%;
}
.sorceressLg {
	position: absolute;
	left: 0;
	top: 0;
	width: 28.7%;
}
.miniCharacterSorceress {
	height: 100%;
	width: auto;
	background: url("../img/character/sorceress/sorceress_color_bar.png") no-repeat;
	background-position: 0 0;
	background-size: auto 100%;	
}
#sorceress .surroundMiniCharacter{
	width:16.7%;
	left:-17%
}
@media screen and (max-width: 1650px){
	.surroundMiniCharacter {
		left: 25%;
	}
    #fighter .surroundMiniCharacter{
        width:22.3%
    }
    #amazon .surroundMiniCharacter{
        width:17.6%
    }
    #wizard .surroundMiniCharacter{
        width:15.7%
    }
    #elf .surroundMiniCharacter{
        width:18.1%;
        left:-18%
    }
    #dwarf .surroundMiniCharacter{
        width:24.9%
    }
    #sorceress .surroundMiniCharacter{
        width:15.7%
    }
}
@media screen and (max-width: 1450px){
	.surroundMiniCharacter {
		left: 35%;
	}
}
@media screen and (max-width: 1200px){
	.fighterLg {
		width: 50%;
		top: 8%;
	}
	.amazonLg {
		width: 30%;
	}
	.wizardLg {
		width: 50%;
	}
	.elfLg {
		width: 42%;
	}
	.dwarfLg {
		width: 38%;
	}
	.sorceressLg {
		width: 36%;
	}
	.surroundMiniCharacter {
		left: 30%;
	}
    #fighter .surroundMiniCharacter{
        width:30.7%
    }
    #amazon .surroundMiniCharacter{
        width:24.2%
    }
    #wizard .surroundMiniCharacter{
        width:21.6%
    }
    #elf .surroundMiniCharacter{
        width:24.9%;
        left:-27%
    }
    #dwarf .surroundMiniCharacter{
        width:34.3%
    }
    #sorceress .surroundMiniCharacter{
        width:26.6%;
        left:-27%
    }
}
@media screen and (max-width: 967px){
	.fighterLg, .wizardLg, .dwarfLg {
		position: static;
		width: 70%;
		top: 0;
		display: block;
		margin: 3% auto 0;
	}
	#amazon, #wizard, #elf, #dwarf, #sorceress {
		margin-top: 0;
	}
	.amazonLg, .elfLg, .sorceressLg {
		position: static;
		width: 50%;
		top: 0;
		display: block;
		margin:0 auto;
	}
	.elfLg {
		width: 60%;
	}
	.surroundMiniCharacter {
		left: 65%;
		top: -120px;
		width: 50%;
		position: relative;
	}
	.wrapperForContentPositionOnRightHalf {
		position: static;
		left: 0%;
	}
	.wrapperForContentPositionOnRightHalf .surroundMiniCharacter {
    	left: -45%;
	}
	.wrapperForContentPositionOnRightHalf .colorVariations {
		left: 45%;
	}
}
@media screen and (max-width: 768px){
	#amazon, #wizard, #elf, #dwarf, #sorceress {
		margin-top: 8%;
	}
    .fighterLg{width:91.4%}
    .amazonLg{width:53.5%}
    .wizardLg{width:83.3%}
    .elfLg{width:68.6%}
    .dwarfLg{width:72%}
    .sorceressLg{width:57.4%}
	#fighter .surroundMiniCharacter, #amazon .surroundMiniCharacter, #wizard .surroundMiniCharacter, #elf .surroundMiniCharacter, #dwarf .surroundMiniCharacter, #sorceress .surroundMiniCharacter {
		left: 0;
		top: 0;
		width: 60%;
		position: relative;
		margin: 3% auto;
	}
    #fighter .surroundMiniCharacter{width:48%}
    #amazon .surroundMiniCharacter{width:37.8%}
    #wizard .surroundMiniCharacter{width:33.7%}
    #elf .surroundMiniCharacter{width:38.9%}
    #dwarf .surroundMiniCharacter{width:53.6%}
    #sorceress .surroundMiniCharacter{width:41.5%}
	.wrapperForContentPositionOnRightHalf .surroundMiniCharacter {
    	left: 0;
	}
	.wrapperForContentPositionOnRightHalf .colorVariations {
		left: 0;
	}
}