@charset "UTF-8"; /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } body { outline: none; margin: 0; padding: 0; background: #000; } html { scroll-behavior: smooth; font-family: 'Montserrat', sans-serif; } body, html { min-height: 100vh; } @font-face { font-family: Tongari; src: url("./../fonts/Tongari/Tongari-Regular.otf"); font-weight: 400; } @font-face { font-family: Tongari; src: url("./../fonts/Tongari/Tongari-Bold.otf"); font-weight: 700; } a { cursor: pointer; } * { box-sizing: border-box; font-optical-sizing: auto; color: #fff; font-family: 'Montserrat', sans-serif; } main { position: relative; max-width: 100%; overflow: hidden; background: black; background-repeat: no-repeat; background-position: 50% 14%; background-size: 100%; } .text-main { color: #dfdfdf; text-align: center; font-family: Lato, sans-serif; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: 0; } .heading-first { max-width: 960px; color: #fff; text-align: left; font-family: 'Montserrat', sans-serif; font-size: 64px; font-style: normal; font-weight: 700; line-height: 112.5%; letter-spacing: 0; opacity: 0; animation: .4s 1.1s forwards fadeInBottomToTopSoft; } .large-section { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 100%; background-size: 100%; } .glow-large { position: absolute; width: 840px; height: 840px; } .glow-large.left { left: -70%; } .glow-large.left.one { top: 1400px; left: -640px; } .glow-large.left.two { bottom: 782px; left: -640px; } .glow-large.right.one { top: 1400px; right: -640px; } .glow-large.right.two { right: 0; bottom: 782px; right: -640px; } @keyframes bounce { 0%, 20%, 48%, 80%, 100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes rotate { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes fadeInBottomToTopSoft { 0% { transform: translatey(20px); opacity: 0; } 100% { transform: translatey(0); opacity: 1; } } .text-p-large { display: flex; position: relative; max-width: 740px; margin-top: 25px; opacity: 0; color: #DFDFDF; font-family: 'Montserrat', sans-serif; font-size: 18px; font-style: normal; font-weight: 500; line-height: 28px; letter-spacing: 0; animation: .4s 1.4s forwards fadeInBottomToTopSoft; } .heading-second { color: #fff; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 24px; font-style: normal; font-weight: 700; line-height: 28px; letter-spacing: 0; } .btn-orange { display: flex; justify-content: center; align-items: center; margin-top: 44px; margin: 44px auto 0; padding: var(--space-300, 12px) var(--space-800, 32px); cursor: pointer; background: var(--color-surface-brand-ow, #D34037); color: var(--color-text-pure, #FFF); text-align: center; font-family: 'Montserrat', sans-serif; font-size: var(--font-size-400, 16px); font-style: normal; font-weight: var(--font-weight-medium, 500); line-height: var(--font-line-height-600, 24px); letter-spacing: var(--font-letter-spacing-regular, 1.2px); text-transform: uppercase; } .btn-orange:hover { background: #F05C48; } .to-top { display: flex; flex-direction: column; align-items: center; margin: 13px auto 0; color: #DFDFDF; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 500; line-height: normal; background-color: #000; font-weight: 500; line-height: var(--font-line-height-3, 24px); letter-spacing: var(--font-letter-spacing-regular, 1.2px); text-transform: uppercase; } .to-top svg { width: 24px; height: 24px; margin: 0 0 10px; } .to-top-section { display: flex; justify-content: center; max-width: 500px; margin: 0 auto; } .to-top-section .content-wrapper { position: relative; padding-top: 0px; z-index: 3; } html, body { background-color: #000; } :root { --color-bg: #0d0d0d; --color-title: #fff; --color-small-title: #e5e5e5; --color-txt: #ccc; --color-title-black: #1e1e1e; --color-txt-black: #535353; --color-txt-gray: #b2b2b2; --color-txt-gray-2: #b5b5b5; --color-gray: #909090; --color-300: #333; --color-primary: #eb622b; --color-primary-hover: #f18536; } header { position: fixed; top: 0; left: 0; width: 100%; padding: 0; opacity: 1; z-index: 27; height: 80px; } header * { box-sizing: border-box; font-family: 'Montserrat', sans-serif; color: #fff; } header ol, header ul, header menu { list-style: none; } header .content-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 100%; margin: 0 auto; padding: 15px 20px; opacity: 0; animation: .4s .6s forwards fadeInBottomToTopSoft; } header .download-buttons { margin: 0; } .header-container { position: relative; z-index: 2; width: 100%; background: linear-gradient(180deg, #000000 40%, rgba(0, 0, 0, 0) 100%); } .header-link { display: flex; align-items: center; margin: 0 20px; padding: 7px 0; color: #DFDFDF; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 500; line-height: 140%; border: 1px solid transparent; background: transparent; transition: .3s ease-in-out; white-space: nowrap; cursor: pointer; } .header-link.border { margin-right: 0; border: 1px solid #DFDFDF; padding: 7px 24px; justify-content: center; } .header-link.border:hover { color: #fff; background: #EB622B; border: 1px solid #EB622B; } .header-link.orange { color: #FFF; text-align: center; font-size: 16px; text-transform: uppercase; background-color: #EB622B; text-align: center; font-weight: 500; line-height: 24px; max-width: 284px; margin: 0 auto; padding: 11px 30px; white-space: nowrap; position: relative; letter-spacing: 1px; } .header-link.orange:hover { background: #F18536; } .header-link.orange svg { height: 24px; margin-right: 12px; } .header-link-container { display: none; flex-grow: 1; } .header-link.mob { position: relative; display: none; } .header-link.mob::before { position: absolute; top: 50%; left: 0; width: 4px; height: 24px; transform: translateY(-50%); content: ''; background-color: #EB622B; opacity: 0; height: 0; transition: .2s ease-in-out; } .header-link.mob.active::before { opacity: 1; height: 24px; } .header-link.mob :hover { color: #D6D6D6; } .header-buttons { display: flex; flex-direction: row; } .header-logo { display: flex; align-items: center; } .header-logo.desktop { display: flex; } .header-logo.mob { display: none; } .header-logo img { width: 156px; margin-right: 12px; } .header-logo span { display: inline-flex; position: relative; margin-left: 12px; margin-top: 6px; color: #DFDFDF; font-size: 16px; font-weight: 600; line-height: 24px; } .site-header { width: 100%; position: fixed; top: 0; z-index: 100; transition: .3s; } .site-header.black { background-color: #000; } .site-header .download-btn { padding: 16px 32px; } .site-header .header-inner { display: flex; max-width: 100%; margin: 0 auto; padding: 15px 14px 9px 16px; position: relative; z-index: 10; transition: .3s; min-height: 74px; align-items: center; } .site-header .header-inner nav { margin-left: auto; display: flex; align-items: center; } .site-header .header-inner nav ul li { margin: 0 3.5px; } .site-header .header-inner nav ul li:last-of-type { margin-left: 18px; margin-right: 6px; } .site-header .header-inner nav ul li.mob-only.decor a { font-size: 16px; font-weight: 600; line-height: 24px; } .site-header .header-inner nav ul.header-menu { display: flex; } .site-header .hamburger-menu-button { display: none; margin-left: 12px; } .hamburger-menu-button { z-index: 1; display: block; background: transparent; width: 24px; height: 24px; outline: none; border: none; cursor: pointer; padding: 0; } .hamburger-menu-button > div { position: relative; width: 24px; height: 20px; left: 2px; right: 0; margin: 0 auto; transition: .4s ease-in-out; } .hamburger-menu-button > div span { background: #fff; display: block; width: 100%; max-width: 20px; height: 2px; position: absolute; transition: .4s ease-in-out; border-radius: 0; } .hamburger-menu-button > div span:first-child { top: 3px; left: 0; } .hamburger-menu-button > div span:nth-child(2) { top: 9px; left: 0; } .hamburger-menu-button > div span:nth-child(3) { top: 15px; left: 0; } .hamburger-menu-button.close > div span { background: #DFDFDF; } .hamburger-menu-button.close > div span:first-child { transform: translateY(4px) rotate(45deg); } .hamburger-menu-button.close > div span:nth-child(2) { transform: scaleX(0); } .hamburger-menu-button.close > div span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .site-header .header-inner nav .header-menu .header-menu-inner { max-height: 0; overflow: hidden; transition: max-height .2s ease-out; position: relative; } .opening-section { max-width: 100%; background-position: top; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; position: relative; padding: 49px 0 0; background-size: cover; transform: translate3d(0, 0, 0); display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; } .opening-section .first-layer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .opening-section .text-p-large { display: flex; position: relative; max-width: 740px; margin-top: 25px; opacity: 0; color: #DFDFDF; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 500; letter-spacing: 0; animation: .4s 1.4s forwards fadeInBottomToTopSoft; } .opening-section .video-bg-container { position: absolute; top: unset; right: -104px; bottom: -109px; width: auto; max-width: 536px; mix-blend-mode: lighten; background: url("./../images/smoke-behind-animation.webp") no-repeat 50% 50%; background-size: cover; } .opening-section .hero-video-loop { position: relative; width: auto; max-width: 536px; z-index: 1; transform: translate3d(0, 0, 0) scaleX(-1); } .opening-section * { box-sizing: border-box; } .opening-section .buttons-container { position: relative; display: flex; flex-wrap: wrap; margin: 41px auto; opacity: 0; animation: .4s 1.3s forwards fadeInBottomToTopSoft; } .opening-section .button-container { display: flex; flex-direction: column; align-items: center; width: 260px; margin: 0 12px; } .opening-section .button-item { display: flex; flex-direction: column; align-items: center; width: 260px; position: relative; cursor: pointer; } .opening-section .button-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 257px; box-shadow: 0px 0px 120px 0px #000 inset; opacity: .7; } .opening-section .button-item svg { position: relative; } .opening-section .button-item.blue { background: #0D1822; transition: .2s ease-in-out; } .opening-section .button-item.blue svg .fill-color { fill: #172F49; } .opening-section .button-item.blue:hover { background: #142230; } .opening-section .button-item.orange { background: #2C170C; transition: .2s ease-in-out; } .opening-section .button-item.orange svg .fill-color { fill: #823F1B; } .opening-section .button-item.orange:hover { background: #381D10; } .opening-section .button-item.purple { background: #1C1023; transition: .2s ease-in-out; } .opening-section .button-item.purple svg .fill-color { fill: #422053; } .opening-section .button-item.purple:hover { background: #2B1935; } .opening-section .button-item.coral { background: #231313; transition: .2s ease-in-out; } .opening-section .button-item.coral svg .fill-color { fill: #4E2121; } .opening-section .button-item.coral:hover { background: #341D1D; } .opening-section .button-item-text { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); color: #ECE8E4; text-align: center; font-family: Tongari; font-size: 26px; font-style: normal; font-weight: 400; line-height: 123.077%; white-space: nowrap; } .opening-section .text-under-btn { display: flex; align-items: center; justify-content: space-between; position: relative; width: 100%; margin: 9px auto 0; color: #BFBFBF; font-family: Lato, sans-serif; font-size: 18px; font-style: normal; font-weight: 400; line-height: 155.556%; letter-spacing: 0; } .opening-section .text-under-btn::before { display: block; width: 28px; height: 28px; content: ''; background: url("./../images/crown.svg") no-repeat 50% 50%; background-size: contain; } .opening-section .text-under-btn-line { display: block; position: relative; margin: 0 10px; } .opening-section .text-under-btn-line::before { display: block; width: 40px; height: 1px; background: #BFBFBF; content: ''; } .bg-character-mob { position: relative; display: none; } .intro-text-container { width: 100%; max-width: 1436px; margin: 0 auto; position: relative; z-index: 10; padding: 148px 20px 0; } .intro-text-content { display: flex; flex-direction: column; align-items: flex-start; } @keyframes a { 0% { transform: scale(1); } to { transform: scale(0.8); } } .partners { position: relative; opacity: .7; } .partners .content-wrapper { position: relative; width: 100%; max-width: 1436px; margin: 0 auto; padding: 26px 20px 0; } .partners .content-wrapper-inner { display: flex; align-items: center; width: 100%; flex-direction: column; } .partners .text-p-large { position: relative; white-space: nowrap; margin-top: 15px; order: 0; } .partners-logo { display: flex; justify-content: space-evenly; flex-wrap: wrap; } .partners-logo img { max-height: 56.25px; margin: 22px 12px 1px; } .scroll-down-block { display: flex; flex-grow: 1; flex-direction: column; justify-content: flex-end; margin: 50px auto 10px; color: #9f9f9f; text-align: center; font-size: 15px; font-weight: 500; line-height: 150%; z-index: 10; position: relative; display: flex; } .scroll-down { position: relative; display: flex; justify-content: center; margin: 0 auto; } @keyframes a { 0% { transform: scale(1); } to { transform: scale(0.8); } } .pages-links { position: relative; max-width: 100%; width: 100%; } .pages-links .content-wrapper { position: relative; width: 100%; max-width: 1436px; margin: 0 auto; padding: 0; } .pages-links .swiper { position: relative; } .pages-links-container { display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; margin: 0 auto; } .pages-links-container.desktop { display: none; } .pages-links-container.mob { display: flex; } .pages-links .PrevArrow { cursor: pointer; position: absolute; left: 4px; width: 48px; height: 48px; padding: 8px; border: 1px solid #303030; background: var(--color-surface-primary, #101010); text-align: center; z-index: 5; transition: .2s ease-in-out; } .pages-links .PrevArrow.slick-arrow { transition: .2s ease-in-out; } .pages-links .PrevArrow.slick-arrow.slick-disabled { background: linear-gradient(0deg, rgba(105, 116, 129, 0) 0%, rgba(105, 116, 129, 0) 100%), var(--Valofessor-Mid-grey, #697481); background-blend-mode: screen, normal; } .pages-links .NextArrow { cursor: pointer; position: absolute; right: 4px; width: 48px; height: 48px; padding: 8px; border: 1px solid #303030; background: var(--color-surface-primary, #101010); z-index: 5; transition: .2s ease-in-out; display: flex; flex-grow: 1; } .pages-links .NextArrow.slick-arrow { transition: .2s ease-in-out; } .pages-links .NextArrow.slick-arrow.slick-disabled { background: linear-gradient(0deg, rgba(105, 116, 129, 0) 0%, rgba(105, 116, 129, 0) 100%), var(--Valofessor-Mid-grey, #697481); } .pages-links .PrevArrow, .pages-links .NextArrow { display: flex; align-items: center; justify-content: center; top: 269.5px; transition: .2s ease-in-out; } .pages-links-item { position: relative; max-width: unset; margin: 20px 0; display: flex; flex-direction: column; align-items: center; max-width: unset; min-width: unset; } .pages-links-item-img { max-height: 317px; height: 317px; max-width: 100%; } .pages-links-item-img img { max-width: 100%; max-height: 100%; } .pages-links-item-text { display: flex; flex-direction: column; align-items: center; justify-content: center; } .pages-links-item-text .text-main { max-width: 335px; margin: 10px 16px; padding: 0 0 24px; border-bottom: 1px solid #303030; } .pages-links-item .heading-second { color: #fff; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 24px; font-style: normal; font-weight: 700; line-height: 28px; letter-spacing: 0; } .pages-links-item .heading-second.large { text-align: center; font-size: 24px; font-weight: 700; line-height: 28px; } .pages-links-item.large .pages-links-item-img { max-width: 100%; } .pages-links-item.large .heading-second { color: #fff; font-size: 24px; font-style: normal; font-weight: 700; line-height: 28px; letter-spacing: 0; } .pages-links-item.large.two { position: relative; flex-direction: column-reverse; justify-content: flex-end; width: unset; max-width: 1159px; margin-top: 0; margin: 0; } .pages-links-item.large.three .pages-links-item-img { position: relative; } .pages-links-item-links { display: flex; flex-direction: column; } .pages-links-item-links { margin-top: 14px; } .pages-links-item-links a { margin-bottom: 24px; position: relative; display: flex; align-items: center; color: #BFBFBF; text-align: center; font-size: 14px; font-style: normal; font-weight: 500; line-height: 24px; letter-spacing: 0px; cursor: pointer; text-decoration: none; transition: .2s ease-in-out; } .pages-links-item-links a::before { position: relative; display: inline-flex; align-items: center; width: 24px; height: 24px; margin-right: 7.5px; content: ''; background: url("./../images/Link.svg") no-repeat 50% 50%; background-size: 100%; } .swiper.swiper-one { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; max-width: 100%; overflow: hidden; } .swiper-button-next:hover svg { transform: translateX(2px); } .swiper-button-prev { position: absolute; top: 49.5%; left: -10px !important; transition: .3s ease-in-out; } .swiper-button-prev svg { transition: .3s ease-in-out; transform: translateX(0px); } .swiper-button-prev:hover svg { transform: translateX(-2px); } .swiper-pagination { position: relative; min-height: 12px; margin: 36px auto 0; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 7px; } .swiper-button-next, .swiper-button-prev { display: flex; } .swiper-pagination-bullet { background: #9F9F9F; width: 10px; height: 10px; gap: 0px; border-radius: 50%; border: 2px solid #000; opacity: 1; } .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 12px; height: 12px; gap: 0px; border-radius: 50%; border: 2px solid #fff; background: transparent; } .swiper-slide-blank { display: none !important; } .swiper.swiper-one { transition: height 0.4s ease; } .contacts-form { position: relative; } .contacts-form .content-wrapper { display: flex; justify-content: flex-end; position: relative; width: 100%; max-width: 1436px; margin: 0 auto; padding: 73px 20px 63px; } .contacts-form .form-inner { position: relative; width: 100%; max-width: 456px; margin: 0 auto; } .contacts-form fieldset { border: none; } .contacts-form .input-row-item { position: relative; margin-bottom: 24px; } .contacts-form .form-background { position: absolute; right: 31vw; max-width: 100%; max-height: 448px; height: auto; opacity: 0; } .contacts-form .row-flex > div:not(.button-row) { flex: 1; } .contacts-form .text-main { text-align: center; } .contacts-form .input-row-item.error .alert-validation { display: block; } .contacts-form .input-row-item label { font-family: var(--font-family-brand); color: #606060; font-size: 14px; position: absolute; top: 15px; left: 16px; line-height: 24px; transition: all .3s ease; display: flex; gap: 4px; align-items: center; z-index: 1; font-weight: 400; } .contacts-form .input-row-item label span { color: var(--color-text-critical); position: relative; bottom: 0; } .contacts-form .input-row-item input, .contacts-form .input-row-item textarea { width: 100%; max-width: 450px; border: 0px solid transparent; background-color: #fff; border-radius: 0; height: 48px; caret-color: var(--color-text-tertiary, #606060); padding: 12px 16px; box-shadow: none; margin: 0; color: var(--color-text-tertiary, #606060); font-family: var(--font-family-brand, Montserrat); font-size: var(--font-size-350, 14px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-600, 24px); letter-spacing: var(--font-letter-spacing-default, 0px); } .contacts-form .input-row-item input::placeholder, .contacts-form .input-row-item textarea::placeholder { color: var(--color-text-tertiary, #9f9f9f); } .contacts-form .input-row-item input:focus + label, .contacts-form .input-row-item input:not(:placeholder-shown) + label, .contacts-form .input-row-item textarea:focus + label, .contacts-form .input-row-item textarea:not(:placeholder-shown) + label { top: -1px; font-size: var(--font-size-300); left: 13px; } .contacts-form .input-row-item input:-webkit-autofill, .contacts-form .input-row-item textarea:-webkit-autofill { -webkit-box-shadow: none !important; -webkit-text-fill-color: var(--color-text-primary) !important; transition: background-color 5000s ease-in-out 0s; } .contacts-form .input-row-item input:-webkit-autofill:active, .contacts-form .input-row-item input:-webkit-autofill:focus, .contacts-form .input-row-item input:-webkit-autofill:hover, .contacts-form .input-row-item textarea:-webkit-autofill:active, .contacts-form .input-row-item textarea:-webkit-autofill:focus, .contacts-form .input-row-item textarea:-webkit-autofill:hover { transition-delay: 9999s; transition: background-color, color; } .contacts-form .input-row-item textarea { height: 140px; resize: none; padding-top: 23px; margin-bottom: 0; } .contacts-form .input-row-item .alert-validation { padding-top: var(--space-100); font-family: var(--font-family-brand); font-size: var(--font-size-350); font-weight: var(--font-weight-medium); line-height: 140%; display: none; color: var(--color-text-critical); } .contacts-form .input-row-item .alert-validation svg { width: var(--space-500); height: var(--space-500); margin-bottom: calc(-1 * var(--space-100)); } .contacts-form .button-row { margin-top: var(--space-600); } .contacts-form .button-row button { position: relative; transition: all .15s; margin: 0 auto; } .contacts-form .button-row button .submit-button-text { font-size: var(--font-line-height-400); transition: all .15s; } .contacts-form .button-row button.loading { pointer-events: none; min-width: var(--space-1200); padding: 7px 0; border-radius: 50px; } .contacts-form .button-row button.loading .submit-button-text { font-size: 0; } .contacts-form .button-row button.loading .loader { opacity: 1; transform: scale(1); } .contacts-form .button-row button.loading .loader svg { animation: .75s linear rotating infinite; } .contacts-form .button-row button .loader { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 18px; height: 18px; transition: opacity .4s, transform .4s ease-in-out; transform: scale(0.4); opacity: 0; } .contacts-form .button-row button .loader svg { width: 18px; height: 18px; } .contacts-form .general-form-error { background-color: var(--color-text-critical); color: #fff; width: 100%; line-height: var(--font-line-height-500); font-size: var(--font-size-400); text-align: center; z-index: 8; padding: var(--space-200) var(--space-400); margin-top: 21px; display: none; } .contacts-form .general-form-error.active { display: block; } .contacts-form .heading-second { margin: 0 0 11px; text-align: center; font-size: var(--font-size-800, 32px); font-style: normal; font-weight: var(--font-weight-bold, 700); line-height: var(--font-line-height-1000, 40px); } .contacts-form .text-main { color: #D6D6D6; max-width: 451px; padding: 0 17px; } .contacts-form .text-main a { color: var(--OW-Red, #D34037); font-family: var(--font-family-default, Lato); font-size: var(--font-size-450, 16px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: 24px; letter-spacing: var(--font-letter-spacing-default, 0px); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; cursor: pointer; } .contacts-form .text-main a:hover { text-decoration: none; } .contacts-form .contacts-form-wrapper { padding-top: 21px; } .contacts-form .submit-button { position: relative; display: flex; height: 48px; padding: var(--space-300, 12px) var(--space-800, 32px); justify-content: center; align-items: center; background: var(--color-surface-brand-ow, #D34037); cursor: pointer; transition: .2s ease-in-out; } .contacts-form .submit-button:hover { background: #F05C48; } .multi-list.error .select-dropdown .dropdown .dropdown-selected-items { border-color: var(--color-text-critical); } .multi-list.error .select-dropdown .dropdown .alert-validation { display: block; } .multi-list .select-dropdown { position: relative; width: 100%; max-width: 610px; user-select: none; } .multi-list .select-dropdown .dropdown { position: relative; transition: opacity 150ms; } .multi-list .select-dropdown .dropdown .placeholder-label { pointer-events: none; } .multi-list .select-dropdown .dropdown.is-open { z-index: 2; } .multi-list .select-dropdown .dropdown.is-open .dropdown-selected-items { border-color: var(--color-border-primary); } .multi-list .select-dropdown .dropdown.is-open .dropdown-selected-items svg { transform: rotate(0deg); } .multi-list .select-dropdown .dropdown.is-open .placeholder-label { top: 2px; font-size: var(--font-size-300); left: 13px; } .multi-list .select-dropdown .dropdown.is-open .dropdown-list-wrapper { display: block; } .multi-list .select-dropdown .dropdown .dropdown-selected-items { position: relative; border: 1px solid transparent; color: var(--color-text-tertiary, #9f9f9f); background-color: var(--color-surface-on-surface-secondary, rgba(255, 255, 255, 0.16)); min-height: 48px; display: flex; gap: 8px; transition: color 150ms; padding: 10px 12px; transition: border 300ms ease; } .multi-list .select-dropdown .dropdown .dropdown-selected-items:hover { border-color: var(--color-border-primary); } .multi-list .select-dropdown .dropdown .dropdown-selected-items.error { border: 1px solid #D32F2F; } .multi-list .select-dropdown .dropdown .dropdown-selected-items.error + .validation { display: block; color: #FC3737; } .multi-list .select-dropdown .dropdown .dropdown-selected-items > svg { width: 24px; height: 24px; color: var(--color-text-tertiary, #9f9f9f); transition: color 150ms ease; pointer-events: none; margin-top: 2px; } .multi-list .select-dropdown .dropdown .dropdown-selected-items:has(.tag-list li) + .placeholder-label { top: 2px; font-size: var(--font-size-300); left: 13px; } .multi-list .select-dropdown .dropdown .dropdown-selected-items .tag-list { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; padding: 16px 0 0; } .multi-list .select-dropdown .dropdown .dropdown-selected-items .tag-list .tag { display: flex; align-items: center; padding: 2px 6px 2px 12px; gap: 4px; background-color: var(--color-surface-primary); border-radius: 32px; font-size: 13px; height: 24px; } .multi-list .select-dropdown .dropdown .dropdown-selected-items .tag-list .tag button { width: 20px; height: 20px; border-radius: 50%; color: var(--color-text-tertiary, #9f9f9f); pointer-events: all; padding: 0; } .multi-list .select-dropdown .dropdown .dropdown-selected-items .tag-list .tag button:hover, .multi-list .select-dropdown .dropdown .dropdown-selected-items .tag-list .tag button:focus { background-color: transparent !important; color: white; } .multi-list .select-dropdown .dropdown .dropdown-selected-items .tag-list .tag button svg { width: 20px; height: 20px; pointer-events: none; } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper { position: absolute; top: -290px; width: 100%; z-index: 1; display: none; } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .close-list { position: absolute; width: 24px; height: 24px; right: 8px; top: 4px; z-index: 1; padding: 0; color: var(--color-neutral-88); } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .close-list:hover { color: white; background-color: transparent !important; } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .dropdown-list { border: 1px solid var(--color-border-on-surface, rgba(255, 255, 255, 0.2)); background-color: var(--color-surface-secondary); max-height: 290px; list-style: none; padding: 0; width: 100%; overflow-y: scroll; } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .dropdown-list::-webkit-scrollbar { width: 4px; height: 4px; background-color: var(--color-surface-primary); } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .dropdown-list::-webkit-scrollbar-thumb { border-width: 0; background: var(--color-surface-quaternary); background-clip: padding-box; } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .dropdown-list li { padding: 8px 32px 8px 12px; height: 40px; background-color: var(--color-surface-secondary); transition: 0.15s ease; display: flex; gap: 12px; align-items: center; position: relative; } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .dropdown-list li label { color: var(--color-text-primary, #DFDFDF); font-family: var(--font-family-brand); font-size: var(--font-size-350, 14px); font-weight: var(--font-weight-regular, 400); line-height: 16px; margin: 0; font-weight: 400; flex: 1; height: 40px; display: flex; position: unset; } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .dropdown-list li label::after { content: ''; position: absolute; left: 0; z-index: 0; width: 100%; height: 100%; } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .dropdown-list li input { background-color: transparent; position: relative; z-index: 1; width: 20px; height: 20px; padding: 0; } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .dropdown-list li input:checked { border: 1px solid var(--color-surface-brand-cf); background-color: var(--color-surface-brand-cf); } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .dropdown-list li:hover { background-color: var(--color-surface-on-surface-primary-hover, rgba(255, 255, 255, 0.16)); } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .dropdown-list li .selected { background-color: var(--color-background-cf, #101010); } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .dropdown-list li:hover input:checked, .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .dropdown-list li .selected input:checked { border: 1px solid var(--color-surface-brand-cf); background: var(--color-surface-brand-cf); background-position: center center; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2221%22%20viewBox%3D%220%200%2020%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0D%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.6%205.55501C16.0418%205.90007%2016.1314%206.55277%2015.8%207.01286L9.8%2015.3434C9.62607%2015.5849%209.36005%2015.7359%209.07089%2015.7573C8.78173%2015.7787%208.49788%2015.6684%208.29289%2015.455L5.29289%2012.331C4.90237%2011.9243%204.90237%2011.265%205.29289%2010.8583C5.68342%2010.4517%206.31658%2010.4517%206.70711%2010.8583L8.89181%2013.1333L14.2%205.76327C14.5314%205.30318%2015.1582%205.20994%2015.6%205.55501Z%22%20fill%3D%22%23F4F2FF%22/%3E%0D%0A%3C/svg%3E%0D%0A"); } :root { --divider-gradient: linear-gradient(180deg, #131313 0%, rgba(19, 19, 19, 0.00) 100%); } :root { --font-family-brand: "Montserrat", sans-serif; --font-family-default: "Lato", sans-serif; --font-family-code: "Consolas", sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-line-height-350: 14px; /* 31.818% */ --font-line-height-400: 16px; /* 36.364% */ --font-line-height-500: 20px; /* 45.455% */ --font-line-height-600: 24px; /* 54.545% */ --font-line-height-700: 28px; /* 63.636% */ --font-line-height-800: 32px; /* 72.727% */ --font-line-height-1000: 40px; /* 90.909% */ --font-line-height-1300: 52px; /* 118.182% */ --font-line-height-1800: 72px; /* 163.636% */ --font-line-height-2600: 104px; /* 236.364% */ --font-letter-spacing-default: 0px; --font-letter-spacing-regular: 1.2px; --font-size-300: 12px; --font-size-350: 14px; --font-size-400: 16px; --font-size-450: 18px; --font-size-500: 20px; --font-size-550: 22px; --font-size-600: 24px; --font-size-800: 32px; --font-size-1100: 44px; --font-size-1600: 64px; --font-size-2400: 96px; --color-brand-ow: #D34037; --color-hover-brand-ow: #F05C48; --color-brand-cf: #EB622B; --color-hover-brand-cf: #F18536; --color-brand-tb: #41C4C3; --color-hover-brand-tb: #5DE3E2; --color-brand-el: #9FEAF9; --color-brand-el-2: #69C5EA; --color-brand-nt: #B5DF30; --color-hover-brand-nt: #C4E559; --color-neutral-0: #000000; --color-neutral-8: #101010; --color-neutral-16: #202020; --color-neutral-24: #303030; --color-neutral-32: #404040; --color-neutral-40: #505050; --color-neutral-48: #606060; --color-neutral-80: #9F9F9F; --color-neutral-88: #AFAFAF; --color-neutral-96: #BFBFBF; --color-neutral-104: #CFCFCF; --color-neutral-112: #DFDFDF; --color-neutral-120: #EFEFEF; --color-neutral-128: #FFFFFF; --color-infographic-ow-1: var(--color-brand-ow); --color-infographic-ow-2: #942B27; --color-infographic-ow-3: #FFD2D0; --color-infographic-ow-4: #FFA4A1; --color-infographic-ow-5: #EC7068; --color-infographic-cf-1: var(--color-brand-cf); --color-infographic-cf-2: #A4491E; --color-infographic-cf-3: #FFDCCB; --color-infographic-cf-4: #FFB897; --color-infographic-cf-5: #F8936D; --color-infographic-tb-1: var(--color-brand-tb); --color-infographic-tb-2: #2E8989; --color-infographic-tb-3: #D4FFFF; --color-infographic-tb-4: #AFF; --color-infographic-tb-5: #7ED5D6; --color-functional-critical-light: #FE3737; --color-functional-critical-dark: #D93025; --color-functional-warning-light: #E07400; --color-functional-warning-dark: #C35404; --color-functional-success-light: #32A100; --color-functional-success-dark: #018901; --color-functional-info-light: #2690E7; --color-functional-info-dark: #0074C7; --color-alfa-brand: rgba(211, 64, 55, 0.64); --color-alfa-brand-ow-16: rgba(211, 64, 55, 0.16); --color-alfa-brand-ow-20: rgba(211, 64, 55, 0.20); --color-alfa-brand-ow-64: rgba(211, 64, 55, 0.64); --color-alfa-brand-cf-16: rgba(235, 98, 43, 0.16); --color-alfa-brand-cf-20: rgba(235, 98, 43, 0.20); --color-alfa-brand-cf-64: rgba(235, 98, 43, 0.64); --color-alfa-dark-8: rgba(255, 255, 255, 0.08); --color-alfa-dark-12: rgba(255, 255, 255, 0.12); --color-alfa-dark-16: rgba(255, 255, 255, 0.16); --color-alfa-dark-24: rgba(255, 255, 255, 0.24); --color-alfa-dark-32: rgba(255, 255, 255, 0.32); --color-alfa-light-4: rgba(0, 0, 0, 0.04); --color-alfa-light-8: rgba(0, 0, 0, 0.08); --color-alfa-light-12: rgba(0, 0, 0, 0.12); --color-alfa-light-16: rgba(0, 0, 0, 0.16); --color-alfa-light-24: rgba(0, 0, 0, 0.24); --color-alfa-critical-8: rgba(217, 48, 37, 0.08); --color-alfa-critical-16: rgba(217, 48, 37, 0.16); --color-alfa-critical-56: rgba(217, 48, 37, 0.56); --color-alfa-critical-64: rgba(217, 48, 37, 0.64); --color-alfa-warning-8: rgba(195, 84, 4, 0.08); --color-alfa-warning-16: rgba(195, 84, 4, 0.16); --color-alfa-warning-56: rgba(195, 84, 4, 0.56); --color-alfa-warning-64: rgba(195, 84, 4, 0.64); --color-alfa-success-8: rgba(1, 137, 1, 0.08); --color-alfa-success-16: rgba(1, 137, 1, 0.16); --color-alfa-success-56: rgba(1, 137, 1, 0.56); --color-alfa-success-64: rgba(1, 137, 1, 0.64); --color-alfa-info-8: rgba(0, 116, 199, 0.08); --color-alfa-info-16: rgba(0, 116, 199, 0.16); --color-alfa-info-56: rgba(0, 116, 199, 0.56); --color-alfa-info-64: rgba(0, 116, 199, 0.64); --color-alfa-el-16: rgba(159, 234, 249, 0.16); --color-alfa-el-1-20: rgba(159, 234, 249, 0.20); --color-alfa-el-2-56: rgba(159, 234, 249, 0.56); --color-surface-pure: var(--color-neutral-0); --color-surface-primary: var(--color-neutral-8); --color-surface-secondary: var(--color-neutral-16); --color-surface-tertiary: var(--color-neutral-24); --color-surface-quaternary: var(--color-neutral-48); --color-surface-invert: var(--color-neutral-128); --color-surface-brand-ow: var(--color-brand-ow); --color-surface-brand-cf: var(--color-brand-cf); --color-surface-brand-tb: var(--color-brand-tb); --color-surface-brand-el: var(--color-brand-el); --color-surface-brand-nt: var(--color-brand-nt); --color-surface-critical: var(--color-functional-critical-dark); --color-surface-warning: var(--color-functional-warning-dark); --color-surface-success: var(--color-functional-success-dark); --color-surface-info: var(--color-functional-info-dark); --color-surface-note-regular: var(--color-alfa-dark-16); --color-surface-note-critical: var(--color-alfa-critical-16); --color-surface-note-warning: var(--color-alfa-warning-16); --color-surface-note-success: var(--color-alfa-success-16); --color-surface-note-info: var(--color-alfa-info-16); --color-surface-focus-brand-ow: var(--color-alfa-brand-ow-20); --color-surface-focus-brand-el: var(--color-alfa-el-16); --color-surface-focus-brand-cf: var(--color-alfa-brand-cf-20); --color-surface-on-surface: var(--color-alfa-dark-16); --color-hover-on-surface-1: var(--color-alfa-dark-16); --color-hover-on-surface-2: var(--color-alfa-dark-24); --color-text-invert: var(--color-neutral-0); --color-text-cta-tb: var(--color-neutral-0); --color-text-cta-nt: var(--color-neutral-0); --color-text-tertiary: var(--color-neutral-80); --color-text-secondary: var(--color-neutral-96); --color-text-primary: var(--color-neutral-112); --color-text-pure: var(--color-neutral-128); --color-text-cta-ow: var(--color-neutral-128); --color-text-cta-cf: var(--color-neutral-128); --color-text-brand-ow: var(--color-brand-ow); --color-text-brand-cf: var(--color-brand-cf); --color-text-brand-tebex: var(--color-brand-tb); --color-text-brand-nt: var(--color-brand-nt); --color-text-hover-brand-ow: var(--color-hover-brand-ow); --color-text-hover-brand-cf: var(--color-hover-brand-cf); --color-text-hover-brand-tebex: var(--color-hover-brand-tb); --color-text-hover-brand-nt: var(--color-hover-brand-nt); --color-text-critical: var(--color-functional-critical-light); --color-text-warning: var(--color-functional-warning-light); --color-text-success: var(--color-functional-success-light); --color-text-info: var(--color-functional-info-light); --color-icon-cta-nt-surface: var(--color-neutral-0); --color-icon-cta-tb-surface: var(--color-neutral-0); --color-icon-secondary: var(--color-neutral-80); --color-icon-primary: var(--color-neutral-112); --color-icon-pure: var(--color-neutral-128); --color-icon-cta-ow-surface: var(--color-neutral-128); --color-icon-cta-cf-surface: var(--color-neutral-128); --color-icon-brand-ow: var(--color-brand-ow); --color-icon-brand-cf: var(--color-brand-cf); --color-icon-brand-tb: var(--color-brand-tb); --color-icon-brand-nt: var(--color-brand-nt); --color-icon-critical: var(--color-functional-critical-light); --color-icon-warning: var(--color-functional-warning-light); --color-icon-success: var(--color-functional-success-light); --color-icon-info: var(--color-functional-info-light); --color-border-tertiary: var(--color-neutral-24); --color-border-secondary: var(--color-neutral-48); --color-border-primary: var(--color-neutral-96); --color-border-note: var(--color-alfa-dark-32); --color-border-critical: var(--color-alfa-critical-64); --color-border-warning: var(--color-alfa-warning-64); --color-border-success: var(--color-alfa-success-64); --color-border-info: var(--color-alfa-info-64); --color-border-ow: var(--color-alfa-brand); --color-border-el: var(--color-alfa-el-2-56); --color-border-on-surface: var(--color-alfa-dark-16); --space-0: 0px; --space-50: 2px; --space-100: 4px; --space-200: 8px; --space-300: 12px; --space-400: 16px; --space-500: 20px; --space-600: 24px; --space-800: 32px; --space-1000: 40px; --space-1200: 48px; --space-1400: 56px; --space-1600: 64px; --space-1800: 72px; --space-2000: 80px; --space-2200: 88px; --space-2400: 96px; --space-2600: 104px; --space-3200: 128px; --space-4000: 160px; --space-4800: 192px; --space-5600: 224px; --space-6400: 256px; } html[data-theme="light"] { --color-surface-pure: var(--color-neutral-128); --color-surface-primary: var(--color-neutral-120); --color-surface-secondary: var(--color-neutral-120); --color-surface-tertiary: var(--color-neutral-104); --color-surface-invert: var(--color-neutral-0); --color-surface-focus-brand-ow: var(--color-alfa-brand-ow-16); --color-surface-focus-brand-el: var(--color-alfa-el-1-20); --color-surface-focus-brand-cf: var(--color-alfa-brand-cf-16); --color-hover-on-surface-1: var(--color-alfa-light-8); --color-hover-on-surface-2: var(--color-alfa-light-16); --color-surface-on-surface: var(--color-alfa-light-8); --color-surface-note-regular: var(--color-alfa-light-4); --color-surface-note-critical: var(--color-alfa-critical-8); --color-surface-note-warning: var(--color-alfa-warning-8); --color-surface-note-success: var(--color-alfa-success-8); --color-surface-note-info: var(--color-alfa-info-8); --color-text-pure: var(--color-neutral-0); --color-text-primary: var(--color-neutral-16); --color-text-secondary: var(--color-neutral-32); --color-text-tertiary: var(--color-neutral-48); --color-text-invert: var(--color-neutral-128); --color-text-critical: var(--color-functional-critical-dark); --color-text-warning: var(--color-functional-warning-dark); --color-text-success: var(--color-functional-success-dark); --color-text-info: var(--color-functional-info-dark); --color-icon-pure: var(--color-neutral-0); --color-icon-primary: var(--color-neutral-0); --color-icon-secondary: var(--color-neutral-48); --color-icon-critical: var(--color-functional-critical-dark); --color-icon-warning: var(--color-functional-warning-dark); --color-icon-success: var(--color-functional-success-dark); --color-icon-info: var(--color-functional-info-dark); --color-border-primary: var(--color-neutral-16); --color-border-secondary: var(--color-neutral-48); --color-border-tertiary: var(--color-neutral-96); --color-border-ow: var(--color-alfa-brand); --color-border-el: var(--color-brand-el-2); --color-border-note: var(--color-alfa-light-24); --color-border-on-surface: var(--color-alfa-light-16); --color-border-critical: var(--color-alfa-critical-56); --color-border-warning: var(--color-alfa-warning-56); --color-border-info: var(--color-alfa-info-56); } button, a.btn-primary, a.btn-secondary, a.btn-secondary-small { display: flex; align-items: center; font-family: var(--font-family-brand); border: none; text-transform: uppercase; background-color: inherit; font-size: var(--font-size-400); font-weight: var(--font-weight-regular); letter-spacing: 1.2px; transition: all 150ms ease; cursor: pointer; width: fit-content; text-align: center; padding: var(--space-200) var(--space-800); } button:hover, button:active, a.btn-primary:hover, a.btn-primary:active, a.btn-secondary:hover, a.btn-secondary:active, a.btn-secondary-small:hover, a.btn-secondary-small:active { border-color: transparent !important; } button.btn-primary, button.btn-secondary, a.btn-primary.btn-primary, a.btn-primary.btn-secondary, a.btn-secondary.btn-primary, a.btn-secondary.btn-secondary, a.btn-secondary-small.btn-primary, a.btn-secondary-small.btn-secondary { height: var(--space-1200); padding: var(--space-300) var(--space-800); } button.btn-primary, a.btn-primary.btn-primary, a.btn-secondary.btn-primary, a.btn-secondary-small.btn-primary { background-color: var(--color-surface-brand-cf); color: var(--color-text-pure); } button.btn-secondary, a.btn-primary.btn-secondary, a.btn-secondary.btn-secondary, a.btn-secondary-small.btn-secondary { background-color: transparent; color: var(--color-text-primary); border: 1px solid; } button.btn-secondary-small, a.btn-primary.btn-secondary-small, a.btn-secondary.btn-secondary-small, a.btn-secondary-small.btn-secondary-small { font-family: var(--font-family-brand); background-color: transparent; color: var(--color-text-primary); text-transform: none; height: var(--space-1000); border: 1px solid; line-height: 134%; } button.btn-secondary-small.is-active, a.btn-primary.btn-secondary-small.is-active, a.btn-secondary.btn-secondary-small.is-active, a.btn-secondary-small.btn-secondary-small.is-active { outline: none; background-color: var(--color-surface-brand-cf-hover); border-color: var(--color-surface-brand-cf-hover); color: var(--color-text-pure); } button.icon, a.btn-primary.icon, a.btn-secondary.icon, a.btn-secondary-small.icon { display: flex; align-items: center; gap: var(--space-200); } button.icon svg, a.btn-primary.icon svg, a.btn-secondary.icon svg, a.btn-secondary-small.icon svg { width: var(--space-600); height: var(--space-600); transition: color 150ms ease; } button:hover, button:focus, a.btn-primary:hover, a.btn-primary:focus, a.btn-secondary:hover, a.btn-secondary:focus, a.btn-secondary-small:hover, a.btn-secondary-small:focus { outline: none; background-color: var(--color-surface-brand-cf-hover); border-color: var(--color-surface-brand-cf-hover); color: var(--color-text-pure); } button svg, a.btn-primary svg, a.btn-secondary svg, a.btn-secondary-small svg { pointer-events: none; } button:disabled, a.btn-primary:disabled, a.btn-secondary:disabled, a.btn-secondary-small:disabled { opacity: 0.3; pointer-events: none; } .toggle-btn { padding-top: var(--space-600); min-height: var(--space-600); display: flex; width: fit-content; } .toggle-btn label { display: flex; align-items: center; flex: 1; cursor: pointer; } .toggle-btn label > * + * { margin-left: var(--space-400); } .toggle-btn span { flex-grow: 1; } .toggle-btn b { margin: 0 var(--space-400); flex-shrink: 0; display: flex; width: var(--space-1000); height: var(--space-600); border-radius: 12.5px; position: relative; background-color: var(--color-neutral-112); transition: background-color 0.15s; z-index: 1; overflow: hidden; } .toggle-btn b:before { content: ""; position: absolute; transition: 0.15s; background: var(--color-surface-brand-cf); top: 0; bottom: 0; left: 0; margin: var(--space-100); width: var(--space-400); height: var(--space-400); border-radius: 50%; background-color: var(--color-surface-brand-cf); transition: 300ms; } .toggle-btn input[type="checkbox"]:checked + b::before { transform: translateX(16px); } .toggle-btn:hover b::before { background-color: var(--color-surface-brand-cf-hover); } select { height: var(--space-1200); width: 100%; padding: 0 var(--space-300); font-size: var(--space-400); outline: none; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea { font-family: var(--font-family-brand); border: none; color: var(--color-text-invert); background-color: var(--color-surface-invert); height: var(--space-1200); width: 100%; padding: 0 var(--space-300); font-size: var(--font-size-350); font-weight: var(--font-weight-medium); outline: none; caret-color: var(--color-surface-brand-cf); } input[type="text"]:hover, input[type="text"]:focus, input[type="email"]:hover, input[type="email"]:focus, input[type="password"]:hover, input[type="password"]:focus, input[type="number"]:hover, input[type="number"]:focus, textarea:hover, textarea:focus { background-color: var(--color-neutral-112); } input[type="text"]:disabled, input[type="text"]:read-only, input[type="text"].disabled, input[type="email"]:disabled, input[type="email"]:read-only, input[type="email"].disabled, input[type="password"]:disabled, input[type="password"]:read-only, input[type="password"].disabled, input[type="number"]:disabled, input[type="number"]:read-only, input[type="number"].disabled, textarea:disabled, textarea:read-only, textarea.disabled { background: var(--color-surface-secondary); color: var(--color-text-tertiary); pointer-events: none; } input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, input[type="number"]::placeholder, textarea::placeholder { color: var(--color-text-invert); } input[type="checkbox"] { appearance: none; width: var(--space-500); height: var(--space-500); background-color: var(--color-surface-secondary); border: 1px solid var(--color-neutral-80); } input[type="checkbox"]:hover, input[type="checkbox"]:focus { border: 1px solid var(--color-neutral-80); background: rgba(255, 255, 255, 0.16); } input[type="checkbox"]:checked { border: 1px solid var(--color-surface-brand-cf); background: var(--color-surface-brand-cf); background-position: center center; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2221%22%20viewBox%3D%220%200%2020%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0D%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.6%205.55501C16.0418%205.90007%2016.1314%206.55277%2015.8%207.01286L9.8%2015.3434C9.62607%2015.5849%209.36005%2015.7359%209.07089%2015.7573C8.78173%2015.7787%208.49788%2015.6684%208.29289%2015.455L5.29289%2012.331C4.90237%2011.9243%204.90237%2011.265%205.29289%2010.8583C5.68342%2010.4517%206.31658%2010.4517%206.70711%2010.8583L8.89181%2013.1333L14.2%205.76327C14.5314%205.30318%2015.1582%205.20994%2015.6%205.55501Z%22%20fill%3D%22%23F4F2FF%22/%3E%0D%0A%3C/svg%3E%0D%0A"); } input[type="checkbox"]:checked:hover { background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2221%22%20viewBox%3D%220%200%2020%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0D%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.6%205.55501C16.0418%205.90007%2016.1314%206.55277%2015.8%207.01286L9.8%2015.3434C9.62607%2015.5849%209.36005%2015.7359%209.07089%2015.7573C8.78173%2015.7787%208.49788%2015.6684%208.29289%2015.455L5.29289%2012.331C4.90237%2011.9243%204.90237%2011.265%205.29289%2010.8583C5.68342%2010.4517%206.31658%2010.4517%206.70711%2010.8583L8.89181%2013.1333L14.2%205.76327C14.5314%205.30318%2015.1582%205.20994%2015.6%205.55501Z%22%20fill%3D%22%23F4F2FF%22/%3E%0D%0A%3C/svg%3E%0D%0A"); } textarea { min-height: 137px; padding-top: 10px; resize: vertical; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out" !important; -webkit-transition-delay: 9999s !important; -webkit-box-shadow: 0 0 0 40px #202020 inset !important; } .loader { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 18px; height: 18px; transition: opacity 0.4s, transform 0.4s ease-in-out; transform: scale(0.4); opacity: 0; } .loader svg { width: 18px; height: 18px; } @keyframes rotating { to { transform: rotate(360deg); } } .is-loading::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: var(--space-1000); height: var(--space-1000); border-radius: 50px; border: 5px solid white; border-top-color: transparent; animation: rotating 2s linear infinite; z-index: 1; } .darker-section { background: var(--color-surface-pure); } .brighter-section { background: var(--color-surface-primary); } .flex { display: flex; } .column { flex-direction: column; } .row { flex-direction: row; } .justify-center { justify-content: center; } .align-center { align-items: center; } .section-vertical-padding { padding: var(--space-2400) 0; } :root { --picker-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 15L6 10.4015L7.17029 9L12 12.7016L16.8297 9L18 10.4015L12 15Z' fill='%239F9F9F'/%3E%3C/svg%3E"); } .mail-chimp-shadow-form { position: fixed; bottom: 0; pointer-events: none; opacity: 0; } .form-section { padding: 0 var(--space-500); background-color: var(--color-surface-primary); } .form-section .inner { max-width: 1396px; margin: auto; position: relative; display: flex; justify-content: space-between; align-items: center; } .form-section .inner .right-box h3 { margin-bottom: var(--space-600); } .form-section .inner .right-box .actions { padding-top: var(--space-600); display: flex; flex-wrap: wrap; gap: var(--space-500); } .form-section .inner .right-box .actions > * { width: calc(50% - calc(var(--space-600) / 2)); justify-content: center; align-items: center; padding-inline: 0; } .form-section .inner .left-box { position: relative; right: calc(-1 * var(--space-800)); } .form-section .inner .left-box img { width: 100%; } .form-section .inner .left-box a { position: absolute; right: 0; left: 0; bottom: var(--space-2400); margin: auto; z-index: 1; } .popup-form-container { position: fixed; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 100; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; pointer-events: none; } .popup-form-container .popup-bg { position: absolute; width: 100%; height: 100%; z-index: -1; } .popup-form-container .btn-close { position: absolute; right: 0; top: 0; width: var(--space-600); height: var(--space-600); background: none; padding: 0; display: flex; align-items: center; justify-content: center; border: none; margin: 4px; z-index: 4; color: var(--color-neutral-88); } .popup-form-container .btn-close:hover { color: var(--color-surface-brand-cf); background-color: transparent !important; } .popup-form-container.is-open { opacity: 1; pointer-events: all; } .popup-form-container .popup-form { position: relative; padding: 32px var(--space-600) var(--space-600); min-height: 580px; max-width: 1082px; overflow: auto; background-color: var(--color-surface-primary); border: 1px solid var(--color-border-tertiary); } .popup-form-container .popup-form .submit-button { background-color: var(--color-surface-brand-cf) !important; } .popup-form-container .popup-form .submit-button:hover { background-color: var(--color-hover-brand-cf) !important; } .popup-form-container .popup-form .form-title { font-size: var(--font-size-600); line-height: 133.333%; margin-bottom: var(--space-300); } .popup-form-container .popup-form .form-sub-title { color: var(--color-text-secondary); margin-bottom: var(--space-600); } .popup-form-container .popup-form .form-footer { margin-top: var(--space-600); padding-top: var(--space-600); border-top: 1px solid var(--color-neutral-40); } .popup-form-container .popup-form .form-footer p { font-family: var(--font-family-brand); font-size: var(--font-size-450); line-height: 155.556%; } .popup-form-container .popup-form .form-footer p a svg { width: var(--space-600); height: var(--space-600); margin-bottom: calc(-1 * var(--space-200)); margin-left: var(--space-100); } .popup-form-container .row-flex { display: flex; gap: var(--space-600); } .popup-form-container .row-flex > div:not(.button-row) { flex: 1; } .popup-form-container .input-row-item { position: relative; margin-bottom: var(--space-600); } .popup-form-container .input-row-item.error input, .popup-form-container .input-row-item.error select, .popup-form-container .input-row-item.error textarea { border-color: var(--color-text-critical); } .popup-form-container .input-row-item.error .alert-validation { display: block; } .popup-form-container .input-row-item label { font-family: var(--font-family-brand); color: var(--color-text-tertiary, #9f9f9f); font-size: var(--font-size-350); position: absolute; top: 11px; left: 12px; line-height: 140%; transition: all 300ms ease; display: flex; gap: 4px; align-items: center; z-index: 1; } .popup-form-container .input-row-item label span { color: var(--color-text-critical); position: relative; bottom: -4px; } .popup-form-container .input-row-item input, .popup-form-container .input-row-item textarea { border: 1px solid var(--color-border-on-surface, rgba(255, 255, 255, 0.2)); background-color: var(--color-surface-on-surface-primary, rgba(255, 255, 255, 0.08)); border-radius: 0; height: 48px; color: var(--color-text-primary); font-size: var(--font-size-400, 16px); font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-600, 24px); caret-color: var(--color-surface-brand-cf); padding: 16px 12px 0; box-shadow: none; transition: border 300ms ease; margin: 0; } .popup-form-container .input-row-item input::placeholder, .popup-form-container .input-row-item textarea::placeholder { color: var(--color-text-tertiary, #9f9f9f); } .popup-form-container .input-row-item input:hover, .popup-form-container .input-row-item input:focus, .popup-form-container .input-row-item textarea:hover, .popup-form-container .input-row-item textarea:focus { border-color: var(--color-border-primary); } .popup-form-container .input-row-item input:focus + label, .popup-form-container .input-row-item input:not(:placeholder-shown) + label, .popup-form-container .input-row-item textarea:focus + label, .popup-form-container .input-row-item textarea:not(:placeholder-shown) + label { top: var(--space-100); font-size: var(--font-size-300); left: 13px; } .popup-form-container .input-row-item input:-webkit-autofill, .popup-form-container .input-row-item textarea:-webkit-autofill { -webkit-box-shadow: none !important; /* Change 'white' to match your background */ -webkit-text-fill-color: var(--color-text-primary) !important; /* Set text color */ transition: background-color 5000s ease-in-out 0s; } .popup-form-container .input-row-item input:-webkit-autofill:hover, .popup-form-container .input-row-item input:-webkit-autofill:focus, .popup-form-container .input-row-item input:-webkit-autofill:active, .popup-form-container .input-row-item textarea:-webkit-autofill:hover, .popup-form-container .input-row-item textarea:-webkit-autofill:focus, .popup-form-container .input-row-item textarea:-webkit-autofill:active { transition-delay: 9999s; transition: background-color, color; } .popup-form-container .input-row-item textarea { height: 140px; resize: none; padding-top: 23px; margin-bottom: 0px; } .popup-form-container .input-row-item select { width: 100%; height: 48px; margin: 0; background-color: var(--color-surface-on-surface-secondary, rgba(255, 255, 255, 0.16)); color: var(--color-text-tertiary, #9f9f9f); font-size: var(--font-size-400); font-weight: var(--font-weight-regular); line-height: var(--font-line-height-600); appearance: base-select; border-radius: 0; padding: 11px 12px; outline: none; border: 1px solid transparent; transition: border 300ms ease; position: relative; gap: 4px; } .popup-form-container .input-row-item select:hover, .popup-form-container .input-row-item select:focus { border-color: 1px solid var(--color-border-primary); } .popup-form-container .input-row-item select::picker-icon { display: none; } .popup-form-container .input-row-item select::after { content: ''; background-image: var(--picker-icon); width: 24px; height: 24px; position: absolute; right: 12px; z-index: 1; } .popup-form-container .input-row-item select:required option:disabled::after, .popup-form-container .input-row-item select:required:has(option:checked[value=""])::before { content: '*'; color: var(--color-text-critical); order: 1; } .popup-form-container .input-row-item select::picker(select) { appearance: base-select; border: 1px solid var(--color-border-on-surface, rgba(255, 255, 255, 0.2)); background-color: var(--color-surface-secondary); max-height: 240px; } .popup-form-container .input-row-item select::picker(select)::-webkit-scrollbar { width: 4px; height: 4px; background-color: var(--color-surface-primary); } .popup-form-container .input-row-item select::picker(select)::-webkit-scrollbar-thumb { border-width: 0; background: var(--color-surface-quaternary); background-clip: padding-box; } .popup-form-container .input-row-item select option { padding: 8px 12px; height: 40px; color: var(--color-text-primary, #DFDFDF); font-family: var(--font-family-brand); font-size: var(--font-size-350, 14px); font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-600, 24px); /* 171.429% */ letter-spacing: var(--font-letter-spacing-default, 0px); background-color: var(--color-surface-secondary); gap: 4px; } .popup-form-container .input-row-item select option:hover { background-color: var(--color-surface-on-surface-primary-hover, rgba(255, 255, 255, 0.16)); } .popup-form-container .input-row-item select option::checkmark { order: 1; margin-left: auto; } .popup-form-container .input-row-item select option:checked { background-color: var(--color-background-cf, #101010); } .popup-form-container .input-row-item select option:disabled { border-bottom: 1px solid var(--color-border-on-surface, rgba(255, 255, 255, 0.2)); color: var(--color-text-tertiary, #9f9f9f); background-color: var(--color-surface-secondary); position: sticky; top: 0; z-index: 1; } .popup-form-container .input-row-item select option:disabled::checkmark { display: none; } .popup-form-container .input-row-item .alert-validation { padding-top: var(--space-100); font-family: var(--font-family-brand); font-size: var(--font-size-350); font-weight: var(--font-weight-medium); line-height: 140%; display: none; color: var(--color-text-critical); } .popup-form-container .input-row-item .alert-validation svg { width: var(--space-500); height: var(--space-500); margin-bottom: calc(-1 * var(--space-100)); } .popup-form-container .button-row { margin-top: var(--space-600); } .popup-form-container .button-row button { position: relative; transition: all 150ms; } .popup-form-container .button-row button .submit-button-text { font-size: var(--font-line-height-400); transition: all 150ms; } .popup-form-container .button-row button.loading { pointer-events: none; min-width: var(--space-1200); padding: 7px 0; border-radius: 50px; } .popup-form-container .button-row button.loading .submit-button-text { font-size: 0px; } .popup-form-container .button-row button.loading .loader { opacity: 1; transform: scale(1); } .popup-form-container .button-row button.loading .loader svg { animation: 0.75s linear rotating infinite; } .popup-form-container .button-row button .loader { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 18px; height: 18px; transition: opacity .4s, transform 0.4s ease-in-out; transform: scale(0.4); opacity: 0; } .popup-form-container .button-row button .loader svg { width: 18px; height: 18px; } @keyframes rotating { to { transform: rotate(360deg); } } .popup-form-container .general-form-error { background-color: var(--color-text-critical); color: white; width: 100%; line-height: var(--font-line-height-500); font-size: var(--font-size-400); text-align: center; z-index: 8; padding: var(--space-200) var(--space-400); margin-top: 21px; display: none; } .popup-form-container .general-form-error.active { display: block; } :root { --divider-gradient: linear-gradient(180deg, #131313 0%, rgba(19, 19, 19, 0.00) 100%); --font-family-brand: "Montserrat", sans-serif; --font-family-default: "Lato", sans-serif; --font-family-code: "Consolas", sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-bold: 700; --font-line-height-350: 14px; --font-line-height-400: 16px; --font-line-height-500: 20px; --font-line-height-600: 24px; --font-line-height-700: 28px; --font-line-height-800: 32px; --font-line-height-1000: 40px; --font-line-height-1300: 52px; --font-line-height-1800: 72px; --font-line-height-2600: 104px; --font-letter-spacing-default: 0px; --font-letter-spacing-regular: 1.2px; --font-size-300: 12px; --font-size-350: 14px; --font-size-400: 16px; --font-size-450: 18px; --font-size-500: 20px; --font-size-550: 22px; --font-size-600: 24px; --font-size-800: 32px; --font-size-1100: 44px; --font-size-1600: 64px; --font-size-2400: 96px; --color-brand-ow: #D34037; --color-hover-brand-ow: #F05C48; --color-brand-cf: #EB622B; --color-hover-brand-cf: #F18536; --color-brand-tb: #41C4C3; --color-hover-brand-tb: #5DE3E2; --color-brand-el: #9FEAF9; --color-brand-el-2: #69C5EA; --color-brand-nt: #B5DF30; --color-hover-brand-nt: #C4E559; --color-neutral-0: #000000; --color-neutral-8: #101010; --color-neutral-16: #202020; --color-neutral-24: #303030; --color-neutral-32: #404040; --color-neutral-40: #505050; --color-neutral-48: #606060; --color-neutral-80: #9F9F9F; --color-neutral-88: #AFAFAF; --color-neutral-96: #BFBFBF; --color-neutral-104: #CFCFCF; --color-neutral-112: #DFDFDF; --color-neutral-120: #EFEFEF; --color-neutral-128: #FFFFFF; --color-infographic-ow-1: var(--color-brand-ow); --color-infographic-ow-2: #942B27; --color-infographic-ow-3: #FFD2D0; --color-infographic-ow-4: #FFA4A1; --color-infographic-ow-5: #EC7068; --color-infographic-cf-1: var(--color-brand-cf); --color-infographic-cf-2: #A4491E; --color-infographic-cf-3: #FFDCCB; --color-infographic-cf-4: #FFB897; --color-infographic-cf-5: #F8936D; --color-infographic-tb-1: var(--color-brand-tb); --color-infographic-tb-2: #2E8989; --color-infographic-tb-3: #D4FFFF; --color-infographic-tb-4: #AFF; --color-infographic-tb-5: #7ED5D6; --color-functional-critical-light: #FE3737; --color-functional-critical-dark: #D93025; --color-functional-warning-light: #E07400; --color-functional-warning-dark: #C35404; --color-functional-success-light: #32A100; --color-functional-success-dark: #018901; --color-functional-info-light: #2690E7; --color-functional-info-dark: #0074C7; --color-alfa-brand: rgba(211, 64, 55, 0.64); --color-alfa-brand-ow-16: rgba(211, 64, 55, 0.16); --color-alfa-brand-ow-20: rgba(211, 64, 55, 0.20); --color-alfa-brand-ow-64: rgba(211, 64, 55, 0.64); --color-alfa-brand-cf-16: rgba(235, 98, 43, 0.16); --color-alfa-brand-cf-20: rgba(235, 98, 43, 0.20); --color-alfa-brand-cf-64: rgba(235, 98, 43, 0.64); --color-alfa-dark-8: rgba(255, 255, 255, 0.08); --color-alfa-dark-12: rgba(255, 255, 255, 0.12); --color-alfa-dark-16: rgba(255, 255, 255, 0.16); --color-alfa-dark-24: rgba(255, 255, 255, 0.24); --color-alfa-dark-32: rgba(255, 255, 255, 0.32); --color-alfa-light-4: rgba(0, 0, 0, 0.04); --color-alfa-light-8: rgba(0, 0, 0, 0.08); --color-alfa-light-12: rgba(0, 0, 0, 0.12); --color-alfa-light-16: rgba(0, 0, 0, 0.16); --color-alfa-light-24: rgba(0, 0, 0, 0.24); --color-alfa-critical-8: rgba(217, 48, 37, 0.08); --color-alfa-critical-16: rgba(217, 48, 37, 0.16); --color-alfa-critical-56: rgba(217, 48, 37, 0.56); --color-alfa-critical-64: rgba(217, 48, 37, 0.64); --color-alfa-warning-8: rgba(195, 84, 4, 0.08); --color-alfa-warning-16: rgba(195, 84, 4, 0.16); --color-alfa-warning-56: rgba(195, 84, 4, 0.56); --color-alfa-warning-64: rgba(195, 84, 4, 0.64); --color-alfa-success-8: rgba(1, 137, 1, 0.08); --color-alfa-success-16: rgba(1, 137, 1, 0.16); --color-alfa-success-56: rgba(1, 137, 1, 0.56); --color-alfa-success-64: rgba(1, 137, 1, 0.64); --color-alfa-info-8: rgba(0, 116, 199, 0.08); --color-alfa-info-16: rgba(0, 116, 199, 0.16); --color-alfa-info-56: rgba(0, 116, 199, 0.56); --color-alfa-info-64: rgba(0, 116, 199, 0.64); --color-alfa-el-16: rgba(159, 234, 249, 0.16); --color-alfa-el-1-20: rgba(159, 234, 249, 0.20); --color-alfa-el-2-56: rgba(159, 234, 249, 0.56); --color-surface-pure: var(--color-neutral-0); --color-surface-primary: var(--color-neutral-8); --color-surface-secondary: var(--color-neutral-16); --color-surface-tertiary: var(--color-neutral-24); --color-surface-quaternary: var(--color-neutral-48); --color-surface-invert: var(--color-neutral-128); --color-surface-brand-ow: var(--color-brand-ow); --color-surface-brand-cf: var(--color-brand-cf); --color-surface-brand-tb: var(--color-brand-tb); --color-surface-brand-el: var(--color-brand-el); --color-surface-brand-nt: var(--color-brand-nt); --color-surface-critical: var(--color-functional-critical-dark); --color-surface-warning: var(--color-functional-warning-dark); --color-surface-success: var(--color-functional-success-dark); --color-surface-info: var(--color-functional-info-dark); --color-surface-note-regular: var(--color-alfa-dark-16); --color-surface-note-critical: var(--color-alfa-critical-16); --color-surface-note-warning: var(--color-alfa-warning-16); --color-surface-note-success: var(--color-alfa-success-16); --color-surface-note-info: var(--color-alfa-info-16); --color-surface-focus-brand-ow: var(--color-alfa-brand-ow-20); --color-surface-focus-brand-el: var(--color-alfa-el-16); --color-surface-focus-brand-cf: var(--color-alfa-brand-cf-20); --color-surface-on-surface: var(--color-alfa-dark-16); --color-hover-on-surface-1: var(--color-alfa-dark-16); --color-hover-on-surface-2: var(--color-alfa-dark-24); --color-text-invert: var(--color-neutral-0); --color-text-cta-tb: var(--color-neutral-0); --color-text-cta-nt: var(--color-neutral-0); --color-text-tertiary: var(--color-neutral-80); --color-text-secondary: var(--color-neutral-96); --color-text-primary: var(--color-neutral-112); --color-text-pure: var(--color-neutral-128); --color-text-cta-ow: var(--color-neutral-128); --color-text-cta-cf: var(--color-neutral-128); --color-text-brand-ow: var(--color-brand-ow); --color-text-brand-cf: var(--color-brand-cf); --color-text-brand-tebex: var(--color-brand-tb); --color-text-brand-nt: var(--color-brand-nt); --color-text-hover-brand-ow: var(--color-hover-brand-ow); --color-text-hover-brand-cf: var(--color-hover-brand-cf); --color-text-hover-brand-tebex: var(--color-hover-brand-tb); --color-text-hover-brand-nt: var(--color-hover-brand-nt); --color-text-critical: var(--color-functional-critical-light); --color-text-warning: var(--color-functional-warning-light); --color-text-success: var(--color-functional-success-light); --color-text-info: var(--color-functional-info-light); --color-icon-cta-nt-surface: var(--color-neutral-0); --color-icon-cta-tb-surface: var(--color-neutral-0); --color-icon-secondary: var(--color-neutral-80); --color-icon-primary: var(--color-neutral-112); --color-icon-pure: var(--color-neutral-128); --color-icon-cta-ow-surface: var(--color-neutral-128); --color-icon-cta-cf-surface: var(--color-neutral-128); --color-icon-brand-ow: var(--color-brand-ow); --color-icon-brand-cf: var(--color-brand-cf); --color-icon-brand-tb: var(--color-brand-tb); --color-icon-brand-nt: var(--color-brand-nt); --color-icon-critical: var(--color-functional-critical-light); --color-icon-warning: var(--color-functional-warning-light); --color-icon-success: var(--color-functional-success-light); --color-icon-info: var(--color-functional-info-light); --color-border-tertiary: var(--color-neutral-24); --color-border-secondary: var(--color-neutral-48); --color-border-primary: var(--color-neutral-96); --color-border-note: var(--color-alfa-dark-32); --color-border-critical: var(--color-alfa-critical-64); --color-border-warning: var(--color-alfa-warning-64); --color-border-success: var(--color-alfa-success-64); --color-border-info: var(--color-alfa-info-64); --color-border-ow: var(--color-alfa-brand); --color-border-el: var(--color-alfa-el-2-56); --color-border-on-surface: var(--color-alfa-dark-16); --space-0: 0px; --space-50: 2px; --space-100: 4px; --space-200: 8px; --space-300: 12px; --space-400: 16px; --space-500: 20px; --space-600: 24px; --space-800: 32px; --space-1000: 40px; --space-1200: 48px; --space-1400: 56px; --space-1600: 64px; --space-1800: 72px; --space-2000: 80px; --space-2200: 88px; --space-2400: 96px; --space-2600: 104px; --space-3200: 128px; --space-4000: 160px; --space-4800: 192px; --space-5600: 224px; --space-6400: 256px; } .footer { position: relative; z-index: 3; padding: 0; display: flex; flex-direction: column; align-items: center; background-color: #000; width: 100%; } .footer .content-wrapper { display: flex; flex-direction: column; align-items: center; position: relative; width: 100%; max-width: 1720px; margin: 0 auto; padding: 30px 20px 42px; } .footer-line { display: flex; width: 100%; justify-content: space-between; width: 100%; } .footer-line .content-wrapper { position: relative; flex-direction: column; max-width: 1678px; width: 100%; margin: 0 auto; padding: 8px 10px 15px; } .footer-line p, .footer-line span, .footer-line a { color: #9F9F9F; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; line-height: 140%; } .footer-line a { text-decoration-line: none; transition: .2s ease-in-out; } .footer-line a:hover { color: #fff; text-decoration-line: underline; } .footer-line-left { display: flex; flex-direction: column; } .footer-line-left ul { display: flex; align-items: center; } .footer-line-left ul li { color: #9F9F9F; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; line-height: 140%; } .footer-line-right { display: flex; } .footer-line-right p, .footer-line-right span, .footer-line-right a, .footer-line-right li { color: #9F9F9F; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; line-height: 140%; } .footer-col { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 48px; width: 100%; } .footer-col p { max-width: 1099px; margin-top: 24px; } .footer-col p, .footer-col span, .footer-col a { color: #B2B2B2; font-family: Lato, sans-serif; font-size: 14px; font-weight: 400; line-height: 140%; transition: .2s ease-in-out; } .footer-col a { text-decoration: underline; transition: .2s ease-in-out; } .footer-col a:hover { color: #fff; } .footer-fire { position: absolute; top: -26px; right: -100px; width: 375px; max-height: 228px; } .large-mob-bg-logo { display: flex; justify-content: center; position: relative; width: 100%; background: url("./../images/footer-bg.webp") no-repeat 50% 50%; } .large-mob-bg-logo img { max-width: 200px; margin-top: 103px; } .footer-logo { width: 177px; } .footer-socials { display: flex; margin-top: -2px; } .footer-socials-item { margin-left: 20px; } .footer-line ul.mob-only { display: none; } .site-footer-nav { width: 100%; max-width: 1570px; margin: 58px auto; display: flex; padding: 0 20px; justify-content: space-between; } .site-footer-nav nav { flex: 1; margin: 3px 0 0; } .site-footer-nav .ow-symbol { width: 90px; height: 90px; color: #fff; margin-right: 10%; } .site-footer-nav .ow-logo { display: none; color: #fff; width: 128px; height: 40px; } .site-footer-nav .iso-logo { width: 91px; height: 93px; margin-top: 64px; display: inline-block; } .site-footer-nav a { color: #fff; text-decoration: underline; overflow-wrap: break-word; text-underline-offset: 3px; transition: 150ms; } .site-footer-nav ol, .site-footer-nav ul { padding-inline-start: 25px; } .site-footer-nav nav > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 40px 10%; margin: 0; padding: 0; list-style: none; } .site-footer-nav nav > ul h5 { color: var(--color-text-tertiary, #9F9F9F); font-family: var(--font-family-brand, Montserrat); font-size: var(--font-size-400, 16px); font-style: normal; font-weight: var(--font-weight-medium, 500); line-height: var(--font-line-height-600, 24px); letter-spacing: var(--font-letter-spacing-default, 0px); } .site-footer-nav nav > ul ul { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; } .site-footer-nav ul li::marker { color: var(--color-brand-ow); font-size: 1.25em; } .site-footer-nav nav > ul ul li a { display: block; min-height: 24px; margin-bottom: 4px; font-size: var(--font-size-350); line-height: 110%; color: var(--color-text-tertiary); font-weight: var(--font-weight-medium); font-variation-settings: "wght" var(--font-weight-medium); text-decoration: none; white-space: nowrap; color: #9F9F9F; font-family: Montserrat,sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: 0; } .site-footer-nav nav > ul ul li a:hover { color: var(--color-text-primary); font-weight: var(--font-weight-bold); font-variation-settings: "wght" var(--font-weight-bold); } @media only screen and (min-width: 1025px) { .text-main { font-size: 18px; line-height: 153.556%; } .text-p-large { font-size: 22px; line-height: 32px; } .heading-second { margin-bottom: 12px; font-size: 32px; font-style: normal; font-weight: 700; line-height: 40px; } .heading-second.large { margin-bottom: 15px; font-size: 44px; font-style: normal; font-weight: 700; line-height: 49px; text-align: left; letter-spacing: 0; } .btn-orange { margin: 44px 0 0; } .pages-links-item-links a:hover { color: #D34037; } .swiper-pagination { min-height: 12px; margin: 40px auto 0; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 10px; } .contacts-form .content-wrapper { padding: 68px 20px 359px; } .contacts-form .form-inner { max-width: 545px; margin: 0; } .contacts-form .input-row-item { margin-bottom: 23px; } .contacts-form .form-background { opacity: 1; } .contacts-form .text-main { text-align: left; } .contacts-form .input-row-item label { top: 12px; } .contacts-form .button-row button { margin: 0; } .contacts-form .heading-second { margin: 0 0 26px; text-align: left; font-size: var(--font-size-1100, 44px); line-height: var(--font-line-height-1300, 52px); } .contacts-form .text-main { padding: 0; } .contacts-form .text-main a { font-size: var(--font-size-450, 18px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-700, 28px); } .contacts-form .contacts-form-wrapper { padding-top: 23px; } .footer { padding: 0; } .footer .content-wrapper { max-width: 1720px; padding: 0px 20px 56px; align-items: flex-start; } .footer-line .content-wrapper { flex-direction: row; justify-content: space-between; max-width: 1720px; margin: 0 auto; padding: 16px 20px; } .footer-line-left { flex-direction: row; } .footer-line-left ul li { margin-left: 32px; } .large-mob-bg-logo { display: none; } .site-footer-nav nav { margin: 5px 0 0; } .site-footer-nav nav > ul ul { margin: 16px 0 0; } .site-footer-nav nav > ul ul li a { margin-bottom: 0.5px; } } @media only screen and (min-width: 1101px) { .header-link:hover { border-bottom: 1px solid #F05C48; border: 1px solid #F05C48; background: #F05C48; } } @media only screen and (min-width: 1200px) { .contacts-form .form-background { left: 0; right: unset; } } @media only screen and (min-width: 1241px) { .partners .content-wrapper { padding: 96px 20px 0; } .partners .content-wrapper-inner { flex-direction: row; } .partners-logo { flex-wrap: nowrap; } .partners-logo img { max-height: 80px; margin: 31px 0px 20px 4.04vw; } .scroll-down-block { margin: 44px auto 40px; } } @media only screen and (min-width: 1271px) { .pages-links .content-wrapper { padding: 68px 20px 66px; } .pages-links-container { justify-content: center; } .pages-links-container { justify-content: space-evenly; } .pages-links-container.desktop { display: flex; } .pages-links-container.mob { display: none; } .pages-links-item { max-width: 369px; margin: 20px 24px; } .pages-links-item-img { max-height: 370px; height: 100%; max-width: 100%; } .pages-links-item-text .text-main { margin: 0; padding: 0; border-bottom: none; max-width: unset; } .pages-links-item .heading-second { margin-bottom: 12px; font-size: 32px; font-style: normal; font-weight: 700; line-height: 40px; } .pages-links-item .heading-second.large { font-size: 24px; font-weight: 700; line-height: 28px; } .pages-links-item.large { display: flex; flex-direction: row; justify-content: space-around; max-width: 100%; width: 100%; max-height: 580px; align-items: flex-start; margin-top: 25px; margin-bottom: 102px; } .pages-links-item.large .pages-links-item-text { width: 571px; justify-content: flex-start; align-items: flex-start; } .pages-links-item.large .pages-links-item-img { max-width: 699px; max-height: 100%; } .pages-links-item.large .heading-second { margin-bottom: 15px; font-size: 44px; font-style: normal; font-weight: 700; line-height: 49px; text-align: left; letter-spacing: 0; } .pages-links-item.large .text-main { margin-bottom: 15px; padding-bottom: 32px; text-align: left; border-bottom: 1px solid #303030; } .pages-links-item.large.one .pages-links-item-img, .pages-links-item.large.left:first-of-type .pages-links-item-img { position: relative; width: 100%; } .pages-links-item.large.one .pages-links-item-img img, .pages-links-item.large.left:first-of-type .pages-links-item-img img { position: absolute; max-width: 100%; transform: translate(42px, 26px) scale(1.57); } .pages-links-item.large.two { flex-direction: row; justify-content: space-between; margin-top: 151px; margin: 149px auto 0; } .pages-links-item.large.two .pages-links-item-img img { transform: translate(73px, -86px) scale(1.15); } .pages-links-item.large.three { margin-top: 16px; margin-bottom: 129px; } .pages-links-item.large.three .pages-links-item-img { width: 100%; max-width: 699px; max-height: 100%; } .pages-links-item.large.three .pages-links-item-img img { position: absolute; max-width: 100%; transform: translate(54px, 49px) scale(1.75); } .pages-links-item-links { margin-top: 19px; } .pages-links-item-links a { margin-bottom: 11px; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; } .pages-links-item .heading-second.large.l-s-1 { letter-spacing: -1px; } .swiper-pagination { min-height: 12px; margin: 9px auto 0; } } @media only screen and (min-width: 1440px) { .pages-links-container { justify-content: space-between; } } @media only screen and (min-width: 1525px) { .pages-links-item.large .pages-links-item-text { margin-left: -46px; } } @media only screen and (max-width: 1760px) { .footer-fire { top: 20px; right: -3vw; } } @media (max-width: 1680px) { .site-footer-nav nav > ul { column-gap: 8%; } } @media (max-width: 1580px) { .site-footer .site-footer-nav nav > ul { column-gap: 6%; } } @media (max-width: 1360px) { .form-section .inner .left-box { right: unset; } } @media only screen and (max-width: 1360px) { .footer-col p { max-width: 600px; } .footer-fire { top: 20px; right: -3vw; } } @media only screen and (max-width: 1250px) { .header-link.border { padding: 7px 12px; } .site-header .header-inner nav ul li { margin: 0; } } @media only screen and (max-width: 1100px) { header { height: unset; } header .content-wrapper { justify-content: flex-start; } .header-link { width: 100%; margin-left: 0; padding: 11px 18px 14.5px; font-size: 18px; font-weight: 500; line-height: 28px; letter-spacing: 0; border-bottom: none; } .header-link.desktop { display: none !important; } .header-link.mob { display: flex; } .header-link.border { max-width: 136px; height: 40px; } .header-logo.desktop { display: none; } .header-logo.mob { display: flex; justify-content: space-between; width: 100%; } .header-logo img { width: auto; height: 40px; max-width: 124px; margin-left: 0; } .site-header .header-inner { justify-content: center; padding: 15px 20px 9px 20px; } .site-header .hamburger-menu-button { display: block; } .submenu-icon { display: flex; } .site-header .header-inner .action-items { width: fit-content; margin: auto auto 10vh; display: flex; gap: 8px; } .site-header .header-inner nav .header-menu { position: absolute; left: 0; top: 74px; margin: 0; flex-direction: column; background-color: #1E1E1E; text-align: center; width: 100%; overflow: overlay; height: 100vh; padding-top: 16px; padding-bottom: 80px; gap: 0; } .site-header .header-menu-inner { background: #000; } .site-header .header-inner nav { position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; transition: opacity .3s ease-out; animation: quick-hide-mobile-menu .2s 1ж; } .site-header .header-inner nav ul li { margin-left: unset; display: flex; justify-content: flex-start; position: relative; width: 100%; margin: 0; flex-direction: column; } .site-header .header-inner nav ul li a { display: flex; align-items: center; } .site-header .header-inner nav ul li a.download-btn { max-width: 224px; } .site-header .header-inner nav ul li a.border { display: none; } @keyframes quick-hide-mobile-menu { 0% { opacity: 0; } to { opacity: 0; } } .site-header .header-inner nav.is-open { opacity: 1; } .site-header .header-inner nav:not(.is-open) { pointer-events: none; } .site-header .header-inner nav ul::-webkit-scrollbar { width: 4px; height: 4px; background-color: #1E1E1E; } .site-header .header-inner nav ul::-webkit-scrollbar-thumb { border-width: 0; background-color: #1E1E1E; background-clip: padding-box; } } @media only screen and (max-width: 1024px) { main { background: #000 url("./../images/hero-mob-bg.webp") no-repeat 0% 0%; background-size: 100%; } .heading-first { font-size: 32px; font-style: normal; font-weight: 700; line-height: 40px; text-align: center; } .text-p-large { display: inline; text-align: center; order: 3; margin-top: 15px; padding: 0 8px; font-size: 18px; line-height: 28px; } .text-p-large br { display: none; } .to-top { margin: 13px auto 0; font-size: 16px; } .to-top-section .content-wrapper { padding-top: 0; } .header-link-container { display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 120px; } .site-header .header-inner nav ul li:last-of-type { margin-left: unset; } .opening-section { background-size: cover; display: flex; flex-direction: column; height: unset; width: 100%; padding: 0; min-height: unset; background: none; } .opening-section .first-layer { display: none; } .opening-section .text-p-large { display: inline; order: 3; margin-top: 15px; padding: 0 8px; } .opening-section .text-p-large br { display: none; } .opening-section .video-bg-container { display: none; } .opening-section .buttons-container { order: 4; margin-top: 25px; } .opening-section .button-container { margin: 0 12px 40px; } .bg-character-mob { display: flex; min-width: 100vw; max-width: 100%; margin-left: -20px; margin-right: -20px; margin-top: -64px; order: 5; } .intro-text-container { padding: 104px 20px 0; } .intro-text-content { align-items: center; } .footer-line { flex-direction: column; align-items: center; } .footer-col { align-items: center; margin: 0 auto 8px; } .footer-col p { margin-top: 30px; text-align: center; } .footer-fire { display: none; } .footer-logo { width: 140px; } .footer-socials { margin-top: 44px; justify-content: center; margin: 29px auto 6px; } .footer-line ul.mob-only { display: flex; justify-content: space-between; width: 100%; max-width: 400px; padding: 0px 16px 16px; } .footer-line ul.mob-only li { margin: 0 4px; } .footer-line ul.desktop-only { display: none; } .footer-socials-item { margin-left: unset; margin: 0 10px; } .footer-socials-item:first-of-type { order: 1; } .footer-socials-item:nth-of-type(2) { order: 3; } .footer-socials-item:last-of-type { order: 2; } } @media (max-width: 1024px) { .section-vertical-padding { padding: var(--space-1200) 0; } .form-section .inner { flex-wrap: wrap; justify-content: center; } .form-section .inner .left-box img { position: relative; z-index: 0; top: -30px; } .form-section .inner .left-box a { bottom: var(--space-1200); } } @media (max-width: 800px) { .site-footer-nav { flex-direction: column; margin: 46px 0 54px; padding: 0 23px 0 16px; } .site-footer-nav .logos { display: flex; justify-content: space-between; align-items: center; padding: var(--space-600) 0; gap: var(--space-600); } .site-footer-nav .ow-symbol { display: none; } .site-footer-nav .ow-logo { display: block; } .site-footer-nav .iso-logo { margin-top: 0; width: 37px; height: var(--space-1000); } .site-footer-nav .iso-logo img { width: 100%; } } @media (max-width: 760px) { .contacts-form .button-row { margin: auto; } .popup-form-container .button-row { margin: auto; } } @media (max-width: 600px) { .contacts-form .input-row-item input, .contacts-form .input-row-item textarea { width: 100%; } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper { top: -330px; } .multi-list .select-dropdown .dropdown .dropdown-list-wrapper .dropdown-list { max-height: 330px; } button.btn-secondary-small, a.btn-primary.btn-secondary-small, a.btn-secondary.btn-secondary-small, a.btn-secondary-small.btn-secondary-small { padding: var(--space-200) var(--space-400); } .form-section .inner .right-box { text-align: center; padding-top: var(--space-1200); } .form-section .inner .right-box .actions { justify-content: center; gap: var(--space-600); } .popup-form-container .popup-form { height: 100vh; padding: var(--space-600) var(--space-500); } .popup-form-container .popup-form .form-title { font-size: var(--font-size-450); } .popup-form-container .popup-form .form-sub-title { margin-bottom: var(--space-400); } .popup-form-container .popup-form .form-footer p { font-size: var(--font-size-400); } .popup-form-container .row-flex { display: block; } .popup-form-container .input-row-item { margin-bottom: var(--space-400); } .popup-form-container .input-row-item input, .popup-form-container .input-row-item textarea { width: 100%; } .site-footer-nav nav > ul { gap: var(--space-1000) 5%; } } @media only screen and (max-width: 360px) { .text-p-large { padding: 0; } .opening-section .text-p-large { padding: 0; } } @media only screen and (max-width: 340px) { .footer-line ul.mob-only li { margin: 0 2px; } }