@charset "UTF-8"; /* purgecss start ignore */ /*** 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; } /* purgecss end ignore */ /* * https://remixicon.com * https://github.com/Remix-Design/RemixIcon * Copyright RemixIcon.com * Released under the Apache License Version 2.0 */ @font-face { font-family: "remixicon"; src: url("../fonts/remixicon/remixicon.woff2?t=1688128030671") format("woff2"), url("../fonts/remixicon/remixicon.woff?t=1688128030671") format("woff"), url("../fonts/remixicon/remixicon.ttf?t=1688128030671") format("truetype"); font-display: swap; } @font-face { font-family: "gt-flexa"; src: url("../fonts/gt-flexa/GT-Flexa-Standard-Light.woff2") format("woff2"), url("../fonts/gt-flexa/GT-Flexa-Standard-Light.woff") format("woff"), url("../fonts/gt-flexa/GT-Flexa-Standard-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "gt-flexa"; src: url("../fonts/gt-flexa/GT-Flexa-Standard-Regular.woff2") format("woff2"), url("../fonts/gt-flexa/GT-Flexa-Standard-Regular.woff") format("woff"), url("../fonts/gt-flexa/GT-Flexa-Standard-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "gt-flexa"; src: url("../fonts/gt-flexa/GT-Flexa-Standard-Medium.woff2") format("woff2"), url("../fonts/gt-flexa/GT-Flexa-Standard-Medium.woff") format("woff"), url("../fonts/gt-flexa/GT-Flexa-Standard-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "gt-flexa"; src: url("../fonts/gt-flexa/GT-Flexa-Standard-Bold.woff2") format("woff2"), url("../fonts/gt-flexa/GT-Flexa-Standard-Bold.woff") format("woff"), url("../fonts/gt-flexa/GT-Flexa-Standard-Bold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "gt-flexa-expanded"; src: url("../fonts/gt-flexa/GT-Flexa-Expanded-Medium.woff2") format("woff2"), url("../fonts/gt-flexa/GT-Flexa-Expanded-Medium.woff") format("woff"), url("../fonts/gt-flexa/GT-Flexa-Expanded-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "gt-flexa-expanded"; src: url("../fonts/gt-flexa/GT-Flexa-Expanded-Bold.woff2") format("woff2"), url("../fonts/gt-flexa/GT-Flexa-Expanded-Bold.woff") format("woff"), url("../fonts/gt-flexa/GT-Flexa-Expanded-Bold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "gt-flexa-compressed"; src: url("../fonts/gt-flexa/GT-Flexa-X-Compressed-Bold-Italic.woff2") format("woff2"), url("../fonts/gt-flexa/GT-Flexa-X-Compressed-Bold-Italic.woff") format("woff"), url("../fonts/gt-flexa/GT-Flexa-X-Compressed-Bold-Italic.ttf") format("truetype"); font-display: swap; } :root { --grid-margin: 0.75rem; --grid-gap: 0.5rem; --list-gap: 1.5rem; --grid-space: 1.25rem; --header-quick-width: 7.5rem; --header-quick-offset: 20vh; --header-scale: 0.6; --header-hero-height: 80vh; --rte-block-spacing: 2.5rem; --white: #FBFBFB; --red: #EA5B5B; --blue: #4494C1; --green: #61C16B; --yellow: #D3A138; --grey-dark: #313131; --black: #111111; --alert: #EA5B5B; --warning: #D3A138; --succeed: #61C16B; --text-color: #1A1A1A; --text-color-invert: #FBFBFB; --text-color-darker: #1A1A1A; --text-color-light: #848484; --text-color-lighter: #C4C4C4; --text-color-white: #FBFBFB; --title-color: #111111; --stroke-color: #1A1A1A; --stroke-color-invert: #FBFBFB; --stroke-color-darker: #1A1A1A; --stroke-color-light: #848484; --stroke-color-lighter: #C4C4C4; --stroke-color-white: #FBFBFB; --bg-color: #FBFBFB; --bg-color-invert: #111111; --bg-color-dark: #313131; --bg-color-darker: #1A1A1A; --bg-color-lighter: #F2F2F2; --bg-color-black: #111111; --bg-color-white: #FBFBFB; --contrast-color: var(--stroke-color); --transition-easing: cubic-bezier(0.53, 0.34, 0.26, 1); --transition-easing--in-out: cubic-bezier(0.4, 0, 0.1, 1); --transition-duration: 0.32s; --transition: all 0.32s cubic-bezier(0.53, 0.34, 0.26, 1); --z-index-dialog: 50; --z-index-curtain: 70; --z-index-sticker: 75; --z-index-header-logo: 80; --z-index-reading-indicator: 90; --z-index-header-bg: 100; --z-index-header: 110; --z-index-search: 120; --z-index-header-button: 130; --z-index-newsletter: 140; --z-index-cookies: 150; } @media (prefers-color-scheme: dark) { :root { --text-color: #FBFBFB; --text-color-invert: #111111; --title-color: #FBFBFB; --stroke-color: #FBFBFB; --bg-color: var(--bg-color-darker); --bg-color-dark: #C4C4C4; --bg-color-lighter: #313131; --bg-color-invert: #FBFBFB; } } @media screen and ( min-width: 26.75em ) { :root { --grid-margin: 2.5rem; --grid-gap: 1rem; --grid-space: 4rem; } } @media screen and ( min-width: 48em ) { :root { --grid-margin: 3.75rem; --grid-gap: 2rem; --grid-space: 5.75rem; --rte-block-spacing: 5rem; } } @media screen and ( min-width: 64em ) { :root { --grid-margin: 7.5rem; --grid-space: 9.5rem; } } @media screen and ( min-width: 80em ) { :root { --grid-gap: 2.5rem; --grid-space: 10rem; } } @media screen and ( min-width: 85.375em ) { :root { --grid-margin: 8.75rem; --grid-space: 11.25rem; } } html, body { font-family: "Source Serif 4", serif; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .main-wrapper { font-size: 1rem; line-height: 1.5; } em { font-style: italic; } strong { font-weight: 600; } html, body, .editor-styles-wrapper { background: var(--bg-color); color: var(--text-color); } ::-moz-selection { color: var(--bg-color); background: var(--text-color); } ::selection { color: var(--bg-color); background: var(--text-color); } .theme-light { --text-color: #1A1A1A; --text-color-invert: #FBFBFB; --title-color: #111111; --stroke-color: #1A1A1A; --bg-color: #FBFBFB; } .theme-dark { --text-color: #FBFBFB; --title-color: #FBFBFB; --stroke-color: #FBFBFB; --stroke-color-invert: #313131; --bg-color: var(--bg-color-darker); color: var(--text-color); } .theme-sport { --contrast-color: var(--red); } .theme-nature { --contrast-color: var(--green); } .theme-tech { --contrast-color: var(--blue); } .theme-pick { --contrast-color: var(--yellow); } .grid { display: grid; grid-template-columns: var(--grid-margin) repeat(12, 1fr) var(--grid-margin); grid-gap: 0 var(--grid-gap); } .grid > * { grid-column: 2/-2; } .grid > .grid { grid-column: 1/-1; } .flex, body.single-legacy .sheet__content .gallery { display: flex; flex-wrap: wrap; } .flex > *, body.single-legacy .sheet__content .gallery > * { flex: 1 1 100%; } .flex--row, body.single-legacy .sheet__content .gallery { gap: var(--grid-gap); } .flex--justify { justify-content: center; } .start-1 { grid-column-start: 1; } .size-1 { grid-column-end: span 1; } .col-1 { width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .fcol-1 { flex: 0 0 calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); min-width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .start-2 { grid-column-start: 2; } .size-2 { grid-column-end: span 2; } .col-2 { width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .fcol-2 { flex: 0 0 calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); min-width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .start-3 { grid-column-start: 3; } .size-3 { grid-column-end: span 3; } .col-3 { width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-3 { flex: 0 0 calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .start-4 { grid-column-start: 4; } .size-4 { grid-column-end: span 4; } .col-4 { width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-4 { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .start-5 { grid-column-start: 5; } .size-5 { grid-column-end: span 5; } .col-5 { width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .fcol-5 { flex: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .start-6 { grid-column-start: 6; } .size-6 { grid-column-end: span 6; } .col-6 { width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-6 { flex: 0 0 calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7 { grid-column-start: 7; } .size-7 { grid-column-end: span 7; } .col-7 { width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-7 { flex: 0 0 calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .start-8 { grid-column-start: 8; } .size-8 { grid-column-end: span 8; } .col-8 { width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-8 { flex: 0 0 calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .start-9 { grid-column-start: 9; } .size-9 { grid-column-end: span 9; } .col-9 { width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .fcol-9 { flex: 0 0 calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); min-width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .start-10 { grid-column-start: 10; } .size-10 { grid-column-end: span 10; } .col-10 { width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .fcol-10, body.single-legacy .sheet__content blockquote { flex: 0 0 calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .start-11 { grid-column-start: 11; } .size-11 { grid-column-end: span 11; } .col-11 { width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .fcol-11 { flex: 0 0 calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); min-width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .start-12 { grid-column-start: 12; } .size-12 { grid-column-end: span 12; } .col-12 { width: 100%; } .fcol-12, body.single-legacy .sheet__content .wp-tiles-container, .sheet__content > .row--rte .block--video, .sheet__content > .row--rte > *:not(img, .block--video) { flex: 0 0 100%; min-width: 100%; } .ml-0 { margin-left: 0; } .ml-1 { margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2 { margin-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .ml-3 { margin-left: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .ml-4 { margin-left: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .ml-5 { margin-left: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .ml-6 { margin-left: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .ml-7 { margin-left: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .ml-8 { margin-left: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .ml-9 { margin-left: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .ml-10 { margin-left: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .ml-11 { margin-left: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 11 * var(--grid-gap) ); } .ml-12 { margin-left: 100%; } .m-auto { margin-left: auto; margin-right: auto; } .size-full { grid-column: 1/-1; } @media screen and ( min-width: 22.5em ) { .start-1--xxxs { grid-column-start: 1; } .size-1--xxxs { grid-column-end: span 1; } .col-1--xxxs { width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .fcol-1--xxxs { flex: 0 0 calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); min-width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .start-2--xxxs { grid-column-start: 2; } .size-2--xxxs { grid-column-end: span 2; } .col-2--xxxs { width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .fcol-2--xxxs { flex: 0 0 calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); min-width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .start-3--xxxs { grid-column-start: 3; } .size-3--xxxs { grid-column-end: span 3; } .col-3--xxxs { width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-3--xxxs { flex: 0 0 calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .start-4--xxxs { grid-column-start: 4; } .size-4--xxxs { grid-column-end: span 4; } .col-4--xxxs { width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-4--xxxs { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .start-5--xxxs { grid-column-start: 5; } .size-5--xxxs { grid-column-end: span 5; } .col-5--xxxs { width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .fcol-5--xxxs { flex: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .start-6--xxxs { grid-column-start: 6; } .size-6--xxxs { grid-column-end: span 6; } .col-6--xxxs { width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-6--xxxs { flex: 0 0 calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7--xxxs { grid-column-start: 7; } .size-7--xxxs { grid-column-end: span 7; } .col-7--xxxs { width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-7--xxxs { flex: 0 0 calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .start-8--xxxs { grid-column-start: 8; } .size-8--xxxs { grid-column-end: span 8; } .col-8--xxxs { width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-8--xxxs { flex: 0 0 calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .start-9--xxxs { grid-column-start: 9; } .size-9--xxxs { grid-column-end: span 9; } .col-9--xxxs { width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .fcol-9--xxxs { flex: 0 0 calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); min-width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .start-10--xxxs { grid-column-start: 10; } .size-10--xxxs { grid-column-end: span 10; } .col-10--xxxs { width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .fcol-10--xxxs { flex: 0 0 calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .start-11--xxxs { grid-column-start: 11; } .size-11--xxxs { grid-column-end: span 11; } .col-11--xxxs { width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .fcol-11--xxxs { flex: 0 0 calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); min-width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .start-12--xxxs { grid-column-start: 12; } .size-12--xxxs { grid-column-end: span 12; } .col-12--xxxs { width: 100%; } .fcol-12--xxxs { flex: 0 0 100%; min-width: 100%; } .ml-0--xxxs { margin-left: 0; } .ml-1--xxxs { margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2--xxxs { margin-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .ml-3--xxxs { margin-left: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .ml-4--xxxs { margin-left: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .ml-5--xxxs { margin-left: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .ml-6--xxxs { margin-left: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .ml-7--xxxs { margin-left: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .ml-8--xxxs { margin-left: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .ml-9--xxxs { margin-left: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .ml-10--xxxs { margin-left: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .ml-11--xxxs { margin-left: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 11 * var(--grid-gap) ); } .ml-12--xxxs { margin-left: 100%; } .m-auto-xxxs { margin-left: auto; margin-right: auto; } .size-full--xxxs { grid-column: 1/-1; } } @media screen and ( min-width: 24.375em ) { .start-1--xxs { grid-column-start: 1; } .size-1--xxs { grid-column-end: span 1; } .col-1--xxs { width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .fcol-1--xxs { flex: 0 0 calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); min-width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .start-2--xxs { grid-column-start: 2; } .size-2--xxs { grid-column-end: span 2; } .col-2--xxs { width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .fcol-2--xxs { flex: 0 0 calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); min-width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .start-3--xxs { grid-column-start: 3; } .size-3--xxs { grid-column-end: span 3; } .col-3--xxs { width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-3--xxs { flex: 0 0 calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .start-4--xxs { grid-column-start: 4; } .size-4--xxs { grid-column-end: span 4; } .col-4--xxs { width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-4--xxs { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .start-5--xxs { grid-column-start: 5; } .size-5--xxs { grid-column-end: span 5; } .col-5--xxs { width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .fcol-5--xxs { flex: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .start-6--xxs { grid-column-start: 6; } .size-6--xxs { grid-column-end: span 6; } .col-6--xxs { width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-6--xxs { flex: 0 0 calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7--xxs { grid-column-start: 7; } .size-7--xxs { grid-column-end: span 7; } .col-7--xxs { width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-7--xxs { flex: 0 0 calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .start-8--xxs { grid-column-start: 8; } .size-8--xxs { grid-column-end: span 8; } .col-8--xxs { width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-8--xxs { flex: 0 0 calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .start-9--xxs { grid-column-start: 9; } .size-9--xxs { grid-column-end: span 9; } .col-9--xxs { width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .fcol-9--xxs { flex: 0 0 calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); min-width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .start-10--xxs { grid-column-start: 10; } .size-10--xxs { grid-column-end: span 10; } .col-10--xxs { width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .fcol-10--xxs { flex: 0 0 calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .start-11--xxs { grid-column-start: 11; } .size-11--xxs { grid-column-end: span 11; } .col-11--xxs { width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .fcol-11--xxs { flex: 0 0 calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); min-width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .start-12--xxs { grid-column-start: 12; } .size-12--xxs { grid-column-end: span 12; } .col-12--xxs { width: 100%; } .fcol-12--xxs { flex: 0 0 100%; min-width: 100%; } .ml-0--xxs { margin-left: 0; } .ml-1--xxs { margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2--xxs { margin-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .ml-3--xxs { margin-left: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .ml-4--xxs { margin-left: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .ml-5--xxs { margin-left: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .ml-6--xxs { margin-left: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .ml-7--xxs { margin-left: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .ml-8--xxs { margin-left: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .ml-9--xxs { margin-left: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .ml-10--xxs { margin-left: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .ml-11--xxs { margin-left: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 11 * var(--grid-gap) ); } .ml-12--xxs { margin-left: 100%; } .m-auto-xxs { margin-left: auto; margin-right: auto; } .size-full--xxs { grid-column: 1/-1; } } @media screen and ( min-width: 26.75em ) { .start-1--xs { grid-column-start: 1; } .size-1--xs { grid-column-end: span 1; } .col-1--xs { width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .fcol-1--xs { flex: 0 0 calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); min-width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .start-2--xs { grid-column-start: 2; } .size-2--xs { grid-column-end: span 2; } .col-2--xs { width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .fcol-2--xs { flex: 0 0 calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); min-width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .start-3--xs { grid-column-start: 3; } .size-3--xs { grid-column-end: span 3; } .col-3--xs { width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-3--xs { flex: 0 0 calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .start-4--xs { grid-column-start: 4; } .size-4--xs { grid-column-end: span 4; } .col-4--xs { width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-4--xs { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .start-5--xs { grid-column-start: 5; } .size-5--xs { grid-column-end: span 5; } .col-5--xs { width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .fcol-5--xs { flex: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .start-6--xs { grid-column-start: 6; } .size-6--xs { grid-column-end: span 6; } .col-6--xs { width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-6--xs { flex: 0 0 calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7--xs { grid-column-start: 7; } .size-7--xs { grid-column-end: span 7; } .col-7--xs { width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-7--xs { flex: 0 0 calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .start-8--xs { grid-column-start: 8; } .size-8--xs { grid-column-end: span 8; } .col-8--xs { width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-8--xs { flex: 0 0 calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .start-9--xs { grid-column-start: 9; } .size-9--xs { grid-column-end: span 9; } .col-9--xs { width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .fcol-9--xs { flex: 0 0 calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); min-width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .start-10--xs { grid-column-start: 10; } .size-10--xs { grid-column-end: span 10; } .col-10--xs { width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .fcol-10--xs { flex: 0 0 calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .start-11--xs { grid-column-start: 11; } .size-11--xs { grid-column-end: span 11; } .col-11--xs { width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .fcol-11--xs { flex: 0 0 calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); min-width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .start-12--xs { grid-column-start: 12; } .size-12--xs { grid-column-end: span 12; } .col-12--xs { width: 100%; } .fcol-12--xs { flex: 0 0 100%; min-width: 100%; } .ml-0--xs { margin-left: 0; } .ml-1--xs { margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2--xs { margin-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .ml-3--xs { margin-left: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .ml-4--xs { margin-left: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .ml-5--xs { margin-left: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .ml-6--xs { margin-left: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .ml-7--xs { margin-left: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .ml-8--xs { margin-left: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .ml-9--xs { margin-left: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .ml-10--xs { margin-left: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .ml-11--xs { margin-left: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 11 * var(--grid-gap) ); } .ml-12--xs { margin-left: 100%; } .m-auto-xs { margin-left: auto; margin-right: auto; } .size-full--xs { grid-column: 1/-1; } } @media screen and ( min-width: 40em ) { .start-1--xs-mid { grid-column-start: 1; } .size-1--xs-mid { grid-column-end: span 1; } .col-1--xs-mid { width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .fcol-1--xs-mid { flex: 0 0 calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); min-width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .start-2--xs-mid { grid-column-start: 2; } .size-2--xs-mid { grid-column-end: span 2; } .col-2--xs-mid { width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .fcol-2--xs-mid { flex: 0 0 calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); min-width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .start-3--xs-mid { grid-column-start: 3; } .size-3--xs-mid { grid-column-end: span 3; } .col-3--xs-mid { width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-3--xs-mid { flex: 0 0 calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .start-4--xs-mid { grid-column-start: 4; } .size-4--xs-mid { grid-column-end: span 4; } .col-4--xs-mid { width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-4--xs-mid { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .start-5--xs-mid { grid-column-start: 5; } .size-5--xs-mid { grid-column-end: span 5; } .col-5--xs-mid { width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .fcol-5--xs-mid { flex: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .start-6--xs-mid { grid-column-start: 6; } .size-6--xs-mid { grid-column-end: span 6; } .col-6--xs-mid { width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-6--xs-mid { flex: 0 0 calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7--xs-mid { grid-column-start: 7; } .size-7--xs-mid { grid-column-end: span 7; } .col-7--xs-mid { width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-7--xs-mid { flex: 0 0 calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .start-8--xs-mid { grid-column-start: 8; } .size-8--xs-mid { grid-column-end: span 8; } .col-8--xs-mid { width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-8--xs-mid { flex: 0 0 calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .start-9--xs-mid { grid-column-start: 9; } .size-9--xs-mid { grid-column-end: span 9; } .col-9--xs-mid { width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .fcol-9--xs-mid { flex: 0 0 calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); min-width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .start-10--xs-mid { grid-column-start: 10; } .size-10--xs-mid { grid-column-end: span 10; } .col-10--xs-mid { width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .fcol-10--xs-mid { flex: 0 0 calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .start-11--xs-mid { grid-column-start: 11; } .size-11--xs-mid { grid-column-end: span 11; } .col-11--xs-mid { width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .fcol-11--xs-mid { flex: 0 0 calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); min-width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .start-12--xs-mid { grid-column-start: 12; } .size-12--xs-mid { grid-column-end: span 12; } .col-12--xs-mid { width: 100%; } .fcol-12--xs-mid { flex: 0 0 100%; min-width: 100%; } .ml-0--xs-mid { margin-left: 0; } .ml-1--xs-mid { margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2--xs-mid { margin-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .ml-3--xs-mid { margin-left: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .ml-4--xs-mid { margin-left: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .ml-5--xs-mid { margin-left: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .ml-6--xs-mid { margin-left: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .ml-7--xs-mid { margin-left: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .ml-8--xs-mid { margin-left: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .ml-9--xs-mid { margin-left: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .ml-10--xs-mid { margin-left: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .ml-11--xs-mid { margin-left: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 11 * var(--grid-gap) ); } .ml-12--xs-mid { margin-left: 100%; } .m-auto-xs-mid { margin-left: auto; margin-right: auto; } .size-full--xs-mid { grid-column: 1/-1; } } @media screen and ( min-width: 48em ) { .start-1--sm { grid-column-start: 1; } .size-1--sm { grid-column-end: span 1; } .col-1--sm { width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .fcol-1--sm { flex: 0 0 calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); min-width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .start-2--sm { grid-column-start: 2; } .size-2--sm { grid-column-end: span 2; } .col-2--sm { width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .fcol-2--sm { flex: 0 0 calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); min-width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .start-3--sm { grid-column-start: 3; } .size-3--sm { grid-column-end: span 3; } .col-3--sm { width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-3--sm { flex: 0 0 calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .start-4--sm { grid-column-start: 4; } .size-4--sm { grid-column-end: span 4; } .col-4--sm { width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-4--sm { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .start-5--sm { grid-column-start: 5; } .size-5--sm { grid-column-end: span 5; } .col-5--sm { width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .fcol-5--sm { flex: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .start-6--sm { grid-column-start: 6; } .size-6--sm { grid-column-end: span 6; } .col-6--sm { width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-6--sm { flex: 0 0 calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7--sm { grid-column-start: 7; } .size-7--sm { grid-column-end: span 7; } .col-7--sm { width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-7--sm { flex: 0 0 calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .start-8--sm { grid-column-start: 8; } .size-8--sm { grid-column-end: span 8; } .col-8--sm { width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-8--sm { flex: 0 0 calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .start-9--sm { grid-column-start: 9; } .size-9--sm { grid-column-end: span 9; } .col-9--sm { width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .fcol-9--sm { flex: 0 0 calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); min-width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .start-10--sm { grid-column-start: 10; } .size-10--sm { grid-column-end: span 10; } .col-10--sm { width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .fcol-10--sm { flex: 0 0 calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .start-11--sm { grid-column-start: 11; } .size-11--sm { grid-column-end: span 11; } .col-11--sm { width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .fcol-11--sm { flex: 0 0 calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); min-width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .start-12--sm { grid-column-start: 12; } .size-12--sm { grid-column-end: span 12; } .col-12--sm { width: 100%; } .fcol-12--sm, body.single-legacy .sheet__content .block--video { flex: 0 0 100%; min-width: 100%; } .ml-0--sm { margin-left: 0; } .ml-1--sm { margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2--sm { margin-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .ml-3--sm { margin-left: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .ml-4--sm { margin-left: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .ml-5--sm { margin-left: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .ml-6--sm { margin-left: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .ml-7--sm { margin-left: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .ml-8--sm { margin-left: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .ml-9--sm { margin-left: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .ml-10--sm { margin-left: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .ml-11--sm { margin-left: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 11 * var(--grid-gap) ); } .ml-12--sm { margin-left: 100%; } .m-auto-sm { margin-left: auto; margin-right: auto; } .size-full--sm { grid-column: 1/-1; } } @media screen and ( min-width: 50.625em ) { .start-1--sm-mid { grid-column-start: 1; } .size-1--sm-mid { grid-column-end: span 1; } .col-1--sm-mid { width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .fcol-1--sm-mid { flex: 0 0 calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); min-width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .start-2--sm-mid { grid-column-start: 2; } .size-2--sm-mid { grid-column-end: span 2; } .col-2--sm-mid { width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .fcol-2--sm-mid { flex: 0 0 calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); min-width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .start-3--sm-mid { grid-column-start: 3; } .size-3--sm-mid { grid-column-end: span 3; } .col-3--sm-mid { width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-3--sm-mid { flex: 0 0 calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .start-4--sm-mid { grid-column-start: 4; } .size-4--sm-mid { grid-column-end: span 4; } .col-4--sm-mid { width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-4--sm-mid { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .start-5--sm-mid { grid-column-start: 5; } .size-5--sm-mid { grid-column-end: span 5; } .col-5--sm-mid { width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .fcol-5--sm-mid { flex: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .start-6--sm-mid { grid-column-start: 6; } .size-6--sm-mid { grid-column-end: span 6; } .col-6--sm-mid { width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-6--sm-mid { flex: 0 0 calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7--sm-mid { grid-column-start: 7; } .size-7--sm-mid { grid-column-end: span 7; } .col-7--sm-mid { width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-7--sm-mid { flex: 0 0 calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .start-8--sm-mid { grid-column-start: 8; } .size-8--sm-mid { grid-column-end: span 8; } .col-8--sm-mid { width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-8--sm-mid { flex: 0 0 calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .start-9--sm-mid { grid-column-start: 9; } .size-9--sm-mid { grid-column-end: span 9; } .col-9--sm-mid { width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .fcol-9--sm-mid { flex: 0 0 calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); min-width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .start-10--sm-mid { grid-column-start: 10; } .size-10--sm-mid { grid-column-end: span 10; } .col-10--sm-mid { width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .fcol-10--sm-mid { flex: 0 0 calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .start-11--sm-mid { grid-column-start: 11; } .size-11--sm-mid { grid-column-end: span 11; } .col-11--sm-mid { width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .fcol-11--sm-mid { flex: 0 0 calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); min-width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .start-12--sm-mid { grid-column-start: 12; } .size-12--sm-mid { grid-column-end: span 12; } .col-12--sm-mid { width: 100%; } .fcol-12--sm-mid { flex: 0 0 100%; min-width: 100%; } .ml-0--sm-mid { margin-left: 0; } .ml-1--sm-mid { margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2--sm-mid { margin-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .ml-3--sm-mid { margin-left: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .ml-4--sm-mid { margin-left: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .ml-5--sm-mid { margin-left: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .ml-6--sm-mid { margin-left: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .ml-7--sm-mid { margin-left: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .ml-8--sm-mid { margin-left: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .ml-9--sm-mid { margin-left: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .ml-10--sm-mid { margin-left: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .ml-11--sm-mid { margin-left: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 11 * var(--grid-gap) ); } .ml-12--sm-mid { margin-left: 100%; } .m-auto-sm-mid { margin-left: auto; margin-right: auto; } .size-full--sm-mid { grid-column: 1/-1; } } @media screen and ( min-width: 64em ) { .start-1--md { grid-column-start: 1; } .size-1--md { grid-column-end: span 1; } .col-1--md { width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .fcol-1--md { flex: 0 0 calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); min-width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .start-2--md { grid-column-start: 2; } .size-2--md { grid-column-end: span 2; } .col-2--md { width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .fcol-2--md { flex: 0 0 calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); min-width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .start-3--md { grid-column-start: 3; } .size-3--md { grid-column-end: span 3; } .col-3--md { width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-3--md { flex: 0 0 calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .start-4--md { grid-column-start: 4; } .size-4--md { grid-column-end: span 4; } .col-4--md { width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-4--md { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .start-5--md { grid-column-start: 5; } .size-5--md { grid-column-end: span 5; } .col-5--md { width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .fcol-5--md { flex: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .start-6--md { grid-column-start: 6; } .size-6--md { grid-column-end: span 6; } .col-6--md { width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-6--md { flex: 0 0 calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7--md { grid-column-start: 7; } .size-7--md { grid-column-end: span 7; } .col-7--md { width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-7--md { flex: 0 0 calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .start-8--md { grid-column-start: 8; } .size-8--md { grid-column-end: span 8; } .col-8--md { width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-8--md, body.single-legacy .sheet__content blockquote { flex: 0 0 calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .start-9--md { grid-column-start: 9; } .size-9--md { grid-column-end: span 9; } .col-9--md { width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .fcol-9--md { flex: 0 0 calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); min-width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .start-10--md { grid-column-start: 10; } .size-10--md { grid-column-end: span 10; } .col-10--md { width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .fcol-10--md, body.single-legacy .sheet__content > ul, body.single-legacy .sheet__content > ol, body.single-legacy .sheet__content p, body.single-legacy .sheet__content h1, body.single-legacy .sheet__content h2, body.single-legacy .sheet__content h3, body.single-legacy .sheet__content h4, body.single-legacy .sheet__content h5, body.single-legacy .sheet__content h6, .sheet__content > .row--rte > *:not(img, .block--video) { flex: 0 0 calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .start-11--md { grid-column-start: 11; } .size-11--md { grid-column-end: span 11; } .col-11--md { width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .fcol-11--md { flex: 0 0 calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); min-width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .start-12--md { grid-column-start: 12; } .size-12--md { grid-column-end: span 12; } .col-12--md { width: 100%; } .fcol-12--md { flex: 0 0 100%; min-width: 100%; } .ml-0--md { margin-left: 0; } .ml-1--md { margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2--md { margin-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .ml-3--md { margin-left: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .ml-4--md { margin-left: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .ml-5--md { margin-left: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .ml-6--md { margin-left: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .ml-7--md { margin-left: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .ml-8--md { margin-left: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .ml-9--md { margin-left: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .ml-10--md { margin-left: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .ml-11--md { margin-left: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 11 * var(--grid-gap) ); } .ml-12--md { margin-left: 100%; } .m-auto-md { margin-left: auto; margin-right: auto; } .size-full--md { grid-column: 1/-1; } } @media screen and ( min-width: 80em ) { .start-1--md-mid { grid-column-start: 1; } .size-1--md-mid { grid-column-end: span 1; } .col-1--md-mid { width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .fcol-1--md-mid { flex: 0 0 calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); min-width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .start-2--md-mid { grid-column-start: 2; } .size-2--md-mid { grid-column-end: span 2; } .col-2--md-mid { width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .fcol-2--md-mid { flex: 0 0 calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); min-width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .start-3--md-mid { grid-column-start: 3; } .size-3--md-mid { grid-column-end: span 3; } .col-3--md-mid { width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-3--md-mid { flex: 0 0 calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .start-4--md-mid { grid-column-start: 4; } .size-4--md-mid { grid-column-end: span 4; } .col-4--md-mid { width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-4--md-mid { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .start-5--md-mid { grid-column-start: 5; } .size-5--md-mid { grid-column-end: span 5; } .col-5--md-mid { width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .fcol-5--md-mid { flex: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .start-6--md-mid { grid-column-start: 6; } .size-6--md-mid { grid-column-end: span 6; } .col-6--md-mid { width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-6--md-mid { flex: 0 0 calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7--md-mid { grid-column-start: 7; } .size-7--md-mid { grid-column-end: span 7; } .col-7--md-mid { width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-7--md-mid { flex: 0 0 calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .start-8--md-mid { grid-column-start: 8; } .size-8--md-mid { grid-column-end: span 8; } .col-8--md-mid { width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-8--md-mid { flex: 0 0 calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .start-9--md-mid { grid-column-start: 9; } .size-9--md-mid { grid-column-end: span 9; } .col-9--md-mid { width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .fcol-9--md-mid { flex: 0 0 calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); min-width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .start-10--md-mid { grid-column-start: 10; } .size-10--md-mid { grid-column-end: span 10; } .col-10--md-mid { width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .fcol-10--md-mid { flex: 0 0 calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .start-11--md-mid { grid-column-start: 11; } .size-11--md-mid { grid-column-end: span 11; } .col-11--md-mid { width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .fcol-11--md-mid { flex: 0 0 calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); min-width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .start-12--md-mid { grid-column-start: 12; } .size-12--md-mid { grid-column-end: span 12; } .col-12--md-mid { width: 100%; } .fcol-12--md-mid { flex: 0 0 100%; min-width: 100%; } .ml-0--md-mid { margin-left: 0; } .ml-1--md-mid { margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2--md-mid { margin-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .ml-3--md-mid { margin-left: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .ml-4--md-mid { margin-left: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .ml-5--md-mid { margin-left: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .ml-6--md-mid { margin-left: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .ml-7--md-mid { margin-left: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .ml-8--md-mid { margin-left: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .ml-9--md-mid { margin-left: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .ml-10--md-mid { margin-left: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .ml-11--md-mid { margin-left: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 11 * var(--grid-gap) ); } .ml-12--md-mid { margin-left: 100%; } .m-auto-md-mid { margin-left: auto; margin-right: auto; } .size-full--md-mid { grid-column: 1/-1; } } @media screen and ( min-width: 85.375em ) { .start-1--lg { grid-column-start: 1; } .size-1--lg { grid-column-end: span 1; } .col-1--lg { width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .fcol-1--lg { flex: 0 0 calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); min-width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .start-2--lg { grid-column-start: 2; } .size-2--lg { grid-column-end: span 2; } .col-2--lg { width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .fcol-2--lg { flex: 0 0 calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); min-width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .start-3--lg { grid-column-start: 3; } .size-3--lg { grid-column-end: span 3; } .col-3--lg { width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-3--lg { flex: 0 0 calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .start-4--lg { grid-column-start: 4; } .size-4--lg { grid-column-end: span 4; } .col-4--lg { width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-4--lg { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .start-5--lg { grid-column-start: 5; } .size-5--lg { grid-column-end: span 5; } .col-5--lg { width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .fcol-5--lg { flex: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .start-6--lg { grid-column-start: 6; } .size-6--lg { grid-column-end: span 6; } .col-6--lg { width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-6--lg, body.single-legacy .sheet__content blockquote { flex: 0 0 calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7--lg { grid-column-start: 7; } .size-7--lg { grid-column-end: span 7; } .col-7--lg { width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-7--lg { flex: 0 0 calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .start-8--lg { grid-column-start: 8; } .size-8--lg { grid-column-end: span 8; } .col-8--lg { width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-8--lg, body.single-legacy .sheet__content > ul, body.single-legacy .sheet__content > ol, body.single-legacy .sheet__content p, body.single-legacy .sheet__content h1, body.single-legacy .sheet__content h2, body.single-legacy .sheet__content h3, body.single-legacy .sheet__content h4, body.single-legacy .sheet__content h5, body.single-legacy .sheet__content h6, .sheet__content > .row--rte > *:not(img, .block--video) { flex: 0 0 calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .start-9--lg { grid-column-start: 9; } .size-9--lg { grid-column-end: span 9; } .col-9--lg { width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .fcol-9--lg { flex: 0 0 calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); min-width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .start-10--lg { grid-column-start: 10; } .size-10--lg { grid-column-end: span 10; } .col-10--lg { width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .fcol-10--lg { flex: 0 0 calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .start-11--lg { grid-column-start: 11; } .size-11--lg { grid-column-end: span 11; } .col-11--lg { width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .fcol-11--lg { flex: 0 0 calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); min-width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .start-12--lg { grid-column-start: 12; } .size-12--lg { grid-column-end: span 12; } .col-12--lg { width: 100%; } .fcol-12--lg { flex: 0 0 100%; min-width: 100%; } .ml-0--lg { margin-left: 0; } .ml-1--lg { margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2--lg { margin-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .ml-3--lg { margin-left: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .ml-4--lg { margin-left: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .ml-5--lg { margin-left: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .ml-6--lg { margin-left: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .ml-7--lg { margin-left: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .ml-8--lg { margin-left: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .ml-9--lg { margin-left: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .ml-10--lg { margin-left: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .ml-11--lg { margin-left: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 11 * var(--grid-gap) ); } .ml-12--lg { margin-left: 100%; } .m-auto-lg { margin-left: auto; margin-right: auto; } .size-full--lg { grid-column: 1/-1; } } @media screen and ( min-width: 90em ) { .start-1--lg-mid { grid-column-start: 1; } .size-1--lg-mid { grid-column-end: span 1; } .col-1--lg-mid { width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .fcol-1--lg-mid { flex: 0 0 calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); min-width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .start-2--lg-mid { grid-column-start: 2; } .size-2--lg-mid { grid-column-end: span 2; } .col-2--lg-mid { width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .fcol-2--lg-mid { flex: 0 0 calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); min-width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .start-3--lg-mid { grid-column-start: 3; } .size-3--lg-mid { grid-column-end: span 3; } .col-3--lg-mid { width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-3--lg-mid { flex: 0 0 calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .start-4--lg-mid { grid-column-start: 4; } .size-4--lg-mid { grid-column-end: span 4; } .col-4--lg-mid { width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-4--lg-mid { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .start-5--lg-mid { grid-column-start: 5; } .size-5--lg-mid { grid-column-end: span 5; } .col-5--lg-mid { width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .fcol-5--lg-mid { flex: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .start-6--lg-mid { grid-column-start: 6; } .size-6--lg-mid { grid-column-end: span 6; } .col-6--lg-mid { width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-6--lg-mid { flex: 0 0 calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7--lg-mid { grid-column-start: 7; } .size-7--lg-mid { grid-column-end: span 7; } .col-7--lg-mid { width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-7--lg-mid { flex: 0 0 calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .start-8--lg-mid { grid-column-start: 8; } .size-8--lg-mid { grid-column-end: span 8; } .col-8--lg-mid { width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-8--lg-mid { flex: 0 0 calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .start-9--lg-mid { grid-column-start: 9; } .size-9--lg-mid { grid-column-end: span 9; } .col-9--lg-mid { width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .fcol-9--lg-mid { flex: 0 0 calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); min-width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .start-10--lg-mid { grid-column-start: 10; } .size-10--lg-mid { grid-column-end: span 10; } .col-10--lg-mid { width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .fcol-10--lg-mid { flex: 0 0 calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .start-11--lg-mid { grid-column-start: 11; } .size-11--lg-mid { grid-column-end: span 11; } .col-11--lg-mid { width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .fcol-11--lg-mid { flex: 0 0 calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); min-width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .start-12--lg-mid { grid-column-start: 12; } .size-12--lg-mid { grid-column-end: span 12; } .col-12--lg-mid { width: 100%; } .fcol-12--lg-mid { flex: 0 0 100%; min-width: 100%; } .ml-0--lg-mid { margin-left: 0; } .ml-1--lg-mid { margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2--lg-mid { margin-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .ml-3--lg-mid { margin-left: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .ml-4--lg-mid { margin-left: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .ml-5--lg-mid { margin-left: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .ml-6--lg-mid { margin-left: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .ml-7--lg-mid { margin-left: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .ml-8--lg-mid { margin-left: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .ml-9--lg-mid { margin-left: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .ml-10--lg-mid { margin-left: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .ml-11--lg-mid { margin-left: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 11 * var(--grid-gap) ); } .ml-12--lg-mid { margin-left: 100%; } .m-auto-lg-mid { margin-left: auto; margin-right: auto; } .size-full--lg-mid { grid-column: 1/-1; } } @media screen and ( min-width: 96em ) { .start-1--xl { grid-column-start: 1; } .size-1--xl { grid-column-end: span 1; } .col-1--xl { width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .fcol-1--xl { flex: 0 0 calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); min-width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .start-2--xl { grid-column-start: 2; } .size-2--xl { grid-column-end: span 2; } .col-2--xl { width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .fcol-2--xl { flex: 0 0 calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); min-width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .start-3--xl { grid-column-start: 3; } .size-3--xl { grid-column-end: span 3; } .col-3--xl { width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-3--xl { flex: 0 0 calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .start-4--xl { grid-column-start: 4; } .size-4--xl { grid-column-end: span 4; } .col-4--xl { width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-4--xl { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .start-5--xl { grid-column-start: 5; } .size-5--xl { grid-column-end: span 5; } .col-5--xl { width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .fcol-5--xl { flex: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .start-6--xl { grid-column-start: 6; } .size-6--xl { grid-column-end: span 6; } .col-6--xl { width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-6--xl { flex: 0 0 calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7--xl { grid-column-start: 7; } .size-7--xl { grid-column-end: span 7; } .col-7--xl { width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-7--xl { flex: 0 0 calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .start-8--xl { grid-column-start: 8; } .size-8--xl { grid-column-end: span 8; } .col-8--xl { width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-8--xl { flex: 0 0 calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .start-9--xl { grid-column-start: 9; } .size-9--xl { grid-column-end: span 9; } .col-9--xl { width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .fcol-9--xl { flex: 0 0 calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); min-width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .start-10--xl { grid-column-start: 10; } .size-10--xl { grid-column-end: span 10; } .col-10--xl { width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .fcol-10--xl { flex: 0 0 calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .start-11--xl { grid-column-start: 11; } .size-11--xl { grid-column-end: span 11; } .col-11--xl { width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .fcol-11--xl { flex: 0 0 calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); min-width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .start-12--xl { grid-column-start: 12; } .size-12--xl { grid-column-end: span 12; } .col-12--xl { width: 100%; } .fcol-12--xl { flex: 0 0 100%; min-width: 100%; } .ml-0--xl { margin-left: 0; } .ml-1--xl { margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2--xl { margin-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .ml-3--xl { margin-left: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .ml-4--xl { margin-left: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .ml-5--xl { margin-left: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .ml-6--xl { margin-left: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .ml-7--xl { margin-left: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .ml-8--xl { margin-left: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .ml-9--xl { margin-left: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .ml-10--xl { margin-left: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .ml-11--xl { margin-left: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 11 * var(--grid-gap) ); } .ml-12--xl { margin-left: 100%; } .m-auto-xl { margin-left: auto; margin-right: auto; } .size-full--xl { grid-column: 1/-1; } } @media screen and ( min-width: 120em ) { .start-1--xxl { grid-column-start: 1; } .size-1--xxl { grid-column-end: span 1; } .col-1--xxl { width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .fcol-1--xxl { flex: 0 0 calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); min-width: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); } .start-2--xxl { grid-column-start: 2; } .size-2--xxl { grid-column-end: span 2; } .col-2--xxl { width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .fcol-2--xxl { flex: 0 0 calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); min-width: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .start-3--xxl { grid-column-start: 3; } .size-3--xxl { grid-column-end: span 3; } .col-3--xxl { width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .fcol-3--xxl { flex: 0 0 calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .start-4--xxl { grid-column-start: 4; } .size-4--xxl { grid-column-end: span 4; } .col-4--xxl { width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .fcol-4--xxl { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .start-5--xxl { grid-column-start: 5; } .size-5--xxl { grid-column-end: span 5; } .col-5--xxl { width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .fcol-5--xxl { flex: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); min-width: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .start-6--xxl { grid-column-start: 6; } .size-6--xxl { grid-column-end: span 6; } .col-6--xxl { width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .fcol-6--xxl { flex: 0 0 calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); min-width: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .start-7--xxl { grid-column-start: 7; } .size-7--xxl { grid-column-end: span 7; } .col-7--xxl { width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .fcol-7--xxl { flex: 0 0 calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); min-width: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .start-8--xxl { grid-column-start: 8; } .size-8--xxl { grid-column-end: span 8; } .col-8--xxl { width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .fcol-8--xxl { flex: 0 0 calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); min-width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .start-9--xxl { grid-column-start: 9; } .size-9--xxl { grid-column-end: span 9; } .col-9--xxl { width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .fcol-9--xxl { flex: 0 0 calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); min-width: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .start-10--xxl { grid-column-start: 10; } .size-10--xxl { grid-column-end: span 10; } .col-10--xxl { width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .fcol-10--xxl { flex: 0 0 calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); min-width: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .start-11--xxl { grid-column-start: 11; } .size-11--xxl { grid-column-end: span 11; } .col-11--xxl { width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .fcol-11--xxl { flex: 0 0 calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); min-width: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .start-12--xxl { grid-column-start: 12; } .size-12--xxl { grid-column-end: span 12; } .col-12--xxl { width: 100%; } .fcol-12--xxl { flex: 0 0 100%; min-width: 100%; } .ml-0--xxl { margin-left: 0; } .ml-1--xxl { margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } .ml-2--xxl { margin-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } .ml-3--xxl { margin-left: calc( 3 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 3 * var(--grid-gap) ); } .ml-4--xxl { margin-left: calc( 4 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 4 * var(--grid-gap) ); } .ml-5--xxl { margin-left: calc( 5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ); } .ml-6--xxl { margin-left: calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 6 * var(--grid-gap) ); } .ml-7--xxl { margin-left: calc( 7 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .ml-8--xxl { margin-left: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); } .ml-9--xxl { margin-left: calc( 9 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 9 * var(--grid-gap) ); } .ml-10--xxl { margin-left: calc( 10 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 10 * var(--grid-gap) ); } .ml-11--xxl { margin-left: calc( 11 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 11 * var(--grid-gap) ); } .ml-12--xxl { margin-left: 100%; } .m-auto-xxl { margin-left: auto; margin-right: auto; } .size-full--xxl { grid-column: 1/-1; } } html, body { overflow-x: hidden; } .main-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: 3.75rem 1fr auto; } .main-wrapper::after { content: ""; display: block; width: 100%; height: 100%; background: rgba(17, 17, 17, 0.2); opacity: 0; pointer-events: none; position: fixed; top: 0; left: 0; z-index: var(--z-index-curtain); transition: var(--transition); } .main-content { grid-row: 2/span 1; max-width: 90rem; margin: 0 auto; } .footer { grid-row: span 1/-1; } img { display: block; width: 100%; -o-object-position: right bottom; object-position: right bottom; } .svg-defs { opacity: 0; position: absolute; pointer-events: none; } @media screen and ( min-width: 64em ) { .main-wrapper { grid-template-rows: auto 1fr auto; } } /* purgecss start ignore */ .title, .tacCurrentStatus, .tarteaucitronH1, .tarteaucitronH2, .tarteaucitronTitle button, .tarteaucitronH3, .folder__button, .folder__item a { font-family: "gt-flexa", sans-serif; font-weight: 600; } .title, .tacCurrentStatus, .tarteaucitronH1, .tarteaucitronH2, .tarteaucitronTitle button, .tarteaucitronH3, .folder__button, .folder__item a { color: var(--title-color); } .title--xl { font-size: 2rem; line-height: 1.2em; } .title--lg { font-size: 1.5rem; line-height: 2rem; } .title--md { font-size: 1.125rem; line-height: 1.3125rem; } .title--sm { font-size: 0.875rem; line-height: 1.125rem; } .title--wide, .folder__button small, .folder__item small { font-family: "gt-flexa-expanded", sans-serif; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; } .title--thin { font-weight: 400; } .title--light, .tacCurrentStatus { color: var(--text-color-light); } @media screen and ( min-width: 48em ) { .title--xl { font-size: 2.5rem; list-style: 3rem; } .title--lg { font-size: 2rem; line-height: 2.5rem; } .title--md { font-size: 1.3125rem; line-height: 2rem; } .title--sm { font-size: 0.875rem; } } @media screen and ( min-width: 64em ) { .title--xl { font-size: 3.5rem; list-style: 4rem; } .title--md { font-size: 1.5rem; line-height: 2rem; } } @media screen and ( min-width: 80em ) { .title--xl { font-size: 3.75rem; line-height: 4.5rem; } .title--lg { font-size: 3.5rem; line-height: 1.1428571429em; } .title--md { font-size: 2rem; line-height: 2.5rem; } .title--sm { font-size: 0.875rem; } } .button-wrapper { display: flex; justify-content: center; align-items: flex-start; } .button, #tarteaucitronRoot button#tarteaucitronCloseAlert, #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), .sheet__video .js-video .tac_activate .tarteaucitronAllow, .sheet__video .js-video .tac_activate .tac_float .tarteaucitronAllow, .sheet__content .js-video .tac_activate .tarteaucitronAllow, .sheet__content .js-video .tac_activate .tac_float .tarteaucitronAllow { --button-bg-color: transparent; --button-stroke-color: var(--stroke-color); --button-text-color: var(--text-color); display: inline-grid; align-items: center; justify-content: center; grid-template-columns: auto auto; padding: 1rem 1.5rem; margin-top: 2rem; border: 0.125rem solid var(--button-stroke-color); cursor: pointer; border-radius: 6.25rem; background: var(--button-bg-color); font-family: "gt-flexa-expanded", sans-serif; font-size: 0.875rem; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--button-text-color); text-align: center; transition: var(--transition); } @media (hover: hover) { .button:hover, #tarteaucitronRoot button#tarteaucitronCloseAlert:hover, #tarteaucitronRoot button:hover:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), .sheet__video .js-video .tac_activate .tarteaucitronAllow:hover, .sheet__content .js-video .tac_activate .tarteaucitronAllow:hover { --button-bg-color: var(--button-stroke-color); --button-text-color: var(--white); } } @media (hover: hover) and (prefers-color-scheme: dark) { .button:hover, #tarteaucitronRoot button#tarteaucitronCloseAlert:hover, #tarteaucitronRoot button:hover:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), .sheet__video .js-video .tac_activate .tarteaucitronAllow:hover, .sheet__content .js-video .tac_activate .tarteaucitronAllow:hover { --button-text-color: var(--grey-dark); } } .button > *, #tarteaucitronRoot button#tarteaucitronCloseAlert > *, #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]) > *, .sheet__video .js-video .tac_activate .tarteaucitronAllow > *, .sheet__video .js-video .tac_activate .tac_float .tarteaucitronAllow > *, .sheet__content .js-video .tac_activate .tarteaucitronAllow > *, .sheet__content .js-video .tac_activate .tac_float .tarteaucitronAllow > * { pointer-events: none; } .button__icon { width: 1.5rem; margin: 0 0.5rem; text-align: center; } .button__text { transform: translate(0, -0.0625rem); } .button--icon-right { padding: 1rem 0.5rem 1rem 1.5rem; } .button--icon-left { padding: 1rem 1.5rem 1rem 0.5rem; } .button--icon-left .button__icon { order: -1; } .button--white, #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]) { --button-stroke-color: var(--white); --button-text-color: var(--white); } @media (hover: hover) { .button--white:hover, #tarteaucitronRoot button:hover:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]) { --button-text-color: var(--black); } } .button--fill, #tarteaucitronRoot button#tarteaucitronCloseAlert, #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]) { --button-bg-color: var(--button-stroke-color); } .button--fill.button--white, #tarteaucitronRoot button.button--white#tarteaucitronCloseAlert, #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]) { --button-bg-color: var(--white); --button-stroke-color: var(--white); --button-text-color: var(--black); } @media (hover: hover) { .button--fill.button--white:hover, #tarteaucitronRoot button.button--white#tarteaucitronCloseAlert:hover, #tarteaucitronRoot button:hover:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]) { --button-bg-color: var(--black); --button-stroke-color: var(--white); --button-text-color: var(--white); } } .button--sm, #tarteaucitronRoot button#tarteaucitronCloseAlert, #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]) { font-size: 0.75rem; } .button-icon { --button-stroke-color: var(--text-color-white); --button-text-color: var(--text-color-white); --button-bg-color: transparent; display: grid; grid-template-columns: 3rem auto; grid-template-rows: 3rem; grid-template-areas: "icon text"; align-items: center; height: 3rem; font-family: "gt-flexa-expanded", sans-serif; font-size: 0.875rem; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; position: relative; z-index: 2; } .button-icon svg { grid-area: icon/icon/icon/text; width: 100%; height: 100%; position: relative; z-index: -1; } .button-icon svg use { fill: var(--button-bg-color); stroke: var(--button-stroke-color); stroke-width: 0.125rem; transition: var(--transition); } .button-icon span { display: block; padding-right: 1.5rem; color: var(--button-text-color); grid-area: text; transition: var(--transition); } .button-icon i { grid-area: icon; justify-self: center; color: var(--button-text-color); transition: var(--transition); } .button-icon--green { --button-stroke-color: var(--green); --button-text-color: var(--green); } .button-icon--red { --button-stroke-color: var(--red); --button-text-color: var(--red); } .button-icon--blue { --button-stroke-color: var(--blue); --button-text-color: var(--blue); } .button-icon--yellow { --button-stroke-color: var(--yellow); --button-text-color: var(--yellow); } a.button-icon:hover, button.button-icon:hover { --button-text-color: var(--text-color-darker); --button-bg-color: var(--button-stroke-color); } .button-text { display: flex; align-items: center; justify-content: right; padding: 1.5rem 0; font-size: 0.875rem; cursor: pointer; } .button-text:hover i { transform: translate(0.5rem, 0); } .button-text i { display: inline-block; font-size: 1.125rem; margin-left: 0.75rem; transition: var(--transition); } .button-close { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; cursor: pointer; } .button-close span { display: none; } .button-close i { width: 1.5rem; height: 0.125rem; background: transparent; border-radius: 0.0625rem; position: relative; pointer-events: none; cursor: pointer; transition: var(--transition); transform: rotate(180deg); } .button-close i::before, .button-close i::after { content: ""; display: block; width: 100%; height: 100%; background: currentColor; border-radius: 0.0625rem; position: absolute; left: 0; transition: var(--transition); transform: rotate(-45deg); } .button-close i::after { transform: rotate(45deg); } .button-close:hover i { transform: rotate(90deg); } .button-close:hover i::before { transform: rotate(-45deg); } .button-close:hover i::after { transform: rotate(45deg); } @media screen and ( min-width: 64em ) { .button, #tarteaucitronRoot button#tarteaucitronCloseAlert, #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), .sheet__video .js-video .tac_activate .tarteaucitronAllow, .sheet__video .js-video .tac_activate .tac_float .tarteaucitronAllow, .sheet__content .js-video .tac_activate .tarteaucitronAllow, .sheet__content .js-video .tac_activate .tac_float .tarteaucitronAllow { margin-top: 3.5rem; } .button-icon { grid-template-columns: 5rem auto; grid-template-rows: 5rem; height: 5rem; font-size: 1.25rem; } .button-icon i { font-size: 2.5rem; } } [class^=ri-], [class*=ri-] { font-family: "remixicon" !important; font-size: 1.5em; line-height: 0; font-style: normal; } .ri-leaf-line:before { content: "\eea3"; } .ri-flag-line:before { content: "\ed3b"; } .ri-arrow-right-s-line:before { content: "\ea6e"; } .ri-play-fill:before { content: "\f00a"; } .ri-facebook-fill:before { content: "\ecbc"; } .ri-instagram-fill:before { content: "\ee65"; } .ri-youtube-fill:before { content: "\f2d4"; } .ri-home-4-line:before { content: "\ee1d"; } .ri-search-line:before { content: "\f0d1"; } .ri-shopping-cart-2-line:before { content: "\f11e"; } .ri-star-line:before { content: "\f18b"; } .ri-settings-line:before { content: "\f0ee"; } .ri-arrow-right-line:before { content: "\ea6c"; } .ri-voiceprint-fill:before { content: "\f299"; } .ri-heart-3-fill:before { content: "\ee0a"; } .ri-award-fill:before { content: "\ea89"; } .ri-money-euro-circle-fill:before { content: "\ef68"; } .ri-arrow-up-s-line:before, .block--review .block__list--high:before { content: "\ea78"; } .ri-arrow-down-s-line:before, .block--review .block__list--low:before { content: "\ea4e"; } .ri-subtract-fill:before, .block--review .block__list--med:before { content: "\f1ae"; } .ri-scales-3-fill:before { content: "\f0b6"; } .ri-cash-line:before { content: "\f2fb"; } .ri-arrow-left-s-line:before { content: "\ea64"; } .ri-play-line:before { content: "\f00b"; } .ri-eye-fill:before { content: "\ecb4"; } .ri-bookmark-fill:before { content: "\eae4"; } .tag { --tag-stroke-color: var(--stroke-color); --tag-bg-color: var(--bg-color-darker); --tag-text-color: #FBFBFB; padding: 0.375rem 0.5rem 0.25rem 0.5rem; font-family: "gt-flexa-expanded", sans-serif; font-size: 0.875rem; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tag-text-color); position: relative; z-index: 2; } .tag__list { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; } .tag__list--left { justify-content: flex-start; } .tag__item { flex: 0 0 auto; } .tag svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .tag svg use { fill: var(--tag-bg-color); stroke: var(--tag-stroke-color); } .tag__icon { font-size: 1em; margin-right: 0.3em; } .tag--red { --tag-bg-color: var(--red); --tag-stroke-color: var(--red); } .tag--blue { --tag-bg-color: var(--blue); --tag-stroke-color: var(--blue); } .tag--green { --tag-bg-color: var(--green); --tag-stroke-color: var(--green); } .tag--yellow { --tag-bg-color: var(--yellow); --tag-stroke-color: var(--yellow); } .tag--black { --tag-bg-color: var(--black); --tag-stroke-color: var(--white); } .tag--outline { --tag-bg-color: transparent; color: var(--tag-stroke-color); } .tag--typo { --tag-text-color: var(--tag-stroke-color); padding: 0; font-size: 0.75rem; line-height: 1.5; } @media screen and ( min-width: 48em ) { .tag--typo { font-size: 1rem; } } .tag--typo .tag__icon { font-size: 1em; } .tag--typo::before { --tag-stroke-color: transparent; --tag-bg-color: transparent; } .form__field { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto; grid-template-areas: "input mandatory"; align-items: center; font-family: "gt-flexa-expanded", sans-serif; text-transform: uppercase; letter-spacing: 0.1em; position: relative; } .form__field .mandatory { grid-area: mandatory; color: var(--alert); margin-right: 1rem; } .form__field--search { grid-template-columns: 2.5rem 1fr; } .form__field--search .form__input { padding-left: 2.5rem; } .form__field--checkbox { grid-template-columns: 1fr; } .form__field--checkbox > * { grid-column: 1/-1; } .form__field--checkbox .form__label { display: block; padding-left: 1.5rem; font-family: "gt-flexa", sans-serif; text-transform: none; letter-spacing: 0; font-size: 0.75rem; line-height: 1rem; position: relative; } .form__field--checkbox .form__label::before { content: ""; display: block; width: 1rem; height: 1rem; border: 0.0625rem solid var(--stroke-color); border-radius: 0.25rem; position: absolute; left: 0; transition: var(--transition); } .form__field--checkbox .form__label::after { content: ""; display: block; width: 0.25rem; height: 0.5rem; border: 0.0625rem solid var(--stroke-color-invert); border-top: 0; border-left: 0; position: absolute; top: 0; left: 0; transform: translate(150%, 35%) rotate(45deg) scale(0); transition: var(--transition); } .form__field--checkbox .form__input { border: 0; } .form__input, .form__label, .form__icon { grid-row: 1/-1; } .form__input, .form__label { height: 2.75rem; font-size: 0.75rem; line-height: 2.75rem; } @media screen and ( min-width: 48em ) { .form__input, .form__label { font-size: 0.875rem; } } .form__input { width: 100%; grid-column: 1/-1; padding-left: 1rem; padding-right: 1rem; border: 0.0625rem solid var(--stroke-color); border-radius: 100rem; position: relative; z-index: 2; transition: var(--transition); } .form__input:focus:not(.form__input--checkbox) { color: var(--text-color-white); background: var(--bg-color-black); } .form__input:focus:not(.form__input--checkbox) ~ * { color: var(--text-color-white); } @media (prefers-color-scheme: dark) { .form__input:focus:not(.form__input--checkbox) { color: var(--text-color-darker); background: var(--bg-color-white); } .form__input:focus:not(.form__input--checkbox) ~ * { color: var(--text-color-darker); } } .form__input::-moz-placeholder { color: var(--text-color-light); } .form__input::placeholder { color: var(--text-color-light); } .form__input[type=search]::-moz-placeholder { opacity: 1; } .form__input[type=search]::placeholder { opacity: 1; } .form__input--checkbox { border-radius: 0; cursor: pointer; } .form__input--checkbox:checked + .form__label::before { background: var(--stroke-color); } .form__input--checkbox:checked + .form__label::after { transform: translate(150%, 35%) rotate(45deg) scale(1); } .form__label { display: none; cursor: pointer; } .form__icon { grid-column: 1/span 1; text-align: center; font-size: 0.8em; position: relative; z-index: 2; transition: var(--transition); } .form__button { display: flex; align-items: center; justify-content: right; padding: 1.5rem 0; font-size: 0.875rem; cursor: pointer; } .form__button:hover i { transform: translate(0.5rem, 0); } .form__button i { display: inline-block; font-size: 1.125rem; margin-left: 0.75rem; transition: var(--transition); } .header { height: 100%; color: var(--text-color-white); position: relative; } .header::before, .header::after { content: ""; width: 100vw; height: 100vh; background-color: var(--bg-color-black); position: fixed; top: 0; left: 0; z-index: var(--z-index-header-bg); } .header::after { background: url("../images/background/dark-ambiance-menu-mobile.jpg") no-repeat center/cover; } .header::before { display: none; } .header__logo { display: block; width: 100%; position: fixed; top: 0; left: 0; z-index: var(--z-index-header-logo); } .header__logo::after { content: ""; display: block; width: 100%; height: 3.75rem; background: url("../images/logo/vojo-logo.svg") no-repeat center/5rem, var(--bg-color-black); position: absolute; top: 0; } .header__logo span { display: block; width: 100%; height: 3.125rem; padding: 0.25rem var(--grid-space) 0 var(--grid-space); background: var(--bg-color-black); font-family: "gt-flexa-compressed", sans-serif; font-size: 1.875rem; letter-spacing: 0.1em; line-height: 2.5rem; text-transform: uppercase; text-align: center; position: absolute; top: 0; } .header__wrapper { display: grid; grid-template-columns: auto 1fr; grid-template-rows: repeat(3, auto); grid-template-areas: "actions menu" "socials socials" "langs langs"; width: 100%; height: calc(100vh - (100vh - 100%)); padding: 1.5rem var(--grid-space); overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; position: fixed; z-index: var(--z-index-header); } .header__wrapper::-webkit-scrollbar { display: none; } .header__menu { grid-area: menu; width: 100%; } .header__languages { grid-area: langs; align-self: end; font-family: "gt-flexa-expanded", sans-serif; font-size: 1rem; text-transform: uppercase; color: var(--text-color-lighter); } .header__languages .list { display: flex; } .header__languages .active { color: var(--text-color-white); } .header__languages li { position: relative; min-width: 2.75rem; height: 2.75rem; } .header__languages a { display: block; } .header__languages abbr { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; min-width: 2.75rem; height: 2.75rem; } .header__actions { grid-area: actions; } .header__actions .list__item + .list__item { margin-top: 1rem; } .header__actions .list__item a, .header__actions .list__item button { display: block; width: 2.75rem; height: 2.75rem; cursor: pointer; position: relative; } .header__actions .list__item a > *, .header__actions .list__item button > * { pointer-events: none; } .header__actions .list__item span { display: none; } .header__actions .list__item i { font-size: 2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .header__socials { grid-area: socials; justify-self: end; padding-top: 2.5rem; padding-bottom: 2.5rem; } .header__socials a { color: var(--text-color-white); border-color: var(--text-color-white) !important; } .header__search { display: none; width: var(--header-quick-width); height: var(--header-quick-width); cursor: pointer; position: fixed; top: var(--header-hero-height); z-index: var(--z-index-header); transform: translate(0, -100%); } .header__search span { display: none; } .header__search i { pointer-events: none; font-size: 1.5rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .header__button { text-align: right; touch-action: none; position: fixed; bottom: 1.5rem; right: var(--grid-space); z-index: var(--z-index-header-button); } .header__button.button--white, #tarteaucitronRoot button.header__button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]) { --button-stroke-color: var(--black); } @media (hover: hover) { .header__button.button--white:hover, #tarteaucitronRoot button.header__button:hover:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]) { --button-stroke-color: var(--black); } } .header__button span { display: grid; } .header__button span::before, .header__button span::after { grid-column: 1/-1; grid-row: 1/-1; } .header__button span::before { content: attr(data-close); opacity: 0; transform: translate(0, -200%); } .header__button span::after { content: attr(data-open); } .header__button i { width: 0.75rem; height: 0.125rem; margin-right: 0.75rem; background: currentColor; border-radius: 0.0625rem; pointer-events: none; position: relative; } .header__button i::before, .header__button i::after { content: ""; display: block; width: 100%; height: 100%; background: currentColor; border-radius: 0.0625rem; position: absolute; left: 0; } .header__button i::before { transform: translate(0, -200%); } .header__button i::after { transform: translate(0, 200%); } .header__button .button__icon { order: -1; } .header .menu__item { font-family: "gt-flexa-expanded", sans-serif; font-size: 1.5rem; text-align: right; } .header .menu__item a { display: inline-block; padding: 0.3em 0; position: relative; } .header .menu__item.active path { transition: none; } .header .menu__item.active path, .header .menu__item a:hover path { stroke-dashoffset: 0 !important; } .header .menu__item svg { width: 130%; pointer-events: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .header .menu__item path { stroke: var(--stroke-color-white); fill: none; stroke-width: 0.1875rem; transition: var(--transition); transition-duration: 0.48s; filter: url(#squiggle2); } @media screen and ( min-width: 64em ) { .header::before, .header::after { box-sizing: content-box; width: calc( 8 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 7 * var(--grid-gap) ); padding-left: var(--grid-space); } .header::after { background-image: url("../images/background/dark-ambiance-menu.jpg"); background-position-y: 60%; } .header::before { display: block; } .header__logo { width: var(--header-quick-width); height: var(--header-quick-width); top: var(--header-quick-offset); z-index: calc(var(--z-index-header-bg) + 1); } .header__logo::after { width: 100%; height: 100%; background-color: transparent; background-size: 60%; } .header__logo span { display: none; } .header__wrapper { width: calc( calc( 8 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 7 * var(--grid-gap) ) + var(--grid-space) ); padding: 3rem; grid-template-rows: 1fr repeat(2, auto); grid-template-areas: "langs menu" "actions menu" "socials menu"; } .header__menu { align-self: center; } .header__search { display: block; } .header__button { --button-bg-color: transparent !important; --button-stroke-color: transparent !important; --button-text-color: var(--white) !important; margin: 0; text-align: left; top: 50%; bottom: auto; right: auto; z-index: var(--z-index-header); transform-origin: left top; transform: translate(2.25rem, 0) rotate(-90deg) translate(-50%, 0); } .header__button span:before { width: 0; } .header__socials { padding-top: 1.5rem; padding-bottom: 0; width: 2.75rem; flex-wrap: wrap; } .header__socials .list__item + .list__item { margin-left: 0 !important; } .header__socials a { border: 0 !important; } .header__languages { align-self: start; } .header__languages .list { width: 2.75rem; flex-wrap: wrap; } .header__languages abbr { height: 2rem; } .header__actions .list__item--home { display: none; } .header__actions .list__item a, .header__actions .list__item button { height: 2rem; } .header__actions .list__item i { font-size: 1.5rem; } .header .menu__item { font-size: 5.0632911392vh; } } @media screen and ( min-width: 96em ) { .header::before, .header::after { width: calc( 6 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 5 * var(--grid-gap) ); } .header__wrapper { width: calc( calc( 6 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 5 * var(--grid-gap) ) + var(--grid-space) ); } } .hero { --text-color: #FBFBFB; --title-color: #FBFBFB; --stroke-color: #FBFBFB; --bg-color: #111111; display: grid; grid-template-rows: repeat(3, auto); padding-top: 3.875rem; padding-bottom: 2.5rem; background: url("../images/background/dark-ambiance.jpg") no-repeat center/cover; background-color: var(--bg-color); color: var(--text-color); position: relative; z-index: 2; } .hero__header { display: flex; align-items: center; flex-wrap: wrap; grid-row: 2/span 1; padding-top: 1rem; } .hero__header > * { flex: 0 0 100%; } .hero__title { padding-top: 1rem; text-align: center; } .hero__title a { display: block; } .hero__footer { grid-row: span 1/-1; } .hero__info { order: -1; flex: 1 1 auto !important; grid-row: 2/span 1; font-size: 0.875rem; } .hero__tag, .hero__tags { order: -1; flex: 0 0 auto !important; } .hero__img { grid-row: 1/span 1; width: 100%; aspect-ratio: 16/10; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .hero__img--full { grid-column: 1/-1; } @media screen and ( max-width: 47.9375em ) { .hero__tag.tag--fav { margin-left: var(--grid-gap); position: absolute; top: 1rem; left: var(--grid-margin); z-index: 2; } } @media screen and ( min-width: 48em ) { .hero { grid-template-rows: 1fr repeat(2, auto); padding: 0; } .hero::after { content: ""; display: block; width: 100vw; height: 100%; background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.944) 16.6%, rgba(0, 0, 0, 0.876) 30.8%, rgba(0, 0, 0, 0.8) 42.8%, rgba(0, 0, 0, 0.717) 53%, rgba(0, 0, 0, 0.63) 61.5%, rgba(0, 0, 0, 0.54) 68.5%, rgba(0, 0, 0, 0.45) 74.2%, rgba(0, 0, 0, 0.363) 78.8%, rgba(0, 0, 0, 0.28) 82.7%, rgba(0, 0, 0, 0.204) 85.9%, rgba(0, 0, 0, 0.136) 88.6%, rgba(0, 0, 0, 0.08) 91.2%, rgba(0, 0, 0, 0.037) 93.8%, rgba(0, 0, 0, 0.01) 96.7%, rgba(0, 0, 0, 0) 100%); mix-blend-mode: multiply; opacity: 0.8; position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } .hero__header { justify-content: center; text-align: center; } .hero__title { padding-top: 1.5rem; padding-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); padding-right: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); order: 2; } .hero__tag { order: 1; } .hero__tag + .hero__tag { margin-left: 1.5rem; } .hero__info { padding-top: 1rem; order: 3; } .hero__button { margin-bottom: 3.5rem; } .hero__img { grid-column: 1/-1; grid-row: 1/-1; height: 100%; aspect-ratio: 16/10; position: relative; z-index: -1; } } @media screen and ( min-width: 64em ) { .hero { min-height: 65vh; } .hero__img { aspect-ratio: none; width: 100vw; max-width: 100vw; position: absolute; left: 50%; transform: translate(-50%, 0); } } @media screen and ( min-width: 64em ) and ( max-width: 85.3125em ) { .hero__title { padding-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); padding-right: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } } @media screen and ( min-width: 90em ) { .hero__title { padding-left: calc( 1.5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0.5 * var(--grid-gap) ); padding-right: calc( 1.5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0.5 * var(--grid-gap) ); } } .dialog--search { display: flex; flex-wrap: wrap; width: 100%; position: fixed; top: 0; height: calc(100vh - (100vh - 100%)); padding: 6rem var(--grid-space); background: var(--bg-color); z-index: var(--z-index-search); } .dialog--search > * { flex: 0 0 100%; } .dialog--search .dialog__quick { align-self: end; } .dialog--search .dialog__quick .title, .dialog--search .dialog__quick .tacCurrentStatus, .dialog--search .dialog__quick .tarteaucitronH1, .dialog--search .dialog__quick .tarteaucitronH2, .dialog--search .dialog__quick .tarteaucitronTitle button, .tarteaucitronTitle .dialog--search .dialog__quick button, .dialog--search .dialog__quick .tarteaucitronH3, .dialog--search .dialog__quick .folder__button, .dialog--search .dialog__quick .folder__item a, .folder__item .dialog--search .dialog__quick a { margin-bottom: 0.125rem; } .dialog--search .dialog__quick .list { font-family: "gt-flexa", sans-serif; line-height: 2rem; } .dialog--search .dialog__quick .list__item + .list__item { margin-top: 0.5rem; } .dialog--search .dialog__quick a { display: block; } .dialog--search .dialog__button { position: absolute; top: var(--grid-space); right: var(--grid-space); z-index: 2; transform: translate(1.25rem, 0); } @media screen and ( min-width: 26.75em ) { .dialog--search { padding-left: 2.5rem; padding-right: 2.5rem; } .dialog--search .dialog__button { top: 1.5rem; right: 2.5rem; } } @media screen and ( min-width: 48em ) { .dialog--search { width: calc( 9 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 8 * var(--grid-gap) ); } } @media screen and ( min-width: 50.625em ) { .dialog--search { width: calc( 8 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 7 * var(--grid-gap) ); } } @media screen and ( min-width: 64em ) { .dialog--search { width: calc( 7 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 6 * var(--grid-gap) ); } .dialog--search .dialog__quick .list { font-size: 1.5rem; } } @media screen and ( min-width: 80em ) { .dialog--search { width: calc( 6 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 5 * var(--grid-gap) ); } } @media screen and ( min-width: 85.375em ) { .dialog--search { width: calc( 5 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 4 * var(--grid-gap) ); padding-top: 9rem; padding-bottom: 3rem; } } @media screen and ( min-width: 96em ) { .dialog--search { width: calc( 4 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 3 * var(--grid-gap) ); } } .dialog--newsletter { --stroke-color: var(--stroke-color-darker); padding: var(--grid-space); background: var(--bg-color-white); border-radius: 1.5rem 1.5rem 0 0; color: var(--text-color-darker); position: fixed; bottom: 0; left: 0; z-index: var(--z-index-newsletter); } .dialog--newsletter::before, .dialog--newsletter::after { content: ""; display: block; width: 100%; height: 2.5rem; background: linear-gradient(to top, #fbfbfb 0%, rgba(251, 251, 251, 0.944) 16.6%, rgba(251, 251, 251, 0.876) 30.8%, rgba(251, 251, 251, 0.8) 42.8%, rgba(251, 251, 251, 0.717) 53%, rgba(251, 251, 251, 0.63) 61.5%, rgba(251, 251, 251, 0.54) 68.5%, rgba(251, 251, 251, 0.45) 74.2%, rgba(251, 251, 251, 0.363) 78.8%, rgba(251, 251, 251, 0.28) 82.7%, rgba(251, 251, 251, 0.204) 85.9%, rgba(251, 251, 251, 0.136) 88.6%, rgba(251, 251, 251, 0.08) 91.2%, rgba(251, 251, 251, 0.037) 93.8%, rgba(251, 251, 251, 0.01) 96.7%, rgba(251, 251, 251, 0) 100%); pointer-events: none; position: absolute; left: 0; z-index: 2; } .dialog--newsletter::before { border-radius: inherit; background: linear-gradient(to bottom, #fbfbfb 0%, rgba(251, 251, 251, 0.944) 16.6%, rgba(251, 251, 251, 0.876) 30.8%, rgba(251, 251, 251, 0.8) 42.8%, rgba(251, 251, 251, 0.717) 53%, rgba(251, 251, 251, 0.63) 61.5%, rgba(251, 251, 251, 0.54) 68.5%, rgba(251, 251, 251, 0.45) 74.2%, rgba(251, 251, 251, 0.363) 78.8%, rgba(251, 251, 251, 0.28) 82.7%, rgba(251, 251, 251, 0.204) 85.9%, rgba(251, 251, 251, 0.136) 88.6%, rgba(251, 251, 251, 0.08) 91.2%, rgba(251, 251, 251, 0.037) 93.8%, rgba(251, 251, 251, 0.01) 96.7%, rgba(251, 251, 251, 0) 100%); top: 0; } .dialog--newsletter::after { bottom: 0; } .dialog--newsletter .dialog__scroller { display: grid; grid-template-rows: 2.75rem repeat(4, auto); grid-template-areas: "title" "text" "alert" "form"; max-height: 75vh; padding: 2rem calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } .dialog--newsletter .dialog__scroller::-webkit-scrollbar { display: none; } .dialog--newsletter .dialog__title { grid-area: title; font-size: 2rem; line-height: 2.5rem; margin-bottom: 1rem; } @media (prefers-color-scheme: dark) { .dialog--newsletter .dialog__title { color: var(--text-color-darker); } } .dialog--newsletter .dialog__text { grid-area: text; font-family: "gt-flexa", sans-serif; font-size: 0.875rem; margin: 2rem 0; } .dialog--newsletter .dialog__alert { grid-area: alert; margin-bottom: 2rem; } .dialog--newsletter .dialog__alert--error { color: var(--alert); } .dialog--newsletter .dialog__alert--succeed { color: var(--succeed); } .dialog--newsletter .dialog__alert--warning { color: var(--warning); } .dialog--newsletter .dialog__form { --grid-gap: 1.5rem; display: flex; flex-wrap: wrap; grid-area: form; gap: 1rem var(--grid-gap); } .dialog--newsletter .dialog__form .button, .dialog--newsletter .dialog__form #tarteaucitronRoot button#tarteaucitronCloseAlert, #tarteaucitronRoot .dialog--newsletter .dialog__form button#tarteaucitronCloseAlert, .dialog--newsletter .dialog__form #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), #tarteaucitronRoot .dialog--newsletter .dialog__form button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), .dialog--newsletter .dialog__form .sheet__video .js-video .tac_activate .tarteaucitronAllow, .sheet__video .js-video .tac_activate .dialog--newsletter .dialog__form .tarteaucitronAllow, .dialog--newsletter .dialog__form .sheet__content .js-video .tac_activate .tarteaucitronAllow, .sheet__content .js-video .tac_activate .dialog--newsletter .dialog__form .tarteaucitronAllow { justify-self: center; margin-top: 1rem; } @media (prefers-color-scheme: dark) { .dialog--newsletter .dialog__form .button, .dialog--newsletter .dialog__form #tarteaucitronRoot button#tarteaucitronCloseAlert, #tarteaucitronRoot .dialog--newsletter .dialog__form button#tarteaucitronCloseAlert, .dialog--newsletter .dialog__form #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), #tarteaucitronRoot .dialog--newsletter .dialog__form button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), .dialog--newsletter .dialog__form .sheet__video .js-video .tac_activate .tarteaucitronAllow, .sheet__video .js-video .tac_activate .dialog--newsletter .dialog__form .tarteaucitronAllow, .dialog--newsletter .dialog__form .sheet__content .js-video .tac_activate .tarteaucitronAllow, .sheet__content .js-video .tac_activate .dialog--newsletter .dialog__form .tarteaucitronAllow { --button-text-color: var(--text-color-darker); } .dialog--newsletter .dialog__form .button:hover, .dialog--newsletter .dialog__form #tarteaucitronRoot button#tarteaucitronCloseAlert:hover, #tarteaucitronRoot .dialog--newsletter .dialog__form button#tarteaucitronCloseAlert:hover, .dialog--newsletter .dialog__form #tarteaucitronRoot button:hover:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), #tarteaucitronRoot .dialog--newsletter .dialog__form button:hover:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), .dialog--newsletter .dialog__form .sheet__video .js-video .tac_activate .tarteaucitronAllow:hover, .sheet__video .js-video .tac_activate .dialog--newsletter .dialog__form .tarteaucitronAllow:hover, .dialog--newsletter .dialog__form .sheet__content .js-video .tac_activate .tarteaucitronAllow:hover, .sheet__content .js-video .tac_activate .dialog--newsletter .dialog__form .tarteaucitronAllow:hover { --button-text-color: var(--text-color-white); } } .dialog--newsletter .dialog__form .form__input:focus:not(.form__input--checkbox) { color: var(--text-color-white); background: var(--bg-color-black); } .dialog--newsletter .dialog__form .form__input:focus:not(.form__input--checkbox) ~ * { color: var(--text-color-white); } .dialog--newsletter .dialog__button { position: absolute; top: 0; right: 0; z-index: 2; } @media screen and ( min-width: 48em ) { .dialog--newsletter { width: calc( 10 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 9 * var(--grid-gap) ); max-height: calc(100% - 3rem); bottom: auto; padding: 0 4rem; border-radius: 0.5rem; top: 50%; left: 50%; transform: translate(-50%, -50%); } .dialog--newsletter::before, .dialog--newsletter::after { border-radius: inherit; } .dialog--newsletter .dialog__scroller { padding: 4rem 0; } } @media screen and ( min-width: 64em ) { .dialog--newsletter { width: calc( 8 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 7 * var(--grid-gap) ); } } @media screen and ( min-width: 96em ) { .dialog--newsletter { width: calc( 6 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 5 * var(--grid-gap) ); max-width: 76.8rem; } } * + .sheet { margin-top: 3rem; } @media screen and ( min-width: 48em ) { * + .sheet { margin-top: 5rem; } } .sheet .banner { margin-bottom: 0; } .sheet__header { --stroke-color: #FBFBFB; grid-template-rows: repeat(4, auto); position: relative; z-index: 2; } .sheet__type { color: var(--text-color-light); } .sheet__title { margin: 2rem 0 1.5rem 0; order: 3; } .sheet__img { aspect-ratio: 16/10; -o-object-fit: cover; object-fit: cover; order: 2; margin-top: 2.5rem; } .sheet__info { font-size: 0.875rem; order: 4; } .sheet__title, .sheet__info { order: -1; } .sheet__tags { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; margin-top: 2.5rem; grid-row: 1/span 1; order: 1; } .sheet__tags .tag__list { flex: 0 0 auto; } .sheet__type { flex: 0 0 auto; padding-right: 0.75rem; } .sheet__video { grid-row: span 1/-1; width: 100%; margin-top: 2.5rem; aspect-ratio: 16/9; } .sheet__video .js-video { aspect-ratio: 16/9; width: 100%; height: 100%; } .sheet__video .js-video iframe { display: block; } .sheet__content { padding: 0 var(--grid-space); } .sheet__content > *:first-child .block, body.single-legacy .sheet__content > *:first-child .gallery-item, body.single-legacy .sheet__content > *:first-child blockquote, .sheet__content .banner + * .block, body.single-legacy .sheet__content .banner + * .gallery-item, body.single-legacy .sheet__content .banner + * blockquote { margin-top: 0; } .sheet__content a { color: var(--contrast-color); } .sheet__content a::-moz-selection { color: var(--contrast-color); } .sheet__content a::selection { color: var(--contrast-color); } .sheet__content > * { flex: 1 1 100%; } .sheet__content > .row--rte { display: flex; flex-wrap: wrap; } .sheet__content > .row--rte > .block:first-child, body.single-legacy .sheet__content > .row--rte > .gallery-item:first-child, body.single-legacy .sheet__content > .row--rte > blockquote:first-child { margin-top: 0; } .sheet__content > .row--rte > p img { width: calc( 12 * ( 100% - ( var(--grid-gap) * ( 7 ) ) ) / 8 + 11 * var(--grid-gap) ); max-width: none; height: auto; position: relative; left: 50%; transform: translate(-50%, 0); } @media screen and ( max-width: 47.9375em ) { .sheet__content > .row--rte > p img { width: calc(100% + var(--grid-space) * 2); } } .sheet__content > .row--rte .block--video iframe { display: block; width: 100%; border: 0; aspect-ratio: 16/9; } .sheet__footer { padding: 1.5rem 0; margin-top: 2.5rem; border-top: 0.125rem solid var(--stroke-color); border-bottom: 0.125rem solid var(--contrast-color, var(--stroke-color)); grid-column: 1/-1; } .sheet__writer { text-align: center; } .sheet__writer strong { font-family: "gt-flexa", sans-serif; } .sheet__avatar { width: 2.25rem; height: 2.25rem; margin: 1rem auto 0 auto; border-radius: 62.5rem; } .sheet__header:not(.sheet__header--no-img) .sheet__title, .sheet__header:not(.sheet__header--no-img) .sheet__type { color: inherit; } .sheet__header:not(.sheet__header--no-img) .sheet__info { padding-bottom: 3rem; } .sheet__header--no-img { color: var(--text-color); } .sheet__header--no-img::after, .sheet__header--no-img .sheet__img { display: none !important; } @media screen and ( min-width: 48em ) { .sheet__header { grid-template-rows: minmax(5rem, 1fr) repeat(3, auto); align-content: end; position: relative; z-index: 2; color: var(--text-color-white); } .sheet__header::after { content: ""; display: block; width: 100vw; height: 100%; background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.944) 16.6%, rgba(0, 0, 0, 0.876) 30.8%, rgba(0, 0, 0, 0.8) 42.8%, rgba(0, 0, 0, 0.717) 53%, rgba(0, 0, 0, 0.63) 61.5%, rgba(0, 0, 0, 0.54) 68.5%, rgba(0, 0, 0, 0.45) 74.2%, rgba(0, 0, 0, 0.363) 78.8%, rgba(0, 0, 0, 0.28) 82.7%, rgba(0, 0, 0, 0.204) 85.9%, rgba(0, 0, 0, 0.136) 88.6%, rgba(0, 0, 0, 0.08) 91.2%, rgba(0, 0, 0, 0.037) 93.8%, rgba(0, 0, 0, 0.01) 96.7%, rgba(0, 0, 0, 0) 100%); mix-blend-mode: multiply; opacity: 0.8; position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } .sheet__header.sheet__header--no-img { grid-template-rows: 2.5rem repeat(3, auto); } .sheet__tags { grid-row: 2/span 1; margin-top: 0; margin-bottom: 0.5rem; } .sheet__tags--centered { justify-content: center; } .sheet__title { grid-row: 3/span 1; padding-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); padding-right: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); text-align: center; } .sheet__info { grid-row: span 1/-1; text-align: center; } .sheet__img { grid-row: 1/-1; aspect-ratio: unset; -o-object-position: center; object-position: center; margin-top: 0; position: relative; z-index: -2; } .sheet__video { margin-top: 6rem; } .sheet__footer { grid-column: 2/-2; display: flex; justify-content: center; align-items: center; margin-top: 2.5rem; margin-bottom: 2.5rem; font-size: 1.25rem; } .sheet__avatar { width: 5rem; height: 5rem; margin: 0 0 0 1.5rem; } } @media screen and ( min-width: 64em ) { .sheet__header { min-height: 65vh; } .sheet__header.sheet__header--no-img { grid-template-rows: 5rem repeat(3, auto); min-height: auto; } .sheet__img { aspect-ratio: none; width: 100vw; max-width: 100vw; height: 100%; position: absolute; left: 50%; transform: translate(-50%, 0); } } @media screen and ( min-width: 64em ) and ( max-width: 85.3125em ) { .sheet__title { padding-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); padding-right: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } } @media screen and ( min-width: 90em ) { .sheet__title { padding-left: calc( 1.5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0.5 * var(--grid-gap) ); padding-right: calc( 1.5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0.5 * var(--grid-gap) ); } } .sticker { width: 100%; max-width: 90rem; padding-block: 1em; padding-inline: var(--grid-space); row-gap: 0.5em; position: fixed; top: 0; left: 50%; translate: -50% 0; z-index: var(--z-index-sticker); transition: var(--transition); } @media screen and ( min-width: 48em ) { .sticker { padding-block: 1.25em; } } .sticker::before { content: ""; display: block; width: 100vw; height: 100%; background: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 50%; z-index: -1; translate: -50% 0; } .sticker__title { --title-color: var(--text-color-white); font-size: 1.125rem; line-height: 1.2; } @media screen and ( min-width: 48em ) { .sticker__title { font-size: 1.625rem; } } .sticker__information { display: flex; gap: 1em; } .sticker__release { --text-color: var(--text-color-white); color: var(--text-color); } @media screen and ( max-width: 47.9375em ) { .sticker__release { font-size: 0.875rem; } } .sticker .sheet__tags { order: 0; display: inline-flex; margin: 0; } @media screen and ( max-width: 47.9375em ) { .sticker .sheet__tags { display: none; } } .sheet.current-article.scrolled .sticker { translate: -50% 0; opacity: 1; } @media screen and ( max-width: 47.9375em ) { .sheet.current-article.scrolled .sticker { translate: -50% 3.125rem; } } .sheet:not(.scrolled) .sticker { translate: -50% -100%; opacity: 0; pointer-events: none; } body.header-open .sticker, .sheet:not(.current-article) .sticker { opacity: 0; pointer-events: none; } .block--listing, .block--text, body.single-legacy .sheet__content p, body.single-legacy .sheet__content h1, body.single-legacy .sheet__content h2, body.single-legacy .sheet__content h3, body.single-legacy .sheet__content h4, body.single-legacy .sheet__content h5, body.single-legacy .sheet__content h6, .row--rte { --rte-content-spacing: 2em; } .block--listing a:not(.button, .button-text, .button-icon), .block--text a:not(.button, .button-text, .button-icon), body.single-legacy .sheet__content p a:not(.button, .button-text, .button-icon), body.single-legacy .sheet__content h1 a:not(.button, .button-text, .button-icon), body.single-legacy .sheet__content h2 a:not(.button, .button-text, .button-icon), body.single-legacy .sheet__content h3 a:not(.button, .button-text, .button-icon), body.single-legacy .sheet__content h4 a:not(.button, .button-text, .button-icon), body.single-legacy .sheet__content h5 a:not(.button, .button-text, .button-icon), body.single-legacy .sheet__content h6 a:not(.button, .button-text, .button-icon), .row--rte a:not(.button, .button-text, .button-icon) { font-weight: 600; -webkit-text-decoration: underline var(--contrast-color); text-decoration: underline var(--contrast-color); word-wrap: break-word; transition: var(--transition); } .block--listing a:not(.button, .button-text, .button-icon):hover, .block--text a:not(.button, .button-text, .button-icon):hover, body.single-legacy .sheet__content p a:not(.button, .button-text, .button-icon):hover, body.single-legacy .sheet__content h1 a:not(.button, .button-text, .button-icon):hover, body.single-legacy .sheet__content h2 a:not(.button, .button-text, .button-icon):hover, body.single-legacy .sheet__content h3 a:not(.button, .button-text, .button-icon):hover, body.single-legacy .sheet__content h4 a:not(.button, .button-text, .button-icon):hover, body.single-legacy .sheet__content h5 a:not(.button, .button-text, .button-icon):hover, body.single-legacy .sheet__content h6 a:not(.button, .button-text, .button-icon):hover, .row--rte a:not(.button, .button-text, .button-icon):hover { background: var(--contrast-color); color: var(--text-color-white); } .block--listing p:empty, .block--text p:empty, body.single-legacy .sheet__content p p:empty, body.single-legacy .sheet__content h1 p:empty, body.single-legacy .sheet__content h2 p:empty, body.single-legacy .sheet__content h3 p:empty, body.single-legacy .sheet__content h4 p:empty, body.single-legacy .sheet__content h5 p:empty, body.single-legacy .sheet__content h6 p:empty, .row--rte p:empty { display: none; } .block--listing h2, .block--text h2, body.single-legacy .sheet__content p h2, body.single-legacy .sheet__content h1 h2, body.single-legacy .sheet__content h2 h2, body.single-legacy .sheet__content h3 h2, body.single-legacy .sheet__content h4 h2, body.single-legacy .sheet__content h5 h2, body.single-legacy .sheet__content h6 h2, .row--rte h2, .block--listing h3, .block--text h3, body.single-legacy .sheet__content p h3, body.single-legacy .sheet__content h1 h3, body.single-legacy .sheet__content h2 h3, body.single-legacy .sheet__content h3 h3, body.single-legacy .sheet__content h4 h3, body.single-legacy .sheet__content h5 h3, body.single-legacy .sheet__content h6 h3, .row--rte h3, .block--listing h4, .block--text h4, body.single-legacy .sheet__content p h4, body.single-legacy .sheet__content h1 h4, body.single-legacy .sheet__content h2 h4, body.single-legacy .sheet__content h3 h4, body.single-legacy .sheet__content h4 h4, body.single-legacy .sheet__content h5 h4, body.single-legacy .sheet__content h6 h4, .row--rte h4, .block--listing h5, .block--text h5, body.single-legacy .sheet__content p h5, body.single-legacy .sheet__content h1 h5, body.single-legacy .sheet__content h2 h5, body.single-legacy .sheet__content h3 h5, body.single-legacy .sheet__content h4 h5, body.single-legacy .sheet__content h5 h5, body.single-legacy .sheet__content h6 h5, .row--rte h5, .block--listing h6, .block--text h6, body.single-legacy .sheet__content p h6, body.single-legacy .sheet__content h1 h6, body.single-legacy .sheet__content h2 h6, body.single-legacy .sheet__content h3 h6, body.single-legacy .sheet__content h4 h6, body.single-legacy .sheet__content h5 h6, body.single-legacy .sheet__content h6 h6, .row--rte h6 { font-family: "gt-flexa-expanded", sans-serif; font-weight: 500; color: var(--title-color); } .block--listing h3, .block--text h3, body.single-legacy .sheet__content p h3, body.single-legacy .sheet__content h1 h3, body.single-legacy .sheet__content h2 h3, body.single-legacy .sheet__content h3 h3, body.single-legacy .sheet__content h4 h3, body.single-legacy .sheet__content h5 h3, body.single-legacy .sheet__content h6 h3, .row--rte h3, .block--listing h4, .block--text h4, body.single-legacy .sheet__content p h4, body.single-legacy .sheet__content h1 h4, body.single-legacy .sheet__content h2 h4, body.single-legacy .sheet__content h3 h4, body.single-legacy .sheet__content h4 h4, body.single-legacy .sheet__content h5 h4, body.single-legacy .sheet__content h6 h4, .row--rte h4, .block--listing h5, .block--text h5, body.single-legacy .sheet__content p h5, body.single-legacy .sheet__content h1 h5, body.single-legacy .sheet__content h2 h5, body.single-legacy .sheet__content h3 h5, body.single-legacy .sheet__content h4 h5, body.single-legacy .sheet__content h5 h5, body.single-legacy .sheet__content h6 h5, .row--rte h5, .block--listing h6, .block--text h6, body.single-legacy .sheet__content p h6, body.single-legacy .sheet__content h1 h6, body.single-legacy .sheet__content h2 h6, body.single-legacy .sheet__content h3 h6, body.single-legacy .sheet__content h4 h6, body.single-legacy .sheet__content h5 h6, body.single-legacy .sheet__content h6 h6, .row--rte h6 { color: var(--text-color-light); } .block--listing h2, .block--text h2, body.single-legacy .sheet__content p h2, body.single-legacy .sheet__content h1 h2, body.single-legacy .sheet__content h2 h2, body.single-legacy .sheet__content h3 h2, body.single-legacy .sheet__content h4 h2, body.single-legacy .sheet__content h5 h2, body.single-legacy .sheet__content h6 h2, .row--rte h2 { font-size: 2rem; list-style: 2.5rem; } .block--listing h3, .block--text h3, body.single-legacy .sheet__content p h3, body.single-legacy .sheet__content h1 h3, body.single-legacy .sheet__content h2 h3, body.single-legacy .sheet__content h3 h3, body.single-legacy .sheet__content h4 h3, body.single-legacy .sheet__content h5 h3, body.single-legacy .sheet__content h6 h3, .row--rte h3 { font-size: 1.5rem; line-height: 2rem; } .block--listing h4, .block--text h4, body.single-legacy .sheet__content p h4, body.single-legacy .sheet__content h1 h4, body.single-legacy .sheet__content h2 h4, body.single-legacy .sheet__content h3 h4, body.single-legacy .sheet__content h4 h4, body.single-legacy .sheet__content h5 h4, body.single-legacy .sheet__content h6 h4, .row--rte h4, .block--listing h5, .block--text h5, body.single-legacy .sheet__content p h5, body.single-legacy .sheet__content h1 h5, body.single-legacy .sheet__content h2 h5, body.single-legacy .sheet__content h3 h5, body.single-legacy .sheet__content h4 h5, body.single-legacy .sheet__content h5 h5, body.single-legacy .sheet__content h6 h5, .row--rte h5, .block--listing h6, .block--text h6, body.single-legacy .sheet__content p h6, body.single-legacy .sheet__content h1 h6, body.single-legacy .sheet__content h2 h6, body.single-legacy .sheet__content h3 h6, body.single-legacy .sheet__content h4 h6, body.single-legacy .sheet__content h5 h6, body.single-legacy .sheet__content h6 h6, .row--rte h6 { font-size: 1rem; line-height: 1.5rem; } .block--listing ol li + li, .block--text ol li + li, body.single-legacy .sheet__content p ol li + li, body.single-legacy .sheet__content h1 ol li + li, body.single-legacy .sheet__content h2 ol li + li, body.single-legacy .sheet__content h3 ol li + li, body.single-legacy .sheet__content h4 ol li + li, body.single-legacy .sheet__content h5 ol li + li, body.single-legacy .sheet__content h6 ol li + li, .row--rte ol li + li, .block--listing ul li + li, .block--text ul li + li, body.single-legacy .sheet__content p ul li + li, body.single-legacy .sheet__content h1 ul li + li, body.single-legacy .sheet__content h2 ul li + li, body.single-legacy .sheet__content h3 ul li + li, body.single-legacy .sheet__content h4 ul li + li, body.single-legacy .sheet__content h5 ul li + li, body.single-legacy .sheet__content h6 ul li + li, .row--rte ul li + li { margin-top: 0.25rem; } .block--listing ul li, .block--text ul li, body.single-legacy .sheet__content p ul li, body.single-legacy .sheet__content h1 ul li, body.single-legacy .sheet__content h2 ul li, body.single-legacy .sheet__content h3 ul li, body.single-legacy .sheet__content h4 ul li, body.single-legacy .sheet__content h5 ul li, body.single-legacy .sheet__content h6 ul li, .row--rte ul li { padding-left: 1em; position: relative; } .block--listing ul li::before, .block--text ul li::before, body.single-legacy .sheet__content p ul li::before, body.single-legacy .sheet__content h1 ul li::before, body.single-legacy .sheet__content h2 ul li::before, body.single-legacy .sheet__content h3 ul li::before, body.single-legacy .sheet__content h4 ul li::before, body.single-legacy .sheet__content h5 ul li::before, body.single-legacy .sheet__content h6 ul li::before, .row--rte ul li::before { content: "•"; position: absolute; left: 0; } .block--listing ol, .block--text ol, body.single-legacy .sheet__content p ol, body.single-legacy .sheet__content h1 ol, body.single-legacy .sheet__content h2 ol, body.single-legacy .sheet__content h3 ol, body.single-legacy .sheet__content h4 ol, body.single-legacy .sheet__content h5 ol, body.single-legacy .sheet__content h6 ol, .row--rte ol { counter-reset: list; } .block--listing ol li, .block--text ol li, body.single-legacy .sheet__content p ol li, body.single-legacy .sheet__content h1 ol li, body.single-legacy .sheet__content h2 ol li, body.single-legacy .sheet__content h3 ol li, body.single-legacy .sheet__content h4 ol li, body.single-legacy .sheet__content h5 ol li, body.single-legacy .sheet__content h6 ol li, .row--rte ol li { padding-left: 0; } .block--listing ol li::before, .block--text ol li::before, body.single-legacy .sheet__content p ol li::before, body.single-legacy .sheet__content h1 ol li::before, body.single-legacy .sheet__content h2 ol li::before, body.single-legacy .sheet__content h3 ol li::before, body.single-legacy .sheet__content h4 ol li::before, body.single-legacy .sheet__content h5 ol li::before, body.single-legacy .sheet__content h6 ol li::before, .row--rte ol li::before { display: inline-block; counter-increment: list; content: counter(list) "."; margin-right: 0.5em; } .block--listing ol li *, .block--text ol li *, body.single-legacy .sheet__content p ol li *, body.single-legacy .sheet__content h1 ol li *, body.single-legacy .sheet__content h2 ol li *, body.single-legacy .sheet__content h3 ol li *, body.single-legacy .sheet__content h4 ol li *, body.single-legacy .sheet__content h5 ol li *, body.single-legacy .sheet__content h6 ol li *, .row--rte ol li * { grid-area: text; } .block--listing > * + *, .block--text > * + *, body.single-legacy .sheet__content p > * + *, body.single-legacy .sheet__content h1 > * + *, body.single-legacy .sheet__content h2 > * + *, body.single-legacy .sheet__content h3 > * + *, body.single-legacy .sheet__content h4 > * + *, body.single-legacy .sheet__content h5 > * + *, body.single-legacy .sheet__content h6 > * + *, .row--rte > * + * { margin-top: var(--rte-content-spacing); } .row, body.single-legacy .sheet__content .gallery { max-width: 100%; align-items: center; align-content: center; justify-content: center; } .row--inverted > *:last-child { order: -1; } @media screen and ( min-width: 48em ) { .row--compo .block--img ~ *, .row--compo body.single-legacy .sheet__content .gallery-item ~ *, body.single-legacy .sheet__content .row--compo .gallery-item ~ * { margin-top: 0; } } @media screen and ( max-width: 47.9375em ) { .row--slides, body.single-legacy .sheet__content .gallery { flex-wrap: nowrap; justify-content: start; } .row--slides .block--img:not(.block--img--v), .row--slides body.single-legacy .sheet__content .gallery-item:not(.block--img--v), body.single-legacy .sheet__content .row--slides .gallery-item:not(.block--img--v), body.single-legacy .sheet__content .gallery .block--img:not(.block--img--v), body.single-legacy .sheet__content .gallery .gallery-item:not(.block--img--v) { flex: 0 0 100%; } } .row--align-top, body.single-legacy .sheet__content .gallery { align-items: start; } .row + .row--rte, body.single-legacy .sheet__content .gallery + .row--rte { margin-top: var(--rte-block-spacing); } .block, body.single-legacy .sheet__content .gallery-item, body.single-legacy .sheet__content blockquote { --block-v-space: 2.5rem; margin-top: var(--block-v-space); } @media screen and ( min-width: 48em ) { .block, body.single-legacy .sheet__content .gallery-item, body.single-legacy .sheet__content blockquote { --block-v-space: 5rem; } } .block a, body.single-legacy .sheet__content .gallery-item a, body.single-legacy .sheet__content blockquote a { font-weight: 600; -webkit-text-decoration: underline var(--contrast-color); text-decoration: underline var(--contrast-color); transition: var(--transition); } .block a:hover, body.single-legacy .sheet__content .gallery-item a:hover, body.single-legacy .sheet__content blockquote a:hover { background: var(--contrast-color); color: var(--text-color-white); } .block figcaption:empty, body.single-legacy .sheet__content .gallery-item figcaption:empty, body.single-legacy .sheet__content blockquote figcaption:empty { display: none; } .block--intro { font-family: "gt-flexa", sans-serif; font-size: 1.25rem; font-weight: 400; color: var(--text-color-light); } .block--intro strong { font-weight: 400; } @media (prefers-color-scheme: dark) { .block--intro { color: var(--text-color-white); } } .block--img img, body.single-legacy .sheet__content .gallery-item img { -o-object-fit: cover; object-fit: cover; } .block--img.block--full figcaption, body.single-legacy .sheet__content .block--full.gallery-item figcaption { padding-left: 1.5rem; padding-right: 1.5rem; } @media screen and ( max-width: 47.9375em ) { .block--img--16-10, body.single-legacy .sheet__content .gallery-item { flex: 0 0 calc(100% + var(--grid-space) * 2); } .block--img--16-10 figcaption, body.single-legacy .sheet__content .gallery-item figcaption { padding-left: var(--grid-space); padding-right: var(--grid-space); } } .block--img--16-10 img, body.single-legacy .sheet__content .gallery-item img { aspect-ratio: 16/10; } .block--img--2-3 img { aspect-ratio: 2/3; } .block--img--v { align-self: stretch; position: relative; } .block--img--v figure, .block--img--v img { height: 100%; } .block--img--v img { position: absolute; top: 0; left: 0; } .block--img figcaption, body.single-legacy .sheet__content .gallery-item figcaption { padding-top: 1em; font-family: "gt-flexa", sans-serif; font-weight: 300; font-size: 1rem; } .block--no-caption figcaption, body.single-legacy .sheet__content .gallery-item figcaption { display: none; } .block--video { position: relative; background: var(--bg-color-dark); } .block--video .js-video { display: block; aspect-ratio: 16/9; width: 100%; height: 100%; max-width: 100%; } .block--video .js-video iframe { display: block; width: 100%; height: 100%; } .block--video .fb-video iframe { display: block; width: 100%; height: 100%; } .block__cookies { display: flex; flex-wrap: wrap; padding: 3rem; align-content: center; aspect-ratio: 16/9; text-align: center; color: var(--text-color-white); } .block__cookies p { font-family: "gt-flexa", sans-serif; font-size: 1rem; } .block__cookies .button, .block__cookies #tarteaucitronRoot button#tarteaucitronCloseAlert, #tarteaucitronRoot .block__cookies button#tarteaucitronCloseAlert, .block__cookies #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), #tarteaucitronRoot .block__cookies button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), .block__cookies .sheet__video .js-video .tac_activate .tarteaucitronAllow, .sheet__video .js-video .tac_activate .block__cookies .tarteaucitronAllow, .block__cookies .sheet__content .js-video .tac_activate .tarteaucitronAllow, .sheet__content .js-video .tac_activate .block__cookies .tarteaucitronAllow { flex: 0 0 auto; margin: 1.5rem auto 0 auto; } .block__cookies > * { flex: 0 0 100%; } @media (prefers-color-scheme: dark) { .block__cookies { color: var(--text-color-darker); } .block__cookies .button, .block__cookies #tarteaucitronRoot button#tarteaucitronCloseAlert, #tarteaucitronRoot .block__cookies button#tarteaucitronCloseAlert, .block__cookies #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), #tarteaucitronRoot .block__cookies button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), .block__cookies .sheet__video .js-video .tac_activate .tarteaucitronAllow, .sheet__video .js-video .tac_activate .block__cookies .tarteaucitronAllow, .block__cookies .sheet__content .js-video .tac_activate .tarteaucitronAllow, .sheet__content .js-video .tac_activate .block__cookies .tarteaucitronAllow { --button-stroke-color: var(--stroke-color-darker); --button-text-color: var(--stroke-color-darker); } .block__cookies .button:hover, .block__cookies #tarteaucitronRoot button#tarteaucitronCloseAlert:hover, #tarteaucitronRoot .block__cookies button#tarteaucitronCloseAlert:hover, .block__cookies #tarteaucitronRoot button:hover:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), #tarteaucitronRoot .block__cookies button:hover:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), .block__cookies .sheet__video .js-video .tac_activate .tarteaucitronAllow:hover, .sheet__video .js-video .tac_activate .block__cookies .tarteaucitronAllow:hover, .block__cookies .sheet__content .js-video .tac_activate .tarteaucitronAllow:hover, .sheet__content .js-video .tac_activate .block__cookies .tarteaucitronAllow:hover { --button-text-color: var(--stroke-color-white); } } .block--quote, body.single-legacy .sheet__content blockquote { font-weight: 300; font-size: 2.375rem; line-height: 2.75rem; } .block--quote .block__text, body.single-legacy .sheet__content blockquote .block__text { position: relative; } .block--quote .block__text::before, body.single-legacy .sheet__content blockquote .block__text::before, .block--quote .block__text::after, body.single-legacy .sheet__content blockquote .block__text::after { font-size: 1.5em; line-height: 1; color: var(--text-color-lighter); position: absolute; } .block--quote .block__text::before, body.single-legacy .sheet__content blockquote .block__text::before { content: "“"; transform: translate(-125%, 0); } @media screen and ( min-width: 64em ) { .block--quote .block__text::before, body.single-legacy .sheet__content blockquote .block__text::before { transform: translate(-200%, 0); } } .block--quote .block__text::after, body.single-legacy .sheet__content blockquote .block__text::after { content: "”"; transform: translate(125%, 60%); right: 0; bottom: 0; } @media screen and ( min-width: 64em ) { .block--quote .block__text::after, body.single-legacy .sheet__content blockquote .block__text::after { transform: translate(200%, 60%); } } .block--quote .block__cite, body.single-legacy .sheet__content blockquote .block__cite { display: block; font-size: 50%; text-align: right; margin-top: 1em; } .block--frame, .block--listing { --frame-v-space: 1.5rem; padding-top: var(--frame-v-space); padding-bottom: var(--frame-v-space); color: var(--text-color-invert); position: relative; z-index: 2; } @media screen and ( min-width: 48em ) { .block--frame, .block--listing { --frame-v-space: 2.5rem; } } .block--frame::before, .block--listing::before { content: ""; display: block; width: 100%; height: 100%; padding-left: inherit; padding-right: inherit; background: var(--bg-color-dark); background-clip: content-box; position: absolute; top: 0; left: 0; z-index: -1; } .block--frame > *, .block--listing > * { padding-left: var(--frame-v-space); padding-right: var(--frame-v-space); } .block--listing { font-family: "gt-flexa", sans-serif; position: relative; z-index: 2; } .block--listing .block__title { font-weight: 600; } .block--listing li { padding-left: 1em; position: relative; } .block--listing li::before { content: "•"; position: absolute; left: 0; } .block--listing li + li { margin-top: 0.25rem; } .block--listing a { color: inherit; text-decoration-color: inherit; font-weight: inherit; } @media (prefers-color-scheme: dark) { .block--listing { color: var(--text-color-darker); } } .block--review { grid-template-rows: repeat(4, auto); padding: 2.5rem 0; font-family: "gt-flexa", sans-serif; font-weight: 400; position: relative; z-index: 2; } .block--review::after { content: ""; display: block; width: 100vw; height: 100%; background: url("../images/background/dark-ambiance.jpg") no-repeat center/cover; background-color: var(--bg-color-darker); position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } @media screen and ( min-width: 48em ) { .block--review { padding: 5rem 0; } } .block--review .block__title { grid-row: 1/span 1; padding-bottom: 2rem; text-align: center; } @media screen and ( min-width: 48em ) { .block--review .block__title { padding-bottom: 3.5rem; } } .block--review .block__price, .block--review .block__weight { grid-row: 2/span 1; font-size: 1.5rem; position: relative; } .block--review .block__price i, .block--review .block__weight i { display: inline-block; font-size: 1.5rem; line-height: 1.5; } @media screen and ( min-width: 48em ) { .block--review .block__price { grid-column: 2/span 6; } } @media screen and ( min-width: 64em ) { .block--review .block__price { grid-column: 3/span 5; } } .block--review .block__price i { margin-right: 0.5rem; } .block--review .block__weight { padding-right: 2rem; text-align: right; } @media screen and ( min-width: 48em ) { .block--review .block__weight { grid-column: span 6/-2; } } @media screen and ( min-width: 64em ) { .block--review .block__weight { grid-column: span 5/-3; } } .block--review .block__weight i { position: absolute; right: 0; } .block--review .block__weight small { display: block; font-size: 0.875rem; line-height: 1; } .block--review .block__opinion { padding-top: 2rem; grid-row: 3/span 1; } @media screen and ( min-width: 48em ) { .block--review .block__opinion { padding-top: 3.5rem; grid-column: 2/span 7; } } @media screen and ( min-width: 64em ) { .block--review .block__opinion { grid-column: 3/span 6; } } .block--review .block__list { --bg-icon-color: var(--green); position: relative; padding-left: 3.5rem; } .block--review .block__list + .block__list { margin-top: 2rem; } .block--review .block__list li { font-size: 1rem; } .block--review .block__list li + li { margin-top: 0.5rem; } .block--review .block__list::before { width: 2.25rem; height: 2.25rem; border-radius: 62.5rem; background: var(--bg-icon-color); font-family: "remixicon" !important; font-size: 2em; line-height: 2.1875rem; color: var(--black); text-align: center; position: absolute; top: -0.4375rem; left: 0; } .block--review .block__list--high::before { line-height: 2rem; } .block--review .block__list--med { --bg-icon-color: var(--yellow); } .block--review .block__list--low { --bg-icon-color: var(--red); } .block--review .block__list--low::before { line-height: 2.5rem; } .block--review .block__evaluation { padding-top: 2rem; grid-row: span 1/-1; } @media screen and ( min-width: 48em ) { .block--review .block__evaluation { align-self: start; grid-row: 3/span 1; grid-column: span 5/-2; padding: 2rem 1.5rem; margin-top: 3.5rem; border: 0.0625rem solid var(--stroke-color-white); } } @media screen and ( min-width: 64em ) { .block--review .block__evaluation { grid-column: span 4/-3; } } .block--review .block__evaluation .title, .block--review .block__evaluation .tacCurrentStatus, .block--review .block__evaluation .tarteaucitronH1, .block--review .block__evaluation .tarteaucitronH2, .block--review .block__evaluation .tarteaucitronTitle button, .tarteaucitronTitle .block--review .block__evaluation button, .block--review .block__evaluation .tarteaucitronH3, .block--review .block__evaluation .folder__button, .block--review .block__evaluation .folder__item a, .folder__item .block--review .block__evaluation a { font-size: 1rem; line-height: 1.5; padding-bottom: 1.5rem; text-align: center; } @media screen and ( min-width: 64em ) { .block--review .block__evaluation .title, .block--review .block__evaluation .tacCurrentStatus, .block--review .block__evaluation .tarteaucitronH1, .block--review .block__evaluation .tarteaucitronH2, .block--review .block__evaluation .tarteaucitronTitle button, .tarteaucitronTitle .block--review .block__evaluation button, .block--review .block__evaluation .tarteaucitronH3, .block--review .block__evaluation .folder__button, .block--review .block__evaluation .folder__item a, .folder__item .block--review .block__evaluation a { font-size: 1.25rem; } } .block--review .block__evaluation .block__awards { display: flex; justify-content: center; text-align: center; } @media screen and ( min-width: 48em ) { .block--review .block__evaluation .block__awards { flex-wrap: wrap; } .block--review .block__evaluation .block__awards > * { flex: 0 0 100%; } } .block--review .block__evaluation .block__awards li { --icon-color: var(--grey-dark); --text-color: var(--grey-dark); font-size: 0.875rem; line-height: 1.25rem; } .block--review .block__evaluation .block__awards li.active { --text-color: var(--white); --icon-color: var(--yellow); } @media screen and ( max-width: 47.9375em ) { .block--review .block__evaluation .block__awards li + li { margin-left: 1.5rem; } } @media screen and ( min-width: 48em ) { .block--review .block__evaluation .block__awards li + li { margin-top: 1.5rem; } } .block--review .block__evaluation .block__awards i { font-size: 2.5rem; line-height: 1em; color: var(--icon-color); } .block--review .block__evaluation .block__awards span { display: block; margin-top: 0.375rem; color: var(--text-color); } .block--full { flex: 0 0 calc(100% + var(--grid-space) * 2); } .slideshow__bullets { display: flex; justify-content: center; padding-top: 1.5rem; } @media screen and ( min-width: 48em ) { .slideshow__bullets { display: none; } } .slideshow__bullet { --bullet-bg-color: transparent; flex: 0 0 0.5rem; height: 0.5rem; border: 0.0625rem solid var(--stroke-color); border-radius: 62.5rem; background: var(--bullet-bg-color); } .slideshow__bullet + .slideshow__bullet { margin-left: 0.5rem; } .slideshow__bullet.current { --bullet-bg-color: var(--stroke-color); } .slideshow__caption { padding-top: 1em; font-family: "gt-flexa", sans-serif; font-weight: 300; font-size: 1rem; } .banner { width: 100%; padding: 2.5rem 0; } @media screen and ( max-width: 47.9375em ) { .banner { flex: 0 0 calc(100% + var(--grid-space) * 2); } } @media screen and ( min-width: 48em ) { .banner { grid-column: 2/-2; padding: 3rem 0; } } .banner img { width: 100%; height: auto; margin-left: auto; margin-right: auto; -o-object-fit: cover; object-fit: cover; } @media screen and ( min-width: 48em ) { .banner img { max-width: 67.5rem; margin: 0 auto; } } @media screen and ( max-width: 47.9375em ) { .banner--first { order: -1; margin-top: 0; } } @media screen and ( min-width: 48em ) { .banner--first { padding-bottom: 0; } } .banner__fixed { width: 100vw; height: 80vh; position: fixed; top: 3.75rem; left: 50%; z-index: -1; transform: translate(-50%, 0); } @media screen and ( min-width: 48em ) { .banner__fixed { top: 0; height: 65vh; } } .banner__fixed img { max-width: none !important; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .section { padding: 2.5rem 0; } @media screen and ( min-width: 48em ) { .section { padding: 3rem 0; } } .section + .section { margin-top: 2.5rem; } @media screen and ( min-width: 48em ) { .section + .section { margin-top: 4rem; } } .section__title { display: flex; align-items: center; padding-bottom: 2rem; } @media screen and ( min-width: 48em ) { .section__title { padding-bottom: 2.5rem; } } .section__title a { display: block; flex: 1; } .section__title .arrow { flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; border: 0.125rem solid var(--stroke-color); border-radius: 62.5rem; position: relative; } .section__title .arrow::before { position: absolute; top: 50%; left: 50%; transform: translate(-45%, -50%); } .section__button { justify-self: center; } .section__button:hover { --button-text-color: var(--black); } .section__button + * { margin-top: 2.5rem; } .section--picks .list--picks + * { margin-top: 1.25rem; } .section--podcasts { position: relative; z-index: 2; } .section--podcasts::after { content: ""; display: block; width: 100vw; height: 100%; background: url("../images/background/podcast.jpg") no-repeat center/cover; position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } .section--podcasts + .section { margin-top: 0; } .section--podcasts .slide__img img, .section--podcasts .slide__button { aspect-ratio: 1/1; } .section--podcasts .slide__button--next i { margin-left: 15%; } .section--podcasts .slide__button--prev i { margin-right: 15%; } @media screen and ( min-width: 48em ) { .section--podcasts .slide__button { width: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 7 * var(--grid-gap) ); } .section--podcasts .slide__button--next { left: calc( 14 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 13 * var(--grid-gap) ); transform: scale(0.8); } .section--podcasts .slide__button--prev { left: auto; right: calc( 14 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 13 * var(--grid-gap) ); margin-right: calc(var(--grid-gap)); transform: scale(0.8); } .section--podcasts .slide__button i { margin: 0 auto; } } .section--articles .list--articles > *:first-child .article { padding-top: 0; } .section--articles + .section--articles { margin-top: 0; } .section--videos .slide__img img, .section--videos .slide__button { aspect-ratio: 16/9; } @media screen and ( min-width: 48em ) { .section--videos .section__title, .section--podcasts .section__title { text-align: center; } .section--videos .section__title i, .section--podcasts .section__title i { display: none; } } @media screen and ( min-width: 90em ) { .section--videos, .section--podcasts { overflow: visible; } } .section--video { padding-bottom: 0; } .section--video .section__title { color: var(--text-color-white); } .section--video .hero { padding-top: 0; } .section--video .hero__img { aspect-ratio: 16/9; } .section--video .hero__img img { width: 100%; height: 100%; } @media screen and ( min-width: 64em ) { .section--video { grid-template-rows: auto 1fr; padding-top: 0; } .section--video .section__title { grid-row: 1/span 1; padding-top: 3rem; justify-content: center; position: relative; z-index: 3; } .section--video .hero { grid-row: 1/-1; } .section--video .hero::after { background: rgba(0, 0, 0, 0.75); } } @media screen and ( min-width: 85.375em ) { .section--video .section__title { padding-top: 5rem; } } .section--cta { margin-top: 0 !important; } .section--cta .cta__list { align-self: center; } .section--results { padding-top: 0; } .section--dark { position: relative; z-index: 2; } .section--dark::after { content: ""; display: block; width: 100vw; height: 100%; background: url("../images/background/dark-ambiance.jpg") no-repeat center/cover; background-color: var(--bg-color-darker); position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } .section--dark .hero { background: none; } .section--contrast { position: relative; z-index: 2; } .section--contrast::before { content: ""; display: block; width: 100vw; height: 100%; background: var(--bg-color-lighter); position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); z-index: -1; } .section--contrast .article__info { color: var(--text-color-light); } @media (prefers-color-scheme: dark) { .section--contrast, .section--contrast .article__info { color: var(--text-color-white); } } .article { padding: 2rem 0; align-items: flex-start; position: relative; z-index: 2; } .article::before { content: ""; display: block; width: 100vw; height: 100%; background: var(--bg-color); position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); z-index: -1; transition: var(--transition); } .article__img { overflow: hidden; order: -1; width: 100%; } .article__img--square img { aspect-ratio: 1/1; } .article__img img { aspect-ratio: 16/10; -o-object-fit: cover; object-fit: cover; transition: var(--transition); } .article__header { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto 1fr; grid-template-areas: "tag info" "info2 info2" "title title" "link link"; padding-left: var(--grid-gap); } .article__title { grid-area: title; padding-top: 0.25rem; transition: var(--transition); } .article__link { display: flex; align-items: center; grid-area: link; transition: var(--transition); } .article__link i { display: inline-block; font-size: 1.125rem; margin-left: 0.75rem; transform: translate(0, -0.1em); transition: var(--transition); } .article__link:hover i { transform: translate(0.5rem, -0.0625rem); } .article__link::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; } .article__tag { align-self: end; justify-self: start; grid-area: tag; } .article__info { font-family: "gt-flexa", sans-serif; font-size: 0.875rem; color: var(--text-color-lighter); align-self: end; justify-self: end; grid-area: info; transition: var(--transition); } .article--inverted { padding-bottom: 3.5rem; } .article--inverted .article__header { padding-left: calc(var(--grid-gap) * 0.5); padding-right: var(--grid-gap); } .article--inverted .article__img { order: 1; } .article--inverted .article__info { left: 0; } .article--inverted .article__tag { right: 0; } @media screen and ( max-width: 47.9375em ) { .article__readmore-link { width: 0; height: 0; font-size: 0; } .article__readmore-link i { display: none; } .article__img { margin-top: 0.375rem; } .article--inverted .article__tag, .article--inverted .article__info { position: absolute; bottom: 1rem; } } @media screen and ( min-width: 48em ) { .article { height: 100%; padding: 0; align-items: center; } .article::after { content: ""; display: block; width: 100%; height: 100%; border: 0.125rem solid var(--stroke-color); pointer-events: none; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); z-index: 2; } .article::before { width: 100%; } .article:hover::before { background: var(--bg-color-invert); } .article:hover .title, .article:hover .tacCurrentStatus, .article:hover .tarteaucitronH1, .article:hover .tarteaucitronH2, .article:hover .tarteaucitronTitle button, .tarteaucitronTitle .article:hover button, .article:hover .tarteaucitronH3, .article:hover .folder__button, .article:hover .folder__item a, .folder__item .article:hover a { color: var(--text-color-invert); } .article:hover .article__title, .article:hover .article__title span, .article:hover .article__info { color: var(--text-color-invert); } .article:hover .article__link, .article:hover .article__link i { color: var(--text-color-invert); } .article:hover .article__img img { transform: scale(1.05); } .article__header { padding: 1rem 2.5rem 1rem 0; } .article__title { padding: 1rem 0; } .article__link { padding: 0.25rem 0; } .article__info { grid-area: info2; justify-self: start; margin-top: 0.5rem; font-size: 1rem; } .article--inverted .article__header { padding: 1rem 0 1rem 2.5rem; } .article--inverted .article__img { aspect-ratio: 1/1; } .article--first { flex-direction: column; flex-wrap: nowrap; gap: 0; } .article--first .article__header { flex: 1 0 auto; padding: 1.5rem; } .article--first .article__link { align-self: end; } .article--first .article__img { flex: 0 0 auto; aspect-ratio: 16/10; } } @media screen and ( min-width: 64em ) { .article__img { aspect-ratio: 16/10; } .article__title { grid-row: info2/title; align-self: start; } .article__info { grid-area: info; justify-self: end; margin-top: 0; } .article--inverted .article__img { aspect-ratio: 16/10; } } @keyframes scroll-to-left { 0% { transform: translate(0, 0); } 100% { transform: translate(-33.3333333333%, 0); } } .folder { width: 100%; position: fixed; bottom: 0; left: 50%; transform: translate(-50%, 0); z-index: var(--z-index-dialog); } .folder--show { transform: translate(-50%, 0) !important; } .folder--show .folder__button span { animation: scroll-to-left 20s linear infinite 2s; } .folder__nav { width: 100%; max-height: 50vh; background: url("../images/background/dark-ambiance.jpg") no-repeat center/cover; background-color: var(--bg-color-darker); overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; position: absolute; top: 0; } .folder__nav::-webkit-scrollbar { display: none; } .folder__title { padding: 1rem var(--grid-space); color: var(--contrast-color); } .folder__item { position: relative; } .folder__item a { display: block; padding: 0.5rem 4rem 0.5rem var(--grid-space); line-height: 1.2em; position: relative; z-index: 3; transition: var(--transition); } .folder__item small { display: block; font-size: 0.75rem; color: var(--text-color-light); } .folder__item i { position: absolute; top: 50%; right: var(--grid-space); transition: var(--transition); } .folder__item i::after { content: ""; display: block; width: 2.5rem; height: 2.5rem; border: 0.0625rem solid currentColor; border-radius: 62.5rem; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); transition: var(--transition); } .folder__item:hover a { color: var(--contrast-color); } .folder__item:hover i { color: var(--text-color-white); } .folder__item:hover i::after { background: var(--contrast-color); border-color: var(--contrast-color); } .folder__item.current a, .folder__item.current i { color: var(--contrast-color); } .folder__item.current i::after { display: none; } .folder__next { display: grid; grid-template-columns: auto 1fr; width: 100%; max-width: 100%; height: 6rem; background-color: var(--bg-color-black); position: relative; z-index: 2; } .folder__next > * { grid-row: 1/-1; } .folder__button { display: flex; flex-wrap: wrap; align-content: center; grid-column: 1/-1; padding-left: 5.5rem; padding-right: 1.5rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer; position: relative; } .folder__button > * { pointer-events: none; } .folder__button::before, .folder__button::after { content: ""; display: block; width: 70%; height: 100%; position: absolute; top: 0; z-index: 2; } .folder__button::before { width: 5.5rem; background: linear-gradient(to right, var(--bg-color-black) 70%, rgba(17, 17, 17, 0)); left: 0; } .folder__button::after { background: linear-gradient(to left, var(--bg-color-black) 70%, rgba(17, 17, 17, 0)); right: 0; } .folder__button span { --folder-spacing: 3.5rem; padding-right: var(--folder-spacing); } .folder__button span::before, .folder__button span::after { content: attr(data-text); } .folder__button span::before { padding-right: var(--folder-spacing); } .folder__button span::after { padding-left: var(--folder-spacing); } .folder__button small { display: block; flex: 0 0 100%; font-size: 0.75rem; line-height: 1; color: var(--text-color-lighter); } .folder__icon { grid-column: 1/span 1; align-self: center; width: 3rem; margin-left: var(--grid-space); pointer-events: none; font-size: 2rem; text-align: center; position: relative; z-index: 2; } .folder__icon.ri-bookmark-fill { font-size: 1.5rem; } .folder__icon::after { content: ""; display: block; width: 3rem; height: 3rem; background: var(--contrast-color); border-radius: 62.5rem; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); } @media screen and ( min-width: 26.75em ) { .folder__icon { margin-left: 1.5rem; } .folder__title { padding: 1.5rem 1.5rem 1rem 1.5rem; } .folder__item a { padding: 0.5rem 4rem 0.5rem 1.5rem; } .folder__item i { right: 1.5rem; } } @media screen and ( min-width: 48em ) { .folder { width: calc( 10 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 9 * var(--grid-gap) ); max-width: calc( 10 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 9 * var(--grid-gap) ); } .folder__button::after { width: 50%; } .folder__button span { --folder-spacing: rem(80); } .folder__title { padding: 2rem 1.5rem 1rem 1.5rem; } .folder__icon { margin-left: 1.5rem; } } @media screen and ( min-width: 64em ) { .folder { width: calc( 8 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 7 * var(--grid-gap) ); max-width: calc( 8 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 7 * var(--grid-gap) ); } .folder__button::after { width: 5.5rem; } } @media screen and ( min-width: 85.375em ) { .folder { width: calc( 6 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 5 * var(--grid-gap) ); max-width: calc( 6 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 5 * var(--grid-gap) ); } } @media screen and ( min-width: 90em ) { .folder { width: calc( 6 * ( 90rem - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 5 * var(--grid-gap) ); max-width: calc( 6 * ( 90rem - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 5 * var(--grid-gap) ); } } .nav { font-family: "gt-flexa-expanded", sans-serif; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; } .nav__list { display: flex; position: relative; } .nav__list::after { content: ""; display: block; width: 100%; height: 0.0625rem; background: var(--stroke-color-light); position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); } .nav__item { --nav-contrast-color: var(--text-color); } .nav__item.inactive { padding: 1rem 0; color: #ddd; } .nav__item a { display: block; padding: 1rem 0; color: var(--text-color-light); transition: var(--transition); position: relative; } .nav__item a::after { content: ""; display: none; width: 100%; height: 0.1875rem; background: var(--nav-contrast-color); position: absolute; bottom: -0.0625rem; left: 0; z-index: 2; } .nav__item.active a, .nav__item:hover a { color: var(--nav-contrast-color); } .nav__item.active a::after { display: block; } .nav__item--green { --nav-contrast-color: var(--green); } .nav__item--red { --nav-contrast-color: var(--red); } .nav__item--blue { --nav-contrast-color: var(--blue); } @media screen and ( max-width: 47.9375em ) { .nav__list { justify-content: space-between; } .nav__list::after { width: 100vw; } } @media screen and ( min-width: 48em ) { .nav__item { margin: 0 1rem; } } .pagination { display: flex; justify-content: space-between; margin-top: 1.5rem; font-family: "gt-flexa", sans-serif; font-size: 1rem; } @media screen and ( min-width: 22.5em ) { .pagination { font-size: 1.3125rem; } } @media screen and ( min-width: 26.75em ) { .pagination { font-size: 1.5rem; } } @media screen and ( min-width: 48em ) { .pagination { margin-top: 5rem; flex: 0 0 auto; justify-self: center; margin-left: auto; margin-right: auto; } } .pagination__list { display: flex; } @media screen and ( min-width: 48em ) { .pagination__list { padding: 0 1rem; } } .pagination__item { height: 2.25rem; } .pagination__item a { display: flex; align-content: center; align-items: center; justify-content: center; min-width: 1.875rem; height: 100%; padding: 0 0.1875rem; text-align: center; } @media screen and ( min-width: 22.5em ) { .pagination__item a { min-width: 2.25rem; } } .pagination__item.active { background: var(--bg-color-darker); color: var(--text-color-invert); } @media (prefers-color-scheme: dark) { .pagination__item.active { background: var(--bg-color-white); } } .pagination__item--space { margin: 0 0.1875rem; line-height: 2.25rem; } .pagination__button { min-width: 2.25rem; text-align: center; } .pagination__button span { display: none; } .pagination__button i { line-height: 2.25rem; } .pagination__button.inactive { color: var(--text-color-lighter); cursor: default; pointer-events: none; } @media screen and ( max-width: 47.9375em ) { .list__banner { flex: 0 0 calc(100% + var(--grid-space) * 2); } } .list__banner .banner { margin: 0; } .list__banner--wallpaper-first { order: -1; padding-bottom: 0; } .list__banner--wallpaper-context::after { content: ""; display: block; width: 100vw; height: 100%; background: var(--bg-color); position: absolute; left: 50%; z-index: -1; transform: translate(-50%, -3rem); } .list--articles { justify-content: center; } @media screen and ( max-width: 47.9375em ) { .list--articles { gap: 0; } .list--articles .list__item + .list__item::before { content: ""; display: block; width: 100vw; height: 0.0625rem; background: var(--stroke-color-lighter); position: absolute; left: 50%; z-index: 3; transform: translate(-50%, 0); } } @media screen and ( min-width: 48em ) { .list--articles { --grid-gap: var( --list-gap ); } } .list--socials { display: flex; color: var(--text-color-lighter); } .list--socials .list__item + .list__item { margin-left: 1rem; } .list--socials .list__item a { display: block; width: 2.75rem; height: 2.75rem; border: 0.125rem solid var(--stroke-color-lighter); border-radius: 62.5rem; position: relative; transition: var(--transition); } .list--socials .list__item a:hover { background: var(--stroke-color-lighter); color: var(--text-color-darker); } .list--socials .list__item span { display: none; } .list--socials .list__item i { font-size: 1.3125rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slide { position: relative; } .slide__list { flex-wrap: nowrap; } .slide__article { justify-content: center; } .slide__title { padding-top: 1.5rem; text-align: center; } @media screen and ( min-width: 48em ) { .slide__title { padding-left: calc( 1.5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0.5 * var(--grid-gap) ); padding-left: calc( 1.5 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0.5 * var(--grid-gap) ); font-size: 2rem; line-height: 2.5rem; } } .slide__img { order: -1; position: relative; } .slide__img img { width: 100%; aspect-ratio: 16/10; -o-object-fit: cover; object-fit: cover; } .slide__img i { font-size: 6.25rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slide__img--square img { aspect-ratio: 1/1; } .slide__img--16-9 img { aspect-ratio: 16/9; } .slide__link { flex: 0 0 auto; } .slide__button { display: flex; align-items: center; width: 100%; aspect-ratio: 16/10; cursor: pointer; position: absolute; top: 0; left: 0; z-index: 2; transform: scale(0.8); } .slide__button i { position: relative; } .slide__button i::after { content: ""; display: block; width: 2.5rem; height: 2.5rem; border: 0.125rem solid currentColor; border-radius: 62.5rem; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media screen and ( min-width: 48em ) { .slide__button i::after { opacity: 1; } } .slide__button--next { margin-left: var(--grid-gap); transform-origin: left center; transform: translate(100%, 0) scale(0.8); } .slide__button--next i { margin-left: 5%; } @media screen and ( min-width: 48em ) { .slide__button--next i { margin-left: var(--grid-space); } } .slide__button--prev { margin-left: calc(var(--grid-gap) * -1); transform-origin: right center; transform: translate(-100%, 0) scale(0.8); } .slide__button--prev i { margin-right: 5%; margin-left: auto; } @media screen and ( min-width: 48em ) { .slide__button--prev i { margin-right: var(--grid-space); } } .cta__title { text-align: center; color: var(--text-color-lighter); } .cta__title + * { margin-top: 1.5rem; } @media screen and ( min-width: 48em ) { .cta__title + * { margin-top: 2.5rem; } } .cta__list { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 1em; } @media screen and ( min-width: 48em ) { .cta__list { gap: 2em; } } .cta__item { flex: 0 1 0%; } @keyframes marquee-right-to-left { from { transform: translate(0, 0); } to { transform: translate(-50%, 0); } } .marquee { display: flex; flex-wrap: nowrap; padding: 2rem 0; overflow: hidden; font-size: 2.5rem; font-family: "gt-flexa-expanded", sans-serif; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-color-light); } @media screen and ( min-width: 48em ) { .marquee { font-size: 3rem; padding: 3.5rem 0 2rem 0; } } @media screen and ( min-width: 64em ) { .marquee { font-size: 4.5rem; } } @media screen and ( min-width: 85.375em ) { .marquee { font-size: 6rem; } } @media screen and ( min-width: 90em ) { .marquee { font-size: 6.6666666667vw; } } .marquee__item { white-space: nowrap; } .marquee__scroller { display: flex; flex-wrap: nowrap; white-space: nowrap; animation: marquee-right-to-left 8s linear infinite; } .footer { grid-template-rows: repeat(6, auto); margin-top: 2.5rem; padding-bottom: 3.5rem; color: var(--text-color-white); position: relative; z-index: 2; } .footer::before { grid-column: 1/-1; grid-row: 1/span 5; content: ""; display: block; width: 100%; height: 100%; background: url("../images/background/dark-ambiance.jpg") no-repeat center/cover; background-color: var(--bg-color-darker); position: relative; z-index: -1; } .footer::after { grid-row: 3/span 1; grid-column: 1/-1; content: ""; display: block; width: 100%; height: 0.0625rem; margin: 2.5rem 0; background: var(--stroke-color-lighter); } .footer__menu { grid-row: 4/span 1; font-family: "gt-flexa", sans-serif; font-size: 1.125rem; font-weight: 500; } @media screen and ( min-width: 26.75em ) { .footer__menu { font-size: 1.25rem; } } .footer .menu { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(6, auto); grid-auto-flow: column; gap: 0 var(--grid-gap); } .footer .menu__item i { font-size: 1em; margin-right: 0.5rem; } .footer .menu__item a, .footer .menu__item button { display: block; padding: 0.25rem 0; } .footer__marquee { grid-row: 1/span 1; } .footer__socials { grid-row: 2/span 1; justify-self: center; } .footer__cta { grid-row: 5/span 1; justify-self: center; margin-bottom: 2.5rem; } .footer__legals { grid-row: span 1/-1; padding: 2.5rem 0; font-family: "gt-flexa", sans-serif; font-size: 0.875rem; text-align: center; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-color); } .footer__legals small { display: block; font-weight: 600; } .footer__legals a { display: block; line-height: 1.5rem; } .footer .js-button-search { cursor: pointer; } .footer .js-button-search i { pointer-events: none; } @media screen and ( min-width: 48em ) { .footer { margin-top: 4.5rem; } .footer::after { margin: 4.5rem 0; } .footer .menu { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, auto); } .footer .menu a { padding: 0.625rem 0; } .footer__legals a { display: inline-block; } .footer__legals a + * { margin-left: 1.5rem; } } @media screen and ( min-width: 64em ) { .footer { padding-bottom: 0; } .footer__legals { padding-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); padding-right: calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 1 * var(--grid-gap) ); } } @media screen and ( min-width: 80em ) { .footer .menu { grid-template-rows: repeat(5, auto); } .footer__legals { padding-left: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); padding-right: calc( 2 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 2 * var(--grid-gap) ); } } @media screen and ( min-width: 90em ) { .footer .menu { margin-bottom: 4.5rem; } .footer__cta { grid-row: 4/span 1; align-self: end; justify-self: start; margin-left: calc( 8 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 8 * var(--grid-gap) ); margin-bottom: 4.5rem; } } .wp-tiles-tile, .wp-tiles-tile-wrapper { display: inline-block; } .wp-tiles-loaded .wp-tiles-tile, .wp-tiles-loaded .wp-tiles-tile-wrapper { display: block; } .wp-tiles-tile { width: 33%; background-color: #EEE; padding: 0; overflow: hidden; } .wp-tiles-loaded .wp-tiles-tile { position: absolute; } .wp-tiles-legacy .wp-tiles-tile:hover { outline: 1px solid #ccc; } .wp-tiles-byline { max-height: 100%; width: 100%; } .wp-tiles-byline-wrapper { padding: 5px; } .wp-tiles-image-scale-down .wp-tiles-tile-bg, .wp-tiles-image-scale-up .wp-tiles-tile:hover .wp-tiles-tile-bg { transform: scale(1.2); } .wp-tiles-image-scale-down .wp-tiles-tile:hover .wp-tiles-tile-bg { transform: scale(1); } .wp-tiles-image-desaturate .wp-tiles-tile-bg, .wp-tiles-image-saturate .wp-tiles-tile:hover .wp-tiles-tile-bg { filter: none; -webkit-filter: grayscale(0%); } .wp-tiles-image-desaturate .wp-tiles-tile:hover .wp-tiles-tile-bg, .wp-tiles-image-saturate .wp-tiles-tile-bg { filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray alpha(opacity=50); -webkit-filter: grayscale(50%); -webkit-backface-visibility: hidden; } .wp-tiles-image-color-overlay .wp-tiles-tile:hover .wp-tiles-tile-bg { opacity: 0.3; } .wp-tiles-pagination-ajax { line-height: 24px; text-align: center; } .wp-tiles-pagination-ajax.loading { background: image-url("loading.gif") no-repeat 50%; text-indent: -9999px; } .wp-tiles-pagination-paging .loop-pagination, .wp-tiles-pagination-prev-next .loop-pagination { margin-top: -5px; text-align: center; } .wp-tiles-pagination-paging .page-numbers, .wp-tiles-pagination-paging .prev-next, .wp-tiles-pagination-prev-next .page-numbers, .wp-tiles-pagination-prev-next .prev-next { border-top: 5px solid transparent; display: inline-block; font-size: 14px; font-weight: 900; margin-right: 1px; padding: 7px 16px; text-transform: uppercase; } .wp-tiles-pagination-paging a, .wp-tiles-pagination-prev-next a { color: #2b2b2b; } .wp-tiles-pagination-paging .page-numbers.current, .wp-tiles-pagination-prev-next .page-numbers.current { border-top: 5px solid #24890d; } .wp-tiles-pagination-paging a:hover, .wp-tiles-pagination-prev-next a:hover { border-top: 5px solid #41a62a; color: #2b2b2b; } .wp-tiles-loaded .wp-tiles-tile-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: 50% 50%; } .wp-tiles-tile-with-image .wp-tiles-byline { color: #eee; background: rgba(0, 0, 0, 0.8); max-height: 100%; } .wp-tiles-loaded .wp-tiles-tile-with-image .wp-tiles-byline { position: absolute; left: 0; right: 0; } .wp-tiles-byline-align-top .wp-tiles-tile-with-image .wp-tiles-byline { top: 0; } .wp-tiles-byline-align-bottom .wp-tiles-tile-with-image .wp-tiles-byline { bottom: 0; } .wp-tiles-tile-with-image .wp-tiles-byline-title { margin: 0; overflow: hidden; padding: 5px; padding-top: 2px; } .wp-tiles-tile-with-image .wp-tiles-byline-content { padding: 5px; font-size: 0.9em; font-weight: normal; overflow: hidden; } @media screen and ( max-width: 47.9375em ) { body.home .banner--first + .section { padding-top: 0; } } body.home--banner { background: transparent; } body.home--banner .main-wrapper { overflow: hidden; background: transparent; position: relative; z-index: 2; } @media screen and ( max-width: 47.9375em ) { body.home--banner .banner--first { height: 75vh; padding-top: 0; } } @media screen and ( min-width: 48em ) { body.home--banner .main-content { padding-top: 25vmin; } body.home--banner .hero { display: none; } } body.single .articles-wrapper { grid-column: 1/-1; } body.single .sheet__header { transition: var(--transition); } body.single .sheet__header { align-items: flex-start; grid-template-rows: minmax(5rem, 1fr) repeat(4, auto); width: 100%; min-height: 45vh; } body.single .sheet__header .sheet__subtitle { display: none; } @media screen and ( max-width: 64em ) { body.single .sheet__header.fixed { padding-top: 1.875rem; padding-bottom: 0; background-color: #121212; } body.single .sheet__header.fixed .sheet__tags { display: none; } body.single .sheet__header.fixed .sheet__title { padding-top: 1.875rem; font-size: 1rem; line-height: 1.2; margin-bottom: 0; } body.single .sheet__header.fixed .sheet__img { display: none; } body.single .sheet__header.fixed .sheet__info { padding-bottom: 0; } body.single .sheet__header.fixed .sheet__subtitle { font-size: 0.875rem; background-color: var(--text-color-light); width: 100%; grid-column: -2/2; text-align: left; padding: 5px 10px; } } body.single:has(.sheet__wrapper) { overflow-x: visible; } body.single:has(.sheet__wrapper) .sheet__wrapper { grid-column: 1/-1; overflow-x: hidden; } body.single--video .sheet__header { padding-bottom: 2.5rem; } @media screen and ( min-width: 48em ) { body.single--video .sheet__header { padding-bottom: 4.5rem; } } body.single--video .sheet__header::after { content: ""; display: block; width: 100vw; height: 100%; background: url("../images/background/dark-ambiance.jpg") no-repeat center/cover; background-color: var(--bg-color-darker); opacity: 1; mix-blend-mode: normal; position: absolute; top: 0; left: 50%; z-index: -1; transform: translate(-50%, 0); } body.single-legacy { --v-spacing: 2em; --block-v-space: rem(40); } @media screen and ( min-width: 48em ) { body.single-legacy { --block-v-space: rem(80); } } body.single-legacy .sheet__content a { font-weight: 600; -webkit-text-decoration: underline var(--contrast-color); text-decoration: underline var(--contrast-color); transition: var(--transition); } body.single-legacy .sheet__content a:hover { background: var(--contrast-color); color: var(--text-color-white); } body.single-legacy .sheet__content p:empty, body.single-legacy .sheet__content strong:empty { display: none; } body.single-legacy .sheet__content > ul, body.single-legacy .sheet__content > ol { counter-reset: list; } body.single-legacy .sheet__content > ul li, body.single-legacy .sheet__content > ol li { padding-left: 1em; position: relative; } body.single-legacy .sheet__content > ul li::before, body.single-legacy .sheet__content > ol li::before { content: "•"; position: absolute; left: 0; } body.single-legacy .sheet__content > ul li + li, body.single-legacy .sheet__content > ol li + li { margin-top: 0.25rem; } body.single-legacy .sheet__content > * + ul, body.single-legacy .sheet__content > * + ol, body.single-legacy .sheet__content > ul + *, body.single-legacy .sheet__content > ol + * { margin-top: var(--v-spacing); } body.single-legacy .sheet__content > ul li::before { content: "•"; } body.single-legacy .sheet__content > ol li::before { counter-increment: list; content: counter(list) "."; } body.single-legacy .sheet__content blockquote { margin: var(--block-v-space) 0 !important; } body.single-legacy .sheet__content blockquote em { font-style: normal; } body.single-legacy .sheet__content blockquote::before, body.single-legacy .sheet__content blockquote::after { display: none; } body.single-legacy .sheet__content > h1, body.single-legacy .sheet__content > h2, body.single-legacy .sheet__content > h3, body.single-legacy .sheet__content > h4, body.single-legacy .sheet__content > h5, body.single-legacy .sheet__content > h6 { font-family: "gt-flexa-expanded", sans-serif; font-weight: 500; color: var(--title-color); } body.single-legacy .sheet__content > h1 + *, body.single-legacy .sheet__content > h2 + *, body.single-legacy .sheet__content > h3 + *, body.single-legacy .sheet__content > h4 + *, body.single-legacy .sheet__content > h5 + *, body.single-legacy .sheet__content > h6 + * { margin-top: var(--v-spacing); } body.single-legacy .sheet__content > * + h1, body.single-legacy .sheet__content > * + h2, body.single-legacy .sheet__content > * + h3, body.single-legacy .sheet__content > * + h4, body.single-legacy .sheet__content > * + h5, body.single-legacy .sheet__content > * + h6 { margin-top: var(--block-v-space); } body.single-legacy .sheet__content h4, body.single-legacy .sheet__content h4, body.single-legacy .sheet__content h5, body.single-legacy .sheet__content h6 { color: var(--text-color-light); } body.single-legacy .sheet__content h1 { font-weight: 2.5rem; line-height: 3rem; } body.single-legacy .sheet__content h2 { font-size: 2rem; list-style: 2.5rem; } body.single-legacy .sheet__content h3 { font-size: 1.5rem; line-height: 2rem; } body.single-legacy .sheet__content h4, body.single-legacy .sheet__content h5, body.single-legacy .sheet__content h6 { font-size: 1rem; line-height: 1.5rem; } body.single-legacy .sheet__content .gallery { margin: var(--v-spacing) 0 !important; flex-wrap: wrap; } body.single-legacy .sheet__content .gallery-item { width: auto !important; min-width: auto !important; flex: 0 0 100%; margin-top: 0 !important; } @media screen and ( min-width: 48em ) { body.single-legacy .sheet__content .gallery-item { flex: 1 1 0 !important; } } body.single-legacy .sheet__content .gallery img { transform: none !important; } body.single-legacy .sheet__content .gallery br { display: none; } body.single-legacy .sheet__content .wp-tiles-container { height: auto !important; } body.single-legacy .sheet__content .wp-tiles-grid { display: flex; flex-wrap: wrap; gap: var(--grid-gap); } body.single-legacy .sheet__content .wp-tiles-tile { flex: 0 0 100%; position: static !important; width: auto !important; height: auto !important; } @media screen and ( min-width: 64em ) { body.single-legacy .sheet__content .wp-tiles-tile { flex: 1; } } body.single-legacy .sheet__content .wp-tiles-tile-bg { background-size: cover; position: static !important; aspect-ratio: 16/10; } body.single-legacy .sheet__content iframe { width: 100%; height: auto; aspect-ratio: 16/9; } body.single-legacy .sheet__content img { max-width: none; height: auto; border: 0 !important; aspect-ratio: 16/10; -o-object-fit: cover; object-fit: cover; } body.single-legacy .sheet__content > p + * { margin-top: var(--v-spacing); } body.single-legacy .sheet__content p img { width: calc(100% + var(--grid-space) * 2); margin: var(--v-spacing) 0; } @media screen and ( min-width: 48em ) { body.single-legacy .sheet__content p img { width: calc( 12 * ( 100% - ( var(--grid-gap) * ( 7 ) ) ) / 8 + 11 * var(--grid-gap) ); } } body.single-legacy .sheet__content p iframe { margin: var(--v-spacing) 0 !important; } body.category-page .banner--first { margin-bottom: 0; } body.category-page .section__title { display: flex; } body.category-page .section__title .cta__icon { flex: 0 0 0.5rem; margin-left: auto; cursor: default; } body.category-page .section__title + .banner { padding-bottom: 0; } @media screen and ( max-width: 47.9375em ) { body.category-page .section__title { padding-bottom: 0; margin-top: 2.5rem; } } @media screen and ( min-width: 48em ) { body.category-page .section__title { min-height: var(--header-quick-offset); padding: 1.5em 0; margin-top: 0 !important; } body.category-page .section__title + .banner { padding-top: 0; } } @media screen and ( min-width: 48em ) { body.category-page .hero { order: -1; } body.category-page .section__title { margin-top: 5rem; } body.category-page .hero + .banner { padding-top: 0; } } body.Post-type-archive-video .banner--first { margin-bottom: 0; } body.search-page .search__title { padding: 1.5rem 0; color: var(--text-color-lighter); } body.search-page .search__title mark { color: var(--text-color); } body.search-page .search__form { padding-top: 1.5rem; order: -1; } @media screen and ( min-width: 48em ) { body.search-page .search__form { padding-top: 4.5rem; } } @media screen and ( min-width: 48em ) { body.search-page .search__form, body.search-page .search__title, body.search-page .section--results { grid-column: 3/span 10; } body.search-page .section--results .list { gap: 0; } body.search-page .section--results .list__item { position: relative; } body.search-page .section--results .list__item::after { content: ""; display: block; width: 100%; height: 0.125rem; opacity: 0; position: absolute; left: 50%; top: 0; transform: translate(-50%, -100%); background: var(--stroke-color); transition: var(--transition); } body.search-page .section--results .list__item:hover::after { opacity: 0; } body.search-page .section--results .list__item + *::after { opacity: 1; } body.search-page .section--results .list__item .article { padding: var(--grid-gap); margin: 0 calc(var(--grid-gap) * -1); align-items: flex-start; gap: 0; } body.search-page .section--results .list__item .article::after { display: none; } body.search-page .section--results .list__item .article__img { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 9 ) ) ) / 10 + 4 * var(--grid-gap) ); min-width: calc( 4 * ( 100% - ( var(--grid-gap) * ( 9 ) ) ) / 10 + 4 * var(--grid-gap) ); } body.search-page .section--results .list__item .article__header { flex: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 9 ) ) ) / 10 + 5 * var(--grid-gap) ); min-width: 0 0 calc( 5 * ( 100% - ( var(--grid-gap) * ( 9 ) ) ) / 10 + 5 * var(--grid-gap) ); padding: 0; margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 9 ) ) ) / 10 + 0 * var(--grid-gap) ); } body.search-page .section--results .list__item .article__title { font-size: 1.5rem; line-height: 2rem; } } @media screen and ( min-width: 80em ) { body.search-page .search__form, body.search-page .search__title, body.search-page .section--results { grid-column: 4/span 8; } body.search-page .section--results .list__item .article__img { flex: 0 0 calc( 3 * ( 100% - ( var(--grid-gap) * ( 7 ) ) ) / 8 + 3 * var(--grid-gap) ); min-width: calc( 3 * ( 100% - ( var(--grid-gap) * ( 7 ) ) ) / 8 + 3 * var(--grid-gap) ); } body.search-page .section--results .list__item .article__header { flex: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 7 ) ) ) / 8 + 4 * var(--grid-gap) ); min-width: 0 0 calc( 4 * ( 100% - ( var(--grid-gap) * ( 7 ) ) ) / 8 + 4 * var(--grid-gap) ); margin-left: calc( 1 * ( 100% - ( var(--grid-gap) * ( 7 ) ) ) / 8 + 0 * var(--grid-gap) ); } } .header__logo span, .header__logo::after { transition: var(--transition); } @media screen and ( max-width: 63.9375em ) { body:not(.scrolled) .header__logo::after { transform: translate(0, 0); } body:not(.scrolled) .header__logo span { transform: translate(0, -100%); } } @media screen and ( max-width: 63.9375em ) { body.scrolled .header__logo::after { transform: translate(0, -100%); } body.scrolled .header__logo span { transform: translate(0, 0); } } @keyframes header-open-before { 0% { transform: translate(-100%, 0) translate(var(--header-quick-width), 0) scale(var(--header-scale)); animation-timing-function: cubic-bezier(0.75, 0, 0.5, 1); } 40% { transform: translate(-100%, 0) translate(var(--header-quick-width), 0) scale(1, 1); animation-timing-function: cubic-bezier(0.2, 0, 0, 1); } 100% { transform: translate(0, 0) translate(0, 0) scale(1, 1); } } @keyframes header-open-after { 0% { opacity: 0.1; transform: translate(-100%, 0) translate(var(--header-quick-width), 0) scale(var(--header-scale)); animation-timing-function: cubic-bezier(0.75, 0, 0.5, 1); } 40% { opacity: 1; transform: translate(-100%, 0) translate(var(--header-quick-width), 0) scale(1, 1); animation-timing-function: cubic-bezier(0.2, 0, 0, 1); } 100% { transform: translate(0, 0) translate(0, 0) scale(1, 1); } } .header__button, .header__logo, .header__search, .header__wrapper { transition: var(--transition); } .header__button span::before, .header__button span::after, .header__button i, .header__button i::before, .header__button i::after { transition: var(--transition); } .header::before, .header::after { transition: var(--transition); } @media screen and ( min-width: 64em ) { .header::before, .header::after { transform-origin: right center; } } @media screen and ( min-width: 64em ) { .header::before { transform: translate(-100%, 0) translate(var(--header-quick-width), 0) scale(var(--header-scale)); } } @media screen and ( max-width: 63.9375em ) { body:not(.header-open) .header::before, body:not(.header-open) .header::after { transform: translate(100%, 0); } } @media screen and ( min-width: 64em ) { body:not(.header-open) .header::before { transform: translate(-100%, 0) translate(var(--header-quick-width), 0) scale(var(--header-scale)); } } @media screen and ( min-width: 64em ) { body:not(.header-open) .header::after { opacity: 0.1; transform: translate(-100%, 0) translate(var(--header-quick-width), 0) scale(var(--header-scale)); } } body:not(.header-open) .header__wrapper { pointer-events: none; opacity: 0; } @media screen and ( min-width: 64em ) { body:not(.header-open) .header__wrapper { transform: translate(-3rem, 0); transition-duration: 0.16s; } } body.header-open .main-wrapper::after { opacity: 1; pointer-events: auto; } body.header-open .header__wrapper { opacity: 1; transition-delay: 0.16s; } @media screen and ( min-width: 64em ) { body.header-open .header__wrapper { transition-delay: 0.42s; transform: translate(0, 0); } } @media screen and ( min-width: 64em ) { body.header-open .header__logo, body.header-open .header__search { opacity: 0; pointer-events: none; } } body.header-open .menu__item.active path { transition-delay: 0.32s; stroke-dashoffset: 0 !important; } @media screen and ( min-width: 64em ) { body.header-open .menu__item.active path { transition-delay: 0.72s; } } @media screen and ( max-width: 63.9375em ) { body.header-open .header::before, body.header-open .header::after { transform: translate(0, 0); } } @media screen and ( min-width: 64em ) { body.header-open .header::before { animation: header-open-before 0.72s var(--transition-easing); transform: translate(0, 0) translate(0, 0) scale(1, 1); transition: none; } } @media screen and ( min-width: 64em ) { body.header-open .header::after { animation: header-open-after 0.72s var(--transition-easing); opacity: 1; transform: translate(0, 0) translate(0, 0) scale(1, 1); transition: none; } } @media screen and ( min-width: 64em ) { body.header-open .header__button { transform: translate(2.75rem, 0) rotate(-90deg) translate(-50%, 0); } } body.header-open .header__button span::before { opacity: 1; transform: translate(0, 0); } body.header-open .header__button span::after { opacity: 0; transform: translate(0, 200%); } body.header-open .header__button i { background: transparent; transform: rotate(180deg); } body.header-open .header__button i::before { transform: translate(0, 0) rotate(-45deg); } body.header-open .header__button i::after { transform: translate(0, 0) rotate(45deg); } .js-article { --reading-indicator: 0; } .js-article.current-article.scrolled { --reading-indicator: 1; } .js-article.current-article.scrolled::before { content: ""; width: 100%; height: 0.25rem; background: var(--contrast-color); position: fixed; top: 3.125rem; left: 0; z-index: var(--z-index-reading-indicator); transform-origin: left center; transform: translate(0, -100%) scale(var(--reading-indicator), 1); } @media screen and ( min-width: 64em ) { .js-article.current-article.scrolled::before { height: 0.375rem; top: 0; transform: scale(var(--reading-indicator), 1); } } .slide__img, .slide__title, .slide__link, .slide__item, .slide__button { transition: all 0.64s var(--transition-easing--in-out); } .js-slide { --slide-index: 0; } .js-slide .slide__list { display: grid; grid-template-rows: 1fr; } .js-slide .slide__item { --slide-position: 0; grid-column: 1/-1; grid-row: 1/-1; transform: translate(calc( var(--slide-position) * 100% + var(--slide-index) * -100% + var(--grid-gap) * ( var(--slide-position) - var(--slide-index) ) ), 0); will-change: transform; } .js-slide .slide__item .slide__img { transform: translate(-10%, 0) scale(0.8); } .js-slide .slide__item:not(.active) { opacity: 0; } .js-slide .slide__item:not(.active) .slide__title, .js-slide .slide__item:not(.active) .slide__link { opacity: 0; } .js-slide .slide__item.before-active, .js-slide .slide__item.after-active { opacity: 0.6; } .js-slide .slide__item.before-active .slide__img { transform: translate(10%, 0) scale(0.8); } .js-slide .slide__item.active .slide__img { transform: translate(0, 0) scale(1); } .js-slide.first .slide__button--prev, .js-slide.last .slide__button--next { opacity: 0; pointer-events: none; } .slideshow__slides, body.single-legacy .sheet__content .gallery, .slideshow__slide, body.single-legacy .sheet__content .gallery-item, .slideshow__slide img, body.single-legacy .sheet__content .gallery-item img, .slideshow__slide figcaption, body.single-legacy .sheet__content .gallery-item figcaption, .slideshow__bullet { transition: all 0.64s var(--transition-easing--in-out); } .slideshow__slide img, body.single-legacy .sheet__content .gallery-item img { transform-origin: center; } @media screen and ( max-width: 47.9375em ) { .slideshow__slide img, body.single-legacy .sheet__content .gallery-item img { transform: translate(10%, 0) scale(0.8); } .slideshow__slide figcaption, body.single-legacy .sheet__content .gallery-item figcaption { opacity: 0; } .slideshow__slide.active img, body.single-legacy .sheet__content .active.gallery-item img { transform: translate(0, 0) scale(1); } .slideshow__slide.active figcaption, body.single-legacy .sheet__content .active.gallery-item figcaption { opacity: 1; } .slideshow__slide.after-active img, body.single-legacy .sheet__content .after-active.gallery-item img { transform: translate(-10%, 0) scale(0.8); } } .js-slideshow:not(.js-slideshow--v) { --slide-index: 0; --slider-position: -1; } @media screen and ( max-width: 47.9375em ) { .js-slideshow:not(.js-slideshow--v) .slideshow__slide, .js-slideshow:not(.js-slideshow--v) body.single-legacy .sheet__content .gallery-item, body.single-legacy .sheet__content .js-slideshow:not(.js-slideshow--v) .gallery-item { transform: translate(calc( -100% * var(--slide-index) - var(--grid-gap) * var(--slide-index) + var(--grid-space) * var(--slider-position) ), 0); } } .js-slideshow--v { --slide-index: 0; --slider-position: -1; } @media screen and ( max-width: 47.9375em ) { .js-slideshow--v .slideshow__slides, .js-slideshow--v body.single-legacy .sheet__content .gallery, body.single-legacy .sheet__content .js-slideshow--v .gallery { transform: translate(calc( ( -100% + calc( 6 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 5 * var(--grid-gap) ) ) * var(--slide-index) + var(--grid-space) * var(--slider-position)), 0); } } .dialog--cookies, .dialog--search, .dialog--newsletter { transition: var(--transition); } body:not(.search-open) .dialog--search { transform: translate(-100%, 0); } body.search-open .main-wrapper::after { opacity: 1; pointer-events: auto; } body.search-open .dialog--search { transform: translate(0, 0); } body:not(.cookies-close) .dialog--cookies { transform: translate(-50%, -1.5rem); } @media screen and ( min-width: 64em ) { body:not(.cookies-close) .dialog--cookies { transform: translate(-50%, -3rem); } } body.cookies-close .dialog--cookies { transform: translate(-50%, 100%); } @media screen and ( max-width: 47.9375em ) { body:not(.newsletter-open) .dialog--newsletter { transform: translate(0, 100%); } } @media screen and ( min-width: 48em ) { body:not(.newsletter-open) .dialog--newsletter { opacity: 0; pointer-events: none; } } body.newsletter-open .main-wrapper::after { opacity: 1; pointer-events: auto; } body.newsletter-open .dialog--newsletter { transform: translate(0, 0); } @media screen and ( min-width: 48em ) { body.newsletter-open .dialog--newsletter { opacity: 1; transform: translate(-50%, -50%); } } .folder, .folder__nav { transition: var(--transition); } body:not(.folder-open) .folder__nav { transform: translate(0, 0); } body.folder-open .folder__nav { transform: translate(0, -100%); } body:not(.folder-show) .folder { transform: translate(-50%, 100%); } body.folder-show .folder { transform: translate(-50%, 0); } body.folder-show .folder__button span { animation: scroll-to-left 20s linear infinite 2s; } @media (hover: hover) { .folder:hover .folder__nav { transform: translate(0, -100%); } } .row--rte img { height: auto !important; margin-bottom: 2rem; } .sheet__video .js-video, .sheet__content .js-video { aspect-ratio: 16/9; } .sheet__video .js-video .tac_activate, .sheet__video .js-video .tac_activate .tac_float, .sheet__content .js-video .tac_activate, .sheet__content .js-video .tac_activate .tac_float { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 20px; color: #fff; } .sheet__video .js-video .tac_activate .tarteaucitronAllow, .sheet__video .js-video .tac_activate .tac_float .tarteaucitronAllow, .sheet__content .js-video .tac_activate .tarteaucitronAllow, .sheet__content .js-video .tac_activate .tac_float .tarteaucitronAllow { color: #fff; border-color: #fff; } .sheet__video .js-video iframe, .sheet__content .js-video iframe { border: none; width: 100%; height: 100%; } body.tarteaucitron-modal-open #tarteaucitron { opacity: 1; pointer-events: auto; } body.tarteaucitron-modal-open #tarteaucitronAlertBig { opacity: 0 !important; pointer-events: none; } body:not(.tarteaucitron-modal-open) #tarteaucitron { opacity: 0; pointer-events: none; } #tarteaucitronManager { padding: 0 1.5rem; line-height: 1.5rem; font-size: inherit; cursor: pointer; } #tarteaucitronManager img { display: none; } #tarteaucitronManager:before { content: "Cookies"; } #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]) { --button-stroke-color: var(--black); margin-top: 0; } #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]):hover, #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]).tarteaucitronIsSelected, #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link])[aria-pressed=true] { --button-bg-color: var(--black); --button-stroke-color: var(--black); --button-text-color: var(--white); } @media screen and ( max-width: 26.6875em ) { #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]) { flex: 0 0 100%; font-size: 0.625rem; padding: 0.75rem 1.5rem; } } #tarteaucitronRoot button#tarteaucitronCloseAlert { margin-top: 0; --button-text-color: var(--white); --button-stroke-color: var(--white); --button-bg-color: var(--black); } #tarteaucitronRoot button#tarteaucitronCloseAlert:hover { --button-bg-color: var(--white); --button-stroke-color: var(--white); --button-text-color: var(--black); } #tarteaucitronRoot button[role=link] { margin-bottom: 1em; font-weight: 600; -webkit-text-decoration: underline var(--text-color-darker); text-decoration: underline var(--text-color-darker); transition: var(--transition); } #tarteaucitronRoot button[role=link]:hover { background: var(--text-color-darker); color: var(--text-color-white); } #tarteaucitronRoot #tarteaucitronBack { content: ""; display: block; width: 100%; height: 100%; background: rgba(17, 17, 17, 0.2); opacity: 0; pointer-events: none; position: fixed; top: 0; left: -999vh; z-index: -1; transition: var(--transition); opacity: 0; z-index: var(--z-index-curtain); } #tarteaucitronRoot #tarteaucitronBack[style*="display: block"] { left: 0; } .tarteaucitronAsk { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.75rem 0; } #tarteaucitronAlertBig { display: flex !important; flex-wrap: wrap; align-items: center; width: calc( 12 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 11 * var(--grid-gap) ); padding: 1.5rem; background: var(--bg-color-black); border-radius: 1.5rem; pointer-events: none; font-size: 0.75rem; font-family: "gt-flexa", sans-serif; color: var(--text-color-lighter); position: fixed; bottom: 0; left: -999vh !important; z-index: var(--z-index-cookies); transform: translate(-50%, -6rem); } #tarteaucitronAlertBig[style*="display: block"] { z-index: 999; pointer-events: auto; left: 50% !important; } #tarteaucitronAlertBig #tarteaucitronPrivacyUrl { display: none; } #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert { flex: 0 0 100%; max-width: 37.5rem; font-size: 0.75rem; font-family: "gt-flexa", sans-serif; color: var(--text-color-lighter); } #tarteaucitronAlertBig .tarteaucitronAllow:hover { --button-stroke-color: var(--white) !important; } #tarteaucitronAlertBig .tarteaucitronAlertBigBtnWrapper { display: flex; flex: 0 0 100%; gap: 0.75rem; margin-top: 1.5rem; } @media screen and ( max-width: 47.9375em ) { #tarteaucitronAlertBig .tarteaucitronAlertBigBtnWrapper { flex-wrap: wrap; } #tarteaucitronAlertBig .button, #tarteaucitronAlertBig .sheet__video .js-video .tac_activate .tarteaucitronAllow, .sheet__video .js-video .tac_activate #tarteaucitronAlertBig .tarteaucitronAllow, #tarteaucitronAlertBig .sheet__content .js-video .tac_activate .tarteaucitronAllow, .sheet__content .js-video .tac_activate #tarteaucitronAlertBig .tarteaucitronAllow, #tarteaucitronAlertBig #tarteaucitronRoot button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), #tarteaucitronRoot #tarteaucitronAlertBig button:not(#tarteaucitronClosePanel, #tarteaucitronCloseAlert, #tarteaucitronBack, .catToggleBtn, [role=link]), #tarteaucitronAlertBig #tarteaucitronRoot button#tarteaucitronCloseAlert, #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert { flex: 1 0 auto; font-size: 0.6875rem; padding: 0.75rem 1rem; } } @media screen and ( min-width: 48em ) { #tarteaucitronAlertBig { flex-wrap: nowrap; border-radius: 0.5rem; } #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert { flex: 1 1 0; padding-right: 1.5rem; } #tarteaucitronAlertBig .tarteaucitronAlertBigBtnWrapper { flex: 0 0 auto; flex-wrap: nowrap; margin-top: 0; margin-left: auto; } } @media screen and ( min-width: 64em ) { #tarteaucitronAlertBig { width: calc( 10 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 9 * var(--grid-gap) ); transform: translate(-50%, -3rem); } } @media screen and ( min-width: 90em ) { #tarteaucitronAlertBig { max-width: calc(90rem - var(--grid-space) * 2); } } #tarteaucitron { background: var(--bg-color-white); border-radius: 1.5rem 1.5rem 0 0; font-family: "gt-flexa", sans-serif; font-size: 0.875rem; color: var(--text-color-darker); position: fixed; top: auto !important; bottom: 0; left: 0; z-index: var(--z-index-cookies); } #tarteaucitron::before, #tarteaucitron::after { content: ""; display: block; width: 100%; height: 2.5rem; background: linear-gradient(to top, #fbfbfb 0%, rgba(251, 251, 251, 0.944) 16.6%, rgba(251, 251, 251, 0.876) 30.8%, rgba(251, 251, 251, 0.8) 42.8%, rgba(251, 251, 251, 0.717) 53%, rgba(251, 251, 251, 0.63) 61.5%, rgba(251, 251, 251, 0.54) 68.5%, rgba(251, 251, 251, 0.45) 74.2%, rgba(251, 251, 251, 0.363) 78.8%, rgba(251, 251, 251, 0.28) 82.7%, rgba(251, 251, 251, 0.204) 85.9%, rgba(251, 251, 251, 0.136) 88.6%, rgba(251, 251, 251, 0.08) 91.2%, rgba(251, 251, 251, 0.037) 93.8%, rgba(251, 251, 251, 0.01) 96.7%, rgba(251, 251, 251, 0) 100%); pointer-events: none; position: absolute; left: 0; z-index: 2; } #tarteaucitron::before { border-radius: inherit; background: linear-gradient(to bottom, #fbfbfb 0%, rgba(251, 251, 251, 0.944) 16.6%, rgba(251, 251, 251, 0.876) 30.8%, rgba(251, 251, 251, 0.8) 42.8%, rgba(251, 251, 251, 0.717) 53%, rgba(251, 251, 251, 0.63) 61.5%, rgba(251, 251, 251, 0.54) 68.5%, rgba(251, 251, 251, 0.45) 74.2%, rgba(251, 251, 251, 0.363) 78.8%, rgba(251, 251, 251, 0.28) 82.7%, rgba(251, 251, 251, 0.204) 85.9%, rgba(251, 251, 251, 0.136) 88.6%, rgba(251, 251, 251, 0.08) 91.2%, rgba(251, 251, 251, 0.037) 93.8%, rgba(251, 251, 251, 0.01) 96.7%, rgba(251, 251, 251, 0) 100%); top: 0; } #tarteaucitron::after { bottom: 0; } @media screen and ( min-width: 48em ) { #tarteaucitron { width: calc( 10 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 9 * var(--grid-gap) ); max-height: calc(100% - 3rem); bottom: auto; border-radius: 0.5rem; top: 50% !important; left: 50%; transform: translate(-50%, -50%); } #tarteaucitron::before, #tarteaucitron::after { border-radius: inherit; height: 4rem; } #tarteaucitron .tarteaucitronLine > *, #tarteaucitron .tarteaucitronTitle, #tarteaucitron .tarteaucitronDetails { padding-right: 4rem; padding-left: 4rem; } } @media screen and ( min-width: 64em ) { #tarteaucitron { width: calc( 8 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 7 * var(--grid-gap) ); } } @media screen and ( min-width: 96em ) { #tarteaucitron { width: calc( 6 * ( 100% - ( var(--grid-margin) + var(--grid-gap) ) * 2 - ( var(--grid-gap) * ( 12 - 1 ) ) ) / 12 + 5 * var(--grid-gap) ); } } @media screen and ( min-width: 90em ) { #tarteaucitron { max-width: calc(90rem - var(--grid-space) * 2); } } #tarteaucitronServices { max-height: 75vh; padding: 2rem calc( 1 * ( 100% - ( var(--grid-gap) * ( 11 ) ) ) / 12 + 0 * var(--grid-gap) ); position: relative; overflow-y: scroll; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; scrollbar-width: none; } #tarteaucitronServices::-webkit-scrollbar { display: none; } #tarteaucitronServices .tarteaucitronHidden { display: none; } @media screen and ( min-width: 48em ) { #tarteaucitronServices { padding: 4rem 0; } } #tarteaucitronMainLineOffset .tarteaucitronName { display: none; } .tarteaucitronBorder { padding-top: 2em; margin-top: 2em; position: relative; } .tarteaucitronBorder::before { content: ""; display: block; width: 100vw; height: 0.0625rem; background: var(--stroke-color-lighter); position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); } .tarteaucitronBorder ul li ul li { margin-top: 1rem; } .tarteaucitronH1, .tarteaucitronH2, .tarteaucitronTitle button, .tarteaucitronH3 { color: var(--text-color-darker); margin-bottom: 0.5em; } .tarteaucitronH1 { display: block; font-size: 2rem; line-height: 2.5rem; color: inherit; } .tarteaucitronH2, .tarteaucitronTitle button { display: block; font-size: 1.5rem; line-height: 2rem; } .tarteaucitronH3, .tacCurrentStatus { font-size: 1.125rem; line-height: 1.5rem; } .tacCurrentStatus::before { content: "("; } .tacCurrentStatus::after { content: ")"; } #tarteaucitronClosePanel { width: 4rem; height: 4rem; cursor: pointer; text-indent: -62.4375rem; position: absolute; top: 0; right: 0; z-index: 2; } #tarteaucitronClosePanel::before, #tarteaucitronClosePanel::after { content: ""; display: block; width: 1.5rem; height: 0.125rem; background: currentColor; border-radius: 0.0625rem; position: absolute; top: 50%; left: 50%; transition: var(--transition); transform: translate(-50%, -50%) rotate(-45deg); } #tarteaucitronClosePanel::after { transform: translate(-50%, -50%) rotate(45deg); } #tarteaucitronClosePanel:hover::before { transform: translate(-50%, -50%) rotate(45deg); } #tarteaucitronClosePanel:hover::after { transform: translate(-50%, -50%) rotate(135deg); } .tac_visually-hidden { display: none; } .sticky { position: relative; z-index: 0; transform: translate3d(0, 0, 0); } .sticky.is-stuck { position: fixed; z-index: 5; width: 100%; } .sticky.is-stuck.is-at-top { top: 0; } .sticky.is-stuck.is-at-bottom { bottom: 0; } .sticky.is-anchored { position: relative; right: auto; left: auto; } .sticky.is-anchored.is-at-bottom { bottom: 0; } table { border-collapse: collapse; } table.table { width: 100%; } table.table thead th { font-family: "Apercu", Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.1em; color: #1a1a1a; border-bottom: 1px solid #d9d9d9; } table.table th { padding: 0.5rem 1rem; } table.table td { padding: 1rem; } table.table tr td { transition: background 0.2s ease-in-out; } table.table tr:hover td { background: rgba(255, 255, 255, 0.8); } table.table-striped tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.5); } table.table-bordered td, table.table-bordered th { border: 1px solid #d9d9d9; } .editor-front .reviews:before, .editor-front .reviews:after, .rte .reviews:before, .rte .reviews:after, .sheet_content .reviews:before, .sheet_content .reviews:after { content: " "; display: table; } .editor-front .reviews:after, .rte .reviews:after, .sheet_content .reviews:after { display: block; clear: both; height: 1px; margin-top: -1px; visibility: hidden; } .editor-front .reviews, .rte .reviews, .sheet_content .reviews { *zoom: 1; } .editor-front .review-summary, .rte .review-summary, .sheet_content .review-summary { clear: both; } .editor-front .review-summary h2, .rte .review-summary h2, .sheet_content .review-summary h2 { margin-bottom: 0; } .editor-front .review-summary ul, .editor-front .review-summary ol, .rte .review-summary ul, .rte .review-summary ol, .sheet_content .review-summary ul, .sheet_content .review-summary ol { margin: 0; } .editor-front .review-summary ul li, .editor-front .review-summary ol li, .rte .review-summary ul li, .rte .review-summary ol li, .sheet_content .review-summary ul li, .sheet_content .review-summary ol li { list-style: none; } .editor-front .review-summary a, .rte .review-summary a, .sheet_content .review-summary a { text-decoration: none; } .editor-front.post-single-text-wrap .review-summary img, .rte.post-single-text-wrap .review-summary img, .sheet_content.post-single-text-wrap .review-summary img { margin: 0 !important; } @media print, screen and (min-width: 40em) and (max-width: 47.99875em) { body.single-news.news-template-layout-fullwidth .editor-front .reviews, body:not(.post-template-layout-two-columns) .editor-front .reviews { margin-left: calc(-10.4166666667% ) !important; width: calc(120.8333333333% ); max-width: inherit; } } @media print, screen and (min-width: 48em) { body.single-news.news-template-layout-fullwidth .editor-front .reviews, body:not(.post-template-layout-two-columns) .editor-front .reviews { margin-left: calc(-17.4418604651% ) !important; width: calc(134.8837209302% ); max-width: inherit; } } .review-summary { background: white; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); padding: 1.25rem; margin: 1em 0; } @media print, screen and (min-width: 40em) { .review-summary { padding: 2.5rem; } } .review-summary .summary-header { border-bottom: 1px solid black; padding-bottom: 1em; margin-bottom: 1em; } .review-summary .product-name, .review-summary .product-meta { font-size: 1.625rem; font-family: "Apercu", Helvetica, Arial, sans-serif; } @media print, screen and (min-width: 40em) { .review-summary .product-name, .review-summary .product-meta { font-size: 2.5rem; } } .review-summary .product-name { font-weight: 700; color: #1a1a1a; } .review-summary .product-brand { font-size: 60%; display: block; color: #808080; margin-bottom: -0.5em; } .review-summary .product-price, .review-summary .product-weight { font-weight: 400; font-size: 80%; } .review-summary .product-status { vertical-align: super; font-size: 80%; color: #808080; display: inline-block; margin-top: -5px; } .review-summary .review-evaluation .icon { display: flex; align-items: center; justify-content: center; border-radius: 100%; width: 30px; height: 30px; padding: 0.5rem; } @media print, screen and (min-width: 40em) { .review-summary .review-evaluation .icon { width: 41px; height: 41px; } } .review-summary .review-evaluation .icon img { max-width: 100%; max-height: 100%; width: auto; height: auto; } .review-summary .review-evaluation .evaluation-list { padding-left: 2px; } .review-summary .review-evaluation .evaluation-list li { list-style: square; } .review-summary .review-pros .icon { background-color: #7bc818; top: -1px; } .review-summary .review-neutral .icon { background-color: #ffd257; font-weight: 700; } .review-summary .review-cons .icon { background-color: #c82d18; top: 1px; } .review-summary .review-flags .label, .review-summary .review-usage .label { font-family: "Apercu", Helvetica, Arial, sans-serif; color: #1a1a1a; font-weight: 700; font-size: 1.125rem; display: block; margin: 1em 0 0.5em; line-height: normal; } @media print, screen and (min-width: 40em) { .review-summary .review-flags .label, .review-summary .review-usage .label { font-size: 1.375rem; } } .review-summary .rating-list li { height: 50px; } .review-summary .rating-list .rating-star { width: 50px; height: 50px; } .review-summary .rating-list .rating-star .icon { width: 34px; height: auto; } .review-summary .rating-list .rating-star[data-parts], .review-summary .rating-list .rating-star.full { position: relative; overflow: hidden; } .review-summary .rating-list .rating-star[data-parts]:before, .review-summary .rating-list .rating-star.full:before { left: 0; top: 0; bottom: 0; } .review-summary .rating-list .rating-star[data-parts="0"]:before { right: 100%; } .review-summary .rating-list .rating-star[data-parts="0.5"]:before { right: 50%; } .review-summary .rating-list .rating-star[data-parts].full:before, .review-summary .rating-list .rating-star.full:before { right: 0; } .review-summary .review-badges { flex-grow: 1; } .review-summary .review-badges .badges-list { display: flex; flex-basis: 0; } @media print, screen and (min-width: 64em) { .review-summary .review-badges .label { display: none; } } .review-summary .review-badge { text-align: center; width: 75px; flex-grow: 1; margin-left: 0.625rem; } .review-summary .review-badge .text { font-family: "Apercu", Helvetica, Arial, sans-serif; color: #808080; font-size: 0.875rem; line-height: 1.3; margin-top: 0.5em; } .review-summary .review-badge .icon { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 100%; padding: 0.5rem; color: white; font-size: 1.25rem; } .review-summary .review-badge .icon img { max-width: 100%; max-height: 100%; } .review-summary .review-badge.inactive .icon { border: 1px solid #d9d9d9; background: white; } .review-summary .review-badge.excellence:not(.inactive) .icon { background: #ffd257; } .review-summary .review-badge.price-quality:not(.inactive) .icon { background: #00c4b2; } .review-summary .review-badge.favourite .icon img { position: relative; top: 2px; } .review-summary .review-badge.favourite:not(.inactive) .icon { background: #c82d18; } .review-summary .review-usage .usages-list { display: flex; } .review-summary .review-usage .usages-list li { flex-grow: 1; background-color: #d9d9d9; text-align: center; padding: 0.625rem 0; margin: 0 0.25em; } .review-summary .review-usage .usages-list li:first-child { margin-left: 0; } .review-summary .review-usage .usages-list li:last-child { margin-right: 0; } .review-summary .review-usage .usages-list li.active { background-color: #1a1a1a; } .review-summary .review-usage .race-type { border: 4px solid white; padding: 0 2%; text-transform: uppercase; color: white; font-family: "Apercu", Helvetica, Arial, sans-serif; font-weight: 700; display: inline-block; } .review-summary .review-usage .usage-display { margin-top: 0.5em; height: 5px; position: relative; } .review-summary .review-usage .usage-display-plain { background: #7bc818; height: 5px; position: absolute; } .review-summary .review-usage .usage-display-gradient { background: linear-gradient(to right, #7bc818 0%, transparent 100%); height: 5px; position: absolute; } @media print, screen and (min-width: 64em) { .review-summary.condensed .summary-header { display: flex; justify-content: space-between; align-items: flex-end; } } .review-summary.condensed .product-meta div + div:before { content: "–"; display: inline-block; } .review-summary.condensed .product-price, .review-summary.condensed .product-weight { display: inline-block; } @media print, screen and (min-width: 48em) { .review-summary.condensed .summary-content { display: flex; } } @media print, screen and (min-width: 48em) { .review-summary.condensed .summary-content .content-main { width: 50%; padding-right: 1.25rem; } } @media print, screen and (min-width: 64em) { .review-summary.condensed .summary-content .content-main { width: 40%; } } @media print, screen and (min-width: 48em) { .review-summary.condensed .summary-content .content-side { width: 50%; padding-left: 1.25rem; } } @media print, screen and (min-width: 64em) { .review-summary.condensed .summary-content .content-side { width: 60%; } } @media print, screen and (min-width: 64em) { .review-summary.condensed .review-flags { display: flex; justify-content: space-between; align-items: flex-end; } } .review-summary.condensed .review-evaluation { position: relative; padding-left: calc(30px + 0.625rem); } @media print, screen and (min-width: 40em) { .review-summary.condensed .review-evaluation { padding-left: calc(40px + 1.25rem); } } .review-summary.condensed .review-evaluation .icon { position: absolute; left: 0; } .review-summary.condensed .review-evaluation .icon img { position: relative; } .review-summary.condensed .review-evaluation.review-pros .icon img { top: -1px; } .review-summary.condensed .review-evaluation.review-cons .icon img { top: 1px; } .review-summary.condensed .review-evaluation + .review-evaluation { margin-top: 1.5em; } @media print, screen and (min-width: 64em) { .review-summary.condensed .review-flags .label, .review-summary.condensed .review-usage .label { margin: 0 0 0.5em; } } @media print, screen and (min-width: 64em) { .review-summary.condensed .review-flags + .review-usage { border-top: 1px solid black; margin-top: 0.75em; padding-top: 0.5em; } } @media print, screen and (min-width: 48em) and (max-width: 54.99875em) { .review-summary.condensed .review-rating .label { margin-top: 0; } } @media print, screen and (min-width: 64em) { .review-summary.condensed .review-badges .label { display: none; } } @media print, screen and (min-width: 48em) { .review-summary.expanded .summary-content > div:not(:first-child) { border-top: 1px solid black; padding-top: 1rem; margin-top: 1rem; } } @media print, screen and (min-width: 48em) { .review-summary.expanded .review-description { text-align: center; display: flex; flex-basis: 0; margin: 0 -1.25rem; } } .review-summary.expanded .review-evaluation { position: relative; padding-left: calc(30px + 0.625rem); } @media print, screen and (min-width: 40em) { .review-summary.expanded .review-evaluation { padding-left: calc(40px + 1.25rem); } } @media print, screen and (min-width: 48em) { .review-summary.expanded .review-evaluation { padding: 0 1.25rem; flex-grow: 1; width: grid-col(1 of 3); } } .review-summary.expanded .review-evaluation .text { text-align: left; } .review-summary.expanded .review-evaluation .text > * { line-height: normal; } .review-summary.expanded .review-evaluation .text > * + * { margin-top: 0.5em; } .review-summary.expanded .review-evaluation .icon { position: absolute; left: 0; } @media print, screen and (min-width: 48em) { .review-summary.expanded .review-evaluation .icon { position: static; width: 50px; height: 50px; } } .review-summary.expanded .review-evaluation .icon img { position: relative; } .review-summary.expanded .review-evaluation.review-pros .icon img { top: -1px; } .review-summary.expanded .review-evaluation.review-cons .icon img { top: 1px; } .review-summary.expanded .review-evaluation + .review-evaluation { margin-top: 1.5em; } @media print, screen and (min-width: 48em) { .review-summary.expanded .review-evaluation + .review-evaluation { margin-top: 0; } } @media print, screen and (min-width: 48em) { .review-summary.expanded .review-evaluation .icon { margin: 0 auto 1em; } } @media print, screen and (min-width: 48em) { .review-summary.expanded .review-flags, .review-summary.expanded .product-meta { display: flex; flex-basis: 0; } .review-summary.expanded .review-flags > div:first-child, .review-summary.expanded .product-meta > div:first-child { padding-right: 1.25rem; } .review-summary.expanded .review-flags > div:last-child, .review-summary.expanded .product-meta > div:last-child { padding-left: 1.25rem; } .review-summary.expanded .review-flags > div:only-child, .review-summary.expanded .product-meta > div:only-child { padding: 0; } } @media print, screen and (min-width: 48em) { .review-summary.expanded .review-flags .label, .review-summary.expanded .review-usage .label { margin-top: 0; } } .review-summary.expanded .product-meta .label { font-weight: 700; } @media print, screen and (min-width: 48em) { .review-summary.expanded .review-badges .label { display: none; } } @media print, screen and (min-width: 64em) { .review-summary.expanded .review-badge { display: flex; flex-direction: column; align-items: center; width: auto; } } @media print, screen and (min-width: 64em) { .review-summary.expanded .review-badge .icon { order: 2; } } .review-summary.expanded .review-badge .text { font-family: "Apercu", Helvetica, Arial, sans-serif; display: block; margin: 1em 0 0.5em; } @media print, screen and (min-width: 64em) { .review-summary.expanded .review-badge .text { font-weight: 700; font-size: 1.375rem; order: 1; margin: 0 0 0.5em; flex-shrink: 0; line-height: normal; color: #1a1a1a; } } :root { --ON: initial; --OFF: ; } .page-template-about { --definitionSize: 1rem; --introductionSize: 1.125rem; --channelsSize: 1rem; --bigSubtitleSize: 5rem; --rowSpacing: 2rem; } @media print, screen and (min-width: 48em) { .page-template-about { --definitionSize: 1.5rem; --introductionSize: 1.75rem; --channelsSize: 1.125rem; --rowSpacing: 5rem; } } @media print, screen and (min-width: 64em) { .page-template-about { --bigSubtitleSize: 7.25rem; } } .page-template-about .pictures img { pointer-events: none; } .page-template-about .site-content { padding: 0; } .page-template-about .schemed { --backgroundColor: var(--light, white) var(--dark, black); --textColor: var(--light, black) var(--dark, white); background: var(--backgroundColor, white); color: var(--textColor, black); } .page-template-about .schemed.scheme-light { --light: var(--ON); --dark: var(--OFF); } .page-template-about .schemed.scheme-dark { --light: var(--OFF); --dark: var(--ON); } .page-template-about .schemed.scheme-dark a { color: white; } .page-template-about .grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-column-gap: var(--gutter); -moz-column-gap: var(--gutter); column-gap: var(--gutter); } .page-template-about .page-row { padding-top: var(--rowSpacing); padding-bottom: var(--rowSpacing); } .page-template-about .row-title { color: currentColor; line-height: normal; } .page-template-about .page-header { background: black url(../legacy/images/about/heading-background.jpg) no-repeat 50% 50%/cover; color: white; text-align: center; display: flex; align-items: center; padding: calc(60px + 4em) 0 4em; } .page-template-about .page-header a { color: white; text-decoration: underline; } .page-template-about .page-header a:hover, .page-template-about .page-header a:focus { opacity: 0.6; } @media print, screen and (min-width: 64em) { .page-template-about .page-header { padding: calc(95px + var(--rowSpacing)) 0 var(--rowSpacing); } } .page-template-about .page-title, .page-template-about .page-introduction, .page-template-about .magazine-channels { grid-column: 1/-1; } @media print, screen and (min-width: 40em) { .page-template-about .page-title, .page-template-about .page-introduction, .page-template-about .magazine-channels { grid-column: 2/-2; } } .page-template-about .page-title { position: relative; z-index: 1; color: currentColor; } .page-template-about .page-title .definition, .page-template-about .page-title .definition-term, .page-template-about .page-title .definition-description { display: block; } .page-template-about .page-title .definition-term { position: relative; display: inline-block; } .page-template-about .page-title .definition-term:before { content: ""; display: block; position: absolute; pointer-events: none; background: url(../legacy/images/about/arrow-title.png) no-repeat 0 0/contain; width: 156px; height: 64px; top: 50%; right: calc(100% + 10px); } .page-template-about .page-title .definition-term img { display: inline-block; max-width: 100%; height: auto; } .page-template-about .page-title .definition-description { font-size: var(--definitionSize); font-weight: 400; color: #1a1a1a; display: inline-block; color: black; background: url(../legacy/images/about/definition-background-large.png) no-repeat top center/100%; padding: 0.7em 0.5em 0.8em; } .page-template-about .page-title .definition-description .text { transform: rotate(-1.31deg); display: inline-block; } .page-template-about .page-introduction { font-size: var(--introductionSize); font-family: "Apercu", Helvetica, Arial, sans-serif; font-weight: 700; margin-top: 2em; position: relative; } @media print, screen and (min-width: 40em) { .page-template-about .page-introduction { margin-top: 5em; } } .page-template-about .page-introduction:before { content: ""; display: block; background: url(../legacy/images/about/introduction-background.png) no-repeat 50% 50%; background-size: 100%; width: 1236px; height: 582px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; } .page-template-about .page-introduction > * { position: relative; z-index: 1; } .page-template-about .magazine-channels { max-width: 560px; font-size: var(--channelsSize); font-weight: 400; margin: 3em auto 0; } .page-template-about .vojo-explaination { background: url(../legacy/images/about/noise.gif) repeat 0 0; padding-bottom: var(--rowSpacing); } .page-template-about .vojo-explaination .grid { position: relative; z-index: 1; } .page-template-about .vojo-explaination .grid:before { content: attr(data-word); display: block; color: white; font-size: 12.5rem; filter: blur(5px); position: absolute; top: 50%; transform: translateY(-50%); z-index: -1; } .page-template-about .vojo-explaination .grid .pictures, .page-template-about .vojo-explaination .grid .text { grid-column: 1/-1; } .page-template-about .vojo-explaination .grid .text { margin-top: calc(var(--gutter) * 2); } .page-template-about .vojo-explaination .grid .pictures img { max-width: 100%; height: auto; } .page-template-about .vojo-explaination .explaination-how { padding-top: 200px; } .page-template-about .vojo-explaination .explaination-how .pictures, .page-template-about .vojo-explaination .explaination-how .pictures img { position: relative; } .page-template-about .vojo-explaination .explaination-how .pictures:before { content: ""; display: block; position: absolute; width: 943px; height: 291px; background: url(../legacy/images/about/ink-03.png) no-repeat 0 0/contain; bottom: calc(100% - 58px); left: -30%; pointer-events: none; z-index: 0; } .page-template-about .vojo-explaination .explaination-how .pictures img { z-index: 1; transform: rotate(4deg); } .page-template-about .vojo-explaination .explaination-how .text { position: relative; } .page-template-about .vojo-explaination .explaination-how .text:before { content: ""; width: 73px; height: 71px; display: block; background: url(../legacy/images/about/blink.png) no-repeat 0 0/contain; float: right; margin-top: -65px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .page-template-about .vojo-explaination .explaination-how .text:before { background-image: url(../legacy/images/about/blink@2x.png); } } .page-template-about .vojo-explaination .explaination-why .pictures { text-align: right; } .page-template-about .vojo-explaination .explaination-why .pictures img { transform: rotate(-4deg); } @media print, screen and (min-width: 48em) { .page-template-about .vojo-explaination { padding-bottom: 0; } .page-template-about .vojo-explaination .grid .text, .page-template-about .vojo-explaination .grid .pictures { grid-row-start: 1; } .page-template-about .vojo-explaination .grid .text { margin-top: 0; grid-column: auto/span 6; } .page-template-about .vojo-explaination .grid .pictures { grid-column: 1/span 6; position: relative; } .page-template-about .vojo-explaination .grid .pictures img { max-width: inherit; } .page-template-about .vojo-explaination .grid:nth-child(even) .pictures { grid-column-start: 7; } .page-template-about .vojo-explaination .grid:nth-child(even) .text { grid-column-start: 1; } .page-template-about .vojo-explaination .explaination-how { align-items: flex-start; } .page-template-about .vojo-explaination .explaination-how .pictures { display: flex; justify-content: flex-end; } .page-template-about .vojo-explaination .explaination-how .pictures:before { left: inherit; right: -66%; } .page-template-about .vojo-explaination .explaination-how .pictures img { position: absolute; right: 0; } .page-template-about .vojo-explaination .explaination-how .text { padding-left: var(--halfGutter); } .page-template-about .vojo-explaination .explaination-why .pictures img { margin-bottom: -100%; } .page-template-about .vojo-explaination .explaination-why .text { padding-top: 8em; position: relative; } .page-template-about .vojo-explaination .explaination-why .text:before { content: ""; width: 136px; height: 156px; display: block; background: url(../legacy/images/about/arrow.png) no-repeat 0 0/contain; float: right; margin-top: -220px; } } @media print and (-webkit-min-device-pixel-ratio: 2), print and (min-resolution: 192dpi), screen and (min-width: 48em) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 48em) and (min-resolution: 192dpi) { .page-template-about .vojo-explaination .explaination-why .text:before { background-image: url(../legacy/images/about/arrow@2x.png); } } @media print, screen and (min-width: 64em) { .page-template-about .vojo-explaination .grid .text { grid-column: auto/span 6; } .page-template-about .vojo-explaination .grid .pictures { grid-column: 2/span 4; } .page-template-about .vojo-explaination .grid:nth-child(even) .pictures { grid-column-start: 8; } .page-template-about .vojo-explaination .grid:nth-child(even) .text { grid-column-start: 2; } } .page-template-about .vojo-trailer { padding: 5vw var(--gutter); background: url(../legacy/images/about/video-background.jpg) no-repeat 50% 50%/cover; } .page-template-about .vojo-trailer .page-row.grid { padding: 75px 0 150px; } .page-template-about .vojo-trailer .page-row.grid > * { grid-column: 1/-1; } @media print, screen and (min-width: 48em) { .page-template-about .vojo-trailer { padding-left: 0; padding-right: 0; } .page-template-about .vojo-trailer .page-row.grid { padding: 150px 0; } .page-template-about .vojo-trailer .page-row.grid > * { grid-column: 2/-2; } } .page-template-about .vojo-integrity .integrity-pictures { padding: 0; } .page-template-about .vojo-integrity .integrity-pictures .pictures { display: flex; align-items: flex-start; justify-content: center; } .page-template-about .vojo-integrity .integrity-pictures img { margin-top: -75px; max-width: 150%; } .page-template-about .vojo-integrity .integrity-text { padding-top: 0; } @media print, screen and (min-width: 40em) { .page-template-about .vojo-integrity .integrity-text { position: relative; } .page-template-about .vojo-integrity .integrity-text:before { pointer-events: none; content: ""; display: block; position: absolute; top: 3em; left: 90%; width: 478px; height: 590px; background: url(../legacy/images/about/ink-02.jpg) no-repeat 0 0/contain; } } .page-template-about .vojo-integrity .grid .text { grid-column: 1/-1; } @media print, screen and (min-width: 40em) { .page-template-about .vojo-integrity .grid .text { grid-column: auto/span 8; } } .page-template-about .vojo-tests { margin-bottom: 200px; } .page-template-about .vojo-tests .grid .text { grid-column: 1/-1; } @media print, screen and (max-width: 33.74875em) { .page-template-about .vojo-tests .grid { padding-top: 0; } } @media print, screen and (min-width: 40em) { .page-template-about .vojo-tests .grid .text { grid-column: 5/span 8; position: relative; } .page-template-about .vojo-tests .grid .text:before { pointer-events: none; content: ""; display: block; position: absolute; top: 0; right: calc(100% + 7rem); width: 782px; height: 1000px; background: url(../legacy/images/about/ink-01.jpg) no-repeat 0 0/contain; z-index: -1; } } .page-template-about .vojo-birth { position: relative; background: black url(../legacy/images/about/birth-background.jpg) no-repeat 50% 50%/cover; padding: 80px 0 var(--rowSpacing); } .page-template-about .vojo-birth .page-row { padding: 0; } .page-template-about .vojo-birth .grid .pictures, .page-template-about .vojo-birth .grid .text { grid-column: 1/-1; } .page-template-about .vojo-birth .grid:first-child .row-title { font-size: var(--bigSubtitleSize); margin-bottom: 0.4em; } .page-template-about .vojo-birth .grid:first-child .pictures img { margin-top: -240px; max-width: 100%; height: auto; } .page-template-about .vojo-birth .grid:first-child .text { margin-top: 2rem; } @media print, screen and (max-width: 54.99875em) { .page-template-about .vojo-birth .grid:first-child .row-title br { display: none; } } @media print, screen and (min-width: 48em) { .page-template-about .vojo-birth .grid:first-child .text { grid-column: 2/span 8; } .page-template-about .vojo-birth .grid:nth-child(2) { margin-top: 5rem; } .page-template-about .vojo-birth .grid:nth-child(2) .text { grid-column: 4/span 8; } } @media print, screen and (min-width: 64em) { .page-template-about .vojo-birth .grid:first-child .text, .page-template-about .vojo-birth .grid:first-child .pictures { grid-row-start: 1; } .page-template-about .vojo-birth .grid:first-child .pictures { grid-column: 6/-1; } .page-template-about .vojo-birth .grid:first-child .pictures img { max-width: inherit; } .page-template-about .vojo-birth .grid:first-child .text { grid-column: 1/span 5; } .page-template-about .vojo-birth .grid:nth-child(2) { margin-top: 6em; } .page-template-about .vojo-birth .grid:nth-child(2) .text { grid-column: 2/-2; } } .page-template-about .follow-us { padding: var(--rowSpacing) 0; } .page-template-about .follow-us .row-title { font-size: var(--bigSubtitleSize); line-height: 1; font-weight: 700; display: inline; } @media print, screen and (min-width: 40em) { .page-template-about .follow-us .row-title span { display: block; } .page-template-about .follow-us .row-title > span:nth-child(2) { position: relative; top: -1.3em; } .page-template-about .follow-us .row-title > span:nth-child(2), .page-template-about .follow-us .row-title .networks { display: inline-block; } } @media print, screen and (min-width: 64em) { .page-template-about .follow-us .row-title > span:nth-child(2) { top: -0.5em; } } .page-template-about .follow-us .networks { font-family: "Apercu", Helvetica, Arial, sans-serif; font-size: 1.125rem; font-weight: 400; display: block; position: relative; margin: 1em -0.5em 0.5em; } .page-template-about .follow-us .networks li { padding: 0.5em; } .page-template-about .follow-us .networks a { color: #808080; } .page-template-about .follow-us .networks a:hover, .page-template-about .follow-us .networks a:focus { color: white; } .page-template-about .follow-us .networks .icon { color: white; width: 1em; margin-right: 0.5em; display: inline-block; font-size: 1em; text-align: center; vertical-align: middle; } @media print, screen and (min-width: 40em) { .page-template-about .follow-us .networks { top: 1em; margin: 0 0 1em 1em; font-size: 1.5625rem; display: inline-block; } .page-template-about .follow-us .networks li { padding: 0; } .page-template-about .follow-us .networks li + li { margin-top: 0.4em; } } @media print, screen and (min-width: 64em) { .page-template-about .follow-us .networks { top: 2em; margin: 0 0 2em 1em; } } .page-template-about .vojo-baseline { font-family: "Apercu", Helvetica, Arial, sans-serif; font-size: 7.75rem; color: black; padding-top: 1rem; } .page-template-about .vojo-baseline img { display: block; }