.flex-1 {
  flex: 1 !important;
}

.flex_100 {
  flex: 1 1 100% !important;
  max-width: 100%;
  width: 100%;
}

.flex_30 {
  flex: 1 1 100% !important;
  width: 30%;
  max-width: 30%;
}

.flex_40 {
  flex: 1 1 100% !important;
  width: 40%;
  max-width: 40%;
}

.flex_50 {
  flex: 1 1 100% !important;
  width: 50%;
  max-width: 50%;
}

.flex_60 {
  flex: 1 1 100% !important;
  width: 60%;
  max-width: 60%;
}

.flex_70 {
  flex: 1 1 100% !important;
  width: 70%;
  max-width: 70%;
}

.flex_20 {
  flex: 1 1 100% !important;
  width: 20%;
  max-width: 20%;
}

.flex_25 {
  flex: 1 1 100% !important;
  width: 25%;
  max-width: 25%;
}

.flex_33 {
  flex: 1 1 100% !important;
  width: 33.3%;
  max-width: 33.3%;
}

.flex_16 {
  flex: 1 1 100% !important;
  width: 16.6%;
  max-width: 16.6%;
}

.flex_12 {
  flex: 1 1 100% !important;
  width: 12.5%;
  max-width: 12.5%;
}

.flex_5 {
  flex: 1 1 100% !important;
  width: 5%;
  max-width: 5%;
}

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

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

.layout_row {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: stretch;
}

.layout_column {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  justify-content: flex-start;
  align-items: stretch;
}

/* 
-----------
ALIGN ON CENTER
-----------
*/
.layout-align__center-center {
  justify-content: center;
  align-items: center;
}

.layout-align__center-end {
  justify-content: center;
  align-items: flex-end;
}

.layout-align__center-start {
  justify-content: center;
  align-items: flex-start;
}

.layout-align__center-stretch {
  justify-content: center;
  align-items: stretch;
}

/* 
-----------
START
-----------
*/
.layout-align__start-center {
  justify-content: flex-start;
  align-items: center;
}

.layout-align__start-end {
  justify-content: flex-start;
  align-items: flex-end;
}

.layout-align__start-start {
  justify-content: flex-start;
  align-items: flex-start;
}

.layout-align__start-stretch {
  justify-content: flex-start;
  align-items: stretch;
}

.layout-align__start-spacebetween {
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
}

/* 
-----------
LAYOUT ROW - END
-----------
*/
.layout-align__end-center {
  justify-content: flex-end;
  align-items: center;
}

.layout-align__end-end {
  justify-content: flex-end;
  align-items: flex-end;
}

.layout-align__end-start {
  justify-content: flex-end;
  align-items: flex-start;
}

.layout-align__end-stretch {
  justify-content: flex-end;
  align-items: stretch;
}

/* 
-----------
LAYOUT ROW - SPACE AROUND
-----------
*/
.layout-align__spacearound-center {
  justify-content: space-around;
  align-items: center;
}

.layout-align__spacearound-end {
  justify-content: space-around;
  align-items: flex-end;
}

.layout-align__spacearound-start {
  justify-content: space-around;
  align-items: flex-start;
}

.layout-align__spacearound-stretch {
  justify-content: space-around;
  align-items: stretch;
}

/* 
-----------
LAYOUT ROW - SPACE BETWEEN
-----------
*/
.layout-align__spacebetween-center {
  justify-content: space-between;
  align-items: center;
}

.layout-align__spacebetween-end {
  justify-content: space-between;
  align-items: flex-end;
}

.layout-align__spacebetween-start {
  justify-content: space-between;
  align-items: flex-start;
}

.layout-align__spacebetween-stretch {
  justify-content: space-between;
  align-items: stretch;
}

/* FLEX */
.flex_25,
.layout_row > .flex_25 {
  box-sizing: border-box;
  flex: 1 1 100%;
  max-height: 100%;
  max-width: 25%;
}

/* 

FLEX-XS-%

*/

@media (max-width: 599px) {
  .flex-xs_50,
  .layout_row > .flex-xs_50 {
    box-sizing: border-box;
    flex: 1 1 100%;
    max-height: 100%;
    max-width: 50%;
  }

  .flex-xs_33,
  .layout_row > .flex-xs_33 {
    box-sizing: border-box;
    flex: 1 1 100%;
    max-height: 100%;
    max-width: 33.33%;
  }

  .flex-xs_25,
  .layout_row > .flex-xs_25 {
    box-sizing: border-box;
    flex: 1 1 100%;
    max-height: 100%;
    max-width: 25%;
  }

  .flex-xs_20,
  .layout_row > .flex-xs_20 {
    box-sizing: border-box;
    flex: 1 1 100%;
    max-height: 100%;
    max-width: 20%;
  }
}

/* 
FLEX-SM-%
*/

@media (min-width: 600px) and (max-width: 959px) {
  .layout_row > .flex-sm_33 {
    box-sizing: border-box;
    flex: 1 1 33.33%;
    max-height: 100%;
    max-width: 33.33%;
  }

  .layout_row > .flex-sm_25 {
    box-sizing: border-box;
    flex: 1 1 25%;
    max-height: 100%;
    max-width: 25%;
  }

  .layout_row > .flex-sm_20 {
    box-sizing: border-box;
    flex: 1 1 20%;
    max-height: 100%;
    max-width: 20%;
  }
}

/* 
FLEX-MD-%
*/

@media (min-width: 960px) and (max-width: 1279px) {
  .layout_row > .flex-md_33 {
    box-sizing: border-box;
    flex: 1 1 33.33%;
    max-height: 100%;
    max-width: 33.33%;
  }

  .layout_row > .flex-md_25 {
    box-sizing: border-box;
    flex: 1 1 25%;
    max-height: 100%;
    max-width: 25%;
  }

  .layout_row > .flex-md_20 {
    box-sizing: border-box;
    flex: 1 1 20%;
    max-height: 100%;
    max-width: 20%;
  }

  .layout_row > .flex-md_16 {
    box-sizing: border-box;
    flex: 1 1 16.6%;
    max-height: 100%;
    max-width: 16.6%;
  }
}

/* Align-Self */
.self-center {
  align-self: center;
}