/* * Prefixed by https://autoprefixer.github.io * PostCSS: v8.5.15, * Autoprefixer: v10.5.0 * Browsers: last 4 version */ @font-face { font-family: "BebasNeue"; src: url("../fonts/BebasNeue-Regular.woff2") format("woff2"), url("../fonts/BebasNeue-Regular.woff") format("woff"), url("../fonts/BebasNeue-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; font-style: normal; } @font-face { font-family: "Helvetica Neue"; src: url("../fonts/HelveticaNeueBoldCondensed.eot"); src: local("Helvetica Neue Condensed Bold"), local("HelveticaNeueBoldCondensed"), url("../fonts/HelveticaNeueBoldCondensed.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueBoldCondensed.woff2") format("woff2"), url("../fonts/HelveticaNeueBoldCondensed.woff") format("woff"), url("../fonts/HelveticaNeueBoldCondensed.ttf") format("truetype"); font-weight: bold; font-style: normal; } @font-face { font-family: "Helvetica Neue"; src: url("../fonts/HelveticaNeueBlackCondensed.eot"); src: local("Helvetica Neue Condensed Black"), local("HelveticaNeueBlackCondensed"), url("../fonts/HelveticaNeueBlackCondensed.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueBlackCondensed.woff2") format("woff2"), url("../fonts/HelveticaNeueBlackCondensed.woff") format("woff"), url("../fonts/HelveticaNeueBlackCondensed.ttf") format("truetype"); font-weight: 900; font-style: normal; } @font-face { font-family: "HelveticaNeueCyr"; src: url("../fonts/HelveticaNeueCyr-Bold.eot"); src: local("HelveticaNeueCyr-Bold"), url("../fonts/HelveticaNeueCyr-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueCyr-Bold.woff2") format("woff2"), url("../fonts/HelveticaNeueCyr-Bold.woff") format("woff"), url("../fonts/HelveticaNeueCyr-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; } @font-face { font-family: "HelveticaNeueCyr"; src: url("../fonts/HelveticaNeueCyr-Light.eot"); src: local("HelveticaNeueCyr-Light"), url("../fonts/HelveticaNeueCyr-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueCyr-Light.woff2") format("woff2"), url("../fonts/HelveticaNeueCyr-Light.woff") format("woff"), url("../fonts/HelveticaNeueCyr-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "HelveticaNeueCyr"; src: url("../fonts/HelveticaNeueCyr-Medium.eot"); src: local("HelveticaNeueCyr-Medium"), url("../fonts/HelveticaNeueCyr-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueCyr-Medium.woff2") format("woff2"), url("../fonts/HelveticaNeueCyr-Medium.woff") format("woff"), url("../fonts/HelveticaNeueCyr-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: "HelveticaNeueCyr"; src: url("../fonts/HelveticaNeueCyr-MediumItalic.eot"); src: local("HelveticaNeueCyr-MediumItalic"), url("../fonts/HelveticaNeueCyr-MediumItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueCyr-MediumItalic.woff2") format("woff2"), url("../fonts/HelveticaNeueCyr-MediumItalic.woff") format("woff"), url("../fonts/HelveticaNeueCyr-MediumItalic.ttf") format("truetype"); font-weight: 500; font-style: italic; } @font-face { font-family: "HelveticaNeueCyr"; src: url("../fonts/HelveticaNeueCyr-LightItalic.eot"); src: local("HelveticaNeueCyr-LightItalic"), url("../fonts/HelveticaNeueCyr-LightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueCyr-LightItalic.woff2") format("woff2"), url("../fonts/HelveticaNeueCyr-LightItalic.woff") format("woff"), url("../fonts/HelveticaNeueCyr-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; } @font-face { font-family: "HelveticaNeueCyr"; src: url("../fonts/HelveticaNeueCyr-HeavyItalic.eot"); src: local("HelveticaNeueCyr-HeavyItalic"), url("../fonts/HelveticaNeueCyr-HeavyItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueCyr-HeavyItalic.woff2") format("woff2"), url("../fonts/HelveticaNeueCyr-HeavyItalic.woff") format("woff"), url("../fonts/HelveticaNeueCyr-HeavyItalic.ttf") format("truetype"); font-weight: 900; font-style: italic; } @font-face { font-family: "HelveticaNeueCyr"; src: url("../fonts/HelveticaNeueCyr-Black.eot"); src: local("HelveticaNeueCyr-Black"), url("../fonts/HelveticaNeueCyr-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueCyr-Black.woff2") format("woff2"), url("../fonts/HelveticaNeueCyr-Black.woff") format("woff"), url("../fonts/HelveticaNeueCyr-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; } * { padding: 0; margin: 0; border: 0; } *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } :focus, :active { outline: none; } a:focus, a:active { outline: none; } nav, footer, header, aside { display: block; } html, body { height: 100%; width: 100%; font-size: 100%; line-height: 1; font-size: 14rem; -ms-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } input, button, textarea { font-family: inherit; } input::-ms-clear { display: none; } button { cursor: pointer; } button::-moz-focus-inner { padding: 0; border: 0; } a, a:visited { text-decoration: none; } a:hover { text-decoration: none; } ul li { list-style: none; } img { vertical-align: top; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: 400; } button { background: unset; } html { font-size: 1px; } html, body { height: 100%; background: #000; font-family: "Helvetica Neue"; } [data-aos="fade-right-far"] { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; } [data-aos="fade-down-far"].aos-animate { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } [data-aos="fade-up-far"] { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; } [data-aos="fade-up-far"].aos-animate { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } [data-aos="width-expand"] { -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } [data-aos="width-expand"].aos-animate { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } [data-aos="height-expand"] { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } [data-aos="height-expand"].aos-animate { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } [data-aos="brush-draw"] .advantages-bg svg path { stroke-dashoffset: 10000; stroke-dasharray: 10000; -webkit-transition-property: stroke-dashoffset; transition-property: stroke-dashoffset; } [data-aos="brush-draw"].aos-animate .advantages-bg svg path { stroke-dashoffset: 0; } .section { min-height: 100svh; } .big-wrapper { overflow: hidden; overflow: clip; position: relative; } .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100%; } .main { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; } .footer { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .container { max-width: 1710rem; margin: 0 auto; padding: 0 15rem; width: 100%; } .big-container { max-width: 1420rem; margin: 0 auto; padding: 0 15rem; } .btn { opacity: 1; outline: 0; position: relative; text-align: center; letter-spacing: 1rem; display: inline-block; text-decoration: none; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 20rem, calc(20rem + 6 * ((100vw - 375rem) / (1200 - 375))), 26rem ); font-weight: 500; text-transform: uppercase; cursor: pointer; border: none; } .btn--blue::before { color: #fff; background: #2c58a4; } .btn--blue::after { color: #000; background: #fff; } .btn--white::before { color: #000; background: #fff; } .btn--white::after { color: #fff; background: #000; } .btn:hover::after { opacity: 1; -webkit-transform: translateY(0) rotateX(0); transform: translateY(0) rotateX(0); } .btn:hover::before { opacity: 0; -webkit-transform: translateY(50%) rotateX(90deg); transform: translateY(50%) rotateX(90deg); } .btn::after { top: 0; left: 0; opacity: 0; width: 100%; display: block; -webkit-transition: 0.5s; transition: 0.5s; position: absolute; content: attr(data-back); padding: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ) clamp(40rem, calc(40rem + 20 * ((100vw - 375rem) / (1200 - 375))), 60rem); -webkit-transform: translateY(-50%) rotateX(90deg); transform: translateY(-50%) rotateX(90deg); } .btn::before { top: 0; left: 0; opacity: 1; display: block; -webkit-transition: 0.5s; transition: 0.5s; position: relative; content: attr(data-front); padding: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ) clamp(40rem, calc(40rem + 20 * ((100vw - 375rem) / (1200 - 375))), 60rem); -webkit-transform: translateY(0) rotateX(0); transform: translateY(0) rotateX(0); } @-webkit-keyframes glow-pulse { 0%, 100% { opacity: 0.8; -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 0.4; -webkit-transform: scale(1.1); transform: scale(1.1); } } @keyframes glow-pulse { 0%, 100% { opacity: 0.8; -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 0.4; -webkit-transform: scale(1.1); transform: scale(1.1); } } .title { color: #fbfbfb; font-family: "BebasNeue"; font-size: clamp( 60rem, calc(60rem + 70 * ((100vw - 375rem) / (1200 - 375))), 130rem ); line-height: clamp( 50rem, calc(50rem + 60 * ((100vw - 375rem) / (1200 - 375))), 110rem ); letter-spacing: clamp( 1.6rem, calc(1.6rem + 4.9 * ((100vw - 375rem) / (1200 - 375))), 6.5rem ); } .title--big { font-size: clamp( 70rem, calc(70rem + 79 * ((100vw - 375rem) / (1200 - 375))), 149rem ); line-height: clamp( 60rem, calc(60rem + 70 * ((100vw - 375rem) / (1200 - 375))), 130rem ); letter-spacing: clamp( 2rem, calc(2rem + 5.5 * ((100vw - 375rem) / (1200 - 375))), 7.5rem ); } .title__text--bordered { color: rgba(0, 0, 0, 0); display: inline-block; -webkit-text-stroke: clamp( 2rem, calc(2rem + 2 * ((100vw - 375rem) / (1200 - 375))), 4rem ) #fff; } .title__text--bordered svg { -webkit-transform: translateY( clamp( -15rem, calc(-7.5rem - 7.5 * ((100vw - 375rem) / (1200 - 375))), -7.5rem ) ); -ms-transform: translateY( clamp( -15rem, calc(-7.5rem - 7.5 * ((100vw - 375rem) / (1200 - 375))), -7.5rem ) ); transform: translateY( clamp( -15rem, calc(-7.5rem - 7.5 * ((100vw - 375rem) / (1200 - 375))), -7.5rem ) ); } .title__text--bordered svg text { color: #fbfbfb; font-family: "BebasNeue"; font-size: clamp( 60rem, calc(60rem + 70 * ((100vw - 375rem) / (1200 - 375))), 130rem ); line-height: clamp( 50rem, calc(50rem + 60 * ((100vw - 375rem) / (1200 - 375))), 110rem ); } .title__text--colored { color: #2c58a4; } .title__text--backgrounded { background: #2c58a4; padding: clamp( 15rem, calc(15rem + 10 * ((100vw - 375rem) / (1200 - 375))), 25rem ) clamp(15rem, calc(15rem + 15 * ((100vw - 375rem) / (1200 - 375))), 30rem) clamp(10rem, calc(10rem + 5 * ((100vw - 375rem) / (1200 - 375))), 15rem) clamp(15rem, calc(15rem + 15 * ((100vw - 375rem) / (1200 - 375))), 30rem); display: inline-block; margin-bottom: clamp( 15rem, calc(15rem + 15 * ((100vw - 375rem) / (1200 - 375))), 30rem ); } .title__text--backgrounded:last-child { margin-bottom: unset; } .lines { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } .lines__line { z-index: -1; position: absolute; width: clamp(1rem, calc(1rem + 2 * ((100vw - 375rem) / (1200 - 375))), 3rem); background: #202020; } .scroll-mouse { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #a3a3a3; gap: 12rem; font-size: 20rem; line-height: 32rem; } .scroll-mouse span { -webkit-transition: color 0.5s; transition: color 0.5s; } .scroll-mouse:hover span { color: #fff; } .scroll-mouse:hover svg path { stroke: #fff; } .scroll-mouse svg { width: 35rem; min-width: 35rem; height: 35rem; } .scroll-mouse svg path { -webkit-transition: stroke 0.5s; transition: stroke 0.5s; } .language-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12rem; margin-left: auto; } .language-toggle--vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-left: unset; } .language-toggle--vertical .language-toggle__label { -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; writing-mode: sideways-lr; text-transform: uppercase; } .language-toggle--vertical .language-toggle__switch { background: #fff; width: 33rem; height: 65rem; } .language-toggle--vertical .language-toggle__slider { top: auto; left: 3rem; bottom: 6rem; } .language-toggle--vertical .language-toggle__input:checked ~ .language-toggle__slider { -webkit-transform: translateY(-26rem); -ms-transform: translateY(-26rem); transform: translateY(-26rem); } .language-toggle--vertical .language-toggle__slider--animating { -webkit-animation: droplet-move-vertical 0.5s; animation: droplet-move-vertical 0.5s; } .language-toggle--vertical .language-toggle__slider--animating-reverse { -webkit-animation: droplet-move-vertical-reverse 0.5s; animation: droplet-move-vertical-reverse 0.5s; } .language-toggle__label { font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 20rem, calc(20rem + 6 * ((100vw - 375rem) / (1200 - 375))), 26rem ); font-weight: 500; color: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; text-decoration: none; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .language-toggle__label--inactive { opacity: 0.5; } .language-toggle__switch { position: relative; width: 65rem; height: 33rem; background: #202020; border-radius: 16.5rem; cursor: pointer; -webkit-transition: background 0.5s; transition: background 0.5s; } .language-toggle__switch:hover { background: #353535; } .language-toggle__slider { position: absolute; top: 3rem; left: 6rem; width: 27rem; height: 27rem; background: #2c58a4; border-radius: 50%; -webkit-transition: all 0.5s; transition: all 0.5s; } .language-toggle__input { display: none; } .language-toggle__slider--animating { -webkit-animation: droplet-move 0.5s; animation: droplet-move 0.5s; } .language-toggle__slider--animating-reverse { -webkit-animation: droplet-move-reverse 0.5s; animation: droplet-move-reverse 0.5s; } .language-toggle__input:checked ~ .language-toggle__slider { -webkit-transform: translateX(26rem); -ms-transform: translateX(26rem); transform: translateX(26rem); } @-webkit-keyframes droplet-move { 0% { width: 27rem; border-radius: 50%; -webkit-transform: translateX(0); transform: translateX(0); } 25% { width: 32rem; border-radius: 16rem 50% 50% 16rem; -webkit-transform: translateX(0); transform: translateX(0); } 50% { width: 34rem; border-radius: 17rem; -webkit-transform: translateX(8rem); transform: translateX(8rem); } 75% { width: 32rem; border-radius: 50% 16rem 16rem 50%; -webkit-transform: translateX(20rem); transform: translateX(20rem); } 100% { width: 27rem; border-radius: 50%; -webkit-transform: translateX(26rem); transform: translateX(26rem); } } @keyframes droplet-move { 0% { width: 27rem; border-radius: 50%; -webkit-transform: translateX(0); transform: translateX(0); } 25% { width: 32rem; border-radius: 16rem 50% 50% 16rem; -webkit-transform: translateX(0); transform: translateX(0); } 50% { width: 34rem; border-radius: 17rem; -webkit-transform: translateX(8rem); transform: translateX(8rem); } 75% { width: 32rem; border-radius: 50% 16rem 16rem 50%; -webkit-transform: translateX(20rem); transform: translateX(20rem); } 100% { width: 27rem; border-radius: 50%; -webkit-transform: translateX(26rem); transform: translateX(26rem); } } @-webkit-keyframes droplet-move-reverse { 0% { width: 27rem; border-radius: 50%; -webkit-transform: translateX(26rem); transform: translateX(26rem); } 25% { width: 32rem; border-radius: 50% 16rem 16rem 50%; -webkit-transform: translateX(26rem); transform: translateX(26rem); } 50% { width: 34rem; border-radius: 17rem; -webkit-transform: translateX(18rem); transform: translateX(18rem); } 75% { width: 32rem; border-radius: 16rem 50% 50% 16rem; -webkit-transform: translateX(6rem); transform: translateX(6rem); } 100% { width: 27rem; border-radius: 50%; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes droplet-move-reverse { 0% { width: 27rem; border-radius: 50%; -webkit-transform: translateX(26rem); transform: translateX(26rem); } 25% { width: 32rem; border-radius: 50% 16rem 16rem 50%; -webkit-transform: translateX(26rem); transform: translateX(26rem); } 50% { width: 34rem; border-radius: 17rem; -webkit-transform: translateX(18rem); transform: translateX(18rem); } 75% { width: 32rem; border-radius: 16rem 50% 50% 16rem; -webkit-transform: translateX(6rem); transform: translateX(6rem); } 100% { width: 27rem; border-radius: 50%; -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes droplet-move-vertical { 0% { height: 27rem; border-radius: 50%; -webkit-transform: translateY(0); transform: translateY(0); } 25% { height: 32rem; border-radius: 16rem 16rem 50% 50%; -webkit-transform: translateY(0); transform: translateY(0); } 50% { height: 34rem; border-radius: 17rem; -webkit-transform: translateY(-8rem); transform: translateY(-8rem); } 75% { height: 32rem; border-radius: 50% 50% 16rem 16rem; -webkit-transform: translateY(-20rem); transform: translateY(-20rem); } 100% { height: 27rem; border-radius: 50%; -webkit-transform: translateY(-26rem); transform: translateY(-26rem); } } @keyframes droplet-move-vertical { 0% { height: 27rem; border-radius: 50%; -webkit-transform: translateY(0); transform: translateY(0); } 25% { height: 32rem; border-radius: 16rem 16rem 50% 50%; -webkit-transform: translateY(0); transform: translateY(0); } 50% { height: 34rem; border-radius: 17rem; -webkit-transform: translateY(-8rem); transform: translateY(-8rem); } 75% { height: 32rem; border-radius: 50% 50% 16rem 16rem; -webkit-transform: translateY(-20rem); transform: translateY(-20rem); } 100% { height: 27rem; border-radius: 50%; -webkit-transform: translateY(-26rem); transform: translateY(-26rem); } } @-webkit-keyframes droplet-move-vertical-reverse { 0% { height: 27rem; border-radius: 50%; -webkit-transform: translateY(-26rem); transform: translateY(-26rem); } 25% { height: 32rem; border-radius: 50% 50% 16rem 16rem; -webkit-transform: translateY(-26rem); transform: translateY(-26rem); } 50% { height: 34rem; border-radius: 17rem; -webkit-transform: translateY(-18rem); transform: translateY(-18rem); } 75% { height: 32rem; border-radius: 16rem 16rem 50% 50%; -webkit-transform: translateY(-6rem); transform: translateY(-6rem); } 100% { height: 27rem; border-radius: 50%; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes droplet-move-vertical-reverse { 0% { height: 27rem; border-radius: 50%; -webkit-transform: translateY(-26rem); transform: translateY(-26rem); } 25% { height: 32rem; border-radius: 50% 50% 16rem 16rem; -webkit-transform: translateY(-26rem); transform: translateY(-26rem); } 50% { height: 34rem; border-radius: 17rem; -webkit-transform: translateY(-18rem); transform: translateY(-18rem); } 75% { height: 32rem; border-radius: 16rem 16rem 50% 50%; -webkit-transform: translateY(-6rem); transform: translateY(-6rem); } 100% { height: 27rem; border-radius: 50%; -webkit-transform: translateY(0); transform: translateY(0); } } .tub { cursor: pointer; } .tub-element { display: none; } .tub-element--active { display: block; -webkit-animation: showAnimation 1s forwards; animation: showAnimation 1s forwards; } @-webkit-keyframes showAnimation { from { opacity: 0; } to { opacity: 1; } } @keyframes showAnimation { from { opacity: 0; } to { opacity: 1; } } .arrow { z-index: 2; cursor: pointer; width: clamp( 50rem, calc(50rem + 50 * ((100vw - 375rem) / (1200 - 375))), 100rem ); height: clamp( 50rem, calc(50rem + 50 * ((100vw - 375rem) / (1200 - 375))), 100rem ); -webkit-transition: -webkit-transform 0.5s, -webkit-filter 0.5s; transition: -webkit-transform 0.5s, -webkit-filter 0.5s; transition: transform 0.5s, filter 0.5s; transition: transform 0.5s, filter 0.5s, -webkit-transform 0.5s, -webkit-filter 0.5s; } .arrow:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); -webkit-filter: drop-shadow(0 0 20rem #2c58a4); filter: drop-shadow(0 0 20rem #2c58a4); } .arrow svg { width: 100%; height: 100%; } .project-titling { position: relative; z-index: 1; } .project-titling--decorated { position: relative; } .project-titling--decorated .project-titling__background { width: clamp( 360rem, calc(360rem + 588 * ((100vw - 375rem) / (1200 - 375))), 948rem ); height: clamp( 360rem, calc(360rem + 140 * ((100vw - 375rem) / (1200 - 375))), 500rem ); left: clamp( -240rem, calc(-100rem - 140 * ((100vw - 375rem) / (1200 - 375))), -100rem ); position: absolute; background: #2c58a4; top: clamp( -120rem, calc(-60rem - 60 * ((100vw - 375rem) / (1200 - 375))), -60rem ); z-index: -1; } .project-titling--decorated .project-titling__title { margin-bottom: clamp( 15rem, calc(15rem + 5 * ((100vw - 375rem) / (1200 - 375))), 20rem ); padding: unset; } .project-titling--decorated .project-titling__title::before { content: unset; } .project-titling--decorated .project-titling__title::after { content: unset; } .project-titling--decorated .project-titling__title span:first-child { top: 20rem; } .project-titling--simple .project-titling__title { margin-bottom: clamp( 15rem, calc(15rem + 5 * ((100vw - 375rem) / (1200 - 375))), 20rem ); padding: unset; } .project-titling--simple .project-titling__title::after { content: unset; } .project-titling--simple .project-titling__title::before { content: unset; } .project-titling--simple .project-titling__title span:first-child { top: 20rem; } .project-titling__title { font-family: "BebasNeue"; color: #f0f0f0; margin-bottom: clamp( 20rem, calc(20rem + 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); font-size: clamp( 32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem ); line-height: clamp( 32rem, calc(32rem + 21 * ((100vw - 375rem) / (1200 - 375))), 53rem ); position: relative; padding: clamp( 20rem, calc(20rem + 5 * ((100vw - 375rem) / (1200 - 375))), 25rem ) clamp(40rem, calc(40rem + 20 * ((100vw - 375rem) / (1200 - 375))), 60rem) clamp(15rem, calc(15rem + 5 * ((100vw - 375rem) / (1200 - 375))), 20rem) 0; } .project-titling__title span:first-child { width: 40rem; height: clamp(2rem, calc(2rem + 1 * ((100vw - 375rem) / (1200 - 375))), 3rem); background: #f0f0f0; position: absolute; left: -70rem; top: 50rem; } .project-titling__title .project-titling__background { width: calc(100% + 290rem); height: 100%; left: -290rem; position: absolute; background: #2c58a4; top: 0; z-index: -1; } .project-titling__text { color: #f0f0f0; font-size: clamp( 14rem, calc(14rem + 6 * ((100vw - 375rem) / (1200 - 375))), 20rem ); line-height: clamp( 20rem, calc(20rem + 12 * ((100vw - 375rem) / (1200 - 375))), 32rem ); margin-bottom: 30rem; } .project-titling__text:last-child { margin-bottom: unset; } .burger { display: none; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6rem; width: 32rem; height: 32rem; } .burger span { width: 100%; height: 2rem; display: block; border-radius: 100rem; background: #2c58a4; } @-webkit-keyframes float-1 { 0%, 100% { -webkit-transform: translateY(0rem) rotate(0deg) scale(1); transform: translateY(0rem) rotate(0deg) scale(1); } 33% { -webkit-transform: translateY( clamp( -12rem, calc(-4rem - 8 * ((100vw - 375rem) / (1200 - 375))), -4rem ) ) rotate(-2deg) scale(1.03); transform: translateY( clamp( -12rem, calc(-4rem - 8 * ((100vw - 375rem) / (1200 - 375))), -4rem ) ) rotate(-2deg) scale(1.03); } 66% { -webkit-transform: translateY( clamp(3rem, calc(3rem + 3 * ((100vw - 375rem) / (1200 - 375))), 6rem) ) rotate(1deg) scale(0.97); transform: translateY( clamp(3rem, calc(3rem + 3 * ((100vw - 375rem) / (1200 - 375))), 6rem) ) rotate(1deg) scale(0.97); } } @keyframes float-1 { 0%, 100% { -webkit-transform: translateY(0rem) rotate(0deg) scale(1); transform: translateY(0rem) rotate(0deg) scale(1); } 33% { -webkit-transform: translateY( clamp( -12rem, calc(-4rem - 8 * ((100vw - 375rem) / (1200 - 375))), -4rem ) ) rotate(-2deg) scale(1.03); transform: translateY( clamp( -12rem, calc(-4rem - 8 * ((100vw - 375rem) / (1200 - 375))), -4rem ) ) rotate(-2deg) scale(1.03); } 66% { -webkit-transform: translateY( clamp(3rem, calc(3rem + 3 * ((100vw - 375rem) / (1200 - 375))), 6rem) ) rotate(1deg) scale(0.97); transform: translateY( clamp(3rem, calc(3rem + 3 * ((100vw - 375rem) / (1200 - 375))), 6rem) ) rotate(1deg) scale(0.97); } } @-webkit-keyframes float-2 { 0%, 100% { -webkit-transform: translateY(0rem) rotate(-3deg); transform: translateY(0rem) rotate(-3deg); } 50% { -webkit-transform: translateY( clamp( -15rem, calc(-6rem - 9 * ((100vw - 375rem) / (1200 - 375))), -6rem ) ) rotate(3deg); transform: translateY( clamp( -15rem, calc(-6rem - 9 * ((100vw - 375rem) / (1200 - 375))), -6rem ) ) rotate(3deg); } } @keyframes float-2 { 0%, 100% { -webkit-transform: translateY(0rem) rotate(-3deg); transform: translateY(0rem) rotate(-3deg); } 50% { -webkit-transform: translateY( clamp( -15rem, calc(-6rem - 9 * ((100vw - 375rem) / (1200 - 375))), -6rem ) ) rotate(3deg); transform: translateY( clamp( -15rem, calc(-6rem - 9 * ((100vw - 375rem) / (1200 - 375))), -6rem ) ) rotate(3deg); } } @-webkit-keyframes float-3 { 0%, 100% { -webkit-transform: translateY(0rem) rotate(2deg); transform: translateY(0rem) rotate(2deg); } 40% { -webkit-transform: translateY( clamp( -10rem, calc(-5rem - 5 * ((100vw - 375rem) / (1200 - 375))), -5rem ) ) rotate(-2deg); transform: translateY( clamp( -10rem, calc(-5rem - 5 * ((100vw - 375rem) / (1200 - 375))), -5rem ) ) rotate(-2deg); } 80% { -webkit-transform: translateY( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ) rotate(1deg); transform: translateY( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ) rotate(1deg); } } @keyframes float-3 { 0%, 100% { -webkit-transform: translateY(0rem) rotate(2deg); transform: translateY(0rem) rotate(2deg); } 40% { -webkit-transform: translateY( clamp( -10rem, calc(-5rem - 5 * ((100vw - 375rem) / (1200 - 375))), -5rem ) ) rotate(-2deg); transform: translateY( clamp( -10rem, calc(-5rem - 5 * ((100vw - 375rem) / (1200 - 375))), -5rem ) ) rotate(-2deg); } 80% { -webkit-transform: translateY( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ) rotate(1deg); transform: translateY( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ) rotate(1deg); } } @-webkit-keyframes float-4 { 0%, 100% { -webkit-transform: translateY(0rem) scale(1); transform: translateY(0rem) scale(1); } 45% { -webkit-transform: translateY( clamp( -14rem, calc(-7rem - 7 * ((100vw - 375rem) / (1200 - 375))), -7rem ) ) scale(1.04); transform: translateY( clamp( -14rem, calc(-7rem - 7 * ((100vw - 375rem) / (1200 - 375))), -7rem ) ) scale(1.04); } 75% { -webkit-transform: translateY( clamp(2rem, calc(2rem + 2 * ((100vw - 375rem) / (1200 - 375))), 4rem) ) scale(0.98); transform: translateY( clamp(2rem, calc(2rem + 2 * ((100vw - 375rem) / (1200 - 375))), 4rem) ) scale(0.98); } } @keyframes float-4 { 0%, 100% { -webkit-transform: translateY(0rem) scale(1); transform: translateY(0rem) scale(1); } 45% { -webkit-transform: translateY( clamp( -14rem, calc(-7rem - 7 * ((100vw - 375rem) / (1200 - 375))), -7rem ) ) scale(1.04); transform: translateY( clamp( -14rem, calc(-7rem - 7 * ((100vw - 375rem) / (1200 - 375))), -7rem ) ) scale(1.04); } 75% { -webkit-transform: translateY( clamp(2rem, calc(2rem + 2 * ((100vw - 375rem) / (1200 - 375))), 4rem) ) scale(0.98); transform: translateY( clamp(2rem, calc(2rem + 2 * ((100vw - 375rem) / (1200 - 375))), 4rem) ) scale(0.98); } } @-webkit-keyframes float-5 { 0%, 100% { -webkit-transform: translateY(0rem) rotate(-1deg) scale(1); transform: translateY(0rem) rotate(-1deg) scale(1); } 30% { -webkit-transform: translateY( clamp( -18rem, calc(-6rem - 12 * ((100vw - 375rem) / (1200 - 375))), -6rem ) ) rotate(2deg) scale(1.05); transform: translateY( clamp( -18rem, calc(-6rem - 12 * ((100vw - 375rem) / (1200 - 375))), -6rem ) ) rotate(2deg) scale(1.05); } 70% { -webkit-transform: translateY( clamp(3rem, calc(3rem + 4 * ((100vw - 375rem) / (1200 - 375))), 7rem) ) rotate(-1deg) scale(0.96); transform: translateY( clamp(3rem, calc(3rem + 4 * ((100vw - 375rem) / (1200 - 375))), 7rem) ) rotate(-1deg) scale(0.96); } } @keyframes float-5 { 0%, 100% { -webkit-transform: translateY(0rem) rotate(-1deg) scale(1); transform: translateY(0rem) rotate(-1deg) scale(1); } 30% { -webkit-transform: translateY( clamp( -18rem, calc(-6rem - 12 * ((100vw - 375rem) / (1200 - 375))), -6rem ) ) rotate(2deg) scale(1.05); transform: translateY( clamp( -18rem, calc(-6rem - 12 * ((100vw - 375rem) / (1200 - 375))), -6rem ) ) rotate(2deg) scale(1.05); } 70% { -webkit-transform: translateY( clamp(3rem, calc(3rem + 4 * ((100vw - 375rem) / (1200 - 375))), 7rem) ) rotate(-1deg) scale(0.96); transform: translateY( clamp(3rem, calc(3rem + 4 * ((100vw - 375rem) / (1200 - 375))), 7rem) ) rotate(-1deg) scale(0.96); } } @-webkit-keyframes float-6 { 0%, 100% { -webkit-transform: translateY(0rem) translateX(0rem); transform: translateY(0rem) translateX(0rem); } 25% { -webkit-transform: translateY( clamp(-8rem, calc(-4rem - 4 * ((100vw - 375rem) / (1200 - 375))), -4rem) ) translateX( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ); transform: translateY( clamp(-8rem, calc(-4rem - 4 * ((100vw - 375rem) / (1200 - 375))), -4rem) ) translateX( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ); } 50% { -webkit-transform: translateY( clamp( -16rem, calc(-8rem - 8 * ((100vw - 375rem) / (1200 - 375))), -8rem ) ) translateX( clamp( -3rem, calc(-1.5rem - 1.5 * ((100vw - 375rem) / (1200 - 375))), -1.5rem ) ); transform: translateY( clamp( -16rem, calc(-8rem - 8 * ((100vw - 375rem) / (1200 - 375))), -8rem ) ) translateX( clamp( -3rem, calc(-1.5rem - 1.5 * ((100vw - 375rem) / (1200 - 375))), -1.5rem ) ); } 75% { -webkit-transform: translateY( clamp( -5rem, calc(-2.5rem - 2.5 * ((100vw - 375rem) / (1200 - 375))), -2.5rem ) ) translateX( clamp(2rem, calc(2rem + 2 * ((100vw - 375rem) / (1200 - 375))), 4rem) ); transform: translateY( clamp( -5rem, calc(-2.5rem - 2.5 * ((100vw - 375rem) / (1200 - 375))), -2.5rem ) ) translateX( clamp(2rem, calc(2rem + 2 * ((100vw - 375rem) / (1200 - 375))), 4rem) ); } } @keyframes float-6 { 0%, 100% { -webkit-transform: translateY(0rem) translateX(0rem); transform: translateY(0rem) translateX(0rem); } 25% { -webkit-transform: translateY( clamp(-8rem, calc(-4rem - 4 * ((100vw - 375rem) / (1200 - 375))), -4rem) ) translateX( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ); transform: translateY( clamp(-8rem, calc(-4rem - 4 * ((100vw - 375rem) / (1200 - 375))), -4rem) ) translateX( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ); } 50% { -webkit-transform: translateY( clamp( -16rem, calc(-8rem - 8 * ((100vw - 375rem) / (1200 - 375))), -8rem ) ) translateX( clamp( -3rem, calc(-1.5rem - 1.5 * ((100vw - 375rem) / (1200 - 375))), -1.5rem ) ); transform: translateY( clamp( -16rem, calc(-8rem - 8 * ((100vw - 375rem) / (1200 - 375))), -8rem ) ) translateX( clamp( -3rem, calc(-1.5rem - 1.5 * ((100vw - 375rem) / (1200 - 375))), -1.5rem ) ); } 75% { -webkit-transform: translateY( clamp( -5rem, calc(-2.5rem - 2.5 * ((100vw - 375rem) / (1200 - 375))), -2.5rem ) ) translateX( clamp(2rem, calc(2rem + 2 * ((100vw - 375rem) / (1200 - 375))), 4rem) ); transform: translateY( clamp( -5rem, calc(-2.5rem - 2.5 * ((100vw - 375rem) / (1200 - 375))), -2.5rem ) ) translateX( clamp(2rem, calc(2rem + 2 * ((100vw - 375rem) / (1200 - 375))), 4rem) ); } } @-webkit-keyframes float-7 { 0%, 100% { -webkit-transform: translateY(0rem) scale(1) rotate(0deg); transform: translateY(0rem) scale(1) rotate(0deg); } 20% { -webkit-transform: translateY( clamp( -20rem, calc(-10rem - 10 * ((100vw - 375rem) / (1200 - 375))), -10rem ) ) scale(1.06) rotate(-3deg); transform: translateY( clamp( -20rem, calc(-10rem - 10 * ((100vw - 375rem) / (1200 - 375))), -10rem ) ) scale(1.06) rotate(-3deg); } 60% { -webkit-transform: translateY( clamp(4rem, calc(4rem + 4 * ((100vw - 375rem) / (1200 - 375))), 8rem) ) scale(0.95) rotate(2deg); transform: translateY( clamp(4rem, calc(4rem + 4 * ((100vw - 375rem) / (1200 - 375))), 8rem) ) scale(0.95) rotate(2deg); } } @keyframes float-7 { 0%, 100% { -webkit-transform: translateY(0rem) scale(1) rotate(0deg); transform: translateY(0rem) scale(1) rotate(0deg); } 20% { -webkit-transform: translateY( clamp( -20rem, calc(-10rem - 10 * ((100vw - 375rem) / (1200 - 375))), -10rem ) ) scale(1.06) rotate(-3deg); transform: translateY( clamp( -20rem, calc(-10rem - 10 * ((100vw - 375rem) / (1200 - 375))), -10rem ) ) scale(1.06) rotate(-3deg); } 60% { -webkit-transform: translateY( clamp(4rem, calc(4rem + 4 * ((100vw - 375rem) / (1200 - 375))), 8rem) ) scale(0.95) rotate(2deg); transform: translateY( clamp(4rem, calc(4rem + 4 * ((100vw - 375rem) / (1200 - 375))), 8rem) ) scale(0.95) rotate(2deg); } } @-webkit-keyframes float-8 { 0%, 100% { -webkit-transform: translateY(0rem) translateX(0rem) rotate(1deg); transform: translateY(0rem) translateX(0rem) rotate(1deg); } 35% { -webkit-transform: translateY( clamp( -11rem, calc(-5.5rem - 5.5 * ((100vw - 375rem) / (1200 - 375))), -5.5rem ) ) translateX( clamp(-6rem, calc(-3rem - 3 * ((100vw - 375rem) / (1200 - 375))), -3rem) ) rotate(-2deg); transform: translateY( clamp( -11rem, calc(-5.5rem - 5.5 * ((100vw - 375rem) / (1200 - 375))), -5.5rem ) ) translateX( clamp(-6rem, calc(-3rem - 3 * ((100vw - 375rem) / (1200 - 375))), -3rem) ) rotate(-2deg); } 70% { -webkit-transform: translateY( clamp(2rem, calc(2rem + 2 * ((100vw - 375rem) / (1200 - 375))), 4rem) ) translateX( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ) rotate(3deg); transform: translateY( clamp(2rem, calc(2rem + 2 * ((100vw - 375rem) / (1200 - 375))), 4rem) ) translateX( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ) rotate(3deg); } } @keyframes float-8 { 0%, 100% { -webkit-transform: translateY(0rem) translateX(0rem) rotate(1deg); transform: translateY(0rem) translateX(0rem) rotate(1deg); } 35% { -webkit-transform: translateY( clamp( -11rem, calc(-5.5rem - 5.5 * ((100vw - 375rem) / (1200 - 375))), -5.5rem ) ) translateX( clamp(-6rem, calc(-3rem - 3 * ((100vw - 375rem) / (1200 - 375))), -3rem) ) rotate(-2deg); transform: translateY( clamp( -11rem, calc(-5.5rem - 5.5 * ((100vw - 375rem) / (1200 - 375))), -5.5rem ) ) translateX( clamp(-6rem, calc(-3rem - 3 * ((100vw - 375rem) / (1200 - 375))), -3rem) ) rotate(-2deg); } 70% { -webkit-transform: translateY( clamp(2rem, calc(2rem + 2 * ((100vw - 375rem) / (1200 - 375))), 4rem) ) translateX( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ) rotate(3deg); transform: translateY( clamp(2rem, calc(2rem + 2 * ((100vw - 375rem) / (1200 - 375))), 4rem) ) translateX( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ) rotate(3deg); } } @-webkit-keyframes float-9 { 0%, 100% { -webkit-transform: translateY(0rem) scale(1); transform: translateY(0rem) scale(1); } 50% { -webkit-transform: translateY( clamp( -22rem, calc(-11rem - 11 * ((100vw - 375rem) / (1200 - 375))), -11rem ) ) scale(1.07); transform: translateY( clamp( -22rem, calc(-11rem - 11 * ((100vw - 375rem) / (1200 - 375))), -11rem ) ) scale(1.07); } } @keyframes float-9 { 0%, 100% { -webkit-transform: translateY(0rem) scale(1); transform: translateY(0rem) scale(1); } 50% { -webkit-transform: translateY( clamp( -22rem, calc(-11rem - 11 * ((100vw - 375rem) / (1200 - 375))), -11rem ) ) scale(1.07); transform: translateY( clamp( -22rem, calc(-11rem - 11 * ((100vw - 375rem) / (1200 - 375))), -11rem ) ) scale(1.07); } } @-webkit-keyframes float-10 { 0%, 100% { -webkit-transform: translateY(0rem) rotate(0deg) scale(1); transform: translateY(0rem) rotate(0deg) scale(1); } 15% { -webkit-transform: translateY( clamp(-6rem, calc(-3rem - 3 * ((100vw - 375rem) / (1200 - 375))), -3rem) ) rotate(3deg) scale(1.02); transform: translateY( clamp(-6rem, calc(-3rem - 3 * ((100vw - 375rem) / (1200 - 375))), -3rem) ) rotate(3deg) scale(1.02); } 45% { -webkit-transform: translateY( clamp( -17rem, calc(-8rem - 9 * ((100vw - 375rem) / (1200 - 375))), -8rem ) ) rotate(-2deg) scale(1.05); transform: translateY( clamp( -17rem, calc(-8rem - 9 * ((100vw - 375rem) / (1200 - 375))), -8rem ) ) rotate(-2deg) scale(1.05); } 75% { -webkit-transform: translateY( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ) rotate(1deg) scale(0.97); transform: translateY( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ) rotate(1deg) scale(0.97); } } @keyframes float-10 { 0%, 100% { -webkit-transform: translateY(0rem) rotate(0deg) scale(1); transform: translateY(0rem) rotate(0deg) scale(1); } 15% { -webkit-transform: translateY( clamp(-6rem, calc(-3rem - 3 * ((100vw - 375rem) / (1200 - 375))), -3rem) ) rotate(3deg) scale(1.02); transform: translateY( clamp(-6rem, calc(-3rem - 3 * ((100vw - 375rem) / (1200 - 375))), -3rem) ) rotate(3deg) scale(1.02); } 45% { -webkit-transform: translateY( clamp( -17rem, calc(-8rem - 9 * ((100vw - 375rem) / (1200 - 375))), -8rem ) ) rotate(-2deg) scale(1.05); transform: translateY( clamp( -17rem, calc(-8rem - 9 * ((100vw - 375rem) / (1200 - 375))), -8rem ) ) rotate(-2deg) scale(1.05); } 75% { -webkit-transform: translateY( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ) rotate(1deg) scale(0.97); transform: translateY( clamp( 2.5rem, calc(2.5rem + 2.5 * ((100vw - 375rem) / (1200 - 375))), 5rem ) ) rotate(1deg) scale(0.97); } } .preloader { position: fixed; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100svh; z-index: 100; pointer-events: none; top: 0; right: 0; bottom: 0; left: 0; background: #000; -webkit-transition: opacity 0.6s ease; transition: opacity 0.6s ease; } .preloader.hide { opacity: 0; } .text-line { stroke-dasharray: 2600; stroke-dashoffset: 2600; stroke-width: clamp( 2rem, calc(2rem + 3 * ((100vw - 375rem) / (1200 - 375))), 5rem ); -webkit-animation: dash 4s ease-in forwards, filling 3s ease-in forwards; animation: dash 4s ease-in forwards, filling 3s ease-in forwards; font-size: clamp( 80rem, calc(80rem + 180 * ((100vw - 375rem) / (1200 - 375))), 260rem ); height: clamp( 80rem, calc(80rem + 180 * ((100vw - 375rem) / (1200 - 375))), 260rem ); } .text-line text { font-family: "BebasNeue"; font-weight: normal; font-style: normal; fill: #2c58a4; } @-webkit-keyframes dash { 0% { stroke: #fff; stroke-dashoffset: 2600; } 50% { stroke: #fff; stroke-dashoffset: 1300; } 70% { stroke: #2c58a4; stroke-dashoffset: 650; } 100% { stroke: #2c58a4; stroke-dashoffset: 0; } } @keyframes dash { 0% { stroke: #fff; stroke-dashoffset: 2600; } 50% { stroke: #fff; stroke-dashoffset: 1300; } 70% { stroke: #2c58a4; stroke-dashoffset: 650; } 100% { stroke: #2c58a4; stroke-dashoffset: 0; } } @-webkit-keyframes filling { 0%, 75% { fill: rgba(0, 0, 0, 0); fill-opacity: 0; } 100% { fill: #fff; fill-opacity: 1; } } @keyframes filling { 0%, 75% { fill: rgba(0, 0, 0, 0); fill-opacity: 0; } 100% { fill: #fff; fill-opacity: 1; } } @-webkit-keyframes shadow { 0%, 75% { -webkit-filter: drop-shadow(0 0 0rem rgba(44, 88, 164, 0)); filter: drop-shadow(0 0 0rem rgba(44, 88, 164, 0)); } 100% { -webkit-filter: drop-shadow( 0 0 clamp( 100rem, calc(100rem + 100 * ((100vw - 375rem) / (1200 - 375))), 200rem ) #2c58a4 ); filter: drop-shadow( 0 0 clamp( 100rem, calc(100rem + 100 * ((100vw - 375rem) / (1200 - 375))), 200rem ) #2c58a4 ); } } @keyframes shadow { 0%, 75% { -webkit-filter: drop-shadow(0 0 0rem rgba(44, 88, 164, 0)); filter: drop-shadow(0 0 0rem rgba(44, 88, 164, 0)); } 100% { -webkit-filter: drop-shadow( 0 0 clamp( 100rem, calc(100rem + 100 * ((100vw - 375rem) / (1200 - 375))), 200rem ) #2c58a4 ); filter: drop-shadow( 0 0 clamp( 100rem, calc(100rem + 100 * ((100vw - 375rem) / (1200 - 375))), 200rem ) #2c58a4 ); } } .popup { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 9999; background: rgba(51, 51, 51, 0.75); backdrop-filter: blur(4rem); } .popup--connect .popup__inner { max-width: 778rem; } .popup--request .popup__inner { max-width: 620rem; } .popup__wrapper { overflow: scroll; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: auto; margin-bottom: auto; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 24rem 15rem; } .popup__wrapper::-webkit-scrollbar { width: 0; height: 0; } .popup__inner { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 480rem; position: relative; margin-top: auto; margin-bottom: auto; } .body--popup { overflow: hidden; } .header { position: absolute; top: clamp(0rem, calc(0rem + 45 * ((100vw - 375rem) / (1200 - 375))), 45rem); left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 100%; padding: 30rem 0; z-index: 150; } .header .container { max-width: 1440rem; } .header__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 56rem; } .header__link { text-transform: unset; } .logo { display: block; width: clamp( 160rem, calc(160rem + 60 * ((100vw - 375rem) / (1200 - 375))), 220rem ); min-width: clamp( 160rem, calc(160rem + 60 * ((100vw - 375rem) / (1200 - 375))), 220rem ); height: clamp( 32rem, calc(32rem + 16 * ((100vw - 375rem) / (1200 - 375))), 48rem ); } .logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .heading__inner { z-index: 1; position: relative; padding: clamp( 200rem, calc(200rem + 230 * ((100vw - 375rem) / (1200 - 375))), 430rem ) 0; min-height: 1200rem; } .heading__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; max-width: 1440rem; margin-left: auto; margin-right: auto; } .heading__title span:first-child { text-align: right; margin-left: clamp( 16rem, calc(16rem + 19 * ((100vw - 375rem) / (1200 - 375))), 35rem ); } .heading__img { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: clamp( 120rem, calc(120rem + 65 * ((100vw - 375rem) / (1200 - 375))), 185rem ); width: clamp( 280rem, calc(280rem + 192 * ((100vw - 375rem) / (1200 - 375))), 472rem ); height: clamp( 320rem, calc(320rem + 621 * ((100vw - 375rem) / (1200 - 375))), 941rem ); pointer-events: none; -webkit-filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); } .heading__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .heading .lines__line:nth-child(1) { height: calc(100% - 225rem); bottom: 0; left: clamp(0rem, calc(0rem + 70 * ((100vw - 375rem) / (1200 - 375))), 70rem); } .heading .lines__line:nth-child(2) { height: clamp( 120rem, calc(120rem + 105 * ((100vw - 375rem) / (1200 - 375))), 225rem ); top: 0; left: clamp( 80rem, calc(80rem + 379 * ((100vw - 375rem) / (1200 - 375))), 459rem ); } .heading .lines__line:nth-child(3) { height: calc(100% + 104rem); top: 0; left: calc( 50% - clamp( 7.5rem, calc(7.5rem + 6 * ((100vw - 375rem) / (1200 - 375))), 13.5rem ) ); } .heading .lines__line:nth-child(4) { height: calc( 100% + clamp(60rem, calc(60rem + 61 * ((100vw - 375rem) / (1200 - 375))), 121rem) ); top: 0; right: clamp( 80rem, calc(80rem + 405 * ((100vw - 375rem) / (1200 - 375))), 485rem ); } .heading .lines__line:nth-child(5) { height: 100%; bottom: 0; right: clamp( 0rem, calc(0rem + 70 * ((100vw - 375rem) / (1200 - 375))), 70rem ); } .about__inner { padding: clamp( 0rem, calc(0rem + 80 * ((100vw - 375rem) / (1200 - 375))), 80rem ) 0 clamp(60rem, calc(60rem + 20 * ((100vw - 375rem) / (1200 - 375))), 80rem) 0; min-height: 1200rem; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 2; } .about .lines__line:nth-child(1) { height: 100%; bottom: 0; left: 70rem; } .about .lines__line:nth-child(2) { height: 105rem; top: 16rem; left: 459rem; } .about .lines__line:nth-child(3) { height: 100%; bottom: 0; right: 70rem; } .about-view { position: absolute; left: -6rem; width: 640rem; height: 980rem; top: 120rem; pointer-events: none; z-index: 1; } .about-view__img { width: 100%; height: 100%; -webkit-filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); } .about-view__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .about-images__wrapper { position: absolute; } .about-images__wrapper img { -o-object-fit: contain; object-fit: contain; } .about-images__wrapper:nth-child(1) { -webkit-transform: rotate(144deg); -ms-transform: rotate(144deg); transform: rotate(144deg); bottom: 292rem; left: 87rem; } .about-images__wrapper:nth-child(1) img { width: 89rem; height: 105rem; -webkit-animation: float-1 5.5s ease-in-out infinite; animation: float-1 5.5s ease-in-out infinite; } .about-images__wrapper:nth-child(2) { top: -93rem; left: 82rem; } .about-images__wrapper:nth-child(2) img { width: 143rem; height: 154rem; -webkit-animation: float-2 6s ease-in-out infinite; animation: float-2 6s ease-in-out infinite; -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } .about-images__wrapper:nth-child(3) { right: 2rem; top: 1rem; } .about-images__wrapper:nth-child(3) img { width: 89rem; height: 105rem; -webkit-animation: float-3 7s ease-in-out infinite; animation: float-3 7s ease-in-out infinite; -webkit-animation-delay: -3s; animation-delay: -3s; } .about-images__wrapper:nth-child(4) { bottom: 333rem; right: 34rem; } .about-images__wrapper:nth-child(4) img { width: 75rem; height: 91rem; -webkit-animation: float-4 5s ease-in-out infinite; animation: float-4 5s ease-in-out infinite; -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .about-images__wrapper:nth-child(5) { -webkit-transform: rotate(133deg); -ms-transform: rotate(133deg); transform: rotate(133deg); right: -614rem; top: 362rem; } .about-images__wrapper:nth-child(5) img { width: 75rem; height: 91rem; -webkit-animation: float-5 6.5s ease-in-out infinite; animation: float-5 6.5s ease-in-out infinite; -webkit-animation-delay: -2.2s; animation-delay: -2.2s; } .about-body { width: 100%; max-width: 937rem; margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; margin-right: 120rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .about-body__view { display: none; } .about-body__title { margin-bottom: clamp( 15rem, calc(15rem + 15 * ((100vw - 375rem) / (1200 - 375))), 30rem ); } .about-body__subtext { color: #fbfbfb; font-size: clamp( 32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem ); line-height: clamp( 32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem ); letter-spacing: clamp( 1.2rem, calc(1.2rem + 1.4 * ((100vw - 375rem) / (1200 - 375))), 2.6rem ); background: #2c58a4; padding: 15rem clamp(15rem, calc(15rem + 15 * ((100vw - 375rem) / (1200 - 375))), 30rem) 10rem clamp(15rem, calc(15rem + 15 * ((100vw - 375rem) / (1200 - 375))), 30rem); font-family: "BebasNeue"; margin-bottom: clamp( 30rem, calc(30rem + 30 * ((100vw - 375rem) / (1200 - 375))), 60rem ); } .about-body__subtitle { font-family: "BebasNeue"; margin-bottom: clamp( 15rem, calc(15rem + 10 * ((100vw - 375rem) / (1200 - 375))), 25rem ); font-size: clamp( 32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem ); line-height: clamp( 32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem ); letter-spacing: clamp( 0.5rem, calc(0.5rem + 0.54 * ((100vw - 375rem) / (1200 - 375))), 1.04rem ); color: #f0f0f0; } .about-body__subtitle span { color: #2c58a4; } .about-body__inner { margin-bottom: clamp( 20rem, calc(20rem + 15 * ((100vw - 375rem) / (1200 - 375))), 35rem ); } .about-body__text { color: #f0f0f0; margin-bottom: clamp( 15rem, calc(15rem + 15 * ((100vw - 375rem) / (1200 - 375))), 30rem ); font-size: clamp( 14rem, calc(14rem + 6 * ((100vw - 375rem) / (1200 - 375))), 20rem ); line-height: clamp( 20rem, calc(20rem + 12 * ((100vw - 375rem) / (1200 - 375))), 32rem ); } .about-body__text:last-child { margin-bottom: unset; } .about-body__caption { font-size: clamp( 24rem, calc(24rem + 8 * ((100vw - 375rem) / (1200 - 375))), 32rem ); line-height: clamp( 26rem, calc(26rem + 14 * ((100vw - 375rem) / (1200 - 375))), 40rem ); letter-spacing: clamp( 0.5rem, calc(0.5rem + 0.56 * ((100vw - 375rem) / (1200 - 375))), 1.06rem ); color: #fff; font-family: "BebasNeue"; } .about-body__caption span { color: #2c58a4; } .advantages__inner { padding: clamp( 60rem, calc(90rem - 30 * ((100vw - 375rem) / (1200 - 375))), 90rem ) 0 60rem 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 1200rem; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30rem; position: relative; z-index: 1; } .advantages__wrapper { position: relative; margin-left: 120rem; z-index: 1; } .advantages .lines__line:nth-child(1) { height: 100%; bottom: 0; left: 70rem; } .advantages .lines__line:nth-child(2) { height: calc(100% + 341rem); top: -201rem; left: 459rem; } .advantages .lines__line:nth-child(3) { height: calc(100% + 149rem); top: -82rem; left: calc(50% - 13.5rem); } .advantages .lines__line:nth-child(4) { height: 100%; bottom: 0; right: 70rem; } .advantages-bg { position: absolute; width: 1000rem; height: 1000rem; top: -360rem; left: -225rem; z-index: -1; pointer-events: none; } .advantages-bg svg { top: 0; left: 0; right: 0; width: 1025rem; height: 1025rem; position: absolute; -o-object-fit: contain; object-fit: contain; fill: none; stroke: #2c58a4; stroke-width: 100; stroke-miterlimit: 10; } .advantages-body { margin-right: 120rem; max-width: 585rem; position: relative; z-index: 1; } .advantages-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: clamp( 15rem, calc(15rem + 15 * ((100vw - 375rem) / (1200 - 375))), 30rem ); } .advantages-item__title { background: #2c58a4; margin-bottom: clamp( 15rem, calc(15rem + 10 * ((100vw - 375rem) / (1200 - 375))), 25rem ); padding: clamp( 15rem, calc(15rem + 10 * ((100vw - 375rem) / (1200 - 375))), 25rem ) clamp(15rem, calc(15rem + 15 * ((100vw - 375rem) / (1200 - 375))), 30rem) clamp(10rem, calc(10rem + 5 * ((100vw - 375rem) / (1200 - 375))), 15rem) clamp(15rem, calc(15rem + 15 * ((100vw - 375rem) / (1200 - 375))), 30rem); font-size: clamp( 24rem, calc(24rem + 8 * ((100vw - 375rem) / (1200 - 375))), 32rem ); line-height: clamp( 24rem, calc(24rem + 8 * ((100vw - 375rem) / (1200 - 375))), 32rem ); letter-spacing: clamp( 0.6rem, calc(0.6rem + 0.46 * ((100vw - 375rem) / (1200 - 375))), 1.06rem ); color: #fbfbfb; font-family: "BebasNeue"; } .advantages-item__text { color: #e6e6e6; font-size: clamp( 14rem, calc(14rem + 8 * ((100vw - 375rem) / (1200 - 375))), 22rem ); line-height: clamp( 20rem, calc(20rem + 16 * ((100vw - 375rem) / (1200 - 375))), 36rem ); } .slogan__inner { position: relative; padding: clamp( 0rem, calc(0rem + 185 * ((100vw - 375rem) / (1200 - 375))), 185rem ) 0; min-height: 1200rem; z-index: 1; } .slogan .lines__line:nth-child(1) { height: 100%; bottom: 0; left: 70rem; } .slogan .lines__line:nth-child(2) { height: 215rem; bottom: 0; left: 459rem; } .slogan .lines__line:nth-child(3) { height: 248rem; bottom: 73rem; left: calc(50% - 13.5rem); } .slogan .lines__line:nth-child(4) { height: 252rem; top: 28rem; right: 486rem; } .slogan .lines__line:nth-child(5) { height: 100%; bottom: 0; right: 70rem; } .slogan-view { position: absolute; right: 120rem; z-index: 1; width: 823rem; height: 1065rem; top: 35rem; pointer-events: none; } .slogan-view__img { width: 100%; height: 100%; -webkit-filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); } .slogan-view__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .slogan-images__wrapper { position: absolute; } .slogan-images__wrapper img { -o-object-fit: contain; object-fit: contain; } .slogan-images__wrapper:nth-child(1) { -webkit-transform: rotate(41deg); -ms-transform: rotate(41deg); transform: rotate(41deg); bottom: 170rem; left: -135rem; } .slogan-images__wrapper:nth-child(1) img { width: 123rem; height: 121rem; -webkit-animation: float-1 5.5s ease-in-out infinite; animation: float-1 5.5s ease-in-out infinite; } .slogan-images__wrapper:nth-child(2) { top: 167rem; left: -111rem; } .slogan-images__wrapper:nth-child(2) img { width: 201rem; height: 271rem; -webkit-animation: float-2 6s ease-in-out infinite; animation: float-2 6s ease-in-out infinite; -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } .slogan-images__wrapper:nth-child(3) { -webkit-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg); bottom: 600rem; left: -730rem; } .slogan-images__wrapper:nth-child(3) img { width: 123rem; height: 121rem; -webkit-animation: float-1 5.5s ease-in-out infinite; animation: float-1 5.5s ease-in-out infinite; } .slogan-images__wrapper:nth-child(4) { top: 400rem; right: -50rem; } .slogan-images__wrapper:nth-child(4) img { width: 201rem; height: 271rem; -webkit-animation: float-2 6s ease-in-out infinite; animation: float-2 6s ease-in-out infinite; -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } .slogan-body { margin-left: 120rem; max-width: 920rem; } .points { background: #060606; } .points__inner { min-height: 1200rem; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; position: relative; z-index: 1; } .points .lines__line:nth-child(1) { height: 100%; bottom: 0; left: 70rem; background: #20488c; z-index: 1; } .points .lines__line:nth-child(2) { height: 121rem; top: 77rem; right: 486rem; } .points .lines__line:nth-child(3) { height: 100%; bottom: 0; right: 70rem; } .points-body { max-width: 828rem; height: 100%; background: #2c58a4; padding-left: 70rem; position: relative; } .points-body::before { content: ""; width: 100%; height: 100%; background: #2c58a4; position: absolute; left: -100%; top: 0; bottom: 0; } .points-list { overflow: hidden; padding-top: 165rem; height: 100%; position: relative; } .points-list .swiper-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: clamp( 30rem, calc(30rem + 30 * ((100vw - 375rem) / (1200 - 375))), 60rem ); } .points-list .tub--active .points-item__digit { background: unset; } .points-list .tub--active .points-item__title::before { opacity: 1; -webkit-transform: unset; -ms-transform: unset; transform: unset; } .points-item { position: relative; width: 100%; height: auto; } .points-item:hover .points-item__digit { background: unset; } .points-item:hover .points-item__title::before { opacity: 1; -webkit-transform: unset; -ms-transform: unset; transform: unset; } .points-item__line { height: clamp(2rem, calc(2rem + 1 * ((100vw - 375rem) / (1200 - 375))), 3rem); width: clamp( 20rem, calc(20rem + 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); background: #20488c; position: absolute; left: 0; top: clamp( 75rem, calc(75rem + 30 * ((100vw - 375rem) / (1200 - 375))), 105rem ); } .points-item__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: clamp( 40rem, calc(40rem + 40 * ((100vw - 375rem) / (1200 - 375))), 80rem ); } .points-item__digit { font-family: "BebasNeue"; color: #fbfbfb; background: #20488c; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: clamp( 40rem, calc(40rem + 20 * ((100vw - 375rem) / (1200 - 375))), 60rem ); height: clamp( 40rem, calc(40rem + 20 * ((100vw - 375rem) / (1200 - 375))), 60rem ); min-height: clamp( 40rem, calc(40rem + 20 * ((100vw - 375rem) / (1200 - 375))), 60rem ); font-size: clamp( 24rem, calc(24rem + 8 * ((100vw - 375rem) / (1200 - 375))), 32rem ); line-height: clamp( 32rem, calc(32rem + 18 * ((100vw - 375rem) / (1200 - 375))), 50rem ); letter-spacing: 1.6rem; -webkit-transition: background 0.5s; transition: background 0.5s; } .points-item__title { width: 100%; font-family: "BebasNeue"; font-size: clamp( 32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem ); line-height: clamp( 30rem, calc(30rem + 20 * ((100vw - 375rem) / (1200 - 375))), 50rem ); letter-spacing: clamp( 1rem, calc(1rem + 1.6 * ((100vw - 375rem) / (1200 - 375))), 2.6rem ); color: #fff; padding: 25rem 15rem 20rem 0; z-index: 1; position: relative; } .points-item__title::before { content: ""; width: calc( 100% + clamp(40rem, calc(40rem + 60 * ((100vw - 375rem) / (1200 - 375))), 100rem) ); position: absolute; top: 0; bottom: 0; height: 100%; left: clamp( -80rem, calc(-40rem - 40 * ((100vw - 375rem) / (1200 - 375))), -40rem ); background: #000; z-index: -1; opacity: 0; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .points-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 727rem; padding: 30rem 0 30rem 55rem; } .points-content__text { color: #e6e6e6; font-size: clamp( 14rem, calc(14rem + 8 * ((100vw - 375rem) / (1200 - 375))), 22rem ); line-height: clamp( 20rem, calc(20rem + 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); margin-bottom: clamp( 15rem, calc(15rem + 15 * ((100vw - 375rem) / (1200 - 375))), 30rem ); } .points-content__text:last-child { margin-bottom: unset; } .points-content__subtext { font-family: "BebasNeue"; color: #fff; font-size: clamp( 24rem, calc(24rem + 8 * ((100vw - 375rem) / (1200 - 375))), 32rem ); line-height: clamp( 26rem, calc(26rem + 14 * ((100vw - 375rem) / (1200 - 375))), 40rem ); letter-spacing: clamp( 0.5rem, calc(0.5rem + 0.56 * ((100vw - 375rem) / (1200 - 375))), 1.06rem ); } .points-content__subtext span { color: #2c58a4; } .points-ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 5rem; margin-bottom: clamp( 20rem, calc(20rem + 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); } .points-ul:last-child { margin-bottom: unset; } .points-ul__item { color: #e6e6e6; font-size: clamp( 14rem, calc(14rem + 8 * ((100vw - 375rem) / (1200 - 375))), 22rem ); line-height: clamp( 20rem, calc(20rem + 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); } .points-ul__item::before { content: "—"; margin-right: clamp( 5rem, calc(5rem + 5 * ((100vw - 375rem) / (1200 - 375))), 10rem ); } .cases { background: #060606; } .cases__inner { position: relative; z-index: 1; } .cases .cases__lines .lines__line:nth-child(1) { height: 100%; top: 0; left: 70rem; } .cases .cases__lines .lines__line:nth-child(2) { height: 100%; top: 0; right: 70rem; } .cases-head { padding-top: clamp( 60rem, calc(60rem + 275 * ((100vw - 375rem) / (1200 - 375))), 335rem ); position: relative; margin-bottom: clamp( 30rem, calc(30rem + 150 * ((100vw - 375rem) / (1200 - 375))), 180rem ); z-index: 1; } /* .cases--services .cases-head { padding-top: clamp( 120rem, calc(120rem + 215 * ((100vw - 375rem) / (1200 - 375))), 335rem ); } */ .cases--services .cases__inner { padding-bottom: clamp( 60rem, calc(60rem + 60 * ((100vw - 375rem) / (1200 - 375))), 120rem ); } .cases-head .lines__line:nth-child(1) { height: 305rem; top: 0; left: 459rem; } .cases-head .lines__line:nth-child(2) { height: 120rem; bottom: -225rem; left: 459rem; } .cases-head .lines__line:nth-child(3) { height: 82rem; top: 56rem; left: calc(50% - 13.5rem); } .cases-head .lines__line:nth-child(4) { height: 313rem; top: -153rem; right: 486rem; } .cases-head .lines__line:nth-child(5) { height: 567rem; bottom: -296rem; right: 486rem; } .cases-view { position: absolute; left: 75rem; width: 630rem; height: 1055rem; z-index: 1; top: 110rem; pointer-events: none; } .cases-view__img { -webkit-filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); width: 100%; height: 100%; } .cases-view__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .cases-images img { -o-object-fit: contain; object-fit: contain; } .cases-images__wrapper { position: absolute; } .cases-images__wrapper:nth-child(1) { bottom: 106rem; left: -36rem; } .cases-images__wrapper:nth-child(1) img { width: 81rem; height: 87rem; -webkit-animation: float-1 5.5s ease-in-out infinite; animation: float-1 5.5s ease-in-out infinite; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .cases-images__wrapper:nth-child(2) { top: 266rem; left: -44rem; } .cases-images__wrapper:nth-child(2) img { width: 248rem; height: 370rem; -webkit-animation: float-2 6s ease-in-out infinite; animation: float-2 6s ease-in-out infinite; -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } .cases-images__wrapper:nth-child(3) { top: -15rem; left: -29rem; } .cases-images__wrapper:nth-child(3) img { width: 165rem; height: 116rem; -webkit-animation: float-3 7s ease-in-out infinite; animation: float-3 7s ease-in-out infinite; -webkit-animation-delay: -3s; animation-delay: -3s; } .cases-images__wrapper:nth-child(4) { top: 50rem; right: -152rem; } .cases-images__wrapper:nth-child(4) img { width: 160rem; height: 143rem; -webkit-animation: float-4 5s ease-in-out infinite; animation: float-4 5s ease-in-out infinite; -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .cases-images__wrapper:nth-child(5) { top: 138rem; right: -180rem; } .cases-images__wrapper:nth-child(5) img { width: 123rem; height: 137rem; -webkit-animation: float-5 6.5s ease-in-out infinite; animation: float-5 6.5s ease-in-out infinite; -webkit-animation-delay: -2.2s; animation-delay: -2.2s; } .cases-images__wrapper:nth-child(6) { bottom: 329rem; right: -115rem; } .cases-images__wrapper:nth-child(6) img { width: 133rem; height: 202rem; -webkit-animation: float-6 8s ease-in-out infinite; animation: float-6 8s ease-in-out infinite; -webkit-animation-delay: -4s; animation-delay: -4s; } .cases-images__wrapper:nth-child(7) { bottom: 8rem; right: -49rem; } .cases-images__wrapper:nth-child(7) img { width: 118rem; height: 157rem; -webkit-animation: float-7 5.5s ease-in-out infinite; animation: float-7 5.5s ease-in-out infinite; -webkit-animation-delay: -1s; animation-delay: -1s; } .cases-images__wrapper:nth-child(8) { top: 305rem; right: -340rem; } .cases-images__wrapper:nth-child(8) img { width: 75rem; height: 83rem; -webkit-animation: float-8 7.5s ease-in-out infinite; animation: float-8 7.5s ease-in-out infinite; -webkit-animation-delay: -3.5s; animation-delay: -3.5s; } .cases-images__wrapper:nth-child(9) { top: 175rem; right: -660rem; } .cases-images__wrapper:nth-child(9) img { width: 115rem; height: 121rem; -webkit-animation: float-9 4.5s ease-in-out infinite; animation: float-9 4.5s ease-in-out infinite; -webkit-animation-delay: -2s; animation-delay: -2s; } .cases-images__wrapper:nth-child(10) { top: 485rem; right: -751rem; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .cases-images__wrapper:nth-child(10) img { width: 85rem; height: 78rem; -webkit-animation: float-10 6s ease-in-out infinite; animation: float-10 6s ease-in-out infinite; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .cases-body { max-width: 810rem; margin-left: auto; margin-right: 200rem; } .cases-body__view { display: none; } .cases-body__title { margin-bottom: clamp( 20rem, calc(20rem + 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); } .cases-body__subtext { font-family: "BebasNeue"; color: #fff; margin-bottom: clamp( 20rem, calc(20rem + 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); font-size: clamp( 32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem ); line-height: clamp( 32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem ); letter-spacing: clamp( 0.5rem, calc(0.5rem + 0.54 * ((100vw - 375rem) / (1200 - 375))), 1.04rem ); } .cases-body__text { font-size: clamp( 14rem, calc(14rem + 8 * ((100vw - 375rem) / (1200 - 375))), 22rem ); line-height: clamp( 20rem, calc(20rem + 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); color: #e6e6e6; } .cases-items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: clamp( 30rem, calc(30rem + 120 * ((100vw - 375rem) / (1200 - 375))), 150rem ); margin-left: 73rem; position: relative; max-width: 1478rem; z-index: 1; } .cases-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30rem; } .cases-item:nth-child(4n + 1) .cases-preview { clip-path: polygon(85% 0, 100% 15%, 100% 100%, 0 100%, 0 0); } .cases-item:nth-child(4n + 2) .cases-preview { clip-path: polygon(100% 0, 100% 85%, 85% 100%, 0 100%, 0 0); } .cases-item:nth-child(4n + 3) .cases-preview { clip-path: polygon(100% 0, 100% 100%, 15% 100%, 0 85%, 0 0); } .cases-item:nth-child(4n + 4) .cases-preview { clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%, 15% 0); } .cases-item:last-child .cases-titling__subline { display: none; } .cases-titling { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: clamp( 20rem, calc(20rem + 25 * ((100vw - 375rem) / (1200 - 375))), 45rem ); position: relative; max-width: 500rem; } .cases-titling__line { width: clamp( 20rem, calc(20rem + 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); min-width: clamp( 20rem, calc(20rem + 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); height: clamp(2rem, calc(2rem + 1 * ((100vw - 375rem) / (1200 - 375))), 3rem); background: #202020; margin-top: 20rem; } .cases-titling__title { font-family: "BebasNeue"; color: #fbfbfb; font-size: clamp( 32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem ); line-height: clamp( 32rem, calc(32rem + 18 * ((100vw - 375rem) / (1200 - 375))), 50rem ); letter-spacing: clamp( 1rem, calc(1rem + 1.6 * ((100vw - 375rem) / (1200 - 375))), 2.6rem ); } .cases-titling__text { color: #e6e6e6; font-size: clamp( 14rem, calc(14rem + 8 * ((100vw - 375rem) / (1200 - 375))), 22rem ); line-height: clamp( 20rem, calc(20rem + 16 * ((100vw - 375rem) / (1200 - 375))), 36rem ); } .cases-titling__subline { position: absolute; width: clamp(2rem, calc(2rem + 1 * ((100vw - 375rem) / (1200 - 375))), 3rem); height: clamp( 0rem, calc(0rem + 383 * ((100vw - 375rem) / (1200 - 375))), 383rem ); background: #202020; left: clamp( 100rem, calc(100rem + 290 * ((100vw - 375rem) / (1200 - 375))), 390rem ); bottom: clamp( -501rem, calc(-50rem - 451 * ((100vw - 375rem) / (1200 - 375))), -50rem ); } .cases-preview { width: 100%; max-width: 708rem; height: 560rem; display: block; } .cases-preview:hover .cases-preview__img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .cases-preview__img { width: 100%; height: 100%; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; -o-object-fit: cover; object-fit: cover; } .map__inner { position: relative; z-index: 1; padding: clamp( 60rem, calc(60rem + 140 * ((100vw - 375rem) / (1200 - 375))), 200rem ) 0 clamp(60rem, calc(60rem + 100 * ((100vw - 375rem) / (1200 - 375))), 160rem) 0; } .map__wrapper { max-width: 1440rem; margin-left: auto; margin-right: auto; } .map__title { margin-bottom: clamp( 30rem, calc(30rem + 40 * ((100vw - 375rem) / (1200 - 375))), 70rem ); } .map .lines__line:nth-child(1) { height: 100%; top: 0; left: 70rem; } .map .lines__line:nth-child(2) { height: 258rem; bottom: 56rem; left: 456rem; } .map .lines__line:nth-child(3) { height: 129rem; bottom: 56rem; left: calc(50% - 13.5rem); } .map .lines__line:nth-child(4) { height: 488rem; top: 77rem; right: 486rem; } .map .lines__line:nth-child(5) { height: 176rem; bottom: 56rem; right: 486rem; } .map .lines__line:nth-child(6) { height: 100%; top: 0; right: 70rem; } .map-images { height: clamp( 240rem, calc(240rem + 449 * ((100vw - 375rem) / (1200 - 375))), 689rem ); width: clamp( 345rem, calc(345rem + 721 * ((100vw - 375rem) / (1200 - 375))), 1066rem ); margin-left: auto; margin-right: auto; position: relative; } .map-images__img { position: absolute; width: 100%; height: 100%; inset: 0; -o-object-fit: contain; object-fit: contain; } .recalls__inner { position: relative; padding: 0 0 clamp(60rem, calc(60rem + 60 * ((100vw - 375rem) / (1200 - 375))), 120rem) 0; z-index: 1; } .recalls__wrapper { max-width: 1440rem; margin-left: auto; margin-right: auto; } .recalls .lines__line:nth-child(1) { height: 100%; top: 0; left: 70rem; } .recalls .lines__line:nth-child(2) { height: 100%; top: 0; right: 70rem; } .recalls-thumbs { margin-bottom: clamp( 30rem, calc(30rem + 40 * ((100vw - 375rem) / (1200 - 375))), 70rem ); } .recalls-thumbs .swiper-slide-active:hover .recalls-company__img { -webkit-transform: scale(1.75); -ms-transform: scale(1.75); transform: scale(1.75); } .recalls-thumbs .swiper-slide-active .recalls-company__img { -webkit-transform: scale(1.75); -ms-transform: scale(1.75); transform: scale(1.75); } .recalls-company { height: clamp( 60rem, calc(60rem + 20 * ((100vw - 375rem) / (1200 - 375))), 80rem ); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .recalls-company:hover .recalls-company__img { -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } .recalls-company__img { width: clamp( 120rem, calc(120rem + 40 * ((100vw - 375rem) / (1200 - 375))), 160rem ); height: clamp( 20rem, calc(20rem + 10 * ((100vw - 375rem) / (1200 - 375))), 30rem ); -o-object-fit: contain; object-fit: contain; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .recalls-slide { color: #e6e6e6; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .recalls-slide__inner { margin-bottom: clamp( 30rem, calc(30rem + 10 * ((100vw - 375rem) / (1200 - 375))), 40rem ); } .recalls-slide__text { text-align: center; font-size: clamp( 14rem, calc(14rem + 6 * ((100vw - 375rem) / (1200 - 375))), 20rem ); line-height: clamp( 20rem, calc(20rem + 12 * ((100vw - 375rem) / (1200 - 375))), 32rem ); margin-bottom: 10rem; } .recalls-slide__text:last-child { margin-bottom: unset; } .recalls-slide__reviewer { text-align: center; color: #fff; font-size: clamp( 16rem, calc(16rem + 10 * ((100vw - 375rem) / (1200 - 375))), 26rem ); line-height: clamp( 20rem, calc(20rem + 16 * ((100vw - 375rem) / (1200 - 375))), 36rem ); font-weight: 500; width: 100%; max-width: 464rem; padding: 12rem 30rem 10rem 30rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #2c58a4; } .navigation { border-left: 3rem solid #202020; background: #111; width: unset; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; padding: 75rem 0; z-index: 150; } .navigation__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 90rem; height: 100svh; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: width 0.3s; transition: width 0.3s; width: 120rem; } .navigation--active .navigation__inner { width: 280rem; } .navigation__wrapper { display: none; } .menu { width: 100%; } .menu-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } .menu-item { -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; writing-mode: sideways-lr; width: 100%; overflow: hidden; } .menu-item--active .menu-item__link { color: #fbfbfb; } .menu-item__link { color: rgba(251, 251, 251, 0.3); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 15rem 30rem; text-transform: uppercase; font-weight: 500; font-size: 14rem; line-height: 24rem; letter-spacing: 0.14rem; -webkit-transition: color 0.5s, -webkit-transform 0.5s; transition: color 0.5s, -webkit-transform 0.5s; transition: color 0.5s, transform 0.5s; transition: color 0.5s, transform 0.5s, -webkit-transform 0.5s; } .menu-item__link:hover { color: #fbfbfb; -webkit-transform: rotate(90deg) scale(1.25); -ms-transform: rotate(90deg) scale(1.25); transform: rotate(90deg) scale(1.25); } .last { width: 100%; position: relative; } .last__inner { height: auto; } .last--animated { height: 100svh; } .last--animated .last__inner { height: 100%; } .banner { position: relative; top: 0; left: 0; width: 100%; height: 100svh; overflow: hidden; z-index: 1; background: -webkit-gradient(linear, left top, left bottom, from(#fbfafa), to(#ffffff)); background: linear-gradient(180deg, #fbfafa 0%, #ffffff 100%); } .last--animated .banner { position: absolute; height: 100%; } .banner::after { content: ""; position: absolute; inset: 0; background: #060606; opacity: var(--banner-darkness, 0); pointer-events: none; z-index: 0; } .banner .container { height: 100%; } .banner__inner { position: relative; z-index: 1; height: 100%; } .banner__wrapper { width: 100%; max-width: 1440rem; margin-left: auto; margin-right: auto; height: 100%; min-height: 100vh; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .banner__title { font-size: clamp( 120rem, calc(120rem + 160 * ((100vw - 375rem) / (1200 - 375))), 280rem ); line-height: clamp( 120rem, calc(120rem + 160 * ((100vw - 375rem) / (1200 - 375))), 280rem ); letter-spacing: clamp( 0rem, calc(0rem + 8.4 * ((100vw - 375rem) / (1200 - 375))), 8.4rem ); font-family: "BebasNeue"; color: #000; text-align: center; position: relative; text-shadow: clamp(-16rem, calc(-8rem - 8 * ((100vw - 375rem) / (1200 - 375))), -8rem) clamp(-16rem, calc(-8rem - 8 * ((100vw - 375rem) / (1200 - 375))), -8rem) 0 #fff, clamp(8rem, calc(8rem + 8 * ((100vw - 375rem) / (1200 - 375))), 16rem) clamp(-16rem, calc(-8rem - 8 * ((100vw - 375rem) / (1200 - 375))), -8rem) 0 #fff, clamp(-16rem, calc(-8rem - 8 * ((100vw - 375rem) / (1200 - 375))), -8rem) clamp(8rem, calc(8rem + 8 * ((100vw - 375rem) / (1200 - 375))), 16rem) 0 #fff, clamp(8rem, calc(8rem + 8 * ((100vw - 375rem) / (1200 - 375))), 16rem) clamp(8rem, calc(8rem + 8 * ((100vw - 375rem) / (1200 - 375))), 16rem) 0 #fff; } .banner__img { left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); top: 50%; position: absolute; width: auto; height: clamp( 560rem, calc(560rem + 380 * ((100vw - 375rem) / (1200 - 375))), 940rem ); aspect-ratio: 1/1; max-height: calc( 100% - clamp(40rem, calc(40rem + 40 * ((100vw - 375rem) / (1200 - 375))), 80rem) ); pointer-events: none; } .banner__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .banner .lines__line { background: #f0f0f0; } .banner .lines__line:nth-child(1) { height: 100%; top: 0; left: 70rem; } .banner .lines__line:nth-child(2) { height: 371rem; top: 0; left: 459rem; } .banner .lines__line:nth-child(3) { height: 302rem; bottom: 171rem; left: 459rem; } .banner .lines__line:nth-child(4) { height: 100%; top: 0; left: calc(50% - 13.5rem); } .banner .lines__line:nth-child(5) { height: 100%; top: 0; right: 486rem; } .banner .lines__line:nth-child(6) { height: 100%; top: 0; right: 70rem; } .contact { position: relative; top: 0; left: 0; width: 100%; overflow: visible; z-index: 2; background: #060606; } .contact .lines__line:nth-child(5), .contact .lines__line:nth-child(6) { display: none; } .last--animated .contact { position: absolute; height: 100%; overflow: hidden; } .contact .container { height: 100%; } .contact__inner { position: relative; padding: clamp( 64rem, calc(64rem + 46 * ((100vw - 375rem) / (1200 - 375))), 110rem ) 0; z-index: 1; min-height: 100svh; height: auto; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contact__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; gap: 30rem; max-width: 1440rem; margin-left: auto; margin-right: auto; } .contact .lines__line { background: #202020; } .contact .lines__line:nth-child(1) { height: 100%; top: 0; left: 70rem; } .contact .lines__line:nth-child(2) { height: 371rem; top: 0; left: 459rem; } .contact .lines__line:nth-child(3) { height: 302rem; bottom: 171rem; left: 459rem; } .contact .lines__line:nth-child(4) { height: 100%; top: 0; left: calc(50% - 13.5rem); } .contact .lines__line:nth-child(5) { height: 100%; top: 0; right: 486rem; } .contact .lines__line:nth-child(6) { height: 100%; top: 0; right: 70rem; } .contact__form { width: 100%; max-width: 586rem; } .contact-body { max-width: 680rem; } .form__inner { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: clamp(24rem, calc(24rem + 8 * ((100vw - 375rem) / (1200 - 375))), 32rem); margin-bottom: clamp( 30rem, calc(30rem + 10 * ((100vw - 375rem) / (1200 - 375))), 40rem ); } .form__button { width: 100%; overflow: hidden; } .form__loader { position: absolute; inset: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10rem; color: #fff; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .form__loader-spinner { width: 18rem; height: 18rem; border: 2rem solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%; -webkit-animation: form-loader-spin 0.8s linear infinite; animation: form-loader-spin 0.8s linear infinite; } .form__loader-text { font-size: inherit; line-height: inherit; } .form--sending .form__button { cursor: wait; } .form--sending .form__button::before, .form--sending .form__button::after { opacity: 0; } .form--sending .form__loader { opacity: 1; } @-webkit-keyframes form-loader-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes form-loader-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .form-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; position: relative; } .form-box--error .form-box__input { border-left: 2rem solid #d14545; border-bottom: 2rem solid #d14545; } .form-box--error .form-box__textarea { border-left: 2rem solid #d14545; border-bottom: 2rem solid #d14545; } .form-box--error .custom-select__trigger { border-left: 2rem solid #d14545; border-bottom: 2rem solid #d14545; } .form-box--error .form-status { opacity: 1; pointer-events: all; } .form-box__label { color: #fbfbfb; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 19rem, calc(19rem + 5 * ((100vw - 375rem) / (1200 - 375))), 24rem ); font-weight: 500; display: inline-block; margin-bottom: clamp( 6rem, calc(6rem + 2 * ((100vw - 375rem) / (1200 - 375))), 8rem ); text-transform: uppercase; } .form-box__input { width: 100%; color: #fbfbfb; background: unset; border-left: 2rem solid #8b8b8b; border-bottom: 2rem solid #8b8b8b; padding: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ) 10rem; font-size: 16rem; line-height: 20rem; -webkit-transition: border 0.5s; transition: border 0.5s; } .form-box__input:hover { border-left: 2rem solid #fbfbfb; border-bottom: 2rem solid #fbfbfb; } .form-box__input:focus { border-left: 2rem solid #fbfbfb; border-bottom: 2rem solid #fbfbfb; } .form-box__input::-webkit-input-placeholder { color: #8b8b8b; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .form-box__input::-moz-placeholder { color: #8b8b8b; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .form-box__input:-ms-input-placeholder { color: #8b8b8b; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .form-box__input::-ms-input-placeholder { color: #8b8b8b; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .form-box__input::placeholder { color: #8b8b8b; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .form-box__inner { width: 100%; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: 16rem; } .form-box__textarea { height: 100rem; width: 100%; color: #fbfbfb; background: unset; border-left: 2rem solid #8b8b8b; border-bottom: 2rem solid #8b8b8b; padding: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ) 10rem; font-size: 16rem; line-height: 20rem; resize: unset; -webkit-transition: border 0.5s; transition: border 0.5s; } .form-box__textarea:hover { border-left: 2rem solid #fbfbfb; border-bottom: 2rem solid #fbfbfb; } .form-box__textarea:focus { border-left: 2rem solid #fbfbfb; border-bottom: 2rem solid #fbfbfb; } .form-box__textarea::-webkit-input-placeholder { color: #8b8b8b; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .form-box__textarea::-moz-placeholder { color: #8b8b8b; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .form-box__textarea:-ms-input-placeholder { color: #8b8b8b; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .form-box__textarea::-ms-input-placeholder { color: #8b8b8b; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .form-box__textarea::placeholder { color: #8b8b8b; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .form-status { position: absolute; bottom: -24rem; left: 0; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .form-status__text { color: #d14545; font-size: 16rem; line-height: 20rem; } .upload { position: relative; border: 1rem dashed #8b8b8b; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 12rem clamp(15rem, calc(15rem + 9 * ((100vw - 375rem) / (1200 - 375))), 24rem); height: 92rem; background: #060606; } .upload__file { position: absolute; width: 100%; height: 100%; inset: 0; opacity: 0; cursor: pointer; } .upload__label { color: #8b8b8b; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .upload__inner { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; inset: 0; width: 100%; padding: 12rem clamp(15rem, calc(15rem + 9 * ((100vw - 375rem) / (1200 - 375))), 24rem); height: 100%; } .upload-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; gap: 4rem; } .upload-item__icon { width: clamp( 32rem, calc(32rem + 16 * ((100vw - 375rem) / (1200 - 375))), 48rem ); height: clamp( 32rem, calc(32rem + 16 * ((100vw - 375rem) / (1200 - 375))), 48rem ); } .upload-item__icon svg { width: 100%; height: 100%; } .upload-item__name { color: #8b8b8b; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .custom-select { position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; } .custom-select__trigger { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ) 10rem; border-left: 2rem solid #8b8b8b; border-bottom: 2rem solid #8b8b8b; cursor: pointer; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ); color: rgba(255, 255, 255, 0.45); -webkit-transition: border-color 0.5s, color 0.5s; transition: border-color 0.5s, color 0.5s; gap: 24rem; } .custom-select__trigger:hover { border-left: 2rem solid #fbfbfb; border-bottom: 2rem solid #fbfbfb; } .custom-select__trigger:hover, .custom-select--open .custom-select__trigger { color: #fbfbfb; } .custom-select__trigger.has-value { color: #fbfbfb; } .custom-select__arrow { width: 20rem; min-width: 20rem; height: 20rem; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .custom-select--open .custom-select__trigger { border-left: 2rem solid #fbfbfb; border-bottom: 2rem solid #fbfbfb; } .custom-select--open .custom-select__arrow { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); opacity: 1; } .custom-select__dropdown { position: absolute; top: calc(100% + 4rem); left: 0; right: 0; background: #202020; border: 1rem solid #8b8b8b; z-index: 100; overflow: hidden; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .custom-select--open .custom-select__dropdown { opacity: 1; pointer-events: all; } .custom-select__option { padding: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ) 10rem; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ); color: #fafafa; cursor: pointer; -webkit-transition: background 0.15s, color 0.15s; transition: background 0.15s, color 0.15s; } .custom-select__option:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .custom-select__option.selected { color: #fff; background: rgba(255, 255, 255, 0.04); } .datepicker__dropdown { position: absolute; top: calc(100% + 4rem); left: 0; min-width: 300rem; background: #202020; border: 1rem solid #8b8b8b; z-index: 200; padding: 10rem; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; } .custom-select--open .datepicker__dropdown { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); pointer-events: all; } .datepicker__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 8rem; padding: 8rem 4rem; } .datepicker__month { font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 3 * ((100vw - 375rem) / (1200 - 375))), 19rem ); text-transform: uppercase; font-family: "BebasNeue"; color: #fff; } .datepicker__nav { cursor: pointer; width: 20rem; min-width: 20rem; height: 20rem; } .datepicker__nav svg { width: 100%; height: 100%; } .datepicker__grid { display: -ms-grid; display: grid; justify-items: center; -ms-grid-columns: (1fr) [7]; grid-template-columns: repeat(7, 1fr); } .datepicker__day-name { width: 40rem; height: 40rem; text-align: center; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 3 * ((100vw - 375rem) / (1200 - 375))), 19rem ); font-family: "BebasNeue"; color: #fbfbfb; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .datepicker__day { width: 40rem; height: 40rem; text-align: center; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 16rem, calc(16rem + 3 * ((100vw - 375rem) / (1200 - 375))), 19rem ); color: #fbfbfb; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; -webkit-transition: background 0.5s, color 0.5s; transition: background 0.5s, color 0.5s; } .datepicker__day:hover { background: #060606; } .datepicker__day.today { background: #2c58a4; } .datepicker__day.selected { background: #2c58a4; } .datepicker__day.other-month { color: rgba(250, 250, 250, 0.3); } .datepicker__day.other-month:hover { background: #060606; } .timepicker__dropdown { position: absolute; top: calc(100% + 4rem); left: 0; background: #202020; border: 1rem solid #8b8b8b; z-index: 200; padding: 24rem; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; min-width: 215rem; } .custom-select--open .timepicker__dropdown { opacity: 1; pointer-events: all; } .timepicker__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8rem; } .timepicker__colon { font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); color: #fff; } .timepicker__field { background: #060606; color: #fafafa; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); line-height: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ); text-align: center; width: 48rem; height: 40rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; outline: none; } .timepicker__field:focus { border-color: #1a6fff; } .timepicker__ampm { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 4rem; } .timepicker__ampm-btn { background: #060606; color: #fff; font-size: 16rem; line-height: 16rem; font-family: "BebasNeue"; width: 48rem; height: 32rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; cursor: pointer; -webkit-transition: background 0.5s, color 0.5s; transition: background 0.5s, color 0.5s; } .timepicker__ampm-btn.active { background: #2c58a4; } .timepicker__ampm-btn:hover:not(.active) { background: #2c58a4; } .timepicker__dropdown { width: 100%; } .timepicker__row { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .datepicker__dropdown { width: 100%; } .footer { background: #060606; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .footer .contact .lines__line:nth-child(6) { display: none; } .footer__inner { position: relative; z-index: 1; } .footer__wrapper { width: 100%; max-width: 1440rem; margin-left: auto; margin-right: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30rem; padding-bottom: clamp( 30rem, calc(30rem + 20 * ((100vw - 375rem) / (1200 - 375))), 50rem ); } .footer--policy .footer__wrapper { padding-top: clamp( 30rem, calc(30rem + 20 * ((100vw - 375rem) / (1200 - 375))), 50rem ); } .footer .lines__line { background: #202020; } .footer .lines__line:nth-child(1) { height: 100%; top: 0; left: 70rem; } .footer .lines__line:nth-child(2) { height: 371rem; top: 0; left: 459rem; opacity: 0; } .footer .lines__line:nth-child(3) { height: 302rem; bottom: 171rem; left: 459rem; } .footer .lines__line:nth-child(4) { height: 100%; top: 0; left: calc(50% - 13.5rem); } .footer .lines__line:nth-child(5) { height: 100%; top: 0; right: 486rem; } .footer .lines__line:nth-child(6) { height: 100%; top: 0; right: 70rem; } .footer-box:nth-child(1) { width: 100%; max-width: 500rem; } .footer-box:nth-child(2) { text-align: center; } .footer-box:nth-child(3) { text-align: right; width: 100%; max-width: 500rem; } .footer-box:nth-child(3) .socials-list { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .footer-box__title { font-family: "BebasNeue"; color: #fff; margin-bottom: 15rem; font-size: clamp( 24rem, calc(24rem + 8 * ((100vw - 375rem) / (1200 - 375))), 32rem ); line-height: clamp( 26rem, calc(26rem + 10 * ((100vw - 375rem) / (1200 - 375))), 36rem ); letter-spacing: clamp( 0.8rem, calc(0.8rem + 0.8 * ((100vw - 375rem) / (1200 - 375))), 1.6rem ); } .footer-box__text { color: #fafafa; font-size: clamp( 14rem, calc(14rem + 4 * ((100vw - 375rem) / (1200 - 375))), 18rem ); line-height: clamp( 20rem, calc(20rem + 10 * ((100vw - 375rem) / (1200 - 375))), 30rem ); } .footer-box__inner--legal { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 15rem; } .footer-box__link { color: #fff; font-size: clamp( 14rem, calc(14rem + 6 * ((100vw - 375rem) / (1200 - 375))), 20rem ); line-height: clamp( 20rem, calc(20rem + 10 * ((100vw - 375rem) / (1200 - 375))), 30rem ); -webkit-transition: color 0.3s; -webkit-transition: color 0.3s; transition: color 0.3s; } .footer-box__link:hover { color: #2c58a4; } .socials-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: clamp( 20rem, calc(20rem + 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); } .socials-item__link { display: block; width: clamp( 32rem, calc(32rem + 10 * ((100vw - 375rem) / (1200 - 375))), 42rem ); min-width: clamp( 32rem, calc(32rem + 10 * ((100vw - 375rem) / (1200 - 375))), 42rem ); height: clamp( 32rem, calc(32rem + 10 * ((100vw - 375rem) / (1200 - 375))), 42rem ); } .socials-item__link:hover img { -webkit-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25); } .socials-item__link:hover svg { -webkit-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25); } .socials-item__link img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .socials-item__link svg { border-radius: 100%; overflow: hidden; display: block; width: 100%; height: 100%; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .form-box--contact-schedule { display: none; } .projectheader__inner { padding-top: clamp( 120rem, calc(120rem + 250 * ((100vw - 375rem) / (1200 - 375))), 370rem ); padding-bottom: clamp( 60rem, calc(60rem + 110 * ((100vw - 375rem) / (1200 - 375))), 170rem ); position: relative; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 1; min-height: 1200rem; } .projectheader__wrapper { max-width: 1440rem; margin-left: auto; margin-right: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 30rem; } .projectheader .lines__line:nth-child(1) { height: calc(100% - 210rem); bottom: 0; left: 70rem; } .projectheader .lines__line:nth-child(2) { height: 225rem; top: -14rem; left: 459rem; } .projectheader .lines__line:nth-child(3) { height: 156rem; bottom: 14rem; left: 459rem; } .projectheader .lines__line:nth-child(4) { height: 566rem; top: -14rem; left: calc(50% - 32rem); } .projectheader .lines__line:nth-child(5) { height: 242rem; top: -14rem; right: 486rem; } .projectheader .lines__line:nth-child(6) { height: 242rem; bottom: -105rem; right: 486rem; } .projectheader .lines__line:nth-child(7) { height: 100%; bottom: 0; right: 70rem; } .projectheader-body { max-width: 700rem; width: 100%; } .projectheader-body__scroll-mouse { margin-left: clamp( 0rem, calc(0rem + 250 * ((100vw - 375rem) / (1200 - 375))), 250rem ); } .projectheader-body__img { display: none; } .projectheader-titling { margin-bottom: clamp( 30rem, calc(30rem + 50 * ((100vw - 375rem) / (1200 - 375))), 80rem ); } .projectheader-titling__title { margin-bottom: clamp( 10rem, calc(10rem + 10 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .projectheader-titling__text { color: #e6e6e6; font-size: clamp( 16rem, calc(16rem + 6 * ((100vw - 375rem) / (1200 - 375))), 22rem ); line-height: clamp( 20rem, calc(20rem + 16 * ((100vw - 375rem) / (1200 - 375))), 36rem ); } .projectheader-brief { margin-bottom: clamp( 30rem, calc(30rem + 40 * ((100vw - 375rem) / (1200 - 375))), 70rem ); } .projectheader-brief__title { font-family: "BebasNeue"; color: #f0f0f0; margin-bottom: clamp( 15rem, calc(15rem + 5 * ((100vw - 375rem) / (1200 - 375))), 20rem ); font-size: clamp( 32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem ); line-height: clamp( 22rem, calc(22rem + 31 * ((100vw - 375rem) / (1200 - 375))), 53rem ); position: relative; } .projectheader-brief__title span { width: 40rem; height: clamp(2rem, calc(2rem + 1 * ((100vw - 375rem) / (1200 - 375))), 3rem); background: #20488c; position: absolute; left: -70rem; top: 20rem; } .projectheader-brief__text { color: #f0f0f0; font-size: clamp( 14rem, calc(14rem + 6 * ((100vw - 375rem) / (1200 - 375))), 20rem ); line-height: clamp( 20rem, calc(20rem + 12 * ((100vw - 375rem) / (1200 - 375))), 32rem ); max-width: 693rem; } .projectheader-img { width: 100%; max-width: 708rem; height: clamp( 240rem, calc(240rem + 320 * ((100vw - 375rem) / (1200 - 375))), 560rem ); clip-path: polygon(100% 0, 100% 85%, 85% 100%, 0 100%, 0 0); } .projectheader-img__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .projectpage { margin-top: clamp( -100rem, calc(0rem - 100 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .projectpage__inner { position: relative; z-index: 1; padding-top: clamp( 60rem, calc(60rem + 60 * ((100vw - 375rem) / (1200 - 375))), 120rem ); } .projectpage__wrapper { max-width: 1440rem; margin-left: auto; margin-right: auto; } .projectpage .lines__line:nth-child(1) { height: 100%; bottom: 0; left: 70rem; } .projectpage .lines__line:nth-child(2) { height: 100%; bottom: 0; right: 70rem; } .projectpage__project-titling { margin-bottom: clamp( 30rem, calc(30rem + 40 * ((100vw - 375rem) / (1200 - 375))), 70rem ); } .projectpage-img { position: relative; z-index: 2; width: 100%; max-width: 1243rem; margin-left: auto; margin-right: auto; height: auto; } .projectpage-img__image { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: top center; object-position: top center; } .projectpages__inner { padding-top: clamp( 60rem, calc(60rem + 90 * ((100vw - 375rem) / (1200 - 375))), 150rem ); position: relative; z-index: 1; } .projectpages__wrapper { max-width: 1440rem; margin-left: auto; margin-right: auto; } .projectpages .lines__line:nth-child(1) { height: 100%; bottom: 0; left: 70rem; } .projectpages .lines__line:nth-child(2) { height: 100%; bottom: 0; right: 70rem; } .projectpages__project-titling { margin-bottom: clamp( 30rem, calc(30rem + 50 * ((100vw - 375rem) / (1200 - 375))), 80rem ); } .projectpages-swiper { padding-left: clamp( 61.5rem, calc(61.5rem + 61.5 * ((100vw - 375rem) / (1200 - 375))), 123rem ); padding-right: clamp( 61.5rem, calc(61.5rem + 61.5 * ((100vw - 375rem) / (1200 - 375))), 123rem ); } .projectpages-swiper .arrow { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; } .projectpages-swiper .arrow:hover { -webkit-transform: translateY(-50%) scale(1.25); -ms-transform: translateY(-50%) scale(1.25); transform: translateY(-50%) scale(1.25); } .projectpages-swiper .arrow--prev { left: 0; } .projectpages-swiper .arrow--next { right: 0; } .projectpages-img { width: 100%; max-width: 1195rem; margin-left: auto; margin-right: auto; height: auto; } .projectpages-img__image { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: top center; object-position: top center; } .projectmobile__inner { padding: clamp( 60rem, calc(60rem + 90 * ((100vw - 375rem) / (1200 - 375))), 150rem ) 0; position: relative; z-index: 1; } .projectmobile .lines__line:nth-child(1) { height: 100%; bottom: 0; left: 70rem; } .projectmobile .lines__line:nth-child(2) { height: 100%; bottom: 0; right: 70rem; } .projectmobile__wrapper { max-width: 1440rem; margin-left: auto; margin-right: auto; } .projectmobile__wrap { position: relative; padding-left: clamp( 61.5rem, calc(61.5rem + 88.5 * ((100vw - 375rem) / (1200 - 375))), 150rem ); padding-right: clamp( 61.5rem, calc(61.5rem + 88.5 * ((100vw - 375rem) / (1200 - 375))), 150rem ); } .projectmobile__wrap .arrow { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); position: absolute; } .projectmobile__wrap .arrow:hover { -webkit-transform: translateY(-50%) scale(1.25); -ms-transform: translateY(-50%) scale(1.25); transform: translateY(-50%) scale(1.25); } .projectmobile__wrap .arrow--prev { left: 0; } .projectmobile__wrap .arrow--next { right: 0; } .projectmobile__project-titling { margin-bottom: clamp( 30rem, calc(30rem + 30 * ((100vw - 375rem) / (1200 - 375))), 60rem ); } .projectmobile-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .projectmobile-img { width: 100%; height: clamp( 360rem, calc(360rem + 332 * ((100vw - 375rem) / (1200 - 375))), 692rem ); position: relative; width: clamp( 178rem, calc(178rem + 162 * ((100vw - 375rem) / (1200 - 375))), 340rem ); } .projectmobile-img__phone { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .projectmobile-img__image { position: absolute; width: calc( 100% - clamp(12rem, calc(12rem + 12 * ((100vw - 375rem) / (1200 - 375))), 24rem) ); height: calc( 100% - clamp(10rem, calc(10rem + 10 * ((100vw - 375rem) / (1200 - 375))), 20rem) ); left: clamp(6rem, calc(6rem + 6 * ((100vw - 375rem) / (1200 - 375))), 12rem); right: clamp(6rem, calc(6rem + 6 * ((100vw - 375rem) / (1200 - 375))), 12rem); top: clamp(5rem, calc(5rem + 5 * ((100vw - 375rem) / (1200 - 375))), 10rem); border-radius: clamp( 16rem, calc(16rem + 10 * ((100vw - 375rem) / (1200 - 375))), 26rem ); bottom: clamp( 5rem, calc(5rem + 5 * ((100vw - 375rem) / (1200 - 375))), 10rem ); -o-object-fit: contain; object-fit: contain; } .conclusion { overflow: hidden; position: relative; } .conclusion__background { position: absolute; width: 100%; height: 100%; inset: 0; background: #2c58a4; } .conclusion__inner { padding: clamp( 60rem, calc(60rem + 20 * ((100vw - 375rem) / (1200 - 375))), 80rem ) 0; position: relative; z-index: 1; } .conclusion__wrapper { max-width: 1440rem; margin-left: auto; margin-right: auto; } .conclusion .lines__line { background: #20488c; } .conclusion .lines__line:nth-child(1) { height: 100%; bottom: 0; left: 70rem; } .conclusion .lines__line:nth-child(2) { height: 100%; bottom: 0; right: 70rem; } .reviews__inner { position: relative; padding-top: clamp( 60rem, calc(60rem + 90 * ((100vw - 375rem) / (1200 - 375))), 150rem ); z-index: 1; } .reviews__wrapper { max-width: 1440rem; margin-left: auto; margin-right: auto; position: relative; } .reviews__wrapper .arrow { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .reviews__wrapper .arrow:hover { -webkit-transform: translateY(-50%) scale(1.25); -ms-transform: translateY(-50%) scale(1.25); transform: translateY(-50%) scale(1.25); } .reviews .lines__line { height: 100%; bottom: 0; right: 70rem; } .reviews-swiper { margin-bottom: clamp( 60rem, calc(60rem + 90 * ((100vw - 375rem) / (1200 - 375))), 150rem ); } .review { padding-right: clamp( 50rem, calc(50rem + 120 * ((100vw - 375rem) / (1200 - 375))), 170rem ); } .review__inner { margin-bottom: 30rem; } .review__text { color: #e6e6e6; font-size: clamp( 14rem, calc(14rem + 6 * ((100vw - 375rem) / (1200 - 375))), 20rem ); line-height: clamp( 20rem, calc(20rem + 12 * ((100vw - 375rem) / (1200 - 375))), 32rem ); margin-bottom: 10rem; } .review__text:last-child { margin-bottom: unset; } .review__reviewer { text-align: center; color: #fff; font-size: clamp( 16rem, calc(16rem + 10 * ((100vw - 375rem) / (1200 - 375))), 26rem ); line-height: clamp( 20rem, calc(20rem + 16 * ((100vw - 375rem) / (1200 - 375))), 36rem ); font-weight: 500; width: 100%; max-width: 464rem; padding: 12rem 30rem 10rem 30rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #2c58a4; } .review-img { margin-bottom: clamp( 30rem, calc(30rem + 20 * ((100vw - 375rem) / (1200 - 375))), 50rem ); width: clamp( 200rem, calc(200rem + 100 * ((100vw - 375rem) / (1200 - 375))), 300rem ); height: clamp( 50rem, calc(50rem + 31 * ((100vw - 375rem) / (1200 - 375))), 81rem ); } .review-img__image { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .pipeline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp( 30rem, calc(30rem + 25 * ((100vw - 375rem) / (1200 - 375))), 55rem ); position: relative; padding: clamp( 20rem, calc(20rem + 24 * ((100vw - 375rem) / (1200 - 375))), 44rem ) clamp(15rem, calc(15rem + 35 * ((100vw - 375rem) / (1200 - 375))), 50rem) clamp(20rem, calc(20rem + 24 * ((100vw - 375rem) / (1200 - 375))), 44rem) 0; width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: 1200rem; } .pipeline__background { width: calc(100% + 290rem); height: 100%; left: clamp( -400rem, calc(-400rem + 110 * ((100vw - 375rem) / (1200 - 375))), -290rem ); position: absolute; background: #2c58a4; top: 0; z-index: -1; } .pipeline__title { color: #f0f0f0; font-size: clamp( 24rem, calc(24rem + 38 * ((100vw - 375rem) / (1200 - 375))), 62rem ); line-height: clamp( 30rem, calc(30rem + 23 * ((100vw - 375rem) / (1200 - 375))), 53rem ); letter-spacing: clamp( 0.6rem, calc(0.6rem + 0.64 * ((100vw - 375rem) / (1200 - 375))), 1.24rem ); font-family: "BebasNeue"; position: relative; } .pipeline__title span { width: 40rem; height: clamp(2rem, calc(2rem + 1 * ((100vw - 375rem) / (1200 - 375))), 3rem); background: #f0f0f0; position: absolute; left: -70rem; top: 20rem; } .pipeline__link { font-size: clamp( 16rem, calc(16rem + 26 * ((100vw - 375rem) / (1200 - 375))), 42rem ); line-height: clamp( 20rem, calc(20rem + 30 * ((100vw - 375rem) / (1200 - 375))), 50rem ); letter-spacing: 0.84rem; font-family: "BebasNeue"; } .pipeline__link:hover svg path { fill: #fff; } .pipeline__link::before, .pipeline__link::after { padding: clamp( 15rem, calc(15rem + 10 * ((100vw - 375rem) / (1200 - 375))), 25rem ) clamp(30rem, calc(30rem + 70 * ((100vw - 375rem) / (1200 - 375))), 100rem) clamp(10rem, calc(10rem + 10 * ((100vw - 375rem) / (1200 - 375))), 20rem) clamp(15rem, calc(15rem + 25 * ((100vw - 375rem) / (1200 - 375))), 40rem); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp( 10rem, calc(10rem + 10 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .pipeline__link svg { position: absolute; z-index: 1; right: clamp( 10rem, calc(10rem + 30 * ((100vw - 375rem) / (1200 - 375))), 40rem ); top: 50%; -webkit-transform: translateY(-35%); -ms-transform: translateY(-35%); transform: translateY(-35%); width: clamp( 14rem, calc(14rem + 24 * ((100vw - 375rem) / (1200 - 375))), 38rem ); min-width: clamp( 14rem, calc(14rem + 24 * ((100vw - 375rem) / (1200 - 375))), 38rem ); height: clamp( 14rem, calc(14rem + 24 * ((100vw - 375rem) / (1200 - 375))), 38rem ); margin-top: clamp( -6rem, calc(-3rem - 3 * ((100vw - 375rem) / (1200 - 375))), -3rem ); } .pipeline__link svg path { -webkit-transition: fill 0.3s; transition: fill 0.3s; } .headline--design .headline-view { width: 571rem; height: 999rem; top: -175rem; right: -17rem; } .headline--development .headline-view { position: absolute; right: -100rem; width: 712rem; height: 932rem; top: -84rem; } .headline--development .headline-images__wrapper:nth-child(1) { top: 356rem; left: 49rem; } .headline--development .headline-images__wrapper:nth-child(1) img { width: 138rem; height: 157rem; -webkit-animation: float-1 5.5s ease-in-out infinite; animation: float-1 5.5s ease-in-out infinite; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .headline--development .headline-images__wrapper:nth-child(2) { -webkit-transform: rotate(41deg); -ms-transform: rotate(41deg); transform: rotate(41deg); bottom: 22rem; left: -60rem; } .headline--development .headline-images__wrapper:nth-child(2) img { width: 107rem; height: 105rem; -webkit-animation: float-2 6s ease-in-out infinite; animation: float-2 6s ease-in-out infinite; -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } .headline--brand .headline-view { position: absolute; right: 0; width: 628rem; height: 941rem; top: -87rem; } .headline--brand .headline-images__wrapper:nth-child(1) { bottom: 322rem; left: 42rem; } .headline--brand .headline-images__wrapper:nth-child(1) img { width: 72rem; height: 87rem; -webkit-animation: float-1 5.5s ease-in-out infinite; animation: float-1 5.5s ease-in-out infinite; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .headline--brand .headline-images__wrapper:nth-child(2) { top: 0; left: 11rem; } .headline--brand .headline-images__wrapper:nth-child(2) img { width: 85rem; height: 101rem; -webkit-animation: float-2 6s ease-in-out infinite; animation: float-2 6s ease-in-out infinite; -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } .headline--brand .headline-images__wrapper:nth-child(3) { top: 85rem; right: -120rem; } .headline--brand .headline-images__wrapper:nth-child(3) img { width: 137rem; height: 148rem; -webkit-animation: float-3 7s ease-in-out infinite; animation: float-3 7s ease-in-out infinite; -webkit-animation-delay: -3s; animation-delay: -3s; } .headline--brand .headline-images__wrapper:nth-child(4) { -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); transform: rotate(35deg); bottom: 283rem; right: 90rem; } .headline--brand .headline-images__wrapper:nth-child(4) img { width: 85rem; height: 100rem; -webkit-animation: float-4 5s ease-in-out infinite; animation: float-4 5s ease-in-out infinite; -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .headline--marketing .headline-view { position: absolute; right: 60rem; width: 586rem; height: 983rem; top: -117rem; } .headline--marketing .headline-images__wrapper:nth-child(1) { bottom: 109rem; left: 32rem; } .headline--marketing .headline-images__wrapper:nth-child(1) img { width: 74rem; height: 80rem; -webkit-animation: float-1 5.5s ease-in-out infinite; animation: float-1 5.5s ease-in-out infinite; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .headline--marketing .headline-images__wrapper:nth-child(2) { top: -14rem; left: -25rem; } .headline--marketing .headline-images__wrapper:nth-child(2) img { width: 152rem; height: 106rem; -webkit-animation: float-2 6s ease-in-out infinite; animation: float-2 6s ease-in-out infinite; -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } .headline--marketing .headline-images__wrapper:nth-child(3) { top: 45rem; right: -135rem; } .headline--marketing .headline-images__wrapper:nth-child(3) img { width: 147rem; height: 131rem; -webkit-animation: float-3 7s ease-in-out infinite; animation: float-3 7s ease-in-out infinite; -webkit-animation-delay: -3s; animation-delay: -3s; } .headline--marketing .headline-images__wrapper:nth-child(4) { -webkit-transform: rotate(51deg); -ms-transform: rotate(51deg); transform: rotate(51deg); top: 125rem; right: -160rem; } .headline--marketing .headline-images__wrapper:nth-child(4) img { width: 113rem; height: 126rem; -webkit-animation: float-4 5s ease-in-out infinite; animation: float-4 5s ease-in-out infinite; -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .headline--marketing .headline-images__wrapper:nth-child(5) { bottom: 18rem; right: -40rem; } .headline--marketing .headline-images__wrapper:nth-child(5) img { width: 108rem; height: 144rem; -webkit-animation: float-5 6.5s ease-in-out infinite; animation: float-5 6.5s ease-in-out infinite; -webkit-animation-delay: -2.2s; animation-delay: -2.2s; } .headline__inner { position: relative; z-index: 1; padding: clamp( 120rem, calc(120rem + 150 * ((100vw - 375rem) / (1200 - 375))), 270rem ) 0 clamp(60rem, calc(60rem + 60 * ((100vw - 375rem) / (1200 - 375))), 120rem) 0; } .headline__wrapper { max-width: 1440rem; margin-left: auto; margin-right: auto; position: relative; } .headline .lines__line:nth-child(1) { height: calc(100svh - 225rem); bottom: 0; left: 70rem; } .headline .lines__line:nth-child(2) { height: 225rem; top: 0; left: 459rem; } .headline .lines__line:nth-child(3) { height: 96rem; bottom: 162rem; left: 459rem; } .headline .lines__line:nth-child(4) { height: 103rem; background: #20488c; bottom: 0; left: 459rem; } .headline .lines__line:nth-child(5) { height: 566rem; top: 0; left: calc(50% - 13.5rem); } .headline .lines__line:nth-child(6) { height: 242rem; top: 0; right: 486rem; } .headline .lines__line:nth-child(7) { height: 242rem; bottom: -20rem; right: 486rem; } .headline-body { max-width: 970rem; } .headline-body__scroll-mouse { margin-left: 250rem; } .headline-body__view { display: none; } .headline-titling { margin-bottom: 140rem; } .headline-titling__title { margin-bottom: 20rem; } .headline-titling__subtext { margin-bottom: clamp( 30rem, calc(30rem + 10 * ((100vw - 375rem) / (1200 - 375))), 40rem ); color: #2c58a4; font-size: clamp( 16rem, calc(16rem + 10 * ((100vw - 375rem) / (1200 - 375))), 26rem ); line-height: clamp( 20rem, calc(20rem + 16 * ((100vw - 375rem) / (1200 - 375))), 36rem ); font-weight: 700rem; position: relative; } .headline-titling__subtext span { width: 40rem; height: clamp(2rem, calc(2rem + 1 * ((100vw - 375rem) / (1200 - 375))), 3rem); background: #20488c; position: absolute; left: -70rem; top: 16rem; } .headline-titling__inner { max-width: 830rem; } .headline-titling__text { margin-bottom: clamp( 10rem, calc(10rem + 20 * ((100vw - 375rem) / (1200 - 375))), 30rem ); color: #f0f0f0; font-size: clamp( 14rem, calc(14rem + 6 * ((100vw - 375rem) / (1200 - 375))), 20rem ); line-height: clamp( 20rem, calc(20rem + 12 * ((100vw - 375rem) / (1200 - 375))), 32rem ); } .headline-titling__text:last-child { margin-bottom: unset; } .headline-view { position: absolute; pointer-events: none; } .headline-view__img { width: 100%; height: 100%; -webkit-filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); } .headline-view__img img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .headline-images__wrapper { position: absolute; } .headline-images img { -o-object-fit: contain; object-fit: contain; } .topbar__inner { position: relative; z-index: 1; } .topbar__wrapper { max-width: 1440rem; margin-left: auto; margin-right: auto; } .topbar .lines__line { background: #20488c; height: 100%; top: 0; left: 70rem; } .topbar-titling { max-width: 1048rem; padding: clamp( 0rem, calc(0rem + 70 * ((100vw - 375rem) / (1200 - 375))), 70rem ) clamp(30rem, calc(30rem + 50 * ((100vw - 375rem) / (1200 - 375))), 80rem) clamp(30rem, calc(30rem + 30 * ((100vw - 375rem) / (1200 - 375))), 60rem) 0; position: relative; } .topbar-titling__background { width: calc(100% + 240rem); top: 0; bottom: 0; height: 100%; left: clamp( -400rem, calc(-400rem + 160 * ((100vw - 375rem) / (1200 - 375))), -240rem ); background: #2c58a4; z-index: -1; position: absolute; } .topbar-titling__title { font-family: "BebasNeue"; color: #f0f0f0; margin-bottom: clamp( 15rem, calc(15rem + 5 * ((100vw - 375rem) / (1200 - 375))), 20rem ); font-size: clamp( 32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem ); line-height: clamp( 32rem, calc(32rem + 21 * ((100vw - 375rem) / (1200 - 375))), 53rem ); position: relative; } .topbar-titling__title span { width: clamp( 20rem, calc(20rem + 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); height: clamp(2rem, calc(2rem + 1 * ((100vw - 375rem) / (1200 - 375))), 3rem); background: #f0f0f0; position: absolute; left: clamp( -70rem, calc(-30rem - 40 * ((100vw - 375rem) / (1200 - 375))), -30rem ); top: 20rem; } .topbar-titling__text { color: #f0f0f0; font-size: clamp( 14rem, calc(14rem + 6 * ((100vw - 375rem) / (1200 - 375))), 20rem ); line-height: clamp( 20rem, calc(20rem + 12 * ((100vw - 375rem) / (1200 - 375))), 32rem ); } .topbar-images { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: clamp( 15rem, calc(15rem + 10 * ((100vw - 375rem) / (1200 - 375))), 25rem ); position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 120rem; } .topbar-images__main { width: clamp( 100rem, calc(100rem + 120 * ((100vw - 375rem) / (1200 - 375))), 220rem ); min-width: clamp( 100rem, calc(100rem + 120 * ((100vw - 375rem) / (1200 - 375))), 220rem ); height: clamp( 100rem, calc(100rem + 120 * ((100vw - 375rem) / (1200 - 375))), 220rem ); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); } .topbar-images__main img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .topbar-images__inner { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: clamp(8rem, calc(8rem + 32 * ((100vw - 375rem) / (1200 - 375))), 40rem); } .topbar-images__img { width: clamp( 50rem, calc(50rem + 50 * ((100vw - 375rem) / (1200 - 375))), 100rem ); min-width: clamp( 50rem, calc(50rem + 50 * ((100vw - 375rem) / (1200 - 375))), 100rem ); height: clamp( 50rem, calc(50rem + 50 * ((100vw - 375rem) / (1200 - 375))), 100rem ); -o-object-fit: contain; object-fit: contain; } .topbar-titling__images { display: none; } .steps__inner { padding: clamp( 60rem, calc(60rem + 90 * ((100vw - 375rem) / (1200 - 375))), 150rem ) 0 clamp(60rem, calc(60rem + 70 * ((100vw - 375rem) / (1200 - 375))), 130rem) 0; } .steps__wrapper { max-width: 1440rem; margin-left: auto; margin-right: auto; } .steps-items { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: clamp( 30rem, calc(30rem + 10 * ((100vw - 375rem) / (1200 - 375))), 40rem ); } .step { max-width: clamp( 375rem, calc(375rem + 695 * ((100vw - 375rem) / (1200 - 375))), 1070rem ); position: relative; padding-right: clamp( 25rem, calc(25rem + 215 * ((100vw - 375rem) / (1200 - 375))), 240rem ); } .step:nth-child(even) { margin-left: auto; text-align: right; padding-right: unset; padding-left: clamp( 25rem, calc(25rem + 215 * ((100vw - 375rem) / (1200 - 375))), 240rem ); } .step:nth-child(even) .step-titling { margin-left: auto; } .step:nth-child(even) .step-titling__line { left: unset; right: clamp( -70rem, calc(-30rem - 40 * ((100vw - 375rem) / (1200 - 375))), -30rem ); } .step:nth-child(even) .step-decor { right: unset; left: clamp( -160rem, calc(0rem - 160 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .step:nth-child(even) .step-decor__line:nth-child(2) { right: unset; left: 0; } .step__text { color: #e6e6e6; font-size: clamp( 14rem, calc(14rem + 8 * ((100vw - 375rem) / (1200 - 375))), 22rem ); line-height: clamp( 20rem, calc(20rem + 16 * ((100vw - 375rem) / (1200 - 375))), 36rem ); } .step-titling { max-width: clamp( 250rem, calc(250rem + 580 * ((100vw - 375rem) / (1200 - 375))), 830rem ); margin-bottom: clamp( 20rem, calc(20rem + 10 * ((100vw - 375rem) / (1200 - 375))), 30rem ); position: relative; } .step-titling__line { position: absolute; width: clamp( 20rem, calc(20rem + 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); height: clamp(2rem, calc(2rem + 1 * ((100vw - 375rem) / (1200 - 375))), 3rem); background: #20488c; left: clamp( -70rem, calc(-30rem - 40 * ((100vw - 375rem) / (1200 - 375))), -30rem ); top: 50%; } .step-titling__title { color: #fff; font-family: "BebasNeue"; font-size: clamp( 32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem ); line-height: clamp( 36rem, calc(36rem + 24 * ((100vw - 375rem) / (1200 - 375))), 60rem ); letter-spacing: clamp( 0.5rem, calc(0.5rem + 0.54 * ((100vw - 375rem) / (1200 - 375))), 1.04rem ); } .step-titling__title span { color: #2c58a4; } .step-decor { position: absolute; width: clamp( 75rem, calc(75rem + 107 * ((100vw - 375rem) / (1200 - 375))), 182rem ); height: clamp( 75rem, calc(75rem + 110 * ((100vw - 375rem) / (1200 - 375))), 185rem ); right: clamp( -160rem, calc(0rem - 160 * ((100vw - 375rem) / (1200 - 375))), 0rem ); top: 78rem; } .step-decor__line { background: #202020; position: absolute; } .step-decor__line:nth-child(1) { width: 100%; height: clamp(2rem, calc(2rem + 1 * ((100vw - 375rem) / (1200 - 375))), 3rem); top: 0; left: 0; right: 0; } .step-decor__line:nth-child(2) { right: 0; bottom: 0; height: 100%; width: clamp(2rem, calc(2rem + 1 * ((100vw - 375rem) / (1200 - 375))), 3rem); } .page-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); z-index: 100; pointer-events: none; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s ease, visibility 0.5s ease; transition: opacity 0.5s ease, visibility 0.5s ease; } .page-bg--active { opacity: 1; visibility: visible; pointer-events: auto; } .page-bg--disable { opacity: 0; visibility: hidden; pointer-events: none; } .connect { width: 100%; position: relative; padding: clamp( 76rem, calc(76rem + 16 * ((100vw - 375rem) / (1200 - 375))), 92rem ) clamp(15rem, calc(15rem + 81 * ((100vw - 375rem) / (1200 - 375))), 96rem) clamp(24rem, calc(24rem + 68 * ((100vw - 375rem) / (1200 - 375))), 92rem) clamp(15rem, calc(15rem + 81 * ((100vw - 375rem) / (1200 - 375))), 96rem); background: #060606; z-index: 1; } .connect__lines { display: none; } .connect__close { position: absolute; width: 48rem; height: 48rem; top: clamp( 15rem, calc(15rem + 17 * ((100vw - 375rem) / (1200 - 375))), 32rem ); right: clamp( 15rem, calc(15rem + 17 * ((100vw - 375rem) / (1200 - 375))), 32rem ); cursor: pointer; } .connect__close svg { width: 100%; height: 100%; } .connect__form { margin-bottom: clamp( 30rem, calc(30rem + 10 * ((100vw - 375rem) / (1200 - 375))), 40rem ); } .privacy-notice { color: rgba(250, 250, 250, 0.68); font-size: clamp( 12rem, calc(12rem + 2 * ((100vw - 375rem) / (1200 - 375))), 14rem ); line-height: 1.45; } .privacy-notice__link { color: #fff; -webkit-transition: color 0.3s ease, -webkit-text-decoration-color 0.3s ease; -webkit-transition: color 0.3s ease, text-decoration-color 0.3s ease; transition: color 0.3s ease, text-decoration-color 0.3s ease; } .privacy-notice__link:hover { color: #2c58a4; } .form__privacy { margin-top: 16rem; } .connect__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24rem; } .connect__privacy { width: 100%; max-width: 400rem; } .connect__footer .connect__socials { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .connect__footer .socials-list { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .policy-page { min-height: 100svh; padding: clamp( 170rem, calc(170rem + 110 * ((100vw - 375rem) / (1200 - 375))), 280rem ) 0 clamp( 70rem, calc(70rem + 90 * ((100vw - 375rem) / (1200 - 375))), 160rem ); color: #fff; background: #060606; } .policy-page__section, .policy-page__section .container { width: 100%; } .policy-page__inner { width: 100%; max-width: 920rem; margin: 0 auto; position: relative; z-index: 1; } .policy-page__title { margin-bottom: clamp( 28rem, calc(28rem + 24 * ((100vw - 375rem) / (1200 - 375))), 52rem ); color: #fff; font-family: "BebasNeue"; font-size: clamp( 46rem, calc(46rem + 42 * ((100vw - 375rem) / (1200 - 375))), 88rem ); line-height: 0.95; letter-spacing: 0.03em; } .policy-page__content { color: rgba(255, 255, 255, 0.85); font-size: clamp( 15rem, calc(15rem + 3 * ((100vw - 375rem) / (1200 - 375))), 18rem ); line-height: 1.6; } .policy-page__content > * + * { margin-top: 20rem; } .policy-page__content h2, .policy-page__content h3, .policy-page__content h4 { color: #fff; font-family: "BebasNeue"; font-size: clamp( 28rem, calc(28rem + 12 * ((100vw - 375rem) / (1200 - 375))), 40rem ); line-height: 1; letter-spacing: 0.03em; } .policy-page__content ul, .policy-page__content ol { padding-left: 24rem; } .policy-page__content ul li { list-style: disc; } .policy-page__content ol li { list-style: decimal; } .policy-page__content li + li { margin-top: 8rem; } .policy-page__content a { color: #fff; text-decoration: underline; text-decoration-color: #2c58a4; text-decoration-thickness: 2rem; text-underline-offset: 3rem; } .page-template-page-policy .header__language-toggle, .page-template-page-policy .header__wrapper, .page-template-page-policy .header__burger { display: none; } .page-template-page-policy .header__inner { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .connect .lines__line { background: #202020; } .connect .lines__line:nth-child(1) { height: 173rem; top: 0; left: 64rem; } .connect .lines__line:nth-child(2) { height: 371rem; bottom: 0; left: 64rem; } .connect .lines__line:nth-child(3) { height: 100%; bottom: 0; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .connect .lines__line:nth-child(4) { height: 371rem; top: 0; right: 64rem; } .connect .lines__line:nth-child(5) { height: 173rem; bottom: 0; right: 64rem; } .connect .socials-list { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .conntect-titling { margin-bottom: clamp( 30rem, calc(30rem + 26 * ((100vw - 375rem) / (1200 - 375))), 56rem ); } .conntect-titling__title { font-size: clamp( 48rem, calc(48rem + 14 * ((100vw - 375rem) / (1200 - 375))), 62rem ); line-height: clamp( 48rem, calc(48rem + 14 * ((100vw - 375rem) / (1200 - 375))), 62rem ); letter-spacing: 1rem; } .conntect-titling__title svg { -webkit-transform: translateY( clamp(-7.5rem, calc(-5rem - 2.5 * ((100vw - 375rem) / (1200 - 375))), -5rem) ); -ms-transform: translateY( clamp(-7.5rem, calc(-5rem - 2.5 * ((100vw - 375rem) / (1200 - 375))), -5rem) ); transform: translateY( clamp(-7.5rem, calc(-5rem - 2.5 * ((100vw - 375rem) / (1200 - 375))), -5rem) ); } .conntect-titling__title svg text { font-size: clamp( 48rem, calc(48rem + 14 * ((100vw - 375rem) / (1200 - 375))), 62rem ); line-height: clamp( 48rem, calc(48rem + 14 * ((100vw - 375rem) / (1200 - 375))), 62rem ); } .request { width: 100%; position: relative; padding: clamp( 24rem, calc(24rem + 68 * ((100vw - 375rem) / (1200 - 375))), 92rem ) clamp(15rem, calc(15rem + 33 * ((100vw - 375rem) / (1200 - 375))), 48rem); background: #060606; z-index: 1; } .request__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .request__icon { margin-bottom: clamp( 30rem, calc(30rem + 50 * ((100vw - 375rem) / (1200 - 375))), 80rem ); width: clamp( 80rem, calc(80rem + 54 * ((100vw - 375rem) / (1200 - 375))), 134rem ); height: clamp( 80rem, calc(80rem + 54 * ((100vw - 375rem) / (1200 - 375))), 134rem ); } .request__icon svg { width: 100%; height: 100%; } .request__wrapper { margin-bottom: clamp( 25rem, calc(25rem + 15 * ((100vw - 375rem) / (1200 - 375))), 40rem ); } .request__suptext { margin-bottom: clamp( 32rem, calc(32rem + 8 * ((100vw - 375rem) / (1200 - 375))), 40rem ); font-size: clamp( 32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem ); line-height: clamp( 32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem ); font-family: "BebasNeue"; color: #fff; } .request__text { color: #f0f0f0; font-size: clamp( 14rem, calc(14rem + 6 * ((100vw - 375rem) / (1200 - 375))), 20rem ); line-height: clamp( 19rem, calc(19rem + 13 * ((100vw - 375rem) / (1200 - 375))), 32rem ); } .request .lines__line { background: #202020; } .request .lines__line:nth-child(1) { height: 342rem; top: 0; left: 72rem; } .request .lines__line:nth-child(2) { height: 342rem; bottom: 0; right: 72rem; } /* */ .cky-consent-container .cky-consent-bar { border: 1rem solid #202020 !important; box-shadow: unset !important; border-radius: unset !important; padding: clamp(20rem, calc(20rem + 20 * ((100vw - 375rem) / (1200 - 375))), 40rem) 30rem clamp(15rem, calc(15rem + 15 * ((100vw - 375rem) / (1200 - 375))), 30rem) 30rem !important; background: #060606 !important; } .cky-consent-bar .cky-notice-content-wrapper { padding: unset !important; } .cky-notice-content-wrapper + div { padding: unset !important; } .cky-notice-content-wrapper + div div div { margin-top: clamp(20rem, calc(20rem + 10 * ((100vw - 375rem) / (1200 - 375))), 30rem) !important; font-size: 16rem !important; line-height: 20rem !important; } .cky-notice .cky-title { color: #fbfbfb !important; word-break: unset !important; font-size: clamp(32rem, calc(32rem + 20 * ((100vw - 375rem) / (1200 - 375))), 52rem) !important; line-height: clamp(32rem, calc(32rem + 18 * ((100vw - 375rem) / (1200 - 375))), 50rem) !important; letter-spacing: clamp(1rem, calc(1rem + 1.6 * ((100vw - 375rem) / (1200 - 375))), 2.6rem) !important; margin-bottom: 15rem !important; font-family: "BebasNeue" !important; } .cky-consent-bar .cky-notice-des p, .cky-gpc-wrapper .cky-gpc-desc p, .cky-preference-body-wrapper .cky-preference-content-wrapper p, .cky-accordion-header-wrapper .cky-accordion-header-des p, .cky-cookie-des-table li div:last-child p { font-size: clamp(14rem, calc(14rem + 6 * ((100vw - 375rem) / (1200 - 375))), 20rem) !important; line-height: clamp(20rem, calc(20rem + 10 * ((100vw - 375rem) / (1200 - 375))), 30rem) !important; margin-bottom: 15rem !important; font-family: "Helvetica Neue" !important; } .cookie-policy-links__separator { font-size: clamp(14rem, calc(14rem + 6 * ((100vw - 375rem) / (1200 - 375))), 20rem) !important; line-height: clamp(20rem, calc(20rem + 10 * ((100vw - 375rem) / (1200 - 375))), 30rem) !important; } .cky-consent-container { width: 600rem !important; } .cookie-policy-links { display: flex; align-items: center; margin-bottom: clamp(20rem, calc(20rem + 10 * ((100vw - 375rem) / (1200 - 375))), 30rem); gap: 15rem; } .cookie-policy-links__link { color: #fff !important; font-size: clamp( 14rem, calc(14rem + 6 * ((100vw - 375rem) / (1200 - 375))), 20rem ) !important; line-height: clamp( 20rem, calc(20rem + 10 * ((100vw - 375rem) / (1200 - 375))), 30rem ) !important; -webkit-transition: color 0.3s; -webkit-transition: color 0.3s; transition: color 0.3s; } .cookie-policy-links__link:hover { color: #2c58a4; } .cky-notice { display: flex; flex-direction: column; } .cky-notice-btn-wrapper { margin-top: unset !important; } .cky-consent-container .cky-notice-btn-wrapper .cky-btn.cky-btn-reject, .cky-consent-container .cky-notice-btn-wrapper .cky-btn.cky-btn-accept { padding: clamp( 16rem, calc(16rem + 4 * ((100vw - 375rem) / (1200 - 375))), 20rem ) clamp(40rem, calc(40rem + 20 * ((100vw - 375rem) / (1200 - 375))), 60rem) !important; color: #fff !important; background-color: #2c58a4 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: inherit !important; font-size: clamp( 14rem, calc(14rem + 2 * ((100vw - 375rem) / (1200 - 375))), 16rem ) !important; font-weight: 500 !important; line-height: clamp( 20rem, calc(20rem + 6 * ((100vw - 375rem) / (1200 - 375))), 26rem ) !important; letter-spacing: 1rem !important; text-transform: uppercase !important; -webkit-transition: background-color 0.3s ease, color 0.3s ease !important; transition: background-color 0.3s ease, color 0.3s ease !important; } .cky-consent-container .cky-notice-btn-wrapper .cky-btn.cky-btn-reject:hover, .cky-consent-container .cky-notice-btn-wrapper .cky-btn.cky-btn-reject:focus-visible, .cky-consent-container .cky-notice-btn-wrapper .cky-btn.cky-btn-accept:hover, .cky-consent-container .cky-notice-btn-wrapper .cky-btn.cky-btn-accept:focus-visible { color: #000 !important; background-color: #fff !important; border-color: #fff !important; } /* */ @media (min-width: 1200px) { html { font-size: 0.05209vw; } } @media (max-width: 1200px) { .container { max-width: 1028rem; } .header { z-index: 151; } .header .container { max-width: 1028rem; } .header__wrapper { margin-left: auto; } .heading__inner { min-height: 100svh; } .heading__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .heading__img { width: clamp( 280rem, calc(280rem + 192 * ((100vw - 375rem) / (1200 - 375))), 472rem ); height: clamp( 450rem, calc(450rem + 491 * ((100vw - 375rem) / (1200 - 375))), 941rem ); top: 50%; left: 48%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .heading__title { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .heading__title span:nth-child(1) { text-align: left; } .heading__title span:nth-child(2) { text-align: right; } .about__inner { min-height: unset; padding-top: unset; } .about-body { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .lines { display: none; } .burger { display: -webkit-box; display: -ms-flexbox; display: flex; } .about-view { right: clamp( -60rem, calc(0rem - 60 * ((100vw - 375rem) / (1200 - 375))), 0rem ); top: 0; left: unset; z-index: -1; width: 500rem; height: 700rem; } .about-body { -webkit-filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); } .about-body__subtitle, .about-body__inner, .about-body__caption { width: 100%; max-width: 610rem; } .about-images__wrapper:nth-child(1) { bottom: 160rem; left: 50rem; } .about-images__wrapper:nth-child(4) { bottom: 200rem; right: 34rem; } .advantages__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: unset; } .advantages__wrapper { margin-left: unset; margin-right: auto; } .advantages-bg { left: clamp( -200rem, calc(-140rem - 60 * ((100vw - 375rem) / (1200 - 375))), -140rem ); top: clamp( -300rem, calc(-180rem - 120 * ((100vw - 375rem) / (1200 - 375))), -180rem ); width: clamp( 500rem, calc(500rem + 400 * ((100vw - 375rem) / (1200 - 375))), 900rem ); height: clamp( 500rem, calc(500rem + 400 * ((100vw - 375rem) / (1200 - 375))), 900rem ); } .advantages-bg svg { width: clamp( 500rem, calc(500rem + 400 * ((100vw - 375rem) / (1200 - 375))), 900rem ); height: clamp( 500rem, calc(500rem + 400 * ((100vw - 375rem) / (1200 - 375))), 900rem ); } .advantages__title { max-width: clamp( 400rem, calc(400rem + 300 * ((100vw - 375rem) / (1200 - 375))), 700rem ); } .advantages-body { margin-right: unset; max-width: unset; } .advantages__inner { -webkit-box-pack: unset; -ms-flex-pack: unset; justify-content: unset; } .advantages-list { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .slogan-view { z-index: -1; } .slogan__inner { padding-bottom: clamp( 120rem, calc(120rem + 65 * ((100vw - 375rem) / (1200 - 375))), 185rem ); } .slogan-body { margin-left: unset; -webkit-filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); } .slogan-view { width: 500rem; height: 700rem; right: clamp( -120rem, calc(0rem - 120 * ((100vw - 375rem) / (1200 - 375))), 0rem ); top: clamp( -100rem, calc(-100rem + 135 * ((100vw - 375rem) / (1200 - 375))), 35rem ); } .slogan-images__wrapper { position: absolute; } .slogan-images__wrapper:nth-child(1) { bottom: 60rem; left: -175rem; } .slogan-images__wrapper:nth-child(2) { top: 125rem; } .slogan-images__wrapper:nth-child(3) { bottom: 250rem; } .slogan-images__wrapper:nth-child(4) { top: 250rem; } .slogan__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: unset; } .points__inner { -ms-grid-columns: 1fr; grid-template-columns: 1fr; padding-bottom: clamp( 60rem, calc(60rem + 60 * ((100vw - 375rem) / (1200 - 375))), 120rem ); min-height: unset; gap: clamp( 30rem, calc(30rem + 30 * ((100vw - 375rem) / (1200 - 375))), 60rem ); } .points__inner::before { content: ""; width: 100%; height: clamp( 200rem, calc(200rem + 160 * ((100vw - 375rem) / (1200 - 375))), 360rem ); background: #2c58a4; position: absolute; left: -60%; top: 0; bottom: 0; } .points-body { padding-left: unset; max-width: unset; overflow: hidden; background: unset; } .points-body::before { content: unset; } .points-body::-webkit-scrollbar { width: 0; height: 0; } .points-list { overflow: visible; padding-top: clamp( 60rem, calc(60rem + 105 * ((100vw - 375rem) / (1200 - 375))), 165rem ); } .points-list .swiper-wrapper { width: auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 0; } .points-item__title { height: 100%; } .points-item__title::before { background: #20488c; } .points-content { padding: unset; } .points-body { margin-left: -100rem; padding-left: 100rem; margin-right: -100rem; padding-right: 100rem; } .points-item.swiper-slide { width: auto; -ms-flex-negative: 0; flex-shrink: 0; } .points-item:hover .points-item__digit { background: #20488c; } .points-item:hover .points-item__title::before { opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .points-item.swiper-slide-active .points-item__digit { background: unset; } .points-item.swiper-slide-active .points-item__title::before { opacity: 1; -webkit-transform: unset; -ms-transform: unset; transform: unset; } .cases-body { margin-right: unset; margin-left: unset; } .cases-head { padding-top: clamp( 60rem, calc(60rem + 60 * ((100vw - 375rem) / (1200 - 375))), 120rem ); } .cases-view { right: clamp( -60rem, calc(0rem - 60 * ((100vw - 375rem) / (1200 - 375))), 0rem ); top: clamp( -200rem, calc(-200rem + 200 * ((100vw - 375rem) / (1200 - 375))), 0rem ); left: unset; z-index: -1; width: 500rem; height: 800rem; } .cases-body { -webkit-filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); } .cases-body__subtext, .cases-body__text { width: 100%; max-width: 600rem; } .cases-items { margin-left: unset; } .cases-item { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } .cases-preview { height: clamp( 240rem, calc(240rem + 160 * ((100vw - 375rem) / (1200 - 375))), 400rem ); } .map__inner { min-height: unset; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .banner__wrapper { min-height: 100svh; } .contact__inner { min-height: 100%; height: auto; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .contact__wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .contact-body { max-width: 100%; width: 100%; } .contact__form { max-width: unset; } .scroll-mouse { display: none; } .projectheader-brief { margin-bottom: unset; } .projectheader__inner { min-height: unset; } .projectheader-titling__text, .projectheader-brief__text { width: 100%; max-width: 560rem; } .project-titling__title::before { content: unset; } .projectpages-swiper__arrow { -webkit-filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); } .topbar__inner { padding-bottom: clamp( 60rem, calc(60rem + 100 * ((100vw - 375rem) / (1200 - 375))), 160rem ); } .topbar-titling { padding-right: unset; padding-bottom: unset; padding-top: unset; } .topbar-titling__background { display: none; } .topbar-images { display: none; } .topbar-titling__wrapper { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 60rem 0; gap: 30rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; background: #2c58a4; margin-bottom: clamp( 15rem, calc(15rem + 15 * ((100vw - 375rem) / (1200 - 375))), 30rem ); } .topbar-titling__wrapper::before { content: ""; width: 150%; top: 0; bottom: 0; height: 100%; left: -25%; background: #2c58a4; z-index: -1; position: absolute; } .topbar-titling__images { position: unset; -webkit-transform: unset; -ms-transform: unset; transform: unset; display: -webkit-box; display: -ms-flexbox; display: flex; } .project-titling__title span:first-child { left: 0; bottom: 8rem; top: unset; } .topbar-titling__title span:first-child, .projectheader-brief__title span:first-child, .project-titling--simple .project-titling__title span:first-child, .project-titling--decorated .project-titling__title span:first-child, .pipeline__title span:first-child, .step-titling__line, .headline-titling__subtext span:first-child { left: 0; bottom: -6rem; top: unset; } .step:nth-child(even) .step-titling__line { right: 0; } .headline-view { z-index: -1; } .headline--design .headline-view { right: clamp( -120rem, calc(0rem - 120 * ((100vw - 375rem) / (1200 - 375))), 0rem ); top: clamp( -60rem, calc(0rem - 60 * ((100vw - 375rem) / (1200 - 375))), 0rem ); left: unset; width: clamp( 320rem, calc(320rem + 180 * ((100vw - 375rem) / (1200 - 375))), 500rem ); height: 700rem; } .headline--brand .headline-view { right: clamp( -120rem, calc(0rem - 120 * ((100vw - 375rem) / (1200 - 375))), 0rem ); top: clamp( -60rem, calc(0rem - 60 * ((100vw - 375rem) / (1200 - 375))), 0rem ); left: unset; width: clamp( 320rem, calc(320rem + 180 * ((100vw - 375rem) / (1200 - 375))), 500rem ); height: 700rem; } .headline--brand .headline-images__wrapper:nth-child(1) { bottom: 250rem; } .headline--brand .headline-images__wrapper:nth-child(3) { top: -50rem; right: 0rem; } .headline--brand .headline-images__wrapper:nth-child(4) { bottom: 200rem; right: 50rem; } .headline--development .headline-view { width: 500rem; height: 700rem; right: clamp( -120rem, calc(0rem - 120 * ((100vw - 375rem) / (1200 - 375))), 0rem ); top: clamp( -60rem, calc(0rem - 60 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .headline--development .headline-images__wrapper:nth-child(1) { top: 240rem; left: -30rem; } .headline--development .headline-images__wrapper:nth-child(2) { bottom: 0rem; left: -80rem; } .headline--marketing .headline-view { right: clamp( -60rem, calc(0rem - 60 * ((100vw - 375rem) / (1200 - 375))), 0rem ); top: clamp( -60rem, calc(0rem - 60 * ((100vw - 375rem) / (1200 - 375))), 0rem ); left: unset; width: 500rem; height: 800rem; } .headline-view { z-index: -1; } .headline-body { -webkit-filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); } .headline-titling { margin-bottom: unset; } .headline-titling__inner { width: 100%; max-width: 620rem; } .navigation { width: 100%; overflow: visible; height: 100%; gap: 30rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: unset; opacity: 0 !important; -webkit-transition-delay: unset !important; transition-delay: unset !important; -webkit-transform: unset !important; -ms-transform: unset !important; transform: unset !important; -webkit-transition-duration: unset !important; transition-duration: unset !important; -webkit-transition: opacity 0.3s !important; transition: opacity 0.3s !important; pointer-events: none; } .navigation__inner { max-width: 1028rem; width: 100%; -webkit-transition: none; transition: none; padding: clamp( 120rem, calc(120rem + 120 * ((100vw - 375rem) / (1200 - 375))), 240rem ) 15rem 30rem 15rem; margin-left: auto; margin-right: auto; } .navigation--active .navigation__inner { width: 100%; } .navigation__language-toggle { display: none; } .navigation__language-toggle { margin-right: auto; } .menu-list { gap: 15rem; } .menu-item__link { text-align: left; padding: unset; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-transition: color 0.5s; transition: color 0.5s; } .menu-item__link:hover { -webkit-transform: none; -ms-transform: none; transform: none; } .language-toggle--vertical { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .language-toggle--vertical .language-toggle__switch { width: 65rem; height: 33rem; } .language-toggle--vertical .language-toggle__slider { top: 3rem; left: 6rem; } .language-toggle--vertical .language-toggle__label { -webkit-writing-mode: unset; -ms-writing-mode: unset; writing-mode: unset; } .menu { width: 100%; } .menu-item { -webkit-writing-mode: unset; -ms-writing-mode: unset; writing-mode: unset; overflow: visible; padding-bottom: 15rem; border-bottom: 1rem solid #202020; } .body--active { overflow: hidden; } .body--active .navigation { opacity: 1 !important; pointer-events: unset; } .advantages__inner { gap: 60rem; } .heading__title .title__text svg { left: unset !important; right: 0; } } @media (max-width: 992px) { .container { max-width: 798rem; } .header .container { max-width: 798rem; } .about-view { right: clamp( -220rem, calc(0rem - 220 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .slogan-view { right: clamp( -220rem, calc(0rem - 220 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .cases-view { right: clamp( -220rem, calc(0rem - 220 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .headline--design .headline-view { right: clamp( -220rem, calc(0rem - 220 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .headline--brand .headline-view { right: clamp( -220rem, calc(0rem - 220 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .headline--development .headline-view { right: clamp( -220rem, calc(0rem - 220 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .headline--marketing .headline-view { right: clamp( -220rem, calc(0rem - 220 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .footer__wrapper { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; justify-items: center; } .footer-box:nth-child(3) { text-align: center; } .footer-box:nth-child(3) .socials-list { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer .contacts-list { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .contacts-item__link { text-align: center; } .contacts-list { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .projectheader__wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .projectheader-img { max-width: unset; } .projectheader-body { max-width: unset; } .projectheader-img { display: none; } .projectheader-titling { margin-bottom: clamp( 30rem, calc(30rem + 30 * ((100vw - 375rem) / (1200 - 375))), 60rem ); } .projectheader-titling__text, .projectheader-brief__text { max-width: unset; } .projectheader-body__img { display: block; margin-bottom: clamp( 30rem, calc(30rem + 30 * ((100vw - 375rem) / (1200 - 375))), 60rem ); } .navigation__inner { max-width: 798rem; } } @media (max-width: 768px) { .container { max-width: 580rem; } .header .container { max-width: 580rem; } .header__link { display: none; } .header__language-toggle { display: none; } .about-view { display: none; } .about-body__subtitle, .about-body__inner, .about-body__caption { max-width: unset; } .about-body__view { display: block; position: unset; margin-left: auto; margin-right: auto; width: clamp( 320rem, calc(320rem + 420 * ((100vw - 375rem) / (1200 - 375))), 740rem ); margin-bottom: clamp( 20rem, calc(20rem + 15 * ((100vw - 375rem) / (1200 - 375))), 35rem ); height: clamp( 240rem, calc(240rem + 220 * ((100vw - 375rem) / (1200 - 375))), 460rem ); } .about-images__wrapper:nth-child(1) { -webkit-transform: rotate(144deg); -ms-transform: rotate(144deg); transform: rotate(144deg); bottom: clamp( 70rem, calc(70rem + 50 * ((100vw - 375rem) / (1200 - 375))), 120rem ); left: clamp( 60rem, calc(60rem + 80 * ((100vw - 375rem) / (1200 - 375))), 140rem ); } .about-images__wrapper:nth-child(1) img { width: clamp( 30rem, calc(30rem + 60 * ((100vw - 375rem) / (1200 - 375))), 90rem ); height: clamp( 40rem, calc(40rem + 50 * ((100vw - 375rem) / (1200 - 375))), 90rem ); } .about-images__wrapper:nth-child(2) { top: clamp( -93rem, calc(-40rem - 53 * ((100vw - 375rem) / (1200 - 375))), -40rem ); left: clamp( 60rem, calc(60rem + 22 * ((100vw - 375rem) / (1200 - 375))), 82rem ); } .about-images__wrapper:nth-child(2) img { width: clamp( 60rem, calc(60rem + 83 * ((100vw - 375rem) / (1200 - 375))), 143rem ); height: clamp( 70rem, calc(70rem + 84 * ((100vw - 375rem) / (1200 - 375))), 154rem ); } .about-images__wrapper:nth-child(3) { right: clamp( 40rem, calc(40rem + 80 * ((100vw - 375rem) / (1200 - 375))), 120rem ); top: 1rem; } .about-images__wrapper:nth-child(3) img { width: clamp( 40rem, calc(40rem + 49 * ((100vw - 375rem) / (1200 - 375))), 89rem ); height: clamp( 60rem, calc(60rem + 45 * ((100vw - 375rem) / (1200 - 375))), 105rem ); } .about-images__wrapper:nth-child(4) { bottom: clamp( 60rem, calc(60rem + 100 * ((100vw - 375rem) / (1200 - 375))), 160rem ); right: clamp( 65rem, calc(65rem + 55 * ((100vw - 375rem) / (1200 - 375))), 120rem ); } .about-images__wrapper:nth-child(4) img { width: clamp( 35rem, calc(35rem + 40 * ((100vw - 375rem) / (1200 - 375))), 75rem ); height: clamp( 55rem, calc(55rem + 36 * ((100vw - 375rem) / (1200 - 375))), 91rem ); } .about-images__wrapper:nth-child(5) { right: clamp( -614rem, calc(-300rem - 314 * ((100vw - 375rem) / (1200 - 375))), -300rem ); top: clamp( 150rem, calc(150rem + 212 * ((100vw - 375rem) / (1200 - 375))), 362rem ); } .about-body { -webkit-filter: unset; filter: unset; } .slogan-view { position: unset; margin-left: auto; margin-right: auto; width: clamp( 280rem, calc(280rem + 80 * ((100vw - 375rem) / (1200 - 375))), 360rem ); height: clamp( 280rem, calc(280rem + 80 * ((100vw - 375rem) / (1200 - 375))), 360rem ); top: clamp( 100rem, calc(100rem - 0 * ((100vw - 375rem) / (1200 - 375))), 100rem ); } .slogan-images__wrapper:nth-child(1) { bottom: clamp( 0rem, calc(0rem + 25 * ((100vw - 375rem) / (1200 - 375))), 25rem ); left: clamp( -50rem, calc(0rem - 50 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .slogan-images__wrapper:nth-child(1) img { width: clamp( 40rem, calc(40rem + 40 * ((100vw - 375rem) / (1200 - 375))), 80rem ); height: clamp( 40rem, calc(40rem + 40 * ((100vw - 375rem) / (1200 - 375))), 80rem ); } .slogan-images__wrapper:nth-child(2) { top: clamp( 90rem, calc(90rem + 30 * ((100vw - 375rem) / (1200 - 375))), 120rem ); left: clamp( 0rem, calc(20rem - 20 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .slogan-images__wrapper:nth-child(2) img { width: clamp( 60rem, calc(60rem + 60 * ((100vw - 375rem) / (1200 - 375))), 120rem ); height: clamp( 80rem, calc(80rem + 70 * ((100vw - 375rem) / (1200 - 375))), 150rem ); } .slogan-images__wrapper:nth-child(3) { bottom: clamp( 60rem, calc(60rem + 190 * ((100vw - 375rem) / (1200 - 375))), 250rem ); left: clamp( -200rem, calc(-40rem - 160 * ((100vw - 375rem) / (1200 - 375))), -40rem ); } .slogan-images__wrapper:nth-child(3) img { width: clamp( 40rem, calc(40rem + 40 * ((100vw - 375rem) / (1200 - 375))), 80rem ); height: clamp( 40rem, calc(40rem + 40 * ((100vw - 375rem) / (1200 - 375))), 80rem ); } .slogan-images__wrapper:nth-child(4) { top: clamp( 120rem, calc(120rem - 0 * ((100vw - 375rem) / (1200 - 375))), 120rem ); right: clamp( -100rem, calc(0rem - 100 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .slogan-images__wrapper:nth-child(4) img { width: clamp( 60rem, calc(60rem + 60 * ((100vw - 375rem) / (1200 - 375))), 120rem ); height: clamp( 80rem, calc(80rem + 70 * ((100vw - 375rem) / (1200 - 375))), 150rem ); } .slogan-body { -webkit-filter: unset; filter: unset; margin-bottom: clamp( 20rem, calc(20rem + 15 * ((100vw - 375rem) / (1200 - 375))), 35rem ); -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .heading__title { z-index: 1; -webkit-filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); filter: drop-shadow(0 20rem 40rem rgba(0, 0, 0, 0.6)); } .cases-view { display: none; } .cases-body__subtext, .cases-body__text { max-width: unset; } .cases-body__view { margin-bottom: clamp( 20rem, calc(20rem + 15 * ((100vw - 375rem) / (1200 - 375))), 35rem ); display: block; position: unset; margin-left: auto; margin-right: auto; width: clamp( 280rem, calc(280rem + 80 * ((100vw - 375rem) / (1200 - 375))), 360rem ); height: clamp( 280rem, calc(280rem + 80 * ((100vw - 375rem) / (1200 - 375))), 360rem ); } .cases-images__wrapper:nth-child(1) { bottom: clamp( 30rem, calc(30rem + 76 * ((100vw - 375rem) / (1200 - 375))), 106rem ); left: clamp( -36rem, calc(25rem - 61 * ((100vw - 375rem) / (1200 - 375))), 25rem ); } .cases-images__wrapper:nth-child(1) img { width: clamp( 30rem, calc(30rem + 51 * ((100vw - 375rem) / (1200 - 375))), 81rem ); height: clamp( 35rem, calc(35rem + 52 * ((100vw - 375rem) / (1200 - 375))), 87rem ); } .cases-images__wrapper:nth-child(2) { top: clamp( 40rem, calc(40rem + 226 * ((100vw - 375rem) / (1200 - 375))), 266rem ); left: clamp( -44rem, calc(25rem - 69 * ((100vw - 375rem) / (1200 - 375))), 25rem ); } .cases-images__wrapper:nth-child(2) img { width: clamp( 100rem, calc(100rem + 148 * ((100vw - 375rem) / (1200 - 375))), 248rem ); height: clamp( 150rem, calc(150rem + 220 * ((100vw - 375rem) / (1200 - 375))), 370rem ); } .cases-images__wrapper:nth-child(3) { top: -15rem; left: clamp( -29rem, calc(50rem - 79 * ((100vw - 375rem) / (1200 - 375))), 50rem ); } .cases-images__wrapper:nth-child(3) img { width: clamp( 60rem, calc(60rem + 105 * ((100vw - 375rem) / (1200 - 375))), 165rem ); height: clamp( 50rem, calc(50rem + 66 * ((100vw - 375rem) / (1200 - 375))), 116rem ); } .cases-images__wrapper:nth-child(4) { top: clamp( 25rem, calc(25rem + 25 * ((100vw - 375rem) / (1200 - 375))), 50rem ); right: clamp( -152rem, calc(0rem - 152 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .cases-images__wrapper:nth-child(4) img { width: clamp( 60rem, calc(60rem + 100 * ((100vw - 375rem) / (1200 - 375))), 160rem ); height: clamp( 50rem, calc(50rem + 93 * ((100vw - 375rem) / (1200 - 375))), 143rem ); } .cases-images__wrapper:nth-child(5) { top: clamp( 80rem, calc(80rem + 58 * ((100vw - 375rem) / (1200 - 375))), 138rem ); right: clamp( -180rem, calc(5rem - 185 * ((100vw - 375rem) / (1200 - 375))), 5rem ); } .cases-images__wrapper:nth-child(5) img { width: clamp( 60rem, calc(60rem + 63 * ((100vw - 375rem) / (1200 - 375))), 123rem ); height: clamp( 50rem, calc(50rem + 87 * ((100vw - 375rem) / (1200 - 375))), 137rem ); } .cases-images__wrapper:nth-child(6) { bottom: clamp( 50rem, calc(50rem + 279 * ((100vw - 375rem) / (1200 - 375))), 329rem ); right: clamp( -115rem, calc(25rem - 140 * ((100vw - 375rem) / (1200 - 375))), 25rem ); } .cases-images__wrapper:nth-child(6) img { width: clamp( 60rem, calc(60rem + 73 * ((100vw - 375rem) / (1200 - 375))), 133rem ); height: clamp( 100rem, calc(100rem + 102 * ((100vw - 375rem) / (1200 - 375))), 202rem ); } .cases-images__wrapper:nth-child(7) { bottom: 8rem; right: clamp( -49rem, calc(15rem - 64 * ((100vw - 375rem) / (1200 - 375))), 15rem ); } .cases-images__wrapper:nth-child(7) img { width: clamp( 60rem, calc(60rem + 58 * ((100vw - 375rem) / (1200 - 375))), 118rem ); height: clamp( 70rem, calc(70rem + 87 * ((100vw - 375rem) / (1200 - 375))), 157rem ); } .cases-images__wrapper:nth-child(8) { top: 305rem; right: -340rem; } .cases-images__wrapper:nth-child(8) img { width: clamp( 60rem, calc(60rem + 15 * ((100vw - 375rem) / (1200 - 375))), 75rem ); height: clamp( 50rem, calc(50rem + 33 * ((100vw - 375rem) / (1200 - 375))), 83rem ); } .cases-images__wrapper:nth-child(9) { top: 175rem; right: -660rem; } .cases-images__wrapper:nth-child(9) img { width: clamp( 60rem, calc(60rem + 55 * ((100vw - 375rem) / (1200 - 375))), 115rem ); height: clamp( 50rem, calc(50rem + 71 * ((100vw - 375rem) / (1200 - 375))), 121rem ); } .cases-images__wrapper:nth-child(10) { top: 485rem; right: -751rem; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .cases-images__wrapper:nth-child(10) img { width: clamp( 60rem, calc(60rem + 25 * ((100vw - 375rem) / (1200 - 375))), 85rem ); height: clamp( 50rem, calc(50rem + 28 * ((100vw - 375rem) / (1200 - 375))), 78rem ); } .cases-body { -webkit-filter: unset; filter: unset; } .headline-view { display: none; } .headline-titling__inner { max-width: unset; } .headline-body__view { display: block; margin-bottom: clamp( 30rem, calc(30rem + 10 * ((100vw - 375rem) / (1200 - 375))), 40rem ); } .headline--design .headline-view { position: unset; margin-left: auto; margin-right: auto; width: clamp( 320rem, calc(320rem + 420 * ((100vw - 375rem) / (1200 - 375))), 740rem ); margin-bottom: clamp( 20rem, calc(20rem + 15 * ((100vw - 375rem) / (1200 - 375))), 35rem ); height: clamp( 240rem, calc(240rem + 220 * ((100vw - 375rem) / (1200 - 375))), 460rem ); } .headline--brand .headline-body__view { position: unset; margin-left: auto; margin-right: auto; width: clamp( 320rem, calc(320rem + 420 * ((100vw - 375rem) / (1200 - 375))), 740rem ); margin-bottom: clamp( 20rem, calc(20rem + 15 * ((100vw - 375rem) / (1200 - 375))), 35rem ); height: clamp( 240rem, calc(240rem + 220 * ((100vw - 375rem) / (1200 - 375))), 460rem ); } .headline--brand .headline-images__wrapper:nth-child(1) { bottom: clamp( 60rem, calc(60rem + 80 * ((100vw - 375rem) / (1200 - 375))), 140rem ); left: clamp( 60rem, calc(60rem + 100 * ((100vw - 375rem) / (1200 - 375))), 160rem ); } .headline--brand .headline-images__wrapper:nth-child(1) img { width: clamp( 30rem, calc(30rem + 42 * ((100vw - 375rem) / (1200 - 375))), 72rem ); height: clamp( 40rem, calc(40rem + 47 * ((100vw - 375rem) / (1200 - 375))), 87rem ); -webkit-animation: float-1 5.5s ease-in-out infinite; animation: float-1 5.5s ease-in-out infinite; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .headline--brand .headline-images__wrapper:nth-child(2) { top: 0; left: clamp( 70rem, calc(70rem + 70 * ((100vw - 375rem) / (1200 - 375))), 140rem ); } .headline--brand .headline-images__wrapper:nth-child(2) img { width: clamp( 30rem, calc(30rem + 55 * ((100vw - 375rem) / (1200 - 375))), 85rem ); height: clamp( 40rem, calc(40rem + 61 * ((100vw - 375rem) / (1200 - 375))), 101rem ); -webkit-animation: float-2 6s ease-in-out infinite; animation: float-2 6s ease-in-out infinite; -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } .headline--brand .headline-images__wrapper:nth-child(3) { top: clamp( 0rem, calc(20rem - 20 * ((100vw - 375rem) / (1200 - 375))), 20rem ); right: clamp( 20rem, calc(20rem + 80 * ((100vw - 375rem) / (1200 - 375))), 100rem ); } .headline--brand .headline-images__wrapper:nth-child(3) img { width: clamp( 60rem, calc(60rem + 77 * ((100vw - 375rem) / (1200 - 375))), 137rem ); height: clamp( 70rem, calc(70rem + 78 * ((100vw - 375rem) / (1200 - 375))), 148rem ); -webkit-animation: float-3 7s ease-in-out infinite; animation: float-3 7s ease-in-out infinite; -webkit-animation-delay: -3s; animation-delay: -3s; } .headline--brand .headline-images__wrapper:nth-child(4) { -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); transform: rotate(35deg); bottom: clamp( 60rem, calc(60rem + 60 * ((100vw - 375rem) / (1200 - 375))), 120rem ); right: clamp( 80rem, calc(80rem + 100 * ((100vw - 375rem) / (1200 - 375))), 180rem ); } .headline--brand .headline-images__wrapper:nth-child(4) img { width: clamp( 30rem, calc(30rem + 55 * ((100vw - 375rem) / (1200 - 375))), 85rem ); height: clamp( 40rem, calc(40rem + 60 * ((100vw - 375rem) / (1200 - 375))), 100rem ); -webkit-animation: float-4 5s ease-in-out infinite; animation: float-4 5s ease-in-out infinite; -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .headline--development .headline-body__view { position: unset; margin-left: auto; margin-right: auto; width: clamp( 280rem, calc(280rem + 80 * ((100vw - 375rem) / (1200 - 375))), 360rem ); height: clamp( 280rem, calc(280rem + 80 * ((100vw - 375rem) / (1200 - 375))), 360rem ); top: clamp( 100rem, calc(100rem - 0 * ((100vw - 375rem) / (1200 - 375))), 100rem ); } .headline--development .headline-images__wrapper:nth-child(1) { top: clamp( 90rem, calc(90rem + 10 * ((100vw - 375rem) / (1200 - 375))), 100rem ); left: clamp( 0rem, calc(20rem - 20 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .headline--development .headline-images__wrapper:nth-child(1) img { width: clamp( 60rem, calc(60rem + 40 * ((100vw - 375rem) / (1200 - 375))), 100rem ); height: clamp( 80rem, calc(80rem + 40 * ((100vw - 375rem) / (1200 - 375))), 120rem ); } .headline--development .headline-images__wrapper:nth-child(2) { bottom: clamp( 0rem, calc(0rem + 25 * ((100vw - 375rem) / (1200 - 375))), 25rem ); left: clamp( -50rem, calc(0rem - 50 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .headline--development .headline-images__wrapper:nth-child(2) img { width: clamp( 40rem, calc(40rem + 40 * ((100vw - 375rem) / (1200 - 375))), 80rem ); height: clamp( 40rem, calc(40rem + 40 * ((100vw - 375rem) / (1200 - 375))), 80rem ); } .headline--marketing .headline-body__view { margin-bottom: clamp( 20rem, calc(20rem + 15 * ((100vw - 375rem) / (1200 - 375))), 35rem ); position: unset; margin-left: auto; margin-right: auto; width: clamp( 280rem, calc(280rem + 80 * ((100vw - 375rem) / (1200 - 375))), 360rem ); height: clamp( 280rem, calc(280rem + 80 * ((100vw - 375rem) / (1200 - 375))), 360rem ); } .headline--marketing .headline-images__wrapper:nth-child(1) { bottom: clamp( 30rem, calc(30rem + 50 * ((100vw - 375rem) / (1200 - 375))), 80rem ); left: clamp( -36rem, calc(25rem - 61 * ((100vw - 375rem) / (1200 - 375))), 25rem ); } .headline--marketing .headline-images__wrapper:nth-child(1) img { width: clamp( 30rem, calc(30rem + 51 * ((100vw - 375rem) / (1200 - 375))), 81rem ); height: clamp( 35rem, calc(35rem + 52 * ((100vw - 375rem) / (1200 - 375))), 87rem ); } .headline--marketing .headline-images__wrapper:nth-child(2) { top: clamp( 20rem, calc(40rem - 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); left: clamp( -44rem, calc(25rem - 69 * ((100vw - 375rem) / (1200 - 375))), 25rem ); } .headline--marketing .headline-images__wrapper:nth-child(2) img { width: clamp( 100rem, calc(100rem + 60 * ((100vw - 375rem) / (1200 - 375))), 160rem ); height: clamp( 150rem, calc(150rem + 50 * ((100vw - 375rem) / (1200 - 375))), 200rem ); } .headline--marketing .headline-images__wrapper:nth-child(3) { top: -15rem; left: clamp( 50rem, calc(50rem + 70 * ((100vw - 375rem) / (1200 - 375))), 120rem ); } .headline--marketing .headline-images__wrapper:nth-child(3) img { width: clamp( 60rem, calc(60rem + 60 * ((100vw - 375rem) / (1200 - 375))), 120rem ); height: clamp( 50rem, calc(50rem + 66 * ((100vw - 375rem) / (1200 - 375))), 116rem ); } .headline--marketing .headline-images__wrapper:nth-child(4) { top: clamp( 25rem, calc(25rem + 25 * ((100vw - 375rem) / (1200 - 375))), 50rem ); right: clamp( -80rem, calc(0rem - 80 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .headline--marketing .headline-images__wrapper:nth-child(4) img { width: clamp( 60rem, calc(60rem + 100 * ((100vw - 375rem) / (1200 - 375))), 160rem ); height: clamp( 50rem, calc(50rem + 93 * ((100vw - 375rem) / (1200 - 375))), 143rem ); } .headline--marketing .headline-images__wrapper:nth-child(5) { top: clamp( 80rem, calc(80rem + 80 * ((100vw - 375rem) / (1200 - 375))), 160rem ); right: clamp( -20rem, calc(5rem - 25 * ((100vw - 375rem) / (1200 - 375))), 5rem ); } .headline--marketing .headline-images__wrapper:nth-child(5) img { width: clamp( 60rem, calc(60rem + 63 * ((100vw - 375rem) / (1200 - 375))), 123rem ); height: clamp( 50rem, calc(50rem + 87 * ((100vw - 375rem) / (1200 - 375))), 137rem ); } .headline-body { -webkit-filter: unset; filter: unset; } .cases-item { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .cases-titling__subline { display: none; } .cases-preview { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } .cases__inner { padding-bottom: clamp( 60rem, calc(60rem + 100 * ((100vw - 375rem) / (1200 - 375))), 160rem ); } .recalls-slide__reviewer { max-width: 100%; } .review { padding-right: unset; } .reviews__wrapper .arrow { top: clamp( -15rem, calc(0rem - 15 * ((100vw - 375rem) / (1200 - 375))), 0rem ); -webkit-transform: unset; -ms-transform: unset; transform: unset; } .reviews__wrapper .arrow:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .review__reviewer { max-width: 100%; } .navigation__inner { gap: 30rem; max-width: 580rem; } .navigation__language-toggle { display: -webkit-box; display: -ms-flexbox; display: flex; } .navigation__wrapper { display: block; } .menu { padding-right: 30rem; overflow-y: auto; max-height: 440rem; } .menu::-webkit-scrollbar { width: 5rem; } .menu::-webkit-scrollbar-track { background: #202020; } .menu::-webkit-scrollbar-thumb { background: #2c58a4; } .language-toggle--vertical .language-toggle__input:checked ~ .language-toggle__slider { -webkit-transform: translateX(26rem); -ms-transform: translateX(26rem); transform: translateX(26rem); } .language-toggle--vertical .language-toggle__slider--animating { -webkit-animation: droplet-move 0.3s; animation: droplet-move 0.3s; } .language-toggle--vertical .language-toggle__slider--animating-reverse { -webkit-animation: droplet-move-reverse 0.3s; animation: droplet-move-reverse 0.3s; } .points__inner::before { height: clamp( 220rem, calc(220rem + 180 * ((100vw - 375rem) / (1200 - 375))), 400rem ); } } @media (max-width: 1200px) and (orientation: landscape) { .last--animated { height: 100dvh; } .navigation__inner { padding-top: 160rem; padding-bottom: 20rem; } .menu { overflow-y: auto; max-height: calc(100svh - 220rem); padding-right: 16rem; } .menu::-webkit-scrollbar { width: 5rem; } .menu::-webkit-scrollbar-track { background: #202020; } .menu::-webkit-scrollbar-thumb { background: #2c58a4; } } @media (max-width: 1200px) and (max-height: 600px) and (orientation: landscape) { .navigation__inner { padding-top: 96rem; padding-bottom: 20rem; } .navigation__link { font-size: 14rem; line-height: 20rem; } .navigation__link::before, .navigation__link::after { padding: 12rem 36rem; } .about-view { display: none; } .about-body__subtitle, .about-body__inner, .about-body__caption { max-width: unset; } .about-body__view { display: block; position: unset; margin-left: auto; margin-right: auto; width: clamp( 320rem, calc(320rem + 420 * ((100vw - 375rem) / (1200 - 375))), 740rem ); margin-bottom: clamp( 20rem, calc(20rem + 15 * ((100vw - 375rem) / (1200 - 375))), 35rem ); height: clamp( 240rem, calc(240rem + 220 * ((100vw - 375rem) / (1200 - 375))), 460rem ); } .about-images__wrapper:nth-child(1) { -webkit-transform: rotate(144deg); -ms-transform: rotate(144deg); transform: rotate(144deg); bottom: clamp( 70rem, calc(70rem + 50 * ((100vw - 375rem) / (1200 - 375))), 120rem ); left: clamp( 60rem, calc(60rem + 80 * ((100vw - 375rem) / (1200 - 375))), 140rem ); } .about-images__wrapper:nth-child(1) img { width: clamp( 30rem, calc(30rem + 60 * ((100vw - 375rem) / (1200 - 375))), 90rem ); height: clamp( 40rem, calc(40rem + 50 * ((100vw - 375rem) / (1200 - 375))), 90rem ); } .about-images__wrapper:nth-child(2) { top: clamp( -93rem, calc(-40rem - 53 * ((100vw - 375rem) / (1200 - 375))), -40rem ); left: clamp( 60rem, calc(60rem + 22 * ((100vw - 375rem) / (1200 - 375))), 82rem ); } .about-images__wrapper:nth-child(2) img { width: clamp( 60rem, calc(60rem + 83 * ((100vw - 375rem) / (1200 - 375))), 143rem ); height: clamp( 70rem, calc(70rem + 84 * ((100vw - 375rem) / (1200 - 375))), 154rem ); } .about-images__wrapper:nth-child(3) { right: clamp( 40rem, calc(40rem + 80 * ((100vw - 375rem) / (1200 - 375))), 120rem ); top: 1rem; } .about-images__wrapper:nth-child(3) img { width: clamp( 40rem, calc(40rem + 49 * ((100vw - 375rem) / (1200 - 375))), 89rem ); height: clamp( 60rem, calc(60rem + 45 * ((100vw - 375rem) / (1200 - 375))), 105rem ); } .about-images__wrapper:nth-child(4) { bottom: clamp( 60rem, calc(60rem + 100 * ((100vw - 375rem) / (1200 - 375))), 160rem ); right: clamp( 65rem, calc(65rem + 55 * ((100vw - 375rem) / (1200 - 375))), 120rem ); } .about-images__wrapper:nth-child(4) img { width: clamp( 35rem, calc(35rem + 40 * ((100vw - 375rem) / (1200 - 375))), 75rem ); height: clamp( 55rem, calc(55rem + 36 * ((100vw - 375rem) / (1200 - 375))), 91rem ); } .about-images__wrapper:nth-child(5) { right: clamp( -614rem, calc(-300rem - 314 * ((100vw - 375rem) / (1200 - 375))), -300rem ); top: clamp( 150rem, calc(150rem + 212 * ((100vw - 375rem) / (1200 - 375))), 362rem ); } .about-body { -webkit-filter: unset; filter: unset; } .projectheader__wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .projectheader-img { max-width: unset; display: none; } .projectheader-body { max-width: unset; } .projectheader-titling__text, .projectheader-brief__text { max-width: unset; } .projectheader-titling { margin-bottom: clamp( 30rem, calc(30rem + 30 * ((100vw - 375rem) / (1200 - 375))), 60rem ); } .projectheader-body__img { display: block; margin-bottom: clamp( 30rem, calc(30rem + 30 * ((100vw - 375rem) / (1200 - 375))), 60rem ); } .cases-view { display: none; } .cases-body__subtext, .cases-body__text { max-width: unset; } .cases-body__view { margin-bottom: clamp( 20rem, calc(20rem + 15 * ((100vw - 375rem) / (1200 - 375))), 35rem ); display: block; position: unset; margin-left: auto; margin-right: auto; width: clamp( 280rem, calc(280rem + 80 * ((100vw - 375rem) / (1200 - 375))), 360rem ); height: clamp( 280rem, calc(280rem + 80 * ((100vw - 375rem) / (1200 - 375))), 360rem ); } .cases-images__wrapper:nth-child(1) { bottom: clamp( 30rem, calc(30rem + 76 * ((100vw - 375rem) / (1200 - 375))), 106rem ); left: clamp( -36rem, calc(25rem - 61 * ((100vw - 375rem) / (1200 - 375))), 25rem ); } .cases-images__wrapper:nth-child(1) img { width: clamp( 30rem, calc(30rem + 51 * ((100vw - 375rem) / (1200 - 375))), 81rem ); height: clamp( 35rem, calc(35rem + 52 * ((100vw - 375rem) / (1200 - 375))), 87rem ); } .cases-images__wrapper:nth-child(2) { top: clamp( 40rem, calc(40rem + 226 * ((100vw - 375rem) / (1200 - 375))), 266rem ); left: clamp( -44rem, calc(25rem - 69 * ((100vw - 375rem) / (1200 - 375))), 25rem ); } .cases-images__wrapper:nth-child(2) img { width: clamp( 100rem, calc(100rem + 148 * ((100vw - 375rem) / (1200 - 375))), 248rem ); height: clamp( 150rem, calc(150rem + 220 * ((100vw - 375rem) / (1200 - 375))), 370rem ); } .cases-images__wrapper:nth-child(3) { top: -15rem; left: clamp( -29rem, calc(50rem - 79 * ((100vw - 375rem) / (1200 - 375))), 50rem ); } .cases-images__wrapper:nth-child(3) img { width: clamp( 60rem, calc(60rem + 105 * ((100vw - 375rem) / (1200 - 375))), 165rem ); height: clamp( 50rem, calc(50rem + 66 * ((100vw - 375rem) / (1200 - 375))), 116rem ); } .cases-images__wrapper:nth-child(4) { top: clamp( 25rem, calc(25rem + 25 * ((100vw - 375rem) / (1200 - 375))), 50rem ); right: clamp( -152rem, calc(0rem - 152 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .cases-images__wrapper:nth-child(4) img { width: clamp( 60rem, calc(60rem + 100 * ((100vw - 375rem) / (1200 - 375))), 160rem ); height: clamp( 50rem, calc(50rem + 93 * ((100vw - 375rem) / (1200 - 375))), 143rem ); } .cases-images__wrapper:nth-child(5) { top: clamp( 80rem, calc(80rem + 58 * ((100vw - 375rem) / (1200 - 375))), 138rem ); right: clamp( -180rem, calc(5rem - 185 * ((100vw - 375rem) / (1200 - 375))), 5rem ); } .cases-images__wrapper:nth-child(5) img { width: clamp( 60rem, calc(60rem + 63 * ((100vw - 375rem) / (1200 - 375))), 123rem ); height: clamp( 50rem, calc(50rem + 87 * ((100vw - 375rem) / (1200 - 375))), 137rem ); } .cases-images__wrapper:nth-child(6) { bottom: clamp( 50rem, calc(50rem + 279 * ((100vw - 375rem) / (1200 - 375))), 329rem ); right: clamp( -115rem, calc(25rem - 140 * ((100vw - 375rem) / (1200 - 375))), 25rem ); } .cases-images__wrapper:nth-child(6) img { width: clamp( 60rem, calc(60rem + 73 * ((100vw - 375rem) / (1200 - 375))), 133rem ); height: clamp( 100rem, calc(100rem + 102 * ((100vw - 375rem) / (1200 - 375))), 202rem ); } .cases-images__wrapper:nth-child(7) { bottom: 8rem; right: clamp( -49rem, calc(15rem - 64 * ((100vw - 375rem) / (1200 - 375))), 15rem ); } .cases-images__wrapper:nth-child(7) img { width: clamp( 60rem, calc(60rem + 58 * ((100vw - 375rem) / (1200 - 375))), 118rem ); height: clamp( 70rem, calc(70rem + 87 * ((100vw - 375rem) / (1200 - 375))), 157rem ); } .cases-images__wrapper:nth-child(8) { top: 305rem; right: -340rem; } .cases-images__wrapper:nth-child(8) img { width: clamp( 60rem, calc(60rem + 15 * ((100vw - 375rem) / (1200 - 375))), 75rem ); height: clamp( 50rem, calc(50rem + 33 * ((100vw - 375rem) / (1200 - 375))), 83rem ); } .cases-images__wrapper:nth-child(9) { top: 175rem; right: -660rem; } .cases-images__wrapper:nth-child(9) img { width: clamp( 60rem, calc(60rem + 55 * ((100vw - 375rem) / (1200 - 375))), 115rem ); height: clamp( 50rem, calc(50rem + 71 * ((100vw - 375rem) / (1200 - 375))), 121rem ); } .cases-images__wrapper:nth-child(10) { top: 485rem; right: -751rem; -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .cases-images__wrapper:nth-child(10) img { width: clamp( 60rem, calc(60rem + 25 * ((100vw - 375rem) / (1200 - 375))), 85rem ); height: clamp( 50rem, calc(50rem + 28 * ((100vw - 375rem) / (1200 - 375))), 78rem ); } .cases-body { -webkit-filter: unset; filter: unset; } .headline-view { display: none; } .headline-titling__inner { max-width: unset; } .headline-body__view { display: block; margin-bottom: clamp( 30rem, calc(30rem + 10 * ((100vw - 375rem) / (1200 - 375))), 40rem ); } .headline--design .headline-view { position: unset; margin-left: auto; margin-right: auto; width: clamp( 320rem, calc(320rem + 420 * ((100vw - 375rem) / (1200 - 375))), 740rem ); margin-bottom: clamp( 20rem, calc(20rem + 15 * ((100vw - 375rem) / (1200 - 375))), 35rem ); height: clamp( 240rem, calc(240rem + 220 * ((100vw - 375rem) / (1200 - 375))), 460rem ); } .headline--brand .headline-body__view { position: unset; margin-left: auto; margin-right: auto; width: clamp( 320rem, calc(320rem + 420 * ((100vw - 375rem) / (1200 - 375))), 740rem ); margin-bottom: clamp( 20rem, calc(20rem + 15 * ((100vw - 375rem) / (1200 - 375))), 35rem ); height: clamp( 240rem, calc(240rem + 220 * ((100vw - 375rem) / (1200 - 375))), 460rem ); } .headline--brand .headline-images__wrapper:nth-child(1) { bottom: clamp( 60rem, calc(60rem + 80 * ((100vw - 375rem) / (1200 - 375))), 140rem ); left: clamp( 60rem, calc(60rem + 100 * ((100vw - 375rem) / (1200 - 375))), 160rem ); } .headline--brand .headline-images__wrapper:nth-child(1) img { width: clamp( 30rem, calc(30rem + 42 * ((100vw - 375rem) / (1200 - 375))), 72rem ); height: clamp( 40rem, calc(40rem + 47 * ((100vw - 375rem) / (1200 - 375))), 87rem ); -webkit-animation: float-1 5.5s ease-in-out infinite; animation: float-1 5.5s ease-in-out infinite; -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .headline--brand .headline-images__wrapper:nth-child(2) { top: 0; left: clamp( 70rem, calc(70rem + 70 * ((100vw - 375rem) / (1200 - 375))), 140rem ); } .headline--brand .headline-images__wrapper:nth-child(2) img { width: clamp( 30rem, calc(30rem + 55 * ((100vw - 375rem) / (1200 - 375))), 85rem ); height: clamp( 40rem, calc(40rem + 61 * ((100vw - 375rem) / (1200 - 375))), 101rem ); -webkit-animation: float-2 6s ease-in-out infinite; animation: float-2 6s ease-in-out infinite; -webkit-animation-delay: -1.5s; animation-delay: -1.5s; } .headline--brand .headline-images__wrapper:nth-child(3) { top: clamp( 0rem, calc(20rem - 20 * ((100vw - 375rem) / (1200 - 375))), 20rem ); right: clamp( 20rem, calc(20rem + 80 * ((100vw - 375rem) / (1200 - 375))), 100rem ); } .headline--brand .headline-images__wrapper:nth-child(3) img { width: clamp( 60rem, calc(60rem + 77 * ((100vw - 375rem) / (1200 - 375))), 137rem ); height: clamp( 70rem, calc(70rem + 78 * ((100vw - 375rem) / (1200 - 375))), 148rem ); -webkit-animation: float-3 7s ease-in-out infinite; animation: float-3 7s ease-in-out infinite; -webkit-animation-delay: -3s; animation-delay: -3s; } .headline--brand .headline-images__wrapper:nth-child(4) { -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); transform: rotate(35deg); bottom: clamp( 60rem, calc(60rem + 60 * ((100vw - 375rem) / (1200 - 375))), 120rem ); right: clamp( 80rem, calc(80rem + 100 * ((100vw - 375rem) / (1200 - 375))), 180rem ); } .headline--brand .headline-images__wrapper:nth-child(4) img { width: clamp( 30rem, calc(30rem + 55 * ((100vw - 375rem) / (1200 - 375))), 85rem ); height: clamp( 40rem, calc(40rem + 60 * ((100vw - 375rem) / (1200 - 375))), 100rem ); -webkit-animation: float-4 5s ease-in-out infinite; animation: float-4 5s ease-in-out infinite; -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .headline--development .headline-body__view { position: unset; margin-left: auto; margin-right: auto; width: clamp( 280rem, calc(280rem + 80 * ((100vw - 375rem) / (1200 - 375))), 360rem ); height: clamp( 280rem, calc(280rem + 80 * ((100vw - 375rem) / (1200 - 375))), 360rem ); top: clamp( 100rem, calc(100rem - 0 * ((100vw - 375rem) / (1200 - 375))), 100rem ); } .headline--development .headline-images__wrapper:nth-child(1) { top: clamp( 90rem, calc(90rem + 10 * ((100vw - 375rem) / (1200 - 375))), 100rem ); left: clamp( 0rem, calc(20rem - 20 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .headline--development .headline-images__wrapper:nth-child(1) img { width: clamp( 60rem, calc(60rem + 40 * ((100vw - 375rem) / (1200 - 375))), 100rem ); height: clamp( 80rem, calc(80rem + 40 * ((100vw - 375rem) / (1200 - 375))), 120rem ); } .headline--development .headline-images__wrapper:nth-child(2) { bottom: clamp( 0rem, calc(0rem + 25 * ((100vw - 375rem) / (1200 - 375))), 25rem ); left: clamp( -50rem, calc(0rem - 50 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .headline--development .headline-images__wrapper:nth-child(2) img { width: clamp( 40rem, calc(40rem + 40 * ((100vw - 375rem) / (1200 - 375))), 80rem ); height: clamp( 40rem, calc(40rem + 40 * ((100vw - 375rem) / (1200 - 375))), 80rem ); } .headline--marketing .headline-body__view { margin-bottom: clamp( 20rem, calc(20rem + 15 * ((100vw - 375rem) / (1200 - 375))), 35rem ); position: unset; margin-left: auto; margin-right: auto; width: clamp( 280rem, calc(280rem + 80 * ((100vw - 375rem) / (1200 - 375))), 360rem ); height: clamp( 280rem, calc(280rem + 80 * ((100vw - 375rem) / (1200 - 375))), 360rem ); } .headline--marketing .headline-images__wrapper:nth-child(1) { bottom: clamp( 30rem, calc(30rem + 50 * ((100vw - 375rem) / (1200 - 375))), 80rem ); left: clamp( -36rem, calc(25rem - 61 * ((100vw - 375rem) / (1200 - 375))), 25rem ); } .headline--marketing .headline-images__wrapper:nth-child(1) img { width: clamp( 30rem, calc(30rem + 51 * ((100vw - 375rem) / (1200 - 375))), 81rem ); height: clamp( 35rem, calc(35rem + 52 * ((100vw - 375rem) / (1200 - 375))), 87rem ); } .headline--marketing .headline-images__wrapper:nth-child(2) { top: clamp( 20rem, calc(40rem - 20 * ((100vw - 375rem) / (1200 - 375))), 40rem ); left: clamp( -44rem, calc(25rem - 69 * ((100vw - 375rem) / (1200 - 375))), 25rem ); } .headline--marketing .headline-images__wrapper:nth-child(2) img { width: clamp( 100rem, calc(100rem + 60 * ((100vw - 375rem) / (1200 - 375))), 160rem ); height: clamp( 150rem, calc(150rem + 50 * ((100vw - 375rem) / (1200 - 375))), 200rem ); } .headline--marketing .headline-images__wrapper:nth-child(3) { top: -15rem; left: clamp( 50rem, calc(50rem + 70 * ((100vw - 375rem) / (1200 - 375))), 120rem ); } .headline--marketing .headline-images__wrapper:nth-child(3) img { width: clamp( 60rem, calc(60rem + 60 * ((100vw - 375rem) / (1200 - 375))), 120rem ); height: clamp( 50rem, calc(50rem + 66 * ((100vw - 375rem) / (1200 - 375))), 116rem ); } .headline--marketing .headline-images__wrapper:nth-child(4) { top: clamp( 25rem, calc(25rem + 25 * ((100vw - 375rem) / (1200 - 375))), 50rem ); right: clamp( -80rem, calc(0rem - 80 * ((100vw - 375rem) / (1200 - 375))), 0rem ); } .headline--marketing .headline-images__wrapper:nth-child(4) img { width: clamp( 60rem, calc(60rem + 100 * ((100vw - 375rem) / (1200 - 375))), 160rem ); height: clamp( 50rem, calc(50rem + 93 * ((100vw - 375rem) / (1200 - 375))), 143rem ); } .headline--marketing .headline-images__wrapper:nth-child(5) { top: clamp( 80rem, calc(80rem + 80 * ((100vw - 375rem) / (1200 - 375))), 160rem ); right: clamp( -20rem, calc(5rem - 25 * ((100vw - 375rem) / (1200 - 375))), 5rem ); } .headline--marketing .headline-images__wrapper:nth-child(5) img { width: clamp( 60rem, calc(60rem + 63 * ((100vw - 375rem) / (1200 - 375))), 123rem ); height: clamp( 50rem, calc(50rem + 87 * ((100vw - 375rem) / (1200 - 375))), 137rem ); } .headline-body { -webkit-filter: unset; filter: unset; } } @media (max-width: 550px) { .advantages-list { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .topbar-titling__title { margin-bottom: unset; } .topbar-titling__wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: unset; padding-bottom: unset; margin-bottom: 15rem; -webkit-box-align: unset; -ms-flex-align: unset; align-items: unset; gap: 20rem; } .topbar-titling__wrapper::before { content: unset; } .topbar-titling__images { position: relative; top: unset; right: unset; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 30rem; } .topbar-titling__images .topbar-images__background { width: 150%; top: 0; bottom: 0; height: 100%; left: -25%; background: #2c58a4; z-index: -1; position: absolute; } .form-box__inner { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } .datepicker__dropdown { width: 100%; min-width: 0; } .connect .contacts-list { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } /* .language-toggle { display: none; } */ /* */ .cases-titling__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: clamp( 10rem, calc(10rem + 10 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .cases-titling__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: clamp( 10rem, calc(10rem + 10 * ((100vw - 375rem) / (1200 - 375))), 20rem ); } .cases-titling__tag { font-family: "BebasNeue"; background: #2c58a4; padding: clamp( 8rem, calc(8rem + 7 * ((100vw - 375rem) / (1200 - 375))), 15rem ); padding-bottom: clamp( 5rem, calc(5rem + 5 * ((100vw - 375rem) / (1200 - 375))), 10rem ); font-size: clamp( 14rem, calc(14rem + 10 * ((100vw - 375rem) / (1200 - 375))), 24rem ); line-height: clamp( 16rem, calc(16rem + 10 * ((100vw - 375rem) / (1200 - 375))), 26rem ); text-transform: uppercase; color: #fbfbfb; } .upload__inner { display: none; } .menu-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 992px) { .footer-box__inner--legal { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } } @media (max-width: 768px) { .cky-consent-container { width: 100% !important; bottom: 0 !important; left: 0 !important; } .connect__footer { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .connect__footer .socials-list { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } @media (max-width: 440px) { .cky-consent-container .cky-consent-bar { padding-left: unset !important; padding-right: unset !important; } }