:root {
    --num-col: 12;
    --grid-spacing: calc(100% / var(--num-col));
}

/* ROWS */

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

/* DIRECTIONS */

.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
@media (min-width: 501px) {
    .flex-sm-row { flex-direction: row !important; }
    .flex-sm-column { flex-direction: column !important; }
    .flex-sm-row-reverse { flex-direction: row-reverse !important; }
    .flex-sm-column-reverse { flex-direction: column-reverse !important; }
}
@media (min-width: 1001px) {
    .flex-md-row { flex-direction: row !important; }
    .flex-md-column { flex-direction: column !important; }
    .flex-md-row-reverse { flex-direction: row-reverse !important; }
    .flex-md-column-reverse { flex-direction: column-reverse !important; }
}
@media (min-width: 1501px) {
    .flex-lg-row { flex-direction: row !important; }
    .flex-lg-column { flex-direction: column !important; }
    .flex-lg-row-reverse { flex-direction: row-reverse !important; }
    .flex-lg-column-reverse { flex-direction: column-reverse !important; }
}

/* JUSTIFY CONTENT */

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
@media (min-width: 501px) {
    .justify-sm-content-start { justify-content: flex-start !important; }
    .justify-sm-content-end { justify-content: flex-end !important; }
    .justify-sm-content-center { justify-content: center !important; }
    .justify-sm-content-between { justify-content: space-between !important; }
}
@media (min-width: 1001px) {
    .justify-md-content-start { justify-content: flex-start !important; }
    .justify-md-content-end { justify-content: flex-end !important; }
    .justify-md-content-center { justify-content: center !important; }
    .justify-md-content-between { justify-content: space-between !important; }
}
@media (min-width: 1501px) {
    .justify-lg-content-start { justify-content: flex-start !important; }
    .justify-lg-content-end { justify-content: flex-end !important; }
    .justify-lg-content-center { justify-content: center !important; }
    .justify-lg-content-between { justify-content: space-between !important; }
}


/* ALIGN ITEMS */

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }
@media (min-width: 501px) {
    .align-sm-items-start { align-items: flex-start !important; }
    .align-sm-items-end { align-items: flex-end !important; }
    .align-sm-items-center { align-items: center !important; }
    .align-sm-items-baseline { align-items: baseline !important; }
    .align-sm-items-stretch { align-items: stretch !important; }
}
@media (min-width: 1001px) {
    .align-md-items-start { align-items: flex-start !important; }
    .align-md-items-end { align-items: flex-end !important; }
    .align-md-items-center { align-items: center !important; }
    .align-md-items-baseline { align-items: baseline !important; }
    .align-md-items-stretch { align-items: stretch !important; }
}
@media (min-width: 1501px) {
    .align-lg-items-start { align-items: flex-start !important; }
    .align-lg-items-end { align-items: flex-end !important; }
    .align-lg-items-center { align-items: center !important; }
    .align-lg-items-baseline { align-items: baseline !important; }
    .align-lg-items-stretch { align-items: stretch !important; }
}


/* WRAP */
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }


/* COLS */


.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: var(--grid-spacing); }
.col-2 { flex: 0 0 auto; width: calc(2 * var(--grid-spacing)); }
.col-3 { flex: 0 0 auto; width: calc(3 * var(--grid-spacing)); }
.col-4 { flex: 0 0 auto; width: calc(4 * var(--grid-spacing)); }
.col-5 { flex: 0 0 auto; width: calc(5 * var(--grid-spacing)); }
.col-6 { flex: 0 0 auto; width: calc(6 * var(--grid-spacing)); }
.col-7 { flex: 0 0 auto; width: calc(7 * var(--grid-spacing)); }
.col-8 { flex: 0 0 auto; width: calc(8 * var(--grid-spacing)); }
.col-9 { flex: 0 0 auto; width: calc(9 * var(--grid-spacing)); }
.col-10 { flex: 0 0 auto; width: calc(10 * var(--grid-spacing)); }
.col-11 { flex: 0 0 auto; width: calc(11 * var(--grid-spacing)); }
.col-12 { flex: 0 0 auto; width: calc(12 * var(--grid-spacing)); }

@media (min-width: 501px) {
    .col-sm { flex: 1 0 0%; }
    .col-sm-auto { flex: 0 0 auto; width: auto; }
    .col-sm-2 { flex: 0 0 auto; width: calc(2 * var(--grid-spacing)); }
    .col-sm-3 { flex: 0 0 auto; width: calc(3 * var(--grid-spacing)); }
    .col-sm-4 { flex: 0 0 auto; width: calc(4 * var(--grid-spacing)); }
    .col-sm-5 { flex: 0 0 auto; width: calc(5 * var(--grid-spacing)); }
    .col-sm-6 { flex: 0 0 auto; width: calc(6 * var(--grid-spacing)); }
    .col-sm-8 { flex: 0 0 auto; width: calc(8 * var(--grid-spacing)); }
    .col-sm-9 { flex: 0 0 auto; width: calc(9 * var(--grid-spacing)); }
    .col-sm-10 { flex: 0 0 auto; width: calc(10 * var(--grid-spacing)); }
    .col-sm-11 { flex: 0 0 auto; width: calc(11 * var(--grid-spacing)); }
    .col-sm-12 { flex: 0 0 auto; width: calc(12 * var(--grid-spacing)); }
}

@media (min-width: 1001px) {
    .col-md { flex: 1 0 0%; }
    .col-md-auto { flex: 0 0 auto; width: auto; }
    .col-md-2 { flex: 0 0 auto; width: calc(2 * var(--grid-spacing)); }
    .col-md-3 { flex: 0 0 auto; width: calc(3 * var(--grid-spacing)); }
    .col-md-4 { flex: 0 0 auto; width: calc(4 * var(--grid-spacing)); }
    .col-md-5 { flex: 0 0 auto; width: calc(5 * var(--grid-spacing)); }
    .col-md-6 { flex: 0 0 auto; width: calc(6 * var(--grid-spacing)); }
    .col-md-7 { flex: 0 0 auto; width: calc(6 * var(--grid-spacing)); }
    .col-md-8 { flex: 0 0 auto; width: calc(8 * var(--grid-spacing)); }
    .col-md-9 { flex: 0 0 auto; width: calc(9 * var(--grid-spacing)); }
    .col-md-10 { flex: 0 0 auto; width: calc(10 * var(--grid-spacing)); }
    .col-md-11 { flex: 0 0 auto; width: calc(11 * var(--grid-spacing)); }
    .col-md-12 { flex: 0 0 auto; width: calc(12 * var(--grid-spacing)); }
}

@media (min-width: 1501px) {
    .col-lg { flex: 1 0 0%; }
    .col-lg-auto { flex: 0 0 auto; width: auto; }
    .col-lg-2 { flex: 0 0 auto; width: calc(2 * var(--grid-spacing)); }
    .col-lg-3 { flex: 0 0 auto; width: calc(3 * var(--grid-spacing)); }
    .col-lg-4 { flex: 0 0 auto; width: calc(4 * var(--grid-spacing)); }
    .col-lg-5 { flex: 0 0 auto; width: calc(5 * var(--grid-spacing)); }
    .col-lg-6 { flex: 0 0 auto; width: calc(6 * var(--grid-spacing)); }
    .col-lg-7 { flex: 0 0 auto; width: calc(6 * var(--grid-spacing)); }
    .col-lg-8 { flex: 0 0 auto; width: calc(8 * var(--grid-spacing)); }
    .col-lg-9 { flex: 0 0 auto; width: calc(9 * var(--grid-spacing)); }
    .col-lg-10 { flex: 0 0 auto; width: calc(10 * var(--grid-spacing)); }
    .col-lg-11 { flex: 0 0 auto; width: calc(11 * var(--grid-spacing)); }
    .col-lg-12 { flex: 0 0 auto; width: calc(12 * var(--grid-spacing)); }
}

/* ORDER */

.order-first { order: -1 !important; }
.order-0 { order: 0 !important; }
.order-1 { order: 1 !important; }
.order-2 { order: 2 !important; }
.order-3 { order: 3 !important; }
.order-4 { order: 4 !important; }
.order-5 { order: 5 !important; }
@media (min-width: 501px) {
    .order-sm-first { order: -1 !important; }
    .order-sm-0 { order: 0 !important; }
    .order-sm-1 { order: 1 !important; }
    .order-sm-2 { order: 2 !important; }
    .order-sm-3 { order: 3 !important; }
    .order-sm-4 { order: 4 !important; }
    .order-sm-5 { order: 5 !important; }
}
@media (min-width: 1001px) {
    .order-md-first { order: -1 !important; }
    .order-md-0 { order: 0 !important; }
    .order-md-1 { order: 1 !important; }
    .order-md-2 { order: 2 !important; }
    .order-md-3 { order: 3 !important; }
    .order-md-4 { order: 4 !important; }
    .order-md-5 { order: 5 !important; }
}
@media (min-width: 1501px) {
    .order-lg-first { order: -1 !important; }
    .order-lg-0 { order: 0 !important; }
    .order-lg-1 { order: 1 !important; }
    .order-lg-2 { order: 2 !important; }
    .order-lg-3 { order: 3 !important; }
    .order-lg-4 { order: 4 !important; }
    .order-lg-5 { order: 5 !important; }
}

/*

@media (min-width: 501px) {}

@media (min-width: 1001px) {}

@media (min-width: 1501px) {}

*/