*, *: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
{ font-size: 90%; color: #555; }

.container
{ margin: 0 auto;
  max-width: 1024px;
  width: 90%; }

.mobile-no-show
{ display: none; }

.column
{ float: left;
  padding-left: .5rem;
  padding-right: .5rem; }
 

/* Medium screens and above */
@media (min-width: 768px) {
.mobile-no-show
{ display: block; }

.column
{ float: left;
  padding-left: 1rem;
  padding-right: 1rem; }

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