/**
 * closed
 */

	#gallery {
		position: relative;
		overflow-x: hidden;
		overflow-y: auto;
		font-weight: 200;
		height: 300px;
		margin: 0 -20px;
		width: 103.5%;
		width: calc(100% + 40px);
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
	}
	#gallery>* {
		display: inline-block;
		position: absolute;
		height: 100%;
	}
	#gallery>.scroll-button {
		top: 0; width: 25px;
		z-index: 1;
	}
	#gallery>.scroll-button:not(.disabled) {
		cursor: pointer;
	}
	#gallery>.scroll-button.disabled {
		opacity: 0.5;
	}
	#gallery>.prev::before, #gallery>.next::before {
		content: '〈';
		text-align: center;
		line-height: 300px;
		font-size: 50px;
		display: inline-block;
		position: absolute; right: 0;
	}
	#gallery>.next::before {
		content: '〉'; left: 0;
	}
	#gallery>.prev {
		left: 0; background: white; /* background: linear-gradient(to right, white, transparent); */
	}
	#gallery>.next {
		right: 0; background: white; /* background: linear-gradient(to left, white, transparent); */
	}
	#gallery>.carousel {
		left: 25px; right: 25px;
		margin: 0 -25px; padding: 25px;
		overflow: hidden;
	}
	#gallery>.carousel>.slide {
		position: relative;
		width: 100%; height: 100%;
		white-space: nowrap;
		margin-left: 0%;
		transition: margin-left .5s;
	}
	#gallery .thumb, #gallery figure {
		width: 33.333%; height: 100%;
		display: inline-block; overflow: hidden;
		position: absolute; right: 100%;
		margin: 0; border: 5px solid white;
		transition: none;
	}
	#gallery .active, #gallery .active ~ * {
		position: relative; right: auto;
	}
	#gallery .thumb {
		position: absolute;
	}
	#gallery .thumb img {
		width: auto; height: 100%;
		display: block; position: absolute;
		margin:auto;top:-9999px;bottom:-9999px;left:-9999px;right:-9999px;
	}
	#gallery figure:not(:target) {
		visibility: hidden;
	}
	@supports(pointer-events: none) { #gallery figure:not(:target) {
		visibility: visible;
		pointer-events: none;
	} }
	#gallery figure .next, #gallery figure .prev {
		text-decoration: none;
	}
	#gallery figure figcaption {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;
		padding: 8px;
		text-align: center;
		white-space: normal;
		color: white;
		transition: opacity .5s;
	}
	#gallery figure figcaption .title {
		margin: 1em 0;
	}
	#gallery figure:not(:target) figcaption {
		background: hsla(0, 0%, 0%, 0.5);
		opacity: 0;
		display: table;
	}
	#gallery .thumb:hover + figure:not(:target) figcaption,
	#gallery .thumb:focus + figure:not(:target) figcaption {
		opacity: 1;
	}
	#gallery figure:not(:target) figcaption .title {
		display: table-cell; vertical-align: middle;
	}
	#gallery figcaption .description {
		display: none;
	}


/**
 * open
 */

	#gallery figure:target {
		position: fixed;
		top: 5%; bottom: 0;
		left: 10%; right: 10%;
		height: auto; width: auto;
		z-index: 2003;
		border: none;
		overflow: unset; /* safari */
	}
	#gallery figure:target .img {
		top: 0; bottom: 150px;
		left: 0; right: 0;
		position: absolute;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain; /* or cover or auto 100%; */
	}
	#gallery figure:target figcaption {
		top: auto; height: 150px;
		user-select: text;
		-moz-user-select: text;
		-webkit-user-select: text;
	}
	@supports (display: flex) {
		#gallery figure:target {
			display: flex; flex-direction: column;
		}
		#gallery figure:target .img {
			flex: 1; position: static;
		}
		#gallery figure:target figcaption {
			top: auto; position: static;
			height: auto; max-height: 40%; overflow-y: auto;
		}
	}
	#gallery figure:target figcaption .description {
		display: block;
	}
	#gallery figure:target .prev::after, #gallery figure:target .next::after {
		content: '';
		display: block; position: fixed;
		width: 25%; height: 50%;
		right: 0; top: 25%;
		z-index: 2004;
	}
	#gallery figure:target .prev::after {
		left: 0; right: auto;
	}
	#gallery figure:target .prev::before, #gallery figure:target .next::before, #gallery figure:target ~ .close::after {
		content: '〉';
		display: block; position: fixed;
		height: 1em; top: 50%; top: calc(50% - 1em /2); line-height: 1em;
		text-align: center; font-size: 80px;
		width: .5em; right: 4%; right: calc(5% - .5em /2);
		color: white;
	}
	#gallery figure:target .prev::before {
		content: '〈';
		left: 4%; left: calc(5% - .5em /2); right: auto;
	}
	_::-webkit-full-page-media, _:future, :root #gallery figure:target .prev::before { margin-left: -.5em; } /* safari */
	_::-webkit-full-page-media, _:future, :root #gallery figure:target .next::before { margin-right: -.2em; }
	#gallery figure:nth-child(2) .prev, #gallery figure:nth-last-child(2) .next {
		display: none;
	}
	#gallery figure:target ~ .close {
		position: fixed;
		top:0;bottom:0;left:0;right:0;
		z-index: 2002;
		background: hsla(0, 100%, 0%, 0.87);
	}
	#gallery figure:target ~ .close::after {
		content: ''; font-size: 100px;
		top: 4%; top: calc(5% - .5em /2);
	}
	#gallery figure:target + .thumb,
	#gallery figure:target + * + figure {
		margin-left: 33.333%;
	}

	@media (max-width: 550px) {
		#gallery .thumb, #gallery figure {
			width: 50%;
		}
		#gallery figure:target + .thumb,
		#gallery figure:target + * + figure {
			margin-left: 50%;
		}
	}