.grid, .grid--rev, .grid--full {
	list-style: none;
	/* [1] */
	margin: 0;
	/* [2] */
	padding: 0;
	/* [2] */
	margin-left: -30px;
	/* [3] */
	letter-spacing: -0.31em;
}

/**
 * 1. Cause columns to stack side-by-side.
 * 2. Space columns apart.
 * 3. Align columns to the tops of each other.
 * 4. Full-width unless told to behave otherwise.
 * 5. Required to combine fluid widths and fixed gutters.
 */
.grid__item {
	position: relative;
	display: inline-block;
	padding-left: 30px;
	vertical-align: top;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	letter-spacing: normal;
}

/**
 * Reversed grids allow you to structure your source in the opposite order to
 * how your rendered layout will appear.
 */
.grid--rev {
	direction: rtl;
	text-align: right;
}

	.grid--rev > .grid__item {
		direction: ltr;
		text-align: left;
	}

/**
 * Gutterless grids have all the properties of regular grids, minus any spacing.
 */
.grid--full {
	margin-left: 0;
}

	.grid--full > .grid__item {
		padding-left: 0;
	}

/*------------------------------------*\
    $WIDTHS
\*------------------------------------*/
/**
 * These next bits get worked out for you.
 */
/**
 * Create our width classes, prefixed by the specified namespace.
 */
/**
 * Our regular, non-responsive width classes.
 */
/**
 * Whole
 */
.one-whole {
	width: 100%;
}

/**
 * Halves
 */
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths {
	width: 50%;
}

/**
 * Thirds
 */
.one-third, .two-sixths, .four-twelfths {
	width: 33.333%;
}

.two-thirds, .four-sixths, .eight-twelfths {
	width: 66.666%;
}

/**
 * Quarters
 */
.one-quarter, .two-eighths, .three-twelfths {
	width: 25%;
}

.three-quarters, .six-eighths, .nine-twelfths {
	width: 75%;
}

/**
 * Fifths
 */
.one-fifth, .two-tenths {
	width: 20%;
}

.two-fifths, .four-tenths {
	width: 40%;
}

.three-fifths, .six-tenths {
	width: 60%;
}

.four-fifths, .eight-tenths {
	width: 80%;
}

/**
 * Sixths
 */
.one-sixth, .two-twelfths {
	width: 16.666%;
}

.five-sixths, .ten-twelfths {
	width: 83.333%;
}

/**
 * Eighths
 */
.one-eighth {
	width: 12.5%;
}

.three-eighths {
	width: 37.5%;
}

.five-eighths {
	width: 62.5%;
}

.seven-eighths {
	width: 87.5%;
}

/**
 * Tenths
 */
.one-tenth {
	width: 10%;
}

.three-tenths {
	width: 30%;
}

.seven-tenths {
	width: 70%;
}

.nine-tenths {
	width: 90%;
}

/**
 * Twelfths
 */
.one-twelfth {
	width: 8.333%;
}

.five-twelfths {
	width: 41.666%;
}

.seven-twelfths {
	width: 58.333%;
}

.eleven-twelfths {
	width: 91.666%;
}

/*------------------------------------*\
    $PUSH
\*------------------------------------*/
/**
 * Push classes, to move grid items over to the right by certain amounts.
 */
/**
 * Not a particularly great selector, but the DRYest way to do things.
 */
[class*="push--"] {
	position: relative;
}

/**
 * Whole
 */
.push--one-whole {
	left: 100%;
}

/**
 * Halves
 */
.push--one-half, .push--two-quarters, .push--three-sixths, .push--four-eighths, .push--five-tenths, .push--six-twelfths {
	left: 50%;
}

/**
 * Thirds
 */
.push--one-third, .push--two-sixths, .push--four-twelfths {
	left: 33.333%;
}

.push--two-thirds, .push--four-sixths, .push--eight-twelfths {
	left: 66.666%;
}

/**
 * Quarters
 */
.push--one-quarter, .push--two-eighths, .push--three-twelfths {
	left: 25%;
}

.push--three-quarters, .push--six-eighths, .push--nine-twelfths {
	left: 75%;
}

/**
 * Fifths
 */
.push--one-fifth, .push--two-tenths {
	left: 20%;
}

.push--two-fifths, .push--four-tenths {
	left: 40%;
}

.push--three-fifths, .push--six-tenths {
	left: 60%;
}

.push--four-fifths, .push--eight-tenths {
	left: 80%;
}

/**
 * Sixths
 */
.push--one-sixth, .push--two-twelfths {
	left: 16.666%;
}

.push--five-sixths, .push--ten-twelfths {
	left: 83.333%;
}

/**
 * Eighths
 */
.push--one-eighth {
	left: 12.5%;
}

.push--three-eighths {
	left: 37.5%;
}

.push--five-eighths {
	left: 62.5%;
}

.push--seven-eighths {
	left: 87.5%;
}

/**
 * Tenths
 */
.push--one-tenth {
	left: 10%;
}

.push--three-tenths {
	left: 30%;
}

.push--seven-tenths {
	left: 70%;
}

.push--nine-tenths {
	left: 90%;
}

/**
 * Twelfths
 */
.push--one-twelfth {
	left: 8.333%;
}

.push--five-twelfths {
	left: 41.666%;
}

.push--seven-twelfths {
	left: 58.333%;
}

.push--eleven-twelfths {
	left: 91.666%;
}

/*------------------------------------*\
    $PULL
\*------------------------------------*/
/**
 * Pull classes, to move grid items back to the left by certain amounts.
 */
/**
 * Not a particularly great selector, but the DRYest way to do things.
 */
[class*="pull--"] {
	position: relative;
}

/**
 * Whole
 */
.pull--one-whole {
	right: 100%;
}

/**
 * Halves
 */
.pull--one-half, .pull--two-quarters, .pull--three-sixths, .pull--four-eighths, .pull--five-tenths, .pull--six-twelfths {
	right: 50%;
}

/**
 * Thirds
 */
.pull--one-third, .pull--two-sixths, .pull--four-twelfths {
	right: 33.333%;
}

.pull--two-thirds, .pull--four-sixths, .pull--eight-twelfths {
	right: 66.666%;
}

/**
 * Quarters
 */
.pull--one-quarter, .pull--two-eighths, .pull--three-twelfths {
	right: 25%;
}

.pull--three-quarters, .pull--six-eighths, .pull--nine-twelfths {
	right: 75%;
}

/**
 * Fifths
 */
.pull--one-fifth, .pull--two-tenths {
	right: 20%;
}

.pull--two-fifths, .pull--four-tenths {
	right: 40%;
}

.pull--three-fifths, .pull--six-tenths {
	right: 60%;
}

.pull--four-fifths, .pull--eight-tenths {
	right: 80%;
}

/**
 * Sixths
 */
.pull--one-sixth, .pull--two-twelfths {
	right: 16.666%;
}

.pull--five-sixths, .pull--ten-twelfths {
	right: 83.333%;
}

/**
 * Eighths
 */
.pull--one-eighth {
	right: 12.5%;
}

.pull--three-eighths {
	right: 37.5%;
}

.pull--five-eighths {
	right: 62.5%;
}

.pull--seven-eighths {
	right: 87.5%;
}

/**
 * Tenths
 */
.pull--one-tenth {
	right: 10%;
}

.pull--three-tenths {
	right: 30%;
}

.pull--seven-tenths {
	right: 70%;
}

.pull--nine-tenths {
	right: 90%;
}

/**
 * Twelfths
 */
.pull--one-twelfth {
	right: 8.333%;
}

.pull--five-twelfths {
	right: 41.666%;
}

.pull--seven-twelfths {
	right: 58.333%;
}

.pull--eleven-twelfths {
	right: 91.666%;
}