/*  ################################################################################
	TABLE OF CONTENTS
	----------------------------------------------------------------------------
	- Flex-Grid
		- Defaults
		- Grid-Gap-Sysstem -> moved to grid-gap.css
		- Units
################################################################################  */
/*  ################################################################################
	-	- Defaults
################################################################################  */
.grid-container,
.grid-wrapper {
	position: relative;
	box-sizing: border-box;
	display: block;
	overflow: hidden;
}
.flex-grid {
	position: relative;
	box-sizing: border-box;
	display: -webkit-box;
	/* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;
	/* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;
	/* TWEENER - IE 10 */
	display: -webkit-flex;
	/* NEW - Chrome */
	display: flex;
	/* NEW, Spec - Opera 12.1, Firefox 20+ */
	letter-spacing: -1em;
	flex-wrap: wrap;
}
.flex-grid.g-nowrap,
.flex-grid.g-nowrap-descent,
.flex-grid.g-nowrap-descent .flex-grid,
.flex-grid.g-nowrap.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-nowrap,
.flex-grid.g-descent .unit .flex-grid.g-nowrap {
	-webkit-flex-wrap: nowrap;
	-moz-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
.flex-grid.g-wrap,
.flex-grid.g-wrap-descent,
.flex-grid.g-wrap-descent .flex-grid,
.flex-grid.g-wrap.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-wrap,
.flex-grid.g-descent .unit .flex-grid.g-wrap {
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-grid.g-reverse,
.flex-grid.g-reverse-descent,
.flex-grid.g-reverse-descent .flex-grid,
.flex-grid.g-reverse.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-reverse,
.flex-grid.g-descent .unit .flex-grid.g-reverse {
	-webkit-flex-direction: row-reverse;
	-moz-flex-direction: row-reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
.flex-grid.g-normal,
.flex-grid.g-normal-descent,
.flex-grid.g-normal-descent .flex-grid,
.flex-grid.g-normal.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-normal,
.flex-grid.g-descent .unit .flex-grid.g-normal {
	-webkit-flex-direction: row;
	-moz-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
}
.flex-grid.g-inline,
.flex-grid.g-inline-descent,
.flex-grid.g-inline-descent .flex-grid,
.flex-grid.g-inline.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-inline,
.flex-grid.g-descent .unit .flex-grid.g-inline {
	display: -wbkit-inline-box;
	display: -moz-inline-box;
	display: -ms-inline-flex;
	display: -webkit-inline-flex;
	display: inline-flex;
}
.flex-grid.g-block,
.flex-grid.g-block-descent,
.flex-grid.g-block-descent .flex-grid,
.flex-grid.g-block.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-block,
.flex-grid.g-descent .unit .flex-grid.g-block {
	display: -wbkit-box;
	display: -moz-box;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
}
.flex-grid.g-left,
.flex-grid.g-left-descent,
.flex-grid.g-left-descent .flex-grid,
.flex-grid.g-left.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-left,
.flex-grid.g-descent .unit .flex-grid.g-left {
	-webkit-justify-content: flex-start;
	-moz-justify-content: flex-start;
	-ms-justify-content: flex-start;
	justify-content: flex-start;
}
.flex-grid.g-center,
.flex-grid.g-center-descent,
.flex-grid.g-center-descent .flex-grid,
.flex-grid.g-center.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-center,
.flex-grid.g-descent .unit .flex-grid.g-center {
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
}
.flex-grid.g-right,
.flex-grid.g-right-descent,
.flex-grid.g-right-descent .flex-grid,
.flex-grid.g-right.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-right,
.flex-grid.g-descent .unit .flex-grid.g-right {
	-webkit-justify-content: flex-end;
	-moz-justify-content: flex-end;
	-ms-justify-content: flex-end;
	justify-content: flex-end;
}
.flex-grid.g-justify,
.flex-grid.g-justify-descent,
.flex-grid.g-justify-descent .flex-grid,
.flex-grid.g-justify.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-justify,
.flex-grid.g-descent .unit .flex-grid.g-justify {
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
}
.flex-grid.g-top,
.flex-grid.g-top-descent,
.flex-grid.g-top-descent .flex-grid,
.flex-grid.g-top.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-top,
.flex-grid.g-descent .unit .flex-grid.g-top {
	-webkit-align-items: flex-start;
	-moz-align-items: flex-start;
	-ms-align-items: flex-start;
	align-items: flex-start;
}
.flex-grid.g-vertical-center,
.flex-grid.g-vertical-center-descent,
.flex-grid.g-vertical-center-descent .flex-grid,
.flex-grid.g-vertical-center.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-vertical-center,
.flex-grid.g-descent .unit .flex-grid.g-vertical-center,
.flex-grid.g-v-center,
.flex-grid.g-v-center-descent,
.flex-grid.g-v-center-descent .flex-grid,
.flex-grid.g-v-center.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-v-center,
.flex-grid.g-descent .unit .flex-grid.g-v-center {
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
	align-items: center;
}
.flex-grid.g-bottom,
.flex-grid.g-bottom-descent,
.flex-grid.g-bottom-descent .flex-grid,
.flex-grid.g-bottom.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-bottom,
.flex-grid.g-descent .unit .flex-grid.g-bottom {
	-webkit-align-items: flex-end;
	-moz-align-items: flex-end;
	-ms-align-items: flex-end;
	align-items: flex-end;
}
.flex-grid.g-stretch,
.flex-grid.g-stretch-descent,
.flex-grid.g-stretch-descent .flex-grid,
.flex-grid.g-stretch.g-descent .flex-grid,
.flex-grid .unit .flex-grid.g-stretch,
.flex-grid.g-descent .unit .flex-grid.g-stretch {
	-webkit-align-items: stretch;
	-moz-align-items: stretch;
	-ms-align-items: stretch;
	align-items: stretch;
}

/*  ################################################################################
	-	- grid-gap system -> moved to grid-gap.css
		-> define own gaps between Units
################################################################################  */

/*  ################################################################################
	-	- units
################################################################################  */
.flex-grid > [class~="unit"] {
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
}
.u-1-6 {
	width: 16.66666667%;
}
.u-1-5 {
	width: 20%;
}
.u-1-4 {
	width: 25%;
}
.u-1-3,
.u-2-6 {
	width: 33.33333333%;
}
.u-2-5 {
	width: 40%;
}
.u-1-2,
.u-2-4,
.u-3-6 {
	width: 50%;
}
.u-3-5 {
	width: 60%;
}
.u-2-3,
.u-4-6 {
	width: 66.66666667%;
}
.u-3-4 {
	width: 75%;
}
.u-4-5 {
	width: 80%;
}
.u-5-6 {
	width: 83.33333333%;
}
.u-1,
.u-1-1,
.u-2-2,
.u-3-3,
.u-4-4,
.u-5-5,
.u-6-6 {
	width: 100%;
}

@media screen and (max-width: 180em) {
	.u-xl-1-6 {
		width: 16.66666667%;
	}
	.u-xl-1-5 {
		width: 20%;
	}
	.u-xl-1-4 {
		width: 25%;
	}
	.u-xl-1-3,
	.u-xl-2-6 {
		width: 33.33333333%;
	}
	.u-xl-2-5 {
		width: 40%;
	}
	.u-xl-1-2,
	.u-xl-2-4,
	.u-xl-3-6 {
		width: 50%;
	}
	.u-xl-3-5 {
		width: 60%;
	}
	.u-xl-2-3,
	.u-xl-4-6 {
		width: 66.66666667%;
	}
	.u-xl-3-4 {
		width: 75%;
	}
	.u-xl-4-5 {
		width: 80%;
	}
	.u-xl-5-6 {
		width: 83.33333333%;
	}
	.u-xl-1,
	.u-xl-1-1,
	.u-xl-2-2,
	.u-xl-3-3,
	.u-xl-4-4,
	.u-xl-5-5,
	.u-xl-6-6 {
		width: 100%;
	}
}
@media screen and (max-width: 144em) {
	.u-lg-1-6 {
		width: 16.66666667%;
	}
	.u-lg-1-5 {
		width: 20%;
	}
	.u-lg-1-4 {
		width: 25%;
	}
	.u-lg-1-3,
	.u-lg-2-6 {
		width: 33.33333333%;
	}
	.u-lg-2-5 {
		width: 40%;
	}
	.u-lg-1-2,
	.u-lg-2-4,
	.u-lg-3-6 {
		width: 50%;
	}
	.u-lg-3-5 {
		width: 60%;
	}
	.u-lg-2-3,
	.u-lg-4-6 {
		width: 66.66666667%;
	}
	.u-lg-3-4 {
		width: 75%;
	}
	.u-lg-4-5 {
		width: 80%;
	}
	.u-lg-5-6 {
		width: 83.33333333%;
	}
	.u-lg-1,
	.u-lg-1-1,
	.u-lg-2-2,
	.u-lg-3-3,
	.u-lg-4-4,
	.u-lg-5-5,
	.u-lg-6-6 {
		width: 100%;
	}
}
@media screen and (max-width: 108em) {
	.u-md-1-6 {
		width: 16.66666667%;
	}
	.u-md-1-5 {
		width: 20%;
	}
	.u-md-1-4 {
		width: 25%;
	}
	.u-md-1-3,
	.u-md-2-6 {
		width: 33.33333333%;
	}
	.u-md-2-5 {
		width: 40%;
	}
	.u-md-1-2,
	.u-md-2-4,
	.u-md-3-6 {
		width: 50%;
	}
	.u-md-3-5 {
		width: 60%;
	}
	.u-md-2-3,
	.u-md-4-6 {
		width: 66.66666667%;
	}
	.u-md-3-4 {
		width: 75%;
	}
	.u-md-4-5 {
		width: 80%;
	}
	.u-md-5-6 {
		width: 83.33333333%;
	}
	.u-md-1,
	.u-md-1-1,
	.u-md-2-2,
	.u-md-3-3,
	.u-md-4-4,
	.u-md-5-5,
	.u-md-6-6 {
		width: 100%;
	}
}
@media screen and (max-width: 72em) {
	.u-sm-1-6 {
		width: 16.66666667%;
	}
	.u-sm-1-5 {
		width: 20%;
	}
	.u-sm-1-4 {
		width: 25%;
	}
	.u-sm-1-3,
	.u-sm-2-6 {
		width: 33.33333333%;
	}
	.u-sm-2-5 {
		width: 40%;
	}
	.u-sm-1-2,
	.u-sm-2-4,
	.u-sm-3-6 {
		width: 50%;
	}
	.u-sm-3-5 {
		width: 60%;
	}
	.u-sm-2-3,
	.u-sm-4-6 {
		width: 66.66666667%;
	}
	.u-sm-3-4 {
		width: 75%;
	}
	.u-sm-4-5 {
		width: 80%;
	}
	.u-sm-5-6 {
		width: 83.33333333%;
	}
	.u-sm-1,
	.u-sm-1-1,
	.u-sm-2-2,
	.u-sm-3-3,
	.u-sm-4-4,
	.u-sm-5-5,
	.u-sm-6-6 {
		width: 100%;
	}
}
@media screen and (max-width: 36em) {
	.u-xs-1-6 {
		width: 16.66666667%;
	}
	.u-xs-1-5 {
		width: 20%;
	}
	.u-xs-1-4 {
		width: 25%;
	}
	.u-xs-1-3,
	.u-xs-2-6 {
		width: 33.33333333%;
	}
	.u-xs-2-5 {
		width: 40%;
	}
	.u-xs-1-2,
	.u-xs-2-4,
	.u-xs-3-6 {
		width: 50%;
	}
	.u-xs-3-5 {
		width: 60%;
	}
	.u-xs-2-3,
	.u-xs-4-6 {
		width: 66.66666667%;
	}
	.u-xs-3-4 {
		width: 75%;
	}
	.u-xs-4-5 {
		width: 80%;
	}
	.u-xs-5-6 {
		width: 83.33333333%;
	}
	.u-xs-1,
	.u-xs-1-1,
	.u-xs-2-2,
	.u-xs-3-3,
	.u-xs-4-4,
	.u-xs-5-5,
	.u-xs-6-6 {
		width: 100%;
	}
}