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

Z-INDEX
-----------------------
#goTopButton      :  99
#siteHeader       : 100
#siteSocialNav    : 101
#worksFilter      : 101
#cc-main (cookie) : 102
.covering         : 103
#siteOsd          : 104
#siteSplash       : 200

/*                                                              ▓▓▓▓▓▓╗ ▓▓╗▓▓▓▓▓▓▓▓╗ ▓▓▓▓▓▓╗
                                                               ▓▓╔════╝ ▓▓║╚══▓▓╔══╝▓▓╔════╝
                                                               ╚▓▓▓▓▓╗  ▓▓║   ▓▓║   ▓▓▓▓▓╗  
                                                                ╚═══▓▓╗ ▓▓║   ▓▓║   ▓▓╔══╝  
                                                               ▓▓▓▓▓▓╔╝ ▓▓║   ▓▓║   ╚▓▓▓▓▓▓╗
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ╚═════╝  ╚═╝   ╚═╝    ╚═════╝ 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
body {}

/*~~~~~~~~~~~~~~~~~~~~~~~~~ SITE WRAPPER */
#siteFrame {
	position: relative;
	width: 100%;
	min-height: var(--vh, 100vh);
	pointer-events: none;
}
.dom-ready #siteFrame {
	pointer-events: auto;
}
#siteDevice {
	z-index: -1000;
	display: block;
	visibility: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  S I T E  —  A R E A S.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~ SITE HEADER */
#siteHeader {
	z-index: 100;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SITE MAIN */
#siteMain {
	min-height: calc(var(--vh, 100vh) - 0px);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~ SITE LOADER */
.site-loaded #siteLoader {
	z-index: -1;
	content: '';
	position: fixed;
	display: block;
	left: 50%;
	top: 50%;
	width: 8rem;
	aspect-ratio: 1;
	padding: 1rem;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	mask: conic-gradient(black 0 0) content-box exclude, conic-gradient(black 0 0);
	filter: blur(.75rem);
	visibility: visible;
}
#siteLoader::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0;
	background: conic-gradient(transparent 25%, var(--capcode), transparent 75%);
	animation: 1.5s linear .5s infinite normal none running loader-animation;
}
@keyframes loader-animation {
	from { rotate: 0; opacity: 1; }
	to { rotate: 1turn; opacity: 1; }
}
.dom-ready #siteLoader {
	visibility: hidden;
}
.dom-ready #siteLoader::before {
	animation: none;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~ SITE FOOTER */
#siteFooter {
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~ SITE SOCIAL */
#siteSocialNav {
	z-index: 101;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	color: white;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  S I T E  —  S O C I A L.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#siteSocialNav ul {
	position: absolute;
	bottom: 0;
	right: -1px;
	transform: translateY(-4rem);
	flex-direction: column;
}
.socialNav {
	display: flex;
	align-items: center;
}
.socialPictoList {
	display: flex;	
}
.socialPictoList li {
	overflow: hidden;
	margin-bottom: 0;
}
.socialPictoList.picto a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	opacity: 1;
	transition: opacity .25s ease;
}
.socialPictoList svg {
	display: inline-block;
	overflow: visible;
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.socialPictoList.picto svg {
	display: block;
	width: 60%;
	height: 60%;
}
.socialPictoList .linkedin svg {
	margin-top: -.1em;
}
.socialPictoList .instagram {
	order: 1;
}
.socialPictoList .facebook {
	order: 2;
}
.socialPictoList .youtube {
	order: 3;
}
.socialPictoList .linkedin {
	order: 4;
}
.socialPictoList .email {
	order: 2;
}
/* Hover */
@media all and (any-hover: hover) {
	.socialPictoList a:hover {
		opacity: .6;
	}
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  S I T E  —  M O D A L.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#siteModal {
}
.overlay {
}
#modalFrame {
	position: relative;
	min-height: 100%;
	padding: 0;
}
#modalBox {
	position: relative;
}
#modalBox {
	min-height: var(--vh, 100vh);
	transform: translateX(101%);
}
.cc-ready #cc-main .cc--anim .pm {
	visibility: visible;
	opacity: 1;
}
.site-loaded #modalBox, .cc-ready #cc-main .cc--anim .pm {
	transition: transform .25s ease-in, opacity .25s ease-in;
}
.win-resizing #modalBox {
	transition: none !important;
}
.active #modalBox, .show--preferences #cc-main .cc--anim .pm {
	transform: none;
	transition: transform .6s cubic-bezier(.23, 1, .32, 1), opacity .5s ease-out;
}
#modalBox > div {
	background: var(--canvas);
}
#modalBox article {
	padding: var(--hollow) var(--edge);
}
/* Close */
.box [type='reset'], .pm__close-btn {
	z-index: 1;
	position: absolute;
	right: var(--crack);
	top: var(--crack);
	transform: scale(.6);
}
.locked [type='reset'] {
	display: none;
}


/*~~~~~~~~~~~~~~  S I T E  —  O N - S C R E E N   D I S P L A Y.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#siteOsd {
	z-index: 104;
	position: fixed;
	overflow: hidden;
	width: 100vw;
	height: 10rem;
	left: 0;
	bottom: 0;
	pointer-events: none;
}
#siteOsd > div {
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
	text-align: center;
	color: white;
	font-weight: 700;
	background: var(--period);
	will-change: transform;
	transform: translateY(100%);
	transition: transform .25s ease;
}
#siteOsd > div.load {
	background: grey;
}
#siteOsd > div.success {
	background: var(--capcode);
}
#siteOsd > div.fail {
	background: hsl(350, 95%, 50%);
}
#siteOsd > div.warn {
	background: hsl(18, 100%, 56%);
}
#siteOsd > div.info {
	background: hsl(200, 100%, 30%);
}
#siteOsd > .active {
	transform: translateY(0%);
}





/*                                          ▓▓╗  ▓▓╗ ▓▓▓▓▓▓╗ ▓▓▓▓▓╗ ▓▓▓▓▓▓╗  ▓▓▓▓▓▓╗▓▓▓▓▓▓╗
                                            ▓▓║  ▓▓║▓▓╔════╝▓▓╔══▓▓╗▓▓╔══▓▓╗▓▓╔════╝▓▓╔══▓▓╗
                                            ▓▓▓▓▓▓▓║▓▓▓▓▓╗  ▓▓▓▓▓▓▓║▓▓║  ▓▓║▓▓▓▓▓╗  ▓▓▓▓▓▓╔╝
                                            ▓▓╔══▓▓║▓▓╔══╝  ▓▓╔══▓▓║▓▓║  ▓▓║▓▓╔══╝  ▓▓╔══▓▓╗
                                            ▓▓║  ▓▓║ ▓▓▓▓▓▓╗▓▓║  ▓▓║▓▓▓▓▓▓╔╝╚▓▓▓▓▓▓╗▓▓║  ▓▓║
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝╚═════╝  ╚═════╝╚═╝  ╚═╝
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#headerFrame {
	pointer-events: none;
	position: -webkit-sticky;
	position: sticky;
	position: absolute;
	/*overflow: hidden;*/
	top: 0;
	width: 100%;
	padding: 0;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
	background: transparent;
	opacity: .99;
	transform: translateY(0);
	transition: background .1s ease-in, color .15s ease-in;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  H E A D E R  —  B U R G E R.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#headerSwitch {
	position: absolute;
	width: 0;
	height: 0;
	opacity: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}
#headerKnob {
	z-index: 3;
	width: var(--h-h);
	height: var(--h-h);
	margin: calc(-1 * var(--gut));
	cursor: pointer;
	pointer-events: auto;
	opacity: 1;
	/*filter: drop-shadow(0 1px 1px var(--rock));*/
	transition: opacity .2s ease-in 0s, .5s z-index step-end;
}
#headerKnob span {
	display: block;
	position: absolute;
	width: 40%;
	height: 2px;
	right: var(--blank);
	border-radius: 4px;
	background: currentColor;
	transform: rotate(0);
	transition: width .4s ease-in-out, left .4s ease-in-out, transform .25s ease-in-out;
}
/* Burger */
#headerKnob span:nth-child(1) {
	top: 35%;
}
#headerKnob span:nth-child(2), #headerKnob span:nth-child(3) {
	top: 48%;
}
#headerKnob span:nth-child(4) {
	top: 61%;
}
/* Cross */
#headerSwitch:checked ~ #headerKnob {
	color: var(--capcode);
}
#headerSwitch:checked ~ #headerKnob span:nth-child(1), #headerSwitch:checked ~ #headerKnob span:nth-child(4) {
	opacity: 0;
}
#headerSwitch:checked ~ #headerKnob span:nth-child(2), #headerSwitch:checked ~ #headerKnob span:nth-child(3) {
	/*width: calc(100% - 1px);*/
	/*left: calc(var(--edge) - 2px);*/
}
#headerSwitch:checked ~ #headerKnob span:nth-child(2) {
	transform: rotate(45deg);
}
#headerSwitch:checked ~ #headerKnob span:nth-child(3) {
	transform: rotate(-45deg);
}


/*~~~~~~~~~~~~~~~~~~~~~~~~  H E A D E R  —  M E N U  —  M A I N.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#headerMenuPane {
	z-index: 1;
	position: fixed;
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	width: 100vw;
	height: 100dvh;
	top: 0;
	left: 0;
	pointer-events: none;
	transform: translateX(0%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	background: hsla(0, 0%, 100%, .75);
	backdrop-filter: blur(0);
}
.site-loaded #headerMenuPane {
	transition: opacity .6s ease;
}
.win-resizing #headerMenuPane {
	transition: none;
}
#headerSwitch:checked ~ #headerMenuPane {
	pointer-events: auto;
	opacity: 1;
	backdrop-filter: blur(3px);
	transition: opacity .8s ease;
}

/*~~~~~~~~~~~~~~~ HEADER MENU — PANE NAV */
#headerMenuPaneNav {
	order: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	/*height: var(--vh, 100vh);*/
	padding: var(--hollow) var(--pit);
	opacity: 0;
	transform: translateX(101%);
	/*box-shadow: var(--shade);*/
}
.site-loaded #headerMenuPaneNav {
	transition: transform .250s ease-in, opacity .250s ease-in;
}
.win-resizing #headerMenuPaneNav {
	transition: none;
}
#headerSwitch:checked ~ #headerMenuPane > #headerMenuPaneNav {
	opacity: 1;
	transform: translateX(0%);
	transition: transform .6s cubic-bezier(.23, 1, .32, 1), opacity .5s ease-out;
}

/*~~~~~~~~~~~~~ HEADER MENU — LIST ITEMS */
.headerMenuPaneList {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	font-size: var(--h3);
	font-weight: 500;
	transform: translateX(50%);
	transition: transform 0s ease-in .250s;
}
#headerSwitch:checked ~ #headerMenuPane .headerMenuPaneList {
	transform: translateX(0);
	transition: transform .3s ease-out .2s;
}
.headerMenuPaneList li {
}
.headerMenuPaneList a, .headerMenuPaneList button {
	display: block;
	align-items: flex-start;
	margin: 0;
	padding: .4em 0;
	font: inherit var(--ff);
	text-transform: none;
	cursor: pointer;
}
.headerMenuPaneList button {
	display: none;
}
.headerMenuPaneList a span {
	display: block;
}

/*~~~~~~~~~~~~ HEADER MENU — FRAMED ITEM */
.headerMenuPaneList .butt-stroke {
	padding: .25em .5em;
}

/*~~~~~~~~~~~~~~~~~~~~~~ HEADER — HOVERS */
@media all and (any-hover: hover) {
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  H E A D E R  —  L O G O.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.siteLogo a {
	display: block;
	color: currentColor;
	pointer-events: auto;
	/*transition: color .15s ease;*/
}
.siteLogo path {
	fill: currentColor;
}
#headerFrame .siteLogo {
	position: relative;
	width: var(--h-w);
	height: var(--h-w);
}
#headerFrame .siteLogo a {
	opacity: 1;
	transition: opacity .2s ease;
}
#headerFrame .siteLogo figure {
	display: flex;
}
#headerFrame .siteLogo img {
}
@media all and (any-hover: hover) {
	#headerFrame .siteLogo a:hover {
		opacity: .6;
	}
}





/*                                                        ▓▓▓▓▓▓╗  ▓▓▓▓▓▓╗ ▓▓▓▓▓▓╗ ▓▓╗   ▓▓╗
                                                          ▓▓╔══▓▓╗▓▓╔═══▓▓╗▓▓╔══▓▓╗╚▓▓╗ ▓▓╔╝
                                                          ▓▓▓▓▓▓╔╝▓▓║   ▓▓║▓▓║  ▓▓║ ╚▓▓▓▓╔╝ 
                                                          ▓▓╔══▓▓╗▓▓║   ▓▓║▓▓║  ▓▓║  ╚▓▓╔╝  
                                                          ▓▓▓▓▓▓╔╝╚▓▓▓▓▓▓╔╝▓▓▓▓▓▓╔╝   ▓▓║   
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ╚═════╝  ╚═════╝ ╚═════╝    ╚═╝   
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#mainFrame {
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  P A G E   S W I T C H.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
[data-area='–'], [data-area='_'] {
	--dur-off: 250ms;
	--dur-on: 500ms;
}
.–-off [data-area='–'] {
	opacity: 0;
}

/*~~~~~~~~~~~~~~~ SWITCH — LEFT TO RIGHT */
.–-switch-off-ltr [data-area='–'] {
	animation: 150ms ease-in 0s 1 normal forwards running –-switch-off-ltr-animation;
}
.–-switch-on-ltr [data-area='–'] {
	animation: 200ms ease-out 0s 1 normal backwards running –-switch-on-ltr-animation;
}
@keyframes –-switch-off-ltr-animation {
	from { opacity: 1; transform: translateX(0); }
	to { opacity: 0; transform: translateX(2.5rem);	}
}
@keyframes –-switch-on-ltr-animation {
	from { opacity: 0; transform: translateX(-2.5rem); }
	to { opacity: 1; transform: translateX(0); }
}

/*~~~~~~~~~~~~~~~ SWITCH — RIGHT TO LEFT */
.–-switch-off-rtl [data-area='–'] {
	animation: 150ms ease-in 0s 1 normal forwards running –-switch-off-rtl-animation;
}
.–-switch-on-rtl [data-area='–'] {
	animation: 200ms ease-out 0s 1 normal backwards running –-switch-on-rtl-animation;
}
@keyframes –-switch-off-rtl-animation {
	from { opacity: 1; transform: translateX(0); }
	to { opacity: 0; transform: translateX(-2.5rem); }
}
@keyframes –-switch-on-rtl-animation {
	from { opacity: 0; transform: translateX(2.5rem); }
	to { opacity: 1; transform: translateX(0); }
}

/*~~~~~~~~~~~~~~~~~~~~~~~~ SWITCH — FADE */
.–-switch-off-fade [data-area='–'] {
	animation: var(--dur-off) ease-out 0s 1 normal forwards running –-switch-off-fade-animation;
}
.–-switch-on-fade [data-area='–'] {
	animation: var(--dur-on) ease-out 0s 1 normal backwards running –-switch-on-fade-animation;
}
/*  */
.‾-switch-off-ltr [data-area='‾'], .‾-switch-off-rtl [data-area='‾'], .‾-switch-off-fade [data-area='‾'],
._-switch-off-ltr [data-area='_'], ._-switch-off-rtl [data-area='_'], ._-switch-off-fade [data-area='_'] {
	animation: .001s ease-out 0s 1 normal forwards running switch-off-no-animation;
}
.‾-switch-on-ltr [data-area='‾'], .‾-switch-on-rtl [data-area='‾'], .‾-switch-on-fade [data-area='‾'],
._-switch-on-ltr [data-area='_'], ._-switch-on-rtl [data-area='_'], ._-switch-on-fade [data-area='_'] {
	animation: .001s ease-out 0s 1 normal backwards running switch-on-no-animation;
}
@keyframes –-switch-off-fade-animation {
	from { opacity: 1; /*filter: blur(0);*/ }
	to { opacity: 0; /*filter: blur(3px);*/ }
}
@keyframes –-switch-on-fade-animation {
	from { opacity: 0; /*filter: blur(3px);*/ }
	to { opacity: 1; /*filter: blur(0);*/ }
}
@keyframes switch-off-no-animation {
	from { opacity: .99; }
	to { opacity: .99; }
}
@keyframes switch-on-no-animation {
	from { opacity: .99; }
	to { opacity: .99; }
}

/*~~~~~~~~~~~~~~~ SWITCH — BOTTOM TO TOP */
.–-switch-off-btt [data-area='–'] {
	animation: 150ms ease-in 0s 1 normal forwards running –-switch-off-btt-animation;
}
.–-switch-on-btt [data-area='–'] {
	animation: 200ms ease-out 0s 1 normal backwards running –-switch-on-btt-animation;
}
@keyframes –-switch-off-btt-animation {
	from { opacity: 1; transform: translateY(0); }
	to { opacity: 0; transform: translateY(-2.5rem); }
}
@keyframes –-switch-on-btt-animation {
	from { opacity: 0; transform: translateY(2.5rem); }
	to { opacity: 1; transform: translateY(0); }
}

/*~~~~~~~~~~~~~~~ SWITCH — TOP TO BOTTOM */
.–-switch-off-ttb [data-area='–'] {
	animation: 150ms ease-in 0s 1 normal forwards running –-switch-off-ttb-animation;
}
.–-switch-on-ttb [data-area='–'] {
	animation: 200ms ease-out 0s 1 normal backwards running –-switch-on-ttb-animation;
}
@keyframes –-switch-off-ttb-animation {
	from { opacity: 1; transform: translateY(0); }
	to { opacity: 0; transform: translateY(2.5rem); }
}
@keyframes –-switch-on-ttb-animation {
	from { opacity: 0; transform: translateY(-2.5rem); }
	to { opacity: 1; transform: translateY(0); }
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  E F F E C T  —  A P P E A R.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.appear > * {
	opacity: 0;
	transition: transform .8s cubic-bezier(.21, .61, .35, 1), opacity .65s ease-out;
	transition-delay: 1s;
}
.appear.up > * {
	transform: translateY(var(--hole));
}
.appear.down > * {
	transform: translateY(calc(-1 * var(--hole)));
}
.appear.right > *, .appear > .right {
	transform: translateX(calc(-1 * var(--hole)));
}
.appear.left > *, .appear > .left {
	transform: translateX(var(--hole));
}
/* Scoped */
.appear.scoped > * {
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}
.appear.scoped > :nth-child(2) { transition-delay: .175s; }
.appear.scoped > :nth-child(3) { transition-delay: .350s; }
.appear.scoped > :nth-child(4) { transition-delay: .525s; }
.appear.scoped > :nth-child(5) { transition-delay: .700s; }
.appear.scoped > :nth-child(6) { transition-delay: .875s; }
.appear.scoped > :nth-child(7) { transition-delay: 1.050s; }
.appear.scoped > :nth-child(8) { transition-delay: 1.225s; }
.appear.scoped > :nth-child(9) { transition-delay: 1.400s; }
.appear.scoped > :nth-child(10) { transition-delay: 1.575s; }
.appear.scoped > :nth-child(11) { transition-delay: 1.750s; }
.appear.scoped > :nth-child(12) { transition-delay: 1.925s; }
.appear.scoped > :nth-child(13) { transition-delay: 2.100s; }
.appear.scoped > :nth-child(14) { transition-delay: 2.275s; }
.appear.scoped > :nth-child(15) { transition-delay: 2.450s; }


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  S L I D E - S H O W.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.slideshowList li {
	position: relative;
}
.slideshowList .flickity-slider li {
	position: absolute;
	width: 100%;
	margin: 0;
}
.slideshowList.bound > li, .slideshowList.bound .flickity-viewport li {
	height: 100%;
}
.slideshowList figure.img {
	position: relative;
	width: 100%;
}
.slideshowList figure.img figcaption {
	display: block;
}
.slideshowList figure.img footer {
	left: auto;
	top: auto;
	bottom: .25em;
	right: 0;
	transform: none;
	writing-mode: unset;
	text-orientation: unset;
}
.slideshowList figure.img footer small {
	padding: var(--breach) var(--gut);
	letter-spacing: normal;
	font-size: 1.1rem;
	font-weight: 600;
	color: white;
	opacity: .75;
	text-shadow: var(--ts);
}
#modalSlideshow .slideshowList {
	overflow: hidden;
}
#modalSlideshow .slideshowList img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}
[data-rel-modal='modalSlideshow'] li img {
	cursor: pointer;
	cursor: nesw-resize;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  B U T T O N  —  G O - T O.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.navButton, .pm__close-btn {
	z-index: 8;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 5rem;
	height: 5rem;
	padding: 0;
	color: white;
	fill: white;
	stroke: none;
	stroke-width: 1px;
	stroke-linejoin: round;
	border-radius: 2.5em;
	background: var(--capcode);
	opacity: 1;
	transition: opacity .25s ease;
}
.navButton svg, .pm__close-btn svg {
	width: 48%;
	height: 48%;
	transition: fill .25s ease;
}

/*~~~~~~~~~~~~~~~~~~ BUTTON GO-TO — DOWN */
#goDownButton {
	position: absolute;
	left: 50vw;
	bottom: calc(var(--gap) + (var(--vh, 100vh) - 100%));
	transform: translateX(-50%);
	opacity: 1;
	background: none;
	animation: 5s ease-out 0s infinite normal none running go-down-animation;
}
@keyframes go-down-animation {
	0% {
		transform: translate(-50%, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	50%, 100% {
		transform: translate(-50%, var(--gut));
		opacity: 0;
	}
}
#goDownButton svg {
	width: 90%;
	height: 90%;
	margin-top: 5%;
	transition: fill .25s ease;
}

/*~~~~~~~~~~~~~~~~~~~ BUTTON GO-TO — TOP */
#goTopButton {
	z-index: 99;
	position: fixed;
	right: 2px;
	bottom: calc(2.5 * var(--gut));
	transform: scale(.65) translateY(250%);
	transition: transform .25s ease, opacity .25s ease;
}
.sneak #goTopButton,
.scrolled #goTopButton {
	transform: scale(.6) translateY(0%);
}

/*~~~~~~~~~~~~~~~~ BUTTON GO-TO — HOVERS */
@media all and (any-hover: hover) {
	.navButton:hover {
		opacity: .6;
	}
	.navButton:hover::before {
		transform: scale(1.15);
	}
	#goDownButton:hover::after {
		animation: 1s ease-out 0s infinite alternate both running go-down-animation-over;
	}
}





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

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  L I S T I N G  —  M O S A Ï C.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.mosaicList {
	display: grid;
	grid-gap: 0;
	grid: auto-flow 1px / 1fr;
	margin: 0 calc(-1 * var(--edge) / 4);
}
.gecko .mosaicList {
	grid-auto-rows: 10px;
}


/*~~~~~~~~~~~~~~~~~~~~~~ LISTING — ITEMS */
.mosaicList li {
}
.mosaicList li > a {
	display: block;
	padding: calc(var(--edge) / 4);
}
.mosaicList article {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}





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

/*~~~~~~~~~~~~~~~~~~~~~~~ PAGE — ARTICLE */
.pageArticle, #defaultArticle {
}
.pageContent {
	padding-top: var(--h-h) !important;
	min-height: var(--vh, 100vh);
}
.pageHero + .pageContent {
	padding-top: 0;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~ BROWSE — BACK */
.browseBack {
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~ HYPERLINKS */
.content a:not(.button) {
	color: var(--capcode);
	font-weight: 500;
	cursor: pointer;
	background: linear-gradient(to right, currentColor, currentColor), linear-gradient(to right, var(--smog), var(--smog));
	background-size: 0 1px, 100% 1px;
	background-position: 0% 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background-size .4s ease;
}
@media all and (any-hover: hover) {
	.content a:not(.button):hover {
		background-size: 100% 1px, 100% 1px;
	}
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~ PARAGRAPHS */
.content {
	text-wrap: pretty;
}
.gecko .content {
	text-wrap: balance;
}

/*~~~~~~~~~~~~~~~~~~~~~~ UN-ORDERED LSIT */
.content ul {
	padding-left: 1.1em;
	list-style-position: outside;
	/* list-style-type: '\2022\00A0\00A0'; */
	list-style-type: disc;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ COLUMNS */
.column {
	columns: var(--column) auto;
	column-gap: var(--gap);
}


/*~~~~~~~~~~~~~~~~~~  T A G S  —  V E R T I C A L   M A R G I N.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.pageArticle > * {
}
.content *:not(br, fieldset, label, input, textarea, img, span) {
	margin-bottom: var(--cmb);
}
.content > header, .content > section, .content > main, .content > figure {
	margin-bottom: calc(var(--cmb) * 2);
}
.content li, .content li p {
	margin-bottom: calc(var(--cmb) * .25);
}
.content h1, .content h2, .content h3 {
	margin-top: calc(var(--cmb) * 2);
}
.content h4, .content h5 {
	margin-top: calc(var(--cmb) * 2);
}
.content :last-child, .pageArticle > section:last-of-type {
	margin-bottom: 0;
}
.content :first-child, .pageArticle > section:first-of-type {
    margin-top: 0;
}





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





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





/*                  ▓▓╗  ▓▓╗ ▓▓▓▓▓▓╗ ▓▓▓╗   ▓▓▓╗ ▓▓▓▓▓▓╗    ▓▓▓▓▓▓╗  ▓▓▓▓▓╗  ▓▓▓▓▓▓╗  ▓▓▓▓▓▓╗
                    ▓▓║  ▓▓║▓▓╔═══▓▓╗▓▓▓▓╗ ▓▓▓▓║▓▓╔════╝    ▓▓╔══▓▓╗▓▓╔══▓▓╗▓▓╔════╝ ▓▓╔════╝
                    ▓▓▓▓▓▓▓║▓▓║   ▓▓║▓▓╔▓▓▓▓╔▓▓║▓▓▓▓▓╗▓▓▓▓▓╗▓▓▓▓▓▓╔╝▓▓▓▓▓▓▓║▓▓║  ▓▓▓╗▓▓▓▓▓╗  
                    ▓▓╔══▓▓║▓▓║   ▓▓║▓▓║╚▓▓╔╝▓▓║▓▓╔══╝╚════╝▓▓╔═══╝ ▓▓╔══▓▓║▓▓║   ▓▓║▓▓╔══╝  
                    ▓▓║  ▓▓║╚▓▓▓▓▓▓╔╝▓▓║ ╚═╝ ▓▓║ ▓▓▓▓▓▓╗    ▓▓║     ▓▓║  ▓▓║╚▓▓▓▓▓▓╔╝ ▓▓▓▓▓▓╗
~~~~~~~~~~~~~~~~~~~ ╚═╝  ╚═╝ ╚═════╝ ╚═╝     ╚═╝ ╚═════╝    ╚═╝     ╚═╝  ╚═╝ ╚═════╝  ╚═════╝
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#homeArticle {
	display: flex;
	/*flex-direction: column;*/
	/*flex-flow: row nowrap;*/
	height: 100%;
	overflow-x: hidden;
	/*width: 5000px;*/
}
#homeArticle > div {
	width: 600px;
	flex-shrink: 0;
	height: 100%;
}
#homeArticle > div > figure {
	display: flex;
	height: 100%;
}
#homeArticle > div > figure > img {
	height: auto;
	width: 150%;
	max-width: 150%;
	margin: unset;
	object-fit: cover;
	will-change: transform;
}





/*                                        ▓▓▓▓▓▓╗ ▓▓▓▓▓▓╗  ▓▓▓▓▓▓╗ ▓▓▓▓▓▓▓▓╗ ▓▓▓▓▓▓╗▓▓▓▓▓▓╗ 
                                         ▓▓╔════╝▓▓╔═══▓▓╗▓▓╔═══▓▓╗╚══▓▓╔══╝▓▓╔════╝▓▓╔══▓▓╗
                                         ▓▓▓▓▓╗  ▓▓║   ▓▓║▓▓║   ▓▓║   ▓▓║   ▓▓▓▓▓╗  ▓▓▓▓▓▓╔╝
                                         ▓▓╔══╝  ▓▓║   ▓▓║▓▓║   ▓▓║   ▓▓║   ▓▓╔══╝  ▓▓╔══▓▓╗
                                         ▓▓║     ╚▓▓▓▓▓▓╔╝╚▓▓▓▓▓▓╔╝   ▓▓║   ╚▓▓▓▓▓▓╗▓▓║  ▓▓║
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ╚═╝      ╚═════╝  ╚═════╝    ╚═╝    ╚═════╝╚═╝  ╚═╝
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#footerFrame {
}







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