.img-overlay { display: inline-block; position: relative; overflow: hidden; cursor: pointer; }
.img-overlay img { display: block; margin: 0; padding: 0; max-width: 100%; height: auto; }
.overlay-img { display: block; position: absolute; z-index: 3; background: rgba(0, 0, 0, 0.8); overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
a.close-overlay { display: block; position: absolute; top: 0; right: 0; z-index: 4; width: 45px; height: 45px; font-size: 20px; font-weight: 700; color: #fff; line-height: 45px; text-align: center; background-color: #000; cursor: pointer; }
a.close-overlay.hidden { display: none; }
a.expand-overlay { display: block; position: absolute; z-index: 4; text-align: center; color: #fff; font-size: 26px; }
a.expand-overlay:hover { text-decoration: none; }
.overlay-img { top: 0; bottom: 0; left: 0; right: 0; opacity: 0; }
.overlay-img a.expand-overlay { left: 0; right: 0; top: 0; margin: 0 auto; opacity: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.img-overlay.hover .overlay-img { opacity: 1; }
.img-overlay.hover .overlay-img a.expand-overlay { top: 50%; margin-top: -30px; opacity: 1; }
.img-overlay-half { width: 50%; }
@media only screen and (max-width: 1100px) {
  .img-overlay { /* width: 50%; */ }
  .img-overlay:nth-child(n) { /* margin-right: 5px; */ }
  .img-overlay:first-child { /* margin-left: 0; */ }
  .img-overlay:nth-child(2n-1) { /* margin-left: -5px; */ }
  .img-overlay:nth-child(2n) { margin-right: 0; }
  .img-overlay:last-child { margin-right: 0; }
}
@media only screen and (max-width: 520px) {
  .img-overlay { width: 100%; }
  .img-overlay:nth-child(n) { margin-right: 0; }
  .img-overlay:first-child { margin-left: 0; }
  .img-overlay:nth-child(2n-1) { margin-left: 0; }
  .img-overlay:nth-child(2n) { margin-right: 0; }
  .img-overlay:last-child { margin-right: 0; }
  .img-overlay img { margin: 0 auto; }
}