html {
            box-sizing: border-box
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit
        }

        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        nav,
        section {
            display: block
        }

        li {
            list-style: none
        }

        table {
            border-collapse: separate;
            border-spacing: 0
        }

        img {
            border: none
        }

        input {
            border: none
        }

        input[type=submit],
        input[type=text] {
            -webkit-appearance: none
        }

        input:focus {
            outline: none
        }

        input[type=submit],
        button {
            cursor: pointer
        }

        input[type=submit]:focus,
        button:focus {
            outline: none
        }

        a {
            text-decoration: none
        }

        .grid {
            display: grid;
            grid-template-rows: repeat(var(--grid-rows, 1), 1fr);
            grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
            gap: var(--grid-gutter, var(--gutter))
        }

        .grid__col-1 {
            grid-column: auto/span 1
        }

        .grid__col-2 {
            grid-column: auto/span 2
        }

        .grid__col-3 {
            grid-column: auto/span 3
        }

        .grid__col-4 {
            grid-column: auto/span 4
        }

        .grid__col-5 {
            grid-column: auto/span 5
        }

        .grid__col-6 {
            grid-column: auto/span 6
        }

        .grid__col-7 {
            grid-column: auto/span 7
        }

        .grid__col-8 {
            grid-column: auto/span 8
        }

        .grid__col-9 {
            grid-column: auto/span 9
        }

        .grid__col-10 {
            grid-column: auto/span 10
        }

        .grid__col-11 {
            grid-column: auto/span 11
        }

        .grid__col-12 {
            grid-column: auto/span 12
        }

        @media(max-width: 576px) {
            .grid {
                display: flex;
                flex-direction: column
            }

            [class*=grid__col-] {
                grid-column: auto
            }
        }

        

        :root {
            --nf-height: 54px;
            --nf-container-pad: 6px;
            --nf-bg-1: #ededed;
            --nf-bg-2: #f8f8f8;
            --nf-bg-3: #fff;
            --nf-bg-count: #FF9667
        }

        :root {
            --font-1: Inter Tight, sans-serif;
            --font-light: 300;
            --font-normal: 400;
            --font-medium: 500;
            --font-bold: 600;
            --font-extrabold: 700;
            --font-black: 800;
            --color-primary: #222;
            --color-primary-rgb: 34, 34, 34;
            --color-link: #222;
            --color-white: #fff;
            --color-white-rgb: 255, 255, 255;
            --color-orange: #FA5D29;
            --color-errors: #FA5D29;
            --color-blue: #49B3FC;
            --color-featured: #f8f0ee;
            --color-red: #FA5D29;
            --color-underlined: var(--color-primary-rgb);
            --color-connect: #FF602C;
            --color-connect-2: #FFAE94;
            --color-connect-3: #FFC5B1;
            --color-inspire: #AAEEC4;
            --color-inspire-2: #C8E4D3;
            --color-inspire-3: #E2F4E9;
            --color-awards: #502bd8;
            --color-awards-2: #6749d1;
            --color-awards-3: #917eda;
            --color-read: #c0ab3c;
            --color-read-2: #CDC38B;
            --color-read-3: #DBD6C0;
            --color-learn: #FFF083;
            --color-learn-2: #FFF9D0;
            --color-learn-3: #fffbe2;
            --color-jobs: #74bcff;
            --color-jobs-2: #99ccfc;
            --color-jobs-3: #b4d7f8;
            --text-size-small: 11px;
            --text-size-primary: 14px;
            --text-size-medium: 18px;
            --text-size-large: 22px;
            --border-gray: #ededed;
            --color-dotteds-rgb: 34, 34, 34;
            --bg-primary: #F8F8F8;
            --bg-primary-rgb: 248, 248, 248;
            --bg-secondary: #222;
            --bg-3rd: #ededed;
            --bg-4rd: #f8f8f8;
            --bg-white: white;
            --innerWidth: 1816px;
            --header-height: 71px;
            --gutter: 20px;
            --pad-inner: 52px;
            --color-odd-rows: #f8f8f8;
            --avatar-bg: #F8F8F8;
            --border-table: #222;
            --border-thin: 0.5px;
            --alert-green: #e0f4d9;
            --alert-green-rgb: 224, 244, 217;
            --alert-yellow: #FFF083;
            --alert-yellow-rgb: 255, 240, 131;
            --modal-alpha: 0.7;
            --rounded-small: 4px;
            --rounded-normal: 8px;
            --rounded-large: 1rem;
            --img-resizing-site: 16 / 12;
            --img-resizing-paronamic: 2 / 1;
            --img-resizing-desktop: 19 / 10
        }

        .fs-1 {
            font-size: 24px
        }

        html {
            scroll-behavior: smooth;
            font-size: var(--text-size-primary)
        }

        body {
            margin: auto;
            font-family: var(--font-1);
            font-size: var(--text-size-primary);
            font-weight: 300;
            background: var(--bg-primary);
            color: var(--color-primary);
            line-height: 200%;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility
        }

        body.dark {
            --color-primary: #eee;
            --bg-primary: #121212
        }

        @media(min-width: 768px) {
            body.has-header-above #content {
                margin-top: -71px
            }

            body.has-header-above #header {
                background: rgba(0, 0, 0, 0)
            }
        }

        body.header-dark #header {
            --color-primary: #fff;
            --bg-primary: #222;
            --sf-bg: #383838;
            --button-bg: var(--color-primary);
            --button-color: #222;
            color: var(--color-primary)
        }

        .content-header {
            background: var(--ch-bg, transparent);
            overflow: hidden
        }

        @media(min-width: 768px) {
            .content-header {
                margin-bottom: clamp(30px, 6vw, 100px);
                padding-top: 71px;
                padding-bottom: clamp(30px, 6vw, 100px)
            }
        }

        .content-header .block {
            margin-bottom: 0
        }

        input,
        select,
        textarea,
        button {
            font-family: var(--font-1);
            font-size: var(--text-size-primary)
        }

        figure img {
            display: block
        }

        a {
            color: var(--color-link)
        }

        strong {
            font-weight: var(--font-bold)
        }

        .ico-svg {
            position: relative;
            display: inline-block;
            height: auto;
            fill: currentColor;
            transition: all .3s
        }

        .ico-svg.is-success {
            color: #52c67e
        }

        .ico-svg.is-danger {
            color: #fa5d29
        }

        .ico-svg.is-alert {
            color: #ff602c
        }

        .ico-svg[class*="--reflect"] {
            transform: scaleX(-1)
        }

        .ico-svg[class*="--white"] {
            color: #fff
        }

        .ico-svg[class*="--middle"] {
            top: -1px;
            vertical-align: middle;
            margin-right: .1em
        }

        .bg-color-academy {
            background-color: var(--color-learn) !important
        }

        img {
            max-width: 100%
        }

        :root {
            --sf-height: 42px;
            --sf-bg: #ededed;
            --hf-bg: var(--bg-primary)
        }

        body.has-header-sticky #header {
            position: sticky;
            top: 0;
            z-index: 3;
            background: var(--bg-primary)
        }

        body.has-header-dark .header-main {
            --hm-color: white;
            --button-color: var(--color-primary);
            --button-bg: var(--hm-color);
            --button-border: var(--hm-color);
            --sf-bg: #333
        }

        body.has-header-dark .header-main .button[class*="--outline"] {
            --button-color: var(--hm-color)
        }

        body.has-header-dark .header-main .button[class*="--outline"]:hover {
            --button-border: var(--color-primary)
        }

        body.has-header-dark:has(.nav-header-main__link.is-open) .header-main,
        body.has-header-dark:has(.header-main.has-search-focus) .header-main {
            --hm-color: #222;
            --sf-bg: var(--nf-bg-3)
        }

        body:has(.nav-header-main__link.is-open),
        body:has(.header-main.has-search-focus),
        body:has(.nav-header-main.is-open) {
            overflow-y: hidden
        }

        @media(max-width: 1270px) {

            body:has(.nav-header-main__link.is-open),
            body:has(.header-main.has-search-focus),
            body:has(.nav-header-main.is-open) {
                --ch-bg: var(--bg-primary)
            }

            body:has(.nav-header-main__link.is-open) .marquee-top,
            body:has(.header-main.has-search-focus) .marquee-top,
            body:has(.nav-header-main.is-open) .marquee-top {
                display: none
            }
        }

        @media(min-width: 1270px) {
            body:has(.bt-dropdown-user) .nav-header-main__content {
                padding-right: 328px
            }

            body:has(.nav-header-main__link.is-open) .nav-header-main,
            body:has(.header-main.has-search-focus) .nav-header-main {
                margin-inline: 0
            }

            body:has(.nav-header-main__link.is-open) .nav-header-main__item,
            body:has(.header-main.has-search-focus) .nav-header-main__item {
                padding-inline: 0
            }

            body:has(.nav-header-main__link.is-open) .nav-header-main__item:not(.has-dropdown),
            body:has(.header-main.has-search-focus) .nav-header-main__item:not(.has-dropdown) {
                display: none
            }

            body:has(.nav-header-main__link.is-open) .nav-header-main__link,
            body:has(.header-main.has-search-focus) .nav-header-main__link {
                display: none
            }
        }

        #header {
            --header-mt: 8px;
            position: relative;
        }

        .header-fixed #header {
            position: sticky;
            top: 0;
            background: var(--bg-primary);
            z-index: 4
        }

        #header.is-top {
            z-index: 5
        }

        @media(max-width: 768px) {
            #header {
                --header-mt: 0px;
                position: sticky;
                top: 0;
                margin-top: 0;
                z-index: 5;
                background: var(--bg-primary)
            }

            #header .inner {
                inline-size: auto;
                margin-inline: 0
            }
        }

        .c-header-main {
            --header-height: 54px;
            width: var(--innerWidth);
            max-width: 100%;
            height: var(--header-height)
        }

        .header-main {
            --hm-color: var(--color-primary);
            --hm-text: var(--text-size-primary);
            --hm-active-bg: #ededed;
            --hm-active-bg-2: var(--bg-primary);
            --hm-active-color: var(--color-primary);
            --hm-active-2-color: var(--color-primary);
            --hm-active-3-color: rgba(0, 0, 0, 0.13);
            --hm-border-alpha: 0.3;
            --hm-separator: 10px;
            --color-link: var(--hm-color);
            position: relative;
            font-weight: 400;
            color: var(--hm-color);
            z-index: 3
        }

        .header-main.has-search-focus .header-main__container {
            z-index: 1
        }

        .header-main.has-search-focus .search-inspiration li:has([data-section=search]) {
            display: block
        }

        .header-main.has-search-focus .search-inspiration li:has([data-section=nav]) {
            display: none
        }

        @media(min-width: 1270px) {
            .header-main.has-search-focus .nav-header-main__item {
                border-bottom: 0
            }

            .header-main.has-search-focus .nav-header-main__item:not(:has(.nav-header-main__dropdown)) {
                display: none
            }

            .header-main.has-search-focus .nav-header-main__link {
                display: none
            }
        }

        .header-main.has-search-fill .search-inspiration__nav {
            display: none
        }

        .header-main.has-search-fill .search-inspiration__searching {
            display: block
        }

        @media(max-width: 1270px) {
            .header-main.has-search-fill .nav-header-main__item {
                border-bottom: 0
            }

            .header-main.has-search-fill .nav-header-main__item:not(:has(.nav-header-main__dropdown)) {
                display: none
            }

            .header-main.has-search-fill .nav-header-main__link {
                display: none
            }
        }

        .header-main:has(.nav-header-main__link.is-open),
        .header-main.has-search-focus {
            --color-primary: #222;
            --hm-color: #222;
            --sf-bg: var(--nf-bg-3);
            --button-bg: var(--hm-color);
            --button-color: white;
            --button-border: var(--hm-color)
        }

        .header-main:has(.nav-header-main__link.is-open) .header-main__overlay,
        .header-main.has-search-focus .header-main__overlay {
            opacity: 1;
            visibility: visible
        }

        @media(min-width: 1270px) {

            .header-main:has(.nav-header-main__link.is-open) .header-main__container,
            .header-main.has-search-focus .header-main__container {
                background: var(--hm-active-bg);
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0
            }

            .header-main:has(.nav-header-main__link.is-open) .nav-header-main__dropdown,
            .header-main.has-search-focus .nav-header-main__dropdown {
                height: auto;
                opacity: 1;
                visibility: visible
            }
        }

        .header-main__container {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            height: var(--header-height);
            /* padding-inline: 6px; */
            font-size: var(--hm-text);
            color: var(--hm-color);
            border-radius: var(--rounded-normal);
            background: var(--ch-bg, --bg-primary);
            transition: all .3s
        }

        .header-main__overlay {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 200svw;
            height: 200svh;
            background: rgba(0, 0, 0, var(--modal-alpha));
            transform: translate(-50%, -50%);
            z-index: -1;
            transition: all .3s;
            opacity: 0;
            visibility: hidden
        }

        .header-main__logo {
            position: relative;
            /* left: 4px */
        }

        .header-main__hamburger {
            position: relative;
            display: none; /* Will be overridden in media queries */
            align-items: center;
            height: 100%;
            margin-right: 12px;
            cursor: pointer
        }

        .header-main__hamburger:before {
            content: "";
            position: absolute;
            inset: 0;
            width: 48px;
            left: -20px
        }

        .header-main__hamburger svg {
            stroke: currentColor
        }

        .header-main__logo img {
            display: block;
            fill: var(--hm-color);
            transition: all .3s;
        }

        .header-main__search {
            flex: 1;
            margin-left: clamp(8px, 3vw, 24px)
        }

        .header-main__right {
            display: flex;
            gap: 12px;
            height: var(--sf-height);
            margin-left: auto;
            align-items: center;
        }

        .header-main__bts {
            display: flex;
            gap: 12px
        }

        .header-main__bts .button {
            font-weight: var(--font-bold)
        }

        .header-main__user {
            height: 100%;
            display: flex;
            align-items: center;
            gap: 16px
        }

        .header-main__separator {
            width: 1px;
            height: 24px;
            background-color: rgba(var(--color-primary-rgb), 0.2)
        }

        .header-main__link {
            cursor: pointer
        }

        .header-main__ico {
            display: none;
            align-items: center;
            cursor: pointer
        }

        @media(max-width: 1270px) {
            .header-main:has(.nav-header-main.is-open) .header-main__overlay {
                opacity: 1;
                visibility: visible
            }

            .header-main__logo {
                position: static
            }

            .header-main__hamburger {
                display: flex !important
            }

            .header-main__overlay {
                display: none
            }
        }

        @media(max-width: 1024px) {
            .header-main #g_id_onload {
                display: none
            }
        }

        @media(max-width: 768px) {
            .header-main__container {
                border-radius: 0;
                padding-inline: 0 var(--pad-inner)
            }

            .header-main__hamburger {
                justify-content: center;
                margin-right: 0;
                aspect-ratio: 1/1;
                min-width: 40px;
                min-height: 40px;
                color: var(--color-primary)
            }
        }

        .nav-header-main {
            height: var(--header-height);
            margin-inline: 60px 0px;
            font-weight: var(--font-medium) !important
        }

        .nav-header-main.is-open {
            left: 0;
            opacity: 1;
            visibility: visible;
            transform: translateX(0)
        }

        .nav-header-main.is-open .nav-header-main__dropdown {
            opacity: 1;
            visibility: visible
        }

        .nav-header-main__content {
            min-height: 450px;
            padding: 0 424px 12px 60px
        }

        .nav-header-main__list {
            display: flex;
            align-items: center;
            height: 100%
        }

        .nav-header-main__item {
            height: 100%;
            padding-inline: 10px
        }

        .nav-header-main__item.has-dropdown .nav-header-main__link {
            cursor: pointer
        }

        .nav-header-main__link {
            display: flex;
            align-items: center;
            height: 100%;
            color: var(--hm-color);
            transition: all .3s;
            font-size: 14px;
            font-weight: var(--font-medium)
        }

        .nav-header-main__link.is-open .nav-header-main__arrow {
            transform: scaleY(-1)
        }

        .nav-header-main__link:has(.budget-tag) {
            gap: 4px
        }

        .nav-header-main__link:hover {
            opacity: .7
        }

        .nav-header-main__link .ico-svg {
            margin-left: 6px
        }

        .nav-header-main__arrow {
            transition: none
        }

        .nav-header-main__arrow--sub {
            display: none
        }

        .nav-header-main__dropdown {
            position: absolute;
            top: calc(100% - 1px);
            left: 0;
            width: 100%;
            height: 0;
            background: var(--hm-active-bg);
            color: var(--hm-active-2-color);
            font-weight: lighter;
            background: var(--hm-active-bg);
            border-bottom-left-radius: var(--rounded-normal);
            border-bottom-right-radius: var(--rounded-normal);
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
            transition: all .3s;
            z-index: 1
        }

        .nav-header-main__social {
            display: none
        }

        .nav-header-main__sponsor {
            position: absolute;
            bottom: 0;
            right: 8px;
            margin-right: 12px;
            margin-bottom: 12px;
            font-size: 14px;
            font-weight: 400;
            color: var(--hm-color)
        }

        @media(max-width: 1270px) {
            .nav-header-main {
                --nhm--top: calc(var(--header-height) + calc(var(--header-mt) * 2));
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                position: fixed;
                top: var(--nhm--top);
                left: 0;
                width: 100%;
                min-height: calc(100dvh - var(--nhm--top));
                margin: 0;
                padding: 0;
                font-weight: 300;
                background: var(--bg-primary);
                overflow-y: auto;
                z-index: 1;
                opacity: 0;
                visibility: hidden;
                transition: opacity .3s
            }

            .nav-header-main__content {
                min-height: auto;
                padding: 0
            }

            .nav-header-main__list {
                flex-direction: column;
                gap: 0;
                height: auto
            }

            .nav-header-main__list>li:not(:last-child) {
                border-bottom: 1px solid rgba(0, 0, 0, var(--hm-border-alpha))
            }

            .nav-header-main__link {
                background: var(--hm-active-3-color)
            }

            .nav-header-main__item {
                flex-direction: column;
                width: 100%;
                height: auto;
                padding-inline: 0
            }

            .nav-header-main__link {
                display: flex;
                justify-content: space-between;
                width: 100%;
                height: 54px;
                padding: 12px 20px;
                line-height: normal;
                font-weight: var(--font-medium);
                font-family: var(--font-1);
                font-size: 16px !important;
            }

            .nav-header-main__link.is-open+.nav-header-main__dropdown {
                display: block
            }

            .nav-header-main__link .ico-svg {
                display: none
            }

            .nav-header-main__dropdown {
                position: static;
                height: auto
            }

            .nav-header-main__dropdown .inner {
                inline-size: auto
            }

            .nav-header-main__social {
                display: flex;
                justify-content: space-around
            }

            .nav-header-main__social a {
                display: block;
                padding: 12px
            }

            .nav-header-main__social .ico-svg {
                display: block
            }

            .nav-header-main__sponsor {
                display: none;
                position: static
            }

            .nav-header-main .search-inspiration {
                --si-gap: 16px
            }
        }

        .search-form {
            position: relative;
            display: flex;
            align-items: center;
            gap: 20px;
            height: var(--sf-height);
            background: var(--sf-bg);
            border-radius: var(--rounded-normal);
            transition: background .3s
        }

        .search-form__field {
            display: flex;
            flex: 1;
            height: 100%;
            padding-left: 16px;
            border-top-left-radius: var(--rounded-normal);
            border-bottom-left-radius: var(--rounded-normal)
        }

        .search-form__button {
            display: flex;
            align-items: center;
            padding: 0;
            background: rgba(0, 0, 0, 0);
            border: none;
            cursor: pointer
        }

        .search-form__button:focus {
            outline: none
        }

        .search-form__button .ico-svg {
            fill: var(--hm-color)
        }

        .search-form__input {
            position: absolute;
            inset: 0;
            padding-left: 38px;
            background: rgba(0, 0, 0, 0);
            border: none;
            font-size: .95rem;
            color: var(--hm-color)
        }

        .search-form__input:focus {
            outline: none
        }

        .search-form__input::-moz-placeholder {
            color: var(--hm-color)
        }

        .search-form__input::placeholder {
            color: var(--hm-color)
        }

        .search-inspiration {
            --si-gap: 28px;
            --si-nav-width: 180px;
            position: relative;
            display: flex;
            gap: var(--si-gap);
            width: 100%;
            font-weight: 400;
            color: var(--hm-color)
        }

        .search-inspiration__nav {
            width: var(--si-nav-width)
        }

        .search-inspiration__nav .search-inspiration__list {
            display: none;
            position: absolute;
            top: 0;
            width: calc(100% - 200px);
            height: 400px;
            margin-left: 200px
        }

        .search-inspiration__nav li:has([data-section=search]) {
            display: none
        }

        .search-inspiration__nav li:not(:last-child) {
            margin-bottom: 2px
        }

        .search-inspiration__searching {
            display: none;
            width: 100%
        }

        .search-inspiration__section {
            position: relative;
            display: flex;
            align-items: center;
            height: 40px;
            padding-inline: 38px 16px;
            border-radius: var(--rounded-normal);
            cursor: pointer;
            transition: all .3s
        }

        .search-inspiration__section.is-active {
            background: var(--nf-bg-3);
            font-weight: var(--font-bold)
        }

        .search-inspiration__section.is-active+.search-inspiration__list {
            display: block
        }

        .search-inspiration__section:hover {
            background: var(--nf-bg-3)
        }

        .search-inspiration__section .search-inspiration__ico {
            position: absolute;
            top: 50%;
            left: 16px;
            transform: translateY(-50%)
        }

        .search-inspiration__section .search-inspiration__arrow {
            display: none
        }

        .search-inspiration__item {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;
            padding-inline: 8px;
            line-height: normal;
            border-radius: var(--rounded-normal);
            transition: all .3s
        }

        .search-inspiration__item:hover {
            background: var(--nf-bg-3)
        }

        .search-inspiration__item[data-count]::after {
            padding: 2px 2px 0 2px;
            content: attr(data-count);
            margin-left: 4px;
            margin-left: 4px;
            border-radius: 2px;
            font-size: 14px;
            line-height: 10px
        }

        .search-inspiration__item-text {
            display: flex;
            align-items: center
        }

        .search-inspiration__item-text .ico-svg {
            margin-inline: 8px 10px
        }

        .search-inspiration__item span {
            flex: 1
        }

        .search-inspiration__item span:not(.budget-tag) {
            width: 0;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden
        }

        .search-inspiration [data-search-target]+[data-search-target] {
            margin-block: 16px
        }

        .search-inspiration__list:has(.avatar-name) {
            padding-left: 14px
        }

        .search-inspiration__list:has(.avatar-name) li:not(:last-child) {
            margin-bottom: 16px
        }

        @media(max-width: 1270px) {
            .search-inspiration {
                --si-nav-width: 100%
            }

            .search-inspiration__nav .search-inspiration__list {
                position: static;
                width: 100%;
                height: auto;
                margin-left: 0
            }

            .search-inspiration__nav li:not(:last-child) {
                margin-bottom: 0
            }

            .search-inspiration__menu li {
                --hm-border-alpha: 0.1;
                border-top: 1px solid rgba(0, 0, 0, var(--hm-border-alpha))
            }

            .search-inspiration__section {
                justify-content: space-between;
                height: 54px;
                padding-inline: var(--pad-inner);
                border-radius: 0
            }

            .search-inspiration__section.is-active {
                background: var(--hm-active-3-color);
                border-radius: 0
            }

            .search-inspiration__section.is-active .search-inspiration__arrow {
                transform: scaleY(-1)
            }

            .search-inspiration__section .search-inspiration__ico {
                display: none
            }

            .search-inspiration__section .search-inspiration__arrow {
                display: block
            }

            .search-inspiration__item {
                height: 54px;
                padding-inline: var(--pad-inner);
                background: #fff;
                border-radius: 0
            }

            .search-inspiration__item .ico-svg {
                margin-left: 0
            }

            .search-inspiration__searching {
                padding-block: 16px;
                background: #fff
            }

            .search-inspiration__searching .search-inspiration__item {
                height: 30px
            }
        }        

            .bt-dropdown-user {
                position: relative;
                display: flex;
                align-items: center
            }

            .header-main__right:hover .dropdown-user {
                opacity: 1;
                visibility: visible
            }

            .bt-dropdown-user .circle-avatar {
                font-size: 1.25em
            }

            @media(max-width: 576px) {
                .bt-dropdown-user .bt-dropdown-user__link {
                    pointer-events:none
                }
            }

        .dropdown-user {
            --color-hover: rgba(255, 255, 255, 0.1);
            position: absolute;
            top: calc(100% + 12px);
            left: -50px;
            right: auto;
            width: 230px;
            padding: 20px 0;
            background: var(--bg-secondary);
            color: var(--color-white) !important;
            border-radius: var(--rounded-normal);
            z-index: 3;
            transition: all .3s;
            opacity: 0;
            visibility: hidden
        }

        .dropdown-user:before {
            content: "";
            width: 44px;
            height: 44px;
            position: absolute;
            top: -25px
        }

        .dropdown-user__list {
            padding: 16px 0;
            border-bottom: 1px solid var(--color-hover)
        }

        .dropdown-user__list:first-child {
            padding-top: 0
        }

        .dropdown-user__list:last-child {
            padding-bottom: 0;
            border-bottom: 0
        }

        .user-name {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            font-weight: var(--font-medium);
            font-size: 14px;
            margin-bottom: 0px !important;
        }

        @media(max-width: 576px) {
            .user-name {
                display: none
            }
        }

        .dropdown-user__link {
            padding: 0 28px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--color-white) !important;
            transition: all .3s
        }

        .dropdown-user__link:hover {
            background-color: var(--color-hover)
        }

        @media(max-width: 1000px) {
            .dropdown-user {
                left: auto;
                right: 0
            }
        }

        :root {
            --height-input: 48px;
            --pad-input: 16px;
            --bg-input: #fff;
            --bg-input-hover: #f8f8f8;
            --color-input: #222;
            --border-input: #ededed;
            --check-toggle-width: 80px;
            --check-toggle-height: 40px;
            --check-toggle-color-ball: #fff;
            --check-toggle-color-bg: #dedede;
            --check-toggle-color-bg-checked: #222
        }

        .form-field {
            position: relative;
            width: 100%
        }

        .form-field.is-invalid .text-input {
            color: currentColor;
            border-color: var(--color-errors)
        }

        .form-field.is-invalid .input-drag {
            border-color: var(--color-errors)
        }

        .form-field.is-invalid .link-underlined {
            --color-underlined: 250, 93, 41
        }

        .form-field.is-invalid .form-field__msg {
            color: var(--color-errors)
        }

        .form-field__label {
            display: block;
            margin-bottom: 8px;
            line-height: 100%;
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 300;
            color: #a7a7a7
        }

        .form-field__label.is-required:after {
            content: " (*)"
        }

        .form-field__msg {
            padding-top: 1em;
            font-size: var(--text-size-small);
            line-height: 100%;
            color: #a7a7a7
        }

        .form-field__msg li:not(:last-child) {
            margin-bottom: .5em
        }

        .form-field__remove {
            position: absolute;
            bottom: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 36px;
            height: var(--height-input);
            cursor: pointer;
            transition: all .3s
        }

        .form-field__remove:hover {
            opacity: .7
        }

        .form-field__remove+.text-input {
            padding-right: 36px
        }

        .form-field .text-input {
            width: 100%
        }

        .text-input {
            display: block;
            height: var(--height-input);
            padding: 0 var(--pad-input);
            background: var(--bg-input);
            border: 0;
            color: var(--color-input);
            border-bottom: 1px solid var(--border-input);
            transition: all .3s ease-in-out
        }

        .text-input:focus {
            outline: 0;
            border-color: #a7a7a7
        }

        .text-input:disabled {
            background: var(--bg-primary)
        }

        .text-input::-moz-placeholder {
            color: #dedede;
            font-weight: 300
        }

        .text-input::placeholder {
            color: #dedede;
            font-weight: 300
        }

        textarea.text-input {
            height: 100px;
            padding-top: var(--pad-input)
        }

        .box-input-check-toggle {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .box-text-input {
            position: relative;
            display: flex;
            width: 100%;
            background: var(--bg-input)
        }

        .box-text-input__url {
            display: flex;
            align-items: center;
            padding-left: var(--pad-input);
            color: #a7a7a7;
            border-bottom: 1px solid var(--border-input)
        }

        .box-text-input .text-input {
            width: 100%;
            padding-left: 4px
        }

        .c-toggle {
            display: inline-flex;
            gap: 16px
        }

        .label-c-toggle+.c-toggle {
            margin-left: 2em
        }

        .c-toggle__col {
            display: flex;
            align-items: center
        }

        .c-toggle strong {
            position: relative;
            line-height: 130%
        }

        .c-toggle sup {
            position: absolute;
            bottom: 100%;
            left: 0;
            width: 100%;
            text-align: center;
            color: #7a7a7a;
            font-size: var(--text-size-small)
        }

        .check-toggle {
            display: inline-block;
            position: relative;
            width: var(--check-toggle-width);
            height: var(--check-toggle-height);
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none
        }

        .check-toggle__ball {
            position: relative;
            top: 2px;
            display: block;
            width: calc(var(--check-toggle-height) - 4px);
            height: calc(var(--check-toggle-height) - 4px);
            background: var(--check-toggle-color-ball);
            border-radius: 50%;
            transform: translateX(2px);
            transition: all .3s
        }

        .check-toggle input {
            display: none
        }

        .check-toggle input:checked+label {
            --check-toggle-color-bg: var(--check-toggle-color-bg-checked)
        }

        .check-toggle input:checked+label .check-toggle__ball {
            transform: translateX(calc(var(--check-toggle-width) - var(--check-toggle-height) + 2px))
        }

        .check-toggle label {
            position: absolute;
            inset: 0;
            background: var(--check-toggle-color-bg);
            border-radius: var(--check-toggle-height);
            cursor: pointer;
            transition: all .3s
        }

        .input-check {
            position: relative;
            display: inline-block
        }

        .input-check input {
            display: none
        }

        .input-check label {
            display: inline-block;
            position: relative;
            padding-left: 25px;
            margin-right: 30px;
            line-height: 130%;
            cursor: pointer
        }

        .input-check label:before {
            content: "";
            display: block;
            position: absolute;
            top: 9px;
            left: 0;
            width: 19px;
            height: 19px;
            margin-top: -10px;
            border: 2px solid #dedede;
            border-radius: var(--rounded-small)
        }

        .input-check label:after {
            content: "";
            position: absolute;
            top: 4px;
            left: 5px;
            width: 9px;
            height: 9px;
            background: var(--color-primary);
            border-radius: 2px;
            opacity: 0;
            transform: scale(0);
            transition: all .3s
        }

        .input-check input[type=checkbox]:checked+label:after {
            opacity: 1;
            transform: scale(1)
        }

        .input-check input[type=radio]:checked+label:after {
            opacity: 1;
            transform: scale(1)
        }

        .input-check input[type=radio]+label:before {
            border-radius: 50%
        }

        .input-check input[type=radio]+label:after {
            border-radius: 50%;
            border: none;
            top: 4px;
            left: 5px;
            width: 9px;
            height: 9px;
            background-color: var(--color-primary);
            border-radius: 50%;
            transform: scale(0)
        }

        .input-ranger-double {
            --height-ranger: 20px;
            position: relative;
            width: 100%;
            height: var(--height-ranger)
        }

        .input-ranger-double__input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 100%;
            outline: none;
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0);
            pointer-events: none
        }

        .input-ranger-double__track {
            width: 100%;
            height: 4px;
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            border-radius: var(--height-ranger)
        }

        .input-ranger-double input[type=range]::-webkit-slider-runnable-track {
            -webkit-appearance: none
        }

        .input-ranger-double input[type=range]::-moz-range-track {
            -moz-appearance: none
        }

        .input-ranger-double input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: var(--height-ranger);
            width: var(--height-ranger);
            background-color: var(--color-white);
            border: 2px solid #27ae60;
            pointer-events: auto;
            border-radius: 50%;
            cursor: pointer
        }

        .input-ranger-double input[type=range]::-moz-range-thumb {
            -webkit-appearance: none;
            height: var(--height-ranger);
            width: var(--height-ranger);
            background-color: var(--color-white);
            border: 2px solid #27ae60;
            pointer-events: auto;
            border-radius: 50%;
            cursor: pointer;
            box-sizing: border-box
        }

        .input-ranger-double input[type=range]:active::-webkit-slider-thumb {
            background: #27ae60
        }

        .input-ranger-double__values {
            display: flex;
            justify-content: space-between;
            padding-top: 8px;
            color: #a7a7a7
        }

        .input-ranger-double__values strong {
            color: var(--color-primary)
        }

        .input-drag {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid var(--border-input);
            aspect-ratio: var(--input-ratio, 1/1);
            border-radius: var(--rounded-small);
            background-color: var(--bg-input);
            overflow: hidden;
            transition: all .3s
        }

        .input-drag:hover {
            border-color: #a7a7a7
        }

        .input-drag.is-drag {
            border-color: var(--color-primary);
            border-style: dashed;
            background-color: #ededed
        }

        .input-drag.is-inserted:hover .input-drag__hover {
            opacity: 1
        }

        .input-drag.is-inserted .input-drag__hover {
            z-index: 1
        }

        .input-drag__input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            overflow: hidden;
            cursor: pointer;
            z-index: 1
        }

        .input-drag__label {
            padding: 20px;
            text-align: center;
            line-height: 140%
        }

        .input-drag__label p {
            margin-bottom: .5em
        }

        .input-drag__label p:last-child {
            margin-bottom: 0
        }

        .input-drag__preview {
            position: absolute;
            inset: 0
        }

        .input-drag__preview img,
        .input-drag__preview video {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover
        }

        .input-drag__hover {
            position: absolute;
            inset: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            background: rgba(0, 0, 0, .5);
            opacity: 0;
            transition: all .3s
        }

        .input-drag__hover .button {
            position: relative;
            z-index: 5;
            pointer-events: auto
        }

        .input-drag__hover .button:hover {
            background: red
        }

        .form-errors {
            margin-bottom: 30px;
            color: #fa5d29;
            line-height: 120%
        }

        .form-errors li {
            margin-bottom: 8px
        }

        .form__section {
            margin-bottom: 60px
        }

        .form__row {
            margin-bottom: 30px
        }

        .form__row .text-input {
            width: 100%
        }

        .form__bts {
            display: flex;
            justify-content: space-between;
            gap: var(--gutter);
            margin-top: clamp(30px, 5vw, 60px)
        }

        .form__bts__left {
            display: flex;
            align-items: center
        }

        .form__bts__right {
            display: flex;
            gap: 8px
        }

        .form__bts .button {
            flex: auto
        }

        .form__hr {
            height: 1px;
            background-color: #dedede;
            border: none;
            margin: clamp(40px, 4vw, 80px) 0
        }

        .form__hr--small {
            margin: clamp(20px, 4vw, 40px) 0
        }

        .box-form-autocomplete {
            display: flex;
            gap: 8px
        }

        .box-form-autocomplete .button,
        .box-form-autocomplete .text-input {
            border-radius: var(--rounded-small)
        }

        .field-autocomplete {
            position: relative
        }

        .field-autocomplete__wrap {
            position: relative
        }

        .field-autocomplete__dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            z-index: 1;
            opacity: 0;
            visibility: hidden;
            transition: all .3s
        }

        .field-autocomplete__dropdown.is-visible {
            opacity: 1;
            visibility: visible
        }

        .field-autocomplete__list {
            max-height: 204px;
            overflow-y: auto
        }

        .field-autocomplete__list li {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 16px;
            border-bottom: 1px solid #ededed;
            background: var(--color-white);
            cursor: pointer;
            transition: all .3s
        }

        .field-autocomplete__list li:last-child {
            border-bottom: 0
        }

        .field-autocomplete__list li:hover {
            background: #f8f8f8
        }

        .field-autocomplete__avatars {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 16px
        }

        .field-autocomplete__avatars li {
            position: relative;
            display: flex;
            cursor: pointer
        }

        .field-autocomplete__avatars li:hover img {
            opacity: .5
        }

        .field-autocomplete__avatars li:hover .ico-svg {
            opacity: 1
        }

        .field-autocomplete__avatars li img {
            transition: all .3s
        }

        .field-autocomplete__avatars .circle-avatar {
            background: #000;
            border-radius: 50%;
            overflow: hidden
        }

        .field-autocomplete__avatars .ico-svg {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40%;
            transform: translate(-50%, -50%);
            fill: var(--color-white);
            opacity: 0
        }

        .field-autocomplete__avatar {
            display: flex;
            position: relative
        }

        .field-autocomplete__loading {
            --spinner-bg: #ededed;
            --spinner-color: #222;
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: var(--height-input);
            height: var(--height-input);
            font-size: 10px
        }

        .snackbar {
            --snack-text: var(--color-white);
            position: fixed;
            bottom: 20px;
            left: 40px;
            max-width: 400px;
            padding: 20px 20px 20px 65px;
            opacity: 0;
            font-size: 16px;
            color: var(--snack-text);
            line-height: 170%;
            background: rgba(var(--color-primary-rgb), 0.7);
            box-shadow: 10px 10px 20px -10px rgba(var(--color-primary-rgb), 0.4);
            border-radius: var(--rounded-normal);
            z-index: 11;
            transition: all .3s
        }

        .snackbar--success {
            background-color: rgba(14, 14, 14, .9)
        }

        .snackbar--warning {
            --snack-text: var(--color-primary);
            background-color: rgba(230, 230, 0, .9);
            font-weight: 400
        }

        .snackbar--error {
            background-color: rgba(255, 0, 0, .9)
        }

        .snackbar.is-visible {
            opacity: 1;
            transform: translateY(-20px)
        }

        .snackbar svg {
            position: absolute;
            top: 50%;
            left: 20px;
            width: 30px;
            height: 30px;
            margin-top: -15px;
            fill: var(--snack-text)
        }

        :root {
            --button-rounded: 8px;
            --button-rounded-full: 72px;
            --button-height: 48px;
            /* --button-pad: 24px; */
            --button-bg: var(--color-primary);
            --button-color: var(--color-white);
            --button-border-color: var(--color-primary)
        }

        .button {
            position: relative;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            height: var(--button-height);
            padding: 0 var(--button-pad);
            background-color: var(--button-bg);
            font-size: var(--text-size-primary);
            color: var(--button-color);
            text-align: center;
            cursor: pointer;
            border: none;
            white-space: nowrap;
            transition: color .3s, background .3s, border .3s
        }

        .button:focus {
            outline: none
        }

        .button[class*="--tag"] {
            --button-color: var(--color-primary);
            --button-bg: transparent;
            --button-border-color: #a7a7a7;
            border-radius: var(--button-rounded-full);
            font-size: var(--text-size-medium);
            border: var(--border-thin) solid var(--button-border-color)
        }

        .button[class*="--tag"]:hover {
            --button-color: var(--color-primary);
            --button-bg: transparent;
            border-color: var(--color-primary)
        }

        .button[class*="--large"] {
            --button-height: 72px;
            min-width: var(--button-height);
            height: var(--button-height);
            padding: 0 1.6em;
            font-size: 18px;
            font-weight: 400;
            line-height: var(--button-height)
        }

        .button[class*="--medium"] {
            --button-height: 60px;
            min-width: var(--button-height);
            height: var(--button-height);
            padding: 0 1.2em;
            font-size: 16px;
            line-height: var(--button-height)
        }

        .button[class*="--small"] {
            min-width: 42px;
            height: 42px;
            padding: 0 20px;
            line-height: 42px
        }

        .button[class*="--x-small"] {
            min-width: 32px;
            height: 32px;
            padding: 0 12px;
            line-height: 32px;
            font-size: 13px
        }

        .button[class*="--extra-pad"] {
            padding: 0 3em
        }

        .button[class*="--rounded"] {
            border-radius: var(--button-rounded)
        }

        .button[class*="--rounded-full"] {
            border-radius: var(--button-rounded-full)
        }

        .button[class*="--color"] {
            --button-inside-color: var(--bg-primary);
            padding: 0;
            border: none;
            outline: var(--border-thin) solid rgba(var(--color-primary-rgb), 0.3);
            aspect-ratio: 1/1
        }

        .button[class*="--color"]:before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 8px solid var(--button-inside-color);
            border-radius: 50%;
            transition: border .3s
        }

        .button[class*="--color"]:hover:before {
            border-width: 4px
        }

        .button[class*="--full"] {
            width: 100%
        }

        .button[class*="--circle"] {
            padding: 0;
            border-radius: 50%
        }

        .button[class*="--square"] {
            padding: 0;
            aspect-ratio: 1/1
        }

        .button[class*="--circle"] {
            padding: 0;
            border-radius: 50%;
            aspect-ratio: 1/1
        }

        .button[class*="--white"] {
            --button-bg: var(--color-white);
            --button-color: var(--color-primary)
        }

        .button[class*="--red"] {
            --button-bg: #FA5D29;
            --button-color: var(--color-white)
        }

        .button[class*="--gray"] {
            --button-bg: #dedede;
            --button-color: var(--color-primary)
        }

        .button[class*="--blue"] {
            --button-bg: #49B3FC
        }

        .button[class*="--outline"] {
            --button-color: var(--color-primary);
            --button-bg: transparent;
            border: var(--border-thin) solid var(--button-border-color)
        }

        .button[class*="--outline--gray"] {
            --button-border-color: #dedede
        }

        .button[class*="--outline--gray"]:hover {
            --button-bg: #dedede;
            --button-color: var(--color-primary)
        }

        .button[class*="--outline--dark"] {
            --button-color: var(--color-white);
            --button-border-color: #fff
        }

        .button[class*="--outline--dark"]:hover {
            --button-bg: #fff;
            --button-color: var(--color-primary)
        }

        .button[class*="--outline--white"] {
            --button-color: var(--color-white);
            --button-border-color: #fff
        }

        .button[class*="--outline--white"]:hover {
            --button-color: var(--color-primary);
            --button-bg: var(--color-white)
        }

        .button[class*="--outline--red"] {
            --button-color: var(--color-red);
            --button-border-color: var(--color-red)
        }

        .button[class*="--outline--red"]:hover {
            --button-color: var(--color-white);
            --button-bg: var(--color-red)
        }

        .button[class*="--disabled"] {
            opacity: .5;
            pointer-events: none
        }

        .button.is-active {
            --button-bg: var(--bg-secondary);
            --button-color: var(--color-white)
        }

        .button.is-loading {
            pointer-events: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none
        }

        .button.is-loading .button__content {
            opacity: 0
        }

        .button.is-loading .button__spinner {
            display: block;
            opacity: 1;
            margin-right: 12px;
            visibility: visible
        }

        .button__spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -0.7em 0 0 -0.7em;
            width: 1.4em;
            height: 1.4em;
            border: var(--border-thin) solid rgba(255, 255, 255, .5);
            border-left-color: currentColor;
            border-radius: 50%;
            opacity: 0;
            transition: all .3s;
            animation: btRotate .6s infinite linear
        }

        .button__loading {
            display: flex;
            align-items: center;
            justify-content: center
        }

        .button__loading .button__spinner {
            display: none;
            position: static;
            margin: 0;
            visibility: hidden;
            overflow: hidden
        }

        .button svg {
            position: relative;
            vertical-align: middle;
            fill: currentColor;
            transition: fill .3s
        }

        .button svg.ico--left {
            margin-right: .5em
        }

        .button svg.ico--right {
            margin-left: .5em
        }

        .button:hover {
            --button-color: var(--color-white);
            --button-bg: #383838
        }

        .button:hover svg {
            fill: currentColor
        }

        @media(max-width: 576px) {
            .button[class*="--tag"] {
                --button-height: 36px;
                --button-pad: 16px;
                font-size: var(--text-size-primary)
            }

            .button[class*="--large"] {
                --button-height: 48px;
                font-size: var(--text-size-primary)
            }

            .button[class*="--medium"] {
                --button-height: 48px
            }
        }

        @keyframes btRotate {
            0% {
                transform: rotate(0deg)
            }

            100% {
                transform: rotate(360deg)
            }
        }

        .bt-ico-left {
            display: inline-flex;
            align-items: center;
            gap: .5em;
            cursor: pointer
        }

        .bt-ico-label {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer
        }

        .bt-ico-label small {
            font-size: 12px;
            line-height: normal
        }

        .bt-ellipses {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            height: 72px;
            padding-inline: 12px;
            background-color: #f8f8f8;
            background-image: linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%), linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);
            background-position: left top, left bottom;
            background-size: 8px 1px, 8px 1px;
            background-repeat: repeat-x, repeat-x;
            cursor: pointer;
            transition: all .3s
        }

        .bt-ellipses--no-hover {
            cursor: default
        }

        .bt-ellipses--white {
            background-color: #fff
        }

        .bt-ellipses:not(.bt-ellipses--no-hover):hover {
            background-color: #ededed
        }

        .bt-ellipses__input {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer
        }

        .bt-ellipses+small {
            display: block;
            padding-top: 1em
        }

        .button-loadmore {
            --button-pad: 16px;
            --button-color: var(--color-primary);
            --border-width: 1px;
            --pics-border: var(--bg-primary);
            gap: 12px
        }

        .button-loadmore:hover .button-loadmore__pic {
            --pics-border: #383838
        }

        .button-loadmore:before {
            content: "";
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            border: 2px solid #e52e86;
            transition: all .5s;
            animation: clippath 2s infinite linear;
            border-radius: var(--rounded-normal)
        }

        .button-loadmore__text {
            font-weight: var(--font-medium)
        }

        .button-loadmore__pics {
            display: flex
        }

        .button-loadmore__pic {
            border-radius: 50%;
            border: 2px solid var(--pics-border);
            transition: all .3s
        }

        .button-loadmore__pic:nth-child(n+2) {
            margin-left: -0.9em
        }

        @keyframes clippath {

            0%,
            100% {
                -webkit-clip-path: inset(0 0 98% 0);
                clip-path: inset(0 0 98% 0)
            }

            25% {
                -webkit-clip-path: inset(0 0 0 98%);
                clip-path: inset(0 0 0 98%)
            }

            50% {
                -webkit-clip-path: inset(98% 0 0 0);
                clip-path: inset(98% 0 0 0)
            }

            75% {
                -webkit-clip-path: inset(0 98% 0 0);
                clip-path: inset(0 98% 0 0)
            }
        }

        .bt-play {
            --bt-bg: rgba(255, 255, 255, 0.85);
            --bt-arrow: var(--color-primary);
            --bt-size: 70px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: var(--bt-size);
            height: var(--bt-size);
            border-radius: 50%;
            background: var(--bt-bg);
            cursor: pointer
        }

        .bt-play .ico-svg {
            fill: var(--bt-arrow);
            width: 30%;
            transform: translateX(10%)
        }

        .budget-tag {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 22px;
            padding-inline: 4px;
            line-height: 18px;
            font-size: 11px;
            font-weight: var(--font-medium);
            text-align: center;
            border-radius: var(--rounded-small);
            border: var(--border-thin) solid var(--budget-tag-border, rgba(var(--color-primary-rgb), 0.3))
        }

        .budget-tag[class*="--small"] {
            min-width: 16px;
            height: 16px;
            line-height: 17px;
            font-size: 10px
        }

        .budget-tag[class*="--big"] {
            height: 30px;
            padding-inline: 8px;
            line-height: 16px;
            font-size: 16px
        }

        .budget-tag[class*="--sotd"] {
            border-color: #ce6644;
            color: #ce6644
        }

        .budget-tag[class*="--dev"] {
            border-color: #8eabc6;
            color: #8eabc6
        }

        .budget-tag[class*="--hm"] {
            border-color: #726996;
            color: #726996
        }

        .budget-tag[class*="--white"] {
            border-color: #fff;
            color: #fff
        }

        .budget-tag[class*="--red"] {
            border-color: #fa5d29;
            color: #fa5d29
        }

        .budget-tag[class*="--solid"] {
            color: var(--color-primary);
            border: none
        }

        .budget-tag[class*="--solid"][class*="--black"] {
            background: #222;
            color: #fff
        }

        .budget-tag[class*="--solid"][class*="--white"] {
            background: #fff
        }

        .budget-tag[class*="--solid"][class*="--green"] {
            background: #aaeec4;
            border: none
        }

        .budget-tag[class*="--solid"][class*="--red"] {
            background: #fa5d29
        }

        .budget-tag[class*="--solid"][class*="--yellow"] {
            background: #fff083
        }

        .budget-tag[class*="--solid"][class*="--ocher"] {
            background: #ffd100
        }

        .budget-tag[class*=anim-shiny] {
            position: relative;
            overflow: hidden
        }

        .budget-tag[class*=anim-shiny]:before {
            position: absolute;
            content: "";
            display: inline-block;
            top: -4px;
            left: 0;
            width: 4px;
            height: 50%;
            background-color: #fff;
            animation: budgetShiny 6s ease-in-out infinite
        }

        .budget-tag[class*=anim-shiny] span {
            position: relative;
            z-index: 1
        }

        @keyframes budgetShiny {
            0% {
                transform: scale(0) rotate(45deg);
                opacity: 0
            }

            93% {
                transform: scale(0) rotate(45deg);
                opacity: .1
            }

            95% {
                transform: scale(4) rotate(45deg);
                opacity: .6
            }

            100% {
                transform: scale(50) rotate(45deg);
                opacity: 0
            }
        }

        :root {
            --budget-circle-size: 24px;
            --budget-circle-bg: #ededed;
            --budget-circle-color: var(--color-primary)
        }

        .budget-circle {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: var(--budget-circle-size);
            height: var(--budget-circle-size);
            background-color: var(--budget-circle-bg);
            border-radius: 50%;
            font-weight: var(--font-bold);
            font-weight: 400;
            color: var(--budget-circle-color);
            transition: all .3s
        }

        .budget-circle[class*=small] {
            --budget-circle-size: 16px;
            font-size: 12px
        }

        .budget-circle[class*=red] {
            --budget-circle-bg: var(--nf-bg-count);
            --budget-circle-color: white
        }

        .budget {
            --budget-height: 20px;
            display: inline-block;
            height: var(--budget-height);
            padding: 0 10px;
            line-height: var(--budget-height);
            font-size: 10px;
            border-radius: var(--budget-height)
        }

        .budget[class*="--white"] {
            background: var(--bg-white);
            color: var(--color-primary)
        }


        .heading-1 {
            font-size: 42px;
            font-size: clamp(42px, -3.0704225352px + 9.014084507vw, 170px);
            line-height: 100%
        }

        .heading-2 {
            font-size: 42px;
            font-size: clamp(42px, 5.3802816901px + 7.323943662vw, 146px);
            line-height: 100%
        }

        .heading-3 {
            font-size: 36px;
            font-size: clamp(36px, 15.5774647887px + 4.0845070423vw, 94px);
            line-height: 100%;
            text-wrap: balance;
            display: inline-block;
            max-width: 20ch; 
            white-space: normal;
        }

        .heading-4 {
            font-size: 32px;
            font-size: clamp(32px, 17.2112676056px + 2.9577464789vw, 74px);
            line-height: 100%
        }

        .heading-5 {
            font-size: 26px;
            font-size: clamp(26px, 17.5492957746px + 1.6901408451vw, 50px);
            line-height: 120%
        }

        .heading-6 {
            margin-bottom: 1em;
            font-size: 22px;
            font-size: clamp(22px, 13.5492957746px + 1.6901408451vw, 46px);
            line-height: 130%;
            font-weight: 300
        }

        .text-x-large {
            font-size: 22px;
            font-size: clamp(22px, 19.8873239437px + 0.4225352113vw, 28px)
        }

        .text-large {
            font-size: 18px;
            font-size: clamp(18px, 17.2957746479px + 0.1408450704vw, 20px)
        }

        .text-medium {
            font-size: 16px;
            font-size: clamp(16px, 16px + 0vw, 16px)
        }

        .font-light {
            font-weight: var(--font-light)
        }

        .font-normal {
            font-weight: var(--font-normal)
        }

        .font-medium {
            font-weight: var(--font-medium)
        }

        .font-bold {
            font-weight: var(--font-bold)
        }

        .font-black {
            font-weight: var(--font-black)
        }

        .text-underlined {
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-color: var(--color-primary);
            text-decoration-thickness: 1px;
            text-underline-offset: .2em
        }

        .text-truncated {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden
        }

        .legal-recaptcha {
            margin: 1.5rem 0;
            line-height: 120%
        }

        .legal-recaptcha small {
            opacity: .7
        }

        .link-underlined {
            position: relative;
            display: inline-block;
            line-height: 100%;
            color: rgb(var(--color-underlined));
            border: none;
            cursor: pointer
        }

        .link-underlined:before {
            content: "";
            position: absolute;
            bottom: -0.2em;
            left: 0;
            width: 100%;
            height: 2px;
            background-repeat: no-repeat;
            background-image: linear-gradient(to right, rgb(var(--color-underlined)) 45%, rgba(var(--color-underlined), 0.3) 55%);
            background-size: 220% 100%;
            background-position: 100% 50%;
            transition: .3s ease-out
        }

        .link-underlined--white {
            --color-underlined: 255, 255, 255
        }

        .link-underlined--red {
            --color-underlined: 250, 93, 41
        }

        .link-underlined:hover:before {
            background-position: 0% 50%
        }

        .toggle {
            overflow: hidden;
            max-height: 0;
            clear: both;
            transition: all .6s cubic-bezier(0, 1, 0.5, 1)
        }

        .toggle.show {
            transition: all .6s ease-in;
            max-height: 1000px;
            overflow: hidden
        }

        .heading-hr {
            padding-bottom: 24px;
            border-bottom: 1px solid var(--border-gray);
            font-size: var(--text-size-primary)
        }

        .star-price {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: clamp(70px, 10vw, 128px);
            aspect-ratio: 1/1;
            line-height: 120%;
            font-size: 10px;
            font-size: clamp(10px, 7.8873239437px + 0.4225352113vw, 16px)
        }

        .star-price--small {
            font-size: 9px
        }

        .star-price--small .star-price__label {
            margin-bottom: .4em;
            line-height: 90%
        }

        .star-price--large {
            width: 10em;
            font-size: clamp(8px, 2vw, 16px)
        }

        .star-price--large .star-price__price {
            margin: .05em 0 0 0;
            font-size: 3em;
            font-weight: var(--font-bold)
        }

        .star-price--large .star-price__price small {
            font-size: .6em
        }

        .star-price__wrap {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            line-height: 170%;
            text-align: center;
            font-weight: 400
        }

        .star-price__label {
            font-size: 1.3em
        }

        .star-price__label--small {
            font-size: 1em
        }

        .star-price__price {
            margin: .05em 0;
            font-size: 2em;
            font-weight: var(--font-bold)
        }

        .star-price__old {
            font-size: .7em;
            text-decoration: line-through;
            line-height: normal
        }

        .star-price svg {
            width: 100%;
            max-width: 100%;
            height: auto
        }

        .loader-grid {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            margin-top: 40px;
            text-align: center
        }

        .loader-grid__spinner {
            width: 8px;
            height: 40px;
            border-radius: 4px;
            display: inline-block;
            position: relative;
            background: currentColor;
            color: var(--color-primary);
            box-sizing: border-box;
            animation: animloader .3s .3s linear infinite alternate;
            transform: scale(0.5)
        }

        .loader-grid__spinner:before,
        .loader-grid__spinner:after {
            content: "";
            position: absolute;
            top: 50%;
            left: 20px;
            width: 8px;
            height: 40px;
            border-radius: 4px;
            background: currentColor;
            transform: translateY(-50%);
            box-sizing: border-box;
            animation: animloader .3s .45s linear infinite alternate
        }

        .loader-grid__spinner:before {
            left: -20px;
            animation-delay: 0s
        }

        @keyframes animloader {
            0% {
                height: 48px
            }

            100% {
                height: 4px
            }
        }

        .loading {
            --spinner-bg: rgba(255, 255, 255, 0.2);
            --spinner-color: #fff;
            --loading-msg: #fff;
            position: absolute;
            inset: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, var(--modal-alpha));
            transform: scale(0.5);
            opacity: 0;
            visibility: hidden;
            transition: all .3s;
            z-index: 5
        }

        .loading--fixed {
            position: fixed;
            z-index: 15
        }

        .loading--white {
            --spinner-bg: rgba(0, 0, 0, 0.2);
            --spinner-color: var(--color-primary);
            --loading-msg: #222;
            background-color: var(--bg-primary)
        }

        .loading.is-visible {
            transform: scale(1);
            opacity: 1;
            visibility: visible
        }

        .loading__content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px
        }

        .loading__msg {
            max-width: 400px;
            color: var(--loading-msg);
            text-align: center
        }

        .loading__spinner {
            pointer-events: none;
            width: 2.5em;
            height: 2.5em;
            border: 2px solid rgba(0, 0, 0, 0);
            border-color: var(--spinner-bg);
            border-top-color: var(--spinner-color);
            border-radius: 50%;
            animation: loadingSpinner .6s linear infinite
        }

        @keyframes loadingSpinner {
            100% {
                transform: rotate(360deg)
            }
        }

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

        .inner {
            inline-size: min(100% - var(--pad-inner)*2, var(--innerWidth));
            margin-inline: auto;
        }

         .inner--banner {
            margin-top: 100px; 
            margin-bottom: 100px; 
            inline-size: min(100% - var(--pad-inner)*2, var(--innerWidth));
            margin-inline: auto;
        }
        
        .inner--sm {
            --innerWidth: 931px
        }

        .inner--lg {
            --innerWidth: 1216px
        }

        .inner--xl {
            --innerWidth: 1386px
        }

        .inner--xxl {
            --innerWidth: 1650px
        }

        .inner--xxxl {
            --innerWidth: 1834px
        }

        #content {
            flex: 1
        }

        .block {
            margin-top: clamp(20px, 3vw, 50px);
        }

        .block--mb-s {
            margin-bottom: clamp(50px, 20vw, 100px)
        }

        .block--private {
            position: relative;
            display: flex;
            align-items: center;
            min-height: calc(100vh - 71px);
            margin: 0;
            padding: clamp(50px, 20vw, 100px) 0;
            background: rgba(0, 0, 0, .7)
        }

        .block--private .c-heading,
        .block--private .c-view-all {
            color: #fff
        }

        .block--private .bg-private {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            -o-object-fit: contain;
            object-fit: contain
        }

        .block[class*="--bg"] {
            margin: clamp(50px, 20vw, 200px) 0;
            padding: 100px 0
        }

        .block[class*="--gray"] {
            background: var(--bg-3rd)
        }

        .item-link {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            z-index: 1
        }

        .users-credits {
            display: inline-flex;
            flex-wrap: wrap;
            gap: .3em
        }

        .users-credits__details {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: clamp(10px, 3vw, 20px)
        }

        .users-credits__cards {
            display: flex
        }

        .users-credits__cards .users-credits__item:nth-child(n+2) {
            margin-left: -1em
        }

        .users-credits__cards .circle-avatar__img {
            border: 2px solid var(--bg-primary)
        }

        .users-credits__number {
            display: flex;
            align-items: center
        }

        .users-credits .circle-avatar {
            display: block;
            flex-shrink: 0
        }

        .users-credits .circle-avatar__img {
            box-sizing: content-box
        }

        .avatar-name__link {
            display: flex;
            align-items: center;
            gap: .5em;
            min-width: -moz-fit-content;
            min-width: fit-content
        }

        .avatar-name__link sup {
            flex: 1;
            margin-bottom: auto;
            margin-left: .2em;
            vertical-align: text-top;
            font-size: .5em;
            font-weight: var(--font-medium)
        }

        .avatar-name__name {
            line-height: 100%
        }

        .avatar-name__title {
            display: inline-block;
            font-size: 1em
        }

        .avatar-name__img {
            display: block;
            height: auto;
            border-radius: 50%;
            filter: grayscale(1)
        }

        .circle-avatar {
            display: inline-block;
            position: relative
        }

        .circle-avatar__notifications {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--nf-bg-count);
            transform: translate(30%, -30%);
            font-size: 11px;
            color: #fff;
            line-height: 1;
            transition: all .3s;
            z-index: 1
        }

        .circle-avatar__notifications:hover {
            background: var(--color-primary)
        }

        .circle-avatar__img {
            display: block;
            height: auto;
            border-radius: 50%;
            aspect-ratio: 1/1;
            -o-object-fit: cover;
            object-fit: cover
        }

        .circle-avatar__ribbon {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%
        }

        .circle-avatar__ribbon svg {
            position: relative;
            top: 50%;
            left: 50%;
            width: calc(100% + .6em);
            height: calc(100% + .6em);
            transform: translate(-50%, -50%);
            stroke-width: 1px;
            overflow: visible
        }

        .circle-avatar__ribbon span {
            position: absolute;
            left: 0;
            top: 100%;
            width: 100%;
            text-align: center;
            font-size: Arial;
            font-size: 8px;
            font-weight: 400;
            line-height: 100%;
            z-index: 1
        }

        .menu-tabs {
            position: relative;
            display: flex;
            gap: clamp(8px, 5vw, 32px)
        }

        .menu-tabs--s2 {
            height: 80px;
            margin-bottom: clamp(24px, 3vw, 48px);
            justify-content: center;
            background-image: linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);
            background-position: bottom;
            background-size: 8px 1px;
            background-repeat: repeat-x
        }

        .menu-tabs--s3 {
            margin-bottom: clamp(24px, 3vw, 48px);
            background-image: linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);
            background-position: bottom;
            background-size: 8px 1px;
            background-repeat: repeat-x
        }

        .menu-tabs--s3 li {
            padding-bottom: clamp(20px, 3vw, 20px);
            line-height: 150%
        }

        .menu-tabs .active {
            font-weight: var(--font-bold)
        }

        .menu-tabs li {
            position: relative;
            display: flex;
            align-items: center;
            height: 100%;
            cursor: pointer;
            color: #a7a7a7;
            white-space: nowrap
        }

        .menu-tabs .active {
            color: var(--color-primary)
        }

        .menu-tabs .active:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            border-bottom: 2px solid var(--color-primary)
        }

        .menu-tabs sup {
            position: relative;
            top: -0.2em;
            margin-left: .5em;
            font-size: 10px
        }

        .menu-dd {
            --menu-bg: #222;
            --menu-bg-active: #FA5D29;
            --menu-color: #fff;
            display: flex;
            gap: 8px;
            padding-left: 8px;
            font-size: 14px;
            color: var(--menu-color)
        }

        .content-tabs__item {
            position: relative;
            display: none
        }

        .content-tabs__item.active {
            display: block
        }

        .tab img {
            display: block;
            width: 100%
        }

        .list-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 12px
        }

        .list-tags--center {
            justify-content: center;
            min-width: 100%
        }

        .list-tags li {
            display: flex
        }

        .list-default {
            margin: 2em 0
        }

        .list-default li {
            list-style: square inside;
            line-height: 140%
        }

        .list-default li:not(:last-child) {
            margin-bottom: .5em
        }

        .list-checks li {
            position: relative;
            margin-bottom: 1em;
            padding-left: 32px;
            line-height: 22px
        }

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

        .list-checks .ico-svg {
            position: absolute;
            top: 0;
            left: 0
        }

        .list-check li {
            position: relative;
            margin-bottom: 1em;
            padding-left: 28px;
            line-height: 150%
        }

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

        .list-check .ico-svg {
            position: absolute;
            top: 6px;
            left: 0
        }

        .list-lines li {
            display: flex;
            padding: 12px 0;
            border-bottom: 1px solid #dedede
        }

        .list-lines li:last-child {
            border-bottom: none
        }

        .list-lines li div {
            flex: 1;
            line-height: 130%
        }

        .box-site {
            position: relative;
            display: flex;
            align-items: flex-end;
            margin-bottom: 30px;
            overflow: hidden
        }

        .box-site__bg {
            display: block;
            aspect-ratio: 16/7;
            border-radius: var(--rounded-large)
        }

        .box-site__top {
            position: absolute;
            top: 20px;
            left: 20px
        }

        .c-boxes-score {
            display: inline-flex
        }

        .c-boxes-score .box-score:is(:first-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0
        }

        .c-boxes-score .box-score:is(:last-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0
        }

        .c-boxes-score .box-score:not(:last-child) {
            border-right: none
        }

        .c-boxes-score .box-score:not(:first-child):not(:last-child) {
            border-radius: 0
        }

        .box-score {
            --scoreBorder: var(--color-primary);
            display: inline-flex;
            flex-direction: column;
            border: 1px solid var(--scoreBorder);
            border-radius: var(--rounded-normal);
            text-align: center;
            line-height: 100%;
            font-size: 10px;
            font-size: clamp(10px, 7.8873239437px + 0.4225352113vw, 16px)
        }

        .box-score--small {
            min-width: 40px;
            border-radius: var(--rounded-small)
        }

        .box-score--small .box-score__top {
            padding: .6em .6em;
            font-size: 9px
        }

        .box-score--small .box-score__bottom {
            width: 100%;
            padding: .8em 0;
            font-size: 14px;
            justify-content: center
        }

        .box-score__top {
            padding: .5em 1em
        }

        .box-score__top strong {
            font-weight: var(--font-medium)
        }

        .box-score__bottom {
            padding: .8em;
            border-top: 1px solid var(--scoreBorder)
        }

        .box-score__note {
            display: flex;
            flex-direction: column
        }

        .box-score__note strong {
            display: block;
            font-size: 1.65em
        }

        .box-score__note sub {
            margin-top: .2em;
            font-size: .9em;
            font-weight: normal
        }

        .box-figure {
            height: 100%;
            padding: clamp(20px, 4vw, 80px);
            background: var(--bg-box-figure, #222);
            border-radius: var(--rounded-large)
        }

        .box-figure>* {
            width: 100%
        }

        .box-figure figure {
            width: 100%;
            border-radius: var(--rounded-normal);
            overflow: hidden
        }

        .swiper {
            overflow: hidden
        }

        


        .pagination__item {
            display: flex;
            justify-content: center;
            min-width: 32px;
            border-radius: var(--rounded-normal);
            font-size: 12px;
            color: var(--color-primary);
            transition: all .3s
        }

        .pagination__item--current,
        .pagination__item:hover {
            background: var(--bg-secondary);
            color: var(--color-white)
        }

        .pagination__prev {
            margin-right: 1em
        }

        .pagination__next {
            margin-left: 1em
        }

        .pagination .link-underlined {
            margin-top: auto;
            margin-bottom: auto;
            font-size: 14px
        }

        .list-circle-notes {
            display: flex;
            gap: 8px
        }

        .circle-note {
            display: flex;
            flex-direction: column
        }

        .circle-note__legend {
            text-align: center;
            font-size: 12px;
            font-weight: 400
        }

        .circle-note__bg {
            fill: none;
            stroke: #dedede;
            stroke-width: 1
        }

        .circle-note__path {
            fill: none;
            stroke-width: 1;
            stroke: var(--color-primary);
            animation: progress .6s ease-out forwards
        }

        .circle-note__note {
            font-size: 8px;
            font-weight: var(--font-bold);
            line-height: 100%;
            text-anchor: middle;
            transform: translateY(1px)
        }

        @keyframes progress {
            0% {
                stroke-dasharray: 0 100
            }
        }

        .list-circle-notes-ani {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 15px
        }

        .circle-note-progress {
            position: relative;
            display: inline-block;
            display: flex;
            flex-direction: column
        }

        .circle-note-progress .box-circle {
            position: relative;
            display: flex;
            align-items: center;
            flex-direction: column;
            transition: all .3s
        }

        .circle-note-progress .box-circle .legend,
        .circle-note-progress .box-circle .percent {
            transition: all .3s
        }

        .circle-note-progress svg {
            display: block;
            transform: rotate(-90deg)
        }

        .circle-note-progress circle {
            fill: none;
            stroke: var(--color-primary);
            stroke-width: 1
        }

        .circle-note-progress circle:nth-child(1) {
            stroke-opacity: .3
        }

        .circle-note-progress circle:nth-child(2) {
            stroke-dasharray: 238.7610416728;
            stroke-dashoffset: 238.7610416728
        }

        .circle-note-progress .circle {
            position: relative;
            display: flex;
            justify-content: center
        }

        .circle-note-progress .info {
            position: absolute;
            top: 50%;
            left: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 12px;
            width: 100%;
            padding-top: 10px;
            line-height: 100%;
            text-align: center;
            font-weight: var(--font-medium);
            transform: translateY(-50%)
        }

        .circle-note-progress .percent {
            display: inline-flex;
            font-size: 34px;
            font-weight: var(--font-bold)
        }

        .figure-rollover {
            position: relative;
            display: block;
            transition: all .3s
        }

        .figure-rollover.is-large {
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px)
        }

        .figure-rollover.is-large .button {
            height: auto;
            padding: .7em 1.4em
        }

        .figure-rollover__hover {
            position: absolute;
            top: 0;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            width: 100%;
            height: 100%;
            padding: 1.6em 1.6em 1.5em 1.6em;
            visibility: hidden;
            opacity: 0;
            color: #fff;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
            z-index: 2;
            transition: all .3s;
            pointer-events: none;
            box-sizing: border-box
        }

        .figure-rollover__hover svg {
            pointer-events: all;
            cursor: pointer
        }

        .figure-rollover__hover .figure-rollover__bt {
            pointer-events: auto
        }

        .figure-rollover__fixed-left {
            position: absolute;
            top: 1.6em;
            left: 1.6em;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 2;
            pointer-events: none
        }

        .figure-rollover__fixed-left .button {
            pointer-events: auto
        }

        .figure-rollover__fixed-right {
            position: absolute;
            top: 1.6em;
            right: 1.6em;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 2;
            pointer-events: none
        }

        .figure-rollover__fixed-right .button {
            pointer-events: auto
        }

        .figure-rollover__fixed-right-bottom {
            position: absolute;
            bottom: 1.6em;
            right: 1.6em;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 2;
            pointer-events: none
        }

        .figure-rollover__center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%)
        }

        .figure-rollover__center * {
            pointer-events: all
        }

        .figure-rollover__right {
            display: flex;
            align-items: flex-end
        }

        .figure-rollover__right * {
            pointer-events: all
        }

        .figure-rollover__topright {
            display: flex;
            align-items: flex-end
        }

        .figure-rollover__topright * {
            pointer-events: all
        }

        .figure-rollover.has-hover-active .figure-rollover__hover {
            opacity: 1;
            visibility: visible
        }

        .figure-rollover__link {
            display: block
        }

        .figure-rollover__file {
            display: block;
            width: 100%;
            height: auto;
            -o-object-fit: cover;
            object-fit: cover
        }

        .figure-rollover__row {
            margin-bottom: .2em;
            line-height: 120%;
            text-align: left
        }

        .figure-rollover__row:last-child {
            margin-bottom: 0
        }

        .figure-rollover__bts {
            display: flex;
            gap: 1em;
            margin-bottom: .3em
        }

        .figure-rollover__bt {
            margin: auto
        }

        .figure-rollover__bt svg {
            display: block;
            width: 1em;
            height: auto
        }

        .figure-rollover__note {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            font-size: 40px;
            font-weight: var(--font-bold);
            color: var(--color-white);
            background: rgba(0, 0, 0, .5);
            pointer-events: none
        }

        .figure-rollover small {
            font-size: .666em
        }

        .figure-rollover h3 {
            font-size: 1em;
            font-weight: var(--font-medium)
        }

        .figure-rollover:hover .figure-rollover__hover {
            opacity: 1;
            visibility: visible
        }

        .total-grid {
            margin-bottom: clamp(24px, 3vw, 48px)
        }

        .header-grid {
            margin-bottom: clamp(24px, 3vw, 48px)
        }

        .header-grid__top {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap
        }

        .grid-awwwards {
            --minthumb: 250px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--minthumb), 1fr));
            grid-auto-flow: row dense;
            grid-gap: clamp(20px, 10vw, 100px) var(--gutter)
        }

        @media(max-width: 576px) {
            .grid-awwwards {
                --minthumb: 150px !important
            }
        }

        .grid-collections {
            --minthumb: 440px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--minthumb), 1fr));
            grid-auto-flow: row dense;
            grid-gap: 36px var(--gutter);
            padding-bottom: 30px;
            font-size: 15px
        }

        @media(min-width: 1600px) {
            .grid-collections {
                --minthumb: 440px
            }
        }

        .grid-collections .is-double {
            grid-column: span 2
        }

        .grid-collections .card-banner {
            height: calc(100% - 47px);
            border-radius: var(--rounded-large)
        }

        .grid-collections .figure-rollover__file {
            aspect-ratio: var(--img-resizing-site)
        }

        .grid-elements-fit {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(297px, 1fr));
            grid-gap: var(--gutter)
        }

        .grid-elements-fit .figure-rollover {
            border-radius: var(--rounded-large);
            overflow: hidden
        }

        .grid-elements-fit--small .figure-rollover {
            border-radius: var(--rounded-normal)
        }

        .card-banner {
            position: relative;
            height: 100%;
            background: var(--card-bg, --bg-secondary);
            overflow: hidden
        }

        .card-banner[class*="--dark"] {
            color: var(--color-white)
        }

        .card-banner[class*="--dark"] .link-underlined {
            --color-underlined: var(--color-white-rgb)
        }

        .card-banner[class*="--s1"] {
            display: flex;
            flex-direction: column;
            justify-content: space-between
        }

        .card-banner[class*="--s1"] .card-banner__info {
            width: 70%
        }

        .card-banner[class*="--s1"] .card-banner__title {
            margin-bottom: .6em
        }

        .card-banner[class*="--s1"] .card-banner__footer {
            position: relative;
            padding: clamp(24px, 3vw, 40px);
            text-align: right;
            line-height: 100%
        }

        .card-banner[class*="--s2"] {
            min-height: 350px
        }

        .card-banner[class*="--s2"] .card-banner__info {
            width: 500px;
            max-width: 100%
        }

        .card-banner[class*="--s2"] .users-credits {
            margin: 1em 0 1.5em 0
        }

        .card-banner[class*="--s2"] .users-credits__cards {
            --bg-primary: var(--bg-secondary)
        }

        .card-banner[class*="--s2"] .sticker-svg {
            position: absolute;
            top: 12%;
            right: 60%;
            width: clamp(80px, 8vw, 140px)
        }

        .card-banner__info {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: clamp(24px, 3vw, 64px)
        }

        .card-banner__title {
            line-height: 120%
        }

        .card-banner__photo {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%
        }

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

        .grid-cards {
            --minthumb: 350px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--minthumb), 1fr));
            gap: 30px var(--gutter)
        }

        .grid-cards[data-cols="2"] {
            --minthumb: 594px
        }

        .grid-cards[data-cols="3"] {
            --minthumb: 444px
        }

        .grid-cards[data-cols="4"] {
            --minthumb: 350px
        }

        @media all and (max-width: 1490px) {
            .grid-cards--one-row[data-cols="3"]>li:last-child {
                display: none
            }
        }

        @media all and (max-width: 1578px) {
            .grid-cards--one-row[data-cols="4"]>li:last-child {
                display: none
            }
        }

        @media all and (max-width: 1184px) {
            .grid-cards--one-row[data-cols="4"]>li:nth-last-child(2) {
                display: none
            }
        }

        @media(max-width: 576px) {
            .grid-cards--one-row[data-cols]>li {
                display: block
            }
        }

        @media(max-width: 576px) {
            .grid-cards[data-cols] {
                --minthumb: 310px
            }
        }

        .grid-academy {
            --minthumb: 360px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--minthumb), 1fr));
            grid-auto-flow: row dense;
            gap: var(--gutter)
        }

        .grid-academy--s2 {
            grid-template-columns: repeat(12, 1fr);
            grid-auto-rows: auto
        }

        .grid-academy--s2 .grid-academy__item {
            grid-column: span 3
        }

        .grid-academy--s2 .grid-academy__item-lg {
            grid-column: span 4
        }

        .grid-academy--s2 .grid-academy__item-xl {
            grid-column: span 6
        }

        .grid-academy--s2 .grid-academy__item-full {
            grid-column: span 12
        }

        .grid-academy--s2 .pos-1 {
            grid-row: 2
        }

        .grid-academy--s2 .pos-2 {
            grid-row: 3
        }

        @media(max-width: 576px) {
            .grid-academy--s2 .pos-1 {
                grid-row: 1
            }

            .grid-academy--s2 .pos-2:nth-of-type(even) {
                grid-row: 4
            }

            .grid-academy--s2 .pos-2:nth-of-type(odd) {
                grid-row: 7
            }
        }

        @media all and (max-width: 1280px) {

            .grid-academy--s2 .grid-academy__item,
            .grid-academy--s2 .grid-academy__item-lg,
            .grid-academy--s2 .grid-academy__item-xl {
                grid-column: span 6
            }
        }

        @media all and (max-width: 700px) {
            .grid-academy--s2 {
                grid-template-columns: 1fr;
                grid-column-gap: 0
            }

            .grid-academy--s2 .grid-academy__item,
            .grid-academy--s2 .grid-academy__item-lg,
            .grid-academy--s2 .grid-academy__item-xl {
                grid-column: 1
            }
        }

        @media(max-width: 1780px) {
            .grid-academy--one-row>li:nth-last-child(-n+1) {
                display: none
            }
        }

        @media(max-width: 1360px) {
            .grid-academy--one-row>li:nth-last-child(-n+2) {
                display: none
            }
        }

        .grid-courses {
            --minthumb: 350px;
            --itemDisplay: block;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(var(--minthumb), 1fr));
            grid-auto-flow: row dense;
            grid-gap: var(--gutter);
            padding-bottom: 30px;
            font-size: 15px
        }

        .grid-courses .is-double {
            grid-column: span 2
        }

        @media(max-width: 1556px) {
            .grid-courses--one-row>li:nth-last-child(-n+1) {
                display: none
            }
        }

        @media(max-width: 1168px) {
            .grid-courses--one-row>li:nth-last-child(-n+2) {
                display: none
            }
        }

        .grid-courses .card-banner {
            border-radius: var(--rounded-large)
        }

        .grid-filters {
            display: flex;
            flex-wrap: wrap;
            gap: var(--gutter)
        }

        .grid-filters--header {
            margin-bottom: clamp(50px, 6vw, 100px)
        }

        .grid-filters__excerpt {
            margin-top: auto;
            width: 300px;
            max-width: 100%
        }

        .grid-filters__aside {
            width: 360px;
            max-width: 100%
        }

        .grid-filters__content {
            flex: 1
        }

        @media(max-width: 576px) {
            .grid-filters__aside {
                width: 100%
            }
        }

        .grid-filters-sites {
            display: flex;
            flex-wrap: wrap;
            gap: 3%
        }

        .grid-filters-sites__aside {
            position: sticky;
            top: 0;
            width: 300px;
            padding-right: 10px;
            max-height: 100vh;
            align-self: flex-start;
            overflow-y: auto
        }

        .grid-filters-sites__aside::-webkit-scrollbar {
            width: 2px
        }

        .grid-filters-sites__aside::-webkit-scrollbar-thumb {
            background: #ededed
        }

        .grid-filters-sites__aside .menu-options {
            flex-direction: column;
            align-items: flex-start
        }

        .grid-filters-sites__aside .menu-options:not(:has(li)) {
            display: none
        }

        .grid-filters-sites__aside .menu-options__placeholder {
            font-size: var(--text-size-small)
        }

        .grid-filters-sites__content {
            flex: 1;
            min-width: 350px
        }

        .aside-filter {
            background-image: linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);
            background-position: bottom;
            background-size: 8px 1px;
            background-repeat: repeat-x
        }

        .aside-filter.is-open .aside-filter__arrow path:nth-child(2) {
            display: none
        }

        .aside-filter.is-open .aside-filter__content {
            max-height: 300px;
            opacity: 1;
            visibility: visible
        }

        .aside-filter:hover:not(.is-open) .aside-filter__arrow {
            transform: rotate(90deg)
        }

        .aside-filter__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none
        }

        .aside-filter__arrow {
            transition: all .3s
        }

        .aside-filter__content {
            visibility: hidden;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all .3s
        }

        .aside-filter__search {
            display: flex;
            justify-content: space-between;
            height: 47px;
            margin-bottom: 20px;
            background: #ededed;
            border-radius: var(--rounded-small)
        }

        .aside-filter__search-text {
            flex: 1;
            padding: 0 12px;
            background: rgba(0, 0, 0, 0)
        }

        .aside-filter__search-button {
            padding: 0 12px;
            background: rgba(0, 0, 0, 0);
            border: none
        }

        .aside-filter__list {
            max-height: 124px;
            margin-bottom: 20px;
            color: var(--color-white);
            line-height: 150%;
            overflow-y: auto;
            overflow-x: hidden
        }

        .aside-filter__list::-webkit-scrollbar {
            width: 2px
        }

        .aside-filter__list::-webkit-scrollbar-track {
            background: #ededed
        }

        .aside-filter__list::-webkit-scrollbar-thumb {
            background-color: var(--color-primary)
        }

        .aside-filter__list a:after {
            content: "(" attr(data-count) ")";
            font-weight: var(--font-bold)
        }

        .grid-directory {
            --minthumb: 350px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--minthumb), 1fr));
            grid-auto-flow: row dense;
            grid-gap: var(--gutter);
            padding-bottom: 30px;
            font-size: 15px
        }

        .grid-directory--pro {
            --minthumb: 480px;
            margin-bottom: var(--gutter);
            padding-bottom: 0;
            overflow: hidden
        }

        .grid-directory--pro+.grid-directory {
            margin-top: 40px
        }

        @media(max-width: 1600px) {
            .grid-directory--pro>li:nth-last-child(-n+1) {
                display: none
            }
        }

        .grid-directory--large {
            --minthumb: 600px
        }

        .grid-directory .is-double {
            grid-column: span 2
        }

        .grid-directory .card-banner {
            border-radius: var(--rounded-normal)
        }

        .grid-sites {
            --minthumb: 350px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--minthumb), 1fr));
            grid-auto-flow: row dense;
            grid-gap: 30px var(--gutter);
            padding-bottom: 30px
        }

        .grid-sites--3cols {
            --minthumb: 440px
        }

        .grid-sites.is-large {
            --minthumb: 440px
        }

        .grid-jobs {
            --minthumb: 400px;
            --itemDisplay: block;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--minthumb), 1fr));
            grid-auto-flow: row dense;
            grid-gap: var(--gutter);
            padding-bottom: 30px;
            font-size: 15px
        }

        @media(max-width: 2291px) {
            .grid-jobs--one-row>li:nth-last-child(-n+1) {
                display: none
            }
        }

        @media(max-width: 1925px) {
            .grid-jobs--one-row>li:nth-last-child(-n+2) {
                display: none
            }
        }

        @media(max-width: 1351px) {
            .grid-jobs--one-row>li:nth-last-child(-n+3) {
                display: none
            }
        }

        @media(max-width: 1024px) {
            .grid-jobs--one-row>li:nth-last-child(-n+4) {
                display: none
            }
        }

        .grid-jury {
            --minthumb: 285px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--minthumb), 1fr));
            grid-auto-flow: row dense;
            grid-gap: var(--gutter);
            font-size: 15px
        }

        @media(min-width: 1600px) {
            .grid-jury {
                --minthumb: 426px
            }
        }

        .card-blog {
            display: flex;
            flex-direction: column;
            height: 100%
        }

        .card-blog__header {
            flex: 1;
            margin-bottom: 2em
        }

        .card-blog__title {
            width: 90%;
            font-size: 20px;
            font-size: clamp(20px, 10.8450704225px + 1.8309859155vw, 46px);
            line-height: 120%
        }

        .card-blog__figure {
            position: relative
        }

        .card-blog__excerpt {
            width: 80%;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            min-height: 96px;
            overflow: hidden
        }

        .card-blog__by {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 2em 0
        }

        .card-blog__by .link-underlined {
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            font-weight: var(--font-bold)
        }

        .card-blog__media {
            display: block;
            width: 100%;
            height: auto;
            border-radius: var(--rounded-normal);
            aspect-ratio: var(--img-resizing-site);
            -o-object-fit: cover;
            object-fit: cover
        }

        .card-blog__footer {
            margin-top: clamp(24px, 3vw, 48px);
            font-size: 18px;
            font-size: clamp(18px, 17.2957746479px + 0.1408450704vw, 20px)
        }

        .card-blog .sticker-svg {
            position: absolute;
            top: 10%;
            right: 0;
            width: clamp(85px, 9vw, 170px);
            transform: translateX(50%);
            pointer-events: none
        }

        .c-loadmore {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-block: clamp(20px, 3vw, 50px)
        }


        .card-awwward__figure {
            width: 170px;
            max-width: 100%;
            margin: 0 auto
        }

        .card-awwward__figure:hover .card-awwward__media {
            transform: scale(1.05) translateY(-10px);
            filter: drop-shadow(0 6px 3px rgba(34, 34, 34, 0.4))
        }

        .card-awwward__figure svg {
            width: 100%;
            transition: all .3s
        }

        .card-awwward__media {
            position: relative;
            max-width: 100%;
            transition: all .3s
        }

        .card-awwward__caption {
            margin-top: 1.4em;
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            font-weight: 400;
            text-align: center;
            white-space: nowrap
        }

        .card-awwward__row {
            margin-top: 1em;
            text-align: center
        }

        .card-awwward-mini {
            --card-width: 84px;
            --card-pad: 12px 8px 8px 8px;
            --card-bordertop: 7px;
            --card-titlesize: 12px;
            --card-rounded: 0;
            position: relative;
            width: var(--card-width);
            border-radius: var(--card-rounded);
            color: #222;
            line-height: 100%;
            aspect-ratio: 84/96;
            overflow: hidden
        }

        .card-awwward-mini--small {
            --card-width: 51px;
            --card-pad: 8px 5px;
            --card-bordertop: 3px;
            --card-titlesize: 8px;
            --card-rounded: 3px
        }

        .card-awwward-mini:hover .card-awwward-mini__bg {
            fill: #dedede
        }

        .card-awwward-mini__info {
            position: absolute;
            inset: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            padding: var(--card-pad);
            border-top: var(--card-bordertop) solid var(--awwward-color)
        }

        .card-awwward-mini__number {
            font-size: var(--text-size-primary)
        }

        .card-awwward-mini__logo {
            width: 20px
        }

        .card-awwward-mini__title {
            width: 60px;
            max-width: 100%;
            font-size: var(--card-titlesize);
            font-weight: normal;
            line-height: 100%;
            text-align: left
        }

        .card-awwward-mini__bg {
            display: block;
            width: 100%;
            height: 100%;
            fill: #ededed;
            transition: all .3s
        }

        .card-asset {
            --card-pad-x: clamp(20px, 3vw, 30px);
            --card-pad-y: clamp(15px, 3vw, 26px);
            --card-border: 1px solid var(--border-gray);
            --card-bg: rgba(255, 255, 255, 0.6);
            --card-bt: var(--border-gray);
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--card-bg);
            border-radius: var(--rounded-normal);
            overflow: hidden
        }

        .card-asset__header {
            display: flex;
            flex-direction: column;
            flex: 1;
            gap: 12px;
            padding: var(--card-pad-x);
            line-height: normal
        }

        .card-asset__title {
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            font-weight: var(--font-bold);
            line-height: 120%
        }

        .card-asset__content {
            flex: 1;
            display: flex;
            flex-direction: column
        }

        .card-asset__list li {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: var(--card-pad-y) var(--card-pad-x);
            border-top: var(--card-border);
            line-height: 120%
        }

        .card-asset__list>div {
            display: flex;
            align-items: center
        }

        .card-asset__section {
            width: 40%;
            flex-shrink: 0
        }

        .card-asset__bts {
            display: flex;
            border-top: var(--card-border)
        }

        .card-asset__bt {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: clamp(64px, 5vw, 94px);
            font-weight: var(--font-bold);
            transition: all .3s;
            transform: translateZ(0)
        }

        .card-asset__bt:hover {
            background: var(--color-white);
            color: #222
        }

        .card-asset__bt:nth-child(2) {
            border-left: 1px solid var(--card-border)
        }

        .card-asset__media {
            display: block;
            aspect-ratio: var(--img-resizing-site);
            -o-object-fit: cover;
            object-fit: cover;
            transition: all .3s
        }

        .card-asset__media:hover {
            filter: brightness(80%)
        }

        .card-asset .swiper {
            position: relative;
            overflow: visible
        }

        .card-asset .swiper-wrapper {
            border-radius: var(--rounded-normal);
            cursor: pointer;
            overflow: hidden
        }

        .card-asset .swiper-pagination {
            position: absolute;
            top: calc(100% + 30px);
            right: var(--card-pad-x)
        }

        .card-blog-full {
            position: relative
        }

        .card-blog-full__figure {
            grid-column: 1/3;
            grid-row: 1;
            width: 100%;
            border-radius: var(--rounded-large);
            overflow: hidden
        }

        .card-blog-full__img {
            display: block;
            width: 100%
        }

        .card-blog-full__entry {
            display: flex;
            flex-wrap: wrap;
            gap: var(--gutter);
            width: 100%;
            margin-top: clamp(32px, 5vw, 180px)
        }

        .card-blog-full__desc {
            flex: 1;
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            margin: 0 clamp(0px, 5vw, 140px);
            line-height: 150%
        }

        .card-blog-full__more {
            margin: clamp(20px, 4vw, 60px) 0
        }

        .card-blog-full__box {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            padding: clamp(20px, 4vw, 40px);
            background: #f8f8f8;
            border-radius: var(--rounded-normal);
            line-height: 140%;
            font-size: var(--text-size-medium)
        }

        .card-blog-full .c-typography__photo {
            width: 80%;
            margin: 0 auto
        }

        .card-blog-full .c-typography__photo img {
            width: 100%
        }

        .card-blog-full table {
            margin: 0 auto
        }

        @media(max-width: 576px) {
            .card-blog-full__entry {
                flex-direction: column
            }

            .card-blog-full__desc {
                margin: 0
            }
        }

        .card-certificate {
            --color-line: rgba(0, 0, 0, 0.1);
            position: relative;
            display: flex;
            flex-direction: column;
            width: 436px;
            max-width: 100%;
            padding: 5%;
            border-top: 10px solid var(--color-award);
            background: var(--bg-3rd);
            aspect-ratio: 430/610
        }

        .card-certificate__header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16%
        }

        .card-certificate__logo {
            width: 10%
        }

        .card-certificate__data {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 20%;
            line-height: 100%;
            font-size: 9px
        }

        .card-certificate__content {
            display: flex;
            flex-direction: column;
            flex: 1
        }

        .card-certificate__title {
            padding: 6% 0;
            font-size: 18px;
            font-size: clamp(18px, 17.2957746479px + 0.1408450704vw, 20px);
            font-weight: var(--font-bold);
            line-height: 120%;
            border-top: 1px solid var(--color-line);
            border-bottom: 1px solid var(--color-line)
        }

        .card-certificate__by {
            padding: 3% 0;
            font-size: 14px;
            font-size: clamp(14px, 13.2957746479px + 0.1408450704vw, 16px);
            line-height: 120%;
            border-bottom: 1px solid var(--color-line)
        }

        .card-certificate__cover {
            display: flex;
            align-items: center;
            flex: 1;
            padding: 5% 0
        }

        .card-certificate__logo-text {
            display: flex;
            align-items: center;
            font-size: 10px;
            font-weight: var(--font-medium);
            line-height: 10px
        }

        .card-certificate__logo-text svg {
            fill: #acacac
        }

        .card-collection__info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 16px;
            line-height: 100%
        }

        .card-collection__left {
            flex: 1
        }

        .card-collection__right {
            flex-shrink: 0
        }

        .card-collection__row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px
        }

        .card-collection__row a {
            color: var(--color-primary)
        }

        .card-collection__row h3 {
            font-size: var(--text-size-primary);
            line-height: 140%
        }

        .card-collection__footer {
            margin-top: 12px;
            padding-top: 16px;
            border-top: 1px solid #f8f8f8
        }

        .card-collection .figure-rollover {
            border-radius: var(--rounded-large);
            overflow: hidden
        }

        .card-collection .figure-rollover__file {
            aspect-ratio: var(--img-resizing-site)
        }

        .card-course {
            --pad-content: 32px;
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--color-white);
            border-radius: var(--rounded-large);
            overflow: hidden
        }

        .card-course__figure {
            width: 100%;
            overflow: hidden
        }

        .card-course__img {
            display: block;
            width: 100%;
            height: auto
        }

        .card-course__content {
            flex: 1;
            padding: var(--pad-content)
        }

        .card-course__title {
            margin-bottom: .4em;
            font-size: 24px
        }

        .card-course__footer svg {
            display: block
        }

        .card-course__row {
            display: grid;
            grid-template-columns: 50% 50%;
            padding: 20px var(--pad-content);
            border-top: 1px solid #f8f8f8;
            border-bottom: 1px solid #f8f8f8;
            line-height: 120%
        }

        .card-course__link {
            display: flex;
            justify-content: flex-end;
            padding: var(--pad-content)
        }

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

        .card-course .swiper-pagination {
            position: absolute;
            bottom: 28px;
            right: 28px;
            z-index: 10
        }

        .card-course a {
            color: var(--color-primary)
        }

        .card-course .circle-avatar__img {
            width: 20px
        }

        .card-directory-sp {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: clamp(24px, 3vw, 64px);
            background: var(--bg-secondary);
            border-radius: var(--rounded-normal);
            color: var(--color-white);
            overflow: hidden
        }

        .card-directory-sp__header {
            display: flex;
            justify-content: space-between
        }

        .card-directory-sp__title {
            font-size: 26px;
            font-size: clamp(26px, 17.5492957746px + 1.6901408451vw, 50px);
            line-height: 110%
        }

        .card-directory-sp__content {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px;
            padding-top: 2em
        }

        .card-directory-sp__left {
            flex: 1
        }

        .card-directory-sp__footer {
            display: flex;
            justify-content: space-between;
            margin-top: 4em
        }

        .card-directory-sp .swiper {
            width: 60%
        }

        .card-directory-sp .swiper-wrapper {
            height: auto;
            border-radius: var(--rounded-normal);
            overflow: hidden
        }

        .card-directory-sp .swiper-pagination {
            display: flex;
            justify-content: flex-end;
            margin-top: 36px
        }

        .card-directory-sp .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .2);
            cursor: pointer;
            transition: all .3s
        }

        .card-directory-sp .swiper-pagination-bullet-active {
            background: var(--color-white)
        }

        .card-directory-sp .swiper img {
            display: block;
            aspect-ratio: var(--img-resizing-site);
            -o-object-fit: cover;
            object-fit: cover
        }

        .card-directory-sp .circle-avatar {
            margin-bottom: auto;
            font-size: var(--text-size-large)
        }

        .card-directory-sp .circle-avatar.hot {
            --avatar-bg: var(--bg-secondary)
        }

        .card-directory-sp .badget-reviews {
            position: relative;
            top: 50px;
            border-color: rgba(255, 255, 255, .3)
        }

        .card-directory-sp a {
            color: var(--color-white)
        }

        .card-directory {
            --card-pad-x: clamp(20px, 3vw, 30px);
            --card-pad-y: clamp(15px, 3vw, 26px);
            --card-border: 1px solid var(--border-gray);
            --card-bg: var(--bg-white);
            --avatar-bg: var(--card-bg);
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--card-bg);
            border-radius: var(--rounded-normal);
            overflow: hidden
        }

        .card-directory__header {
            display: flex;
            padding: var(--card-pad-x);
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            font-weight: var(--font-bold)
        }

        .card-directory__content {
            flex: 1
        }

        .card-directory__media {
            display: block;
            width: 100%;
            aspect-ratio: 4/3;
            -o-object-fit: cover;
            object-fit: cover;
            border-radius: var(--rounded-normal);
            transition: all .3s
        }

        .card-directory__media:hover {
            filter: brightness(80%)
        }

        .card-directory__list {
            flex: 1
        }

        .card-directory__list li {
            display: flex;
            gap: 20px;
            padding: var(--card-pad-y) var(--card-pad-x);
            border-top: var(--card-border);
            line-height: 120%
        }

        .card-directory__list>div {
            display: flex;
            align-items: center
        }

        .card-directory__section {
            width: 40%;
            flex-shrink: 0
        }

        .card-directory__awards {
            display: flex;
            align-items: center;
            gap: 4px;
            font-weight: var(--font-bold)
        }

        .card-directory__awards .ico-svg {
            top: -1px;
            display: block
        }

        .card-directory .box-score--small {
            width: 50px;
            max-width: -moz-max-content;
            max-width: max-content
        }

        .card-directory-basic {
            --card-pad-x: clamp(24px, 3vw, 36px);
            --card-pad: clamp(10px, 3vw, 16px) var(--card-pad-x);
            --card-border: 1px solid #383838;
            --card-bg: var(--bg-secondary);
            --card-color: #fff;
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--card-bg);
            border-radius: var(--rounded-normal);
            color: var(--card-color)
        }

        .card-directory-basic__header {
            padding: clamp(30px, 3vw, 60px) var(--card-pad-x);
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px)
        }

        .card-directory-basic__header p:last-child {
            margin-bottom: 0
        }

        .card-directory-basic__user sup {
            font-weight: 300;
            font-size: .4em
        }

        .card-directory-basic__list {
            flex: 1
        }

        .card-directory-basic__list li {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: var(--card-pad);
            border-top: var(--card-border);
            line-height: 120%
        }

        .card-directory-basic__list div:nth-child(2) {
            text-align: right
        }

        .card-directory-basic__footer {
            display: flex;
            justify-content: flex-end;
            padding: var(--card-pad);
            padding-top: clamp(10px, 3vw, 30px);
            padding-bottom: clamp(10px, 3vw, 30px);
            border-top: var(--card-border)
        }

        .card-directory-basic .ico-svg {
            fill: var(--card-color)
        }

        .card-directory-basic a {
            color: var(--card-color)
        }

        .card-academy {
            --card-pad-x: clamp(20px, 3vw, 30px);
            --card-pad-y: clamp(10px, 3vw, 20px);
            --card-border: 1px solid #ededed;
            --card-bg: rgba(255, 255, 255, 0.9);
            position: relative;
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--card-bg);
            border-radius: var(--rounded-large);
            overflow: hidden;
            container-type: inline-size
        }

        .card-academy--dark {
            --card-bg: var(--bg-secondary);
            --color-link: #fff;
            --card-border: 1px solid #383838;
            color: #fff
        }

        .card-academy__figure {
            position: relative
        }

        .card-academy__figure .top-right {
            position: absolute;
            top: 20px;
            right: 20px;
            pointer-events: none
        }

        .card-academy__figure .bottom-right {
            position: absolute;
            bottom: 20px;
            right: 20px;
            pointer-events: none
        }

        .card-academy__figure .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none
        }

        .card-academy__figure .center .ico-svg {
            display: block;
            opacity: .8
        }

        .card-academy__media {
            display: block;
            width: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            aspect-ratio: 16/9;
            transition: all .3s
        }

        .card-academy__media:hover {
            filter: brightness(80%)
        }

        .card-academy__thumb {
            -o-object-fit: cover;
            object-fit: cover;
            aspect-ratio: 16/9
        }

        .card-academy__tag {
            background: var(--color-learn);
            border: none;
            font-weight: 600
        }

        .card-academy__info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%
        }

        .card-academy__footer .card-academy__row {
            align-items: center;
            border-top: var(--card-border)
        }

        .card-academy__by {
            line-height: 120%
        }

        .card-academy__title {
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            line-height: 120%
        }

        .card-academy__title-large {
            font-size: 18px;
            font-size: clamp(18px, 13.0704225352px + 0.985915493vw, 32px);
            line-height: 100%
        }

        .card-academy__info-masterclass {
            padding-right: 15%;
            min-width: 280px
        }

        @container (max-width: 400px) {
            .card-academy__info-masterclass {
                margin-bottom: 12px;
                padding-right: 0
            }
        }

        .card-academy__excerpt {
            margin-top: clamp(20px, 4vw, 28px);
            font-size: 14px;
            font-size: clamp(14px, 13.2957746479px + 0.1408450704vw, 16px);
            line-height: 1.4
        }

        .card-academy__row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: var(--card-pad-y) var(--card-pad-x)
        }

        .card-academy__row:first-child {
            padding-top: var(--card-pad-x);
            padding-bottom: var(--card-pad-x)
        }

        .card-academy__row>*:first-child {
            flex: 1
        }

        .card-academy__row .budget-tag {
            position: relative;
            top: 3px;
            font-weight: var(--font-bold);
            font-size: 13px
        }

        .card-academy__desc {
            line-height: 140%
        }

        .card-academy__more {
            display: flex;
            align-items: center
        }

        .card-academy__more .ico-svg {
            display: block
        }

        .card-academy__stats {
            display: flex;
            line-height: 100%;
            font-size: 14px;
            gap: var(--card-pad-x)
        }

        .card-academy__stat {
            display: flex;
            flex-direction: column;
            gap: 6px
        }

        .card-academy__timer {
            --scoreBorder: #4e4e4e;
            margin-bottom: auto;
            border-radius: var(--rounded-small)
        }

        .card-academy__timer .box-score__top {
            padding: .5em;
            font-size: .8em;
            line-height: 100%
        }

        .card-academy__icons {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(8px, 3vw, 20px)
        }

        .card-academy__icon {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            line-height: 100%
        }

        .card-academy__icon.lord-icon-color-2 {
            color: var(--lord-icon-primary)
        }

        .card-academy__weeks {
            --scoreBorder: #ededed;
            background: #fff;
            margin-bottom: auto;
            color: #222;
            border-radius: var(--rounded-small)
        }

        .card-academy__weeks .box-score__top {
            padding: .5em;
            font-size: .8em;
            line-height: 100%
        }

        .card-academy__weeks .box-score__bottom {
            padding: .4em;
            line-height: normal;
            font-size: .8em;
            font-weight: 400
        }

        .card-academy__chars {
            display: flex;
            line-height: 120%;
            font-size: 12px;
            gap: 3%
        }

        .card-academy__char {
            padding-left: 8px;
            border-left: 2px solid #ff0
        }

        .card-academy__score {
            width: 100px
        }

        .card-academy__coming-soon {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .8);
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            line-height: 160%;
            color: #fff;
            text-align: center;
            z-index: 2
        }

        .card-academy__label {
            width: 130px;
            color: var(--color-primary);
            border: 1px solid rgba(0, 0, 0, .1);
            border-radius: var(--rounded-small);
            overflow: hidden
        }

        .card-academy__label>div {
            line-height: 1.2;
            overflow: hidden
        }

        .card-academy__label>div:first-child {
            padding: 8px 12px
        }

        .card-academy__label>div:has(.card-academy__marquee) {
            padding-inline: 0;
            background: #fa5d29;
            border-top: none;
            color: #fff
        }

        .card-academy__label>div.is-closed {
            background: var(--color-primary);
            color: #fff
        }

        .card-academy__marquee {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 30px;
            overflow: hidden
        }

        .card-academy__marquee>* {
            will-change: transform;
            transform: translateX(0);
            white-space: nowrap;
            padding-inline: .5ch;
            animation: marquee_text 4s linear infinite
        }

        @keyframes marquee_text {
            0% {
                transform: translateX(0)
            }

            100% {
                transform: translateX(-100%)
            }
        }

        .card-academy .box-score {
            width: 100px;
            margin-bottom: 8px;
            border: none;
            text-align: left
        }

        .card-academy .box-score__info {
            margin-bottom: 12px;
            font-size: 14px;
            line-height: 14px
        }

        .card-academy .box-score__wrap {
            display: flex;
            align-items: center;
            position: relative;
            background-color: #ededed;
            border-radius: 4px;
            overflow: hidden
        }

        .card-academy .box-score__bar {
            height: 4px;
            background-color: var(--color-learn)
        }

        .box-price {
            display: flex;
            gap: 8px;
            line-height: normal
        }

        .box-price__off {
            display: flex;
            flex-direction: column;
            padding-top: 2px;
            font-size: 12px;
            line-height: 14px
        }

        .box-price__old {
            color: #fa5d29
        }

        .box-price__previous {
            color: #fa5d29;
            text-decoration: line-through
        }

        .box-price__previous strong {
            font-weight: 400
        }

        .box-price__total {
            font-size: 32px;
            line-height: 1
        }

        .box-price__total sup {
            margin-left: 4px;
            font-size: 12px;
            font-weight: 400
        }

        .box-price__amount {
            display: flex;
            gap: 2px;
            height: 27px;
            font-size: 32px
        }

        .box-price__amount sup {
            font-size: 14px;
            font-weight: 400;
            transform: translateY(2px)
        }

        .box-price__currency {
            font-size: 14px;
            font-weight: var(--font-medium)
        }

        .box-price__dto {
            font-size: 9px
        }

        .box-price__right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            line-height: normal;
            height: 100%
        }

        .box-price__dec {
            display: flex;
            justify-content: space-between
        }

        .postit {
            position: absolute;
            top: 0;
            right: 0;
            width: 260px;
            padding: 20px clamp(16px, 2vw, 20px);
            background: var(--ch-bg, var(--color-learn-2));
            line-height: 140%;
            border-radius: var(--rounded-large)
        }

        .postit p:last-child {
            margin-bottom: 0
        }

        .card-job {
            --card-pad-x: clamp(20px, 3vw, 30px);
            --card-pad-y: clamp(10px, 3vw, 16px);
            --card-border: 1px solid #ededed;
            --card-bg: var(--color-white);
            --avatar-bg: var(--card-bg);
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--card-bg);
            border-radius: var(--rounded-large)
        }

        .card-job__header {
            display: flex;
            gap: 8px;
            align-items: center;
            padding: var(--card-pad-x);
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            font-weight: var(--font-bold);
            border-bottom: var(--card-border)
        }

        .card-job__header>div {
            display: flex
        }

        .card-job__header>div:nth-child(1) {
            flex: 1;
            overflow: hidden
        }

        .card-job__header .users-credits__item {
            flex-wrap: nowrap
        }

        .card-job__header .circle-avatar {
            flex-shrink: 0
        }

        .card-job__tag {
            background: #fdede8;
            border: none
        }

        .card-job__content {
            flex: 1;
            padding: var(--card-pad-x);
            line-height: 150%
        }

        .card-job__title {
            margin-bottom: 1em;
            font-size: 18px;
            font-size: clamp(18px, 17.2957746479px + 0.1408450704vw, 20px);
            line-height: 130%
        }

        .card-job__list {
            padding-bottom: var(--card-pad-y)
        }

        .card-job__list li {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: var(--card-pad-y) var(--card-pad-x);
            border-top: var(--card-border);
            line-height: 120%
        }

        .card-job__list div:nth-child(2) {
            text-align: right
        }

        .card-job__ago {
            display: flex;
            align-items: center
        }

        .card-job__ago .ico-svg {
            top: -1px;
            margin-right: 8px
        }

        .card-jury {
            --card-pad: clamp(10px, 3vw, 16px) clamp(20px, 3vw, 30px);
            --card-border: 1px solid var(--border-gray);
            --card-bg: var(--bg-white);
            --avatar-bg: var(--card-bg);
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--card-bg);
            border-radius: var(--rounded-normal)
        }

        .card-jury__header {
            padding: var(--card-pad);
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            font-weight: var(--font-bold)
        }

        .card-jury__title {
            margin: clamp(10px, 3vw, 20px) 0;
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            line-height: 130%
        }

        .card-jury__figure img {
            display: block;
            width: 100%;
            aspect-ratio: var(--img-resizing-site);
            -o-object-fit: cover;
            object-fit: cover;
            border-radius: var(--rounded-normal);
            transition: all .3s;
            filter: grayscale(1)
        }

        .card-jury__figure img:hover {
            filter: grayscale(1) brightness(80%)
        }

        .card-jury__list {
            flex: 1
        }

        .card-jury__list li {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: var(--card-pad);
            border-top: var(--card-border);
            line-height: 120%
        }

        .card-jury__list div:nth-child(2) {
            text-align: right
        }

        .card-jury__footer {
            display: flex;
            justify-content: space-between;
            padding: var(--card-pad);
            padding-top: clamp(10px, 3vw, 30px);
            padding-bottom: clamp(10px, 3vw, 30px);
            border-top: var(--card-border)
        }

        .card-jury__social {
            display: flex;
            align-items: center;
            gap: 30px
        }

        .card-jury__social .ico-svg {
            display: block
        }

        .badget-reviews {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 60px;
            height: 60px;
            border: 1px solid rgba(var(--color-primary-rgb), 0.1);
            border-radius: var(--rounded-normal);
            font-size: 1em;
            line-height: 120%
        }

        .badget-reviews__label {
            margin: 2px 0;
            font-size: .8em
        }

        .badget-reviews__number {
            font-size: 1.6em
        }

        .c-view-all {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-top: clamp(30px, 5vw, 80px)
        }

        .c-view-all__row {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 20px
        }

        .c-view-all__ico-left {
            vertical-align: text-bottom;
            margin-right: 4px
        }

        .add-card {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            flex-wrap: wrap;
            gap: var(--gutter);
            height: 100%;
            min-height: 300px;
            border: 1px solid #ededed;
            background: #f8f8f8;
            border-radius: var(--rounded-normal)
        }

        .add-card__content {
            padding: 30px;
            text-align: center;
            line-height: 150%
        }

        .add-card__content p:not(:last-child) {
            margin-bottom: 2em
        }

        .add-card .button {
            min-width: 180px
        }

        .card-masterclass {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: clamp(20px, 4vw, 60px);
            border-radius: var(--rounded-large);
            aspect-ratio: 1/1;
            color: #fff;
            overflow: hidden
        }

        .card-masterclass--soon {
            pointer-events: none
        }

        .card-masterclass--soon:has(a) {
            pointer-events: all
        }

        .card-masterclass--soon .card-masterclass__bottom {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center
        }

        .card-masterclass--soon .card-masterclass__photo {
            filter: brightness(40%)
        }

        .card-masterclass__top,
        .card-masterclass__bottom {
            position: relative;
            pointer-events: none;
            z-index: 2
        }

        .card-masterclass__logo {
            max-width: 15vw;
            width: auto;
            max-height: 80px
        }

        .card-masterclass__photo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            -o-object-fit: cover;
            object-fit: cover
        }

        .card-masterclass__bt {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 220px;
            max-width: 30vw;
            height: 60px;
            text-align: center;
            font-size: 18px;
            border-bottom: 10px solid var(--color-masterclass)
        }

        .card-masterclass__title {
            line-height: 100%;
            width: 600px;
            max-width: 100%;
            margin: .2em 0
        }

        .card-site-full__credits {
            display: flex;
            justify-content: center;
            margin-top: clamp(30px, 5vw, 80px);
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            font-weight: var(--font-bold)
        }

        .card-site-full__more {
            margin-top: clamp(30px, 5vw, 60px);
            text-align: center
        }

        .card-site-full .figure-rollover {
            width: 100%;
            border-radius: var(--rounded-large);
            overflow: hidden
        }

        .card-site-mini {
            display: flex;
            align-items: center;
            gap: 20px
        }

        .card-site-mini__figure {
            flex-shrink: 0;
            position: relative;
            border-radius: var(--rounded-small);
            overflow: hidden
        }

        .card-site-mini__title {
            font-size: 1em
        }

        .card-site-mini a {
            color: var(--color-primary)
        }

        .card-site {
            font-size: 15px
        }

        .card-site__left {
            flex: 1;
            display: flex;
            align-items: center
        }

        .card-site__right {
            display: flex;
            gap: 16px;
            flex-shrink: 0;
            padding-left: 20px
        }

        .card-site__info {
            display: flex;
            flex-wrap: wrap;
            padding-top: 16px
        }

        .card-site__row {
            display: flex;
            align-items: center;
            gap: 8px
        }

        .card-site__award {
            font-weight: var(--font-medium)
        }

        .card-site__title {
            font-size: 15px;
            line-height: 150%
        }

        .card-site__desc p {
            margin: .4em 0 0 0;
            line-height: 150%
        }

        .card-site__awards {
            display: flex;
            align-items: center;
            gap: 8px
        }

        .card-site .figure-rollover {
            border-radius: var(--rounded-small);
            overflow: hidden
        }

        .card-site .figure-rollover__file {
            aspect-ratio: var(--img-resizing-site)
        }

        @media(max-width: 576px) {
            .card-site__info {
                overflow: hidden
            }
        }

        .card-site-2 {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--bg-white);
            border-radius: var(--rounded-normal)
        }

        .card-site-2__info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: clamp(20px, 3vw, 30px)
        }

        .card-site-2__row {
            display: flex;
            justify-content: space-between
        }

        .card-site-2__row:has(.card-site-2__category) {
            gap: 20px
        }

        .card-site-2__row div:nth-child(2) {
            flex-shrink: 0;
            text-align: right
        }

        .card-site-2__title {
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            line-height: 120%
        }

        .card-site-2__vote-now {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-top: 20px
        }

        .card-site-2 .figure-rollover {
            border-radius: var(--rounded-normal);
            overflow: hidden
        }

        .card-site-2 .figure-rollover:hover {
            filter: brightness(90%)
        }

        .card-site-2 .figure-rollover__file {
            aspect-ratio: var(--img-resizing-site)
        }

        .card-video {
            position: relative;
            display: inline-flex;
            color: var(--color-white);
            overflow: hidden
        }

        .card-video__header {
            position: absolute;
            top: 28px;
            left: 28px;
            z-index: 9
        }

        .card-video__footer {
            position: absolute;
            bottom: 28px;
            right: 28px
        }

        .card-video-v {
            --colorCard: #fff;
            position: relative;
            border-radius: var(--rounded-large);
            aspect-ratio: 50/74;
            color: var(--colorCard);
            overflow: hidden
        }

        .card-video-v:hover .card-video-v__media {
            filter: brightness(90%);
            transform: scale(1.05)
        }

        .card-video-v__media {
            display: block;
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            transition: all .3s
        }

        .card-video-v__info {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: flex-end;
            padding: clamp(20px, 6vw, 44px)
        }

        .card-video-v__footer {
            display: flex;
            gap: 20px
        }

        .card-video-v__title {
            font-size: 24px;
            font-size: clamp(24px, 19.7746478873px + 0.8450704225vw, 36px);
            line-height: 120%
        }

        .card-video-v__title+div {
            margin-top: 1em
        }

        .card-video-v__ico {
            display: flex;
            align-items: flex-end;
            flex-shrink: 0
        }

        .l-news {
            position: relative;
            padding: clamp(40px, 6vw, 120px) clamp(0px, 6vw, 100px);
            border-radius: var(--rounded-large)
        }

        .l-news--dark {
            --bg-primary: var(--bg-secondary);
            --color-primary: var(--color-white);
            --color-primary-rgb: 255, 255, 255;
            background: var(--bg-secondary);
            color: var(--color-white)
        }

        .l-news--style1 {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, auto)
        }

        .l-news--style1 .l-news__item {
            width: clamp(100px, 33vw, 608px)
        }

        .l-news--style1 .l-news__item:nth-child(1) {
            grid-column: 1/3;
            justify-self: end
        }

        .l-news--style1 .l-news__item:nth-child(3) {
            grid-area: 3/2;
            justify-self: end;
            margin-top: -40%
        }

        .l-news--style1 .grid-title {
            margin-top: 2rem
        }

        .l-news--style1 .grid-title__cell:nth-child(1),
        .l-news--style1 .grid-title__cell:nth-child(4) {
            grid-column: 1/3
        }

        .l-news--style1 .grid-title__cell:nth-child(2) {
            position: relative;
            left: -20%
        }

        .l-news--style1 .grid-title span {
            position: relative
        }

        .l-news--style1 .grid-title sup.grid-title__subtitle {
            position: absolute;
            bottom: calc(100% + 2rem);
            left: 0;
            font-size: var(--text-size-primary);
            font-weight: 300
        }

        .l-news--style1 .grid-title sup.grid-title__desc {
            position: absolute;
            top: calc(100% + 2rem);
            left: 0;
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            font-weight: 300;
            text-align: left;
            line-height: 150%;
            font-weight: 300;
            color: #7a7a7a
        }

        .l-news--style1 .grid-title svg {
            margin-left: -0.1em;
            width: .7em;
            height: auto
        }

        .l-news--style1 p {
            color: #7a7a7a
        }

        .l-news--style2 {
            display: grid;
            grid-template-columns: auto auto;
            grid-template-rows: repeat(2, auto);
            justify-content: space-evenly;
            width: 100%;
            margin: 0 auto;
            padding: 0
        }

        .l-news--style2 .l-news__item:nth-child(odd) {
            padding-right: 0
        }

        .l-news--style2 .l-news__item:nth-child(odd) .card-blog {
            width: 350px;
            max-width: 100%
        }

        .l-news--style2 .l-news__item:nth-child(odd) .card-blog__title {
            width: 100%
        }

        .l-news--style2 .l-news__item:nth-child(1) {
            grid-column: 2/3
        }

        .l-news--style2 .l-news__item:nth-child(2) {
            grid-row: 1/3;
            align-self: center
        }

        .l-news--style2 .l-news__item:nth-child(3) {
            grid-area: 2/2;
            justify-self: end;
            margin-top: 40%
        }

        .l-news--style2 .card-blog {
            display: block;
            width: 657px;
            max-width: 100%
        }

        .l-news--style2 .card-blog__title {
            width: 500px;
            max-width: 100%;
            font-size: 30px
        }

        .l-news .card-element {
            margin: 0 auto 5vw auto
        }

        .l-news .list-elements {
            margin: 4vw 0
        }

        .l-news p {
            margin-bottom: 1.5em;
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            line-height: 140%
        }

        .l-news .ico-svg {
            fill: var(--color-primary)
        }

        @media(max-width: 1023px) {
            .l-news--style1 {
                display: flex;
                flex-direction: column;
                gap: var(--gutter);
                padding: 0
            }

            .l-news--style1 .l-news__item {
                width: 100%
            }

            .l-news--style1 .l-news__item:nth-child(1) {
                display: flex;
                justify-content: flex-end;
                width: 100%
            }

            .l-news--style1 .l-news__item:nth-child(3) {
                margin-top: 0
            }

            .l-news--style1 .l-news__item .grid-title {
                width: -moz-min-content;
                width: min-content
            }

            .l-news--style2 {
                display: flex;
                flex-direction: column;
                gap: var(--gutter);
                padding: 0
            }

            .l-news--style2 .l-news__item {
                width: 100%
            }

            .l-news--style2 .l-news__item:nth-child(2) {
                margin-top: 0
            }

            .l-news--style2 .l-news__item:nth-child(3) {
                margin-top: 0
            }
        }

        .card-slide__info {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding-top: 24px
        }

        .card-slide__title {
            margin-bottom: .5em;
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px)
        }

        .card-slide__title a {
            color: var(--color-primary)
        }

        .card-slide__data {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px
        }

        .card-slide .is-truncated {
            flex: 1
        }

        .card-slide .is-truncated .avatar-name {
            flex: 1
        }

        .card-slide .is-truncated .avatar-name__name {
            flex: 1;
            display: flex
        }

        .card-slide .is-truncated .avatar-name .link-underlined {
            flex: 1;
            width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .card-slide__row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            width: 100%
        }

        .card-slide__row .card-slide__title {
            margin-bottom: 0
        }

        .card-slide__row .link-underlined {
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            font-weight: var(--font-bold)
        }

        .card-slide__row small {
            position: relative;
            top: .2em;
            margin: 0 .3em;
            font-weight: 300;
            font-size: .75em;
            line-height: 100%
        }

        .card-slide .figure-rollover {
            border-radius: var(--rounded-large);
            overflow: hidden
        }

        .content-dropdown-tags {
            position: relative
        }

        .content-dropdown-tags.is-active .button {
            background: var(--bg-secondary);
            color: var(--color-white)
        }

        .content-dropdown-tags.is-active .dropdown-tags {
            opacity: 1;
            visibility: visible
        }

        .dropdown-tags {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 600px;
            max-width: calc(100vw - 48px);
            max-height: 400px;
            padding: 30px;
            border-radius: var(--rounded-normal);
            background: var(--bg-secondary);
            overflow-y: auto;
            cursor: default;
            opacity: 0;
            visibility: hidden;
            transition: all .3s;
            z-index: 4;
            overflow: auto;
            overscroll-behavior: contain
        }

        .dropdown-tags--top-right {
            top: auto;
            bottom: calc(100% + 16px);
            right: 0
        }

        .dropdown-tags.is-show {
            opacity: 1;
            visibility: visible
        }

        .dropdown-tags__label {
            margin-bottom: 20px;
            text-align: left;
            font-size: var(--text-size-small);
            color: #a7a7a7;
            line-height: 100%
        }

        .dropdown-tags__close {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 10px;
            cursor: pointer
        }

        .dropdown-tags__close svg {
            display: block;
            fill: #fff
        }

        .dropdown-tags .list-tags+.dropdown-tags__label {
            margin-top: 30px
        }

        .dropdown-tags .button {
            border-color: rgba(255, 255, 255, .4)
        }

        .dropdown-tags .button:hover {
            border-color: rgba(255, 255, 255, .4)
        }

        .c-tags {
            display: flex;
            width: 1100px;
            max-width: 100%;
            margin: 0 auto
        }

        .c-tags .list-tags {
            justify-content: center
        }

        .c-tags-row {
            position: relative;
            display: flex;
            gap: 16px;
            margin: 20px 0
        }

        .c-tags-row__left {
            flex: 1;
            height: 40px;
            overflow: hidden
        }

        .c-tags-row .more-tags {
            position: absolute;
            right: 0
        }

        .modal {
            --pad-modal: 30px;
            --pad-large-modal: 50px;
            --pad-modal-box: clamp(24px, 3vw, 48px);
            position: fixed;
            inset: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100%;
            height: auto;
            padding: var(--pad-modal) 0;
            background-color: rgba(0, 0, 0, var(--modal-alpha));
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            visibility: hidden;
            opacity: 0;
            z-index: 10;
            transition: all .4s
        }

        .modal.is-visible {
            visibility: visible;
            opacity: 1
        }

        .modal.is-visible .modal__content {
            opacity: 1
        }

        .modal[class*="--white"] {
            background-color: rgba(255, 255, 255, .7)
        }

        .modal[class*="--fullscreen"] {
            padding: 0
        }

        .modal[class*="--fullscreen"] .modal__content {
            width: 100%;
            height: calc(100% - 30px);
            margin-bottom: 0
        }

        .modal[class*="--x-large"] .modal__content {
            width: calc(100% - 52px)
        }

        .modal[class*="--large"] .modal__content {
            width: 1142px
        }

        .modal[class*="--medium"] .modal__content {
            width: 900px
        }

        .modal[class*="--small"] .modal__content {
            width: 600px
        }

        .modal[class*="--bottom"] {
            padding-bottom: 0;
            align-items: flex-end
        }

        .modal[class*="--bottom"].is-visible .modal__content {
            transform: translateY(0)
        }

        .modal[class*="--bottom"] .modal__content {
            margin: 0;
            transform: translateY(300px);
            transition: transform .6s
        }

        .modal[class*="--bottom"] .modal__box {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0
        }

        .modal__content {
            position: relative;
            display: inline-block;
            width: 840px;
            max-width: 100%;
            margin: auto 0;
            opacity: 0;
            transition: opacity .6s .2s
        }

        .modal__box {
            padding: 3em;
            padding: var(--pad-modal-box);
            background: var(--bg-primary);
            border-radius: var(--rounded-large)
        }

        .modal__box--dark {
            background: var(--bg-secondary);
            color: var(--color-white)
        }

        .modal__video {
            position: relative;
            border-radius: var(--rounded-large);
            overflow: hidden
        }

        .modal__sotd-document {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            background-color: var(--bg-primary);
            overflow-x: hidden;
            overflow-y: auto;
            scroll-behavior: smooth;
            border-radius: var(--rounded-normal)
        }


        .modal .bt-nav {
            position: fixed;
            bottom: 40px;
            right: 40px;
            z-index: 9
        }

        .header-col {
            display: flex;
            margin-bottom: clamp(50px, 20vw, 100px)
        }

        .header-col>div {
            flex: 1
        }

        .l-register {
            display: flex;
            min-height: 100vh
        }

        .l-register__left {
            position: relative;
            width: 60%
        }

        .l-register__right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            width: 40%;
            min-width: 700px
        }

        .l-register__bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            -o-object-fit: contain;
            object-fit: contain
        }

        .l-register__content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            padding: 0 40px
        }

        .l-register__top,
        .l-register__bottom {
            padding: clamp(30px, 4vw, 60px) 0
        }

        .l-register__logo {
            position: absolute;
            top: 40px;
            left: 40px;
            display: inline-flex;
            align-items: center;
            gap: 16px;
            margin-bottom: clamp(30px, 4vw, 60px)
        }

        .l-register__logo svg:nth-child(1) {
            width: 71px;
            height: auto;
            fill: var(--color-primary)
        }

        .l-register__logo .sticker-svg {
            width: clamp(40px, 5vw, 80px)
        }

        .l-register .content-tabs {
            width: 580px;
            max-width: 100%;
            height: 100%
        }

        .l-register .content-tabs__item {
            height: 100%
        }

        @media(max-width: 576px) {
            .l-register__left {
                display: none
            }

            .l-register__right {
                width: 100%;
                min-width: auto
            }
        }

        .m-login {
            --min-height-login: 693px;
            position: relative;
            width: 100%;
            min-height: var(--min-height-login);
            border-radius: var(--rounded-large);
            overflow: hidden
        }

        .m-login__container {
            display: flex;
            justify-content: space-between;
            min-height: var(--min-height-login)
        }

        .m-login__container>div {
            flex: 1
        }

        .m-login__left {
            background: var(--bg-3rd)
        }

        .m-login__right {
            background: var(--bg-white)
        }

        .m-login__inner {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            padding: var(--pad-large-modal)
        }

        .m-login__title {
            margin-bottom: 1.5em;
            font-size: var(--text-size-large);
            font-weight: normal
        }

        .m-login__logo {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2vw;
            font-size: 162px
        }

        .m-login__logo svg {
            width: auto;
            height: 1em
        }

        .m-login__logo svg:nth-child(1) {
            height: .4em
        }

        .m-login__forgot {
            margin-top: -1em;
            text-align: right;
            font-size: .8em
        }

        .m-login__social {
            display: flex;
            flex-wrap: wrap;
            gap: 16px
        }

        .m-login__social .button {
            flex: 1
        }

        .m-login__or {
            margin-top: 2em
        }

        .m-login .button[class*=full] {
            margin-top: .5em
        }

        .m-alert__header {
            display: flex;
            justify-content: space-between;
            margin-bottom: clamp(40px, 5vw, 80px)
        }

        .m-alert__header img {
            margin: auto 0
        }

        .m-alert__top {
            margin-bottom: 2em
        }

        .m-alert__title {
            font-size: var(--text-size-large);
            font-weight: 300
        }

        .m-alert__bts {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: var(--gutter);
            margin-top: var(--pad-modal-box)
        }

        .m-alert__bts .button {
            flex: 1;
            min-width: min(12em, 100%)
        }

        .m-alert__content .list-cart {
            margin-bottom: 40px
        }

        .m-alert__content .list-cart__item {
            padding: clamp(12px, 4vw, 16px)
        }

        .m-cookies__bottom {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px 0;
            margin-top: clamp(30px, 5vw, 50px)
        }

        .m-cookies__bottom div:first-child {
            flex: 1
        }

        .m-cookies__list li {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            padding: 16px 0;
            line-height: 130%;
            background-image: linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);
            background-position: bottom;
            background-size: 8px 1px;
            background-repeat: repeat-x
        }

        .m-cookies__list div:first-child {
            flex: 1
        }

        .cookies-popup {
            position: fixed;
            right: 30px;
            bottom: -50%;
            width: 400px;
            max-width: 100%;
            padding: clamp(20px, 5vw, 30px);
            background: var(--bg-secondary);
            color: #fff;
            border-radius: var(--rounded-normal);
            z-index: 10;
            opacity: 0;
            transition: all .4s
        }

        .cookies-popup.is-show {
            opacity: 1;
            bottom: 30px
        }

        .cookies-popup .button:hover {
            background: #7a7a7a
        }

        .c-heading {
            position: relative;
            font-weight: 400;
            color:#222222 !important
        }

        .c-heading--small .c-heading__top {
            margin-bottom: 1rem
        }

        .c-heading--small .c-heading__middle+.c-heading__bottom {
            margin-top: 1em
        }

        .c-heading--small .c-heading__short-desc {
            width: 500px
        }

        .c-heading__top {
            margin-bottom: clamp(20px, 3vw, 24px);
            font-weight: 400
        }

        .c-heading__top .text-default {
            font-weight: 400
        }

        .c-heading__middle+.c-heading__bottom {
            margin-top: 1em
        }

        .c-heading__short-desc {
            display: inline-block;
            width: 360px;
            max-width: 100%;
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px)
        }

        .c-heading__large-desc {
            display: inline-block;
            width: 900px;
            max-width: 100%;
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px)
        }

        .c-heading__by {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            margin-top: clamp(20px, 2vw, 30px);
            font-size: 16px;
            font-size: clamp(16px, 14.5915492958px + 0.2816901408vw, 20px)
        }

        .c-heading__by small {
            font-size: .6em
        }

        .c-heading__between {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            flex-wrap: wrap;
            gap: 16px
        }

        .c-heading .heading-1 {
            position: relative;
            display: inline-block
        }

        .subtitle-center {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: clamp(30px, 5vw, 80px);
            font-size: 18px;
            font-size: clamp(18px, 17.2957746479px + 0.1408450704vw, 20px)
        }

        .subtitle-center--bottom {
            margin-top: clamp(30px, 5vw, 80px)
        }

        .subtitle-center .bt-ico-left {
            margin-left: 1em
        }

        .text-subtitle-narrow {
            display: inline-block;
            width: 360px;
            max-width: 100%
        }

        .heading-underlined {
            margin-bottom: 3em;
            font-size: var(--text-size-primary);
            font-weight: normal
        }

        .heading-underlined__text {
            display: inline-block;
            border-bottom: 1px solid var(--color-primary)
        }

        .heading-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 71px;
            margin-bottom: 48px;
            background: var(--bg-primary);
            background-image: linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);
            background-position: bottom;
            background-size: 8px 1px;
            background-repeat: repeat-x
        }

        .heading-section.sticky {
            position: sticky;
            top: 71px;
            z-index: 1
        }

        .heading-section__left {
            display: flex;
            align-items: center;
            gap: 8px;
            height: 100%
        }

        .heading-section__right {
            display: flex;
            align-items: center
        }

        .heading-section__title {
            min-width: 150px;
            font-size: var(--text-size-primary);
            font-weight: var(--font-medium)
        }

        .heading-section .menu-tabs {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            height: 100%
        }

        @media(max-width: 768px) {
            .heading-section.sticky {
                position: static
            }

            .heading-section__left {
                width: 100%
            }

            .heading-section__right {
                display: none
            }

            .heading-section__title {
                min-width: auto;
                padding-right: 12px
            }

            .heading-section .menu-tabs {
                width: 100%;
                overflow-x: auto
            }

            .heading-section:has(.menu-tabs>li:nth-child(1)) {
                height: auto
            }

            .heading-section:has(.menu-tabs>li:nth-child(1)) .heading-section__title {
                padding-right: 0;
                font-size: 1.4em
            }

            .heading-section:has(.menu-tabs>li:nth-child(1)) .heading-section__left {
                width: 100%;
                flex-direction: column;
                flex-wrap: wrap
            }

            .heading-section:has(.menu-tabs>li:nth-child(1)) .menu-tabs {
                flex-wrap: nowrap
            }

            .heading-section:has(.menu-tabs>li:nth-child(1)) .menu-tabs li {
                padding-bottom: 16px
            }
        }

        .tb-stats {
            border-collapse: separate;
            border-spacing: 0;
            margin: 0 auto
        }

        .tb-stats th,
        .tb-stats td {
            border-right: 1px solid var(--border-table);
            border-bottom: 1px solid var(--border-table)
        }

        .tb-stats th:first-child,
        .tb-stats td:first-child {
            border-left: 1px solid var(--border-table)
        }

        .tb-stats th {
            padding: clamp(8px, 2vw, 16px);
            border-top: 1px solid var(--border-table);
            font-size: var(--text-size-small);
            font-weight: var(--font-medium);
            text-transform: uppercase;
            line-height: 120%
        }

        .tb-stats td {
            padding: clamp(8px, 2vw, 20px) clamp(8px, 2vw, 16px);
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px);
            line-height: 120%
        }

        .tb-stats tr:first-child th:first-child {
            border-top-left-radius: var(--rounded-normal)
        }

        .tb-stats tr:first-child th:last-child {
            border-top-right-radius: var(--rounded-normal)
        }

        .tb-stats tr:last-child td:first-child {
            border-bottom-left-radius: var(--rounded-normal)
        }

        .tb-stats tr:last-child td:last-child {
            border-bottom-right-radius: var(--rounded-normal)
        }

        .tb-dotteds {
            --button-pad: 16px;
            width: 100%;
            line-height: 120%;
            font-weight: 400
        }

        .tb-dotteds__bts {
            display: inline-flex;
            gap: 12px
        }

        .tb-dotteds th {
            padding: clamp(10px, 2vw, 28px);
            background-image: linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);
            background-position: bottom;
            background-size: 8px 1px;
            background-repeat: repeat-x;
            font-weight: normal
        }

        .tb-dotteds tr {
            position: relative;
            transition: all .3s
        }

        .tb-dotteds tr:hover:not(:has(th)) {
            background: var(--color-odd-rows)
        }

        .tb-dotteds td {
            padding: clamp(10px, 2vw, 36px) clamp(10px, 2vw, 28px);
            background-image: linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);
            background-position: bottom;
            background-size: 8px 1px;
            background-repeat: repeat-x;
            font-size: var(--text-size-medium)
        }

        .tb-dotteds .button {
            font-size: 1rem
        }

        .tb-dotteds .text-truncated {
            max-width: 300px
        }

        .palette__desc {
            width: 300px;
            margin-bottom: 2em;
            font-size: 16px;
            font-size: clamp(16px, 14.5915492958px + 0.2816901408vw, 20px)
        }

        .palette__list {
            display: flex;
            justify-content: center
        }

        .list-palette {
            --palette-width: 400px;
            --palette-margin: 300px;
            --palette-margin-neg: -300px;
            --palette-height: 580px;
            --palette-pad: 30px;
            --palette-pad-neg: -30px;
            position: relative;
            display: inline-flex;
            box-sizing: content-box
        }

        .list-palette--h {
            padding-left: var(--palette-margin)
        }

        .list-palette--h li {
            margin-left: var(--palette-margin-neg);
            transition: all .3s
        }

        .list-palette--h li:hover:not(:last-child) {
            margin-right: var(--palette-margin)
        }

        .list-palette--h li:hover:not(:last-child) .list-palette__item {
            margin-right: var(--palette-pad-neg);
            padding-right: var(--palette-pad);
            border-top-right-radius: 0;
            border-bottom-right-radius: 0
        }

        .list-palette--h li:hover:not(:last-child) .list-palette__header {
            transition-delay: .3s;
            opacity: 1
        }

        .list-palette--h li:not(:last-child) .list-palette__header {
            opacity: 0
        }

        .list-palette--v {
            padding-left: var(--palette-margin)
        }

        .list-palette--v li {
            margin-left: var(--palette-margin-neg);
            transition: all .3s
        }

        .list-palette--v li:not(:last-child) .list-palette__header {
            opacity: 0
        }

        .list-palette--v li:hover {
            z-index: 2
        }

        .list-palette--v li:hover .list-palette__bts,
        .list-palette--v li:hover .list-palette__header {
            opacity: 1
        }

        .list-palette--v .list-palette__item {
            height: auto
        }

        .list-palette--v .list-palette__footer {
            display: none
        }

        .list-palette--v .list-palette__bts {
            opacity: 0;
            transition: all .3s
        }

        .list-palette__item {
            display: inline-flex;
            flex-direction: column;
            justify-content: space-between;
            width: var(--palette-width);
            height: var(--palette-height);
            border-radius: var(--rounded-large);
            color: var(--color-card, --color-primary);
            overflow: hidden;
            transition: all .3s
        }

        .list-palette__box {
            display: inline-flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            padding: var(--palette-pad)
        }

        .list-palette__header {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            font-size: 20px;
            transition: all .3s
        }

        .list-palette__footer {
            text-align: right
        }

        .list-palette__aa {
            font-size: 75px;
            font-size: clamp(75px, 48.5915492958px + 5.2816901408vw, 150px);
            font-weight: 400;
            line-height: 60%;
            transition: all .3s
        }

        .list-palette__bts {
            display: flex;
            align-items: center;
            gap: var(--gutter)
        }

        .list-palette__bt {
            display: flex;
            align-items: stretch;
            cursor: pointer;
            transition: all .3s
        }

        .list-palette__bt:hover {
            opacity: .7
        }

        @media(max-width: 1024px) {
            .list-palette {
                --palette-width: 200px;
                --palette-margin: 170px;
                --palette-margin-neg: -170px;
                --palette-pad: 15px;
                --palette-pad-neg: -15px
            }

            .list-palette__header {
                font-size: var(--text-size-primary)
            }
        }

        .marquee-text {
            display: flex;
            align-items: center;
            justify-items: center;
            overflow: hidden
        }

        .marquee-text div {
            padding-right: .5ch;
            white-space: nowrap
        }

        .heading-svg {
            position: relative;
            margin: clamp(20px, 6vw, 60px) 0;
            line-height: 100%
        }

        .heading-svg__title {
            width: 100%;
            height: auto;
            fill: var(--color-primary);
            font-weight: var(--font-bold)
        }

        .heading-fit {
            container-type: inline-size;
            margin: clamp(20px, 6vw, 60px) 0;
            text-align: center;
            border: 1px solid red
        }

        .heading-fit__title {
            display: block;
            font-weight: var(--font-bold);
            font-size: var(--font-size);
            line-height: 1em;
            transform: translateY(0.07em);
            white-space: nowrap
        }

        .c-collect {
            --gray-collect: #a7a7a7;
            --height-modal: 591px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            background: var(--bg-primary);
            border-radius: var(--rounded-large);
            overflow: hidden
        }

        .c-collect__left {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            flex: 1;
            min-width: min(12em, 100%);
            min-height: var(--height-modal);
            background-color: #ededed
        }

        .c-collect__right {
            flex: 1
        }

        .c-collect__inner {
            width: 100%;
            padding: 0 var(--pad-large-modal)
        }

        .c-collect__media {
            flex: 1;
            display: flex;
            justify-content: center
        }

        .c-collect__thumb {
            width: 380px;
            margin: auto;
            border-radius: var(--rounded-normal)
        }

        .c-collect__header {
            display: flex;
            align-items: center;
            height: 140px
        }

        .c-collect__title {
            font-size: var(--text-size-large)
        }

        .c-collect__footer {
            display: flex;
            align-items: center;
            height: 140px
        }

        .c-collect__search {
            --height-input: 32px;
            position: relative;
            margin: 50px 0
        }

        .c-collect__search input {
            width: 100%;
            height: var(--height-input);
            background: rgba(0, 0, 0, 0)
        }

        .c-collect__search input::-moz-placeholder {
            color: var(--gray-collect);
            font-size: 10px;
            text-transform: uppercase
        }

        .c-collect__search input::placeholder {
            color: var(--gray-collect);
            font-size: 10px;
            text-transform: uppercase
        }

        .c-collect__search button {
            position: absolute;
            top: 0;
            right: 0;
            width: var(--height-input);
            height: var(--height-input);
            background: rgba(0, 0, 0, 0);
            border: none;
            display: flex;
            justify-content: center;
            align-items: center
        }

        .c-collect__search svg {
            stroke: var(--gray-collect)
        }

        .c-collect .list-collections {
            max-height: 319px;
            overflow-y: auto
        }

        .c-collect__form {
            display: flex;
            flex-direction: column;
            width: 100%;
            min-height: var(--height-modal)
        }

        .c-collect__form .rows {
            flex: 1;
            margin-top: 50px
        }

        .c-collect__form .row {
            margin-bottom: 2rem
        }

        .c-collect__bts {
            display: flex;
            gap: 12px;
            width: 100%
        }

        .c-collect__bts [class*="--full"] {
            flex: 1
        }

        .c-collect__saved {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2rem;
            min-height: var(--height-modal);
            font-size: var(--text-size-large);
            text-align: center;
            line-height: 170%
        }

        .c-collect__saved-thumb {
            display: flex;
            justify-content: center;
            gap: 20px
        }

        .c-collect__saved-thumb .logo {
            width: 20%;
            height: auto
        }

        .c-collect__saved-thumb img {
            width: 30%;
            border-radius: var(--rounded-normal)
        }

        .list-collections__item {
            display: flex;
            justify-content: space-between;
            padding: 20px var(--pad-large-modal);
            background-image: linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);
            background-position: bottom;
            background-size: 8px 1px;
            background-repeat: repeat-x
        }

        .list-collections__left {
            display: flex;
            align-items: center;
            gap: 12px
        }

        .list-collections__number {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 32px;
            height: 32px;
            border-radius: var(--rounded-normal);
            background: #ededed
        }

        .head-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            margin-bottom: clamp(20px, 3vw, 50px)
        }

        .head-toolbar__left {
            display: inline-flex;
            align-items: center;
            gap: 16px
        }

        .head-toolbar__right {
            display: flex
        }

        .head-toolbar:has([data-collection-count]) .head-toolbar__left {
            gap: 0
        }

        .toolbar-bts {
            --toolbar-gutter: 40px;
            display: inline-flex;
            gap: var(--toolbar-gutter)
        }

        .toolbar-bts__item {
            position: relative;
            display: flex;
            cursor: pointer;
            transition: all .3s
        }

        .toolbar-bts__item:hover .ico-svg {
            opacity: .5
        }

        .toolbar-bts .ico-svg {
            display: block;
            fill: var(--color-primary)
        }

        .toolbar-bts__share {
            position: absolute;
            top: 50%;
            right: -17px;
            display: flex;
            align-items: center;
            gap: var(--toolbar-gutter);
            height: 45px;
            padding: 0 20px;
            background: var(--bg-secondary);
            border-radius: 45px;
            transform: translateY(-50%);
            opacity: 0;
            visibility: hidden;
            transition: all .3s
        }

        .toolbar-bts__share.is-show {
            opacity: 1;
            visibility: visible
        }

        .toolbar-bts__share .ico-svg {
            display: block;
            width: 16px;
            fill: var(--color-white);
            opacity: .5
        }

        .toolbar-bts__share .ico-svg:hover {
            opacity: 1
        }

        .toolbar-bts__close {
            cursor: pointer
        }

        .toolbar-bts__close .ico-svg {
            opacity: 1
        }

        .filter-box {
            --pad-box: clamp(20px, 6vw, 30px);
            margin-bottom: 4px;
            padding: var(--pad-box) 0;
            background: var(--bg-4rd);
            border-radius: var(--rounded-normal);
            font-weight: 400
        }

        .filter-box__title {
            margin-bottom: 8px;
            padding: 0 var(--pad-box);
            font-size: 18px;
            font-weight: var(--font-bold)
        }

        .filter-box__item {
            line-height: 3em
        }

        .filter-box__item.is-open .filter-box__item-head {
            background: var(--color-learn)
        }

        .filter-box__item.is-open .filter-box__arrow {
            transform: rotate(180deg)
        }

        .filter-box__item.is-open .filter-box__sublist {
            max-height: 300px;
            margin-bottom: 1em;
            opacity: 1;
            visibility: visible
        }

        .filter-box__item-head {
            display: flex;
            justify-content: space-between;
            padding: 0 var(--pad-box);
            cursor: pointer;
            transition: all .3s
        }

        .filter-box__item-head:hover {
            background: var(--bg-3rd)
        }

        .filter-box__item-link {
            display: block;
            padding: 0 var(--pad-box);
            line-height: 2.8em;
            transition: all .3s
        }

        .filter-box__item-link:hover {
            background: var(--bg-3rd)
        }

        .filter-box .is-active {
            font-weight: var(--font-bold)
        }

        .filter-box .is-active ul {
            font-weight: normal
        }

        .filter-box__sublist {
            visibility: hidden;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all .3s
        }

        .filter-box__sublist .filter-box__item-link {
            padding-left: clamp(40px, 6vw, 60px);
            line-height: 2.5em
        }

        .filter-box__arrow {
            opacity: .3
        }

        .tags-info {
            position: relative;
            display: grid;
            grid-template-columns: 50% 50%;
            margin: clamp(30px, 4vw, 60px) 0
        }

        .tags-info--s2 {
            display: flex;
            flex-direction: column;
            align-items: center
        }

        .tags-info--s2 .tags-info__right {
            width: 40%;
            margin: 0 auto;
            text-align: center
        }

        .tags-info--s2 .tags-info__right>p {
            margin: 0 auto
        }

        .tags-info--s2 .tags-info__title {
            margin-bottom: .4em
        }

        @media(max-width: 1024px) {
            .tags-info--s2 .tags-info__right {
                width: 100%
            }
        }

        .tags-info__right>p {
            width: 740px;
            max-width: 100%
        }

        .tags-info__title {
            font-size: 28px;
            font-size: clamp(28px, 18.1408450704px + 1.9718309859vw, 56px);
            line-height: 100%
        }

        .tags-info__subtitle {
            font-size: 1rem;
            font-weight: 300
        }

        .tags-info__read-more {
            display: flex;
            gap: 10px;
            margin-top: clamp(1em, 3vw, 2em)
        }

        .tags-info__read-more .link-underlined {
            margin: auto 0
        }

        .tags-info__more p:first-child {
            margin-top: 1em
        }

        .l-msg {
            width: 700px;
            max-width: 100%;
            margin: 0 auto;
            text-align: center
        }

        .l-msg__logo {
            display: inline-flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 2em
        }

        .l-msg__logo svg:nth-child(1) {
            width: 84px;
            height: auto;
            fill: var(--color-primary)
        }

        .l-msg__logo .sticker-svg {
            width: clamp(50px, 5vw, 100px)
        }

        .l-msg__text {
            width: 500px;
            max-width: 100%;
            margin: 0 auto;
            font-size: 18px;
            font-size: clamp(18px, 16.5915492958px + 0.2816901408vw, 22px)
        }

        .l-msg__text+.toast {
            margin-top: clamp(80px, 5vw, 160px)
        }

        .l-msg h2 {
            margin-bottom: .5em
        }

        .faqs__list {
            background-image: linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);
            background-position: top;
            background-size: 8px 1px;
            background-repeat: repeat-x;
            font-size: 18px;
            font-size: clamp(18px, 17.2957746479px + 0.1408450704vw, 20px)
        }

        .faqs__list>li {
            background-image: linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);
            background-position: bottom;
            background-size: 8px 1px;
            background-repeat: repeat-x
        }

        .faqs__list>li.active .faqs__answer {
            height: auto
        }

        .faqs:has(.faqs__arrow) .faqs__arrow {
            rotate: -90deg
        }

        .faqs:has(.faqs__arrow) .active .faqs__arrow {
            rotate: 0deg
        }

        .faqs__question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            padding: clamp(20px, 3vw, 30px) 0;
            font-weight: var(--font-bold);
            cursor: pointer
        }

        .faqs__answer {
            height: 0;
            overflow: hidden
        }

        .faqs__answer ul,
        .faqs__answer ol {
            margin-bottom: 1em
        }

        .faqs__answer ul li {
            list-style-type: disc
        }

        .faqs__answer ol li {
            list-style-type: decimal
        }

        .faqs__answer li {
            list-style-position: inside
        }

        .toast {
            display: inline-flex;
            padding: clamp(20px, 5vw, 30px);
            background: #f8f8f8;
            border-radius: var(--rounded-normal);
            text-align: left;
            line-height: 150%
        }

        .toast__icon {
            display: flex;
            align-items: flex-start;
            padding: 8px 16px 0 0
        }

        .box-featured {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: auto;
            padding: clamp(20px, 4vw, 32px);
            background: var(--bg-4rd);
            border-radius: var(--rounded-normal);
            line-height: 150%
        }

        .box-featured--green {
            background: #E2F4E9
        }

        .box-featured--warning {
            background: #f7f0cc
        }

        .box-featured--danger {
            background: #ffd1d1
        }

        .box-featured__m {
            margin: 0 8px
        }

        .box-featured__label {
            margin-bottom: .5em;
            text-transform: uppercase;
            font-size: 12px;
            color: #7a7a7a
        }

        .box-featured .ico-svg {
            vertical-align: middle
        }

        .box-featured p:last-child {
            margin-bottom: 0
        }

        .intro-texts {
            font-size: 30px;
            font-size: clamp(30px, 3.9436619718px + 5.2112676056vw, 104px);
            line-height: 140%;
            font-weight: var(--font-bold)
        }

        .intro-texts__subtitle {
            margin-top: clamp(20px, 5vw, 100px);
            text-align: center;
            font-size: 18px;
            font-size: clamp(18px, 14.4788732394px + 0.7042253521vw, 28px);
            font-weight: 300;
            line-height: 120%
        }

        .intro-texts__link {
            margin-right: .2em;
            padding-bottom: .1em;
            color: #a7a7a7;
            cursor: pointer;
            transition: all .3s;
            background-image: linear-gradient(to right, transparent 20%, var(--bg-primary) 20%), linear-gradient(to right, var(--color-primary), transparent);
            background-position: bottom;
            background-size: 16px 3px;
            background-repeat: repeat-x
        }

        .intro-texts__link .ico-svg {
            width: .3em;
            margin-left: .1em
        }

        .intro-texts__link:hover {
            color: currentColor
        }

        .intro-texts__button {
            border: 0;
            font-size: 30px;
            font-size: clamp(30px, 3.9436619718px + 5.2112676056vw, 104px);
            font-weight: var(--font-bold);
            color: var(--color-connect);
            border-bottom: 2px solid currentColor;
            transition: all .3s
        }

        .intro-texts__button:hover {
            color: var(--color-primary)
        }

        @media(max-width: 1024px) {
            .intro-texts__link {
                background-size: 8px 2px
            }
        }

        .has-tooltip {
            position: relative;
            display: inline-block
        }

        .has-tooltip:hover .tooltip {
            visibility: visible;
            opacity: 1;
            transform: translate(-50%, 0)
        }

        .tooltip {
            --tooltip-bg: var(--bg-secondary);
            --tooltip-color: #fff;
            visibility: hidden;
            opacity: 0;
            position: absolute;
            bottom: calc(100% + 10px);
            left: 50%;
            width: var(--tooltip-width, auto);
            background-color: var(--tooltip-bg);
            border-radius: var(--rounded-normal);
            color: var(--tooltip-color);
            line-height: 120%;
            transform: translate(-50%, -10px);
            transition: all .3s ease-in-out;
            z-index: 3
        }

        .tooltip--white {
            --tooltip-bg: #fff;
            --tooltip-color: #222
        }

        .tooltip:before {
            content: "";
            position: absolute;
            top: calc(100% - 0px);
            left: 50%;
            height: 10px;
            width: 100%;
            transform: translateX(-50%)
        }

        .tooltip:after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            height: 0;
            width: 0;
            margin-left: -6px;
            border: solid rgba(0, 0, 0, 0);
            border-top-color: var(--tooltip-bg);
            border-width: 8px 6px;
            pointer-events: none
        }

        .tooltip--user {
            width: 180px;
            padding: 35px 30px;
            min-height: 240px;
            text-align: center;
            line-height: 120%
        }

        .tooltip__content {
            padding: 20px;
            white-space: nowrap;
            font-size: 14px;
            line-height: 100%;
            text-align: center;
            z-index: 1
        }

        .tooltip__content--multiline {
            white-space: normal;
            text-align: left;
            line-height: 120%
        }

        .tooltip__content P:last-child {
            margin-bottom: 0
        }

        .tooltip.is-open {
            visibility: visible;
            opacity: 1;
            transform: translate(-50%, 0)
        }

        .tooltip__row:not(:last-child) {
            margin-bottom: 1em
        }

        .tooltip a {
            color: var(--tooltip-color)
        }

        .marquee-top {
            --marquee-bg: #222;
            --marquee-color: #fff;
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            overflow: hidden;
            white-space: nowrap;
            height: 50px;
            background-color: var(--marquee-bg);
            color: var(--marquee-color)
        }

        .marquee-top--awwwards {
            --marquee-bg: var(--color-award, transparent);
            filter: brightness(90%);
            color: #fff
        }

        .marquee-top--dmk {
            --marquee-bg: #f02d00
        }

        .marquee-top--gray {
            --marquee-bg: var(--sf-bg);
            --marquee-color: var(--color-primary)
        }

        .marquee-top__wrapper {
            display: flex;
            align-items: center;
            height: 100%;
            opacity: 0;
            transition: opacity .3s
        }

        .marquee-top__wrapper.is-visible {
            opacity: 1
        }

        .marquee-top__item {
            padding: 0 12px
        }

        .marquee-top__item:has(.marquee-top__separator) {
            padding: 0
        }

        .marquee-top__ico {
            vertical-align: middle;
            margin-inline: 12px;
            fill: currentColor
        }

        .marquee-top__separator {
            position: relative;
            top: -1px;
            display: inline-flex;
            align-items: center;
            margin-inline: 16px;
            font-size: 1.3em;
            vertical-align: middle;
            fill: currentColor
        }

        .marquee-top a:hover {
            opacity: 0
        }

        .color-menu {
            color: var(--menu-color-1)
        }

        .menu-float {
            --menu-color-3: #fff;
            position: fixed;
            bottom: -80px;
            left: 0;
            width: 100%;
            font-size: 13px;
            opacity: 0;
            pointer-events: none;
            transition: all .3s ease-in-out;
            z-index: 9;
            pointer-events: none
        }

        .menu-float.is-visible {
            opacity: 1;
            bottom: 30px
        }

        .menu-float__inner {
            position: relative;
            display: flex;
            justify-content: center
        }

        .menu-float__top {
            max-width: 707px;
            max-height: 0;
            overflow: hidden;
            transition: all .4s
        }

        .menu-float__bottom {
            position: relative;
            display: flex;
            justify-content: center
        }

        .menu-float__bottom:before {
            content: "";
            height: 60px;
            transition: all .3s
        }

        .menu-float__menu-row+.menu-float__menu-row {
            margin-top: 28px
        }

        .menu-float__wrapper {
            --bg-menu-wrapper: 34, 34, 34;
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            max-width: -moz-fit-content;
            max-width: fit-content;
            padding: 6px;
            border-radius: 12px;
            background: rgba(var(--bg-menu-wrapper), 0.8);
            pointer-events: auto;
            transition: all .4s
        }

        .menu-float__wrapper.is-open-main .menu-float__bottom {
            position: relative
        }

        .menu-float__wrapper.is-open-main .menu-float__layout--primary .menu-float__content {
            width: 100%
        }

        .menu-float__wrapper.is-open-main .menu-float__layout--primary {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%
        }

        .menu-float__wrapper.is-open-main .menu-float__layout--secondary,
        .menu-float__wrapper.is-open-main .menu-float__layout--tertiary {
            opacity: 0;
            visibility: hidden
        }

        .menu-float__wrapper.is-open {
            min-width: 720px !important;
            max-width: 1200px
        }

        .menu-float__wrapper.is-open .menu-float__top {
            max-height: 500px;
            max-width: 1200px
        }

        .menu-float__wrapper.is-open .menu-float__bottom:before {
            flex: 0;
            width: 100%
        }

        .menu-float__wrapper.is-open .menu-float__menu-content {
            max-width: 1200px
        }

        .menu-float__wrapper.is-open .menu-float__title:after {
            max-width: 200px;
            opacity: 1
        }

        .menu-float__wrapper.is-open .menu-float__subtitle {
            max-width: 200px;
            opacity: 1
        }

        .menu-float__wrapper.is-open .menu-float__hamburger {
            margin-left: auto
        }

        .menu-float__wrapper.is-open .menu-float__hamburger div:nth-child(1) {
            top: 0;
            transform: rotate(45deg)
        }

        .menu-float__wrapper.is-open .menu-float__hamburger div:nth-child(2) {
            opacity: 0
        }

        .menu-float__wrapper.is-open .menu-float__hamburger div:nth-child(3) {
            top: 0;
            transform: rotate(-45deg)
        }

        .menu-float__right {
            position: absolute;
            right: 0;
            bottom: 0
        }

        .menu-float__right .menu-float__wrapper {
            overflow: visible !important
        }

        .menu-float__logo {
            position: absolute;
            inset: 0;
            display: flex;
            justify-content: center;
            align-items: center
        }

        .menu-float__logo svg {
            fill: #dedede
        }

        .menu-float__breadcrumb {
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
            height: 48px
        }

        .menu-float__title {
            margin-left: -2px;
            color: var(--menu-color-1)
        }

        .menu-float__title+.menu-float__subtitle:before {
            content: ".";
            margin-right: 2px;
            color: var(--menu-color-1);
            font-weight: var(--font-bold)
        }

        .menu-float__subtitle {
            color: #a7a7a7;
            transition: all .3s
        }

        .menu-float__layout--primary .menu-float__content {
            display: flex;
            position: relative;
            aspect-ratio: 1/1;
            background-color: var(--bg-secondary);
            color: #fff
        }

        .menu-float__layout--secondary {
            flex: 1;
            margin-left: 6px
        }

        .menu-float__layout--secondary .menu-float__content {
            position: relative;
            width: 100%;
            background: #3e3e3e;
            color: #dedede
        }

        .menu-float__layout--secondary .menu-float__item {
            justify-content: center;
            width: 100%;
            border: 1px solid #4e4e4e;
            color: #dedede;
            white-space: nowrap
        }

        .menu-float__layout--secondary .menu-float__item.is-active {
            color: var(--menu-color-1, #dedede);
            border-color: var(--menu-color-1, #dedede)
        }

        .menu-float__layout--secondary .menu-float__item.is-active:hover {
            opacity: .8
        }

        .menu-float__layout--secondary .menu-float__item:hover:not(.is-active) {
            border-color: #a7a7a7
        }

        .menu-float__layout--tertiary {
            display: flex;
            margin-left: 6px
        }

        .menu-float__layout--tertiary .menu-float__content {
            padding: 0
        }

        .menu-float__layout--tertiary .button {
            width: 100%;
            font-size: 13px;
            transition: all .3s
        }

        .menu-float__layout--tertiary .button:not(.is-custom) {
            background: var(--menu-color-1, #dedede);
            color: var(--color-primary)
        }

        .menu-float__layout--tertiary .button:hover {
            opacity: .8
        }

        .menu-float__layout--tertiary .button.is-ch {
            background: var(--ch-bg, #dedede)
        }

        .menu-float__hamburger {
            position: relative;
            width: 20px;
            height: 30px;
            cursor: pointer;
            pointer-events: auto;
            transition: all .3s
        }

        .menu-float__hamburger div {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 10px;
            height: 1px;
            background-color: #fff;
            transform: translateZ(0);
            transition: all .3s
        }

        .menu-float__hamburger div:nth-child(1) {
            top: -8px
        }

        .menu-float__hamburger div:nth-child(3) {
            top: 8px
        }

        .menu-float__menu {
            display: none;
            width: 100%;
            display: none;
            margin-bottom: 6px;
            padding: 30px;
            background: #2c2c2c;
            color: #fff;
            border-radius: var(--rounded-normal);
            z-index: -1;
            transition: all .4s
        }

        .menu-float__menu--main {
            display: flex;
            font-size: 15px;
            padding-top: 4px;
            padding-left: 1px
        }

        .menu-float__menu.is-active {
            display: block
        }

        .menu-float__menu-content {
            max-width: 0;
            opacity: 0;
            transition: all .4s, max-width 0s;
            overflow: hidden
        }

        .menu-float__menu-content.is-show {
            opacity: 1
        }

        .menu-float__menu-col {
            position: relative;
            flex: 1;
            background-image: linear-gradient(to bottom, #7a7a7a 0 10%, rgba(255, 255, 255, 0) 10%);
            background-position: left top;
            background-repeat: repeat-y;
            background-size: 1px 8px
        }

        .menu-float__menu-section {
            position: relative;
            margin-top: 0px;
            margin-bottom: 25px;
            margin-left: 16px;
            font-size: 12px;
            color: #a7a7a7;
            line-height: 100%
        }

        .menu-float__menu-section:before {
            content: "";
            position: absolute;
            top: 3px;
            left: -17px;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--menu-color-2, #fff)
        }

        .menu-float__menu-nav {
            line-height: 120%
        }

        .menu-float__menu-nav li:not(:last-child) {
            margin-bottom: 16px
        }

        .menu-float__menu-nav li.is-active {
            font-weight: var(--font-bold)
        }

        .menu-float__menu-nav li.is-active a {
            color: var(--menu-color-1, --color-white);
            border-color: var(--menu-color-1, --color-white)
        }

        .menu-float__menu-nav a {
            display: block;
            padding: 8px 0 8px 16px;
            border-left: 1px solid rgba(0, 0, 0, 0);
            transition: all .3s
        }

        .menu-float__menu-nav a:hover {
            color: var(--menu-color-1, --color-white);
            border-color: var(--menu-color-1, --color-white)
        }

        .menu-float__menu a {
            color: #fff
        }

        .menu-float__title-section {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            margin: 0 12px 0 6px;
            line-height: 100%
        }

        .menu-float__content {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            height: 60px;
            padding: 0 6px;
            text-align: center;
            border-radius: var(--rounded-normal);
            overflow: hidden
        }

        .menu-float__progress {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            width: 100%;
            height: 100%
        }

        .menu-float__bar {
            background-color: rgba(78, 78, 78, .5);
            width: 0;
            height: 100%
        }

        .menu-float__nav {
            position: relative;
            display: flex;
            margin-left: -6px
        }

        .menu-float__nav li {
            display: flex
        }

        .menu-float__item {
            display: inline-flex;
            align-items: center;
            height: 48px;
            margin-left: 6px;
            padding: 0 12px;
            border-radius: var(--rounded-normal);
            color: var(--color-primary);
            font-weight: 400;
            cursor: pointer;
            overflow: hidden;
            transition: max-width .3s, padding .3s, margin .3s, color .3s, background .3s, border-radius .3s, border-color .3s, opacity .3s
        }

        .menu-float__filters {
            position: relative;
            display: flex;
            height: 60px;
            margin-left: -6px;
            margin-right: -6px
        }

        .menu-float__filters li {
            border-left: 1px solid rgba(var(--color-primary-rgb), 0.1)
        }

        .menu-float__filter {
            position: relative;
            display: flex;
            align-items: center;
            height: 100%;
            padding: 0 12px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none
        }

        .menu-float__filter.has-filter:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--menu-color-2)
        }

        .menu-float__filter.is-active {
            background: #222
        }

        .menu-float__filter.is-active svg {
            transform: scaleY(-1)
        }

        .menu-float__arrow {
            fill: #a7a7a7;
            margin-left: 12px
        }

        .menu-float__content:has(.menu-float__awwwards) {
            border-radius: 0
        }

        .menu-float__awwwards {
            display: flex;
            gap: 6px
        }

        .menu-float .button[class*="--awwward"],
        .menu-float .button[class*="--awwward"]:hover {
            --button-bg: var(--color-award);
            --button-color: var(--color-primary)
        }

        .menu-float .avatar-name sup {
            color: #fff
        }

        .menu-float .bt-nav {
            position: absolute;
            bottom: 0;
            pointer-events: auto
        }

        .menu-float .bt-nav--left {
            left: -28px
        }

        .menu-float .bt-nav--right {
            right: -28px
        }

        .menu-float .bt-nav svg {
            fill: #dedede
        }

        .menu-float .button--suggestions {
            --button-bg: var(--bg-secondary);
            --button-color: #fff
        }

        .menu-float .button--suggestions:hover {
            background-color: #4e4e4e
        }

        .menu-float .button--suggestions img {
            margin: 0 20px 0 8px;
            border-radius: 50%
        }

        .menu-float .button--suggestions .budget-circle {
            flex-shrink: 0;
            margin: 0 8px 0 20px;
            background: #4e4e4e
        }

        .style-1 {
            --menu-color-1: var(--color-inspire);
            --menu-color-2: var(--color-inspire-2);
            --menu-color-3: var(--color-inspire-3)
        }

        .style-2 {
            --menu-color-1: var(--color-learn);
            --menu-color-2: var(--color-learn-2);
            --menu-color-3: var(--color-learn-3)
        }

        .style-3 {
            --menu-color-1: var(--color-connect);
            --menu-color-2: var(--color-connect-2);
            --menu-color-3: var(--color-connect-3)
        }

        .style-4 {
            --menu-color-1: var(--color-read);
            --menu-color-2: var(--color-read-2);
            --menu-color-3: var(--color-read-3)
        }

        .style-5 {
            --menu-color-1: var(--color-awards);
            --menu-color-2: var(--color-awards-2);
            --menu-color-3: var(--color-awards-3)
        }

        .style-6 {
            --menu-color-1: var(--color-jobs);
            --menu-color-2: var(--color-jobs-2);
            --menu-color-3: var(--color-jobs-3)
        }

        .bt-nav {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-secondary);
            border-radius: var(--rounded-normal);
            cursor: pointer;
            transition: all .3s
        }

        .bt-nav.is-hidden {
            opacity: 0
        }

        .is-intersecting .c-box-float-more .box-float-more {
            opacity: 1;
            top: 0;
            transform: translateY(0)
        }

        .c-box-float-more {
            position: fixed;
            bottom: 30px;
            left: 0;
            width: 100%;
            z-index: 9;
            pointer-events: none
        }

        .c-box-float-more .inner {
            position: relative;
            display: flex;
            justify-content: flex-end
        }

        .c-box-float-more .box-float-more {
            pointer-events: all;
            opacity: 0;
            transform: translateY(50px)
        }

        .box-float-more {
            position: relative;
            display: inline-flex;
            height: 72px;
            padding: 6px;
            background: var(--bg-secondary);
            border-radius: var(--rounded-small);
            color: #fff;
            line-height: 120%;
            pointer-events: all;
            overflow: hidden;
            transition: all .3s ease-in-out
        }

        .box-float-more:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--menu-color-2)
        }

        .box-float-more__info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            min-width: 80px;
            padding: 0 12px
        }

        .box-float-more__info span {
            color: #7a7a7a
        }

        .box-float-more__photo {
            border-radius: 4px;
            -o-object-fit: cover;
            object-fit: cover
        }

        .menu-float-news {
            position: absolute;
            bottom: -100%;
            right: 0;
            width: 270px;
            padding: 12px;
            border-radius: var(--rounded-normal);
            background: var(--bg-secondary);
            color: #fff;
            line-height: 1.3em;
            border-bottom: 6px solid var(--menu-color-1);
            pointer-events: all;
            transform: translateY(calc(100% - 30px));
            opacity: 0;
            visibility: hidden;
            transition: all .4s;
            z-index: -1
        }

        .menu-float-news.is-visible {
            bottom: 0;
            transform: translateY(0);
            opacity: 1;
            visibility: visible
        }

        .menu-float-news__photo {
            position: relative;
            margin-bottom: .4em;
            -o-object-fit: cover;
            object-fit: cover
        }

        .menu-float-news__video {
            position: relative;
            margin-bottom: .4em
        }

        .menu-float-news__video iframe {
            pointer-events: none
        }

        .menu-float-news__header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px
        }

        .menu-float-news__prices {
            display: flex;
            gap: 8px
        }

        .menu-float-news__prices .text-strikethrough {
            color: #a7a7a7
        }

        .menu-float-news__label {
            color: #a7a7a7
        }

        .menu-float-news__close {
            text-align: right
        }

        .menu-float-news__close span {
            position: relative;
            top: -6px;
            right: -6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            line-height: 100%;
            padding: 4px;
            z-index: 2;
            cursor: pointer
        }

        .menu-float-news__close span:hover {
            opacity: .7
        }

        .filters {
            display: flex;
            flex-direction: column;
            border-radius: var(--rounded-normal);
            transition: all .3s;
            z-index: -1;
            pointer-events: all
        }

        .filters__tab {
            display: none
        }

        .filters__tab.is-active {
            display: block
        }

        .filters__search {
            display: flex;
            height: 40px;
            margin-bottom: 20px;
            background: #383838;
            border-radius: var(--rounded-small)
        }

        .filters__search input {
            flex: 1;
            padding: 0 16px;
            background: rgba(0, 0, 0, 0);
            font-size: var(--text-size-primary);
            color: var(--color-white)
        }

        .filters__search button {
            width: 40px;
            background: rgba(0, 0, 0, 0);
            border: none
        }

        .filters__search .ico-svg {
            fill: var(--color-white)
        }

        .filters__label {
            margin-bottom: 1.5em;
            text-transform: uppercase;
            color: #7a7a7a;
            font-weight: 400;
            font-size: var(--text-size-small);
            border-bottom: 1px solid #4e4e4e;
            clear: both
        }

        .filters__content {
            flex: 1;
            max-height: 310px;
            color: var(--color-white);
            overflow-y: auto;
            overflow-x: hidden
        }

        .filters__content::-webkit-scrollbar {
            width: 2px
        }

        .filters__content::-webkit-scrollbar-track {
            background: #383838
        }

        .filters__content::-webkit-scrollbar-thumb {
            background-color: var(--color-white)
        }

        .filters__list li {
            float: left;
            width: 33.333%
        }

        .filters__list--small li {
            width: 50%
        }

        .filters__list+.filters__title {
            padding-top: 2em
        }

        .filters li {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .filters__item {
            display: inline-flex;
            align-items: center;
            height: 26px;
            padding: 0 8px;
            color: var(--color-white);
            border-radius: 26px;
            cursor: pointer;
            transition: all .3s
        }

        .filters__item.is-active {
            color: var(--menu-color-3);
            background: #383838
        }

        .filters__item.is-active .ico-svg {
            margin-left: 6px
        }

        .filters__item:hover {
            background: #383838
        }

        .filters__colors {
            display: grid;
            grid-template-columns: repeat(9, 1fr)
        }

        .filters__colors .filters__item {
            position: relative;
            display: flex;
            width: 100%;
            height: 36px;
            padding: 0;
            border-radius: 0;
            outline: 4px solid rgba(0, 0, 0, 0);
            transition: z-index 0s outline .6s
        }

        .filters__colors .filters__item.is-active,
        .filters__colors .filters__item:hover {
            outline-color: var(--color-white);
            z-index: 1
        }

        .cart-count {
            position: relative;
            display: block;
            margin: auto;
            display: flex
        }

        .cart-count span {
            position: absolute;
            top: -12px;
            right: -12px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 15px;
            height: 15px;
            background: #fff;
            color: var(--color-primary);
            border-radius: 50%;
            font-size: 12px;
            font-weight: var(--font-bold);
            line-height: 100%
        }

        @media(max-width: 768px) {
            .menu-float {
                display: none
            }
        }

        #footer a {
            color: var(--color-primary)
        }

        #footer a:hover {
            opacity: .75
        }

        .footer__top {
            margin-bottom: clamp(40px, 4vw, 150px)
        }

        .footer__top .box-featured {
            background: var(--bg-3rd)
        }

        .footer__bottom {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            flex-wrap: wrap;
            margin-bottom: 120px;
            padding-top: clamp(24px, 3vw, 48px);
            font-size: 14px;
            font-weight: 400;
            background-image: linear-gradient(to right, rgb(var(--color-dotteds-rgb)) 0 10%, rgba(255, 255, 255, 0) 10%);
            background-position: top;
            background-size: 8px 1px;
            background-repeat: repeat-x
        }

        .footer__wrapper {
            display: flex
        }

        .footer__nav {
            display: flex;
            flex-wrap: wrap
        }

        .footer__item {
            display: flex;
            line-height: 140%;
            font-size: clamp(35px, 20vw, 4vw);
            font-weight: var(--font-bold)
        }

        .footer__item:not(:last-child):after {
            content: "-";
            margin: 0 .4em;
            font-weight: 300
        }

        .footer__figure {
            position: absolute;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity .3s;
            transform-origin: center;
            pointer-events: none
        }

        .footer__figure.show {
            opacity: 1
        }

        .footer__figure.show img {
            opacity: .9;
            transform: scale(1) rotate(20deg)
        }

        .footer__img {
            transform: scale(0);
            transition: all .3s
        }

        .footer__logo {
            display: inline-flex;
            align-items: center;
            gap: 16px;
            margin-bottom: clamp(30px, 4vw, 60px)
        }

        .footer__logo--s1 svg {
            width: 40px
        }

        .footer__logo--s2 svg:nth-child(1) {
            width: 44px;
            height: auto;
            fill: var(--color-primary)
        }

        .footer__logo--s2 .sticker-svg {
            width: clamp(40px, 4vw, 72px)
        }

        .footer__logo svg {
            fill: var(--color-primary)
        }

        .footer__nav {
            display: flex;
            flex-wrap: wrap;
            gap: 0 24px
        }

        .footer__grid {
            --grid-min: 18%;
            --menu-margin: clamp(10px, 4vw, 20px);
            flex: 1;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr));
            grid-gap: 24px
        }

        .footer__menu {
            font-weight: var(--font-bold);
            line-height: 100%
        }

        .footer__menu li:not(:last-child) {
            margin-bottom: var(--menu-margin)
        }

        @media(max-width: 1024px) {
            .footer__bottom {
                margin-bottom: 100px
            }

            .footer__wrapper {
                flex-direction: column;
                gap: 40px
            }

            .footer__grid {
                --grid-min: 40%;
                gap: var(--menu-margin)
            }
        }

        .l-404 {
            position: relative;
            height: 100vh
        }

        .l-404__header {
            display: flex;
            align-items: center;
            gap: 24px;
            padding: 70px
        }

        .l-404__logo {
            width: 72px;
            height: auto;
            fill: #fff;
            filter: drop-shadow(1px 1px 30px rgba(0, 0, 0, 0.5))
        }

        .l-404__img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            z-index: -1
        }

        @media(max-width: 1024px) {
            .l-404__header {
                justify-content: center;
                height: 100%;
                padding: 0
            }
        }

        .contact-us__desc {
            width: 510px;
            max-width: 100%
        }

        .no-results {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 400px;
            text-align: center
        }

        .no-results__msg {
            width: 240px;
            max-width: 100%
        }

        .no-results p:last-child {
            margin-bottom: 0
        }

        .ribbon-pro {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            width: 72px;
            height: 82px;
            padding: 8px;
            background: #fff;
            border-radius: var(--rounded-normal);
            line-height: 100%
        }

        .ribbon-pro__bottom {
            font-size: 10px
        }

        .ribbon-pro--black {
            background: #222;
            color: #fff
        }

        .ribbon-pro .ico-svg {
            top: -2px
        }

        .snackbar-msg {
            position: absolute;
            top: 0;
            right: 0;
            width: 460px;
            max-width: 100%;
            padding: clamp(20px, 6vw, 28px);
            background: var(--bg-secondary);
            font-size: var(--text-size-primary);
            color: #fff;
            line-height: 140%;
            border-radius: var(--rounded-normal);
            z-index: 2;
            transform: translateY(calc(-100% - 70px));
            opacity: 0;
            transition: all .4s ease-in-out
        }

        .snackbar-msg.is-show {
            opacity: 1;
            transform: translateY(72px)
        }

        .snackbar-msg__item {
            display: flex;
            gap: 30px
        }

        .snackbar-msg__close {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            cursor: pointer
        }

        .snackbar-msg__close:hover svg {
            transform: rotate(90deg)
        }

        .snackbar-msg__close svg {
            transition: all .3s
        }

        .snackbar-msg__label {
            margin-bottom: 12px;
            font-size: 10px;
            line-height: 100%
        }

        .snackbar-msg li:not(:last-child) {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, .2)
        }

        .snackbar-msg .button:hover {
            background: #4e4e4e
        }

        .fit-video {
            position: relative;
            padding-bottom: 56.25%;
            height: 0
        }

        .fit-video iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%
        }

        .lazy {
            opacity: 0;
            transition: all .6s
        }

        .lazy--hidden {
            opacity: 0
        }

        .lazy--loaded {
            opacity: 1
        }

        @media(max-width: 1280px) {
            :root {
                --pad-inner: 40px
            }

            .list-palette {
                --palette-width: 300px;
                --palette-height: 435px;
                --palette-margin: 220px;
                --palette-margin-neg: -220px
            }

            .list-palette--v {
                --palette-width: 200px;
                --palette-margin: 170px;
                --palette-margin-neg: -170px
            }
        }

        @media(max-width: 1023px) {
            :root {
                --pad-inner: 24px
            }

            .header-main__bts {
                /* display: none */
            }

            .box-table {
                overflow-x: auto
            }

            .box-table th {
                width: auto
            }

            .grid-sites-last {
                grid-template-columns: 1fr
            }

            .has-many-credits .avatar-name__name {
                display: none
            }

            .has-many-credits .avatar-name__link {
                gap: 0
            }
        }

        @media(max-width: 576px) {
            :root {
                --pad-inner: 16px;
                --rounded-large: 8px;
                --text-size-large: 20px
            }

            .header-main__ico {
                display: flex
            }

            .header-search__separator,
            .search-dropdown {
                display: none
            }

            [class*=grid-] {
                --minthumb: 310px
            }

            [class*=grid-] .is-double {
                grid-column: auto
            }

            .list-search-ac {
                min-width: auto
            }

            .toolbar-bts {
                --toolbar-gutter: 20px
            }

            .head-toolbar.is-sm-center {
                justify-content: center
            }

            .c-heading .heading-1 {
                display: block;
                word-wrap: break-word
            }

            .c-heading br {
                content: ""
            }

            .c-heading br:after {
                content: " "
            }

            .c-view-all__row {
                flex-direction: column
            }

            .modal {
                padding: 0
            }

            .modal[class*="--x-large"] .modal__content {
                width: 100%
            }

            .modal[class*="--bottom"] {
                display: block
            }

            .modal__box {
                min-height: 100vh;
                border-radius: 0
            }

            .modal .bt-nav {
                top: 0;
                right: 0;
                border-radius: 0
            }

            .grid-directory {
                grid-gap: var(--gutter) 0
            }

            .grid-directory--pro {
                height: auto !important
            }

            .grid-directory--pro li {
                width: 100%
            }

            .card-directory__section {
                width: 80px
            }

            .card-directory-sp__header {
                flex-direction: column;
                gap: 20px
            }

            .card-directory-sp__header .circle-avatar {
                position: relative;
                margin-right: auto;
                font-size: 1rem
            }

            .card-directory-sp__header .circle-avatar img {
                width: 30px
            }

            .card-directory-sp .swiper {
                width: 100%
            }

            .card-directory-sp .swiper-pagination {
                margin-top: 20px
            }

            .swiper-button-disabled {
                display: none
            }


            .card-banner--s2 .card-banner__photo img {
                opacity: .2
            }

            .card-banner--s2 .sticker-svg {
                top: auto;
                left: auto;
                bottom: 10%;
                right: 10%
            }

            .total-grid {
                text-align: center
            }

            .tags-info {
                grid-template-columns: 100%;
                grid-gap: 1em
            }

            .tags-info__read-more {
                flex-direction: column
            }

            .tags-info__read-more .link-underlined {
                margin-right: auto
            }

            .c-tags-row+.tags-info {
                margin-top: 40px
            }

            .header-col {
                flex-direction: column;
                gap: 20px
            }

            .dropdown-tags .list-tags {
                gap: 8px
            }

            .dropdown-tags .button {
                height: 28px;
                padding: 0 8px;
                font-size: var(--text-size-small)
            }

            .m-login__container {
                flex-direction: column
            }

            .cookies-popup {
                bottom: 0;
                right: 0;
                width: 100%;
                border-radius: 0
            }
        }

        .terms {
            font-size: clamp(16px, 5vw, 24px);
            line-height: 1.5
        }

        .terms h3 {
            margin-bottom: .5em;
            font-size: 2em;
            font-weight: bold;
            line-height: 1.2
        }

        .terms h4 {
            margin-block: 1em .5em;
            font-size: 1.5em;
            font-weight: bold;
            line-height: 1.2
        }

        .terms ul {
            margin-bottom: 1em
        }

        .terms li {
            list-style: disc;
            list-style-position: inside
        }

        .terms a {
            text-decoration: underline
        }

        .terms a:hover {
            text-decoration: none
        }

        .terms img {
            display: block;
            width: 100%
        }

        .choices [hidden] {
            display: none !important
        }

        .choices {
            position: relative;
            font-size: 16px
        }

        .choices:focus {
            outline: none
        }

        .choices.is-disabled .choices__inner,
        .choices.is-disabled .choices__input {
            cursor: not-allowed;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none
        }

        .choices.is-disabled .choices__item {
            cursor: not-allowed
        }

        .choices[data-type*=select-one] {
            cursor: pointer
        }

        .choices[data-type*=select-one] .choices__input {
            display: block;
            width: 100%;
            padding: 10px;
            border-bottom: 1px solid var(--border-input);
            margin: 0
        }

        .choices[data-type*=select-one]:after {
            content: "";
            position: absolute;
            top: 50%;
            right: 24px;
            width: 12px;
            height: 12px;
            margin-top: -4px;
            border: 2px solid #a7a7a7;
            border-top: 0;
            border-left: 0;
            transform: rotate(45deg) translateY(-50%);
            transform-origin: center;
            pointer-events: none
        }

        .choices[data-type*=select-one].is-open:after {
            right: 17px;
            margin-top: -4px;
            transform: rotate(-135deg) translateY(-50%)
        }

        .choices[data-type*=select-multiple] .choices__inner,
        .choices[data-type*=text] .choices__inner {
            padding-bottom: 5px;
            cursor: text
        }

        input[type=search].choices__input::-webkit-search-cancel-button {
            display: none
        }

        .choices__inner {
            display: inline-block;
            width: 100%;
            min-height: var(--height-input);
            border-bottom: 1px solid var(--border-input);
            background-color: var(--bg-input);
            font-size: var(--text-size-primary);
            vertical-align: top;
            overflow: hidden
        }

        .choices__list--single {
            display: inline-block;
            padding-left: var(--pad-input);
            width: 100%;
            line-height: var(--height-input)
        }

        .choices__list--single .choices__button {
            display: none
        }

        .choices__list--multiple {
            display: inline;
            padding-bottom: 5px
        }

        .choices__list--multiple .choices__item {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            margin: 5px 0 0 5px;
            padding: 11px;
            max-width: 100%;
            border-radius: 29px;
            background-color: #e9e9e9;
            color: #222;
            font-weight: normal;
            line-height: 13px;
            cursor: default;
            word-break: break-all
        }

        .choices__list--multiple .choices__item[data-deletable] {
            padding-right: 25px
        }

        .choices__list--multiple+.choices__input {
            min-width: auto
        }

        .choices__list--dropdown {
            display: none;
            position: absolute;
            width: 100%;
            background: #fff;
            border: 1px solid #e9e9e9;
            top: 100%;
            margin-top: -1px;
            overflow: hidden;
            word-break: break-all;
            z-index: 2
        }

        .choices__list--dropdown.is-active {
            display: block
        }

        .choices__list--dropdown .choices__list {
            position: relative;
            max-height: 390px;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            will-change: scroll-position
        }

        .choices__list--dropdown .choices__item {
            position: relative;
            padding: 10px 15px;
            line-height: normal;
            transition: all .3s
        }

        .choices__list--dropdown .choices__item--selectable.is-highlighted {
            background-color: #f3f3f3
        }

        .choices__item {
            cursor: default
        }

        .choices__item--selectable {
            cursor: pointer
        }

        .choices__item--disabled {
            cursor: not-allowed;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            opacity: .5
        }

        .choices__button {
            position: absolute;
            top: 13px;
            right: 8px;
            display: block;
            width: 12px;
            height: 12px;
            border: none;
            text-indent: -23em;
            overflow: hidden;
            cursor: pointer
        }

        .choices__button:before,
        .choices__button:after {
            content: "";
            display: block;
            position: absolute;
            top: 4px;
            left: 0px;
            width: 12px;
            height: 1px;
            background-color: var(--color-primary);
            transform: translateZ(0)
        }

        .choices__button:before {
            transform: translateZ(0) rotate(-45deg)
        }

        .choices__button:after {
            transform: translateZ(0) rotate(45deg)
        }

        .choices__button:hover {
            opacity: .7
        }

        .choices__button:focus {
            outline: none
        }

        .choices__input {
            min-width: 100%;
            margin-left: 15px;
            padding: 10px 0 0 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            vertical-align: middle
        }

        .choices__input::-moz-placeholder {
            color: #a7a7a7;
            font-weight: 300
        }

        .choices__input::placeholder {
            color: #a7a7a7;
            font-weight: 300
        }

        .choices__input:focus {
            outline: 0
        }

        .circle-color .choices__list--multiple .choices__item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            pointer-events: none
        }

        .circle-color .choices__list--multiple .choices__item:before {
            content: "";
            display: block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--color-tag, white)
        }

        .circle-color .choices__button {
            pointer-events: all
        }

        .grecaptcha-badge {
            visibility: hidden;
        }

        .button--small--rounded {
            color: white !important;
        }
        .l-list-sites {
            display: flex;
            flex-wrap: wrap;
            gap: clamp(30px, 3vw, 94px)
        }

        .l-list-sites__col {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-width: min(380px, 100%)
        }

        .l-list-sites__col.s-2 .list-sites {
            margin-top: 24px
        }

        .l-list-sites__col.s-2 .list-sites__item {
            padding: 0
        }

        .l-list-sites__col.s-2 .list-sites__card {
            flex-direction: column;
            gap: 0
        }

        .l-list-sites__col.s-2 .list-sites__left {
            flex-direction: column;
            gap: 0
        }

        .l-list-sites__col.s-2 .list-sites__figure {
            position: relative;
            width: 100%
        }

        .l-list-sites__col.s-2 .list-sites__media {
            width: 100%;
            border-radius: var(--rounded-normal)
        }

        .l-list-sites__col.s-2 .list-sites__info {
            width: 100%;
            min-height: 120px
        }

        .l-list-sites__heading {
            padding-bottom: 24px;
            font-size: var(--text-size-primary)
        }

        .l-list-sites__more {
            margin-top: clamp(20px, 3vw, 44px)
        }

        .l-list-sites .list-sites {
            flex: 1
        }

        .list-sites--bw {
            height: 100%;
            background: #fff;
            border-radius: var(--rounded-normal)
        }

        .list-sites--collapsed-nom {
            height: calc(162px + clamp(10px, 4vw, 48px));
            overflow: hidden
        }

        .list-sites__item {
            padding: clamp(10px, 4vw, 24px) clamp(0px, 1vw, 24px)
        }

        .list-sites__item:not(:last-child) {
            border-bottom: 1px solid var(--border-gray)
        }

        .list-sites__item:has(.list-sites__more) {
            padding: 0
        }

        .list-sites__card {
            display: flex;
            align-items: center;
            gap: clamp(10px, 4vw, 20px)
        }

        .list-sites__left {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: clamp(10px, 4vw, 20px);
            flex: 1;
            min-width: 0
        }

        .list-sites__right {
            display: flex;
            flex-direction: column;
            gap: 4px;
            justify-content: center
        }

        .list-sites__figure {
            flex-shrink: 0
        }

        .list-sites__media {
            border-radius: 50%;
            -o-object-fit: cover;
            object-fit: cover;
            width: clamp(40px, 4vw, 72px);
            height: auto;
            transition: all .3s
        }

        .list-sites__media:hover {
            filter: brightness(80%)
        }

        .list-sites__thumb {
            border-radius: var(--rounded-small)
        }

        .list-sites__label {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap
        }

        .list-sites__title {
            font-size: 18px;
            font-size: clamp(18px, 17.2957746479px + 0.1408450704vw, 20px);
            font-weight: var(--font-bold);
            line-height: 120%
        }

        .list-sites__title--truncate {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        .list-sites__info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
            min-width: 0
        }

        .list-sites__number {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 110%;
            min-width: 43px
        }

        .list-sites__number small {
            font-size: 10px
        }

        .list-sites__more {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 60px;
            font-size: 6px;
            letter-spacing: 2px;
            transition: all .3s
        }

        .list-sites__more:hover {
            letter-spacing: 4px
        }

        :root {
            --lord-icon-color-1: var(--color-primary);
            --lord-icon-color-2: #FA5D29;
            --lord-icon-primary: var(--lord-icon-color-1);
            --lord-icon-secondary: var(--lord-icon-color-2)
        }

        .lord-icon-color- {
            --lord-icon-primary: var(--lord-icon-color-1)
        }

        .lord-icon-color-2 {
            --lord-icon-primary: var(--lord-icon-color-2)
        }

        .promo-heading {
            --ph-bg: #EFE8DE;
            padding-block: clamp(40px, 5vw, 96px);
            background: var(--ph-bg);
            border-radius: var(--rounded-large);
            transition: all .3s
        }

        .promo-heading .c-heading {
            margin-bottom: 0
        }

        .promo-heading:has(.promo-offer__button:hover) {
            --ph-bg: #ededed
        }

        .promo-offer {
            margin-top: 20px
        }

        .promo-offer__button {
            --button-height: 72px;
            --button-bg: #6da933 !important;
            --lord-icon-primary: #6da933 !important;
            --lord-icon-secondary: #393346;
            --lord-icon-tertiary: #EBE6EE;
            position: relative;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            height: var(--button-height);
            padding-inline: 60px;
            background-color: var(--button-bg);
            font-size: var(--text-size-large);
            color: var(--button-color) !important;
            border-radius: var(--rounded-normal);
            text-align: center;
            cursor: pointer;
            border: none;
            white-space: nowrap;
            transition: color .3s, background .3s, border .3s
        }

        .promo-offer__button:hover {
            --button-bg: #75be32 !important;
            color: white !important;
            --lord-icon-primary: #6da933 !important;
            --lord-icon-secondary: var(--lord-icon-color-1)
        }

        .promo-offer__button lord-icon {
            position: absolute;
            left: calc(100% - 40px);
            width: 116px;
            height: 116px;
            color: #fff
        }

        .promo-offer__prices {
            font-family: "Inter", serif;
            font-size: 22px;
            font-size: clamp(22px, 17.7746478873px + 0.8450704225vw, 34px)
        }

        .promo-offer__prices :not(.text-strikethrough) {
            color: #fa5d29
        }

        .promo-offer__prices small {
            font-size: .4em;
            font-weight: var(--font-bold)
        }

        .promo-offer__start {
            padding-block: 20px
        }

        .promo-offer__timer {
            display: flex;
            justify-content: center;
            color: #fa5d29;
            font-weight: var(--font-medium)
        }

        @media(max-width: 768px) {
            .promo-offer__button {
                --button-height: 60px
            }

            .promo-offer__button lord-icon {
                display: none
            }
        }

        @keyframes aniMarquees {
            0% {
                transform: translateX(0)
            }

            100% {
                transform: translateX(calc(var(--slides-width) * -1 * var(--slides-total) / 2))
            }
        }

        .header-marquees {
            --slides-width: 400px;
            --slides-total: 20;
            --slides-speed: 40s;
            --slides-pad: 10px;
            --slides-direction: normal;
            position: relative;
            margin-bottom: clamp(40px, 5vw, 96px);
            overflow: hidden
        }

        .header-marquees__track {
            animation: aniMarquees var(--slides-speed) linear infinite var(--slides-direction);
            display: flex;
            width: calc(var(--slides-width)*var(--slides-total))
        }

        .header-marquees__item {
            width: var(--slides-width);
            padding: var(--slides-pad)
        }

        .header-marquees__figure {
            padding: var(--slides-pad);
            border-radius: var(--rounded-large);
            border: 1px solid var(--border-gray)
        }

        .header-marquees__img {
            width: 100%;
            border-radius: var(--rounded-normal);
            aspect-ratio: 290/150;
            -o-object-fit: cover;
            object-fit: cover
        }

        @media(max-width: 1280px) {
            .header-marquees {
                --slides-width: 300px
            }
        }

        @media(max-width: 1024px) {
            .header-marquees {
                --slides-width: 200px;
                --slides-pad: 6px
            }
        }

        @media(max-width: 576px) {
            .header-marquees {
                --slides-width: 140px
            }
        }

        .pointer-none {
            pointer-events: none
        }

        .relative {
            position: relative
        }

        .mb-0 {
            margin-bottom: 0
        }

        .mt-0 {
            margin-top: 0
        }

        .m-0 {
            margin: 0
        }

        .mt-lg {
            margin-top: clamp(1em, 2vw, 2em)
        }

        .mb-lg {
            margin-bottom: clamp(1em, 2vw, 2em)
        }

        .mb-xl {
            margin-bottom: clamp(1em, 4vw, 3em)
        }

        .p-0 {
            padding: 0
        }

        .pt-0 {
            padding-top: 0
        }

        .pb-0 {
            padding-bottom: 0
        }

        .no-scroll {
            overflow: hidden
        }

        .no-pointer {
            pointer-events: none
        }

        .nowrap {
            white-space: nowrap
        }

        .text-uppercase {
            text-transform: uppercase
        }

        .text-default {
            font-size: var(--text-size-primary);
            font-weight: 300
        }

        .text-center {
            text-align: center
        }

        .text-right {
            text-align: right
        }

        .text-bold {
            font-weight: var(--font-bold)
        }

        .text-regular {
            font-weight: 400
        }

        .text-strikethrough {
            text-decoration: line-through;
            font-size: 18px;
        }

        .text-red {
            color: var(--color-errors)
        }

        .text-balance {
            text-wrap: balance
        }

        .flex-space-between {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: .5em
        }

        .ar-sites {
            width: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            aspect-ratio: var(--img-resizing-site) !important
        }

        .ar-paronamic {
            width: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            aspect-ratio: 2/1 !important
        }

        .ar-desktop {
            width: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            aspect-ratio: var(--img-resizing-desktop) !important
        }

        .color-primary {
            color: var(--color-primary)
        }

        .color-red {
            color: #FA5D29
        }

        .hidden {
            display: none !important
        }

        .is-hidden {
            display: none !important
        }

        .is-grab {
            cursor: grab
        }

        .is-grabbing {
            cursor: grabbing
        }

        .cursor-pointer {
            cursor: pointer
        }

        .rounded-small {
            border-radius: var(--rounded-small)
        }

        .rounded-normal {
            border-radius: var(--rounded-normal)
        }

        .rounded-large {
            border-radius: var(--rounded-large)
        }

        .box-width {
            max-width: 100%;
            width: var(--widthBox)
        }

        .box-width--auto {
            margin: 0 auto
        }

        .text-ico {
            display: flex;
            align-items: center;
            gap: .5em
        }

        .alpha-04 {
            --modal-alpha: 0.4
        }

        .show-sm,
        .show-md {
            display: none
        }

        @media(max-width: 1024px) {
            .hidden-lg {
                display: none
            }
        }

        @media(max-width: 768px) {
            .hidden-md {
                display: none
            }

            .show-md {
                display: block
            }
        }

        @media(max-width: 576px) {
            .hidden-sm {
                display: none
            }

            .show-sm {
                display: block
            }
        }