itcss/main.css

CSS starter boilerplate based on the ITCSS pattern

/* Document
 * ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 */
:where(html) {
  line-height: 1.15; /* 1 */
}
/* Sections
 * ========================================================================== */
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */
:where(h1) {
  font-size: 2em;
  -webkit-margin-after: 0.67em;
          margin-block-end: 0.67em;
  -webkit-margin-before: 0.67em;
          margin-block-start: 0.67em;
}
/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */
:where(dl, ol, ul) :where(dl, ol, ul) {
  -webkit-margin-after: 0;
          margin-block-end: 0;
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Correct the inheritance of border color in Firefox.
 */
:where(hr) {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  color: inherit; /* 2 */
  height: 0; /* 1 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Safari.
 */
:where(abbr[title]) {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
:where(b, strong) {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
:where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
:where(small) {
  font-size: 80%;
}
/* Tabular data
 * ========================================================================== */
/**
 * 1. Correct table border color in Chrome, Edge, and Safari.
 * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */
:where(table) {
  border-color: currentColor; /* 1 */
  text-indent: 0; /* 2 */
}
/* Forms
 * ========================================================================== */
/**
 * Remove the margin on controls in Safari.
 */
:where(button, input, select) {
  margin: 0;
}
/**
 * Remove the inheritance of text transform in Firefox.
 */
:where(button) {
  text-transform: none;
}
/**
 * Correct the inability to style buttons in iOS and Safari.
 */
:where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {
  -webkit-appearance: button;
}
/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
:where(progress) {
  vertical-align: baseline;
}
/**
 * Remove the inheritance of text transform in Firefox.
 */
:where(select) {
  text-transform: none;
}
/**
 * Remove the margin in Firefox and Safari.
 */
:where(textarea) {
  margin: 0;
}
/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */
:where(input[type="search" i]) {
  -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.
 */
:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */
:where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Remove the additional :invalid styles in Firefox.
 */
:where(:-moz-ui-invalid) {
  box-shadow: none;
}
/* Interactive
 * ========================================================================== */
/*
 * Add the correct styles in Safari.
 */
:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}
:where(dialog:not([open])) {
  display: none;
}
/*
 * Add the correct display in all browsers.
 */
:where(summary) {
  display: list-item;
}
:root {
	--font-sans-serif: sans-serif;
	--font-serif: serif;
	--font-monospace: monospace;
	--font-size-base: 1rem;
	--line-height-base: 1.35;
	--font-size-h1: 2rem;
	--font-size-h2: 1.75rem;
	--font-size-h3: 1.5rem;
	--font-size-h4: 1.25rem;
	--font-size-h5: var(--font-size-base);
	--font-size-h6: 0.75rem;
}
:root {
	--color-base: #333;
	--color-primary: #fff;
	--color-secondary: #000;
	--color-action: #ef4c23;
}
@media (prefers-color-scheme: light) {
	:root {
		--color-base: #ccc;
		--color-primary: #000;
		--color-secondary: #fff;
		--color-action: #ef4c23;
	}
}
:root {
	--gap: 0.5rem;
	--columns: 12;
	--shell-gap: 1rem;
	--shell-width: 75rem;
	--breakpoints: (xs, sm, md, lg, xl);
	--displays: (block, inline, inline-block, flex, inline-flex);
	--alignments: (center: center, right: right, left: left, justify: justify);
}
:root {
	--timing: 0.4s;
	--easing: ease-in-out;
}
.hidden, [hidden] {
	display: none !important;
}
/* @usage: @mixin chevron 2rem, 0 0 1px 1px, $color-secondary, -5px 0 0 0.5em, -135deg; */
/* prettier-ignore */
*, *::before, *::after {
	-webkit-box-sizing: inherit;
	        box-sizing: inherit;
}
html {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
body {
	margin: 0;
	-webkit-text-decoration-skip: ink;
	        text-decoration-skip-ink: auto;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	   -moz-text-size-adjust: none;
	    -ms-text-size-adjust: none;
	        text-size-adjust: none;
	text-rendering: optimizeLegibility;
}
nav ul, nav ol {
	padding: 0;
	margin: 0;
	list-style: none outside none;
}
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}
img, iframe, video, audio, object {
	max-width: 100%;
}
img, iframe {
	border: 0 none;
}
img {
	height: auto;
	display: inline-block;
	vertical-align: middle;
}
svg:not(:root) {
	overflow: hidden;
}
figure {
	margin: 0;
}
fieldset {
	padding: 0;
}
button, input[type='submit'], input[type='button'], input[type='reset'], input[type='file'], input[type='image'], label[for] {
	cursor: pointer;
}
button[disabled], input[disabled], textarea[disabled], select[disabled] {
	cursor: default;
}
input[type='text'], input[type='password'], input[type='date'], input[type='datetime'], input[type='datetime-local'], input[type='month'], input[type='week'], input[type='email'], input[type='number'], input[type='search'], input[type='tel'], input[type='time'], input[type='url'], input[type='color'], textarea {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}
input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {
	-webkit-appearance: none;
	        appearance: none;
}
textarea {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
button, select {
	text-transform: none;
}
button::-moz-focus-inner, input::-moz-focus-inner {
	padding: 0;
	border: 0;
}
input::-webkit-input-placeholder {
	color: inherit;
	opacity: 1;
}
input::-moz-placeholder {
	color: inherit;
	opacity: 1;
}
input::-ms-input-placeholder {
	color: inherit;
	opacity: 1;
}
input::placeholder {
	color: inherit;
	opacity: 1;
}
textarea::-webkit-input-placeholder {
	color: inherit;
	opacity: 1;
}
textarea::-moz-placeholder {
	color: inherit;
	opacity: 1;
}
textarea::-ms-input-placeholder {
	color: inherit;
	opacity: 1;
}
textarea::placeholder {
	color: inherit;
	opacity: 1;
}
input:-webkit-autofill {
	-webkit-text-fill-color: inherit;
	-webkit-box-shadow: 0 0 0 62.5rem var(--color-primary) inset;
	        box-shadow: 0 0 0 62.5rem var(--color-primary) inset;
}
a, a img, a svg, input, button, select, textarea, .c-btn, [class^='svg-'] {
	-webkit-transition-property: color, opacity, border-color, background-color, fill, stroke, -webkit-box-shadow;
	transition-property: color, opacity, border-color, background-color, fill, stroke, -webkit-box-shadow;
	transition-property: color, opacity, border-color, background-color, box-shadow, fill, stroke;
	transition-property: color, opacity, border-color, background-color, box-shadow, fill, stroke, -webkit-box-shadow;
	-webkit-transition-duration: var(--timing);
	        transition-duration: var(--timing);
	-webkit-transition-timing-function: var(--easing);
	        transition-timing-function: var(--easing);
}
html {
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
	font-family: var(--font-sans-serif);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-secondary);
	min-width: 20rem;
	margin: 0;
	background-color: var(--color-primary);
}
[id] {
	scroll-margin-top: 2ex;
}
h1 {
	font-size: var(--font-size-h1);
}
h2 {
	font-size: var(--font-size-h2);
}
h3 {
	font-size: var(--font-size-h3);
}
h4 {
	font-size: var(--font-size-h4);
}
h5 {
	font-size: var(--font-size-h5);
}
h6 {
	font-size: var(--font-size-h6);
}
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
}
h1[class], h2[class], h3[class], h4[class], h5[class], h6[class], h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {
	margin-bottom: 0;
}
p, ul, ol, dl, table, blockquote {
	margin-top: 0;
}
p:last-child, ul:last-child, ol:last-child, dl:last-child, table:last-child, blockquote:last-child {
	margin-bottom: 0;
}
a {
	color: var(--color-action);
	text-decoration: underline;
	cursor: pointer;
}
@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover) {
	a:hover {
		text-decoration: none;
	}
}
a[href^='tel'] {
	color: inherit;
	cursor: default;
	text-decoration: none;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}
.o-wrapper {
	min-height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-flow: column nowrap;
	        flex-flow: column nowrap;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
}
.o-shell {
	max-width: var(--shell-width);
	padding-right: var(--shell-gap);
	padding-left: var(--shell-gap);
	margin-right: auto;
	margin-left: auto;
}
.o-shell--flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row nowrap;
	        flex-flow: row nowrap;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.o-shell--fluid {
	max-width: none;
}
.o-main {
	-webkit-box-flex: 1;
	    -ms-flex: 1 1;
	        flex: 1 1;
}
.o-grid {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	margin: 0 calc(var(--gap)*-1);
}
.o-grid__item {
	-webkit-box-flex: 0;
	    -ms-flex-positive: 0;
	        flex-grow: 0;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	padding: 0 var(--gap);
}
@media (min-width: 0) {
	/* TODO: get the columns count dynamically */
	.xs-1 {
			max-width: 8.33333%;
			-ms-flex-preferred-size: 8.33333%;
			    flex-basis: 8.33333%;
		}
	.xs-2 {
			max-width: 16.66667%;
			-ms-flex-preferred-size: 16.66667%;
			    flex-basis: 16.66667%;
		}
	.xs-3 {
			max-width: 25%;
			-ms-flex-preferred-size: 25%;
			    flex-basis: 25%;
		}
	.xs-4 {
			max-width: 33.33333%;
			-ms-flex-preferred-size: 33.33333%;
			    flex-basis: 33.33333%;
		}
	.xs-5 {
			max-width: 41.66667%;
			-ms-flex-preferred-size: 41.66667%;
			    flex-basis: 41.66667%;
		}
	.xs-6 {
			max-width: 50%;
			-ms-flex-preferred-size: 50%;
			    flex-basis: 50%;
		}
	.xs-7 {
			max-width: 58.33333%;
			-ms-flex-preferred-size: 58.33333%;
			    flex-basis: 58.33333%;
		}
	.xs-8 {
			max-width: 66.66667%;
			-ms-flex-preferred-size: 66.66667%;
			    flex-basis: 66.66667%;
		}
	.xs-9 {
			max-width: 75%;
			-ms-flex-preferred-size: 75%;
			    flex-basis: 75%;
		}
	.xs-10 {
			max-width: 83.33333%;
			-ms-flex-preferred-size: 83.33333%;
			    flex-basis: 83.33333%;
		}
	.xs-11 {
			max-width: 91.66667%;
			-ms-flex-preferred-size: 91.66667%;
			    flex-basis: 91.66667%;
		}
	.xs-12 {
			max-width: 100%;
			-ms-flex-preferred-size: 100%;
			    flex-basis: 100%;
		}
}
@media (min-width: 768px) {
	/* TODO: get the columns count dynamically */
	.sm-1 {
			max-width: 8.33333%;
			-ms-flex-preferred-size: 8.33333%;
			    flex-basis: 8.33333%;
		}
	.sm-2 {
			max-width: 16.66667%;
			-ms-flex-preferred-size: 16.66667%;
			    flex-basis: 16.66667%;
		}
	.sm-3 {
			max-width: 25%;
			-ms-flex-preferred-size: 25%;
			    flex-basis: 25%;
		}
	.sm-4 {
			max-width: 33.33333%;
			-ms-flex-preferred-size: 33.33333%;
			    flex-basis: 33.33333%;
		}
	.sm-5 {
			max-width: 41.66667%;
			-ms-flex-preferred-size: 41.66667%;
			    flex-basis: 41.66667%;
		}
	.sm-6 {
			max-width: 50%;
			-ms-flex-preferred-size: 50%;
			    flex-basis: 50%;
		}
	.sm-7 {
			max-width: 58.33333%;
			-ms-flex-preferred-size: 58.33333%;
			    flex-basis: 58.33333%;
		}
	.sm-8 {
			max-width: 66.66667%;
			-ms-flex-preferred-size: 66.66667%;
			    flex-basis: 66.66667%;
		}
	.sm-9 {
			max-width: 75%;
			-ms-flex-preferred-size: 75%;
			    flex-basis: 75%;
		}
	.sm-10 {
			max-width: 83.33333%;
			-ms-flex-preferred-size: 83.33333%;
			    flex-basis: 83.33333%;
		}
	.sm-11 {
			max-width: 91.66667%;
			-ms-flex-preferred-size: 91.66667%;
			    flex-basis: 91.66667%;
		}
	.sm-12 {
			max-width: 100%;
			-ms-flex-preferred-size: 100%;
			    flex-basis: 100%;
		}
}
@media (min-width: 1024px) {
	/* TODO: get the columns count dynamically */
	.md-1 {
			max-width: 8.33333%;
			-ms-flex-preferred-size: 8.33333%;
			    flex-basis: 8.33333%;
		}
	.md-2 {
			max-width: 16.66667%;
			-ms-flex-preferred-size: 16.66667%;
			    flex-basis: 16.66667%;
		}
	.md-3 {
			max-width: 25%;
			-ms-flex-preferred-size: 25%;
			    flex-basis: 25%;
		}
	.md-4 {
			max-width: 33.33333%;
			-ms-flex-preferred-size: 33.33333%;
			    flex-basis: 33.33333%;
		}
	.md-5 {
			max-width: 41.66667%;
			-ms-flex-preferred-size: 41.66667%;
			    flex-basis: 41.66667%;
		}
	.md-6 {
			max-width: 50%;
			-ms-flex-preferred-size: 50%;
			    flex-basis: 50%;
		}
	.md-7 {
			max-width: 58.33333%;
			-ms-flex-preferred-size: 58.33333%;
			    flex-basis: 58.33333%;
		}
	.md-8 {
			max-width: 66.66667%;
			-ms-flex-preferred-size: 66.66667%;
			    flex-basis: 66.66667%;
		}
	.md-9 {
			max-width: 75%;
			-ms-flex-preferred-size: 75%;
			    flex-basis: 75%;
		}
	.md-10 {
			max-width: 83.33333%;
			-ms-flex-preferred-size: 83.33333%;
			    flex-basis: 83.33333%;
		}
	.md-11 {
			max-width: 91.66667%;
			-ms-flex-preferred-size: 91.66667%;
			    flex-basis: 91.66667%;
		}
	.md-12 {
			max-width: 100%;
			-ms-flex-preferred-size: 100%;
			    flex-basis: 100%;
		}
}
@media (min-width: 1280px) {
	/* TODO: get the columns count dynamically */
	.lg-1 {
			max-width: 8.33333%;
			-ms-flex-preferred-size: 8.33333%;
			    flex-basis: 8.33333%;
		}
	.lg-2 {
			max-width: 16.66667%;
			-ms-flex-preferred-size: 16.66667%;
			    flex-basis: 16.66667%;
		}
	.lg-3 {
			max-width: 25%;
			-ms-flex-preferred-size: 25%;
			    flex-basis: 25%;
		}
	.lg-4 {
			max-width: 33.33333%;
			-ms-flex-preferred-size: 33.33333%;
			    flex-basis: 33.33333%;
		}
	.lg-5 {
			max-width: 41.66667%;
			-ms-flex-preferred-size: 41.66667%;
			    flex-basis: 41.66667%;
		}
	.lg-6 {
			max-width: 50%;
			-ms-flex-preferred-size: 50%;
			    flex-basis: 50%;
		}
	.lg-7 {
			max-width: 58.33333%;
			-ms-flex-preferred-size: 58.33333%;
			    flex-basis: 58.33333%;
		}
	.lg-8 {
			max-width: 66.66667%;
			-ms-flex-preferred-size: 66.66667%;
			    flex-basis: 66.66667%;
		}
	.lg-9 {
			max-width: 75%;
			-ms-flex-preferred-size: 75%;
			    flex-basis: 75%;
		}
	.lg-10 {
			max-width: 83.33333%;
			-ms-flex-preferred-size: 83.33333%;
			    flex-basis: 83.33333%;
		}
	.lg-11 {
			max-width: 91.66667%;
			-ms-flex-preferred-size: 91.66667%;
			    flex-basis: 91.66667%;
		}
	.lg-12 {
			max-width: 100%;
			-ms-flex-preferred-size: 100%;
			    flex-basis: 100%;
		}
}
@media (min-width: 1439px) {
	/* TODO: get the columns count dynamically */
	.xl-1 {
			max-width: 8.33333%;
			-ms-flex-preferred-size: 8.33333%;
			    flex-basis: 8.33333%;
		}
	.xl-2 {
			max-width: 16.66667%;
			-ms-flex-preferred-size: 16.66667%;
			    flex-basis: 16.66667%;
		}
	.xl-3 {
			max-width: 25%;
			-ms-flex-preferred-size: 25%;
			    flex-basis: 25%;
		}
	.xl-4 {
			max-width: 33.33333%;
			-ms-flex-preferred-size: 33.33333%;
			    flex-basis: 33.33333%;
		}
	.xl-5 {
			max-width: 41.66667%;
			-ms-flex-preferred-size: 41.66667%;
			    flex-basis: 41.66667%;
		}
	.xl-6 {
			max-width: 50%;
			-ms-flex-preferred-size: 50%;
			    flex-basis: 50%;
		}
	.xl-7 {
			max-width: 58.33333%;
			-ms-flex-preferred-size: 58.33333%;
			    flex-basis: 58.33333%;
		}
	.xl-8 {
			max-width: 66.66667%;
			-ms-flex-preferred-size: 66.66667%;
			    flex-basis: 66.66667%;
		}
	.xl-9 {
			max-width: 75%;
			-ms-flex-preferred-size: 75%;
			    flex-basis: 75%;
		}
	.xl-10 {
			max-width: 83.33333%;
			-ms-flex-preferred-size: 83.33333%;
			    flex-basis: 83.33333%;
		}
	.xl-11 {
			max-width: 91.66667%;
			-ms-flex-preferred-size: 91.66667%;
			    flex-basis: 91.66667%;
		}
	.xl-12 {
			max-width: 100%;
			-ms-flex-preferred-size: 100%;
			    flex-basis: 100%;
		}
}
.c-btn {
	text-align: center;
	text-decoration: none;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}
.c-btn.disabled, .c-btn[disabled] {
	cursor: default;
}
.c-btn--block {
	width: 100%;
	display: block;
	padding-left: 0;
	padding-right: 0;
}
[class^='c-list-'] {
	padding: 0;
	margin: 0;
	list-style: none outside none;
}
.text-center {
		text-align: center;
	}
.text-right {
		text-align: right;
	}
.text-left {
		text-align: left;
	}
.text-justify {
		text-align: justify;
	}
.alignleft {
	float: left;
	margin: var(--gap) calc(var(--gap)*2) calc(var(--gap)*2) 0;
}
.alignright {
	float: right;
	margin: var(--gap) 0 calc(var(--gap)*2) calc(var(--gap)*2);
}
.alignnone, .aligncenter {
	float: none;
}
.alignnone {
	margin: var(--gap) 0 calc(var(--gap)*2);
}
.aligncenter {
	display: block;
	margin: var(--gap) auto calc(var(--gap)*2);
}
.clear::after, .clear-left::after, .clear-right::after {
		content: '';
		display: block;
	}
.clear::after {
		clear: both;
	}
.clear-left::after {
		clear: left;
	}
.clear-right::after {
		clear: right;
	}
.fullsize-background {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}
.visible-xs-block {
			display: none !important;
		}
.visible-xs-inline {
			display: none !important;
		}
.visible-xs-inline-block {
			display: none !important;
		}
.visible-xs-flex {
			display: none !important;
		}
.visible-xs-inline-flex {
			display: none !important;
		}
.visible-sm-block {
			display: none !important;
		}
.visible-sm-inline {
			display: none !important;
		}
.visible-sm-inline-block {
			display: none !important;
		}
.visible-sm-flex {
			display: none !important;
		}
.visible-sm-inline-flex {
			display: none !important;
		}
.visible-md-block {
			display: none !important;
		}
.visible-md-inline {
			display: none !important;
		}
.visible-md-inline-block {
			display: none !important;
		}
.visible-md-flex {
			display: none !important;
		}
.visible-md-inline-flex {
			display: none !important;
		}
.visible-lg-block {
			display: none !important;
		}
.visible-lg-inline {
			display: none !important;
		}
.visible-lg-inline-block {
			display: none !important;
		}
.visible-lg-flex {
			display: none !important;
		}
.visible-lg-inline-flex {
			display: none !important;
		}
.visible-xl-block {
			display: none !important;
		}
.visible-xl-inline {
			display: none !important;
		}
.visible-xl-inline-block {
			display: none !important;
		}
.visible-xl-flex {
			display: none !important;
		}
.visible-xl-inline-flex {
			display: none !important;
		}
@media (max-width: 767px) {
	.hidden-xs {
		display: none !important;
	}
		.visible-xs-block {
			display: block !important;
		}
		.visible-xs-inline {
			display: inline !important;
		}
		.visible-xs-inline-block {
			display: inline-block !important;
		}
		.visible-xs-flex {
			display: -webkit-box !important;
			display: -ms-flexbox !important;
			display: flex !important;
		}
		.visible-xs-inline-flex {
			display: -webkit-inline-box !important;
			display: -ms-inline-flexbox !important;
			display: inline-flex !important;
		}
}
@media (min-width: 768px) and (max-width: 1023px) {
	.hidden-sm {
		display: none !important;
	}
		.visible-sm-block {
			display: block !important;
		}
		.visible-sm-inline {
			display: inline !important;
		}
		.visible-sm-inline-block {
			display: inline-block !important;
		}
		.visible-sm-flex {
			display: -webkit-box !important;
			display: -ms-flexbox !important;
			display: flex !important;
		}
		.visible-sm-inline-flex {
			display: -webkit-inline-box !important;
			display: -ms-inline-flexbox !important;
			display: inline-flex !important;
		}
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.hidden-md {
		display: none !important;
	}
		.visible-md-block {
			display: block !important;
		}
		.visible-md-inline {
			display: inline !important;
		}
		.visible-md-inline-block {
			display: inline-block !important;
		}
		.visible-md-flex {
			display: -webkit-box !important;
			display: -ms-flexbox !important;
			display: flex !important;
		}
		.visible-md-inline-flex {
			display: -webkit-inline-box !important;
			display: -ms-inline-flexbox !important;
			display: inline-flex !important;
		}
}
@media (min-width: 1280px) and (max-width: 1439px) {
	.hidden-lg {
		display: none !important;
	}
		.visible-lg-block {
			display: block !important;
		}
		.visible-lg-inline {
			display: inline !important;
		}
		.visible-lg-inline-block {
			display: inline-block !important;
		}
		.visible-lg-flex {
			display: -webkit-box !important;
			display: -ms-flexbox !important;
			display: flex !important;
		}
		.visible-lg-inline-flex {
			display: -webkit-inline-box !important;
			display: -ms-inline-flexbox !important;
			display: inline-flex !important;
		}
}
@media (min-width: 1439px) {
	.hidden-xl {
		display: none !important;
	}
		.visible-xl-block {
			display: block !important;
		}
		.visible-xl-inline {
			display: inline !important;
		}
		.visible-xl-inline-block {
			display: inline-block !important;
		}
		.visible-xl-flex {
			display: -webkit-box !important;
			display: -ms-flexbox !important;
			display: flex !important;
		}
		.visible-xl-inline-flex {
			display: -webkit-inline-box !important;
			display: -ms-inline-flexbox !important;
			display: inline-flex !important;
		}
}
@media (prefers-reduced-motion: reduce) {
	* {
		-webkit-animation-duration: 0.01ms !important;
		        animation-duration: 0.01ms !important;
		-webkit-animation-iteration-count: 1 !important;
		        animation-iteration-count: 1 !important;
		-webkit-transition-duration: 0.01ms !important;
		        transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}