html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
form,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

ul {
	list-style: none;
}

button,
input,
select,
textarea {
	margin: 0;
}

html {
	box-sizing: border-box;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

img,
video {
	max-width: 100%;
	height: auto;
}

iframe {
	border: 0;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
}

td,
th {
	padding: 0;
}

td:not( [ align ] ),
th:not( [ align ] ) {
	text-align: left;
}

a {
	text-decoration: none;
}

img {
	display: block;
}

img[ alt="" ],
img:not( [ alt ] ) {
	border: 1px dashed red;
}

button {
	padding: 0;
	background: none;
	border: 0;
	outline: none;
	font-family: inherit;
}

input[ type=number ]::-webkit-inner-spin-button,
input[ type=number ]::-webkit-outer-spin-button {
	margin: 0;
	appearance: none;
}

::-ms-clear {
	display: none;
}

@keyframes blink-1 {
	0% {
		opacity: 1
	}

	1% {
		opacity: 0
	}

	4% {
		opacity: .8
	}

	8% {
		opacity: 0
	}

	12% {
		opacity: 0
	}

	15% {
		opacity: .4
	}

	18% {
		opacity: 1
	}

	21% {
		opacity: 0
	}

	23% {
		opacity: 0
	}

	31% {
		opacity: .6
	}

	100% {
		opacity: 1
	}

}

@keyframes blink-2 {
	0% {
		opacity: 1
	}

	1% {
		opacity: 1
	}

	2% {
		opacity: 1
	}

	4% {
		opacity: 0
	}

	10% {
		opacity: 1
	}

	13% {
		opacity: .4
	}

	15% {
		opacity: .4
	}

	17% {
		opacity: 1
	}

	20% {
		opacity: .5
	}

	21% {
		opacity: .5
	}

	25% {
		opacity: 1
	}

	29% {
		opacity: 1
	}

	30% {
		opacity: .8
	}

	32% {
		opacity: 1
	}

	85% {
		opacity: 1
	}

	100% {
		opacity: 1
	}

}

@keyframes blink-3 {
	0% {
		opacity: 1
	}

	1% {
		opacity: 1
	}

	2% {
		opacity: 1
	}

	4% {
		opacity: 0
	}

	10% {
		opacity: 1
	}

	13% {
		opacity: .4
	}

	15% {
		opacity: .4
	}

	17% {
		opacity: 1
	}

	20% {
		opacity: .5
	}

	21% {
		opacity: .5
	}

	25% {
		opacity: 1
	}

	29% {
		opacity: 1
	}

	30% {
		opacity: .8
	}

	32% {
		opacity: 1
	}

	85% {
		opacity: 1
	}

	100% {
		opacity: 1
	}

}

@keyframes scrolling {
	100% {
		transform: translateX( -50% );
	}

}

@keyframes rotate {
	100% {
		transform: rotate( 360deg )
	}

}

html {
	--timing-function: cubic-bezier( .55, 0, .1, 1 );
	--color-white: #eeeeee;
	--color-black: #000000;
	--color-grey: #666666;
	--color-green: #25b69b;
	--color-pink: #c679a7;
	--color-yellow: #fac35f;
	--font-family-a: "A";
	--font-family-b: "B";
	--font-family-c: "C";
	--font-size-xxl: 4.5rem;
	--font-size-xl: 3.5rem;
	--font-size-l: 2.25rem;
	--font-size-m: 1.6rem;
	--font-size-s: 1.4rem;
	--font-size-xs: 1.2rem;
	--font-size-xxs: 1rem;
	--line-height: 1.8;
	--border-size: 1px;
	--border-color: transparent;
	--background-color: rgba( 0, 0, 0, 0 );
	--border-color: rgba( 255, 255, 255, 1 );
	--margin-m: 40px;
	--margin-s: 20px;
	--margin-xs: 10px;
	text-rendering: geometricPrecision;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 10px;
	font-family: var( --font-family-a );
	color: var( --color-white );
	user-select: none;
}

body {
	font-size: var( --font-size-m );
	background-color: var( --color-black );
}

[ path="/virtual-miniature" ] body,
[ path="/contact" ] body,
[ path="/photogrammetry" ] body,
[ path="/miniature-street-view" ] body,
[ path="/works" ][ list="places" ] body,
[ path="/works" ][ list="sphere" ] body,
[ path="/works" ][ list="particles" ] body {
	overflow: hidden;
}

h3 {
	font-family: var( --font-family-b );
}

h4 {
	font-family: var( --font-family-a );
}

p {
	line-height: var( --line-height );
}

*::-webkit-scrollbar {
	display: none;
}

::selection {
	color: var( --color-white );
	background: var( --color-black );
}

[ font-style-title ] {
	font-family: var( --font-family-b );
}

[ font-style-title ]:first-line {
	font-family: var( --font-family-a );
	font-size: 1.25em;
}

[ blurred-background ] {
	--blur: blur( 10px );
	backdrop-filter: var( --blur );
	-webkit-backdrop-filter: var( --blur );
}

[ view ] {
	opacity: 0;
}

[ view ][ hidden ] {
	display: none;
}

[ view-exit ] [ view ]:not( projects-views ) {
	opacity: 0;
}

[ view-enter ] [ view ]:not( projects-views ) {
	opacity: 1;
}

@font-face {
	font-family: 'A';
	src: url('/fonts/A.woff2') format('woff2'), url('/fonts/A.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'B';
	src: url('/fonts/B.woff2') format('woff2'), url('/fonts/B.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2'), url('/fonts/JetBrainsMono-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-ExtraBold.woff2') format('woff2'), url('/fonts/JetBrainsMono-ExtraBold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2'), url('/fonts/JetBrainsMono-ExtraBoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-ExtraLight.woff2') format('woff2'), url('/fonts/JetBrainsMono-ExtraLight.woff') format('woff');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-BoldItalic.woff2') format('woff2'), url('/fonts/JetBrainsMono-BoldItalic.woff') format('woff');
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-Italic.woff2') format('woff2'), url('/fonts/JetBrainsMono-Italic.woff') format('woff');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-LightItalic.woff2') format('woff2'), url('/fonts/JetBrainsMono-LightItalic.woff') format('woff');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-SemiBoldItalic.woff2') format('woff2'), url('/fonts/JetBrainsMono-SemiBoldItalic.woff') format('woff');
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-SemiBold.woff2') format('woff2'), url('/fonts/JetBrainsMono-SemiBold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-ThinItalic.woff2') format('woff2'), url('/fonts/JetBrainsMono-ThinItalic.woff') format('woff');
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-Medium.woff2') format('woff2'), url('/fonts/JetBrainsMono-Medium.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-Thin.woff2') format('woff2'), url('/fonts/JetBrainsMono-Thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-Light.woff2') format('woff2'), url('/fonts/JetBrainsMono-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-MediumItalic.woff2') format('woff2'), url('/fonts/JetBrainsMono-MediumItalic.woff') format('woff');
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-ExtraLightItalic.woff2') format('woff2'), url('/fonts/JetBrainsMono-ExtraLightItalic.woff') format('woff');
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'C';
	src: url('/fonts/JetBrainsMono-Regular.woff2') format('woff2'), url('/fonts/JetBrainsMono-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@media ( max-width: 650px ) {
	body {
		font-size: 9px;
	}

}

@media ( hover: hover ) {
	[ grab ] {
		cursor: grab
	}

	[ grabbing ] {
		cursor: grabbing
	}

	[ pointer ] {
		cursor: pointer
	}

	[ crosshair ] {
		cursor: crosshair
	}

}

canvas-block {
	position: fixed;
	margin: auto;
	top: 0;
	left: 0;
}

@media ( hover: hover ) {
	[ path="/works" ][ list="sphere" ] canvas-block,
[ path="/works" ][ list="particles" ] canvas-block {
		cursor: crosshair;
	}

}

header-block {
	--width: 350px;
	z-index: 20;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: var( --width );
	padding: var( --margin-m );
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: opacity .5s var( --timing-function );
}

header-block default-button:not( [ visible ] ):not( [ display-menu ] ) {
	display: none
}

header-small-screen,
header-navigation,
header-grid-modes,
header-controls {
	display: flex;
	flex-direction: row;
	position: absolute;
	pointer-events: all;
}

header-small-screen {
	top: 95px;
}

header-small-screen [ display-menu ] {
	display: none !important;
}

header-navigation,
header-controls {
	transition: opacity .5s var( --timing-function );
}

header-navigation {
	left: var( --margin-m );
	top: var( --margin-m );
}

header-grid-modes {
	left: 0;
	right: 0;
	margin: auto;
	bottom: var( --margin-m );
	justify-content: center;
	flex-direction: column;
	align-items: center;
}

header-grid-modes default-button {
	margin-bottom: 0 !important;
}

header-grid-modes > div {
	display: flex;
	justify-content: center;
}

header-grid-modes > div:not( :last-child ) {
	margin-bottom: var( --margin-xs );
}

header-controls {
	right: var( --margin-m );
	bottom: var( --margin-m );
}

header-credits {
	position: absolute;
	top: var( --margin-m );
	right: var( --margin-m );
	font-size: var( --font-size-xs );
	font-family: var( --font-family-c );
	opacity: 0;
}

[ path="/contact" ] header-credits {
	opacity: 1;
}

header-analytics {
	position: absolute;
	bottom: var( --margin-m );
	left: var( --margin-m );
	font-size: var( --font-size-m );
	font-family: var( --font-family-c );
	opacity: 0;
}

[ path="/works" ] header-analytics,
[ path="/contact" ] header-analytics {
	opacity: 1;
}

header-analytics li {
	list-style: none;
}

header-analytics li:not(:last-child) {
	margin-bottom: 5px;
}

header-analytics li:first-child {
	font-family: var( --font-family-a );
	font-size: var( --font-size-l );
}

header-socials {
	position: absolute;
	bottom: var( --margin-m );
	left: var( --margin-m );
	font-size: var( --font-size-s );
	font-family: var( --font-family-c );
	pointer-events: all;
	display: none;
}

[ path="/" ] header-socials {
	display: block;
}

div {
	font-weight: 600;
}

@media ( max-width: 650px ) {
	header-block {
		padding: var( --margin-s );
	}

	header-credits {
		display: none;
	}

}

@media ( max-width: 1024px ) {
	header-block {
		justify-content: flex-start;
		align-items: flex-start;
	}

	header-block::before {
		content: '';
		position: absolute;
		height: 100%;
		width: 100%;
		left: 0;
		top: 0;
		opacity: 0;
		background: var( --color-black );
		z-index: 1;
		transition: opacity .5s var( --timing-function );
	}

	[ display-menu ] header-block::before {
		opacity: .9;
		pointer-events: all;
	}

	header-small-screen [ display-menu ] {
		display: flex !important;
	}

	:is(header-small-screen,
header-navigation,
header-controls) {
		position: relative;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		z-index: 1;
		left: initial;
		top: initial;
		right: initial;
		bottom: initial;
	}

	:is(header-small-screen,
header-navigation,
header-controls):not( :last-child ) {
		margin-bottom: var( --margin-s );
	}

	:is(header-navigation,
header-controls) {
		opacity: 0;
		pointer-events: none;
	}

	[ display-menu ] :is(header-navigation,
header-controls) {
		opacity: 1;
		pointer-events: all;
	}

	header-analytics {
		display: none;
		font-size: var( --font-size-xs );
	}

	header-analytics li:first-child {
		font-size: var( --font-size-m );
	}

	header-socials {
		bottom: var( --margin-s );
		left: var( --margin-s );
	}

}

default-button {
	cursor: pointer;
	color: var( --color-white );
	font-size: var( --font-size-l );
	font-family: var( --font-family-b );
	display: flex;
	flex-direction: row-reverse;
	align-items: stretch;
	background-color: var( --background-color );
	border: var( --border-size ) solid var( --border-color );
	opacity: 0;
}

[ view ] default-button {
	opacity: 0;
}

[ view-enter ] default-button {
	opacity: 1;
}

default-button:not( :last-child ) {
	margin-right: -1px;
}

default-button:active {
	--background-color: rgba( 255, 255, 255, .75 );
}

default-button[ visible ] {
	display: flex
}

default-button[ disabled ] {
	color: var( --color-grey )
}

default-button[ selected ] {
	z-index: 1;
	background: var( --color-white );
	color: var( --color-black );
}

:is(:is([ miniature ] default-button,
default-button[ activated ]) button-label,
:is([ miniature ] default-button,
default-button[ activated ]) button-icon) > *:first-child {
	display: none
}

:is(:is([ miniature ] default-button,
default-button[ activated ]) button-label,
:is([ miniature ] default-button,
default-button[ activated ]) button-icon) > *:last-child {
	display: flex
}

default-button[ label-hidden ] button-label {
	display: none;
}

default-button[ reversed ],
default-button[ reversed ] a {
	flex-direction: row;
}

default-button svg {
	width: 20px;
	height: 20px;
}

default-button path {
	fill: currentColor;
}

default-button a {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: stretch;
	flex-direction: row-reverse
}

default-button img {
	visibility: hidden;
	height: 100%;
	width: 100%;
	position: absolute;
}

:is(button-label,
button-icon) > *:nth-child( 2 ) {
	display: none
}

button-icon {
	height: var( --margin-m );
	width: var( --margin-m );
	display: flex;
	justify-content: center;
	align-items: center;
}

[ view-enter ] button-icon {
	animation: 1.5s linear var( --transition-delay ) var(  --animation );
}

button-label {
	--border: var( --border-size ) solid var( --border-color );
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	display: flex;
}

a {
	color: currentColor;
}

@media ( max-width: 1024px ) {
	default-button:not( :last-child ) {
		margin-bottom: -1px;
		margin-right: 0;
	}

	default-button {
		font-size: var( --font-size-m );
	}

	button-label {
		padding: var( --margin-xs ) var( --margin-s );
	}

}

@media ( hover: hover ) {
	default-button:hover {
		z-index: 2;
		--background-color: rgba( 255, 255, 255, .25 );
	}

	default-button:hover button-label {
		display: flex;
	}

}

project-view {
	width: 100vw;
	display: block;
}

[ path="/miniature-street-view" ] project-view,
[ path="/virtual-miniature" ] project-view,
[ path="/photogrammetry" ] project-view {
	z-index: 25;
	position: relative;
}

[ path="/when-gaspard-paints-a-gospel" ] project-view,
[ path="/miniature-street-view" ] project-view,
[ path="/virtual-miniature" ] project-view,
[ path="/photogrammetry" ] project-view,
[ path="/augustus-ar" ] project-view {
	pointer-events: none;
}

[ section ] {
	position: relative;
	min-width: 100%;
}

section-type-1 {
	display: flex;
	width: 100vw;
	height: 100%;
	user-select: none;
}

section-type-1 h3 {
	font-size: var( --font-size-xl );
	font-family: var( --font-family-a );
}

section-type-1 h4 {
	font-size: var( --font-size-l );
	font-family: var( --font-family-b );
}

section-type-1 ul {
	margin-top: var( --margin-s );
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
}

section-type-1 ul li {
	margin-bottom: 5px;
}

section-type-1 img {
	object-fit: cover;
	width: 100%;
}

aside-block {
	z-index: 4;
	position: absolute;
	background-color: var( --background-color );
	bottom: var( --margin-m );
	left: var( --margin-m );
	padding: var( --margin-m );
	overflow: scroll;
	transition: transform .5s var( --timing-function ), opacity .5s var( --timing-function );
	border: var( --border-size ) solid var( --border-color );
}

[ view-exit ] aside-block {
	transition: transform .5s var( --timing-function ), opacity .5s var( --timing-function );
}

[ view-enter ] aside-block:not( [ scrollable ] ),
[ view-enter ][ display-aside ] aside-block[ scrollable ],
[ view-enter ]  aside-block[ visible ][ scrollable ] {
	transform: translateX( 0 );
}

aside-block[ scrollable ] {
	transform: translateX( -125% );
	max-width: 450px;
	bottom: initial;
	left: 0;
	top: 0;
	bottom: 0;
	max-height: 100%;
	border: none;
	border-right: var( --border-size ) solid var( --border-color );
	transition: transform .85s var( --timing-function ), opacity .85s var( --timing-function );
	opacity: 1;
}

aside-block[ scrollable ] default-button {
	display: flex;
	right: var( --margin-m );
	top: var( --margin-m );
}

aside-block[ scrollable ] scrolling-block {
	padding: var( --margin-m ) 0;
}

aside-block scrolling-block {
	position: relative;
	display: flex;
	flex-direction: column;
}

aside-block default-button {
	display: none;
	position: absolute
}

aside-block h3,
aside-block h4 {
	font-size: var( --font-size-xl );
	max-width: 600px;
}

aside-block h4 {
	margin-top: 2px;
}

aside-block p {
	max-width: 600px;
	font-size: var( --font-size-s );
	font-family: var( --font-family-c );
	line-height: var( --line-height );
	margin-top: var( --margin-s );
}

@media ( max-width: 650px ) {
	aside-block:not( [ scrollable ] ) {
		padding: var( --margin-s );
		left: var( --margin-s );
		right: var( --margin-s );
	}

	aside-block:not( [ scrollable ] ) scrolling-block ul {
		display: none;
	}

	aside-block[ scrollable ] {
		width: 100%;
		border-right: none;
	}

	:is(aside-block h3,
aside-block h4) {
		font-size: var( --font-size-l );
	}

}

@media ( max-width: 1024px ) {
	aside-block[ scrollable ] default-button {
		right: var( --margin-s );
		top: var( --margin-s );
	}

}

section-type-3 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: var( --color-black );
}

section-type-3[ model ] {
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	width: 100vw;
	background: none;
}

section-type-3[ model ] img {
	visibility: hidden;
}

section-type-3 + section-type-3 {
	padding-top: var( --margin-s );
}

section-type-3 img {
	object-fit: cover;
	width: 100%;
}

section-type-3[ centered ] {
	padding-top: var( --margin-s );
}

section-type-3[ centered ] img {
	object-fit: contain;
	max-width: 50vw;
	max-height: 100vh;
}

section-type-3 p {
	margin: var( --margin-s );
	font-family: var( --font-family-c );
	font-size: var( --font-size-m );
}

@media ( max-width: 1024px ) {
	section-type-3 + section-type-3 {
		padding-top: 0;
	}

	section-type-3[ centered ] img {
		max-width: unset;
	}

}

opacity: 1  @media ( max-width: 650px ) {
	section-type-3 p {
		margin: var( --margin-s );
		font-size: var( --font-size-s );
	}

}

project-navigation {
	z-index: 5;
	position: fixed;
	display: flex;
	flex-direction: column;
	right: var( --margin-m );
	top: var( --margin-m );
	border: var( --border-size ) solid var( --border-color );
	font-size: var( --font-size-s );
	font-family: var( --font-family-c );
	opacity: 0;
	transform: scale( .975 );
	transition: transform .75s var( --timing-function ), opacity .75s var( --timing-function );
}

[ view-exit ] project-navigation {
	opacity: 0;
	transform: scale( .975 );
}

[ view-enter ] project-navigation {
	opacity: 1;
	transform: scale( 1 );
}

project-navigation[ hidden ] {
	display: none;
}

navigation-title {
	padding: var( --margin-xs ) var( --margin-s );
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

[ open ] navigation-title {
	border-bottom: var( --border-size ) solid var( --border-color );
}

navigation-title navigation-chevron {
	height: 25px;
	width: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}

navigation-title svg {
	height: 20px;
	width: 20px;
	fill: var( --color-white );
	transform: rotate( 90deg );
}

[ open ] navigation-title svg {
	transform: rotate( -90deg );
}

navigation-title h3 {
	line-height: 1;
	font-size: var( --font-size-m );
}

navigation-anchors {
	max-height: 0;
	overflow: hidden;
	padding: 0;
	overflow: scroll;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
	padding: 0 var( --margin-s );
}

[ open ] navigation-anchors {
	max-height: initial;
	padding: var( --margin-s );
}

navigation-anchor {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

navigation-anchor:not( :last-child ) {
	margin-bottom: var( --margin-xs );
}

navigation-anchor:after {
	content: '';
	display: block;
	height: 10px;
	width: 10px;
	border: 1px solid white;
	border-radius: 50%;
	margin-left: 10px;
}

@media ( max-width: 650px ) {
	project-navigation {
		display: none;
	}

}

@media ( hover: hover ) {
	navigation-title:hover {
		background-color: rgba( 255, 255, 255, .25 );
	}

}

preloader-overlay {
	display: flex;
	position: fixed;
	z-index: 25;
	top: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100vw;
	height: 100%;
	pointer-events: none;
}

preloader-overlay::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0;
	background: var( --color-black );
	transition: opacity .5s var( --timing-function );
	transition-delay: .5s;
}

[ loading ] preloader-overlay {
	pointer-events: all;
}

[ loading ] preloader-overlay h1,
[ loading ] preloader-overlay h2,
[ loading ] preloader-overlay svg,
[ loading ] preloader-overlay text,
[ loading ] preloader-overlay preloader-counter,
[ loading ] preloader-overlay preloader-square[ visible ] {
	opacity: 1 !important;
	transform: scale( 1 ) !important;
}

[ loading ] preloader-overlay:before {
	opacity: 1;
	transition-delay: 0s;
}

[ loading ] preloader-overlay h1 {
	transition: all .5s var( --timing-function );
}

[ loading ] preloader-overlay h2 {
	transition: all .6s var( --timing-function );
}

[ loading ] preloader-overlay preloader-text {
	opacity: 1;
	transform: translateY( -50% );
}

preloader-overlay h1 {
	font-size: 8rem;
	color: var( --color-white );
	font-family: var( --font-family-a );
	line-height: 1.25;
	text-align: center;
	transition: all .6s var( --timing-function );
	opacity: 0;
	transform: scale( .98 );
}

preloader-overlay h2 {
	font-size: var( --font-size-xxl );
	color: var( --color-white );
	font-family: var( --font-family-b );
	line-height: 1.25;
	text-align: center;
	transition: all .5s var( --timing-function );
	margin-bottom: var( --margin-xs );
	opacity: 0;
	transform: scale( .98 );
}

preloader-overlay preloader-square {
	--border: 2px dotted rgba( 255, 255, 255, .25 );
	appearance: none;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 15px;
	transition: all .5s var( --timing-function );
	transform: scale( .8 );
	opacity: 0;
}

preloader-overlay preloader-text {
	position: absolute;
	top: 100%;
	font-family: var( --font-family-a );
	font-size: var( --font-size-m );
	text-transform: uppercase;
	display: block;
	padding: 2px 10px;
	transform: translateY( -35% );
	opacity: 0;
	transition: all .75s var( --timing-function );
	display: none;
}

preloader-overlay preloader-text span {
	animation: blink-2 1.5s infinite linear;
}

preloader-overlay preloader-spinner {
	position: relative;
	width: 75px;
	height: 75px;
}

preloader-overlay [ reverse ] {
	animation: rotate 2s infinite linear;
	animation-direction: reverse;
}

preloader-overlay [ reverse ] svg {
	transform: scale( 1.1 );
	opacity: 0;
}

preloader-overlay [ reverse ] circle {
	animation: blink-1 1s infinite linear;
}

preloader-overlay [ reverse ] circle:last-child {
	stroke-width: 1;
	stroke: rgba( 255, 255, 255, .1 );
	stroke-dasharray: 47.12388980384689;
	display: none;
}

preloader-overlay [ normal ] {
	animation: rotate 4s infinite linear;
	position: absolute;
	left: 0;
	top: 0;
}

preloader-overlay [ normal ] svg {
	transform: scale( 1.1 );
	opacity: 0;
}

preloader-overlay [ normal ] circle {
	animation: blink-2 2s infinite linear;
}

preloader-overlay [ normal ] circle:first-child {
	stroke-width: 1;
	stroke: rgba( 255, 255, 255, .25 );
	stroke-dasharray: 37.69911184307752;
}

preloader-overlay [ normal ] circle:nth-child( 2 ) {
	stroke-width: 1;
	stroke: rgba( 255, 255, 255, .25 );
	stroke-dasharray: 188.49555921538757;
}

preloader-overlay [ normal ] circle:last-child {
	stroke: rgba( 255, 255, 255, 1 );
	stroke-width: 1.5;
	stroke-dasharray: 188.49555921538757;
	stroke-dashoffset: 188.49555921538757;
}

preloader-overlay svg {
	width: 75px;
	height: 75px;
	transition: all 1s var( --timing-function );
}

preloader-overlay circle {
	fill: none;
	stroke-width: 1;
}

preloader-overlay preloader-counter {
	position: absolute;
	color: var( --color-white );
	font-family: var( --font-family-b );
	font-size: var( --font-size-xs );
	transform: scale( .8 );
	opacity: 0;
	transition: all 1s var( --timing-function );
}

preloader-overlay preloader-counter counter-text {
	display: block;
	visibility: hidden;
	transition: all 1s var( --timing-function );
}

[ loading ] preloader-overlay preloader-counter counter-text {
	visibility: visible;
	animation: blink-2 2s infinite linear;
}

@media ( max-width: 650px ) {
	preloader-overlay h1 {
		font-size: 5.5rem;
	}

	preloader-overlay h2 {
		font-size: 3rem;
	}

}

effects-overlay {
	z-index: 30;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	pointer-events: none;
}

effects-overlay grid-effect,
effects-overlay noise-effect,
effects-overlay vignette-effect,
effects-overlay lines-effect {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

effects-overlay grid-effect {
	background-image: url( "/public/common/Grid.svg" );
	background-size: 25px;
	background-position: center center;
	transition: transform .5s var( --timing-function ), opacity .5s var( --timing-function );
	transform: scale( 1 );
	opacity: 0;
}

[ loading ] effects-overlay grid-effect {
	opacity: .25;
	transform: scale( 1.05 );
}

effects-overlay lines-effect {
	background-image: url( "/public/common/Line.svg" );
	background-size: 2px;
	background-position: center center;
	opacity: .25;
	display: none;
}

effects-overlay noise-effect {
	background-image: url( "/public/common/Noise.png" );
	background-position: var( --background-position );
	opacity: .25;
	display: none;
}

effects-overlay vignette-effect {
	background: radial-gradient( rgba( 0, 0, 0, 0 ), rgba( 0, 0, 0, 1 ) );
	opacity: 0;
	transition: all 1s var( --timing-function );
}

[ loading ] effects-overlay vignette-effect {
	opacity: 1;
	display: none;
}

rotate-device-overlay {
	z-index: 25;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	background: var( --color-black );
	font-size: var( --font-size-l );
	text-align: center;
	display: none;
}

@media ( orientation: landscape ) and ( max-width: 650px ) {
	rotate-device-overlay {
		display: flex;
	}

}

editor-block {
	--font-color: #2c3e50;
	--border-color: #ddd;
	--select-color: #dee6ed;
	--background-color: #eee;
	--slider-thumb-color: #eee;
	--highlight-color: #f1c40f;
	--true-color: #1abc9c;
	--false-color: #ee5253;
	position: fixed;
	top: 20px;
	right: 20px;
	max-height: calc( 100% - 40px );
	margin: 0;
	overflow: auto;
	min-width: 350px;
	padding: 15px;
	background-color: var( --background-color );
	border-radius: 10px;
	border: 1px solid var( --border-color );
	color: var( --font-color );
	visibility: hidden;
	z-index: 25;
	display: none;
	font-size: 12px;
	font-family: var( --font-family-c );
}

editor-block[ dark ] {
	--font-color: #eeeeee;
	--border-color: #4a4a4a;
	--select-color: #dee6ed;
	--background-color: rgba( 28, 27, 32, .95 );
	--slider-thumb-color: rgba( 28, 27, 32, 1 );
}

editor-block[ open ] {
	visibility: visible;
}

editor-block[ visible ] {
	display: block;
}

editor-block > editor-list::before {
	display: none !important;
}

editor-block output {
	color: var( --highlight-color );
	text-align: right;
	font-weight: 400;
}

editor-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	top: 10px;
	right: 10px;
	margin-bottom: 15px;
	width: 100%;
}

editor-header button {
	cursor: pointer;
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: flex-start;
	padding: 6px;
	background: var( --background-color );
	border-radius: 5px;
	border: 1px solid var( --border-color );
}

editor-header button:not(:last-child) {
	margin-right: 5px;
}

editor-header button:last-child {
	visibility: visible;
}

editor-header button:active {
	transform: translateY(1px);
}

editor-header header-group-left,
editor-header header-group-right {
	display: flex;
}

editor-header svg {
	width: 15px;
	height: 15px;
	fill: var( --font-color );
}

editor-block[ open ] editor-header [ switch ] {
	border: 1px solid var( --border-color );
}

editor-block[ open ] editor-header [ switch ] svg:first-child {
	visibility: hidden
}

editor-block[ open ] editor-header [ switch ] svg:last-child {
	visibility: visible
}

editor-header [ switch ] svg:last-child {
	visibility: hidden;
	position: absolute;
	transform: rotate( 45deg );
}

editor-performance {
	display: flex;
	align-self: flex-start;
	font-size: 11px;
}

editor-performance graph-container {
	position: relative;
	width: 80px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: left;
	border-radius: 5px;
}

editor-performance graph-container:not(:last-child) {
	margin-right: .5em;
}

editor-performance graph-title {
	display: block;
	z-index: 1;
	margin: 0;
	font-weight: normal;
	position: absolute;
	top: 5px;
	left: 8px;
}

editor-performance graph-values {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 50px;
	border: 1px solid var( --border-color );
	border-radius: 5px;
	display: flex;
	align-content: stretch;
	opacity: .5;
}

editor-performance graph-values span {
	height: 100%;
	width: 100%;
	background-color: var( --border-color );
	transform: scaleY( 0 );
	transform-origin: bottom;
}

user-info {
	position: fixed;
	z-index: 15;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	font-size: 3rem;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

user-info-text {
	position: absolute;
	bottom: 180px;
	padding: var( --margin-s ) var( --margin-m );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: opacity .75s;
	opacity: 0;
	border: 1px solid var( --color-white );
}

user-info-text[ name="Images" ] {
	bottom: 120px;
}

user-info-text h5 {
	font-size: var( --font-size-l );
	font-family: var( --font-family-b );
	line-height: 1.4;
}

user-info-text p {
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	margin-top: var( --margin-xs );
	line-height: 1.6;
}

user-info-text[ visible ] {
	opacity: 1;
}

user-info-text[ hidden ] {
	opacity: 0;
}

@media ( max-width: 1024px ) {
	user-info-text {
		bottom: 160px;
		padding: var( --margin-s );
		margin: 0 var( --margin-m );
	}

	user-info-text[ name="Images" ] {
		bottom: 100px;
	}

}

@media ( max-width: 650px ) {
	user-info-text h5 {
		font-size: var( --font-size-s );
	}

	user-info-text h5 br {
		display: none;
	}

	user-info-text p {
		font-size: var( --font-size-xxs );
	}

	user-info-text p br {
		display: none;
	}

}

section-type-6 {
	display: flex;
	width: 100vw;
	height: 100%;
	position: absolute;
	top: 0;
}

section-type-6 aside-block {
	pointer-events: all;
}

artwork-list li {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var( --margin-m ) 0;
	transition: all .75s var( --timing-function );
}

artwork-list li:not( :last-child ) {
	border-bottom: var( --border-size ) solid var( --border-color );
}

artwork-list artwork-description {
	margin-top: var( --margin-m );
	margin-left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

artwork-list img {
	position: relative;
	max-height: 200px;
	object-fit: contain;
	object-position: center;
}

artwork-list h3 {
	font-size: var( --font-size-l ) !important;
}

artwork-list p {
	line-height: 1.2em;
	margin-top: 5px;
}

video-block {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: block;
}

[ path="/augustus-ar" ] video-block {
	visibility: hidden;
	position: absolute;
}

video-block[ fullscreen ] {
	position: absolute;
	padding: 0;
	border: none;
}

video-block[ border ] {
	height: auto;
}

video {
	width: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
}

[ fullscreen ] video {
	height: 100%;
}

[ border ] video {
	max-height: 100vh;
	max-height: calc(var(--vh, 1vh) * 100);
	object-fit: contain
}

@media ( max-width: 650px ) {
	video-block[ fullscreen ] {
		position: relative;
	}

	video-block[ border ] {
		padding: 0;
	}

}

section-type-4 {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: calc( var( --margin-m ) * 2 );
	font-family: var( --font-family-c );
}

section-type-4 > p {
	max-width: 40vw;
	padding: var( --margin-m );
	font-size: var( --font-size-l );
	line-height: 1.8;
}

section-type-4 video,
section-type-4 img {
	max-height: 750px;
	object-fit: cover;
}

section-type-4 ul {
	margin-left: var( --margin-m );
	font-size: var( --font-size-s );
}

section-type-4 li {
	display: flex;
	flex-direction: column;
}

section-type-4 li:not( :last-child ) {
	margin-bottom: var( --margin-xs );
}

section-type-4 li h5 {
	font-weight: bold;
}

section-type-4 li p {
	line-height: 1.5;
}

section-type-4 span {
	display: block;
	margin-top: var( --margin-s );
	font-family: var( --font-family-c );
	font-size: var( --font-size-m );
	line-height: 1.6;
}

@media ( max-width: 650px ) {
	section-type-4 {
		padding: var( --margin-m );
		flex-direction: column;
	}

	section-type-4 > p {
		padding: var( --margin-m ) 0;
		margin-top: var( --margin-s );
		max-width: initial;
	}

	section-type-4 ul {
		margin-left: 0;
		column-count: 2;
		margin-top: var( --margin-m );
		column-gap: var( --margin-m );
	}

}

section-type-2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: calc( var( --margin-m ) * 2 );
	padding-left: calc( var( --margin-m ) * 4 );
	background: var( --color-black );
}

section-type-2 > *:not( :last-child ) {
	margin-right: var( --margin-m );
}

section-type-2 h3 {
	font-size: var( --font-size-xxl );
	text-align: left;
	margin-bottom: var( --margin-s );
	max-width: 85%;
}

section-type-2 p {
	font-size: var( --font-size-l );
	font-family: var( --font-family-c );
	line-height: var( --line-height );
	max-width: 85%;
}

@media ( max-width: 1024px ) {
	section-type-2 {
		flex-direction: column;
		padding: calc( var( --margin-m ) ) calc( var( --margin-s ) );
	}

	section-type-2 h3 {
		text-align: left;
		margin-bottom: var( --margin-s );
		margin-right: 0 !important;
	}

	section-type-2 h3 br {
		display: none;
	}

	section-type-2 p {
		max-width: initial;
		font-size: var(--font-size-m );
	}

}

@media ( max-width: 1280px ) {
	section-type-2 h3 {
		font-size: var( --font-size-xl );
	}

}

section-type-5 {
	display: flex;
	width: 100vw;
	height: 100%;
	position: absolute;
	top: 0;
	pointer-events: none;
}

section-type-5 > * {
	pointer-events: all;
}

section-type-5 aside-block img {
	margin: var( --margin-m ) 0;
}

panorama-buttons {
	pointer-events: none;
	position: fixed;
	height: 100%;
	width: 100%;
}

panorama-buttons button {
	top: 0;
	left: 0;
	pointer-events: all;
	position: fixed;
	transition: opacity .5s var( --timing-function );
	opacity: 0;
	display: flex;
	flex-direction: column;
	pointer-events: none;
}

panorama-buttons button[ clickable ] {
	cursor: pointer;
}

panorama-buttons button[ visible ] {
	opacity: 1;
	pointer-events: all;
}

panorama-buttons img {
	max-width: 250px;
}

panorama-buttons img:not( :last-child ) {
	margin-bottom: 5px;
}

panorama-map-point {
	position: absolute;
	transform: translate( -50%, -50% );
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

panorama-map-point[ active ] span {
	border: 2px solid white;
	background: black;
}

panorama-map-point[ active ] svg {
	visibility: visible
}

panorama-map-point:hover {
	transform: translate( -50%, -50% ) scale( 1.1 );
}

panorama-map-point svg {
	position: absolute;
	top: 0;
	left: 0;
	margin: auto;
	height: 100%;
	width: 100%;
	transform: rotate( var( --angle ) ) scale( 2 );
	visibility: hidden;
}

panorama-map-point svg path {
	fill: url( #gradient );
}

panorama-map-point span {
	position: relative;
	z-index: 1;
	padding: 0;
	height: 30px;
	width: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid white;
	font-family: var( --font-family-a );
	background-color: var( --background-color );
	font-size: var( --font-size-s );
}

panorama-maps-block {
	position: absolute;
	top: var( --margin-m );
	right: var( --margin-m );
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	background-size: cover;
	cursor: default;
}

panorama-maps-block default-button {
	margin-top: var( --margin-s );
}

panorama-map {
	position: relative;
	border: 1px solid rgba( 255, 255, 255, .5 );
}

panorama-map:nth-child( 1 ) {
	display: flex
}

panorama-map:nth-child( 2 ) {
	display: none
}

[ miniature ] panorama-map:nth-child( 1 ) {
	display: none
}

[ miniature ] panorama-map:nth-child( 2 ) {
	display: flex
}

panorama-map img {
	max-height: 500px;
}

@media ( max-width: 1024px ) {
	panorama-map-point span {
		height: 20px;
		width: 20px;
		font-size: var( --font-size-xs );
	}

	panorama-maps-block {
		top: var( --margin-s );
		right: var( --margin-s );
	}

	panorama-map img {
		max-height: 35vh;
	}

}

section-type-7 {
	display: flex;
	padding: 0 10vw;
	background: var( --color-black );
}

section-type-7 h3 {
	text-align: center;
	font-size: var( --font-size-xxl );
	font-family: var( --font-family-a );
}

section-type-7 img {
	object-fit: cover;
	width: 100%;
}

section-type-7 [col-one] {
	width: 30%;
	padding: 32px;
}

section-type-7 [col-two] {
	width: 70%;
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: 16px;
}

section-type-7 [col-two] div {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	column-gap: 32px;
	padding: 32px;
}

section-type-7 [col-two] div a {
	width: 35%;
}

@media ( max-width: 1280px ) {
	section-type-7 h3 {
		font-size: var( --font-size-xl );
	}

}

@media ( max-width: 1024px ) {
	section-type-7 h3 {
		font-size: var( --font-size-l );
	}

}

@media ( max-width: 650px ) {
	section-type-7 {
		flex-direction: column;
		padding: 16px;
	}

	section-type-7 [col-one] {
		display: none;
	}

	section-type-7 [col-two] {
		width: 100%;
		padding: 0;
	}

	section-type-7 [col-two] div {
		padding: 16px;
	}

	section-type-7 [col-two] div a {
		width: 40%;
	}

}

home-view {
	width: 100vw;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	padding-top: calc(var(--vh, 1vh) * 14);
	padding-bottom: calc(var(--vh, 1vh) * 9);
}

home-view video {
	opacity: .75;
}

home-view home-title {
	display: block;
	line-height: 1.25;
	text-align: center;
}

home-view home-title h3 {
	font-size: 8rem;
	font-family: var( --font-family-a );
}

home-view home-title h4 {
	font-size: var( --font-size-xxl );
	font-family: var( --font-family-b );
}

home-view p {
	max-width: 600px !important;
	font-size: var( --font-size-m );
	font-family: var( --font-family-c );
	line-height: var( --line-height );
	text-align: center;
}

home-view img {
	position: relative;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

home-buttons {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 60px;
}

home-buttons div {
	display: flex;
	flex-direction: row;
}

home-buttons div default-button {
	font-size: var( --font-size-xxl );
	font-family: var( --font-family-a );
	padding: var( --margin-xs );
}

home-buttons div default-button:not( :last-child ) {
	margin-right: -1px;
}

home-buttons div span {
	margin-bottom: -3px;
}

scrolling-text-container {
	margin: auto 0;
}

scrolling-text-container scrolling-text {
	--gap: 0.25rem;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var( --gap );
	font-size: 3rem;
}

scrolling-text-container scrolling-text scrolling-animation {
	flex-shrink: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	min-width: 90%;
	gap: var( --gap );
	animation: scroll 50s linear infinite;
}

scrolling-text-container scrolling-text scrolling-animation span:nth-child( even ) {
	font-family: var( --font-family-b );
	font-size: 0.9em;
}

@keyframes scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - var(--gap)));
	}

}

@media ( max-width: 650px ) {
	home-view {
		justify-content: space-between;
	}

	home-view video-block {
		position: absolute !important;
	}

	home-view home-title h3 {
		font-size: 5.5rem;
	}

	home-view home-title h4 {
		font-size: 3rem;
	}

	home-view p {
		font-size: var( --font-size-xs );
	}

	home-buttons {
		margin-top: 0;
	}

	home-buttons div {
		--blur: 0 !important;
		flex-direction: column;
		align-items: center;
		gap: 5px;
	}

	home-buttons div default-button {
		padding: 2px;
		border: none;
	}

	home-buttons div default-button:hover {
		--background-color: transparent;
	}

	home-buttons div span {
		margin-bottom: 0;
	}

	scrolling-text-container {
		margin: 0;
	}

	scrolling-text-container scrolling-text {
		font-size: 2.25rem;
	}

}

@media ( max-width: 1024px ) {
	home-buttons div default-button {
		font-size: 4rem;
	}

}

projects-view {
	overflow: hidden;
	pointer-events: none;
}

projects-cursor {
	position: fixed;
	top: 0;
	left: 0;
	background-color: var( --background-color );
	border: var( --border-size ) solid var( --border-color );
	display: flex;
	justify-content: center;
	align-items: stretch;
	opacity: 0;
	max-width: 450px;
}

cursor-content {
	padding: var( --margin-s ) var(--margin-s) var(--margin-xs);
}

cursor-content h3 {
	font-family: var( --font-family-c );
	font-size: var( --font-size-xs );
	font-weight: bold;
}

cursor-content h3 span {
	font-family: var( --font-family-b );
	font-size: .9em;
	opacity: .25;
	display: none;
}

cursor-content h4 {
	margin-top: 6px;
	font-family: var( --font-family-c );
	font-size: var( --font-size-xs );
	font-style: italic;
	opacity: .5;
}

cursor-content h4 span {
	display: inline-block;
}

cursor-content h5 {
	margin-top: 8px;
	font-family: var( --font-family-c );
	font-size: var( --font-size-m );
	font-weight: bold;
	text-align: right;
}

cursor-number {
	margin-left: var( --margin-m );
	font-size: 3em;
	color: transparent;
	line-height: .65;
	-webkit-text-stroke: 1px rgba( 255, 255, 255, .75);
}

cursor-color {
	position: relative;
	padding: var( --margin-s );
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border-right: var( --border-size ) solid var( --border-color );
	color: var( --color );
}

cursor-color span {
	display: inline-block;
}

cursor-color color-code {
	font-size: var( --font-size-s );
	font-family: var( --font-family-c );
}

@media ( hover: hover ) {
	canvas-block:hover ~ projects-view projects-cursor[ visible ] {
		opacity: 1;
	}

}

projects-grid {
	position: relative;
	display: flex;
	flex-direction: row;
	width: 100vw;
	padding: var( --margin-m );
	pointer-events: none;
	align-items: flex-start;
	margin-bottom: 100px;
}

[ list="grid" ] projects-grid {
	pointer-events: all;
}

grid-column {
	width: 100%;
}

grid-column:not( :last-child ) {
	margin-right: var( --margin-m );
}

@media ( max-width: 650px ) {
	projects-grid {
		padding: var( --margin-s );
	}

}

grid-item {
	display: block;
	list-style: none;
	page-break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	pointer-events: none;
}

grid-item:not( :last-child ) {
	margin-bottom: 40px;
}

grid-item:nth-child( 3n+0 ) item-thumbnail {
	--animation: blink-1;
}

grid-item:nth-child( 3n+1 ) item-thumbnail {
	--animation: blink-2;
}

grid-item:nth-child( 3n+2 ) item-thumbnail {
	--animation: blink-3;
}

grid-item:nth-child( 3n+0 ) item-thumbnail {
	--animation: blink-1;
}

grid-item:nth-child( 3n+1 ) item-thumbnail {
	--animation: blink-2;
}

grid-item:nth-child( 3n+2 ) item-thumbnail {
	--animation: blink-3;
}

grid-item:active {
	opacity: .75
}

[ list="grid" ] grid-item {
	pointer-events: all;
}

grid-item h3 {
	font-family: var( --font-family-a );
	font-size: var( --font-size-l );
	width: initial;
	margin-bottom: 2px;
}

grid-item h3 span {
	font-family: var( --font-family-b );
	font-size: .9em;
	opacity: .25;
}

grid-item h4 {
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	line-height: 1.4;
	margin-bottom: 4px;
}

grid-item h5 {
	font-family: var( --font-family-c );
	font-size: var( --font-size-xs );
	opacity: .5;
}

grid-item video {
	transform: var( --transform );
	height: 100%;
}

item-link,
item-quote,
item-object {
	opacity: 0;
	transform: scale( .975 );
	transition: transform .1s var( --timing-function ), opacity .1s var( --timing-function );
	transition-delay: 0s;
}

[ view-exit ][ list="grid" ] :is(item-link,
item-quote,
item-object) {
	transition-delay: 0s;
	transition: transform .1s var( --timing-function ), opacity .1s var( --timing-function );
	opacity: 0;
}

[ view-enter ][ list="grid" ] :is(item-link,
item-quote,
item-object) {
	opacity: 1;
	transform: scale( 1 );
	transition: transform 1s var( --timing-function ), opacity 1s var( --timing-function );
	transition-delay: var( --transition-delay );
}

@media ( max-width: 650px ) {
	grid-item {
		transform: none !important;
	}

}

item-link {
	display: block;
	color: var( --color-white );
	cursor: pointer;
}

item-overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
}

item-overlay default-button {
	position: absolute;
	bottom: 15px;
	right: 15px;
}

item-thumbnail {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: var( --aspect-ratio );
	border: 1px solid transparent;
	background: #222;
	margin-bottom: var( --margin-xs );
}

[ view-enter ][ list="grid" ] item-thumbnail {
	animation: 1.5s linear var( --transition-delay ) var( --animation );
}

item-footer {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

@media ( hover: hover ) {
	item-link:hover item-overlay {
		opacity: 1;
	}

	item-link:hover item-thumbnail {
		border: 1px solid var( --color-white );
	}

	item-link:hover default-button {
		animation: 1s linear var( --animation );
	}

}

@media ( max-width: 1280px ) {
	item-thumbnail {
		margin-bottom: var( --margin-xs );
	}

}

item-quote {
	display: flex;
	flex-direction: column;
}

item-text {
	font-size: var( --font-size-m );
	margin-bottom: var( --margin-s );
	font-family: var( --font-family-c );
	line-height: 1.8;
}

item-author {
	font-size: var( --font-size-m );
	font-family: var( --font-family-b );
}

projects-image-preview {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
	background: rgba( 0, 0, 0, .5 );
	opacity: 0;
	transition: opacity .5s var( --timing-function );
	cursor: default;
}

projects-image-preview[ visible ] {
	opacity: 1;
	pointer-events: all;
}

projects-image-preview[ visible ] img {
	transform: scale( 1 );
}

projects-image-preview img {
	width: 100%;
	max-height: 75vh;
	max-width: 1024px;
	transform: scale( 1.025 );
	transition: transform .5s var( --timing-function );
}

image-preview {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	margin: var( --margin-m );
}

image-preview-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: var( --margin-xs );
}

image-preview-footer {
	align-self: flex-start;
	margin-top: var( --margin-xs );
}

image-preview-footer h3 {
	font-family: var( --font-family-a );
	font-size: var( --font-size-m );
	width: initial;
	margin-bottom: 2px;
}

image-preview-footer h3 span {
	font-family: var( --font-family-b );
	font-size: .9em;
	opacity: .25;
	display: none;
}

image-preview-footer h4 {
	font-family: var( --font-family-c );
	font-size: var( --font-size-xs );
}

image-preview-footer h4 span {
	display: inline-block;
}

image-preview-footer h5 {
	margin-top: 5px;
	font-family: var( --font-family-c );
	font-size: var( --font-size-xs );
	opacity: .5;
}

@media ( max-width: 650px ) {
	image-preview {
		margin: var( --margin-s );
	}

}

projects-panel {
	z-index: 4;
	position: fixed;
	display: flex;
	flex-direction: column;
	background-color: var( --background-color );
	top: var( --margin-m );
	left: var( --margin-m );
	margin-top: 70px;
	border: var( --border-size ) solid var( --border-color );
	max-width: 450px;
	opacity: 0;
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	line-height: 1.8;
	pointer-events: none;
	max-height: calc( 100% - var( --margin-m ) * 2 - 200px );
}

projects-panel p:not( :last-child ) {
	margin-bottom: var( --margin-s );
}

[ view-enter ][ list="sphere" ] projects-panel[ name="Images" ],
[ view-enter ][ list="particles" ] projects-panel[ name="Pixels" ],
[ view-enter ][ list="places" ][ places="world" ] projects-panel[ name="World" ],
[ view-enter ][ list="places" ][ places="cosmos" ] projects-panel[ name="Cosmos" ] {
	opacity: 1;
	pointer-events: all;
}

panel-title {
	padding: var( --margin-s );
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

[ open ] panel-title {
	border-bottom: var( --border-size ) solid var( --border-color );
}

panel-title panel-chevron {
	height: 25px;
	width: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}

panel-title svg {
	height: 20px;
	width: 20px;
	fill: var( --color-white );
	transform: rotate( 90deg );
}

[ open ] panel-title svg {
	transform: rotate( -90deg );
}

panel-title h3 {
	line-height: 1;
	font-size: var( --font-size-l );
}

panel-title h3 + p {
	margin-top: var( --margin-s );
}

panel-description {
	max-height: 0;
	padding: 0;
	overflow: scroll;
}

[ open ] panel-description {
	max-height: initial;
	padding: var( --margin-s );
}

@media ( max-width: 1024px ) {
	projects-panel {
		display: none;
		margin-top: 50px;
	}

}

@media ( hover: hover ) {
	panel-title:hover {
		background-color: rgba( 255, 255, 255, .25 );
	}

}

projects-filters {
	z-index: 4;
	position: fixed;
	display: flex;
	flex-direction: column;
	background-color: var( --background-color );
	top: var( --margin-m );
	right: var( --margin-m );
	margin-top: 70px;
	border: var( --border-size ) solid var( --border-color );
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	line-height: 1.8;
	list-style: none;
	opacity: 0;
	max-height: calc( 100% - var( --margin-m ) * 2 - 200px );
}

[ view-enter ][ list="sphere" ] projects-filters {
	opacity: 1;
	pointer-events: all;
}

projects-filters-title {
	padding: var( --margin-s );
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

[ open ] projects-filters-title {
	border-bottom: var( --border-size ) solid var( --border-color );
}

projects-filters-title projects-filters-chevron {
	height: 25px;
	width: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
}

projects-filters-title svg {
	height: 20px;
	width: 20px;
	fill: var( --color-white );
	transform: rotate( 90deg );
}

[ open ] projects-filters-title svg {
	transform: rotate( -90deg );
}

projects-filters-title h3 {
	line-height: 1;
	font-size: var( --font-size-l );
}

projects-filters-title h3 + p {
	margin-top: var( --margin-s );
}

projects-filters-description {
	max-height: 0;
	overflow: auto;
}

projects-filters-description::-webkit-scrollbar {
	width: 18px;
	display: initial;
}

projects-filters-description::-webkit-scrollbar-track {
	border-left: 1px solid var( --color-white );
}

projects-filters-description::-webkit-scrollbar-thumb {
	background-color: var( --color-white );
	border: 6px solid rgba(0, 0, 0, 0);
	background-clip: padding-box;
}

[ open ] projects-filters-description {
	max-height: initial;
	padding: var( --margin-s ) 0;
}

projects-filters-description div {
	padding: 0 var( --margin-s );
}

projects-filters-description div h4 {
	font-family: var( --font-family-b );
	font-size: 2rem;
	line-height: normal;
}

projects-filters-description div ul {
	padding: var( --margin-xs ) var( --margin-s );
}

projects-filters-description div li {
	display: flex;
	align-items: center;
	padding-right: 20px;
}

projects-filters-description div label {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

projects-filters-description div input {
	appearance: none;
	border: var( --border-size ) solid rgba( 255, 255, 255, .25 );
	height: 15px;
	width: 15px;
	margin-right: var( --margin-xs );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

projects-filters-description div input:before {
	display: block;
	content: '';
	height: 8px;
	width: 8px;
	background: var( --color-white );
	opacity: 0;
}

projects-filters-description div input:checked:before {
	opacity: 1;
}

projects-filters-description hr {
	border-color: var( --border-color );
	margin-top: calc(0.5 * var( --margin-xs ));
	margin-bottom: var( --margin-s );
}

@media ( max-width: 1024px ) {
	projects-filters {
		display: none;
		margin-top: 50px;
	}

}

@media ( hover: hover ) {
	projects-filters-title:hover {
		background-color: rgba( 255, 255, 255, .25 );
	}

}

projects-color-range {
	position: fixed;
	right: var( --margin-m );
	top: 0;
	bottom: 0;
	margin: auto;
	width: 5px;
	height: 500px;
	opacity: 0;
}

[ view-enter ][ list="particles" ][ particles="color-range" ] projects-color-range {
	opacity: 1;
	pointer-events: all;
}

projects-color-range canvas {
	position: absolute;
	height: 100%;
	width: 100%;
}

color-range-handle {
	--size: 24px;
	position: absolute;
	top: calc( var( --size ) * -.5 );
	right: calc( 100% + var( --margin-xs ) );
	display: flex;
	align-items: center;
	cursor: grab;
	border: var( --border-size ) solid var( --border-color );
}

color-range-handle[ grabbed ] {
	cursor: grabbing;
}

color-range-handle span {
	padding: 5px 8px;
	font-family: var( --font-family-a );
	font-size: var( --font-size-s );
	border-right: var( --border-size ) solid var( --border-color );
}

color-range-handle svg {
	height: 25px;
	width: 25px;
	fill: var( --color-white );
}

@media ( max-width: 650px ) {
	projects-color-range {
		right: var( --margin-s );
		height: 250px;
	}

}

project-timeline {
	position: fixed;
	right: var( --margin-m );
	top: 0;
	bottom: 0;
	margin: auto;
	height: 500px;
	opacity: 0;
	display: flex;
	align-items: center;
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	pointer-events: none;
}

timeline-navigation {
	position: absolute;
	right: 0;
	display: flex;
	align-items: center;
	cursor: pointer;
	pointer-events: all;
	border: var( --border-size ) solid var( --border-color );
}

timeline-navigation svg {
	height: 32px;
	width: 32px;
	fill: var( --color-white );
}

timeline-navigation[ scroll-top ] {
	top: -48px;
}

timeline-navigation[ scroll-top ] svg {
	transform: rotate(270deg);
}

timeline-navigation[ scroll-bottom ] {
	bottom: -48px;
}

timeline-navigation[ scroll-bottom ] svg {
	transform: rotate(90deg);
}

project-timeline ul {
	height: 100%;
	padding-right: 8px;
	pointer-events: none;
	overflow-y: scroll;
	scroll-behavior: smooth;
}

project-timeline li {
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	cursor: pointer;
}

project-timeline li[ selected ]:after {
	transform: scale( 1.75 );
	background: var( --color-white );
}

project-timeline li:not( :last-child ) {
	margin-bottom: var( --margin-xs );
}

project-timeline li:not( :last-child ):before {
	content: '';
	position: absolute;
	display: block;
	top: 100%;
	right: 4px;
	width: 1px;
	height: var( --margin-xs );
	background: var( --color-white );
	opacity: .25;
}

project-timeline li:after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border: 1px solid var( --color-white );
	border-radius: 50%;
	margin-left: var( --margin-s );
}

project-timeline li:first-child,
project-timeline li:last-child {
	pointer-events: none !important;
}

:is(project-timeline li:first-child,
project-timeline li:last-child):after {
	width: 5px;
	height: 5px;
	border: none;
	background: var( --color-white );
}

project-timeline span {
	display: flex;
	flex-direction: column;
	font-size: var( --font-size-m );
	font-family: var( --font-family-a );
}

project-timeline h6 {
	font-size: var( --font-size-xs );
	font-family: var( --font-family-c );
}

[ view-enter ][ list="particles" ][ particles="timeline" ] project-timeline {
	opacity: 1;
}

[ view-enter ][ list="particles" ][ particles="timeline" ] project-timeline li {
	pointer-events: all;
}

@media ( max-width: 1024px ) {
	project-timeline {
		height: 300px;
	}

}

@media ( max-width: 650px ) {
	project-timeline {
		right: var( --margin-s );
	}

}

@media ( hover: hover ) {
	timeline-navigation:hover {
		background-color: rgba( 255, 255, 255, .25 );
	}

	project-timeline li:hover:after {
		transform: scale( 1.75 );
		background: var( --color-white );
	}

}

projects-popins {
	z-index: 20;
	position: absolute;
}

projects-popins default-button {
	position: absolute;
	top: var( --margin-m );
	right: var( --margin-m );
	z-index: 2;
}

projects-popin {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 15;
	background: rgba( 0, 0, 0, .5 );
	transition: opacity .5s var( --timing-function ), visibility .5s var( --timing-function );
	cursor: default;
	opacity: 0;
	visibility: hidden;
}

projects-popin[ visible ] {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

projects-popin img {
	flex-shrink: 0;
	margin-right: var( --margin-s );
	width: 100px !important;
	height: 100px !important;
	object-fit: cover;
}

projects-popin a {
	display: flex;
	margin-bottom: var( --margin-s );
	align-items: center;
}

projects-popin h2 {
	font-size: var( --font-size-xl );
	font-family: var( --font-family-b );
	margin-bottom: var( --margin-s );
}

projects-popin h3 {
	font-family: var( --font-family-a );
	font-size: var( --font-size-l );
	width: initial;
	margin-bottom: 2px;
}

projects-popin h3 span {
	font-family: var( --font-family-b );
	font-size: .9em;
	opacity: .25;
}

projects-popin h4 {
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	line-height: 1.4;
	margin-bottom: 4px;
}

projects-popin h5 {
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
	opacity: .5;
}

popin-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var( --margin-s );
}

popin-columns {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
}

popin-block {
	max-height: 100%;
	padding: calc( var( --margin-m ) * 2 );
	overflow: auto;
}

popin-content {
	max-width: 40%;
	padding-right: var( --margin-s );
	margin-right: var( --margin-m );
}

popin-content p {
	font-family: var( --font-family-c );
	font-size: var( --font-size-s );
}

popin-content p:not( :last-child ) {
	margin-bottom: var( --margin-s );
}

popin-content p:last-child {
	font-style: italic;
}

popin-projects {
	list-style: none;
}

@media ( max-width: 650px ) {
	projects-popin img {
		width: 75px !important;
		height: 75px !important;
	}

	projects-popin h3 {
		font-size: var( --font-size-m );
	}

	projects-popin h4 {
		font-size: var( --font-size-xs );
	}

	projects-popin h5 {
		font-size: var( --font-size-xs );
	}

	popin-block {
		padding: var( --margin-m ) !important;
		padding-top: calc( var( --margin-m ) * 3 ) !important;
	}

}

@media ( max-width: 1024px ) {
	popin-columns {
		flex-direction: column;
		justify-content: flex-start;
	}

	popin-content {
		max-width: initial;
		margin-right: initial;
	}

	popin-projects {
		margin-top: var( --margin-m );
	}

}

about-view {
	position: relative;
	min-width: 100vw;
	min-height: 100%;
	display: block;
	background: rgba( 0, 0, 0, .75 );
}

about-view section {
	margin: 0 auto;
	padding: calc( var(--margin-m ) * 3 ) ;
}

about-view section h3 {
	font-size: var(--font-size-l );
	font-family: var(--font-family-c );
	font-weight: bold;
	line-height: var(--line-height );
	padding-top: var( --margin-m );
	padding-bottom: var( --margin-s );
	text-transform: uppercase;
}

about-view section p {
	font-size: var(--font-size-l );
	font-family: var(--font-family-c );
	font-weight: 100;
	line-height: var(--line-height );
	padding-bottom: var( --margin-s );
}

@media ( max-width: 650px ) {
	about-view section p {
		font-size: 2rem;
	}

}

@media (max-width: 1024px) {
	about-view section {
		padding: calc( var(--margin-m ) * 2 ) calc( var(--margin-m ) );
	}

}

@media (max-width: 650px) {
	about-view section {
		padding: calc( var(--margin-m ) * 2 ) calc( var(--margin-s ) );
	}

}

@media (min-width: 768px) {
	about-view section {
		max-width: 720px;
	}

}

@media (min-width: 1024px) {
	about-view section {
		max-width: 960px;
	}

}

@media (min-width: 1200px) {
	about-view section {
		max-width: 1140px;
	}

}

@media (min-width: 1400px) {
	about-view section {
		max-width: 1320px;
	}

}

contact-view {
	position: relative;
	min-width: 100vw;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: var( --font-size-xl );
	text-align: center;
	user-select: text;
	background: rgba( 0, 0, 0, .5 );
}

contact-view h4 {
	margin-bottom: var( --margin-s );
	font-size: var( --font-size-xxl );
	line-height: .9;
}

contact-view h3 {
	margin-top: var( --margin-s );
	font-family: var( --font-family-b );
	font-size: var( --font-size-m );
	line-height: 1.1;
}

contact-view a {
	color: var( --color-white );
	font-family: var( --font-family-c );
	font-size: 100%;
}

@media ( max-width: 1024px ) {
	contact-view {
		font-size: var( --font-size-l );
	}

	contact-view h4 {
		font-size: var( --font-size-l );
	}

}

@media ( hover: hover ) {
	contact-view a:hover {
		color: var( --color-yellow );
	}

}