@font-face {
    font-family: 'Maison Neue Book';
    src: url('../../../fonts/MaisonNeueWEB-Book.woff2') format('woff2'),
         url('../../../fonts/MaisonNeueWEB-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'maison_bold';
    src: url('../../../fonts/MaisonNeueWEB-Bold.woff2') format('woff2'),
         url('../../../fonts/MaisonNeueWEB-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body {margin: 0;padding: 0;font-family:"Maison Neue Book", Helvetica, Arial, Sans-Serif, sans-serif;  font-size: 14px;line-height:17px;text-rendering: optimizelegibility;color:#212121;}
button:focus {outline:0;}

.wrapper {height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;border:1px solid #e6e6e6;overflow:hidden;max-width:600px;min-width: 198px;}

.s-player {background-image: url(../../../img/player@2x.png);background-repeat:no-repeat;background-size:85px 70px;}

.top {background-color:#fafafa;border-bottom:1px solid #e6e6e6;background-size:cover;background-position:center;height:50%;/*max-height:250px;*/position: relative;width:100%;z-index:1;}
.top .cover {position:absolute;height:calc(100% - 32px);width:calc(100% - 32px);top:14px;left:14px;border:1px solid #d1d1d1;z-index:1;}
.top .playerHolder {display:none;background:#bfbebe;visibility: visible;opacity: 1;width: 100%;height:100%;position:absolute;z-index:1;}
.top .bgcover {position:absolute;background:#fafafa;height:100%;width:100%;z-index:0;opacity:0.6;}

.top #playlistBg {position:absolute;background:#fafafa;height:100%;width:100%;z-index:0;display:block;background-size:cover;background-position: center;opacity:.6;}
.dark .top #playlistBg {background-color:#222;}
.top #playlistBg.blur{ -webkit-filter: blur(7px);-moz-filter: blur(7px);-o-filter: blur(7px);-ms-filter: blur(7px);filter: blur(7px);width: 106%;height: 106%;margin-top: -2%;margin-left: -2%;}

.content {height:calc(50% - 1px);position: relative;width:100%;	background:#fafafa;z-index:1;}
.content .left {position:relative;max-width:300px;width:50%;height:100%;border-right:1px solid #e6e6e6;z-index:1;float:left;}
.content .right {position:relative;overflow-y:hidden;height:100%;z-index:0;}



.playlist-info {border-top:1px solid #fff;position:absolute;width:100%;height:calc(100% - 58px);border-bottom:1px solid #e6e6e6;}
.playlist-info p {margin:0;padding:0 15px;line-height:18px;}
.playlist-info p.title {font-size: 14px;padding:9px 15px 5px;}
.playlist-info p.autor {font-size: 11px;line-height: 14px;}
.playlist-info p a {color:#212121;text-decoration:none;}

#controller{position:absolute;width:calc(100% - 30px);height:55px;bottom:0;border-top:1px solid #fff;background:#f6f6f6;padding:0 15px;}
#controller .main {height:40px;padding:8px 0;width:110px;float:left;}
#controller .second{height:40px;padding:8px 0;width:45px;float:right;}

#controller button {float:left;cursor:pointer;width:25px;height:38px;font-size:12px;margin:0 5px 0 0;}

#controller button.play,#controller button.pause {border-radius:50%;width:38px;height:38px;margin:0 9px 0 0;}


#controller button.play {background-position: -19px 8px;}
#controller button.pause {background-position: -54px 8px;}
#controller button.prev {background-position: -45px -23px;}
#controller button.next {background-position: -63px -23px;}


#controller .second ul {padding:0;margin:0;}
#controller .second ul  li{list-style:none;margin-bottom:4px;}
#controller .second ul  li:last-child{margin-top:4px;margin-bottom:0;}
#controller .second ul  li a{display:block;font-size: 11px;text-decoration:none;width:43px;line-height:15px;height:15px;}

button, #controller .second ul  li a {background-color:#fafafa;text-align:center;color:#282828;border:1px solid #e6e6e6;border-radius:3px;}
button:hover, #controller .second ul  li a:hover {border:1px solid #1e1e1e;}



#playlist {margin:0;padding:0;border-bottom:1px solid #e6e6e6;background:#f0f0f0; position:absolute;width:100%;height:calc(100% - 32px);overflow:hidden;}




#playlist li {cursor:pointer;list-style:none;position:relative;display:block;position:relative;color: #212121;font-size: 11px; line-height: 13px; text-decoration:none;border-bottom:1px solid #e6e6e6;height:31px; padding-right:8px;background:#f0f0f0;}
#playlist li:hover, #playlist li.playing{background:#dbdbdb;}
#playlist li a {color: #212121;}
#playlist li span {line-height:31px;white-space: nowrap;}
#playlist li span.song-num {float:left;width:25px;text-align:center;font-size:10px;}
#playlist li span.song-title {float:left;width:calc(100% - 100px);padding-left:8px;overflow: hidden;text-overflow: ellipsis; }
#playlist li span.network-icon {position:absolute;top:0;right:18px;font-size:15px;line-height:30px;text-align:center;width:20px;}
#playlist li span.network-icon a {color:#bebebe;}
#playlist li span.network-icon a:hover {color:#212121;}
#playlist li img.song-cover {float:left;width:30px;height:30px;
background: rgb(130,101,115);
background: -moz-linear-gradient(left,  rgba(130,101,115,1) 0%, rgba(113,142,153,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(130,101,115,1)), color-stop(100%,rgba(113,142,153,1)));
background: -webkit-linear-gradient(left,  rgba(130,101,115,1) 0%,rgba(113,142,153,1) 100%);
background: -o-linear-gradient(left,  rgba(130,101,115,1) 0%,rgba(113,142,153,1) 100%);
background: -ms-linear-gradient(left,  rgba(130,101,115,1) 0%,rgba(113,142,153,1) 100%);
background: linear-gradient(to right,  rgba(130,101,115,1) 0%,rgba(113,142,153,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#826573', endColorstr='#718e99',GradientType=1 );
}


#playlist li span.network-icon a .fa-bandcamp {background-image: url(../../../img/ico-bc.svg);background-repeat:no-repeat;background-size: cover;height: 13px;margin-top: 5px;margin-left: -6px;opacity: 0.35;width: 32px;}
#playlist li span.network-icon a:hover .fa-bandcamp {opacity:1;}


.powered{position:absolute;width:100%;height:30px;bottom:0;border-top:1px solid #fff;background-color:#f6f6f6;}
.powered .logo {width:17px;height:16px;background-position: 1px -5px;position:absolute;top:7px;right:20px;}
.powered a {display:block;position:relative;height:30px;text-decoration:none;color: #d1d1d1;font-size: 11px;line-height: 29px;padding:0 15px;-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;}
.powered a span{color:#bfbebe;}
.powered a:hover, .powered a:hover span {color:#212121;}


/* sound player */
#soundPlayer {position:absolute;width:100%;height:100%;background-color: #f0f0f0;}
#soundPlayer .header {position:absolute;top:0;height:calc(100% - 85px);padding:15px;width:calc(100% - 30px);}
#soundPlayer .header .cover-sound {float:left;width:130px;height:130px;border:1px solid #ffffff;background-size:cover;background-position:center;}
#soundPlayer .header .title-sound {overflow:hidden;padding-left:15px;}
#soundPlayer .header .title-sound a {font-size: 11px;line-height: 15px;text-decoration:none;color:#969696;}
#soundPlayer .header .title-sound a span {display:block;color:#212121;}

#soundPlayer .footer {position:absolute;bottom:0;height:50px;width:100%;}
#soundPlayer .footer .controls {padding:13px 0 0 15px;width:35px;float:left;}
#soundPlayer .footer .controls button{width:28px;height:28px;border-radius:50%;cursor:pointer;}
#soundPlayer .footer .controls button.play{background-position:8px -28px;}
#soundPlayer .footer .controls button.pause{background-position:-22px -28px;}

#soundPlayer .bars {overflow-y:hidden;display: block;position: relative;padding:30px 15px 0 5px;height:50px;}
#soundPlayer .bars  a{position:absolute;right:15px;color:#d1d1d1;font-size:38px;bottom:48px;transition:opacity 0.3s ease 0s!important;-webkit-transition:opacity 0.3s ease 0s!important}
#soundPlayer .bars  a:hover{color:#2E2D2E;}
#soundPlayer.bandcamp .bars  a {bottom:52px;}
#soundPlayer .bars  a .fa-bandcamp {background-image: url(../../../img/ico-bc.svg);background-repeat:no-repeat;background-size: cover;height: 30px;opacity: 0.35;width: 60px;}
#soundPlayer .bars  a:hover .fa-bandcamp {opacity:1;}
#soundPlayer .bars .time {line-height:12px;font-size:10px;color:#bebebe;position: absolute;top: 13px;}
#soundPlayer .bars .time span.current-time{color:#969696;}
#soundPlayer .bars .time span.total-time{font-style:normal }

#soundPlayer .bars .status-bar {background-color: red;position: relative;display: block;border-radius: 4px;height: 8px;cursor: pointer;}
#soundPlayer .bars .loaded {border-radius: 4px;}
#soundPlayer .bars .played {background-color: #969696;border-radius: 4px;}
#soundPlayer .bars .handler {background-color: #eaeaea;border: 1px solid #bebebe;position: absolute;display: block;height: 13px;width: 13px;margin-top: -4px;margin-left: -4px;border-radius: 50%;z-index: 10;transition: all .3s linear;}

#soundPlayer .bars .status-bar {position: relative;width: 100%;height: 8px;background-color: #d1d1d1;margin: 0 auto;}
#soundPlayer .bars .status-bar .played {position: absolute;bottom: 0;left: 0;height: 100%;width: 0%;background-color: #666;z-index: 10;transition: all .3s linear;}
#soundPlayer .bars .status-bar .loaded {position: absolute;bottom: 0;left: 0;height: 100%;width: 0%;background-color: #cacaca;transition: all .3s linear;}




/* layer share */

.layer-share {display:none;position:absolute;background-color:rgba(25, 25, 25, 0.9);width:calc(100% - 30px);height:calc(100% - 30px);padding:15px;z-index:10;}
.layer-share.open {display:block}
.layer-share p{padding:0;margin:0 0 5px 0;font-size:10px;color:#f0f0f0;}
.layer-share ul {padding:0;margin:0 0 10px 0;}
.layer-share ul li{list-style:none;display:inline;}
.layer-share ul li a{background:#787878;color:#282828;display:inline-block;height:30px;width:30px;line-height:32px;font-size:17px;margin-right:6px;border-radius:50%;text-align:center;position:relative;}

.layer-share ul li a i {left: 7px;position: absolute;top: 6px;}
.layer-share ul li:nth-child(1) a i {left: 9px;font-size:19px;}
.layer-share ul li:nth-child(2) a i {font-size:19px;}
.layer-share ul li:nth-child(3) a i {left: 9px;font-size:19px;}
.layer-share ul li:nth-child(4) a i {left: 7px;top: 7px;font-size:16px;}
@-moz-document url-prefix() { 
    .layer-share ul li:nth-child(4) a i {left: 8px;top: 6px;}
}

.layer-share ul li a:hover{background:#f6f6f6;}
.layer-share input {border:1px solid #fff;background:#fff;width:calc(100% - 10px);height:20px;color: #787878;padding:0 5px;font-size: 10px;letter-spacing: 0;line-height: 13px;}
.layer-share .close {position:absolute;top:15px;right:15px;}
.layer-share .close a{color:#f0f0f0;display:block;width:12px;height:12px;background-position:0 -55px;}

/*transitions*/
#playlist li,
#playlist li span.network-icon a , 
.powered a span, #controller button, 
#controller .second ul  li a,
#soundPlayer .footer .controls button,
#soundPlayer .bars  a,
.layer-share,
.layer-share ul li a{-webkit-transition: all 0.3s ease 0s;-moz-transition: all 0.3s ease 0s;-ms-transition: all 0.3s ease 0s;-o-transition: all 0.3s ease 0s;transition: all 0.3s ease 0s;}


.block {display: block;clear: both;}
.hidden {display: none;}
.mCSB_container {margin-right: 0;}
.mCustomScrollBox > .mCSB_scrollTools {transition: all .15s linear;opacity: 1;width: 12px;}


.mCS-light-thick > .mCSB_scrollTools .mCSB_draggerRail {
	background:none;
    width: 8px;
}

.mCS-light-thick > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background:#b4b4b4;
    border-radius: 4px;
    width: 8px;
}



.mCSB_scrollTools .mCSB_draggerContainer {

    right: 4px;
    top:3px;
    bottom:3px;

}




/*dark*/

.dark .s-player {background-image: url(../../../img/player-dark@2x.png);background-repeat:no-repeat;background-size:85px 70px;}


.dark .top,
.dark .content,
.dark button, 
.dark #controller .second ul  li a,
.dark #playlist,
.dark #playlist li.playing{background-color:#222;}

.dark #soundPlayer {background-color:#191919;}

.dark.wrapper,
.dark .top,
.dark .top .cover{border-color:#0f0f0f;}

.dark .top .bgcover {background:#222;}

.dark .playlist-info {border-bottom: 1px solid #0f0f0f;border-top:1px solid #2d2d2e;}
.dark .playlist-info p a {color:#f0f0f0}


.dark .content .left {border-color:#0f0f0f;}

.dark #controller{border-color:#2d2d2d;background:#1e1e1e;}

.dark  button:hover, .dark #controller .second ul  li a:hover {border-color:#fff;}
.dark button, .dark #controller .second ul  li a {color:#f0f0f0;border-color:#2d2d2d;}

.dark .powered{background-color:#191919;border-color:#2d2d2e;}
.dark .powered a {color: #5a5a5a;}
.dark .powered a span{color:#8c8c8c;}
.dark .powered a:hover, .dark .powered a:hover span {color:#fff;}

.dark #playlist {border-bottom:1px solid #0f0f0f;}

.dark #playlist li {color: #f0f0f0;border-color:#000;background-color:#191919;}
.dark #playlist li a {color: #f0f0f0;}
.dark #playlist li.playing,
.dark #playlist li:hover{background-color:#323232;}
.dark #playlist li span.network-icon a {color:#5a5a5a;}
.dark #playlist li span.network-icon a:hover {color:#fff;}



.dark #soundPlayer .header .cover-sound {border-color:#0f0f0f;}
.dark #soundPlayer .header .title-sound a {color:#f0f0f0}
.dark #soundPlayer .bars  a{color:#3c3c3c;}
.dark #soundPlayer .header .title-sound a span,
.dark #soundPlayer .bars  a:hover{color:#fff;}
.dark #soundPlayer .bars .played {background-color: #969696;}
.dark #soundPlayer .bars .handler {background-color: #262626;border: 1px solid #383838;}
.dark #soundPlayer .bars .status-bar {background-color: #3c3c3c;}
.dark #soundPlayer .bars .status-bar .loaded {background-color: #565656;}


.dark #playlist li span.network-icon a .fa-bandcamp {background-image: url(../../../img/ico-bc-white.svg);}
.dark #soundPlayer .bars  a .fa-bandcamp {background-image:url(../../../img/ico-bc-white.svg)}


.dark .mCS-light-thick > .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background:#3d3d3d;}


@media only screen and (max-width: 399px) {
    #playlist {border-top:1px solid #e6e6e6;}
    .dark #playlist {border-color:#000;}
    .content .left {width:100%;height:130px;max-width:inherit;border-right:none;position:absolute;}
    .content .right {top:130px;width:100%;min-height:93px;z-index:1;position:absolute;}
    #soundPlayer .bars  a{font-size:25px;bottom:53px;}
}
@media only screen and (min-width: 401px) {
    .content {height:130px;}

    /*.content .left {width: 199px;}
    .content .right {width: calc(100% - 200px);}*/
}



@media only screen and (min-height: 345px) and (max-height: 363px) {
    /*#playlist {max-height: 62px;}*/
    /*.content .right {max-height: 93px;}*/
}
@media only screen and (min-height: 401px) {
    .content {height:130px;}
}