/*============SECTION CHARACTERS================*/

section.characters-list {
	overflow:hidden;
	padding: 5% 0;
}

 section.characters-list  .container{
	width:100%;
}

 section.characters-list  div.header-block{
	width:60%;
	height:auto;
	padding:0 20% 0 20%;
	text-align:center;
}


 section.characters-list  div.header-block p{
	text-align:center;
}

 section.characters-list .character-change{
	width:100%;
	position: relative;
}

section.characters-list .character-change .character{
	position: relative;
	width:100%;
	height:560px;
}

 section.characters-list .character-change img.character-image{
	width: 40%;
    height: auto;
    position: absolute;
    top: -5%;
    left: 16%;
    opacity: 1;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

 section.characters-list.right .character-change img.character-image{
	left: inherit;
    right: 16%;
}

 section.characters-list .character-change img.character-image.hide-top{
	top: 100%;
	opacity:0;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;		
}
 section.characters-list .character-change img.character-image.hide-left{
	left: 40%;
	opacity:0;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;		
}

section.characters-list .character-change .fog{

}

section.characters-list .character-change .character-description{
	width: 30%;
    position: absolute;
  	bottom: 40px;
    right: 15%;
	opacity:1;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-ms-transition: .4s;
	-o-transition: .4s;
	transition: .4s;		
	z-index:1;
}

 section.characters-list.right .character-change .character-description{
    right: inherit;
	left:15%;
}

 section.characters-list .character-change .character-description.hide{
    bottom: -200px;
    opacity:0;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;	
}
 section.characters-list .character-change .character-description h3,  section.characters-list .character-change .character-description p{
	opacity:1;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-ms-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
 section.characters-list .character-change .character-description h3.hide,  section.characters-list .character-change .character-description p.hide{
    margin-left:-100%;
	margin-right:100%;
    opacity:0;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;	
}

section.characters-list .character-change .character.visible .character-description{
    right: 15%;
	opacity:1;
}

section.characters-list .summon.character-active{
	text-shadow:0 0 20px #ff7b00;
}

section.characters-list ul.array-characters {
    position: absolute;
    top: 38%;
    left: 15%;
}

section.characters-list.right ul.array-characters {
    left: inherit;
	right: 15%;
}

 section.characters-list ul.array-characters li{
	color: #ff7b00;
    font-family: 'exolight';
    font-size: 2em;
    text-transform: uppercase;
    font-weight: normal;
    margin-bottom: 10px;
	cursor: pointer;
	list-style: none;
}

/*=================RESPONSIVE====================*/

@media (max-width: 1120px) {

section.characters-list {
    padding: 10% 0;
}

section.characters-list .character-change .character {
	height: 760px;
}

section.characters-list .character-change img.character-image {
    width: auto;
    height: auto;
	margin-left: -365px;
	left:50%;
	top:10%;
}

section.characters-list.right .character-change img.character-image {
    width: auto;
    height: auto;
	margin-left: -365px;
	left:50%;
	top:10%;
}

 section.characters-list .character-change .fog{
	width: 100%;
    height: 100%;
    position: absolute;
    bottom: -20%;
    background: linear-gradient(0deg, rgba(1,1,1,1), rgba(1,1,1,1), rgba(1,1,1,0));
    z-index: 0;
}

section.characters-list .character-change .character .character-description{
	width: auto;
    right: 15%;
	left: 15%;
}

section.characters-list ul.array-characters {
	top: 0;
    width: 100%;
    left: 0;
    text-align: center;
}

section.characters-list.right ul.array-characters {
    right: 0;
}

section.characters-list ul.array-characters li {
	display: inline-block;
    margin: 0 3%;
}

.carousel-characters {
    width: 80%;
	background-size: auto 100%;
}

section.characters-list {
	background-size: auto 100%;
}

}

@media (max-width: 1024px) {

 section.characters-list div.header-block{
	width: 90%;
    padding: 0 5% 0 5%;
}
}