#wrapper::before {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    background: #000;
    color: #fff;
    padding: 5px 10px;
    font-size: 10pt;
    opacity: .3;
    display: none;
}

/* tablet
----------------------------------------------------------------------- */

@media screen  and (max-width: 1259px) {
    #wrapper::before {
        content: "tablet";
    }

    .inset {
        width: 980px;
    }

    #player .track {
        max-width: 350px;
    }

    #slogan .item {
        font-size: 20pt;
    }

    #articles .item {
        width: 313px;
    }

    #podcasts .items {
        margin: 0;
    }

    #podcasts .item {
        width: 100%;
        float: none;
        margin: 0 0 20px 0;


    }

    #releases .item {
        width: 230px;
    }

    #footer .col {
        width: 313px;
    }


    #peoples .item {
        width: 230px;
        height: 340px;
    }


    #articles.programs .item {
        width: 480px;
    }

}

/* phablet
----------------------------------------------------------------------- */

@media screen and  (max-width: 999px) {
    #wrapper::before {
        content: "phablet";
    }

    .inset {
        width: 680px;
    }

    #slogan {
        display: none;
    }


    #nav .social {
        display: none;
    }


    #articles .item {
        width: 330px;
    }

    #articles .item:nth-child(3) {
        display: none;
    }


    #chart .left {
        width: 100%;
        padding: 0;
    }

    #chart .right {
        width: 100%;
        padding: 0;
    }

    #releases .item {
        width: 330px;
    }

    #footer .col {
        width: 213px;
    }

    #peoples .item {
        width: 213px;
        height: 320px;
    }

    #articles.programs .items {
        margin: 0;
    }

    #articles.programs .item {
        width: 100%;
        float: none;
        margin: 0 0 20px 0;
    }

}

/* phone
----------------------------------------------------------------------- */

@media screen  and (max-width: 719px) {
    #wrapper::before {
        content: "phone";
    }

    body {
        padding-top: 110px;
    }

    .inset {
        width: 100%;
        padding: 0 10px;
    }

    #nav {
        height: 110px;
        transition: height .3s;
    }


    ._scroll #nav {
        height: 60px;
    }

    #nav .inset {
        padding-right: 0;
    }

    #nav .social {
        display: none;
    }

    #header .logo {
        height: 70px;
    }

    #header .contacts {
        padding: 0;
    }


    #player .track {
        padding: 5px 10px;
        margin: 0;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: var(--purple);
        max-width: none;
    }

    #slider .control {
        display: none;
    }

    #slider .item .status {
        right: 0;
        bottom: 10px;
        height: auto;
        line-height: normal;
        font-size: 10pt;
        padding: 10px 20px;
    }


    #slider .item .progress {
        display: none;
    }

    #slider .item .play {
        display: none;
    }

    #slider .item.online .status {
        padding-left: 20px;
    }

    #articles .items {
        margin: 0;
    }

    #articles .item {
        width: 100%;
        float: none;
        margin: 0 0 20px 0;
    }


    #releases .items {
        margin: 0;
    }

    #footer .cols {
        margin: 0;
    }

    #releases .item {
        width: 100%;
        float: none;
        margin: 0 0 20px 0;
    }

    #footer .col {
        width: 100%;
        float: none;
        margin: 0 0 20px 0;
    }

    #peoples .items {
        margin: 0;
    }

    #peoples .item {
        width: 100%;
        height: auto;
        float: none;
        margin: 0 0 20px 0;
    }


    .page .image {
        float: none;
        width: 100%;
        margin: 0 0 20px 0;
    }

    #schedule .item {
        margin-bottom: 20px;
    }

    #schedule .item .time {
        float: none;
        margin: 0 0 5px 0;
    }

    #schedule .item .image {
        float: none;
        margin: 0 0 5px 0;
        width: 100%;
        height: auto;
        padding-top: 40%;
    }

    #schedule .item .title {
        display: block;
        width: 100%;
    }

    .item-audio .place {
        width: 40px;
        line-height: 40px;
        font-size: 20pt;
        position: absolute;
        font-weight: bold;
        color: #fff;
        left: 0;
        top: 0;
        z-index: 5;
        text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
        transition: opacity .5s;
    }

    .item-audio._playing  .place{
        opacity: 0;
    }

    .item-audio .image {
        width: 40px;
        height: 40px;
    }

    #chart  .item-audio .image{
        transition: opacity .5s;
        opacity: .5;
    }

     #chart  .item-audio._playing  .image{
        opacity: 1;
    }

    .item-audio .progress {
        margin-left: 0 !important;
    }

    .item-audio .title b {
        font-size: 10pt;
    }

    .item-audio .title i {
        font-size: 10pt;
    }

    #articles .item:nth-child(3) {
        display: block;
    }


    #black {
        background-position: right 20px top 120px;
    }

    ._scroll #black {
        background-position: right 20px top 80px;
    }

}