// align texts center
.text-center {
	text-align: center;
}
// .. left
.text-left {
	text-align: left;
}
// .. right
.text-right {
	text-align: right;
}
// Columns in a flex grid can be aligned horizontal or vertical inside of their parent.
// within a container, align items visually center
.align-all {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}
.align-middle {
	align-items: center;
}
.align-center {
	justify-content: center;
}
.align-left {
    justify-content: flex-start;
}
.align-right {
    justify-content: flex-end;
}
.align-center {
    justify-content: center;
}
.align-justify {
    -webkit-box-pack: justify;
    justify-content: space-between;
}
.align-spaced {
    justify-content: space-around;
}
// Columns in a flex grid can be aligned horizontal or vertical individually also
// align a column within a row to the bottom
.align-self-bottom {
	align-self: flex-end;
}
// align a column within a row to the middle
.align-self-middle {
	align-self: center;
}
// align a column within a row to the top
.align-self-top {
	align-self: flex-start;
}
// Elements can be absolutely positioned inside of it's relative parent
// Horizontally centers the element
.horizontal-center {
	position: absolute;
	left: 50%;
	top: auto;
	transform: translateX(-50%);
}
// Vertically centers the element
.vertical-center {
	position: absolute;
	left: auto;
	top: 50%;
	transform: translateY(-50%);
}
// Abolutely centers the element
.absolute-center {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}