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

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

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

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


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

 section.characters .character-change{
	width:100%;
	position: relative;
 }
 
section.characters .character-change img.close{
	position: absolute;
	top: 10%;
	right: 15%;
	width: 40px;
	height: 40px;
	z-index: 10;
	cursor: pointer;
 }
 
section.characters .character-change.closed img.close{
	display: none;
 }

section.characters .character-change .character{
	position: relative;
	width:100%;
	height:560px;
	transition: all 0.6s;
}
section.characters .character-change.closed .character{
	height:0px;
	overflow: hidden;
}

 section.characters .character-change img.character-image{
	width:50%;
	height:auto;
	position:absolute;
	top: -5%;
	left:5%;
	opacity:1;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-ms-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;	
}
 section.characters.right .character-change img.character-image{
	left:inherit;
	right:5%;
}
 section.characters .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 .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 .character-change .fog{
	width: 100%;
    height: 100%;
    position: absolute;
	bottom: -565px;
    background: linear-gradient(0deg, rgba(1,1,1,1), rgba(1,1,1,1), rgba(1,1,1,0));
    z-index: 0;
}

 section.characters .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.right .character-change .character-description{
    right: inherit;
	left:15%;

}

 section.characters .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 .character-change .character-description h3,  section.characters .character-change .character-description p{
	opacity:1;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-ms-transition: .4s;
	-o-transition: .4s;
	transition: .4s;
}
 section.characters .character-change .character-description h3.hide,  section.characters .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 .character-change ul.evolutions{
	width: 75%;
	margin:0 0 0 25%;
}
 section.characters .character-change ul.evolutions li:first-child{
	margin-left:-31%;
	margin-right:7%;
}
 section.characters .character-change ul.evolutions li:nth-child(2):before{
	background: url(/webcommon/resources/img/standard-colors/arrow.png) no-repeat;
	background-position: center;
	background-size:100%;
	content:'';
	position:absolute;
	width:20%;
	height:100%;
	left:-28%;
	cursor:auto;
}
 section.characters .character-change ul.evolutions li{
	width: 23%;
	margin:1%;
	display: inline-block;
	cursor: pointer;
	position:relative;
}
 section.characters .character-change ul.evolutions img{
	width:100%;
	height:auto;
}

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

 section.characters .summon.character-active:after{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	box-shadow:inset 0 0 0 4px #ff7b00;
}

/*=================GALLERY CHARACTERS====================*/

 .carousel-characters {
	width:70%;
    margin-left:auto;
	margin-right:auto;
}
 .carousel-characters .slick-track div.slick-slide {
	background-color: #000;
	height:auto;
	position:relative;
	overflow:hidden;
	margin:0 0.2%;
	-webkit-transition: .2s;
	-moz-transition: .2s;
	-ms-transition: .2s;
	-o-transition: .2s;
	transition: .2s;	
	cursor:pointer;
}

 .carousel-characters .slick-track div.slick-center {
	opacity:1;
	z-index:10;
}

 .carousel-characters div img{
	width:100%;
}

 .carousel-characters div.slick-center {
	transform:scale(1.4);
}

 .carousel-characters .slick-arrow {
	background: url(/webcommon/resources/img/standard-colors/arrow.png) 0 center no-repeat;
	background-size: 100% auto;
	width: 6%;
    height: 100%;
    position: absolute;
	top: 0;
	cursor: pointer;
	content:"";
	z-index:2;
	-webkit-transition: .2s;
	   -moz-transition: .2s;
	    -ms-transition: .2s;
	     -o-transition: .2s;
	        transition: .2s;
}

 .carousel-characters .slick-next  {
	right:-8%;
}

 .carousel-characters .slick-prev  {
	left:-8%;
	transform: scaleX(-1);
  	-webkit-transform: scaleX(-1);
}

 .carousel-characters.fighter-casting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	position: relative;
}

.carousel-characters.fighter-casting .summon {
	position: relative;
	width: 120px;
	margin: 10px;
	transition: all 0.6s;
	cursor: pointer;
}

section.characters .character-change:not(.closed) .fighter-casting .summon {
	width: 60px;
	margin: 4px;
}


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

@media (max-width: 1120px) {

section.characters {
    padding: 10% 0;
}
section.characters .character-change .character {
	height: 760px;
}
section.characters .character-change .fog {
    height: calc(100% + 560px);
}
.carousel-characters.fighter-casting .summon {
    width: 100px;
}
section.characters .character-change img.character-image {
    width: auto;
    height: auto;
	margin-left: -365px;
	left:50%;
}

section.characters.right .character-change img.character-image {
	margin-right: -365px;
	right:50%;
	bottom: 0;
	top: inherit;
}

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

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

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

}

@media (max-width: 1024px) {

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