* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 20%;
  padding: 15px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
/*@media screen and (max-width: 600px) {*/
@media (min-width: 200px) and (max-width: 499px){
  .column {
    width: 50%;
  }
}
@media (min-width: 500px) and (max-width: 799px){
  .column {
    width: 33%;
	float: left;
	padding: 5px;
  }
}

@media (min-width: 800px) and (max-width: 1024px){
  .column {
    width: 25%;
	float: left;
	padding: 5px;
  }
}