.image-viewer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(10, 10, 10, 0.8);
	z-index: 10;
	text-align: center;
	
	display: none;
	width: 100%;
    height: 100%;
}
.image-viewer.active {
	display: table;
}
.image-viewer .vertical-center {
	display: table-cell;
    vertical-align: middle;
}
.image-viewer .image {
	box-shadow: 0 0 5px #000;
}
.image-viewer .image-container {
	position: relative;
}
.image-viewer .left,
.image-viewer .right {
	position: absolute;
	top: 50%;
}
.image-viewer .left {
	left: 6%;
}
.image-viewer .right {
	right: 6%;
}
.image-viewer .close {
	position: absolute;
	top: 1%;
	right: 6%;
}
.image-viewer .left,
.image-viewer .right,
.image-viewer .close {
	color: #fff;
	font-size: 25px;
	text-shadow: 0 0 3px black;
	cursor: pointer;
}
[image-viewer] {
	cursor: pointer;
}