html{width:100%;height:100%;}
body{
padding:0px;
margin:0px;
width:100%;
height:100%;
background-color:#fff;
font-family: 'Roboto', sans-serif;
}
.characters{
	background-image:url(characters/characters-bg.jpg);
	background-repeat:no-repeat;
	background-position:bottom center;
	background-color:#6db5dd;
}
.clear{clear: both;}

a.character-link{
	color:#fff;
	font-weight:800;
	font-size:28px;
	text-decoration:none;
	z-index:99;
	font-family: 'Coda', cursive;
	position:relative;
}
a.character-link:hover{
	color:#fff200;
}
a.character-link::before{
  content: '';
  box-sizing: border-box;
  position: absolute;
  bottom:5px;
  left:0px;
  border-bottom: 2px solid #fff200;
  width: 0;
  height: 0;
  opacity:0;
  animation: border 3s infinite;
}
@keyframes border {
  0% {
    width: 0;
  }
  25% {
    width: 100%;
	opacity:1;
  }
  50% {
    width: 100%;
	opacity:1;
  }
  100% {
    width: 0;
	right:0px;
	left:auto;
	opacity:0;
  }
}
.character img{
	display:block;
	max-height:100%;
}


.characters-container{
	width:65%;
	height:98%;
	margin:auto;
	position:relative;
}
.character1{
	height:55%;
	position:absolute;
	bottom:70px;
	left:0;
	z-index:33;
}
a.character-link1{
	position:absolute;
	bottom:250px;
	left:-100px;
}
/* ---------------------------- */

.character2{
	height:63%;
	position:absolute;
	bottom:10px;
	left:5%;
	z-index:44;
}
a.character-link2{
	position:absolute;
	bottom:20px;
	left:15%;
}
/* ---------------------------- */
.character3{
	height:70%;
	position:absolute;
	bottom:0px;
	left:26%;
	z-index:55;
}
a.character-link3{
	position:absolute;
	bottom:0px;
	left:37%;
}
/* ---------------------------- */
.character4{
	height:70%;
	position:absolute;
	bottom:0px;
	right:30%;
	z-index:66;
}
a.character-link4{
	position:absolute;
	bottom:0px;
	right:37%;
}
/* ---------------------------- */
.character5{
	height:70%;
	position:absolute;
	bottom:5px;
	right:10%;
	z-index:44;
}
a.character-link5{
	position:absolute;
	bottom:40px;
	right:2%;
}
/* ---------------------------- */
.character6{
	height:54%;
	position:absolute;
	bottom:50px;
	right:0;
	z-index:33;
}
a.character-link6{
	position:absolute;
	bottom:250px;
	right:-100px;
}
/* ---------------------------- */
.character7{
	height:80%;
	position:absolute;
	bottom:5%;
	left:18%;
	z-index:22;
}
a.character-link7{
	position:absolute;
	top:250px;
	left:15%;
}
/* ---------------------------- */
.character8{
	height:80%;
	position:absolute;
	bottom:5%;
	right:18%;
	z-index:11;
}
a.character-link8{
	position:absolute;
	top:250px;
	right:10%;
}



.characters-container--details{
	width:90%;
	display:flex;
	height:100%;
	margin:auto;
	justify-content:space-between;
	align-items:center;
}
.character__details-thumb{
	width:30%;
	height:100%;
	position:relative;
}
.character__details-title-rotate{
	background-color:#d1d2d4;
	width:60%;
	height:90%;
	position:absolute;
	top:0px;
	left:0px;
	z-index:22;
}
.order2 .character__details-title-rotate{
	left:auto;
	right:0px;
}
.character__details-title-rotate span{
	display:block;
	transform: rotate(-90deg);
	position:absolute;

	z-index:33;
	font-size:50px;
	text-transform:uppercase;
	color:#fff;
	font-family: 'Coda', cursive;
}
.ct1{
	top:100px;
	right:-90px;
}
.ct2{
	top:35px;
	left:-20px;
}
.ct3{
	top:10px;
	right:-10px;
}
.ct4{
	top:165px;
	left:-145px;
}
.ct5{
	top:135px;
	right:-130px;
}
.ct6{
	top:105px;
	left:-80px;
}
.ct7{
	top:80px;
	right:-70px;
}
.ct8{
	top:85px;
	left:-75px;
}
.character__details-img{
	position:relative;
	z-index:333;
	padding:0 0 0 50px;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}
.order2 .character__details-img{
	padding:0 50px 0 0px;
}
.character__details-img img{
	display:block;
	max-width:100%;
}
.character__details-text{
	width:60%;
	
}
.character__details-text h2{
color:#004681;
font-size:40px;
padding:0 0 10px 0;
margin:0px;
font-family: 'Coda', cursive;
}
.character__details-descr{
color:#004681;
font-size:20px;
padding:0;
}
.character__details-text p{
color:#000;
font-size:18px;
padding:0 0 10px 0;
line-height:1.5;
}
.characters-back{
	position:absolute;
	top:20px;
	right:5%;
	z-index:555;
	display:block;
}
.characters-back img{
	display:block;
	width:50px;
}
.characters-back--left{
	left:5%;
	right:auto;
}
.order2{
	order:2;
}
/* ---------------------------- */

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

.characters-container{
	width:75%;
}

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

.characters-container{
	width:80%;
}
a.character-link7{
	left:7%;
}
a.character-link8{
	right:7%;
}

}
@media screen and (max-height: 780px) {

.characters-container{
	width:65%;
}

}

@media screen and (max-width: 1000px) {
.characters{
	background-attachment: fixed;
}
.characters-container{
	width:90%;
	text-align:center;
	padding:50px 0;
}
.character img{
	display:block;
	max-height:300px;
	margin:auto;
}
.character1, .character2, .character3, .character4, .character5, .character6, .character7, .character8{
	height:auto;
	width:100%;
	position:relative;
	bottom:auto;
	left:auto;
	right:auto;
	margin:auto;
}
a.character-link1, a.character-link2, a.character-link3, a.character-link4, a.character-link5, a.character-link6, a.character-link7, a.character-link8{
	position:relative;
	bottom:auto;
	left:auto;
	right:auto;
	top:auto;
	margin-bottom:40px;
	display:block;
}

a.character-link:hover{
	color:#fff;
}
a.character-link::before{
	display:none;
}



.characters-container--details{
	width:98%;
	flex-wrap:wrap;
	margin:10px auto;
}
.character__details-thumb{
	width:100%;
	height:auto;
}
.character__details-title-rotate{
	background-color:#d1d2d4;
	width:calc(100% - 20px);
	height:auto;
	position:relative;
	top:auto;
	left:auto;
	z-index:22;
	padding:15px 10px;
}
.character__details-title-rotate span{
	display:block;
	transform: rotate(0deg);
	position:relative;
	z-index:33;
	font-size:30px;
	text-transform:uppercase;
}
.ct1, .ct2{
	top:auto;
	left:auto;
	right:auto;
}
.character__details-img{
	position:relative;
	z-index:333;
	padding:0 0 0 0px;
	height:auto;
	display:flex;
	align-items:center;
	justify-content:center;
}
.character__details-img img{
	display:block;
	max-width:90%;
}
.character__details-text{
	width:90%;
	margin:auto;
	
}
.character__details-text h2{
color:#004681;
font-size:40px;
padding:0 0 10px 0;
margin:0px;
font-family: 'Coda', cursive;
}
.character__details-descr{
color:#004681;
font-size:20px;
padding:0;
}
.character__details-text p{
color:#000;
font-size:18px;
padding:0 0 10px 0;
line-height:1.5;
}
.order2{
	order:0;
}
.characters-back--left{
	right:5%;
	left:auto;
}

}