@import url('https://fonts.googleapis.com/css?family=Righteous');

#loader-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background-color: #2f4f4f;
	opacity: 1;
	transition: opacity 2s ease
}

#loader {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #3498db;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite
}

#loader:before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #e74c3c;
	-webkit-animation: spin 3s linear infinite;
	animation: spin 3s linear infinite
}

#loader:after {
	content: "";
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #f9c922;
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
video {
	display: inline-block;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden] {
	display: none;
}

html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
}

a:focus {
	outline: thin dotted;
}

a:active,
a:hover {
	outline: 0;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}

mark {
	background: #ff0;
	color: #000;
}

code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	font-size: 1em;
}

pre {
	white-space: pre-wrap;
}

q {
	quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 0;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	margin: 0;
}

button,
input {
	line-height: normal;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

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

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

.debug {
	transform: scale(0.5);
}

.debug * {
	outline: 1px solid red;
	opacity: 0.9;
}

html,
body {
	height: 100%;
}

:root {
	font-size: 15px;
}

body {
	--color-text: #5d5d5d;
	--color-bg: #e6e6ea;
	--color-link: #838288;
	--color-link-hover: #bb3a3a;
	--color-number: #000;
	--color-title: #000;
	--color-caption: #000;
	--color-content: #000;
	--color-content-bg: var(--color-bg);
	--color-reveal-bg: var(--color-bg);
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: transat-text, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.dark-mode {
	--color-text: #424242;
	--color-bg: #101010;
	--color-link: #bb3a3a;
	--color-link-hover: #fff;
	--color-number: #484848;
	--color-title: #bb3a3a;
	--color-caption: #484848;
	--color-content: #dadada;
	--color-content-title: #bb3a3a;
	--color-content-meta: #fff;
}

/* Page Loader */
.js .loading::before {
	content: '';
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	content: '';
	position: fixed;
	z-index: 1000;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	pointer-events: none;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5, 0.5, 1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
}

a:hover,
a:focus {
	color: var(--color-link-hover);
	outline: none;
}

main {
	position: relative;
	min-height: 100vh;
}

.frame {
	padding: 3rem 5vw 0;
	text-align: center;
	position: relative;
	z-index: 100;
}

.frame__title {
	font-size: 1rem;
	margin: 0 0 1rem;
}

.frame__links a {
	margin: 0 0.5rem;
}

.frame__mode {
	margin: 1rem auto;
	display: flex;
	justify-content: center;
}

.frame__mode-item {
	position: relative;
	width: 20px;
	height: 20px;
	margin: 0 0.25rem;
	pointer-events: auto;
	border-radius: 50%;
	background: #fff;
	overflow: hidden;
	border: 1px solid var(--color-text);
}

.frame__mode-item--dark {
	background: #000;
}

.frame__mode-label,
.frame__mode-input {
	font-size: 0;
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.content {
	position: relative;
}

.content__item {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	color: var(--color-content);
	background: var(--color-content-bg);
}

.js .content__item {
	opacity: 0;
	pointer-events: none;
}

.js .content__item--current {
	opacity: 1;
	pointer-events: auto;
	top: 16rem;
}

.content__item-header {
	padding: 2rem 2rem 0;
	position: relative;
}

.content__item-header-title {
	font-family: ivymode, sans-serif;
	font-weight: 600;
	font-size: 3rem;
	margin: 0;
	color: var(--color-content-title);
}

.content__item-header-meta {
	text-indent: 0.25rem;
	display: block;
	color: var(--color-content-meta);
}

.dark-mode .content__item-header-meta {
	mix-blend-mode: difference;
}

.content__item-header-meta::before {
	content: '---------';
	margin: 0 0.5rem 0 0;
	letter-spacing: -0.15rem;
}

.content__item-copy {
	padding: 2rem;
	font-family: linotype-didot, serif;
}

.revealer {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.revealer__inner {
	background-color: var(--color-reveal-bg);
	width: 200%;
	height: 200%;
	position: relative;
	flex: none;
}

.grid {
	position: absolute;
	display: grid;
	height: 400px;
	width: 100%;
	left: 0;
	top: 0;
	grid-template-columns: 30% 30% 30%;
	grid-column-gap: 5%;
	grid-template-areas: 'griditem-left griditem-center griditem-right';
}

.grid--slideshow,
.grid--interaction {
	left: -5%;
	width: 110%;
	pointer-events: none;
}

.grid--slideshow {
	top: 17rem;
}

.grid--titles {
	align-items: center;
	text-align: start;
	cursor: default;
}

.titles-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1000;
	pointer-events: none;
}

.grid__item {
	display: flex;
	justify-content: center;
	position: relative;
	pointer-events: none;
	opacity: 0;
	grid-area: griditem-center;
}

.grid__item--slide {
	flex-direction: column;
	top:-20px !important;
	width: 100%;
}

.grid__item--title {
	font-size: 8vw;
	margin: 0;
	font-family: ivymode, sans-serif;
	font-weight: 600;
	color: var(--color-title);
}


.grid__item--center,
.grid__item--left,
.grid__item--right {
	opacity: 1;
	cursor: pointer;
}

.grid__item--left {
	grid-area: griditem-left;
}

.grid__item--center {
	grid-area: griditem-center;

}

.grid__item--right {
	grid-area: griditem-right;
}

.grid__item--cursor {
	pointer-events: auto;
}

.content-open .grid__item--cursor {
	display: none;
}

.number {
	font-size: 2rem;
	-webkit-text-stroke: 1.5px var(--color-content);
	text-stroke: 1.5px var(--color-content);
	color: var(--color-content);
	line-height: 1;
	margin: 0 0 0.5rem 0;
	font-weight: 700;
	font-style: italic;
	text-align: center;
}

.img-wrap {
	width: 100%;
	overflow: hidden;
	position: relative;
	height: 100%;
}

.img-wrap--content {
	height: 200px;
}

.img {
	width: calc(100% + 40px);
	height: 100%;
	left: -20px;
	top: 0;
	background-size: cover;
	background-position: 50% 50%;
	position: absolute;
	pointer-events: none;
}

.img--content {
	background-position: 50% 38%;
}

.caption {
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	font-size: 0.75rem;
	font-weight: 400;
	margin: 0.75rem 0 0 0;
	color: var(--color-content);
}

.caption::before {
	content: '---------';
	margin: 0 0.5rem 0 0;
	letter-spacing: -0.15rem;
}

.img-wrap,
.img--content,
.caption,
.number,
.grid__item--title,
.grid__item--title span,
.revealer__inner,
.content__item-header-title {
	will-change: transform;
}



.grid__item--cursor.grid__item--left::after {
	top: -30%;
}

.grid__item--cursor.grid__item--right::after {
	top: -30%;
}



.img-wrap--content::after {
	position: fixed;
	/* take it out of the flow and fix it to the viewport */
	top: 1rem;
	/* 16px down from the very top */
	left: 1rem;
	/* 16px in from the very left */
	right: auto;
	/* ignore the old “right: .5rem” */
	transform: scale(0.5);
	/* if you still want it scaled */
	z-index: 1000;
	/* sit it above everything else */
	cursor: pointer;
	content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='52px' height='52px' viewBox='0 0 52 52'%3E%3Cpath d='M20.921 26.67L5.791 41.75C5.485 41.743.23 36.488.224 36.18L15.32 21.073.098 5.86 5.74.22l15.19 15.24L36.161.22l5.64 5.64-15.27 15.22 15.097 15.15c-.006.307-5.262 5.562-5.569 5.568L20.921 26.67z'/%3E%3C/svg%3E");
}

@media screen and (min-width: 53em) {
	body {
		overflow: hidden;
	}

	.frame {
		position: fixed;
		bottom: 0;
		right: 0;
		padding: 1rem;
		transition: 0.3s opacity;
	}

	.content-open+.frame {
		opacity: 0;
		pointer-events: none;
	}

	.frame__title-wrap {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.frame__title {
		color:--var(--color-content) !important;
		margin: 0;
	}

	.frame__links {
		margin: 0 1.5rem;
	}

	.frame__mode {
		margin: 0;
	}

	.frame a {
		pointer-events: auto;
	}

	.grid {
		height: 100vh;
		grid-template-columns: repeat(3, calc((100% - 36vw) / 3));
		grid-column-gap: 18vw;
	}

	.grid--slideshow {
		top: 0;
	}

	.grid--interaction {
		grid-template-columns: repeat(3, calc(100% / 3));
		grid-column-gap: 0;
	}

	.number {
		font-size: 2.5vw !important;
	}

	.img-wrap {
		height: 35vw;
	}

	.img-wrap--content {
		height: 100%;
		grid-area: 1 / 2 / 2 / 3;
	}

	.content {
		top: 0;
		position: absolute;
		height: 100vh;
		width: 100%;
	}

	.content__item {
		height: 100vh;
		display: grid;
		align-items: center;
		grid-template-columns: 30% 40% 30%;
		grid-column-gap: 0;
	}

	.js .content__item {
		height: 100%;
	}

	.js .content__item--current {
		top: 0;
	}

	.img-wrap--content {
		height: 100%;
	}

	.content__item-header {
		justify-self: center;
		grid-area: 1 / 1 / 2 / 3;
		pointer-events: none;
	}

	.content__item-header-title {
		font-size: 8vw;
	}

	.content__item-copy {
		max-width: 540px;
		justify-self: end;
		text-align: start;
	}

	.frame {
		position: relative;
		z-index: 10;
	}

.frame__nav {
	position: fixed;
	top: 5%;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px 40px;
	z-index: 20;
	pointer-events: none;
	/* Optional: constrain the width for large screens */
	margin: 0 auto;
	/* Center the nav container */
}
	.frame__nav-button {
		background: none;
		border: none;
		cursor: pointer;
		pointer-events: auto;
	}

	.frame__nav-button svg {
		width: 3vw;
		/* Changed from 60px to scale with screen size */
		height: auto;
		/* Changed from 44px to maintain aspect ratio */
		fill: #000;
	}

	.dark-mode .frame__nav-button svg {
		fill: #bb3a3a;
	}

	.grid__item--cursor.grid__item--center {
		margin-top: 200px;
		z-index: 200;
	}

	.grid__item--cursor.grid__item--left,
	.grid__item--cursor.grid__item--center,
	.grid__item--cursor.grid__item--right {
		cursor: default;
	}

	.dark-mode .grid__item--cursor.grid__item--left,
	.dark-mode .grid__item--cursor.grid__item--center,
	.dark-mode .grid__item--cursor.grid__item--right {
		cursor: default;
	}

	.img-wrap--content {
		cursor: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='52px' height='52px' viewBox='0 0 52 52' style='enable-background:new 0 0 52 52;' xml:space='preserve'%3E %3Cpath  d='M20.921 26.67L5.791 41.75C5.485 41.743.23 36.488.224 36.18L15.32 21.073.098 5.86 5.74.22l15.19 15.24L36.161.22l5.64 5.64-15.27 15.22 15.097 15.15c-.006.307-5.262 5.562-5.569 5.568L20.921 26.67z'/%3E %3C/svg%3E") 21 21, pointer;
	}

	.dark-mode .img-wrap--content {
		cursor: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='52px' height='52px' viewBox='0 0 52 52' style='enable-background:new 0 0 52 52;' xml:space='preserve'%3E %3Cpath fill='%23bb3a3a' d='M20.921 26.67L5.791 41.75C5.485 41.743.23 36.488.224 36.18L15.32 21.073.098 5.86 5.74.22l15.19 15.24L36.161.22l5.64 5.64-15.27 15.22 15.097 15.15c-.006.307-5.262 5.562-5.569 5.568L20.921 26.67z'/%3E %3C/svg%3E") 21 21, pointer;
	}

	.logo {
		position: fixed;
		bottom: 1rem;
		left: 1rem;
		width: 100px;
		z-index: 100;

	}

	.logo svg {
		width: 100%;
		height: auto;
	}
}

.frame__menu {
	pointer-events: auto;
	color: var(--color-title);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
	/* Updated to remove margin-bottom: 100px */
	z-index: 0;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
		width: 50px;
		margin-top: -18px;
}

.frame__menu-wrapper{
			margin-top: -36px;
			display: flex;
				align-items: center;
				/* Vertically center the menu and pagination */
				justify-content: center;
					height: 50px;
				/* Horizontally center the menu and pagination */
}



#sized:hover #Vector {
	stroke: var(--color-link);
}
.roman-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
	/* Remove fixed width to allow natural sizing */
	height: auto;
	/* Remove fixed height */
	margin: 0 10px;
	/* Add small margin for spacing between menu and pagination */
	font-size: 20px;
}

.roman-radio {
    position: relative; /* Make it a positioning context */
    display: inline-flex;
    align-items: center;
    margin: 0 20px;
    pointer-events: auto;
    cursor: pointer;
    z-index: 200;
}

input[type="radio"] {
	display: none;
}

input[type="radio"]:checked~span {
	color: var(--color-title);

}

input[type="radio"]:checked~.title {
	display: inline;
	margin-left: 0;
}

.title {
	display: none;
	margin-left: -16px;
}
.frame__menu svg {
	max-height: 50px;
}


.grid__item--title span {
	display: inline-block;
}


/* hide the underscores in your content headers */
h2.content__item-header-title .underscore {
	color: transparent;
	text-shadow: none;
	background: none;
}



.content__item-next {
	margin-top: 1.5rem;
	padding: 0.75em 1.5em;
	background: transparent;
	border: 2px solid var(--color-link);
	font-family: ivymode, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
}

.content__item-next:hover {
	background: var(--color-link);
	color: var(--color-bg);
}


/* arrow-wrapper container */
.arrow-wrapper {
	display: flex;
	align-items: center;
}

/* central block (optional label area) */
.block {
	width: 300px;
	height: 100px;
	background: #eee;
	margin: 0 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* fade in on hover */
.arrow-wrapper:hover .block h1 {
	opacity: 1;
}

.block h1 {
	color: var(--color-title);
	opacity: 0.4;
	text-align: center;
	text-transform: uppercase;
	transition: opacity 0.3s;
}

/* Arrow 2 Styles */

#arrow_2 .arrow {
	color: var(--color-content);
	cursor: pointer;
	background: none;
	display: block;
	align-items: flex-start;
	text-transform: uppercase;
	position: relative;
	transition: transform 0.3s;
				pointer-events: auto;

}
	
#arrow_2 .arrow span {
	display: block;
	width: 4em;
	height: 4em;
	opacity: 0;
	transition: opacity 0.3s 0s;
	padding: 0 0.5em;
	font-size: 20px;
}

#arrow_2 .arrow:hover span {
	opacity: 1;
	margin-top: 2px;
	transition: opacity 0.3s 0.1s;
}

#arrow_2 .arrow:before {
	content: '';
	display: block;
	border: solid var(--color-content);
	border-width: 4px 4px 0 0;
	position: absolute;
	top: 4px;
	width: 20px;
	height: 20px;
}

/* Right-pointing variant */
#arrow_2 .arrow.arrow--right {
	margin-top: 20px;
	text-align: right;
}

#arrow_2 .arrow.arrow--right:before {
	left: 0;
	transform: rotate(45deg);
	transition: left 0.3s 0.2s;
}

#arrow_2 .arrow.arrow--right:hover:before {
	left: 100%;
	transition: left 0.3s;
}

#arrow_2 .arrow:hover {
	transform: none;
	
}
/* change arrow head and text color on hover */
#arrow_2 .arrow:hover {
	color: var(--color-content-title);
}

#arrow_2 .arrow:hover::before {
	/* override the border-color on hover */
	border-color: var(--color-content-title);
}

.frame--title {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 1rem;
    z-index: 100;
	color: var(--color-content);
}





/* Ensure numerals transition smoothly and pulse when checked */
.roman-radio .numeral {
	color: var(--color-content);
    /* Remove any existing transition */
    transition: none;
}
.roman-radio .numeral:hover {
	color: var(--color-content-title);
	
}
.roman-radio input[type="radio"]:checked ~ .numeral {
    color: var(--color-title);
    animation: pulse 0.5s;
}

.roman-radio .title {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-16px);
    transition: none; /* Remove transition to avoid conflict with GSAP */
    white-space: nowrap;
}

/* Animate title in when checked */
.roman-radio input[type="radio"]:checked ~ .title {
    margin-left: 0;
    opacity: 1;
}

/* Define the pulse animation for numerals */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.roman-radio .title {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-16px);
    transition: max-width 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
}

.roman-radio input[type="radio"]:checked ~ .title {
    max-width: 1000px; /* Adjust this value if titles are longer */
    opacity: 1;
    transform: translateX(0);
}


		        /* Modal styles */
		        #contactModal {
		        	display: none;
		        	position: fixed;
		        	z-index: 2000;
		        	left: 0;
		        	top: 0;
		        	width: 100%;
		        	height: 100%;
		        	overflow: auto;
		        }
		
		        #contactModal>div {
		        	position: relative;
		        	margin: auto;
		        	width: 100%;
		        	height: 100vh;
		        	background-color: var(--color-bg);
		        	display: flex;
		        	justify-content: center;
		        	align-items: center;
		        	animation: zoomIn .3s both;
		        }
		
		        @keyframes zoomIn {
		        	from {
		        		transform: scale(0);
		        	}
		
		        	to {
		        		transform: scale(1);
		        	}
		        }
		
		        #close_contact_modal {
		        	position: absolute;
		        	top: 10px;
		        	right: 10px;
		        	font-size: 5em;
		        	font-weight: bold;
		        	cursor: pointer;
		        	color: var(--color-text);
		        }
		
		        .container {
		        	flex: 0 1 700px;
		        	margin: auto;
		        	padding: 10px;
		        }
		
		        .screen {
		        	background: var(--color-bg);
		        	border-radius: 15px;
		        	padding: 20px;
		        }
		
		        .screen-body {
		        	display: flex;
		        	flex-wrap: wrap;
		        }
		
		        .screen-body-item {
		        	flex: 1;
		        	padding: 20px;
		        }
		
		        .screen-body-item.left {
		        	display: flex;
		        	flex-direction: column;
		        	justify-content: center;
		        }
		
		        .app-title {
		        	color: var(--color-title);
		        	font-size: 2em;
		        	font-weight: bold;
		        }
		
		        .app-title span {
		        	display: block;
		        }
		
		        .app-contact {
		        	color: var(--color-text);
		        	margin-top: 20px;
		        }
		
		        .app-form-group {
		        	margin-bottom: 15px;
		        }
		
		        .app-form-control {
		        	width: 100%;
		        	padding: 10px 0;
		        	background: none;
		        	border: none;
		        	border-bottom: 1px solid var(--color-text);
		        	color: var(--color-content);
		        	font-size: 1em;
		        	outline: none;
		        }
		
		        .app-form-control::placeholder {
		        	color: var(--color-content);
		        	opacity: 0.7;
		        }
		
		        .app-form-group.buttons {
		        	margin-top: 20px;
		        	text-align: right;
		        }
		
		        .app-form-button {
		        	background: none;
		        	border: none;
		        	color: var(--color-link);
		        	font-size: 1em;
		        	cursor: pointer;
		        	margin-left: 20px;
		        }
		
		        .app-form-button:hover {
		        	color: var(--color-link-hover);
		        }
		
		        .credits {
		        	color: var(--color-text);
		        	text-align: center;
		        	margin-top: 20px;
		        	font-size: 0.9em;
		        }
		
		        .credits-link {
		        	color: var(--color-link);
		        	text-decoration: none;
		        }
		
		        .credits-link:hover {
		        	color: var(--color-link-hover);
		        }
		
		        .dribbble {
		        	width: 20px;
		        	height: 20px;
		        	vertical-align: middle;
		        	margin-left: 5px;
		        }
		
		        .dribbble g {
		        	stroke: var(--color-text);
		        }
		
		        @media (max-width: 600px) {
		        	.screen-body-item {
		        		flex: 100%;
		        	}
		
		        	.app-form-button {
		        		display: block;
		        		margin: 10px 0;
		        	}
		        }


								/* Move the close‐button to the LEFT */
								#close_contact_modal {
									position: absolute;
									top: 10px;
									left: 10px;
									/* instead of right */
									right: auto;
									font-size: 5em;
									font-weight: bold;
									cursor: pointer;
									color: var(--color-caption);
									transition: color 0.2s ease;
									/* smooth hover */
								}
				
								/* Hover effect: same as your menu popup */
								#close_contact_modal:hover {
									color: var(--color-link-hover);
								}


																#Vector{
																	stroke: var(--color-content);
																}



						@keyframes zoomIn {
							from {
								opacity: 0;
								transform: scale3d(.3, .3, .3);
							}
			
							50% {
								opacity: 1;
							}
						}
			
						#myModal ul li a {
							padding: 1em;
							text-transform: uppercase;
							font-weight: 700;
							font-size: 3vw;
							letter-spacing: -0.05em;
							color: #e6e6ea;
							text-decoration: none;
						}
			
						#myModal ul li a:hover {
							color: #bb3a3a !important;
						}
			
						#close_modal:hover {
							color: #bb3a3a !important;
						}



												.frame__links--left {
													margin-right: auto;
												}

																								.frame__links {
																									margin: 0 1.5rem;
																								}



																								a {
    text-decoration: none;
    color: var(--color-link); /* #838288 in light mode */
    outline: none;
}
a:hover,
a:focus {
    color: var(--color-link-hover); /* #bb3a3a in light mode */
    outline: none;
}