/*****************************
*
*   CSS FLEXBOX CLASSES
*   Made with <3 by zuppa @ zuppa.pt
*
******************************/


.flex{display: flex;}
.flex.center, .flex.flex-center{justify-content: center;}
.flex.nowrap, .flex.flex-nowrap{flex-wrap: nowrap;}
.flex.center-vertical, .flex.flex-center-vertical{align-items: center;}
.flex.space-between, .flex.flex-space-between {justify-content: space-between; }
.flex.space-arround, .flex.flex-space-arround {justify-content: space-around; }
.flex.grow, .flex.flex-grow {justify-content: stretch;}
.flex.grow-vertical, .flex.flex-grow-vertical {align-items: stretch;}

.flex.top, .flex.flex-top {align-items:top;}
.flex.column, .flex.flex-column { flex-direction: column; }
.flex.left, .flex-left {justify-content: left;}
.flex.strech-vertical, .flex-strech-vertical {align-items: stretch;}
.flex.strech-vertical-selft, .flex-strech-vertical-selft {align-self: stretch;}
.flex.top, .flex-top {align-items: flex-start;}
.flex.left, .flex-left {justify-content: flex-start;}
.flex.right, .flex-right {justify-content: flex-end;}


/** COLUMNS **/
.flex.column-mobile, .flex-column-mobile{ flex-direction: column; }
.flex.column-mobile.top, .flex-column-mobile.flex-top,
.flex.column.top, .flex-column.flex-top {align-items: auto; justify-content: flex-start; }
.flex.column-mobile.bottom, .flex-column-mobile.flex-bottom,
.flex.column.bottom, .flex-column.flex-bottom {align-items: auto; justify-content: flex-end; }
.flex.column-mobile.center, .flex-column-mobile.flex-center,
.flex.column.center, .flex-column.flex-center {align-items: center; }
.flex.column-mobile.center-vertical, .flex-column-mobile.flex-center-vertical,
.flex.column.center-vertical, .flex-column.flex-center-vertical {justify-content: center; }
.flex.column-mobile.left, .flex-column-mobile.flex-left,
.flex.column.left, .flex-column.flex-left {align-items: flex-start; justify-content: auto; }
.flex.column-mobile.right, .flex-column-mobile.flex-right,
.flex.column.right, .flex-column.flex-right {align-items: flex-end; justify-content: auto; }
.flex.column-mobile.space-around, .flex-column-mobile.flex-space-around,
.flex.column.space-around, .flex-column.flex-space-around {align-items: auto; justify-content: space-around; }
.flex.column-mobile.space-between, .flex-column-mobile.flex-space-between,
.flex.column.space-between, .flex-column.flex-space-between {align-items: auto; justify-content: space-between; }

.flex.self-right, .flex-self-right {justify-self: flex-end; }
.flex.self-left, .flex-self-left {justify-self: flex-start; }


@media only screen and (min-width:481px){
    .flex.column-mobile{ flex-direction: row; }
}