/* base layout */

#swipe-gallery {
	width: 100%;
	height: 80vh;
}
.clickable {
	cursor: pointer;
}

/* swipejs internal */

.swipe {
	overflow: hidden;
	visibility: hidden;
	position: relative;
}
.swipe-wrap {
	overflow: hidden;
	position: relative;
}
.swipe-wrap > div {
	float: left;
	width: 100%;
	position: relative;
}
#swipe-gallery {
	width: 100%;
	/* height is set in js */
	position: relative;
}

/* headings on top of images */

#swipe-gallery div > h1,
#swipe-gallery div > h2 {
	color: #fff;
	position: absolute;
	left: 1em;
}
#swipe-gallery div > h1 {
	bottom: 1.5em;
}
#swipe-gallery div > h2 {
	bottom: 0.75em;
}

/* back/forward click areas */

#swipe-gallery .region {
	position: absolute;
	top: 0;
	height: 100%;
	width: 40%;
	/* swiping on the region elements should make the gallery elements move */
	pointer-events: none;
}
#swipe-gallery .region.region-back {
	left: 0;
}
#swipe-gallery .region.region-forward {
	right: 0;
}

/* autosize the images */

#swipe-gallery div {
	height: 100%;
	background-size: cover;
	background-attachment: fixed;
}
.swipe-wrap img {
	max-height: 100%;
	max-width: 100%;
	display: block;
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	-webkit-user-select: none;
	user-select: none;
}
.swipe-wrap img,
.swipe-wrap .full-size-image {
	/* background to show before the image has finished loading */
	background-color: #e4e4e4;
}

/* progress */

.progress {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}
.progress .progress-inner {
	height: 1.55em;
	background: #eee;
	-webkit-flex: 1;
	flex: 1;
	border: 10px solid #fff;
	border-left-width: 4px;
	border-right-width: 4px;
	min-width: 20px;
}
.progress .progress-inner.selected {
	background: #666;
}