/*
 * Keep my container the same size when I add a border or padding.
 * Push my content inwards, as opposed to expanding my container outwards.
 */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/*
 * ----------------------
 * SITE CONTAINER
 * ----------------------
 */

/*
 * A container holds all elements and controls the page’s maximum width.
 * Using a container will make designing for responsive easier!
 */
.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1140px; /* Main width of your website! Change at your leisure, or use the .container-fluid class instead. */
  overflow: auto;
  padding: 1em 2em;
}
.container.fluid {
  max-width: none;
}
/*
 * ----------------------
 * COLUMN
 * ----------------------
 */

/*
 * Use float to line up our grid elements next to each other.
 * By default (i.e. mobile devices), make all columns 100% wide with some padding and margin.
 */
.column {
  float: left;
  padding: 1em;
  width: 100%;
}

/*
 * ----------------------
 * COLUMN LAYOUT
 * ----------------------
 */

/*
 * On all screens 769px and larger (landscape tablets + desktops), enable a grid layout with different width columns.
 */
@media (min-width: 769px) {

  .column.three-fourths { width: 75%; }
  .column.two-thirds    { width: 66.666%; }
  .column.one-half      { width: 50%; }
  .column.one-third     { width: 33.333%; }
  .column.one-fourth    { width: 25%; }
  .column.one-sixth     { width: 16.666%; }

}

/*
 * ----------------------
 * ROW
 * ----------------------
 */

/*
 * We wrap our columns inside rows to prevent other elements from stacking next to them, i.e. clearing issues.
 * We fix these by applying a version of the popular "clearfix" (http://cssmojo.com/the-very-latest-clearfix-reloaded/)
 * to our row class, which will contain floated column elements.
 */
.row {
  margin-left: -1em;
  margin-right: -1em;
}
.row:after {
  clear: both;
  content: " ";
  display: block;
}
.row + .row {
  margin-top: 1em;
}

/*
 * ----------------------
 * COLUMN OFFSET
 * ----------------------
 */

/*
 * Offset a grid element, by (virutally) creating an empty one.
 */
 @media (min-width: 769px) {

  .column.offset-three-fourths  { margin-left: 75%; }
  .column.offset-two-thirds     { margin-left: 66.666%; }
  .column.offset-one-half       { margin-left: 50%; }
  .column.offset-one-third      { margin-left: 33.333%; }
  .column.offset-one-fourth     { margin-left: 25%; }
  .column.offset-one-sixth      { margin-left: 16.666%; }

}

/*
 * no-padding
 * ----------------------
 * Enable grid without padding between each column by adding '.no-padding' to a '.container' element.
 */
.no-padding .column {
  padding: 0;
}
/*
 * no-margin
 * ----------------------
 * Enable grid without margin below each row by adding '.no-margin' to the '.container'.
 */
.no-margin .row {
  margin-top: 0;
}

/*
 * ----------------------
 * EXTRAS
 * ----------------------
 */

/*
 * flow-opposite
 * ----------------------
 * Add .flow-opposite to columns where you want a column on the right on desktop to display first on mobile.
 */
.column.flow-opposite { float: right; }