/*
sm < 30rem
md >= 30rem = 480px
lg >= 48rem = 768px
*/
.container { max-width: 66rem; width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; }
.row { display: flex; flex: 0 1 auto; flex-flow: row wrap; margin-left: -1rem; margin-right: -1rem; }
.col-flex { display: flex; }
.col-auto,
.col-sm-01, .col-sm-02, .col-sm-03, .col-sm-04, .col-sm-05, .col-sm-06, .col-sm-07, .col-sm-08, .col-sm-09, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-01, .col-md-02, .col-md-03, .col-md-04, .col-md-05, .col-md-06, .col-md-07, .col-md-08, .col-md-09, .col-md-10, .col-md-11, .col-md-12,
.col-lg-01, .col-lg-02, .col-lg-03, .col-lg-04, .col-lg-05, .col-lg-06, .col-lg-07, .col-lg-08, .col-lg-09, .col-lg-10, .col-lg-11, .col-lg-12 {
	flex-wrap: 0 0 auto; padding-left: 1rem; padding-right: 1rem; position: relative;
}
.col-auto { flex-basis: 0; flex-grow: 1; max-width: 100%; }
.col-sm-01 { flex-basis: 8.33333333%; max-width: 8.33333333%; }
.col-sm-02 { flex-basis: 16.66666667%; max-width: 16.66666667%; }
.col-sm-03 { flex-basis: 25%; max-width: 25%; }
.col-sm-04 { flex-basis: 33.33333333%; max-width: 33.33333333%; }
.col-sm-05 { flex-basis: 41.66666667%; max-width: 41.66666667%; }
.col-sm-06 { flex-basis: 50%; max-width: 50%; }
.col-sm-07 { flex-basis: 58.33333333%; max-width: 58.33333333%; }
.col-sm-08 { flex-basis: 66.66666667%; 	max-width: 66.66666667%; }
.col-sm-09 { flex-basis: 75%; max-width: 75%; }
.col-sm-10 { flex-basis: 83.33333333%; max-width: 83.33333333%; }
.col-sm-11 { flex-basis: 91.66666667%; max-width: 91.66666667%; }
.col-sm-12 { flex-basis: 100%; max-width: 100%; }
.row-sm { flex-direction: row; }
.column-sm { flex-direction: column; }
.start-sm { justify-content: flex-start; }
.center-sm { justify-content: center; }
.end-sm { justify-content: flex-end; }
.around-sm { justify-content: space-around; }
.between-sm {justify-content: space-between; }
.top-sm { align-items: flex-start; }
.middle-sm { align-items: center; }
.bottom-sm { align-items: flex-end; }
.cont-left-sm { text-align: left; }
.cont-center-sm { text-align: center; }
.cont-right-sm { text-align: right; }

@media (min-width: 30rem) {
	.col-md-01 { flex-basis: 8.33333333%; max-width: 8.33333333%; }
	.col-md-02 { flex-basis: 16.66666667%; max-width: 16.66666667%; }
	.col-md-03 { flex-basis: 25%; max-width: 25%; }
	.col-md-04 { flex-basis: 33.33333333%; max-width: 33.33333333%; }
	.col-md-05 { flex-basis: 41.66666667%; max-width: 41.66666667%; }
	.col-md-06 { flex-basis: 50%; max-width: 50%; }
	.col-md-07 { flex-basis: 58.33333333%; max-width: 58.33333333%; }
	.col-md-08 { flex-basis: 66.66666667%; max-width: 66.66666667%; }
	.col-md-09 { flex-basis: 75%; max-width: 75%; }
	.col-md-10 { flex-basis: 83.33333333%; max-width: 83.33333333%; }
	.col-md-11 { flex-basis: 91.66666667%; max-width: 91.66666667%; }
	.col-md-12 { flex-basis: 100%; max-width: 100%; }
	.row-md { flex-direction: row; }
	.column-md { flex-direction: column; }
	.start-md { justify-content: flex-start; }
	.center-md { justify-content: center; }
	.end-md { justify-content: flex-end; }
	.around-md { justify-content: space-around; }
	.between-md { justify-content: space-between; }
	.top-md { align-items: flex-start; }
	.middle-md { align-items: center; }
	.bottom-md { align-items: flex-end; }
	.cont-left-md { text-align: left; }
	.cont-center-md { text-align: center; }
	.cont-right-md { text-align: right; }
}
@media (min-width: 48rem) {
	.col-lg-01 { flex-basis: 8.33333333%; max-width: 8.33333333%; }
	.col-lg-02 { flex-basis: 16.66666667%; max-width: 16.66666667%; }
	.col-lg-03 { flex-basis: 25%; max-width: 25%; }
	.col-lg-04 { flex-basis: 33.33333333%; max-width: 33.33333333%; }
	.col-lg-05 { flex-basis: 41.66666667%; max-width: 41.66666667%; }
	.col-lg-06 { flex-basis: 50%; max-width: 50%; }
	.col-lg-07 { flex-basis: 58.33333333%; max-width: 58.33333333%; }
	.col-lg-08 { flex-basis: 66.66666667%; max-width: 66.66666667%; }
	.col-lg-09 { flex-basis: 75%; max-width: 75%; }
	.col-lg-10 { flex-basis: 83.33333333%; max-width: 83.33333333%; }
	.col-lg-11 { flex-basis: 91.66666667%; max-width: 91.66666667%; }
	.col-lg-12 { flex-basis: 100%; max-width: 100%; }
	.row-lg { flex-direction: row; }
	.column-lg { flex-direction: column; }
	.start-lg { justify-content: flex-start; }
	.center-lg { justify-content: center; }
	.end-lg { justify-content: flex-end; }
	.around-lg { justify-content: space-around; }
	.between-lg { justify-content: space-between; }
	.top-lg { align-items: flex-start; }
	.middle-lg { align-items: center; }
	.bottom-lg { align-items: flex-end; }
	.cont-left-lg { text-align: left; }
	.cont-center-lg { text-align: center; }
	.cont-right-lg { text-align: right; }
}