/* FLEXBOX GRID LAYOUT
--------------------------------------------------------------------------------*/
.flex {
	display: flex;
}

.flex-row {
	flex-direction: row;
}

.flex-row-reverse {
	flex-direction: row-reverse;
}

.flex-column {
	flex-direction: column;
}

.flex-column-reverse {
	flex-direction: column-reverse;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-nowrap {
	flex-wrap: nowrap;
}

.flex-wrap-reverse {
	flex-wrap: wrap-reverse;
}

.flex-max {
	flex: 1 0 0;
}

.flex-min {
	flex: 0 1 auto;
}

.flex-one-tenth {
	flex: 0 0 10%;
	max-width: 10%;
}

.flex-one-ninth {
	flex: 0 0 11.1111%;
	max-width: 11.1111%;
}

.flex-one-eighth {
	flex: 0 0 12.5%;
	max-width: 12.5%;
}

.flex-one-seventh {
	flex: 0 0 14.2857%;
	max-width: 14.2857%;
}

.flex-one-sixth {
	flex: 0 0 16.6666%;
	max-width: 16.6666%;
}

.flex-one-fifth,
.flex-two-tenths {
	flex: 0 0 20%;
	max-width: 20%;
}

.flex-two-ninths {
	flex: 0 0 22.2222%;
	max-width: 22.2222%;
}

.flex-one-fourth,
.flex-two-eighths {
	flex: 0 0 25%;
	max-width: 25%;
}

.flex-two-sevenths {
	flex: 0 0 28.5714%;
	max-width: 28.5714%;
}

.flex-three-tenths {
	flex: 0 0 30%;
	max-width: 30%;
}

.flex-one-third,
.flex-three-ninths,
.flex-two-sixths {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}

.flex-three-eighths {
	flex: 0 0 37.5%;
	max-width: 37.5%;
}

.flex-two-fifths,
.flex-four-tenths {
	flex: 0 0 40%;
	max-width: 40%;
}

.flex-three-sevenths {
	flex: 0 0 42.8571%;
	max-width: 42.8571%;
}

.flex-four-ninths {
	flex: 0 0 44.4444%;
	max-width: 44.4444%;
}

.flex-one-half,
.flex-five-tenths,
.flex-two-fourths,
.flex-four-eighths,
.flex-three-sixths {
	flex: 0 0 50%;
	max-width: 50%;
}

.flex-five-ninths {
	flex: 0 0 55.5555%;
	max-width: 55.5555%;
}

.flex-four-sevenths {
	flex: 0 0 57.1428%;
	max-width: 57.1428%;
}

.flex-three-fifths,
.flex-six-tenths {
	flex: 0 0 60%;
	max-width: 60%;
}

.flex-five-eighths {
	flex: 0 0 62.5%;
	max-width: 62.5%;
}

.flex-two-thirds,
.flex-six-ninths,
.flex-four-sixths {
	flex: 0 0 66.6666%;
	max-width: 66.6666%;
}

.flex-seven-tenths {
	flex: 0 0 70%;
	max-width: 70%;
}

.flex-five-sevenths {
	flex: 0 0 71.4285%;
	max-width: 71.4285%;
}

.flex-three-fourths,
.flex-six-eighths {
	flex: 0 0 75%;
	max-width: 75%;
}

.flex-seven-ninths {
	flex: 0 0 77.7777%;
	max-width: 77.7777%;
}

.flex-four-fifths,
.flex-eight-tenths {
	flex: 0 0 80%;
	max-width: 80%;
}

.flex-five-sixths {
	flex: 0 0 83.3333%;
	max-width: 83.3333%;
}

.flex-six-sevenths {
	flex: 0 0 85.7142%;
	max-width: 85.7142%;
}

.flex-seven-eighths {
	flex: 0 0 87.5%;
	max-width: 87.5%;
}

.flex-eight-ninths {
	flex: 0 0 88.8888%;
	max-width: 88.8888%;
}

.flex-nine-tenths {
	flex: 0 0 90%;
	max-width: 90%;
}

.flex-full {
	flex: 0 0 100%;
	width: 100%;
}

/* horizontal alignment */
.justify-content-start {
	justify-content: flex-start;
}

.justify-content-end {
	justify-content: flex-end;
}

.justify-content-center {
	justify-content: center;
}

.justify-content-between,
.justify-content-space-between {
 	justify-content: space-between;
 }
 
.justify-content-around,
.justify-content-space-around {
 	justify-content: space-around;
 }
 
.justify-content-evenly,
.justify-content-space-evenly {
 	justify-content: space-evenly;
 }

/* vertical alignment */
.align-items-start {
	align-items: flex-start;
}

.align-items-end {
	align-items: flex-end;
}

.align-items-center {
	align-items: center;
}

.align-items-baseline {
	align-items: baseline;
}

.align-items-stretch {
	align-items: stretch;
}

.align-content-start {
	align-content: flex-start;
}

.align-content-end {
	align-content: flex-end;
}

.align-content-center {
	align-content: center;
}

.align-content-between {
	align-content: space-between;
}

.align-content-around {
	align-content: space-around;
}

.align-content-evenly {
	align-content: space-evenly;
}

.align-content-stretch {
	align-content: stretch;
}

.align-self-auto {
	align-self: auto;
}

.align-self-start {
	align-self: flex-start;
}

.align-self-end {
	align-self: flex-end;
}

.align-self-center {
	align-self: center;
}

.align-self-baseline {
	align-self: baseline;
}

.align-self-stretch {
	align-self: stretch;
}

/* order flex items */
.order-1 {
	order: 1;
}
.order-2 {
	order: 2;
}
.order-3 {
	order: 3;
}
.order-4 {
	order: 4;
}
.order-5 {
	order: 5;
}
.order-6 {
	order: 6;
}
.order-7 {
	order: 7;
}
.order-8 {
	order: 8;
}
.order-9 {
	order: 9;
}
.order-10 {
	order: 10;
}
.flex-hr {
	flex-basis: 100%; 
	height: 0; 
	margin: 0; 
	border: 0;
}
.flex-br {
	flex-basis: 100%; 
	height: 0; 
	margin: 0; 
	border: 0;
}