@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: '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(3, 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: 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;}
    
    .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;}
    
}