@font-face { font-family: Gotham; src: url('../fonts/Gotham-Book.otf') format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Gotham; src: url('../fonts/Gotham-LightItalic.otf') format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: Gotham; src: url('../fonts/Gotham-MediumItalic.otf') format("opentype"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: Gotham; src: url('../fonts/Gotham-Light.otf') format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Gotham; src: url('../fonts/Gotham-Medium.otf') format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: Gotham; src: url('../fonts/Gotham-BookItalic.otf') format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } .w-layout-blockcontainer { max-width: 940px; margin-left: auto; margin-right: auto; display: block; } @media screen and (max-width: 991px) { .w-layout-blockcontainer { max-width: 728px; } } @media screen and (max-width: 767px) { .w-layout-blockcontainer { max-width: none; } } .hero { flex-flow: column; justify-content: flex-start; align-items: center; width: 100%; max-width: 1600px; padding: 200px 80px 80px; display: flex; position: relative; } .text-box { grid-column-gap: 32px; grid-row-gap: 32px; flex-flow: column; flex: 0 auto; justify-content: flex-start; align-items: flex-start; width: 100%; max-width: 1080px; display: flex; } .text-box.centered { text-align: center; justify-content: flex-start; align-items: center; margin-bottom: 32px; } .text-box.with-image { grid-column-gap: 24px; grid-row-gap: 24px; width: 50%; } .heading-large { color: #fff; letter-spacing: -2px; overflow-wrap: normal; width: 100%; max-width: 1080px; margin-top: 0; margin-bottom: 0; font-family: Gotham, Arial, sans-serif; font-size: 64px; font-weight: 500; line-height: 110%; } .heading-large.dk { max-width: 730px; font-size: 72px; } .paragraph-container { grid-column-gap: 16px; grid-row-gap: 16px; color: #fff; letter-spacing: -.5px; flex-flow: column; width: 100%; max-width: 680px; margin-bottom: 0; font-family: Gotham, Arial, sans-serif; font-size: 18px; font-weight: 300; line-height: 140%; display: flex; } .paragraph-container.list-item { display: block; } .video-section { flex-flow: column; justify-content: center; align-items: center; width: 100%; max-width: 1080px; padding: 64px 80px; display: flex; } .video-container { aspect-ratio: 16 / 9; width: 100%; overflow: hidden; box-shadow: 8px 8px 16px #0003; } .body { background-color: #000; background-image: linear-gradient(90deg, #070a22, #3d103a); flex-flow: column; justify-content: flex-start; align-items: center; display: flex; overflow: auto; } .content-section { grid-column-gap: 80px; grid-row-gap: 80px; justify-content: center; align-items: center; width: 100%; max-width: 1080px; padding: 80px; display: flex; } .content-section.with-image { justify-content: flex-end; align-items: center; max-width: 1280px; position: relative; } .content-section.with-image.mobile { display: none; } .heading-medium { color: #fff; letter-spacing: -2px; width: 100%; max-width: 960px; margin-top: 0; margin-bottom: 0; font-family: Gotham, Arial, sans-serif; font-size: 48px; font-weight: 500; line-height: 110%; } .heading-medium.dk { max-width: 740px; } .card-section { grid-column-gap: 32px; grid-row-gap: 32px; aspect-ratio: auto; flex-flow: column; flex: 0 auto; justify-content: center; align-items: center; width: 100%; max-width: 1440px; padding: 160px 32px; display: flex; position: relative; overflow: visible; } .card-section._1-card { justify-content: center; align-items: center; max-width: 1280px; } .subheading-book { z-index: 2; color: #fff; letter-spacing: -1px; text-transform: uppercase; width: 100%; margin-top: 0; margin-bottom: 0; font-family: Gotham, Arial, sans-serif; font-size: 18px; font-weight: 300; line-height: 130%; position: static; } .card-container { grid-column-gap: 32px; grid-row-gap: 32px; justify-content: space-between; align-items: flex-start; width: 100%; margin-left: 0; margin-right: 0; padding: 0; display: flex; overflow: visible; } .card-feature { aspect-ratio: 1; background-color: #0000000d; border-radius: 24px; flex-flow: column; justify-content: space-between; align-items: flex-end; width: 100%; padding: 24px; -webkit-text-decoration: none; text-decoration: none; transition: background-color .3s, box-shadow .3s; display: flex; position: relative; overflow: hidden; box-shadow: 8px 8px 12px #070a2233; } .card-feature:hover { background-color: #0000; box-shadow: 12px 12px 12px #070a2259; } .heading-small { z-index: 2; color: #fff; width: 100%; margin-top: 0; margin-bottom: 0; font-family: Gotham, Arial, sans-serif; font-size: 38px; font-weight: 500; line-height: 120%; -webkit-text-decoration: none; text-decoration: none; position: static; } .heading-small.list-number { width: 48px; font-size: 32px; font-weight: 500; } .image-container { justify-content: center; align-items: center; width: 50%; display: flex; position: absolute; inset: 20% auto 0% -5%; } .image-product { max-width: 140%; } .card-background { z-index: -1; width: 100%; max-width: 120%; height: 100%; position: absolute; inset: 0%; } .button { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; cursor: pointer; background-color: #0006; border-radius: 360px; min-width: 48px; min-height: 48px; padding: 16px 24px; font-family: Gotham, Arial, sans-serif; font-size: 16px; font-weight: 300; line-height: 100%; transition: background-color .2s; } .button:hover { background-color: #e589e080; } .button.fixed { position: absolute; bottom: 24px; right: 0; } .card-top { width: 100%; } .card-cta { grid-column-gap: 64px; grid-row-gap: 64px; background-color: #0000000d; border-radius: 24px; flex-flow: column; justify-content: space-between; align-items: flex-end; max-width: 800px; padding: 48px; text-decoration: none; transition: box-shadow .3s, background-color .3s; display: flex; position: relative; overflow: hidden; box-shadow: 8px 8px 16px #0003; } .card-cta:hover { background-color: #0000; box-shadow: 12px 12px 18px #070a2266; } .image-hero { opacity: .9; justify-content: center; align-items: flex-start; width: 100%; height: 1080px; display: flex; position: absolute; inset: 0% 0% auto; overflow: clip; } .video { border-radius: 24px; overflow: hidden; box-shadow: 8px 8px 16px #00000026; } .section-background { z-index: -2; opacity: .8; mix-blend-mode: normal; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: absolute; } .footer { grid-column-gap: 128px; grid-row-gap: 128px; flex-flow: column; justify-content: flex-start; align-items: stretch; width: 100%; padding: 80px; display: flex; } .footer-top { justify-content: space-between; align-items: flex-start; display: flex; } .link-list { grid-column-gap: 8px; grid-row-gap: 8px; flex-flow: column; justify-content: flex-start; align-items: flex-start; display: flex; } .link { color: #fff; text-transform: uppercase; cursor: pointer; background-color: #0000; justify-content: space-between; align-items: center; width: 400px; min-height: 48px; font-family: Gotham, Arial, sans-serif; font-weight: 300; text-decoration: none; transition: color .2s; display: flex; } .link:hover { color: #e5b3e2; text-decoration: underline; } .link.alt { grid-column-gap: 16px; grid-row-gap: 16px; justify-content: flex-start; align-items: center; } .link-icon { width: 14px; height: 14px; overflow: visible; } .footer-text { color: #c2a3c0; font-family: Gotham, Arial, sans-serif; font-weight: 300; } .logo-top { z-index: 1; max-width: 180px; position: absolute; inset: 40px 80px auto auto; } .overflow-container { flex-flow: column; justify-content: space-between; align-items: center; width: 100%; display: flex; overflow: clip; } .hero-background { opacity: .9; object-fit: cover; min-width: 1280px; max-width: none; height: 100%; } .hero-background.tablet { display: none; } .section-bg { width: 110%; max-width: 200%; height: 110%; display: block; position: static; inset: 0%; } .utility-page-wrap { justify-content: center; align-items: center; width: 100vw; max-width: 100%; height: 100vh; max-height: 100%; display: flex; } .utility-page-content { grid-column-gap: 24px; grid-row-gap: 24px; color: #fff; text-align: center; flex-direction: column; justify-content: space-between; align-items: center; display: flex; } .utility-page-form { flex-direction: column; align-items: stretch; display: flex; } .container { flex-flow: row; justify-content: flex-start; align-items: flex-start; margin-left: 0; margin-right: 0; display: flex; } .list-number { color: #fff; } .bold { font-weight: 500; } .heading-xsmall { color: #fff; margin-top: 0; margin-bottom: 0; font-family: Gotham, Arial, sans-serif; font-size: 28px; font-weight: 500; line-height: 110%; } .heading-container { grid-column-gap: 16px; grid-row-gap: 16px; flex-flow: column; display: flex; } .fixed-logo { width: 160px; position: fixed; bottom: 80px; right: 0; } @media screen and (min-width: 1920px) { .content-section { padding-top: 64px; padding-bottom: 64px; } .fixed-logo { width: 200px; } } @media screen and (max-width: 991px) { .hero { padding-left: 32px; padding-right: 32px; } .text-box { grid-column-gap: 16px; grid-row-gap: 16px; } .text-box.centered { padding-right: 32px; } .heading-large { max-width: 680px; font-size: 44px; } .heading-large.se { max-width: 740px; } .heading-large.dk { max-width: 620px; font-size: 64px; } .paragraph-container { max-width: 640px; } .video-section { max-width: 860px; padding-left: 32px; padding-right: 32px; } .content-section { max-width: 869px; padding: 112px 32px; } .content-section.with-image { display: none; } .content-section.with-image.mobile { grid-column-gap: 64px; grid-row-gap: 64px; flex-flow: column; justify-content: space-between; align-items: flex-end; max-width: 860px; height: 880px; display: flex; position: relative; } .heading-medium { font-size: 40px; } .card-section { padding: 112px 0 112px 32px; } .card-section._1-card { padding-top: 112px; padding-bottom: 160px; padding-right: 32px; } .subheading-book { font-size: 16px; } .card-container { justify-content: flex-start; align-items: flex-start; padding: 24px; overflow: auto; } .card-feature { min-width: 360px; } .image-container.mobile { z-index: -2; width: 60%; position: absolute; inset: auto 0% 0% 64px; } .image-hero { height: 920px; overflow: clip; } .section-background { width: 140%; } .footer { grid-column-gap: 64px; grid-row-gap: 64px; padding: 32px; } .link { width: 320px; } .logo-top { aspect-ratio: auto; right: 32px; } .overflow-container { overflow: clip; } .intel-logo { z-index: 1; position: absolute; inset: auto auto 0% 0%; } .hero-background { object-position: 0% 50%; display: none; } .hero-background.tablet { opacity: .9; width: 100vw; min-width: 0; height: 70vh; display: block; } .heading-xsmall { font-size: 20px; } .fixed-logo { width: 144px; bottom: 24px; } } @media screen and (max-width: 767px) { .hero { padding-top: 180px; } .heading-large { max-width: 620px; font-size: 40px; } .heading-large.dk { max-width: 460px; font-size: 48px; } .video-section { padding-top: 40px; padding-bottom: 40px; } .content-section.with-image.mobile { height: 800px; } .heading-medium { font-size: 32px; } .heading-small { font-size: 28px; } .card-cta { padding-top: 24px; padding-left: 24px; padding-right: 24px; } .image-hero { opacity: .8; height: 720px; overflow: visible; } .footer-top { grid-column-gap: 32px; grid-row-gap: 32px; flex-flow: column; } .link-list, .link { width: 100%; } .hero-background { object-position: -30% 50%; } .hero-background.tablet { object-position: 50% 0%; } } @media screen and (max-width: 479px) { .hero { padding: 168px 16px 40px; } .text-box.centered { justify-content: flex-start; align-items: flex-start; padding-right: 16px; } .heading-large.dk { max-width: 300px; font-size: 32px; } .paragraph-container { font-size: 16px; font-weight: 300; } .video-section { padding-left: 16px; padding-right: 16px; } .body { -webkit-text-fill-color: inherit; background-color: #07071a; background-image: linear-gradient(90deg, #070a22, #3d103a); background-clip: border-box; } .content-section { padding: 64px 16px; } .content-section.with-image.mobile { height: 780px; } .card-section { grid-column-gap: 0px; grid-row-gap: 0px; padding-top: 64px; padding-bottom: 64px; padding-left: 16px; } .card-section._1-card { padding-top: 64px; padding-bottom: 64px; padding-right: 16px; } .card-container { grid-column-gap: 16px; grid-row-gap: 16px; padding-left: 0; } .card-feature { min-width: 300px; padding: 16px; } .image-container.mobile { width: 90%; left: 16px; } .card-cta { padding: 16px; } .image-hero { height: 720px; } .footer { padding-left: 16px; padding-right: 16px; } .footer-top { justify-content: space-between; align-items: center; } .logo-top { right: auto; } .intel-logo { max-width: 40%; } .hero-background { object-position: -20% 50%; } } @font-face { font-family: 'Gotham'; src: url('../fonts/Gotham-Book.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('../fonts/Gotham-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('../fonts/Gotham-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('../fonts/Gotham-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('../fonts/Gotham-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('../fonts/Gotham-BookItalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }