body { background-color: #eee; }
.box {
  background-color: #fff;
  text-align: justify;
  box-shadow: #ccc 0 0 2px;
  clear: both;
  padding: 2%;
}
#wrap {
  margin: 0 auto;
  max-width: 960px;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
#wrap ul {
  padding: 0;
}
.boxes li {
  list-style-type: none;
  float: left;
  background-color: #fff;
  font-family: sans-serif;
  box-shadow: #ccc 0 0 2px;
  padding: 2%;
}
@media screen and (min-width: 641px) {
  .boxes li:nth-of-type(2n-1) { margin: 0 1% 16px 0; }
  .boxes li:nth-of-type(2n) { margin: 0 0 16px 1%; }
  .boxes li {
    width: 45%;
  }
  .boxes li:nth-of-type(2n-1) { clear: both; }
}
@media only screen and (max-width: 640px), handheld {
  .boxes li {
    padding: 2%;
    width: 96%;
    margin: 0 0 16px 0;
  }
}
hr.sep {
  clear: both;
  height: 1px;
  background-color: #ddd;
  border: none;
}
.boxes li p:first-child {
  margin-top: 0;
}
.boxes li p:last-child {
  margin-bottom: 0;
}