[class*='col-'] {
  float: left;
  margin: 0;
  padding: 0;
}
/* FLEXIBLE GRID */
/* MOBILE FIRST */
.row {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.col-1 {
  width: 8.33333333%;
}
.col-2 {
  width: 16.66666667%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33333333%;
}
.col-5 {
  width: 41.66666667%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33333333%;
}
.col-8 {
  width: 66.66666667%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33333333%;
}
.col-11 {
  width: 91.66666667%;
}
.col-12 {
  width: 100%;
}
.offset-1 {
  margin-left: 8.33333333%;
}
.offset-2 {
  margin-left: 16.66666667%;
}
.offset-3 {
  margin-left: 25%;
}
.offset-4 {
  margin-left: 33.33333333%;
}
.offset-5 {
  margin-left: 41.66666667%;
}
.offset-6 {
  margin-left: 50%;
}
.offset-7 {
  margin-left: 58.33333333%;
}
.offset-8 {
  margin-left: 66.66666667%;
}
.offset-9 {
  margin-left: 75%;
}
.offset-10 {
  margin-left: 83.33333333%;
}
.offset-11 {
  margin-left: 91.66666667%;
}
.offset-12 {
  margin-left: 100%;
}
/* 01. xSMALL SCREEN > 400px */
@media screen and (min-width: 400px) {
  .colXs-1 {
    width: 8.33333333%;
  }
  .colXs-2 {
    width: 16.66666667%;
  }
  .colXs-3 {
    width: 25%;
  }
  .colXs-4 {
    width: 33.33333333%;
  }
  .colXs-5 {
    width: 41.66666667%;
  }
  .colXs-6 {
    width: 50%;
  }
  .colXs-7 {
    width: 58.33333333%;
  }
  .colXs-8 {
    width: 66.66666667%;
  }
  .colXs-9 {
    width: 75%;
  }
  .colXs-10 {
    width: 83.33333333%;
  }
  .colXs-11 {
    width: 91.66666667%;
  }
  .colXs-12 {
    width: 100%;
  }
  .offsetXs-1 {
    margin-left: 8.33333333%;
  }
  .offsetXs-2 {
    margin-left: 16.66666667%;
  }
  .offsetXs-3 {
    margin-left: 25%;
  }
  .offsetXs-4 {
    margin-left: 33.33333333%;
  }
  .offsetXs-5 {
    margin-left: 41.66666667%;
  }
  .offsetXs-6 {
    margin-left: 50%;
  }
  .offsetXs-7 {
    margin-left: 58.33333333%;
  }
  .offsetXs-8 {
    margin-left: 66.66666667%;
  }
  .offsetXs-9 {
    margin-left: 75%;
  }
  .offsetXs-10 {
    margin-left: 83.33333333%;
  }
  .offsetXs-11 {
    margin-left: 91.66666667%;
  }
  .offsetXs-12 {
    margin-left: 100%;
  }
  .clearXs {
    overflow: hidden;
  }
}
/* 02. SMALL SCREEN > 550px */
@media screen and (min-width: 550px) {
  .colSm-1 {
    width: 8.33333333%;
  }
  .colSm-2 {
    width: 16.66666667%;
  }
  .colSm-3 {
    width: 25%;
  }
  .colSm-4 {
    width: 33.33333333%;
  }
  .colSm-5 {
    width: 41.66666667%;
  }
  .colSm-6 {
    width: 50%;
  }
  .colSm-7 {
    width: 58.33333333%;
  }
  .colSm-8 {
    width: 66.66666667%;
  }
  .colSm-9 {
    width: 75%;
  }
  .colSm-10 {
    width: 83.33333333%;
  }
  .colSm-11 {
    width: 91.66666667%;
  }
  .colSm-12 {
    width: 100%;
  }
  .offsetSm-1 {
    margin-left: 8.33333333%;
  }
  .offsetSm-2 {
    margin-left: 16.66666667%;
  }
  .offsetSm-3 {
    margin-left: 25%;
  }
  .offsetSm-4 {
    margin-left: 33.33333333%;
  }
  .offsetSm-5 {
    margin-left: 41.66666667%;
  }
  .offsetSm-6 {
    margin-left: 50%;
  }
  .offsetSm-7 {
    margin-left: 58.33333333%;
  }
  .offsetSm-8 {
    margin-left: 66.66666667%;
  }
  .offsetSm-9 {
    margin-left: 75%;
  }
  .offsetSm-10 {
    margin-left: 83.33333333%;
  }
  .offsetSm-11 {
    margin-left: 91.66666667%;
  }
  .offsetSm-12 {
    margin-left: 100%;
  }
}
/* 03. MEDIUM SCREEN > 750px */
@media screen and (min-width: 750px) {
  .colMd-1 {
    width: 8.33333333%;
  }
  .colMd-2 {
    width: 16.66666667%;
  }
  .colMd-3 {
    width: 25%;
  }
  .colMd-4 {
    width: 33.33333333%;
  }
  .colMd-5 {
    width: 41.66666667%;
  }
  .colMd-6 {
    width: 50%;
  }
  .colMd-7 {
    width: 58.33333333%;
  }
  .colMd-8 {
    width: 66.66666667%;
  }
  .colMd-9 {
    width: 75%;
  }
  .colMd-10 {
    width: 83.33333333%;
  }
  .colMd-11 {
    width: 91.66666667%;
  }
  .colMd-12 {
    width: 100%;
  }
  .offsetMd-1 {
    margin-left: 8.33333333%;
  }
  .offsetMd-2 {
    margin-left: 16.66666667%;
  }
  .offsetMd-3 {
    margin-left: 25%;
  }
  .offsetMd-4 {
    margin-left: 33.33333333%;
  }
  .offsetMd-5 {
    margin-left: 41.66666667%;
  }
  .offsetMd-6 {
    margin-left: 50%;
  }
  .offsetMd-7 {
    margin-left: 58.33333333%;
  }
  .offsetMd-8 {
    margin-left: 66.66666667%;
  }
  .offsetMd-9 {
    margin-left: 75%;
  }
  .offsetMd-10 {
    margin-left: 83.33333333%;
  }
  .offsetMd-11 {
    margin-left: 91.66666667%;
  }
  .offsetMd-12 {
    margin-left: 100%;
  }
}
/* 04. LARGE SCREEN > 1000px */
@media screen and (min-width: 1000px) {
  .colLg-1 {
    width: 8.33333333%;
  }
  .colLg-2 {
    width: 16.66666667%;
  }
  .colLg-3 {
    width: 25%;
  }
  .colLg-4 {
    width: 33.33333333%;
  }
  .colLg-5 {
    width: 41.66666667%;
  }
  .colLg-6 {
    width: 50%;
  }
  .colLg-7 {
    width: 58.33333333%;
  }
  .colLg-8 {
    width: 66.66666667%;
  }
  .colLg-9 {
    width: 75%;
  }
  .colLg-10 {
    width: 83.33333333%;
  }
  .colLg-11 {
    width: 91.66666667%;
  }
  .colLg-12 {
    width: 100%;
  }
  .offsetLg-1 {
    margin-left: 8.33333333%;
  }
  .offsetLg-2 {
    margin-left: 16.66666667%;
  }
  .offsetLg-3 {
    margin-left: 25%;
  }
  .offsetLg-4 {
    margin-left: 33.33333333%;
  }
  .offsetLg-5 {
    margin-left: 41.66666667%;
  }
  .offsetLg-6 {
    margin-left: 50%;
  }
  .offsetLg-7 {
    margin-left: 58.33333333%;
  }
  .offsetLg-8 {
    margin-left: 66.66666667%;
  }
  .offsetLg-9 {
    margin-left: 75%;
  }
  .offsetLg-10 {
    margin-left: 83.33333333%;
  }
  .offsetLg-11 {
    margin-left: 91.66666667%;
  }
  .offsetLg-12 {
    margin-left: 100%;
  }
}