.gallery-container{ position:relative; top:0; height:auto; margin:0 -1rem; }
.gallery-container:before, .gallery-container:after{ content:""; display:block; float:none; clear:both; }
.gallery-image{ position:relative; display:block; float:left; width:50%; padding:0 1rem 1rem 1rem; margin:0; }
.gallery-image .image{ position:relative; padding:0 0 100% 0; margin:2px; background-position:center center; background-repeat:no-repeat; background-size:cover; box-shadow:0 2px 5px rgba(0,0,0,0.4); cursor:pointer; }
.gallery-image .image:hover{ box-shadow:0 5px 7px rgba(0,0,0,0.3); }

.modal-gallery{ background-color:rgba(0,0,0,0.8); }
.modal-box.modal-gallery.show .modal-box-dialog{ top:1rem; height:100vh; width:90%; left:50%; transform:translateX(-50%); }
.modal-box.modal-gallery.show .modal-box-content{ height:100%; }
.modal-box.modal-gallery.show .modal-box-body{ height:100%; max-height:none; }
.gallery-image-zoom{ width:100%; height:100%; padding:0; background-repeat:no-repeat; background-position:center center; background-size:contain; background-color:#000000; }

@media screen and (min-width:768px){
	.gallery-image{ width:20%; }
	.modal-box.modal-gallery.show .modal-box-dialog{ width:80%; }
}