.tz-gallery
{
    padding: 40px;
    background-color: #fff;
    -webkit-filter: grayscale(90%);
    filter: grayscale(90%); /* make all photos black and white */
    position: relative;
}

/* Override bootstrap column paddings */
.tz-gallery .row > div
{
    padding: 2px;
}

.tz-gallery .lightbox img
{
    width: 100%;
    border-radius: 0;
    position: relative; 
    display: block;
    border : 1px solid #000000;
    /*Overlay
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden; */
}

@media (max-width: 768px)
{
    body
    {
        padding: 0;
    }
}


/* Overlay gallary image*/

.overlayimage {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden; 
}


.middle
{
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); 
 }


.lightbox:hover .overlayimage {
    opacity: 0.6;     
}

.lightbox:hover .middle {
    opacity: 1;  
}
  
.text-box {
    position: absolute;    
    height: 100%;
    text-align: center;    
    width: 100%;
}
.text-box:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}
h4 {
   display: inline-block;
   font-size: 20px; /*or whatever you want*/
   color: #FFF;   
}


.modal {
  text-align: center;
}

@media screen and (min-width: 577px) { 
    
    .modal-title
    {
       font-size : 16px;     
    }
    
    .modalMessage
    {       text-align:center;
            color: #111; 
            font-size : 15px;      
    }
    
    .overlaytext
    {
        background: rgba(0,0,0,0.5);
        color: #ffffff;
        font-size: 16px;
        padding: 16px 32px; 
        text-decoration: underline;
    }    
  
}

@media screen and (max-width: 576px) { 
    .modal-title
    {
       font-size : 14px;     
    }
    
    .modalMessage
    {       text-align:center;
            color: #111;     
            font-size : 12px;  
    }    

    .overlaytext
    {
        background: rgba(0,0,0,0.5);
        color: #ffffff;
        font-size: 14px;
        padding: 16px 32px; 
        text-decoration: underline;
    }    
  
}

.modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}