@import url(https://c1-ofp.static.pub/ShareResource/DSM/DSM_3/css/dsm3-css-variables.css?update); @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); @import url('https://c1-ofp.static.pub/ShareResource/AniMate/css/wpc-animations.css'); .dx-logo { display: block; max-width: 100%; } .dx-typo { font-size: calc(var(--fs, var(--body-m)) * 1rem); line-height: calc(var(--lh, var(--body-m-line)) * 1rem); letter-spacing: calc(var(--ls, -30) * 1rem); font-family: var(--ff, var(--typo-primary)); margin-top: calc(var(--mt, 0) * 1rem); margin-bottom: calc(var(--mb, 0) * 1rem); color: var(--color, inherit); } @media (min-width: 768px) { .dx-typo { font-size: calc(var(--md-fs, var(--fs)) * 1rem); line-height: calc(var(--md-lh, var(--lh)) * 1rem); letter-spacing: calc(var(--md-ls, var(--ls)) * 1rem); margin-top: calc(var(--md-mt, var(--mt)) * 1rem); margin-bottom: calc(var(--md-mb, var(--mb)) * 1rem); } } @media (min-width: 1280px) { .dx-typo { font-size: calc(var(--lg-fs, var(--md-fs, var(--fs))) * 1rem); line-height: calc(var(--lg-lh, var(--md-lh, var(--lh))) * 1rem); letter-spacing: calc(var(--lg-ls, var(--md-ls, var(--ls))) * 1rem); margin-top: calc(var(--lg-mt, var(--md-mt, var(--mt))) * 1rem); margin-bottom: calc(var(--lg-mb, var(--md-mb, var(--mb))) * 1rem); } } @media (min-width: 1920px) { .dx-typo { font-size: calc(var(--xl-fs, var(--lg-fs, var(--fs))) * 1rem); line-height: calc(var(--xl-lh, var(--lg-lh, var(--lh))) * 1rem); letter-spacing: calc(var(--xl-ls, var(--lg-ls, var(--ls))) * 1rem); margin-top: calc(var(--xl-mt, var(--lg-mt, var(--mt))) * 1rem); margin-bottom: calc(var(--xl-mb, var(--lg-mb, var(--mb))) * 1rem); } } .dx-typo-bold { font-weight: var(--bold); } .dx-typo-secondary { font-family: var(--typo-secondary); } .dx-grid { display: flex; flex-shrink: 0  !important; flex-grow: 0  !important; position: relative; } .dx-grid-row.dx-grid-row-nogap .dx-grid { width: clamp(0%, 25% * var(--columns-sm), 100%); } @media screen and (min-width: 768px) { .dx-grid-row.dx-grid-row-nogap .dx-grid { width: clamp(0%, 12.5% * var(--columns-md), 100%); } } @media screen and (min-width: 1280px) { .dx-grid-row.dx-grid-row-nogap .dx-grid { width: clamp(0%, 8.3333333333% * var(--columns-lg), 100%); } } @media screen and (min-width: 1920px) { .dx-grid-row.dx-grid-row-nogap .dx-grid { width: clamp(0%, 8.3333333333% * var(--columns-xl), 100%); } } .dx-grid-row.dx-grid-row-gap .dx-grid { width: clamp(0%, 25% * var(--columns-sm) - var(--spacing-3) * 1rem / 4 * (4 - var(--columns-sm)), 100%); } @media screen and (min-width: 768px) { .dx-grid-row.dx-grid-row-gap .dx-grid { width: clamp(0%, 12.5% * var(--columns-md) - var(--spacing-3) * 1rem / 8 * (8 - var(--columns-md)), 100%); } } @media screen and (min-width: 1280px) { .dx-grid-row.dx-grid-row-gap .dx-grid { width: clamp(0%, 8.3333333333% * var(--columns-lg) - var(--spacing-3) * 1rem / 12 * (12 - var(--columns-lg)), 100%); } } @media screen and (min-width: 1920px) { .dx-grid-row.dx-grid-row-gap .dx-grid { width: clamp(0%, 8.3333333333% * var(--columns-xl) - var(--spacing-3) * 1rem / 12 * (12 - var(--columns-xl)), 100%); } } .dx-grid-container { display: flex; flex-direction: row; flex-wrap: wrap; } .dx-grid-container.dx-grid-container-gap { gap: calc(var(--spacing-3) * 1rem); } .dx-grid-container.dx-grid-container-nogap { gap: 0px; } .dx-grid-container.dx-grid-container-fullwidth { width: 100%; margin-left: auto; margin-right: auto; } .dx-grid-container.dx-grid-container-fulldesktop { max-width: var(--breakpoint-full-desktop); margin-left: auto; margin-right: auto; } .dx-grid-row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; position: relative; } .dx-grid-row li { margin-left: 0  !important; } .dx-grid-row.dx-grid-row-nogap { gap: 0px; } .dx-grid-row.dx-grid-row-gap { gap: calc(var(--spacing-3) * 1rem); } .dx-grid-row.dx-grid-row-margins { padding-left: calc(var(--mobile-grid-margins) * 1rem); padding-right: calc(var(--mobile-grid-margins) * 1rem); } @media screen and (min-width: 768px) { .dx-grid-row.dx-grid-row-margins { padding-left: calc(var(--tablet-grid-margins) * 1rem); padding-right: calc(var(--tablet-grid-margins) * 1rem); } } @media screen and (min-width: 1280px) { .dx-grid-row.dx-grid-row-margins { padding-left: clamp(var(--small-desktop-grid-margins) * 1rem, (100% - 1520px) / 2 + var(--small-desktop-grid-margins) * 1rem, var(--full-desktop-grid-margins) * 1rem); padding-right: clamp(var(--small-desktop-grid-margins) * 1rem, (100% - 1520px) / 2 + var(--small-desktop-grid-margins) * 1rem, var(--full-desktop-grid-margins) * 1rem); } } @media screen and (min-width: 1920px) { .dx-grid-row.dx-grid-row-margins { padding-left: calc((100% - 1920px) / 2 + var(--full-desktop-grid-margins) * 1rem); padding-right: calc((100% - 1920px) / 2 + var(--full-desktop-grid-margins) * 1rem); } } .dx-cta-container { display: flex; flex-wrap: wrap; gap: calc(1rem * var(--spacing-1)); margin: 0px; padding: 0px; width: 100%; margin-top: calc(var(--spacing-5) * 1rem); flex-direction: row; gap: calc(1rem * var(--spacing-3)); } .dx-cta-container.dx-cta-container-nomargintop { margin-top: 0; } .dx-cta-container.dx-cta-container-column-sm { flex-direction: column; } .dx-cta-container.dx-cta-container-row-sm { flex-direction: row; } .dx-cta-container:has(.dx-cta-invisible) { margin: 0; } @media screen and (min-width: 768px) { .dx-cta-container.dx-cta-container-row-md { flex-direction: row; } .dx-cta-container.dx-cta-container-column-md { flex-direction: column; } } @media screen and (min-width: 1280px) { .dx-cta-container.dx-cta-container-row-lg { flex-direction: row; } .dx-cta-container.dx-cta-container-column-lg { flex-direction: column; } } @media screen and (min-width: 1920px) { .dx-cta-container.dx-cta-container-row-xl { flex-direction: row; } .dx-cta-container.dx-cta-container-column-xl { flex-direction: column; } } .dx-cta { --border-width:2px; display: flex; align-items: center; justify-content: center; flex-grow: 0; box-sizing: border-box; flex-shrink: 0; gap: calc(1rem * var(--spacing-1)); border-radius: var(--btn-br); font-family: var(--typo-secondary); cursor: pointer; text-align: center; text-decoration: none; transition: all ease-out var(--main-transition-duration), color ease-out var(--main-transition-duration); white-space: nowrap; width: fit-content; z-index: 2; min-height: calc(var(--cta-height, 48px) - var(--border-width) * 2); } .dx-cta:has(> img:only-child), .dx-cta:has(> picture:only-child), .dx-cta:has(> svg:only-child) { min-height: calc(var(--cta-height, 48px)); padding: 0; width: calc(var(--cta-height, 48px)); } .dx-cta .dx-cta-text-content { font-size: var(--cta-font-size, calc(var(--body-m) * 1rem)); line-height: var(--cta-font-lh, calc(var(--body-m-line) * 1rem)); letter-spacing: var(--cta-font-ls, calc(var(--body-m-spacing) * 1rem)); color: var(--cta-text-color, #171717); border-bottom: var(--cta-border-bottom, none); } .dx-cta .dx-cta-text-content::before { display: none; } .dx-cta img { height: calc(var(--cta-height, 48px) / 2); width: calc(var(--cta-height, 48px) / 2); } .dx-cta { background-color: var(--cta-background-color); border: var(--cta-border, 2px solid transparent); padding: var(--cta-padding, 10px calc(var(--spacing-5) * 1rem)); } .dx-cta:not(.dx-cta-disabled):hover, .dx-cta:not(.dx-cta-disabled):focus { background-color: var(--cta-hover-background-color); border: var(--cta-hover-border, 2px solid transparent); } .dx-cta:not(.dx-cta-disabled):hover .dx-cta-text-content, .dx-cta:not(.dx-cta-disabled):focus .dx-cta-text-content { color: var(--cta-hover-text-color, #171717); border-bottom: var(--cta-hover-border-bottom, none); } .dx-cta-disabled { opacity: 40%; cursor: not-allowed; } .dx-cta-clickable-parent::before { content: ""; position: absolute; inset: 0; z-index: 1; } .dx-cta-invisible { opacity: 0  !important; height: 0  !important; width: 0  !important; padding: 0  !important; min-height: 0  !important; margin: 0  !important; border: 0  !important; } .dx-cta-primary { --cta-background-color: var(--neutral-dark-01); --cta-text-color: var(--pure-light); --cta-hover-background-color: var(--neutral-dark-04); --cta-hover-text-color: var(--pure-light); } .dx-cta-secondary { --cta-background-color: transparent; --cta-text-color: var(--neutral-dark-01); --cta-border: 2px solid #aba8b1; --cta-hover-background-color: var(--neutral-light-01); --cta-hover-text-color: var(--neutral-dark-01); --cta-hover-border: 2px solid #aba8b1; } .dx-cta-alternative { --cta-background-color: var(--neutral-light-01); --cta-text-color: var(--neutral-dark-01); --cta-hover-background-color: #ccc; --cta-hover-text-color: var(--neutral-dark-01); } .dx-cta-tertiary { --cta-background-color: transparent; --cta-text-color: var(--neutral-dark-01); --cta-border-bottom: 1px solid var(--neutral-med-03); --cta-hover-background-color: transparent; --cta-hover-text-color: var(--neutral-dark-01); --cta-hover-border-bottom: 1px solid var(--elementary-signature); } .dx-cta-danger { --cta-background-color: var(--pure-light); --cta-text-color: var(--elementary-med); --cta-border: 2px solid var(--elementary-med); --cta-hover-background-color: var(--neutral-light-01); --cta-hover-text-color: var(--elementary-med); --cta-hover-border: 2px solid var(--elementary-med); } .dx-cta-primary-dark { --cta-background-color: var(--pure-light); --cta-text-color: var(--neutral-dark-01); --cta-hover-background-color: var(--neutral-light-01); --cta-hover-text-color: var(--neutral-dark-01); } .dx-cta-secondary-dark { --cta-background-color: transparent; --cta-text-color: var(--pure-light); --cta-border: 2px solid var(--neutral-med-02); --cta-hover-background-color: var(--neutral-dark-04); --cta-hover-text-color: var(--pure-light); --cta-hover-border: 2px solid var(--neutral-med-02); } .dx-cta-alternative-dark { --cta-background-color: var(--neutral-dark-04); --cta-text-color: var(--pure-light); --cta-hover-background-color: var(--neutral-dark-05); --cta-hover-text-color: var(--pure-light); } .dx-cta-tertiary-dark { --cta-background-color: transparent; --cta-text-color: var(--pure-light); --cta-border-bottom: 1px solid var(--neutral-med-02); --cta-hover-background-color: transparent; --cta-hover-text-color: var(--pure-light); --cta-hover-border-bottom: 1px solid var(--elementary-signature); } .dx-cta-danger-dark { --cta-background-color: var(--neutral-dark-01); --cta-text-color: #ffb9a2; --cta-border: 2px solid #ffb9a2; --cta-hover-background-color: var(--neutral-dark-04); --cta-hover-text-color: #ffb9a2; --cta-hover-border: 2px solid #ffb9a2; } .dx-cta-small { --cta-padding: 6px calc(var(--spacing-3) * 1rem); --cta-height: 32px; --cta-font-size: calc(var(--label-s) * 1rem); --cta-font-lh: calc(var(--label-s-line) * 1rem); --cta-font-ls: calc(var(--label-s-spacing) * 1rem); } .dx-cta-medium { --cta-padding: 8px calc(var(--spacing-3) * 1rem); --cta-height: 40px; --cta-font-size: calc(var(--body-s) * 1rem); --cta-font-lh: calc(var(--body-s-line) * 1rem); --cta-font-ls: calc(var(--body-s-spacing) * 1rem); } .dx-cta-large { --cta-padding: 10px calc(var(--spacing-5) * 1rem); --cta-height: 48px; --cta-font-size: calc(var(--body-m) * 1rem); --cta-font-lh: calc(var(--body-m-line) * 1rem); --cta-font-ls: calc(var(--body-m-spacing) * 1rem); } .dx-skinnybanner-container { background-color: var(--bg-color); min-height: 60px; padding-top: 7px; padding-bottom: 7px; } .dx-skinnybanner { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 calc(var(--mobile-grid-margins) * 1rem); gap: 12px; text-align: center; flex-basis: 0; flex-grow: 1; flex-shrink: 1; } @media screen and (min-width: 768px) { .dx-skinnybanner { text-align: start; flex-direction: row; flex-direction: row; padding: 0 calc(var(--tablet-grid-margins) * 1rem); gap: 24px; } } @media screen and (min-width: 1280px) { .dx-skinnybanner { padding: 0 clamp(var(--small-desktop-grid-margins) * 1rem, (100% - 1520px) / 2 + var(--small-desktop-grid-margins) * 1rem, var(--full-desktop-grid-margins) * 1rem); } } @media screen and (min-width: 1920px) { .dx-skinnybanner { padding: 0 calc((100% - 1920px) / 2 + var(--full-desktop-grid-margins) * 1rem); } } .dx-background-color { position: absolute; background-color: var(--dx-bg-color); height: var(--dx-bg-color-height, 100%); width: var(--dx-bg-color-width, 100%); z-index: -1; border: none; pointer-events: none; overflow: hidden; border-radius: inherit; } @media (min-width: 768px) { .dx-background-color { background-color: var(--dx-md-bg-color, var(--dx-bg-color)); height: var(--dx-md-bg-color-height, var(--dx-bg-color-height, 100%)); width: var(--dx-md-bg-color-width, var(--dx-bg-color-width, 100%)); } } @media (min-width: 1280px) { .dx-background-color { background-color: var(--dx-lg-bg-color, var(--dx-md-bg-color, var(--dx-bg-color))); height: var(--dx-lg-bg-color-height, var(--dx-md-bg-color-height, var(--dx-bg-color-height, 100%))); width: var(--dx-lg-bg-color-width, var(--dx-md-bg-color-width, var(--dx-bg-color-width, 100%))); } } @media (min-width: 1920px) { .dx-background-color { background-color: var(--dx-xl-bg-color, var(--dx-lg-bg-color, var(--dx-bg-color))); height: var(--dx-xl-bg-color-height, var(--dx-lg-bg-color-height, var(--dx-bg-color-height, 100%))); width: var(--dx-xl-bg-color-width, var(--dx-lg-bg-color-width, var(--dx-bg-color-width, 100%))); } } .dx-background-image-container { position: absolute; z-index: -1; border: none; pointer-events: none; overflow: hidden; border-radius: inherit; height: var(--dx-bg-image-height, 100%); width: var(--dx-bg-image-width, 100%); } .dx-background-image-container .dx-background-image { position: absolute; border: none; pointer-events: none; border-radius: inherit; } @media (min-width: 768px) { .dx-background-image-container { height: var(--dx-md-bg-image-height, var(--dx-bg-image-height, 100%)); width: var(--dx-md-bg-image-width, var(--dx-bg-image-width, 100%)); } } @media (min-width: 1280px) { .dx-background-image-container { height: var(--dx-lg-bg-image-height, var(--dx-md-bg-image-height, var(--dx-bg-image-height, 100%))); width: var(--dx-lg-bg-image-width, var(--dx-md-bg-image-width, var(--dx-bg-image-width, 100%))); } } @media (min-width: 1920px) { .dx-background-image-container { height: var(--dx-xl-bg-image-height, var(--dx-lg-bg-image-height, var(--dx-bg-image-height, 100%))); width: var(--dx-xl-bg-image-width, var(--dx-lg-bg-image-width, var(--dx-bg-image-width, 100%))); } } .dx-background-video-container { position: absolute; z-index: -1; border: none; pointer-events: none; overflow: hidden; border-radius: inherit; height: var(--dx-bg-video-height, 100%); width: var(--dx-bg-video-width, 100%); } .dx-background-video-container .dx-background-video { position: absolute; border: none; pointer-events: none; border-radius: inherit; overflow: hidden; height: 100%; width: 100%; min-width: 100%; min-height: 56.25vw; transform: translate(0%, -50%); scale: var(--dx-bg-video-scale, 1); } @media (min-width: 768px) { .dx-background-video-container { height: var(--dx-md-bg-video-height, var(--dx-bg-video-height)); width: var(--dx-md-bg-video-width, var(--dx-bg-video-width)); } .dx-background-video { scale: var(--dx-md-bg-video-scale, var(--dx-bg-video-scale)); } } @media (min-width: 1280px) { .dx-background-video-container { height: var(--dx-lg-bg-video-height, var(--dx-md-bg-video-height, var(--dx-bg-video-height))); width: var(--dx-lg-bg-video-width, var(--dx-md-bg-video-width, var(--dx-bg-video-width))); } .dx-background-video { scale: var(--dx-lg-bg-video-scale, var(--dx-md-bg-video-scale, var(--dx-bg-video-scale))); } } @media (min-width: 1920px) { .dx-background-video-container { height: var(--dx-xl-bg-video-height, var(--dx-lg-bg-video-height, var(--dx-bg-video-height))); width: var(--dx-xl-bg-video-width, var(--dx-lg-bg-video-width, var(--dx-bg-video-width))); } .dx-background-video { scale: var(--dx-xl-bg-video-scale, var(--dx-lg-bg-video-scale, var(--dx-bg-video-scale))); } }