/* A basic box grid system. */
.shelf {
	text-align: left;
	margin: 0px auto;
}

.shelf.align-center {
	text-align: center;
}

.shelf.align-right {
	text-align: right;
}

.box {
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 20px);
	margin: 10px;
}

.box.align-middle, .shelf.align-middle .box {
	vertical-align: middle;
}

.box.align-bottom, .shelf.align-bottom .box {
	vertical-align: bottom;
}

.box.l-12, .shelf.l-12 .box { max-width: calc(8.2% * 12 - 20px); }
.box.l-10, .shelf.l-10 .box { max-width: calc(8.2% * 10 - 20px); }
.box.l-8, .shelf.l-8 .box { max-width: calc(8.2% * 8 - 20px); }
.box.l-6, .shelf.l-6 .box { max-width: calc(8.2% * 6 - 20px); }
.box.l-4, .shelf.l-4 .box { max-width: calc(8.2% * 4 - 20px); }
.box.l-3, .shelf.l-3 .box { max-width: calc(8.2% * 3 - 20px); }
.box.l-2, .shelf.l-2 .box { max-width: calc(8.2% * 2 - 20px); }

@media only screen and (max-width: 1024px) {
	.box.m-12, .shelf.m-12 .box { max-width: calc(8.2% * 12 - 20px); }
	.box.m-10, .shelf.m-10 .box { max-width: calc(8.2% * 10 - 20px); }
	.box.m-8, .shelf.m-8 .box { max-width: calc(8.2% * 8 - 20px); }
	.box.m-6, .shelf.m-6 .box { max-width: calc(8.2% * 6 - 20px); }
	.box.m-4, .shelf.m-4 .box { max-width: calc(8.2% * 4 - 20px); }
	.box.m-3, .shelf.m-3 .box { max-width: calc(8.2% * 3 - 20px); }
	.box.m-2, .shelf.m-2 .box { max-width: calc(8.2% * 2 - 20px); }
}

@media only screen and (max-width: 650px) {
	.box.s-12, .shelf.s-12 .box { max-width: calc(8.2% * 12 - 20px); }
	.box.s-10, .shelf.s-10 .box { max-width: calc(8.2% * 10 - 20px); }
	.box.s-8, .shelf.s-8 .box { max-width: calc(8.2% * 8 - 20px); }
	.box.s-6, .shelf.s-6 .box { max-width: calc(8.2% * 6 - 20px); }
	.box.s-4, .shelf.s-4 .box { max-width: calc(8.2% * 4 - 20px); }
	.box.s-3, .shelf.s-3 .box { max-width: calc(8.2% * 3 - 20px); }
	.box.s-2, .shelf.s-2 .box { max-width: calc(8.2% * 2 - 20px); }
}