:root {
	--bg-color: #9dcc59;
	--color-volcano: #ce613f;
    --color-forest-green: #005f35;
    --color-off-white: #eee; 

	--padding: 32px;

	--tile-bg-color: var(--accent-color-lighter);
	--tile-top-padding: 18px;
	--tile-bottom-padding: 36px;
	--tile-lr-padding: 48px;
	--tile-radius: 32px;

	--pill-box-h: 62px;
	--pill-box-radius: 31px;
	--pill-box-padding: 31px;

	--gap: 32px;

	--serif: "Playfair Display";
	--hero-font-size: 72px;
	--hero-font: normal 400 var(--hero-font-size) var(--serif);
}

html.bar_showing body {
	padding-top: 64px;
	background-position: center 128px;
}

body {
	font-size: 20px;
	background-color: var(--primary-color-lightest);
	background-image: var(--body-background-image);
    background-position: center 64px;
	background-repeat: no-repeat;
	background-size: 1158px 878px;
}
body .hero {
	font: var(--hero-font);
}
body .bg-graphic-leaf {
	position: absolute;
	top: 440px;
	left: 680px;
	z-index: -1;
	scale: 20;
}

a.cta {
	--h: var(--pill-box-h);
	--r: var(--pill-box-radius);
	--p: var(--pill-box-padding);

	display: inline-flex;
	gap: 0.25em;
	align-items: center;
	text-decoration: none;
	height: var(--h);
	border-radius: var(--r);
	padding: 0 var(--p);
	background-color: white;
	border: 3px solid var(--accent-color);
	color: inherit;
}
a.cta:hover,
a.cta:active,
a.cta:focus {
	text-decoration: none;
	color: var(--accent-color);
	outline: none;
}

/*
 * Main css structure
 */
main {
	max-width: 1580px;
	margin-left: auto;
	margin-right: auto;
}
main > .w {
	max-width: initial;
	padding: var(--padding);
	opacity: 0.94;

	display: flex;
	flex-direction: column;
	gap: var(--gap);
}
main > .w .content {
	border: 3px solid var(--primary-color);
	border-radius: var(--tile-radius);
	padding-top: var(--tile-top-padding);
	padding-left: var(--tile-lr-padding);
	padding-right: var(--tile-lr-padding);
	padding-bottom: var(--tile-bottom-padding);
	background-color: var(--primary-color-lighter);
}

/*
 * Regular navigation
 */
main > .w .content .site_nav {
	--lr-w: 155px;
	--h: var(--pill-box-h);
	--r: var(--pill-box-radius);
	--p: var(--pill-box-padding);
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0px;
}
main > .w .content .site_nav > .logo {
	border: 3px solid var(--accent-color-lighter);
	background-color: white;
	height: 120px;
	transform: translateX(-8px);
	flex: 0 0 var(--lr-w);
	border-radius: 23% 77% 22% 78% / 66% 33% 67% 34%;
	animation: morphing 12s ease-in-out infinite;
}
main > .w .content .site_nav > .logo img {
	box-sizing: border-box;
	padding: 12px 0;
	width: 100%;
	max-height: 100%;
}
main > .w .content .site_nav > *:nth-child(2) {
	background-color: white;
	border-radius: var(--r);
	height: var(--h);
	flex: 0 0 auto;
}
main > .w .content .site_nav > *:nth-child(3) {
	flex: 0 0 var(--lr-w);
	text-align: right;
}
main > .w .content .site_nav nav {
	border: 3px solid var(--accent-color);
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 0 32px;
}
main > .w .content .site_nav nav > a {
	border-radius: 32px;
	padding: 0 16px;
}
main > .w .content .site_nav nav > a:hover,
main > .w .content .site_nav nav > a:active,
main > .w .content .site_nav nav > a:focus {
	text-decoration: none;
	color: var(--accent-color);
	outline: none;
}

/*
 * Small navigation
 */
main > .w .content .site_nav.small {
	display: none;
}
dialog#site_nav {
	margin-right: 0;
	border: none;
	border-bottom: 3px solid white;
	border-top: 3px solid white;
	height: 100%;
	width: 100%;
	max-width: 280px;
	box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.5);
	transform: translate(100%);
	--speed: 0.1s;
	transition:
		transform var(--speed) linear,
		overlay var(--speed) ease-out allow-discrete,
		display var(--speed) ease-out allow-discrete;
}
dialog#site_nav button.close {
	position: absolute;
	top: 7px;
	right: 8px;
	background-color: transparent;
	border: none;
}
dialog#site_nav button.close:hover {
	color: var(--accent-color);
}
dialog#site_nav > nav {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 32px;
}
dialog#site_nav > nav:last-of-type {
	padding-top: initial;
	padding-bottom: 32px;
}
dialog#site_nav .menu_title {
	text-transform: uppercase;
	font-size: 80%;
}
dialog#site_nav hr {
	background-color: var(--accent-color);
	height: 2px;
	width: 50%;
	margin: 32px 0;
}
dialog#site_nav > nav > a:hover,
dialog#site_nav > nav > a:active,
dialog#site_nav > nav > a:focus {
	text-decoration: none;
	color: var(--accent-color);
	outline: none;
}
dialog#site_nav:open {
	transform: translate(0);
}
@starting-style {
	dialog#site_nav:open {
		transform: translate(100%);
	}
}

/*
 * Footer
 */
main > .w .footer {
	padding-left: 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
main > .w .footer > .contact_address_container {
	flex-basis: calc((100% / 3) * 2);
	display: flex;
	align-items: center;
}
main > .w .footer > .contact_address_container .address {
	flex-basis: 50%;
	display: flex;
	gap: 8px;
}
main > .w .footer > .contact_address_container .contact {
	flex-basis: 50%;
}
main > .w .footer > .contact_address_container .contact > a {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	text-decoration: none;
}
main > .w .footer > .contact_address_container .contact > a:hover,
main > .w .footer > .contact_address_container .contact > a:active,
main > .w .footer > .contact_address_container .contact > a:focus {
	text-decoration: none;
	color: var(--accent-color);
	outline: none;
}
main > .w .footer > .links {
	flex-basis: calc(100% / 3);
	text-align: right;
}


/*
 * Page: site_page_text
 */
.site_page_text {
	--box-color: var(--color-off-white);
}
.site_page_text h1:first-of-type {
		font: var(--hero-font);
		text-align: center;
		margin-bottom: 0.3em;
}
.site_page_text h2 {
	font-family: var(--serif);
	margin-bottom: 0.6em;
	font-size: 38px;
}
.site_page_text .fullbox {
	--gap: 32px;
	display: inline-block;
	border-radius: 12px;
	padding: 32px;
	margin-bottom: var(--gap);
	border: 3px solid var(--accent-color-lighter);
	background-color: var(--box-color);
	min-height: 150px;
}
.site_page_text .columnbox-container {
	--gap: 32px;
	display: flex;
	gap: var(--gap);
	flex-wrap: wrap;
}
.site_page_text .columnbox-container > br {
	display: none;
}
.site_page_text .columnbox-container > div {
	box-sizing: border-box;
	width: calc(50% - (var(--gap) / 2));
	border-radius: 12px;
	padding: 32px;
	border: 3px solid var(--accent-color-lighter);
	background-color: var(--box-color);
}

/*
 * Size: Medium
 */
@media screen and (max-width: 1176px)
{
	:root {
		--hero-font-size: 48px;
	}
	.site_page_text h2 {
		font-size: 32px;
	}
	.site_page_text .columnbox-container {
		flex-direction: column;
	}
	.site_page_text .columnbox-container > div {
		width: initial;
	}
	main > .w .content .site_nav.large {
		display: none;
	}
	main > .w .content .site_nav.small {
		display: flex;
	}
	main > .w .footer {
		flex-direction: column;
		align-items: initial;
		gap: 28px;
	}
	main > .w .footer > .contact_address_container {
		flex-basis: initial;
	}
	main > .w .footer > .links {
		flex-basis: initial;
	}
}

/*
 * Size: Small
 */
@media screen and (max-width: 767px)
{
	:root {
		--hero-font-size: 22px;

		--padding: 4px;

		--tile-top-padding: 8px;
		--tile-bottom-padding: 20px;
		--tile-lr-padding: 8px;
		--tile-radius: 16px;

		--xpill-box-h: 62px;
		--xpill-box-radius: 31px;
		--xpill-box-padding: 31px;

		--xgap: 32px;
	}
	main > .w .content .site_nav.small {
		margin-bottom: 12px;
	}
	.site_page_text h1:first-of-type {
		margin-bottom: 0.5em;
	}
	.site_page_text .fullbox {
		padding: 16px;
		--gap: 16px;
	}
	.site_page_text .columnbox-container {
		--gap: 16px;
	}
	.site_page_text .columnbox-container > div {
		padding: 16px;
	}
	body {
		font-size: 17px;
	}

	.site_page_text h2 {
		font-size: 18px;
	}
	main > .w .content .site_nav > .logo {
		transform: initial;
		--lr-w: 103px;
		height: 80px;
	}
	main > .w .footer {
		gap: 16px;
		padding-left: 0;
	}
	main > .w .footer > .contact_address_container {
		flex-direction: column;
		gap: inherit;
		align-items: initial;
	}

	html.p_1 img.hyperlink-image-no-float {
		height: 12em;
		object-fit: cover;
	}
}

@keyframes morphing {
	0% {
		border-radius: 23% 77% 22% 78% / 66% 33% 67% 34%;
	}
	33% {
		border-radius: 58% 42% 76% 24% / 47% 61% 39% 53%;
	}
	66% {
		border-radius: 40% 60% 40% 60% / 70% 30% 70% 30%;
	}
	100% {
		border-radius: 23% 77% 22% 78% / 66% 33% 67% 34%;
	}
}