/*----------------------------------------------------------------------------------------------------*\
	I M A G E L I G H B O X

		layout imagelightbox
		style imagelightbox
		style imagelightbox-links
\*----------------------------------------------------------------------------------------------------*/





/*----------------------------------------------------------------------------------------------------*\
	layout imagelightbox
\*----------------------------------------------------------------------------------------------------*/


/* IMAGE */
#imagelightbox {
	cursor: pointer;
	position: fixed;
	z-index: 10000;

	-ms-touch-action: none;
	touch-action: none;

	-webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
	box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 ); /* 50 */
}


/* ACTIVITY INDICATION */
/*
#imagelightbox-loading,
#imagelightbox-loading div {
	border-radius: 50%;
}
#imagelightbox-loading {
	width: 2.5em;
	height: 2.5em;
	background-color: #444;
	background-color: rgba( 0, 0, 0, .5 );
	position: fixed;
	z-index: 10003;
	top: 50%;
	left: 50%;
	padding: 0.625em;
	margin: -1.25em 0 0 -1.25em;

	-webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 );
	box-shadow: 0 0 2.5em rgba( 0, 0, 0, .75 );
}
#imagelightbox-loading div {
	width: 1.25em;
	height: 1.25em;
	background-color: #fff;

	-webkit-animation: imagelightbox-loading .5s ease infinite;
	animation: imagelightbox-loading .5s ease infinite;
}
@-webkit-keyframes imagelightbox-loading {
	from { opacity: .5;	-webkit-transform: scale( .75 ); }
	50%	 { opacity: 1;	-webkit-transform: scale( 1 ); }
	to	 { opacity: .5;	-webkit-transform: scale( .75 ); }
}
@keyframes imagelightbox-loading {
	from { opacity: .5;	transform: scale( .75 ); }
	50%	 { opacity: 1;	transform: scale( 1 ); }
	to	 { opacity: .5;	transform: scale( .75 ); }
}
*/


/* ACTIVITY INDICATION */
/* fluxus */
#imagelightbox-loading,
#imagelightbox-loading div {
	border-radius: 50%;
}

#imagelightbox-loading {
	position: fixed;
	z-index: 10003;
	top: 50%;
	left: 50%;
}

#imagelightbox-loading div {
	position: relative;
	left: -3em;
	top: -3em;
	border: 2px solid #fff;
	opacity: 0.3;
	border-right: 5px solid rgba(0,0,0,0);
	border-radius: 50px;
	width: 5em;
	height: 5em;
	margin: 0 auto;
	-moz-animation: spin 2s infinite linear;
	-webkit-animation: spin 2s infinite linear;
}

@-webkit-keyframes spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}


/* OVERLAY */
#imagelightbox-overlay {
	position: fixed;
	z-index: 9998;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}


/* "CLOSE" BUTTON */
#imagelightbox-close
{
	width: 2.5em; /* 40 */
	height: 2.5em; /* 40 */
	text-align: left;
	border-radius: 50%;
	position: fixed;
	z-index: 10002;
	top: 2.5em; /* 40 */
	right: 2.5em; /* 40 */

	border: none;
	cursor: pointer;

	-webkit-transition: color .3s ease;
	transition: color .3s ease;
}
#imagelightbox-close:before,
#imagelightbox-close:after {
	width: 2px;
	content: '';
	position: absolute;
	top: 20%;
	bottom: 20%;
	left: 50%;
	margin-left: -1px;
}
#imagelightbox-close:before {
	-webkit-transform: rotate( 45deg );
	-ms-transform: rotate( 45deg );
	transform: rotate( 45deg );
}
#imagelightbox-close:after {
	-webkit-transform: rotate( -45deg );
	-ms-transform: rotate( -45deg );
	transform: rotate( -45deg );
}


/* CAPTION */
#imagelightbox-caption {
	text-align: center;
	position: fixed;
	z-index: 10001;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.625em; /* 10 */
}


/* NAVIGATION */
#imagelightbox-nav {
	border-radius: 20px;
	position: fixed;
	z-index: 10001;
	left: 50%;
	bottom: 3.75em; /* 60 */
	padding: 0.313em; /* 5 */

	-webkit-transform: translateX( -50% );
	-ms-transform: translateX( -50% );
	transform: translateX( -50% );
}
#imagelightbox-nav button {
	width: 1em; /* 20 */
	height: 1em; /* 20 */
	border-radius: 50%;
	display: inline-block;
	margin: 0 0.313em; /* 5 */
}


/* ARROWS */
.imagelightbox-arrow {
	width: 3.75em; /* 60 */
	height: 7.5em; /* 120 */
	vertical-align: middle;
	display: none;
	position: fixed;
	z-index: 10001;
	top: 50%;
	margin-top: -3.75em; /* 60 */

	border: none;
	cursor: pointer;
}
.imagelightbox-arrow-left { left: 2.5em; } /* 40 */
.imagelightbox-arrow-right { right: 2.5em; } /* 40 */
.imagelightbox-arrow:before {
	width: 0;
	height: 0;
	border: 1em solid transparent;
	content: '';
	display: inline-block;
	margin-bottom: -0.125em; /* 2 */
}
.imagelightbox-arrow-left:before {
	border-left: none;
	margin-left: -0.313em; /* 5 */
}
.imagelightbox-arrow-right:before {
	border-right: none;
	margin-right: -0.313em; /* 5 */
}


/* fade-in for all elements */
#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption,
#imagelightbox-nav,
.imagelightbox-arrow {
	-webkit-animation: fade-in .25s linear;
	animation: fade-in .25s linear;
}
@-webkit-keyframes fade-in {
	from	{ opacity: 0; }
	to		{ opacity: 1; }
}
@keyframes fade-in {
	from	{ opacity: 0; }
	to		{ opacity: 1; }
}


/* responsove layout */
@media only screen and (max-width: 41.250em) { /* 660 */
	#container { width: 100%; }
	#imagelightbox-close {
		top: 1.25em; /* 20 */
		right: 1.25em; /* 20 */
	}
	#imagelightbox-nav { bottom: 1.25em; } /* 20 */

	.imagelightbox-arrow
	{
		width: 2.5em; /* 40 */
		height: 3.75em; /* 60 */
		margin-top: -2.75em; /* 30 */
	}
	.imagelightbox-arrow-left { left: 1.25em; } /* 20 */
	.imagelightbox-arrow-right { right: 1.25em; } /* 20 */
}

@media only screen and (max-width: 20em) { /* 320 */
	.imagelightbox-arrow-left { left: 0; }
	.imagelightbox-arrow-right { right: 0; }
}





/*----------------------------------------------------------------------------------------------------*\
	style imagelightbox
\*----------------------------------------------------------------------------------------------------*/

/* hide navigation */
#imagelightbox-nav { display: none; }

/* colors */
#imagelightbox-overlay { 
	background: #6c7a82; 
	opacity: 0.95;
	}
#imagelightbox-close {
	opacity: 0.3;
	background-color: rgba(0, 0, 0, 0);
}
#imagelightbox-close:hover,
#imagelightbox-close:focus {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.5);
}
#imagelightbox-close:before,
#imagelightbox-close:after {
	background-color: #fff;
}
#imagelightbox-caption { 
	color: #fff;
	background: rgba(0,0,0,0.5); 
}
#imagelightbox-nav {
	background-color: rgba( 0, 0, 0, .5 );
}
#imagelightbox-nav button {
	background-color: transparent;
	border: 1px solid #fff;
}
#imagelightbox-nav button.active {
	background-color: #fff;
}
.imagelightbox-arrow {
	opacity: 0.3;
	background-color: rgba(0, 0, 0, 0);
}
.imagelightbox-arrow:hover,
.imagelightbox-arrow:focus,
.imagelightbox-arrow:active {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.5);
}
.imagelightbox-arrow-left:before { border-right-color: #fff; }
.imagelightbox-arrow-right:before { border-left-color: #fff; }





/*----------------------------------------------------------------------------------------------------*\
	style imagelightbox-links
\*----------------------------------------------------------------------------------------------------*/


/* in an normal gallery */
.gallery-item { opacity: 0.8; }
.gallery-item:hover { opacity: 1; }


/* all imgs in galleries and content with imagelightbox-functionality */
a[data-imagelightbox] {
	display: block;
	position: relative;
}
a[data-imagelightbox]::after {
	display: none;
}
.gallery a[data-imagelightbox]::after,
.imagestack a[data-imagelightbox]::after,
.wp-caption a[data-imagelightbox]::after {
	display: block;
}
a[data-imagelightbox]::after {
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	padding: 50% 50% 5% 5%;
	width: auto;
	height: auto;
	line-height: 0;

	background: -moz-linear-gradient(45deg,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(0,0,0,0.5)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(45deg,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(45deg,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(45deg,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: linear-gradient(45deg,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
a[data-imagelightbox]::after {
	opacity: 0;
	content: url(img/zoom-white.svg);
}
a[data-imagelightbox]:hover::after {
	opacity: 1;
	content: url(img/zoom-white.svg);
}