/***
 *	Grid System
 * 
 *	Reference:
 *			https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 *			https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
 *			https://github.com/1000ch/grd
 *			https://lucasgruwez.github.io/waffle-grid/
 *
 *	Data:	2017-08-27
 * 
 */

.row { display: flex; flex-wrap: wrap; width: 100%; box-sizing: border-box }
	
	.col,
	.row > * { position: relative; box-sizing: border-box; flex: 0 1 auto; box-sizing: border-box }
	.row > .col + .col { margin-top: 0 }


/* visual effect */
.row.\-gutter { width: calc( 100% + 20px ); margin-right: -20px; margin-top: 0 !important }
	/* * + .row.\-gutter { margin-top: 0 !important; } */
	.row.\-gutter:first-child { margin-top: -20px !important }
	.row.\-gutter > .col { margin-right: 20px; margin-top: 20px }
	.row.\-gutter > .col + .col { margin-top: 20px }


/* direction */
.row.\-reverse { flex-direction: row-reverse }
	.row.\-reverse.\-gutter > .col {}


.row.\-column { flex-direction: column }
	.row.\-column > .col { width: 100% }
	.row.\-column.\-gutter > .col { width: calc( 100% - 20px ) }

.row.\-column.\-reverse { flex-direction: column-reverse }
	.row.\-column.\-reverse.\-gutter > .col { width: calc( 100% - 20px ) }


/* distribute space */
.row.\-around { justify-content: space-around }
	.row.\-gutter.\-around > .col {}

.row.\-between { justify-content: space-between }
	.row.\-gutter.\-between > .col {}


/* horizontal align */
.\-start { display: flex; justify-content: flex-start }

.\-end { display: flex; justify-content: flex-end }

.\-center { display: flex; justify-content: center }
	.\-center > .col { flex-grow: 0; flex-shrink: 0; }
	
	/* horizontal col align */
	.\-to-right, .\-to-center { margin-left: auto; }
	.\-to-left, .\-to-center { margin-right: auto; }


/* vertical align */
.\-top { display: flex; align-items: flex-start }
.\-bottom { display: flex; align-items: flex-end }
.\-middle { display: flex; align-items: center }




/* inside padding	 */
.\-padded {}
	.\-padded > .col { padding: 20px }

/* fit-all column, desconsider column with and show all in the same row	 */
.\-fit-all { display: flex; flex-wrap: nowrap; }
	.\-fit-all > .col { flex: 1 1 auto; }
	

/*
@media only screen and ( min-width: 360px ){
}
*/

/* 
@media only screen and ( min-width: 640px ){
	.\-gutter > .col:not( :empty ) { margin-bottom: 0 }
}
 */


@media only screen and ( min-width: 1440px ){
}

@media only screen and ( min-width: 1199 ){
}

@media only screen and ( max-width: 899px ){
}

@media only screen and ( max-width: 599px ){
}

@media only screen and ( max-width: 359px ){
}