/* -------------------------------------------------------------- 
   
   grid.css
   * Sets up an easy-to-use grid of 24 columns.
   
   Based on work by:
   * Nathan Borror     [playgroundblues.com]
   * Jeff Croft        [jeffcroft.com]
   * Christian Metts   [mintchaos.com]
   * Khoi Vinh         [subtraction.com]
   
-------------------------------------------------------------- */

/* A container should group all your columns. */
.container {
  /* width: 932px; */
  margin: 0 auto;
  max-width: 932px;
  padding: 0 20px;
  /* box-sizing: border-box; */
}


/* Columns
-------------------------------------------------------------- */

/* Use this class together with the .span-x classes
   to create any composition of columns in a layout. */

.column {
  /* float: left; */
  margin-right: 0;
  /* padding-right: 12px; */
  box-sizing: border-box;
}

.grid>.column {
  float: none;
}

/* The last column in a row needs this class. */
.last {
  margin-right: 0;
  padding-right: 0;
}

/* Use these classes to set the width of a column. */
.span-1 {
  width: 106px;
}

.span-2 {
  /* width: 224px; */
  /* width: calc(2/8 * 100%); */
}

.span-3 {
  width: 342px;
}

.span-4 {
  /* width: 460px; */
  /* width: calc(4/8 * 100%); */
}

.span-5 {
  width: 578px;
}

.span-6 {
  /* width: calc(6/8 * 100%); */
}

.span-7 {
  width: 814px;
}

.span-8 {
  width: 100%;
  margin: 0;
}

/* Add these to a column to append empty cols. */
.append-1 {
  padding-right: 118px;
}

.append-2 {
  padding-right: 236px;
}

.append-3 {
  padding-right: 360px;
}

.append-4 {
  padding-right: 472px;
}

.append-5 {
  padding-right: 590px;
}

.append-6 {
  padding-right: 708px;
}

.append-7 {
  padding-right: 826px;
}

/* Add these to a column to prepend empty cols. */
.prepend-1 {
  padding-left: 118px;
}

.prepend-2 {
  padding-left: 236px;
}

.prepend-3 {
  padding-left: 360px;
}

.prepend-4 {
  padding-left: 472px;
}

.prepend-5 {
  padding-left: 590px;
}

.prepend-6 {
  padding-left: 708px;
}

.prepend-7 {
  padding-left: 826px;
}

/* Border on right hand side of a column. */
.border {
  padding-right: 4px;
  margin-right: 5px;
  border-right: 1px solid #eee;
}

/* Border with more whitespace, spans one column. */
.colborder {
  padding-right: 24px;
  margin-right: 25px;
  border-right: 1px solid #eee;
}


/* Use these classes on an element to push it into the 
   next column, or to pull it into the previous column. */

.pull-1 {
  margin-left: -118px;
}

.pull-2 {
  margin-left: -236px;
}

.pull-3 {
  margin-left: -360px;
}

.pull-4 {
  margin-left: -472px;
}

.push-0 {
  margin: 0 0 0 18px;
}

.push-1 {
  margin: 0 -40px 0 18px;
}

.push-2 {
  margin: 0 -80px 0 18px;
}

.push-3 {
  margin: 0 -120px 0 18px;
}

.push-4 {
  margin: 0 -160px 0 18px;
}

.push-0,
.push-1,
.push-2,
.push-3,
.push-4 {
  float: right;
}


/* Misc classes and elements
-------------------------------------------------------------- */

/* Use a .box to create a padded box inside a column.  */
.box {
  padding: 1.5em;
  margin-bottom: 1.5em;
  background: #eee;
}

/* Use this to create a horizontal ruler across a column. */
hr {
  background: #ddd;
  color: #ddd;
  clear: both;
  float: none;
  width: 100%;
  height: .1em;
  margin: 0 0 1.4em;
  border: none;
}

hr.space {
  background: #fff;
  color: #fff;
}

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

/* .clear {
  display: inline-block;
}

.clear:after,
.container:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

* html .clear {
  height: 1%;
}

.clear {
  display: block;
} */

.clearfix::after {
  display: block;
  content: "";
  clear: both;
}