:root {
	--left_nav_width: 230px;
	--left_nav_size: 230px;
}
#left-nav {
	width: var(--left_nav_width);
	background: #f9f9f9;
	position: fixed;
	left: 0px;
	top: 0px;
	height: 100%;
	text-align: center;

	transition: all 0.4s ease;
	overflow: auto;
}
.left-nav-container {
	margin: 8px;
}
ul.left-links {
	display: inline-block;
	text-align: left;
	list-style: none;
	padding: 0px;
	width: calc(var(--left_nav_width) * 0.75);
}
ul.left-links ul {
	padding-left: 20px;
}
#left-nav li {
	display: flex;
	align-items: center;
}
#left-nav svg {
	fill: #888;
	stroke: #888;
}
#left-nav a {
	color: #888;
	text-decoration: none;
}
#left-nav li.active svg {
	fill: #000;
	stroke: #000;
}
#left-nav li.active a {
	color: #000;
}
#left-nav li.hover_link:hover svg {
	fill: #000;
	stroke: #000;
}
#left-nav li:hover a {
	color: #000;
}
#left-nav li.blog_link a {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-size: 16px;
}
#left-nav svg {
	vertical-align: middle;
}
#left-nav li img {
	width: 16px;
	height: 16px;
}
#left-nav li.gap {
	height: 16px;
}
.cookie-notice {
	font-size: 13px;
	display: inline-block;
	color: #888;
}
img {
	max-width: 90%;
}
img.top-nav-logo {
	max-height: 1.5em;
}
#main-wrapper {
	padding-left: var(--left_nav_size);
	transition: all 0.4s ease;
	margin: 1em;
	max-width: 800px;
}
body {
	background: #efefef;
	margin: 0px;
	font-family: Merriweather;
	font-size: 18px;
}
h2 {
	font-size: 24px;
}
.logo {
	text-align: center;
}
.logo img {
	border-radius: 20px;
}
#top-nav {
	display: none;
	transition: all 0.4s ease;
	background: transparent;
}
#hamburger {
	display: none;
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	width: 1.5em;
	height: 1.5em;
	display: block;
}
.hamburger_label {
	display: inline-block;
	border: 1px solid #000000;
	border-radius: 0.25em;
	cursor: pointer;
	background: white;
}
#left-collapse-button {
	display: none;
	cursor: pointer;
}
.contact-form {
	font-family: Merriweather;
	font-size: 18px;
}
.required {
	color: red;
}
.photo-left {
	float: left;
	max-width: 300px;
	width: calc(50% - 20px);
	padding: 0px 20px 0px 20px;
}
.photo-right {
	float: right;
	max-width: 300px;
	width: calc(50% - 20px);
	padding: 0px 20px 0px 20px;
}
.photo-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 0px 20px 0px 20px;
}
.imageSlideshow {
	left: 10%;
	width: 80%;
	aspect-ratio: 4 / 3;
	position: relative;
	overflow: hidden;
}
.imageSlideshow > ul {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}
.imageSlideshow > ul > li {
	position: absolute;
	left: 0px;
	width: 100%;
	height: 100%;
	display: none;
}
.imageSlideshow p {
	position: absolute;
	width: 100%;
	text-align: center;
	margin: 0px;
	bottom: 0px;
	background-color: rgba(0,0,0,0.5);
	color: white;
	font-style: italic;
}
@keyframes left-move-in {
	0% {transform: translate(-100%);}
	100% {transform: translate(0);}
}
@keyframes left-move-out {
	0% {transform: translate(0);}
	100% {transform: translate(-100%);}
}
@keyframes right-move-in {
	0% {transform: translate(100%);}
	100% {transform: translate(0);}
}
@keyframes right-move-out {
	0% {transform: translate(0);}
	100% {transform: translate(100%);}
}
.imageSlideshow > ul > li.current {
	display: block;
}
.imageSlideshow > ul > li.current-next {
	display: block;
	animation: right-move-in 0.5s forwards ease-in-out;
}
.imageSlideshow > ul > li.current-prev {
	display: block;
	animation: left-move-in 0.5s forwards ease-in-out;
}
.imageSlideshow > ul > li.old-next {
	display: block;
	animation: left-move-out 0.5s forwards ease-in-out;
}
.imageSlideshow > ul > li.old-prev {
	display: block;
	animation: right-move-out 0.5s forwards ease-in-out;
}
.imageSlideshow img {
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: contain
}
.imageSlideshow .prev, .imageSlideshow .next, .imageSlideshow .close {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: black;
	transition: 0.5s ease;
	user-select: none;
	background-color: rgba(239,239,239,0.3);
}
.imageSlideshow .next {
	right: 0px;
}
.imageSlideshow .prev:hover, .imageSlideshow .next:hover, .imageSlideshow .close:hover {
	background-color: rgba(0,0,0,0.8);
	color: white;
}
.imageSlideshow .close svg {
	display: block;
}
.imageSlideshow .close:hover svg {
	fill: #fff;
	stroke: #fff;
}
.imageSlideshow .close {
	top: 0%;
	right: 0%;
	margin-top: 0px;
	font-size: 25px;
	padding: 10px;
}

.fullscreen-slideshow {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background: rgb(0,0,0,0.5);
	display: flex;
	justify-content: center;
}
.fullscreen-slideshow div {
	background: black;
	height: 80%;
	width: auto;
	max-width: 100%;
	top: 10%;
	left: 0%;
	aspect-ratio: 4 / 3;
}

.imageGallery {
	width: 100%;
}
.imageGallery > ul {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
.imageGallery > ul > li {
	display: inline-block;
	width: 156px;
	margin: 2px 2px;
	aspect-ratio: 1/1;
}
.imageGallery p {
	display: none;
}
.imageGallery img {
	cursor: pointer;
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
	max-width: 100%;
}
.imageGallery a {
	display: none;
}

h2 a {
	color: black;
	text-decoration: none;
}
h2 a:hover {
	text-decoration: underline;
}

.blog_comments {
	display: flex;
	flex-flow: row wrap;
}

.blog_comments p {
	flex-grow: 1;
}

.blog_comments p a:hover {
	text-decoration: underline;
}

.leave_comment {
	padding-left: 30px;
	color: #9d51fb;
	font-variant: small-caps;
}

.leave_comment a::before {
	content: url(/icons/chatbubble-ellipses.svg);
	margin-right: 5px;
}

.leave_comment a {
	color: #9d51fb;
	text-decoration: none;
	margin-right: 10px;
}

div.leave_a_comment::before {
	content: url(/icons/chatbubble-ellipses.svg);
	margin-right: 5px;
}

div.leave_a_comment {
	margin: 0px;
	font-size: 21.06px;
	font-weight: bold;
	color: #9d51fb;
}

.comment_count {
	text-align: right;
}

.comment_count a::before {
	content: url(/icons/chatbubbles.svg);
	margin-right: 5px;
}

.comment_count a {
	color: #9f51fb;
	text-decoration: none;
}

div.comment {
	padding: 5px;
	margin: 10px;
	border-radius: 20px;
	background: white;
}
div.comment div {
	display: flex;
	flex-flow: row wrap;
}
div.comment div .author::before {
	content: url('icons/chatbubble.svg');
	color: #9d51fb;
	display: inline-block;
	margin-right: 5px;
}
div.comment div .author .purple {
	color: #9d51fb;
}
div.comment div .timestamp {
	color: #9d51fb;
}
div.comment div p {
	flex-grow: 1;
	margin: 0px;
}
div.comment div p.author {
	text-align: left;
	margin-right: 10px;
}
div.comment div p.timestamp {
	text-align: right;
}
div.comment p {
	margin: 18px;
}

div.review {
	background-color: #f9f9f9;
	padding: 10px;
	margin: 20px 0px;
	border-radius: 20px;
	display: grid;
	grid-template-rows: auto;
}

div.review.revieweven {
	grid-template-columns: 5% 65% 5% 25%;
	grid-template-areas:
		"author author author picture"
		"openquote text closequote picture"
		"item item item picture";
}

div.review.reviewodd {
	grid-template-columns: 25% 5% 65% 5%;
	grid-template-areas:
		"picture author author author"
		"picture openquote text closequote"
		"picture item item item";
}

div.review .picture {
	grid-area: picture;
	align-self: center;
	padding: 0px 15px;
}

div.review img {
	max-width: 100%;
}

div.review .item {
	grid-area: item;
	font-style: italic;
}

div.review .author {
	grid-area: author;
	font-style: italic;
	margin-bottom: 5px;
	color: #9d51fb;
}

div.review .openquote {
	grid-area: openquote;
	font-size: 40px;
	font-weight: bold;
	color: #9d51fb;
	margin: 0px 10px 0px 0px;
}

div.review .closequote {
	grid-area: closequote;
	font-size: 40px;
	font-weight: bold;
	color: #9d51fb;
	align-self: flex-end;
	margin: 0px 10px 0px 0px;
}

div.review .text {
	grid-area: text;
}

div.grid-wrapper {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(326px, 1fr));
	grid-template-rows: masonry;
}

div.grid-wrapper iframe {
	width: 100%;
}

@media (max-width: 700px ) {
	#left-nav {
		left: calc(-1 * var(--left_nav_width));
	}
	#top-nav {
		display: block;
		position: fixed;
		left: 0px;
		top: 0px;
	}
	#hamburger:checked + #left-nav {
		left: 0px;
		box-shadow: 4px 0px 40px #ccc;
		z-index: 1;
	}
	#left-collapse-button {
		display: inline;
		left: 0px;
		top: 50vh;
		position: absolute;
	}
	:root {
		--left_nav_size: 0px;
	}

	div.review.revieweven {
		grid-template-columns: min-content 2fr 1fr min-content;
		grid-template-areas:
			"author author picture picture"
			"openquote text text closequote";
	}

	div.review.reviewodd {
		grid-template-columns: min-content 1fr 2fr min-content;
		grid-template-areas:
			"picture picture author author"
			"openquote text text closequote";
	}

	.imageSlideshow {
		width: 100%;
		left: 0%;
	}
}

table {
	border: 1px solid black;
	border-collapse: collapse;
}
table tr td,th {
	border: 1px solid black;
	padding: 10px;
}
th {
	border: 1px solid #9d51fb;
	background: #9d51fb;
	color: white;
}