:root {
	--coral: #ff7f50;
}
a:link {
	color: black;
}
button {
	color: black;
}

body {
	background: black;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
* {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-ms-user-select: none;
}
h3,
h1,
p {
	-webkit-user-select: unset;
	-webkit-tap-highlight-color: text;
	-webkit-touch-callout: text;
	-webkit-user-select: text;
	-khtml-user-select: text;
	-ms-user-select: text;
}
section {
	width: 100%;
	scrollbar-width: none;
}
section.main {
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
}
*::-webkit-scrollbar {
	display: none;
}
.mobile {
	display: none;
}
section.horiz {
	height: calc(100% - 64px);
	position: absolute;
	white-space: nowrap;
	overflow-x: hidden;
	width: 100%;
	padding-bottom: 20px;
	transition: opacity 0.3s;
}
section.horiz .column:nth-last-child(1) {
	padding-right: 10px;
}
section.horiz.fade {
	opacity: 0;
}
@media only screen and (max-width: 720px) {
	section.horiz {
		white-space: unset;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
		padding: 10px;
		box-sizing: border-box;
		height: 100%;
	}
	section.horiz .column:nth-last-child(1) {
		padding-right: 0;
	}
	.desktop {
		display: none;
	}
	.mobile {
		display: unset;
	}
}

/* BOTTOM LINKS */

section.bottom_links {
	position: absolute;
	bottom: 0;
	height: 74px;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
section.bottom_links .spanner {
	gap: 10px;
}
section.bottom_links .column {
	width: calc(100% / 3 + 2px);
}
section.bottom_links .column .center_container {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
}
section.bottom_links button {
	background: #181818;
	vertical-align: top;
	transition: background 0.2s;
	position: relative;
}
section.bottom_links button .spanner h6 {
	color: white;
}
section.bottom_links button .spanner [class^='lf_'],
section.bottom_links button .spanner [class*=' lf_'] {
	color: white;
}

@media (hover: hover) {
	section.bottom_links button:hover {
		background: #3e3e3e;
	}
	section.bottom_links button:hover .spanner {
		filter: none;
	}
}
@media (hover: none) {
	section.bottom_links button:active {
		background: #3e3e3e;
	}
	section.bottom_links button:active .spanner {
		filter: none;
	}
}
.documentation_button {
	display: none;
}
@media only screen and (max-width: 720px) {
	section.bottom_links {
		height: auto;
		background: white;
		bottom: 0;
		position: fixed;
		transition: transform 0.3s, box-shadow 0.3s;
		flex-direction: column;
		margin: 10px;
		width: calc(100% - 20px);
		border-radius: 20px;
		transform: translateY(calc(100% + 11px));
		box-shadow: 0 0 50px 2px #00000000;
		z-index: 3;
	}
	section.bottom_links.active {
		transform: translateY(0);
		box-shadow: 0 0 50px 2px #00000040;
	}
	section.bottom_links button {
		width: 100%;
		background: #e9e9e9;
	}
	section.bottom_links button .spanner [class^='lf_'],
	section.bottom_links button .spanner [class*=' lf_'],
	section.bottom_links button .spanner h6 {
		color: black;
	}
	section.bottom_links a {
		flex: 1;
	}
	section.bottom_links button.documentation_button {
		display: block;
		position: absolute;
		width: 75px;
		height: 75px;
		top: -85px;
		right: 0;
		z-index: 10000;
		background: white;
		border-radius: 50%;
		box-shadow: 0 0 50px 1px #00000050;
		transition: transform 0.3s cubic-bezier(0.17, 0.67, 0.29, 2.71);
	}
	section.bottom_links button.documentation_button [class^='lf_'] {
		font-size: 26px;
		color: black;
		transition: transform 0.3s;
	}
	section.bottom_links.active button.documentation_button [class^='lf_'] {
		transform: rotate(-180deg);
	}
	@media (hover: hover) {
		button.documentation_button:hover {
			transform: scale(1.1);
		}
		section.bottom_links button:hover {
			background: #b4b4b4;
		}
	}
	@media (hover: none) {
		button.documentation_button:active {
			transform: scale(1.1);
		}
		section.bottom_links button:active {
			background: #b4b4b4;
		}
	}
}
@media only screen and (max-width: 400px) {
	section.bottom_links .spanner.gap {
		flex-direction: column;
	}
	section.bottom_links a {
		width: 100%;
	}
}

@media (hover: none) {
	section.horiz {
		overflow-x: scroll;
	}
}

/* AWARDS */

.awards {
	position: absolute;
	bottom: 15px;
	left: 15px;
	display: flex;
	gap: 10px;
	align-items: center;
	z-index: 1;
}
.awards img {
	opacity: 1;
	height: 50px;
}

.inline_awards {
	margin-top: 50px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.inline_awards .single {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-start;
	box-sizing: border-box;
	border-top: 1px solid #cacaca;
	padding-top: 10px;
}
.inline_awards .single img {
	height: 30px;
	width: 40px;
}
.inline_awards .single p {
	font-weight: 600;
}
@media only screen and (max-width: 720px) {
	.awards img {
		height: 40px;
	}
}

/* COLUMNS */

.column {
	height: 100%;
	padding: 10px 0 10px 10px;
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	width: calc(var(--square-height) - 74px);
}
.column.tall {
	width: calc(var(--square-height) / 2 - 37px);
}
.column.tall[data-aspect='169'] {
	width: calc(var(--square-height) / 16 * 9 - 12px);
}
.column_wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: relative;
}
.column .row {
	width: 100%;
	flex-grow: 1;
	display: flex;
	gap: 10px;
	position: relative;
}
.content {
	width: 100%;
	height: 100%;
	background: white;
	border-radius: 40px;
	padding: 30px;
	box-sizing: border-box;
	position: relative;
	transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.29, 2.71), left 0.5s, top 0.5s, width 0.5s, height 0.5s;
	cursor: pointer;
	display: inline-block;
	flex-grow: 1;
}

@media (hover: hover) {
	.content:hover {
		transform: scale(1.02);
		box-shadow: 0 0 10px #00000040;
	}
}
@media (hover: none) {
	.content:active {
		transform: scale(1.02);
		box-shadow: 0 0 10px #00000040;
	}
}
.content .inner {
	display: none;
}
.content .cover {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	box-sizing: border-box;
	overflow: hidden;
}
.content .cover.padding {
	padding: 10px;
}
.content .cover.padding canvas,
.content .cover.contain canvas {
	object-fit: contain;
}

.content .cover canvas {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.content .cover.full canvas {
	object-fit: cover;
	border-radius: 40px;
}
.content .cover .text_container {
	position: absolute;
	bottom: 30px;
	z-index: 1;
}
.content .cover .text_container strong {
	position: relative;
	z-index: -1;
}
.content .cover .text_container p {
	width: 300px;
	margin-top: 10px;
}
.content .cover .date_time {
	position: absolute;
	top: 30px;
	right: 30px;
	text-align: right;
	z-index: 1;
}
.content.clicked {
	transform: scale(1);
}

.expander {
	width: 100%;
	height: 100%;
	background: white;
	border-radius: 40px;
	padding: 30px;
	box-sizing: border-box;
	position: fixed;
	display: none;
	z-index: 2;
	transition: border-radius 0.2s, transform 0.2s cubic-bezier(0.17, 0.67, 0.29, 2.71), top 0.3s cubic-bezier(1, 0, 0, 1), left 0.3s cubic-bezier(1, 0, 0, 1), width 0.3s cubic-bezier(1, 0, 0, 1),
		box-shadow 0.5s, height 0.3s cubic-bezier(1, 0, 0, 1);
	cursor: unset;
	box-shadow: 0 0 50px 5px #00000000;
}
.content.expander.expanding.contentActive {
	box-shadow: 0 0 50px 5px #000000;
}
.expander.contentActive .cover,
.expander.contentActive .awards {
	opacity: 0;
	pointer-events: none;
}

.expander.expanding {
	display: block;
	border-radius: 40px;
}
@media (hover: hover) {
	.expander:hover {
		transform: unset;
	}
}
@media (hover: none) {
	.expander:active {
		transform: unset;
	}
}

@media only screen and (max-width: 720px) {
	.column.tall {
		width: 100%;
		height: calc(var(--square-width) - 20px);
		flex: 1 0 40%;
		padding: 0;
	}
	.column {
		width: 100%;
		padding: 0;
		height: calc(var(--square-width) - 20px);
	}
	.column.tall[data-aspect='169'] {
		height: calc(var(--square-width) - 72px);
	}
}
p {
	white-space: break-spaces;
	font-size: 16px;
	margin: 0;
	line-height: 1.4em;
	font-family: 'Fraunces', serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-variation-settings: 'SOFT' 50, 'WONK' 0;
}
h6 {
	font-family: 'Anybody', sans-serif;
	margin: 0;
	padding: 0;
	font-optical-sizing: auto;
	font-size: 20px;
	display: inline-block;
	--weight: 400;
	--width: 75;
	font-weight: var(--weight);
	font-variation-settings: 'wdth' var(--width);
}
h6[data-weight='800'] {
	--weight: 800;
}
h6[data-weight='350'] {
	--weight: 350;
}
h6[data-width='100'] {
	--width: 100;
}
h6[data-width='80'] {
	--width: 80;
	letter-spacing: 0.03em;
}

.dark {
	color: white;
}
h1 strong {
	font-weight: 700px;
	color: coral;
}

h2 {
	font-family: 'Anybody', sans-serif;
	margin: 0;
	padding: 0;
	font-optical-sizing: auto;
	font-size: 40px;
	--weight: 400;
	--width: 100;
	font-weight: var(--weight);
	font-variation-settings: 'wdth' var(--width);
}
.dark h2 {
	color: white;
}
h2[data-weight='700'] {
	--weight: 700;
}
h2[data-weight='250'] {
	--weight: 250;
}
h2[data-width='150'] {
	--width: 150;
}
h2[data-width='75'] {
	--width: 75;
	letter-spacing: 0.02em;
}

.expander_content {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s;
}
.expander.contentActive .expander_content {
	opacity: 1;
	pointer-events: auto;
}
.expander_content .scrollable {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	white-space: nowrap;
	border-radius: 40px;
}

/* TITLE COLUMN */

.column.title {
	width: 570px;
	padding: 20px 20px 200px;
	overflow-y: hidden;
}
.column.title .text_flex_container {
	height: unset;
	gap: 20px;
	overflow: visible;
}
.column.title img {
	opacity: 1;
}
.column.title .title_img {
	max-height: 64px;
	margin-bottom: 30px;
	object-position: left;
	object-fit: contain;
}
.column.title a.main_link {
	margin-bottom: 20px;
}
.column.title .static_content_block.mini {
	margin-top: 30px;
}
.column.title p.body {
	text-align: justify;
}
.column.title .lenticular {
	height: 150px;
	width: 100%;
	flex: none;
	filter: invert(1);
}
.tablet .column.title {
	padding-top: 0;
	padding-bottom: 0;
}
.tablet .column.title .text_flex_container {
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	padding: 20px 0 50px 0;
	box-sizing: border-box;
}
.tablet .column.title .main_link button {
	width: 100%;
	margin-left: 0;
}
.tablet .column.exit_pathway {
	display: none;
}
.tablet .expander .column:nth-last-child(2) .column_wrapper {
	padding-right: 10px;
}

/* SEPARATOR COLUMN */

.column.separator {
	width: 113px;
	padding: 20px;
	position: relative;
}
.column.separator img {
	opacity: 1;
	height: 25px;
}
.column.separator .caption_holder h2 {
	display: inline-block;
	margin-right: 10px;
	color: #878787;
}
.column.separator .caption_holder {
	position: absolute;
	transform-origin: bottom left;
	transform: rotate(270deg);
	left: 68px;
	bottom: 24px;
}
.column.separator .rule {
	width: 1px;
	background: #878787;
	height: 100%;
	float: right;
}

@media only screen and (max-height: 720px) {
	.content .cover .text_container p {
		width: calc(100% - 20px);
	}
}

@media only screen and (max-width: 720px) {
	.column.separator {
		width: 100%;
		height: 93px;
		padding: 20px 10px;
		margin-bottom: 10px;
	}

	.column.separator .caption_holder {
		transform: none;
		left: 10px;
		bottom: 22px;
	}
	.column.separator .caption_holder h2 {
		--width: 60;
	}
	.column.separator .rule {
		width: calc(100% - 20px);
		float: unset;
		height: 1px;
		position: absolute;
		bottom: 0;
	}
	.column.title {
		width: 100%;
		padding: 10px 10px 20px;
		height: unset;
	}
	.expander_content .scrollable {
		border-radius: 40px;
		width: 100%;
		overflow-y: scroll;
		white-space: unset;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0 10px 10px;
		box-sizing: border-box;
		gap: 10px;
	}

	/* LEGACY */

	a.project_link button {
		margin: 15px -10px 35px;
		width: calc(100% + 20px);
	}
	.exit_pathway {
		display: none;
	}
	.column.title.shorten {
		width: 100%;
	}
	.signiture {
		display: none;
	}
	.scrollable .background_image {
		width: calc(100%);
		margin-top: -100px;
		object-fit: cover;
		height: unset;
		margin-left: 0;
	}
}
@keyframes title_marquee_mobile {
	from {
		transform: translateX(0px);
	}
	to {
		transform: translateX(calc(-50% - 10px));
	}
}

@media (hover: none) {
	.expander_content .scrollable {
		overflow-x: scroll;
	}
}

/* IMAGE COLUMNS */

.gallery_item {
	width: 100%;
	height: 100%;
	border-radius: 30px;
	box-sizing: border-box;
	position: relative;
	flex-grow: 1;
	background: #e9e9e9;
}
.column .gallery_item img,
.column .gallery_item video,
.column .gallery_item iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 30px;
}
.column .gallery_item img.stretch {
	object-fit: fill;
}

img {
	opacity: 0;
	transition: opacity 0.5s;
}
img.loaded {
	opacity: 1;
	background: none;
}

/* BUTTON */

button {
	transition: background 0.2s;
	cursor: pointer;
	border: none;
	padding: 16px 25px;
	outline: none;
	white-space: nowrap;
	border-radius: 16px;
	background: #e9e9e9;
}
button .spanner {
	transition: filter 0.2s;
	width: auto;
	gap: 10px;
}
button .spanner h6 {
	color: black;
}
button.emphasized {
	display: flex;
	align-items: center;
	gap: 10px;
	width: calc(100% + 10px);
	margin-left: -5px;
	padding: 26px;
	justify-content: center;
	border-radius: 20px;
}
button.emphasized p {
	font-size: 18px;
}

button.exit_button {
	transform-origin: top right;
	transform: rotate(-90deg);
	position: absolute;
	top: 20px;
	left: -103px;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s, background 0.2s;
	background: #bfbfbf70;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.expander.contentActive button.exit_button {
	opacity: 1;
	pointer-events: auto;
}

@media (hover: hover) {
	button:hover {
		background: black;
	}
	button:hover .spanner {
		filter: invert(1);
	}
	button.exit_button:hover {
		background: black;
	}
}
@media (hover: none) {
	button:active {
		background: black;
	}
	button:active .spanner {
		filter: invert(1);
	}
	button.exit_button:active {
		background: black;
	}
}

@media only screen and (max-width: 720px) {
	button.exit_button {
		transform: none;
		left: unset;
		right: 20px;
	}
}

/* EXIT PATHWAY */
.exit_pathway .holder {
	position: absolute;
	width: 200%;
	height: 100%;
	display: flex;
	justify-content: left;
	align-items: center;
	box-sizing: border-box;
	padding: 40px;
}
.close_fade_out {
	background: #3e3e3e;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	pointer-events: none;
}

/* SPECIFICS */

.inline_logo {
	filter: invert(1);
	height: 29px;
	margin: 0 -2px -6px 1px;
}
a {
	text-decoration: none;
	color: black;
}
.email_button {
	transition: background 0.1s, transform 0.2s cubic-bezier(0.17, 0.67, 0.29, 2.71);
	float: right;
}
.email_button.copied {
	background: #ff7f50;
}
.email_button.copied:hover {
	background: #ff7f50;
}
.email_button h6::after {
	content: 'HI@LUKE.MEDIA';
}
.email_button.copied h6::after {
	content: 'COPIED!';
}
.content .cover_video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
	border-radius: 30px;
	transition: opacity 0.2s;
	animation: fade_in_out 6s infinite;
}
.content .cover_video.fill {
	object-fit: cover;
}
@keyframes fade_in_out {
	0% {
		opacity: 0;
	}
	10% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@media (hover: hover) {
	.content:hover .cover_video {
		opacity: 0;
		animation: none;
	}
}
@media (hover: none) {
	.content:active .cover_video {
		opacity: 0;
		animation: none;
	}
}
.expander .cover_video {
	display: none;
	animation: none;
}
.content.clicked .cover_video {
	opacity: 0;
	animation: none;
}

[data-id='kare'] .cover_video {
	animation-delay: -3s;
}

@media only screen and (max-height: 750px) {
	.text_container h1 {
		font-size: 40px;
		line-height: 38px;
	}
	strong .scallop {
		display: none;
	}
}
@media only screen and (max-height: 650px) {
	.text_container h1 {
		font-size: 30px;
		line-height: 29px;
	}
}
@media only screen and (max-height: 600px) {
	.date_time {
		display: none;
	}
}

@media only screen and (max-width: 650px) {
	strong .scallop {
		display: none;
	}
	.content .text_container h1 {
		font-size: 30px;
		line-height: 29px;
	}
	.content .cover .text_container p {
		width: calc(100% - 20px);
	}
}
@media only screen and (max-width: 530px) {
	.date_time {
		display: none;
	}
}
@media only screen and (max-width: 390px) {
	.content .text_container h1 {
		width: calc(100% - 20px);
	}
	.content .text_container p {
		display: none;
	}
}

/* SCALLOP */

.scallop {
	position: absolute;
	width: 160px;
	z-index: 1;
	margin-left: -136px;
	margin-top: -55px;
	transition: transform 0.5s, opacity 0.5s;
}

.clicked .scallop {
	transform: scale(3);
	opacity: 0.3;
}
.clicked .scallop path {
	stroke-width: 3px;
}
.expander .scallop {
	transform: scale(3);
	opacity: 0.3;
}
.expander .scallop path {
	stroke-width: 3px;
}
@media (hover: hover) {
	.content:hover .scallop {
		transform: scale(3);
		opacity: 0.3;
	}
	.content:hover .scallop path {
		stroke-width: 3px;
	}
}
@media (hover: none) {
	.content:active .scallop {
		transform: scale(3);
		opacity: 0.3;
	}
	.content:active .scallop path {
		stroke-width: 3px;
	}
}
.scallop path {
	fill: none;
	stroke: #ff7f50;
	vector-effect: non-scaling-stroke;
	stroke-width: 7px;
	transition: stroke-width 0.5s;
}

/* LOADING SCREEN */

.loading_screen .centerer {
	display: flex;
	transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.29, 2.71);
}
@media (hover: hover) {
	.loading_screen.done:hover .centerer {
		transform: scale(1.05);
	}
}
@media (hover: none) {
	.loading_screen.done:active .centerer {
		transform: scale(1.05);
	}
}
.loading_screen .bottom_panel {
	margin-top: 20px;
}
.loading_screen .bottom_panel .prog {
	width: 100%;
	height: 2px;
	background: #1e1e1e;
	position: relative;
	margin-bottom: 5px;
}
.loading_screen .bottom_panel .prog div {
	width: 0;
	height: 100%;
	background: white;
	position: absolute;
	top: 0;
	left: 0;
	transition: width 0.5s;
}
.loading_lenticular {
	transition: margin-left 0.5s;
	margin-left: -600px;
}
.loading_screen p {
	color: white;
}
.loading_screen {
	background: black;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s;
}
.loading_screen h3 {
	color: white;
	width: fit-content;
	transition: color 0.2s;
}
.percentage_loaded::after {
	content: '% loaded';
}
.loading_screen.done .percentage_loaded::after {
	content: 'Press here to enter in';
}
.loading_screen.done {
	cursor: pointer;
}
.loading_screen.hide {
	opacity: 0;
	pointer-events: none;
}

/* TEXT FLEX CONTAINER */

.text_flex_container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow-y: hidden;
}
.text_flex_container.dark p {
	color: white;
}
.text_flex_container img {
	opacity: 1;
}
.text_flex_container .static_content_block img {
	width: 100%;
	margin-bottom: 10px;
}
.static_content_block.mini {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-start;
	gap: 20px;
}
.static_content_block.mini .spanner {
	flex: 1 0 30%;
	border-top: 1px solid #cacaca;
	padding: 8px 0 4px;
	box-sizing: border-box;
	max-width: calc(33.3333% - 13.3333px);
}

.text_flex_gap {
	flex-grow: 1;
	max-height: 50px;
}
.text_flex_gap.with_line {
	border-bottom: 1px solid #3e3e3e;
}
.stretch_content_block {
	display: flex;
	flex-grow: 3;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100px;
	max-height: 250px;
}
.text_flex_container .lenticular {
	width: 100%;
	flex-grow: 2;
}

@media only screen and (max-width: 720px) {
	.static_content_block.mini .spanner {
		flex: 1 0 50%;
		max-width: calc(50% - 10px);
	}
}
@media only screen and (max-width: 500px) {
	.static_content_block.mini .spanner {
		flex: 1 0 100%;
		max-width: 100%;
	}
}

/* LENTICULAR */

.lenticular {
	background-image: url(intro/lenticular.svg);
	opacity: 0.2;
}

/* SPANNER */
.spanner {
	display: flex;
	align-content: center;
	justify-content: space-between;
	align-items: center;
}
.spanner h6 {
	color: #878787;
}
.dark .spanner p {
	color: #878787;
}
.dark .spanner [class^='lf_'],
.dark .spanner [class*=' lf_'] {
	color: #878787;
}
.spanner p {
	width: auto;
	font-size: 12px;
}
.spanner svg {
	height: 15px;
}
.spanner svg path {
	fill: #878787;
}
.spanner.emphasized {
	border-top: 1px solid #3e3e3e;
	padding: 12px 0;
}
.spanner.emphasized h2 {
	font-size: 36px;
}
.spanner.emphasized [class^='lf_'],
.spanner.emphasized [class*=' lf_'] {
	font-size: 36px;
}
.dark .spanner.emphasized [class^='lf_'],
.dark .spanner.emphasized [class*=' lf_'] {
	color: white;
}

/* MASK IMAGE */

.mask_container {
	position: relative;
	height: 100%;
	overflow: hidden;
}
.mask_container img {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	transition: top 0.5s;
}
.column.mask_active .mask_container img {
	top: -7%;
}
.mask_container image {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.mask_container.luke_mask {
	aspect-ratio: 17 / 60;
}
.mask_container .masked_contents {
	width: 100%;
	height: 100%;
	position: absolute;
}

.mask_container.luke_mask .masked_contents {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 587"><path d="M89.8767 505.145V515.102L36.0616 515.102C16.1451 515.102 2.22203e-09 531.197 0 551.051C-2.22268e-09 570.905 16.1451 587 36.0616 587L125.938 587C145.854 586.999 161.999 570.905 162 551.052V505.145C162 485.292 145.855 469.197 125.939 469.197H125.937C106.022 469.197 89.8767 485.292 89.8767 505.145Z M162 275.05C162 260.726 153.597 248.359 141.436 242.58L157.163 215.426C167.121 198.231 161.211 176.245 143.963 166.318C126.715 156.39 104.66 162.28 94.7018 179.475L81 203.135L67.2982 179.475C57.3397 162.28 35.2849 156.39 18.0369 166.318C0.788912 176.245 -5.12075 198.231 4.83725 215.426L20.564 242.58C8.40348 248.359 2.15779e-06 260.726 2.15619e-06 275.05C2.15397e-06 294.904 16.1451 310.999 36.0616 310.999H125.938C145.855 310.999 162 294.904 162 275.05Z M81 399.582V389.204H36.0616C16.1456 389.204 1.99207e-08 373.109 2.21439e-08 353.255C2.3212e-08 343.72 3.79923 334.577 10.5622 327.835C17.3251 321.093 26.4975 317.306 36.0616 317.306H85.4384C85.9904 317.306 86.5391 317.318 87.085 317.343C128.676 318.614 162 352.623 162 394.392C162 436.176 128.652 470.196 87.0406 471.444C86.508 471.468 85.9737 471.48 85.4384 471.48H36.0616C16.1456 471.48 1.07112e-08 455.385 1.29339e-08 435.531C1.40025e-08 425.996 3.79923 416.853 10.5622 410.111C17.3251 403.369 26.4975 399.582 36.0616 399.582H81Z M118.661 17.2224C118.661 15.5466 119.579 14.0091 121.053 13.2127C122.528 12.4163 124.322 12.4937 125.726 13.4062C147.576 27.891 162 52.6517 162 80.7474C162 125.313 125.705 161.495 81 161.495C36.2947 161.495 7.1249e-06 125.313 7.12989e-06 80.7473C7.13488e-06 36.1814 36.2947 -1.00249e-05 81 0C85.5127 -1.97254e-07 89.9394 0.370566 94.2518 1.07849C102.318 2.39478 108.239 9.34122 108.239 17.4879C108.25 43.9686 108.25 102.317 108.25 102.317H118.661V17.2224ZM83.8662 103.719C89.1225 103.719 93.3836 99.4715 93.3836 94.2316C93.3836 88.9916 89.1225 84.7438 83.8662 84.7438C78.6098 84.7438 74.3487 88.9916 74.3487 94.2316C74.3487 99.4715 78.6098 103.719 83.8662 103.719Z" /></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 587"><path d="M89.8767 505.145V515.102L36.0616 515.102C16.1451 515.102 2.22203e-09 531.197 0 551.051C-2.22268e-09 570.905 16.1451 587 36.0616 587L125.938 587C145.854 586.999 161.999 570.905 162 551.052V505.145C162 485.292 145.855 469.197 125.939 469.197H125.937C106.022 469.197 89.8767 485.292 89.8767 505.145Z M162 275.05C162 260.726 153.597 248.359 141.436 242.58L157.163 215.426C167.121 198.231 161.211 176.245 143.963 166.318C126.715 156.39 104.66 162.28 94.7018 179.475L81 203.135L67.2982 179.475C57.3397 162.28 35.2849 156.39 18.0369 166.318C0.788912 176.245 -5.12075 198.231 4.83725 215.426L20.564 242.58C8.40348 248.359 2.15779e-06 260.726 2.15619e-06 275.05C2.15397e-06 294.904 16.1451 310.999 36.0616 310.999H125.938C145.855 310.999 162 294.904 162 275.05Z M81 399.582V389.204H36.0616C16.1456 389.204 1.99207e-08 373.109 2.21439e-08 353.255C2.3212e-08 343.72 3.79923 334.577 10.5622 327.835C17.3251 321.093 26.4975 317.306 36.0616 317.306H85.4384C85.9904 317.306 86.5391 317.318 87.085 317.343C128.676 318.614 162 352.623 162 394.392C162 436.176 128.652 470.196 87.0406 471.444C86.508 471.468 85.9737 471.48 85.4384 471.48H36.0616C16.1456 471.48 1.07112e-08 455.385 1.29339e-08 435.531C1.40025e-08 425.996 3.79923 416.853 10.5622 410.111C17.3251 403.369 26.4975 399.582 36.0616 399.582H81Z M118.661 17.2224C118.661 15.5466 119.579 14.0091 121.053 13.2127C122.528 12.4163 124.322 12.4937 125.726 13.4062C147.576 27.891 162 52.6517 162 80.7474C162 125.313 125.705 161.495 81 161.495C36.2947 161.495 7.1249e-06 125.313 7.12989e-06 80.7473C7.13488e-06 36.1814 36.2947 -1.00249e-05 81 0C85.5127 -1.97254e-07 89.9394 0.370566 94.2518 1.07849C102.318 2.39478 108.239 9.34122 108.239 17.4879C108.25 43.9686 108.25 102.317 108.25 102.317H118.661V17.2224ZM83.8662 103.719C89.1225 103.719 93.3836 99.4715 93.3836 94.2316C93.3836 88.9916 89.1225 84.7438 83.8662 84.7438C78.6098 84.7438 74.3487 88.9916 74.3487 94.2316C74.3487 99.4715 78.6098 103.719 83.8662 103.719Z" /></svg>');
	mask-repeat: no-repeat;
	mask-position: center;
}
@media only screen and (max-width: 720px) {
	.mask_container.luke_mask {
		aspect-ratio: 1 / 1.08;
		width: 100%;
	}
	.mask_container.luke_mask .masked_contents {
		mask-size: 100%;
		-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="267" height="285" viewBox="0 0 267 285" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M105.096 77.1613L61.7284 77.1613L61.7284 30.9598C61.7284 13.8609 47.9102 -9.57481e-06 30.8652 -1.03218e-05C13.8197 -1.10688e-05 0.00199313 13.8609 0.00199313 30.9598L0.00193801 108.121C0.00243166 125.219 13.8196 139.08 30.8642 139.081L105.096 139.081C122.14 139.081 135.958 125.22 135.958 108.122L135.958 108.12C135.958 91.0223 122.14 77.1613 105.096 77.1613Z M30.863 284.062C43.1603 284.062 53.7778 276.847 58.7387 266.407L82.0518 279.909C96.8134 288.458 115.689 283.384 124.212 268.576C132.735 253.769 127.678 234.834 112.916 226.284L92.6032 214.521L112.916 202.758C127.678 194.208 132.735 175.274 124.212 160.466C115.689 145.658 96.8134 140.584 82.0518 149.134L58.7387 162.635C53.7778 152.195 43.1604 144.981 30.863 144.981C13.8175 144.981 -0.000212498 158.842 -0.000212498 175.94L-0.000215871 253.102C-0.000215871 270.201 13.8175 284.062 30.863 284.062Z M195.725 69.5405L204.634 69.5405L204.634 30.9598C204.634 13.8614 218.452 -3.62702e-06 235.498 -2.88003e-06C243.683 -2.52132e-06 251.533 3.26173 257.321 9.06788C263.109 14.874 266.361 22.7488 266.361 30.9598L266.361 73.3509C266.361 73.8248 266.35 74.2959 266.329 74.7646C265.238 110.471 236.04 139.081 200.18 139.081C164.308 139.081 135.101 110.451 134.029 74.7265C134.008 74.2692 133.998 73.8105 133.998 73.3509L133.998 30.9598C133.998 13.8614 147.816 -6.72252e-06 164.862 -5.97553e-06C173.047 -5.61682e-06 180.897 3.26173 186.685 9.06788C192.473 14.874 195.725 22.7488 195.725 30.9598L195.725 69.5405Z M252.214 246.854C253.653 246.854 254.973 247.642 255.656 248.908C256.34 250.174 256.274 251.714 255.49 252.92C243.055 271.678 221.797 284.062 197.676 284.062C159.415 284.062 128.353 252.902 128.353 214.521C128.353 176.14 159.415 144.981 197.676 144.981C235.937 144.981 267 176.14 267 214.521C267 218.395 266.682 222.196 266.074 225.898C264.944 232.823 258.98 237.906 251.986 237.906C229.252 237.916 179.158 237.916 179.158 237.916L179.158 246.854L252.214 246.854ZM177.954 216.982C177.954 221.494 181.601 225.153 186.1 225.153C190.598 225.153 194.245 221.494 194.245 216.982C194.245 212.469 190.598 208.811 186.1 208.811C181.601 208.811 177.954 212.469 177.954 216.982Z" fill="white"/></svg>');
		mask-image: url('data:image/svg+xml;utf8,<svg width="267" height="285" viewBox="0 0 267 285" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M105.096 77.1613L61.7284 77.1613L61.7284 30.9598C61.7284 13.8609 47.9102 -9.57481e-06 30.8652 -1.03218e-05C13.8197 -1.10688e-05 0.00199313 13.8609 0.00199313 30.9598L0.00193801 108.121C0.00243166 125.219 13.8196 139.08 30.8642 139.081L105.096 139.081C122.14 139.081 135.958 125.22 135.958 108.122L135.958 108.12C135.958 91.0223 122.14 77.1613 105.096 77.1613Z M30.863 284.062C43.1603 284.062 53.7778 276.847 58.7387 266.407L82.0518 279.909C96.8134 288.458 115.689 283.384 124.212 268.576C132.735 253.769 127.678 234.834 112.916 226.284L92.6032 214.521L112.916 202.758C127.678 194.208 132.735 175.274 124.212 160.466C115.689 145.658 96.8134 140.584 82.0518 149.134L58.7387 162.635C53.7778 152.195 43.1604 144.981 30.863 144.981C13.8175 144.981 -0.000212498 158.842 -0.000212498 175.94L-0.000215871 253.102C-0.000215871 270.201 13.8175 284.062 30.863 284.062Z M195.725 69.5405L204.634 69.5405L204.634 30.9598C204.634 13.8614 218.452 -3.62702e-06 235.498 -2.88003e-06C243.683 -2.52132e-06 251.533 3.26173 257.321 9.06788C263.109 14.874 266.361 22.7488 266.361 30.9598L266.361 73.3509C266.361 73.8248 266.35 74.2959 266.329 74.7646C265.238 110.471 236.04 139.081 200.18 139.081C164.308 139.081 135.101 110.451 134.029 74.7265C134.008 74.2692 133.998 73.8105 133.998 73.3509L133.998 30.9598C133.998 13.8614 147.816 -6.72252e-06 164.862 -5.97553e-06C173.047 -5.61682e-06 180.897 3.26173 186.685 9.06788C192.473 14.874 195.725 22.7488 195.725 30.9598L195.725 69.5405Z M252.214 246.854C253.653 246.854 254.973 247.642 255.656 248.908C256.34 250.174 256.274 251.714 255.49 252.92C243.055 271.678 221.797 284.062 197.676 284.062C159.415 284.062 128.353 252.902 128.353 214.521C128.353 176.14 159.415 144.981 197.676 144.981C235.937 144.981 267 176.14 267 214.521C267 218.395 266.682 222.196 266.074 225.898C264.944 232.823 258.98 237.906 251.986 237.906C229.252 237.916 179.158 237.916 179.158 237.916L179.158 246.854L252.214 246.854ZM177.954 216.982C177.954 221.494 181.601 225.153 186.1 225.153C190.598 225.153 194.245 221.494 194.245 216.982C194.245 212.469 190.598 208.811 186.1 208.811C181.601 208.811 177.954 212.469 177.954 216.982Z" fill="white"/></svg>');
	}
}

/* INTRO SECTION */

.column.static {
	width: 420px;
	padding: 16px 30px 16px 10px;
}
.column.auto {
	padding: 10px;
	width: auto;
}

.background_image {
	top: 0;
	margin-left: -50px;
	height: 100%;
	z-index: -1;
}
.signiture {
	opacity: 1;
	width: 300px;
}

video:fullscreen {
	object-fit: contain !important;
}

@media only screen and (max-width: 720px) {
	.column.static {
		padding: 5px 10px 50px 10px;
		width: 100%;
		height: 700px;
	}
	.text_flex_container {
		height: 650px;
	}
	.column.static .projects_arrow {
		display: none;
	}
	.column.auto {
		width: 100%;
		height: auto;
	}
}

/* TOOLTIPS */

.content .tooltip {
	width: calc(100% + -20px);
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 2;
	background: black;
	padding: 16px 17px;
	box-sizing: border-box;
	display: flex;
	gap: 20px;
	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;
	border-radius: 45px;
	max-width: calc(var(--square-height) / 2 - 65px);
}
@media (hover: hover) {
	.content:hover .tooltip {
		opacity: 1;
	}
}
@media only screen and (max-width: 720px) {
	@media (hover: hover) {
		.content:hover .tooltip {
			opacity: 0;
		}
	}
}
.content.clicked .tooltip,
.content.expander .tooltip {
	opacity: 0;
}
.content .tooltip p {
	color: white;
	white-space: nowrap;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
}

.content .tooltip [class^='lf_'],
.content .tooltip [class*=' lf_'] {
	color: white;
}
.content .tooltip .icons {
	display: flex;
	gap: 7px;
}