
/* Code By Webdevtrick ( https://webdevtrick.com ) */
.container-bt{
    max-width: 1500px;
}
.gallery {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    margin-top: 10px;
    overflow: hidden;
}
.gallery img {
    width: 100%;
    height: auto;
    transition: 500ms;
    margin-bottom: 10px;
    opacity: 0.8;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}
.gallery img:hover {
    opacity: 1;
}
.modal-img,.model-vid{
  margin: 0;
  padding: 0;
 width: 100%;
 height: 100%;
  display: table;
  max-height: 80vh;
  object-fit: contain;
 

}
.modal-body{
  padding: 15px;

}

.modal-dialog {
    display: flex;
    position: relative;
    top: 75px;
    left: 10.66%;
  margin: auto;
   align-items: center;
  justify-content: center;

  background-color: #fff;
  border-radius: 6px;
  background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0,0,0,.2);
  -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
  box-shadow: 0 3px 9px rgba(0,0,0,.5);

 
}





.modal-content {
  border: none;
  box-shadow: none;
}




img.single-image:hover{
    cursor: pointer;
    }
    
    .modal-caption p{
        padding: 0 45px;
        text-align: center;
        font-size: 15px;
        font-family:Georgia, 'Times New Roman', Times, serif
    }
    
    
    @media screen and (max-width: 1500px) {

    
    .modal-dialog{
          left: 0;

      
      }
    }

@media screen and (max-width: 767px) {
.gallery {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
.gallery div { margin: 0;
        width: 200px;
    }
  .modal-dialog{
        margin: 5px auto !important;
        width: 92%;
        left: 4%;
        position: absolute;

    
    }


.modal-body{
    padding: 8px !important;
}

}

@media screen and (max-width: 479px) {
    .gallery {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
    .gallery div {
        margin: 0;
        width: 200px;
    }


    .modal-dialog {
        margin: 5px auto !important;
        top: 85px;
        left: 5%;
        width: 90%;
        max-height: 90%;
        position: absolute;
     
    

    }

    .modal-body{
        padding: 8px  !important;
    }
    

.model-content{
    max-height: 80vh;
}

}
