.col {
	padding: 0 1.5em;
}
.row .row {
	margin: 0 -1.5em;
}

.row:before, .row:after {
	content: "";
	display: table;
}
.row:after {
	clear: both;
}

@media only screen {
	.col {
		float: left;
		width: 100%;

		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
}

.container { max-width: 60em;
	margin: 0 auto;
	padding: 1em 0; }

		/* you only need width to set up columns; all columns are 100%-width by default, so we start
		   from a one-column mobile layout and gradually improve it according to available screen space */

		@media only screen and (min-width: 34em) {
			.content { width: 100%; }/*12/12 */
		}

		@media only screen and (min-width: 54em) {
			/*.content { width: 66.66%; }
			.sidebar { width: 33.33%; }*/
		}

		@media only screen and (min-width: 76em) {
			/*.content { width: 58.33%; }  7/12 */
			/*.sidebar { width: 41.66%; }  5/12 */
			.content { 
				width: 91.66%; 
				padding-left:8%;
				}
		}