layout.css

/* Basic distribution of child elements */

body {
	font-family: "Helvetica Neue";
	font-size: 16px;
}

/* Ocupation */

.occupy.one.part {
	flex: 1;
}

.occupy.two.parts {
	flex: 2;
}

.occupy.three.parts {
	flex: 3;
}

.occupy.four.parts {
	flex: 4;
}


.distributes {
	display: flex;
  	flex-wrap: nowrap;
  	list-style: none;
  	margin: 0;
  	padding: 0;
  	align-items: flex-start;
  	align-self: stretch;
}

.distributes > * {
	flex: 1;
	justify-content: flex-start;
	flex-direction: row;
	padding: 1em;
}

.distributes.horizontally {
	flex-direction: row;
}

.distributes.horizontally > *, .distributes.from.left.to.right > * {
	flex: 1;
}

.distributes.from.left {
	flex-direction: row;
}

.distributes.from.left .stretch {
	align-self: stretch;
}
.distributes.from.left .stretch > * {
	align-items: flex-start;
	flex: 0;
}

.distributes.from.right {
	flex-direction: row-reverse;
}

.distributes.vertically {
	flex-direction: column;
}

.distributes.from.top {
	flex-direction: column;
}

.distributes.from.bottom {
	flex-direction: column-reverse;
}

/* Grids */

.distributes.in.a.grid {
	display: flex;
  	flex-wrap: wrap;
  	align-content: flex-start;
}

.distributes.in.a.grid > * {
	flex: 0 0 auto;
}

.centered {
	justify-content: center;
}

.in.a.grid.of.three {
	display: flex;
  	flex-wrap: wrap;
}


/* Stretching */

.stretch {
	/* 100% width and height */

	flex-wrap: wrap;
}

.stretch > * {
	width: auto;
	min-width: 0;
	max-width: none;
}

.stetch.to.full.width {
	flex: 0 0 100%;
}

.stretch.to.full.height {

}

.per.row {
	flex-wrap: wrap;
}

.distributes.two.items > *
.distributes.three.items > *,
.distributes.four.items > *,
.distributes.five.items > *,
.distributes.six.items > *,
.distributes.seven.items > *,
.distributes.eight.items > * {
	flex: 0 0 auto;
	-webkit-box-sizing: border-box;
}

.exactly > * {
	min-width: 0 !important;
}

.maximum > * {
	/* no shrink */
	flex: 0 0 auto;

}

.distributes.eight.items > * {
	width: calc(100% / 9);
}

.distributes.seven.items > * {
	width: calc(100% / 8);
}

.distributes.six.items > * {
	width: calc(100% / 7);
}

.distributes.five.items > * {
	width: calc(100% / 6);
}

.distributes.four.items > * {
	width: calc(100% / 5);
}

.distributes.three.items > * {
	width: calc(100% / 4);
}

.distributes.two.items > * {
	width: calc(100% / 3);
}

.distributes.one.item > * {
	width: calc(100% / 2);
}


.to.fit.in.a.grid.of.three > * {
	flex: 0 0 auto;
	-webkit-box-sizing: border-box;
	margin: 1em;
	width: calc(33% - 2em);
}

.fit.in.a.grid.of.two > * {
	flex: 0 0 auto;
	-webkit-box-sizing: border-box;
	margin: 1em;
	width: calc(50% - 2em);
}

/* Shrinking


/* Utility */

.hide {
	display: none;
}

/* Alignment */

.align.center {
	align-content: center;
}

/* Spacings */
.half.space {
	margin-right: 0.5em;
}

.normal.space {
	margin-right: 1em;
}

.double.space {
	margin-right: 2em;
}

.quad.space {
	margin-right: 4em;
}

.half.space.in.between > * {
	margin-right: 0.5em;
	margin-bottom: 0.5em;
}

.normal.space.in.between > * {
	margin-right: 1em;
	margin-bottom: 1em;
}

.double.space.in.between > * {
	margin-right: 2em;
	margin-bottom: 2em;
}

.quad.space.in.between > * {
	margin-right: 4em;
	margin-bottom: 4em;
}

/* Breakpoints */

@media (max-width: 569px) {
	.collapses.on.small.devices {
		display: none;
	}
}


.align.right {
	align-items: flex-end;
}