* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.row {
  display: block;
  clear: both;
  padding: 0 2.5%;
  width: 100%;
  height: auto;
}
.col {
  display: block;
  float: left;
  padding: 0 2%;
  margin: -1px -1px 1em -1px;
  border: solid 1px transparent;
}
/* ------ Mobile by default ------ */
.one {
  width: 50%;
}
.two {
  width: 100%;
}
.three {
  width: 100%;
}
.four {
  width: 100%;
}
.straddler .one {
  width: 100%;
}
.centre {
  width: 100%;
  margin: auto;
}
/* ------------------------------- */
@media screen and (min-width: 600px) {
  .one {
    width: 25%;
  }
  .two {
    width: 50%;
  }
  .three {
    width: 75%;
  }
  .four {
    width: 100%;
  }
  .third {
    width: 33%;
  }
  .straddler .one {
    width: 25%;
  }
  .col {
    display: table-cell;
    padding: 0 2%;
    margin: -1px;
    border: solid 1px transparent;
  }
}
@media screen and (max-width: 600px) {
  .collapse {
    display: none;
  }
}
@media screen and (min-width: 800px) {
  .centre {
    width: 50%;
  }
}
/* ---------------------------------------------------- */
.one_col {
  clear: both;
  columns: 1;
}
.two_col {
  clear: both;
  columns: 1;
}
.three_col {
  clear: both;
  columns: 1;
}
.four_col {
  clear: both;
  columns: 1;
}
@media screen and (min-width: 600px) {
  .three_col {
    columns: 2;
  }
  .four_col {
    columns: 3;
  }
}
@media screen and (min-width: 800px) {
  .two_col {
    columns: 2;
  }
  .three_col {
    columns: 3;
  }
  .four_col {
    columns: 4;
  }
}
.big_col {
  clear: both;
  column-count: auto;
  column-width: 500pt;
}
.medium_col {
  clear: both;
  column-count: auto;
  column-width: 350pt;
}
.little_col {
  clear: both;
  column-count: auto;
  column-width: 250pt;
}