/* -- Kai Pakotai Cafe --
Unique styles for image gallery, Gallery.html. */

img {
	vertical-align: middle;
}

	/*Alter the standard margin responses for smoother transitions */
@media (min-width: 1000px) {
	main.gallery {
		width: 80%;
	}
}
@media (max-width: 1000px) {
	main.gallery {
		width: 90%;
	}
}

	/* Position the image container (needed to position the left and right arrows) */
.container {
	position: relative;
	height: 100%;
}

	/* fill the slide container */
.displayImage {
	width: 100%;
}

	/* Hide the images by default */
.slideshow {
	position: relative;
	display: none;
	margin: 0 auto;
}

.slideshow img {
	border: 3px solid #A18FD1;
}

	/* Add a pointer when hovering over the thumbnail images */
.cursor {
	cursor: pointer;
}

	/* Style of next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 45%;
	width: auto;
	padding: 16px;
	font-weight: bold;
	font-size: 20px;
	text-shadow: 2px 0 3px #DFFFF0, 0 2px 3px #DFFFF0, -2px 0 3px #DFFFF0, 0 -2px 3px #DFFFF0;
}

.prev {
	left: 0px;
	border-radius: 0 3px 3px 0;
}

.next {
	right: 0px;
	border-radius: 3px 0 0 3px;
}

	/* green background for the next and previous buttons */
.prev:hover, .next:hover {
	background-color: rgba(223, 255, 240, .8);
	border: 3px solid #A18FD1;
	
}

	/* Slide counter */
.slideshow .counter {
	font-size: 14px;
	font-weight: bold;
	padding: 0 0.5em;
	display: inline-block;
	line-height: 2;
	position: relative;
	top: 31px;
	left: 45%;
	background-color: rgba(223, 255, 240, .8);
}

	/* Attribution captions*/
.caption.gallery {
	position: absolute;
	clear: both;
	bottom: 0;
}

/* Slideshow caption */
.caption-container {
	text-align: center;
	padding: 2px 16px;
	margin: 0 auto;
	clear: both;
}

	/* Style the image thumbnails */
.thumbnail {
	opacity: 1;
	border: 2px solid #A18FD1;
}

	/* Hover effect for thumbnails */
.active, .thumbnail:hover {
	opacity: .6;
}

	/*flexbox grid */

.flexContainer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	clear: both;
	width: auto;
	margin-top: 5em;
}

	/* Responsive sizes */

	/* largest size */
@media (min-width: 1250px) {
	
	.slideshow, .caption-container {
		width: 34vw;
	}
	
	.flexContainer li {
		flex-basis: 250px;
	}
}

	/* scale components for small desktops or tablets */
@media (min-width: 750px) and (max-width: 1250px) {
	
	.slideshow, .caption-container {
		width: calc(34vw + (1250px - 100vw));
	}
	
	.flexContainer li {
		flex-basis: 200px;
	}
}

	/* stop the slideshow growing at the page size */
@media (max-width: 940px) {
	.slideshow, .caption-container {
		width: 100%;
	}
}

	/*Shrink the thumbnails more to prevent them snapping to full width anyway */
@media (max-width: 750px) {
	.flexContainer li {
		flex-basis: 150px;
	}
}