/**
 * SASS/SCSS/Compass Transcription of Skeleton Responsive Grid
 * originally authored by Dave Gamache. This translation offers
 * mixins that support fluid and as well as fixed grids to supplement
 * the work that Dave Gamache has done.
 * @author Dennis Thompson <http://www.atomicpages.net>
 * @copyright Copyright (c) 2013 AtomicPages LLC
 * @license MIT
 * @version 1.6.1
 */
/* BASE GRID
 * ------------------------------------------------ */
.container {
  position: relative;
  width: 1024px;
  height: 100%;
  margin: 0 auto;
  padding: 0; }
  .container .column,
  .container .columns {
    float: left;
    display: inline;
    position: relative;
    margin: 0; }
    .container .column.alpha,
    .container .columns.alpha {
      margin-left: 0; }
    .container .column.omega,
    .container .columns.omega {
      margin-right: 0; }

.row {
  margin-bottom: 20px; }

/* Overrides */
.container .column,
.container .columns {
  margin-left: 1%;
  margin-right: 1%; }

.container .one.column,
.container .one.columns {
  width: 4.25%; }
.container .two.columns {
  width: 10.5%; }
.container .three.columns {
  width: 16.75%; }
.container .four.columns {
  width: 23%; }
.container .five.columns {
  width: 29.25%; }
.container .six.columns {
  width: 35.5%; }
.container .seven.columns {
  width: 41.75%; }
.container .eight.columns {
  width: 48%; }
.container .nine.columns {
  width: 54.25%; }
.container .ten.columns {
  width: 60.5%; }
.container .eleven.columns {
  width: 66.75%; }
.container .twelve.columns {
  width: 73%; }
.container .thirteen.columns {
  width: 79.25%; }
.container .fourteen.columns {
  width: 85.5%; }
.container .fifteen.columns {
  width: 91.75%; }
.container .sixteen.columns {
  width: 98%; }
.container .columns.one-third {
  width: 30.66667%; }
.container .columns.two-thirds {
  width: 63.33333%; }
.container .offset-by-one {
  padding-left: 6.25%; }
.container .offset-by-two {
  padding-left: 12.5%; }
.container .offset-by-three {
  padding-left: 18.75%; }
.container .offset-by-four {
  padding-left: 25%; }
.container .offset-by-five {
  padding-left: 31.25%; }
.container .offset-by-six {
  padding-left: 37.5%; }
.container .offset-by-seven {
  padding-left: 43.75%; }
.container .offset-by-eight {
  padding-left: 50%; }
.container .offset-by-nine {
  padding-left: 56.25%; }
.container .offset-by-ten {
  padding-left: 62.5%; }
.container .offset-by-eleven {
  padding-left: 68.75%; }
.container .offset-by-twelve {
  padding-left: 75%; }
.container .offset-by-thirteen {
  padding-left: 81.25%; }
.container .offset-by-fourteen {
  padding-left: 87.5%; }
.container .offset-by-fifteen {
  padding-left: 93.75%; }

/* MOBILE
 * ------------------------------------------------ */
@media only screen and (max-width: 1024px) {
  .container {
    width: 100%; }
    .container .column,
    .container .columns {
      margin-left: 0;
      margin-right: 0; }
    .container .one.column {
      width: 100%; }
    .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns {
      width: 100%; }
    .container .one-third.column {
      width: 100%; }
    .container .two-third.column {
      width: 100%; }
    .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen {
      padding-left: 0; } }
/* CLEARING
 * ------------------------------------------------ */
.container:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.clearfix, .row {
  zoom: 1; }
  .clearfix:before, .clearfix:after, .row:before, .row:after {
    content: "\0020";
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0; }
  .clearfix:after, .row:after {
    clear: both; }

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }