/*  GRID OF FOUR   ============================================================================= */
  * { box-sizing: border-box; }
.row { width: 100%; max-width: 100%; /* min-width: 768px; */ margin: 0 auto; }
.row .row { width: auto; max-width: none; min-width: 0; /* margin: 0 -15px; */}
.column, .columns {
	float: left;
	min-height: 1px;
	padding: 10px;
	position: relative;
/* margin:0 1% 0 1%; */
	margin: .5%;
	display:block;
}
/* [class*="columns"] + [class*="columns"]:last-child { float: right; } */
[class*="columns"] + [class*="columns"].end { float: right; text-align: right; }
.row .one { width: 7.33% }
.row .two { width: 15.66% }
.row .three { width: 24% }
.row .four { width: 32.33% }
.row .five { width: 40.66% }
.row .six { width: 49% }
.row .seven { width: 57.33% }
.row .eight { width: 65.66% }
.row .nine { width: 74% }
.row .ten { width: 82.33% }
.row .eleven { width: 90.66% }
.row .twelve { width: 99% }

.row .one.no-margin { width: 8.33%; margin: 0;}
.row .two.no-margin { width: 16.66%; margin: 0;}
.row .three.no-margin { width: 25%; margin: 0;}
.row .four.no-margin { width: 33.33%; margin: 0;}
.row .five.no-margin { width: 41.66%; margin: 0;}
.row .six.no-margin { width: 50%; margin: 0;}
.row .seven.no-margin { width: 58.33%; margin: 0;}
.row .eight.no-margin { width: 66.66%; margin: 0;}
.row .nine.no-margin { width: 75%; margin: 0;}
.row .ten.no-margin { width: 83.33%; margin: 0;}
.row .eleven.no-margin { width: 91.66%; margin: 0;}
.row .twelve.no-margin { width: 100%; margin: 0;}

.column.no-padding-left,
.columns.no-padding-left{
	padding-left: 0;
}
.column.no-padding-right,
.columns.no-padding-right{
	padding-right: 0;
}
.column.no-padding-top,
.columns.no-padding-top{
	padding-top: 0;
}
.column.no-padding-bottom,
.columns.no-padding-bottom{
	padding-bottom: 0;
}
.column.no-padding,
.columns.no-padding{
	padding: 0;
}
.column.float-left,
.columns.float-left{
	float: left;
}
.column.float-right,
.columns.float-right{
	float: right;
}
/* Nicolas Gallagher's micro clearfix */
.row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1; }


@media only screen and (max-width: 640px) {
    .column, .columns { float: none; margin:.5% 0;/*  min-height: 1px; padding: 10px; position: relative; margin: 0 2%; */}
    [class*="columns"] + [class*="columns"]:last-child { float: none; }
    [class*="columns"] + [class*="columns"].end { float: none; }
    .row .one,
	.row .two,
	.row .three,
	.row .four,
	.row .five,
	.row .six,
	.row .seven,
	.row .eight,
	.row .nine,
	.row .ten,
	.row .eleven,
	.row .twelve { width: 100% }

	.row .one.no-margin,
	.row .two.no-margin,
	.row .three.no-margin,
	.row .four.no-margin,
	.row .five.no-margin,
	.row .six.no-margin,
	.row .seven.no-margin,
	.row .eight.no-margin,
	.row .nine.no-margin,
	.row .ten.no-margin,
	.row .eleven.no-margin,
	.row .twelve.no-margin { width: 100%;}
}