@charset "UTF-8"; /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *, path, clipPath)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; -webkit-tap-highlight-color: transparent; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; overflow-wrap: break-word; word-wrap: break-word; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* hide arrow in details on safari and ios */ ::-webkit-details-marker { display: none; } @font-face { font-family: "remixicon"; src: url("../fonts/isfp-remixicon/isfp-remixicon.eot?t=1699442456229"); /* IE9*/ src: url("../fonts/isfp-remixicon/isfp-remixicon.eot?t=1699442456229#iefix") format("embedded-opentype"), url("../fonts/isfp-remixicon/isfp-remixicon.woff2?t=1699442456229") format("woff2"), url("../fonts/isfp-remixicon/isfp-remixicon.woff?t=1699442456229") format("woff"), url("../fonts/isfp-remixicon/isfp-remixicon.ttf?t=1699442456229") format("truetype"), url("../fonts/isfp-remixicon/isfp-remixicon.svg?t=1699442456229#remixicon") format("svg"); /* iOS 4.1- */ font-display: swap; } :root { --grid-margin: 2rem; --grid-gap: 2rem; --grid-space: 4rem; --layout-max-width: 156rem; --columns: 12; --radius--md: 1.6rem; --radius: 0.8rem; --radius--sm: 0.6rem; --cta-height: 4rem; --header-height: 10rem; --header-actions-height: 12rem; --row-spacing-vertical: 4rem; --block-spacing-vertical: 4rem; --block-gap-vertical: 2.4rem; --white: #ffffff; --red: #F41616; --yellow: #FFD103; --green: #19C869; --cyan: #00BDE7; --blue-space: #414B5A; --blue-space--dark: #2A313D; --blue-space--darker: #1D2530; --grey--lighter: #F3F5F8; --grey--light: #CDDCDF; --grey: #9B9B9B; --grey--medium: #747C88; --error: var(--red); --warning: var(--yellow); --succeed: var(--green); --text-color--detail: var(--grey--light); --text-color--lighter: var(--grey); --text-color--light: var(--blue-space); --text-color--medium: var(--grey--medium); --text-color: var(--blue-space--darker); --text-color--invert: var(--white); --text-color--accent: var(--cyan); --text-color--accent-bis: var(--yellow); --title-color--lighter: var(--grey); --title-color--light: var(--grey--medium); --title-color: var(--blue-space); --title-color--dark: var(--blue-space--dark); --title-color--invert: var(--white); --title-color--accent: var(--cyan); --title-color--accent-bis: var(--yellow); --stroke-color--light: var(--grey--light); --stroke-color: var(--grey); --stroke-color--medium: var(--blue-space); --stroke-color--dark: var(--blue-space--dark); --stroke-color--accent: var(--cyan); --background-color--lighter: var(--grey--lighter); --background-color--light: var(--grey--medium); --background-color: var(--white); --background-color--medium: var(--blue-space); --background-color--dark: var(--blue-space--dark); --background-color--accent: var(--cyan); --background-color--accent-bis: var(--yellow); --drop-shadow: 0 0 1.6rem rgba(65, 75, 90, 0.15); --transition-easing: cubic-bezier(0.55, 0, 0.25, 1); --transition-easing--in-out: cubic-bezier(0.4, 0, 0.1, 1); --transition-duration: 0.32s; --transition: all 0.32s cubic-bezier(0.55, 0, 0.25, 1); --z-index-curtain: 70; --z-index-header-nav: 80; --z-index-header-logo: 90; --z-index-header: 100; --z-index-search: 110; --z-index-header-button: 120; --z-index-dialog: 130; --z-index-alert: 140; } @media screen and ( min-width: 26.75em ) { :root { --grid-margin: 3.2rem; --grid-gap: 3.2rem; --grid-space: 6.4rem; } } @media screen and ( min-width: 48em ) { :root { --row-spacing-vertical: 10rem; --block-spacing-vertical: 8rem; --grid-margin: 5.6rem; --grid-space: 9.6rem; } } @media screen and ( min-width: 64em ) { :root { --row-spacing-vertical: 13rem; --block-spacing-vertical: 10rem; --grid-gap: 4rem; } } @media screen and ( min-width: 80em ) { :root { --header-height: 20rem; } } @media screen and ( min-width: 85.375em ) { :root { --grid-margin: 6rem; --grid-space: 10rem; } } html, body { font-family: "Lexend", sans-serif; font-size: 10px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .main-wrapper { font-size: 1.6rem; line-height: 1.75; letter-spacing: 0.01em; } em { font-style: italic; } strong { font-weight: 700; } html, body { background: var(--background-color); color: var(--text-color); } ::-moz-selection { color: var(--text-color--light); background: #e3ebed; } ::selection { color: var(--text-color--light); background: #e3ebed; } img { background: var(--background-color--lighter); } .grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 0 var(--grid-gap); grid-auto-flow: column; } .grid { grid-auto-flow: row; } .grid > *:not([class*=gcol-]) { grid-column: 1/-1; } .grid > * { grid-column-start: auto; } .grid--center { align-items: center; } .flex, .information__list, .numbers__item, .block__columns, .block__content, .block--text-image .block__list, .block--articles .block__list, .hero__content { display: flex; flex-wrap: wrap; align-content: flex-start; } .flex--auto > * { flex: 0 0 auto; } .flex--row, .block__columns, .block--articles .block__list { gap: var(--grid-gap); } .start-2 { grid-column-start: 2; } .fcol-3 { --columns: 3; flex: 0 0 calc( 3 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-5 { --columns: 5; flex: 0 0 calc( 5 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 4 * var(--grid-gap) ); } .gcol-6 { --columns: 6; grid-column-end: span 6; } .start-6 { grid-column-start: 6; } .fcol-6, .numbers__item { --columns: 6; flex: 0 0 calc( 6 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-7 { --columns: 7; flex: 0 0 calc( 7 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-8 { --columns: 8; flex: 0 0 calc( 8 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-9 { --columns: 9; flex: 0 0 calc( 9 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 8 * var(--grid-gap) ); min-width: calc( 9 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 8 * var(--grid-gap) ); } .col-10 { --columns: 10; width: calc( 10 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 9 * var(--grid-gap) ); } .fcol-10 { --columns: 10; flex: 0 0 calc( 10 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 9 * var(--grid-gap) ); } .gcol-12 { --columns: 12; grid-column-end: span 12; } .col-12, .row--slim, .row--narrow { --columns: 12; width: 100%; } .fcol-12 { --columns: 12; flex: 0 0 100%; min-width: 100%; } .ml-0 { margin-left: 0; } .ml-1 { margin-left: calc( 1 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2 { margin-left: calc( 2 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 2 * var(--grid-gap) ); } .size-full { grid-column: 1/-1; } @media screen and ( min-width: 26.75em ) { .fcol-4--xs { --columns: 4; flex: 0 0 calc( 4 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-6--xs { --columns: 6; flex: 0 0 calc( 6 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-7--xs { --columns: 7; flex: 0 0 calc( 7 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-8--xs { --columns: 8; flex: 0 0 calc( 8 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-12--xs { --columns: 12; flex: 0 0 100%; min-width: 100%; } .ml-0--xs { margin-left: 0; } } @media screen and ( min-width: 40em ) { .numbers__item { --columns: 4; flex: 0 0 calc( 4 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 3 * var(--grid-gap) ); } .gcol-6--xs-mid { --columns: 6; grid-column-end: span 6; } .fcol-6--xs-mid { --columns: 6; flex: 0 0 calc( 6 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-7--xs-mid { --columns: 7; flex: 0 0 calc( 7 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-8--xs-mid { --columns: 8; flex: 0 0 calc( 8 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-10--xs-mid { --columns: 10; flex: 0 0 calc( 10 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 9 * var(--grid-gap) ); } .ml-1--xs-mid { margin-left: calc( 1 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 1 * var(--grid-gap) ); } } @media screen and ( min-width: 48em ) { .start-1--sm { grid-column-start: 1; } .start-2--sm { grid-column-start: 2; } .start-4--sm { grid-column-start: 4; } .gcol-5--sm { --columns: 5; grid-column-end: span 5; } .fcol-5--sm { --columns: 5; flex: 0 0 calc( 5 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 4 * var(--grid-gap) ); } .gcol-6--sm { --columns: 6; grid-column-end: span 6; } .start-6--sm { grid-column-start: 6; } .fcol-6--sm { --columns: 6; flex: 0 0 calc( 6 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 5 * var(--grid-gap) ); } .gcol-7--sm { --columns: 7; grid-column-end: span 7; } .fcol-7--sm { --columns: 7; flex: 0 0 calc( 7 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 6 * var(--grid-gap) ); } .start-8--sm { grid-column-start: 8; } .col-8--sm { --columns: 8; width: calc( 8 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 7 * var(--grid-gap) ); } .gcol-10--sm { --columns: 10; grid-column-end: span 10; } .row--slim, .row--narrow { --columns: 10; width: calc( 10 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 9 * var(--grid-gap) ); } .col-12--sm { --columns: 12; width: 100%; } .fcol-12--sm { --columns: 12; flex: 0 0 100%; min-width: 100%; } .ml-0--sm { margin-left: 0; } .ml-1--sm, .row--slim, .row--narrow { margin-left: calc( 1 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2--sm { margin-left: calc( 2 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-grow--sm { flex: 1; min-width: auto; } } @media screen and ( min-width: 64em ) { .start-1--md { grid-column-start: 1; } .start-2--md, .block--text-image:not(.block--text-image--invert) .block__content { grid-column-start: 2; } .start-3--md { grid-column-start: 3; } .fcol-3--md, .numbers__item { --columns: 3; flex: 0 0 calc( 3 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 2 * var(--grid-gap) ); } .gcol-4--md { --columns: 4; grid-column-end: span 4; } .fcol-4--md { --columns: 4; flex: 0 0 calc( 4 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 3 * var(--grid-gap) ); } .gcol-5--md { --columns: 5; grid-column-end: span 5; } .col-5--md { --columns: 5; width: calc( 5 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 4 * var(--grid-gap) ); } .fcol-5--md { --columns: 5; flex: 0 0 calc( 5 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 4 * var(--grid-gap) ); } .gcol-6--md { --columns: 6; grid-column-end: span 6; } .start-6--md { grid-column-start: 6; } .col-6--md, .row--slim { --columns: 6; width: calc( 6 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-6--md { --columns: 6; flex: 0 0 calc( 6 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7--md { grid-column-start: 7; } .gcol-8--md { --columns: 8; grid-column-end: span 8; } .start-8--md { grid-column-start: 8; } .row--narrow { --columns: 8; width: calc( 8 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-8--md { --columns: 8; flex: 0 0 calc( 8 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 7 * var(--grid-gap) ); } .ml-1--md { margin-left: calc( 1 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 1 * var(--grid-gap) ); } .row--narrow { margin-left: calc( 2 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 2 * var(--grid-gap) ); } .ml-3--md, .row--slim { margin-left: calc( 3 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 3 * var(--grid-gap) ); } .ml-4--md { margin-left: calc( 4 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 4 * var(--grid-gap) ); } } @media screen and ( min-width: 80em ) { .start-2--md-mid { grid-column-start: 2; } .gcol-3--md-mid { --columns: 3; grid-column-end: span 3; } .start-3--md-mid { grid-column-start: 3; } .fcol-3--md-mid { --columns: 3; flex: 0 0 calc( 3 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 2 * var(--grid-gap) ); } .gcol-4--md-mid { --columns: 4; grid-column-end: span 4; } .start-4--md-mid { grid-column-start: 4; } .col-4--md-mid { --columns: 4; width: calc( 4 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-4--md-mid { --columns: 4; flex: 0 0 calc( 4 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 3 * var(--grid-gap) ); } .gcol-5--md-mid { --columns: 5; grid-column-end: span 5; } .fcol-5--md-mid { --columns: 5; flex: 0 0 calc( 5 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 4 * var(--grid-gap) ); } .gcol-6--md-mid { --columns: 6; grid-column-end: span 6; } .start-6--md-mid { grid-column-start: 6; } .fcol-6--md-mid { --columns: 6; flex: 0 0 calc( 6 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7--md-mid { grid-column-start: 7; } .fcol-7--md-mid { --columns: 7; flex: 0 0 calc( 7 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 6 * var(--grid-gap) ); } .gcol-8--md-mid { --columns: 8; grid-column-end: span 8; } .start-8--md-mid { grid-column-start: 8; } .gcol-9--md-mid { --columns: 9; grid-column-end: span 9; } .ml-0--md-mid { margin-left: 0; } .fcol-auto--md-mid { flex: 1 0 0%; min-width: auto; } } @media screen and ( min-width: 85.375em ) { .fcol-4--lg { --columns: 4; flex: 0 0 calc( 4 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 3 * var(--grid-gap) ); } } html, body { overflow-x: hidden; } .main-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: var(--header-height) 1fr auto; grid-template-areas: "header" "content" "footer"; min-height: 100vh; } .header { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: header; } .event > .header { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; } .main-content { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: content; padding: 0 var(--grid-margin); width: 100%; max-width: var(--layout-max-width); margin: 0 auto; } .footer { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: footer; } img { display: block; -webkit-user-select: none; -moz-user-select: none; user-select: none; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .ratio--1x1 { width: 100%; aspect-ratio: 1/1; } .ratio--2x3 { width: 100%; aspect-ratio: 2/3; } .ratio--4x3 { width: 100%; aspect-ratio: 4/3; } .ratio--8x5 { width: 100%; aspect-ratio: 8/5; } .ratio--16x9 { width: 100%; aspect-ratio: 8/5; } .title, .block--text-image .block__list h2, .block--text-image .block__list h3, .block--text-image .block__list h4, .block--text-image .block__list h5, .block--text-image .block__list h6, .block__rte h1, .row--rte h1, .form__rte h1, .block__rte h2, .row--rte h2, .form__rte h2, .block__rte h3, .row--rte h3, .form__rte h3, .block__rte h4, .row--rte h4, .form__rte h4, .block__rte h5, .row--rte h5, .form__rte h5, .block__rte h6, .row--rte h6, .form__rte h6, .form__field--search .form__input { font-family: "Lexend", sans-serif; font-weight: 400; color: var(--title-color); } .title--xl, .title--lg, .block__rte h1, .row--rte h1, .form__rte h1 { font-size: 4.8rem; line-height: 5.6rem; } .title--md, .block__rte h2, .row--rte h2, .form__rte h2, .form__field--search .form__input { font-size: 3.2rem; line-height: 4rem; } .title--sm, .block__rte h3, .row--rte h3, .form__rte h3 { font-size: 2.1rem; line-height: 2.8rem; } .title--xs, .block--text-image .block__list h2, .block--text-image .block__list h3, .block--text-image .block__list h4, .block--text-image .block__list h5, .block--text-image .block__list h6, .block__rte h4, .row--rte h4, .form__rte h4 { font-size: 1.8rem; line-height: 2.4rem; } .title--accent, .block--text-image .block__list h2, .block--text-image .block__list h3, .block--text-image .block__list h4, .block--text-image .block__list h5, .block--text-image .block__list h6 { --title-color: var(--title-color--accent); } .title--accent i, .block--text-image .block__list h2 i, .block--text-image .block__list h3 i, .block--text-image .block__list h4 i, .block--text-image .block__list h5 i, .block--text-image .block__list h6 i { color: var(--title-color--accent-bis); } .title--bold { font-weight: 700; } .title--thin { font-weight: 300; } .title--lighter { --title-color: var(--title-color--lighter); } @media screen and ( min-width: 64em ) { .title--xl { font-size: 5.6rem; line-height: 6.4rem; } .title--md, .block__rte h2, .row--rte h2, .form__rte h2, .form__field--search .form__input { font-size: 4rem; line-height: 4.8rem; } .title--sm, .block__rte h3, .row--rte h3, .form__rte h3 { font-size: 2.4rem; line-height: 3.2rem; } } @media screen and ( min-width: 80em ) { .title--xl { font-size: 6.4rem; line-height: 7.2rem; } .title--lg, .block__rte h1, .row--rte h1, .form__rte h1 { font-size: 5.6rem; line-height: 6.4rem; } .title--xs, .block--text-image .block__list h2, .block--text-image .block__list h3, .block--text-image .block__list h4, .block--text-image .block__list h5, .block--text-image .block__list h6, .block__rte h4, .row--rte h4, .form__rte h4 { font-size: 2.1rem; line-height: 2.8rem; } } @media screen and ( min-width: 80em ) { .title--xl { font-size: 7.2rem; line-height: 8rem; } } .button { --button-primary: var(--blue-space); --button-secondary: var(--white); --button-ternary: var(--grey--light); --button-background: var(--button-primary); --button-stroke: var(--button-primary); --button-color: var(--button-secondary); --button-icon-color: var(--button-secondary); display: inline-flex; align-content: center; justify-content: center; min-height: var(--cta-height); padding: 1rem 3rem; gap: 0 0.8rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-weight: 500; font-size: 1.6rem; line-height: 2rem; color: var(--button-color); white-space: nowrap; position: relative; z-index: 2; transition: var(--transition); } .button::before { content: ""; display: block; width: 100%; height: 100%; border: 0.1rem solid var(--button-stroke); background: var(--button-background); border-radius: var(--radius--sm); position: absolute; top: 0; left: 0; z-index: -1; transition: var(--transition); } @media (hover: hover) { .button:hover::before { filter: brightness(80%) contrast(120%); } } .button:focus::before { filter: brightness(80%) contrast(120%); } .button i { color: var(--button-icon-color); transition: var(--transition); } .button i::before { display: block; transform: scale(1.25); } .button i[class^=ri-arrow-]::before, .button i[class*=ri-arrow-]::before { transform: scale(1.5); } .button--primary.button--icon-variant.button--outline:not(:hover) { --button-ternary: var(--grey--medium); } .button--secondary { --button-primary: var(--white); --button-secondary: var(--blue-space); --button-ternary: var(--grey--medium); } .button--accent { --button-primary: var(--cyan); --button-secondary: var(--white); --button-ternary: var(--yellow); } .button--outline { --button-background: transparent; --button-color: var(--button-primary); } .button--outline.button--secondary { --button-secondary: var(--button-primary); } .button--outline:not(.button--icon-variant) { --button-icon-color: var(--button-primary); } @media (hover: hover) { .button--outline:hover { --button-color: var(--button-secondary); --button-background: var(--button-primary); } .button--outline:hover.button--secondary { --button-secondary: var(--blue-space); } .button--outline:hover:not(.button--icon-variant) { --button-icon-color: var(--button-secondary); } .button--outline:hover::before { filter: none; } } .button--outline:focus:hover { --button-color: var(--button-secondary); --button-background: var(--button-primary); } .button--outline:focus:hover.button--secondary { --button-secondary: var(--blue-space); } .button--outline:focus:hover:not(.button--icon-variant) { --button-icon-color: var(--button-secondary); } .button--outline:focus:hover::before { filter: none; } .button--icon-variant { --button-icon-color: var(--button-ternary); } .button--inline { --button-color: var(--button-primary); --button-icon-color: var(--button-primary); padding-left: 0; padding-right: 0; } .button--inline::before { display: none; } @media (hover: hover) { .button--inline:hover { opacity: 0.5; } .button--inline:hover i { transform: translate(0.6rem, 0); } .button--inline:hover.button--icon-left { transform: translate(0.6rem, 0); } .button--inline:hover.button--icon-left i { transform: translate(-0.6rem, 0); } } .button--inline:focus { opacity: 0.5; } .button--inline:focus i { transform: translate(0.6rem, 0); } .button--inline:focus.button--icon-left { transform: translate(0.6rem, 0); } .button--inline:focus.button--icon-left i { transform: translate(-0.6rem, 0); } .button--underline { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 0.1rem; } .button--icon-left i { order: -1; } .button-list, .footer__actions, .block__cta, .form__field--buttons { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2.4rem; } .button-list--center { justify-content: center; } .button-icon { --button-icon-background: var(--blue-space); --button-icon-color: var(--text-color--invert); display: grid; width: var(--cta-height); height: var(--cta-height); border-radius: var(--radius--sm); cursor: pointer; font-size: 1.8rem; line-height: 1em; position: relative; z-index: 2; } .button-icon i { pointer-events: none; } .button-icon i, .button-icon::before { grid-column: 1/-1; grid-row: 1/-1; } .button-icon::before { content: ""; width: 100%; height: 100%; background: var(--button-icon-background); border-radius: var(--radius--sm); position: relative; z-index: -1; transition: var(--transition); } .button-icon i { color: var(--button-icon-color); align-self: center; justify-self: center; } @media (hover: hover) { .button-icon:hover::before { filter: brightness(80%) contrast(120%); } } .button-icon:focus::before { filter: brightness(80%) contrast(120%); } .answer--faq .answer__title::after, .header__languages-switcher::after, .breadcrumb__item + *::before, .form__checkmark::after, [class^=ri-], [class*=ri-] { font-family: "remixicon" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ri-arrow-down-s-fill:before { content: "\ea4d"; } .ri-arrow-up-s-fill:before { content: "\ea77"; } .ri-arrow-up-s-line:before { content: "\ea78"; } .ri-arrow-down-s-line:before { content: "\ea4e"; } .ri-arrow-left-s-line:before { content: "\ea64"; } .ri-arrow-right-s-line:before { content: "\ea6e"; } .ri-arrow-right-circle-line:before { content: "\ea68"; } .ri-arrow-left-circle-line:before { content: "\ea5c"; } .ri-skip-right-line:before { content: "\f365"; } .ri-skip-left-line:before { content: "\f363"; } .ri-alert-line:before { content: "\ea21"; } .ri-checkbox-circle-line:before { content: "\eb81"; } .ri-check-line:before { content: "\eb7b"; } .ri-error-warning-line:before { content: "\eca1"; } .ri-information-line:before { content: "\ee59"; } .ri-user-line:before { content: "\f264"; } .ri-key-line:before { content: "\ee71"; } .ri-shield-user-line:before { content: "\f10c"; } .ri-search-line:before { content: "\f0d1"; } .ri-hand-heart-line:before { content: "\edf3"; } .ri-calendar-event-line:before { content: "\eb25"; } .ri-calendar-line:before { content: "\eb27"; } .ri-earth-line:before { content: "\ec7a"; } .ri-map-pin-line:before { content: "\ef14"; } .ri-trophy-line:before { content: "\f22f"; } .ri-play-circle-fill:before { content: "\f008"; } .ri-file-download-line:before { content: "\ecd9"; } .ri-add-fill:before { content: "\ea12"; } .ri-mail-check-line:before { content: "\eeee"; } .ri-hospital-line:before { content: "\ee37"; } .ri-phone-line:before { content: "\efec"; } .ri-twitter-x-fill:before { content: "\f3e6"; } .ri-linkedin-fill:before { content: "\eeb5"; } .ri-instagram-fill:before { content: "\ee65"; } .ri-youtube-fill:before { content: "\f2d4"; } .ri-facebook-circle-fill:before { content: "\ecba"; } .tag { font-size: 1.4rem; font-weight: 700; text-underline-offset: 0.15em; } .form { --input-stroke: var(--stroke-color); --input-background: var(--background-color); } .form.flex--row, .form.block__columns, .block--articles .form.block__list { gap: 2.4rem var(--grid-gap); } .form__field { position: relative; } .form__field:not(.form__field--buttons, .form__field--checkbox, .form__field--code, .form__field--icon) { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "label" "input" "message"; align-content: start; } .form__field--search .form__input { --cta-height: 6.4rem; padding-left: 0; padding-right: 4.8rem; background: transparent; } .form__field--search .form__label { text-transform: uppercase; color: var(--text-color--medium); } .form__field--search-inline .form__input--inline { padding-right: calc(var(--cta-height) + 1.6rem); } .form__field--code { --cta-height: 5rem; display: grid; align-content: start; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto auto; gap: 0 0.8rem; grid-template-areas: "label label label" "code input space" "message message message"; align-content: start; } .form__field--code .form__input { text-align: center; font-size: 2rem; } .form__field--list { display: flex !important; flex-wrap: wrap; gap: 0 var(--grid-gap); } .form__field--list .form__message { margin-top: 0.8rem; flex: 0 0 100%; } .form__field--checkbox { display: grid; grid-template-columns: 1.6rem 1fr; grid-template-rows: auto auto; grid-template-areas: "input label" "message message"; gap: 0 0.8rem; } .form__field--checkbox .form__label { cursor: pointer; font-weight: 300; line-height: 1.2em; } .form__field--checkbox .form__message { margin-top: 0.8rem; } .form__field--icon { display: grid; grid-template-columns: var(--cta-height) 1fr; grid-template-rows: auto auto; grid-template-areas: "label input" "message message"; } .form__field--icon .form__label { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .form__field--icon .form__input { grid-column: label/input; padding-left: var(--cta-height); } .form__field--space-between { justify-content: space-between; } .form__input, .form__textarea, .form__select { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: input; width: 100%; padding: 0.6rem 1.6rem; min-height: var(--cta-height); line-height: 2.4rem; border: 0.1rem solid var(--input-stroke); box-sizing: border-box; border-radius: var(--radius--sm); background: var(--input-background); transition: var(--transition); } .form__field--code > .form__input, .form__field--code > .form__textarea, .form__field--code > .form__select { -ms-grid-row: 3; -ms-grid-column: 3; } .form__field--checkbox > .form__input, .form__field--checkbox > .form__textarea, .form__field--checkbox > .form__select { -ms-grid-row: 1; -ms-grid-column: 1; } .form__field--icon > .form__input, .form__field--icon > .form__textarea, .form__field--icon > .form__select { -ms-grid-row: 1; -ms-grid-column: 2; } .form__input::-moz-placeholder, .form__textarea::-moz-placeholder, .form__select::-moz-placeholder { color: var(--text-color--detail); } .form__input::placeholder, .form__textarea::placeholder, .form__select::placeholder { color: var(--text-color--detail); } .form__input:focus, .form__textarea:focus, .form__select:focus { --input-stroke: var(--stroke-color--dark); } .form__input--underline, .form__textarea--underline, .form__select--underline { border-top: 0; border-left: 0; border-right: 0; border-radius: 0; } .form__input--light, .form__textarea--light, .form__select--light { --input-stroke: var(--stroke-color--light); } .form__textarea { padding: 0.8rem 1.6rem; } .form__checkbox { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: input; cursor: pointer; position: relative; z-index: 2; } .form__field--code > .form__checkbox { -ms-grid-row: 3; -ms-grid-column: 3; } .form__field--checkbox > .form__checkbox { -ms-grid-row: 1; -ms-grid-column: 1; } .form__field--icon > .form__checkbox { -ms-grid-row: 1; -ms-grid-column: 2; } .form__checkbox:checked + .form__checkmark { --input-background: currentColor; } .form__checkbox:checked + .form__checkmark::after { transform: translate(-50%, -50%) scale(0.8); } .form__checkmark { -ms-grid-row: 2; -ms-grid-column: 1; --input-stroke: currentColor; --input-background: transparent; --icon-color: var(--text-color--invert); grid-area: input; display: block; width: 1.6rem; height: 1.6rem; border: 0.1rem solid var(--input-stroke); border-radius: 0.2rem; background: var(--input-background); pointer-events: none; transform: translate(0, 20%); transition: var(--transition); transition-duration: 0.32s; position: relative; } .form__field--code > .form__checkmark { -ms-grid-row: 3; -ms-grid-column: 3; } .form__field--checkbox > .form__checkmark { -ms-grid-row: 1; -ms-grid-column: 1; } .form__field--icon > .form__checkmark { -ms-grid-row: 1; -ms-grid-column: 2; } .form__checkmark::after { content: "\eb7b"; font-weight: 700; color: var(--icon-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: var(--transition); transition-duration: 0.32s; } .form__select { cursor: pointer; } .form__select option[disabled] { color: var(--text-color--detail); } .form__selectmark { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: input; justify-self: end; align-self: center; margin-right: 0.5em; pointer-events: none; } .form__field--code > .form__selectmark { -ms-grid-row: 3; -ms-grid-column: 3; } .form__field--checkbox > .form__selectmark { -ms-grid-row: 1; -ms-grid-column: 1; } .form__field--icon > .form__selectmark { -ms-grid-row: 1; -ms-grid-column: 2; } .form__label { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: label; cursor: pointer; } .form__field--code > .form__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 5; } .form__field--checkbox > .form__label { -ms-grid-row: 1; -ms-grid-column: 3; -ms-grid-column-span: 1; } .form__field--icon > .form__label { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 1; } .form__message { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: message; margin-top: 0.2rem; font-size: 1.3rem; color: var(--error); } .form__field--code > .form__message { -ms-grid-row: 5; -ms-grid-column: 1; -ms-grid-column-span: 5; } .form__field--checkbox > .form__message { -ms-grid-row: 3; -ms-grid-column: 1; -ms-grid-column-span: 3; } .form__field--icon > .form__message { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; } .form__message i { font-size: 1.2em; line-height: 1em; } .form__code { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: code; min-width: 13.2rem; height: var(--cta-height); border: 0.1rem solid currentColor; } .form__icon { -ms-grid-row: 2; -ms-grid-column: 1; justify-self: right; align-self: center; grid-area: input; } .form__field--code > .form__icon { -ms-grid-row: 3; -ms-grid-column: 3; } .form__field--checkbox > .form__icon { -ms-grid-row: 1; -ms-grid-column: 1; } .form__field--icon > .form__icon { -ms-grid-row: 1; -ms-grid-column: 2; } .form__alert { --alert-background: var(--background-color--medium); --alert-color: var(--text-color--invert); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto; grid-template-areas: "icon text"; gap: 0 0.6rem; min-height: 6rem; padding: 0.8rem 1.6rem; align-items: center; border-radius: var(--radius--sm); background: var(--alert-background); color: var(--alert-color); line-height: 1.2em; order: -1; } .form__alert > * { grid-row: 1/-1; } .form__alert i { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: icon; font-size: 3rem; } .form__alert--error { --alert-background: var(--error); } .form__alert--succeed { --alert-background: var(--succeed); } .form__rte { font-weight: 300; } .form__rte--sm { font-size: 1.4rem; } .breadcrumb { --breadcrumb-color: var(--text-color--medium); --breadcrumb-active: var(--text-color); color: var(--breadcrumb-color); position: absolute; z-index: 3; transform: translate(0, 2.4rem); } .breadcrumb--light { --breadcrumb-color: var(--text-color--detail); --breadcrumb-active: var(--text-color--invert); } .breadcrumb__list { display: flex; } .breadcrumb__item + *::before { display: inline-block; content: "\ea6e"; margin: 0 1.4rem 0 1.6rem; color: var(--breadcrumb-color); transform: scale(1.4); } .breadcrumb__item a { display: inline-flex; height: var(--cta-height); line-height: var(--cta-height); transition: var(--transition); } .breadcrumb__item.active a { cursor: default; color: var(--breadcrumb-active); } @media (hover: hover) { .breadcrumb__item:not(.active):hover a { color: var(--text-color--accent); } } @media screen and ( max-width: 39.9375em ) { .breadcrumb__item:not(:first-child, :last-child) { display: none; } .breadcrumb__item + *::before { margin: 0 0.8rem 0 1rem; transform: scale(1.2); } .breadcrumb__item a { font-size: 1.4rem; } } .scroller { position: relative; } .scroller::before, .scroller::after { content: ""; display: block; width: calc(var(--grid-margin) + 0.1rem); height: 100%; background: linear-gradient(to left, var(--row-background, var(--background-color)), transparent); opacity: 0; pointer-events: none; position: absolute; top: 0; z-index: 2; } .scroller::before { left: -0.1rem; transform: translate(-100%, 0) scale(-1, 1); } .scroller::after { right: -0.1rem; transform: translate(100%, 0); } .scroller__item { flex-wrap: nowrap !important; gap: var(--grid-gap); width: calc(100% + var(--grid-margin) * 2); padding-left: var(--grid-margin); padding-right: var(--grid-margin); transform: translate(calc(var(--grid-margin) * -1), 0); scroll-snap-type: x mandatory; scroll-padding-left: var(--grid-margin); overflow-x: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .scroller__item::-webkit-scrollbar { display: none; } .scroller__item > li { scroll-snap-align: start; } @media screen and (min-width: 97.5625rem) { .scroller::before, .scroller::after { opacity: 1; } } .header__menu .header__sublist::before, .header__languages-switcher::before { content: ""; display: block; width: calc(100% + 2.4rem ); height: 100%; border: 0.1rem solid var(--stroke-color--light); background: var(--background-color); border-radius: var(--radius--sm); pointer-events: none; box-shadow: var(--drop-shadow); position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); z-index: -1; transition: var(--transition); } .header { display: grid; grid-template-rows: 1fr auto auto 1fr; width: 100%; max-width: var(--layout-max-width); gap: 0 var(--grid-gap); align-items: center; height: var(--header-height); padding: 0 var(--grid-margin); justify-self: center; position: fixed; z-index: var(--z-index-header); } .header::before { content: ""; display: block; width: 100vw; height: 100vh; background: var(--header-background); border-bottom: 0.1rem solid var(--header-stroke); position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, -100%) translate(0, var(--header-height)); } .header__logo { display: flex; align-items: center; width: 100%; height: var(--header-height); grid-row: 1/-1; } .header__logo img { background: none; height: 100%; max-height: 5.6rem; -o-object-fit: contain; object-fit: contain; -o-object-position: left center; object-position: left center; } .header__actions { display: flex; gap: 0 3rem; width: 100%; justify-content: flex-end; grid-row: 2/span 1; } .header__menu-button { display: block; width: var(--header-height); height: var(--header-height); border-radius: 0 0 0 var(--radius--md); background: var(--background-color--medium); cursor: pointer; grid-row: 1/-1; justify-self: end; position: relative; transform: translate(var(--grid-margin), 0); } .header__menu-button span { --header-icon-color: var(--background-color); display: block; width: 4rem; height: 0.4rem; border-radius: 0.1rem; background: var(--header-icon-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .header__menu-button span::before, .header__menu-button span::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 0.1rem; background: var(--header-icon-color); position: absolute; top: 0; } .header__menu-button span::before { transform: translate(0, -300%); } .header__menu-button span::after { transform: translate(0, 300%); } .header__search { position: relative; } .header__search .form__icon { position: absolute; right: 0; } .header__search .form__input { padding-right: calc(var(--cta-height) + 1.6rem); } .header__languages-switcher { --languages-count: 1; width: var(--cta-height); height: var(--cta-height); text-transform: uppercase; letter-spacing: 0.01rem; font-weight: 600; line-height: var(--cta-height); position: relative; z-index: 2; } .header__languages-switcher::after { content: "\ea4e"; pointer-events: none; position: absolute; top: 0; right: 0; transform-origin: right center; transform: scale(0.8); transition: var(--transition); } .header__languages-switcher::before { height: calc(100% * var(--languages-count)); } .header__language { display: block; width: 100%; height: 100%; transition: var(--transition); } .header__language button, .header__language a { display: block; width: 100%; height: 100%; cursor: pointer; transition: var(--transition); } .header__language:not(.active) button, .header__language:not(.active) a { color: var(--text-color--lighter); } @media (hover: hover) { .header__language:not(.active) button:hover, .header__language:not(.active) a:hover { color: var(--text-color--accent); } } .header__menu { grid-row: 3/span 1; } .header__menu .header__list { display: flex; justify-content: flex-end; gap: 0 3rem; } .header__menu .header__item { position: relative; } .header__menu .header__sublist { min-width: 100%; padding: 0.8rem; position: absolute; left: -0.8rem; z-index: 2; } @media screen and ( min-width: 80em ) { .header__menu .header__sublist { left: 1.2rem; } } .header__menu .header__sublist a { line-height: 3.2rem; white-space: nowrap; } .header__menu a:not(.button), .header__menu button:not(.button) { display: flex; flex-wrap: wrap; width: 100%; align-content: center; cursor: pointer; transition: var(--transition); } @media (hover: hover) { .header__menu a:not(.button):hover, .header__menu button:not(.button):hover { color: var(--text-color--lighter); } } .header__menu i { margin-left: 0.6rem; transform: translate(0, 3%); } .header__menu .active a:not(.button), .header__menu .active button:not(.button) { font-weight: 700; color: var(--text-color--accent); } @media screen and ( max-width: 79.9375em ) { .header__languages-switcher { grid-row: 1/-1; position: absolute; left: 0; } .header__languages-switcher::after { color: var(--text-color--invert); } .header__language.active button, .header__language.active a { color: var(--text-color--invert); } .header__actions { align-content: center; justify-content: space-between; grid-row: 1/-1; width: 100%; height: var(--header-actions-height); padding: 0 var(--grid-margin); background: var(--background-color--dark); position: absolute; top: 100vh; left: 0; z-index: 2; transform: translate(0, -100%); } .header__actions .button { --button-primary: var(--cyan); --button-secondary: var(--white); --button-ternary: var(--yellow); } .header__actions .button:not(:hover) { --button-icon-color: var(--button-primary); } .header__menu { display: flex; align-items: flex-start; width: 100vw; height: calc(100vh - var(--header-height) - var(--header-actions-height)); padding: 3rem var(--grid-margin); grid-row: 1/-1; grid-row: 1/-1; position: absolute; top: var(--header-height); left: 0; z-index: 2; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .header__menu::before, .header__menu::after { content: ""; display: block; width: 100%; height: 3rem; background: linear-gradient(to bottom, var(--background-color--medium), transparent); position: fixed; left: 0; z-index: 3; } .header__menu::before { top: var(--header-height); } .header__menu::after { bottom: var(--header-actions-height); transform: scale(1, -1); } .header__menu::-webkit-scrollbar { display: none; } .header__menu a:not(.button), .header__menu button:not(.button) { flex-wrap: nowrap; justify-content: space-between; } .header__menu a, .header__menu button { color: var(--text-color--invert); font-weight: 600; font-size: 3.2rem; line-height: 2em; } .header__menu i { color: var(--text-color--accent-bis); } .header__list { flex-wrap: wrap; flex: 0 0 calc( 6 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 5 * var(--grid-gap) ); } .header__item { flex: 0 0 100%; } .header__item .button { padding: 0; } .header__item .button::before { display: none; } .header__sublist { padding-left: 3rem !important; } .header__sublist a, .header__sublist button { font-size: 2.4rem; line-height: 1.5em !important; } .header__sublist::before { display: none !important; } .header__search .form__input { background: transparent; border-color: var(--stroke-color--medium); color: var(--text-color--invert); } .header__search .button-icon { --button-icon-background: var(--background-color); --button-icon-color: var(--text-color); } } @media screen and ( max-width: 63.9375em ) { .header__list { flex: 0 0 calc( 8 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 7 * var(--grid-gap) ); } } @media screen and ( max-width: 48em ) { .header__list { flex: 0 0 100%; } .header__button { position: absolute; top: 50%; transform: translate(0, -50%); } .header__search { width: 100%; } .header .form__input { width: 100% !important; } } @media screen and ( min-width: 80em ) { .header { gap: 2rem var(--grid-gap); } .header__languages-switcher { color: var(--text-color--light); grid-row: 2/span 1; position: absolute; right: 0; } .header__actions { padding-right: calc(var(--cta-height) + 3rem); } .header__logo { padding: 0; } .header__logo img { max-height: 9.6rem; } .header__menu-button { display: none; } } .hero { --hero-spacing-top: 9.6rem; --hero-spacing-bottom: 3.2rem; --hero-min-height: 35rem; position: relative; z-index: 2; } .hero--search, .hero--default { display: grid; grid-template-columns: 1fr; grid-template-rows: var(--hero-spacing-top) auto repeat(4, auto) var(--hero-spacing-bottom); grid-template-areas: "paddingTop" "space" "surtitle" "title" "text" "actions" "paddingBottom"; min-height: var(--hero-min-height); max-height: 65rem; position: relative; z-index: 2; } .hero--search::before, .hero--default::before { content: ""; width: 100vw; height: 100%; background: url("../img/decorations/decoration-fertility.svg") no-repeat center 45%/70%, var(--background-color--lighter); opacity: 0; position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } .hero--search .hero__surtitle, .hero--default .hero__surtitle { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: surtitle; } .hero--search .hero__title, .hero--default .hero__title { -ms-grid-row: 4; -ms-grid-column: 1; grid-area: title; } .hero--search .hero__text, .hero--default .hero__text { -ms-grid-row: 5; -ms-grid-column: 1; grid-area: text; } .hero--search .hero__actions, .hero--default .hero__actions { -ms-grid-row: 6; -ms-grid-column: 1; grid-area: actions; } .hero--search .hero__form, .hero--default .hero__form { grid-row: space/actions; } .hero--search .hero__image, .hero--default .hero__image { justify-self: center; width: 100vw; height: 100%; max-width: none; filter: brightness(45%); -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; position: absolute; z-index: -1; } .hero--search .hero__title, .hero--search .hero__text, .hero--search .hero__actions, .hero--default .hero__title, .hero--default .hero__text, .hero--default .hero__actions { margin-top: 2rem; } @media screen and ( max-width: 47.9375em ) { .hero--search::before, .hero--default::before { background-size: 125%; } } @media screen and ( max-width: 26.6875em ) { .hero--search, .hero--default { --hero-spacing-top: 14rem; --hero-spacing-bottom: 0; } .hero--search::before, .hero--default::before { grid-row: paddingTop/title; } .hero--search .hero__title, .hero--default .hero__title { margin-bottom: 2rem; } .hero--search .hero__text, .hero--default .hero__text { color: var(--text-color); } .hero--search .hero__image, .hero--default .hero__image { grid-row: paddingTop/title; } .hero--search .hero__actions .button, .hero--default .hero__actions .button { --button-primary: var(--blue-space); --button-secondary: var(--white); --button-ternary: var(--grey--light); } } @media screen and (min-width: 97.5625rem) { .hero--search::before, .hero--default::before { background-size: calc(var(--layout-max-width) * 0.7); background-position: 48% 25%; } } .hero--no-image::before { opacity: 1; } .hero--no-image .hero__text { color: var(--text-color); } .hero--circle { --hero-spacing-top: 0; --hero-spacing-bottom: var(--row-spacing-vertical); align-items: center; gap: 4rem 0; padding-top: var(--hero-spacing-top); padding-bottom: var(--hero-spacing-bottom); } .hero--circle .hero__image { position: relative; left: calc( 0.75 * ( 100% - ( ( var(--columns) - 1 ) * var(--grid-gap) ) ) / var(--columns) + -0.25 * var(--grid-gap) ); transform-origin: left center; transform: scale(1.25); } .hero--circle .hero__image img { border-radius: 100rem; } .hero--circle .hero__image::before { content: ""; display: block; width: 36%; aspect-ratio: 1/1; background: url("../img/decorations/decoration-small-circles-accent.svg") no-repeat center/contain; position: absolute; bottom: 3%; left: -10%; transform: scale(1.6); } @media screen and ( min-width: 48em ) { .hero--circle .hero__image::before { bottom: -7%; left: 3%; transform: scale(1); } } .hero--big { align-self: start; } .hero--big .hero__image { position: relative; top: -5%; left: calc( 0.75 * ( 100% - ( ( var(--columns) - 1 ) * var(--grid-gap) ) ) / var(--columns) + -0.25 * var(--grid-gap) ); transform: scale(1.1); } .hero--big .hero__surtitle { color: var(--title-color--light); font-weight: 600; font-size: 1.8rem; line-height: 1; text-transform: none; } .hero--simple { padding-top: var(--hero-spacing-top); padding-bottom: var(--hero-spacing-bottom); gap: 4rem var(--grid-gap); } .hero--simple .hero__content { gap: 0.8rem var(--grid-gap); } .hero--simple .hero__image img { border-radius: var(--radius--md); } .hero--simple .hero__image::before { content: ""; display: block; width: 30%; aspect-ratio: 1/1; background: url("../img/decorations/decoration-small-circles-accent.svg") no-repeat center/contain; position: absolute; top: 0; right: 0; transform: translate(50%, -50%) scale(0.75); } .hero--simple + .row:not(.row--contrast) { padding-top: 0; } @media screen and ( min-width: 48em ) { .hero--simple .hero__image::before { top: 0; left: 0; right: auto; transform: translate(-65%, -25%) scale(1); } } .hero--search { --hero-spacing-top: 12rem; --hero-spacing-bottom: 6rem; min-height: auto; } .hero--search::before { opacity: 1; background: var(--background-color--lighter); } .hero--dark { --title-color: var(--title-color--invert); color: var(--text-color--invert); } .hero:not(.hero--dark, .hero--no-image) .hero__text { color: var(--text-color--lighter); } .hero--center { align-content: center; justify-items: center; text-align: center; } .hero--center .hero__content { justify-content: center; } .hero--spacing { margin-bottom: var(--block-spacing-vertical); } .hero__content { gap: var(--block-gap-vertical) 0; } .hero__surtitle { text-transform: uppercase; letter-spacing: 0.03em; order: -1; } .hero__image { position: relative; z-index: -1; } .hero__about { margin-top: 4rem; } .hero__about * + * { margin-top: 0.8rem; } .hero__position, .hero__place { font-size: 2rem; } .hero__place { font-weight: 700; } .hero__list { display: grid; grid-template-columns: 1fr; gap: 0.8rem var(--grid-gap); margin-top: 1em; } .hero__item > * { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 1em; } .hero__item i { transform: scale(1.2); } .hero__numbers .numbers__item { flex: 0 1 9.5em; } @media screen and ( max-width: 47.9375em ) { .hero--circle .hero__image { margin-top: -20%; order: -1; transform: translate(calc( 2 * ( 100% - ( ( var(--columns) - 1 ) * var(--grid-gap) ) ) / var(--columns) + 2 * var(--grid-gap) ), 0) scale(0.9); } .hero--big .hero__image { top: 0; } .hero--simple .hero__title { font-size: 4rem; line-height: 4.8rem; } .hero--simple .hero__image { order: -1; } .hero__surtitle { font-size: 1.3rem; } } @media screen and ( min-width: 48em ) { .hero { --hero-spacing-top: 12rem; --hero-spacing-bottom: 8rem; --hero-min-height: 48rem; } .hero--big .hero__image { left: calc( 1 * ( 100% - ( ( var(--columns) - 1 ) * var(--grid-gap) ) ) / var(--columns) + 0 * var(--grid-gap) ); } .hero--big .hero__surtitle { font-size: 2rem; } .hero--simple { --hero-spacing-top: 14rem; gap: 8rem var(--grid-gap); } .hero--simple .hero__content { gap: var(--block-gap-vertical) var(--grid-gap); } .hero__list { font-size: 1.8rem; } .hero__about { margin-top: 6rem; } } @media screen and ( min-width: 80em ) { .hero--big { --hero-spacing-bottom: 16rem; } .hero--big .hero__image { left: calc( 0.75 * ( 100% - ( ( var(--columns) - 1 ) * var(--grid-gap) ) ) / var(--columns) + -0.25 * var(--grid-gap) ); } .hero__section .hero__list { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; } } .block__rte a:not(.button), .row--rte a:not(.button), .form__rte a:not(.button), .form__label a { font-weight: 500; color: var(--text-color--accent); text-decoration: underline; text-underline-offset: 0.1em; text-decoration-thickness: 0.1rem; transition: var(--transition); } @media (hover: hover) { .block__rte a:hover:not(.button), .row--rte a:hover:not(.button), .form__rte a:hover:not(.button), .form__label a:hover { background: var(--background-color--accent); color: var(--text-color--invert); } } .block__rte > * + *:not(li), .row--rte > * + *:not(li), .form__rte > * + *:not(li), .hero__text > * + *:not(li) { margin-top: 0.5em; } .block__rte > * + img, .row--rte > * + img, .form__rte > * + img, .hero__text > * + img { margin-top: 1em; } .block__rte > * + h1, .row--rte > * + h1, .form__rte > * + h1, .hero__text > * + h1, .block__rte > * + h2, .row--rte > * + h2, .form__rte > * + h2, .hero__text > * + h2 { margin-top: 2em; } @media screen and ( min-width: 48em ) { .block__rte > * + *:not(li), .row--rte > * + *:not(li), .form__rte > * + *:not(li), .hero__text > * + *:not(li) { margin-top: 1em; } .block__rte > * + img, .row--rte > * + img, .form__rte > * + img, .hero__text > * + img { margin-top: 3em; } } .block__rte, .row--rte, .form__rte { --rte-mark-color: var(--text-color--accent); } .block__rte h2, .row--rte h2, .form__rte h2 { font-weight: 600; } .block__rte h3, .row--rte h3, .form__rte h3 { font-weight: 700; } .block__rte h3, .row--rte h3, .form__rte h3, .block__rte h4, .row--rte h4, .form__rte h4, .block__rte h5, .row--rte h5, .form__rte h5, .block__rte h6, .row--rte h6, .form__rte h6 { color: var(--title-color--lighter); } .block__rte > img, .row--rte > img, .form__rte > img, .block__rte p > img, .row--rte p > img, .form__rte p > img { border-radius: var(--radius--md); } .block__rte ul:not(.block__list) > li, .row--rte ul:not(.block__list) > li, .form__rte ul:not(.block__list) > li { padding-left: 1.3em; position: relative; } .block__rte ul:not(.block__list) > li::before, .row--rte ul:not(.block__list) > li::before, .form__rte ul:not(.block__list) > li::before { content: "•"; position: absolute; left: 0; } .block__rte ul:not(.block__list) > li li:before, .row--rte ul:not(.block__list) > li li:before, .form__rte ul:not(.block__list) > li li:before { -webkit-text-stroke: 0.1rem var(--rte-mark-color); color: transparent; } .block__rte ol:not(.block__list), .row--rte ol:not(.block__list), .form__rte ol:not(.block__list) { counter-reset: index; } .block__rte ol:not(.block__list) > li, .row--rte ol:not(.block__list) > li, .form__rte ol:not(.block__list) > li { counter-increment: index; position: relative; } .block__rte ol:not(.block__list) > li::before, .row--rte ol:not(.block__list) > li::before, .form__rte ol:not(.block__list) > li::before { content: counters(index, ".", decimal) "."; margin-right: 1rem; } .block__rte li:not(.block__item) + li, .row--rte li:not(.block__item) + li, .form__rte li:not(.block__item) + li, .block__rte li:not(.block__item) ul, .row--rte li:not(.block__item) ul, .form__rte li:not(.block__item) ul, .block__rte li:not(.block__item) ol, .row--rte li:not(.block__item) ol, .form__rte li:not(.block__item) ol { margin-top: 0.25em; } .block__rte li:not(.block__item) ul, .row--rte li:not(.block__item) ul, .form__rte li:not(.block__item) ul, .block__rte li:not(.block__item) ol, .row--rte li:not(.block__item) ol, .form__rte li:not(.block__item) ol { margin-bottom: 0.25em; } .block__rte li:not(.block__item) ol, .row--rte li:not(.block__item) ol, .form__rte li:not(.block__item) ol { margin-left: 1.3em; } .block__rte li:not(.block__item)::before, .row--rte li:not(.block__item)::before, .form__rte li:not(.block__item)::before { color: var(--rte-mark-color); } @media screen and ( min-width: 48em ) { .block__rte > img, .row--rte > img, .form__rte > img, .block__rte p > img, .row--rte p > img, .form__rte p > img { width: calc(100% + var(--grid-gap) * 2); max-width: none; transform: translate(calc(var(--grid-gap) * -1), 0); } } .row { --row-background: var(--background-color); --row-circle: url("../img/decorations/decoration-circles-grey.svg"); padding: var(--row-spacing-vertical) 0; position: relative; z-index: 2; } .row::before { content: ""; display: none; width: 100vw; height: 100%; background: var(--row-background); position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } .row--contrast { --row-circle: url("../img/decorations/decoration-circles-white.svg"); --row-background: var(--background-color--lighter); color: var(--text-color--light); } .row--contrast::before { display: block; } .row--contrast + .row--contrast { margin-top: var(--block-spacing-vertical); } .row--dark { --row-circle: url("../img/decorations/decoration-circles-dark.svg"); --row-background: var(--background-color--medium); --text-color: var(--text-color--invert); --title-color: var(--title-color--invert); color: var(--text-color); } .row--reduce { padding: var(--block-spacing-vertical) 0; } .row--reduce + .row--reduce:not(.row--contrast) { padding-top: 0; } .row--rte + .row:not(.row--contrast) { padding-top: 0; } .row--fertility::before { background: url("../img/decorations/decoration-fertility.svg") no-repeat 25% 25%/70%, var(--row-background); } @media screen and ( max-width: 47.9375em ) { .row--fertility::before { background-size: 125%; background-position: center 0%; } } @media screen and (min-width: 97.5625rem) { .row--fertility::before { background-size: calc(var(--layout-max-width) * 0.7); background-position: 48% 25%; } } .row--circle::before { display: block; background: var(--row-circle), var(--row-background); background-repeat: no-repeat; background-size: 100vw; } @media screen and ( min-width: 48em ) { .row--circle::before { background-size: 75vw; } } @media screen and ( min-width: 64em ) { .row--circle::before { background-size: 65vw; } } @media screen and (min-width: 97.5625rem) { .row--circle::before { background-size: 80rem; } } .row--circle.row--circle--top-right::before { background-position: 20vw 0; } @media screen and ( min-width: 64em ) { .row--circle.row--circle--top-right::before { background-position: 50vw 0; } } @media screen and (min-width: 97.5625rem) { .row--circle.row--circle--top-right::before { background-position: calc(50% + 50rem) 0; } } .row--circle.row--circle--corner-right::before { background-position: 20vw -37vw; } @media screen and ( min-width: 64em ) { .row--circle.row--circle--corner-right::before { background-position: 50vw -23vw; } } @media screen and (min-width: 97.5625rem) { .row--circle.row--circle--corner-right::before { background-position: calc(50% + 50rem) -30rem; } } .row--circle.row--circle--top-left::before { background-position: -27vw 0; } @media screen and ( min-width: 64em ) { .row--circle.row--circle--top-left::before { background-position: -15vw 0; } } @media screen and (min-width: 97.5625rem) { .row--circle.row--circle--top-left::before { background-position: calc(50% - 58rem) 0; } } .row--circle.row--circle--corner-left::before { background-position: -27vw -37vw; } @media screen and ( min-width: 64em ) { .row--circle.row--circle--corner-left::before { background-position: -15vw -23vw; } } @media screen and (min-width: 97.5625rem) { .row--circle.row--circle--corner-left::before { background-position: calc(50% - 58rem) -30rem; } } .row--circle.row--circle--center-right::before { background-position: 40vw -20vw; } @media screen and ( min-width: 64em ) { .row--circle.row--circle--center-right::before { background-position: 40vw center; } } @media screen and (min-width: 97.5625rem) { .row--circle.row--circle--center-right::before { background-position: calc(50% + 40rem) center; } } .row--circle.row--circle--bottom-right::before { background-position: 40vw -20vw; } @media screen and ( min-width: 64em ) { .row--circle.row--circle--bottom-right::before { background-position: 120% 100%; } } @media screen and (min-width: 97.5625rem) { .row--circle.row--circle--bottom-right::before { background-position: calc(50% + 40rem) 100%; } } hr { width: calc(100% + var(--grid-margin) * 2); border-top: 0.1rem solid var(--stroke-color--light); position: relative; left: calc(var(--grid-margin) * -1); } .list { --parent-columns: var(--columns); gap: 4rem var(--grid-gap) !important; } .list--reduce { gap: 2rem var(--grid-gap) !important; } .list__item, .block--text-image .block__list li { padding-left: calc( 2 * ( 100% - ( ( var(--parent-columns) - 1 ) * var(--grid-gap) ) ) / var(--parent-columns) + 2 * var(--grid-gap) ); } .list__title, .block--text-image .block__list h2, .block--text-image .block__list h3, .block--text-image .block__list h4, .block--text-image .block__list h5, .block--text-image .block__list h6 { display: block; position: relative; margin-bottom: 1.2rem; } .list__title::before, .block--text-image .block__list h2::before, .block--text-image .block__list h3::before, .block--text-image .block__list h4::before, .block--text-image .block__list h5::before, .block--text-image .block__list h6::before { content: ""; width: calc( 2 * ( 100% - ( ( (var(--columns) - 1) - 1 ) * var(--grid-gap) ) ) / (var(--columns) - 1) + 1 * var(--grid-gap) ); height: 0.3rem; padding: 0 1%; background: var(--background-color--accent-bis); background-clip: content-box; position: absolute; top: 50%; left: calc(var(--grid-gap) * -1); transform: translate(-100%, -50%); } @media screen and ( max-width: 39.9375em ) { .list--scrolled { gap: calc( 1 * ( 100% - ( ( var(--columns) - 1 ) * var(--grid-gap) ) ) / var(--columns) + 1 * var(--grid-gap) ) !important; } } @media screen and ( min-width: 48em ) { .list__item, .block--text-image .block__list li { padding-left: calc( 1 * ( 100% - ( ( var(--parent-columns) - 1 ) * var(--grid-gap) ) ) / var(--parent-columns) + 1 * var(--grid-gap) ); } .list__title::before, .block--text-image .block__list h2::before, .block--text-image .block__list h3::before, .block--text-image .block__list h4::before, .block--text-image .block__list h5::before, .block--text-image .block__list h6::before { width: calc( 1 * ( 100% - ( ( (var(--columns) - 1) - 1 ) * var(--grid-gap) ) ) / (var(--columns) - 1) + 0 * var(--grid-gap) ); } } @media screen and ( min-width: 64em ) { .list__title::before, .block--text-image .block__list h2::before, .block--text-image .block__list h3::before, .block--text-image .block__list h4::before, .block--text-image .block__list h5::before, .block--text-image .block__list h6::before { height: 0.6rem; padding: 0 3%; } } .block + .block { margin-top: var(--block-spacing-vertical); } .block--text-cta { gap: 8rem var(--grid-gap); } .block--articles { --block-gap-vertical: 3.2rem; } .block--articles .block__content { gap: 0; } .block--articles * + .block__list, .block--articles * + .block__scroller { margin-top: var(--block-gap-vertical); } .block--articles .block__scroller + *, .block--articles .block__list + * { margin-top: var(--block-gap-vertical); } .block--articles .block__list { gap: 4rem var(--grid-gap); } .block--articles.block--latest .block__content, .block--articles.block--latest .block__cta { grid-row: 1/span 1; } .block--articles.block--latest .block__cta { margin-top: 0; align-self: end; justify-self: end; } .block--title-cta { gap: 4rem 0; } .block--text-text { gap: var(--block-spacing-vertical) var(--grid-gap); } .block--text-image { gap: 5.6rem var(--grid-gap); } .block--text-image .block__image { border-radius: var(--radius--md); } .block--text-image .block__list { gap: 2rem 0; } .block--text-image .block__numbers { margin-top: calc(var(--block-spacing-vertical) - 5.6rem); } .block--text-image:not(.block--text-image--invert) .block__image { margin-left: auto; } .block--text-image--invert .block__image { order: -1; } .block--image-image .block__image { border-radius: var(--radius--md); } .block--newsletter { gap: 4rem var(--grid-gap); align-items: center; } .block--newsletter .block__form { width: 100%; padding: 4rem var(--grid-gap); box-sizing: content-box; border-radius: var(--radius--md); background: var(--background-color--accent-bis); position: relative; left: calc(var(--grid-gap) * -1); } .block--newsletter .form__checkmark { --icon-color: var(--text-color--accent-bis); } .block--cta { --cta-background: var(--background-color--accent); gap: 3rem 0; padding: var(--grid-gap); color: var(--text-color--invert); position: relative; z-index: 2; } .block--cta .block__title { color: var(--title-color--dark); font-weight: 700; } .block--cta::before { content: ""; display: block; width: 100%; height: 100%; background: var(--cta-background); border-radius: var(--radius--md); position: absolute; top: 0; left: 0; z-index: -1; } .block--cta::after { content: ""; aspect-ratio: 1/1; width: 8rem; background: url("../img/decorations/decoration-small-circles-dark.svg") no-repeat center/contain; position: absolute; top: 0; right: 0; transform: translate(-5%, -65%); } @media screen and ( min-width: 64em ) { .block--cta::after { width: 37%; transform: translate(80%, -33%); } } .block--cta--yellow { --cta-background: var(--background-color--accent-bis); } .block--colophon { align-items: center; padding: 3.2rem 0; border-top: 0.1rem solid var(--stroke-color); border-bottom: 0.1rem solid var(--stroke-color); gap: 1.6rem; } .block--colophon .block__title { margin-right: auto; } .block--colophon a { flex: 0 0 var(--cta-height); height: var(--cta-height); border-radius: 100rem; background: var(--background-color--dark); color: var(--text-color--invert); position: relative; } .block--colophon i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.25); } .block--news { --block-gap-vertical: 3.2rem; } .block--news .block__list, .block--news .block__list + *, .block--news .block__scroller, .block--news .block__scroller + * { margin-top: var(--block-gap-vertical); } .block--news .block__list { gap: var(--grid-gap); } .block--program * + .list { margin-top: var(--block-gap-vertical); } .block--center .block__cta { justify-content: center; } .block--video .block__image, .block--video .video__preview, .block--image .block__image, .block--image .video__preview { border-radius: var(--radius--md); } .block--members .block__list { margin-top: var(--block-spacing-vertical); } * + .block--slideshow { margin-top: var(--block-gap-vertical); } .block--informations { gap: 3rem var(--grid-gap); } .block__surtitle { color: var(--title-color--light); font-weight: 600; font-size: 1.8rem; line-height: 1; } .block__content { gap: var(--block-gap-vertical) 0; } .block__content .block__surtitle { order: -1; } .block__columns .block__title { display: flex; flex: 0 0 100%; flex-wrap: wrap; gap: var(--block-gap-vertical) 0; } .block__columns .block__title i { flex: 0 0 100%; order: -1; font-size: 2.8571428571em; line-height: 1em; } .block__columns .block__rte { flex: 0 0 100%; } .block__column { --block-gap-vertical: 1.2rem; } .block__image { width: 100%; } @media screen and ( max-width: 63.9375em ) { .block .block__scroller .block__list { flex-wrap: nowrap !important; gap: var(--grid-gap); width: calc(100% + var(--grid-margin) * 2); padding-left: var(--grid-margin); padding-right: var(--grid-margin); transform: translate(calc(var(--grid-margin) * -1), 0); scroll-snap-type: x mandatory; scroll-padding-left: var(--grid-margin); overflow-x: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .block .block__scroller .block__list::-webkit-scrollbar { display: none; } .block .block__scroller .block__item, .block .block__scroller .block--text-image .block__list li, .block--text-image .block__list .block .block__scroller li { scroll-snap-align: start; } } @media screen and ( max-width: 47.9375em ) { .block--newsletter .block__title { font-size: 4rem; line-height: 4.8rem; } .block--image-image { --radius--md: var(--radius); } .block--articles .block__scroller .block__list, .block--articles .scroller__item { gap: calc( 1.5 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 1.5 * var(--grid-gap) ) !important; scroll-padding-left: 0 !important; } .block--articles .block__scroller .block__list .block__item, .block--articles .block__scroller .block--text-image .block__list li, .block--text-image .block--articles .block__scroller .block__list li, .block--articles .scroller__item .block__item, .block--articles .scroller__item .block--text-image .block__list li, .block--text-image .block__list .block--articles .scroller__item li { scroll-snap-align: center !important; } .block--articles .block__item:first-child, .block--articles .block--text-image .block__list li:first-child, .block--text-image .block__list .block--articles li:first-child { margin-left: calc( 1.5 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 1.5 * var(--grid-gap) ); } .block--articles .block__item:last-child, .block--articles .block--text-image .block__list li:last-child, .block--text-image .block__list .block--articles li:last-child { margin-right: calc( 1.5 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 1.5 * var(--grid-gap) ); } .block--articles.block--latest .block__cta { justify-self: center; grid-row: unset; margin-top: var(--block-gap-vertical); } .block--news .block__list { gap: calc( 1 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 1 * var(--grid-gap) ) !important; } .block--news .block__item:first-child, .block--news .block--text-image .block__list li:first-child, .block--text-image .block__list .block--news li:first-child { margin-left: calc( 1 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 1 * var(--grid-gap) ); } .block--news .block__item:last-child, .block--news .block--text-image .block__list li:last-child, .block--text-image .block__list .block--news li:last-child { margin-right: calc( 1 * ( 100% - ( ( 12 - 1 ) * var(--grid-gap) ) ) / 12 + 1 * var(--grid-gap) ); } .block__columns { gap: 4.8rem var(--grid-gap); } } @media screen and ( max-width: 39.9375em ) { .block--colophon { justify-content: center; } .block--colophon .block__title { flex: 0 0 100%; text-align: center; } } @media screen and ( min-width: 48em ) { .block--cta { padding: var(--grid-gap) 0; padding-right: calc( 1.5 * ( 100% - ( ( var(--columns) - 1 ) * var(--grid-gap) ) ) / var(--columns) + 0.5 * var(--grid-gap) ); } .block--cta::before { width: calc(100% + var(--grid-gap) * 2); left: calc(var(--grid-gap) * -1); } .block--center .block__title, .block--center .block__text { text-align: center; } .block--articles, .block--news { --block-gap-vertical: 4.8rem; } .block--text-image .block__image { width: calc(100% - var(--grid-gap)); } .block--video .block__image, .block--video .video__preview, .block--image .block__image, .block--image .video__preview { width: calc(100% + var(--grid-gap) * 2); max-width: none; transform: translate(calc(var(--grid-gap) * -1), 0); } .block__image--offset-y { margin-top: 45%; } } .numbers__list { display: flex; flex-wrap: wrap; gap: 6rem var(--grid-gap); } .numbers__item { gap: 1.2rem var(--grid-gap); } .numbers__item > * { flex: 0 0 100%; } .numbers__title { font-size: 1.6rem; line-height: 1.2; font-weight: 600; color: var(--text-color--lighter); } .numbers__value { flex: 0 0 auto !important; order: -1; font-size: 6.4rem; font-weight: 500; line-height: 1; color: var(--text-color--accent-bis); position: relative; } .numbers__value::after { content: "+"; color: var(--text-color--accent); font-size: 0.28125em; line-height: 1em; font-weight: 700; position: absolute; top: 0; right: -0.6rem; transform: translate(100%, -50%); } .preview { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; grid-template-areas: "image" "date" "title" "button"; justify-items: start; align-items: start; gap: 0.4rem 0; height: 100%; } .preview__image { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: image; margin-bottom: 2rem; border-radius: var(--radius); -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .member > .preview__image { -ms-grid-row: 1; -ms-grid-row-span: 7; -ms-grid-column: 1; } .preview__date { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: date; font-size: 1.2rem; line-height: 1em; text-transform: uppercase; font-weight: 300; color: var(--title-color); } .preview__title { -ms-grid-row: 4; -ms-grid-column: 1; grid-area: title; font-weight: 500; } .preview > .preview__title { -ms-grid-row: 5; -ms-grid-column: 1; } .preview__button { -ms-grid-row: 7; -ms-grid-column: 1; grid-area: button; } @media screen and ( min-width: 48em ) { .preview--horizontal { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: "image spaceTop" "image date" "image title" "image button" "image spaceBottom"; gap: 0.4rem var(--grid-gap); align-items: center; } .preview--horizontal > .hero__title, .preview--horizontal > .hero__title { -ms-grid-row: 5; -ms-grid-column: 3; } .preview--horizontal > .preview__image { -ms-grid-row: 1; -ms-grid-row-span: 9; -ms-grid-column: 1; } .preview--horizontal > .preview__date { -ms-grid-row: 3; -ms-grid-column: 3; } .preview--horizontal > .preview__title { -ms-grid-row: 5; -ms-grid-column: 3; } .preview--horizontal > .preview__button { -ms-grid-row: 7; -ms-grid-column: 3; } } .quote { quotes: "“" "”" "‘" "’"; font-size: 4rem; line-height: 4.8rem; } .quote::before, .quote::after { color: var(--text-color--accent); font-size: 250%; } .quote::before { content: open-quote; transform: translate(0, 40%); } .quote::after { content: close-quote; } .quote, .quote__footer { text-align: center; } .quote__footer { margin-top: 1em; font-weight: 500; } @media screen and ( max-width: 47.9375em ) { .quote::before, .quote::after { display: block; text-align: center; } .quote::after { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -0.8rem); } .quote__footer { padding-bottom: 5.6rem; } } @media screen and ( min-width: 48em ) { .quote::before, .quote::after { position: absolute; line-height: 1em; } .quote::before { transform: translate(-150%, -15%); } .quote::after { transform: translate(50%, 15%); } } .answer--results { display: grid; grid-template-columns: repeat(var(--columns), 1fr); grid-template-rows: auto; grid-auto-flow: row; gap: 2rem var(--grid-gap); align-items: center; } .answer--results .answer__content { padding-top: 0; gap: 0.8rem 3rem; align-items: center; grid-column: 1/-1; grid-row: 1/span 1; } .answer--image .answer__content { grid-column: 1/-1; grid-row: 2/span 1; } @media screen and ( min-width: 64em ) { .answer--image .answer__content { grid-column: 1/span calc(var(--columns) - 3); grid-row: 1/span 1; } } .answer--image .answer__date { flex: 0 0 100%; } .answer--image .answer__image { grid-row: 1/span 1; grid-column: 1/-1; } @media screen and ( min-width: 40em ) { .answer--image .answer__image { grid-column: 1/span 6; } } @media screen and ( min-width: 64em ) { .answer--image .answer__image { grid-column: span 3/-1; grid-row: 1/-1; } } .answer--file .answer__title { padding-right: calc( 3 * ( 100% - ( ( var(--columns) - 1 ) * var(--grid-gap) ) ) / var(--columns) + 3 * var(--grid-gap) ); } @media screen and ( min-width: 48em ) { .answer--file .answer__title { padding-right: calc( 2 * ( 100% - ( ( var(--columns) - 1 ) * var(--grid-gap) ) ) / var(--columns) + 2 * var(--grid-gap) ); } } @media screen and ( min-width: 64em ) { .answer--file .answer__title { padding-right: calc( 1 * ( 100% - ( ( var(--columns) - 1 ) * var(--grid-gap) ) ) / var(--columns) + 1 * var(--grid-gap) ); } } .answer--faq { transition: var(--transition); overflow: hidden; } .answer--faq .answer__title { padding-right: calc( 1 * ( 100% - ( ( 8 - 1 ) * var(--grid-gap) ) ) / 8 + 1 * var(--grid-gap) ); cursor: pointer; position: relative; } .answer--faq .answer__title::after { content: "\ea4e"; color: var(--text-color--accent); font-weight: 400; position: absolute; top: 50%; right: 0; transform-origin: right center; transform: translate(0, -50%) scale(2); transition: var(--transition); } .answer--faq .answer__content { padding-right: calc( 1 * ( 100% - ( ( var(--columns) - 1 ) * var(--grid-gap) ) ) / var(--columns) + 1 * var(--grid-gap) ); opacity: 0; transition: var(--transition); transition-property: opacity; } .answer--faq:not([open]) { height: var(--answer-close); } .answer--faq:not([open]) * { display: block; } .answer--faq[open] { height: var(--answer-open); } .answer--faq[open] .answer__content { opacity: 1; transition-delay: 0.08s; } .answer--faq[open] .answer__title::after { transform: translate(0, -50%) scale(2, -2); } .answer__list { border-top: 0.1rem solid var(--stroke-color); border-bottom: 0.1rem solid var(--stroke-color); } .answer__item { padding: 3rem 0; } .answer__item > a { display: block; } .answer__item + .answer__item { border-top: 0.1rem solid var(--stroke-color); } .answer__content { padding-top: 0.8rem; color: var(--text-color--lighter); } .answer__title { flex: 0 0 100%; color: var(--title-color); height: var(--answer-close); font-size: 1.6rem; font-weight: 700; position: relative; } .answer__subtitle, .answer__date, .answer__icon, .answer .tag__title { font-size: 1.4rem; color: var(--text-color--lighter); } .answer__infos { margin-top: 0.8rem; align-items: center; gap: 0 3rem; } .answer__date { margin-right: 6rem; } .answer__tags { gap: 0 3rem; align-items: center; } .answer__image { border-radius: var(--radius--md); } .answer__icon { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; font-weight: 400; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); } .answer__icon i { order: -1; flex: 0 0 100%; font-size: 4.8rem; color: var(--text-color--accent); line-height: 1; } @media screen and ( min-width: 48em ) { .answer__title { font-size: 1.8rem; } } .event { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "type type" "header header"; overflow: hidden; border-radius: var(--radius--md); height: 100%; color: var(--text-color--invert); position: relative; z-index: 2; } .event::after { content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(65deg, #414B5A 40%, rgba(65, 75, 90, 0)); opacity: 0.9; pointer-events: none; position: absolute; z-index: -1; } .event__header { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: header; padding: var(--grid-gap); align-self: end; } .event > .event__header { -ms-grid-row: 2; -ms-grid-column: 1; -ms-grid-column-span: 2; } .event__title { padding-bottom: 1em; } .event__date, .event__place { font-weight: 300; } .event__type { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-area: type; padding: 2rem; padding-bottom: 0; text-align: right; color: var(--text-color--accent-bis); } .event__image { grid-column: 1/-1; grid-row: 1/-1; width: 100%; height: 100%; filter: brightness(65%); position: relative; z-index: -1; } @media screen and ( min-width: 48em ) { .event__header { padding: 3rem; } } .pagination { justify-content: center; font-size: 1.4rem; line-height: var(--cta-height); -webkit-user-select: none; -moz-user-select: none; user-select: none; } @media screen and ( min-width: 48em ) { .pagination { font-size: 1.8rem; } } .pagination__link { color: var(--text-color--lighter); } @media (hover: hover) { .pagination__link:hover { color: var(--text-color); } } .pagination a { display: block; padding: 0 0.6rem; min-width: 3rem; text-align: center; border-radius: 0.4rem; transition: var(--transition); } @media screen and ( min-width: 48em ) { .pagination a { min-width: var(--cta-height); padding: 0 1.2rem; } } .pagination__item a span { display: inline-block; position: relative; } .pagination__item a span::before { content: ""; display: block; width: 100%; height: 0.1rem; background: currentColor; position: absolute; bottom: 0.5em; left: 0; transform: scale(0, 1); transition: var(--transition); } @media (hover: hover) { .pagination__item a:hover span::before { transform: scale(1); } } .pagination .active a { background: var(--background-color--medium); color: var(--text-color--invert); } .member { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "image spaceTop" "image name" "image position" "image spaceBottom"; align-items: center; gap: 0 2.4rem; } .member__image { -ms-grid-row: 1; -ms-grid-column: 1; width: 8rem; grid-area: image; border-radius: 100rem; } .member > .member__image { -ms-grid-row: 1; -ms-grid-row-span: 7; -ms-grid-column: 1; } .member__name { -ms-grid-row: 3; -ms-grid-column: 3; grid-area: name; } .member__position { -ms-grid-row: 5; -ms-grid-column: 3; grid-area: position; color: var(--text-color--lighter); } @media screen and ( min-width: 48em ){ .preview--horizontal > .member__image { -ms-grid-row: 1; -ms-grid-row-span: 9; -ms-grid-column: 1; } } @media screen and ( min-width: 48em ) { .member__image { width: 8rem; } } @media screen and ( min-width: 64em ) { .member { gap: 0 2.4rem; } .member__image { width: 10rem; } } @media screen and ( min-width: 80em ) { .member { gap: 0 4rem; } .member__image { width: 14rem; } } .information__list { gap: 3rem var(--grid-gap); } .information__item { padding-left: 4.8rem; } @media screen and ( min-width: 64em ) { .information__item { padding-left: 6.4rem; } } .information__title { position: relative; } .information__title i { font-size: 3.2rem; color: var(--text-color--accent-bis); position: absolute; top: 50%; left: -4.8rem; transform: translate(0, -75%); } @media screen and ( min-width: 64em ) { .information__title i { font-size: 4.8rem; left: -6.4rem; transform: translate(0, -50%); } } .information__button { margin-top: 0.8rem; } .slider { position: relative; } .slider__list { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "slide"; } .slider__item { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: slide; } .slider__content { display: block; border-radius: var(--radius--md); overflow: hidden; position: relative; } .slider__button { display: block; width: 100%; height: 100%; padding-right: calc( 1 * ( 100% - ( ( var(--columns) - 1 ) * var(--grid-gap) ) ) / var(--columns) + 1 * var(--grid-gap) ); box-sizing: content-box; cursor: pointer; position: absolute; top: 0; } .slider__button i { display: none; color: var(--text-color--invert); position: absolute; top: 50%; pointer-events: none; transform: translate(0, -50%) scale(1.5); } @media screen and ( min-width: 48em ) { .slider__button i { display: block; transform: translate(0, -50%) scale(2); } } .slider__button--previous { border-radius: 0 var(--radius--md) var(--radius--md) 0; left: calc(var(--grid-gap) * -1); transform: translate(-100%, 0); } .slider__button--previous i { right: calc(var(--grid-space) * 0.75); } @media screen and ( min-width: 48em ) { .slider__button--previous { left: calc(var(--grid-gap) * -2); } } @media screen and ( min-width: 85.375em ) { .slider__button--previous i { right: var(--grid-space); } } .slider__button--next { border-radius: var(--radius--md) 0 0 var(--radius--md); right: calc(var(--grid-gap) * -1); transform: translate(100%, 0); } .slider__button--next i { left: calc(var(--grid-space) * 0.75); } @media screen and ( min-width: 48em ) { .slider__button--next { right: calc(var(--grid-gap) * -2); } } @media screen and ( min-width: 85.375em ) { .slider__button--next i { left: var(--grid-space); } } @media screen and ( min-width: 48em ) { .slider__content { width: calc(100% + var(--grid-gap) * 2); left: calc(var(--grid-gap) * -1); } } .video { display: block; color: var(--text-color--invert); position: relative; cursor: pointer; } .video__preview { filter: brightness(50%); } .video__icon { align-self: center; justify-self: center; font-size: 6.4rem; position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%); } @media screen and ( min-width: 48em ) { .video__icon { font-size: 11rem; } } .footer { max-width: var(--layout-max-width); justify-self: center; grid-template-rows: auto auto auto; padding: var(--grid-margin); padding-bottom: 0; gap: 0 var(--grid-gap); color: var(--text-color--invert); font-weight: 300; position: relative; z-index: 2; } .footer::before { content: ""; display: block; width: 100vw; height: 100%; background: var(--background-color--dark); position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } .footer__logo { display: block; } .footer__logo img { background: none; height: 100%; max-height: 7.2rem; -o-object-fit: contain; object-fit: contain; -o-object-position: left center; object-position: left center; } .footer__menu a { display: block; } .footer__links { align-items: center; padding: 3.2rem 0; margin-top: var(--grid-gap); border-top: 0.1rem solid var(--stroke-color--light); border-bottom: 0.1rem solid var(--stroke-color--light); gap: 1.6rem; } .footer__links a:not(.footer__contact) { flex: 0 0 var(--cta-height); height: var(--cta-height); border-radius: 100rem; background: var(--background-color); color: var(--text-color--light); position: relative; } .footer__links i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.25); } .footer__contact { margin-left: auto; } .footer__legals { padding: 2.4rem 0; gap: 0.8rem 3rem; } .footer .title + *, .footer .form__field--search .form__input + *, .form__field--search .footer .form__input + *, .footer .form__rte h1 + *, .form__rte .footer h1 + *, .footer .form__rte h2 + *, .form__rte .footer h2 + *, .footer .form__rte h3 + *, .form__rte .footer h3 + *, .footer .form__rte h4 + *, .form__rte .footer h4 + *, .footer .form__rte h5 + *, .form__rte .footer h5 + *, .footer .form__rte h6 + *, .form__rte .footer h6 + *, .footer .row--rte h1 + *, .row--rte .footer h1 + *, .footer .row--rte h2 + *, .row--rte .footer h2 + *, .footer .row--rte h3 + *, .row--rte .footer h3 + *, .footer .row--rte h4 + *, .row--rte .footer h4 + *, .footer .row--rte h5 + *, .row--rte .footer h5 + *, .footer .row--rte h6 + *, .row--rte .footer h6 + *, .footer .block--text-image .block__list h2 + *, .block--text-image .block__list .footer h2 + *, .footer .block--text-image .block__list h3 + *, .block--text-image .block__list .footer h3 + *, .footer .block--text-image .block__list h4 + *, .block--text-image .block__list .footer h4 + *, .footer .block--text-image .block__list h5 + *, .block--text-image .block__list .footer h5 + *, .footer .block--text-image .block__list h6 + *, .block--text-image .block__list .footer h6 + *, .footer .block__rte h1 + *, .block__rte .footer h1 + *, .footer .block__rte h2 + *, .block__rte .footer h2 + *, .footer .block__rte h3 + *, .block__rte .footer h3 + *, .footer .block__rte h4 + *, .block__rte .footer h4 + *, .footer .block__rte h5 + *, .block__rte .footer h5 + *, .footer .block__rte h6 + *, .block__rte .footer h6 + * { margin-top: 0.8rem; } @media screen and ( max-width: 79.9375em ) { .footer__actions { margin-top: 3rem; } } @media screen and ( max-width: 63.9375em ) { .footer__logo { margin-bottom: 3rem; } } @media screen and ( max-width: 47.9375em ) { .footer__address { margin-bottom: 3rem; } } @media screen and ( max-width: 39.9375em ) { .footer__links { justify-content: center; } .footer__legals a { flex: 0 0 100%; } .footer__contact { flex: 0 0 100%; text-align: center; } } @media screen and ( max-width: 26.6875em ) { .footer__button { flex: 1 0 0%; } } @media screen and ( min-width: 40em ) { .footer__contact { margin-left: auto; } } @media screen and ( min-width: 80em ) { .footer__logo img { max-height: 9.6rem; } } body.page-single .row:not(.row--contrast) + .row:not(.row--contrast) { padding-top: 0; } .js-header { --header-background: var(--background-color); --header-stroke: var(--stroke-color--light); --header-input-width: 30rem; } .js-header .form__input { width: var(--header-input-width); transition: var(--transition); } .js-header::before, .js-header .header__logo, .js-header .header__languages-switcher, .js-header .header__actions, .js-header .header__button, .js-header .header__item, .js-header .header__sublist, .js-header .header__menu, .js-header .header__menu-button { transition: var(--transition); } .js-header .header__menu-button span, .js-header .header__menu-button span::before, .js-header .header__menu-button span::after { transition: var(--transition); } @media screen and ( max-width: 79.9375em ) { .js-header:not(.header--open) .header__languages-switcher, .js-header:not(.header--open) .header__actions, .js-header:not(.header--open) .header__menu { opacity: 0; pointer-events: none; } } @media screen and ( max-width: 79.9375em ) { .js-header.header--open { --header-background: var(--background-color--medium); --header-stroke: var(--background-color--medium); } .js-header.header--open::before { transform: translate(-50%, 0) translate(0, 0); } .js-header.header--open .header__languages-switcher, .js-header.header--open .header__actions, .js-header.header--open .header__menu { transition-delay: 0.16s; } .js-header.header--open .header__logo { opacity: 0; pointer-events: none; } .js-header.header--open .header__menu-button { background: var(--background-color--light); } .js-header.header--open .header__menu-button span { background: transparent; } .js-header.header--open .header__menu-button span::before { transform: translate(0, 0) rotate(45deg); } .js-header.header--open .header__menu-button span::after { transform: translate(0, 0) rotate(135deg); } } .js-header:not(.header--search-open) .form__input { opacity: 0; pointer-events: none; } @media screen and ( min-width: 80em ) { .js-header:not(.header--search-open) .header__button { transform: translate(calc(var(--header-input-width) - var(--cta-height)), 0); } .js-header:not(.header--search-open) .header__button:not(:hover) { transition-delay: 0.12s; } } @media screen and ( max-width: 48em ) { .js-header.header--search-open .header__button { opacity: 0; pointer-events: none; } } @media screen and ( min-width: 80em ) { .js-header.header--search-open .form__input { transition-delay: 0.12s; } } @media screen and ( min-width: 80em ) { .js-header .header__item:not(.open) .header__sublist { opacity: 0; pointer-events: none; transform: translate(0, 1.2rem); } } .js-header .header__languages-switcher:not(.open) .header__language:not(.active) { opacity: 0; pointer-events: none; } .js-header .header__languages-switcher:not(.open)::before { opacity: 0; } @media screen and ( max-width: 79.9375em ) { .js-header .header__languages-switcher.open button, .js-header .header__languages-switcher.open a, .js-header .header__languages-switcher.open::after { color: var(--text-color); } } @media screen and ( max-width: 79.9375em ) { .js-accordion { overflow: hidden; } .js-accordion.open { height: var(--accordion-height-open); } .js-accordion:not(.open) { height: var(--accordion-height); } .js-accordion:not(.open) .header__sublist { opacity: 0; pointer-events: none; } } .slider__item, .slider__button, .slider__content { transition: var(--transition); transition-duration: 0.56s; transition-timing-function: cubic-bezier(0.4, 0, 0.1, 1); } .js-slider { --slider-index: 0; --slider-position: -1; --slider-max: 1; --slider-gap-factor: 1; } .js-slider .slider__item { --slide-position: 0; transform: translate(calc( 100% * var(--slide-position) + var(--grid-gap) * var(--slider-gap-factor) * ( var(--slide-position) - var(--slider-index) ) - 100% * var(--slider-index) ), 0); } .js-slider .slider__item:not(.active) .slider__content { opacity: 0.5; } .js-slider.first .slider__button--previous { opacity: 0; pointer-events: none; } .js-slider.last .slider__button--next { opacity: 0; pointer-events: none; } .js-slider .slider__item:not(.before-active, .active, .after-active) { opacity: 0; position: none; } @media screen and ( min-width: 48em ) { .js-slider { --slider-gap-factor: 3; } }