body{
	background-color: black;
}

.logo{
	width: 405px;
	height: 100px;
	z-index: 20;
	margin-left: 113px;
	margin-top: -100px;
	animation-name: header;
	animation-delay: 2.4s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
}

/*Меню в шапке*/
.menu{
	margin-top: 35px;
	font: normal small-caps 18px 'Noto Sans', serif;
	-webkit-animation-fill-mode: forwards;
	margin-left: 30px;
}

.menu a{
	color: #d1ffeb;
	text-decoration-line: none;
}

.menu a:hover{
	color: red;
	text-decoration-line: none;
}

.menu p{
	color: #d1ffeb;
	text-decoration-line: none;
	margin-top: 10px;
}

.menu-1{
	margin-left: 650px;
	animation-name: header;
	animation-delay: 0.4s;
	animation-duration: 1s;
}

.menu-2{
	animation-name: header;
	animation-delay: 0.8s;
	animation-duration: 1s;
}

.menu-3{
	animation-name: header;
	animation-delay: 1.2s;
	animation-duration: 1s;
}

.menu-4{
	animation-name: header;
	animation-delay: 1.6s;
	animation-duration: 1s;
}

.menu-5{
	animation-name: header;
	animation-delay: 2s;
	animation-duration: 1s;
}

.menu-6{
	animation-name: header;
	animation-delay: 3.5s;
	animation-duration: 1s;
}

/*Начало кода выпадающего меню*/
ul {
    list-style: none;
    display: block;
}

ul:after {
    display: block;
    float: none;
    content: ' ';
    clear: both;
}

ul.drop-down_list > li {
    float: left;
    position: relative;
}

ul.drop-down_list > li > a {
    display: block;
    padding: 10px;
    text-decoration: none;
    text-decoration-line: none;
}
 
ul.drop-down_menu {
    position: absolute;
    width: 240px;
    top: 37px;
    left: -40px;
    display: none;
}

ul.drop-down_menu > li {
    display: block;
    position: relative;
    z-index: 20;
}

ul.drop-down_menu li {
    position: relative;
    z-index: 20;
}

ul.drop-down_menu > li > a {
    display: block;
    text-decoration: none;
    padding: 10px;
}

ul.drop-down_menu > li > a:hover {
    text-decoration: none;
}

ul.drop-down_list > li:hover > ul.drop-down_menu {
    display: block;
}
/*Конец кода выпадающего меню*/

.background{
	width: 1430px;
	height: 820px;
	position: absolute;
	box-shadow: 0 -10px 0 10px;
	z-index: 1;
}

.background_effect{
	width: 1430px;
	height: 820px;
	position: absolute;
	box-shadow: 0 -10px 0 10px;
	z-index: 3;
	opacity: 0;
	animation-name: background_effect;
	animation-delay: 5s;
	animation-duration: 1s;
}

.head{
	display: block;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	max-width: 1430px;
}

.inside{
	position: relative;
	display: block;
	height: 820px;
	width: 1430px;
	box-shadow: inset 0 10px 70px 30px black;
	z-index: 5;
}

.opacity{
	opacity: 0;
}

/*Герои*/
.char{
	position: absolute;
	animation-direction: normal;
	-webkit-animation-fill-mode: forwards;
}

.char_1{
	width: 890px;
	height: 508px;
	margin-top: 310px;
	left: 260px;
	z-index: 10;
	animation-name: char;
	animation-delay: 0s;
	animation-duration: 1s;
}

.char_2{
	width: 530px;
	height: 508px;
	margin-top: 311px;
	left: 60px;
	z-index: 9;
	animation-name: char;
	animation-delay: 0.4s;
	animation-duration: 1s;
}

.char_3{
	width: 450px;
	height: 350px;
	margin-top: 420px;
	left: 660px;
	z-index: 9;
	animation-name: char;
	animation-delay: 1.2s;
	animation-duration: 1s;
}

.char_4{
	width: 580px;
	height: 450px;
	margin-top: 250px;
	left: 430px;
	z-index: 8;
	animation-name: char;
	animation-delay: 0.8s;
	animation-duration: 1s;
}

.char_5{
	width: 725px;
	height: 600px;
	margin-top: 65px;
	left: 130px;
	z-index: 7;
	animation-name: char;
	animation-delay: 1.2s;
	animation-duration: 1s;
}
/*Герои*/

/*Анимация*/
@keyframes char {
	0%   { top: 10px; }
	100% { top: 0; }
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes header {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes background_effect {
    0%   { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}
/*Анимация*/