body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, button, input, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}

fieldset, img {
	border: 0;
}

img, object, embed {
	vertical-align: bottom;
}

address, caption, cite, code, dfn, em, th, var {
	font-style: normal;
	font-weight: normal;
}

ol, ul {
	list-style: none;
}

caption, th {
	text-align: left;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

q:before, q:after {
	content: '';
}

a * {
	cursor: pointer;
}

input,
textarea {
	outline: none;
}

:root {
	--font-size-general: 16px;
	--line-height-general: 1.2;
	--default-font: Helvetica, sans-serif;
	--color-main: #fff;
	--color-second:#888;
	--color-active: #ff394b;
	--color-white: #fff;
	--color-tools-mobile: #fff;
	--color-modal: #7e7e7e;
	--border-search: #202028;
	--border-color: #121216;
	--border-header: rgb(18,18,22);
	--box-shadow-menu: 0 4px 18px 0 rgba(0, 0, 0, 0.35);
	--bg-main: #151519;
	--bg-tools-mobile: #151519;
	--bg-header: #000;
	--bg-footer: #000;
	--bg-sticky: rgba(0, 0, 0, 0.6);
	--bg-quality: rgba(255, 57, 75, 0.7);
	--bg-tools: #000;
	--bg-active: #B3000F;
	--bg-second-active: #ff0015;
	--bg-rgb-dark: 0, 0, 0;
	--bg-menu: #040404;
	--bg-play-btn: rgba(255, 57, 75, .8);
	--bg-card: rgba(0, 0, 0, 0.8);
	--bg-card-playlist: rgba(0, 0, 0, 0.7);
	--bg-modal: rgba(0, 0, 0, 0.5);
	--bg-card-playlist-active: rgba(0255, 57, 75, .6);
	--bg-gradient-arrow-left: linear-gradient(90deg, #151519 52.6%, rgba(21, 21, 25, 0) 100%);
	--bg-gradient-arrow-right: linear-gradient(270deg, #151519 52.6%, rgba(21, 21, 25, 0) 100%);
}

:root .light {
	--color-main: #000;
	--color-second: #8691a2;
	--color-active: #ff394b;
	--color-white: #fff;
	--color-tools-mobile: #8691a2;
	--color-modal: #737373;
	--border-search: #e4e4e8;
	--border-color: #efeff6;
	--border-header: #f2f2f3;
	--box-shadow-menu: 0 4px 18px 0 rgba(0, 0, 0, .15);
	--bg-main: #e7e7ec;
	--bg-tools-mobile: #efeff6;
	--bg-header: #fff;
	--bg-footer: #fff;
	--bg-sticky: rgba(255, 255, 255, .6);
	--bg-quality: rgba(255, 57, 75, .7);
	--bg-tools: #fff;
	--bg-active: #ff394b;
	--bg-second-active: #ff0015;
	--bg-rgb-dark: 255, 255, 255;
	--bg-menu: #fff;
	--bg-play-btn: rgba(255, 57, 75, .8);
	--bg-card: rgba(255, 255, 255, 0.8);
	--bg-card-playlist: rgba(255, 255, 255, 0.7);
	--bg-modal: rgba(255, 255, 255, 0.6);
	--bg-card-playlist-active: rgba(0255, 57, 75, .6);
	--bg-gradient-arrow-left: linear-gradient(90deg, #e7e7ec 52.6%, rgba(231, 231, 236, 0) 100%);
	--bg-gradient-arrow-right: linear-gradient(270deg, #e7e7ec 52.6%, rgba(231, 231, 236, 0) 100%);
}

html {
	height: 100%;
	min-width: 320px;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font: var(--font-size-general)/var(--line-height-general) var(--default-font);
	height: 100%;
	min-width: 320px;
	position: relative;
	color: var(--color-main);
	background: var(--bg-main);
}

@media screen and (max-width: 1159px) {
	body.open-menu .mask {
		opacity: 1;
		visibility: visible;
	}
	body.open-menu .navigation-menu {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}
}

@media screen and (max-width: 1159px) {
	body.scroll-locked {
		height: 100%;
		overflow: hidden;
		position: fixed;
		width: 100%;
	}
}

body.modal-open {
	height: 100%;
	overflow: hidden;
	position: fixed;
	width: 100%;
}

@media screen and (max-width: 568px) {
	body.show-search .search-frame {
		top: 50%;
		visibility: visible;
		opacity: 1;
	}
	body.show-search .action-search .close {
		display: flex;
	}
	body.show-search .action-search .search {
		display: none;
	}
	body.show-search .hamburger,
	body.show-search .logo {
		opacity: 0;
		visibility: hidden;
	}
}

body.light .switcher-mobile span::before {
	content: attr(data-attr-dark);
}

a {
	color: #2600ff;
	text-decoration: none;
}

input {
	outline: none;
	-webkit-appearance: none;
	border-radius: 0;
}

* {
	box-sizing: border-box;
	outline: none;
}

*:before, *:after {
	box-sizing: border-box;
}

* ::-moz-selection {
	background: #2600ff;
	color: #fff;
}

* ::selection {
	background: #2600ff;
	color: #fff;
}

.svg-icon {
	display: inline-block;
	vertical-align: top;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

input, textarea {
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	color: #999;
}

input:-moz-placeholder, textarea:-moz-placeholder {
	color: #999;
	opacity: 1;
}

input::-moz-placeholder, textarea::-moz-placeholder {
	color: #999;
	opacity: 1;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
	color: #999;
}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
	color: transparent;
}

input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {
	color: transparent;
}

input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
	color: transparent;
}

input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
	color: transparent;
}

input.placeholder, textarea.placeholder {
	color: #999 !important;
}

.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.container {
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
	padding: 0 20px;
}

@media screen and (max-width: 767px) {
	.container {
		padding: 0 10px;
	}
}

.container.smallest {
	max-width: 1650px;
}

.mask {
	--opacity: .7;
	--blur: 15px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	-webkit-backdrop-filter: blur(var(--blur));
	        backdrop-filter: blur(var(--blur));
	background: rgba(var(--bg-rgb-dark), var(--opacity));
	opacity: 0;
	visibility: hidden;
	transition: transform .3s, opacity .3s, visibility .3s;
}

.header {
	background-color: var(--bg-header);
	margin-bottom: 30px;
	flex-shrink: 0;
	flex-grow: 0;
}

@media screen and (max-width: 767px) {
	.header {
		margin-bottom: 20px;
	}
}

.header.second {
	margin-bottom: 0;
	border-bottom: 1px solid var(--border-header);
}

.header-holder {
	display: flex;
	position: relative;
}

@media screen and (max-width: 568px) {
	.header-holder {
		justify-content: space-between;
	}
}

.hamburger {
	display: none;
	align-items: center;
	align-self: center;
	margin-right: 20px;
	cursor: pointer;
	font-size: 24px;
	transition: color .3s;
	border: none;
	background: none;
	transition: visibility .3s, opacity .3s, color .3s;
	color: var(--color-main);
}

@media screen and (min-width: 1025px) {
	.hamburger:hover {
		color: var(--color-active);
	}
}

@media screen and (max-width: 1159px) {
	.hamburger {
		display: flex;
	}
}

@media screen and (max-width: 568px) {
	.hamburger {
		margin-right: 10px;
	}
}

.logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-grow: 0;
	flex-shrink: 0;
	margin-right: 30px;
	padding: 18px 0;
	transition: visibility .3s, opacity .3s;
}

@media screen and (max-width: 1440px) {
	.logo {
		margin-right: 15px;
		max-width: 180px;
	}
}

@media screen and (max-width: 568px) {
	.logo {
		margin-right: 0;
		padding: 10px 0;
	}
}

.logo img {
	max-width: 100%;
	height: auto;
}

.search-frame {
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	flex-grow: 1;
	flex-shrink: 1;
}

@media screen and (max-width: 568px) {
	.search-frame {
		position: absolute;
		right: 0;
		padding-right: 34px;
		top: 80%;
		left: 0;
		z-index: 3;
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s, visibility .3s, top .3s;
		transform: translate3d(0, -50%, 0);
	}
}

.search-frame .form {
	max-width: 500px;
	display: flex;
	width: 100%;
}

@media screen and (max-width: 1159px) {
	.search-frame .form {
		max-width: 100%;
	}
}

.search-frame .wrapped {
	border: 1px solid var(--border-search);
	background: var(--bg-header);
	border-right: none;
	display: flex;
	align-items: center;
	padding-right: 10px;
	flex-grow: 1;
	flex-shrink: 1;
	border-radius: 10px 0 0 10px;
}

.search-frame input {
	flex-grow: 1;
	flex-shrink: 1;
	width: 100%;
	padding: 10px 20px;
	border: none;
	background: none;
	color: var(--color-main);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.btn-search {
	padding: 0 18px;
	font-size: 20px;
	color: var(--color-white);
	background: var(--bg-active);
	border-radius: 0 10px 10px 0;
	border: none;
	cursor: pointer;
	transition: background .3s;
}

.btn-search svg {
	transition: transform .3s, background .3s;
	transform: scale(1);
}

@media screen and (min-width: 1025px) {
	.btn-search:hover {
		background: var(--bg-second-active);
	}
	.btn-search:hover svg {
		transform: scale(1.1);
	}
}

.search-dropped {
	align-self: center;
	position: relative;
}

.search-dropped .js-main-video, .search-dropped .js-main-image, .search-dropped .js-main-model {
	display: none;
}

.search-dropped.videos .js-main-video {
	display: block;
}

.search-dropped.models .js-main-model {
	display: block;
	font-size: 20px;
}

.search-dropped.images .js-main-image {
	display: block;
	font-size: 20px;
}

.search-dropped.show .search-hidden {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	visibility: visible;
}

.search-dropped.show .button {
	color: var(--color-active);
}

.search-dropped.show .button svg.arrow {
	transform: rotate(180deg);
}

.search-dropped .button {
	color: var(--color-second);
	cursor: pointer;
	background: none;
	border: none;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.search-dropped .button:hover {
		color: var(--color-active);
	}
}

.search-dropped .svg-icon.video {
	font-size: 20px;
}

.search-dropped .svg-icon.arrow {
	font-size: 10px;
	transition: transform .3s;
}

.search-hidden {
	position: absolute;
	z-index: 10;
	background: var(--bg-main);
	box-shadow: var(--box-shadow-menu);
	min-width: 125px;
	right: 0;
	border-radius: 10px 0 10px 10px;
	overflow: hidden;
	top: calc(100% + 20px);
	opacity: 0;
	transform: translate3d(0, -10%, 0);
	visibility: hidden;
	transition: opacity .3s, transform .3s, visibility .3s;
}

.search-hidden .item.active .link {
	background: var(--bg-active);
	color: var(--color-white);
}

.search-hidden .link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	font-weight: 700;
	font-size: 14px;
	color: var(--color-second);
	font-weight: 700;
	transition: color .3s, background .3s;
	cursor: pointer;
}

@media screen and (min-width: 1025px) {
	.search-hidden .link:hover {
		background: var(--bg-active);
		color: var(--color-main);
	}
}

.search-hidden svg {
	font-size: 20px;
	flex-grow: 0;
	flex-shrink: 0;
}

.action-search {
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-left: 10px;
	flex-grow: 0;
	flex-shrink: 0;
	align-self: center;
	color: var(--color-main);
	background: none;
	border: none;
	position: relative;
	z-index: 3;
	cursor: pointer;
}

@media screen and (max-width: 568px) {
	.action-search {
		display: flex;
	}
}

.action-search .close {
	display: none;
}

.header-panel {
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
}

@media screen and (max-width: 568px) {
	.header-panel {
		flex-grow: 0;
		flex-shrink: 0;
	}
}

.navigation-menu {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
}

@media screen and (max-width: 1159px) {
	.navigation-menu {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		z-index: 111;
		background: var(--bg-menu);
		height: 100%;
		max-width: 300px;
		width: 100%;
		padding: 12px 10px;
		flex-direction: column;
		overflow: auto;
		transform: translate3d(-100%, 0, 0);
		transition: transform .3s, visibility .3s, opacity .3s;
		visibility: hidden;
		opacity: 0;
	}
}

.navigation-menu .list {
	display: flex;
	align-self: center;
	justify-content: flex-end;
	flex-grow: 0;
	flex-shrink: 0;
	margin-left: 30px;
}

@media screen and (max-width: 1440px) {
	.navigation-menu .list {
		margin-left: 15px;
	}
}

@media screen and (max-width: 1159px) {
	.navigation-menu .list {
		flex-direction: column;
		justify-content: flex-start;
		margin: 0;
		width: 100%;
		order: 1;
	}
}

.navigation-menu .list .item {
	margin-left: 50px;
}

.navigation-menu .list .item:first-child {
	margin: 0;
}

.navigation-menu .list .item.active a {
	color: var(--color-active);
	pointer-events: none;
}

.navigation-menu .list .item.hidden {
	display: none;
}

@media screen and (max-width: 1159px) {
	.navigation-menu .list .item.hidden {
		display: block;
	}
}

@media screen and (max-width: 1680px) {
	.navigation-menu .list .item {
		margin-left: 30px;
	}
}

@media screen and (max-width: 1440px) {
	.navigation-menu .list .item {
		margin-left: 20px;
	}
}

@media screen and (max-width: 1159px) {
	.navigation-menu .list .item {
		margin-left: 0;
		margin-top: 10px;
	}
	.navigation-menu .list .item.active a {
		background-color: var(--bg-active);
		color: var(--color-white);
	}
}

.navigation-menu .list a {
	font-weight: 700;
	font-size: 16px;
	color: var(--color-main);
	transition: color .3s;
	display: flex;
	align-items: center;
	gap: 0 10px;
}

@media screen and (min-width: 1025px) {
	.navigation-menu .list a:hover {
		color: var(--color-active);
	}
}

@media screen and (max-width: 1440px) {
	.navigation-menu .list a {
		font-size: 14px;
	}
}

@media screen and (max-width: 1159px) {
	.navigation-menu .list a {
		padding: 15px 20px;
		background: var(--bg-tools-mobile);
		color: var(--color-tools-mobile);
		font-size: 16px;
		border-radius: 10px;
		transition: none;
	}
}

.navigation-menu .list svg {
	font-size: 20px;
	display: none;
}

@media screen and (max-width: 1159px) {
	.navigation-menu .list svg {
		display: block;
	}
}

.navigation-header {
	width: 100%;
	margin-bottom: 20px;
	align-items: center;
	display: none;
}

@media screen and (max-width: 1159px) {
	.navigation-header {
		display: flex;
	}
}

.navigation-header .close {
	background: none;
	border: none;
	font-size: 24px;
	color: var(--color-main);
	cursor: pointer;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.navigation-header .close:hover {
		color: var(--color-active);
	}
}

.switcher-mobile {
	padding: 15px 20px;
	background: var(--bg-tools-mobile);
	color: var(--color-tools-mobile);
	font-size: 16px;
	border: none;
	cursor: pointer;
	border-radius: 10px;
	transition: none;
	display: flex;
	align-items: center;
	width: 100%;
}

@media screen and (min-width: 1025px) {
	.switcher-mobile:hover {
		color: var(--color-active);
	}
}

.switcher-mobile span {
	margin-left: 10px;
}

.switcher-mobile span::before {
	content: attr(data-attr-light);
	font-weight: 700;
}

.group-logo {
	display: flex;
	flex-shrink: 1;
	flex-grow: 1;
}

.group-logo img {
	height: 40px;
	width: auto;
}

.auth-box {
	display: flex;
	align-items: center;
	flex-grow: 0;
	flex-shrink: 0;
	margin-left: 50px;
	align-self: center;
	gap: 0 30px;
}

@media screen and (max-width: 1640px) {
	.auth-box {
		margin-left: 30px;
		gap: 0 20px;
	}
}

@media screen and (max-width: 1440px) {
	.auth-box {
		margin-left: 15px;
		gap: 0 15px;
	}
}

@media screen and (max-width: 1159px) {
	.auth-box {
		margin: 0 0 30px 0;
		width: 100%;
	}
}

.auth-box .wrap {
	display: flex;
	align-items: center;
	gap: 0 30px;
}

@media screen and (max-width: 1640px) {
	.auth-box .wrap {
		gap: 0 20px;
	}
}

@media screen and (max-width: 1159px) {
	.auth-box .wrap {
		display: none;
	}
}

.auth-box .btn {
	font-size: 20px;
	color: var(--color-main);
	background: none;
	border: none;
	cursor: pointer;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.auth-box .btn:hover {
		color: var(--color-active);
	}
}

.user-box {
	position: relative;
}

@media screen and (max-width: 1159px) {
	.user-box {
		width: 100%;
	}
}

.user-box.show .auth-drop {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	visibility: visible;
}

.user-box.show .ava {
	background: var(--bg-active);
	color: var(--color-white);
}

.user-box.show .name {
	color: var(--color-active);
}

.user-box.show .wrapped {
	color: var(--color-active);
}

.user-box.show .wrapped svg {
	transform: rotate(180deg);
}

@media screen and (max-width: 1159px) {
	.user-box.show .auth-drop {
		display: block;
	}
}

.user-box .box.active .link {
	background: var(--bg-active);
	color: var(--color-white);
}

.user-box .button {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-main);
	display: flex;
	align-items: center;
	gap: 10px;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.user-box .button:hover {
		color: var(--color-active);
	}
	.user-box .button:hover .ava {
		background: var(--bg-active);
		color: var(--color-white);
	}
	.user-box .button:hover .ava.second {
		background: var(--bg-second-active);
	}
}

@media screen and (max-width: 1159px) {
	.user-box .button {
		display: none;
	}
}

@media screen and (max-width: 1159px) {
	.user-box .button.second {
		display: flex;
		width: 100%;
	}
}

.user-box .wrapped {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
}

@media screen and (max-width: 1159px) {
	.user-box .wrapped {
		width: 100%;
		justify-content: space-between;
	}
}

.user-box .wrapped svg {
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 10px;
	transition: transform .3s;
}

.user-box .name {
	font-weight: 700;
}

@media screen and (max-width: 1240px) {
	.user-box .name {
		display: none;
	}
}

@media screen and (max-width: 1159px) {
	.user-box .name {
		display: block;
	}
}

.user-box .ava {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	overflow: hidden;
	flex-grow: 0;
	flex-shrink: 0;
	border-radius: 100%;
	background: var(--border-color);
	color: var(--color-second);
	font-size: 20px;
	transition: color .3s, background .3s;
}

.user-box .ava.second {
	background: var(--bg-active);
	color: var(--color-white);
}

.user-box .link {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--color-second);
	padding: 10px 20px;
	font-weight: 700;
	border: none;
	background: none;
	cursor: pointer;
	transition: color .3s, background .3s;
}

@media screen and (min-width: 1025px) {
	.user-box .link:hover {
		background: var(--bg-active);
		color: var(--color-white);
	}
}

.user-box .link svg {
	font-size: 20px;
}

.user-box img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.auth-drop {
	position: absolute;
	z-index: 10;
	background: var(--bg-main);
	box-shadow: var(--box-shadow-menu);
	border-radius: 10px 0 10px 10px;
	width: 100%;
	min-width: 255px;
	right: 0;
	top: calc(100% + 10px);
	overflow-y: auto;
	opacity: 0;
	transform: translate3d(0, -10%, 0);
	visibility: hidden;
	transition: opacity .3s, transform .3s, visibility .3s;
}

@media screen and (max-width: 1159px) {
	.auth-drop {
		position: static;
		opacity: 1;
		transform: none;
		visibility: visible;
		transition: none;
		box-shadow: none;
		background: none;
	}
}

@media screen and (max-width: 1159px) {
	.auth-drop.second {
		display: none;
		background: var(--bg-main);
		border-radius: 10px;
		margin-top: 10px;
	}
}

.auth-drop .group {
	display: flex;
	align-items: center;
	padding: 15px;
	gap: 5px 10px;
}

@media screen and (max-width: 1159px) {
	.auth-drop .group {
		padding: 0;
	}
}

.auth-drop .group .box {
	width: 50%;
}

.auth-button {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: center;
	padding: 11px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 10px;
	cursor: pointer;
	border: none;
	background: var(--bg-tools);
	color: var(--color-second);
	transition: background .3s, color .3s;
}

@media screen and (min-width: 1025px) {
	.auth-button:hover {
		background: var(--bg-active);
		color: var(--color-white);
	}
}

@media screen and (max-width: 1159px) {
	.auth-button {
		font-size: 16px;
	}
}

.auth-button.second {
	background: var(--bg-active);
	color: var(--color-white);
}

@media screen and (min-width: 1025px) {
	.auth-button.second:hover {
		background: var(--bg-second-active);
	}
}

.main {
	flex-shrink: 1;
	flex-grow: 1;
	padding-bottom: 50px;
}

@media screen and (max-width: 767px) {
	.main {
		padding-bottom: 30px;
	}
}

.section,
.section-row {
	margin-bottom: 50px;
}

@media screen and (max-width: 767px) {
	.section,
	.section-row {
		margin-bottom: 30px;
	}
}

.section:last-child,
.section-row:last-child {
	margin-bottom: 0;
}

.swiper {
	display: none;
}

.swiper.swiper-initialized {
	display: block;
}

.swiper .svg-icon {
	display: inline-block;
	vertical-align: top;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

@media screen and (max-width: 767px) {
	.slider-third,
	.slider-second {
		margin: 0 -10px;
		padding: 0 10px;
	}
}

.slider-box {
	margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
	.slider-box {
		display: none;
	}
}

.slider-top {
	position: relative;
}

.slider-top .swiper-slide {
	width: auto;
}

.slider-top .swiper-slide.active a {
	background: var(--bg-active);
	color: var(--color-white);
}

.slider-top a {
	padding: 10px 20px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-tools);
	color: var(--color-second);
	transition: background .3s, color .3s;
}

@media screen and (min-width: 1025px) {
	.slider-top a:hover {
		background: var(--bg-active);
		color: var(--color-white);
	}
}

.slider-top .swiper-button-prev {
	left: 0;
	justify-content: flex-start;
	background: var(--bg-gradient-arrow-left);
}

.slider-top .swiper-button-next {
	justify-content: flex-end;
	right: 0;
	background: var(--bg-gradient-arrow-right);
}

.slider-top .swiper-button-prev,
.slider-top .swiper-button-next {
	width: 73px;
	padding: 0 10px;
	color: var(--color-second);
	transition: color .3s;
	margin: 0;
	height: 100%;
	top: 0;
}

@media screen and (min-width: 1025px) {
	.slider-top .swiper-button-prev:hover,
	.slider-top .swiper-button-next:hover {
		color: var(--color-active);
	}
}

.slider-top .swiper-button-prev::after,
.slider-top .swiper-button-next::after {
	display: none;
}

.headline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 10px;
	gap: 10px;
}

.headline.second {
	margin-bottom: 30px;
}

.headline.primary {
	margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
	.headline.primary {
		margin-bottom: 10px;
	}
}

.headline.secondary {
	margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
	.headline.secondary {
		margin-bottom: 10px;
	}
}

.headline .title {
	flex-grow: 1;
	flex-shrink: 1;
	font-weight: 700;
	font-size: 26px;
}

.headline .title a {
	color: var(--bg-active);
	transition: color .3s ease;
}

@media screen and (hover:hover) {
	.headline .title a:hover {
		color: var(--color-white);
	}
}

@media screen and (max-width: 1159px) {
	.headline .title {
		font-size: 24px;
	}
}

@media screen and (max-width: 767px) {
	.headline .title {
		font-size: 20px;
	}
}

.headline .dropped {
	position: relative;
}

.headline .dropped.show .drop-sort {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	visibility: visible;
}

.headline .dropped.show .btn-sort {
	background: var(--bg-active);
	color: var(--color-white);
	border-radius: 10px 10px 0 0;
}

.headline .dropped.show .btn-sort svg {
	transform: rotate(180deg);
}

.wrap-sort {
	display: flex;
	align-items: center;
	gap: 5px;
}

.btn-sort {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	gap: 10px;
	border-radius: 10px;
	font-size: 14px;
	padding: 10px 20px;
	background: var(--bg-tools);
	color: var(--color-second);
	border: none;
	cursor: pointer;
	font-weight: 700;
	transition: color .3s, background .3s, border-radius .3s;
}

@media screen and (min-width: 1025px) {
	.btn-sort:hover {
		background: var(--bg-active);
		color: var(--color-white);
	}
}

.btn-sort svg {
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 10px;
	transition: transform .3s;
}

.drop-sort {
	position: absolute;
	z-index: 10;
	background: var(--bg-main);
	width: 100%;
	right: 0;
	border-radius: 0 0 10px 10px;
	box-shadow: var(--box-shadow-menu);
	overflow: hidden;
	top: calc(100%);
	overflow-y: auto;
	opacity: 0;
	transform: translate3d(0, -10%, 0);
	visibility: hidden;
	transition: opacity .3s, transform .3s, visibility .3s;
}

.drop-sort .link {
	display: flex;
	align-items: center;
	padding: 10px 20px;
	color: var(--color-second);
	background: var(--bg-tools);
	font-size: 14px;
	font-weight: 700;
	transition: color .3s, background .3s;
	cursor: pointer;
}

@media screen and (min-width: 1025px) {
	.drop-sort .link:hover {
		color: var(--color-white);
		background: var(--bg-active);
	}
}

.main-flex {
	--flex-gap: 20px;
	--flex-items: 4;
	display: flex;
	flex-wrap: wrap;
	gap: 30px var(--flex-gap);
}

@media screen and (max-width: 1159px) {
	.main-flex {
		--flex-items: 3;
	}
}

@media screen and (max-width: 767px) {
	.main-flex {
		--flex-items: 2;
		gap: var(--flex-gap);
	}
}

@media screen and (max-width: 479px) {
	.main-flex {
		--flex-items: 1;
	}
}

.main-flex .thumb {
	width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
}

.wrapped-flex {
	--flex-gap: 20px;
	--flex-items: 4;
	display: flex;
	flex-wrap: wrap;
	gap: var(--flex-gap);
}

@media screen and (max-width: 1159px) {
	.wrapped-flex {
		--flex-items: 3;
	}
}

@media screen and (max-width: 767px) {
	.wrapped-flex {
		--flex-items: 2;
	}
}

@media screen and (max-width: 479px) {
	.wrapped-flex {
		--flex-items: 1;
	}
}

.wrapped-flex .thumb {
	width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
}

.second-flex {
	--flex-gap: 20px;
	--flex-items: 6;
	display: flex;
	flex-wrap: wrap;
	gap: var(--flex-gap);
}

@media screen and (max-width: 1440px) {
	.second-flex {
		--flex-items: 5;
	}
}

@media screen and (max-width: 1159px) {
	.second-flex {
		--flex-items: 4;
	}
}

@media screen and (max-width: 991px) {
	.second-flex {
		--flex-items: 3;
	}
}

@media screen and (max-width: 568px) {
	.second-flex {
		--flex-items: 2;
		--flex-gap: 10px;
		gap: 20px var(--flex-gap);
	}
}

.second-flex .thumb {
	width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
	position: relative;
}

.second-flex .thumb .checkbox-label {
    position: absolute;
    z-index: 3;
    left: 10px;
    top: 10px;
}

.primary-flex {
	--flex-gap: 20px;
	--flex-items: 7;
	display: flex;
	flex-wrap: wrap;
	gap: 50px var(--flex-gap);
}

@media screen and (max-width: 1680px) {
	.primary-flex {
		--flex-items: 6;
	}
}

@media screen and (max-width: 1366px) {
	.primary-flex {
		--flex-items: 5;
	}
}

@media screen and (max-width: 991px) {
	.primary-flex {
		--flex-items: 4;
		gap: 30px var(--flex-gap);
	}
}

@media screen and (max-width: 767px) {
	.primary-flex {
		--flex-items: 3;
	}
}

@media screen and (max-width: 568px) {
	.primary-flex {
		--flex-items: 2;
	}
}

@media screen and (max-width: 374px) {
	.primary-flex {
		--flex-gap: 15px;
	}
}

.primary-flex .thumb {
	width: 14.285%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
	position: relative;
}

.primary-flex .thumb.unread .image {
	border: 6px solid #138000;
}

.primary-flex .thumb .checkbox-label {
	position: absolute;
	z-index: 3;
	left: 10px;
	top: 10px;
}

.wrap-card {
	position: relative;
	width: 100%;
}

.wrap-card.second .checkbox-label {
	left: 0;
	top: 0;
}

.wrap-card .checkbox-label {
	position: absolute;
	z-index: 3;
	left: 10px;
	top: 10px;
}

.card {
	color: var(--color-main);
	transition: color .3s;
	position: relative;
}

@media screen and (min-width: 1025px) {
	.card:hover {
		color: var(--color-active);
	}
}

.card .media {
	position: relative;
	padding-bottom: 56.045%;
	border-radius: 10px;
	overflow: hidden;
}

.card img, .card video {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.card .content {
	margin-top: 15px;
}

@media screen and (max-width: 767px) {
	.card .content {
		margin-top: 10px;
	}
}

.card .title {
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card .list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px 10px;
	margin-top: 10px;
}

.card .item {
	display: flex;
	align-items: center;
	color: var(--color-second);
	font-size: 12px;
	gap: 5px;
}

.card svg {
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 14px;
}

.sticky {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	gap: 5px;
	z-index: 3;
	right: 10px;
	bottom: 10px;
}

.sticky .box {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	border-radius: 8px;
	padding: 4px 7px;
	-webkit-backdrop-filter: blur(15px);
	        backdrop-filter: blur(15px);
	background: var(--bg-sticky);
	color: var(--color-main);
}

.sticky .box.second {
	font-weight: 700;
	background: var(--bg-quality);
	color: var(--color-white);
}

.wrap-btn {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

.view-more {
	font-weight: 700;
	font-size: 14px;
	color: var(--color-second);
	padding: 12px 50px;
	background: var(--bg-tools);
	border: none;
	cursor: pointer;
	border-radius: 10px;
	transition: color .3s, background .3s;
}

@media screen and (min-width: 1025px) {
	.view-more:hover {
		background: var(--bg-active);
		color: var(--color-white);
	}
}

.card-model img, .card-model video,
.card-model-second img,
.card-model-second video {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.card-model .list,
.card-model-second .list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	font-size: 12px;
	color: var(--color-second);
	gap: 5px 10px;
	margin-top: 10px;
}

.card-model .list svg,
.card-model-second .list svg {
	font-size: 14px;
}

.card-model .list .box,
.card-model-second .list .box {
	display: flex;
	align-items: center;
	gap: 3px;
}

.card-model {
	color: var(--color-main);
	font-size: 16px;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.card-model:hover {
		color: var(--color-active);
	}
}

.card-model .title {
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-model .media {
	position: relative;
	padding-bottom: 132.812%;
	border-radius: 10px;
	overflow: hidden;
}

.card-model .content {
	margin-top: 15px;
}

.card-model-second {
	position: relative;
	padding-bottom: 132.812%;
	border-radius: 10px;
	overflow: hidden;
	display: block;
	color: var(--color-main);
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.card-model-second:hover {
		color: var(--color-active);
	}
}

.card-model-second .list {
	justify-content: center;
}

.card-model-second .content {
	position: absolute;
	z-index: 4;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	padding: 6px;
	background: var(--bg-card);
	-webkit-backdrop-filter: blur(15px);
	        backdrop-filter: blur(15px);
}

.categories-list {
	-moz-column-count: 3;
	     column-count: 3;
	font-size: 14px;
	width: 100%;
	-moz-column-width: 160px;
	     column-width: 160px;
	font-weight: 700;
	gap: 7.625em;
}

@media screen and (max-width: 767px) {
	.categories-list {
		gap: 3.5em;
	}
}

.categories-list .item {
	margin-bottom: 20px;
}

.categories-list .item:last-child {
	margin-bottom: 0;
}

.categories-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-main);
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.categories-list a:hover {
		color: var(--color-active);
	}
	.categories-list a:hover span:last-child {
		color: var(--color-active);
	}
}

.categories-list a span:first-child {
	flex-grow: 1;
	flex-shrink: 1;
}

.categories-list a span:last-child {
	transition: color .3s;
	font-weight: 400;
	flex-grow: 0;
	flex-shrink: 0;
	color: var(--color-second);
}

.pagination-list {
	display: flex;
	margin-top: 30px;
	justify-content: center;
}

@media screen and (max-width: 767px) {
	.pagination-list {
		margin-top: 20px;
	}
}

.pagination-list .list {
	display: flex;
}

.pagination-list .list .item {
	margin-left: 10px;
}

@media screen and (max-width: 767px) {
	.pagination-list .list .item {
		display: none;
	}
}

.pagination-list .list .item:first-child {
	margin: 0;
}

@media screen and (max-width: 767px) {
	.pagination-list .list .item.active {
		display: block;
		margin: 0;
	}
}

.pagination-list .list .item.active a, .pagination-list .list .item.active span {
	border-radius: 10px;
	pointer-events: none;
	color: var(--color-white);
	background: var(--color-active);
}

.pagination-list a, .pagination-list span {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	height: 40px;
	min-width: 40px;
	border-radius: 10px;
	background: var(--bg-tools);
	color: var(--color-second);
	font-size: 14px;
	transition: color .3s, background .3s;
}

@media screen and (min-width: 1025px) {
	.pagination-list a:hover {
		background: var(--color-active);
		color: var(--color-white);
	}
}

.pagination-list .item.pager {
	display: flex;
	align-items: center;
}

.pagination-list .item.pager svg {
	font-size: 10px;
}

.pagination-list .item.pager:first-child {
	margin-right: 20px;
}

.pagination-list .item.pager:last-child {
	margin-left: 20px;
}

.pagination-list .dots a {
	background: none;
	display: flex;
	color: var(--color-second);
	justify-content: center;
	align-items: center;
	min-width: 22px;
	padding: 0 5px;
	height: 100%;
}

@media screen and (min-width: 1025px) {
	.pagination-list .dots a:hover {
		color: var(--color-active);
	}
}

.alphabet-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 20px;
	gap: 5px;
}

.alphabet-list.second {
	margin-bottom: 10px;
}

@media screen and (max-width: 568px) {
	.alphabet-list {
		gap: 10px;
	}
}

.alphabet-list .item.active a {
	background: var(--color-active);
	color: var(--color-white);
}

.alphabet-list a {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-second);
	font-size: 14px;
	font-weight: 700;
	border-radius: 10px;
	padding: 0 5px;
	min-width: 40px;
	height: 40px;
	background: var(--bg-tools);
	transition: color .3s, background .3s;
}

@media screen and (min-width: 1025px) {
	.alphabet-list a:hover {
		background: var(--color-active);
		color: var(--color-white);
	}
}

.letter {
	background: var(--bg-tools);
	color: var(--color-active);
	padding: 8px 17px 6px;
	margin-bottom: 20px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

.tags-box {
	margin-bottom: 30px;
}

.tags-box:last-child {
	margin-bottom: 0;
}

.tags-box .categories-list {
	padding-left: 20px;
}

.twocolumns {
	display: flex;
	gap: 20px;
}

.twocolumns .column {
	--width: 75%;
	width: calc(var(--width) + 10px);
}

@media screen and (max-width: 1159px) {
	.twocolumns .column {
		--width: 66.666%;
	}
}

@media screen and (max-width: 991px) {
	.twocolumns .column {
		--width: 100%;
	}
}

.twocolumns .column.second {
	--second-width: 25%;
	width: calc(var(--second-width) - 10px);
}

@media screen and (max-width: 1159px) {
	.twocolumns .column.second {
		--second-width: 33.333%;
	}
}

@media screen and (max-width: 991px) {
	.twocolumns .column.second {
		display: none;
	}
}

.twocolumns .row,
.album-wrapped .row {
	margin-bottom: 30px;
	width: 100%;
}

.twocolumns .row:last-child,
.album-wrapped .row:last-child {
	margin-bottom: 0;
}

.twocolumns .row-box,
.album-wrapped .row-box {
	margin-bottom: 20px;
}

.twocolumns .row-box:last-child,
.album-wrapped .row-box:last-child {
	margin-bottom: 0;
}

.player {
	border-radius: 10px;
	width: 100%;
	overflow: hidden;
	position: relative;
	padding-bottom: 56.09%;
}

@media screen and (max-width: 479px) {
	.player {
		padding-bottom: 0;
		min-height: 220px;
	}
}

.player img {
	position: absolute;
	bottom: 0;
	height: 100%;
	left: 0;
	-o-object-fit: cover;
	   object-fit: cover;
	right: 0;
	top: 0;
	width: 100%;
}

.play-btn {
	position: absolute;
	z-index: 3;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0) scale(1);
	width: 100px;
	height: 100px;
	background: var(--bg-play-btn);
	color: var(--color-white);
	font-size: 35px;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .3s;
	border: none;
	cursor: pointer;
}

@media screen and (min-width: 1025px) {
	.play-btn:hover {
		transform: translate3d(-50%, -50%, 0) scale(1.1);
	}
}

@media screen and (max-width: 767px) {
	.play-btn {
		width: 60px;
		height: 60px;
		font-size: 21px;
	}
}

.player-tools {
	margin-top: 20px;
}

.player-tools .wrapped {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: space-between;
}

@media screen and (max-width: 767px) {
	.player-tools .wrapped {
		flex-direction: column;
	}
}

.player-tools .description {
	line-height: 1.5;
}

.player-tools .col {
	gap: 5px;
}

@media screen and (max-width: 767px) {
	.player-tools .col {
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	.player-tools .col.primary .item {
		width: 25%;
	}
}

@media screen and (max-width: 767px) {
	.player-tools .col.primary .button {
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	.player-tools .col.indent .item {
		width: 33.3333%;
	}
}

@media screen and (max-width: 767px) {
	.player-tools .col.indent .button {
		width: 100%;
	}
}

.player-tools .col.second {
	gap: 10px;
}

@media screen and (max-width: 767px) {
	.player-tools .col.second {
		display: flex;
		justify-content: space-between;
	}
}

@media screen and (max-width: 390px) {
	.player-tools .col.second {
		flex-wrap: wrap;
	}
}

.player-tools .col.secondary {
	gap: 10px;
}

@media screen and (max-width: 767px) {
	.player-tools .col.secondary {
		display: flex;
		justify-content: space-between;
	}
}

@media screen and (max-width: 390px) {
	.player-tools .col.secondary {
		flex-wrap: wrap;
		justify-content: center;
	}
}

.player-tools .group {
	gap: 10px;
}

.player-tools .group,
.player-tools .list,
.player-tools .col {
	display: flex;
	align-items: center;
}

.player-tools .content {
	margin-top: 20px;
}

.player-tools .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--bg-tools);
	color: var(--color-second);
	cursor: pointer;
	border-radius: 10px;
	font-size: 14px;
	padding: 10px;
	transition: color .3s, background .3s;
	border: none;
}

.player-tools .button.active {
	background: var(--bg-active);
    color: var(--color-white);
}

@media screen and (min-width: 1025px) {
	.player-tools .button:hover {
		background: var(--bg-active);
		color: var(--color-white);
	}
}

.player-tools .button.second {
	padding: 10px 15px;
}

.player-tools .button svg {
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 20px;
}

.player-tools .list {
	display: flex;
	align-items: center;
	color: var(--color-second);
	font-size: 14px;
	gap: 10px;
}

.player-tools .list svg {
	font-size: 16px;
}

.player-tools .list .item {
	display: flex;
	align-items: center;
	gap: 5px;
}

.btn-hidden {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	padding: 12px 20px;
	color: var(--color-white);
	background: var(--bg-active);
	border: none;
	cursor: pointer;
	font-size: 14px;
	transition: background .3s;
	margin-top: 20px;
}

@media screen and (min-width: 1025px) {
	.btn-hidden:hover {
		background: var(--bg-second-active);
	}
}

.btn-hidden::before {
	content: attr(data-attr-show);
	font-weight: 700;
}

.btn-hidden.show::before {
	content: attr(data-attr-hidden);
}

.author-box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px 30px;
}

.author-box .author {
	display: flex;
	align-items: center;
	gap: 10px;
}

@media screen and (min-width: 1025px) {
	.author-box .author:hover .name {
		color: var(--color-active);
	}
}

.author-box .image {
	flex-grow: 0;
	flex-shrink: 0;
	width: 50px;
	height: 50px;
	font-size: 20px;
	color: var(--color-second);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.author-box img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	max-width: 100%;
		border-radius: 50%;
}

.author-box .image svg {
	font-size: 30px;
}

.author-box .name {
	color: var(--color-main);
	transition: color .3s;
}

.name-list {
	display: inline-block;
	vertical-align: top;
	padding: 13px 0;
	line-height: 1.25;
	margin-right: 5px;
}

.video-list {
	display: inline;
	font-size: 0;
}

.video-list .item {
	display: inline-block;
	vertical-align: top;
	padding: 5px;
}

.video-list a {
	display: block;
	color: var(--color-second);
	background: var(--bg-tools);
	text-transform: capitalize;
	border-radius: 10px;
	padding: 10px 20px;
	font-weight: 700;
	font-size: 14px;
	transition: color .3s, background .3s;
}

@media screen and (min-width: 1025px) {
	.video-list a:hover {
		color: var(--color-white);
		background: var(--bg-active);
	}
}

.comment-box.second,
.comments-list.second {
	padding: 0 20px;
}

@media screen and (max-width: 767px) {
	.comment-box.second,
	.comments-list.second {
		padding: 0;
	}
}

.comment-wrap .content,
.comment-box .content {
	flex-shrink: 1;
	flex-grow: 1;
}

.comment-box {
	padding-top: 50px;
}

@media screen and (max-width: 767px) {
	.comment-box {
		padding-top: 30px;
	}
}

.comment-box.active .form-box {
	display: block;
}

.comment-box.second {
	padding-top: 20px;
	margin-top: -20px;
}

@media screen and (max-width: 767px) {
	.comment-box.second {
		padding-top: 30px;
		margin-top: -30px;
	}
}

.comment-box.primary {
	padding-top: 20px;
	margin-top: -20px;
}

@media screen and (max-width: 767px) {
	.comment-box.primary {
		padding-top: 30px;
		margin-top: -30px;
	}
}

.comment-box .form-box {
	display: none;
	margin-bottom: 30px;
}

.bottom-tools {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	width: 100%;
}

@media screen and (max-width: 991px) {
	.bottom-tools {
		flex-direction: column;
		align-items: flex-end;
	}
}

@media screen and (max-width: 767px) {
	.bottom-tools {
		margin-top: 20px;
	}
}

.bottom-tools::before {
	content: "";
	flex: 1 1 0;
}

@media screen and (max-width: 1366px) {
	.bottom-tools::before {
		display: none;
	}
}

.bottom-tools .pagination-list {
	margin: 0;
	flex: 1 1 0;
}

@media screen and (max-width: 991px) {
	.bottom-tools .pagination-list {
		width: 100%;
		justify-content: center;
	}
}

.bottom-tools .bottom-section {
	flex: 1 1 0;
	margin: 0;
}

.bottom-section {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
	margin-top: 30px;
}

@media screen and (max-width: 767px) {
	.bottom-section {
		margin-top: 20px;
	}
}

.more-button {
	line-height: 1;
	padding: 11px 20px;
	font-weight: 700;
	font-size: 14px;
	color: var(--color-second);
	background: var(--bg-tools);
	cursor: pointer;
	display: inline-block;
	vertical-align: top;
	transition: color .3s, background .3s;
	border-radius: 10px;
	border: none;
	font-family: inherit;
}

@media screen and (min-width: 1025px) {
	.more-button:hover {
		background: var(--bg-active);
		color: var(--color-white);
	}
}

.more-button.second {
	background: var(--bg-active);
	color: var(--color-white);
}

.more-button.second input, .more-button input {
	border: none;
	height: 0;
	width: 0;
}

.more-button.second input:disabled, .more-button input:disabled {
	opacity: .8;
}

@media screen and (min-width: 1025px) {
	.more-button.second:hover {
		background: var(--bg-second-active);
		color: var(--color-white);
	}
	.more-button.second input:disabled:hover {
		background: var(--bg-active);
		color: var(--color-white);
	}
	.more-button input:disabled:hover {
		color: var(--color-second);
		background: var(--bg-tools);
	}
}

.comments-headline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin-bottom: 20px;
}

.comments-headline .title {
	font-weight: 700;
	font-size: 26px;
}

@media screen and (max-width: 1159px) {
	.comments-headline .title {
		font-size: 24px;
	}
}

@media screen and (max-width: 767px) {
	.comments-headline .title {
		font-size: 20px;
	}
}

.btn-add-comments {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-grow: 0;
	flex-shrink: 0;
	font-weight: 700;
	border-radius: 10px;
	padding: 12px 20px;
	color: var(--color-white);
	background: var(--bg-active);
	border: none;
	cursor: pointer;
	font-size: 14px;
	transition: background .3s;
}

.smileys-bar img{
	width: auto;
	height: 32px;
	padding: 2px;
}

@media screen and (min-width: 1025px) {
	.btn-add-comments:hover {
		background: var(--bg-second-active);
	}
}

.form-box {
	max-width: 1000px;
}

.form-box .box {
	margin-bottom: 10px;
}

.form-box .box:last-child {
	margin-bottom: 0;
}

.form-box input,
.form-box textarea {
	width: 100%;
	border: 1px solid var(--border-search);
	border-radius: 10px;
	background: var(--bg-tools);
	font-weight: 400;
	font-size: 14px;
	color: var(--color-main);
}

.form-box input {
	height: 40px;
	padding: 10px 20px;
	max-width: 400px;
}

.form-box textarea {
	resize: none;
	height: 100px;
	padding: 20px;
	display: block;
}

.form-box .btn {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	border-radius: 10px;
	padding: 12px 20px;
	color: var(--color-white);
	background: var(--bg-active);
	border: none;
	cursor: pointer;
	font-size: 14px;
	transition: background .3s;
	width: fit-content !important;
}

@media screen and (min-width: 1025px) {
	.form-box .btn:hover {
		background: var(--bg-second-active);
	}
}

.comments-list .ava {
	flex-grow: 0;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	overflow: hidden;
	font-size: 20px;
	color: var(--color-second);
	background: var(--bg-tools);
	display: flex;
	align-items: center;
	justify-content: center;
}

.comments-list img {
	max-width: 100%;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.comments-item {
	margin-bottom: 30px;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.comments-item:last-child {
	margin-bottom: 0;
}

.comment-wrap {
	display: flex;
	gap: 10px;
	flex-grow: 1;
	flex-shrink: 1;
}

.content-comment {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.content-comment .wrap {
	max-width: 950px;
	width: 100%;
}

.comment-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.comment-info .username {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.02em;
	color: var(--color-main);
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.comment-info .username:hover {
		color: var(--color-active);
	}
}

.comment-info .date {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	color: var(--color-second);
}

.comment-info .date svg {
	font-size: 16px;
	flex-grow: 0;
	flex-shrink: 0;
}

.user-comment .wrapped {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
}

.user-comment .group {
	display: flex;
	align-items: center;
	gap: 10px;
}

.user-comment .button {
	font-size: 14px;
	color: var(--color-second);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.user-comment .button:hover {
		color: var(--color-active);
	}
}

.user-comment .button svg {
	font-size: 14px;
	flex-grow: 0;
	flex-shrink: 0;
}

.checkbox-label {
	flex-grow: 0;
	flex-shrink: 0;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 5px 10px;
	vertical-align: top;
	align-items: center;
	cursor: pointer;
}

.checkbox-label.second {
	justify-content: center;
}

.checkbox-label .checkbox {
	display: inline-flex;
	vertical-align: top;
	position: relative;
	width: 20px;
	background: var(--bg-tools);
	border: 1px solid var(--color-second);
	transition: background .2s, border .2s;
	border-radius: 5px;
	height: 20px;
}

.checkbox-label .checkbox::after {
	content: "";
	position: absolute;
	opacity: 0;
	transition: opacity .2s;
	left: 6px;
	top: 3px;
	width: 7px;
	height: 10px;
	border: solid var(--color-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.checkbox-input {
	display: none;
}

.checkbox-input:checked + .checkbox {
	background: var(--bg-active);
	border: 1px solid var(--bg-active);
}

.checkbox-input:checked + .checkbox::after {
	opacity: 1;
}

.btn-answer {
	display: flex;
	align-items: center;
	border-radius: 10px;
	padding: 8px 10px;
	font-weight: 700;
	font-size: 12px;
	border: none;
	background: var(--bg-tools);
	color: var(--color-second);
	cursor: pointer;
	transition: color .3s, background .3s;
	width: fit-content;
}

@media screen and (min-width: 1025px) {
	.btn-answer:hover {
		background: var(--bg-active);
		color: var(--color-white);
	}
}

.answer-wrapped {
	margin-top: 30px;
	padding-left: 10px;
	position: relative;
}

@media screen and (max-width: 767px) {
	.answer-wrapped {
		margin-top: 20px;
	}
}

.answer-wrapped::before {
	position: absolute;
	content: '';
	height: 100%;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--bg-tools);
}

.answer-wrapped .comments-item {
	margin-bottom: 25px;
}

.answer-wrapped .content {
	width: 100%;
}

.answer-wrapped .wrap {
	max-width: 890px;
}

.screen-box {
	--flex-gap: 10px;
	--flex-items: 5;
	display: flex;
	flex-wrap: wrap;
	gap: var(--flex-gap);
	margin-top: 20px;
}


@media screen and (max-width: 1159px) {
	.screen-box {
		--flex-items: 4;
	}
}

@media screen and (max-width: 767px) {
	.screen-box {
		--flex-items: 3;
	}
}

@media screen and (max-width: 479px) {
	.screen-box {
		--flex-items: 2;
	}
}

.screen-box.hidden {
	display: none;
}

.screen-box .box {
	width: calc((100% / var(--flex-items)) - (((var(--flex-items) - 1) / var(--flex-items)) * var(--flex-gap)));
}

.screen-card {
	position: relative;
	padding-bottom: 56.045%;
	border-radius: 10px;
	overflow: hidden;
	display: block;
}

.screen-card img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.wrapped-slider {
	display: flex;
	flex-direction: column;
}

.gallery {
	flex-shrink: 1;
	flex-grow: 1;
	height: 100%;
	min-height: 1px;
	margin-bottom: 20px;
	max-height: calc(100vh - 288px - 20px);
	aspect-ratio: 16 / 9;
	max-width: 100%;
}

.swiper-album {
	width: 100%;
	height: 100%;
}

.swiper-album .swiper-wrapper {
	align-items: center;
}

.swiper-album .image {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
}

.swiper-album img {
	display: block;
	height: 100%;
	-o-object-fit: contain;
	   object-fit: contain;
	border-radius: 10px;
	overflow: hidden;
}

.thumbnails {
	flex-shrink: 0;
	flex-grow: 0;
	position: relative;
}

.thumbs-list-nail {
	width: 100%;
	height: 100%;
}

.thumbs-list-nail .image {
	position: relative;
	aspect-ratio: 0.5;
	width: 100%;
	max-height: 150px;
	height: 100%;
	cursor: pointer;
	transition: opacity .3s;
}

@media screen and (min-width: 1025px) {
	.thumbs-list-nail .image:hover {
		opacity: .8;
	}
}

@media screen and (max-width: 767px) {
	.thumbs-list-nail .image {
		max-height: 120px;
	}
}

.thumbs-list-nail img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	border-radius: 10px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.swiper-btn-album-prev,
.swiper-btn-album-next,
.btn-album-nails-prev,
.btn-album-nails-next,
.swiper-community-prev,
.swiper-community-next {
	background: var(--bg-active);
	color: var(--color-white);
	margin: 0;
	top: 50%;
	transform: translate3d(0, -50%, 0);
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .3s;
	z-index: 2;
}

@media screen and (min-width: 1025px) {
	.swiper-btn-album-prev:hover,
	.swiper-btn-album-next:hover,
	.btn-album-nails-prev:hover,
	.btn-album-nails-next:hover,
	.swiper-community-prev:hover,
	.swiper-community-next:hover {
		background: var(--bg-second-active);
	}
}

.swiper-btn-album-prev::after,
.swiper-btn-album-next::after,
.btn-album-nails-prev::after,
.btn-album-nails-next::after,
.swiper-community-prev::after,
.swiper-community-next::after {
	display: none;
}

.swiper-btn-album-prev svg,
.swiper-btn-album-next svg,
.btn-album-nails-prev svg,
.btn-album-nails-next svg,
.swiper-community-prev svg,
.swiper-community-next svg {
	display: inline-block;
	vertical-align: top;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.swiper-btn-album-prev.swiper-button-disabled,
.swiper-btn-album-next.swiper-button-disabled,
.btn-album-nails-prev.swiper-button-disabled,
.btn-album-nails-next.swiper-button-disabled,
.swiper-community-prev.swiper-button-disabled,
.swiper-community-next.swiper-button-disabled {
	display: none;
}

.btn-album-nails-prev,
.btn-album-nails-next,
.swiper-community-prev,
.swiper-community-next {
	width: 50px;
	height: 50px;
	font-size: 16px;
}

@media screen and (max-width: 767px) {
	.btn-album-nails-prev,
	.btn-album-nails-next,
	.swiper-community-prev,
	.swiper-community-next {
		width: 30px;
		height: 30px;
		font-size: 9px;
	}
}

.swiper-community-prev,
.swiper-community-next {
	top: calc(50% - 34px);
}

@media screen and (max-width: 767px) {
	.swiper-community-prev,
	.swiper-community-next {
		display: none;
	}
}

.swiper-community-prev {
	left: 0;
}

.swiper-community-next {
	right: 0;
}

.btn-album-nails-prev {
	left: 10px;
}

@media screen and (max-width: 767px) {
	.btn-album-nails-prev {
		left: 6px;
	}
}

.btn-album-nails-next {
	right: 10px;
}

@media screen and (max-width: 767px) {
	.btn-album-nails-next {
		right: 6px;
	}
}

.swiper-btn-album-prev,
.swiper-btn-album-next {
	width: 70px;
	height: 70px;
	font-size: 20px;
}

@media screen and (max-width: 767px) {
	.swiper-btn-album-prev,
	.swiper-btn-album-next {
		width: 40px;
		height: 40px;
		font-size: 14px;
	}
}

.swiper-btn-album-prev {
	left: 20px;
}

@media screen and (max-width: 767px) {
	.swiper-btn-album-prev {
		left: 10px;
	}
}

.swiper-btn-album-next {
	right: 20px;
}

@media screen and (max-width: 767px) {
	.swiper-btn-album-next {
		right: 10px;
	}
}

.general-box {
	background: var(--bg-tools);
	margin-bottom: 0;
}

.about-hold {
	display: flex;
	padding: 20px 0;
}

@media screen and (max-width: 991px) {
	.about-hold {
		flex-direction: column;
	}
}

.about-hold .video-list a {
	background: var(--border-color);
}

@media screen and (min-width: 1025px) {
	.about-hold .video-list a:hover {
		color: var(--color-white);
		background: var(--bg-active);
	}
}

.posted {
	flex-grow: 0;
	flex-shrink: 0;
	margin-right: 20px;
	max-width: 296px;
	overflow: hidden;
	width: 100%;
}

@media screen and (max-width: 991px) {
	.posted {
		margin: 0 auto;
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 991px) {
	.posted.second {
		margin-bottom: 30px;
	}
}

.posted .wrap {
	position: relative;
	padding-bottom: 100%;
	border-radius: 100%;
	overflow: hidden;
}

.posted .wrap.second {
	padding-bottom: 133.11%;
	border-radius: 10px;
}

.posted .image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.viewlist {
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	flex-direction: column;
}

.viewlist .description {
	color: var(--color-second);
	line-height: 1.5;
}

.viewlist .main-content {
	flex-grow: 1;
	flex-shrink: 1;
}

.about-headline {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	gap: 20px;
}

@media screen and (max-width: 991px) {
	.about-headline.second {
		align-items: center;
	}
}

@media screen and (max-width: 479px) {
	.about-headline.second {
		flex-wrap: wrap;
		justify-content: center;
	}
}

@media screen and (max-width: 479px) {
	.about-headline.second .group {
		width: calc(100% - 154px);
	}
}

@media screen and (max-width: 479px) {
	.about-headline.second .group .item {
		width: 50%;
	}
}

@media screen and (max-width: 479px) {
	.about-headline.second .col.second {
		width: 100%;
		flex-grow: 1;
		flex-shrink: 1;
	}
}

@media screen and (max-width: 991px) {
	.about-headline.second .col.primary {
		justify-content: center;
		align-items: center;
	}
}

@media screen and (max-width: 991px) {
	.about-headline.primary {
		align-items: center;
	}
}

@media screen and (max-width: 479px) {
	.about-headline.primary {
		flex-direction: column;
	}
}

@media screen and (max-width: 991px) {
	.about-headline {
		align-items: flex-start;
	}
}

@media screen and (max-width: 390px) {
	.about-headline {
		flex-wrap: wrap;
		justify-content: center;
	}
}

.about-headline .col {
	flex-grow: 1;
	flex-shrink: 1;
	gap: 20px 30px;
}

@media screen and (max-width: 991px) {
	.about-headline .col.primary {
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}
}

@media screen and (max-width: 390px) {
	.about-headline .col.primary {
		align-items: center;
		flex-direction: row;
	}
}

.about-headline .col.second {
	flex-grow: 0;
	flex-shrink: 0;
	gap: 20px 5px;
}

.about-headline .title {
	font-weight: 700;
	font-size: 22px;
}

.about-headline .group,
.about-headline .box {
	gap: 5px;
}

.about-headline .col,
.about-headline .group,
.about-headline .box {
	display: flex;
	align-items: center;
}

.about-headline .list {
	margin-top: 3px;
	display: flex;
	align-items: center;
	color: var(--color-second);
	font-size: 12px;
	gap: 10px;
}

.about-headline .list svg {
	font-size: 14px;
	flex-grow: 0;
	flex-shrink: 0;
	display: block;
}

.about-headline .button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--border-color);
	color: var(--color-second);
	cursor: pointer;
	border-radius: 10px;
	font-size: 14px;
	padding: 10px;
	transition: color .3s, background .3s;
	border: none;
}

@media screen and (min-width: 1025px) {
	.about-headline .button:hover {
		background: var(--bg-active);
		color: var(--color-white);
	}
}

@media screen and (max-width: 479px) {
	.about-headline .button {
		width: 100%;
	}
}

.about-headline .button.second {
	padding: 10px 15px;
}

.about-headline .button svg {
	font-size: 20px;
}

.btn-sbsc {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	border: none;
	background: none;
	min-width: 154px;
	background: var(--bg-active);
	color: var(--color-white);
	padding: 0 0 0 15px;
	height: 40px;
	border-radius: 10px;
	overflow: hidden;
	transition: background .3s ease;
}

.btn-sbsc div {
	background: var(--border-color);
	color: var(--color-second);
	height: 40px;
	display: flex;
	align-items: center;
	padding: 0 15px;
	margin-left: auto;
}

.btn-sbsc.done {
	background: #b5000f;
}

@media screen and (min-width: 1025px) {
	.btn-sbsc:hover {
		background: #b5000f;
	}
}

.btn-sbsc span:first-child {
	padding: 12px 15px;
	background: var(--bg-active);
	color: var(--color-white);
	border-radius: 10px 0 0 10px;
}

.btn-sbsc span:last-child {
	background: var(--border-color);
	color: var(--color-second);
	padding: 12px;
	transition: color .3s, background .3s;
	border-radius: 0 10px 10px 0 !important;
	display: flex;
}

.list-box {
	-moz-column-count: 3;
	     column-count: 3;
	gap: 6.25em;
	color: var(--color-main);
	margin-bottom: 15px;
}

@media screen and (max-width: 1159px) {
	.list-box {
		-moz-column-count: 2;
		     column-count: 2;
	}
}

@media screen and (max-width: 479px) {
	.list-box {
		gap: 0;
	}
}

.list-box li {
	margin-bottom: 20px;
}

.list-box li:last-child {
	margin-bottom: 0;
}

.list-box li span:first-child {
	color: var(--color-second);
}

@media screen and (max-width: 767px) {
	.list-box li span:first-child {
		text-transform: capitalize;
	}
}

@media screen and (max-width: 767px) {
	.list-box li span span {
		display: none;
	}
}

.wrap-list {
	margin-bottom: 10px;
}

.wrap-list.second {
	margin-bottom: 15px;
}

.wrap-btn-more {
	margin-top: 20px;
}

.show-more {
	border-radius: 15px;
	background: var(--bg-active);
	padding: 10px 20px;
	min-height: 40px;
	color: var(--color-white);
	border: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background .3s;
}

@media screen and (min-width: 1025px) {
	.show-more:hover {
		background: var(--bg-second-active);
	}
}

.show-more.active span::before {
	content: attr(data-attr-btn-active);
}

.show-more span::before {
	content: attr(data-attr-btn);
}

[data-attr-none] {
	display: none;
}

[data-attr-description] {
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
}

[data-attr-description].expanded {
	-webkit-line-clamp: unset;
	-webkit-box-orient: unset;
	display: block;
	overflow: visible;
	text-overflow: clip;
}

.wrapped-tabs {
	flex-grow: 0;
	flex-shrink: 0;
}

.tabs-box {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 20px;
}

@media screen and (max-width: 991px) {
	.tabs-box {
		overflow: hidden;
		overflow-x: auto;
		margin: 20px -20px 0 -20px;
		padding: 0 20px;
		white-space: nowrap;
		flex-wrap: nowrap;
	}
}

@media screen and (max-width: 767px) {
	.tabs-box {
		margin: 20px -10px 0 -10px;
		padding: 0 10px;
	}
}

.tabs-box::-webkit-scrollbar {
	display: none;
}

.tabs-box .item.active .tabs-link {
	color: var(--color-white);
	background: var(--bg-active);
}

.tabs-link {
	display: block;
	padding: 12px 30px;
	background: var(--border-color);
	color: var(--color-second);
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	transition: color .3s, background .3s;
}

@media screen and (min-width: 1025px) {
	.tabs-link:hover {
		color: var(--color-white);
		background: var(--bg-active);
	}
}

.tab-contents {
	display: none;
	margin-top: 20px;
}

@media screen and (max-width: 767px) {
	.tab-contents {
		margin-top: 30px;
	}
}

.tab-contents.selected {
	display: block;
}

[data-attr-favorite].active,
[data-attr-reaction].active {
	background: var(--bg-active);
	color: var(--color-white);
}

.friends-card {
	max-width: 200px;
	width: 100%;
	text-align: center;
	display: block;
}

@media screen and (min-width: 1025px) {
	.friends-card:hover .title {
		color: var(--color-active);
	}
}

@media screen and (max-width: 1159px) {
	.friends-card {
		max-width: 160px;
	}
}

@media screen and (max-width: 374px) {
	.friends-card {
		max-width: 140px;
	}
}

.friends-card .image {
	position: relative;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg-tools);
	font-size: 100px;
	border-radius: 100%;
	overflow: hidden;
	color: var(--color-second);
}

@media screen and (max-width: 1159px) {
	.friends-card .image {
		height: 160px;
		font-size: 80px;
	}
}

@media screen and (max-width: 374px) {
	.friends-card .image {
		height: 140px;
		font-size: 70px;
	}
}

.friends-card .title {
	margin-top: 20px;
}

.friends-card .date {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-second);
	font-size: 12px;
	gap: 3px;
	margin-top: 6px;
}

.friends-card .date svg {
	font-size: 14px;
}

@media screen and (min-width: 1025px) {
	.playlist-card:hover .title {
		color: var(--color-active);
	}
	.playlist-card:hover .amount {
		background: var(--bg-card-playlist-active);
	}
}

.playlist-card .media {
	position: relative;
	padding-bottom: 56.045%;
	border-radius: 10px;
	overflow: hidden;
}

.playlist-card .title {
	margin-top: 15px;
	transition: color .3s;
}

.playlist-card img,
.friends-card img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	overflow: hidden;
}

.playlist-card .title,
.friends-card .title {
	color: var(--color-main);
	transition: color .3s;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
}

.playlist-card .amount,
.friends-card .amount {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 90px;
	-webkit-backdrop-filter: blur(15px);
	        backdrop-filter: blur(15px);
	background: var(--bg-card-playlist);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--color-main);
	transition: background .3s;
}

.playlist-card .amount svg,
.friends-card .amount svg {
	font-size: 30px;
	margin-bottom: 10px;
}

.top-panel {
	margin-bottom: 30px;
	padding: 20px;
	border-radius: 10px;
	background: var(--bg-tools);
}

@media screen and (max-width: 767px) {
	.top-panel {
		margin-bottom: 20px;
	}
}

.wrap-cols {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	justify-content: center;
	margin: -10px;
}

.wrap-cols .col {
	padding: 10px;
	width: 20%;
}

@media screen and (max-width: 1366px) {
	.wrap-cols .col {
		width: 33.33333%;
	}
}

@media screen and (max-width: 640px) {
	.wrap-cols .col {
		width: 100%;
	}
}

.wrap-cols .col.second {
	width: 40%;
}

@media screen and (max-width: 1366px) {
	.wrap-cols .col.second {
		width: 66.666666%;
	}
}

@media screen and (max-width: 640px) {
	.wrap-cols .col.second {
		width: 100%;
	}
}

@media screen and (max-width: 1366px) {
	.wrap-cols .col.primary {
		width: 50%;
	}
}

@media screen and (max-width: 640px) {
	.wrap-cols .col.primary {
		width: 100%;
	}
}

.wrap-cols .group {
	display: flex;
	align-items: center;
	margin: -10px;
}

@media screen and (max-width: 640px) {
	.wrap-cols .group {
		margin: -5px;
	}
}

@media screen and (max-width: 374px) {
	.wrap-cols .group {
		flex-direction: column;
	}
}

@media screen and (max-width: 640px) {
	.wrap-cols .group.second {
		flex-direction: column;
	}
}

.wrap-cols .group.second .box {
	width: 40%;
}

@media screen and (max-width: 640px) {
	.wrap-cols .group.second .box {
		width: 100%;
	}
}

.wrap-cols .group.second .box.second {
	width: 60%;
}

@media screen and (max-width: 640px) {
	.wrap-cols .group.second .box.second {
		width: 100%;
	}
}

.wrap-cols .group.indent {
	margin: -5px;
}

.wrap-cols .group.indent .box {
	padding: 5px;
}

.wrap-cols .group .box {
	width: 50%;
	padding: 10px;
}

@media screen and (max-width: 640px) {
	.wrap-cols .group .box {
		padding: 5px;
	}
}

@media screen and (max-width: 374px) {
	.wrap-cols .group .box {
		width: 100%;
	}
}

.wrap-cols .box {
	width: 100%;
}

.wrap-cols .name {
	display: block;
	margin-bottom: 10px;
}

.wrap-cols .input {
	border: 1px solid var(--border-search);
	border-radius: 10px;
	width: 100%;
	background: none;
	padding: 10px 20px;
	background: none;
	color: var(--color-main);
}

.wrap-cols .btn {
	width: 100%;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	background: var(--bg-active);
	color: var(--color-white);
	border-radius: 10px;
	border: none;
	padding: 12px 30px;
	transition: background .3s;
}

@media screen and (min-width: 1025px) {
	.wrap-cols .btn:hover {
		background: var(--bg-second-active);
	}
}

.social-content {
	position: relative;
}

@media screen and (max-width: 640px) {
	.slider-community {
		margin: 0 -10px;
		padding: 0 10px;
	}
}

.main-headline {
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 26px;
}

@media screen and (max-width: 1159px) {
	.main-headline {
		font-size: 24px;
	}
}

@media screen and (max-width: 767px) {
	.main-headline {
		font-size: 20px;
	}
}

.social-headline {
	margin-bottom: 20px;
}

.social-headline a {
	color: var(--color-active);
}

@media screen and (min-width: 1025px) {
	.social-headline a:hover {
		text-decoration: underline;
	}
}

.social-headline .subtitle {
	font-weight: 700;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
}

.social-headline .subtitle span:first-child {
	font-size: 20px;
	margin-right: 5px;
}

@media screen and (max-width: 767px) {
	.social-headline .subtitle span:first-child {
		font-size: 18px;
	}
}

.social-headline .subtitle span:last-child {
	font-size: 16px;
}

.social-wrapper {
	margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
	.social-wrapper {
		margin-bottom: 20px;
	}
}

.social-wrapper:last-child {
	margin-bottom: 0;
}

.social-wrapper .date {
	display: inline-flex;
	vertical-align: top;
	align-items: center;
	font-size: 14px;
	gap: 5px;
	color: var(--color-second);
}

.social-wrapper .date svg {
	font-family: 16px;
}

.social-item {
	margin-bottom: 20px;
}

.social-item:last-child {
	margin-bottom: 0;
}

.social-card {
	display: flex;
}

.social-card .image {
	flex-grow: 0;
	flex-shrink: 0;
	border-radius: 100%;
	width: 40px;
	height: 40px;
	overflow: hidden;
	margin-right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 16px;
	color: var(--color-second);
	background: var(--bg-tools);
}

.social-card img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.social-card .box {
	flex-grow: 1;
	flex-shrink: 1;
}

.social-card .subtitle {
	line-height: 1.6;
}

.social-card .text {
	margin-bottom: 3px;
	line-height: 1.4;
	color: var(--color-second);
}

.social-card .name {
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.02em;
	color: var(--color-main);
}

@media screen and (min-width: 1025px) {
	.social-card .name:hover {
		text-decoration: underline;
	}
}

.social-card .link {
	font-weight: 700;
	color: var(--color-active);
	margin-right: 5px;
}

@media screen and (min-width: 1025px) {
	.social-card .link:hover {
		text-decoration: underline;
	}
}

.button-more {
	display: block;
	margin-top: 20px;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 30px;
	border-radius: 10px;
	background: var(--bg-active);
	color: var(--color-white);
	cursor: pointer;
	border: none;
	transition: background .3s;
}

@media screen and (min-width: 1025px) {
	.button-more:hover {
		background: var(--bg-second-active);
	}
}

.select2-container--default .select2-selection--single {
	border-radius: 10px;
	height: 40px;
	display: flex;
	align-items: center;
	font-family: inherit;
	background: var(--bg-tools);
	border: 1px solid var(--border-search);
	font-weight: 400;
	font-size: 14px;
}

.select2-selection__arrow::before {
	background-image: url("../images/down-arrow.svg");
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	height: 10px;
	left: 50%;
	top: 50%;
	transform: translate3d(-50%, -50%, 0);
	position: absolute;
	width: 10px;
	transition: transform .3s;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 10px;
	position: absolute;
	top: 50%;
	right: 20px;
	width: 10px;
	transform: translate3d(0, -50%, 0);
}

.select2-container--open .select2-selection__arrow::before {
	transform: translate3d(-50%, -50%, 0) rotate(180deg);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	display: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--color-main);
	padding: 0 35px 0 20px;
}

.select2-results__option--selectable {
	color: var(--color-second);
	height: 40px;
	padding: 0 20px;
	display: flex;
	align-items: center;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--color-active);
	color: var(--color-white);
}

.select2-dropdown {
	background-color: var(--bg-tools);
	border-radius: 10px;
	overflow: hidden;
	border: none;
	border: 1px solid var(--border-search);
	border-top: none;
	font-family: inherit;
	font-size: 14px;
	box-shadow: var(--box-shadow-menu);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	height: 40px;
	border-radius: 10px;
	border: 1px solid var(--border-search);
	background: var(--bg-tools);
	color: var(--color-main);
	padding: 0 20px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--color-second);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.tabs-headline {
	display: flex;
	align-items: center;
	gap: 10px 30px;
	margin: 20px 0 30px;
}

@media screen and (max-width: 767px) {
	.tabs-headline {
		margin-bottom: 20px;
		white-space: nowrap;
		margin: 20px -10px 20px -10px;
		padding: 0 10px;
		overflow: hidden;
		overflow-x: auto;
	}
}

@media screen and (max-width: 390px) {
	.tabs-headline {
		gap: 10px;
	}
}

.tabs-headline::-webkit-file-upload-button {
	display: none;
}

.tab-item.active .tab-link {
	color: var(--color-active);
}

.tab-link {
	display: block;
	font-weight: 700;
	font-size: 26px;
	color: var(--color-main);
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.tab-link:hover {
		color: var(--color-active);
	}
}

@media screen and (max-width: 1159px) {
	.tab-link {
		font-size: 24px;
	}
}

@media screen and (max-width: 767px) {
	.tab-link {
		font-size: 20px;
	}
}

.main-subtitle {
	line-height: 1.5;
	margin-bottom: 50px;
}

@media screen and (max-width: 767px) {
	.main-subtitle {
		margin-bottom: 30px;
	}
}

.upload-field {
	display: none;
}

.upload-field.selected {
	display: block;
}

.upload-bar .text {
	font-weight: 700;
	font-size: 24px;
	margin-bottom: 20px;
	text-align: center;
}

@media screen and (max-width: 1024px) {
	.upload-bar .text {
		font-size: 22px;
	}
}

.upload-bar .line {
	width: 100%;
	background: var(--bg-tools);
	height: 8px;
	border-radius: 20px;
	position: relative;
}

.upload-bar .line-active {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	background: var(--bg-active);
	border-radius: 20px;
}

.upload-bar {
	margin-bottom: 50px;
}

@media screen and (max-width: 1024px) {
	.upload-bar {
		margin-bottom: 30px;
	}
}

.two-sections {
	display: flex;
	align-items: flex-start;
}

@media screen and (max-width: 1024px) {
	.two-sections {
		flex-direction: column-reverse;
	}
}

@media screen and (max-width: 1024px) {
	.two-sections .preview {
		max-width: 500px;
		margin: 0 auto;
	}
}

.two-sections .preview img {
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
	display: block;
	max-width: 100%;
	height: auto;
}

.two-sections .field-label {
	display: inline-block;
	margin-bottom: 5px;
}

@media screen and (max-width: 767px) {
	.two-sections .field-label {
		font-size: 14px;
	}
}

.two-sections .field-label.second {
	margin-bottom: 15px;
}

.two-sections .textarea,
.two-sections .textfield {
	width: 100%;
	border-radius: 10px;
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	font-size: 14px;
	border: none;
	background: var(--bg-tools);
	color: var(--color-main);
	border: 1px solid var(--border-search);
}

.two-sections .textarea.second,
.two-sections .textfield.second {
	color: var(--color-second);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.two-sections .textarea {
	height: 104px;
	resize: none;
	padding: 20px;
}

.two-sections .textfield {
	padding: 0 20px;
	height: 40px;
}

.two-sections .row {
	margin-bottom: 30px;
	position: relative;
}

@media screen and (max-width: 767px) {
	.two-sections .row {
		margin-bottom: 20px;
	}
}

.two-sections .row:last-child {
	margin-bottom: 0;
}

.section-one {
	flex-grow: 1;
	flex-shrink: 1;
}

@media screen and (max-width: 1024px) {
	.section-one {
		width: 100%;
	}
}



.section-two {
	max-width: 455px;
	width: 100%;
	flex-grow: 0;
	flex-shrink: 0;
	margin-left: 20px;
}

@media screen and (max-width: 1024px) {
	.section-two {
		max-width: 100%;
		margin-left: 0;
		margin-bottom: 30px;
	}
}

.bottom {
	margin-top: 30px;
}

@media screen and (max-width: 767px) {
	.bottom {
		margin-top: 20px;
	}
}

.bottom .submit {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 20px;
	border: none;
	font-family: inherit;
	background: var(--bg-active);
	border-radius: 10px;
	color: var(--color-white);
	cursor: pointer;
	transition: background .3s;
}

@media screen and (min-width: 1025px) {
	.bottom .submit:hover {
		background: var(--bg-second-active);
	}
}

.section-title {
	font-weight: 700;
	font-size: 26px;
	margin-bottom: 20px;
	display: block;
}

@media screen and (max-width: 767px) {
	.section-title {
		font-size: 20px;
	}
}

.list-selector-popup {
	position: absolute;
	width: 100%;
	height: 160px;
	left: 0;
	bottom: 52px;
	border-radius: 10px;
	z-index: 10000;
	background-color: var(--bg-tools);
	box-shadow: var(--box-shadow-menu);
	top: 100%;
	overflow-y: scroll;
}

.list-selector-popup label {
	color: var(--color-main);
	font-size: 12px;
	cursor: pointer;
	position: relative;
	padding: 0 0 0 25px;
}

.list-selector-popup label::before {
	content: "";
	position: absolute;
	left: 0;
	top: -2px;
	z-index: 2;
	width: 20px;
	height: 20px;
	border-radius: 5px;
	border: 1px solid var(--color-second);
	transition: background-color 0.3s, border 0.3s, color 0.3s;
}

.list-selector-popup label::after {
	content: "";
	position: absolute;
	opacity: 0;
	transition: opacity .2s;
	left: 6px;
	top: 1px;
	width: 7px;
	height: 10px;
	z-index: 10;
	border: solid var(--color-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.list-selector-popup .checkbox {
	display: none;
}

.list-selector-popup .checkbox:checked + label::before {
	background-color: var(--color-active);
	border: 1px solid var(--color-active);
}

.list-selector-popup .checkbox:checked + label::after {
	opacity: 1;
}

.button-group {
	overflow-y: hidden;
	overflow-x: hidden;
}

.button-group .item {
	display: inline-block;
	width: 31%;
	padding: 3px 0 10px;
	vertical-align: top;
}

@media screen and (max-width: 479px) {
	.button-group .item {
		width: 45%;
	}
}

.list-selector-popup .filter {
	background: none;
	border: 2px solid var(--color-second);
}

.list-selector-popup .filter input {
	width: 100%;
	height: 100%;
	padding: 8px 10px;
	border: none;
	background-color: var(--bg-content);
	color: var(--color-main);
	font-weight: inherit;
	font-size: 12px;
	font-family: inherit;
}

.file-control {
	position: relative;
	width: 100%;
}

.file-control input {
	font-family: inherit;
    color: var(--color-second);
    background: var(--bg-tools);
    font-size: 14px;
    border-radius: 10px;
    border: 1px solid var(--border-search);
    padding: 11px 95px 11px 20px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media screen and (min-width: 1025px) {
	.file-control:hover .button {
		background: var(--bg-second-active);
	}
}

.file-control .textfield {
	padding-right: 100px;
	transition: border .3s;
}

.file-control .button {
	position: absolute;
	top: 5px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.2;
	height: 30px;
	padding: 5px 20px;
	background: var(--bg-active);
	color: var(--color-white);
	position: absolute;
	right: 5px;
	z-index: 2;
	transition: color .3s, background .3s;
}


.file-control .file {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	padding: 0;
	opacity: 0;
	width: 100%;
	z-index: 10;
	transform: none;
	transition: border .3s, color .3s;
	cursor: pointer;
}

.file-control .file::-webkit-file-upload-button {
	display: none;
}

.radio-block .item {
	margin-bottom: 10px;
}

.radio-block .item:last-child {
	margin-bottom: 0;
}

.radio-info {
	cursor: pointer;
	display: inline-block;
	vertical-align: top;
	position: relative;
	color: var(--color-main);
	flex-grow: 1;
	flex-shrink: 1;
	padding-left: 30px;
	font-size: 14px;
}

.radio-info:after {
	position: absolute;
	content: '';
	width: 8px;
	height: 8px;
	background: var(--color-white);
	border-radius: 50%;
	top: 50%;
	left: 6px;
	transition: background .4s, opacity .3s;
	transform: translate3d(0, -50%, 0);
	z-index: 2;
	opacity: 0;
}

.radio-info::before {
	position: absolute;
	content: '';
	width: 20px;
	height: 20px;
	background: var(--bg-tools);
	border: 1px solid var(--border-search);
	border-radius: 100%;
	left: 0;
	transition: .3s;
	top: 50%;
	transform: translate3d(0, -50%, 0);
}

.input-choice {
	display: none;
}

.input-choice:checked + .radio-info:after {
	opacity: 1;
}

.input-choice:checked + .radio-info::before {
	background: var(--bg-active);
	border-color: var(--bg-active);
}

.wrap-twocolumns {
	display: flex;
	align-items: flex-start;
	gap: 30px 100px;
}

@media screen and (max-width: 1366px) {
	.wrap-twocolumns {
		gap: 30px;
	}
}

@media screen and (max-width: 1024px) {
	.wrap-twocolumns {
		flex-direction: column;
	}
}

.wrap-twocolumns .col {
	width: 50%;
}

@media screen and (max-width: 1024px) {
	.wrap-twocolumns .col {
		width: 100%;
	}
}

.wrap-twocolumns .content {
	line-height: 1.5;
}

.wrap-twocolumns .content p {
	margin-bottom: 20px;
}

.wrap-twocolumns .content p:last-child {
	margin-bottom: 0;
}

.wrap-twocolumns .row {
	margin-bottom: 20px;
}

.wrap-twocolumns .row:last-child {
	margin-bottom: 0;
}

.wrap-frame {
	max-width: 1585px;
}

.upload-title {
	font-weight: 700;
	font-size: 26px;
	margin-bottom: 30px;
}

@media screen and (max-width: 1159px) {
	.upload-title {
		font-size: 24px;
	}
}

@media screen and (max-width: 767px) {
	.upload-title {
		font-size: 20px;
	}
}

.radio-block .mask-button,
.radio-block .wrap-box {
	pointer-events: none;
	opacity: .6;
}

.radio-block.checked .mask-button,
.radio-block.checked .wrap-box {
	pointer-events: all;
	opacity: 1;
}

.mask-button {
	position: relative;
}

.mask-button .input {
	font-family: inherit;
	color: var(--color-second);
	background: var(--bg-tools);
	font-size: 14px;
	border-radius: 10px;
	border: 1px solid var(--border-search);
	padding: 11px 95px 11px 20px;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}



/* .mask-button input[type=file] {
	display: none;
} */

.wrap-box {
	margin-top: 10px;
}

.wrap-box .input {
	color: var(--main-color);
	background: var(--bg-tools);
	font-size: 14px;
	border-radius: 10px;
	border: 1px solid var(--border-search);
	padding: 11px 20px;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.file-wrap {
	border-radius: 10px;
	cursor: pointer;
	color: var(--color-white);
	font-size: 14px;
	padding: 4px 20px;
	min-height: 30px;
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translate3d(0, -50%, 0);
	z-index: 2;
	background: var(--bg-active);
	transition: background .3s;
}

@media screen and (min-width: 1025px) {
	.file-wrap:hover {
		background: var(--bg-second-active);
	}
}

.upload-button {
	border-radius: 15px;
	background: var(--color-active);
	padding: 10px 20px;
	min-height: 40px;
	color: var(--color-white);
	border: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	margin-top: 25px;
	transition: background .3s;
}

@media screen and (min-width: 1025px) {
	.upload-button:hover {
		background: var(--bg-second-active);
	}
}

@media screen and (max-width: 768px) {
	.upload-button {
		margin-top: 20px;
	}
}

.upload-button.second {
	margin-top: 0;
	transform: translate3d(0, -40px, 0);
}

@media screen and (max-width: 1230px) {
	.upload-button.second {
		transform: translate3d(0, 0, 0);
		margin-top: 20px;
	}
}

.footer {
	background-color: var(--bg-footer);
	flex-shrink: 0;
	flex-grow: 0;
	padding: 30px 0;
}

@media screen and (max-width: 1159px) {
	.footer {
		padding-top: 15px;
	}
}

.footer-inner .row {
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--border-color);
}

@media screen and (max-width: 1159px) {
	.footer-inner .row {
		margin-bottom: 20px;
		padding-bottom: 20px;
	}
}

.footer-inner .row:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.footer-inner .title {
	margin-bottom: 20px;
	font-weight: 700;
	font-size: 26px;
}

@media screen and (max-width: 1159px) {
	.footer-inner .title {
		font-size: 24px;
	}
}

@media screen and (max-width: 767px) {
	.footer-inner .title {
		font-size: 20px;
	}
}

.footer-inner .description {
	line-height: 1.6;
	color: var(--color-second);
	margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
	.footer-inner .description {
		margin-bottom: 20px;
	}
}

.footer-inner .about {
	font-size: 26px;
}

@media screen and (max-width: 1159px) {
	.footer-inner .about {
		font-size: 24px;
	}
}

@media screen and (max-width: 767px) {
	.footer-inner .about {
		font-size: 20px;
	}
}

.footer-inner .about a {
	color: var(--color-active);
}

@media screen and (min-width: 1025px) {
	.footer-inner .about a:hover {
		text-decoration: underline;
	}
}

.footer-inner .holder {
	display: flex;
	align-items: center;
	gap: 50px;
}

@media screen and (max-width: 1159px) {
	.footer-inner .holder {
		flex-direction: column;
		gap: 30px;
	}
}

.footer-logo {
	flex-grow: 0;
	flex-shrink: 0;
}

@media screen and (max-width: 767px) {
	.footer-logo {
		flex-grow: 1;
		flex-shrink: 1;
		display: flex;
		justify-content: flex-start;
		width: 100%;
	}
}

.footer-logo img {
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 767px) {
	.footer-logo img {
		max-width: 180px;
	}
}

.footer-wrap {
	flex-grow: 1;
	flex-shrink: 1;
}

@media screen and (max-width: 767px) {
	.footer-wrap {
		display: flex;
		flex-direction: column-reverse;
	}
}

.footer-wrap .list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 45px;
	font-size: 14px;
	font-weight: 700;
}

.footer-wrap .list a {
	color: var(--color-main);
	transition: color .3s;
}

@media screen and (min-width: 1025px) {
	.footer-wrap .list a:hover {
		color: var(--color-active);
	}
}

.footer-wrap .copyright {
	color: var(--color-second);
	margin-top: 20px;
	font-size: 13px;
}

@media screen and (max-width: 767px) {
	.footer-wrap .copyright {
		margin-top: 0;
		margin-bottom: 30px;
	}
}

.modal-box {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	min-width: 1px;
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	-webkit-backdrop-filter: blur(5px);
	        backdrop-filter: blur(5px);
	background: var(--bg-modal);
}

.modal-box.show {
	opacity: 1;
	visibility: visible;
}



.modal-content .close {
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
	font-size: 24px;
	transform: scale(1);
	transition: color .3s, transform .3s;
}

@media screen and (min-width: 1025px) {
	.modal-content .close:hover {
		color: var(--bg-active);
		transform: scale(1.1);
	}
}

.modal-content.second {
	width: 950px;
}

.modal-content .title {
	font-weight: 700;
	font-size: 26px;
	margin-bottom: 30px;
	color: var(--color-main);
}

@media screen and (max-width: 1159px) {
	.modal-content .title {
		font-size: 24px;
	}
}

@media screen and (max-width: 767px) {
	.modal-content .title {
		font-size: 20px;
		padding-right: 34px;
	}
}

.modal-content .row {
	margin-bottom: 20px;
}

.modal-content .row:last-child {
	margin-bottom: 0;
}

.modal-content .textarea,
.modal-content .input {
	width: 100%;
	border: 1px solid var(--border-search);
	border-radius: 10px;
	background: var(--bg-tools);
	font-size: 14px;
	color: var(--color-main);
}

.modal-content .input {
	padding: 5px 20px;
	height: 40px;
}

.modal-content .textarea {
	padding: 10px 20px;
	height: 120px;
	resize: none;
}

.modal-content .hold-field {
	display: flex;
	align-items: center;
	gap: 5px;
	justify-content: space-between;
	padding-bottom: 10px;
}

.modal-content .checkbox-label {
	font-size: 14px;
	color: var(--color-main);
}

.modal-content .info {
	font-size: 14px;
	text-align: center;
	color: var(--color-second);
	margin-bottom: 10px;
}

.row-field {
	padding-bottom: 50px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--border-color);
}

@media screen and (max-width: 767px) {
	.row-field {
		padding-bottom: 30px;
	}
}

.row-field:last-child {
	margin-bottom: 0;
	border: none;
	padding: 0;
}

.row-field.second {
	padding-bottom: 30px;
}

@media screen and (max-width: 767px) {
	.row-field.second {
		padding-bottom: 10px;
	}
}

.forgot-link {
	color: var(--color-second);
	font-size: 14px;
	cursor: pointer;
}

@media screen and (min-width: 1025px) {
	.forgot-link:hover {
		text-decoration: underline;
	}
}

.button-submit,
.btn-sign {
	display: block;
	text-align: center;
	width: 100%;
	padding: 12px 20px;
	border: none;
	cursor: pointer;
	border-radius: 10px;
	font-size: 14px;
	transition: color .3s, background .3s;
}

.button-submit {
	background: var(--bg-active);
	color: var(--color-white);
}

@media screen and (min-width: 1025px) {
	.button-submit:hover {
		background: var(--bg-second-active);
	}
}

.btn-sign {
	color: var(--color-second);
	background: var(--border-color);
}

@media screen and (min-width: 1025px) {
	.btn-sign:hover {
		background: var(--bg-active);
		color: var(--color-white);
	}
}

.agree-box {
	font-weight: 500;
	font-size: 14px;
	text-align: center;
	color: var(--color-modal);
	margin-top: 30px;
	line-height: 1.4;
}

.agree-box a {
	color: var(--color-main);
}

@media screen and (min-width: 1025px) {
	.agree-box a:hover {
		text-decoration: underline;
	}
}

.modal-field {
	display: flex;
}

@media screen and (max-width: 767px) {
	.modal-field {
		flex-direction: column-reverse;
	}
}

.modal-field .col {
	width: 50%;
	padding: 0 25px 0 0;
}

@media screen and (max-width: 991px) {
	.modal-field .col {
		padding: 0 10px 0 0;
	}
}

@media screen and (max-width: 767px) {
	.modal-field .col {
		width: 100%;
		padding: 0;
	}
}

.modal-field .col.second {
	padding: 0 0 0 25px;
}

@media screen and (max-width: 991px) {
	.modal-field .col.second {
		padding: 0 0 0 10px;
	}
}

@media screen and (max-width: 767px) {
	.modal-field .col.second {
		margin-bottom: 50px;
		padding: 0;
	}
}

.modal-field .name {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
}

.wrap-select {
	display: flex;
	align-items: center;
	margin: -5px;
}

@media screen and (max-width: 390px) {
	.wrap-select {
		flex-direction: column;
	}
}

.wrap-select .col-list {
	flex-grow: 1;
	flex-shrink: 1;
	width: 29%;
	padding: 5px;
}

@media screen and (max-width: 390px) {
	.wrap-select .col-list {
		width: 100%;
	}
}

.wrap-select .col-list.second {
	width: 42%;
}

@media screen and (max-width: 390px) {
	.wrap-select .col-list.second {
		width: 100%;
	}
}

.mask-button {
	position: relative;
}

.mask-input {
	font-size: 14px;
	color: var(--color-second);
	height: 40px;
	border-radius: 10px;
	position: relative;
	background: transparent;
	padding: 5px 105px 5px 20px;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid var(--border-search);
}

.wrap-btn input[type=file] {
	display: none;
}

.save-btn {
	margin-top: 30px;
	border-radius: 10px;
	padding: 11px 20px;
	cursor: pointer;
	display: block;
	font-size: 16px;
	color: var(--color-white);
	background: var(--bg-active);
	border: none;
	transition: background .3s;
}

@media screen and (min-width: 1025px) {
	.save-btn:hover {
		background: var(--bg-second-active);
	}
}

@media screen and (max-width: 390px) {
	.save-btn {
		margin: 30px auto 0;
	}
}

.modal-user-box {
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 20px;
}

@media screen and (max-width: 390px) {
	.modal-user-box {
		flex-direction: column;
	}
}

.modal-user-box .ava {
	width: 160px;
	height: 160px;
	flex-grow: 0;
	flex-shrink: 0;
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--border-color);
	color: var(--color-second);
	font-size: 80px;
	overflow: hidden;
}

.modal-user-box .ava img {
	max-width: 100%;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

.upload-holder {
	position: relative;
}

.upload-list {
	position: absolute;
	top: 100%;
	right: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: var(--box-shadow-menu);
	background: var(--bg-main);
	overflow: hidden;
	display: none;
	z-index: 3;
}

.upload-holder.show .upload-list {
	display: block;
}

.upload-list a {
	display: flex;
	align-items: center;
	padding: 10px 20px;
	color: var(--color-second);
	background: var(--bg-tools);
	font-size: 14px;
	font-weight: 700;
	transition: color .3s, background .3s;
}

@media screen and (hover:hover) {
    .upload-list a:hover {
        color: var(--color-white);
        background: var(--bg-active);
    }
}

.empty-content p {
	margin-bottom: 20px;
}

.empty-content p a {
	color: var(--color-main);
	cursor: pointer;
	transition: color .3s ease;
}

@media screen and (hover:hover) {
	.empty-content p a:hover {
		color: var(--bg-active);
	}
}

.no-thumb {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 5px 10px;
	border-radius: 10px;
}

.seo-wrap {
	padding: 30px 20px;
	background-color: var(--bg-footer);
	margin-bottom: -90px;
}

.seo-wrap h2 {
	margin-bottom: 20px;
    font-weight: 700;
    font-size: 26px;
}

.seo-wrap .description {
	line-height: 1.6;
    color: var(--color-second);
    margin-bottom: 30px;
}


@media screen and (max-width: 1024px) {
	.seo-wrap {
		margin-bottom: -70px;
	}
	.seo-wrap h2 {
		font-size: 20px;
	}
	.seo-wrap .description {
		margin-bottom: 20px;
	}
}

.alphabet-list .item {
	cursor: pointer;
}

.alphabet-list .item.active {
	cursor: default;
}

.tags-wrap {
	display: flex;
	flex-wrap: wrap;
}

.letter-wrap {
	width: 100%;
}

.letter-wrap strong {
	background: var(--bg-tools);
    color: var(--color-active);
    padding: 8px 17px 6px;
    margin-bottom: 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
	display: block;
}

.tag-item {
	width: 20%;
	margin-bottom: 20px;
	padding: 0 30px;
}

@media screen and (max-width: 1300px) {
	.tag-item {
		width: 25%;
	}
}

@media screen and (max-width: 1024px) {
	.tag-item {
		width: 33.33%;
	}
}

@media screen and (max-width: 767px) {
	.tag-item {
		width: 50%;
	}
}

@media screen and (max-width: 450px) {
	.tag-item {
		width: 100%;
		padding: 0 5px;
	}
}

.tags-link {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-main);
	transition: color .3s;
}

.tags-link span:first-child {
    flex-grow: 1;
    flex-shrink: 1;
}

.tags-link span:last-child {
    transition: color .3s;
    font-weight: 400;
    flex-grow: 0;
    flex-shrink: 0;
    color: var(--color-second);
}

@media screen and (min-width: 1025px) {
    .tags-link:hover span {
        color: var(--color-active);
    }
}

#kt_player {
    position: absolute !important;
}

.rating-container {
	position: relative;
}

.rating-container .voters {
	position: absolute;
	top: -20px;
	white-space: nowrap;
}

.download-wrap {
	position: relative;
}

.download-drop {
	position: absolute;
	top: 105%;
	right: 0;
	background: var(--bg-main);
	box-shadow: var(--box-shadow-menu);
	border-radius: 0 0 10px 10px;
	overflow: hidden;
	display: none;
	z-index: 1;
}

.download-drop a {
	display: flex;
    align-items: center;
    padding: 10px 20px;
    color: var(--color-second);
    background: var(--bg-tools);
    font-size: 14px;
    font-weight: 700;
    transition: color .3s, background .3s;
    cursor: pointer;
	white-space: nowrap;
}

@media screen and (min-width: 1025px) {
    .download-drop a:hover {
        color: var(--color-white);
        background: var(--bg-active);
    }
}

.download-wrap.active .download-drop {
	display: block;
}

.download-wrap.active .dowload-btn {
	background: var(--bg-active);
	color: var(--color-white);
}

.hidden {
	display: none;
}

.reply-holder {
	display: flex;
    flex-direction: column;
    gap: 5px;
	width: 100%;
}

.clone-textarea {
	resize: none;
    height: 100px;
    padding: 20px;
    display: block;
	width: 100%;
    border: 1px solid var(--border-search);
    border-radius: 10px;
    background: var(--bg-tools);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-main);
}

.clone-submit {
	display: flex;
	align-items: center;
	border-radius: 10px;
	padding: 8px 10px;
	font-weight: 700;
	font-size: 12px;
	border: none;
	background: var(--bg-tools);
	color: var(--color-second);
	cursor: pointer;
	transition: color .3s, background .3s;
	width: fit-content;
}

.comment-rating {
	font-size: 14px;
    color: var(--color-second);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    transition: color .3s;
}

.comment-options {
	display: flex;
	gap: 15px;
	margin-left: auto;
}

.comment-options .svg-icon {
	fill: var(--color-second);
}

.reply-form-holder textarea {
    resize: none;
    height: 100px;
    padding: 20px;
    display: block;
	width: 100%;
    border: 1px solid var(--border-search);
    border-radius: 10px;
    background: var(--bg-tools);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-main);
}

.reply-form-holder .submit {
	display: flex;
	align-items: center;
	border-radius: 10px;
	padding: 8px 10px;
	font-weight: 700;
	font-size: 12px;
	border: none;
	background: var(--bg-tools);
	color: var(--color-second);
	cursor: pointer;
	transition: color .3s, background .3s;
	width: fit-content;
}

@media screen and (hover:hover) {
	.reply-form-holder .submit:hover {
		background: var(--bg-active);
        color: var(--color-white);
	}
}

.reply-form-holder .row {
	margin-bottom: 10px;
}

.reply-form-holder {
	margin-bottom: 10px;
}

.load-more a {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	padding: 12px 20px;
	color: var(--color-white);
	background: var(--bg-active);
	border: none;
	cursor: pointer;
	font-size: 14px;
	transition: background .3s;
	margin-top: 20px;
	width: fit-content;
}

@media screen and (min-width: 1025px) {
    .load-more a:hover {
        background: var(--bg-second-active);
    }
}

.fav-wrap {
	position: relative;
}

.fav-drop {
	position: absolute;
    z-index: 10;
    background: var(--bg-main);
    right: 0;
    border-radius:10px;
    box-shadow: var(--box-shadow-menu);
    overflow: hidden;
    top: 105%;
	display: none;
}

@media screen and (max-width: 767px) {
	.fav-drop {
		left: 0;
		right: auto;
	}
}

.fav-drop a {
	display: flex;
	align-items: center;
	padding: 10px 20px;
	color: var(--color-second);
	background: var(--bg-tools);
	font-size: 14px;
	font-weight: 700;
	transition: color .3s, background .3s;
	cursor: pointer;
    white-space: nowrap;
	width: 100%;
    justify-content: center;
}

.fav-drop a:nth-child(2) {
	max-width: 65px;
}

@media screen and (min-width: 1025px) {
	.fav-drop a:hover {
		background: var(--bg-active);
        color: var(--color-white);
	}
}

.fav-drop li span {
	display: flex;
	align-items: center;
}

.fav-wrap.active .fav-btn {
	background: var(--bg-active);
	color: var(--color-white);
}

.fav-wrap.active .fav-drop {
	display: block;
}

.success {
	margin-bottom: 10px;
	color: chartreuse;
}

.error {
	color: #ff0015;
}

.sort-profile {
	position: relative;
}

.sort-drop-profile {
	position: absolute;
    z-index: 10;
    background: var(--bg-main);
    right: 0;
    border-radius: 10px;
    box-shadow: var(--box-shadow-menu);
    overflow: hidden;
    top: calc(105%);
    overflow-y: auto;
	display: none;
}

.sort-drop-profile .link {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: var(--border-color);
    color: var(--color-second);
    font-size: 14px;
    font-weight: 700;
    transition: color .3s, background .3s;
	width: 100%;
	white-space: nowrap;
}

@media screen and (hover:hover) {
	.sort-drop-profile .link:hover {
		color: var(--color-white);
		background: var(--bg-active);
	}
}

.sort-profile.active .sort-drop-profile {
	display: block;
}

.sort-profile.active .button {
	background: var(--bg-active);
	color: var(--color-white);
}

.edit-button {
	position: absolute;
	z-index: 10;
	top: 5px;
	left: 40px;
	padding: 5px;
	border-radius: 10px;
	background: var(--bg-active);
	color: var(--color-white);
	font-size: 14px; 
	transition: background .3s ease;
}

@media screen and (hover:hover) {
	.edit-button:hover {
		background: var(--bg-tools);
	}
}

.line-private {
	position: absolute;
	top: 5px;
	right: 10px;
	padding: 5px;
	border-radius: 10px;
	background: var(--bg-active);
	color: var(--color-white);
	font-size: 14px; 
	z-index: 1;
}

.info-message .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--border-color);
    color: var(--color-second);
    cursor: pointer;
    border-radius: 10px;
    font-size: 14px;
    padding: 10px;
    transition: color .3s, background .3s;
    border: none;
}

@media screen and (hover:hover) {
	.info-message .btn:hover {
		color: var(--color-white);
		background: var(--bg-active);
	}
}

.list-messages {
	margin-top: 20px;
}

.list-messages .item {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.list-messages .item .added {
	font-size: 12px;
	color: var(--color-second);
	margin-bottom: 5px;
}

.list-messages .item a {
	width: 50px;
	min-width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ff394b;
}

.list-messages .item a svg {
	color: #fff;
	font-size: 25px;
}

.list-messages .item a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.list-messages .item.me {
	justify-content: right;
	flex-direction: row-reverse;
}

.message-form {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 2px solid #000;
}

.unread-notification {
	position: absolute;
	top: 0;
	right: 0;
	padding: 5px;
	border-radius: 10px;
	background: #138000;
	color: #fff;
	z-index: 1;
}

.bottom-messages {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.bottom-messages .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 20px;
    border: none;
    font-family: inherit;
    background: var(--bg-active);
    border-radius: 10px;
    color: var(--color-white);
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}

@media screen and (hover:hover) {
	.bottom-messages .btn:hover {
		background: var(--border-color);
		color: var(--color-second);
	}
}

.tab-content {
	margin-bottom: 20px;
}

.tab-content:last-child {
	margin-bottom: 0;
}

.form-upload.uploading {
	margin-bottom: 50px;
}

@media screen and (max-width: 1024px) {
	.form-upload.uploading {
		margin-bottom: 30px;
	}
}

.form-upload.uploading .wrap-twocolumns {
	display: none;
}

.form-upload.uploading .main-subtitle {
	display: none;
}

/* .form-upload.hidden {
	display: none !important;
} */

.progressbar {
	display: flex;
	flex-direction: column-reverse;
}

.progress {
	background: var(--bg-active);
    height: 8px;
    border-radius: 20px;
    position: relative;
}

.progressbar .text {
	font-weight: 700;
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.preview {
	position: relative;
}

.preview .left {
	position: absolute;
	left: 5px;
	bottom: 5px;
	background: var(--bg-tools);
    color: var(--color-main);
	font-size: 14px;
	padding: 5px;
    line-height: 1;
    border-radius: 10px;
}

.preview .right {
	position: absolute;
	right: 5px;
	top: 5px;
	background: var(--bg-tools);
    color: var(--color-main);
	font-size: 14px;
	padding: 5px;
    line-height: 1;
    border-radius: 10px;
}

.radio-block {
	display: flex;
	flex-direction: column;
}

.field-error {
	color: #ff0015;
}

.line-processing, .line-disabled {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 5px;
	border-radius: 10px;
	background: #ff0015;
	opacity: .8;
	color: #fff;
}

.list-videos-screenshots {
    display: flex;
    flex-wrap: wrap;
}

.list-videos-screenshots .item {
	width: 33.33%;
	padding: 10px;
}

.list-videos-screenshots .item a {
	display: flex;
}

.list-videos-screenshots .item a img {
	width: 100%;
}

@media screen and (max-width: 767px) {
	.list-videos-screenshots .item {
       width: 50%;
    }
}

.section-two.second {
	margin: 20px 0 0;
	width: 100%;
	max-width: none;
}

.list-albums-images {
	display: flex;
	flex-wrap: wrap;
}

.list-albums-images .item {
	width: 25%;
	padding: 10px;
	max-width: none !important;
	margin: 0 !important;
}

.del-img {
	display: block;
	margin-top: 10px;
	cursor: pointer;
}

.del-img.active {
	color: #ff0015;
}

.fancybox-inner, .fancybox-outer, .fancybox-wrap {
    width: auto !important;
}

.fancybox-wrap {
    top: 50% !important;
    left: 50% !important;
    max-width: 950% !important;
    transform: translate(-50%, -50%);
    border: 10px solid transparent !important;
}

.fancybox-skin {
    background: 0 0 !important;
}

.fancybox-inner {
    display: flex;
    flex-direction: column;
    height: fit-content !important;
}

.modal-content {
	width: 484px;
	background-color: var(--bg-tools);
    overflow-x: hidden;
    z-index: 3;
    overflow-y: auto;
    max-height: 100%;
    z-index: 102;
    border-radius: 10px;
    max-height: calc(100vh - 80px);
	padding: 50px;
}

@media screen and (max-width: 1024px) {
	.modal-content.second {
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	.modal-content {
		padding: 20px;
		width: 100%;
	}
	.fancybox-inner, .fancybox-outer, .fancybox-wrap {
        width: 100% !important;
    }
}

.modal-content .close-btn svg {
	color: var(--color-main);
}

.fancybox-close {
	top: 15px !important;
	right: 15px !important;
	opacity: 0;
}

.fancybox-overlay {
	background: var(--bg-modal) !important;
	backdrop-filter: blur(5px);
}

.image {
	color: var(--color-main);
}

.button.done {
	background: #138000;
}

.button.done svg {
	color: #fff;
}

@media screen and (hover:hover) {
	.button.done:hover {
		background: #138000;
	}
	
	.button.done:hover svg {
		color: #fff;
	}
}

.select2-dropdown {
	z-index: 99999;
}

.original-text {
	line-height: 1;
}

.original-text img, .user-comment img {
	width: auto !important;
	height: 20px;
	margin: 0 4px;
}

.generic-error {
	color: #ff0015;
}

.media-info__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.media-info__buttons a {
	display: block;
    color: var(--color-second);
    background: var(--bg-tools);
    text-transform: capitalize;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 14px;
    transition: color .3s, background .3s;
}

@media screen and (hover:hover) {
	.media-info__buttons a:hover {
		background: #ff0015;
		color: #fff;
	}
}

.section.wall {
	margin: 0;
}

.section.wall .comment-box {
	padding-top: 0;
}

.description img {
	width: 32px;
}

@keyframes prevLoad {
    from {
        width: 1%
    }

    to {
        width: 100%
    }
}

.card .media.preview-loading:before {
    content: '';
    display: block;
    width: 100%;
    height: 4px;
    background-color: #F00;
    position: absolute;
    left: 0;
    top: 0;
	z-index: 9999;
    animation: 1.5s 1 alternate prevLoad
}

.card-model .media, .card-model-second {
	background-image: url('/static/images/lazy_photo.png');
	background-position: center;
}

.card .media {
	background-image: url('/static/images/lazy_video.png');
	background-position: center;
}

.card .media video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
	z-index: 0;
}

.left-jump, .right-jump {
    position: absolute;
    width: 20%;
    height: calc(100% - 45px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.left-jump { left: 0; }
.right-jump { right: 0; }

.hidden {
    opacity: 0;
}

.visible {
    opacity: 1;
	background: #0000008c;
}

/* .kt-player.is-fullscreen .left-jump, .kt-player.is-fullscreen .right-jump {
	display: none;
} */

.kt-player.is-settings-open .left-jump, .kt-player.is-settings-open .right-jump {
	display: none;
}

.more-new {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
	border-radius: 10px;
	background: var(--bg-tools);
    color: var(--color-second);
	font-weight: 700;
    transition: color .3s, background .3s, border-radius .3s;
}

@media screen and (hover:hover) {
	.more-new:hover {
		background: var(--bg-active);
        color: var(--color-white);
	}
}

.textarea-wrap {
	position: relative;
}

.smile-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	cursor: pointer;
	background-image: url('/static/images/white-smile.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}


body.light .smile-btn {
	background-image: url('/static/images/smile.svg');
}

.smileys-bar {
	display: none;
	margin-bottom: 10px;
}

.wrapper.active-smile .smileys-bar {
	display: block;
}

.player-related-videos {
  translate: 0 50%
}

.player-related-videos-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow-x: auto;
  gap: 0 10px;
  padding: 0 10px 10px;
  --sb-track-color: #000000;
  --sb-thumb-color: #B3000F;
  --sb-size: 3px;
  scrollbar-color: #B3000F #000000
}

.player-related-videos-container::-webkit-scrollbar {
  width: 3px;
  height: 3px
}

.player-related-videos-container::-webkit-scrollbar-track {
  background: #000;
  border-radius: 2px;
  margin: 0 30px
}

.player-related-videos-container::-webkit-scrollbar-thumb {
  background: #B3000F;
  border-radius: 2px
}

.player-related-videos-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  background-color: rgba(7, 7, 7, .5);
  gap: 10px;
  padding: 5px;
  border-radius: 15px;
  color: #B3000F;
  opacity: background-color .5s;
  -webkit-box-shadow: 0 0 3px #000;
  box-shadow: 0 0 3px #000;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 33.33%
}

.player-related-videos-item .thumb {
  background-repeat: no-repeat !important;
  background-size: 100% !important;
  padding: 0 !important;
  border-radius: 10px;
  aspect-ratio: 379/213;
  width: 100% !important;
  height: auto !important
}

.player-related-videos-item .title {
  display: inline-block;
  max-width: calc(100% - 50px);
  white-space: nowrap;
  overflow: hidden
}

@media screen and (max-width:600px) {
  .player-related-videos {
    translate: 0 15%
  }

  .player-related-videos-item {
    width: 50%
  }
}

@media screen and (max-width:480px) {
  .player-related-videos {
    translate: 0 3%
  }

  .player-related-videos-item {
    width: 70%
  }
}

@media screen and (any-hover:hover) {
  .player-related-videos-item:hover {
    background-color: rgba(7, 7, 7, .9)
  }
}

.autocomplete-suggestions {
	max-height: 300px;
	overflow: auto;
	background: #000;
	border-radius: 0 0 20px 20px;
}

.autocomplete-group {
	margin-bottom: 10px;
	color: #B3000F;
}

.autocomplete-suggestion {
	margin-bottom: 10px;
	color: #fff;
	padding: 5px 10px;
	cursor: pointer;
}

.autocomplete-suggestion strong {
	color: #B3000F;
}

@media screen and (hover:hover) {
	.autocomplete-suggestion:hover {
		background: #B3000F;
	}
	.autocomplete-suggestion:hover strong {
		color: #fff;
	}
}

.model-country {
    width: 24px !important;
    height: 15px !important;
    position: absolute;
    bottom: 70px !important;
    top: auto !important;
    right: 10px !important;
    left: auto !important;
}

.hover-model-img {
    position: absolute;
    bottom: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
}

@media screen and (hover:hover) {
    .author-box .image:hover .hover-model-img {
		opacity: 1;
        visibility: visible;
        width: auto;
        height: auto;
        max-width: none;
        border-radius: 0;
        z-index: 12;
		box-shadow: 0px 11px 30px 0px rgb(0 0 0);
    }
}

.model-elias-wrap {
	color: var(--color-main);
	margin-bottom: 10px;
}

.model-elias-wrap span {
	color: var(--color-second);
}