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

.clearfix:before, .clearfix:after
{ content: " ";
  display: table; }
 
.clearfix:after
{ clear: both; }
 
.clearfix
{ *zoom: 1; }


/* Small screens and above (default) */
html { color: #666; }
.container
{ margin: 0 1rem 0 1rem;
  padding: 0 1rem 0 0;
  max-width: 750px; 
  width: 95%;
  border: solid 0px red; }
@media (min-width: 768px) {
.container
{ margin: 0 auto .5rem auto;
  padding: 0;
  max-width: 750px; 
  width: 90%; }
}


.column
{ border: solid 0px #000;
  padding: 0 0 0 0; }
 
/* Medium screens and above (768px) */
@media (min-width: 768px) {
.column
{ float: left;
  padding: 0 1rem 0 1rem; }

.column.full { width: 100%; }
.column.four-fifths { width: 80%; }
.column.three-fourths { width: 75%; }
.column.two-thirds { width: 66.66%; }
.column.three-fifths { width: 60%; }
.column.half { width: 50%; }
.column.two-fifths { width: 40%; }
.column.third { width: 33.33%; }
.column.fourth { width: 25%; }
.column-fifth { width: 20%; }
.column.flow-opposite { float: right; } 
}
 

/* Large screens (1140+) */
@media (min-width: 1140px) {
}