.grid {	margin: 0 auto; padding: 0 15px }
.grid .row { margin: 0 -15px; text-align: center }
.grid .col { display: inline-block; vertical-align: top; width: 100%; padding: 15px; box-sizing: border-box; text-align: left }

.grid.vtop .col { vertical-align: top }
.grid.vcenter .col { vertical-align: middle }
.grid.vbottom .col { vertical-align: bottom }
.grid .row.vtop .col { vertical-align: top }
.grid .row.vcenter .col { vertical-align: middle }
.grid .row.vbottom .col { vertical-align: bottom }
.grid .col.vtop { vertical-align: top }
.grid .col.vcenter { vertical-align: middle }
.grid .col.vbottom { vertical-align: bottom }

.grid.hleft { text-align: left }
.grid.hcenter { text-align: center }
.grid.hright { text-align: right }
.grid .row.hleft { text-align: left }
.grid .row.hcenter { text-align: center }
.grid .row.hright { text-align: right }
.grid .col.hleft { text-align: left }
.grid .col.hcenter { text-align: center }
.grid .col.hright { text-align: right }

.grid.xs1 .col { width: 100% }
.grid.xs2 .col { width: 50% }
.grid.xs3 .col { width: calc(100% / 3) }
.grid.xs4 .col { width: 25% }
.grid.xs6 .col { width: calc(100% / 6) }
.grid.xs12 .col { width: calc(100% / 12) }
.grid .row.xs1 .col { width: 100% }
.grid .row.xs2 .col { width: 50% }
.grid .row.xs3 .col { width: calc(100% / 3) }
.grid .row.xs4 .col { width: 25% }
.grid .row.xs6 .col { width: calc(100% / 6) }
.grid .row.xs12 .col { width: calc(100% / 12) }
.grid .col.xs12 { width: 100% }
.grid .col.xs11 { width: calc(100% / 12 * 11) }
.grid .col.xs10 { width: calc(100% / 6 * 5) }
.grid .col.xs9 { width: 75% }
.grid .col.xs8 { width: calc(100% / 3 * 2) }
.grid .col.xs7 { width: calc(100% / 12 * 7) }
.grid .col.xs6 { width: 50% }
.grid .col.xs5 { width: calc(100% / 12 * 5) }
.grid .col.xs4 { width: calc(100% / 3) }
.grid .col.xs3 { width: 25% }
.grid .col.xs2 { width: calc(100% / 6) }
.grid .col.xs1 { width: calc(100% / 12) }

@media screen and (max-width: 575px) { .grid .col.xs0, .xs0 { display: none } }

@media screen and (min-width: 576px) {
	.grid {	width: 544px; padding: 0 }
	.grid.full { width: 100% }
	.grid .col { margin-right: -0.25em }
	.grid.sm1 .col { width: 100% }
	.grid.sm2 .col { width: 50% }
	.grid.sm3 .col { width: calc(100% / 3) }
	.grid.sm4 .col { width: 25% }
	.grid.sm6 .col { width: calc(100% / 6) }
	.grid.sm12 .col { width: calc(100% / 12) }
	.grid .row.sm1 .col { width: 100% }
	.grid .row.sm2 .col { width: 50% }
	.grid .row.sm3 .col { width: calc(100% / 3) }
	.grid .row.sm4 .col { width: 25% }
	.grid .row.sm6 .col { width: calc(100% / 6) }
	.grid .row.sm12 .col { width: calc(100% / 12) }
	.grid .col.sm12 { width: 100% }
	.grid .col.sm11 { width: calc(100% / 12 * 11) }
	.grid .col.sm10 { width: calc(100% / 6 * 5) }
	.grid .col.sm9 { width: 75% }
	.grid .col.sm8 { width: calc(100% / 3 * 2) }
	.grid .col.sm7 { width: calc(100% / 12 * 7) }
	.grid .col.sm6 { width: 50% }
	.grid .col.sm5 { width: calc(100% / 12 * 5) }
	.grid .col.sm4 { width: calc(100% / 3) }
	.grid .col.sm3 { width: 25% }
	.grid .col.sm2 { width: calc(100% / 6) }
	.grid .col.sm1 { width: calc(100% / 12) }

	.grid .col.smoffset1 { margin-left: calc(100% / 12) }
	.grid .col.smoffset2 { margin-left: calc(100% / 6) }
	.grid .col.smoffset3 { margin-left: 25% }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
	.grid .col.sm0, .sm0 { display: none }
}

@media screen and (min-width: 768px) {
	.grid {	width: 720px }
	.grid.md1 .col { width: 100% }
	.grid.md2 .col { width: 50% }
	.grid.md3 .col { width: calc(100% / 3) }
	.grid.md4 .col { width: 25% }
	.grid.md6 .col { width: calc(100% / 6) }
	.grid.md12 .col { width: calc(100% / 12) }
	.grid .row.md1 .col { width: 100% }
	.grid .row.md2 .col { width: 50% }
	.grid .row.md3 .col { width: calc(100% / 3) }
	.grid .row.md4 .col { width: 25% }
	.grid .row.md6 .col { width: calc(100% / 6) }
	.grid .row.md12 .col { width: calc(100% / 12) }
	.grid .col.md12 { width: 100% }
	.grid .col.md11 { width: calc(100% / 12 * 11) }
	.grid .col.md10 { width: calc(100% / 6 * 5) }
	.grid .col.md9 { width: 75% }
	.grid .col.md8 { width: calc(100% / 3 * 2) }
	.grid .col.md7 { width: calc(100% / 12 * 7) }
	.grid .col.md6 { width: 50% }
	.grid .col.md5 { width: calc(100% / 12 * 5) }
	.grid .col.md4 { width: calc(100% / 3) }
	.grid .col.md3 { width: 25% }
	.grid .col.md2 { width: calc(100% / 6) }
	.grid .col.md1 { width: calc(100% / 12) }

	.grid .col.mdoffset1 { margin-left: calc(100% / 12) }
	.grid .col.mdoffset2 { margin-left: calc(100% / 6) }
	.grid .col.mdoffset3 { margin-left: 25% }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.grid .col.md0, .md0 { display: none }
}

@media screen and (min-width: 992px) {
	.grid {	width: 940px }
	.grid.lg1 .col { width: 100% }
	.grid.lg2 .col { width: 50% }
	.grid.lg3 .col { width: calc(100% / 3) }
	.grid.lg4 .col { width: 25% }
	.grid.lg6 .col { width: calc(100% / 6) }
	.grid.lg12 .col { width: calc(100% / 12) }
	.grid .row.lg1 .col { width: 100% }
	.grid .row.lg2 .col { width: 50% }
	.grid .row.lg3 .col { width: calc(100% / 3) }
	.grid .row.lg4 .col { width: 25% }
	.grid .row.lg6 .col { width: calc(100% / 6) }
	.grid .row.lg12 .col { width: calc(100% / 12) }
	.grid .col.lg12 { width: 100% }
	.grid .col.lg11 { width: calc(100% / 12 * 11) }
	.grid .col.lg10 { width: calc(100% / 6 * 5) }
	.grid .col.lg9 { width: 75%; }
	.grid .col.lg8 { width: calc(100% / 3 * 2) }
	.grid .col.lg7 { width: calc(100% / 12 * 7) }
	.grid .col.lg6 { width: 50% }
	.grid .col.lg5 { width: calc(100% / 12 * 5) }
	.grid .col.lg4 { width: calc(100% / 3) }
	.grid .col.lg3 { width: 25% }
	.grid .col.lg2 { width: calc(100% / 6) }
	.grid .col.lg1 { width: calc(100% / 12) }

	.grid .col.lgoffset1 { margin-left: calc(100% / 12) }
	.grid .col.lgoffset2 { margin-left: calc(100% / 6) }
	.grid .col.lgoffset3 { margin-left: 25% }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	.grid .col.lg0, .lg0 { display: none }
}

@media screen and (min-width: 1200px) {
	.grid {	width: 1140px }
	.grid.xl1 .col { width: 100% }
	.grid.xl2 .col { width: 50% }
	.grid.xl3 .col { width: calc(100% / 3) }
	.grid.xl4 .col { width: 25% }
	.grid.xl6 .col { width: calc(100% / 6) }
	.grid.xl12 .col { width: calc(100% / 12) }
	.grid .row.xl1 .col { width: 100% }
	.grid .row.xl2 .col { width: 50% }
	.grid .row.xl3 .col { width: calc(100% / 3) }
	.grid .row.xl4 .col { width: 25% }
	.grid .row.xl6 .col { width: calc(100% / 6) }
	.grid .row.xl12 .col { width: calc(100% / 12) }
	.grid .col.xl12 { width: 100% }
	.grid .col.xl11 { width: calc(100% / 12 * 11) }
	.grid .col.xl10 { width: calc(100% / 6 * 5) }
	.grid .col.xl9 { width: 75% }
	.grid .col.xl8 { width: calc(100% / 3 * 2) }
	.grid .col.xl7 { width: calc(100% / 12 * 7) }
	.grid .col.xl6 { width: 50% }
	.grid .col.xl5 { width: calc(100% / 12 * 5) }
	.grid .col.xl4 { width: calc(100% / 3) }
	.grid .col.xl3 { width: 25% }
	.grid .col.xl2 { width: calc(100% / 6) }
	.grid .col.xl1 { width: calc(100% / 12) }

	.grid .col.xloffset1 { margin-left: calc(100% / 12) }
	.grid .col.xloffset2 { margin-left: calc(100% / 6) }
	.grid .col.xloffset3 { margin-left: 25% }

	.grid .col.xl0, .xl0 { display: none }
}