* {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Oswald', sans-serif;
    background: white;
}
body.popup {
    overflow: hidden;
}

a {
    color: #ff2323;
    text-decoration: none;
    transition: all ease .5s;
}
a:not(.clean) {
    border-bottom: 1px solid transparent;
}
a:not(.clean):hover {
    border-color: #ff2323;
}

/************************************************************************CLASS*/
.button {
    display: inline-block;
    padding: 10px 15px;
    color: white;
    text-transform: uppercase;
    font-size: 18px;
    background: #ff2323;
    cursor: pointer;
    transition: all ease .5s;
}
.button:hover {
    background: white;
    color: black;
}

/***********************************************************************MOVEUP*/
#moveup {
    display: none;
    position: fixed;
    right: 15px;
    bottom: 50px;
    width: 70px;
    height: 70px;
    background: white url("../img/svg/arrow_up.svg") center no-repeat;
    background-size: 50%;
    border-radius: 50%;
    box-shadow: 0 0 10px 0 rgba(255,35,35,.5);
    cursor: pointer;
    z-index: 150;
    transition: all ease 1s;
}
.not_mobile #moveup {
    opacity: .5;
}
#moveup.active {
    display: block;
}
#moveup:hover {
    opacity: 1;
    transform: rotate(360deg);
}

/***********************************************************************HEADER*/
header {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 30px;
    z-index: 200;
}
header #main_menu {
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
}
header #main_menu .menu_side {
    display: flex;
    align-items: center;
    width: 50%;
    height: 100%;
}
header #main_menu #dark_menu_side {
    justify-content: flex-end;
    background: rgba(0,0,0,.9);
    color: white;
}
header #main_menu #light_menu_side {
    justify-content: flex-start;
    background: rgba(241,239,242,.9);
    color: black;
}
header #main_menu .menu_side .point_menu {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    cursor: pointer;
    transition: all ease .5s;
}
.not_mobile header #main_menu .menu_side .point_menu:hover {
    text-decoration: underline;
}
header #main_menu .menu_side .point_menu.active {
    text-decoration: underline;
}

/************************************************************************POPUP*/
#popup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    z-index: 200;
}
#popup #popup_wraper {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100%;
}
#popup > #popup_wraper > .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10;
    transition: all ease 1s;
}
#popup.dark > #popup_wraper > .shadow {
    background: rgba(0,0,0,.9);
}
#popup.light > #popup_wraper > .shadow {
    background: rgba(255,255,255,.95);
}
#popup .button.close_popup {
    position: fixed;
    right: 20px;
    top: 20px;
    width: 80px;
    height: 80px;
    padding: 0;
    background: white url('../img/svg/cross.svg') no-repeat center;
    background-size: 30px;
    border-radius: 50%;
    box-shadow: 0 0 10px 0 rgba(255,35,35,.5);
    z-index: 50;
    transition: all ease 1s;
}
#popup .button.close_popup:hover {
    transform: rotate(360deg);
}
#popup > #popup_wraper > .info {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-bottom: 70px;
    max-width: 500px;
    z-index: 30;
}
#popup > #popup_wraper > .info .art {
    width: 100%;
    height: 100%;
}
#popup > #popup_wraper > .info .art .img {
    width: 100%;
    overflow: hidden;
}
#popup > #popup_wraper > .info .art .img img {
    width: 100%;
}
#popup > #popup_wraper > .info .art .shadow {
    display: none;
}
#popup > #popup_wraper > .info .art .button {
    display: none;
}
#popup > #popup_wraper > .info .art .art_title {
    margin-top: 20px;
    padding: 0 10px;
    color: white;
}
#popup.light > #popup_wraper > .info .art .art_title {
    color: black;
}
#popup > #popup_wraper > .info .art .art_title h3 {
    text-transform: uppercase;
    font-size: 30px;
    line-height: 140%;
}
#popup > #popup_wraper > .info .art .art_title h3 span {
    font-size: 50px;
}
#popup > #popup_wraper > .info .art .art_title p {
    margin-top: 20px;
}
#popup > #popup_wraper > .info .art .art_title .info {
    margin-top: 20px;
}
#popup > #popup_wraper > .info > .art > .art_title > .info > .social > .link {
    width: 30px;
    height: 30px;
}
#popup > #popup_wraper > .info .art .art_title .more {
    display: none;
}
#popup > #popup_wraper > .info .art .message {
    margin-top: 50px;
    padding: 10px;
    border-top: 2px solid #ff2323;;
}
#popup > #popup_wraper > .info .art .message.dark {
    color: white;
}
#popup > #popup_wraper > .info .art .message.light {
    color: black;
}

/**********************************************************************ARTLIST*/
.artlist.dark .art_title,
.artlist.dark .art_title a {
    color: white;
}
.artlist.light .art_title,
.artlist.light .art_title a {
    color: black;
}
.artlist.dark a {
    border-bottom-color: white;
}
.artlist.light a {
    border-bottom-color: black;
}
.artlist .art_title a:hover {
    color: #ff2323;
    border-bottom-color: #ff2323;
}
.artlist {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;
    transition: all ease 2s;
}
.artlist .art {
    width: 350px;
    margin-bottom: 50px;
    overflow: hidden;
    transition: all ease .5s;
}
.artlist .art .img {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    filter: grayscale(100%);
    transition: all ease .5s;
}
.artlist .art:hover .img {
    filter: grayscale(0);
}
.artlist .art .img .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 20;
    transition: all ease .5s;
}
.artlist.dark .art .img .shadow {
    background: rgba(0,0,0,.5);
    box-shadow: 0 0 30px 20px black inset;
}
.artlist.light .art .img .shadow {
    background: rgba(255,255,255,.5);
    box-shadow: 0 0 30px 20px white inset;
}
.artlist.dark .art:hover .img .shadow {
    box-shadow: 0 0 20px 0 black inset;
}
.artlist.light .art:hover .img .shadow {
    box-shadow: 0 0 20px 0 #efefef inset;
}
.artlist .art:hover .img .shadow {
    background: transparent;
}
.artlist .art .img img {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 10;
    transition: all ease .5s;
}
.artlist .art:hover .img img {
    transform: scale(1.1);
}
.artlist .art:hover .img img {
    filter: grayscale(0);
}
.artlist .art .art_title {
    margin-top: 40px;
}
.artlist .art .art_title h3 {
    font-size: 24px;
    line-height: 140%;
    text-transform: uppercase;
}
.artlist .art .art_title h3 span {
    font-size: 40px;
}
.artlist .art .art_title .short {
    overflow: hidden;
    padding-bottom: 2px;
}
.artlist .art .art_title p {
    margin-top: 20px;
}
.artlist .art .art_title p.long {
    display: none;
}
.art .art_title p.long iframe {
    width: 100%;
}
.artlist .art .art_title .info {
    margin-top: 10px;
    color: #ff2323;
}
.artlist .art .art_title .more {
    width: 100%;
    text-align: center;
    margin: 10px 0 0;
    padding: 2px 0;
    background: rgba(255,35,35,.1);
    color: #ff2323;
    cursor: pointer;
    transition: all ease .5s;
}
.artlist .art:hover .art_title .more,
.mobile .artlist .art .art_title .more {
    background: rgba(255,35,35,1);
    color: white;
}
.social {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all ease .5s;
}
.artlist .art .social {
    opacity: .5;
}
.artlist .art:hover .social,
.mobile .artlist .art .social {
    opacity: 1;
}
.social > .link {
    display: block;
    position: relative;
    top: 0;
    width: 30px;
    height: 30px;
    padding: 0 3px;
    background: center no-repeat;
    background-size: contain;
    box-sizing: border-box;
    transition: all ease 1s;
}
.social > .link:hover {
    transform: rotate(360deg);
}
.social > .link.instagram {
    background-image: url("../img/svg/insta.svg");
}
.social > .link.facebook {
    background-image: url("../img/svg/fb.svg");
}
.social > .link.vk {
    background-image: url("../img/svg/vk.svg");
}
.social > .link.ok {
    background-image: url("../img/svg/ok.svg");
}
.social > .link.youtube {
    background-image: url("../img/svg/youtube.svg");
}
.social > .link.twitter {
    background-image: url("../img/svg/twitter.svg");
}
.social > .link.mail {
    background-image: url("../img/svg/mail.svg");
}
.social > .link.tiktok {
    background-image: url("../img/svg/tiktok.svg");
}
.social > .link.telegram {
    background-image: url("../img/svg/telegram.svg");
}
.social > .link {
    background-image: url("../img/svg/web.svg");
}
.artlist .art .button {
    margin-top: 20px;
}
/*SHORT*/
.artlist.short .art {
    width: 250px;
    margin: 0 2px 40px 2px;
}
.artlist.short .art .img {
    height: 250px;
}
.artlist.short .art .art_title {
    margin-top: 10px;
}
.artlist.short .art .art_title h3 {
    font-size: 18px;
}
.artlist.short .art .art_title h3 span {
    font-size: 32px;
}
.artlist.short .art .art_title .short {
    margin-top: 10px;
    margin-left: 10px;
}
.artlist.short .art .art_title .short li::marker {
    content: '• ';
}
.artlist.short .art .art_title p {
    margin-top: 10px;
}

/**********************************************************************MSLIDER*/
#mslider {
    position: relative;
    display: flex;
    width: 100%;
    z-index: 90;
}
#mslider .slidebook {
    position: relative;
    width: 50%;
    filter: grayscale(100%);
    transition: all ease 2s;
}
#mslider.active .slidebook {
    width: 20%;
}
#mslider .slidebook:hover,
#mslider .slidebook.active {
    filter: grayscale(0);
}
#mslider .slidebook.active {
    width: 80%;
}
#mslider .slidebook > .shadow {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 30;
    transition: all ease .5s;
}
#mslider #darkbook > .shadow {
    box-shadow: 0 0 50px 0px black inset;
    background: rgba(0,0,0,.8);
}
#mslider #lightbook > .shadow {
    box-shadow: 0 0 50px 0px white inset;
    background: rgba(255,255,255,.8);
}
#mslider.active #darkbook > .shadow {
    background: rgba(0,0,0,.9);
}
#mslider.active #lightbook > .shadow {
    background: rgba(255,255,255,.9);
}
#mslider #darkbook:hover > .shadow {
    background: rgba(0,0,0,.2);
}
#mslider #lightbook:hover > .shadow {
    background: rgba(255,255,255,.2);
}
#mslider #darkbook.active > .shadow {
    background: rgba(0,0,0,0);
}
#mslider #lightbook.active > .shadow {
    background: rgba(255,255,255,0);
}
#mslider .slidebook .fon {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    background: white no-repeat;
    background-size: cover;
    overflow: hidden;
    z-index: 10;
    transition: background ease 2s;
}
#mslider #darkbook .fon {
    background-position: 80% bottom;
    background-image: url("../img/fon_dark_1920.webp");
    background-color: black;
}
#mslider #lightbook .fon {
    background-position: 20% bottom;
    background-image: url("../img/fon_light_1920.webp");
    background-color: #F2F0F3;
}
#mslider #darkbook.active .fon {
    background-position: 70% bottom;
}
#mslider #lightbook.active .fon {
    background-position: 30% bottom;
}
#mslider .slidebook .title {
    position: absolute;
    top: 70vh;
    right: 10px;
    text-align: right;
    color: white;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    z-index: 40;
    transition: color ease 1s;
}
#mslider #lightbook .title {
    left: 10px;
    text-align: left;
    color: black;
}
#mslider .slidebook .title h2 {
    font-size: 40px;
    line-height: 70%;
    text-transform: uppercase;
}
#mslider .slidebook .title h2 span {
    font-size: 20px;
    background-repeat: no-repeat;
    background-size: 13px 80%;
    transition: all ease .5s;
}
#mslider .slidebook .title h2 span:hover {
    padding-right: 15px;
}
#mslider .slidebook#darkbook .title h2 span {
    background-position: 120% center;
    background-image: url("../img/svg/arrow_white_left.svg");
    color: white;
}
#mslider .slidebook#darkbook:hover .title h2 span,
#mslider .slidebook#darkbook.active .title h2 span {
    padding-right: 15px;
    background-position: right;
}
#mslider .slidebook#lightbook .title h2 span {
    background-position: -15px center;
    background-image: url("../img/svg/arrow_black_right.svg");
}
#mslider .slidebook#lightbook:hover .title h2 span,
#mslider .slidebook#lightbook.active .title h2 span {
    padding-left: 15px;
    background-position: left;
}
#mslider .slidebook .move_down {
    position: absolute;
    top: 80vh;
    width: 35px;
    height: 70px;
    overflow: hidden;
    background: no-repeat center;
    background-size: 50px;
    animation: ca3_fade_move_down 4s infinite;
    cursor: pointer;
    z-index: 30;
    transition: all ease .3s;
}
#mslider.active .slidebook .move_down {
    display: none;
}
@keyframes ca3_fade_move_down {
    0%   { transform:translate(0,-20px); opacity: 0;  }
    50%  { opacity: 1;  }
    100% { transform:translate(0,20px); opacity: 0; }
}
#mslider #darkbook .move_down {
    right: 0;
    background-image: url("../img/svg/arrow_down_white.svg");
    background-position: 10px center;
}
#mslider #lightbook .move_down {
    left: 0;
    background-image: url("../img/svg/arrow_down_black.svg");
    background-position: -25px center;
}
#mslider .slidebook .text_wrapper {
    position: relative;
    left: 0;
    width: 50%;
    margin: 15vh 0 20vh;
    overflow: hidden;
    text-align: justify;
    z-index: 40;
    transition: all ease 1s;
}
#mslider.active .slidebook .text_wrapper {
    left: 20%;
    width: 60%;
}
#mslider.active #lightbook.active .text_wrapper .text {
    left: 0;
}
#mslider.active .slidebook:not(.active) .text_wrapper {
    opacity: 0;
    z-index: -1;
}
#mslider #darkbook .text_wrapper {
    color: white;
    background: rgba(0,0,0,.9);
}
#mslider #lightbook .text_wrapper {
    color: black;
    background: rgba(255,255,255,.9);
}
#mslider:not(.active) #darkbook .text_wrapper {
    left: 50%;
}
#mslider:not(.active) #lightbook .text_wrapper {
    left: 0;
    color: black;
    background: rgba(255,255,255,.7);
}
#mslider .slidebook .text_wrapper .text {
    position: relative;
    left: 0;
    top: 0;
    width: 50vw;
    padding: 20px 25px;
    box-sizing: border-box;
    font-size: 18px;
    opacity: 1;
    transition: all ease 2s;
}
#mslider .slidebook.active .text_wrapper .text {
    width: 100%;
}
#mslider #lightbook .text_wrapper .text {
    left: -100%;
}
#mslider .slidebook .artlist {
    position: absolute;
    display: block;
    top: -100%;
    opacity: 0;
    z-index: 40;
    transition: all ease 1s;
}
#mslider #darkbook .artlist {
    left: 15%;
}
#mslider #lightbook .artlist {
    right: 15%;
}
#mslider .slidebook.active .artlist {
    top: 15vh;
    opacity: 1;
}
#mslider .slidebook .artlist .reload {
    position: absolute;
    top: 0;
    width: 60px;
    height: 60px;
    background: 50% 50% no-repeat;
    background-size: 50px;
    border-radius: 50%;
    cursor: pointer;
    opacity: .5;
    z-index: 20;
    transition: all ease 1s;
}
#mslider .slidebook .artlist.dark .reload {
    background-image: url("../img/svg/reload.svg");
    right: -70px;
}
#mslider .slidebook .artlist.light .reload {
    background-image: url("../img/svg/reload.svg");
    left: -70px;
}
#mslider .slidebook .artlist .reload:hover {
    opacity: 1;
    transform: rotate(360deg);
}
#mslider .slidebook .artlist .art {
    margin: 0;
}
#mslider .slidebook .artlist .button {
    margin-top: 20px;
}
#mslider .slidebook .artlist .art .art_title .short {
    max-height: 100px;
}

/************************************************************************SBOOK*/
#sbook {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}
#sbook > #books {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: center;
    align-content: center;
    z-index: 50;
}
#sbook > #books > .book {
    position: relative;
    width: 50%;
    padding: 0 0 40px 0;
    box-sizing: border-box;
    transition: all ease 2s;
}
#sbook > #books.active > .book {
    width: 20%;
}
#sbook > #books.active > .book:not(.active) > .artlist {
    max-height: 5000px;
    overflow: hidden;
}
#sbook > #books.active > .book.active {
    width: 80%;
}
#sbook > .book_title {
    position: sticky;
    top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 20px 0 rgba(0,0,0,.5);
    z-index: 60;
}
#sbook > .book_title > .book_title_wrap {
    position: relative;
    width: 50%;
    box-sizing: border-box;
    cursor: pointer;
    transition: all ease 2s;
}
#sbook > .book_title.active > .book_title_wrap {
    width: 20%;
    min-width: 240px;
}
#sbook > .book_title.active > .book_title_wrap.dark:not(.active) {
    border-color: rgb(0,0,0);
}
#sbook > .book_title.active > .book_title_wrap.light:not(.active) {
    border-color: rgb(255,255,255);
}
#sbook > .book_title.active > .book_title_wrap.active {
    width: 80%;
}
#sbook > .book_title > .book_title_wrap > h2 {
    position: relative;
    margin-top: -50px;
    font-size: 30px;
    line-height: 95%;
    padding: 60px 20px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-transform: uppercase;
    z-index: 10;
    transition: all ease 2s;
}
#sbook > .book_title > .book_title_wrap .for_mobile {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: center no-repeat;
    background-size: 30px;
    z-index: 20;
    transition: all ease 2s;
}
#sbook > .book_title > .book_title_wrap.dark .for_mobile {
    background-color: black;
    background-image: url("../img/svg/arrow_white_right.svg");
}
#sbook > .book_title > .book_title_wrap.light .for_mobile {
    background-color: white;
    background-image: url("../img/svg/arrow_black_left.svg");
}
#sbook > .book_title > .book_title_wrap.dark > h2 {
    background-color: rgba(0,0,0,.95);
}
#sbook > .book_title > .book_title_wrap.light > h2 {
    background-color: rgba(255,255,255,.95);
}
#sbook > .book_title > .book_title_wrap > h2 > span {
    font-size: 22px;
}
#sbook > .book_title > .book_title_wrap.dark {
    color: white;
    text-align: left;
}
#sbook > .book_title > .book_title_wrap.light {
    color: black;
    text-align: right;
}
#sbook > .book_title > .book_title_wrap .provoloka {
    position: absolute;
    left: 0;
    top: -10px;
    width: 100%;
    height: 20px;
    background: center;
    background-size: 300px;
    opacity: .7;
    z-index: 30;
}
#sbook > .book_title > .book_title_wrap.dark .provoloka {
    background-image: url(../img/p.png);
}
#sbook > .book_title > .book_title_wrap.light .provoloka {
    background-image: url("../img/f.png");
}
#sbook > .search_block {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 60;
}
#sbook > .search_block .search_clean {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: rgba(218,218,218,.3) url("../img/svg/cross.svg") center no-repeat;
    background-size: 15px;
    cursor: pointer;
    transition: all ease .5s;
}
#sbook > .search_block .search_clean:hover {
    background-color: rgba(218,218,218,.7);
}
#sbook > .search_block > input {
    display: block;
    width: 100%;
    border: none;
    color: #ff2323;
    background: url("../img/svg/search.svg") no-repeat 12px center;
    background-size: 20px;
    font-size: 18px;
    font-family: 'Oswald';
    padding: 12px 30px 12px 43px;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: all ease .5s;
}
#sbook > .search_block > input:focus {
    background-image: url("../img/svg/search_white.svg");
    background-color: rgba(255,35,35,.8);
    color: white;
    outline: none;
}
#sbook > #books.active > .book > .artlist {
    opacity: .1;
}
#sbook > #books.active > .book.active > .artlist {
    opacity: 1;
}
#sbook > #books > .darkbook {
    background: black url("../img/m.png") center;
    background-attachment: fixed;
}
#sbook > #books > .lightbook {
    background: white url("../img/flow.png") center;
    background-attachment: fixed;
}

section.dop {
    padding: 10px 15px 50px;
    background: black;
}

footer {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,.9);
    box-sizing: border-box;
    box-shadow: 0 -10px 20px 0 rgba(0,0,0,.5);
    color: white;
    z-index: 200;
}
footer .links {
    padding: 5px 10px;
    box-sizing: border-box;
}
footer .social {
    flex-wrap: wrap;
    box-sizing: border-box;
}
footer .social > .link {
    margin: 5px;
}
footer .messages {
    display: none;
}

/***********************************************************************MOBILE*/
.mobile .artlist.light .art .img .shadow,
.mobile .artlist.dark .art .img .shadow {
    display: none;
}
.mobile .artlist .art .img {
    filter: none;
}
/*HEIGHT*/
@media only screen and (max-height: 800px) {
    #mslider .slidebook .move_down {
        top: 85vh;
    }
}
/*WIDTH*/
@media only screen and (max-width: 1500px) {
    #sbook > #books.active > .book {
        width: 0;
    }
    #sbook > #books.active > .book.active {
        width: 100%;
    }
    #mslider:not(.active) #darkbook .text_wrapper {
        left: 40%;
    }
    #mslider .slidebook .text_wrapper {
        width: 60%;
    }
    #mslider .slidebook .text_wrapper .text {
        width: 60vw;
    }
}
@media only screen and (max-width: 1400px) {
    #mslider.active .slidebook .text_wrapper {
        left: 10%;
        width: 80%;
    }
}
@media only screen and (max-width: 1200px) {
    #sbook > .book_title > .book_title_wrap.dark,
    #sbook > .book_title > .book_title_wrap.light {
        text-align: center;
    }
    #mslider:not(.active) #darkbook .text_wrapper {
        left: 30%;
    }
    #mslider .slidebook .text_wrapper {
        width: 70%;
    }
    #mslider .slidebook .text_wrapper .text {
        width: 70vw;
    }
}
@media only screen and (max-width: 1000px) {
    #mslider:not(.active) #darkbook .text_wrapper {
        left: 20%;
    }
    #mslider .slidebook .text_wrapper {
        width: 80%;
    }
    #mslider .slidebook .text_wrapper .text {
        width: 80vw;
    }
    #mslider.active #darkbook.active .text_wrapper,
    #mslider.active #lightbook.active .text_wrapper {
        left: 0;
        width: 100%;
    }
}
@media only screen and (max-width: 930px) {
    #mslider #darkbook .artlist {
        left: 5%;
    }
    #mslider #lightbook .artlist {
        right: 5%;
    }
    #mslider .slidebook.active .artlist {
        top: 5vh;
    }
    #mslider .slidebook .fon {
        min-height: 650px;
    }
    #sbook > .book_title {
        top: 30px;
    }
    #sbook > .search_block > input {
        background-position: 10px center;
        background-size: 15px;
        padding: 2px 30px 2px 35px;
    }
}
@media only screen and (max-width: 830px) {
    #mslider.active .slidebook {
        width: 10%;
    }
    #mslider .slidebook.active {
        width: 90%;
    }
    #mslider:not(.active) #darkbook .text_wrapper {
        left: 0;
    }
    #mslider .slidebook .text_wrapper {
        width: 100%;
    }
    #mslider .slidebook .text_wrapper .text {
        width: 100vw;
    }
    .not_mobile #mslider .slidebook .text_wrapper .text {
        padding-right: 41px;
    }
    #sbook > .book_title > .book_title_wrap .provoloka {
        top: -5px;
        height: 15px;
        background-size: 200px;
    }
    #sbook > .book_title > .book_title_wrap > h2 {
        padding: 60px 5px 5px;
        font-size: 24px;
    }
    #sbook > .book_title > .book_title_wrap > h2 > span {
        font-size: 18px;
    }
    #sbook > .book_title > .book_title_wrap.dark > h2 {
        text-align: right;
    }
    #sbook > .book_title > .book_title_wrap.light > h2 {
        text-align: left;
    }
}
@media only screen and (max-width: 730px) {
    #mslider.active .slidebook {
        width: 0%;
    }
    #mslider .slidebook.active {
        width: 100%;
    }
    footer .links {
        display: none;
    }
}
@media only screen and (max-width: 660px) {
    #moveup {
        right: 10px;
        bottom: 45px;
        width: 50px;
        height: 50px;
    }
    #mslider .slidebook .fon {
        min-height: 590px
    }
    #mslider #darkbook .artlist {
        left: 2%;
    }
    #mslider #lightbook .artlist {
        right: 2%;
    }
    .artlist .art {
        width: 300px;
    }
    .artlist .art .img {
        height: 300px;
    }
    .artlist .art .art_title {
        margin-top: 20px;
    }
    #sbook > .book_title.active > .book_title_wrap.active {
        width: 80%;
    }
    #sbook > .book_title.active > .book_title_wrap:not(.active) {
        width: 20%;
        min-width: 0;
    }
    #sbook > .book_title.active > .book_title_wrap:not(.active) .for_mobile {
        width: 100%;
        height: 100%;
    }
}
@media only screen and (max-width: 600px) {
    #mslider .slidebook .fon {
        min-height: 550px
    }
    #mslider .slidebook.active .artlist .art {
        width: 250px;
    }
    #mslider .slidebook.active .artlist .art .img {
        height: 250px;
    }
    #mslider .slidebook.active .artlist .art .art_title {
        margin-top: 10px;
    }
    .artlist.short .art .art_title h3 span {
        font-size: 24px;
    }
}
@media only screen and (max-width: 580px) {
    .artlist.short .art {
        width: 100%;
    }
    .artlist.short .art {
        margin: 0 0 25px 0;
    }
    .artlist.short .art .art_title {
        padding: 0 10px;
    }
    .book.active .artlist.short .art .img {
        height: 350px;
    }
    .artlist.short .art .art_title .short {
        margin-left: 0;
    }
}
@media only screen and (max-width: 560px) {
    #mslider .slidebook .fon {
        min-height: 700px
    }
    #mslider #darkbook.active .artlist {
        left: 0;
    }
    #mslider .slidebook.active .artlist {
        left: 0;
        top: 30px;
        width: 100%;
        padding-bottom: 20px;
    }
    #mslider #darkbook.active .artlist {
        background: rgba(0,0,0,.9);
    }
    #mslider #lightbook.active .artlist {
        background: rgba(255,255,255,.9);
    }
    #mslider .slidebook.active .artlist .art {
        width: 100%;
    }
    #mslider .slidebook.active .artlist .art .img {
        height: 400px;
    }
    #mslider .slidebook.active .artlist .art .art_title {
        padding: 0 15px;
    }
    #mslider #darkbook.active .title {
        text-shadow: 1px 1px 10px black;
    }
    #mslider #lightbook.active .title {
        text-shadow: 1px 1px 10px white;
    }
    #mslider .artlist .art .art_title p {
        margin-top: 5px;
    }
    #mslider .slidebook .artlist .button {
        margin: 20px 0 0 15px;
    }
    #mslider .slidebook .artlist.light .reload {
        left: 5px;
    }
    #mslider .slidebook .artlist.dark .reload {
        left: 5px;
    }
}
@media only screen and (max-width: 550px) {
    #mslider:not(.active) .slidebook .title {
        white-space: inherit;
        width: 150px;
    }
    #mslider:not(.active) .slidebook .title h2 {
        line-height: 100%;
    }
    #mslider .slidebook .title {
        top: 60vh;
    }
    #mslider .slidebook .text_wrapper .text {
        padding: 20px 15px;
    }
}
@media only screen and (max-width: 500px) {
    #popup .button.close_popup {
        width: 50px;
        height: 50px;
        right: 5px;
        top: 5px;
        background-size: 20px;
    }
    .artlist.short .art .img {
        height: 50vw;
    }
    .book.active .artlist.short .art .art_title {
        padding: 0 20px;
    }
    .book.active .artlist.short .art .img {
        height: 100vw;
    }
    .social > .link {
        width: 25px;
        height: 25px;
    }
}
@media only screen and (max-width: 380px) {
    #mslider .slidebook.active .artlist .art .img {
        height: auto;
    }
    #mslider:not(.active) .slidebook .title {
        width: 115px;
    }
    #mslider .slidebook .title h2 {
        font-size: 34px;
    }
    #mslider .slidebook .artlist .art {
        width: 100%;
    }
    #sbook > .book_title.active > .book_title_wrap {
        min-width: inherit;
    }
}