/* The work below, CSSBox, is released under the Creative Commons
	 Attribution-ShareAlike 4.0 license and is available on
	 https://github.com/TheLastProject/CSSBox. You are not required to add
	 additional credit to your website, just leave the above text in this file */
.gallery div.cssbox {
	display: inline-block;
}
.gallery span.cssbox_full {
	z-index: 999;
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.8);
	top: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	cursor: default;
	transition: opacity 0.5s linear;
}
.gallery span.cssbox_full .tabwrap,
.gallery span.cssbox_full img {
	position: fixed;
	background-color: white;
	margin: 0;
	padding: 0;
	max-height: 90%;
	max-width: 90%;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 20px black;
}
.gallery span.cssbox_full .tabwrap {
	max-width: 85%;
}
.gallery a.cssbox_close,
.gallery a.cssbox_prev,
.gallery a.cssbox_next {
	z-index: 999;
	position: fixed;
	text-decoration: none;
	visibility: hidden;
	color: #fff;
	text-shadow: 0px 0px 5px #000;
	font-size: 36px;
}
.gallery a.cssbox_close:hover,
.gallery a.cssbox_prev:hover,
.gallery a.cssbox_next:hover {
	color: #000;
	text-shadow: 0px 0px 5px #fff;
}
.gallery a.cssbox_close {
	top: 1%;
	right: 1%
}
.gallery.lightbox a.cssbox_close {
	width: 50px;
	height: 50px;
	text-align: right;
}
.gallery a.cssbox_close::after {
	content: '\00d7';
}
.gallery a.cssbox_prev,
.gallery a.cssbox_next {
	top: 50%;
	transform: translate(0%, -50%);
}
.gallery a.cssbox_prev {
	left: 5%;
}
.gallery a.cssbox_next {
	right: 5%;
}
.gallery a.cssbox_prev .icon,
.gallery a.cssbox_next .icon {
	fill: #fff;
	stroke: #fff;
	stroke-width: 15%;
}
.gallery a:target ~ a.cssbox_close,
.gallery a:target ~ a.cssbox_prev,
.gallery a:target ~ a.cssbox_next {
	visibility: visible;
}
.gallery a:target > span.cssbox_full {
	visibility: visible;
	opacity: 1;
	pointer-events: initial;
}
.gallery a:target > .wrap + span.cssbox_full {
	visibility: visible;
	opacity: 1;
	pointer-events: initial;
}
/* This is the end of CSSBox */

aside .gallery {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: repeat(auto-fill, minmax(23%, 1fr));
	grid-auto-rows: 66px;
	grid-auto-flow: dense;
	margin: 1em 0;
}
aside .gallery img.thumb {
	width: 100%;
	max-width: 66px;
	height: 100%;
	object-fit: cover;
	border: 1px solid #00000066;
	border-radius: 5px;
	opacity: .75;
}
aside .tabgallery {
	display: inline-block;
	margin: 1em 0;
	border-radius: 10px;
	box-shadow: 0 0 3px #00000066;
}
aside .gallery img.thumb:hover,
aside .tabgallery:hover {
	display: inline-block;
	box-shadow: 0 0 3px #00000066;
	scale: 1.1;
	opacity: 1;
	transition: all 0.15s ease-out;
}
aside .tabgallery .icon {
	width: 66px;
	height: 66px;
	fill: var(--variantColor2);
}
aside .tabgallery:hover .icon {
	fill: var(--variantColor1);
}
aside .gallery > div {
	display: flex;
	justify-content: center;
	align-items: center;
}

aside .gallery .cssbox_full figcaption {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 5px;
	background-color: rgba(0,0,0,0.8);
	text-align: center;
	font-style: normal;
}
aside .gallery .cssbox_full figcaption p {
	margin: 0;
	color: white;
}
aside figcaption {
	padding: 0 10px 10px 10px;
}
aside figure.lightbox div.cssbox,
aside figure.lightbox div.cssbox a:first-child,
aside figure.lightbox div.cssbox a div.wrap {
	display: contents;
}