* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

.frame {
  margin: 0 auto;
  max-width: 100%; }
  .frame:after {
    content: "";
    display: table;
    clear: both; }

[class*='bit-'] {
  float: left;
  padding: 0 10px; }

.bit-1 {
  width: 100%; }

.bit-2 {
  width: 50%; }

.bit-3 {
  width: 33.33333%; }

.bit-4 {
  width: 25%; }

.bit-5 {
  width: 20%; }

.bit-6 {
  width: 16.66667%; }

.bit-7 {
  width: 14.28571%; }

.bit-8 {
  width: 12.5%; }

.bit-9 {
  width: 11.11111%; }

.bit-10 {
  width: 10%; }

.bit-11 {
  width: 9.09091%; }

.bit-12 {
  width: 8.33333%; }

.bit-25 {
  width: 25%; }

.bit-40 {
  width: 40%; }

.bit-60 {
  width: 60%; }

.bit-75 {
  width: 75%; }

@media (max-width: 30em) {
  .bit-1 {
    width: 100%; }
  .bit-2 {
    width: 100%; }
  .bit-3 {
    width: 100%; }
  .bit-4 {
    width: 100%; }
  .bit-5 {
    width: 100%; }
  .bit-6 {
    width: 100%; }
  .bit-7 {
    width: 100%; }
  .bit-8 {
    width: 100%; }
  .bit-9 {
    width: 100%; }
  .bit-10 {
    width: 100%; }
  .bit-11 {
    width: 100%; }
  .bit-12 {
    width: 100%; } }




.box {
  background: #FCD920;
  font-family: "Futura", sans-serif;
  font-size: 14px;
  text-align: center;
  padding: 20px 0; }
  .box--new {
    background: #87D37C; }