@charset "utf-8";



/* CSS Document */

/* Create three equal columns that floats next to each other */

.column {

  float: left;

  width: 33.33%;

  padding: 20px;

  height: 500px; /* Should be removed. Only for demonstration */
  


}



/* Clear floats after the columns */

.row:after {

  content: "";

 display: table;

  clear: both; 
 

}



/* Code By Webdevtrick ( https://webdevtrick.com ) */

 

.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



}



.modal-body{



  padding: 0px;



}



.modal-dialog {



  height: 100%;



      position: relative;



    margin: auto;



    display: flex;



    align-items: center;



    justify-content: center;



}



.modal-content {



  border: none;



}



@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: 0 8vw;



    }



}



@media screen and (max-width: 479px) {



    .gallery { 



        -webkit-column-count: 1;



        -moz-column-count: 1;



        column-count: 1;



    }



    .gallery div { 



        margin: 0; 



        width: 200px;



    }



}

/* tab */

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* tab close */







/* Code By Webdevtrick ( https://webdevtrick.com ) */



.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



}



.modal-body{



  padding: 0px;



}



.modal-dialog {



  height: 100%;



      position: relative;



    margin: auto;



    display: flex;



    align-items: center;



    justify-content: center;



}



.modal-content {



  border: none;



}



@media screen and (max-width: 767px) {



	.gallery { 



        -webkit-column-count: 2;



        -moz-column-count: 2;



        column-count: 2;