/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/




/* -------------------------------------------------- generic ---------- */

*{-webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;} html{-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} ul, li, a, h1, h2, h3, p{position: relative; display: inline-block;} ul, li, a, img, p, h1, h2, h3{vertical-align: middle;} :focus{outline: none;} a{line-height: 0; text-decoration: none;} 



/* -------------------------------------------------- fonts ---------- */

@font-face{font-family: "MonaSans_Variable"; src: url("Fonts/MonaSans_Variable.woff2") format("woff2 supports variations"), url("Fonts/MonaSans_Variable.woff2") format("woff2-variations"), url("Fonts/MonaSans_Variable.woff") format("woff supports variations"), url("Fonts/MonaSans_Variable.woff") format("woff-variations"), url("Fonts/MonaSans_Variable.ttf") format("truetype supports variations"), url("Fonts/MonaSans_Variable.ttf") format("truetype-variations"); font-weight: 200 900;} 

/*@font-face{font-family: "ZT-Nature_Variable"; src: url("Fonts/ZT-Nature_Variable.woff2") format("woff2 supports variations"), url("Fonts/ZT-Nature_Variable.woff2") format("woff2-variations"), url("Fonts/ZT-Nature_Variable.woff") format("woff supports variations"), url("Fonts/ZT-Nature_Variable.woff") format("woff-variations"), url("Fonts/ZT-Nature_Variable.ttf") format("truetype supports variations"), url("Fonts/ZT-Nature_Variable.ttf") format("truetype-variations"); font-weight: 100 900;}*/ 

*{font-family: 'MonaSans_Variable', sans-serif;} /*.h0, h1, .h1, h2, .h2, h3, .h3{font-family: 'ZT-Nature_Variable', sans-serif;}*/ p{word-break: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; -ms-hyphenate-limit-chars: 6 3 3; hyphenate-limit-chars: 6 3 3;} .h0, .h1, .h2{word-break: normal; -webkit-hyphens: manual; -ms-hyphens: manual; -o-hyphens: manual; hyphens: manual;} .h0, [class*="link-"] .h0, h1, .h1, [class*="link-"] .h1, h2, .h2, [class*="link-"] .h2{font-weight: 600;} .h3, [class*="link-"] .h3, .h4, [class*="link-"] .h4, .written-bold{font-weight: 600;} [class*="link-"] p{font-weight: 500;} p{font-weight: 450;} 



/* -------------------------------------------------- font size ---------- */

#html-body{--font-space: -0.025; --ht-size: calc(var(--font-size) * pow(var(--font-rise), -1.4) * (1px + 0.1vw / 4)); --hl-size: calc(var(--font-size) * pow(var(--font-rise), -0.7) * (1px + 0.1vw / 4)); --hp-size: calc(var(--font-size) * (1px + 0.1vw / 4)); --h4-size: calc(var(--font-size) * pow(var(--font-rise), 1) * (1px + 0.1vw / 4)); --h3-size: calc(var(--font-size) * pow(var(--font-rise), 2) * (1px + 0.1vw / 2)); --h2-size: calc(var(--font-size) * pow(var(--font-rise), 4) * (1px + 0.1vw)); --h1-size: calc(var(--font-size) * pow(var(--font-rise), 5) * (1px + 0.1vw * 1.5)); --h0-size: calc(var(--font-size) * pow(var(--font-rise), 5.5) * (1px + 0.1vw * 2));} 

.ht, [class*="link-"] .ht{line-height: calc(var(--ht-size) * 1.5); font-size: var(--ht-size); letter-spacing: calc(var(--ht-size) * var(--font-space) / 4);} .hl, [class*="link-"] p{line-height: calc(var(--hl-size) * 1.5); font-size: var(--hl-size); letter-spacing: calc(var(--hl-size) * var(--font-space) / 4);} p, .hp{line-height: calc(var(--hp-size) * 1.5); font-size: var(--hp-size); letter-spacing: calc(var(--hp-size) * var(--font-space) / 4);} h4, .h4, [class*="link-"] .h4{line-height: calc(var(--h4-size) * 1.2); font-size: var(--h4-size); letter-spacing: calc(var(--h4-size) * var(--font-space) / 4);} h3, .h3, [class*="link-"] .h3{line-height: calc(var(--h3-size) * 1.3); font-size: var(--h3-size); letter-spacing: calc(var(--h3-size) * var(--font-space) / 3);} h2, .h2, [class*="link-"] .h2{line-height: calc(var(--h2-size) * 1.1); font-size: var(--h2-size); letter-spacing: calc(var(--h2-size) * var(--font-space) / 2);} h1, .h1, [class*="link-"] .h1{line-height: calc(var(--h1-size) * 1.0); font-size: var(--h1-size); letter-spacing: calc(var(--h1-size) * var(--font-space));} .h0, [class*="link-"] .h0{line-height: calc(var(--h0-size) * 0.9); font-size: var(--h0-size); letter-spacing: calc(var(--h0-size) * var(--font-space));} 

.header-navigation [class*="link-"] .h2{line-height: calc(var(--h2-size) * 1.0)}



/* -------------------------------------------------- color / hover ---------- */

#body-main.toggle, #body-footer.toggle{opacity: .17;} .opacity-high{opacity: .84;} .opacity-middle{opacity: .50;} .opacity-low{opacity: .29;} .opacity-lowest{opacity: .21;} 

:root{--color-light: hsl(191, 7%, 97%); --color-grey: hsl(191, 14%, 81%); --color-ci: hsl(191, 92%, 24%); --color-deep: hsl(191, 92%, 17%); --color-dark: hsl(191, 92%, 9%); --color-cursor: hsl(191, 27%, 52.5%);} 

.color-set-light, .color-set-dark .color-invers, .color-set-dark .front-invers{--color-back: var(--color-light); --color-front: var(--color-dark);} .color-set-dark, .color-set-light .color-invers, .color-set-light .front-invers{--color-back: var(--color-dark); --color-front: var(--color-light);} [class*="color-set-"], [class*="color-set-"] .color-invers, .back-back{background-color: var(--color-back);} .back-front, [class*="symbol-"] [class*="shape-"]{background-color: var(--color-front);} ::-webkit-input-placeholder{color: var(--color-front);} ::-moz-placeholder{color: var(--color-front);} :-ms-input-placeholder{color: var(--color-front);} ::-ms-input-placeholder{color: var(--color-front);} h1, h2, p, a, input, textarea, label, select, ::placeholder{color: var(--color-front);} 

.js-navigation-switch.switch p{color: var(--color-back);} .js-navigation-switch.switch .symbol-navigation [class*="shape-"], .js-navigation-switch.switch .symbol-process [class*="shape-"]{background-color: var(--color-back);} 

.js-cursor-outer, .js-cursor-inner{background-color: var(--color-cursor);} .back-ci{background-color: var(--color-ci);} [class*="symbol-"] [class*="shape-"]{background-color: var(--color-front);} .symbol-button .shape-0, [class*="link-"]:hover .symbol-scrolltop [class*="shape-"], .symbol-indicator .shape-1{background-color: var(--color-ci);} .symbol-button .shape-1{background-color: var(--color-deep);} .link-button p{color: var(--color-back);} 

.back-light{background-color: var(--color-light);} .back-grey{background-color: var(--color-grey);} .back-deep{background-color: var(--color-deep);} .back-dark{background-color: var(--color-dark);} 

.back-01{background-color: hsl(191, 92%, 9%, 0.05);} 

/*[class*="table-"] td{border-top-color: rgba(0,0,0,0.5);}*/ input, textarea{background-color: hsla(191, 14%, 81%, 0.29);} input:hover, textarea:hover, #form-initial .checkmark{background-color: hsla(191, 14%, 81%, 0.39);} #initial-optin:hover input ~ .checkmark, .symbol-indicator .shape-0{background-color: hsla(191, 14%, 81%, 0.49);}

[class*="link-"]{opacity: 1;} [class*="link-"]:hover{opacity: .29;} .hover-ci [class*="link-"]:hover{opacity: 1;} .hover-ci [class*="link-"]:hover p{color: var(--color-ci);} 

.hover-invers [class*="link-"]{opacity: .29;} .hover-invers [class*="link-"]:hover{opacity: 1;} .link-button:hover{opacity: 1;} 

.text-shadow{text-shadow: -0.1px -0.1px 2px hsla(191, 7%, 97%, 0.21), 0.1px -0.1px 2px hsla(191, 7%, 97%, 0.21), 0.1px 0.1px 2px hsla(191, 7%, 97%, 0.21), 0.1px 0.1px 2px hsla(191, 7%, 97%, 0.21);}

/*
https://stackoverflow.com/questions/50986688/invert-text-color-based-on-background-in-css

#html-body, #body-header, .header-navigation, .frame-fixed-top, .navigation-relative{background-color: transparent;} 
.navigation-relative{mix-blend-mode: difference;} 

.filter-invert, .filter-invert [class*="symbol-"]{background-color: transparent;} .filter-invert p, .filter-invert [class*="shape-"]{filter: invert(1);
mix-blend-mode: difference;} 
*/

/*html{scroll-behavior: smooth;}*/
/*header, nav{background-color: transparent;} 
.filter-back{mix-blend-mode: exclusion;}*/ 




/* -------------------------------------------------- gradient / mask---------- */

[class*="gradient-"]{pointer-events: none;} .gradient-horizontal{background-image: -webkit-gradient(linear, left top, right top, from(var(--color-back)), color-stop(10%, transparent), color-stop(90%, transparent), to(var(--color-back)));background-image: -o-linear-gradient(left, var(--color-back) 0%, transparent 10%, transparent 90%, var(--color-back) 100%);background-image: linear-gradient(90deg, var(--color-back) 0%, transparent 10%, transparent 90%, var(--color-back) 100%);} .gradient-vertical{background-image: -webkit-gradient(linear, left bottom, left top, from(var(--color-back)), color-stop(10%, transparent), color-stop(90%, transparent), to(var(--color-back)));background-image: -o-linear-gradient(bottom, var(--color-back) 0%, transparent 10%, transparent 90%, var(--color-back) 100%);background-image: linear-gradient(0deg, var(--color-back) 0%, transparent 10%, transparent 90%, var(--color-back) 100%);} .gradient-radial{background-image: -o-radial-gradient(transparent 0%, transparent 70%, var(--color-back) 100%);background-image: radial-gradient(transparent 0%, transparent 70%, var(--color-back) 100%);} 

.mask-diagonal-default{-webkit-mask-image: linear-gradient(-22.5deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 29%, rgba(0,0,0,1) 71%, rgba(0,0,0,0) 100%); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;} 



/* -------------------------------------------------- cursor ---------- */

.js-cursor-outer, .js-cursor-inner{position: fixed; display: block; left: -100px; top: 0; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); border: none; border-radius: 50%; z-index: 999; pointer-events: none;} .js-cursor-outer{-webkit-transition: left .07s ease-out, top .07s ease-out, width .29s ease-in-out, height .29s ease-in-out, background-color .29s, opacity .29s ease-in-out;-o-transition: left .07s ease-out, top .07s ease-out, width .29s ease-in-out, height .29s ease-in-out, background-color .29s, opacity .29s ease-in-out;transition: left .07s ease-out, top .07s ease-out, width .29s ease-in-out, height .29s ease-in-out, background-color .29s, opacity .29s ease-in-out;} .js-cursor-inner{-webkit-transition: left .19s ease-out, top .19s ease-out, width .29s ease-in-out, height .29s ease-in-out, background-color .29s, opacity .29s ease-in-out;-o-transition: left .19s ease-out, top .19s ease-out, width .29s ease-in-out, height .29s ease-in-out, background-color .29s, opacity .29s ease-in-out;transition: left .19s ease-out, top .19s ease-out, width .29s ease-in-out, height .29s ease-in-out, background-color .29s, opacity .29s ease-in-out;}

.js-cursor-outer{width: 41px; height: 41px; opacity: 0.24;} .js-cursor-inner{width: 7px; height: 7px; opacity: 1;} .js-cursor-outer.hover{width: 147px; height: 147px; opacity: 0.24;} .js-cursor-inner.hover{width: 147px; height: 147px; opacity: 0;} .js-cursor-hover{cursor: pointer;}



/* -------------------------------------------------- pattern ---------- */

/*[class*="pattern-"]{position: absolute; display: block; right: 50%; bottom: 50%; transform: translate(50%,50%); width: 100%; height: 100%;}
.pattern-pixel{background-color: rgba(87,152,152,0.29); background-size: 4px 4px; background-image: linear-gradient(var(--color-back) 0.4px, transparent 0.4px), linear-gradient(to right, var(--color-back) 0.4px, transparent 0.4px); opacity: 0.7;}*/



/* -------------------------------------------------- variables ---------- */

#html-body{--padding-horizontal: 0.027; --padding-vertical: calc(0.52vw + 0.52vh + 5.2px); --padding-link: 4px; --padding-button: calc(0.8vw + 0.8vh + 8px); --padding-form: calc(0.2vw + 0.2vh + 2px); --line-height: 2.5px; --size-browser: calc(20vw + 20vh + 400px); --overlay-factor: 3;} 



/* -------------------------------------------------- space ---------- */

[class*="space-"]{position: relative; display: block; width: 100%;} .section-layer-full{width: 100%; max-width: var(--layer-max);} .section-layer-default{width: calc(100% - var(--layer-diff) * 100% + 2 * var(--padding-horizontal) * 100%); max-width: calc((1 - var(--layer-diff)) * var(--layer-max));} .section-layer-thin{width: calc(100% - 2 * var(--layer-diff) * 100% + 2 * var(--padding-horizontal) * 100%); max-width: calc((1 - 2 * var(--layer-diff)) * var(--layer-max));} 

.space-high{height: calc(12 * var(--padding-vertical));} .space-default{height: calc(5 * var(--padding-vertical));} .space-middle{height: calc(2 * var(--padding-vertical));} .space-flat{height: var(--padding-vertical);} .space-mini{height: calc(var(--padding-vertical) / 4);} .padding-side{padding: 0 calc(var(--padding-horizontal) * 100vw);} .padding-flat{padding: calc(var(--padding-vertical) / 2) calc(var(--padding-horizontal) * 100vw);} .padding-default{padding: var(--padding-vertical) calc(var(--padding-horizontal) * 100vw);} .padding-wide{padding: calc(2 * var(--padding-vertical)) calc(2 * var(--padding-horizontal) * 100vw);} .padding-half{padding: calc(var(--padding-vertical) / 2) calc(var(--padding-horizontal) / 2 * 100vw);} 



/* -------------------------------------------------- global ---------- */

#body-header, #body-main, #body-footer{width: 100%;} #body-header{z-index: 7;} #body-main{z-index: 1;} #body-footer{z-index: 4;} hr{border: none; height: 0;} [class*="-section"]{position: relative; display: block; width: 100%; margin: 0 auto; text-align: center; /*overflow: hidden;*/} [class*="layer-"]{position: relative; display: block; margin: 0 auto;} [class*="grid-"], [class*="inline-"], [class*="squeeze-"]{position: relative; display: inline-block; vertical-align: top;} [class*="grid-"], [class*="inline-"]{text-align: left;} 

.grid-100, .inline-100{width: 100%;} .inline-75{width: 75%;} .inline-67{width: 66.67%;} .inline-62{width: 61.8%;} .inline-38{width: 38.2%;} .inline-50{width: 50%;} .inline-33{width: 33.33%;} .inline-55{width: 55.55%;} .inline-44{width: 44.44%;} .inline-25{width: 25%;} .inline-fix{width: calc(4 * var(--padding-horizontal) * 100% + 180px);} .inline-flex{width: calc((1 - 4 * var(--padding-horizontal)) * 100% - 180px);} .grid-0, .inline-0{display: none; visibility: hidden;} .text-left{text-align: left;} .text-center{text-align: center;} .text-right{text-align: right;} .vertical-bottom{vertical-align: bottom;} .vertical-middle{vertical-align: middle;} .overflow-hidden{overflow: hidden;} .overflow-clip{overflow: clip;} [class*="overlay-"], [class*="indent-"]{position: relative; display: block;} .overlay-left-wide{margin-left: calc(-3 * var(--overlay-factor) * 100%);} .overlay-horizontal-wide{margin: 0 calc(-3 * var(--overlay-factor) * 100%);} .overlay-right-wide{margin-right: calc(-3 * var(--overlay-factor) * 100%);} .overlay-right-small{margin-right: calc(-1.5 * var(--overlay-factor) * 100%);} .overlay-vertical{margin: calc(-1 * var(--overlay-factor) * 100%) 0;} .overlay-horizontal-wide{margin: 0 -25%; width: 150%;} 



/* -------------------------------------------------- frames ---------- */

[class*="frame-relative-"], [class*="frame-browser-"], [class*="frame-absolute-"], [class*="frame-fixed-"]{display: block; width: 100%;} [class*="frame-relative-"], [class*="frame-browser-"]{position: relative; display: block; height: auto;} [class*="frame-absolute-"], [class*="frame-fixed-"]{right: 50%; bottom: 50%; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%);} [class*="frame-absolute-"]{position: absolute;} [class*="frame-fixed-"]{position: fixed;} 

.frame-relative-1to1{padding-top: 100%;} .frame-relative-4to3{padding-top: 75%;} .frame-relative-3to4{padding-top: 133.33%;} .frame-relative-3to2{padding-top: 66.66%;} .frame-relative-2to3{padding-top: 150%;} .frame-relative-16to9{padding-top: 56.25%;} .frame-relative-2to1{padding-top: 50%;} .frame-relative-1to2{padding-top: 200%;} .frame-absolute-cover, .frame-fixed-cover{height: 100%;} .frame-absolute-auto, .frame-fixed-auto{height: auto;} .frame-absolute-top, .frame-fixed-top{bottom: 100%; -webkit-transform: translate(50%,100%); -ms-transform: translate(50%,100%); transform: translate(50%,100%);} .frame-absolute-bottom, .frame-fixed-bottom{bottom: 0%; -webkit-transform: translate(50%,0%); -ms-transform: translate(50%,0%); transform: translate(50%,0%);} .frame-absolute-left, .frame-fixed-left{right: 100%; -webkit-transform: translate(100%,50%); -ms-transform: translate(100%,50%); transform: translate(100%,50%);} .frame-absolute-right, .frame-fixed-right{right: 0%; -webkit-transform: translate(0%,50%); -ms-transform: translate(0%,50%); transform: translate(0%,50%);} 

.frame-relative-brand{padding-top: 21%;} .frame-relative-logo{padding-top: 40%;} .frame-relative-browser{padding-top: var(--size-browser);} 



/* -------------------------------------------------- images ---------- */

.image-relative, .image-cover, .image-contain, .image-icon{position: relative; display: block;} .image-relative{height: auto;} .image-cover, .image-contain{width: 100%; height: 100%;} .image-cover{-o-object-fit: cover;object-fit: cover; -o-object-position: center center; object-position: center center;} .image-contain{-o-object-fit: contain;object-fit: contain;} .image-icon{width: calc(1.5 * var(--padding-vertical)); height: calc(1.5 * var(--padding-vertical));} .image-absolute{position: absolute; display: block; right: 50%; bottom: 50%; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); width: 100%; height: auto;} 

.js-image-default, .js-image-switch.switch{opacity: 1} .js-image-default.switch, .js-image-switch{opacity: 0;} 



/* -------------------------------------------------- symbols ---------- */

[class*="symbol-"]{position: relative; display: inline-block; vertical-align: middle;} [class*="symbol-"] [class*="shape-"], [class*="symbol-"] [class*="text-"]{position: absolute; display: block; right: 50%; bottom: 50%; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); -webkit-transition-duration: .27s; -o-transition-duration: .27s; transition-duration: .27s;}

.symbol-navigation{display: inline-block; width: calc(20px + 0.5vw); height: 54px; margin-right: calc(6px + 0.15vw);} .symbol-navigation [class*="shape-"]{-webkit-transform: translate(50%,50%)rotate(0deg);-ms-transform: translate(50%,50%)rotate(0deg);transform: translate(50%,50%)rotate(0deg); width: calc(24px + 0.6vw); height: var(--line-height);} .symbol-navigation .shape-0{bottom: 30.5px;} .symbol-navigation .shape-1{bottom: 23.5px;} #body-header.toggle .symbol-navigation [class*="shape-"]{bottom: 27px;} #body-header.toggle .symbol-navigation .shape-0{-webkit-transform: translate(50%,50%)rotate(-45deg);-ms-transform: translate(50%,50%)rotate(-45deg);transform: translate(50%,50%)rotate(-45deg);} #body-header.toggle .symbol-navigation .shape-1{-webkit-transform: translate(50%,50%)rotate(45deg);-ms-transform: translate(50%,50%)rotate(45deg);transform: translate(50%,50%)rotate(45deg);}

.symbol-dot{position: relative; display: block;} .symbol-dot [class*="shape-"]{width: 20%; height: 20%; border-radius: 50%;} 

.symbol-button{position: absolute; display: block;} .symbol-button [class*="shape-"]{width: 100%; height: 100%;} .symbol-button .shape-1{bottom: 0; -webkit-transform: translate(50%,0); -ms-transform: translate(50%,0); transform: translate(50%,0); height: 9%; -webkit-transition: height .46s ease-out; -o-transition: height .46s ease-out; transition: height .46s ease-out;} [class*="link-"]:hover .symbol-button .shape-1{height: 91%;} 

.symbol-process{position: absolute; display: block; bottom: 0; right: 50%; -webkit-transform: translate(50%,0); -ms-transform: translate(50%,0); transform: translate(50%,0); width: 100%; height: var(--line-height);} .symbol-process .shape-0{right: auto; left: 0; -webkit-transform: translate(0,50%); -ms-transform: translate(0,50%); transform: translate(0,50%); width: 0; height: 100%; -webkit-transition-duration: .1s; -o-transition-duration: .1s; transition-duration: .1s;}

.symbol-information{display: inline-block; width: calc(2 * var(--padding-vertical)); height: calc(2 * var(--padding-vertical));} .symbol-information [class*="shape-"]{width: 12px; height: var(--line-height);} .symbol-information .shape-0{right: calc(50% + 4px); -webkit-transform: translate(50%,50%)rotate(37.5deg); -ms-transform: translate(50%,50%)rotate(37.5deg); transform: translate(50%,50%)rotate(37.5deg);} .symbol-information .shape-1{right: calc(50% - 4px); -webkit-transform: translate(50%,50%)rotate(-37.5deg); -ms-transform: translate(50%,50%)rotate(-37.5deg); transform: translate(50%,50%)rotate(-37.5deg);} .js-information-item.on .symbol-information .shape-0{-webkit-transform: translate(50%,50%)rotate(-37.5deg);-ms-transform: translate(50%,50%)rotate(-37.5deg);transform: translate(50%,50%)rotate(-37.5deg);} .js-information-item.on .symbol-information .shape-1{-webkit-transform: translate(50%,50%)rotate(37.5deg);-ms-transform: translate(50%,50%)rotate(37.5deg);transform: translate(50%,50%)rotate(37.5deg);} 

.symbol-scrolltop{position: relative; display: block; width: calc(23.6px + 0.59vw); height: calc(23.6px + 0.59vw);} .symbol-scrolltop [class*="shape-"]{width: 100%; height: 100%; border-radius: 50%;} .symbol-scrolltop .shape-1{width: 74%; height: 74%;} 



/* -------------------------------------------------- method ---------- */

.symbol-method{--method-size: calc((1px + 0.1vh + 0.1vw + 0.1%) * 80)/*calc(200px + 5.0vw)*/;} 
.symbol-method{position: absolute; display: block; right: 50%; bottom: 50%; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%); width: var(--method-size); height: var(--method-size);} .symbol-method [class*="shape-"]{border-radius: 50%; opacity: .2;} 

.symbol-method .mask-11{-webkit-transform: translate(50%,50%)rotate(120deg);-ms-transform: translate(50%,50%)rotate(120deg);transform: translate(50%,50%)rotate(120deg);} 
.symbol-method .mask-12{-webkit-transform: translate(50%,50%)rotate(240deg);-ms-transform: translate(50%,50%)rotate(240deg);transform: translate(50%,50%)rotate(240deg);} 

.symbol-method .shape-00{width: 100%; height: 100%;} 
.symbol-method [class*="shape-1"]{width: 75%; height: 75%;} 
.symbol-method .shape-20{width: 50%; height: 50%; background-color: transparent;} 

/*.symbol-method{outline: solid 2px blue;}*/

.symbol-method .shape-00{background-color: var(--color-front);} 
.symbol-method [class*="shape-1"]{background-color: transparent; background-image: conic-gradient(transparent 0deg, var(--color-front) 0deg, var(--color-front) 120deg, transparent 120deg, transparent 360deg);} 



.gradient-radial{-webkit-mask-image: radial-gradient(transparent 0%, transparent 35.5%, black 35.5%, black 100%); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; border-radius: 50%; overflow: hidden;} 

.gradient-conic{-webkit-mask-image: conic-gradient(black 0deg, black 240deg, transparent 240deg, transparent 360deg); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;} 

.symbol-method [class*="shape-1"]{-webkit-animation: animation-method-1 2s linear;animation: animation-method-1 2s linear;} 
@-webkit-keyframes animation-method-1{from{-webkit-transform: translate(50%,50%)rotate(240deg);transform: translate(50%,50%)rotate(240deg);}to{-webkit-transform: translate(50%,50%)rotate(360deg);transform: translate(50%,50%)rotate(360deg);}} 
@keyframes animation-method-1{from{-webkit-transform: translate(50%,50%)rotate(240deg);transform: translate(50%,50%)rotate(240deg);}to{-webkit-transform: translate(50%,50%)rotate(360deg);transform: translate(50%,50%)rotate(360deg);}} 



/* -------------------------------------------------- addon ---------- */

[class*="addon-"]{position: absolute; display: block; left: 90%; bottom: 90%; }


[class*="addon-"]{outline: solid 2px blue;} 
/* -------------------------------------------------- list, table, icon ---------- */

[class*="list-"], [class*="list-"] .list-item, [class*="icon-"]{position: relative; display: block;} [class*="list-"] .list-item{list-style: none; vertical-align: middle;} 

.list-link{display: block; margin: 0 calc(-4 * var(--padding-link));} .list-link .list-item{display: inline-block; margin: calc(var(--padding-link) / 2) calc(var(--padding-link) * 2);} .list-block .list-link .list-item{display: block;} [class*="gap-inline-"]{position: relative; display: inline-block; vertical-align: middle;} .gap-inline-thin{width: calc(8px + 0.2vw);} .gap-inline-default{width: calc(16px + 0.4vw);} .gap-inline-wide{width: calc(32px + 0.8vw);} 

.list-symbol .list-item{margin-top: calc(var(--padding-vertical) / 2); padding-left: calc(2 * var(--padding-vertical));} .list-symbol [class*="symbol-"], .list-symbol p{vertical-align: top;} .list-symbol [class*="symbol-"]{position: absolute; left: calc(var(--padding-vertical) / 3); -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); width: calc(2 * var(--padding-vertical)); height: calc(2 * var(--padding-vertical));} 

[class*="table-"]{width: 100%; border-spacing: 8px 0;} [class*="table-"] th, [class*="table-"] td{padding: calc(var(--padding-vertical) / 2) calc(var(--padding-horizontal) * 100%);} [class*="table-"] td{border-top-style: solid; border-top-width: 1.5px; vertical-align: middle;} [class*="table-"] thead{display: none;} [class*="table-"] .row-first td{border: none;} 

.icon-left{padding-left: calc(2 * var(--padding-vertical));} .icon-right{padding-right: calc(2 * var(--padding-vertical));} [class*="icon-"] .image-icon{position: absolute; top: 50%; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%);} .icon-left .image-icon{left: 0;} .icon-right .image-icon{right: 0;} 



/* -------------------------------------------------- links ---------- */

[class*="link-"]{position: relative; display: inline-block;} [class*="link-"] p{padding: calc(var(--padding-link) / 2) var(--padding-link); text-decoration: none;} .link-text{display: inherit !important; text-decoration: underline;} 

.hover-invers [class*="link-"] p{text-transform: uppercase;}

.link-default, .link-icon{padding: var(--padding-link) var(--padding-link);} .link-icon .image-contain{-webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);} .link-brand{width: calc(120px + 3vw); max-width: 100%; z-index: 11;} .link-brand .image-absolute{width: 100%;} 

.link-button{padding: var(--padding-button) calc(var(--padding-button) * 1.4); border-radius: 999px; overflow: hidden;} .header-navigation .link-button, .form-multistep .link-button{padding: calc(var(--padding-button) * 0.6) calc(var(--padding-button) * 0.8);} 

.link-block{display: block;} 



/* #######################################################################
##################################################### modules ############
####################################################################### */ 



/* -------------------------------------------------- fade in on scroll ---------- */

[class*="js-fadein-"]{overflow-y: visible;} [class*="js-fadein-fast-"]{-webkit-transition: opacity 590ms ease-in-out 59ms, -webkit-transform 870ms ease-in-out 87ms;transition: opacity 590ms ease-in-out 59ms, -webkit-transform 870ms ease-in-out 87ms;-o-transition: transform 870ms ease-in-out 87ms, opacity 590ms ease-in-out 59ms;transition: transform 870ms ease-in-out 87ms, opacity 590ms ease-in-out 59ms;transition: transform 870ms ease-in-out 87ms, opacity 590ms ease-in-out 59ms, -webkit-transform 870ms ease-in-out 87ms;} [class*="js-fadein-slow-"]{-webkit-transition: opacity 1440ms ease-in-out 144ms, -webkit-transform 1910ms ease-in-out 191ms;transition: opacity 1440ms ease-in-out 144ms, -webkit-transform 1910ms ease-in-out 191ms;-o-transition: transform 1910ms ease-in-out 191ms, opacity 1440ms ease-in-out 144ms;transition: transform 1910ms ease-in-out 191ms, opacity 1440ms ease-in-out 144ms;transition: transform 1910ms ease-in-out 191ms, opacity 1440ms ease-in-out 144ms, -webkit-transform 1910ms ease-in-out 191ms;}



/* -------------------------------------------------- recover on scroll ---------- */

[class*="js-recover-"]{width: 101%; height: 101%; pointer-events: none; overflow: hidden;} [class*="js-recover-"] .frame-absolute-cover{right: 50%; bottom: 50%; -webkit-transition-duration: 2440ms; -o-transition-duration: 2440ms; transition-duration: 2440ms; -webkit-transition-delay: 0/*144ms*/; -o-transition-delay: 0/*144ms*/; transition-delay: 0/*144ms*/; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out;} /*.js-recover-left.on .frame-absolute-cover{right: 150%;} .js-recover-right.on .frame-absolute-cover{right: -50%;} .js-recover-top.on .frame-absolute-cover{bottom: 150%;} .js-recover-bottom.on .frame-absolute-cover{bottom: -50%;} */ .js-recover-zoom{width: 121%; height: 121%; -webkit-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out;} .js-recover-zoom.on{width: 100%; height: 100%; -webkit-transition-duration: 8.7s; -o-transition-duration: 8.7s; transition-duration: 8.7s;}



/* -------------------------------------------------- informations ---------- */

.js-information-item{position: relative; display: block; padding: calc(var(--padding-vertical) / 2) 0;} .information-title{position: relative; display: inline-block; width: 100%; height: auto; padding-right: calc(3 * var(--padding-vertical));} .information-description{max-height: 0; overflow: hidden; opacity: 0;} .information-description p{display: block;} .symbol-information{position: absolute; right: 0; bottom: 50%; -webkit-transform: translate(0,50%); -ms-transform: translate(0,50%); transform: translate(0,50%);} 

.js-information-item, .information-description{-webkit-transition-duration: .71s;-o-transition-duration: .71s;transition-duration: .71s;} .js-information-item.on .information-description{max-height: 870px; opacity: 1;} 



/* -------------------------------------------------- roll horizontal ---------- */

.horizontal-roll{--roll-item-count: 8; --roll-item-width: 35%; --roll-item-maxwidth: 150px; --roll-item-duration: 4.1s;} 

.horizontal-roll, .horizontal-roll .roll-wrapper{position: relative; display: block;} .horizontal-roll{width: 100%; height: auto; padding: 0; overflow: hidden;} .horizontal-roll .roll-wrapper{-webkit-transform: translate(0px,0px);-ms-transform: translate(0px,0px);transform: translate(0px,0px);} .horizontal-roll .list-item{display: inline-block; height: auto; vertical-align: middle; text-align: left;} .horizontal-roll .horizontal-item{position: relative; display: block;} @-webkit-keyframes animation-roll-horizintal{0%{-webkit-transform: translate(0px,0px);transform: translate(0px,0px);} 100%{-webkit-transform: translate(-50%,0px);transform: translate(-50%,0px);}} 

.horizontal-roll .roll-wrapper{width: calc(var(--roll-item-count) * var(--roll-item-width) * 2); min-width: calc(var(--roll-item-count) * var(--roll-item-maxwidth) * 2); -webkit-animation: animation-roll-horizintal calc(var(--roll-item-count) * var(--roll-item-duration)) linear infinite; animation: animation-roll-horizintal calc(var(--roll-item-count) * var(--roll-item-duration)) linear infinite;} .horizontal-roll .list-item{width: calc(100% / (2 * var(--roll-item-count)));} .horizontal-roll .horizontal-item{padding: 0 20%;} 



/* -------------------------------------------------- roll vertical ---------- */

.vertical-roll{--roll-vertical-width: 35%; --roll-vertical-height: 100%; --roll-item-count: 8; --roll-item-duration: 1.1s;} 

.vertical-roll, .vertical-roll .list-item{position: relative; display: block;} .vertical-roll{width: 100%; height: auto; padding: 0; overflow: hidden;} .vertical-roll .roll-wrapper{position: absolute; display: block; top: 0%; -webkit-transform: translate(0px,0px); -ms-transform: translate(0px,0px); transform: translate(0px,0px); width: 100%;} /*.vertical-roll .roll-overflow{position: absolute; display: block; top: 100%; width: 100%; height: auto;}*/ .vertical-roll .list-item{width: 100%; height: auto; text-align: left;} .vertical-roll .vertical-item{position: relative; display: block;} @-webkit-keyframes animation-roll-vertical{0%{-webkit-transform: translate(0px,0%);transform: translate(0px,0%);} 100%{-webkit-transform: translate(0px,-50%);transform: translate(0px,-50%);}} 

.vertical-roll{width: var(--roll-vertical-width); margin: 0 calc((100% - var(--roll-vertical-width)) / 2); padding-top: calc(var(--roll-vertical-height) * var(--roll-vertical-width) / 100%);} .vertical-roll .roll-wrapper{-webkit-animation: animation-roll-vertical calc(var(--roll-item-count) * var(--roll-item-duration)) linear infinite;animation: animation-roll-vertical calc(var(--roll-item-count) * var(--roll-item-duration)) linear infinite;} .vertical-roll .vertical-item{padding: 0 20%;} 



/* -------------------------------------------------- slide ---------- */

.horizontal-slide{--slide-item-count: 6; --slide-item-width: 40%;} 

.horizontal-slide, .horizontal-slide .slide-wrapper{position: relative; display: block; margin: 0 auto; height: auto;} .horizontal-slide{width: 100%; overflow: hidden;} .horizontal-slide .slide-wrapper{-webkit-transition: -webkit-transform .29s;transition: -webkit-transform .29s;-o-transition: transform .29s;transition: transform .29s;transition: transform .29s, -webkit-transform .29s; padding: 0 2.5%;} .horizontal-slide .slide-wrapper .list-item{position: relative; display: inline-block; vertical-align: top;} .horizontal-slide .horizontal-item{position: relative; display: block;} 

.horizontal-slide .slide-wrapper{width: calc(var(--slide-item-count) * var(--slide-item-width));} .horizontal-slide .slide-wrapper .list-item{width: calc(100% / var(--slide-item-count));} .horizontal-slide .horizontal-item{padding: 0 6%;} 



/* -------------------------------------------------- fan ---------- */

.js-fan-item{opacity: 0; -webkit-transition-duration: .71s; -o-transition-duration: .71s; transition-duration: .71s;} .js-fan-item.toggle{opacity: 1;} 
.js-fan-item .image-cover{-webkit-transition-duration: 7.4s;-o-transition-duration: 7.4s;transition-duration: 7.4s; -webkit-transform: scale(1.17); -ms-transform: scale(1.17); transform: scale(1.17);} 
.js-fan-item.toggle .image-cover{-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);} 

.js-fan-text{opacity: 0; -webkit-transition-duration: .71s; -o-transition-duration: .71s; transition-duration: .71s; pointer-events: none;} .js-fan-text.toggle{opacity: 1; pointer-events: auto;} 



/* -------------------------------------------------- sticky ---------- */

.section-sticky{overflow: inherit;} .frame-sticky-auto{position: sticky; top: 0; height: auto;} .desktop-sticky-auto{height: auto;} .frame-relative-sticky{height: 100vh;} 

/*#main-intro .desktop-sticky-auto{top: calc(100vh - 0.4 * 0.5625 * 100vw);}*/ 

.js-intro-width{min-width: 55.55vw; max-width: 100vw;} 



/* -------------------------------------------------- marquee ---------- */

/*[class*="marquee-"]{--gap: 0px; position: relative; display: flex; width: 100%; height: auto; overflow: hidden; user-select: none;} [class*="marquee-"] p{flex-shrink: 0; display: flex; justify-content: space-around; min-width: 100%;} [class*="marquee-"], [class*="marquee-"] p{gap: var(--gap);} [class*="marquee-"] p span{position: relative; display: inline-block; width: 24px; vertical-align: middle; text-align: center;}

.marquee-left p{animation: animation-marguee-left 24s linear infinite;} .marquee-right p{animation: animation-marguee-right 24s linear infinite;} @keyframes animation-marguee-left{from{transform: translateX(calc(0% - var(--gap)));}to{transform: translateX(-100%);}} @keyframes animation-marguee-right{from{transform: translateX(calc(-100% - var(--gap)));}to{transform: translateX(0);}}*/



/* -------------------------------------------------- multistep form ---------- */

.slide-multistep{width: 100%; height: auto; padding: 0; vertical-align: middle; overflow: hidden;} .slide-multistep-.slide-multistep{width: 100%; height: auto; padding: 0; vertical-align: middle; overflow: hidden;} .slide-multistep-wrapper{-webkit-transform: translate(0px,0px);-ms-transform: translate(0px,0px);transform: translate(0px,0px);} .slide-multistep .multistep-tab{height: auto; vertical-align: top;}

#form-initial .slide-multistep-wrapper{width: 200%;} #form-initial .slide-multistep .multistep-tab{width: 50%;} 

[class*="multistep-"]{position: relative; display: inline-block;} [class*="multistep-"] input, [class*="multistep-"] textarea, [class*="multistep-"] select{padding: calc(var(--padding-button) * 0.8) calc(var(--padding-button) * 0.8);}  [class*="form-"] input, [class*="form-"] select, [class*="form-"] textarea, [class*="form-"] fieldset{vertical-align: top; border: none; border-radius: calc(var(--padding-button) + (17.2px + 0.43vw) / 2); -webkit-appearance: none; -moz-appearance: none; appearance: none;} [class*="form-"]{margin: 0 calc(-1 * var(--padding-form));} [class*="form-"] .slide-multistep{margin: var(--padding-form) 0;} [class*="form-"] [class*="grid-"], [class*="form-"] [class*="inline-"]{padding: var(--padding-form) var(--padding-form); vertical-align: middle;} [class*="multistep-"] label, [class*="multistep-"] input, [class*="multistep-"] select, [class*="multistep-"] textarea, [class*="form-"] fieldset{display: block; width: 100%;} 

[class*="multistep-"] .label-default{position: absolute; padding-left: calc(var(--padding-button) * 1.1); pointer-events: none;} [class*="multistep-"] label, .multistep-links .multistep-tab p{line-height: calc(var(--padding-form) + 8px); font-size: calc(var(--padding-form) / 2 + 8px); font-weight: 500; letter-spacing: calc(var(--padding-form) / 3 + 1px); opacity: .84; z-index: 7;} [class*="multistep-"] label a p{text-decoration: underline;} [class*="multistep-"] input, [class*="multistep-"] select, [class*="multistep-"] textarea{position: relative;} [class*="multistep-"] input, [class*="multistep-"] select, [class*="multistep-"] fieldset, [class*="multistep-"] textarea{margin-top: var(--padding-form);} [class*="multistep-"] textarea{resize: none;} [class*="multistep-"] input, [class*="multistep-"] select, [class*="multistep-"] textarea{-webkit-transition-duration: .14s;-o-transition-duration: .14s;transition-duration: .14s;} ::-webkit-input-placeholder{opacity: .4;} ::-moz-placeholder{opacity: .4;} :-ms-input-placeholder{opacity: .4;} ::-ms-input-placeholder{opacity: .4;} ::placeholder{opacity: .4;} [class*="multistep-"] .image-absolute{right: calc(var(--padding-vertical) * 1.7); width: var(--link-icon); height: auto; pointer-events: none;} .form-multistep .link-button{display: block; width: 100%; /*padding: var(--padding-button) calc(var(--padding-button) * 0.4);*/}

.list-indicator .list-item{position: relative; display: none;} .list-indicator .list-item.toggle{display: block;} .symbol-indicator{position: relative; display: block; width: 100%; height: 3px; margin: 0px 0; border-radius: 999px; overflow: hidden;} .symbol-indicator [class*="shape-"]{height: 3px;} .symbol-indicator .shape-0{width: 100%;} .symbol-indicator .shape-1{left: 0; right: auto; -webkit-transform: translate(0,50%); -ms-transform: translate(0,50%); transform: translate(0,50%); width: 0; -webkit-transition-duration: .57s; -o-transition-duration: .57s; transition-duration: .57s;}

#initial-optin{position: relative; display: block; padding-left: 34px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} #initial-optin input{position: absolute; width: 0; height: 0; opacity: 0; cursor: pointer;} .checkmark{position: absolute; left: 0; top: 0; width: 24px; height: 24px;} .checkmark:after{position: absolute; display: none; content: "";} #initial-optin input:checked ~ .checkmark:after{display: block;} #initial-optin .checkmark:after{left: 8px; top: 4px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); width: 5px; height: 10px; border-style: solid; border-width: 0 3px 3px 0;}

#initial-optin input:checked ~ .checkmark{} #initial-optin .checkmark:after{border-color: var(--color-front);} 

/*.slide-multistep-wrapper{margin-bottom: 40px; } */



/* -------------------------------------------------- more ---------- */

.main-section-legal p{padding: calc(var(--padding-vertical) / 7) 0;} .main-section-legal [class*="list-"] p{padding: 0 0;} .main-section-legal .link-default{padding: 0 calc(2 * var(--padding-link));} 

#backlink .image-relative{display: inline-block; margin-left: calc(1.6px + 0.04vw); width: calc(14.8px + 0.37vw);} #matomo-opt-out{padding: calc(0.9vw + 0.9vh + 9px) 1.25%;} #matomo-opt-out input{margin-right: calc(0.45vw + 0.45vh + 4.5px); margin-top: calc(0.45vw + 0.45vh + 4.5px);} #matomo-opt-out label{margin: calc(0.9vw + 0.9vh + 9px) 0;} 



/* -------------------------------------------------- pageload ---------- */

.frame-absolute-pageload{width: calc(10vw + 200px); height: calc(10vw + 200px);} 

.js-pageload-cover{-webkit-transition: bottom 0s 1.8s;-o-transition: bottom 0s 1.8s;transition: bottom 0s 1.8s; z-index: 11; pointer-events: none;} .js-pageload-cover .frame-absolute-cover{-webkit-transition: opacity 0.5s 0.9s ease-in;-o-transition: opacity 0.5s 0.9s ease-in;transition: opacity 0.5s 0.9s ease-in;} .js-pageload-cover .frame-absolute-pageload{-webkit-transition: bottom 1.4s 0.9s;-o-transition: bottom 1.4s 0.9s;transition: bottom 1.4s 0.9s;} 

/*.js-pageload-cover.load{bottom: 150%;} .js-pageload-cover.load .frame-absolute-cover{opacity: 0;} .js-pageload-cover.load .frame-absolute-pageload{bottom: 150%;}*/ 

.js-pageload-cover .border-full{border-style: solid; border-width: 50vh 50vw;} 
.js-pageload-cover .border-full{-webkit-transition: border 1.8s;-o-transition: border 1.8s;transition: border 1.8s;} 

.js-pageload-cover.load .border-full{border-width: 10vh 10vw;} 

.border-full{border-color: var(--color-deep);} 







/*.frame-fixed-top{transform: translate(50%,0%);} 


.js-pageload-item{transition-delay: 2s; transition-duration: 1.17s;}


.frame-fixed-top.load{transform: translate(50%,100%);} */



/* -------------------------------------------------- transition ---------- */

.js-approach-item{-webkit-transition: opacity .17s;-o-transition: opacity .17s;transition: opacity .17s;}
#html-body, [class*="link-"], [class*="symbol-"] [class*="shape-"], .header-navigation p, .js-image-default, .js-image-switch{-webkit-transition-duration: .27s;-o-transition-duration: .27s;transition-duration: .27s;}
#body-main, #body-footer, .frame-navigation, .js-onscroll-item{-webkit-transition-duration: .54s;-o-transition-duration: .54s;transition-duration: .54s;} .js-onscroll-hide{-webkit-transition-duration: .87s;-o-transition-duration: .87s;transition-duration: .87s;}

.transition-height div{transition: height .7s ease-in-out;} 



/* #######################################################################
##################################################### signature ##########
####################################################################### */ 



/* -------------------------------------------------- header ---------- */

#body-header{position: relative; z-index: 10;} .header-navigation .frame-absolute-right{height: 100%; /*width: calc(240px + 48vw); max-*/width: 100%;} .header-navigation .frame-absolute-auto .list-item{display: block;} .navigation-relative .inline-44 [class*="list-"] .list-item{vertical-align: bottom;} 

.js-onscroll-hide{-webkit-transform: translate(50%,100%);-ms-transform: translate(50%,100%);transform: translate(50%,100%);} .js-onscroll-hide.scroll{-webkit-transform: translate(50%,0%);-ms-transform: translate(50%,0%);transform: translate(50%,0%);}


#body-header .navigation-fixed{opacity: 0; pointer-events: none;} #body-header .back-blur{opacity: 0;} #body-header .frame-absolute-right{-webkit-transform: translate(100%,50%);-ms-transform: translate(100%,50%);transform: translate(100%,50%);} #body-header .frame-absolute-right .frame-absolute-auto{-webkit-transform: translate(44%,50%);-ms-transform: translate(44%,50%);transform: translate(44%,50%);} #body-header .frame-absolute-right .section-layer-full{opacity: 0;} .header-navigation .hl{padding: calc(var(--padding-link) * 0.8);} .header-navigation .list-link{margin: 0 calc(-2 * var(--padding-link));}

#body-header.toggle .navigation-fixed{opacity: 1; pointer-events: auto;} #body-header.toggle .back-blur{opacity: 1;} #body-header.toggle .frame-absolute-right{-webkit-transform: translate(0%,50%);-ms-transform: translate(0%,50%);transform: translate(0%,50%);} #body-header.toggle .frame-absolute-right .frame-absolute-auto{-webkit-transform: translate(50%,50%);-ms-transform: translate(50%,50%);transform: translate(50%,50%);} #body-header.toggle .frame-absolute-right .section-layer-full{opacity: 1;} 

#body-header.toggle .navigation-fixed{-webkit-transition: opacity 0s 0s;-o-transition: opacity 0s 0s;transition: opacity 0s 0s;} #body-header.toggle .back-blur{-webkit-transition: opacity .87s 0s;-o-transition: opacity .87s 0s;transition: opacity .87s 0s;} #body-header.toggle .frame-absolute-right{-webkit-transition: -webkit-transform .87s 0s;transition: -webkit-transform .87s 0s;-o-transition: transform .87s 0s;transition: transform .87s 0s;transition: transform .87s 0s, -webkit-transform .87s 0s;} #body-header.toggle .frame-absolute-right .frame-absolute-auto{-webkit-transition: -webkit-transform .71s .71s;transition: -webkit-transform .71s .71s;-o-transition: transform .71s .71s;transition: transform .71s .71s;transition: transform .71s .71s, -webkit-transform .71s .71s;} #body-header.toggle .frame-absolute-right .section-layer-full{-webkit-transition: opacity .71s .71s;-o-transition: opacity .71s .71s;transition: opacity .71s .71s;} 

#body-header .navigation-fixed{-webkit-transition: opacity 0s 1.86s;-o-transition: opacity 0s 1.86s;transition: opacity 0s 1.86s;} #body-header .back-blur{-webkit-transition: opacity .87s .55s;-o-transition: opacity .87s .55s;transition: opacity .87s .55s;} #body-header .frame-absolute-right{-webkit-transition: -webkit-transform .87s .55s;transition: -webkit-transform .87s .55s;-o-transition: transform .87s .55s;transition: transform .87s .55s;transition: transform .87s .55s, -webkit-transform .87s .55s;} #body-header .frame-absolute-right .frame-absolute-auto{-webkit-transition: -webkit-transform .71s 0s;transition: -webkit-transform .71s 0s;-o-transition: transform .71s 0s;transition: transform .71s 0s;transition: transform .71s 0s, -webkit-transform .71s 0s;} #body-header .frame-absolute-right .section-layer-full{-webkit-transition: opacity .71s 0s;-o-transition: opacity .71s 0s;transition: opacity .71s 0s;} 



/* -------------------------------------------------- main ---------- */

.zindex-front{z-index: 1;} 
.js-parallax-item{height: 104%;} 
.js-onscroll-item.scroll{height: 0;} 

.width-icon{width: calc((1px + 0.1vh + 0.1vw + 0.1%) * 14);} 



/* -------------------------------------------------- footer ---------- */

.footer-section .frame-absolute-right{bottom: 100%; -webkit-transform: translate(0,100%); -ms-transform: translate(0,100%); transform: translate(0,100%); width: auto;} 



/* -------------------------------------------------- temp ---------- */

/*.js-intro-width, .desktop-sticky-auto, .grid-50, .grid-50 p{outline: solid 4px blue;}*/ 
/*section, div{border: solid 2px blue;}*/
/*[class*="signature-"]{outline: solid 4px blue;}*/ 







/* -------------------------------------------------- media query ---------- */

@media(max-width: 1039px){
    #html-body{--layer-max: calc(500px + 25vw)/*810px*/; --layer-diff: 0.15; --font-size: 11; --font-rise: 1.19;} 
    
    [class*="grid-"]{width: 100%;} .grid-25{width: 50%;}  [class*="desktop-absolute-"]{position: relative; display: block; right: auto; bottom: auto; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0);} .desktop-sticky-auto{position: relative; top: auto;} .only-mobile, .image-mobile{display: block !important;} .only-desktop, .image-desktop{display: none !important;} .js-intro-width{max-width: 100%;} .nopadding-left, .nopadding-right{padding-left: 0; padding-right: 0;} 
    
    .indent-left-15{padding-left: 5%;} .indent-right-15{padding-right: 5%;} .indent-horizontal-25{padding: 0 5%;} .indent-left-25, .indent-left-33, .indent-left-38{padding-left: 10%;} .indent-right-25, .indent-right-33, .indent-right-38{padding-right: 10%;} .indent-left-50, .indent-left-62{padding-left: 15%;} .indent-right-50, .indent-right-62{padding-right: 15%;} .squeeze-left-62, .squeeze-right-62{width: 90%;} .squeeze-right-62{margin-right: 10%;} .squeeze-left-62{margin-left: 10%;} .squeeze-left-38, .squeeze-right-38{width: 85%;} .squeeze-right-38{margin-right: 15%;} .squeeze-left-38{margin-left: 15%;} 
	
	.frame-browser-square{padding-top: calc(15 * (1vw + 1vh + 10px));} .frame-browser-horizontal{padding-top: calc(12 * (1vw + 1vh + 10px));} .frame-browser-vertical{padding-top: calc(18 * (1vw + 1vh + 10px));} 
    
    .list-symbol [class*="symbol-"]{top: 50%;} 
	
	.frame-relative-100vh{padding-top: calc(9 * (1vw + 1vh + 10px));} .js-intro-frame{height: auto;} .js-intro-width{width: 100%; float: none;} [class*="signature-"]{width: 90%;} .signature-00{margin: 0 10% 0 0;} .signature-01{margin: 0 5% 0 5%;} .signature-02{margin: 0 0 0 10%;} 
    }
@media(min-width: 1040px){
    #html-body{--layer-max: 2400px; --layer-diff: 0.2; --font-size: 11; --font-rise: 1.20;} 
    
    .grid-75{width: 75%;} .grid-67{width: 66.67%;} .grid-69{width: 69.1%;} .grid-31{width: 30.9%;} .grid-62{width: 61.8%;} .grid-55{width: 55.55%;} .grid-50{width: 50%;} .grid-44{width: 44.44%;} .grid-38{width: 38.2%;} .grid-33{width: 33.33%;} .grid-72-5{width: 72.5%;} .grid-27-5{width: 27.5%;} .grid-25{width: 25%;} .gird-fix{width: calc(4 * var(--padding-horizontal) * 100% + 180px);} .grid-flex{width: calc((1 - 4 * var(--padding-horizontal)) * 100% - 180px);} [class*="desktop-absolute-"]{position: absolute; display: block; bottom: 50%; -webkit-transform: translate(0,50%); -ms-transform: translate(0,50%); transform: translate(0,50%);} .desktop-absolute-left{left: 0;} .desktop-absolute-middle{right: 50%; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%);} .desktop-absolute-right{right: 0;} .desktop-sticky-auto{position: sticky; top: 0;} .only-mobile, .image-mobile{display: none !important;} .only-desktop{display: inline-block !important;} .image-desktop{display: block !important;} .js-intro-width{max-width: 100vw;} .nopadding-left{padding-left: 0;} .nopadding-right{padding-right: 0;} 
    
    .indent-left-15{padding-left: 15%;} .indent-right-15{padding-right: 15%;} .indent-left-25{padding-left: 25%;} .indent-right-25{padding-right: 25%;} .indent-horizontal-25{padding: 0 12.5%;} .indent-left-33{padding-left: 33.33%;} .indent-right-33{padding-right: 33.33%;} .indent-left-38{padding-left: 38.2%;} .indent-right-38{padding-right: 38.2%;} .indent-left-50{padding-left: 50%;} .indent-right-50{padding-right: 50%;} .indent-left-62{padding-left: 61.8%;} .indent-right-62{padding-right: 61.8%;} .squeeze-left-62, .squeeze-right-62{width: 61.8%;} .squeeze-left-38, .squeeze-right-38{width: 38.2%;} [class*="squeeze-left-"]{margin-left: auto;} [class*="squeeze-right-"]{margin-right: auto;} .mobile-overlay-top{margin-top: 0;} 
    
	.frame-browser-square{padding-top: 100%;} .frame-browser-horizontal{padding-top: 66.67%;} .frame-browser-vertical{padding-top: 150%;} 
	
    .list-symbol [class*="symbol-"]{top: 50%;} 
	
	.frame-relative-100vh{padding-top: 100vh;} .js-intro-frame{height: calc(30vh + 60vw);} .js-intro-width{width: auto; float: right;} .signature-01{margin: calc(var(--padding-vertical) * 2.5) 0 0 0;} .signature-02{margin: calc(var(--padding-vertical) * 5) 0 0 0;} 
    }




/*@media(max-width: 1039px){
    #html-body{--layer-max: 810px; --layer-diff: 0.15;}
    
    [class*="grid-"]{width: 100%;} .grid-25{width: 50%;}  [class*="desktop-absolute-"]{position: relative; display: block; right: auto; bottom: auto; transform: translate(0,0);} .desktop-sticky-auto{position: relative; top: auto;} .only-mobile{display: block !important;} .only-desktop{display: none !important;} .js-intro-width{max-width: 100%;} 
    
    .indent-left-15{padding-left: 5%;} .indent-right-15{padding-right: 5%;} .indent-horizontal-25{padding: 0 5%;} .indent-left-25, .indent-left-33, .indent-left-38{padding-left: 10%;} .indent-right-25, .indent-right-33, .indent-right-38{padding-right: 10%;} .indent-left-50, .indent-left-62{padding-left: 15%;} .indent-right-50, .indent-right-62{padding-right: 15%;} .squeeze-left-62, .squeeze-right-62{width: 90%;} .squeeze-right-62{margin-right: 10%;} .squeeze-left-62{margin-left: 10%;} .squeeze-left-38, .squeeze-right-38{width: 85%;} .squeeze-right-38{margin-right: 15%;} .squeeze-left-38{margin-left: 15%;} 
    
    [class*="link-"] p, .written-link{line-height: calc(14.4px + 0.36vw); font-size: calc(10.4px + 0.26vw); letter-spacing: calc(0.4px + 0.01vw);} 
	p, .link-text{line-height: calc(18px + 0.45vw); font-size: calc(12px + 0.3vw);} 
    h4, .h4, [class*="link-"] .h4{line-height: calc(15px + 0.5vw); font-size: calc(11.4px + 0.38vw);} 
    h3, .h3, [class*="link-"] .h3{line-height: calc(22px + 1.1vw); font-size: calc(16px + 0.8vw);} 
    h2, .h2, [class*="link-"] .h2{line-height: calc(25px + 2.5vw); font-size: calc(24px + 2.4vw);} 
    h1, .h1{line-height: calc(27px + 5.4vw); font-size: calc(27px + 5.4vw);} 
	.h0{line-height: calc(26px + 5.2vw); font-size: calc(24px + 4.8vw);} 
    
    .list-symbol [class*="symbol-"]{top: 50%;} 
	
	[class*="signature-"]{width: 90%;} .signature-00{margin: 0 10% 0 0;} .signature-01{margin: 0 5% 0 5%;} .signature-02{margin: 0 0 0 10%;} 
    }
@media(min-width: 1040px){
    #html-body{--layer-max: 2400px; --layer-diff: 0.2;}
    
    .grid-75{width: 75%;} .grid-67{width: 66.67%;} .grid-69{width: 69.1%;} .grid-31{width: 30.9%;} .grid-62{width: 61.8%;} .grid-55{width: 55.55%;} .grid-50{width: 50%;} .grid-44{width: 44.44%;} .grid-38{width: 38.2%;} .grid-33{width: 33.33%;} .grid-72-5{width: 72.5%;} .grid-27-5{width: 27.5%;} .grid-25{width: 25%;} .gird-fix{width: calc(4 * var(--padding-horizontal) * 100% + 180px);} .grid-flex{width: calc((1 - 4 * var(--padding-horizontal)) * 100% - 180px);} [class*="desktop-absolute-"]{position: absolute; display: block; bottom: 50%; transform: translate(0,50%);} .desktop-absolute-left{left: 0;} .desktop-absolute-middle{right: 50%; transform: translate(50%,50%);} .desktop-absolute-right{right: 0;} .desktop-sticky-auto{position: sticky; top: 0;} .only-mobile{display: none !important;} .only-desktop{display: inline-block !important;} .js-intro-width{max-width: 100vw;} 
    
    .indent-left-15{padding-left: 15%;} .indent-right-15{padding-right: 15%;} .indent-left-25{padding-left: 25%;} .indent-right-25{padding-right: 25%;} .indent-horizontal-25{padding: 0 12.5%;} .indent-left-33{padding-left: 33.33%;} .indent-right-33{padding-right: 33.33%;} .indent-left-38{padding-left: 38.2%;} .indent-right-38{padding-right: 38.2%;} .indent-left-50{padding-left: 50%;} .indent-right-50{padding-right: 50%;} .indent-left-62{padding-left: 61.8%;} .indent-right-62{padding-right: 61.8%;} .squeeze-left-62, .squeeze-right-62{width: 61.8%;} .squeeze-left-38, .squeeze-right-38{width: 38.2%;} [class*="squeeze-left-"]{margin-left: auto;} [class*="squeeze-right-"]{margin-right: auto;} .mobile-overlay-top{margin-top: 0;} 
    
	[class*="link-"] p, .written-link{line-height: calc(14.4px + 0.36vw); font-size: calc(10.4px + 0.26vw); letter-spacing: calc(0.4px + 0.01vw);} 
	p, .link-text{line-height: calc(18px + 0.45vw); font-size: calc(12px + 0.3vw);} 
    h4, .h4, [class*="link-"] .h4{line-height: calc(15px + 0.5vw); font-size: calc(11.4px + 0.38vw);} 
    h3, .h3, [class*="link-"] .h3{line-height: calc(22px + 1.1vw); font-size: calc(16px + 0.8vw);} 
    h2, .h2, [class*="link-"] .h2{line-height: calc(25px + 2.5vw); font-size: calc(24px + 2.4vw);} 
    h1, .h1{line-height: calc(26px + 5.2vw); font-size: calc(24px + 4.8vw);} 
	.h0{line-height: calc(29px + 5.8vw); font-size: calc(29px + 5.8vw);} 
    
    .list-symbol [class*="symbol-"]{top: 50%;} 
	
	.signature-01{margin: calc(var(--padding-vertical) * 2.5) 0 0 0;} .signature-02{margin: calc(var(--padding-vertical) * 5) 0 0 0;} 
    }*/



/* #######################################################################
##################################################### more media #########
####################################################################### */ 



/* -------------------------------------------------- touch ---------- */

@media(pointer: coarse){
    .js-cursor-outer, .js-cursor-inner{display: none;}
}



/* -------------------------------------------------- print ---------- */

@media screen {
    .js-enable [class*="js-fadein-"]{opacity: 1;} .js-enable .js-fadein-slow-left, .js-enable .js-fadein-fast-left{-webkit-transform: translate(58px,0);-ms-transform: translate(58px,0);transform: translate(58px,0);} .js-enable .js-fadein-slow-right, .js-enable .js-fadein-fast-right{-webkit-transform: translate(-58px,0);-ms-transform: translate(-58px,0);transform: translate(-58px,0);} .js-enable .js-fadein-slow-up, .js-enable .js-fadein-fast-up{-webkit-transform: translate(0,29px);-ms-transform: translate(0,29px);transform: translate(0,29px);} /*.js-enable .js-fadein-down{transform: translate(0,-41px);}*/ .js-enable [class*="js-fadein-"].on{opacity: 1; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0);} 
    }
@media print {
    .js-enable [class*="js-fadein-"]{opacity: 1;} .js-enable .js-fadein-slow-left, .js-enable .js-fadein-fast-left{-webkit-transform: translate(0,0);-ms-transform: translate(0,0);transform: translate(0,0);} .js-enable .js-fadein-slow-right, .js-enable .js-fadein-fast-right{-webkit-transform: translate(0,0);-ms-transform: translate(0,0);transform: translate(0,0);} .js-enable .js-fadein-slow-up, .js-enable .js-fadein-fast-up{-webkit-transform: translate(0,0);-ms-transform: translate(0,0);transform: translate(0,0);} /*.js-enable .js-fadein-down{transform: translate(0,0);}*/ .js-enable [class*="js-fadein-"].on{opacity: 1; -webkit-transform: translate(0,0); -ms-transform: translate(0,0); transform: translate(0,0);} 
    }