#photodiv {
  max-width: 100%;
  margin-left:10px;
  margin-right:10px;
  margin-top:12px;
  margin-bottom:12px;
}

#photos {
  line-height: 0;
  -webkit-column-count: 4;
  -webkit-column-gap: 20px;
  -moz-column-count: 4;
  -moz-column-gap: 20px;
  column-count: 4;
  column-gap: 20px;
  
}

#photos img {
  width: 100%;
  height: auto !important;
  margin-bottom: 20px;
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
    transition: 0.2s all ease-in-out;
}

#photos a img:hover {
  transform: scale(1.07);
}

@media (max-width: 1200px) {
  #photos {
   -webkit-column-count: 4;
  -webkit-column-gap: 20px;
  -moz-column-count: 4;
  -moz-column-gap: 20px;
  column-count: 4;
  column-gap: 20px;
  }
}

@media (max-width: 900px) {
  #photos {
    -webkit-column-count: 3;
  -webkit-column-gap: 20px;
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
  }
}

@media (max-width: 640px) {
  #photos {
    -webkit-column-count: 2;
  -webkit-column-gap: 20px;
  -moz-column-count: 2;
  -moz-column-gap: 20px;
  column-count: 2;
  column-gap: 20px;
  }
}