.gallery
{
	margin-bottom: 20px;
	width: 100%;
	/*background: hsl(200, 10%, 50%);*/

	text-align: center;
}

.gallery .main
{
	background: black;

	padding: 10px 0px;
	box-sizing: border-box;

	display: flex;
	place-content: center;
	align-items: center;
}

.galleryMainImage
{
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.galleryArrow
{
	font-size: 32pt;
	transition : 0.7s;
	cursor: pointer;
	opacity: 0.0;

	position: absolute;
	top: 0px;
	bottom : 0px;
	width: 20%;
	/*background: #111;*/
	color : #aaa;

	display: flex;
	align-items: center;
}

.galleryArrow div
{
	display: table-cell;
	vertical-align: middle;
}

.galleryArrow.left
{
	left: 10px;
	justify-content: flex-start;
}

.galleryArrow.right
{
	right: 10px;
	justify-content: flex-end;
}

.galleryArrow:hover
{
	opacity: 1.0;
}

.scrollWrap
{
	position: relative;
	width: 100%;
	overflow-y: hidden;
	overflow-x: hidden;

	background: #222;
	text-align: left;

	touch-action: none;
}

.scrollContainer
{
	height: 100%;
	display: inline-block;
	/* For a real WTF of the day try removing the following and opening a gallery on a overlay */
	display: inline-flex;

	white-space: nowrap;
}

.galleryPreviewImage
{
	cursor: pointer;
	padding: 10px;
	height: 100%;
	max-height: calc(100% - 20px);
	object-fit: contain
}

.galleryPreviewImage.selected
{
	background: #444;
}