/*container holds all elements and controls the page’s maximum width*/
.container {
  margin: 0 auto;
  max-width: 48rem;  max-width: 90rem; 
  width: 90%;
}
.contentColour {background: #FFBEC9; background: #fff; } /*Red*/
/* The Following is from http://www.adamkaplan.me/grid/ */
@media (min-width: 40rem) {
  .column {
    float: left;
    padding-left: 1rem; padding-left: 1rem; padding-left: 2px;
    padding-right: 1rem; padding-right: 2px;
  }
  
  .column.full { width: 100%; }
  .column.two-thirds { width: 66.7%; }
  .column.half { width: 49%; } 
  .column.third { width: 33.3%; }
  .column.fourth { width: 25%; }
  .column.flow-opposite { float: right; } 
  .contentColour {background: #B6F8BB; background: #fff;} /*Green*/
}  
}

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



@media (min-width: 60rem) {
  .column {
    float: left;
    padding-left: 1rem; padding-left: 1rem; padding-left: 2px;
    padding-right: 1rem; padding-right: 2px;
  }
  
  .column.full { width: 100%; }
  .column.two-thirds { width: 66.7%; }
  .column.half { width: 49%; } 
  .column.third { width: 33.3%; }
  .column.fourth { width: 25%; }
  .column.flow-opposite { float: right; } 
  .contentColour {background: #A0C7EC; background: #fff;}    /*Blue*/
}



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

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