img {
    max-width: 100%;
}

body {
    background-color: #f9f9f9;
}

a, a:hover {
    color: green;
}


.container-fluid {
    max-width: 1170px !important;
}

.header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
    background-color: #fff
}

.fixed-header {
    position: fixed;
    background: #328010;
    width: 100%;
    top: 0;
    z-index: 5;

}

.aside-content {
    top: 65px;
}

.header__logo {
    width: 100px;
    margin-right: 20px;
    flex-shrink: 0;
}



.header__logo img{
    max-width: 100%;
    
}



.site-wrapper {
    padding-top: 100px;
}

@media (max-width: 768px) {
    .site-wrapper.container-fluid {
        padding: 67px 0 0;
    }
    .site-header {
        font-size: 20px;
    }

}



/*Search*/

.search-wrapper {
    background: white;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
    margin-bottom: 30px;
}

.searchbar__btn {
    /*display: none;*/
    background: #328010;
    margin-left: -3px;
    border-radius: 0 3px 3px 0;
}
.searchbar__input {
    /*background-image: url(../img/search.svg);*/
    background-repeat: no-repeat;
    background-position: calc(100% - 10px);
    background-size: 16px;
    border-radius: 3px;
}

.search-plh {
    margin-bottom: 5px;
    display: block;
}



@media (max-width: 768px) {
    .search-wrapper {
        border-radius: 0;
        margin-bottom: 10px;
    }

}

.fixed-header {
    z-index: 999999;
}

.frequency {
    position: absolute;
    width: 20%;
    height: 60%;
    display: block;
    left: 40%;
    top: 20%;
    display: none;
}

/*Search*/



/*Categories*/
.categories-wrapper {
    background: white;
    padding: 16px;
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
}

.categories {
    flex-direction: column;
    margin-bottom: 25px;
}

.categories__btn {
    border-bottom: 1px solid silver;
    height: 35px;
    text-align: left;
    justify-content: flex-start;
    background: white !important;
    font-weight: 700;
}

.categories__btn.is-active {
    color: green !important;
    background: white !important;
}

@media(max-width: 768px) {

    .searchbar__input {
        max-width: 100%;
    }


    .footer-full__row {
        flex-direction: column;
        margin-bottom: 10px;
    }

    .categories__toggler {
        display: none;
    }

    .categories__btn.is-active {
        display: flex !important;
    }

    .categories {
        display: flex !important;
        height: auto !important;
        margin-bottom: 25px !important;
    }

    .categories__btn {
        height: 40px !important;
    }

    .footer-banner {
        margin: 0;
    }

    .footer-banner__text {
        position: relative;
        margin-top: -80px;
    }

    .footer-banner__image {
        display: flex;
        justify-content: flex-end;
    }

}
/*Categories*/

/* letters-list */
.letters-list {
    list-style: none;
    padding: 0;
    text-align: justify;
    display: block;
}

.letters-list__item {
    padding-right: 4.9px; 
    color: green !important;
}

.letters-list li {
    display: inline-block;
}

/* letters-list */


/* word-list */
.word-list {
    list-style: none;
    padding: 0;
    display: block;
}

.word-list__item {
    padding-right: 5px; 
    color: black;
}

/*.word-list li:not(:first-child):before {
    content: '*';
    margin-right: 5px;
}
*/
.word-list__item:hover {
    color: green;
}

.word-list li {
    display: inline-block;
}

/* word-list */



.footer-banner {
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
    margin-bottom: 5px;
    color: black;
}

.footer-banner__image {
    margin-bottom: 10px;
} 


.site-content {
    background: white;
    padding: 16px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
    border-radius: 4px;
}

@media(max-width: 768px) {
    .site-content {
        margin-bottom: 16px;
    }

}


/*Publication*/

.publication     {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 44px;
    border-radius: 4px;
    flex: 1;
    margin: 0;
}

.publication__btn {
    min-width: 44px;
    height: 100%;

}

.publication__btn_play.play-button {
    background: transparent url(../img/moscow/play.svg) no-repeat center;
    background-size: 20px;
    border: 1px solid #328010;
    background-position: 62%;
    border-radius: 50%;
    min-width: 34px;
    height: 34px;
    cursor: pointer;
    margin-right: 10px;
}

.publication__btn_play.play-button.playing {
    background: transparent url(../img/moscow/pause.svg) no-repeat center;
    background-size: 16px;
}

.publication__btn_download {
    /*background: transparent url(../img/moscow/download.svg) no-repeat left*/
}

.publication__btn_goodok{
    background-image: url("../img/goodok.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 75%;
}

.publication__img {
    width: 44px;
    height: 44px;
    margin-right: 8px
}

.publication__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    width: calc(100% - 184px)
}

.publication__artist, .publication__name {
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: left;
    width: 100%;
    max-width: 220px;
}


.publication__artist {
    font-weight: 400;
    color: #000;

    width: auto;
    font-weight: 900;
    flex-shrink: 0;
}

.publication__artist:after {
    content: "-";
    margin: 0 5px;
}

.publication__title {
    flex-grow: 1;
}

.publication__name {
    font-weight: 700;
    color: #007bfb;
    
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    width: auto;
    flex-shrink: 0;
    color: black;
    font-weight: normal;
}

.publication__link {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;

    display: flex !important;
    justify-content: flex-start;
}

.publication__link:after {
    content: '';
    flex-grow: 1;
    border-bottom: 1px dashed #d0d0d0;
    position: relative;
    top: -4px;
    margin: 0 4px;
}

.publication__title {
    max-width: 100%;
    overflow: hidden;
}

.publication__time {
    margin-right: 0;
}

/*Publication*/
    

.show-more  {
    border-radius: 40px;
    background: green;
    color: white;
    box-shadow: 4px 5px 4px rgba(0, 0, 0, 0.19);
    border-color: transparent;
    outline: none !important;
}


@media(max-width: 768px) {
    .show-more {
        margin-bottom: 16px;
        margin-top: 16px;
    }
}


/*PLAYER*/

footer {
    background: white;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
}

.site-player {
    width: auto;
    margin: 0 -6px;
    min-height: 55px;
    padding: 0;
    display: flex;
    align-items: center;
}

.jp-progress {
    position: absolute;
    width: 100%;
    left: 0;
    /*top: -5px;*/
    position: fixed;
    top: 50px;
}

.jp-seek-bar, .jp-volume-bar {
    /*border-color: #e22e49;*/
    border-radius: 0;
    border: none;
    /*background: rgba(0, 121, 250, 0.2);*/
    background: silver;
}

.jp-volume-bar-value, .jp-play-bar {
    height: 12px;
    background: #1c470a;
    border-radius: 0 7px 7px 0;
}

.jp-volume-bar-value:after, .jp-play-bar:after {
    background: #e22e49;
}

.jp-play-bar:after {
    display: none;
}

.jp-play {
    background-size: 20px;
    background-position: center;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 494.148 494.148' width='512' height='512'%3e%3cpath d='M399.035 203L135.397 22.516c-12.176-8.341-24.443-12.756-34.64-12.756-19.713 0-31.908 15.822-31.908 42.305v390.082c0 26.452 12.18 42.243 31.847 42.243 10.212 0 22.283-4.419 34.486-12.783l263.76-180.482c16.963-11.625 26.357-27.27 26.357-44.071.003-16.79-9.283-32.43-26.264-44.052z' data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%23fff2cc'/%3e%3c/svg%3e");
}

.jp-state-playing .jp-play{
    background-size: 16px;
    background-position: center;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 792 792'%3e%3cpath d='M282.856 0H169.714c-31.228 0-56.571 25.344-56.571 56.571v678.857c0 31.228 25.344 56.571 56.571 56.571h113.143c31.256 0 56.572-25.315 56.572-56.571V56.571C339.428 25.344 314.112 0 282.856 0zm339.429 0H509.143c-31.256 0-56.572 25.344-56.572 56.571v678.857c0 31.228 25.316 56.571 56.572 56.571h113.143c31.256 0 56.572-25.315 56.572-56.571V56.571C678.857 25.344 653.541 0 622.285 0z' data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%23fff2cc'/%3e%3c/svg%3e");

}

.jp-volume-icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3e%3cpath d='M295.166 4.873C272.465-4.699 247.404.04 229.765 17.24c-.415.405-.812.827-1.19 1.266l-113.27 131.498H80.071c-44.094 0-79.968 35.874-79.968 79.968v51.979c0 44.094 35.874 79.968 79.968 79.968h35.235l113.27 131.498c.378.439.775.862 1.19 1.266 11.658 11.367 26.532 17.317 41.826 17.316 7.932 0 15.978-1.601 23.743-4.875 22.596-9.527 36.633-30.695 36.633-55.242 0-11.042-8.95-19.992-19.992-19.992-11.042 0-19.992 8.95-19.992 19.992 0 12.306-9.325 17.194-12.183 18.399-2.855 1.203-12.716 4.422-21.584-3.716L139.618 328.881a19.99 19.99 0 00-15.147-6.944h-44.4c-22.047 0-39.984-17.937-39.984-39.984v-51.979c0-22.047 17.937-39.984 39.984-39.984h44.4a19.995 19.995 0 0015.147-6.944L258.216 45.361c8.772-8.045 18.576-4.84 21.415-3.644 2.898 1.221 12.353 6.176 12.353 18.615v291.592c0 11.042 8.95 19.992 19.992 19.992s19.992-8.95 19.992-19.992V60.332c.002-24.637-14.101-45.887-36.802-55.459zM416.512 313.484l.459-.842c5.228-9.59 14.96-27.439 14.96-56.675 0-30.328-10.53-48.906-15.59-57.835-5.446-9.605-17.644-12.98-27.251-7.535-9.605 5.445-12.979 17.645-7.535 27.251 4.138 7.3 10.392 18.334 10.392 38.119 0 19.044-6.067 30.172-10.081 37.536l-.49.898c-5.27 9.702-1.676 21.84 8.026 27.11a19.897 19.897 0 009.524 2.428c7.091 0 13.962-3.783 17.586-10.455z' data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%23fff2cc'/%3e%3cpath d='M445.999 98.339c-7.845-7.77-20.504-7.71-28.273.135-7.77 7.845-7.71 20.503.135 28.273 34.857 34.526 54.053 80.389 54.053 129.139 0 48.85-19.196 94.768-54.053 129.294-7.845 7.77-7.905 20.429-.135 28.273a19.927 19.927 0 0014.204 5.923 19.927 19.927 0 0014.068-5.789c42.496-42.092 65.898-98.099 65.898-157.702.001-59.503-23.401-115.454-65.897-157.546z' data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%23fff2cc'/%3e%3c/svg%3e");
    /*background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.717 27.717' width='512' height='512'%3e%3cpath d='M4.637 8.725H0v10.33h4.637l8.766 6.502s1.611 1.346 1.611-.045V2.066c0-1.092-1.418-.025-1.418-.025L4.637 8.725zM20.006 6.709a1.18 1.18 0 00-1.668 0 1.176 1.176 0 000 1.666 7.734 7.734 0 012.273 5.484 7.752 7.752 0 01-2.273 5.495 1.184 1.184 0 000 1.672c.23.23.531.344.836.344.301 0 .602-.113.832-.344a10.107 10.107 0 002.963-7.167 10.075 10.075 0 00-2.963-7.15z' data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%23fff2cc'/%3e%3cpath d='M23.207 2.994a1.185 1.185 0 00-1.676 0 1.19 1.19 0 000 1.671 12.97 12.97 0 013.824 9.206 13.038 13.038 0 01-3.824 9.25 1.187 1.187 0 000 1.67 1.193 1.193 0 001.676 0 15.434 15.434 0 004.51-10.92c0-3.934-1.514-7.875-4.51-10.877z' data-original='%23000000' class='active-path' data-old_color='%23fff2cc' fill='%23fff2cc'/%3e%3c/svg%3e");*/
}

.jp-audio {
    flex-grow: 1;
}

.jp-details {
    width: 30%;
    display: flex;
    align-items: center;
}

.jp-controls-holder {
    display: flex;
    width: 20%;
    flex-grow: 0;
    margin-left: auto;
    margin-right: 300px;
}


.jp-volume-bar-value:after, .jp-play-bar:after {
    display: none;
}

.jp-stop {
    font-size: 0;
    padding: 0;
    height: 26px;
    width: 26px;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    position: relative;
    outline: none !important;
    cursor: pointer;
    display: none;
}

.jp-stop:before {
    content: "";
    width: 10px;
    height: 10px;
    background: #007bfb;
    position: absolute;
    border-radius: 0px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.jp-repeat {
    font-size: 0;
    padding: 0;
    height: 26px;
    width: 26px;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    position: relative;
    outline: none;
    cursor: pointer;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .6;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3e%3cpath d='M69.816 256H0l93.096 93.096L186.2 256h-69.816c.224-77.016 62.6-139.4 139.616-139.632 22.672.432 44.952 6 65.16 16.296l34.896-34.896A207.988 207.988 0 00256 69.832C153.296 70.112 70.104 153.296 69.816 256zm325.8 0c-.224 77.016-62.6 139.4-139.616 139.632-22.672-.432-44.952-6-65.16-16.296l-34.896 34.896A207.988 207.988 0 00256 442.168c102.696-.296 185.88-83.472 186.184-186.168H512l-93.096-93.096L325.8 256h69.816z' data-original='%23161C27' class='active-path' data-old_color='%23161C27' fill='%23fff2cc'/%3e%3c/svg%3e");
}

.jp-forward, .jp-next {
    outline: none !important;
    font-size: 0;
    padding: 0;
    height: 26px;
    width: 26px;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    position: relative;
    outline: none;
    cursor: pointer;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 373.333 373.333' width='512' height='512'%3e%3cpath data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%23fff2cc' d='M0 314.667l181.333-128L0 58.667zM192 58.667v256l181.333-128z'/%3e%3c/svg%3e");
}

.jp-rewind, .jp-prev {
    outline: none !important;
    font-size: 0;
    padding: 0;
    height: 26px;
    width: 26px;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    position: relative;
    outline: none;
    cursor: pointer;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 373.333 373.333' width='512' height='512'%3e%3cpath data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%23fff2cc' d='M0 314.667l181.333-128L0 58.667zM192 58.667v256l181.333-128z'/%3e%3c/svg%3e");
}


.jp-repeat {
    display: none;
}

.jp-state-looped .jp-repeat {
    opacity: 1;
}

.jp-plh {
    opacity: .6;
    font-style: italic;
}

.jp-title {
    color: black;
}


.jp-title > span:first-child {
    font-weight: 900;
}

.jp-title > span:last-child {
    color: #fff2cc;
}




.jp-volume-controls {
    display: none;
}

.jp-gui.jp-interface {
    flex-direction: row-reverse;
    justify-content: space-between;
}

.jp-controls-holder {
    margin-left: 0;
    margin-right: 0;
}

.jp-details {
    width: auto;
    max-width: calc(100% - 120px);
}

.jp-gui.jp-interface {
    max-width: 100%;
}

.jp-title {
    overflow: hidden;
}

.jp-current-time-duration {
    position: absolute;
    width: 100%;
    padding: 0 16px;
    bottom: 0;
    line-height: 13px;
    color: white;
    z-index: 2;
}

.jp-current-time-duration {
    height: 1px;
}

.jp-current-time, .jp-duration {
    width: auto;
    position: relative;
    transform: translateY(-12px);
}


@media(max-width: 768px) {
    .jp-interface {
        flex-direction: column-reverse;
        align-items: center;
        padding-top: 4px;
    }

    .jp-controls-holder {
        margin: 0;
        width: auto;
    }

    .jp-details {
        width: 100%;
    }

    .jp-play {
        background-position: center;
    }
    .jp-title {
        margin: auto;
        max-width: 100%;
    }

    .site-player {
        width: calc(100% + 12px);
    }

    footer {
        height: 80px;
    }

    .jp-gui.jp-interface {
        flex-direction: column;
    }

    .jp-title {
        display: none;
    }

    .jp-audio {
        flex-grow: 0;
        margin-left: auto;
    }

}

/*PLAYER*/



/*SONG*/
.song {
    padding: 0 0 20px 0;
}

.song__meta {
    line-height: 1;
}


.song__play:before {
    content: attr(title);
}

.song__play {
    background: #328010;
    color: white;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    cursor: pointer;
}

.song__name {
    display: none;
}




.song__buttons {
    width: auto;
    padding: 0;
    height: 40px;
}

.song__btn {
    margin-left: 7px;
    cursor: pointer;
    border-color: green;
    color: green;
}

.song__title>span:last-child {
    color: green;
}

@media(max-width: 768px) {
        
    
    .song__play {
        font-size: 14px;
        width: 100%;
    }


    .song__btn {
        flex-grow: 1;
    }

    .song__buttons {
        margin-left: -7px;
        width: calc(100% - -7px);
        margin-top: 7px;
        height: auto;
    }

    .song__btn {
        text-align: center;
        align-items: center;
        justify-content: center;
        padding: 0;
        height: 40px;
    }

    .song__btn .purchase {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
}

/*Song*/





/*mobile menu*/
.mobile-menu__close,
.mobile-menu__shadow,
.mobile-menu-toggler {
    display: none;
}

@media(max-width: 768px) {

    .mobile-menu__close,
    .mobile-menu__shadow {
        display: flex;
    }


    .mobile-menu {
        position: fixed;
        top: 50px;
        bottom: 0;
        left: 0;
        right: 0;
        align-items: center;
        justify-content: center;
        padding: 16px;
        overflow: auto;
        display: none;
    }

    .mobile-menu.is-active {
        display: flex;
    }
    
    .mobile-menu__shadow {
        background: hsla(0, 0%, 0%, 0.48);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 3;
    }

    .mobile-menu .categories-wrapper {
        position: relative;
        z-index: 4;
    }


    .mobile-menu__close {
        position: absolute;
        z-index: 3;
        font-size: 28px;
        top: 0px;
        right: 0px;
        height: 40px;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .letters-list {
        margin-bottom: 0;
        font-size: 13px;
    }

    .categories.js-categories {
        margin-bottom: 12px !important;
    }
    /*mobile menu*/



    .mobile-menu-toggler {
        width: 40px;
        background: #328010;
        position: relative;
        margin-right: 5px;
        border-radius: 4px;
        display: block;
        background-size: 50%;
        background-repeat: no-repeat; 
        background-position: center;

        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 341.333 341.333' width='512' height='512'%3e%3cpath data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%23FFF' d='M0 277.333h341.333V320H0zM0 149.333h341.333V192H0zM0 21.333h341.333V64H0z'/%3e%3c/svg%3e");

    }

    .search-wrapper {
        display: flex;
    }
}

/*mobile menu*/




/*/*loader*/
.loader:before,
.spinner:before {
    color: green;
    position: fixed;
    }
/*loader*/

.footer-full .container-fluid {
    padding-bottom: 0px;
}


.footer-full__list a  {
    color: green;
}


@media(max-width: 768px) {
    .footer-full {
        text-align: center;
    }
}