@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: 0 1em;
  position: relative;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: calc(100% * (1/12));
  max-width: calc(100% * (1/12)); }

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

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

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

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

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

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

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

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

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

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

.col-12 {
  padding: 0 1em;
  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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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: 0 1em;
    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; } }

section {
  padding: 5em 0; }

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

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

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

.grid-helper {
  position: fixed;
  top: 15px;
  right: 15px;
  padding: 10px;
  border-radius: 100%;
  color: #fff;
  background-color: #000;
  font-family: monospace;
  z-index: 999999999;
  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=layout.css.map */