
@media (max-width: 1169px) {
    html {height: auto;}
    body {min-height: 0;background-image: none;}
    #container {width: 100%;}

    .b-main { width: 100%; float: none;}
    .b-sidebar {width: 100%;margin-top: 30px;float: none;}

    .b-header {position:relative;height: auto;margin: 0;padding: 16px;}

    .w-header {background: url('../img/bg_header.webp?110') 0 0 no-repeat #9c5c93;}
    .w-header__logo {position: relative; top: auto; left: auto;}
    .b-header__logo {font-size: 32px;}
    .b-header__logo-tagline {font-size: 9px;bottom: -5px;left: 32px;}

    .b-header__actions {right: 10px;}
    .b-header__login button {padding-left: 7px; padding-right: 7px;}

    .b-header__search {position: relative;top: auto;left:auto;margin: 0;margin-top: 11px;width: 100%;}
    input.b-search__string {width: 100%;}

    .w-header__rand {position: static;margin-top: 13px;margin-left: 0;float: left;}

    .b-theme {position: static;margin: 0;margin-top: 16px;float: right;}

    .b-nav {width: calc(100% - 53px);overflow: visible;}
    .b-nav-add {position: static;width: auto;}
    .b-nav-add a {width: auto; height: 40px;}

    .b-footer {padding-top: 67px;}
    .b-footer__links {text-align: left;padding-top: 16px;}
    .b-footer__links > a {display: block;}
    .b-footer__apps {text-align: left;}

    .b-responsive-modal-content {width:220px;width: 70vw;max-width: 100%}
    .c-video__player--metronome {width:220px;width: 70vw; max-width: 420px;   padding-bottom: 350px;}

    .b-comment__compact-msg:hover {white-space: normal;max-width: 100%;}

    .b-title-tab {font-size: 14px;}
    .b-listing-singers__item__img_m {width: 55px;}
    .b-listing-singers__item__img_m a {font-size: 10px;}
    .b-listing-singers__item__name_m a {word-break: break-word;}

    .c-tuner {width: 100%;width: calc(100% + 32px);margin-right: -16px;margin-left: -16px;}

    .b-words {padding: 16px;margin-left: -16px;margin-right: -16px;}
    .b-words__text-background--with-scroll {margin-right: -16px;}

    @media (min-width: 850px) {
        .b-nav {width: 100%;}
        .b-nav-next {display: none;}
    }
}

@media (max-width: 850px) {
    .b-nav-next {display: initial;}
}

@media (max-width: 767px) {
    .mcn_ad, #slot-before-text, #slot-after-text, #slot-menu {height: 290px;max-height:none;overflow: hidden;margin-left: -16px; margin-right: -16px;}
    #slot-before-text {height: auto;}
}

@media (max-width: 685px) {
    .b-words__toggle-font {display: inline-block;}
    .b-words__fonts {display: none;clear: right;position: absolute;left: 50%;margin-left: -101px;bottom: -10px;z-index: 1;}
    .b-words__fonts--visible {display: initial;}
    .b-words__fonts--visible+div {margin-bottom: 40px;}
}

@media (max-width: 640px) {
    .b-listing__item__link {max-width: none;white-space:normal;line-height: 30px;}

    .b-listing-singers__item td:last-child, .b-listing-singers__item td:first-child {display: none}

    #addsong input:not([name="sec_code"]){width: 100% !important;}

    .b-search-form__submit {margin-top: 0}

    .b-pagination {margin-left: auto;margin-right: auto;padding-left: 0;}
}

@media (max-width: 567px) {
    .b-actions > div:nth-child(1) {order: 3;}
    .b-actions > div:nth-child(2) {order: 1;}
    .b-actions > div:nth-child(3) {order: 2;}
    .b-topnews__share1 {display: initial;}
    .b-topnews__share2 {display: none;}

    .b-words__buttons {float: none;clear: left;}
    .b-words__fonts {margin-left: 0;left: 0;}

    .b-profile__dates {display: none;}
    .b-profile__dates-full {display: initial;}

    [class*=hint--]:after {max-width: 50vw;}
}

@media (min-width: 578px) and (max-width: 1169px) {
    .b-sidebar {display: flex;flex-wrap: wrap;}
    .b-sidebar__item {flex-basis: 50%;overflow: hidden;}
}

@media (max-width: 410px) {
    .b-user-name {max-width: 80px;}
    .b-words__author-list .b-words__author-name {max-width: 100px;}

    .c-video__player--metronome {    padding-bottom: 380px;}

    .add-video-modal__input {width: 204px;}
}

@media (min-width: 492px) {
    #slot-video .c-video__player {padding-bottom: 48%;}
}

@media (width: 360px) {
    .b-nav__item:nth-child(2) > .b-nav__item__link {width: 150px;}
    .b-nav__item:nth-child(3) > .b-nav__item__link {width: 108px}
}

@media (max-width: 320px) {
    html {
        min-width: 320px;
    }
    #container {
        width: 320px;
    }
    #radio0 {display: block}
    .b-nav__item:nth-child(2) > .b-nav__item__link {width: 118px;}
    .b-nav__item:nth-child(3) > .b-nav__item__link {width: 100px}
    .c-tuner {width: 290px;}
}
