/* Стили: начало */
*{
    padding: 0;
    margin: 0;
}
.all_page {
    animation: manifestation 3s 7s forwards, visibility 0.1s 6.8s forwards;
    opacity: 0;
    visibility: hidden;
    width: 1920px;
    height: 100%;
}
.bg {
    position: absolute;
    background-image: url(../imgs/bg2.jpg);
    background-size:cover;
    background-attachment: fixed;
    width: 1920px;
    height: 100%;
}
.shapka {
    animation: shapka 1s 8s forwards;
    visibility: hidden;
    z-index: 2;
    display: flex;
    align-items: center;
    position: relative;
    width: 1920px;
    height: 60px;
    background: rgba(0,0,0,.5);
    border-bottom: 3px solid red;
}
.city {
    animation: manifestation 1s 8.75s forwards, visibility 0.1s 8.75s forwards, translateX_ci_and_del 1s 8.75s forwards;
    opacity: 0;
    visibility: hidden;
    display: flex;
    margin-left: 20px;
    align-items: center;
    justify-content: center;
    position: absolute;
    background: blue;
    width: 90px;
    height: 36px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.city a {
    text-align: center;
    margin-top: 9px;
    width: 100%;
    height: 100%;
}
.delivery {
    animation: manifestation 2s 8.5s forwards, visibility 0.1s 8.5s forwards, translateX_ci_and_del 1s 8.5s forwards;
    opacity: 0;
    visibility: hidden;
    margin-left: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    background: blue;
    width: 90px;
    height: 36px;
    vertical-align: middle;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.delivery a {
    text-align: center;
    margin-top: 9px;
    width: 100%;
    height: 100%;
}
.main_page {
    animation: manifestation 2s 8.5s forwards, visibility 0.1s 8.5s forwards, translateX_ci_and_del 1s 8.5s forwards;
    opacity: 0;
    visibility: hidden;
    margin-left: 905px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    background: blue;
    width: 110px;
    height: 36px;
    vertical-align: middle;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.main_page a {
    text-align: center;
    margin-top: 9px;
    width: 100%;
    height: 100%;
}
.link {
    color: black;
    text-decoration: none;
    font-family: 'comic sans ms', serif;
}
.link:hover {
    text-decoration: underline;
}
.main {
    width: 1920px;
    height: 912px;
}
.top {
    z-index: 1;
    position: relative;
    margin-top: -63px;
    height: 360px;
    width: 1920px;
}
.bot {
    position: relative;
    margin: 0 auto;
    height: 426px;
    width: 1920px;
}
.manga_1 {
    animation: manifestation 2s 9.5s forwards, visibility 0.1s 9.5s forwards, translateX_manga 2s 9.5s forwards;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-left: 200px;
    height: 340px;
    width: 240px;
}
.manga_title_1 {
    opacity: 0;
    display: flex;
    background: rgba(0,0,0,.75);
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 340px;
    width: 240px;
}
.manga_title_1:hover {
    animation: manifestation 0.5s forwards;
}
.manga_title_1:not(:hover) {
    animation: rev_manifestation 0.5s forwards;
}
.manga_title_1 p{
    margin-top: 58px;
}
.manga_title_1 a{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-decoration: none;
    color: white;
    text-align: center;
    height: 340px;
    width: 240px;
    font-size: 18px;
    font-family: 'comic sans ms', serif;
}
.manga_2 {
    animation: manifestation 2s 9.25s forwards, visibility 0.1s 9.25s forwards, translateX_manga 2s 9.25s forwards;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-left: 520px;
    height: 340px;
    width: 240px;
}
.manga_title_2 {
    text-align: center;
    background: rgba(0,0,0,.75);
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 340px;
    width: 240px;
}
.manga_title_2:hover {
    animation: manifestation 0.5s forwards;
}
.manga_title_2:not(:hover) {
    animation: rev_manifestation 0.5s forwards;
}
.manga_title_2 p{
    margin-top: 45.5px;
}
.manga_title_2 a{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-decoration: none;
    color: white;
    text-align: center;
    height: 340px;
    width: 240px;
    font-size: 18px;
    font-family: 'comic sans ms', serif;
}
.manga_3 {
    animation: manifestation 2s 9s forwards, visibility 0.1s 9s forwards, translateX_manga 2s 9s forwards;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-left: 840px;
    height: 340px;
    width: 240px;
}
.manga_title_3 {
    text-align: center;
    background: rgba(0,0,0,.75);
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 340px;
    width: 240px;
}
.manga_title_3:hover {
    animation: manifestation 0.5s forwards;
}
.manga_title_3:not(:hover) {
    animation: rev_manifestation 0.5s forwards;
}
.manga_title_3 p{
    margin-top: 48px;
}
.manga_title_3 a{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-decoration: none;
    color: white;
    text-align: center;
    height: 340px;
    width: 240px;
    font-size: 18px;
    font-family: 'comic sans ms', serif;
}
.manga_4 {
    animation: manifestation 2s 8.75s forwards, visibility 0.1s 8.75s forwards, translateX_manga 2s 8.75s forwards;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-left: 1160px;
    height: 340px;
    width: 240px;
}
.manga_title_4 {
    text-align: center;
    background: rgba(0,0,0,.75);
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 340px;
    width: 240px;
}
.manga_title_4:hover {
    animation: manifestation 0.5s forwards;
}
.manga_title_4:not(:hover) {
    animation: rev_manifestation 0.5s forwards;
}
.manga_title_4 p{
    margin-top: 58px;
}
.manga_title_4 a{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-decoration: none;
    color: white;
    text-align: center;
    height: 340px;
    width: 240px;
    font-size: 18px;
    font-family: 'comic sans ms', serif;
}
.manga_5 {
    animation: manifestation 2s 8.5s forwards, visibility 0.1s 8.5s forwards, translateX_manga 2s 8.5s forwards;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-left: 1480px;
    height: 340px;
    width: 240px;
}
.manga_title_5 {
    text-align: center;
    background: rgba(0,0,0,.75);
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 340px;
    width: 240px;
}
.manga_title_5:hover {
    animation: manifestation 0.5s forwards;
}
.manga_title_5:not(:hover) {
    animation: rev_manifestation 0.5s forwards;
}
.manga_title_5 p{
    margin-top: 55px;
}
.manga_title_5 a{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-decoration: none;
    color: white;
    text-align: center;
    height: 340px;
    width: 240px;
    font-size: 18px;
    font-family: 'comic sans ms', serif;
}
.manga_6 {
    animation: manifestation 2s 10.75s forwards, visibility 0.1s 10.75s forwards, translateX_manga 2s 10.75s forwards;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-left: 200px;
    height: 340px;
    width: 240px;
}
.manga_title_6 {
    text-align: center;
    background: rgba(0,0,0,.75);
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 340px;
    width: 240px;
}
.manga_title_6:hover {
    animation: manifestation 0.5s forwards;
}
.manga_title_6:not(:hover) {
    animation: rev_manifestation 0.5s forwards;
}
.manga_title_6 p{
    margin-top: 45px;
}
.manga_title_6 a{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-decoration: none;
    color: white;
    text-align: center;
    height: 340px;
    width: 240px;
    font-size: 18px;
    font-family: 'comic sans ms', serif;
}
.manga_7 {
    animation: manifestation 2s 10.5s forwards, visibility 0.1s 10.5s forwards, translateX_manga 2s 10.5s forwards;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-left: 520px;
    height: 340px;
    width: 240px;
}
.manga_title_7 {
    text-align: center;
    background: rgba(0,0,0,.75);
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 340px;
    width: 240px;
}
.manga_title_7:hover {
    animation: manifestation 0.5s forwards;
}
.manga_title_7:not(:hover) {
    animation: rev_manifestation 0.5s forwards;
}
.manga_title_7 p{
    margin-top: 26px;
}
.manga_title_7 a{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-decoration: none;
    color: white;
    text-align: center;
    height: 340px;
    width: 240px;
    font-size: 18px;
    font-family: 'comic sans ms', serif;
}
.manga_8 {
    animation: manifestation 2s 10.25s forwards, visibility 0.1s 10.25s forwards, translateX_manga 2s 10.25s forwards;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-left: 840px;
    height: 340px;
    width: 240px;
}
.manga_title_8 {
    text-align: center;
    background: rgba(0,0,0,.75);
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 340px;
    width: 240px;
}
.manga_title_8:hover {
    animation: manifestation 0.5s forwards;
}
.manga_title_8:not(:hover) {
    animation: rev_manifestation 0.5s forwards;
}
.manga_title_8 p{
    margin-top: 28px;
}
.manga_title_8 a{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-decoration: none;
    color: white;
    text-align: center;
    height: 340px;
    width: 240px;
    font-size: 18px;
    font-family: 'comic sans ms', serif;
}
.manga_9 {
    animation: manifestation 2s 10s forwards, visibility 0.1s 10s forwards, translateX_manga 2s 10s forwards;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-left: 1160px;
    height: 340px;
    width: 240px;
}
.manga_title_9 {
    text-align: center;
    background: rgba(0,0,0,.75);
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 340px;
    width: 240px;
}
.manga_title_9:hover {
    animation: manifestation 0.5s forwards;
}
.manga_title_9:not(:hover) {
    animation: rev_manifestation 0.5s forwards;
}
.manga_title_9 p{
    margin-top: 45px;
}
.manga_title_9 a{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-decoration: none;
    color: white;
    text-align: center;
    height: 340px;
    width: 240px;
    font-size: 18px;
    font-family: 'comic sans ms', serif;
}
.manga_10 {
    animation: manifestation 2s 9.75s forwards, visibility 0.1s 9.75s forwards, translateX_manga 2s 9.75s forwards;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    margin-left: 1480px;
    height: 340px;
    width: 240px;
}
.manga_title_10 {
    text-align: center;
    background: rgba(0,0,0,.75);
    color: white;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 340px;
    width: 240px;
}
.manga_title_10:hover {
    animation: manifestation 0.5s forwards;
}
.manga_title_10:not(:hover) {
    animation: rev_manifestation 0.5s forwards;
}
.manga_title_10 p{
    margin-top: 28px;
}
.manga_title_10 a{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-decoration: none;
    color: white;
    text-align: center;
    height: 340px;
    width: 240px;
    font-size: 18px;
    font-family: 'comic sans ms', serif;
}
/* Стили: конец */



/* Анимации: начало */
@keyframes manifestation {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes rev_manifestation {
    0% {opacity: 1;}
    100% {opacity: 0;}
}
@keyframes visibility {
    0% {visibility:hidden;}
    100% {visibility: visible;}
}
@keyframes fade {
    0% {filter: brightness(100%);}
    100% {filter: brightness(40%);}
}
@keyframes brighten {
    0% {filter: brightness(40%);}
    100% {filter: brightness(100%);}
}
@keyframes translateX_ci_and_del {
    0% {transform: translateX(-1000px);}
    75% {transform: translateX(10px);}
    100% {transform: translateX(0px);}
}
@keyframes translateX_manga {
    0% {transform: translateX(-500px);}
    50% {transform: translateX(20px);}
    100% {transform: translateX(0px);}
}
@keyframes shapka {
    0% {transform: translateY(-63px);
        visibility: hidden;}
    100% {transform: translateY(0px);
          visibility: visible;}
}
/* Анимации: конец */



/* Прелоадер: начало */
#load {
    position:absolute;
    width:600px;
    height:36px;
    left:50%;
    top:49%;
    margin-left:-300px;
    overflow:visible;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:default;
}

#load div {
    position:absolute;
    width:100px;
    height:100px;
    opacity:0;
    font-size: 30px;
    font-family:Helvetica, Arial, sans-serif;
    animation:move 2s linear 3;
    -o-animation:move 2s linear 3;
    -moz-animation:move 2s linear 3;
    -webkit-animation:move 2s linear 3;
    transform:rotate(180deg);
    -o-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    color:#35C4F0;
}

#load div:nth-child(2) {
    animation-delay:0.2s;
    -o-animation-delay:0.2s;
    -moz-animation-delay:0.2s;
    -webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
    animation-delay:0.4s;
    -o-animation-delay:0.4s;
    -webkit-animation-delay:0.4s;
    -webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
    animation-delay:0.6s;
    -o-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
    animation-delay:0.8s;
    -o-animation-delay:0.8s;
    -moz-animation-delay:0.8s;
    -webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
    animation-delay:1s;
    -o-animation-delay:1s;
    -moz-animation-delay:1s;
    -webkit-animation-delay:1s;
}
#load div:nth-child(7) {
    animation-delay:1.2s;
    -o-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
}
#load div:nth-child(8) {
    animation-delay:1.4s;
    -o-animation-delay:1.4s;
    -moz-animation-delay:1.4s;
    -webkit-animation-delay:1.4s;
}

@keyframes move {
    0% {
        left:0;
        opacity:0;
    }
    35% {
        left: 41%; 
        -moz-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        transform:rotate(0deg);
        opacity:1;
    }
    65% {
        left:59%; 
        -moz-transform:rotate(0deg); 
        -webkit-transform:rotate(0deg); 
        -o-transform:rotate(0deg);
        transform:rotate(0deg); 
        opacity:1;
    }
    100% {
        left:100%; 
        -moz-transform:rotate(-180deg); 
        -webkit-transform:rotate(-180deg); 
        -o-transform:rotate(-180deg); 
        transform:rotate(-180deg);
        opacity:0;
    }
}

@-moz-keyframes move {
    0% {
        left:0; 
        opacity:0;
    }
    35% {
        left:41%; 
        -moz-transform:rotate(0deg); 
        transform:rotate(0deg);
        opacity:1;
    }
    65% {
        left:59%; 
        -moz-transform:rotate(0deg); 
        transform:rotate(0deg);
        opacity:1;
    }
    100% {
        left:100%; 
        -moz-transform:rotate(-180deg); 
        transform:rotate(-180deg);
        opacity:0;
    }
}

@-webkit-keyframes move {
    0% {
        left:0; 
        opacity:0;
    }
    35% {
        left:41%; 
        -webkit-transform:rotate(0deg); 
        transform:rotate(0deg); 
        opacity:1;
    }
    65% {
        left:59%; 
        -webkit-transform:rotate(0deg); 
        transform:rotate(0deg); 
        opacity:1;
    }
    100% {
        left:100%;
        -webkit-transform:rotate(-180deg); 
        transform:rotate(-180deg); 
        opacity:0;
    }
}

@-o-keyframes move {
    0% {
        left:0; 
        opacity:0;
    }
    35% {
        left:41%; 
        -o-transform:rotate(0deg); 
        transform:rotate(0deg); 
        opacity:1;
    }
    65% {
        left:59%; 
        -o-transform:rotate(0deg); 
        transform:rotate(0deg); 
        opacity:1;
    }
    100% {
        left:100%; 
        -o-transform:rotate(-180deg); 
        transform:rotate(-180deg); 
        opacity:0;
    }
}
/* Прелоадер: конец */