/***
 *	Gallery Style
 *	2021-01-24
 */

.gallery { width: 100%; }

	.gallery-item { text-align: center; }
		.m-gutter .gallery-item { margin-bottom: var( --gap ) }

		.gallery-item figure {}
			.m-gutter .gallery-item figure { margin-bottom: var( --gap ) }

			.gallery-item a { display: block }

				.gallery-item img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

				.gallery-item figcaption { margin-top: 8px !important; text-align: center; }


/***
 *	Columns
 */
.gallery.cols { list-style: none; padding: 0 }
	.gallery.cols .gallery-item { text-align: center }


/***
 *	Mansory
 */

/*
.gallery.masonry { display: block; column-gap: 0; width: 100% }
	.gallery.masonry.\-gutter { column-gap: var( --gap ) }

*/
	.gallery.masonry.m-gutter {}
		.gallery.masonry.m-gutter { column-gap: var( --gap ); }

	/* https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element */
	.gallery.masonry .masonry-item {
		width: 100%;
		-webkit-column-break-inside: avoid; /* Chrome, Safari */
		page-break-inside: avoid;           /* Theoretically FF 20+ */
		break-inside: avoid-column;         /* IE 11 */
	}


	.gallery.masonry.masonry-item figure { margin-top: 0 !important; }
		.gallery.masonry.m-gutter .masonry-item:not( :first-child ) figure { margin-top: var( --gap ); }

	.gallery.masonry.masonry-1 { column-count: 1 }
	.gallery.masonry.masonry-2 { column-count: 2 }
	.gallery.masonry.masonry-3 { column-count: 3 }
	.gallery.masonry.masonry-4 { column-count: 4 }
	.gallery.masonry.masonry-5 { column-count: 5 }
	.gallery.masonry.masonry-6 { column-count: 6 }



/***
 *	Slideshow
 */

.slideshow.gallery { background-color: rgba( 0,0,0,.5 ); }

.slideshow-item { transition: all .3s ease-out }
	.slideshow.m-gutter .slideshow-item { padding: calc( var( --gap ) / 2 ); margin-bottom: 0; }

	.slideshow .owl-stage-outer { background: #ccc; }

	.slideshow-item {}
	.slideshow-item > a {}
	.slideshow-item > a > img { display: block; height: 100%; width: 100%; object-fit: contain; max-height: 80vh; }
	.slideshow-item > figcaption { text-align: center; font-style: normal }
	.slideshow-item > figcaption span { display: block; font-size: 1.5rem; padding-top: .5rem; font-weight: bold }

.gallery.slideshow > .owl-prev,
.gallery.slideshow > .owl-next { position: absolute; top: 50%; margin-top: -25px; width: 50px; height: 50px; background: url( nav.png ) no-repeat 50% 50%; text-indent: -999em }
	.gallery.slideshow > .owl-prev { left: 0 }
	.gallery.slideshow > .owl-next { right: 0; transform: scaleX( -1 ) }

.slideshow-nav-before { position: relative; padding-top: 40px }
	.slideshow-nav-before > .owl-nav,
	.slideshow-nav-before > .owl-dots { position: absolute; top: 12px; height: 32px; width: 100% }




/* < 1200 : dt */
@media only screen and ( max-width: 1199px ){
	.gallery.masonry.masonry-1-dt { column-count: 1 }
	.gallery.masonry.masonry-2-dt { column-count: 2 }
	.gallery.masonry.masonry-3-dt { column-count: 3 }
	.gallery.masonry.masonry-4-dt { column-count: 4 }
	.gallery.masonry.masonry-5-dt { column-count: 5 }
	.gallery.masonry.masonry-6-dt { column-count: 6 }
}


/* < 899 : tb */
@media only screen and ( max-width: 899px ){
	.gallery.masonry.masonry-1-tb { column-count: 1 }
	.gallery.masonry.masonry-2-tb { column-count: 2 }
	.gallery.masonry.masonry-3-tb { column-count: 3 }
	.gallery.masonry.masonry-4-tb { column-count: 4 }
	.gallery.masonry.masonry-5-tb { column-count: 5 }
	.gallery.masonry.masonry-6-tb { column-count: 6 }
}


/* < 599 : mb */
@media only screen and ( max-width: 599px ){
	.gallery.masonry.masonry-1-mb { column-count: 1 }
	.gallery.masonry.masonry-2-mb { column-count: 2 }
	.gallery.masonry.masonry-3-mb { column-count: 3 }
	.gallery.masonry.masonry-4-mb { column-count: 4 }
	.gallery.masonry.masonry-5-mb { column-count: 5 }
	.gallery.masonry.masonry-6-mb { column-count: 6 }
}


/* < 360 : ss */
@media only screen and ( max-width: 359px ){
	.gallery.masonry.masonry-1-ss { column-count: 1 }
	.gallery.masonry.masonry-2-ss { column-count: 2 }
	.gallery.masonry.masonry-3-ss { column-count: 3 }
	.gallery.masonry.masonry-4-ss { column-count: 4 }
	.gallery.masonry.masonry-5-ss { column-count: 5 }
	.gallery.masonry.masonry-6-ss { column-count: 6 }
}