/*
@styleguide
@title Grid

<div class="grid">
  <div class="col one-quarter md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
  <div class="col one-quarter md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
  <div class="col one-quarter md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
  <div class="col one-quarter md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
  <div class="col one-half md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
  <div class="col one-half md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
  <div class="col one-quarter md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
  <div class="col one-quarter md-viewport--one-half">
    <div class="greybox">Hey there</div>
  </div>
</div>


*/

.media{
  /* Proper spacing between instances of .media */
  margin-top: 15px;

  &:first-child{
    margin-top: 0;
  }
}

.media,
.media-body{
  zoom: 1;
  overflow: hidden;
}

.media-body{
  width: 10000px;
}

.media-object{
  display: block;

  /* Fix collapse in webkit from max-width: 100% and display: table-cell. */
  &.img-thumbnail{
    max-width: none;
  }
}

.media-right,
.media > .pull-right{
  padding-left: 10px;
}

.media-left,
.media > .pull-left{
  padding-right: 10px;
}

.media-left,
.media-right,
.media-body{
  display: table-cell;
  vertical-align: top;
}

.grid{
  overflow: hidden;
  color: #999;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.column, [class^="col-"], .col{
  min-height: 24px;
  text-align: left;
  display: block;
  flex: inherit;
  align-self: flex-start;
  padding: 0 1em 1em 0;
  /*float: left;*/
  .testgrid &{
    font-size: 0.9em;
    background: rgba(216,217,228,0.6);
    &:nth-child(2n){
      background: rgba(216,217,228,0.1);
    }
  }
  span{
    .demo &{
      text-align: center;
      display: block;
      margin: 0 0.5em;
    }
    .testgrid &{
      background: ;
    }
  }
}

/* seems to fix sub-pixel rendering issues */
$fullpercentage: 99.98%;

@define-mixin device-type $namespace:{
$prefix: .$(namespace);


/*// Full*/
   $(prefix)one-whole{
     width: $fullpercentage !important;
   }

/*// Halves*/
  $(prefix)one-half{
     width: calc(1 / 2 * $fullpercentage);
   }

/*// Thirds*/
  $(prefix)one-third{
     width: calc(1 / 3 * $fullpercentage);
   }

  $(prefix)two-thirds{
    width: calc(2 / 3 * $fullpercentage);
  }

/*//Quarters*/
  $(prefix)one-quarter{
    width: calc(1 / 4 * $fullpercentage);
  }

  $(prefix)two-quarters{
  /*@extend $(prefix)one-half;*/
    width: calc(1 / 2 * $fullpercentage);
  }

  $(prefix)three-quarters{
    width: calc(3 / 4 * $fullpercentage);
  }

/*//Fifths*/
  $(prefix)one-fifth{
    width: calc(1 / 5 * $fullpercentage);
  }

  $(prefix)two-fifths{
    width: calc(2 / 5 * $fullpercentage);
  }

  $(prefix)three-fifths{
    width: calc(3 / 5 * $fullpercentage);
  }

  $(prefix)four-fifths{
    width: calc(4 / 5 * $fullpercentage);
  }

/*//Sixths*/
  $(prefix)one-sixth{
    width: calc(1 / 6 * $fullpercentage);
  }

  $(prefix)two-sixths{
  /*@extend $(prefix)one-third;*/
    width: calc(1 / 3 * $fullpercentage);
  }

  $(prefix)three-sixths{
  /*@extend $(prefix)one-half;*/
    width: calc(1 / 2 * $fullpercentage);
  }

  $(prefix)four-sixths{
  /*@extend $(prefix)two-thirds;*/
    width: calc(2 / 3 * $fullpercentage);
  }

  $(prefix)five-sixths{
    width: calc(5 / 6 * $fullpercentage);
  }

/*//Sevenths*/
  $(prefix)one-seventh{
    width: calc(1 / 7 * $fullpercentage);
  }

  $(prefix)two-sevenths{
    width: calc(2 / 7 * $fullpercentage);
  }

  $(prefix)three-sevenths{
    width: calc(3 / 7 * $fullpercentage);
  }

  $(prefix)four-sevenths{
    width: calc(4 / 7 * $fullpercentage);
  }

  $(prefix)five-sevenths{
    width: calc(5 / 7 * $fullpercentage);
  }

  $(prefix)six-sevenths{
    width: calc(6 / 7 * $fullpercentage);
  }

/*//Eighths*/
  $(prefix)one-eighth{
    width: calc(1 / 8 * $fullpercentage);
  }

  $(prefix)two-eighths{
  /*@extend $(prefix)one-quarter;*/
    width: calc(1 / 4 * $fullpercentage);
  }

  $(prefix)three-eighths{
    width: calc(3 / 8 * $fullpercentage);
  }

  $(prefix)four-eighths{
  /*@extend $(prefix)one-half;*/
    width: calc(1 / 2 * $fullpercentage);
  }

  $(prefix)five-eighths{
    width: calc(5 / 8 * $fullpercentage);
  }

  $(prefix)six-eighths{
  /*@extend $(prefix)three-quarters;*/
    width: calc(3 / 4 * $fullpercentage);
  }

  $(prefix)seven-eighths{
    width: calc(7 / 8 * $fullpercentage);
  }

/*//Ninths*/
  $(prefix)one-ninth{
    width: calc(1 / 9 * $fullpercentage);
  }

  $(prefix)two-ninths{
    width: calc(2 / 9 * $fullpercentage);
  }

  $(prefix)three-ninths{
  /*@extend $(prefix)one-third;*/
    width: calc(1 / 3 * $fullpercentage);
  }

  $(prefix)four-ninths{
    width: calc(4 / 9 * $fullpercentage);
  }

  $(prefix)five-ninths{
    width: calc(5 / 9 * $fullpercentage);
  }

  $(prefix)six-ninths{
    width: calc(2 / 3 * $fullpercentage);
  }

  $(prefix)seven-ninths{
    width: calc(7 / 9 * $fullpercentage);
  }

  $(prefix)eight-ninths{
    width: calc(8 / 9 * $fullpercentage);
  }

/*//Tenths*/
  $(prefix)one-tenth{
    width: calc(1 / 10 * $fullpercentage);
  }

  $(prefix)two-tenths{
  /*@extend $(prefix)one-fifth;*/
    width: calc(1 / 5 * $fullpercentage);
  }

  $(prefix)three-tenths{
    width: calc(3 / 10 * $fullpercentage);
  }

  $(prefix)four-tenths{
  /*@extend $(prefix)two-fifths;*/
    width: calc(2 / 5 * $fullpercentage);
  }

  $(prefix)five-tenths{
  /*@extend $(prefix)one-half;*/
    width: calc(1 / 2 * $fullpercentage);
  }

  $(prefix)six-tenths{
  /*@extend $(prefix)three-fifths;*/
    width: calc(3 / 5 * $fullpercentage);
  }

  $(prefix)seven-tenths{
    width: calc(7 / 10 * $fullpercentage);
  }

  $(prefix)eight-tenths{
  /*@extend $(prefix)four-fifths;*/
    width: calc(4 / 5 * $fullpercentage);
  }

  $(prefix)nine-tenths{
    width: calc(9 / 10 * $fullpercentage);
  }

/*//Elevenths*/
  $(prefix)one-eleventh{
    width: calc(1 / 11 * $fullpercentage);
  }

  $(prefix)two-elevenths{
    width: calc(2 / 11 * $fullpercentage);
  }

  $(prefix)three-elevenths{
    width: calc(3 / 11 * $fullpercentage);
  }

  $(prefix)four-elevenths{
    width: calc(4 / 11 * $fullpercentage);
  }

  $(prefix)five-elevenths{
    width: calc(5 / 11 * $fullpercentage);
  }

  $(prefix)six-elevenths{
    width: calc(6 / 11 * $fullpercentage);
  }

  $(prefix)seven-elevenths{
    width: calc(7 / 11 * $fullpercentage);
  }

  $(prefix)eight-elevenths{
    width: calc(8 / 11 * $fullpercentage);
  }

  $(prefix)nine-elevenths{
    width: calc(9 / 11 * $fullpercentage);
  }

  $(prefix)ten-elevenths{
    width: calc(10 / 11 * $fullpercentage);
  }

/*//Twelfths*/
  $(prefix)one-twelfth{
    width: calc(1 / 12 * $fullpercentage);
  }

  $(prefix)two-twelfths{
  /*@extend $(prefix)one-sixth;*/
    width: calc(1 / 6 * $fullpercentage);
  }

  $(prefix)three-twelfths{
  /*@extend $(prefix)one-quarter;*/
    width: calc(1 / 4 * $fullpercentage);
  }

  $(prefix)four-twelfths{
  /*@extend $(prefix)one-third;*/
    width: calc(1 / 3 * $fullpercentage);
  }

  $(prefix)five-twelfths{
    width: calc(5 / 12 * $fullpercentage);
  }

  $(prefix)six-twelfths{
  /*@extend $(prefix)one-half;*/
    width: calc(1 / 2 * $fullpercentage);
  }

  $(prefix)seven-twelfths{
    width: calc(7 / 12 * $fullpercentage);
  }

  $(prefix)eight-twelfths{
  /*@extend $(prefix)two-thirds;*/
    width: calc(2 / 3 * $fullpercentage);
  }

  $(prefix)nine-twelfths{
  /*@extend $(prefix)three-quarters;*/
    width: calc(3 / 4 * $fullpercentage);
  }

  $(prefix)ten-twelfths{
  /*@extend $(prefix)five-sixths;*/
    width: calc(5 / 6 * $fullpercentage);
  }

  $(prefix)eleven-twelfths{
    width: calc(11 / 12 * $fullpercentage);
  }

/*//Thirteenths*/
  $(prefix)one-thirteenth{
    width: calc(1 / 13 * $fullpercentage);
  }

  $(prefix)two-thirteenths{
    width: calc(2 / 13 * $fullpercentage);
  }

  $(prefix)three-thirteenths{
    width: calc(3 / 13 * $fullpercentage);
  }

  $(prefix)four-thirteenths{
    width: calc(4 / 13 * $fullpercentage);
  }

  $(prefix)five-thirteenths{
    width: calc(5 / 13 * $fullpercentage);
  }

  $(prefix)six-thirteenths{
    width: calc(6 / 13 * $fullpercentage);
  }

  $(prefix)seven-thirteenths{
    width: calc(7 / 13 * $fullpercentage);
  }

  $(prefix)eight-thirteenths{
    width: calc(8 / 13 * $fullpercentage);
  }

  $(prefix)nine-thirteenths{
    width: calc(9 / 13 * $fullpercentage);
  }

  $(prefix)ten-thirteenths{
    width: calc(10 / 13 * $fullpercentage);
  }

  $(prefix)eleven-thirteenths{
    width: calc(11 / 13 * $fullpercentage);
  }

  $(prefix)twelve-thirteenths{
    width: calc(12 / 13 * $fullpercentage);
  }

/*//Fouteenths*/
  $(prefix)one-fourteenth{
    width: calc(1 / 14 * $fullpercentage);
  }

  $(prefix)two-fourteenths{
  /*@extend $(prefix)one-seventh;*/
    width: calc(1 / 7 * $fullpercentage);
  }

  $(prefix)three-fourteenths{
    width: calc(3 / 14 * $fullpercentage);
  }

  $(prefix)four-fourteenths{
  /*@extend $(prefix)two-sevenths;*/
    width: calc(2 / 7 * $fullpercentage);
  }

  $(prefix)five-fourteenths{
    width: calc(5 / 14 * $fullpercentage);
  }

  $(prefix)six-fourteenths{
  /*@extend $(prefix)three-sevenths;*/
    width: calc(3 / 7 * $fullpercentage);
  }

  $(prefix)seven-fourteenths{
  /*@extend $(prefix)one-half;*/
    width: calc(1 / 2 * $fullpercentage);
  }

  $(prefix)eight-fourteenths{
  /*@extend $(prefix)four-sevenths;*/
     width: calc(4 / 7 * $fullpercentage);
  }

  $(prefix)nine-fourteenths{
    width: calc(9 / 14 * $fullpercentage);
  }

  $(prefix)ten-fourteenths{
    width: calc(10 / 14 * $fullpercentage);
  }

  $(prefix)eleven-fourteenths{
    width: calc(11 / 14 * $fullpercentage);
  }

  $(prefix)twelve-fourteenths{
  /*@extend $(prefix)six-sevenths;*/
    width: calc(6 / 7 * $fullpercentage);
  }

  $(prefix)thirteen-fourteenths{
    width: calc(13 / 14 * $fullpercentage);
  }

/*//Fifteenths*/
  $(prefix)one-fifteenth{
    width: calc(1 / 15 * $fullpercentage);
  }

  $(prefix)two-fifteenths{
    width: calc(2 / 15 * $fullpercentage);
  }

  $(prefix)three-fifteenths{
  /*@extend $(prefix)two-tenths;*/
    width: calc(2 / 10 * $fullpercentage);
  }

  $(prefix)four-fifteenths{
    width: calc(4 / 15 * $fullpercentage);
  }

  $(prefix)five-fifteenths{
  /*@extend $(prefix)one-third;*/
    width: calc(1 / 3 * $fullpercentage);
  }

  $(prefix)six-fifteenths{
  /*@extend $(prefix)four-tenths;*/
    width: calc(4 / 10 * $fullpercentage);
  }

  $(prefix)seven-fifteenths{
    width: calc(7 / 15 * $fullpercentage);
  }

  $(prefix)eight-fifteenths{
    width: calc(8 / 15 * $fullpercentage);
  }

  $(prefix)nine-fifteenths{
  /*@extend $(prefix)six-tenths;*/
     width: calc(6 / 10 * $fullpercentage);
  }

  $(prefix)ten-fifteenths{
  /*@extend $(prefix)two-thirds;*/
    width: calc(2 / 3 * $fullpercentage);
  }

  $(prefix)eleven-fifteenths{
    width: calc(11 / 15 * $fullpercentage);
  }

  $(prefix)twelve-fifteenths{
  /*@extend $(prefix)eight-tenths;*/
    width: calc(8 / 10 * $fullpercentage);
  }

  $(prefix)thirteen-fifteenths{
    width: calc(13 / 15 * $fullpercentage);
  }

  $(prefix)fourteen-fifteenths{
    width: calc(14 / 15 * $fullpercentage);
  }

/*//Sixteenths*/
  $(prefix)one-sixteenth{
    width: calc(1 / 16 * $fullpercentage);
  }

  $(prefix)two-sixteenths{
  /*@extend $(prefix)one-eighth;*/
    width: calc(1 / 8 * $fullpercentage);
  }

  $(prefix)three-sixteenths{
    width: calc(3 / 16 * $fullpercentage);
  }

  $(prefix)four-sixteenths{
  /*@extend $(prefix)two-eighths;*/
    width: calc(2 / 8 * $fullpercentage);
  }

  $(prefix)five-sixteenths{
    width: calc(5 / 16 * $fullpercentage);
  }

  $(prefix)six-sixteenths{
  /*@extend $(prefix)three-eighths;*/
    width: calc(3 / 8 * $fullpercentage);
  }

  $(prefix)seven-sixteenths{
    width: calc(7 / 16 * $fullpercentage);
  }

  $(prefix)eight-sixteenths{
  /*@extend $(prefix)four-eighths;*/
    width: calc(4 / 8 * $fullpercentage);
  }

  $(prefix)nine-sixteenths{
    width: calc(9 / 16 * $fullpercentage);
  }

  $(prefix)ten-sixteenths{
  /*@extend $(prefix)five-eighths;*/
    width: calc(5 / 8 * $fullpercentage);
  }

  $(prefix)eleven-sixteenths{
    width: calc(11 / 16 * $fullpercentage);
  }

  $(prefix)twelve-sixteenths{
  /*@extend $(prefix)six-eighths;*/
    width: calc(6 / 8 * $fullpercentage);
  }

  $(prefix)thirteen-sixteenths{
    width: calc(13 / 16 * $fullpercentage);
  }

  $(prefix)fourteen-sixteenths{
  /*@extend $(prefix)seven-eighths;*/
    width: calc(7 / 8min- * $fullpercentage);
  }

  $(prefix)fifteen-sixteenths{
    width: calc(15 / 16 * $fullpercentage);
  }

}

/*non responsive classes */
@mixin device-type;

/*responsive classes*/
@each $name in $breakpoint-has-widths{
  @media(--$name){
    @mixin device-type $(name)--;
  }
}