.overlay-controls{
  z-index: 999993
}

#overlay-backdrop{
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 999991;
  position: fixed;
  display: none;
}

#overlay-enlarged-image-container{
  top: 95px;
  left: 0px;
  z-index: 999992;
  width: 100%;
  position: absolute;
  display: none;
}

#overlay-image{
  width: 500px;
  height: 500px;
  margin: 0px auto;
  position: relative;
  display: block;

 padding: 5px;
 background: white;
  
}
#image-over-loading{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 117px;
  height: 36px;
  margin-left: -58px;
  margin-top: -18px;
  background: url("images/loading.gif");
  display: none;
}

#image-overlay-close div{
  background: url("images/close.png");
  position:absolute;
  right: 10px;
  top:10px;
  width: 20px;
  height: 20px;
}

#image-overlay-caption{
  position: absolute;
  left: 10px;
  right: 10px;
  color: rgb(65, 65, 65);
  display: none;
  bottom: 0px;
}
#image-overlay-caption .num-images{
font-size: 10px;
font-weight: bolder;
float: right;
}

#image-overlay-caption .image-caption{
  font-weight: 500;

}

#image-overlay-left:hover{
  opacity: 1;
}
#image-overlay-right:hover{
  opacity: 1;
}

#image-overlay-left {
  transition: opacity .2s;
  -webkit-transition: opacity .2s;
  opacity: 0;
}
#image-overlay-right{
   transition: opacity .2s;
  -webkit-transition: opacity .2s;
  opacity: 0;
}

#image-overlay-left .button{

  position: absolute;
  background: url("images/leftArrowOverlay.png");
  top: 50% ;
  left: 10px;
  width: 50px;
  height: 60px;
  margin-top: -30px;
}

#image-overlay-right .button{

  position: absolute;
   background: url("images/rightArrowOverlay.png");
  top: 50% ;
  right: 10px;
  width: 50px;
  height: 60px;
  margin-top: -30px;
}

#image-overlay-left .click-area{
  top:0px;
  width: 40%;
  bottom: 0px;
  left: 0px;
  position: absolute;
}

#image-overlay-right .click-area{
  top:0px;
  width: 40%;
  right: 0px;
  bottom: 0px;
  position: absolute;
  
}