//
// GRID
// ===============
//

.container:after,
.row:after {
 content: "";
 display: table;
 clear: both;
}

.container {
 position: relative;
 width: 100%;
 max-width: 1140px;
 margin: 0 auto;
 padding: 0 20px;
 box-sizing: border-box;
}

.column,
.columns {
 width: 100%;
 float: left;
 box-sizing: border-box;
}

/* For devices larger than 400px */
@media (min-width: 400px) {
 .container {
  width: 85%;
  padding: 0;
 }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
 .container {
  width: 80%;
 }
 .column,
 .columns {
  margin-left: 4%;
 }
 .column:first-child,
 .columns:first-child {
  margin-left: 0;
 }
 .one {
  &.column,
  &.columns {
   width: 4.66666666667%;
  }
 }
 .two.columns {
  width: 13.3333333333%;
 }
 .three.columns {
  width: 22%;
 }
 .four.columns {
  width: 30.6666666667%;
 }
 .five.columns {
  width: 39.3333333333%;
 }
 .six.columns {
  width: 48%;
 }
 .seven.columns {
  width: 56.6666666667%;
 }
 .eight.columns {
  width: 65.3333333333%;
 }
 .nine.columns {
  width: 74%;
 }
 .ten.columns {
  width: 82.6666666667%;
 }
 .eleven.columns {
  width: 91.3333333333%;
 }
 .twelve.columns {
  width: 100%;
  margin-left: 0;
 }
 .one-third.column {
  width: 30.6666666667%;
 }
 .two-thirds.column {
  width: 65.3333333333%;
 }
 .one-half.column {
  width: 48%;
 }
 /* Offsets */
 .offset-by-one {
  &.column,
  &.columns {
   margin-left: 8.66666666667%;
  }
 }
 .offset-by-two {
  &.column,
  &.columns {
   margin-left: 17.3333333333%;
  }
 }
 .offset-by-three {
  &.column,
  &.columns {
   margin-left: 26%;
  }
 }
 .offset-by-four {
  &.column,
  &.columns {
   margin-left: 34.6666666667%;
  }
 }
 .offset-by-five {
  &.column,
  &.columns {
   margin-left: 43.3333333333%;
  }
 }
 .offset-by-six {
  &.column,
  &.columns {
   margin-left: 52%;
  }
 }
 .offset-by-seven {
  &.column,
  &.columns {
   margin-left: 60.6666666667%;
  }
 }
 .offset-by-eight {
  &.column,
  &.columns {
   margin-left: 69.3333333333%;
  }
 }
 .offset-by-nine {
  &.column,
  &.columns {
   margin-left: 78%;
  }
 }
 .offset-by-ten {
  &.column,
  &.columns {
   margin-left: 86.6666666667%;
  }
 }
 .offset-by-eleven {
  &.column,
  &.columns {
   margin-left: 95.3333333333%;
  }
 }
 .offset-by-one-third {
  &.column,
  &.columns {
   margin-left: 34.6666666667%;
  }
 }
 .offset-by-two-thirds {
  &.column,
  &.columns {
   margin-left: 69.3333333333%;
  }
 }
 .offset-by-one-half {
  &.column,
  &.columns {
   margin-left: 52%;
  }
 }
}

@media (min-width: 1550px) {
 .container {
  max-width: 1400px;
  font-size: 1.2em;
 }
}

@media (min-width: 1900px) {
 .container {
  max-width: 1800px;
  font-size: 1.4em;
 }
}