@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: #161719;
    --c2: #2D2D2D;
    --c3: #D6EBFE;
    
    
    --c4: color-mix(in srgb, currentColor 80%, transparent);
    --c5: color-mix(in srgb, currentColor 10%, transparent);
    --c6: color-mix(in srgb, currentColor 30%, transparent);
    --c7: color-mix(in srgb, currentColor 60%, transparent);
    
    
    --wr: 60rem;
    --awr: calc(-1 * var(--wr));
    
    --gap: 20rem;
    --sl: max(1px, 1rem);
    
    --br1: 20rem;
    
    --btn: max(35px, 40rem);
    
    --altfont: 'Raleway', sans-serif;

    --cols: repeat(12, minmax(0, 1fr));
    
    --f-xs: max(10px, 10rem);
    --f-s: max(14px, 16rem);
    --f-d: max(14px, 18rem);
    --f-m: max(14px, 24rem);
    --f-m1: max(14px, 22rem);
    --f-m2: max(14px, 28rem);
    --f-b: max(14px, 80rem);
    --f-l: max(14px, 140rem);
    
    --mw: 192000px; 
    
    --swiper-theme-color: currentColor;
    
    
    
}


/* globals */

@media screen {

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

    .document{font-weight: 300;font-family: 'Noto sans', sans-serif;font-size: var(--f-d);line-height: 1.2;color: var(--c2);background-color: var(--c0);letter-spacing: -.01em;}
    
    .altfont,
    .title{font-family: var(--altfont);line-height: .86;letter-spacing: -.04em;font-weight: 300;}
    
    .popup-active{}
    
    .wrapper{width: 100%;margin: 0 auto;padding: 0 var(--wr);max-width: var(--mw);}
    
    .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-icon{flex: none;width: max(10px, 12rem);height: max(10px, 12rem);display: flex;align-items: center;justify-content: center;margin: 0 10rem;}
    .button-icon:first-child{margin-left: 0;}
    .button-icon:last-child{margin-right: 0;}
    
    .button__default{background-color: var(--c2);color: var(--c0);border-radius: 999rem;padding: 0 30rem;height: var(--btn);border: var(--sl) solid var(--c2);}
    .button__secondary{background-color: var(--c3);color: var(--c2);border-radius: 999rem;padding: 0 25rem;height: var(--btn);}
    .button__contrast{background-color: var(--c0);color: var(--c2);}
    
    .button__wide{width: 100%;}
     
    .title{width: 100%;margin-left: -.085em;}
    
    .title__default{font-size: var(--f-b);}
    .title__large{font-size: var(--f-l);}
    
    .title__small,
    .textbox h2{font-size: var(--f-m);letter-spacing: 0;text-transform: uppercase;font-weight: 400;}
    
    .container{display: flex;flex-direction: column;min-height: var(--app-height);}
    
    .header{margin-bottom: 65rem;position: sticky;top: 0;z-index: 10;background-color: var(--c0);}
    .header::after{content: "";position: absolute;top: 100%;left: 0;width: 100%;background-color: currentColor;opacity: .1;will-change: transform;transition: transform 1s;height: var(--sl);}
    .header:not(.active)::after{transform: scaleX(0);}
    
    .topbar{display: grid;align-items: center;grid-template-columns: 1fr auto 1fr;grid-gap: var(--gap);padding: 30rem 0;}
    .topbar-logo{max-width: 60rem;}
    .topbar-nav ul{display: grid;grid-auto-flow: column;grid-gap: 75rem;}
    .topbar-action{display: flex;flex-direction: column;align-items: center;margin-left: auto;}
    .topbar-action-main{min-width: 165rem;}
    .topbar-action-secondary{max-width: 135rem;margin-top: 15rem;}
    
    
    .main{margin-top: 0;flex: auto;display: flex;flex-direction: column;overflow-x: clip;}
   
    .section{position: relative;z-index: 1;margin-bottom: 175rem;}
    .section:last-child{margin-bottom: 0;}
    .section:only-child{flex: auto;}
    
    .section-header{display: flex;flex-direction: column;text-align: center;margin-bottom: 80rem;}
    
    .footer{overflow: hidden;margin-top: 0;background-color: var(--c1);color: var(--c0);padding: 100rem 0 25rem;position: relative;}
    .footer::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-repeat: no-repeat;background-position: right;background-size: contain;background-image: url(../img/footer-image.png);opacity: .2;pointer-events: none;}
    
    .footer-grid{grid-template-columns: var(--cols);display: grid;grid-gap: 0 var(--gap);align-items: flex-start;grid-template-rows: auto auto 1fr auto;position: relative;z-index: 1;}
    .f1{max-width: 100rem;grid-row: 1/4;}
    .f2{grid-column: 4/6;}
    .f3{grid-column: 6/10;}
    .f4{grid-column: 10/13;}
    .f5{grid-column: 4/6;grid-row: 2/4;}
    .f6{grid-column: 6/10;height: 1em;}
    .f7{grid-column: 10/13;height: 1.4em;}
    .f8{grid-column: 6/10;}
    .f9{grid-column: 10/13;}
    .f10{margin-top: 135rem;max-width: 80rem;}
    
    .f6 img,
    .f7 img{height: 100%;width: auto;}
    
    .footer-title{font-weight: 500;margin-bottom: 45rem;}
    
    .footer-nav ul{display: grid;grid-template-columns: auto;grid-gap: 15rem;}
    
    .footer-contacts-group{border-top: var(--sl) solid var(--c5);padding-top: 25rem;display: grid;grid-template-columns: 1fr 1fr;grid-gap: 25rem var(--gap);margin-top: 20rem;}
    .footer-contacts:nth-child(n + 3){border-top: var(--sl) solid var(--c5);padding-top: 25rem;}
    .footer-contacts-title{font-weight: 500;margin-bottom: 25rem;}
    .footer-contacts ul{display: grid;grid-template-columns: auto;grid-gap: 15rem;}
    
    .bottombar{border-top: var(--sl) solid var(--c6);margin: 0 var(--awr);padding: 20rem var(--wr) 0;margin-top: 30rem;display: grid;grid-template-columns: var(--cols);grid-gap: var(--gap);align-items: flex-start;color: var(--c7);position: relative;z-index: 1;}
    
    .bottombar-copyright{grid-column: 1/5;}
    .bottombar-policy{grid-column: 6/10;}
    .bottombar-author{grid-column: 10/13;display: flex;align-items: baseline;margin-left: auto;}
    .bottombar-author a{color: var(--c0);}
    
    .dd-icon{width: 1em;height: 1.2em;margin: 0 .3em;color: currentColor;opacity: 1;display: inline-flex;align-items: center;justify-content: center;color: var(--c0);}
    .dd-icon .icon{width: 100%;}
    
    
    .textbox ul,
    .textbox ol{margin: 1em 0;display: grid;grid-template-columns: auto;grid-gap: 0;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: left;counter-increment: index;}
    .textbox h2{margin: 30rem 0 20rem;font-family: var(--altfont);}
    .textbox h2:first-child{margin-top: 0;}
    .textbox a{text-decoration: underline;}
    
    .formbox{display: grid;grid-template-columns: auto;grid-gap: 50rem;}
    .formbox-row{display: flex;}
    .formbox-cell{flex: 1;}
    .formbox-cell:not(:first-child){margin-left: var(--gap);}
    .formbox-footer{margin-top: 50rem;}
    
    .textfield{display: flex;border-bottom: var(--sl) solid var(--c6);padding-bottom: 15rem;}
    .textfield-input{width: 100%!important;text-overflow: ellipsis;max-height: 250rem;min-height: 1.4em;line-height: 1.4;}
    .textfield-input:placeholder-shown:focus{opacity: .2;}
    .textfield-msg{margin-top: 15rem;}
    
    .textfield-input:not(:placeholder-shown):invalid{color: #FF0000;}
    
    
    .subway-box{display: flex;align-items: center;}
    .subway-logo{flex: none;width: max(55px, 60rem);height: max(55px, 60rem);position: relative;margin-right: 15rem;}
    .subway-list{margin-top: 10rem;overflow: hidden;}
    .subway-list ul{display: flex;flex-wrap: wrap;margin: -5rem;align-items: flex-start;}
    .subway-list li{margin: 5rem;flex: none;width: var(--f-s);height: var(--f-s);font-size: var(--f-xs);display: flex;align-items: center;justify-content: center;text-align: center;text-transform: uppercase;font-weight: 400;color: var(--c1);border-radius: 50%;}
    
    .carousel-pagination{top: 0;left: auto;bottom: auto!important;line-height: 0;position: relative;display: flex;justify-content: center;}
    .carousel-pagination:not(:first-child){margin-top: 20rem;}
     
    .swiper-pagination-bullet{width: max(8px, 10rem);height: max(8px, 10rem);border-radius: 999rem;margin: 0 3rem!important;transition: all .3s linear;background-color: currentColor;opacity: .3;position: relative;}
    .swiper-pagination-bullet-active{width: 30rem;opacity: 1;}
    
    .carousel-buttons{display: grid;grid-auto-flow: column;grid-gap: 20rem;}
    .carousel-button{cursor: pointer;color: currentColor;display: flex;align-items: center;width: max(8px, 8rem);height: max(12px, 12rem);justify-content: center;user-select: none;}
    .carousel-button.swiper-button-disabled{opacity: .1;pointer-events: none;}
    
    .popup{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;}
    .popup-close{display: flex;width: max(20px, 24rem);height: max(20px, 24rem);align-items: center;justify-content: center;position: absolute;top: 0;right: 0;cursor: pointer;}
    
    .popup__modal{display: flex;align-items: flex-start;pointer-events: none;}
    .popup__modal:not(.active){opacity: 0;visibility: hidden;}
    .popup__modal .popup-inner{background-color: var(--c0);color: var(--c1);padding: 40rem 40rem 100rem;margin: auto;width: 100%;max-width: 1300rem;pointer-events: all;}
    .popup__modal .popup-header{padding-right: 100rem;position: relative;}
    .popup__modal .popup-content{margin-top: 100rem;}
    
    .popup-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99;background-color: var(--c1);transition: all .15s;visibility: hidden;opacity: 0;}
    
    .popup.active ~ .popup-overlay{visibility: visible;opacity: .9;}
    
    .popup-gallery-inner{padding: 0 100rem;position: relative;}
    .popup-gallery .carousel-button{position: absolute;top: 50%;width: 100rem;height: 28rem;margin-top: -14rem;}
    .popup-gallery .carousel-button__prev{left: 0;}
    .popup-gallery .carousel-button__next{right: 0;}
    
    .s2 *::-moz-selection,
    .s4 *::-moz-selection,
    .footer *::-moz-selection{background-color: var(--c3);color: var(--c1);-webkit-text-fill-color: var(--c1);}
    
    .s2 *::selection,
    .s4 *::selection,
    .footer *::selection{background-color: var(--c3);color: var(--c1);-webkit-text-fill-color: var(--c1);}
    
    .cookies-alert{position: fixed;bottom: 0;left: 0;margin: 40rem;z-index: 10;}
    .cookies-alert:not(.active){visibility: hidden;}
    .cookies-alert-inner{max-width: 480rem;padding: 25rem;width: 100%;background-color: var(--c0);color: var(--c1);border: var(--sl) solid var(--c5);border-radius: var(--br1);}
    .cookies-alert-button{margin-top: 25rem;}
    
}

/* cards */

@media screen {
   
    .card{position: relative;overflow: hidden;display: flex;min-height: 100%;flex-direction: column;user-select: none;}
  
    .card-1{padding: 30rem;border: var(--sl) solid var(--c5);}
    .card-1 .card-content{min-height: 200rem;max-width: 640rem;font-size: var(--f-m1);}
    .card-1 .card-footer{margin-top: 100rem;display: grid;grid-template-columns: 1fr auto;grid-gap: 40rem;align-items: flex-end;}
    .card-1 .card-footer-image{max-width: 150rem;}
    .card-1 .card-author-name{font-size: var(--f-m2);font-weight: 400;}
    .card-1 .card-author-subtitle{margin-top: 12rem;}
    
   
}

/* sections */

@media screen {
    
    .s1:not(:last-child){margin-bottom: 100rem;}
    .s1-1{display: grid;grid-template-columns: 1fr 1fr;grid-gap: 0 var(--gap);align-items: flex-start;}
    .s1-2{margin-top: 75rem;display: flex;position: relative;overflow: hidden;border-radius: var(--br1);}
    .s1-2::before{content: "";flex: none;width: 0;padding-top: 45%;}
    .s1-3{margin-top: 100rem;}
    .s1-4{grid-column: 1/-1;}
    .s1-4:not(:last-child){margin-bottom: calc(-.55 * var(--f-l));}
    .s1-4-1{display: inline;padding-right: 50%;}
    .s1-4-1 .title *{display: inline;}
    .s1-5{grid-column: 2/3;max-width: 700rem;padding-left: 80rem;}
    .s1-5-2{color: var(--c4);}
    .s1-5-2:not(:first-child){margin-top: 45rem;}
    .s1-6{display: flex;justify-content: space-between;margin: -10rem;}
    .s1-6-1{margin: 10rem;height: 80rem;display: flex;max-width: 220rem;flex: none;align-items: center;}
    .s1-6-1 img{max-height: 100%;width: auto;max-width: 100%;height: auto;}
    
    .s2{background-color: var(--c1);color: var(--c0);}
    .s2-1{padding: 140rem 0;display: grid;grid-template-columns: 1fr 1fr;align-items: flex-start;grid-gap: 0 var(--gap);background-color: var(--c1);grid-template-rows: auto 1fr;}
    
    
    .s2-2{position: relative;display: flex;min-height: 100%;grid-row: 1/3;}
    .s2-2-1{margin: -140rem 100rem;position: relative;}
    .s2-2-1::before,
    .s2-2-1::after{content: "";width: 100%;height: 120rem;position: absolute;left: 0;z-index: 1;}
    .s2-2-1::before{top: 0;background-image: linear-gradient(var(--c1), transparent);}
    .s2-2-1::after{bottom: 0;background-image: linear-gradient(transparent, var(--c1));}
    .s2-2-2{width: 100%;display: flex;align-items: flex-start;position: relative;}
    .s2-2-2::before{content: "";flex: none;width: 0;padding-top: 85%;}
    .s2-3{padding-bottom: 45rem;display: grid;grid-template-columns: auto;grid-gap: 60rem 30rem;margin-left: 40rem;}
    .s2-4 ul{display: flex;flex-wrap: wrap;text-transform: uppercase;user-select: none;font-size: var(--f-m);letter-spacing: 0;}
    .s2-4 li:not(:last-child)::after{content: "/";padding: 0 .25em;}
    .s2-4 li a:not(.active){opacity: .3;}
    .s2-4 li a.active{border-bottom: var(--sl) solid;pointer-events: none;}
    .s2-5{}
    .s2-6{display: grid;grid-template-columns: 1fr 1fr;grid-gap: 50rem;}
    .s2-7 ul{column-count: 2;margin: -15rem 0 0;}
    .s2-7 li{padding: 15rem 0 0;position: relative;padding-left: 1em;}
    .s2-7 li::before{content: "";flex: none;width: .5em;height: .5em;border-radius: 50%;border: var(--sl) solid;position: absolute;top: 15rem;left: 0;margin: .35em 0;}
    .s2-8{margin-bottom: 30rem;text-transform: uppercase;font-weight: 400;}
    .s2-9:only-child{grid-column: 1/-1;}
    .s2-9:only-child .s2-7 ul{column-count: 1;}
    .s2-10{position: relative;overflow: hidden;}
    .s2-11{display: grid;grid-template-columns: auto;grid-gap: 50rem;margin-bottom: 50rem;padding-top: 45rem;margin-left: 40rem;}
    
    .s2-9__a .s2-7 li::before{background-color: #FF8D0A;border: none;} 
    .s2-9__b .s2-7 li::before{background-color: #1870F5;border: none;} 
    .s2-9__c .s2-7 li::before{background-color: #9CBF6E;border: none;} 
    .s2-9__d .s2-7 li::before{background-color: #FFE100;border: none;} 
       
    .s3-1{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));grid-gap: 35rem var(--gap);grid-template-rows: auto 1fr;align-items: flex-start;}
    .s3-2{}
    .s3-3{margin-left: auto;display: flex;align-items: center;}
    .s3-3-1{position: relative;overflow: hidden;display: flex;flex: none;width: max(45px, 55rem);height: max(45px, 55rem);margin-right: 12rem;}
    .s3-3-2{text-transform: uppercase;font-size: var(--f-m);letter-spacing: 0;}
    .s3-4{grid-row: 1/3;grid-column: 3/4;position: relative;overflow: hidden;display: flex;min-height: 100%;}
    .s3-4::before{content: "";flex: none;width: 0;padding-top: 130%;}
    .s3-5{grid-column: 1/3;display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 10rem;}
    .s3-6{padding: 20rem;border: var(--sl) solid var(--c5);min-height: 190rem;display: flex;flex-direction: column;justify-content: space-between;}
    .s3-6-1{position: relative;overflow: hidden;display: flex;width: max(40px, 48rem);height: max(40px, 48rem);}
    .s3-6-2{margin-top: 65rem;}
    .s3-7{margin: auto 0;grid-column-end: span 2;padding-left: 40rem;max-width: 500rem;}
    .s3-7:nth-child(even):last-child{grid-column-end: span 1;padding: 0;}
    
    .s4-1{background-color: var(--c1);color: var(--c0);display: flex;margin: 0 var(--awr);padding: 40rem var(--wr);align-items: flex-end;position: relative;overflow: hidden;}
    .s4-1::before{content: "";flex: none;width: 0;padding-top: 40%;}
    .s4-2{display: grid;grid-template-columns: minmax(0, 1fr) auto;grid-gap: 50rem;border-bottom: var(--sl) solid var(--c6);width: 100%;position: relative;z-index: 1;padding-bottom: 20rem;}
    .s4-3{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    .s4-3::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: linear-gradient(transparent, var(--c1));z-index: 1;}
    .s4-3 .swiper{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    .s4-4{margin-left: -160rem;mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));}
    .s4-4 .swiper{}
    .s4-4 .swiper-slide{padding-left: 160rem;width: auto;white-space: nowrap;font-size: var(--f-m);text-transform: uppercase;letter-spacing: 0;font-weight: 400;}
    .s4-4 .swiper-slide:not(.swiper-slide-active){opacity: .5;cursor: pointer;}
    .s4-5{position: relative;z-index: 1;}
    
    
    .s5-1{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));grid-gap: 0;align-items: flex-start;}
    .s5-2{position: relative;}
    .s5-3{position: relative;margin: 0 20rem;}
    .s5-3-2{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 1;}
    .s5-4{position: relative;}
    .s5-6{display: grid;grid-template-columns: 1.5fr 1fr;grid-gap: 40rem var(--gap);grid-template-rows: 1fr auto;grid-template-areas: "a9 a8" "a9 a10";}
    .s5-7{text-transform: uppercase;font-size: var(--f-m);letter-spacing: 0;position: absolute;bottom: 100%;left: 0;padding-bottom: 15rem;font-weight: 400;width: 100%;}
    .s5-8{grid-area: a8;text-transform: uppercase;opacity: .7;}
    .s5-9{grid-area: a9;display: grid;grid-template-columns: 1fr 1fr;grid-gap: 10rem;}
    .s5-10{grid-area: a10;}
    .s5-11-1{display: flex;position: relative;cursor: pointer;}
    .s5-11-1::before{content: "";flex: none;width: 0;padding-top: 65%;}
    .s5-11-1::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;border: var(--sl) solid var(--c5);}
    .s5-11-2{margin-top: 10rem;text-align: center;}
    
    .s6-1{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: var(--gap);}
    .s6-2{padding: 30rem 20rem;border: var(--sl) solid var(--c5);}
    .s6-3{display: flex;align-items: center;font-size: var(--f-m);}
    .s6-3-1{position: relative;overflow: hidden;width: max(35px, 40rem);height: max(35px, 40rem);flex: none;margin-right: .5em;}
    .s6-3-2{text-transform: uppercase;letter-spacing: 0;}
    .s6-4{max-width: 500rem;font-size: var(--f-s);margin-top: 30rem;}
    
    .s7{background-color: var(--c3);}
    .s7-1{display: grid;grid-template-columns: var(--cols);padding: 80rem 0;grid-gap: var(--gap);}
    .s7-2{grid-column: 1/4;}
    .s7-3{grid-column: 4/7;border-right: var(--sl) solid var(--c5);margin: -80rem 0;padding: 80rem 0;}
    .s7-4{grid-column: 8/12;display: flex;position: relative;overflow: hidden;display: flex;}
    .s7-4::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .s7-5{padding-right: 30rem;}
    .s7-5-1{display: flex;position: relative;overflow: hidden;}
    .s7-5-1::before{content: "";flex: none;width: 0;padding-top: 110%;}
    .s7-6{padding-right: 30rem;margin-top: 70rem;padding-top: 15rem;border-top: var(--sl) solid var(--c5);}
    .s7-6-2:not(:first-child){margin-top: 60rem;}
    
    .s8-1{padding-top: 60rem;border-top: var(--sl) solid var(--c5);display: grid;grid-template-columns: var(--cols);grid-gap: var(--gap);}
    .s8-2{grid-column: 4/10;}
    .s8-2 .swiper{overflow: visible;}
    .s8-2 .swiper-slide{padding: 0;transform-origin: top right;}
    .s8-2 .swiper-slide .card-1{transition: all .15s;}
    .s8-2 .swiper-slide-active{transform-origin: top center;padding: 0 20rem;}
    .s8-2 .swiper-slide-active ~ .swiper-slide{transform-origin: top left;}
    .s8-3{margin-top: 60rem;display: flex;justify-content: center;}
    .s8-4{margin-top: 20rem;}
    
    .s9{background-color: var(--c3);padding-top: 25vw;}
    .s9:last-child{margin-bottom: 0;}
    .s9-1{margin: 0 var(--awr);padding: 100rem var(--wr);display: flex;align-items: flex-end;}
    .s9-2{position: absolute;top: 0;left: 0;width: 100%;height: 100%;user-select: none;}
    .s9-3{position: relative;z-index: 1;width: 100%;}
    .s9-4{}
    .s9-5{margin-top: 80rem;padding: 40rem 0 60rem;color: var(--c0);position: relative;z-index: 1;}
    .s9-6{color: var(--c2);display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap);}
    .s9-7{margin-left: 60rem;padding-top: 40rem;}
    .s9-7 .formbox-footer .button{height: max(50px, 55rem);}
    .s9-8{margin: 0 60rem;position: relative;display: flex;padding: 20rem;align-items: flex-end;}
    .s9-8::before{content: "";flex: none;width: 0;padding-top: 45%;}
    
    .s9-9{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;display: flex;align-items: center;justify-content: center;padding: 40rem 60rem 60rem;text-align: center;color: var(--c2);flex-direction: column;visibility: hidden;}
    .s9-9-2{margin-top: 30rem;}
    .s9-9-3{margin-top: 30rem;}
    
    .s9-5.success .s9-9{visibility: visible;}
    .s9-5.success .s9-6{visibility: hidden;pointer-events: none;}
    
    .s10:last-child{margin-bottom: 180rem;}
    .s10-1{display: grid;grid-template-columns: var(--cols);grid-gap: var(--gap);}
    .s10-2{grid-column: 4/10;}
    .s10-3{margin-bottom: 65rem;}
    .s10-3-1{margin-bottom: 30rem;font-size: var(--f-s);color: var(--c4);}
    .s10-4{color: var(--c4);max-width: 725rem;}
    .s10-4 .textbox h2{color: var(--c2);}
    
    .s404{margin-top: -65rem;}
    .s404-2{display: flex;position: relative;z-index: 1;align-items: center;}
    .s404-2::before{content: "";flex: none;width: 0;padding-top: 50%;}
    .s404-3{padding: 200rem 0;display: flex;flex-direction: column;align-items: center;text-align: center;margin: auto;}
    .s404-3-1{max-width: 645rem;}
    .s404-3-2{margin-top: 60rem;max-width: 580rem;font-size: var(--f-m);letter-spacing: -.01em;}
    .s404-3-3{margin-top: 50rem;}
   
}

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

        --wr: 15rem;

        --gap: 10rem;

        --br1: 20rem;

        --btn: 55rem;

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

        --f-xs: 10rem;
        --f-s: 16rem;
        --f-d: 18rem;
        --f-m: 20rem;
        --f-m1: 18rem;
        --f-m2: 28rem;
        --f-b: 40rem;
        --f-l: 50rem;

        --mw: 680rem; 

        
    }
    
    html{font-size: 1px;}
    
    .desktop{display: none!important;}
    
    .button{width: 100%;}
    
    .header{margin-bottom: 0;transform: translateZ(0);}
    .subheader{margin: 15rem 0 25rem;}
    .subheader-inner{margin-left: auto;max-width: 110rem;}
  
    .topbar{padding: 12rem 0;grid-template-columns: 1fr auto;}
    .header:not(.active)::after{transform: scaleX(1);}
    .topbar-nav{display: none;}
    .topbar-action{display: none;}
    .topbar-logo{max-width: 40rem;}
    
    .topbar-menu{width: 45rem;height: 45rem;border: var(--sl) solid var(--c7);display: flex;align-items: center;justify-content: center;position: relative;z-index: 1;padding: 15rem;}
    .topbar-menu::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;background-color: currentColor;opacity: .05;}
    
    .footer{padding: 70rem 0 20rem;}
    .footer::before{background-image: url(../img/footer-image-mobile.png);background-size: cover;}
    .footer-grid{grid-template-rows: auto;grid-template-areas: "f1" "f7" "f10" "f4" "f9" "f2" "f5" "f3" "f6" "f8";}
    .f1{grid-column: auto;grid-row: auto;grid-area: f1;margin: 0 auto;max-width: 85rem;}
    .f2{grid-column: auto;grid-row: auto;grid-area: f2;margin: 25rem 0 0;}
    .f3{grid-column: auto;grid-row: auto;grid-area: f3;margin: 25rem 0 0;}
    .f4{grid-column: auto;grid-row: auto;grid-area: f4;margin: 25rem 0 0;}
    .f5{grid-column: auto;grid-row: auto;grid-area: f5;text-align: center;}
    .f6{grid-column: auto;grid-row: auto;grid-area: f6;margin: 0 auto;}
    .f7{grid-column: auto;grid-row: auto;grid-area: f7;margin: 25rem auto 0;height: auto;max-width: 150rem;}
    .f8{grid-column: auto;grid-row: auto;grid-area: f8;margin-top: 40rem;}
    .f9{grid-column: auto;grid-row: auto;grid-area: f9;margin: 0 auto;}
    .f10{grid-column: auto;grid-row: auto;grid-area: f10;margin: 25rem auto 0;}
    
    .footer-title{padding: 25rem 30rem 0;border-top: var(--sl) solid var(--c5);margin: 0 0 30rem;text-align: center;}
    .footer-contacts-group{margin: 0;padding: 0;border-top: none;grid-template-columns: auto;grid-gap: 40rem;}
    .footer-contacts{text-align: center;}
    .footer-contacts:nth-child(n + 3){padding: 0;border-top: none;}
    .footer-contacts-title{margin-bottom: 20rem;}
    
    .bottombar{grid-template-columns: auto;margin: 25rem 0 0;padding: 50rem 0 0;text-align: center;}
    .bottombar-copyright{grid-column: auto;margin-top: 20rem;order: 1;font-size: var(--f-s);}
    .bottombar-policy{grid-column: auto;margin-top: 40rem 0 0;font-size: var(--f-s);}
    .bottombar-author{grid-column: auto;order: -1;margin: 0 auto;}
    
    .carousel-button{width: 16rem;height: 24rem;}
    
    .subway-logo{width: 50rem;height: 50rem;margin-right: 12rem;}
    .subway-title{font-size: var(--f-s);}
    .subway-list{}
    .subway-list ul{margin: -3rem;}
    .subway-list li{margin: 3rem;}
    
    .formbox{grid-gap: 40rem;}
    .formbox-row{flex-direction: column;}
    .formbox-cell:not(:first-child){margin: 40rem 0 0;}
    
    .textfield-msg{margin-top: 25rem;font-size: var(--f-s);max-width: 265rem;}
    
    .card-1{padding: 30rem 20rem;}
    .card-1 .card-content{min-height: 0;}
    .card-1 .card-footer{grid-template-columns: auto;grid-gap: 25rem;}
    .card-1 .card-author-subtitle{font-size: var(--f-s);}
    
    .section{margin-bottom: 80rem;}
    
    .section-header{margin-bottom: 55rem;}
    
    .s1:not(:last-child){margin-bottom: 80rem;}
    .s1-1{grid-template-columns: auto;grid-gap: 0;}
    .s1-2{margin-top: 35rem;}
    .s1-2::before{padding-top: 95%;}
    .s1-3{margin-top: 35rem;}
    .s1-4:not(:last-child){margin: 0;}
    .s1-4-1{padding: 0;}
    .s1-5{grid-column: auto;padding: 0;margin-top: 30rem;}
    .s1-6{flex-wrap: wrap;justify-content: center;}
    .s1-6-1{height: 40rem;max-width: 135rem;}
    
    .s2-1{padding: 100rem 0;grid-template-columns: auto;grid-template-rows: auto;grid-gap: 0;}
    .s2-1:not(.active){display: none;}
    .s2-2{grid-row: auto;min-height: 0;margin-top: 25rem;}
    .s2-2-1{margin: 0;min-height: 0;}
    .s2-3{padding: 0;margin: 50rem 0 0;grid-gap: 45rem 20rem;}
    .s2-4 ul{justify-content: center;}
    .s2-5{order: -1;text-align: center;}
    .s2-6{grid-gap: 60rem;grid-template-columns: auto;}
    .s2-7{font-size: var(--f-s);}
    .s2-10{min-height: 0!important;}
    .s2-11{order: -1;padding: 0;margin: 0;}
    .s2-12{order: -1;}
    
    .s3-1{grid-template-columns: auto;grid-template-rows: auto;grid-gap: 0;}
    .s3-2{order: -1;margin-bottom: 55rem;text-align: center;}
    .s3-3{margin: 15rem 0 0;}
    .s3-3-1{width: 45rem;height: 45rem;}
    .s3-4{grid-column: auto;grid-row: auto;order: -1;}
    .s3-5{grid-column: auto;grid-template-columns: 1fr 1fr;margin-top: 20rem;}
    .s3-6{padding: 20rem;min-height: 155rem;}
    .s3-6-1{width: 32rem;height: 32rem;}
    .s3-6-2{margin-top: 10rem;font-size: var(--f-s);}
    .s3-7{order: -1;padding: 0 0 30rem;margin: 0;}
    
    .s4-1{background-color: transparent;color: var(--c2);flex-direction: column;padding: 0;margin: 0 var(--awr);}
    .s4-1::before{display: none;}
    .s4-2{border-bottom: none;margin: 0 var(--wr);padding: 20rem 0 0;grid-template-columns: minmax(0, 1fr);position: relative;width: auto;}
    .s4-3{position: relative;display: flex;height: auto;}
    .s4-3::before{content: "";flex: none;width: 0;padding-top: 100%;min-height: 450rem;}
    .s4-4{margin-left: -80rem;}
    .s4-4 .swiper-slide{white-space: nowrap;padding-left: 80rem;font-size: var(--f-d);}
    .s4-5{position: absolute;bottom: 100%;color: var(--c0);width: 100%;padding-bottom: 25rem;}
    .s4-5 .carousel-buttons{width: 100%;}
    .s4-5 .carousel-button__next{margin-left: auto;}
    
    .s5-1{grid-template-columns: auto;}
    .s5-2{margin-top: 60rem;}
    .s5-3{order: -1;margin: 0 var(--awr);}
    .s5-4{margin-top: 60rem;}
    .s5-5:not(:first-child){margin-top: 60rem;}
    .s5-6{grid-template-columns: 1fr 1fr;grid-template-rows: auto;grid-template-areas: " a7 a8" "a9 a9" "a10 a10";grid-gap: 0 var(--gap);}
    .s5-7{position: relative;bottom: auto;left: auto;padding: 0;}
    .s5-8{margin-left: auto;}
    .s5-9{border-top: var(--sl) solid var(--c5);padding-top: 20rem;margin-top: 15rem;}
    .s5-10{margin-top: 30rem;}
    .s5-11:nth-child(2){order: -1;}
    .s5-11-2{font-size: var(--f-s);}
    
    .s6-1{grid-template-columns: auto;grid-gap: 25rem;}
    .s6-2{min-height: 200rem;}
    .s6-4{margin-top: 25rem;}
    
    .s7-1{padding: 100rem 0;grid-gap: 0;}
    .s7-2{grid-column: auto;order: -1;text-align: center;margin-bottom: 55rem;}
    .s7-3{grid-column: auto;border-right: none;padding: 0;margin: 0;}
    .s7-4{grid-column: auto;order: -1;}
    .s7-4::before{padding-top: 110%;}
    .s7-5{padding: 0;margin-top: 25rem;padding-top: 25rem;border-top: var(--sl) solid var(--c5);}
    .s7-5-1::before{padding-top: 110%;}
    .s7-6{margin: 25rem 0 0;padding: 0;border-top: none;}
    
    .s8-1{padding-top: 0;border-top: none;}
    .s8-2{grid-column: 1/-1;margin: 0 calc(var(--wr) / -2);}
    .s8-2 .swiper-slide{padding: 0 calc(var(--wr) / 2);}
    .s8-4{padding: calc(var(--wr) / 2);display: grid;grid-template-columns: auto 1fr auto;grid-gap: 20rem;align-items: center;}
    
    .s9{padding: 70rem 0;}
    .s9-1{margin: 0;padding: 0;}
    .s9-3{color: var(--c0);background-color: var(--c5);backdrop-filter: blur(65px);padding: 60rem 15rem;}
    .s9-4{text-align: center;margin-bottom: 55rem;}
    .s9-5{margin: 0;padding: 0;}
    .s9-6{grid-template-columns: auto;grid-gap: 60rem;}
    .s9-7{padding: 0;margin: 0;}
    .s9-8{padding: 0;margin: 0;order: -1;width: 100%;flex-direction: column;}
    .s9-8::before{display: none;}
    .s9-8-1{display: flex;position: relative;overflow: hidden;width: 100%;}
    .s9-8-1::before{content: "";flex: none;width: 0;padding-top: 120%;}
    .s9-8-2{width: 100%;margin-top: 15rem;}
    
    .s10:first-child{margin-top: 50rem;}
    .s10:last-child{margin-bottom: 100rem;}
    .s10-2{grid-column: 1/-1;}
    
    .s404{margin-top: -15rem;}
    .s404-3{padding: 100rem 0;}
    .s404-3-2{margin-top: 35rem;font-size: var(--f-d);max-width: 315rem;}
    .s404-3-3{margin-top: 45rem;width: 100%;}
    
    .popup__modal .popup-inner{min-height: 100%;margin: 0;padding: 20rem var(--wr);overflow: auto;}
    .popup__modal .popup-content{margin-top: 40rem;}

    .popup-gallery-inner{padding: 0;}
    .popup-gallery .carousel-buttons{display: none;}
    
    .popup__menu{background-color: var(--c1);color: var(--c0);padding: 0 0 40rem;transition: clip-path .5s;clip-path: inset(0 0 0% 0);}
    .popup__menu:not(.active){clip-path: inset(0 0 100% 0);}
    .popup__menu .popup-inner{display: flex;flex-direction: column;min-height: 100%;}
    .popup__menu .popup-header{margin: 0 var(--awr) 15rem;padding: 0 var(--wr);border-bottom: var(--sl) solid var(--c5);}
    .popup__menu .subheader{margin: 0;}
    .popup__menu .popup-content{margin: 60rem 0;flex: auto;}
    .popup__menu .popup-content ul{display: grid;grid-template-columns: auto;grid-gap: 25rem;text-align: center;font-size: var(--f-m);}
    
    .popup-overlay{background-color: var(--c0);}
    
    .cookies-alert{margin: 0;width: 100%;}
    .cookies-alert-inner{border-radius: 0;border-width: var(--sl) 0 0;max-width: none;padding: 30rem var(--wr);}
    .cookies-alert-text{font-size: var(--f-s);}
    
}


@media screen and (min-width: 1024px) {
    
    .mobile{display: none!important;}
    
    .s2-1:nth-child(2){position: absolute;top: 0;left: 0;width: 100%;min-height: 100%;transition: transform 1s;will-change: transform;z-index: 1;}
    .s2-1:nth-child(2):not(.active){transform: translateY(100%);}
    
    .s5-2{margin-right: -60rem;}
    .s5-4{margin-left: -60rem;}
    .s5-2,
    .s5-4{height: 100%;}
    .s5-5{position: absolute;width: 100%;left: 0;top: 0;z-index: 1;}
    .s5-5::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: var(--sl);background-color: currentColor;opacity: .1;}
    
    .s5-6{padding-top: 15rem;position: relative;}
    
    .s5-2 .s5-5{padding-right: 40rem;}
    .s5-2 .s5-6{grid-template-areas: "a8 a9" "a10 a9";grid-template-columns: 1fr 1.5fr;}
    .s5-4 .s5-5{padding-left: 40rem;}
    
    .s5-4 .s5-7{text-align: right;}
    .s5-4 .s5-8{text-align: right;}
    .s5-4 .s5-10{margin-left: auto;}
    
    .s5-2 .s5-5:nth-child(1){top: 26.5%;}
    .s5-2 .s5-5:nth-child(2){top: 55%;}
    .s5-4 .s5-5:nth-child(1){top: 25%;}
    .s5-4 .s5-5:nth-child(2){top: 65%;}
    
    .s5-2 .s5-11:nth-child(2){order: -1;}
    
    .s8-2 .swiper-slide-active .card-1{background-color: var(--c3);border-color: var(--c3);}
    
    .s9-5{background-color: var(--c5);backdrop-filter: blur(65px);}
    
    .area-line{mix-blend-mode: plus-lighter;}
    
    
}

@media screen and (min-width: 1920000px) {
    
    
    html{font-size: 1px;}
    
    .s4-1{margin: 0;}
    
}

/* hover animations */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
   
    .button{transition: background-color .25s, color .25s;}
    
    .button__default:hover{background-color: transparent;color: var(--c2);}
    .button__secondary:hover{background-color: var(--c2);color: var(--c0);}
    
    .area-line{transition: opacity 1s;}
    
    .area-hover:not(.active) .area-line{opacity: .1;}
    
    .s4-4 .swiper-slide:not(.swiper-slide-active){transition: opacity .15s;}
    .s4-4 .swiper-slide:not(.swiper-slide-active):hover{opacity: 1;}
    
    .s5-5::before{will-change: transform;transition: transform 1s;}
    
    .s5-5:not(.active)::before{transform: scaleX(0);}
    
    .s5-2 .s5-5::before{transform-origin: right;}
    .s5-4 .s5-5::before{transform-origin: left;}
    
    .s5-7,
    .s5-8,
    .s5-10{overflow: hidden;}
    .s5-11{transition: opacity 1s, transform 1s;}
    
    .s5-2 .s5-5:not(.active) .s5-11:nth-child(2){transform: translateX(100%);}
    .s5-4 .s5-5:not(.active) .s5-11:nth-child(2){transform: translateX(-100%);}
    
    .s5-7-1,
    .s5-8-1,
    .s5-10-1{transition: transform 1s;will-change: transform;}
    .s5-5:not(.active){pointer-events: none;}
    .s5-5:not(.active) .s5-7-1,
    .s5-5:not(.active) .s5-8-1,
    .s5-5:not(.active) .s5-10-1{transform: translateY(-110%);}
    .s5-5:not(.active) .s5-11{opacity: 0;}
    
    
    
    .popup-gallery .carousel-button{transition: opacity .15s;}
    .popup-gallery .carousel-button:not(:hover){opacity: .5;}
    
    .topbar-nav ul{pointer-events: none;}
    .topbar-nav li{pointer-events: all;transition: opacity .15s;}
    
    .topbar-nav ul:hover li:not(:hover){opacity: .6;}
    
    .topbar-nav a,
    .footer-contacts a,
    .footer-nav a,
    .bottombar-author a,
    .bottombar-policy a{transition-property: background-size;transition-duration: .5s;background-size: 0 var(--sl);background-repeat: no-repeat;background-position: right bottom;background-image: linear-gradient(currentColor, currentColor);display: inline;}

    .topbar-nav a:hover,
    .footer-contacts a:hover,
    .footer-nav a:hover,
    .bottombar-author a:hover,
    .bottombar-policy a:hover{background-size: 100% var(--sl);background-position: left bottom;}
    
    .bottombar-policy{transition: color .15s;pointer-events: none;}
    .bottombar-policy a{pointer-events: all;}
    .bottombar-policy:hover{color: var(--c0);}
    
    .s2-4 li a:not(.active){transition: opacity .15s;}
    .s2-4 li a:not(.active):hover{opacity: 1;}
    
}