.flex{
	display: flex;
}
.page{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.flex-cc{
	height: 100vh;
	width: 100%;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items:center;
	justify-content:space-around;
}
.flex-cc-t{
  height: 100vh;
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items:center;
}
.flex-col-center {
	display: flex;
	flex-direction: column;
	align-items:center;
	margin:10px 0px;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-row-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.column{
	flex-direction: column !important;
}

.flex_a{
	display: flex;
	flex-direction: row;
	align-items: center;
}

.flex_j{
	display: flex;
	justify-content: center;
}

.flex_aj{
	@extend .flex_a;
	justify-content: center;
}

.flex_column{
	display: flex;
	flex-direction: column;
}
.flex-col{
	display: flex;
	flex-direction: column;
}

.flex_sb{
	@extend .flex_a;
	justify-content: space-between;
}

.sb{
	justify-content: space-between;
}

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

.flex_sa{
	display: flex;
	justify-content: space-around;
}

@for $i from 1 through 5 {
  .flex#{$i}{
      flex: $i;
   }
}

.flexWrap {
	flex-wrap: wrap;
}

.font-red {
	color: #e54d42 !important;
}

.font-orange {
	color: #f37b1d !important;
}

.font-yellow {
	color: #fbbd08 !important;
}

.font-olive {
	color: #8dc63f !important;
}

.font-green {
	color: #39b54a !important;
}