@import "../fonts/bebasneue/bebasneue.css";

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

body {
	font: 15px 'Uni Sans', sans-serif;line-height: 23px;padding: 0;margin: 0;color: #ded6c8;min-height: 100%;width: 100%;font-weight: 400;
	background : -webkit-linear-gradient(left, rgb(19, 6, 26) 00%, rgb(27, 4, 48) 99%);
	background : -moz-linear-gradient(left, rgb(19, 6, 26) 00%, rgb(27, 4, 48) 99%);
	background : -o-linear-gradient(left, rgb(19, 6, 26) 00%, rgb(27, 4, 48) 99%);
	background : -ms-linear-gradient(left, rgb(19, 6, 26) 00%, rgb(27, 4, 48) 99%); 
	background : -linear-gradient(left, rgb(19, 6, 26) 00%, rgb(27, 4, 48) 99%);	
}
a {color: #ded6c8;text-decoration: none;}
a:hover, a:focus {color: #ded6c8;text-decoration: none;}
h1, h2, h3, h4, h5 {font-weight: 400; font-size: 24px;}

button, textarea, input[type="text"], input[type="password"] {appearance: none; -webkit-appearance: none;
	font-size: 16px; font-family: 'Uni Sans' !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 40px;height: 30px;line-height: 30px;border-radius: 0;cursor: pointer;font-size: 16px;font-weight: 400;background-color: #160e3f;color: #fff;}
.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: #160e3f;color: #fff;}
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: 30px;line-height: 30px;border-radius: 20px;border: 0;padding: 0 20px;}
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: #ffffff;color: #6c7373;box-shadow: inset 0 0 0 1px #000, inset 1px 2px 5px rgba(0,0,0,0.2);}
select {width: auto;}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus
{box-shadow: inset 0 0 0 1px #e67e22, inset 1px 2px 5px rgba(0,0,0,0.1);}
input::placeholder, textarea::placeholder {color: #6c7373; font-size: 15px;}
input:focus::placeholder, textarea:focus::placeholder {color: transparent}

header {
	background: none;
	padding: 10px 0;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

.img-box, .img-wide, .img-square, .img-resp, .img-resp-vert, .img-resp-sq, .img-fit {overflow: hidden; position: relative;}
.img-resp {padding-top: 70%;}
.img-resp-vert {padding-top: 145%;}
.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: auto;height: 14px;object-fit: cover;min-height: auto;position: relative;z-index: 6;margin-top: 1px;margin-left: 2px;pointer-events: none;}
.show-player .img-fit img { display: none }
.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;
.fx-row > .content {flex-grow: 1}					   
-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, .fw700 {font-weight: 700;}
.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, .mask-img-after:after, .side-box-nav a:before, .hmenu a:before, .audioplayer-bar {transition: all .3s;}*/
.mtitle, .sub-title h1, .form-wrap h1 {margin-bottom: 15px;font-size: 24px;font-weight: 700;color: #e3ff5e;}
#dle-content > *:not(.album-item) {width: 100%;}
.grad, .side-box-nav a:before, .sres-title span, .audioplayer-bar-played, .audioplayer-playpause a
{background-color: rgba(0,0,0,0.2);color: white;}
.lyric {
	padding: 20px;
}
div.track-title span.song {font-weight: normal !important;}
/* BASIC GRID
----------------------------------------------- */
.wrap {min-width:320px;position: relative;}
.wrap.header-wrap {
	padding-top: 0;
	background: #000 url(../images/fon.png) top left repeat-x;
}
.wrap-center {max-width: 1000px;width: calc(100% - 30px);margin:0 auto;position:relative;z-index:20;}
.content {padding: 0px 0 40px 0;flex-grow: 1}
.col-right {width: 230px;margin-left: 20px;padding: 0px;align-self: flex-start;}
.col-main {min-height: 80vh;}

.footer {
    max-width:900px;
    width: calc(100% - 30px);
    margin:0 auto;
    position:relative;
    z-index:10;
    background: none;
    padding: 30px 20px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    text-align: center;
    color: #6d6275;
    font-weight: 600;
    font-size: 15px;
}


.finfo li {
    position: relative;
    padding: 4px 10px 4px 130px;
    min-height: 31px;
}
.finfo li > span:first-child {
    position: absolute;
    left: 0px;
    top: 4px;
    opacity: 0.5;
}

.ffplay {
	padding: 10px 20px 20px 20px;
}

.full {
	padding: 0;
	background: #111414;
}

h2 { display: inline; font-size: 15px;}


.track-img-full {margin-right: 20px;margin-top: 0;width: 250px;height: 250px;border-radius: 40px;padding: 0;text-align: center;border: none;overflow: hidden;display: flex;align-items: center;justify-content: center;background: url(../images/fon.png) top left repeat-x, url(../images/fon2.png) bottom left repeat-x;background-color: black;}

/* HEADER
----------------------------------------------- */
.logo {width: 186px;/* height: 90px; */display: block;}
.search-wrap {padding-left: 50px;}
.search-box {width:100%;position:relative;border-bottom: 2px solid #8ea03b;}
.search-box input, .search-box input:focus {box-shadow:none;padding: 0 20px 0 55px;background: none;color: #6c7373;border-radius: 0;width: 275px;max-width: 100%;text-align: center;}
.search-box button {position:absolute;left: 0px;top:0px;z-index:10;padding:0 !important;background:transparent !important;color: #e3ff5e!important;font-size: 16px !important;width: 30px;line-height: 30px;box-shadow: none !important;display: flex!important;align-items: center;justify-content: center;background: none!important;}
.hmenu {padding-left: 40px;}
.hmenu li a {margin-right: 50px;color: #ded6c8;position: relative;font-size: 17px;display: block;font-weight: 600;}
.hmenu li:last-child a {margin-right: 0px}
.hmenu li a:hover, .hmenu li a.is-active {color: #ded6c8;text-decoration: underline;}
.hmenu a:hover:before, .hmenu a.is-active:before {right: 0 !important;}
.hmenu>li>a:before {bottom: -10px !important; height: 2px !important; border-radius: 1px !important;}
.hmenu>li>a:before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 16px!important;
	background-size: contain;
	background-repeat: no-repeat;
	position: static!important;
	opacity: 1!important;
	vertical-align: middle;
}

.hmenu>li:nth-child(1)>a:before {
	background-image: url(../images/hmenu-1.svg);
}

.hmenu>li:nth-child(2)>a:before {
	background-image: url(../images/hmenu-2.svg);
}

.hmenu>li:nth-child(3)>a:before {
	background-image: url(../images/hmenu-3.svg);
}



.sres-wrap + .sres-wrap {margin-top: 40px;font-family: 'Bebas Neue';}
.sres-title {font-size: 18px; font-weight: 700; color: #FDFDFD; margin-bottom: 20px;}


/* SECT, SIDE, MUZSTAR.NET
----------------------------------------------- */
.sect + .sect {margin-top: 60px;}
.sect-header {padding-top: 30px;margin-bottom: 30px;align-items: flex-end;}
.sect-title {font-size: 35px;line-height: 40px;font-weight: 600;color: white;text-align: center;display: inline-block;padding: 0;font-family: 'Bebas Neue';}
.sect-title::first-letter {
	color: #e3ff5e;
}
.sect-title h1 {font-size: 35px;font-weight: 600;color: #e3ff5e;/* margin-top: 15px; */}
.sect-caption {margin-top: 2px;}
.sect-link {color: #e3ff5e;margin: 30px auto;display: block;}
.sect-link:hover {color: #160e3f; text-decoration: underline;}
.sect-col, .side-box-content, .sect-content-bg {
	/*background-color: #262733;*/
	border-radius: 0;
	/*box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);*/
	/* overflow: hidden; */
	width: 48.9%;
	}
.sect-col-3 {border-radius: 0;/* overflow: hidden; */width: 32.5%;width: 100%;}
.sect-content-bg {width: 100%;/* background-color: #262733; */}
.sect-content-bg-2 {width: 100%;background: #24124f;padding: 10px 10px 5px 10px;border-radius: 7px;}
.mb-rem {margin-bottom: -20px;}
.side-box-content {width: 100%; padding: 20px 10px 10px 10px;}
.site-desc {margin-top: 30px; opacity: 0.8;}
.site-desc-text {font-size: 14px; line-height: 1.3; margin-top: 15px;}
.site-desc-text p + p {margin-top: 15px;}

.side-box-nav {padding: 30px 0;}
.side-box-nav li {padding: 0 20px; margin-bottom: 20px;}
.side-box-nav a {display: inline-block; position: relative;}
.side-box-nav ul + ul {padding-top: 20px; border-top: 3px solid #ffffff;}
.side-box-nav a:hover, .side-box-nav a.is-active {color: #fff;}
.side-box-nav a:before, .hmenu>li>a:before {content: '';
position: absolute; left: 0; right: 99%; bottom: 0px; opacity: 0; height: 4px; border-radius: 2px;}
.side-box-nav a:hover:before, .side-box-nav a.is-active:before,
.hmenu a:hover:before, .hmenu a.is-active:before {right: -45px; opacity: 1;}
.side-box-tags {font-size: 0; padding-right: 0px; padding-bottom: 10px;}
.side-box-tags li {display: inline-block; vertical-align: top; margin: 0 10px 10px 0;}
.side-box-tags a {display: block; height: 30px; line-height: 30px; border-radius: 15px; padding: 0 20px;
background-color: #484E5C; color: #FDFDFD; font-size: 15px;}
.side-box-tags a:hover {color: #160e3f;}


/* TRACK ITEM
----------------------------------------------- */
.track-item {flex-basis:100%;flex-grow: 1;padding: 0;margin-bottom: 20px;border-radius: 0;flex-wrap: nowrap;height: 52px;display: flex;align-items: stretch;}
.track-item-main {padding: 10px; background-color: #262733; margin-bottom: 12px; border-radius: 6px; /*border-bottom: 1px solid #363A47;*/}
/*.track-item:last-child {padding: 10px; border-bottom: 0px;}*/
.track-item a {display: block;}
.track-img {width: 72px;height: 72px;margin: -10px;border-radius: 50%;/* margin-right: 0; */text-align: center;display: flex;justify-content: center;align-items: center;flex-shrink: 0;}
.track-img-side {width: 40px; height: 40px; border-radius: 20px; margin-right: 12px; text-align: center;}
.track-title, .album-title {font-size: 16px;/* line-height: 20px; */font-weight: 600;color: white;}
.track-subtitle, .album-subtitle {margin-top: 3px; font-size: 15px;}
.track-time {opacity: 0.5;font-size: 13px;width: 142px;text-align: right;display: flex;justify-content: space-evenly;align-items: center;}
.track-time span {
	background-color: #160e3f;
	padding: 5px 10px;
	border-radius: 5px;
}
.track-fav {width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 50%;
	background-color: #160e3f; font-size: 14px; margin-left: 10px; opacity: 0; position: relative;}
.track-fav a {color: #ffffff;}
.track-fav div {position: absolute; left: 50%; bottom: 110%; transform: translateX(-50%); padding: 1px 10px;
background-color: #160e3f; color: #ffffff; line-height: normal; display: none; border-radius: 2px;}
.track-fav:hover div {display: block;}
.track-play {position: absolute;z-index: 5;left: 0;top: 0;width: 52px;height: 52px;opacity: 1;cursor: pointer;margin: 10px;background: #e3ff5e;border-radius: 50%;}
.track-play .fa {
	width: 32px;
	height: 32px;
	line-height: 34px;
	border-radius: 50%;
	margin-top: 10px;
	font-size: 12px;
	}
.track-item:hover, .show-player {/*background-color: #F4F1EE;*/}
.track-desc:hover .track-title, .album-in:hover .album-title {color: white;}
.track-item:hover .track-fav, .track-item:hover .track-play,
.show-player .track-play, .show-player .track-fav {/* opacity: 0; */}
.track-item:hover .track-time, .show-player .track-time {color: #FDFDFD;}
.track-item:hover .track-play, .show-player .track-play {/* background-color: rgba(212,22,178,0.3); */box-shadow: 0 0 7px 1px #e3ff5e;}
.track-play .fa-play {padding-left: 0px;opacity: 0;}
.js-paused .fa:before {content: '\f04b'; padding-left: 2px;}
.singer {font-size: 16px;color: #a7a0b9;font-weight: normal; max-width: calc(100vw - 100px);}
.singer-side {margin-top: 3px; font-size: 15px;}

.track-item-side {padding: 14px;}
.track-item-side a {display: block;}

@media screen and (min-width: 950px) {
	.frels .track-desc {display: flex;/* justify-content: space-between; */}
	.frels .track-title, .frels .track-subtitle {/* width: 46%; */}
}


/* ALBUM
----------------------------------------------- */
.album-item {width: 23.5%; margin-bottom: 20px;}
.album-in {display: block; border-radius: 6px; background-color: #262733;}
.album-desc {position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 10px;}
.album-in:after {content: ''; position:absolute; z-index: 3; left:0; bottom:0; width:100%; height:70%;}


/* BOTTOM MYZSTAR.NET NAVIGATION
----------------------------------------------- */
.bottom-nav {text-align:center; padding-top: 30px;}
.pagi-nav {max-width:100%; display:inline-block;}
.pagi-nav > span {display:inline-block;}
.pnext a, .pprev a, .pprev > span, .pnext > span {display:block; width:36px; text-align:center;}
.navigation {/* line-height: 40px; */flex-grow: 1;flex-basis: 100%;margin-top: 30px;display: flex;justify-content: center;}
.navigation a, .navigation span, .pnext a, .pprev a, .pprev > span, .pnext > span {/* display:inline-block; *//* padding: 0; *//* margin: 0; */border-radius: 0;min-width: 40px;background-color: #e3ff5e;}
.navigation span:not(.nav_ext) {color:#000;font-weight: 700;}


/* PLAYER
----------------------------------------------- */
.item-player {width: 100%; position: fixed; left: 0; bottom: 0; z-index: 20; background-color: #160e3f;}
.audioplayer {max-width: 900px; width: calc(100% - 30px); margin: 0 auto; height: 80px; color: #ffffff}
.audioplayer audio {display: none;}
.audioplayer-bar {position: absolute; left: 0; right: 0; bottom: 100%; height: 2px; background-color: #F4F1EE;}
.audioplayer-bar-loaded {position: absolute; left: 0; top: 0; height: 100%; background-color: rgba(0,0,0,0.3);}
.audioplayer-bar-played {position: absolute; left: 0; top: 0; height: 100%;
	z-index: 10; background-color: #ffffff;}
.audioplayer-bar-played:before {content: ''; background-color: #ffffff; width: 12px; height: 12px; border-radius: 50%;
position: absolute; right: -3px; top: 50%; margin-top: -6px; z-index: 3;}
.audioplayer:hover .audioplayer-bar {height: 10px;}

.audioplayer-volume {position: absolute; z-index: 100; left: 50%; top: 50%; margin-left: 100px; margin-top: -15px;}
.audioplayer-muted .fa-volume-up:before {content: '\f026';}
.audioplayer-volume-button a {color: #fff; display: block; width: 30px; height: 30px; line-height: 30px; text-align: center;}
.audioplayer-volume-adjust {position: absolute; left: 0; bottom: 100%; width: 30px; height: 100px;
background-color: #F4F1EE; box-shadow: 0 0 10px rgba(0,0,0,0.5); padding: 10px; display: none;}
.audioplayer-volume-adjust > div {width: 10px; height: 80px; border-radius: 5px;
position: relative; cursor: pointer; background-color: #ffffff; overflow: hidden;}
.audioplayer-volume-adjust > div > div {width: 100% !important; background-color: #160e3f;
position: absolute; left: 0; bottom: 0; z-index: 10;}
.audioplayer-volume:hover .audioplayer-volume-adjust {display: block;}

.ap-time {font-size: 14px; opacity: 0.8;}
.audioplayer-time-current:after {content: '/'; display: inline; margin: 0 6px;}
.ap-desc {width: calc((100% - 160px)/2);}
.ap-img {width: 40px; height: 40px; margin-right: 10px; overflow: hidden; display: none;}
.ap-img img {width: 100%; height: 100%; object-fit: cover;}
.ap-artist {font-size: 12px;}
.ap-title {color: #fff; font-weight: 700;  margin-top: 3px;}
.ap-btns {width: 130px; height: 46px; position: absolute; left: 50%; top: 50%; margin: -23px 0 0 -65px;}
.audioplayer-playpause a {width: 46px; height: 46px; line-height: 46px; text-align: center;
border-radius: 50%; display: block; font-size: 14px; position: relative;}
.ap-prev, .ap-next {font-size: 14px; cursor: pointer;}
.ap-prev:hover, .ap-next:hover {color: #fff;}
.audioplayer-stopped .audioplayer-playpause a {padding-left: 3px;}

.first-reveal .ap-prev, .first-reveal .ap-next {pointer-events: none; opacity: 0.5;}
.first-reveal .audioplayer-playpause .fa:before {content: '\f04b'; padding-left: 3px;}
.ap-play-pseudo {position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 10; cursor: pointer;}


/* FULL
----------------------------------------------- */
.fleft {width: 190px; height: 190px;}
.fheader {padding: 0;/* background-color: #111414; */padding-bottom: 30px;padding-top: 30px;}
.fheader h1 span {color: #160e3f; font-size: 20px; font-weight: 400; display: block;}
.fcat {margin-top: 3px; font-size: 13px;}
.fcat span {margin-right: 5px;}
.fdl {margin-left: 20px; width: 180px; color: #fff !important;}
.fctrl {display: flex;flex-direction: column;align-self: flex-start;margin-right: 20px;}
.listen-text {font-size: 13px; line-height: 19px; margin-top: 14px;}

.fplay, .fplay .fa {
	/* width: 46px; */
	height: 46px;
	line-height: 46px;
	position: static;
	opacity: 1;
	margin: 0;
	text-align: center;
	font-size: 16px;
	display: inline-block;
	vertical-align: middle;
	}
.fviews {display: inline-block; vertical-align: middle; opacity: 0.8; font-size: 15px;}
.fslush {display: inline-block; vertical-align: middle; opacity: 0.8; font-size: 15px; margin-left: 12px;}
.flike {display: inline-block; vertical-align: middle; height: 30px; line-height: 30px; font-size: 15px;}
.flike a .fa {width: 30px; height: 30px; border-radius: 50%; line-height: 32px;
	text-align: center; background-color: #1e204e;}
.flike > span {opacity: 0.8; margin-left: 8px;}
.fplay, .fctrl-left {
    background: #160e3f;
    cursor: pointer;
    flex-grow: 1;
    flex-basis: calc(50% - 10px);
    text-align: center;
    font-weight: 600;
}
.fplay:hover .fa {background-color: #160e3f;}

.fshare {height: 24px; line-height: 24px; text-align: center; white-space: nowrap;}
.fshare-title {font-size: 14px; opacity: 0.8; margin-right: 6px;}
.fshare .fa {background-color: #ad276e; color: #fff; cursor: pointer; margin-left: 5px;
	width: 24px; height: 24px; line-height: 24px; font-size: 14px; border-radius: 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:336px;}
.mejs-container {max-width:100% !important;}
.full-text {line-height: 1.5; font-size: 16px;}
.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:#160e3f;}
.full-text a:hover {text-decoration:none;}
.full-text h2, .full-text h3, .full-text h4, .full-text h5 {margin:10px 0; font-size:18px; font-weight:400;}
.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;}



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


.mob-full-track, .mob-full-artist {
	display: none;
}

@media screen and (max-width: 1220px) {
	
	
	.mob-full-track {
		display: block;
		text-align: center;
		color: #e3ff5e;
		margin-top: 20px;
		font-size: 30px;
		font-family: 'Bebas Neue';
		font-weight: bold;
		line-height: 34px;
	}
	.mob-full-artist {
		display: block;
		text-align: center;
		color: #666;
		font-family: 'Bebas Neue';
		font-weight: bold;
		font-size: 30px;
		line-height: 34px;
		margin-bottom: 30px;
	}	
	
.wrap {padding-top: 0px;}
.wrap-center {max-width:1000px;}
.btn-menu {display: block;font-size: 24px;line-height: 0;color: #FDFDFD;cursor: pointer;order: 1;padding: 10px;background: #1c1c1c;border-radius: 6px;}
.search-wrap {min-width: 100%;width: 100%;padding: 0;-ms-flex-order: 10;-webkit-order: 10;order: 10;display: none;}
.search-wrap input {text-align: center;width: 100%;}
.search-wrap.active {
	display: block;
	padding-left: 0;
}
.hmenu {display: none;width: 100%;padding: 30px;order: 11;background: black;margin-top: 5px;margin-bottom: 0;}
.hmenu li a {margin: 0 0 10px 0;text-align: center;}
.col-left {width: 100%;margin: 0px 0 0 0;}
.side-box-content {min-height: 0;}
}

@media screen and (max-width: 950px) {
.track-fav, .track-time {
	display: none;
    width: 100%;
    margin-left: 0px;
}
aside {display: none;}
.wrap-center {max-width:768px;}

}

@media screen and (max-width: 760px) {
.wrap-center {max-width:640px;}
.sect-title {font-size: 28px;}
.sect-title h1 {font-size: 18px; font-weight: 700; color: #2222222;}
.sect-col {width: 100%; border-radius: 0;}
.sect-col-3 {width: 100%; border-radius: 0;}
.sect-cols {border-radius: 6px; overflow: hidden;}
.album-item {width: 47.8%;}
.ap-time {display: none;}
.ap-btns {width: 100px; height: 36px; margin-left: -50px; margin-top: -18px;}
.audioplayer-playpause a {width: 36px; height: 36px; line-height: 36px;}
.ap-desc {width: calc((100% - 100px)/2);}
.audioplayer-volume {left: auto; right: 15px; margin-right: 0;}
.ap-title {font-size: 14px;}
.ap-title span {display: none;}

.fleft {display: none;}
.fheader {/*padding-right: 76px;*/ position: relative; border-radius: 6px 6px 0 0;}
.fright {display: block;}
.fctrl {/* height: 70px; */position: relative;margin: 0 -15px;align-self: stretch;flex-direction: row;justify-content: space-between;padding: 0 15px 40px;background: #000 url(../images/fon2.png) bottom left repeat-x;}
.fdl {position: absolute; left: 20px; right: 20px; /*bottom: -55px;*/ margin: 0; z-index: 1;}
.fviews, .flike {display: none;}
.fslush { display: inline-block; }
.fshare {position: absolute; left: 0; bottom: -39px; width: 100%;}
/*.fplay {position: absolute; right: 20px; top: -70px; left: auto;}*/
.fmain {/* margin-bottom: 60px; */overflow: visible;}

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

.track-item a.track-desc {
    border-right: none!important;
    padding: 5px 5px 5px 10px!important;
    margin: 0!important;
    flex-direction: column;
    height: 100%!important;
}

}

@media screen and (max-width: 590px) {
.wrap-center {max-width:480px;}

.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;}
.sect-caption, .sect-link {font-size: 15px;}
.content {padding-top: 40px;}
.track-title, .album-title {font-size: 16px;line-height: 18px;}
.album-in {padding-top: 80%;}
.sect-caption {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sect + .sect, .col-left {/* margin-top: 40px; */}

.video-box embed, .video-box object, .video-box video, .video-box iframe, .video-box frame {height:188px;}
}

.fdl2 {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    font-size: 16px;
    color: #e3ff5e!important;
    justify-content: center;
    background: none;
    border: 1px solid #e3ff5e;
    border-radius: 5px;
    width: 180px;
    max-width: 100%;
    height: auto;
    line-height: normal;
    background: none!important;	
}
@media screen and (max-width: 470px) {
	.fdl2{
		/* margin-left: 0px; */
		/* width: auto; */
		padding: 10px;
		line-height: 1;
	}
}


.fpage .sect{
	/* padding: 30px; */
}

.col-right .sect-title {
	text-align: left;
	color: white;
	font-size: 35px;
	padding: 0;
	background: none;
	font-weight: 600;
	display: block;
}

.col-left {
}

.img-fit{
	position: relative;
}

.track-item .track-play:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 3;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	left: 10px;
	top: 10px;
	background-color: #cce554;
	box-shadow: inset 0 1px 0px 1px rgb(0 0 0 / 16%);
}

.track-item-download {
	
display: flex!important;
	
width: 30px;
	
height: 30px;
	
background: #e3ff5e;
	
border-radius: 50%;
	
justify-content: center;
	
align-items: center;
	
margin-right: 10px;
	
flex-shrink: 0;
	
border: 1px solid #abb973;
}

.track-item a.track-desc {
	margin: 0 12px;
	display: flex;
	height: 32px;
	line-height: 32px;
}

.col-right .track-item a.track-desc .track-title:before {
	content: ' - '; 
}

.btn-dark {
	color: #6d6275;
	padding: 15px 75px;
	background: #2e1e39!important;
	text-decoration: none!important;
	font-weight: 600;
	font-size: 16px;
	display: block;
	/* max-width: 100%; */
	margin: 20px auto 0;
	text-align: center;
	border-radius: 5px;
}


.btn-dark:hover,.btn-dark:focus,.btn-dark:active {
	color:white;
}

.col-left .sect {
}

#cat_menu {
	margin-bottom: -5px;
}

.cat_menu ul{
    display: flex;
    justify-content: flex-start;
}

.cat_menu a {
	font-size: 16px;
	display: block;
	margin-bottom: 14px;
	margin-right:5px;
	line-height: 22px;
	vertical-align: middle;
	background: #1a1a1a!important;
	padding: 5px 10px;
	border-radius: 7px;
}

.cat_menu a:before {
	content: '';
	display: inline-block;
	width: 22px;
	height: 22px;
	background: url(../images/category.svg) center center no-repeat;
	margin-right: 8px;
	vertical-align: middle;
}

#cat_menu .sect-title:first-of-type {
	padding-top: 0;
	background: none;
}

div.col-right {
	background: none;
}

.col-right .track-img {
	width: 12px;
	height: 16px;
	background: none;
	margin: 0;
	margin-right: 6px;
}



.col-right .track-img .img-fit:after {
	display: none;
}

.col-right .track-title {
	color: #6b6761!important;
	font-size:14px;
}

.col-right .singer {
	color: white!important;
	font-size:14px;
	font-weight: normal;
}

.col-right .track-item a.track-desc{
	margin: 0;
	border-right: none;
}


.col-right .track-item {background-color: #160e3f;height: auto;padding: 0 8px;margin-bottom: 5px;align-items: center;border-radius: 5px;}

.col-right .btn-dark {
	padding: 15px;
}

	/* Постраничная навигация */
	.page_next-prev {height: 30px;float: none;background: none;box-shadow: none;-webkit-box-shadow: none;}
		.page_prev { float: left; }
		.page_next { float: right; }
		.page_prev, .page_next {
			position: relative;
			z-index: 1;
			border-radius: 18px;
			background-color: #fff;
			box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
			-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
			text-align: center;
			width: 40px;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 5px;
		}
		.pages {text-align: center;display: flex;}
		.navigation .pages > * {
			display: flex;
			border-radius: 0;
			background: #111414;
			color: #9a9081;
			box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
			-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);
			height: 40px;
			width: 40px;
			justify-content: center;
			align-items: center;
			margin: 0 5px;
		}
		.navigation .pages > span {background: #e3ff5e;}
		.navigation .pages > span,
		.navigation .pages > *:first-child,
		.navigation .pages > *:last-child {display: flex;justify-content: center;align-items: center;}
		.navigation .pages > span.nav_ext { display: none; }
		
		
.navigation svg {
	height: 20px;
	width: 20px;
}		

.page_prev span,.page_next span,.page_prev a,.page_next a{
	line-height:0px!important;
} 

.col-left .sect-notlist {
	margin-top: 0;
}

.col-left .sect-notlist .sect-title{
	background: none;
	text-align: left;
	padding: 0;
	font-size: 26px;
}


.fctrl-left {
	
display: flex;
	
align-self: stretch;
	
align-items: center;
	
padding: 15px 20px;
	
font-size: 16px;
	
color: #e3ff5e;
	
justify-content: center;
	
background: none;
	
border: 1px solid #e3ff5e;
	
border-radius: 5px;
	
width: 180px;
	
max-width: 100%;
	
margin-bottom: 15px;
}

.fctrl-left > span{
	
flex-grow: 1;
}

.fctrl-left .img-fit{
	
flex-basis: 23px;
	
z-index: 1;
	
height: 36px;
	
display: flex;
	
align-items: center;
	
justify-content: center;
}

.fctrl-left .img-fit:after{
	
left: 1px;
	
top: 0;
}

.fctrl-left .img-fit img {
	
}

.fdl2 .img-fit {
	
height: 30px;
	
width: 30px;
	
display: flex;
	
justify-content: center;
	
align-items: center;
	
background-color: #bc9a5e;
}

.fdl2 .img-fit:after {
	
border: none;
	
display: none;
}

.fdl2 .img-fit img {
	
height: 26px;
}

.fdl2 >span {
	
flex-grow: 1;
}

.sect-related {
	background: none!important;
	margin-top: 20px!important;
	padding: 0!important;
}

.sect-related .sect-header {
	text-align: left;
}

.sect-notlist .sect:not(.sect-related):not(.sect-main) .sect-header {
	background: url(../images/decor_sidebar.svg) top left no-repeat, url(../images/decor_sidebar.svg) top right no-repeat;
	margin-top: 20px;
	height: 41px;
	line-height: 41px;
}

.track-item-info {
    flex-grow: 1;
    flex-shrink: 1;
    display: flex;
    flex-wrap: wrap;
    /* max-width: calc(100vw - 136px); */
    background: #24124f;
    mask-image: url(/templates/mp3yadnet/images/item-mask-3.png);
    mask-repeat: no-repeat;
    -webkit-mask-image: url(/templates/mp3yadnet/images/item-mask-3.png);
    -webkit-mask-repeat: no-repeat;
    align-items: center;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    padding-left: 10px;
}

.show-mob {
	display: none!important;
}

.hmenu #cat_menu .sect-title {
	font-size: 25px;
	text-align: left;
	color: #666;
}

.hmenu #cat_menu .sect-title:first-letter {
	color: #666;
}

.show-mob-search {
	order: 3!important;
	height: 40px!important;
	line-height: 0!important;
	width: 40px!important;
	padding: 10px!important;
	margin-right: 0;
	background-color: #1c1c1c!important;
	border-radius: 6px!important;
}

.footer-wrap {
    padding-top: 47px;
    background: url(../images/fon-footer.png) left top repeat-x;
}

@media screen and (max-width: 1220px) {
	
	.finfo {
		padding: 20px 30px 0;
		max-width: 350px;
		margin: 0 auto;		
	}
	
	.full-info {
		margin-top: 0!important;
		flex-direction: column;
	}
	
	.track-img-full {
		display: block;
		width: calc(100% + 30px);
		margin-left: -15px;
		margin-right: -15px;
		margin-top: -30px;
		background: black;
		border-radius: 0;
		height: 294px;
	}
	
	.track-img-full + .fheader-left .sect-title {
		display: none;
	}
	
	.cat_menu ul {
		flex-direction: column;
	}
	
	.track-item {
		margin-bottom: 10px;
	}
	
	.hmenu li a {
		margin: 0 0 10px 0;
	}
	
	
	header.header {
		/* flex-wrap: nowrap; */
		padding: 10px 0 0;
	}	
	
	header.header + .cat_menu {
		display: none;
	}
	
	.logo {
		order: 2;
	}
	
	.show-mob {
		display: block!important;
	}
	
	.col-left .sect {
		margin-top: 0;
	}
	
	.col-right:empty {
		display: none;
	}
	
	.col-right {
		width: 100%;
	}
	
	.content {
		padding: 0px 0 40px 0;
	}	
	

	
	.fctrl-left, .fdl2 {
		padding: 15px;
		width: 100%;
		max-width: calc(50% - 10px);
		margin-bottom: 0;
	}
	
	.sect-notlist .sect-category-title {
		display: none;
	}	
	
	.sect.sect-main {
		background: none;
		padding-bottom: 0;
	}
	
	.sect-notlist .sect:not(.sect-related):not(.sect-main) .sect-header {
		margin-top: 0;
		padding-bottom: 20px;
		margin-bottom: 0;
		background: url(../images/decor_sidebar.svg) center bottom no-repeat;
		height: auto;
	}
	
	
	.sect-header {
		padding-top: 20px;
		margin-bottom: 10px;
		background: none;
		text-align: left;
	}	
	
	.sect-related .sect-header {
		text-align: center;
		margin-top: 30px!important;
	}
	
	.hmenu li a {
		text-align: left;
	}
}

@media screen and (max-width: 480px) {
	.fdl2 >span, .fctrl-left > span{
		line-height: 1;
	}
	
	.fctrl-left > span {
		display: inline-block;
		max-width: 95px;
	}
}	

.track-item .grad {
	color: black;
	position: relative;
	z-index: 4;
}

.fheader-left {
	    align-self: flex-start;
}

.full-info {
	display: flex;
    margin-top: 30px;
}

.mgf, .mgf1, .mgf2, .mgf3, .mgf4, .mgf5 {
	font-weight: normal;
    font-size: 10px;
    text-align: right;
    color: #777;
    height: 14px;
    line-height: 14px;
    position: absolute;
    display: block;
    width: calc(100% - 10px);
    top: -1px;
    right: 10px;
}


.wplayer>.mgf,.wplayer>.mgf1,.wplayer>.mgf2,.wplayer>.mgf3,.wplayer>.mgf4,.wplayer>.mgf5,.item-player>.mgf,.item-player>.mgf1,.item-player>.mgf2,.item-player>.mgf3,.item-player>.mgf4,.item-player>.mgf5 {
	position: static;
    margin-bottom: 2px;
    margin: 5px 15px -15px 0;
    color: #777;
    width: auto;
}

.track-item>.mgf,.track-item>.mgf1,.track-item>.mgf2,.track-item>.mgf3,.track-item>.mgf4,.track-item>.mgf5{
    width: calc(100% - 10px);
    bottom: 1px;
    right: 10px;
    color: #777;
    top: auto;
}


.fmeta .fplay, .fmain .fplay, .fmeta .fdl, .fmain .fdl, .track-item, .track, .fctrl-left, .fdl2{
	position: relative;
}