/**
 * Logic stolen from responsivegridsystem.com, execution stolen from Bones
 * grid system. Allows me to define the layout for each breakpoint (Bones idea)
 * while eliminating awkward right-hand margins (rgs).
 *
 * @see http://www.responsivegridsystem.com/calculator/
 * (Margin % = 2)
 */

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin-left: 1%;
	margin-right: 1%;
}
.col.full-bleed {
	margin-left: 0;
	margin-right: 0;
}
.col.thin {
	margin-left: 0.25%;
	margin-right: 0.25%;
}
.wide-margin .col,
.wide-margin.col {
	/*margin: 0 5% 0 1%;*/
	margin-left: 3%;
	margin-right: 3%;
}

/*= MOBILE
------------------------------------------------------------------------------*/
@media (max-width: 767px) {
	.m-all.col,
	.wide-margin .col,
	.wide-margin.col {
		margin-left: 0;
		margin-right: 0;
		padding: 2% !important;
	}
	.m-all {
		width: 96%;
	}
	.col.m-all {
		float: none;
	}

	/*  GRID OF TWO  */
	.m-2of2 {
		width: 98%;
	}
	.m-1of2 {
		width: 48%;
	}

	/*  GRID OF THREE  */
	.m-3of3 {
		width: 98%;
	}
	.m-2of3 {
		width: 64%;
	}
	.m-1of3 {
		width: 32%;
	}

	/*  GRID OF FOUR  */
	.m-4of4 {
		width: 98%;
	}
	.m-3of4 {
		width: 74.5%;
	}
	.m-2of4 {
		width: 48%;
	}
	.m-1of4 {
		width: 23%;
	}
	.full-bleed.m-4of4 {
		width: 100%;
	}
	.full-bleed.m-3of4 {
		width: 75%;
	}
	.full-bleed.m-2of4 {
		width: 50%;
	}
	.full-bleed.m-1of4 {
		width: 25%;
	}
	.thin.m-all,
	.thin.m-4of4 {
		width: 96%;
	}
	.thin.m-3of4 {
		width: 74.5%;
	}
	.thin.m-2of4 {
		width: 49.5%;
	}
	.thin.m-1of4 {
		width: 24.5%;
	}
}

/*= TABLET
------------------------------------------------------------------------------*/
@media (min-width: 768px) and (max-width: 1029px) {
	.t-all {
		width: 98%;
	}

	/*  GRID OF TWO  */
	.t-2of2 {
		width: 98%;
	}
	.t-1of2 {
		width: 48%;
	}

	/*  GRID OF THREE  */
	.t-3of3 {
		width: 98%;
	}
	.t-2of3 {
		width: 64%;
	}
	.t-1of3 {
		width: 32%;
	}

	/*  GRID OF FOUR  */
	.t-4of4 {
		width: 98%;
	}
	.t-3of4 {
		width: 74.5%;
	}
	.t-2of4 {
		width: 48%;
	}
	.t-1of4 {
		width: 23%;
	}
	.full-bleed.t-4of4 {
		width: 100%;
	}
	.full-bleed.t-3of4 {
		width: 75%;
	}
	.full-bleed.t-2of4 {
		width: 50%;
	}
	.full-bleed.t-1of4 {
		width: 25%;
	}
	.thin.t-all,
	.thin.t-4of4 {
		width: 99.5%;
	}
	.thin.t-3of4 {
		width: 74.5%;
	}
	.thin.t-2of4 {
		width: 49.5%;
	}
	.thin.t-1of4 {
		width: 24.5%;
	}
}

/*= DESKTOP
------------------------------------------------------------------------------*/
@media (min-width: 1030px) {
	.d-all {
		width: 98%
	}

	/*  GRID OF TWO  */
	.d-2of2 {
		width: 98%;
	}
	.d-1of2 {
		width: 48%;
	}

	/*  GRID OF THREE  */
	.d-3of3 {
		width: 98%;
	}
	.d-2of3 {
		width: 64%;
	}
	.d-1of3 {
		width: 32%;
	}

	/*  GRID OF FOUR  */
	.d-4of4 {
		width: 98%;
	}
	.d-3of4 {
		width: 73%;
	}
	.d-2of4 {
		width: 48%;
	}
	.d-1of4 {
		width: 23%;
	}
	.full-bleed.d-4of4 {
		width: 100%;
	}
	.full-bleed.d-3of4 {
		width: 75%;
	}
	.full-bleed.d-2of4 {
		width: 50%;
	}
	.full-bleed.d-1of4 {
		width: 25%;
	}
	.thin.d-all,
	.thin.d-4of4 {
		width: 99.5%;
	}
	.thin.d-3of4 {
		width: 74.5%;
	}
	.thin.d-2of4 {
		width: 49.5%;
	}
	.thin.d-1of4 {
		width: 24.5%;
	}
}




@media (max-width: 767px) {

}
@media (min-width: 768px) and (max-width: 1029px) {
	.wide-margin .t-1of2,
	.wide-margin.t-1of2 {
		width: 44%;
	}
	.wide-margin.t-all {
		width: 94%;
	}
}
@media (min-width: 1030px) {
	.wide-margin .d-1of2,
	.wide-margin.d-1of2 {
		width: 44%;
	}
}