/* SET BASE
----------------------------------------------- */
* {background: transparent; margin: 0; padding: 0; outline: none; border: 0; 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;}


body.myb20{background-image:url(../images/ramm.jpg)}
body.myb21{background-image:url(../images/carmusic.png)}

body {font: 15px 'Montserrat', sans-serif; line-height: normal; padding: 0; margin: 0;        
color: #000; background: #ecf2fb; min-height: 100%; width: 100%; font-weight: 400;}
a {color: #000; text-decoration: none;}
a:hover, a:focus, .track-desc:hover > *, .side-item:hover *, .album-in:hover * {color: #002d55; text-decoration: none;}


h1 {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
}

h2 {
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
}

h3 {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}

h4 {
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
}

h5 {
  font-weight: 300;
  font-size: 15px;
  line-height: 1.4;
}

@media (max-width: 400px) {
  h1 {
    font-size: 17px;
  }

  h2 {
    font-size: 17px;
  }

  h3 {
    font-size: 13px;
  }

  h4, h5 {
    font-size: 14px;
  }
}



button, textarea, select, input[type="text"], input[type="password"], input[type="button"], input[type="submit"] 
{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]):not(.search-btn):not([class*=owl-]), 
html input[type="button"], input[type="reset"], input[type="submit"], .meta-fav a, .usp-btn a {
display: inline-block; text-align: center; padding: 0 20px; height: 40px; line-height: 40px;
border-radius: 10px; cursor: pointer; font-weight: 400; box-shadow: none;
background-color: #ecf2fb; color:#002d55; font-size: 15px; border: 1px solid #002d5538;}
.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):not([class*=fr]):not(.search-btn):not([class*=owl-]):hover, 
html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .meta-fav a:hover 
{background-color: #043663; 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: #ebebeb;; color: #000; 
box-shadow: inset 0 0 0 1px #e3e3e3, inset 1px 2px 5px rgba(0,0,0,0.1); border-radius: 10px;}
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-resp, .img-resp-vert, .img-fit {overflow: hidden; position: relative; background-color: #0087ff00;}
.img-resp {padding-top: 70%;}
.img-resp-vert {padding-top: 140%;}
.img-box img, .img-resp img, .img-resp-vert img {width: 100%; min-height: 100%; display: block;}
.img-resp img, .img-resp-vert img {position: absolute; left: 0; top: 0; border-radius: 20px; border: 1px solid;
    border-color: #04366363;}
.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;}

.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, #dle-content {-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, .fw700 {font-weight: 600;}
.icon-left [class*="fa-"], .icon-left .icon {margin-right: 10px;}
.icon-right [class*="fa-"], .icon-right .icon {margin-left: 10px;}
.hidden, #dofullsearch {display: none;}
.anim, .btn, button, .side-nav a, .collection-in::before, .wplayer, .audioplayer, 
.track-desc, .track-title, .track-subtitle, .side-item, .side-item * {transition: all .3s;}
.mtitle, .sub-title h1, .form-wrap h1 {margin-bottom: 30px; font-size: 22px; font-weight: 500;}
#dle-content > *:not(.album-item):not(.collection-item) {width: 100%;}
.bef1 {color: #002d55; font-size: 17px;}
.close-button {
  left: 220px;
  top: 10px;
  z-index: 99;
  height: 30px !important;
  border: none !important;
  background-color: transparent !important;
  border-radius: 0px 5px 5px 0px !important;
  position: absolute;
  font-size: 11px !important;
  padding: 0 !important;
  opacity: .6;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.close-button i {
    font-size: 14px;
		transition: transform 0.4s ease; 
}
.close-button.rotate-icon {
		transform: rotate(180deg);
}
.close-button:hover {color: #002d55 !important; opacity: 1;}
.close-button.active {
		left: -8px;
    font-size: 0px !important;
		top: 10px;
		background-color: transparent !important;
		border-radius: 0px 5px 5px 0px !important;
		margin: 0px 0px 0px 0px;
		opacity: 1;
}

/* BASIC GRID
----------------------------------------------- */
.wrap {min-width:320px; position: relative; }
.wrap-center {max-width:1440px; margin:0 auto; position:relative; z-index:20; padding: 10px 15px 70px 15px; transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
	margin-right 0.35s ease-in-out, right 0.35s ease-in-out;}
.header {background-color: #002d55; box-shadow: 0 0 25px rgba(0, 0, 0, 0); margin-bottom: 30px;}
.header-in {padding: 20px 10px;}
.col-main {min-height: 100vh;}
.col-left {width: 280px; margin-right: 20px; position: relative; z-index: 50; transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out,
	margin-right 0.35s ease-in-out, right 0.35s ease-in-out;}
.sidebar-mn-1 {
	transition: margin-left 0.4s ease, opacity 0.4s ease; flex-shrink: 0;
	overflow: hidden; }
.sidebar-mn-1.hidden {
	margin-left: -240px; 
	opacity: 0; 
	}
.col-right {width: 240px; margin-left: 20px;}
.footer {background-color: #b990d300; color: #000; padding: 20px 0; border-top: 1px solid #2196f3; margin-top: 30px; text-align: center; display: flex;
		justify-content: center;
		flex-wrap: wrap;}
.footer a, .footer span {color: #0087ff; margin: 0px 10px;}

#gotop{position:fixed; width:45px; height:45px; line-height:45px; right:10px; bottom:100px;
z-index:997; display:none; background-color:#ffffff; color:#043663; cursor:pointer; font-size:21px; border: 1px solid #0437637e;
border-radius:50%; text-align:center; box-shadow: 0 27px 53px rgba(0,0,0,0.1);}

#gotop:hover {background-color:#043663; color:#ffffff; transition: all .3s ease; transform: scale(1.02);}

.header, .col-left, .col-right, .col-main {transition: all .3s;}
.not-loaded .header {transform: translateY(-100px);}
.not-loaded .col-left {transform: translateY(100px);}
.not-loaded .col-right {transform: translateY(100px);}
.not-loaded .col-main {transform: translateY(-100px);}
.not-loaded .wplayer-init {transform: translateY(100px);}


/* HEADER
----------------------------------------------- */
.logosidemenu {text-align: center; margin: 5px 5px; font-size: 17px;}
.logo {display: block; color: #ffda1b !important; font-weight: 600; display: flex;
    align-items: center;
    justify-content: center;
	font-size: 24px; width: 200px; text-transform: uppercase; margin-left: 30px;}
.logo span {color: #289aff;}
.logo img {max-height: 50px;}
.logo span.logo-domain {color: #289aff; font-weight: 550; font-size: 15px; margin-left: 3px;}
.search-wrap {margin: 0 30px; 
	display: flex;
    flex-direction: row-reverse;}
.search-box {max-width: 390px; position: relative; margin: 0 auto; 
	position: relative;
    display: flex;
    margin: 0 auto;
    flex-direction: row-reverse;
    justify-content: flex-start;
    flex-wrap: nowrap;}
.search-box input, .search-box input:focus {padding: 0 60px 0 30px; border-radius: 10px; box-shadow: none; 
background-color: #eaeaea; color: #000; 
    border: solid 1px;
    border-radius: 15px;
    border-color: #5287ff;}
.search-box input:not(:focus)::placeholder {color: #080808; opacity: 0.8; font-size: 13px;} 
.search-box button {position:absolute; right:5px; top:0px; z-index:10; width: 60px; cursor: pointer; 
background: none; color: #080808; line-height: 40px; text-align: center; border-radius: 0 20px 20px 0;}


/* SECTION
----------------------------------------------- */
.sect {margin-bottom: 20px; position: relative;}
.sect-header {margin-bottom: 30px;}
.sect-title {
	font-weight: 500; 
	font-size: 18px; 
	text-align: -webkit-match-parent; 
	padding: 5px;
	border-bottom: 1px solid #dae3ed;
}
.sect-title-small-section {height: 35px; display: flex; padding: 5px; justify-content: space-between; flex-direction: row; flex-wrap: nowrap; align-items: center; border-bottom: 1px solid #dae3ed;}
.sect-title-small-section a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 14px;
  color: #1a1a1a;
  background-color: #f1f5f9;
  border-radius: 50%;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.sect-title-small-section a:hover {
  background-color: #e0e7ef;
  transform: translateX(2px);
}

.sect-title-text {
	font-weight: 500; 
	font-size: 14px; 
	text-align: center; 
	padding: 5px;
}

.sect-title-text-telegram {
	font-weight: 300; 
	text-align: center; 
	padding: 5px;
}
.sect-playlists {margin: 15px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;}
.sect-title [class*=fa-], .side-bt [class*=fa-] {color: #737373;}
.sect-bg {background-color: #f7faff; padding: 18px 10px 30px 10px; border-radius: 10px; 
box-shadow: 0 27px 53px rgba(0, 0, 0, 0);}
.sect-bg-radio {background-color: #f7faff; padding: 10px 10px 10px 10px; border-radius: 10px; }
.sect-bg-top10 {
	background-color: #f7faff; 
	padding: 5px 20px;
	border-radius: 10px; 
	}
.sect-bg-text {
	background-color: #f7faff; 
	padding: 10px;
	border-radius: 10px; 
	margin-bottom: 15px;
	}
.sect-bg-telegram {
	background-color: #00a6e6;
	padding: 10px;
	border-radius: 10px; 
	margin-bottom: 15px;
	color: #fff;
	font-weight: 600;
	}
.sect-col {width: calc((100% - 20px)/2);}
.sect-col3 {width: calc((100% - 20px)/3);}



.sect-link,
.sect-link-w{
	display:flex;
	align-items:center;
	justify-content:center;

	min-width:180px;
	max-width:320px;
	height:42px;
	padding:0 22px;

	margin:28px auto 0;

	border-radius:18px;
	border:1px solid rgba(0,0,0,0.08);

	background:#fff;
	color:#111;

	font-size:14px;
	font-weight:800;
	text-align:center;
	text-decoration:none;
	cursor:pointer;

	transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
}

.sect-link:hover,
.sect-link-w:hover{
	transform:translateY(-2px);
	box-shadow:0 14px 28px rgba(0,0,0,0.12);
	border-color:rgba(0,0,0,0.14);
}

.sect-link:active,
.sect-link-w:active{
	transform:translateY(0);
	box-shadow:0 6px 14px rgba(0,0,0,0.08);
}

.sect-link-top{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	height:34px;
	padding:0 16px;

	border-radius:16px;
	border:1px solid rgba(0,0,0,0.08);

	background:#fff;
	color:#111;

	font-size:13px;
	font-weight:700;
	text-decoration:none;
	cursor:pointer;

	transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.sect-link-top:hover{
	transform:translateY(-1px);
	box-shadow:0 10px 22px rgba(0,0,0,0.10);
}

.sect-items {margin: 0 -10px -20px -10px;}
.sect-text {font-size: 13px; font-weight: 400; padding: 10px; }

.sect-seo-text{
	margin:20px 0;
	padding:18px 20px;
	/* border:1px solid rgba(0, 0, 0, 0.048); */
	border-radius:10px;
	background:#f7faff;
}

.sect-seo-text h1,
.sect-seo-text h2{
	margin:0 0 12px;
	font-size:20px;
	line-height:1.25;
	font-weight:900;
	letter-spacing:-0.2px;
}

.sect-seo-text p{
	margin:0;
	font-size:15px;
	line-height:1.65;
	color:rgba(0,0,0,0.82);
}

.sect-seo-text p + p{
	margin-top:12px;
}

@media (max-width:700px){
	.sect-seo-text{
		padding:16px;
	}
	.sect-seo-text h1,
	.sect-seo-text h2{
		font-size:18px;
	}
	.sect-seo-text p{
		font-size:14px;
	}
}

/* .h1-maintext {padding: 10px 0px; font-size: 18px; margin-bottom: 5px; border-bottom: 1px solid #eee;}
.h2-maintext {padding: 10px 0px; font-size: 16px; margin-bottom: 5px; border-bottom: 1px solid #eee;}
.sect-seo-text { background-color: #f7faff; padding: 10px 20px; border-radius: 10px; font-size: 14px; line-height: 1.5; font-weight: 400; margin-bottom: 20px;} */

/* COLLECTION ITEM, ALBUM ITEM
----------------------------------------------- */
.collection-item, .album-item {padding: 0 10px; margin-bottom: 20px; width: 25%;}
.collection-in {display: block; height: 120px; border-radius: 10px;}
.collection-title {position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 5; text-align: center; 
background-color: rgba(104,109,224,0); color: #eee; font-weight: 600; padding: 15px;}
.collection-item:nth-child(1), .collection-item:nth-child(6) {width: 50%;}
.collection-in::before {content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 3; 
	background: linear-gradient(45deg, #000 0%,#111 50%,#be2edd 80%,#eb4d4b 100%); opacity: 0.6;}
.album-item {width: 11%; display: inline-block; text-align: center;}
.album-item:hover {transform: scale(1.03); transition: all .3s ease;}
.album-img {border-radius: 10px; margin-bottom: 15px; padding-top: 100%;}
.collection-in:hover::before {right: -100px; opacity: 1;}
.fullposter {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; flex-grow: 1; align-items: center;}

/* TRACK ITEM
----------------------------------------------- */

	.track-item {
		border: 1px solid #cccccc0c;
		border-bottom: 1px solid #cccccc22;
		border-radius: 10px;
		margin-bottom: 12px;
		padding: 3px;
		background: #edf2fb8e;
	}
	
	.track-item:last-child {
		border-bottom: 1px solid #cccccc0c; /* Или как вам нужно */
	}
	
	.track-item:hover {
		background-color: #ecf2fb;
		border: 1px solid #cccccc59;
		transition: all .2s ease;
		transform: scale(1.01);
		font-weight: 600;
	}
	

.track-item a, a.track-desc, .track-fav a {display: block;}
.track-img {width: 45px; height: 45px; border-radius: 5px; margin-right: 15px;}
.track-play {position: absolute; z-index: 5; left: 0; top: 0; right: 0; bottom: 0; text-align: center; 
background-color: rgba(0, 0, 0, 0); color: #ffffff; cursor: pointer; font-size: 24px; opacity: .7;}
.track-play:hover {opacity: 1;}
.track-title {font-weight: 500; font-size: 15px;}
.track-subtitle {font-size: 12px; color: #000; margin-top: 5px;}
.track-time {font-size: 12px;
    color: #000;
    padding: 2px 5px;
    width: 35px;
    text-align: center;
    border-radius: 3px;
    margin-left: 15px;
    background-color: #edf2fb;}
.track-dop {margin: 0px -8px 0px 12px; align-items: center;   display: flex; animation: pulse-small 2s infinite;}
@keyframes pulse-small {
	0% {
	  transform: scale(0.91);
	  opacity: 1;
	}
	50% {
	  transform: scale(1); 
	  opacity: 0.9; 
	}
	100% {
	  transform: scale(0.91);
	  opacity: 1;
	}
  }

.track-fav, .track-dl {width: 30px; height: 30px; border-radius: 15px; text-align: center; 
	background-color: #eb4d4b; color: #ccc; margin-left: 10px; font-size: 13px; cursor: pointer;}
.track-dl {background-color: transparent; color: #0087ff; font-size: 24px; margin-left: 15px;}
.track-dl:hover {color: #6ab04c;}
.track-fav:hover, .track-fav:hover a {background-color: #eb4d4b; color:#fff;}
.track-item:hover .track-play {opacity: 1;}
.track-item.js-item-played:before {background-color: #c1c1c152; content: ''; border-radius: 10px; 
position: absolute; left: -10px; top: -10px; right: -10px; bottom: -10px;}
.js-item-played .fa-play-circle:before {content: '\f04c'; font-size: 14px; position: relative; top: -4px;}
.track-item > *, .track-item {position: relative;}
.js-item-played .track-equalizer {opacity: 1;}
.track-equalizer {z-index: 3; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
background-color: rgba(0,0,0,0.6); align-items: center; justify-content: center; display: flex; opacity: 0;}
.track-equalizer li {background: #ffda1b; max-width: 4px; height: 100%; margin-right: 2px; border-radius: 3px; flex: 1 1 100%;
min-width: 0; animation: equalizer .5s forwards ease-in-out infinite; animation-direction: alternate;}
.track-equalizer li:last-child {margin-right: 0;}
.track-equalizer li:nth-child(1) {animation-duration: 2s;}
.track-equalizer li:nth-child(2) {animation-duration: 1.6s;}
.track-equalizer li:nth-child(3) {animation-duration: 1.9s;}
.track-equalizer li:nth-child(4) {animation-duration: 1.5s;}
.track-equalizer li:nth-child(5) {animation-duration: 1.7s;}
@keyframes equalizer {0% {height: 5%;} 12% {height: 10%;} 24% {height: 40%;} 36% {height: 15%;} 48% {height: 25%;} 
60% {height: 30%;} 72% {height: 20%;} 84% {height: 35%;} 100% {height: 5%;} }


.fa-ellipsis-h {
	color: #0087ff !important; 
}

.fa-dice-two { color: #006fd1; }
.fa-dice-three { color: #006fd1; }
.fa-dice-four { color: #006fd1; }
.fa-dice-five { color: #006fd1; }

.fa-chevron-right {
	
	color: #007cd5 !important;
}

/* comments */

.comments {margin-top: 20px !important; margin: 0 auto; }
.userlogo {font-size: 17px; font-weight: 500; }
.fieldcomm {margin: 5px 0px;}
.field-text {margin: 5px 0px;}
.comm-one {display: flex; flex-wrap: nowrap; flex-direction: row;    align-items: center;    justify-content: space-between;}
.comm-item {margin: 10px 0px; padding: 5px 10px 0px; display: flex; }
.comm-field {border-bottom: 1px solid #03101911; }
.commtext {line-height: 1.2; font-size: 14px;}
.commava {margin-right: 10px; width: 26px; height: 26px; }
.commentmain {padding: 10px 5px; }
.center-position {margin: 0 auto; display: flex;     flex-direction: row;     justify-content: center;}
.comm-submit:hover {transform: scale(1.002); transition: all .5s ease;}

/* SIDEBAR
----------------------------------------------- */
.side-box {margin-bottom: 25px; padding: 0px 10px 10px 15px;
    background: #f7faff; border-radius: 10px;}
.side-bt {
  font-size: 14px;
    font-weight: 500;
    /* height: 50px; */
    /* line-height: 52px; */
    /* margin-left: -5px; */
    padding: 15px 5px;
    /* border-bottom: 1px solid; */
    border-color: #dae3ed;
    margin-bottom: 10px;
}
.side-sticky {position: sticky; left: 0; top: 15px;}

.side-nav {padding: 10px 0 1px 0;}
.side-nav > li > a {display: block; font-weight: 500; padding-left: 20px;}

.side-nav > li > .fa-circle {font-size: 5px; top: 8px; color: #006fd1;}

.side-nav > li {position: relative; margin-bottom: 20px;}
.side-nav > li > span {position: absolute; left: 0; top: 0px; font-size: 18px; pointer-events: none;}
.side-nav > li > a:hover, .side-nav > li:hover > a {color: #0087ff; transform: scale(1.02);}
.submenu > a:after {content:"\f061"; font-weight: 300; font-family:'Font Awesome 5 Pro'; 
transition: all .2s; display: inline-block; margin-left: 15px; position: relative; top: 2px;}
.hidden-menu {background-color: #c7c7c7; box-shadow: 0 27px 53px rgba(0,0,0,0.6); z-index: 100;
position: absolute; left: 90%; top: 0%; width: 320px; border-radius: 10px;
visibility: hidden; opacity: 0; transform: translateY(30px); padding: 20px; padding-bottom: 5px;}
.hidden-menu li {width: 50%; margin-bottom: 15px;}
.hidden-menu li a {display: block; font-size: 14px;}
.side-nav > li:hover .hidden-menu {visibility: visible; opacity: 1; transform: translateY(0px);}

.side-top-item:not(:last-child) {margin-bottom: 20px;}
.side-letter {position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 5; font-size: 17px; opacity: 0.8;
	text-align: center; background-color: #000; color: #fff; text-transform: uppercase; font-weight: 600;}
.side-item {display: block; margin-bottom: 10px; font-size: 14px; 
	color: #000; line-height: 1.6; position: relative; padding-left: 20px;}
.side-item:last-child {margin-bottom: 0;}
.side-item span {font-weight: 700; color: #000;}
.side-item::before {content: '\f101'; font-family: 'Font Awesome 5 Pro'; font-weight: 900; 
position: absolute; left: 0; top: 4px; color: #007cd5; font-size: 10px;}
.side-subscribe11 {background-color: #0087ff !important; color: #c90000;}
.side-subscribe .side-bt .fal {color: #0087ff; margin-right: 10px;}
.side-subscribe-caption {font-size: 13px; margin-top: 20px; color: #000;}
.side-subscribe .search-box input {padding: 0 15px;}
.side-subscribe button {right: 0; width: 40px;}
.side-subscribe .side-bt {border-bottom: 0; padding-bottom: 0;}

.side-text {padding: 0; color: #000; font-size: 13px; line-height: 1.6;}
.side-links {line-height: 2.2; padding: 0; font-size: 14px;}
.side-links a {margin-right: 20px; color: #ffffff;}
.side-links a:hover {text-decoration: underline;}
.stext {
	font-size: 12px;
	color: #000;
	margin-bottom: 20px;
}


.years-selector{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	align-items:center;
	justify-content:flex-start;
}

.years-selector > li{
	list-style:none;
	margin:0;
	padding:0;
}

.years-selector > li > a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:64px;
	height:34px;
	padding:0 12px;
	border-radius:16px;
	border:1px solid rgba(0,0,0,0.08);
	background:#fff;
	font-size:14px;
	font-weight:600;
	color:#222;
	text-decoration:none;
	transition:all .25s ease;
}

.years-selector > li > a:hover{
	background:#111;
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 8px 20px rgba(0,0,0,0.12);
}
.years-selector > li.active > a{
	background:#0f6fff;
	color:#fff;
	border-color:#0f6fff;
	box-shadow:0 6px 16px rgba(15,111,255,0.25);
}


/* BOTTOM NAVIGATION
----------------------------------------------- */
.bottom-nav {margin-bottom: -10px; padding-top: 30px;}
.navigation {text-align:center;}

.navigation a,
.navigation span,
.pnext a,
.pprev a,
.pprev > span,
.pnext > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  margin: 0 4px 10px 4px;
  line-height: 40px;
  min-width: 40px;
  height: 40px;
  background-color: #f5f8fc;
  border: 1px solid #d6e3f3;
  border-radius: 12px;
  font-weight: 500;
  font-size: 16px;
  color: #1c1c1c;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
  text-decoration: none;
  cursor: pointer;
}

.navigation a:hover,
.pagi-nav a:hover {
  background-color: #e2edfb;
  color: #0b63c5;
  transform: translateY(-1px);
}

.navigation span:not(.nav_ext),
.pagi-nav span:not(.nav_ext) {
  background-color: #043663;
  color: #fff;
  cursor: default;
  font-weight: 600;
}


/* PLAYER
----------------------------------------------- */
.wplayer {width: 100%; position: fixed; left: 0; bottom: 0px; z-index: 990;}
.audioplayer { margin: 0 auto; height: 60px; padding: 5px 20px 10px 20px;
background-color: #043663; color: #eee; box-shadow: 0 -15px 30px rgba(0, 0, 0, 0); position: relative; left: 0px;}
.audioplayer audio {display: none;}
.audioplayer-bar {position: absolute; left: 0px; right: 0px; top: -15px; height: 15px; 
	background-color: #0087ff; border-radius: 10px 10px 0 0; overflow: hidden; border-top: 1px solid #0087ff;}
.audioplayer-bar-loaded {position: absolute; left: 0; top: 0; height: 100%; 
	background-color: rgba(75, 75, 75, 0.473); border-radius: 10px 10px 0 0;}
.audioplayer-bar-played {position: absolute; left: 0; top: 0; height: 100%; 
	z-index: 10; border-radius: 0; background-color: #ffda1b;}

.audioplayer-volume {position: relative; z-index: 100; margin-left: 20px; font-size: 18px; width: 125px;}
.audioplayer-muted .fa-volume-up:before {content: '\f6a9';}



.audioplayer-volume-button, .audioplayer-volume-adjust {display: inline-block; vertical-align: middle;}


.audioplayer-volume-button {width: 20px; }
.audioplayer-volume-button a {color: #fff;}
.audioplayer-volume-adjust {margin-left: 10px;}
.audioplayer-volume-adjust > div {width: 90px; height: 12px; border-radius: 3px; 
position: relative; cursor: pointer; background-color: #2d6cb4; overflow: hidden;}
.audioplayer-volume-adjust > div > div {height: 100% !important; background-color: #d5dadf; 
position: absolute; left: 0; bottom: 0; z-index: 10;}


.ap-dl {font-size: 24px; color: #fff; margin-left: 20px;}
.ap-time {font-size: 12px; color: #ccc; margin-left: 20px;}
.audioplayer-time-current:after {content: '/'; display: inline; margin: 0 6px;}
.ap-desc {width: 300px;}
.ap-img {width: 50px; height: 50px; margin-right: 10px; border-radius: 10px;}
.ap-artist {font-size: 13px; margin-top: 5px; color: #ccc;}
.ap-title {font-size: 15px; font-weight: 500;}
.ap-btns {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.audioplayer-playpause a {width: 40px; height: 40px; line-height: 40px; text-align: center; 
border-radius: 10px; display: block; position: relative; margin: 0 10px; background-color: #2196f3; color: #fff;}
.ap-prev, .ap-next {cursor: pointer; color: #fff; background-color: #2196f3; font-size: 15px; 
width: 35px; height: 35px; text-align: center; border-radius: 10px;}
.audioplayer-volume-button a:hover {opacity: 1; color: #fd3636;}
.ap-dl:hover {opacity: 1; color: #3fc950;}
.audioplayer-stopped .audioplayer-playpause a {padding-left: 0px;}
.audioplayer-playpause a:hover, .ap-prev:hover, .ap-next:hover {background-color: #fff; color: #043663;}
.wplayer-init .audioplayer-playpause .fas:before {content: '\f04b'; padding-left: 1px;}
.player-hide .wplayer {bottom: -80px;}
.player-hide .audioplayer {box-shadow: 0 -15px 30px rgba(0,0,0,0); transform: scale(0.5,0.5);}
.ap-title, .ap-artist {max-width: 230px;}


/* FULL
----------------------------------------------- */
.fheader {margin-bottom: 5px;
    padding: 0px 10px;}
.fheader h1 {color: #495459;     display: flex;    flex-direction: column;}
.fheader h1 div {color: #000; margin-bottom: 5px; font-size: 0.8em; margin-top: 1px;}
.fheader h1 a{margin-left: 15px;}
.fimg {width: 216px; height: 216px; border-radius: 10px;     border: 1px solid #eff2fb;}

.artist-full {}
.title-full {font-size: 30px; color: #001a31; }

.finfo {
	margin: 5px 20px;
    background: #eef2fb;
    display: flex;
    border-radius: 10px;
    padding: 3px 5px;
	min-width: 300px;
	width: -webkit-fill-available;
}
.finfo li {display: flex; justify-content: space-between; font-size: 14px; background-color: #ffffff;     flex-wrap: wrap;
    margin: 4px 0px;
    padding: 8px 10px;
    border-radius: 5px;}
.finfo li > span:first-child {color: #000; display: inline-block; font-weight: 500;}
.finfo span a {color: #0087ff; text-decoration: underline;}
.frate a {display: flex;
		margin: 5px 10px;
		border-radius: 12px 10px 10px 12px;
		margin-top: 5px;
		align-items: center;
		flex-wrap: nowrap;}
.rate-green {
	background-color: #6ab04ca9;
}
.rate-red {background-color: #eb4e4b7e;}
.frate {display: flex; flex-direction: row;}
.frate a .fal {width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 10px; margin-right: 8px;
background-color: #6ab04c; color: #fff; font-size: 18px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: 0.1s;}
.frate a .fal:hover { transform: scale(1.03);}
.frate a + a .fal {background-color: #eb4d4b;}

.lyrics-text {font-size: 18px; margin-bottom: 30px; font-weight: 400; line-height: 1.7; text-align: center; border-top: 1px solid #dae3ed; padding: 30px 5px; border-bottom: 1px solid #dae3ed;}

.fcaption {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background-color: #ffffff;
  /* border-top: 1px solid #e2eaf3; */
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #1c1c1c;
  margin: 24px 5px 10px 5px;
}

.capttext {
  flex: 1;
}


.ffav a {display: block;}
.ffav .track-fav {width: auto; padding: 0 10px; border-radius: 10px; 
	margin: 10px 0 0 0; display: block; line-height: 30px; color: #ccc;}
.ffav .fal, .ffav .fas {color: #0087ff; margin-right: 8px;}
.ffav .track-fav a {color: #ccc;}

.fctrl {width: 230px; margin: 20px auto 10px; max-height: 216px;}
.fplay {height: 60px; border-radius: 6px; cursor: pointer; color: #fff; font-size: 13px;
	background: linear-gradient(135deg, #0087ff 0%,#393b8d 100%); box-shadow: 0 2px 6px rgba(0,0,0,0.1); 
	position: relative; padding: 10px 10px 10px 50px; margin-bottom: 15px;}
.fplay-radio {height: 60px; border-radius: 6px; cursor: pointer; color: #fff; font-size: 13px; width: 100% !important;
		background: linear-gradient(135deg, #0087ff 0%,#393b8d 100%); box-shadow: 0 2px 6px rgba(0,0,0,0.1); 
		position: relative; padding: 10px 10px 10px 50px; margin-bottom: 15px;}	
.fplay-caption div {font-size: 15px; font-weight: 500; margin-bottom: 3px; text-align: center;
    line-height: 40px;
    margin-right: 15px;}
.fplay .track-play {opacity: 1; width: 40px; border-radius: 6px 0 0 6px; font-size: 14px; 
background-color: rgba(0,0,0,0.15); color: #fff;}
.fplay-radio .track-play {opacity: 1; width: 40px; border-radius: 6px 0 0 6px; font-size: 14px; 
	background-color: rgba(0,0,0,0.15); color: #fff;}
.fdl {display: block; margin-bottom: 0; color: #fff !important;
	background: linear-gradient(135deg, #6ab04c 0%,#3fc950 100%);}
.fdl .track-play {color: #fff; font-size: 18px;}
.js-item-played .fa-play:before {content: '\f04c';}
.fplay:hover {box-shadow: 0 2px 6px rgba(0,0,0,0);}
.fplay-radio:hover {box-shadow: 0 2px 6px rgba(0,0,0,0);}
.fplay:hover .track-play {background-color: rgba(0,0,0,0.3);}

.show-text {width: 40px; height: 40px; border-radius: 50%; text-align: center; font-size: 18px; 
	cursor: pointer; background-color: #1071de; color: #ffeb3b; 
position: absolute; bottom: 40px; left: 50%; margin-left: -20px; z-index: 5;}
.ftext[style]::before {content: ''; pointer-events: none; height: 100%; position: absolute; z-index: 3;
	left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 0%, #002d553d 100%); border-radius: 10px;}
.ftext {position: relative;}

.fcols .fcaption {width: 230px; margin: 0 0 0 15px; text-align: right;}
.fimg-podb {border-radius: 10px; height: 260px; color: #eee;}
.fimg-podb .fheader {position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; margin: 0; padding: 15px 30px;}
.fimg-podb a, .fimg-podb h1 {color: #eee;}
.fimg-podb::before {content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; 
	background: linear-gradient(to top, #002d553d 0%, transparent 100%); height: 50%;}


/* 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.7; font-size: 15px; text-align: center;}
.full-text img:not(.emoji) {max-width:100%; margin-top: 10px; margin-bottom: 10px;}
.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:#002d553d;}
.full-text a:hover {text-decoration:none;}
.full-text h2, .full-text h3, .full-text h4, .full-text h5 {margin:10px 0;}
.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;}



/* COMMENTS
----------------------------------------------- */
.add-comms {margin-top: 30px; display: none;}
.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 {display: none;}
.last-comm-link {display: inline-block; padding-bottom: 2px; color: #06c; font-size: 18px;}

.comm-avatar {position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 10px;}
.comm-letter {position: absolute; left: 0; top: 0; width: 100%; height: 100%; line-height: 40px; text-align: center; 
background-color: #000; color: #fff; font-size: 18px; font-weight: 600; text-transform: uppercase;}
.comm-item {font-size: 13px; padding-left: 60px; position: relative; min-height: 60px; margin-top: 15px; margin-bottom: 15px; background: #edf2fb; border-radius: 10px;}
.comm-two {margin: 10px 0; font-size: 15px;}
.comm-one > span {margin-right: 15px; color: #000;}
.comm-one > span.comm-author, .comm-one > span.comm-author a {color: #000; opacity: 1; font-weight: 500;}
.comm-three-left > a, .comm-three-right li a {opacity: 0.6;}
.comm-three-right li {display: inline-block; margin-left: 15px;}
.comm-rate3 {white-space:nowrap; font-size:14px; margin-right: 15px; height: 20px; line-height: 20px; 
	display: inline-block; vertical-align: top; position: relative; top: -3px; color: #ccc;}
.comm-rate3 a {display: inline-block; vertical-align: middle; position: relative; opacity: 0.8;}
.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 {border-bottom-color: transparent;}
.comm-three-left > a {opacity: 1; color: #0087ff;}
.comment-button {
	display: inline-block;
    text-align: center;
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 400;
    box-shadow: none;
    background-color: #ffffff;
    color: #002d55;
    font-size: 15px;
}
/* LOGIN
----------------------------------------------- */
.overlay-box {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; 
opacity: 0.8; background-color: #000; cursor: pointer;}
.login-box {position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%); 
background-color: #cdcdcd; padding: 30px 60px 40px 60px; border-top: 5px solid #0087ff; width: 400px; 
box-shadow: 0 20px 60px rgba(0,0,0,0.5);}
.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: 22px; font-weight: 500; margin-bottom: 15px; text-align: center;}
.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: #111; color: #939393;}
.login-input {margin-bottom: 15px;}
.login-btn button {width: 100%; margin: 15px 0;}
.login-btm a {border-bottom: 1px dotted #0087ff; color: #0087ff; font-size: 13px;}
.login-check {position: relative; font-size: 14px;}
.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: #111; 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: #111;}
.login-check input:checked + span:after {left: 13px; background-color: #eb4d4b; box-shadow: 0 1px 4px rgba(0,0,0,0.3);}
.login-menu {border-top: 1px solid #111; border-left: 1px solid #111;}
.login-menu li {text-align: center; border-right: 1px solid #111; border-bottom: 1px solid #111; width: 50%;}
.login-menu a {display: block; padding: 10px 5px; font-size: 13px;}
.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: #111; 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%;}

/* share-block */

.share-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px 8px;
  background: #f7faff;
  border-radius: 12px;
  margin: 16px auto 5px;
  font-weight: 500;
}

.share-a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  font-size: 20px;
  border-radius: 50%;
  color: #0b63c5;
  background-color: #eaf2fb;
  transition: transform 0.15s ease, background-color 0.2s ease;
  text-decoration: none;
}

.share-a:hover {
  transform: translateY(-2px);
  background-color: #d0e5f9;
  color: #004a99;
}


.counter-page {
	background: #f7faff;
	text-align: right;
	border-radius: 10px;
	margin-top: 10px;
	padding: 5px 10px 5px 10px;
	position: relative;
    display: inline-block;
    margin-left: 260px;
}

.dmca-button {
	margin: 5px;
    padding: 10px;
    background: #0888fe;
    display: inline-block;

}

.schema {
	display: ruby;
	font-size: 12px;
	font-weight: 400;
} 

.speedbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  background-color: #f7faff;
  padding: 12px 16px;
  margin-bottom: 0;
  font-size: 13.5px;
  line-height: 1.6;
  border-radius: 12px;
  font-weight: 500;
  color: #1d3f66;
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #d6e4f1;
  overflow-x: auto;
  margin-bottom: 15px;
}

.speedbar a {
  color: #0b63c5;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.speedbar a:hover {
  color: #004a99;
  text-decoration: underline;
}

.speedbar .fas {
  margin-right: 6px;
  color: #004a99;
  font-size: 14px;
  flex-shrink: 0;
}

.speedbar span {
  color: #444;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* telegram ico */


.telegram {
	display: block;
    font-size: 14px;
    font-weight: 500;
    color: #0087ff;
    max-width: 220px;
    padding: 5px;
	height: 40px;
    border-radius: 10px;
    border: 1px solid;
}

.teleshare {
	display: block;
	text-align: center;
	margin: 0 auto;
}

.teleshare a{
	border: 2px solid #ffffff;
	padding: 5px 15px;
	border-radius: 10px;
	max-width: 200px;
	margin-top: 5px;
	transition: 0.3s;
	font-weight: 500;
	color: #FFF;
	font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.teleshare a:hover {
	transform: scale(1.03);
	transition: all .3s ease;
}

/* playlist-section */

.subitem-link-1 {
	padding: 50px 25px;
    margin: 10px;
    border-radius: 5px;
    border: 1px solid #d6ecffc7;
    width: 340px;
    height: 170px;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}



.subitem-sect {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
  padding: 5px 2px;
  border-bottom: 1px solid #eee;
}

.subitem-name {
  /* padding: 3px 10px; */
    white-space: nowrap;
    font-size: 14px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    width: 100%;
  }

.subitem-link-img {
  display: flex;
  flex: 1 1 100%;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #eeeeee62;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  
}

.subitem-link-img:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.06);
}

.subitem-link-img img {
  border-radius: 10px 10px 10px 10px;
  width: 100%;
  object-fit: cover;
}

@media (min-width: 360px) and (max-width: 500px) {
  .subitem-link-img {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 10px);
  }
  .subitem-name {font-size: 12px;}
  .subitem-sect {gap: 15px !important;}
}

@media (min-width: 501px) and (max-width: 1219px) {
  .subitem-link-img {
    flex: 1 1 calc(33.333% - 20px);
    max-width: calc(33.333% - 10px);
  }
  .subitem-sect {gap: 15px !important;}
  .subitem-name {font-size: 13px;}
}

@media (min-width: 1220px) {
  .subitem-link-img {
    flex: 1 1 calc(25% - 20px);
    max-width: calc(25% - 10px);
  }
}


.subitem-link-img:last-child {flex-grow: 0;}

.subitem-link {
  flex: 1 1 100%;
  max-width: 100%;
  padding: 50px 25px;
  margin: 10px;
  border-radius: 5px;
  border: 1px solid #d6ecffc7;
  text-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 170px;
  box-sizing: border-box;
}

.subitem-link:hover {
	transform: scale(1.03);
	transition: all .3s ease;
}

@media (min-width: 600px) {
  .subitem-link {
    flex: 1 1 calc(50% - 40px);
    max-width: calc(50% - 40px);
  }
}

@media (min-width: 1200px) {
  .subitem-link {
    flex: 1 1 calc(33.333% - 40px);
    max-width: calc(33.333% - 40px);
  }
}

@media (max-width: 600px) {
  .subitem-link {
    height: 75px !important;
    padding: 30px 25px;
  }
}


.cover-text {
	background-color: #f1f1f1ce;
    padding: 8px 13px;
    font-weight: 700;
    border-radius: 5px;
    width: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}
 

.artist-link {
	width: 60px;
	height: 60px;
	position: relative;
	display: flex;
}

.artist-postimg {
	width: 60px;
	height: 60px;
}

.telegram-knopka {
	color: #0087ff !important;
	font-size: 21px !important;
}

.fa-facebook, .fa-telegram, .fa-x-twitter {font-size: 24px !important;}
  .owl-dots {
    overflow: hidden;
    max-width: 210px;
    white-space: nowrap;
    margin: 0 auto;
}






/* addon */

.ap-mob-btn{
	font-size:0 !important;
}

.ap-mob-btn .fal{
	font-size:22px;
}
/* ADAPTIVE
----------------------------------------------- */
.btn-menu {display: none;}

.side-panel{
	width:300px;
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
	position:fixed;
	left:-301px;
	top:0;
	z-index:9999;
	transition:left .35s ease;

	background:#fff;
	border-right:1px solid rgba(0,0,0,0.08);
	box-shadow:12px 0 30px rgba(0,0,0,0.12);

	padding:14px 12px 18px;
}

.side-panel.active{
	left:0;
}

.close-overlay{
	width:100%;
	height:100%;
	position:fixed;
	left:0;
	top:0;
	z-index:9998;
	display:none;
	background:rgba(0,0,0,0.48);
}

body.opened-menu{
	overflow:hidden;
	width:100%;
	height:100%;
}

.btn-close{
	cursor:pointer;
	position:fixed;
	right: 20px;
	top:-44px;
	z-index:10000;
	width:40px;
	height:40px;
	border-radius:14px;

	display:flex;
	align-items:center;
	justify-content:center;

	background:#ff0000;
	color:#fff;
	font-size:18px;

	transition:top .35s ease, transform .25s ease, box-shadow .25s ease;
	box-shadow:0 10px 22px rgba(0,0,0,0.18);
}

.btn-close.active{
	top:10px;
}

.btn-close:hover{
	transform:translateY(-1px);
	box-shadow:0 14px 28px rgba(0,0,0,0.22);
}

.side-panel .hidden-menu{
	width:100%;
	margin:0;
	padding:0;
	box-shadow:none;
	border-radius:0;
	position:static;
	visibility:visible;
	transform:none;
	opacity:1;
}

.side-panel .hidden-menu li{
	margin:0 0 8px 0;
	white-space:normal;
	max-width:100%;
	min-width:0;
}

.side-panel .hidden-menu li a{
	display:flex;
	align-items:center;
	gap:10px;

	padding:10px 12px;
	border-radius:16px;

	background:rgba(0,0,0,0.04);
	border:1px solid rgba(0,0,0,0.06);

	color:#111;
	text-decoration:none;

	transition:background .25s ease, transform .25s ease, box-shadow .25s ease, color .25s ease;
}

.side-panel .hidden-menu li a:hover{
	background:#111;
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 12px 26px rgba(0,0,0,0.14);
}

.side-panel .hidden-menu li a:active{
	transform:translateY(0);
	box-shadow:0 6px 14px rgba(0,0,0,0.10);
}

.side-panel .hidden-menu li.active > a,
.side-panel .hidden-menu li.current > a{
	background:#0f6fff;
	color:#fff;
	border-color:#0f6fff;
	box-shadow:0 10px 22px rgba(15,111,255,0.22);
}

.side-panel .hidden-menu li a .fal,
.side-panel .hidden-menu li a .far,
.side-panel .hidden-menu li a .fas{
	width:18px;
	text-align:center;
	flex:0 0 auto;
	font-size:16px;
}

.side-panel .hidden-menu li a span,
.side-panel .hidden-menu li a b{
	min-width:0;
}

.side-panel .hidden-menu li a .nowrap{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.side-panel::-webkit-scrollbar{
	width:10px;
}

.side-panel::-webkit-scrollbar-track{
	background:transparent;
}

.side-panel::-webkit-scrollbar-thumb{
	background:rgba(0,0,0,0.14);
	border-radius:20px;
	border:3px solid transparent;
	background-clip:content-box;
}

@media screen and (max-width: 1220px) {
.wrap {padding: 0; overflow: hidden;}
.wrap-center { width: calc(100% - 20px); }
.col-left {margin-right: 15px;}

.search-wrap {margin: 0 30px;}
.header-btn {background-color: rgba(0,0,0,0.1); color: #0087ff;}
.header, .sect, .side-box {margin-bottom: 15px;}
.col-right {margin-left: 15px;}
#gotop {bottom: 90px; width: 40px; height: 40px; line-height: 40px; font-size: 18px;}
.wplayer {bottom: 0;}
.audioplayer, .audioplayer-bar {border-radius: 0; max-width: 100%; left: 0;}

.fcols .fcaption {width: 100%; margin: 10px 0 -15px 0; text-align: left;}
.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {height:400px;}
.counter-page {
	margin-left: 255px;
}
.album-item {
    width: 20%; }

.fctrl {width: 100%; margin: 15px 0 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; }
.fplay {width: 48%; margin: 2px;}
.fplay-radio {width: 80%; margin: 0 auto; margin-top: 10px;}
.finfo {margin-left: 20px; margin-right: 0;}
}

@media screen and (max-width: 950px) {
.col-right {display: none;}
.col-left {display: none;}
.footer {display: block; text-align: center;}
.footer-copyright {margin: 0 0 10px 0;}
.btn-menu {
	display: block;
    font-size: 28px;
    margin-left: 15px;
    margin-right: 15px;
    cursor: pointer;
    color: #efda1b;}
.side-box {
	padding: 10px;}
.counter-page {
	margin-left: 0px;
}
.close-button {display: none !important;}
.fheader {margin-bottom: 15px;}

}


@media screen and (max-width: 760px) {
.wrap-center { padding: 2px 2px 70px 2px;;}
.not-logged .login-avatar {display: none;}
.login-close {top: -5px;}
.login-title {font-size: 18px;}
.login-box {max-width: calc(100% - 60px); padding: 15px;}
.header-in {padding: 10px 0;}
.search-wrap {-ms-flex-order: 10;-webkit-order: 10;order: 10; min-width: 100%; margin: 10px 0 0 0;}
.logo {-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; margin-right: 15px; background-color: #2c567c00;
    height: auto;
    width: auto;
    padding-left: 10px;
    text-align: center;
	margin-right: 75px;
}
.sect-col {width: 100%;}
.sect-col3 {width: 100%;}
.sect-col + .sect-col {margin-top: 30px;}
.sect-bg {padding-left: 15px; padding-right: 15px;}
.ap-title, .ap-artist {max-width: 100%;}
.ap-desc {position: absolute; left: 0; right: 0; bottom: 120%; z-index: 5; min-width: 100%; padding: 10px 10px 10px 10px; 
background-color: #043663; box-shadow: 0 0 30px rgba(0,0,0,0.1); visibility: hidden;}
.ap-mob-btn {display: block; cursor: pointer; font-size: 28px; color: #ffffff;}
.ap-time {-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; justify-content: flex-end;}
.ap-desc.is-active {visibility: visible;}
.audioplayer-volume {display: none;}
.ap-btns {left: 70px; transform: translate(0,-50%);}

.fctrl {width: 100%; margin: 15px 0 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; }
.fplay {width: 48%; margin: 2px;}
.fplay-radio {width: 80%; margin: 0 auto; margin-top: 10px;}
.fimg-podb {border-radius: 0; margin: -30px -15px 0 -15px;}
.fimg-podb .fheader {padding: 15px;}
.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;}
.album-item {
    width: 20%; }
.search-wrap {justify-content: center;}
}

@media screen and (max-width: 660px) {
	.frate {display: flex; flex-direction: column;	margin: 0px 10px;justify-content: center;}
  .owl-dots {
    overflow: hidden;
    max-width: 210px;
    white-space: nowrap;
    margin: 0 auto;
}
}

@media screen and (max-width: 620px) {
	.fullposter {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
	.fheader {display: flex; justify-content: center;}
	.fheader \ {align-items: center;}
	.finfo {margin: 15px 0px; flex-grow: 1;}
	.fimg {
	width: 220px;
	height: 220px;
	}
	.lyrics-text {font-size: 15px;}
}

	


@media screen and (max-width: 590px) {
/* .wrap-center {max-width:480px;} */
.header-btn {margin-left: 15px; font-size: 12px; padding: 0 10px; border-radius: 15px; height: 30px; line-height: 30px;}
.sect-title {font-size: 15px; display: flex;
	flex-direction: row;
	justify-content: center;}

.sect-items {margin: 0 -5px -10px -5px;}
.album-item, .collection-item {width: 30%; padding: 0 5px; margin-bottom: 10px; margin: 10px 5px;}
.col-right {display: block; width: 100%; margin: 10px 0 0 0;}
.frate {font-size: 13px;}
.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;}
.speedbar {padding-left: 10px; font-size: 12px;}

.sect-link-top {
	margin-top: 5px;
}
.subitem-sect {font-size: 15px;}

}

@media screen and (max-width: 500px) {
	.sect-bg {
		padding-left: 8px;
		padding-right: 8px;
	}
}


@media screen and (max-width: 470px) {
/* .wrap-center {max-width:400px;} */
.track-time {font-size: 12px; margin-left: 10px; display: none;}
.track-dl {margin-left: 10px;}
.logo {font-size: 20px; background-color: #2c567c00;
    height: auto;
    width: auto;
    padding-left: 10px;
}
.track-dop {scale: 0.8;     margin: 0px -15px 0px 0px;}
.share-buttons {
    margin: 20px auto;
    background: #f7faff;
    text-align: center;
    padding: 5px 10px 5px 10px;
    font-weight: 500;
}

.sect-link-top {
	height: 30px;
	line-height: 30px;
	display: inline;
	cursor: pointer;
	max-width: 200px;
	padding: 0 15px;
	background-color: #2c567c24;
	border-radius: 7px;
	font-size: 13px; 
}

/* .subitem-sect {line-height: 30px;} */
.fmain {margin: 0px; margin-bottom: 15px; border-radius: 10px; padding: 7px;}
.frate {font-size: 13px;}
/* .frate a .fal {width: 30px; height: 30px; line-height: 30px; font-size: 14px; margin-right: 5px; } */
.fheader h1 {font-size: 20px;}
.finfo li {line-height: 1.5;}
.ffav {display: none !important;}
.fcols .fcaption {margin-bottom: 0;}
.fimg-podb {margin-top: -15px; height: 150px;}
.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {height:250px;}
.speedbar {padding-left: 10px;}
.liketext {display: none;}
.track-title {font-size: 14px;}
.track-subtitle {font-size: 12px;}
}


@media screen and (max-width: 399px) {
	.wrap-center {max-width:360px;}
	.track-time {font-size: 10px; margin-left: 10px; display: none;}
	.track-dl {margin-left: 10px;}
	.logo {font-size: 20px; background-color: #2c567c00;
		height: auto;
		width: auto;
		padding-left: 10px;
	}
	.share-buttons {
		margin: 15px auto;
		background: #f7faff;
		text-align: center;
		font-weight: 500;
	}
	
	.fmain {margin-bottom: 15px; border-radius: 0; padding: 7px;}
	.frate {font-size: 12px;}
	.frate a .fal {width: 30px; height: 30px; line-height: 30px; font-size: 14px; margin-right: 5px;}
	.fheader h1 {font-size: 20px;}
	.finfo li {line-height: 1.5;}
	.ffav {display: none !important;}
	.fcols .fcaption {margin-bottom: 0;}
	.fimg-podb {margin-top: -15px; height: 150px;}
	.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {height:250px;}
	.speedbar {padding-left: 10px;}
	}