@font-face {
	font-family: Montserrat;
	src: url(../fonts/montserrat/Montserrat-VariableFont_wght.ttf);
	font-style: normal;
}

@font-face {
	font-family: Montserrat;
	src: url(../fonts/montserrat/Montserrat-Italic-VariableFont_wght.ttf);
	font-style: italic;
}

@font-face {
	font-family: JetBrainsMono;
	src: url(../fonts/jetbrains_mono/JetBrainsMono-VariableFont_wght.ttf);
	font-style: normal;
}

@font-face {
	font-family: JetBrainsMono;
	src: url(../fonts/jetbrains_mono/JetBrainsMono-Italic-VariableFont_wght.ttf);
	font-style: italic;
}

@font-face {
	font-family: Rubik;
	src: url(../fonts/rubik/Rubik-VariableFont_wght.ttf);
	font-style: normal;
}

@font-face {
	font-family: Rubik;
	src: url(../fonts/rubik/Rubik-Italic-VariableFont_wght.ttf);
	font-style: italic;
}

@font-face {
	font-family: HeyTiny;
	src: url(../fonts/heytiny/HeyTiny-Bold.ttf);
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: HeyTiny;
	src: url(../fonts/heytiny/HeyTiny.ttf);
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: HeyTiny;
	src: url(../fonts/heytiny/HeyTiny-Thin.ttf);
	font-weight: 100;
	font-style: normal;
} 

@font-face {
	font-family: Holiday;
	src: url(../fonts/holiday/Holiday.otf);
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: Marvin;
	src: url(../fonts/marvin/Marvin.otf);
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: Marvin Outline;
	src: url(../fonts/marvin/Marvin-Outline.otf);
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: Marvin Rounded;
	src: url(../fonts/marvin/Marvin-Rounded.otf);
	font-weight: 400;
	font-style: normal;
}




:root {

	--color-black: #010101;
	--color-white: #FAFAFA;
	--color-off-white: #FDFDFD;
	--color-light-grey: #D0D0D0;
	--color-grey: #6B6B6B;
	--color-dark-grey: #222222;

	--color-instagram: #fccf03;
	--color-facebook: #3B5998;
	--color-twitter: #00ACED;
	--color-youtube: #C4302B;
	--color-tiktok: #ff0050;

	--color-pink: #FF1A9C;
	/*--color-purple: #721fad;*/
	--color-yellow: #ffc600;
	--color-yellow-dark: #F6BF00;
	--color-cyan: #3EA5FE;
	--color-cyan-dark: #2E84CF;
	--color-violet: #9D5FFF;
	--color-violet-dark: #8435FF;
	--color-dark-green: #1E464A;
	--color-dark-green-dark: #18383B;
	--color-light-blue: #7EC1CD;

	--color-purple: #C33AF1;
	--color-purple-dark: #6F1B8C;
	--color-purple-darker: #4D0F63;

	--color-default-text: #444444;


	--max-width: 1200px;
	--navbar-height: 80px;
}

html,
body {
	overscroll-behavior-y: none;
}

html {

	scroll-behavior: smooth;
}

body {
	margin: 0px;
	padding: 0px;
	border: 0px;
	width: 100%;

	font-family: Montserrat;

	background-color: var(--color-white);

	color: var(--color-dark-grey);

	text-align: left;

}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

* {
	box-sizing:border-box;
	/*transition: 0.5s;*/

	z-index: 1000;
}

a {
	text-decoration: none;
	color: var(--color-white);

	cursor: pointer;
}

a::before {
	display: block;
	content: attr(title);
	font-weight: bold;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

li {
	text-align: left;
}

button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
						supported by Chrome, Opera and Firefox */
}


.font-jet {
	font-family: 'JetBrainsMono';
}

.font-mont {
	font-family: 'Montserrat';
	font-weight: 400;
}

.font-rubik {
	font-family: 'Rubik';
	font-weight: 400;
}

.font-fun {
	font-family: 'Marvin';
}

.font-hand {
	font-family: 'Holiday';
}

.font-bold {
	font-weight: 700;
}

.font-black {
	font-weight: 900;
}

.font-underline {
	text-decoration: underline;
	text-decoration-thickness: 18%;
	text-underline-offset: 20%;
	text-decoration-color: currentColor;
}

.txt--white {
	color: var(--color-white);
}

.bg--violet {
	background-color: var(--color-violet);
}

.bg--yellow {
	background-color: var(--color-yellow);
}

.bg--yellow-dark {
	background-color: var(--color-yellow-dark);
}

.bg--light-blue {
	background-color: var(--color-light-blue);
}

.container {
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: top center;
}

.video_container--slanted {
	overflow: hidden;
	clip-path: polygon(
	0 5%,
	100% 0,
	100% 95%,
	0 100%
	);
}

.video_container--responsive {

}


.video_container {
	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;
	overflow: hidden;
	width: 100vw;
	max-width: 100%;
	height: 100vh;

	user-select: none;
}

.video_container video  {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 100vh;
	transform: translate(-50%, -50%);
}

@media (min-aspect-ratio: 16/9) {
	.video_container--responsive video {
		/* height = 100 * (9 / 16) = 56.25 */
		height: 56.25vw;
	}
}
@media (max-aspect-ratio: 16/9) {
	.video_container--responsive video {
		/* width = 100 / (9 / 16) = 177.777777 */
		width: 177.78vh;
	}
}


/*.video_container video {
	max-width: 100%;
}*/

.inner_container {
	position: relative;
	width: 100%;
	max-width: var(--max-width);
}

.top_elem_spacer {
	padding-top: var(--navbar-height);
}


.heading, .heading--left {
	font-size: clamp(1.7rem, 1.1rem + 2dvw, 40px);
	line-height: 135%;
	margin: 10px 0;
	letter-spacing: 15%;

	color: var(--color-white);
}


.txt--left {
	text-align: left;
}

.txt--center {
	text-align: center;
}

.txt--right {
	text-align: right;
}


.subheading, .subheading--2, .subheading--3, .subheading--4, .subheading--5 {
	font-family: 'Montserrat';
	line-height: 180%;
	font-size: clamp(1.1rem, 0.8rem + 1dvw, 22px);
	letter-spacing: 7%;
	font-weight: 400;

	margin: 10px 0;

	color: var(--color-white);
}

.subheading--2 {

	line-height: 145%;
}

.subheading--3 {

	font-size: clamp(0.9rem, 0.6rem + 1dvw, 18px);
	font-weight: 700;
	letter-spacing: 10%;
}

.miniheading {

	font-family: 'JetBrainsMono';
	line-height: 125%;

	color: var(--color-white);

	opacity: 25%;

	font-size: min(1.5rem, 24px);
	font-weight: 900;
}

.miniheading--2 {
	font-family: 'Montserrat';

	color: var(--color-white);

	opacity: 20%;

	font-size: 14px;

	font-weight: 450;

	letter-spacing: 5%;
}

/*.link::before {
	display: inline !important;
	content: normal !important;
}*/

.link {
	display: block;
	font-family: 'Montserrat';
	font-size: clamp(0.9rem, 0.7rem + 1vw, 1rem);
	letter-spacing: 10%;
	line-height: 150%;
	padding: 10px 0;

	font-weight: 300;
	color: var(--color-white);
	opacity: 80%;

	text-decoration: underline;
	text-decoration-thickness: 5%;
	text-underline-offset: 45%;
	text-decoration-color: currentColor;

	transition: 0.5s;
}

.link:hover {
	opacity: 100%;
}

.scale_on_hover:hover {
	scale: 1.05;
}


.columns, .columns--reverse {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.columns--reverse {
	flex-direction: column-reverse;
}

.flex {
	display: flex;
	flex-direction: column;
}

.tilted {
	transform: rotate(-5deg);
	margin-top: 10%;
	margin-bottom: 5%;
}


.tag {

	display: inline-block;
	background-color: var(--color-white);
	color: var(--color-dark-grey);
	font-size: 0.7rem;
	font-weight: 900;
	font-family: 'Montserrat';
	letter-spacing: 7%;

	width: auto;

	padding: 3px 8px;

	border-radius: 6px;
}

.subheading--4 {
	font-family: 'JetBrainsMono';
	line-height: 120%;
	font-size: 2rem;
	margin-top: 5px;
	letter-spacing: 0;

}

.subheading--5 {
	font-size: 1rem;
}


.right_on_hover {
	transition: 1s;
}

.hover_parent:hover .right_on_hover {
	transform: translateX(8px);
}

.underline_on_hover {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

.underline_on_hover::after {
	content: "";

	position: absolute;
	left: 0;
	bottom: -2px;

	width: 100%;
	height: 2px;

	background: currentColor;

	transform: scaleX(0);
	transform-origin: left;

	transition:
		transform
		0.3s
		ease;
}

.hover_parent:hover .underline_on_hover::after {
	transform: scaleX(1);
}


.media_slices {

	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 12px;

	width: 100%;

	transition: grid-template-columns 0.5s ease;

}

.media_slices__slice {

	width: 100%;
	height: 65vh;
	object-fit: cover;

	border-radius: 12px;

}


.media_slices:has(.media_slices__slice:nth-child(1):hover) {
	grid-template-columns:
		5fr 1fr 1fr;
}

.media_slices:has(.media_slices__slice:nth-child(3):hover) {
	grid-template-columns:
		1fr 5fr 1fr;
}

.media_slices:has(.media_slices__slice:nth-child(5):hover) {
	grid-template-columns:
		1fr 1fr 5fr;
}


.underline--rounded span {
	display: inline-block;
}

.underline--rounded span::after
{
	content: '';
	margin-top: -4px;
	height: max(0.5vh, 0.5dvw);
	background: var(--color-white);
	border-radius: 2px;
	display: block
}


.nbutton, .nbutton--maroon, .nbutton--yellow {


	padding: 16px 40px;
	border-radius: 8px;
	line-height: 21px;
	vertical-align: middle;

	font-size: 17px;
	font-weight: 800;
	letter-spacing: 10%;

	color: var(--color-white);

	background-color: #111111;

	transition: 0.4s;

}

.nbutton:active, .nbutton--maroon:active, .nbutton--yellow:active {
	transform: scale(0.95) !important;
}

.nbutton:hover {
	background-color: #000000;
	transform: scale(1.1);
}

.nbutton--maroon {
	background-color: #340423;
}

.nbutton--maroon:hover {
	background-color: #3A0528;
	transform: scale(1.03);
}

.nbutton--yellow {
	background-color: #453300;
}

.nbutton--yellow:hover {
	background-color: #684E03;
	transform: scale(1.03);
}

.glow_text {
	color: #fff3d6;

	text-shadow:
		0 0 0.5px rgba(255, 250, 235, 0.95),
		0 0 1.5px rgba(255, 232, 185, 0.7),
		0 0 3px rgba(255, 205, 120, 0.55),
		0 0 7px rgba(245, 165, 60, 0.42),
		0 0 16px rgba(220, 120, 20, 0.28),
		0 0 26px rgba(165, 75, 5, 0.14);

}

.glow_text:hover {
	color: #fff8e8;

	text-shadow:
		0 0 0.5px rgba(255, 255, 245, 1),
		0 0 2px rgba(255, 235, 190, 0.9),
		0 0 4px rgba(255, 205, 115, 0.72),
		0 0 9px rgba(250, 165, 55, 0.58),
		0 0 20px rgba(225, 120, 20, 0.4),
		0 0 34px rgba(170, 75, 5, 0.2);
}


.cyj_header {

	display: flex;
	flex-direction: column;
	font-family: Montserrat;
	font-weight:900;

}

.cyj_cy {

	display: flex;
	flex-direction: column;
	color: #F0F0F0;
}

.cyj_choose {
	font-size: 16dvw;
}

.cyj_your {
	font-family: JetBrainsMono;
	font-weight: 800;
	font-size: 16dvw;

	padding-left: 4dvw;

	align-self: center;
	margin: -13px 0 -2px 0;
}

.cyj_journey {
	font-family: Rubik;
	letter-spacing: 15%;
	line-height: 1;
	font-size: 16dvw;
	color: darkgrey;
	font-weight: black;
	align-self:flex-end;
	justify-self: flex-end;

}

.cyj_subheader {
	opacity: 10%;
	padding: 15px 20px;
	font-weight: 600;
	font-size: clamp(1.4rem, 1rem + 1vw, 26px);
	font-style: italic;
}


.big_image {

	width: 100%;

	height: 75vh;

	border-radius: 20px;

	overflow: hidden;
}


.bigmap_container {

	border-radius: 10px;
	overflow: hidden;

	height: 75vh;
}



.hero_image {


	width: 100%;
	height: 60vh;

	border-radius: 30px;

	overflow: hidden;

}


.form_modal {
	width: 600px;
	max-width: 100%;
	padding: 60px 50px 50px 50px;
	background-color: #FAFAFA;
	border-radius: 20px;
}























/* ========================================
   ERROR PAGE
======================================== */

.error-page {
	--error-page-background:
		#40A5AA;

	--error-page-code:
		#47B0B5;

	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;

	height: 100svh;
	min-height: 100svh;

	overflow: hidden;

	background:
		var(
			--error-page-background
		);

	isolation: isolate;
}


/* ========================================
   GIANT ERROR CODE
======================================== */

.error-page__background {
	position: absolute;

	inset: 0;

	z-index: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	overflow: hidden;

	pointer-events: none;
	user-select: none;
}


/* ========================================
   CODE PARTS

   Intentionally enormous.

   Negative margins pull the characters
   together so they read more like one
   giant graphic rather than 3 separate
   numbers.
======================================== */

.error-page__code-part {
	display: block;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: 50dvw;

	font-weight: 900;

	color:
		var(
			--error-page-code
		);

	white-space: nowrap;
}


/* ========================================
   PUSH OUTER DIGITS BEYOND SCREEN

   Makes the 404 feel larger than the
   viewport rather than neatly contained.
======================================== */

.error-page__code-part:first-child {
	transform:
		translateX(-4dvw);
}


.error-page__code-part:last-child {
	transform:
		translateX(3dvw);
}


/* ========================================
   FOREGROUND CONTENT
======================================== */

.error-page__content {
	position: relative;

	z-index: 2;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	gap:
		clamp(
			14px,
			1.5vw,
			22px
		);

	width:
		min(
			86%,
			440px
		);

	text-align: center;
}


/* ========================================
   MESSAGE
======================================== */

.error-page__message {
	max-width:
		450px;

	font-family:
		"HeyTiny",
		sans-serif;

	font-size: 28px;

	font-weight: 400;

	line-height: 1.3;

	color: #ffffff;
}


/* ========================================
   EXISTING LINK

   Styling comes from your existing
   .link class.

   This only makes sure it sits correctly
   inside this component.
======================================== */

.error-page__content
.link {
	position: relative;

	z-index: 2;

	margin: 0;
}


/* ========================================
   MOBILE

   The code changes orientation.

   Rather than squeezing 404 horizontally,
   each character becomes a huge row and
   the full code fills the screen height.
======================================== */

@media (max-width: 700px) {

	.error-page__background {
		flex-direction: column;

		align-items: center;
		justify-content: center;
	}


	.error-page__code-part {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 100%;

		font-size: 45vh;

		line-height: 0.7;
	}


	/*
		Push first and last numbers slightly
		outside the screen vertically.

		This keeps the oversized poster-like
		feel on mobile too.
	*/

	.error-page__code-part:first-child {
		transform:
			translateY(-3.5svh);
	}


	.error-page__code-part:last-child {
		transform:
			translateY(3.5svh);
	}


	.error-page__content {
		gap: 14px;

		width:
			min(
				80%,
				320px
			);
	}


}


/* ========================================
   VERY SHORT SCREENS
======================================== */

@media (max-height: 600px) and (min-width: 701px) {

	.error-page__code-part {
		font-size:
			min(
				38vw,
				92svh
			);
	}


	.error-page__message {
		font-size:
			clamp(
				15px,
				1.4vw,
				20px
			);
	}

}


/* ========================================
   REDUCED MOTION

   Currently this component has no
   required animation, but this leaves it
   safe if transitions are added later.
======================================== */

@media (prefers-reduced-motion: reduce) {

	.error-page *,
	.error-page *::before,
	.error-page *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}

}


































































/* ========================================
   CLASSES STORY
======================================== */

.classes-story {
	position: relative;

	width: 100%;
}


/* ========================================
   FULL-SCREEN BEATS
======================================== */

.classes-story__beat {
	position: relative;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;

	height: 100svh;
	min-height: 100svh;

	overflow: hidden;
}

.classes-story__beat p {

	max-width: 800px;

	padding: 30px 30px 60px 30px;

	margin-bottom: 100px;

	font-family: Montserrat;

	font-size: clamp(18px, 7dvw, 24px);

	letter-spacing: 5%;

	line-height: 1.8;

	font-weight: 350;

	color: #222222;

	text-align: center;
}


/*
	Prevents a global scroll-behavior:smooth
	rule from fighting the JS while the
	story owns scrolling.
*/

html.is-classes-story-controlled {
	scroll-behavior: auto !important;
}













/* ========================================
   AGE GROUPS
======================================== */

.age-groups {
	display: grid;

	grid-template-columns:
		repeat(
			3,
			minmax(0, 1fr)
		);

	gap: clamp(
		22px,
		2.8vw,
		46px
	);

	width: 100%;

	/* No outside gutter */
	padding: 0;

	margin: 30px 0;
}


/* ========================================
   CARD
======================================== */

.age-groups__card {
	position: relative;

	display: block;

	min-width: 0;

	aspect-ratio: 3 / 4;

	overflow: hidden;

	background: #ece8f1;

	color: #ffffff;

	text-decoration: none;

	border-radius: clamp(
		16px,
		1.4vw,
		24px
	);

	transform:
		translate3d(
			0,
			0,
			0
		)
		scale(1)
		rotate(0deg);

	transform-origin: center;

	transition:
		transform 420ms cubic-bezier(
			0.18,
			0.8,
			0.2,
			1
		);

	isolation: isolate;
}


/* ========================================
   IMAGE
======================================== */

.age-groups__image-wrap {
	position: absolute;
	inset: 0;

	z-index: 0;

	overflow: hidden;

	border-radius: inherit;
}


.age-groups__image {
	position: relative;

	z-index: 0;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transform: scale(1.001);

	transition:
		transform 600ms cubic-bezier(
			0.18,
			0.8,
			0.2,
			1
		),
		filter 350ms ease;
}


/* ========================================
   NO HARD IMAGE OVERLAY

   Explicitly remove the old dark panel.
======================================== */

.age-groups__card::after {
	display: none;
}


/* ========================================
   TEXT + CHEVRON OVERLAY
======================================== */

.age-groups__overlay {
	position: absolute;

	left: 0;
	right: 0;
	bottom: 0;

	z-index: 2;

	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		auto;

	align-items: center;

	gap: clamp(
		14px,
		1.7vw,
		26px
	);

	padding:
		clamp(
			14px,
			1.6vw,
			22px
		)
		clamp(
			14px,
			1.7vw,
			24px
		)
		clamp(
			12px,
			1.4vw,
			19px
		);

	pointer-events: none;
}


/* ========================================
   TEXT BLOCK
======================================== */

.age-groups__text {
	position: relative;

	z-index: 2;

	display: flex;
	flex-direction: column;
	align-items: flex-start;

	width: fit-content;
	max-width: 100%;

	min-width: 0;
}


/* ========================================
   NAME

   Smaller / sleeker than before.
======================================== */

.age-groups__name {
	display: block;

	color: #ffffff;

	font-size: clamp(
		27px,
		2.7vw,
		44px
	);

	line-height: 0.95;

	white-space: nowrap;

	text-shadow:
		0 1px 4px rgba(0, 0, 0, 0.28),
		0 3px 14px rgba(0, 0, 0, 0.2);

	transition:
		transform 350ms cubic-bezier(
			0.18,
			0.8,
			0.2,
			1
		);
}


/* ========================================
   MINIS
======================================== */

.age-groups__card--minis
.age-groups__name {
	font-family:
		"Marvin",
		sans-serif;

	font-weight: 400;
}


/* ========================================
   JUNIORS
======================================== */

.age-groups__card--juniors
.age-groups__name {
	font-family:
		"Rubik",
		sans-serif;

	font-weight: 800;
}


/* ========================================
   SENIORS
======================================== */

.age-groups__card--seniors
.age-groups__name {
	font-family:
		"JetBrainsMono",
		monospace;

	font-weight: 600;
}


/* ========================================
   YEAR RANGE

   Right aligned to the title, then
   nudged slightly further right.
======================================== */

.age-groups__years {
	align-self: flex-end;

	margin-top: clamp(
		2px,
		0.3vw,
		5px
	);

	font-family:
		"Montserrat",
		sans-serif;

	font-size: clamp(
		10px,
		0.9vw,
		14px
	);

	font-weight: 800;

	line-height: 1.15;

	letter-spacing: 0.035em;

	white-space: nowrap;

	text-align: right;

	transform:
		translateX(
			clamp(
				8px,
				0.8vw,
				14px
			)
		);

	text-shadow:
		0 1px 4px rgba(0, 0, 0, 0.34),
		0 2px 10px rgba(0, 0, 0, 0.2);

	transition:
		transform 350ms cubic-bezier(
			0.18,
			0.8,
			0.2,
			1
		);
}


/* ========================================
   CHEVRON

   Plain chevron.

   Vertically centred against the entire
   name + year text block.
======================================== */

.age-groups__chevron {
	position: relative;

	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	align-self: center;

	flex: 0 0 auto;

	width: clamp(
		17px,
		1.5vw,
		24px
	);

	height: clamp(
		28px,
		2.4vw,
		38px
	);

	margin: 0;

	color: #ffffff;

	filter:
		drop-shadow(
			0 2px 5px
			rgba(0, 0, 0, 0.28)
		);

	transition:
		transform 350ms cubic-bezier(
			0.18,
			0.8,
			0.2,
			1
		);
}


.age-groups__chevron svg {
	display: block;

	width: 100%;
	height: 100%;

	overflow: visible;
}


/* ========================================
   HOVER

   Main movement happens to the whole card.
======================================== */

@media (hover: hover) {

	.age-groups__card--minis:hover {
		transform:
			translateY(-8px)
			scale(1.035)
			rotate(-1.15deg);
	}


	.age-groups__card--juniors:hover {
		transform:
			translateY(-8px)
			scale(1.035)
			rotate(0.9deg);
	}


	.age-groups__card--seniors:hover {
		transform:
			translateY(-8px)
			scale(1.035)
			rotate(-0.8deg);
	}


	/*
		Very small internal zoom.

		The card movement is still the main
		interaction.
	*/

	.age-groups__card:hover
	.age-groups__image {
		transform:
			scale(1.025);
	}


	.age-groups__card:hover
	.age-groups__name {
		transform:
			translateY(-2px);
	}


	.age-groups__card:hover
	.age-groups__years {
		transform:
			translateX(
				clamp(
					12px,
					1.1vw,
					19px
				)
			);
	}


	.age-groups__card:hover
	.age-groups__chevron {
		transform:
			translateX(6px);
	}

}


/* ========================================
   FOCUS
======================================== */

.age-groups__card:focus-visible {
	outline:
		4px solid
		#9354f1;

	outline-offset:
		5px;
}


/* ========================================
   ACTIVE / CLICK
======================================== */

.age-groups__card:active {
	transform:
		translateY(-2px)
		scale(0.98)
		rotate(0deg);
}


/* ========================================
   PAGE LEAVE
======================================== */

.age-groups__card.is-leaving {
	transform:
		translateY(-2px)
		scale(0.98)
		rotate(0deg);

	pointer-events: none;
}


.age-groups__card.is-leaving
.age-groups__chevron {
	transform:
		translateX(12px);
}



/* ========================================
   MOBILE SWIPE RAIL
======================================== */

@media (max-width: 900px) {

	/*
		Instead of squeezing all three cards
		into the viewport, turn the group into
		a horizontal swipe rail.

		The next card deliberately peeks into
		view so it is obvious there is more
		content horizontally.
	*/

	.age-groups {
		display: grid;

		grid-template-columns: none;

		grid-auto-flow: column;

		grid-auto-columns:
			min(
				82vw,
				340px
			);

		gap: 14px;

		width: calc(100% + 60px);

		padding: 30px 60px 30px 30px;
		margin: 0;
		margin-left: -30px;

		overflow-x: auto;
		overflow-y: visible;

		/*scroll-snap-type: x proximity;*/

		scroll-padding-inline: 0;

		-webkit-overflow-scrolling: touch;

		overscroll-behavior-inline: contain;

		scrollbar-width: none;
	}


	.age-groups::-webkit-scrollbar {
		display: none;
	}


	/* =================================
	   CARD
	================================= */

	.age-groups__card {
		width: 100%;

		aspect-ratio: 3 / 4;

		border-radius: 16px;

		scroll-snap-align: start;

		scroll-snap-stop: normal;
	}


	/*
		Add some breathing room after the
		last card without creating an outer
		gutter before the first card.
	*/

	.age-groups__card:last-child {
		margin-right: 14vw;
	}


	/* =================================
	   TEXT OVERLAY
	================================= */

	.age-groups__overlay {
		grid-template-columns:
			minmax(0, 1fr)
			auto;

		align-items: center;

		gap: 12px;

		padding:
			12px
			14px
			11px;
	}


	.age-groups__text {
		width: fit-content;

		max-width: 100%;
	}


	/* =================================
	   TITLE
	================================= */

	.age-groups__name {
		font-size: clamp(
			24px,
			8vw,
			36px
		);

		line-height: 0.95;

		white-space: nowrap;
	}


	/* =================================
	   YEAR RANGE
	================================= */

	.age-groups__years {
		margin-top: 2px;

		font-size: clamp(
			9px,
			3vw,
			12px
		);

		line-height: 1.15;

		white-space: nowrap;

		transform:
			translateX(7px);
	}


	/* =================================
	   CHEVRON
	================================= */

	.age-groups__chevron {
		align-self: center;

		width: 15px;
		height: 27px;

		margin: 0;
	}

}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

	.age-groups__card,
	.age-groups__image,
	.age-groups__name,
	.age-groups__years,
	.age-groups__chevron {
		transition: none;
	}


	.age-groups__card:hover,
	.age-groups__card:active,
	.age-groups__card.is-leaving,
	.age-groups__card:hover
	.age-groups__image,
	.age-groups__card:hover
	.age-groups__name,
	.age-groups__card:hover
	.age-groups__years,
	.age-groups__card:hover
	.age-groups__chevron {
		transform: none;
	}

}
















/* ========================================
   WORD WALL
======================================== */

.word-wall {
	position: relative;

	width: 100%;
	height: 100svh;
	min-height: 100svh;

	overflow: hidden;

	background: #f7f5fa;

	isolation: isolate;
}


/* ========================================
   BACKGROUND

   Eight rows divide the ENTIRE viewport
   height equally on desktop.
======================================== */

.word-wall__background {
	position: absolute;
	inset: 0;

	z-index: 0;

	display: grid;

	grid-template-rows:
		repeat(
			8,
			minmax(0, 1fr)
		);

	width: 100%;
	height: 100%;

	overflow: hidden;

	pointer-events: none;
	user-select: none;
}


/* ========================================
   MOBILE-ONLY EXTRA ROWS
======================================== */

.word-wall__row--mobile-extra {
	display: none;
}


/* ========================================
   ROW
======================================== */

.word-wall__row {
	position: relative;

	width: 100%;
	height: 100%;
	min-height: 0;

	/*
		Do not vertically clip individual
		fonts here.

		The parent wall handles the outer
		screen clipping.
	*/

	overflow: visible;
}


/* ========================================
   TRACK
======================================== */

.word-wall__track {
	display: flex;
	align-items: center;

	width: max-content;
	height: 100%;

	will-change: transform;
}


/* ========================================
   GROUP
======================================== */

.word-wall__group {
	display: flex;
	align-items: center;

	flex-shrink: 0;

	height: 100%;

	gap: clamp(
		22px,
		2.7vw,
		52px
	);

	padding-right:
		clamp(
			22px,
			2.7vw,
			52px
		);
}


/* ========================================
   WALL WORDS
======================================== */

.word-wall__word {
	display: block;

	flex-shrink: 0;

	color: #DDCBF8;

	font-size: clamp(
		36px,
		4.7vw,
		72px
	);

	line-height: 1;

	white-space: nowrap;
}


/* ========================================
   FONT VARIATIONS
======================================== */

.word-wall__word--bold {
	font-family: "Rubik";

	font-weight: 900;

	/*font-size: 4dvw;*/

	text-transform: uppercase;
}


.word-wall__word--wide {
	font-family: "Montserrat";

	font-weight: 700;

	letter-spacing: 5%;

	/*font-size: 3.5dvw;*/

	text-transform: uppercase;
}


.word-wall__word--light {
	font-family: "Holiday";

	font-size: max(20px, 2.6dvw);

	padding-top: 0.8dvw;
}


.word-wall__word--serif {
	font-family: "Marvin";

	/*font-size: 3dvw;*/
}


.word-wall__word--italic {
	font-family: "JetBrainsMono";

	/*font-size: 3dvw;*/
}


/* ========================================
   MOVEMENT
======================================== */

.word-wall__row--left
.word-wall__track {
	animation:
		word-wall-left
		38s
		linear
		infinite;
}


.word-wall__row--right
.word-wall__track {
	animation:
		word-wall-right
		42s
		linear
		infinite;
}


/* ========================================
   DIFFERENT SPEEDS
======================================== */

.word-wall__row:nth-child(1)
.word-wall__track {
	animation-duration: 32s;
}


.word-wall__row:nth-child(2)
.word-wall__track {
	animation-duration: 44s;
}


.word-wall__row:nth-child(3)
.word-wall__track {
	animation-duration: 40s;
}


.word-wall__row:nth-child(4)
.word-wall__track {
	animation-duration: 30s;
}


.word-wall__row:nth-child(5)
.word-wall__track {
	animation-duration: 50s;
}


.word-wall__row:nth-child(6)
.word-wall__track {
	animation-duration: 24s;
}


.word-wall__row:nth-child(7)
.word-wall__track {
	animation-duration: 43s;
}


.word-wall__row:nth-child(8)
.word-wall__track {
	animation-duration: 40s;
}


.word-wall__row:nth-child(9)
.word-wall__track {
	animation-duration: 34s;
}


.word-wall__row:nth-child(10)
.word-wall__track {
	animation-duration: 32s;
}


.word-wall__row:nth-child(11)
.word-wall__track {
	animation-duration: 42s;
}


.word-wall__row:nth-child(12)
.word-wall__track {
	animation-duration: 48s;
}


/* ========================================
   LOOP
======================================== */

@keyframes word-wall-left {

	from {
		transform:
			translate3d(
				0,
				0,
				0
			);
	}

	to {
		transform:
			translate3d(
				-50%,
				0,
				0
			);
	}

}


@keyframes word-wall-right {

	from {
		transform:
			translate3d(
				-50%,
				0,
				0
			);
	}

	to {
		transform:
			translate3d(
				0,
				0,
				0
			);
	}

}


/* ========================================
   OVERLAY
======================================== */

.word-wall__content {
	position: relative;

	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;
	min-height: 100svh;

	padding: 24px;
}


/* ========================================
   STATEMENT

   Simple circular background
======================================== */

.word-wall__statement {
	position: relative;
	z-index: 1;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	max-width: 90%;

	padding: 50px 90px 60px 90px;
	margin-bottom: 45px;

	background: transparent;

	text-align: center;

	isolation: isolate;
}


/* ========================================
   MAIN CIRCLE
======================================== */

.word-wall__statement::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 50%;

	z-index: -2;

	width: clamp(
		360px,
		42vw,
		620px
	);

	aspect-ratio: 1;

	background:
		rgba(
			247,
			245,
			250,
			0.98
		);

	border-radius: 50%;

	transform:
		translate(
			-50%,
			-50%
		);

	pointer-events: none;
}


/* ========================================
   SOFT OUTER FALLOFF
======================================== */

.word-wall__statement::after {
	content: "";

	position: absolute;

	top: 50%;
	left: 50%;

	z-index: -3;

	width: clamp(
		400px,
		47vw,
		700px
	);

	aspect-ratio: 1;

	background:
		rgba(
			247,
			245,
			250,
			0.62
		);

	border-radius: 50%;

	filter: blur(28px);

	transform:
		translate(
			-50%,
			-50%
		);

	pointer-events: none;
}


/* ========================================
   KEEP TEXT ABOVE CIRCLE
======================================== */

.word-wall__statement-top,
.word-wall__statement-word,
.word-wall__statement-bottom {
	position: relative;
	z-index: 1;
}

/* ========================================
   KEEP TEXT ABOVE THE ORGANIC SHAPE
======================================== */

.word-wall__statement-top,
.word-wall__statement-word,
.word-wall__statement-bottom {
	position: relative;
	z-index: 1;
}


/* ========================================
   NORMAL STATEMENT TEXT
======================================== */

.word-wall__statement-top,
.word-wall__statement-bottom {
	color: #222222;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: clamp(
		17px,
		2dvw,
		24px
	);

	font-weight: 350;

	line-height: 1.8;

	letter-spacing: 3%;

	padding: 5px 15% 7px 15%;
}


/* ========================================
   WHOLE
======================================== */

.word-wall__statement-word {
	margin:
		clamp(
			6px,
			0.8vw,
			12px
		)
		0;

	color: #9354F1;

	font-family:
		"Rubik",
		sans-serif;

	font-size: clamp(
		36px,
		5vw,
		70px
	);

	font-weight: 900;

	line-height: 0.9;

	letter-spacing: 5%;

	text-transform: uppercase;

	white-space: nowrap;
}


@media (max-width: 700px) {

	.word-wall__statement {
		padding: 65px 40px 45px 40px;

		margin-bottom: 60px;
	}


	.word-wall__statement::before {
		width: clamp(
			300px,
			88vw,
			390px
		);
	}


	.word-wall__statement::after {
		width: clamp(
			330px,
			96vw,
			430px
		);

		filter: blur(22px);
	}


	.word-wall__statement-top,
	.word-wall__statement-bottom {
		max-width: 330px;

		font-size: clamp(
			18px,
			3dvw,
			20px
		);

		padding: 5px 30px;

		line-height: 1.8;
	}


	.word-wall__statement-word {
		font-size: clamp(
			24px,
			8.5dvw,
			48px
		);

		line-height: 0.92;
	}

	.word-wall__statement-top {
		padding-bottom: 4px;
	}

}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

	.word-wall__track {
		animation: none !important;
	}

}








/* ========================================
   AUDITIONS — COMING SOON
======================================== */

.auditions-coming-soon {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100svh;
	min-height: 100svh;

	overflow: hidden;

	background: #050505;

	isolation: isolate;
}


/* ========================================
   SUBTLE AMBIENT LIGHT
======================================== */

.auditions-coming-soon::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 50%;

	width: 55vw;
	height: 35vw;

	transform:
		translate(-50%, -50%);

	background:
		radial-gradient(
			ellipse,
			rgba(255,255,255,.025) 0%,
			rgba(255,255,255,.012) 35%,
			transparent 70%
		);

	filter: blur(35px);

	pointer-events: none;
}


/* ========================================
   CONTENT
======================================== */

.auditions-coming-soon__content {
	position: relative;

	z-index: 1;

	display: flex;
	flex-direction: column;
	align-items: center;

	text-align: center;
}


/* ========================================
   AUDITIONS
======================================== */

.auditions-coming-soon__title {
	position: relative;

	margin: 0;

	font-family:
		"JetBrainsMono",
		sans-serif;

	font-size: clamp(
		32px,
		5vw,
		72px
	);

	font-weight: 800;

	line-height: 1;

	letter-spacing: 7%;

	color: #fff;

	white-space: nowrap;

	/*
		Very restrained glow.

		The centre remains white while the
		outer glow fades into the darkness.
	*/

	text-shadow:
		0 0 2px rgba(255,255,255,.95),
		0 0 8px rgba(255,255,255,.45),
		0 0 22px rgba(255,255,255,.18),
		0 0 45px rgba(255,255,255,.08);

	animation:
		auditions-screen-glow
		5s
		ease-in-out
		infinite;
}


/* ========================================
   SOFT OUTER GLOW
======================================== */

.auditions-coming-soon__title::after {
	content: "AUDITIONS";

	position: absolute;

	inset: 0;

	color: transparent;

	text-shadow:
		0 0 20px rgba(255,255,255,.22),
		0 0 50px rgba(255,255,255,.12),
		0 0 100px rgba(255,255,255,.06);

	filter: blur(5px);

	opacity: .8;

	pointer-events: none;
}


/* ========================================
   COMING SOON
======================================== */

.auditions-coming-soon__subtitle {
	margin:
		22px
		0
		0;

	font-family:
		"Montserrat",
		sans-serif;

	font-size: clamp(
		9px,
		.7vw,
		12px
	);

	font-weight: 500;

	line-height: 1;

	letter-spacing: .3em;

	color: rgba(255,255,255,.55);

	text-shadow:
		0 0 5px rgba(255,255,255,.2),
		0 0 15px rgba(255,255,255,.08);

	animation:
		auditions-subtitle-glow
		5s
		ease-in-out
		infinite;
}


/* ========================================
   SCREEN-LIKE FLICKER

   Extremely subtle. It should feel like
   illuminated hardware, not an animation.
======================================== */

@keyframes auditions-screen-glow {

	0%,
	100% {
		opacity: .91;

		text-shadow:
			0 0 2px rgba(255,255,255,.95),
			0 0 8px rgba(255,255,255,.42),
			0 0 22px rgba(255,255,255,.17),
			0 0 45px rgba(255,255,255,.07);
	}

	48% {
		opacity: .96;
	}

	50% {
		opacity: 1;

		text-shadow:
			0 0 2px rgba(255,255,255,1),
			0 0 10px rgba(255,255,255,.5),
			0 0 25px rgba(255,255,255,.2),
			0 0 55px rgba(255,255,255,.09);
	}

	52% {
		opacity: .96;
	}

}


@keyframes auditions-subtitle-glow {

	0%,
	100% {
		opacity: .5;
	}

	50% {
		opacity: .7;
	}

}


/* ========================================
   HOVER
======================================== */

.auditions-coming-soon__content:hover
.auditions-coming-soon__title {
	text-shadow:
		0 0 2px rgba(255,255,255,1),
		0 0 10px rgba(255,255,255,.55),
		0 0 25px rgba(255,255,255,.22),
		0 0 55px rgba(255,255,255,.1);
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 700px) {

	.auditions-coming-soon__title {
		font-size: clamp(
			30px,
			10vw,
			55px
		);

		letter-spacing: .015em;
	}

	.auditions-coming-soon__subtitle {
		margin-top: 18px;

		font-size: 9px;

		letter-spacing: .24em;
	}

	.auditions-coming-soon::before {
		width: 100vw;
		height: 70vw;
	}

}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

	.auditions-coming-soon__title,
	.auditions-coming-soon__subtitle {
		animation: none;
	}

}




















.footer {

	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;

	padding-top: 110px;
	padding-left: max(30px, env(safe-area-inset-left));
	padding-right: max(30px, env(safe-area-inset-right));

	background-color: #111111;
	color: var(--color-white);

	padding-bottom: env(safe-area-inset-bottom);

}


.footer__content {
	display: block;
	width: 100%;
	max-width: 1200px;
}

.footer__grid {
	display: grid;

	justify-content: center;

	grid-gap: 60px;

	grid-template-columns: auto;
}

.footer__link_list {

	text-align: center;
	align-items: center;
}

.footer__list_title {
	display: block;
	font-family: Rubik;
	font-size: 16px;
	letter-spacing: 9%;

	font-weight: 900;

	padding: 5px;
	margin-bottom: 3px;

	color: var(--color-white);
}

.footer__link {
	display: block;
	font-family: Montserrat;
	font-size: 16px;
	letter-spacing: 9%;
	font-weight: 400;
	line-height: 1.4;

	padding: 5px 5px 5px 5px;
	margin-bottom: 4px;

	color: var(--color-white);
}

.footer__link:hover {

	text-decoration: underline 6%;
	text-underline-offset: 35%;
}

.footer__social {

	display: flex;
	flex-direction: row;

	justify-content: center;
	margin-left: 17px;
}

.footer__link--social {
	display: inline-block;

	padding: 5px 10px 5px 5px;
	margin-right: 12px;
	margin-top: 3px;
}

.footer__link--social svg {

	fill: currentColor;
	/*padding-right: 4px;*/

	height: 20px;
	width: auto;
}


.footer__copyright {

	display: block;
	text-align: center;

	width: 100%;

	padding: 15px 30px 35px 30px;

	font-family: Montserrat;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 10%;
	line-height: 1.6;
	color: var(--color-white);
}

.footer__copyright span, .footer__copyright a {
	display: inline-block;
}

.footer__copyright__link {

}

.footer__copyright__link:hover {

	text-decoration: underline 6%;
	text-underline-offset: 37%;
}

.footer__logo {
	display: flex;
	justify-content: center;
	align-items: center;

	height: 40px;
	padding-left: 5px;

	padding-top: 100px;
	padding-bottom: 40px;

}

.footer__logo svg path:first-child {
	fill: var(--color-white);
}

.footer__logo svg path {
	stroke:  var(--color-white);
}

.footer__logo svg {
	display: block;
	width: 240px;
	max-width: calc(100vw - 128px);
}


.facebook:hover svg path {
	fill: var(--color-facebook);
}

.instagram:hover svg path {
	fill: var(--color-instagram);
}

.twitter:hover svg path {
	fill: var(--color-twitter);
}

.youtube:hover svg path {
	fill: var(--color-youtube);
}

.tiktok:hover svg path {
	fill: var(--color-tiktok);
}



@media (min-width: 600px) {

	.footer {
		padding-top: 85px;
	}

	.footer__grid {
		grid-template-columns: auto auto;
		grid-gap: 110px;
	}

	.footer__link_list {
		text-align: left;
	}

	.footer__social {

		margin-left: 0;
		justify-content: flex-start;
	}
}

@media (min-width: 1100px) {
	.footer__grid {
		grid-template-columns: auto auto auto auto;
	}
}



/** { border: 1px solid red; }*/




















/* ========================================
   NAVBAR
======================================== */

.navbar {
	--navbar-height: 92px;
	--navbar-mega-height: 350px;
	--navbar-max-width: 1200px;

	--navbar-text: #ffffff;
	--navbar-background: transparent;

	--navbar-panel-background: #ffffff;
	--navbar-panel-text: #000000;
	--navbar-panel-hover: #f2f2f2;

	--navbar-overlay: rgba(0, 0, 0, 0.58);

	--navbar-padding-x: 24px;

	/*
		Reserved space at the far right
		for account + cart icons.
	*/

	--navbar-actions-space: 88px;

	--navbar-find-class-color: #000000;
	--navbar-find-class-text: #ffffff;

	position: relative;

	z-index: 100000;

	width: 100%;

	font-family:
		"Montserrat",
		sans-serif;

	font-weight: 800;

	text-transform: uppercase;

	color:
		var(--navbar-text);


	padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}


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


/* ========================================
   COLOUR MODIFIERS
======================================== */

.navbar--transparent {
	--navbar-text: #ffffff;
	--navbar-background: transparent;

	--navbar-panel-background: #ffffff;
	--navbar-panel-text: #000000;
	--navbar-panel-hover: #f2f2f2;
}


.navbar--white {
	--navbar-text: #000000;
	--navbar-background: #ffffff;

	--navbar-panel-background: #ffffff;
	--navbar-panel-text: #000000;
	--navbar-panel-hover: #f2f2f2;
}


.navbar--black {
	--navbar-text: #ffffff;
	--navbar-background: #000000;

	--navbar-panel-background: #000000;
	--navbar-panel-text: #ffffff;
	--navbar-panel-hover: #171717;
}


.navbar--transparent-black {
	--navbar-text: #000000;
	--navbar-background: transparent;

	--navbar-panel-background: #ffffff;
	--navbar-panel-text: #000000;
	--navbar-panel-hover: #f2f2f2;
}


/* ========================================
   POSITION MODIFIERS
======================================== */

.navbar--static {
	position: absolute;
}


.navbar--sticky {
	position: sticky;

	top: 0;
}


.navbar--fixed {
	position: fixed;

	top: 0;
	left: 0;
}


.navbar--reveal-after-fold {
	position: relative;
}


.navbar--reveal-after-fold.is-navbar-revealed {
	position: fixed;

	top: 0;
	left: 0;

	animation:
		navbar-reveal
		0.32s
		cubic-bezier(
			0.22,
			1,
			0.36,
			1
		);
}


@keyframes navbar-reveal {
	from {
		transform:
			translateY(-100%);
	}

	to {
		transform:
			translateY(0);
	}
}


/* ========================================
   TOP BAR
======================================== */

.navbar__bar {
	position: relative;

	z-index: 3;

	width: 100%;

	background:
		var(--navbar-background);

	color:
		var(--navbar-text);
}


/* ========================================
   INNER
======================================== */

.navbar__inner {
	position: relative;

	display: block;

	width:
		min(
			100%,
			var(--navbar-max-width)
		);

	min-height:
		var(--navbar-height);

	margin-inline: auto;

	padding-inline:
		var(--navbar-padding-x);

	overflow: visible;
}


/* ========================================
   SINGLE MEGA MENU SURFACE
======================================== */

.navbar__inner::before {
	content: "";

	position: absolute;

	z-index: 0;

	top: 10px;
	left: 0;
	right: 0;

	height:
		calc(
			var(--navbar-height)
			+
			var(--navbar-mega-height)
			-
			10px
		);

	background:
		var(--navbar-panel-background);

	border-radius:
		14px;

	box-shadow:
		0 14px 34px
		rgba(0, 0, 0, 0.12);

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	transform:
		translateY(-4px)
		scale(0.995);

	transform-origin:
		top center;

	transition:
		opacity 0.2s ease,
		transform
		0.3s
		cubic-bezier(
			0.22,
			1,
			0.36,
			1
		),
		visibility 0.2s,
		border-radius 0.2s ease;
}


.navbar.is-mega-open
.navbar__inner::before {
	opacity: 1;

	visibility: visible;

	transform:
		translateY(0)
		scale(1);
}


/* ========================================
   EDGE-TO-EDGE MEGA MENU
======================================== */

.navbar.is-navbar-edge-to-edge
.navbar__inner::before {
	top: 0;

	height:
		calc(
			var(--navbar-height)
			+
			var(--navbar-mega-height)
		);

	border-radius: 0;
}


/*
	Old standalone mega surface is no
	longer needed.
*/

.navbar__mega-surface {
	display: none;
}


/* ========================================
   DESKTOP AREA
======================================== */

.navbar__desktop-area {
	position: relative;

	z-index: 2;

	width: 100%;

	height:
		var(--navbar-height);

	color:
		inherit;

	transition:
		color 0.18s ease;
}


.navbar.is-mega-open
.navbar__desktop-area {
	color:
		var(--navbar-panel-text);
}


/* ========================================
   DESKTOP NAV
======================================== */

.navbar__desktop-nav {
	position: relative;

	z-index: 2;

	display: grid;

	/*
		Equal left and right halves.

		The brand sits in its own auto
		column exactly between them.

		This keeps CATCHLIGHTS perfectly
		centred.
	*/

	grid-template-columns:
		minmax(0, 1fr)
		auto
		minmax(0, 1fr);

	align-items: stretch;

	width: 100%;

	height:
		var(--navbar-height);
}


/* ========================================
   LEFT / RIGHT NAV SIDES
======================================== */

.navbar__desktop-side {
	display: flex;

	align-items: stretch;

	min-width: 0;
}


/*
	Productions + Classes distribute
	themselves evenly across the whole
	left half.
*/

.navbar__desktop-side--left {
	justify-content:
		space-evenly;
}


/*
	Community + Contact distribute
	themselves evenly between the brand
	and the reserved icon area.
*/

.navbar__desktop-side--right {
	justify-content:
		space-evenly;

	padding-right:
		var(--navbar-actions-space);
}


/* ========================================
   BRAND
======================================== */

.navbar__brand {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	color:
		inherit;

	font-weight: 900;

	line-height: 1;

	letter-spacing:
		0.18em;

	text-transform:
		uppercase;

	text-decoration:
		none;

	white-space:
		nowrap;

	user-select:
		none;

	-webkit-user-select:
		none;

	-webkit-tap-highlight-color:
		transparent;

	transform:
		scale(1);

	transform-origin:
		50% 100%;

	transition:
		transform 0.18s ease,
		opacity 0.18s ease;
}


.navbar__brand--desktop {
	align-self: center;

	justify-self: center;

	font-size:
		clamp(
			14px,
			1.65vw,
			20px
		);
}


.navbar__brand:hover {
	opacity: 1;

	transform:
		scale(1.035);
}


.navbar__brand:active {
	transform:
		scale(0.98);
}


.navbar__brand--mobile {
	display: none;
}


/* ========================================
   DESKTOP CATEGORY ITEMS
======================================== */

.navbar__desktop-item {
	display: flex;

	align-items: center;
	justify-content: center;

	min-width: 0;

	height:
		var(--navbar-height);
}


.navbar__desktop-link {
	position: relative;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height:
		48px;

	padding:
		0 8px;

	border: 0;

	background:
		transparent;

	color:
		inherit;

	font-family:
		inherit;

	font-size:
		clamp(
			8px,
			0.95vw,
			11px
		);

	font-weight: 800;

	line-height: 1;

	letter-spacing:
		0.1em;

	text-transform:
		uppercase;

	white-space:
		nowrap;

	cursor:
		pointer;

	opacity:
		0.9;

	transform:
		scale(1);

	transition:
		transform 0.18s ease,
		opacity 0.18s ease;
}


/* ========================================
   ACTIVE CATEGORY UNDERLINE
======================================== */

.navbar__desktop-link::after {
	content: "";

	position: absolute;

	left: 8px;
	right: 8px;

	bottom: 8px;

	height: 2px;

	background:
		currentColor;

	opacity: 0;

	transform:
		scaleX(0);

	transform-origin:
		center;

	transition:
		opacity 0.16s ease,
		transform
		0.23s
		cubic-bezier(
			0.22,
			1,
			0.36,
			1
		);
}


.navbar__desktop-item.is-mega-active
.navbar__desktop-link::after {
	opacity: 1;

	transform:
		scaleX(1);
}


.navbar__desktop-link:hover,
.navbar__desktop-link:focus-visible,
.navbar__desktop-item.is-mega-active
.navbar__desktop-link {
	opacity: 1;

	transform:
		scale(1.045);
}


.navbar__desktop-link:active {
	transform:
		scale(0.98);
}


/* ========================================
   ACCOUNT + CART
======================================== */

.navbar__actions {
	position: absolute;

	z-index: 3;

	top: 50%;

	/*
		As far right as possible while
		keeping normal navbar padding.
	*/

	right:
		var(--navbar-padding-x);

	display: flex;

	align-items: center;
	justify-content: flex-end;

	gap: 8px;

	color:
		inherit;

	transform:
		translateY(-50%);

	transition:
		color 0.18s ease;
}


.navbar.is-mega-open
.navbar__actions {
	color:
		var(--navbar-panel-text);
}


/* ========================================
   ICON LINKS
======================================== */

.navbar__icon-link {
	position: relative;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;

	flex-shrink: 0;

	color:
		inherit;

	text-decoration:
		none;

	opacity: 0.9;

	transform:
		scale(1);

	transition:
		transform 0.18s ease,
		opacity 0.18s ease;
}


.navbar__icon-link:hover {
	opacity: 1;

	transform:
		scale(1.08);
}


.navbar__icon-link:active {
	transform:
		scale(0.94);
}


/* ========================================
   FILLED SVG ICONS
======================================== */

.navbar__icon {
	display: block;

	width: 21px;
	height: 21px;

	flex-shrink: 0;

	color:
		inherit;

	fill:
		currentColor;

	stroke:
		none;
}


.navbar__icon path {
	fill:
		currentColor;

	stroke:
		none;
}


.navbar__icon--cart {
	width: 22px;
	height: 20px;
}


/* ========================================
   CART
======================================== */

.navbar__cart {
	position: relative;
}


.navbar__cart.is-cart-hidden {
	display: none;
}


.navbar__cart-badge {
	position: absolute;

	top: 1px;
	right: 0;

	display: flex;

	align-items: center;
	justify-content: center;

	min-width: 16px;
	height: 16px;

	padding-inline:
		4px;

	border-radius:
		999px;

	background:
		#ffffff;

	color:
		#000000;

	font-size:
		8px;

	font-weight:
		900;

	line-height:
		1;

	letter-spacing:
		0;

	transform:
		translate(
			20%,
			-10%
		);
}


.navbar--white
.navbar__cart-badge,

.navbar.is-navbar-open
.navbar__cart-badge {
	background:
		#000000;

	color:
		#ffffff;
}


.navbar--black
.navbar__cart-badge {
	background:
		#ffffff;

	color:
		#000000;
}


.navbar.is-mega-open
.navbar__cart-badge {
	background:
		var(--navbar-panel-text);

	color:
		var(--navbar-panel-background);
}


.navbar__cart-badge.is-cart-badge-hidden {
	display: none;
}


/* ========================================
   MEGA MENU STAGE
======================================== */

/*
	The stage extends through navbar inner
	padding so its coordinate system begins
	at the same left edge used by the JS
	alignment calculations.
*/

.navbar__mega-stage {
	position: absolute;

	z-index: 2;

	top:
		var(--navbar-height);

	left:
		calc(
			var(--navbar-padding-x) * -1
		);

	width:
		calc(
			100%
			+
			(
				var(--navbar-padding-x) * 2
			)
		);

	height:
		var(--navbar-mega-height);

	pointer-events:
		none;
}


.navbar.is-mega-open
.navbar__mega-stage {
	pointer-events:
		auto;
}


/* ========================================
   INDIVIDUAL MEGA PANEL
======================================== */

.navbar__mega {
	position: absolute;

	inset: 0;

	color:
		var(--navbar-panel-text);

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	transform:
		translateY(5px);

	transition:
		opacity 0.16s ease,
		transform
		0.24s
		cubic-bezier(
			0.22,
			1,
			0.36,
			1
		),
		visibility 0.16s;
}


.navbar__mega.is-mega-visible {
	opacity: 1;

	visibility: visible;

	pointer-events: auto;

	transform:
		translateY(0);
}


/* ========================================
   MEGA LINK COLUMN
======================================== */

.navbar__mega-links {
	position: absolute;

	top: 38px;

	left:
		var(
			--mega-links-left,
			30px
		);

	display: flex;

	flex-direction: column;

	align-items: stretch;

	width:
		max-content;

	max-width:
		290px;

	gap: 2px;
}


/* ========================================
   MEGA LINKS
======================================== */

.navbar__mega-link {
	display: flex;

	align-items: center;

	width: 100%;

	min-height:
		36px;

	padding:
		8px
		18px
		8px
		0;

	color:
		inherit;

	font-size:
		11px;

	font-weight:
		700;

	line-height:
		1.45;

	letter-spacing:
		0.1em;

	text-transform:
		uppercase;

	text-decoration:
		none;

	white-space:
		nowrap;

	opacity:
		0.66;

	transform:
		scale(1);

	transform-origin:
		left center;

	transition:
		opacity 0.16s ease,
		transform 0.16s ease;
}


.navbar__mega-links:hover
.navbar__mega-link {
	opacity:
		0.3;
}


.navbar__mega-links
.navbar__mega-link:hover,

.navbar__mega-link:focus-visible {
	opacity: 1;

	transform:
		scale(1.02);
}


.navbar__mega-link:active {
	transform:
		scale(0.98);
}


/* ========================================
   MEGA MEDIA
======================================== */

.navbar__mega-media {
	position: absolute;

	top: 30px;
	bottom: 30px;

	display: grid;

	grid-template-rows:
		minmax(0, 1fr)
		auto;

	gap: 9px;

	margin: 0;
}


/* Links left / image right */

.navbar__mega--links-left
.navbar__mega-media {
	left:
		calc(
			var(
				--mega-links-left,
				30px
			)
			+
			var(
				--mega-links-width,
				220px
			)
			+
			46px
		);

	right:
		30px;
}


/* Image left / links right */

.navbar__mega--links-right
.navbar__mega-media {
	left:
		30px;

	right:
		calc(
			100%
			-
			var(
				--mega-links-left,
				700px
			)
			+
			46px
		);
}


/* ========================================
   MEGA IMAGE
======================================== */

.navbar__mega-image-frame {
	position: relative;

	min-height: 0;

	overflow:
		hidden;

	border-radius:
		5px;

	background:
		#ececec;
}


.navbar--black
.navbar__mega-image-frame {
	background:
		#171717;
}


.navbar__mega-image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit:
		cover;

	transform:
		scale(1);

	transition:
		transform
		0.5s
		cubic-bezier(
			0.22,
			1,
			0.36,
			1
		);
}


.navbar__mega-media:hover
.navbar__mega-image {
	transform:
		scale(1.015);
}


/* ========================================
   PLACEHOLDER
======================================== */

.navbar__mega-placeholder {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	min-height:
		220px;

	padding:
		30px;

	background:
		#ececec;

	color:
		#777777;

	font-size:
		10px;

	font-weight:
		700;

	letter-spacing:
		0.1em;

	text-align:
		center;
}


.navbar--black
.navbar__mega-placeholder {
	background:
		#171717;

	color:
		#888888;
}


/* ========================================
   CAPTION
======================================== */

.navbar__mega-caption {
	margin: 0;

	color:
		inherit;

	font-size:
		9px;

	font-weight:
		600;

	line-height:
		1.4;

	letter-spacing:
		0.1em;

	text-transform:
		uppercase;

	opacity:
		0.48;
}


/* ========================================
   MOBILE MENU BUTTON
======================================== */

.navbar__menu-button {
	display: none;

	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	padding: 0;

	border: 0;

	background:
		transparent;

	color:
		inherit;

	cursor:
		pointer;

	-webkit-tap-highlight-color:
		transparent;
}


/* ========================================
   HAMBURGER
======================================== */

.navbar__menu-icon {
	position: relative;

	display: flex;

	flex-direction: column;

	justify-content: center;

	gap: 5px;

	width: 23px;
	height: 23px;

	transition:
		transform
		0.42s
		cubic-bezier(
			0.22,
			1,
			0.36,
			1
		);
}


.navbar__menu-line {
	display: block;

	width: 100%;
	height: 2px;

	background:
		currentColor;

	transform-origin:
		center;

	transition:
		transform
		0.32s
		cubic-bezier(
			0.22,
			1,
			0.36,
			1
		),
		opacity
		0.18s ease;
}


.navbar.is-navbar-open
.navbar__menu-icon {
	transform:
		rotate(90deg);
}


.navbar.is-navbar-open
.navbar__menu-line:nth-child(1) {
	transform:
		translateY(7px)
		rotate(45deg);
}


.navbar.is-navbar-open
.navbar__menu-line:nth-child(2) {
	opacity: 0;

	transform:
		scaleX(0);
}


.navbar.is-navbar-open
.navbar__menu-line:nth-child(3) {
	transform:
		translateY(-7px)
		rotate(-45deg);
}


/* ========================================
   FOCUS
======================================== */

.navbar__desktop-link:focus-visible,
.navbar__brand:focus-visible,
.navbar__mega-link:focus-visible,
.navbar__icon-link:focus-visible,
.navbar__menu-button:focus-visible,
.navbar__mobile-heading:focus-visible,
.navbar__mobile-link:focus-visible,
.navbar__find-class:focus-visible {
	outline:
		2px solid currentColor;

	outline-offset:
		4px;
}


/* ========================================
   MOBILE OVERLAY
======================================== */

.navbar__overlay {
	position: fixed;

	inset: 0;

	z-index: 1;

	background:
		var(--navbar-overlay);

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	transition:
		opacity 0.24s ease,
		visibility 0.24s;
}


.navbar.is-navbar-open
.navbar__overlay {
	opacity: 1;

	visibility: visible;

	pointer-events: auto;
}


/* ========================================
   MOBILE MENU
======================================== */

.navbar__mobile-menu {
	display: none;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 900px) {

	.navbar {
		--navbar-height:
			72px;

		--navbar-padding-x:
			24px;
	}


	.navbar__inner::before {
		content:
			none;
	}


	.navbar__desktop-area {
		display:
			none;
	}


	/* ====================================
	   MOBILE TOP BAR
	==================================== */

	.navbar.is-navbar-open {
		position:
			fixed;

		top: 0;
		left: 0;
	}


	.navbar.is-navbar-open
	.navbar__bar {
		background:
			var(--navbar-panel-background);

		color:
			var(--navbar-panel-text);
	}


	.navbar__inner {
		display:
			flex;

		align-items:
			center;

		justify-content:
			space-between;

		gap:
			14px;

		width:
			100%;

		padding-inline:
			var(--navbar-padding-x);
	}


	/* ====================================
	   MOBILE BRAND
	==================================== */

	.navbar__brand--mobile {
		display:
			inline-flex;

		font-size:
			clamp(
				17px,
				5vw,
				22px
			);

		letter-spacing:
			0.18em;
	}


	/* ====================================
	   MOBILE ACTIONS
	==================================== */

	.navbar__actions {
		position:
			relative;

		top:
			auto;

		right:
			auto;

		display:
			flex;

		align-items:
			center;

		justify-content:
			flex-end;

		gap:
			2px;

		color:
			inherit;

		transform:
			none;
	}


	.navbar.is-mega-open
	.navbar__actions {
		color:
			inherit;
	}


	.navbar__icon-link {
		width:
			38px;

		height:
			38px;
	}


	.navbar__icon {
		width:
			20px;

		height:
			20px;
	}


	.navbar__icon--cart {
		width:
			21px;

		height:
			19px;
	}


	.navbar__menu-button {
		display:
			flex;
	}


	/* ====================================
	   MOBILE PANEL
	==================================== */

	.navbar__mobile-menu {
		position:
			fixed;

		top:
			var(--navbar-height);

		left:
			0;

		z-index:
			2;

		display:
			block;

		width:
			100%;

		max-height:
			calc(
				100vh
				-
				var(--navbar-height)
			);

		overflow-y:
			auto;

		overscroll-behavior:
			contain;

		background:
			var(--navbar-panel-background);

		color:
			var(--navbar-panel-text);

		opacity:
			0;

		visibility:
			hidden;

		pointer-events:
			none;

		transform:
			translateY(-14px);

		transition:
			opacity
			0.22s ease,
			transform
			0.34s
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),
			visibility
			0.22s;
	}


	.navbar.is-navbar-open
	.navbar__mobile-menu {
		opacity:
			1;

		visibility:
			visible;

		pointer-events:
			auto;

		transform:
			translateY(0);
	}


	.navbar__mobile-menu-inner {
		width:
			100%;

		padding:
			10px
			24px
			28px;
	}


	/* ====================================
	   MOBILE SECTIONS
	==================================== */

	.navbar__mobile-section {
		width:
			100%;
	}


	.navbar__mobile-heading {
		display:
			flex;

		align-items:
			center;

		justify-content:
			space-between;

		width:
			100%;

		min-height:
			76px;

		padding:
			9px 2px;

		border:
			0;

		background:
			transparent;

		color:
			inherit;

		font-family:
			inherit;

		font-size:
			clamp(
				15px,
				4.5vw,
				18px
			);

		font-weight:
			800;

		line-height:
			1.2;

		letter-spacing:
			0.1em;

		text-align:
			left;

		text-transform:
			uppercase;

		cursor:
			pointer;

		opacity:
			0.88;

		transition:
			opacity
			0.16s ease,
			transform
			0.16s ease;
	}


	.navbar__mobile-heading:hover,
	.navbar__mobile-heading:focus-visible,
	.navbar__mobile-section.is-mobile-section-open
	.navbar__mobile-heading {
		opacity:
			1;
	}


	.navbar__mobile-heading:active {
		transform:
			scale(0.985);
	}


	/* ====================================
	   PLUS → MINUS
	==================================== */

	.navbar__mobile-symbol {
		position:
			relative;

		display:
			block;

		width:
			32px;

		height:
			32px;

		flex:
			0 0 32px;

		font-size:
			0;

		transform:
			rotate(0deg);

		transition:
			transform
			0.38s
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			);
	}


	.navbar__mobile-symbol::before,
	.navbar__mobile-symbol::after {
		content:
			"";

		position:
			absolute;

		left:
			50%;

		top:
			50%;

		background:
			currentColor;

		border-radius:
			999px;
	}


	.navbar__mobile-symbol::before {
		width:
			18px;

		height:
			2px;

		transform:
			translate(
				-50%,
				-50%
			);
	}


	.navbar__mobile-symbol::after {
		width:
			2px;

		height:
			18px;

		transform:
			translate(
				-50%,
				-50%
			)
			scaleY(1);

		transition:
			transform
			0.26s
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			);
	}


	.navbar__mobile-section.is-mobile-section-open
	.navbar__mobile-symbol {
		transform:
			rotate(180deg);
	}


	.navbar__mobile-section.is-mobile-section-open
	.navbar__mobile-symbol::after {
		transform:
			translate(
				-50%,
				-50%
			)
			scaleY(0);
	}


	/* ====================================
	   MOBILE ACCORDION
	==================================== */

	.navbar__mobile-links {
		display:
			grid;

		grid-template-rows:
			0fr;

		transition:
			grid-template-rows
			0.34s
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			);
	}


	.navbar__mobile-section.is-mobile-section-open
	.navbar__mobile-links {
		grid-template-rows:
			1fr;
	}


	.navbar__mobile-links-inner {
		min-height:
			0;

		overflow:
			hidden;

		display:
			flex;

		flex-direction:
			column;

		padding-left:
			14px;

		padding-right:
			8px;
	}


	/* ====================================
	   MOBILE LINKS
	==================================== */

	.navbar__mobile-link {
		display:
			block;

		padding:
			14px 0;

		color:
			inherit;

		font-size:
			13px;

		font-weight:
			600;

		line-height:
			1.5;

		letter-spacing:
			0.1em;

		text-transform:
			uppercase;

		text-decoration:
			none;

		opacity:
			0.62;

		transform:
			scale(1);

		transform-origin:
			left center;

		transition:
			opacity
			0.16s ease,
			transform
			0.16s ease;
	}


	.navbar__mobile-link:first-child {
		padding-top:
			5px;
	}


	.navbar__mobile-link:last-child {
		padding-bottom:
			25px;
	}


	.navbar__mobile-link:hover,
	.navbar__mobile-link:focus-visible {
		opacity:
			1;

		transform:
			scale(1.015);
	}


	.navbar__mobile-link:active {
		transform:
			scale(0.98);
	}


	/* ====================================
	   FIND YOUR CLASS
	==================================== */

	.navbar__mobile-footer {
		padding:
			23px
			4px
			4px;
	}


	.navbar__find-class {
		display:
			flex;

		align-items:
			center;

		justify-content:
			center;

		width:
			100%;

		min-height:
			60px;

		padding:
			15px
			22px;

		border:
			0;

		border-radius:
			7px;

		background:
			var(
				--navbar-find-class-color,
				#000000
			);

		color:
			var(
				--navbar-find-class-text,
				#ffffff
			);

		font-family:
			inherit;

		font-size:
			12px;

		font-weight:
			800;

		line-height:
			1;

		letter-spacing:
			0.1em;

		text-transform:
			uppercase;

		text-align:
			center;

		text-decoration:
			none;

		transform:
			scale(1);

		transition:
			transform
			0.2s
			cubic-bezier(
				0.22,
				1,
				0.36,
				1
			),
			background-color
			0.22s ease;
	}


	.navbar__find-class:hover,
	.navbar__find-class:focus-visible {
		transform:
			scale(1.025);
	}


	.navbar__find-class:active {
		transform:
			scale(0.955);
	}

}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

	.navbar *,
	.navbar *::before,
	.navbar *::after {
		animation-duration:
			0.01ms !important;

		animation-iteration-count:
			1 !important;

		transition-duration:
			0.01ms !important;
	}

}





















.media_slices {
	display: grid;

	grid-template-columns:
		1fr 1fr 1fr;

	grid-gap: 12px;

	width: 100%;

	transition: 0.9s ease-in-out;
}

.media_slices__slice {
	min-width: 0;
	width: 100%;
	height: 65vh;
	object-fit: cover;

	border-radius: 12px;
}


/*
	================================
	MOBILE — DEFAULT
	================================

	Children 2 and 4 are hidden,
	leaving:

	1 / 3 / 5
*/

.media_slices__slice:nth-child(2),
.media_slices__slice:nth-child(4) {
	display: none;
}


/*
	SLICE 1
*/

.media_slices:has(.media_slices__slice:nth-child(1):hover),
.media_slices:has(.media_slices__slice:nth-child(1).is-auto-active) {
	grid-template-columns:
		5fr 1fr 1fr;
}


/*
	SLICE 3
*/

.media_slices:has(.media_slices__slice:nth-child(3):hover),
.media_slices:has(.media_slices__slice:nth-child(3).is-auto-active) {
	grid-template-columns:
		1fr 5fr 1fr;
}


/*
	SLICE 5
*/

.media_slices:has(.media_slices__slice:nth-child(5):hover),
.media_slices:has(.media_slices__slice:nth-child(5).is-auto-active) {
	grid-template-columns:
		1fr 1fr 5fr;
}


/*
	================================
	DESKTOP — 700PX+
	================================
*/

@media (min-width: 700px) {
	.media_slices {
		grid-template-columns:
			1fr 1fr 1fr 1fr 1fr;
	}

	.media_slices__slice:nth-child(2),
	.media_slices__slice:nth-child(4) {
		display: block;
	}

	.media_slices__slice {
		height: 75vh;
	}


	/*
		SLICE 1
	*/

	.media_slices:has(.media_slices__slice:nth-child(1):hover),
	.media_slices:has(.media_slices__slice:nth-child(1).is-auto-active) {
		grid-template-columns:
			5fr 1fr 1fr 1fr 1fr;
	}


	/*
		SLICE 2
	*/

	.media_slices:has(.media_slices__slice:nth-child(2):hover),
	.media_slices:has(.media_slices__slice:nth-child(2).is-auto-active) {
		grid-template-columns:
			1fr 5fr 1fr 1fr 1fr;
	}


	/*
		SLICE 3
	*/

	.media_slices:has(.media_slices__slice:nth-child(3):hover),
	.media_slices:has(.media_slices__slice:nth-child(3).is-auto-active) {
		grid-template-columns:
			1fr 1fr 5fr 1fr 1fr;
	}


	/*
		SLICE 4
	*/

	.media_slices:has(.media_slices__slice:nth-child(4):hover),
	.media_slices:has(.media_slices__slice:nth-child(4).is-auto-active) {
		grid-template-columns:
			1fr 1fr 1fr 5fr 1fr;
	}


	/*
		SLICE 5
	*/

	.media_slices:has(.media_slices__slice:nth-child(5):hover),
	.media_slices:has(.media_slices__slice:nth-child(5).is-auto-active) {
		grid-template-columns:
			1fr 1fr 1fr 1fr 5fr;
	}
}



































.stack-carousel {
	width: 100%;
	max-width: none;
	margin: 0;

	overflow: hidden;

}

.stack-carousel__viewport {
	position: relative;

	width: 100%;

	overflow: hidden;

	cursor: grab;

	user-select: none;
	-webkit-user-select: none;

	touch-action: pan-y;
	overscroll-behavior-x: contain;
	border-radius: 15px;
}

.stack-carousel__viewport.is-dragging {
	cursor: grabbing;
}

.stack-carousel__card {
	position: absolute;
	top: 0;
	left: 0;

	/*
		Desktop front image.

		Leaving more space on the right lets
		the stack spread out considerably.
	*/
	width: 58%;

	aspect-ratio: 15 / 9;

	overflow: hidden;

	border-radius: 15px;

	transform-origin: top left;

	will-change: transform;

	pointer-events: auto;
	text-decoration: none;
	color: inherit;
}

.stack-carousel__card img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	pointer-events: none;

	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

.stack-carousel__title {
	width: 58%;

	padding: 1px 10px;

	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 5%;
	font-style: italic;

	color: var(--color-white);
	font-family: 'Montserrat';
	opacity: 30%;

}


/*
	================================
	MOBILE
	================================

	The carousel remains the full width
	of its parent.

	The main image occupies 84%, leaving
	the remaining width available for
	the visible stack on the right.
*/

@media (max-width: 700px) {
	.stack-carousel__card {
		width: 84%;

		/*
			Portrait / book-like shape.
		*/
		aspect-ratio: 3 / 4;
	}

	.stack-carousel__title {
		width: 84%;

		font-size: 0.8rem;
	}
}











.container--bubble-bg {
	position: relative;

	width: 100%;

	overflow: hidden;

	isolation: isolate;
}


/*
	BUBBLE LAYER
*/

.container--bubble-bg__bubbles {
	position: absolute;

	inset: 0;

	z-index: 0;

	overflow: hidden;

	pointer-events: none;
}


/*
	ACTUAL BUBBLE
*/

.container--bubble-bg__bubble {
	position: absolute;

	top: 0;
	left: 0;

	width: var(--size);
	height: var(--size);

	border-radius: 50%;

	background: #8435FF;

	opacity: var(--opacity);

	will-change: transform;

	pointer-events: none;
}


/*
	CONTENT SITS ABOVE THE BUBBLES
*/

.container--bubble-bg__content {
	position: relative;

	z-index: 1;
}


/*
	THE SQUIGGLY IMAGE
*/

/*.bubble-obstacle {
	position: relative;

	width: min(90%, 1000px);

	margin: 0 auto;

	line-height: 0;
}

.bubble-obstacle img {
	display: block;

	width: 100%;
	height: auto;
}*/

.bubble-obstacle__clip-svg {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.bubble-obstacle {
	position: relative;

	width: 100%;
	aspect-ratio: 975 / 665;

	overflow: hidden;

	clip-path:
		url("#bubble-obstacle-clip");

	-webkit-clip-path:
		url("#bubble-obstacle-clip");
}

.bubble-obstacle__video {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	pointer-events: none;

	user-select: none;
	-webkit-user-select: none;
}








.container--rotate-bg {
	position: relative;

	width: 100%;

	overflow: hidden;

	/*
		Keeps the rotating background
		behind this container's content.
	*/
	isolation: isolate;
}

.container--rotate-bg::before {
	content: "";

	position: absolute;

	/*
		Make the background larger than
		the container so rotating it
		doesn't reveal empty corners.
	*/
	inset: -65%;

	background-image: var(--rotate-bg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

	/*
		Keep it behind the content.
	*/
	z-index: -1;

	animation:
		rotate-background
		600s
		linear
		infinite;

	will-change: transform;
}

.container--rotate-bg__content {
	position: relative;

	z-index: 1;
}

@keyframes rotate-background {
	from {
		transform:
			rotate(0deg)
			scale(1.05);
	}

	to {
		transform:
			rotate(360deg)
			scale(1.05);
	}
}

@media (prefers-reduced-motion: reduce) {
	.container--rotate-bg::before {
		animation: none;
	}
}









.container--breathing-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.container--breathing-bg__circles {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.container--breathing-bg__circle {
	position: absolute;

	left: var(--x);
	top: var(--y);

	width: var(--size);
	height: var(--size);

	border-radius: 50%;

	background: var(--color-dark-green-dark);
	opacity: 1;

	transform:
		translate(-50%, -50%)
		scale(var(--min-scale));

	transform-origin: center;

	animation:
		breathing-circle
		var(--duration)
		ease-in-out
		var(--delay)
		infinite
		alternate;

	will-change: transform;
}

.container--breathing-bg__content {
	position: relative;
	z-index: 1;
}

@keyframes breathing-circle {
	from {
		transform:
			translate(-50%, -50%)
			scale(var(--min-scale));
	}

	to {
		transform:
			translate(-50%, -50%)
			scale(var(--max-scale));
	}
}

@media (prefers-reduced-motion: reduce) {
	.container--breathing-bg__circle {
		animation: none;

		transform:
			translate(-50%, -50%)
			scale(1);
	}
}





.review-carousel {
	position: relative;

	width: 100%;

	overflow: hidden;

	background:
		var(--color-purple-dark);

	color:
		var(--color-white);

	isolation: isolate;

	/*
		Prevent horizontal overscroll from
		chaining out of the carousel.
	*/
	overscroll-behavior-x: none;
}


/*
	================================
	PREVENT HORIZONTAL OVERSCROLL
	================================
*/

.review-carousel,
.review-carousel * {
	overscroll-behavior-x: none;
}


/*
	================================
	PARALLAX BACKGROUND
	================================
*/

.review-carousel__background {
	position: absolute;

	inset: 0;

	z-index: 0;

	overflow: hidden;

	pointer-events: none;
}

.review-carousel__circle {
	position: absolute;

	top: var(--y);
	left: 0;

	width: var(--size);
	height: var(--size);

	border-radius: 50%;

	background:
		var(--color-purple);

	opacity:
		var(--opacity);

	transform:
		translate3d(
			0,
			-50%,
			0
		);

	transform-origin: center;

	will-change:
		transform;

	pointer-events: none;
}


/*
	================================
	CONTENT
	================================
*/

.review-carousel__inner {
	position: relative;

	z-index: 1;

	width: 100%;

	padding:
		clamp(
			70px,
			10vw,
			160px
		)
		clamp(
			20px,
			5vw,
			80px
		)
		clamp(
			70px,
			10vw,
			120px
		);

}


/*
	================================
	HEADING
	================================
*/

.review-carousel__heading {
	margin:
		0
		0
		clamp(
			40px,
			4vw,
			60px
		);

	text-align: center;

	font-size: 3rem;
	letter-spacing: 10%;

	font-family: 'Rubik';
	font-weight: 900;

	color:
		var(--color-white);
}


/*
	================================
	REVIEW VIEWPORT
	================================
*/

.review-carousel__viewport {
	position: relative;
	width: 100%;
	overflow: visible;
	touch-action: pan-y;
	overscroll-behavior-x: none;
}


/*
	================================
	REVIEW TRACK
	================================

	Every review occupies the same grid
	cell so the track height is based on
	the tallest review.
	================================
*/

.review-carousel__track {
	display: grid;

	width: 100%;
}

.review-carousel__review {
	grid-area:
		1 /
		1;

	width: 100%;

	text-align: center;

	color:
		var(--color-white);

	will-change:
		transform;

	pointer-events: none;
}


/*
	================================
	REVIEW TEXT
	================================
*/

.review-carousel__text {
	width:
		min(
			100%,
			850px
		);

	margin:
		0
		auto;

	font-size:
		clamp(
			1.15rem,
			2.4vw,
			1.7rem
		);

	line-height: 1.6;
	letter-spacing: 10%;

	font-family: 'Montserrat';
	font-weight: 300;

	color:
		var(--color-white);
}

.review-carousel__text p {
	margin: 0;
}


/*
	================================
	REVIEWER
	================================
*/

.review-carousel__reviewer {
	margin:
		clamp(
			24px,
			4vw,
			44px
		)
		0
		0;

	font-size:
		clamp(
			0.9rem,
			1.4vw,
			1.1rem
		);

	letter-spacing: 6%;

	font-family: 'Montserrat';
	font-weight: 700;

	color:
		var(--color-white);

	padding-bottom: 30px;
}


/*
	================================
	PAGINATION
	================================
*/

.review-carousel__pagination {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 10px;

	margin-top:
		clamp(
			32px,
			6vw,
			80px
		);
}

.review-carousel__dot {
	display: block;

	width: 10px;
	height: 10px;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background:
		var(--color-white);

	opacity: 0.3;

	cursor: pointer;

	transition:
		opacity
		0.25s
		ease,
		transform
		0.25s
		ease;
}

.review-carousel__dot:hover {
	opacity: 0.65;
}

.review-carousel__dot.is-active {
	opacity: 1;

	transform:
		scale(1.15);
}


/*
	================================
	MOBILE
	================================
*/

@media (max-width: 700px) {
	.review-carousel {
		padding-top: 85px;
	}

	.review-carousel__inner {
		display: flex;
		flex-direction: column;

		width: 100%;

		padding:
			clamp(48px, 7svh, 72px)
			20px
			clamp(36px, 5svh, 56px);
	}

	.review-carousel__heading {
		font-size: 2.5rem;
		padding-bottom: 35px;
	}

	.review-carousel__viewport {
		display: flex;

		flex: 1;

		width: 100%;

		overflow: visible;
	}

	.review-carousel__track {
		width: 100%;
	}

	.review-carousel__text {
		width: min(100%, 520px);

		font-size:
			clamp(
				1.15rem,
				5vw,
				1.5rem
			);

		line-height: 1.5;

		padding-bottom: 10px;
	}

	.review-carousel__reviewer {
		
	}

	.review-carousel__pagination {
		
		margin-top: 100px;
		margin-bottom: 70px;
		gap: 9px;
	}

	.review-carousel__dot {
		width: 9px;
		height: 9px;
	}
}


/*
	================================
	REDUCED MOTION
	================================
*/

@media (prefers-reduced-motion: reduce) {
	.review-carousel__review,
	.review-carousel__circle {
		will-change: auto;
	}
}


















.billboard_lights {
	--billboard-bulb-size: 12px;
	--billboard-bulb-gap: 14px;

	/*
		10% tracking.
	*/

	--billboard-tracking: 0.1em;

	position: relative;

	display: inline-block;

	width: max-content;
	max-width: 100%;

	/*
		Tracking is applied to the source
		instead, so we can remove the extra
		space after the final character.
	*/

	letter-spacing: 0;

	isolation: isolate;
}


/*
	The real text controls the exact layout
	width of the billboard.
*/

.billboard_lights__source {
	position: relative;

	display: inline-block;

	width: max-content;

	white-space: nowrap;

	letter-spacing:
		var(--billboard-tracking);

	/*
		CSS letter-spacing also leaves tracking
		after the final character.

		Cancel that final piece so the element
		ends at the actual edge of the Y.
	*/

	margin-right:
		calc(
			var(--billboard-tracking) * -1
		);

	opacity: 0;

	color: transparent;

	-webkit-text-fill-color:
		transparent;

	-webkit-text-stroke:
		0 transparent !important;

	text-shadow:
		none !important;
}


.billboard_lights__svg {
	position: absolute;

	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	/*
		The glow can still extend beyond the
		word without changing its layout width.
	*/

	overflow: visible;

	pointer-events: none;
}


/*
	Each light is ONE radial-gradient field.

	There is no separate:
	- solid bulb
	- centre circle
	- halo circle
	- border

	The radial gradient itself creates the
	defined luminous centre and long falloff.
*/

.billboard_lights__light {
	stroke: none !important;
	stroke-width: 0 !important;

	opacity: var(--ambient-base, 0.9);

	animation:
		billboard-ambient-flicker
		var(--ambient-duration, 5000ms)
		ease-in-out
		var(--ambient-delay, 0ms)
		infinite;

	animation-play-state: paused;
}


/*
	Only animate while near the viewport.
*/

.billboard_lights.is-billboard-active
.billboard_lights__light {
	animation-play-state: running;
}


/*
	================================
	SOFT CONTINUOUS AMBIENT FLICKER
	================================

	Every lamp fluctuates independently.

	The variation is intentionally small:
	it should feel alive rather than flash.
*/

@keyframes billboard-ambient-flicker {
	0%,
	100% {
		opacity: var(--ambient-base);
	}

	11% {
		opacity: var(--ambient-low);
	}

	24% {
		opacity: var(--ambient-base);
	}

	36% {
		opacity: var(--ambient-high);
	}

	49% {
		opacity: var(--ambient-base);
	}

	60% {
		opacity: var(--ambient-low);
	}

	69% {
		opacity: var(--ambient-base);
	}

	79% {
		opacity: var(--ambient-high);
	}

	90% {
		opacity: var(--ambient-base);
	}
}


/*
	================================
	OCCASIONAL STRONGER LIGHT
	================================

	This is another complete radial light
	field placed directly over an existing
	lamp.

	It ramps up softly instead of popping,
	then spends most of its life fading.
*/

.billboard_lights__flare {
	stroke: none !important;
	stroke-width: 0 !important;

	opacity: 0;

	pointer-events: none;
}


.billboard_lights__flare.is-twinkling {
	animation:
		billboard-light-flare
		var(--flare-duration)
		cubic-bezier(
			0.22,
			0.61,
			0.36,
			1
		)
		var(--flare-delay)
		1;
}


@keyframes billboard-light-flare {
	0% {
		opacity: 0;
	}

	7% {
		opacity: 0.08;
	}

	14% {
		opacity: 0.27;
	}

	22% {
		opacity: 0.52;
	}

	30% {
		opacity: 0.68;
	}

	38% {
		opacity: 0.62;
	}

	48% {
		opacity: 0.5;
	}

	59% {
		opacity: 0.37;
	}

	70% {
		opacity: 0.25;
	}

	80% {
		opacity: 0.14;
	}

	88% {
		opacity: 0.07;
	}

	94% {
		opacity: 0.025;
	}

	98% {
		opacity: 0.007;
	}

	100% {
		opacity: 0;
	}
}


/*
	Mobile bulbs slightly smaller/closer.
*/

@media (max-width: 900px) {
	.billboard_lights {
		--billboard-bulb-size: 6px;
		--billboard-bulb-gap: 8px;
	}
}


/*
	Accessibility.
*/

@media (prefers-reduced-motion: reduce) {
	.billboard_lights__light,
	.billboard_lights__flare {
		animation: none !important;
	}
}








































.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 10%;
	z-index: 1000;
}



.clean_overlay_container {
	display: flex;
	position: relative;
	width: 100%;
	min-height: 70vw;
}

.clean_overlay__background {

	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;

	min-height: 70vw;
}

.clean_overlay__left, .clean_overlay__right {
	position: relative;
	width: 100%;

	background-color: white;
}

.clean_overlay__left {
	min-height: 70vw;
}

.clean_overlay__right {
	height: 70vw;
}

.clean_overlay__text_box {
	display: flex;
	align-items: flex-start;
	align-content: center;
	justify-content: flex-start;
	justify-items: center;
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

}


.clean_overlay__text_container {
	position: relative;
}

.clean_overlay__text, .clean_overlay__text_overlay {
	position: absolute;

	font-size: 12dvw;
	line-height: 120%;
	font-weight: 900;

	text-align: center;
	width: 100%;

	padding: 5vw 10vw;
}

.clean_overlay__text {

	color: var(--color-black);

	clip-path: inset(0 0 0 0);

}

.clean_overlay__text_overlay {
	color: var(--color-white);
	clip-path: inset(0 0 0 0);
	display: none;

}


/* -------------------------- DEFAULT STUFF -------------------------- */


.container, .container--reverse {
	display: flex;
	justify-content: center;
	flex-direction: column;

	position: relative;
	top: 0;
	left: 0;
	right: 0;

	width: 100%;
}

.container--reverse {
	flex-direction: column-reverse;
}

.subcontainer {
	display: flex;
	flex-direction: column;

	width: 100%;
}

.padded_container {
	padding-top: 30px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 60px;
}

.top_pad_60 {
	padding-top: 60px;
}

.title, .title--center {
	font-size: 42px;
	font-weight: 600;
	text-align: left;

	color: var(--color-black);

	padding-bottom: 25px;
}

.title--center {
	text-align: center;
}

.subtitle, .subtitle--center {
	font-size: 22px;
	font-weight: 700;
	text-align: left;

	padding-bottom: 5px;
}

.subtitle--center {
	text-align: center;
}

.text, .text--center {
	font-size: 18px;
	font-weight: 400;
	text-align: justify;
	line-height: 1.2;

	color: var(--color-default-text);

	padding-bottom: 25px;
}

.text--center {
	text-align: center;
}

/*.link::before {
	display: inline !important;
	content: normal !important;
}

.link {
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;

	color: var(--color-black);
}

.link:hover {
	text-decoration: underline;
}*/

.map {
	border: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 600px;
}

.info_card {

}

.info_grid--class-schedule, .info_grid--external_productions, .info_grid--dashboard-schedule {
	display: grid;
	grid-row-gap: 16px;

	text-align: left;
}

.info_grid--class-schedule {
	grid-template-columns: auto auto auto auto 1fr;
}

.info_grid--external_productions {
	grid-template-columns: auto auto 1fr;

	max-height: 60vh;
	overflow-y: scroll;
}

.info_grid--dashboard-schedule {
	grid-template-columns: auto auto auto auto auto auto 1fr;
}

.info_grid__title {
	color: white;

	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 0px;

	font-size: 16px;
	font-weight: 700;
}

.info_grid__item {
	display: flex;
	align-items: center;
	background-color: white;
	color: black;

	padding: 15px 20px;

	font-size: 16px;
	font-weight: 300;

}

.info_grid__item:first-child, .info_grid--class-schedule .info_grid__item:nth-child(5n+1), .info_grid--external_productions .info_grid__item:nth-child(3n+1) {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.info_grid--class-schedule .info_grid__item:nth-child(5n), .info_grid--external_productions .info_grid__item:nth-child(3n) {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}


.info_card_container {
	display: flex;
	flex-direction: column;

	flex-grow: 2;
}

.info_card {
	display: flex;
	flex-direction: column;

	flex-grow: 2;
	min-width: 300px;
	max-width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 20px;

	border-radius: 8px;

	background-color: white;
	color: black;
}

.info_card__item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	text-align: left;
}

.info_card__title {
	font-size: 20px;
	font-weight: 700;

	padding-bottom: 7px;
}

.info_card__subtitle {
	text-align: left;
	font-size: 18px;
	font-weight: 700;

	padding-bottom: 2px;
}

.info_card__text {
	font-size: 17px;
	font-weight: 300;

	padding-bottom: 5px;

	line-height: 24px;
}

.info_card__profiles {
	padding-top: 5px;
}

.divider {
	height: 20px;
}

.header_edit {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

.horizontal_list {
	display: block;
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;

	text-align: left;

}

.horizontal_list__item {
	display: inline-block;
	width: auto;
	margin-right: 10px;
}

.horizontal_list__item:first-child {
	margin-left: 20px;
}

.horizontal_list__item:last-child {
	margin-right: 20px;
}

.horizontal_list__image {
	height: 250px;
	border-radius: 20px;
	overflow: hidden;
}

.horizontal_list__image img {
	/*object-fit: cover;*/
	height: 250px;
}

.horizontal_list__title {
	font-size: 20px;
	font-weight: 200;
	text-align: left;
	color: var(--color-black);

	padding: 7px 7px 7px 15px;
	margin-bottom: 20px;
}


.schedule_card_container {
	width: 100%;
	padding-bottom: 20px;

	overflow-x: scroll;
}

.schedule_card_container__inner {
	overflow-y: scroll;
	max-height: 400px;
}

.schedule_card {
	display: flex;
	position: relative;
	flex-direction: row;
	align-items: center;

	width: 100%;
	/*min-width: 600px;*/

	padding: 10px 30px 10px 20px;

	color: var(--color-black);

	cursor: pointer;
}

.schedule_card:hover {
	background-color: #FAFAFA;
}

/*.schedule_card:last-child {
	padding-bottom: 20px;
}*/

.schedule_card__overlay {
	position:absolute;

	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.schedule_card__inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	position:relative;
	pointer-events: none;
	z-index: 1;

	width: 100%;
}

.schedule_card__inner a {
	pointer-events: all;
}

.schedule_card__details {
	display: flex;
	flex-direction: column;

	align-items: flex-start;

	min-width: 240px;
	width: 240px;
	padding-right: 20px;
}

.schedule_card__title {
	font-weight: 200;
	font-size: 20px;
	text-align: left;
	
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

	margin-bottom: 2px;
}

.schedule_card__subtitle {
	font-weight: 500;
	font-size: 16px;
	text-align: left;

	color: var(--color-dark-grey);

	margin-bottom: 1px;
}

.schedule_card__location {
	font-weight: 700;
	font-size: 14px;
	text-align: left;

	color: var(--color-dark-grey);
}

.schedule_card__location:hover {
	color: var(--color-grey);
}

.schedule_card__profiles {
	display: flex;
	flex-grow: 1;
}

.schedule_card__profile {
	height: 46px;
	width: 46px;

	border-radius: 50%;
	overflow: hidden;
	margin-right: -20px;

	border: 1px solid white;
}

.schedule_card__notes {
	font-weight: 300;
	font-size: 12px;
	line-height: 16px;

	text-align: left;
	font-style: italic;
	color: var(--color-grey);
	
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

	margin-left: 45px;
	padding-right: 20px;

	justify-self: flex-start;
	flex-grow: 100;
}

.schedule_card__chevron {
	justify-self: flex-end;
	fill: black;
	width: 10px;
}


.media_card_container {
	width: 100%;

	container-name: media-container;
	container-type: inline-size;

	overflow-y: scroll;
}

.media_card_container__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100%;

	/*max-height: 700px;*/
}

.media_card {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;


	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 10px;

}

.media_card:last-child {
	padding-bottom: 20px;
}

.media_card__image {
	display: block;
	position: relative;
	width: 100%;

	border-radius: 8px;
	overflow: hidden;
}

.media_card__image img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.media_card_image__overlay {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background-color: rgba(255, 255, 255, 0);

	visibility: hidden;
}

.media_card_image__overlay svg {
	fill: rgba(255, 255, 255, 0);
	width: 40px;
	margin-left: 7px;
}

.media_card:hover .media_card_image__overlay svg {
	fill: rgba(255, 255, 255, 0.65);
}

.media_card:hover .media_card_image__overlay {

	background-color: rgba(255, 255, 255, 0.2);
	visibility: visible;
}

.media_card__details {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;

	padding-top: 7px;
	padding-left: 5px;
	padding-right: 10px;
	padding-bottom: 25px;

	width: 100%;

	flex-shrink: 3;
}

.media_card__title {

	width: 100%;

	font-weight: 700;
	font-size: 24px;
	text-align: left;
	line-height: 1.2;
	letter-spacing: 5%;

	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

	padding-bottom: 4px;

	color: var(--color-black);
}

.media_card__description {

	width: 100%;

	font-weight: 400;
	font-size: 16px;
	text-align: justify;
	line-height: 1.4;
	letter-spacing: 3%;

	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;

	color: var(--color-default-text);
}

.media_card_empty {
	padding-left: 30px;
	padding-right: 20px;
	padding-bottom: 40px;

	width: 100%;

	text-align: left;
}

@container media-container (width > 500px) {

	.media_card_container__inner {
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
	}

	.media_card {
		flex-wrap: nowrap;
	}

	.media_card__image {
		min-width: 300px;
		width: 300px;
	}

	.media_card__details {
		padding-top: 7px;
		padding-left: 10px;
		padding-bottom: 15px;
	}

	.media_card__title {
		font-size: 24px;
	}
}

@container media-container (width > 600px) {
	
	.media_card__title {
		font-size: 24px;
	}
}







.gallery_card_container {
	width: 100%;

	container-name: media-container;
	container-type: inline-size;

	overflow-y: scroll;
	overflow-x: scroll;

	padding-bottom: 10px;

	max-height: 500px;
}

.gallery_card_container__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100%;

}

.gallery_card {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;


	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;

}

.gallery_card__image {
	display: block;
	position: relative;
	width: 100%;

	border-radius: 8px;
	overflow: hidden;
}

.gallery_card__image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.gallery_card_image__overlay {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background-color: rgba(255, 255, 255, 0);

	visibility: hidden;
}

.gallery_card_image__overlay svg {
	fill: rgba(255, 255, 255, 0);
	width: 40px;
	margin-left: 7px;
}

.gallery_card:hover .gallery_card_image__overlay svg {
	fill: rgba(255, 255, 255, 0.65);
}

.gallery_card:hover .gallery_card_image__overlay {

	background-color: rgba(255, 255, 255, 0.2);
	visibility: visible;
}

.gallery_card_empty {
	padding-left: 30px;
	padding-right: 20px;
	padding-bottom: 40px;

	width: 100%;

	text-align: left;
}


@container media-container (width > 500px) {

	.gallery_card_container__inner {
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		flex-direction: row;
	}

	.gallery_card {
		/*flex-wrap: nowrap;*/
		padding-right: 0px;
	}

	.gallery_card:last-child {
		padding-right: 20px;
	}

	.gallery_card__image {
		height: 300px;
	}

	.gallery_card__image img {
		height: 300px;
		width: auto;
	}
}





/* -------------------------- NEW STUFF -------------------------- */



.nav-cart {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	color: inherit;

	text-decoration: none;

	width: 64px !important;
	height: 20px;
}

.cart-badge {
	position: absolute;

	top: 0px;
	right: 0px;

	min-width: 18px;
	height: 18px;

	padding: 0;

	font-size: 11px;
	font-weight: 700;

	display: flex;
	align-items: center;
	justify-content: center;

	line-height: 1;
}




.sticky_banner {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	position: sticky;
	width: 100%;

	background-color: var(--color-pink);
	color: var(--color-white);

	padding: 60px 20px;

	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 3%;
	line-height: 130%;

}

.sticky_banner__link_highlight {
	display: block;
	color: var(--color-white);
	font-weight: 300;
	font-size: 1.5rem;
	padding-top: 15px;
}

.sticky_banner:hover .sticky_banner__link_highlight {
	color: var(--color-off-white);
	text-decoration: underline;
}


.container_banner {
	position: relative;
	width: 100%;
}

.banner_image {

	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70%;
}

.banner_text_container {
	display: flex;
	flex-direction: column;
	align-items: stretch;

	flex-grow: 10;

	width: 100%;
	height: inherit;

	z-index: 100;
}

.banner_text {

	padding-top: 100px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 0px;
	align-content: center;

	flex-grow: 1;
	height: 55%;
}


.banner_spacer {

	flex-grow: 1;
	height: 45%;
}


#bigmap {
	width: 100%;
	height: calc(100vh - 60px);

}

.bigmap_image {

	width: 100%;
	height: inherit;
	max-height: 100%;
	object-fit: cover;

	border-radius: 10px 10px 0 0;
	overflow: hidden;

	user-select: none;
}

.bigmap_text {

	padding-left: 9px;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-right: 12px;

	font-family: Montserrat;
	font-weight: 400;
	font-size: 16px;
	color: black;

}

.bigmap_icon {
	height: 14px;
	padding-right: 6px;
}

.leaflet-popup-close-button span {
	color: white !important;
	padding-right: 2px;
}

.leaflet-popup-content-wrapper {
	padding: 0 !important;
}

.leaflet-popup-content {
	margin: 0 !important;
	width: 300px !important;

	font-size: 0 !important;
}

.leaflet-popup-tip-container {
	display: none;
}

.leaflet-popup {
	bottom: -14px !important;
}

.banner_title {

	width: 100%;

	text-align: center;
	font-size: 32px;
	font-weight: 800;
	color: var(--color-white);


	z-index: 1000;
}

.banner_subtitle {

	width: 100%;

	text-align: center;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--color-yellow);

	padding: 20px;

	z-index: 1000;
}

.banner_button {
	display: inline-block;
	padding: 14px 55px;
	margin-top: 12px;
	margin-bottom: 12px;
	background-color: var(--color-yellow);
	color: var(--color-white);
	font-weight: 800;
	font-size: 17px;
	cursor: pointer;
	transition: 0.2s;
	user-select: none;

	border-radius: 22px;

}

.banner_button:hover{
	background-color: var(--color-instagram);
	transition: 0.3s;
}

.leaflet-control-container, .leaflet-control-attribution.leaflet-control {
	display: none !important;
}




.profilelist {
	display: flex;
	flex-direction: column;

	width: 100%;

	overflow-x: scroll;

}

.profilelist__item {
	display: flex;
	align-items: center;
	width: 100%;

	cursor: pointer;

	padding-top: 7px;
	padding-bottom: 7px;

	transition: 0s;
}

/*.profilelist__item:first-child {
	padding-top: 22px;
}*/

.profilelist__item:hover {
	background-color: #FAFAFA;
}

.profilelist__item:hover .profilelist__name {
	font-weight: 500;
	transition: 0;
}

.profilelist .mini_profile_picture {
	margin: 0;
	margin-left: 20px;
}

.profilelist__item:last-item {
	border-bottom: 0px;
}

.profilelist__name {
	font-weight: 300;
	font-size: 16px;
	color: black;

	flex-grow: 3;
	text-align: left;

	padding-left: 14px;
}

.profilelist__chevron {
	justify-self: flex-end;
	fill: black;
	width: 50px;
	padding-left: 10px;
	padding-right: 30px;
}
/*
.profilelist .button {
	margin: 20px;
	border-radius: 20px;
}*/

.profilelist__link {

	padding: 15px;
	margin-right: 15px;

	color: var(--color-black);
}

.profilelist__link:hover {
	color: var(--color-grey);
}


.mini_profile_picture {
	height: 50px;
	width: 50px;
	min-width: 50px;

	border-radius: 50%;
	overflow: hidden;
	margin-right: 10px;
	margin-bottom: 10px;

}

.dashboard_container {
	display: flex;
	justify-content: center;
	width: 100%;
	background-color: #F0F0F0;
}

.dashboard {
	display: flex;
	flex-direction: column;

	padding-top: 35px;

	width: 100%;
	max-width: 1600px;
}

.dashboard__inner {
	display: flex;
	flex-direction: column;

	/*margin: -10px;*/

	width: 100%;

	flex-grow: 2;
}

.dashboard__row {
	display: flex;
	flex-direction: column;

	column-gap: 30px;

	width: 100%;
}

.dashboard__col, .dashboard__col--small {
	display: flex;
	flex-direction: column;

	margin-bottom: 30px;

	width: 100%;

	border-radius: 0px;
	overflow: hidden;

	color: black;
	background-color: white;

	flex-grow: 2;
}

/*.dashboard__col__inner {
	width: 100%;

	border-radius: 0px;
	overflow: hidden;

	background-color: white;
	flex-grow: 2;

}*/

.dashboard__col__inner--no-bg {
	width: 100%;
}

.dashboard__col_3 {
	width: 100%;
}

.dashboard__title_container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: flex-start;
	justify-items: flex-start;
	align-content: flex-start;
	text-align: left;
}

.dashboard__title {
	font-size: 42px;
	font-weight: 300;
	text-align: left;

	color: var(--color-black);

	flex-grow: 2;

	padding-left: 15px;
	margin-right: -5px;
}

.dashboard__minititle {

	font-size: 18px;
	font-weight: 300;
	text-align: left;

	padding-left: 18px;
	padding-top: 0px;
	padding-bottom: 8px;

	color: var(--color-grey);
}

.dashboard__banner {
	display: block;

	width: 100%;
	height: 300px;

}

.dashboard .info_card_container {
	padding: 0;
}

.dashboard .info_card:first-child {
	margin-top: 0;
}

.dashboard .info_card {
	border-radius: 0;
}

/*.dashboard .horizontal_list {
	padding-top: 20px;
	padding-bottom: 10px;
}
*/
.dashboard .button, .dashboard .button--grey {
	margin-top: 0;
	margin-left: 20px;
	margin-right: 20px;

	margin-bottom: 20px;
	/*border-radius: 20px;*/

	max-width: calc(100% - 40px);
}

.dashboard .button:first-child, .dashboard .button--grey:first-child {
	margin-top: 20px;
}

.dashboard .button, form .button{
	background-color: var(--color-black) !important;
	color: var(--color-white) !important;

	width: 100% !important;

	letter-spacing: 3%;
}

.dashboard .button:hover, form .button:hover {
	background-color: var(--color-grey) !important;
	border-color: var(--color-grey) !important;
}

.dashboard .button--grey, form .button--grey {
	background-color: var(--color-grey) !important;
	color: var(--color-white) !important;

	border: 4px solid var(--color-grey) !important;

	width: 100% !important;

	letter-spacing: 3%;
}

.dashboard .button--grey:hover, form .button--grey:hover {
	background-color: var(--color-light-grey) !important;
	border-color: var(--color-light-grey) !important;
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}


.dashboard_header__sub_container {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-end;
}

.dashboard_item__title {
	padding: 20px;
	font-weight:600;
	font-size: 28px;
	text-align: left;
}

.dashboard_item__subtitle {
	padding: 10px;
	font-weight: 300;
	font-size: 16px;
	text-align: left;
}

.dashboard_item__subtitle b {
	font-weight: 500;
}

.dashboard_item__tag {

	display: inline-block;
	vertical-align: middle;

	padding: 5px 12px;
	margin-bottom: 3px;
	margin-left: 1px;

	font-size: 10px;
	font-weight: 700;

	/*border-radius: 10px;	*/

	background-color: var(--color-dark-grey);
	color: var(--color-white);
}

.dashboard_item__text {

	padding-left: 30px;
	padding-right: 20px;
	padding-bottom: 20px;

	font-weight: 300;
	font-size: 18px;
	text-align: left;

	line-height: 30px;

	color: var(--color-black);
}

.dashboard__link_container {
	display: flex;
	align-self: flex-end;

	text-align: right;

	flex-direction: row;
	column-gap: 40px;

	padding-top: 15px;
	padding-left: 20px;
	padding-right: 20px;
}

.dashboard__link, .dashboard__link--disabled {
	color: var(--color-black);
	cursor: pointer;
	user-select: none;
}

.dashboard__link:hover {
	color: var(--color-grey);
}

.dashboard__link--disabled {
	color: var(--color-light-grey);
}

.dashboard__header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	padding-bottom: 15px;
}

.dashboard__header .dashboard__link, .dashboard__header .dashboard__link--disabled {
	padding-bottom: 6px;
}


.resource_list_container {
	overflow-x: scroll;
	width: 100%;
	height: 100%;
}

.resource_list {
	display: grid;
	grid-template-columns: auto 70px 90px 90px 70px;
	grid-row-gap: 16px;
	grid-col-gap: 20px;

	width: 100%;
	min-width: 550px;

	padding:  0 20px 20px 30px;

	margin-bottom: 20px;
}

.resource_item {
	align-self: center;
}

.resource_item__header {
	font-weight: 700;
	font-size: 15px;
	text-align: center;
	align-self: center;

	color: var(--color-black);

	padding-bottom: 2px;
}

.resource_item__header:first-child {
	text-align: left;
}

.resource_item__title {
	font-weight: 500;
	font-size: 15px;
	text-align: left;

	color: var(--color-black);

	flex-grow: 3;
}

.resource_item__link {
	height: 16px;
	color: var(--color-black);
}

.resource_item__link svg {
	height: 16px;
	fill: var(--color-black);
}

.resource_item__link:hover svg {
	fill: var(--color-grey);
}

.resource_item__link--disabled {
	height: 16px;
	cursor: default;
}

.resource_item__link--disabled svg {
	height: 16px;
	fill: var(--color-light-grey);
}



.referral_list_container {
	overflow-x: scroll;
	width: 100%;
	height: 100%;
}

.referral_list {
	display: grid;
	grid-template-columns: 1fr auto auto auto 2fr;
	grid-row-gap: 16px;
	grid-col-gap: 20px;

	width: 100%;
	min-width: 550px;

	padding:  0 20px 20px 30px;

	margin-bottom: 20px;
}

.referral_item {
	align-self: center;
}

.referral_item__header {
	font-weight: 700;
	font-size: 15px;
	text-align: left;
	align-self: center;

	padding-right: 50px;

	color: var(--color-black);

	padding-bottom: 2px;
}

.referral_item__header:first-child {
	text-align: left;
	padding-right: 100px;
}

.referral_item__title {
	font-weight: 500;
	font-size: 15px;
	text-align: left;

	padding-right: 50px;

	color: var(--color-black);

	flex-grow: 3;
}


.n_modal {
	display: none; /* Hidden by default */
	position: fixed;
	align-items: center;
	justify-content: center;
	z-index: 1000000;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;

	overflow: hidden;
	background-color: rgba(0,0,0,0.5);

	padding: 100px 20px;

	cursor: pointer;
}

/* Modal content box */
.n_modal-content {
	background-color: #fff;
	padding: 40px;
	width: 700px;
	max-width: 100%;
	height: 800px;
	max-height: 80vh;
	overflow-y: scroll;
	box-shadow: 0 0px 1px rgba(0,0,0,0.3);
	position: relative;
	display: block;

	cursor: default;
}

/* Close button */
.n_modal-close {
	position: absolute;
	color: #aaa;
	top: 10px;
	right: 15px;
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
}

.n_modal-close:hover {
	color: #000;
}

/* Icon style */
.info-icon {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 14px;
	margin-left: 3px;
	font-weight: 600;

	color: grey;

}





.container--fullscreen, .container--mostscreen {
	display: flex;
	justify-content: center;

	position: relative;
	top: 0;
	left: 0;
	right: 0;

	width: 100%;
}

.container--fullscreen {
	
	height: 100vh;
	/*height: -webkit-fill-available;
	height: fill-available;*/

	overflow: hidden;
}

.container--mostscreen {

	height: 90vh;

	overflow: hidden;

}

.container--overlay-invisible, .container--overlay {
	display: block;
	height: 100%;
	width: 100%;

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	z-index: 10000;
}

.container--overlay {
	display: flex;
	align-items: center;
	align-content: center;
	background-color: rgba(0, 0, 0, 0.3);
	color: var(--color-white);
}

.container--overlay .text_container__header {
	color: var(--color-white);
}


.header_overlay.gradient_overlay, .header_overlay--reverse.gradient_overlay, .header_overlay--center.gradient_overlay {

	background: linear-gradient(0deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
}

.header_overlay, .header_overlay--reverse, .header_overlay--center {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	align-content: center;
	flex-direction: column;



	height: 100%;
	width: 100vw;

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	z-index: 100;
}

.header_overlay__text_container, .header_overlay--reverse .header_overlay__text_container, .header_overlay--center .header_overlay__text_container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	align-content: flex-end;
	text-align: left;
	/*width: 1200px;*/
	max-width: 100%;

	height: 100%;

	padding: 40px;
	/*padding-bottom: 60px;*/
}

.header_overlay--center .header_overlay__text_container {
	width: 100%;
}

.header_overlay__title {

	font-size: clamp(50px, 8vw, 160px);
	font-weight: 900;
	line-height: 107%;

	color: var(--color-white);

	letter-spacing: 11%;

	padding-bottom: 5px;

	max-width: 100%;
	word-wrap: break-word;

}

.header_overlay__title--massive {
	font-size: clamp(60px, 10vw, 200px);
	font-weight: 900;
	line-height: 107%;

	color: var(--color-white);

	letter-spacing: 11%;

	padding-bottom: 5px;

	max-width: 100%;
	word-wrap: break-word;
}

.header_overlay__title--mid {
	font-size: clamp(48px, 9vw, 110px) !important;
}

.header_overlay__subtitle {

	font-size: 18px;
	font-weight: 600;

	color: var(--color-white);

	letter-spacing: 11%;
	line-height: 1.4;

	padding-bottom: 6px;

	max-width: 1200px;

}

.header_overlay__text {

	font-size: 15px;
	font-weight: 400;

	color: var(--color-white);

	letter-spacing: 5%;
	line-height: 1.5;
	padding-bottom: 6px;

	max-width: 1200px;
}


.landing_page__logo {
	display: block;
	position: absolute;
	left: 20px;
	bottom: 10px;
	height: 100px;
}

.header_overlay .button--inverted {
	margin-top: 16px;
}

/* || navbar */

/*.navbar, .navbar--active {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;

	z-index: 100000;

	display: flex;
	flex-direction: column;

}

.navbar__top {
	display: block;
	justify-content: space-between;
	align-items: center;
	align-content: center;

	width: 100%;

	padding: 20px;
}

.navbar__mobile {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;

	width: 100%;

}

.navbar_container--filled .navbar__top {
	background-color: var(--color-off-white);
}

.navbar__logo {
	display: flex;
	justify-content: center;
	align-items: center;
	/*padding-top: 10px;*/

	height: 40px;
	/*padding-bottom: 2px;*/
	padding-left: 5px;

}


.navbar_container .navbar__logo svg path:first-child, .navbar_container--sidebar .navbar__logo svg path:first-child{
	fill: var(--color-white);
}

.navbar_container .navbar__logo svg path, .navbar_container .navbar__logo svg circle, .navbar_container .navbar__menu svg path, .navbar_container--sidebar .navbar__logo svg path, .navbar_container--sidebar .navbar__logo svg circle, .navbar_container--sidebar .navbar__menu svg path {
	stroke:  var(--color-white);
}


.navbar__logo svg {
	display: block;
	width: 240px;
	max-width: calc(100vw - 128px);
}

.navbar_container--logo-hidden .navbar__logo svg {
	display: none;
}

.navbar_container--logo-hidden .navbar__logo svg path:first-child {
	fill: var(--color-black);
}

.navbar_container--logo-hidden .navbar__logo svg path, .navbar_container--logo-hidden .navbar__logo svg circle {
	stroke: var(--color-black);
}

.navbar_container--logo-hidden .navbar__menu svg path {
	stroke: var(--color-white);
}

.navbar_container--inverted .navbar__logo svg path:first-child{ 
	fill: var(--color-black);
}

.navbar_container--inverted .navbar__logo svg path, .navbar_container--filled .navbar__logo svg path, .navbar_container--inverted .navbar__logo svg circle, .navbar_container--filled .navbar__logo svg circle, .navbar_container--filled .navbar__logo svg path:first-child, .navbar_container--inverted .navbar__menu svg path, .navbar_container--filled .navbar__menu svg path  { 
	stroke: var(--color-black);
}

.navbar_container--inverted .navbar__link {
	color: var(--color-black);
}

.navbar_container--inverted .navbar__link:hover {
	color: var(--color-dark-grey);
}

.navbar_container--fixed #navbar {
	position: fixed;
}

.navbar_container--fixed .navbar__top {
	background-color: var(--color-off-white);
}


.navbar_container--fixed svg {
	display: block;
}

.navbar_container--fixed .navbar__logo svg path:first-child {
	fill: var(--color-black);
	transition: 0s;
}

.navbar_container--fixed .navbar__logo svg path, .navbar_container--fixed .navbar__logo svg circle, .navbar_container--fixed .navbar__menu svg path {
	stroke: var(--color-black);
	transition: 0s;
}

.navbar_container--fixed .navbar__link, .navbar_container--filled .navbar__link, .navbar_container--sidebar .navbar__link {
	color: var(--color-black);
	transition: 0s;
}

.navbar__menu {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	margin-right: 0px;
	height: 40px;
	width: 40px;
	padding: 10px;
	cursor: pointer;

}

.navbar__links {
	display: none;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	height: 0px;
	min-height: 0;
	width: 100%;
	overflow: hidden;
	flex-grow: 0;

	margin-top: 30px;
	margin-right: 20px;


}

.navbar__filler {
	display: none;
	flex-grow: 10;
	cursor: pointer;
}


.navbar--active {
	position: fixed;
	background-color: rgba(0, 0, 0, 0.7);
	bottom: 0;

	overflow-y: scroll;
}

.navbar--active .navbar__top {
	background-color: var(--color-white);
}

.navbar--active .navbar__logo svg {
	display: block;
}

.navbar--active .navbar__menu svg {
	transform: rotate(90deg);
}

.navbar--active .navbar__logo svg path:first-child  {
	fill: var(--color-black);
}

.navbar--active .navbar__logo svg path, .navbar--active .navbar__logo svg circle, .navbar--active .navbar__menu svg path {
	stroke: var(--color-black);
}

.navbar--active .navbar__links {
	display: flex;
	height: auto;
	flex-grow: 1;
}

.navbar--active .navbar__filler {
	display: block;
}

.navbar__link {
	display: block;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--color-black);
	padding: 20px 0;
	cursor: pointer;
	user-select: none;

	line-height: 20px;

	width: 100%;

	letter-spacing: 11%;

}

.navbar__link:hover {
	font-weight: 700;
	transition: 0s;
}

.navbar__button {
	display: block;
	padding: 8px 24px;
	color: var(--color-black);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: 0.5s;
	user-select: none;

	margin-left: 20px;

	margin-top: 15px;
	margin-bottom: 15px;

	width: calc(100% - 40px);

	transition: 0s;

	border-radius: 0px;

	border: 3px solid var(--color-black);


	letter-spacing: 6%;

}

.navbar__button:hover {
	background-color: var(--color-black);
	color: var(--color-white);
	transition: 0.6s;
}

.navbar_spacer {
	height: 80px;
}*/

.page_spacer {
	height: 50px;
}

.page__header {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 5%;

	color: var(--color-black);

	text-align: center;

	padding-top: 80px;
	padding-bottom: 30px;

}

.page_container {
	display: flex;
	justify-content: center;
	width: 100%;
}

.page_container__inner {
	width: 100%;
	max-width: 1300px;
}

/* text container */

.text_container, .text_container--justify {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	width: 100%;

	padding-top: 30px;
	padding-bottom: 50px;
	padding-left: 30px;
	padding-right: 30px;

}

.text_container--justify {
	align-items: flex-start;
}

.text_container__header {
	font-size: clamp(40px, 8vw, 120px);
	font-weight: 900;
	letter-spacing: 7%;
	line-height: 110%;

	padding-bottom: 15px;

	color: var(--color-black);

	text-align: left;

	max-width: 1200px;
}

.text_container__subheading {
	font-size: 5vw;
	font-weight: 400;
	line-height: 120%;

	padding-top: 20px;
	padding-bottom: 20px;

	color: var(--color-black);

	text-align: left;
}

.text_container__body {
	font-size: clamp(20px, 2vw, 32px);
	font-weight: 300;
	line-height: 150%;

	padding-bottom: 30px;

	width: 1000px;
	max-width: 100%;

	text-align: left;
}

.justify {
	text-align: justify;
}

.list--undecorated li {
	list-style-type: none;
	text-align: justify;

	padding-bottom: 10px;
}

.text_container--justify .text_container__header, .text_container--justify .text_container__body {
	text-align: justify;
}


.text_container--pink, .text_container--pink .text_container__header, .text_container--pink .text_container__subheader,
.text_container--pink .text_container__body {
	background-color: var(--color-pink);
	color: var(--color-white);
}

.text_container--purple, .text_container--purple .text_container__header, .text_container--purple .text_container__subheader,
.text_container--purple .text_container__body {
	background-color: var(--color-purple);
	color: var(--color-white);
}

.text_container--red, .text_container--red .text_container__header, .text_container--red .text_container__subheader,
.text_container--red .text_container__body {
	background-color: #941818;
	color: var(--color-white);
}

.text_container--lightred, .text_container--lightred .text_container__header, .text_container--lightred .text_container__subheader,
.text_container--lightred .text_container__body {
	background-color: #ff1749;
	color: var(--color-white);
}

.text_container--blue, .text_container--blue .text_container__header, .text_container--blue .text_container__subheader,
.text_container--blue .text_container__body {
	background-color: #0c2978;
	color: var(--color-white);
}

.text_container--lightblue, .text_container--lightblue .text_container__header, .text_container--lightblue .text_container__subheader,
.text_container--lightblue .text_container__body {
	background-color: #35c3ff;
	color: var(--color-white);
}

.text_container--black, .text_container--black .text_container__header, .text_container--black .text_container__subheader,
.text_container--black .text_container__body {
	background-color: var(--color-black);
	color: var(--color-white);
}



.floating_container {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.floating_container__inner {

	width: 100%;

	overflow: hidden;
}


.small_panorama_container--left, .small_panorama_container--right {
	display: flex;
	justify-content: flex-start;
	width: 100%;

	margin-top: 120px;
	margin-bottom: 120px;
}

.small_panorama_container--right {
	justify-content: flex-end;
}

.small_panorama {
	width: 80vw;
	height: 60vh;
}

/* image containers */

.image_container--bordered {
	display: flex;
	justify-content: center;
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;

	margin-bottom: 60px;
	margin-top: 60px;
}

.image_container--bordered img {

	max-width: 1200px;
}

.image_container--panorama {
	height: 650px;
	position: relative;

	overflow: hidden;

}

.container--bottom {
	align-items: flex-end;
}

.image_selection, .image_selection--fullscreen {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	max-width: 1200px;
	padding-left: 0px;
	padding-right: 0px;
	/*margin-top: -20px;*/
	margin-bottom: 60px;

	gap: 10px;
}

.image_selection--fullscreen {
	flex-direction: column;
	flex-wrap: nowrap;
	max-width: 100%;
	margin-top: 0px;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	height: calc(100vh - 100px);

	gap: 10px;
}

.image_selection__image, .image_selection__image--bigger {
	width: 340px;
	height: 340px;
	/*margin-bottom: 10px;*/


	flex-grow: 2;
}

.image_selection--fullscreen .image_selection__image, .image_selection--fullscreen .image_selection__image--bigger {
	width: 100%;
	height: 100px;
	/*margin-bottom: 10px;*/
}

.image_selection__image--bigger {
	flex-grow: 4;
}


.maps_container {
	width: 100%;
	max-width: 1200px;
	height: 600px;
}



/* snippet container */

.snippet_container, .snippet_container--reverse {
	display: flex;
	justify-content: center;
	align-items: flex-start;

	width: 100%;

	padding-left: 0px;
	padding-right: 0px;
	margin-top: 20px;
	margin-bottom: 0px;
}

.snippet_container__inner, .snippet_container--reverse .snippet_container__inner {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	align-items: stretch;
	/*max-width: 1200px;*/

	width: 100%;

	margin-bottom: 40px;

}



.snippet_container__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	align-self: center;
	width: 100%;
	height: 100%;

	padding-top: 10px;

	flex-grow: 0;
}

.snippet_container__form {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	align-self: center;
	width: 100%;

	/*margin-left: -15px;*/
	/*margin-top: -10px;*/
}

.snippet_container__header {
	font-size: clamp(26px, 3.5vw, 42px);
	font-weight: 900;
	letter-spacing: 7%;
	line-height: 140%;

	font-family: Rubik;

	color: var(--color-black);

	padding-bottom: 7px;
	text-align: left;
	width: 100%;
}

.snippet_container__body {
	font-size: 16px;
	font-weight: 400;
	line-height: 170%;

	letter-spacing: 5%;

	padding-bottom: 20px;

	/*max-width: 800px;*/
	text-align: justify;

	color: var(--color-default-text);
}

.snippet_container__image {
	display: flex;
	width: calc(100%);
	min-height: 360px;
	height: inherit;
	overflow: hidden;

	border-radius: 20px;

}

.snippet_container__text .button, .snippet_container__text .button--inverted {
	align-self: center;
}



.section {
	display: flex;
	flex-direction: column;

	width: 100%;
}

.section__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;

	width: 100%;
}

.section__header_title {

	font-weight: 900;
	font-size: max(6vw, 42px);
	/*line-height: 60px;*/
	color: var(--color-black);
	text-align: left;

	/*flex-grow: 1;*/

	padding-right: 20px;

	padding-top: 20px;
	padding-bottom: 10px;
	/*padding-bottom: 5px;*/
	margin: 0;
}

.section__header_text {

	font-weight: 400;
	font-size: clamp(1vw,1.25rem);
	color: var(--color-black);
	text-align: left;

}

.text_link {
	display: inline-block;
	color: var(--color-default-text);
}

.text_link:hover {
	color: var(--color-grey);
	text-decoration: underline;
}

.section__map {

	width: 100%;
	height: 80vh;

	border: 0;
}



.filter_header {
	display: flex;
	width: 100%;

	padding: 5px 0;
}

.filter__title {
	font-weight: 800;
	font-size: 24px;
	color: var(--color-black);
}

.filter__options_container {
	display: flex;
	flex-direction: column;
	width: 100%;

}

.filter__subtitle {
	font-weight: 400;
	font-size: 18px;

	text-align: left;
	color: var(--color-default-text);
}

.filter__options {
	display: flex;
	flex-direction: row;
	width: 100%;
	grid-gap: 20px;

	overflow-x: scroll;
	
	/* hide scrollbar cross-browser */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

.filter__options::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}


.filter__option {
	white-space: nowrap;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	margin-top: 12px;
	margin-bottom: 12px;
	color: var(--color-white);
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
	transition: 0.3s;
	user-select: none;

	border-radius: 0px;

	border: 4px solid var(--color-black);
	color: var(--color-black);

	width: auto;
}

.filter__option:hover, .filter__selected {
	background-color: var(--color-black);
	color: var(--color-white);
	transition: 0.5s;
}

.classlist_grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 30px;
	padding: 10px 0;
}

.classlist_grid__item {
	position: relative;
	width: 600px;
	max-width: 100%;
	flex-grow: 1;

	margin-bottom: 20px;
}

.classlist_grid__overlay {
	position: absolute;
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	width: 100%;
	height: 100%;

	background: linear-gradient(0deg,rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 40%);

}

.classlist_grid__tag {
	position: absolute;
	top: 14px;
	left: 14px;

	padding: 12px 22px;

	font-weight: 800;
	font-size: 18px;
	letter-spacing: 7%;

	background-color: var(--color-instagram);
	color: var(--color-black);
}

.classlist_grid__text_container {
	display: flex;
	flex-direction: column;

	width: 100%;

	text-align: left;

	padding: 10px 20px;
	background-color: #ededed;

}

.classlist_grid__title {
	font-weight: 800;
	font-size: 28px;
	color: var(--color-black);

	letter-spacing: 4%;

	padding-bottom: 1px;
}

.classlist_grid__substance {

}

.classlist_grid__image {
	width: 100%;
	height: 600px;
	max-height: 80vw;
}

.classlist_grid__content_item {
	
}

.classlist_grid__subtitle {
	font-weight: 600;
	font-size: 22px;
	color: var(--color-black);

	letter-spacing: 3%;

	padding-bottom: 5px;

}

.classlist_grid__text {
	font-weight: 400;
	font-size: 18px;
	color: var(--color-black);
	padding-bottom: 3px;

	letter-spacing: 3%;

}

.classlist_grid__item .button {
	margin-bottom: 10px !important;
}


.horizontal {
	height: 100vh;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	position: relative;
	width: 100%;

}

.horizontal .horizontal__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
	width: 100%;
	padding-top: 60px;
}

.horizontal .horizontal__inner {
	display: flex;
	height: 100%;
	width: 100%;
	will-change: transform;
}

.horizontal .horizontal__panel {
	flex: 0 0 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}


/* Example colors */
.horizontal__panel:nth-child(1) { background: teal; }
.horizontal__panel:nth-child(2) { background: tomato; }
.horizontal__panel:nth-child(3) { background: purple; }
.horizontal__panel:nth-child(4) { background: steelblue; }



.carousel {
	margin: 0;
	padding: 0px 0 100px 0;
}

.carousel__scroller {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--gap);

	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;

	padding: var(--gap);
	/*height: 80vh;*/

	/* hide scrollbar cross-browser */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

.carousel__scroller::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

.carousel__panel {
	position: relative;
	scroll-snap-align: start;
	scroll-snap-stop: always;

	/*border-radius: 1rem; border: 1px solid #e5e7eb;*/
	display: grid; place-items: center; text-align: center;
	padding: 2rem;
	background: #fff;
	box-shadow: 0 10px 25px rgba(0,0,0,.06);
}

.carousel__panel h2 {
	margin: 0 0 .5rem;
	font-size: clamp(1.25rem, 2.5vw, 2rem);
	color: var(--color-black);
}

.carousel__panel p {
	margin: 0;
	max-width: 55ch;
	color: var(--color-default-text);
}

.carousel__dots {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	width: 100%;
	justify-content: center;
}

.carousel__dots button {
	all: unset;
	cursor: pointer;
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: #e5e7eb;
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.carousel__dots button:focus-visible {
	outline-color: #111827;
}

.carousel__dots button[aria-current="true"] {
	background: #111827;
}

.carousel__scroller::-webkit-scrollbar {
	height: 8px;
}

.carousel__scroller::-webkit-scrollbar-thumb {
	background: #cbd5e1; border-radius: 999px;
}

.carousel__scroller::-webkit-scrollbar-track {
	background: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.carousel__scroller { scroll-behavior: auto; }
}



.classbooking_container {
	display: grid;
	grid-template-columns: 100%;

	width: 100%;
	min-height: 100vh;


}


.classbooking_container__sidebar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	width: 100%;
	height: 100%;
	padding: 30px;

	background-color: var(--color-purple);
	color: var(--color-white);

	padding-top: 100px;

}

.sidebar__section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	padding-bottom: 20px;
	margin-bottom: 20px;

	width: 100%;
}

.sidebar__image {
	width: 100%;
}

.sidebar__header {
	font-weight: 900;

	padding-top: 5px;
	padding-bottom: 20px;

	font-size: 1.75rem;

	line-height: 130%;
	letter-spacing: 7%;

	text-align: left;
}

.sidebar__title {
	font-weight: 800;

	padding-top: 5px;
	padding-bottom: 3px;

	font-size: 1.5rem;

	line-height: 130%;
	letter-spacing: 5%;

	text-align: left;
}

.sidebar__subtitle {
	font-weight: 600;
	font-size: 1.25rem;

	line-height: 150%;
	letter-spacing: 3%;

	text-align: left;

	padding-bottom: 2px;
}

.sidebar__text {
	font-weight: 400;
	font-size: 1.25rem;

	line-height: 150%;
	letter-spacing: 3%;

	text-align: left;

	padding-bottom: 2px;
}

.classbooking_container__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: 20px;
	padding-bottom: 60px;

	width: 100%;
}

.classbooking_container__title {
	font-size: 2rem;
	font-weight: 900;

	letter-spacing: 5%;
	line-height: 130%;

	color: var(--color-black);

	padding: 20px;
}






/* event container */

.event_container, .event_container--reverse{
	display: flex;
	justify-content: center;
	align-items: flex-start;

	width: 100%;

	padding-left: 0px;
	padding-right: 0px;
	/*margin-top: 50px;*/
	margin-bottom: 50px;
}

.events_container--vertical .event_container {
	margin-bottom: 30px;
}

.event_container__inner, .event_container--reverse .event_container__inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: stretch;
	max-width: 1300px;
}

.event_container__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: center;
	width: 100%;
	height: 100%;
/*
	margin-top: 30px;
	margin-bottom: 100px;*/

	padding-left: 25px;
	padding-right: 25px;
	padding-top: 20px;
	padding-bottom: 0px;
	/*max-width: 700px;*/

	flex-grow: 0;
}

.events_container--vertical .event_container__text {
	padding: 15px;
}

.event_container__header {
	font-size: 28px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: 5%;

	color: var(--color-black);

	padding-bottom: 5px;
	text-align: left;
	width: 100%;
}

.events_container--vertical .event_container__header {
	font-size: 22px;
}

.event_container__subheader {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 5%;

	color: var(--color-black);

	padding-bottom: 10px;
	text-align: left;
	width: 100%;
}

.events_container--vertical .event_container__subheader {
	font-size: 16px;
}

.event_container__body {
	font-size: 18px;
	font-weight: 200;
	line-height: 1.4;

	padding-bottom: 15px;

	color: var(--color-default-text);
	letter-spacing: 5%;

	/*max-width: 800px;*/
	text-align: justify;
}

.events_container--vertical .event_container__body {
	font-size: 14px;
}

.event_container__image {
	position: relative;
	display: flex;
	width: 100%;
	/*min-height: 350px;*/
	/*height: inherit;*/
	overflow: hidden;
}

.event_container__tag, .event_container__tag--inverted {
	display: block;
	position: absolute;
	top: 10px;
	left: 10px;

	font-size: 18px;
	font-weight: 800;
	letter-spacing: 7%;

	color: var(--color-white);
	background-color: var(--color-black);

	padding: 10px 24px;

	z-index: 100;

}

.event_container__tag--inverted {

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


.event_container__text .button, .event_container__text .button--inverted {
	align-self: left;
}


/* map container */

.map_container, .map_container--reverse {
	display: flex;
	justify-content: center;
	align-items: flex-start;

	width: 100%;

	padding-left: 0px;
	padding-right: 0px;
	/*margin-top: 50px;*/
	margin-bottom: 0px;
}

.map_container__inner, .map_container--reverse .map_container__inner {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	align-items: stretch;
	max-width: 1300px;
	width: 100%;
}

.map_container__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: center;
	min-width: 300px;
	max-width: 100%;
	height: 100%;
/*
	margin-top: 30px;
	margin-bottom: 100px;*/

	padding-left: 30px;
	padding-right: 30px;
	padding-top: 25px;
	padding-bottom: 0px;
	/*width: 500px;*/

	flex-grow: 0;
}

.map_container__header {
	font-size: 32px;
	line-height: 44px;
	font-weight: 300;

	color: var(--color-black);

	padding-bottom: 12px;
	text-align: center;
	width: 100%;
}

/*.map_container__subheader {
	font-size: 20px;
	font-weight: 800;

	color: var(--color-black);

	padding-bottom: 15px;
	text-align: center;
	width: 100%;
}*/

.map_container__address {
	font-size: 18px;
	font-weight: 200;
	line-height: 33px;

	padding-bottom: 15px;

	/*max-width: 800px;*/
	text-align: center;
}

.map_container__link {
	display: block;
	font-size: 18px;
	font-weight: 300;
	line-height: 33px;

	margin: 0;

	padding-left: 0;
	padding-right: 0;
	padding-bottom: 15px;

	/*max-width: 800px;*/
	text-align: center;

	color: darkblue;
}

.map_container__link:hover {
	text-decoration: underline;
}

.map_container__map {
	display: flex;
	max-width: 100%;
	width: 1000px;
	min-height: 400px;
	height: inherit;
	overflow: hidden;

	flex-grow: 2;
}

.map_container__text .button, .map_container__text .button--inverted {
	align-self: left;
}

.map_container__iframe {
	width: 100%;
	height: 100%;
	min-height: 400px;
	border: 0;
}



.testimonial_container {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: nowrap;

	width: 100%;

	overflow: scroll;
	scrollbar-width: none;

}

.testimonial {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;

	margin: 0 20px;

	max-width: 100%;

	color: var(--color-white);

}


.testimonial__rating {
	display: flex;
	justify-content: center;
	width: 100%;
}

.testimonial__star {
	height: clamp(2rem, 3vw, 3rem);;
	width: clamp(2rem, 3vw, 3rem);
	padding: 3px;

	fill: var(--color-black);
}

.testimonial__header {

	font-size: clamp(1.25rem, 2.5vw, 2rem);
	font-weight: 400;

	color: var(--color-black);

	padding-top: 35px;
	padding-bottom: 15px;

}

.testimonial__divider {
	width: 70%;
	border-bottom: 3px solid var(--color-black);
}

.testimonial__body {

	font-size: clamp(1rem, 2vw, 1.5rem);
	font-weight: 400;
	font-style: italic;

	padding-top: 35px;

	line-height: 180%;
	letter-spacing: 5%;

	max-width: 70ch;

	color: var(--color-default-text);
}

.testimonial__author {

	font-size: 16px;
	font-weight: 400;

	color: var(--color-black);

	padding-bottom: 10px;

}


/* Mini Carousel */

.mini_carousel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	
	width: 100%;

	max-width: 100%;

	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 25px;

}

.mini_carousel__item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 10px;

	width: 300px;
}

.mini_carousel__image {
	width: 100%;
	height: 200px;

	border-radius: 4px;
	overflow: hidden;
}

.mini_carousel__text {
	padding-top: 7px;
	padding-bottom: 4px;
	padding-left: 10px;

	font-size: 24px;
	font-weight: 300;
	text-align: left;

	color: var(--color-black);
}

.mini_carousel__link {

	padding-left: 10px;
	padding-bottom: 15px;
	font-size: 14px;
	font-weight: 400;
	text-align: left;

	color: darkblue;
}

.mini_carousel__item:hover .mini_carousel__link {
	text-decoration: underline;
}




/* Team Container */


.team_container, .team_container--reverse {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;

	width: 100%;
}

.team_container__item {
	width: 100%;
}

.team_container__image_container {
	display: flex;
	align-content: flex-end;
	justify-content: center;
	width: 100%;
	padding-top: 40px;
}

.team_container__image {
	width: 600px;
	max-width: 100%;
	max-height: 80vh;
}

.team_container__text_container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;

}

.team_container__name {
	font-size: 46px;
	font-weight: 300;

	padding-top: 15px;

}

.team_container__title {
	font-size: 24px;
	font-weight: 700;

	padding-top: 0px;
}

.team_container__description {
	font-size: 18px;
	font-weight: 300;

	padding-top: 20px;
	padding-bottom: 80px;
}

.team_container--purple .team_container__image_container {
	background-color: var(--color-purple);
}

.team_container--pink .team_container__image_container {
	background-color: var(--color-pink);
}


/* Image List Container */

.image_list_container {
	display: flex;
	flex-direction: column;

	width: 100%;
}

.image_list__item {
	position: relative;/*
	justify-content: center;
	align-content: center;
	align-items: center;*/

	width: 100%;
	height: 30vh;

	margin: 0;
	padding: 0;

	cursor: pointer;
}

.image_list__item:hover .image_list__overlay {
	background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 35%, rgba(255,255,255,0) 100%);
}

.image_list__overlay {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;

	top: 0;
	left: 0;
	bottom: 0;

	width: 100%;
	z-index: 100000;
	/*background-color: rgba(0, 0, 0, 0.4);*/
	/*background: rgb(0, 0, 0);*/
	background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 35%, rgba(255,255,255,0) 100%);

	margin: 0;
	padding: 0;

	transition: 0.3s;
}

.image_list__header {
	font-size: 36px;
	font-weight: 300;
	color: var(--color-white);

	padding-top: 20px;
	padding-bottom: 5px;
}

.image_list__subheader {
	font-size: 20px;
	font-weight: 500;
	color: var(--color-white);

	padding-bottom: 30px;

}

.image_list__link_text {
	font-size: 12px;
	font-weight: 300;
	color: var(--color-white);

	padding-bottom: 25px;

	bottom: 0;
	position: absolute;
}

.image_list__image {
	max-height: 34vh;
	width: 100%;
	object-fit: cover;

	user-select: none;

	margin: 0;
	padding: 0;
}

.center_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;
}

/* Header Container */

.header_container__image {
	width: 100%;
	min-height: 70vh;
}

.header_container {
	display: flex;
	justify-content: center;
	flex-direction: column-reverse;

	position: relative;

	width: 100%;
	min-height: 80vh;

	background-color: var(--color-purple);
	color: var(--color-white);
}

.header_container__text {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-direction: column;
	padding-top: 40px;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 60px;

	width: 100%;

}

.header_container__header {
	font-size: 36px;
	font-weight: 800;
	line-height: 49px;

	padding-bottom: 20px;

	width: 100%;

	text-align: center;
}

.header_container__body {
	font-size: 20px;
	font-weight: 300;
	padding-bottom: 20px;

	line-height: 34px;

	width: 100%;

	text-align: center;
}


/* button */


.inline_buttons_container {
	display: flex;
	flex-direction: column;

	align-items: flex-end;

	width: 100%;

	column-gap: 16px;
}

.inline_buttons_container a {
	margin-bottom: 0 !important;
}

.button, .button--inverted, .button--grey, .button--grey-inverted, .button--disabled, form button, .button--cyan, .button--purple {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	margin-top: 12px;
	margin-bottom: 12px;
	color: var(--color-white);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 5%;
	cursor: pointer;
	transition: 0.3s;
	user-select: none;

	text-align: center;

	border-radius: 0px;

	border: 4px solid var(--color-black);
	color: var(--color-black);

	width: 100%;
}

.button:hover, form button:hover{
	background-color: var(--color-black);
	color: var(--color-white);
	transition: 0.5s;
}

.button--inverted {
	border-color: var(--color-white);
	color: var(--color-white);

	mix-blend-mode: screen;
}

.button--inverted:hover {
	background-color: var(--color-white);
	color: var(--color-black);
	transition: 0.5s;
}

.button--350 {
	width: 350px;
	max-width: 100%;
}

.button--grey, .button--grey-inverted {
	border-left: 0;
	border-right: 0;
	border-top: 4px solid rgba(255,255,255,0);
	border-bottom: 4px solid rgba(255,255,255,0);
	color: var(--color-black);
	transition: 0.3s;

	/*padding-top: 12px;*/
}

.button--grey:hover, .button--grey-inverted:hover {
	border-bottom: 4px solid var(--color-black);

	padding-top: 9px;
	padding-bottom: 15px;

	transition: 0.2s;
}

.button--grey-inverted {
	border-bottom: 4px solid rgba(255,255,255,0);
	color: var(--color-white);
}

.button--grey-inverted:hover {

	border-bottom: 4px solid var(--color-white);
}

.button--disabled {
	background-color: darkgrey;
	border-color: darkgrey;
	color: grey;

}

.button__icon {
	align-self: center;
	display: inline-block;
	width: 15px;

	margin-right: 10px;
	padding-top: 2px;
}

.slider {
	width: 100%;
	overflow: hidden;

	margin-bottom: 20px;

	cursor: grab;
	cursor: -moz-grab;
	cursor: -webkit-grab;
}

.slider:active {
	cursor: grabbing;
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
}

.slides {
	display: flex;
	
	white-space: nowrap;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.slides.active {
	scroll-snap-type: none;
}

.slides::-webkit-scrollbar {
	display: none;
}

.slides {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.slide {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;

	position: relative;

	width: 85%;
	max-height: calc(100vh - 180px);

	margin-right: 20px;
	
	scroll-snap-align: center;
	user-select: none;
}

.slide:first-child {
	margin-left: 20%;
}

.slide:last-child {
	margin-right: 20%;
}




/* -------------------------- SLIDESHOW STUFF -------------------------- */

.fullscreen_image {
	display: block;
	position: relative;
	top: 0;
	left: 0;
	right: 0;

	height: 100vh;
	width: 100%;

	overflow: hidden;

	z-index: 1000;

}

.slideshow {
	display: block;
	position: relative;
	/*left: 0;
	right: 0;*/
	margin: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--color-white);
	z-index: 1100;

	overflow: hidden;
}

/* Hide the images by default */
.slideshow__slide {
	top: 0;
	left:0;
	right:0;
	margin:0;
	height: 100vh;
	width: inherit;
	display: none;
	position: relative;
	text-align: center;

	overflow: hidden;
}

.image_source {

	/*display: inline-block;*/
	width: 100%;
	height: inherit;
	max-height: 100%;
	object-fit: cover;

	user-select: none;
}

.video_background {
	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;
	overflow: hidden;
	width: 100vw;
	height: 100vh;

	user-select: none;

	background-color: var(--color-black);
}

.video_background video, .video_background iframe  {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 100vh;
	transform: translate(-50%, -50%);
}

@media (min-aspect-ratio: 16/9) {
	.video_background video, .video_background iframe {
		/* height = 100 * (9 / 16) = 56.25 */
		height: 56.25vw;
	}
}
@media (max-aspect-ratio: 16/9) {
	.video_background video, .video_background iframe {
		/* width = 100 / (9 / 16) = 177.777777 */
		width: 177.78vh;
	}
}

.video_background__text {
	color: var(--color-white);
}



/* Next & previous buttons */
.slideshow__prev, .slideshow__next {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	margin: 0;
	padding: 0em 1em;
	color: var(--color-white);
	font-weight: bold;
	font-size: 2em;
	transition: 0.5s ease;
	user-select: none;
	text-align: left;
	opacity: 0.075;

	transition: opacity 0.5s linear;


	z-index: 1200;
}

.slideshow__prev span, .slideshow__next span {
	cursor: pointer;
	position: relative;
	top: calc(50% - 1em);
	
}

/* Position the "next button" to the right */
.slideshow__next {
	right: 0;
	text-align: right;
}

/* Position the "next button" to the right */
.slideshow__prev {
	left: 0;
	text-align: left;
}

/* On hover, add a black background color with a little bit see-through */
.slideshow__prev:hover, .slideshow__next:hover {
	opacity: 0.4;
}

/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 3s;
	animation-name: fade;
	animation-duration: 3s;
	animation-timing-function: ease-in;
}

@-webkit-keyframes fade {
	from {opacity: 0} 
	to {opacity: 1}
}

@keyframes fade {
	from {opacity: 0}
	to {opacity: 1}
} 

/* Fading animation */
.fadeout {
	-webkit-animation-name: fadeout;
	-webkit-animation-duration: 5s;
	animation-name: fadeout;
	animation-duration: 5s;
	animation-timing-function: ease-in;
}

@-webkit-keyframes fadeout {
	from {opacity: 1} 
	to {opacity: 0}
}

@keyframes fadeout {
	from {opacity: 1}
	to {opacity: 0}
} 




/* -------------------------- END SLIDESHOW STUFF -------------------------- */


/* || MODAL */


/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	justify-content: center;
	position: fixed; /* Stay in place */
	z-index: 20000; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100vh; /* Full height */
	background-color: rgba(255,255,255,0.8); /* white w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
	margin: auto;
	display: block;
	max-width: 100%;
	max-height: 90vh !important;
	object-fit: contain;
}

.modal-button { color: var(--color-white); }

.modal-content img {
	width: 100%;
}

/* Add Animation - Zoom in the Modal */
.modal-content { 
	animation-name: zoom;
	animation-duration: 0.6s;
}

@keyframes zoom {
	from {transform:scale(0)} 
	to {transform:scale(1)}
}

/* The Close Button */
.close {
	position: fixed;
	top: -0.5em;
	right: 0;
	color: var(--color-black);
	font-size: 4em;
	transition: 0.3s;
	z-index: 20100;
	padding: 0.5em;
}

.close:hover,
.close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	margin-top: 0;
	padding: 1em 1em;
	color: var(--color-black);
	font-weight: bold;
	font-size: 2em;
	transition: 0.5s ease;
	user-select: none;
	z-index: 20050;
	text-align: left;
	opacity: 0.3;

	transition: opacity 0.5s linear;
}

.prev span, .next span {

	position: relative;
	top: calc(50% - 1em);
	
}

/* Position the "next button" to the right */
.next {
	right: 0;
	text-align: right;
}

/* Position the "next button" to the right */
.prev {
	left: 0;
	text-align: left;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	opacity: 0.5;
}



/*.gallery {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
	align-items: center;
	justify-content: center;

	padding: 20px;

	width: 100%;

}*/

.gallery__item {
	height: 350px;
	width: inherit;

	cursor: pointer;
}

.header, .header--no-margin {
	margin-top: 20px;
	padding-top: 40px;
	padding-bottom: 20px;
}

.header--no-margin {
	margin-top: 0;
}

.header__text, .header__text--white {
	font-size: 42px;
	font-weight: 700;
	color: var(--color-black);
}

.header__text--white {
	color: var(--color-white);
}


.contact {
	background-color: var(--color-black);
	color: var(--color-white);

	margin: 0;
}

.contact__image {
	width: 100%;
	height: 60vh;
}











.booking_container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;

	width: 800px;
	max-width: 100%;
	padding: 20px 10px 10px 10px;

	border-bottom: 1px solid #DDDDDD;
}

.booking_item, .booking_item--header {
	margin-right: 5px;
}

.booking_item--header {
	font-weight: 400;
}

.booking_item.button, .booking_item.button--grey {
	padding: 2px 15px;
}


.inline {
	display: flex;
	flex-direction: row;

}








.contact_container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding-top: 0px;
}

.contact_container__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	font-family: Montserrat;
	width: 100%;
}

.contact_container__header {
	font-family: Montserrat;
	font-size: 36px;
	font-weight: 800;

	padding-top: 30px;
	padding-bottom: 15px;
	padding-left: 30px;
	padding-right: 30px;
}

.contact_container__body {

	font-family: Montserrat;
	font-size: 20px;
	font-weight: 400;
	line-height: 33px;

	text-align: center;

	padding-bottom: 30px;
	padding-left: 30px;
	padding-right: 30px;

	max-width: 800px;
}

form {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: center;
	justify-items: center;

	width: 100%;

	margin-bottom: 0px;
	padding: 0;

}

form input, form textarea, form select {
	margin: 0;
	padding: 20px 16px 12px 16px;
	font-size: 16px;

	text-align: left;

	font-family: Montserrat;
	font-weight: 400;
	color: var(--color-black);
	background-color: var(--color-white);
	border: 1px solid var(--color-black);
	/*border-radius: 5px;*/

	width: 500px;
	max-width: 100%;
}

form input:focus, form textarea:focus, form select:focus {
	border-color: var(--color-purple);
	outline: none;
}

form textarea {
	min-width: 100%;
	min-height: 160px;
}

form textarea::placeholder {
	font-size: 16px;
	font-weight: 400;
	color: #b8b8b8;
}

form button {
	letter-spacing: 3%;
	background-color: var(--color-white);

	width: 100% !important;
}

.input_inline {
	display: inline-block;
	width: 500px;
	max-width: 100%;
}

.g-recaptcha { 
	width: 500px;
	max-width: 100%;
}

.content {
	padding-bottom: 40px;
	padding-top: 20px;

	min-height: calc(100vh - 39.5px);
}


.social_media {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	max-width: 600px;

	padding-bottom: 80px;
	margin: 0;
}

.social_media__item, .social_media__item--facebook, .social_media__item--instagram, .social_media__item--twitter, .social_media__item--youtube, .social_media__item--tiktok {
	padding: 20px;
	margin: 0;

	fill: var(--color-black);
}

.social_media__item--facebook:hover svg path {
	fill: var(--color-facebook);
}

.social_media__item--instagram:hover svg path {
	fill: var(--color-instagram);
}

.social_media__item--twitter:hover svg path {
	fill: var(--color-twitter);
}

.social_media__item--youtube:hover svg path {
	fill: var(--color-youtube);
}

.social_media__item--tiktok:hover svg path {
	fill: var(--color-tiktok);
}

.social_media__item--facebook:hover span {
	color: var(--color-facebook);
}

.social_media__item--instagram:hover span {
	color: var(--color-instagram);
}

.social_media__item--twitter:hover span {
	color: var(--color-twitter);
}

.social_media__item--youtube:hover span {
	color: var(--color-youtube);
}

.social_media__item--tiktok:hover span {
	color: var(--color-tiktok);
}

.error, .success {
	font-family: Montserrat;
	font-weight: 100;
	text-align: center;
}

.error {
	color: red;
}

.success {
	color: darkgreen;
}

.hide_me, .hide {
	display: none;
}


.terms {
	margin-top: 200px;
	padding: 0 20px;
}


/*.footer {
	display: flex;
	flex-direction: column-reverse;
	flex-wrap: wrap-reverse;

	text-align: center;

	background-color: #ededed;
	color: var(--color-black);
	font-size: 12px;
	font-weight: 300;

	width: 100vw;

	padding-bottom: 30px;

}

.footer__item {
	font-weight: 300;
	display: inline-block;
	padding: 5px 10px;
}


.footer__subblock {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	max-width: 100%;
}

.footer__block {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	text-align: left;

	flex-wrap: wrap;
	flex-grow: 1;

	padding: 30px 40px 0px 40px;

	max-width: 100%;
}

.footer__block_container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;

	width: 100%;

}


.footer__block_col {
}

.footer__block_col--social {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.footer__link, .footer__link--social {
	display: block;
	align-items: center;
	font-size: 16px;
	font-weight: 400;
	color: var(--color-black);

	padding: 10px 0;

	white-space: nowrap;
}

.footer__link:hover, .footer__link--social:hover {
	font-weight: 600;
}

.footer__logo {
	padding-bottom: 0px;
}

.footer__logo svg {
	height: 40px;
	width: auto;

	margin-left: -2px;
}

.footer__subtitle {
	font-size: 16px;
	font-weight: 700;
	line-height: 130%;
	letter-spacing: 5%;

	max-width: 350px;

	color: var(--color-default-text);

	margin-top: -2px;
	padding-bottom: 17px;

}

.footer__title {
	font-size: 20px;
	line-height: 130%;
	font-weight: 700;
	color: var(--color-black);

	padding-top: 7px;
	padding-bottom: 10px;
	margin-top: 0;

	max-width: 100%;
}

.footer__text {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	flex-wrap: wrap;

	font-size: 12px;
	font-weight: 400;

	color: var(--color-black);

	max-width: 100%;
}

.footer__text .footer__link{
	font-size: 12px;
	display: inline-block;

	padding: 0 4px;
}

.footer__link--social, .footer__block_col .footer__link {
	margin: 2px 0 !important;
}

.footer__link--social svg {
	padding-right: 4px;

	height: 18px;
	width: 23px;
}

.footer__form {
	display: block;
	width: 100%;

	margin: 0;
	padding: 0;
}*/



.social_link_container {
	display: flex;
	align-items: center;
}




.black_link {
	color: var(--color-black);
}

.black_link:hover {
	color: var(--color-light-grey);
}

.form {
	width: 500px;
	max-width: 100%;

	padding: 0;

}

.form_item {
	width: 500px;
	max-width: 100%;
}

.form_link, .form_link--left {

	width: 500px;
	max-width: 100%;

	color: var(--color-black);
	font-weight: 400;

	padding: 8px 0;
}

.form_link:hover, .form_link--left:hover {
	color: var(--color-light-grey);
}

.form_link--left {
	text-align: left;
}

.form_text, .form_text--left {
	display: inline;

	color: var(--color-black);
	font-weight: 400;

	padding-right: 10px;
}

.form_text--left {
	text-align: left;
}

.form_inline {
	display: inline;
	width: auto;
	max-width: 100%;
	flex-grow: 2;

	align-self: flex-end;
}

.form_elem {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 500px;
	max-width: 100%;
	overflow: hidden;
}

.form_elem .form_text--left {
	margin-bottom: 2px;
	margin-right: 3px;
	/*min-width: 125px;*/
}

.small_text_container {
	display: block;

	text-align: left;

	width: 100%;

	padding-top: 10px;
	padding-bottom: 10px;

	line-height: 20px;
}

.small_text {

	color: var(--color-black);
	font-weight: 300;
}

.small_text__link {

	display: inline-block;
	
	color: var(--color-black);
	font-weight: 400;
}

.small_text__link:hover {
	
	color: var(--color-grey);
}



.large_text_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 80vh;
	padding: 10vw;
}

.large_text {
	font-size: min(3rem, 6vw);
	font-weight: 300;

	color: var(--color-black);
	line-height: 175%;
	letter-spacing: 2%;
}

.large_text b {
	font-weight: 800;
}


.medium_title_container {
	position: relative;
	display: flex;
}

.medium_title, .medium_title--left {
	width: 100%;

	color: var(--color-light-grey);

	font-size: clamp(40px, 5vw, 120px);
	font-weight: 900;
	padding: 60px;
	/*padding-left: 160px;*/

	line-height: 120%;
	letter-spacing: 3%;

	text-align: center;
}

.medium_title--left {
	text-align: left;
}


.large_title_container {
	position: relative;
	display: flex;
	padding-top: 5vw;
	padding-bottom: 5vw;

	width: 100%;
}

.large_title--left, .large_title--right, .large_title {
	position: relative;
	display: block;

	width: 100%;

	color: var(--color-light-grey);

	font-size: max(72px, 10vw);
	font-weight: 900;
	padding-top: 40px;
	line-height: 115%;
	letter-spacing: 3%;
}

.large_title {
	padding-left: 5vw;
	padding-right: 5vw;
	text-align: center;
}

.large_title--left {
	padding-left: 5vw;
	padding-right: 28vw;
	text-align: left;
}

.large_title--right {
	padding-right: 5vw;
	padding-left: 28vw;
	text-align: right;
}


.large_product_grid {
	display: flex;
	flex-wrap: nowrap;
	grid-gap: 30px;
	padding: 30px;
}

.large_product_grid__product {
	cursor: pointer;

	width: 400px;
	max-width: 100vw;

	flex-grow: 0;
	flex-shrink: 0;

	margin-bottom: 30px;
}

.large_product_grid__image {
	height: 70vh;
}

.large_product_grid__text {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.large_product_grid__title {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;

	font-weight: 800;
	font-size: 1.5rem;

	letter-spacing: 3%;

	color: var(--color-black);
}

.large_product_grid__subtitle {
	font-weight: 400;
	font-size: 1rem;
}

.large_product_grid__link {
	font-weight: 400;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;

	font-size: 0.75rem;

	color: var(--color-black);
}

.large_product_grid__product:hover .large_product_grid__link {
	font-weight: 600;
}


.faq_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;

	padding: 30px;
}

.faq_item {
	display: flex;
	flex-direction: column;

	max-width: 1200px;
	width: 100%;

	color: var(--color-white);

	border-bottom: 4px solid var(--color-white);

}

.faq_title_container {
	
	all: unset;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;

	max-width: 100%;

	padding: 22px 20px;

	cursor: pointer;

}

.faq_title {

	font-size: max(24px,1.8vw);
	font-weight: 700;
	letter-spacing: 4%;
	line-height: 135%;

	text-align: left;
}

.faq_title_icon--open, .faq_title_icon--close {
	font-size: max(24px,1.8vw);
	font-weight: 400;

	width: 30px !important;
	flex-grow: 0;
	flex-shrink: 0;
	text-align: center;
	margin-left: 20px;
}

.faq_title_icon--open {
	display: block;
}

.faq_title_icon--close {
	display: none;
}

.faq_content {
	display: none;
	font-size: max(18px, 1.2vw);
	font-weight: 300;
	letter-spacing: 3%;
	line-height: 140%;

	padding-bottom: 30px;
	padding-left: 20px;
	padding-right: 30px;

	text-align: justify;
}

.faq_item.active .faq_content, .faq_item.active .faq_title_icon--close {
	display: block;
}

.faq_item.active .faq_title_icon--open {
	display: none;
}


.glow {
	text-shadow: 0 0 10px #fff
}

.outline_stroke {
	font-family: "Helvetica";
	color: rgba(0, 0, 0, 0);
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: white;
}




/* Form Labels */

label {
	display: inline-block;
	width: 100%;
	max-width: 100%;

	overflow: hidden;
	cursor: text;

	text-align: left;

}

/*label input {
	display: block;
	height: 40px;
	width: 500px;
	max-width: 100%;
	padding: 18px 10px 0 10px;
	background-color: #EFEFEF;
	color: #444;
	font-size: 1em;
	border: 0;
	border-bottom: 2px solid #555;
	transition: 0.3s;
}*/

label span {
	position: relative;
	top: -36px;
	font-size: 16px;
	padding: 0px 8px;
	transition: 0.3s;

	margin-left: 8px;

	background-color: var(--color-white);
	color: #B8B8B8;

	letter-spacing: 3%;

	font-weight: 300;

	border-radius: 5px;
}

/*label:hover input, label input:focus {
	background-color: #F5F5F5;
}*/

label input:focus + span {
	top: -51px;
	font-size: 10px;
	color: #ccc;

	font-weight: 300;
}

label input:focus {
	outline: none;
	color: #212121;

	font-weight: 400;
}

label input.input_not_blank + span {
	top: -51px;
	font-size: 10px;
	color: #ccc;

	font-weight: 300;
}

label input:focus.input_not_blank + span {
	color: #ccc;

	font-weight: 300;
}




/* Hero Image */


.hero, .hero--video-detail {
	position: relative;
	display: block;
	width: 100%;
	height: 75vh;
}

.hero--video-detail {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
}

.hero__image {
	width: inherit;
	height: inherit;
}

.hero__image > img {
	width: inherit;
	height: inherit;
	object-fit: cover;
}

.hero__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: inherit;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

	/*padding-top: 0px;*/
	/*padding-bottom: 10%;*/
	padding-left: 30px;
	padding-right: 100px;

	background-image: linear-gradient(to right, rgba(0,0,0,0.8) , rgba(0,0,0,0));
}

.hero__title_image {
	width: 90%;
}

.hero__title_image > img {
	width: inherit;
	height: inherit;
	object-fit: contain;
	object-position: left;
}

.hero__description {
	padding: 8px 0 12px 10px;
}

.hero__button {

	max-width: 100%;

	text-align: center;
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	background-color: var(--color-black);

	padding: 12px 36px;
	margin: 8px 10px;

	border-radius: var(--default-border-radius);

	cursor: pointer;
}

.hero__button:hover {
	background-color: var(--color-black-80);
}

.bg--purple {
	background-color: var(--color-purple);
}

.bg--purple-dark {
	background-color: #7228E6;
}

.bg--black {
	background-color: var(--color-black);
}

.bg--red {
	background-color: #941818;
}

.bg--blue {
	background-color: #0c2978;
}

.bg--cyan {
	background-color: var(--color-cyan);
}

.bg--dark-green {
	background-color: var(--color-dark-green);
}

.col--white {
	color: white;
}

.col--yellow {
	color: var(--color-yellow);
}

.no_hover {
	pointer-events: none;
}

.hp_1 {
	visibility: hidden;
	height: 0;
	width: 0;
}




/*NEW REPLACEMENT STUFF*/


.faded_hero_container {
	position: relative;
	display: inline-block;

	background-color: rgba(0, 0, 0, 0.75);

	padding: clamp(60px, 12vw, 180px) 30px;

	width: 100vw;
}

.faded_hero_container__image {
	
	position: relative;
	display: inline-block;
	height: 100%;
	width: 100%;
}

.faded_hero_container img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* Scales the image to cover text area */
	z-index: -1;
}

.faded_hero_content {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	width: 100%;

}

.n_subtitle {
	font-size: clamp(22px, 2.5vw, 40px);
	font-weight: 700;
	letter-spacing: 7%;
	line-height: 140%;

	color: var(--color-white);

	padding: 10px 0;
}

.n_title--big {

	font-weight: 900;
	letter-spacing: 7%;
	line-height: 120%;
	color: var(--color-white);

	padding: 10px 0;
}

.n_title--big {
	font-size: clamp(60px, 7vw, 160px);
}

.n_text {
	font-size: clamp(16px, 2vw, 28px);
	letter-spacing: 3%;
	line-height: 175%;
	font-weight: 400;

	color: var(--color-white);

	padding: 10px 20px 20px 20px;

	max-width: 65ch;
}



/*TEST STUFF*/


/*OVERLAY TEXT ON VIDEO CODE AND CSS*/

/*<div class="container--fullscreen">
	<div class="video-text-container">
		
		<div class="video_background">
			<video loop="" autoplay="" muted="" playsinline="" style="filter: brightness(1.1) blur(0px);">
				<source src="{% static 'videos/classes.mp4' %}" type="video/mp4">
			</video>
		</div>


		<div class="video-text">
			<h1>UNLEASH YOUR TALENT</h1>

			<div class="test-text">
				SOME CRAZY SMALL TAGLINE THAT COULD BE COOL TO SEE
			</div>
		</div>

	</div>
</div>*/

/*
.video-text-container {
	width: 100%;
	height: 100vh;
	position: relative;
}

.video-text {
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.95);
	height: 100%;
	width: 100%;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	mix-blend-mode: multiply;
}

.video-text h1 {

	font-size: 13vw;
	font-weight: 900 !important;
	line-height: 100%;
	letter-spacing: 7%;

	text-shadow: 0 0 50px rgba(0,0,0,1);
}


.test-video-background {
	width: 100%;
}

.test-svg{
	font-family: Montserrat;
	font-size: 10rem;
	font-weight: 900;
	line-height: 170%;
	width: 100px;
	word-wrap: break-word;

}
.test-video {
	-webkit-clip-path: url(#clip);
	clip-path: url(#clip);
	width: 100%;
	position: absolute;
	z-index: 1;

	filter: brightness(1.5);
}

.test-massive-text-container {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100vw;
	height: 100%;
}

.test-massive-text {

	font-size: 11vw;
	font-weight: 900;
	line-height: 115%;
	letter-spacing: 7%;

	color: white;

	text-shadow: 0 0 100px rgba(0,0,0,0.25);
}

.test-text {
	font-size: 1.5rem;
	font-weight: 400;

	padding-top: 60px;

	color: rgba(255, 255, 255, 0.8);
}*/


.messages_spacer {
	height: 30px;
}

.messages-container {
	position: absolute;

	width: 100%;
	bottom: 0;

	padding: 20px;

	z-index: 1000000;

	border-radius: 4px;
}

.message {
	font-weight: 500;
	letter-spacing: 10%;
	font-size: 12px;
	text-align: center;
	width: 100%;
	padding: 10px 20px;
}

.message.info {

	background-color: #00849c;
	color: white;
}

.message.info:not(:first-child) {
	border-top: 1px solid #00505e;	
}


.message.error {
	background-color: #a80b00;
	color: white;

}

.message.error:not(:first-child) {
	border-top: 1px solid #750800;	
}

.message.warning {
	background-color: #b3a400;
	color: white;
}

.message.warning:not(:first-child) {
	border-top: 1px solid #665e00;	
}

.message.success {
	background-color: #067d00;
	color: white;

}

.message.success:not(:first-child) {
	border-top: 1px solid #044a00;	
}




@media only screen and (max-width: 699px) {
	.hide_on_mobile {
		display: none;
	}
}

/* Small devices (portrait tablets and large phones, 768px and up) */
@media only screen and (min-width: 700px) {

	.hide_on_desktop {
		display: none;
	}

	.columns, .columns--reverse {
		flex-direction: row;
	}

	.cyj_cy {
		flex-direction: row;
	}

	.cyj_choose {
		font-size: min(10dvw, 140px);
	}

	.cyj_your {
		font-size: min(6.5dvw, 90px);
		padding-left: 5dvw;
		align-self: flex-end;
	}

	.cyj_journey {
		font-size: min(14dvw, 205px);
		margin-top: -5px;
	}

}




/* Extra small devices (phones, 768px and down) */
@media only screen and (min-width: 640px) {

	.text_container {
		padding-left: 40px;
		padding-right: 40px;
	}

	.image_container--bordered {
		padding-left: 40px;
		padding-right: 40px;
	}

	.image_selection--fullscreen {
		flex-direction: row;
		margin-top: 0;
		margin-bottom: 30px;
	}

	.image_selection--fullscreen .image_selection__image, .image_selection--fullscreen .image_selection__image--bigger {
		height: calc(100vh - 120px);
	}



	/*.event_container {
		padding-left: 30px;
		padding-right: 30px;
	}*/

	.events_container, .events_container--vertical {
		display: flex;
		flex-direction: row;
		justify-content: center;

		width: 100%;

		/*padding: 0 60px;*/
	}

	.events_container .events_container__inner,  {
		display: flex;
		flex-direction: row;
		justify-content: center;

		width: 100%;
		max-width: 1300px;
	}

	.events_container--vertical .events_container__inner {
		display: grid;
		grid-gap: 25px;
		grid-template-columns: 600px;
		align-self: center;

		width: auto;
		max-width: 1300px;
	}

	.events_container--vertical .event_container {
		margin-bottom: 0;
	}


	/*.event_container--vertical {
		width: 50%;
	}*/
/*
	.events_container--vertical .events_container__inner {
		display: grid;
		grid-template-columns: 400px 400px;
		align-self: center;
		width: auto;
	}*/

	/*.events_container--vertical .event_container__inner {
		flex-direction: column;
	}*/

	.events_container--vertical .button, .events_container--vertical .button--grey {
		width: 100% !important;
	}

/*	.events_container--vertical .event_container__text {
		padding-left: 15px;
		padding-right: 15px;
	}*/


	.event_container__text {
		align-items: flex-start;

		padding-left: 45px;
		padding-right: 15px;
	}

	.events_container--vertical .event_container__text {
		align-items: flex-start;

		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.event_container__header {
		text-align: left;
	}

	.event_container__subheader {
		text-align: left;
	}

	.event_container__body {
		text-align: justify;
	}

/*	.event_container__image {
		padding-left: 10px;
		padding-right: 10px;
	}*/

	.event_container__image img {
		/*border-radius: 10px;*/
	}

	.map_container {
		padding-left: 30px;
		padding-right: 30px;
	}

/*	.map_container__map {
		padding-left: 30px;
		padding-right: 30px;
	}*/

	.social_media__item, .social_media__item--facebook, .social_media__item--instagram, .social_media__item--twitter, .social_media__item--youtube, .social_media__item--tiktok {
		margin: 0 20px;
	}


	.input_inline {
		width: 247.5px;
	}


	.hero__overlay {
		
		width: 75%;
		
		padding-left: 30px;
		padding-right: 60px;

	}

	.floating_container {
		
		margin-bottom: 50px;
	}

	.header_container {
		margin-bottom: 50px;
	}

	.inline_buttons_container {
		flex-direction: row;
	}

	.inline_buttons_container a {
		margin-bottom: 12px !important;
	}

	.events_container--vertical .inline_buttons_container {
		flex-direction: column;
	}

	.events_container--vertical .inline_buttons_container a {
		margin-bottom: 0 !important;
	}

	.mini_carousel {
		flex-direction: row;
		align-items: flex-start;
	}

	.mini_carousel__item {
		width: 400px;
	}

	.mini_carousel__image {
		height: 250px;
	}

	.banner_text {
		padding-bottom: 25px;
	}

	.banner_title {
		font-size: 40px;
	}

	.banner_subtitle {
		font-size: 18px;
	}

	.header_overlay__text_container, .header_overlay--reverse .header_overlay__text_container,  .header_overlay--center .header_overlay__text_container  {
		
		justify-content: center;
		align-content: center;

		/*max-width: 80%;*/

		padding: 60px;
		padding-bottom: 100px;
	}

	.header_overlay--reverse {
		align-items: flex-end;
	}

	.header_overlay--reverse .header_overlay__text_container {
		align-items: flex-end;

		text-align: right;
	}

	.header_overlay--center {
		align-items: center;
	}

	.header_overlay--center .header_overlay__text_container {
		align-items: center;

		text-align: center;
	}

	.header_overlay.gradient_overlay {

		background: linear-gradient(90deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
	}

	.header_overlay--reverse.gradient_overlay {

		background: linear-gradient(270deg,rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
	}

	.button, .button--inverted, .button--grey, .button--grey-inverted, .button--disabled {
		width: auto;
	}


	.header_overlay--center .header_overlay__subtitle {
		padding-top: 10px;
		padding-bottom: 25px;
	}

	.button--big {
		font-size: 20px;
		padding: 17px 50px;
		border-width: 6px;
	}

}

@media only screen and (min-width: 700px) {


}

/* Small devices (portrait tablets and large phones, 768px and up) */
@media only screen and (min-width: 800px) {

	.events_container--vertical .events_container__inner {
		grid-template-columns: 375px 375px;
	}

	.slider {
		margin-bottom: 40px;
	}

	.contact_container {
		flex-direction: row;
	}


	.contact_container__item {
		align-items: flex-start;
		width: 50%;
	}

	.contact_container__image {
		height: calc(100vh - 100px);
		padding-left: 30px;
		padding-right: 30px;
	}

	.contact_container__body {
		text-align: justify;
	}

	.error, .success {
		text-align: justify;
	}


/*	.event_container__image {
		min-height: 450px;
	}*/

	.map_container__header {
		text-align: left;
	}

	.map_container__subheader {
		text-align: left;
	}

	.map_container__address {
		text-align: left;
	}

	.map_container__link {
		text-align: left;
	}

	.map_container__inner {
		flex-direction: row;
	}

	.map_container__text {

		align-items: flex-start;

		width: 500px;

		padding-bottom: 20px;
	}

	.map_container__text .button, .map_container__text .button--inverted {
		align-self: flex-start;
	}

	/*.map_container .map_container__map {
		padding-right: 10px;
		padding-left: 40px;
	}*/

	/*.map_container--reverse .map_container__map {
		padding-left: 10px;
		padding-right: 40px;
	}*/

	.map_container--reverse .map_container__inner {
		flex-direction: row-reverse;
	}

	.hero__overlay {
		
		width: 75%;
		
		padding-left: 60px;
		padding-right: 100px;

	}

	.image_list_container {
		flex-direction: row;
	}

	.image_list__item {
		height: calc(100vh - 100px);
	}

	.image_list__header {
		font-size: 44px;
	}

	.image_list__subheader {
		font-size: 26px;
		padding-bottom: 80px;
	}

	.image_list__link_text {
		font-size: 16px;

		bottom: 30px;
	}

	.padded_container {
		padding-left: 40px;
		padding-right: 40px;
	}

	.dashboard__row {
		flex-direction: row;
	}

	.dashboard__inner--small {
		width: 50%;
	}

	.dashboard {
		padding-top: 45px;
		padding-left: 60px;
		padding-right: 60px;
		padding-bottom: 60px;
	}

	.dashboard__col, .dashboard__col--small {
		/*border-radius: 20px;*/
	}

	.dashboard__col__inner {
		/*border-radius: 20px;*/
	}

	.dashboard__col_3 {
		width: 450px;
	}

	.dashboard .info_card {
		/*border-radius: 20px;*/
	}

	.dashboard__subtitle {
		padding-left: 10px;
	}

	.banner_text {
		padding-bottom: 25px;
	}

	.banner_title {
		font-size: 48px;
	}

	.banner_subtitle {
		font-size: 24px;
	}

/*
	.header_overlay__title {

		font-size: 60px;
	}*/

	.header_overlay__subtitle {

		font-size: 22px;
	}

	.header_overlay__text {
		font-size: 18px;
	}


	.clean_overlay__background {
		flex-direction: row;
	}
	.clean_overlay__text_box {
		align-items: center;
	}
	.clean_overlay__text, .clean_overlay__text_overlay {
		text-align: left;
	}
	.clean_overlay__text {
		clip-path: inset(0 50% 0 0);
	}
	.clean_overlay__text_overlay {
		display: block;
		clip-path: inset(0 0 0 50%);
	}


	.n_title--big {

		padding: 20px 0;
	}

	.n_subtitle {
		padding: 7px 0;
	}


}

@media only screen and (min-width: 950px) {


	.snippet_container__text {
		/*max-width: 800px;*/
	}



/*	.event_container__image {
		padding-left: 120px;
		padding-right: 120px;

		max-height: 450px;
	}*/


	.hero__overlay {
		
		width: 75%;
		
		padding-left: 100px;
		padding-right: 25%;

	}

	.banner_text {
		padding-top: 140px;
		padding-bottom: 35px;
	}

	/*.footer {
		flex-direction: row;
	}

	.footer__block_container {
		flex-direction: row;
	}

	.footer__link, .footer__link--social {
		font-size: 12px;
		padding: 4px 0;
	}

	.footer__subtitle {
		font-size: 15px;
	}

	.footer__title {
		font-size: 16px;
		padding-bottom: 4px;
	}

	.footer__form {
		max-width: 100%;
		width: 450px;
	}*/

	.section__header_title {
		padding-top: 50px;
		padding-bottom: 20px;
	}

	.filter__options_container {
		margin-bottom: 10px;
	}

	.carousel {
		margin: 6vw 0 10vw 0;
	}

}

/* Large devices (laptops/desktops, 1050px and up) */
@media only screen and (min-width: 1100px) {
	
	.events_container--vertical .events_container__inner {
		grid-template-columns: 450px 450px;
	}

/*	.navbar__top {
		display: flex;
	}

	.navbar__mobile {
		width: auto;
	}

	.navbar__menu {
		display: none;
	}

	.navbar__logo {
		margin-left: 0;
		padding-left: 10px;
	}


	.navbar__links {
		display: flex;
		width: auto;
		flex-direction: row;
		height: auto;

		padding: 0;
		margin-top: 0;
	}

	.navbar__link {
		color: var(--color-white);
		padding: 10px 30px;
		font-size: 12px;

		width: auto;
	}

	.navbar__button, .navbar--active .navbar__button {
		border-color: var(--color-white);
		color: var(--color-white);
		width: auto;
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 20px;
	}

	.navbar__button:hover, .navbar--active .navbar__button:hover {
		background-color: var(--color-white);
		color: var(--color-black);
		transition: 0.6s;
	}

	.navbar_container--fixed .navbar__button, .navbar_container--filled .navbar__button, .navbar_container--sidebar .navbar__button {
		color: var(--color-black);
		border-color: var(--color-black);
	}

	.navbar_container--fixed .navbar__button:hover, .navbar_container--filled .navbar__button:hover, .navbar_container--sidebar .navbar__button:hover {
		background-color: var(--color-black);
		color: var(--color-white);
		transition: 0.6s;
	}


	.navbar--active {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;

		z-index: 100000;

		display: flex;
		flex-direction: column;

		background-color: rgba(0,0,0,0);
	}

	.navbar--active .navbar__top {
		background-color: rgba(0,0,0,0);
	}

	.navbar_container--fixed .navbar--active .navbar__top, .navbar_container--filled .navbar--active .navbar__top {
		background-color: var(--color-white);
	}

	.navbar_container--logo-hidden .navbar--active .navbar__logo svg {
		display: none;
	}


	.navbar--active .navbar__logo svg path:first-child {
		fill: white;
	}

	.navbar--active .navbar__logo svg path, .navbar--active .navbar__logo svg circle {
		stroke: var(--color-white);
	}

	.navbar_container--fixed .navbar--active .navbar__logo svg path:first-child, .navbar_container--filled .navbar--active .navbar__logo svg path:first-child {
		fill: var(--color-black);
	}

	.navbar_container--fixed .navbar--active .navbar__logo svg path, .navbar_container--filled .navbar--active .navbar__logo svg path, .navbar_container--fixed .navbar--active .navbar__logo svg circle, .navbar_container--filled .navbar--active .navbar__logo svg circle  {
		stroke: var(--color-black);
	}

	.navbar--active .navbar__links {
		display: flex;
		width: auto;
		flex-direction: row;
		height: auto;

		padding: 0;

		flex-grow: 0;
	}

	.navbar--active .navbar__filler {
		display: none;
	}*/

	.snippet_container, .snippet_container--reverse {
		margin-top: 60px;
	}



	.event_container .event_container__image, .event_container--reverse .event_container__image {
		/*max-width: 45%;*/
		max-height: 100%;
	}

	.map_container__map {
		/*max-width: 45%;*/
		max-height: 100%;
	}


/*	.header_overlay__title {

		font-size: 70px;
	}*/

	.header_overlay__subtitle {

		font-size: 23px;
	}

	.header_overlay__text {
		font-size: 20px;
	}


	.content {
		padding-left: 10vw;
		padding-right: 10vw;
	}


	.landing_page__logo {
		left: 25px;
		bottom: 15px;
	}

	.image_selection--fullscreen {
		margin-left: 20px;
		margin-right: 20px;

		gap: 20px;
	}

	.image_selection {
		gap: 20px;
	}

	.slider {
		margin-bottom: 60px;
	}

	.slide {
		margin-right: 30px;
	}

	.snippet_container__inner {
		flex-direction: row;
	}

	.snippet_container__header {
		text-align: left;

		/*font-size: 46px;*/
		/*line-height: 55px;*/

		padding-top: 10px;

	}

	.snippet_container .snippet_container__text {
		padding-right: 45px;
	}

	.snippet_container--reverse .snippet_container__text {
		padding-left: 45px;
	}
	


	.snippet_container__text .button, .snippet_container__text .button--inverted {
		align-self: flex-start;
	}

	.snippet_container__form {
		justify-content: flex-start;
	}




	.snippet_container--reverse .snippet_container__inner {
		flex-direction: row-reverse;
	}


	.event_container .event_container__inner {
		flex-direction: row;
	}

	.events_container--vertical .event_container__inner {
		flex-direction: column;
	}

	.event_container__header {
		text-align: left;
	}
	
	.event_container__text {
		padding-bottom: 20px;
	}

	.event_container .event_container__text .button, .event_container .event_container__text .button--inverted, .event_container--reverse .event_container__text .button, .event_container--reverse .event_container__text .button--inverted,  {
		align-self: flex-start;
	}

/*	.event_container .event_container__image {
		padding-right: 10px;
		padding-left: 0;
	}

	.event_container--reverse .event_container__image {
		padding-left: 10px;
		padding-right: 0;
	}*/

	.event_container--reverse .event_container__inner {
		flex-direction: row-reverse;
	}



	.floating_container {
		display: flex;
		justify-content: center;

		padding-left: 30px;
		padding-right: 30px;

	}

	.floating_container__inner {

		/*border-radius: 10px;*/
		max-width: 1300px;
	}


	.team_container--purple {
		background-color: var(--color-purple);
		color: var(--color-white);
	}

	.team_container--pink {
		background-color: var(--color-pink);
		color: var(--color-white);
	}

	.team_container {
		flex-direction: row-reverse;
		align-items: center;
	}

	.team_container--reverse {
		flex-direction: row;
		align-items: center;
	}

	.team_container .team_container__item {
		display: flex;
		justify-content: flex-end;
	}

	.team_container--reverse .team_container__item {
		display: flex;
		justify-content: flex-start;
	}


	.team_container .team_container__text_container {

		align-items: flex-start;
		padding-top: 20px;
		padding-left: 50px;
		padding-right: 30px;
		padding-bottom: 60px;

		max-width: 550px;
	}

	.team_container--reverse .team_container__text_container {

		align-items: flex-end;
		padding-top: 20px;
		padding-left: 30px;
		padding-right: 50px;
		padding-bottom: 60px;

		max-width: 550px;
	}


	.team_container .team_container__image_container {
		justify-content: flex-start;
	}

	.team_container--reverse .team_container__image_container {
		justify-content: flex-end;
	}

	.header_container {
		flex-direction: row;
	}

	.header_container__text {

		padding-top: 120px;
		padding-left: 100px;
		padding-right: 100px;
		padding-bottom: 120px;

		max-width: 50%;
	}

	.header_container__image {

		max-width: 50%;
		min-height: auto;
	}

	.header_container__header {
		
		font-size: 42px;
		line-height: 55px;

		text-align: left;
	}

	.header_container__body {
		
		text-align: justify;
	}

	.header_container .button--inverted, .header_container .button--disabled {
		align-self: flex-start;
	}

	.container, .container--reverse {
		flex-direction: row;
	}

	.padded_container {
		padding-left: 60px;
		padding-right: 60px;
	}

	.event_container__image {
		/*min-height: 350px;*/
		height: inherit;
	}

	.page_container {
		padding-left: 30px;
		padding-right: 30px;
	}

	.page__header { 
		text-align: left;
	}

	.section__header {
		flex-direction: row;
		align-items: center;
	}

	.classbooking_container {
		grid-template-columns: 450px 1fr;
		padding-top: 0;
	}

	.n_subtitle {
		padding: 10px 0;
	}

} 

@media only screen and (min-width: 1100px) {



}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	

	.events_container--vertical .events_container__inner {
		grid-template-columns: 375px 375px 375px;
	}

	.content {
		padding-left: 7vw;
		padding-right: 7vw;
	}

	.slide {
		margin-right: 40px;
	}

	.hero__overlay {
		
		width: 75%;
		
		padding-left: 100px;
		padding-right: 35%;

	}

	.header_overlay__text_container, .header_overlay--reverse .header_overlay__text_container{

		padding: 80px;
		padding-bottom: 100px;
	}
/*
	.header_overlay__title {

		font-size: 80px;
	}*/

	.header_overlay__subtitle {

		font-size: 26px;
	}

	.header_overlay__text {
		font-size: 21px;
	}



}

/* Extra Extra large devices (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1500px) {
	


	.events_container--vertical .events_container__inner {
		grid-template-columns: 450px 450px 450px;
	}

	.header_overlay__text_container, .header_overlay--reverse .header_overlay__text_container {

		padding-left: 140px;
		padding-right: 140px;
	}

/*	.header_overlay__title {

		font-size: 96px;
	}*/

	.header_overlay__subtitle {

		font-size: 32px;
	}

	.header_overlay__text {
		font-size: 24px;
	}

}
















.auth_form_container {
	display: flex;

	flex-direction: column;

	justify-content: center;
	align-content: center;
	align-items: center;

}

.auth_form {

	display: flex;

	flex-direction: column;

	justify-content: flex-start;

	width: 400px;
	max-width: 100%;

}


.auth_form__title {

	font-family: Rubik;
	font-size: 28px;
	font-weight: 600;
	margin: 0;
	padding: 0;
	padding-bottom: 12px;
	letter-spacing: 6%;

	color: var(--color-white);

	justify-self: flex-start;



}

.auth_form input, .auth_form textarea, .auth_form select {

/*	font-size: 16px;
	padding: 20px 16px;
	margin: 5px 0;*/

	border: none;

	background-color: var(--color-white);

}


.auth_form__button {

}


.ntext {
	text-align: left;
	width:100%;
	color: var(--color-white);
	line-height:1.33;
	letter-spacing:3%;
	font-weight:300;

	margin: 0;
	padding: 0;
}


.button--cyan {

	border-color: #1DA1CE;
	background-color: #1DA1CE;
	color: var(--color-white);

	transition: 0.5s;
}

.button--cyan:hover {
	border-color: #3AB4DE;
	background-color: #3AB4DE;
	color: #F7F7F7;
}

.button--cyan:active, .button--purple:active {
	transform: scale(1.05);
}


.button--purple {

	border-color: #31135E;
	background-color: #31135E;
	color: var(--color-white);

	transition: 0.5s;
}

.button--purple:hover {
	border-color: #39186E;
	background-color: #39186E;
	color: #F7F7F7;
}