@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: #141414;
    --c2: #F8F8F8;
    --c3: #E02424;
    --c4: #F3F160;
    --c5: #003C97;
    --c6: #E8E8E8;
    --c7: rgba(20,20,20,.1);
    --c8: rgba(255,255,255,.1);
    --c9: rgba(20,20,20,.5);
    --c10: #868686;
    --c11: #194FA1;
    --c12: #DFE5EE;
    --c13: rgba(20,20,20,.3);
    --c14: rgba(20,20,20,.4);
    
    --wr: 20rem;
    --awr: calc(-1 * var(--wr));
    
    --gap: 20rem;
    --sl: max(1px, 1rem);
    
    --br1: 30rem;
    --br2: 16rem;
    --br3: 60rem;
    --br4: 24rem;
    --br5: 10rem;

    --cols: repeat(6, minmax(0, 1fr));
    
    --f-xxs: max(12px, 12rem);
    --f-xs: max(12px, 16rem);
    --f-s: max(12px, 18rem);
    --f-d: max(14px, 20rem);
    --f-m1: max(14px, 24rem);
    --f-m: max(14px, 28rem);
    --f-b: max(14px, 36rem);
    --f-l: max(14px, 64rem);
    --f-xl: max(14px, 80rem);
    --f-n: max(14px, 100rem);
    
    --btn: max(50px, 60rem);
    
    --bc: var(--c7);
    
    --mw: 1600px; 
    
    --move-speed: 45s;
    
    
}

@keyframes blink{
	0%{
		opacity: .13;
	}
	10%{
		opacity: 1;
	}
	90%{
		opacity: 1;
	}
	100%{
		opacity: .13;
	}
}

@keyframes move{
	0%{
		offset-distance: 0%;
	}
	100%{
		offset-distance: 100%;
	}
}
@keyframes move2{
	0%{
		offset-distance: 20%;
	}
	100%{
		offset-distance: 120%;
	}
}
@keyframes move3{
	0%{
		offset-distance: 40%;
	}
	100%{
		offset-distance: 140%;
	}
}
@keyframes move4{
	0%{
		offset-distance: 60%;
	}
	100%{
		offset-distance: 160%;
	}
}

/* globals */

@media screen {

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

    .document{font-weight: 400;font-family: 'SuisseIntl-Regular', sans-serif;font-size: var(--f-d);line-height: 1.2;color: var(--c1);background-color: var(--c0);letter-spacing: -.03em;}
    
    .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;background-clip: padding-box;}
    .button:not(.fill){overflow: hidden;}
    .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{height: var(--btn);padding: 0 50rem;background-color: var(--c4);border-radius: 999rem;overflow: hidden;}
    .button__default .button-text{color: var(--c1);}
    .button__secondary{height: var(--btn);padding: 0 50rem;border-radius: 999rem;box-shadow: inset 0 0 0 var(--sl) currentColor;}
    .button__secondary .button-text{color: currentColor;}
    
    .button__wide{width: 100%;}
     
    .title{line-height: 1.05;font-weight: 500;width: 100%;}
    .title__large{font-size: var(--f-xl);letter-spacing: -.07em;}
    .title__default{font-size: var(--f-l);letter-spacing: -.05em;}
    .title__medium{font-size: var(--f-b);letter-spacing: -.05em;}
    .title__small{font-size: var(--f-m);letter-spacing: -.05em;}
    
    .odometer.odometer-auto-theme{padding: 0;display: inline-flex;vertical-align: top;}
    .odometer.odometer-auto-theme .odometer-digit{padding: 0;text-align: center;}
    .odometer *{text-align: center!important;vertical-align: top!important;}
    .odometer .odometer-digit .odometer-value {width: 100%;}
    
    .container{display: flex;flex-direction: column;min-height: var(--app-height);}
    
    .header{border-bottom: var(--sl) solid var(--c6);margin-bottom: 120rem;position: sticky;top: 0;z-index: 99;background-color: var(--c0);}
    
    .topbar{padding: 20rem 0;display: grid;grid-template-columns: auto 1fr auto;grid-gap: 50rem;align-items: center;}
    .topbar-logo{display: flex;margin-top: -10rem;}
    .topbar-logo img{max-width: none;height: max(50px, 60rem);}
    .topbar-nav{display: grid;grid-auto-flow: column;grid-gap: 10rem;margin-right: auto;height: 100%;}
    .topbar-nav-col{position: relative;display: flex;align-items: center;margin: -20rem 0;padding: 20rem 10rem;}
    .topbar-nav-col::after{content: "";position: absolute;bottom: 0;height: max(2px, 2rem);background-color: var(--c5);width: 100%;left: 0;margin-bottom: calc(-1 * var(--sl));will-change: transform;transform: scaleY(0);transform-origin: bottom;}
    .topbar-nav-button{display: flex;align-items: center;}
    .topbar-nav-button-icon{flex: none;margin-left: 5rem;width: max(16px, 24rem);height: max(16px, 24rem);display: flex;align-items: center;justify-content: center;}
    .topbar-nav-submenu{position: absolute;top: 100%;left: 0;background-color: var(--c0);border-radius: 0 0 var(--br1) var(--br1);border: var(--sl) solid var(--bc);padding: 30rem;display: flex;opacity: 0;visibility: hidden;pointer-events: none;width: max-content;}
    .topbar-action{display: grid;grid-auto-flow: column;grid-gap: 30rem;align-items: center;}
    .topbar-tel{font-size: var(--f-d);}
    
    .submenu{display: flex;flex-direction: column;flex: none;}
    .submenu:not(:first-child){margin-left: 20rem;padding-left: 30rem;border-left: var(--sl) solid var(--bc);}
    .submenu-list{display: grid;grid-template-columns: auto;grid-gap: 15rem;}
    .submenu-grid{display: grid;grid-template-columns: 1fr auto;grid-gap: 15rem 60rem;}
    .submenu-item{display: flex;align-items: center;position: relative;min-width: 180rem;max-width: 390rem;user-select: none;}
    .submenu-item__button{border-radius: var(--br2);padding: 15rem 12rem;margin-left: -12rem;transition: background-color .15s;}
    .submenu-item__button:not(:first-child){margin-top: -10rem;}
    .submenu-item__button.active{background-color: var(--c2);}
    .submenu-item-figure{flex: none;margin-right: 12rem;width: 48rem;height: 48rem;border: var(--sl) solid var(--bc);border-radius: var(--br5);padding: 10rem;display: flex;align-items: center;justify-content: center;color: var(--c10);}
    .submenu-item-figure svg{width: 100%;height: auto;max-height: 100%;}
    .submenu-item-figure *{fill: currentColor;}
    .submenu-item-image{flex: none;margin-right: 10rem;width: 64rem;height: 64rem;border-radius: var(--br5);position: relative;overflow: hidden;}
    .submenu-item-content{flex: auto;overflow: hidden;}
    .submenu-item-title{font-size: var(--f-s);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    .submenu-item-subtitle{font-size: var(--f-xxs);margin-top: 5rem;color: var(--c9);}
    .submenu-item-icon{flex: none;margin-left: 20rem;width: max(14px, 18rem);height: max(14px, 18rem);display: flex;align-items: center;justify-content: center;}
    .submenu-more{margin-top: 50rem;font-size: var(--f-xs);}
    
    .submenu-toggle:not(.active){display: none;}
    
    .submenu-grid .submenu-item:only-child{}
    
    .main{margin-top: 0;flex: auto;display: flex;flex-direction: column;}
   
    .section{position: relative;z-index: 1;overflow-x: clip;margin-top: 160rem;}
    .section:first-child{margin-top: 0;}
    .section:only-child{flex: auto;}
    .section:last-child{margin-bottom: 220rem;}
    
    .section-top{position: absolute;top: -100rem;left: 0;width: 100%;}
    
    .section__contrast{background-color: var(--c5);color: var(--c0);padding: 120rem 0;border-radius: var(--br3);--bc: var(--c8);}
    .section__contrast:last-child{margin-bottom: 80rem;}
    .section__contrast .button__default{background-color: var(--c0);}
    .section__contrast .card-1{background-color: var(--c11);color: var(--c0);}
    
    .footer{overflow: hidden;/*padding-bottom: 50rem;*/}
    
    .footer-grid{display: grid;grid-template-columns: repeat(7, auto);grid-gap: 0 60rem;grid-template-rows: auto auto auto 1fr;}
    .f1{display: flex;flex-direction: column;justify-content: space-between;}
    .f1-1{max-width: 210rem;}
    .f1-2{margin-top: 20rem;}
    .f1-2 a{width: 65rem;height: 65rem;border-radius: var(--br2);overflow: hidden;display: flex;align-items: center;justify-content: center;padding: 20rem;position: relative;border: var(--sl) solid var(--c7);color: var(--c5);position: relative;}
    .f2{overflow: hidden;display: flex;justify-content: space-between;padding-top: 10rem;}
    .f2-0{}
    .f2-1-2{margin-top: 20rem;font-size: var(--f-s);color: var(--c9);}
    .f2-1-2 ul{display: grid;grid-template-columns: auto;grid-gap: 8rem;}
    .f3{margin: 120rem 0 40rem;height: var(--sl);line-height: 1;overflow: hidden;background-color: var(--bc);grid-column: 1/-1;}
    .f4{font-size: var(--f-xs);color: var(--c13);display: grid;grid-template-columns: auto 1fr;grid-gap: 20rem;align-items: flex-start;margin-bottom: 50rem;grid-column: 1/3;}
    .f4-2{overflow: hidden;}
    .f4-2 ul{display: flex;flex-wrap: wrap;margin: -4rem -8rem;}
    .f4-2 li{margin: 4rem 8rem;}
    .f5{font-size: var(--f-xs);color: var(--c13);grid-column: 7/8;}
    .f6{font-size: var(--f-xs);color: var(--c13);grid-column: 3/4;}
    .f7{font-size: var(--f-xs);color: var(--c13);grid-column: 5/6;}
    
    .bottombar-author{margin-right: auto;display: flex;align-items: baseline;}
    
    .dd-icon{width: 1em;height: 1.2em;margin: 0 .3em;color: var(--c5);opacity: 1;display: inline-flex;align-items: center;justify-content: center;}
    .dd-icon .icon{width: 100%;}
    
    
    .faceline{display: flex;align-items: center;}
    .faceline-images{display: flex;user-select: none;margin-left: -4rem;}
    .faceline-image{display: flex;position: relative;overflow: hidden;border-radius: 50%;z-index: 1;flex: none;width: 68rem;border: 4rem solid var(--c0);letter-spacing: normal;}
    .faceline-image::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .faceline-image:not(:first-child){margin-left: -20rem;}
    .faceline-image-button{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;background-color: var(--c5);color: var(--c0);}
    .faceline-image-icon{width: max(12px, 14rem);height: max(12px, 14rem);display: flex;align-items: center;justify-content: center;position: relative;}
    .faceline-image-icon::before,
    .faceline-image-icon::after{content: "";flex: none;width: 100%;height: 2rem;position: absolute;left: 0;top: 50%;margin-top: -1rem;background-color: currentColor;z-index: 1;}
    .faceline-image-icon::after{transform: rotate(90deg);}
    .faceline-text{margin-left: 12rem;position: relative;z-index: 1;font-size: var(--f-xs);color: var(--c9);letter-spacing: normal;}
    
    .carousel-buttons{display: grid;grid-auto-flow: column;grid-gap: 10rem;}
    .carousel-button{cursor: pointer;width: var(--btn);display: flex;align-items: center;justify-content: center;height: var(--btn);border: var(--sl) solid var(--bc);border-radius: 50%;padding: 15rem;}
    
    .section-header{display: flex;text-align: center;flex-direction: column;align-items: center;width: 55%;margin: 0 auto;}
    .section-header:not(:last-child){margin-bottom: 70rem;}
    .section-header-pretitle{margin-bottom: 40rem;display: flex;align-items: center;justify-content: center;height: 80rem;padding: 20rem 60rem;border: var(--sl) solid var(--bc);border-radius: var(--br2);}
    .section-header-pretitle img{width: auto;height: 100%;}
    .section-header-title{}
    .section-header-subtitle{margin-top: 40rem;max-width: 460rem;}
    .section-header-action{margin-top: 30rem;display: flex;justify-content: center;}
    .section-header-action .button{flex: none;}
    .section-header-action .button:not(:first-child){margin-left: 10rem;}
    
    .expand-caption{margin-bottom: 30rem;}
    .expand{border-top: var(--sl) solid var(--bc);user-select: none;}
    .expand-item{padding: 30rem 0;border-bottom: var(--sl) solid var(--bc);}
    .expand-header{display: grid;grid-template-columns: 1fr auto;grid-gap: 50rem;align-items: center;cursor: pointer;}
    .expand-header-title{max-width: 540rem;}
    .expand-header-icon{display: flex;align-items: center;justify-content: center;width: max(24px, 28rem);height: max(24px, 28rem);}
    .expand-content{max-width: 540rem;width: 100%;overflow: hidden;transition: all .15s;padding-top: 20rem;opacity: .6;}
    
    .expand-item.active .expand-header-icon{transform: scaleY(-1);}
    .expand-item:not(.active) .expand-content{opacity: 0;height: 0;padding-top: 0;}
    
    .fixed-nav{position: fixed;bottom: 0;left: 0;width: 100%;height: 0;display: flex;align-items: flex-end;justify-content: center;margin-bottom: 60rem;z-index: 99;}
    
    .fixed-nav.hidden .tabs-container{opacity: 0;transform: translateY(50rem);visibility: hidden;}
    
    .tabs-container{display: flex;transition: all .25s;}
    .tabs{overflow: hidden;margin: 0 auto;position: relative;padding: 10rem;border-radius: var(--br3);background-color: var(--c2);color: var(--c1);box-shadow: 0 10rem 20rem var(--bc);}
    
    .tags{overflow: hidden;}
    .tags ul{display: flex;flex-wrap: wrap;}
    .tags li{border-radius: var(--br5);overflow: hidden;position: relative;max-width: 100%;text-overflow: ellipsis;padding: 10rem 20rem;color: var(--c10);font-size: var(--f-s);white-space: nowrap;background-color: var(--c2);}
    
    .author{display: flex;align-items: center;user-select: none;}
    .author-icon{flex: none;width: 80rem;height: 80rem;border-radius: 50%;overflow: hidden;display: flex;align-items: center;justify-content: center;padding: 20rem;position: relative;margin-right: 20rem;}
    .author-icon::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;background-color: currentColor;opacity: .03;}
    .author-subtitle{opacity: .5;}
    
    .textbox h2{line-height: 1.05;font-weight: 500;width: 100%;font-size: var(--f-l);letter-spacing: -.07em;max-width: 600rem;margin: 80rem 0 40rem;}
    .textbox h2:first-child{margin-top: 0;}
    .textbox h3{margin: 2em 0 1em;text-transform: uppercase;}
    .textbox h3:first-child{margin-top: 0;}
    .textbox ul li{list-style: disc;}
    .textbox ol li{list-style: decimal;}
    .textbox ul,
    .textbox ol{margin: 1em 0;display: grid;grid-template-columns: auto;grid-gap: .5em;padding-left: 1.5em;}
    .textbox ul:first-child,
    .textbox ol:first-child{margin-top: 0;}
    .textbox ul:last-child,
    .textbox ol:last-child{margin-bottom: 0;}
    .textbox a{text-decoration: underline;}
    .textbox i{font-style: italic;}
    .textbox img{overflow: hidden;margin: 60rem 0;border-radius: var(--br1);}
    .textbox img:first-child{margin-top: 0;}
    .textbox img:last-child{margin-bottom: 0;}
    
    .graph{background-color: var(--c2);border-radius: var(--br3);padding: 40rem;}
    .graph-header{margin-bottom: 40rem;display: grid;grid-template-columns: 1fr auto;grid-gap: 50rem;align-items: center;overflow: hidden;}
    .graph-header-title{font-size: var(--f-b);letter-spacing: -.05em;}
    .graph-legend{display: grid;grid-auto-flow: column;grid-gap: 40rem;}
    .graph-legend-item{display: flex;align-items: center;}
    .graph-legend-icon{flex: none;width: max(10px, 12rem);height: max(10px, 12rem);overflow: hidden;border-radius: 50%;margin-right: 12rem;background-color: var(--c1);}
    .graph-container{display: grid;grid-template-columns: auto 1fr;grid-gap: 0;overflow: hidden;padding-bottom: 20rem;}
    .graph-aside{display: flex;flex-direction: column;}
    .graph-aside-item{flex: none;margin: 30rem 0;position: relative;padding-right: 10rem;font-size: var(--f-xs);height: 0;display: flex;align-items: center;white-space: nowrap;}
    .graph-aside-item::after{content: "";height: var(--sl);width: 100vw;left: 100%;background-color: var(--bc);position: absolute;bottom: 0;}
    .graph-main{display: flex;justify-content: space-around;padding: 30rem 0;}
    .graph-col{flex: 1;max-width: 70rem;display: flex;flex-direction: column;justify-content: flex-end;font-size: var(--f-xs);position: relative;align-items: center;}
    .graph-col-bottomtext{top: 100%;position: absolute;padding-top: 20rem;}
    .graph-col-bars{width: 100%;display: flex;position: relative;align-items: flex-end;flex: auto;}
    .graph-col-bar{width: 100%;flex: none;position: absolute;bottom: 0;left: 0;border-radius: var(--br5);overflow: hidden;height: 0%;background-color: var(--c2);}
    .graph-col-bar::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;transition: opacity .25s;}
    .graph-col-bar-1::after{background-color: var(--c12);}
    .graph-col-bar-2::after{background-color: var(--c5);}
    
    .formbox{display: grid;grid-template-columns: auto;grid-gap: var(--gap);}
    .formbox-row{display: flex;}
    .formbox-cell{flex: 1;}
    .formbox-cell:not(:first-child){margin-left: var(--gap);}
    .formbox-footer{margin-top: 40rem;}
    
    .textfield-input{resize: none;width: 100%;flex: auto;min-width: 0;text-overflow: ellipsis;padding: 20rem 30rem;border-radius: var(--br1);box-shadow: inset 0 0 0 var(--sl) var(--bc);}
    .textfield-input:focus{--bc: var(--c9);}
    .textfield-input[rows]{padding: 30rem;}
    
    .selector{position: relative;border-radius: var(--br1);z-index: 1;}
    .selector-holder{display: flex;align-items: center;justify-content: space-between;padding: 20rem 30rem;border-radius: var(--br1);box-shadow: inset 0 0 0 var(--sl) var(--bc);overflow: hidden;cursor: pointer;}
    .selector-holder-input{flex: auto;text-overflow: ellipsis;pointer-events: none;}
    .selector-holder-icon{display: flex;flex: none;align-items: center;justify-content: center;width: max(18px, 24rem);height: max(18px, 24rem);}
    .selector-list{position: absolute;z-index: 10;visibility: hidden;width: 100%;padding: 16rem 0 0;border-radius: 0 0 var(--br1) var(--br1);border: var(--sl) solid var(--bc);border-top: none;margin-top: 0;box-shadow: 0 15rem 15rem rgba(0,0,0,.01);background-color: var(--c0);overflow: hidden;}
    .selector-list.active{visibility: visible;}
    .selector-option{position: relative;cursor: pointer;padding: 24rem 30rem;transition: color .25s, background-color .25s;}
    
    .selector-option:not(:last-child)::after{content: "";position: absolute;bottom: 0;left: 0;right: 0;margin: 0 30rem;border-bottom: var(--sl) solid var(--bc);}
    .selector-option.active{pointer-events: none;background-color: var(--c5);color: var(--c0);}
    .selector-option.active::after{display: none;}
    
    .selector.active::before{content: "";position: absolute;left: 0;top: 50%;right: 0;bottom: 0;z-index: -1;border-left: var(--sl) solid var(--bc);border-right: var(--sl) solid var(--bc);}
    .selector.active .selector-holder-icon{transform: scaleY(-1);}
    
    .cookies{position: fixed;z-index: 5;left: 0;bottom: 0;background-color: var(--c0);border: var(--sl) solid var(--bc);margin: 20rem;max-width: 360rem;width: 100%;padding: 25rem;border-radius: var(--br4);}
    .cookies-subtitle{margin-top: 15rem;color: var(--c9);font-size: var(--f-xs);}
    .cookies-action{margin-top: 25rem;}
    
}

/* cards */

@media screen {
   
    .card{position: relative;overflow: hidden;display: flex;min-height: 100%;flex-direction: column;user-select: none;width: 100%;}
    
    .card-1{border-radius: var(--br1);padding: 40rem;background-color: var(--c2);color: var(--c1);width: 100%;min-height: 460rem;}
    .card-1 .card-header{width: 72rem;height: 72rem;display: flex;}
    .card-1 .card-header svg{width: 100%;height: auto;max-height: 100%;}
    .card-1 .card-header *{fill: currentColor;opacity: .5;}
    .card-1 .card-header svg *{opacity: 1;}
    .card-1 .card-content{flex: auto;display: grid;margin-top: 30rem;border-top: var(--sl) solid var(--bc);padding-top: 60rem;grid-template-columns: auto;grid-template-rows: 1fr 1fr;grid-gap: 40rem;align-items: flex-end;}
    .card-1 .card-title,
    .card-1 .card-subtitle{max-width: 425rem;}
    .card-1 .card-title{margin-bottom: auto;}
    .card-1 .card-subtitle{opacity: .5;}
    .card-1 .card-title:only-child{grid-row: 1/3;margin-top: auto;margin-bottom: 0;}
    
    .card-2{border-radius: var(--br1);flex-direction: row;max-height: 650rem;}
    .card-2::before{content: "";flex: none;width: 0;padding-top: 125%;}
    .card-2 .card-header{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    .card-2 .card-inner{position: relative;z-index: 1;padding: 20rem;display: flex;flex-direction: column;width: 100%;}
    .card-2 .card-content{background-color: var(--c0);color: var(--c1);border-radius: var(--br4);padding: 30rem;margin-top: auto;}
    .card-2 .card-title{padding-right: 20rem;max-width: 440rem;}
    .card-2 .card-subtitle{margin-top: 20rem;opacity: .4;font-size: var(--f-xs);}
    .card-2 .card-action{padding-top: 40rem;}
    
    .card-3{border-radius: var(--br1);flex-direction: row;}
    .card-3::before{content: "";flex: none;width: 0;padding-top: 90%;}
    .card-3 .card-header{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    .card-3 .card-inner{position: relative;z-index: 1;padding: 20rem;display: flex;flex-direction: column;width: 100%;}
    .card-3 .card-content{background-color: var(--c0);color: var(--c1);border-radius: var(--br4);padding: 30rem;margin-top: auto;}
    .card-3 .card-tags{margin-bottom: 40rem;overflow: hidden;}
    .card-3 .card-tags ul{display: grid;grid-template-columns: auto;grid-gap: 10rem;justify-items: flex-start;}
    .card-3 .card-tags li{padding: 10rem 20rem;border-radius: 999rem;background-color: var(--c0);color: var(--c1);white-space: nowrap;max-width: 100%;text-overflow: ellipsis;overflow: hidden;}
    .card-3 .card-title{padding-right: 20rem;max-width: 440rem;}
    .card-3 .card-info{margin-top: 20rem;padding-top: 20rem;border-top: var(--sl) solid var(--bc);display: flex;justify-content: space-between;}
    .card-3 .card-info-col{max-width: 250rem;}
    .card-3 .card-info-col:not(:first-child){margin-left: 30rem;}
    .card-3 .card-info-title{opacity: .5;margin-bottom: 5rem;}
    .card-3 .card-action{padding-top: 40rem;}
  
   
}

/* sections */

@media screen {
    
    .s1-1{display: grid;grid-template-columns: var(--cols);grid-gap: var(--gap);align-items: flex-start;grid-template-rows: auto 1fr;}
    .s1-2{grid-column: 1/5;padding-right: 70rem;}
    .s1-3{grid-column: 5/7;max-width: 440rem;padding-top: 10rem;}
    .s1-3-2:not(:first-child){margin-top: 30rem;}
    .s1-3-3{color: var(--c9);}
    .s1-3-3 b{font-weight: inherit;color: var(--c1);}
    .s1-3-4{margin-bottom: 30rem;display: inline-flex;align-items: center;justify-content: center;height: 80rem;padding: 20rem 60rem;border: var(--sl) solid var(--bc);border-radius: var(--br2);}
    .s1-3-4 img{height: 100%;width: auto;}
    .s1-4{grid-column: 1/-1;margin-bottom: 25rem;}
    .s1-5{margin: 90rem var(--awr) 0;border-radius: var(--br1);position: relative;overflow: hidden;background-color: var(--c2);display: flex;align-items: center;justify-content: center;}
    .s1-5::before{content: "";flex: none;width: 0;padding-top: 40%;}
    .s1-5-2{}
    .s1-6{margin-top: 70rem;}
    .s1-6-1{border-radius: var(--br3);overflow: hidden;}
    .s1-7{color: var(--c13);font-size: var(--f-xs);grid-column: 1/3;max-width: 440rem;margin-top: auto;}
    .s1-8{grid-column: 5/7;color: var(--c14);}
    
    .s1-5-2{display: none;}
    
    .s2:not(:first-child){margin-top: 90rem;}
    .s2-1{display: grid;grid-template-columns: auto;grid-gap: var(--gap);}
    .s2-2{background-color: var(--c2);padding: 20rem 0;border-radius: var(--br2);display: grid;grid-template-columns: 1fr 1fr;grid-gap: 0;}
    .s2-3{margin: 0 var(--awr);position: relative;display: flex;overflow: hidden;border-radius: var(--br1);}
    .s2-3::before{content: "";flex: none;width: 0;padding-top: 40%;}
    .s2-4{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));grid-gap: var(--gap);}
    .s2-5{padding: 35rem 100rem;background-color: var(--c2);border-radius: var(--br1);display: grid;grid-template-rows: auto 1fr auto;grid-template-columns: auto;grid-gap: var(--gap);overflow: hidden;}
    .s2-5::before{content: "";height: var(--btn);}
    .s2-5-1{text-align: center;margin: auto;width: 100%;overflow: hidden;}
    .s2-5-1 .swiper-wrapper{align-items: center;}
    .s2-5-2{display: flex;justify-content: center;}
    .s2-6{padding: 100rem;background-color: var(--c5);border-radius: var(--br1);color: var(--c0);display: flex;align-items: center;}
    .s2-6::before{content: "";flex: none;width: 0;padding-top: 75%;}
    
    .s2-7{margin: auto;text-align: center;display: flex;flex-direction: column;align-items: center;}
    .s2-7-1{position: relative;overflow: hidden;width: 220rem;border-radius: 50%;display: flex;}
    .s2-7-1:not(:last-child){margin-bottom: 20rem;}
    .s2-7-1::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .s2-7-3{opacity: .5;}
    .s2-8{padding: 10rem;display: flex;flex-direction: column;align-items: center;text-align: center;}
    .s2-8-1{border: var(--sl) solid var(--bc);border-radius: var(--br2);padding: 15rem;display: flex;align-items: center;justify-content: center;width: var(--btn);height: var(--btn);margin-bottom: 10rem;color: var(--c5);}
    .s2-8-1 *{fill: currentColor;}
    .s2-8-1 svg{width: 100%;height: auto;max-height: 100%;}
    .s2-9{display: flex;}
    .s2-10{flex: 1;border-left: var(--sl) solid var(--c7);padding: 0 10rem;}
    .s2-9:first-child .s2-10:first-child{border: none;} 
    
    .s3.section__contrast{padding: 180rem 0;}
    .s3-1{display: grid;grid-template-columns: var(--cols);grid-gap: var(--gap);}
    .s3-1:not(:last-child){margin-bottom: 70rem;}
    .s3-1-1{display: flex;grid-column-end: span 2;}
    .s3-1-2{display: flex;grid-column-end: span 3;}
    .s3-3{overflow: hidden;position: relative;border-radius: var(--br1);display: flex;}
    .s3-3::before{content: "";flex: none;width: 0;padding-top: 30%;}
    
    .s4-1{border: var(--sl) solid var(--c7);border-radius: var(--br1);padding: 45rem 0;display: flex;}
    .s4-2{flex: 1;display: flex;flex-direction: column;align-items: center;text-align: center;padding: 0 20rem;}
    .s4-2:not(:first-child){border-left: var(--sl) solid var(--bc);}
    .s4-2-1{font-size: var(--f-n);line-height: 1;letter-spacing: -.05em;display: inline-flex;align-items: baseline;}
    .s4-2-2{margin-top: 20rem;max-width: 315rem;}
    .s4-2-3{margin-top: 10rem;font-size: var(--f-xs);user-select: none;opacity: .6;}
    
    .s4.section__contrast .s4-1{padding: 0;border: none;}
    
    .s5-1{position: relative;display: flex;max-width: 1200rem;flex-direction: column;margin: 0 auto;}
    .s5-2{pointer-events: none2;}
    .s5-2 .st1{opacity: .25;transition: all 1s;will-change: transform;}
    .s5-2 .st2{opacity: .13;}
    .s5-2 .st1.active{r: 8;opacity: 1;}
    .s5-3{position: absolute;bottom: 0;left: 0;margin: 80rem;z-index: 1;display: flex;align-items: flex-start;}
    .s5-3-1{font-size: var(--f-s);margin-right: 20rem;line-height: 1;}
    .s5-3-2{font-size: var(--f-xl);letter-spacing: -.05em;line-height: .75;}
    
    .s6-1{padding: 160rem;border: var(--sl) solid var(--bc);border-radius: var(--br3);margin: 0 160rem;position: relative;}
    .s6-2{padding: 160rem;border: var(--sl) solid var(--bc);border-radius: var(--br3);position: relative;}
    .s6-3{display: flex;background-color: var(--c5);color: var(--c0);border-radius: var(--br3);align-items: center;padding: 80rem;position: relative;}
    .s6-3::before{content: "";flex: none;width: 0;padding-top: 0%;}
    .s6-3 .section-header{width: 100%;}
    .s6-3 .button__default{background-color: var(--c0);}
    .s6-5{position: absolute;top: 0;left: 0;display: flex;align-items: center;justify-content: center;height: var(--sl);width: var(--sl);offset-path: padding-box;offset-distance: 0%;offset-rotate: 0deg;animation: move var(--move-speed) linear infinite;}
    .s6-5-1{flex: none;width: 130rem;height: 130rem;border-radius: 50%;position: relative;overflow: hidden;border: max(2px, 3rem) solid var(--c6);}
    
    
    .s6-1 > .s6-4 .s6-5:nth-child(1){}
    .s6-1 > .s6-4 .s6-5:nth-child(2){offset-distance: 20%;animation-name: move2;}
    .s6-1 > .s6-4 .s6-5:nth-child(3){offset-distance: 40%;animation-name: move3;}
    .s6-1 > .s6-4 .s6-5:nth-child(4){offset-distance: 60%;animation-name: move4;}
    
    .s6-2 > .s6-4 .s6-5:nth-child(1){animation-direction: reverse;}
    
    .s7-1{display: grid;grid-template-columns: 1fr auto;grid-gap: 50rem;align-items: flex-end;margin-bottom: 60rem;}
    .s7-1-1:only-child{grid-column: 1/-1;}
    .s7-2{display: grid;grid-template-columns: var(--cols);grid-gap: var(--gap);}
    .s7-2-1{grid-column: 1/-1;}
    .s7-2-2{grid-column-end: span 3;}
    .s7-2 .swiper{overflow: visible;margin-left: calc(-1 * var(--gap));}
    .s7-2 .swiper-slide{padding-left: var(--gap);} 
    .s7-3{margin-top: 25rem;display: flex;justify-content: center;}
    
    .s8-1{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));grid-gap: var(--gap);align-items: flex-start;}
    .s8-3{grid-column: 2/4;}
    .s8-4:not(:first-child){margin-top: 80rem;}
    .s8-5{margin-top: 40rem;}
    
    .s9{padding: 270rem 0;}
    
    .s10-1{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: var(--gap);align-items: flex-start;}
    .s10-2:first-child{margin-right: 40rem;}
    .s10-2-2{max-width: 440rem;}
    .s10-2-2:not(:first-child){margin-top: 40rem;}
    .s10-3{grid-column-end: span 2;display: flex;overflow: hidden;position: relative;border-radius: var(--br1);}
    .s10-3:last-child{margin-left: 70rem;}
    .s10-3::before{content: "";flex: none;width: 0;padding-top: 65%;}
    .s10-4:not(:last-child){margin-bottom: 70rem;}
    
    .s11-1{display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap);align-items: flex-start;}
    .s11-3{border-top: var(--sl) solid var(--bc);}
    .s11-4{padding: 30rem 0;border-bottom: var(--sl) solid var(--bc);display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: var(--gap);font-size: var(--f-m1);letter-spacing: -.05em;}
    .s11-4-1{grid-column: 1/4;padding: 0 24rem;}
    .s11-4-1:only-child{grid-column: 1/5;padding: 0;}
    .s11-4-2{color: var(--c9);text-align: right;grid-column: 4/7;padding: 0 24rem;}
    
    .s12-1{display: grid;grid-template-columns: var(--cols);align-items: flex-start;grid-gap: 70rem var(--gap);}
    .s12-2{grid-column: 1/4;padding-right: 50rem;}
    .s12-2-2{margin-top: 20rem;}
    .s12-3{grid-column: 4/6;}
    .s12-3-1{max-width: 440rem;}
    .s12-3-2:not(:first-child){margin-top: 30rem;}
    .s12-4{grid-column: 1/-1;overflow: hidden;position: relative;border-radius: var(--br1);display: flex;}
    .s12-4::before{content: "";flex: none;width: 0;padding-top: 30%;}
    
    .s13-1{display: grid;grid-template-columns: auto;grid-gap: 220rem;}
    .s13-2{display: grid;grid-template-columns: var(--cols);grid-gap: var(--gap);}
    .s13-4{grid-column: 1/3;padding-bottom: 30rem;}
    .s13-4-2{margin-top: 40rem;max-width: 440rem;}
    .s13-5{grid-column: 4/7;background-color: var(--bc);padding: 40rem;border-radius: var(--br1);display: flex;flex-direction: column;}
    .s13-5-1{display: flex;flex-direction: column;margin-bottom: auto;}
    .s13-5-1::after{content: "";height: var(--sl);flex: none;background-color: currentColor;opacity: .2;width: 100%;margin-top: 30rem;}
    .s13-5-2{margin-top: 40rem;max-width: 440rem;font-size: var(--f-m);letter-spacing: -.05em;}
    
    .s14-1{display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap);align-items: flex-start;}
    .s14-2-2{margin-top: 40rem;font-size: var(--f-xs);}
    .s14-3{padding-right: 70rem;}
    
    .s15-1{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));grid-gap: var(--gap);}
    .s15-2{display: flex;flex-direction: column;}
    .s15-2-2{max-width: 440rem;margin-top: 40rem;}
    .s15-2-2:not(:last-child){margin-bottom: 70rem;}
    .s15-2-3{margin-top: auto;display: flex;}
    .s15-3{grid-column: 2/4;}
    .s15-4{width: 60%;flex: none;max-width: 560rem;background-color: var(--c2);border-radius: var(--br1);padding: 40rem;user-select: none;}
    .s15-4:not(:first-child){margin-left: var(--gap);}
    .s15-4-2{max-width: 265rem;margin-top: 25rem;font-size: var(--f-xs);}
    .s15-4-3{margin-top: auto;padding-top: 50rem;}
    .s15-4-4{max-width: 265rem;margin-top: 25rem;font-size: var(--f-xs);opacity: .5;}
    
    .s17-1{display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap);align-items: flex-start;grid-template-rows: auto 1fr;}
    .s17-2{padding-right: 50rem;}
    .s17-4{margin-top: 60rem;display: grid;grid-template-columns: auto;grid-gap: 15rem;}
    .s17-5{display: flex;align-items: flex-start;position: relative;}
    .s17-5-1{flex: none;width: 65rem;height: 65rem;border-radius: var(--br2);overflow: hidden;display: flex;align-items: flex-start;justify-content: center;padding: 15rem;position: relative;border: var(--sl) solid var(--c7);margin-right: 25rem;}
    .s17-5-2{display: flex;align-items: center;min-height: 65rem;}
    .s17-6-2 .section-header{text-align: left;width: auto;align-items: flex-start;}
    .s17-6.success .s17-6-1,
    .s17-6:not(.success) .s17-6-2{display: none;}
    .s17-7{margin-top: auto;max-width: 410rem;color: var(--c13);font-size: var(--f-xs);}
    
    .s18-1 .swiper{margin-left: calc(-1 * var(--gap));}
    .s18-1 .swiper-slide{padding-left: var(--gap);}
    .s18-2{margin-top: 25rem;display: flex;justify-content: center;}
    
    .s19-1{display: flex;flex-direction: column;width: 100%;max-width: 770rem;margin: 0 auto;}
    .s19-2{position: relative;user-select: none;overflow: hidden;}
    .s19-3:not(:last-child){margin-bottom: 40rem;}
    .s19-4{display: flex;width: 100%;}
    .s19-4 .textfield{width: 100%;}
    .s19-5{margin-top: 30rem;}
    .s19-6{width: 100%;display: flex;}
    .s19-8{margin-top: 80rem;}
    .s19-10{margin-top: 60rem;}
    
    .article-form-container:not(.active) .s19-2{max-height: 250rem;}
    .article-form-container:not(.active) .s19-2::after{content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;background-image: linear-gradient(transparent, var(--c0));}
    .article-form-container:not(.active) .s19-8{display: none;}
    
    .article-form-container.active .s19-2{max-height: none;}
    .article-form-container.active .s19-10{display: none;}
    
    .s404{display: flex;align-items: center;padding-bottom: 120rem;}
    .s404:last-child{margin: 0;}
    .s404-1{display: flex;}
    .s404-2{position: absolute;top: 0;right: 20%;height: 100%;background-image: url(../img/404-logo-1.svg);background-repeat: no-repeat;background-size: contain;background-position: center;aspect-ratio: 1/1;pointer-events: none;transition: all 1s .5s;will-change: transform;}
    .s404-2:not(.active){transition-duration: 0s;opacity: 0;transform: rotate(-45deg);}
    .s404-3{display: flex;flex-direction: column;align-items: center;text-align: center;}
    .s404-3-1{font-size: 220rem;line-height: 1;}
    .s404-4{margin-top: 50rem;display: flex;justify-content: center;}
    .s404-5{position: relative;padding: 10% 0;margin: 0 auto;}
    
   
}

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

        --wr: 16rem;

        --gap: 12rem;

        --br1: 32rem;
        --br2: 16rem;
        --br3: 32rem;
        --br4: 24rem;
        --br5: 8rem;

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

        --f-xxs: 12rem;
        --f-xs: 12rem;
        --f-s: 14rem;
        --f-d: 14rem;
        --f-m1: 18rem;
        --f-m: 18rem;
        --f-b: 24rem;
        --f-l: 28rem;
        --f-xl: 40rem;
        --f-n: 58rem;

        --btn: 45rem;

        --mw: 680rem; 

        --move-speed: 30s;


    }
    
    html{font-size: 1px;}
    
    .desktop{display: none!important;}
    
    .title br{display: none;}
    
    .button__default{width: 100%;}
    
    .carousel-button{padding: 10rem;}
    
    .header{overflow: hidden;border-bottom: none;margin-bottom: 60rem;z-index: 100;transition: all .5s;}
    
    .topbar{grid-template-columns: 1fr auto auto;padding: 10rem 0;grid-gap: 16rem;}
    .topbar-nav{display: none;}
    .topbar-action-button:nth-child(2){display: none;}
    .topbar-logo{max-width: 105rem;margin: 0;background-image: url(../img/opoc-logo-white-1.svg);background-position: center;background-repeat: no-repeat;background-size: contain;}
    .topbar-logo img{transition: opacity .5s;}
    
    .footer{overflow: hidden;padding-bottom: var(--wr);}
    .footer-grid{grid-template-columns: 1fr 1fr;grid-gap: 0 var(--gap);grid-template-rows: auto;}
    
    .f1{flex-direction: row;align-items: center;grid-column: 1/-1;}
    .f1-1{max-width: 105rem;}
    .f1-2{margin: 0 0 0 10rem;}
    .f1-2 a{width: 40rem;height: 40rem;padding: 12rem;border-radius: var(--br5);}
    .f2-0{margin-top: 30rem;}
    .f2-1:not(:first-child){margin: 0;}
    .f2-1-1{font-size: var(--f-m);}
    .f3{margin: 30rem 0;}
    .f4{margin-bottom: 0;grid-template-columns: auto;grid-gap: 8rem;font-size: var(--f-s);}
    .f4-1 br{display: none;}
    .f4-2 ul{grid-auto-flow: row;}
    .f5{font-size: var(--f-s);margin-top: 8rem;grid-column: 1/-1;}
    .f6{font-size: var(--f-s);margin-top: 8rem;grid-column: 1/-1;}
    .f7{font-size: var(--f-s);margin-top: 8rem;grid-column: 1/-1;}
    
    .faceline-images{margin-left: -2rem;}
    .faceline-image{width: 40rem;border-width: 2rem;}
    .faceline-image:not(:first-child){margin-left: -10rem;}
    .faceline-image-icon{width: 11rem;height: 11rem;}  
    
    .tags ul{justify-content: center;}
    .tags li{padding: 8rem 12rem;font-size: var(--f-xs);}
    
    .expand-caption{margin-bottom: 20rem;}
    .expand-item{padding: 25rem 0;}
    .expand-header-icon{width: 24rem;height: 24rem;}
    .expand-content{max-width: 280rem;}
    
    .formbox-row{flex-direction: column;}
    .formbox-cell:not(:first-child){margin: var(--gap) 0 0;}
    .formbox-footer{margin-top: var(--gap);}
    
    .textfield-input{padding: 16rem 24rem;}
    
    .selector-holder{padding: 16rem 24rem;}
    .selector-holder-icon{width: 1em;height: 1em;}
    .selector-list{padding-top: 12rem;border-radius: 0 0 var(--br4) var(--br4);}
    .selector-option{padding: 16rem 24rem;}
    .selector-option::after{margin: 0 24rem;}
    
    .section{margin-top: 96rem;}
    .section:last-child{margin-bottom: 96rem;}
    .section__contrast{padding: 85rem 0;}
    .section__contrast:last-child{margin-bottom: 60rem;}
    
    .section-top{top: -96rem;}
    
    .section-header{width: 100%;}
    .section-header:not(:last-child){margin-bottom: 50rem;}
    .section-header-pretitle{height: 50rem;padding: 15rem 30rem;min-width: 155rem;margin-bottom: 25rem;border-radius: var(--br5);}
    .section-header-title{max-width: 280rem;}
    .section-header-subtitle{margin-top: 25rem;max-width: 280rem;}
    .section-header-action{margin-top: 25rem;width: 100%;flex-direction: column;}
    .section-header-action .button:not(:first-child){margin: 8rem 0 0;}
    
    .card-1{border-radius: var(--br4);padding: 25rem 25rem 40rem;}
    .card-1 .card-header{width: 48rem;height: 48rem;}
    .card-1 .card-content{padding-top: 30rem;grid-gap: 20rem;}
    
    .card-2{border-radius: var(--br4);}
    .card-2 .card-inner{padding: 15rem;}
    .card-2 .card-content{padding: 25rem;}
    
    .card-3{background-color: var(--c2);border-radius: var(--br4);flex-direction: column;padding: var(--gap) 0;}
    .card-3::before{display: none;}
    .card-3 .card-header{position: relative;display: flex;height: auto;border-radius: var(--br4);overflow: hidden;margin: 0 var(--gap) 30rem;width: auto;}
    .card-3 .card-header::before{content: "";flex: none;width: 0;padding-top: 55%;}
    .card-3 .card-inner{padding: 0;}
    .card-3 .card-inner > .card-tags{display: none;}
    .card-3 .card-content{padding: 0 25rem;background-color: transparent;border-radius: 0;display: flex;flex-direction: column;align-items: flex-start;}
    .card-3 .card-title{padding: 0;}
    .card-3 .card-tags{margin: 20rem 0 0;}
    .card-3 .card-tags li{background-color: transparent;position: relative;z-index: 1;padding: 10rem 12rem;font-size: var(--f-xs);}
    .card-3 .card-tags li::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: currentColor;z-index: -1;opacity: .04;}
    .card-3 .card-info{display: grid;grid-template-columns: 1fr 1fr;grid-gap: var(--gap);width: 100%;}
    .card-3 .card-info-col:not(:first-child){margin: 0;}
    .card-3 .card-info-col:nth-child(1){order: 1;}
    .card-3 .card-info-col:nth-child(2){order: 3;grid-column: 1/-1;}
    .card-3 .card-info-col:nth-child(3){order: 2;}
    .card-3 .card-action{padding-top: 30rem;}
    
    .s1-1{padding: 0;grid-gap: 0;grid-row: auto;}
    .s1-2{grid-column: 1/-1;padding: 0;max-width: 90%;}
    .s1-3{grid-column: 1/-1;padding-top: 30rem;max-width: none;}
    .s1-3-1{max-width: 80%;}
    .s1-3-2{}
    .s1-3-2:not(:first-child){margin-top: 25rem;}
    .s1-3-4{height: 50rem;padding: 15rem 30rem;margin-bottom: 25rem;border-radius: var(--br5);margin-right: auto;}
    .s1-5{margin-top: 50rem;min-height: 300rem;}
    .s1-7{order: 1;margin-top: 25rem;max-width: 280rem;}
    .s1-8{order: -2;grid-column: 1/-1;margin-bottom: 30rem;}
    
    .s2:not(:first-child){margin-top: 30rem;}
    .s2-1{grid-gap: 30rem;}
    .s2-2{padding: 0;border-radius: 0;display: grid;grid-template-columns: auto;grid-gap: 8rem;background-color: transparent;}
    .s2-3::before{padding-top: 60%;}
    .s2-4{grid-template-columns: var(--cols);grid-gap: 40rem;padding: 20rem 30rem;border-radius: var(--br1);background-color: var(--c5);color: var(--c0);--bc: var(--c8);}
    .s2-5{padding: 0;border-radius: 0;grid-template-rows: 1fr auto;grid-gap: 0;background-color: transparent;}
    .s2-5::before{display: none;}
    .s2-5-1 .swiper-wrapper{align-items: flex-start;}
    .s2-5-2{margin-top: 30rem;}
    .s2-6{padding: 0;order: -1;border-radius: 0;background-color: transparent;}
    .s2-6::before{display: none;}
    .s2-7-1{width: 60rem;}
    .s2-7-2,
    .s2-7-3{font-size: var(--f-xs);}
    .s2-9{border-radius: var(--br2);background-color: var(--c2);padding: 15rem 0;}
    .s2-10{padding: 0;}
    .s2-10:first-child{border: none;}
    
    .s3-1:not(:last-child){margin-bottom: 50rem;}
    .s3-3{min-height: 300rem;}
    
    .s4-1{border-radius: var(--br4);flex-direction: column;padding: 0 25rem;}
    .s4-2{padding: 50rem 0;}
    .s4-2:not(:first-child){border-left: none;border-top: var(--sl) solid var(--bc);}
    .s4-2-2{max-width: 220rem;}
    
    .s5-1{margin: 40rem var(--awr) 0;overflow-x: clip;}
    .s5-2{position: relative;margin: 0 -20rem;}
    .s5-2::after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;background-image: linear-gradient(to right, var(--c5), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, var(--c5));}
    .s5-3{position: relative;margin: 0;bottom: auto;left: auto;padding: 0 var(--wr);}
    .s5-3-1{margin-right: 15rem;}
    
    .s6-1{margin: 20rem 8rem;padding: 56rem 36rem;}
    .s6-2{border-radius: 0;border: none;padding: 0;}
    .s6-2 .s6-4{display: none;}
    .s6-3{padding: 40rem 15rem;}
    .s6-3 .section-header-subtitle{max-width: 200rem;}
    .s6-5-1{width: 42rem;height: 42rem;border-width: 2rem;}
    
    .s7-1{margin-bottom: 30rem;}
    .s7-1-1{grid-column: 1/-1;}
    .s7-1-2{display: none;}
    .s7-2-1{grid-column: auto;}
    .s7-2-2{grid-column: auto;}
    
    .s8-1{grid-template-columns: auto;grid-gap: 30rem;}
    .s8-2{grid-column: 1/-1;}
    .s8-3{grid-column: 1/-1;}
    .s8-4:not(:first-child){margin-top: 30rem;}
    
    .s9{padding: 85rem 0;}
    
    .s10-1{grid-template-columns: auto;grid-gap: 50rem;}
    .s10-2{max-width: 280rem;}
    .s10-2:first-child{margin: 0;}
    .s10-2-2:not(:first-child){margin-top: 25rem;}
    .s10-3{grid-column: 1/-1;order: 1;}
    .s10-3:last-child{margin-left: 0;min-height: 300rem;}
    .s10-4:not(:last-child){margin-bottom: 25rem;}
    
    .s11-1{grid-template-columns: auto;grid-gap: 0;}
    .s11-2{margin-bottom: 30rem;}
    .s11-3{grid-column: 1/-1;}
    .s11-4{grid-template-columns: auto;padding: 25rem 0;padding-right: 30rem;grid-gap: 5rem;}
    .s11-4-1,
    .s11-4-1:only-child,
    .s11-4-2{text-align: left;grid-column: 1/-1;padding: 0;}
    
    .s12-1{grid-gap: 0;}
    .s12-2{grid-column: 1/-1;padding: 0;text-align: center;margin-bottom: 25rem;}
    .s12-2-2{margin-top: 10rem;}
    .s12-3{grid-column: 1/-1;}
    .s12-3-1{max-width: 280rem;text-align: center;margin: 0 auto;}
    .s12-3-2:not(:first-child){margin-top: 25rem;}
    .s12-4{margin-top: 50rem;min-height: 300rem;}
    
    .s13{padding: 85rem 0;}
    .s13-1{grid-gap: 100rem;}
    .s13-2{grid-gap: 0;}
    .s13-4{grid-column: 1/-1;padding-bottom: 50rem;max-width: 280rem;}
    .s13-4-1{max-width: 230rem;}
    .s13-4-2{margin-top: 25rem;}
    .s13-5{grid-column: 1/-1;border-radius: var(--br4);padding: 25rem;}
    .s13-5-2{margin-top: 70rem;}
    
    .s14-1{grid-template-columns: auto;}
    .s14-2{margin-bottom: 50rem;}
    .s14-2-2{margin-top: 15rem;font-size: var(--f-d);}
    .s14-3{grid-column: 1/-1;padding: 0;}
    
    .s15-1{grid-template-columns: auto;grid-gap: 50rem;}
    .s15-2{max-width: 280rem;}
    .s15-2-1{max-width: 200rem;}
    .s15-2-2,
    .s15-2-2:not(:last-child){margin-top: 25rem;margin-bottom: 0;}
    .s15-2-3{display: none;}
    .s15-3{grid-column: 1/-1;}
    .s15-4{width: 100%;border-radius: var(--br2);padding: 25rem;}
    .s15-4:not(:first-child){margin: 0;}
    .s15-4-2{margin-top: 15rem;}
    .s15-4-3{padding-top: 25rem;}
    .s15-4-4{margin-top: 15rem;max-width: 175rem;}
    .s15-6{display: grid;grid-template-columns: auto;grid-gap: var(--gap);}
    
    .s16-3{display: grid;grid-template-columns: auto;grid-gap: 8rem;}
    .s16-4{background-color: var(--c2);display: flex;justify-content: center;border-radius: var(--br2);padding: 15rem 0;}
    .s16-6{display: none;}
    .s16-7{flex: 1;padding: 0;}
    .s16-7:not(:first-child){border-left: var(--sl) solid var(--bc);}
  
    .s17-1{grid-template-columns: auto;grid-gap: 0;grid-template-rows: auto;}
    .s17-2{grid-column: 1/-1;padding: 0;margin-bottom: 64rem;}
    .s17-3{grid-column: 1/-1;padding: 0;}
    .s17-4{margin-top: 30rem;}
    .s17-5-1{margin-right: 10rem;width: 32rem;height: 32rem;padding: 8rem;border-radius: var(--br5);}
    .s17-5-2{max-width: 220rem;min-height: 32rem;}
    .s17-5-2 br{display: none;}
    .s17-7{margin-top: 24rem;max-width: 280rem;}
    
    .s18-1 .swiper{overflow: visible;}
    
    .s19-1{align-items: stretch;}
    .s19-3{max-width: 280rem;}
    .s19-3:not(:last-child){margin-bottom: 25rem;}
    .s19-4{margin-top: 0;}
    .s19-5{margin-top: 10rem;}
    .s19-8{margin-top: 60rem;}
    
    .s2-8,
    .s16-5{padding: 0 6rem;display: flex;flex-direction: column;align-items: center;}
    .s2-8-1,
    .s16-5-1{display: flex;align-items: center;justify-content: center;border: var(--sl) solid var(--bc);width: 24rem;height: 24rem;padding: 4rem;border-radius: 25%;margin: 0;}
    .s2-8-2,
    .s16-5-2{margin-top: 6rem;text-align: center;font-size: var(--f-s);max-width: 180rem;}
    
    .s404:last-child{margin: 0;}
    .s404-1{height: 480rem;align-items: center;position: relative;padding: 0 var(--wr);margin: 0 var(--awr);}
    .s404-2{right: auto;right: 0;top: 50%;transform: translateY(-50%);z-index: -1;}
    .s404-3-1{font-size: 72rem;}
    .s404-3-2{margin-top: 15rem;}
    .s404-4{margin-top: 10rem;}
    .s404-5{position: static;}
     
    .topbar-menu{position: relative;display: flex;width: 48rem;height: 48rem;align-items: center;padding: 15rem;border-radius: 50%;border: var(--sl) solid var(--bc);}
    .topbar-menu-inner{position: relative;color: currentColor;height: 1rem;width: 100%;}
    .topbar-menu-inner::before,
    .topbar-menu-inner::after{content: "";position: absolute;background-color: currentColor;height: 100%;width: 100%;left: 0;border-radius: 999rem;transition: all 0s;}
    .topbar-menu-inner::before{bottom: 3rem;}
    .topbar-menu-inner::after{top: 3rem;}
   
    .popup{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: var(--c5);color: var(--c0);z-index: 99;padding: var(--headroom-height) 0 0;transition: all .5s;opacity: 0;transform: translateY(-100%);}
    .popup-inner{height: 100%;width: 100%;overflow: auto;padding: 30rem var(--wr);display: flex;flex-direction: column;}
    .popup-nav{margin-bottom: auto;}
    .popup-nav > ul{display: grid;grid-template-columns: auto;grid-gap: 20rem;font-size: var(--f-l);}
    .popup-nav > ul ul{padding-top: 12rem;padding-left: 10rem;display: grid;grid-template-columns: auto;grid-gap: 6rem;font-size: var(--f-b);}
    .popup-nav li > a{display: flex;align-items: center;}
    .popup-nav li > a:not(:last-child)::after{content: "";flex: none;width: 24rem;height: 24rem;margin-left: 5rem;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.99707 8.99951L11.9971 14.9995L17.9971 8.99951' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");background-repeat: no-repeat;background-position: center;background-size: contain;}
    .popup-footer{margin-top: 30rem;display: grid;grid-template-columns: auto;grid-gap: 20rem;}
    .popup-tel{position: relative;display: flex;align-items: center;}
    .popup-tel-icon{flex: none;display: flex;align-items: center;justify-content: center;border-radius: 50%;width: 32rem;height: 32rem;padding: 8rem;border: var(--sl) solid var(--c8);margin-right: 10rem;}
    
    .popup .button__default{background-color: var(--c0);}
    
    .popup-nav > ul > li > a:not(.active){opacity: .6;}
    .popup-nav > ul > li > a:not(.active) ~ ul{display: none;}
    
    .popup-nav > ul > li > a.active::after{transform: scaleY(-1);}
    
    .popup-active{overflow: hidden;}
    .popup-active .popup{transform: translateY(0);opacity: 1;}
    .popup-active .header{color: var(--c0);background-color: rgba(0,0,0,0);--bc: var(--c8);}
    .popup-active .topbar-logo img{opacity: 0;}
    .popup-active .topbar-menu-inner::before{bottom: 0;transform: rotate(45deg);}
    .popup-active .topbar-menu-inner::after{top: 0;transform: rotate(-45deg);}
    
    .fixed-nav{margin-bottom: 15rem;}
    .tabs-container{align-items: flex-start;}
    .tabs{padding: 16rem 32rem;width: 100%;display: grid;grid-template-columns: 1fr auto;grid-gap: var(--gap);align-items: flex-end;border-radius: 28rem;}
    .tabs-icon{display: flex;align-items: center;justify-content: center;width: 24rem;height: 24rem;}
    .tabs ul{display: flex;flex-direction: column;overflow: hidden;justify-content: center;min-height: 24rem;}
    .tabs li{overflow: hidden;position: relative;display: flex;min-height: 24rem;align-items: center;}
    .tabs li a{text-overflow: ellipsis;overflow: hidden;}
    
    .tabs li.current{pointer-events: none;}
    
    .tabs-container.active .tabs-icon{transform: scaleY(-1);}
    .tabs-container.active .tabs li:not(:first-child){margin-top: 10rem;}
    .tabs-container.active .tabs li.current{color: var(--c5);}
    
    .tabs-container:not(.active) .tabs{color: var(--c5);}
    .tabs-container:not(.active) .tabs li:not(.current){display: none;}
    
    .fixed-nav.mobile-hidden .tabs-container{opacity: 0;transform: translateY(50rem);visibility: hidden;}
    
    .textbox h2{margin: 60rem 0 25rem;}
    .textbox img{margin: 35rem 0;}
    
    .cookies{margin: 0;border-width: var(--sl) 0 0;border-radius: 0;padding: 25rem var(--wr);max-width: none;}
    
}


@media screen and (min-width: 1024px) {
    
    .mobile{display: none!important;}
    
    .f1{}
    .f1-1{margin-right: 50rem;}
    
    .tabs ul{display: flex;flex-wrap: wrap;margin: -5rem;}
    .tabs li{margin: 5rem;position: relative;border-radius: 999rem;border: var(--sl) solid var(--bc);padding: 0 20rem;height: var(--btn);display: flex;align-items: center;white-space: nowrap;overflow: hidden;transition: all .15s;min-width: 220rem;justify-content: center;text-overflow: ellipsis;}
    .tabs li.current{color: var(--c0);background-color: var(--c5);border-color: var(--c5);}
    
    .s1-8 ~ .s1-2{order: -1;}
    .s1-8 ~ .s1-2:not(:last-child){grid-row: 1/3;}
    .s1-8 ~ .s1-3{padding: 0;}
    
    .s1-7 ~ .s1-3{grid-row: 1/3;}
    
    .s8-2{padding-right: 50rem;position: sticky;top: calc(var(--headroom-height) + 120rem);z-index: 1;}
    
    .s11-2{padding-right: 70rem;position: sticky;top: calc(120rem + var(--headroom-height));}
    
    .s14-2{padding-right: 50rem;position: sticky;top: calc(var(--headroom-height) + 120rem);z-index: 1;}
    
    .s15-4{user-select: none;}
    .s15-5{width: 100%;display: flex;overflow: auto;overflow: -moz-scrollbars-none!important;scrollbar-width: none;}
    .s15-5::-webkit-scrollbar{display: none;}
    .s15-6{padding-left: var(--wr);display: flex;flex: none;}
    .s15-6::after{content: "";flex: none;width: var(--wr);}
    .s15-7{margin-right: var(--awr);margin-left: 70rem;position: relative;}
    
    .s15-7::before,
    .s15-7::after{content: "";position: absolute;top: 0;height: 100%;width: calc(100% - 560rem - var(--wr));transition: opacity 1s;pointer-events: none;}
    .s15-7::before{left: 0;background-image: linear-gradient(to right, var(--c0), rgba(0,0,0,0));}
    .s15-7::after{right: 0;background-image: linear-gradient(to left, var(--c0), rgba(0,0,0,0));}
    
    .s15-7.beginning::before,
    .s15-7.ending::after{opacity: 0;}
    
    .s15-7.beginning .next,
    .s15-7.ending .prev{cursor: pointer;}
    
    .s16-1{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 0;align-items: center;position: relative;}
    .s16-2{display: flex;align-items: center;}
    .s16-2::before{content: "";flex: none;width: 0;padding-top: 170%;}
    .s16-3{order: -1;}
    .s16-5{display: flex;align-items: center;position: relative;justify-content: center;}
    .s16-5-1{flex: none;width: 80rem;height: 80rem;border-radius: 50%;overflow: hidden;display: flex;align-items: center;justify-content: center;padding: 25rem;position: relative;z-index: 1;}
    .s16-5-1::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;background-color: var(--c5);opacity: .1;}
    .s16-5-1 *{fill: var(--c5);}
    .s16-5-2{margin: 12rem;flex: none;width: 300rem;position: absolute;}
    .s16-6{display: flex;align-items: center;justify-content: center;background-color: var(--c5);color: var(--c0);border-radius: 50%;overflow: hidden;flex: none;width: 100%;position: relative;z-index: 2;border: 10rem solid var(--c0);padding: 70rem;}
    .s16-6::before{content: "";flex: none;width: 0;padding-top: 100%;}
    .s16-7{position: absolute;top: 50%;display: flex;height: 0;align-items: center;width: 25%;right: 50%;transform-origin: right center;}
    .s16-7::after{content: "";flex: auto;width: 50%;border-bottom: var(--sl) dashed;opacity: .5;margin: 0 10rem;}
    .s16-8{display: grid;grid-template-columns: auto;grid-gap: 15rem;grid-template-rows: auto auto 5rem;}
    .s16-8-1{flex: none;width: 65rem;height: 65rem;border-radius: var(--br2);overflow: hidden;display: flex;align-items: center;justify-content: center;padding: 15rem;position: relative;border: var(--sl) solid var(--c8);margin: auto auto 0;}
    .s16-8-1 *{fill: currentColor;}
    .s16-8-1 svg{width: 100%;height: auto;max-height: 100%;}
    .s16-8-2{font-size: var(--f-m);width: 100%;text-align: center;}
    
    .s16-4:nth-child(1) .s16-7:nth-child(1){transform: rotate(90deg);}
    .s16-4:nth-child(1) .s16-7:nth-child(1) .s16-5{transform: rotate(-90deg);flex-direction: column;}
    .s16-4:nth-child(1) .s16-7:nth-child(1) .s16-5-2{text-align: center;bottom: 100%;}
    .s16-4:nth-child(1) .s16-7:nth-child(2){transform: rotate(30deg);}
    .s16-4:nth-child(1) .s16-7:nth-child(2) .s16-5{transform: rotate(-30deg);}
    .s16-4:nth-child(1) .s16-7:nth-child(2) .s16-5-2{right: 100%;text-align: right;max-width: 125rem;}
    .s16-4:nth-child(1) .s16-7:nth-child(3){transform: rotate(150deg);}
    .s16-4:nth-child(1) .s16-7:nth-child(3) .s16-5{transform: rotate(-150deg);}
    .s16-4:nth-child(1) .s16-7:nth-child(3) .s16-5-2{left: 100%;}
    .s16-4:nth-child(2) .s16-7:nth-child(1){transform: rotate(340deg);}
    .s16-4:nth-child(2) .s16-7:nth-child(1) .s16-5{transform: rotate(-340deg);}
    .s16-4:nth-child(2) .s16-7:nth-child(1) .s16-5-2{right: 100%;text-align: right;}
    .s16-4:nth-child(2) .s16-7:nth-child(2){transform: rotate(200deg);}
    .s16-4:nth-child(2) .s16-7:nth-child(2) .s16-5{transform: rotate(-200deg);}
    .s16-4:nth-child(2) .s16-7:nth-child(2) .s16-5-2{left: 100%;max-width: 175rem;}
    .s16-4:nth-child(2) .s16-7:nth-child(3){transform: rotate(240deg);}
    .s16-4:nth-child(2) .s16-7:nth-child(3) .s16-5{transform: rotate(-240deg);}
    .s16-4:nth-child(2) .s16-7:nth-child(3) .s16-5-2{left: 100%;}
    .s16-4:nth-child(3) .s16-7:nth-child(1){transform: rotate(300deg);}
    .s16-4:nth-child(3) .s16-7:nth-child(1) .s16-5{transform: rotate(-300deg);}
    .s16-4:nth-child(3) .s16-7:nth-child(1) .s16-5-2{right: 100%;text-align: right;}
    
    .s17:first-child{margin-top: -60rem;}
    .s17-6:not(:last-child){grid-row-end: span 2;}
    
}

@media screen and (min-width: 1600px) {
    
    
    html{font-size: 1px;}
    
    .s1-5,
    .s2-3{margin-left: 0;margin-right: 0;}
    
}

/* hover animations */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
    
    .f2 a,
    .f4 a,
    .f5 a,
	.s11-4 a,
    .s17-5-2 a,
	.topbar-tel a,
    .submenu-item:not(.submenu-item__button) .submenu-item-title a {transition: background-size .5s, color .5s;background-size: 0 var(--sl);background-repeat: no-repeat;background-position: right bottom;background-image: linear-gradient(currentColor, currentColor);}
   
    .f2 a:hover,
    .f4 a:hover,
    .f5 a:hover,
	.s11-4 a:hover,
    .s17-5:hover .s17-5-2 a,
	.topbar-tel a:hover,
    .submenu-item:not(.submenu-item__button):hover .submenu-item-title a{background-size: 100% var(--sl);background-position: left bottom;color: var(--c1);}
	
    .bubble{position: absolute;top: 0;left: 0;z-index: 1;width: 220%;display: flex;align-items: center;justify-content: center;aspect-ratio: 1/1;transform: translate(-50%, -50%);pointer-events: none;}
    .bubble::before{content: "";flex: none;transform: scale(0);background-color: var(--c5);width: 100%;border-radius: 50%;transition: transform .5s ease-out;will-change: transform;height: 100%;}
    
    .section__contrast .bubble::before,
    .s6-3 .bubble::before{background-color: var(--c4);}
    
    .button__default{transition: background-color .1s 0s;}
    .button__default .button-text{transition: color .5s 0s;}
    
    .button:hover .bubble::before,
    .faceline-image-button:hover .bubble::before{transform: scale(1);}
    
    .button__default:hover{background-color: rgba(0,0,0,0);transition-delay: .5s;}
    .button__default:hover .button-text{color: var(--c0);transition-delay: 0s;}
    
    .f1-2 a{transition: all .25s;}
    .f1-2 a:hover{background-color: var(--c5);color: var(--c0);border-color: rgba(0,0,0,0);}
    
    .faceline-image-button{transition: background-color .25s 0s, color .5s 0s;}
    .faceline-image-button .bubble::before{background-color: var(--c4);}
    .faceline-image-button:hover{background-color: var(--c0);color: var(--c1);transition-delay: .25s, 0s;}
    
    .section__contrast .button__default:hover .button-text,
    .s6-3 .button__default:hover .button-text{color: var(--c1);}
    
    .tabs li:not(.current):hover{background-color: var(--c0);}
    
    .button__secondary .button-text{transition: color .5s 0s;}
    .section__contrast .button__secondary{box-shadow: inset 0 0 0 var(--sl) var(--c0);}
    .section__contrast .button__secondary .bubble::before{background-color: var(--c0);}
    .section__contrast .button__secondary:hover .button-text{color: var(--c1);}
    
    .card-1{transition: all .25s;}
    .card-1 .card-header{transition: color .25s;}
    .card-1 .card-header *{transition: opacity .25s;}
    .card-1:hover{background-color: var(--c5);color: var(--c0);--bc: var(--c8);}
    .card-1:hover .card-header *{opacity: 1;}
    
    .section__contrast .card-1:hover{background-color: var(--c0);color: var(--c1);--bc: var(--c7);}
    .section__contrast .card-1:hover .card-header{color: var(--c5);}
    
    .card-3 .card-tags,
    .card-2 .card-action,
    .card-3 .card-action{transition: all .25s;}
    
    .card-2 .card-action,
    .card-3 .card-action{overflow: hidden;}
    
    .card-3.init:not(:hover) .card-tags{visibility: hidden;opacity: 0;}
    .card-2.init:not(:hover) .card-action,
    .card-3.init:not(:hover) .card-action{opacity: 0;padding: 0;height: 0;}
    
    .graph-col:not(:hover) .graph-col-bar::after{opacity: .5;}
    
    .submenu-item__button:hover{background-color: var(--c2);}
    .submenu-item-figure{transition: color .25s;}
    .submenu-item:hover .submenu-item-figure{color: var(--c5);}
    
    .topbar-nav-col::after{transition: transform .15s;}
    .topbar-nav-col:hover::after{transform: scale(1);}
    .topbar-nav-col:hover .topbar-nav-submenu{visibility: visible;opacity: 1;pointer-events: all;}
    .topbar-nav-col:hover .topbar-nav-button-icon{transform: scaleY(-1);}
    
    .s2-8{margin: -10rem 0;background-color: transparent;border-radius: var(--br2);transition: all .25s;}
    .s2-8-1{transition: color .25s;}
    .s2-8:hover{background-color: var(--c5);color: var(--c0);--bc: var(--c8);}
    .s2-8:hover .s2-8-1{color: var(--c0);}
    
    .s17-5-1{transition: color .5s;}
    .s17-5:hover .s17-5-1{color: var(--c5);}
      
    .selector-option:hover{background-color: var(--c5);color: var(--c0);}
    .selector-option:hover::after{display: none;}
    
}