// Prevents padding to be added
* {
	.box-sizing(border-box);
}

// 320px and up
.container {
	padding: 0 5%;
	width: 100%; }

.row {
	margin-top: @line-height-computed;
	margin-bottom: @line-height-computed;
}

.col1, .col2, .col3, .col4, .col5, .col6 {
	width: 100%;
	margin-left: 0;
	// ensures empty columns won't collapse
	min-height: 1px; }

// clear trick
.container:before, .row:before,
.container:after, .row:after { display: table; content: ""; }
.container:after, .row:after { clear: both; }
.container, .row { *zoom: 1; }

@media @breakpoint1 {

	.col1,
	.col2,
	.col3,
	.col4,
	.col5,
	.col6 {  }
    
    .container {
    	padding: 0 15%; }

}

@media @breakpoint2 {

	.row {
	    max-width: 35em;
	    margin: @line-height-computed*2 auto;
	    padding-left: 0;
	    padding-right: 0;
	}

	.col1,
	.col2,
	.col3,
	.col4,
	.col5,
	.col6 {
		float: left;
		margin-left: 4%; }

	.col1:first-child,
	.col2:first-child,
	.col3:first-child,
	.col4:first-child,
	.col5:first-child,
	.col6 { margin-left: 0; }

	.col1 { width: 13%; }
	.col2 { width: 30%; }
	.col3 { width: 48%; }
	.col4 { width: 65%; }
	.col5 { width: 82%; }
	.col6 { width: 100%; }

}