*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Set the width of the grid */
.frame {
  margin: 0 auto;
  padding-top: 2em;
  padding-bottom: 2em;
  height: auto;
  padding-left: 15%;
  padding-right: 15%;
  
}

/* Attribute selector */
[class*='bit-'] {
  float: left;
  padding: 0.3em;
}

/* Floats last ".bit-" to the right */
[class*='bit-']:last-of-type {
  float: right
}

/* Clearfix */
.frame:after {
  content: "";
  display: table;
  clear: both
}


/* Main Widths */
.bit-1  { width: 100% }
.bit-4  { width: 25% }

/* Landscape mobile & down */
@media (max-width: 30em) {
  .bit-4 {
    width: 100%;
  }
  h1{
	font-size: 2em;
	text-align: center;
  }	
}

/* Portrait tablet to landscape */
@media (min-width: 30em) and (max-width: 50em) {
  .bit-4 {
	  width: 50%;
  }  
  h1{
	font-size: 2.5em;
	/*padding-left: 1.5em;*/
	padding-left: 10%;
  }	
}

/* Landscape to small desktop */
@media (min-width: 50em) and (max-width: 68.750em) {
  .bit-4 {
    width: 50%
  }
  h1 {
  	font-size: 3em;
  	/*padding-left: 2em;*/
  	padding-left: 2em;
  }
  	
}