// 12 Column fluid and responsive grid

.container{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 10px;
}

.span1,.span2,.span3,.span4,.span5,.span6,.span7,.span8,.span9,.span10,.span11,.span12{
	display: block;
	margin-bottom: 20px;
}

// Grid columns are stacked until the display size is greater than min-width

@include mobilefirst($small-break) {

    $unit: 6.2056333%; // Width of each grid column unit
    $margin: 2.1277%; // Margin between the grid columns

    .container{
        padding:0 40px;
    }

    .group {
        margin-left: -$margin;
    }

    .span1,.span2,.span3,.span4,.span5,.span6,.span7,.span8,.span9,.span10,.span11,.span12{
        float: left;
        margin-left: $margin;
        margin-bottom: 0;
        @include box-sizing(border-box);
    }

    @for $i from 1 through 12 {
        .span#{$i} {
            width: ($unit * $i) + ($margin * ($i - 1));
        }
    }

}