/* BASIC LAYOUT
----------------------------------------------- */
.wrapper {min-width: 320px; position: relative;}
.wrapper-container {max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 20;}
.wrapper-main {padding: 0; box-shadow: 0 0 80px rgba(0,0,0,0.3); background-color: var(--bg);}
.header {height: 90px; padding: 25px var(--indent) 25px 390px; position: relative; z-index: 10;}
.content {margin: 0;}
.cols {display: grid; gap: 0px; grid-template-columns: 340px minmax(0,1fr); 
	grid-template-areas: "sidebar main";}
.cols__main {grid-area: main; padding: 50px var(--indent);}
.cols__side {grid-area: sidebar; padding: 120px 50px 50px 50px; background: var(--bg-darker-2); margin-top: -90px;}
.footer {background-color: var(--bg-darkest); padding: 25px var(--indent); border-top: 3px solid var(--accent);}
.footer__one {gap: 25px; padding-bottom: 80px !important;}
.footer__two {width: 290px; margin-right: var(--indent);}

.scrolltop, .mobbtn {position: fixed; width: 40px; height: 40px; right: -60px; bottom: 90px;
	z-index: 990; border-radius: 20px; font-size: 20px; opacity: 0; transition: right 0.2s, opacity 0.2s;}
.mobbtn {bottom: auto; top: 0;}
.scrolltop.is-active, .mobbtn.is-active {right: 0px; opacity: 1;}


/* HEADER
----------------------------------------------- */
.logo {display: block; height: 40px; line-height: 40px; font-weight: 800; color: var(--accent) !important;
	font-size: 24px; padding-left: 40px; 
	background: url(../images/logo.svg) 0 4px / 30px no-repeat;} 
.logo span {margin-left: 0;}
.header__logo {position: absolute; top: 25px; left: 50px;}
.header__btn-fav {margin: 0 50px; color: #fff;}
.header__btn-login-name {color: #fff;}
.header__btn-login::before {display: none;}
.header__btn-login.img-fixed-size {width: 40px; height: 40px; border-radius: 50%;}

.search-block {position: relative; margin-right: 50px;}
.search-block__input, .search-block__input:focus {border-radius: 10px; padding: 0 20px 0 60px; box-shadow: none; 
	background-color: rgba(255,255,255,0.2); color: #fff; border: 0;}
.search-block__input:not(:focus)::placeholder {color: #fff; opacity: 1; font-size: 13px; font-weight: 700;}
.search-block__btn {position: absolute; left: 0; top: 0; width: 50px; border-radius: 10px; 
	font-size: 16px; background-color: transparent; color: #fff;}
.theme-toggle {display: inline-flex; justify-content: space-between; align-items: center; cursor: pointer;
	background-color: rgba(255,255,255,0.2); border: 1px solid var(--accent); gap: 5px; border-radius: 10px;}
.theme-toggle li {cursor: pointer; width: 30px; height: 30px; line-height: 30px; 
	text-align: center; color: #fff; border-radius: 10px;} 
.theme-toggle:hover li {color: var(--accent);}
.lt-is-active .theme-toggle li:last-child, body:not(.lt-is-active) .theme-toggle li:first-child 
{background-color: var(--accent); color: #fff;}
	


/* SECTION
----------------------------------------------- */
.sect:not(:last-child) {margin-bottom: 50px;}
.sect__header {margin-bottom: 30px;}
.sect__title {font-size: 34px; line-height: 1.1; font-weight: 800;}
.sect__link {color: var(--tt-fade-2);}
.sect__subtitle {font-weight: 700; font-size: 15px !important; text-transform: uppercase;}

.menu-genres {gap: 10px; font-size: 14px;}
.menu-genres a {border: 1px solid var(--bdc); color: var(--tt-fade-2);
	padding: 0 20px; border-radius: 10px; display: flex; align-items: center; height: 36px;}
.menu-genres a::before {content: '#'; display: inline; margin-right: 2px;}
.speedbar {color: var(--tt-fade); font-size: 14px; margin-top: 24px; margin-bottom: -20px;}
.descr {display: grid; gap: 10px; line-height: 1.5; color: var(--tt-fade); font-size: 14px;}
.descr h1, .descr h2, .descr h3 {font-size: 18px; font-weight: 400; color: var(--tt); line-height: 1.3;}
.descr a, .footer__text a, .footer__text span {text-decoration: underline; color: var(--accent);}

.apps-offer {padding: 25px var(--indent); background-color: var(--bg-darkest);
	font-size: 14px; gap: 20px 10px; color: var(--tt-fade); font-size: 14px;}
.apps-offer__title {font-size: 18px; font-weight: 400; margin-bottom: 5px; color: var(--tt);}
.apps-offer__link {display: block;}
.apps-offer__link img {width: 150px; display: block;}
.apps-offer::before {color: var(--accent); font-size: 40px; margin-right: 10px;}


/* HERO, SLIDER, COLLECTION
----------------------------------------------- */
.top-slider {margin: -40px var(--indent-negative) 35px var(--indent-negative);}
.sl {height: 500px; color: #fff; padding: 110px var(--indent) 0px var(--indent);}
.sl::before {background: rgba(15,21,37,0.66); height: 100%; opacity: 1;}
.sl__title {font-weight: 800; font-size: 64px; line-height: 1.066; 
	margin-bottom: 30px; position: relative; z-index: 5; max-width: 600px;}
.sl__text {font-size: 16px; line-height: 1.5; position: relative; z-index: 5; -webkit-line-clamp: 3; max-width: 430px;}
.sl__btns {gap: 15px; margin-top: 35px; position: relative; z-index: 5;}
.sl__btn {border-radius: 25px; height: 50px; background-color: #fff; color: var(--accent); 
	font-size: 15px; font-weight: 700; text-transform: uppercase; padding: 0 50px;}
.sl__fav a, .sl__share, .sl__fav.btn {height: 50px; width: 50px; border-radius: 50%; display: grid; place-items: center; 
	font-size: 22px; border: 1px solid #fff; color: #fff; background-color: transparent !important;}
.sl__fav--added {color: var(--accent);}
.share-box {position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow: hidden;
	background-color: var(--ui-bg); border-radius: 4px; width: 400px; max-width: 96vw; 
	text-align: center; padding: 40px 0; box-shadow: 0 0 0 10px rgba(255,255,255,0.2), 0 15px 45px rgba(0,0,0,1);}

.collection {display: block; position: relative; border-radius: 10px; overflow: hidden;}
.collection__desc {position: absolute; left: 0; bottom: 0; right: 0; padding: 5px 20px 20px 25px; 
	z-index: 10; color: #fff; border-left: 5px solid var(--accent);}
.collection__title {font-size: 18px; font-weight: 700;}
.collection__counter {opacity: 0.6; margin-top: 10px; font-size: 14px;}


/* ALBUM, ARTIST
----------------------------------------------- */
.grid-albums {display: grid; gap: 30px 20px; grid-template-columns: repeat(auto-fill,minmax(160px,1fr));}
.grid-artists {display: grid; gap: 30px 10px; grid-template-columns: repeat(auto-fill,minmax(130px,1fr));}
.album {display: block; text-align: center; position: relative;}
.album__img {padding-top: 100%; margin-bottom: 18px; border-radius: 50%;}
.album__img-is-blurred {filter: blur(20px); transform: scale(0.9,0.9) translateY(20px); z-index: -1;}
.album__title {font-weight: 700; font-size: 13px; text-transform: uppercase;}
.album__subtitle {font-size: 12px; font-weight: 400; margin-top: 3px;}
.artist {background-color: var(--bg-darker-2); padding: 10px; padding-bottom: 20px; border-radius: 10px;}
.artist .album__img {border-radius: 10px; margin-bottom: 15px;}
.album:not(.artist) .album__img::before {content: ''; width: 20px; height: 20px; background: rgba(255,255,255,0.8); 
	position: absolute; left: 50%; top: 50%; margin-top: -10px; margin-left: -10px; z-index: 5; border-radius: 50%;}


/* SHORT STORY, TRACK
----------------------------------------------- */
.grid-tracks {display: grid; gap: 10px 25px; grid-template-columns: repeat(auto-fill,minmax(400px,1fr));}
.trc {padding: 10px; padding-right: 20px; background-color: var(--bg-darker); position: relative; border-radius: 10px;}
.trc__img {width: 46px; height: 46px; border-radius: 3px; position: absolute; left: 0; top: 50%; margin-top: -23px;}
.trc__play {width: 46px; height: 46px; color: var(--tt-fade); font-size: 16px; 
	background: transparent !important; margin-right: 15px;}
.trc__desc {display: block; position: relative; padding-left: 61px;}
.trc__title {font-weight: 700; font-size: 15px;}
.trc__subtitle {font-size: 13px; color: var(--tt-fade); margin-top: 3px;}
.trc__time {font-size: 13px; color: var(--tt-fade); margin-left: 30px;}
.trc__fav {margin-left: 26px;}
.trc__fav, .trc__fav a {cursor: pointer; color: var(--tt-fade); font-size: 20px;}

.js-item-played .trc__play, .trc__fav-added {color: var(--accent);}
.js-item-played.trc {box-shadow: 0 0 0 1px var(--accent);}
.js-item-played .fa-play:before {content: '\f04c';}


/* SIDEBAR
----------------------------------------------- */
.sb {display: grid; gap: 40px; margin-bottom: 50px;}
.sb:last-child {margin-bottom: 0;}
.cols__side .sb--sticky {position: sticky; left: 0; top: 20px;}
.sb__title {margin-bottom: -13px !important;}
.side-menu__caption, .sb__title {font-weight: 700; font-size: 15px; text-transform: uppercase; margin-bottom: 13px;}
.side-menu__list a {height: 42px; line-height: 42px; display: block; padding-left: 45px; 
	white-space: nowrap; color: var(--tt-fade-2);}
.side-menu__list li {position: relative; margin-left: 20px;}
.side-menu__list li::before {color: var(--tt-fade-2); opacity: 0.6; pointer-events: none; font-size: 22px;
	position: absolute; left: 0; top: 0; height: 42px; width: 22px; display: grid; place-items: center;}
.side-menu__list .is-active a, .side-menu__list .is-active::before {color: var(--accent);}
.side-menu__list .is-active::after {content: ''; position: absolute; top: 0; left: -70px; 
	width: 5px; height: 100%; background-color: var(--accent);}
.sb__content.menu-genres a {padding: 0 6px; font-size: 13px;}
.popular::before {color: var(--tt-fade); font-size: 18px;}
.popular__img {height: 56px; width: 56px; border-radius: 10px; margin-right: 5px; opacity: 0.6;}
.popular__title {font-size: 14px;}
.popular__subtitle {font-size: 13px; color: var(--tt-fade);}
.popular__time {font-size: 11px; margin-top: 3px;}


/* FOOTER, PAGINATION
----------------------------------------------- */
.footer__text {color: var(--tt-fade); font-size: 14px; width: 100%;}
.footer__copyright {color: var(--tt-fade);}
.footer__menu {display: grid; gap: 10px 20px; grid-template-columns: repeat(auto-fill,minmax(320px,1fr));}
.footer__menu a {font-weight: 700; font-size: 13px; text-transform: uppercase; color: var(--tt-fade-2);}
.footer__tlg {background-color: #2392c2; padding: 0 15px; height: 36px; font-size: 14px; margin-top: 25px;}

.pagination {gap: 30px 60px; padding-top: 30px;}
.pagination a, .pagination span, .pagination__btn {display: grid; place-items: center; height: 36px;}
.pagination__btn-loader {width: 100%; display: none;}
.pagination__btn-loader a, .pagination__btn-loader span {height: 40px; border-radius: 4px; 
	background-color: var(--bg-darker); color: var(--tt-fade); width: 100%;}
.pagination__pages {gap: 10px 20px; font-size: 18px;}
.pagination__pages span:not(.nav_ext) {background-color: var(--accent); color: #fff; padding: 0 10px;}
.pagination__btn {width: 36px; background-color: var(--bg-darker-2); color: var(--tt-fade-2);}


/* INNER PAGE
----------------------------------------------- */
.page__grid {margin: -140px var(--indent-negative) 0 var(--indent-negative); 
	padding: 110px var(--indent) 25px var(--indent); position: relative;}
.page__grid > * {position: relative; z-index: 5;}
.page__grid > .page__poster-bg {position: absolute; left: 0; right: 0; width: 100%; height: 100%; z-index: 3;}
.page__poster-bg::before {background: rgba(15,21,37,0.66); height: 100%; opacity: 1; backdrop-filter: blur(6px);}
.page__poster-bg::after {opacity: 1; z-index: 1; height: 50%; 
	background: linear-gradient(to top, #171e31 0%, transparent 100%);;}
.pgrid > *:not(.pgrid__section,.page__poster-bg) {grid-column: 1 / -1;}
.page__grid {display: grid; gap: 15px 25px; grid-template-columns: 180px minmax(0,1fr) min-content; 
	grid-template-areas: "pposter pheader prating" "pposter pctrl pctrl";}
.page__header {grid-area: pheader;}
.page__ctrl {grid-area: pctrl; align-self: end; gap: 10px 15px;}
.page__poster {grid-area: pposter; align-self: start;}
.page__rating {grid-area: prating; align-self: start;}
.page__songtext {width: 380px; margin-left: 25px;}

/* 1 + ( (z transform * -1) / perspective )
.page__grid1 {perspective: 300px; height: 100vh;}
.page__poster-bg1 {transform-style: preserve-3d; position: relative; height: 100vh;}
.page__poster-bg1 img {transform: translateZ(-300px) scale(2); display: block; position: absolute; inset: 0;}
*/
.page__title {font-size: 34px; font-weight: 800;}
.page__title--track {font-size: 34px;}
.page__title a {font-size: 16px; margin-left: 5px;}
.page__title > span {font-size: 18px; font-weight: 400; display: block; margin-top: 6px;}
.page__category {color: var(--tt-fade-2); font-size: 15px; font-weight: 700; text-transform: uppercase; margin-bottom: 5px;}

.page__img {width: 180px; height: 180px; margin: 0 auto; box-shadow: 0 20px 40px rgba(0,0,0,0.66);}
.page__rating {gap: 0 10px; text-align: center; flex-wrap: nowrap;}
.page__rating a {display: block; width: 40px; font-size: 16px;} 
.page__rating a .fal {background-color: var(--ui-green); color: #fff; 
	width: 40px; height: 40px; border-radius: 50%; font-size: 18px; margin-bottom: 4px;}
.page__rating a + a .fal {background-color: var(--ui-red);}
.page__rating i {font-style: normal; font-size: 13px;}

.page__play {border-radius: 25px; height: 50px; background-color: #fff; color: var(--accent); 
	font-size: 15px; font-weight: 700; text-transform: uppercase; padding: 0 50px;}
.page__fav a, .page__dl, .page__share {display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 50px; border-radius: 25px; border: 1px solid rgba(255,255,255,0.6); background-color: transparent;
	width: 50px; padding: 0; font-size: 24px;}
.page__other-songs {color: var(--tt-fade-2); font-size: 13px; display: block !important; position: relative; padding-left: 40px;}
.page__other-songs a {color: var(--accent); display: block; font-size: 15px;}
.page__other-songs::before {position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 24px;}

.page__tech {gap: 10px 20px; font-size: 14px; color: var(--tt-fade-2); margin-top: 15px; padding-left: 60px;}
.page__tech li > span:first-child {color: var(--tt-fade);}
.page__caption {color: var(--tt-fade); line-height: 1.6; display: block; position: relative; padding-left: 60px;}
.page__caption::before {position: absolute; left: 0; top: 50%; transform: translateY(-50%); 
	font-size: 44px; color: var(--accent);}

.page__clip {position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding-top: 0; background-color: #000;}
.page__clip::before {position: relative; z-index: 5; font-size: 94px; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3);}

.page__clip-text .sect__subtitle {padding-top: 10px;}
.page__text {color: var(--tt-fade-2); max-height: 300px; overflow-y: auto; overflow-x: hidden;;}
.scroller__content {scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-darker);}
.scroller__content::-webkit-scrollbar {width: 12px; height: 8px;}
.scroller__content::-webkit-scrollbar-thumb {border-radius: 0; background-color:var(--accent); border: 0;}
.scroller__content::-webkit-scrollbar-track {background-color:var(--bg-darker);}

.page--album .page__grid {grid-template-columns: 180px minmax(0,1fr); 
	grid-template-areas: "pposter pheader" "pposter pctrl"}
.page__rating--line {align-self: unset;}
.page__rating--line a {display: flex; flex-wrap: wrap; align-items: center; width: auto;}
.page__rating--line a .fal {margin: 0; margin-right: 10px;}
@media screen and (min-width: 950px) {
	.page--collection .page__grid {grid-template-columns: 300px minmax(0,1fr);}
	.page--collection .page__img {width: 300px;}
}


/* TEXT BLOCK, TYPOGRAPHY, VIDEO BLOCK
----------------------------------------------- */
.full-text {line-height: 1.6; font-size: 16px; word-wrap: break-word;}
.full-text a {text-decoration: underline; color: #5278b1;}
.full-text img:not(.emoji), .full-text p, .full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5, 
.full-text > ul, .full-text > ol, .full-text table {margin-bottom: 25px;}
.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 > ul li, .full-text > ol li {padding-left: 60px; position: relative;}
.full-text > ul li:before {content: ''; width: 8px; height: 8px; border-radius: 50%; 
	border: 3px solid #fcc506; position: absolute; top: 6px; left: 34px;}
.full-text > ol {counter-reset: num;}
.full-text > ol li:before {content: counter(num); counter-increment: num; background-color: #fcc506; color: #000; 
	position: absolute; top: -3px; left: 17px; width: 24px; height: 30px; font-size: 14px; font-weight: 700;
	display: flex; justify-content: flex-end; align-items: center; padding-right: 6px; box-sizing: border-box;}
.full-text > ol li:after {content: ''; border: 10px solid transparent; border-left-color: #fcc506; 
	position: absolute; left: 41px; top: -3px; transform: scale(0.66,1.5); transform-origin: 0 0;}
.full-text > ul li + li, .full-text > ol li + li {margin-top: 10px;}
.full-text table, .video-inside > * {width:100%;}
.full-text table tr td {padding:10px; border:2px solid #fff;}
.full-text table tr:nth-child(2n+1) {background-color:#f2f6f9;} 
.full-text table tr:nth-child(1) {background-color:#cee0ed;}
.full-text table img:not(.emoji) {margin:0; max-width:350px}
.full-text > *:last-child {margin-bottom: 0;}
.video-responsive {padding-top: 60%; position: relative;}
.video-responsive > iframe, .video-responsive > video {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 21px; margin-bottom: 20px;}
.full-text iframe {width: 100%; height: 400px; margin-bottom: 20px;}
.fdl-btn {display: block; position: relative; box-shadow: 0 3px 10px rgba(0,0,0,0.1); 
	text-decoration: none !important; padding: 15px 15px 15px 130px;
	background: linear-gradient(to top, #27ae60, #2ecc71); color: #fff !important; overflow: hidden;}
.fdl-btn-title {font-weight: 700; text-transform: uppercase; word-wrap: break-word;}
.fdl-btn-size {font-size: 14px; margin-top: -2px; margin-bottom: 6px; opacity: 0.9;}
.fdl-btn-caption {opacity: 0.7; font-size: 14px;}
.fdl-btn-dl {font-size: 12px; text-transform: uppercase; margin-left: 15px;}
.fdl-btn > * {position: relative; z-index: 3;}
.fdl-btn-icon {width: 50px; height: 50px; border-radius: 50%; margin-top: -25px; font-size: 24px;
	position: absolute; left: 40px; top: 50%; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 0 0 15px rgba(0,0,0,0.13), 0 0 0 30px rgba(0,0,0,0.08), 0 0 0 45px rgba(0,0,0,0.04);}


/* COMMENTS
----------------------------------------------- */
.page__comments {margin-top: 0px;}
.page__comments-title {font-size: 24px;}
.page__comments-info {color: var(--tt-fade); display: block; margin: 5px 0 20px;}
.page__comments-info::before {color: var(--ui-red); margin-right: 10px;}
.ac-form {margin-bottom: 20px;}
.ac-form__header, .ac-form__editor, .ac-form .message-info {gap: 10px; margin-bottom: 10px;}
.ac-form__btn {padding: 0 60px;}
.ac-form__bottom {gap: 25px;}
.confidential-check {font-size: 14px;}
.ac-form__header > span {margin-left: 15px;}
.ac-form .comments_subscribe {margin-top: 0px;}

.ac-toggle.ac-form {padding-left: 60px; position: relative; cursor: pointer;}
.ac-toggle .ac-form__header input, .ac-toggle .ac-form__editor textarea {height: 50px; line-height: 50px; border-radius: 10px; 
	background-color: var(--bg-darker-2);}
.ac-toggle .ac-form__editor textarea {height: 140px !important; resize: none;}
.ac-toggle, .ac-toggle .ac-form__editor {position: relative;}
.ac-toggle .ac-form__bottom button {position: absolute; bottom: 20px; right: 20px; z-index: 10; pointer-events: none;}
.ac-toggle .bb-btn {display: none;}
.ac-toggle .bb-pane {background: none; box-shadow: none; border: 0; position: absolute; left: 0; bottom: 0; right: 0;}
.ac-toggle #b_emo, .ac-toggle #b_leech, .ac-toggle #b_quote {display: grid; color: var(--tt-fade-2); pointer-events: none;}
.ac-toggle::before {position: absolute; left: 0; top: 3px; font-size: 44px; color: var(--accent);}

.ac-form__editor .bb-editor textarea, .ac-form__editor .fr-wrapper {height: 100px !important;}
.ac-form__editor .fr-view {min-height: 80px !important;}
.ac-form .tox-tinymce {height: 160px !important;}
.comments_subscribe + br, .ac-form .bb-editor + br {display: none;}

.mass_comments_action {display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
.mass_comments_action select {flex: 1 1 0; margin: 0 -28px 0 0; border-radius: 0; box-shadow: none; min-width: 60%;}
.mass_comments_action .bbcodes {border-radius: 0; padding: 0 10px;}

.comm__title {font-size: 18px; margin-bottom: 20px;}
.mass_comments_action, .comm__ctrl, .comm__action-quote, .confidential-check {display: none !important;}
.comm__action-reply {height: 30px; border-radius: 15px; padding: 0 15px; background: var(--bg-darker);}

.comm {margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--bdc);}
.comm__img {width: 40px; height: 40px; border-radius: 50%; margin-right: 15px;}
.comm__img::before {content: ''; width: 8px; height: 8px; border-radius: 50%; background-color: var(--ui-red); 
	position: absolute; right: -1px; top: -1px; z-index: 5; border: 2px solid var(--bg);}
.comm--online .comm__img::before {background-color: var(--ui-green);}
.comm__letter {width: 100%; height: 100%; text-transform: uppercase; border-radius: inherit;
	position: absolute; left: 0; top: 0; color: #fff; font-size: 18px; font-weight: var(--ui-fw-bolder);}
.comm__author, .comm__author a {color: var(--tt-colored); font-weight: 700; font-size: 14px;}
.comm__date {color: var(--tt-fade); font-size: 13px; margin-top: 2px;}
.comm__main {margin: 10px 0 6px 0;}
.comm__action {gap: 20px; font-size: 13px;}
.comm__action li, .comm__action li a {color: var(--tt-fade); cursor: pointer; gap: 8px;}
.comm__ctrl, .comm__ctrl a {font-size: 15px; gap: 10px 15px; color: var(--tt-fade);}
.comm__ctrl li.has-checkbox {transform: scale(0.8,0.8); margin: 0 -10px 0 -5px;}
.comm__ctrl li.has-checkbox input {border-color: var(--tt-fade);}
.comm__rating {gap: 10px; font-size: 14px;}
.comm__rating::before {content: attr(data-text); display: inline;}
.comm__rating > * {display: flex; gap: 5px;}
.comm__rating > * > span:first-child {text-decoration: underline; color: var(--ui-green);}
.comm__rating > * + * > span:first-child {color: var(--ui-red);}
@media screen and (min-width: 1220px) {
	.comm {position: relative; padding-left: 60px;}
	.comm__img {position: absolute; left: 0; top: 0; width: 44px; height: 44px;}
	.comm__main {margin: 10px 0 13px 0;}
	.comm__meta {display: flex; align-items: center; gap: 20px;}
}


/* LOGIN
----------------------------------------------- */
.login {position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow-y: auto;
	background-color: var(--ui-bg); width: 440px; border: 10px solid var(--ui-bg-darker); display: none;
	box-shadow: 0 15px 45px rgba(0,0,0,1); max-width: calc(100vw - 40px); max-height: calc(100vh - 40px);}
.login__header {padding: 20px 50px 25px 50px; border-bottom: 1px solid var(--ui-bdc); position: relative;}
.login__title {font-size: 24px; font-weight: var(--ui-fw-bolder);}
.login__caption {font-size: 13px; color: var(--ui-tt-fade); margin-top: 3px;}
.login__close {font-size: 23px; position: absolute; right: 10px; top: 10px; padding: 0; width: 40px; height: 40px;}
.login__content {display: grid; gap: 20px; padding: 25px 50px; padding-bottom: 30px; position: relative;}
.login__row, .login__row.fal, .login__row.fas {position: relative; display: grid; gap: 10px; justify-content: stretch;}
.login__row-caption a, .login__caption a {margin-left: 10px;}
.login__row::before {position: absolute; left: 2px; bottom: 0; width: 40px; height: 50px; 
	display: grid; place-items: center; opacity: 0.4; font-size: 18px;}
.login__input input {padding-left: 40px; border-radius: 4px; height: 50px; line-height: 48px;}
.login__row button {width: 100%; height: 40px; border-radius: 4px;}
.login__social {padding-top: 10px; text-align: center; gap: 10px;}
.login__social-caption {font-size: 13px; color: var(--ui-tt-fade); width: 100%;}
.login__social a, .login__social img {display: block; width: 34px; height: 34px;}
.login--logged .login__header {padding-left: 115px;}
.login__avatar {width: 50px; height: 50px; position: absolute; left: 50px; top: 25px;}
.login__menu a {border-bottom: 1px solid var(--ui-bdc); padding: 10px 0; width: 100%; justify-content: flex-start;}
.login__menu li:last-child a {border: 0;}
.login__menu a::before {width: 20px; font-size: 18px; text-align: center; color: var(--ui-accent); margin-right: 10px;}



/* ADAPTIVE, MOBILE MENU
----------------------------------------------- */
.overlay {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; 
	opacity: 0.6; background-color: #000; cursor: pointer; display: none;}
.mobile-menu {width: 360px; height: 100%; overflow-x: hidden; overflow-y: auto;
	z-index: 999; position: fixed; left: -360px; top: 0; transition: left 0.4s; 
	background-color: var(--bg); visibility: hidden;}
.mobile-menu.is-active {left: 0; visibility: visible;}
body.mobile-menu-is-opened {overflow: hidden; width: 100%; height: 100%;}
@media screen and (max-width: 590px) { .mobile-menu {left: -100vw; width: 100vw; height: 100vh;} }
.mobile-menu__header {padding: 10px 20px; gap: 10px; margin-bottom: 30px;}
.mobile-menu__search {background-color: var(--ui-bg-darker); padding: 10px 20px;}
.mobile-menu__search .search-block {margin: 0;}
.mobile-menu__header .logo {min-width: 100px; margin: 0;}
.mobile-menu__btn-close {font-size: 24px; width: 40px; height: 40px; margin-right: -10px;}
.mobile-menu__content .sb {padding-left: 20px; padding-right: 20px;}

@media screen and (max-width: 1220px) {
	:root {--indent-negative: -20px; --indent: 20px;}
	body {background-image: none;}
	.wrapper {padding: 0; background-image: none; overflow: hidden;}
	.wrapper-container {max-width:1000px;}
	.cols__side .js-this-in-mobile-menu, .scrolltop {display: none;}
	.header__btn-mobmenu {display: flex; font-size: 28px; margin-left: 10px; color: #fff;}
	.header, .apps-offer {padding-left: var(--indent); padding-right: var(--indent);}
	.header__logo {position: static;}
	.header__logo, .header__search {margin-right: 20px;}
	.header__btn-fav {margin: 0 20px;}
	.cols {display: block;}
	.cols__side {margin-top: 0px; padding-left: var(--indent); padding-right: var(--indent); padding-top: 30px;}
	.footer__one, .footer__two {gap: 20px; display: flex; flex-wrap: wrap; justify-content: center; 
		order: 10; min-width: 100%; text-align: center;}
	.footer__text, .footer__menu, .footer__copyright {min-width: 100%; text-align: center;}
	.footer__two {margin-bottom: 20px; width: 100%;}
	.footer__tlg {margin: 0;}
	.footer__logo {display: inline-block;}
}

@media screen and (max-width: 950px) {
	.wrapper-container {max-width:768px;}
	.header {padding-top: 10px; padding-bottom: 10px; height: 110px;}
	.header__logo {flex: 1 1 0; max-width: 100%; min-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
	.header__search {min-width: 100%; margin: 0; order: 10; margin-top: 10px;}
	.header__btn-fav span, .header__btn-login-name {display: none;}
	.top-slider {margin-top: -60px;}
	.sl {height: 360px; padding-top: 125px;}
	.sl__title {font-size: 28px; margin-bottom: 18px; padding-right: 20px;}
	.sl__text {font-size: 13px; padding-right: 20px;}
	.sl__btns {margin-top: 25px; gap: 10px;}
	.sl__btn {border-radius: 20px; height: 40px; padding: 0 20px; font-size: 13px;}
	.sl__fav a, .sl__share, .sl__fav.btn {height: 40px; width: 40px; font-size: 16px; padding: 0;}
	.apps-offer__desc {min-width: calc(100% - 100px);}
	.apps-offer {justify-content: flex-start;}
	
	.page__grid {grid-template-columns: 120px minmax(0,1fr) min-content; gap: 20px; 
		grid-template-areas: "pposter pheader prating" "pctrl pctrl pctrl"; margin-top: -160px; padding-top: 120px;}
	.page__img {width: 120px; height: 120px;}
	.page__header, .page__rating {align-self: center;}
	.page__play {height: 40px; padding: 0 20px; border-radius: 20px;}
	.page__fav a, .page__dl, .page__share {width: 40px; height: 40px; font-size: 18px; border-radius: 50%;}
	.page__tech {padding-left: 0;}
	.page__songtext {width: 100%; margin: 0; margin-top: 15px;}
	.page__songtext .sect__subtitle {margin-bottom: 15px;}
	.page--album .page__grid {grid-template-columns: 120px minmax(0,1fr); 
		grid-template-areas: "pposter pheader" "pctrl pctrl"}
}

@media screen and (max-width: 760px) {
	.wrapper-container {max-width:640px;}
	.sect__title {font-size: 24px;}
	.sect__link {font-size: 14px;}
	.apps-offer__title, .descr h1, .descr h2, .descr h3 {font-size: 16px;}

	.pagination > a, .pagination > span {display: none;}
	.pagination__pages {width: 100%;}

	.page__title {font-size: 24px;}
	.page__title > span {font-size: 16px;}
	.page__category {font-size: 12px;}

	.full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 20px;}
	.page__intro, .page__text .quote {margin-left: var(--indent-negative); margin-right: var(--indent-negative); padding-right: var(--indent);}
	.full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 18px;}
	
	.ac-toggle.ac-form {padding-left: 0;}
	.ac-toggle::before {display: none;}
	.ac-form__bottom {gap: 10px;}
	.ac-form__bottom button {padding: 0 20px;}
	.ac-form__header input + input {min-width: 100%; order: 10;}
	.ac-form__header > span, .comm__rating::before {display: none;}
}

@media screen and (max-width: 590px) {
	.wrapper-container {max-width:480px;}
	.header__btn-mobmenu {margin-left: 15px; margin-right: -10px;}
	.grid-tracks {grid-template-columns: repeat(auto-fill,minmax(280px,1fr));}
	.grid-albums, .grid-artists {grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 20px;}
	.speedbar {font-size: 12px;}

	.page__grid {grid-template-columns: 140px minmax(0,1fr); 
		grid-template-areas: "pposter pheader" "pposter prating" "pctrl pctrl";}
	.page__img {width: 140px; height: 140px; margin-bottom: 0; box-shadow: none !important;}
	.page__rating {justify-content: flex-start;}
	.page__rating a {display: flex; flex-wrap: wrap; align-items: center; width: auto;}
	.page__rating a .fal {margin: 0; margin-right: 10px; width: 30px; height: 30px;}
	.page__category {display: none;}
	.page__play {width: 100%;}
	.page__fav, .page__dl, .page__share {margin-left: -5px;}
	.page__caption::before, .page--track .page__other-songs::before, 
	.page--collection .page__other-songs::before {display: none;}
	.page__caption, .page--track .page__other-songs, .page--collection .page__other-songs {padding-left: 0;}
	.page--album .page__grid {grid-template-columns: 140px minmax(0,1fr); 
		grid-template-areas: "pposter pheader" "pctrl pctrl"}
}

@media screen and (max-width: 470px) {
	.wrapper-container1234 {max-width:360px;}
	.login__header, .login__content {padding-left: 20px; padding-right: 20px;}
	.login--logged .login__header {padding-left: 85px;}
	.login__avatar {left: 20px;}
	.login__title span {display: none;}
	.login__input input, .login__row::before {height: 40px; line-height: 38px;}
	.login__menu {margin: -15px 0;}
	.header__logo {font-size: 20px;}
	.header__search {max-width: calc(100% - 60px); min-width: calc(100% - 60px); margin-right: 20px;}
	.header__btn-login {order: 10; margin-top: 10px;}
	.header__btn-login:not(.img-fixed-size) {width: 40px; padding: 0;}
	.header__btn-login:not(.img-fixed-size)::before {display: block;}
	.header__btn-login:not(.img-fixed-size) span {display: none;}
	.header__btn-fav {margin: 0 -6px 0 15px;}
	.trc {padding-left: 5px;}
	.trc__play {margin-right: 5px;}
	.trc__desc {padding-left: 56px;}
	.trc__time {margin-left: 10px; display: none;}
	.trc__fav {margin-left: 10px;}
	.apps-offer__link {max-width: calc((100% - 20px)/3);}

	.page__title {font-size: 20px; line-height: 1.3;}
	.page__title > span {font-size: 16px; margin-top: 10px;}
	.page__tech {font-size: 12px; gap: 10px; grid-template-columns: repeat(auto-fill,minmax(140px,1fr));}
	.page__tech li {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.page--album .page__grid {grid-template-columns: 100px minmax(0,1fr);}
	.page--album .page__img {width: 100px; height: 100px;}
	
	.full-text {font-size: 15px;}
	.ac-form__bottom .comments_subscribe {font-size: 13px;}
	.full-text iframe {width: calc(100% + 40px); max-width: calc(100% + 40px); height: 260px; margin-left: -20px; margin-right: -20px;}
}


/* PLAYER
----------------------------------------------- */
.wplayer {width: 100%; position: fixed; left: 0; bottom: 0; z-index: 997;}
.audioplayer {max-width: 1360px; width: 100%; margin: 0 auto;}
.audioplayer audio {display: none;}
.ap-main {box-shadow: 0 0 20px rgba(0,0,0,0.6); background-color: #fff; color: #000; position: relative; 
	padding: 15px var(--indent); height: 80px; margin-left: 340px;}
.audioplayer-bar {position: relative; height: 6px; cursor: pointer;
	background-color: #edeef0; flex-grow: 1; border-radius: 0 3px 3px 0; margin: 0 10px 0 30px;}
.audioplayer-bar::before {content: ''; background-color: var(--accent); border-radius: 3px 0 0 3px; 
	position: absolute; top: 0; right: 100%; width: 20px; height: 100%; pointer-events: none;}
.audioplayer-bar-loaded {position: absolute; left: 0; top: 0; height: 100%;
	background-color: rgba(0,0,0,0); pointer-events: none;}
.audioplayer-bar-played {position: absolute; left: 0; top: 0; height: 100%;
	z-index: 10; background-color: var(--accent); cursor: pointer; border-radius: 0 3px 3px 0;}
.audioplayer-bar-played::before, .audioplayer-volume-adjust > div > div::before 
{content: ''; width: 14px; height: 14px; border-radius: 50%; transform: translate(50%,-50%);
	position: absolute; right: 0; top: 50%; background: var(--accent); pointer-events: none;}

.audioplayer-volume {position: relative; z-index: 100; width: 100px; margin-right: 15px;}
.audioplayer-muted .fa-volume-up:before {content: '\f6a9';}
.audioplayer-volume-adjust {position: absolute; left: 30px; top: 50%; right: 0; height: 40px; 
	margin-top: -20px; display: flex; align-items: center;}
.audioplayer-volume-adjust > div {width: 100%; height: 6px; border-radius: 3px;
	position: relative; cursor: pointer; background-color: #edeef0;}
.audioplayer-volume-adjust > div > div {height: 100% !important; background-color: var(--accent);
	position: absolute; left: 0; top: 0; z-index: 10; border-radius: 3px;}
.audioplayer-volume a {font-size: 18px; color: #51596d;}

.audioplayer-time {font-size: 12px; color: #636363; margin-right: 45px; white-space: nowrap;}
.audioplayer-time-current {margin-right: 0; margin-left: 20px; text-align: right; width: 40px;}
.ap-desc {width: 240px; order: -10; margin-right: 20px;}
.ap-img {width: 50px; height: 50px; margin-right: 15px;}
.ap-artist {margin-top: 5px; color: #636363; font-size: 13px;}
.ap-title {font-size: 14px; font-weight: 700; text-transform: uppercase;}
.ap-dl{font-size: 28px; color: #51596d;}

.audioplayer-stopped .audioplayer-playpause a {padding-left: 3px;}
.audioplayer-playpause a {color: var(--bg-btn);}
.wplayer-init .audioplayer-playpause .fas:before {content: '\f04b'; padding-left: 1px;}
.audioplayer-playpause, .ap-prev, .ap-next {display: grid; place-items: center; cursor: pointer;
	width: 50px; height: 50px; border-radius: 50%; font-size: 20px; background-color: transparent; color: #51596d;
	transition: background-color 0.3s;}
.audioplayer-playpause {border: 2px solid var(--bg-btn); color: var(--tt-btn); font-size: 22px;}
.audioplayer-playpause:hover, .audioplayer-playpause:hover a {background-color: var(--bg-btn); color: #fff;}
.ap-prev:hover, .ap-next:hover, .ap-dl:hover, 
.audioplayer-volume-button:hover, .ap-mob-btn.is-active {color: var(--bg-btn);} 
.ap-mob-btn {display: none; color: #51596d; font-size: 28px; margin-left: 15px; cursor: pointer;}

@media screen and (max-width: 1220px) {
	.ap-main {margin-left: 0;}
	.ap-desc {margin-right: 0px;}
	.audioplayer-time-duration {margin-right: 20px;}
	.audioplayer-time-current {margin-left: 0px;}
}
@media screen and (max-width: 950px) {
	.ap-main {height: 70px; padding-top: 10px; padding-bottom: 10px; padding-left: 0;}
	.ap-desc, .audioplayer-volume, .ap-dl {display: none;}
	.ap-mob-btn {display: grid; font-size: 24px; margin: 0 -10px 0 -5px;}
	.is-active-desc .audioplayer-volume {position: absolute; right: 45px; bottom: 100%; 
		margin: 0 0 23px 0; display: block; width: 80px;}
	.is-active-desc .ap-desc {display: flex; position: absolute; left: 0; right: 0; bottom: 100%; 
		box-shadow: 0 -10px 20px rgba(0,0,0,0.3); background-color: #fff; padding: 10px 135px 10px 10px; width: 100%;}
	.is-active-desc .ap-img {margin-right: 10px;}
	.is-active-desc .ap-dl {position: absolute; right: 10px; bottom: 100%; margin-bottom: 19px; display: block; z-index: 10;}
	.audioplayer-playpause {width: 40px; height: 40px; font-size: 18px; margin: 0 5px}
	.ap-prev, .ap-next {width: 36px; height: 30px; font-size: 16px;}
	.ap-dl {font-size: 24px; margin: 0; display: none;}
	.ap-time {font-size: 12px;}
}
	
	
.tns-outer {position: relative;}
.tns-outer [hidden] {display: none !important}
.tns-slider {transition: all 0s}
.tns-horizontal.tns-subpixel {white-space: nowrap}
.tns-horizontal.tns-subpixel > .tns-item {display:inline-block; vertical-align:top; white-space:normal}
.tns-horizontal.tns-no-subpixel:after{content:'';display:table;clear:both}
.tns-horizontal.tns-no-subpixel>.tns-item{float:left}
.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item{margin-right:-100%}
.tns-no-calc{position:relative;left:0}
.tns-gallery{position:relative;left:0;min-height:1px}
.tns-gallery>.tns-item{position:absolute;left:-100%; transition:transform 0s, opacity 0s}
.tns-gallery>.tns-slide-active{position:relative;left:auto !important}
.tns-gallery>.tns-moving{transition:all 0.25s}
.tns-autowidth{display:inline-block}
.tns-ovh{overflow:hidden}.tns-visually-hidden{position:absolute;left:-10000em}
.tns-transparent{opacity:0;visibility:hidden}
.tns-fadeIn {opacity: 1; z-index: 0}
.tns-normal, .tns-fadeOut {opacity: 0; z-index: -1}
.tns-vpfix{white-space:nowrap}.tns-vpfix>div,.tns-vpfix>li{display:inline-block}
.tns-t-subp2{margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}
.tns-t-ct{width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;right:0}
.tns-t-ct:after{content:'';display:table;clear:both}
.tns-t-ct>div{width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left}

.tns-controls {position: absolute; left: -50px; right: -50px; top: 50%; margin-top: -30px; 
	display: flex; justify-content: space-between; z-index: 10; height: 1px;}
.tns-controls button {background-color: var(--bg-btn); color: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.3);
	width: 30px; height: 60px; padding: 0; border-radius: 0 10px 10px 0;}
.tns-controls button + button {border-radius: 10px 0 0 10px;}
.tns-nav {position: absolute; right: var(--indent); bottom: 0; top: 0; z-index: 9; margin-right: -7px;
	display: flex; justify-content: center; flex-direction: column; gap: 10px;}
.tns-nav button {padding: 0; width: 14px; height: 14px; border-radius: 50%; 
	background-color: transparent; border: 1px solid #fff;}
.tns-nav button.tns-nav-active, .tns-nav button:hover, .tns-controls button:hover 
{background-color: #fff !important; color: var(--accent);}
@keyframes scaleIn {
	from {opacity: 0; transform: scale(0.5,0.5);}
	to {opacity: 1; transform: scale(1,1);}
}
.scaleIn {animation-name: scaleIn;}
@keyframes rollOut {
	from {opacity: 1;}
	to {opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);}
}
.rollOut {animation-name: rollOut;}

.has-tns-slider:not(.tns-slider) {overflow: hidden; display: flex;}
.top-slider__inner:not(.tns-slider) > * {flex-shrink: 0; width: 100%;}
.tns-gallery-fix {margin-right: -20px;}
.slide-albums:not(.tns-slider) > * {flex-shrink: 0; margin-right: 20px; width: calc((100% - 100px)/5);}
.slide-artists:not(.tns-slider) > * {flex-shrink: 0; margin-right: 10px; width: calc((100% - 50px)/6);}
@media screen and (max-width: 1220px) {
	.slide-artists:not(.tns-slider) > * {width: calc((100% - 40px)/5);}
	.tns-controls {left: -20px; right: -20px;}
}
@media screen and (max-width: 950px) {
	.slide-albums:not(.tns-slider) > * {width: calc((100% - 80px)/4);}
	.slide-artists:not(.tns-slider) > * {width: calc((100% - 30px)/4);}
}
@media screen and (max-width: 760px) {
	.slide-albums:not(.tns-slider) > * {width: calc((100% - 60px)/3);}
	.slide-artists:not(.tns-slider) > * {width: calc((100% - 20px)/3);}
}
@media screen and (max-width: 470px) {
	.slide-albums:not(.tns-slider) > * {width: calc((100% - 40px)/2);}
	.slide-artists:not(.tns-slider) > * {width: calc((100% - 10px)/2);}
}
.top-slider .tns-controls {right: 0; top: auto; left: auto; right: 0; bottom: 50px; margin: 0; gap: 1px;}
.top-slider .tns-controls button {width: 50px; height: 50px; border-radius: 0; 
	background-color: rgba(255,255,255,0.2); box-shadow: none;}
.top-slider .tns-item .sl__title, .top-slider .tns-item .sl__text, 
.top-slider .tns-item .sl__btns {opacity: 0; transform: translateY(-50px); transition-duration: 0.6s;}
.top-slider .tns-slide-active .sl__title, .top-slider .tns-slide-active .sl__text, 
.top-slider .tns-slide-active .sl__btns {opacity: 1; transform: translateY(0px);}
.top-slider .tns-item .sl__text {transition-delay: 0.3s;}
.top-slider .tns-item .sl__btns {transition-delay: 0.6s;}

.sect .tns-controls {margin-top: -58px;}
#slide-artists-ow .tns-controls button {position: relative; top: 8px;}