/* CONTAINERS */

.flex__container {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	position: relative;
	max-width: 100%;
	width: 100%;
	padding: 0 !important;
}
.flex__row,
.flex__col.bp__none {
	flex-direction: column;
}
.flex__row.flex__reverse,
.flex__col.flex__reverse.bp__none {
	flex-direction: column-reverse;
}
.flex__col,
.flex__row.bp__none {
	flex-direction: row;
}
.flex__col.flex__reverse,
.flex__row.flex__reverse.bp__none {
	flex-direction: row-reverse;
}

.flex__wrap {
	flex-wrap: wrap;
	align-content: flex-start;
}
.flex__wrap-reverse {
	flex-wrap: wrap-reverse;
	align-content: flex-start;
}

.flex__align-end {
	align-content: flex-end;
}
.flex__align-center {
	align-content: center;
}
.flex__align-stretch {
	align-content: stretch;
}
.flex__align-space-between {
	align-content: space-between;
}
.flex__align-space-around {
	align-content: space-around;
}

.flex__justify-end {
	justify-content: flex-end;
}
.flex__justify-center {
	justify-content: center;
}
.flex__justify-space-between {
	justify-content: space-between;
}
.flex__justify-space-around {
	justify-content: space-around;
}
.flex__justify-space-evenly {
	justify-content: space-evenly;
}

.flex__container.flex__end {
	align-items: flex-end;
}
.flex__container.flex__center {
	align-items: center;
}
.flex__container.flex__stretch {
	align-items: stretch;
}
.flex__container.flex__baseline {
	align-items: baseline;
}

/* ITEMS */

.flex__item {
	padding: 0 !important;
	width: 100%;
	max-width: 100%;
}
[class*="flex__justify-"] .flex__item {
	width: auto;
}

.flex__grow-1 {
	flex-grow: 1;
}
.flex__grow-2 {
	flex-grow: 2;
}
.flex__grow-3 {
	flex-grow: 3;
}
.flex__grow-4 {
	flex-grow: 4;
}
.flex__grow-5 {
	flex-grow: 5;
}
.flex__grow-6 {
	flex-grow: 6;
}
.flex__grow-7 {
	flex-grow: 7;
}
.flex__grow-8 {
	flex-grow: 8;
}
.flex__grow-9 {
	flex-grow: 9;
}
[class*="flex__grow-"] {
	width: auto;
}

.flex__shrink-1 {
	flex-shrink: 1;
}
.flex__shrink-2 {
	flex-shrink: 2;
}
.flex__shrink-3 {
	flex-shrink: 3;
}
.flex__shrink-4 {
	flex-shrink: 4;
}
.flex__shrink-5 {
	flex-shrink: 5;
}
.flex__shrink-6 {
	flex-shrink: 6;
}
.flex__shrink-7 {
	flex-shrink: 7;
}
.flex__shrink-8 {
	flex-shrink: 8;
}
.flex__shrink-9 {
	flex-shrink: 9;
}
[class*="flex__shrink-"] {
	width: auto;
}

.flex__size-10 {
	flex: 0 0 10%;
	max-width: 10%;
}
.flex__size-20 {
	flex: 0 0 20%;
	max-width: 20%;
}
.flex__size-25 {
	flex: 0 0 25%;
	max-width: 25%;
}
.flex__size-33 {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}
.flex__size-40 {
	flex: 0 0 40%;
	max-width: 40%;
}
.flex__size-50 {
	flex: 0 0 60%;
	max-width: 50%;
}
.flex__size-60 {
	flex: 0 0 60%;
	max-width: 60%;
}
.flex__size-66 {
	flex: 0 0 66.6666%;
	max-width: 66.6666%;
}
.flex__size-75 {
	flex: 0 0 75%;
	max-width: 75%;
}
.flex__size-80 {
	flex: 0 0 80%;
	max-width: 80%;
}
.flex__size-90 {
	flex: 0 0 90%;
	max-width: 90%;
}
[class*="flex__size-"] {
	width: auto;
}

.flex__offset-10 {
	margin-left: 10%;
}
.flex__offset-20 {
	margin-left: 20%;
}
.flex__offset-25 {
	margin-left: 25%;
}
.flex__offset-33 {
	margin-left: 33.3333%;
}
.flex__offset-40 {
	margin-left: 40%;
}
.flex__offset-50 {
	margin-left: 50%;
}
.flex__offset-60 {
	margin-left: 60%;
}
.flex__offset-66 {
	margin-left: 66.6666%;
}
.flex__offset-75 {
	margin-left: 75%;
}
.flex__offset-80 {
	margin-left: 80%;
}
.flex__offset-90 {
	margin-left: 90%;
}

.flex__item.flex__start {
	align-self: flex-start;
}
.flex__item.flex__end {
	align-self: flex-end;
}
.flex__item.flex__center {
	align-self: center;
}
.flex__item.flex__stretch {
	align-self: stretch;
}
.flex__item.flex__baseline {
	align-self: baseline;
}

/* BREAKPOINTS */

/* SM - Applies <= 568px */
@media screen and (max-width: 35.5rem) {
	.flex__row.bp__sm {
		flex-direction: row;
	}
	.flex__row.flex__reverse.bp__sm {
		flex-direction: row-reverse;
	}
	.flex__col.bp__sm {
		flex-direction: column;
	}
	.flex__col.flex__reverse.bp__sm {
		flex-direction: column-reverse;
	}
	.flex__col.bp__sm .flex__item {
		flex: 1 1 auto;
		max-width: 100%;
		margin-left: 0;
	}
}
/* MD - Applies <= 768px */
@media screen and (max-width: 48rem) {
	.flex__row.bp__md {
		flex-direction: row;
	}
	.flex__row.flex__reverse.bp__md {
		flex-direction: row-reverse;
	}
	.flex__col.bp__md {
		flex-direction: column;
	}
	.flex__col.flex__reverse.bp__md {
		flex-direction: column-reverse;
	}
	.flex__col.bp__md .flex__item {
		flex: 1 1 auto;
		max-width: 100%;
		margin-left: 0;
	}
}
/* LG - Applies <= 992px */
@media screen and (max-width: 62rem) {
	.flex__row.bp__lg {
		flex-direction: row;
	}
	.flex__row.flex__reverse.bp__lg {
		flex-direction: row-reverse;
	}
	.flex__col.bp__lg {
		flex-direction: column;
	}
	.flex__col.flex__reverse.bp__lg {
		flex-direction: column-reverse;
	}
	.flex__col.bp__lg .flex__item {
		flex: 1 1 auto;
		max-width: 100%;
		margin-left: 0;
	}
}
/* XL - Applies <= 1280px */
@media screen and (max-width: 80rem) {
	.flex__row.bp__xl {
		flex-direction: row;
	}
	.flex__row.flex__reverse.bp__xl {
		flex-direction: row-reverse;
	}
	.flex__col.bp__xl {
		flex-direction: column;
	}
	.flex__col.flex__reverse.bp__xl {
		flex-direction: column-reverse;
	}
	.flex__col.bp__xl .flex__item {
		flex: 1 1 auto;
		max-width: 100%;
		margin-left: 0;
	}
}
/* X2L - Applies <= 1440px */
@media screen and (max-width: 90rem) {
	.flex__row.bp__x2l {
		flex-direction: row;
	}
	.flex__row.flex__reverse.bp__x2l {
		flex-direction: row-reverse;
	}
	.flex__col.bp__x2l {
		flex-direction: column;
	}
	.flex__col.flex__reverse.bp__x2l {
		flex-direction: column-reverse;
	}
	.flex__col.bp__x2l .flex__item {
		flex: 1 1 auto;
		max-width: 100%;
		margin-left: 0;
	}
}
/* X3L - Applies <= 1920px */
@media screen and (max-width: 120rem) {
	.flex__row.bp__x3l {
		flex-direction: row;
	}
	.flex__row.flex__reverse.bp__x3l {
		flex-direction: row-reverse;
	}
	.flex__col.bp__x3l {
		flex-direction: column;
	}
	.flex__col.flex__reverse.bp__x3l {
		flex-direction: column-reverse;
	}
	.flex__col.bp__x3l .flex__item {
		flex: 1 1 auto;
		max-width: 100%;
		margin-left: 0;
	}
}
/* X2K - Applies <= 2560px */
@media screen and (max-width: 160rem) {
	.flex__row.bp__x2k {
		flex-direction: row;
	}
	.flex__row.flex__reverse.bp__x2k {
		flex-direction: row-reverse;
	}
	.flex__col.bp__x2k {
		flex-direction: column;
	}
	.flex__col.flex__reverse.bp__x2k {
		flex-direction: column-reverse;
	}
	.flex__col.bp__x2k .flex__item {
		flex: 1 1 auto;
		max-width: 100%;
		margin-left: 0;
	}
}