.container {
  width: 100%;
  padding: 0 calc(20px / 2);
  margin: 0 auto;
}

.container .row {
  display: flex;
  flex-wrap: wrap;
}

.container [class^='col-'] {
  padding: 0 calc(20px / 2);
}

.container .col-sm-1 {
  width: 50%;
}

.container .col-sm-2 {
  width: 100%;
}

@media screen and (min-width: 786px) {
  .container {
    padding: 0 20px;
  }

  .container .col-md-1 {
    width: 25%;
  }

  .container .col-md-2 {
    width: 50%;
  }

  .container .col-md-3 {
    width: 75%;
  }

  .container .col-md-4 {
    width: 100%;
  }
}

@media screen and (min-width: 992px) {
  .container {
    max-width: 1100px;
  }

  .container .col-lg-1 {
    width: calc(1 / 12 * 100%);
  }
  .container .col-lg-2 {
    width: calc(2 / 12 * 100%);
  }
  .container .col-lg-3 {
    width: calc(3 / 12 * 100%);
  }
  .container .col-lg-4 {
    width: calc(4 / 12 * 100%);
  }
  .container .col-lg-5 {
    width: calc(5 / 12 * 100%);
  }
  .container .col-lg-6 {
    width: calc(6 / 12 * 100%);
  }
  .container .col-lg-7 {
    width: calc(7 / 12 * 100%);
  }
  .container .col-lg-8 {
    width: calc(8 / 12 * 100%);
  }
  .container .col-lg-9 {
    width: calc(9 / 12 * 100%);
  }
  .container .col-lg-10 {
    width: calc(10 / 12 * 100%);
  }
  .container .col-lg-11 {
    width: calc(11 / 12 * 100%);
  }
  .container .col-lg-12 {
    width: calc(12 / 12 * 100%);
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sm-only {
  @media screen and (min-width: 786px) {
    display: none !important;
  }
}

.md-only {
  @media screen and (max-width: 785px) {
    display: none !important;
  }

  @media screen and (min-width: 992px) {
    display: none !important;
  }
}

.lg-only {
  @media screen and (max-width: 991px) {
    display: none !important;
  }
}

.sm-hidden {
  @media screen and (max-width: 785px) {
    display: none !important;
  }
}

.md-hidden {
  @media screen and (min-width: 786px) and(max-width: 991px) {
    display: none !important;
  }
}

.lg-hidden {
  @media screen and (min-width: 992px) {
    display: none !important;
  }
}