@font-face {
	font-display: fallback;
	font-family: Marcellus;
	src: url("/images/fonts/marcellus.woff2") format('woff2');
}

@font-face {
	font-display: fallback;
	font-family: Lobster;
	src: url("/images/fonts/lobster.woff2") format('woff2');
}

html, body {
	height: 100%; /*supports sticky footer*/
	font-size: 1em;
	font-family: "Marcellus", system-ui, Helvetica, Arial, sans-serif;
	letter-spacing: 0.05rem;
	scroll-behavior: smooth;
	overflow-x: hidden;
}
body {
	overflow-y: scroll;
}
* {	/*reset styles*/
	padding:	0em;
	margin:		0em;
}

/*1440p, with 1.5 scaling*/	/**/
@media only screen and (min-height: 720px) and (-webkit-device-pixel-ratio: 1.5) {
	html {font-size: 1.2em;}
}
/*2160p, with 1.5 scaling*/
@media only screen and (min-height: 900px) and (-webkit-device-pixel-ratio: 1.5) {
	html {font-size: 1.5em;}
}
/*1440p, with 1.25 scaling*/
@media only screen and (min-height: 900px) and (-webkit-device-pixel-ratio: 1.25) {
	html {font-size: 1.5em;}
}
/*2160p, with 1.25 scaling*/
@media only screen and (min-height: 1080px) and (-webkit-device-pixel-ratio: 1.25) {
	html {font-size: 2em;}
}
/*1440p, without scaling*/
@media only screen and (min-height: 1080px) and (-webkit-device-pixel-ratio: 1) {
	html {font-size: 1.5em;}
}
/*2160p, without scaling*/
@media only screen and (min-height: 1440px) and (-webkit-device-pixel-ratio: 1) {
	html {font-size: 2.2em;}
}

/*----color-scheme----*/
:root {
	/*
	50,100,250
	250,100,200
	250,150,0
	250,200,100

	50,75,150
	25,45,105

	80,75,145
	250,100,100
	250,150,0
	*/

	--primary:		rgb(50,75,150);	/* Blue */
	--secondary:	rgb(250,150,0);	/* Orange */
	--tertiary:		rgb(255,255,255);	/* White */
	
	--nav-bg:		rgb(255,255,255);
	--nav-link:		rgb(50,50,50);
	--nav-link-hover: rgb(50,75,150);
	--nav-bg-hover: rgb(245,245,245);
	--nav-bg-line:	rgb(50,75,150);

	--text:			rgb(50,50,50);
	--link:			rgb(50,75,150);
	--background:	rgb(255,255,255);
	--bg-alt:		rgb(245,245,245);
	--headings:		rgb(50,75,150);
	
	--button:		rgb(50,75,150);
	--button-alt:	rgb(50,75,150);
	--button-text:	rgb(255,255,255);
	--button-hover: rgb(255,255,255);
	--radius:		0.2em;
	
	--cards:		rgb(250,250,250);
	--footer:		rgb(50,75,150);
	--footer-accent: rgb(25,45,105);
	
	--shadow:		0 0 1rem 0 rgba(0,0,0,0.4);
	--shadow-dark:	0 0 1rem 0 rgba(0,0,0,0.6);
	--shadow-light:	0 0 1rem 0 rgba(0,0,0,0.2);
	--shadow-darker:0 0 1rem 0 rgba(0,0,0,0.8);
	--shadow-thin:	0 0 0.2rem 0 rgba(0,0,0,0.4);

	--selection:	rgba(0,50,200,0.6);	/* Blue */
	--selection-alt:rgba(250,200,100,0.8);	/* Yellow */
	--selection-text: rgb(255,255,255);	/* Blue */
	
	--red:		rgb(200,0,0);		/* Deep Red */
	--orange:	rgb(250,100,50);	/* Blaze Orange */
	--green:	rgb(100,200,50);	/* Vibrant Green */
	--blue:		rgb(50,100,200);	/* Regal Blue */
	--yellow:	rgb(250,200,100);	/* Construct Yellow */
	--grey:		rgb(50,50,50);		/* Dark Grey */
	--lightgrey:rgb(200,200,200);	/* Light Grey */
	--lite:		rgb(250,250,250);	/* White-lite */
	--white:	rgb(255,255,255);	/* White */
}

/*----common----*/
body {
	background:	var(--background);
	color:		var(--text);
}

a {
	color: var(--link);
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	text-decoration: underline;
}

h1, h2, h3, h4, h5 {
	margin: 1em 0em 0.5em 0em;
}
h1, h2, h3 {
	color: var(--primary);
}

p {
	margin: 0.5em;
}

hr {
	margin: 0em 0.5em;
	border-top: 0.1em solid rgb(150,150,150);
	border-left: none;
	border-right: none;
	border-bottom: none;
}


/*----main-content----*/
main {
	text-align:	center;
	margin:		0em auto;
	clear:		both;
}
main h2 {
	display: block;
	margin: 1em auto 0.5em auto;
}
main h1::after, main h2::after {
    content: " ";
    display: block;
	background-image: url("/images/heading-underline.svg");
	background-repeat: no-repeat;
    background-position: center;
	height: 6px;
    width: 250px;
    margin: 0.25em auto 0em auto;
    /*
    transform: scaleX(1);
    transform-origin: center;
    transition: width 0.35s,transform 0.35s;
    */
}

.page {			/* enforce page width */
	max-width: 	900px;
	padding: 	0 1em;
	margin:		0em auto;
}

.page-intro {
	width: 80%;
	margin: 0.25em auto 1em auto;
}

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

.center {
	margin: auto;
}
.center-vert {
	margin: 20vh 0vh 0vh 0vh;
}

.inline-block {
	display: inline-block;
}

.w20 {width: 20%;}
.w30 {width: 30%;}
.w40 {width: 40%;}
.w50 {width: 50%;}
.w60 {width: 60%;}
.w80 {width: 80%;}

.grid {
	display: grid;
	grid-column-gap: 0em;
	grid-template-columns: 1fr 1fr;
}
.grid-2x {
	display: grid;
	grid-column-gap: 0em;
	grid-row-gap: 2rem;
	grid-template-columns: 1fr 1fr;
}
.grid-3x {
	display: grid;
	grid-column-gap: 0em;
	grid-template-columns: 1fr 1fr 1fr;
}
.grid-4x {}
.grid-5x {
	display: grid;
	grid-column-gap: 0em;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
::selection {	/*--color of selected text--*/
	background: var(--selection);
	color: 		var(--selection-text);
}

.left {float: left;}
.right {float: right;}
.clear {clear: both;}

.red {color: var(--red);}
.green {color: var(--green);}

.desktop {
	display: block;
}
.mobile {
	display: none;
}

/*--custom scrollbar--*/
/*
::-webkit-scrollbar {
  width: 0.8em;
}
::-webkit-scrollbar-track {
  background: rgba(200,200,200,0.5);
}
::-webkit-scrollbar-thumb {
  background: rgba(200,50,50,1.0);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(250,50,50,1.0);
}
*/


/*----header----*/
header {
	position: relative;
	list-style-type: none;
	background: var(--background);
	box-shadow: var(--shadow-dark);
	text-align: center;
	letter-spacing: 0.05rem;
	font-size: 1rem;
	min-height: 5rem;
	z-index: 5;
}

header nav {
	display: grid;
	grid-column-gap: 0;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	position: relative;
	background: white;	
    z-index: 5;
}

header nav a {
	display: inline;
	padding: 2rem 0 2rem 0;
	color: var(--nav-link);
	transition: color 0.4s, background 0.4s;
}
header nav a:hover {
	background: var(--nav-bg-hover);
    color: var(--nav-link-hover);
	text-decoration: none;
}

.logo {
	padding: 0;
}
.logo img {
    display: block;
	height: 5rem;
}
a.logo:hover:after {
	transform: scaleX(0);
}
nav a:first-child {
	
}

nav a span {
	display: inline-block;
}
nav a span::after {
	content: ' ';
	display: block;
	border-radius: 0.08em;
	border-bottom: 0.15em solid var(--nav-bg-line);
	width: 100%;
	transform: scaleX(0);
	transform-origin: left;
	transition: width 0.4s,transform 0.4s;
}
nav a:hover span::after {
	transform: scaleX(1);
	transform-origin: left;
}

nav a.youarehere {
	color:	var(--primary);
}
nav a.youarehere span:after {
	transform: scaleX(1);
}

.chevron {
	display: inline-block;
	height: 0.75em;
	width: 0.75em;
	margin: 0.0em 0 0 0;
	padding: 0.0em 0 0 0;
	transition: all 0.4s ease-out;
	transform-origin: 50% 65%;
}
/* */
nav a:hover #chevron {
     transform: rotate(-180deg);
}
/* */

.mega-menu {
	top: 0;
	left: 0;
	right: 0;
	z-index: 4;
	position: absolute;
	display: grid;
	grid-column-gap: 0em;
	grid-template-columns: 2fr 1fr 2fr 2fr;
	min-height: 8em;
	margin-top: -20em;
	text-align: left;
	transition: margin-top 0.4s ease-out;
	pointer-events: none;
}

.mega-menu li:nth-child(odd) {
	background: var(--bg-alt);
	background: var(--background);
}
.mega-menu li:nth-child(even) {
	background: var(--background);
	background: var(--bg-alt);
}

.dropdown-menu {
	border-radius: var(--radius);
	background: var(--nav-bg);
	box-shadow: var(--shadow-dark);
	list-style-type: none;
	padding: 6em 0 1em 0;
	text-align: left;
	float: left;
	margin: 0;
	pointer-events: auto;
}

.dropdown-menu li a {
	display: block;
	padding: 0.25em 1em;
	color: var(--text);
	text-decoration: none;
	transition: color 0.2s;
}
.dropdown-menu li a:hover {
	color: var(--link-hover);
	text-decoration: none;
}

.dropdown-menu li a span {
	display: inline-block;
}

.dropdown-menu li a span::after {
    content: ' ';
    display: block;
    border-radius: 0.1em;
    border-bottom: 0.15em solid var(--nav-bg-line);
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: width 0.4s,transform 0.4s;
}
.dropdown-menu li a:hover span::after {
    transform: scaleX(1);
}


/*--landing--*/
.landing{}

.sector {
	padding: 3rem 0 3rem 0;
	background: var(--background);
}
main div.sector:nth-child(even) {
	background: var(--bg-alt);
}

main div.sector:last-child {
    margin-bottom: 0;
}

.sector h1 {
	font-family: lobster;
} 

.hero {
	box-shadow:	0em 0em 1em rgba(5,5,5,0.5) inset;
	background-image: radial-gradient(
		circle,
		rgb(255,255,255) 40%,
		rgb(250,200,100) 60%,
		rgb(250,150,0) 80%,
		rgb(250,100,200)
	);
}
.hero { /* .hero .page */
	box-shadow:	2rem 0em 2rem -1.5rem rgba(255,255,255,0.6) inset,
				-2rem 0em 2rem -1.5rem rgba(255,255,255,0.6) inset,
				0 -1rem 1rem -1rem rgba(0,0,0,0.99) inset;
	padding: 5em 1em;
	background-image: url("/images/hero-image.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 350px;
}

.hero *::selection {
	background: var(--selection-alt);
	color:white;
	-webkit-text-fill-color: white;
}

.header {
	display: block;
	margin: 0rem 0 0 0;
	color:		var(--tertiary);
	font-family: Lobster, system-ui, Helvetica, Arial, sans-serif;
	letter-spacing: 0rem;
	font-size:	3.5rem;
	font-weight:normal;
	text-align: left;
	text-shadow:0em 0em 0.2rem rgba(0,0,0,1.0),
				0em 0em 0.8rem rgba(0,0,0,1.0);
}

.subheader {
	display: block;
	border-radius: 0.25rem;
	color:		rgb(250,250,250); /*var(--lite);*/
	margin:		0.5em 0em 1.5em 0em;
	font-size:	1.35rem;
	font-weight: bold;
	text-align: left;
	text-shadow:0em 0em 0.2rem rgba(0,0,0,1.0),
				0em 0em 0.4rem rgba(0,0,0,1.0),
				0em 0em 0.8rem rgba(0,0,0,1.0);
}

.intro {
	margin: 1rem 0 0 0;
}
.intro img {
    border-radius: 0.4em;
    border: 0.2em solid #fff;
    width: 90%;
    margin-left: 0;
    box-shadow: 0 0 1em rgba(0,0,0,.35);
    transition: transform 0.4s,box-shadow 0.4s;
}

.flair {
	padding: 0 0.05em 0 0;
	/*
	color: var(--orange);
	background-image: linear-gradient(
		5deg,
		rgb(250,0,0),
		rgb(250,200,0)
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	*/
}

.flare {
	color:		var(--orange);
	padding: 0 0.05em 0 0;
	background-image: linear-gradient(
		5deg,
		rgb(250,0,0),
		rgb(250,200,0)
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.flare::selection, .flare-g::selection {
	color:white;
	-webkit-text-fill-color: white;
}

.flare-g {
	color:		white;
	padding: 0 0.05em 0 0;
	background-image: linear-gradient(
		0deg,
		rgb(0,150,50),
		rgb(50,250,0)
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.landing-cards {
	margin: 0 auto;
	column-gap: 1em;
}
.landing-cards > div {
	padding: 1.25rem;
	margin: 1rem auto;
	border-radius: 2.5rem;
	border: 0.05em solid var(--lightgrey);
	text-align: left;
	font-size: 1rem;
	box-shadow: var(--shadow-light);
	background-size: 30%;
	background-image: url("/images/flowers-blue.svg");
	background-repeat: no-repeat;
	background-position: top right;
}

.invert .landing-cards > div {
	background: var(--bg-alt);
}

.landing-cards img {
	width: 50%;
	text-align: center;
	margin: 0 0 0 25%;
}

.landing-cards h3 {
	color: var(--grey);
	text-align: center;
	min-height: 2em;
}
.landing p {
	margin: 1em 0em;
}

.read-more {
	font-size: 0.85em;
}

.landing-bullets {
	text-align: left;
	padding: 0.5em;
}
.landing-bullets img {
	float: right;
}

.buttonset {
	margin: 1em 1em 2em 1em;
}

.button {
	display: inline-block;
	min-width: 6em;
	max-width: 8em;
	padding: 1em 0.5em;
	margin: 0.5em 0.5em;
	color: var(--button-text);
	font-weight: bold;
	white-space: nowrap;
	text-align:	center;
	background-color: var(--button);
	border-radius: var(--radius);
	box-shadow: var(--shadow-light);
	text-shadow: 0 0 0.15rem rgb(0,0,0);
	cursor: 	pointer;
	transition: translate 0.2s ease-out, box-shadow 0.2s, background-color 0.2s, color 0.2s;
}
.button:hover {
	color: var(--button-text);
	text-decoration: none;
	background-position: -7.5em 0em;
	box-shadow: var(--shadow-thin);
	translate: 0 -10%;
}

.button-alt {
	border: var(--radius) solid var(--button-alt);
	background-color: var(--button-alt);
	box-shadow: var(--shadow-dark);
}
.button-alt:hover {
	box-shadow: var(--shadow-thin);
}

.buttonset a:nth-of-type(2):hover {
	background-position: 7.5em 0em;
}
.slide-right:hover {
	background-position: 7.5em 0em;
}
.slide-up:hover {
	background-position: 0em -4.5em;
}

.wide-margin {
	margin-top: 4em;
	margin-bottom: 4em;
}

.scores {
	border: 1px solid rgb(200,200,200);
	border-radius: 0.5em;
	display: grid;
	grid-row-gap: 1em;
	grid-column-gap: 0.5em;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	font-family: Helvetica, sans-serif;
	font-size: 0.8em;
	padding: 1em;
}

.process-grid {
	display: grid;
	grid-column-gap: 0em;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.process-grid div {
	margin: 1em 0em;
}

.process p {
	font-size: 0.9em;
	margin: 0.5em;
	padding: 0em;
	text-align: left;
}

.process-beam {
	background: rgb(200,50,50);
	height: 1em;
}
.process-dot {
	background: rgb(200,50,50);
	height: 2em;
	width: 2em;
}


/*--packages--*/
.landing-cards > div.basket {
	min-height: 5rem;
	padding: 2.5rem 2rem 2rem 2rem;
	background-size: 30%;
	background-image: url("/images/flowers.svg");
	background-repeat: no-repeat;
	background-position: top right;
}

.basket h2 {
	color: var(--primary);
	margin-bottom: 1rem;
	font-family: lobster;
}

.basket h2::after {
	content: "";
	background-image: none;
	height: 0;
    margin: 0.25em auto 0em auto;
}

.landing-cards > div.addon {
	background: white;
	min-height: 5rem;
	min-width: 80%;
	padding: 2.5rem 2rem 2rem 2rem;
	background-size: 15%;
	background-image: url("/images/picnic-basket-outline.svg");
	background-repeat: no-repeat;
	background-position: 95% 10%;
}

.addon h3 {
	color: var(--primary);
	margin-bottom: 0.5rem;
}


/*--services--*/
.services {}

.services-tiles {
	margin: 2em auto;
}

.tile {
	display:		block;
	border-radius:	0.25em;
	border:			1px solid rgb(150,150,150);
	color:			rgb(50,50,50);
	text-align:		center;
	min-height:		16em;
	padding: 		1em 0em;
	margin:			0.8em;
}
.tile:hover {
	box-shadow: 0em 0em 0.6em rgba(50,100,200,0.6);
	border:		1px solid rgb(50,100,200);
	transform:	translate(0, -1em);
}
.tile img {
	width:	6em;
	height:	6em;
}
.tile:nth-child(1) img {
	margin-left: 0.5em;
}
.tile:nth-child(4) img {
	margin-left: 1.25em;
}

.services .buttonset {
	margin: 	1em 0em 2em 0em;
}

.fadeUp {
	opacity: 0.05;
	transform: translateY(20%);
}

.fadeLeft {
	opacity: 0.05;
	transform: translate(-50%, 0%);
}

.fadeRight {
	opacity: 0.05;
	transform: translate(50%, 0%);
}

.fadeIn {
	opacity: 1.0;
	transition: opacity 0.8s, filter 0.8s, transform 0.8s, box-shadow 0.4s;
	transform: translate(0%, 0%);
}


/*----Pricing----*/
.pricing {}

.packages {
	margin: 2em 0em;
}
.package {
	border: 1px solid rgb(100,100,100);
}
.package:first-of-type {
	border-radius: 0.55em 0em 0em 0.5em;
	border-right: none;
}
.package:last-of-type {
	border-radius: 0em 0.55em 0.5em 0em;
	border-left: none;
}

.package div {
	padding: 1em 0.5em;
	text-align: left;
	z-index: 1;
}
.package div img {
	margin: 0 0.5em 0 0;
	float: left;
}
.package div img:nth-child(2) {
	height: 0.9em;
	margin: 0em;
	float:	right;
	cursor: pointer;
}

.package div a img {
	height: 0.9em;
	margin: 0em;
	float:	right;
}

.support div {
	padding: 1em;
	text-align: left;
}
.support div img {
	margin: 0 1em 0 0;
}

.package div:nth-child(even) {background: white;}
.package div:nth-child(odd) {background: rgb(240,240,240);}

.package div:first-of-type {
	border-bottom: 1px solid rgb(100,100,100);
	font-weight: bold;
	text-align: center;
	background: rgb(50,200,50);
	color: 		rgb(250,250,250);
	text-shadow:0em 0em 0.2em rgba(50,50,50,0.8);
}
.package div:nth-child(2) {
	text-align: center;
}
.package div:last-of-type {
	text-align: center;
}

.package:first-of-type div:first-of-type {
	background: rgb(200,50,50);
	border-radius: 0.45em 0em 0em 0em;
}
.package:last-of-type div:first-of-type {
	background: rgb(50,100,200);
	border-radius: 0em 0.45em 0em 0em;
}
.package:first-of-type div:last-of-type {
	border-radius: 0em 0em 0em 0.45em;
}
.package:last-of-type div:last-of-type {
	border-radius: 0em 0em 0.45em 0em;
}

.package h2 {
	margin:	0em;
	padding: 0.25em;
}

.package p {
	padding: 0.1em;
	margin:	0em;
}

.support {
	border-radius: 0.5em;
	margin: 0em auto;
}
.support div:first-of-type {
	border-radius: 0.45em 0.45em 0em 0em;
}
.support div:last-of-type {
	border-radius: 0em 0em 0.45em 0.45em;
}

.notes {
	margin:	1em 0em 1em 0em;
	
}
.note {
	border-radius:	0.5em;
	display:	block;
	text-align: left;
	padding:	0.5em;
	margin:		0em 0em 1em 0em;
}

.note-ping {
	outline:		0.1em solid rgba(50,100,200,1.0); 
	box-shadow: 	0em 0em 1em rgba(50,100,200,0.4);
}

.info-overlay {
	
}
.package div.info-overlay, .package:first-of-type div:first-of-type.info-overlay {
	position: absolute;
	border-radius:	0.25em;
	background: rgba(0,0,0,0.8);
	color: white;
	font-weight: normal;
	padding: 1em;
	left: 0em;
	opacity: 0.1;
	transform: scale(0.5);
	transform-origin: 100% 0%;
	transition: transform 0.35s, opacity 0.35s;
	z-index: 5;
}
.info-overlay:after {
	content: '';
	display: block;
	position: absolute;
	width: 0em;
	border-style: solid;
	border-color: rgba(0,0,0,0.8) transparent;
	border-width: 0 1em 1em;
	top: -1em;
	right: 1em;
	z-index: 1;
}
.package div.info-overlay:hover,
.package:first-of-type div:first-of-type.info-overlay:hover {
	opacity: 1.0;
	transform: scale(1.0);
	cursor: pointer;
}


/*----Contact----*/
.contact {}

#contact-form {
	text-align: left;
	width: 60%;
	margin: 2em auto;
}
#booking-form {
	text-align: left;
	width: 80%;
	margin: 2em auto;
}

.grid-gap-2-1 {
    grid-column-gap: 2rem;
    grid-row-gap: 0rem;
}
.grid-gap-1 {
    grid-column-gap: 1rem;
    grid-row-gap: 0rem;
}
.grid-gap-05 {
    grid-column-gap: 0.5rem;
    grid-row-gap: 0rem;
}

.google-form {
	margin-top: 2em;
}

input, textarea {
	font-size: 1em;
}
select {
	font-size: 0.9em;
}

select, textarea,
input[type=text], input[type=email],
input[type=date], input[type=time] {
	outline: none;
	display: block;
	border: 1.5px solid rgb(150,150,150);
	border-radius: 0.5em;
	background: white;
	box-sizing: border-box;
	width: 100%;
	padding: 0.5em;
	margin: 0em 0em 1em 0em;
	resize: vertical;
	-webkit-appearance: none;
	-moz-appearance: none;
	transition:	outline 0.1s, box-shadow 0.1s;
}

textarea:focus, input[type=text]:focus,
input[type=email]:focus, input[type=select]:focus {
	outline: 0.1em solid rgb(50,100,200);
	box-shadow:	0em 0em 0.5em rgba(50,100,200,0.25) inset;
}

label {
	display: inline-block;
	padding: 0em;
	margin: 0.1rem 0.25rem;
}

.contact input[type=submit] {
	border: none;
	outline: none;
	margin: 0em 0em 1rem 0em;
	min-width: 20%;
	transition:  color 0.4s, translate 0.2s, box-shadow 0.2s,
				background-image 0.4s, background-position 0.4s;
	-webkit-appearance: none;
	-moz-appearance: none;
	float: right;
	background-size: 15%;
	background-image: none;
	background-repeat: no-repeat;
	background-position: 10% center;
	background-image: url("/images/send-blue.svg");
	transform-origin: right;
}

.contact input[type=submit]:hover {
	background-position: 90% center;
	background-image: url("/images/send.svg");
	transform-origin: right;
}

.contact select {
	display: block;
	width: 100%;
	text-align: left;
	cursor: pointer;
}
.contact option {
	cursor: pointer;
}

.sent h2 {
	color: var(--grey);
}
.sent h2::after {
	content: "";
	background-image: none;
}
.sent a {
	text-decoration: underline;
}

.margin-top {
	margin-top: 3rem;
}
.padding-top {
	padding-top: 1rem;
}


/*----faq----*/
.faq {
	box-shadow:		0em 0em 0.5em rgba(50,50,50,0.2);
	border:			1px solid rgb(150,150,150);
	border-radius:	1em;
	margin:			2em auto 2em auto;
	clear:			both;
}

.faq h1 {
	color:	white;
	border-radius: 0.45em 0.45em 0em 0em;
	background:	rgb(50,200,50);
	text-shadow:0em 0em 0.1em rgba(50, 50, 50, 0.8);
	margin:		0em 0em;
	padding:	0.25em 0em;
}

.faq h2 {
	box-shadow:		0em 0em 0.5em rgba(50,50,50,0.2);
	margin:			0em 0em 0em 0em;
	padding:		0.5em 0em 0.5em 1em;
	text-align: 	center;
	margin-right:	0rem;
}
.faq h2::after {
	background-position-x: -25px;
}

.faq section {
	transition: height 0.4s;
	overflow:	hidden;
}

.faq section div {
	cursor: pointer;
}

.faq-content {
	padding: 1rem 0 1rem 1rem;
}

.faq section div svg {
	display: inline-block;
	width: 1em;
	height: 1em;
	padding: 0.8em 1em;
	margin: 0em 0em;
	float: right;
}

.vert  {
	transform-box: fill-box;
  	transform-origin: center center;
  	transition: transform 0.35s;
}
.faq section .vert {
	transform: rotate(0deg);
}

.faq p {
	text-align: left;
	padding:	0.5em 0.5em;
	margin:		0em;
}

.faq section p:last-of-type {
	padding: 0.5em 0.5em 1em 0.5em;
}

.faq ul {
	text-align: left;
	padding:	0.5em 0.1em 0.5em 1.25em;
	margin:		0em;
}


/*-new-footer-*/
footer div.page {
	padding: 0;
}

footer .grid-5x {
	column-gap: 0.5em;
	grid-template-columns: 1fr 0.75fr 1fr 1.25fr 1fr;
}

footer {
	position: sticky;
	top: 100vh;
	color: rgb(250,250,250);
	background: var(--footer);
	border-top: 0.1em solid var(--footer-accent);
	box-shadow: 0 0 0.5em var(--shadow);
	text-align: left;
	padding: 1em 0.5em 0.5em 0.5em;
	clear: both;
	box-shadow: 0 1rem 1rem -1rem rgb(0,0,0,0.4) inset;
}
footer a {
	display: inline-block;
	border-radius: 0.25em;
	color: rgb(250,250,250);
	font-weight: 400;
	padding: 0.25em 0.5em;
	margin: 0em 0em 0em -0.5em;
	text-decoration: none;
	transition: color 0.35s, background 0.35s;
}
footer a:hover {
	color: var(--lite);
	text-decoration: none;
	background: rgba(250,250,250,.1);
}
footer a::after {
	content: ' ';
	display: block;
	border-bottom: 0.1em solid var(--accent-2);
	width: 100%;
	transform: scaleX(0);
	transform-origin: left;
	transition: width 0.35s,transform 0.35s;
}
footer a:hover:after {
	transform: scaleX(1);
}
footer a.foot-logo:hover:after {
	transform: scaleX(0);
}
footer a.dev-link:hover:after {
	transform: scaleX(0);
	border-bottom: none;
}

.foot-logo {
    text-align: left;
}
.foot-logo img {
    width: 100%;
}

.foot-heading {
	color: rgb(250,250,250);
	font-weight: bold;
	margin: 0.5em 0em;
}

.sitemap {
	font-size: 1rem;
}
.sitemap a {
	display: block;
}

.footer-contact a {
	display: inline-block;
}
.footer-contact p {
	font-size: 0.8em;
}
.footer-email {
	text-wrap: nowrap;
}
#phone-link {
	margin-left: 0.1rem;
}

.copyright {
	display: block;
	margin: 1em 0em 0em 0em;
    font-size: 0.8em;
    text-align: center;
}
.legal {
	margin: 0em 0.5em;
}
.legal a {
	color: rgb(250,250,250);
	padding: 0em;
	margin: 0em 0.25em;
}
.legal a:hover {
	background: rgba(0,0,0,0.0);
	text-decoration: underline;
}
.credit {
	display: inline-block;
    margin: 0em;
}
.credit a {
	margin: 0em 0em 0em 0em;
	padding: 0.25em 0.25em;
}
.credit a img {
	height: 1em;
	filter: grayscale(100%);
	transition: filter 0.5s;
	margin: 0em 0em -0.2em 0em;
}
footer a.dev-link:after {
	border-bottom: none;
}
.credit a:hover img {
	filter: grayscale(0%);
}

.socials {
    text-align: right;
    margin: 1em 0em;
}
.socials a {
	height: 40px;
	width: 40px;
	padding: 0;
	margin: 0 0.35em;
	border-radius: 0.2em;
	background: rgb(250,250,250);
	transition: background 0.5s;
}
.socials a:first-child {margin: 0;}
.socials a:last-child {margin: 0;}

a.facebook {
    border-radius: 48px;
}
a.instagram {
	border-radius: 12px;
	background-image: url("/images/instagram.svg");
}
a.tiktok {
	border-radius: 48px;
	background-image: url("/images/tiktok.svg");
	
}
.socials a div {
    background: #324b96;
    transition: background 0.5s;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}
.socials a div:hover {
    background: #fff;
}
.socials a img {
    transition: opacity 0.5s;
    aspect-ratio: auto 1/1;
}
.socials a img:hover {
    opacity: 0;
}
.mask-fb {
    mask-image: url("/images/facebook.svg");
    -webkit-mask-image: url("/images/facebook.svg");
}

.mask-li {
	mask-image: url("/images/linked-in.svg");
	-webkit-mask-image: url("/images/linked-in.svg");
}
a.linked:hover {
	background: rgb(39,102,177);
}

/*
.mask-insta {
    mask-image: url("/images/instagram.svg");
    -webkit-mask-image: url("/images/instagram.svg");
}
.mask-tik {
	mask-image: url("/images/tiktok.svg");
	-webkit-mask-image: url("/images/tiktok.svg");
}
*/

a.facebook:hover {
	background: #1881f2;
}
a.instagram:hover {
	background-image: url("/images/instagram-2.svg");
}
a.tiktok:hover {
	background-image: url("/images/tiktok-2.svg");
}

.socials a:after {
    border: none;
}

.terms {
	font-family: Helvetica, Arial, sans-serif;
}
.terms h1::after, .terms h2::after {
    background-image: none;
	height: 0;
}
.terms h1, .terms h2 {
    color: rgb(50,50,50);
}
.terms ul {
    padding: 0.5em 1em;
}


/*----Responsive-Ruleset----*/
/*----Tablets----*/
@media only screen and (min-width: 541px) and (max-width: 800px) {
	header nav {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.nav-gap {
		display: none;
	}
}

/*----Phones----*/
@media only screen and (max-width: 540px) { /* max-width: 40em */
	.page {
		padding: 0 0.5em;
	}

	nav.page {
		padding: 0;
	}

	header nav {
		grid-template-columns: 1fr 1fr 1fr;
	}
	header nav a {
		font-size: 1rem;
		padding-top: 2rem;
		padding-bottom: 0;
	}

	.logo {
		padding: 0;
	}
	.logo img {
		display: inline-block;
	}

	.nav-gap {
		display: none;
	}

	.mega-menu {
		grid-template-columns: 1fr;
		min-height: 8em;
		margin-top: -25em;
	}
	.dropdown-menu {
		padding: 9em 0em 1em 0em;
	}
	
	.hero .page {
		padding: 1em 0.5em 2em 0.5em;
	}
	h1.header {
		margin: 0;
	}

	.landing-cards h3 {
		min-height: 1em;
	}

	footer {}

	footer .grid-5x {
		column-gap: 0;
		grid-template-columns: 1fr 1fr;
	}

	footer .grid-3x {
		grid-template-columns: 1fr 1fr;
	}

	.foot-logo {
		text-align: center;
		grid-column: 1 / -1;
	}
	.foot-logo a {
		margin: auto auto;
	}

	.sitemap {
		text-align: left;
		font-size: 1em;
	}

	.footer-contact {
		grid-column: 1 / -1;
		margin: 1em 0;
	}

	.socials {
		text-align: center;
		grid-column: 1 / -1;
	}

	p {
		font-size: 1.1em;
		padding: 0;
	}

	li {
		font-size: 1.1em;
	}

	.hero {

	}

	.button {
		margin: 1em 0.25em 0.5em 0.25em;
	}

	.page-intro, .w40, .w50, .w60, .w80 {
		width: calc(100% - 0.5em);
		padding-left: 0.25em;
		padding-right: 0.25em;
	}

	.grid-2x {
		grid-row-gap: 0em;
		grid-template-columns: 1fr;
	}

	.grid-3x {
		grid-template-columns: 1fr;
	}


	#contact-form {
		text-align: left;
		width: 90%;
		margin: 2em auto;
	}
	#booking-form {
		text-align: left;
		width: 98%;
		margin: 2em auto;
	}

	.faq {
		width: 100%;
	}

	.faq section div svg {
		padding: 0.8em 0.5em;
	}
	.faq h2::after {
		margin: 0.25rem auto 0 auto;
		background-position-x: -20px;
	}

	.desktop {
		display: none;
	}
	.mobile {
		display: block;
	}

} /*--/responsive-ruleset--*/