/* Arfully Masterminded by ZURB */
/* Grid :: This is the mobile-friendly, responsive grid that lets Foundation work much of its magic. */

.container
  padding: 0 20
// To set the grid to a certain size, set max-width to width
.row
  width: 100%
  max-width: 980
  min-width: 727px
  margin: 0 auto
  .row
    min-width: 0
.column, .columns
  margin-left: 4.4%
  float: left
  min-height: 1px
  position: relative
  &:first-child
    margin-left: 0

.row
  .one.columns
    width: 4.3%
  .two.columns
    width: 13%
  .three.columns
    width: 21.7%
  .four.columns
    width: 30.37%
  .five.columns
    width: 39.1%
  .six.columns
    width: 47.8%
  .seven.columns
    width: 56.5%
  .eight.columns
    width: 65.2%
  .nine.columns
    width: 73.9%
  .ten.columns
    width: 82.6%
  .eleven.columns
    width: 91.3%
  .twelve.columns
    width: 100%
    
  .offset-by-one
    margin-left: 13.1%
    &:first-child
      margin-left: 8.7%
  .offset-by-two
    margin-left: 21.8%
    &:first-child
      margin-left: 17.4%
  .offset-by-three
    margin-left: 30.5%
    &:first-child
      margin-left: 26.1%
  .offset-by-four
    margin-left: 39.2%
    &:first-child
      margin-left: 34.8%
  .offset-by-five
    margin-left: 47.9%
    &:first-child
      margin-left: 43.5%
  .offset-by-six
    margin-left: 56.6%
    &:first-child
      margin-left: 52.2%
  .offset-by-seven
    margin-left: 65.3%
    &:first-child
      margin-left: 60.9%
  .offset-by-eight
    margin-left: 74.0%
    &:first-child
      margin-left: 69.6%
  .offset-by-nine
    margin-left: 82.7%
    &:first-child
      margin-left: 78.3%
  .offset-by-ten
    margin-left: 91.4%
    &:first-child
      margin-left: 87.0%
  .offset-by-eleven
    &:first-child
      margin-left: 95.7%

/* Source Ordering */
.push-two
  left: 17.4%
.push-three
  left: 26.1%
.push-four
  left: 34.8%
.push-five
  left: 43.5%
.push-six
  left: 52.2%
.push-seven
  left: 60.9%
.push-eight
  left: 69.6%
.push-nine
  left: 78.3%
.push-ten
  left: 87%

.pull-two
  right: 17.4%
.pull-three
  right: 26.1%
.pull-four
  right: 34.8%
.pull-five
  right: 43.5%
.pull-six
  right: 52.2%
.pull-seven
  right: 60.9%
.pull-eight
  right: 69.6%
.pull-nine
  right: 78.3%
.pull-ten
  right: 87%


img, object, embed
  max-width: 100%
  height: auto
img
  -ms-interpolation-mode: bicubic
  
/* Nicolas Gallagher's micro clearfix */
.row:before, .row:after, .clearfix:before, .clearfix:after
  content: ""
  display: table
.row:after, .clearfix:after
  clear: both
.row, .clearfix
  zoom: 1
  
/* Blockgrids */
/* These are 2-up, 3-up, 4-up and 5-up ULs, suited for repeating block of content. Add 'mobile' to them to switch them just like the layout grid (one item per line) on phones */

/*For IE7/8 compatibility block-grid items need to be	the same height. You can optionally uncomment the lines below to support arbitrary height, but know that IE7/8 do not support :nth-child. */
.block-grid
  display: block
  overflow: hidden
  &>li
    display: block
    height: auto
    float: left
  &.two-up
    margin-left: -4%
    &>li
      margin-left: 4%
      width: 46%
      //&:nth-child(2n+1)
      //  clear: left
  &.three-up
    margin-left: -2%
    &>li
      margin-left: 2%
      width: 31.3%
      //&:nth-child(3n+1)
      //  clear: left
  &.four-up
    margin-left: -4%
    &>li
      margin-left: 4%
      width: 23%
      //&:nth-child(4n+1)
      //  clear: left
  &.five-up
    margin-left: -1.5%
    &>li
      margin-left: 1.5%
      width: 18.5%
      //&:nth-child(5n+1)
      //  clear: left