*, *: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: 100%; }
.container {
margin: 0 auto;
max-width: 48rem;
width: 90%;
}

 
/* Medium screens and above (640px) */
@media (min-width: 40rem) {
.column {
float: left;
padding-left: 1rem;
padding-right: 1rem;
}
.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%; }
.column.third { width: 33.3%; }
.column.fourth { width: 25%; }
.column.flow-opposite { float: right; } 
}
 

/* Large screens (1024px) */
@media (min-width: 64rem) {
html { font-size: 120%; }
}