@charset "UTF-8";
/* CSS Document */

/* Soft Ground gallery.
   Keeps the YoxView look used by the other photography galleries (dark
   translucent backdrop, bordered image frame, count + caption bar, the
   left.png / right.png arrows) and adds a thumbnail filmstrip that fades
   away while the viewer is idle. */

/* ---------- lightbox shell ---------- */

.sg-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	display: none;
	font-family: Helvetica, "Helvetica Neue", Arial, Sans-Serif;
	font-size: 10pt;
	text-align: left;
}
.sg-lightbox.is-open {
	display: block;
	outline: none;
}
.sg-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: 0.8;
	filter: alpha(opacity=80);
}
html.sg-open,
html.sg-open body {
	overflow: hidden;
}

/* ---------- image and caption ---------- */

.sg-stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	padding: 24px 24px 82px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.sg-figure {
	max-width: 100%;
}
.sg-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -16px 0 0 -16px;
	z-index: 4;
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 320ms ease;
	transition: opacity 320ms ease;
}
.sg-loading.is-loading {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.sg-loading img {
	display: block;
	border: none;
}
.sg-frame {
	border: solid 1px #999;
	background: #191919 no-repeat center center;
	background-size: cover;
	line-height: 0;
}
.sg-photo {
	display: block;
	max-width: calc(100vw - 50px);
	max-height: calc(var(--sg-h, 100vh) - 242px);
	opacity: 0;
	cursor: pointer;
}
.sg-photo.is-visible {
	opacity: 1;
	-webkit-transition: opacity 320ms ease;
	transition: opacity 320ms ease;
}
.sg-caption {
	background: #000000;
	background: rgba(0, 0, 0, 0.5);
	color: #FFFFFF;
	max-height: 120px;
	overflow: auto;
	border: solid 1px #999;
	border-top: none;
}
.sg-count {
	display: block;
	float: left;
	width: 55px;
	font-size: 0.8em;
	text-align: center;
	padding-top: 9px;
	color: #bbb;
}
.sg-info {
	margin: 0 55px;
	font-size: 10pt;
	padding: 8px 0;
	line-height: 1.35;
}
.sg-title {
	color: #FFFFFF;
}
.sg-detail {
	margin-top: 0.85em;
	color: #bbb;
	font-size: 9pt;
	line-height: 1.45;
	padding-right: 10px;
}

/* ---------- chrome that fades while the viewer is idle ---------- */

.sg-chrome {
	opacity: 0;
	filter: alpha(opacity=0);
	-webkit-transition: opacity 320ms ease;
	transition: opacity 320ms ease;
	visibility: hidden;
}
.sg-lightbox.is-awake .sg-chrome {
	opacity: 1;
	filter: alpha(opacity=100);
	visibility: visible;
}
.sg-lightbox.is-awake .sg-arrow {
	opacity: 0.6;
	filter: alpha(opacity=60);
}
.sg-lightbox.is-awake .sg-arrow:hover,
.sg-lightbox.is-awake .sg-arrow:focus {
	opacity: 1;
	filter: alpha(opacity=100);
}

/* ---------- arrows ---------- */

.sg-arrow {
	position: absolute;
	top: 50%;
	margin-top: -32px;
	z-index: 3;
	display: block;
	/* content-box, so the padding widens the hit area around the 61x44
	   graphic instead of squeezing it - browsers default buttons to
	   border-box, which crops the arrow against the window edge. */
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	width: 61px;
	height: 44px;
	padding: 10px 8px;
	outline: none;
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
}
.sg-arrow img {
	display: block;
	width: 61px;
	height: 44px;
	border: none;
}
.sg-prev {
	left: 6px;
}
.sg-next {
	right: 6px;
}

/* ---------- close control ---------- */

.sg-close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 4;
	background: #000000;
	background: rgba(0, 0, 0, 0.8);
	-moz-border-radius: 0 0 0 15px;
	-webkit-border-radius: 0 0 0 15px;
	border-radius: 0 0 0 15px;
	width: 60px;
	padding: 9px 0 12px;
	border: none;
	text-align: center;
	font-family: Arial, Sans-Serif;
	font-size: 0.8em;
	color: #FFFFFF;
	text-decoration: none;
	outline: none;
	cursor: pointer;
}
.sg-close span {
	display: block;
	width: 18px;
	height: 18px;
	margin: 0 auto 3px;
	background: url(../images/sprites.png) no-repeat 0 -59px;
}

/* ---------- filmstrip ---------- */

.sg-filmstrip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	background: #000000;
	background: rgba(0, 0, 0, 0.5);
}
.sg-filmstrip-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	padding: 8px;
}
.sg-filmstrip-track {
	display: inline-block;
	min-width: 100%;
	text-align: center;
}
.sg-filmstrip a {
	display: inline-block;
	margin: 0 4px;
	outline: none;
	opacity: 0.45;
	filter: alpha(opacity=45);
	-webkit-transition: opacity 250ms ease;
	transition: opacity 250ms ease;
}
.sg-filmstrip a:hover,
.sg-filmstrip a:focus {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.sg-filmstrip a.selected {
	opacity: 1;
	filter: alpha(opacity=100);
}
.sg-filmstrip a img {
	display: block;
	width: 56px;
	height: 56px;
	border: solid 1px #ffffff;
}

/* ---------- tablets and phones ---------- */

@media (max-width: 940px) {
	body.soft-ground #wrapper {
		width: auto;
		max-width: 912px;
		padding: 0 12px;
	}
	body.soft-ground #nav li {
		padding-left: 0;
		padding-right: 15px;
	}
	body.soft-ground #nav img {
		max-width: 100%;
		height: auto;
	}
	body.soft-ground .thumbnails {
		text-align: center;
	}
}

/* The header is a row of fixed-size images held apart by a 300px spacer on
   the logo. Below 880px that row no longer fits, and because the site sets
   line-height: 1 the wrapped rows overlap. Let the nav flow instead. */
@media (max-width: 884px) {
	body.soft-ground #nav {
		line-height: 2.2;
	}
	body.soft-ground #nav li {
		display: inline-block;
		vertical-align: middle;
	}
	body.soft-ground .logo {
		margin-right: 0;
	}
}

@media (max-width: 760px) {
	.sg-stage {
		padding: 12px 10px 70px;
	}
	.sg-photo {
		max-width: calc(100vw - 22px);
		max-height: calc(var(--sg-h, 100vh) - 202px);
	}
	.sg-caption {
		max-height: 118px;
	}
	.sg-count {
		width: 44px;
		padding-top: 8px;
	}
	.sg-info {
		margin: 0 44px 0 44px;
	}
	.sg-prev {
		left: 0;
	}
	.sg-next {
		right: 0;
	}
	.sg-filmstrip-scroll {
		padding: 6px;
	}
	.sg-filmstrip a {
		margin: 0 3px;
	}
	.sg-filmstrip a img {
		width: 44px;
		height: 44px;
	}
}