#gallery {margin: 0px 0px 50px 0px;float: left;width: 100%;}
.img-wrapper {position: relative;margin: 10px 0px;border: 5px solid #fff; box-shadow: 2px 2px 2px 2px #ccc;}
.img-wrapper video{width:100%;object-fit: cover;}
.img-wrapper img {width: 100%;}
.img-overlay {background: rgba(0, 0, 0, 0.7);width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: flex;justify-content: center;align-items: center;opacity: 0;}
.img-overlay i {color: #fff;font-size: 3em;}
#overlay {background: rgba(0, 0, 0, 0.7);width: 100%;height: 100%;position: fixed;top: 0;left: 0;display: flex;justify-content: center;align-items: center;z-index: 9999;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
#overlay img {margin: 0;width: 80%;/*height: calc(100% - 100px);*/height:auto;-o-object-fit: cover;object-fit: cover;margin: 5%;border: 5px solid #fff;}

@media screen and (min-width: 768px) {
#overlay img {width: 60%;}
}

@media screen and (min-width: 1200px) {
#overlay img {width: 60%;}
}

#nextButton {color: #fff;font-size: 2em;transition: opacity 0.8s;}
#nextButton:hover {opacity: 0.7;}

@media screen and (min-width: 768px) {
#nextButton {font-size: 2em;}
}

#prevButton {color: #fff;font-size: 2em;transition: opacity 0.8s;}
#prevButton:hover {opacity: 0.7;}

@media screen and (min-width: 768px) {
#prevButton {font-size: 2em;}
}

#exitButton {color: #fff;font-size: 2em;transition: opacity 0.8s;position: absolute;top: 15px;right: 15px;}
#exitButton:hover {opacity: 0.7;}

@media screen and (min-width: 768px) {
#exitButton {font-size: 2em;}
  
}