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 {
--height-header: 90px;
--height-mobile-header: 60px;
--main-color: #fff;
--main-secondary-color: #fff;
--color-gray: #F0F0F0;
--color-active: #9614D9;
--color-active-text: #9614D9;
--color: #352549;
--color-rgb: 53, 37, 73;
--color-item: #000;
--color-item-rgb: 156, 146, 169;
--background-field: #F8F6FA;
--background-hold: #F8F6FA;
--background-item: #EAE4F1;
--border-field: #D2C7E1;
--background-duration: rgba(53, 37, 73, 0.60);
--shadow-next: linear-gradient(270deg, #EAE4F1 52.6%, rgba(234, 228, 241, 0.00) 100%);
--shadow-prev: linear-gradient(-270deg, #EAE4F1 52.6%, rgba(234, 228, 241, 0.00) 100%);
}
:root .dark {
--main-color: #0B0A0D;
--main-secondary-color: #fff;
--color-gray: #0B0A0D;
--color-active: #9614D9;
--color-active-text: #B266FF;
--color: #E3D8F1;
--color-rgb: 53, 37, 73;
--color-item: #e8d8ff;
--color-item-rgb: 61, 56, 68;
--background-field: #141217;
--background-hold: #110F14;
--background-item: #141217;
--border-field: #242029;
--background-duration: rgba(53, 37, 73, 0.60);
--shadow-next: linear-gradient(270deg, #141217 52.6%, rgba(20, 18, 23, 0.00) 100%);
--shadow-prev: linear-gradient(-270deg, #141217 52.6%, rgba(20, 18, 23, 0.00) 100%);
}
html {
height: 100%;
min-width: 320px;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
font: 16px/1.2 "Outfit", sans-serif;
height: 100%;
min-width: 320px;
position: relative;
color: var(--color);
background: var(--main-color);
}
@media screen and (max-width: 1280px) {
body.scroll-locked {
height: 100%;
overflow: hidden;
position: fixed;
width: 100%;
}
}
@media screen and (max-width: 860px) {
body.show_search .hamburger {
opacity: 0;
}
body.show_search .search {
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
}
body.show_search .search_icon {
display: none;
}
body.show_search .close_icon {
display: block;
}
}
body.dark .select2-selection__arrow::before {
filter: invert(1);
}
a {
color: #2600ff;
text-decoration: none;
color: var(--color);
}
input {
outline: none;
-webkit-appearance: none;
border-radius: 0;
}
* {
outline: none;
}
* {
box-sizing: border-box;
}
*:before, *:after {
box-sizing: border-box;
}
* ::-moz-selection {
background: #2600ff;
color: #fff;
}
* ::selection {
background: #2600ff;
color: #fff;
}
.svg_icon {
width: 1em;
height: 1em;
vertical-align: -0.125em;
fill: currentColor;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: var(--color);
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: var(--color);
opacity: 1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: var(--color);
opacity: 1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: var(--color);
}
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: var(--color) !important;
}
.wrapper {
display: table;
width: 100%;
height: 100%;
table-layout: fixed;
overflow: hidden;
position: relative;
}
.container {
max-width: 1700px;
width: 100%;
margin: 0 auto;
padding: 0 30px;
}
@media screen and (max-width: 860px) {
.container {
padding: 0 20px;
}
}
@media screen and (max-width: 640px) {
.container {
padding: 0 10px;
}
}
.header {
position: relative;
z-index: 3;
padding: 0 30px;
gap: 0 3.4vw;
box-shadow: inset 0 0 0 1px var(--color-gray);
display: flex;
height: var(--height-header);
}
@media screen and (max-width: 1480px) {
.header {
gap: 0 2.5vw;
}
}
@media screen and (max-width: 860px) {
.header {
padding: 0 20px;
justify-content: space-between;
--height-header: var(--height-mobile-header);
}
}
@media screen and (max-width: 640px) {
.header {
padding: 0 10px;
}
}
@media screen and (max-width: 1280px) {
.header.open_menu .navigation_holder {
transform: translate3d(0, 0, 0) scale(1) rotateY(0);
opacity: 1;
visibility: visible;
}
.header.open_menu .hamburger span {
transform: translate3d(4px, -50%, 0);
background-color: var(--color-active);
}
.header.open_menu .mask {
opacity: 1;
visibility: visible;
}
}
.mask {
background: rgba(53, 37, 73, 0.6);
-webkit-backdrop-filter: blur(7.5px);
backdrop-filter: blur(7.5px);
bottom: 0;
left: 0;
top: var(--height-header);
opacity: 0;
position: fixed;
right: 0;
transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
visibility: hidden;
z-index: 1;
}
.hamburger {
flex-shrink: 0;
flex-grow: 0;
width: 24px;
height: 24px;
position: relative;
align-self: center;
background-color: transparent;
border: none;
outline: none;
font-family: inherit;
cursor: pointer;
display: none;
opacity: 1;
transition: opacity 0.3s;
}
@media screen and (max-width: 1280px) {
.hamburger {
display: block;
}
}
.hamburger::before, .hamburger::after {
content: "";
}
.hamburger::before, .hamburger::after,
.hamburger span {
height: 3px;
background: var(--color);
position: absolute;
left: 0;
right: 0;
border-radius: 10px;
transform-origin: top left;
}
.hamburger::before {
top: 0;
}
.hamburger::after {
bottom: 0;
}
.hamburger span {
top: 50%;
transform: translate3d(0, -50%, 0);
transition: transform 0.3s;
}
.logo {
flex-shrink: 0;
flex-grow: 0;
display: flex;
align-items: center;
}
@media screen and (max-width: 1480px) {
.logo {
max-width: 172px;
}
}
.logo a {
display: block;
}
.logo img {
display: inline-block;
vertical-align: top;
max-width: 100%;
height: auto;
}
.mobile_auth {
display: none;
gap: 0 10px;
margin-bottom: 15px;
}
@media screen and (max-width: 860px) {
.mobile_auth {
display: flex;
}
}
@media screen and (max-width: 860px) {
.mobile_auth .item {
flex: 1 1 50%;
}
}
.mobile_auth .btn {
border: none;
background-color: var(--background-item);
text-transform: uppercase;
font-family: "Outfit", sans-serif;
font-weight: 500;
height: 40px;
padding: 0 30px;
border-radius: 20px;
color: var(--color);
transition: background 0.3s, color 0.3s, opacity 0.3s;
}
@media screen and (min-width: 1025px) {
.mobile_auth .btn:hover {
background-color: var(--color-active);
color: var(--main-color);
}
}
@media screen and (max-width: 860px) {
.mobile_auth .btn {
width: 100%;
}
}
.mobile_auth .btn.second {
background-color: var(--color-active);
color: #fff;
}
@media screen and (min-width: 1025px) {
.mobile_auth .btn.second:hover {
opacity: 0.9;
}
}
.mobile_profile {
margin-bottom: 15px;
display: none;
}
@media screen and (max-width: 860px) {
.mobile_profile {
display: block;
}
}
@media screen and (max-width: 860px) {
.mobile_profile.show .icon svg {
transform: rotate(-180deg);
}
.mobile_profile.show .dropped_mobile {
display: block;
}
}
.navigation_holder {
flex-shrink: 1;
flex-grow: 1;
}
@media screen and (max-width: 1280px) {
.navigation_holder {
position: fixed;
top: var(--height-header);
left: 0;
bottom: 0;
z-index: 2;
width: 300px;
background-color: var(--main-color);
transform: translate3d(-10px, 10px, 0) scale(1.02) rotateY(-45deg);
transform-origin: left;
opacity: 0;
visibility: hidden;
transition: transform 0.4s, visibility 0.4s, opacity 0.4s;
overflow: auto;
}
}
.navigation_holder .frame {
height: 100%;
}
@media screen and (max-width: 1280px) {
.navigation_holder .frame {
padding: 20px;
height: auto;
}
}
.navigation {
display: flex;
justify-content: space-between;
gap: 0 10px;
height: 100%;
}
@media screen and (max-width: 1480px) {
.navigation {
gap: 0 15px;
}
}
@media screen and (max-width: 1280px) {
.navigation {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 3px 0;
}
}
@media screen and (max-width: 1280px) {
.navigation .item {
width: 100%;
}
}
.navigation .item.active a {
color: var(--color-active-text);
}
.navigation .item.active a::after {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.navigation .item.second {
display: none;
}
@media screen and (max-width: 860px) {
.navigation .item.second {
display: block;
}
}
.navigation a {
display: flex;
justify-content: center;
height: 100%;
align-items: center;
position: relative;
transition: color 0.3s;
}
@media screen and (max-width: 1280px) {
.navigation a {
padding: 12px 0;
justify-content: flex-start;
}
}
.navigation a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
width: 100%;
background-color: var(--color-active);
transform: translate3d(0, -4px, 0);
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
}
@media screen and (min-width: 1025px) {
.navigation a:hover {
color: var(--color-active-text);
}
.navigation a:hover::after {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.navigation .button {
background: none;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 16px;
color: var(--color);
display: flex;
align-items: center;
width: 100%;
padding: 12px 0;
}
.navigation .button svg {
margin-right: 10px;
font-size: 20px;
flex-shrink: 0;
flex-grow: 0;
}
.search {
flex-shrink: 1;
flex-grow: 1;
max-width: 460px;
display: flex;
align-items: center;
}
@media screen and (max-width: 1280px) {
.search {
max-width: 100%;
}
}
@media screen and (max-width: 860px) {
.search {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0 60px 0 20px;
transform: translate3d(0, -100%, 0);
opacity: 0;
visibility: hidden;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
}
}
@media screen and (max-width: 640px) {
.search {
padding: 0 45px 0 10px;
}
}
.wrapped_search {
position: relative;
width: 100%;
}
.wrapped_search.open .search_autocomplete {
transform: translate3d(0, 0, 0);
opacity: 1;
visibility: visible;
}
.visibility_search {
font-size: 24px;
flex-shrink: 0;
flex-grow: 0;
display: none;
position: relative;
z-index: 2;
color: var(--color);
}
@media screen and (max-width: 860px) {
.visibility_search {
display: block;
}
}
.search_icon {
display: block;
}
.close_icon {
display: none;
}
.form_field {
border-radius: 20px;
width: 100%;
background: var(--background-field);
box-shadow: inset 0 0 0 1px var(--border-field);
display: flex;
}
.form_field .input {
background-color: transparent;
border: none;
width: 100%;
padding: 11px 0 11px 20px;
height: 40px;
font-family: "Outfit", sans-serif;
font-size: 16px;
color: var(--color);
}
.form_field .btn {
flex-shrink: 0;
flex-grow: 0;
display: flex;
justify-content: center;
align-items: center;
color: var(--color);
width: 60px;
border: none;
background: none;
cursor: pointer;
font-size: 20px;
transition: color 0.3s;
}
@media screen and (min-width: 1025px) {
.form_field .btn:hover {
color: var(--color-active-text);
}
}
.search_autocomplete {
position: absolute;
width: 100%;
left: 0;
border-radius: 20px;
right: 0;
z-index: 4;
top: calc(100% + 5px);
overflow: hidden;
background-color: var(--background-field);
border: 1px solid var(--border-field);
transform: translate3d(0, 10px, 0);
opacity: 0;
visibility: hidden;
transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
}
.search_autocomplete .wrap {
max-height: 440px;
height: 100%;
overflow-y: auto;
}
.results_title {
font-size: 16px;
font-weight: 600;
padding: 20px 20px 10px;
}
.results_title .svg_icon {
flex-shrink: 0;
flex-grow: 0;
margin-right: 10px;
font-size: 16px;
}
.results_item {
font-size: 14px;
line-height: 1.15;
}
.results_item a {
display: block;
padding: 12px 20px;
color: #9C92A9;
transition: color 0.3s, background 0.3s;
}
@media screen and (min-width: 1025px) {
.results_item a:hover {
background-color: var(--background-item);
}
}
.results_item .name_result {
color: var(--color);
}
.header_panel {
display: flex;
flex-shrink: 0;
flex-grow: 0;
}
.header_panel .group {
display: flex;
align-items: center;
gap: 30px;
}
@media screen and (max-width: 860px) {
.header_panel .group {
display: none;
}
}
.header_panel button {
border: none;
background: none;
cursor: pointer;
}
.header_panel .button {
font-size: 20px;
transition: color 0.3s;
color: var(--color);
}
@media screen and (min-width: 1025px) {
.header_panel .button:hover {
color: var(--color-active-text);
}
}
.header_panel .button_action {
background-color: var(--background-item);
text-transform: uppercase;
font-family: "Outfit", sans-serif;
font-weight: 500;
height: 40px;
padding: 0 30px;
border-radius: 20px;
color: var(--color);
transition: background 0.3s, color 0.3s, opacity 0.3s;
}
@media screen and (min-width: 1025px) {
.header_panel .button_action:hover {
background-color: var(--color-active);
color: var(--main-secondary-color);
}
}
.header_panel .button_action.second {
background-color: var(--color-active);
color: var(--main-secondary-color);
}
@media screen and (min-width: 1025px) {
.header_panel .button_action.second:hover {
opacity: 0.9;
}
}
.auth {
display: flex;
gap: 10px;
position: relative;
cursor: pointer;
}
.auth.show .auth_user,
.auth.show .auth_user_mobile {
color: var(--color-active-text);
}
.auth.show .icon svg {
transform: rotate(-180deg);
}
.auth.show .dropped {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
visibility: visible;
}
.auth_user,
.auth_user_mobile {
display: flex;
align-items: center;
color: var(--color);
font-size: 16px;
font-weight: 500;
font-family: inherit;
background: none;
border: none;
width: 100%;
}
.auth_user .avatar,
.auth_user_mobile .avatar {
width: 40px;
height: 40px;
border-radius: 20px;
overflow: hidden;
font-size: 20px;
background-color: var(--background-item);
display: flex;
justify-content: center;
align-items: center;
color: var(--color-item);
flex-shrink: 0;
flex-grow: 0;
margin-right: 10px;
}
.auth_user span,
.auth_user_mobile span {
flex-shrink: 1;
flex-grow: 1;
text-align: left;
}
.auth_user .icon,
.auth_user_mobile .icon {
flex-shrink: 0;
flex-grow: 0;
margin-left: 10px;
font-size: 10px;
}
.auth_user .icon svg,
.auth_user_mobile .icon svg {
transform: rotate(0deg);
display: block;
transition: transform 0.3s;
}
.dropped,
.dropped_mobile {
padding: 10px 0 0;
}
.dropped .hold,
.dropped_mobile .hold {
border-radius: 15px 0 15px 15px;
background: var(--background-hold);
font-size: 14px;
font-weight: 500;
overflow: hidden;
}
.dropped a,
.dropped_mobile a {
display: flex;
align-items: center;
padding: 10px 20px;
}
@media screen and (min-width: 1025px) {
.dropped a:hover,
.dropped_mobile a:hover {
background-color: var(--color-active);
color: #fff;
}
}
.dropped a.active,
.dropped_mobile a.active {
background-color: var(--color-active);
color: #fff;
}
.dropped svg,
.dropped_mobile svg {
flex-shrink: 0;
flex-grow: 0;
margin-right: 10px;
font-size: 16px;
}
.dropped {
position: absolute;
top: 100%;
right: 0;
min-width: 200px;
transform: translate3d(0, 10px, 0) scale(0.96);
opacity: 0;
visibility: hidden;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
}
.dropped_mobile {
display: none;
}
.section {
margin-top: 50px;
}
@media screen and (max-width: 1024px) {
.section {
margin-top: 30px;
}
}
.section:first-child {
margin-top: 0;
padding-top: 30px;
}
@media screen and (max-width: 480px) {
.section:first-child {
padding-top: 20px;
}
}
.section.secondary {
padding: 30px 0;
background-color: var(--background-item);
}
@media screen and (max-width: 480px) {
.section.secondary {
padding: 10px 0 20px;
}
}
.rowspan {
margin-top: 30px;
}
@media screen and (max-width: 480px) {
.rowspan {
margin-top: 20px;
}
}
.rowspan:first-child {
margin-top: 0;
}
.slider_bar {
position: relative;
width: 100%;
}
.slider_bar .swiper_button_prev,
.slider_bar .swiper_button_next {
position: absolute;
top: 0;
z-index: 3;
color: var(--color);
transition: color 0.3s;
width: 25px;
height: 100%;
cursor: pointer;
display: flex;
align-items: center;
}
@media screen and (hover: hover) {
.slider_bar .swiper_button_prev:hover,
.slider_bar .swiper_button_next:hover {
color: var(--color-active-text);
}
}
.slider_bar .swiper_button_prev::after,
.slider_bar .swiper_button_next::after {
display: none;
}
.slider_bar .swiper_button_prev svg,
.slider_bar .swiper_button_next svg {
font-size: 14px;
width: 30px;
}
.slider_bar .swiper_button_prev.swiper-button-disabled,
.slider_bar .swiper_button_next.swiper-button-disabled {
display: none;
}
.slider_bar .swiper_button_next {
right: 0;
justify-content: flex-end;
background: var(--shadow-next);
}
.slider_bar .swiper_button_prev {
left: 0;
justify-content: flex-start;
background: var(--shadow-prev);
}
.slider_bar .swiper-slide {
width: auto;
}
.slider_bar .swiper-slide.active a {
background: var(--color-item);
color: var(--color);
}
.slider_bar a {
border-radius: 20px;
background: var(--main-color);
display: flex;
padding: 10px 20px;
color: var(--secondary-color);
font-weight: 500;
transition: color 0.3s, background 0.3s;
}
@media screen and (hover: hover) {
.slider_bar a:hover {
color: var(--main-secondary-color);
background: var(--color-active);
}
}
.headline {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 15px;
}
.headline.mobile {
display: none;
}
@media screen and (max-width: 860px) {
.headline.mobile {
display: flex;
}
}
.headline .title {
flex-shrink: 1;
flex-grow: 1;
font-size: 26px;
font-weight: 700;
line-height: 1.2;
padding: 2px 0;
}
@media screen and (max-width: 480px) {
.headline .title {
font-size: 22px;
padding: 4px 0;
}
}
.headline .second {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.link_more {
display: flex;
align-items: center;
justify-content: center;
padding: 11px 22px;
border-radius: 20px;
transition: color 0.2s, background 0.2s;
font-size: 14px;
line-height: 1;
text-transform: uppercase;
background-color: var(--main-color);
}
@media screen and (hover: hover) {
.link_more:hover {
background: var(--color-active);
color: var(--main-secondary-color);
}
}
.link_more .svg_icon {
flex-shrink: 0;
flex-grow: 0;
margin-left: 5px;
font-size: 10px;
}
.sorting {
position: relative;
}
.sorting.open .sorting_btn {
border-radius: 20px 20px 0 0;
}
.sorting.open .sorting_dropped {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
}
.sorting.open .svg_icon {
transform: rotate(-180deg);
}
.sorting_btn {
font-size: 14px;
line-height: 1.15;
font-weight: 500;
display: flex;
align-items: center;
gap: 0 10px;
min-width: 145px;
border-radius: 20px;
cursor: pointer;
padding: 10px 20px;
border: none;
background-color: var(--background-item);
color: var(--color);
font-family: inherit;
transition: color 0.3s, background 0.3s, border-radius 0.3s;
}
.sorting_btn.auto {
min-width: auto;
}
.sorting_btn span {
flex-shrink: 1;
flex-grow: 1;
text-align: left;
}
.sorting_btn .svg_icon {
font-size: 10px;
flex-shrink: 0;
flex-grow: 0;
transform: rotate(0);
transition: transform 0.3s;
}
.sorting_dropped {
background-color: var(--background-item);
position: absolute;
top: 100%;
border-radius: 0 0 20px 20px;
width: 100%;
z-index: 2;
font-size: 14px;
opacity: 0;
visibility: hidden;
transform: translate3d(0, 10px, 0);
transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.sorting_dropped .item {
display: block;
padding: 12px 20px;
align-items: center;
word-break: break-word;
justify-content: center;
transition: color 0.2s, background 0.2s;
cursor: pointer;
}
@media screen and (hover: hover) {
.sorting_dropped .item:hover {
background-color: var(--color-active);
color: #fff;
}
}
.sorting_dropped .item.active {
background-color: var(--color-active);
color: #fff;
}
.sorting_dropped .item:last-child {
border-radius: 0 0 20px 20px;
}
.thumbs {
display: flex;
flex-wrap: wrap;
margin: -10px -5px;
position: relative;
}
.thumb {
padding: 10px 5px;
width: 20%;
position: relative;
}
@media screen and (max-width: 1024px) {
.thumb {
width: 33.333%;
}
}
@media screen and (max-width: 767px) {
.thumb {
width: 50%;
}
}
@media screen and (max-width: 480px) {
.thumb:not(.portrait) {
width: 100%;
}
}
@media screen and (max-width: 1024px) {
.thumb.portrait {
width: 33.333%;
}
}
@media screen and (max-width: 767px) {
.thumb.portrait {
width: 50%;
}
}
.thumb.portrait .wrap_image {
padding-bottom: 143.6%;
}
.thumb .th {
display: block;
}
@media screen and (hover: hover) {
.thumb .th:hover .thumb_title {
color: var(--color-active-text);
}
.thumb .th:hover img {
transform: scale(1.1);
opacity: 0.8;
}
}
.thumb .wrap_image {
display: block;
padding-bottom: 56%;
position: relative;
border-radius: 10px;
overflow: hidden;
}
#list_categories_categories_list_items .thumb .wrap_image {
padding-bottom: 132%;
}
.thumb img {
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
transform: scale(1);
transition: transform 0.3s, opacity 0.3s;
}
.thumb .duration,
.thumb .count {
position: absolute;
bottom: 10px;
left: 10px;
border-radius: 20px;
font-size: 12px;
line-height: 1;
background: var(--background-duration);
-webkit-backdrop-filter: blur(7.5px);
backdrop-filter: blur(7.5px);
color: #fff;
padding: 5px 8px;
display: flex;
align-items: center;
z-index: 1;
}
.thumb .duration .svg_icon,
.thumb .count .svg_icon {
flex-shrink: 0;
flex-grow: 0;
margin-right: 5px;
}
.thumb .quality {
position: absolute;
top: 10px;
right: 10px;
text-transform: uppercase;
border-radius: 20px;
font-size: 12px;
font-weight: 800;
line-height: 1;
background: var(--background-duration);
-webkit-backdrop-filter: blur(7.5px);
backdrop-filter: blur(7.5px);
color: #fff;
padding: 5px 8px;
}
.thumb .count_video {
height: 100%;
max-width: 80px;
position: absolute;
right: 0;
top: 0;
width: 100%;
background: var(--background-duration);
-webkit-backdrop-filter: blur(7.5px);
backdrop-filter: blur(7.5px);
display: flex;
color: #fff;
align-items: center;
flex-direction: column;
justify-content: center;
font-size: 30px;
}
.thumb .count_video svg {
flex-shrink: 0;
flex-grow: 0;
margin-bottom: 5px;
}
.thumb .count_video span {
font-size: 16px;
}
.checkbox {
display: flex;
align-items: center;
position: absolute;
top: 20px;
left: 15px;
z-index: 2;
}
.checkbox_label {
display: flex;
align-items: center;
}
.checkbox_input {
display: none;
}
.checkbox_input:checked + .checkbox_fake {
background: var(--color-active);
border: 1px solid var(--color-active);
}
.checkbox_input:checked + .checkbox_fake::before {
opacity: 1;
}
.checkbox_fake {
display: inline-block;
vertical-align: top;
width: 20px;
height: 20px;
border-radius: 5px;
cursor: pointer;
position: relative;
border: 1px solid var(--color-active);
background: var(--background-duration);
}
.checkbox_fake::before {
content: "";
position: absolute;
top: 5px;
left: 4px;
display: block;
width: 10px;
height: 6px;
opacity: 0;
transition: 0.2s;
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
transform: rotate(-45deg);
}
.thumb_title {
font-size: 16px;
margin-top: 8px;
transition: color 0.3s;
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: color 0.3s;
}
.thumb_tools {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
font-size: 12px;
color: var(--color-item);
}
.thumb_tools .item,
.thumb_tools .item-tool {
display: flex;
align-items: center;
gap: 0 5px;
}
.thumb_tools .svg_icon {
flex-shrink: 0;
flex-grow: 0;
font-size: 14px;
}
.sub_line {
display: flex;
align-items: center;
margin-top: 10px;
}
.sub_line .name {
flex-shrink: 1;
flex-grow: 1;
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sub_line .panel {
flex-shrink: 0;
flex-grow: 0;
margin-left: 10px;
display: flex;
gap: 0 10px;
font-size: 12px;
color: var(--color-item);
display: flex;
align-items: center;
}
.sub_line .column {
display: flex;
gap: 0 5px;
}
.sub_line .svg_icon {
flex-shrink: 0;
flex-grow: 0;
font-size: 14px;
}
.wrapped_pagination {
margin-top: 30px;
display: flex;
gap: 20px;
justify-content: space-between;
}
@media screen and (max-width: 1160px) {
.wrapped_pagination {
flex-direction: column;
}
}
.wrapped_pagination::before {
content: "";
}
@media screen and (max-width: 1160px) {
.wrapped_pagination::before {
display: none;
}
}
.wrapped_pagination .pagination {
margin: 0;
}
.pagination {
display: flex;
margin-top: 30px;
justify-content: center;
}
@media screen and (max-width: 480px) {
.pagination {
margin-top: 20px;
}
}
.pagination .list {
display: flex;
gap: 0 6px;
}
.pagination .list ul {
display: flex;
gap: 5px;
}
@media screen and (max-width: 640px) {
.pagination .item {
display: none;
}
}
@media screen and (max-width: 640px) {
.pagination .item.active {
display: block;
}
}
.pagination .item.active span {
pointer-events: none;
background-color: var(--color-active);
}
.pagination .item.pager {
display: flex;
align-items: center;
}
.pagination .item.pager svg {
font-size: 10px;
}
.pagination .item.pager a {
padding: 10px 20px;
min-width: 40px;
}
.pagination .item.pager:first-child {
margin-right: 20px;
}
@media screen and (max-width: 640px) {
.pagination .item.pager:first-child {
margin-right: 10px;
}
}
.pagination .item.pager:first-child .text {
margin-left: 10px;
}
.pagination .item.pager:last-child {
margin-left: 20px;
}
@media screen and (max-width: 640px) {
.pagination .item.pager:last-child {
margin-left: 10px;
}
}
.pagination .item.pager:last-child .text {
margin-right: 10px;
}
@media screen and (max-width: 860px) {
.pagination .text {
display: none;
}
}
.pagination .page {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
height: 40px;
min-width: 40px;
border-radius: 20px;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
background-color: var(--background-item);
transition: color 0.3s, background 0.3s;
}
@media screen and (hover: hover) {
.pagination .page:hover {
color: #fff;
background-color: var(--color-active);
}
.pagination .page:hover.dots {
color: var(--color-active-text);
}
}
.pagination .page.dots {
background: none;
}
.wrap_thumbs.check .more_button {
background: var(--color-active);
color: var(--main-color);
}
.bottom_section {
display: flex;
gap: 5px;
justify-content: center;
position: absolute;
bottom: -60px;
right: 0;
}
@media screen and (max-width: 479px) {
.bottom_section .col {
width: 50%;
}
}
@media screen and (max-width: 374px) {
.bottom_section .col {
width: auto;
flex-shrink: 1;
flex-grow: 1;
}
}
.more_button {
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
height: 40px;
width: 100%;
border-radius: 20px;
font-size: 14px;
text-transform: uppercase;
font-weight: 500;
background-color: var(--background-item);
opacity: 1;
transition: color 0.3s, background 0.3s, opacity 0.3s;
border: none;
cursor: pointer;
color: var(--color);
}
@media (hover: hover) {
.more_button:hover {
background: var(--color-active);
color: var(--main-color);
}
}
@media screen and (max-width: 479px) {
.more_button {
padding: 0 10px;
}
}
.more_button.primary {
background: var(--color-active);
color: var(--main-color);
}
@media (hover: hover) {
.more_button.primary:hover {
opacity: 0.9;
}
}
.tags_list {
-moz-column-count: 7;
column-count: 7;
width: 100%;
gap: 10px;
}
@media screen and (max-width: 1366px) {
.tags_list {
-moz-column-count: 5;
column-count: 5;
}
}
@media screen and (max-width: 1024px) {
.tags_list {
-moz-column-count: 4;
column-count: 4;
}
}
@media screen and (max-width: 767px) {
.tags_list {
-moz-column-count: 3;
column-count: 3;
}
}
@media screen and (max-width: 479px) {
.tags_list {
-moz-column-count: 2;
column-count: 2;
}
}
.tags_letter {
padding: 0 0 0 20px;
margin-top: 40px;
font-weight: 700;
font-size: 22px;
display: flex;
align-items: center;
}
@media screen and (max-width: 479px) {
.tags_letter {
margin-top: 30px;
font-size: 22px;
}
}
.tags_letter:first-child {
margin: 0;
}
.tag_item {
padding: 2px 0;
line-height: 1.25;
}
.tag_item a {
display: inline-flex;
align-items: center;
padding: 10px 20px;
border-radius: 20px;
transition: color 0.2s, background 0.2s;
}
@media screen and (hover: hover) {
.tag_item a:hover {
background: var(--color-active);
color: #fff;
}
}
.wrap_tag {
margin-top: 10px;
}
.alphabet {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 10px;
}
.alphabet .item {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
}
.alphabet .item.active span {
background: var(--color-item);
}
.alphabet span,
.alphabet a {
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color);
background-color: var(--background-item);
padding: 2px;
width: 40px;
height: 40px;
transition: color 0.3s, background 0.3s;
}
@media screen and (hover: hover) {
.alphabet span:hover,
.alphabet a:hover {
background: var(--color-active);
color: var(--main-color);
}
}
.twocolumns {
display: flex;
align-items: flex-start;
gap: 30px;
}
@media screen and (max-width: 1280px) {
.twocolumns {
flex-direction: column;
}
}
.twocolumns .column {
flex-shrink: 1;
flex-grow: 1;
width: 100%;
}
.twocolumns .column.second {
flex-shrink: 0;
flex-grow: 0;
width: auto;
}
@media screen and (max-width: 1280px) {
.twocolumns .column.second {
margin-top: 20px;
width: 100%;
flex-shrink: 1;
flex-grow: 1;
display: flex;
justify-content: center;
}
}
@media screen and (max-width: 1024px) {
.twocolumns .column.second {
display: none;
}
}
.play {
position: absolute;
z-index: 11;
top: 50% !important;
left: 50% !important;
transform: translate3d(-50%, -50%, 0) scale(1);
width: 120px !important;
height: 120px !important;
background: rgba(var(--color-rgb), 0.6);
color: #fff;
font-size: 48px;
border-radius: 100%;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.3s, transform 0.3s;
}
@media screen and (hover: hover) {
.play:hover {
transform: translate3d(-50%, -50%, 0) scale(0.9);
background: rgba(var(--color-rgb), 1);
}
}
@media screen and (max-width: 1680px) {
.play {
width: 100px;
height: 100px;
font-size: 38px;
}
}
@media screen and (max-width: 768px) {
.play {
width: 75px;
height: 75px;
font-size: 26px;
}
}
@media screen and (max-width: 568px) {
.play {
width: 60px;
height: 60px;
font-size: 20px;
}
}
.play svg {
transform: translate3d(2px, 0, 0);
}
.media_banner {
margin-top: 20px;
display: flex;
justify-content: center;
}
.media_banner a {
display: block;
height: 100%;
}
@media screen and (max-width: 568px) {
.media_banner {
height: 60px;
margin: 20px auto 0;
}
}
.media_banner .wrap {
border-radius: 10px;
overflow: hidden;
}
.media_banner img {
display: inline-block;
height: 100%;
width: 100%;
vertical-align: top;
border-radius: 10px;
overflow: hidden;
}
.media_tools {
margin-top: 20px;
}
.media_tools .title {
font-weight: bold;
font-size: 26px;
}
.media_tools .description {
margin-top: 15px;
font-size: 16px;
}
.media_panel {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
margin-top: 20px;
}
@media screen and (max-width: 568px) {
.media_panel {
align-items: flex-end;
position: relative;
padding-top: 40px;
}
}
.media_panel .col {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
flex-shrink: 1;
flex-grow: 1;
}
@media screen and (max-width: 568px) {
.media_panel .col {
gap: 10px;
}
}
.media_panel .col.second {
flex-shrink: 0;
flex-grow: 0;
}
.rating {
display: flex;
height: 40px;
}
.rating_item {
background: var(--background-item);
color: var(--color);
display: flex;
}
.rating_item:first-child {
border-radius: 30px 0 0 30px;
}
.rating_item:first-child::before {
display: none;
}
.rating_item:first-child .button_rating {
padding: 0 10px 0 20px;
}
.rating_item:last-child {
border-radius: 0 30px 30px 0;
}
.rating_item:last-child .button_rating {
padding: 0 20px 0 10px;
}
.rating_item span {
display: flex;
align-items: center;
position: relative;
padding-right: 10px;
font-size: 16px;
}
.rating_item span::before {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translate3d(0, -50%, 0);
height: 20px;
width: 1px;
background-color: var(--color-item);
}
.information {
display: flex;
align-items: center;
}
@media screen and (max-width: 568px) {
.information {
position: absolute;
top: 0;
order: -1;
width: 100%;
}
}
.information .list {
display: flex;
gap: 0 10px;
}
.information .item {
font-size: 14px;
display: flex;
align-items: center;
color: var(--color-item);
}
.information .svg_icon {
font-size: 16px;
flex-shrink: 0;
flex-grow: 0;
margin-right: 5px;
}
.button_rating {
background: none;
border: none;
cursor: pointer;
font-size: 20px;
display: flex;
align-items: center;
color: var(--color-item);
transition: color 0.3s;
}
@media screen and (hover: hover) {
.button_rating:hover {
color: var(--color-active-text);
}
}
.drop_box {
position: relative;
}
.drop_box.show .btn_drop {
background: var(--color-active);
color: #fff;
}
.drop_box.show .icon > .svg_icon {
transform: rotate(-180deg);
}
.drop_box.show .box_hidden {
opacity: 1;
visibility: visible;
transform: translate3d(-50%, 0, 0) scale(1);
}
.btn_drop {
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
padding: 10px 20px;
height: 40px;
background: var(--background-item);
color: var(--color);
border-radius: 30px;
transition: background 0.3s, color 0.3s;
}
@media screen and (hover: hover) {
.btn_drop:hover {
background: var(--color-active);
color: #fff;
}
}
.btn_drop .svg_icon {
font-size: 20px;
}
.btn_drop .icon {
flex-shrink: 0;
flex-grow: 0;
margin-left: 10px;
}
.btn_drop .icon .svg_icon {
font-size: 12px;
transform: rotate(0);
transition: transform 0.3s;
}
.box_hidden {
position: absolute;
border-radius: 10px;
z-index: 10;
top: calc(100% + 5px);
min-width: 160px;
width: 100%;
overflow: hidden;
background: var(--color-active);
transform: translate3d(-50%, 20px, 0) scale(0.94);
opacity: 0;
left: 50%;
transition: transform 0.4s, visibility 0.4s, opacity 0.4s;
visibility: hidden;
}
.box_hidden a {
display: block;
padding: 8px 10px;
color: #fff;
transition: background 0.3s, color 0.3s;
}
@media screen and (hover: hover) {
.box_hidden a:hover {
background: #352549;
}
}
.tabs {
gap: 0 5px;
display: flex;
list-style-type: none;
}
.tabs .item .btn_tab.active  {
background-color: var(--color-active);
color: #fff;
}
.btn_tab {
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
padding: 0 20px;
height: 40px;
background: var(--background-item);
color: var(--color);
border-radius: 30px;
transition: background 0.3s;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
}
@media screen and (max-width: 568px) {
.btn_tab {
padding: 0 10px;
}
}
.btn_tab .svg_icon {
flex-shrink: 0;
flex-grow: 0;
font-size: 20px;
}
.btn_tab span {
margin-left: 5px;
}
@media screen and (max-width: 568px) {
.btn_tab span {
display: none;
}
}
.tab_content {
display: none;
margin-top: 30px;
}
.tab_content.selected {
display: block;
}
.inform {
gap: 20px 0;
display: flex;
flex-direction: column;
}
.inform .row {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.inform .col {
display: flex;
align-items: flex-start;
}
.inform .list {
display: flex;
flex-wrap: wrap;
gap: 5px 10px;
}
.inform .item {
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
}
.inform .item a {
display: block;
padding: 10px 20px;
border-radius: 20px;
background: var(--background-item);
color: var(--color);
transition: background 0.3s, color 0.3s;
}
@media screen and (hover: hover) {
.inform .item a:hover {
background: var(--color-active);
color: #fff;
}
}
.share_field .item {
margin-bottom: 20px;
}
.share_field .item:last-child {
margin-bottom: 0;
}
.share_field .label {
display: flex;
flex-direction: column;
width: 100%;
max-width: 600px;
}
.share_field .text {
margin-bottom: 5px;
color: var(--color);
font-weight: 500;
font-size: 16px;
}
.share_field .input {
width: 100%;
border-radius: 20px;
padding: 8px 20px;
height: 36px;
font-family: inherit;
font-size: 14px;
border: 1px solid var(--border-field);
color: var(--color);
background: var(--background-field);
}
.comments_field {
max-width: 800px;
width: 100%;
}
.comments_field .title {
margin-bottom: 15px;
color: var(--color);
font-size: 22px;
font-weight: 700;
}
.comments_field form {
display: block;
}
.comments_field .row {
margin-top: 10px;
}
.comments_field .row:first-child {
margin-top: 0;
}
.comments_field .input {
width: 100%;
border-radius: 20px;
padding: 8px 20px;
height: 36px;
max-width: 318px;
font-family: inherit;
font-size: 14px;
border: 1px solid var(--border-field);
color: var(--color);
background: var(--background-field);
}
@media screen and (max-width: 480px) {
.comments_field .input {
max-width: 100%;
}
}
.comments_field .textarea {
width: 100%;
border-radius: 20px;
padding: 15px 20px;
resize: none;
display: block;
font-family: inherit;
font-size: 14px;
border: 1px solid var(--border-field);
color: var(--color);
background: var(--background-field);
height: 100px;
}
.comments_field .button {
margin-top: 20px;
padding: 10px 30px;
border-radius: 20px;
display: inline-block;
vertical-align: top;
border: none;
font-family: inherit;
font-size: 14px;
line-height: 1.45;
text-transform: uppercase;
font-weight: 500;
color: #fff;
background: var(--color-active);
cursor: pointer;
}
.comments_list {
margin-top: 20px;
}
.comments_list .comment {
display: flex;
margin-bottom: 20px;
}
.comments_list .comment:last-child {
margin-bottom: 0;
}
.comments_list .avatar {
flex-shrink: 0;
flex-grow: 0;
margin-right: 10px;
display: flex;
width: 40px;
height: 40px;
justify-content: center;
align-items: center;
font-size: 20px;
color: var(--color-item);
border-radius: 100%;
overflow: hidden;
background-color: var(--background-item);
position: relative;
}
.comments_list .avatar img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.comments_list .content {
flex-shrink: 1;
flex-grow: 1;
}
.comments_list .sup {
display: flex;
align-items: center;
margin-bottom: 4px;
}
.comments_list .name {
display: block;
color: var(--color);
font-size: 16px;
font-weight: 500;
transition: color 0.3s;
}
@media screen and (hover: hover) {
.comments_list .name:hover {
color: var(--color-active-text);
}
}
.comments_list .date {
display: flex;
align-items: center;
flex-grow: 0;
flex-shrink: 0;
margin-left: 10px;
font-size: 12px;
color: var(--color-item);
}
.comments_list .date .svg_icon {
flex-grow: 0;
font-size: 14px;
flex-shrink: 0;
margin-right: 4px;
}
.comments_list .description {
font-size: 14px;
color: var(--color);
line-height: 1.4;
}
.gallery_wrapper {
display: flex;
flex-wrap: wrap;
gap: 10px 0;
margin: 0 -5px;
}
.item_photo {
width: 20%;
padding: 0 4px;
}
@media screen and (max-width: 1024px) {
.item_photo {
width: 25%;
}
}
@media screen and (max-width: 680px) {
.item_photo {
width: 33.333%;
}
}
@media screen and (max-width: 374px) {
.item_photo {
width: 50%;
}
}
.item_photo .wrap {
position: relative;
padding-bottom: 150.5%;
}
@media screen and (hover: hover) {
.item_photo .wrap:hover::before {
transform: scale(1);
opacity: 1;
visibility: visible;
}
.item_photo .wrap:hover::after {
background: rgba(53, 37, 73, 0.6);
}
}
.item_photo .wrap::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0 0 0 4px var(--color-active);
border-radius: 10px;
z-index: 2;
transform: scale(1.04);
opacity: 0;
visibility: hidden;
transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
}
.item_photo .wrap::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: transparent;
border-radius: 10px;
z-index: 1;
transition: background 0.3s;
}
.item_photo a {
display: block;
}
.item_photo img {
width: 100%;
height: 100%;
border-radius: 10px;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.aside_adv {
padding: 20px 30px 30px;
width: 100%;
max-width: 360px;
background: var(--background-item);
border-radius: 10px;
overflow: hidden;
}
@media screen and (max-width: 1280px) {
.aside_adv {
max-width: -moz-max-content;
max-width: max-content;
}
}
.aside_adv .title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 400;
text-align: center;
color: var(--color-item);
margin-bottom: 15px;
}
@media screen and (max-width: 1280px) {
.aside_adv .wrap {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
}
.aside_adv .item {
margin-bottom: 20px;
}
@media screen and (max-width: 1280px) {
.aside_adv .item {
margin: 0;
}
}
.aside_adv .item:last-child {
margin-bottom: 0;
}
.columns_upload {
display: flex;
}
@media screen and (max-width: 860px) {
.columns_upload {
flex-direction: column;
}
}
.columns_upload .col {
flex-grow: 1;
flex-shrink: 1;
}
.columns_upload .col.second {
max-width: 345px;
width: 100%;
flex-grow: 0;
flex-shrink: 0;
margin-left: 85px;
}
@media screen and (max-width: 1480px) {
.columns_upload .col.second {
margin-left: 50px;
}
}
@media screen and (max-width: 860px) {
.columns_upload .col.second {
order: -1;
margin-left: 0;
margin-bottom: 30px;
max-width: 100%;
}
}
.columns_upload .row {
margin-bottom: 30px;
}
.columns_upload .row:last-child {
margin-bottom: 0;
}
.columns_upload .box {
margin-bottom: 20px;
}
.columns_upload .box:last-child {
margin-bottom: 0;
}
.columns_upload .name {
font-size: 16px;
margin-bottom: 10px;
display: inline-block;
vertical-align: top;
}
.columns_upload .name.second {
margin-bottom: 20px;
}
@media screen and (max-width: 860px) {
.columns_upload .name.second {
margin-bottom: 10px;
}
}
.columns_upload .textarea {
display: block;
width: 100%;
margin: 0;
width: 100%;
padding: 20px;
resize: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
height: 104px;
border-radius: 20px;
background: var(--background-field);
border: 1px solid var(--border-field);
color: var(--color);
}
.columns_upload .input {
width: 100%;
background: var(--background-field);
border: 1px solid var(--border-field);
height: 40px;
padding: 8px 20px;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
color: var(--color);
border-radius: 20px;
}
.process_wrap {
margin-bottom: 45px;
}
.process_wrap .percent {
margin-bottom: 10px;
text-align: center;
font-size: 20px;
font-weight: 500;
color: var(--color-active-text);
}
@media screen and (max-width: 860px) {
.hide {
display: none;
}
}
.process_wrap_mobile {
margin-bottom: 15px;
display: none;
}
@media screen and (max-width: 860px) {
.process_wrap_mobile {
display: block;
}
}
.process_wrap_mobile .percent {
margin-bottom: 10px;
text-align: center;
font-size: 20px;
font-weight: 500;
color: var(--color-active-text);
}
.scale_holder {
width: 100%;
height: 8px;
border-radius: 5px;
background-color: var(--background-item);
display: block;
position: relative;
overflow: hidden;
}
.scale_holder span {
position: absolute;
left: 0;
top: 0;
height: 100%;
background-color: var(--color-active);
border-radius: 5px;
}
.mask_input {
font-family: inherit;
font-weight: 400;
font-size: inherit;
color: var(--color);
height: 40px;
border-radius: 20px;
position: relative;
background: var(--background-field);
padding: 5px 95px 5px 20px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid var(--border-field);
}
.wrap_btn input[type=file] {
display: none;
}
.file_wrap {
border-radius: 20px;
cursor: pointer;
color: var(--color);
font-size: 12px;
font-weight: 500;
line-height: 1.2;
padding: 8px 22px;
position: absolute;
right: 5px;
top: 50%;
transform: translate3d(0, -50%, 0);
z-index: 2;
transition: color 0.3s, background 0.3s;
background: var(--background-item);
}
@media screen and (hover: hover) {
.file_wrap:hover {
background: var(--color-active);
color: var(--main-color);
}
}
.preview_img {
border-radius: 10px;
overflow: hidden;
width: 100%;
}
@media screen and (max-width: 860px) {
.preview_img {
max-width: 450px;
margin: 0 auto;
}
}
.preview_img .wrap {
padding-bottom: 56.03%;
position: relative;
}
.preview_img img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.visibility_choice {
display: flex;
flex-direction: column;
gap: 20px 0;
}
@media screen and (max-width: 860px) {
.visibility_choice {
gap: 10px 0;
}
}
.visibility_choice .choice {
display: inline-flex;
vertical-align: top;
}
.visibility_choice .info {
cursor: pointer;
display: inline-block;
vertical-align: top;
position: relative;
flex-grow: 1;
flex-shrink: 1;
padding-left: 32px;
font-size: 16px;
}
.visibility_choice .info::after {
position: absolute;
content: "";
width: 8px;
height: 8px;
background: var(--main-background);
border-radius: 50%;
top: 50%;
left: 6px;
transform: translate3d(0, -50%, 0);
z-index: 2;
opacity: 0;
}
.visibility_choice .info::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background: var(--main-color);
box-shadow: 0 0 0 2px inset var(--color-item);
border-radius: 100%;
left: 0;
transition: 0.3s;
top: 50%;
transform: translate3d(0, -50%, 0);
}
.visibility_choice .radio {
display: none;
}
.visibility_choice .radio:checked + .info::after {
opacity: 1;
}
.visibility_choice .radio:checked + .info::before {
box-shadow: 0 0 0 6px inset var(--color-active);
}
.btn_upload {
display: block;
font-family: inherit;
font-weight: 500;
font-size: 14px;
line-height: 1.2;
border: none;
text-transform: uppercase;
background: var(--color-active);
color: #fff;
padding: 12px 30px;
border-radius: 20px;
cursor: pointer;
margin-top: 20px;
opacity: 1;
transition: opacity 0.3s;
}
@media screen and (hover: hover) {
.btn_upload:hover {
opacity: 0.9;
}
}
.upload_tabs {
display: flex;
align-items: center;
gap: 20px;
}
.upload_tabs .item.active .link {
color: var(--color-active-text);
}
.upload_tabs .link {
font-size: 26px;
font-weight: 700;
color: var(--color);
}
@media screen and (max-width: 991px) {
.upload_tabs .link {
font-size: 24px;
}
}
@media screen and (max-width: 768px) {
.upload_tabs .link {
font-size: 22px;
}
}
.upload_content {
display: none;
margin-top: 30px;
}
.upload_content.selected {
display: block;
}
.upload_content .row {
margin-bottom: 30px;
}
.upload_content .row:last-child {
margin-bottom: 0;
}
.upload_field {
display: flex;
gap: 50px;
}
@media screen and (max-width: 991px) {
.upload_field {
gap: 30px;
}
}
@media screen and (max-width: 768px) {
.upload_field {
flex-direction: column;
}
}
@media screen and (max-width: 680px) {
.upload_field {
gap: 15px;
}
}
.upload_field .column {
width: 50%;
}
@media screen and (max-width: 768px) {
.upload_field .column {
width: 100%;
}
}
.radio_block .mask_button {
margin-top: 10px;
pointer-events: none;
opacity: 0.25;
transition: opacity 0.3s;
}
.radio_block.checked .mask_button {
pointer-events: all;
opacity: 1;
}
.label_choice {
display: inline-flex;
vertical-align: top;
}
.radio_info {
cursor: pointer;
display: inline-block;
vertical-align: top;
position: relative;
flex-grow: 1;
flex-shrink: 1;
padding-left: 30px;
}
.radio_info::after {
position: absolute;
content: "";
width: 8px;
height: 8px;
background: var(--main-color);
border-radius: 50%;
top: 50%;
left: 6px;
transition: background 0.3s, opacity 0.3s;
transform: translate3d(0, -50%, 0);
z-index: 2;
opacity: 0;
}
.radio_info::before {
position: absolute;
content: "";
width: 20px;
height: 20px;
background: var(--main-color);
border: 2px solid var(--color-item);
border-radius: 100%;
left: 0;
transition: background 0.3s, border 0.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(--color-active);
border-color: var(--color-active);
}
.mask_button {
position: relative;
}
.mask_button .input {
font-family: inherit;
border: 1px solid var(--border-field);
color: var(--color);
background: var(--background-field);
font-size: 14px;
border-radius: 20px;
min-height: 36px;
font-weight: 400;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 9px 20px;
}
.mask_button .input.file {
padding: 9px 95px 9px 20px;
}
.mask_button .button {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.mask_button input[type=file] {
display: none;
}
.mask_button .file_wrap {
border-radius: 20px;
cursor: pointer;
color: var(--color);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
padding: 6px 18px;
min-height: 30px;
position: absolute;
right: 5px;
top: 50%;
transform: translate3d(0, -50%, 0);
z-index: 2;
background: var(--background-item);
transition: color 0.3s, background 0.3s;
}
@media (hover: hover) {
.mask_button .file_wrap:hover {
background: var(--color-active);
color: #fff;
}
}
.upload_button {
border-radius: 20px;
background: var(--color-active);
padding: 10px 30px;
min-height: 40px;
color: #fff;
text-transform: uppercase;
border: none;
font-family: inherit;
font-size: 14px;
font-weight: 500;
cursor: pointer;
margin-top: 20px;
opacity: 1;
transition: opacity 0.3s;
}
@media (hover: hover) {
.upload_button:hover {
opacity: 0.9;
}
}
@media screen and (max-width: 768px) {
.upload_button {
margin-top: 20px;
}
}
@media screen and (max-width: 680px) {
.upload_button {
margin-top: 10px;
}
}
.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;
}
}
.rules_box .title {
color: var(--color);
font-size: 22px;
font-weight: 700;
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
.rules_box .title {
font-size: 20px;
}
}
.rules_box .box {
color: var(--second-color);
font-size: 14px;
line-height: 1.42;
}
.rules_box p {
margin-bottom: 20px;
}
.rules_box p:last-child {
margin-bottom: 0;
}
.rules_box a {
color: var(--color);
transition: color 0.3s;
}
@media (hover: hover) {
.rules_box a:hover {
color: var(--color-active-text);
}
}
.columns_upload {
display: flex;
}
@media screen and (max-width: 860px) {
.columns_upload {
flex-direction: column-reverse;
}
}
.columns_upload .col {
flex-grow: 1;
flex-shrink: 1;
}
.columns_upload .col.second {
max-width: 382px;
width: 100%;
flex-grow: 0;
flex-shrink: 0;
margin-left: 60px;
}
@media screen and (max-width: 991px) {
.columns_upload .col.second {
margin-left: 20px;
}
}
@media screen and (max-width: 860px) {
.columns_upload .col.second {
margin: 0 0 30px;
max-width: 100%;
order: 1;
}
}
.columns_upload .holder {
display: flex;
gap: 30px;
}
@media screen and (max-width: 1230px) {
.columns_upload .holder {
flex-direction: column;
}
}
.columns_upload .hold {
width: 50%;
}
@media screen and (max-width: 1230px) {
.columns_upload .hold {
width: 100%;
}
}
.columns_upload .hold.second {
padding-bottom: 50px;
}
@media screen and (max-width: 1230px) {
.columns_upload .hold.second {
padding-bottom: 0;
}
}
.columns_upload .text {
margin-bottom: 10px;
display: inline-block;
vertical-align: top;
}
.columns_upload .item {
margin-bottom: 20px;
}
.columns_upload .item:last-child {
margin-bottom: 0;
}
.columns_upload .input {
min-height: 40px;
}
.model_box {
display: flex;
}
@media screen and (max-width: 680px) {
.model_box {
flex-direction: column;
}
}
.avatar_profile {
flex-grow: 0;
flex-shrink: 0;
margin-right: 30px;
width: 262px;
overflow: hidden;
border-radius: 15px;
position: relative;
}
@media screen and (max-width: 680px) {
.avatar_profile {
margin: 0 auto;
}
}
.avatar_profile.primary {
border-radius: 260px;
width: 260px;
height: 260px;
display: flex;
align-items: center;
justify-content: center;
}
.avatar_profile.primary svg {
transform: scale(5.5);
}
@media screen and (max-width: 680px) {
.avatar_profile.primary {
border-radius: 220px;
width: 220px;
height: 220px;
}
}
.avatar_profile img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
width: 100%;
}
.information_profile {
flex-grow: 1;
flex-shrink: 1;
font-size: 14px;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 680px) {
.information_profile {
margin-top: 30px;
}
}
.information_profile .rating {
flex-shrink: 0;
flex-grow: 0;
margin-left: 10px;
position: relative;
}
.information_profile .rating_item {
background-color: var(--main-color);
}
.description_top {
flex-shrink: 0;
flex-grow: 0;
display: flex;
align-items: flex-start;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid rgba(var(--color-item-rgb), 0.4);
}
@media screen and (max-width: 680px) {
.description_top {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
margin-bottom: 20px;
}
}
.description_top.second {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
@media screen and (max-width: 680px) {
.description_top.second {
align-items: center;
}
}
.description_top .wrap {
flex-shrink: 1;
flex-grow: 1;
}
.description_top .title {
font-weight: 700;
font-size: 26px;
margin-bottom: 15px;
}
@media screen and (max-width: 680px) {
.description_top .title {
margin: 0;
font-size: 22px;
}
}
@media screen and (max-width: 680px) {
.description_tools {
margin-top: 10px;
}
}
.card_statistics {
color: var(--color-item);
display: flex;
flex-wrap: wrap;
align-items: center;
margin: -3px -5px;
}
.button_edit {
flex-shrink: 0;
flex-grow: 0;
background: var(--main-color);
color: var(--color);
display: flex;
align-items: center;
padding: 10px 20px;
border-radius: 30px;
font-size: 14px;
line-height: 1;
text-transform: uppercase;
font-weight: 500;
font-family: inherit;
height: 40px;
transition: background 0.3s, color 0.3s;
}
@media (hover: hover) {
.button_edit:hover {
color: #fff;
background: var(--color-active);
}
}
.button_edit .svg_icon {
font-size: 16px;
flex-shrink: 0;
flex-grow: 0;
margin-right: 10px;
}
.card_item {
padding: 3px 5px;
display: flex;
align-items: center;
font-size: 16px;
}
.card_item svg {
flex-shrink: 0;
flex-grow: 0;
margin-right: 5px;
}
.card_item span {
font-size: 14px;
}
.description_main {
flex-shrink: 1;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.description_main .list {
-moz-column-count: 3;
column-count: 3;
margin-bottom: 10px;
flex-shrink: 0;
flex-grow: 0;
}
@media screen and (max-width: 1024px) {
.description_main .list {
-moz-column-count: 2;
column-count: 2;
}
}
@media screen and (max-width: 380px) {
.description_main .list {
-moz-column-count: 1;
column-count: 1;
}
}
.description_main .item {
display: flex;
padding-bottom: 20px;
}
@media screen and (max-width: 680px) {
.description_main .item {
padding-bottom: 15px;
}
}
.description_main .item:last-child {
padding-bottom: 0;
}
.description_main .item span:first-child {
color: #9C92A9;
margin-right: 6px;
}
.description_main .text {
line-height: 1.4;
flex-shrink: 1;
flex-grow: 1;
}
.wrap_tabs {
padding-top: 20px;
display: flex;
gap: 0 30px;
font-size: 16px;
font-weight: 500;
border-bottom: 1px solid rgba(var(--color-item-rgb), 0.4);
}
@media screen and (max-width: 680px) {
.wrap_tabs {
margin-bottom: -20px;
}
}
@media screen and (max-width: 374px) {
.wrap_tabs {
gap: 0;
justify-content: space-between;
font-size: 14px;
}
}
.wrap_tabs .item_tab {
margin-bottom: -1px;
}
@media screen and (max-width: 374px) {
.wrap_tabs .item_tab {
flex-shrink: 1;
flex-grow: 1;
text-align: center;
}
}
.wrap_tabs .item_tab.active .tab_link {
color: var(--color-active-text);
pointer-events: none;
}
.wrap_tabs .item_tab.active .tab_link::after {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
}
.wrap_tabs .tab_link {
display: block;
position: relative;
padding: 0 0 14px;
}
@media (hover: hover) {
.wrap_tabs .tab_link:hover {
color: var(--color-active-text);
}
.wrap_tabs .tab_link:hover::after {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
}
}
.wrap_tabs .tab_link::after {
position: absolute;
content: "";
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background: var(--color-active);
opacity: 0;
visibility: hidden;
transform: translate3d(0, 4px, 0);
transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
}
.footer {
display: table-row;
height: 1px;
}
.footer_frame {
padding-top: 50px;
}
@media screen and (max-width: 1024px) {
.footer_frame {
padding-top: 30px;
}
}
.footer_frame .hold {
margin-bottom: 40px;
}
@media screen and (max-width: 480px) {
.footer_frame .hold {
margin-bottom: 30px;
}
}
.text_detail {
line-height: 1.4;
font-size: 14px;
}
.text_detail .title {
font-weight: 700;
font-size: 26px;
margin-bottom: 18px;
}
.text_detail .text_row {
margin-bottom: 30px;
}
.text_detail .text_row:last-child {
margin-bottom: 0;
}
.spot_field {
padding: 12px 30px 30px;
border-radius: 20px;
background: var(--background-item);
}
@media screen and (max-width: 480px) {
.spot_field {
padding: 12px 20px 20px;
}
}
@media screen and (max-width: 374px) {
.spot_field {
padding: 12px 0 0;
background: none;
}
}
.spot_field .title {
color: #9C92A9;
text-align: center;
font-size: 12px;
line-height: 1;
letter-spacing: 3.6px;
text-transform: uppercase;
margin-bottom: 10px;
}
.spot_field .wrap {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: space-around;
overflow: hidden;
height: 250px;
}
@media screen and (max-width: 714px) {
.spot_field .wrap {
justify-content: center;
}
}
.hold_detail {
border-top: 1px solid var(--color-gray);
padding: 50px 0;
}
@media screen and (max-width: 860px) {
.hold_detail {
padding: 30px 0;
}
}
.hold_detail .row {
margin-bottom: 30px;
}
.hold_detail .row:last-child {
margin-bottom: 0;
}
.footer_logo {
display: flex;
justify-content: center;
}
.footer_logo a {
display: block;
}
.footer_logo img {
display: inline-block;
vertical-align: top;
max-width: 100%;
height: auto;
}
@media screen and (max-width: 1480px) {
.footer_logo img {
max-width: 172px;
}
}
.footer_nav {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
margin: -5px -20px;
text-transform: uppercase;
font-size: 14px;
}
.footer_nav .item {
padding: 5px 20px;
}
.footer_nav .item.active a {
color: var(--color-active-text);
}
.footer_nav a {
transition: color 0.3s;
cursor: pointer;
}
@media screen and (min-width: 1025px) {
.footer_nav a:hover {
color: var(--color-active-text);
}
}
.footer_text,
.copy {
text-align: center;
font-weight: 400;
line-height: 1.4;
font-size: 14px;
color: var(--color-item);
}
.modal {
min-width: 504px;
width: 100%;
overflow-y: auto;
max-height: calc(100vh - 80px);
z-index: 102;
}
@media screen and (max-width: 479px) {
.modal {
padding: 10px;
}
}
.modal.primary .content {
min-width: 950px;
}
@media screen and (max-width: 1024px) {
.modal.primary .content {
min-width: 300px;
}
}
.modal .title {
font-weight: 700;
font-size: 26px;
margin-bottom: 22px;
}
.modal .content {
border-radius: 20px;
margin: auto;
padding: 50px;
position: relative;
width: 100%;
z-index: 2;
background-color: var(--main-color);
max-width: 484px;
}
@media screen and (max-width: 640px) {
.modal .content {
padding: 30px 20px;
}
}
.close_btn {
position: absolute;
top: 20px;
right: 20px;
font-size: 24px;
color: var(--color);
display: flex;
background: none;
border: none;
cursor: pointer;
transition: transform 0.4s;
}
@media screen and (min-width: 1025px) {
.close_btn:hover {
transform: scale(0.8) rotate(90deg);
}
}
.row_input {
margin-bottom: 20px;
}
.row_input:last-child {
margin: 0;
}
.row_input input[type=file] {
display: none;
}
.row_input .name {
margin-bottom: 10px;
display: block;
font-family: "Outfit", sans-serif;
}
.custom_input {
font-family: inherit;
font-weight: 400;
font-size: 14px;
padding: 10px 20px;
height: 40px;
width: 100%;
border-radius: 20px;
color: var(--color);
background-color: var(--background-field);
border: 1px solid var(--border-field);
}
.panel_wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
.checkbox_text {
font-family: inherit;
font-size: 16px;
cursor: pointer;
margin-left: 10px;
}
.modal_link {
font-weight: 400;
font-size: 14px;
text-align: right;
color: #9C92A9;
transition: color 0.3s;
cursor: pointer;
}
@media screen and (min-width: 1025px) {
.modal_link:hover {
color: var(--color-active-text);
}
}
.submit_button,
.btn_sign {
border: none;
cursor: pointer;
border-radius: 20px;
width: 100%;
height: 40px;
font-weight: 500;
padding: 11px 20px;
font-size: 14px;
text-align: center;
color: #fff;
text-transform: uppercase;
font-family: inherit;
}
.submit_button {
margin-top: 30px;
background: var(--color-active);
transition: opacity 0.3s;
}
@media screen and (min-width: 1025px) {
.submit_button:hover {
opacity: 0.9;
}
}
.btn_sign {
margin-top: 16px;
background: var(--background-item);
display: block;
color: var(--color);
transition: background-color 0.3s, color 0.3s;
}
@media screen and (min-width: 1025px) {
.btn_sign:hover {
background-color: var(--color-active);
color: #fff;
}
}
.text_info {
font-weight: 400;
padding-top: 30px;
margin-top: 30px;
font-size: 14px;
text-align: center;
color: #9C92A9;
border-top: 1px solid var(--border-field);
}
.text_agree {
font-weight: 400;
font-size: 14px;
margin-top: 16px;
line-height: 1.4;
text-align: center;
color: #9C92A9;
}
.text_agree a {
color: var(--color);
}
@media screen and (min-width: 1025px) {
.text_agree a:hover {
text-decoration: underline;
}
}
.wrap_checkbox .checkbox_fake {
background-color: var(--background-field);
border: 1px solid var(--border-field);
margin-right: 5px;
}
.popup_field {
display: flex;
gap: 0 50px;
}
.popup_field form {
width: 100%;
}
@media screen and (max-width: 767px) {
.popup_field {
flex-direction: column;
gap: 20px 0;
}
}
.popup_field .col {
width: 50%;
}
@media screen and (max-width: 767px) {
.popup_field .col {
width: 100%;
}
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
font-weight: 400;
font-size: 14px;
color: var(--color);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: var(--color);
}
.select2-container--default .select2-selection--single {
background-color: var(--background-field);
border-radius: 20px;
border-color: var(--border-field);
}
.select2-container .select2-selection--single .select2-selection__rendered {
padding-left: 25px;
}
.select2-container .select2-selection--single {
height: 40px;
display: flex;
align-items: center;
}
.wrap_detail {
display: flex;
align-items: center;
margin: -5px;
}
.col_list {
flex-grow: 1;
flex-shrink: 1;
width: 30%;
padding: 5px;
}
.col_list.second {
width: 40%;
}
.popup_textarea {
border-radius: 15px;
min-height: 130px;
resize: none;
padding: 15px;
font-family: "Outfit", sans-serif;
font-weight: 400;
display: block;
color: var(--color);
background-color: var(--background-field);
border: 1px solid var(--border-field);
}
.select2-results__option--selectable {
font-family: "Outfit", sans-serif;
font-weight: 400;
padding-left: 25px;
height: 40px;
display: flex;
align-items: center;
}
.select2-selection__arrow::before {
background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M31.488 8.129l-1.048-1.056c-0.33-0.33-0.769-0.511-1.238-0.511s-0.908 0.182-1.238 0.511l-11.957 11.958-11.971-11.971c-0.329-0.33-0.769-0.511-1.238-0.511s-0.909 0.181-1.238 0.511l-1.048 1.049c-0.683 0.682-0.683 1.793 0 2.475l14.253 14.304c0.329 0.329 0.768 0.561 1.241 0.561h0.005c0.469 0 0.908-0.232 1.237-0.561l14.24-14.265c0.33-0.329 0.511-0.782 0.512-1.25s-0.182-0.915-0.512-1.244z"></path></svg>');
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
content: "";
height: 10px;
left: -8px;
position: absolute;
top: 15px;
width: 10px;
}
.select2-selection__arrow b {
display: none;
}
.select2-container--default .select2-results__option--selected {
background-color: var(--background-item);
}
.select2-dropdown {
background-color: var(--background-field);
border: 1px solid var(--border-field);
z-index: 9999;
}
.select2-container--open .select2-selection__arrow::before {
transform: rotate(180deg);
transition: 0.3s ease;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border-radius: 15px;
height: 40px;
padding-left: 25px;
padding-right: 10px;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background: var(--color-active);
color: white;
padding-left: 25px;
height: 40px;
display: flex;
align-items: center;
}
.select2-dropdown {
border-radius: 20px;
overflow: hidden;
}
.user_box {
margin-top: 30px;
display: flex;
align-items: center;
}
@media screen and (max-width: 360px) {
.user_box {
flex-direction: column;
}
}
.user_box .wrap-checkbox {
margin-left: 20px;
}
@media screen and (max-width: 360px) {
.user_box .wrap-checkbox {
margin: 15px 0 0 0;
}
}
.user_ava {
width: 160px;
height: 160px;
border-radius: 80px;
display: flex;
align-items: center;
background-color: var(--background-item);
justify-content: center;
font-size: 80px;
color: var(--color-item);
margin-right: 20px;
overflow: hidden;
}
.save_btn {
margin-top: 30px;
background: var(--color-active);
border-radius: 20px;
text-align: center;
padding: 12px 30px;
color: #fff;
cursor: pointer;
border: none;
font-family: inherit;
text-transform: uppercase;
transition: opacity 0.3s;
}
@media screen and (min-width: 1025px) {
.save_btn:hover {
opacity: 0.9;
}
}
body.light .logo-light {
display: block;
}
body.light .logo-dark {
display: none;
}
body.dark .logo-light {
display: none;
}
body.dark .logo-dark {
display: block;
}
.hold.second {
margin-top: 50px;
}
@media screen and (max-width: 1024px) {
.hold.second {
margin-top: 30px;
}
}
.blockOverlay {
background-color: transparent !important;
}
.tags-section {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.tags-section .item {
width: 100%;
display: inline-block;
vertical-align: top;
}
.hidden {
display: none;
}
.avatar img {
width: 100%;
}
.rating_item.rate-dislike {
padding: 0 20px 0 10px;
border-radius: 0 30px 30px 0;
}
.voters {
position: absolute;
top: 102%;
right: 0;
}
.no-thumb {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 10px;
border-radius: 10px;
border: 1px solid #000;
}
.player-wrap {
position: relative;
border-radius: 10px;
overflow: hidden;
z-index: 1;
}
#kt_player {
position: absolute !important;
}
.rating.rating-container {
position: relative;
width: fit-content;
}
.drop-flex {
display: flex;
align-items: center;
}
.wrap-btn .file-button {
position: relative;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
z-index: 100;
display: block !important;
cursor: pointer;
}
.wrap-btn .field-error.down {
top: 40px !important;
}
.mask_button {
margin: 10px 0 15px 0;
}
.upload_tabs {
margin-bottom: 30px;
}
.upload_field {
margin-top: 30px;
}
.progressbar {
display: flex;
flex-direction: column-reverse;
align-items: center;
position: relative;
margin-bottom: 45px;
margin-right: 442px;
}
.progressbar .text {
margin-bottom: 10px;
text-align: center;
font-size: 20px;
font-weight: 500;
color: var(--color-active-text);
}
.progress {
height: 8px;
background: var(--color-active);
border-radius: 5px;
}
.progressbar::before {
position: absolute;
left: 0;
bottom: 0;
width: 100% !important;
background-color: var(--background-item);
}
.form-upload.uploading .upload-field, .form-upload.uploading .bottom {
display: none;
}
.mask-button {
position: relative;
}
.wrap-btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.list-selector {
position: relative;
}
.list-selector-popup {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 170px;
overflow: auto;
color: var(--color);
background: var(--main-color);
z-index: 12;
border: 2px solid #000;
border-radius: 0 0 20px 20px;
}
.button-group {
display: flex;
flex-wrap: wrap;
}
.button-group .item {
margin: 20px;
position: relative;
}
.filter {
padding: 5px;
position: relative;
}
.models-filter .add-model {
position: absolute;
right: 0;
top: 5px;
margin: 0;
height: 80%;
font-size: 13px;
line-height: 17px;
border-radius: 0;
padding: 8px 10px;
opacity: 0;
transition: background .3s, opacity .3s;
}
.models-filter.show .add-model {
opacity: 1;
}
.fancybox-overlay {
background: rgba(53, 37, 73, 0.6) !important;
backdrop-filter: blur(5px) !important;
}
.down {
position: absolute;
font-size: 11px;
color: red;
}
.left {
position: absolute;
left: 10px;
top: 10px;
padding: 5px;
border-radius: 10px;
background: #fff;
color: var(--color-active-text);
}
.right {
position: absolute;
right: 10px;
bottom: 10px;
padding: 5px;
border-radius: 10px;
background: #fff;
color: var(--color-active-text);
}
.fancybox-close {
opacity: 0;
top: 14px !important;
right: 14px !important;
width: 60px !important;
}
.fancybox-wrap {
top: 50% !important;
left: 50% !important;
max-width: 950% !important;
transform: translate(-50%, -50%);
border: 10px solid transparent !important;
}
.fancybox-inner, .fancybox-outer, .fancybox-wrap {
width: auto !important;
}
.fancybox-skin {
background: 0 0 !important;
}
.fancybox-inner {
display: flex;
flex-direction: column;
height: fit-content !important;
}
.fancybox-opened .fancybox-skin {
box-shadow: none !important;
}
@media screen and (max-width: 640px) {
.modal {
min-width: auto;
}
.fancybox-inner, .fancybox-outer, .fancybox-wrap {
width: 100% !important;
}
}
.field-error {
color: red;
}
::-webkit-scrollbar {
width: 3px;
}
::-webkit-scrollbar-thumb {
background-color: var(--color-active);
}
::-webkit-scrollbar-track {
background-color: transparent;
}
.more_button:disabled {
opacity: .6;
}
#list_playlists_my_created_playlists, #list_videos_my_favourite_videos, #list_albums_my_favourite_albums, #list_videos_my_uploaded_videos, #list_albums_my_created_albums {
margin-bottom: 80px;
}
.line-disabled {
position: absolute;
top: 10px;
right: 10px;
background: #fff;
color: var(--color-active-text);
border-radius: 10px;
padding: 5px;
}
.sorting.open .svg_icon.adit {
transform: none;
}
.sorting_dropped.second {
background: var(--main-color);
color: var(--color);
}
.description_top .wrap {
margin-right: 10px;
}
.favorite-links {
transition: color .3s ease;
}
@media screen and (hover:hover) {
.favorite-links:hover {
color: var(--color-active-text);
}
}
.input-file {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
display: block !important;
z-index: 12;
cursor: pointer;
}
.upload {
position: relative;
}
.columns_upload .col.second {
position: absolute;
right: 0;
top: 0;
margin: 0;
}
.columns_upload .col {
margin-right: 442px;
}
@media screen and (max-width: 1024px) {
.progressbar {
margin-right: 0;
}
.columns_upload .col.second {
position: static;
}
.columns_upload .col {
margin-right: 0;
}
.columns_upload {
flex-direction: column-reverse;
}
}
@media screen and (max-width: 1024px) {
.bottom_section {
position: static;
width: 100%;
}
#list_playlists_my_created_playlists, #list_videos_my_favourite_videos, #list_albums_my_favourite_albums, #list_videos_my_uploaded_videos, #list_albums_my_created_albums {
margin-bottom: 20px;
}
}
.selectall.more_button {
color: var(--color);
}
@media screen and (hover:hover) {
.selectall.more_button:hover {
color: var(--main-color);
}
}
.item.selector .checkbox_fake {
position: absolute;
}
.item.selector label {
padding-left: 24px;
z-index: 1;
cursor: pointer;
position: relative;
}
.qualtiy, .line-private {
position: absolute;
bottom: 10px;
right: 10px;
color: var(--color-active-text);
background: #fff;
padding: 2px 5px;
border-radius: 10px;
z-index: 1;
font-size: 12px;
}
.line-processing {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: var(--color-active-text);
background: #fff;
padding: 2px 5px;
border-radius: 10px;
z-index: 1;
font-size: 12px;
opacity: .8;
}
.item-control-holder.playlist {
display: flex;
margin-top: 2px;
}
.item-control-holder.playlist .toggle-button  {
margin-right: 5px;
cursor: pointer;
padding: 2px 5px;
border-radius: 10px;
color: #fff;
background: var(--color-active);
transition: background .3s ease;
}
@media screen and (hover:hover) {
.item-control-holder.playlist .toggle-button:hover {
background: #352549;
}
}
.select2-container--default .select2-results>.select2-results__options {
overflow-x: hidden;
}
.but {
position: absolute;
top: 6px;
right: 10px;
border-radius: 50px;
background: var(--color-active);
color: #fff;
font-size: 14px;
padding: 5px 15px;
}
.header-link-mobile svg {
margin-right: 5px;
}
.header-link-mobile {
position: relative;
}
.header-link-mobile-dot {
position: absolute;
right: -13px;
top: 50%;
transform: translate3d(0, -50%, 0);
width: 8px;
height: 8px;
border-radius: 100%;
overflow: hidden;
background: #04f000;
box-shadow: 0 0 9px 0 rgba(4, 240, 0, 0.5);
animation: header-link-mobile-blink 2s ease-in-out infinite;
}
@keyframes header-link-mobile-blink {
0%, 100% { opacity: 1; }
50%      { opacity: 0.25; }
}
.navigation a svg {
margin-right: 5px;
}
.swiper-wrapper {
display: flex;
flex-wrap: wrap;
}
.all-tags-btn {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.all-tags-btn a {
text-transform: uppercase;
font-family: "Outfit", sans-serif;
font-weight: 500;
padding: 10px 30px;
border-radius: 20px;
color: var(--color);
transition: background 0.3s, color 0.3s, opacity 0.3s;
background-color: var(--color-active);
color: var(--main-secondary-color);
}
@media screen and (hover:hover) {
.all-tags-btn a:hover {
opacity: 0.9;
}
}
.links-list-desc {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 5px 30px;
background-color: var(--background-item);
border-bottom: 1px solid #d7d7d7;
}
.links-list-mobile {
display: none;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: 20px;
}
.links-list-desc a {
color: var(--color);
transition: color .3s ease;
}
.links-list-mobile a {
color: var(--color);
padding: 0 !important;
}
@media screen and (hover:hover) {
.links-list-desc a:hover {
color: var(--color-active-text);
}
}
@media screen and (max-width: 1280px) {
.links-list-desc {
display: none;
}
.links-list-mobile {
display: flex;
}
}
.block-user {
display: flex;
align-items: center;
flex-direction: row-reverse;
gap: 10px;
}
.block-user .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #EAE4F1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.block-user .avatar svg {
fill: #000;
}
.block-user .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sf-wrap {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px 10px;
}
.sf-item {
overflow: hidden;
width: 100%;
position: relative;
border-radius: 15px;
max-height: 400px;
min-height: 400px;
border: 1px solid #D4DEE2;
display: flex;
flex-direction: column;
transition: border .3s ease;
cursor: pointer;
}
.sf-item .img {
min-height: 184px;
background: #EEF2F4;
display: flex;
align-items: center;
justify-content: center;
padding: 0 26.5px;
}
.sf-item .title {
font-size: 20px;
display: block;
text-align: center;
padding: 10px;
}
.site-friend-desc {
color: #6D7379;
font-size: 16px;
font-weight: 500;
line-height: 20px;
margin-bottom: 10px;
overflow: auto;
padding: 0 10px;
text-align: center;
}
.sf-btn {
display: flex;
margin: auto auto 20px;
border-radius: 15px;
background: #EEF2F4;
height: 40px;
align-items: center;
justify-content: center;
padding: 0 30px;
color: #6D7379;
font-size: 14px;
font-weight: 500;
gap: 10px;
transition: background .3s ease, color .3s ease;
}
.sf-btn .icon-down-right {
font-size: 10px;
transition: color .3s ease;
}
html.dark .sf-item {
border: 1px solid #2A2F34;
}
html.dark .sf-item .img {
background: #121214;
}
html.dark .sf-item .title {
color: #FFF;
}
html.dark .sf-btn {
background: #121214;
}
@media screen and (hover:hover) {
.sf-item:hover {
border: 1px solid var(--color-active);
}
.sf-btn:hover {
background: var(--color-active);
color: #FFF;
}
.sf-btn:hover .icon-down-right {
color: #FFF;
}
html.dark .sf-item:hover {
border: 1px solid var(--color-active);
}
html.dark .sf-btn:hover {
background: var(--color-active);
}
}
@media screen and (max-width: 1160px) {
.sf-wrap {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 900px) {
.sf-wrap {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 500px) {
.sf-wrap {
grid-template-columns: repeat(1, 1fr);
}
}
.main-title .title, .detail-title {
font-size: 24px;
margin-bottom: 20px;
}
.text-detail-item {
font-size: 18px;
margin-bottom: 20px;
}
.box-content {
margin-top: 20px;
}
.main-grid {
margin: -10px -5px;
display: flex;
flex-wrap: wrap;
}
.grid-item, .second-item, .flex-item {
padding: 10px 5px;
width: 25%;
position: relative;
}
.main-card, .second-card {
border-radius: 15px;
}
.site-card-img {
display: block;
height: auto;
padding-bottom: 56.2%;
position: relative;
width: 100%;
border-radius: 15px;
overflow: hidden;
background-color: #EEF2F4;
}
.site-card-img img {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
width: auto;
max-width: 90%;
}
.main-card-title {
font-size: 16px;
margin-top: 8px;
overflow: hidden;
transition: color .3s;
display: block;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--color);
text-align: center;
font-weight: 600;
}
@media screen and (max-width: 1024px) {
.grid-item, .second-item, .flex-item {
width: 33.333%;
}
}
@media screen and (max-width: 764px) {
.grid-item, .second-item, .flex-item {
width: 50%;
}
}
@media screen and (max-width: 478px) {
.grid-item, .second-item, .flex-item {
width: 100%;
padding: 5px;
}
.main-grid-sites .grid-item {
padding: 10px 5px;
}
}
.header-links-mobile {
display:none;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
}
@media screen and (max-width: 1024px) {
.header-links-mobile {
display: flex;
padding: 5px 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
align-items: center;
justify-content: space-around;
margin-bottom: 10px;
}
}
.header-links-mobile a {
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
}
body.dark .site-card-img {
background-color: #121214;
}
@media screen and (max-width: 1280px) {
.header-link-mobile-dot {
right: 180px;
}
}
.links-list-desc a[href="/"]{display:none}
@media screen and (min-width: 1600px) {
.thumb {
width: 16.6666%;
}
}
/* Mobile: 2-up. This overrides the width:100% rule at 480px. */
@media screen and (max-width: 480px) {
.thumb:not(.portrait) {
width: 50%;
}
}
/* Tighten the gutters. Current is 10px h / 20px v; 12px even reads cleaner
and gains a little thumbnail width back on mobile. */
.thumbs {
margin: -8px -6px;
}
.thumb {
padding: 8px 6px;
}
@media screen and (max-width: 480px) {
.thumbs {
margin: -6px -4px;
}
.thumb {
padding: 6px 4px;
}
}
.thumb_title {
white-space: normal;
text-overflow: clip;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.35;
min-height: calc(2 * 1.35em);
font-size: 15px;
font-weight: 500;
}
@media screen and (max-width: 480px) {
.thumb_title {
font-size: 13px;
}
}
/* Meta row sits tight under the title rather than floating. */
.thumb_tools {
margin-top: 6px;
opacity: 0.75;
}
.thumb .qualtiy,
.thumb .quality {
position: absolute;
top: 10px;
right: 10px;
bottom: auto;
left: auto;
text-transform: uppercase;
border-radius: 20px;
font-size: 11px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.02em;
background: var(--background-duration);
-webkit-backdrop-filter: blur(7.5px);
backdrop-filter: blur(7.5px);
color: #fff;
padding: 5px 8px;
z-index: 1;
}
/* Duration pill: match the badge exactly so the two read as a pair. */
.thumb .duration,
.thumb .count {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
}
.section.secondary {
background-color: transparent;
padding: 0;
}
.section {
margin-top: 44px;
}
@media screen and (max-width: 1024px) {
.section {
margin-top: 28px;
}
}
/* Same treatment for the SEO text block at the foot of the homepage. */
.hold.second {
background-color: transparent;
}
.headline {
align-items: baseline;
margin-bottom: 16px;
}
.headline .title {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
}
@media screen and (max-width: 640px) {
.headline .title {
font-size: 18px;
}
}
.container {
background: none;
overflow: visible;
}
@media screen and (hover: hover) {
.thumb .th:hover img {
transform: scale(1);
opacity: 1;
}
.thumb .wrap_image {
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.thumb .th:hover .wrap_image {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--color-rgb), 0.18);
}
}
@media (prefers-reduced-motion: reduce) {
.thumb .wrap_image,
.thumb .th:hover .wrap_image {
transition: none;
transform: none;
}
}
.thumb .th:focus-visible,
.headline .link_more:focus-visible,
.sorting_btn:focus-visible {
outline: 2px solid var(--color-active);
outline-offset: 3px;
border-radius: 10px;
}
.thumb .wrap_image {
padding-bottom: 56.25%;
background-color: var(--background-hold);
}
.main .section.secondary,
body .section.secondary {
background-color: transparent !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.main .hold.second {
background-color: transparent !important;
}
/* ---------- video page sidebar ---------- */
.twocolumns .column.second {
width: 320px;
}
@media screen and (max-width: 1280px) {
.twocolumns .column.second { width: 100%; }
}
.column.second .row-card {
width: 100%;
}
/* filter links: Related / by model / by studio */
.column.second .list-sort {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin-bottom: 14px;
}
.column.second .list-sort span.related-title {
font-size: 15px;
font-weight: 700;
color: var(--color);
}
.column.second .list-sort a.related-title {
font-size: 15px;
font-weight: 500;
color: var(--color);
opacity: 0.5;
cursor: pointer;
transition: opacity 0.2s;
}
.column.second .list-sort a.related-title:hover {
opacity: 1;
}
/* one video per row inside the 320px column */
@media screen and (min-width: 1281px) {
.column.second .thumbs { margin: 0; }
.column.second .thumb  { width: 100%; padding: 0 0 14px; }
.column.second .thumb_title { font-size: 14px; }
}
/* Dark-only theme (24 Sep): switcher hidden, body class hardcoded in header. See claude/tsthots/HANDOFF.md */
.js-theme-switcher, li:has(> .js-theme-switcher), .col:has(> .js-theme-switcher) { display: none !important; }
/* uv cards (24 Sep): ultrathots-style video cards, scoped to .uv-card. See claude/tsthots/video-cards-24-sep.md */
@media screen and (min-width: 1025px) { .thumb.uv-card { width: 25%; } }
.thumb.uv-card .thumb_title { display: block; -webkit-line-clamp: unset; min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 600; line-height: 1.35; margin-top: 8px; }
.thumb.uv-card .quality { top: 8px; left: 8px; right: auto; padding: 4px 7px; border-radius: 6px; font-size: 10px; background: var(--color-active); color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.thumb.uv-card .duration { bottom: 8px; left: 8px; padding: 4px 7px; border-radius: 6px; background: rgba(0, 0, 0, .72); color: #fff; }
.thumb.uv-card .thumb_tools { margin-top: 4px; }
.thumb-uploader { margin-top: 6px; min-width: 0; }
.thumb-uploader a { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px 3px 6px; border-radius: 12px; background: var(--background-item); color: var(--color); font-size: 11px; font-weight: 600; line-height: 1.3; transition: background .2s, color .2s; }
.thumb-uploader .svg_icon { width: 11px; height: 11px; flex: 0 0 auto; fill: currentColor; }
.thumb-uploader .tu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media screen and (hover: hover) { .thumb-uploader a:hover { background: var(--color-active); color: #fff; } }
@media screen and (max-width: 480px) { .thumb.uv-card .thumb_title { font-size: 14px; } }
/* uv home (24 Sep): trending tiles, mobile "see all", SEO lead. See claude/tsthots/homepage-24-sep.md */
@media screen and (min-width: 1025px) {
#list_videos_videos_watched_right_now_items.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
#list_videos_videos_watched_right_now_items .thumb.uv-card { width: auto; }
#list_videos_videos_watched_right_now_items .thumb.uv-card:first-child { grid-column: span 2; grid-row: span 2; }
#list_videos_videos_watched_right_now_items .thumb.uv-card:first-child .thumb_title { font-size: 20px; margin-top: 10px; }
#list_videos_videos_watched_right_now_items .thumb.uv-card:first-child .wrap_image { padding-bottom: 64.5%; }
}
@media screen and (max-width: 767px) {
#list_videos_videos_watched_right_now_items.thumbs { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#list_videos_videos_watched_right_now_items.thumbs::-webkit-scrollbar { display: none; }
#list_videos_videos_watched_right_now_items .thumb.uv-card { flex: 0 0 78%; width: 78%; scroll-snap-align: start; }
#list_videos_most_recent_videos_items .thumb:nth-child(n+13) { display: none; }
#list_videos_most_recent_videos .pagination { display: none; }
}
.uv-see-all { display: none; }
@media screen and (max-width: 767px) {
.uv-see-all { display: flex; justify-content: center; margin: 18px 0 4px; }
.uv-see-all__btn { display: inline-flex; align-items: center; padding: 11px 26px; border-radius: 22px; background: var(--color-active); color: #fff; font-size: 14px; font-weight: 700; }
}
.text_detail .uv-seo-lead { font-size: 18px; font-weight: 700; line-height: 1.35; margin-bottom: 10px; color: var(--main-secondary-color); }
/* uv bottom nav (24 Sep): phones only. See claude/tsthots/bottom-nav-24-sep.md */
.bottom-nav { display: none; }
@media screen and (max-width: 767px) {
.bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: 58px; padding-bottom: env(safe-area-inset-bottom); background: var(--background-hold); border-top: 1px solid var(--border-field); box-shadow: 0 -2px 12px rgba(0, 0, 0, .4); z-index: 120; }
.bottom-nav__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; color: var(--color); opacity: .7; font: inherit; text-align: center; text-decoration: none; -webkit-appearance: none; appearance: none; }
.bottom-nav__ico { display: inline-flex; line-height: 1; }
.bottom-nav__ico .bn-svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.bottom-nav__label { font-size: 10px; font-weight: 600; line-height: 1; }
.bottom-nav__link.active, .bottom-nav__link:active { color: var(--color-active-text); opacity: 1; }
body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}
/* uv nav + footer (24 Sep): categories dropdown, footer link columns. See claude/tsthots/nav-footer-24-sep.md */
.uv-drop { display: none; }
@media screen and (min-width: 1281px) {
.navigation .item.uv-has-drop { position: relative; }
.navigation .uv-drop { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 50; display: none; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 2px 8px; min-width: 340px; margin: 0; padding: 12px; list-style: none; background: var(--background-hold); border: 1px solid var(--border-field); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .55); }
.navigation .uv-has-drop:hover > .uv-drop, .navigation .uv-has-drop:focus-within > .uv-drop { display: grid; }
.navigation .uv-drop a { display: block; height: auto; padding: 8px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--color); white-space: nowrap; }
.navigation .uv-drop a::after { display: none; }
.navigation .uv-drop a:hover { background: var(--background-item); color: var(--color-active-text); }
.navigation .uv-drop .uv-drop__all { grid-column: 1 / -1; border-top: 1px solid var(--border-field); margin-top: 6px; padding-top: 6px; }
.navigation .uv-drop .uv-drop__all a { color: var(--color-active-text); font-weight: 700; }
}
.uv-footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; padding: 24px 0 8px; }
.uv-footer-col__title { font-size: 15px; font-weight: 700; color: var(--main-secondary-color); margin-bottom: 12px; }
.uv-footer-col ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.uv-footer-col a { display: inline-block; padding: 6px 12px; border-radius: 16px; background: var(--background-item); color: var(--color); font-size: 13px; line-height: 1.3; transition: background .2s, color .2s; }
.uv-footer-col a:hover { background: var(--color-active); color: #fff; }
@media screen and (max-width: 860px) { .uv-footer-links { grid-template-columns: 1fr; gap: 20px; } }
/* uv community (24 Sep): /members/ page. See claude/tsthots/community-24-sep.md */
.uv-comm { padding-top: 20px; padding-bottom: 30px; }
.uv-comm-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 24px; margin-bottom: 20px; border-radius: 16px; border: 1px solid var(--border-field); background: linear-gradient(135deg, rgba(150, 20, 217, .30), rgba(150, 20, 217, .05) 65%), var(--background-item); }
.uv-comm-hero h1 { margin: 0 0 6px; font-size: 28px; font-weight: 800; line-height: 1.2; color: var(--main-secondary-color); }
.uv-comm-hero p { margin: 0; font-size: 14px; opacity: .75; }
.uv-btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 24px; border: 0; border-radius: 22px; background: var(--color-active); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.uv-btn:hover { filter: brightness(1.12); color: #fff; }
.uv-comm-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.uv-board, .uv-side-box { padding: 16px; border-radius: 14px; border: 1px solid var(--border-field); background: var(--background-item); }
.uv-board__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; font-size: 17px; font-weight: 800; color: var(--main-secondary-color); }
.uv-board__head small { font-size: 12px; font-weight: 500; opacity: .55; }
.uv-board__list, .uv-feed__list, .uv-clist { margin: 0; padding: 0; list-style: none; }
.uv-board__row a { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; color: var(--color); }
.uv-board__row a:hover { background: var(--background-hold); }
.uv-rank { flex: 0 0 22px; text-align: center; font-size: 15px; font-weight: 800; opacity: .55; }
.uv-board__row:nth-child(1) .uv-rank { color: #f5c542; opacity: 1; }
.uv-board__row:nth-child(2) .uv-rank { color: #c9ccd6; opacity: 1; }
.uv-board__row:nth-child(3) .uv-rank { color: #d08a4e; opacity: 1; }
.uv-board__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.uv-board__val { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--color-active-text); }
.uv-board__empty { padding: 8px; font-size: 13px; opacity: .6; }
.uv-av { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, var(--color-active), #4a1670); color: #fff; font-size: 16px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.uv-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uv-av--lg { width: 72px; height: 72px; font-size: 26px; }
.uv-av--sm { width: 34px; height: 34px; font-size: 14px; }
.uv-comm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.uv-comm-main { min-width: 0; }
.uv-comm-sec { margin-bottom: 30px; }
.uv-comm-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.uv-side-title { margin-bottom: 10px; font-size: 17px; font-weight: 800; color: var(--main-secondary-color); }
.uv-sec-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.uv-sec-head h2 { margin: 0; font-size: 22px; font-weight: 800; color: var(--main-secondary-color); }
.uv-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.uv-pill { padding: 6px 12px; border-radius: 16px; border: 1px solid var(--border-field); background: var(--background-item); color: var(--color); font-size: 13px; }
.uv-pill:hover, .uv-pill.active { border-color: var(--color-active); background: var(--color-active); color: #fff; }
.uv-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.uv-mcard { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 16px 10px 14px; border-radius: 14px; border: 1px solid var(--border-field); background: var(--background-item); color: var(--color); text-align: center; transition: border-color .2s, transform .2s; }
.uv-mcard:hover { border-color: var(--color-active); transform: translateY(-2px); color: var(--color); }
.uv-mcard__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.uv-mcard__meta { font-size: 12px; opacity: .6; }
.uv-comm-filter { margin-bottom: 14px; }
.uv-comm-filter summary { display: inline-flex; padding: 7px 14px; border-radius: 16px; border: 1px solid var(--border-field); background: var(--background-item); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.uv-comm-filter summary::-webkit-details-marker { display: none; }
.uv-comm-filter[open] summary { border-color: var(--color-active); color: var(--color-active-text); }
.uv-comm-filter form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--border-field); background: var(--background-item); }
.uv-comm-filter label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; opacity: .9; }
.uv-comm-filter select, .uv-comm-filter input[name="city"] { height: 38px; min-width: 130px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-field); background: var(--background-hold); color: var(--color); font: inherit; font-size: 13px; }
.uv-comm-filter__age { display: flex; gap: 6px; }
.uv-comm-filter__age select { min-width: 80px; }
.uv-comm-filter label.uv-comm-filter__check { flex-direction: row; align-items: center; height: 38px; }
.uv-feed__item { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-field); }
.uv-feed__item:first-child, .uv-clist li:first-child { border-top: 0; padding-top: 4px; }
.uv-feed__body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.uv-feed__user { font-weight: 700; color: var(--main-secondary-color); }
.uv-feed__body a:not(.uv-feed__user) { color: var(--color-active-text); }
.uv-feed__time, .uv-clist__meta { display: block; margin-top: 3px; font-size: 11px; opacity: .6; }
.uv-clist li { padding: 10px 0; border-top: 1px solid var(--border-field); }
.uv-clist__text { display: block; font-size: 13px; line-height: 1.45; color: var(--color); overflow-wrap: anywhere; }
.uv-clist__meta a { color: var(--color-active-text); }
@media screen and (max-width: 1024px) { .uv-comm-grid { grid-template-columns: minmax(0, 1fr); } }
@media screen and (max-width: 767px) {
.uv-comm { padding-top: 12px; }
.uv-comm-hero { padding: 16px; }
.uv-comm-hero h1 { font-size: 22px; }
.uv-comm-boards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.uv-mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.uv-mcard { padding: 12px 6px 10px; }
.uv-av--lg { width: 56px; height: 56px; font-size: 20px; }
.uv-sec-head h2 { font-size: 19px; }
}
/* uv profile (24 Sep): /members/ID/ header + tabs. See claude/tsthots/profile-24-sep.md */
.uv-prof { margin: 16px 0 18px; overflow: hidden; border-radius: 16px; border: 1px solid var(--border-field); background: var(--background-item); }
.uv-prof__cover { height: 110px; background: linear-gradient(120deg, rgba(150, 20, 217, .55), rgba(74, 22, 112, .35) 55%, rgba(150, 20, 217, .12)); }
.uv-prof__head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 18px; margin-top: -48px; padding: 0 24px; }
.uv-av.uv-av--xl { width: 112px; height: 112px; border: 4px solid var(--background-item); font-size: 42px; }
.uv-prof__id { flex: 1; min-width: 200px; padding-bottom: 6px; }
.uv-prof__name { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--main-secondary-color); overflow-wrap: anywhere; }
.uv-prof__online { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 3px rgba(46, 204, 113, .2); }
.uv-prof__meta { margin-top: 4px; font-size: 13px; opacity: .65; }
.uv-prof__actions { padding-bottom: 8px; }
.uv-prof__stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 24px 0; padding: 0; list-style: none; }
.uv-prof__stats li { flex: 1 1 110px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-field); background: var(--background-hold); }
.uv-prof__stats b { display: block; font-size: 20px; font-weight: 800; line-height: 1.2; color: var(--color-active-text); }
.uv-prof__stats span { font-size: 12px; opacity: .65; }
.uv-prof__bio { margin: 16px 24px 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.uv-prof__details { margin: 14px 24px 20px; }
.uv-prof__details summary { display: inline-block; cursor: pointer; list-style: none; font-size: 13px; font-weight: 600; color: var(--color-active-text); }
.uv-prof__details summary::-webkit-details-marker { display: none; }
.uv-prof__details summary::after { content: " \25BE"; }
.uv-prof__details[open] summary::after { content: " \25B4"; }
.uv-prof__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; }
.uv-prof__grid li > span:first-child { margin-right: 4px; opacity: .6; }
.uv-prof__grid a { color: var(--color-active-text); }
.uv-profpage .wrap_tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; border: 0; }
.uv-profpage .wrap_tabs .item_tab { margin: 0; padding: 0; border: 0; }
.uv-profpage .wrap_tabs .item_tab::after, .uv-profpage .wrap_tabs .tab_link::after { display: none; }
.uv-profpage .wrap_tabs .tab_link, .uv-profpage .wrap_tabs .tab-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 18px; border: 1px solid var(--border-field); background: var(--background-item); color: var(--color); font-size: 13px; font-weight: 600; }
.uv-profpage .wrap_tabs .tab_link:hover, .uv-profpage .wrap_tabs .item_tab.active .tab_link, .uv-profpage .wrap_tabs .tab-link.active { border-color: var(--color-active); background: var(--color-active); color: #fff; }
.uv-profpage .wrap_tabs .tab_link em, .uv-profpage .wrap_tabs .tab-link em { font-style: normal; opacity: .8; }
@media screen and (max-width: 767px) {
.uv-prof { margin-top: 10px; }
.uv-prof__cover { height: 80px; }
.uv-prof__head { gap: 12px; margin-top: -40px; padding: 0 16px; }
.uv-av.uv-av--xl { width: 84px; height: 84px; font-size: 32px; }
.uv-prof__name { font-size: 21px; }
.uv-prof__stats { margin: 14px 16px 0; }
.uv-prof__stats li { flex: 1 1 calc(50% - 8px); }
.uv-prof__bio, .uv-prof__details { margin-left: 16px; margin-right: 16px; }
}
/* uv album page (24 Sep). See claude/tsthots/album-page-24-sep.md */
.uv-album-head { margin: 16px 0 16px; }
.uv-album-title { margin: 0 0 10px; font-size: 26px; font-weight: 800; line-height: 1.25; color: var(--main-secondary-color); overflow-wrap: anywhere; }
.uv-album-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; }
.uv-album-by { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color); }
.uv-album-by:hover { color: var(--color-active-text); }
.uv-album-stat { opacity: .65; }
.uv-album-desc { margin-top: 10px; font-size: 14px; line-height: 1.55; opacity: .9; overflow-wrap: anywhere; }
.gallery_wrapper.uv-collapsed .item_photo:nth-child(n+25) { display: none; }
.uv-album-more { display: flex; justify-content: center; margin: 18px 0 8px; }
.uv-album-comments { margin-top: 26px; }
.uv-album-comments .uv-sec-head h2 { font-size: 20px; }
@media screen and (max-width: 767px) {
.uv-album-head { margin-top: 10px; }
.uv-album-title { font-size: 21px; }
}
/* uv categories (24 Sep). See claude/tsthots/categories-models-24-sep.md */
.thumb .wrap_image .no-thumb.uv-cat-ph { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; width: 100%; height: 100%; padding: 12px; background: linear-gradient(135deg, var(--color-active), #2a0f40); color: #fff; font-size: 22px; font-weight: 800; line-height: 1.2; text-align: center; text-transform: none; }
.uv-cat-intro { max-width: 900px; margin: 26px 0 6px; font-size: 14px; line-height: 1.6; opacity: .75; }
/* uv models A-Z (24 Sep): one swipeable row on phones instead of 4 wrapped rows */
@media screen and (max-width: 767px) {
.alphabet { flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin: 0 -10px 12px; padding: 0 10px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.alphabet::-webkit-scrollbar { display: none; }
.alphabet .item { flex: 0 0 auto; }
.alphabet span, .alphabet a { width: 34px; height: 34px; font-size: 13px; }
.alphabet .item:last-child span, .alphabet .item:last-child a { width: auto; padding: 0 12px; }
}
/* uv search models row (24 Sep). See claude/tsthots/search-24-sep.md */
.uv-smodels { margin: 8px 0 24px; }
.uv-smodels .uv-sec-head h2 { font-size: 20px; }
.uv-smodels__row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.uv-smodel { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 14px 6px 12px; border-radius: 14px; border: 1px solid var(--border-field); background: var(--background-item); color: var(--color); text-align: center; transition: border-color .2s, transform .2s; }
.uv-smodel:hover { border-color: var(--color-active); transform: translateY(-2px); color: var(--color); }
.uv-smodel strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; }
.uv-smodel__n { font-size: 11px; opacity: .6; }
@media screen and (max-width: 1024px) { .uv-smodels__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media screen and (max-width: 767px) {
.uv-smodels__row { display: flex; gap: 8px; overflow-x: auto; margin: 0 -10px; padding: 0 10px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.uv-smodels__row::-webkit-scrollbar { display: none; }
.uv-smodel { flex: 0 0 104px; }
}
/* uv search suggestions dropdown (24 Sep). See claude/tsthots/search-24-sep.md */
.autocomplete-suggestions { box-sizing: border-box; min-width: min(360px, calc(100vw - 20px)); margin-top: 6px; padding: 6px 0; overflow: auto; border-radius: 12px; border: 1px solid var(--border-field); background: var(--background-hold); box-shadow: 0 14px 34px rgba(0, 0, 0, .6); z-index: 10000 !important; }
.autocomplete-group { padding: 10px 16px 4px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-active-text); }
.autocomplete-suggestion { padding: 8px 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--color); cursor: pointer; }
.autocomplete-suggestion strong { font-weight: 800; color: var(--color-active-text); }
.autocomplete-selected { background: var(--background-item); }
/* uv community See All buttons (24 Sep) */
.uv-comm .headline .link_more { padding: 8px 16px; border-radius: 18px; border: 1px solid var(--border-field); background: var(--background-item); color: var(--color-active-text); font-size: 13px; font-weight: 700; text-transform: none; }
.uv-comm .headline .link_more .svg_icon { fill: currentColor; }
.uv-comm .headline .link_more:hover { border-color: var(--color-active); background: var(--color-active); color: #fff; }
.uv-comm .pagination { margin-top: 18px; }
/* uv animated avatars (24 Sep): still first frame, GIF plays on hover/tap on the profile header */
.uv-av { position: relative; }
.uv-av--anim { cursor: pointer; }
.uv-av--anim::after { content: "GIF"; position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); padding: 1px 6px; border-radius: 8px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; }
/* uv album gallery (24 Sep, audit F4): smaller tiles to suit the 200x150 thumbnails */
#uv_album_gallery .item_photo { width: 12.5%; }
@media screen and (max-width: 1024px) { #uv_album_gallery .item_photo { width: 16.666%; } }
@media screen and (max-width: 680px) { #uv_album_gallery .item_photo { width: 33.333%; } }
@media screen and (max-width: 374px) { #uv_album_gallery .item_photo { width: 50%; } }
/* uv batch 1 (24 Sep, audit F3/F5/F7/F8). See claude/tsthots/batch1-24-sep.md */
/* F3: locked / limit / deleted video box over the preview */
.player-holder .no-player { position: relative; overflow: hidden; border-radius: 12px; background: #000; }
.player-holder .no-player > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.35); }
.player-holder .no-player .message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: min(90%, 520px); margin: 0; padding: 22px 20px; border-radius: 14px; background: rgba(11, 10, 13, .82); border: 1px solid var(--border-field); color: #fff; font-size: 15px; font-weight: 500; line-height: 1.5; text-align: center; }
.player-holder .no-player .message a { display: inline-block; margin: 6px 4px 0; padding: 9px 20px; border-radius: 20px; background: var(--color-active); color: #fff; font-weight: 700; line-height: 1.2; }
.player-holder .no-player .message a:hover { filter: brightness(1.12); color: #fff; }
.player-holder .no-player .message .submit { margin-top: 10px; }
@media screen and (max-width: 640px) {
.player-holder .no-player .message { width: 94%; padding: 12px 10px; font-size: 13px; line-height: 1.4; }
.player-holder .no-player .message br { display: none; }
.player-holder .no-player .message a { margin-top: 8px; padding: 8px 14px; font-size: 13px; }
}
/* F5: album comments look like the video page (Add comment button for guests too) */
.uv-album-comments .block-comments > form { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.uv-album-comments .block-comments .title { order: 1; margin: 0; font-size: 22px; font-weight: 700; }
.uv-album-comments .block-comments .title .hint { margin-left: 10px; font-size: 14px; font-weight: 400; opacity: .75; }
.uv-album-comments .block-comments .toggle-button, .uv-album-comments .block-comments .toggle-button.hidden { order: 2; display: inline-flex; align-items: center; padding: 9px 20px; border-radius: 18px; background: var(--color-active); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.uv-album-comments .success { order: 3; width: 100%; }
.uv-album-comments .block-new-comment { order: 4; width: 100%; display: none; }
.uv-album-comments .block-new-comment .row, .uv-album-comments .block-new-comment .textarea { width: 100%; max-width: none; }
.uv-album-comments .block-new-comment .textarea { min-height: 66px; border-radius: 14px; }
.uv-album-comments .block-new-comment .submit { text-transform: none; border-radius: 18px; padding: 9px 28px; }
.uv-album-comments .block-comments > form ~ *, .uv-album-comments .list-comments { width: 100%; }
@media screen and (max-width: 640px) { .uv-album-comments .block-comments .title { font-size: 20px; } }
/* F7: video page - no empty sidebar while its ad spots are inactive; flag icon size */
.twocolumns > .column.second:has(> .uv-side-ads):not(:has(.uv-side-ads *)) { display: none; }
svg.uv-report-ico { display: block; width: 16px; height: 16px; }
/* F8: category placeholder tile - cancel the theme's centering transform */
.thumb .wrap_image .no-thumb.uv-cat-ph { top: 0; left: 0; right: 0; bottom: 0; transform: none; }
/* uv batch 2 (24 Sep). See claude/tsthots/batch2-24-sep.md */
/* F6 desktop header 1281-1600: no wrapping, readable search, buttons fit */
@media screen and (min-width: 1281px) {
.navigation li.item > a { white-space: nowrap; }
.navigation li.item:has(.header-link-mobile-dot) { margin-right: 10px; }
.header .search { min-width: 150px; }
}
@media screen and (min-width: 1281px) and (max-width: 1600px) {
.navigation ul { column-gap: 9px !important; }
.navigation li.item > a { font-size: 14px; }
.header .group { gap: 12px; }
.header .group .button_action { padding: 0 16px; }
}
@media screen and (min-width: 1281px) and (max-width: 1380px) {
.navigation ul { column-gap: 7px !important; }
.navigation li.item > a { font-size: 13px; }
.header .search { min-width: 120px; }
.header .group { gap: 8px; }
.header .group .button_action { padding: 0 12px; }
}
/* search models row title (not a heading) */
.uv-smodels__title { font-size: 20px; font-weight: 800; color: var(--main-secondary-color); }
/* similar searches: one swipeable row of pills on phones */
@media screen and (max-width: 767px) {
.search-cloud { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; margin: 0 -10px; padding: 0 10px 6px; font-size: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.search-cloud::-webkit-scrollbar { display: none; }
.search-cloud a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--border-field); background: var(--background-item); color: var(--color); font-size: 13px !important; font-weight: 600 !important; white-space: nowrap; }
}
/* tap targets on phones */
@media screen and (max-width: 767px) {
.header-links-mobile a { display: inline-flex; align-items: center; min-height: 40px; }
.thumb-uploader a { min-height: 28px; padding-top: 5px; padding-bottom: 5px; }
}
/* register / login popups: readable text on the dark popup */
.fancybox-wrap h2.title, .fancybox-wrap .title, .fancybox-wrap label, .fancybox-wrap .field-label { color: var(--color); }
/* community playlists: rows of 6 / 3 / 2 so 6 items always fill whole rows */
#list_playlists_playlists_items > .thumb { width: 16.666%; }
@media screen and (max-width: 1024px) { #list_playlists_playlists_items > .thumb { width: 33.333%; } }
@media screen and (max-width: 640px) { #list_playlists_playlists_items > .thumb { width: 50%; } }
/* uv video action row (24 Sep, audit re-run): like / dislike / favourite + comments / report / share on one line down to 360 px */
@media screen and (max-width: 480px) {
.media_panel.uv-panel { gap: 6px; }
.media_panel.uv-panel > .col { gap: 6px; }
.media_panel.uv-panel .rate-like.uv-like:not(.disabled) { padding-right: 10px; }
.media_panel.uv-panel .btn-favourites .btn_drop { padding-left: 10px; padding-right: 10px; }
.media_panel.uv-panel .tabs-menu .btn_tab { width: 36px; min-width: 36px; }
}