.grid,
.grid .columns
{
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  > *:not(.columns),
  {
    align-items: stretch;
    align-content: flex-start;
  }
}

.grid .col-br
{
  padding-right: 0 !important;
}

.grid
{
  &.grow
  {
    flex-wrap: inherit;

    > [class^="col"]
    {
      display: flex;
      flex-grow: 1;
      flex-direction: column; //iebug 11*

      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
      {
        /* IE10+ CSS styles go here */
        flex-direction: inherit;
      }

    }

    > :not([class^="col"])
    {
      width: 100%;
    }
  }
}


/* Horisontal-Gap between rows 1 rem */
.grid-0-1
{
  @extend .grid;
  margin-bottom: -1rem;

  > *
  {
    padding-bottom: 1rem;
  }
}

/* Vertical-Gap between columns 1 rem */
.grid-1
{
  @extend .grid;

  > .columns > [class^="col-"],
  > .columns > [class*=" col-"],
  > [class^="col-"],
  > [class*=" col-"],
  > .columns > .col,
  > .col
  {
    padding-right: 1rem;
  }

  > .columns
  {
    margin-right: -1rem;
    width: calc(100% + 1rem);
  }
}

.grid-1-1
{
  @extend .grid-1;

  > .columns > [class^="col-"],
  > .columns > [class*=" col-"],
  > [class^="col-"],
  > [class*=" col-"],
  > .columns > .col,
  > .col
  {
    padding-bottom: 1rem;
  }

  > .columns
  {
    margin-bottom: -1rem;
  }
}

/* Vertical-Gap between columns 2 rem */
.grid-2
{
  @extend .grid;

  > .columns > [class^="col-"],
  > .columns > [class*=" col-"],
  > [class^="col-"],
  > [class*=" col-"],
  > .columns > .col,
  > .col
  {
    padding-right: 2rem;
  }

  > .columns
  {
    margin-right: -2rem;
    width: calc(100% + 2rem);
  }
}

/* Horisontal-Gap between columns and grid */
.grid-2-1
{
  @extend .grid-2;

  > .columns > [class^="col-"],
  > .columns > [class*=" col-"],
  > [class^="col-"],
  > [class*=" col-"],
  > .columns > .col,
  > .col
  {
    padding-bottom: 1rem;
  }

  > .columns
  {
    margin-bottom: -1rem;
  }
}

.grid-2-2
{
  @extend .grid-2;

  > .columns > [class^="col-"],
  > .columns > [class*=" col-"],
  > [class^="col-"],
  > [class*=" col-"],
  > .columns > .col,
  > .col
  {
    padding-bottom: 2rem;
  }

  > .columns
  {
    margin-bottom: -2rem;
  }
}

.grid-2-4
{
  @extend .grid-2;

  > .columns > [class^="col-"],
  > .columns > [class*=" col-"],
  > [class^="col-"],
  > [class*=" col-"],
  > .columns > .col,
  > .col
  {
    padding-bottom: 4rem;
  }

  > .columns
  {
    margin-bottom: -4rem;
  }
}

.grid-3
{
  @extend .grid;

  > .columns > [class^="col-"],
  > .columns > [class*=" col-"],
  > [class^="col-"],
  > [class*=" col-"],
  > .columns > .col,
  > .col
  {
    padding-right: 3rem;
  }

  > .columns
  {
    margin-right: -3rem;
    width: calc(100% + 3rem);
  }
}

.grid-3-3
{
  @extend .grid-3;

  > .columns > [class^="col-"],
  > .columns > [class*=" col-"],
  > [class^="col-"],
  > [class*=" col-"],
  > .columns > .col,
  > .col
  {
    padding-bottom: 3rem;
  }

  > .columns
  {
    margin-bottom: -3rem;
  }
}

/* Vertical-Gap between columns 4 rem */
.grid-4
{
  @extend .grid;

  > .columns > [class^="col-"],
  > .columns > [class*=" col-"],
  > [class^="col-"],
  > [class*=" col-"],
  > .columns > .col,
  > .col
  {
    padding-right: 4rem;
  }

  > .columns
  {
    margin-right: -4rem;
    width: calc(100% + 4rem);
  }
}

.grid-4-2
{
  @extend .grid-4;

  > .columns > [class^="col-"],
  > .columns > [class*=" col-"],
  > [class^="col-"],
  > [class*=" col-"],
  > .columns > .col,
  > .col
  {
    padding-bottom: 2rem;
  }

  > .columns
  {
    margin-bottom: -2rem;
  }
}

.grid-4-4
{
  @extend .grid-4;

  > .columns > [class^="col-"],
  > .columns > [class*=" col-"],
  > [class^="col-"],
  > [class*=" col-"],
  > .columns > .col,
  > .col
  {
    padding-bottom: 4rem;
  }

  > .columns
  {
    margin-bottom: -4rem;
  }
}

.grid-4-6
{
  @extend .grid-4;

  > .columns > [class^="col-"],
  > .columns > [class*=" col-"],
  > [class^="col-"],
  > [class*=" col-"],
  > .columns > .col,
  > .col
  {
    padding-bottom: 6rem;
  }

  > .columns
  {
    margin-bottom: -6rem;
  }
}

/* Vertical-Gap between columns 4 rem */
.grid-6
{
  @extend .grid;

  > .columns > [class^="col-"],
  > .columns > [class*=" col-"],
  > [class^="col-"],
  > [class*=" col-"],
  > .columns > .col,
  > .col
  {
    padding-right: 6rem;
  }

  > .columns
  {
    margin-right: -6rem;
    width: calc(100% + 6rem);
  }
}



.grid-center
{
  align-items: center;
}

/* Content Columns */

.col-1-1, .col {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.col-2-3, .col-8-12 {
  width: 66.66%;
  min-width: 66.66%;
  max-width: 66.66%;
}

.col-1-2, .col-6-12, .col-2-4 {
  width: 50%;
  min-width: 50%;
  max-width: 50%;
}

.col-1-3, .col-4-12 {
  width: 33.33%;
  min-width: 33.33%;
  max-width: 33.33%;
}

.col-1-4, .col-3-12 {
  width: 25%;
  min-width: 25%;
  max-width: 25%;
}

.col-1-5 {
  width: 20%;
  min-width: 20%;
  max-width: 20%;
}

.col-2-5 {
  width: 40%;
  min-width: 40%;
  max-width: 40%;
}

.col-3-5 {
  width: 60%;
  min-width: 60%;
  max-width: 60%;
}
.col-4-5 {
  width: 80%;
  min-width: 80%;
  max-width: 80%;
}

.col-1-6, .col-2-12 {
  width: 16.667%;
  min-width: 16.667%;
  max-width: 16.667%;
}

.col-1-7 {
  width: 14.28%;
  min-width: 14.28%;
  max-width: 14.28%;
}

.col-1-8 {
  width: 12.5%;
  min-width: 12.5%;
  max-width: 12.5%;
}

.col-1-9 {
  width: 11.1%;
  min-width: 11.1%;
  max-width: 11.1%;
}

.col-1-10 {
  width: 10%;
  min-width: 10%;
  max-width: 10%;
}

.col-1-11 {
  width: 9.09%;
  min-width: 9.09%;
  max-width: 9.09%;
}

.col-1-12 {
  width: 8.33%;
  min-width: 8.33%;
  max-width: 8.33%;
}


/* Layout Columns */

.col-11-12 {
  width: 91.66%;
  min-width: 91.66%;
  max-width: 91.66%;
}

.col-10-12 {
  width: 83.333%;
  min-width: 83.333%;
  max-width: 83.333%;
}

.col-9-12 {
  width: 75%;
  min-width: 75%;
  max-width: 75%;
}

.col-5-12 {
  width: 41.66%;
  min-width: 41.66%;
  max-width: 41.66%;
}

.col-7-12 {
  width: 58.33%;
  min-width: 58.33%;
  max-width: 58.33%;
}


/* Pushing blocks */

.push-2-3, .push-8-12 {
  margin-left: 66.66%;
}

.push-1-2, .push-6-12 {
  margin-left: 50%;
}

.push-1-3, .push-4-12 {
  margin-left: 33.33%;
}

.push-1-4, .push-3-12 {
  margin-left: 25%;
}

.push-1-5 {
  margin-left: 20%;
}

.push-1-6, .push-2-12 {
  margin-left: 16.667%;
}

.push-1-7 {
  margin-left: 14.28%;
}

.push-1-8 {
  margin-left: 12.5%;
}

.push-1-9 {
  margin-left: 11.1%;
}

.push-1-10 {
  margin-left: 10%;
}

.push-1-11 {
  margin-left: 9.09%;
}

.push-1-12 {
  margin-left: 8.33%
}


/* Ordering flexbox */

.order--1
{
  order: -1;
}

.order-1
{
  order: 1;
}

.order-2
{
  order: 2;
}

.order-3
{
  order: 3;
}

.order-4
{
  order: 4;
}

.order-5
{
  order: 5;
}

.order-6
{
  order: 6;
}

.order-7
{
  order: 7;
}

.order-8
{
  order: 8;
}

.order-9
{
  order: 9;
}

.order-10
{
  order: 10;
}


@include respond-to(desktop)
{
  .desktop\:grid-3
  {
    display: flex;
    flex-wrap: wrap;

    margin-right: -3rem;

    > *
    {
      align-items: stretch;
      align-content: flex-start;

      padding-right: 3rem;
    }
  }

  .desktop\:grid-2
  {
    display: flex;
    flex-wrap: wrap;

    margin-right: -2rem;

    > *
    {
      align-items: stretch;
      align-content: flex-start;

      padding-right: 2rem;
    }
  }

  .desktop\:grid-2-2
  {
    display: flex;
    flex-wrap: wrap;

    margin-right: -2rem;
    margin-bottom: -2rem;

    > *
    {
      align-items: stretch;
      align-content: flex-start;

      padding-right: 2rem;
      padding-bottom: 2rem;
    }
  }

  .desktop\:grid-2-4
  {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    margin-right: -2rem;
    margin-bottom: -4rem;

    > *
    {
      align-items: stretch;
      align-content: flex-start;

      padding-right: 2rem;
      padding-bottom: 4rem;
    }
  }

  .desktop\:col-1-5
  {
    width: 20%;
  }
  .desktop\:col-2-5
  {
    width: 40%;
  }
  .desktop\:col-3-5
  {
    width: 60%;
  }
  .desktop\:col-4-5
  {
    width: 80%;
  }
  .desktop\:col-1-2
  {
    width: 50%;
  }

  .desktop\:col-1-4
  {
    width: 25%;
  }

  .desktop\:col-1-8
  {
    width: 12.5%;
  }

  .desktop\:col-1-12 {
    width: 8.33%
  }

  .desktop\:col-2-12 {
    width: 16.667%;
  }

  .desktop\:col-3-12 {
    width: 25%;
  }

  .desktop\:col-4-12 {
    width: 33.33%;
  }

  .desktop\:col-5-12 {
    width: 41.66%;
  }

  .desktop\:col-6-12 {
    width: 50%;
  }

  .desktop\:col-7-12 {
    width: 58.33%
  }

  .desktop\:col-8-12 {
    width: 66.66%
  }

  .desktop\:col-9-12 {
    width: 75%
  }

  .desktop\:col-10-12 {
    width: 83.33%
  }

  .desktop\:col-11-12 {
    width: 91.66%
  }
}


@include respond-to(mobile)
{
  .mobile\:order--1
  {
    order: -1;
  }

  .mobile\:order-2
  {
    order: 2;
  }

  .mobile\:order-3
  {
    order: 3;
  }

  .mobile\:order-4
  {
    order: 4;
  }

  .mobile\:order-5
  {
    order: 5;
  }

  .mobile\:order-6
  {
    order: 6;
  }

  .mobile\:order-7
  {
    order: 7;
  }

  .mobile\:order-8
  {
    order: 8;
  }

  .mobile\:order-9
  {
    order: 9;
  }

  .mobile\:order-10
  {
    order: 10;
  }

  .mobile\:col
  {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  [class^="grid-"] > .mobile\:col,
  [class*=" grid-"] > .mobile\:col
  {
    padding-right: 0 !important;
  }



  .mobile\:col-1-2
  {
    width: 50%;
    min-width: 50%;
    max-width: 50%;
  }

  .mobile\:col-1-3
  {
    width: 33.3%;
    min-width: 33.3%;
    max-width: 33.3%;
  }

  .mobile\:col-1-4
  {
    width: 25%;
    min-width: 25%;
    max-width: 25%;
  }

  .mobile\:col-1-8
  {
    width: 12.5%;
    min-width: 12.5%;
    max-width: 12.5%;
  }

  .mobile\:col-1-12
  {
    width: 8.33%;
    min-width: 8.33%;
    max-width: 8.33%;
  }

  .mobile\:col-2-12
  {
    width: 16.66%;
    min-width: 16.66%;
    max-width: 16.66%;
  }

  .mobile\:col-3-12
  {
    width: 25%;
    min-width: 25%;
    max-width: 25%;
  }

  .mobile\:col-4-12 {
    width: 33.33%;
    min-width: 33.33%;
    max-width: 33.33%;
  }

  .mobile\:col-5-12
  {
    width: 41.66%;
    min-width: 41.66%;
    max-width: 41.66%;
  }

  .mobile\:col-6-12
  {
    width: 50%;
    min-width: 50%;
    max-width: 50%;
  }

  .mobile\:col-7-12
  {
    width: 58.33%;
    min-width: 58.33%;
    max-width: 58.33%;
  }

  .mobile\:col-8-12 {
    width: 66.66%;
    min-width: 66.66%;
    max-width: 66.66%;
  }

  .mobile\:col-10-12
  {
    width: 83.33%;
    min-width: 83.33%;
    max-width: 83.33%;
  }
}