:root {
--color-black: #000;
--color-blue-base: 215,63%,19%;
--color-blue: hsl(var(--color-blue-base));
--color-dark: #161616;
--color-green: #193931;
--color-dark-green: #31332c;
--color-darker-grey: #9a9a9a;
--color-dark-grey: #dbdbdb;
--color-grey-base: 0,0%,96%;
--color-grey: hsl(var(--color-grey-base));
--color-grey-text: #818181;
--color-light: #eee;
--color-pink-base: 322,44%,81%;
--color-pink: hsl(var(--color-pink-base));
--color-pink-dark: #bf5d9a;
--color-bordeaux-base: 324,65%,20%;
--color-bordeaux: hsl(var(--color-bordeaux-base));
--color-red: #e74646;
--color-white-base: 360,100%,100%;
--color-white: hsl(var(--color-white-base));
--color-yellow: #f8f47c;
--color-button-border: var(--color-pink);
--color-list-bullet: var(--color-pink);
--grid-columns: 8;
--grid-gutter: .5rem;
--grid-row-gutter: 2rem;
--grid-row-gutter-lg: 3rem;
--grid-margin: 1.5rem;
--grid-max-width: 90rem;
--border-radius-circle: 50%;
--border-radius-pill: 9999px;
--border-radius-sm: .125rem;
--font-regular: 400;
--font-medium: 500;
--font-semi-bold: 600;
--header-height: 7rem;
--logo-width: 9.375rem;
--tools-width: 5rem;
--ease-out-cubic: cubic-bezier(.33,1,.68,1);
--ease-out-expo: cubic-bezier(.16,1,.3,1)
}
@media (min-width: 40rem) {
:root {
--grid-columns:12;
--grid-gutter: 2rem;
--grid-margin: 3.75rem
}
}
@font-face {
font-family: Archia;
src: url(//tiratrade.com/wp-content/themes/tira/assets/fonts/Archia-Regular.woff2)format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap
}
@font-face {
font-family: Archia;
src: url(//tiratrade.com/wp-content/themes/tira/assets/fonts/Archia-Medium.woff2)format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap
}
@font-face {
font-family: Archia;
src: url(//tiratrade.com/wp-content/themes/tira/assets/fonts/Archia-SemiBold.woff2)format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap
}
*,:before,:after {
box-sizing: inherit
}
html {
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
box-sizing: border-box;
scroll-padding-top: var(--header-height)
}
html.annual {
scroll-padding-top: 0
}
html:not(:has([data-module=carousel])) {
scroll-behavior: smooth
}
html:not(:has([data-module=featured])) {
scroll-behavior: smooth
}
html,body {
block-size: 100%
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--color-white);
color: var(--color-black);
min-height: -webkit-fill-available;
font-family: Archia,Helvetica,Arial,sans-serif;
line-height: 1.5;
overflow-x: hidden
}
a {
color: inherit;
text-decoration-skip-ink: auto;
text-decoration: none
}
ul,ol {
margin: 0;
padding: 0;
list-style-type: none
}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd {
margin: 0
}
h1,h2,h3,h4 {
font-weight: var(--font-regular)
}
canvas,img,picture,video {
max-width: 100%;
height: auto;
display: block
}
[tabindex],a,button,input,label,select,textarea {
-ms-touch-action: manipulation;
touch-action: manipulation
}
svg {
color: currentColor;
flex-grow: 0;
flex-shrink: 0
}
input,button,textarea,select {
font: inherit
}
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: inherit;
cursor: pointer;
background-color: #0000;
border: none;
border-radius: 0;
padding: 0
}
input[type=search]::-webkit-search-decoration {
-webkit-appearance: none
}
input[type=search]::-webkit-search-cancel-button {
-webkit-appearance: none
}
input[type=search]::-webkit-search-results-button {
-webkit-appearance: none
}
input[type=search]::-webkit-search-results-decoration {
-webkit-appearance: none
}
input[type=search]::-ms-clear {
width: 0;
height: 0;
display: none
}
input[type=search]::-ms-reveal {
width: 0;
height: 0;
display: none
}
summary {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
outline: none;
list-style-type: none
}
summary::marker {
display: none
}
summary::-webkit-details-marker {
display: none
}
@media (prefers-reduced-motion:reduce) {
html:focus-within {
scroll-behavior: auto
}
*,:before,:after {
scroll-behavior: auto!important;
transition-duration: .01ms!important;
animation-duration: .01ms!important;
animation-iteration-count: 1!important
}
}
.sr-only {
clip: rect(0 0 0 0);
clip-path: inset(100%);
white-space: nowrap;
width: 1px;
height: 1px;
position: absolute;
overflow: hidden
}
.u-hidden {
display: none!important
}
.u-overflow-hidden {
overflow: hidden
}
.u-align-left {
text-align: left
}
.page {
min-height: 100%
}
.main {
background-color: var(--color-white);
z-index: 1;
min-height: 100%;
transition: background-color .3s;
position: relative
}
.section {
padding-block-start:4rem;padding-block-end:4rem;position: relative;
-webkit-transform: translate(0)
}
@media (min-width: 40rem) {
.section {
padding-block-start:6rem;
padding-block-end:6rem}
}
@media (min-width: 70rem) {
.section {
padding-block-start:8rem;
padding-block-end:8rem}
}
.section.bg-blue:not(.breaker):not(.breakerV2):not(.video-breaker)+.section.bg-blue {
padding-block-start:0}
.section.bg-bordeaux:not(.breaker):not(.breakerV2)+.section.bg-bordeaux {
padding-block-start:0}
.section.bg-green:not(.breaker):not(.breakerV2)+.section.bg-green {
padding-block-start:0}
.section.bg-grey:not(.breaker):not(.breakerV2)+.section.bg-grey {
padding-block-start:0}
.section.bg-pink:not(.breaker):not(.breakerV2)+.section.bg-pink {
padding-block-start:0}
.section.bg-white:not(.breaker):not(.breakerV2)+.section.bg-white {
padding-block-start:0}
.section.bg-transparent+.section.bg-transparent {
padding-block-start:0}
.section.hero-text-with-overlap+.section.bg-white {
padding-block-start:0}
.section.bg-yellow:not(.breaker):not(.breakerV2)+.section.bg-yellow {
padding-block-start:0}
.sidebar .bg-white+.bg-white {
padding-block-start:0}
.main>.section:first-child {
padding-block-start:calc(4rem + var(--header-height))}
@media (min-width: 40rem) {
.main>.section:first-child {
padding-block-start:calc(6rem + var(--header-height))
}
}
@media (min-width: 70rem) {
.main>.section:first-child {
padding-block-start:calc(8rem + var(--header-height))
}
}
.grid {
grid-template-columns: repeat(var(--grid-columns),1fr);
column-gap: var(--grid-gutter);
row-gap: var(--grid-row-gutter);
max-width: var(--grid-max-width);
padding-inline:var(--grid-margin);height: 100%;
margin-inline-start:auto;margin-inline-end:auto;display: grid;
position: relative
}
.sidebar .grid {
grid-template-columns: repeat(6,1fr)
}
@media (min-width: 40rem) {
.sidebar .grid {
grid-template-columns:repeat(10,1fr);
padding-inline-start:0;padding-inline-end:0}
}
.sidebar-label,.sidebar-headline,.sidebar-summary,.sidebar-content {
grid-column: 2/-2
}
.grid-inner {
column-gap: var(--grid-gutter);
row-gap: var(--grid-row-gutter);
height: 100%;
display: grid;
position: relative
}
.bg-blue {
background-color: var(--color-blue);
color: var(--color-white)
}
.bg-green {
background-color: var(--color-green);
color: var(--color-white)
}
.bg-grey {
background-color: var(--color-grey);
color: var(--color-black)
}
.bg-grey-dark {
background-color: var(--color-dark-grey);
color: var(--color-black)
}
.bg-pink {
--color-button-border: var(--color-blue);
--color-list-bullet: var(--color-blue);
background-color: var(--color-pink);
color: var(--color-black)
}
.bg-bordeaux {
--color-list-bullet: var(--color-yellow);
background-color: var(--color-bordeaux);
color: var(--color-white)
}
.bg-yellow {
background-color: var(--color-yellow);
color: var(--color-black)
}
.bg-white {
background-color: var(--color-white);
color: var(--color-black)
}
.color-grey-text {
color: var(--color-grey-text)
}
.vstack-xs>*+* {
margin-block-start:.5rem}
.vstack-sm>*+* {
margin-block-start:1rem}
.vstack>*+* {
margin-block-start:1rem}
@media (min-width: 40rem) {
.vstack>*+* {
margin-block-start:1.5rem
}
}
.vstack-md>*+* {
margin-block-start:1.5rem}
.vstack-lg>*+* {
margin-block-start:1.5rem}
@media (min-width: 40rem) {
.vstack-lg>*+* {
margin-block-start:3rem
}
}
.vstack-xl>*+* {
margin-block-start:2.5rem}
@media (min-width: 40rem) {
.vstack-xl>*+* {
margin-block-start:5rem
}
}
.hstack-xs {
gap: .75rem;
display: flex
}
.hstack-sm {
gap: 1rem;
display: flex
}
.hstack {
gap: 1.5rem;
display: flex
}
.hstack-wrap {
flex-wrap: wrap
}
.hstack-lg {
gap: 1.5rem;
display: flex
}
@media (min-width: 40rem) {
.hstack-lg {
gap:3rem
}
}
.hvstack {
justify-content: space-between;
display: flex
}
@media not (min-width: 40rem) {
.hvstack {
gap:.5rem
}
.hvstack>:last-child {
text-align: right
}
}
@media (min-width: 40rem) {
.hvstack {
flex-direction:column
}
}
.tabular-nums {
font-variant-numeric: tabular-nums
}
.u-rounded {
flex-shrink: 0;
width: 100%;
overflow: hidden
}
.u-rounded img {
border-radius: var(--border-radius-circle);
aspect-ratio: 1
}
.object-cover {
object-fit: cover
}
.link-arrow {
transition: transform .2s var(--ease-out-cubic);
align-items: center;
gap: 1rem;
display: inline-flex;
position: relative
}
.link-arrow:hover .link-arrow-icon {
transform: translate(.5rem)
}
.link-arrow:focus-visible .link-arrow-icon {
transform: translate(.5rem)
}
.link-arrow-icon {
transition: transform .3s var(--ease-out-cubic)
}
.link-line {
white-space: nowrap;
text-decoration: none;
position: relative
}
.link-line:before {
content: "";
pointer-events: none;
transform-origin: 100%;
width: 100%;
height: 1px;
transition: transform .4s var(--ease-out-cubic);
background: currentColor;
position: absolute;
top: calc(100% + .25rem);
left: 0;
transform: scaleX(0)
}
.link-line.is-active:before {
transform-origin: 0%;
transform: scale(1)
}
.link-line:hover:before {
transform-origin: 0%;
transform: scale(1)
}
.link-line:focus-visible:before {
transform-origin: 0%;
transform: scale(1)
}
@media (min-width: 55rem) {
.devider-start {
border-top:1px solid var(--color-darker-grey);
margin-block-start:1.5rem;padding-block-start:1.5rem}
}
@media (min-height: 40rem) {
.devider-start {
margin-block-start:2rem;
padding-block-start:2rem}
}
.svg-icon {
max-width: 6rem;
max-height: 6rem
}
.podcast-list {
margin-block-start:2rem}
.podcast-list a {
transition: transform .3s var(--ease-out-cubic)
}
.podcast-list a:hover {
transform: scale(1.15)
}
.podcast-list a:focus-visible {
transform: scale(1.15)
}
.promo .image-container,.related .teaser-media-wrapper,.teaser-grid:not(.teaser-grid-employees) .teaser-media-wrapper {
--width: 0%;
--left: 0;
--right: unset;
position: relative;
overflow: hidden
}
:is(.promo .image-container,.related .teaser-media-wrapper,.teaser-grid:not(.teaser-grid-employees) .teaser-media-wrapper):after {
content: "";
width: var(--width);
height: 100%;
top: 0;
left: var(--left);
right: var(--right);
background-color: var(--theme);
position: absolute
}
:is(.promo .image-container,.related .teaser-media-wrapper,.teaser-grid:not(.teaser-grid-employees) .teaser-media-wrapper) img { width: 100%
}
[data-headline-effect],[data-text-effect] {
opacity: .1
}
.read-more-target {
transition: max-height .3s var(--ease-out-cubic);
position: relative;
overflow: hidden
}
.read-more-trigger {
align-items: center;
gap: .5rem;
margin-inline-start:2em;display: inline-flex;
position: relative
}
.read-more:not(.is-truncated) .read-more-trigger {
display: none
}
.read-more-trigger svg {
z-index: 2;
position: relative
}
.read-more-trigger span {
cursor: pointer;
z-index: 1;
text-decoration: underline;
position: relative
}
.vacancy-title-secondary {
--spacing-end: 1rem;
transition: margin .3s var(--ease-out-cubic),max-height .3s var(--ease-out-cubic);
overflow: hidden
}
@media (min-width: 40rem) {
.vacancy-title-secondary {
--spacing-end:1.5rem
}
}
@media not (min-width: 55rem) {
.vacancy-title-secondary {
display:none
}
}
@media (min-width: 55rem) {
.vacancy-title-secondary {
max-height:0
}
}
.vacancy-thumbs {
column-gap: var(--grid-gutter);
grid-template-columns: repeat(6,1fr);
margin-block-start:2rem;margin-block-end:6rem;display: grid
}
.vacancy-thumbs img {
border-radius: var(--border-radius-circle)
}
.vacancy-thumbs img:first-child {
grid-area: 1/1/1/3
}
.vacancy-thumbs img:nth-child(2) {
z-index: 1;
grid-area: 1/3/1/5
}
.vacancy-thumbs img:nth-child(3) {
grid-area: 1/4/1/7
}
.bottom-sheet-trigger {
padding-block-start:1rem;padding-block-end:1rem;padding-inline:var(--grid-margin);z-index: 2;
justify-content: space-between;
align-items: center;
gap: 1rem;
width: 100%;
transition: color .2s,background-color .2s;
display: flex;
position: fixed;
bottom: 0;
left: 0;
transform: translateY(100%)
}
.bottom-sheet-trigger svg {
transform: rotate(180deg)
}
@media (min-width: 55rem) {
.bottom-sheet-trigger {
display:none
}
}
.bottom-sheet-trigger:hover {
background-color: var(--color-pink-dark);
color: var(--color-white)
}
.bottom-sheet-trigger:focus-visible {
background-color: var(--color-pink-dark);
color: var(--color-white)
}
@media not (min-width: 40rem) {
.hide-below-sm {
display:none
}
}
@media (min-width: 40rem) {
.hide-above-sm {
display:none
}
}
.spacing-block-end {
margin-block-end:1rem}
@media (min-width: 40rem) {
.spacing-block-end {
margin-block-end:1.5rem
}
}
.embed-container {
max-width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative;
overflow: hidden
}
.embed-container iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
.header {
z-index: 2;
width: 100%;
transition: color .2s var(--ease-out-cubic),padding .2s var(--ease-out-cubic),background .2s .2s var(--ease-out-cubic),opacity .2s linear;
padding-block-start:1.875rem;padding-block-end:1.875rem;position: fixed;
top: 0;
left: 0;
transform: translateY(-100%)
}
.header.light-bg {
color: var(--color-black)
}
.header.light-bg .logo svg {
fill: var(--color-black)
}
.header.light-bg .tools-search svg {
stroke: var(--color-black)
}
.header.dark-bg {
color: var(--color-white)
}
.header.dark-bg .logo svg {
fill: var(--color-white)
}
.header.dark-bg .tools-search svg {
stroke: var(--color-white)
}
@media (min-width: 64rem) {
.header.nav-active {
color:var(--color-white)
}
}
.header.scrolled-down:not(.nav-active) {
padding-block-start:.75rem;padding-block-end:.75rem}
html:not(.annual) .header.scrolled-down:not(.nav-active) {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px)
}
html:not(.annual) .header.scrolled-down:not(.nav-active).light-bg {
background-color: #fffc;
box-shadow: inset 0 -1px #0000001a
}
html:not(.annual) .header.scrolled-down:not(.nav-active).dark-bg {
background-color: #0003;
box-shadow: inset 0 -1px #ffffff1a
}
html.overlay-open .header {
opacity: 0
}
.header-inner {
max-width: var(--grid-max-width);
padding-inline:var(--grid-margin);justify-content: space-between;
align-items: center;
margin-inline-start:auto;margin-inline-end:auto;display: flex;
position: relative
}
.logo {
z-index: 1;
display: flex;
position: relative
}
.header-open {
color: var(--fill);
width: 42px;
height: 100%;
transition: color .2s var(--ease);
justify-content: center;
align-items: center;
display: flex;
position: relative
}
@media (min-width: 64rem) {
.header-open {
display:none
}
}
.tools {
z-index: 3;
align-items: center;
gap: 2rem;
display: flex;
position: relative
}
@media not (min-width: 64rem) {
.tools {
display:none
}
}
.tools-navigation {
display: none
}
.tools-locales,.tools-search {
align-items: flex-start;
display: flex
}
.tools-search {
position: relative
}
.tools-locales {
position: relative
}
.tools-locales summary {
display: flex
}
.locale-list-wrapper {
padding-block-start:2.5rem;position: absolute;
top: 0;
left: 50%;
transform: translate(-50%)
}
.locale-list {
background-color: var(--color-blue);
color: var(--color-white);
border: 1px solid #ffffff1a;
flex-direction: column;
gap: 1rem;
padding-block-start:1.5rem;padding-block-end:1.5rem;padding-inline-start:2.5rem;padding-inline-end:2.5rem;display: flex;
position: relative
}
.locale-list-arrow {
background-color: var(--color-blue);
border: 0 solid #ffffff1a;
border-width: 1px 0 0 1px;
width: .5rem;
height: .5rem;
position: absolute;
top: 2.5rem;
left: 50%;
transform: rotate(45deg)translate(-50%)
}
.nav {
--nav-bg-gap: 1rem;
--nav-main-header-height: 6rem;
--nav-item-padding: 2rem;
transition: opacity .2s linear;
position: absolute;
top: 0;
left: 0;
right: 0
}
.nav[aria-hidden=true] {
pointer-events: none
}
.nav:not(.is-ready) .nav-sub-wrapper {
display: none
}
@media not (min-width: 64rem) {
.nav {
color:var(--color-white);
z-index: 1;
height: 100vh;
display: flex;
top: -1.875rem;
transform: translate(100%)
}
}
@media (min-width: 64rem) {
.nav {
color:#0000;
padding-inline:var(--grid-margin);transition: box-shadow .2s var(--ease-out-cubic)0s,background-color .2s var(--ease-out-cubic)0s,color .2s var(--ease-out-cubic);
display: flex
}
.nav.light-bg {
color: var(--color-black)
}
.nav.dark-bg {
color: var(--color-white)
}
.nav-active .nav {
color: var(--color-white)
}
}
html.overlay-open .nav {
opacity: 0;
pointer-events: none
}
.nav-bg {
background-color: var(--color-blue);
opacity: .5;
pointer-events: none;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
.nav-active .nav-bg {
pointer-events: all
}
@media not (min-width: 64rem) {
.nav-bg {
opacity:0;
height: 100vh
}
}
@media (min-width: 64rem) {
.nav-bg {
opacity:1;
height: 30rem;
transform: translateY(-100%);
box-shadow: inset 0 -1px #ffffff1a
}
}
@media not (min-width: 64rem) {
:is(.nav-main-header,.nav-sub-header) {
background-color:var(--color-blue);
height: var(--nav-main-header-height);
z-index: 1;
padding-inline:var(--grid-margin);width: calc(100vw - var(--nav-bg-gap));
align-items: center;
display: flex;
position: fixed;
top: 0
}
:is(.nav-main-header,.nav-sub-header):before {
background-color: hsla(var(--color-white-base),.25);
content: "";
height: .0625rem;
position: absolute;
bottom: 0;
left: 0;
right: 0
}
}
@media (min-width: 64rem) {
:is(.nav-main-header,.nav-sub-header) {
display:none
}
}
.nav-main-heading {
margin-inline-start:auto;margin-inline-end:auto}
.nav-close {
right: var(--grid-margin);
top: calc(var(--nav-main-header-height)/2);
z-index: 2;
outline: none;
width: 27px;
height: 26px;
position: absolute;
transform: translateY(-50%)
}
.nav-close:before {
content: "";
width: 2.75rem;
height: 2.75rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
@media (min-width: 64rem) {
.nav-close {
display:none
}
}
@media not (min-width: 64rem) {
.nav-lists {
align-items:flex-start;
height: 100%;
display: flex;
position: relative
}
}
@media (min-width: 64rem) {
.nav-lists {
transition:color .2s var(--ease-out-cubic);
flex-grow: 1;
padding-inline-start:calc(var(--logo-width) + 6rem);padding-inline-end: calc(var(--tools-width) + 6rem);
display: flex
}
}
.nav-main-wrapper {
display: flex
}
.nav-wrapper {
transition: opacity .2s var(--ease-out-cubic)
}
@media not (min-width: 64rem) {
.nav-wrapper {
background-color:var(--color-blue);
height: 100%;
width: calc(100vw - var(--nav-bg-gap));
margin-inline-start:var(--nav-bg-gap)}
.nav-wrapper[aria-hidden=true] {
pointer-events: none
}
}
@media (min-width: 64rem) {
.nav-wrapper {
font-size:.875rem;
font-weight: var(--font-semi-bold)
}
}
@media not (min-width: 64rem) {
.nav-main-scrollable {
scrollbar-gutter:stable;
padding-block-start:calc(var(--nav-main-header-height) + 2rem);padding-block-end: 6rem;
padding-inline:var(--grid-margin);-webkit-overflow-scrolling: touch;
width: 100vw;
height: 100%;
position: relative;
overflow: hidden scroll
}
}
@media (min-width: 64rem) {
.nav-main-scrollable {
z-index:2;
height: 2.25rem;
align-items: center;
margin-inline-start:calc(-1*var(--nav-item-padding));display: inline-flex;
position: relative
}
.nav-main-scrollable ul {
display: flex
}
}
@media not (min-width: 64rem) {
.nav-main-scrollable-list {
overflow:hidden
}
}
.nav-sub-wrapper {
z-index: 1;
position: relative
}
@media not (min-width: 64rem) {
.nav-sub-wrapper {
margin-inline-start:0
}
.nav-sub-wrapper[aria-hidden=true] {
display: none
}
}
@media (min-width: 64rem) {
.nav-sub-wrapper {
z-index:1;
padding-block-start:3rem;padding-block-end:3rem;position: absolute;
top: 2.25rem;
left: 0;
right: 0
}
.nav-sub-wrapper .nav-sub-scrollable {
opacity: 1;
transition: opacity .5s .2s var(--ease-out-cubic),transform .5s .2s var(--ease-out-cubic);
transform: translateY(0)
}
.nav-sub-wrapper[aria-hidden=true] {
pointer-events: none
}
.nav-sub-wrapper[aria-hidden=true] .nav-sub-scrollable {
opacity: 0;
transition: opacity .3s 0s var(--ease-out-cubic),transform .2s .5s var(--ease-out-cubic);
transform: translateY(-.5rem)
}
}
.nav-item-root-locale {
float: left;
margin-block-start:2rem}
.nav-item-root-search {
float: right;
margin-block-start:2rem}
.nav-item-root-search .nav-link {
justify-content: flex-end
}
@media (min-width: 64rem) {
:is(.nav-item-root-locale,.nav-item-root-search,.nav-sub-wrapper-locale) {
display:none
}
}
@media not (min-width: 64rem) {
.nav-sub-scrollable {
scrollbar-gutter:stable;
padding-block-start:calc(var(--nav-main-header-height) + 2rem);padding-block-end: 6rem;
padding-inline:var(--grid-margin);-webkit-overflow-scrolling: touch;
height: 100%;
overflow: hidden scroll
}
}
@media (min-width: 64rem) {
.nav-sub-scrollable {
max-width:var(--grid-max-width);
gap: 4rem;
margin-inline-start:calc(var(--grid-margin) + var(--logo-width) + 6rem);margin-inline-end: var(--grid-margin);
display: flex
}
}
.nav-sub-back {
display: flex;
position: relative
}
.nav-sub-back:before {
content: "";
width: 2.75rem;
height: 2.75rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
@media (min-width: 64rem) {
.nav-sub-back {
display:none
}
}
@media not (min-width: 64rem) {
.nav-sub-heading {
top:calc(var(--nav-main-header-height)/2);
position: absolute;
left: 50%;
transform: translate(-50%,-50%)
}
.nav-sub-heading span {
font-size: 1rem;
font-weight: var(--font-regular);
line-height: 1
}
}
@media (min-width: 64rem) {
:is(.nav-sub-list,.nav-shortcut-list) {
column-gap:calc(var(--grid-gutter)*1.5);
flex: 1;
grid-template-columns: repeat(auto-fill,minmax(0,16rem));
grid-auto-rows: min-content;
row-gap: 1rem;
display: grid
}
:is(.nav-sub-list,.nav-shortcut-list).no-shortcuts {
grid-template-columns: repeat(2,min-content)
}
}
@media (min-width: 70rem) {
:is(.nav-sub-list,.nav-shortcut-list) {
grid-template-columns:repeat(2,min-content)
}
}
@media (min-width: 85rem) {
:is(.nav-sub-list,.nav-shortcut-list) {
column-gap:calc(var(--grid-gutter)*2);
row-gap: var(--grid-row-gutter)
}
}
@media not (min-width: 64rem) {
.nav-shortcut-list {
border-top:.0625rem solid hsla(var(--color-white-base),.25);
margin-block-start:2rem;padding-block-start:2rem}
}
@media (min-width: 64rem) {
.nav-shortcut-list {
width:100%;
position: relative
}
.nav-shortcut-list:before {
content: "";
background-color: currentColor;
width: 1px;
position: absolute;
top: 0;
bottom: 0;
left: -2rem
}
}
@media not (min-width: 64rem) {
.nav-item-root:not(.nav-item-root-locale):not(.nav-item-root-search) {
border-bottom:.0625rem solid hsla(var(--color-white-base),.25)
}
}
@media not (min-width: 64rem) {
.nav-main-link-heading {
align-items:center;
gap: 1rem;
display: flex
}
}
@media (min-width: 64rem) {
.nav-item-back {
display:none
}
}
.nav-link {
-webkit-user-select: none;
user-select: none
}
@media not (min-width: 64rem) {
.nav-link {
font-size:1rem;
font-weight: var(--font-semi-bold);
border-radius: .125rem;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1.5rem .5rem;
text-decoration: none;
display: flex
}
.nav-sub-wrapper .nav-link {
padding-block-start:1.25rem;padding-block-end:1.25rem}
.nav-link:before {
display: none
}
}
@media (min-width: 64rem) {
.nav-link {
transition:opacity .2s linear
}
.nav-active .nav-link {
opacity: .5
}
.nav-active .nav-link:hover {
opacity: 1
}
.nav-active .nav-link[aria-expanded=true] {
opacity: 1
}
.nav-sub-wrapper[aria-hidden=false] .nav-link {
opacity: 1
}
.nav-link svg {
display: none
}
}
@media not (min-width: 64rem) {
.nav-link-sm {
font-size:.875rem;
font-weight: var(--font-regular)
}
}
.nav-main-link {
-webkit-tap-highlight-color: transparent
}
@media (min-width: 64rem) {
.nav-main-link {
padding-inline:var(--nav-item-padding)
}
.nav-main-link.no-link {
cursor: default
}
.nav-main-link:before {
left: var(--nav-item-padding);
width: calc(100% - var(--nav-item-padding)*2)
}
}
@media not (min-width: 64rem) {
.nav-main-link-sm {
font-size:.875rem;
font-weight: var(--font-regular)
}
}
.nav-shortcut-item {
white-space: nowrap
}
.nav-shortcut-item svg {
transition: transform .2s var(--ease-out-cubic)
}
.nav-shortcut-item:hover svg {
transform: translate(.5rem)
}
.nav-shortcut-item:focus-visible svg {
transform: translate(.5rem)
}
.nav-shortcut-link {
-webkit-tap-highlight-color: transparent;
align-items: center;
gap: .75rem;
padding: 0 .5rem;
display: flex
}
.nav-active .nav-shortcut-link {
color: var(--color-white)
}
@media not (min-width: 64rem) {
.nav-shortcut-link {
padding-block-start:1.25rem;
padding-block-end:1.25rem}
}
.footer {
width: 100%;
padding-block-start:4.25rem;padding-block-end:4.875rem;bottom: 0;
left: 0
} .footer a {
text-decoration: underline
}
.footer-section {
flex-direction: column;
grid-column: 1/-1;
gap: 1rem;
display: flex
}
@media not (min-width: 55rem) {
.footer-section {
margin-block-start:2rem
}
}
@media (min-width: 70rem) {
.footer-section:first-child {
grid-column:1/6
}
}
.footer-section:nth-child(2) {
grid-column: 1/5
}
@media (min-width: 40rem) {
.footer-section:nth-child(2) {
grid-column:1/7
}
}
@media (min-width: 55rem) {
.footer-section:nth-child(2) {
grid-column:1/5
}
}
@media (min-width: 70rem) {
.footer-section:nth-child(2) {
grid-column:6/8
}
}
.footer-section:nth-child(3) {
grid-column: 5/1
}
@media (min-width: 40rem) {
.footer-section:nth-child(3) {
grid-column:7/-1
}
}
@media (min-width: 55rem) {
.footer-section:nth-child(3) {
grid-column:5/9
}
}
@media (min-width: 70rem) {
.footer-section:nth-child(3) {
grid-column:8/11
}
}
@media (min-width: 55rem) {
.footer-section:nth-child(4) {
grid-column:10/-1
}
}
@media (min-width: 70rem) {
.footer-section:nth-child(4) {
grid-column:11/-1
}
}
.footer-social-list {
gap: 1.5rem;
display: flex
}
.social-item {
color: var(--color-pink);
width: 2.5rem;
height: 2.5rem;
transition: color .2s
}
.social-item svg {
width: 100%
}
.social-item:hover {
color: var(--color-pink-dark)
}
.social-item:focus-visible {
color: var(--color-pink-dark)
}
.social-item-small {
width: 1.5rem;
height: 1.5rem
}
.social-item-blue {
color: var(--color-blue)
}
.social-item-blue:hover {
color: var(--color-dark)
}
.social-item-blue:focus-visible {
color: var(--color-dark)
}
.footer-list a {
text-decoration: none;
position: relative;
color: #fff!important;
}
.footer-list li:not(:first-child) {
margin-block-start:1rem}
[class^=button] {
background-color: var(--color-pink);
border: 1px solid var(--color-button-border);
color: var(--color-black);
font-weight: var(--font-medium);
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
justify-content: center;
align-items: center;
gap: .5rem;
transition: color .2s,background-color .2s,border .2s,opacity .2s linear;
display: inline-flex
}
[class^=button]:hover {
background-color: var(--color-pink-dark);
border-color: var(--color-pink-dark);
color: var(--color-white)
}
[class^=button]:focus-visible {
background-color: var(--color-pink-dark);
border-color: var(--color-pink-dark);
color: var(--color-white)
}
[class^=button]:active {
border-color: var(--color-bordeaux)
}
[class^=button]:disabled {
cursor: default;
opacity: .65;
pointer-events: none
}
.button {
border-radius: var(--border-radius-pill);
align-self: flex-start;
align-items: baseline;
padding-block-start:.75rem;padding-block-end:.75rem;padding-inline-start:1.25rem;padding-inline-end:1.25rem}
@media (min-width: 40rem) {
.button {
padding-inline-start:2.5rem;
padding-inline-end:2.5rem}
}
.button-icon {
border-color: var(--color-bordeaux);
border-radius: var(--border-radius-circle);
color: var(--color-bordeaux);
width: 5rem;
height: 5rem
}
.input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--color-white);
border: solid var(--color-darker-grey);
border-radius: var(--border-radius-sm);
border-width: 0 0 1px;
outline: none;
flex-grow: 1;
padding-block-start:.7rem;padding-block-end:.7rem;transition: border .2s
}
.input::placeholder {
color: var(--color-darker-grey)
}
.input:hover {
border-color: var(--color-black)
}
.input:focus-visible {
border-color: var(--color-black)
}
.checkbox {
cursor: pointer;
gap: var(--grid-gutter);
display: flex;
position: relative
}
.checkbox-input {
opacity: 0;
width: 1.5rem;
height: 1.5rem;
position: absolute;
top: 0;
left: 0
}
.checkbox-text {
color: var(--color-darker-grey);
transform: translateY(-.25em)
}
.checkbox-icon {
flex-shrink: 0
}
.checkbox-bg {
fill: var(--color-white);
stroke: var(--color-black);
transition: fill .1s linear
}
.checkbox-checkmark {
stroke: var(--color-white)
}
.checkbox-input:checked+.checkbox-icon .checkbox-bg {
fill: var(--color-pink);
stroke: var(--color-pink)
}
.checkbox-input:checked+.checkbox-icon .checkbox-checkmark {
stroke: var(--color-black)
}
.error~.newsletter-signup-consent {
color: var(--color-red)
}
.error.newsletter-signup-email {
border-color: var(--color-red);
color: var(--color-red)
}
.search {
z-index: 2;
background: #0006;
justify-content: flex-end;
width: 100%;
height: 100vh;
display: none;
position: fixed;
top: 0;
left: 0
}
.search[aria-hidden=false] {
display: flex
}
.search-inner {
background-color: hsla(var(--color-blue-base),.95);
color: var(--color-white)
}
.search-grid {
grid-template-rows: 4rem 1fr
}
.search-header {
grid-column: 1/-1;
justify-content: flex-end;
align-items: flex-end;
height: 4rem;
display: flex
}
.search-close {
align-self: end;
width: 1.5rem;
height: 1.5rem;
display: block;
position: relative
}
.search-close:before {
content: "";
width: 2.75rem;
height: 2.75rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
.search-content {
grid-column: 1/-1;
align-self: center
}
@media (min-width: 40rem) {
.search-content {
grid-column:3/-3
}
}
.search-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: inherit;
background-color: #0000;
border: none;
border-bottom: 1px solid;
border-radius: 0;
outline: none;
width: 100%;
padding-block-start:.5rem;padding-block-end:.5rem}
.search-input::placeholder {
color: var(--color-darker-grey)
}
.search-button {
color: inherit;
position: relative
}
.search-help {
text-align: right;
margin-block-start:1.25rem}
.text-120 {
font-size: 7.5rem;
line-height: 1.1
}
@media not (min-width: 70rem) {
.text-120 {
font-size:max(5rem,min(2vw + 2rem,7.5rem))
}
}
@media not (min-width: 55rem) {
.text-120 {
font-size:3.5rem
}
}
.text-120:before {
content: "";
margin-bottom: -.15em;
display: table
}
.text-120:after {
content: "";
margin-top: -.15em;
display: table
}
.text-120 .u-overflow-hidden {
padding-block-end:.5rem}
.text-96 {
letter-spacing: -.05em;
font-size: 6rem;
line-height: 1.2
}
@media not (min-width: 70rem) {
.text-96 {
font-size:max(4rem,min(4vw + 3rem,6rem))
}
}
@media not (min-width: 55rem) {
.text-96 {
font-size:3rem
}
}
.text-96:before {
content: "";
margin-bottom: -.256em;
display: table
}
.text-96:after {
content: "";
margin-top: -.256em;
display: table
}
.text-80 {
font-size: 5rem;
line-height: 1.2
}
@media not (min-width: 70rem) {
.text-80 {
font-size:max(3.25rem,min(4vw + 2rem,5rem))
}
}
@media not (min-width: 55rem) {
.text-80 {
font-size:2.75rem
}
}
.text-80:before {
content: "";
margin-bottom: -.225em;
display: table
}
.text-80:after {
content: "";
margin-top: -.225em;
display: table
}
.text-64 {
font-size: 4rem;
line-height: 1.2
}
@media not (min-width: 70rem) {
.text-64 {
font-size:max(2.5rem,min(2vw + 2rem,4rem))
}
}
@media not (min-width: 55rem) {
.text-64 {
font-size:2.5rem
}
}
.text-64:before {
content: "";
margin-bottom: -.25em;
display: table
}
.text-64:after {
content: "";
margin-top: -.25em;
display: table
}
.text-56 {
font-size: 3.2rem;
line-height: 1.2
}
@media not (min-width: 70rem) {
.text-56 {
font-size:max(2.25rem,min(2vw + 2rem,3.5rem))
}
}
.text-56:before {
content: "";
margin-bottom: -.2513em;
display: table
}
.text-56:after {
content: "";
margin-top: -.2513em;
display: table
}
.text-40 {
font-size: 2.5rem;
line-height: 1.4
}
@media not (min-width: 70rem) {
.text-40 {
font-size:max(1.875rem,min(1vw + 1.5rem,2.5rem))
}
}
@media not (min-width: 55rem) {
.text-40 {
font-size:1.875rem
}
}
.text-40:before {
content: "";
margin-bottom: -.35em;
display: table
}
.text-40:after {
content: "";
margin-top: -.35em;
display: table
}
.text-32,.prose h2 {
font-size: 2rem;
line-height: 1.4
}
@media not (min-width: 70rem) {
:is(.text-32,.prose h2) {
font-size:max(1.5rem,min(2vw + 1rem,2rem))
}
}
@media not (min-width: 55rem) {
:is(.text-32,.prose h2) {
font-size:1.5rem
}
}
.text-24,.prose h3 {
font-size: 1.5rem;
line-height: 1.4
}
@media not (min-width: 55rem) {
:is(.text-24,.prose h3) {
font-size:1.25rem
}
}
.text-20 {
font-size: 1.25rem;
line-height: 1.6
}
@media not (min-width: 70rem) {
.text-20 {
font-size:max(1.125rem,min(5vw - 1rem,1.25rem))
}
}
@media not (min-width: 55rem) {
.text-20 {
font-size:1.125rem
}
}
.text-16 {
font-size: 1rem;
line-height: 1.75
}
.text-14 {
font-size: .875rem
}
.text-12 {
font-size: .75rem
}
.text-overline {
letter-spacing: .2em;
text-transform: uppercase;
font-size: 1rem
}
.text-overline-sm {
letter-spacing: .2em;
text-transform: uppercase;
font-size: .75rem
}
.text-medium {
font-weight: var(--font-medium)
}
.text-semi-bold {
font-weight: var(--font-semi-bold)
}
.text-numeric {
font-variant-numeric: lining-nums
}
.text-center {
text-align: center
}
.leading-none {
line-height: 1
}
@media (any-hover: hover) {
.annual {
scrollbar-width:thin;
scrollbar-color: transparent transparent
}
.annual::-webkit-scrollbar {
width: 0
}
.annual::-webkit-scrollbar-track {
background: 0 0;
width: 0
}
.annual::-webkit-scrollbar-thumb {
background-color: #0000
}
.annual .video-breaker {
aspect-ratio: auto;
min-height: 100vh;
position: sticky
}
}
.annual .horizontal-list .social-item {
display: none
}
.annual .section.bg-pink+.section.bg-pink {
padding-block-start:2rem}
@media (min-width: 40rem) {
.annual .section.bg-pink+.section.bg-pink {
padding-block-start:3rem
}
}
@media (min-width: 70rem) {
.annual .section.bg-pink+.section.bg-pink {
padding-block-start:4rem
}
}
.fifth-element,.fifth-element-pattern {
color: var(--theme);
pointer-events: none;
max-width: 100%;
height: 100%;
display: flex
}
:is(.fifth-element,.fifth-element-pattern) svg {
width: 100%;
display: block
}
.fifth-element {
aspect-ratio: 298/305
}
.fifth-element-pattern {
aspect-ratio: 507/777
}
.fifth-element-pattern path {
opacity: 0
}
@media not (min-width: 70rem) {
.fifth-element-pattern path:nth-last-child(n+4) {
display:none
}
}
.annual-sidebar {
z-index: 2;
height: 100%;
position: fixed;
top: 0;
right: 0
}
@media not (min-width: 64rem) {
@media (any-hover:none) {
.annual-sidebar {
display:none
}
}
}
.annual-nav {
flex-direction: column;
display: flex;
position: absolute;
top: 0;
bottom: 0;
right: 0
}
.annual-nav-item {
flex: 1
}
.annual-nav-item:not(:last-child) {
border-bottom: 1px solid var(--color-white)
}
.annual-nav-link {
background-color: var(--color-pink-dark);
opacity: .5;
text-transform: uppercase;
width: 1rem;
height: 100%;
transition: transform .2s var(--ease-out-cubic);
display: flex;
position: relative;
transform: translate(50%)
}
.annual-nav-link:before {
content: "";
width: 50%;
height: 100%;
position: absolute;
top: 0;
right: 100%
}
.annual-nav-link:hover {
opacity: 1;
transform: translate(0)
}
.annual-nav-link:hover .annual-nav-tooltip {
opacity: 1;
transform: translate(calc(-100% - 1rem),-50%)
}
.annual-nav-tooltip {
background-color: var(--color-pink-dark);
border-radius: var(--border-radius-sm);
color: var(--color-white);
white-space: nowrap;
opacity: 0;
transition: opacity .3s linear,transform .3s var(--ease-out-cubic);
pointer-events: none;
padding: 1rem;
position: absolute;
top: 50%;
left: 0;
transform: translate(100%,-50%)
}
.annual-nav-tooltip-arrow {
background-color: var(--color-pink-dark);
width: .5rem;
height: .5rem;
position: absolute;
top: 50%;
right: 0;
transform: translate(50%,-50%)rotate(45deg)
}
.annual-progress {
background-color: hsla(var(--color-pink-base),.95);
pointer-events: none;
mix-blend-mode: hard-light;
width: .5rem;
height: 100%;
position: absolute;
right: 0
}
.breaker {
height: 100vh;
padding-block-start:0;padding-block-end:0;position: sticky;
top: 0
}
.breaker-overlay {
box-shadow: 0 -2rem 2rem 0 var(--color-black)inset;
background-color: var(--color-black);
opacity: 0;
pointer-events: none;
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.breaker-element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
@media (max-aspect-ratio: 11/6) {
.breaker-element {
display:none
}
}
@media not (min-width: 55rem) {
.breaker-element {
display:none
}
}
.breaker-element svg {
width: 100%;
height: 100%
}
.breaker-content {
grid-column: 1/-1;
align-self: center
}
@media (min-width: 55rem) {
.breaker-content {
grid-column:8/-1
}
}
.breakerV2 {
height: 100vh;
position: relative
}
@media not (min-width: 40rem) {
.breakerV2 {
height:110vh
}
}
.breakerV2-wrapper {
width: 100%;
display: flex;
position: absolute;
top: 50%;
transform: translateY(-50%)
}
@media not (min-width: 40rem) {
.breakerV2-wrapper {
flex-direction:column;
gap: 4rem
}
}
.breakerV2-number {
width: 75%;
max-height: 65vh
}
@media (min-width: 40rem) {
.breakerV2-number {
width:50%
}
}
@media not (min-height: 45rem) {
.breakerV2-number {
width:50%
}
}
.breakerV2-number svg {
max-width: 100%;
max-height: 100%
}
.breakerV2-inner {
max-width: var(--grid-max-width);
width: 100%;
height: 100%;
justify-content: flex-end;
margin-inline-start:auto;margin-inline-end:auto;padding-inline-end:var(--grid-margin);display: flex
}
@media (min-width: 40rem) {
.breakerV2-inner {
position:absolute;
top: 0;
left: 50%;
transform: translate(-50%)
}
}
.breakerV2-title {
text-align: right;
-webkit-user-select: none;
user-select: none;
width: 100%;
position: relative
}
@media (min-width: 40rem) {
.breakerV2-title {
width:50%
}
}
.breakerV2-title>div {
display: inline-flex
}
@media not (min-height: 45rem) {
.breakerV2-title>* {
font-size:max(2.25rem,min(1.8152rem + 2.1739vh,3.5rem))
}
}
[data-a11y-dialog-native] .bottom-sheet-overlay {
display: none
}
.bottom-sheet[aria-hidden=true] {
pointer-events: none
}
.bottom-sheet:not([data-a11y-dialog-native]),.bottom-sheet-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.bottom-sheet {
z-index: 3;
display: flex
}
.bottom-sheet-overlay {
background-color: hsla(var(--color-blue-base),.8)
}
dialog::backdrop {
background-color: hsla(var(--color-blue-base),.8)
}
.bottom-sheet-content {
z-index: 2;
width: 100%;
max-height: calc(100% - 3rem);
margin: auto;
position: absolute;
bottom: 0;
right: 0
}
@media (min-width: 40rem) {
.bottom-sheet-content {
max-height:calc(100% - 8rem)
}
}
@media (min-width: 55rem) {
.bottom-sheet-content {
max-height:calc(100% - 16rem)
}
}
@keyframes fade-in {
0% {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fade-out {
to {
opacity: 0
}
}
@keyframes slide-in-vertical {
0% {
transform: translateY(calc(100% + 2rem))
}
}
@keyframes slide-out-vertical {
to {
transform: translateY(calc(100% + 2rem))
}
}
.bottom-sheet-overlay {
animation: .2s both fade-in
}
.bottom-sheet[aria-hidden=true] .bottom-sheet-overlay {
animation: forwards fade-out
}
.bottom-sheet[aria-hidden=true].is-ready .bottom-sheet-overlay {
animation-duration: .2s
}
.bottom-sheet-content {
animation: .4s .2s both slide-in-vertical
}
.bottom-sheet[aria-hidden=true] .bottom-sheet-content {
animation: forwards fade-out,forwards slide-out-vertical
}
.bottom-sheet[aria-hidden=true].is-ready .bottom-sheet-content {
animation-duration: .2s,.2s
}
.bottom-sheet-close {
background-color: var(--color-pink);
border-radius: var(--border-radius-circle);
z-index: 1;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
transition: all .15s;
display: flex;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,-50%)
}
@media not (min-width: 40rem) {
.bottom-sheet-close {
transform-origin:50%;
transform: scale(.65)translate(-75%,-75%)
}
}
.bottom-sheet-scroll {
background-color: var(--color-grey);
-webkit-overflow-scrolling: touch;
max-height: 100vh;
overflow-y: auto
}
.carousel {
--carousel-nav-size: 3.125rem;
position: relative
}
.grid+.carousel {
padding-block-start:calc(4rem + var(--carousel-nav-size))}
.carousel-nav {
padding-inline: var(--grid-margin);
justify-content: flex-end;
gap: 1.5rem;
margin-block-end:.5rem;display: flex
}
@media (min-width: 70rem) {
.carousel-nav-hide-on-large {
display:none
}
}
.carousel-nav-button {
width: var(--carousel-nav-size);
height: var(--carousel-nav-size);
transition: opacity .3s linear,transform .2s var(--ease-out-cubic);
justify-content: center;
align-items: center;
display: flex;
position: relative
}
.carousel-nav-button:before {
opacity: .5;
content: "";
width: 140%;
height: 140%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
.carousel-nav-button svg {
pointer-events: none
}
.carousel-nav-button[disabled] {
cursor: default;
opacity: .2;
pointer-events: none
}
.carousel-nav-prev:hover {
transform: translate(-.25rem)
}
.carousel-nav-prev:focus-visible {
transform: translate(-.25rem)
}
.carousel-nav-next:hover {
transform: translate(.25rem)
}
.carousel-nav-next:focus-visible {
transform: translate(.25rem)
}
.carousel-viewport {
overflow: hidden
}
.carousel-viewport.is-centered {
justify-content: center;
display: flex
}
.carousel-container {
display: flex
}
.carousel-container.is-centered {
display: inline-flex
}
.carousel-slide {
flex-shrink: 0;
width: 25rem;
padding-inline-start:1rem;padding-inline-end:1rem}
.columns-prefix {
grid-column: 1/-1
}
.contact {
padding-block-start:5rem;padding-block-end:5rem}
@media (min-width: 30rem) {
.contact {
--grid-row-gutter:5rem
}
}
.contact .grid {
grid-template-rows: auto 1fr
}
.contact-title {
grid-column: 1/-1
}
@media (min-width: 30rem) {
.contact-title {
grid-column:1/5
}
}
@media (min-width: 40rem) {
.contact-title {
grid-area:1/1/1/8
}
}
.contact-media {
grid-area: 1/5/3/-1;
position: relative
}
@media not (min-width: 30rem) {
.contact-media {
display:none
}
}
@media (min-width: 40rem) {
.contact-media {
grid-column:9/-1
}
}
.contact-media img {
aspect-ratio: 1;
width: 100%
}
.contact-line {
background: currentColor;
grid-area: 2/1/2/4;
height: 1px;
transform: translateY(.65em)
}
@media not (min-width: 55rem) {
.contact-line {
display:none
}
}
.contact-content {
flex-direction: column;
grid-column: 1/-1;
gap: 2rem;
display: flex
}
@media (min-width: 55rem) {
.contact-content {
grid-area:2/4/2/8
}
}
.faq-title {
grid-column: 1/-1
}
.faq-item+.faq-title {
margin-block-start:3rem}
.faq-item {
border-bottom: 1px solid var(--color-darker-grey);
grid-column: 1/-1;
transition: border .2s
}
.faq-item:hover {
border-color: var(--color-black)
}
.faq-item[open] .faq-icon {
transform: rotate(180deg)
}
.faq-header {
outline: none;
justify-content: space-between;
align-items: center;
padding-block-start:2rem;padding-block-end:2rem;list-style-type: none;
display: flex
}
.faq-icon {
transition: transform .2s
}
.faq-content {
margin-block-end:2.5rem;padding-inline-end:2rem}
@media (min-width: 55rem) {
.faq-title,.faq-item {
grid-column:2/-2
}
}
.featured {
--featured-expanded-basis: 100%
}
.featured.featured-2 {
--featured-expanded-basis: 333%
}
.featured.featured-3 {
--featured-expanded-basis: 388%
}
.featured.featured-4 {
--featured-expanded-basis: 352%
}
.featured.featured-5 {
--featured-expanded-basis: 515%
}
.featured-content {
grid-column: 1/-1
}
@media not (min-width: 55rem) {
.featured-content {
margin-block-end:2rem
}
}
@media (min-width: 70rem) {
.featured-content {
grid-column:1/4
}
}
.featured-carousel-viewport {
grid-column: 1/-1
}
@media not (min-width: 55rem) {
.featured-carousel-viewport {
overflow:hidden
}
}
@media (min-width: 70rem) {
.featured-carousel-viewport {
grid-column:5/-1
}
}
.featured-carousel-container {
gap: var(--grid-gutter);
display: flex
}
@media not (min-width: 55rem) {
.featured-carousel-container {
gap:2rem
}
}
@media (min-width: 55rem) {
.featured-carousel-container {
overflow:hidden
}
}
@media (min-width: 55rem) {
.featured-carousel-container-multiple:not(:hover):not(:focus-within) .featured-item:first-child .featured-item-collapsed-title {
opacity:0
}
.featured-carousel-container-multiple:not(:hover):not(:focus-within) .featured-item:first-child .featured-item-content {
opacity: 1;
transition-delay: .25s;
transform: translateY(0)
}
.featured-carousel-container-multiple:hover .featured-item {
flex-basis: 100%
}
.featured-carousel-container-multiple:hover .featured-item .featured-item-collapsed-title {
opacity: 1
}
.featured-carousel-container-multiple:hover .featured-item:hover {
flex-basis: var(--featured-expanded-basis)
}
.featured-carousel-container-multiple:hover .featured-item:hover .featured-item-collapsed-title {
opacity: 0
}
.featured-carousel-container-multiple:hover .featured-item:hover .featured-item-content {
opacity: 1;
transition-delay: .25s;
transform: translateY(0)
}
.featured-carousel-container-multiple:hover .featured-item:focus-within {
flex-basis: var(--featured-expanded-basis)
}
.featured-carousel-container-multiple:hover .featured-item:focus-within .featured-item-collapsed-title {
opacity: 0
}
.featured-carousel-container-multiple:hover .featured-item:focus-within .featured-item-content {
opacity: 1;
transition-delay: .25s;
transform: translateY(0)
}
.featured-carousel-container-multiple:focus-within .featured-item {
flex-basis: 100%
}
.featured-carousel-container-multiple:focus-within .featured-item .featured-item-collapsed-title {
opacity: 1
}
.featured-carousel-container-multiple:focus-within .featured-item:hover {
flex-basis: var(--featured-expanded-basis)
}
.featured-carousel-container-multiple:focus-within .featured-item:hover .featured-item-collapsed-title {
opacity: 0
}
.featured-carousel-container-multiple:focus-within .featured-item:hover .featured-item-content {
opacity: 1;
transition-delay: .25s;
transform: translateY(0)
}
.featured-carousel-container-multiple:focus-within .featured-item:focus-within {
flex-basis: var(--featured-expanded-basis)
}
.featured-carousel-container-multiple:focus-within .featured-item:focus-within .featured-item-collapsed-title {
opacity: 0
}
.featured-carousel-container-multiple:focus-within .featured-item:focus-within .featured-item-content {
opacity: 1;
transition-delay: .25s;
transform: translateY(0)
}
}
@media (min-width: 55rem) {
.featured-carousel-container-single .featured-item:first-child {
flex-basis:var(--featured-expanded-basis)
}
.featured-carousel-container-single .featured-item:first-child .featured-item-collapsed-title {
opacity: 0
}
.featured-carousel-container-single .featured-item:first-child .featured-item-content {
opacity: 1;
transition-delay: .25s;
transform: translateY(0)
}
}
.featured-item {
transition: flex-basis .3s ease-in-out
}
@media not (min-width: 55rem) {
.featured-item {
flex:0 0 min(18rem,100vw - 4rem);
min-width: 0;
max-width: 100%
}
}
@media (min-width: 55rem) {
.featured-item {
color:var(--color-white);
flex-basis: 100%;
height: 32rem;
position: relative
}
.featured-item:first-child {
flex-basis: var(--featured-expanded-basis)
}
.featured-item:first-child .featured-item-collapsed-title {
opacity: 0
}
.featured-item:first-child .featured-item-content {
opacity: 1;
transition-delay: .25s;
transform: translateY(0)
}
}
.featured-item-media {
height: 16rem;
margin-block-end:2rem;position: relative
}
@media (min-width: 55rem) {
.featured-item-media {
height:100%;
margin-block-end:0}
.featured-item-media:after {
content: "";
background: linear-gradient(#16161600 0%,#161616 100%);
width: calc(100% + 2px);
height: 100%;
position: absolute;
top: 0;
left: -1px
}
}
.featured-item-media img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%
}
@media (min-width: 55rem) {
:is(.featured-item-content,.featured-carousel-container-multiple:hover .featured-item-content) {
opacity:0;
will-change: opacity;
padding-block-end:2rem;padding-inline-start:2rem;padding-inline-end:4rem;transition: opacity .1s linear,transform .1s;
position: absolute;
bottom: 0;
transform: translateY(1rem)
}
}
.featured-item-collapsed-title {
transform-origin: 0 100%;
white-space: nowrap;
will-change: opacity;
transition: opacity .1s linear,transform .1s;
position: absolute;
bottom: 2rem;
left: 2rem;
transform: rotate(-90deg)translateY(100%)
}
@media not (min-width: 55rem) {
.featured-item-collapsed-title {
display:none
}
}
@media not (min-width: 85rem) {
.featured-item-content .featured-item-title {
font-weight:var(--font-medium);
font-size: 1rem
}
.featured-item-content>* {
font-size: .875rem
}
}
.featured-dots {
gap: .5rem;
margin-block-end:calc(-1*var(--grid-row-gutter));display: flex
}
@media (min-width: 55rem) {
.featured-dots {
display:none
}
}
.featured-dot {
opacity: .25;
width: 2.25rem;
height: 2.25rem;
transition: opacity .2s linear;
display: inline-block;
position: relative
}
.featured-dot-inner {
background-color: var(--color-pink);
pointer-events: none;
width: 100%;
height: .25rem;
position: absolute;
top: 50%;
transform: translateY(-50%)
}
.featured-dot:hover,.featured-dot.is-selected {
opacity: 1
}
.featured-dot:focus-visible {
opacity: 1
}
.filter {
flex-wrap: wrap;
align-items: flex-start;
gap: 3.5rem;
display: flex
}
.filter-list {
flex-wrap: wrap;
gap: 1rem;
display: flex
}
.button-filter {
border-radius: var(--border-radius-pill);
padding: .4rem 1rem
}
.filter-select {
align-items: center;
position: relative
}
.filter-select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
border-bottom: 1px solid var(--color-black);
font-family: inherit;
font-size: inherit;
cursor: pointer;
line-height: inherit;
background-color: #0000;
border-radius: 0;
outline: none;
padding: .5rem;
padding-inline-end:2rem}
.filter-select select::-ms-expand {
display: none
}
.filter-select-icon {
pointer-events: none;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%)
}
.financial-highlights {
position: relative
}
.financial-highlights .timeline-columns {
margin-inline-start:0;margin-inline-end:0}
.financial-highlights .timeline-axis {
margin-inline-start:0;margin-inline-end:0}
.financial-highlights-nav-wrapper {
z-index: 1;
min-height: 100vh;
position: relative
}
.financial-highlights-nav {
grid-template-columns: repeat(auto-fit,minmax(min(14rem,100%),1fr));
height: 100vh;
display: grid
}
.financial-highlights-nav li {
padding-inline-start:1rem;padding-inline-end:1rem;display: flex
}
@media (min-width: 40rem) {
.financial-highlights-nav li {
padding-inline-start:2rem;
padding-inline-end:2rem}
}
.financial-highlights-nav a {
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2rem;
width: 100%;
display: flex;
position: relative
}
.financial-highlights-nav .text-80 {
margin-block-start:-4rem}
.financial-highlights-nav .text-32 {
min-height: 2ex;
margin-block-start:-2rem;position: absolute;
top: 50%;
transform: translateY(3ex)
}
.financial-highlights-sections {
pointer-events: none;
position: relative
}
.financial-highlights-sections .section {
background-color: #0000;
min-height: 100vh
}
.financial-highlights-sections .section:last-child {
min-height: 150vh
}
.financial-highlights-chart {
min-height: 100vh;
transition: background-color .5s var(--ease-out-cubic),color .5s var(--ease-out-cubic);
align-items: center;
display: flex;
position: sticky;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.financial-highlights-chart>.grid {
width: 100%
}
.financial-highlights-legend {
white-space: nowrap;
align-items: center;
gap: .5rem;
display: flex
}
.financial-highlights-legend+.financial-highlights-legend {
margin-block-start:.25rem}
.financial-highlights-spacer {
height: 3rem
}
.financial-highlights-legend-color {
border-radius: var(--border-radius-circle);
flex-shrink: 0;
width: 1rem;
height: 1rem
}
.financial-highlights-note {
opacity: .5;
margin-block-start:1rem}
.financial-highlights-button {
margin-block-start:3rem}
.financial-highlights-tooltip {
margin-top: -4rem
}
.financial-highlightsV2-nav {
grid-template-columns: repeat(auto-fit,minmax(15rem,1fr));
height: 100vh;
display: grid;
position: relative
}
.financial-highlightsV2-nav-item {
-webkit-user-select: none;
user-select: none;
padding-inline-start:1rem;padding-inline-end:1rem;display: flex
}
.financial-highlightsV2-nav-link {
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2rem;
width: 100%;
transition: transform .3s;
display: flex;
position: relative
}
.financial-highlightsV2-nav-link:hover {
transform: translateY(-.5rem)
}
.financial-highlightsV2-sections {
max-width: 100vw;
position: relative
}
.financial-highlightsV2-scroller {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
-ms-overflow-style: none;
height: 100vh;
overflow: scroll hidden;
overflow: -moz-scrollbars-none;
scroll-snap-align: center;
scrollbar-height: none;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
align-items: center;
display: flex
}
.financial-highlightsV2-scroller::-webkit-scrollbar {
display: none;
height: 0!important
}
.financial-highlightsV2-section {
scroll-snap-align: center;
flex-shrink: 0;
width: 100vw;
height: 100vh;
min-height: 100vh;
position: relative;
overflow: hidden
}
.financial-highlightsV2-section>.grid {
align-items: center
}
@media not (min-width: 40rem) {
.financial-highlightsV2-section>.grid {
grid-template-rows:1fr 2fr
}
}
.financial-highlightsV2-section-headline {
text-align: center;
flex-direction: column;
grid-column: 1/-1;
justify-content: center;
display: flex
}
@media (min-width: 40rem) {
.financial-highlightsV2-section-headline {
grid-column:1/6;
height: 100%
}
}
.financial-highlightsV2-section-content {
grid-column: 1/-1
}
@media not (min-width: 40rem) {
.financial-highlightsV2-section-content {
align-self:flex-start;
padding-bottom: 4rem
}
}
@media (min-width: 40rem) {
.financial-highlightsV2-section-content {
grid-column:7/-1;
padding: 1.5rem
}
}
.financial-highlightsV2-section-note {
opacity: .6;
margin-top: auto;
position: absolute;
bottom: 0
}
@media not (min-width: 40rem) {
.financial-highlightsV2-section-note {
bottom:-3rem;
left: 0;
right: 0
}
}
@media (min-width: 40rem) {
.financial-highlightsV2-section-note {
bottom:-4rem
}
}
@media (min-width: 70rem) {
.financial-highlightsV2-section-note {
bottom:-6rem
}
}
.hero-text {
--grid-row-gutter: 5rem;
padding-block-start:12rem;padding-block-end:4.5rem}
.hero-text.hero-text-with-overlap:before {
content: "";
background-color: var(--color-white);
width: 100%;
height: 20%;
position: absolute;
bottom: 0
}
@media not (min-width: 70rem) {
.hero-text .grid {
grid-template-rows:auto 1fr
}
}
.hero-text-title {
z-index: 1;
grid-column: 1/-1
}
@media (min-width: 55rem) {
.hero-text-title {
grid-column:1/10
}
}
@media (min-width: 70rem) {
.hero-text-title {
grid-column:2/7
}
}
.hero-text-title-end {
align-self: end
}
.hero-text-content {
grid-area: 2/1/2/-1
}
@media (min-width: 40rem) {
.hero-text-content {
grid-column:1/10
}
}
@media (min-width: 55rem) {
.hero-text-content {
grid-column:1/8
}
}
@media (min-width: 70rem) {
.hero-text-content {
grid-area:1/8/3/-2
}
}
.hero-text-media {
grid-column: 1/-1;
position: relative
}
@media (min-width: 70rem) {
.hero-text-media {
grid-column:2/-2
}
}
.hero-text-podcast {
grid-column: 1/-1;
position: relative;
overflow: hidden
}
@media (min-width: 55rem) {
.hero-text-podcast {
grid-column:1/10
}
}
@media (min-width: 70rem) {
.hero-text-podcast {
grid-column:2/6
}
}
.hero-text-podcast img {
width: 100%
}
.hero-text-podcast .plyr {
width: 100%;
transition: transform .2s;
position: absolute;
bottom: 0;
transform: translateY(100%)
}
.hero-text-podcast .plyr.plyr--playing {
transform: translateY(0)
}
.hero-video {
color: var(--color-white);
align-content: center;
row-gap: 4.875rem;
height: 100vh;
position: relative
}
.hero-video>.grid {
align-content: center
}
.hero-video-content {
z-index: 1;
grid-column: 1/-1;
align-self: center
}
@media (min-width: 55rem) {
.hero-video-content {
grid-column:1/7
}
}
.hero-video-media {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.hero-video-media:after {
content: "";
animation: fade-in 3s var(--ease-out-expo)forwards;
background: linear-gradient(90deg,#000c 0%,#0000 100%);
position: absolute;
top: 0%;
bottom: 0;
left: 0%;
right: 0%
}
.hero-video-media video {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%
}
.hero-video-element {
justify-content: flex-end;
align-items: center;
display: flex;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
@media not (min-width: 55rem) {
.hero-video-element {
display:none
}
}
.horizontal-list-overline {
grid-area: 1/1/1/-1
}
.horizontal-list-title {
grid-area: 2/1/2/-1
}
@media (min-width: 40rem) {
.horizontal-list-title {
grid-column:1/7
}
}
.horizontal-list-text {
gap: var(--grid-row-gutter-lg);
flex-direction: column;
grid-area: 3/1/3/-1;
display: flex
}
@media (min-width: 40rem) {
.horizontal-list-text {
grid-area:2/8/2/-1
}
}
.icon-access .grid {
grid-template-columns: repeat(auto-fit,minmax(min(14rem,100%),1fr));
grid-auto-flow: dense
}
@media (min-width: 85rem) {
.icon-access .grid {
grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr))
}
}
@media not (min-width: 85rem) {
.icon-access.icon-access-5 .grid {
grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr))
}
}
.icon-access-prefix {
grid-area: 1/1/1/-1;
margin-block-end:2rem}
.icon-access-summary {
background-color: var(--color-grey);
flex-direction: column;
justify-content: flex-end;
height: 8.75rem;
margin-block-start:2rem;padding-block-start:1.5rem;padding-block-end:1.5rem;padding-inline-start:1rem;padding-inline-end:1rem;display: flex;
position: relative
}
@media (min-width: 85rem) {
.icon-access-summary {
padding-inline-start:1.5rem;
padding-inline-end:1.5rem}
}
.icon-access-summary:after {
background-color: var(--color-blue);
content: "";
transform-origin: bottom;
width: 100%;
height: .5rem;
position: absolute;
bottom: 0;
left: 0;
transform: scaleY(0)
}
.icon-access-summary>* {
transition: transform .2s var(--ease-out-cubic)
}
.icon-access-summary:after {
transition: transform .2s var(--ease-out-cubic)
}
.icon-access-summary:hover>* {
transform: translateY(-.25rem)
}
.icon-access-summary:hover:after {
transform: scaleY(1)
}
.icon-access-summary.active>* {
transform: translateY(-.25rem)
}
.icon-access-summary.active:after {
transform: scaleY(1)
}
.icon-access-summary[aria-expanded=true]>* {
transform: translateY(-.25rem)
}
.icon-access-summary[aria-expanded=true]:after {
transform: scaleY(1)
}
.icon-access-icon {
max-height: 5rem;
position: absolute;
top: -3rem;
right: 1.5rem
}
.icon-access-label {
white-space: nowrap
}
.icon-access-heading {
text-align: left;
width: 100%;
margin-block-start:.25rem;padding-inline-end:1rem;line-height: 1.2;
position: relative
}
@media not (min-width: 85rem) {
.icon-access-heading {
font-size:1.125rem
}
}
.icon-access-summary-arrow {
position: absolute;
top: 50%;
right: .5rem;
transform: translate(100%,-50%)
}
.icon-access-summary-arrow svg {
transition: transform .2s
}
[aria-expanded=true] .icon-access-summary-arrow svg {
transform: rotate(180deg)
}
@media (min-width: 85rem) {
.icon-access-summary-arrow {
display:none
}
}
.icon-access-content {
--grid-gutter: 0;
--grid-row-gutter: 0;
grid-template-columns: repeat(var(--grid-columns),1fr);
grid-column: 1/-1
}
.icon-access-content[aria-hidden=true] {
display: none
}
@media (min-width: 55rem) {
.icon-access-content {
grid-row:3/3
}
}
.icon-access-text {
grid-column: 1/-1;
align-self: center;
padding: 2rem
}
@media (min-width: 55rem) {
.icon-access-text {
grid-area:1/1/-1/5
}
}
.icon-access-media {
grid-column: 1/-1
}
@media (min-width: 55rem) {
.icon-access-media {
grid-area:1/5/-1/-1
}
}
.icon-access-media img {
object-fit: cover;
aspect-ratio: 644/426;
width: 100%;
height: 100%
}
.image-breaker {
position: relative
}
.image-breaker-content {
color: var(--color-white);
grid-area: 1/2/-1/-2;
align-self: center;
padding-block-start:4rem;padding-block-end:4rem}
@media (min-width: 55rem) {
.image-breaker-content {
grid-column:2/10;
padding-block-start:6rem;padding-block-end:6rem}
}
@media (min-width: 70rem) {
.image-breaker-content {
grid-column:2/8;
padding-block-start:8rem;padding-block-end:8rem}
}
.image-breaker-media {
grid-area: 1/1/-1/-1;
position: relative
}
.image-breaker-media:after {
content: "";
animation: fade-in 3s var(--ease-out-expo)forwards;
background: linear-gradient(90deg,#000c 0%,#0000 100%);
position: absolute;
top: 0%;
bottom: 0;
left: 0%;
right: 0%
}
.image-breaker-media img {
object-fit: cover;
width: 100%;
height: 100%
}
.teaser-grid {
--grid-row-gutter: 5rem;
grid-column: 2/-2;
grid-template-columns: repeat(auto-fill,minmax(min(15rem,100%),1fr))
}
@media (min-width: 55rem) {
.teaser-grid {
grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr))
}
}
.teaser-grid+.teaser-grid {
margin-top: var(--grid-row-gutter)
}
.teaser-grid-uneven>.teaser {
align-self: flex-start
}
.teaser-grid-loadmore .teaser:nth-child(n+5),.teaser-grid:not(.teaser-grid-loadmore) .teaser-grid-loadmore-button {
display: none
}
.teaser-grid-employees {
--grid-gutter: 5rem
}
.teaser-grid-prefix,.teaser-grid-suffix {
grid-column: 1/-1
}
.layout-sticky-aside {
background-color: var(--color-grey);
grid-column: 1/-1;
position: relative
}
.layout-sticky-aside:before {
content: "";
background-color: inherit;
width: 200vw;
height: 100%;
position: absolute;
top: 0;
left: 0;
transform: translate(-50%)
}
@media (min-width: 55rem) {
.layout-sticky-aside {
grid-column:1/6;
padding-inline-end:var(--grid-gutter)}
.layout-sticky-aside: before {
transform:translate(-100%)
}
}
@media (min-width: 70rem) {
.layout-sticky-aside {
grid-column:1/5
}
}
@media not (min-width: 55rem) {
.layout-sticky-aside-reverse {
grid-row:2/2
}
}
.layout-sticky-aside-inner {
padding-block:var(--grid-row-gutter);position: sticky;
top: 0
}
@media (min-width: 55rem) {
.layout-sticky-aside-inner {
padding-block-start:3.5rem;
padding-block-end:10rem}
}
@media (min-width: 55rem) {
.layout-sticky-aside-pulled .layout-sticky-aside-inner {
margin-block-start:-9rem;
padding-block-start:12.5rem}
}
.layout-sticky-aside-pulled .layout-sticky-image {
margin-block-start:-7.5rem;margin-inline-start:auto;margin-inline-end:auto}
@media (min-width: 40rem) {
.layout-sticky-aside-pulled .layout-sticky-image {
margin-block-start:-9rem
}
}
@media (min-width: 55rem) {
.layout-sticky-aside-pulled .layout-sticky-image {
margin-block-start:-10rem
}
}
.layout-sticky-aside-pulled .layout-sticky-logo {
margin-block-start:-7.5rem;margin-inline-start:auto;margin-inline-end:auto}
@media (min-width: 40rem) {
.layout-sticky-aside-pulled .layout-sticky-logo {
margin-block-start:-9rem
}
}
@media (min-width: 55rem) {
.layout-sticky-aside-pulled .layout-sticky-logo {
margin-block-start:-10rem
}
}
.layout-sticky-image {
max-width: 14em;
display: flex
}
.layout-sticky-logo {
background-color: var(--color-blue);
border-radius: var(--border-radius-circle);
max-width: 12rem;
padding: 1rem;
display: flex
}
@media (min-width: 40rem) {
.layout-sticky-logo {
max-width:14rem
}
}
.layout-sticky-logo img {
object-fit: contain
}
.layout-sticky-main {
grid-column: 1/-1
}
@media (min-width: 55rem) {
.layout-sticky-main {
grid-column:6/-2;
padding-block-end:10rem}
}
.layout-sidebar-main {
grid-column: 1/-1
}
@media (min-width: 40rem) {
.layout-sidebar-main {
grid-column:2/-2
}
}
@media (min-width: 55rem) {
.layout-sidebar-main {
grid-column:2/-4
}
}
.layout-sidebar-aside {
border-bottom: 1px solid hsla(var(--color-blue-base),.25);
grid-column: 1/-1;
margin-block-end:2rem;padding-block-end:calc(2rem + var(--grid-row-gutter))}
@media (min-width: 40rem) {
.layout-sidebar-aside {
grid-column:2/-2;
margin-block-end:4rem;padding-block-end:calc(4rem + var(--grid-row-gutter))}
}
@media (min-width: 70rem) {
.layout-sidebar-aside {
grid-column:2/-4
}
}
.layout-sidebar-intro {
gap: var(--grid-row-gutter);
flex-direction: column;
width: 100%;
display: flex
}
@media (min-width: 40rem) {
.layout-sidebar-intro {
flex-direction:row
}
}
.layout-sidebar-intro-image {
flex: 0 60%;
max-width: 20rem
}
.layout-sidebar-intro-content {
flex: 0 40%
}
@media (min-width: 40rem) {
.layout-sidebar-intro-content {
align-self:center
}
}
.layout-content-centered {
grid-column: 1/-1
}
@media (min-width: 40rem) {
.layout-content-centered {
grid-column:2/-2
}
}
.layout-content-centered-sm {
grid-column: 1/-1
}
@media (min-width: 40rem) {
.layout-content-centered-sm {
grid-column:2/-2
}
}
@media (min-width: 55rem) {
.layout-content-centered-sm {
grid-column:3/-3
}
}
.sidebar .layout-content-centered-sm {
grid-column: 1/-1
}
@media (min-width: 40rem) {
.sidebar .layout-content-centered-sm {
grid-column:2/-4
}
}
.layout-content-full {
grid-column: 1/-1
}
.layout-vacancy-hero {
grid-template-areas: "title title title title title title title title"
}
@media (min-width: 40rem) {
.layout-vacancy-hero {
grid-template-areas:"title title title title title title title title title title title title"
}
}
@media (min-width: 55rem) {
.layout-vacancy-hero {
grid-template-areas:".title title title title title title.aside aside aside aside"
}
}
.vacancy-title {
z-index: 1;
grid-area: title;
align-self: end;
padding-block-end:3rem;position: relative
}
.vacancy-hero {
--gradient-dir: to top;
aspect-ratio: 375/265;
position: relative
}
.vacancy-hero:after {
content: "";
opacity: .9;
background: linear-gradient(var(--gradient-dir),#16161680 34.41%,#112b4d00 71.77%,#16161680 99.62%)left center/100% no-repeat;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
@media (min-width: 40rem) {
.vacancy-hero {
aspect-ratio:375/265
}
}
@media (min-width: 55rem) {
.vacancy-hero {
--gradient-dir:to right;
aspect-ratio: 1440/440
}
}
@media (min-height: 64rem) {
.vacancy-hero {
aspect-ratio:1440/520
}
}
.vacancy-hero-media {
object-fit: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.layout-vacancy {
grid-template-areas: "aside aside aside aside aside aside aside aside""main main main main main main main main"
}
@media (min-width: 40rem) {
.layout-vacancy {
grid-template-areas:"aside aside aside aside aside aside aside aside aside aside aside aside""main main main main main main main main main main main main"
}
}
@media (min-width: 55rem) {
.layout-vacancy {
grid-template-areas:".main main main main main main main aside aside aside aside"
}
}
@media (min-width: 70rem) {
.layout-vacancy {
grid-template-areas:".main main main main main main.aside aside aside aside"
}
}
.vacancy-main {
grid-area: main
}
.vacancy-main .prose li {
font-size: .875rem
}
.vacancy-aside {
--offset: 12rem;
z-index: 2;
grid-area: aside;
align-self: flex-start;
margin-block-end:4rem;padding-block-start:1rem;padding-block-end:1rem;position: relative
}
@media (min-height: 40rem) {
.vacancy-aside {
padding-block-start:3rem;
padding-block-end:3rem}
}
@media not (min-width: 55rem) {
.vacancy-aside:before {
content:"";
background-color: inherit;
top: 0;
left: calc(var(--grid-margin)*-1);
z-index: -1;
width: 100vw;
height: 100%;
position: absolute
}
}
@media (min-width: 55rem) {
.vacancy-aside {
margin-top:calc(var(--offset)*-1);
padding-inline-start:2.5rem;padding-inline-end:2.5rem;position: sticky;
top: 3.25rem
}
}
@media not (min-height: 42rem) {
.vacancy-aside {
top:0
}
}
@media (min-width: 55rem) {
.vacancy-summary {
padding-block-start:2.5rem
}
}
.locations-title {
text-align: center;
z-index: 1;
grid-area: 1/1/1/-1
}
@media not (min-width: 55rem) {
.locations-title {
align-self:end;
transform: translateY(25%)
}
}
@media (min-width: 40rem) {
.locations-title {
grid-column:2/-2
}
}
@media (min-width: 55rem) {
.locations-title {
grid-column:3/-3;
margin-block-end:6rem}
}
.locations-list {
z-index: 1;
grid-column: 1/-1;
position: relative
}
@media not (min-width: 55rem) {
.locations-list {
margin-block-start:4rem
}
}
@media (min-width: 55rem) {
.locations-list {
grid-area:2/2/2/10
}
.locations-list li:not(:first-child) {
margin-block-start:1rem}
}
@media (min-width: 70rem) {
.locations-list {
grid-column:2/8
}
}
.location-item {
transition: border .2s
}
@media not (min-width: 55rem) {
.location-item {
border-bottom:1px solid #ffffff40
}
.location-item:hover {
border-color: var(--color-white)
}
}
@media (min-width: 55rem) {
.location-item {
gap:var(--grid-gutter);
display: flex
}
}
.location-item[open] .location-summary:hover .location-title {
transform: translate(0)
}
.location-item[open] .location-title:before {
transform-origin: 0%;
transform: scale(1)
}
.location-item[open] .location-icon {
transform: rotate(90deg)
}
.location-summary {
transition: transform .2s
}
@media not (min-width: 55rem) {
.location-summary {
justify-content:space-between;
align-items: center;
padding-block-start:.75rem;padding-block-end:.75rem;display: flex
}
@media (any-hover: hover) {
.location-summary:hover .location-title {
transform:translate(1rem)
}
}
}
@media (min-width: 55rem) {
.location-summary:focus-visible .location-title:before {
transform-origin:0%;
transform: scale(1)
}
}
.location-title {
transition: transform .2s
}
@media not (min-width: 55rem) {
.location-title {
font-size:1rem
}
.location-title:before {
display: none
}
}
@media (min-width: 55rem) {
.location-title {
display:inline-flex
}
}
.location-icon {
transition: transform .2s
}
@media (min-width: 55rem) {
.location-icon {
display:none
}
}
@media not (min-width: 55rem) {
.location-content {
padding-block-start:1rem;
padding-block-end:3rem;font-size: .875rem
}
}
@media (min-width: 55rem) {
.location-content {
width:66.6667%;
position: absolute;
top: 0;
left: 33.3333%
}
}
.locations-map {
grid-area: 1/1/1/-1;
align-self: center;
position: relative
}
@media (min-width: 55rem) {
.locations-map {
width:calc(100% + var(--grid-margin));
grid-area: 2/5/2/-1
}
}
.locations-map img {
mix-blend-mode: soft-light;
width: 100%
}
@media (min-width: 55rem) {
.locations-map-full {
grid-column:1/-1
}
}
.location-pin {
background: var(--color-pink);
border-radius: var(--border-radius-circle);
aspect-ratio: 1;
height: 1.5%;
transition: transform .3s var(--ease-out-cubic);
left: calc(var(--x)*100%);
top: calc(var(--y)*100%);
position: absolute
}
.location-pin:before {
border-radius: var(--border-radius-circle);
content: "";
width: 100%;
height: 100%;
animation: 2s infinite pulse;
position: absolute;
top: 0;
left: 0;
transform: scale(1);
box-shadow: 0 0 #e4b9d4
}
.location-pin.is-active {
transform: scale(3)
}
.map {
--grid-row-gutter: var(--grid-row-gutter-lg);
z-index: 1
}
.map-media {
grid-column: 1/-1;
margin-block-start:4rem;position: relative
}
@media (min-width: 55rem) {
.map-media {
grid-column:2/-2
}
}
@keyframes pulse {
0% {
transform: scale(.9);
box-shadow: 0 0 #e4b9d4b3
}
70% {
transform: scale(1);
box-shadow: 0 0 0 10px #e4b9d400
}
to {
transform: scale(.9);
box-shadow: 0 0 #e4b9d400
}
}
.market-developments-yaxis-title {
margin-block-end:1rem}
.market-developments-badge {
border-radius: var(--border-radius-circle);
aspect-ratio: 1;
text-align: center;
-webkit-user-select: none;
user-select: none;
z-index: -1;
flex-direction: column;
justify-content: center;
align-items: center;
gap: .25rem;
padding: .75rem;
display: inline-flex;
position: absolute;
top: 2rem;
right: 0
}
@media (min-width: 40rem) {
.market-developments-badge {
padding:1rem;
top: 0
}
}
.market-developments-tooltip-header {
justify-content: space-between;
align-items: baseline;
display: flex
}
.market-developments-v2 {
position: relative
}
.market-developments-v2-summer,.market-developments-v2-winter {
z-index: 1;
max-width: 100px;
height: max(5rem,min(3.913rem + 5.4348vw,8.125rem));
position: absolute;
top: 20%
}
:is(.market-developments-v2-summer,.market-developments-v2-winter) img {
object-fit: contain;
width: 100%;
height: 100%
}
.market-developments-v2-summer {
left: 15%
}
.market-developments-v2-winter {
right: 15%
}
.market-developments-v2-average {
z-index: 1;
height: 20px;
position: absolute;
bottom: 12.5%;
left: 50px;
right: 32px
}
.market-developments-v2-average:before {
content: "";
background: linear-gradient(90deg,#0000 50%,#fff 50%) 0 0/12px 2px;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
left: 0
}
.market-developments-v2-chart-wrapper {
width: calc(100% - 1rem);
height: calc(100vh - 320px);
margin-inline-start:-.5rem;position: relative
}
[data-a11y-dialog-native] .modal-overlay {
display: none
}
.modal[aria-hidden=true] {
pointer-events: none
}
.modal:not([data-a11y-dialog-native]),.modal-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.modal {
z-index: 3;
display: flex
}
.modal-overlay {
background-color: hsla(var(--color-blue-base),.8)
}
dialog::backdrop {
background-color: hsla(var(--color-blue-base),.8)
}
.modal-content {
background-color: var(--color-blue);
z-index: 3;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
margin: auto;
display: flex;
position: absolute;
top: 0;
right: 0
}
@keyframes scale-in {
0% {
opacity: 0;
transform: scale(.5)
}
}
@keyframes scale-out {
to {
opacity: 0;
transform: scale(.5)
}
}
.modal-overlay {
animation: .2s both fade-in
}
.modal[aria-hidden=true] .modal-overlay {
animation: forwards fade-out
}
.modal[aria-hidden=true].is-ready .modal-overlay {
animation-duration: .2s
}
.modal-content {
animation: .4s .2s both scale-in
}
.modal[aria-hidden=true] .modal-content {
animation: forwards scale-out,forwards scale-out
}
.modal[aria-hidden=true].is-ready .modal-content {
animation-duration: .2s,.2s
}
.modal-close {
background-color: var(--color-pink);
border-radius: var(--border-radius-circle);
z-index: 1;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
transition: all .15s;
display: flex;
position: absolute;
top: 2rem;
right: 2rem
}
.modal-inner {
aspect-ratio: 16/9;
max-width: 100%;
height: 100%;
display: grid;
position: relative
}
.modal-inner .plyr {
align-self: center
}
.newsletter-signup-title,.newsletter-signup-form {
grid-column: 1/-1
}
.newsletter-signup-submit {
gap: var(--grid-gutter);
flex-direction: column;
display: flex
}
@media (min-width: 30rem) {
.newsletter-signup-submit {
flex-direction:row
}
}
@media (min-width: 55rem) {
.newsletter-signup-title {
grid-column:1/6
}
.newsletter-signup-form {
grid-column: 6/-1
}
}
@media (min-width: 70rem) {
.newsletter-signup-form {
grid-column:7/-2
}
}
:root {
--plyr-color-main: var(--color-pink);
--plyr-audio-controls-background: transparent;
--plyr-video-background: transparent;
--plyr-video-control-background-hover: var(--color-pink-dark);
--plyr-video-control-color: var(--color-bordeaux);
--plyr-range-fill-background: var(--color-pink-dark)
}
@keyframes plyr-progress {
to {
background-position: 25px 0;
background-position: var(--plyr-progress-loading-size,25px)0
}
}
@keyframes plyr-popup {
0% {
opacity: .5;
transform: translateY(10px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes plyr-fade-in {
0% {
opacity: 0
}
to {
opacity: 1
}
}
.plyr {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: inherit;
font-family: var(--plyr-font-family,inherit);
font-variant-numeric: tabular-nums;
font-weight: 400;
font-weight: var(--plyr-font-weight-regular,400);
line-height: 1.7;
line-height: var(--plyr-line-height,1.7);
min-width: 200px;
max-width: 100%;
text-shadow: none;
z-index: 0;
direction: ltr;
flex-direction: column;
align-items: center;
transition: box-shadow .3s;
display: flex;
position: relative
}
.plyr audio,.plyr iframe,.plyr video {
width: 100%;
height: 100%;
display: block
}
.plyr button {
font: inherit;
line-height: inherit;
width: auto
}
.plyr:focus {
outline: 0
}
.plyr--full-ui {
box-sizing: border-box
}
.plyr--full-ui *,.plyr--full-ui :after,.plyr--full-ui :before {
box-sizing: inherit
}
.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label {
touch-action: manipulation
}
.plyr__badge {
background: #4a5464;
background: var(--plyr-badge-background,#4a5464);
border-radius: 2px;
border-radius: var(--plyr-badge-border-radius,2px);
color: var(--plyr-badge-text-color,#fff);
font-size: 9px;
font-size: var(--plyr-font-size-badge,9px);
padding: 3px 4px;
line-height: 1
}
.plyr--full-ui ::-webkit-media-text-track-container {
display: none
}
.plyr__captions {
font-size: 13px;
font-size: var(--plyr-font-size-small,13px);
padding: 10px;
padding: var(--plyr-control-spacing,10px);
text-align: center;
width: 100%;
transition: transform .4s ease-in-out;
animation: .3s plyr-fade-in;
display: none;
position: absolute;
bottom: 0;
left: 0
}
.plyr__captions span:empty {
display: none
}
@media (min-width: 480px) {
.plyr__captions {
font-size:15px;
font-size: var(--plyr-font-size-base,15px);
padding: 20px;
padding: calc(var(--plyr-control-spacing,10px)*2)
}
}
@media (min-width: 768px) {
.plyr__captions {
font-size:18px;
font-size: var(--plyr-font-size-large,18px)
}
}
.plyr--captions-active .plyr__captions {
display: block
}
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions {
transform: translateY(-40px);
transform: translateY(calc(var(--plyr-control-spacing,10px)*-4))
}
.plyr__caption {
background: #000c;
background: var(--plyr-captions-background,#000c);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
color: var(--plyr-captions-text-color,#fff);
white-space: pre-wrap;
border-radius: 2px;
padding: .2em .5em;
line-height: 185%
}
.plyr__caption div {
display: inline
}
.plyr__control {
border-radius: 3px;
border-radius: var(--plyr-control-radius,3px);
color: var(--color-white);
cursor: pointer;
padding: 7px;
padding: calc(var(--plyr-control-spacing,10px)*.7);
background: 0 0;
border: 0;
flex-shrink: 0;
transition: all .3s;
position: relative;
overflow: visible
}
.plyr__control svg {
fill: currentColor;
height: 18px;
height: var(--plyr-control-icon-size,18px);
pointer-events: none;
width: 18px;
width: var(--plyr-control-icon-size,18px);
display: block
}
.plyr__control:focus {
outline: 0
}
.plyr__control.plyr__tab-focus {
outline: 3px dotted #00b3ff;
outline: var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)))dotted 3px;
outline-offset: 2px
}
a.plyr__control {
text-decoration: none
}
.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed,a.plyr__control:after,a.plyr__control:before {
display: none
}
.plyr--full-ui ::-webkit-media-controls {
display: none
}
.plyr__controls {
text-align: center;
justify-content: flex-end;
align-items: center;
display: flex
}
.plyr__controls .plyr__progress__container {
flex: 1;
min-width: 0
}
.plyr__controls .plyr__controls__item {
margin-left: 2.5px;
margin-left: calc(var(--plyr-control-spacing,10px)/4)
}
.plyr__controls .plyr__controls__item:first-child {
margin-left: 0;
margin-right: auto
}
.plyr__controls .plyr__controls__item.plyr__progress__container {
padding-left: 2.5px;
padding-left: calc(var(--plyr-control-spacing,10px)/4)
}
.plyr__controls .plyr__controls__item.plyr__time {
padding: 0 5px;
padding: 0 calc(var(--plyr-control-spacing,10px)/2)
}
.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,.plyr__controls .plyr__controls__item.plyr__time:first-child {
padding-left: 0
}
.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip],.plyr__controls:empty {
display: none
}
.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip] {
display: inline-block
}
.plyr__menu {
display: flex;
position: relative
}
.plyr__menu .plyr__control svg {
transition: transform .3s
}
.plyr__menu .plyr__control[aria-expanded=true] svg {
transform: rotate(90deg)
}
.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {
display: none
}
.plyr__menu__container {
background: #ffffffe6;
background: var(--plyr-menu-background,#ffffffe6);
box-shadow: 0 1px 2px #00000026;
box-shadow: var(--plyr-menu-shadow,0 1px 2px #00000026);
color: var(--plyr-menu-color,#4a5464);
font-size: 15px;
font-size: var(--plyr-font-size-base,15px);
text-align: left;
white-space: nowrap;
z-index: 3;
border-radius: 4px;
margin-bottom: 10px;
animation: .2s plyr-popup;
position: absolute;
bottom: 100%;
right: -3px
}
.plyr__menu__container>div {
transition: height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1);
overflow: hidden
}
.plyr__menu__container:after {
border: 4px solid #0000;
border-top-color: #ffffffe6;
border: var(--plyr-menu-arrow-size,4px)solid transparent;
border-top-color: var(--plyr-menu-background,#ffffffe6);
content: "";
height: 0;
right: 14px;
right: calc(var(--plyr-control-icon-size,18px)/2 + var(--plyr-control-spacing,10px)*.7 - var(--plyr-menu-arrow-size,4px)/2);
width: 0;
position: absolute;
top: 100%
}
.plyr__menu__container [role=menu] {
padding: 7px;
padding: calc(var(--plyr-control-spacing,10px)*.7)
}
.plyr__menu__container [role=menuitem],.plyr__menu__container [role=menuitemradio] {
margin-top: 2px
}
.plyr__menu__container [role=menuitem]:first-child,.plyr__menu__container [role=menuitemradio]:first-child {
margin-top: 0
}
.plyr__menu__container .plyr__control {
color: var(--plyr-menu-color,#4a5464);
font-size: 13px;
font-size: var(--plyr-font-size-menu,var(--plyr-font-size-small,13px));
padding: 4.66667px 10.5px;
padding: calc(var(--plyr-control-spacing,10px)*.7/1.5)calc(var(--plyr-control-spacing,10px)*.7*1.5);
-webkit-user-select: none;
user-select: none;
align-items: center;
width: 100%;
display: flex
}
.plyr__menu__container .plyr__control>span {
align-items: inherit;
width: 100%;
display: flex
}
.plyr__menu__container .plyr__control:after {
border: 4px solid #0000;
border: var(--plyr-menu-item-arrow-size,4px)solid transparent;
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%)
}
.plyr__menu__container .plyr__control--forward {
padding-right: 28px;
padding-right: calc(var(--plyr-control-spacing,10px)*.7*4)
}
.plyr__menu__container .plyr__control--forward:after {
border-left-color: #728197;
border-left-color: var(--plyr-menu-arrow-color,#728197);
right: 6.5px;
right: calc(var(--plyr-control-spacing,10px)*.7*1.5 - var(--plyr-menu-item-arrow-size,4px))
}
.plyr__menu__container .plyr__control--forward.plyr__tab-focus:after,.plyr__menu__container .plyr__control--forward:hover:after {
border-left-color: currentColor
}
.plyr__menu__container .plyr__control--back {
font-weight: 400;
font-weight: var(--plyr-font-weight-regular,400);
margin: 7px;
margin: calc(var(--plyr-control-spacing,10px)*.7);
margin-bottom: 3.5px;
margin-bottom: calc(var(--plyr-control-spacing,10px)*.7/2);
padding-left: 28px;
padding-left: calc(var(--plyr-control-spacing,10px)*.7*4);
width: calc(100% - 14px);
width: calc(100% - var(--plyr-control-spacing,10px)*.7*2);
position: relative
}
.plyr__menu__container .plyr__control--back:after {
border-right-color: #728197;
border-right-color: var(--plyr-menu-arrow-color,#728197);
left: 6.5px;
left: calc(var(--plyr-control-spacing,10px)*.7*1.5 - var(--plyr-menu-item-arrow-size,4px))
}
.plyr__menu__container .plyr__control--back:before {
background: #dcdfe5;
background: var(--plyr-menu-back-border-color,#dcdfe5);
box-shadow: 0 1px #fff;
box-shadow: 0 1px 0 var(--plyr-menu-back-border-shadow-color,#fff);
content: "";
height: 1px;
margin-top: 3.5px;
margin-top: calc(var(--plyr-control-spacing,10px)*.7/2);
position: absolute;
top: 100%;
left: 0;
right: 0;
overflow: hidden
}
.plyr__menu__container .plyr__control--back.plyr__tab-focus:after,.plyr__menu__container .plyr__control--back:hover:after {
border-right-color: currentColor
}
.plyr__menu__container .plyr__control[role=menuitemradio] {
padding-left: 7px;
padding-left: calc(var(--plyr-control-spacing,10px)*.7)
}
.plyr__menu__container .plyr__control[role=menuitemradio]:after,.plyr__menu__container .plyr__control[role=menuitemradio]:before {
border-radius: 100%
}
.plyr__menu__container .plyr__control[role=menuitemradio]:before {
content: "";
height: 16px;
margin-right: 10px;
margin-right: var(--plyr-control-spacing,10px);
background: #0000001a;
flex-shrink: 0;
width: 16px;
transition: all .3s;
display: block
}
.plyr__menu__container .plyr__control[role=menuitemradio]:after {
opacity: 0;
background: #fff;
border: 0;
width: 6px;
height: 6px;
transition: transform .3s,opacity .3s;
top: 50%;
left: 12px;
transform: translateY(-50%)scale(0)
}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before {
background: #00b3ff;
background: var(--plyr-control-toggle-checked-background,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)))
}
.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after {
opacity: 1;
transform: translateY(-50%)scale(1)
}
.plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus:before,.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before {
background: #23282f1a
}
.plyr__menu__container .plyr__menu__value {
margin-left: auto;
margin-right: calc(-7px + 2);
margin-right: calc(var(--plyr-control-spacing,10px)*.7*-1 - -2);
padding-left: 24.5px;
padding-left: calc(var(--plyr-control-spacing,10px)*.7*3.5);
pointer-events: none;
align-items: center;
display: flex;
overflow: hidden
}
.plyr--full-ui input[type=range] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 26px;
border-radius: calc(var(--plyr-range-thumb-height,13px)*2);
color: var(--plyr-range-fill-background,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
height: 19px;
height: calc(var(--plyr-range-thumb-active-shadow-width,3px)*2 + var(--plyr-range-thumb-height,13px));
background: 0 0;
border: 0;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
transition: box-shadow .3s;
display: block
}
.plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
background: 0 0;
background-image: linear-gradient(90deg,currentColor 0,var(--color-darker-grey)0);
background-image: linear-gradient(to right,currentColor var(--value,0),var(--color-darker-grey)var(--value,0));
border-radius: 2.5px;
border-radius: calc(var(--plyr-range-track-height,5px)/2);
height: 5px;
height: var(--plyr-range-track-height,5px);
-webkit-user-select: none;
user-select: none;
border: 0;
transition: box-shadow .3s
}
.plyr--full-ui input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #fff;
background: var(--plyr-range-thumb-background,#fff);
box-shadow: 0 1px 1px 0 0 0 1px #23282f26 #23282f33;
box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);
height: 13px;
height: var(--plyr-range-thumb-height,13px);
margin-top: -4px;
margin-top: calc(var(--plyr-range-thumb-height,13px)/2*-1 - var(--plyr-range-track-height,5px)/2*-1);
width: 13px;
width: var(--plyr-range-thumb-height,13px);
border: 0;
border-radius: 100%;
transition: all .2s;
position: relative
}
.plyr--full-ui input[type=range]::-moz-range-track {
border-radius: 2.5px;
border-radius: calc(var(--plyr-range-track-height,5px)/2);
height: 5px;
height: var(--plyr-range-track-height,5px);
-webkit-user-select: none;
user-select: none;
background: 0 0;
border: 0;
transition: box-shadow .3s
}
.plyr--full-ui input[type=range]::-moz-range-thumb {
background: #fff;
background: var(--plyr-range-thumb-background,#fff);
box-shadow: 0 1px 1px 0 0 0 1px #23282f26 #23282f33;
box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);
height: 13px;
height: var(--plyr-range-thumb-height,13px);
width: 13px;
width: var(--plyr-range-thumb-height,13px);
border: 0;
border-radius: 100%;
transition: all .2s;
position: relative
}
.plyr--full-ui input[type=range]::-moz-range-progress {
border-radius: 2.5px;
border-radius: calc(var(--plyr-range-track-height,5px)/2);
height: 5px;
height: var(--plyr-range-track-height,5px);
background: currentColor
}
.plyr--full-ui input[type=range]::-ms-track {
color: #0000
}
.plyr--full-ui input[type=range]::-ms-fill-upper {
border-radius: 2.5px;
border-radius: calc(var(--plyr-range-track-height,5px)/2);
height: 5px;
height: var(--plyr-range-track-height,5px);
-webkit-user-select: none;
user-select: none;
background: 0 0;
border: 0;
transition: box-shadow .3s
}
.plyr--full-ui input[type=range]::-ms-track {
border-radius: 2.5px;
border-radius: calc(var(--plyr-range-track-height,5px)/2);
height: 5px;
height: var(--plyr-range-track-height,5px);
-webkit-user-select: none;
user-select: none;
background: 0 0;
border: 0;
transition: box-shadow .3s
}
.plyr--full-ui input[type=range]::-ms-fill-lower {
border-radius: 2.5px;
border-radius: calc(var(--plyr-range-track-height,5px)/2);
height: 5px;
height: var(--plyr-range-track-height,5px);
-webkit-user-select: none;
user-select: none;
background: currentColor;
border: 0;
transition: box-shadow .3s
}
.plyr--full-ui input[type=range]::-ms-thumb {
background: #fff;
background: var(--plyr-range-thumb-background,#fff);
box-shadow: 0 1px 1px 0 0 0 1px #23282f26 #23282f33;
box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);
height: 13px;
height: var(--plyr-range-thumb-height,13px);
width: 13px;
width: var(--plyr-range-thumb-height,13px);
border: 0;
border-radius: 100%;
margin-top: 0;
transition: all .2s;
position: relative
}
.plyr--full-ui input[type=range]::-ms-tooltip {
display: none
}
.plyr--full-ui input[type=range]::-moz-focus-outer {
border: 0
}
.plyr--full-ui input[type=range]:focus {
outline: 0
}
.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
outline: 3px dotted #00b3ff;
outline: var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)))dotted 3px;
outline-offset: 2px
}
.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
outline: 3px dotted #00b3ff;
outline: var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)))dotted 3px;
outline-offset: 2px
}
.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
outline: 3px dotted #00b3ff;
outline: var(--plyr-tab-focus-color,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)))dotted 3px;
outline-offset: 2px
}
.plyr__poster {
background-color: #000;
background-color: var(--plyr-video-background,var(--plyr-video-background,#000));
opacity: 0;
z-index: 1;
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 100%;
transition: opacity .2s;
position: absolute;
top: 0;
left: 0
}
.plyr--stopped.plyr__poster-enabled .plyr__poster {
opacity: 1
}
.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster {
display: none
}
.plyr__time {
font-size: 13px;
font-size: var(--plyr-font-size-time,var(--plyr-font-size-small,13px))
}
.plyr__time+.plyr__time:before {
content: "⁄";
margin-right: 10px;
margin-right: var(--plyr-control-spacing,10px)
}
@media (max-width: 767px) {
.plyr__time+.plyr__time {
display:none
}
}
.plyr__tooltip {
background: #ffffffe6;
background: var(--plyr-tooltip-background,#ffffffe6);
border-radius: 3px;
border-radius: var(--plyr-tooltip-radius,3px);
box-shadow: 0 1px 2px #00000026;
box-shadow: var(--plyr-tooltip-shadow,0 1px 2px #00000026);
color: var(--plyr-tooltip-color,#4a5464);
font-size: 13px;
font-size: var(--plyr-font-size-small,13px);
font-weight: 400;
font-weight: var(--plyr-font-weight-regular,400);
margin-bottom: 10px;
margin-bottom: calc(var(--plyr-control-spacing,10px)/2*2);
opacity: 0;
padding: 5px 7.5px;
padding: calc(var(--plyr-control-spacing,10px)/2)calc(var(--plyr-control-spacing,10px)/2*1.5);
pointer-events: none;
transform-origin: 50% 100%;
white-space: nowrap;
z-index: 2;
line-height: 1.3;
transition: transform .2s .1s,opacity .2s .1s;
position: absolute;
bottom: 100%;
left: 50%;
transform: translate(-50%,10px)scale(.8)
}
.plyr__tooltip:before {
border-left: 4px solid #0000;
border-left: var(--plyr-tooltip-arrow-size,4px)solid transparent;
border-right: 4px solid #0000;
border-right: var(--plyr-tooltip-arrow-size,4px)solid transparent;
border-top: 4px solid #ffffffe6;
border-top: var(--plyr-tooltip-arrow-size,4px)solid var(--plyr-tooltip-background,#ffffffe6);
bottom: -4px;
bottom: calc(var(--plyr-tooltip-arrow-size,4px)*-1);
content: "";
z-index: 2;
width: 0;
height: 0;
position: absolute;
left: 50%;
transform: translate(-50%)
}
.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible {
opacity: 1;
transform: translate(-50%)scale(1)
}
.plyr .plyr__control:hover .plyr__tooltip {
z-index: 3
}
.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip,.plyr__controls>.plyr__control:first-child .plyr__tooltip {
transform-origin: 0 100%;
left: 0;
transform: translateY(10px)scale(.8)
}
.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip:before,.plyr__controls>.plyr__control:first-child .plyr__tooltip:before {
left: 16px;
left: calc(var(--plyr-control-icon-size,18px)/2 + var(--plyr-control-spacing,10px)*.7)
}
.plyr__controls>.plyr__control:last-child .plyr__tooltip {
transform-origin: 100% 100%;
left: auto;
right: 0;
transform: translateY(10px)scale(.8)
}
.plyr__controls>.plyr__control:last-child .plyr__tooltip:before {
left: auto;
right: 16px;
right: calc(var(--plyr-control-icon-size,18px)/2 + var(--plyr-control-spacing,10px)*.7);
transform: translate(50%)
}
.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip {
transform: translate(0)scale(1)
}
.plyr__progress {
left: 6.5px;
left: calc(var(--plyr-range-thumb-height,13px)*.5);
margin-right: 13px;
margin-right: var(--plyr-range-thumb-height,13px);
position: relative
}
.plyr__progress__buffer,.plyr__progress input[type=range] {
margin-left: -6.5px;
margin-left: calc(var(--plyr-range-thumb-height,13px)*-.5);
margin-right: -6.5px;
margin-right: calc(var(--plyr-range-thumb-height,13px)*-.5);
width: calc(100% + 13px);
width: calc(100% + var(--plyr-range-thumb-height,13px))
}
.plyr__progress input[type=range] {
z-index: 2;
position: relative
}
.plyr__progress .plyr__tooltip {
font-size: 13px;
font-size: var(--plyr-font-size-time,var(--plyr-font-size-small,13px));
left: 0
}
.plyr__progress__buffer {
-webkit-appearance: none;
height: 5px;
height: var(--plyr-range-track-height,5px);
margin-top: -2.5px;
margin-top: calc(var(--plyr-range-track-height,5px)/2*-1);
background: 0 0;
border: 0;
border-radius: 100px;
padding: 0;
position: absolute;
top: 50%;
left: 0
}
.plyr__progress__buffer::-webkit-progress-bar {
background: 0 0
}
.plyr__progress__buffer::-webkit-progress-value {
min-width: 5px;
min-width: var(--plyr-range-track-height,5px);
background: currentColor;
border-radius: 100px;
transition: width .2s
}
.plyr__progress__buffer::-moz-progress-bar {
min-width: 5px;
min-width: var(--plyr-range-track-height,5px);
background: currentColor;
border-radius: 100px;
transition: width .2s
}
.plyr__progress__buffer::-ms-fill {
border-radius: 100px;
transition: width .2s
}
.plyr--loading .plyr__progress__buffer {
background-image: linear-gradient(-45deg,#23282f99 25%,#0000 0 50%,#23282f99 0 75%,#0000 0,#0000);
background-image: linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99)25%,transparent 25%,transparent 50%,var(--plyr-progress-loading-background,#23282f99)50%,var(--plyr-progress-loading-background,#23282f99)75%,transparent 75%,transparent);
background-repeat: repeat-x;
background-size: 25px 25px;
background-size: var(--plyr-progress-loading-size,25px)var(--plyr-progress-loading-size,25px);
color: #0000;
animation: 1s linear infinite plyr-progress
}
.plyr--video.plyr--loading .plyr__progress__buffer {
background-color: #ffffff40;
background-color: var(--plyr-video-progress-buffered-background,#ffffff40)
}
.plyr--audio.plyr--loading .plyr__progress__buffer {
background-color: #c1c8d199;
background-color: var(--plyr-audio-progress-buffered-background,#c1c8d199)
}
.plyr__volume {
align-items: center;
width: 20%;
min-width: 80px;
max-width: 110px;
display: flex;
position: relative
}
.plyr__volume input[type=range] {
margin-left: 5px;
margin-left: calc(var(--plyr-control-spacing,10px)/2);
margin-right: 5px;
margin-right: calc(var(--plyr-control-spacing,10px)/2);
z-index: 2;
position: relative
}
.plyr--is-ios .plyr__volume {
width: auto;
min-width: 0
}
.plyr--audio {
display: block
}
.plyr--audio .plyr__controls {
background: #fff;
background: var(--plyr-audio-controls-background,#fff);
border-radius: inherit;
color: var(--plyr-audio-control-color,#4a5464);
padding: 10px;
padding: var(--plyr-control-spacing,10px)
}
.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true] {
background: #00b3ff;
background: var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
color: var(--plyr-audio-control-color-hover,#fff)
}
.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {
background-color: #c1c8d199;
background-color: var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))
}
.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {
background-color: #c1c8d199;
background-color: var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))
}
.plyr--full-ui.plyr--audio input[type=range]::-ms-track {
background-color: #c1c8d199;
background-color: var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))
}
.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {
box-shadow: 0 1px 1px 0 0 0 1px #23282f26 #23282f33,0 0 0 3px #23282f1a;
box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px)var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)
}
.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {
box-shadow: 0 1px 1px 0 0 0 1px #23282f26 #23282f33,0 0 0 3px #23282f1a;
box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px)var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)
}
.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {
box-shadow: 0 1px 1px 0 0 0 1px #23282f26 #23282f33,0 0 0 3px #23282f1a;
box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px)var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)
}
.plyr--audio .plyr__progress__buffer {
color: var(--plyr-audio-progress-buffered-background,#c1c8d199)
}
.plyr--video {
background: #000;
background: var(--plyr-video-background,var(--plyr-video-background,#000));
overflow: hidden
}
.plyr--video.plyr--menu-open {
overflow: visible
}
.plyr__video-wrapper {
background: #000;
background: var(--plyr-video-background,var(--plyr-video-background,#000));
width: 100%;
height: 100%;
margin: auto;
position: relative;
overflow: hidden
}
.plyr__video-embed,.plyr__video-wrapper--fixed-ratio {
aspect-ratio: 16/9
}
@supports not (aspect-ratio: 16/9) {
.plyr__video-embed,.plyr__video-wrapper--fixed-ratio {
height:0;
padding-bottom: 56.25%;
position: relative
}
}
.plyr__video-embed iframe,.plyr__video-wrapper--fixed-ratio video {
border: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container {
padding-bottom: 240%;
position: relative;
transform: translateY(-38.2813%)
}
.plyr--video .plyr__controls {
background: linear-gradient(#0000,#000000bf);
background: var(--plyr-video-controls-background,linear-gradient(transparent,#000000bf));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: var(--plyr-video-control-color,#fff);
padding: 5px;
padding: calc(var(--plyr-control-spacing,10px)/2);
padding-top: 20px;
padding-top: calc(var(--plyr-control-spacing,10px)*2);
z-index: 3;
transition: opacity .4s ease-in-out,transform .4s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
right: 0
}
@media (min-width: 480px) {
.plyr--video .plyr__controls {
padding:10px;
padding: var(--plyr-control-spacing,10px);
padding-top: 35px;
padding-top: calc(var(--plyr-control-spacing,10px)*3.5)
}
}
.plyr--video.plyr--hide-controls .plyr__controls {
opacity: 0;
pointer-events: none;
transform: translateY(100%)
}
.plyr--video .plyr__control.plyr__tab-focus,.plyr--video .plyr__control:hover,.plyr--video .plyr__control[aria-expanded=true] {
background: #00b3ff;
background: var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
color: var(--plyr-video-control-color-hover,#fff)
}
.plyr__control--overlaid {
background: #00b3ff;
background: var(--plyr-video-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b3ff)));
color: var(--plyr-video-control-color,#fff);
opacity: .9;
padding: 15px;
padding: calc(var(--plyr-control-spacing,10px)*1.5);
z-index: 2;
border: 0;
border-radius: 100%;
transition: all .3s;
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
.plyr__control--overlaid svg {
position: relative;
left: 2px
}
.plyr__control--overlaid:focus,.plyr__control--overlaid:hover {
opacity: 1
}
.plyr--playing .plyr__control--overlaid {
opacity: 0;
visibility: hidden
}
.plyr--full-ui.plyr--video .plyr__control--overlaid {
display: block
}
.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {
background-color: #ffffff40;
background-color: var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))
}
.plyr--full-ui.plyr--video input[type=range]::-moz-range-track {
background-color: #ffffff40;
background-color: var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))
}
.plyr--full-ui.plyr--video input[type=range]::-ms-track {
background-color: #ffffff40;
background-color: var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))
}
.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {
box-shadow: 0 1px 1px 0 0 0 1px #23282f26 #23282f33,0 0 0 3px #ffffff80;
box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px)var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)
}
.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {
box-shadow: 0 1px 1px 0 0 0 1px #23282f26 #23282f33,0 0 0 3px #ffffff80;
box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px)var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)
}
.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {
box-shadow: 0 1px 1px 0 0 0 1px #23282f26 #23282f33,0 0 0 3px #ffffff80;
box-shadow: var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px)var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)
}
.plyr--video .plyr__progress__buffer {
color: var(--plyr-video-progress-buffered-background,#ffffff40)
}
.plyr:-webkit-full-screen {
background: #000;
width: 100%;
height: 100%;
margin: 0;
border-radius: 0!important
}
.plyr:fullscreen {
background: #000;
width: 100%;
height: 100%;
margin: 0;
border-radius: 0!important
}
.plyr:-webkit-full-screen video {
height: 100%
}
.plyr:fullscreen video {
height: 100%
}
.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
display: block
}
.plyr:fullscreen .plyr__control .icon--exit-fullscreen {
display: block
}
.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg {
display: none
}
.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg {
display: none
}
.plyr:-webkit-full-screen.plyr--hide-controls {
cursor: none
}
.plyr:fullscreen.plyr--hide-controls {
cursor: none
}
@media (min-width: 1024px) {
.plyr:-webkit-full-screen .plyr__captions {
font-size:21px;
font-size: var(--plyr-font-size-xlarge,21px)
}
.plyr:fullscreen .plyr__captions {
font-size: 21px;
font-size: var(--plyr-font-size-xlarge,21px)
}
}
.plyr--fullscreen-fallback {
z-index: 10000000;
background: #000;
width: 100%;
height: 100%;
margin: 0;
display: block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 0!important
}
.plyr--fullscreen-fallback video {
height: 100%
}
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
display: block
}
.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg {
display: none
}
.plyr--fullscreen-fallback.plyr--hide-controls {
cursor: none
}
@media (min-width: 1024px) {
.plyr--fullscreen-fallback .plyr__captions {
font-size:21px;
font-size: var(--plyr-font-size-xlarge,21px)
}
}
.plyr__ads {
border-radius: inherit;
cursor: pointer;
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden
}
.plyr__ads>div,.plyr__ads>div iframe {
width: 100%;
height: 100%;
position: absolute
}
.plyr__ads:after {
bottom: 10px;
bottom: var(--plyr-control-spacing,10px);
color: #fff;
content: attr(data-badge-text);
pointer-events: none;
right: 10px;
right: var(--plyr-control-spacing,10px);
z-index: 3;
background: #23282f;
border-radius: 2px;
padding: 2px 6px;
font-size: 11px;
position: absolute
}
.plyr__ads:empty:after {
display: none
}
.plyr__cues {
height: 5px;
height: var(--plyr-range-track-height,5px);
opacity: .8;
z-index: 3;
background: currentColor;
width: 3px;
display: block;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%)
}
.plyr__preview-thumb {
background-color: #ffffffe6;
background-color: var(--plyr-tooltip-background,#ffffffe6);
box-shadow: 0 1px 2px #00000026;
box-shadow: var(--plyr-tooltip-shadow,0 1px 2px #00000026);
margin-bottom: 10px;
margin-bottom: calc(var(--plyr-control-spacing,10px)/2*2);
opacity: 0;
padding: 3px;
padding: var(--plyr-tooltip-radius,3px);
pointer-events: none;
transform-origin: 50% 100%;
z-index: 2;
border-radius: 3px;
transition: transform .2s .1s,opacity .2s .1s;
position: absolute;
bottom: 100%;
transform: translateY(10px)scale(.8)
}
.plyr__preview-thumb--is-shown {
opacity: 1;
transform: translate(0)scale(1)
}
.plyr__preview-thumb:before {
border-left: 4px solid #0000;
border-left: var(--plyr-tooltip-arrow-size,4px)solid transparent;
border-right: 4px solid #0000;
border-right: var(--plyr-tooltip-arrow-size,4px)solid transparent;
border-top: 4px solid #ffffffe6;
border-top: var(--plyr-tooltip-arrow-size,4px)solid var(--plyr-tooltip-background,#ffffffe6);
bottom: -4px;
bottom: calc(var(--plyr-tooltip-arrow-size,4px)*-1);
content: "";
z-index: 2;
width: 0;
height: 0;
position: absolute;
left: 50%;
transform: translate(-50%)
}
.plyr__preview-thumb__image-container {
border-radius: 2px;
border-radius: calc(var(--plyr-tooltip-radius,3px) - 1px);
z-index: 0;
background: #c1c8d1;
position: relative;
overflow: hidden
}
.plyr__preview-thumb__image-container img {
width: 100%;
max-width: none;
height: 100%;
max-height: none;
position: absolute;
top: 0;
left: 0
}
.plyr__preview-thumb__time-container {
white-space: nowrap;
z-index: 3;
position: absolute;
bottom: 6px;
left: 0;
right: 0
}
.plyr__preview-thumb__time-container span {
border-radius: 2px;
border-radius: calc(var(--plyr-tooltip-radius,3px) - 1px);
color: #fff;
font-size: 13px;
font-size: var(--plyr-font-size-time,var(--plyr-font-size-small,13px));
background-color: #0000008c;
padding: 3px 6px
}
.plyr__preview-scrubbing {
filter: blur(1px);
opacity: 0;
pointer-events: none;
z-index: 1;
width: 100%;
height: 100%;
margin: auto;
transition: opacity .3s;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden
}
.plyr__preview-scrubbing--is-shown {
opacity: 1
}
.plyr__preview-scrubbing img {
-o-object-fit: contain;
object-fit: contain;
width: 100%;
max-width: none;
height: 100%;
max-height: none;
position: absolute;
top: 0;
left: 0
}
.plyr--no-transition {
transition: none!important
}
.plyr__sr-only {
clip: rect(1px,1px,1px,1px);
overflow: hidden;
border: 0!important;
width: 1px!important;
height: 1px!important;
padding: 0!important;
position: absolute!important
}
.plyr [hidden] {
display: none!important
}
.promo-media {
grid-area: 1/1/-1/-1;
position: relative
}
.promo-media .image-container {
top: var(--grid-margin);
position: sticky
}
.promo-media img {
object-fit: contain
}
@media (min-width: 40rem) {
.promo-media {
grid-column:2/-2
}
}
@media (min-width: 55rem) {
.promo-media {
grid-column:2/7
}
.promo-media img {
object-fit: cover;
height: 100%
}
}
@media (min-width: 70rem) {
.promo-media {
grid-column:2/6
}
}
.promo-text {
grid-column: 1/-1;
align-self: center
}
@media (min-width: 40rem) {
.promo-text {
grid-column:2/-2
}
}
@media (min-width: 55rem) {
.promo-text {
grid-area:1/7/-1/-2
}
}
@media (min-width: 55rem) {
.promo-reverse .promo-media {
grid-column:7/-2
}
}
@media (min-width: 70rem) {
.promo-reverse .promo-media {
grid-column:8/-2
}
}
@media (min-width: 55rem) {
.promo-reverse .promo-text {
grid-column:2/7
}
}
.prose strong {
display: block
}
.prose strong+br {
display: none
}
.prose p+strong {
margin-block-start:1.5em}
.prose :-webkit-any(a:not(.link-arrow),ol) {
all: revert
}
.prose :-moz-any(a:not(.link-arrow),ol) {
all: revert
}
.prose :is(a:not(.link-arrow),ol) {
all: revert
}
.prose :-webkit-any(p,ol,ul,h2,h3) {
margin-block-start:1.5em}
.prose :-moz-any(p,ol,ul,h2,h3) {
margin-block-start:1.5em}
.prose :is(p,ol,ul,h2,h3) {
margin-block-start:1.5em}
.prose>strong+* {
margin-block-start:0}
.prose>h2+*,.prose>h3+* {
margin-block-start:.5em}
.prose ul {
margin-block-start:1.5em;padding-inline-start:1rem}
.prose ul li {
list-style-type: none;
position: relative
}
.prose ul li:before {
background-color: var(--color-list-bullet);
border-radius: var(--border-radius-circle);
content: "";
width: .375rem;
height: .375rem;
position: absolute;
top: .6em;
left: -1rem
}
.vacancy :is(.prose ul) {
padding-inline-start:2rem}
.vacancy :is(.prose ul) li:before {
width: .75rem;
height: .75rem;
top: .4em;
left: -2rem;
transform: none
}
.vacancy :is(.prose ul) li+li {
margin-block-start:1.5em}
.prose a:not(.link-arrow) {
color: var(--color-pink-dark);
text-decoration: underline;
transition: color .3s
}
.prose a:not(.link-arrow):hover {
color: var(--color-pink)
}
.prose a:not(.link-arrow):visited {
color: var(--color-bordeaux)
}
.prose-red {
color: var(--color-red)
}
.prose-red a:not(.link-arrow) {
color: var(--color-red)
}
.prose-red a:not(.link-arrow):hover {
color: var(--color-bordeaux)
}
.prose-red a:not(.link-arrow):visited {
color: var(--color-red)
}
.quote {
position: relative
}
@media not (min-width: 40rem) {
.quote-circle-section {
padding-block-start:8rem;
padding-block-end:8rem}
}
.quote-text {
grid-area: 1/1/1/-1
}
@media (min-width: 40rem) {
.quote-text {
grid-column:2/-2
}
}
@media (min-width: 55rem) {
.quote-text {
grid-column:3/11
}
}
@media (min-width: 70rem) {
.quote-text {
grid-column:4/10
}
}
.quote-circle {
grid-area: 1/2/2/6
}
.quote-line {
background: currentColor;
grid-area: 2/2/2/6;
height: 1px;
transform: translateY(.65em)
}
@media not (min-width: 40rem) {
.quote-line {
display:none
}
}
@media (min-width: 55rem) {
.quote-line {
grid-column:3/6
}
}
@media (min-width: 70rem) {
.quote-line {
grid-column:4/7
}
}
.quote-citation {
grid-area: 2/1/2/-1
}
@media (min-width: 40rem) {
.quote-citation {
grid-column:6/-2
}
}
@media (min-width: 55rem) {
.quote-citation {
grid-column:6/11
}
}
@media (min-width: 70rem) {
.quote-citation {
grid-column:7/10
}
}
.quote-circle,.quote-inline-circle {
border-radius: var(--border-radius-circle);
aspect-ratio: 1;
max-height: 80vw;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translate(-50%)
}
@media (min-width: 40rem) {
:is(.quote-circle,.quote-inline-circle) {
top:-2rem;
bottom: -2rem
}
}
@media (min-width: 70rem) {
:is(.quote-circle,.quote-inline-circle) {
top:-4rem;
bottom: -4rem
}
}
.quote-image {
position: relative
}
.quote-image-text {
grid-area: 1/1/1/-1
}
@media (min-width: 40rem) {
.quote-image-text {
grid-column:1/9
}
}
@media (min-width: 55rem) {
.quote-image-text {
grid-column:2/8
}
}
.quote-image-line {
background: currentColor;
grid-area: 2/2/2/6;
height: 1px;
transform: translateY(.65em)
}
@media not (min-width: 40rem) {
.quote-image-line {
display:none
}
}
@media (min-width: 55rem) {
.quote-image-line {
grid-column:2/5
}
}
.quote-image-citation {
grid-area: 2/1/2/-1
}
@media (min-width: 40rem) {
.quote-image-citation {
grid-column:6/-2
}
}
@media (min-width: 55rem) {
.quote-image-citation {
grid-column:5/8
}
}
.quote-image-media {
grid-area: 1/9/span 3/-1
}
@media not (min-width: 40rem) {
.quote-image-media {
display:none
}
}
@media (min-width: 55rem) {
.quote-image-media {
grid-column:9/-2
}
}
.quote-inline-section {
padding-block-start:4rem;padding-block-end:4rem}
@media (min-width: 55rem) {
.quote-inline-section {
padding-block-start:6rem;
padding-block-end:6rem}
}
.quote-inline {
gap: var(--grid-gutter);
flex-direction: column;
display: flex;
position: relative
}
.quote-inline.quote-inline-bg {
padding: 1.5rem
}
@media (min-width: 40rem) {
.quote-inline.quote-inline-bg {
padding:2rem 3rem
}
}
.quote-content {
quotes: "“" "”" "‘" "’";
position: relative
}
.quote-content:before {
content: open-quote
}
.quote-content:after {
content: close-quote
}
.quote-inline-footer {
gap: var(--grid-gutter);
display: flex;
position: relative
}
.quote-inline-line {
background: currentColor;
flex: 1;
height: 1px;
transform: translateY(.8em)
}
@media not (min-width: 40rem) {
.quote-inline-line {
display:none
}
}
.quote-inline-citation {
flex: 2
}
.section-nav {
z-index: 1;
flex-direction: column;
align-items: center;
gap: 1.5rem;
width: 2.5rem;
display: flex;
position: fixed;
top: 50%;
right: .5rem;
transform: translateY(-50%)
}
.section-nav-item.is-active~.section-nav-item .section-nav-button {
border: 1px solid var(--color-white);
background-color: #ffffff40
}
.section-nav-item.is-active~.section-nav-item .section-nav-button:hover {
background-color: var(--color-white)
}
.section-nav-item.is-active~.section-nav-item .section-nav-button:focus-visible {
background-color: var(--color-white)
}
.section-nav-button {
background-color: var(--color-pink);
border-color: var(--color-pink);
border-radius: var(--border-radius-circle);
width: .75rem;
height: .75rem;
display: block;
position: relative
}
[data-a11y-dialog-native] .sidebar-overlay {
display: none
}
dialog[open] {
display: block
}
.sidebar[aria-hidden=true] {
pointer-events: none
}
.sidebar:not([data-a11y-dialog-native]),.sidebar-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.sidebar {
z-index: 3;
display: flex
}
.sidebar-overlay {
background-color: hsla(var(--color-blue-base),.8)
}
dialog::backdrop {
background-color: hsla(var(--color-blue-base),.8)
}
.sidebar-content {
background-color: var(--color-white);
z-index: 2;
width: calc(100% - 3rem);
height: 100%;
margin: auto;
position: absolute;
top: 0;
right: 0
}
@media (min-width: 40rem) {
.sidebar-content {
width:calc(100% - 8rem)
}
}
@media (min-width: 55rem) {
.sidebar-content {
width:calc(100% - 16rem)
}
}
@keyframes slide-in {
0% {
transform: translate(100%)
}
}
@keyframes slide-out {
to {
transform: translate(100%)
}
}
.sidebar-overlay {
animation: .2s both fade-in
}
.sidebar[aria-hidden=true] .sidebar-overlay {
animation: forwards fade-out
}
.sidebar[aria-hidden=true].is-ready .sidebar-overlay {
animation-duration: .2s
}
.sidebar-content {
animation: .4s .2s both slide-in
}
.sidebar[aria-hidden=true] .sidebar-content {
animation: forwards fade-out,forwards slide-out
}
.sidebar[aria-hidden=true].is-ready .sidebar-content {
animation-duration: .2s,.2s
}
.sidebar-close {
background-color: var(--color-pink);
border-radius: var(--border-radius-circle);
z-index: 1;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
transition: all .15s;
display: flex;
position: absolute;
top: 25vh;
left: -2rem
}
@media not (min-width: 40rem) {
.sidebar-close {
transform:scale(.65)
}
}
.sidebar-scroll {
-webkit-overflow-scrolling: touch;
max-height: 100vh;
padding-block-end:12rem;overflow-y: auto
}
.stats {
--grid-row-gutter: 5rem
}
.stat {
text-align: center;
flex-direction: column;
grid-column: 1/-1;
display: flex
}
.stat-number-wrapper {
white-space: nowrap;
align-self: center;
display: flex
}
.stat-number {
letter-spacing: -.05em
}
@media not (min-width: 40rem) {
.stat-number {
display:none
}
}
.stat-prefix {
margin-inline-end:.1em}
.stat-suffix {
margin-inline-start:.1em}
.stat-prefix-center,.stat-suffix-center {
align-self: center
}
.stat-prefix-end,.stat-suffix-end {
align-self: end;
transform: translateY(-.075em)
}
.stat-abbreviation {
letter-spacing: -.05em
}
@media (min-width: 40rem) {
.stat-abbreviation {
display:none
}
}
.stat-content {
flex-direction: column;
gap: .5rem;
max-width: 30rem;
margin-inline-start:auto;margin-inline-end:auto;display: flex
}
.stat-cta {
align-self: center;
margin-block-start:2rem}
@media (min-width: 55rem) {
.stats-1 .stat {
grid-column:2/-2
}
}
@media (min-width: 40rem) {
.stats-2 .stat:first-child {
grid-column:1/7
}
.stats-2 .stat:nth-child(2) {
grid-column: 7/-1
}
}
@media (min-width: 55rem) {
.stats-3 .stat:first-child {
grid-column:1/5
}
.stats-3 .stat:nth-child(2) {
grid-column: 5/9
}
.stats-3 .stat:nth-child(3) {
grid-column: 9/-1
}
}
@media (min-width: 40rem) {
.stats-4 .stat:nth-child(odd) {
grid-column:1/7
}
.stats-4 .stat:nth-child(2n+2) {
grid-column: 7/-1
}
}
@media (min-width: 70rem) {
.stats-4 .stat:first-child {
grid-column:1/4
}
.stats-4 .stat:nth-child(2) {
grid-column: 4/7
}
.stats-4 .stat:nth-child(3) {
grid-column: 7/10
}
.stats-4 .stat:nth-child(4) {
grid-column: 10/-1
}
}
.synopsis {
position: relative
}
.synopsis .grid {
grid-template-rows: 1fr auto;
width: 100%
}
.synopsis-shape {
grid-area: 1/1/1/-1
}
@media not (min-width: 40rem) {
.synopsis-shape {
height:250px;
margin-block-start:-8rem}
}
@media (min-width: 40rem) {
.synopsis-shape {
grid-column:2/-2
}
}
.synopsis-shape svg {
color: var(--color-pink);
width: 100%
}
.synopsis-wrapper {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
padding-inline-start:2rem;padding-inline-end:2rem;display: flex;
position: sticky;
top: 0
}
.synopsis-content {
grid-area: 2/1/2/-1;
width: 100%;
position: absolute;
top: 80%
}
@media (min-width: 40rem) {
.synopsis-content {
grid-column:2/-2
}
}
@media (min-width: 55rem) {
.synopsis-content {
grid-column:3/-3;
margin-block-start:-2rem}
}
.synopsis-item {
width: 100%;
position: absolute;
top: 0
}
.synopsis-section {
height: 100vh
}
.teaser {
border-block-end:1px solid;flex-direction: column;
gap: 2rem;
padding-block-end:2rem;transition: filter .3s;
display: flex
}
.teaser .text-16 {
line-height: 1.5
}
.teaser [class*=text-] {
transition: transform .2s var(--ease-out-cubic)
}
.teaser .link-arrow {
display: none
}
.annual a>.teaser .link-arrow {
display: flex
}
:is(a.teaser:hover,a:hover>.teaser) .teaser-media {
transform: scale(1.1)!important
}
:is(a.teaser:hover,a:hover>.teaser) [class*=text-] {
transform: translateY(.25rem)
}
:is(a.teaser:hover,a:hover>.teaser) .link-arrow {
transform: translateY(.25rem)
}
:is(a.teaser:hover,a:hover>.teaser) .link-arrow-icon {
transform: translate(.5rem)
}
.teaser-simple {
text-align: center;
flex-direction: column;
gap: 1.5rem;
display: flex
}
.teaser-simple .button {
align-self: center
}
.teaser-simple .text-16 {
line-height: 1.5
}
.teaser-content {
flex-direction: column;
gap: 2rem;
display: flex
}
.teaser-content .text-overline-sm {
margin-block-end:-1.5rem}
.teaser-hero {
margin-block-start:7.125rem;display: flex;
position: relative
}
.teaser-hero-content {
color: var(--color-white);
flex-direction: column;
gap: 1.5rem;
width: calc(50% + 3.75rem);
padding-inline-start:3.75rem;padding-inline-end:3.75rem;display: flex;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%)
}
.teaser-media-wrapper {
width: 100%;
aspect-ratio: var(--ratio,1);
position: relative;
overflow: hidden
}
.teaser-media-wrapper:before {
background-color: var(--color-grey);
content: "";
opacity: .5;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.teaser-media-wrapper.u-rounded:before {
border-radius: var(--border-radius-circle)
}
.teaser-hero-media-wrapper:after {
content: "";
background: linear-gradient(90deg,#16161680 0%,#112b4d00 100%);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.video-teaser:not(.plyr-initialized) .teaser-media-wrapper:hover .button-play {
pointer-events: all;
opacity: 1
}
.video-teaser .plyr {
z-index: 1;
width: 100%;
height: 100%;
position: absolute;
top: 0
}
.teaser-media {
object-fit: cover;
width: 100%;
height: 100%;
transition: transform .3s;
position: relative
}
.teaser-media-lazy {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.plyr--audio {
z-index: 1;
width: 100%;
transition: transform .2s;
position: absolute;
bottom: 0;
transform: translateY(100%)
}
.plyr--audio.plyr--playing {
transform: translateY(0)
}
:is(.podcast-teaser,.video-teaser):hover .button-play {
opacity: 1
}
.video,.hero-text-media,.modal-inner {
position: relative
}
:is(.video,.hero-text-media,.modal-inner):hover .plyr--paused~.button-play {
pointer-events: all;
opacity: 1
}
:is(.video,.hero-text-media,.modal-inner):hover .plyr--playing~.button-pause {
pointer-events: all;
opacity: 1
}
:is(.video,.hero-text-media,.modal-inner):hover .plyr--hide-controls~.button-pause:not(:hover) {
opacity: 0
}
.hero-text-podcast .plyr--paused~.button-play {
pointer-events: all;
opacity: 1
}
.hero-text-podcast .plyr--playing~.button-pause {
pointer-events: all;
opacity: 1
}
.hero-text-podcast .plyr--hide-controls~.button-pause:not(:hover) {
opacity: 0
}
.button-play,.button-pause {
opacity: 0;
pointer-events: none;
width: 5rem;
height: 5rem;
transition: background-color .2s var(--ease-out-expo),color .2s var(--ease-out-expo),opacity .2s linear;
z-index: 1;
border: none;
justify-content: center;
align-items: center;
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
.button-play svg {
margin-left: .2rem
}
.text-promo {
--grid-row-gutter: var(--grid-row-gutter-lg)
}
.text-promo-overline,.text-promo-title,.text-promo-content {
grid-column: 1/-1
}
@media (min-width: 40rem) {
:is(.text-promo-overline,.text-promo-title,.text-promo-content) {
grid-column:2/-2
}
}
.timeline {
position: relative
}
.timeline-chart {
width: 100%;
height: 100%
}
.legend {
flex-wrap: wrap;
justify-content: center;
gap: 1rem 4rem;
margin-block-start:2.5rem;margin-block-end:4.5rem;display: flex
}
.legend-item {
white-space: nowrap;
align-items: center;
gap: .75rem;
line-height: 1;
display: flex;
position: relative
}
.legend-item:before {
background-color: var(--color);
border-radius: var(--border-radius-circle);
content: "";
width: 1rem;
height: 1rem;
display: block
}
.timeline-chart-wrapper {
height: calc(100vh - 320px);
margin-inline-start:1rem;margin-inline-end:1rem;position: relative
}
.with-periods .timeline-chart-wrapper {
height: calc(100vh - 320px + 9rem);
padding-block-start:9rem}
@media (min-width: 40rem) {
.timeline-chart-wrapper {
margin-inline-start:2rem;
margin-inline-end:2rem}
}
.market-developments .timeline-chart-wrapper {
height: calc(100vh - 140px);
margin-block-end:2rem}
.timeline-labels {
justify-content: space-between;
margin-block-end:1rem;margin-inline-start:2.1rem;margin-inline-end:2.1rem;display: flex;
position: relative
}
.with-periods .timeline-labels {
top: 9rem
}
.timeline-label-right {
text-align: right
}
.timeline-events {
z-index: 1;
margin-block-start:1rem;margin-inline-start:4rem;margin-inline-end:4rem;position: relative
}
.market-developments .timeline-events {
margin-block-start:-2.7rem;margin-inline-start:3.5rem;margin-inline-end:1.5rem}
.timeline-periods {
pointer-events: none;
z-index: 1;
width: calc(100% - 8rem);
height: calc(100% - 6rem);
position: absolute;
top: 3rem;
left: 4rem;
right: 4rem
}
.timeline-columns,.timeline-axis {
grid-gap: .5rem;
grid-template-columns: repeat(auto-fit,minmax(min(1rem,100%),1fr));
margin-inline-start:4rem;margin-inline-end:4rem;display: grid
}
@media (min-width: 40rem) {
:is(.timeline-columns,.timeline-axis) {
grid-gap:1rem
}
}
.timeline-axis {
-webkit-user-select: none;
user-select: none
}
@media not (min-width: 30rem) {
.timeline-axis {
grid-gap:0
}
}
.timeline-columns {
height: max(10rem,min(100vh - 30rem,22rem))
}
.timeline-columns li {
text-align: center;
align-self: flex-end;
position: relative
}
.timeline-column {
text-align: center;
justify-content: center;
width: 100%;
display: flex;
position: absolute;
bottom: 0;
left: 0
}
.timeline-column-total {
transform: translateY(-150%)
}
@media not (min-width: 40rem) {
.timeline-column-total {
font-size:1.25rem
}
}
.timeline-column-group,.timeline-column-combined {
background-color: var(--color-grey)
}
.timeline-columns li:last-child .timeline-column-combined,.timeline-column-us {
background-color: var(--color-yellow)
}
.timeline-axis {
opacity: .5;
border-top: 1px solid
}
.timeline-axis li {
letter-spacing: .2em;
text-align: center;
text-transform: uppercase;
margin-block-start:2rem;line-height: 1
}
.timeline-axis.with-events {
margin-block-start:0}
.timeline-axis.with-events li {
margin-block-start:3rem}
.timeline-axis-month {
-webkit-user-select: none;
user-select: none
}
@media not (min-width: 40rem) {
.timeline-axis-month span {
display:none
}
}
.toc-wrapper {
--color-bg: var(--color-white-base);
--color-border: var(--color-darker-grey);
--color-text: var(--color-grey-text);
--color-text-active: var(--color-dark);
border-bottom: 1px solid var(--color-border);
z-index: 1;
margin-block-start:4rem;margin-block-end:4rem;position: sticky;
top: -1px
}
.bg-bordeaux .toc-wrapper {
--color-bg: var(--color-bordeaux-base);
--color-border: var(--color-darker-grey);
--color-text: hsla(var(--color-white-base),.6);
--color-text-active: var(--color-white)
}
@media (min-width: 55rem) {
.toc-wrapper:before {
content:"";
height: 100%;
width: calc(var(--grid-max-width)/var(--grid-columns));
background-color: hsl(var(--color-bg));
transition: background .3s;
position: absolute;
top: 0
}
.toc-wrapper:after {
content: "";
height: 100%;
width: calc(var(--grid-max-width)/var(--grid-columns));
background-color: hsl(var(--color-bg));
transition: background .3s;
position: absolute;
top: 0
}
}
.toc-wrapper:before {
left: 0;
transform: translate(-100%)
}
.toc-wrapper:after {
right: 0;
transform: translate(100%)
}
.toc-wrapper+.section {
margin-block-start:-4rem}
.toc {
background-color: hsl(var(--color-bg));
color: var(--color-text);
transition: background .3s,border .3s,color .3s
}
@media not (min-width: 55rem) {
.toc {
transform:translateX(calc(var(--grid-margin)*-1));
width: calc(100% + var(--grid-margin)*2)
}
}
.toc:before {
content: "";
height: 100%;
width: min(var(--grid-margin),2.5rem);
opacity: 0;
pointer-events: none;
z-index: 999999;
transition: background .3s,opacity .3s;
position: absolute;
top: 0
}
.toc:after {
content: "";
height: 100%;
width: min(var(--grid-margin),2.5rem);
opacity: 0;
pointer-events: none;
z-index: 999999;
transition: background .3s,opacity .3s;
position: absolute;
top: 0
}
.toc:before {
background: linear-gradient(to left,hsla(var(--color-bg),0),hsl(var(--color-bg)));
left: 0
}
.toc:after {
background: linear-gradient(to right,hsla(var(--color-bg),0),hsl(var(--color-bg)));
right: 0
}
.toc.is-overflowing:not(.at-start):before {
opacity: 1
}
.toc.is-overflowing:not(.at-end):after {
opacity: 1
}
.toc.is-animating:before {
visibility: hidden
}
.toc.is-animating:after {
visibility: hidden
}
.toc-inner {
-ms-overflow-style: none;
scrollbar-height: none;
overflow-x: auto
}
.toc-inner::-webkit-scrollbar {
height: 0!important
}
.toc-list {
-webkit-user-select: none;
user-select: none;
white-space: nowrap;
gap: 2rem;
width: -moz-fit-content;
width: fit-content;
padding-block-start:1rem;padding-block-end:1rem;display: flex;
position: relative
}
@media not (min-width: 55rem) {
.toc-list {
padding-inline:var(--grid-margin)
}
}
.toc-link {
white-space: nowrap;
transition: color .3s
}
.toc-link:hover {
color: var(--color-text-active);
font-weight: var(--font-medium)
}
.toc-link:focus-visible {
color: var(--color-text-active);
font-weight: var(--font-medium)
}
.toc-link.is-active {
color: var(--color-text-active);
font-weight: var(--font-medium)
}
.tooltip-pin {
--size: 1rem;
left: calc(var(--x)*100% - var(--size)/2);
top: calc(var(--y)*100% - var(--size)/2);
position: absolute
}
.tooltip-pin:hover .tooltip-pin-dot {
transform: scale(1.5)
}
.tooltip-pin:hover .tooltip-icon-outside {
opacity: 1
}
.tooltip-pin-dot {
background: var(--color-pink);
border-radius: var(--border-radius-circle);
height: var(--size);
width: var(--size);
transition: transform .3s var(--ease-out-cubic);
position: relative
}
.tooltip-pin-dot:before {
border-radius: var(--border-radius-circle);
box-shadow: 0 0 0 0 var(--color-pink);
content: "";
width: 100%;
height: 100%;
animation: 2s infinite pulse;
position: absolute;
top: 0;
left: 0;
transform: scale(1)
}
.tooltip-pin-large {
--size: 2rem
}
.tooltip-icon-outside,.tooltip-icon-inside {
object-fit: contain;
width: 2.5rem;
max-width: none;
height: 2.5rem
}
.tooltip-icon-outside {
opacity: .3;
transition: opacity .2s var(--ease-out-cubic);
position: absolute;
top: -1.5rem;
left: 50%;
transform: translate(-50%,-100%)
}
@media not (min-width: 55rem) {
.tooltip-icon-outside {
display:none
}
}
.tooltip-icon-inside {
filter: invert()
}
@media (min-width: 55rem) {
.tooltip-icon-inside {
display:none
}
}
.tooltip {
--color-bg: var(--color-pink-base);
background-color: hsla(var(--color-bg),.95);
border-radius: var(--border-radius-sm);
color: var(--color-black);
pointer-events: none;
opacity: 0;
min-width: 18rem;
max-width: 30rem;
transition: background-color .3s var(--ease-out-cubic),color .3s var(--ease-out-cubic),opacity .2s linear,transform .3s var(--ease-out-cubic);
padding: 2rem;
position: absolute;
transform: scale(.9)
}
.tooltip.is-active {
opacity: 1;
z-index: 1;
transform: none
}
.tooltip-arrow {
background-color: hsla(var(--color-bg),.95);
width: .5rem;
height: .5rem;
transition: background-color .3s var(--ease-out-cubic),color .3s var(--ease-out-cubic);
position: absolute;
transform: rotate(45deg)
}
.tooltip-grey,.tooltip-grey .tooltip-arrow {
background-color: var(--color-grey)
}
.bg-pink .tooltip {
background-color: var(--color-pink-dark);
color: var(--color-white)
}
.bg-pink .tooltip-arrow {
background-color: var(--color-pink-dark);
color: var(--color-white)
}
.tooltip-periode {
height: 100%;
width: calc(100%*var(--width));
left: calc(var(--x)*100%);
transition: transform .3s var(--ease-out-cubic);
flex-direction: column;
align-items: center;
gap: 1rem;
padding-block-start:2rem;display: flex;
position: absolute;
top: 0
}
.tooltip-periode.is-active .tooltip-periode-background {
background-color: hsla(var(--color-white-base),.05)
}
.tooltip-periode.is-active .tooltip-periode-trigger {
background-color: var(--color-white);
border-color: var(--color-white);
color: var(--color-black);
transform: scale(1.25)
}
.tooltip-periode-title {
min-height: 3.5rem
}
@media not (min-width: 40rem) {
.tooltip-periode-title {
display:none
}
}
.tooltip-periode-trigger {
border-radius: var(--border-radius-circle);
border: 1px solid var(--color-white);
pointer-events: all;
width: 1.5rem;
height: 1.5rem;
transition: background .2s var(--ease-out-cubic),border .2s var(--ease-out-cubic),color .2s var(--ease-out-cubic),transform .2s var(--ease-out-cubic);
justify-content: center;
align-items: center;
display: flex;
position: relative
}
@media not (min-width: 40rem) {
.tooltip-periode-trigger {
background-color:var(--color-pink);
border: 1px solid var(--color-pink);
color: var(--color-black)
}
}
.tooltip-periode-trigger:before {
border-radius: var(--border-radius-circle);
box-shadow: 0 0 0 0 var(--color-pink);
content: "";
width: 100%;
height: 100%;
animation: 2s infinite pulse;
position: absolute;
top: 0;
left: 0;
transform: scale(1)
}
.tooltip-periode-trigger svg {
transition: transform .2s
}
.tooltip-periode-trigger:hover {
color: var(--color-black);
transform: scale(1.25);
background-color: var(--color-pink)!important;
border-color: var(--color-pink)!important
}
.tooltip-periode-trigger:hover:before {
display: none
}
.tooltip-periode-trigger:hover+.tooltip-periode-background {
background-color: hsla(var(--color-white-base),.05)
}
.tooltip-periode-trigger:hover svg {
transform: rotate(45deg)
}
.tooltip-periode-background {
background-color: hsla(var(--color-white-base),0);
transition: background .2s var(--ease-out-cubic);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.tooltip-periode-background:before {
background-color: hsla(var(--color-grey-base),.2);
width: 1px;
height: calc(100% - 7rem);
position: absolute;
bottom: 0
}
.tooltip-periode-background:after {
background-color: hsla(var(--color-grey-base),.2);
width: 1px;
height: calc(100% - 7rem);
position: absolute;
bottom: 0
}
.tooltip-periode-background:after {
content: "";
right: 0
}
.with-left-devider .tooltip-periode-background:before {
content: "";
left: 0
}
.video-breaker {
align-items: center;
padding: 0;
display: flex;
position: relative;
overflow: hidden
}
@media not (min-width: 40rem) {
.video-breaker {
min-height:90vh
}
}
.video-breaker .grid {
height: auto;
min-height: 100%
}
@media (min-width: 40rem) {
.video-breaker-ratio {
aspect-ratio:16/9;
width: 100%
}
}
@media (min-width: 85rem) {
.video-breaker-ratio {
aspect-ratio:16/7
}
}
.video-breaker .plyr {
object-fit: cover;
grid-area: 1/1/-1/-1;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
.video-breaker .plyr.plyr--paused:after {
content: "";
background: linear-gradient(90deg,#16161680 0%,#112b4d00 100%);
animation: 2s linear forwards fade-in;
position: absolute;
top: 0%;
bottom: 0;
left: 0%;
right: 0%
}
.video-breaker-content {
z-index: 1;
grid-column: 1/-1;
align-self: center;
padding-block-start:4rem;padding-block-end:4rem}
@media (min-width: 40rem) {
.video-breaker-content {
padding-block-start:6rem;
padding-block-end:6rem}
}
@media (min-width: 70rem) {
.video-breaker-content {
padding-block-start:8rem;
padding-block-end:8rem}
}
.plyr--playing+.grid .video-breaker-content {
display: none
}
@media (min-width: 55rem) {
.video-breaker-content {
grid-area:1/1/-1/10
}
}
@media (min-width: 70rem) {
.video-breaker-content {
grid-column:1/7
}
}
@media (min-width: 55rem) {
.video-breaker .button-play {
display:none
}
}
.video-breaker-media {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.video-breaker-media:after {
content: "";
animation: fade-in 3s var(--ease-out-expo)forwards;
background: linear-gradient(90deg,#000c 0%,#0000 100%);
position: absolute;
top: 0%;
bottom: 0;
left: 0%;
right: 0%
}
@media (min-width: 55rem) {
.video {
color:var(--color-white)
}
}
.video-background {
animation: fade-in 3s var(--ease-out-expo)forwards;
pointer-events: none;
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
transform: translate(-50%,-50%)
}
.video-background iframe {
transform-origin: 0 0;
width: 100%;
min-width: 177.77vh;
height: 56.25vw;
min-height: 100vh;
position: absolute;
top: 50%;
left: 50%;
transform: scale(1.1)translate(-50%,-50%)
}