@media (max-width: 660px) {
    body {
        min-width: 320px;
    }
    .wrapper {
        min-width: 320px;
    }
    .container {
        width: 100%;
    }
    /* header */
    header .topfon,
    .topangle,
    .topbetv,
    .topothername,
    .topothermenu,
    .called .topothermenu,
    .topsocials,
    .mobilemenu .current_child,
    .topmainmenu {
        display: none;
    }
    header {
        z-index: 11;
    }
    header.sticked {
        z-index: 111;
    }
    .topline {
        position: relative;
        height: 50px;
        background: #de4347;
        z-index: 10;
    }
    .maingreen .topline {
        background: #33aeb0;
    }
    .topthere,
    .maingreen .topthere {
        padding: 10px 0 0 5px;
        width: 295px;
        height: 50px;
    }
    .toplogo {
        width: 40px;
        height: 40px;
        margin-right: 0;
    }
    .topname {
        font-size: 14px;
        line-height: 20px;
        padding: 12px 0 0;
    }
    .topname-comment {
        display: none;
    }
    .maingreen .topname {
        font-size: 13px;
    }
    .maingreen .topname.lesser {
        font-size: 12px;
    }
    .topother {
        position: absolute;
        right: 5px;
        top: 10px;
        width: 20px;
        height: 40px;
        padding: 10px 0;
    }
    .maingreen .topother {
        padding-left: 0;
    }
    .tomcall span {
        top: 9px;
    }
    .toputils {
        background: #de4347;
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        height: auto;
        margin: 0;
        transform: translateY(-100%);
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
        z-index: 5;
    }
    .maingreen .toputils {
        background: #33aeb0;
    }
    .called .toputils {
        transform: translateY(0);
    }
    .toputils:after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        height: 0;
        width: 0;
        border-top: 10px solid #de4347;
        border-right: 100vw solid #33aeb0;
        z-index: 10;
    }
    .maingreen .toputils:after {
        border-top-color: #33aeb0;
        border-right-color: #de4347;
    }
    .toplever {
        padding: 20px 10px;
        float: none;
    }
    .toplang .current,
    .maingreen .toplang .current,
    .topsearch input {
        background: none;
        color: #fff;
        border-color: #fff;
    }
    .toplang *:first-child {
        border-color: #fff;
    }
    .topsearch button {
        background-image: url('/images/srcbtn_m.png');
    }
    .mobilemenu,
    .mobileother {
        display: block;
        color: #fff;
    }
    .mobilemenu .menupoint {
        display: block;
        font-size: 18px;
        line-height: 26px;
    }
    .mobilemenu .mpwrap {
        padding: 0 10px;
    }
    .mobilemenu .submenu {
        background: none;
        display: block;
        margin: 0;
        padding: 0;
        -webkit-transition: margin 0.5s ease;
        -moz-transition: margin 0.5s ease;
        -ms-transition: margin 0.5s ease;
        -o-transition: margin 0.5s ease;
        transition: margin 0.5s ease;
    }
    .mobilemenu .submenu li {
        font-weight: 300;
        line-height: 21px;
        height: 0;
        overflow: hidden;
        -webkit-transition: height 0.5s ease;
        -moz-transition: height 0.5s ease;
        -ms-transition: height 0.5s ease;
        -o-transition: height 0.5s ease;
        transition: height 0.5s ease;
    }
    .mobilemenu .submenu li a {
        background: none;
        color: #fff;
        margin: 0;
        height: 21px;
    }
    .menupoint.current .submenu,
    .menupoint:hover .submenu,
    .submenu:hover {
        margin: 0 0 7px;
    }
    .menupoint.current .submenu li,
    .menupoint:hover .submenu li,
    .submenu:hover li {
        height: 21px;
    }
    .mobilemenu .menupoint.current .mpwrap > a,
    .mobilemenu .menupoint:hover .mpwrap > a,
    .mobilemenu .submenu li.current a,
    .mobilemenu .submenu li:hover a {
        color: #b8baba;
    }
    .maingreen .mobilemenu .menupoint.current .mpwrap > a,
    .maingreen .mobilemenu .menupoint:hover .mpwrap > a,
    .maingreen .mobilemenu .submenu li.current a,
    .maingreen .mobilemenu .submenu li:hover a {
        color: #5e6263;
    }
    .mobileother {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 10px 0 0;
        background: #33aeb0;
        height: 0;
        overflow: hidden;
        -webkit-transition: all 0.3s ease 0.2s;
        -moz-transition: all 0.3s ease 0.2s;
        -ms-transition: all 0.3s ease 0.2s;
        -o-transition: all 0.3s ease 0.2s;
        transition: all 0.3s ease 0.2s;
    }
    .maingreen .mobileother {
        background: #de4347;
    }
    .called .mobileother {
        height: 40px;
    }
    .mobileother a {
        display: block;
        padding: 4px 10px 14px;
        font-family: 'Comfortaa', cursive;
        font-weight: 700;
        font-size: 13px;
        line-height: 22px;
    }
    .arrtoother {
        display: inline-block;
        vertical-align: top;
        width: 27px;
        height: 22px;
    }
    /* footer */
    footer .topfon {
        background: none;
    }
    footer .topfon:after {
        left: 0;
        right: 0;
        margin: 0;
        border-left: 100vw solid #de4347;
        border-top: 10px solid #33aeb0;
        border-bottom: none;
        visibility: visible;
    }
    .subscribeform {
        text-align: center;
        width: 100%;
        float: none;
    }
    .subscribeform span {
        display: block;
        width: 230px;
        margin: 0 auto;
    }
    .sponsorthanks {
        margin-left: 0;
        text-align: center;
    }
    .sponsorthanks span {
        display: inline;
    }
    .sponsorthanks img {
        margin: 0 auto;
    }
    .bottomsocials {
        margin: 15px 0 0;
        text-align: center;
        display: block;
    }
    .botsoc {
        display: inline-block;
        vertical-align: top;
        height: 35px;
        width: 35px;
        border-radius: 4px;
        background: url('/images/soc-vk_b.png') center center no-repeat;
    }
    .botsoc.fb {
        background-image: url('/images/soc-fb_b.png');
    }
    .botsoc.you {
        background-image: url('/images/soc-you_b.png');
    }
    .botsoc.cld {
        background-image: url('/images/soc-cld_b.png');
    }
    .botsoc.ins {
        background-image: url('/images/soc-ins_b.png');
    }
    .credits {
        position: static;
        text-align: center;
        padding: 0 0 15px;
    }
    /* popups */
    #bigpopup {
        width: calc(100% - 20px);
        margin-left: -50%;
        padding: 10px;
    }
    /* pages */
    /* main page */
    .mainpage {
        width: 300px;
        padding: 20px 10px;
        margin: 0 auto;
    }
    .mp-unit.mobile-thin {
        height: 220px;
    }
    .mobile-thin .mp-descr {
        top: 0;
        padding-top: 55px;
    }
    .mobile-red .mp-descr {
        background: #de4347;
    }
    .mobile-green .mp-descr {
        background: #33aeb0;
    }
    .mp-unit.mobile-thin .mp-time {
        margin-top: 0;
    }
    .mobile-green .mp-topangle:before {
        border-top-color: #b0d2d3;
    }
    .mobile-green .mp-botangle:before {
        border-bottom-color: #b0d2d3;
    }
    .mp-mobile-duotone .duotone-gray {
        opacity: 0
    }
    .tp-table,
    .quartet {
        width: calc(100% - 10px);
        display: block;
    }
    .tp-table .tp-column {
        display: block;
        margin: 10px 0 0;
        padding: 0;
        width: 100%;
    }
    .tp-table .tp-column + .tp-column {
        margin-top: 50px;
    }
    .gallery,
    .gallery-cd {
        width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
    #main .gal-unit {
        margin: 0 0 10px;
    }
    .rulers {
        width: 320px;
        margin: 0 auto;
    }
    .rule-unit {
        width: 150px;
    }
    .rule-unit:nth-child(even) {
        margin-left: 10px;
    }
    .rule-comment {
        font-size: 10px;
    }
    .press-unit {
        margin-right: 0;
    }
    /* partners */
    .partners {
        margin: 0 5px;
    }
    /* afisha */
    #main.calendar {
        padding-top: 10px;
    }
    .totickets {
        margin-left: 10px;
        margin-right: 0;
        font-size: 15px;
        line-height: 24px;
    }
    .cal-table {
        display: flex;
    }
    .cal-right {
        flex-grow: 1;
    }
    .open .cal-table {
        display: table;
    }
    .cal-left {
        flex: 0 0 80px;
        height: 80px;
        margin-right: 10px;
        margin-bottom: 30px;
    }
    .open .cal-left {
        float: left;
        min-height: 0;
        width: 80px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .open .cal-left .ya-share2 {
        display: none;
        width: 100%;
    }
    .cal-left .ya-share2 li {
        margin: 0 5px 5px 0;
    }
    .cal-city {
        height: 15px;
        padding-left: 10px;
        font-size: 12px;
        line-height: 12px;
    }
    .cal-city::before {
        border-bottom-width: 20px;
        border-left-width: 20px;
    }
    /*
    .totickets,
    .cal-left > * {
        display: none;
    }
    */
    .open .totickets {
        display: block;
        margin: 0;
    }
    .cal-right {
        margin-left: 0;
        font-size: 14px;
    }
    .cal-date,
    .cal-name {
        font-size: 18px;
        line-height: 20px;
    }
    .cal-inprog,
    .cal-info,
    .cal-info p {
        margin-top: 10px;
    }
    /* projects */
    .projects {
        padding: 0;
    }
    .proj-desc {
        padding: 10px;
    }
    .proj-content {
        margin: 10px;
    }
    /* video */
    .video-gallery {
        padding-left: 0;
    }
    .video-list {
        margin: 0 5px;
    }
    .video-item {
        margin: 0 0 20px;
        width: 100%;
    }
    .video-item iframe {
        width: 100%;
        height: calc((100vw - 10px) * 9 / 16);
        min-width: 310px;
        min-height: 175px;
    }
    /** fotorama */
    #grayscreener .fotorama-title {
        font-size: 16px;
    }
    /* composers */
    .com-top {
        height: auto;
        position: relative;
        padding: 0 0 40px;
        background: transparent;
    }
    .com-search {
        position: absolute;
        padding: 5px;
        bottom: 0;
        right: 0;
        background: #fff;
    }
    .com-search input {
        width: 170px;
    }
    .com-alpha {
        margin: 0;
        background: #fff;
    }
    .com-field {
        margin-top: -30px;
    }
    .com-info {
        display: none;
    }
    .com-list {
        position: relative;
        width: 100%;
        height: 50vh;
        min-height: 200px;
    }
    .com-block {
        margin-right: 20px;
    }
    .com-line {
        padding: 5px 0;
        width: 100%;
    }
    .com-line.used:after {
        display: none;
    }
    .com-lineinfo {
        padding: 5px 0;
        border-top: 1px solid #000;
        margin-top: 5px;
        color: #000;
    }
    .used .com-lineinfo {
        display: block;
    }
    /* releases */
    .rel-image {
        float: none;
        width: 100%;
        text-align: center;
        margin: 0 0 10px;
    }
    .rel-image img {
        margin: 0 auto;
    }
    /* proiects */
    .projects {
        padding: 10px;
    }
    .proj-photo, .proj-photo img, .proj-desc {
        width: 100%;
        height: auto;
        float: none;
        padding: 0;
    }
    .proj-photo svg {
        position: static;
    }
    .proj-cell {
        display: block;
        width: auto;
        height: auto;
        padding: 20px 45px 20px 20px;
    }
    .proj-arr {
        top: calc(50% - 11px);
        right: 8px;
    }
    .archive .proj-unit,
    .archive .proj-header,
    .archive .proj-photo,
    .archive .proj-photo img,
    .archive .proj-desc {
        width: 100%;
        height: auto;
        position: static;
        padding: 0;
        background: none;
    }
    .archive .proj-header {
        background-color: rgba(51, 174, 176, 1);
    }
    .archive .proj-cell {
        width: auto;
        height: auto;
    }
}