/* ==========================================================================
   OBJECTS / LAYOUT
   ========================================================================== */

/**
 * Grid-like layout system.
 *
 * The Layout object provides us with a column-style layout system. This file
 * contains the basic structural elements, but classes should be complemented
 * with width Utilities, for example:
 *
 *	<div class="o-layout">
 *		<div class="o-layout__item u-width-6">
 *		</div>
 *		<div class="o-layout__item u-width-6">
 *		</div>
 *	</div>
 *
 * The above will create a two-column structure in which each column will
 * fluidly fill half of the width of the parent. We can have more complex
 * systems:
 *
 * 	<div class="o-layout">
 * 		<div class="o-layout__item u-width-12 u-width-4--m">
 * 		</div>
 * 		<div class="o-layout__item u-width-6 u-width-4--m">
 * 		</div>
 * 		<div class="o-layout__item u-width-6 u-width-4--m">
 * 		</div>
 * 	</div>
 *
 * The above will create a system in which the first item will be 100% width
 * until we enter our medium breakpoint, when it will become 33.333% width. The
 * second and third items will be 50% of their parent, until they also become
 * 33.333% width at the medium breakpoint.
 *
 * We can also manipulate entire layout systems by adding a series of Modifiers
 * to the `.o-layout` Block. For example:
 *
 *	<div class="o-layout  o-layout--reverse">
 *
 * This will reverse the displayed order of the system so that it runs in the
 * opposite order to our source, effectively flipping the system over.
 *
 *	<div class="o-layout  o-layout--[right|center]">
 *
 * This will cause the system to fill up from either the centre or the right
 * hand side. Default behaviour is to fill up the layout system from the left.
 *
 * There are plenty more options available to us: explore them below.
 */

/* Default/mandatory classes.
   =========================================== */
.o-layout {
	display: flex;
	flex: 0 1 auto;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 0 0 calc(0px - 16px);
	margin: 0 0 0 0;
	padding: 0;
	list-style: none;
	/*transition: all .3s ease;*/
}

	.o-layout__item {
		flex: 1 1 auto;
		max-width: 100%;
		padding-left: 16px;
		/*transition: all .3s ease;*/
	}
	
	
	.o-layout.o-layout__item {
		margin-left: 0;
		/*padding-left: 0;*/
	}





/* Layout Display Direction.
 * The flex-direction property specifies the direction of the flexible items
 * inside the flex container. The default value of flex-direction is row
 * (left-to-right, top-to-bottom).
   =========================================== */
/**
 * To reverse the layout direction, use o-layout--row-reverse.
 */
.o-layout--row-reverse {
	flex-direction: row-reverse;
}

/**
 * Use o-layout--column to set the flex items vertically.
 */
.o-layout--column {
	flex-direction: column;
}

/**
 * Same as column, but reversed.
 */
.o-layout--column-reverse {
	flex-direction: column-reverse;
}


	@media screen and (min-width: 48em) {
		.o-layout--row--m {
			flex-direction: row;
		}

		.o-layout--row-reverse--m {
			flex-direction: row-reverse;
		}
		
		.o-layout--column--m {
			flex-direction: column;
		}
		
		.o-layout--column-reverse--m {
			flex-direction: column-reverse;
		}
	}
	
	
	@media screen and (min-width: 60em) {
		.o-layout--row--l {
			flex-direction: row;
		}

		.o-layout--row-reverse--l {
			flex-direction: row-reverse;
		}
		
		.o-layout--column--l {
			flex-direction: column;
		}
		
		.o-layout--column-reverse--l {
			flex-direction: column-reverse;
		}
	}
	
	
	@media screen and (min-width: 90em) {
		.o-layout--row--w {
			flex-direction: row;
		}

		.o-layout--row-reverse--w {
			flex-direction: row-reverse;
		}
		
		.o-layout--column--w {
			flex-direction: column;
		}
		
		.o-layout--column-reverse--w {
			flex-direction: column-reverse;
		}
	}






/* Gutter size modifiers.
   =========================================== */
/**
 * Smaller gutters between items.
 */
.o-layout--narrow {
	margin-left: calc(0px - (16px * 0.5));
}

	.o-layout--narrow > .o-layout__item {
		padding-left: calc(16px * 0.5);
	}

	
/**
 * Larger gutters between items.
 */
.o-layout--wide {
	margin-left: calc(0px - (16px * 2));
}

	.o-layout--wide > .o-layout__item {
		padding-left: calc(16px * 2);
	}

	
/**
 * No gutters between items.
 */
.o-layout--flush {
	margin-left: 0;
}

	.o-layout--flush > .o-layout__item {
		padding-left: 0;
	}


/**
 * Make full width of parent.
 */
.o-layout--full {
	margin-right: calc(0px - 16px);
}





/* Vertical gutter modifiers.
   =========================================== */
/**
 * Include vertical gutters on layout items.
 */
.o-layout--spaced > .o-layout__item {
	margin-bottom: 16px;
}
	
	/**
	* If we've chosen to change the size of the horizontal gutters, let's change
	* the vertical gutters accordingly.
	*/
	.o-layout--spaced.o-layout--narrow > .o-layout__item {
		margin-bottom: calc(16px * 0.5);
	}
	
	.o-layout--spaced.o-layout--wide > .o-layout__item {
		margin-bottom: calc(16px * 2);
	}


	


/* Vertical alignment modifiers.
 * The align-items property vertically aligns the flexible container's items
 * when the items do not use all available space on the cross-axis.
   =========================================== */
/**
 * Items are positioned at the top of the container.
 */
.o-layout--align-top {
	align-items: flex-start;
}

/**
 * Items are positioned at the center of the container (vertically).
 */
.o-layout--align-center {
	align-items: center;
}

/**
 * Items are positioned at the bottom of the container.
 */
.o-layout--align-bottom {
	align-items: flex-end;
}

/**
 * Items are positioned at the baseline of the container.
 */
.o-layout--align-baseline {
	align-items: baseline;
}

/**
 * Default value. Items are stretched to fit the container.
 */
.o-layout--align-stretch {
	align-items: stretch;
}





/* Horizontal alignment modifiers.
 * The justify-content property horizontally aligns the flexible container's 
 * items when the items do not use all available space on the main-axis.
   =========================================== */
/**
 * Default value. Items are positioned at the beginning of the container.
 */
.o-layout--justify-start {
	justify-content: flex-start;
}

/**
 * Items are positioned at the center of the container.
 */
.o-layout--justify-center {
	justify-content: center;
}

/**
 * Items are positioned at the end of the container.
 */
.o-layout--justify-end {
	justify-content: flex-end;
}

/**
 * Items are positioned with space before, between, and after the lines.
 */
.o-layout--justify-around {
	justify-content: space-around;
}

/**
 * Items are positioned with space between the lines.
 */
.o-layout--justify-between {
	justify-content: space-between;
}





/* Growth control.
   =========================================== */
.o-layout--grow {
	flex-grow: 1;
}

.o-layout--no-grow {
	flex-grow: 0;
}

.o-layout--shrink {
	flex-shrink: 1;
}

.o-layout--no-shrink {
	flex-shrink: 0;
}





/* Wrapping modifiers.
   =========================================== */
.o-layout--no-wrap {
	flex-wrap: nowrap;
}

.o-layout--wrap {
	flex-wrap: wrap;
}

.o-layout--wrap-reverse {
	flex-wrap: wrap-reverse;
}





/* Flex ordering modifiers.
 * Set an item to be first or last in grid.
   =========================================== */
.o-layout__first {
	order: -1;
}

.o-layout__last {
	order: 1;
}
	
	
	@media screen and (min-width: 40em) {
		.o-layout__first--s {
			order: -1;
		}
		
		.o-layout__last--s {
			order: 1;
		}
	}
	
	
	@media screen and (min-width: 48em) {
		.o-layout__first--m {
			order: -1;
		}
		
		.o-layout__last--m {
			order: 1;
		}
	}
	
	
	@media screen and (min-width: 60em) {
		.o-layout__first--l {
			order: -1;
		}
		
		.o-layout__last--l {
			order: 1;
		}
	}
	
	
	@media screen and (min-width: 90em) {
		.o-layout__first--w {
			order: -1;
		}
		
		.o-layout__last--w {
			order: 1;
		}
	}