@charset "UTF-8";

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


:root {

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


    --c0: #FFFFFF;
    --c1: #141517;
    --c2: #1F3B70;
    --c3: #F4BFBB;
    --c4: #F04438;

    --c5: color-mix(in srgb, currentColor 80%, transparent);
    --c6: color-mix(in srgb, currentColor 60%, transparent);
    --c7: color-mix(in srgb, currentColor 40%, transparent);
    --c8: color-mix(in srgb, currentColor 20%, transparent);

    --c9: #5D5D5D;
    --c10: #F9F9F9;
    --c11: #EBEBEB;
    --c12: #BDBDBD;

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

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

    --br1: 8rem;
    --br2: 12rem;

    --btn: max(35px, 40rem);

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

    --altfont: 'Canela Web', serif;

    --f-s: max(14px, 14rem);
    --f-d: max(14px, 16rem);
    --f-m: max(14px, 22rem);
    --f-b: max(14px, 24rem);
    --f-l: max(14px, 52rem);
    --f-xl: max(14px, 72rem);

    --mw: 3000px;


}


/* globals */

@media screen {

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

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

    .altfont,
    .title__default,
    .title__large {
        font-family: var(--altfont);
        font-weight: 400;
        letter-spacing: -.04em;
        line-height: 1.1;
    }

    .popup-active {
    }

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

    .upc {
        text-transform: uppercase;
        letter-spacing: -.04em;
        font-weight: 400;
    }

    .preloader {
        background-color: var(--c0);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        visibility: hidden;
        opacity: 0;
        transition: all .25s 1s;
        display: flex;
        color: var(--c1);
        will-change: transform;
    }

    .loading {
        pointer-events: none;
    }

    .loading .preloader {
        transition-duration: 0s;
        opacity: 1;
        visibility: visible;
    }

    .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;
        position: relative;
    }

    .button:not(.fill) {
        overflow: hidden;
        position: relative;
    }

    .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__default {
        padding: 0 20rem;
        border-radius: var(--br1);
        height: var(--btn);
        background-color: var(--c2);
        color: var(--c0);
        border: var(--sl) solid transparent;
    }

    .button__default .button-text {
        text-transform: uppercase;
        letter-spacing: -.04em;
        font-weight: 400;
    }

    .button__default.button__contrast {
        background-color: var(--c0);
        color: var(--c1);
    }

    .button__secondary {
        padding: 0 20rem;
        border-radius: var(--br1);
        height: var(--btn);
        border: var(--sl) solid var(--c7);
        color: var(--c1);
    }

    .button__secondary .button-text {
        text-transform: uppercase;
        letter-spacing: -.04em;
        font-weight: 400;
    }

    .button__wide {
        width: 100%;
    }

    .title {
        width: 100%;
    }

    .title__small,
    .textbox h2 {
        line-height: 1.3;
        letter-spacing: -.06em;
        font-size: var(--f-b);
    }

    .title__default {
        font-size: var(--f-l);
    }

    .title__large {
        font-size: var(--f-xl);
    }

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

    .header {
        position: sticky;
        z-index: 10;
        top: 0;
        transition: background-color .25s;
    }

    .header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 150%;
        z-index: -1;
        background-image: linear-gradient(var(--c0), transparent);
        opacity: 0;
        transition: opacity .25s;
        pointer-events: none;
    }

    .header.active::before {
        opacity: 1;
    }


    .topbar {
        display: grid;
        padding: 25rem 0;
        grid-template-columns: auto 1fr auto;
        grid-gap: 50rem;
        align-items: center;
    }

    .topbar-logo {
        max-width: 240rem;
        width: 1000rem;
    }

    .topbar-nav {
        margin: 0 auto;
    }

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

    .topbar-action {
        display: grid;
        grid-gap: 10rem;
        grid-template-columns: 1fr 1fr;
    }

    .topbar-action .button__secondary {
        background-color: var(--c0);
    }

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

    .section {
        position: relative;
        z-index: 1;
        margin-bottom: 200rem;
    }

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

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

    .section-header {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
    }

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

    .section-header-pretitle {
        grid-column: 1/5;
    }

    .section-header-title {
        grid-column: 5/12;
    }

    .section-header-subtitle {
        grid-column: 5/11;
        margin-top: 20rem;
        max-width: 565rem;
        color: var(--c9);
    }

    .section-header-media {
        grid-column: 1/-1;
        margin-top: 30rem;
        border-radius: var(--br2);
        overflow: hidden;
        position: relative;
        display: flex;
    }

    .section-header-media::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 30%;
    }

    .section-header-media + .section-header-subtitle {
        margin-top: 30rem;
    }

    .footer {
        overflow: hidden;
        margin-top: 0;
        background-color: var(--c2);
        color: var(--c0);
        padding: 50rem 0 20rem;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 120rem var(--gap);
        align-items: flex-start;
    }

    .footer-nav-caption {
        margin-bottom: 35rem;
        font-weight: 400;
    }

    .footer-nav ul {
        display: grid;
        grid-gap: .75em var(--gap);
        align-items: flex-start;
    }

    .f1 {
        grid-area: f1;
    }

    .f2 {
        grid-area: f2;
    }

    .f2 .footer-nav ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .f3 {
        grid-area: f3;
    }

    .f4 {
        grid-area: f4;
    }

    .f5 {
        grid-area: f5;
        margin-left: auto;
    }

    .f6 {
        grid-area: f6;
    }

    .f7 {
        grid-area: f7;
    }

    .f7 ul {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -.25em;
    }

    .f7 li {
        margin: 0 .25em;
        display: inline-flex;
    }

    .f7 li:not(:last-child)::after {
        content: "|";
        padding-left: .5em;
    }

    .f8 {
        grid-area: f8;
    }

    .go-top {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: var(--sl) solid;
        width: max(45px, 50rem);
        height: max(45px, 50rem);
        padding: 16rem;
    }

    .bottombar-author {
        display: flex;
        align-items: baseline;
        color: var(--c6);
    }

    .bottombar-author a {
        color: var(--c0);
    }

    .dd-icon {
        width: 1em;
        height: 1.2em;
        margin: 0 .3em;
        opacity: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--c0);
    }

    .dd-icon .icon {
        width: 100%;
    }


    .breadcrumbs {
        margin-top: 15rem;
        overflow: hidden;
        font-size: var(--f-s);
        margin-bottom: 80rem;
    }

    .breadcrumbs ul {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        margin: -5rem;
    }

    .breadcrumbs li {
        margin: 5rem;
    }

    .breadcrumbs li:not(:last-child)::after {
        content: "/";
        padding-left: 10rem;
        color: var(--c7);
    }

    .breadcrumbs li:first-child::before,
    .breadcrumbs li:last-child::after {
        content: "\a0";
        border: var(--sl) solid;
        display: inline-block;
        border-radius: .25em;
        width: 15rem;
        color: var(--c7);
    }

    .breadcrumbs li:first-child::before {
        clip-path: inset(0 50% 0 0);
    }

    .breadcrumbs li:last-child::after {
        clip-path: inset(0 0 0 50%);
    }

    .breadcrumbs li:not(:last-child) a {
        color: var(--c7);
    }

    .badge {
        display: inline-grid;
        letter-spacing: -.04em;
        text-transform: uppercase;
        font-weight: 400;
        grid-template-columns: auto 1fr auto;
        grid-gap: 0;
    }

    .badge-text {
        padding: 3rem 0;
    }

    .badge:first-child::before,
    .badge:last-child::after {
        content: "\a0";
        border: var(--sl) solid;
        display: inline-block;
        border-radius: .25em;
        width: 15rem;
    }

    .badge:first-child::before {
        clip-path: inset(0 50% 0 0);
    }

    .badge:last-child::after {
        clip-path: inset(0 0 0 50%);
    }

    .textbox h2 {
        margin: 3em 0 1em;
        color: var(--c1);
    }

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

    .textbox h3 {
        font-weight: 500;
        margin: 2em 0 .65em;
        line-height: 1.3;
    }

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

    .textbox a {
        text-decoration: underline;
    }

    .textbox ul,
    .textbox ol {
        margin: 1em 0;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0;
        counter-reset: index;
    }

    .textbox ol {
        counter-reset: index;
    }

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

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

    .textbox li {
        position: relative;
        padding-left: 1.5em;
    }

    .textbox ul li::before {
        content: "\2022";
        position: absolute;
        top: 0;
        left: 0;
        width: 1.5em;
        text-align: center;
    }

    .textbox ol li::before {
        content: counter(index) ".";
        position: absolute;
        top: 0;
        left: 0;
        width: 1.5em;
        text-align: center;
        counter-increment: index;
    }

    .formbox {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 15rem;
        border-top: var(--sl) solid var(--c8);
        padding-top: 15rem;
    }

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

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

    .textfield-input {
        border-bottom: var(--sl) solid var(--c8);
        text-transform: uppercase;
        padding-bottom: 15rem;
        width: 100%;
        text-overflow: ellipsis;
        letter-spacing: -.04em;
        text-transform: uppercase;
        font-weight: 400;
        resize: none;
    }

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

    .textfield-msg {
        color: var(--c4);
        margin-top: 10rem;
        display: none;
        margin-bottom: 15rem;
    }

    .textfield-input:invalid ~ .textfield-msg {
        display: block;
    }

    .page-header {
        margin-bottom: 80rem;
    }

    .page-header-inner {
        border-bottom: var(--sl) solid var(--c7);
    }

    .page-header-title:last-child {
        padding-bottom: 40rem;
    }

    .page-header-subtitle {
        font-size: var(--f-m);
        color: var(--c9);
        margin-top: 40rem;
        max-width: 720rem;
    }

    .page-header-subtitle:last-child {
        padding-bottom: 80rem;
    }

    .page-header-subtitle b,
    .section-header-subtitle b,
    .layer b {
        position: relative;
        font-weight: inherit;
        color: var(--c0);
        background-color: var(--c2);
        padding: .15em .2em;
        margin: -.15em -.2em;
        display: inline;
        border-radius: .25em;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }

    .switch {
        border-radius: var(--br2);
        border: var(--sl) solid var(--c7);
        padding: 4rem;
        display: inline-flex;
    }

    .switch-inner {
        display: inline-grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0;
        position: relative;
    }

    .switch-indicator {
        background-color: var(--c2);
        border-radius: var(--br1);
        position: absolute;
        top: 0;
        left: 0;
        right: 50%;
        bottom: 0;
        z-index: -1;
        margin: 0;
        will-change: transform;
        transition: transform .25s;
    }

    .switch-value {
        padding: 0 30rem;
        display: flex;
        text-align: center;
        align-items: center;
        height: var(--btn);
        justify-content: center;
        transition: color .25s;
        cursor: pointer;
    }

    .switch-value.active {
        color: var(--c0);
        pointer-events: none;
    }

    .switch-value__1.active ~ .switch-indicator {
        transform: translateX(0%);
    }

    .switch-value__2.active ~ .switch-indicator {
        transform: translateX(100%);
    }

    .verification {
        border-bottom: var(--sl) solid var(--c8);
        padding-bottom: 15rem;
    }

    .verification-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-gap: var(--gap);
        align-items: center;
    }

    .verification-grid-item {
        padding: 5rem 0;
    }

    .verification-grid-item:nth-child(1) {
        border-right: var(--sl) solid var(--c8);
        padding-right: var(--gap);
    }

    .verification-grid-item:nth-child(2) {
        grid-column: 2/-1;
    }

    .verification-input {
        text-transform: uppercase;
        width: 100%;
        text-overflow: ellipsis;
        letter-spacing: -.04em;
        text-transform: uppercase;
        font-weight: 400;
        resize: none;
        color: var(--c9);
    }

    .selector {
        user-select: none;
        line-height: 1;
    }

    .selector-holder {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }

    .selector-holder-input {
        min-width: 0;
        text-overflow: ellipsis;
        flex: auto;
        width: 100%;
        color: var(--c9);
        pointer-events: none;
        height: 1em;
    }

    .selector-holder-icon {
        width: max(8px, 10rem);
        height: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        margin-left: 10rem;
    }

    .selector-list {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
        overflow: visible;
        width: 100%;
        user-select: none;
    }

    .selector-list-inner {
        background-color: var(--c9);
        color: var(--c0);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: -15rem -20rem;
        white-space: nowrap;
        padding: 15rem 20rem;
        display: flex;
        line-height: 1;
        border-radius: var(--br1);
        box-shadow: 0 0 0 2rem var(--c9), inset 0 0 7rem 0 var(--c7);
    }

    .selector-list-inner ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 1em;
        flex: auto;
    }

    .selector-list:not(.active) {
        display: none;
    }

    .selector-list .selector-holder-icon {
        transform: scaleY(-1);
    }

    .selector-option {
        position: relative;
    }

    .selector-option:not(.active) {
        cursor: pointer;
        opacity: .5;
    }

    .pagination {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        grid-gap: var(--gap);
    }

    .pagination-nav {
        font-weight: 400;
    }

    .pagination-nav ul {
        display: flex;
        flex-wrap: wrap;
    }

    .pagination-nav li {
        position: relative;
        padding: 10rem;
        z-index: 1;
    }

    .pagination-nav li::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: var(--c2);
        z-index: -1;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        width: 30rem;
        height: 30rem;
    }

    .pagination-nav li:not(.current)::before {
        display: none;
    }

    .pagination-nav li:not(.current) a {
        color: var(--c7);
    }

    .pagination-nav li.current a {
        pointer-events: none;
        color: var(--c0);
    }

    .pagination-arrow.disabled {
        pointer-events: none;
        opacity: .5;
    }

    .pagination-arrow a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: .5em;
        height: 1em;
    }

    .carousel-pagination-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel-pagination-container:not(:first-child) {
        margin-top: 15rem;
    }

    .carousel-pagination {
        top: 0;
        left: auto;
        bottom: auto !important;
        line-height: 0;
        position: relative;
        display: flex;
        justify-content: center;
        width: auto !important;
        margin: 0 10rem;
    }

    .carousel-pagination:first-child {
        margin-left: 0;
    }

    .carousel-pagination:last-child {
        margin-right: 0;
    }

    .swiper-pagination-bullet {
        width: max(8px, 8rem);
        height: max(8px, 8rem);
        border-radius: 999rem;
        margin: 0 3rem !important;
        transition: width .3s linear;
        background-color: var(--c2);
        opacity: 1;
        position: relative;
    }

    .swiper-pagination-bullet::before {
        content: "";
        border-radius: inherit;
        min-width: max(8px, 8rem);
        height: 100%;
        position: absolute;
        opacity: 0;
        width: 0%;
        background-color: var(--c2);
    }

    .swiper-pagination-bullet-active {
        background-color: var(--c8);
    }

    .swiper-pagination-bullet-active ~ .swiper-pagination-bullet {
        background-color: var(--c8);
    }

    .carousel-pagination:not(.carousel-autoplay-init) .swiper-pagination-bullet-active {
        background-color: var(--c8);
        opacity: 1;
    }

    .carousel-autoplay-init .swiper-pagination-bullet-active {
        width: 160rem;
    }

    .carousel-autoplay-init .swiper-pagination-bullet-active::before {
        opacity: 1;
        width: 100%;
        transition: width 5s linear;
    }

    .form-container {
        position: relative;
    }

    .form-success {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        flex-direction: column;
        background-color: var(--c0);
        z-index: 1;
        pointer-events: none;
    }

    .form-success-subtitle {
        margin-top: 25rem;
    }

    .form-container:not(.success) .form-success {
        opacity: 0;
    }

    .form-container.success {
        pointer-events: none;
    }


}

/* cards */

@media screen {

    .card {
        position: relative;
        overflow: hidden;
        display: flex;
        min-height: 100%;
        flex-direction: column;
    }

    .card-1 .card-header {
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
        display: flex;
        margin-bottom: 15rem;
    }

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

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

    .card-1 .card-title {
        font-weight: 500;
        line-height: 1.3;
        max-width: 400rem;
    }

    .card-1 .card-subtitle {
        margin-top: 20rem;
        color: var(--c9);
        max-width: 400rem;
    }

    .card-1 .card-info {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rem;
    }

    .card-1 .card-author {
        font-weight: 500;
        margin-right: 10rem;
        display: inline-flex;
        align-items: center;
    }

    .card-1 .card-author::after {
        content: "";
        height: 1.4em;
        width: var(--sl);
        background-color: currentColor;
        margin-left: 10rem;
        flex: none;
    }

    .card-1 .card-footer {
        max-width: 400rem;
        margin-top: 20rem;
        padding-bottom: 5rem;
    }

    .card-2 {
        border-radius: var(--br2);
        background-color: var(--c10);
        border: var(--sl) solid var(--c11);
    }

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

    .card-2 .card-inner {
        display: flex;
        flex-direction: column;
        padding: 0 40rem 30rem;
        flex: auto;
    }

    .card-2 .card-header {
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        mix-blend-mode: darken;
    }

    .card-2 .card-media {
        z-index: 1;
        position: absolute;
        top: 0%;
        right: 0%;
        left: 0%;
        display: flex;
    }

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

    .card-2 .card-content {
        padding: 0 20rem 20rem 0;
        position: relative;
        z-index: 1;
        flex: auto;
    }

    .card-2 .card-subtitle {
        margin-top: 15rem;
        color: var(--c9);
    }

    .card-2 .card-footer {
        position: relative;
        z-index: 1;
        margin-top: auto;
    }

    .card-3 {
        padding: 40rem;
    }

    .card-3::before,
    .card-3::after {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        pointer-events: none;
        width: 20rem;
        border: var(--sl) solid;
        opacity: .2;
        border-radius: 5rem;
    }

    .card-3::before {
        left: 0;
        clip-path: inset(0 50% 0 0);
    }

    .card-3::after {
        right: 0;
        clip-path: inset(0 0 0 50%);
    }

    .card-3 .card-header {
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        width: max(55px, 60rem);
        height: max(55px, 60rem);
        margin-bottom: 80rem;
    }

    .card-3 .card-subtitle {
        margin-top: 10rem;
        color: var(--c9);
    }

    .card-3 .card-footer {
        margin-top: 30rem;
        padding-bottom: 5rem;
    }


}

/* sections */

@media screen {

    .s1-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
        grid-template-rows: auto auto 1fr;
        align-items: flex-start;
    }

    .s1-2 {
        grid-column: 5/11;
        grid-row: 1/3;
    }

    .s1-3 {
        grid-column: 1/4;
    }

    .s1-4 {
        grid-column: 5/11;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 35rem;
    }

    .s1-4:not(:first-child) {
        margin-top: 35rem;
    }

    .s1-4-1 {
        overflow: hidden;
        border-radius: var(--br1);
    }

    .s1-4-2 {
        color: var(--c9);
    }

    .s1-5 {
        grid-column: 1/4;
        grid-row: 2/4;
        position: sticky;
        top: 100rem;
        margin-top: 40rem;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .s1-6 {
        display: flex;
        align-items: center;
        color: var(--c2);
        font-weight: 400;
        border-left: max(2px, 2rem) solid var(--c2);
        padding-left: 20rem;
    }

    .s1-6.disabled {
        color: var(--c9);
        pointer-events: none;
    }

    .s1-6.disabled .s1-6-1 {
        color: var(--c5);
    }

    .s2-1 {
        margin-bottom: 25rem;
    }

    .s2-2 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: 80rem var(--gap);
    }

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

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

    .s3-1 {
        position: relative;
        z-index: 1;
        margin: 0 var(--awr);
        background-color: var(--c2);
        color: var(--c0);
    }

    .s3-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .5;
    }

    .s3-3 {
        flex: auto;
    }

    .s3-3 .section-header-subtitle {
        font-size: var(--f-m);
        max-width: none;
        color: inherit;
    }

    .s3-4 {
        margin-top: 50rem;
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
    }

    .s3-4-1 {
        grid-column: 1/5;
        padding-bottom: 5rem;
        border-bottom: var(--sl) solid var(--c8);
    }

    .s3-4-2 {
        grid-column: 5/12;
        grid-row-start: 2;
        margin-top: -.7em;
    }

    .s3-4-3 {
        grid-column: 5/10;
        grid-row-start: 3;
        margin-top: 40rem;
    }

    .s3-5 {
        position: relative;
        z-index: 1;
        padding: 120rem var(--wr);
        min-height: calc(var(--app-height) - var(--headroom-height));
        display: flex;
        flex-direction: column;
    }

    .s3-5::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: linear-gradient(var(--c2), transparent);
        opacity: .7;
    }

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

    .s4-2 {
        grid-column: 1/4;
    }

    .s4-3 {
        grid-column: 5/9;
        overflow: hidden;
        border-radius: var(--br1);
    }

    .s4-4 {
        grid-column: 9/-1;
        padding-left: 60rem;
        color: var(--c9);
    }

    .s5-1 .section-header-title {
        grid-column: 5/-1;
    }

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

    .s6-2 {
        grid-column: 1/5;
    }

    .s6-3 {
        grid-column: 5/10;
    }

    .s6-3-2 {
        margin-top: 20rem;
        color: var(--c9);
        font-size: var(--f-s);
    }

    .s6-4 {
        grid-column: 1/5;
    }

    .s6-4-1 {
        max-width: 250rem;
    }

    .s6-5 {
        grid-column: 5/10;
    }

    .s6-5-1 {
        margin-bottom: 15rem;
        color: var(--c6);
    }

    .s6-5-2 {
    }

    .s7-1 .section-header-title {
        grid-column: 5/9;
    }

    .s7-1 .section-header-subtitle {
        grid-column: 5/9;
    }

    .s7-3 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
        align-items: flex-start;
    }

    .s7-3:not(:first-child) {
        margin-top: 20rem;
    }

    .s7-4 {
        grid-column: 1/5;
        padding-top: 40rem;
    }

    .s7-5 {
        grid-column: 5/10;
        display: flex;
        position: relative;
    }

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

    .s7-6 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s7-7 {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        display: flex;
        align-items: flex-end;
        width: 100%;
        height: var(--sl);
        top: 50%;
        transition: opacity 1s 0s;
    }

    .s7-7-1 {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-image: url(../img/pin.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
        width: 60rem;
        height: 90rem;
    }

    .s7-7-2 {
        width: calc((100% - 4 * var(--gap)) / 5 * 6.5 + var(--gap) * 6);
        background-image: linear-gradient(to right, var(--c8), transparent);
        flex: none;
        position: absolute;
        right: 50%;
        background-repeat: no-repeat;
        background-size: 100% var(--sl);
        background-position: bottom;
        clip-path: inset(0 0% 0 0);
        transition: clip-path 1s 1.5s;
    }

    .s7-8 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        clip-path: inset(0 0 0% 0);
        transition: clip-path 1s;
        overflow: hidden;
    }

    .s7-8::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background-image: linear-gradient(to right, var(--c0), transparent, transparent, transparent, var(--c0)), linear-gradient(to bottom, var(--c0), transparent, transparent, transparent, var(--c0));
    }

    .s7-8-1 {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 1px;
    }

    .s7-6.active {
        z-index: 2;
    }

    .s7-6:not(.active) .s7-8 {
        clip-path: inset(0 0 100% 0);
        transition-delay: 1s;
    }

    .s7-6:not(.active) .s7-7 {
    }

    .s7-6:not(.active) .s7-7-2 {
        clip-path: inset(0 100% 0 0);
        transition-delay: 0s;
    }

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

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

    .s8-3 {
        grid-column: 1/5;
    }

    .s8-4 {
    }

    .s8-5 {
        grid-column: 5/-1;
        display: flex;
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
    }

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

    .s8-6 {
        grid-column: 5/11;
        margin-top: 15rem;
        color: var(--c9);
    }

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

    .s9-2 {
        grid-column: 1/5;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 160rem;
    }

    .s9-3 {
        grid-column: 5/10;
    }

    .s9-6 {
        margin-top: 30rem;
        color: var(--c7);
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
    }

    .s9-6-1:not(:last-child)::after {
        content: "/";
        padding: 0 10rem;
    }

    .s9-7-2 {
        margin-top: 40rem;
    }

    .s9-8 {
        margin-top: 50rem;
    }

    .s9-8-1 {
        max-width: 420rem;
        color: var(--c9);
    }

    .s9-8-2 {
        margin-top: 15rem;
    }

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

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

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

    .s11-2 {
        grid-column: 1/4;
        padding: 80rem 0;
    }

    .s11-2 ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .s11-2 li {
        position: relative;
        padding-bottom: 5rem;
        transition: all .25s;
        margin-bottom: 12rem;
    }

    .s11-2 li::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: currentColor;
        opacity: .4;
        height: var(--sl);
        transition: transform .25s;
        will-change: transform;
        transform-origin: left;
    }

    .s11-2 li:not(.active) {
        margin-bottom: 0;
        color: var(--c7);
    }

    .s11-2 li:not(.active)::before {
        transform: scaleX(0);
    }

    .s11-3 {
        grid-column: 5/-1;
        padding: 80rem 0 120rem;
        position: relative;
        overflow: hidden;
        margin-top: -80rem;
    }

    .s11-3::before,
    .s11-3::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 100rem;
        pointer-events: none;
        z-index: 2;
    }

    .s11-3::before {
        top: 0;
        background-image: linear-gradient(var(--c0), transparent);
    }

    .s11-3::after {
        bottom: 0;
        background-image: linear-gradient(transparent, var(--c0));
    }

    .s11-3 .swiper {
        overflow: visible;
    }

    .s11-5 {
        display: none;
    }

    .s11-6 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 30rem;
        padding: 30rem 0;
    }

    .s12 .section-header-subtitle {
        max-width: 650rem;
    }

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

    .s12-2 {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-gap: 1px;
        padding: 1px;
    }

    .s12-3 {
        position: relative;
        display: flex;
        margin: 0;
    }

    .s12-3::before,
    .s12-3::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: -1px;
        box-shadow: inset 0 0 0 1px var(--c12);
        border-radius: var(--br2);
        pointer-events: none;
        user-select: none;
    }


    .s12-4 {
        grid-column: 5/-1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: 1px;
        padding: 1px;
    }

    .s12-5 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 25rem 30rem 40rem;
    }

    .s12-5-1 {
        background-color: var(--c2);
        border-radius: 50%;
        width: max(35px, 40rem);
        height: max(35px, 40rem);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5rem;
    }

    .s12-5-2 {
        margin-top: 50rem;
        font-weight: 400;
        color: var(--c9);
    }

    .s12-6 {
        position: relative;
        display: flex;
        margin: 0 auto;
        width: 100%;
        max-width: 180rem;
    }

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


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

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

    .s13-2 {
        display: flex;
        width: 100%;
        position: relative;
        border-radius: var(--br1);
        overflow: hidden;
        will-change: transform;
        transition: transform .25s;
        transform-origin: right bottom;
    }

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

    .s13-2::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--c2);
        z-index: 1;
        opacity: .7;
        transition: opacity .25s;
    }

    .s13-3 {
        grid-column: 5/12;
    }

    .s13-3 .swiper {
        overflow: visible;
        margin: 0 calc(var(--gap) / -2);
    }

    .s13-3 .swiper-wrapper {
        align-items: flex-end;
    }

    .s13-3 .swiper-slide {
        padding: 0 calc(var(--gap) / 2);
    }

    .s13-3 .swiper-slide-active .s13-2 {
        transform: scale(1);
    }

    .s13-3 .swiper-slide-active .s13-2::after {
        opacity: 0;
    }

    .s13-3 .swiper-slide-active ~ .swiper-slide .s13-2 {
        transform-origin: left bottom;
    }

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

    .s14-1 {
        display: flex;
        align-items: center;
        background-color: var(--c2);
        color: var(--c0);
        position: relative;
        margin: 0 var(--awr);
        padding: 0 var(--wr);
    }

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

    .s14-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s14-2 .swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s14-3 {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
        padding: 120rem 0;
        width: 100%;
    }

    .s14-4 {
        grid-column: 5/9;
    }

    .s14-4-2 {
        margin-top: 30rem;
    }

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

    .s15-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--gap);
        align-items: flex-end;
        grid-column: 5/-1;
    }

    .s15-3 {
        position: relative;
        overflow: hidden;
        display: flex;
        border-radius: var(--br1);
    }

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

    .s15-4 {
        padding-left: 60rem;
    }

    .s15-4-2 {
        margin-top: 10rem;
    }

    .s15-4-3 {
        margin-top: 40rem;
        color: var(--c9);
    }

    .s15-4-4 {
        margin-top: 55rem;
    }

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

    .s16-2 {
        grid-column: 1/-1;
        margin-bottom: 20rem;
    }

    .s16-2 .section-header-subtitle {
        max-width: none;
    }

    .s16-3 {
        position: relative;
        overflow: hidden;
        display: flex;
        border-radius: var(--br1);
        min-height: 400rem;
    }

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

    .s16-3::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: linear-gradient(transparent, var(--c2));
        opacity: .8;
    }

    .s16-4 {
        grid-column: 5/-1;
        display: grid;
        grid-gap: var(--gap);
        grid-template-columns: 1fr 1fr;
    }

    .s16-5 {
    }

    .s16-6 {
        grid-column: 1/3;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 30rem;
    }

    .s16-7-1 {
        font-size: var(--f-b);
        letter-spacing: -.04em;
    }

    .s16-7-2 {
        color: var(--c6);
        margin-top: 10rem;
    }

    .s16-8 {
        grid-column: 5/11;
        color: var(--c9);
    }

    .s16-8:not(:last-child) {
        margin-bottom: 25rem;
    }

    .s17-1 {
        overflow: hidden;
        position: relative;
        display: flex;
        border-radius: var(--br1);
        --offset: 0;
    }

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

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

    .s17-1::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--offset) * 1%);
        width: 0;
        background-color: var(--c0);
        z-index: 2;
        margin-left: 0;
    }

    .s17-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .s17-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        clip-path: inset(0 0 0 calc(var(--offset) * 1%));
    }

    .s17-5 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
    }

    .s17-6 {
        grid-column: 1/-1;
        position: relative;
    }

    .s17-7 {
        grid-column: 5/11;
        margin-top: 20rem;
        order: -1;
        color: var(--c9);
    }

    .s17-8 {
        position: absolute;
        top: 25%;
        left: 0;
        height: 50vh;
        z-index: 2;
        opacity: 0;
        width: 100%;
        pointer-events: none;
    }

    .s17-1 .swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s18-1 {
        display: flex;
        width: 100%;
        overflow: hidden;
        position: relative;
        background-color: var(--c2);
        color: var(--c0);
        border-radius: var(--br1);
        align-items: flex-end;
    }

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

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

    .s18-2 .swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s18-2::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(transparent, var(--c2));
        opacity: 1;
        z-index: 1;
    }

    .s18-3 {
        position: relative;
        z-index: 1;
        margin: 30rem 50rem;
        overflow: hidden;
    }

    .s18-3::before,
    .s18-3::after {
        content: "";
        border: var(--sl) solid;
        border-radius: .25em;
        width: 15rem;
        position: absolute;
        bottom: 0;
        height: 75%;
        z-index: 1;
    }

    .s18-3::before {
        clip-path: inset(0 50% 0 0);
        left: 0;
    }

    .s18-3::after {
        clip-path: inset(0 0 0 50%);
        right: 0;
    }

    .s18-3 .swiper {
        mask-image: linear-gradient(90deg, transparent, black, transparent);
    }

    .s18-3 .swiper-slide {
        width: auto;
        padding: 5rem 0;
    }

    .s18-4 {
        white-space: nowrap;
        margin: 0 100rem;
        will-change: transform;
        transition: transform .15s;
        transform-origin: bottom;
        font-size: var(--f-m);
    }

    .s18-5 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 20rem;
        z-index: 1;
    }

    .s18-5-1 {
        margin: 0 auto;
        width: 0;
        height: var(--sl);
        background-color: var(--c0);
        transition: width .15s;
    }

    .s18-3 .swiper-slide:not(.swiper-slide-active) .s18-4 {
        transform: scale(.75);
        opacity: .6;
        cursor: pointer;
    }

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

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

    .s19-1 {
        min-height: var(--app-height);
        padding: var(--headroom-height) var(--wr) 0;
        margin: 0 var(--awr);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .s19-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: .1;
        overflow: hidden;
    }

    .s19-2::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30%;
        background-image: linear-gradient(transparent, var(--c0));
        z-index: 1;
    }

    .s19-3 {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 1;
        padding: 120rem 0;
        align-items: center;
    }

    .s19-4 {
        max-width: 1150rem;
        text-align: center;
    }

    .s19-5 {
        margin-top: 20rem;
        font-size: var(--f-m);
        max-width: 600rem;
        text-align: center;
    }

    .s19-6 {
        margin-top: 50rem;
        max-width: 600rem;
        width: 100%;
    }

    .s20-1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 60rem var(--gap);
    }

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

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

    .s20-4 ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: .75em var(--gap);
    }

    .s21 {
        background-color: var(--c2);
        color: var(--c0);
    }

    .s21:first-child {
        margin-top: 0;
    }

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

    .s21-1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: var(--app-height);
    }

    .s21-2 {
        padding: 25rem 0;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 50rem;
        grid-template-rows: 1fr auto 1fr;
    }

    .s21-3 {
        position: relative;
        margin-right: var(--awr);
    }

    .s21-3 img {
        object-position: top left;
    }

    .s21-5 {
        display: flex;
        flex-direction: column;
        margin: auto;
        padding-right: var(--wr);
        max-width: 550rem;
    }

    .s21-5-1 .title {
    }

    .s21-5-2 {
        font-size: var(--f-m);
        margin-top: 40rem;
    }

    .s21-5-3 {
        margin-top: 40rem;
    }

    .s404 {
        overflow: hidden;
    }

    .s404:first-child {
        margin-top: 0;
    }

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

    .s404-1 {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: var(--gap);
        align-items: flex-start;
        padding: 160rem 0;
    }

    .s404-4 {
        margin-top: 15rem;
        color: var(--c9);
    }

    .s404-5 {
        margin-top: 50rem;
        display: grid;
        grid-template-columns: auto;
        grid-gap: var(--gap);
    }

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

    .page-header-subtitle b::-moz-selection,
    .section-header-subtitle b::-moz-selection,
    .layer b::-moz-selection,
    .s3 *::-moz-selection,
    .s14 *::-moz-selection,
    .s18 *::-moz-selection,
    .s21 *::-moz-selection,
    .footer *::-moz-selection {
        background-color: var(--c0);
        color: var(--c2);
        -webkit-text-fill-color: var(--c2);
    }

    .page-header-subtitle b::selection,
    .section-header-subtitle b::selection,
    .layer b::selection,
    .s3 *::selection,
    .s14 *::selection,
    .s18 *::selection,
    .s21 *::selection,
    .footer *::selection {
        background-color: var(--c0);
        color: var(--c2);
        -webkit-text-fill-color: var(--c2);
    }


    .card-1 .card-footer a,
    .card-3 .card-footer a,
    .s1-6-1 a,
    .s9-4:first-child .s9-6-1 a,
    .s15-4-4 a,
    .s20-4 a {
        font-weight: 400;
        transition: background-size .25s;
        background-repeat: no-repeat;
        background-image: linear-gradient(currentColor, currentColor);
        display: inline;
        padding-bottom: .2em;
        background-size: 100% var(--sl);
        background-position: left bottom;
    }

}

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

    :root {

        --wr: 15rem;

        --gap: 60rem;

        --br1: 8rem;
        --br2: 12rem;

        --btn: 40rem;

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


        --f-s: 14rem;
        --f-d: 16rem;
        --f-m: 16rem;
        --f-b: 22rem;
        --f-l: 40rem;
        --f-xl: 40rem;

        --mw: 640rem;


    }

    html {
        font-size: 1px;
    }

    .desktop {
        display: none !important;
    }

    .topbar {
        grid-template-columns: 1fr auto;
        padding: 15rem 0;
        position: relative;
    }

    .topbar::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: var(--sl);
        background-color: var(--c7);
        transition: margin .25s;
    }

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

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

    .header::before {
        height: 100%;
        background-image: linear-gradient(var(--c0), var(--c0));
    }

    .header.active .topbar::after {
        margin: 0 var(--awr);
    }

    .footer {
        padding: 50rem 0;
    }

    .footer-grid {
        grid-gap: 0 20rem;
        grid-template-areas: "f1 f1" "f2 f2" "f3 f3" "f4 f5" "f6 f6" "f7 f7" "f8 f8";
        grid-template-columns: 1fr auto;
    }

    .f2 {
        margin-top: 80rem;
    }

    .f2 .footer-nav ul {
        grid-template-columns: 1fr 1fr;
        grid-gap: 10rem;
    }

    .f3 {
        margin-top: 60rem;
        margin-bottom: 60rem;
    }

    .f6 {
        margin-top: 60rem;
    }

    .f7 {
        margin-top: 20rem;
    }

    .f8 {
        margin-top: 20rem;
        max-width: 290rem;
    }

    .badge-text {
        padding: 0;
    }

    .breadcrumbs {
        margin-top: 20rem;
        margin-bottom: 60rem;
    }

    .pagination {
        width: 100%;
    }

    .pagination-nav {
        margin: 0 auto;
    }

    .switch {
        width: 100%;
    }

    .switch-inner {
        width: 100%;
    }

    .selector-holder {
        width: 100%;
    }

    .verification-grid {
        grid-template-columns: auto;
        grid-gap: 15rem;
    }

    .verification-grid-item {
    }

    .verification-grid-item:nth-child(1) {
        padding: 0 10rem;
        border-right: none;
        border-bottom: var(--sl) solid var(--c8);
        padding-bottom: 15rem;
    }

    .verification-grid-item:nth-child(2) {
        padding: 0 10rem;
        grid-column: auto;
    }

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

    .card-1 .card-header {
        margin-bottom: 20rem;
    }

    .card-1 .card-info {
        flex-direction: column;
    }

    .card-1 .card-author::after {
        display: none;
    }

    .card-1 .card-date:not(:first-child) {
        margin-top: .5em;
    }

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

    .card-2::before {
        display: none;
    }

    .card-2 .card-header {
        bottom: auto;
        position: relative;
        display: flex;
        margin: 0 -20rem;
    }

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

    .card-2 .card-media {
        top: 0%;
    }

    .card-2 .card-media__front {
        display: none;
    }

    .card-2 .card-inner {
        padding: 0 20rem 20rem;
    }

    .card-2 .card-content {
        padding: 0 0 30rem;
    }

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

    .card-3 {
        padding: 30rem;
    }

    .card-3 .card-header {
        margin-bottom: 40rem;
    }

    .page-header {
        margin-bottom: 60rem;
    }

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

    .page-header-subtitle:last-child,
    .page-header-title:last-child {
        padding-bottom: 30rem;
    }

    .section-header {
        grid-gap: 0;
    }

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

    .section-header-pretitle {
        grid-column: auto;
        margin-bottom: 25rem;
    }

    .section-header-title {
        grid-column: auto;
    }

    .section-header-subtitle {
        grid-column: auto;
        margin-top: 20rem;
    }

    .section-header-subtitle br {
        display: none;
    }

    .section-header-media::before {
        padding-top: 100%;
    }

    .section {
        margin-bottom: 120rem;
    }

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


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

    .s1-2 {
        grid-column: auto;
        grid-row: auto;
    }

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

    .s1-4 {
        grid-column: auto;
        grid-row: auto;
        grid-gap: 60rem;
    }

    .s1-4:not(:first-child) {
        margin-top: 30rem;
    }

    .s1-5 {
        grid-column: auto;
        grid-row: auto;
        margin-top: 60rem;
        top: auto;
        position: static;
    }

    .s2-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .s3-4-1 {
        grid-column: auto;
        padding-bottom: .5em;
    }

    .s3-4-2 {
        grid-column: auto;
        margin-top: .5em;
        grid-row: auto;
    }

    .s3-4-3 {
        grid-column: auto;
        grid-row: auto;
    }

    .s3-5 {
        padding: 60rem var(--wr) 80rem;
    }

    .s4-1 {
        grid-gap: 0;
    }

    .s4-2 {
        grid-column: auto;
    }

    .s4-2-2 {
        margin-top: 20rem;
    }

    .s4-3 {
        grid-column: auto;
        margin-top: 30rem;
    }

    .s4-4 {
        grid-column: auto;
        margin-top: 35rem;
        padding: 0;
    }

    .s5-1 .section-header-title {
        grid-column: auto;
    }

    .s6-1 {
        grid-gap: 0;
    }

    .s6-2 {
        grid-column: auto;
        order: -2;
        margin-bottom: 25rem;
    }

    .s6-3 {
        grid-column: auto;
    }

    .s6-4 {
        grid-column: auto;
        order: -1;
        margin-bottom: 60rem;
    }

    .s6-4-1 {
        max-width: 290rem;
    }

    .s6-5 {
        grid-column: auto;
        margin-top: 60rem;
    }

    .s7-1 .section-header-title,
    .s7-1 .section-header-subtitle {
        grid-column: auto;
    }

    .s7-4 {
        grid-column: auto;
        padding-top: 0;
    }

    .s7-5 {
        grid-column: auto;
        margin-top: 20rem;
    }

    .s7-7-1 {
        width: 35rem;
        height: 50rem;
    }

    .s7-7-2 {
        display: none;
    }

    .s8-3 {
        grid-column: auto;
        margin-bottom: 30rem;
    }

    .s8-5 {
        grid-column: auto;
    }

    .s8-5::before {
        padding-top: 60%;
    }

    .s8-6 {
        grid-column: auto;
        margin-top: 25rem;
    }

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

    .s9-2 {
        grid-column: auto;
        order: 1;
        grid-gap: 40rem;
    }

    .s9-3 {
        grid-column: auto;
    }

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

    .s9-7-2 {
        margin-top: 20rem;
    }

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

    .s9-8-2 {
        margin-top: 20rem;
    }

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

    .s11-2 {
        display: none;
    }

    .s11-3 {
        grid-column: auto;
        margin: 0;
        padding: 0;
    }

    .s11-3::before,
    .s11-3::after {
        display: none;
    }

    .s11-3 .swiper-wrapper {
        flex-direction: column;
    }

    .s11-3 .swiper-slide:not(:first-child) {
        margin-top: 60rem;
    }

    .s11-5 {
        display: block;
        margin-bottom: 25rem;
    }

    .s11-6 {
        grid-template-columns: auto;
        grid-gap: 30rem;
        padding: 0;
    }

    .s12-2,
    .s12-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-column: 1/-1;
    }

    .s12-3 {
        padding: 20rem;
    }

    .s12-5 {
        padding: 0;
    }

    .s12-6 {
        max-width: 120rem;
    }

    .s12-3:nth-child(4n + 1)::before,
    .s12-3:nth-child(4n + 2)::before {
        display: none;
    }

    .s12-3:nth-child(4n + 1)::after,
    .s12-3:nth-child(4n + 2)::after {
        clip-path: inset(0% calc(100% - var(--br2)) 0% 0%);
    }

    .s12-3:nth-child(4n + 3)::before,
    .s12-3:nth-child(4n + 4)::before {
        clip-path: inset(0% 0% 0% var(--br2));
    }

    .s12-3:nth-child(4n + 3)::after,
    .s12-3:nth-child(4n + 4)::after {
        display: none;
    }

    .s12-3:nth-child(1)::before {
        clip-path: inset(0% 0% var(--br2) 0%);
        display: block;
    }

    .s12-3:nth-child(1)::after {
        clip-path: inset(calc(100% - var(--br2)) var(--br2) 0% 0%);
    }

    .s12-3:nth-child(2)::after {
        clip-path: inset(calc(100% - var(--br2)) var(--br2) 0% 0%);
    }

    .s12-3:nth-child(4n + 1):nth-last-child(2)::before {
        clip-path: inset(var(--br2) 0% 0% var(--br2));
        display: block;
    }

    .s12-3:nth-child(4n + 2):nth-last-child(1)::after {
        clip-path: inset(0% calc(100% - var(--br2)) calc(100% - var(--br2)) 0%);
    }

    .s12-3:nth-child(4n + 3):nth-last-child(2)::before {
        clip-path: inset(0% 0% var(--br2) var(--br2));
    }

    .s12-3:nth-child(4n + 4):nth-last-child(1)::after {
        clip-path: inset(calc(100% - var(--br2)) calc(100% - var(--br2)) 0% 0%);
        display: block;
    }

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

    .s14-1 {
        min-height: var(--app-height);
    }

    .s14-4 {
        grid-column: auto;
    }

    .s15-2 {
        grid-column: auto;
        grid-template-columns: auto;
        grid-gap: 25rem;
    }

    .s15-4 {
        padding: 0;
    }

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

    .s16-2 {
        margin-bottom: 20rem;
    }

    .s16-3 {
        min-height: 0;
    }

    .s16-3::before {
        padding-top: 100%;
    }

    .s16-4 {
        grid-column: auto;
        grid-template-columns: auto;
        grid-gap: 60rem;
    }

    .s16-7 {
        margin-top: 25rem;
    }

    .s16-8 {
        grid-column: auto;
        order: 1;
        margin: 25rem 0 0;
    }

    .s17-1::before {
        padding-top: 115%;
    }

    .s17-1::after {
        display: none;
    }

    .s17-3 {
        display: none;
    }

    .s17-5 {
        margin-top: 25rem;
        grid-gap: 25rem;
    }

    .s17-6 {
        order: -1;
    }

    .s17-7 {
        grid-column: auto;
        margin: 0;
        max-width: 320rem;
    }

    .s18-1 {
        flex-direction: column;
        background-color: transparent;
        color: var(--c1);
        border-radius: 0;
        overflow: visible;
    }

    .s18-1::before {
        display: none;
    }

    .s18-2 {
        position: relative;
        display: flex;
        height: auto;
        opacity: 1;
        border-radius: var(--br1);
        overflow: hidden;
    }

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

    .s18-3 {
        width: 100%;
        margin: 20rem 0 0;
    }

    .s18-3::before,
    .s18-3::after {
        height: 100%;
    }

    .s18-4 {
        margin: 0 40rem;
        text-align: center;
    }

    .s18-5 {
        bottom: auto;
        top: 100%;
    }

    .s18-5-1 {
        background-color: var(--c1);
    }

    .s18-3 .swiper-slide {
        padding: 0;
    }

    .s18-3 .swiper-slide:not(.swiper-slide-active) .s18-4 {
        transform: scale(1);
    }

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

    .s19-3 {
        padding: 100rem 0;
        align-items: flex-start;
    }

    .s19-4 {
        text-align: left
    }

    .s19-5 {
        text-align: left
    }

    .s19-6 {
        margin-top: 20rem;
    }

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

    .s20-4 {
        margin-top: 15rem;
    }

    .s20-4 ul {
        grid-template-columns: auto;
    }

    .s21:first-child {
        margin-top: 0;
    }

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

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

    .s21-2 {
        padding: 15rem 0;
    }

    .s21-3 {
        display: none;
    }

    .s21-4 .topbar-logo {
        max-width: none;
    }

    .s21-5 {
        padding: 0;
    }

    .s404-1 {
        grid-template-columns: auto;
        grid-gap: 0;
        padding: 0 0 100rem;
    }

    .s404-5 {
        margin-top: 40rem;
        grid-gap: 20rem;
    }

    .s404-6 {
        top: auto;
        bottom: 0;
        transform: translateY(2%);
    }

    .s404-7 {
        margin-bottom: 60rem;
    }

    .popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: var(--c0);
        color: var(--c1);
        z-index: 999;
        transition: all .5s;
        bottom: 0;
    }

    .popup:not(.active) {
        transform: translateY(100%);
    }

    .popup-inner {
        padding: 15rem 0 20rem;
        min-height: var(--app-height);
        overflow: auto;
        display: flex;
        flex-direction: column;
    }

    .popup-header {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 20rem;
        align-items: center;
        padding-bottom: 20rem;
        border-bottom: var(--sl) solid var(--c7);
        margin-bottom: 30rem;
    }

    .popup-header-logo {
        max-width: 290rem;
    }

    .popup-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24rem;
        height: 24rem;
    }

    .popup-content {
        flex: auto;
    }

    .popup-footer {
        margin-top: 40rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .popup-footer-action {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 15rem;
        width: 100%;
    }

    .popup-social {
        overflow: hidden;
        margin: 0 auto;
    }

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

    .popup-social ul {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        margin: -5rem;
    }

    .popup-social li {
        margin: 5rem;
    }

    .popup-social li:not(:last-child)::after {
        content: "/";
        padding-left: 10rem;
        color: var(--c7);
    }

    .popup-social li:first-child::before,
    .popup-social li:last-child::after {
        content: "\a0";
        border: var(--sl) solid;
        display: inline-block;
        border-radius: .25em;
        width: 15rem;
        color: var(--c7);
    }

    .popup-social li:first-child::before {
        clip-path: inset(0 50% 0 0);
    }

    .popup-social li:last-child::after {
        clip-path: inset(0 0 0 50%);
    }

    .menu ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 1.5em;
        text-align: center;
    }

    .popup-overlay {
        pointer-events: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--c2);
        transition: opacity .5s;
        opacity: 0;
    }

    .popup.active ~ .popup-overlay {
        opacity: 1;
    }

}


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

    .mobile {
        display: none !important;
    }

    .footer-grid {
        grid-template-areas:
        "f1 f1 f1 f1 . . . . . . . f5"
        "f2 f2 f2 f2 f2 f2 . f3 f3 . f4 f4"
        "f8 f8 f8 f8 f8 f8 . f7 f7 f7 f6 f6";
    }

    .f2 .footer-nav ul {
        grid-auto-flow: dense;
    }

    .f2 .footer-nav li:nth-child(odd):not(.last-col) {
        grid-column: 1/2;
    }

    .f2 .footer-nav li:nth-child(even):not(.last-col) {
        grid-column: 2/3;
    }

    .last-col {
        order: -1;
        grid-column: 3/4;
    }

    .s1-3 {
        order: -1;
    }

    .s1-5 {
        order: -1;
    }

    .s10-1-1 {
        grid-column-end: span 2;
    }

    .s10-1-1:nth-child(1):nth-last-child(1) {
        grid-column: 3/5;
    }

    .s10-1-1:nth-child(1):nth-last-child(2) {
        grid-column: 2/4;
    }

    .s12-4 .s12-3:nth-child(6n + 1)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 1)::after {
        clip-path: inset(var(--br2) var(--br2) 0% 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 2) {
        margin-bottom: 10rem;
    }

    .s12-4 .s12-3:nth-child(6n + 2)::before {
        display: none;
    }

    .s12-4 .s12-3:nth-child(6n + 2)::after {
        clip-path: inset(var(--br2) 0% 0% 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 3)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 3)::after {
        clip-path: inset(var(--br2) 0% 0% calc(100% - var(--br2)));
    }

    .s12-4 .s12-3:nth-child(6n + 4)::before {
        display: none;
    }

    .s12-4 .s12-3:nth-child(6n + 4)::after {
        clip-path: inset(0% 0% var(--br2) calc(100% - var(--br2)));
    }

    .s12-4 .s12-3:nth-child(6n + 5)::before {
        display: none;
    }

    .s12-4 .s12-3:nth-child(6n + 5)::after {
        clip-path: inset(calc(100% - var(--br2)) 0% 0% 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 6)::before {
        clip-path: inset(0% var(--br2) var(--br2) 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 6)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 1)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 1)::after {
        clip-path: inset(var(--br2) calc(100% - var(--br2)) 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 2)::before {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 2)::after {
        clip-path: inset(var(--br2) 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 3)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 3)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 4)::before {
        clip-path: inset(var(--br2) var(--br2) 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 4)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 5)::before {
        clip-path: inset(0% 0% 0% var(--br2));
    }

    .s12-2 .s12-3:nth-child(12n + 5)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 6)::before {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 6)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 7)::before {
        clip-path: inset(0% 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 7)::after {
        clip-path: inset(0% 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 8)::before {
        clip-path: inset(0% 0% 0% calc(100% - var(--br2)));
    }

    .s12-2 .s12-3:nth-child(12n + 8)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 9)::before {
        clip-path: inset(0% calc(100% - var(--br2)) var(--br2) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 9)::after {
        clip-path: inset(var(--br2) 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 10)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 10)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 11)::before {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 11)::after {
        clip-path: inset(var(--br2) 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 12)::before {
        clip-path: inset(0% var(--br2) calc(100% - var(--br2)) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 12)::after {
        display: none;
    }

    .s13-2 {
        transform: scale(.56);
    }

    .s16-5:nth-child(odd):last-child {
        grid-column: 1/-1;
    }

    .s16-5 .s16-7 {
        display: none;
    }

}

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


    html {
        font-size: 1px;
    }


}

/* hover animations */

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

    .button,
    .go-top {
        transition: all .25s;
    }

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

    .button__secondary:hover {
        border-color: var(--c1);
        color: var(--c0);
        background-color: var(--c1);
    }

    .button__secondary.button__contrast:hover {
        border-color: var(--c0);
        color: var(--c1);
        background-color: var(--c0);
    }

    .go-top:hover {
        background-color: var(--c0);
        border-color: var(--c0);
        color: var(--c2);
    }

    .card-1 .card-media {
        transition: transform .25s;
        will-change: transform;
    }

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

    .s20-3 a,
    .topbar-nav a,
    .f6 a,
    .f7 a,
    .footer-nav a {
        transition: background-size .25s;
        background-size: 0 var(--sl);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-image: linear-gradient(currentColor, currentColor);
        display: inline;
        padding-bottom: .2em;
    }

    .s20-3 a {
        padding-bottom: 0;
    }

    .s20-3 a:hover,
    .topbar-nav .current a,
    .f6 a:hover,
    .f7 a:hover,
    .footer-nav a:hover,
    .topbar-nav a:hover {
        background-size: 100% var(--sl);
        background-position: left bottom;
    }

    .card-1 .card-footer :hover,
    .card-3 .card-footer :hover,
    .s1-6-1 :hover,
    .s15-4-4 :hover,
    .s20-4 :hover {
        background-size: 0 var(--sl);
        background-position: right bottom;
    }

    .card-2 .card-content {
        transition: transform .25s;
    }

    .card-2 .card-footer {
        transition: all .25s;
    }

    .card-2 .card-media {
        transition: opacity .25s;
    }

    .card-2:not(:hover) .card-content {
        transform: translateY(var(--btn));
    }

    .card-2:not(:hover) .card-footer {
        transform: translateY(var(--btn));
        opacity: 0;
    }


    .card-2:hover .card-media__back,
    .card-2:not(:hover) .card-media__front {
        opacity: 0;
    }

    .breadcrumbs li:not(:last-child) a,
    .textbox a,
    .s9-6-1 a,
    .s11-2 li:not(.active),
    .pagination-nav li:not(.current) a {
        transition: color .15s;
    }

    .breadcrumbs li:not(:last-child) a:hover,
    .textbox a:hover,
    .s9-6-1 a:hover,
    .s11-2 li:not(.active):hover,
    .pagination-nav li:not(.current) a:hover {
        color: var(--c1);
    }

    .s12-6 {
        transition: filter .25s;
    }

    .s12-6:not(:hover) {
        filter: grayscale(1);
    }

    .s16-3 {
        transition: background-color .5s;
        background-color: var(--c2);
    }

    .s16-3 img {
        opacity: .8;
    }

    .s16-3::after,
    .s16-3 img {
        transition: opacity .5s;
    }

    .s16-3:hover {
        background-color: transparent;
    }

    .s16-3:hover::after {
        opacity: 0;
    }

    .s16-3:hover img {
        opacity: 1;
    }


    .s17-3 {
        transition: clip-path .2s linear;
    }

    /*
    .s17-1::after{transition: left .5s;}
    .s17-3{transition: clip-path 1s ease-in-out;}
    .s17-1:hover::after{}
    .s17-1.hovered{pointer-events: none;}
    */
    .s18-2::after {
        transition: all .5s;
    }

    .s18-4,
    .pagination-arrow,
    .selector-option {
        transition: opacity .5s;
    }

    .pagination-arrow.disabled,
    .pagination-arrow:not(:hover) {
        opacity: .5;
    }

    .s18-1:hover .s18-2::after {
        opacity: 1;
        transform: translateY(25%);
    }

    .s18-3 .swiper-slide:not(.swiper-slide-active) .s18-4:hover,
    .selector-option:hover {
        opacity: 1;
    }

}

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

/*--br1: 8rem;*/
/*--br2: 12rem;*/

/*--btn: max(35px, 40rem);*/

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

/*--altfont: 'PPEditorialNew', serif;*/

/*--f-s: max(14px, 14rem);*/
/*--f-d: max(14px, 16rem);*/
/*--f-m: max(14px, 22rem);*/
/*--f-b: max(14px, 24rem);*/
/*--f-l: max(14px, 52rem);*/
/*--f-xl: max(14px, 72rem);*/

/*--mw: 3000px;*/


/*}*/


/* globals */

@media screen {

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

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

    .altfont,
    .title__default,
    .title__large {
        font-family: var(--altfont);
        font-weight: 400;
        letter-spacing: -.04em;
        line-height: 1.1;
    }

    .popup-active {
    }

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

    .upc {
        text-transform: uppercase;
        letter-spacing: -.04em;
        font-weight: 400;
    }

    .preloader {
        background-color: var(--c0);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        visibility: hidden;
        opacity: 0;
        transition: all .25s 1s;
        display: flex;
        color: var(--c1);
        will-change: transform;
    }

    .loading {
        pointer-events: none;
    }

    .loading .preloader {
        transition-duration: 0s;
        opacity: 1;
        visibility: visible;
    }

    .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;
        position: relative;
    }

    .button:not(.fill) {
        overflow: hidden;
        position: relative;
    }

    .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__default {
        padding: 0 20rem;
        border-radius: var(--br1);
        height: var(--btn);
        background-color: var(--c2);
        color: var(--c0);
        border: var(--sl) solid transparent;
    }

    .button__default .button-text {
        text-transform: uppercase;
        letter-spacing: -.04em;
        font-weight: 400;
    }

    .button__default.button__contrast {
        background-color: var(--c0);
        color: var(--c1);
    }

    .button__secondary {
        padding: 0 20rem;
        border-radius: var(--br1);
        height: var(--btn);
        border: var(--sl) solid var(--c7);
        color: var(--c1);
    }

    .button__secondary .button-text {
        text-transform: uppercase;
        letter-spacing: -.04em;
        font-weight: 400;
    }

    .button__wide {
        width: 100%;
    }

    .title {
        width: 100%;
    }

    .title__small,
    .textbox h2 {
        line-height: 1.3;
        letter-spacing: -.06em;
        font-size: var(--f-b);
    }

    .title__default {
        font-size: var(--f-l);
    }

    .title__large {
        font-size: var(--f-xl);
    }

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

    .header {
        position: sticky;
        z-index: 10;
        top: 0;
        transition: background-color .25s;
    }

    .header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 150%;
        z-index: -1;
        background-image: linear-gradient(var(--c0), transparent);
        opacity: 0;
        transition: opacity .25s;
        pointer-events: none;
    }

    .header.active::before {
        opacity: 1;
    }


    .topbar {
        display: grid;
        padding: 25rem 0;
        grid-template-columns: auto 1fr auto;
        grid-gap: 50rem;
        align-items: center;
    }

    .topbar-logo {
        max-width: 240rem;
        width: 1000rem;
    }

    .topbar-nav {
        margin: 0 auto;
    }

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

    .topbar-action {
        display: grid;
        grid-gap: 10rem;
        grid-template-columns: 1fr 1fr;
    }

    .topbar-action .button__secondary {
        background-color: var(--c0);
    }

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

    .section {
        position: relative;
        z-index: 1;
        margin-bottom: 200rem;
    }

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

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

    .section-header {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
    }

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

    .section-header-pretitle {
        grid-column: 1/5;
    }

    .section-header-title {
        grid-column: 5/12;
    }

    .section-header-subtitle {
        grid-column: 5/11;
        margin-top: 20rem;
        max-width: 565rem;
        color: var(--c9);
    }

    .section-header-media {
        grid-column: 1/-1;
        margin-top: 30rem;
        border-radius: var(--br2);
        overflow: hidden;
        position: relative;
        display: flex;
    }

    .section-header-media::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 30%;
    }

    .section-header-media + .section-header-subtitle {
        margin-top: 30rem;
    }

    .footer {
        overflow: hidden;
        margin-top: 0;
        background-color: var(--c2);
        color: var(--c0);
        padding: 50rem 0 20rem;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 120rem var(--gap);
        align-items: flex-start;
    }

    .footer-nav-caption {
        margin-bottom: 35rem;
        font-weight: 400;
    }

    .footer-nav ul {
        display: grid;
        grid-gap: .75em var(--gap);
        align-items: flex-start;
    }

    .f1 {
        grid-area: f1;
    }

    .f2 {
        grid-area: f2;
    }

    .f2 .footer-nav ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .f3 {
        grid-area: f3;
    }

    .f4 {
        grid-area: f4;
    }

    .f5 {
        grid-area: f5;
        margin-left: auto;
    }

    .f6 {
        grid-area: f6;
    }

    .f7 {
        grid-area: f7;
    }

    .f7 ul {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -.25em;
    }

    .f7 li {
        margin: 0 .25em;
        display: inline-flex;
    }

    .f7 li:not(:last-child)::after {
        content: "|";
        padding-left: .5em;
    }

    .f8 {
        grid-area: f8;
    }

    .go-top {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: var(--sl) solid;
        width: max(45px, 50rem);
        height: max(45px, 50rem);
        padding: 16rem;
    }

    .bottombar-author {
        display: flex;
        align-items: baseline;
        color: var(--c6);
    }

    .bottombar-author a {
        color: var(--c0);
    }

    .dd-icon {
        width: 1em;
        height: 1.2em;
        margin: 0 .3em;
        opacity: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--c0);
    }

    .dd-icon .icon {
        width: 100%;
    }


    .breadcrumbs {
        margin-top: 15rem;
        overflow: hidden;
        font-size: var(--f-s);
        margin-bottom: 80rem;
    }

    .breadcrumbs ul {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        margin: -5rem;
    }

    .breadcrumbs li {
        margin: 5rem;
    }

    .breadcrumbs li:not(:last-child)::after {
        content: "/";
        padding-left: 10rem;
        color: var(--c7);
    }

    .breadcrumbs li:first-child::before,
    .breadcrumbs li:last-child::after {
        content: "\a0";
        border: var(--sl) solid;
        display: inline-block;
        border-radius: .25em;
        width: 15rem;
        color: var(--c7);
    }

    .breadcrumbs li:first-child::before {
        clip-path: inset(0 50% 0 0);
    }

    .breadcrumbs li:last-child::after {
        clip-path: inset(0 0 0 50%);
    }

    .breadcrumbs li:not(:last-child) a {
        color: var(--c7);
    }

    .badge {
        display: inline-grid;
        letter-spacing: -.04em;
        text-transform: uppercase;
        font-weight: 400;
        grid-template-columns: auto 1fr auto;
        grid-gap: 0;
    }

    .badge-text {
        padding: 3rem 0;
    }

    .badge:first-child::before,
    .badge:last-child::after {
        content: "\a0";
        border: var(--sl) solid;
        display: inline-block;
        border-radius: .25em;
        width: 15rem;
    }

    .badge:first-child::before {
        clip-path: inset(0 50% 0 0);
    }

    .badge:last-child::after {
        clip-path: inset(0 0 0 50%);
    }

    .textbox h2 {
        margin: 3em 0 1em;
        color: var(--c1);
    }

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

    .textbox h3 {
        font-weight: 500;
        margin: 2em 0 .65em;
        line-height: 1.3;
    }

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

    .textbox a {
        text-decoration: underline;
    }

    .textbox ul,
    .textbox ol {
        margin: 1em 0;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0;
        counter-reset: index;
    }

    .textbox ol {
        counter-reset: index;
    }

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

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

    .textbox li {
        position: relative;
        padding-left: 1.5em;
    }

    .textbox ul li::before {
        content: "\2022";
        position: absolute;
        top: 0;
        left: 0;
        width: 1.5em;
        text-align: center;
    }

    .textbox ol li::before {
        content: counter(index) ".";
        position: absolute;
        top: 0;
        left: 0;
        width: 1.5em;
        text-align: center;
        counter-increment: index;
    }

    .formbox {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 15rem;
        border-top: var(--sl) solid var(--c8);
        padding-top: 15rem;
    }

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

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

    .textfield-input {
        border-bottom: var(--sl) solid var(--c8);
        text-transform: uppercase;
        padding-bottom: 15rem;
        width: 100%;
        text-overflow: ellipsis;
        letter-spacing: -.04em;
        text-transform: uppercase;
        font-weight: 400;
        resize: none;
    }

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

    .textfield-msg {
        color: var(--c4);
        margin-top: 10rem;
        display: none;
        margin-bottom: 15rem;
    }

    .textfield-input:invalid ~ .textfield-msg {
        display: block;
    }

    .page-header {
        margin-bottom: 80rem;
    }

    .page-header-inner {
        border-bottom: var(--sl) solid var(--c7);
    }

    .page-header-title:last-child {
        padding-bottom: 40rem;
    }

    .page-header-subtitle {
        font-size: var(--f-m);
        color: var(--c9);
        margin-top: 40rem;
        max-width: 720rem;
    }

    .page-header-subtitle:last-child {
        padding-bottom: 80rem;
    }

    .page-header-subtitle b,
    .section-header-subtitle b,
    .layer b {
        position: relative;
        font-weight: inherit;
        color: var(--c0);
        background-color: var(--c2);
        padding: .15em .2em;
        margin: -.15em -.2em;
        display: inline;
        border-radius: .25em;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }

    .switch {
        border-radius: var(--br2);
        border: var(--sl) solid var(--c7);
        padding: 4rem;
        display: inline-flex;
    }

    .switch-inner {
        display: inline-grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0;
        position: relative;
    }

    .switch-indicator {
        background-color: var(--c2);
        border-radius: var(--br1);
        position: absolute;
        top: 0;
        left: 0;
        right: 50%;
        bottom: 0;
        z-index: -1;
        margin: 0;
        will-change: transform;
        transition: transform .25s;
    }

    .switch-value {
        padding: 0 30rem;
        display: flex;
        text-align: center;
        align-items: center;
        height: var(--btn);
        justify-content: center;
        transition: color .25s;
        cursor: pointer;
    }

    .switch-value.active {
        color: var(--c0);
        pointer-events: none;
    }

    .switch-value__1.active ~ .switch-indicator {
        transform: translateX(0%);
    }

    .switch-value__2.active ~ .switch-indicator {
        transform: translateX(100%);
    }

    .verification {
        border-bottom: var(--sl) solid var(--c8);
        padding-bottom: 15rem;
    }

    .verification-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-gap: var(--gap);
        align-items: center;
    }

    .verification-grid-item {
        padding: 5rem 0;
    }

    .verification-grid-item:nth-child(1) {
        border-right: var(--sl) solid var(--c8);
        padding-right: var(--gap);
    }

    .verification-grid-item:nth-child(2) {
        grid-column: 2/-1;
    }

    .verification-input {
        text-transform: uppercase;
        width: 100%;
        text-overflow: ellipsis;
        letter-spacing: -.04em;
        text-transform: uppercase;
        font-weight: 400;
        resize: none;
        color: var(--c9);
    }

    .selector {
        user-select: none;
        line-height: 1;
    }

    .selector-holder {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }

    .selector-holder-input {
        min-width: 0;
        text-overflow: ellipsis;
        flex: auto;
        width: 100%;
        color: var(--c9);
        pointer-events: none;
        height: 1em;
    }

    .selector-holder-icon {
        width: max(8px, 10rem);
        height: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        margin-left: 10rem;
    }

    .selector-list {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
        overflow: visible;
        width: 100%;
        user-select: none;
    }

    .selector-list-inner {
        background-color: var(--c9);
        color: var(--c0);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: -15rem -20rem;
        white-space: nowrap;
        padding: 15rem 20rem;
        display: flex;
        line-height: 1;
        border-radius: var(--br1);
        box-shadow: 0 0 0 2rem var(--c9), inset 0 0 7rem 0 var(--c7);
    }

    .selector-list-inner ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 1em;
        flex: auto;
    }

    .selector-list:not(.active) {
        display: none;
    }

    .selector-list .selector-holder-icon {
        transform: scaleY(-1);
    }

    .selector-option {
        position: relative;
    }

    .selector-option:not(.active) {
        cursor: pointer;
        opacity: .5;
    }

    .pagination {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        grid-gap: var(--gap);
    }

    .pagination-nav {
        font-weight: 400;
    }

    .pagination-nav ul {
        display: flex;
        flex-wrap: wrap;
    }

    .pagination-nav li {
        position: relative;
        padding: 10rem;
        z-index: 1;
    }

    .pagination-nav li::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: var(--c2);
        z-index: -1;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        width: 30rem;
        height: 30rem;
    }

    .pagination-nav li:not(.current)::before {
        display: none;
    }

    .pagination-nav li:not(.current) a {
        color: var(--c7);
    }

    .pagination-nav li.current a {
        pointer-events: none;
        color: var(--c0);
    }

    .pagination-arrow.disabled {
        pointer-events: none;
        opacity: .5;
    }

    .pagination-arrow a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: .5em;
        height: 1em;
    }

    .carousel-pagination-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel-pagination-container:not(:first-child) {
        margin-top: 15rem;
    }

    .carousel-pagination {
        top: 0;
        left: auto;
        bottom: auto !important;
        line-height: 0;
        position: relative;
        display: flex;
        justify-content: center;
        width: auto !important;
        margin: 0 10rem;
    }

    .carousel-pagination:first-child {
        margin-left: 0;
    }

    .carousel-pagination:last-child {
        margin-right: 0;
    }

    .swiper-pagination-bullet {
        width: max(8px, 8rem);
        height: max(8px, 8rem);
        border-radius: 999rem;
        margin: 0 3rem !important;
        transition: width .3s linear;
        background-color: var(--c2);
        opacity: 1;
        position: relative;
    }

    .swiper-pagination-bullet::before {
        content: "";
        border-radius: inherit;
        min-width: max(8px, 8rem);
        height: 100%;
        position: absolute;
        opacity: 0;
        width: 0%;
        background-color: var(--c2);
    }

    .swiper-pagination-bullet-active {
        background-color: var(--c8);
    }

    .swiper-pagination-bullet-active ~ .swiper-pagination-bullet {
        background-color: var(--c8);
    }

    .carousel-pagination:not(.carousel-autoplay-init) .swiper-pagination-bullet-active {
        background-color: var(--c8);
        opacity: 1;
    }

    .carousel-autoplay-init .swiper-pagination-bullet-active {
        width: 160rem;
    }

    .carousel-autoplay-init .swiper-pagination-bullet-active::before {
        opacity: 1;
        width: 100%;
        transition: width 5s linear;
    }

    .form-container {
        position: relative;
    }

    .form-success {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        flex-direction: column;
        background-color: var(--c0);
        z-index: 1;
        pointer-events: none;
    }

    .form-success-subtitle {
        margin-top: 25rem;
    }

    .form-container:not(.success) .form-success {
        opacity: 0;
    }

    .form-container.success {
        pointer-events: none;
    }


}

/* cards */

@media screen {

    .card {
        position: relative;
        overflow: hidden;
        display: flex;
        min-height: 100%;
        flex-direction: column;
    }

    .card-1 .card-header {
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
        display: flex;
        margin-bottom: 15rem;
    }

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

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

    .card-1 .card-title {
        font-weight: 500;
        line-height: 1.3;
        max-width: 400rem;
    }

    .card-1 .card-subtitle {
        margin-top: 20rem;
        color: var(--c9);
        max-width: 400rem;
    }

    .card-1 .card-info {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rem;
    }

    .card-1 .card-author {
        font-weight: 500;
        margin-right: 10rem;
        display: inline-flex;
        align-items: center;
    }

    .card-1 .card-author::after {
        content: "";
        height: 1.4em;
        width: var(--sl);
        background-color: currentColor;
        margin-left: 10rem;
        flex: none;
    }

    .card-1 .card-footer {
        max-width: 400rem;
        margin-top: 20rem;
        padding-bottom: 5rem;
    }

    .card-2 {
        border-radius: var(--br2);
        background-color: var(--c10);
        border: var(--sl) solid var(--c11);
    }

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

    .card-2 .card-inner {
        display: flex;
        flex-direction: column;
        padding: 0 40rem 30rem;
        flex: auto;
    }

    .card-2 .card-header {
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        mix-blend-mode: darken;
    }

    .card-2 .card-media {
        z-index: 1;
        position: absolute;
        top: 0%;
        right: 0%;
        left: 0%;
        display: flex;
    }

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

    .card-2 .card-content {
        padding: 0 20rem 20rem 0;
        position: relative;
        z-index: 1;
        flex: auto;
    }

    .card-2 .card-subtitle {
        margin-top: 15rem;
        color: var(--c9);
    }

    .card-2 .card-footer {
        position: relative;
        z-index: 1;
        margin-top: auto;
    }

    .card-3 {
        padding: 40rem;
    }

    .card-3::before,
    .card-3::after {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        pointer-events: none;
        width: 20rem;
        border: var(--sl) solid;
        opacity: .2;
        border-radius: 5rem;
    }

    .card-3::before {
        left: 0;
        clip-path: inset(0 50% 0 0);
    }

    .card-3::after {
        right: 0;
        clip-path: inset(0 0 0 50%);
    }

    .card-3 .card-header {
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        width: max(55px, 60rem);
        height: max(55px, 60rem);
        margin-bottom: 80rem;
    }

    .card-3 .card-subtitle {
        margin-top: 10rem;
        color: var(--c9);
    }

    .card-3 .card-footer {
        margin-top: 30rem;
        padding-bottom: 5rem;
    }


}

/* sections */

@media screen {

    .s1-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
        grid-template-rows: auto auto 1fr;
        align-items: flex-start;
    }

    .s1-2 {
        grid-column: 5/11;
        grid-row: 1/3;
    }

    .s1-3 {
        grid-column: 1/4;
    }

    .s1-4 {
        grid-column: 5/11;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 35rem;
    }

    .s1-4:not(:first-child) {
        margin-top: 35rem;
    }

    .s1-4-1 {
        overflow: hidden;
        border-radius: var(--br1);
    }

    .s1-4-2 {
        color: var(--c9);
    }

    .s1-5 {
        grid-column: 1/4;
        grid-row: 2/4;
        position: sticky;
        top: 100rem;
        margin-top: 40rem;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .s1-6 {
        display: flex;
        align-items: center;
        color: var(--c2);
        font-weight: 400;
        border-left: max(2px, 2rem) solid var(--c2);
        padding-left: 20rem;
    }

    .s1-6.disabled {
        color: var(--c9);
        pointer-events: none;
    }

    .s1-6.disabled .s1-6-1 {
        color: var(--c5);
    }

    .s2-1 {
        margin-bottom: 25rem;
    }

    .s2-2 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: 80rem var(--gap);
    }

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

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

    .s3-1 {
        position: relative;
        z-index: 1;
        margin: 0 var(--awr);
        background-color: var(--c2);
        color: var(--c0);
    }

    .s3-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .5;
    }

    .s3-3 {
        flex: auto;
    }

    .s3-3 .section-header-subtitle {
        font-size: var(--f-m);
        max-width: none;
        color: inherit;
    }

    .s3-4 {
        margin-top: 50rem;
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
    }

    .s3-4-1 {
        grid-column: 1/5;
        padding-bottom: 5rem;
        border-bottom: var(--sl) solid var(--c8);
    }

    .s3-4-2 {
        grid-column: 5/12;
        grid-row-start: 2;
        margin-top: -.7em;
    }

    .s3-4-3 {
        grid-column: 5/10;
        grid-row-start: 3;
        margin-top: 40rem;
    }

    .s3-5 {
        position: relative;
        z-index: 1;
        padding: 120rem var(--wr);
        min-height: calc(var(--app-height) - var(--headroom-height));
        display: flex;
        flex-direction: column;
    }

    .s3-5::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: linear-gradient(var(--c2), transparent);
        opacity: .7;
    }

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

    .s4-2 {
        grid-column: 1/4;
    }

    .s4-3 {
        grid-column: 5/9;
        overflow: hidden;
        border-radius: var(--br1);
    }

    .s4-4 {
        grid-column: 9/-1;
        padding-left: 60rem;
        color: var(--c9);
    }

    .s5-1 .section-header-title {
        grid-column: 5/-1;
    }

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

    .s6-2 {
        grid-column: 1/5;
    }

    .s6-3 {
        grid-column: 5/10;
    }

    .s6-3-2 {
        margin-top: 20rem;
        color: var(--c9);
        font-size: var(--f-s);
    }

    .s6-4 {
        grid-column: 1/5;
    }

    .s6-4-1 {
        max-width: 250rem;
    }

    .s6-5 {
        grid-column: 5/10;
    }

    .s6-5-1 {
        margin-bottom: 15rem;
        color: var(--c6);
    }

    .s6-5-2 {
    }

    .s7-1 .section-header-title {
        grid-column: 5/9;
    }

    .s7-1 .section-header-subtitle {
        grid-column: 5/9;
    }

    .s7-3 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
        align-items: flex-start;
    }

    .s7-3:not(:first-child) {
        margin-top: 20rem;
    }

    .s7-4 {
        grid-column: 1/5;
        padding-top: 40rem;
    }

    .s7-5 {
        grid-column: 5/10;
        display: flex;
        position: relative;
    }

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

    .s7-6 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s7-7 {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        display: flex;
        align-items: flex-end;
        width: 100%;
        height: var(--sl);
        top: 50%;
        transition: opacity 1s 0s;
    }

    .s7-7-1 {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-image: url(../img/pin.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
        width: 60rem;
        height: 90rem;
    }

    .s7-7-2 {
        width: calc((100% - 4 * var(--gap)) / 5 * 6.5 + var(--gap) * 6);
        background-image: linear-gradient(to right, var(--c8), transparent);
        flex: none;
        position: absolute;
        right: 50%;
        background-repeat: no-repeat;
        background-size: 100% var(--sl);
        background-position: bottom;
        clip-path: inset(0 0% 0 0);
        transition: clip-path 1s 1.5s;
    }

    .s7-8 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        clip-path: inset(0 0 0% 0);
        transition: clip-path 1s;
        overflow: hidden;
    }

    .s7-8::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background-image: linear-gradient(to right, var(--c0), transparent, transparent, transparent, var(--c0)), linear-gradient(to bottom, var(--c0), transparent, transparent, transparent, var(--c0));
    }

    .s7-8-1 {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 1px;
    }

    .s7-6.active {
        z-index: 2;
    }

    .s7-6:not(.active) .s7-8 {
        clip-path: inset(0 0 100% 0);
        transition-delay: 1s;
    }

    .s7-6:not(.active) .s7-7 {
    }

    .s7-6:not(.active) .s7-7-2 {
        clip-path: inset(0 100% 0 0);
        transition-delay: 0s;
    }

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

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

    .s8-3 {
        grid-column: 1/5;
    }

    .s8-4 {
    }

    .s8-5 {
        grid-column: 5/-1;
        display: flex;
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
    }

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

    .s8-6 {
        grid-column: 5/11;
        margin-top: 15rem;
        color: var(--c9);
    }

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

    .s9-2 {
        grid-column: 1/5;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 160rem;
    }

    .s9-3 {
        grid-column: 5/10;
    }

    .s9-6 {
        margin-top: 30rem;
        color: var(--c7);
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
    }

    .s9-6-1:not(:last-child)::after {
        content: "/";
        padding: 0 10rem;
    }

    .s9-7-2 {
        margin-top: 40rem;
    }

    .s9-8 {
        margin-top: 50rem;
    }

    .s9-8-1 {
        max-width: 420rem;
        color: var(--c9);
    }

    .s9-8-2 {
        margin-top: 15rem;
    }

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

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

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

    .s11-2 {
        grid-column: 1/4;
        padding: 80rem 0;
    }

    .s11-2 ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .s11-2 li {
        position: relative;
        padding-bottom: 5rem;
        transition: all .25s;
        margin-bottom: 12rem;
    }

    .s11-2 li::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: currentColor;
        opacity: .4;
        height: var(--sl);
        transition: transform .25s;
        will-change: transform;
        transform-origin: left;
    }

    .s11-2 li:not(.active) {
        margin-bottom: 0;
        color: var(--c7);
    }

    .s11-2 li:not(.active)::before {
        transform: scaleX(0);
    }

    .s11-3 {
        grid-column: 5/-1;
        padding: 80rem 0 120rem;
        position: relative;
        overflow: hidden;
        margin-top: -80rem;
    }

    .s11-3::before,
    .s11-3::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 100rem;
        pointer-events: none;
        z-index: 2;
    }

    .s11-3::before {
        top: 0;
        background-image: linear-gradient(var(--c0), transparent);
    }

    .s11-3::after {
        bottom: 0;
        background-image: linear-gradient(transparent, var(--c0));
    }

    .s11-3 .swiper {
        overflow: visible;
    }

    .s11-5 {
        display: none;
    }

    .s11-6 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 30rem;
        padding: 30rem 0;
    }

    .s12 .section-header-subtitle {
        max-width: 650rem;
    }

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

    .s12-2 {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-gap: 1px;
        padding: 1px;
    }

    .s12-3 {
        position: relative;
        display: flex;
        margin: 0;
    }

    .s12-3::before,
    .s12-3::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: -1px;
        box-shadow: inset 0 0 0 1px var(--c12);
        border-radius: var(--br2);
        pointer-events: none;
        user-select: none;
    }


    .s12-4 {
        grid-column: 5/-1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: 1px;
        padding: 1px;
    }

    .s12-5 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 25rem 30rem 40rem;
    }

    .s12-5-1 {
        background-color: var(--c2);
        border-radius: 50%;
        width: max(35px, 40rem);
        height: max(35px, 40rem);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5rem;
    }

    .s12-5-2 {
        margin-top: 50rem;
        font-weight: 400;
        color: var(--c9);
    }

    .s12-6 {
        position: relative;
        display: flex;
        margin: 0 auto;
        width: 100%;
        max-width: 180rem;
    }

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


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

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

    .s13-2 {
        display: flex;
        width: 100%;
        position: relative;
        border-radius: var(--br1);
        overflow: hidden;
        will-change: transform;
        transition: transform .25s;
        transform-origin: right bottom;
    }

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

    .s13-2::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--c2);
        z-index: 1;
        opacity: .7;
        transition: opacity .25s;
    }

    .s13-3 {
        grid-column: 5/12;
    }

    .s13-3 .swiper {
        overflow: visible;
        margin: 0 calc(var(--gap) / -2);
    }

    .s13-3 .swiper-wrapper {
        align-items: flex-end;
    }

    .s13-3 .swiper-slide {
        padding: 0 calc(var(--gap) / 2);
    }

    .s13-3 .swiper-slide-active .s13-2 {
        transform: scale(1);
    }

    .s13-3 .swiper-slide-active .s13-2::after {
        opacity: 0;
    }

    .s13-3 .swiper-slide-active ~ .swiper-slide .s13-2 {
        transform-origin: left bottom;
    }

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

    .s14-1 {
        display: flex;
        align-items: center;
        background-color: var(--c2);
        color: var(--c0);
        position: relative;
        margin: 0 var(--awr);
        padding: 0 var(--wr);
    }

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

    .s14-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s14-2 .swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s14-3 {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
        padding: 120rem 0;
        width: 100%;
    }

    .s14-4 {
        grid-column: 5/9;
    }

    .s14-4-2 {
        margin-top: 30rem;
    }

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

    .s15-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--gap);
        align-items: flex-end;
        grid-column: 5/-1;
    }

    .s15-3 {
        position: relative;
        overflow: hidden;
        display: flex;
        border-radius: var(--br1);
    }

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

    .s15-4 {
        padding-left: 60rem;
    }

    .s15-4-2 {
        margin-top: 10rem;
    }

    .s15-4-3 {
        margin-top: 40rem;
        color: var(--c9);
    }

    .s15-4-4 {
        margin-top: 55rem;
    }

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

    .s16-2 {
        grid-column: 1/-1;
        margin-bottom: 20rem;
    }

    .s16-2 .section-header-subtitle {
        max-width: none;
    }

    .s16-3 {
        position: relative;
        overflow: hidden;
        display: flex;
        border-radius: var(--br1);
        min-height: 400rem;
    }

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

    .s16-3::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: linear-gradient(transparent, var(--c2));
        opacity: .8;
    }

    .s16-4 {
        grid-column: 5/-1;
        display: grid;
        grid-gap: var(--gap);
        grid-template-columns: 1fr 1fr;
    }

    .s16-5 {
    }

    .s16-6 {
        grid-column: 1/3;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 30rem;
    }

    .s16-7-1 {
        font-size: var(--f-b);
        letter-spacing: -.04em;
    }

    .s16-7-2 {
        color: var(--c6);
        margin-top: 10rem;
    }

    .s16-8 {
        grid-column: 5/11;
        color: var(--c9);
    }

    .s16-8:not(:last-child) {
        margin-bottom: 25rem;
    }

    .s17-1 {
        overflow: hidden;
        position: relative;
        display: flex;
        border-radius: var(--br1);
        --offset: 0;
    }

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

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

    .s17-1::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--offset) * 1%);
        width: 0;
        background-color: var(--c0);
        z-index: 2;
        margin-left: 0;
    }

    .s17-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .s17-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        clip-path: inset(0 0 0 calc(var(--offset) * 1%));
    }

    .s17-5 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
    }

    .s17-6 {
        grid-column: 1/-1;
        position: relative;
    }

    .s17-7 {
        grid-column: 5/11;
        margin-top: 20rem;
        order: -1;
        color: var(--c9);
    }

    .s17-8 {
        position: absolute;
        top: 25%;
        left: 0;
        height: 50vh;
        z-index: 2;
        opacity: 0;
        width: 100%;
        pointer-events: none;
    }

    .s17-1 .swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s18-1 {
        display: flex;
        width: 100%;
        overflow: hidden;
        position: relative;
        background-color: var(--c2);
        color: var(--c0);
        border-radius: var(--br1);
        align-items: flex-end;
    }

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

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

    .s18-2 .swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s18-2::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(transparent, var(--c2));
        opacity: 1;
        z-index: 1;
    }

    .s18-3 {
        position: relative;
        z-index: 1;
        margin: 30rem 50rem;
        overflow: hidden;
    }

    .s18-3::before,
    .s18-3::after {
        content: "";
        border: var(--sl) solid;
        border-radius: .25em;
        width: 15rem;
        position: absolute;
        bottom: 0;
        height: 75%;
        z-index: 1;
    }

    .s18-3::before {
        clip-path: inset(0 50% 0 0);
        left: 0;
    }

    .s18-3::after {
        clip-path: inset(0 0 0 50%);
        right: 0;
    }

    .s18-3 .swiper {
        mask-image: linear-gradient(90deg, transparent, black, transparent);
    }

    .s18-3 .swiper-slide {
        width: auto;
        padding: 5rem 0;
    }

    .s18-4 {
        white-space: nowrap;
        margin: 0 100rem;
        will-change: transform;
        transition: transform .15s;
        transform-origin: bottom;
        font-size: var(--f-m);
    }

    .s18-5 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 20rem;
        z-index: 1;
    }

    .s18-5-1 {
        margin: 0 auto;
        width: 0;
        height: var(--sl);
        background-color: var(--c0);
        transition: width .15s;
    }

    .s18-3 .swiper-slide:not(.swiper-slide-active) .s18-4 {
        transform: scale(.75);
        opacity: .6;
        cursor: pointer;
    }

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

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

    .s19-1 {
        min-height: var(--app-height);
        padding: var(--headroom-height) var(--wr) 0;
        margin: 0 var(--awr);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .s19-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: .1;
        overflow: hidden;
    }

    .s19-2::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30%;
        background-image: linear-gradient(transparent, var(--c0));
        z-index: 1;
    }

    .s19-3 {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 1;
        padding: 120rem 0;
        align-items: center;
    }

    .s19-4 {
        max-width: 1150rem;
        text-align: center;
    }

    .s19-5 {
        margin-top: 20rem;
        font-size: var(--f-m);
        max-width: 600rem;
        text-align: center;
    }

    .s19-6 {
        margin-top: 50rem;
        max-width: 600rem;
        width: 100%;
    }

    .s20-1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 60rem var(--gap);
    }

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

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

    .s20-4 ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: .75em var(--gap);
    }

    .s21 {
        background-color: var(--c2);
        color: var(--c0);
    }

    .s21:first-child {
        margin-top: 0;
    }

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

    .s21-1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: var(--app-height);
    }

    .s21-2 {
        padding: 25rem 0;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 50rem;
        grid-template-rows: 1fr auto 1fr;
    }

    .s21-3 {
        position: relative;
        margin-right: var(--awr);
    }

    .s21-3 img {
        object-position: top left;
    }

    .s21-5 {
        display: flex;
        flex-direction: column;
        margin: auto;
        padding-right: var(--wr);
        max-width: 550rem;
    }

    .s21-5-1 .title {
    }

    .s21-5-2 {
        font-size: var(--f-m);
        margin-top: 40rem;
    }

    .s21-5-3 {
        margin-top: 40rem;
    }

    .s404 {
        overflow: hidden;
    }

    .s404:first-child {
        margin-top: 0;
    }

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

    .s404-1 {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: var(--gap);
        align-items: flex-start;
        padding: 160rem 0;
    }

    .s404-4 {
        margin-top: 15rem;
        color: var(--c9);
    }

    .s404-5 {
        margin-top: 50rem;
        display: grid;
        grid-template-columns: auto;
        grid-gap: var(--gap);
    }

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

    .page-header-subtitle b::-moz-selection,
    .section-header-subtitle b::-moz-selection,
    .layer b::-moz-selection,
    .s3 *::-moz-selection,
    .s14 *::-moz-selection,
    .s18 *::-moz-selection,
    .s21 *::-moz-selection,
    .footer *::-moz-selection {
        background-color: var(--c0);
        color: var(--c2);
        -webkit-text-fill-color: var(--c2);
    }

    .page-header-subtitle b::selection,
    .section-header-subtitle b::selection,
    .layer b::selection,
    .s3 *::selection,
    .s14 *::selection,
    .s18 *::selection,
    .s21 *::selection,
    .footer *::selection {
        background-color: var(--c0);
        color: var(--c2);
        -webkit-text-fill-color: var(--c2);
    }


    .card-1 .card-footer a,
    .card-3 .card-footer a,
    .s1-6-1 a,
    .s9-4:first-child .s9-6-1 a,
    .s15-4-4 a,
    .s20-4 a {
        font-weight: 400;
        transition: background-size .25s;
        background-repeat: no-repeat;
        background-image: linear-gradient(currentColor, currentColor);
        display: inline;
        padding-bottom: .2em;
        background-size: 100% var(--sl);
        background-position: left bottom;
    }

}

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

    :root {

        --wr: 15rem;

        --gap: 60rem;

        --br1: 8rem;
        --br2: 12rem;

        --btn: 40rem;

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


        --f-s: 14rem;
        --f-d: 16rem;
        --f-m: 16rem;
        --f-b: 22rem;
        --f-l: 40rem;
        --f-xl: 40rem;

        --mw: 640rem;


    }

    html {
        font-size: 1px;
    }

    .desktop {
        display: none !important;
    }

    .topbar {
        grid-template-columns: 1fr auto;
        padding: 15rem 0;
        position: relative;
    }

    .topbar::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: var(--sl);
        background-color: var(--c7);
        transition: margin .25s;
    }

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

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

    .header::before {
        height: 100%;
        background-image: linear-gradient(var(--c0), var(--c0));
    }

    .header.active .topbar::after {
        margin: 0 var(--awr);
    }

    .footer {
        padding: 50rem 0;
    }

    .footer-grid {
        grid-gap: 0 20rem;
        grid-template-areas: "f1 f1" "f2 f2" "f3 f3" "f4 f5" "f6 f6" "f7 f7" "f8 f8";
        grid-template-columns: 1fr auto;
    }

    .f2 {
        margin-top: 80rem;
    }

    .f2 .footer-nav ul {
        grid-template-columns: 1fr 1fr;
        grid-gap: 10rem;
    }

    .f3 {
        margin-top: 60rem;
        margin-bottom: 60rem;
    }

    .f6 {
        margin-top: 60rem;
    }

    .f7 {
        margin-top: 20rem;
    }

    .f8 {
        margin-top: 20rem;
        max-width: 290rem;
    }

    .badge-text {
        padding: 0;
    }

    .breadcrumbs {
        margin-top: 20rem;
        margin-bottom: 60rem;
    }

    .pagination {
        width: 100%;
    }

    .pagination-nav {
        margin: 0 auto;
    }

    .switch {
        width: 100%;
    }

    .switch-inner {
        width: 100%;
    }

    .selector-holder {
        width: 100%;
    }

    .verification-grid {
        grid-template-columns: auto;
        grid-gap: 15rem;
    }

    .verification-grid-item {
    }

    .verification-grid-item:nth-child(1) {
        padding: 0 10rem;
        border-right: none;
        border-bottom: var(--sl) solid var(--c8);
        padding-bottom: 15rem;
    }

    .verification-grid-item:nth-child(2) {
        padding: 0 10rem;
        grid-column: auto;
    }

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

    .card-1 .card-header {
        margin-bottom: 20rem;
    }

    .card-1 .card-info {
        flex-direction: column;
    }

    .card-1 .card-author::after {
        display: none;
    }

    .card-1 .card-date:not(:first-child) {
        margin-top: .5em;
    }

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

    .card-2::before {
        display: none;
    }

    .card-2 .card-header {
        bottom: auto;
        position: relative;
        display: flex;
        margin: 0 -20rem;
    }

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

    .card-2 .card-media {
        top: 0%;
    }

    .card-2 .card-media__front {
        display: none;
    }

    .card-2 .card-inner {
        padding: 0 20rem 20rem;
    }

    .card-2 .card-content {
        padding: 0 0 30rem;
    }

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

    .card-3 {
        padding: 30rem;
    }

    .card-3 .card-header {
        margin-bottom: 40rem;
    }

    .page-header {
        margin-bottom: 60rem;
    }

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

    .page-header-subtitle:last-child,
    .page-header-title:last-child {
        padding-bottom: 30rem;
    }

    .section-header {
        grid-gap: 0;
    }

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

    .section-header-pretitle {
        grid-column: auto;
        margin-bottom: 25rem;
    }

    .section-header-title {
        grid-column: auto;
    }

    .section-header-subtitle {
        grid-column: auto;
        margin-top: 20rem;
    }

    .section-header-subtitle br {
        display: none;
    }

    .section-header-media::before {
        padding-top: 100%;
    }

    .section {
        margin-bottom: 120rem;
    }

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


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

    .s1-2 {
        grid-column: auto;
        grid-row: auto;
    }

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

    .s1-4 {
        grid-column: auto;
        grid-row: auto;
        grid-gap: 60rem;
    }

    .s1-4:not(:first-child) {
        margin-top: 30rem;
    }

    .s1-5 {
        grid-column: auto;
        grid-row: auto;
        margin-top: 60rem;
        top: auto;
        position: static;
    }

    .s2-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .s3-4-1 {
        grid-column: auto;
        padding-bottom: .5em;
    }

    .s3-4-2 {
        grid-column: auto;
        margin-top: .5em;
        grid-row: auto;
    }

    .s3-4-3 {
        grid-column: auto;
        grid-row: auto;
    }

    .s3-5 {
        padding: 60rem var(--wr) 80rem;
    }

    .s4-1 {
        grid-gap: 0;
    }

    .s4-2 {
        grid-column: auto;
    }

    .s4-2-2 {
        margin-top: 20rem;
    }

    .s4-3 {
        grid-column: auto;
        margin-top: 30rem;
    }

    .s4-4 {
        grid-column: auto;
        margin-top: 35rem;
        padding: 0;
    }

    .s5-1 .section-header-title {
        grid-column: auto;
    }

    .s6-1 {
        grid-gap: 0;
    }

    .s6-2 {
        grid-column: auto;
        order: -2;
        margin-bottom: 25rem;
    }

    .s6-3 {
        grid-column: auto;
    }

    .s6-4 {
        grid-column: auto;
        order: -1;
        margin-bottom: 60rem;
    }

    .s6-4-1 {
        max-width: 290rem;
    }

    .s6-5 {
        grid-column: auto;
        margin-top: 60rem;
    }

    .s7-1 .section-header-title,
    .s7-1 .section-header-subtitle {
        grid-column: auto;
    }

    .s7-4 {
        grid-column: auto;
        padding-top: 0;
    }

    .s7-5 {
        grid-column: auto;
        margin-top: 20rem;
    }

    .s7-7-1 {
        width: 35rem;
        height: 50rem;
    }

    .s7-7-2 {
        display: none;
    }

    .s8-3 {
        grid-column: auto;
        margin-bottom: 30rem;
    }

    .s8-5 {
        grid-column: auto;
    }

    .s8-5::before {
        padding-top: 60%;
    }

    .s8-6 {
        grid-column: auto;
        margin-top: 25rem;
    }

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

    .s9-2 {
        grid-column: auto;
        order: 1;
        grid-gap: 40rem;
    }

    .s9-3 {
        grid-column: auto;
    }

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

    .s9-7-2 {
        margin-top: 20rem;
    }

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

    .s9-8-2 {
        margin-top: 20rem;
    }

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

    .s11-2 {
        display: none;
    }

    .s11-3 {
        grid-column: auto;
        margin: 0;
        padding: 0;
    }

    .s11-3::before,
    .s11-3::after {
        display: none;
    }

    .s11-3 .swiper-wrapper {
        flex-direction: column;
    }

    .s11-3 .swiper-slide:not(:first-child) {
        margin-top: 60rem;
    }

    .s11-5 {
        display: block;
        margin-bottom: 25rem;
    }

    .s11-6 {
        grid-template-columns: auto;
        grid-gap: 30rem;
        padding: 0;
    }

    .s12-2,
    .s12-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-column: 1/-1;
    }

    .s12-3 {
        padding: 20rem;
    }

    .s12-5 {
        padding: 0;
    }

    .s12-6 {
        max-width: 120rem;
    }

    .s12-3:nth-child(4n + 1)::before,
    .s12-3:nth-child(4n + 2)::before {
        display: none;
    }

    .s12-3:nth-child(4n + 1)::after,
    .s12-3:nth-child(4n + 2)::after {
        clip-path: inset(0% calc(100% - var(--br2)) 0% 0%);
    }

    .s12-3:nth-child(4n + 3)::before,
    .s12-3:nth-child(4n + 4)::before {
        clip-path: inset(0% 0% 0% var(--br2));
    }

    .s12-3:nth-child(4n + 3)::after,
    .s12-3:nth-child(4n + 4)::after {
        display: none;
    }

    .s12-3:nth-child(1)::before {
        clip-path: inset(0% 0% var(--br2) 0%);
        display: block;
    }

    .s12-3:nth-child(1)::after {
        clip-path: inset(calc(100% - var(--br2)) var(--br2) 0% 0%);
    }

    .s12-3:nth-child(2)::after {
        clip-path: inset(calc(100% - var(--br2)) var(--br2) 0% 0%);
    }

    .s12-3:nth-child(4n + 1):nth-last-child(2)::before {
        clip-path: inset(var(--br2) 0% 0% var(--br2));
        display: block;
    }

    .s12-3:nth-child(4n + 2):nth-last-child(1)::after {
        clip-path: inset(0% calc(100% - var(--br2)) calc(100% - var(--br2)) 0%);
    }

    .s12-3:nth-child(4n + 3):nth-last-child(2)::before {
        clip-path: inset(0% 0% var(--br2) var(--br2));
    }

    .s12-3:nth-child(4n + 4):nth-last-child(1)::after {
        clip-path: inset(calc(100% - var(--br2)) calc(100% - var(--br2)) 0% 0%);
        display: block;
    }

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

    .s14-1 {
        min-height: var(--app-height);
    }

    .s14-4 {
        grid-column: auto;
    }

    .s15-2 {
        grid-column: auto;
        grid-template-columns: auto;
        grid-gap: 25rem;
    }

    .s15-4 {
        padding: 0;
    }

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

    .s16-2 {
        margin-bottom: 20rem;
    }

    .s16-3 {
        min-height: 0;
    }

    .s16-3::before {
        padding-top: 100%;
    }

    .s16-4 {
        grid-column: auto;
        grid-template-columns: auto;
        grid-gap: 60rem;
    }

    .s16-7 {
        margin-top: 25rem;
    }

    .s16-8 {
        grid-column: auto;
        order: 1;
        margin: 25rem 0 0;
    }

    .s17-1::before {
        padding-top: 115%;
    }

    .s17-1::after {
        display: none;
    }

    .s17-3 {
        display: none;
    }

    .s17-5 {
        margin-top: 25rem;
        grid-gap: 25rem;
    }

    .s17-6 {
        order: -1;
    }

    .s17-7 {
        grid-column: auto;
        margin: 0;
        max-width: 320rem;
    }

    .s18-1 {
        flex-direction: column;
        background-color: transparent;
        color: var(--c1);
        border-radius: 0;
        overflow: visible;
    }

    .s18-1::before {
        display: none;
    }

    .s18-2 {
        position: relative;
        display: flex;
        height: auto;
        opacity: 1;
        border-radius: var(--br1);
        overflow: hidden;
    }

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

    .s18-3 {
        width: 100%;
        margin: 20rem 0 0;
    }

    .s18-3::before,
    .s18-3::after {
        height: 100%;
    }

    .s18-4 {
        margin: 0 40rem;
        text-align: center;
    }

    .s18-5 {
        bottom: auto;
        top: 100%;
    }

    .s18-5-1 {
        background-color: var(--c1);
    }

    .s18-3 .swiper-slide {
        padding: 0;
    }

    .s18-3 .swiper-slide:not(.swiper-slide-active) .s18-4 {
        transform: scale(1);
    }

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

    .s19-3 {
        padding: 100rem 0;
        align-items: flex-start;
    }

    .s19-4 {
        text-align: left
    }

    .s19-5 {
        text-align: left
    }

    .s19-6 {
        margin-top: 20rem;
    }

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

    .s20-4 {
        margin-top: 15rem;
    }

    .s20-4 ul {
        grid-template-columns: auto;
    }

    .s21:first-child {
        margin-top: 0;
    }

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

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

    .s21-2 {
        padding: 15rem 0;
    }

    .s21-3 {
        display: none;
    }

    .s21-4 .topbar-logo {
        max-width: none;
    }

    .s21-5 {
        padding: 0;
    }

    .s404-1 {
        grid-template-columns: auto;
        grid-gap: 0;
        padding: 0 0 100rem;
    }

    .s404-5 {
        margin-top: 40rem;
        grid-gap: 20rem;
    }

    .s404-6 {
        top: auto;
        bottom: 0;
        transform: translateY(2%);
    }

    .s404-7 {
        margin-bottom: 60rem;
    }

    .popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: var(--c0);
        color: var(--c1);
        z-index: 999;
        transition: all .5s;
        bottom: 0;
    }

    .popup:not(.active) {
        transform: translateY(100%);
    }

    .popup-inner {
        padding: 15rem 0 20rem;
        min-height: var(--app-height);
        overflow: auto;
        display: flex;
        flex-direction: column;
    }

    .popup-header {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 20rem;
        align-items: center;
        padding-bottom: 20rem;
        border-bottom: var(--sl) solid var(--c7);
        margin-bottom: 30rem;
    }

    .popup-header-logo {
        max-width: 290rem;
    }

    .popup-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24rem;
        height: 24rem;
    }

    .popup-content {
        flex: auto;
    }

    .popup-footer {
        margin-top: 40rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .popup-footer-action {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 15rem;
        width: 100%;
    }

    .popup-social {
        overflow: hidden;
        margin: 0 auto;
    }

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

    .popup-social ul {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        margin: -5rem;
    }

    .popup-social li {
        margin: 5rem;
    }

    .popup-social li:not(:last-child)::after {
        content: "/";
        padding-left: 10rem;
        color: var(--c7);
    }

    .popup-social li:first-child::before,
    .popup-social li:last-child::after {
        content: "\a0";
        border: var(--sl) solid;
        display: inline-block;
        border-radius: .25em;
        width: 15rem;
        color: var(--c7);
    }

    .popup-social li:first-child::before {
        clip-path: inset(0 50% 0 0);
    }

    .popup-social li:last-child::after {
        clip-path: inset(0 0 0 50%);
    }

    .menu ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 1.5em;
        text-align: center;
    }

    .popup-overlay {
        pointer-events: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--c2);
        transition: opacity .5s;
        opacity: 0;
    }

    .popup.active ~ .popup-overlay {
        opacity: 1;
    }

}


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

    .mobile {
        display: none !important;
    }

    .footer-grid {
        grid-template-areas:
        "f1 f1 f1 f1 . . . . . . . f5"
        "f2 f2 f2 f2 f2 f2 . f3 f3 . f4 f4"
        "f8 f8 f8 f8 f8 f8 . f7 f7 f7 f6 f6";
    }

    .f2 .footer-nav ul {
        grid-auto-flow: dense;
    }

    .f2 .footer-nav li:nth-child(odd):not(.last-col) {
        grid-column: 1/2;
    }

    .f2 .footer-nav li:nth-child(even):not(.last-col) {
        grid-column: 2/3;
    }

    .last-col {
        order: -1;
        grid-column: 3/4;
    }

    .s1-3 {
        order: -1;
    }

    .s1-5 {
        order: -1;
    }

    .s10-1-1 {
        grid-column-end: span 2;
    }

    .s10-1-1:nth-child(1):nth-last-child(1) {
        grid-column: 3/5;
    }

    .s10-1-1:nth-child(1):nth-last-child(2) {
        grid-column: 2/4;
    }

    .s12-4 .s12-3:nth-child(6n + 1)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 1)::after {
        clip-path: inset(var(--br2) var(--br2) 0% 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 2) {
        margin-bottom: 10rem;
    }

    .s12-4 .s12-3:nth-child(6n + 2)::before {
        display: none;
    }

    .s12-4 .s12-3:nth-child(6n + 2)::after {
        clip-path: inset(var(--br2) 0% 0% 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 3)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 3)::after {
        clip-path: inset(var(--br2) 0% 0% calc(100% - var(--br2)));
    }

    .s12-4 .s12-3:nth-child(6n + 4)::before {
        display: none;
    }

    .s12-4 .s12-3:nth-child(6n + 4)::after {
        clip-path: inset(0% 0% var(--br2) calc(100% - var(--br2)));
    }

    .s12-4 .s12-3:nth-child(6n + 5)::before {
        display: none;
    }

    .s12-4 .s12-3:nth-child(6n + 5)::after {
        clip-path: inset(calc(100% - var(--br2)) 0% 0% 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 6)::before {
        clip-path: inset(0% var(--br2) var(--br2) 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 6)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 1)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 1)::after {
        clip-path: inset(var(--br2) calc(100% - var(--br2)) 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 2)::before {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 2)::after {
        clip-path: inset(var(--br2) 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 3)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 3)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 4)::before {
        clip-path: inset(var(--br2) var(--br2) 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 4)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 5)::before {
        clip-path: inset(0% 0% 0% var(--br2));
    }

    .s12-2 .s12-3:nth-child(12n + 5)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 6)::before {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 6)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 7)::before {
        clip-path: inset(0% 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 7)::after {
        clip-path: inset(0% 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 8)::before {
        clip-path: inset(0% 0% 0% calc(100% - var(--br2)));
    }

    .s12-2 .s12-3:nth-child(12n + 8)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 9)::before {
        clip-path: inset(0% calc(100% - var(--br2)) var(--br2) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 9)::after {
        clip-path: inset(var(--br2) 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 10)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 10)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 11)::before {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 11)::after {
        clip-path: inset(var(--br2) 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 12)::before {
        clip-path: inset(0% var(--br2) calc(100% - var(--br2)) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 12)::after {
        display: none;
    }

    .s13-2 {
        transform: scale(.56);
    }

    .s16-5:nth-child(odd):last-child {
        grid-column: 1/-1;
    }

    .s16-5 .s16-7 {
        display: none;
    }

}

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


    html {
        font-size: 1px;
    }


}

/* hover animations */

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

    .button,
    .go-top {
        transition: all .25s;
    }

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

    .button__secondary:hover {
        border-color: var(--c1);
        color: var(--c0);
        background-color: var(--c1);
    }

    .button__secondary.button__contrast:hover {
        border-color: var(--c0);
        color: var(--c1);
        background-color: var(--c0);
    }

    .go-top:hover {
        background-color: var(--c0);
        border-color: var(--c0);
        color: var(--c2);
    }

    .card-1 .card-media {
        transition: transform .25s;
        will-change: transform;
    }

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

    .s20-3 a,
    .topbar-nav a,
    .f6 a,
    .f7 a,
    .footer-nav a {
        transition: background-size .25s;
        background-size: 0 var(--sl);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-image: linear-gradient(currentColor, currentColor);
        display: inline;
        padding-bottom: .2em;
    }

    .s20-3 a {
        padding-bottom: 0;
    }

    .s20-3 a:hover,
    .topbar-nav .current a,
    .f6 a:hover,
    .f7 a:hover,
    .footer-nav a:hover,
    .topbar-nav a:hover {
        background-size: 100% var(--sl);
        background-position: left bottom;
    }

    .card-1 .card-footer :hover,
    .card-3 .card-footer :hover,
    .s1-6-1 :hover,
    .s15-4-4 :hover,
    .s20-4 :hover {
        background-size: 0 var(--sl);
        background-position: right bottom;
    }

    .card-2 .card-content {
        transition: transform .25s;
    }

    .card-2 .card-footer {
        transition: all .25s;
    }

    .card-2 .card-media {
        transition: opacity .25s;
    }

    .card-2:not(:hover) .card-content {
        transform: translateY(var(--btn));
    }

    .card-2:not(:hover) .card-footer {
        transform: translateY(var(--btn));
        opacity: 0;
    }


    .card-2:hover .card-media__back,
    .card-2:not(:hover) .card-media__front {
        opacity: 0;
    }

    .breadcrumbs li:not(:last-child) a,
    .textbox a,
    .s9-6-1 a,
    .s11-2 li:not(.active),
    .pagination-nav li:not(.current) a {
        transition: color .15s;
    }

    .breadcrumbs li:not(:last-child) a:hover,
    .textbox a:hover,
    .s9-6-1 a:hover,
    .s11-2 li:not(.active):hover,
    .pagination-nav li:not(.current) a:hover {
        color: var(--c1);
    }

    .s12-6 {
        transition: filter .25s;
    }

    .s12-6:not(:hover) {
        filter: grayscale(1);
    }

    .s16-3 {
        transition: background-color .5s;
        background-color: var(--c2);
    }

    .s16-3 img {
        opacity: .8;
    }

    .s16-3::after,
    .s16-3 img {
        transition: opacity .5s;
    }

    .s16-3:hover {
        background-color: transparent;
    }

    .s16-3:hover::after {
        opacity: 0;
    }

    .s16-3:hover img {
        opacity: 1;
    }


    .s17-3 {
        transition: clip-path .2s linear;
    }

    /*
    .s17-1::after{transition: left .5s;}
    .s17-3{transition: clip-path 1s ease-in-out;}
    .s17-1:hover::after{}
    .s17-1.hovered{pointer-events: none;}
    */
    .s18-2::after {
        transition: all .5s;
    }

    .s18-4,
    .pagination-arrow,
    .selector-option {
        transition: opacity .5s;
    }

    .pagination-arrow.disabled,
    .pagination-arrow:not(:hover) {
        opacity: .5;
    }

    .s18-1:hover .s18-2::after {
        opacity: 1;
        transform: translateY(25%);
    }

    .s18-3 .swiper-slide:not(.swiper-slide-active) .s18-4:hover,
    .selector-option:hover {
        opacity: 1;
    }

}

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

/*--br1: 8rem;*/
/*--br2: 12rem;*/

/*--btn: max(35px, 40rem);*/

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

/*--altfont: 'PPEditorialNew', serif;*/

/*--f-s: max(14px, 14rem);*/
/*--f-d: max(14px, 16rem);*/
/*--f-m: max(14px, 22rem);*/
/*--f-b: max(14px, 24rem);*/
/*--f-l: max(14px, 52rem);*/
/*--f-xl: max(14px, 72rem);*/

/*--mw: 3000px;*/


/*}*/


/* globals */

@media screen {

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

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

    .altfont,
    .title__default,
    .title__large {
        font-family: var(--altfont);
        font-weight: 400;
        letter-spacing: -.04em;
        line-height: 1.1;
    }

    .popup-active {
    }

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

    .upc {
        text-transform: uppercase;
        letter-spacing: -.04em;
        font-weight: 400;
    }

    .preloader {
        background-color: var(--c0);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        visibility: hidden;
        opacity: 0;
        transition: all .25s 1s;
        display: flex;
        color: var(--c1);
        will-change: transform;
    }

    .loading {
        pointer-events: none;
    }

    .loading .preloader {
        transition-duration: 0s;
        opacity: 1;
        visibility: visible;
    }

    .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;
        position: relative;
    }

    .button:not(.fill) {
        overflow: hidden;
        position: relative;
    }

    .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__default {
        padding: 0 20rem;
        border-radius: var(--br1);
        height: var(--btn);
        background-color: var(--c2);
        color: var(--c0);
        border: var(--sl) solid transparent;
    }

    .button__default .button-text {
        text-transform: uppercase;
        letter-spacing: -.04em;
        font-weight: 400;
    }

    .button__default.button__contrast {
        background-color: var(--c0);
        color: var(--c1);
    }

    .button__secondary {
        padding: 0 20rem;
        border-radius: var(--br1);
        height: var(--btn);
        border: var(--sl) solid var(--c7);
        color: var(--c1);
    }

    .button__secondary .button-text {
        text-transform: uppercase;
        letter-spacing: -.04em;
        font-weight: 400;
    }

    .button__wide {
        width: 100%;
    }

    .title {
        width: 100%;
    }

    .title__small,
    .textbox h2 {
        line-height: 1.3;
        letter-spacing: -.06em;
        font-size: var(--f-b);
    }

    .title__default {
        font-size: var(--f-l);
    }

    .title__large {
        font-size: var(--f-xl);
    }

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

    .header {
        position: sticky;
        z-index: 10;
        top: 0;
        transition: background-color .25s;
    }

    .header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 150%;
        z-index: -1;
        background-image: linear-gradient(var(--c0), transparent);
        opacity: 0;
        transition: opacity .25s;
        pointer-events: none;
    }

    .header.active::before {
        opacity: 1;
    }


    .topbar {
        display: grid;
        padding: 25rem 0;
        grid-template-columns: auto 1fr auto;
        grid-gap: 50rem;
        align-items: center;
    }

    .topbar-logo {
        max-width: 240rem;
        width: 1000rem;
    }

    .topbar-nav {
        margin: 0 auto;
    }

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

    .topbar-action {
        display: grid;
        grid-gap: 10rem;
        grid-template-columns: 1fr 1fr;
    }

    .topbar-action .button__secondary {
        background-color: var(--c0);
    }

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

    .section {
        position: relative;
        z-index: 1;
        margin-bottom: 200rem;
    }

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

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

    .section-header {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
    }

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

    .section-header-pretitle {
        grid-column: 1/5;
    }

    .section-header-title {
        grid-column: 5/12;
    }

    .section-header-subtitle {
        grid-column: 5/11;
        margin-top: 20rem;
        max-width: 565rem;
        color: var(--c9);
    }

    .section-header-media {
        grid-column: 1/-1;
        margin-top: 30rem;
        border-radius: var(--br2);
        overflow: hidden;
        position: relative;
        display: flex;
    }

    .section-header-media::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 30%;
    }

    .section-header-media + .section-header-subtitle {
        margin-top: 30rem;
    }

    .footer {
        overflow: hidden;
        margin-top: 0;
        background-color: var(--c2);
        color: var(--c0);
        padding: 50rem 0 20rem;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 120rem var(--gap);
        align-items: flex-start;
    }

    .footer-nav-caption {
        margin-bottom: 35rem;
        font-weight: 400;
    }

    .footer-nav ul {
        display: grid;
        grid-gap: .75em var(--gap);
        align-items: flex-start;
    }

    .f1 {
        grid-area: f1;
    }

    .f2 {
        grid-area: f2;
    }

    .f2 .footer-nav ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .f3 {
        grid-area: f3;
    }

    .f4 {
        grid-area: f4;
    }

    .f5 {
        grid-area: f5;
        margin-left: auto;
    }

    .f6 {
        grid-area: f6;
    }

    .f7 {
        grid-area: f7;
    }

    .f7 ul {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -.25em;
    }

    .f7 li {
        margin: 0 .25em;
        display: inline-flex;
    }

    .f7 li:not(:last-child)::after {
        content: "|";
        padding-left: .5em;
    }

    .f8 {
        grid-area: f8;
    }

    .go-top {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: var(--sl) solid;
        width: max(45px, 50rem);
        height: max(45px, 50rem);
        padding: 16rem;
    }

    .bottombar-author {
        display: flex;
        align-items: baseline;
        color: var(--c6);
    }

    .bottombar-author a {
        color: var(--c0);
    }

    .dd-icon {
        width: 1em;
        height: 1.2em;
        margin: 0 .3em;
        opacity: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--c0);
    }

    .dd-icon .icon {
        width: 100%;
    }


    .breadcrumbs {
        margin-top: 15rem;
        overflow: hidden;
        font-size: var(--f-s);
        margin-bottom: 80rem;
    }

    .breadcrumbs ul {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        margin: -5rem;
    }

    .breadcrumbs li {
        margin: 5rem;
    }

    .breadcrumbs li:not(:last-child)::after {
        content: "/";
        padding-left: 10rem;
        color: var(--c7);
    }

    .breadcrumbs li:first-child::before,
    .breadcrumbs li:last-child::after {
        content: "\a0";
        border: var(--sl) solid;
        display: inline-block;
        border-radius: .25em;
        width: 15rem;
        color: var(--c7);
    }

    .breadcrumbs li:first-child::before {
        clip-path: inset(0 50% 0 0);
    }

    .breadcrumbs li:last-child::after {
        clip-path: inset(0 0 0 50%);
    }

    .breadcrumbs li:not(:last-child) a {
        color: var(--c7);
    }

    .badge {
        display: inline-grid;
        letter-spacing: -.04em;
        text-transform: uppercase;
        font-weight: 400;
        grid-template-columns: auto 1fr auto;
        grid-gap: 0;
    }

    .badge-text {
        padding: 3rem 0;
    }

    .badge:first-child::before,
    .badge:last-child::after {
        content: "\a0";
        border: var(--sl) solid;
        display: inline-block;
        border-radius: .25em;
        width: 15rem;
    }

    .badge:first-child::before {
        clip-path: inset(0 50% 0 0);
    }

    .badge:last-child::after {
        clip-path: inset(0 0 0 50%);
    }

    .textbox h2 {
        margin: 3em 0 1em;
        color: var(--c1);
    }

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

    .textbox h3 {
        font-weight: 500;
        margin: 2em 0 .65em;
        line-height: 1.3;
    }

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

    .textbox a {
        text-decoration: underline;
    }

    .textbox ul,
    .textbox ol {
        margin: 1em 0;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0;
        counter-reset: index;
    }

    .textbox ol {
        counter-reset: index;
    }

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

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

    .textbox li {
        position: relative;
        padding-left: 1.5em;
    }

    .textbox ul li::before {
        content: "\2022";
        position: absolute;
        top: 0;
        left: 0;
        width: 1.5em;
        text-align: center;
    }

    .textbox ol li::before {
        content: counter(index) ".";
        position: absolute;
        top: 0;
        left: 0;
        width: 1.5em;
        text-align: center;
        counter-increment: index;
    }

    .formbox {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 15rem;
        border-top: var(--sl) solid var(--c8);
        padding-top: 15rem;
    }

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

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

    .textfield-input {
        border-bottom: var(--sl) solid var(--c8);
        text-transform: uppercase;
        padding-bottom: 15rem;
        width: 100%;
        text-overflow: ellipsis;
        letter-spacing: -.04em;
        text-transform: uppercase;
        font-weight: 400;
        resize: none;
    }

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

    .textfield-msg {
        color: var(--c4);
        margin-top: 10rem;
        display: none;
        margin-bottom: 15rem;
    }

    .textfield-input:invalid ~ .textfield-msg {
        display: block;
    }

    .page-header {
        margin-bottom: 80rem;
    }

    .page-header-inner {
        border-bottom: var(--sl) solid var(--c7);
    }

    .page-header-title:last-child {
        padding-bottom: 40rem;
    }

    .page-header-subtitle {
        font-size: var(--f-m);
        color: var(--c9);
        margin-top: 40rem;
        max-width: 720rem;
    }

    .page-header-subtitle:last-child {
        padding-bottom: 80rem;
    }

    .page-header-subtitle b,
    .section-header-subtitle b,
    .layer b {
        position: relative;
        font-weight: inherit;
        color: var(--c0);
        background-color: var(--c2);
        padding: .15em .2em;
        margin: -.15em -.2em;
        display: inline;
        border-radius: .25em;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }

    .switch {
        border-radius: var(--br2);
        border: var(--sl) solid var(--c7);
        padding: 4rem;
        display: inline-flex;
    }

    .switch-inner {
        display: inline-grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0;
        position: relative;
    }

    .switch-indicator {
        background-color: var(--c2);
        border-radius: var(--br1);
        position: absolute;
        top: 0;
        left: 0;
        right: 50%;
        bottom: 0;
        z-index: -1;
        margin: 0;
        will-change: transform;
        transition: transform .25s;
    }

    .switch-value {
        padding: 0 30rem;
        display: flex;
        text-align: center;
        align-items: center;
        height: var(--btn);
        justify-content: center;
        transition: color .25s;
        cursor: pointer;
    }

    .switch-value.active {
        color: var(--c0);
        pointer-events: none;
    }

    .switch-value__1.active ~ .switch-indicator {
        transform: translateX(0%);
    }

    .switch-value__2.active ~ .switch-indicator {
        transform: translateX(100%);
    }

    .verification {
        border-bottom: var(--sl) solid var(--c8);
        padding-bottom: 15rem;
    }

    .verification-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-gap: var(--gap);
        align-items: center;
    }

    .verification-grid-item {
        padding: 5rem 0;
    }

    .verification-grid-item:nth-child(1) {
        border-right: var(--sl) solid var(--c8);
        padding-right: var(--gap);
    }

    .verification-grid-item:nth-child(2) {
        grid-column: 2/-1;
    }

    .verification-input {
        text-transform: uppercase;
        width: 100%;
        text-overflow: ellipsis;
        letter-spacing: -.04em;
        text-transform: uppercase;
        font-weight: 400;
        resize: none;
        color: var(--c9);
    }

    .selector {
        user-select: none;
        line-height: 1;
    }

    .selector-holder {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }

    .selector-holder-input {
        min-width: 0;
        text-overflow: ellipsis;
        flex: auto;
        width: 100%;
        color: var(--c9);
        pointer-events: none;
        height: 1em;
    }

    .selector-holder-icon {
        width: max(8px, 10rem);
        height: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        margin-left: 10rem;
    }

    .selector-list {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
        overflow: visible;
        width: 100%;
        user-select: none;
    }

    .selector-list-inner {
        background-color: var(--c9);
        color: var(--c0);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: -15rem -20rem;
        white-space: nowrap;
        padding: 15rem 20rem;
        display: flex;
        line-height: 1;
        border-radius: var(--br1);
        box-shadow: 0 0 0 2rem var(--c9), inset 0 0 7rem 0 var(--c7);
    }

    .selector-list-inner ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 1em;
        flex: auto;
    }

    .selector-list:not(.active) {
        display: none;
    }

    .selector-list .selector-holder-icon {
        transform: scaleY(-1);
    }

    .selector-option {
        position: relative;
    }

    .selector-option:not(.active) {
        cursor: pointer;
        opacity: .5;
    }

    .pagination {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        grid-gap: var(--gap);
    }

    .pagination-nav {
        font-weight: 400;
    }

    .pagination-nav ul {
        display: flex;
        flex-wrap: wrap;
    }

    .pagination-nav li {
        position: relative;
        padding: 10rem;
        z-index: 1;
    }

    .pagination-nav li::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: var(--c2);
        z-index: -1;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        width: 30rem;
        height: 30rem;
    }

    .pagination-nav li:not(.current)::before {
        display: none;
    }

    .pagination-nav li:not(.current) a {
        color: var(--c7);
    }

    .pagination-nav li.current a {
        pointer-events: none;
        color: var(--c0);
    }

    .pagination-arrow.disabled {
        pointer-events: none;
        opacity: .5;
    }

    .pagination-arrow a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: .5em;
        height: 1em;
    }

    .carousel-pagination-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .carousel-pagination-container:not(:first-child) {
        margin-top: 15rem;
    }

    .carousel-pagination {
        top: 0;
        left: auto;
        bottom: auto !important;
        line-height: 0;
        position: relative;
        display: flex;
        justify-content: center;
        width: auto !important;
        margin: 0 10rem;
    }

    .carousel-pagination:first-child {
        margin-left: 0;
    }

    .carousel-pagination:last-child {
        margin-right: 0;
    }

    .swiper-pagination-bullet {
        width: max(8px, 8rem);
        height: max(8px, 8rem);
        border-radius: 999rem;
        margin: 0 3rem !important;
        transition: width .3s linear;
        background-color: var(--c2);
        opacity: 1;
        position: relative;
    }

    .swiper-pagination-bullet::before {
        content: "";
        border-radius: inherit;
        min-width: max(8px, 8rem);
        height: 100%;
        position: absolute;
        opacity: 0;
        width: 0%;
        background-color: var(--c2);
    }

    .swiper-pagination-bullet-active {
        background-color: var(--c8);
    }

    .swiper-pagination-bullet-active ~ .swiper-pagination-bullet {
        background-color: var(--c8);
    }

    .carousel-pagination:not(.carousel-autoplay-init) .swiper-pagination-bullet-active {
        background-color: var(--c8);
        opacity: 1;
    }

    .carousel-autoplay-init .swiper-pagination-bullet-active {
        width: 160rem;
    }

    .carousel-autoplay-init .swiper-pagination-bullet-active::before {
        opacity: 1;
        width: 100%;
        transition: width 5s linear;
    }

    .form-container {
        position: relative;
    }

    .form-success {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        flex-direction: column;
        background-color: var(--c0);
        z-index: 1;
        pointer-events: none;
    }

    .form-success-subtitle {
        margin-top: 25rem;
    }

    .form-container:not(.success) .form-success {
        opacity: 0;
    }

    .form-container.success {
        pointer-events: none;
    }


}

/* cards */

@media screen {

    .card {
        position: relative;
        overflow: hidden;
        display: flex;
        min-height: 100%;
        flex-direction: column;
    }

    .card-1 .card-header {
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
        display: flex;
        margin-bottom: 15rem;
    }

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

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

    .card-1 .card-title {
        font-weight: 500;
        line-height: 1.3;
        max-width: 400rem;
    }

    .card-1 .card-subtitle {
        margin-top: 20rem;
        color: var(--c9);
        max-width: 400rem;
    }

    .card-1 .card-info {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rem;
    }

    .card-1 .card-author {
        font-weight: 500;
        margin-right: 10rem;
        display: inline-flex;
        align-items: center;
    }

    .card-1 .card-author::after {
        content: "";
        height: 1.4em;
        width: var(--sl);
        background-color: currentColor;
        margin-left: 10rem;
        flex: none;
    }

    .card-1 .card-footer {
        max-width: 400rem;
        margin-top: 20rem;
        padding-bottom: 5rem;
    }

    .card-2 {
        border-radius: var(--br2);
        background-color: var(--c10);
        border: var(--sl) solid var(--c11);
    }

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

    .card-2 .card-inner {
        display: flex;
        flex-direction: column;
        padding: 0 40rem 30rem;
        flex: auto;
    }

    .card-2 .card-header {
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        mix-blend-mode: darken;
    }

    .card-2 .card-media {
        z-index: 1;
        position: absolute;
        top: 0%;
        right: 0%;
        left: 0%;
        display: flex;
    }

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

    .card-2 .card-content {
        padding: 0 20rem 20rem 0;
        position: relative;
        z-index: 1;
        flex: auto;
    }

    .card-2 .card-subtitle {
        margin-top: 15rem;
        color: var(--c9);
    }

    .card-2 .card-footer {
        position: relative;
        z-index: 1;
        margin-top: auto;
    }

    .card-3 {
        padding: 40rem;
    }

    .card-3::before,
    .card-3::after {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        pointer-events: none;
        width: 20rem;
        border: var(--sl) solid;
        opacity: .2;
        border-radius: 5rem;
    }

    .card-3::before {
        left: 0;
        clip-path: inset(0 50% 0 0);
    }

    .card-3::after {
        right: 0;
        clip-path: inset(0 0 0 50%);
    }

    .card-3 .card-header {
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        width: max(55px, 60rem);
        height: max(55px, 60rem);
        margin-bottom: 80rem;
    }

    .card-3 .card-subtitle {
        margin-top: 10rem;
        color: var(--c9);
    }

    .card-3 .card-footer {
        margin-top: 30rem;
        padding-bottom: 5rem;
    }


}

/* sections */

@media screen {

    .s1-1 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
        grid-template-rows: auto auto 1fr;
        align-items: flex-start;
    }

    .s1-2 {
        grid-column: 5/11;
        grid-row: 1/3;
    }

    .s1-3 {
        grid-column: 1/4;
    }

    .s1-4 {
        grid-column: 5/11;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 35rem;
    }

    .s1-4:not(:first-child) {
        margin-top: 35rem;
    }

    .s1-4-1 {
        overflow: hidden;
        border-radius: var(--br1);
    }

    .s1-4-2 {
        color: var(--c9);
    }

    .s1-5 {
        grid-column: 1/4;
        grid-row: 2/4;
        position: sticky;
        top: 100rem;
        margin-top: 40rem;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 20rem;
    }

    .s1-6 {
        display: flex;
        align-items: center;
        color: var(--c2);
        font-weight: 400;
        border-left: max(2px, 2rem) solid var(--c2);
        padding-left: 20rem;
    }

    .s1-6.disabled {
        color: var(--c9);
        pointer-events: none;
    }

    .s1-6.disabled .s1-6-1 {
        color: var(--c5);
    }

    .s2-1 {
        margin-bottom: 25rem;
    }

    .s2-2 {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: 80rem var(--gap);
    }

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

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

    .s3-1 {
        position: relative;
        z-index: 1;
        margin: 0 var(--awr);
        background-color: var(--c2);
        color: var(--c0);
    }

    .s3-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .5;
    }

    .s3-3 {
        flex: auto;
    }

    .s3-3 .section-header-subtitle {
        font-size: var(--f-m);
        max-width: none;
        color: inherit;
    }

    .s3-4 {
        margin-top: 50rem;
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
    }

    .s3-4-1 {
        grid-column: 1/5;
        padding-bottom: 5rem;
        border-bottom: var(--sl) solid var(--c8);
    }

    .s3-4-2 {
        grid-column: 5/12;
        grid-row-start: 2;
        margin-top: -.7em;
    }

    .s3-4-3 {
        grid-column: 5/10;
        grid-row-start: 3;
        margin-top: 40rem;
    }

    .s3-5 {
        position: relative;
        z-index: 1;
        padding: 120rem var(--wr);
        min-height: calc(var(--app-height) - var(--headroom-height));
        display: flex;
        flex-direction: column;
    }

    .s3-5::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background-image: linear-gradient(var(--c2), transparent);
        opacity: .7;
    }

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

    .s4-2 {
        grid-column: 1/4;
    }

    .s4-3 {
        grid-column: 5/9;
        overflow: hidden;
        border-radius: var(--br1);
    }

    .s4-4 {
        grid-column: 9/-1;
        padding-left: 60rem;
        color: var(--c9);
    }

    .s5-1 .section-header-title {
        grid-column: 5/-1;
    }

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

    .s6-2 {
        grid-column: 1/5;
    }

    .s6-3 {
        grid-column: 5/10;
    }

    .s6-3-2 {
        margin-top: 20rem;
        color: var(--c9);
        font-size: var(--f-s);
    }

    .s6-4 {
        grid-column: 1/5;
    }

    .s6-4-1 {
        max-width: 250rem;
    }

    .s6-5 {
        grid-column: 5/10;
    }

    .s6-5-1 {
        margin-bottom: 15rem;
        color: var(--c6);
    }

    .s6-5-2 {
    }

    .s7-1 .section-header-title {
        grid-column: 5/10;
    }

    .s7-1 .section-header-subtitle {
        grid-column: 5/10;
    }

    .s7-3 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: 0 var(--gap);
        align-items: flex-start;
    }

    .s7-3:not(:first-child) {
        margin-top: 20rem;
    }

    .s7-4 {
        grid-column: 1/5;
        padding-top: 40rem;
    }

    .s7-5 {
        grid-column: 5/10;
        display: flex;
        position: relative;
    }

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

    .s7-6 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s7-7 {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        display: flex;
        align-items: flex-end;
        width: 100%;
        height: var(--sl);
        top: 50%;
        transition: opacity 1s 0s;
    }

    .s7-7-1 {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-image: url(../img/pin.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
        width: 60rem;
        height: 90rem;
    }

    .s7-7-2 {
        width: calc((100% - 4 * var(--gap)) / 5 * 6.5 + var(--gap) * 6);
        background-image: linear-gradient(to right, var(--c8), transparent);
        flex: none;
        position: absolute;
        right: 50%;
        background-repeat: no-repeat;
        background-size: 100% var(--sl);
        background-position: bottom;
        clip-path: inset(0 0% 0 0);
        transition: clip-path 1s 1.5s;
    }

    .s7-8 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        clip-path: inset(0 0 0% 0);
        transition: clip-path 1s;
        overflow: hidden;
    }

    .s7-8::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background-image: linear-gradient(to right, var(--c0), transparent, transparent, transparent, var(--c0)), linear-gradient(to bottom, var(--c0), transparent, transparent, transparent, var(--c0));
    }

    .s7-8-1 {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 1px;
    }

    .s7-6.active {
        z-index: 2;
    }

    .s7-6:not(.active) .s7-8 {
        clip-path: inset(0 0 100% 0);
        transition-delay: 1s;
    }

    .s7-6:not(.active) .s7-7 {
    }

    .s7-6:not(.active) .s7-7-2 {
        clip-path: inset(0 100% 0 0);
        transition-delay: 0s;
    }

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

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

    .s8-3 {
        grid-column: 1/5;
    }

    .s8-4 {
    }

    .s8-5 {
        grid-column: 5/-1;
        display: flex;
        position: relative;
        overflow: hidden;
        border-radius: var(--br1);
    }

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

    .s8-6 {
        grid-column: 5/11;
        margin-top: 15rem;
        color: var(--c9);
    }

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

    .s9-2 {
        grid-column: 1/5;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 160rem;
    }

    .s9-3 {
        grid-column: 5/10;
    }

    .s9-6 {
        margin-top: 30rem;
        color: var(--c7);
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
    }

    .s9-6-1:not(:last-child)::after {
        content: "/";
        padding: 0 10rem;
    }

    .s9-7-2 {
        margin-top: 40rem;
    }

    .s9-8 {
        margin-top: 50rem;
    }

    .s9-8-1 {
        max-width: 420rem;
        color: var(--c9);
    }

    .s9-8-2 {
        margin-top: 15rem;
    }

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

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

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

    .s11-2 {
        grid-column: 1/4;
        padding: 80rem 0;
    }

    .s11-2 ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 0;
    }

    .s11-2 li {
        position: relative;
        padding-bottom: 5rem;
        transition: all .25s;
        margin-bottom: 12rem;
    }

    .s11-2 li::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: currentColor;
        opacity: .4;
        height: var(--sl);
        transition: transform .25s;
        will-change: transform;
        transform-origin: left;
    }

    .s11-2 li:not(.active) {
        margin-bottom: 0;
        color: var(--c7);
    }

    .s11-2 li:not(.active)::before {
        transform: scaleX(0);
    }

    .s11-3 {
        grid-column: 5/-1;
        padding: 80rem 0 120rem;
        position: relative;
        overflow: hidden;
        margin-top: -80rem;
    }

    .s11-3::before,
    .s11-3::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 100rem;
        pointer-events: none;
        z-index: 2;
    }

    .s11-3::before {
        top: 0;
        background-image: linear-gradient(var(--c0), transparent);
    }

    .s11-3::after {
        bottom: 0;
        background-image: linear-gradient(transparent, var(--c0));
    }

    .s11-3 .swiper {
        overflow: visible;
    }

    .s11-5 {
        display: none;
    }

    .s11-6 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 30rem;
        padding: 30rem 0;
    }

    .s12 .section-header-subtitle {
        max-width: 650rem;
    }

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

    .s12-2 {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-gap: 1px;
        padding: 1px;
    }

    .s12-3 {
        position: relative;
        display: flex;
        margin: 0;
    }

    .s12-3::before,
    .s12-3::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: -1px;
        box-shadow: inset 0 0 0 1px var(--c12);
        border-radius: var(--br2);
        pointer-events: none;
        user-select: none;
    }


    .s12-4 {
        grid-column: 5/-1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: 1px;
        padding: 1px;
    }

    .s12-5 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 25rem 30rem 40rem;
    }

    .s12-5-1 {
        background-color: var(--c2);
        border-radius: 50%;
        width: max(35px, 40rem);
        height: max(35px, 40rem);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5rem;
    }

    .s12-5-2 {
        margin-top: 50rem;
        font-weight: 400;
        color: var(--c9);
    }

    .s12-6 {
        position: relative;
        display: flex;
        margin: 0 auto;
        width: 100%;
        max-width: 180rem;
    }

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


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

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

    .s13-2 {
        display: flex;
        width: 100%;
        position: relative;
        border-radius: var(--br1);
        overflow: hidden;
        will-change: transform;
        transition: transform .25s;
        transform-origin: right bottom;
    }

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

    .s13-2::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--c2);
        z-index: 1;
        opacity: .7;
        transition: opacity .25s;
    }

    .s13-3 {
        grid-column: 5/12;
    }

    .s13-3 .swiper {
        overflow: visible;
        margin: 0 calc(var(--gap) / -2);
    }

    .s13-3 .swiper-wrapper {
        align-items: flex-end;
    }

    .s13-3 .swiper-slide {
        padding: 0 calc(var(--gap) / 2);
    }

    .s13-3 .swiper-slide-active .s13-2 {
        transform: scale(1);
    }

    .s13-3 .swiper-slide-active .s13-2::after {
        opacity: 0;
    }

    .s13-3 .swiper-slide-active ~ .swiper-slide .s13-2 {
        transform-origin: left bottom;
    }

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

    .s14-1 {
        display: flex;
        align-items: center;
        background-color: var(--c2);
        color: var(--c0);
    }

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

    .s14-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s14-3 {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
        padding: 120rem 0;
        width: 100%;
    }

    .s14-4 {
        grid-column: 5/9;
    }

    .s14-4-2 {
        margin-top: 30rem;
    }

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

    .s15-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--gap);
        align-items: flex-end;
        grid-column: 5/-1;
    }

    .s15-3 {
        position: relative;
        overflow: hidden;
        display: flex;
        border-radius: var(--br1);
    }

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

    .s15-4 {
        padding-left: 60rem;
    }

    .s15-4-2 {
        margin-top: 10rem;
    }

    .s15-4-3 {
        margin-top: 40rem;
        color: var(--c9);
    }

    .s15-4-4 {
        margin-top: 55rem;
    }

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

    .s16-2 {
        grid-column: 1/-1;
        margin-bottom: 20rem;
    }

    .s16-2 .section-header-subtitle {
        max-width: none;
    }

    .s16-3 {
        position: relative;
        overflow: hidden;
        display: flex;
        border-radius: var(--br1);
        min-height: 400rem;
    }

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

    .s16-3::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: linear-gradient(transparent, var(--c2));
        opacity: .8;
    }

    .s16-4 {
        grid-column: 5/-1;
        display: grid;
        grid-gap: var(--gap);
        grid-template-columns: 1fr 1fr;
    }

    .s16-5 {
    }

    .s16-6 {
        grid-column: 1/3;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 30rem;
    }

    .s16-7-1 {
        font-size: var(--f-b);
        letter-spacing: -.04em;
    }

    .s16-7-2 {
        color: var(--c6);
        margin-top: 10rem;
    }

    .s16-8 {
        grid-column: 5/11;
        color: var(--c9);
    }

    .s16-8:not(:last-child) {
        margin-bottom: 25rem;
    }

    .s17-1 {
        overflow: hidden;
        position: relative;
        display: flex;
        border-radius: var(--br1);
        --offset: 0;
    }

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

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

    .s17-1::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--offset) * 1%);
        width: 0;
        background-color: var(--c0);
        z-index: 2;
        margin-left: 0;
    }

    .s17-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .s17-3 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        clip-path: inset(0 0 0 calc(var(--offset) * 1%));
    }

    .s17-5 {
        display: grid;
        grid-template-columns: var(--cols);
        grid-gap: var(--gap);
    }

    .s17-6 {
        grid-column: 1/-1;
        position: relative;
    }

    .s17-7 {
        grid-column: 5/11;
        margin-top: 20rem;
        order: -1;
        color: var(--c9);
    }

    .s17-8 {
        position: absolute;
        top: 25%;
        left: 0;
        height: 50vh;
        z-index: 2;
        opacity: 0;
        width: 100%;
        pointer-events: none;
    }

    .s18-1 {
        display: flex;
        width: 100%;
        overflow: hidden;
        position: relative;
        background-color: var(--c2);
        color: var(--c0);
        border-radius: var(--br1);
        align-items: flex-end;
    }

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

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

    .s18-2 .swiper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .s18-2::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(transparent, var(--c2));
        opacity: 1;
        z-index: 1;
    }

    .s18-3 {
        position: relative;
        z-index: 1;
        margin: 30rem 50rem;
        overflow: hidden;
    }

    .s18-3::before,
    .s18-3::after {
        content: "";
        border: var(--sl) solid;
        border-radius: .25em;
        width: 15rem;
        position: absolute;
        bottom: 0;
        height: 75%;
        z-index: 1;
    }

    .s18-3::before {
        clip-path: inset(0 50% 0 0);
        left: 0;
    }

    .s18-3::after {
        clip-path: inset(0 0 0 50%);
        right: 0;
    }

    .s18-3 .swiper {
        mask-image: linear-gradient(90deg, transparent, black, transparent);
    }

    .s18-3 .swiper-slide {
        width: auto;
        padding: 5rem 0;
    }

    .s18-4 {
        white-space: nowrap;
        margin: 0 100rem;
        will-change: transform;
        transition: transform .15s;
        transform-origin: bottom;
        font-size: var(--f-m);
    }

    .s18-5 {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 20rem;
        z-index: 1;
    }

    .s18-5-1 {
        margin: 0 auto;
        width: 0;
        height: var(--sl);
        background-color: var(--c0);
        transition: width .15s;
    }

    .s18-3 .swiper-slide:not(.swiper-slide-active) .s18-4 {
        transform: scale(.75);
        opacity: .6;
        cursor: pointer;
    }

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

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

    .s19-1 {
        min-height: var(--app-height);
        padding: var(--headroom-height) var(--wr) 0;
        margin: 0 var(--awr);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .s19-2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: .1;
        overflow: hidden;
    }

    .s19-2::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30%;
        background-image: linear-gradient(transparent, var(--c0));
        z-index: 1;
    }

    .s19-3 {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 1;
        padding: 120rem 0;
        align-items: center;
    }

    .s19-4 {
        max-width: 1240rem;
        text-align: center;
    }

    .s19-5 {
        margin-top: 20rem;
        font-size: var(--f-m);
        max-width: 600rem;
        text-align: center;
    }

    .s19-6 {
        margin-top: 50rem;
        max-width: 600rem;
        width: 100%;
    }

    .s20-1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 60rem var(--gap);
    }

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

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

    .s20-4 ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: .75em var(--gap);
    }

    .s21 {
        background-color: var(--c2);
        color: var(--c0);
    }

    .s21:first-child {
        margin-top: 0;
    }

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

    .s21-1 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: var(--app-height);
    }

    .s21-2 {
        padding: 25rem 0;
        display: grid;
        grid-template-columns: auto;
        grid-gap: 50rem;
        grid-template-rows: 1fr auto 1fr;
    }

    .s21-3 {
        position: relative;
        margin-right: var(--awr);
    }

    .s21-3 img {
        object-position: top left;
    }

    .s21-5 {
        display: flex;
        flex-direction: column;
        margin: auto;
        padding-right: var(--wr);
        max-width: 550rem;
    }

    .s21-5-1 .title {
    }

    .s21-5-2 {
        font-size: var(--f-m);
        margin-top: 40rem;
    }

    .s21-5-3 {
        margin-top: 40rem;
    }

    .s404 {
        overflow: hidden;
    }

    .s404:first-child {
        margin-top: 0;
    }

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

    .s404-1 {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: var(--gap);
        align-items: flex-start;
        padding: 160rem 0;
    }

    .s404-4 {
        margin-top: 15rem;
        color: var(--c9);
    }

    .s404-5 {
        margin-top: 50rem;
        display: grid;
        grid-template-columns: auto;
        grid-gap: var(--gap);
    }

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

    .page-header-subtitle b::-moz-selection,
    .section-header-subtitle b::-moz-selection,
    .layer b::-moz-selection,
    .s3 *::-moz-selection,
    .s14 *::-moz-selection,
    .s18 *::-moz-selection,
    .s21 *::-moz-selection,
    .footer *::-moz-selection {
        background-color: var(--c0);
        color: var(--c2);
        -webkit-text-fill-color: var(--c2);
    }

    .page-header-subtitle b::selection,
    .section-header-subtitle b::selection,
    .layer b::selection,
    .s3 *::selection,
    .s14 *::selection,
    .s18 *::selection,
    .s21 *::selection,
    .footer *::selection {
        background-color: var(--c0);
        color: var(--c2);
        -webkit-text-fill-color: var(--c2);
    }


    .card-1 .card-footer a,
    .card-3 .card-footer a,
    .s1-6-1 a,
    .s9-4:first-child .s9-6-1 a,
    .s15-4-4 a,
    .s20-4 a {
        font-weight: 400;
        transition: background-size .25s;
        background-repeat: no-repeat;
        background-image: linear-gradient(currentColor, currentColor);
        display: inline;
        padding-bottom: .2em;
        background-size: 100% var(--sl);
        background-position: left bottom;
    }

}

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

    :root {

        --wr: 15rem;

        --gap: 60rem;

        --br1: 8rem;
        --br2: 12rem;

        --btn: 40rem;

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


        --f-s: 14rem;
        --f-d: 16rem;
        --f-m: 16rem;
        --f-b: 22rem;
        --f-l: 40rem;
        --f-xl: 40rem;

        --mw: 640rem;


    }

    html {
        font-size: 1px;
    }

    .desktop {
        display: none !important;
    }

    .topbar {
        grid-template-columns: 1fr auto;
        padding: 15rem 0;
        position: relative;
    }

    .topbar::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: var(--sl);
        background-color: var(--c7);
        transition: margin .25s;
    }

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

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

    .header::before {
        height: 100%;
        background-image: linear-gradient(var(--c0), var(--c0));
    }

    .header.active .topbar::after {
        margin: 0 var(--awr);
    }

    .footer {
        padding: 50rem 0;
    }

    .footer-grid {
        grid-gap: 0 20rem;
        grid-template-areas: "f1 f1" "f2 f2" "f3 f3" "f4 f5" "f6 f6" "f7 f7" "f8 f8";
        grid-template-columns: 1fr auto;
    }

    .f2 {
        margin-top: 80rem;
    }

    .f2 .footer-nav ul {
        grid-template-columns: 1fr 1fr;
        grid-gap: 10rem;
    }

    .f3 {
        margin-top: 60rem;
        margin-bottom: 60rem;
    }

    .f6 {
        margin-top: 60rem;
    }

    .f7 {
        margin-top: 20rem;
    }

    .f8 {
        margin-top: 20rem;
        max-width: 290rem;
    }

    .badge-text {
        padding: 0;
    }

    .breadcrumbs {
        margin-top: 20rem;
        margin-bottom: 60rem;
    }

    .pagination {
        width: 100%;
    }

    .pagination-nav {
        margin: 0 auto;
    }

    .switch {
        width: 100%;
    }

    .switch-inner {
        width: 100%;
    }

    .selector-holder {
        width: 100%;
    }

    .verification-grid {
        grid-template-columns: auto;
        grid-gap: 15rem;
    }

    .verification-grid-item {
    }

    .verification-grid-item:nth-child(1) {
        padding: 0 10rem;
        border-right: none;
        border-bottom: var(--sl) solid var(--c8);
        padding-bottom: 15rem;
    }

    .verification-grid-item:nth-child(2) {
        padding: 0 10rem;
        grid-column: auto;
    }

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

    .card-1 .card-header {
        margin-bottom: 20rem;
    }

    .card-1 .card-info {
        flex-direction: column;
    }

    .card-1 .card-author::after {
        display: none;
    }

    .card-1 .card-date:not(:first-child) {
        margin-top: .5em;
    }

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

    .card-2::before {
        display: none;
    }

    .card-2 .card-header {
        bottom: auto;
        position: relative;
        display: flex;
        margin: 0 -20rem;
    }

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

    .card-2 .card-media {
        top: 0%;
    }

    .card-2 .card-media__front {
        display: none;
    }

    .card-2 .card-inner {
        padding: 0 20rem 20rem;
    }

    .card-2 .card-content {
        padding: 0 0 30rem;
    }

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

    .card-3 {
        padding: 30rem;
    }

    .card-3 .card-header {
        margin-bottom: 40rem;
    }

    .page-header {
        margin-bottom: 60rem;
    }

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

    .page-header-subtitle:last-child,
    .page-header-title:last-child {
        padding-bottom: 30rem;
    }

    .section-header {
        grid-gap: 0;
    }

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

    .section-header-pretitle {
        grid-column: auto;
        margin-bottom: 25rem;
    }

    .section-header-title {
        grid-column: auto;
    }

    .section-header-subtitle {
        grid-column: auto;
        margin-top: 20rem;
    }

    .section-header-subtitle br {
        display: none;
    }

    .section-header-media::before {
        padding-top: 100%;
    }

    .section {
        margin-bottom: 120rem;
    }

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


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

    .s1-2 {
        grid-column: auto;
        grid-row: auto;
    }

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

    .s1-4 {
        grid-column: auto;
        grid-row: auto;
        grid-gap: 60rem;
    }

    .s1-4:not(:first-child) {
        margin-top: 30rem;
    }

    .s1-5 {
        grid-column: auto;
        grid-row: auto;
        margin-top: 60rem;
        top: auto;
        position: static;
    }

    .s2-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .s3-4-1 {
        grid-column: auto;
        padding-bottom: .5em;
    }

    .s3-4-2 {
        grid-column: auto;
        margin-top: .5em;
        grid-row: auto;
    }

    .s3-4-3 {
        grid-column: auto;
        grid-row: auto;
    }

    .s3-5 {
        padding: 60rem var(--wr) 80rem;
    }

    .s4-1 {
        grid-gap: 0;
    }

    .s4-2 {
        grid-column: auto;
    }

    .s4-2-2 {
        margin-top: 20rem;
    }

    .s4-3 {
        grid-column: auto;
        margin-top: 30rem;
    }

    .s4-4 {
        grid-column: auto;
        margin-top: 35rem;
        padding: 0;
    }

    .s5-1 .section-header-title {
        grid-column: auto;
    }

    .s6-1 {
        grid-gap: 0;
    }

    .s6-2 {
        grid-column: auto;
        order: -2;
        margin-bottom: 25rem;
    }

    .s6-3 {
        grid-column: auto;
    }

    .s6-4 {
        grid-column: auto;
        order: -1;
        margin-bottom: 60rem;
    }

    .s6-4-1 {
        max-width: 290rem;
    }

    .s6-5 {
        grid-column: auto;
        margin-top: 60rem;
    }

    .s7-1 .section-header-title,
    .s7-1 .section-header-subtitle {
        grid-column: auto;
    }

    .s7-4 {
        grid-column: auto;
        padding-top: 0;
    }

    .s7-5 {
        grid-column: auto;
        margin-top: 20rem;
    }

    .s7-7-1 {
        width: 35rem;
        height: 50rem;
    }

    .s7-7-2 {
        display: none;
    }

    .s8-3 {
        grid-column: auto;
        margin-bottom: 30rem;
    }

    .s8-5 {
        grid-column: auto;
    }

    .s8-5::before {
        padding-top: 60%;
    }

    .s8-6 {
        grid-column: auto;
        margin-top: 25rem;
    }

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

    .s9-2 {
        grid-column: auto;
        order: 1;
        grid-gap: 40rem;
    }

    .s9-3 {
        grid-column: auto;
    }

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

    .s9-7-2 {
        margin-top: 20rem;
    }

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

    .s9-8-2 {
        margin-top: 20rem;
    }

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

    .s11-2 {
        display: none;
    }

    .s11-3 {
        grid-column: auto;
        margin: 0;
        padding: 0;
    }

    .s11-3::before,
    .s11-3::after {
        display: none;
    }

    .s11-3 .swiper-wrapper {
        flex-direction: column;
    }

    .s11-3 .swiper-slide:not(:first-child) {
        margin-top: 60rem;
    }

    .s11-5 {
        display: block;
        margin-bottom: 25rem;
    }

    .s11-6 {
        grid-template-columns: auto;
        grid-gap: 30rem;
        padding: 0;
    }

    .s12-2,
    .s12-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-column: 1/-1;
    }

    .s12-3 {
        padding: 20rem;
    }

    .s12-5 {
        padding: 0;
    }

    .s12-6 {
        max-width: 120rem;
    }

    .s12-3:nth-child(4n + 1)::before,
    .s12-3:nth-child(4n + 2)::before {
        display: none;
    }

    .s12-3:nth-child(4n + 1)::after,
    .s12-3:nth-child(4n + 2)::after {
        clip-path: inset(0% calc(100% - var(--br2)) 0% 0%);
    }

    .s12-3:nth-child(4n + 3)::before,
    .s12-3:nth-child(4n + 4)::before {
        clip-path: inset(0% 0% 0% var(--br2));
    }

    .s12-3:nth-child(4n + 3)::after,
    .s12-3:nth-child(4n + 4)::after {
        display: none;
    }

    .s12-3:nth-child(1)::before {
        clip-path: inset(0% 0% var(--br2) 0%);
        display: block;
    }

    .s12-3:nth-child(1)::after {
        clip-path: inset(calc(100% - var(--br2)) var(--br2) 0% 0%);
    }

    .s12-3:nth-child(2)::after {
        clip-path: inset(calc(100% - var(--br2)) var(--br2) 0% 0%);
    }

    .s12-3:nth-child(4n + 1):nth-last-child(2)::before {
        clip-path: inset(var(--br2) 0% 0% var(--br2));
        display: block;
    }

    .s12-3:nth-child(4n + 2):nth-last-child(1)::after {
        clip-path: inset(0% calc(100% - var(--br2)) calc(100% - var(--br2)) 0%);
    }

    .s12-3:nth-child(4n + 3):nth-last-child(2)::before {
        clip-path: inset(0% 0% var(--br2) var(--br2));
    }

    .s12-3:nth-child(4n + 4):nth-last-child(1)::after {
        clip-path: inset(calc(100% - var(--br2)) calc(100% - var(--br2)) 0% 0%);
        display: block;
    }

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

    .s14-1 {
        min-height: var(--app-height);
    }

    .s14-4 {
        grid-column: auto;
    }

    .s15-2 {
        grid-column: auto;
        grid-template-columns: auto;
        grid-gap: 25rem;
    }

    .s15-4 {
        padding: 0;
    }

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

    .s16-2 {
        margin-bottom: 20rem;
    }

    .s16-3 {
        min-height: 0;
    }

    .s16-3::before {
        padding-top: 100%;
    }

    .s16-4 {
        grid-column: auto;
        grid-template-columns: auto;
        grid-gap: 60rem;
    }

    .s16-7 {
        margin-top: 25rem;
    }

    .s16-8 {
        grid-column: auto;
        order: 1;
        margin: 25rem 0 0;
    }

    .s17-1::before {
        padding-top: 115%;
    }

    .s17-1::after {
        display: none;
    }

    .s17-3 {
        display: none;
    }

    .s17-5 {
        margin-top: 25rem;
        grid-gap: 25rem;
    }

    .s17-6 {
        order: -1;
    }

    .s17-7 {
        grid-column: auto;
        margin: 0;
        max-width: 320rem;
    }

    .s18-1 {
        flex-direction: column;
        background-color: transparent;
        color: var(--c1);
        border-radius: 0;
        overflow: visible;
    }

    .s18-1::before {
        display: none;
    }

    .s18-2 {
        position: relative;
        display: flex;
        height: auto;
        opacity: 1;
        border-radius: var(--br1);
        overflow: hidden;
    }

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

    .s18-3 {
        width: 100%;
        margin: 20rem 0 0;
    }

    .s18-3::before,
    .s18-3::after {
        height: 100%;
    }

    .s18-4 {
        margin: 0 40rem;
        text-align: center;
    }

    .s18-5 {
        bottom: auto;
        top: 100%;
    }

    .s18-5-1 {
        background-color: var(--c1);
    }

    .s18-3 .swiper-slide {
        padding: 0;
    }

    .s18-3 .swiper-slide:not(.swiper-slide-active) .s18-4 {
        transform: scale(1);
    }

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

    .s19-3 {
        padding: 100rem 0;
        align-items: flex-start;
    }

    .s19-4 {
        text-align: left
    }

    .s19-5 {
        text-align: left
    }

    .s19-6 {
        margin-top: 20rem;
    }

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

    .s20-4 {
        margin-top: 15rem;
    }

    .s20-4 ul {
        grid-template-columns: auto;
    }

    .s21:first-child {
        margin-top: 0;
    }

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

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

    .s21-2 {
        padding: 15rem 0;
    }

    .s21-3 {
        display: none;
    }

    .s21-4 .topbar-logo {
        max-width: none;
    }

    .s21-5 {
        padding: 0;
    }

    .s404-1 {
        grid-template-columns: auto;
        grid-gap: 0;
        padding: 0 0 100rem;
    }

    .s404-5 {
        margin-top: 40rem;
        grid-gap: 20rem;
    }

    .s404-6 {
        top: auto;
        bottom: 0;
        transform: translateY(2%);
    }

    .s404-7 {
        margin-bottom: 60rem;
    }

    .popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: var(--c0);
        color: var(--c1);
        z-index: 999;
        transition: all .5s;
        bottom: 0;
    }

    .popup:not(.active) {
        transform: translateY(100%);
    }

    .popup-inner {
        padding: 15rem 0 20rem;
        min-height: var(--app-height);
        overflow: auto;
        display: flex;
        flex-direction: column;
    }

    .popup-header {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-gap: 20rem;
        align-items: center;
        padding-bottom: 20rem;
        border-bottom: var(--sl) solid var(--c7);
        margin-bottom: 30rem;
    }

    .popup-header-logo {
        max-width: 290rem;
    }

    .popup-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24rem;
        height: 24rem;
    }

    .popup-content {
        flex: auto;
    }

    .popup-footer {
        margin-top: 40rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .popup-footer-action {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 15rem;
        width: 100%;
    }

    .popup-social {
        overflow: hidden;
        margin: 0 auto;
    }

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

    .popup-social ul {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        margin: -5rem;
    }

    .popup-social li {
        margin: 5rem;
    }

    .popup-social li:not(:last-child)::after {
        content: "/";
        padding-left: 10rem;
        color: var(--c7);
    }

    .popup-social li:first-child::before,
    .popup-social li:last-child::after {
        content: "\a0";
        border: var(--sl) solid;
        display: inline-block;
        border-radius: .25em;
        width: 15rem;
        color: var(--c7);
    }

    .popup-social li:first-child::before {
        clip-path: inset(0 50% 0 0);
    }

    .popup-social li:last-child::after {
        clip-path: inset(0 0 0 50%);
    }

    .menu ul {
        display: grid;
        grid-template-columns: auto;
        grid-gap: 1.5em;
        text-align: center;
    }

    .popup-overlay {
        pointer-events: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--c2);
        transition: opacity .5s;
        opacity: 0;
    }

    .popup.active ~ .popup-overlay {
        opacity: 1;
    }

}


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

    .mobile {
        display: none !important;
    }

    .footer-grid {
        grid-template-areas:
        "f1 f1 f1 f1 . . . . . . . f5"
        "f2 f2 f2 f2 f2 f2 . f3 f3 . f4 f4"
        "f8 f8 f8 f8 f8 f8 . f7 f7 f7 f6 f6";
    }

    .f2 .footer-nav ul {
        grid-auto-flow: dense;
    }

    .f2 .footer-nav li:nth-child(odd):not(.last-col) {
        grid-column: 1/2;
    }

    .f2 .footer-nav li:nth-child(even):not(.last-col) {
        grid-column: 2/3;
    }

    .last-col {
        order: -1;
        grid-column: 3/4;
    }

    .s1-3 {
        order: -1;
    }

    .s1-5 {
        order: -1;
    }

    .s12-4 .s12-3:nth-child(6n + 1)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 1)::after {
        clip-path: inset(var(--br2) var(--br2) 0% 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 2) {
        margin-bottom: 10rem;
    }

    .s12-4 .s12-3:nth-child(6n + 2)::before {
        display: none;
    }

    .s12-4 .s12-3:nth-child(6n + 2)::after {
        clip-path: inset(var(--br2) 0% 0% 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 3)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 3)::after {
        clip-path: inset(var(--br2) 0% 0% calc(100% - var(--br2)));
    }

    .s12-4 .s12-3:nth-child(6n + 4)::before {
        display: none;
    }

    .s12-4 .s12-3:nth-child(6n + 4)::after {
        clip-path: inset(0% 0% var(--br2) calc(100% - var(--br2)));
    }

    .s12-4 .s12-3:nth-child(6n + 5)::before {
        display: none;
    }

    .s12-4 .s12-3:nth-child(6n + 5)::after {
        clip-path: inset(calc(100% - var(--br2)) 0% 0% 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 6)::before {
        clip-path: inset(0% var(--br2) var(--br2) 0%);
    }

    .s12-4 .s12-3:nth-child(6n + 6)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 1)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 1)::after {
        clip-path: inset(var(--br2) calc(100% - var(--br2)) 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 2)::before {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 2)::after {
        clip-path: inset(var(--br2) 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 3)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 3)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 4)::before {
        clip-path: inset(var(--br2) var(--br2) 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 4)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 5)::before {
        clip-path: inset(0% 0% 0% var(--br2));
    }

    .s12-2 .s12-3:nth-child(12n + 5)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 6)::before {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 6)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 7)::before {
        clip-path: inset(0% 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 7)::after {
        clip-path: inset(0% 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 8)::before {
        clip-path: inset(0% 0% 0% calc(100% - var(--br2)));
    }

    .s12-2 .s12-3:nth-child(12n + 8)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 9)::before {
        clip-path: inset(0% calc(100% - var(--br2)) var(--br2) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 9)::after {
        clip-path: inset(var(--br2) 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 10)::before {
        clip-path: inset(0% 0% calc(100% - var(--br2)) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 10)::after {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 11)::before {
        display: none;
    }

    .s12-2 .s12-3:nth-child(12n + 11)::after {
        clip-path: inset(var(--br2) 0% 0% 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 12)::before {
        clip-path: inset(0% var(--br2) calc(100% - var(--br2)) 0%);
    }

    .s12-2 .s12-3:nth-child(12n + 12)::after {
        display: none;
    }

    .s13-2 {
        transform: scale(.56);
    }

    .s16-5:nth-child(odd):last-child {
        grid-column: 1/-1;
    }

    .s16-5 .s16-7 {
        display: none;
    }

}

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


    html {
        font-size: 1px;
    }


}

/* hover animations */

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

    .button,
    .go-top {
        transition: all .25s;
    }

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

    .button__secondary:hover {
        border-color: var(--c1);
        color: var(--c0);
        background-color: var(--c1);
    }

    .button__secondary.button__contrast:hover {
        border-color: var(--c0);
        color: var(--c1);
        background-color: var(--c0);
    }

    .go-top:hover {
        background-color: var(--c0);
        border-color: var(--c0);
        color: var(--c2);
    }

    .card-1 .card-media {
        transition: transform .25s;
        will-change: transform;
    }

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

    .s20-3 a,
    .topbar-nav a,
    .f6 a,
    .f7 a,
    .footer-nav a {
        transition: background-size .25s;
        background-size: 0 var(--sl);
        background-repeat: no-repeat;
        background-position: right bottom;
        background-image: linear-gradient(currentColor, currentColor);
        display: inline;
        padding-bottom: .2em;
    }

    .s20-3 a {
        padding-bottom: 0;
    }

    .s20-3 a:hover,
    .topbar-nav .current a,
    .f6 a:hover,
    .f7 a:hover,
    .footer-nav a:hover,
    .topbar-nav a:hover {
        background-size: 100% var(--sl);
        background-position: left bottom;
    }

    .card-1 .card-footer :hover,
    .card-3 .card-footer :hover,
    .s1-6-1 :hover,
    .s15-4-4 :hover,
    .s20-4 :hover {
        background-size: 0 var(--sl);
        background-position: right bottom;
    }

    .card-2 .card-content {
        transition: transform .25s;
    }

    .card-2 .card-footer {
        transition: all .25s;
    }

    .card-2 .card-media {
        transition: opacity .25s;
    }

    .card-2:not(:hover) .card-content {
        transform: translateY(var(--btn));
    }

    .card-2:not(:hover) .card-footer {
        transform: translateY(var(--btn));
        opacity: 0;
    }


    .card-2:hover .card-media__back,
    .card-2:not(:hover) .card-media__front {
        opacity: 0;
    }

    .breadcrumbs li:not(:last-child) a,
    .textbox a,
    .s9-6-1 a,
    .s11-2 li:not(.active),
    .pagination-nav li:not(.current) a {
        transition: color .15s;
    }

    .breadcrumbs li:not(:last-child) a:hover,
    .textbox a:hover,
    .s9-6-1 a:hover,
    .s11-2 li:not(.active):hover,
    .pagination-nav li:not(.current) a:hover {
        color: var(--c1);
    }

    .s12-6 {
        transition: filter .25s;
    }

    .s12-6:not(:hover) {
        filter: grayscale(1);
    }

    .s16-3 {
        transition: background-color .5s;
        background-color: var(--c2);
    }

    .s16-3 img {
        opacity: .8;
    }

    .s16-3::after,
    .s16-3 img {
        transition: opacity .5s;
    }

    .s16-3:hover {
        background-color: transparent;
    }

    .s16-3:hover::after {
        opacity: 0;
    }

    .s16-3:hover img {
        opacity: 1;
    }


    .s17-3 {
        transition: clip-path .2s linear;
    }

    /*
    .s17-1::after{transition: left .5s;}
    .s17-3{transition: clip-path 1s ease-in-out;}
    .s17-1:hover::after{}
    .s17-1.hovered{pointer-events: none;}
    */
    .s18-2::after {
        transition: all .5s;
    }

    .s18-4,
    .pagination-arrow,
    .selector-option {
        transition: opacity .5s;
    }

    .pagination-arrow.disabled,
    .pagination-arrow:not(:hover) {
        opacity: .5;
    }

    .s18-1:hover .s18-2::after {
        opacity: 1;
        transform: translateY(25%);
    }

    .s18-3 .swiper-slide:not(.swiper-slide-active) .s18-4:hover,
    .selector-option:hover {
        opacity: 1;
    }

}