/********************************************GALLERY***********************/
#gallery {
	padding-top: 5vh;
	min-height: 100%;
}

#gallery div {
	border-radius: 5px;
}

#selectContainer {
	position: sticky;
	width: 80%;
	left: 10%;
	height: 10rem;
	background: rgb(var(--textBG));
	border: inset 3px rgb(var(--accentCol));
	overflow-x: scroll;
	/* overflow-x: scroll; */
}

#galSelector {
	transition: 0.5s;
}

#galSelector .label {
	content: "Galleries";
	position: fixed;
	top: 3vh;
	left: 10%;
	padding: 0.1rem;
	border: solid 2px black;
	background-color: rgb(var(--accentCol));
	z-index: 3;
	cursor: pointer;
}

.thumbnail {
	aspect-ratio: 1 / 1;
	border: solid 2px black;
	background-color: rgba(var(--accentCol), 0.6);
	cursor: pointer;
	transition: 0.5s;
	position: relative;
}

.selector > .thumbnail {
	height: 90%;
	box-sizing: border-box;

	display: inline-block;
	overflow: visible;
	margin: 0 2rem;
	margin-bottom: 0;
	/* margin-top: ; */

	/* transform: rotate(-90deg); */
	transform: scaleY(1);

	box-shadow: 0 0 1rem 0.5rem #111;
}

.galTitle {
	z-index: 10;
	position: absolute;
	width: calc(100% + 2rem);
	top: 7.5%;
	left: -1rem;
	padding: 0;
	margin: 0;
	text-align: center;
	white-space: pre-wrap;
	/* font-size: calc(var(--height) * 0.2); */
}

.small .galTitle {
	/* font-size: 0.5rem; */
}

.thumbnail img {
	max-height: 95%;
	max-width: 95%;
	position: absolute;
	margin: 0;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	box-shadow: 0 0 0.5rem;
}

.galDescript {
	position: absolute;
	top: 80%;
	left: calc(50% - 8rem);
	width: 16rem;

	padding: 1rem;
	margin: 0;

	background: green;
	border: solid 2px black;
	vertical-align: middle;
	text-align: center;
	white-space: normal;
}

.galViewer.live {
	/* background: green; */
	transform: scale(1);
	z-index: 1;
}

.galViewer.stby {
	transform: scale(0.1);
	opacity: 0;
	z-index: -1;
}

.galViewer.leaving .image {
	transform: scale(1.5);
	z-index: -1;
	filter: blur(2rem);
	opacity: 0;
}

.galViewer {
	--xAdjust: 0;
	min-height: calc(100% - 15vh);
	width: 100%;

	position: absolute;
	top: 15vh;
	bottom: 0;
	padding: 5vh 5vw 20vh 5vw;

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	gap: 2rem;

	box-sizing: border-box;
	transform-origin: top;
	transform: scale(1);
	transition: all 1s !important;
	filter: blur(0);

	background: rgba(var(--textBG), 0);
	border: inset -10px rgb(var(--accentCol));
	overflow-x: scroll;
}

.galViewer.selector::before {
	content: " ";
	width: calc(calc(calc(9vh + 4rem) * var(--thumbsCount)) + 72vw);
	height: 1rem;
	left: 0;
	position: absolute;
}

.image {
	transition: 0.5s;
}

.selector .image.thumbnail {
	height: 90%;
	max-height: 15rem;
	display: inline-block;
	position: absolute;
	left: calc(
		50% + calc(calc(var(--index) - var(--xAdjust)) * calc(9vh + 4rem))
	);
	transform: translateX(-50%) scale(0.6);
}

.image.thumbnail {
	height: 15rem;
	max-height: 50vmin;
}

.selector .image.thumbnail:hover {
	scale: 1;
}

.selector .image.selected {
	transform: translateX(-50%) scale(1);
}

.image.view {
	border: none;
	/* background-color: rgba(var(--accentCol),1); */
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	width: 100%;
	height: 100%;

	background-color: #a888;

	z-index: 10;
}

.image.view img {
	max-width: 60vmin;
	max-height: 60vmin;
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
}

.thumbnail:hover {
	scale: 1.2;
}

#bigPic {
	background: none;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-height: 100%;
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	transform-origin: top;
	transform: translate(-50%, -50%);
	transition: filter 1s;
	display: none;
	opacity: 0;
	cursor: initial;
	filter: blur(2rem);
}

#bigPic:hover {
	scale: 1;
}

#bigPic #close {
	right: 8vw;
	top: 8vh;
}

#bigPic img {
	max-width: 80%;
	max-height: 60%;
	top: 40%;
}

#bigPic .naviBut {
	position: absolute;
	top: calc(50% - 0.5rem);

	width: 1rem;
	height: 1rem;
	padding: 1rem;

	border-radius: 100%;
	border: solid 2px black;
	background: #92370b;
	cursor: pointer;
	box-shadow: 0 0 1rem;

	transition: 0.3s;
}

#bigPic #prev {
	left: 1rem;
}

#bigPic #next {
	right: 1rem;
}

.naviBut.disable {
	filter: saturate(0);
	scale: 0;
}

.selector {
	--height: 10rem;
	/* display: block; */
	margin: 0;
	/* top: 4rem; */
	/* width: 100%; */
	/* left: 90%; */
	/* height: 100%; */
	/* overflow: hidden; */
	white-space: nowrap;
	/* transform: translate(0, 0) rotate(90deg); */
	/* overflow: scroll; */
	/* background: red; */
	position: sticky;
	width: 80%;
	left: 10%;
	top: 0;
	height: var(--height);
	max-height: 10vh;
	background: rgba(var(--textBG), 1);
	border: inset 1px rgb(var(--accentCol));
	overflow-x: scroll;
	padding: 0;
	padding-top: calc(var(--height) * 0.1);

	transition: height 1s;
	z-index: 3;

	flex-wrap: nowrap;
}

.selector.small {
	--height: 10vh;
}

.selector.small .gallery {
	transform: scale(0.7);
}

.selector.small:hover {
	--height: 10rem;
}

.selector.small:hover .gallery {
	transform: scale(0.8);
}

.selector.small .gallery.selected {
	transform: scale(1);
}

.galViewer.selector {
	position: absolute;
	top: calc(100% - 15vh);
	/* top: auto; */
	/* bottom: 5vh; */
	z-index: 10;
	min-height: 0;
}