/* gallery.js */
.gallery {
	background: rgba(0, 0, 0, 0.7);
	display: none;
	height: 100%;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 999;

	.imgActive img {
		transform: translate(-50%, -50%);
		position: absolute;
		top: 50%;
		left: 50%;
		max-width: 100%;
		max-height: 90%;
	}

	.coverImgOverlay {
		bottom: 20px;
		height: 100px;
		left: 50%;
		overflow: hidden;
		position: absolute;
		width: 3000%;
		z-index: 1000;
		span {
			display: inline-block;
			height: 100px;
			margin: 5px;
			overflow: hidden;
			position: relative;
			width: 100px;
		}
		img {
			transition: 0.3s ease all;
			-webkit-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			position: absolute;
			top: 50%;
			left: 50%;
			max-height: 100%;
			min-width: 100%;
			opacity: 0.2;
			width: auto;
			&:hover {
				opacity: 1 !important;
			}
		}
	}

	img[data-gallery] {
		cursor: pointer;
	}

	.prev,
	.next,
	.close {
		transition: 0.3s ease all;
		display: inline-block;
		color: white;
		font-size: 6rem;
		opacity: 0.2;
		z-index: 1000;
		&:hover {
			cursor: pointer;
			opacity: 1;
		}
	}

	.prev,
	.next {
		transform: translateY(-50%);
		position: absolute;
		top: 50%;
	}

	.prev {
		left: 100px;
	}

	.next {
		right: 100px;
	}

	.close {
		font-size: 4rem;
		position: absolute;
		top: 20px;
		right: 20px;
	}

}