*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.container {
	width: 960px;
	margin: 0 auto;
	padding: 0px;
	position: relative;
}

.container:after,
.container:before {
	content: ' ';
	display: table;
}

.container:after {
	clear: both;
}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12,
.grid-13,
.grid-14,
.grid-15,
.grid-16,
.grid-1-3 {
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}

.grid-1 {
	width: 40px;
}
.grid-2 {
	width: 100px;
}
.grid-3 {
	width: 160px;
}
.grid-4 {
	width: 220px;
}
.grid-5 {
	width: 280px;
}
.grid-6 {
	width: 340px;
}
.grid-7 {
	width: 400px;
}
.grid-8 {
	width: 460px;
}
.grid-9 {
	width: 520px;
}
.grid-10 {
	width: 580px;
}
.grid-11 {
	width: 640px;
}
.grid-12 {
	width: 700px;
}
.grid-13 {
	width: 760px;
}
.grid-14 {
	width: 820px;
}
.grid-15 {
	width: 880px;
}
.grid-16 {
	width: 940px;
}
.grid-1-3 {
	width: 300px;
}

@media only screen and (min-width: 788px) and (max-width: 979px) {
	.container {
		width: 768px;
	}

	.grid-1 {
		width: 28px;
	}
	.grid-2 {
		width: 76px;
	}
	.grid-3 {
		width: 124px;
	}
	.grid-4 {
		width: 172px;
	}
	.grid-5 {
		width: 220px;
	}
	.grid-6 {
		width: 268px;
	}
	.grid-7 {
		width: 316px;
	}
	.grid-8 {
		width: 364px;
	}
	.grid-9 {
		width: 412px;
	}
	.grid-10 {
		width: 460px;
	}
	.grid-11 {
		width: 508px;
	}
	.grid-12 {
		width: 556px;
	}
	.grid-13 {
		width: 604px;
	}
	.grid-14 {
		width: 652px;
	}
	.grid-15 {
		width: 700px;
	}
	.grid-16 {
		width: 748px;
	}
	.grid-1-3 {
		width: 236px;
	}
}

@media only screen and (max-width: 787px) {
	.container {
		width: 300px;
	}

	.grid-1,
	.grid-2,
	.grid-3,
	.grid-4,
	.grid-5,
	.grid-6,
	.grid-7,
	.grid-8,
	.grid-9,
	.grid-10,
	.grid-11,
	.grid-12,
	.grid-13,
	.grid-14,
	.grid-15,
	.grid-16,
	.grid-1-3 {
		width: 300px;
		margin: 0 0 20px 0;
		float: none;
	}
}