@media screen and (max-width: 1400px) {

	
}
@media screen and (max-width: 1200px) {

	


}
@media screen and (max-width: 1024px) {	
	.swiper-slide {
        display: flex;
        z-index: 3;
        justify-content: center;
        align-items: center;
        flex-direction: column;
		overflow: hidden;
    }
	.swiper-slide > div {
		opacity: 1;
		scale: 1;

	}
	.swiper-slide-active > div {
		opacity: 1;
		scale: 1;
	}
	.char_container {
        height: 80vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .swiper-slide-active .char_img {
        width: 100%;
        height: auto;
        margin-top: 100px;
        transform: scale(1.3);
        transform-origin: left;
        position: relative;
        z-index: 1;
    }
	.char_bg {
		top: 0;
		right: -10%;
		bottom: auto;
	}
	.char_info {
		width: 100%;
		height: auto;
		text-align: center;
		display: flex;
		left: 0;
		bottom: 0;
		position: absolute;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0.75) 75%, rgba(255, 255, 255, 0) 100%);
	}
	.char_name, .char_name img {
		filter: drop-shadow(0px 0px 7px #fff);
	}
	.char_thumbs {
        left: auto;
        bottom: auto;
        margin: 0 auto;
        transform: scale(0.9);
        position: relative;
    }
	.navigation {
		width: 90%;
		}
}

@media screen and (max-width: 820px) {
}
@media screen and (max-width: 780px) {
	
}
@media screen and (max-width: 720px) {
		
	
}
@media screen and (max-width: 540px) {
	.character .title {
		top: 7%;
	}
	.char_container {
		height: 75vh;
	}
	.char_name {
		margin-bottom: 0;
        transform: scale(.5);
        transform-origin: bottom;
	}
	.char_thumbs {
        width: 100%;
        display: flex;
        right: 0;
        bottom: auto;
    }
	.char_thumbs .swiper-slide {
		width: auto;
		height: 18vh;
		max-width: 160px;
		max-height: 250px;
	}
	.swiper-slide-active .char_img {
        margin-top: 0;
        transform: scale(1.4);
        transition: none;
    }
    .char_info {
        font-size: .8em;
    }
}
    
	
@media screen and (max-width: 480px) {
    
}

@media screen and (max-width: 400px) {

}

@media screen and (max-width: 365px) {
   
}