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

.container
  padding: 0 20px
// To set the grid to a certain size, set max-width to width
.row
  width: 100%
  max-width: 980px
  min-width: 727px
  margin: 0 auto
  .row
    min-width: 0px
.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.4%
  .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%

  //.one.centered
  //  margin-left: 47.9%
  //.two.centered
  //  margin-left: 43.5%
  //.three.centered
  //  margin-left: 39.2%
  //.four.centered
  //  margin-left: 34.8%
  //.five.centered
  //  margin-left: 30.5%
  //.six.centered
  //  margin-left: 26.1%
  //.seven.centered
  //  margin-left: 21.8%
  //.eight.centered
  //  margin-left: 17.4%
  //.nine.centered
  //  margin-left: 13.1%
  //.ten.centered
  //  margin-left: 8.7%
  //.eleven.centered
  //  margin-left: 4.3%
  
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 */
.block-grid
  display: block
  overflow: hidden
  &>li
    display: block
    height: auto
    float: left
  &.two-up
    margin-left: -4%
    &>li
      margin-left: 4%
      width: 46%
  &.three-up
    margin-left: -2%
    &>li
      margin-left: 2%
      width: 31.3%
  &.four-up
    margin-left: -4%
    &>li
      margin-left: 4%
      width: 23%
  &.five-up
    margin-left: -1.5%
    &>li
      margin-left: 1.5%
      width: 18.5%