/* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
	width: 100%; 
	margin: 0 auto; 
	padding: 0 20px;
	box-sizing: border-box; }

.column, .columns { 
	width: 100%; 
	float: left; 
	box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
	.container { width: 100%; padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
	.container {
		width: 100%;
	}

	.column, .columns {
		margin-left: 0;
	}

	.column:first-child, .columns:first-child {
		margin-left: 0;
	}

	.one.column, .one.columns {
		width: 8.33333333333%;
	}

	.two.column, .two.columns {
		width: 16.6666666667%;
	}

	.three.column, .three.columns {
		width: 25.0%;
	}

	.four.column, .four.columns {
		width: 33.3333333333%;
	}

	.five.column, .five.columns {
		width: 41.6666666667%;
	}

	.six.column, .six.columns {
		width: 50.0%;
	}

	.seven.column, .seven.columns {
		width: 58.3333333333%;
	}

	.eight.column, .eight.columns {
		width: 66.66666666667%;
	}

	.nine.column, .nine.columns {
		width: 75.0%;
	}

	.ten.column, .ten.columns {
		width: 83.3333333333%;
	}

	.eleven.column, .eleven.columns {
		width: 91.6666666667%;
	}

	.twelve.column, .twelve.columns {
		width: 100%;
		margin-left: 0;
	}

	.one-third.column {
		width: 33.33333333333%;
	}

	.two-thirds.column {
		width: 66.66666666666%;
	}

	.one-half.column {
		width: 50%;
	}

	/* Offsets */
	.offset-by-one.column, .offset-by-one.columns {
		margin-left: 8.33333333333%;
	}

	.offset-by-two.column, .offset-by-two.columns {
		margin-left: 16.6666666667%;
	}

	.offset-by-three.column, .offset-by-three.columns {
		margin-left: 25.0%;
	}

	.offset-by-four.column, .offset-by-four.columns {
		margin-left: 33.3333333333%;
	}

	.offset-by-five.column, .offset-by-five.columns {
		margin-left: 41.6666666667%;
	}

	.offset-by-six.column, .offset-by-six.columns {
		margin-left: 50.0%;
	}

	.offset-by-seven.column, .offset-by-seven.columns {
		margin-left: 58.3333333333%;
	}

	.offset-by-eight.column, .offset-by-eight.columns {
		margin-left: 66.66666666667%;
	}

	.offset-by-nine.column, .offset-by-nine.columns {
		margin-left: 75.0%;
	}

	.offset-by-ten.column, .offset-by-ten.columns {
		margin-left: 83.33333333333%;
	}

	.offset-by-eleven.column, .offset-by-eleven.columns {
		margin-left: 91.6666666667%;
	}

	.offset-by-one-third.column, .offset-by-one-third.columns {
		margin-left: 33.33333333333%;
	}

	.offset-by-two-thirds.column, .offset-by-two-thirds.columns {
		margin-left: 66.66666666666%;
	}

	.offset-by-one-half.column, .offset-by-one-half.columns {
		margin-left: 50%;
	}

	/* Larger than phablet */
	@media (min-width: 550px) {
		h1 {
			font-size: 5.0rem;
		}

		h2 {
			font-size: 4.2rem;
		}

		h3 {
			font-size: 3.6rem;
		}

		h4 {
			font-size: 3.0rem;
		}

		h5 {
			font-size: 2.4rem;
		}

		h6 {
			font-size: 1.5rem;
		}
	}

	/* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */
	.u-full-width {
		width: 100%;
		box-sizing: border-box;
	}

	.u-max-full-width {
		max-width: 100%;
		box-sizing: border-box;
	}

	.u-pull-right {
		float: right;
	}

	.u-pull-left {
		float: left;
	}

	/* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */
	.container:after, .row:after, .u-cf {
		content: "";
		display: table;
		clear: both;
	}

	/* Larger than mobile */
	@media (min-width: 400px) {
	}

	/* Larger than phablet (also point when grid becomes active) */
	@media (min-width: 550px) {
	}

	/* Larger than tablet */
	@media (min-width: 750px) {
	}

	/* Larger than desktop */
	@media (min-width: 1000px) {
	}

	/* Larger than Desktop HD */
	@media (min-width: 1200px) {
	}
}