﻿@import url("https://fonts.googleapis.com/css2?family=Handlee&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Roboto+Slab:wght@700&family=Fira+Code:wght@400;700&display=swap");

*, *::before, *::after {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	background-color: #f3f3f3;
	background-image: radial-gradient(ellipse, #f3f3f3, #e9e0d4);
	color: #3e3e3e;
	font-family: "Fira Code", "Playfair Display", Times New Roman, serif;
	font-size: 120%;
	letter-spacing: 0.03rem;
	line-height: 1.5;
	text-rendering: optimizeSpeed;
	-webkit-writing-mode: horizontal-tb;
	-ms-writing-mode: lr-tb;
	writing-mode: horizontal-tb;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
	@view-transition {
		navigation: auto;
	}
}

body {
	background-color: inherit;
	display: flex;
	flex-flow: column nowrap;
	min-width: 320px;
	margin-left: auto;
	margin-right: auto;
	min-height: 100%;
	min-height: 100vh;
	width: 100%;
}

a, a:visited {
	color: blue;
	text-decoration: none;
}

	a:hover, a:visited:hover {
		text-decoration: underline;
	}

	a:focus, a:visited:focus {
		text-decoration: underline;
	}

blockquote {
	background-color: #f4acb7;
	border: 1px solid #3e3e3e;
	border-radius: 50px;
	box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
	font-family: "Handlee", cursive;
	font-weight: bold;
	margin: 1rem;
	max-width: 65ch;
	padding: 1.5625rem;
}

	blockquote footer {
		display: block;
		font-style: italic;
		font-weight: normal;
		text-align: right;
	}

dl, ol, ul {
	margin: 0 auto 1rem 1.25rem;
}

dt {
	font-weight: 700;
}

fieldset {
	display: flex;
	flex-flow: column nowrap;
	width: 100%;
}

form {
	display: flex;
	flex-flow: column nowrap;
	width: 100%;
}

h1, h2, h3, h4, h5, h6, legend {
	font-family: "Roboto Slab", serif;
	font-weight: 700;
}

h1, h2, h3, h4, legend {
	line-height: 1.2;
}

h1, legend {
	font-size: 3.05176rem;
}

h2 {
	font-size: 2.44141rem;
}

h3 {
	font-size: 1.95313rem;
}

h4 {
	font-size: 1.5625rem;
}

h5 {
	font-size: 1.25rem;
}

h6 {
	font-size: 1rem;
}

@media (max-width: 549px) {
	h1, h2, h3, h4, h5, h6, legend {
		text-align: center;
	}
}

img {
	display: inline-block;
	height: auto;
	max-width: 100%;
}

input[type=email], input[type=text],
input[type=tel], input[type=password],
select, textarea {
	background-color: #f3f3f3;
	border: 1px solid #bda580;
	color: inherit;
	font: inherit;
	padding: 0.512rem 0.8rem;
	margin-bottom: 1rem;
	width: 100%;
}

	input[type=email]:focus, input[type=text]:focus,
	input[type=tel]:focus, input[type=password]:focus,
	select:focus, textarea:focus {
		box-shadow: 0px 0px 10px 2px #237762;
	}

	input[type=email][aria-describedby], input[type=text][aria-describedby],
	input[type=tel][aria-describedby], input[type=password][aria-describedby],
	select[aria-describedby], textarea[aria-describedby] {
		margin-bottom: 0;
	}

input[type=checkbox], input[type=radio] {
	margin-right: 1rem;
	transform: scale(1.5);
	transform-origin: center;
}

	input[type=checkbox]:focus, input[type=radio]:focus {
		box-shadow: 0px 0px 10px 2px #237762;
	}

label {
	display: inline-block;
	font-size: 1.25rem;
	font-weight: 700;
	width: 100%;
}

legend {
	margin-bottom: 1rem;
}

main {
	display: flex;
	flex-flow: column nowrap;
	flex-grow: 1;
	flex-shrink: 0;
	position: relative;
}

	main section + section {
		margin-top: 1.25rem;
	}

@media (min-width: 985px) {
	main section + section {
		margin-top: 2.44141rem;
	}
}

nav {
	font-weight: 700;
}

p {
	max-width: 65ch;
}

	p + p {
		margin-top: 1rem;
	}

@media (max-width: 549px) {
	p {
		text-align: center;
	}
}

section {
	padding: 0.8rem;
	position: relative;
}

@media (min-width: 985px) {
	section {
		padding: 1rem 1.5625rem;
	}
}

textarea {
	min-height: 20rem;
}

div.toolbar, footer.toolbar {
	align-items: center;
	border-top: 2px solid #3e3e3e;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	margin-top: 0.8rem;
	padding: 0.512rem 0;
}

	div.toolbar * + *, footer.toolbar * + * {
		margin-left: 1rem;
	}

section.narrow {
	margin: 0 auto;
	max-width: 800px;
	width: 100%;
}

section.hero {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 1.25rem;
	align-items: center;
	display: flex;
	flex-flow: column nowrap;
	flex-grow: 1;
	height: 100%;
	justify-content: center;
}

	section.hero .hero-content .hero-title, section.hero .hero-content .hero-blurb {
		align-items: center;
		display: flex;
		justify-content: center;
		padding-left: 1.5625rem;
		padding-right: 1.5625rem;
		text-align: center;
	}

	section.hero .hero-content .hero-title {
		margin-bottom: 3.05176rem;
	}

	section.hero .hero-content .hero-blurb {
		font-weight: 700;
	}

@media (min-width: 985px) {
	section.hero {
		min-height: 75vh;
	}

		section.hero .hero-content .hero-title h1 {
			font-size: 8vw;
		}

		section.hero .hero-content .hero-blurb {
			justify-content: flex-end;
		}
}

.line-up {
	align-items: flex-start;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	list-style: none;
	margin-top: 1rem;
}

/*#region interior */
.interior {
	margin-left: auto;
	margin-right: auto;
}

	.interior figure {
		display: flex;
	}

		.interior figure img {
			object-fit: cover;
			width: 100%;
		}

@media (min-width: 985px) {
	.interior {
		width: 85%;
	}
}

/*#endregion */
/*#region interior-cards */
.interior-cards {
	margin-left: auto;
	margin-right: auto;
}

	.interior-cards > header {
		margin-bottom: 1.5625rem;
		text-align: center;
	}

	.interior-cards > div.content > article {
		background-color: #fff;
		border: 1px solid #3e3e3e;
		border-radius: 1rem;
		box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
		padding: 1rem;
	}

		.interior-cards > div.content > article > header {
			margin-bottom: 1.5625rem;
			text-align: center;
		}

			.interior-cards > div.content > article > header > img {
				margin-top: 1.25rem;
				width: 100%;
			}

		.interior-cards > div.content > article + article {
			margin-top: 1.25rem;
		}

@media (max-width: 549px) {
	.interior-cards > div.content > article > p {
		text-align: center;
	}
}

@media (min-width: 985px) {
	.interior-cards > div.content {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
	}

		.interior-cards > div.content > article {
			min-width: 300px;
			width: 45%;
		}

			.interior-cards > div.content > article > p {
				margin-left: auto;
				margin-right: auto;
			}

			.interior-cards > div.content > article + article {
				margin-top: 0;
			}
}

/*#endregion */
/*#region interior-lr, interior-rl */
@media (min-width: 550px) {
	.interior-lr, .interior-rl {
		display: grid;
		grid-gap: 2.44141rem;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 1fr;
	}

		.interior-lr > header, .interior-rl > header {
			grid-row: 1;
		}

		.interior-lr > div.content, .interior-rl > div.content {
			grid-row: 2;
		}

		.interior-lr > figure, .interior-rl > figure {
			grid-row: 1 / -1;
		}

		.interior-lr > header {
			grid-column: 1;
		}

		.interior-lr > div.content {
			grid-column: 1;
		}

		.interior-lr > figure {
			grid-column: 2;
			grid-row: 1 / -1;
		}

		.interior-rl > header {
			grid-column: 2;
		}

		.interior-rl > div.content {
			grid-column: 2;
		}

		.interior-rl > figure {
			grid-column: 1;
		}
}

/*#endregion */
/*#region interior-bt, interior-tb */
.interior-bt > figure, .interior-tb > figure {
	height: 25vh;
	width: 100%;
}

@media (min-width: 550px) {
	.interior-bt, .interior-tb {
		display: grid;
		grid-gap: 1.25rem;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;
	}

		.interior-bt > figure, .interior-tb > figure {
			grid-column: 1 / -1;
		}

		.interior-bt > header, .interior-tb > header {
			grid-column: 1;
			text-align: right;
		}

		.interior-bt > div.content, .interior-tb > div.content {
			grid-column: 2;
		}

		.interior-bt > figure {
			grid-row: 1;
		}

		.interior-bt > header {
			grid-row: 2;
		}

		.interior-bt > div.content {
			grid-row: 2;
		}

		.interior-tb > figure {
			grid-row: 2;
		}

		.interior-tb > header {
			grid-row: 1;
		}

		.interior-tb > div.content {
			grid-row: 1;
		}
}

/*#endregion */
/*#region interior-text */
@media (min-width: 985px) {
	.interior-text > header {
		margin-bottom: 1rem;
	}

	.interior-text > div.content {
		display: grid;
		grid-gap: 1.95313rem;
		grid-template-columns: 1fr 1fr;
	}

		.interior-text > div.content > blockquote {
			grid-column: 2;
			grid-row: 1;
		}

		.interior-text > div.content > p {
			grid-column: 1;
		}
}

/*#endregion */
/*#region gallery */
.gallery {
	display: grid;
	grid-gap: 1rem;
}

	.gallery > figure {
		align-items: center;
		position: relative;
	}

		.gallery > figure > img {
			background-color: #b0e8da;
			border: 2px solid #b0e8da;
			border-radius: 1rem;
			box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
			width: 100%;
			object-fit: contain;
		}

@media (min-width: 550px) {
	.gallery {
		grid-template-columns: repeat(auto-fill, 140px);
		grid-auto-flow: row dense;
	}

		.gallery > figure.square {
			grid-column: span 2;
			grid-row: span 2;
		}

		.gallery > figure.wide {
			grid-column: span 3;
			grid-row: span 2;
		}

		.gallery > figure.tall {
			grid-column: span 2;
			grid-row: span 3;
		}
}

/*#endregion */
/*#region layout page _main */
header.global-header {
	background-color: #f3f3f3;
	border-bottom: thin dotted #3e3e3e;
	padding: 0.8rem 1.25rem;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 10;
}

	header.global-header .skip-block {
		background-color: #b0e8da;
		color: #3e3e3e;
		left: -1000px;
		padding: 0.8rem;
		position: absolute;
	}

		header.global-header .skip-block:focus {
			left: auto;
			top: 1rem;
			z-index: 1;
		}

	header.global-header nav {
		align-items: baseline;
		background-color: inherit;
		display: flex;
		flex-flow: row wrap;
		font-size: 1.5625rem;
		justify-content: flex-end;
		position: relative;
	}

		header.global-header nav .logo {
			display: flex;
			justify-content: center;
		}

		header.global-header nav .menu-toggle {
			background-color: #f3f3f3;
			color: #3e3e3e;
			cursor: pointer;
			font-family: "Roboto Slab", serif;
			font-size: 1rem;
			padding: 0.5rem 1rem;
			text-decoration: none;
			border: 1px solid #3e3e3e;
		}

			header.global-header nav .menu-toggle:hover {
				background-color: #3e3e3e;
				color: #f3f3f3;
			}

		header.global-header nav ul.main-menu {
			background-color: inherit;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			border: 1px solid #3e3e3e;
			font-family: "Roboto Slab", serif;
			list-style: none;
			margin: 0;
			opacity: 0;
			position: absolute;
			top: 200px;
			transform: scale3d(1, 0, 1);
			transform-origin: top;
			transition: opacity ease-in-out 0.3s, transform ease-in-out 0.2s;
			width: 100%;
			z-index: -1;
		}

			header.global-header nav ul.main-menu li {
				text-align: center;
			}

				header.global-header nav ul.main-menu li:not(:last-child) {
					border-bottom: 1px solid #3e3e3e;
				}

				header.global-header nav ul.main-menu li a, header.global-header nav ul.main-menu li a:visited {
					color: inherit;
					display: inline-block;
					padding: 0.8rem 1rem;
					text-decoration: none;
					width: 100%;
				}

				header.global-header nav ul.main-menu li[aria-current=page] {
					background-color: #f4acb7;
					padding: 0.8rem 1rem;
				}

			header.global-header nav ul.main-menu.open {
				opacity: 1;
				transform: scale3d(1, 1, 1);
				z-index: 100;
			}

@media (min-width: 550px) {
	header.global-header nav {
		justify-content: space-between;
	}

		header.global-header nav ul.main-menu {
			top: 166px;
		}
}

@media (min-width: 985px) {
	header.global-header nav {
		align-items: center;
	}

		header.global-header nav .menu-toggle {
			display: none;
		}

		header.global-header nav ul.main-menu {
			align-items: center;
			border: none;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			opacity: 1;
			position: static;
			top: 0;
			transform: none;
			width: auto;
			z-index: 0;
		}

			header.global-header nav ul.main-menu li:not(:last-child) {
				border-bottom: none;
			}

			header.global-header nav ul.main-menu li[aria-current=page] {
				background-color: inherit;
				background-image: url(/images/art/heart.png);
				background-repeat: no-repeat;
				background-size: contain;
			}

			header.global-header nav ul.main-menu li a {
				transform-origin: center;
				transform: rotate3d(0, 0, 0, 0) scale3d(1, 1, 1);
				transition: all ease-in-out 0.2s;
			}

				header.global-header nav ul.main-menu li a:hover {
					background-color: rgba(176, 232, 218, 0.5);
					transform: rotate3d(1, 1, 1, -15deg) scale3d(1.2, 1.2, 1);
				}
}

footer.global-footer {
	background-color: #3e3e3e;
	color: #f3f3f3;
	padding: 0.8rem 1rem;
	text-align: center;
}

	footer.global-footer ul {
		list-style: none;
	}

		footer.global-footer ul.footer-menu {
			align-items: center;
			display: flex;
			flex-flow: row wrap;
			justify-content: space-around;
			max-width: 549px;
		}

			footer.global-footer ul.footer-menu li {
				padding-right: 1rem;
			}

		footer.global-footer ul.social {
			align-items: center;
			display: flex;
			flex-flow: row wrap;
			justify-content: space-around;
		}

			footer.global-footer ul.social li {
				margin-top: 1rem;
				margin-right: 1rem;
			}

		footer.global-footer ul.contact-info li {
			padding-bottom: 0.4096rem;
		}

	footer.global-footer a, footer.global-footer a:visited {
		color: #b0e8da;
	}

		footer.global-footer a:hover, footer.global-footer a:visited:hover {
			color: #f4acb7;
		}

	footer.global-footer .disclaimer p {
		margin-left: auto;
		margin-right: auto;
	}

@media (min-width: 550px) {
	footer.global-footer .footer-info {
		align-items: flex-start;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
	}

	footer.global-footer ul.social li {
		margin-top: 0;
	}
}

@media (min-width: 985px) {
	footer.global-footer .footer-info {
		flex-wrap: nowrap;
		justify-content: space-between;
	}
}

/*#endregion */
/*#region utilities */
.icon {
	display: inline-block;
	height: 1rem;
	width: 1rem;
}

	.icon.small {
		height: 0.8rem;
		width: 0.8rem;
	}

	.icon.medium {
		height: 1.25rem;
		width: 1.25rem;
	}

	.icon.large {
		height: 1.5625rem;
		width: 1.5625rem;
	}

.feedback {
	background-color: #f3f3f3;
	border: thin dotted #3e3e3e;
	margin-bottom: 1rem;
	padding: 0.8rem 1rem;
}

	.feedback dl.messages {
		margin-bottom: 0;
		margin-left: 0;
	}

	.feedback .msg-alert {
		color: #8e1326;
	}

	.feedback .msg-success {
		color: #237762;
	}

@media (min-width: 550px) {
	.feedback {
		border-right: none;
		border-top: none;
		border-bottom-left-radius: 500px;
		position: absolute;
		right: 0;
		top: 0;
		width: 40%;
		z-index: 1;
	}

		.feedback dl.messages {
			text-align: right;
		}
}

/*#endregion */
/*#region colors */
.color-block {
	background-color: #b0e8da;
}

.color-palette {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

	.color-palette label {
		align-items: center;
		display: flex;
		flex-flow: row nowrap;
		font-weight: 400;
		width: auto;
	}

/*#region color chips */
.color-chip {
	border: 1px solid #3e3e3e;
	display: inline-block;
	height: 1.25rem;
	margin-right: 0.8rem;
	width: 1.25rem;
}

	.color-chip.default.text {
		background-color: #3e3e3e;
	}

	.color-chip.default.bg {
		background-color: #f3f3f3;
	}

	.color-chip.gold {
		background-color: #bda580;
	}

	.color-chip.pink {
		background-color: #f4acb7;
	}

	.color-chip.green {
		background-color: #b0e8da;
	}

	.color-chip.white {
		background-color: #f3f3f3;
	}

	.color-chip.grey {
		background-color: #9c9c9c;
	}

	.color-chip.black {
		background-color: #3e3e3e;
	}

	.color-chip.alert {
		background-color: #8e1326;
	}

	.color-chip.success {
		background-color: #237762;
	}

/*#endregion */
/*#region background colors */
.bg-color-default {
	background-color: #f3f3f3;
}

.bg-color-gold {
	background-color: #bda580;
}

.bg-color-pink {
	background-color: #f4acb7;
}

.bg-color-green {
	background-color: #b0e8da;
}

.bg-color-white {
	background-color: #f3f3f3;
}

.bg-color-grey {
	background-color: #9c9c9c;
}

.bg-color-black {
	background-color: #3e3e3e;
}

.bg-color-alert {
	background-color: #8e1326;
}

.bg-color-success {
	background-color: #237762;
}

/*#endregion */
/*#region text colors */
.text-color-default {
	color: #3e3e3e;
}

.text-color-gold {
	color: #bda580;
}

.text-color-pink {
	color: #f4acb7;
}

.text-color-green {
	color: #b0e8da;
}

.text-color-white {
	color: #f3f3f3;
}

.text-color-grey {
	color: #9c9c9c;
}

.text-color-black {
	color: #3e3e3e;
}

.text-color-alert {
	color: #8e1326;
}

.text-color-success {
	color: #237762;
}

/*#endregion */
/*#endregion */
/*#region type styles */
.type-style-de-emphasize {
	font-size: 1rem;
	font-weight: 300;
}

.type-style-description {
	font-size: 0.8rem;
	margin-bottom: 1rem;
}

.type-style-emphasize {
	display: inline-block;
	font-size: 1.25rem;
	font-weight: 700;
}

.type-style-disclaimer {
	font-size: 0.8rem;
	font-style: italic;
}

/*#endregion */
p.job-title {
	font-size: 0.8rem;
	margin-top: 0;
}

/*#region buttons */
a.button, a:visited.button,
button.button, input[type=submit].button,
input[type=reset].button, input[type=button].button {
	border-style: solid;
	border-width: 2px;
	cursor: pointer;
	display: inline-block;
	font-family: "Handlee", cursive;
	font-size: 1.25rem;
	font-weight: 700;
	padding: 0.512rem 1rem;
	text-align: center;
	text-decoration: none;
	transition: all ease-in-out 0.3s;
}

	a.button.primary, a:visited.button.primary,
	button.button.primary, input[type=submit].button.primary,
	input[type=reset].button.primary, input[type=button].button.primary {
		background-color: #b0e8da;
		border-color: #b0e8da;
		color: #3e3e3e;
	}

		a.button.primary:hover, a:visited.button.primary:hover,
		button.button.primary:hover, input[type=submit].button.primary:hover,
		input[type=reset].button.primary:hover, input[type=button].button.primary:hover {
			background-color: #237762;
			color: #f3f3f3;
		}

		a.button.primary:focus, a:visited.button.primary:focus,
		button.button.primary:focus, input[type=submit].button.primary:focus,
		input[type=reset].button.primary:focus, input[type=button].button.primary:focus {
			background-color: #237762;
			color: #f3f3f3;
		}

	a.button.secondary, a:visited.button.secondary,
	button.button.secondary, input[type=submit].button.secondary,
	input[type=reset].button.secondary, input[type=button].button.secondary {
		background-color: #f4acb7;
		border-color: #f4acb7;
		color: #3e3e3e;
	}

		a.button.secondary:hover, a:visited.button.secondary:hover,
		button.button.secondary:hover, input[type=submit].button.secondary:hover,
		input[type=reset].button.secondary:hover, input[type=button].button.secondary:hover {
			background-color: #8e1326;
			color: #f3f3f3;
		}

		a.button.secondary:focus, a:visited.button.secondary:focus,
		button.button.secondary:focus, input[type=submit].button.secondary:focus,
		input[type=reset].button.secondary:focus, input[type=button].button.secondary:focus {
			background-color: #8e1326;
			color: #f3f3f3;
		}

	a.button.tertiary, a:visited.button.tertiary,
	button.button.tertiary, input[type=submit].button.tertiary,
	input[type=reset].button.tertiary, input[type=button].button.tertiary {
		background-color: #bda580;
		border-color: #bda580;
		color: #3e3e3e;
	}

		a.button.tertiary:hover, a:visited.button.tertiary:hover,
		button.button.tertiary:hover, input[type=submit].button.tertiary:hover,
		input[type=reset].button.tertiary:hover, input[type=button].button.tertiary:hover {
			background-color: #292115;
			color: #f3f3f3;
		}

		a.button.tertiary:focus, a:visited.button.tertiary:focus,
		button.button.tertiary:focus, input[type=submit].button.tertiary:focus,
		input[type=reset].button.tertiary:focus, input[type=button].button.tertiary:focus {
			background-color: #292115;
			color: #f3f3f3;
		}

	a.button.edit, a:visited.button.edit,
	button.button.edit, input[type=submit].button.edit,
	input[type=reset].button.edit, input[type=button].button.edit {
		align-items: center;
		display: flex;
		justify-content: center;
		height: 2.44141rem;
		padding: 0;
		width: 2.44141rem;
	}

	a.button.topper, a:visited.button.topper,
	button.button.topper, input[type=submit].button.topper,
	input[type=reset].button.topper, input[type=button].button.topper {
		left: 0;
		opacity: 0.8;
		position: absolute;
		top: 0;
		z-index: 10;
	}

		a.button.topper:hover, a:visited.button.topper:hover,
		button.button.topper:hover, input[type=submit].button.topper:hover,
		input[type=reset].button.topper:hover, input[type=button].button.topper:hover {
			opacity: 1;
		}

		a.button.topper:focus, a:visited.button.topper:focus,
		button.button.topper:focus, input[type=submit].button.topper:focus,
		input[type=reset].button.topper:focus, input[type=button].button.topper:focus {
			opacity: 1;
		}

	a.button[disabled], a:visited.button[disabled],
	button.button[disabled], input[type=submit].button[disabled],
	input[type=reset].button[disabled], input[type=button].button[disabled] {
		background-color: #9c9c9c;
		border-color: #3e3e3e;
		color: #3e3e3e;
		cursor: not-allowed;
	}

		a.button[disabled]:hover, a:visited.button[disabled]:hover,
		button.button[disabled]:hover, input[type=submit].button[disabled]:hover,
		input[type=reset].button[disabled]:hover, input[type=button].button[disabled]:hover {
			background-color: #9c9c9c;
			color: #3e3e3e;
		}

/*#endregion */
/*#region edit-mode */
body.edit-mode .editable {
	border: 2px dashed #8e1326;
}

.mode-switch {
	display: flex;
	flex-flow: row;
	margin: 0.512rem;
	max-width: 320px;
}

	.mode-switch label {
		margin-right: 1rem;
		width: auto;
	}

.hidden-item {
	overflow: hidden;
}

	.hidden-item::after {
		align-items: center;
		color: red;
		content: 'hidden';
		background-color: rgba(156, 156, 156, 0.75);
		bottom: 0;
		display: flex;
		flex-flow: row wrap;
		font-weight: bold;
		justify-content: center;
		left: 0;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
	}

/*#endregion */
#mainContent {
	scroll-margin-top: 200px;
}
