/* NEW */

.responsive-img {
	max-width: 100%;   /* don’t go wider than the container/viewport */
	height: auto;      /* keep aspect ratio */
	display: block;    /* remove the small inline gap */
	margin: 0 auto;    /* optional: center horizontally */
  }
  
/* Reset */

html, body, div, span, applet, object,
iframe, h2, h3, h4, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

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

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

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

mark {
	background-color: transparent;
	color: inherit;
}

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

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Spinner */

@-moz-keyframes spinner-rotate {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}

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

@-webkit-keyframes spinner-rotate {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}

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

@-ms-keyframes spinner-rotate {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}

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

@keyframes spinner-rotate {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}

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

/* Loader */

@-moz-keyframes spinner-show {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes spinner-show {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-ms-keyframes spinner-show {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes spinner-show {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-moz-keyframes spinner-hide {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	99% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	100% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: -1;
	}
}

@-webkit-keyframes spinner-hide {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	99% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	100% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: -1;
	}
}

@-ms-keyframes spinner-hide {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	99% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	100% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: -1;
	}
}

@keyframes spinner-hide {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	99% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	100% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: -1;
	}
}

@-moz-keyframes overlay-hide {
	0% {
		opacity: 1;
		z-index: 100000;
	}

	15% {
		opacity: 1;
		z-index: 100000;
	}

	99% {
		opacity: 0;
		z-index: 100000;
	}

	100% {
		opacity: 0;
		z-index: -1;
	}
}

@-webkit-keyframes overlay-hide {
	0% {
		opacity: 1;
		z-index: 100000;
	}

	15% {
		opacity: 1;
		z-index: 100000;
	}

	99% {
		opacity: 0;
		z-index: 100000;
	}

	100% {
		opacity: 0;
		z-index: -1;
	}
}

@-ms-keyframes overlay-hide {
	0% {
		opacity: 1;
		z-index: 100000;
	}

	15% {
		opacity: 1;
		z-index: 100000;
	}

	99% {
		opacity: 0;
		z-index: 100000;
	}

	100% {
		opacity: 0;
		z-index: -1;
	}
}

@keyframes overlay-hide {
	0% {
		opacity: 1;
		z-index: 100000;
	}

	15% {
		opacity: 1;
		z-index: 100000;
	}

	99% {
		opacity: 0;
		z-index: 100000;
	}

	100% {
		opacity: 0;
		z-index: -1;
	}
}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	html {
		height: 100%;
	}

	html {
		box-sizing: border-box;
	}

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

	body {
		height: 100%;
		min-width: 320px;
		text-decoration: none;
	}

	body.is-preload *, body.is-preload *:before, body.is-preload *:after {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}

	body:before {
		-moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
		-webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
		-ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
		animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
		-moz-transform-origin: 50% 50%;
		-webkit-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-transform: none !important;
		color: #e5e6e7;
		content: '\f1ce';
		cursor: default;
		display: block;
		font-size: 2em;
		height: 2em;
		left: 50%;
		line-height: 2em;
		margin: -1em 0 0 -1em;
		opacity: 0;
		position: fixed;
		text-align: center;
		top: 50%;
		width: 2em;
		z-index: -1;
	}

	body:after {
		-moz-animation: overlay-hide 1.5s ease-in forwards !important;
		-webkit-animation: overlay-hide 1.5s ease-in forwards !important;
		-ms-animation: overlay-hide 1.5s ease-in forwards !important;
		animation: overlay-hide 1.5s ease-in forwards !important;
		background: #000000;
		content: '';
		display: block;
		height: 100%;
		left: 0;
		opacity: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: -1;
	}

	body.is-preload:before {
		-moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
		-webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
		-ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
		animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
		z-index: 100001;
	}

	body.is-preload:after {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		opacity: 1;
		z-index: 100000;
	}

	@media (-webkit-min-device-pixel-ratio: 2) {

		body:before {
			line-height: 2.025em;
		}

	}

/* Type */

	body {
		padding-top: 0em;
	}

	nav {
		font-family: "Covered By Your Grace", serif;
		font-size: 1.5em;
		font-weight: 900;
		letter-spacing: 0.025em;
	}

	.syne-mono-regular {
        font-family: "Syne Mono", monospace;
        font-weight: 400;
        font-style: normal;
    }

	
	p {
		font-family: 'Syne Mono', monospace;
		font-weight: 100;
		font-size: 14pt;
		font-style: normal;
		text-align: justify;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
		letter-spacing: 0.025em;
		padding-bottom: 0%;
		line-height: 1.5em;
		color: #ffffff;
	}

		p a {
			color: #ffffff;
		}

	h1 {
		font-family: 'Gasoek One', serif, Arial, Helvetica, sans-serif;
		opacity: 1;
		color: rgba(255, 34, 34, 0.7);
		font-weight: 400;
		font-size: 8em;
		letter-spacing: 0.01em;
		line-height: 1.25em;
		text-align: center;
		display: block;
		margin: 0%;
	}

	h2 {
		font-family: "Covered By Your Grace", serif;
		font-optical-sizing: auto;
		font-style: normal;
		font-weight: 100;
		font-size: 2.1em;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		display: block;
	}

		#intro-heading {
			text-align: left;
		}



.covered-by-your-grace-regular {
  font-family: "Covered By Your Grace", cursive;
  font-weight: 400;
  font-style: normal;
}

	
	h3 {
		font-family: 'Covered By Your Grace', serif, Arial, Helvetica, sans-serif;
		font-size: 3.3em;
		line-height: 1em;
		font-weight: 100;
		color: #ffffff;
		letter-spacing: 0em;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
		text-align: center;
		padding-bottom: 4%;
	}

		#intro-heading {
			padding-bottom: 2%;
		}

	footer {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 0.8em;
	}	

	.hidden {
		display: none;
	}

	.italic-text {
		font-style: italic;
	}	

	.photo-credit a {
		font-family: 'Source Sans Pro', sans-serif;
		text-decoration: none;
		position: absolute;
		bottom: 1em;
		right: 1em;
		color: rgba(255, 255, 255, 0.25);
		font-size: 0.6em;
		padding: 0.5em 1em;
		z-index: 9999;
	}

	.subtitle {
		font-family: 'Covered By Your Grace', sans-serif;
		font-size: 1em;
		font-weight: 400;
		text-align: right;
		margin: 0;
		color: #ffffff;
		padding-bottom: 2%;
	}	

	.break {
		display: block;
		margin: 0;
	}

	.line-break {
		display: block;
		margin-top: 0.5rem;
	}

	.carousel-indicators {
		position: fixed;
		bottom: 1em;               /* or top: 1em; if you prefer them at the top */
		left: 50%;
		transform: translateX(-50%);
		display: none;
		gap: 0.75em;               /* space between dots */
		z-index: 9999;             /* ensure above content */
	}
	  
	.carousel-indicators span {
		display: none;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, 0.4);
		cursor: pointer;
	}
	
	.carousel-indicators span.active {
		background-color: rgba(255, 255, 255, 1.0);
	}

/* Button */

	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out;
		background-color: transparent;
		border: 0;
		cursor: pointer;
		display: inline-block;
		outline: 0;
		text-indent: -9999px;
		white-space: nowrap;
		overflow: hidden;
		font-size: 0.8em;
	}
	
		.button:hover {
			background-color: rgba(229, 230, 231, 0.375);
		}

	.button.more,
	.button.next {
		background-image: url("images/moreorless.svg");
		position: relative;
		text-align: center;
		text-decoration: none;
		text-transform: lowercase;
		background-repeat: no-repeat;
		background-position: center;
		bottom: 0;
		border-radius: 50%;
		width: 6em;
		height: 6em;
	}
	
	.button.anchored {
		position: relative;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 3em 3em 0 0;
		background-image: url("images/moreorless.svg");
		background-repeat: no-repeat;
		background-position: center;
		text-align: center;
		text-decoration: none;
		text-transform: lowercase;
		position: absolute;
		width: 5.3em;
		height: 5em;
	}

	.actions.special {
		display: flex;
		justify-content: center;
	}

	.button.send {
		background-image: url("images/send.svg");
		background-size: 120%;
		background-repeat: no-repeat;
		background-position: center center;
		width: 5em;
		height: 5em;
		border-radius: 50%;
		padding: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		text-indent: -9999px;
		font-size: 1em;
		background-color: transparent;
	}
	
		.button.send:hover {
			background-color: rgba(255, 255, 255, 0.2);
		}

/* List */

	ul.default {
		list-style: disc;
		padding-left: 1em;
	}

		ul.default li {
			padding-left: 0.5em;
		}

	ul.menu {
		cursor: default;
	}

		ul.menu li {
			display: inline-block;
			line-height: 1em;
			border-left: solid 1px #e5e6e7;
			padding: 0 0 0 0.5em;
			margin: 0 0 0 0.5em;
		}

			ul.menu li:first-child {
				border-left: 0;
				padding-left: 0;
				margin-left: 0;
			}

	ol.default {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol.default li {
			padding-left: 0.25em;
		}

/* Nav */

	#header {
		position: fixed;
		z-index: 10000;
		left: 0;
		top: 0;
		width: 100%;
		background: transparent;
		height: 3em;
		line-height: 3em;
		box-shadow: none;
	}

		#header nav {
			position: absolute;
			right: 0.5em;
			top: 0;
			height: 3em;
			line-height: 3em;
		}

			#header nav ul {
				margin: 0;
			}

				#header nav ul li {
					opacity: 0;
					transform: translateY(-20px);
					transition: opacity 1s ease-out, transform 1.5s ease-out;
					display: inline-block;
					margin-left: 0.5em;
					font-size: 0.9em;
				}

					#header nav ul li a {
						display: block;
						color: rgba(255, 34, 34, 0.9);
						text-decoration: none;
						font-weight: 800;
						font-size: 1.25em;
						height: 3em;
						line-height: 3em;
						padding: 0 0.5em 0 0.5em;
						outline: 0;
					}

	#site-language-mobile a {
		display: none;
		position: absolute;
		z-index: 999999;
		right: 0;
		top: 0;
		background: transparent;
		height: 3em;
		line-height: 3em;
		box-shadow: none;
		color: rgba(255, 255, 255, 0.25);
		text-decoration: none;
		font-weight: 200;
		font-size: 0.8em;
		padding: 0 1em;
		outline: 0;
		font-family: "Gabarito", Arial, sans-serif;
		letter-spacing: 0.025em;
	}									

	/* Fade-In Effect for Navigation Items */
	body:not(.is-preload) #header nav ul li {
		opacity: 1;
		transform: translateY(0);
	}
	#header nav ul li:nth-child(1) {
		transition-delay: 2.6s;
	}
	#header nav ul li:nth-child(2) {
		transition-delay: 2.8s;
	}
	#header nav ul li:nth-child(3) {
		transition-delay: 3s;
	}
	#header nav ul li:nth-child(4) {
		transition-delay: 3.2s;
	}
	#header nav ul li:nth-child(5) {
		transition-delay: 3.4s;
	}
	#header nav ul li:nth-child(6) {
		transition-delay: 3.6s;
	}
	#header nav ul li:nth-child(7) {
		transition-delay: 3.8s;
	}
	#header nav ul li:nth-child(8) {
		transition-delay: 4s;
	}
	#header nav ul li:nth-child(9) {
		transition-delay: 4.2s;
	}

/* Sections */

	/* Intro */

	.intro-section {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		margin: 0;
		overflow-x: hidden;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		text-align: center;
		min-height: 100vh;
		min-height: 100lvh;
		box-sizing: border-box;
	}

		.intro-section > .content {
			width: 100%;
			max-width: calc(100% - 4em);
			margin: 0 auto;
			padding-top: 10vh;
			box-sizing: border-box;
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			-moz-transform: translateZ(0);
			-webkit-transform: translateZ(0);
			-ms-transform: translateZ(0);
			transform: translateZ(0);
			opacity: 1;
		}

		#intro-heading,
		#intro-paragraph {
			width: 60%;
			margin: 0 auto;
		}

	#intro {
		background: url("../../images/intro.jpg");
		background-size: cover;
		background-attachment: fixed;
		background-position: bottom center;
		background-repeat: no-repeat;
		position: relative;
		min-height: 100vh;
		min-height: 100lvh;
	}

		#intro::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(255, 255, 255, 0.1);
			pointer-events: none;
			z-index: 1;
		}

		#intro .content {
			position: relative;
			z-index: 2;
		}  

	/* Main */

	.main-section {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		flex-wrap: nowrap;
		position: relative;
		min-height: 100vh;
		min-height: 100lvh;
		margin: 0;
		overflow-x: hidden;
		overflow: hidden;
		box-sizing: border-box;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: space-between;
	}

		.main-section > .content {
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			-moz-transform: translateZ(0);
			-webkit-transform: translateZ(0);
			-ms-transform: translateZ(0);
			transform: translateZ(0);
			opacity: 1.0;
			margin: 0;
		}
  
	.content-box {
		width: 50%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 5vw;
		text-align: left;
		transition: transform 1.3s cubic-bezier(.37,.35,.19,.99);
		overflow-y: auto; /* Add vertical scrolling to the content */
		max-height: 80vh; /* Restrict the height to fit within the viewport */
	}
	
		.content-box-right, 
		.content-box-left {
			transform: translateX(0);
		}

		.content-box-left {
			margin-right: auto;
		}

		.content-box-right {
			margin-left: auto;
		}
		
		.content-box-left header h3 {
			text-align: left;
		}
		
		.content-box-right header h3 {
			text-align: right;
		}

		.inactive .content-box-left {
			transform: translateX(-110%);
		}

		.inactive .content-box-right {
			transform: translateX(110%);
		}

	/* One */

	#section-one {
		background: url("images/overlay.png"), url("../../images/one.jpg");
		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		display: flex;
		justify-content: space-between;
		align-items: top;
		min-height: 100vh;
		min-height: 100lvh;
	}

	/* Two */

	#section-two {
		background: url("images/overlay.png"), url("../../images/two.jpg");
		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, center center;
		min-height: 100vh;
		min-height: 100lvh;
	}

	/* Three */

	#section-three {
		background: url("images/overlay.png"), url("../../images/three.jpg");
		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, center center;
		min-height: 100vh;
		min-height: 100lvh;
	}

	/* Three Bis */

	#section-three-bis {
		background: url("images/overlay.png"), url("../../images/three-bis.jpg");
		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, center center;
		min-height: 100vh;
		min-height: 100lvh;
	}

	/* Four */

	#section-four {
		background: url("images/overlay.png"), url("../../images/four.jpg");
		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, center center;
		min-height: 100vh;
		min-height: 100lvh;
	}

	/* Five */

	#section-five {
		background: url("images/overlay.png"), url("../../images/five.jpg");
		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, center center;
		min-height: 100vh;
		min-height: 100lvh;
	}

	/* Contact */

	#section-contact {
		background: url("images/overlay.png"), url("../../images/contact.jpg");
		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, center center;
		overflow: hidden;
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
		min-height: 100lvh;
	}

	#contact .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	
	.contact-heading {
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
		text-align: center;
		color: white;
		margin-bottom: 0% !important;
	}
	
	.contact-text {
		text-align: center;
		color: white;
		margin-bottom: 0.5em;
	}
	
	.contact-email a {
		text-align: center;
		color: white;
		text-decoration: none;
		display: block;
		margin-bottom: 1em;
	}
	  
	  @keyframes spin {
		from {
		  transform: translateY(-50%) rotate(0deg);
		}
		to {
		  transform: translateY(-50%) rotate(360deg);
		}
	  }

/* Responsive */
  
	#site-title-mobile {
		display: none; /* hidden by default */
	}

	/* Disable animations and transitions for users who prefer reduced motion */
	@media (prefers-reduced-motion: reduce) {
		* {
			animation: none !important;
			transition: none !important;
		}
	}

	@media only screen and (max-width: 1920px) {

	}

	@media only screen and (max-width: 1280px) {

		#site-title-desktop {
			font-size: 7em;
		}


		h3 {
			font-size: 2.8em;
		}

		p {
			font-size: 13pt;
		}
		
	}
	
	@media only screen and (max-width: 1000px) {
		
		#header nav {
			font-size: 100% !important;
		}
		
		#site-title-desktop {
			font-size: 6em;
		}

		h3 {
			font-size: 2.2em;
		}

		p {
			font-size: 11pt;
		}
		
	}
	
@media only screen and (max-width: 820px) {
		
		/* Hide big nav, show small nav, etc. ... (your existing rules) */
		/* 1. Make the wrapper horizontally scrollable */
		.horizontal-wrapper {
			display: flex;               /* Lay out sections side-by-side */
			flex-direction: row;
			flex-wrap: nowrap;           /* Prevent them from wrapping onto a new line */
			overflow-x: auto;            /* Horizontal scroll */
			  touch-action: pan-x;
  overscroll-behavior-x: contain;
			scroll-snap-type: x mandatory; /* (Optional) Snap between sections */
			-webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
			scrollbar-width: none;            /* Firefox */
			-ms-overflow-style: none;         /* IE 10+ */
		}

		/* 1) Force min-height to auto (or 0) so it doesn't conflict */
		.intro-section,
		.main-section {
			min-height: auto !important;
		}

		.my-fullscreen-section {
			height: 100dvh; /* iOS Safari 16+ (and other modern browsers) */
			height: 100vh;  /* fallback */
		}
	
		/* 2. Each section becomes a horizontal "slide" */
		.horizontal-wrapper > section {
			flex: 0 0 100%;              /* Each section takes full viewport width */
			scroll-snap-align: start;    /* (Optional) Snap at the start of each section */
			/* If you want each section to be the full height of the viewport: */
			height: 100dvh;   /* modern iOS Safari will handle the dynamic bars */
			height: 100vh;    /* fallback for other browsers */
			box-sizing: border-box;
		}

		.horizontal-wrapper::-webkit-scrollbar {
			display: none; /* Chrome/Safari/Opera */
		}
		
		/* 3. Let backgrounds scroll normally (since 'fixed' can be problematic on mobile) */
		#intro,
		#section-one,
		#section-two,
		#section-three,
		#section-three-bis,
		#section-four,
		#section-five,
		#section-contact {
			background-attachment: scroll; /* override desktop 'fixed' backgrounds */
		}
	
		/* 4. Adjust other styling as needed (text sizes, etc.) ... */
		/* (Keep your existing mobile adjustments here) */

		#header nav ul li a {
			display: block;
			color: rgba(255, 255, 255, 0.15);
			padding: 0;
			font-weight: 600;
			font-size: 8pt;
		}

		#header nav {
			margin-right: 2%;
		}

		#header nav ul li:nth-child(1),
		#header nav ul li:nth-child(2),
		#header nav ul li:nth-child(3), 
		#header nav ul li:nth-child(4),
		#header nav ul li:nth-child(5),
		#header nav ul li:nth-child(6),
		#header nav ul li:nth-child(7),
		#header nav ul li:nth-child(8) {
			display: none;
		}

		#site-title-desktop,
		#site-subtitle {
			display: none;
		}
		
		#site-title-mobile {
			color: rgba(255, 34, 34, 0.5);
			/* Below are additional styles to make it fill the screen */
			position: absolute;        /* or fixed, if you want it “locked” in place */
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;             /* full viewport height */
			margin: 0;                /* remove default margins */
			padding: 0;
			line-height: 1.2;         /* adjust to taste */
			text-align: center;
			font-size: 25vw;          /* ensures text scales with viewport width */
			display: flex;
			flex-direction: column;
			justify-content: center;  /* vertical centering */
			align-items: center;      /* horizontal centering */
		}

		#section-one {
			flex-direction: column;
			justify-content: center;
			height: auto; /* Let the section adjust to content height */
		  }
		
		.content-box,
		#intro-heading,
		#intro-paragraph {
			width: 90%; /* Adjust box width */
			margin: 0 auto; /* Center horizontally */
			padding-top: 1rem; /* Inner padding */
			height: auto; /* Reset box height */
			flex-grow: 0; /* Prevent vertical stretching */
		}

		#intro-heading {
			padding-bottom: 0;
		}

		h3 {
			font-size: 2.5em;
			text-align: left !important;
		}

		p {
			font-size: 8pt;
			font-weight: 500;
		}

		p.subtitle {
			padding: 0;
			margin-bottom: 1em;
			font-size: 0.7em;
			text-align: left;
		}
		
		p.contact-email {
			padding: 0;
			margin-bottom: 1em;
		}

		#next-button {
			display: none !important;
		}
		
		.button.send {
			font-size: 0.5em;
		}
		
		#more-button {
			display: none !important;
			/* position: absolute;
			top: 50%;
			bottom: 50%;
			transform: translate(9%, -45%);
			display: block;
			font-size: 0.7em; */
		}

		* {
			animation: none !important;
			transition: none !important;
		}

		#intro,
		#section-one,
		#section-two,
		#section-three,
		#section-three-bis,
		#section-four,
		#section-five,
		#section-contact {
			background-attachment: scroll !important;
		}

		.contact-email {
			font-size: 11pt;
		}

		.photo-credit a {
			position: absolute;  /* Make sure it's explicitly set */
			top: 1em;
			left: 1em;
			right: auto;
			bottom: auto;
			z-index: 11000;       /* So it's on top of everything else */
			color: rgba(255, 255, 255, 0.1);
		  }		  

		.carousel-indicators {
			display: flex;
		}
		  
		.carousel-indicators span {
			display: block;
		}
		
	}
	
/* --- Shared mobile background: OFF by default (desktop & large screens) --- */
#shared-bg,
#shared-bg-img,
#shared-veil {
  display: none !important;   /* beats inline flash and any earlier rules */
}

/* === Mobile shared background + veil (ON only on mobile) === */
@media only screen and (max-width: 820px) {

  /* Turn ON the shared mobile background elements */
  #shared-bg,
  #shared-bg-img,
  #shared-veil {
    display: block !important; /* overrides the inline display:none */
  }

  /* Fixed shared wrapper behind everything */
  #shared-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }

  /* Centered wide image (JS will pan it horizontally) */
  #shared-bg-img {
    position: absolute;
    top: 0;
    left: 50%;
    width: 180vw;
    height: 100%;
    margin-left: -90vw;       /* perfect centering */
    object-fit: cover;
    transform: translate3d(0,0,0);
    will-change: transform;
    transition: transform .35s ease;
  }

  /* Veil */
  #shared-veil {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.10);
  }

  /* Remove per-section backgrounds on mobile */
  #intro,
  #section-one,
  #section-two,
  #section-three,
  #section-three-bis,
  #section-four,
  #section-five,
  #section-contact {
    background: none !important;
  }

  /* Avoid double veil on the first screen */
  #intro::before { display: none !important; }

  /* Layering */
  .carousel-indicators { z-index: 9999; }
  .horizontal-wrapper  { position: relative; z-index: 1; }

  /* Optional: lock vertical scroll if you only want horizontal */
  html, body { height: 100%; overflow-y: hidden; }
}

/* iOS Safari hint: avoid translateZ on fixed bg to prevent repaint bugs */
@supports (-webkit-touch-callout: none) {
  #shared-bg { transform: none; }
}