#runtime-load-loading
{
	display: none;
}

.imageviewer
{
	display: none;
	position: fixed;
	background-color: rgba(0, 0, 0, .85);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 3000;
}

.imageviewer .imageviewer-close
{
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 5000;
}
.imageviewer .imageviewer-close:before
{
	content: "\f00d";
	font-family: "Font Awesome 5 Free";
	font-size: 2rem;
	font-weight: bold;
	color: #CCC;
	text-shadow: 0 0 7.5px rgba(0, 0, 0, .75);
	cursor: pointer;
	transition: color .25s, text-shadow .25s;
}
.imageviewer .imageviewer-close:hover:before
{
	color: white;
	text-shadow: 0 0 8.5px rgba(0, 0, 0, .85);
}

.image-container
{
	position: absolute;
	//background-color: white;
	//width: calc(100% - 20rem);
	width: 100%;
	height: 100%;
	//-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

.image-container .image-src
{
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 1rem 10rem;
	top: 0;
	left: 0;
}

.image-container .image-src.left
{
	left: -100%;
}

.image-container .image-src.right
{
	left: 100%;
}

.image-container .image-src img
{
	position: relative;
	max-width: 100%;
	max-height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	user-select: none;
	//-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

.imageviewer .controls.left,
.imageviewer .controls.right
{
	position: absolute;
	background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, .0));
	width: 15rem;
	height: 100%;
	top: 0;
	left: 0;
	font-size: 3.5rem;
	color: #AAA;
	cursor: pointer;
	transition: color .25s, background .25s;
}

.imageviewer .controls.right
{
	background: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, .0));
	left: auto;
	right: 0;
}

.imageviewer .controls.left:hover
{
	background: linear-gradient(to right, rgba(0, 0, 0, .75), rgba(0, 0, 0, .0));
	color: white;
}

.imageviewer .controls.right:hover
{
	background: linear-gradient(to left, rgba(0, 0, 0, .75), rgba(0, 0, 0, .0));
	color: white;
}

.imageviewer .controls.left i,
.imageviewer .controls.right i
{
	position: absolute;
	top: 50%;
	left: 2rem;
	transform: translateY(-50%);
	text-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

.imageviewer .controls.right i
{
	left: auto;
	right: 2rem;
}

/* Small-desktop Style */
@media (max-width: 1200px)
{
	.imageviewer .controls.left,
	.imageviewer .controls.right
	{
		width: 12.5rem;
	}
}

/* Non-desktop Style */
@media (max-width: 992px)
{
	.image-container .image-src
	{
		padding-left: 1rem;
		padding-right: 1rem;
	}
	
	.imageviewer .controls.left,
	.imageviewer .controls.right
	{
		width: 10rem;
	}
}

/* Mobile Style */
@media (max-width: 768px)
{
	.imageviewer .controls.left,
	.imageviewer .controls.right
	{
		background: transparent;
		width: 5rem;
		font-size: 2rem;
	}

	.imageviewer .controls.right
	{
		background: transparent;
	}

	.imageviewer .controls.left:hover
	{
		background: transparent;
	}

	.imageviewer .controls.right:hover
	{
		background: transparent;
	}

	.imageviewer .controls.left i,
	.imageviewer .controls.right i
	{
		left: 1rem;
	}

	.imageviewer .controls.right i
	{
		left: auto;
		right: 1rem;
	}
}