img {
    max-width: 100%;
}

body {
    background-color: #f9f9f9;
}


.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
}

.header__logo {
    width: 83px;
    height: 31px;
    -o-object-fit: contain;
    object-fit: contain
}


.site-title {
    text-align: center;
    margin: 14px 0;
    font-weight: normal;
}


/*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;
}
.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;
}
/*Search*/



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

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

.categories__btn.is-active {
    background: white !important;
    color: #4a90e2 !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*/


.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;
} 


/*Publication*/
.publication     {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 44px;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
    background-color: #fff;
    flex: 1;
    margin-bottom: 5px
}

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

}

.publication__btn_play.play-button {
    background: transparent url(../img/freemp3/play-13.svg) no-repeat left
}

.publication__btn_play.play-button.playing {
    background: transparent url(../img/freemp3/pause-13-b.svg) no-repeat left
}

.publication__btn_play.play-button.loading {
    background: transparent url(../img/freemp3/load-13-b.svg) no-repeat left
}

.publication__btn_download {
    background: transparent url(../img/freemp3/download-13.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%
}

.publication__name {
    font-weight: 700;
    color: #007bfb
}

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

.publication__title {
    flex-grow: 1;
}

.publication__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

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

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

/*Publication*/
    




/*Show more button*/
.show-more {
    outline: none !important;
    font-size: 0;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    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='%23007bfb'/%3e%3c/svg%3e");
}
.show-more.is-pending:before {
    display: none;
}

.show-more.is-pending {
  -webkit-animation: rotating .6s linear infinite;
  -moz-animation: rotating .6s linear infinite;
  -ms-animation: rotating .6s linear infinite;
  -o-animation: rotating .6s linear infinite;
  animation: rotating .6s linear infinite;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

/*Show more button*/


/*PLAYER*/

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

.site-player {
    width: auto;
    margin: 0 -6px;
}

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

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

.jp-volume-bar-value, .jp-play-bar {
    background: #007bfb;
    height: 3px;
}

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

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

.jp-play {
    background-image: url(../img/freemp3/play-13.svg);
}

.jp-state-playing .jp-play{
    background-image: url(../img/freemp3/pause-13-b.svg);

}

.jp-volume-icon {
    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='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='%23007BFB'/%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='%23007BFB'/%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='%23007bfb'/%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='%23007bfb' fill='%23007bfb'/%3e%3c/svg%3e");*/
}


.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='%23007bfb'/%3e%3c/svg%3e");
}

.jp-forward {
    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='%23007BFB' d='M0 314.667l181.333-128L0 58.667zM192 58.667v256l181.333-128z'/%3e%3c/svg%3e");
}

.jp-rewind {
    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='%23007BFB' 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-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;
}


@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;
    }

}

/*PLAYER*/



/*SONG*/

.song {
    padding: 20px;
}

.song__descr {
    display: none;
}

.song__meta {
    line-height: 1;
}


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

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

.song__name {
    display: none;
}

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



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

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

.song__title>span:last-child {
    color: #007bfb;
}

@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;
    }

    .song__btn .purchase {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 4px 10px 5px;
    }
}

/*Song*/


.sets-header {
    font-size: 20px;
    margin: 20px 0 10px;
}