/*box-sizing: border-box See http://www.adamkaplan.me/grid/ */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/*container holds all elements and controls the page’s maximum width*/
.container {
  margin: 0 auto;
  max-width: 48rem;  max-width: 90em; 
  width: 90%;
}
.contentColour {background: #fff; } 
/* The Following is from http://www.adamkaplan.me/grid/ */
@media (min-width: 40em) {
  .column {
    float: left;
    padding-left: 1em; padding-left: 1em;
    padding-right: 1em;
  }
  
  .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; } 
  .contentColour {background: #fff; } 
}  
}

/*Use where you want content to display first on mobile but appear on the right on larger screens.*/
@media (min-width: 40em) {
  .column.flow-opposite { float: right; }
}



@media (min-width: 60em) {
  .column {
    float: left;
    padding-left: 1em; padding-left: 1em;
    padding-right: 1em;
  }
  
  .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; } 
  .contentColour {background: #fff; }   
}



/*Rows are cleared using .group, http://css-tricks.com/snippets/css/clear-fix/*/

.group:after {
  content: "";
  display: table;
  clear: both;
}