/*

A basic responsive grid.

- Works very much like Bootstrap's grid
- Mobile-first (default width for col is 100%)

SETTINGS: You can change some layout dimensions by editing values marked by the text 'SETTING' below

FEATURES:

- Specify layouts for each of xs, sm, md, and lg breakpoints, using simple fractional notation (1/2, 1/3, 1/4, etc become 1_2, 1_3, 1_4, etc)
- Nesting works by inserting a new .row inside of a .col and proceeding as though the .row was the base of a new grid
- Pull/Push classes allow you to rearrange column order for different breakpoints (see example below)
- Remove gutters/spacing easily using the .no-gutters class on a .row, or the .no-h-pad class on a .grid (see example below)

EXAMPLE:

	3-COL LAYOUT

	<div class="width-wrap">
		<div class="grid">
			<div class="row">
				<div class="col xs-1_2 sm-1_3 md-1_3 lg-1_2">A</div>
				<div class="col xs-1_2 sm_2_3 md-1_3 lg-1_4">B</div>
				<div class="col md-1_3 lg-1_4">C</div>
			</div>
		</div>
	</div>

	Mobile:

	|   [------A------] [------B------]   |
	|   [--------------C--------------]   |

	Small:

	|   [----A----] [--------B--------]   |
	|   [--------------C--------------]   |

	Medium:

	|   [---A---] [---B---] [---C---]   |

	Large:

	|   [------A------] [--B--] [--C--]   |



	NESTED GRID

	You can nest grids by putting a new .row inside of any .col
	NOTE: You should never need a .grid as a descendant of a .grid

	<div class="grid">
		<div class="row">
			<div class="col sm-1_2">
				<div class="row">
					<div class="col sm-1_2">A</div>
					<div class="col sm-1_2">B</div>
				</div>
			</div>
			<div class="col sm-1_2">C</div>
		</div>
	</div>



	PUSH/PULL

	<div class="grid">
		<div class="row">
			<div class="col xs-1_2 sm-push-1_2">A</div>
			<div class="col xs-1_2 sm-pull-1_2">B</div>
		</div>
	</div>

	Mobile:

	|   [------A------] [------B------]   |

	Small:

	|   [------B------] [------A------]   |

*/


/* If you want to limit the width of a site to a certain max-width, use a .width-wrap */
.limit-width,
.width-wrap {
	margin: auto;
	max-width: 1200px;     /* SETTING: set this to the desired max-width of the site */
}

.grid {
	padding-left: 15px;    /* SETTING: the space at the left of the grid (between screen edge and content) */
	padding-right: 15px;   /* SETTING: the space at the right of the grid (between screen edge and content) */
	margin: auto;
}

.row {
	margin-left: -15px;    /* SETTING: MUST BE THE NEGATIVE OF THE .col GUTTER SIZE */
	margin-right: -15px;   /* SETTING: MUST BE THE NEGATIVE OF THE .col GUTTER SIZE */
}

.col {
	padding-left: 15px;    /* SETTING: The gutter size (space between cols) */
	padding-right: 15px;   /* SETTING: The gutter size (space between cols) */

	position: relative;
	float: left;
	width: 100%;
}


.col.xs-1_9 { width: 11.11111%; }
.col.xs-1_8 { width: 12.5%; }
.col.xs-1_6 { width: 16.66667%; }
.col.xs-1_5 { width: 20%; }
.col.xs-1_4 { width: 25%; }
.col.xs-1_3 { width: 33.33333%; }
.col.xs-3_8 { width: 37.5%; }
.col.xs-2_5 { width: 40%; }
.col.xs-1_2 { width: 50%; }
.col.xs-3_5 { width: 60%; }
.col.xs-5_8 { width: 62.5%; }
.col.xs-2_3 { width: 66.66667%; }
.col.xs-3_4 { width: 75%; }
.col.xs-4_5 { width: 80%; }
.col.xs-5_6 { width: 83.33333%; }
.col.xs-7_8 { width: 87.5%; }

@media (min-width: 768px) {                        /* SETTING: the width for the sm breakpoint */
	.col.sm-1_9 { width: 11.11111%; }
	.col.sm-1_8 { width: 12.5%; }
	.col.sm-1_6 { width: 16.66667%; }
	.col.sm-1_5 { width: 20%; }
	.col.sm-1_4 { width: 25%; }
	.col.sm-1_3 { width: 33.33333%; }
	.col.sm-3_8 { width: 37.5%; }
	.col.sm-2_5 { width: 40%; }
	.col.sm-1_2 { width: 50%; }
	.col.sm-3_5 { width: 60%; }
	.col.sm-5_8 { width: 62.5%; }
	.col.sm-2_3 { width: 66.66667%; }
	.col.sm-3_4 { width: 75%; }
	.col.sm-4_5 { width: 80%; }
	.col.sm-5_6 { width: 83.33333%; }
	.col.sm-7_8 { width: 87.5%; }

	.col.sm-pull-1_8 { left: -12.5%; }
	.col.sm-pull-1_6 { left: -16.66667%; }
	.col.sm-pull-1_5 { left: -20%; }
	.col.sm-pull-1_4 { left: -25%; }
	.col.sm-pull-1_3 { left: -33.33333%; }
	.col.sm-pull-3_8 { left: -37.5%; }
	.col.sm-pull-2_5 { left: -40%; }
	.col.sm-pull-1_2 { left: -50%; }
	.col.sm-pull-3_5 { left: -60%; }
	.col.sm-pull-5_8 { left: -62.5%; }
	.col.sm-pull-2_3 { left: -66.66667%; }
	.col.sm-pull-3_4 { left: -75%; }
	.col.sm-pull-4_5 { left: -80%; }
	.col.sm-pull-5_6 { left: -83.33333%; }
	.col.sm-pull-7_8 { left: -87.5%; }

	.col.sm-push-1_8 { left: 12.5%; }
	.col.sm-push-1_6 { left: 16.66667%; }
	.col.sm-push-1_5 { left: 20%; }
	.col.sm-push-1_4 { left: 25%; }
	.col.sm-push-1_3 { left: 33.33333%; }
	.col.sm-push-3_8 { left: 37.5%; }
	.col.sm-push-2_5 { left: 40%; }
	.col.sm-push-1_2 { left: 50%; }
	.col.sm-push-3_5 { left: 60%; }
	.col.sm-push-5_8 { left: 62.5%; }
	.col.sm-push-2_3 { left: 66.66667%; }
	.col.sm-push-3_4 { left: 75%; }
	.col.sm-push-4_5 { left: 80%; }
	.col.sm-push-5_6 { left: 83.33333%; }
	.col.sm-push-7_8 { left: 87.5%; }

}
@media (min-width: 950px) {                        /* SETTING: the width for the md breakpoint */
	.col.md-1_9 { width: 11.11111%; }
	.col.md-1_8 { width: 12.5%; }
	.col.md-1_6 { width: 16.66667%; }
	.col.md-1_5 { width: 20%; }
	.col.md-1_4 { width: 25%; }
	.col.md-1_3 { width: 33.33333%; }
	.col.md-3_8 { width: 37.5%; }
	.col.md-2_5 { width: 40%; }
	.col.md-1_2 { width: 50%; }
	.col.md-3_5 { width: 60%; }
	.col.md-5_8 { width: 62.5%; }
	.col.md-2_3 { width: 66.66667%; }
	.col.md-3_4 { width: 75%; }
	.col.md-4_5 { width: 80%; }
	.col.md-5_6 { width: 83.33333%; }
	.col.md-7_8 { width: 87.5%; }

	.col.md-pull-1_8 { left: -12.5%; }
	.col.md-pull-1_6 { left: -16.66667%; }
	.col.md-pull-1_5 { left: -20%; }
	.col.md-pull-1_4 { left: -25%; }
	.col.md-pull-1_3 { left: -33.33333%; }
	.col.md-pull-3_8 { left: -37.5%; }
	.col.md-pull-2_5 { left: -40%; }
	.col.md-pull-1_2 { left: -50%; }
	.col.md-pull-3_5 { left: -60%; }
	.col.md-pull-5_8 { left: -62.5%; }
	.col.md-pull-2_3 { left: -66.66667%; }
	.col.md-pull-3_4 { left: -75%; }
	.col.md-pull-4_5 { left: -80%; }
	.col.md-pull-5_6 { left: -83.33333%; }
	.col.md-pull-7_8 { left: -87.5%; }

	.col.md-push-1_8 { left: 12.5%; }
	.col.md-push-1_6 { left: 16.66667%; }
	.col.md-push-1_5 { left: 20%; }
	.col.md-push-1_4 { left: 25%; }
	.col.md-push-1_3 { left: 33.33333%; }
	.col.md-push-3_8 { left: 37.5%; }
	.col.md-push-2_5 { left: 40%; }
	.col.md-push-1_2 { left: 50%; }
	.col.md-push-3_5 { left: 60%; }
	.col.md-push-5_8 { left: 62.5%; }
	.col.md-push-2_3 { left: 66.66667%; }
	.col.md-push-3_4 { left: 75%; }
	.col.md-push-4_5 { left: 80%; }
	.col.md-push-5_6 { left: 83.33333%; }
	.col.md-push-7_8 { left: 87.5%; }
}

@media (min-width: 1200px) {                        /* SETTING: the width for the lg breakpoint */
	.col.lg-1_9 { width: 11.11111%; }
	.col.lg-1_8 { width: 12.5%; }
	.col.lg-1_6 { width: 16.66667%; }
	.col.lg-1_5 { width: 20%; }
	.col.lg-1_4 { width: 25%; }
	.col.lg-1_3 { width: 33.33333%; }
	.col.lg-3_8 { width: 37.5%; }
	.col.lg-2_5 { width: 40%; }
	.col.lg-1_2 { width: 50%; }
	.col.lg-3_5 { width: 60%; }
	.col.lg-5_8 { width: 62.5%; }
	.col.lg-2_3 { width: 66.66667%; }
	.col.lg-3_4 { width: 75%; }
	.col.lg-4_5 { width: 80%; }
	.col.lg-5_6 { width: 83.33333%; }
	.col.lg-7_8 { width: 87.5%; }

	.col.lg-pull-1_8 { left: -12.5%; }
	.col.lg-pull-1_6 { left: -16.66667%; }
	.col.lg-pull-1_5 { left: -20%; }
	.col.lg-pull-1_4 { left: -25%; }
	.col.lg-pull-1_3 { left: -33.33333%; }
	.col.lg-pull-3_8 { left: -37.5%; }
	.col.lg-pull-2_5 { left: -40%; }
	.col.lg-pull-1_2 { left: -50%; }
	.col.lg-pull-3_5 { left: -60%; }
	.col.lg-pull-5_8 { left: -62.5%; }
	.col.lg-pull-2_3 { left: -66.66667%; }
	.col.lg-pull-3_4 { left: -75%; }
	.col.lg-pull-4_5 { left: -80%; }
	.col.lg-pull-5_6 { left: -83.33333%; }
	.col.lg-pull-7_8 { left: -87.5%; }

	.col.lg-push-1_8 { left: 12.5%; }
	.col.lg-push-1_6 { left: 16.66667%; }
	.col.lg-push-1_5 { left: 20%; }
	.col.lg-push-1_4 { left: 25%; }
	.col.lg-push-1_3 { left: 33.33333%; }
	.col.lg-push-3_8 { left: 37.5%; }
	.col.lg-push-2_5 { left: 40%; }
	.col.lg-push-1_2 { left: 50%; }
	.col.lg-push-3_5 { left: 60%; }
	.col.lg-push-5_8 { left: 62.5%; }
	.col.lg-push-2_3 { left: 66.66667%; }
	.col.lg-push-3_4 { left: 75%; }
	.col.lg-push-4_5 { left: 80%; }
	.col.lg-push-5_6 { left: 83.33333%; }
	.col.lg-push-7_8 { left: 87.5%; }
}

.container:after,
.row:after,
.col:after,
.width-wrap:after {
	content: "";
	display: table;
	clear: both;
}

.grid.no-h-pad { padding-left: 0; padding-right: 0; }
.row.no-gutters { margin-left: 0; margin-right: 0; }
.row.no-gutters .col { padding-left: 0; padding-right: 0; }