/* EDIT SPECIALLY FOR FMA */

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-icon {height: 100%;
	display: block;}

/*
@media only screen and (min-width: 1401px) {
	div.gallery .gallery-item,
	.masonry-sizer {
		width: 16.6666%;
	}
}

@media only screen and (min-width: 1181px) and (max-width: 1400px) {
	div.gallery .gallery-item,
	.masonry-sizer {
		width: 20%;
	}
}
 */

/* Max 3-up on this site: */

/*
@media only screen and (min-width: 1181px) {
	div.gallery .gallery-item,
	.masonry-sizer {
		width: 33.3333%;
	}
}

@media only screen and (min-width: 951px) and (max-width: 1180px) {
	div.gallery .gallery-item,
	.masonry-sizer {
		width: 33.3333%;
	}
}

@media only screen and (min-width: 646px) and (max-width: 950px) {
	div.gallery .gallery-item,
	.masonry-sizer {
		width: 33.3333%;
	}
}

@media only screen and (min-width: 490px) and (max-width: 645px) {
	div.gallery .gallery-item,
	.masonry-sizer {
		width: 50%;
	}
}
@media only screen and (min-width: 200px) and (max-width: 489px) {
	div.gallery .gallery-item,
	.masonry-sizer {
		width: 50%;
		/*
		pointer-events: none;
		*/
		/* disable click when small */
	}
}
 */

div.gallery figure .gallery-icon img {
/* width: 100%;
height: auto;  */
display: block; /* ensure spacing is fully controlled */
}

/*div.gallery img*/
div.gallery figure {
box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
padding: 0px;
margin: 0; /* override figure styling in base theme */
margin-bottom: 10px;
}

div.gallery figcaption {
/*display: none;*/
font-size: 0.7em;
height: 2.7em;
padding: 3px;
overflow: hidden;
}

/*html.no-touch div.gallery figure:hover figcaption {
background: #333;
color: white;
}*/
div.gallery figure .gallery-icon img {
	transition: opacity .5s;
	display: block; /* for other themes */
}

div.gallery figure:hover .gallery-icon {
background: black;
}

div.gallery figure:hover .gallery-icon img {
opacity: 0.2;
}

div.gallery {
/* the floated way:
margin-left: -12px;*/

/*margin-left: -6px;
margin-right: -6px;*/
margin-left: 2px;
margin-right: 2px;
text-align:center;
}

div.gallery:before, div.gallery:after { content: ""; display: table; }
div.gallery:after { clear: both; }
div.gallery { *zoom: 1; }
/* clearfix for gallery */

/*
@media only screen
and (max-width : 600px) {
div.gallery figure {
width: 33.3333%;
}
}

@media only screen
and (max-width : 480px) {
div.gallery figure {
width: 50%;
}
}
*/

/*@media only screen
and (max-width : 320px) {
div.gallery figure {
width: 100%;
}
}*/

.gallery-overlay {
	display: none;
}

body.overlaidgallery > .gallery-overlay {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999999;

}




/*.gallery-overlay .slider {
	visibility: hidden;
}*/

/*

If centering with translate then may need to apply:

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

... to stop blurriness.

*/

.gallery-detail {
	/* margin: 20% 12% 25%; */ /* no - all relative to width! vh too dodgy to use too */
	background: transparent;
	position: relative;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	padding: 15vh 0 0;


}

.gallery-detail .owl-carousel {
width: 100%;
height: 100%;
/* overflow: hidden; */ /* handled on inner div by jQuery script - remove from here to move buttons outside modal */
}



.gallery-detail .owl-carousel div.galleryimg,
.gallery-detail .owl-carousel div.galleryrest {

}

.gallery-detail .owl-carousel .owl-item .galleryrest {

	padding: 1em 1em 0;
	font-size: 1.1em;
	color: white;
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;


}



.gallery-detail .owl-carousel .owl-item .galleryrest h2 {
	font-size: 1.25em;

}

.gallery-detail,
.owl-carousel,
.owl-wrapper-outer,
.owl-wrapper,
.owl-item,
.owl-item > div {
	height: 100%;
}


.gallery-detail .owl-carousel .owl-item > div {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */



	-webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;

  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.gallery-detail .owl-carousel .owl-item > div .galleryimg {
	-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 100%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

	position: relative;
}

.gallery-detail .owl-carousel .owl-item > div .galleryimg img {
	width: 100%;
	height: 100%;
	position: absolute; /* needed to make 100% child of flex item work */
	object-fit: cover;
	font-family: 'object-fit: cover;' /* IE fix */
}


.gallery-detail .owl-carousel div.owl-prev:hover, .gallery-detail .owl-carousel div.owl-next:hover {
  color: white;
}

.gallery-detail .owl-carousel .owl-pagination {
/*	position: absolute;
height: auto;
top: 0;
left: 0;*/

margin-top: 2em;
}

.owl-page {
	display: inline-block;
	padding: 0 6px;
	color: #f7f7f7;
	text-align: center;
}

.owl-page.active,
.owl-page:hover {
	color: white;
	background: #555;
}

div.gallery figure {
	cursor: pointer;
}




.gallery-overlay .cross {

  cursor: pointer;
  font-family: FontAwesome;
  font-size: 21px;
  display: block;
  position: absolute;
  z-index: 10000;
  top: 80px;
right: 54px;
  text-align: right;
  margin-right: 5px;

  color: #7b7b7b;
}
@media only screen and (min-width: 671px) { /* on touch button doesn't work reliably when set */
.gallery-overlay .cross:hover {
  color: white;
}
}


.owl-pagination {
	/*display: none;*/
}



.owl-prev {

  margin-right: 20px;
  padding-right: 3px;
  left: 20px;
  left: -100px;
}


.owl-next {

  margin-left: 20px;
  padding-left: 3px;
  right: 20px;
  right: -100px;
}


.gallery-detail .owl-carousel div.owl-prev, .gallery-detail .owl-carousel div.owl-next {
  position: absolute;
  z-index: 10000;
  top: 50%;
  display: block;
  color: #888;
  width: 100px;
  height: 100px;
  margin-top: calc( -30px - 7.5vh ); /* allow for .gallery-detail 20px top pad */
  font-size: 60px;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;

  /* line-height: 40px; */ /* for chevron */
  line-height: 100px; /* for angle */
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}

div#pag {
text-align: center;
color: white;
padding: 1em 0;

}


.gallery-detail .owl-carousel {

		-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 100%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

	position: relative;

	/*padding: 0 120px;*/
	margin: 0 120px;
	width: calc( 100% - 240px );
box-sizing: border-box;
}

.owl-carousel .owl-wrapper-outer {
	position: absolute;
}

div.gallery-detail {

		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */



	-webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;

  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}


@media only screen and (min-width: 646px) {
	div.gallery figure {margin-bottom: 0;}
	div.gallery .gallery-item {position:relative; overflow:hidden;}
	div.gallery .gallery-item img {object-fit:cover; font-family: 'object-fit: cover;' /* IE fix */ max-width: none; max-height: none; width: 100%;  min-width: 100%; min-height: 100%;}
}




/* multiple galleries */

body.overlaidgallery > .gallery-overlay {
    display: none;
}

body.overlaidgallery > .gallery-overlay.active {
    display: block;
}




/* bigger mage space on small screens */

@media only screen and (max-width: 670px) {
	.gallery-detail .owl-carousel .owl-item .galleryrest {
		display: none;
	}
	.gallery-detail {
		padding: 0;

	}
	.gallery-detail .owl-carousel {
		margin: 0;
		width: 100%;
		/*z-index: -1;*/ /* portrait phone close button event trapped */ /* but then couldn't work the swipe or anything */
		z-index: 1;
	}
	.gallery-overlay .cross {
		top: 8px;
		right: 8px;
		font-size: 21px;
		width: 80px;
		height: 80px;

	}
	.gallery-detail .owl-carousel div.owl-prev,
	.gallery-detail .owl-carousel div.owl-next {
		margin-top: -16px;
		width: 20px;
		height: 32px;
		background: black;
		line-height: 30px;
		font-size: 30px;
	}
	.gallery-detail .owl-carousel div.owl-prev {
		left: 0;
	}
	.gallery-detail .owl-carousel div.owl-next {
		right: 0;
	}
}
/*
@media all and (orientation:portrait) {
  /* Styles for Portrait screen * /
  .gallery-detail .owl-carousel .owl-item > div .galleryimg img {
  	max-width: 100%;
  }
}
@media all and (orientation:landscape) {
  /* Styles for Landscape screen * /
  .gallery-detail .owl-carousel .owl-item > div .galleryimg img {
  	max-width: 90%;
  }
}
attempt to cause fresh layout when rotated but just made image smaller
*/