/* Grid General 
=============================================== */
	
.container{ 
	position: relative; 
	max-width: 1200px;
	width: 90%; 
	margin: 0 auto; 
	padding: 0; 
}
.container .column,
.container .columns{
	float: left;
	display: inline-block;
	margin-right: 2%;
}

.row{
	margin-bottom: 20px;
}

/* Base Grid */

.container .one.column,
.container .one.columns { width: calc( 96% / 16 ); }
.container .two.columns { width: calc( 96% / 16 * 2); }
.container .three.columns { width: calc( 96% / 16 * 3); }
.container .four.columns { width: calc( 96% / 16 * 4); }
.container .five.columns { width: calc( 96% / 16 * 5); }
.container .six.columns { width: calc( 96% / 16 * 6); }
.container .seven.columns { width: calc( 96% / 16 * 7); }
.container .eight.columns { width: calc( 96% / 16 * 8); }
.container .nine.columns { width: calc( 96% / 16 * 9); }
.container .ten.columns { width: calc( 96% / 16 * 10); }
.container .eleven.columns { width: calc( 96% / 16 * 11); }
.container .twelve.columns { width: calc( 96% / 16 * 12); }
.container .thirteen.columns { width: calc( 96% / 16 * 13); }
.container .fourteen.columns { width: calc( 96% / 16 * 14); }
.container .fifteen.columns { width: calc( 96% / 16 * 15); }
.container .sixteen.columns { width: 96%; }

.container .one-third.column { width: 31%; }
.container .two-thirds.column { width: 62%; }

/* Offsets */
.container .offset-by-one { padding-left: calc( 96% / 16 ); }
.container .offset-by-two { padding-left: calc( 96% / 16 * 2 ); }
.container .offset-by-three { padding-left: calc( 96% / 16 * 3 ); }
.container .offset-by-four { padding-left: calc( 96% / 16 * 4 ); }
.container .offset-by-five { padding-left: calc( 96% / 16 * 5 ); }
.container .offset-by-six { padding-left: calc( 96% / 16 * 6 ); }
.container .offset-by-seven { padding-left: calc( 96% / 16 * 7 ); }
.container .offset-by-eight { padding-left: calc( 96% / 16 * 8 ); }
.container .offset-by-nine { padding-left: calc( 96% / 16 * 9 ); }
.container .offset-by-ten { padding-left: calc( 96% / 16 * 10 ); }
.container .offset-by-eleven { padding-left: calc( 96% / 16 * 11 ); }
.container .offset-by-twelve { padding-left: calc( 96% / 16 * 12 ); }
.container .offset-by-thirteen { padding-left: calc( 96% / 16 * 13 ); }
.container .offset-by-fourteen { padding-left: calc( 96% / 16 * 14 ); }
.container .offset-by-fifteen { padding-left: calc( 96% / 16 * 15 ); }

	

/*  Grid Mobile
================================================== */

@media (max-width: 767px) {
	.container { width: 100%; margin: 0 auto; }
	.container .columns,
	.container .column { margin: 0; }

	.container .one.column,
	.container .one.columns,
	.container .two.columns,
	.container .three.columns,
	.container .four.columns,
	.container .five.columns,
	.container .six.columns,
	.container .seven.columns,
	.container .eight.columns,
	.container .nine.columns,
	.container .ten.columns,
	.container .eleven.columns,
	.container .twelve.columns,
	.container .thirteen.columns,
	.container .fourteen.columns,
	.container .fifteen.columns,
	.container .sixteen.columns,
	.container .one-third.column,
	.container .two-thirds.column  { width: 100%; display: block; }

	/* Offsets */
	.container .offset-by-one,
	.container .offset-by-two,
	.container .offset-by-three,
	.container .offset-by-four,
	.container .offset-by-five,
	.container .offset-by-six,
	.container .offset-by-seven,
	.container .offset-by-eight,
	.container .offset-by-nine,
	.container .offset-by-ten,
	.container .offset-by-eleven,
	.container .offset-by-twelve,
	.container .offset-by-thirteen,
	.container .offset-by-fourteen,
	.container .offset-by-fifteen { padding-left: 0; }

}



/* Clearing
================================================== */

	/* Self Clearing Goodness */
	.container:after { content: "0020"; display: block; height: 0; clear: both; visibility: hidden; }

	/* Use clearfix class on parent to clear nested columns,
	or wrap each row of columns in a <div class="row"> */
	.clearfix:before,
	.clearfix:after,
	.row:before,
	.row:after {
	  content: '0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0; }
	.row:after,
	.clearfix:after {
	  clear: both; }
	.row,
	.clearfix {
	  zoom: 1; }

	/* You can also use a <br class="clear" /> to clear columns */
	.clear {
	  clear: both;
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0;
	}