.panels {
	width: 172vh;
	height: 100%;
	overflow: hidden;
	display: flex;
	position: relative;
	z-index: 1;
}


.panel-content:after {
	background-image:
		url("../images/overlay.png"),
		linear-gradient(45deg, rgba(114, 97, 147, 1) 25%, rgba(227, 123, 124, 1) 50%, rgba(255, 228, 180, 1));
	background-size:
		128px 128px,
		auto;
	z-index: 9999;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 44vh;
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	line-height: 25.3vh;
	opacity: 1;
	font-size: 3.5vh;
	color: rgba(255, 255, 255, 0.875);
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	letter-spacing: -0.05em;
}

.panels:hover .panel-content:after {
	background-image: none;
	z-index: 10000;
	content: ' ';
	opacity: 0;
	display: none;
}

.panel {
	flex: 1;
	cursor: pointer;
	background-position: center center;
	background-size: cover;
	width: 100%;
}
.panel-content {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	cursor: pointer;
	background: inherit;
	transform: translateX(0%) scale(1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.panel:before,
.panel-content:before {
	content: ' ';
	display: block;
	width: 100%;
	height: 100%;
}
.panel:before {
	background: rgba(255, 255, 255, 0.3);
	position: relative;
	z-index: 99;
	opacity: 0;
	transition: opacity 0.3s linear;
	content: 'Перейти \203A';
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;

	font-size: 3.5vh;
	color: rgba(0, 0, 0, 0.875);
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 25.3vh;
}

.panel:before:hover {
	color:red;
}

#wrong:after {
	background-image:
			url("../images/overlay.png"),
			linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(255, 228, 180, 0.25)),
			linear-gradient(90deg, rgba(42, 65, 102, 0.3) 50%, rgba(42, 65, 102, 0.3)),
			url("../images/gallery/prev/pic1.jpg");
	background-size:
			128px 128px,
			auto,
			auto,
			100% 100%;
	content: 'Wrong Photography';
 }

#basal:after {
	background-image:
			url("../images/overlay.png"),
			linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(255, 228, 180, 0.25)),
			linear-gradient(90deg, rgba(42, 65, 102, 0.3) 50%, rgba(42, 65, 102, 0.3)),
			url("../images/gallery/prev/pic2.jpg");
	background-size:
			128px 128px,
			auto,
			auto,
			100% 100%;
	content: 'Basal Group';
}

#tortuga:after {
	background-image:
			url("../images/overlay.png"),
			linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(255, 228, 180, 0.25)),
			linear-gradient(90deg, rgba(42, 65, 102, 0.3) 50%, rgba(42, 65, 102, 0.3)),
			url("../images/gallery/prev/pic3.jpg");
	background-size:
			128px 128px,
			auto,
			auto,
			100% 100%;
	content: 'Tortuga Бар';
}

#sma:after {
	background-image:
			url("../images/overlay.png"),
			linear-gradient(45deg, rgba(114, 97, 147, 0.25) 25%, rgba(255, 228, 180, 0.25)),
			linear-gradient(90deg, rgba(42, 65, 102, 0.3) 50%, rgba(42, 65, 102, 0.3)),
			url("../images/gallery/prev/pic4.jpg");
	background-size:
			128px 128px,
			auto,
			auto,
			100% 100%;
	content: 'ООО «СМА»';
}


/* The non-CSS Var hover state */
.panel:hover:before,
.panel:focus:before {
	opacity: 1;
}
.panel:hover .panel-content,
.panel:focus .panel-content {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 98;
}

/* If CSS Vars are supported... */
@supports ( (--panel-support: 0) ) {
	.panel {
		--i: 0;
		--percent: calc( ((var(--i) - 1) / var(--items)) * 100 );
	}
	/*
	A simple LESS loop to set up the CSS vars.

	Output will be something like
	.panels--1 { --items: 1; }
	.panth:nth-child(1) { --i: 1; }
	.panels--2 { --items: 2; }
	.panth:nth-child(2) { --i: 2; }

	..up to the total number provided.
	*/
	.panel:nth-last-child(n + 1),
	.panel:nth-last-child(n + 1) ~ .panel {
		--items: 1;
	}
	.panel:nth-child( 1) {
		--i: 1;
	}
	.panel:nth-last-child(n + 2),
	.panel:nth-last-child(n + 2) ~ .panel {
		--items: 2;
	}
	.panel:nth-child( 2) {
		--i: 2;
	}
	.panel:nth-last-child(n + 3),
	.panel:nth-last-child(n + 3) ~ .panel {
		--items: 3;
	}
	.panel:nth-child( 3) {
		--i: 3;
	}
	.panel:nth-last-child(n + 4),
	.panel:nth-last-child(n + 4) ~ .panel {
		--items: 4;
	}
	.panel:nth-child( 4) {
		--i: 4;
	}
	.panel:nth-last-child(n + 5),
	.panel:nth-last-child(n + 5) ~ .panel {
		--items: 5;
	}
	.panel:nth-child( 5) {
		--i: 5;
	}
	.panel:nth-last-child(n + 6),
	.panel:nth-last-child(n + 6) ~ .panel {
		--items: 6;
	}
	.panel:nth-child( 6) {
		--i: 6;
	}
	.panel:nth-last-child(n + 7),
	.panel:nth-last-child(n + 7) ~ .panel {
		--items: 7;
	}
	.panel:nth-child( 7) {
		--i: 7;
	}
	.panel-content {
		position: absolute;
		top: 0;
		left: 0;
		z-index: auto;
		transform: translateX(calc( var(--percent) * 1% ));
	}
	.panel-content:before {
		background: inherit;
		transform: translateX(-50%) translateX(calc(100% / var(--items) * 0.5 ));
	}
	.panel-content,
	.panel-content:before {
		transition: transform 0.4s cubic-bezier(0.44, 0, 0, 1);
	}
	/* When there's an active hover on the container. This will apply to all panels in the container, unless overridden */
	.panels:hover .panel-content {
		z-index: auto;
		transform: translateX(0%);
	}
	/* Panels after the hovered panel */
	.panel:hover ~ .panel .panel-content {
		transform: translateX(100%);
	}
	/* The active panel */
	.panel:hover .panel-content,
	.panel:focus .panel-content {
		transform: translateX(0%);
	}
	.panel:hover .panel-content:before,
	.panel:focus .panel-content:before {
		transform: translateX(0%) scale(1);
	}
	.panel:focus .panel-content,
	.panel:focus .panel-content:before {
		transition: none !important;
	}
}
/*
//////////////////////////////////////
STYLISTIC CHOICES
////////////////////////////////////
*/
.panels {
	margin: 0;
	min-height: 480px;
}

/* Set up the background images */

.panel:nth-child( 4) {
	background-image: url( '../images/gallery/pic4_1.jpg' );
	background-size: auto 100%;
}
.panel:nth-child( 3) {
	background-image: url( '../images/gallery/pic3_1.jpg' );
	background-size: auto 100%;
}
.panel:nth-child( 2) {
	background-image: url( '../images/gallery/pic2_1.jpg' );
	background-size: auto 100%;
}
.panel:nth-child( 1) {
	background-image: url( '../images/gallery/pic1_1.jpg' );
	background-size: auto 100%;
}