@charset "UTF-8";

@import url("reset.css?v1");
@import url("fonts.css");
@import url("swiper-bundle.min.css");
@import url("odometer.min.css");


:root {

    --app-height: 100vh;
    --headroom-height: auto;


    --c0: #E7E3DB;
    --c1: #111111;
    --c2: #FFFFFF;
    --c3: #5D5D5D;
    --c4: rgba(17, 17, 17, .8);
    --c5: rgba(17, 17, 17, .5);
    --c6: rgba(17, 17, 17, .2);
    --c7: rgba(17, 17, 17, .03);
    --c8: #FF0000;

    --wr: 60rem;
    --awr: calc(-1 * var(--wr));

    --gap: 20rem;
    --sl: max(1px, 1rem);

    --br1: 5rem;

    --btn: max(44px, 50rem);

    --cols: repeat(12, minmax(0, 1fr));

    --f-xxs: max(14px, 14rem);
    --f-xs: max(14px, 16rem);
    --f-s: max(14px, 18rem);
    --f-d: max(14px, 20rem);
    --f-m: max(14px, 28rem);
    --f-m1: max(14px, 40rem);
    --f-b: max(14px, 64rem);
    --f-l: max(14px, 90rem);
    --f-n: max(14px, 200rem);

    --mw: 1920px;


}

@keyframes ticker {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}

@keyframes tickerBackwards {
    0% {
        transform: translate(-100%, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}


/* globals */

@media screen {

    html {
        font-size: 0.052vw;
        background-color: var(--c0);
    }

    .document {
        font-weight: 300;
        font-family: 'Poppins', sans-serif;
        font-size: var(--f-d);
        line-height: 1.2;
        color: var(--c1);
        background-color: var(--c0);
        letter-spacing: normal;
    }

    .popup-active {}

    .wrapper {
        width: 100%;
        margin: 0 auto;
        padding: 0 var(--wr);
        max-width: var(--mw);
    }

    .runner-start,
    .runner-end {
        animation: 120s linear infinite ticker;
        display: flex;
        will-change: transform;
        transition: transform .01s;
    }

    .preloader {
        background-color: #11182C;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        visibility: hidden;
        opacity: 0;
        transition: opacity .5s .85s ease, visibility 0s 1.35s;
        display: flex;
        color: var(--c2);
        will-change: transform;
    }

    .preloader-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10%;
        max-width: 130rem;
        margin: auto;
        transition: clip-path .5s 0s;
        clip-path: inset(0 100% 0 0);
        -webkit-clip-path: inset(0 100% 0 0);
        will-change: clip-path;
        transform: translateZ(0);
    }

    .preloader-icon svg {
        display: block;
        width: 100%;
        height: auto;
    }

    .loading {
        pointer-events: none;
    }

    .loading .preloader {
        transition: none;
        opacity: 1;
        visibility: visible;
    }

    .loading .preloader-icon {
        clip-path: inset(0 0% 0 0);
        -webkit-clip-path: inset(0 0% 0 0);
    }

    .topbar,
    .s1-6,
    .s1-1 {
        transition: transform 1s 1.0s ease-out;
    }

    .s1-1 {
        transform-origin: top;
    }

    /*.loading .topbar {*/
    /*    transform: translateY(-100%);*/
    /*}*/

    /*.loading .s1-1 {*/
    /*    transform: scale(2);*/
    /*}*/

    /*.loading .s1-6 {*/
    /*    transform: translateY(100%);*/
    /*}*/


    @keyframes s1-image-in {
        0% {
            opacity: 0;
            transform: scale(1.1);
        }

        30% {
            opacity: 1;
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes s1-blur-in {
        0% {
            opacity: 0;
            filter: blur(6px);
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 1;
            filter: blur(0);
        }
    }

    @keyframes s1-button-in {
        0% {
            opacity: 0;
            filter: blur(6px);
            transform: translateX(-14px) scale(0.98);
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 1;
            filter: blur(0);
            transform: translateX(0) scale(1);
        }
    }

    .s1-animation-ready .s1-1 img {
        opacity: 0;
        transform: scale(1.1);
        transform-origin: center;
        will-change: opacity, transform;
    }

    .s1-animation-ready .split-word {
        display: inline-block;
        opacity: 0;
        filter: blur(6px);
        will-change: opacity, filter;
    }

    .s1-animation-ready h1[data-split-words] {
        --word-group-delay: 0ms;
    }

    .s1-animation-ready .s1-7 [data-split-words] {
        --word-group-delay: 140ms;
    }

    .s1-animation-ready .s1-4-1[data-split-words] {
        --word-group-delay: 650ms;
    }

    .s1-animation-ready .s1-5 {
        opacity: 0;
        filter: blur(6px);
        transform: translateX(-14px) scale(0.98);
        transform-origin: left center;
        will-change: opacity, filter, transform;
    }

    .s1-animation-ready .s1-8 .partners-item {
        opacity: 0;
        filter: blur(6px);
        transform: translateX(-14px) scale(0.98);
        transform-origin: left center;
        will-change: opacity, filter, transform;
    }

    .s1-animation-start .s1-1 img {
        animation: s1-image-in 3.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }

    .s1-animation-start .split-word {
        animation-name: s1-blur-in;
        animation-duration: 2s;
        animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
        animation-delay: calc(var(--word-delay) + var(--word-group-delay, 0ms));
        animation-fill-mode: forwards;
    }

    .s1-animation-start .s1-7 .split-word {
        animation-duration: 1.7s;
    }

    .s1-animation-start .s1-5 {
        animation: s1-button-in 2s cubic-bezier(0.19, 1, 0.22, 1) 280ms forwards;
    }

    .s1-animation-start .s1-8 .partners-item {
        animation: s1-button-in 1.8s cubic-bezier(0.19, 1, 0.22, 1) var(--partner-delay, 420ms) forwards;
    }

    @media (prefers-reduced-motion: reduce) {
        .s1-animation-ready .s1-1 img,
        .s1-animation-ready .split-word,
        .s1-animation-ready .s1-5,
        .s1-animation-ready .s1-8 .partners-item {
            animation: none;
            opacity: 1;
            filter: none;
            transform: none;
        }
    }

    .icon {
        display: flex;
        max-height: 100%;
        align-items: center;
        justify-content: center;
        line-height: 0;
        max-width: 100%;
        width: auto;
        height: auto;
    }

    .cover,
    .contain {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-position: center;
        pointer-events: none;
    }

    .cover {
        object-fit: cover;
    }

    .contain {
        object-fit: contain;
    }

    .fill::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

    .button {
        display: inline-flex;
        justify-content: center;
        max-width: 100%;
        user-select: none;
        cursor: pointer;
        align-items: center;
        z-index: 1;
        background-clip: padding-box;
    }

    .button-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
        position: relative;
        z-index: 2;
        min-width: 0;
        padding: 0 .1em;
    }

    .button-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        margin: 0 8rem;
    }

    .button-icon:first-child {
        margin-left: 0;
    }

    .button-icon:last-child {
        margin-right: 0;
    }

    .button__inl .button-icon {
        width: .6em;
        height: 1em;
    }

    .button__inl .button-text {
        font-weight: 400;
        font-size: var(--f-s);
    }

    .button__default {
        border-radius: 999rem;
        padding: 0 50rem;
        min-height: var(--btn);
        background-color: var(--c1);
        color: var(--c2);
        border: var(--sl) solid var(--c1);
    }

    .button__default .button-text {
        font-size: var(--f-xs);
        line-height: 1.1;
    }

    .button__wide {
        width: 100%;
    }

    .title {
        font-weight: 300;
        width: 100%;
        letter-spacing: -.02em;
    }

    .title__small {
        font-size: var(--f-m);
        line-height: 1.2;
    }

    .title__default {
        font-size: var(--f-b);
        line-height: 1.1;
    }

    .title__large {
        font-size: var(--f-l);
        line-height: 1;
    }

    .container {
        display: flex;
        flex-direction: column;
        min-height: var(--app-height);
    }

    .header {
        position: relative;
        z-index: 99;
        background-color: var(--c0);
    }

    .header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        box-shadow: 0 0 30rem rgba(0, 0, 0, .1);
        opacity: 0;
        transition: opacity .25s;
    }

    .header:not(.static)::before {
        opacity: 1;
    }

    .header-trigger {
        position: absolute;
        width: 100%;
        height: 1px;
        opacity: 0;
        pointer-events: none;
        left: 0;
        top: 0;
    }

    .header.contrast~.header-trigger {
        top: 100vh;
    }

    .topbar {
        padding: 20rem 0;
    }

    .topbar-main {
        display: grid;
        grid-template-columns: 1fr auto auto;
        grid-gap: 80rem;
        align-items: center;
    }

    .topbar-logo {
        max-width: 160rem;
        background-position: left;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .topbar-nav {
        opacity: .8;
        font-size: var(--f-s);
    }

    .topbar-nav ul {
        display: grid;
        grid-auto-flow: column;
        grid-gap: 68rem;
    }

    .topbar-secondary {
        display: grid;
        grid-template-columns: 1fr 365rem;
        grid-gap: 20rem 80rem;
        align-items: center;
    }

    .topbar-secondary::before {
        content: "";
        grid-column: 1/-1;
        margin-top: 20rem;
        height: var(--sl);
        background-color: currentColor;
        opacity: .2;
    }

    .topbar-subtitle {
        opacity: .8;
        font-size: var(--f-s);
    }

    .topbar-search {}

    .header.contrast:not(.active) {
        color: var(--c2);
        background-color: transparent;
        filter: none;
    }

    .header.contrast:not(.active) .button__default {
        background-color: var(--c2);
        color: var(--c1);
        border: var(--sl) solid var(--c2);
    }

    .header.contrast:not(.active) .topbar-logo {
        background-image: url(../img/logo-white.svg);
    }

    .header.contrast:not(.active) .topbar-logo img {
        opacity: 0;
    }


    .main {
        margin-top: 0;
        flex: auto;
        display: flex;
        flex-direction: column;
    }

    .section {
        position: relative;
        z-index: 1;
        overflow-x: clip;
        margin-bottom: 180rem;
    }

    .section:first-child {
        margin-top: 100rem;
    }

    .section:last-child {
        margin-bottom: 120rem;
    }

    .section:only-child {
        flex: auto;
    }

    .section__contrast {
        background-color: var(--c1);
        color: var(--c2);
        padding: 180rem 0;
    }

    .section__contrast:last-child {
        margin-bottom: 0;
    }

    .section__contrast .button__default {
        color: var(--c1);
        background-color: var(--c2);
        border: var(--sl) solid var(--c2);
    }

    .section__contrast *::-moz-selection {
        background-color: var(--c0);
        color: var(--c1);
        -webkit-text-fill-color: var(--c1);
    }

    .section__contrast *::selection {
        background-color: var(--c0);
        color: var(--c1);
        -webkit-text-fill-color: var(--c1);
    }

    .breadcrumbs-container {
        margin: 25rem 0 60rem;
    }

    .breadcrumbs-container+.section {
        margin-top: 0;
    }

    .breadcrumbs {
        width: 100%;
        overflow: hidden;
    }

    .breadcrumbs ul {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -.3em;
    }

    .breadcrumbs li {
        margin: 0 .3em;
        user-select: none;
        pointer-events: none;
    }

    .breadcrumbs li:not(:last-child) {
        opacity: .6;
    }

    .breadcrumbs li:not(:first-child)::before {
        content: "/";
        padding-right: .3em;
    }

    .breadcrumbs li:not(:last-child) a {
        pointer-events: all;
    }

    .back .button__inl {
        color: var(--c3);
    }

    .back .button__inl .button-text {
        text-transform: uppercase;
        font-size: var(--f-xs);
    }

    .section-header {
        display: flex;
        flex-direction: column;
    }

    .section-header:not(:last-child) {
        margin-bottom: 50rem;
    }

    .section-header-subtitle {
        margin-top: 50rem;
        font-size: var(--f-m);
    }

    .footer {
        overflow: hidden;
        color: var(--c3);
        font-size: var(--f-s);
        background-color: var(--c0);
        position: relative;
        z-index: 2;
    }

    .footer-grid {
        border-top: var(--sl) solid var(--c5);
        padding: 80rem 0 35rem;
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
        grid-template-areas:
            "f1 f1 f1 f1 . . . . . f2 f2 ." "f3 f3 f3 . . . . . . f4 f4 f4" "f5 f5 f5 f5 f5 f5 f5 f5 f5 f5 f5 f5" "f6 f6 f6 f6 f6 f6 f7 f7 f7 f7 f7 f7";
    }

    .f1 {
        grid-area: f1;
    }

    .f1-1-1 {
        color: var(--c1);
        font-size: var(--f-m);
    }

    .f1-1-2 {
        margin-top: 30rem;
    }

    .f1-2 {
        margin-top: 40rem;
        color: var(--c1);
    }

    .f2 {
        grid-area: f2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--gap);
        align-items: flex-start;
    }

    .f2-1-1 {
        margin-bottom: 15rem;
        font-weight: 400;
        color: var(--c1);
    }

    .f2-1-2 ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 15rem;
    }

    .f3 {
        grid-area: f3;
        margin-top: 150rem;
    }

    .f4 {
        grid-area: f4;
        margin-top: 150rem;
    }

    .f5 {
        grid-area: f5;
        margin: 55rem 0 75rem;
        letter-spacing: -.04em;
        width: 100%;
        overflow: hidden;
    }

    .f5 a {
        color: var(--c1);
    }

    .f6 {
        grid-area: f6;
        color: var(--c5);
        font-size: var(--f-xxs);
    }

    .f7 {
        grid-area: f7;
        margin-left: auto;
        text-align: right;
        color: var(--c5);
        font-size: var(--f-xxs);
    }

    .f7 a {
        color: var(--c1);
    }

    .footer-form {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 20rem;
        max-width: 580rem;
        width: 100%;
        align-items: center;
    }

    .footer-form-input {
        padding: .25em 0;
        width: 100%;
        text-overflow: ellipsis;
        border-bottom: var(--sl) solid var(--c6);
        transition: border-color .15s;
    }

    .footer-form-input:focus {
        border-color: var(--c1);
    }

    .textbox h2 {
        color: var(--c1);
        font-weight: 400;
        margin: 2em 0 1.5em;
    }

    .textbox h2:first-child {
        margin-top: 0;
    }

    .textbox ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 1em;
        margin: 1.5em 0;
        padding-left: 2em;
    }

    .textbox ul:first-child {
        margin-top: 0;
    }

    .textbox ul:last-child {
        margin-bottom: 0;
    }

    .textbox li {
        position: relative;
    }

    .textbox li::before {
        content: "\2022";
        width: 2em;
        text-align: center;
        right: 100%;
        top: 0;
        position: absolute;
    }

    .textbox ul ul {
        margin: 0;
        grid-gap: 0;
        padding-left: 2em;
    }

    .textbox a {
        text-decoration: underline;
    }

    .textbox p {
        margin: 1.5em 0;
    }

    .search {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: flex-end;
        position: relative;
        font-size: var(--f-s);
        padding: .5em 0;
    }

    .search::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        background-color: currentColor;
        height: var(--sl);
        opacity: .2;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .25s .25s;
        will-change: transform;
    }

    .search-input {
        flex: auto;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        transition: opacity .25s .25s;
        opacity: 0;
    }

    .search-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--f-xs);
        height: var(--f-xs);
        flex: none;
        margin-left: 15rem;
    }

    .search-label {
        flex: none;
        margin-left: auto;
        transition: flex-grow .25s .25s, opacity .25s 0s;
        color: currentColor;
        opacity: .8;
        user-select: none;
        pointer-events: none;
    }

    .search:focus-within {}

    .search:focus-within::after {
        transform: scaleX(1);
        transition-delay: 0s;
    }

    .search:focus-within .search-label {
        flex: 1;
        opacity: 0;
        transition-delay: 0s, .25s;
    }

    .search:focus-within .search-input {
        opacity: 1;
    }

    .search:focus-within .search-input.error {
        color: var(--c8);
    }


    .checkbox {
        overflow: hidden;
        position: relative;
    }

    .checkbox-control {
        width: 0;
        height: 0;
        position: absolute;
        right: 100%;
        opacity: 0;
    }

    .checkbox-label {
        display: flex;
        align-items: flex-start;
    }

    .checkbox-label-icon {
        width: max(20px, 24rem);
        height: max(20px, 24rem);
        border-radius: 3rem;
        display: flex;
        flex: none;
        margin-right: 10rem;
        padding: 3rem;
        border: max(2px, 3rem) solid;
        cursor: pointer;
    }

    .checkbox-label-icon::after {
        content: "";
        background-color: currentColor;
        width: 100%;
        height: 100%;
        will-change: transform;
        transition: transform .25s;
    }

    .checkbox-label-text {
        user-select: none;
        font-size: var(--f-xxs);
        margin: auto 0;
        font-weight: 400;
    }

    .checkbox-label-text a {
        text-decoration: underline;
    }

    .checkbox-control:not(:checked)~.checkbox-label-icon::after {
        transform: scale(0);
    }

    .formbox {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 50rem;
    }

    .formbox-row {
        display: flex;
        align-items: flex-end;
    }

    .formbox-cell {
        flex: 1;
    }

    .formbox-cell+.formbox-cell {
        margin-left: var(--gap);
    }

    .formbox-note {
        margin-top: 25rem;
        color: var(--c5);
        font-size: var(--f-xs);
    }

    .formbox-footer {
        margin-top: 35rem;
    }

    .textfield {
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .textfield-label {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        line-height: 1;
        font-size: var(--f-xs);
        padding-bottom: .3em;
        order: -1;
        font-weight: 400;
    }

    .textfield-input {
        resize: none;
        width: 100%;
        padding: 20rem 15rem;
        border: var(--sl) solid var(--c6);
        border-radius: var(--br1);
        background-color: var(--c7);
        font-size: var(--f-xs);
        transition: border-color .15s;
    }

    .textfield-input:not(textarea) {
        padding: 15rem;
    }

    .textfield-input[required]~.textfield-label::after {
        content: "*";
    }

    .textfield-input:focus {
        border-color: var(--c1);
    }

    .formbox .textfield-label {
        position: absolute;
        bottom: 100%;
        white-space: nowrap;
    }

    .cf7-hidden {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        opacity: 0;
    }

    .carousel-buttons {
        display: grid;
        grid-auto-flow: column;
        grid-gap: 20rem;
    }

    .carousel-button {
        cursor: pointer;
        color: currentColor;
        display: flex;
        align-items: center;
        width: max(22px, 26rem);
        height: max(22px, 26rem);
        justify-content: center;
        user-select: none;
    }

    .carousel-button.swiper-button-disabled {
        opacity: .1;
        pointer-events: none;
    }

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

    .author-image {
        overflow: hidden;
        position: relative;
        flex: none;
        width: max(50px, 60rem);
        height: max(50px, 60rem);
        border-radius: 50%;
        margin-right: 20rem;
    }

    .author-image img {
        object-position: top;
    }

    .author-title {
        font-size: var(--f-s);
        font-weight: 400;
    }

    .author-title::before {
        content: "\2014\a0";
    }

    .badge {
        background-color: var(--c7);
        border: var(--sl) solid var(--c6);
        border-radius: var(--br1);
        padding: 30rem 45rem;
        display: flex;
        align-items: center;
    }

    .badge-icon {
        flex: none;
        width: max(40px, 50rem);
        height: max(40px, 50rem);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 50rem;
    }

    .badge-text {
        color: var(--c3);
    }

    .partners .swiper {
        overflow: visible;
    }

    .partners .swiper-wrapper {
        transition-timing-function: linear !important;
    }

    .partners .swiper-slide {
        width: auto;
        padding: 0 90rem;
    }

    .partners-item {
        height: 50rem;
    }

    .partners-item img {
        height: 100%;
        width: auto;
    }

    .textfit {
        display: block;
        width: 100%;
    }

    .cookies-alert {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        align-items: flex-end;
        height: 0;
        z-index: 10;
        transition: all .25s;
        will-change: transform;
        height: 0;
        justify-content: flex-end;
    }

    .cookies-alert-inner {
        flex: auto;
        background-color: var(--c0);
        color: var(--c1);
        margin: 40rem;
        padding: 40rem;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 25rem;
        align-items: center;
        border-radius: 10rem;
        border: var(--sl) solid var(--c4);
        max-width: 480rem;
    }

    .cookies-alert:not(.active) {
        opacity: 0;
        transform: translateY(100rem);
        pointer-events: none;
    }

    .filters {
        height: calc(var(--f-d) + 25rem * 2);
        user-select: none;
        position: relative;
        z-index: 5;
        margin-bottom: -25rem;
    }

    .filters-nav {
        flex: none;
        height: calc(var(--f-d) + 25rem * 2);
        display: grid;
        grid-auto-flow: column;
        grid-gap: 50rem;
        align-items: center;
        line-height: 1;
    }

    .filters-nav-item {
        display: grid;
        grid-auto-flow: column;
        grid-gap: 8rem;
        align-items: center;
        position: relative;
    }

    .filters-label {
        color: var(--c4);
        opacity: .8;
    }

    .filters-value {
        cursor: pointer;
        font-weight: 400;
    }

    .filters-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: .75em;
        height: .75em;
        will-change: transform;
    }

    .filters-reset {
        text-decoration: underline;
        color: var(--c4);
        opacity: .8;
    }

    .filters-options {
        flex: none;
        padding: 20rem 0 0;
        border-top: var(--sl) solid var(--c6);
        overflow: hidden;
        width: 100%;
        min-width: 0;
    }

    .filters-group {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: var(--gap);
    }

    .filters-option .checkbox-label-text {
        font-size: var(--f-d);
        color: var(--c5);
        font-weight: 400;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .filters-option .checkbox-label-icon {
        border-color: var(--c6);
    }

    .filters-wrapper {
        background-color: var(--c0);
        box-shadow: 0 0 0 var(--sl) var(--c6);
        flex: none;
        padding: 0 25rem 50rem;
        margin: 0 -25rem -50rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .filters.active .filters-value:not(.active),
    .filters.active .filters-value:not(.active)~.filters-icon {
        color: var(--c4);
        opacity: .8;
    }

    .filters-value.active~.filters-icon {
        transform: scaleY(-1);
    }

    .filters:not(.active) .filters-options {
        display: none;
    }

    .filters:not(.active) .filters-wrapper {
        padding: 0;
        margin: 0;
        box-shadow: none;
    }

    .filters-group:not(.active) {
        display: none;
    }


    .odometer.odometer-auto-theme {
        padding: 0;
    }

    .odometer.odometer-auto-theme .odometer-digit {
        padding: 0;
        text-align: center;
    }

    .odometer * {
        text-align: center !important;
    }

    .odometer .odometer-digit .odometer-value {
        width: 100%;
    }

}

/* cards */

@media screen {

    .card {
        position: relative;
        display: flex;
        min-height: 100%;
        flex-direction: column;
        user-select: none;
    }

    .card-media {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .card-title {
        font-size: var(--f-m);
        line-height: 1.1;
        letter-spacing: -.02em;
    }

    .card-1 .card-header {
        position: relative;
        overflow: hidden;
        display: flex;
    }

    .card-1 .card-header::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 100%;
    }

    .card-1 .card-content {
        margin-top: 10rem;
        margin-bottom: auto;
    }

    .card-1 .card-pretitle {
        color: var(--c3);
        padding-bottom: 10rem;
        margin-bottom: 10rem;
        border-bottom: var(--sl) solid var(--c6);
    }

    .card-1 .card-title {
        max-width: 320rem;
    }

    .card-1 .card-footer {
        margin-top: 30rem;
    }

    .card-2 .card-header {
        position: relative;
        overflow: hidden;
        display: flex;
        margin-top: auto;
    }

    .card-2 .card-header::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 70%;
    }

    .card-2 .card-content {
        margin-top: 20rem;
    }

    .card-2 .card-title {
        display: flex;
        align-items: flex-start;
        padding: 0 20rem 0;
        justify-content: space-between;
    }

    .card-2 .card-title-name {
        display: flex;
        align-items: flex-start;
    }

    .card-2 .card-title-name::before {
        content: "\2022";
        flex: none;
        width: 1.5em;
    }

    .card-2 .card-title-icon {
        flex: none;
        width: .6em;
        height: 1.1em;
        align-items: center;
        justify-content: center;
        margin-left: 20rem;
        display: flex;
    }

    .card-2 .card-subtitle {
        border-top: var(--sl) solid var(--c1);
        padding: 20rem 20rem 0;
        color: var(--c3);
        margin-top: 20rem;
    }

    .card-3 .card-header {
        position: relative;
        overflow: hidden;
        display: flex;
    }

    .card-3 .card-header::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 115%;
    }

    .card-3 .card-header img {
        object-position: top;
    }

    .card-3 .card-content {
        margin-top: 20rem;
        margin-bottom: auto;
    }

    .card-3 .card-subtitle {
        margin-top: 15rem;
        font-size: var(--f-xs);
        color: var(--c3);
        text-transform: uppercase;
    }

    .card-3 .card-footer {
        margin-top: 20rem;
    }

    .card-4 .card-header {
        position: relative;
        overflow: hidden;
        display: flex;
    }

    .card-4 .card-header::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 60%;
    }

    .card-4 .card-content {
        margin-bottom: auto;
    }

    .card-4 .card-pretitle {
        margin: 10rem 0;
        font-size: var(--f-xs);
        color: var(--c3);
        text-transform: uppercase;
    }

    .card-4 .card-title:first-child {
        margin-top: 20rem;
    }

    .card-4 .card-subtitle {
        margin-top: 20rem;
        color: var(--c3);
        opacity: .8;
    }

    .card-5 {
        box-shadow: inset 0 0 0 var(--sl) var(--c6);
        background-color: var(--c7);
    }

    .card-5 .card-header {
        position: relative;
        overflow: hidden;
        display: flex;
    }

    .card-5 .card-header::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 90%;
    }

    .card-5 .card-content {
        padding: 20rem 20rem 30rem;
    }

}

/* sections */

@media screen {

    .s0-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
    }

    .s0-1:not(:first-child) {
        margin-top: 80rem;
    }

    .s0-2 {
        grid-column: 3/11;
    }

    .s0-2 .textbox {
        color: var(--c3);
    }

    .s1 {
        padding: 0;
        overflow: hidden;
    }

    .s1-1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: .6;
    }

    .s1-1::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .s1-2 {
        position: relative;
        z-index: 1;
        min-height: var(--app-height);
        display: flex;
        flex-direction: column;
    }

    .s1-3 {
        grid-area: a3;
        padding-right: 150rem;
    }

    .s1-4 {
        grid-area: a4;
        text-align: right;
    }

    .s1-4::after {
        content: "";
        display: block;
        height: var(--sl);
        margin-top: 10rem;
        opacity: .2;
        background-color: currentColor;
        width: 100%;
    }

    .s1-5 {
        grid-area: a5;
        margin-top: 50rem;
    }

    .s1-6 {
        padding: 180rem 0 60rem;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 0 var(--gap);
        grid-template-rows: auto 1fr;
        grid-template-areas: "a3 a3 a3 a4" "a7 a7 . ." "a5 a5 . .";
        align-items: flex-end;
    }

    .s1-6:last-child {
        padding-bottom: 150rem;
    }

    .s1-7 {
        grid-area: a7;
        margin-top: 20rem;
        max-width: 600rem;
    }

    .s1-8 {
        padding-bottom: 60rem;
    }

    .s1:first-child {
        margin-top: calc(-1 * var(--headroom-height));
    }

    .s1:first-child .s1-1::after {
        background-image: linear-gradient(rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 1)), linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
    }

    .s1:first-child .s1-2 {
        padding-top: var(--headroom-height);
        justify-content: flex-end;
    }

    .s2 .section-header-title {
        max-width: 1550rem;
    }

    .s2-1 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: var(--gap);
        padding-top: 20rem;
        border-top: var(--sl) solid var(--c6);
        align-items: flex-start;
    }

    .s2-1:not(:first-child) {
        margin-top: 60rem;
    }

    .s2-2 {
        grid-column: 1/4;
        color: var(--c3);
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        grid-gap: var(--gap);
    }

    .s2-2-1:nth-child(1) {
        grid-column: 1/5;
    }

    .s2-2-1:nth-child(2) {
        grid-column: 6/10;
    }

    .s2-3 {
        margin-left: auto;
    }

    .s2-4 {
        grid-column: 1/-1;
        display: flex;
        position: relative;
        overflow: hidden;
    }

    .s2-4::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 35%;
    }

    .s3 .section-header-subtitle {
        color: var(--c3);
        font-size: var(--f-d);
        margin-top: 25rem;
    }

    .s3-1 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: var(--gap);
        align-items: flex-start;
    }

    .s3-1:not(:first-child) {
        margin-top: 60rem;
    }

    .s3-2-1 {
        font-size: var(--f-n);
        line-height: 1;
        letter-spacing: -.04em;
        display: flex;
        align-items: center;
    }

    .s3-2-2 {
        border-top: var(--sl) solid var(--c6);
        color: var(--c3);
        margin-top: 0;
        padding-top: 15rem;
    }

    .s4-1 {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 80rem;
        align-items: flex-end;
        margin-bottom: 30rem;
    }

    .s4-2 {
        display: flex;
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
    }

    .s4-2-1 {
        grid-column: 1/12;
        margin-left: calc(-1 * var(--gap));
    }

    .s4-2-1 .swiper {
        overflow: visible;
    }

    .s4-2-1 .swiper-slide {
        padding-left: var(--gap);
    }

    .s4-3 {
        margin-top: 80rem;
        display: flex;
        justify-content: center;
    }

    .s5 .section-header {}

    .s6 {
        padding: 0;
    }

    .s6-1 {
        position: relative;
        z-index: 2;
        display: flex;
    }

    .s6-1::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 40%;
    }

    .s6-2 {
        font-size: var(--f-m1);
        letter-spacing: -.02em;
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
        margin-left: -90rem;
    }

    .s6-2 .swiper {
        overflow: visible;
        width: 100%;
    }

    .s6-2 .swiper-slide {
        padding-left: 90rem;
        width: auto;
        white-space: nowrap;
    }

    .s6-2 .swiper-slide:not(.swiper-slide-active) {
        opacity: .3;
    }

    .s6-3 {
        position: relative;
        z-index: 1;
        display: grid;
        grid-auto-flow: column;
        grid-gap: 10rem;
        align-items: center;
    }

    .s6-4 {
        grid-column: 1/-1;
        margin-top: 20rem;
    }

    .s6-4::before {
        content: "";
        height: var(--sl);
        opacity: .4;
        background-color: currentColor;
        margin-bottom: 20rem;
        width: 100%;
        display: block;
    }

    .s6-4 .swiper {
        overflow: visible;
        width: 100%;
    }

    .s6-4 .swiper-slide {
        transition: opacity .3s;
    }

    .s6-4 .swiper-slide:not(.swiper-slide-active) {
        opacity: 0;
    }

    .s6-5 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: .8;
    }

    .s6-5::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        opacity: .8;
    }

    .s6-5 .swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .s6-7 {
        width: 100%;
        padding: 60rem 0;
        display: grid;
        grid-template-rows: 1fr auto auto;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-gap: 0 var(--gap);
        align-items: center;
    }

    .s6-6 {
        grid-column: 1/-1;
        margin-bottom: auto;
        padding-bottom: 150rem;
    }

    .s6-8 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
        align-items: flex-start;
    }

    .s6-8-1 {
        grid-column-end: span 5;
        padding-right: calc((100% + var(--gap)) / 5);
    }

    .s7-1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 40rem var(--gap);
        grid-template-rows: auto 1fr;
    }

    .s7-2 {
        padding-top: 50rem;
        margin-left: 45rem;
    }

    .s7-3 {
        display: flex;
        position: relative;
        overflow: hidden;
        grid-row: 1/3;
        order: -1;
    }

    .s7-3::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 65%;
    }

    .s7-4 {
        padding-bottom: 50rem;
        max-width: 650rem;
        margin-left: 45rem;
    }

    .s7-4-1 {
        color: var(--c3);
    }

    .s7-4-2:not(:first-child) {
        margin-top: 50rem;
    }

    .s8 .section-header-title {
        text-align: center;
    }

    .s8-1 {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-gap: var(--gap);
    }

    .s8-1:not(:first-child) {
        margin-top: 60rem;
    }

    .s8-2 {
        grid-column: 2/6;
        position: relative;
    }

    .s8-3 {
        transition: opacity .5s;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .s8-3-1 {
        text-align: center;
        font-size: var(--f-m);
        line-height: 1.1;
        max-width: 980rem;
    }

    .s8-3-2 {
        margin-top: 50rem;
    }

    .s8-4 {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .s8-4 .carousel-buttons {}

    .s8-4 .carousel-button {
        top: 20rem;
        position: absolute;
        pointer-events: all;
    }

    .s8-4 .carousel-button__prev {
        right: 100%;
        margin-right: var(--gap);
    }

    .s8-4 .carousel-button__next {
        left: 100%;
        margin-left: var(--gap);
    }

    .s8-5 .swiper {
        overflow: visible;
    }

    .s8-5 .swiper-slide:not(.swiper-slide-active) .s8-3 {
        opacity: 0;
    }

    .s9-1 {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 180rem;
    }

    .s9-2,
    .s9-3,
    .s9-4 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 50rem var(--gap);
    }

    .s9-5 {
        grid-area: a5;
        border-bottom: var(--sl) solid var(--c6);
        padding-bottom: 40rem;
    }

    .s9-6 {
        grid-area: a6;
        font-size: var(--f-m);
    }

    .s9-6 ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0
    }

    .s9-6 li {
        position: relative;
        padding-left: 40rem;
    }

    .s9-6 li::before {
        content: "\2022";
        position: absolute;
        top: 0;
        left: 0;
        width: 40rem;
        text-align: center;
    }

    .s9-7 {
        grid-area: a7;
        display: flex;
        min-height: 100%;
    }

    .s9-8 {
        grid-area: a8;
        display: flex;
        min-height: 100%;
    }

    .s9-9 {
        grid-area: a9;
        color: var(--c3);
        max-width: 610rem;
    }

    .s9-9 b {
        color: var(--c1);
        font-weight: 500;
    }

    .s9-10 {
        display: flex;
        position: relative;
        overflow: hidden;
        width: 100%;
    }

    .s9-10::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 100%;
    }

    .s9-11 {
        grid-area: a11;
    }

    .s9-2 {
        grid-template-rows: auto 1fr auto;
        align-items: flex-end;
        grid-template-areas:
            "a5 a5 a5 a5 a5 a5 a5 a8 a8 a8 a8 a8 a8"
            "a6 a6 a6 a6 a6 . .    a8 a8 a8 a8 a8 a8"
            "a9 a9 a9 a9 a9 a7 a7 a8 a8 a8 a8 a8 a8";
    }

    .s9-2 .s9-6 {
        margin-bottom: auto;
        max-width: 610rem;
    }

    .s9-3 {
        grid-template-rows: auto auto 1fr auto;
        grid-gap: 0 var(--gap);
        grid-template-areas:
            "a8 a8 a8 a8 a8 a5 a5 a5 a5 a5 a5 ."
            "a8 a8 a8 a8 a8 a6 a6 a6 a6 a6 a6 ."
            "a8 a8 a8 a8 a8 a9 a9 a9 a9 a9 a9 ."
            "a8 a8 a8 a8 a8 a11 a11 a11 a11 a11 a11 .";
    }

    .s9-3 .s9-6 {
        margin-top: 50rem;
    }

    .s9-3 .s9-8 {
        margin-right: 90rem;
    }

    .s9-3 .s9-9 {
        max-width: none;
        display: flex;
        margin-top: 50rem;
    }

    .s9-3 .s9-9-1 {
        max-width: calc(50% - var(--gap) / 2);
        flex: auto;
    }

    .s9-3 .s9-9-1:not(:first-child) {
        margin-left: 90rem;
    }

    .s9-3 .s9-11 {
        margin-top: 50rem;
    }

    .s9-4 {
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "a5 a5 a5 a5 a5 a8 a8 a8 a8 a8 a8 a8"
            "a9 a9 a9 a9 a9 a8 a8 a8 a8 a8 a8 a8";
    }

    .s9-4 .s9-5 {
        margin-bottom: auto;
        margin-right: 40rem;
    }

    .s9-4 .s9-8 .s9-10::before {
        padding-top: 60%;
    }

    .s9-4 .s9-9 {
        margin-right: 40rem;
    }

    .s10 .section-header-title {
        text-align: center;
    }

    .s10-1 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: var(--gap);
        align-items: flex-start;
    }

    .s10-1:not(:first-child) {
        margin-top: 100rem;
    }

    .s10-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 60rem;
    }

    .s10-2-1 {
        flex: none;
        width: max(74px, 108rem);
        height: max(74px, 108rem);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .s10-2-2 {
        margin-top: 40rem;
        white-space: nowrap;
    }

    .s10-2-3 {
        margin-top: 20rem;
        max-width: 440rem;
        color: var(--c0);
    }


    .s11 .section-header-title {
        margin-left: auto;
        max-width: 1400rem;
        text-align: center;
        margin-right: auto;
    }

    .s11-1 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 80rem var(--gap);
    }

    .s11-1:not(:first-child) {
        margin-top: 80rem;
    }

    .s12 .section-header-title {
        text-align: center;
    }

    .s12-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
    }

    .s12-2 {
        grid-column: 2/12;
        border-top: var(--sl) solid var(--c6);
    }

    .s12-3 {
        padding: 40rem 0;
        border-bottom: var(--sl) solid var(--c6);
    }

    .s12-4 {
        cursor: pointer;
        user-select: none;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-gap: var(--gap);
        align-items: flex-start;
    }

    .s12-4-1 {
        grid-column: 1/7;
        padding-left: 40rem;
    }

    .s12-4-2 {
        grid-column: 10/11;
        margin-right: 40rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--f-m);
        height: var(--f-m);
        margin-left: auto;
        will-change: transform;
    }

    .s12-5 {
        padding-top: 40rem;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-gap: var(--gap);
        align-items: flex-start;
        overflow: hidden;
        min-height: 0;
        transition: all .25s;
    }

    .s12-5-1 {
        grid-column: 1/7;
        padding-left: 40rem;
        color: var(--c3);
    }

    .s12-5-2 {
        grid-column: 7/10;
        overflow: hidden;
        position: relative;
        display: flex;
        margin-left: 40rem;
    }

    .s12-5-2::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 100%;
    }

    .s12-3.active .s12-4-2 {
        transform: scaleY(-1);
    }

    .s12-3:not(.active) .s12-5 {
        padding-top: 0;
        height: 0;
        opacity: 0;
    }

    .s13-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
        align-items: flex-start;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            ". a3 a3 a3 a3 . a2 a2 a2 a2 a2 ."
            ". a3 a3 a3 a3 . a4 a4 a4 a4 a4 ."
            ". a3 a3 a3 a3 . a5 a5 a5 a5 . .";
    }

    .s13-2 {
        grid-area: a2;
    }

    .s13-2-1 {
        margin-bottom: 40rem;
    }

    .s13-3 {
        grid-area: a3;
    }

    .s13-4 {
        grid-area: a4;
        margin-top: 40rem;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 20rem;
        font-size: var(--f-m);
        line-height: 1.2;
        letter-spacing: -.02em;
    }

    .s13-4-1 {
        position: relative;
        padding-left: 1.5em;
    }

    .s13-4-1::before {
        content: "\2022";
        position: absolute;
        left: 0;
        top: 0;
        width: 1.5em;
        text-align: center;
    }

    .s13-5 {
        grid-area: a5;
        margin-top: 70rem;
    }

    .s13-6 {
        color: var(--c3);
    }

    .s13-7 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 50rem;
        align-items: flex-start;
        font-size: var(--f-s);
    }

    .s13-7:not(:first-child) {
        margin-top: 60rem;
    }

    .s13-8 {}

    .s13-8-1 {
        margin-bottom: 20rem;
        color: var(--c1);
        font-weight: 400;
    }

    .s13-8-2 {
        color: var(--c3);
    }

    .s13-8-2 ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 15rem;
    }

    .s13-9 {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 40rem;
    }

    .s14-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 50rem var(--gap);
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "a4 a4 a4 a4 a4 a2 a2 a2 a2 a2 a2 a2"
            "a4 a4 a4 a4 a4 a3 a3 a3 a3 a3 a3 a3"
            "a4 a4 a4 a4 a4 a5 a5 a5 a5 a5 a5 a5";
    }

    .s14-2 {
        grid-area: a2;
    }

    .s14-3 {
        grid-area: a3;
        padding-top: 30rem;
        border-top: var(--sl) solid var(--c6);
        padding-right: 60rem;
    }

    .s14-3 {
        display: flex;
        color: var(--c3);
    }

    .s14-3-1 {
        max-width: calc(50% - var(--gap) / 2);
        flex: auto;
    }

    .s14-3-1:not(:first-child) {
        margin-left: 70rem;
    }

    .s14-4 {
        grid-area: a4;
        display: flex;
        position: relative;
        overflow: hidden;
        margin-right: 80rem;
    }

    .s14-4::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 100%;
    }

    .s14-5 {
        grid-area: a5;
        margin-top: auto;
    }

    .s15-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 40rem var(--gap);
        padding-top: 20rem;
        border-top: var(--sl) solid var(--c6);
    }

    .s15-1-1 {
        grid-column-end: span 3;
    }

    .s15-2 {
        margin-bottom: 50rem;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 100rem;
        align-items: baseline;
    }

    .s15-3 {
        margin-top: 80rem;
        display: flex;
        justify-content: center;
    }

    .s16 .section-header-title {
        max-width: 815rem;
    }

    .s16-1 {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-gap: 40rem var(--gap);
    }

    .s16-2 {
        margin-top: 80rem;
        display: flex;
        justify-content: center;
    }

    .s17-1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 100rem 0;
    }

    .s17-2 {
        border-top: var(--sl) solid var(--c6);
        padding-top: 20rem;
    }

    .s17-2:nth-child(odd) {
        padding-right: calc(var(--gap) / 2);
    }

    .s17-2:nth-child(even) {
        padding-left: calc(var(--gap) / 2);
    }

    .s18-1 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 40rem var(--gap);
    }

    .s18-1:not(:first-child) {
        margin-top: 80rem;
    }

    .s19-1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 50rem var(--gap);
        grid-template-areas: "a4 a2" "a4 a3" "a4 a5";
        grid-template-rows: auto auto 1fr;
    }

    .s19-2 {
        grid-area: a2;
        margin-left: 20rem;
        padding-bottom: 40rem;
        border-bottom: var(--sl) solid var(--c6);
    }

    .s19-3 {
        grid-area: a3;
        margin-left: 20rem;
        max-width: 800rem;
    }

    .s19-4 {
        grid-area: a4;
        display: flex;
        position: relative;
        overflow: hidden;
        width: 100%;
    }

    .s19-4::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 60%;
    }

    .s19-5 {
        grid-area: a5;
        margin-left: 20rem;
        max-width: 650rem;
        color: var(--c3);
    }

    .s19-6 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--gap);
        align-items: flex-start;
    }

    .s19-6:not(:first-child) {
        margin-top: 50rem;
    }

    .s19-7 {
        display: grid;
        grid-template-columns: auto;
        grid-gap: var(--gap);
    }

    .s19-8 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--gap);
        align-items: flex-start;
        padding: 20rem 20rem 0;
        border-top: var(--sl) solid var(--c6);
    }

    .s19-8-1 {
        color: var(--c4);
        opacity: .8;
    }

    .s19-8-2 {
        font-weight: 400;
        text-align: right;
    }

    .s19-8-2 a {
        text-decoration: underline;
    }

    .s20-1 {
        display: flex;
        position: relative;
        overflow: hidden;
    }

    .s20-1::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 45%;
    }

    .s21-1 {
        padding: 140rem 0;
        display: flex;
    }

    .s21-2 {
        margin: 0 auto;
        width: 100%;
        max-width: 1000rem;
        text-align: center;
    }

    .s22-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
        align-items: flex-start;
    }

    .s22-1:not(:first-child) {
        margin-top: 120rem;
    }

    .s22-2 {
        grid-column: 3/9;
        padding-right: 60rem;
        position: relative;
    }

    .s22-3 {
        grid-column: 9/12;
    }

    .s22-4 {
        margin-bottom: 50rem;
        border-bottom: var(--sl) solid var(--c6);
        padding-bottom: 20rem;
    }

    .s22-5 {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 40rem;
    }

    .s22-6 {
        font-size: var(--f-s);
    }

    .s22-6-1 {
        margin-bottom: 15rem;
        color: var(--c1);
        font-weight: 400;
    }

    .s22-6-2 {
        color: var(--c3);
        display: grid;
        grid-template-columns: auto;
        grid-gap: 15rem;
    }

    .s22-6-2 a[href^="mailto:"] {
        text-decoration: underline;
    }

    .s22-8 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
    }

    .s22-8-2 {
        margin-top: 40rem;
        font-size: var(--f-s);
    }

    .s22-2.success .s22-4,
    .s22-2.success .s22-7,
    .s22-2:not(.success) .s22-8 {
        visibility: hidden;
        pointer-events: none;
    }

    .s23 {
        padding: 0;
    }

    .s23-1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: .4;
    }

    .s23-1::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .s23-2 {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 175rem 0;
    }

    .s23-3 {
        text-align: center;
        margin: auto;
        width: 100%;
        max-width: 950rem;
    }

    .s23-4 {
        width: 100%;
        margin-bottom: 50rem;
    }

    .s23:first-child {
        margin-top: calc(-1 * var(--headroom-height));
    }

    .s23:first-child .s23-2 {
        padding-top: var(--headroom-height);
    }

    .s404,
    .s404:first-child,
    .s404:last-child {
        padding: 120rem 0 300rem;
        margin: 0;
        overflow: hidden;
    }

    .s404-1 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: var(--gap);
    }

    .s404-2 {
        position: relative;
        z-index: 2;
    }

    .s404-2-1 {}

    .s404-2-2 {}

    .s404-3,
    .s404-4 {
        grid-column: 1/-1;
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .s404-3 {
        transform: rotate(-40deg);
    }

    .s404-4 {
        transform: rotate(4deg);
    }

    .s404-5 {
        border-top: var(--sl) solid;
        border-bottom: var(--sl) solid;
        background-color: var(--c0);
        padding: 20rem 0;
        flex: none;
        width: 200vw;
        min-width: 200vh;
        white-space: nowrap;
        display: inline-flex;
        justify-content: flex-start;
    }

    .s404-6 {
        white-space: nowrap;
        display: inline-flex;
        justify-content: flex-start;
    }

    .s404-6-1 {
        display: inline-flex;
        align-items: flex-end;
    }

    .s404-6-1::after {
        content: "";
        width: 100rem;
        flex: none;
    }

    .s404-3 .runner-start,
    .s404-3 .runner-end {
        animation-name: tickerBackwards;
    }


    .s0 .section-header,
    .s22 .section-header {
        text-align: center;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 0 var(--gap);
    }

    .s0 .section-header-title,
    .s22 .section-header-title,
    .s0 .section-header-subtitle,
    .s22 .section-header-subtitle {
        grid-column: 2/4;
    }

}

@media screen and (max-width: 1023.98px) {

    :root {

        --wr: 10rem;

        --gap: 12rem;

        --btn: 60rem;

        --cols: minmax(0, 1fr);

        --f-xxs: 12rem;
        --f-xs: 14rem;
        --f-s: 16rem;
        --f-d: 16rem;
        --f-m: 20rem;
        --f-m1: 18rem;
        --f-b: 28rem;
        --f-l: 40rem;
        --f-n: 100rem;

        --mw: 680rem;

    }

    html {
        font-size: 1px;
    }

    .desktop {
        display: none !important;
    }

    .preloader-icon {
        width: 130rem;
        max-width: 130rem;
    }

    .cookies-alert {}

    .header {
        overflow: hidden;
    }

    .button__default {
        width: 100%;
    }

    .button__default .button-text {
        font-size: var(--f-s);
        font-weight: 400;
    }

    .button__inl .button-icon {
        width: .4em;
    }

    .checkbox-label-icon {
        width: 16rem;
        height: 16rem;
        border-width: var(--sl);
        border-radius: 0;
        padding: 2rem;
    }

    .checkbox-label-text {
        font-size: var(--f-xs);
        line-height: 1.2;
        padding-bottom: .1em;
    }

    .textfield-input {
        font-size: var(--f-s);
    }

    .textfield-label {
        padding-bottom: 5rem;
        font-size: var(--f-s);
    }

    .title__default {
        letter-spacing: -.04em;
    }

    .title br {
        display: none;
    }

    .carousel-buttons {
        grid-gap: 5rem;
    }

    .carousel-button {
        width: 18rem;
        height: 18rem;
    }

    .header {
        z-index: 100;
    }

    .topbar {
        padding: 15rem 0;
    }

    .topbar-main {
        grid-template-columns: 1fr auto;
    }

    .topbar-nav,
    .topbar-action,
    .topbar-search {
        display: none;
    }

    .topbar-logo {
        max-width: 140rem;
    }

    .topbar-secondary {
        grid-template-columns: auto;
        grid-gap: 12rem;
    }

    .topbar-secondary::before {
        margin-top: 16rem;
        opacity: 0;
    }

    .topbar-subtitle {
        font-size: var(--f-xxs);
    }

    .formbox .textfield-label {
        position: relative;
    }

    .formbox {
        grid-gap: 20rem;
    }

    .formbox-row {
        flex-direction: column;
        align-items: initial;
    }

    .formbox-cell+.formbox-cell {
        margin: 20rem 0 0;
    }

    .formbox-note {
        margin-top: 20rem;
        font-size: var(--f-s);
    }

    .formbox-footer {
        margin-top: 30rem;
    }

    .footer {
        overflow: hidden;
    }

    .footer-grid {
        padding: 40rem 0 10rem;
        grid-template-columns: auto;
        grid-template-areas: "f1" "f4" "f2" "f3" "f5" "f7" "f6";
    }

    .footer-form {
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .footer-form-checkbox {
        margin-top: 12rem;
    }

    .footer-form-button {
        order: 1;
        margin-top: 50rem;
    }

    .footer-form-input {
        padding: 0 0 10rem;
    }

    .f1-1-2 {
        margin-top: 25rem;
    }

    .f1-2 {
        margin-top: 50rem;
    }

    .f2 {
        margin-top: 50rem;
    }

    .f2-1-1 {
        font-size: var(--f-m1);
    }

    .f2-1-2 {
        font-size: var(--f-s);
    }

    .f2-1-2 ul {
        grid-gap: 10rem;
    }

    .f3 {
        margin-top: 30rem;
        font-size: var(--f-xs);
    }

    .f4 {
        margin-top: 60rem;
    }

    .f5 {
        margin: 45rem 0 40rem;
    }

    .f6 {
        margin-top: 20rem;
        font-size: var(--f-xs);
    }

    .f6-1 {
        display: block;
    }

    .f7 {
        text-align: left;
        font-size: var(--f-d);
        margin-left: 0;
    }

    .badge {
        padding: 30rem 20rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .badge-icon {
        width: 40rem;
        height: 40rem;
        margin: 0 0 40rem;
    }

    .cookies-alert-inner {
        grid-template-columns: auto;
        grid-gap: 20rem;
        margin: 10rem;
        padding: 20rem;
    }

    .cookies-alert-text {
        font-size: var(--f-xs);
    }

    .section {
        margin-bottom: 80rem;
    }

    .section:first-child {
        margin-top: 50rem;
    }

    .section:last-child {
        margin-bottom: 80rem;
    }

    .section__contrast {
        padding: 100rem 0;
    }

    .section-header {}

    .section-header:not(:last-child) {
        margin-bottom: 20rem;
    }

    .section-header-subtitle {
        margin-top: 40rem;
    }

    .section-header br {
        display: none;
    }

    .textbox h2 {
        margin: 70rem 0 30rem;
    }

    .textbox p {
        margin: 1.25em 0;
    }

    .breadcrumbs-container {
        margin: 0 0 60rem;
    }

    .breadcrumbs ul {
        display: inline;
        margin: 0;
    }

    .breadcrumbs li {
        display: inline;
        margin: 0;
    }

    .breadcrumbs li:not(:first-child)::before {
        padding: 0;
    }

    .partners .swiper-slide {
        padding: 0 40rem;
    }

    .partners-item {
        height: 25rem;
    }

    .author {
        flex-direction: column;
        text-align: center;
    }

    .author-image {
        margin: 0 auto 20rem;
    }

    .author-title {
        font-weight: 300;
    }

    .filters {
        height: auto;
        margin: 0;
        border-top: var(--sl) solid var(--c6);
        padding: 0;
    }

    .filters-wrapper {
        padding: 0;
        margin: 0;
        width: 100%;
        box-shadow: none;
    }

    .filters-nav {
        height: auto;
        grid-template-columns: 1fr auto;
        padding: 10rem 0;
        line-height: inherit;
    }

    .filters-nav-item {
        margin-right: auto;
    }

    .filters-options {
        padding: 30rem 0 45rem;
        transition: all .25s;
    }

    .filters-group {
        grid-template-columns: 1fr 1fr;
        grid-gap: 20rem var(--gap);
    }

    .filters:not(.active) .filters-options {
        display: block;
        padding: 0;
        opacity: 0;
    }


    .card-2 .card-header::before {
        padding-top: 100%;
    }

    .card-2 .card-content {
        margin-top: 15rem;
    }

    .card-2 .card-title {
        padding: 0;
    }

    .card-2 .card-title-name {}

    .card-2 .card-title-name::before {
        width: 40rem;
        text-align: center;
    }

    .card-2 .card-title-icon {
        width: .4em;
        margin-left: 40rem;
    }

    .card-2 .card-subtitle {
        padding: 15rem 0 0;
    }

    .card-4 .card-header::before {
        padding-top: 100%;
    }

    .card-5 .card-content {
        padding: 20rem;
    }

    .s0:last-child {
        margin-bottom: 150rem;
    }

    .s0-1 {
        grid-template-columns: auto;
    }

    .s0-1:not(:first-child) {
        margin-top: 80rem;
    }

    .s0-2 {
        grid-column: 1/-1;
    }

    .s1 {
        padding: 0;
    }

    .s1-3 {
        padding: 0;
    }

    .s1-4 {
        margin-top: 60rem;
        text-align: left;
    }

    .s1-6 {
        padding: 60rem 0 60rem;
        grid-template-columns: auto;
        grid-gap: 0;
        grid-template-rows: auto;
        grid-template-areas: "a3" "a7" "a5" "a4";
    }

    .s1-6:last-child {
        padding-bottom: 60rem;
    }

    .s1:first-child {
        margin-top: calc(-1 * var(--headroom-height));
    }

    .s1:first-child .s1-4 {
        margin-top: 100rem;
        text-align: right;
    }

    .s2-1 {
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .s2-1:not(:first-child) {
        margin-top: 0;
    }

    .s2-2 {
        grid-column: 1/-1;
        grid-template-columns: auto;
        grid-gap: 10rem;
    }

    .s2-2-1:nth-child(1),
    .s2-2-1:nth-child(2) {
        grid-column: auto;
    }

    .s2-3 {
        margin: 20rem 0 0;
        order: 1;
    }

    .s2-4 {
        margin-top: 40rem;
    }

    .s2-4::before {
        padding-top: 60%;
    }

    .s3 .section-header-subtitle {
        margin-top: 20rem;
    }

    .s3-1 {
        grid-template-columns: auto;
        grid-gap: 60rem;
    }

    .s3-1:not(:first-child) {
        margin-top: 70rem;
    }

    .s4-1 {
        margin-bottom: 20rem;
    }

    .s4-3 {
        margin-top: 40rem;
    }

    .s5-1:not(:first-child) {
        margin-top: 40rem;
    }

    .s6 {
        padding: 0;
    }

    .s6-2 {
        mask-image: none;
        font-size: var(--f-m);
    }

    .s6-2 .swiper-slide {
        white-space: normal;
    }

    .s6-2 .swiper-slide:not(.swiper-slide-active) {
        opacity: 0;
    }

    .s6-4 {
        margin-top: 25rem;
    }

    .s6-4::before {
        margin-bottom: 25rem;
    }

    .s6-5::after {
        background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    }

    .s6-6 {
        padding-bottom: 200rem;
    }

    .s6-7 {
        align-items: baseline;
    }

    .s6-8 {
        grid-gap: 15rem;
    }

    .s6-8-1 {
        grid-column: 1/-1;
        padding: 0;
    }

    .s7-1 {
        grid-template-columns: auto;
        grid-gap: 0;
        grid-template-rows: auto;
    }

    .s7-2 {
        padding: 0;
        margin: 0;
        order: -2;
    }

    .s7-3 {
        grid-row: auto;
        margin-top: 20rem;
    }

    .s7-4 {
        margin: 20rem 0 0;
        padding: 0;
    }

    .s7-4-2:not(:first-child) {
        margin-top: 40rem;
    }

    .s8-1 {
        grid-template-columns: var(--cols);
    }

    .s8-1:not(:first-child) {
        margin-top: 40rem;
    }

    .s8-2 {
        grid-column: 1/-1;
    }

    .s8-3-1 {
        font-size: var(--f-m1);
    }

    .s8-3-2 {
        margin-top: 40rem;
        position: relative;
    }

    .s8-3-2 .carousel-buttons {
        top: 30px;
        left: 0;
        width: 100%;
        height: 60rem;
        grid-gap: 150rem;
        position: absolute;
        align-items: center;
    }

    .s8-3-2 .carousel-button__prev {
        margin-left: auto;
    }

    .s8-3-2 .carousel-button__next {
        margin-right: auto;
    }

    .s9-1 {
        grid-gap: 80rem;
        overflow: hidden;
    }

    .s9-2 {
        grid-template-areas: "a5" "a6" "a7" "a8" "a9";
        grid-gap: 0;
        grid-template-rows: auto;
    }

    .s9-3 {
        grid-template-areas: "a5" "a6" "a7" "a8" "a9" "a10" "a11";
        grid-gap: 0;
        grid-template-rows: auto;
    }

    .s9-4 {
        grid-template-areas: "a5" "a9" "a7" "a8";
        grid-gap: 0;
        grid-template-rows: auto;
    }

    .s9-5 {
        padding-bottom: 20rem;
        padding-right: 40rem;
    }

    .s9-6 {
        font-size: var(--f-m1);
        letter-spacing: normal;
        font-weight: 400;
        margin-top: 20rem;
    }

    .s9-7 {
        margin-top: 40rem;
        min-height: 0;
    }

    .s9-8 {
        margin-top: 20rem;
        min-height: 0;
    }

    .s9-9 {
        margin-top: 20rem;
    }

    .s9-3 .s9-6 {
        margin-top: 20rem;
    }

    .s9-3 .s9-8 {
        margin-right: 0;
    }

    .s9-3 .s9-9 {
        margin-top: 20rem;
        flex-direction: column;
    }

    .s9-3 .s9-9-1 {
        max-width: 100%;
    }

    .s9-3 .s9-9-1:not(:first-child) {
        margin: 10rem 0 0;
    }

    .s9-3 .s9-11 {
        margin-top: 40rem;
    }

    .s9-4 .s9-5 {
        margin-right: 0;
    }

    .s9-4 .s9-8 {
        margin-top: 40rem;
    }

    .s9-4 .s9-8 .s9-10::before {
        padding-top: 100%;
    }

    .s9-4 .s9-9 {
        margin-right: 0;
    }

    .s10 .section-header-title {
        max-width: 250rem;
        margin: 0 auto;
    }

    .s10 .section-header-title .title {
        font-size: var(--f-l);
        text-align: center;
    }

    .s10-1 {
        grid-template-columns: auto;
        grid-gap: 80rem;
    }

    .s10-1:not(:first-child) {
        margin-top: 80rem;
    }

    .s10-2 {
        padding: 0 25rem;
    }

    .s10-2-1 {
        width: 74rem;
        height: 74rem;
    }

    .s10-2-2 {
        white-space: normal;
    }

    .s11-1 {
        grid-template-columns: auto;
        grid-gap: 40rem;
    }

    .s11-1:not(:first-child) {
        margin-top: 40rem;
    }

    .s12 .section-header-title .title {
        font-size: var(--f-l);
        text-align: center;
    }

    .s12-1:not(:first-child) {
        margin-top: 30rem;
    }

    .s12-2 {
        grid-column: 1/-1;
    }

    .s12-3 {
        padding: 30rem 0;
    }

    .s12-4 {
        grid-template-columns: 1fr auto;
        grid-gap: 80rem;
    }

    .s12-4-1 {
        grid-column: auto;
        padding: 0;
    }

    .s12-4-2 {
        grid-column: auto;
        padding: 0;
        margin: 0;
        width: 20rem;
    }

    .s12-5 {
        grid-template-columns: auto;
        grid-gap: 20rem;
        padding-top: 20rem;
    }

    .s12-5-1 {
        grid-column: auto;
        margin: 0;
        padding: 0;
    }

    .s12-5-2 {
        grid-column: auto;
        order: -1;
        margin: 0;
        padding: 0;
    }

    .s13-1 {
        grid-template-areas: "a2" "a3" "a4" "a5";
        grid-gap: 0;
        grid-template-rows: auto;
    }

    .s13-2-1 {
        margin-bottom: 15rem;
        color: var(--c4);
    }

    .s13-2-1 .title {
        font-size: var(--f-d);
        letter-spacing: normal;
    }

    .s13-3 {
        margin-top: 20rem;
    }

    .s13-4 {
        margin-top: 30rem;
    }

    .s13-4-1 {
        padding-left: 1em;
    }

    .s13-4-1::before {
        width: 1em;
    }

    .s13-5 {
        margin-top: 50rem;
    }

    .s13-7:not(:first-child) {
        margin-top: 50rem;
        grid-template-columns: auto;
        grid-gap: 35rem;
    }

    .s13-8-1 {
        margin-bottom: 10rem;
        font-size: var(--m1);
    }

    .s13-9 {
        grid-gap: 35rem;
    }

    .s14-1 {
        grid-template-areas: "a2" "a3" "a4" "a5";
        grid-gap: 0;
        grid-template-rows: auto;
    }

    .s14-3 {
        margin-top: 20rem;
        padding: 20rem 0 0;
        flex-direction: column;
    }

    .s14-3-1 {
        max-width: none;
    }

    .s14-3-1:not(:first-child) {
        margin: 10rem 0 0;
    }

    .s14-4 {
        margin: 40rem 0 0;
    }

    .s14-5 {
        margin-top: 40rem;
    }

    .s15-1 {
        grid-gap: 50rem;
    }

    .s15-1-1 {
        grid-column: 1/-1;
    }

    .s15-2 {
        margin-bottom: 15rem;
        align-items: flex-end;
    }

    .s15-2-2 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--f-m);
        height: var(--f-m);
    }

    .s15-3 {
        margin-top: 50rem;
    }

    .s16-1 {
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .s16-2 {
        margin-top: 50rem;
    }

    .s17-1 {
        grid-gap: 60rem;
        grid-template-columns: auto;
    }

    .s17-2:nth-child(even),
    .s17-2:nth-child(odd) {
        padding-left: 0;
        padding-right: 0;
    }

    .s18-1 {
        grid-template-columns: auto;
        grid-gap: 40rem;
    }

    .s18-1:not(:first-child) {
        margin-top: 40rem;
    }

    .s19-1 {
        grid-template-columns: auto;
        grid-gap: 0;
        grid-template-areas: "a2" "a3" "a4" "a5";
    }

    .s19-2 {
        margin: 0;
        padding-bottom: 20rem;
    }

    .s19-3 {
        margin: 20rem 0 0;
    }

    .s19-3 .title {
        font-size: var(--f-m1);
        letter-spacing: normal;
        font-weight: 400;
    }

    .s19-4 {
        margin-top: 40rem;
    }

    .s19-4::before {
        padding-top: 100%;
    }

    .s19-5 {
        margin: 20rem 0 0;
    }

    .s19-6 {
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .s19-6:not(:first-child) {
        margin-top: 40rem;
    }

    .s19-7 {
        grid-gap: 20rem;
    }

    .s19-8 {
        padding: 20rem 0 0;
        align-items: baseline;
    }

    .s19-8-1 {
        font-size: var(--f-m1);
    }

    .s20-1::before {
        padding-top: 140%;
    }

    .s21-1 {
        padding: 100rem 0;
    }

    .s22-1 {
        grid-template-columns: auto;
        grid-gap: 80rem;
    }

    .s22-1:not(:first-child) {
        margin-top: 115rem;
    }

    .s22-2 {
        grid-column: 1/-1;
        padding: 0;
    }

    .s22-3 {
        grid-column: 1/-1;
    }

    .s22-4 {
        padding-bottom: 15rem;
        margin-bottom: 30rem;
    }

    .s22-6-1 {
        font-size: var(--f-m1);
        margin-bottom: 10rem;
    }

    .s23 {
        padding: 0;
    }

    .s23:first-child {
        margin-top: calc(-1 * var(--headroom-height));
    }

    .s23-2 {
        padding: 100rem 0;
    }

    .s23-4 {
        max-width: 300rem;
        margin-right: auto;
        margin-bottom: 60rem;
    }

    .s404,
    .s404:first-child,
    .s404:last-child {
        padding: 80rem 0 150rem;
        margin: 0;
    }

    .s404-1 {
        grid-template-columns: minmax(0, 1fr);
        grid-gap: 60rem;
    }

    .s404-3 {
        transform: rotate(-10deg);
        order: -1;
        height: 0;
        transform-origin: bottom;
    }

    .s404-4 {
        transform: rotate(10deg);
        transform-origin: top;
    }

    .s404-5 {
        padding: 10rem 0;
    }

    .s404-6-1::after {
        width: 40rem;
    }

    .s404-6-1 .title {
        font-size: var(--f-m);
    }

    .s0 .section-header,
    .s22 .section-header {
        grid-template-columns: auto;
    }

    .s0 .section-header-title,
    .s22 .section-header-title,
    .s0 .section-header-subtitle,
    .s22 .section-header-subtitle {
        grid-column: auto;
    }

    .header {
        filter: none;
    }

    .headroom-mobile {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        background-color: var(--c0);
        color: var(--c1);
        padding: 0;
        transition: transform .25s linear;
        filter: drop-shadow(0 0 30rem rgba(0, 0, 0, .1));
    }

    .headroom-mobile:not(.active) {
        transform: translateY(-100%);
    }

    .headroom-mobile .topbar-secondary {
        display: none;
    }

    .topbar-menu {
        position: relative;
        display: flex;
        width: 32rem;
        height: 32rem;
        align-items: center;
    }

    .topbar-menu-inner {
        position: relative;
        background-color: currentColor;
        height: 1.5px;
        width: 100%;
        transition: background-color .15s;
    }

    .topbar-menu-inner::before,
    .topbar-menu-inner::after {
        content: "";
        position: absolute;
        background-color: currentColor;
        height: 100%;
        width: 100%;
        left: 0;
        transition: all .15s;
    }

    .topbar-menu-inner::before {
        bottom: 8rem;
    }

    .topbar-menu-inner::after {
        top: 8rem;
    }

    .topbar-menu-close {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: none;
    }

    .search {
        height: 40rem;
        line-height: 1;
        border-top: var(--sl) solid rgba(255, 255, 255, .2);
        border-bottom: var(--sl) solid rgba(255, 255, 255, .2);
        transition: border-color .15s;
    }

    .search::after {
        display: none;
    }

    .search-label {
        opacity: 0;
        font-size: var(--f-m1);
    }

    .search-input {
        opacity: 1;
        font-size: var(--f-m1);
        padding-left: 10rem;
        padding-right: 50rem;
        text-overflow: ellipsis;
    }

    .search-icon {
        margin-right: 10rem;
    }

    .search:focus-within {
        border-bottom-color: var(--c2);
    }

    .popup {
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--c1);
        color: var(--c2);
        display: flex;
        overflow: auto;
        transition: all .25s;
        align-items: flex-start;
    }

    .popup-inner {
        display: flex;
        flex-direction: column;
        padding: var(--headroom-height) var(--wr) 30rem;
        width: 100%;
        height: 100%;
        transition: all .25s;
    }

    .popup-search {
        margin-top: -40rem;
    }

    .popup-nav {
        flex: 1;
        overflow: auto;
        padding: 60rem 0;
    }

    .popup-nav ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 30rem;
        font-size: var(--f-b);
        text-align: center;
    }

    .popup-footer {
        margin-top: auto;
        display: flex;
        flex: none;
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 40rem;
    }

    .popup-footer-email {
        grid-column: 1/-1;
        line-height: 1;
        letter-spacing: -.04em;
    }

    .popup-footer-contacts {
        font-size: var(--f-xs);
        display: flex;
    }

    .popup-footer-contacts ul {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 100%;
    }

    .popup-footer-contacts:nth-child(2) ul {
        text-align: right;
        align-items: flex-end;
    }

    .popup-footer-contacts li:not(:first-child) {
        margin-top: 20rem;
    }

    .popup-active {
        overflow: hidden !important;
    }

    .popup-active .topbar-secondary {
        opacity: 0;
    }

    .popup-active .headroom-mobile:not(.static) {
        transform: translateY(0);
    }


    .popup-active .topbar-menu-inner {
        color: rgba(0, 0, 0, 0);
        pointer-events: none;
    }

    .popup-active .topbar-menu-inner::before {
        bottom: 0;
        color: var(--c2);
        transform: rotate(-45deg);
    }

    .popup-active .topbar-menu-inner::after {
        top: 0;
        color: var(--c2);
        transform: rotate(45deg);
    }

    .popup-active .header,
    .popup-active .headroom-mobile {
        color: var(--c2);
        background-color: transparent;
        filter: none;
        pointer-events: none;
    }

    .popup-active .topbar-logo {
        background-image: url(../img/logo-white.svg);
    }

    .popup-active .topbar-logo img {
        opacity: 0;
    }

    .popup-active .topbar-main {
        pointer-events: all;
    }

    .popup-active .topbar-menu-close {
        display: block;
    }

    .popup:not(.active) {
        opacity: 0;
        visibility: hidden;
    }

    .popup:not(.active) .popup-inner {
        transform: translateY(-25%);
        opacity: 0;
    }


}

@media screen and (min-width: 1024px) {

    .mobile {
        display: none !important;
    }

    .header.init {
        position: sticky;
        top: calc(-1 * var(--headroom-height));
        transition-duration: .25s;
        transition-timing-function: linear;
        transition-property: top, background-color, color;
    }

    .header.active {
        top: 0;
    }

    .header.contrast.init:not(.active) {
        transition-delay: 0s, .5s, .5s;
    }

    .header.contrast.init:not(.active) .button__default {
        transition-delay: .5s;
    }

    .header.contrast.init:not(.active) .topbar-logo img {
        transition: opacity .25s .5s;
    }

}

@media screen and (min-width: 1920px) {


    html {
        font-size: 1px;
    }


}

/* hover animations */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {

    .button {
        transition: all .15s;
    }

    .button__default:hover {
        border-color: var(--c1);
        color: var(--c1);
        background-color: transparent;
    }

    .header.contrast(.static) .button__default:hover {
        transition-delay: 0s;
    }

    .header.contrast:not(.active) .button__default:hover,
    .section__contrast .button__default:hover {
        background-color: transparent;
        color: var(--c2);
        border-color: var(--c2);
        transition-delay: 0s;
    }

    .carousel-button {
        transition: opacity .15s;
    }

    .carousel-button:not(.swiper-button-disabled):hover {
        opacity: .3;
    }

    .button__inl .button-icon {
        transition: transform .15s;
        will-change: transform;
    }

    .button__inl:hover .button-icon:first-child {
        transform: translateX(-.5em);
    }

    .button__inl:hover .button-icon:last-child {
        transform: translateX(.5em);
    }

    .checkbox-label-text a {
        transition: opacity .15s;
    }

    .checkbox-label-text a:hover {
        opacity: .5;
    }

    .card-1 .card-media,
    .card-2 .card-media,
    .card-3 .card-media,
    .card-4 .card-media {
        transition: transform .25s;
        will-change: transform;
    }

    .card-1:hover .card-media,
    .card-2:hover .card-media,
    .card-3:hover .card-media,
    .card-4:hover .card-media {
        transform: scale(1.05);
    }

    .card-1:hover .card-media,
    .card-2:hover .card-media,
    .card-3:hover .card-media,
    .card-4:hover .card-media {
        transform: scale(1.05);
    }

    .s18-1 .card-4:hover .card-media {
        transform: scale(1);
    }




    .card-2 .card-title-icon {
        will-change: transform;
        transition: transform .25s;
    }

    .card-2:hover .card-title-icon {
        transform: translateX(20rem);
    }

    .topbar-nav a,
    .s13-8-2 a,
    .s22-6-2 a,
    .f2-1-2 a,
    .f3 a,
    .f5 a,
    .f6 a,
    .f7 a {
        background-size: 0 var(--sl);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-image: linear-gradient(currentColor, currentColor);
        display: inline;
        transition: background-size .5s cubic-bezier(0.2, 1, 0.3, 1), color .25s;
    }

    .f5 a {
        display: block;
    }

    .s22-6-2 a[href^="mailto:"] {
        background: none;
    }

    .topbar-nav a:hover,
    .s13-8-2 a:hover,
    .s22-6-2 a:hover,
    .f2-1-2 a:hover,
    .f3 a:hover,
    .f5 a:hover,
    .f6 a:hover,
    .f7 a:hover {
        background-size: 100% var(--sl);
        background-position: left bottom;
        color: var(--c1);
    }

    .topbar-nav a:hover {
        color: inherit;
    }

    .f7,
    .textbox a {
        transition: color .15s;
    }

    .f7 {
        pointer-events: none;
    }

    .f7 a {
        pointer-events: all;
    }

    .f7:hover,
    .textbox a:hover {
        color: var(--c1);
    }

    .s6-2 .swiper-slide:not(.swiper-slide-next):not(.swiper-slide-active) {
        pointer-events: none;
    }

    .s6-2 .swiper-slide-next {
        transition: opacity .15s;
    }

    .s6-2 .swiper-slide-next:hover {
        opacity: 1;
        cursor: pointer;
        z-index: 1;
    }

    .s19-8-2 a,
    .s23-4 li {
        transition: opacity .25s;
    }

    .s19-8-2 a:hover {
        opacity: .6;
    }

    .breadcrumbs li:hover {
        opacity: 1;
    }

}