/* SET BASE
----------------------------------------------- */
* {background: transparent; margin: 0; padding: 0; outline: none; border: 0;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
table {border-collapse: collapse; border-spacing: 0;}
input, select {vertical-align: middle;}
article, aside, figure, figure img, hgroup, footer, header, nav, section, main {display: block;}
img {max-width: 100%;}
.clr {clear: both;}
.clearfix:after {content: ""; display: table; clear: both;}
.sect-content {
    position: relative;
}
.share-btn svg {
    height: 20px;
    margin-right: 10px;
}
.share-btn {
    background-color: #2c2d33 !important;
    border: 2px solid #DA8320;
    color: #DA8320 !important;
    display: flex;
    cursor: pointer;
    align-items: center;
    border-radius: 5px;
    height: 38px;
    padding: 0 10px;
    font-weight: 700;
    margin: 10px auto 0;
    position: relative;
    justify-content: center;
    width: 100%;
}
.share-popup {
    display: none;
    position: absolute;
    top: 43px;
    left: 0;
    right: 0;
    z-index: 99;
    cursor: default;
    background: #fff;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
    padding: 16px 16px 0;
}

.share-popup a {
    display: block;
    border: 1px solid;
    padding: 5px 8px;
    margin-bottom: 16px;
}
.share-vk {
    color: #2488B4;
}
.share-ok {
    color: #EC9E04;
}
.share-tw {
    color: #23A0D7;
}
.share-tg {
    color: #33B0E7;
}
@media screen and (max-width: 950px) {
    .share-btn {width: 280px;}
}


ul.sort li {
    position: relative;
}
ul.sort li.asc:before,ul.sort li.desc:before {
    content: '';
    display: block;
    border-bottom: 3px solid #869AB4;
    border-left: 3px solid #869AB4;
    width: 4px;
    height: 4px;
    transform: rotate(138deg);
    position: absolute;
    top: 12px;
}
ul.sort li.desc:before {
    transform: rotate(316deg);
    top: 8px;
}   
span.sortn1 svg {
    position: absolute;
    top: 12px;
    left: 10px;
    width: 24px;
    fill: #b9bdd6;
}
span.sortn1 {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 45px;
    height: 45px;
    background: #5f6b7a;
}
span.sortn {
    position: absolute;
    z-index: 999;
    width: 196px;
    height: 45px;
    display: block;
    top: -62px;
    right: 0;
    background: #869AB4;
    cursor: pointer;
}
span.sortn:before {
    content: 'РЎРћР РўРР РћР’РђРўР¬ РџРћ';
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    line-height: 46px;
    margin-left: 15px;
}
span.sortn form:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: -12px;
    right: 17px;
    border: 6px solid transparent;
    border-bottom-color: #fff;
}
span.sortn form a {
    display: block;
    height: 28px;
    line-height: 26px;
    text-indent: 20px;
}
@media screen and (max-width: 700px) {
span.sortn form {
    min-width: 168px;
    padding: 10px 14px;
}

}    

span.sortn form {
    position: absolute;
    z-index: 2;
    top: 45px;
    visibility: hidden;
    right: 0;
    background: #fff;
    font-size: 14px;
    white-space: nowrap;
    font-weight: 400;
    line-height: 46px;
    cursor: default;
    color: #484848;
    padding: 0 14px;
    -webkit-box-shadow: 4px 0 22px 0 rgb(19 20 21 / 35%);
    -moz-box-shadow: 4px 0 22px 0 rgba(19,20,21,.35);
    box-shadow: 4px 0 22px 0 rgb(19 20 21 / 35%);
    -webkit-transform: perspective(900px) rotate3d(1,0,0,-90deg);
    transform: perspective(900px) rotate3d(1,0,0,-90deg);
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-perspective-origin: 50% 100%;
    perspective-origin: 50% 100%;
    left: 0;
}
span.sortn form a {
    color: #484848;
    text-decoration: none;
}
span.sortn:hover form {
    visibility: visible;
    -webkit-transform: perspective(900px) rotate3d(1,0,0,0deg);
    transform: perspective(900px) rotate3d(1,0,0,0deg);
}


.selections {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
ul.nav {
    width: 100%;
    display: flex;
}

ul.nav li a, ul.nav li span {
    display: block;
    background: #ba9fc4;
    padding: 10px 15px;
    margin-right: 4px;
    border-radius: 5px;
    color: #000000;
    font-weight: 600;
}

ul.nav li span {
    background: #9d3dc1;
    color: #fff;
}
body {font: 13px 'Montserrat', sans-serif; line-height: normal; padding: 0; margin: 0;        
color: #000; background: #111 url(../images/bg.jpg) center top fixed no-repeat; 
min-height: 100%; width: 100%; font-weight: 400;}
a {color: #000; text-decoration: none;}
a:hover, a:focus {color: #e74c3c; text-decoration: none;}
h1, h2, h3, h4, h5 {font-weight: 700; font-size: 18px;}

button, textarea, input[type="text"], input[type="password"] {appearance: none; -webkit-appearance: none; 
	font-size: 16px; font-family: 'Montserrat' !important;}

.button, .btn, .pagi-load a, .up-second li a, .usp-edit a, .qq-upload-button, button:not(.color-btn):not([class*=fr]), 
html input[type="button"], input[type="reset"], input[type="submit"], .meta-fav a, .usp-btn a {
display: inline-block; text-align: center; padding: 0 10px; height: 35px; line-height: 35px; 
border-radius: 10px; cursor: pointer; color: #fff; background-color: #8e44ad; font-size: 15px; font-weight: 800;}
.button:hover, .btn:hover, .up-second li a:hover, .usp-edit a:hover, .qq-upload-button:hover, 
.pagi-load a:hover, .usp-btn a:hover,
button:not(.color-btn):hover, html input[type="button"]:hover, input[type="reset"]:hover, 
input[type="submit"]:hover, .meta-fav a:hover 
{background-color: #9b59b6; color: #fff; box-shadow: 0 10px 20px 0 rgba(0,0,0,0);}
button:active, input[type="button"]:active, input[type="submit"]:active {box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.1);}

input[type="text"], input[type="password"] {height: 40px; line-height: 40px;
border-radius: 4px; border: 0; padding: 0 15px;}
select {height: 40px; border: 0; padding: 0 15px;}
textarea {padding: 15px; overflow: auto; vertical-align: top; resize: vertical;}
input[type="text"], input[type="password"], select, textarea {width: 100%; background-color: #fff; color: #000; 
box-shadow: inset 0 0 0 1px #e3e3e3, inset 1px 2px 5px rgba(0,0,0,0.1);}
select {width: auto;}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus 
{box-shadow: inset 0 0 0 1px #3498db, inset 1px 2px 5px rgba(0,0,0,0.1);}
input::placeholder, textarea::placeholder {color: #000; opacity: 0.5; font-size: 14px;} 
input:focus::placeholder, textarea:focus::placeholder {color: transparent}

.img-box, .img-wide, .img-square, .img-resp, .img-resp-vert, .img-resp-sq, .img-fit, .img-fit-col {overflow: hidden; position: relative;}
.img-resp {padding-top: 60%;}
.img-resp-vert {padding-top: 124%;}
.img-resp-sq {padding-top: 100%;}
.img-box img, .img-square img, .img-resp img, .img-resp-vert img, .img-resp-sq img {width: 100%; min-height: 100%; display: block;}
.img-resp img, .img-resp-vert img, .img-resp-sq img {position: absolute; left: 0; top: 0;}
.img-wide img {width: 100%; display: block;}
.img-fit img {width: 100%; height: 100%; object-fit: cover;}
.nowrap {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.img-fit-col img {width: 100%; height: 200px; object-fit: cover;opacity: 0.9;}

.fx-row, #dle-content {display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
.fx-col {display:-ms-flexbox;display:-webkit-flex;display:flex; 
-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}
.fx-center {-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}
.fx-middle {-ms-flex-align:center;-webkit-align-items:center;align-items:center}
.fx-start {-webkit-justify-content:flex-start;justify-content:flex-start;}
.fx-first {-ms-flex-order: -1;-webkit-order: -1;order: -1;}
.fx-last {-ms-flex-order: 10;-webkit-order: 10;order: 10;}
.fx-1 {-ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; 
	max-width: 100%; min-width: 50px;}
.fx-between {-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}

b, strong, h1, h2, h3, h4, h5, .fw700 {font-weight: 800;}
.icon-left .fa, .icon-left .icon {margin-right: 10px;}
.icon-right .fa, .icon-right .icon {margin-left: 10px;}
.hidden, #dofullsearch {display: none;}
.anim {transition: color .3s, background-color .3s, opacity .3s;}
.anim-all {transition: all .3s;}
.mtitle, .sub-title h1, .form-wrap h1 {margin-bottom: 30px; font-size: 24px; font-weight: 800;}
#dle-content > *:not(.album-item):not(.artist-item):not(.collection-item) {width: 100%;}


/* BASIC GRID
----------------------------------------------- */
.wrap {min-width:320px; position: relative; min-height: 100vh; padding-top: 60px; padding-bottom: 60px;}
.wrap-center {max-width:1240px; margin:0 auto; position:relative; z-index:20;}
.wrap:before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.6;
 background: linear-gradient(60deg, #820af5, #0aabf5, #f50ae2, #f59d0a);}
.wrap-main {box-shadow: 0 0 60px 0 rgba(0,0,0,0.3); background-color: #2c2d33; 
	border-radius: 0px; overflow: hidden; z-index: 100;}
.col-left {width: 260px; background-color: 2c2d33; box-shadow: 60px 0 60px -60px rgba(0,0,0,0.1); color:#fff;}
.col-main {min-height: 100vh;}
.topline {background-color: #2c2d33; padding: 30px 60px; border-bottom:1px #212329 solid;}
.content {padding: 30px 60px; background:#2c2d33; color:#fff;}
.footer {padding: 30px 60px 30px 140px; color: #fff;  line-height: 1.7; 
background: url(../images/icon.png) 60px center no-repeat;}

#gotop{position:fixed; width:40px; height:40px; line-height:40px; right:10px; bottom:10px;
z-index:9998; display:none; background-color:#fff; color:#222; cursor:pointer; font-size:16px; 
border-radius:50%; text-align:center; box-shadow: 0 1px 4px rgba(0,0,0,0.2);}

.col-left a {
color:#fff;
}

.col-left .btn-menu {
color:#000;
}

/* HEADER
----------------------------------------------- */
.logo {display: block; width: 260px; height: 90px;}
.login-btns > * {display: inline-block; vertical-align: middle;
	font-size: 16px; cursor: pointer; height: 30px; border-radius: 50%; line-height: 30px; text-align: center;}
.btn-login {color: #fff; background-color: #8e44ad; width: 30px;}
.btn-login:hover {background: #9b59b6; color: #fff;}
.share {width:225px; height:36px; margin-top: -6px; margin-right: 20px; position: relative; top: 3px; white-space: nowrap;}
.share a {display:inline-block; vertical-align: top; width:36px; height:36px; border-radius:50%; margin-right:10px;
box-shadow:5px 5px 16px 0 rgba(0,0,0,0.1); background:url(../images/share.png) -2px -1px no-repeat;}
.share a:last-child {margin:0;}
.share a:nth-child(2) {background-position:-46px -1px;}
.share a:nth-child(3) {background-position:-89px -1px;}
.share a:nth-child(4) {background-position:-132px -1px;}
.share a:nth-child(6) {background-position:-174px 0;}
.share a:nth-child(5) {background-position:-220px -1px;}
.share a:hover {transform:rotate(20deg);}

.search-wrap {margin-right: 30px;}
.search-box {position:relative;}
.search-box input, .search-box input:focus {padding: 0 30px 0 15px; 
background-color: #f2f6f8; color: #000; border-radius: 15px; box-shadow: none; height: 30px; line-height: 30px;}
.search-box input:not(:focus)::placeholder {color: #000; opacity: 0.5; font-size: 13px;} 
.search-box button {position:absolute; right:3px; top:0px; z-index:10; width: 30px;
background-color:transparent !important; color:#000 !important; font-size: 12px !important; 
height: 30px !important; line-height: 30px !important; padding: 0 !important;}


/* SECTION
----------------------------------------------- */
.sect + .sect, .sect + #dle-content {margin-top: 30px;}
.sect-header {margin-bottom: 30px;}
.sect-title {font-size: 24px; font-weight: 800; letter-spacing: 1px; max-width: 100%; min-width: 50%;}
.sect-title-col {font-weight: 500; font-size: 1.875em; color: #5a5a5a; padding-top: 10px; letter-spacing: 1px; max-width: 100%; min-width: 50%;}
.sect-title a {color: #01afe3;}
.sect-title a:hover {text-decoration: underline;}
.sect-link {display: inline-block; color: #949494;  margin-left: 15px;}
.sect-col {width: 49%; margin-bottom: 15px;}


/* ALBUM, ARTIST, COLLECTION
----------------------------------------------- */
.album-item {width: 18.4%; text-align: center; margin-bottom: 15px;}
.album-in, .artist-in, .collection-in, .track-item a {display: block; position: relative;}
.album-img {border-radius: 6px; margin-bottom: 15px;}
.album-title {font-weight: 600;}
.album-subtitle { color: #949494; margin-top: 3px;}
.track-item a {
    color: #fff;
}
.artist-item {width: 12%; text-align: center; margin-bottom: 15px;}
.artist-img {border-radius: 50%; margin-bottom: 15px;}
.artist-title {font-weight: 600; }

.collection-item {width: 32%; margin-bottom: 15px;}
.collection-img {border-radius: 6px;}
.collection-img:before {position: absolute; z-index: 1; left: 0; top: 0; right: 0; bottom: 0; 
background-color: rgba(0,0,0,0.6); content: '';}
.collection-desc {position: absolute; z-index: 2; left: 0; bottom: 0; right: 0; padding: 15px; color: #fff;}
.collection-subimg {width: 60px; height: 60px; border-radius: 4px; margin-right: 15px;}
.collection-title {font-weight: 600;}
.collection-subtitle { margin-top: 3px; opacity: 0.8;}

.album-in:hover .album-img, .collection-in:hover .collection-img, .artist-in:hover .artist-img 
{animation: shad 2s infinite linear;  animation-direction: alternate;}
@keyframes shad { 
	0% {box-shadow: 0 0 20px #fff;}
	10% {box-shadow: 0 0 30px #fff;}
	40% {box-shadow: 0 0 20px #0aabf5;}
	70% {box-shadow: 0 0 30px #f50ae2;}
	100% {box-shadow: 0 0 20px #f59d0a;}
}


/* TRACK
----------------------------------------------- */
.track-item {
    background-color: #212329;
    border-radius: 6px;
    padding: 8px 15px;
    position: relative;
    margin-bottom: 8px;
}
.sect-count .track-item {padding-left: 45px;}
.track-count {font-weight: 800; color: #c4c4c4; z-index: 10;
position: absolute; top: 50%; left: 15px; margin-top: -10px;
 width: 20px; height: 20px; line-height: 20px; text-align: center;}
.track-fav {color: #c4c4c4; margin-right: 15px; cursor: pointer;}
.track-img {width: 40px; height: 40px; border-radius: 4px; margin-right: 15px;}
.track-time {color: #949494; font-size: 11px; margin-left: 15px;}
.track-dl {margin-left: 8px; width: 20px; height: 20px; line-height: 20px; text-align: center; 
border-radius: 50%; background-color: #c4c4c4; color: #fff !important; font-size: 12px;}
.track-title {font-weight: 600;}
.track-subtitle {color: #949494; margin-top: 3px; }
.track-dl:hover {background-color: #8e44ad;}
a:hover .track-fav {color: #8e44ad;}
.track-play {width: 40px; height: 40px; line-height: 40px; text-align: center; 
color: #fff; background-color: rgba(0,0,0,.3); position: absolute; left: 0; top: 0; z-index: 2;
font-size: 12px; padding-left: 3px; cursor: pointer;}
.show-player .track-play {padding-left: 0;}
.show-player .track-play, .track-play:hover {background-color: #e74c3c;}


/* SIDE
----------------------------------------------- */
.side-box {padding: 0 30px; margin-top: 30px;}
.side-bt {font-size: 18px; font-weight: 800; letter-spacing: 1px; margin-bottom: 30px;}

.tt {}
.tt + .tt {margin-top: 15px;}
.ta {width: 28%; margin-bottom: 15px; text-align: center;}
.ta .artist-title {font-size: 12px;}

.side-nav {padding-left: 30px; font-weight: 600; }
.side-nav li {margin-bottom: 15px; position: relative;}
.side-nav > li:before {content:"\f111"; font-family:'FontAwesome'; color:#8e44ad; 
font-size: 8px; position: absolute; left: -20px; top: 4px}
.hidden-menu {padding-top: 15px; margin-bottom: 8px; font-weight: 400;}
.hidden-menu li {margin-bottom: 8px;}
.hidden-menu li a:not(:hover) {color: #949494;}
.menu-btn-toggle {cursor: pointer; position: absolute; right: 0; top: 0; 
width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; 
background-color: #8e44ad; color: #fff;}


/* SEO DESCRIPTION
----------------------------------------------- */
.site-desc {line-height: 1.75; color: #fff; margin-top: 60px; text-align: justify; font-size: 12px;}
.site-desc h1, .site-desc h2 {font-size: 18px; font-weight: 600; letter-spacing: 1px; margin-bottom: 15px; color: #fff;}
.site-desc li {list-style-type: disc; margin-left: 40px;}
.site-desc a {color: #e74c3c; text-decoration: underline;}
.site-desc img {float: left; margin: 0 10px 10px 0;}
.slice {overflow:hidden; position:relative; transition:height .2s;}
.slice-masked:before {content:'';position:absolute;z-index:1;bottom:0px;left:0;right:0;height:120px;pointer-events:none;
background:linear-gradient(to bottom, rgba(242,246,248,0) 0%, #f2f6f8 100%);}
.slice-btn {margin:15px 0 0 0;}
.slice-btn span {display:inline-block; cursor:pointer; text-decoration:underline; color:#8e44ad; }


/* FOOTER
----------------------------------------------- */
.ft-one .fx-1 {text-align: right;}
.ft-one a {margin-left: 15px; font-weight: 600; color: #fff;}
.ft-two {margin-top: 10px; font-size: 12px; opacity: 0.6;}
.footer a:hover {text-decoration: underline;}


/* BOTTOM NAVIGATION
----------------------------------------------- */
.bottom-nav {line-height:40px; text-align:center; padding:30px 0 15px 0;}
.pagi-nav {max-width:100%; display:inline-block;}
.pagi-nav > span {display:inline-block;}
.pprev, .pnext {}
.pprev {}
.pnext a, .pprev a, .pprev > span, .pnext > span {display:block; width:46px; text-align:center;}
.navigation {text-align:center;}
.navigation a, .navigation span, .pnext a, .pprev a, .pprev > span, .pnext > span {display:inline-block; padding:0 15px; 
background-color:#fff; margin:5px 2px 0 2px; border-radius:4px; font-weight: 600; 
box-shadow: 1px 0 20px rgba(0,0,0,0);}
.navigation span, .pagi-nav a:hover {background-color:#8e44ad; color:#fff;}
.navigation span.nav_ext {background-color:#fff; color:#939393;}
.pagi-nav a:hover {background-color:#8e44ad; color:#fff;}
.dle-comments-navigation .pagi-nav {margin-bottom:0;}


/* PLAYER
----------------------------------------------- */
.item-player {width: 100%; position: fixed; left: 0; bottom: 0; z-index: 997;}
.zfix .item-player {z-index: 10; opacity: 0;}
.audioplayer {position: relative; max-width: 1240px; margin: 0 auto; 
	padding: 10px 30px; box-shadow: 0 -1px 2px rgba(0,0,0,.15); background-color: #f2f6f8; 
box-shadow: 0 -60px 60px -60px rgba(0,0,0,0.1);}
.audioplayer audio {display: none;}
.audioplayer-bar {position: absolute; left: 0; right: 0; bottom: 100%; height: 15px; background-color: #ccc;}
.audioplayer-bar-loaded {position: absolute; left: 0; top: 0; height: 100%; background-color: rgba(0,0,0,0.05);}
.audioplayer-bar-played {position: absolute; left: 0; top: 0; height: 100%; 
	z-index: 10; background-color: #8e44ad;}
.audioplayer-time {position: absolute; z-index: 20; font-size: 12px; bottom: 100%; pointer-events: none; color: #fff;}
.audioplayer-time-current {left: 10px;}
.audioplayer-time-duration {right: 10px;}
.audioplayer-playpause, .audioplayer-volume-button, .audioplayer-volume-adjust {display: inline-block; vertical-align: middle;}
.audioplayer-playpause a, .audioplayer-volume-button a, .ap-dl {width: 40px; height: 40px; line-height: 40px; 
	text-align: center; border-radius: 50%; cursor: pointer; background-color: #fff; color: #8e44ad; 
	display: block; font-size: 16px; box-shadow: inset 0 0 0 1px #8e44ad;}
	.audioplayer-playpause a {background-color: #e74c3c; color: #fff; box-shadow: inset 0 0 0 1px #e74c3c;}
.audioplayer-stopped .audioplayer-playpause a {padding-left: 2px;}
.audioplayer-muted .fa-volume-up:before {content: '\f026';}
.audioplayer-volume-adjust {margin-left: 10px;}
.audioplayer-volume-adjust > div {width: 50px; height: 10px; border-radius: 5px; 
position: relative; cursor: pointer; background-color: #ccc; overflow: hidden;}
.audioplayer-volume-adjust > div > div {height: 100% !important; background-color: #8e44ad; 
position: absolute; left: 0; bottom: 0; z-index: 10;}
.ap-desc {padding: 0 20px;}
.ap-img {width: 40px; height: 40px; margin-right: 10px; overflow: hidden;}
.ap-img img {width: 100%; height: 100%; object-fit: cover;}
.ap-artist {font-weight: 600;}
.ap-title {color: #939393;  margin-top: 3px;}
.ap-dl {background-color: transparent; box-shadow: inset 0 0 0 1px #8e44ad; 
	margin-right: 10px; font-size: 14px; width: 30px; height: 30px; line-height: 30px;}
.ap-prev, .ap-next {width: 30px; height: 30px; line-height: 30px; 
	text-align: center; border-radius: 50%; cursor: pointer; color: #8e44ad; background: #fff;
	display: block; font-size: 12px; margin-right: 10px; box-shadow: inset 0 0 0 1px #8e44ad;}
.ap-next {margin-right: 0; margin-left: 10px;}
.ap-next:hover, .ap-prev:hover, .ap-dl:hover, .audioplayer-playpause a:hover, 
.audioplayer-volume-button a:hover {background-color: #8e44ad; color: #fff;} 


/* FULL
----------------------------------------------- */
.speedbar {font-size: 12px; margin-bottom: 15px; color: #949494;}
.fcols {background-color: #212329; padding: 15px; border-radius: 6px;}
.fleft {width: 200px; margin-right: 15px;}
.fleft-col {width: 100%;}
.fimg {width: 200px; height: 200px; border-radius: 6px;}
.fimg-col {border-radius: 10px;}
.fmain h1 div {font-weight: 600; font-size: 18px; margin-top: 3px;}
.fright {width: 200px; margin-left: 15px;}
.fcaption {font-size: 12px; color: #949494; line-height: 1.8;}
.finfo {margin-top: 15px; }
.finfo li {position: relative; padding: 5px 10px 5px 140px;}
.finfo li:nth-child(2n+1) {background-color: #2c2d33;}
.finfo li > span:first-child {position: absolute; left: 10px; top: 5px; color: #949494;}
.finfo a {color: #01afe3;}
.finfo a:hover {text-decoration: underline;}
.ffav a {display: block; text-align: center; margin-top: 25px; color: #949494; }
.ffav a .fa {color: #e74c3c;}

.frate-box {margin-top: 10px;}
.frate-title {font-weight: 600; margin-bottom: 8px;}
.frate-counts {width: 80px; font-weight: 600; white-space: nowrap;}
.frate-counts span {color: #949494; font-weight: 400;}
.frate-btn-yes, .frate-btn-no {cursor: pointer; margin-left: 10px; width: 20px;	
color: #2ecc71; font-size: 18px;}
.frate-btn-no {color: #e74c3c;}
.frate-no {margin-top: 3px;}
.frate-btn-yes:hover, .frate-btn-no:hover {opacity: 0.6;}
.frate-bar {background-color: #dddddd; height: 5px; border-radius: 2px; position: relative; overflow: hidden;}
.frate-fill {position: absolute; left: 0; top: 0; height: 100%; background-color: #2ecc71;}
.frate-no .frate-fill {background-color: #e74c3c;}

.fctrl {margin-top: 15px;}
.fctrl > * {width: 49%; cursor: pointer;}
.fbtn {height: 40px; display: block; padding: 3px 15px 0 48px; position: relative;
border-radius: 6px; overflow: hidden; }
.fbtn-icon {width: 40px; height: 100%; position: absolute; left: 0; top: 0; 
	background-color: rgba(0,0,0,0.1); font-size: 12px; text-align: center;}
.fbtn-capt {font-weight: 600; color:#fff;}
.fplay {background-color: #e74c3c; color: #fff;}
.fdl {box-shadow: inset 0 0 0 2px #8e44ad; padding-top: 0; line-height: 40px;}
.fdl .fbtn-icon {background-color: #8e44ad;color: #fff; font-size: 18px;}
.fplay:hover {background-color: #c0392b;}

.sect-text {background-color: #212329; padding: 30px; border-radius: 0 0 6px 6px;}
.sect-text .sect-title {font-size: 18px; margin-bottom: -10px;}
.sect-text .slice-masked:before {background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);}

.full-alb .ffav a, .full-artist .ffav a {margin-top: 15px;}


/* FULL STORY STATIC
----------------------------------------------- */
.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame 
{max-width:100% !important; display:block; width:100%; height:400px;}
.mejs-container {max-width:100% !important;}
.full-text {line-height: 1.8;}
.full-text img:not(.emoji) {max-width:100%; margin:10px 0;}
.full-text > img[style*="left"], .full-text > .highslide img[style*="left"] {margin:0 10px 10px 0;}
.full-text > img[style*="right"], .full-text > .highslide img[style*="right"] {margin:0 0 10px 10px;}
.full-text a {text-decoration:underline; color:#8e44ad;}
.full-text a:hover {text-decoration:none;}
.full-text h2, .full-text h3, .full-text h4, .full-text h5 {margin:10px 0; font-size:24px; font-weight:300;}
.full-text p {margin-bottom:10px;}
.full-text ul, .full-text ol {margin:0;}
.full-text ul li {list-style:disc; margin-left:40px;}
.full-text ol li {list-style:decimal; margin-left:40px;}

.full-taglist a {color:#d20068;}
.full-taglist {margin-top:20px;}
.full-taglist span:not(.fa):not(:last-child):after {content:","; display:inline;}


/* COMMENTS
----------------------------------------------- */
.add-comms {padding: 15px; margin-bottom: 30px; display: none; background-color: #fff; border-radius: 6px;}
.ac-inputs input {width: 48.5%; margin-bottom: 15px;}
.ac-textarea textarea {height: 100px; margin-bottom: 15px;}
.add-comms input, .add-comms textarea, .ac-submit button {}
.ac-protect, .ac-textarea .bb-editor + br {display: none;}
.comments_subscribe input {margin-right: 10px;}
.comments_subscribe {display: block;}
.mass_comments_action {padding:10px; background-color:#212329; margin:20px 0 0 0; text-align: right;}
.last-comm-link {margin-bottom:10px; text-decoration: underline;}

.comm-item {margin-bottom: 30px; }
.comm-left {width: 50px; margin-right: 15px;}
.comm-right {padding: 10px 15px; position: relative; background-color: #212329; border-radius: 6px;}
.comm-right:before, .comm-right:after {content: ''; border: 10px solid transparent; border-right-color: #212329; 
position: absolute; right: 100%; top: 15px; margin-right: -1px; z-index: 2;}
.comm-right:after {z-index: 1; margin-right: 0; border-right-color: #e3e3e3;}
.comm-img {height: 50px; border-radius: 50%; background-color: transparent;}
.comm-two {margin: 10px 0 10px 0;}
.comm-one > span {margin-right: 15px; color: #939393;}
.comm-one > span.comm-author, .comm-one > span.comm-author a {color: #8e44ad;}
.comm-three-left > a, .comm-three-right li a {color: #939393;}
.comm-three-right li {display: inline-block; margin-left: 15px;}
.comm-rate3 {white-space:nowrap; margin-right: 15px; height: 20px; line-height: 20px; 
	display: inline-block; vertical-align: top; color: #909090; position: relative; top: -3px;}
.comm-rate3 a {display: inline-block; vertical-align: middle; color: #909090; 
position: relative; top: -2px;}
.comm-rate3 a:hover {color: #000;}
.comm-rate3 a:last-child {margin-bottom: -6px;}
.comm-rate3 > span {margin: 0 5px;}
.comm-rate3 > span > span.ratingtypeplus {color: #06b601;}
.comm-rate3 > span > span.ratingplus {color: #95c613;}
.comm-rate3 > span > span.ratingminus {color: #ff0e0e;}
.comm-three a:hover {text-decoration: underline;}

.speedbar a {
color:#fff;
}

.sect-content a {
color:#fff;
}

/* LOGIN
----------------------------------------------- */
.login-overlay, .mmenu-overlay {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; 
opacity: 0.6; display: none; background-color: #000;}
.login-box {position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%); 
background-color: #fff; padding: 30px 60px 40px 60px; border-top: 5px solid #e74c3c; width: 400px; 
box-shadow: 0 20px 60px rgba(0,0,0,0.5); display: none;}
.login-close {width: 26px; height: 26px; line-height: 26px; text-align: center; font-size: 24px; 
	cursor: pointer; position: absolute; top: -30px; right: -30px; color: #fff;}
.login-title {font-size: 24px; font-weight: 800; margin-bottom: 15px; text-align: center;}
.login-title:first-letter {color: #e74c3c;}
.login-avatar {width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 15px auto; 
text-align: center; line-height: 60px; font-size: 24px; background-color: #f2f6f8; color: #939393;}
.login-input {margin-bottom: 15px;}
.login-btn button {width: 100%; margin: 15px 0;}
.login-btm a {border-bottom: 1px dotted #3498db; color: #3498db; font-size: 12px;}
.login-check {position: relative; }
.login-check input {opacity: 0; position: absolute; cursor: pointer;}
.login-check span {display: block; padding-left: 36px; height: 30px; line-height: 30px; color: #939393;}
.login-check span:before, .login-check span:after{content: '';position: absolute;top: 50%;transition: .3s;}
.login-check span:before{left: 0; height: 10px; margin-top: -5px; width: 26px; border-radius: 5px; 
	background: #fff; box-shadow: inset 0 1px 4px rgba(0,0,0,0.3);}
.login-check span:after{left: 1px; height: 12px; width: 12px; margin-top: -6px; background: #2ecc71;
	border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0);}
.login-check input:checked + span:before {background-color: #fff;}
.login-check input:checked + span:after {left: 13px; background-color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.3);}
.login-menu {border-top: 1px solid #e3e3e3; border-left: 1px solid #e3e3e3;}
.login-menu li {text-align: center; border-right: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3ee; width: 50%;}
.login-menu a {display: block; padding: 10px 5px; font-size: 12px;}
.login-menu li .fa {display: none; height: 28px; font-size: 22px; color: #06c;}
.login-admin {text-align: center; margin: -10px 0 25px 0;}
.login-soc-title {display: flex; align-items: center; margin: 30px 0 15px 0;}
.login-soc-title:before, .login-soc-title:after {content: ''; height: 1px; background-color: #e3e3e3; flex: 1;}
.login-soc-title:before {margin-right: 15px;}
.login-soc-title:after {margin-left: 15px;}
.login-soc-btns {text-align: center;}
.login-soc-btns a {display:inline-block; margin: 0 3px; vertical-align:top;}
.login-soc-btns img {display:block; width:30px; height: 30px; border-radius: 50%;}


/* NEW STYLE
----------------------------------------------- */

.d-flex, .fx-row, #dle-content {display: flex; flex-wrap: wrap; flex-direction: row;}
.fd-column, .fx-col {flex-direction: column; flex-wrap: nowrap;} 
.jc-space-between, .fx-row {justify-content: space-between;}
.jc-flex-start, .fx-start, #dle-content {justify-content: flex-start;}
.jc-center, .fx-center {justify-content: center;}
.jc-flex-end {justify-content: flex-end;}
.ai-flex-start {align-items: flex-start;}
.ai-center, .fx-middle {align-items: center;}
.ai-flex-end {align-items: flex-end;}
.order-first {order: -1;}
.order-last {order: 10;}
.flex-grow-1, .fx-1, .stretch-free-width {flex: 1 1 0; max-width: 100%; min-width: 50px;}

.col-side {background:linear-gradient(135deg, #853b97 0%, #642B73 70%, #642B73 100%);; color: #fff; padding: 110px 30px; width: 240px; position: relative;}

:root {
    --bg: #2c2d33;
    --bg-2: #212329;
    --bg-3: #16171b;
    --bg-4: #1c222b;
    --tt: #fff;
    --tt-2: #c3c3c3;
    --tt-3: #ccc;
    --tt-dark: #999;
    --bdc: #111;
    --bdc-dark: #6d6d6d;
    --bsh: 0 10px 26px rgba(0,0,0,0.65);
    --bsh-2: 0 1px 2px rgba(0,0,0,0.62);
    --gradient: linear-gradient(135deg, #853b97 0%, #642B73 70%, #642B73 100%);
    --accent: #853b97;
    --accent-darker: #642B73;
    --accent-2: #c6c442;
    --ui-bg: #2c2d33;
    --ui-bg-darker: #212329;
    --ui-bg-darkest: #16171b;
    --ui-bg-accent: #16171b;
    --ui-text-color-on-accent: #fff;
    --ui-bdc: #111;
    --indent-negative: -60px;
    --indent: 60px;
    --max-width: 1200px;
}

/* SIDEBAR
----------------------------------------------- */
.side-block + .side-block {padding: 30px; padding-bottom: 0; 
	border-top: 1px solid rgba(255,255,255,0.2); margin-left: -30px; margin-right: -30px;}
.side-block:not(:last-child) {margin-bottom: 30px;}
.side-block__title {font-weight: 700; font-size: 16px; margin-bottom: 30px;}
.side-block__menu--main {font-size: 16px; font-weight: 700;}
.side-block__menu--icon > li > a {padding-left: 26px;}
.side-block__menu > li + li {margin-top: 20px;}
.side-block__menu li {position: relative;}
.side-block__menu li .fal {position: absolute; left: 0; top: 1px; pointer-events: none; opacity: 0.8;}
.side-block__menu li span:not(.fal) {background-color: rgba(0,0,0,0.1); font-size: 11px; font-weight: 400;
	position: absolute; right: 0; top: -1px; border-radius: 3px; padding: 3px 6px; pointer-events: none;}
.side-block__menu > li > a {color: #fff; display: block;}
.side-block__menu a:hover, .showitems-btn:hover {text-decoration: underline;}
.showitems-btn {margin-top: 13px; cursor: pointer; color: var(--accent);  
	text-transform: uppercase; font-weight: 500; font-size: 12px; letter-spacing: 1px;}
.side-block__menu-hidden {position: absolute; left: 98%; top: -30px; z-index: 999; 
	background-color: var(--bg); box-shadow: var(--bsh); padding: 30px; width: 600px; 
	column-gap: 30px; column-width: 150px; border-right: 5px solid var(--accent); 
	visibility: hidden; opacity: 0; transform: translateX(30px);}
.side-block__menu-hidden li {margin-bottom: 10px;}
.side-block__menu > li:hover .side-block__menu-hidden {visibility: visible; opacity: 1; transform: translateX(0);}

.popular + .popular {margin-top: 20px;}
.popular .poster__subtitle li {color: #fff; opacity: 0.8;}
.popular__img {width: 60px; height: 60px; margin-right: 20px; box-shadow: 0 10px 26px rgba(0,0,0,0.25);}
.popular__title {line-height: 1.4; -webkit-line-clamp: 2; color: #fff;}
.popular:hover {text-decoration: underline;}


.col-side .soc-channels__item {
width:40px;
padding: 0;
}

.soc-channels {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
}

.col-side .logo {
position:absolute;
top:0px;
left:0px;
max-width:240px;
}

.col-side a {
color:#fff;
}

.soc-channels__item + .soc-channels__item {
margin:0px 0 0 10px !important;
}

.footer {background: url(../images/logo.svg) 30px center / 40px no-repeat; 
	background-color: var(--bg-3); color: var(--tt-dark); padding: 30px var(--indent); padding-left: 86px;}

.desc {
    display: grid;
    grid-gap: 20px;
    line-height: 1.7;
    color: var(--tt-3);
    background: var(--bg-2);
    margin: 0 var(--indent-negative);
    margin-bottom: -60px;
    margin-top: 60px;
    padding: 60px var(--indent);
}

aside.col-left {
display:none;
}

.logo {
padding:20px;
}

.logo__title {
    text-transform: uppercase;
    color: #fff;
    font-size: 24px;
    font-weight: 400;
}

.logo__caption {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    opacity: 0.9;
    text-transform: uppercase;
    margin-top: 5px;
}

.pmovie__rating-likes {
    position: absolute;
    right: -10px;
    top: 0;
}

.pmovie__rating-likes > * {
    display: flex;
    align-items: center;
    height: 30px;
    border-radius: 15px;
    background-color: #6ab04c;
    color: #fff;
    box-shadow: var(--bsh-2);
    padding: 0 15px 0 10px;
    font-weight: 500;
    margin-right: 10px;
}

.pmovie__rating-likes > * .fal {
    font-size: 16px;
    margin-right: 10px;
}

.c-subscribe-alert__wrapper {
    display: flex;
    position: fixed;
    left: 305px;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 105;
    background: rgba(0, 0, 0, 0.6);
    display:none;
}

.c-subscribe-alert__wrapper.flex {
display:flex;
}

.c-subscribe-alert {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    width: 600px;
    border-radius: 6px;
    color: #001d2b;
    -webkit-box-shadow: 0 0 10px -5px #77aec2;
    box-shadow: 0 0 10px -5px #77aec2;
}

.c-subscribe-alert__btn-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 6px;
    top: 6px;
    width: 26px;
    height: 26px;
    cursor: pointer;
    user-select: none;
}

.c-subscribe-alert__btn-close svg {
    fill: #111;
    width: 12px;
    transition: opacity .1s ease-in-out;
}

.c-subscribe-alert__header {
    font-size: 20px;
    font-weight: 700;
    right: 20px;
}


@font-face {
    font-family: "icons-kz";
    src: url("../fonts/icons-kz.eot?5w0nus");
    src: url("../fonts/icons-kz.eot?5w0nus#iefix") format("embedded-opentype"), url("../fonts/icons-kz.ttf?5w0nus") format("truetype"), url("../fonts/icons-kz.woff?5w0nus") format("woff"), url("../fonts/icons-kz.svg?5w0nus#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block
}

[class^=icon-], [class*=" icon-"] {
    font-family: "icons-kz" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 1.3rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.icon-instagram:before {
    content: "";
}

.icon-youtube:before {
    content: "о¤›"
}

.icon-telegram:before {
    content: "";
}

.icon-vk:before {
    content: "";
}

.c-subscribe-alert__body {
    display: flex;
    flex-flow: row wrap;
    padding: 20px 0;
    margin-bottom: -14px;
}

.c-subscribe-alert__badge {
    display: flex;
    align-items: center;
    width: 50%;
    flex-shrink: 0;
    margin-bottom: 14px;
    transition: opacity .1s ease-in-out;
    color: #001d2b;
}

.c-subscribe-alert__badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    margin-right: 15px;
}

.c-subscribe-alert__text-close {
    font-size: 14px;
    color: #111;
    opacity: .8;
    cursor: pointer;
    border-bottom: 1px dashed #111;
}

.c-subscribe-alert__text-close:hover {
border-bottom: 1px dashed #fff;
}


.randomcolor {
display:flex;
align-items:center;
padding:50px 30px;
border-radius: 6px;
margin:0 0 20px 0;
}

.randomcolor .left {
flex:1;
padding:0 20px 0 0;
}

.randomcolor .left h1 {
margin:0px;
paddin:0px;
color:#fff;
font-size:30px;
font-weight:bold;
text-shadow: #000 1px 0 3px;
}

.randomcolor .right {
width:45%;
overflow:hidden;
font-size:0px;
line-height:0px;
}

.img-fit-col img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    opacity: 0.9;
}

.finfo {
    margin-top: 0px;
}


@media screen and (max-width: 600px) {

.randomcolor {
    display: block;
	padding:20px;
}

.randomcolor .left {
    padding: 0 0 20px 0;
}

.randomcolor .right {width:100%;}

.randomcolor .left h1 {font-size:24px; text-align:center;}

}


/* ADAPTIVE
----------------------------------------------- */
.btn-menu {display: none;}

@media screen and (max-width: 1220px) {


.c-subscribe-alert__wrapper {
    left: 0;
}

body {background-image: none;}
.wrap-center {max-width:1000px;}
#gotop {display: none !important;}
.not-logged .login-avatar, .to-mob {display: none;}
.login-close {top: -5px;}
.login-title {font-size: 18px;}
.login-box {max-width: calc(100% - 60px); padding: 15px;}
.wrap {padding: 0;}
.wrap-main {border-radius: 0;}
.content, .footer, .topline {padding-left: 10px; padding-right: 10px; background-image: none;}
.side-box {display: none;}
.col-left {width: 100%;}
.logo {}
.logo img {margin-top: -15px;}
.btn-menu {height: 60px; width: 60px; line-height: 60px; text-align: center; font-size: 18px; cursor: pointer; 
background-color: #f2f6f8; display: block; position: absolute; right: 0; top: 0;}

.col-side {
display:none;
}

aside.col-left {
display:block;
}

.viss .side-box-all {
position:fixed;
top:0px;
left:0px;
bottom:0px;
z-index:99;
background:#111;
padding:20px;
width:calc(100% - 60px);
display:block;
box-shadow: 0 0 15px 0 rgba(255,255,255,0.25);
max-height:100%;
overflow-y:auto;
}

.viss .side-box-all .side-box {
display:block;
}

}

@media screen and (max-width: 950px) {
.wrap-center {max-width:768px;}
.sect-count .track-item {padding-left: 15px;}
.track-count, .track-fav {display: none;}

.fright {width: 100%; margin: 15px 0 0 0;}
.sect-text {padding-left: 10px; padding-right: 10px;}
}

@media screen and (max-width: 760px) {

.c-subscribe-alert {
    width: calc(100% - 20px);
}

.c-subscribe-alert__badge {
    width: 100%;
}

.footer {
margin:0 0 80px 0;
}

.wrap-center {max-width:640px;}
.album-item {width: 31%;}
.artist-item {width: 23%;}
.collection-item {width: 48%;}
.sect-col {width: 100%; margin-bottom: 0;}
.footer, .ft-one .fx-1, .ft-one {text-align: center; display: block;}
.audioplayer {padding-left: 10px; padding-right: 10px;}

.dcont button {font-size:12px; padding:0 15px !important;}
.comments-tree-list .comments-tree-list {padding-left:0px !important;}
.comments-tree-list .comments-tree-list:before {display:none;}
.mass_comments_action {display:none;}
}

@media screen and (max-width: 590px) {
.wrap-center {max-width:480px;}
.album-item {width: 48%;}
.artist-item {width: 31%;}
.collection-item {width: 100%;}

.fcols {padding-left: 10px; padding-right: 10px; display: block;}
.fleft {width: 100%; margin-bottom: 15px;}
.fimg {margin: 0 auto;}
.ffav a {margin-top: 15px;}
.fcols h1 {text-align: center;}

.ac-inputs input {width: 100%;}
.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {height:300px;}

.ui-dialog {width:100% !important;}
.upop-left, .upop-right {float:none !important; width:100% !important; margin:0; padding:0 20px;}
.upop-left {margin-bottom:10px; text-align:center;}
.ui-dialog-buttonset button {display:block; margin:0 0 5px 0; width:100%;}
#dofullsearch, #searchsuggestions span.seperator {display:none !important;}
.attach .download-link {margin:0 -15px 0 0; float:none; display:block; padding:0 10px;}
.attach-info {float:none;}
}

@media screen and (max-width: 470px) {
.wrap-center22 {max-width:320px;}
.topline .share {display: none;}
.topline {padding: 10px;}
.search-wrap {margin-right: 15px;}
.sect-title {font-size: 18px;}
.mp .album-item:nth-child(5n), .mp .artist-item:nth-child(7n) {display: none;}
.ap-img, .ap-info {display: none;}
.ap-desc {min-width: 5px;}

.sect-comms .sect-title {display: none;}
.sect-comms .button {margin: 0; width: 100%; text-align: center;}
.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {height:250px;}
}

.track-playing .fa-play:before {
    content: '\f04c';
}
.audioplayer .fa-pause {display: none;}

/*.track-playing .js-stop {display: block;}
.track-playing .js-play {display: none;}
.audioplayer-pause {display: none;}
.track-playing .audioplayer-pause {display: block;}
.track-playing .audioplayer-play {display: none;}*/

#you-player {
    bottom: 10px;
    height: 270px;
    position: fixed;
    right: 10px;
    width: 100%;
    z-index: 99999;
    max-width: 480px;
    background: #DEE2E4;
    border-radius: 8px 8px 0 0;
}
#you-player iframe {
    top: 30px;
    position: absolute;
    height: calc(100% - 35px);
    width: calc(100% - 10px);
    left: 5px;
    bottom: 5px;

}
.you-h {
    cursor: move;
    height: 30px;
}
.you-pl-close {
    background-color: #1BAE5D;
    border: 1px solid #1BAE5D;
    border-radius: 20px;
    color: #fff;
    font-size: 18px;
    height: 21px;
    right: 12px;
    line-height: 20px;
    position: absolute;
    top: 5px;
    width: 21px;
    cursor: pointer;
    text-align: center;
}
@media screen and (max-width: 589px) {
    #you-player {
        right: 0px;
        height: calc(60vw);
        left: 0;
        margin: auto;
    }
}

.year-list {
    margin-bottom: 20px; 
    margin-top: 40px;
}
.year-list a {
    display: inline-block;
    margin-right: 10px;
    padding: 10px 10px;
    background: #fff;
    border-radius: 5px;
    font-size: 14px;
    letter-spacing: 1px;
}
.year-list a.active {
	background: #fb693e;
}
@media screen and (min-width: 760px) {
    .nav-btn-w br {display: none;}
    .nav-btn-w {display: flex; justify-content: flex-start; gap: 20px;;}
}

.soc-channels__item {display: flex; flex-direction: column; justify-content: center;  
	position: relative; padding: 0 20px 0 55px; height: 40px; overflow: hidden;
	background-color: #2daae1; color: #fff !important; text-shadow: none;
	font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; border-radius: 4px;}
.soc-channels__item div {font-size: 14px; text-transform: none; font-weight: 500; margin-top: -1px;}
.vk {background-color: #1877f2; color: #fff;}
.yt {background-color: #df1111; color: #fff;}
.fb {background-color: #1b74e4; color: #fff;}
.soc-channels__item + .soc-channels__item {margin-top: 10px;}
.soc-channels__item::before {content: ''; width: 40px; height: 40px; background-color: rgba(0,0,0,0.2); 
	position: absolute; left: 0; top: 0; background-position: center center; background-size: 20px; background-repeat: no-repeat;}
.tlg::before {background-image: url(../images/i-tlg.svg); background-size: 16px;}
.fb::before {background-image: url(../images/i-fb.svg);}
.vk::before {background-image: url(../images/i-vk.svg);}
.yt::before {background-image: url(../images/i-youtube.svg);}

#nav-load a, #nav-artist-load a {
    background: #BAF566;
    color: #222;
    padding: 10px 40px;
    display: inline-block;
    border-radius: 5px;
    margin: 10px auto 0;
}
#nav-artist-load span {display: none;}


.frate {height:40px; line-height:24px; width:200px; position:relative; opacity:0; 
display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;}
.frate.done {opacity:1;}
.rate-data {display:none;}
.rate-plus, .rate-minus {cursor:pointer;}
.frate .fa {color:#3c0; display:inline-block; vertical-align:top; font-size: 24px; margin-right:10px;}
.rate-minus .fa {color:#f20404; position: relative;}
.frate div:hover .fa {animation: bounceRate  0.3s infinite linear; animation-direction: alternate;}
.rbar {height:6px; overflow:hidden; background-color:#f20404; border-radius:3px; position:absolute; left:0; bottom:0; width:100%;}
.rfill {width:50%; height:100%; position:absolute; left:0; top:0; background-color:#3c0; transition:width 1s linear;}
.rate-perc {font-size: 18px; font-weight: 700;}
.rate-perc.high {color:#3c0;}
.rate-perc.low {color:#f20404;}

.rate-plus a, .rate-minus a {
color:#fff !important;
}


@keyframes bounceRate {
  from {transform: translate(0,0%);}
  to {transform: translate(0,-50%);}
}

 .slice {overflow:hidden; position:relative; transition:height .2s;}
    .slice-masked:before {content:'';position:absolute;z-index:1;bottom:0px;left:0;right:0;height:120px;pointer-events:none;
    background:-webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 100%);
    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);}
    .slice-btn {margin:20px 0;  font-weight:700;}
    .slice-btn span {display:inline-block; cursor:pointer; text-decoration:underline; color:#f0542e;}