@charset "UTF-8"; /*! * KNACSS Reborn: Just keep it simple! * @author: Alsacreations * v8.1 2022/01 * Licence WTFPL http://www.wtfpl.net/ */ /* ----------------------------- */ /* ==Reset (base) */ /* ----------------------------- */ /* * 1. Switch to border-box model for all elements * 2. Avoid min-width: auto on flex and grid items */ *, *::before, *::after { box-sizing: border-box; /* 1 */ min-width: 0; /* 2 */ } /* * 1. Remove the grey highlight on links in iOS * 2. Prevent orientation font changes in iOS * 3. Breaks words to prevent overflow in all browsers */ html { font-size: 100%; -webkit-tap-highlight-color: transparent; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ overflow-wrap: break-word; /* 3 */ } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1rem; line-height: 1.5; background-color: #FFFFFF; color: #212529; } /* * Headings */ h1, .h1-like, h2, .h2-like, h3, .h3-like, h4, .h4-like, h5, .h5-like, h6, .h6-like { color: #212529; } /* * Links */ a { color: #6c757d; text-decoration: underline; } a:focus, a:hover, a:active { color: #212529; text-decoration: underline; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /* * Vertical rythm */ h1, .h1-like, h2, .h2-like { margin-top: 0; margin-bottom: 1rem; } p, address, ol, ul, dl, blockquote, pre, h3, .h3-like, h4, .h4-like, h5, .h5-like, h6, .h6-like, dt, dd { margin-top: 0; margin-bottom: 0.5rem; } /* * Nested elements */ ol ol, ol ul, ul ol, ul ul, li ul, li ol, nav ul, nav ol, li p, li .p-like { margin-top: 0; margin-bottom: 0; } /* * Lists */ ul, ol { padding-left: 1rem; } nav ul, nav ol { list-style: none; padding: 0; } /* * Embed content */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } img, table, td, blockquote, pre, code, input, textarea, select, video, svg, iframe { max-width: 100%; } iframe, img, input, select, textarea { height: auto; } img { border-style: none; } /** * Remove the border on iframes in all browsers */ iframe { border-style: none; } /* * Fill color matching to text color */ svg:not([fill]) { fill: currentColor; } /* * Hide the overflow in IE */ svg:not(:root) { overflow: hidden; } /* * Tables */ table { border-collapse: collapse; } /* * Rulers */ hr { box-sizing: content-box; height: 0; overflow: visible; border: 0; border-top: 1px solid; margin: 1rem 0; clear: both; color: inherit; } /* * table styles */ table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; vertical-align: top; margin-bottom: 1rem; } /* * Hidden but not for an assistive technology like a screen reader, Yahoo! method */ .visually-hidden, .sr-only { position: absolute !important; border: 0 !important; height: 1px !important; width: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; } /* * Disable animations styles when reduced motion is enabled */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* * Change the cursor on busy elements in all browsers. */ [aria-busy="true"] { cursor: progress; } /* * Change the cursor on control elements in all browsers. */ [aria-controls] { cursor: pointer; } /* * Change the cursor on disabled, not-editable, or otherwise * inoperable elements in all browsers. */ [aria-disabled="true"], [disabled] { cursor: not-allowed; } /* * Change the display on visually hidden accessible elements * in all browsers. */ [aria-hidden="false"][hidden] { display: initial; } [aria-hidden="false"][hidden]:not(:focus) { clip: rect(0, 0, 0, 0); position: absolute; } /* ----------------------------- */ /* ==Reset (forms) */ /* ----------------------------- */ /* * Remove the tapping delay on clickable elements in all browsers . */ a, area, button, input, label, select, summary, textarea, [tabindex] { touch-action: manipulation; } /* * 1. Change the inconsistent appearance in all browsers. * 2. Add typography inheritance in all browsers. */ button, input, select, textarea { margin: 0; background-color: transparent; /* 1 */ color: inherit; /* 1 */ font-family: inherit; /* 2 */ font-size: inherit; /* 2 */ line-height: inherit; /* 2 */ letter-spacing: inherit; /* 2 */ vertical-align: middle; } /* * Basic User Interface reset */ button, input:not([type="radio"]):not([type="checkbox"]), select, textarea { border: 0; } /* * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre, code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } pre { -moz-tab-size: 2; tab-size: 2; white-space: pre-wrap; line-height: normal; overflow: auto; -ms-overflow-style: scrollbar; } /* * Show overflow in IE/Edge */ button, input { overflow: visible; } /* * Remove the inheritance of text transform in Firefox */ button, select { text-transform: none; } /* * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } form, fieldset { border: none; } fieldset { margin: 0; padding: 1rem; } legend { display: table; max-width: 100%; padding: 0 0.125rem; border: 0; color: inherit; white-space: normal; } label { display: inline-block; cursor: pointer; } textarea { overflow: auto; vertical-align: top; resize: vertical; white-space: pre-wrap; } progress { display: inline-block; width: 100%; vertical-align: baseline; } output { display: inline-block; } summary { display: list-item; } template { display: none; } /* ----------------------------- */ /* Form oddities */ /* ----------------------------- */ /* * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* * Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /* * Remove the inner padding in Chrome, Edge, and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* * 1. Correct the inability to style upload buttons in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* * Remove the inner border and padding of focus outlines in Firefox. */ ::-moz-focus-inner { border-style: none; padding: 0; } /* * Restore the focus outline styles unset by the previous rule in Firefox. */ :-moz-focusring { outline: 1px dotted ButtonText; } /* * Remove the additional :invalid styles in Firefox. */ :-moz-ui-invalid { box-shadow: none; } /* ----------------------------- */ /* ==Print (quick print reset) */ /* ----------------------------- */ @media print { * { background: transparent !important; box-shadow: none !important; text-shadow: none !important; } body { width: auto; margin: auto; font-family: serif; font-size: 12pt; } p, .p-like, h1, .h1-like, h2, .h2-like, h3, .h3-like, h4, .h4-like, h5, .h5-like, h6, .h6-like, blockquote, label, ul, ol { color: #000; margin: auto; } .print { display: block; } .no-print { display: none; } /* no orphans, no widows */ p, .p-like, blockquote { orphans: 3; widows: 3; } /* no breaks inside these elements */ blockquote, ul, ol { page-break-inside: avoid; } /* page break before main headers h1, .h1-like { page-break-before: always; } */ /* no breaks after these elements */ h1, .h1-like, h2, .h2-like, h3, .h3-like, caption { page-break-after: avoid; } a { color: #000; } /* displaying URLs a[href]::after { content: " (" attr(href) ")"; } */ a[href^="javascript:"]::after, a[href^="#"]::after { content: ""; } } /* ---------------------------- */ /* ==Layout classes */ /* ----------------------------- */ /* Global container */ .layout-maxed { display: grid; } @media (min-width: 576px) { .layout-maxed { grid-template-columns: minmax(0.5rem, 1fr) minmax(auto, 576px) minmax(0.5rem, 1fr); } } @media (min-width: 992px) { .layout-maxed { grid-template-columns: minmax(0.5rem, 1fr) minmax(auto, 992px) minmax(0.5rem, 1fr); } } @media (min-width: 1400px) { .layout-maxed { grid-template-columns: minmax(0.5rem, 1fr) minmax(auto, 1400px) minmax(0.5rem, 1fr); } } /* Center all children */ .layout-maxed > * { grid-column: 2; } /* Hero box */ .layout-hero { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; } .layout-hero > * { grid-column: 2; } /* Hero image */ .layout-hero-img { grid-column: 1 / -1; justify-self: center; max-width: 100%; } /* * Global utility classes */ .hidden { display: none; } .block { display: block; } .inline { display: inline; } .inline-block { display: inline-block; } .flex { display: flex; } .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-no-wrap { flex-wrap: nowrap; } .flex-shrink { flex-shrink: 1; } .flex-no-shrink { flex-shrink: 0; } .flex-grow { flex-grow: 1; } .flex-no-grow { flex-grow: 0; } .float-left { float: left; } .float-right { float: right; } .float-none { float: none; } .text-bold { font-weight: bold; } .text-italic { font-style: italic; } .text-uppercase { text-transform: uppercase; } .text-lowercase { text-transform: lowercase; } .text-smaller { font-size: smaller; } .text-bigger { font-size: bigger; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } .text-wrap { overflow-wrap: break-word; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .justify-evenly { justify-content: space-evenly; } .justify-items-start { justify-items: start; } .justify-items-end { justify-items: end; } .justify-items-center { justify-items: center; } .align-start { align-content: start; } .align-end { align-content: end; } .align-center { align-content: center; } .align-between { align-content: space-between; } .align-around { align-content: space-around; } .align-evenly { align-content: space-evenly; } .align-items-start { align-items: flex-start; } .align-items-end { align-items: flex-end; } .align-items-center { align-items: center; } .place-center { place-content: center; } .justify-self-auto { justify-self: auto; } .justify-self-start { justify-self: start; } .justify-self-end { justify-self: end; } .justify-self-center { justify-self: center; } .justify-self-stretch { justify-self: stretch; } .align-self-auto { align-self: auto; } .align-self-start { align-self: flex-start; } .align-self-end { align-self: flex-end; } .align-self-center { align-self: center; } .align-self-stretch { align-self: stretch; } .align-top { vertical-align: top; } .align-bottom { vertical-align: bottom; } .align-middle { vertical-align: middle; } .item-first { order: -100; } .item-last { order: 100; } @media (min-width: 576px) { .sm\:hidden { display: none; } } @media (min-width: 992px) { .md\:hidden { display: none; } } @media (min-width: 1400px) { .lg\:hidden { display: none; } } @media (min-width: 576px) { .sm\:block { display: block; } } @media (min-width: 992px) { .md\:block { display: block; } } @media (min-width: 1400px) { .lg\:block { display: block; } } @media (min-width: 576px) { .sm\:inline { display: inline; } } @media (min-width: 992px) { .md\:inline { display: inline; } } @media (min-width: 1400px) { .lg\:inline { display: inline; } } @media (min-width: 576px) { .sm\:inline-block { display: inline-block; } } @media (min-width: 992px) { .md\:inline-block { display: inline-block; } } @media (min-width: 1400px) { .lg\:inline-block { display: inline-block; } } @media (min-width: 576px) { .sm\:flex { display: flex; } } @media (min-width: 992px) { .md\:flex { display: flex; } } @media (min-width: 1400px) { .lg\:flex { display: flex; } } @media (min-width: 576px) { .sm\:flex-row { flex-direction: row; } } @media (min-width: 992px) { .md\:flex-row { flex-direction: row; } } @media (min-width: 1400px) { .lg\:flex-row { flex-direction: row; } } @media (min-width: 576px) { .sm\:flex-col { flex-direction: column; } } @media (min-width: 992px) { .md\:flex-col { flex-direction: column; } } @media (min-width: 1400px) { .lg\:flex-col { flex-direction: column; } } @media (min-width: 576px) { .sm\:flex-wrap { flex-wrap: wrap; } } @media (min-width: 992px) { .md\:flex-wrap { flex-wrap: wrap; } } @media (min-width: 1400px) { .lg\:flex-wrap { flex-wrap: wrap; } } @media (min-width: 576px) { .sm\:flex-no-wrap { flex-wrap: nowrap; } } @media (min-width: 992px) { .md\:flex-no-wrap { flex-wrap: nowrap; } } @media (min-width: 1400px) { .lg\:flex-no-wrap { flex-wrap: nowrap; } } @media (min-width: 576px) { .sm\:flex-shrink { flex-shrink: 1; } } @media (min-width: 992px) { .md\:flex-shrink { flex-shrink: 1; } } @media (min-width: 1400px) { .lg\:flex-shrink { flex-shrink: 1; } } @media (min-width: 576px) { .sm\:flex-no-shrink { flex-shrink: 0; } } @media (min-width: 992px) { .md\:flex-no-shrink { flex-shrink: 0; } } @media (min-width: 1400px) { .lg\:flex-no-shrink { flex-shrink: 0; } } @media (min-width: 576px) { .sm\:flex-grow { flex-grow: 1; } } @media (min-width: 992px) { .md\:flex-grow { flex-grow: 1; } } @media (min-width: 1400px) { .lg\:flex-grow { flex-grow: 1; } } @media (min-width: 576px) { .sm\:flex-no-grow { flex-grow: 0; } } @media (min-width: 992px) { .md\:flex-no-grow { flex-grow: 0; } } @media (min-width: 1400px) { .lg\:flex-no-grow { flex-grow: 0; } } @media (min-width: 576px) { .sm\:float-left { float: left; } } @media (min-width: 992px) { .md\:float-left { float: left; } } @media (min-width: 1400px) { .lg\:float-left { float: left; } } @media (min-width: 576px) { .sm\:float-right { float: right; } } @media (min-width: 992px) { .md\:float-right { float: right; } } @media (min-width: 1400px) { .lg\:float-right { float: right; } } @media (min-width: 576px) { .sm\:float-none { float: none; } } @media (min-width: 992px) { .md\:float-none { float: none; } } @media (min-width: 1400px) { .lg\:float-none { float: none; } } @media (min-width: 576px) { .sm\:text-bold { font-weight: bold; } } @media (min-width: 992px) { .md\:text-bold { font-weight: bold; } } @media (min-width: 1400px) { .lg\:text-bold { font-weight: bold; } } @media (min-width: 576px) { .sm\:text-italic { font-style: italic; } } @media (min-width: 992px) { .md\:text-italic { font-style: italic; } } @media (min-width: 1400px) { .lg\:text-italic { font-style: italic; } } @media (min-width: 576px) { .sm\:text-uppercase { text-transform: uppercase; } } @media (min-width: 992px) { .md\:text-uppercase { text-transform: uppercase; } } @media (min-width: 1400px) { .lg\:text-uppercase { text-transform: uppercase; } } @media (min-width: 576px) { .sm\:text-lowercase { text-transform: lowercase; } } @media (min-width: 992px) { .md\:text-lowercase { text-transform: lowercase; } } @media (min-width: 1400px) { .lg\:text-lowercase { text-transform: lowercase; } } @media (min-width: 576px) { .sm\:text-smaller { font-size: smaller; } } @media (min-width: 992px) { .md\:text-smaller { font-size: smaller; } } @media (min-width: 1400px) { .lg\:text-smaller { font-size: smaller; } } @media (min-width: 576px) { .sm\:text-bigger { font-size: bigger; } } @media (min-width: 992px) { .md\:text-bigger { font-size: bigger; } } @media (min-width: 1400px) { .lg\:text-bigger { font-size: bigger; } } @media (min-width: 576px) { .sm\:text-left { text-align: left; } } @media (min-width: 992px) { .md\:text-left { text-align: left; } } @media (min-width: 1400px) { .lg\:text-left { text-align: left; } } @media (min-width: 576px) { .sm\:text-center { text-align: center; } } @media (min-width: 992px) { .md\:text-center { text-align: center; } } @media (min-width: 1400px) { .lg\:text-center { text-align: center; } } @media (min-width: 576px) { .sm\:text-right { text-align: right; } } @media (min-width: 992px) { .md\:text-right { text-align: right; } } @media (min-width: 1400px) { .lg\:text-right { text-align: right; } } @media (min-width: 576px) { .sm\:text-justify { text-align: justify; } } @media (min-width: 992px) { .md\:text-justify { text-align: justify; } } @media (min-width: 1400px) { .lg\:text-justify { text-align: justify; } } @media (min-width: 576px) { .sm\:text-wrap { overflow-wrap: break-word; } } @media (min-width: 992px) { .md\:text-wrap { overflow-wrap: break-word; } } @media (min-width: 1400px) { .lg\:text-wrap { overflow-wrap: break-word; } } @media (min-width: 576px) { .sm\:justify-start { justify-content: flex-start; } } @media (min-width: 992px) { .md\:justify-start { justify-content: flex-start; } } @media (min-width: 1400px) { .lg\:justify-start { justify-content: flex-start; } } @media (min-width: 576px) { .sm\:justify-end { justify-content: flex-end; } } @media (min-width: 992px) { .md\:justify-end { justify-content: flex-end; } } @media (min-width: 1400px) { .lg\:justify-end { justify-content: flex-end; } } @media (min-width: 576px) { .sm\:justify-center { justify-content: center; } } @media (min-width: 992px) { .md\:justify-center { justify-content: center; } } @media (min-width: 1400px) { .lg\:justify-center { justify-content: center; } } @media (min-width: 576px) { .sm\:justify-between { justify-content: space-between; } } @media (min-width: 992px) { .md\:justify-between { justify-content: space-between; } } @media (min-width: 1400px) { .lg\:justify-between { justify-content: space-between; } } @media (min-width: 576px) { .sm\:justify-around { justify-content: space-around; } } @media (min-width: 992px) { .md\:justify-around { justify-content: space-around; } } @media (min-width: 1400px) { .lg\:justify-around { justify-content: space-around; } } @media (min-width: 576px) { .sm\:justify-evenly { justify-content: space-evenly; } } @media (min-width: 992px) { .md\:justify-evenly { justify-content: space-evenly; } } @media (min-width: 1400px) { .lg\:justify-evenly { justify-content: space-evenly; } } @media (min-width: 576px) { .sm\:justify-items-start { justify-items: start; } } @media (min-width: 992px) { .md\:justify-items-start { justify-items: start; } } @media (min-width: 1400px) { .lg\:justify-items-start { justify-items: start; } } @media (min-width: 576px) { .sm\:justify-items-end { justify-items: end; } } @media (min-width: 992px) { .md\:justify-items-end { justify-items: end; } } @media (min-width: 1400px) { .lg\:justify-items-end { justify-items: end; } } @media (min-width: 576px) { .sm\:justify-items-center { justify-items: center; } } @media (min-width: 992px) { .md\:justify-items-center { justify-items: center; } } @media (min-width: 1400px) { .lg\:justify-items-center { justify-items: center; } } @media (min-width: 576px) { .sm\:align-start { align-content: start; } } @media (min-width: 992px) { .md\:align-start { align-content: start; } } @media (min-width: 1400px) { .lg\:align-start { align-content: start; } } @media (min-width: 576px) { .sm\:align-end { align-content: end; } } @media (min-width: 992px) { .md\:align-end { align-content: end; } } @media (min-width: 1400px) { .lg\:align-end { align-content: end; } } @media (min-width: 576px) { .sm\:align-center { align-content: center; } } @media (min-width: 992px) { .md\:align-center { align-content: center; } } @media (min-width: 1400px) { .lg\:align-center { align-content: center; } } @media (min-width: 576px) { .sm\:align-between { align-content: space-between; } } @media (min-width: 992px) { .md\:align-between { align-content: space-between; } } @media (min-width: 1400px) { .lg\:align-between { align-content: space-between; } } @media (min-width: 576px) { .sm\:align-around { align-content: space-around; } } @media (min-width: 992px) { .md\:align-around { align-content: space-around; } } @media (min-width: 1400px) { .lg\:align-around { align-content: space-around; } } @media (min-width: 576px) { .sm\:align-evenly { align-content: space-evenly; } } @media (min-width: 992px) { .md\:align-evenly { align-content: space-evenly; } } @media (min-width: 1400px) { .lg\:align-evenly { align-content: space-evenly; } } @media (min-width: 576px) { .sm\:align-items-start { align-items: flex-start; } } @media (min-width: 992px) { .md\:align-items-start { align-items: flex-start; } } @media (min-width: 1400px) { .lg\:align-items-start { align-items: flex-start; } } @media (min-width: 576px) { .sm\:align-items-end { align-items: flex-end; } } @media (min-width: 992px) { .md\:align-items-end { align-items: flex-end; } } @media (min-width: 1400px) { .lg\:align-items-end { align-items: flex-end; } } @media (min-width: 576px) { .sm\:align-items-center { align-items: center; } } @media (min-width: 992px) { .md\:align-items-center { align-items: center; } } @media (min-width: 1400px) { .lg\:align-items-center { align-items: center; } } @media (min-width: 576px) { .sm\:place-center { place-content: center; } } @media (min-width: 992px) { .md\:place-center { place-content: center; } } @media (min-width: 1400px) { .lg\:place-center { place-content: center; } } @media (min-width: 576px) { .sm\:justify-self-auto { justify-self: auto; } } @media (min-width: 992px) { .md\:justify-self-auto { justify-self: auto; } } @media (min-width: 1400px) { .lg\:justify-self-auto { justify-self: auto; } } @media (min-width: 576px) { .sm\:justify-self-start { justify-self: start; } } @media (min-width: 992px) { .md\:justify-self-start { justify-self: start; } } @media (min-width: 1400px) { .lg\:justify-self-start { justify-self: start; } } @media (min-width: 576px) { .sm\:justify-self-end { justify-self: end; } } @media (min-width: 992px) { .md\:justify-self-end { justify-self: end; } } @media (min-width: 1400px) { .lg\:justify-self-end { justify-self: end; } } @media (min-width: 576px) { .sm\:justify-self-center { justify-self: center; } } @media (min-width: 992px) { .md\:justify-self-center { justify-self: center; } } @media (min-width: 1400px) { .lg\:justify-self-center { justify-self: center; } } @media (min-width: 576px) { .sm\:justify-self-stretch { justify-self: stretch; } } @media (min-width: 992px) { .md\:justify-self-stretch { justify-self: stretch; } } @media (min-width: 1400px) { .lg\:justify-self-stretch { justify-self: stretch; } } @media (min-width: 576px) { .sm\:align-self-auto { align-self: auto; } } @media (min-width: 992px) { .md\:align-self-auto { align-self: auto; } } @media (min-width: 1400px) { .lg\:align-self-auto { align-self: auto; } } @media (min-width: 576px) { .sm\:align-self-start { align-self: flex-start; } } @media (min-width: 992px) { .md\:align-self-start { align-self: flex-start; } } @media (min-width: 1400px) { .lg\:align-self-start { align-self: flex-start; } } @media (min-width: 576px) { .sm\:align-self-end { align-self: flex-end; } } @media (min-width: 992px) { .md\:align-self-end { align-self: flex-end; } } @media (min-width: 1400px) { .lg\:align-self-end { align-self: flex-end; } } @media (min-width: 576px) { .sm\:align-self-center { align-self: center; } } @media (min-width: 992px) { .md\:align-self-center { align-self: center; } } @media (min-width: 1400px) { .lg\:align-self-center { align-self: center; } } @media (min-width: 576px) { .sm\:align-self-stretch { align-self: stretch; } } @media (min-width: 992px) { .md\:align-self-stretch { align-self: stretch; } } @media (min-width: 1400px) { .lg\:align-self-stretch { align-self: stretch; } } @media (min-width: 576px) { .sm\:align-top { vertical-align: top; } } @media (min-width: 992px) { .md\:align-top { vertical-align: top; } } @media (min-width: 1400px) { .lg\:align-top { vertical-align: top; } } @media (min-width: 576px) { .sm\:align-bottom { vertical-align: bottom; } } @media (min-width: 992px) { .md\:align-bottom { vertical-align: bottom; } } @media (min-width: 1400px) { .lg\:align-bottom { vertical-align: bottom; } } @media (min-width: 576px) { .sm\:align-middle { vertical-align: middle; } } @media (min-width: 992px) { .md\:align-middle { vertical-align: middle; } } @media (min-width: 1400px) { .lg\:align-middle { vertical-align: middle; } } @media (min-width: 576px) { .sm\:item-first { order: -100; } } @media (min-width: 992px) { .md\:item-first { order: -100; } } @media (min-width: 1400px) { .lg\:item-first { order: -100; } } @media (min-width: 576px) { .sm\:item-last { order: 100; } } @media (min-width: 992px) { .md\:item-last { order: 100; } } @media (min-width: 1400px) { .lg\:item-last { order: 100; } } .is-unstyled { list-style: none; padding-left: 0; } .is-disabled, [disabled] { opacity: 0.6; cursor: not-allowed !important; filter: grayscale(1); } .text-normal { font-weight: normal; font-style: normal; text-transform: none; } @media (min-width: 576px) { .sm\:visually-hidden { position: absolute !important; border: 0 !important; height: 1px !important; width: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; } .sm\:is-unstyled { list-style: none; padding-left: 0; } .sm\:is-disabled { opacity: 0.6; cursor: not-allowed !important; filter: grayscale(1); } .sm\:text-normal { font-weight: normal; font-style: normal; text-transform: none; } } @media (min-width: 992px) { .md\:visually-hidden { position: absolute !important; border: 0 !important; height: 1px !important; width: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; } .md\:is-unstyled { list-style: none; padding-left: 0; } .md\:is-disabled { opacity: 0.6; cursor: not-allowed !important; filter: grayscale(1); } .md\:text-normal { font-weight: normal; font-style: normal; text-transform: none; } } @media (min-width: 1400px) { .lg\:visually-hidden { position: absolute !important; border: 0 !important; height: 1px !important; width: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; } .lg\:is-unstyled { list-style: none; padding-left: 0; } .lg\:is-disabled { opacity: 0.6; cursor: not-allowed !important; filter: grayscale(1); } .lg\:text-normal { font-weight: normal; font-style: normal; text-transform: none; } } /* Font sizes utility classes */ .text-10 { font-size: 0.625rem; } .text-11 { font-size: 0.6875rem; } .text-12 { font-size: 0.75rem; } .text-14 { font-size: 0.875rem; } .text-16 { font-size: 1rem; } .text-18 { font-size: 1.125rem; } .text-20 { font-size: 1.25rem; } .text-24 { font-size: 1.5rem; } .text-30 { font-size: 1.875rem; } .text-36 { font-size: 2.25rem; } .text-base { font-size: 1rem; } .text-inherit { font-size: inherit; } @media (min-width: 576px) { .sm\:text-10 { font-size: 0.625rem; } } @media (min-width: 992px) { .md\:text-10 { font-size: 0.625rem; } } @media (min-width: 1400px) { .lg\:text-10 { font-size: 0.625rem; } } @media (min-width: 576px) { .sm\:text-11 { font-size: 0.6875rem; } } @media (min-width: 992px) { .md\:text-11 { font-size: 0.6875rem; } } @media (min-width: 1400px) { .lg\:text-11 { font-size: 0.6875rem; } } @media (min-width: 576px) { .sm\:text-12 { font-size: 0.75rem; } } @media (min-width: 992px) { .md\:text-12 { font-size: 0.75rem; } } @media (min-width: 1400px) { .lg\:text-12 { font-size: 0.75rem; } } @media (min-width: 576px) { .sm\:text-14 { font-size: 0.875rem; } } @media (min-width: 992px) { .md\:text-14 { font-size: 0.875rem; } } @media (min-width: 1400px) { .lg\:text-14 { font-size: 0.875rem; } } @media (min-width: 576px) { .sm\:text-16 { font-size: 1rem; } } @media (min-width: 992px) { .md\:text-16 { font-size: 1rem; } } @media (min-width: 1400px) { .lg\:text-16 { font-size: 1rem; } } @media (min-width: 576px) { .sm\:text-18 { font-size: 1.125rem; } } @media (min-width: 992px) { .md\:text-18 { font-size: 1.125rem; } } @media (min-width: 1400px) { .lg\:text-18 { font-size: 1.125rem; } } @media (min-width: 576px) { .sm\:text-20 { font-size: 1.25rem; } } @media (min-width: 992px) { .md\:text-20 { font-size: 1.25rem; } } @media (min-width: 1400px) { .lg\:text-20 { font-size: 1.25rem; } } @media (min-width: 576px) { .sm\:text-24 { font-size: 1.5rem; } } @media (min-width: 992px) { .md\:text-24 { font-size: 1.5rem; } } @media (min-width: 1400px) { .lg\:text-24 { font-size: 1.5rem; } } @media (min-width: 576px) { .sm\:text-30 { font-size: 1.875rem; } } @media (min-width: 992px) { .md\:text-30 { font-size: 1.875rem; } } @media (min-width: 1400px) { .lg\:text-30 { font-size: 1.875rem; } } @media (min-width: 576px) { .sm\:text-36 { font-size: 2.25rem; } } @media (min-width: 992px) { .md\:text-36 { font-size: 2.25rem; } } @media (min-width: 1400px) { .lg\:text-36 { font-size: 2.25rem; } } @media (min-width: 576px) { .sm\:text-base { font-size: 1rem; } } @media (min-width: 992px) { .md\:text-base { font-size: 1rem; } } @media (min-width: 1400px) { .lg\:text-base { font-size: 1rem; } } @media (min-width: 576px) { .sm\:text-inherit { font-size: inherit; } } @media (min-width: 992px) { .md\:text-inherit { font-size: inherit; } } @media (min-width: 1400px) { .lg\:text-inherit { font-size: inherit; } } /* Spacers utility classes */ .p-0 { padding: 0; } .pt-0 { padding-top: 0; } .pr-0 { padding-right: 0; } .pb-0 { padding-bottom: 0; } .pl-0 { padding-left: 0; } .px-0 { padding-left: 0; padding-right: 0; } .py-0 { padding-top: 0; padding-bottom: 0; } .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mr-0 { margin-right: 0; } .mb-0 { margin-bottom: 0; } .ml-0 { margin-left: 0; } .mx-0 { margin-left: 0; margin-right: 0; } .my-0 { margin-top: 0; margin-bottom: 0; } @media (min-width: 576px) { .sm\:p-0 { padding: 0; } .sm\:pt-0 { padding-top: 0; } .sm\:pr-0 { padding-right: 0; } .sm\:pb-0 { padding-bottom: 0; } .sm\:pl-0 { padding-left: 0; } .sm\:px-0 { padding-left: 0; padding-right: 0; } .sm\:py-0 { padding-top: 0; padding-bottom: 0; } .sm\:m-0 { margin: 0; } .sm\:mt-0 { margin-top: 0; } .sm\:mr-0 { margin-right: 0; } .sm\:mb-0 { margin-bottom: 0; } .sm\:ml-0 { margin-left: 0; } .sm\:mx-0 { margin-left: 0; margin-right: 0; } .sm\:my-0 { margin-top: 0; margin-bottom: 0; } } @media (min-width: 992px) { .md\:p-0 { padding: 0; } .md\:pt-0 { padding-top: 0; } .md\:pr-0 { padding-right: 0; } .md\:pb-0 { padding-bottom: 0; } .md\:pl-0 { padding-left: 0; } .md\:px-0 { padding-left: 0; padding-right: 0; } .md\:py-0 { padding-top: 0; padding-bottom: 0; } .md\:m-0 { margin: 0; } .md\:mt-0 { margin-top: 0; } .md\:mr-0 { margin-right: 0; } .md\:mb-0 { margin-bottom: 0; } .md\:ml-0 { margin-left: 0; } .md\:mx-0 { margin-left: 0; margin-right: 0; } .md\:my-0 { margin-top: 0; margin-bottom: 0; } } @media (min-width: 1400px) { .lg\:p-0 { padding: 0; } .lg\:pt-0 { padding-top: 0; } .lg\:pr-0 { padding-right: 0; } .lg\:pb-0 { padding-bottom: 0; } .lg\:pl-0 { padding-left: 0; } .lg\:px-0 { padding-left: 0; padding-right: 0; } .lg\:py-0 { padding-top: 0; padding-bottom: 0; } .lg\:m-0 { margin: 0; } .lg\:mt-0 { margin-top: 0; } .lg\:mr-0 { margin-right: 0; } .lg\:mb-0 { margin-bottom: 0; } .lg\:ml-0 { margin-left: 0; } .lg\:mx-0 { margin-left: 0; margin-right: 0; } .lg\:my-0 { margin-top: 0; margin-bottom: 0; } } .p-2 { padding: 0.125rem; } .pt-2 { padding-top: 0.125rem; } .pr-2 { padding-right: 0.125rem; } .pb-2 { padding-bottom: 0.125rem; } .pl-2 { padding-left: 0.125rem; } .px-2 { padding-left: 0.125rem; padding-right: 0.125rem; } .py-2 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .m-2 { margin: 0.125rem; } .mt-2 { margin-top: 0.125rem; } .mr-2 { margin-right: 0.125rem; } .mb-2 { margin-bottom: 0.125rem; } .ml-2 { margin-left: 0.125rem; } .mx-2 { margin-left: 0.125rem; margin-right: 0.125rem; } .my-2 { margin-top: 0.125rem; margin-bottom: 0.125rem; } @media (min-width: 576px) { .sm\:p-2 { padding: 0.125rem; } .sm\:pt-2 { padding-top: 0.125rem; } .sm\:pr-2 { padding-right: 0.125rem; } .sm\:pb-2 { padding-bottom: 0.125rem; } .sm\:pl-2 { padding-left: 0.125rem; } .sm\:px-2 { padding-left: 0.125rem; padding-right: 0.125rem; } .sm\:py-2 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .sm\:m-2 { margin: 0.125rem; } .sm\:mt-2 { margin-top: 0.125rem; } .sm\:mr-2 { margin-right: 0.125rem; } .sm\:mb-2 { margin-bottom: 0.125rem; } .sm\:ml-2 { margin-left: 0.125rem; } .sm\:mx-2 { margin-left: 0.125rem; margin-right: 0.125rem; } .sm\:my-2 { margin-top: 0.125rem; margin-bottom: 0.125rem; } } @media (min-width: 992px) { .md\:p-2 { padding: 0.125rem; } .md\:pt-2 { padding-top: 0.125rem; } .md\:pr-2 { padding-right: 0.125rem; } .md\:pb-2 { padding-bottom: 0.125rem; } .md\:pl-2 { padding-left: 0.125rem; } .md\:px-2 { padding-left: 0.125rem; padding-right: 0.125rem; } .md\:py-2 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .md\:m-2 { margin: 0.125rem; } .md\:mt-2 { margin-top: 0.125rem; } .md\:mr-2 { margin-right: 0.125rem; } .md\:mb-2 { margin-bottom: 0.125rem; } .md\:ml-2 { margin-left: 0.125rem; } .md\:mx-2 { margin-left: 0.125rem; margin-right: 0.125rem; } .md\:my-2 { margin-top: 0.125rem; margin-bottom: 0.125rem; } } @media (min-width: 1400px) { .lg\:p-2 { padding: 0.125rem; } .lg\:pt-2 { padding-top: 0.125rem; } .lg\:pr-2 { padding-right: 0.125rem; } .lg\:pb-2 { padding-bottom: 0.125rem; } .lg\:pl-2 { padding-left: 0.125rem; } .lg\:px-2 { padding-left: 0.125rem; padding-right: 0.125rem; } .lg\:py-2 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .lg\:m-2 { margin: 0.125rem; } .lg\:mt-2 { margin-top: 0.125rem; } .lg\:mr-2 { margin-right: 0.125rem; } .lg\:mb-2 { margin-bottom: 0.125rem; } .lg\:ml-2 { margin-left: 0.125rem; } .lg\:mx-2 { margin-left: 0.125rem; margin-right: 0.125rem; } .lg\:my-2 { margin-top: 0.125rem; margin-bottom: 0.125rem; } } .p-5 { padding: 0.313rem; } .pt-5 { padding-top: 0.313rem; } .pr-5 { padding-right: 0.313rem; } .pb-5 { padding-bottom: 0.313rem; } .pl-5 { padding-left: 0.313rem; } .px-5 { padding-left: 0.313rem; padding-right: 0.313rem; } .py-5 { padding-top: 0.313rem; padding-bottom: 0.313rem; } .m-5 { margin: 0.313rem; } .mt-5 { margin-top: 0.313rem; } .mr-5 { margin-right: 0.313rem; } .mb-5 { margin-bottom: 0.313rem; } .ml-5 { margin-left: 0.313rem; } .mx-5 { margin-left: 0.313rem; margin-right: 0.313rem; } .my-5 { margin-top: 0.313rem; margin-bottom: 0.313rem; } @media (min-width: 576px) { .sm\:p-5 { padding: 0.313rem; } .sm\:pt-5 { padding-top: 0.313rem; } .sm\:pr-5 { padding-right: 0.313rem; } .sm\:pb-5 { padding-bottom: 0.313rem; } .sm\:pl-5 { padding-left: 0.313rem; } .sm\:px-5 { padding-left: 0.313rem; padding-right: 0.313rem; } .sm\:py-5 { padding-top: 0.313rem; padding-bottom: 0.313rem; } .sm\:m-5 { margin: 0.313rem; } .sm\:mt-5 { margin-top: 0.313rem; } .sm\:mr-5 { margin-right: 0.313rem; } .sm\:mb-5 { margin-bottom: 0.313rem; } .sm\:ml-5 { margin-left: 0.313rem; } .sm\:mx-5 { margin-left: 0.313rem; margin-right: 0.313rem; } .sm\:my-5 { margin-top: 0.313rem; margin-bottom: 0.313rem; } } @media (min-width: 992px) { .md\:p-5 { padding: 0.313rem; } .md\:pt-5 { padding-top: 0.313rem; } .md\:pr-5 { padding-right: 0.313rem; } .md\:pb-5 { padding-bottom: 0.313rem; } .md\:pl-5 { padding-left: 0.313rem; } .md\:px-5 { padding-left: 0.313rem; padding-right: 0.313rem; } .md\:py-5 { padding-top: 0.313rem; padding-bottom: 0.313rem; } .md\:m-5 { margin: 0.313rem; } .md\:mt-5 { margin-top: 0.313rem; } .md\:mr-5 { margin-right: 0.313rem; } .md\:mb-5 { margin-bottom: 0.313rem; } .md\:ml-5 { margin-left: 0.313rem; } .md\:mx-5 { margin-left: 0.313rem; margin-right: 0.313rem; } .md\:my-5 { margin-top: 0.313rem; margin-bottom: 0.313rem; } } @media (min-width: 1400px) { .lg\:p-5 { padding: 0.313rem; } .lg\:pt-5 { padding-top: 0.313rem; } .lg\:pr-5 { padding-right: 0.313rem; } .lg\:pb-5 { padding-bottom: 0.313rem; } .lg\:pl-5 { padding-left: 0.313rem; } .lg\:px-5 { padding-left: 0.313rem; padding-right: 0.313rem; } .lg\:py-5 { padding-top: 0.313rem; padding-bottom: 0.313rem; } .lg\:m-5 { margin: 0.313rem; } .lg\:mt-5 { margin-top: 0.313rem; } .lg\:mr-5 { margin-right: 0.313rem; } .lg\:mb-5 { margin-bottom: 0.313rem; } .lg\:ml-5 { margin-left: 0.313rem; } .lg\:mx-5 { margin-left: 0.313rem; margin-right: 0.313rem; } .lg\:my-5 { margin-top: 0.313rem; margin-bottom: 0.313rem; } } .p-8 { padding: 0.5rem; } .pt-8 { padding-top: 0.5rem; } .pr-8 { padding-right: 0.5rem; } .pb-8 { padding-bottom: 0.5rem; } .pl-8 { padding-left: 0.5rem; } .px-8 { padding-left: 0.5rem; padding-right: 0.5rem; } .py-8 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .m-8 { margin: 0.5rem; } .mt-8 { margin-top: 0.5rem; } .mr-8 { margin-right: 0.5rem; } .mb-8 { margin-bottom: 0.5rem; } .ml-8 { margin-left: 0.5rem; } .mx-8 { margin-left: 0.5rem; margin-right: 0.5rem; } .my-8 { margin-top: 0.5rem; margin-bottom: 0.5rem; } @media (min-width: 576px) { .sm\:p-8 { padding: 0.5rem; } .sm\:pt-8 { padding-top: 0.5rem; } .sm\:pr-8 { padding-right: 0.5rem; } .sm\:pb-8 { padding-bottom: 0.5rem; } .sm\:pl-8 { padding-left: 0.5rem; } .sm\:px-8 { padding-left: 0.5rem; padding-right: 0.5rem; } .sm\:py-8 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .sm\:m-8 { margin: 0.5rem; } .sm\:mt-8 { margin-top: 0.5rem; } .sm\:mr-8 { margin-right: 0.5rem; } .sm\:mb-8 { margin-bottom: 0.5rem; } .sm\:ml-8 { margin-left: 0.5rem; } .sm\:mx-8 { margin-left: 0.5rem; margin-right: 0.5rem; } .sm\:my-8 { margin-top: 0.5rem; margin-bottom: 0.5rem; } } @media (min-width: 992px) { .md\:p-8 { padding: 0.5rem; } .md\:pt-8 { padding-top: 0.5rem; } .md\:pr-8 { padding-right: 0.5rem; } .md\:pb-8 { padding-bottom: 0.5rem; } .md\:pl-8 { padding-left: 0.5rem; } .md\:px-8 { padding-left: 0.5rem; padding-right: 0.5rem; } .md\:py-8 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .md\:m-8 { margin: 0.5rem; } .md\:mt-8 { margin-top: 0.5rem; } .md\:mr-8 { margin-right: 0.5rem; } .md\:mb-8 { margin-bottom: 0.5rem; } .md\:ml-8 { margin-left: 0.5rem; } .md\:mx-8 { margin-left: 0.5rem; margin-right: 0.5rem; } .md\:my-8 { margin-top: 0.5rem; margin-bottom: 0.5rem; } } @media (min-width: 1400px) { .lg\:p-8 { padding: 0.5rem; } .lg\:pt-8 { padding-top: 0.5rem; } .lg\:pr-8 { padding-right: 0.5rem; } .lg\:pb-8 { padding-bottom: 0.5rem; } .lg\:pl-8 { padding-left: 0.5rem; } .lg\:px-8 { padding-left: 0.5rem; padding-right: 0.5rem; } .lg\:py-8 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .lg\:m-8 { margin: 0.5rem; } .lg\:mt-8 { margin-top: 0.5rem; } .lg\:mr-8 { margin-right: 0.5rem; } .lg\:mb-8 { margin-bottom: 0.5rem; } .lg\:ml-8 { margin-left: 0.5rem; } .lg\:mx-8 { margin-left: 0.5rem; margin-right: 0.5rem; } .lg\:my-8 { margin-top: 0.5rem; margin-bottom: 0.5rem; } } .p-10 { padding: 0.625rem; } .pt-10 { padding-top: 0.625rem; } .pr-10 { padding-right: 0.625rem; } .pb-10 { padding-bottom: 0.625rem; } .pl-10 { padding-left: 0.625rem; } .px-10 { padding-left: 0.625rem; padding-right: 0.625rem; } .py-10 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .m-10 { margin: 0.625rem; } .mt-10 { margin-top: 0.625rem; } .mr-10 { margin-right: 0.625rem; } .mb-10 { margin-bottom: 0.625rem; } .ml-10 { margin-left: 0.625rem; } .mx-10 { margin-left: 0.625rem; margin-right: 0.625rem; } .my-10 { margin-top: 0.625rem; margin-bottom: 0.625rem; } @media (min-width: 576px) { .sm\:p-10 { padding: 0.625rem; } .sm\:pt-10 { padding-top: 0.625rem; } .sm\:pr-10 { padding-right: 0.625rem; } .sm\:pb-10 { padding-bottom: 0.625rem; } .sm\:pl-10 { padding-left: 0.625rem; } .sm\:px-10 { padding-left: 0.625rem; padding-right: 0.625rem; } .sm\:py-10 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .sm\:m-10 { margin: 0.625rem; } .sm\:mt-10 { margin-top: 0.625rem; } .sm\:mr-10 { margin-right: 0.625rem; } .sm\:mb-10 { margin-bottom: 0.625rem; } .sm\:ml-10 { margin-left: 0.625rem; } .sm\:mx-10 { margin-left: 0.625rem; margin-right: 0.625rem; } .sm\:my-10 { margin-top: 0.625rem; margin-bottom: 0.625rem; } } @media (min-width: 992px) { .md\:p-10 { padding: 0.625rem; } .md\:pt-10 { padding-top: 0.625rem; } .md\:pr-10 { padding-right: 0.625rem; } .md\:pb-10 { padding-bottom: 0.625rem; } .md\:pl-10 { padding-left: 0.625rem; } .md\:px-10 { padding-left: 0.625rem; padding-right: 0.625rem; } .md\:py-10 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .md\:m-10 { margin: 0.625rem; } .md\:mt-10 { margin-top: 0.625rem; } .md\:mr-10 { margin-right: 0.625rem; } .md\:mb-10 { margin-bottom: 0.625rem; } .md\:ml-10 { margin-left: 0.625rem; } .md\:mx-10 { margin-left: 0.625rem; margin-right: 0.625rem; } .md\:my-10 { margin-top: 0.625rem; margin-bottom: 0.625rem; } } @media (min-width: 1400px) { .lg\:p-10 { padding: 0.625rem; } .lg\:pt-10 { padding-top: 0.625rem; } .lg\:pr-10 { padding-right: 0.625rem; } .lg\:pb-10 { padding-bottom: 0.625rem; } .lg\:pl-10 { padding-left: 0.625rem; } .lg\:px-10 { padding-left: 0.625rem; padding-right: 0.625rem; } .lg\:py-10 { padding-top: 0.625rem; padding-bottom: 0.625rem; } .lg\:m-10 { margin: 0.625rem; } .lg\:mt-10 { margin-top: 0.625rem; } .lg\:mr-10 { margin-right: 0.625rem; } .lg\:mb-10 { margin-bottom: 0.625rem; } .lg\:ml-10 { margin-left: 0.625rem; } .lg\:mx-10 { margin-left: 0.625rem; margin-right: 0.625rem; } .lg\:my-10 { margin-top: 0.625rem; margin-bottom: 0.625rem; } } .p-16 { padding: 1rem; } .pt-16 { padding-top: 1rem; } .pr-16 { padding-right: 1rem; } .pb-16 { padding-bottom: 1rem; } .pl-16 { padding-left: 1rem; } .px-16 { padding-left: 1rem; padding-right: 1rem; } .py-16 { padding-top: 1rem; padding-bottom: 1rem; } .m-16 { margin: 1rem; } .mt-16 { margin-top: 1rem; } .mr-16 { margin-right: 1rem; } .mb-16 { margin-bottom: 1rem; } .ml-16 { margin-left: 1rem; } .mx-16 { margin-left: 1rem; margin-right: 1rem; } .my-16 { margin-top: 1rem; margin-bottom: 1rem; } @media (min-width: 576px) { .sm\:p-16 { padding: 1rem; } .sm\:pt-16 { padding-top: 1rem; } .sm\:pr-16 { padding-right: 1rem; } .sm\:pb-16 { padding-bottom: 1rem; } .sm\:pl-16 { padding-left: 1rem; } .sm\:px-16 { padding-left: 1rem; padding-right: 1rem; } .sm\:py-16 { padding-top: 1rem; padding-bottom: 1rem; } .sm\:m-16 { margin: 1rem; } .sm\:mt-16 { margin-top: 1rem; } .sm\:mr-16 { margin-right: 1rem; } .sm\:mb-16 { margin-bottom: 1rem; } .sm\:ml-16 { margin-left: 1rem; } .sm\:mx-16 { margin-left: 1rem; margin-right: 1rem; } .sm\:my-16 { margin-top: 1rem; margin-bottom: 1rem; } } @media (min-width: 992px) { .md\:p-16 { padding: 1rem; } .md\:pt-16 { padding-top: 1rem; } .md\:pr-16 { padding-right: 1rem; } .md\:pb-16 { padding-bottom: 1rem; } .md\:pl-16 { padding-left: 1rem; } .md\:px-16 { padding-left: 1rem; padding-right: 1rem; } .md\:py-16 { padding-top: 1rem; padding-bottom: 1rem; } .md\:m-16 { margin: 1rem; } .md\:mt-16 { margin-top: 1rem; } .md\:mr-16 { margin-right: 1rem; } .md\:mb-16 { margin-bottom: 1rem; } .md\:ml-16 { margin-left: 1rem; } .md\:mx-16 { margin-left: 1rem; margin-right: 1rem; } .md\:my-16 { margin-top: 1rem; margin-bottom: 1rem; } } @media (min-width: 1400px) { .lg\:p-16 { padding: 1rem; } .lg\:pt-16 { padding-top: 1rem; } .lg\:pr-16 { padding-right: 1rem; } .lg\:pb-16 { padding-bottom: 1rem; } .lg\:pl-16 { padding-left: 1rem; } .lg\:px-16 { padding-left: 1rem; padding-right: 1rem; } .lg\:py-16 { padding-top: 1rem; padding-bottom: 1rem; } .lg\:m-16 { margin: 1rem; } .lg\:mt-16 { margin-top: 1rem; } .lg\:mr-16 { margin-right: 1rem; } .lg\:mb-16 { margin-bottom: 1rem; } .lg\:ml-16 { margin-left: 1rem; } .lg\:mx-16 { margin-left: 1rem; margin-right: 1rem; } .lg\:my-16 { margin-top: 1rem; margin-bottom: 1rem; } } .p-20 { padding: 1.25rem; } .pt-20 { padding-top: 1.25rem; } .pr-20 { padding-right: 1.25rem; } .pb-20 { padding-bottom: 1.25rem; } .pl-20 { padding-left: 1.25rem; } .px-20 { padding-left: 1.25rem; padding-right: 1.25rem; } .py-20 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .m-20 { margin: 1.25rem; } .mt-20 { margin-top: 1.25rem; } .mr-20 { margin-right: 1.25rem; } .mb-20 { margin-bottom: 1.25rem; } .ml-20 { margin-left: 1.25rem; } .mx-20 { margin-left: 1.25rem; margin-right: 1.25rem; } .my-20 { margin-top: 1.25rem; margin-bottom: 1.25rem; } @media (min-width: 576px) { .sm\:p-20 { padding: 1.25rem; } .sm\:pt-20 { padding-top: 1.25rem; } .sm\:pr-20 { padding-right: 1.25rem; } .sm\:pb-20 { padding-bottom: 1.25rem; } .sm\:pl-20 { padding-left: 1.25rem; } .sm\:px-20 { padding-left: 1.25rem; padding-right: 1.25rem; } .sm\:py-20 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .sm\:m-20 { margin: 1.25rem; } .sm\:mt-20 { margin-top: 1.25rem; } .sm\:mr-20 { margin-right: 1.25rem; } .sm\:mb-20 { margin-bottom: 1.25rem; } .sm\:ml-20 { margin-left: 1.25rem; } .sm\:mx-20 { margin-left: 1.25rem; margin-right: 1.25rem; } .sm\:my-20 { margin-top: 1.25rem; margin-bottom: 1.25rem; } } @media (min-width: 992px) { .md\:p-20 { padding: 1.25rem; } .md\:pt-20 { padding-top: 1.25rem; } .md\:pr-20 { padding-right: 1.25rem; } .md\:pb-20 { padding-bottom: 1.25rem; } .md\:pl-20 { padding-left: 1.25rem; } .md\:px-20 { padding-left: 1.25rem; padding-right: 1.25rem; } .md\:py-20 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .md\:m-20 { margin: 1.25rem; } .md\:mt-20 { margin-top: 1.25rem; } .md\:mr-20 { margin-right: 1.25rem; } .md\:mb-20 { margin-bottom: 1.25rem; } .md\:ml-20 { margin-left: 1.25rem; } .md\:mx-20 { margin-left: 1.25rem; margin-right: 1.25rem; } .md\:my-20 { margin-top: 1.25rem; margin-bottom: 1.25rem; } } @media (min-width: 1400px) { .lg\:p-20 { padding: 1.25rem; } .lg\:pt-20 { padding-top: 1.25rem; } .lg\:pr-20 { padding-right: 1.25rem; } .lg\:pb-20 { padding-bottom: 1.25rem; } .lg\:pl-20 { padding-left: 1.25rem; } .lg\:px-20 { padding-left: 1.25rem; padding-right: 1.25rem; } .lg\:py-20 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .lg\:m-20 { margin: 1.25rem; } .lg\:mt-20 { margin-top: 1.25rem; } .lg\:mr-20 { margin-right: 1.25rem; } .lg\:mb-20 { margin-bottom: 1.25rem; } .lg\:ml-20 { margin-left: 1.25rem; } .lg\:mx-20 { margin-left: 1.25rem; margin-right: 1.25rem; } .lg\:my-20 { margin-top: 1.25rem; margin-bottom: 1.25rem; } } .p-24 { padding: 1.5rem; } .pt-24 { padding-top: 1.5rem; } .pr-24 { padding-right: 1.5rem; } .pb-24 { padding-bottom: 1.5rem; } .pl-24 { padding-left: 1.5rem; } .px-24 { padding-left: 1.5rem; padding-right: 1.5rem; } .py-24 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .m-24 { margin: 1.5rem; } .mt-24 { margin-top: 1.5rem; } .mr-24 { margin-right: 1.5rem; } .mb-24 { margin-bottom: 1.5rem; } .ml-24 { margin-left: 1.5rem; } .mx-24 { margin-left: 1.5rem; margin-right: 1.5rem; } .my-24 { margin-top: 1.5rem; margin-bottom: 1.5rem; } @media (min-width: 576px) { .sm\:p-24 { padding: 1.5rem; } .sm\:pt-24 { padding-top: 1.5rem; } .sm\:pr-24 { padding-right: 1.5rem; } .sm\:pb-24 { padding-bottom: 1.5rem; } .sm\:pl-24 { padding-left: 1.5rem; } .sm\:px-24 { padding-left: 1.5rem; padding-right: 1.5rem; } .sm\:py-24 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .sm\:m-24 { margin: 1.5rem; } .sm\:mt-24 { margin-top: 1.5rem; } .sm\:mr-24 { margin-right: 1.5rem; } .sm\:mb-24 { margin-bottom: 1.5rem; } .sm\:ml-24 { margin-left: 1.5rem; } .sm\:mx-24 { margin-left: 1.5rem; margin-right: 1.5rem; } .sm\:my-24 { margin-top: 1.5rem; margin-bottom: 1.5rem; } } @media (min-width: 992px) { .md\:p-24 { padding: 1.5rem; } .md\:pt-24 { padding-top: 1.5rem; } .md\:pr-24 { padding-right: 1.5rem; } .md\:pb-24 { padding-bottom: 1.5rem; } .md\:pl-24 { padding-left: 1.5rem; } .md\:px-24 { padding-left: 1.5rem; padding-right: 1.5rem; } .md\:py-24 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .md\:m-24 { margin: 1.5rem; } .md\:mt-24 { margin-top: 1.5rem; } .md\:mr-24 { margin-right: 1.5rem; } .md\:mb-24 { margin-bottom: 1.5rem; } .md\:ml-24 { margin-left: 1.5rem; } .md\:mx-24 { margin-left: 1.5rem; margin-right: 1.5rem; } .md\:my-24 { margin-top: 1.5rem; margin-bottom: 1.5rem; } } @media (min-width: 1400px) { .lg\:p-24 { padding: 1.5rem; } .lg\:pt-24 { padding-top: 1.5rem; } .lg\:pr-24 { padding-right: 1.5rem; } .lg\:pb-24 { padding-bottom: 1.5rem; } .lg\:pl-24 { padding-left: 1.5rem; } .lg\:px-24 { padding-left: 1.5rem; padding-right: 1.5rem; } .lg\:py-24 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .lg\:m-24 { margin: 1.5rem; } .lg\:mt-24 { margin-top: 1.5rem; } .lg\:mr-24 { margin-right: 1.5rem; } .lg\:mb-24 { margin-bottom: 1.5rem; } .lg\:ml-24 { margin-left: 1.5rem; } .lg\:mx-24 { margin-left: 1.5rem; margin-right: 1.5rem; } .lg\:my-24 { margin-top: 1.5rem; margin-bottom: 1.5rem; } } .p-36 { padding: 2.25rem; } .pt-36 { padding-top: 2.25rem; } .pr-36 { padding-right: 2.25rem; } .pb-36 { padding-bottom: 2.25rem; } .pl-36 { padding-left: 2.25rem; } .px-36 { padding-left: 2.25rem; padding-right: 2.25rem; } .py-36 { padding-top: 2.25rem; padding-bottom: 2.25rem; } .m-36 { margin: 2.25rem; } .mt-36 { margin-top: 2.25rem; } .mr-36 { margin-right: 2.25rem; } .mb-36 { margin-bottom: 2.25rem; } .ml-36 { margin-left: 2.25rem; } .mx-36 { margin-left: 2.25rem; margin-right: 2.25rem; } .my-36 { margin-top: 2.25rem; margin-bottom: 2.25rem; } @media (min-width: 576px) { .sm\:p-36 { padding: 2.25rem; } .sm\:pt-36 { padding-top: 2.25rem; } .sm\:pr-36 { padding-right: 2.25rem; } .sm\:pb-36 { padding-bottom: 2.25rem; } .sm\:pl-36 { padding-left: 2.25rem; } .sm\:px-36 { padding-left: 2.25rem; padding-right: 2.25rem; } .sm\:py-36 { padding-top: 2.25rem; padding-bottom: 2.25rem; } .sm\:m-36 { margin: 2.25rem; } .sm\:mt-36 { margin-top: 2.25rem; } .sm\:mr-36 { margin-right: 2.25rem; } .sm\:mb-36 { margin-bottom: 2.25rem; } .sm\:ml-36 { margin-left: 2.25rem; } .sm\:mx-36 { margin-left: 2.25rem; margin-right: 2.25rem; } .sm\:my-36 { margin-top: 2.25rem; margin-bottom: 2.25rem; } } @media (min-width: 992px) { .md\:p-36 { padding: 2.25rem; } .md\:pt-36 { padding-top: 2.25rem; } .md\:pr-36 { padding-right: 2.25rem; } .md\:pb-36 { padding-bottom: 2.25rem; } .md\:pl-36 { padding-left: 2.25rem; } .md\:px-36 { padding-left: 2.25rem; padding-right: 2.25rem; } .md\:py-36 { padding-top: 2.25rem; padding-bottom: 2.25rem; } .md\:m-36 { margin: 2.25rem; } .md\:mt-36 { margin-top: 2.25rem; } .md\:mr-36 { margin-right: 2.25rem; } .md\:mb-36 { margin-bottom: 2.25rem; } .md\:ml-36 { margin-left: 2.25rem; } .md\:mx-36 { margin-left: 2.25rem; margin-right: 2.25rem; } .md\:my-36 { margin-top: 2.25rem; margin-bottom: 2.25rem; } } @media (min-width: 1400px) { .lg\:p-36 { padding: 2.25rem; } .lg\:pt-36 { padding-top: 2.25rem; } .lg\:pr-36 { padding-right: 2.25rem; } .lg\:pb-36 { padding-bottom: 2.25rem; } .lg\:pl-36 { padding-left: 2.25rem; } .lg\:px-36 { padding-left: 2.25rem; padding-right: 2.25rem; } .lg\:py-36 { padding-top: 2.25rem; padding-bottom: 2.25rem; } .lg\:m-36 { margin: 2.25rem; } .lg\:mt-36 { margin-top: 2.25rem; } .lg\:mr-36 { margin-right: 2.25rem; } .lg\:mb-36 { margin-bottom: 2.25rem; } .lg\:ml-36 { margin-left: 2.25rem; } .lg\:mx-36 { margin-left: 2.25rem; margin-right: 2.25rem; } .lg\:my-36 { margin-top: 2.25rem; margin-bottom: 2.25rem; } } .p-auto { padding: auto; } .pt-auto { padding-top: auto; } .pr-auto { padding-right: auto; } .pb-auto { padding-bottom: auto; } .pl-auto { padding-left: auto; } .px-auto { padding-left: auto; padding-right: auto; } .py-auto { padding-top: auto; padding-bottom: auto; } .m-auto { margin: auto; } .mt-auto { margin-top: auto; } .mr-auto { margin-right: auto; } .mb-auto { margin-bottom: auto; } .ml-auto { margin-left: auto; } .mx-auto { margin-left: auto; margin-right: auto; } .my-auto { margin-top: auto; margin-bottom: auto; } @media (min-width: 576px) { .sm\:p-auto { padding: auto; } .sm\:pt-auto { padding-top: auto; } .sm\:pr-auto { padding-right: auto; } .sm\:pb-auto { padding-bottom: auto; } .sm\:pl-auto { padding-left: auto; } .sm\:px-auto { padding-left: auto; padding-right: auto; } .sm\:py-auto { padding-top: auto; padding-bottom: auto; } .sm\:m-auto { margin: auto; } .sm\:mt-auto { margin-top: auto; } .sm\:mr-auto { margin-right: auto; } .sm\:mb-auto { margin-bottom: auto; } .sm\:ml-auto { margin-left: auto; } .sm\:mx-auto { margin-left: auto; margin-right: auto; } .sm\:my-auto { margin-top: auto; margin-bottom: auto; } } @media (min-width: 992px) { .md\:p-auto { padding: auto; } .md\:pt-auto { padding-top: auto; } .md\:pr-auto { padding-right: auto; } .md\:pb-auto { padding-bottom: auto; } .md\:pl-auto { padding-left: auto; } .md\:px-auto { padding-left: auto; padding-right: auto; } .md\:py-auto { padding-top: auto; padding-bottom: auto; } .md\:m-auto { margin: auto; } .md\:mt-auto { margin-top: auto; } .md\:mr-auto { margin-right: auto; } .md\:mb-auto { margin-bottom: auto; } .md\:ml-auto { margin-left: auto; } .md\:mx-auto { margin-left: auto; margin-right: auto; } .md\:my-auto { margin-top: auto; margin-bottom: auto; } } @media (min-width: 1400px) { .lg\:p-auto { padding: auto; } .lg\:pt-auto { padding-top: auto; } .lg\:pr-auto { padding-right: auto; } .lg\:pb-auto { padding-bottom: auto; } .lg\:pl-auto { padding-left: auto; } .lg\:px-auto { padding-left: auto; padding-right: auto; } .lg\:py-auto { padding-top: auto; padding-bottom: auto; } .lg\:m-auto { margin: auto; } .lg\:mt-auto { margin-top: auto; } .lg\:mr-auto { margin-right: auto; } .lg\:mb-auto { margin-bottom: auto; } .lg\:ml-auto { margin-left: auto; } .lg\:mx-auto { margin-left: auto; margin-right: auto; } .lg\:my-auto { margin-top: auto; margin-bottom: auto; } } /* -------------------------------------------------- */ /* ==Grillade : système de micro-grille de KNACSS */ /* ------------------------------------------------ */ .grid { display: grid; } @media (min-width: 576px) { .sm\:grid { display: grid; } } @media (min-width: 992px) { .md\:grid { display: grid; } } @media (min-width: 1400px) { .lg\:grid { display: grid; } } /* grid-template-columns initialisation */ .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* grid-template-columns au sein des breakpoints */ @media (min-width: 576px) { .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 992px) { .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (min-width: 1400px) { .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* gap initialisation */ .gap-0 { gap: 0; } .gap-x-0 { column-gap: 0; } .gap-y-0 { row-gap: 0; } .gap-5 { gap: 0.313rem; } .gap-x-5 { column-gap: 0.313rem; } .gap-y-5 { row-gap: 0.313rem; } .gap-10 { gap: 0.625rem; } .gap-x-10 { column-gap: 0.625rem; } .gap-y-10 { row-gap: 0.625rem; } .gap-16 { gap: 1rem; } .gap-x-16 { column-gap: 1rem; } .gap-y-16 { row-gap: 1rem; } .gap-20 { gap: 1.25rem; } .gap-x-20 { column-gap: 1.25rem; } .gap-y-20 { row-gap: 1.25rem; } .gap-36 { gap: 2.25rem; } .gap-x-36 { column-gap: 2.25rem; } .gap-y-36 { row-gap: 2.25rem; } /* gap au sein des breakpoints */ @media (min-width: 576px) { .sm\:gap-0 { gap: 0; } .sm\:gap-x-0 { column-gap: 0; } .sm\:gap-y-0 { row-gap: 0; } .sm\:gap-5 { gap: 0.313rem; } .sm\:gap-x-5 { column-gap: 0.313rem; } .sm\:gap-y-5 { row-gap: 0.313rem; } .sm\:gap-10 { gap: 0.625rem; } .sm\:gap-x-10 { column-gap: 0.625rem; } .sm\:gap-y-10 { row-gap: 0.625rem; } .sm\:gap-16 { gap: 1rem; } .sm\:gap-x-16 { column-gap: 1rem; } .sm\:gap-y-16 { row-gap: 1rem; } .sm\:gap-20 { gap: 1.25rem; } .sm\:gap-x-20 { column-gap: 1.25rem; } .sm\:gap-y-20 { row-gap: 1.25rem; } .sm\:gap-36 { gap: 2.25rem; } .sm\:gap-x-36 { column-gap: 2.25rem; } .sm\:gap-y-36 { row-gap: 2.25rem; } } @media (min-width: 992px) { .md\:gap-0 { gap: 0; } .md\:gap-x-0 { column-gap: 0; } .md\:gap-y-0 { row-gap: 0; } .md\:gap-5 { gap: 0.313rem; } .md\:gap-x-5 { column-gap: 0.313rem; } .md\:gap-y-5 { row-gap: 0.313rem; } .md\:gap-10 { gap: 0.625rem; } .md\:gap-x-10 { column-gap: 0.625rem; } .md\:gap-y-10 { row-gap: 0.625rem; } .md\:gap-16 { gap: 1rem; } .md\:gap-x-16 { column-gap: 1rem; } .md\:gap-y-16 { row-gap: 1rem; } .md\:gap-20 { gap: 1.25rem; } .md\:gap-x-20 { column-gap: 1.25rem; } .md\:gap-y-20 { row-gap: 1.25rem; } .md\:gap-36 { gap: 2.25rem; } .md\:gap-x-36 { column-gap: 2.25rem; } .md\:gap-y-36 { row-gap: 2.25rem; } } @media (min-width: 1400px) { .lg\:gap-0 { gap: 0; } .lg\:gap-x-0 { column-gap: 0; } .lg\:gap-y-0 { row-gap: 0; } .lg\:gap-5 { gap: 0.313rem; } .lg\:gap-x-5 { column-gap: 0.313rem; } .lg\:gap-y-5 { row-gap: 0.313rem; } .lg\:gap-10 { gap: 0.625rem; } .lg\:gap-x-10 { column-gap: 0.625rem; } .lg\:gap-y-10 { row-gap: 0.625rem; } .lg\:gap-16 { gap: 1rem; } .lg\:gap-x-16 { column-gap: 1rem; } .lg\:gap-y-16 { row-gap: 1rem; } .lg\:gap-20 { gap: 1.25rem; } .lg\:gap-x-20 { column-gap: 1.25rem; } .lg\:gap-y-20 { row-gap: 1.25rem; } .lg\:gap-36 { gap: 2.25rem; } .lg\:gap-x-36 { column-gap: 2.25rem; } .lg\:gap-y-36 { row-gap: 2.25rem; } } /* grid-items initialisation */ .col-start-1 { grid-column-start: 1; } .col-end-1 { grid-column-end: 1; } .col-span-1 { grid-column: span 1 / span 1; } .col-span-full { grid-column: 1 / -1; } .row-start-1 { grid-row-start: 1; } .row-end-1 { grid-row-end: 1; } .row-span-1 { grid-row: span 1 / span 1; } .col-start-2 { grid-column-start: 2; } .col-end-2 { grid-column-end: 2; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-full { grid-column: 1 / -1; } .row-start-2 { grid-row-start: 2; } .row-end-2 { grid-row-end: 2; } .row-span-2 { grid-row: span 2 / span 2; } .col-start-3 { grid-column-start: 3; } .col-end-3 { grid-column-end: 3; } .col-span-3 { grid-column: span 3 / span 3; } .col-span-full { grid-column: 1 / -1; } .row-start-3 { grid-row-start: 3; } .row-end-3 { grid-row-end: 3; } .row-span-3 { grid-row: span 3 / span 3; } .col-start-4 { grid-column-start: 4; } .col-end-4 { grid-column-end: 4; } .col-span-4 { grid-column: span 4 / span 4; } .col-span-full { grid-column: 1 / -1; } .row-start-4 { grid-row-start: 4; } .row-end-4 { grid-row-end: 4; } .row-span-4 { grid-row: span 4 / span 4; } .col-start-5 { grid-column-start: 5; } .col-end-5 { grid-column-end: 5; } .col-span-5 { grid-column: span 5 / span 5; } .col-span-full { grid-column: 1 / -1; } .row-start-5 { grid-row-start: 5; } .row-end-5 { grid-row-end: 5; } .row-span-5 { grid-row: span 5 / span 5; } .col-start-6 { grid-column-start: 6; } .col-end-6 { grid-column-end: 6; } .col-span-6 { grid-column: span 6 / span 6; } .col-span-full { grid-column: 1 / -1; } .row-start-6 { grid-row-start: 6; } .row-end-6 { grid-row-end: 6; } .row-span-6 { grid-row: span 6 / span 6; } /* grid-items au sein des breakpoints */ @media (min-width: 576px) { .sm\:col-start-1 { grid-column-start: 1; } .sm\:col-end-1 { grid-column-end: 1; } .sm\:col-span-1 { grid-column: span 1 / span 1; } .sm\:col-span-full { grid-column: 1 / -1; } .sm\:row-start-1 { grid-row-start: 1; } .sm\:row-end-1 { grid-row-end: 1; } .sm\:row-span-1 { grid-row: span 1 / span 1; } .sm\:col-start-2 { grid-column-start: 2; } .sm\:col-end-2 { grid-column-end: 2; } .sm\:col-span-2 { grid-column: span 2 / span 2; } .sm\:col-span-full { grid-column: 1 / -1; } .sm\:row-start-2 { grid-row-start: 2; } .sm\:row-end-2 { grid-row-end: 2; } .sm\:row-span-2 { grid-row: span 2 / span 2; } .sm\:col-start-3 { grid-column-start: 3; } .sm\:col-end-3 { grid-column-end: 3; } .sm\:col-span-3 { grid-column: span 3 / span 3; } .sm\:col-span-full { grid-column: 1 / -1; } .sm\:row-start-3 { grid-row-start: 3; } .sm\:row-end-3 { grid-row-end: 3; } .sm\:row-span-3 { grid-row: span 3 / span 3; } .sm\:col-start-4 { grid-column-start: 4; } .sm\:col-end-4 { grid-column-end: 4; } .sm\:col-span-4 { grid-column: span 4 / span 4; } .sm\:col-span-full { grid-column: 1 / -1; } .sm\:row-start-4 { grid-row-start: 4; } .sm\:row-end-4 { grid-row-end: 4; } .sm\:row-span-4 { grid-row: span 4 / span 4; } .sm\:col-start-5 { grid-column-start: 5; } .sm\:col-end-5 { grid-column-end: 5; } .sm\:col-span-5 { grid-column: span 5 / span 5; } .sm\:col-span-full { grid-column: 1 / -1; } .sm\:row-start-5 { grid-row-start: 5; } .sm\:row-end-5 { grid-row-end: 5; } .sm\:row-span-5 { grid-row: span 5 / span 5; } .sm\:col-start-6 { grid-column-start: 6; } .sm\:col-end-6 { grid-column-end: 6; } .sm\:col-span-6 { grid-column: span 6 / span 6; } .sm\:col-span-full { grid-column: 1 / -1; } .sm\:row-start-6 { grid-row-start: 6; } .sm\:row-end-6 { grid-row-end: 6; } .sm\:row-span-6 { grid-row: span 6 / span 6; } } @media (min-width: 992px) { .md\:col-start-1 { grid-column-start: 1; } .md\:col-end-1 { grid-column-end: 1; } .md\:col-span-1 { grid-column: span 1 / span 1; } .md\:col-span-full { grid-column: 1 / -1; } .md\:row-start-1 { grid-row-start: 1; } .md\:row-end-1 { grid-row-end: 1; } .md\:row-span-1 { grid-row: span 1 / span 1; } .md\:col-start-2 { grid-column-start: 2; } .md\:col-end-2 { grid-column-end: 2; } .md\:col-span-2 { grid-column: span 2 / span 2; } .md\:col-span-full { grid-column: 1 / -1; } .md\:row-start-2 { grid-row-start: 2; } .md\:row-end-2 { grid-row-end: 2; } .md\:row-span-2 { grid-row: span 2 / span 2; } .md\:col-start-3 { grid-column-start: 3; } .md\:col-end-3 { grid-column-end: 3; } .md\:col-span-3 { grid-column: span 3 / span 3; } .md\:col-span-full { grid-column: 1 / -1; } .md\:row-start-3 { grid-row-start: 3; } .md\:row-end-3 { grid-row-end: 3; } .md\:row-span-3 { grid-row: span 3 / span 3; } .md\:col-start-4 { grid-column-start: 4; } .md\:col-end-4 { grid-column-end: 4; } .md\:col-span-4 { grid-column: span 4 / span 4; } .md\:col-span-full { grid-column: 1 / -1; } .md\:row-start-4 { grid-row-start: 4; } .md\:row-end-4 { grid-row-end: 4; } .md\:row-span-4 { grid-row: span 4 / span 4; } .md\:col-start-5 { grid-column-start: 5; } .md\:col-end-5 { grid-column-end: 5; } .md\:col-span-5 { grid-column: span 5 / span 5; } .md\:col-span-full { grid-column: 1 / -1; } .md\:row-start-5 { grid-row-start: 5; } .md\:row-end-5 { grid-row-end: 5; } .md\:row-span-5 { grid-row: span 5 / span 5; } .md\:col-start-6 { grid-column-start: 6; } .md\:col-end-6 { grid-column-end: 6; } .md\:col-span-6 { grid-column: span 6 / span 6; } .md\:col-span-full { grid-column: 1 / -1; } .md\:row-start-6 { grid-row-start: 6; } .md\:row-end-6 { grid-row-end: 6; } .md\:row-span-6 { grid-row: span 6 / span 6; } } @media (min-width: 1400px) { .lg\:col-start-1 { grid-column-start: 1; } .lg\:col-end-1 { grid-column-end: 1; } .lg\:col-span-1 { grid-column: span 1 / span 1; } .lg\:col-span-full { grid-column: 1 / -1; } .lg\:row-start-1 { grid-row-start: 1; } .lg\:row-end-1 { grid-row-end: 1; } .lg\:row-span-1 { grid-row: span 1 / span 1; } .lg\:col-start-2 { grid-column-start: 2; } .lg\:col-end-2 { grid-column-end: 2; } .lg\:col-span-2 { grid-column: span 2 / span 2; } .lg\:col-span-full { grid-column: 1 / -1; } .lg\:row-start-2 { grid-row-start: 2; } .lg\:row-end-2 { grid-row-end: 2; } .lg\:row-span-2 { grid-row: span 2 / span 2; } .lg\:col-start-3 { grid-column-start: 3; } .lg\:col-end-3 { grid-column-end: 3; } .lg\:col-span-3 { grid-column: span 3 / span 3; } .lg\:col-span-full { grid-column: 1 / -1; } .lg\:row-start-3 { grid-row-start: 3; } .lg\:row-end-3 { grid-row-end: 3; } .lg\:row-span-3 { grid-row: span 3 / span 3; } .lg\:col-start-4 { grid-column-start: 4; } .lg\:col-end-4 { grid-column-end: 4; } .lg\:col-span-4 { grid-column: span 4 / span 4; } .lg\:col-span-full { grid-column: 1 / -1; } .lg\:row-start-4 { grid-row-start: 4; } .lg\:row-end-4 { grid-row-end: 4; } .lg\:row-span-4 { grid-row: span 4 / span 4; } .lg\:col-start-5 { grid-column-start: 5; } .lg\:col-end-5 { grid-column-end: 5; } .lg\:col-span-5 { grid-column: span 5 / span 5; } .lg\:col-span-full { grid-column: 1 / -1; } .lg\:row-start-5 { grid-row-start: 5; } .lg\:row-end-5 { grid-row-end: 5; } .lg\:row-span-5 { grid-row: span 5 / span 5; } .lg\:col-start-6 { grid-column-start: 6; } .lg\:col-end-6 { grid-column-end: 6; } .lg\:col-span-6 { grid-column: span 6 / span 6; } .lg\:col-span-full { grid-column: 1 / -1; } .lg\:row-start-6 { grid-row-start: 6; } .lg\:row-end-6 { grid-row-end: 6; } .lg\:row-span-6 { grid-row: span 6 / span 6; } } /* custom CAGULL CSS */ body { background-color: #eee; } main { background-color: #fff; } h2 { margin-top: 1.5em; border-top: thin solid currentColor; padding-top: 0.5em; } nav>a[href="canary.html"]>img { height: 1.5em; width: auto; }