* {
  box-sizing: border-box;
}
.container {
  margin: 0 auto;
  width: 100%;
  max-width: 1140px;
  padding: 0 30px;
}
@media (max-width: 680px) {
  .container {
    padding: 0 20px;
  }
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}
[class^=col-] {
  padding: 0 15px;
}
[class^=col-sm] {
  flex-basis: 100%;
}
@media (max-width: 680px) {
  .row {
    margin: 0 -10px;
  }
  [class^=col-] {
    padding: 0 10px;
  }
}
.col-xs {
  flex: 1;
}
.col-xs-1  { flex-basis: calc(100% / 12 *  1); }
.col-xs-2  { flex-basis: calc(100% / 12 *  2); }
.col-xs-3  { flex-basis: calc(100% / 12 *  3); }
.col-xs-4  { flex-basis: calc(100% / 12 *  4); }
.col-xs-5  { flex-basis: calc(100% / 12 *  5); }
.col-xs-6  { flex-basis: calc(100% / 12 *  6); }
.col-xs-7  { flex-basis: calc(100% / 12 *  7); }
.col-xs-8  { flex-basis: calc(100% / 12 *  8); }
.col-xs-9  { flex-basis: calc(100% / 12 *  9); }
.col-xs-10 { flex-basis: calc(100% / 12 * 10); }
.col-xs-11 { flex-basis: calc(100% / 12 * 11); }
.col-xs-12 { flex-basis: calc(100% / 12 * 12); }
@media (max-width: 680px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 681px) {
  .col-sm {
    flex: 1;
  }
  .col-sm-1 { flex-basis: calc(100% / 12 * 1); }
  .col-sm-2 { flex-basis: calc(100% / 12 * 2); }
  .col-sm-3 { flex-basis: calc(100% / 12 * 3); }
  .col-sm-4 { flex-basis: calc(100% / 12 * 4); }
  .col-sm-5 { flex-basis: calc(100% / 12 * 5); }
  .col-sm-6 { flex-basis: calc(100% / 12 * 6); }
  .col-sm-7 { flex-basis: calc(100% / 12 * 7); }
  .col-sm-8 { flex-basis: calc(100% / 12 * 8); }
  .col-sm-9 { flex-basis: calc(100% / 12 * 9); }
  .col-sm-10 { flex-basis: calc(100% / 12 * 10); }
  .col-sm-11 { flex-basis: calc(100% / 12 * 11); }
  .col-sm-12 { flex-basis: calc(100% / 12 * 12); }
  .hidden-sm {
    display: none !important;
  }
}