/* Page: Photo album */

html.has-fullscreen-album { overflow: hidden; }

.album { height: 100vh; overflow: hidden; position: relative; }
.album:focus { outline: none; }
.album-fullscreen { background: #000; color: #FFF; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 999999; }
.album-scroll-snap { background: #000; height: 100vh; }
.album-photo-viewport { bottom: 64px; left: 0; position: absolute; right: 0; top: 32px; }
.album-photo-container { bottom: 0; left: 0; position: absolute; right: 0; top: 0; }
.album-photo { background-size: contain; background-position: center; background-repeat: no-repeat; bottom: 0; height: 100%; position: absolute; top: 0; width: 100%; }
.album-photo-current { left: 0; right: 0; }
.album-photo-prev { right: 100%; }
.album-photo-next { left: 100%; }
.album-thumbnails-container { bottom: 0; font: 0/0 a; height: 64px; left: 0; overflow: hidden; position: absolute; right: 0; }
.album-thumbnails { overflow: auto; text-align: center; white-space: nowrap; }
.album-thumbnail-link { background-position: center; background-repeat: no-repeat; background-size: 90%; box-sizing: border-box; display: inline-block; height: 64px; opacity: 0.95; transition: background-size 0.25s, opacity 0.25s; width: 64px; }
.album-thumbnail-link:hover { background-size: 95%; opacity: 1; }
.album-thumbnail-current { background-size: 100% !important; border: 2px solid #09609C; opacity: 1}
.album-tools { height: 32px; left: 0; line-height: 32px; overflow: hidden; position: absolute; right: 0; text-align: center; top: 0; }
.album-index { float: left; padding-left: 1em; }

.album-buttons { float: right; padding-right: 1ex; }
.album-button { background-position: center; background-repeat: no-repeat; background-size: 20px 20px; box-sizing: content-box; display: inline-block; height: 20px; padding: 6px; vertical-align: top; width: 20px; }
.album-button.album-image-download { background-image: url("data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path d='M 11,9 h-6 v20 h22 v-20 h-6' stroke='black' fill='none' stroke-width='2' /><path d='M16,2 v15' stroke='black' fill='none' stroke-width='4' /><path d='M10,16 l6,7 6,-8' stroke='none' fill='black' /></svg>"); }
.album-fullscreen .album-button.album-image-download { background-image: url("data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path d='M 11,9 h-6 v20 h22 v-20 h-6' stroke='white' fill='none' stroke-width='2' /><path d='M16,2 v15' stroke='white' fill='none' stroke-width='4' /><path d='M10,16 l6,7 6,-8' stroke='none' fill='white' /></svg>"); }
.album-button.album-toggle-fullscreen { background-image: url("data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' height='16' width='20' stroke='black' fill='none' stroke-width='2' /><rect x='11' y='5' height='16' width='20' stroke='black' fill='none' stroke-width='2' /></svg>"); }
.album-fullscreen .album-button.album-toggle-fullscreen { background-image: url("data:image/svg+xml,<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><path d='M 5,5 l 22,22 m 0,-22 l -22,22' stroke='white' fill='none' stroke-width='4' /></svg>"); }

.album .album-link, .album-thumbnail-scroll { bottom: 0; cursor: pointer; opacity: 0; position: absolute; text-align: center; top: 0; transition: opacity 0.25s; z-index: 2; }
.album .album-link { width: 25%; }
.album-thumbnail-scroll { width: 32px; }
.album-link:hover, .album-thumbnail-scroll:hover { opacity: 1; }
.album-link-next, .album-thumbnail-scroll-right { background-image: linear-gradient(to left, #000, rgba(0,0,0,0)); right: 0; }
.album-link-prev, .album-thumbnail-scroll-left { background-image: linear-gradient(to right, #000, rgba(0,0,0,0)); left: 0; }
.album-link::after, .album-thumbnail-scroll::after { background-position: center; background-repeat: no-repeat; background-size: 25%; bottom: 0; content: ''; height: 100%; left: 0; opacity: 0.5; position: absolute; right: 0; top: 0; width: 100%; }
.album-link-next::after, .album-thumbnail-scroll-right::after { background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 32' xmlns='http://www.w3.org/2000/svg'><path d='M3,2 l10,14 l-10,14' stroke='white' fill='none' stroke-width='4' /></svg>"); }
.album-link-prev::after, .album-thumbnail-scroll-left::after { background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 32' xmlns='http://www.w3.org/2000/svg'><path d='M13,2 l-10,14 l10,14' stroke='white' fill='none' stroke-width='4' /></svg>"); }

@media screen and (min-width: 1025px)
{
	.album.album-contained
	{
		height: auto;
	}
	.album-contained .album-photo-viewport
	{
		bottom: auto;
		left: auto;
		margin-top: 32px;
		position: relative;
		right: auto;
		top: auto;
	}
	.album-contained .album-photo-container
	{
		bottom: auto;
		left: auto;
		padding-bottom: 56.25%;
		position: relative;
		right: auto;
		top: auto;
		width: 100%;
	}
	.album-contained .album-thumbnails-container
	{
		height: auto;
		position: static;
	}
	.album-contained .album-thumbnails
	{
		text-align: center;
		white-space: normal;
	}
	.album-contained .album-thumbnail-scroll
	{
		display: none;
	}
	.album-contained .album-thumbnail-link
	{
		height: 128px;
		width: 128px;
	}
}

/* Teaser */

.gallery-thumbnails { margin-right: -12px; }
.gallery-thumbnails::after { clear: both; content: ''; display: table; }
.gallery-thumbnail-link { border: 1px solid #DDDDDD; display: inline-block; margin: 0 12px 12px 0; padding: 5px; }
.gallery-thumbnail-link .gallery-thumbnail { display: block; }

/* Widget: Gallery */

.widget_mobzgallery .scroller
{
	height: 252px;
	position: relative;
	width: 336px;
}

.widget_mobzgallery .scroller .photo-link
{
	display: block;
	height: 252px;
	left: 0;
	line-height: 252px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 336px;
}

.widget_mobzgallery .scroller .photo
{
	display: inline-block;
	vertical-align: middle;
}

.widget_mobzgallery .album-link
{
	display: block;
	margin: 1ex 0;
	text-align: center;
}