Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

/*
 * Yellowgrid
 *   author : Matthew Lein
 *   url : https://github.com/matthewlein/yellowgrid
 *
 * Inspired heavily by:
 *   (starting point)
 *   Proportional Grids https://github.com/mattberridge/Proportional-Grids/
 *   (theory and naming)
 *   CSSWizardry Grids https://github.com/csswizardry/csswizardry-grids
 */


// You don't need to touch this file. But you can if you want.


//-------------------------------------------------------
// GRID MIXINS
//-------------------------------------------------------

// clearfix for $grid-wrap-class
@mixin clearfix {
    &:after, &:before {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
    & {
        *zoom: 1;
    }
}

@mixin set-gutter($gutter) {

    margin-left: -$gutter;
    // margin-bottom: $gutter;

    .#{$grid-col-class} {
        padding-left: $gutter;
    }

}

@mixin grid-config {

    .#{$grid-wrap-class} {
        margin-left: -$grid-gutter;
        clear: both;
        // clearfixed to contain the floats
        @include clearfix;
    }

    .#{$grid-col-class} {
        float: left;
        padding-left: $grid-gutter;
        width: 100%;
        // so they don't horz collapse
        min-height: 1px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    // reverse the order of grid elements
    .#{$grid-wrap-class}--reverse .#{$grid-col-class} {
        float: right;
    }

    // Gutter changes

    .#{$grid-wrap-class}--double-gutter {
        @include set-gutter($grid-gutter*2);
    }

    .#{$grid-wrap-class}--half-gutter {
        @include set-gutter($grid-gutter/2);
    }

    .#{$grid-wrap-class}--no-gutter {
        @include set-gutter(0);
    }

    .#{$grid-wrap-class}--reset-gutter {
        @include set-gutter($grid-gutter);
    }

    // reset for list grids
    ul.#{$grid-wrap-class},
    ol.#{$grid-wrap-class} {
        padding-left: 0;
        list-style: none;
    }

    li.#{$grid-col-class} {
        margin-left: 0;
        margin-bottom: 0;
    }

}

// $namespace relates to the class prefix e.g. palm--1_2 to target breakpoint palm
// $namespace is set in the yellowgrid.scss file with the other config
@mixin grid-setup($namespace) {

    // --------------------------------------------------------------------- //
    // Grid columns
    //   widths for all column combinations
    // --------------------------------------------------------------------- //
    //
    // compiled example:
    //   .palm--1_2 {
    //       width: 50%;
    //   }

    // full width
    .#{$namespace},
    .#{$namespace}--1,
    .#{$namespace}--full {
        width: 100%;
    }

    // columns setup
    @for $i from 1 through $grid-columns {

        @for $j from 1 through $grid-columns {
            // so we don't get 4_2
            @if $j > $i {

                .#{$namespace}--#{$i}_#{$j} {
                    width: percentage( $i/$j );
                }

            }

        }

    }

    // --------------------------------------------------------------------- //
    // grid sets
    //   sets make all grid columns all the same width.
    //   extends #{$grid-wrap-class}
    // --------------------------------------------------------------------- //
    //
    // compiled example:
    //   .grid--set--palm--1_2 .grid__col {
    //       width: 50%;
    //   }
    //

    @if $grid-sets == true {

        @for $i from 1 through $grid-columns {

            @if $i > 1 {

                .#{$grid-wrap-class}--set--#{$namespace}--1_#{$i} .#{$grid-col-class} {
                    width: percentage( 1/$i );
                }

            }

        }


        // --------------------------------------------------------------------- //
        // grid set 'row' clearing
        //   uses nth child to clear the row
        //   X in a row, all the same
        //   widths set above
        //   ie8 simply gets no clearing for these sets
        // --------------------------------------------------------------------- //
        // compiled example:
        //
        // .grid--set--palm--1_3 .grid__col:nth-child(3n+1) {
        //   clear: both;
        // }
        // .grid--set--palm--1_3 .grid__col:nth-child(2n+1) {
        //   clear: none;
        // }
        //

        @if $grid-sets-clearing == true {

            @for $i from 1 through $grid-columns {

                // saves the count for row clearing
                $count : $i;

                // unclear other ones when using multiple breakpoints
                // this must be before the clear both
                @while $count > 2 {

                    .#{$grid-wrap-class}--set--#{$namespace}--1_#{$i} .#{$grid-col-class} {
                        &:nth-child(#{$count - 1}n+1) {
                            clear: none;
                        }
                    }

                  $count: $count - 1;

                }

                // clear both floats
                @if $i > 1 {

                    .#{$grid-wrap-class}--set--#{$namespace}--1_#{$i} .#{$grid-col-class} {
                        &:nth-child(#{$i}n+1) {
                            clear: both;
                        }
                    }

                }

            }
        // end $grid-sets-clearing if
        }

    // end $grid-sets if
    }


    // --------------------------------------------------------------------- //
    // Push classes
    //   Move a column over by x columns
    //   extends #{$namespace}-{size}
    // --------------------------------------------------------------------- //
    //
    // compiled example:
    //
    // .palm--push--1_2 {
    //     position: relative;
    //     left: 50%;
    // }
    //
    @if $grid-push == true {

        .#{$namespace}--push--0,
        .#{$namespace}--push--none {
            position: static;
            left: 0%;
        }
        // push x columns setup
        @for $i from 1 through $grid-columns {

            @for $j from 1 through $grid-columns {
                // so we don't get 4_2
                @if $j > $i {

                    .#{$namespace}--push--#{$i}_#{$j} {
                        position : relative;
                        left: percentage( $i/$j );
                    }

                }

            }

        }
    // end if
    }


    // --------------------------------------------------------------------- //
    // Centered classes
    //   centers a column in a grid
    //   extends #{$namespace}-{size}
    // --------------------------------------------------------------------- //
    //
    // compiled example:
    //
    // .palm--1_2--centered {
    //     position: relative;
    //     left: 50%;
    // }
    //
    @if $grid-center == true {
        @for $i from 1 through $grid-columns {

            @for $j from 1 through $grid-columns {
                // so we don't get 4_2
                @if $j > $i {

                    .#{$namespace}--#{$i}_#{$j}--centered {
                        position : relative;
                        left: percentage( ( 1 - $i/$j ) / 2 );
                    }

                }

            }

        }
    // end if
    }

    // hide or show at a breakpoint
    .#{$namespace}--hidden {
        display: none;
    }
    .#{$namespace}--visible {
        display: block;
    }

}


// include grids-init to set up your grids with your base class
// i.e. @include grids-init("col");
@mixin grids-init($class) {

    @include grid-config;
    @include grid-setup($class);

}

// include grids-include with your class for each breakpoint
@mixin grid-include($class) {

    @include grid-setup($class);

}



// Use "inline" breakpoints, for example:
//
// h1 {
//     font-size: 2em;
//
//     @include breakpoint('lap') {
//         font-size: 2.5em;
//     }
//
//     @include breakpoint('desk') {
//         font-size: 3em;
//     }
// }
//

// Breakpoint vars
$bp-lap: 'only screen and (min-width: 500px)';
$bp-desk: 'only screen and (min-width: 979px)';

@mixin breakpoint($point) {
    @if $point == 'lap' {
        @media #{$bp-lap} { @content; }
    }
    @else if $point == 'desk' {
        @media #{$bp-desk} { @content; }
    }
}

/*
 * Yellowgrid
 *   author : Matthew Lein
 *   url : https://github.com/matthewlein/yellowgrid
 *
 * Inspired heavily by:
 *   (starting point)
 *   Proportional Grids https://github.com/mattberridge/Proportional-Grids/
 *   (theory and naming)
 *   CSSWizardry Grids https://github.com/csswizardry/csswizardry-grids
 */

//-------------------------------------------------------
// GRID SETTINGS
//-------------------------------------------------------

// this is the fixed gutter between columns
$grid-gutter: 20px;

// number of columns you want
$grid-columns: 7;

// do you want grid sets?
$grid-sets : true;
// do you want set "rows" to autoclear? (IE9+)
$grid-sets-clearing : true;

// do you want push classes?
$grid-push : true;

// do you want centering classes?
$grid-center : true;

// these set your grid and column class names. Not recommended to change, but you can.
$grid-wrap-class: "grid";
$grid-col-class: "grid__col";

// Import the builder

// import breakpoint vars


// --------------------------------------------------------------------- //
// RESPONSIVE SETTINGS
// --------------------------------------------------------------------- //

// Mobile first! no breakpoint
// Palm-based devices like a mobile phone
@include grids-init('palm');

// Breakpoint for lap-based devices like tablets, ipads, laptops
@media #{$bp-lap} {
    @include grid-setup('lap');
}

// Breakpoint for desk-based devices like computers or TVs
@media #{$bp-desk} {
    @include grid-setup('desk');
}

SassMeister-output.css

/*
 * Yellowgrid
 *   author : Matthew Lein
 *   url : https://github.com/matthewlein/yellowgrid
 *
 * Inspired heavily by:
 *   (starting point)
 *   Proportional Grids https://github.com/mattberridge/Proportional-Grids/
 *   (theory and naming)
 *   CSSWizardry Grids https://github.com/csswizardry/csswizardry-grids
 */
/*
 * Yellowgrid
 *   author : Matthew Lein
 *   url : https://github.com/matthewlein/yellowgrid
 *
 * Inspired heavily by:
 *   (starting point)
 *   Proportional Grids https://github.com/mattberridge/Proportional-Grids/
 *   (theory and naming)
 *   CSSWizardry Grids https://github.com/csswizardry/csswizardry-grids
 */
.grid {
  margin-left: -20px;
  clear: both;
}
.grid:after, .grid:before {
  content: "";
  display: table;
}
.grid:after {
  clear: both;
}
.grid {
  *zoom: 1;
}

.grid__col {
  float: left;
  padding-left: 20px;
  width: 100%;
  min-height: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid--reverse .grid__col {
  float: right;
}

.grid--double-gutter {
  margin-left: -40px;
}
.grid--double-gutter .grid__col {
  padding-left: 40px;
}

.grid--half-gutter {
  margin-left: -10px;
}
.grid--half-gutter .grid__col {
  padding-left: 10px;
}

.grid--no-gutter {
  margin-left: 0;
}
.grid--no-gutter .grid__col {
  padding-left: 0;
}

.grid--reset-gutter {
  margin-left: -20px;
}
.grid--reset-gutter .grid__col {
  padding-left: 20px;
}

ul.grid,
ol.grid {
  padding-left: 0;
  list-style: none;
}

li.grid__col {
  margin-left: 0;
  margin-bottom: 0;
}

.palm,
.palm--1,
.palm--full {
  width: 100%;
}

.palm--1_2 {
  width: 50%;
}

.palm--1_3 {
  width: 33.33333%;
}

.palm--1_4 {
  width: 25%;
}

.palm--1_5 {
  width: 20%;
}

.palm--1_6 {
  width: 16.66667%;
}

.palm--1_7 {
  width: 14.28571%;
}

.palm--2_3 {
  width: 66.66667%;
}

.palm--2_4 {
  width: 50%;
}

.palm--2_5 {
  width: 40%;
}

.palm--2_6 {
  width: 33.33333%;
}

.palm--2_7 {
  width: 28.57143%;
}

.palm--3_4 {
  width: 75%;
}

.palm--3_5 {
  width: 60%;
}

.palm--3_6 {
  width: 50%;
}

.palm--3_7 {
  width: 42.85714%;
}

.palm--4_5 {
  width: 80%;
}

.palm--4_6 {
  width: 66.66667%;
}

.palm--4_7 {
  width: 57.14286%;
}

.palm--5_6 {
  width: 83.33333%;
}

.palm--5_7 {
  width: 71.42857%;
}

.palm--6_7 {
  width: 85.71429%;
}

.grid--set--palm--1_2 .grid__col {
  width: 50%;
}

.grid--set--palm--1_3 .grid__col {
  width: 33.33333%;
}

.grid--set--palm--1_4 .grid__col {
  width: 25%;
}

.grid--set--palm--1_5 .grid__col {
  width: 20%;
}

.grid--set--palm--1_6 .grid__col {
  width: 16.66667%;
}

.grid--set--palm--1_7 .grid__col {
  width: 14.28571%;
}

.grid--set--palm--1_2 .grid__col:nth-child(2n+1) {
  clear: both;
}

.grid--set--palm--1_3 .grid__col:nth-child(2n+1) {
  clear: none;
}

.grid--set--palm--1_3 .grid__col:nth-child(3n+1) {
  clear: both;
}

.grid--set--palm--1_4 .grid__col:nth-child(3n+1) {
  clear: none;
}

.grid--set--palm--1_4 .grid__col:nth-child(2n+1) {
  clear: none;
}

.grid--set--palm--1_4 .grid__col:nth-child(4n+1) {
  clear: both;
}

.grid--set--palm--1_5 .grid__col:nth-child(4n+1) {
  clear: none;
}

.grid--set--palm--1_5 .grid__col:nth-child(3n+1) {
  clear: none;
}

.grid--set--palm--1_5 .grid__col:nth-child(2n+1) {
  clear: none;
}

.grid--set--palm--1_5 .grid__col:nth-child(5n+1) {
  clear: both;
}

.grid--set--palm--1_6 .grid__col:nth-child(5n+1) {
  clear: none;
}

.grid--set--palm--1_6 .grid__col:nth-child(4n+1) {
  clear: none;
}

.grid--set--palm--1_6 .grid__col:nth-child(3n+1) {
  clear: none;
}

.grid--set--palm--1_6 .grid__col:nth-child(2n+1) {
  clear: none;
}

.grid--set--palm--1_6 .grid__col:nth-child(6n+1) {
  clear: both;
}

.grid--set--palm--1_7 .grid__col:nth-child(6n+1) {
  clear: none;
}

.grid--set--palm--1_7 .grid__col:nth-child(5n+1) {
  clear: none;
}

.grid--set--palm--1_7 .grid__col:nth-child(4n+1) {
  clear: none;
}

.grid--set--palm--1_7 .grid__col:nth-child(3n+1) {
  clear: none;
}

.grid--set--palm--1_7 .grid__col:nth-child(2n+1) {
  clear: none;
}

.grid--set--palm--1_7 .grid__col:nth-child(7n+1) {
  clear: both;
}

.palm--push--0,
.palm--push--none {
  position: static;
  left: 0%;
}

.palm--push--1_2 {
  position: relative;
  left: 50%;
}

.palm--push--1_3 {
  position: relative;
  left: 33.33333%;
}

.palm--push--1_4 {
  position: relative;
  left: 25%;
}

.palm--push--1_5 {
  position: relative;
  left: 20%;
}

.palm--push--1_6 {
  position: relative;
  left: 16.66667%;
}

.palm--push--1_7 {
  position: relative;
  left: 14.28571%;
}

.palm--push--2_3 {
  position: relative;
  left: 66.66667%;
}

.palm--push--2_4 {
  position: relative;
  left: 50%;
}

.palm--push--2_5 {
  position: relative;
  left: 40%;
}

.palm--push--2_6 {
  position: relative;
  left: 33.33333%;
}

.palm--push--2_7 {
  position: relative;
  left: 28.57143%;
}

.palm--push--3_4 {
  position: relative;
  left: 75%;
}

.palm--push--3_5 {
  position: relative;
  left: 60%;
}

.palm--push--3_6 {
  position: relative;
  left: 50%;
}

.palm--push--3_7 {
  position: relative;
  left: 42.85714%;
}

.palm--push--4_5 {
  position: relative;
  left: 80%;
}

.palm--push--4_6 {
  position: relative;
  left: 66.66667%;
}

.palm--push--4_7 {
  position: relative;
  left: 57.14286%;
}

.palm--push--5_6 {
  position: relative;
  left: 83.33333%;
}

.palm--push--5_7 {
  position: relative;
  left: 71.42857%;
}

.palm--push--6_7 {
  position: relative;
  left: 85.71429%;
}

.palm--1_2--centered {
  position: relative;
  left: 25%;
}

.palm--1_3--centered {
  position: relative;
  left: 33.33333%;
}

.palm--1_4--centered {
  position: relative;
  left: 37.5%;
}

.palm--1_5--centered {
  position: relative;
  left: 40%;
}

.palm--1_6--centered {
  position: relative;
  left: 41.66667%;
}

.palm--1_7--centered {
  position: relative;
  left: 42.85714%;
}

.palm--2_3--centered {
  position: relative;
  left: 16.66667%;
}

.palm--2_4--centered {
  position: relative;
  left: 25%;
}

.palm--2_5--centered {
  position: relative;
  left: 30%;
}

.palm--2_6--centered {
  position: relative;
  left: 33.33333%;
}

.palm--2_7--centered {
  position: relative;
  left: 35.71429%;
}

.palm--3_4--centered {
  position: relative;
  left: 12.5%;
}

.palm--3_5--centered {
  position: relative;
  left: 20%;
}

.palm--3_6--centered {
  position: relative;
  left: 25%;
}

.palm--3_7--centered {
  position: relative;
  left: 28.57143%;
}

.palm--4_5--centered {
  position: relative;
  left: 10.0%;
}

.palm--4_6--centered {
  position: relative;
  left: 16.66667%;
}

.palm--4_7--centered {
  position: relative;
  left: 21.42857%;
}

.palm--5_6--centered {
  position: relative;
  left: 8.33333%;
}

.palm--5_7--centered {
  position: relative;
  left: 14.28571%;
}

.palm--6_7--centered {
  position: relative;
  left: 7.14286%;
}

.palm--hidden {
  display: none;
}

.palm--visible {
  display: block;
}

@media only screen and (min-width: 500px) {
  .lap,
  .lap--1,
  .lap--full {
    width: 100%;
  }

  .lap--1_2 {
    width: 50%;
  }

  .lap--1_3 {
    width: 33.33333%;
  }

  .lap--1_4 {
    width: 25%;
  }

  .lap--1_5 {
    width: 20%;
  }

  .lap--1_6 {
    width: 16.66667%;
  }

  .lap--1_7 {
    width: 14.28571%;
  }

  .lap--2_3 {
    width: 66.66667%;
  }

  .lap--2_4 {
    width: 50%;
  }

  .lap--2_5 {
    width: 40%;
  }

  .lap--2_6 {
    width: 33.33333%;
  }

  .lap--2_7 {
    width: 28.57143%;
  }

  .lap--3_4 {
    width: 75%;
  }

  .lap--3_5 {
    width: 60%;
  }

  .lap--3_6 {
    width: 50%;
  }

  .lap--3_7 {
    width: 42.85714%;
  }

  .lap--4_5 {
    width: 80%;
  }

  .lap--4_6 {
    width: 66.66667%;
  }

  .lap--4_7 {
    width: 57.14286%;
  }

  .lap--5_6 {
    width: 83.33333%;
  }

  .lap--5_7 {
    width: 71.42857%;
  }

  .lap--6_7 {
    width: 85.71429%;
  }

  .grid--set--lap--1_2 .grid__col {
    width: 50%;
  }

  .grid--set--lap--1_3 .grid__col {
    width: 33.33333%;
  }

  .grid--set--lap--1_4 .grid__col {
    width: 25%;
  }

  .grid--set--lap--1_5 .grid__col {
    width: 20%;
  }

  .grid--set--lap--1_6 .grid__col {
    width: 16.66667%;
  }

  .grid--set--lap--1_7 .grid__col {
    width: 14.28571%;
  }

  .grid--set--lap--1_2 .grid__col:nth-child(2n+1) {
    clear: both;
  }

  .grid--set--lap--1_3 .grid__col:nth-child(2n+1) {
    clear: none;
  }

  .grid--set--lap--1_3 .grid__col:nth-child(3n+1) {
    clear: both;
  }

  .grid--set--lap--1_4 .grid__col:nth-child(3n+1) {
    clear: none;
  }

  .grid--set--lap--1_4 .grid__col:nth-child(2n+1) {
    clear: none;
  }

  .grid--set--lap--1_4 .grid__col:nth-child(4n+1) {
    clear: both;
  }

  .grid--set--lap--1_5 .grid__col:nth-child(4n+1) {
    clear: none;
  }

  .grid--set--lap--1_5 .grid__col:nth-child(3n+1) {
    clear: none;
  }

  .grid--set--lap--1_5 .grid__col:nth-child(2n+1) {
    clear: none;
  }

  .grid--set--lap--1_5 .grid__col:nth-child(5n+1) {
    clear: both;
  }

  .grid--set--lap--1_6 .grid__col:nth-child(5n+1) {
    clear: none;
  }

  .grid--set--lap--1_6 .grid__col:nth-child(4n+1) {
    clear: none;
  }

  .grid--set--lap--1_6 .grid__col:nth-child(3n+1) {
    clear: none;
  }

  .grid--set--lap--1_6 .grid__col:nth-child(2n+1) {
    clear: none;
  }

  .grid--set--lap--1_6 .grid__col:nth-child(6n+1) {
    clear: both;
  }

  .grid--set--lap--1_7 .grid__col:nth-child(6n+1) {
    clear: none;
  }

  .grid--set--lap--1_7 .grid__col:nth-child(5n+1) {
    clear: none;
  }

  .grid--set--lap--1_7 .grid__col:nth-child(4n+1) {
    clear: none;
  }

  .grid--set--lap--1_7 .grid__col:nth-child(3n+1) {
    clear: none;
  }

  .grid--set--lap--1_7 .grid__col:nth-child(2n+1) {
    clear: none;
  }

  .grid--set--lap--1_7 .grid__col:nth-child(7n+1) {
    clear: both;
  }

  .lap--push--0,
  .lap--push--none {
    position: static;
    left: 0%;
  }

  .lap--push--1_2 {
    position: relative;
    left: 50%;
  }

  .lap--push--1_3 {
    position: relative;
    left: 33.33333%;
  }

  .lap--push--1_4 {
    position: relative;
    left: 25%;
  }

  .lap--push--1_5 {
    position: relative;
    left: 20%;
  }

  .lap--push--1_6 {
    position: relative;
    left: 16.66667%;
  }

  .lap--push--1_7 {
    position: relative;
    left: 14.28571%;
  }

  .lap--push--2_3 {
    position: relative;
    left: 66.66667%;
  }

  .lap--push--2_4 {
    position: relative;
    left: 50%;
  }

  .lap--push--2_5 {
    position: relative;
    left: 40%;
  }

  .lap--push--2_6 {
    position: relative;
    left: 33.33333%;
  }

  .lap--push--2_7 {
    position: relative;
    left: 28.57143%;
  }

  .lap--push--3_4 {
    position: relative;
    left: 75%;
  }

  .lap--push--3_5 {
    position: relative;
    left: 60%;
  }

  .lap--push--3_6 {
    position: relative;
    left: 50%;
  }

  .lap--push--3_7 {
    position: relative;
    left: 42.85714%;
  }

  .lap--push--4_5 {
    position: relative;
    left: 80%;
  }

  .lap--push--4_6 {
    position: relative;
    left: 66.66667%;
  }

  .lap--push--4_7 {
    position: relative;
    left: 57.14286%;
  }

  .lap--push--5_6 {
    position: relative;
    left: 83.33333%;
  }

  .lap--push--5_7 {
    position: relative;
    left: 71.42857%;
  }

  .lap--push--6_7 {
    position: relative;
    left: 85.71429%;
  }

  .lap--1_2--centered {
    position: relative;
    left: 25%;
  }

  .lap--1_3--centered {
    position: relative;
    left: 33.33333%;
  }

  .lap--1_4--centered {
    position: relative;
    left: 37.5%;
  }

  .lap--1_5--centered {
    position: relative;
    left: 40%;
  }

  .lap--1_6--centered {
    position: relative;
    left: 41.66667%;
  }

  .lap--1_7--centered {
    position: relative;
    left: 42.85714%;
  }

  .lap--2_3--centered {
    position: relative;
    left: 16.66667%;
  }

  .lap--2_4--centered {
    position: relative;
    left: 25%;
  }

  .lap--2_5--centered {
    position: relative;
    left: 30%;
  }

  .lap--2_6--centered {
    position: relative;
    left: 33.33333%;
  }

  .lap--2_7--centered {
    position: relative;
    left: 35.71429%;
  }

  .lap--3_4--centered {
    position: relative;
    left: 12.5%;
  }

  .lap--3_5--centered {
    position: relative;
    left: 20%;
  }

  .lap--3_6--centered {
    position: relative;
    left: 25%;
  }

  .lap--3_7--centered {
    position: relative;
    left: 28.57143%;
  }

  .lap--4_5--centered {
    position: relative;
    left: 10.0%;
  }

  .lap--4_6--centered {
    position: relative;
    left: 16.66667%;
  }

  .lap--4_7--centered {
    position: relative;
    left: 21.42857%;
  }

  .lap--5_6--centered {
    position: relative;
    left: 8.33333%;
  }

  .lap--5_7--centered {
    position: relative;
    left: 14.28571%;
  }

  .lap--6_7--centered {
    position: relative;
    left: 7.14286%;
  }

  .lap--hidden {
    display: none;
  }

  .lap--visible {
    display: block;
  }
}
@media only screen and (min-width: 979px) {
  .desk,
  .desk--1,
  .desk--full {
    width: 100%;
  }

  .desk--1_2 {
    width: 50%;
  }

  .desk--1_3 {
    width: 33.33333%;
  }

  .desk--1_4 {
    width: 25%;
  }

  .desk--1_5 {
    width: 20%;
  }

  .desk--1_6 {
    width: 16.66667%;
  }

  .desk--1_7 {
    width: 14.28571%;
  }

  .desk--2_3 {
    width: 66.66667%;
  }

  .desk--2_4 {
    width: 50%;
  }

  .desk--2_5 {
    width: 40%;
  }

  .desk--2_6 {
    width: 33.33333%;
  }

  .desk--2_7 {
    width: 28.57143%;
  }

  .desk--3_4 {
    width: 75%;
  }

  .desk--3_5 {
    width: 60%;
  }

  .desk--3_6 {
    width: 50%;
  }

  .desk--3_7 {
    width: 42.85714%;
  }

  .desk--4_5 {
    width: 80%;
  }

  .desk--4_6 {
    width: 66.66667%;
  }

  .desk--4_7 {
    width: 57.14286%;
  }

  .desk--5_6 {
    width: 83.33333%;
  }

  .desk--5_7 {
    width: 71.42857%;
  }

  .desk--6_7 {
    width: 85.71429%;
  }

  .grid--set--desk--1_2 .grid__col {
    width: 50%;
  }

  .grid--set--desk--1_3 .grid__col {
    width: 33.33333%;
  }

  .grid--set--desk--1_4 .grid__col {
    width: 25%;
  }

  .grid--set--desk--1_5 .grid__col {
    width: 20%;
  }

  .grid--set--desk--1_6 .grid__col {
    width: 16.66667%;
  }

  .grid--set--desk--1_7 .grid__col {
    width: 14.28571%;
  }

  .grid--set--desk--1_2 .grid__col:nth-child(2n+1) {
    clear: both;
  }

  .grid--set--desk--1_3 .grid__col:nth-child(2n+1) {
    clear: none;
  }

  .grid--set--desk--1_3 .grid__col:nth-child(3n+1) {
    clear: both;
  }

  .grid--set--desk--1_4 .grid__col:nth-child(3n+1) {
    clear: none;
  }

  .grid--set--desk--1_4 .grid__col:nth-child(2n+1) {
    clear: none;
  }

  .grid--set--desk--1_4 .grid__col:nth-child(4n+1) {
    clear: both;
  }

  .grid--set--desk--1_5 .grid__col:nth-child(4n+1) {
    clear: none;
  }

  .grid--set--desk--1_5 .grid__col:nth-child(3n+1) {
    clear: none;
  }

  .grid--set--desk--1_5 .grid__col:nth-child(2n+1) {
    clear: none;
  }

  .grid--set--desk--1_5 .grid__col:nth-child(5n+1) {
    clear: both;
  }

  .grid--set--desk--1_6 .grid__col:nth-child(5n+1) {
    clear: none;
  }

  .grid--set--desk--1_6 .grid__col:nth-child(4n+1) {
    clear: none;
  }

  .grid--set--desk--1_6 .grid__col:nth-child(3n+1) {
    clear: none;
  }

  .grid--set--desk--1_6 .grid__col:nth-child(2n+1) {
    clear: none;
  }

  .grid--set--desk--1_6 .grid__col:nth-child(6n+1) {
    clear: both;
  }

  .grid--set--desk--1_7 .grid__col:nth-child(6n+1) {
    clear: none;
  }

  .grid--set--desk--1_7 .grid__col:nth-child(5n+1) {
    clear: none;
  }

  .grid--set--desk--1_7 .grid__col:nth-child(4n+1) {
    clear: none;
  }

  .grid--set--desk--1_7 .grid__col:nth-child(3n+1) {
    clear: none;
  }

  .grid--set--desk--1_7 .grid__col:nth-child(2n+1) {
    clear: none;
  }

  .grid--set--desk--1_7 .grid__col:nth-child(7n+1) {
    clear: both;
  }

  .desk--push--0,
  .desk--push--none {
    position: static;
    left: 0%;
  }

  .desk--push--1_2 {
    position: relative;
    left: 50%;
  }

  .desk--push--1_3 {
    position: relative;
    left: 33.33333%;
  }

  .desk--push--1_4 {
    position: relative;
    left: 25%;
  }

  .desk--push--1_5 {
    position: relative;
    left: 20%;
  }

  .desk--push--1_6 {
    position: relative;
    left: 16.66667%;
  }

  .desk--push--1_7 {
    position: relative;
    left: 14.28571%;
  }

  .desk--push--2_3 {
    position: relative;
    left: 66.66667%;
  }

  .desk--push--2_4 {
    position: relative;
    left: 50%;
  }

  .desk--push--2_5 {
    position: relative;
    left: 40%;
  }

  .desk--push--2_6 {
    position: relative;
    left: 33.33333%;
  }

  .desk--push--2_7 {
    position: relative;
    left: 28.57143%;
  }

  .desk--push--3_4 {
    position: relative;
    left: 75%;
  }

  .desk--push--3_5 {
    position: relative;
    left: 60%;
  }

  .desk--push--3_6 {
    position: relative;
    left: 50%;
  }

  .desk--push--3_7 {
    position: relative;
    left: 42.85714%;
  }

  .desk--push--4_5 {
    position: relative;
    left: 80%;
  }

  .desk--push--4_6 {
    position: relative;
    left: 66.66667%;
  }

  .desk--push--4_7 {
    position: relative;
    left: 57.14286%;
  }

  .desk--push--5_6 {
    position: relative;
    left: 83.33333%;
  }

  .desk--push--5_7 {
    position: relative;
    left: 71.42857%;
  }

  .desk--push--6_7 {
    position: relative;
    left: 85.71429%;
  }

  .desk--1_2--centered {
    position: relative;
    left: 25%;
  }

  .desk--1_3--centered {
    position: relative;
    left: 33.33333%;
  }

  .desk--1_4--centered {
    position: relative;
    left: 37.5%;
  }

  .desk--1_5--centered {
    position: relative;
    left: 40%;
  }

  .desk--1_6--centered {
    position: relative;
    left: 41.66667%;
  }

  .desk--1_7--centered {
    position: relative;
    left: 42.85714%;
  }

  .desk--2_3--centered {
    position: relative;
    left: 16.66667%;
  }

  .desk--2_4--centered {
    position: relative;
    left: 25%;
  }

  .desk--2_5--centered {
    position: relative;
    left: 30%;
  }

  .desk--2_6--centered {
    position: relative;
    left: 33.33333%;
  }

  .desk--2_7--centered {
    position: relative;
    left: 35.71429%;
  }

  .desk--3_4--centered {
    position: relative;
    left: 12.5%;
  }

  .desk--3_5--centered {
    position: relative;
    left: 20%;
  }

  .desk--3_6--centered {
    position: relative;
    left: 25%;
  }

  .desk--3_7--centered {
    position: relative;
    left: 28.57143%;
  }

  .desk--4_5--centered {
    position: relative;
    left: 10.0%;
  }

  .desk--4_6--centered {
    position: relative;
    left: 16.66667%;
  }

  .desk--4_7--centered {
    position: relative;
    left: 21.42857%;
  }

  .desk--5_6--centered {
    position: relative;
    left: 8.33333%;
  }

  .desk--5_7--centered {
    position: relative;
    left: 14.28571%;
  }

  .desk--6_7--centered {
    position: relative;
    left: 7.14286%;
  }

  .desk--hidden {
    display: none;
  }

  .desk--visible {
    display: block;
  }
}