.row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	margin: 1.5rem 0.75rem;
	box-sizing: border-box;
	clear: both;
}

.row::after {
	/* Clearfix for row */
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

.row.suppress-outer-padding {
	margin-left: 0;
	margin-right: 0;
}

.row.suppress-vertical-padding {
	margin-top: 0;
	margin-bottom: 0;
}

.row > * {
	width: 100%;
	box-sizing: border-box;
	padding: 0 0.75rem;
}

.row.use-margin > * {
	padding: 0;
	margin: 0 0.75rem;
}

.row.small-inner-padding > * {
	padding: 0 0.25rem;
}

.row.small-inner-padding.use-margin > * {
	padding: 0;
	margin: 0 0.25rem;
}

@media only screen and (max-width: 699px) {
	.row.use-margin > * {
		width: calc(100% - 1.5rem);
	}

	.row.small-inner-padding.use-margin > * {
		width: calc(100% - 1.5rem);
		margin: 0 0.75rem;
	}
}

.row.suppress-outer-padding > * {
	padding-left: 0;
	padding-right: 0;
}

@media only screen and (min-width: 700px) {
	.row.suppress-outer-padding > :not(:first-child) {
		padding-left: 0.75rem;
	}

	.row.suppress-outer-padding.small-inner-padding > :not(:first-child) {
		padding-left: 0.25rem;
	}

	.row.suppress-outer-padding > :not(:last-child) {
		padding-right: 0.75rem;
	}

	.row.suppress-outer-padding.small-inner-padding > :not(:last-child) {
		padding-right: 0.25rem;
	}

	.row {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row;
	}
	
	.row > .m1 {
		width: 8.33333333333333%;
		-webkit-box-flex: 1;
		    -ms-flex: 1 12 auto;
		        flex: 1 12 auto;
	}

	.row > .m2 {
		width: 16.66666666666667%;
		-webkit-box-flex: 2;
		    -ms-flex: 2 11 auto;
		        flex: 2 11 auto;
	}

	.row > .m3 {
		width: 25%;
		-webkit-box-flex: 3;
		    -ms-flex: 3 10 auto;
		        flex: 3 10 auto;
	}

	.row > .m4 {
		width: 33.33333333333333%;
		-webkit-box-flex: 4;
		    -ms-flex: 4 9 auto;
		        flex: 4 9 auto;
	}

	.row > .m5 {
		width: 41.66666666666667%;
		-webkit-box-flex: 5;
		    -ms-flex: 5 8 auto;
		        flex: 5 8 auto;
	}

	.row > .m6 {
		width: 50%;
		-webkit-box-flex: 6;
		    -ms-flex: 6 7 auto;
		        flex: 6 7 auto;
	}

	.row > .m7 {
		width: 58.33333333333333%;
		-webkit-box-flex: 7;
		    -ms-flex: 7 6 auto;
		        flex: 7 6 auto;
	}

	.row > .m8 {
		width: 66.66666666666667%;
		-webkit-box-flex: 8;
		    -ms-flex: 8 5 auto;
		        flex: 8 5 auto;
	}

	.row > .m9 {
		width: 75%;
		-webkit-box-flex: 9;
		    -ms-flex: 9 4 auto;
		        flex: 9 4 auto;
	}

	.row > .m10 {
		width: 83.33333333333333%;
		-webkit-box-flex: 10;
		    -ms-flex: 10 3 auto;
		        flex: 10 3 auto;
	}

	.row > .m11 {
		width: 91.66666666666667%;
		-webkit-box-flex: 11;
		    -ms-flex: 11 2 auto;
		        flex: 11 2 auto;
	}

	.row > .m12 {
		width: 100%;
		-webkit-box-flex: 12;
		    -ms-flex: 12 1 auto;
		        flex: 12 1 auto;
	}
}

@media only screen and (min-width: 1000px) {
	.row > .l1 {
		width: 8.33333333333333%;
		-webkit-box-flex: 1;
		    -ms-flex: 1 12 auto;
		        flex: 1 12 auto;
	}

	.row > .l2 {
		width: 16.66666666666667%;
		-webkit-box-flex: 2;
		    -ms-flex: 2 11 auto;
		        flex: 2 11 auto;
	}

	.row > .l3 {
		width: 25%;
		-webkit-box-flex: 3;
		    -ms-flex: 3 10 auto;
		        flex: 3 10 auto;
	}

	.row > .l4 {
		width: 33.33333333333333%;
		-webkit-box-flex: 4;
		    -ms-flex: 4 9 auto;
		        flex: 4 9 auto;
	}

	.row > .l5 {
		width: 41.66666666666667%;
		-webkit-box-flex: 5;
		    -ms-flex: 5 8 auto;
		        flex: 5 8 auto;
	}

	.row > .l6 {
		width: 50%;
		-webkit-box-flex: 6;
		    -ms-flex: 6 7 auto;
		        flex: 6 7 auto;
	}

	.row > .l7 {
		width: 58.33333333333333%;
		-webkit-box-flex: 7;
		    -ms-flex: 7 6 auto;
		        flex: 7 6 auto;
	}

	.row > .l8 {
		width: 66.66666666666667%;
		-webkit-box-flex: 8;
		    -ms-flex: 8 5 auto;
		        flex: 8 5 auto;
	}

	.row > .l9 {
		width: 75%;
		-webkit-box-flex: 9;
		    -ms-flex: 9 4 auto;
		        flex: 9 4 auto;
	}

	.row > .l10 {
		width: 83.33333333333333%;
		-webkit-box-flex: 10;
		    -ms-flex: 10 3 auto;
		        flex: 10 3 auto;
	}

	.row > .l11 {
		width: 91.66666666666667%;
		-webkit-box-flex: 11;
		    -ms-flex: 11 2 auto;
		        flex: 11 2 auto;
	}

	.row > .l12 {
		width: 100%;
		-webkit-box-flex: 12;
		    -ms-flex: 12 1 auto;
		        flex: 12 1 auto;
	}
}