@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; } *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; font-weight: normal; } html { height: 100%; scroll-behavior: smooth; scroll-padding-top: var(--space-2000); } body { font-family: var(--font-family-default); background-color: var(--color-surface-pure); color: var(--color-text-primary); line-height: 160%; padding: 0; margin: 0; } body.modal-is-open { height: 100vh; overflow: hidden; padding-right: 15px; } main { overflow: hidden; } a { color: inherit; color: var(--color-surface-brand-cf); text-decoration: none; text-underline-offset: 3px; transition: color .15s; } a:hover, a:focus { color: var(--color-surface-brand-cf-hover); } p a { text-decoration: underline; } b { font-weight: var(--font-weight-bold); } a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: none; } a.btn-primary:focus-visible, a.expand-btn:focus-visible, button.btn-primary:focus-visible, button.expand-btn:focus-visible, input.btn-primary:focus-visible, input.expand-btn:focus-visible, select.btn-primary:focus-visible, select.expand-btn:focus-visible, textarea.btn-primary:focus-visible, textarea.expand-btn:focus-visible { box-shadow: inset 0 0 0 2px white; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-brand); color: var(--color-text-pure); font-weight: var(--font-weight-bold); line-height: 120%; } h1 { font-size: var(--space-1600); line-height: 112.5%; } h2 { font-size: var(--font-size-1100); line-height: 127.273%; } h3 { font-size: var(--font-size-800); line-height: 125%; } h4 { font-size: var(--font-size-550); line-height: 145.455%; } h5 { font-size: var(--font-size-400); line-height: 150%; } h6 { font-size: var(--font-size-350); } ul { list-style: none; } img { display: block; max-width: 100%; } svg { height: inherit; width: inherit; } fieldset { border: none; } .hide, .hidden { display: none !important; } label { display: inline-block; color: var(--color-text-pure); } label span { padding-bottom: var(--space-200); display: block; } input, textarea { border-radius: 0; appearance: none; font-family: var(--font-family-default); } .hidden { display: none !important; } .sr-only:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } div, ul { /* scrollbar */ } div::-webkit-scrollbar, ul::-webkit-scrollbar { width: var(--space-200); height: var(--space-200); background-color: transparent; } div::-webkit-scrollbar-thumb, ul::-webkit-scrollbar-thumb { border-width: 0; background-color: var(--color-text-primary); background-clip: padding-box; } div::-webkit-scrollbar-thumb:hover, ul::-webkit-scrollbar-thumb:hover { background-color: var(--color-surface-brand-cf); } div::-webkit-scrollbar-corner, ul::-webkit-scrollbar-corner { background-color: transparent; } div::-webkit-scrollbar-track-piece, ul::-webkit-scrollbar-track-piece { background-color: transparent; } body { background-color: var(--color-surface-pure); color: var(--color-text-primary); font-family: var(--font-family-default); font-weight: var(--font-weight-regular); font-size: var(--font-size-400); line-height: 160%; margin: 0; padding: 0; } :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; } :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); } body { outline: none; margin: 0; padding: 0; background: #000; } html { scroll-behavior: smooth; font-family: 'Montserrat', sans-serif; height: 100vh; max-width: 100vw; overflow: hidden; overflow-y: auto; } a { cursor: pointer; } * { box-sizing: border-box; font-optical-sizing: auto; color: #fff; } .btn-secondary-small { font-family: var(--font-family-brand); text-decoration: none; font-weight: var(--font-weight-medium); padding: var(--space-200) var(--space-600); font-size: var(--font-line-height-400); line-height: 140%; height: var(--space-1000); white-space: nowrap; cursor: pointer; display: inline-block; } .btn-secondary, .btn-secondary-new, .btn-secondary-small { border: 1px solid var(--color-text-primary); color: var(--color-text-primary); background-color: transparent; line-height: 15px; transition: .2s ease-in-out; } button, h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-brand); } * { box-sizing: border-box; font-optical-sizing: auto; } section { position: relative; } section .content-wrapper { position: relative; width: 100%; max-width: 1412px; margin: 0 auto; padding: 0 var(--space-500); display: flex; flex-direction: column; align-items: center; } section .content-wrapper.large { max-width: 1680px; } .btn-primary, .btn-primary-new, .btn-secondary, .btn-secondary-new { font-family: var(--font-family-brand); border: none; text-decoration: none; font-weight: var(--font-weight-medium); padding: var(--space-400) var(--space-800); font-size: var(--font-line-height-400); line-height: 110%; height: var(--space-1200); white-space: nowrap; cursor: pointer; display: inline-block; text-transform: uppercase; letter-spacing: 1.2px; transition: .2s ease-in-out; } .btn-primary, .btn-primary-new { color: var(--color-text-pure); background-color: var(--color-brand-ow); } .btn-primary-new:hover, .btn-primary:hover { background-color: var(--color-hover-brand-ow); } .btn-secondary-new:hover, .btn-secondary-small:hover, .btn-secondary:hover { background-color: var(--color-hover-brand-ow); border-color: var(--color-hover-brand-ow); color: var(--color-text-pure); } h2 { font-size: var(--font-size-1100); } .text-main { color: var(--color-text-primary, #DFDFDF); text-align: center; font-family: var(--font-family-default, Lato); 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); letter-spacing: var(--font-letter-spacing-default, 0px); } .btn-secondary-small.white { text-transform: uppercase; height: 48px; padding: 16px 32px; letter-spacing: 1.1px; border: 1px solid #606060; color: #202020; } .btn-secondary-small.white:hover { background-color: var(--color-hover-brand-ow); border-color: var(--color-hover-brand-ow); color: var(--color-text-pure); } .sub-title { color: var(--semantic-color-foreground-text-primary, #DFDFDF); font-family: var(--font-family-brand); font-size: var(--font-size-550); font-weight: var(--font-weight-medium); line-height: 145.455%; } main { display: flex; flex-direction: column; } .site-header { font-family: var(--font-family-brand); background-color: var(--color-surface-pure); position: sticky; z-index: 100; width: 100%; left: 0; top: 0; transition: all 300ms ease; } .site-header.sticky { background-color: var(--color-surface-primary); } .site-header .header-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 20px; position: relative; z-index: 10; contain: layout; transition: all 300ms ease; } .site-header .header-inner .mobile { display: none; margin-left: auto; } .site-header .header-inner .inner-page-nav { display: flex; gap: 24px; align-items: center; } .site-header .header-inner .inner-page-nav .sub-site-name { font-family: var(--font-family-brand); font-size: 16px; font-weight: 600; line-height: 150%; position: relative; display: none; } .site-header .header-inner .inner-page-nav .sub-site-name:before { content: ""; position: absolute; left: -13px; top: 0; bottom: 0; margin: auto; height: 24px; width: 1px; background-color: var(--color-surface-secondary); } .site-header .header-inner .hamburger-menu-button { display: none; } .site-header .header-inner .logo { z-index: 1; } .site-header .header-inner .logo .logo-desktop { width: 156px; height: 50px; color: var(--color-text-pure); } .site-header .header-inner .mobile-action { display: none; margin-left: auto; } .site-header .header-inner > nav { display: flex; align-items: center; justify-content: flex-end; color: var(--color-text-pure); /* mobile menu */ } .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(2) > a::before, .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(3) > a::before, .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(4) > a::before, .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(5) > a::before, .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(6) > a::before, .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(3) > ul > li:nth-child(2) > a::before, .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(3) > ul > li:nth-child(3) > a::before, .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(2) > ul > li:nth-child(2) > a::before, .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(2) > ul > li:nth-child(3) > a::before, .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(2) > ul > li:nth-child(4) > a::before, .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(5) > ul > li:nth-child(2) > a::before { content: ""; width: 20px; height: 20px; background-size: 244px; background-repeat: no-repeat; position: absolute; left: -15px; top: 11px; } .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(2) > a::before { background-position: top left 0; } .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(3) > a::before { background-position: top -1px left -38px; } .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(4) > a::before { background-position: top -1px left -70px; } .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(5) > a::before { background-position: top 0px left -223px; height: 24px; top: 10px; } .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(6) > a::before { background-position: top -3px left -150px; } .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(3) > ul > li:nth-child(2) > a::before { background-position: top 0 left -38px; top: 10px; } .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(3) > ul > li:nth-child(3) > a::before { background-position: top left -75px; top: 10px; } .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(2) > ul > li:nth-child(2) > a::before { background-position: top left -112px; top: 10px; left: -18px; } .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(2) > ul > li:nth-child(3) > a::before { background-position: top -2px left -38px; top: 10px; left: -18px; } .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(2) > ul > li:nth-child(4) > a::before { background-position: top left 0px; top: 10px; left: -18px; } .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(4) > ul > li:nth-child(2) > a::before { background-position: top left -185px; top: 10px; left: -18px; } .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(5) > ul > li:nth-child(2) > a::before { background-position: top left; top: 11px; left: -18px; } .site-header .header-inner > nav a { text-decoration: none; display: block; } .site-header .header-inner > nav > ul { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; font-size: 16px; column-gap: 3rem; } .site-header .header-inner > nav > ul > li { line-height: var(--font-line-height-600); white-space: nowrap; /* sub menu */ } .site-header .header-inner > nav > ul > li:not(:first-child) { position: relative; } .site-header .header-inner > nav > ul > li a { position: relative; } .site-header .header-inner > nav > ul > li > a:not(.btn-secondary-small) { font-size: var(--font-size-400); height: 40px; font-weight: 500; display: flex; align-items: center; gap: 4px; color: var(--color-text-secondary); } .site-header .header-inner > nav > ul > li > a:not(.btn-secondary-small).is-active { color: var(--color-text-pure); } .site-header .header-inner > nav > ul > li > a:not(.btn-secondary-small).is-active::before { width: 100%; } .site-header .header-inner > nav > ul > li > a:not(.btn-secondary-small)::before { content: ""; width: 0px; height: 2px; background-color: var(--color-brand-ow); position: absolute; bottom: 0; left: 0; transition: all 150ms ease; } .site-header .header-inner > nav > ul > li > a:not(.btn-secondary-small) br { display: none; } .site-header .header-inner > nav > ul > li:hover > a:not(.btn-secondary-small), .site-header .header-inner > nav > ul > li:focus-within > a:not(.btn-secondary-small) { color: var(--color-text-pure); } .site-header .header-inner > nav > ul > li:hover > a:not(.btn-secondary-small)::before, .site-header .header-inner > nav > ul > li:focus-within > a:not(.btn-secondary-small)::before { width: 100%; } .site-header .header-inner > nav > ul > li:hover > ul, .site-header .header-inner > nav > ul > li:focus-within > ul { opacity: 1; transform: rotateX(0deg); pointer-events: all; } .site-header .header-inner > nav > ul > li > ul { position: absolute; left: -200px; top: 68px; min-height: 292px; list-style: none; margin: 0; padding: 0; display: block; padding: var(--space-1200) var(--space-1400) var(--space-1200) 420px; background-color: var(--color-surface-secondary); box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transform-origin: center -90px; transform: perspective(50em) rotateX(-15deg); transition: transform 250ms ease 0s, opacity 250ms ease 0s; animation: quick-disappear 0.3s 1; } @keyframes quick-disappear { 0% { opacity: 0; } 100% { opacity: 0; } } .site-header .header-inner > nav > ul > li > ul::before { content: ""; position: absolute; left: 0; right: 0; top: -34px; height: 54px; cursor: pointer; } .site-header .header-inner > nav > ul > li > ul li { margin: 0; white-space: nowrap; min-width: 160px; } .site-header .header-inner > nav > ul > li > ul li.sub-menu-description { position: absolute; left: 58px; width: 230px; } .site-header .header-inner > nav > ul > li > ul li.sub-menu-description h2 { color: var(--color-text-primary); font-size: var(--font-size-800); line-height: var(--font-line-height-1000); margin-bottom: 24px; } .site-header .header-inner > nav > ul > li > ul li.sub-menu-description p { color: var(--color-text-primary); font-family: var(--font-family-default); font-size: var(--font-size-450); font-weight: var(--font-weight-regular); line-height: var(--font-line-height-700); white-space: normal; } .site-header .header-inner > nav > ul > li > ul li > a { color: var(--color-text-primary); font-size: var(--font-size-350); font-weight: var(--font-weight-regular); line-height: var(--font-line-height-600); display: flex; align-items: center; height: 40px; padding-left: 18px; padding-right: 10px; color: var(--color-text-primary); width: fit-content; } .site-header .header-inner > nav > ul > li > ul li > a:hover, .site-header .header-inner > nav > ul > li > ul li > a.is-active { color: var(--color-text-pure); } .site-header .header-inner > nav > ul > li .multi-sub-menu { position: absolute; top: 88px; left: 0; right: 0; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; column-gap: 24px; width: 100%; padding: var(--space-1200) var(--space-1400); max-width: 1706px; margin: auto; } .site-header .header-inner > nav > ul > li .multi-sub-menu > li { padding-top: 0; width: 160px; } .site-header .header-inner > nav > ul > li .multi-sub-menu > li.sub-menu-description { position: unset; } .site-header .header-inner > nav > ul > li .multi-sub-menu > li > a { color: var(--color-text-primary); font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 2.8px; text-transform: uppercase; display: flex; align-items: center; height: 40px; padding-top: 0; pointer-events: none; } .site-header .header-inner > nav > ul > li .multi-sub-menu > li > ul { list-style: none; margin: 0; padding: 0; } .site-header .header-inner > nav > ul > li .multi-sub-menu > li > ul > li > a { display: flex; align-items: center; } .hamburger-menu-button { z-index: 1; display: block; background-color: transparent; width: 40px; height: 40px; padding: 8px 4px; outline: none; border: none; cursor: pointer; } .hamburger-menu-button > div { position: relative; width: 24px; height: 14px; left: 0; right: 0; margin: 0 auto; transition: .4s ease-in-out; } .hamburger-menu-button > div span { background-color: var(--color-text-pure); display: block; width: 100%; height: 2px; position: absolute; left: 0; transition: .4s ease-in-out; } .hamburger-menu-button > div span:nth-child(1) { top: 0; } .hamburger-menu-button > div span:nth-child(2) { top: 7px; } .hamburger-menu-button > div span:nth-child(3) { top: 14px; } .hamburger-menu-button.close > div { transform: rotate(-180deg); } .hamburger-menu-button.close > div span:nth-child(1) { transform: translate(0px, 9px) rotate(45deg); } .hamburger-menu-button.close > div span:nth-child(2) { transform: scale(0, 1); } .hamburger-menu-button.close > div span:nth-child(3) { transform: translate(0px, -5px) rotate(-45deg); } .anim-observer { overflow: hidden; } .anim-observer.hero h1, .anim-observer.hero p, .anim-observer.hero .benefits-list, .anim-observer.hero .hero-list { opacity: 0; } .anim-observer.hero h1 { animation: fadeInBottomToTopSoft 300ms ease forwards 400ms; } .anim-observer.hero p { animation: fadeInBottomToTopSoft 300ms ease forwards 300ms; } .anim-observer.hero .benefits-list, .anim-observer.hero .hero-list { animation: fadeInBottomToTopSoft 300ms ease forwards 300ms; } @keyframes glow { from { filter: blur(25px); } to { filter: blur(35px); } } @keyframes float { 0% { transform: translatey(0px); } 50% { transform: translatey(-8px); } 100% { transform: translatey(0px); } } @keyframes arrowDown { 0% { transform: translatey(0px); } 50% { transform: translatey(-10px); } 100% { transform: translatey(0px); } } @keyframes fadeInBottomToTopSoft { 0% { transform: translatey(20px); opacity: 0; } 100% { transform: translatey(0px); opacity: 1; } } @keyframes fadeInBottomToTopLong { 0% { transform: translatey(40px); opacity: 0; } 100% { transform: translatey(0px); opacity: 1; } } @keyframes fadeInTopToBottom { 0% { transform: translatey(-20px); opacity: 0; } 100% { transform: translatey(0px); opacity: 1; } } @keyframes fadeInRightToLeft { 0% { transform: translatex(-30px); opacity: 0; } 100% { transform: translatex(0px); opacity: 1; } } @keyframes fadeInRightToLeftAndRotate { 0% { transform: translatex(-30px) rotate(0deg); opacity: 0; } 100% { transform: translatex(0px) rotate(-13deg); opacity: 1; } } @keyframes fadeInLeftToRight { 0% { transform: translatex(30px); opacity: 0; } 100% { transform: translatex(0px); opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes scaling { 0% { transform: scale3d(0.4, 0.4, 1); } 50% { transform: scale3d(1.4, 1.4, 1); } 100% { transform: scale3d(0.4, 0.4, 1); } } @keyframes rotating { to { transform: rotate(360deg); } } .hero { display: flex; flex-direction: column; padding: 0 var(--space-500); position: relative; order: 1; } .hero-text { max-width: 686px; color: var(--color-text-primary, #DFDFDF); font-family: 'Montserrat', sans-serif; font-size: var(--font-size-550, 22px); font-style: normal; font-weight: var(--font-weight-medium, 500); line-height: var(--font-line-height-750, 30px); letter-spacing: var(--font-letter-spacing-default, 0px); } .hero .content-wrapper { display: flex; flex-wrap: wrap; flex-direction: row; width: 100%; max-width: 1396px; position: relative; margin: auto; justify-content: space-between; align-items: flex-start; padding: 104px 0 0; } .hero .content-wrapper.line { display: flex; flex-wrap: wrap; padding: 0 0 148px; } .hero .left-box { display: flex; flex-direction: column; gap: var(--space-600); max-width: 760px; } .hero .left-box .btn-primary { margin-top: 0; width: fit-content; } .hero .right-box { position: relative; display: flex; align-items: flex-end; width: 530px; height: 397.221px; background: url("./../images/xAxises.webp") no-repeat 0% 70%; background-size: contain; justify-content: center; } .hero .right-box .bg-sparks { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.7; mix-blend-mode: screen; } .install-image-container { width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .05s linear; transform-style: preserve-3d; transition: transform .07s linear; } .hero-list { display: flex; flex-wrap: wrap; position: relative; justify-content: space-between; width: 100%; gap: 24px; border-top: 1px solid #303030; margin-top: 96px; padding-top: 48px; } .hero-item { position: relative; display: flex; align-items: center; } .hero-item-img { width: 40px; height: 40px; margin-right: 24px; } .hero-item-text { color: var(--color-text-primary, #DFDFDF); 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-default, 0px); text-align: left; } .bars { position: relative; display: flex; align-items: flex-end; justify-content: space-around; gap: 20px; height: 100%; max-width: 100%; } .bar { display: flex; justify-content: center; position: relative; width: 162px; background: linear-gradient(180deg, #D34037 0%, rgba(109, 33, 28, 0) 100%); height: 100%; margin-bottom: 13px; cursor: pointer; animation-name: none; } .bar-img { position: absolute; top: -70px; left: 50%; transform: translate(-50%, 80%); width: auto; max-height: 40px; opacity: 0; transition: .2s ease-in-out; } .bar-container { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .bar:hover { transition: .2s ease-in-out; } .bar span, .bar span span { padding-top: 13px; color: #FFF; text-align: center; font-family: 'Montserrat', sans-serif; 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); letter-spacing: var(--font-letter-spacing-default, 0); } .bar-text { text-align: center; color: var(--semantic-color-text-secondary, #9F9F9F); text-align: center; font-family: 'Montserrat', sans-serif; font-size: var(--font-size-175, 14px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-3, 24px); letter-spacing: var(--font-letter-spacing-none, 0px); } .bar.left { max-height: 258px; } .bar.right { max-height: 276px; } .js-count-up.desktop { display: inline-block; } .js-count-up.mob { display: none; } @keyframes highGrow { from { height: 0%; } to { height: 100%; } } @keyframes springBounceBarLeft { 0% { transform: translateY(0); } 20% { transform: translateY(-12px); } 40% { transform: translateY(6px); } 60% { transform: translateY(-4px); } 80% { transform: translateY(2px); } 100% { transform: translateY(0); } } @keyframes springBounceBarRight { 0% { transform: translateY(0); } 20% { transform: translateY(-12px); } 40% { transform: translateY(6px); } 60% { transform: translateY(-4px); } 80% { transform: translateY(2px); } 100% { transform: translateY(0); } } section.audience { position: relative; order: 2; } section.audience .content-wrapper { display: flex; flex-direction: column; align-items: center; padding: 101px 20px; max-width: 1390px; margin: 0 auto; } .audience-container { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 0 97px; } .audience-line { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; padding-top: 96px; } .audience-item { display: flex; flex-direction: column; align-items: center; max-width: 238px; } .audience-item .audience-img { display: flex; } .audience-item .audience-img img { max-width: 95px; width: 100%; height: auto; } .audience-item .audience-img span { color: var(--color-text-brand-ow, #D34037); text-align: center; font-family: var(--font-family-brand, Montserrat); font-size: var(--font-size-1600, 64px); font-style: normal; font-weight: var(--font-weight-bold, 700); line-height: var(--font-line-height-1800, 72px); /* 112.5% */ letter-spacing: var(--font-letter-spacing-default, 0px); } .audience-item .audience-img span.audience-img-text { display: block; margin-top: 13px; color: var(--semantic-color-foreground-text-secondary, #BFBFBF); text-align: center; font-family: var(--font-family-brand, Montserrat); font-size: var(--font-size-1100, 44px); font-style: normal; font-weight: var(--font-weight-bold, 700); line-height: var(--font-line-height-1300, 52px); letter-spacing: var(--font-letter-spacing-default, 0px); } .audience-item .anim-icon { height: 127px; margin-top: -6px; margin-bottom: -11px; } .audience-item .audience-text { margin-top: 15px; color: var(--semantic-color-foreground-text-primary, #DFDFDF); text-align: center; font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; /* 150% */ letter-spacing: 3.2px; text-transform: uppercase; max-width: 300px; } .audience-text-small { color: var(--semantic-color-foreground-text-tertiary, #9F9F9F); text-align: center; font-family: var(--font-family-default, Lato); 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); letter-spacing: var(--font-letter-spacing-default, 0px); } section.audience-diff { order: 3; } section.audience-diff .content-wrapper { max-width: 1470px; padding: 90px 20px 120px; } section.audience-diff .heading-title-mid { display: block; margin-bottom: 48px; color: var(--color-text-pure, #FFF); text-align: center; 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-regular, 1.2px); text-transform: uppercase; } section.audience-diff .heading-second { max-width: 980px; text-align: center; line-height: 52px; } .audience-diff-container { display: flex; gap: 24px; margin: 194px auto 40px; } .audience-diff-item { display: flex; flex-flow: column; align-items: center; width: 100%; max-width: 450px; overflow: hidden; background: var(--color-surface-primary, #101010); } .audience-diff-item-icon { min-height: 40px; min-width: 40px; margin: 23px auto 0; } .audience-diff-item-img { height: 360px; width: auto; max-width: unset; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 42.33%, rgba(0, 0, 0, 0.8) 63%), url() lightgray -154.029px -2.001px/191.957% 100.556% no-repeat, var(--color-surface-brand-ow, #D34037); mix-blend-mode: screen; } .audience-diff-item-text { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0 10px 20px; } .audience-diff-item .heading-third { color: var(--semantic-color-foreground-text-primary, #DFDFDF); text-align: center; font-family: var(--font-family-brand, Montserrat); font-size: var(--font-size-600, 24px); font-style: normal; font-weight: var(--font-weight-bold, 700); line-height: var(--font-line-height-800, 32px); letter-spacing: var(--font-letter-spacing-default, 0px); } .audience-diff-item .text-main { max-width: 352px; color: var(--color-text-secondary, #BFBFBF); text-align: center; font-family: var(--font-family-default, Lato); 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); letter-spacing: var(--font-letter-spacing-default, 0px); } section.gamers { position: relative; max-width: 100%; overflow: hidden; order: 4; } section.gamers .content-wrapper { display: flex; flex-direction: column-reverse; align-items: flex-start; max-width: 1436px; width: 100%; margin: 0 auto; padding: 107px 20px 158px; } section.gamers .box-left { display: flex; flex-direction: column; align-items: flex-start; position: relative; max-width: 532px; gap: 24px; } section.gamers h2.heading-second { line-height: 118.182%; } section.gamers .text-main { color: var(--color-text-secondary, #BFBFBF); margin: 0; text-align: left; } section.gamers .logo-ow { height: 90px; } section.gamers .video-container { position: relative; width: 100%; } section.gamers .video-container video { display: block; max-width: 100%; left: unset; } .stats-logos { padding: 96px 20px; opacity: 0.7; order: 6; } .stats-logos p { text-align: center; margin-bottom: 24px; } .stats-logos .logos-list { max-width: 1400px; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; } section.press { order: 7; } section.press .content-wrapper { padding: 92px 10px 92px; max-width: 1306px; } section.press .content-wrapper-inner { display: flex; justify-content: space-between; align-items: flex-start; align-content: flex-start; gap: 122px 24px; flex-wrap: wrap; padding: 97px 0; } section.press h2.heading-second { text-align: center; } section.press .press-item { display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; max-width: 596px; } section.press .press-item img, section.press .press-item video { max-width: 100%; margin: 0 auto; } section.press .press-item video { margin-top: -31px; max-width: 94%; } section.press .press-item .img-logo-video { margin-top: -18px; } section.press .press-item .block-item-text { position: relative; margin-bottom: 18px; color: #DFDFDF; text-align: center; font-family: var(--font-family-brand, Montserrat); font-size: var(--font-size-600, 24px); font-style: normal; font-weight: var(--font-weight-bold, 700); line-height: var(--font-line-height-800, 32px); letter-spacing: var(--font-letter-spacing-default, 0px); } section.press .press-item .block-item-img { margin-bottom: 23px; } section.press .press-item .btn-view { display: flex; height: 48px; padding: var(--space-300, 12px) var(--space-800, 32px); justify-content: center; align-items: center; border: 1px solid var(--color-border-secondary, #9F9F9F); color: var(--color-text-primary, #DFDFDF); text-align: center; 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-regular, 1.2px); text-transform: uppercase; transition: .2s ease-in-out; } section.press .press-item .btn-view:hover { background-color: var(--color-hover-brand-ow); border-color: var(--color-hover-brand-ow); color: var(--color-text-pure); } .carousel-section .swiper-button-prev, .carousel-section .swiper-container-rtl .swiper-button-next, .carousel-section .swiper-button-next, .carousel-section .swiper-container-rtl .swiper-button-prev { background-image: none !important; } .swiper-button-next, .swiper-button-prev, .swiper-prev-one, .swiper-next-one, .swiper-prev-two, .swiper-next-two { position: absolute; z-index: 2; padding: 0 !important; min-width: 60px !important; height: 60px !important; left: unset; top: unset; right: unset; top: 275px; transition: .1s ease-in-out; } .swiper-button-next::after, .swiper-button-next::after, .swiper-button-prev::after, .swiper-button-prev::after, .swiper-prev-one::after, .swiper-prev-one::after, .swiper-next-one::after, .swiper-next-one::after, .swiper-prev-two::after, .swiper-prev-two::after, .swiper-next-two::after, .swiper-next-two::after { display: none !important; } .swiper-button-next svg, .swiper-button-prev svg, .swiper-prev-one svg, .swiper-next-one svg, .swiper-prev-two svg, .swiper-next-two svg { fill: #fff; width: 60px; height: 60px; transition: .1s ease-in-out; } .swiper-button-next svg path, .swiper-button-prev svg path, .swiper-prev-one svg path, .swiper-next-one svg path, .swiper-prev-two svg path, .swiper-next-two svg path { transition: .1s ease-in-out; fill: #606060; } .swiper-button-next:hover svg, .swiper-button-prev:hover svg, .swiper-prev-one:hover svg, .swiper-next-one:hover svg, .swiper-prev-two:hover svg, .swiper-next-two:hover svg { fill: #D34037; } .swiper-button-next:hover svg path, .swiper-button-prev:hover svg path, .swiper-prev-one:hover svg path, .swiper-next-one:hover svg path, .swiper-prev-two:hover svg path, .swiper-next-two:hover svg path { fill: #fff; } .swiper-button-next { right: 0 !important; } .swiper-button-prev { left: 0 !important; } section.inventory { background: #fff; order: 5; } section.inventory .content-wrapper { display: flex; flex-direction: column; align-items: center; padding: 96px 20px; max-width: 1475px; max-width: 1422px; margin: 0 auto; } section.inventory .heading-second { color: #000; } section.inventory .swiper { position: relative; touch-action: pan-y; display: flex; flex-direction: column; } .inventory-container-box { position: relative; height: 100%; padding: 48px 60px 0; background: var(--semantic-color-background-cf, #EFEFEF); } .inventory-container { position: relative; max-width: 686px; width: 100%; display: flex; flex-direction: column; margin: 0 auto; } .inventory-wrapper { display: flex; justify-content: center; overflow: hidden; position: relative; max-width: 100%; gap: 24px; padding: 46px 20px 96px; } .inventory-wrapper-inner { display: flex; flex-direction: column; position: relative; max-width: 50%; } .inventory-wrapper h3.heading-three { display: block; margin-bottom: 24px; color: #000; text-align: center; font-family: var(--font-family-brand, Montserrat); font-size: var(--font-size-600, 24px); font-style: normal; font-weight: var(--font-weight-bold, 700); line-height: var(--font-line-height-800, 32px); letter-spacing: var(--font-letter-spacing-default, 0px); } .inventory-wrapper .swiper-wrapper { touch-action: pen-y; } .inventory-wrapper .swiper-container { width: 100%; height: 100%; max-width: 686px; overflow: hidden; } .inventory-wrapper .carousel-item-img { position: relative; width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; } .inventory-wrapper .carousel-item-img img, .inventory-wrapper .carousel-item-img video { max-width: 100%; object-fit: cover; object-position: center; } .inventory-item { max-width: 566px; display: flex; flex-direction: column; align-items: center; } .carousel-item-text { margin-top: 24px; margin-bottom: 44px; } .carousel-item-text-line { display: flex; align-items: center; margin-bottom: 22px; } .carousel-item-text-line img { display: inline-block; width: 25px; height: 25px; margin-right: 8px; } .carousel-item-text-line p { color: var(--semantic-color-foreground-text-pure, #000); font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; letter-spacing: 3.2px; text-transform: uppercase; } .carousel-item { min-height: 461px; } .carousel-item-title { margin-bottom: 10px; color: #D34037; font-family: var(--font-family-brand, Montserrat); font-size: 32px; font-style: normal; font-weight: var(--font-weight-bold, 700); line-height: var(--font-line-height-1000, 40px); letter-spacing: var(--font-letter-spacing-default, 0px); } .carousel-item-text-desc { color: #D34037; font-family: var(--font-family-brand, Montserrat); font-size: 24px; font-style: normal; font-weight: var(--font-weight-bold, 700); line-height: var(--font-line-height-800, 32px); letter-spacing: var(--font-letter-spacing-default, 0px); } .partners { padding: 50px 20px 35px; margin: 0; order: 8; } .partners h2 { text-align: center; margin-bottom: 48px; } .partners .partners-list { max-width: 1396px; margin: auto; display: flex; align-items: center; justify-content: space-evenly; gap: 48px 8px; opacity: 0.6; } .partners .partners-list:not(:last-child) { margin-bottom: 48px; } .partners .partners-list img { width: 100%; max-width: fit-content; } .chat-with-us-form { position: relative; } .chat-with-us-form .row-flex { display: flex; gap: var(--space-600); } .chat-with-us-form .row-flex > div:not(.button-row) { flex: 1; } .chat-with-us-form .input-row-item { position: relative; padding-bottom: var(--space-600); } .chat-with-us-form .input-row-item.recaptcha-item { padding-bottom: 0px; } .chat-with-us-form .input-row-item.error input, .chat-with-us-form .input-row-item.error textarea, .chat-with-us-form .input-row-item.error select { border-color: var(--color-functional-critical-light); } .chat-with-us-form .input-row-item.error .tooltip-alert { display: block; } .chat-with-us-form .input-row-item label:not(.cb-label) { font-family: var(--font-family-brand); color: var(--color-surface-pure); font-size: var(--font-size-350); position: absolute; top: 15px; left: 14px; line-height: 140%; transition: all 300ms ease; } .chat-with-us-form .input-row-item input, .chat-with-us-form .input-row-item textarea, .chat-with-us-form .input-row-item select { display: block; width: 100%; height: var(--space-1200); padding: 10px var(--space-400) 0; font-size: var(--font-size-400); font-family: inherit; border: 1px solid transparent; background-color: var(--color-text-pure); transition: .1s ease; color: var(--color-surface-pure); outline: transparent; font-weight: 600; font-weight: var(--font-weight-medium); min-width: 280px; } .chat-with-us-form .input-row-item input:hover, .chat-with-us-form .input-row-item input:focus, .chat-with-us-form .input-row-item textarea:hover, .chat-with-us-form .input-row-item textarea:focus, .chat-with-us-form .input-row-item select:hover, .chat-with-us-form .input-row-item select:focus { background-color: var(--color-text-tertiary); } .chat-with-us-form .input-row-item input:focus + label:not(.cb-label), .chat-with-us-form .input-row-item input:not(:placeholder-shown) + label:not(.cb-label), .chat-with-us-form .input-row-item textarea:focus + label:not(.cb-label), .chat-with-us-form .input-row-item textarea:not(:placeholder-shown) + label:not(.cb-label), .chat-with-us-form .input-row-item select:focus + label:not(.cb-label), .chat-with-us-form .input-row-item select:not(:placeholder-shown) + label:not(.cb-label) { top: 4px; font-size: var(--font-size-300); color: var(--color-surface-quaternary); left: 17px; } .chat-with-us-form .input-row-item input::placeholder, .chat-with-us-form .input-row-item textarea::placeholder, .chat-with-us-form .input-row-item select::placeholder { color: var(--color-text-secondary); } .chat-with-us-form .input-row-item input:-webkit-autofill:hover, .chat-with-us-form .input-row-item input:-webkit-autofill:focus, .chat-with-us-form .input-row-item input:-webkit-autofill:active, .chat-with-us-form .input-row-item textarea:-webkit-autofill:hover, .chat-with-us-form .input-row-item textarea:-webkit-autofill:focus, .chat-with-us-form .input-row-item textarea:-webkit-autofill:active, .chat-with-us-form .input-row-item select:-webkit-autofill:hover, .chat-with-us-form .input-row-item select:-webkit-autofill:focus, .chat-with-us-form .input-row-item select:-webkit-autofill:active { transition-delay: 9999s; transition: background-color, color; } .chat-with-us-form .input-row-item textarea { height: 140px; resize: none; padding-top: 23px; margin-bottom: 0px; } .chat-with-us-form .input-row-item select { color: var(--color-surface-pure); font-size: var(--font-size-350); font-weight: var(--font-weight-medium); font-family: var(--font-family-brand); appearance: none; background-position: top 21px right var(--space-300); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='12' height='6' viewBox='0 0 12 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6 6L0 1.40146L1.17029 0L6 3.70161L10.8297 8.09011e-07L12 1.40146L6 6Z' fill='black'/%3E%3C/svg%3E"); background-repeat: no-repeat; } .chat-with-us-form .input-row-item select:has(option:checked:not([value])), .chat-with-us-form .input-row-item select:has(option:checked:not([value=""])) { color: var(--color-surface-pure); font-size: var(--font-size-350); font-weight: 600; } .chat-with-us-form .input-row-item .checboxes-container { display: grid; grid-template-columns: 24px 1fr; column-gap: var(--space-200); position: relative; } .chat-with-us-form .input-row-item .checboxes-container label { font-size: var(--font-size-350); line-height: var(--font-line-height-500); font-weight: var(--font-weight-regular); margin: 0; position: relative; color: var(--color-text-primary); } .chat-with-us-form .input-row-item .checboxes-container label.validation { position: absolute; bottom: -28px; color: var(--color-functional-critical-light); } .chat-with-us-form .input-row-item input[type=checkbox] { appearance: none; width: var(--space-500); height: var(--space-500); background-color: var(--color-surface-pure); border: 1px solid var(--color-text-tertiary); padding: 0; min-width: var(--space-500); } .chat-with-us-form .input-row-item input[type=checkbox]:hover, .chat-with-us-form .input-row-item input[type=checkbox]:focus { background: var(--color-surface-secondary); } .chat-with-us-form .input-row-item input[type=checkbox]:checked { border: 1px solid var(--color-brand-ow); background: var(--color-brand-ow); 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"); } .chat-with-us-form .input-row-item 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"); } .chat-with-us-form .input-row-item .tooltip-alert { padding-top: 4px; font-family: var(--font-family-brand); font-size: var(--font-size-300); font-weight: var(--font-weight-medium); line-height: 132%; display: none; color: var(--color-functional-critical-light); } .chat-with-us-form .input-row-item .tooltip-alert svg { width: var(--space-500); height: var(--space-500); margin-bottom: -4px; } .chat-with-us-form .button-row { width: 110px; } .chat-with-us-form .button-row button { position: relative; transition: all 150ms; } .chat-with-us-form .button-row button .submit-button-text { font-size: var(--font-size-400); transition: all 150ms; } .chat-with-us-form .button-row button.loading { pointer-events: none; min-width: var(--space-1200); padding: 7px 0; border-radius: 50px; } .chat-with-us-form .button-row button.loading .submit-button-text { font-size: 0px; } .chat-with-us-form .button-row button.loading .loader { opacity: 1; transform: scale(1); } .chat-with-us-form .button-row button.loading .loader svg { animation: 0.75s linear rotating infinite; } .chat-with-us-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 0.4s ease-in-out; transform: scale(0.4); opacity: 0; } .chat-with-us-form .button-row button .loader svg { width: 18px; height: 18px; } @keyframes rotating { to { transform: rotate(360deg); } } .chat-with-us-form .success-message { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-surface-pure); pointer-events: none; opacity: 0; transition: opacity 150ms; } .chat-with-us-form .success-message.active { opacity: 1; pointer-events: unset; } .chat-with-us-form .success-message img { margin-bottom: 24px; } .chat-with-us-form .success-message h4 svg { width: var(--space-500); height: var(--space-500); color: var(--color-functional-success-light); margin-bottom: -2px; } .chat-with-us-form .general-form-error { background-color: var(--color-brand-ow); color: var(--color-text-pure); 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; } .chat-with-us-form .general-form-error.active { display: block; } .chat-with-us-form:has(.success-message.active) .recaptcha-item { opacity: 0; } .hidden { display: none !important; } .sr-only:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .chat-with-us-form .input-row-item label:not(.cb-label) { font-family: var(--font-family-brand); color: var(--color-surface-pure); font-size: var(--font-size-350); position: absolute; top: 15px; left: 14px; line-height: 140%; transition: .3s; } main .logo { padding: 20px; } main .submit-btn { border: none; font-family: inherit; background-color: inherit; transition: all 150ms ease; cursor: pointer; background-color: #D34037; color: white; height: 48px; padding: 12px 24px; width: 100%; letter-spacing: 0.04em; font-size: 16px; line-height: 24px; display: block; } main .submit-btn:hover, main .submit-btn:focus { background-color: #F3513E; } .uninstall-form { max-width: 540px; margin: auto; padding: 0 20px 20px 20px; } .uninstall-form .block { padding-bottom: 24px; } .uninstall-form .radio-item { display: flex; align-items: baseline; gap: 6px; } .uninstall-form .other { display: flex; gap: 10px; padding-top: 8px; } .uninstall-form .radio-group { display: flex; flex-direction: column; } .uninstall-form .radio-group.mix1 .radio1 { order: 2; } .uninstall-form .radio-group.mix1 .radio2 { order: 1; } .uninstall-form .radio-group.mix1 .radio3 { order: 3; } .uninstall-form .radio-group.mix1 .radio4 { order: 5; } .uninstall-form .radio-group.mix1 .radio5 { order: 4; } .uninstall-form .radio-group.mix2 .radio1 { order: 3; } .uninstall-form .radio-group.mix2 .radio2 { order: 1; } .uninstall-form .radio-group.mix2 .radio3 { order: 4; } .uninstall-form .radio-group.mix2 .radio4 { order: 5; } .uninstall-form .radio-group.mix2 .radio5 { order: 2; } .uninstall-form .radio-group.mix3 .radio1 { order: 5; } .uninstall-form .radio-group.mix3 .radio2 { order: 4; } .uninstall-form .radio-group.mix3 .radio3 { order: 3; } .uninstall-form .radio-group.mix3 .radio4 { order: 2; } .uninstall-form .radio-group.mix3 .radio5 { order: 1; } .uninstall-form .radio-group .radio6 { order: 6; } label { font-size: 14px; line-height: 20px; margin-bottom: 2px; } label.disabled { pointer-events: none; } label.validation { font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: 0.04em; color: #FC3737; margin-top: 4px; display: none; } label span { font-size: 14px; color: #999999; padding-left: 4px; } label span.no-padding { padding: 0; } label a { color: #ccc; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } label a:hover, label a:focus { color: #F3513E; } input[type=text], input[type=email], input[type=password], input[type=number], textarea { border: 1px solid #4D4D4D; color: #ccc; background-color: #262626; height: 48px; width: 100%; padding: 0 12px; font-size: 16px; outline: none; caret-color: #FC3737; border-radius: 0; appearance: none; font-family: 'Lato', sans-serif; } 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 { border-color: #CCCCCC; } 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: #333333; color: #999999; pointer-events: none; } textarea { min-height: 120px; padding-top: 10px; resize: vertical; border-radius: 0; appearance: none; font-family: 'Lato', sans-serif; } .error input { border: 1px solid #D32F2F; } .error .validation { display: block; } .checboxes-container { display: grid; grid-template-columns: 24px 1fr; column-gap: 8px; margin: 16px 0 24px; position: relative; } .checboxes-container label { color: #CCCCCC; font-size: 14px; line-height: 20px; font-weight: 400; margin: 0; } .checboxes-container label.validation { position: absolute; bottom: -28px; color: #FC3737; } 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 white inset !important; } .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; } .loader svg { width: 18px; height: 18px; } @keyframes rotating { to { transform: rotate(360deg); } } .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; justify-content: center; align-items: 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: var(--space-300); z-index: 4; color: var(--color-icon-primary); } .popup-form-container .btn-close svg { width: var(--space-600); height: var(--space-600); } .popup-form-container .btn-close:hover { color: var(--color-icon-brand-ow); } .popup-form-container.is-open { opacity: 1; pointer-events: all; } .popup-form-container .popup-form-inner { padding: var(--space-1200) var(--space-500); background-color: var(--color-surface-secondary); border: 1px solid var(--color-border-secondary); } body.modal-is-open { height: 100vh; overflow: hidden; padding-right: 15px; } .lets-chat { padding: 95px 20px 52px; order: 8; overflow: hidden; } .lets-chat .mob-only { display: none; max-width: 100%; } .lets-chat .mobile-bg { display: none; width: 100vw; height: auto; margin: 0 0 0 calc(-1 * var(--space-500)); } .lets-chat img { max-width: unset; } .lets-chat .lets-chat-inner { max-width: 1396px; margin: auto; display: flex; align-items: center; justify-content: space-between; } .lets-chat .lets-chat-inner .right-box { max-width: 605px; } .lets-chat .lets-chat-inner .left-box .desktop { width: 100%; } .lets-chat .lets-chat-inner .video-container video { width: 100%; transition: all 300ms ease; } .lets-chat .lets-chat-inner h2 { margin-bottom: var(--space-600); text-wrap: nowrap; } .lets-chat .lets-chat-inner h2.smaller { text-wrap: wrap; } .lets-chat .lets-chat-inner p { color: #DFDFDF; font-family: Lato, sans-serif; max-width: 545px; margin-bottom: var(--space-600); font-size: var(--font-size-450); } .lets-chat .lets-chat-inner p.smaller { max-width: 460px; } .lets-chat .lets-chat-inner p a { color: var(--color-brand-ow); } .lets-chat .lets-chat-inner p a:hover { color: var(--color-text-pure); } .cv-thank-you { text-align: center; padding: 96px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; } .cv-thank-you p { font-family: 'Montserrat', sans-serif; } .site-footer { font-family: 'Montserrat', sans-serif; width: 100%; padding-top: 30px; background-color: var(--color-surface-pure); background-size: cover; background-repeat: no-repeat; background-position: top center; } .site-footer .back-to-top { display: flex; align-items: center; flex-direction: column; justify-content: center; width: fit-content; margin: 17px auto 0; font-size: var(--font-size-400); line-height: var(--font-line-height-600); color: var(--color-text-primary); text-decoration: none; } .site-footer .back-to-top svg { color: var(--color-text-primary); width: var(--space-600); height: var(--space-600); transform: rotate(180deg); margin-bottom: var(--space-200); } .site-footer .back-to-top:hover, .site-footer .back-to-top:hover svg { color: var(--color-hover-brand-ow); } .site-footer .site-footer-social { background-color: var(--color-surface-primary); } .site-footer .site-footer-social .site-footer-social-inner { max-width: 1720px; margin: 0 auto; padding: 10px var(--space-500); display: flex; justify-content: space-between; align-items: center; gap: var(--space-600); } .site-footer .site-footer-social .copyright { color: var(--color-text-tertiary); font-size: var(--font-size-350); line-height: 110%; } .site-footer .site-footer-social .social-links { display: flex; padding: 0; list-style: none; gap: var(--space-500); } .site-footer .site-footer-social .social-links li { height: var(--space-600); } .site-footer .site-footer-social .social-links li a { width: var(--space-600); height: var(--space-600); display: inline-block; color: var(--color-text-tertiary); } .site-footer .site-footer-social .social-links li a:hover { color: var(--color-text-pure); } .site-footer .site-footer-social .social-links svg { width: var(--space-600); height: var(--space-600); } .site-footer .ow-ads-logo.footer { display: flex; justify-content: center; max-width: 206px; margin: 60px auto 50px; } .site-footer .site-footer-list { display: flex; align-items: center; justify-content: flex-start; flex-grow: 1; margin-left: 8px; } .site-footer .site-footer-list li { margin-right: 32px; } .site-footer .site-footer-list a { white-space: nowrap; color: #9F9F9F; font-family: 'Montserrat', sans-serif; font-size: var(--font-size-350, 14px); font-style: normal; font-weight: var(--font-weight-regular, 400); line-height: var(--font-line-height-500, 20px); letter-spacing: var(--font-letter-spacing-default, 0px); } .site-footer .site-footer-list a:hover { color: #fff; } @media screen and (min-width: 861px) { section.gamers .content-wrapper { flex-direction: row; } section.gamers .video-container { z-index: -1; overflow: visible; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } section.gamers .video-container video { position: absolute; left: 34.2%; top: 50%; pointer-events: none; bottom: 0; max-height: 100%; max-width: 1020px; transform: translate(0, -50%); } } @media (min-width: 1024px) { .anim-observer.audience h2 { opacity: 0; } .anim-observer.audience .audience-line, .anim-observer.audience .audience-text-small { opacity: 0; } .anim-observer.audience.animate h2 { animation: .3s .4s forwards fadeInBottomToTopSoft; } .anim-observer.audience.animate .audience-line { animation: .3s .8s forwards fadeInBottomToTopSoft; } .anim-observer.audience.animate .audience-text-small { animation: .3s 1s forwards fadeInBottomToTopSoft; } .anim-observer.audience-diff .heading-title-mid, .anim-observer.audience-diff .heading-second, .anim-observer.audience-diff .audience-diff-item { opacity: 0; } .anim-observer.audience-diff.animate .heading-title-mid { animation: .2s .2s forwards fadeInBottomToTopSoft; } .anim-observer.audience-diff.animate .heading-second { animation: .2s .3s forwards fadeInBottomToTopSoft; } .anim-observer.audience-diff.animate .audience-diff-item:nth-child(1) { animation: .2s .3s forwards fadeInRightToLeft; } .anim-observer.audience-diff.animate .audience-diff-item:nth-of-type(2) { animation: .2s .4s forwards fadeInRightToLeft; } .anim-observer.audience-diff.animate .audience-diff-item:nth-of-type(3) { animation: .2s .5s forwards fadeInRightToLeft; } .anim-observer.stats-logos p, .anim-observer.stats-logos img { opacity: 0; } .anim-observer.stats-logos.animate p { animation: fadeInBottomToTopSoft 300ms ease forwards 200ms; } .anim-observer.stats-logos.animate img:nth-child(1) { animation: fadeInLeftToRight 300ms ease forwards; animation-delay: 110ms; } .anim-observer.stats-logos.animate img:nth-child(2) { animation: fadeInLeftToRight 300ms ease forwards; animation-delay: 210ms; } .anim-observer.stats-logos.animate img:nth-child(3) { animation: fadeInLeftToRight 300ms ease forwards; animation-delay: 310ms; } .anim-observer.stats-logos.animate img:nth-child(4) { animation: fadeInLeftToRight 300ms ease forwards; animation-delay: 410ms; } .anim-observer.stats-logos.animate img:nth-child(5) { animation: fadeInLeftToRight 300ms ease forwards; animation-delay: 510ms; } .anim-observer.stats-logos.animate img:nth-child(6) { animation: fadeInLeftToRight 300ms ease forwards; animation-delay: 610ms; } .anim-observer.stats-logos.animate img:nth-child(7) { animation: fadeInLeftToRight 300ms ease forwards; animation-delay: 710ms; } .anim-observer.stats-logos.animate img:nth-child(8) { animation: fadeInLeftToRight 300ms ease forwards; animation-delay: 810ms; } .anim-observer.stats-logos.animate img:nth-child(9) { animation: fadeInLeftToRight 300ms ease forwards; animation-delay: 910ms; } .anim-observer.partners h2, .anim-observer.partners img { opacity: 0; } .anim-observer.partners.animate h2 { animation: fadeInBottomToTopSoft 300ms ease forwards 400ms; } .anim-observer.partners.animate img { animation: .2s forwards fadeInRightToLeft; } .anim-observer.partners.animate img:nth-child(1) { animation-delay: 80ms; } .anim-observer.partners.animate img:nth-child(2) { animation-delay: 160ms; } .anim-observer.partners.animate img:nth-child(3) { animation-delay: 240ms; } .anim-observer.partners.animate img:nth-child(4) { animation-delay: 320ms; } .anim-observer.partners.animate img:nth-child(5) { animation-delay: 400ms; } .anim-observer.partners.animate img:nth-child(6) { animation-delay: 480ms; } .anim-observer.partners.animate img:nth-child(7) { animation-delay: 560ms; } .anim-observer.partners.animate img:nth-child(8) { animation-delay: 640ms; } .anim-observer.partners.animate img:nth-child(9) { animation-delay: 720ms; } .anim-observer.partners.animate img:nth-child(10) { animation-delay: 800ms; } .anim-observer.partners.animate img:nth-child(11) { animation-delay: 880ms; } .anim-observer.partners.animate img:nth-child(12) { animation-delay: 960ms; } .anim-observer.partners.animate img:nth-child(13) { animation-delay: 1040ms; } .anim-observer.partners.animate img:nth-child(14) { animation-delay: 1120ms; } .anim-observer.partners.animate img:nth-child(15) { animation-delay: 1200ms; } .anim-observer.partners.animate img:nth-child(16) { animation-delay: 1280ms; } .anim-observer.partners.animate img:nth-child(17) { animation-delay: 1360ms; } .anim-observer.partners.animate img:nth-child(18) { animation-delay: 1440ms; } .anim-observer.partners.animate img:nth-child(19) { animation-delay: 1520ms; } .anim-observer.partners.animate img:nth-child(20) { animation-delay: 1600ms; } .anim-observer.partners.animate img:nth-child(21) { animation-delay: 1680ms; } .anim-observer.partners.animate img:nth-child(22) { animation-delay: 1760ms; } .anim-observer.partners.animate img:nth-child(23) { animation-delay: 1840ms; } .anim-observer.partners.animate img:nth-child(24) { animation-delay: 1920ms; } .anim-observer.partners.animate img:nth-child(25) { animation-delay: 2000ms; } .anim-observer.partners.animate img:nth-child(26) { animation-delay: 2080ms; } .anim-observer.partners.animate img:nth-child(27) { animation-delay: 2160ms; } .anim-observer.partners.animate img:nth-child(28) { animation-delay: 2240ms; } .anim-observer.partners.animate img:nth-child(29) { animation-delay: 2320ms; } .anim-observer.partners.animate img:nth-child(30) { animation-delay: 2400ms; } .anim-observer.partners.animate img:nth-child(31) { animation-delay: 2480ms; } .anim-observer.partners.animate img:nth-child(32) { animation-delay: 2560ms; } .anim-observer.partners.animate img:nth-child(33) { animation-delay: 2640ms; } .anim-observer.partners.animate img:nth-child(34) { animation-delay: 2720ms; } .anim-observer.partners.animate img:nth-child(35) { animation-delay: 2800ms; } .anim-observer.partners.animate img:nth-child(36) { animation-delay: 2880ms; } .anim-observer.partners.animate img:nth-child(37) { animation-delay: 2960ms; } .anim-observer.partners.animate img:nth-child(38) { animation-delay: 3040ms; } .anim-observer.partners.animate img:nth-child(39) { animation-delay: 3120ms; } .anim-observer.gamers .box-left, .anim-observer.gamers .box-right { opacity: 0; } .anim-observer.gamers.animate .box-left { animation: .3s .4s forwards fadeInRightToLeft; } .anim-observer.gamers.animate .box-right { animation: .3s .4s forwards fadeInLeftToRight; } .anim-observer.inventory .heading-second, .anim-observer.inventory .inventory-wrapper-inner:first-of-type, .anim-observer.inventory .inventory-wrapper-inner:last-of-type { opacity: 0; } .anim-observer.inventory.animate .heading-second { animation: .3s .5s forwards fadeInBottomToTopSoft; } .anim-observer.inventory.animate .inventory-wrapper-inner:first-of-type { animation: .6s .4s forwards fadeInRightToLeft; } .anim-observer.inventory.animate .inventory-wrapper-inner:last-of-type { animation: .6s .4s forwards fadeInLeftToRight; } .anim-observer.press .heading-second, .anim-observer.press .press-item { opacity: 0; } .anim-observer.press.animate .heading-second { animation: .3s .5s forwards fadeInBottomToTopSoft; } .anim-observer.press.animate .press-item:nth-of-type(odd) { animation: .6s .4s forwards fadeInRightToLeft; } .anim-observer.press.animate .press-item:nth-of-type(even) { animation: .6s .4s forwards fadeInLeftToRight; } } @media (min-width: 1025px) { .bar-container { height: 0; animation: highGrow 2s forwards ease-out; } .bar:hover .bar-img { opacity: 1; transform: translate(-50%, 0%); } .bar.left:hover { animation: springBounceBarLeft 0.8s ease; } .bar.right:hover { animation: springBounceBarRight 0.8s ease; } } @media (max-width: 1920px) { .site-header .header-inner { max-width: 1685px; margin: 0 auto; } } @media (max-width: 1650px) { .site-header .header-inner > nav > ul > li .multi-sub-menu { row-gap: 30px; } } @media (max-width: 1520px) { .site-header .header-inner .logo .logo-desktop { width: 124px; height: 40px; } } @media (max-width: 1360px) { .hero .right-box { width: 544px; justify-content: center; margin: 20px auto; } } @media (max-width: 1343px) { .hero .left-box { max-width: 1100px; margin: 0 auto; } .hero .left-box .btn-primary { margin: 0 auto; } .bars { margin-top: 28px; } } @media (max-width: 1340px) { .sub-title { font-size: 16px; line-height: 24px; } .site-header .header-inner > nav > ul { column-gap: 16px; } .hero-text { max-width: 560px; margin: 0 auto; color: var(--color-text-primary, #DFDFDF); text-align: center; font-size: var(--font-size-450, 18px); font-style: normal; font-weight: var(--font-weight-medium, 500); line-height: var(--font-line-height-650, 26px); letter-spacing: var(--font-letter-spacing-default, 0px); } .hero .content-wrapper { flex-direction: column; align-items: normal; padding: 65px 0 0; text-align: center; } .hero .content-wrapper.line { max-width: 1103px; } section.audience .content-wrapper { max-width: 1100px; padding: 67px 20px; } .audience-container { padding: 0 0 101px; } section.audience-diff .content-wrapper { max-width: 1140px; padding: 76px 20px 33px; } .audience-diff-container { margin: 121px auto 40px; } section.gamers .video-container video { left: 30.2%; } .stats-logos { padding: 127px 20px 49px; } section.press .content-wrapper { max-width: 1066px; } section.press .content-wrapper-inner { padding: 97px 0 46px; } section.press h2.heading-second { font-size: 32px; line-height: 40px; } section.press .press-item { max-width: 488px; } .swiper-button-next, .swiper-button-prev, .swiper-prev-one, .swiper-next-one, .swiper-prev-two, .swiper-next-two { top: 237px; } section.inventory { order: 4; } section.inventory .content-wrapper { max-width: 1152px; } .inventory-container { min-height: 476.5px; } .lets-chat { padding: 59px 20px 101px; } .lets-chat .lets-chat-inner { max-width: 1100px; } } @media screen and (max-width: 1340px) { section.gamers { order: 5; } section.gamers .content-wrapper { max-width: 1142px; padding: 80px 20px; } section.gamers h2.heading-second { max-width: 530px; padding: 0 10px 0 0; } } @media (max-width: 1260px) { .site-header .header-inner > nav > ul > li .multi-sub-menu { justify-content: start; } .partners .partners-inner { display: flex; flex-wrap: wrap; opacity: 0.6; align-items: center; justify-content: center; gap: 48px; } .partners .partners-list { display: contents; } } @media (max-width: 1240px) { .stats-logos .logos-list { justify-content: space-evenly; max-width: 719px; } } @media (max-width: 1200px) { .site-header .header-inner { contain: initial; align-items: center; padding-top: 20px; padding-bottom: 20px; justify-content: flex-end; flex-direction: row-reverse; gap: 4px; } .site-header .header-inner .mobile { display: block; } .site-header .header-inner .hamburger-menu-button { display: block; } .site-header .header-inner .logo svg { position: relative; max-width: 100%; } .site-header .header-inner > nav { position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; transition: opacity 0.3s ease-out; animation: quick-hide-mobile-menu 0.2s 1; } @keyframes quick-hide-mobile-menu { 0% { opacity: 0; } 100% { 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 > li:nth-child(1) > ul > li:nth-child(2) > a::before, .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(3) > a::before, .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(4) > a::before, .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(5) > a::before, .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(6) > a::before, .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(3) > ul > li:nth-child(2) > a::before, .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(3) > ul > li:nth-child(3) > a::before, .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(2) > ul > li:nth-child(2) > a::before, .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(2) > ul > li:nth-child(3) > a::before, .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(2) > ul > li:nth-child(4) > a::before, .site-header .header-inner > nav ul:not(.multi-sub-menu) > li:nth-child(5) > ul > li:nth-child(2) > a::before { left: 19px; top: 18px; } .site-header .header-inner > nav ul > li:nth-child(1) > ul > li:nth-child(4) > a::before { background-position: top left -74px; } .site-header .header-inner > nav > ul { position: absolute; left: 0; top: 76px; margin: 0; flex-direction: column; background-color: var(--color-surface-pure); text-align: center; width: 100%; overflow: overlay; height: 100vh; padding-bottom: 90px; } .site-header .header-inner > nav > ul::-webkit-scrollbar { width: 4px; height: 4px; background-color: var(--color-surface-secondary); } .site-header .header-inner > nav > ul::-webkit-scrollbar-thumb { border-width: 0; background-color: var(--color-surface-quaternary); background-clip: padding-box; } .site-header .header-inner > nav > ul > li { width: 100%; margin: 0; } .site-header .header-inner > nav > ul > li.cta-item { margin-top: auto; } .site-header .header-inner > nav > ul > li.has-submenu.is-open > ul { padding: 8px 0; background-color: var(--color-surface-secondary); } .site-header .header-inner > nav > ul > li a { display: flex; align-items: center; justify-content: space-between; height: 45px; font-size: 16px; line-height: 24px; } .site-header .header-inner > nav > ul > li > a:not(.btn-secondary-small) { color: var(--color-text-primary); font-weight: 500; margin: 0 var(--space-400) 0 var(--space-500); height: 56px; } .site-header .header-inner > nav > ul > li > a:not(.btn-secondary-small).is-active::before { width: 4px; } .site-header .header-inner > nav > ul > li > a:not(.btn-secondary-small)::before { width: 4px; height: 0px; top: 0; bottom: 0; left: -20px; margin: auto; } .site-header .header-inner > nav > ul > li:hover > a:not(.btn-secondary-small)::before, .site-header .header-inner > nav > ul > li:focus-within > a:not(.btn-secondary-small)::before { width: 4px; } .site-header .header-inner > nav > ul > li .btn-secondary-small { width: fit-content; margin: 64px auto 150px; } .site-header .header-inner > nav > ul > li > ul { transform-origin: unset; transform: unset; } .site-header .header-inner > nav > ul > li > ul li.sub-menu-description { display: none; } .site-header .header-inner > nav > ul > li .multi-sub-menu { flex-direction: column; row-gap: 0; } .site-header .header-inner > nav > ul > li .multi-sub-menu > li { width: 100%; text-align: left; } .site-header .header-inner > nav > ul > li .multi-sub-menu > li > a { margin-bottom: 0; display: flex; font-weight: normal; font-size: 14px; letter-spacing: normal; text-transform: none; pointer-events: all; width: 100%; padding-left: 64px; text-transform: uppercase; letter-spacing: 2.8px; } .site-header .header-inner > nav > ul > li .multi-sub-menu > li > a:hover { text-decoration: none; } .site-header .header-inner > nav > ul > li .multi-sub-menu > li > ul { max-height: 0; min-height: unset; transition: max-height 0.25s; overflow: hidden; } .site-header .header-inner > nav > ul > li .multi-sub-menu > li.is-open ul { max-height: 300px; background-color: var(--color-surface-secondary); } .site-header .header-inner > nav > ul > li { /* sumbenu */ } .site-header .header-inner > nav > ul > li > ul, .site-header .header-inner > nav > ul > li .multi-sub-menu { position: static; max-height: 0; margin: 0; padding: 0; opacity: 1; transition: max-height 0.25s; overflow: hidden; width: 100%; box-shadow: none; pointer-events: all; text-align: left; animation: none; min-height: unset; } .site-header .header-inner > nav > ul > li > ul::before, .site-header .header-inner > nav > ul > li .multi-sub-menu::before { content: none; } .site-header .header-inner > nav > ul > li > ul li:not(:last-child), .site-header .header-inner > nav > ul > li .multi-sub-menu li:not(:last-child) { margin: 0; } .site-header .header-inner > nav > ul > li > ul > li > a, .site-header .header-inner > nav > ul > li > ul > li > ul > li > a, .site-header .header-inner > nav > ul > li .multi-sub-menu > li > a, .site-header .header-inner > nav > ul > li .multi-sub-menu > li > ul > li > a { padding-left: 48px; margin: 0; width: 100%; } .site-header .header-inner > nav > ul > li > ul > li > a, .site-header .header-inner > nav > ul > li .multi-sub-menu > li > a { height: 56px; } .site-header .header-inner > nav > ul > li > ul > li:not(:nth-child(2)) a .divider, .site-header .header-inner > nav > ul > li .multi-sub-menu > li:not(:nth-child(2)) a .divider { position: absolute; top: 1px; left: 0; right: 0; height: 1px; width: calc(100% - 30px); margin: auto; background-color: var(--color-border-tertiary); } .site-header .header-inner > nav > ul > li > ul > li > ul > li > a, .site-header .header-inner > nav > ul > li .multi-sub-menu > li > ul > li > a { height: 40px; } .site-header .header-inner > nav > ul > li.is-open a::before { height: 25px; } .site-header .header-inner > nav > ul > li.is-open > ul { max-height: 300px; } .site-header .header-inner > nav > ul > li.is-open .multi-sub-menu { max-height: 820px; } .audience-diff-item-img { height: unset; } } @media (max-width: 1024px) { .hero .right-box { width: auto; } .bars { justify-content: center; } .bar-img { display: none; } .js-count-up.desktop { display: none; } .js-count-up.mob { display: inline-block; } .audience-line { max-width: 600px; justify-content: space-evenly; } .audience-line:first-of-type .audience-item { margin-bottom: 48px; } .audience-line.wrap .audience-item { margin-bottom: 49px; } section.press .content-wrapper-inner { justify-content: center; } section.press .press-item:nth-of-type(n+3) { display: none; } .site-footer .site-footer-social .site-footer-social-inner { padding-top: var(--space-400); padding-bottom: var(--space-400); flex-direction: column-reverse; } } @media screen and (max-width: 1024px) { section.gamers { order: 4; } } @media only screen and (max-width: 1024px) { .site-footer .site-footer-list { display: flex; justify-content: center; width: 100%; max-width: 400px; margin-left: 0; } .site-footer .site-footer-list li { margin-right: 16px; } } @media (max-width: 900px) { .stats-logos { padding: 96px 20px 99px; } section.press .content-wrapper-inner { padding: 75px 0 46px; } .inventory-wrapper { flex-wrap: wrap; padding: 46px 0px 64px; } .inventory-wrapper-inner { max-width: 100%; } .partners { padding: 50px 0 35px; } .partners h2 { margin-bottom: 33px; } .partners .partners-inner { gap: 16px; } .partners .partners-list { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 24px; padding: 16px; scroll-snap-type: x mandatory; } .partners .partners-list:not(:last-child) { margin-bottom: 0; } .partners .partners-list { display: flex; } .partners-list::-webkit-scrollbar { display: none; } .partners-list img { flex: 0 0 auto; width: 100px; height: auto; object-fit: contain; scroll-snap-align: center; } } @media screen and (max-width: 900px) { section.press .content-wrapper { padding: 7px 20px 23px; } } @media (max-width: 860px) { section.gamers .content-wrapper { padding: 0 12px 72px; } section.gamers .video-container video { left: 50%; min-width: 208vw; margin-top: 0%; transform: translateX(-28%); } section.gamers .video-container video { margin-top: 8%; } } @media screen and (max-width: 860px) { section.gamers .box-left { margin-top: -18px; z-index: 1; padding: 0 9px; } section.gamers h2.heading-second { line-height: 124.182%; } section.gamers .text-main:nth-of-type(2) { margin-top: -24px; } } @media (max-width: 800px) { h1 { font-size: var(--font-size-800); line-height: 125%; } h2 { font-size: var(--font-size-800); line-height: 125%; } .hero-list { margin-top: 0px; padding-top: 47px; } .bars { margin-top: -28px; gap: 61px; } .bar { width: 121px; } .bar span, .bar span span { padding-top: 10px; font-size: 24px; line-height: 30px; } .bar-text { font-size: 12px; line-height: 18px; transform: translateY(-3px); } .bar.left { max-height: 193px; } .bar.right { max-height: 207px; } section.audience .content-wrapper { padding: 0 var(--space-300); } .audience-item .anim-icon { height: 127px; margin-top: -6px; margin-bottom: -11px; } section.audience-diff .content-wrapper { align-items: flex-start; justify-content: flex-start; padding: 96px 20px 40px; } section.audience-diff .heading-title-mid { text-align: left; margin-bottom: 24px; } section.audience-diff .heading-second { text-align: left; color: var(--color-text-pure, #FFF); font-family: var(--font-family-brand, Montserrat); 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); letter-spacing: var(--font-letter-spacing-default, 0px); } .stats-logos .logos-list img { width: 26%; height: fit-content; height: max-content; object-fit: scale-down; object-position: top; } section.inventory .content-wrapper { padding: 65px 20px; } .inventory-container { max-width: 100%; min-height: unset; } .carousel-item { min-height: unset; } .partners .partners-list img { height: fit-content; height: max-content; object-fit: scale-down; object-position: top; } .lets-chat { padding: 45px 0 109px; } .lets-chat .mob-only { display: flex; } .lets-chat .mobile-bg { display: block; } .lets-chat .lets-chat-inner { flex-direction: column-reverse; align-items: center; padding: 0 20px; } .lets-chat .lets-chat-inner .right-box { text-align: center; } .lets-chat .lets-chat-inner .left-box { order: -1; display: none; } .lets-chat .lets-chat-inner .video-container video { width: 100%; } .lets-chat .lets-chat-inner p { font-size: 16px; line-height: 24px; } .site-footer { background-size: 220%; padding-top: 0; } } @media only screen and (max-width: 768px) { h1, h2 { font-size: var(--font-size-800); } } @media (max-width: 768px) { .site-header .header-inner { align-items: flex-start; } .site-header .header-inner .logo { width: 164px; } .hero .content-wrapper { padding: 17px 0 0; } .hero .right-box { height: 308px; } .audience-container { padding: 20px 0; } .audience-line:first-of-type { padding-top: 0; } .audience-line:first-of-type .audience-item { max-width: 50%; } .audience-item .audience-img span { font-size: var(--font-size-1100, 44px); line-height: var(--font-line-height-1300, 52px); } .audience-item .audience-img span.audience-img-text { margin-top: 19px; margin-bottom: 15px; font-size: var(--font-size-1100, 44px); line-height: var(--font-line-height-1300, 52px); } .audience-item .audience-text { margin-top: 3px; font-size: 16px; font-style: normal; font-weight: 500; line-height: 24px; /* 150% */ letter-spacing: 3.2px; text-transform: uppercase; } .audience-item .audience-text { margin-top: 0; } .audience-diff-container { flex-wrap: wrap; justify-content: center; margin: 48px 10px 24px; } .audience-diff-item-text { margin-top: -80px; } .audience-diff-item .heading-third { font-size: 24px; line-height: 32px; } .swiper-button-next, .swiper-button-prev, .swiper-prev-one, .swiper-next-one, .swiper-prev-two, .swiper-next-two { top: 178px; } } @media (max-width: 760px) { .chat-with-us-form .button-row { display: flex; padding-bottom: var(--space-600); } } @media (max-width: 700px) { .inventory-container { max-width: 335px; min-height: unset; } } @media (max-width: 600px) { .audience-diff-container { gap: 48px; margin: 48px 0 24px; } .audience-diff-item-icon { margin: 9px auto 0; } .audience-diff-item-img img { max-width: 140%; transform: translate(-15%, -1.5%); } .audience-diff-item-text { gap: 21px; padding: 0 15px 20px; } .chat-with-us-form .row-flex { display: block; } .chat-with-us-form .row-flex:has(.recaptcha-item) { display: flex; flex-direction: column-reverse; } .chat-with-us-form .input-row-item .checboxes-container label.validation { bottom: calc(-1 * var(--space-1200)); } .checboxes-container label.validation { bottom: -48px; } .popup-form-container .btn-close { position: relative; left: calc(100% - 28px); } .popup-form-container .popup-form-inner { overflow-x: scroll; height: 100vh; border: none; padding-top: 0; } .lets-chat .lets-chat-inner h2 { text-wrap: unset; } .lets-chat .lets-chat-inner h2 br { display: none; } } @media (max-width: 450px) { section.press .press-item { max-width: 297px; } section.press .press-item img, section.press .press-item video { max-width: 413px; margin: 38px auto 15px; transform: translate(0px, 7px); } } @media (max-width: 400px) { .hero .content-wrapper.line { padding: 0 0 144px; } section.audience .content-wrapper { padding: 0 10px; } .audience-container { padding: 25px 0 0; } .audience-line { padding-top: 0; } .audience-line.wrap .audience-item { margin-bottom: 76px; } .audience-item { margin-bottom: 47px; } .audience-text-small { margin-top: -7px; } .site-footer .site-footer-social .site-footer-social-inner { padding: 10px; padding-top: var(--space-400); padding-bottom: var(--space-400); } } @media (max-width: 360px) { .audience-item .audience-img span { font-size: 38px; } } @media only screen and (max-width: 360px) { .site-footer .site-footer-list li { margin-right: 8px; } } @media (max-height: 720px) { .chat-with-us-form .input-row-item { padding-bottom: var(--space-400); } .popup-form-container .popup-form-inner { padding: var(--space-500); } }