.imgal-container {
	line-height: 0;
	-webkit-column-count: 3;
	-webkit-column-gap: 0;
	-moz-column-count: 3;
	-moz-column-gap: 0;
	column-count: 3;
	column-gap: 15px
}
.imgal-img {
	width: 100%;
	height: auto;
	transition: filter .2s;
	cursor: zoom-in !important;
    margin-bottom: 15px;
}
.imgal-img:hover {
	-webkit-filter: opacity(80%);
	filter: opacity(80%);
	cursor: pointer
}
.imgal-modal {
	margin: auto;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(255,255,255,.9);
	color: #000;
	vertical-align: middle;
	height: 100vh;
	width: 100vw;
	z-index: 9999;
	padding: calc(3vw + 20px) 3vw;
} 
#imgal-modal-close {
	display: inline;
	font-size: 22px;
	position: absolute;
	top: 20px;
	right: 20px;
    line-height:1;
	cursor: pointer
}
.imgal-modal-img {
	width: 100%;
	height: 100%;
	object-fit: contain
}
body.active-modal{
    overflow:hidden; 
}
@media only screen and (max-width: 768px) {
	.imgal-container {
		line-height: 0;
		-webkit-column-count: 2;
		-webkit-column-gap: 0;
		-moz-column-count: 2;
		-moz-column-gap: 0;
		column-count: 2;
	column-gap: 15px
	}
}
@media only screen and (min-width: 768px) {
	.imgal-container {
		line-height: 0;
		-webkit-column-count: 3;
		-webkit-column-gap: 0;
		-moz-column-count: 3;
		-moz-column-gap: 0;
		column-count: 3;
	column-gap: 15px
	}
}
@media only screen and (min-width: 992px) {
	.imgal-container {
		line-height: 0;
		-webkit-column-count: 3;
		-webkit-column-gap: 0;
		-moz-column-count: 3;
		-moz-column-gap: 0;
		column-count: 3;
	column-gap: 15px
	}
}
@media only screen and (min-width: 1200px) {
	.imgal-container {
		line-height: 0;
		-webkit-column-count: 3;
		-webkit-column-gap: 0;
		-moz-column-count: 3;
		-moz-column-gap: 0;
		column-count: 3;
	column-gap: 15px
	}
}