#photos {
   /* Prevent vertical gaps */
   line-height: 5px;
   
   
   -webkit-column-count: 1;
   -webkit-column-gap:   5px;
   -moz-column-count:    1;
   -moz-column-gap:      5px;
   column-count:         1;
   column-gap:           5px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  margin-top:5px;
}
#photos figcaption {
    position: absolute;
    top: 5px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: transparent;
    font: normal 15px "fonf";
    text-transform: uppercase;
    text-align: center;
    color: transparent;
    transition: background-color 0.2s ease 0s,color 0.2s ease 0s;
}
#photos figcaption span {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: 'fontf';
}
#photos figcaption:hover {
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    transition: background-color 0.3s ease 0.3s,color 0.3s ease 0.3s;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}