/* -------------------------
 * Sizes
 */
:root {
  --columns: 16;
  --gutter: 10px;
  --outer-gutter: var(--gutter);
  /* column variables */
  --column-1: calc( ( 100% / var(--columns) ) * 1);
  --column-2: calc( ( 100% / var(--columns) ) * 2);
  --column-3: calc( ( 100% / var(--columns) ) * 3);
  --column-4: calc( ( 100% / var(--columns) ) * 4);
  --column-5: calc( ( 100% / var(--columns) ) * 5);
  --column-6: calc( ( 100% / var(--columns) ) * 6);
  --column-7: calc( ( 100% / var(--columns) ) * 7);
  --column-8: calc( ( 100% / var(--columns) ) * 8);
  --column-9: calc( ( 100% / var(--columns) ) * 9);
  --column-10: calc( ( 100% / var(--columns) ) * 10);
  --column-11: calc( ( 100% / var(--columns) ) * 11);
  --column-12: calc( ( 100% / var(--columns) ) * 12);
  --column-13: calc( ( 100% / var(--columns) ) * 13);
  --column-14: calc( ( 100% / var(--columns) ) * 14);
  --column-15: calc( ( 100% / var(--columns) ) * 15);
  --column-16: calc( ( 100% / var(--columns) ) * 16);
}

.raster, .o-raster, .grid, .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* -------------------------
 * Medium
 */
.column-1, .column-md-1, .o-column--md-1, .o-column--1 {
  flex-basis: var(--column-1);
}

.offset-1, .offset-md-1, .o-column--offset-md-1, .o-column--offset-1 {
  margin-left: var(--column-1);
}

.column-2, .column-md-2, .o-column--md-2, .o-column--2 {
  flex-basis: var(--column-2);
}

.offset-2, .offset-md-2, .o-column--offset-md-2, .o-column--offset-2 {
  margin-left: var(--column-2);
}

.column-3, .column-md-3, .o-column--md-3, .o-column--3 {
  flex-basis: var(--column-3);
}

.offset-3, .offset-md-3, .o-column--offset-md-3, .o-column--offset-3 {
  margin-left: var(--column-3);
}

.column-4, .column-md-4, .o-column--md-4, .o-column--4 {
  flex-basis: var(--column-4);
}

.offset-4, .offset-md-4, .o-column--offset-md-4, .o-column--offset-4 {
  margin-left: var(--column-4);
}

.column-5, .column-md-5, .o-column--md-5, .o-column--5 {
  flex-basis: var(--column-5);
}

.offset-5, .offset-md-5, .o-column--offset-md-5, .o-column--offset-5 {
  margin-left: var(--column-5);
}

.column-6, .column-md-6, .o-column--md-6, .o-column--6 {
  flex-basis: var(--column-6);
}

.offset-6, .offset-md-6, .o-column--offset-md-6, .o-column--offset-6 {
  margin-left: var(--column-6);
}

.column-7, .column-md-7, .o-column--md-7, .o-column--7 {
  flex-basis: var(--column-7);
}

.offset-7, .offset-md-7, .o-column--offset-md-7, .o-column--offset-7 {
  margin-left: var(--column-7);
}

.column-8, .column-md-8, .o-column--md-8, .o-column--8 {
  flex-basis: var(--column-8);
}

.offset-8, .offset-md-8, .o-column--offset-md-8, .o-column--offset-8 {
  margin-left: var(--column-8);
}

.column-9, .column-md-9, .o-column--md-9, .o-column--9 {
  flex-basis: var(--column-9);
}

.offset-9, .offset-md-9, .o-column--offset-md-9, .o-column--offset-9 {
  margin-left: var(--column-9);
}

.column-10, .column-md-10, .o-column--md-10, .o-column--10 {
  flex-basis: var(--column-10);
}

.offset-10, .offset-md-10, .o-column--offset-md-10, .o-column--offset-10 {
  margin-left: var(--column-10);
}

.column-11, .column-md-11, .o-column--md-11, .o-column--11 {
  flex-basis: var(--column-11);
}

.offset-11, .offset-md-11, .o-column--offset-md-11, .o-column--offset-11 {
  margin-left: var(--column-11);
}

.column-12, .column-md-12, .o-column--md-12, .o-column--12 {
  flex-basis: var(--column-12);
}

.offset-12, .offset-md-12, .o-column--offset-md-12, .o-column--offset-12 {
  margin-left: var(--column-12);
}

.column-13, .column-md-13, .o-column--md-13, .o-column--13 {
  flex-basis: var(--column-13);
}

.offset-13, .offset-md-13, .o-column--offset-md-13, .o-column--offset-13 {
  margin-left: var(--column-13);
}

.column-14, .column-md-14, .o-column--md-14, .o-column--14 {
  flex-basis: var(--column-14);
}

.offset-14, .offset-md-14, .o-column--offset-md-14, .o-column--offset-14 {
  margin-left: var(--column-14);
}

.column-15, .column-md-15, .o-column--md-15, .o-column--15 {
  flex-basis: var(--column-15);
}

.offset-15, .offset-md-15, .o-column--offset-md-15, .o-column--offset-15 {
  margin-left: var(--column-15);
}

.column-16, .column-md-16, .o-column--md-16, .o-column--16 {
  flex-basis: var(--column-16);
}

.offset-16, .offset-md-16, .o-column--offset-md-16, .o-column--offset-16 {
  margin-left: var(--column-16);
}

.offset-0, .offset-md-0, .o-column--offset-md-0, .o-column--offset-0 {
  margin-left: 0;
}

.column-auto, .column-md-auto, .o-column--md-auto, .o-column--auto {
  flex: 1;
  flex-basis: 0;
}

.align-left, .align-md-left, .o-raster--md-left, .o-raster--left {
  justify-content: flex-start;
}

.align-center, .align-md-center, .o-raster--md-center, .o-raster--center {
  justify-content: center;
}

.align-right, .align-md-right, .o-raster--md-right, .o-raster--right {
  justify-content: flex-end;
}

.align-top, .align-md-top, .o-raster--md-top, .o-raster--top {
  align-items: flex-start;
}

.align-middle, .align-md-middle, .o-raster--md-middle, .o-raster--middle {
  align-items: center;
}

.align-bottom, .align-md-bottom, .o-raster--md-bottom, .o-raster--bottom {
  align-items: flex-end;
}

.order-first, .order-md-first, .o-column--md-first, .o-column--first {
  order: -1;
}

.order-last, .order-md-last, .o-column--md-last, .o-column--last {
  order: 100;
}

/* -------------------------
 * Size: xs
 */
@media (max-width: 400px) {
  .column-xs-1, .o-column--xs-1 {
    flex-basis: var(--column-1);
  }
  .offset-xs-1, .o-column--offset-xs-1 {
    margin-left: var(--column-1);
  }
  .column-xs-2, .o-column--xs-2 {
    flex-basis: var(--column-2);
  }
  .offset-xs-2, .o-column--offset-xs-2 {
    margin-left: var(--column-2);
  }
  .column-xs-3, .o-column--xs-3 {
    flex-basis: var(--column-3);
  }
  .offset-xs-3, .o-column--offset-xs-3 {
    margin-left: var(--column-3);
  }
  .column-xs-4, .o-column--xs-4 {
    flex-basis: var(--column-4);
  }
  .offset-xs-4, .o-column--offset-xs-4 {
    margin-left: var(--column-4);
  }
  .column-xs-5, .o-column--xs-5 {
    flex-basis: var(--column-5);
  }
  .offset-xs-5, .o-column--offset-xs-5 {
    margin-left: var(--column-5);
  }
  .column-xs-6, .o-column--xs-6 {
    flex-basis: var(--column-6);
  }
  .offset-xs-6, .o-column--offset-xs-6 {
    margin-left: var(--column-6);
  }
  .column-xs-7, .o-column--xs-7 {
    flex-basis: var(--column-7);
  }
  .offset-xs-7, .o-column--offset-xs-7 {
    margin-left: var(--column-7);
  }
  .column-xs-8, .o-column--xs-8 {
    flex-basis: var(--column-8);
  }
  .offset-xs-8, .o-column--offset-xs-8 {
    margin-left: var(--column-8);
  }
  .column-xs-9, .o-column--xs-9 {
    flex-basis: var(--column-9);
  }
  .offset-xs-9, .o-column--offset-xs-9 {
    margin-left: var(--column-9);
  }
  .column-xs-10, .o-column--xs-10 {
    flex-basis: var(--column-10);
  }
  .offset-xs-10, .o-column--offset-xs-10 {
    margin-left: var(--column-10);
  }
  .column-xs-11, .o-column--xs-11 {
    flex-basis: var(--column-11);
  }
  .offset-xs-11, .o-column--offset-xs-11 {
    margin-left: var(--column-11);
  }
  .column-xs-12, .o-column--xs-12 {
    flex-basis: var(--column-12);
  }
  .offset-xs-12, .o-column--offset-xs-12 {
    margin-left: var(--column-12);
  }
  .column-xs-13, .o-column--xs-13 {
    flex-basis: var(--column-13);
  }
  .offset-xs-13, .o-column--offset-xs-13 {
    margin-left: var(--column-13);
  }
  .column-xs-14, .o-column--xs-14 {
    flex-basis: var(--column-14);
  }
  .offset-xs-14, .o-column--offset-xs-14 {
    margin-left: var(--column-14);
  }
  .column-xs-15, .o-column--xs-15 {
    flex-basis: var(--column-15);
  }
  .offset-xs-15, .o-column--offset-xs-15 {
    margin-left: var(--column-15);
  }
  .column-xs-16, .o-column--xs-16 {
    flex-basis: var(--column-16);
  }
  .offset-xs-16, .o-column--offset-xs-16 {
    margin-left: var(--column-16);
  }
  .column-xs-auto, .o-column--xs-auto {
    flex: 1;
    flex-basis: 0;
  }
  .offset-xs-0, .o-column--offset-xs-0 {
    margin-left: 0;
  }
  .align-xs-left, .o-raster--xs-left {
    justify-content: flex-start;
  }
  .align-xs-center, .o-raster--xs-center {
    justify-content: center;
  }
  .align-xs-right, .o-raster--xs-right {
    justify-content: flex-end;
  }
  .align-xs-top, .o-raster--xs-top {
    align-items: flex-start;
  }
  .align-xs-middle, .o-raster--xs-middle {
    align-items: center;
  }
  .align-xs-bottom, .o-raster--xs-bottom {
    align-items: flex-end;
  }
  .order-xs-first, .o-column--xs-first {
    order: -1;
  }
  .order-xs-last, .o-column--xs-last {
    order: 100;
  }
}

/* -------------------------
 * Size: sm
 */
@media (max-width: 800px) {
  .column-sm-1, .o-column--sm-1 {
    flex-basis: var(--column-1);
  }
  .offset-sm-1, .o-column--offset-sm-1 {
    margin-left: var(--column-1);
  }
  .column-sm-2, .o-column--sm-2 {
    flex-basis: var(--column-2);
  }
  .offset-sm-2, .o-column--offset-sm-2 {
    margin-left: var(--column-2);
  }
  .column-sm-3, .o-column--sm-3 {
    flex-basis: var(--column-3);
  }
  .offset-sm-3, .o-column--offset-sm-3 {
    margin-left: var(--column-3);
  }
  .column-sm-4, .o-column--sm-4 {
    flex-basis: var(--column-4);
  }
  .offset-sm-4, .o-column--offset-sm-4 {
    margin-left: var(--column-4);
  }
  .column-sm-5, .o-column--sm-5 {
    flex-basis: var(--column-5);
  }
  .offset-sm-5, .o-column--offset-sm-5 {
    margin-left: var(--column-5);
  }
  .column-sm-6, .o-column--sm-6 {
    flex-basis: var(--column-6);
  }
  .offset-sm-6, .o-column--offset-sm-6 {
    margin-left: var(--column-6);
  }
  .column-sm-7, .o-column--sm-7 {
    flex-basis: var(--column-7);
  }
  .offset-sm-7, .o-column--offset-sm-7 {
    margin-left: var(--column-7);
  }
  .column-sm-8, .o-column--sm-8 {
    flex-basis: var(--column-8);
  }
  .offset-sm-8, .o-column--offset-sm-8 {
    margin-left: var(--column-8);
  }
  .column-sm-9, .o-column--sm-9 {
    flex-basis: var(--column-9);
  }
  .offset-sm-9, .o-column--offset-sm-9 {
    margin-left: var(--column-9);
  }
  .column-sm-10, .o-column--sm-10 {
    flex-basis: var(--column-10);
  }
  .offset-sm-10, .o-column--offset-sm-10 {
    margin-left: var(--column-10);
  }
  .column-sm-11, .o-column--sm-11 {
    flex-basis: var(--column-11);
  }
  .offset-sm-11, .o-column--offset-sm-11 {
    margin-left: var(--column-11);
  }
  .column-sm-12, .o-column--sm-12 {
    flex-basis: var(--column-12);
  }
  .offset-sm-12, .o-column--offset-sm-12 {
    margin-left: var(--column-12);
  }
  .column-sm-13, .o-column--sm-13 {
    flex-basis: var(--column-13);
  }
  .offset-sm-13, .o-column--offset-sm-13 {
    margin-left: var(--column-13);
  }
  .column-sm-14, .o-column--sm-14 {
    flex-basis: var(--column-14);
  }
  .offset-sm-14, .o-column--offset-sm-14 {
    margin-left: var(--column-14);
  }
  .column-sm-15, .o-column--sm-15 {
    flex-basis: var(--column-15);
  }
  .offset-sm-15, .o-column--offset-sm-15 {
    margin-left: var(--column-15);
  }
  .column-sm-16, .o-column--sm-16 {
    flex-basis: var(--column-16);
  }
  .offset-sm-16, .o-column--offset-sm-16 {
    margin-left: var(--column-16);
  }
  .column-sm-auto, .o-column--sm-auto {
    flex: 1;
    flex-basis: 0;
  }
  .offset-sm-0, .o-column--offset-sm-0 {
    margin-left: 0;
  }
  .align-sm-left, .o-raster--sm-left {
    justify-content: flex-start;
  }
  .align-sm-center, .o-raster--sm-center {
    justify-content: center;
  }
  .align-sm-right, .o-raster--sm-right {
    justify-content: flex-end;
  }
  .align-sm-top, .o-raster--sm-top {
    align-items: flex-start;
  }
  .align-sm-middle, .o-raster--sm-middle {
    align-items: center;
  }
  .align-sm-bottom, .o-raster--sm-bottom {
    align-items: flex-end;
  }
  .order-sm-first, .o-column--sm-first {
    order: -1;
  }
  .order-sm-last, .o-column--sm-last {
    order: 100;
  }
}

/* -------------------------
 * Size: lg
 */
@media (min-width: 1200px) {
  .column-lg-1, .o-column--lg-1 {
    flex-basis: var(--column-1);
  }
  .offset-lg-1, .o-column--offset-lg-1 {
    margin-left: var(--column-1);
  }
  .column-lg-2, .o-column--lg-2 {
    flex-basis: var(--column-2);
  }
  .offset-lg-2, .o-column--offset-lg-2 {
    margin-left: var(--column-2);
  }
  .column-lg-3, .o-column--lg-3 {
    flex-basis: var(--column-3);
  }
  .offset-lg-3, .o-column--offset-lg-3 {
    margin-left: var(--column-3);
  }
  .column-lg-4, .o-column--lg-4 {
    flex-basis: var(--column-4);
  }
  .offset-lg-4, .o-column--offset-lg-4 {
    margin-left: var(--column-4);
  }
  .column-lg-5, .o-column--lg-5 {
    flex-basis: var(--column-5);
  }
  .offset-lg-5, .o-column--offset-lg-5 {
    margin-left: var(--column-5);
  }
  .column-lg-6, .o-column--lg-6 {
    flex-basis: var(--column-6);
  }
  .offset-lg-6, .o-column--offset-lg-6 {
    margin-left: var(--column-6);
  }
  .column-lg-7, .o-column--lg-7 {
    flex-basis: var(--column-7);
  }
  .offset-lg-7, .o-column--offset-lg-7 {
    margin-left: var(--column-7);
  }
  .column-lg-8, .o-column--lg-8 {
    flex-basis: var(--column-8);
  }
  .offset-lg-8, .o-column--offset-lg-8 {
    margin-left: var(--column-8);
  }
  .column-lg-9, .o-column--lg-9 {
    flex-basis: var(--column-9);
  }
  .offset-lg-9, .o-column--offset-lg-9 {
    margin-left: var(--column-9);
  }
  .column-lg-10, .o-column--lg-10 {
    flex-basis: var(--column-10);
  }
  .offset-lg-10, .o-column--offset-lg-10 {
    margin-left: var(--column-10);
  }
  .column-lg-11, .o-column--lg-11 {
    flex-basis: var(--column-11);
  }
  .offset-lg-11, .o-column--offset-lg-11 {
    margin-left: var(--column-11);
  }
  .column-lg-12, .o-column--lg-12 {
    flex-basis: var(--column-12);
  }
  .offset-lg-12, .o-column--offset-lg-12 {
    margin-left: var(--column-12);
  }
  .column-lg-13, .o-column--lg-13 {
    flex-basis: var(--column-13);
  }
  .offset-lg-13, .o-column--offset-lg-13 {
    margin-left: var(--column-13);
  }
  .column-lg-14, .o-column--lg-14 {
    flex-basis: var(--column-14);
  }
  .offset-lg-14, .o-column--offset-lg-14 {
    margin-left: var(--column-14);
  }
  .column-lg-15, .o-column--lg-15 {
    flex-basis: var(--column-15);
  }
  .offset-lg-15, .o-column--offset-lg-15 {
    margin-left: var(--column-15);
  }
  .column-lg-16, .o-column--lg-16 {
    flex-basis: var(--column-16);
  }
  .offset-lg-16, .o-column--offset-lg-16 {
    margin-left: var(--column-16);
  }
  .column-lg-auto, .o-column--lg-auto {
    flex: 1;
    flex-basis: 0;
  }
  .offset-lg-0, .o-column--offset-lg-0 {
    margin-left: 0;
  }
  .align-lg-left, .o-raster--lg-left {
    justify-content: flex-start;
  }
  .align-lg-center, .o-raster--lg-center {
    justify-content: center;
  }
  .align-lg-right, .o-raster--lg-right {
    justify-content: flex-end;
  }
  .align-lg-top, .o-raster--lg-top {
    align-items: flex-start;
  }
  .align-lg-middle, .o-raster--lg-middle {
    align-items: center;
  }
  .align-lg-bottom, .o-raster--lg-bottom {
    align-items: flex-end;
  }
  .order-lg-first, .o-column--lg-first {
    order: -1;
  }
  .order-lg-last, .o-column--lg-last {
    order: 100;
  }
}

/* -------------------------
 * Size: xl
 */
@media (min-width: 1500px) {
  .column-xl-1, .o-column--xl-1 {
    flex-basis: var(--column-1);
  }
  .offset-xl-1, .o-column--offset-xl-1 {
    margin-left: var(--column-1);
  }
  .column-xl-2, .o-column--xl-2 {
    flex-basis: var(--column-2);
  }
  .offset-xl-2, .o-column--offset-xl-2 {
    margin-left: var(--column-2);
  }
  .column-xl-3, .o-column--xl-3 {
    flex-basis: var(--column-3);
  }
  .offset-xl-3, .o-column--offset-xl-3 {
    margin-left: var(--column-3);
  }
  .column-xl-4, .o-column--xl-4 {
    flex-basis: var(--column-4);
  }
  .offset-xl-4, .o-column--offset-xl-4 {
    margin-left: var(--column-4);
  }
  .column-xl-5, .o-column--xl-5 {
    flex-basis: var(--column-5);
  }
  .offset-xl-5, .o-column--offset-xl-5 {
    margin-left: var(--column-5);
  }
  .column-xl-6, .o-column--xl-6 {
    flex-basis: var(--column-6);
  }
  .offset-xl-6, .o-column--offset-xl-6 {
    margin-left: var(--column-6);
  }
  .column-xl-7, .o-column--xl-7 {
    flex-basis: var(--column-7);
  }
  .offset-xl-7, .o-column--offset-xl-7 {
    margin-left: var(--column-7);
  }
  .column-xl-8, .o-column--xl-8 {
    flex-basis: var(--column-8);
  }
  .offset-xl-8, .o-column--offset-xl-8 {
    margin-left: var(--column-8);
  }
  .column-xl-9, .o-column--xl-9 {
    flex-basis: var(--column-9);
  }
  .offset-xl-9, .o-column--offset-xl-9 {
    margin-left: var(--column-9);
  }
  .column-xl-10, .o-column--xl-10 {
    flex-basis: var(--column-10);
  }
  .offset-xl-10, .o-column--offset-xl-10 {
    margin-left: var(--column-10);
  }
  .column-xl-11, .o-column--xl-11 {
    flex-basis: var(--column-11);
  }
  .offset-xl-11, .o-column--offset-xl-11 {
    margin-left: var(--column-11);
  }
  .column-xl-12, .o-column--xl-12 {
    flex-basis: var(--column-12);
  }
  .offset-xl-12, .o-column--offset-xl-12 {
    margin-left: var(--column-12);
  }
  .column-xl-13, .o-column--xl-13 {
    flex-basis: var(--column-13);
  }
  .offset-xl-13, .o-column--offset-xl-13 {
    margin-left: var(--column-13);
  }
  .column-xl-14, .o-column--xl-14 {
    flex-basis: var(--column-14);
  }
  .offset-xl-14, .o-column--offset-xl-14 {
    margin-left: var(--column-14);
  }
  .column-xl-15, .o-column--xl-15 {
    flex-basis: var(--column-15);
  }
  .offset-xl-15, .o-column--offset-xl-15 {
    margin-left: var(--column-15);
  }
  .column-xl-16, .o-column--xl-16 {
    flex-basis: var(--column-16);
  }
  .offset-xl-16, .o-column--offset-xl-16 {
    margin-left: var(--column-16);
  }
  .column-xl-auto, .o-column--xl-auto {
    flex: 1;
    flex-basis: 0;
  }
  .offset-xl-0, .o-column--offset-xl-0 {
    margin-left: 0;
  }
  .align-xl-left, .o-raster--xl-left {
    justify-content: flex-start;
  }
  .align-xl-center, .o-raster--xl-center {
    justify-content: center;
  }
  .align-xl-right, .o-raster--xl-right {
    justify-content: flex-end;
  }
  .align-xl-top, .o-raster--xl-top {
    align-items: flex-start;
  }
  .align-xl-middle, .o-raster--xl-middle {
    align-items: center;
  }
  .align-xl-bottom, .o-raster--xl-bottom {
    align-items: flex-end;
  }
  .order-xl-first, .o-column--xl-first {
    order: -1;
  }
  .order-xl-last, .o-column--xl-last {
    order: 100;
  }
}