@charset 'utf-8'; /*—~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.
—                ██████╗████████╗██╗   ██╗ ██╗      ██████╗        ██████╗ ██╗  ██╗  ██████╗  ██████╗ ████████╗
░               ██╔════╝╚══██╔══╝╚██╗ ██╔╝ ██║     ██╔════╝       ██╔════╝ ██║  ██║ ██╔════╝ ██╔════╝ ╚══██╔══╝
▒               ╚█████╗    ██║    ╚████╔╝  ██║     █████╗  █████╗ ╚█████═╗ ███████║ █████╗   █████╗      ██║   
▓                ╚═══██╗   ██║     ╚██╔╝   ██║     ██╔══╝  ╚════╝  ╚═══██║ ██╔══██║ ██╔══╝   ██╔══╝      ██║   
█               ██████╔╝   ██║      ██║    ███████╗╚██████╗       ██████╔╝ ██║  ██║  ██████╗  ██████╗    ██║   
—               ╚═════╝    ╚═╝      ╚═╝    ╚══════╝ ╚═════╝       ╚═════╝  ╚═╝  ╚═╝  ╚═════╝  ╚═════╝    ╚═╝   
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~♦ by qui-design.fr ♦~~~*/

* {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}


/*                                                  ▓▓▓▓▓▓╗  ▓▓▓▓▓▓╗ ▓▓▓▓▓▓╗ ▓▓▓▓▓▓╗▓▓▓▓▓▓▓▓╗
                                                    ▓▓╔══▓▓╗▓▓╔════╝▓▓╔════╝▓▓╔════╝╚══▓▓╔══╝
                                                    ▓▓▓▓▓▓╔╝▓▓▓▓▓╗  ╚▓▓▓▓▓╗ ▓▓▓▓▓╗     ▓▓║   
                                                    ▓▓╔══▓▓╗▓▓╔══╝   ╚═══▓▓╗▓▓╔══╝     ▓▓║   
                                                    ▓▓║  ▓▓║ ▓▓▓▓▓▓╗▓▓▓▓▓▓╔╝ ▓▓▓▓▓▓╗   ▓▓║   
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ╚═╝  ╚═╝ ╚═════╝╚═════╝  ╚═════╝   ╚═╝   
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a:link, a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a img, img, map {
	border: none;
}
p, span, br, a, h1, h2, h3, h4, h5, h6, ul, li, strong, em, u, dfn, sub, sup, cite, mark {
	line-height: inherit;
	text-align: inherit;
	text-transform: inherit;
	font-style: inherit;
	font-weight: inherit;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	color: inherit;
}
strong, b, .bold {
	font-weight: var(--fb);
}
em, i, .italic {
	font-style: italic;
}
mark {
	background: none;
}
dfn {
	font-style: normal;
}
p, address {
	margin-bottom: 1em;
}
ol, ul {
	list-style: none;
}
address {
	font-style: normal;
}
p:last-child, ul:last-child, address:last-child {
	margin-bottom: 0;
}
sup, sub {
	font-size: .5em;
	font-weight: 500;
	text-transform: lowercase;
}
sup {
	vertical-align: 70%;
	line-height: 1;
}
hr, div.hr {
	display: block;
	clear: both;
	width: 100%;
	height: 1px;
	margin: var(--hollow) auto;
	padding: 0;
	border: none;
	background: currentColor;
}
wbr, .wbr {
	display: inline-block;
	width: 0;
	height: 0;
	margin: 0 .1em;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
input::-moz-focus-inner, button::-moz-focus-inner {
	border: none;
}
figure {
	position: relative;
	margin: 0;
}
figure img, figure svg {
	display: block;
	margin: auto;
	width: 100%;
	height: auto;
	pointer-events: none;
	user-select: none;
}
figure.img img[style*='--ratio'] {
	aspect-ratio: var(--ratio);
}
picture {
	height: 100%;
}
img {
 	image-rendering: auto;
}
img:not([src]):not([srcset]) {
	visibility: hidden;
}
@-moz-document url-prefix() {
	img:-moz-loading {
		visibility: hidden;
	}
}

/*~~~~~~~~~~~~~~~~~~~~ FIGURE — CAPTIONS */
picture::after, figure.img > div + div {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
}
figure.img > div + div > img {
	height: 100%;
}
figure.img > picture > img {
	pointer-events: none;
	user-select: none;
}
figure.img footer {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	/*writing-mode: sideways-rl;*/
	writing-mode: vertical-lr;
	text-orientation: sideways;
}
figure.img footer small {
	font-size: 1.1rem;
	font-weight: var(--fb);
	letter-spacing: -.015em;
	white-space: nowrap;
}
figure.img figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: var(--breach) var(--gut);
	color: white;
	font-size: 1.1rem;
	opacity: .75;
	text-shadow: var(--ts);
	display: none;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  H Y P E R - L I N K S.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~ HYPERLINKS — FX — UNDERLINE */
.fx a, a.fx, .fx button, button.fx {
	background: linear-gradient(to right, currentColor, currentColor), linear-gradient(to right, transparent, transparent);
	background-size: 0 1px, 100% 1px;
	background-position: 0% 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background-size .4s ease;
}
.fx a.active, a.fx.active, .fx button.active, .fx.active {
}
@media all and (any-hover: hover) {
	.fx a:hover, a.fx:hover, .fx button:hover, button.fx:hover {
		background-size: 100% 1px, 100% 1px;
	}
}

/*~~~~~~~~~~~~~ HYPERLINKS — FX — ITALIC */
.fx-italic a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.fx-italic a span {
	display: block;
	opacity: 1;
	transition: opacity .2s ease-in;
}
.fx-italic a::after {
	content: attr(aria-label);
	display: block;
	position: relative;
	margin-top: -1lh;
	/*visibility: hidden;
	overflow: hidden;
	height: 0;*/
	user-select: none;
	pointer-events: none;
	font-style : italic;
	letter-spacing: .05em;
	opacity: 0;
	transition: opacity .2s ease-in;
}
.fx-italic a.active span {
	opacity: 0;
}
.fx-italic a.active::after {
	opacity: 1;
}
/* Hover */
@media all and (any-hover: hover) {
	.fx-italic a:hover span {
		opacity: 0 !important;
		transition-timing-function: ease-out;
	}
	.fx-italic a:hover::after {
		opacity: 1 !important;
		transition-timing-function: ease-out;
	}
}

/*~~~~~~~~~~~~~~~~~~~ HYPERLINKS — SPLIT */
a[data-name] {
	position: relative;
	display: inline-block;
	width: fit-content;
	transition: all .3ms ease;
	cursor: pointer;
}
a[data-name]:hover {
	transform: skew(10deg);
}
a[data-name]::before {
	content: attr(data-name);
	position: absolute;
	top: 0;
	left: -2px;
	background: var(--canvas);
	height: 50%;
	overflow: hidden;
	transition: all .3s ease;
	padding-left: 2px;
}
a[data-name]:hover::before {
	top: -1px;
	left: 0px;
	color: var(--period);
}
a[data-name]::after {
	content: '';
	height: 1px;
	width: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--period);
	transition: all .3s ease;
}
a[data-name]:hover::after {
	width: 120%;
	outline: 1px solid var(--canvas);
}





/*                                                        ▓▓▓▓▓▓╗ ▓▓▓▓▓▓╗ ▓▓▓▓▓▓╗ ▓▓▓╗   ▓▓▓╗
                                                         ▓▓╔════╝▓▓╔═══▓▓╗▓▓╔══▓▓╗▓▓▓▓╗ ▓▓▓▓║
                                                         ▓▓▓▓▓╗  ▓▓║   ▓▓║▓▓▓▓▓▓╔╝▓▓╔▓▓▓▓╔▓▓║
                                                         ▓▓╔══╝  ▓▓║   ▓▓║▓▓╔══▓▓╗▓▓║╚▓▓╔╝▓▓║
                                                         ▓▓║     ╚▓▓▓▓▓▓╔╝▓▓║  ▓▓║▓▓║ ╚═╝ ▓▓║
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ╚═╝      ╚═════╝ ╚═╝  ╚═╝╚═╝     ╚═╝
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  I N P U T.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
body {
	--input-pt: .9rem;
	--input-pb: .9rem;
	--input-pw: 1rem;
	--button-pt: 1.7rem;
	--button-pb: 1.7rem;
	--button-pw: 1.6rem;
}
.gecko body {
	--input-pb: .9rem;
}
label {
	display: block;
	position: relative;
	margin-bottom: var(--shift);
	padding: 0;
	cursor: pointer;
}
label:last-of-type {
	/*margin-bottom: 1rem;*/
}
[type='text'], [type='password'], [type='email'], [type='number'], [type='tel'], [type='search'], select, textarea, input:-webkit-autofill {
	width: 100%;
	padding: var(--input-pt) var(--input-pw) var(--input-pb);
	font: normal normal var(--fs)/1 var(--ff);
	color: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	outline: none;
	filter: none;
	box-shadow: none;
	background: transparent; /*var(--canvas);*/
	border: 1px solid var(--haze);
	border-radius: 1px !important;
	box-shadow: none;
	caret-color: var(--capcode);
	transition: border-color .15s ease, background-color .15s ease;
}
[type='password'] {
	padding: .45em 1.1em;
	font-size: 3.2rem;
}
textarea {
	min-height: 10em;
}
input:-webkit-autofill {
	-webkit-box-shadow:0 0 0 3em var(--canvas) inset;
	-webkit-text-fill-color: var(--coal);
}
input:-webkit-autofill:focus, input.typed:-webkit-autofill, .gecko input:-webkit-autofill {
	-webkit-box-shadow:0 0 0 3em var(--canvas) inset;
	-webkit-text-fill-color: var(--coal);
}
input.invalid, select.invalid, textarea.invalid {
	animation: .15s ease-out 0s 5 alternate forwards running invalid-twinkle;
}
@keyframes invalid-twinkle {
	to { border-color: hsl(350, 95%, 50%); }
}
input::-moz-focus-inner, button::-moz-focus-inner, select::-moz-focus-inner {
	border: none;
}
[type='number'] {
	-moz-appearance: textfield;
}
[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	margin: 0;
}
/* Input + Button : Inline */
label.glued, label.glued + button {
	margin: 0;
}
label.glued {
	z-index: 1;
}
label.glued input {
	height: 100%;
	/*border-right: 0;*/
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ REQUIRED */
/*
.required::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
	user-select: none;
}
input[required], .required::after {
	background: transparent url('../graphics/pictograms.svg#mandatoryView') no-repeat calc(100% - 1rem) .7rem / 8px 8px;
}
*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~ PLACE-HOLDER */
[placeholder] {
	/*border-color: var(--dust);*/
}
::placeholder {
	color: transparent;
}
:placeholder-shown {
}
[data-holder] {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: var(--input-pw);
	white-space: nowrap;
	-ms-pointer-events: none;
	pointer-events: none;
	opacity : 1;
	transform-origin: 0 0;
	transform: scale(1);
	transition: left .2s ease, opacity .2s ease, transform .2s ease;
}
[data-holder]::before, [data-holder]::after {
	content: attr(data-holder);
	box-sizing: inherit;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	padding: 0 .2em;
}
[data-holder]::before {
	overflow: hidden;
	top: 0;
	height: 1px;
	color: transparent;
	opacity: 0;
	background: var(--canvas);
	transition: opacity .15s ease;
}
[data-holder]::after {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100% - 1em);
	top: var(--input-pt);
	white-space: nowrap;
	color: var(--rock);
	-ms-pointer-events: none;
	pointer-events: none;
	opacity : .7;
	transform-origin: 0 0;
	transform: scale(1);
	transition: top .2s ease, max-width .2s ease, opacity .2s ease;	
}
/* States */
@media all and (any-hover: hover) {
	[placeholder]:hover {
		border-color: var(--dove);
	}
}
[placeholder]:focus {
	border-color: var(--dust);
}
[placeholder]:valid:not(:placeholder-shown):not(:optional),
[placeholder].typed:not(:placeholder-shown) {
	border-color: var(--capcode);
}
[placeholder]:focus + [data-holder],
[placeholder]:valid:not(:placeholder-shown):not(:optional) + [data-holder],
[placeholder].typed:not(:placeholder-shown) + [data-holder] {
	left: 1em;
	opacity: 1;
	transform: scale(.75);
}
[placeholder]:focus + [data-holder]::before,
[placeholder]:valid:not(:placeholder-shown):not(:optional) + [data-holder]::before,
[placeholder].typed:not(:placeholder-shown) + [data-holder]::before {
	opacity: 1;
	transition: opacity .15s ease .1s;
}
[placeholder]:focus + [data-holder]::after,
[placeholder]:valid:not(:placeholder-shown):not(:optional) + [data-holder]::after,
[placeholder].typed:not(:placeholder-shown) + [data-holder]::after {
	max-width: 100%;
	top: -1.2em;
	opacity: .9;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  S E L E C T.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
select {
	line-height: 1.2;
	cursor: pointer;
	background: transparent url('../graphics/pictograms.svg#chevronView') no-repeat calc(100% - 2.5rem) 1rem / 10px 10px;
}
select::-ms-expand {
	display: none;
}
/*
select + span {
	height: 0;
	pointer-events: none;
}
select + span::after, .select label::after {
	content: '';
	display: block;
	position: absolute;
	top: 46%;
	right: 0;
	height: 0;
	width: 0;
	border: .75rem solid transparent;
	border-top-color: white;
	transform: rotate(0);
	transform-origin: center .2rem;
	transition: border-top-color .15s ease, transform .15s ease;
}
select.active + span::after {
	transform: rotate(180deg);
}
*/
/* Hover */
@media all and (any-hover: hover) {
	select:hover + span::after {
		border-top-color: white
	}
}
select:focus + span::after, select:valid + span::after, select.typed + span::after {
	border-top-color: white;
}

/*~~~~~~~~~~~~ SELECT — CUSTOM DROP-DOWN */
.select {
	position: relative;
	display: block;
}
/* Label */
.select label {
	position: relative;
	display: block;
	padding: 0 .1em;
	text-align: right;
	cursor: pointer;
}
.select.fold label {
}
.select label span {
	display: block;
	pointer-events: none;
}
.select.active label span {
}
/* Drop-down */
.select div {
	z-index: 1;
	position: absolute;
	overflow: hidden;
	width: 100%;
	max-height: 15.5em;
	margin-top: 1px;
	pointer-events: auto;
	opacity: 1;
	backface-visibility: hidden;
	-webkit-overflow-scrolling: touch;
	will-change: max-height, opacity;
	transition: max-height .5s ease, opacity .3s ease;
}
.select.fold div {
	max-height: 0;
	padding: 0;
	pointer-events: none;
	opacity: 0;
	transition: max-height .2s ease, opacity .15s ease;
}
.select ul {
	width: max-content;
	max-height: 15.5em;
	overflow-x: hidden;
	overflow-y: auto;
	padding-top: .75em;
	padding-bottom: .5em;
	background: var(--coal);
	transform: scaleY(1);
	will-change: transform;
	transform-origin: top center;
	transition: transform .25s ease;
}
.select.fold ul {
	-webkit-transform: scaleY(.001);
}
/* Item */
.select li {
	display: block; 
	padding: .5em 1em;
	line-height: 1;
	cursor: pointer;
	opacity: 1;
	transition: opacity .25s ease-in-out;
}
.select li.default {
	font-style: italic;
	color: var(--haze);
}
/*~~~~~~~~~~~~~~~~~~~~~~ WINERY — HOVERS */
@media all and (any-hover: hover) {
	.select.fold label:hover::after {
		border-top-color: var(--period);
	}
	.select li:not(.default):hover {
		color: var(--period);
	}
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  R A D I O.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
[type='radio'], [type='checkbox'] {
	visibility: hidden;
	width: 0;
	height: 0;
	opacity: 0;
	-webkit-appearance: none;
	appearance: none;
}
[type='radio'] + span, [type='checkbox'] + span {
	position: relative;
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	margin-right: .7rem;
	vertical-align: -10%;
	flex-shrink: 0;
	cursor: pointer;
}
[type='radio'] + span::before, [type='radio'] + span::after,
[type='checkbox'] + span::before, [type='checkbox'] + span::after {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
[type='radio'] + span::before, [type='radio'] + span::after {
	border-radius: 50%;
}
[type='radio'] + span::before, [type='checkbox'] + span::before {
	background: var(--pure);
	opacity: 1;
	transform: scale(1);
	transition: transform .15s ease-in, opacity .1s ease;
}
[type='radio'] + span::after, [type='checkbox'] + span::after {
	opacity: .5;
	transform: scale(.45);
	background: var(--haze);
	transition: background .15s ease, transform .15s ease-in .05s, opacity .15s ease;
}
[type='radio']:checked + span::before, [type='checkbox']:checked + span::before {
	opacity: 1;
	transform: scale(1);
	transition: transform .15s ease-out, opacity .1s ease;
}
[type='radio']:checked + span::after, [type='checkbox']:checked + span::after {
	opacity: .75;
	transform: scale(.65);
	background: var(--capcode);
	transition: background .1s ease, transform .1s ease-out;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~  C H E C K B O X  —  S W I T C H.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.switch + span {
	display: inline-block;
	margin-right: .75rem;
	cursor: pointer;
	line-height: 1;
	vertical-align: 10%;
	border-radius: .7rem;
	border: .3rem solid white;
	background: var(--pink);
	background: linear-gradient(to right, var(--pink) 0%, var(--pink) 31%, white 31%, white 66%, var(--dove) 66%, var(--dove) 100%);
	background-size: 156% 100%;
	background-position: 99% 0%;
	box-shadow: 0 0 0 1px var(--haze);
	transition: background-position .2s ease;
}
.switch + span::before, .switch + span::after {
	display: inline-block;
	padding: .5em .7em .4em;
	text-transform: uppercase;
	transition: color .15s ease;
}
.switch + span::before {
	content: 'Oui';
	color: var(--dove);
}
.switch + span::after {
	content: 'Non';
	color: white;
	text-shadow: 0 -.025em .05em white, 0em .025em .05em white, -.025em 0 .05em white, .025em 0 .05em white;
}
.switch:checked + span {
	background-position: 1% 0%;
}
.switch:checked + span::before {
	color: white;
	text-shadow: 0 -.025em .05em white, 0em .025em .05em white, -.025em 0 .05em white, .025em 0 .05em white;
}
.switch:checked + span::after {
	color: var(--dove);
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  B U T T O N S.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
button, .button {
	position: relative;
	display: inline-block;
	width: auto;
	margin: 0;
	padding: var(--button-pt) var(--button-pw) var(--button-pb);
	font: normal var(--fb) 1.35rem/1 var(--fh);
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: .04em;
	text-shadow: none;
	color: inherit;
	border: 1px solid transparent;
	border-radius: 0em;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color .25s ease, border-color .25s ease, background .25s ease, letter-spacing .25s ease;
}
/* Variations */
.butt-white {
	color: black;
	background: white;
}
.butt-black {
	color: white;
	background: black;
}
.butt-capcode {
	color: white;
	background: var(--capcode);
}
.butt-disc {
	padding: 1.35rem 0;
	height: 4.3rem;
	width: 4.3rem;
} 
.butt-blur {
	background: hsla(0, 0%, 90%, .35);
	transition: background-color .25s ease;
}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
	.butt-blur {
		background: hsla(0, 0%, 90%, .35);
		-webkit-backdrop-filter: blur(5px);
		backdrop-filter: blur(5px);
	}
}
.butt-underline {
	display: inline-block;
	padding: .2em .1em .2em;
	font-size: 1.35rem;
	font-weight: 500;
	text-transform: uppercase;
	background: linear-gradient(to right, var(--capcode), var(--capcode)), linear-gradient(to right, var(--haze), var(--haze));
	background-size: 0 1px, 100% 1px;
	background-position: 0% 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background-size .4s;
}
.butt-underline:not(.active)::after {
	content: '\00A0\003E';
}
.butt-underline:hover, .butt-underline.active {
	background-size: 100% 1px, 100% 1px;
}
.butt-underline.active {
	pointer-events: none;
}

/*~~~~~~~~~~~~~~~~~~~~~~~ BUTTON — TYPES */
[type='submit'], [type='button'], a.button, a.submit {
	opacity: 1;
	transition: opacity .25s ease;
}

/*~~~~~~~~~~~~~~~~~~~~~~~ BUTTON — LABEL */
[data-label] {
	/*overflow: hidden;*/
	display: inline-flex;
	align-items: center;
	color: transparent;
}
/* Before & After : Duplicate "value" */
[data-label]::before, [data-label]::after {
	content: attr(data-label);
	display: block;
	box-sizing: inherit;
	padding: inherit;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	color: black;
}
[data-label].butt-capcode::before {
	color: white;
}
[data-label].butt-capcode::after, [data-label].butt-aquamarine::after {
	color: var(--capcode);
}
[data-label]::before {
	opacity: 1;
	transform: none;
	transition: transform .15s ease-out, opacity .275s ease-out;
}
[data-label]::after {
	opacity: 0;
	transform: translateY(35%);
	transition: transform .15s ease-in, opacity .125s ease-in;
}
[data-label].rtl::after {
	transform: translateX(35%);
}
[data-label].ltr::after {
	transform: translateX(-35%);
}
/* Outside label */
[data-label] span {
	position: absolute;
	width: max-content;
	color: white;
	text-transform: none;
	transition: transform .15s ease-in;
}
[data-label].rtl span, [data-label].ltr span {
	left: 135%;
	transform: translateX(var(--gut));
}
@media only screen and (min-width: 737px) {
	[data-label].ltr span {
		left: auto;
		right: 135%;
		transform: translateX(calc(-1 * var(--gut)));
	}
}
/* Hover */
@media all and (any-hover: hover) {
	[data-label].butt-capcode:hover {
		background: white;
	}
	[type='submit']:hover, [type='button']:hover, a.submit:hover {
		opacity: .6;
	}
	[data-label]:hover {
		color: transparent;
	}
	[data-label]:hover::before {
		opacity: 0;
		transform: translateY(-60%);
		transition: transform .15s ease-in, opacity .125s ease-in;
	}
	[data-label].rtl:hover::before {
		transform: translateX(-60%);
	}
	[data-label].ltr:hover::before {
		transform: translateX(60%);
	}
	[data-label]:hover::after {
		opacity: 1;
		transform: none;
		transition: transform .15s ease-out, opacity .125s ease-out;
	}
	[data-label]:hover span {
		transform: none;
		transition-timing-function: ease-out;
	}
}

/*~~~~~~~~~~~~~ BUTTON — STROKE ANIMATED */
.butt-stroke {
	position: relative;
}
.butt-stroke:before, /* .butt-stroke:after */
.butt-stroke span:before, .butt-stroke span:after {
	content: '';
	position: absolute;
	background: currentColor;
	transition: .3s width ease, .3s height ease;
}
.butt-stroke:before {
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	transition-delay: .2s;
}
.butt-stroke span:before {
	bottom: 0;
	left: 0;
	width: 1px;
	height: 100%;
	transition-delay: 0s;
}
.butt-stroke span:after {
	top: 0;
	right: 0;
	width: 1px;
	height: 100%;
	transition-delay: .4s;
}
.butt-stroke.fx {
	background-position: 100% 100%;
	background-size: 100% 1px;
	transition: background-size .3s ease .6s;
}
/* Hover */
@media all and (any-hover: hover) {
	.butt-stroke.fx:hover {
		background-size: 0% 1px;
		transition-delay: 0s;
	}
	.butt-stroke:hover:before {
		width: 0;
		transition-delay: .4s;
	}
	.butt-stroke:hover span:before {
		height: 0;
		transition-delay: .6s;
	}
	.butt-stroke:hover span:after {
		height: 0;
		transition-delay: .2s;
	}
}

/*~~~~~~~~~~~~~~~~ BUTTON — EXPAND LABEL */
.butt-arrow::after {
	display: inline-block;
	content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 12"%3E%3Cpath fill="none" stroke="white" stroke-linecap="round" stroke-width="1" d="M.2 6.5h17m-5.4-5.3 5.4 5.3m-5.4 5.3 5.4-5.3"/%3E%3C/svg%3E%0A');
	width: 18px;
	height: 12px;
	margin-left: var(--gut);
	vertical-align: top;
	transition: margin-left .4s ease-out;
}
.butt-expand {
	display: table;
	margin-left: auto;
}
.butt-expand span {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
}
/* Hover */
@media only screen and (min-width: 980px) and (any-hover: hover) {
	.butt-expand span {
		max-width: 0;
		transition: max-width .4s ease-out;
	}
	.butt-arrow.butt-expand::after {
		margin-left: 0;
	}
	.butt-arrow:hover::after {
		margin-left: var(--gut);
		transition: margin-left .5s ease-out;
	}
	.butt-expand:hover {
		opacity: 1;
	}
	.butt-expand:hover span {
		max-width: 300px;
		transition: max-width .5s ease-in, margin-right .5s ease-in;
	}
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  Q U A N T I T Y.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.quantity {
	display: flex;
	align-items: center;
}
.quantity button {
	width: 2.5rem;
	aspect-ratio: 1;
	padding: 0;
	border-radius: 50%;
	background: var(--mist);
}
.quantity input {
	width: 36px;
	text-align: center;
	border: none;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  F I L T E R S.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.filterFrame [data-key] {
	opacity: 1;
	cursor: pointer;
}

/*~~~~~~~~~~ FILTER OBEDIENT — LIST ITEM */
.doc-ready .filterObedientList li {
	opacity: 1;
	transition: opacity .25s ease-out;
}
.filterObedientList li.filtered {
	opacity: 0;
}
.doc-ready .filterObedientList li.filtered {
	transition: opacity .2s ease-in;
}

/*~~~~~~~~~~ FILTER OBEDIENT — TABLE ROW */
.doc-ready .filterObedientList tr {
	transition: all .2s ease-out;
}
.doc-ready .filterObedientList tr td {
	transition: inherit;
}
.doc-ready .filterObedientList tr.filtered {
	transition: all .15s ease-in;
}
.filterObedientList tr.filtered td {
	height: 0;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 0;
	line-height: 0;
	opacity: 0;
}
/* Hover */
@media all and (any-hover: hover) {
	.filterFrame [data-key]:not(.active):hover {
	}
}





/*                                 ▓▓▓▓▓▓╗  ▓▓▓▓▓▓╗▓▓▓╗   ▓▓╗ ▓▓▓▓▓▓╗▓▓▓▓▓▓╗  ▓▓▓▓▓╗ ▓▓╗     
                                  ▓▓╔════╝ ▓▓╔════╝▓▓▓▓╗  ▓▓║▓▓╔════╝▓▓╔══▓▓╗▓▓╔══▓▓╗▓▓║     
                                  ▓▓║  ▓▓▓╗▓▓▓▓▓╗  ▓▓╔▓▓╗ ▓▓║▓▓▓▓▓╗  ▓▓▓▓▓▓╔╝▓▓▓▓▓▓▓║▓▓║     
                                  ▓▓║   ▓▓║▓▓╔══╝  ▓▓║╚▓▓╗▓▓║▓▓╔══╝  ▓▓╔══▓▓╗▓▓╔══▓▓║▓▓║     
                                  ╚▓▓▓▓▓▓╔╝ ▓▓▓▓▓▓╗▓▓║ ╚▓▓▓▓║ ▓▓▓▓▓▓╗▓▓║  ▓▓║▓▓║  ▓▓║▓▓▓▓▓▓▓╗
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ╚═════╝  ╚═════╝╚═╝  ╚═══╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝╚══════╝
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CLEARFIX */
.clearfix:before, .clearfix:after {
	content: '';
	display: table;
}
.clearfix:after {
	clear: both;
}

/*~~~~~~~~~~~~~~~~~ DISPLAY / VISIBILITY */
.block {
	display: block;
}
.inline {
	display: inline;
}
.inline-block {
	display: inline-block;
}
.table {
	display: table;
}
.hide {
	display: none;
}
.hidden {
	display: none !important;
}
.show {
	display: unset;
}
.transparent {
	opacity: 0;
}
.opaque {
	opacity: 1;
}
.visible {
	visibility: visible;
}
.invisible {
	visibility: hidden;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ POSITION */
.fixed {
	position: fixed;
}
.absolute {
	position: absolute;
}
.relative {
	position: relative;
}
.static {
	position: static;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ALIGNMENT */
.f-left {
	float: left;
}
.f-right {
	float: right;
}
.both {
	clear: both;
}
.a-left {
	text-align: left;
}
.a-right {
	text-align: right;
}
.a-center {
	text-align: center;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~ TEXT — COLOR */
.c-white {
	color: white;
}
.c-black {
	color: black;
}
.c-capcode {
	color: var(--capcode);
}
.c-haze {
	color: var(--haze);
}
.t-upper {
	text-transform: uppercase;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ BORDER */
.b-shadow {
	box-shadow: var(--shadow);
}
.b-shade {
	box-shadow: var(--shade);
}
.b-radius {
	border-radius: .25em;
	overflow: hidden;
	background-clip: padding-box;
}

/*~~~~~~~~~~~~~~~~~~~ BACKGROUND — COLOR */
.bg-black {
	background-color: black;
	color: white;
}
.bg-canvas {
	background-color: var(--canvas);
}
.bg-white {
	background-color: white;
}
.bg-pure {
	background-color: var(--pure);
}
.bg-pure + .bg-pure {
	padding-top: 0 !important;
}
.bg-capcode {
	color: white;
	background-color: var(--capcode);
}

/*~~~~~~~~~~~~~~~~~~~~~ BACKGROUND SIZES */
.bg-cover {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.bg-contain {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 100%;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~ OBJECT FIT */
.fit-cover, .fit-contain {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	object-position: 50% 50%;
}
.fit-cover {
	object-fit: cover;
}
.fit-contain {
	object-fit: contain;
}
 

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  H E A D I N G S.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
h1, h2, h3,
.h-1, .h-2, .h-3 {
	margin: 0;
	font-family: var(--fh);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .04em;
}
h1, .h-1 {
	font-size: var(--h1);
	overflow-wrap: break-word;
	/*hyphens: auto;*/
}
h2, .h-2 {
	font-size: var(--h2);
}
h3, .h-3 {
	font-size: var(--h3);
}
h4, .h-4 {
	font-size: var(--h4);
	font-weight: var(--fb);
	color: var(--capcode);
}
h5, .h-5 {
	font-size: var(--h5);
}
h6, .h-6 {
	font-size: var(--h6);
}
.fw-normal {
	font-weight: var(--fw);
}
.fw-bold {
	font-weight: var(--fb);
}
.fw-300 {
	font-weight: 300;
}
.fw-600 {
	font-weight: 600;
}
.fw-800 {
	font-weight: 800;
}
.fs-normal {
	font-size: 1em;
}
small, .h-small {
	font-size: .7em;
}
.h-smaller {
	font-size: .6em;
}
big, .h-big {
	font-size: 1.2em;
}
.h-bigger {
	font-size: 1.4em;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  B L O C K Q U O T E.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
blockquote {
	position: relative;
	line-height: 1.3;
	font-family: var(--fh);
	font-size: var(--h5);
	font-weight: var(--fb);
	quotes: '«' '»' '\00AB' '\00BB' '\2018' '\2019';
	/*quotes: '“' '”' '\00AB' '\00BB' '\2018' '\2019';*/
}
blockquote::before, blockquote::after {
	/*position: absolute;*/
	/*height: .4em*/
	display: inline-block;	
	font-size: 1.1em;
	line-height: .1;
	vertical-align: .05em;
	/*text-shadow: 1px 1px 1px var(--rock);*/
}
blockquote::before {
	content: open-quote;
	top: 0;
	left: 0;
	margin-right: .25em;
}
blockquote::after {
	content: close-quote;
	bottom: 0;
	right: 0;
	margin-left: .2em;
}
blockquote p {
	display: inline;
}

	



/*                                       ▓▓╗      ▓▓▓▓▓╗ ▓▓╗   ▓▓╗ ▓▓▓▓▓▓╗ ▓▓╗   ▓▓╗▓▓▓▓▓▓▓▓╗
                                         ▓▓║     ▓▓╔══▓▓╗╚▓▓╗ ▓▓╔╝▓▓╔═══▓▓╗▓▓║   ▓▓║╚══▓▓╔══╝
                                         ▓▓║     ▓▓▓▓▓▓▓║ ╚▓▓▓▓╔╝ ▓▓║   ▓▓║▓▓║   ▓▓║   ▓▓║   
                                         ▓▓║     ▓▓╔══▓▓║  ╚▓▓╔╝  ▓▓║   ▓▓║▓▓║   ▓▓║   ▓▓║   
                                         ▓▓▓▓▓▓▓╗▓▓║  ▓▓║   ▓▓║   ╚▓▓▓▓▓▓╔╝╚▓▓▓▓▓▓╔╝   ▓▓║   
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ╚══════╝╚═╝  ╚═╝   ╚═╝    ╚═════╝  ╚═════╝    ╚═╝   
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~  L A Y - O U T  —  R O T U L U S.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.rotulus, .pageArticle section {
	position: relative;
	/*overflow: hidden;*/
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--edge);
}
.pageArticle section {
	padding-top: calc(2 * var(--edge));
	padding-bottom: calc(2 * var(--edge));
}
.pageArticle section:first-of-type {
	padding-top: 0;
}
@media only screen and (min-width: 980px) {
	.rotulus, .pageArticle > * {
	}
}

/*~~~~~~~~~~~~~~~~~~~ FULL-HEIGHT & HERO */
.pageHero, .screenSection {
	position: relative;
	padding: 0;
}
.pageHero {
	min-height: max(calc(var(--vh, 100vh) / 2), 300px);
}
.screenSection {
	min-height: var(--vh, 100vh); /*calc(var(--vh, 100vh) - var(--h-h));*/
}
.screenSection > figure:first-of-type, .pageHero > figure:first-of-type {
	width: 100%;
}
.screenSection > figure.hypergonar:first-of-type, .pageHero > figure.hypergonar:first-of-type {
	z-index: -1;
	position: absolute;
	min-height: inherit;
	height: 100%;
}
@media only screen and (min-width: 737px) {
	.pageHero:not(.screenSection) {
		min-height: auto;
	}
	.pageHero:not(.screenSection) > figure.hypergonar:first-of-type, .pageHero:not(.screenSection) > figure.hypergonar:first-of-type img {
		position: relative;
		margin: 0 !important;
		left: 0 !important;
	}
}

/*~~~~~~~~~~~~~~~~~~ CONTAINER — BREADTH */
.hypergonar {
	position: relative;
	width: 100vw !important;
	left: -50vw !important;
	margin-left: 50% !important;
}
@media only screen and (max-width: 736px) {
	.gsm-hypergonar {
		position: relative;
		width: 100vw !important;
		left: -50vw !important;
		margin-left: 50% !important;
	}
}
@media only screen and (max-width: 979px) {
	.tab-hypergonar {
		position: relative;
		width: 100vw !important;
		left: -50vw !important;
		margin-left: 50% !important;
	}
}
[class*='xw-'] {
	margin-left: auto;
	margin-right: auto;
}
.xw-giant  { max-width: 2520px; }
.xw-wide   { max-width: 1520px; }
.xw-broad  { max-width: 1320px; }
.xw-large  { max-width: 1220px; }
.xw-extend { max-width: 1160px; }
.xw-expand { max-width: 1120px; }
.xw-base   { max-width: 1020px; }
.xw-shrink { max-width: 920px; }
.xw-thin   { max-width: 820px; }
.xw-slim   { max-width: 720px; }
.xw-slight { max-width: 620px; }
.xw-narrow { max-width: 520px; }
.xw-tight  { max-width: 410px; }
.xw-mini   { max-width: 320px; }
.xw-tiny   { max-width: 180px; }
.xw-micro  { max-width: 80px; }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ WIDTHS */
.w-10, .w-20, .w-30, .w-40, .w-50, .w-60, .w-70, .w-80, .w-90, .w-100, .w-half, .w-third, .w-quater {
	width: 100%;
}
.h-100 {
	height: 100%;
}
@media only screen and (min-width: 737px) {
	.w-10 { width: calc(10% - var(--gut)); }
	.w-20 { width: calc(20% - var(--gut)); }
	.w-30 { width: calc(30% - var(--gut)); }
	.w-40 { width: calc(40% - var(--gut)); }
	.w-50 { width: calc(50% - var(--gut)); }
	.w-60 { width: calc(60% - var(--gut)); }
	.w-70 { width: calc(70% - var(--gut)); }
	.w-80 { width: calc(80% - var(--gut)); }
	.w-90 { width: calc(90% - var(--gut)); }
	.w-quater { width: 25%; }
	.w-third { width: calc(100% / 3); }
	.w-half { width: 50%; }
	.w-twothirds { width: calc(100% / 1.5); }
	.w-threequarters { width: 75%; }
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~  L A Y - O U T  —  S P A C I N G.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ MARGINS */
.m-auto { margin: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mw-auto { margin-left: auto; margin-right: auto; }
.ml-null { margin-left: 0; }
.mr-null { margin-right: 0; }
.mb-null { margin-bottom: 0; }
.mt-gut { margin-top: var(--gut); }
.mb-gut { margin-bottom: var(--gut); }
.mt-gap { margin-top: var(--gap); }
.mb-gap { margin-bottom: var(--gap); }
.ml-gap { margin-left: var(--gap); }
.mr-gap { margin-right: var(--gap); }
.mw-gap { margin-left: var(--gap); margin-right: var(--gap); }
.mh-gap { margin-top: var(--gap); margin-bottom: var(--gap); }
.mb-space { margin-bottom: var(--space); }
.mr-space { margin-right: var(--space); }
.mw-hollow { margin-left: var(--hollow); margin-right: var(--hollow); }
.mt-hollow { margin-top: var(--hollow); }
.mb-hollow { margin-bottom: var(--hollow); }
.mh-hollow { margin-top: var(--hollow); margin-bottom: var(--hollow); }
.ml-hole { margin-left: var(--hole); }
.mb-hole { margin-bottom: var(--hole); }
.mb-pit { margin-bottom: var(--pit); }
.mb-chasm { margin-bottom: var(--chasm); }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ PADDINGS */
.p-null { padding: 0; }
.p-gut { padding: var(--gut); }
.pw-gut { padding-left: var(--gut); padding-right: var(--gut); }
.ph-gut { padding-top: var(--gut); padding-bottom: var(--gut); }
.p-gap { padding: var(--gap); }
.pw-gap { padding-left: var(--gap); padding-right: var(--gap); }
.ph-gap { padding-top: var(--gap); padding-bottom: var(--gap); }
.p-hollow { padding: var(--hollow); }
.pw-hollow { padding-left: var(--hollow); padding-right: var(--hollow); }
.ph-hollow { padding-top: var(--hollow); padding-bottom: var(--hollow); }
.p-pit { padding: var(--pit); }
.ph-pit { padding-top: var(--pit); padding-bottom: var(--pit); }
.ph-chasm { padding-top: var(--chasm); padding-bottom: var(--chasm); }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~ POSITIONS */
.p-rel {
	position: relative;
}
.p-abs {
	position: absolute;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  L A Y - O U T  —  T A B L E S.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
td {
	text-align: left;
}
th, td {
	padding: .7rem;
}
th:first-child, td:first-child {
	padding-left: 0;
}
th:last-child, td:last-child {
	padding-right: 0;
}
@media only screen and (max-width: 979px) {
	table.labeled {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0 var(--gut);
	}
	table.labeled thead {
		display: none;
	}
	table.labeled tbody tr {
		margin-bottom: var(--gut);
	}
	table.labeled td {
		display: block;
		/*border-bottom: 1px solid var(--mist);*/
		font-size: .8em;
		text-align: right;
	}
	table.labeled td::before {
		content: attr(data-th);
		float: left;
		font-weight: var(--fb);
		text-transform: lowercase;
	}
	table.labeled td:last-child {
		border-bottom: 0;
	}
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  L A Y - O U T  —  F L E X.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.flex {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}
.flex.column {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
.flex.row-r {
	-webkit-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
.flex.column-r {
	-webkit-flex-direction: column-reverse;
	-ms-flex-direction: column-reverse;
	flex-direction: column-reverse;
}
.flex.wrap {
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex.wrap-r {
	-webkit-flex-wrap: wrap-reverse;
	-ms-flex-wrap: wrap-reverse;
	flex-wrap: wrap-reverse;
}
.flex.x-center {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.flex.x-spacebetween {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.flex.x-spacearound {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}
.flex.x-spaceevenly {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-evenly;
	justify-content: space-evenly;
}
.flex.x-start {
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
.flex.x-end {
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.flex.y-start {
	-webkit-box-align: start;
	-ms-flex-align: start;
	-ms-grid-row-align: flex-start;
	align-items: flex-start;
}
.flex.y-center {
	-webkit-box-align: center;
	-ms-flex-align: center;
	-ms-grid-row-align: center;
	align-items: center;
}
.flex.y-end {
	-webkit-box-align: end;
	-ms-flex-align: end;
	-ms-grid-row-align: flex-end;
	align-items: flex-end;
}
.flex > .y-s-start {
	align-self: flex-start;
}
.flex > .y-s-end {
	align-self: flex-end;
}
.flex.f-grow > *,
.flex > .grow { 
	-webkit-box-flex: 1;
	-webkit-flex: 1 auto;
	-ms-flex: 1 auto;
	flex: 1 auto;
	-webkit-flex-grow: 1;
	-webkit-flex-basis: auto;
}
.flex.f-no-grow > *,
.flex.grow > .no-grow {
	-webkit-box-flex: 0;
	-ms-flex-positive: 0;
	flex-grow: 0;
}
.flex.f-no-shrink > *,
.flex > .no-shrink {
	-ms-flex-negative: 0;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
}
.flex.f-shrink > *,
.flex > .shrink {
	-ms-flex-negative: 1;
	-webkit-flex-shrink: 1;
	flex-shrink: 1;
}
.flex.gap {
	gap: var(--gut);
}
@media only screen and (max-width: 736px) {
	.flex.gsm-column {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		gap: var(--gut);
	}
	.flex.gsm-column-r {
		-webkit-flex-direction: column-reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
	}
	.flex.gsm-column > * {
		width: 100%;
		flex-basis: 100%;
	}
}
@media only screen and (max-width: 979px) {
	.flex.tab-column {
		flex-direction: column;
		gap: var(--gut);
	}
	.flex.tab-column > * {
		width: 100%;
		flex-basis: 100%;
	}
}
@media only screen and (max-width: 1120px) {
	.flex.dsk-column {
		flex-direction: column;
		gap: var(--gut);
	}
	.flex.dsk-column > * {
		width: 100%;
		flex-basis: 100%;
	}
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  L A Y - O U T  —  G R I D.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.grid {
	display: grid;
}
.grid.g-center {
	place-content: center center;
}
.grid.g-auto-rows-a {
	grid-auto-rows: auto;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  F I G U R E  —  R A T I O.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~ IMAGE — RATIO */
figure.ratio {
	position: relative;
}
figure.ratio::before {
	content: '';
	display: block;
	width: 100%;
	padding-bottom: 80%;
}
figure.ratio.landscape::before {
	padding-bottom: 75%;
}
figure.ratio.square::before {
	padding-bottom: 100%;
}
figure.ratio.portrait::before {
	padding-bottom: 133%;
}
figure.ratio[style*='--aspect-ratio']::before {
	padding-bottom: var(--aspect-ratio);
}
figure.ratio > div, figure.ratio img, figure.ratio video {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	object-position: 50% 50%;
}
.img-loaded figure.ratio img {
}
figure.ratio.cover img {
	object-fit: cover;
}
figure.ratio.contain img {
	object-fit: contain;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~ IMAGE — BOUND */
.bound, .bound figure {
	height: 100%;
}
.bound figure::before {
	display: none;
}





/*                  ▓▓▓▓▓▓╗▓▓╗     ▓▓╗▓▓▓▓▓▓╗  ▓▓▓▓▓▓╗     ▓▓▓▓▓▓╗▓▓╗  ▓▓╗ ▓▓▓▓▓▓╗ ▓▓╗    ▓▓╗
                   ▓▓╔════╝▓▓║     ▓▓║▓▓╔══▓▓╗▓▓╔════╝    ▓▓╔════╝▓▓║  ▓▓║▓▓╔═══▓▓╗▓▓║    ▓▓║
                   ╚▓▓▓▓▓╗ ▓▓║     ▓▓║▓▓║  ▓▓║▓▓▓▓▓╗▓▓▓▓▓╗╚▓▓▓▓▓╗ ▓▓▓▓▓▓▓║▓▓║   ▓▓║▓▓║ ▓╗ ▓▓║
                    ╚═══▓▓╗▓▓║     ▓▓║▓▓║  ▓▓║▓▓╔══╝╚════╝ ╚═══▓▓╗▓▓╔══▓▓║▓▓║   ▓▓║▓▓║▓▓▓╗▓▓║
                   ▓▓▓▓▓▓╔╝▓▓▓▓▓▓▓╗▓▓║▓▓▓▓▓▓╔╝ ▓▓▓▓▓▓╗    ▓▓▓▓▓▓╔╝▓▓║  ▓▓║╚▓▓▓▓▓▓╔╝╚▓▓▓╔▓▓▓╔╝
~~~~~~~~~~~~~~~~~~ ╚═════╝ ╚══════╝╚═╝╚═════╝  ╚═════╝    ╚═════╝ ╚═╝  ╚═╝ ╚═════╝  ╚══╝╚══╝ 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.flickity-enabled {
	position: relative;
	display: block;
	width: 100%;
}
.flickity-enabled:focus {
	outline: none;
}
.flickity-viewport {
	overflow: hidden;
	position: relative;
	height: 100%;
}
.flickity-slider {
	position: absolute;
	width: 100%;
	height: 100%;
}

/*~~~~~~~~~~~~~~~ SLIDE-SHOW — DRAGGABLE */
.flickity-enabled.is-draggable {
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
	cursor: move;
	cursor: -webkit-grab;
	cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

/*~~~~~~~~~~~~~~~~~~ SLIDE-SHOW — ARROWS */
.flickity-button {
	background: none;
	border: none;
}
.flickity-button:active {
	opacity: .6;
}
.flickity-button:disabled {
	opacity: .3;
	cursor: auto;
	pointer-events: none;
}
.flickity-button-icon {
	fill: var(--dark);
	transition: fill .25s ease, stroke .25s ease;
}
.flickity-prev-next-button {
	position: absolute;
	top: 0;
	width: 4rem;
	height: 4rem;
}
/*.flickity-prev-next-button.previous {
	left: 0;
	cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 100 100"%3E%3Cpath d="M10 50l50 50 5-5-45-45L65 5l-5-5z"/%3E%3C/svg%3E') 0 0, w-resize;
}
.flickity-prev-next-button.next {
	right: 0;
	cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 100 100"%3E%3Cpath d="M90 50l-50 50-5-5 45-45L35 5l5-5z"/%3E%3C/svg%3E') 0 0, e-resize;
}
*/
.flickity-ready .flickity-prev-next-button.previous {
}
.flickity-ready .flickity-prev-next-button.next {
}
.flickity-prev-next-button .flickity-button-icon {
}
.flickity-prev-next-button.previous .flickity-button-icon {
	left: 0;
}
.flickity-prev-next-button.next .flickity-button-icon {
	right: 0;
}

/*~~~~~~~~~~~~~~~~~~~~ SLIDE-SHOW — DOTS */
.flickity-page-dots {
	position: absolute;
	width: 100%;
	padding-bottom: calc(var(--crack) + 1px);
	display: flex;
	justify-content: center;
	transform: translateY(-100%) !important;
}
.flickity-page-dots > * {
	display: inline-block;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0 var(--crack);
	cursor: pointer;
	border-radius: 50%;
	background: hsla(0, 0%, 100%, .7);
	transition: background .25s ease;
}
.flickity-page-dots .is-selected {
	background: var(--capcode);
}
@media only screen and (min-width: 901px) {
	.flickity-page-dots > * {
	}
}
/*
.flickity-page-dots > *::before {
	content: '';
	position: relative;
	display: block;
	width: .4em;
	height: .4em;
	top: .8em;
	left: .8em;
	background: red;
	border-radius: 50%;
	transform: scale(1);
	transition: transform .25s ease;
}
.flickity-page-dots .is-selected::before {
	transform: scale(2.25);
}
*/

/*~~~~~~~~~~~~~ SLIDE-SHOW — FULL-SCREEN */
html.is-flickity-fullscreen {
	overflow: hidden;
}
.flickity-enabled.is-fullscreen {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: hsla(0, 0%, 0%, .9);
	padding-bottom: 2em;
	z-index: 1;
}
.flickity-fullscreen-button {
	display: block;
	right: 1em;
	bottom: -1.9em;
	width: 24px;
	height: 24px;
	border-radius: 4px;
}
.flickity-enabled.is-fullscreen .flickity-fullscreen-button {
	bottom: 1em;
}
.flickity-fullscreen-button-exit { display: none; }
.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit { display: block; }
.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view { display: none; }
.flickity-fullscreen-button .flickity-button-icon {
	position: absolute;
	width: 16px;
	height: 16px;
	left: 4px;
	top: 4px;
}

/*~~~~~~~~~~~~~ SLIDE-SHOW — FADE EFFECT */
.flickity-enabled.is-fade .flickity-slider > * {
	pointer-events: none;
	z-index: 0;
}
.flickity-enabled.is-fade .flickity-slider > .is-selected {
	pointer-events: auto;
	z-index: 1;
}

/*~~~~~~~~~~ SLIDE-SHOW — COVERING MODAL */
#modalSlideshow button {
	background: hsla(0, 0%, 0%, .125);
	animation: none;
}

/*~~~~~~~~~~~~~~~~~~ SLIDE-SHOW — HOVERS */
@media all and (any-hover: hover) {
	.flickity-button:hover {
		background: none;
	}
	.flickity-page-dots .dot:not(.is-selected):hover::before {
		transform: scale(1.75);
	}
	.flickity-button:hover .flickity-button-icon {
	}
}





/*—~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/