/**
 * Gridpak Beta LESS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */

/* Reusable column setup */
.mixin-col {
     border:0px solid rgba(0,0,0,0);
     float:left;
     -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
     box-sizing:border-box;
     -moz-background-clip:padding-box !important;
     -webkit-background-clip:padding-box !important;
     background-clip:padding-box !important;
}
.col {
     .mixin-col;
}

.mixin-span(@num, @gutter_pc, @gutter_px, @padding, @max_columns) {
    @one_col: (100% - (@gutter_pc * (@max_columns - 1))) / @max_columns;
    width:(@one_col * @num) + (@gutter_pc * (@num - 1));
    border-left-width:@gutter_px;
    padding:@padding;
    margin-left:@gutter_pc;
}
.mixin-push(@num, @gutter_pc, @gutter_px) {
    @one_col: (100% - (@gutter_pc * (@max_columns - 1))) / @max_columns;
    margin-left:(@one_col * @num) + (@gutter_pc * (@num - 1)) + (@gutter_pc * 2);
}
.mixin-span_first {
    margin-left:0;
}

.col {
    margin-left:2%;
    padding:0 0%;
}

/* --- Gridpak variables ---*/ 
@max_columns: 12;
@padding: 0 0%;
@gutter_px: 0;
@gutter_pc: 2%;



.row .col:first-child {
    .mixin-span_first;
}

.span_1 {
    .mixin-span(1, @gutter_pc, @gutter_px, @padding, @max_columns);
}
.span_2 {
    .mixin-span(2, @gutter_pc, @gutter_px, @padding, @max_columns);
}
.span_3 {
    .mixin-span(3, @gutter_pc, @gutter_px, @padding, @max_columns);
}
.span_4 {
    .mixin-span(4, @gutter_pc, @gutter_px, @padding, @max_columns);
}
.span_5 {
    .mixin-span(5, @gutter_pc, @gutter_px, @padding, @max_columns);
}
.span_6 {
    .mixin-span(6, @gutter_pc, @gutter_px, @padding, @max_columns);
}
.span_7 {
    .mixin-span(7, @gutter_pc, @gutter_px, @padding, @max_columns);
}
.span_8 {
    .mixin-span(8, @gutter_pc, @gutter_px, @padding, @max_columns);
}
.span_9 {
    .mixin-span(9, @gutter_pc, @gutter_px, @padding, @max_columns);
}
.span_10 {
    .mixin-span(10, @gutter_pc, @gutter_px, @padding, @max_columns);
}
.span_11 {
    .mixin-span(11, @gutter_pc, @gutter_px, @padding, @max_columns);
}
.span_12 {
    .mixin-span_first;
    width:100%;
}

.push_1 {
    @one_col: (100% - (@gutter_pc * (@max_columns - 1))) / @max_columns;
    margin-left: @one_col + @gutter_pc;
}