/** Bootstrap flex **/

.row { display: flex; flex-wrap: wrap; }
.row:before { content: ''; display: flex; }

/* XS */
.col-xs-1 { flex-basis: calc(100% / 24 * 1); max-width: calc(100% / 24 * 1); }
.col-xs-2 { flex-basis: calc(100% / 24 * 2); max-width: calc(100% / 24 * 2); }
.col-xs-3 { flex-basis: calc(100% / 24 * 3); max-width: calc(100% / 24 * 3); }
.col-xs-4 { flex-basis: calc(100% / 24 * 4); max-width: calc(100% / 24 * 4); }
.col-xs-5 { flex-basis: calc(100% / 24 * 5); max-width: calc(100% / 24 * 5); }
.col-xs-6 { flex-basis: calc(100% / 24 * 6); max-width: calc(100% / 24 * 6); }
.col-xs-7 { flex-basis: calc(100% / 24 * 7); max-width: calc(100% / 24 * 7); }
.col-xs-8 { flex-basis: calc(100% / 24 * 8); max-width: calc(100% / 24 * 8); }
.col-xs-9 { flex-basis: calc(100% / 24 * 9); max-width: calc(100% / 24 * 9); }
.col-xs-10 { flex-basis: calc(100% / 24 * 10); max-width: calc(100% / 24 * 10); }
.col-xs-11 { flex-basis: calc(100% / 24 * 11); max-width: calc(100% / 24 * 11); }
.col-xs-12 { flex-basis: calc(100% / 24 * 12); max-width: calc(100% / 24 * 12); }
.col-xs-13 { flex-basis: calc(100% / 24 * 13); max-width: calc(100% / 24 * 13); }
.col-xs-14 { flex-basis: calc(100% / 24 * 14); max-width: calc(100% / 24 * 14); }
.col-xs-15 { flex-basis: calc(100% / 24 * 15); max-width: calc(100% / 24 * 15); }
.col-xs-16 { flex-basis: calc(100% / 24 * 16); max-width: calc(100% / 24 * 16); }
.col-xs-17 { flex-basis: calc(100% / 24 * 17); max-width: calc(100% / 24 * 17); }
.col-xs-18 { flex-basis: calc(100% / 24 * 18); max-width: calc(100% / 24 * 18); }
.col-xs-19 { flex-basis: calc(100% / 24 * 19); max-width: calc(100% / 24 * 19); }
.col-xs-20 { flex-basis: calc(100% / 24 * 20); max-width: calc(100% / 24 * 20); }
.col-xs-21 { flex-basis: calc(100% / 24 * 21); max-width: calc(100% / 24 * 21); }
.col-xs-22 { flex-basis: calc(100% / 24 * 22); max-width: calc(100% / 24 * 22); }
.col-xs-23 { flex-basis: calc(100% / 24 * 23); max-width: calc(100% / 24 * 23); }
.col-xs-24 { flex-basis: calc(100% / 24 * 24); max-width: calc(100% / 24 * 24); }

/* SM */
.sm-md-lg	.col-sm-1 { flex-basis: calc(100% / 24 * 1); max-width: calc(100% / 24 * 1); }
.sm-md-lg	.col-sm-2 { flex-basis: calc(100% / 24 * 2); max-width: calc(100% / 24 * 2); }
.sm-md-lg	.col-sm-3 { flex-basis: calc(100% / 24 * 3); max-width: calc(100% / 24 * 3); }
.sm-md-lg	.col-sm-4 { flex-basis: calc(100% / 24 * 4); max-width: calc(100% / 24 * 4); }
.sm-md-lg	.col-sm-5 { flex-basis: calc(100% / 24 * 5); max-width: calc(100% / 24 * 5); }
.sm-md-lg	.col-sm-6 { flex-basis: calc(100% / 24 * 6); max-width: calc(100% / 24 * 6); }
.sm-md-lg	.col-sm-7 { flex-basis: calc(100% / 24 * 7); max-width: calc(100% / 24 * 7); }
.sm-md-lg	.col-sm-8 { flex-basis: calc(100% / 24 * 8); max-width: calc(100% / 24 * 8); }
.sm-md-lg	.col-sm-9 { flex-basis: calc(100% / 24 * 9); max-width: calc(100% / 24 * 9); }
.sm-md-lg	.col-sm-10 { flex-basis: calc(100% / 24 * 10); max-width: calc(100% / 24 * 10); }
.sm-md-lg	.col-sm-11 { flex-basis: calc(100% / 24 * 11); max-width: calc(100% / 24 * 11); }
.sm-md-lg	.col-sm-12 { flex-basis: calc(100% / 24 * 12); max-width: calc(100% / 24 * 12); }
.sm-md-lg	.col-sm-13 { flex-basis: calc(100% / 24 * 13); max-width: calc(100% / 24 * 13); }
.sm-md-lg	.col-sm-14 { flex-basis: calc(100% / 24 * 14); max-width: calc(100% / 24 * 14); }
.sm-md-lg	.col-sm-15 { flex-basis: calc(100% / 24 * 15); max-width: calc(100% / 24 * 15); }
.sm-md-lg	.col-sm-16 { flex-basis: calc(100% / 24 * 16); max-width: calc(100% / 24 * 16); }
.sm-md-lg	.col-sm-17 { flex-basis: calc(100% / 24 * 17); max-width: calc(100% / 24 * 17); }
.sm-md-lg	.col-sm-18 { flex-basis: calc(100% / 24 * 18); max-width: calc(100% / 24 * 18); }
.sm-md-lg	.col-sm-19 { flex-basis: calc(100% / 24 * 19); max-width: calc(100% / 24 * 19); }
.sm-md-lg	.col-sm-20 { flex-basis: calc(100% / 24 * 20); max-width: calc(100% / 24 * 20); }
.sm-md-lg	.col-sm-21 { flex-basis: calc(100% / 24 * 21); max-width: calc(100% / 24 * 21); }
.sm-md-lg	.col-sm-22 { flex-basis: calc(100% / 24 * 22); max-width: calc(100% / 24 * 22); }
.sm-md-lg	.col-sm-23 { flex-basis: calc(100% / 24 * 23); max-width: calc(100% / 24 * 23); }
.sm-md-lg	.col-sm-24 { flex-basis: calc(100% / 24 * 24); max-width: calc(100% / 24 * 24); }

/* MD */
.md-lg	.col-md-1 { flex-basis: calc(100% / 24 * 1); max-width: calc(100% / 24 * 1); }
.md-lg	.col-md-2 { flex-basis: calc(100% / 24 * 2); max-width: calc(100% / 24 * 2); }
.md-lg	.col-md-3 { flex-basis: calc(100% / 24 * 3); max-width: calc(100% / 24 * 3); }
.md-lg	.col-md-4 { flex-basis: calc(100% / 24 * 4); max-width: calc(100% / 24 * 4); }
.md-lg	.col-md-5 { flex-basis: calc(100% / 24 * 5); max-width: calc(100% / 24 * 5); }
.md-lg	.col-md-6 { flex-basis: calc(100% / 24 * 6); max-width: calc(100% / 24 * 6); }
.md-lg	.col-md-7 { flex-basis: calc(100% / 24 * 7); max-width: calc(100% / 24 * 7); }
.md-lg	.col-md-8 { flex-basis: calc(100% / 24 * 8); max-width: calc(100% / 24 * 8); }
.md-lg	.col-md-9 { flex-basis: calc(100% / 24 * 9); max-width: calc(100% / 24 * 9); }
.md-lg	.col-md-10 { flex-basis: calc(100% / 24 * 10); max-width: calc(100% / 24 * 10); }
.md-lg	.col-md-11 { flex-basis: calc(100% / 24 * 11); max-width: calc(100% / 24 * 11); }
.md-lg	.col-md-12 { flex-basis: calc(100% / 24 * 12); max-width: calc(100% / 24 * 12); }
.md-lg	.col-md-13 { flex-basis: calc(100% / 24 * 13); max-width: calc(100% / 24 * 13); }
.md-lg	.col-md-14 { flex-basis: calc(100% / 24 * 14); max-width: calc(100% / 24 * 14); }
.md-lg	.col-md-15 { flex-basis: calc(100% / 24 * 15); max-width: calc(100% / 24 * 15); }
.md-lg	.col-md-16 { flex-basis: calc(100% / 24 * 16); max-width: calc(100% / 24 * 16); }
.md-lg	.col-md-17 { flex-basis: calc(100% / 24 * 17); max-width: calc(100% / 24 * 17); }
.md-lg	.col-md-18 { flex-basis: calc(100% / 24 * 18); max-width: calc(100% / 24 * 18); }
.md-lg	.col-md-19 { flex-basis: calc(100% / 24 * 19); max-width: calc(100% / 24 * 19); }
.md-lg	.col-md-20 { flex-basis: calc(100% / 24 * 20); max-width: calc(100% / 24 * 20); }
.md-lg	.col-md-21 { flex-basis: calc(100% / 24 * 21); max-width: calc(100% / 24 * 21); }
.md-lg	.col-md-22 { flex-basis: calc(100% / 24 * 22); max-width: calc(100% / 24 * 22); }
.md-lg	.col-md-23 { flex-basis: calc(100% / 24 * 23); max-width: calc(100% / 24 * 23); }
.md-lg	.col-md-24 { flex-basis: calc(100% / 24 * 24); max-width: calc(100% / 24 * 24); }

/* LG */
.lg		.col-lg-1 { flex-basis: calc(100% / 24 * 1); max-width: calc(100% / 24 * 1); }
.lg		.col-lg-2 { flex-basis: calc(100% / 24 * 2); max-width: calc(100% / 24 * 2); }
.lg		.col-lg-3 { flex-basis: calc(100% / 24 * 3); max-width: calc(100% / 24 * 3); }
.lg		.col-lg-4 { flex-basis: calc(100% / 24 * 4); max-width: calc(100% / 24 * 4); }
.lg		.col-lg-5 { flex-basis: calc(100% / 24 * 5); max-width: calc(100% / 24 * 5); }
.lg		.col-lg-6 { flex-basis: calc(100% / 24 * 6); max-width: calc(100% / 24 * 6); }
.lg		.col-lg-7 { flex-basis: calc(100% / 24 * 7); max-width: calc(100% / 24 * 7); }
.lg		.col-lg-8 { flex-basis: calc(100% / 24 * 8); max-width: calc(100% / 24 * 8); }
.lg		.col-lg-9 { flex-basis: calc(100% / 24 * 9); max-width: calc(100% / 24 * 9); }
.lg		.col-lg-10 { flex-basis: calc(100% / 24 * 10); max-width: calc(100% / 24 * 10); }
.lg		.col-lg-11 { flex-basis: calc(100% / 24 * 11); max-width: calc(100% / 24 * 11); }
.lg		.col-lg-12 { flex-basis: calc(100% / 24 * 12); max-width: calc(100% / 24 * 12); }
.lg		.col-lg-13 { flex-basis: calc(100% / 24 * 13); max-width: calc(100% / 24 * 13); }
.lg		.col-lg-14 { flex-basis: calc(100% / 24 * 14); max-width: calc(100% / 24 * 14); }
.lg		.col-lg-15 { flex-basis: calc(100% / 24 * 15); max-width: calc(100% / 24 * 15); }
.lg		.col-lg-16 { flex-basis: calc(100% / 24 * 16); max-width: calc(100% / 24 * 16); }
.lg		.col-lg-17 { flex-basis: calc(100% / 24 * 17); max-width: calc(100% / 24 * 17); }
.lg		.col-lg-18 { flex-basis: calc(100% / 24 * 18); max-width: calc(100% / 24 * 18); }
.lg		.col-lg-19 { flex-basis: calc(100% / 24 * 19); max-width: calc(100% / 24 * 19); }
.lg		.col-lg-20 { flex-basis: calc(100% / 24 * 20); max-width: calc(100% / 24 * 20); }
.lg		.col-lg-21 { flex-basis: calc(100% / 24 * 21); max-width: calc(100% / 24 * 21); }
.lg		.col-lg-22 { flex-basis: calc(100% / 24 * 22); max-width: calc(100% / 24 * 22); }
.lg		.col-lg-23 { flex-basis: calc(100% / 24 * 23); max-width: calc(100% / 24 * 23); }
.lg		.col-lg-24 { flex-basis: calc(100% / 24 * 24); max-width: calc(100% / 24 * 24); }