@media (max-width: calc(576px - 1px)) {
  .sm-up {
    display: none !important;
  }
}

@media (max-width: calc(768px - 1px)) {
  .md-up {
    display: none !important;
  }
}

@media (max-width: calc(1080px - 1px)) {
  .lg-up {
    display: none !important;
  }
}

@media (max-width: calc(1400px - 1px)) {
  .xl-up {
    display: none !important;
  }
}

@media (min-width: 576px) {
  .sm-down {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .md-down {
    display: none !important;
  }
}

@media (min-width: 1080px) {
  .lg-down {
    display: none !important;
  }
}

@media (min-width: 1400px) {
  .xl-down {
    display: none !important;
  }
}

.col-1 {
  padding: 10px;
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: calc(100% * (1/12));
  max-width: calc(100% * (1/12));
}

.col-2 {
  padding: 10px;
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: calc(100% * (2/12));
  max-width: calc(100% * (2/12));
}

.col-3 {
  padding: 10px;
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: calc(100% * (3/12));
  max-width: calc(100% * (3/12));
}

.col-4 {
  padding: 10px;
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: calc(100% * (4/12));
  max-width: calc(100% * (4/12));
}

.col-5 {
  padding: 10px;
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: calc(100% * (5/12));
  max-width: calc(100% * (5/12));
}

.col-6 {
  padding: 10px;
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: calc(100% * (6/12));
  max-width: calc(100% * (6/12));
}

.col-7 {
  padding: 10px;
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: calc(100% * (7/12));
  max-width: calc(100% * (7/12));
}

.col-8 {
  padding: 10px;
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: calc(100% * (8/12));
  max-width: calc(100% * (8/12));
}

.col-9 {
  padding: 10px;
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: calc(100% * (9/12));
  max-width: calc(100% * (9/12));
}

.col-10 {
  padding: 10px;
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: calc(100% * (10/12));
  max-width: calc(100% * (10/12));
}

.col-11 {
  padding: 10px;
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: calc(100% * (11/12));
  max-width: calc(100% * (11/12));
}

.col-12 {
  padding: 10px;
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: calc(100% * (12/12));
  max-width: calc(100% * (12/12));
}

@media (min-width: 576px) {
  .col-1-sm {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (1/12));
    max-width: calc(100% * (1/12));
  }
}

@media (min-width: 576px) {
  .col-2-sm {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (2/12));
    max-width: calc(100% * (2/12));
  }
}

@media (min-width: 576px) {
  .col-3-sm {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (3/12));
    max-width: calc(100% * (3/12));
  }
}

@media (min-width: 576px) {
  .col-4-sm {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (4/12));
    max-width: calc(100% * (4/12));
  }
}

@media (min-width: 576px) {
  .col-5-sm {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (5/12));
    max-width: calc(100% * (5/12));
  }
}

@media (min-width: 576px) {
  .col-6-sm {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (6/12));
    max-width: calc(100% * (6/12));
  }
}

@media (min-width: 576px) {
  .col-7-sm {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (7/12));
    max-width: calc(100% * (7/12));
  }
}

@media (min-width: 576px) {
  .col-8-sm {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (8/12));
    max-width: calc(100% * (8/12));
  }
}

@media (min-width: 576px) {
  .col-9-sm {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (9/12));
    max-width: calc(100% * (9/12));
  }
}

@media (min-width: 576px) {
  .col-10-sm {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (10/12));
    max-width: calc(100% * (10/12));
  }
}

@media (min-width: 576px) {
  .col-11-sm {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (11/12));
    max-width: calc(100% * (11/12));
  }
}

@media (min-width: 576px) {
  .col-12-sm {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (12/12));
    max-width: calc(100% * (12/12));
  }
}

@media (min-width: 768px) {
  .col-1-md {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (1/12));
    max-width: calc(100% * (1/12));
  }
}

@media (min-width: 768px) {
  .col-2-md {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (2/12));
    max-width: calc(100% * (2/12));
  }
}

@media (min-width: 768px) {
  .col-3-md {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (3/12));
    max-width: calc(100% * (3/12));
  }
}

@media (min-width: 768px) {
  .col-4-md {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (4/12));
    max-width: calc(100% * (4/12));
  }
}

@media (min-width: 768px) {
  .col-5-md {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (5/12));
    max-width: calc(100% * (5/12));
  }
}

@media (min-width: 768px) {
  .col-6-md {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (6/12));
    max-width: calc(100% * (6/12));
  }
}

@media (min-width: 768px) {
  .col-7-md {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (7/12));
    max-width: calc(100% * (7/12));
  }
}

@media (min-width: 768px) {
  .col-8-md {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (8/12));
    max-width: calc(100% * (8/12));
  }
}

@media (min-width: 768px) {
  .col-9-md {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (9/12));
    max-width: calc(100% * (9/12));
  }
}

@media (min-width: 768px) {
  .col-10-md {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (10/12));
    max-width: calc(100% * (10/12));
  }
}

@media (min-width: 768px) {
  .col-11-md {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (11/12));
    max-width: calc(100% * (11/12));
  }
}

@media (min-width: 768px) {
  .col-12-md {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (12/12));
    max-width: calc(100% * (12/12));
  }
}

@media (min-width: 1080px) {
  .col-1-lg {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (1/12));
    max-width: calc(100% * (1/12));
  }
}

@media (min-width: 1080px) {
  .col-2-lg {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (2/12));
    max-width: calc(100% * (2/12));
  }
}

@media (min-width: 1080px) {
  .col-3-lg {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (3/12));
    max-width: calc(100% * (3/12));
  }
}

@media (min-width: 1080px) {
  .col-4-lg {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (4/12));
    max-width: calc(100% * (4/12));
  }
}

@media (min-width: 1080px) {
  .col-5-lg {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (5/12));
    max-width: calc(100% * (5/12));
  }
}

@media (min-width: 1080px) {
  .col-6-lg {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (6/12));
    max-width: calc(100% * (6/12));
  }
}

@media (min-width: 1080px) {
  .col-7-lg {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (7/12));
    max-width: calc(100% * (7/12));
  }
}

@media (min-width: 1080px) {
  .col-8-lg {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (8/12));
    max-width: calc(100% * (8/12));
  }
}

@media (min-width: 1080px) {
  .col-9-lg {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (9/12));
    max-width: calc(100% * (9/12));
  }
}

@media (min-width: 1080px) {
  .col-10-lg {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (10/12));
    max-width: calc(100% * (10/12));
  }
}

@media (min-width: 1080px) {
  .col-11-lg {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (11/12));
    max-width: calc(100% * (11/12));
  }
}

@media (min-width: 1080px) {
  .col-12-lg {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (12/12));
    max-width: calc(100% * (12/12));
  }
}

@media (min-width: 1400px) {
  .col-1-xl {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (1/12));
    max-width: calc(100% * (1/12));
  }
}

@media (min-width: 1400px) {
  .col-2-xl {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (2/12));
    max-width: calc(100% * (2/12));
  }
}

@media (min-width: 1400px) {
  .col-3-xl {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (3/12));
    max-width: calc(100% * (3/12));
  }
}

@media (min-width: 1400px) {
  .col-4-xl {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (4/12));
    max-width: calc(100% * (4/12));
  }
}

@media (min-width: 1400px) {
  .col-5-xl {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (5/12));
    max-width: calc(100% * (5/12));
  }
}

@media (min-width: 1400px) {
  .col-6-xl {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (6/12));
    max-width: calc(100% * (6/12));
  }
}

@media (min-width: 1400px) {
  .col-7-xl {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (7/12));
    max-width: calc(100% * (7/12));
  }
}

@media (min-width: 1400px) {
  .col-8-xl {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (8/12));
    max-width: calc(100% * (8/12));
  }
}

@media (min-width: 1400px) {
  .col-9-xl {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (9/12));
    max-width: calc(100% * (9/12));
  }
}

@media (min-width: 1400px) {
  .col-10-xl {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (10/12));
    max-width: calc(100% * (10/12));
  }
}

@media (min-width: 1400px) {
  .col-11-xl {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (11/12));
    max-width: calc(100% * (11/12));
  }
}

@media (min-width: 1400px) {
  .col-12-xl {
    padding: 10px;
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    width: calc(100% * (12/12));
    max-width: calc(100% * (12/12));
  }
}

.ofs-0 {
  margin-left: calc(100% * (0/12));
}

.ofs-1 {
  margin-left: calc(100% * (1/12));
}

.ofs-2 {
  margin-left: calc(100% * (2/12));
}

.ofs-3 {
  margin-left: calc(100% * (3/12));
}

.ofs-4 {
  margin-left: calc(100% * (4/12));
}

.ofs-5 {
  margin-left: calc(100% * (5/12));
}

.ofs-6 {
  margin-left: calc(100% * (6/12));
}

.ofs-7 {
  margin-left: calc(100% * (7/12));
}

.ofs-8 {
  margin-left: calc(100% * (8/12));
}

.ofs-9 {
  margin-left: calc(100% * (9/12));
}

.ofs-10 {
  margin-left: calc(100% * (10/12));
}

.ofs-11 {
  margin-left: calc(100% * (11/12));
}

.ofs-12 {
  margin-left: calc(100% * (12/12));
}

@media (min-width: 576px) {
  .ofs-0-sm {
    margin-left: calc(100% * (0/12));
  }
}

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

@media (min-width: 576px) {
  .ofs-2-sm {
    margin-left: calc(100% * (2/12));
  }
}

@media (min-width: 576px) {
  .ofs-3-sm {
    margin-left: calc(100% * (3/12));
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 1080px) {
  .ofs-0-lg {
    margin-left: calc(100% * (0/12));
  }
}

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

@media (min-width: 1080px) {
  .ofs-2-lg {
    margin-left: calc(100% * (2/12));
  }
}

@media (min-width: 1080px) {
  .ofs-3-lg {
    margin-left: calc(100% * (3/12));
  }
}

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

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

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

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

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

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

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

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

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

@media (min-width: 1400px) {
  .ofs-0-xl {
    margin-left: calc(100% * (0/12));
  }
}

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

@media (min-width: 1400px) {
  .ofs-2-xl {
    margin-left: calc(100% * (2/12));
  }
}

@media (min-width: 1400px) {
  .ofs-3-xl {
    margin-left: calc(100% * (3/12));
  }
}

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

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

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

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

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

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

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

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

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

.ord-1 {
  order: 1;
}

.ord-2 {
  order: 2;
}

.ord-3 {
  order: 3;
}

.ord-4 {
  order: 4;
}

.ord-5 {
  order: 5;
}

.ord-6 {
  order: 6;
}

.ord-7 {
  order: 7;
}

.ord-8 {
  order: 8;
}

.ord-9 {
  order: 9;
}

.ord-10 {
  order: 10;
}

@media (min-width: 576px) {
  .ord-1-sm {
    order: 1;
  }
}

@media (min-width: 576px) {
  .ord-2-sm {
    order: 2;
  }
}

@media (min-width: 576px) {
  .ord-3-sm {
    order: 3;
  }
}

@media (min-width: 576px) {
  .ord-4-sm {
    order: 4;
  }
}

@media (min-width: 576px) {
  .ord-5-sm {
    order: 5;
  }
}

@media (min-width: 576px) {
  .ord-6-sm {
    order: 6;
  }
}

@media (min-width: 576px) {
  .ord-7-sm {
    order: 7;
  }
}

@media (min-width: 576px) {
  .ord-8-sm {
    order: 8;
  }
}

@media (min-width: 576px) {
  .ord-9-sm {
    order: 9;
  }
}

@media (min-width: 576px) {
  .ord-10-sm {
    order: 10;
  }
}

@media (min-width: 768px) {
  .ord-1-md {
    order: 1;
  }
}

@media (min-width: 768px) {
  .ord-2-md {
    order: 2;
  }
}

@media (min-width: 768px) {
  .ord-3-md {
    order: 3;
  }
}

@media (min-width: 768px) {
  .ord-4-md {
    order: 4;
  }
}

@media (min-width: 768px) {
  .ord-5-md {
    order: 5;
  }
}

@media (min-width: 768px) {
  .ord-6-md {
    order: 6;
  }
}

@media (min-width: 768px) {
  .ord-7-md {
    order: 7;
  }
}

@media (min-width: 768px) {
  .ord-8-md {
    order: 8;
  }
}

@media (min-width: 768px) {
  .ord-9-md {
    order: 9;
  }
}

@media (min-width: 768px) {
  .ord-10-md {
    order: 10;
  }
}

@media (min-width: 1080px) {
  .ord-1-lg {
    order: 1;
  }
}

@media (min-width: 1080px) {
  .ord-2-lg {
    order: 2;
  }
}

@media (min-width: 1080px) {
  .ord-3-lg {
    order: 3;
  }
}

@media (min-width: 1080px) {
  .ord-4-lg {
    order: 4;
  }
}

@media (min-width: 1080px) {
  .ord-5-lg {
    order: 5;
  }
}

@media (min-width: 1080px) {
  .ord-6-lg {
    order: 6;
  }
}

@media (min-width: 1080px) {
  .ord-7-lg {
    order: 7;
  }
}

@media (min-width: 1080px) {
  .ord-8-lg {
    order: 8;
  }
}

@media (min-width: 1080px) {
  .ord-9-lg {
    order: 9;
  }
}

@media (min-width: 1080px) {
  .ord-10-lg {
    order: 10;
  }
}

@media (min-width: 1400px) {
  .ord-1-xl {
    order: 1;
  }
}

@media (min-width: 1400px) {
  .ord-2-xl {
    order: 2;
  }
}

@media (min-width: 1400px) {
  .ord-3-xl {
    order: 3;
  }
}

@media (min-width: 1400px) {
  .ord-4-xl {
    order: 4;
  }
}

@media (min-width: 1400px) {
  .ord-5-xl {
    order: 5;
  }
}

@media (min-width: 1400px) {
  .ord-6-xl {
    order: 6;
  }
}

@media (min-width: 1400px) {
  .ord-7-xl {
    order: 7;
  }
}

@media (min-width: 1400px) {
  .ord-8-xl {
    order: 8;
  }
}

@media (min-width: 1400px) {
  .ord-9-xl {
    order: 9;
  }
}

@media (min-width: 1400px) {
  .ord-10-xl {
    order: 10;
  }
}

.corset {
  margin: 0 auto;
  width: calc(100% - 120px);
  display: flex;
  flex-direction: column;
  max-width: 1400px;
}
@media (max-width: calc(768px - 1px)) {
  .corset {
    width: calc(100% - 60px);
  }
}

.row {
  align-self: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: calc(100% + (2 * 10px));
  margin-left: -10px;
  margin-right: -10px;
}
.row > * {
  padding-left: 10px;
  padding-right: 10px;
}

.col {
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

.grid-helper {
  position: fixed;
  top: 15px;
  right: 15px;
  padding: 10px;
  border-radius: 100%;
  color: #fff;
  background-color: #000;
  font-family: monospace;
  z-index: 999999;
  box-shadow: 0 0 10px #fff;
}
.grid-helper:hover {
  opacity: 0;
}
.grid-helper::after {
  content: "xs";
}
@media (min-width: 576px) {
  .grid-helper::after {
    content: "sm";
  }
}
@media (min-width: 768px) {
  .grid-helper::after {
    content: "md";
  }
}
@media (min-width: 1080px) {
  .grid-helper::after {
    content: "lg";
  }
}
@media (min-width: 1400px) {
  .grid-helper::after {
    content: "xl";
  }
}
.grid-helper.b {
  bottom: 15px;
  top: inherit;
}
.grid-helper.l {
  left: 15px;
  right: inherit;
}

/*# sourceMappingURL=grid.css.map */