.container {
  max-width: 100%;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-left: 14px;
  padding-right: 14px;

  @media (min-width: 768px) {
    max-width: 100%;
  }

  @media (min-width: 992px) {
    max-width: var(--lg-container);
  }

  @media (min-width: 1200px) {
    max-width: var(--xl-container);
  }

  @media (min-width: 1400px) {
    max-width: var(--xxl-container);
  }
}

.container-no-margin {
  width: 100%;
  max-width: 100%;

  @media (min-width: 1600px) {
    max-width: var(--max);
    margin: auto;
  }
}

.container-no-margin-lg {
  width: 100%;
  max-width: 100%;

  @media (max-width: var(--lg)) {
    max-width: 100%;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 14px;
    padding-right: 14px;
  }

  @media (min-width: 1600px) {
    max-width: var(--max);
    margin: auto;
  }
}

.container-only-left {
  max-width: 100%;
  margin-left: 0;
  padding-left: 14px;
  padding-right: 14px;

  @media (min-width: 768px) {
    margin-left: 0;
    padding-right: 0;
  }

  @media (min-width: 992px) {
    margin-left: calc(50% - var(--lg-container) / 2);
  }

  @media (min-width: 1200px) {
    margin-left: calc(50% - var(--xl-container) / 2);
  }

  @media (min-width: 1400px) {
    margin-left: calc(50% - var(--xxl-container) / 2);
  }

  @media (min-width: 1600px) {
    margin-right: calc(50% - var(--max) / 2);
  }
}

.container-only-right {
  max-width: 100%;
  margin-right: 0;
  padding-left: 14px;
  padding-right: 14px;

  @media (min-width: 768px) {
    margin-right: 0;
    padding-left: 0;
  }

  @media (min-width: 992px) {
    margin-right: calc(50% - var(--lg-container) / 2);
  }

  @media (min-width: 1200px) {
    margin-right: calc(50% - var(--xl-container) / 2);
  }

  @media (min-width: 1400px) {
    margin-right: calc(50% - var(--xxl-container) / 2);
  }

  @media (min-width: 1600px) {
    max-width: var(--max);
    margin-left: auto;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--gutter-x) * -.5);
  margin-left: calc(var(--gutter-x) * -.5);
}

.row.mb {
  margin-bottom: 25px;
}

.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--gutter-x) * .5);
  padding-left: calc(var(--gutter-x) * .5);
}

.col-1 {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .col-1 {
    width: calc(1 / 12 * 100%);
  }
}

.col-2 {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .col-2 {
    width: calc(2 / 12 * 100%);
  }
}

.col-3 {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .col-3 {
    width: calc(3 / 12 * 100%);
  }
}

.col-4 {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .col-4 {
    width: calc(4 / 12 * 100%);
  }
}

.col-5 {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .col-5 {
    width: calc(5 / 12 * 100%);
  }
}

.col-6 {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .col-6 {
    width: calc(6 / 12 * 100%);
  }
}

.col-7 {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .col-7 {
    width: calc(7 / 12 * 100%);
  }
}

.col-8 {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .col-8 {
    width: calc(8 / 12 * 100%);
  }
}

.col-9 {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .col-9 {
    width: calc(9 / 12 * 100%);
  }
}

.col-10 {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .col-10 {
    width: calc(10 / 12 * 100%);
  }
}

.col-11 {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .col-11 {
    width: calc(11 / 12 * 100%);
  }
}

.col-12 {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .col-12 {
    width: calc(12 / 12 * 100%);
  }
}

@media (min-width: 768px) {
  .offset-1 {
    margin-left: calc(1 / 12 * 100%);
  }
}

@media (min-width: 768px) {
  .offset-2 {
    margin-left: calc(2 / 12 * 100%);
  }
}
@media (min-width: 768px) {
  .offset-3 {
    margin-left: calc(3 / 12 * 100%);
  }
}

@media (min-width: 768px) {
  .offset-4 {
    margin-left: calc(4 / 12 * 100%);
  }
}

@media (min-width: 768px) {
  .offset-5 {
    margin-left: calc(5 / 12 * 100%);
  }
}

@media (min-width: 768px) {
  .offset-6 {
    margin-left: calc(6 / 12 * 100%);
  }
}

@media (min-width: 768px) {
  .offset-7 {
    margin-left: calc(7 / 12 * 100%);
  }
}

@media (min-width: 768px) {
  .offset-8 {
    margin-left: calc(8 / 12 * 100%);
  }
}

@media (min-width: 768px) {
  .offset-9 {
    margin-left: calc(9 / 12 * 100%);
  }
}

@media (min-width: 768px) {
  .offset-10 {
    margin-left: calc(10 / 12 * 100%);
  }
}

@media (min-width: 768px) {
  .offset-11 {
    margin-left: calc(11 / 12 * 100%);
  }
}

@media (min-width: 768px) {
  .offset-12 {
    margin-left: calc(12 / 12 * 100%);
  }
}