html:has(.viewgallary:not(:checked))
{
	overflow-y: hidden;
}
content .wrapper {
	padding: 0;
	z-index: 999;
	position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

input:checked + .wrapper {
	display: none;
}

.wrapper > span {
	display: block;
	height: 100%;
	width: 100%;
	background-color: rgba(0,10,20,.95);
/*	backdrop-filter: blur(5px); */
	animation: semiappear .5s ease-out forwards;
}
input:checked + .wrapper > span {
	background-color: rgba(0,10,20,0);
}
@keyframes semiappear {
   from {background-color: rgba(0,10,20,0)}
   to {background-color: rgba(0,10,20,.95)}
}	
	
.wrapper > div {
	position: absolute;
	left: -100%;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: left .5s ease-out;
	padding: 20px 0;
	padding: 5vmin 5px;
}
.wrapper > input:checked + div {
	left: 0;
}
.wrapper > input:checked ~ input + div {
	left: 100%;
}

.wrapper > img,
.wrapper > div > label {
	position: absolute;
	top: 50%;
	left: 0;
}
.wrapper > img:last-of-type,	
.wrapper > div > div + label {
	left: auto;
	right: 0;
}
.wrapper > div > label {	
	cursor: pointer;
	display: block;
	z-index: 1;
	width: 104px;
	height: 104px;
	margin-top: -52px;
}
.wrapper > img {
	box-sizing: content-box;
	width: 40px;
	height: 40px;
    padding: 14px;
    margin-top: -52px;
    opacity: .8;
	background: #0023324a padding-box;
	border-radius: 50%;
	border: 22px solid transparent;
	backdrop-filter: opacity(0);
}
.wrapper > label {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 80px;
    height: 80px;
    font: 50px/80px arial,san-serif;
    border-radius: 50%;
	background: rgba(0, 35, 50, .66);
    text-align: center;
	color: #fff;
	opacity: .8;
    cursor: pointer;
    transform: scale(.8);
    transition: transform .5s .1s;
}
.wrapper > label:hover {
	opacity: 1;
	transform: scale(1) rotate(180deg);
}
.wrapper > label:active {
	transform: scale(1.2) rotate(180deg);
}
@media (max-width: 800px) {
	.wrapper > img {
		width: 5vw;
		height: 5vw;
		margin-top: -6.5vw;
		padding: 1.5vw;
		border: 2.5vw solid transparent;
	}
	.wrapper > label {	
		right: 1.5vw;
		width: 10vw;
		height: 10vw;
		font: 6.25vw/10vw arial,san-serif;
	}
	.wrapper > div > label {	
		width: 13vw;
		height: 13vw;
		margin-top: -6.5vw;
	}	
}
@media (max-width: 500px) {
	.wrapper > img {
		width: 25px;
		height: 25px;
		margin-top: -32px;
		padding: 7px;
		border: 11px solid transparent;
	}
	.wrapper > label {	
		right: 5px;
		width: 50px;
		height: 50px;
		font: 40px/50px arial,san-serif;
	}
	.wrapper > div > label {	
		width: 60px;
		height: 60px;
		margin-top: -33px;
	}	
}
.wrapper > div > div {
	max-width: 100%;
	max-height: 100%;
	height: 100%;
}	
.wrapper > div > div img {
	display: block;
	object-fit: contain;
	width: 100%;
	height: 100%;
}
.wrapper > div > div > div {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 20px;
	padding: 2px 8px;
	border-radius: 5px;
	color: #fff;
	font: italic .8rem arial,san-serif;
	background: rgb(0, 35, 50);
	opacity: .5;
	transition: opacity 1s 2s;
}
.wrapper > input:checked + div > div > div {
	opacity: 0;
}
.wrapper > div > div:hover > div {
	transition-delay: .3s;
	opacity: .5 !important;
}
.wrapper > input:first-of-type:checked ~ img:first-of-type,
.wrapper > input:last-of-type:checked ~ img:last-of-type {
	opacity: .1;
}	

.thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.thumbs img {
	display: block;
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: cover;
}	
.thumbs label {
	min-width: 180px;
	max-width: 400px;
	cursor: pointer;
	position: relative;
}
.thumbs label:hover:after, .gal label:hover:after, .pane:hover:after {
	content: '';
	background: #fffb url('/img/icons.svg#arrows') center / 20px no-repeat;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	position: absolute;
	top: 15px;
	right: 15px;
}
.pane:hover:after {
	background-color: #dddb;
}
.slider.js .pane:after {
	display: none;
}	
.gal {
	text-align: center;
}
.gal label {
	display: inline-block;
    cursor: pointer;
    position: relative;
}
.gal .pic {
    margin-bottom: .5em;
}