/* 

Annie Mals styles

Copyright 2026 - Netfuel Ltd
www.netfuel.co.uk

*/

@font-face {
	font-family: "Londrina Solid";
	src: url('../fonts/londrina-solid-regular.woff2') format('woff2'), url('../fonts/londrina-solid-regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}



:root {
	--container-width: 1560px;
	--container-bleed: max(0px, calc((100cqw - var(--container-width)) / 2));
	--default-gutter-x: 15px;
	--default-gutter-y: 15px;
	--color-primary: #5475b3;
	--color-primary-alt: #78b6e4;
	--color-primary-light: #abd4f6;
	--color-secondary: #f1bc00;
	--color-secondary-alt: #f3ecaa;
	--color-secondary-light: #f3f4c6;
	--color-white: #ffffff;
	--color-grey: #eeeeee;
	--color-dark: #1d1d1b;
	--color-red: #ed2124;
	--color-red-alt: #c7171a;
	--color-error: #c0392b;
	--text-size-xs: 12px;
	--text-size-sm: 14px;
	--text-size: 18px;
	--text-size-md: 28px;
	--text-size-lg: 38px;
	--text-size-xl: 54px;
	--text-size-xxl: 64px;
	--border-radius: 8px;
	--transition: all 0.25s ease-in-out;
	--transition-background: background-color 0.25s ease-in-out;
	--transition-color: color 0.25s ease-in-out;
	--transition-transform: transform 0.25s ease-in-out;
	interpolate-size: allow-keywords;
}


/* General Layout */

html,body {
	
	margin: 0;
	padding-right: 0 !important;
	background-color: var(--color-white);
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--text-size);
	color: var(--color-dark);
	font-weight: 400;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	scroll-behavior: smooth;
	container-type: inline-size;
	cursor: url('../images/ant-cursor.svg') 6 0, url('../images/ant-cursor.svg') 6 0, auto;

}

body {

	&.mobile-menu-active {

		overflow:hidden;
		touch-action:none;

		.header-wrapper {

			position:fixed;
			inset:0;
			height:100dvh;
			z-index:1030;
			background-color:var(--color-primary);

			& > .header {

				.header-right {

					.button, .mobile-menu-button {

						&:hover {

							background-color: var(--color-primary-alt);
							
						}

					}
			
					.mobile-menu-button {

						.fa-solid.fa-bars {

							&:before {

								content:'\f057';

							}

						}

					}

				}

			}

			.mobile-menu {

				display:flex;
				touch-action:pan-y;
				overscroll-behavior:contain;

			}

		}

	}

}

.mt-1 {margin-top: calc(var(--default-gutter-y) * 1) !important;}
.mb-1 {margin-bottom: calc(var(--default-gutter-y) * 1) !important;}
.mt-2 {margin-top: calc(var(--default-gutter-y) * 2) !important;}
.mb-2 {margin-bottom: calc(var(--default-gutter-y) * 2) !important;}
.mt-4 {margin-top: calc(var(--default-gutter-y) * 4) !important;}
.mb-4 {margin-bottom: calc(var(--default-gutter-y) * 4) !important;}
.mt-8 {margin-top: calc(var(--default-gutter-y) * 8) !important;}
.pt-1 {padding-top: calc(var(--default-gutter-y) * 1) !important;}
.pb-1 {padding-bottom: calc(var(--default-gutter-y) * 1) !important;}
.pt-2 {padding-top: calc(var(--default-gutter-y) * 2) !important;}
.pb-2 {padding-bottom: calc(var(--default-gutter-y) * 2) !important;}
.pt-4 {padding-top: calc(var(--default-gutter-y) * 4) !important;}
.pb-4 {padding-bottom: calc(var(--default-gutter-y) * 4) !important;}
.pt-16 {padding-top: calc(var(--default-gutter-y) * 12) !important;}
.pb-16 {padding-bottom: calc(var(--default-gutter-y) * 12) !important;}


.container {

	max-width: min(100%,var(--container-width));
	padding-left: calc(var(--default-gutter-x) * 2);
	padding-right: calc(var(--default-gutter-x) * 2);

	&.narrow {
		
		width: min(100%,calc(var(--container-width) - calc(var(--default-gutter-x) * 15)));

	}

}

.container-fluid {

	padding-left: 0;
	padding-right: 0;

	.contained {

		&[class*="col"]:last-of-type {

			padding-right: calc(var(--container-bleed) + calc(var(--default-gutter-x) * 2));

		}

	}

}

.row {

	&:not(.row-gap-0,.row-gap-1) {

		row-gap: calc(var(--default-gutter-y) * 2) !important;

	}

	&.row-gap-1 {

		row-gap: calc(var(--default-gutter-y) * 1) !important;

	}

	&.row-gap-4 {

		row-gap:calc(var(--default-gutter-y) * 4) !important;

	}

	&:not(.col-gap-0,.col-gap-1,.col-gap-4,.col-gap-8) {

		margin-left: calc(var(--default-gutter-x) / -1);
		margin-right: calc(var(--default-gutter-x) / -1);

		>* {

			padding-left: var(--default-gutter-x);
			padding-right: var(--default-gutter-x);

		}

	}

	&.col-gap-0 {

		margin-left: 0;
		margin-right: 0;

		>* {

			padding-left: 0;
			padding-right: 0;

		}

	}

	&.col-gap-1 {

		margin-left: calc((var(--default-gutter-x) / 2) / -1);
		margin-right: calc((var(--default-gutter-x) / 2) / -1);

		>* {

			padding-left: calc(var(--default-gutter-x) / 2);
			padding-right: calc(var(--default-gutter-x) / 2);

		}

	}

	&.col-gap-4, &.col-gap-8 {

		margin-left: calc((var(--default-gutter-x) * 2) / -1);
		margin-right: calc((var(--default-gutter-x) * 2) / -1);

		>* {

			padding-left: calc(var(--default-gutter-x) * 2);
			padding-right: calc(var(--default-gutter-x) * 2);

		}

	}

}

:focus, :focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

img {
	
	max-width: 100%;
	flex-shrink: 0;
	border: 0;
	vertical-align: middle;

}


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

}

:target,
[id] {

	scroll-margin-top: 100px;

}

ul.menu {
	
	padding: 0;
	list-style: none;

	&:not(.row) {

		margin: 0;

	}

	&.row {margin-bottom: 0;}
	
}

p {

	margin-bottom: 0;

	&:not(:last-of-type) {

		margin-bottom: var(--default-gutter-y);

	}

}

.title, .button, figure .blockquote p {

	font-family: "Londrina Solid", sans-serif;
	color: var(--color-primary);
	font-weight: 400;
	font-style: normal;
	line-height: 112.5%;

}

.title, h1, h2, h3, h4, h5, h6 {
	
	display: block;
	margin-bottom: 0;

	&.xxl {

		font-size: var(--text-size-xxl);

	}

	&.xl {

		font-size: var(--text-size-xl);

	}

	&.lg {

		font-size: var(--text-size-lg);

	}

	&.md {

		font-size: var(--text-size-md);

	}

	&.sm {

		font-size: var(--text-size-sm);

	}

	&.primary {

		color: var(--color-primary);

	}

	&.primary-alt {

		color: var(--color-primary-alt);

	}

	&.secondary {

		color: var(--color-secondary);

	}

	&.white {

		color: var(--color-white);

	}

	&.dark {

		color: var(--color-dark);

	}

	a {

		color:inherit;

		&:hover {

			color: var(--color-primary-alt);

		}

	}

}

.button {
	
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-primary);
	border: 0;
	border-radius: 50vh;	
	font-size: var(--text-size);
	color: var(--color-white);
	font-weight: 400;
	line-height: 100%;
	text-align: center;
	transition: var(--transition-background), var(--transition-color);

	&:not(.circle) {

		padding: calc(var(--default-gutter-y) * 1.2) calc(var(--default-gutter-x) * 2);

	}

	&:not(.circle,.prev,.next,.youtube,.play) {

		min-width:200px;	

	}

	&.circle {

		display: flex;
		align-items: center;
		justify-content: center;
		padding:calc(var(--default-gutter-x) / 2);
		border-radius:100%;
		aspect-ratio: 1/1;
		font-size:var(--text-size-md);

		&:hover {

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

		}

		&.white {

			&:hover {

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

			}

		}

	}

	&.primary {

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

		&:hover {

			background-color: var(--color-primary-alt);

		}

	}

	&.primary-alt {

		background-color: var(--color-primary-alt);

		&:hover {

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

		}

	}

	&.secondary {

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

		&:not(.disabled):hover {

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

		}

		&.disabled {

			opacity:0.5;
			cursor:not-allowed;

		}

	}

	&.white {

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

		&:not(span):hover {

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

		}

	}

	&.youtube {

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

		&:hover {

			background-color: var(--color-red-alt);

		}

		&.play {

			min-width:0;
			border-radius:12px;

		}

	}

	&:not(.circle,.youtube) > i {

		margin-right:10px;

	}

	&[type="submit"] {

		&:hover {

			background-color: var(--color-primary-alt);

		}

	}

}

.rounded {

	border-radius: 12px !important;
	overflow: hidden;

}

.boxen {

	p, li {

		font-size: inherit;
		color: inherit;
		line-height: inherit;

		a {
			
			color:  inherit;
			text-decoration: underline;

			&:hover {

				color:var(--color-primary-alt);

			}
		
		}

	}

	&.xs {

		p, li {

			font-size: var(--text-size-xs);

		}

	}

	&.sm {

		p, li {

			font-size: var(--text-size-sm);

		}

	}

	&.lg {

		p, li {

			font-size: var(--text-size-lg);

		}

	}

	figure {

		margin-bottom: 0;
		
		.blockquote {

			p {

				font-size:var(--text-size-md);

			}

		}

		.blockquote-footer {

			margin-top: calc(var(--default-gutter-y) * 2);
			margin-bottom: 0;

			&:before {

				display: none;

			}

		}

	}

}

.ratio {

	>img {

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

	}

}

.social-link {

	.circle {

		font-size:var(--text-size);
		color:var(--color-primary-alt);

	}

}

.coming-soon {

	background-color: var(--color-primary);
	
	.title, p {

		color:var(--color-white);

	}

}

.header-wrapper {

	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:1020;
	padding-top:calc(var(--default-gutter-y) * 2);

	.header {

		padding-top:calc(var(--default-gutter-y) / 2);
		padding-bottom:calc(var(--default-gutter-y) / 2);
		transition:var(--transition-background), box-shadow 0.25s ease-in-out;

		&:is(.is-scrolled .header, body.single .header) {

			background-color: var(--color-primary-alt);
			box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 20px;

		}

		.logo {

			a {

				display: block;
				position: relative;
				transition:var(--transition-transform);

				img {

					position: relative;
					z-index: 2;
					max-width:max(8dvw, 75px);

				}

				&:hover {

					transform:scale(1.125);

				}

			}

		}

		.menu-wrapper {

			.menu {

				li {

					position:relative;
					font-size:var(--text-size-md);
					transition:var(--transition-color), var(--transition-transform), text-shadow 0.25s ease-in-out;

					&:not(.header-wrapper.is-scrolled .header .menu li, body.single .header-wrapper .header .menu li) {

						&:not(:hover) {

							text-shadow:0px 0px 10px rgba(0,0,0,0.25);
							
						}

					}

					>* {

						position: relative;
						z-index: 2;

					}

					a {

						position: relative;
						padding-left:var(--default-gutter-x);
						padding-right:var(--default-gutter-x);
						color: var(--color-white);

						&:after {

							content: '';
							display: block;
							position: absolute;                                
							top: calc((var(--default-gutter-x) / 2) / -1);
							left:0;
							right:0;
							z-index: -1;
							height: calc(100% + calc(var(--default-gutter-x)));
							padding:var(--default-gutter-y) var(--default-gutter-x);
							background-color: var(--color-white);
							border-radius: 50vh;
							opacity:0;
							transition:opacity 0.25s ease-in-out;

						}

						&:hover {

							color:var(--color-primary-alt);

							&:after {

								opacity:1;

							}

						}

					}

					&.current_page_item {

						position:relative;
						
						a {

							position:relative;
							z-index:2;

							&:not(:hover):after {

								opacity:0.25;

							}

						}

					}

				}

			}

		}

		.header-right {

			.button {

				font-size: var(--text-size-md);
				color:var(--color-primary-alt);

				&:hover {

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

				}

			}

		}

	}

	.mobile-menu {

		display:none;
		flex-direction:column;
		min-height:0;
		overflow-y:auto;
		overflow-x:hidden;
		padding-top:calc(var(--default-gutter-y) * 2);
		padding-bottom:calc(var(--default-gutter-y) * 2);

		& > .container {

			margin-top:auto;
			margin-bottom:auto;

		}

		.mobile-menu-content {

			nav {

				.menu {

					li {

						font-size:var(--text-size-lg);

						a {

							display:block;
							padding-top:calc(var(--default-gutter-y) / 2);
							padding-bottom:calc(var(--default-gutter-y) / 2);
							color:var(--color-white);

							&:hover {

								color:var(--color-primary-light);

							}

						}

						&.current_page_item {

							a {
								
								color: var(--color-secondary);

							}

						}

					}

				}

			}

		}

	}

}


.hero-section {

	position: relative;
	min-height:200dvw;
	padding-top:var(--header-height, 80px);
	padding-bottom:calc(var(--default-gutter-y) * 2);

	&.pt-2 {

		padding-top:calc(var(--header-height, 80px) + calc(var(--default-gutter-y) * 2)) !important;

	}

	&.hero-21x9 {

		min-height:100dvw;

	}

	>*:not(.hero-image) {

		position: relative;
		z-index: 2;

	}

	.boxen-wrapper {

		.boxen {

			.title, p {

				text-shadow:10px 10px 5px rgba(0,0,0,0.5);

			}

		}

	}

	.hero-image {

		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height:100%;

		picture {

			display:block;
			width:100%;
			height:100%;

			img {

				width:100%;
				height:100%;
				object-fit:cover;
				object-position: top center;

			}

		}

		>.shape {
			
			position: absolute;
			bottom:-1px;
			left: 0;
			width: 100%;

			img {

				display: block;

			}

		}

	}

	.hero-video {

		position: absolute;
		inset: 0;
		overflow: hidden;

		video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
			display: block;
		}
	}

	.floating-logo {

		img {

			width:calc(100dvw - calc(var(--default-gutter-x) * 4));

		}

	}

}

#post-hero {

	padding-top:calc(var(--header-height, 80px) + calc(var(--default-gutter-y) * 4));

}

.content-section {

	position: relative;
	margin-top:-1px;
	padding-top:calc(var(--default-gutter-y) * 4);
	padding-bottom:calc(var(--default-gutter-y) * 4);

	&:has(.shape.head-shape) {

		padding-top:0;

		.shape.head-shape {

			&:after {

				display:block;
				content:'';
				margin-bottom:calc(var(--default-gutter-y) * 4);

			}

		}

	}

	&:has(.shape.foot-shape) {

		padding-bottom:0;

		.shape.foot-shape {

			&:before {

				display:block;
				content:'';
				margin-top:calc(var(--default-gutter-y) * 4);

			}

		}

	}

	&.primary {

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

		.boxen {

			.title, p {

				color:var(--color-white);

			}

		}

		.button {
		
			&.primary-alt:not(.panel *) {

				&:hover {

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

				}

			}

			&.secondary:not(.panel *) {

				&:hover {

					background-color:var(--color-primary-alt);

				}

			}

		}

	}

	&.primary-alt {

		background-color:var(--color-primary-alt);

		.boxen {

			.title, p {

				color:var(--color-white);

			}

			.menu {

				li {

					a {

						color:var(--color-white);
						font-weight: bold;
						text-decoration: none;

						&:hover {

							color:var(--color-primary);
							text-decoration: underline;

						}

					}

				}

			}

		}

	}

	&.secondary-light {

		background-color: var(--color-secondary-light);

		.swiper-container {

			.swiper {

				.swiper-slide {

					>.d-flex {

						.panel {

							&:not(.primary,.primary-light,.secondary,.secondary-light,.white) {

								background-color: var(--color-primary-alt);

							}

						}

					}

				}

			}

		}

	}

	&.white {

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

	}

	>.shape {

		img {

			display:block;

		}

	}

}

.panel {

	position: relative;
	padding:calc(var(--default-gutter-y) * 2) calc(var(--default-gutter-x) * 2);
	border-radius: var(--border-radius);

	&.sm {

		padding:var(--default-gutter-y) var(--default-gutter-x);

	}

	&.primary {

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

		.boxen {

			.title, p {

				color:var(--color-white);

			}

		}

	}

	&.primary-light {

		background-color: var(--color-primary-light);

	}

	&.secondary {

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

		.title, p {

			color:var(--color-white);

		}

		.button {

			&.primary {

				&:hover {

					background-color: var(--color-primary-alt);

				}

			}

			&.primary-alt {

				&:hover {

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

				}

			}

		}

	}

	&.green {

		background-color: #47b249;

		.boxen {

			.title, p {

				color:var(--color-white);

			}

		}

	}

	&.white {

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

	}

	>*:not(.shape) {

		position: relative;
		z-index: 3;

	}

	&.shape {

		padding-top:calc(var(--default-gutter-y) * 4);
		padding-bottom:calc(var(--default-gutter-y) * 4);

		&.pb-16 {

			padding-bottom:calc(var(--default-gutter-y) * 4) !important;

		}

	}

	.shape {

		svg {

			position: absolute;
			inset:0;
			width: 100%;
			height:100%;

			&:is(.shape.rotate-180 svg) {

				transform:rotate(180deg);

			}

			path {

				fill: var(--color-primary-light);

			}

			&:is(.shape.secondary-alt svg) {

				path {

					fill: var(--color-secondary-alt);

				}

			}

		}

	}

	&.clouded {

		&:before, &:after {

			content:'';
			display:block;
			position:absolute;
			top:0;
			z-index:2;
			width:max(15dvw, 200px);
			aspect-ratio:290.14 / 75.59;
			background-image: url('../images/cloud-element.svg');
			background-size: cover;

		}

		&:before {

			right:75%;

		}

		&:after {

			left:75%;
			width:max(12dvw,120px);

		}

		&.clouded >:not(.shape,:before) {

			position:relative;
			z-index:3;

		}

	}

}

.character-image.d-flex {

	position: relative;

	&:is(.col-xl-4 >.character-image) {

		max-width:min(240px,calc(100% - calc(var(--default-gutter-x) * 4)));

	}

	.panel {

		position:absolute;
		top:50%;
		left:0;
		transform:translateY(-50%);

	}

	>:not(.panel) {

		position:relative;
		z-index:2;

	}

	.character {

		img {

			display:block;
			max-width:calc(100% - calc(var(--default-gutter-x) * 4));
			max-height:max(calc(100cqw + calc(var(--default-gutter-y) * 4)));
			margin-left:auto;
			margin-right:auto;

		}

	}

}

.article-card {

	.boxen-wrapper {

		padding-left:calc(var(--default-gutter-y) * 2);
		padding-right:calc(var(--default-gutter-y) * 2);

	}

	&:is(a.d-flex) {

		.ratio {

			img {

				transition:var(--transition);

			}

		}

		.boxen {

			.title {

				transition:var(--transition-color);

			}

			p {

				color:var(--color-dark);

			}

		}

		&:hover {

			.ratio {

				img {

					transform:scale(1.125);

				}

			}

			.boxen {

				.title {

					&:not(.dark) {

						color:var(--color-primary-alt);

					}

				}

			}

			.button {

				background-color: var(--color-primary-alt);

			}

		}

	}

}

.swiper-container {

	.swiper {

		align-items: stretch;
		position:relative;

		&.swipable {

			cursor: grab;

		}

		&.card-swiper {

			overflow:visible;

			.swiper-wrapper {

				.swiper-slide {

					.panel.primary-light {

						.title, p {

							color:var(--color-white);

						}

					}

				}

			}

		}

		.swiper-wrapper {

			align-items: stretch;

			.swiper-slide {

				height: auto;

				&:is(.swiper.character-swiper .swiper-wrapper .swiper-slide) {

					display: flex;
					flex-direction: column;
					justify-content: center;
					pointer-events: none;
					container-type: inline-size;

					&.swiper-slide-active, &.swiper-slide-prev, &.swiper-slide-next {
					
						pointer-events: auto;

					}

					&:not(.swiper-slide-active,.swiper-slide-prev,.swiper-slide-next) {

						opacity:0 !important;

					}

				}

				&:is(.swiper.card-swiper .swiper-wrapper .swiper-slide) {

					&:not(.swiper-slide-active, .swiper-slide-prev, .swiper-slide-next) {

						opacity: 0;

					}

				}

			}

		}

	}

	.swiper-button {

		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top:50%;
		z-index:2;
		transform:translateY(-50%);
		width: calc(var(--default-gutter-x) * 3);
		height: calc(var(--default-gutter-y) * 3);
		font-size:72px;
		color: var(--color-primary);
		transition: var(--transition-color);

		&:is(.shape:not(.secondary) .swiper-container .swiper-button) {

			color:var(--color-white);

			&:not(.swiper-button-disabled):hover {

				color: var(--color-primary);

			}

		}

		&.prev {

			left:0;

		}

		&.next {

			right:0;

		}

		&.swiper-button-disabled {

			opacity: 0.5;

		}

		&:not(.swiper-button-disabled):hover {

			color: var(--color-primary-alt);

		}

	}

	.swiper-pagination {

		display: flex;
		justify-content: center;
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		column-gap: 10px;

		&.swiper-pagination-clickable {

			margin-top: calc(var(--default-gutter-y) * 2);

		}

		.swiper-pagination-bullet {

			width: 32px;
			height: 12px;
			margin: 0;
			background-color: var(--color-white);
			border-radius: calc(var(--border-radius) / 2);
			opacity:1;

			&.swiper-pagination-bullet-active {

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

			}

		}

	}

}

.form-wrapper {

	.input-group {

		input {
			
			&.form-control {

				height:auto;
				min-height:calc(var(--default-gutter-y) * 3);
				padding:var(--default-gutter-y) var(--default-gutter-x);
				border:2px solid var(--color-primary);
				border-radius:var(--border-radius);
				font-size:var(--text-size-sm);

			}

		}

		.form-floating {

			label {

				display:flex;
				align-items:center;
				max-width:calc(100% - calc(var(--default-gutter-x) * 2));
				left:var(--default-gutter-x);
				padding:0;
				font-size:var(--text-size-sm);

			}

			.form-control:focus~label, .form-control:not(:placeholder-shown)~label {

				height:auto;
				background-color: var(--color-white);
				transform:scale(.75) translateY(calc(var(--default-gutter-y) / -1));

			}

		}

	}

	#mce-responses {

		.response {

			margin-top:var(--default-gutter-y);
			padding:var(--default-gutter-y) calc(var(--default-gutter-x));
			background-color: #fdf0ef;
			border:2px solid var(--color-error);
			border-radius:var(--border-radius);
			font-size:var(--text-size-sm);
			color:var(--color-error);

			&#mce-success-response {

				background-color: #f0f7f2;
				color: #5a9e6f;
				border-color: #5a9e6f;

			}

		}

	}

}

.modal {

	padding-right:0;

	.modal-dialog {

		max-width:min(calc(100dvw - calc(var(--default-gutter-x) * 4)), 768px);
		margin:calc(var(--default-gutter-y) * 2) auto;

		.modal-content {

			border-radius:var(--border-radius);

			.modal-body {

				padding:calc(var(--default-gutter-y) * 2) calc(var(--default-gutter-x) * 2);

			}

		}

	}

}

.modal-backdrop.show {

	opacity:0.75;

}

@media (max-width: 539px) {

	.card-item {

		&.panel {

			.boxen {

				.title {

					&.md {

						font-size:var(--text-size);

					}

				}

			}

		}

	}

}

@media (min-width: 440px) {

	.hero-section {

		.floating-logo {

			img {

				width:100dvw;

			}

		}

	}

}

@media (min-width: 768px) {

	.row {

		&.col-gap-8 {

			margin-left: calc((var(--default-gutter-x) * 4) / -1);
			margin-right: calc((var(--default-gutter-x) * 4) / -1);

			>* {

				padding-left: calc(var(--default-gutter-x) * 4);
				padding-right: calc(var(--default-gutter-x) * 4);

			}

		}

		&.col-gap-4 {

			margin-left: calc((var(--default-gutter-x) * 2) / -1);
			margin-right: calc((var(--default-gutter-x) * 2) / -1);

			>* {

				padding-left: calc(var(--default-gutter-x) * 2);
				padding-right: calc(var(--default-gutter-x) * 2);

			}

		}

	}

	.button {

		&.youtube {

			min-width:200px;	

		}

	}

	.content-section {

		padding-top:calc(var(--default-gutter-y) * 8);
		padding-bottom:calc(var(--default-gutter-y) * 8);

	}

	.panel {

		&.xl {

			padding:calc(var(--default-gutter-y) * 8) calc(var(--default-gutter-x) * 8);

		}

		&.lg {

			padding:calc(var(--default-gutter-y) * 4) calc(var(--default-gutter-x) * 4);

		}

		&.sm {

			&.md-st {

				padding:calc(var(--default-gutter-y) * 2) calc(var(--default-gutter-x) * 2);

			}

		}

		&.shape {

			padding-top:calc(var(--default-gutter-y) * 8);
			padding-bottom:calc(var(--default-gutter-y) * 8);

			&.pb-16 {

				padding-bottom:calc(var(--default-gutter-y) * 8) !important;

			}

		}

	}

	.hero-section {

		&:not(.hero-21x9) {

			min-height:100dvw;

		}

		&.hero-21x9 {

			min-height:43dvw;

		}

		.floating-logo {

			img {

				width:70dvw;

			}

		}

	}

}

@media (min-width: 992px) {

	:root {
		--text-size-xs: 14px;
		--text-size-sm: 16px;
		--text-size: 24px;
		--text-size-md: 32px;
		--text-size-lg: 44px;
		--text-size-xl: 64px;
		--text-size-xxl: 72px;
		--border-radius: 12px;
	}

	.character-image.d-flex {

		&:is(.col-xl-4 >.character-image) {

			max-width:none;

		}

	}

	.hero-section {

		.floating-logo {

			img {

				width:50dvw;

			}

		}

	}

	.panel {

		&.clouded {

			&.clouded-lg {

				&:before {

					width:max(25dvw, 200px);

				}

				&:after {

					width:max(20dvw, 200px);

				}

			}

		}

	}

}

@media (min-width:1200px) {

	.row {

		&.col-gap-xxl-4 {

			margin-left: calc((var(--default-gutter-x) * 2) / -1);
			margin-right: calc((var(--default-gutter-x) * 2) / -1);

			>* {

				padding-left: calc(var(--default-gutter-x) * 2);
				padding-right: calc(var(--default-gutter-x) * 2);

			}

		}

	}

	.header-wrapper {

    	.header {

			& .menu-wrapper {

				& .menu {

					& li {

						a {

							padding-left: calc(var(--default-gutter-x) * 2);
                        	padding-right: calc(var(--default-gutter-x) * 2);

						}

					}

				}

			}

			.header-right {

				.button {

					font-size: var(--text-size-md);

				}

			}

		}

	}

	.hero-section {

		&:not(.hero-21x9) {

			min-height:56.25dvw;

		}

		&.hero-21x9 {

			min-height:33.3333dvw;

		}

	}

}

@media (min-width:1400px) {

	:root {
		--text-size-xs: 16px;
		--text-size-sm: 20px;
		--text-size: 24px;
		--text-size-md: 36px;
		--text-size-lg: 54px;
		--text-size-xl: 72px;
		--text-size-xxl: 90px;
	}

	.hero-section {

		.floating-logo {

			img {

				width:max(42dvw);

			}

		}

	}

	.content-section {

		&:has(.shape.head-shape) {

			.shape.head-shape {

				&:after {

					margin-bottom:0;

				}

			}

		}

		&:has(.shape.foot-shape) {

			.shape.foot-shape {

				&:before {

					margin-top:0;

				}

			}

		}

	}

}

@media (min-width:1720px) {

	:root {
		--text-size-xs: 16px;
		--text-size-sm: 20px;
		--text-size: 24px;
		--text-size-md: 48px;
		--text-size-lg: 72px;
		--text-size-xl: 90px;
		--text-size-xxl: 120px;
	}

	.panel {

		&.shape {

			padding-top:calc(var(--default-gutter-y) * 12);
			padding-bottom:calc(var(--default-gutter-y) * 12);

			&.pb-16 {

				padding-bottom:calc(var(--default-gutter-y) * 12) !important;

			}

		}

		&.clouded {

			&.clouded-lg {

				&:before {

					width:max(20dvw, 200px);

				}

				&:after {

					width:max(17dvw, 200px);

				}

			}

		}

	}

}