/*!
 * SQ-UI (https://github.com/SQ-UI/sq-grid)
 * Copyright 2018 Plamena Radneva
 * Copyright 2018 SQ-UI
 * Licensed under MIT (https://github.com/SQ-UI/sq-grid/blob/master/LICENSE)
 */
@supports (display: grid) or (display: flex) {
  .sq-grid.css-grid {
    display: grid;
    grid-column-gap: 10px;
    grid-row-gap: 20px;
    grid-template-columns: repeat(12, 1fr); }
    .sq-grid.css-grid .col.span-1 {
      grid-column: span 1; }
    .sq-grid.css-grid .col.span-2 {
      grid-column: span 2; }
    .sq-grid.css-grid .col.span-3 {
      grid-column: span 3; }
    .sq-grid.css-grid .col.span-4 {
      grid-column: span 4; }
    .sq-grid.css-grid .col.span-5 {
      grid-column: span 5; }
    .sq-grid.css-grid .col.span-6 {
      grid-column: span 6; }
    .sq-grid.css-grid .col.span-7 {
      grid-column: span 7; }
    .sq-grid.css-grid .col.span-8 {
      grid-column: span 8; }
    .sq-grid.css-grid .col.span-9 {
      grid-column: span 9; }
    .sq-grid.css-grid .col.span-10 {
      grid-column: span 10; }
    .sq-grid.css-grid .col.span-11 {
      grid-column: span 11; }
    .sq-grid.css-grid .col.span-12 {
      grid-column: span 12; }
    .sq-grid.css-grid.auto-col-width {
      display: grid;
      grid-column-gap: 10px;
      grid-row-gap: 20px;
      grid-template-columns: repeat(auto-fit, minmax(8.3333333333em, 1fr)); }
  .sq-grid.css-flexbox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
    .sq-grid.css-flexbox .col {
      margin-bottom: 20px; }
      .sq-grid.css-flexbox .col:not(:last-child) {
        padding-right: 10px; }
    .sq-grid.css-flexbox .col {
      flex: 1 0 8.3333333333%; }
      .sq-grid.css-flexbox .col.span-1 {
        flex: 1 0 8.3333333333%; }
      .sq-grid.css-flexbox .col.span-2 {
        flex: 1 0 16.6666666667%; }
      .sq-grid.css-flexbox .col.span-3 {
        flex: 1 0 25%; }
      .sq-grid.css-flexbox .col.span-4 {
        flex: 1 0 33.3333333333%; }
      .sq-grid.css-flexbox .col.span-5 {
        flex: 1 0 41.6666666667%; }
      .sq-grid.css-flexbox .col.span-6 {
        flex: 1 0 50%; }
      .sq-grid.css-flexbox .col.span-7 {
        flex: 1 0 58.3333333333%; }
      .sq-grid.css-flexbox .col.span-8 {
        flex: 1 0 66.6666666667%; }
      .sq-grid.css-flexbox .col.span-9 {
        flex: 1 0 75%; }
      .sq-grid.css-flexbox .col.span-10 {
        flex: 1 0 83.3333333333%; }
      .sq-grid.css-flexbox .col.span-11 {
        flex: 1 0 91.6666666667%; }
      .sq-grid.css-flexbox .col.span-12 {
        flex: 1 0 100%; }
    .sq-grid.css-flexbox.auto-col-width {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
      .sq-grid.css-flexbox.auto-col-width .col {
        margin-bottom: 20px; }
        .sq-grid.css-flexbox.auto-col-width .col:not(:last-child) {
          padding-right: 10px; }
      .sq-grid.css-flexbox.auto-col-width .col {
        flex: 1; } }
@supports not ((display: grid) and (display: flex)) {
  .sq-grid::after {
    content: '';
    display: table;
    clear: both; }
  .sq-grid .col {
    float: left;
    width: 8.3333333333%;
    margin-bottom: 20px; }
    .sq-grid .col.span-1 {
      width: 8.3333333333%; }
    .sq-grid .col.span-2 {
      width: 16.6666666667%; }
    .sq-grid .col.span-3 {
      width: 25%; }
    .sq-grid .col.span-4 {
      width: 33.3333333333%; }
    .sq-grid .col.span-5 {
      width: 41.6666666667%; }
    .sq-grid .col.span-6 {
      width: 50%; }
    .sq-grid .col.span-7 {
      width: 58.3333333333%; }
    .sq-grid .col.span-8 {
      width: 66.6666666667%; }
    .sq-grid .col.span-9 {
      width: 75%; }
    .sq-grid .col.span-10 {
      width: 83.3333333333%; }
    .sq-grid .col.span-11 {
      width: 91.6666666667%; }
    .sq-grid .col.span-12 {
      width: 100%; }
    .sq-grid .col:not(:last-child) {
      margin-right: 10px; } }

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