#photos {
  /* vertical gaps */
  line-height: 3;
   
  -webkit-column-count: 3;
  -webkit-column-gap:   20px;
  -moz-column-count:    3;
  -moz-column-gap:      20px;
  column-count:         3;
  column-gap:           20px;  
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

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







h1 {
  text-align:center;
}
.container {
  width:93%;
  margin: 0 auto;
}
input[type="radio"] {
    display:none;
}
label {
  width:95%;
  float:left;
  text-align:center;
  border-radius: 0px;
  font-family: Open Sans;
  color: #000000;
  font-size: inherit;
  font-weight: bold;
  padding: 10px;
  background: #ffffff;
  border: solid #000000 2px;
  background:#ffffff;
  padding:1%;
  margin:1%;
  margin-bottom:10px;
  cursor:pointer;
}
input[type="radio"][id="all"]:checked + label {
  background:#000;
  color: #fff;
}
input[type="radio"][id="all"]:checked ~ .all, input[type="radio"][id="all"]:checked ~ .all {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
input[type="radio"][id="gold"]:checked + label {
  background:#000;
  color: #fff;
}
input[type="radio"][id="gold"]:checked ~ .gold, input[type="radio"][id="gold"]:checked ~ .gold {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
input[type="radio"][id="platinum"]:checked + label {
  background:#000;
  color: #fff;  
}
input[type="radio"][id="platinum"]:checked ~ .platinum, input[type="radio"][id="platinum"]:checked ~ .platinum {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
input[type="radio"][id="diamond"]:checked + label {
  background:#000;
  color: #fff;
}
input[type="radio"][id="diamond"]:checked ~ .diamond, input[type="radio"][id="diamond"]:checked ~ .diamond {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

.tile {
  float:left;
  transition:all 1s;
  margin:0.5%;
  padding:0.5%;
}