// -------------------------------------------------------------
// Importing grid core and clearfix
// --------------------------------

@import '../../externals/sassy-grid/sass/grid-core';
@import '../../externals/sassy-grid/sass/clearfix';

// -------------------------------------------------------------
// Basic grid settings
// -------------------

$degredation-selector: '.no_media_queries';
$ie6-selector: '.ie6';
$grid-debug: true;

// -------------------------------------------------------------
// Defining breakpoints
// --------------------

$media-breakpoint-mobile: 640;
$media-breakpoint-skinny: 860;

$media-query-mobile:    'screen and (max-width: #{ $media-breakpoint-mobile }px)';
$media-query-skinny:    'screen and (max-width: #{ $media-breakpoint-skinny }px)';
$media-query-print:     'print, projection';

// -------------------------------------------------------------
// Defining the grid
// -----------------

@include define-grid-settings(
    $grid-name: 'demo-grid',
    $is-fluid: true,
    $column-width: 40,
    $gutter-width: 30,
    $gutter-property: 'margin',
    $num-columns: 12,
    $padding-left: 80,
    $padding-right: 80,
    $breakpoints: (
        (
            query $media-query-skinny,
            max-width 700px,
            padding-left 20px,
            padding-right 20px
        ),
        (
            query $media-query-mobile,
            max-width 100%,
            padding-left 1em,
            padding-right 1em
        ),
        (
            query $media-query-print,
            max-width 100%,
            padding-left 0,
            padding-right 0
        )
    )
);

// -------------------------------------------------------------
// Applying the grid
// -----------------

@include apply-grid(
    $use-grid: 'demo-grid',
    $container-selector: '.grid_container',
    $row-selector: '.grid_base_12',
    $row-extend-selectors: '%grid_row',
    $column-selector-prefix: '.grid_col_',
    $column-extend-selectors: '%grid_col',
    $output-column-styles-for: 1 3 4 6 12,
    $break-columns: (
        (
            breakpoint 1,
            selector '.span_6_skinny',
            columns 6
        ),
        (
            breakpoint 1,
            selector '.span_12_skinny',
            columns 12
        ),
        (
            breakpoint 1,
            selector '.span_4_skinny',
            columns 4
        ),
        (
            breakpoint 2,
            selector '.span_6_mobile',
            columns 6
        ),
        (
            breakpoint 2,
            selector '.span_12_mobile',
            columns 12
        ),
        (
            breakpoint 3,
            selector '.span_6_print',
            columns 6
        )
    )
);

// -------------------------------------------------------------
// Basic grid styles
// -----------------

%grid_row{
    @include clearfix;
}

%grid_col {
    float: left;
    .main &{
        padding-bottom: 2em;
    }
}

.grid_container{
    @include clearfix;
    margin-left: auto;
    margin-right: auto;
}


/* ------------------------------------------------------------- *
 * Demo styles
 * ------------------------------------------------------------- */

%grid_col{
    background: #D8E6FF;
    text-align: center;
    line-height: 40px;
    min-height: 40px;
    margin-bottom: 15px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
}

.overlay_grid{
    .grid_base_12{
        height: 100%;
    }
    .grid_col_1{
        @extend %grid_col;
        @include span-columns( $columns: 1, $grid-name: 'demo-grid' );
        background: none;
    }
}

        

/* -----------------------------
   Clearfix
   ----------------------------- */
.clearfix, .grid_base_12, .grid_container {
  zoom: 1;
}
.clearfix:before, .grid_base_12:before, .grid_container:before, .clearfix:after, .grid_base_12:after, .grid_container:after {
  content: " ";
  display: table;
}
.clearfix:after, .grid_base_12:after, .grid_container:after {
  clear: both;
}

/* -----------------------------
   Sassy Grid mixin
   @author: Frej Raahede Nielsen
   @documentation: http://springload.github.com/sassy-grid/
   ----------------------------- */
.grid_container {
  max-width: 970px;
}
.ie7 .grid_container, .ie6 .grid_container {
  /* Locking IE6 and IE7 due to sub-pixel rounding issue */
  width: 970px;
}

.grid_base_12 {
  padding-left: 6.7%;
  padding-right: 6.7%;
}

.grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 {
  margin-left: 1.78%;
  margin-right: 1.78%;
}
.grid_base_12 .grid_col_1:before, .grid_base_12 .grid_col_3:before, .grid_base_12 .grid_col_4:before, .grid_base_12 .grid_col_6:before, .grid_base_12 .grid_col_12:before, .overlay_grid .grid_col_1:before {
  /* Debug style only - this rule will not be present for production */
  display: block;
  top: 0;
  left: 0;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.4);
  line-height: 12px;
  padding: 1px 2px;
  color: #fff;
  font-weight: bold;
}

.grid_base_12 .grid_col_1, .overlay_grid .grid_col_1 {
  width: 4.76%;
}
.grid_base_12 .grid_col_1:before, .overlay_grid .grid_col_1:before {
  /* Debug style only - this rule will not be present for production */
  content: "1 columns";
}

.grid_base_12 .grid_col_3 {
  width: 21.42%;
}
.grid_base_12 .grid_col_3:before {
  /* Debug style only - this rule will not be present for production */
  content: "3 columns";
}

.grid_base_12 .grid_col_4 {
  width: 29.76%;
}
.grid_base_12 .grid_col_4:before {
  /* Debug style only - this rule will not be present for production */
  content: "4 columns";
}

.grid_base_12 .grid_col_6 {
  width: 46.42%;
}
.grid_base_12 .grid_col_6:before {
  /* Debug style only - this rule will not be present for production */
  content: "6 columns";
}

.grid_base_12 .grid_col_12 {
  width: 96.42%;
}
.grid_base_12 .grid_col_12:before {
  /* Debug style only - this rule will not be present for production */
  content: "12 columns";
}

@media screen and (max-width: 860px) {
  .grid_container {
    max-width: 700px;
  }

  .grid_base_12 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .grid_base_12 .span_4_skinny {
    width: 29.76%;
  }
  .grid_base_12 .span_4_skinny:before {
    /* Debug style only - this rule will not be present for production */
    content: "4 columns";
  }

  .grid_base_12 .span_6_skinny {
    width: 46.42%;
  }
  .grid_base_12 .span_6_skinny:before {
    /* Debug style only - this rule will not be present for production */
    content: "6 columns";
  }

  .grid_base_12 .span_12_skinny {
    width: 96.42%;
  }
  .grid_base_12 .span_12_skinny:before {
    /* Debug style only - this rule will not be present for production */
    content: "12 columns";
  }
}
@media screen and (max-width: 640px) {
  .grid_container {
    max-width: 100%;
  }

  .grid_base_12 {
    padding-left: 1em;
    padding-right: 1em;
  }

  .grid_base_12 .span_6_mobile {
    width: 46.42%;
  }
  .grid_base_12 .span_6_mobile:before {
    /* Debug style only - this rule will not be present for production */
    content: "6 columns";
  }

  .grid_base_12 .span_12_mobile {
    width: 96.42%;
  }
  .grid_base_12 .span_12_mobile:before {
    /* Debug style only - this rule will not be present for production */
    content: "12 columns";
  }
}
@media print, projection {
  .grid_container {
    max-width: 100%;
  }

  .grid_base_12 {
    padding-left: 0;
    padding-right: 0;
  }

  .grid_base_12 .span_6_print {
    width: 46.42%;
  }
  .grid_base_12 .span_6_print:before {
    /* Debug style only - this rule will not be present for production */
    content: "6 columns";
  }
}
/* IE6 fix: fixes double margin on floated elements */
.ie6 .grid_base_12 .grid_col_1, .grid_base_12 .ie6 .grid_col_1, .ie6 .grid_base_12 .grid_col_3, .grid_base_12 .ie6 .grid_col_3, .ie6 .grid_base_12 .grid_col_4, .grid_base_12 .ie6 .grid_col_4, .ie6 .grid_base_12 .grid_col_6, .grid_base_12 .ie6 .grid_col_6, .ie6 .grid_base_12 .grid_col_12, .grid_base_12 .ie6 .grid_col_12, .ie6 .overlay_grid .grid_col_1, .overlay_grid .ie6 .grid_col_1 {
  display: inline;
}

.grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 {
  float: left;
}
.main .grid_base_12 .grid_col_1, .grid_base_12 .main .grid_col_1, .main .grid_base_12 .grid_col_3, .grid_base_12 .main .grid_col_3, .main .grid_base_12 .grid_col_4, .grid_base_12 .main .grid_col_4, .main .grid_base_12 .grid_col_6, .grid_base_12 .main .grid_col_6, .main .grid_base_12 .grid_col_12, .grid_base_12 .main .grid_col_12, .main .overlay_grid .grid_col_1, .overlay_grid .main .grid_col_1 {
  padding-bottom: 2em;
}

.grid_container {
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------- *
 * Demo styles
 * ------------------------------------------------------------- */
.grid_base_12 .grid_col_1, .grid_base_12 .grid_col_3, .grid_base_12 .grid_col_4, .grid_base_12 .grid_col_6, .grid_base_12 .grid_col_12, .overlay_grid .grid_col_1 {
  background: #D8E6FF;
  text-align: center;
  line-height: 40px;
  min-height: 40px;
  margin-bottom: 15px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -khtml-border-radius: 4px;
  border-radius: 4px;
}

.overlay_grid .grid_base_12 {
  height: 100%;
}
.overlay_grid .grid_col_1 {
  background: none;
}

        

<div class='grid_container'>
    <div class='grid_base_12'>
        <div class='grid_col_6 span_12_skinny'>
            6
        </div> <!-- /grid_col_6 span_12_skinny -->
        <div class='grid_col_6 span_12_skinny'>
            6
        </div> <!-- /grid_col_6 span_12_skinny -->
        <div class='grid_col_4 span_6_skinny span_12_mobile'>
            4
        </div> <!-- /grid_col_4 span_6_skinny span_12_mobile -->
        <div class='grid_col_4 span_6_skinny span_12_mobile'>
            4
        </div> <!-- /grid_col_4 span_6_skinny span_12_mobile -->
        <div class='grid_col_4 span_6_skinny span_12_mobile'>
            4
        </div> <!-- /grid_col_4 span_6_skinny span_12_mobile -->
        <div class='grid_col_3 span_6_skinny span_6_mobile'>
            3
        </div> <!-- /grid_col_3 span_6_skinny span_6_mobile -->
        <div class='grid_col_3 span_4_skinny span_6_mobile'>
            3
        </div> <!-- /grid_col_3 span_4_skinny span_6_mobile -->
        <div class='grid_col_3 span_4_skinny span_6_mobile'>
            3
        </div> <!-- /grid_col_3 span_4_skinny span_6_mobile -->
        <div class='grid_col_3 span_4_skinny span_6_mobile'>
            3
        </div> <!-- /grid_col_3 span_4_skinny span_6_mobile -->
    </div> <!-- /grid_base_12 -->
</div> <!-- /grid_container -->
        

6
6
4
4
4
3
3
3
3