/* (A) GALLERY CONTAINER */
/* (A1) ON BIG SCREENS */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, auto); /* 3 IMAGES PER ROW */
  grid-gap: 10px;
  max-width: 1200px;
  width: 90%;
  margin: 10px auto; /* HORIZONTAL CENTER */
}

.gallerySlider {
  height: 300px;
  overflow: hidden;
  width: 100%;
  padding-left: 0;
}

.galleryImage {
  display: none;
  /*width: 100%;*/
  position: relative;
  object-fit: cover;
}

.galleryImage img {
  width: 100%;
  position: absolute;
  left: 0%;
  /*margin-top: -25%;*/
  cursor: pointer;
} 

.galleryImage a {
  display: inline-block;
  vertical-align: middle ;
} 

.activeImg {
  display: flex;
  justify-content: center;
}

.imgCaption {
  position: relative;
  top: 0px;
  z-index: 100;
  color: #fff;
  left: 0px;
  background: rgba(0,0,0,0.4);
  padding: 6px 17px;
  width: auto;
 
}

.sliderBtnBkg {
  width: 45px;
  position: absolute;
  z-index: 1000;
  height: 300px;
  background: rgba(0,0,0,0.4);
  cursor: pointer;
}

.sliderBtnBkg:hover {
  background: rgba(0,0,0,0.5);
}
.imgOverlay {
  position: absolute;
  z-index: 150;
  height: 300px;
  cursor: pointer;
  width: calc(100% - 90px);
}
.bckBtn {
  left: 0px;
}
.nxtBtn {
  right: 0px;
}

.bckBtn:hover, .nxtBtn:hover {
  color: #000;
}

.sliderBtn{
  position: absolute;
  top: 45%;
  left: 5%;
  background: rgba(255,255,255,0.1);
  border-radius: 30px;
  padding: 5px 13px;
  font-size: 25px;
  font-weight: bold;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
}

.sliderBtn:hover{
  background: rgba(255,255,255,0.3);
  color: #fff;
}
/* (A2) ON SMALL SCREENS */
@media screen and (max-width: 640px) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(2, auto);
    margin: 10px auto;
  }
}

/* (B) THUMBNAILS */
.gallery img { 
  width: 100%; 
  height: 100px;
  cursor: pointer;
  /* FILL, CONTAIN, COVER, SCALE-DOWN : USE WHICHEVER YOU LIKE */
  object-fit: cover;
}
.gallery img:fullscreen { object-fit: contain; }

/* (C) CAPTION */
.gallery figure { margin: 0; }
.gallery figcaption { 
  padding: 5px;
  background: #3e3e3e;
  color: #fff;
}

/* (X) DOES NOT MATTER */
/*body, html {
  padding: 0;
  margin: 0;
}*/