/* ----------- NOTES -----------

Unknowns -- 
	- How does the fill overwrite work? (I think this is sorted but needs testing)

Random Thoughts --
	
	- Should the content block, padding/margin, state indicator, display (hidden etc) classes be in here? Yes. I think so. (MARGIN BOTTOM ETC OVERWRITES ON COLUMN IS A MUST) 

NOTE : .background-relative forces 'position: relative' on the group and it's columns.
NOTE : .column-container can now have margin and padding 'border-collapse: initial' added. If it breaks anything let me know. Hovever it is only necessary for certain table groups.
NOTE : .clear for default-group is no longer in spec. will add if need becomes great enough.
NOTE : .static class has been changed to .pixel and .responsive has changed to .percent. There may be issues #content-wrap that need addressing. Maybe not though...

--------- END NOTES --------- */

.column-group {
	margin-top:0px;
	margin-left: -10px;
	margin-right: -10px;
	margin-bottom:0;
	direction:ltr;
}

/* Clear Fixs */
.column-group:before, .column-group:after { content: " "; display: table; }
.column-group::after { clear: both; }

.column-group + * {	clear:both; }

.column {
	list-style:none;
	margin-left:0px;
	margin-right:0px;
	margin-bottom: 20px;
	vertical-align:top;
	padding-left:10px;
	padding-right: 10px;
	text-align:left;
	direction:ltr;
	background-clip:content-box!important;
}

.column-container {
	display: table;
	max-width: 100%;
	table-layout: fixed;
	width: 100%;
	vertical-align:top;
}

body .align-left { text-align:left; }
body .align-center { text-align:center; }
body .align-right { text-align:right; }
body .align-justify { text-align:justify; }

body .direction-ltr { direction:ltr; }
body .direction-rtl { direction:rtl; }

/* Column Position */

.column-group.column-static > .column { position:static; }
.column-group.column-relative > .column { position:relative; }
.column-group.column-absolute > .column { position:absolute; }

/* Flex Equal Height */
/* Do not add this to a table group it will kill and eat you */

html.flex body .flex-group  { display: flex; flex-flow: row wrap; }
html.flex .flex-group > .column { display:flex; }


/* Vertically Aligning Columns */

.align-top { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }


.column-align-top > .column { vertical-align: top; }
.column-align-middle > .column { vertical-align: middle; }
.column-align-bottom > .column { vertical-align: bottom; }

.column-group[class*="column-align-"] > .column.align-top { vertical-align: top; }
.column-group[class*="column-align-"] > .column.align-middle { vertical-align: middle; }
.column-group[class*="column-align-"] > .column.align-bottom { vertical-align: bottom; }

/* End Vertically Aligning Columns */

/* Vertical Align Groups */

.vertical-align-group > .column  {
	vertical-align: middle;
}

.column-group > .vertical-align-limit {
	height: 250px; /* overwite in custom.css */
	overflow: hidden;
	padding: 0;
	width: 0;
	margin:0;
}
.column-group > .vertical-align-limit.limit-percent {
	padding-bottom:23.6%; /* Golden Ratio */ /* overwite in custom.css */
	height:0;
}
/* End Vertical Align Groups */

/* Expanding Columns */
	
.column.expand-left {
	text-align:left;
}

.column.expand-left > .column-container {
	text-align:left;
	display:inline-block;
	width:auto;
}

.column.expand-right {
	text-align:right;
}

.column.expand-right > .column-container {
	text-align:left;
	display:inline-block;
	width:auto;
}

.column.expand-center {
	text-align:center;
}

.column.expand-center > .column-container {
	text-align:left;
	width:auto;	
	margin-left:auto;
	margin-right:auto;
}

.column.pixel[class*="expand-"] {
	width:auto;	
}

/* End Expanding Columns */

/* Horizontal Spacing */

.column-group.column-gutter-0 { margin-left: 0; margin-right: 0; }
.column-group.column-gutter-0 > .column { padding-left:0; padding-right:0; }	
.column-group.column-gutter-20, .column-group.column-gutter-xs { margin-left: -10px; margin-right: -10px; }
.column-group.column-gutter-20 > .column, .column-group.column-gutter-xs > .column { padding-left:10px; padding-right:10px; }
.column-group.column-gutter-40, .column-group.column-gutter-s { margin-left: -20px; margin-right: -20px; }
.column-group.column-gutter-40 > .column, .column-group.column-gutter-s > .column {padding-left: 20px;padding-right: 20px;}
.column-group.column-gutter-60, .column-group.column-gutter-m { margin-left: -30px; margin-right: -30px; }
.column-group.column-gutter-60 > .column, .column-group.column-gutter-m > .column { padding-left:30px; padding-right:30px; }
.column-group.column-gutter-80, .column-group.column-gutter-l { margin-left: -40px; margin-right: -40px; }
.column-group.column-gutter-80 > .column, .column-group.column-gutter-l > .column { padding-left:40px; padding-right:40px; }
.column-group.column-gutter-100, .column-group.column-gutter-xl { margin-left: -50px; margin-right: -50px; }
.column-group.column-gutter-100 > .column, .column-group.column-gutter-xl > .column { padding-left:50px; padding-right:50px;}

/* End Horizontal Spacing */

/* Vertical Spacing - goes on .column-group */

.column-margin-bottom-0 > .column  { margin-bottom:0; }
.column-margin-bottom-20 > .column, .column-margin-bottom-xs > .column  { margin-bottom:20px; }
.column-margin-bottom-40 > .column, .column-margin-bottom-s > .column  { margin-bottom:40px; }
.column-margin-bottom-60 > .column, .column-margin-bottom-m > .column  { margin-bottom:60px; }
.column-margin-bottom-80 > .column, .column-margin-bottom-l > .column  { margin-bottom:80px; }
.column-margin-bottom-100 > .column, .column-margin-bottom-xl > .column  { margin-bottom:100px; }

/* End Vertical Spacing */

/* No Width - Used for alignments. Doesn't have variations */

.width-none, .width-0 {
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: middle !important;
	width: 0 !important;
}

/* Styles For Column Desktop go here */
@media all and (min-width: 1021px) {

	.column,
	html body .desktop-default-group > .column {
		float:left;
		display:inherit;
	}

	.table-group > .column,
	html body .desktop-table-group > .column {
		display: table-cell;
		width:auto;
		float:none;
	}
	
	.inline-group > .column,
	html body .desktop-inline-group > .column {
		display:inline-block;
		float:none;
	}

	/* Column Position */
	
	body .column-group.desktop-column-static > .column { position:static; }
	body .column-group.desktop-column-relative > .column { position:relative; }
	body .column-group.desktop-column-absolute > .column { position:absolute; }
	
	html body .column-group > .column.static { position:static; }
	html body .column-group > .column.relative { position:relative; }
	html body .column-group > .column.absolute { position:absolute; }
	
	html body .column-group > .column.desktop-static { position:static; }
	html body .column-group > .column.desktop-relative { position:relative; }
	html body .column-group > .column.desktop-absolute { position:absolute; }

	/* Column Align */

	html body .desktop-align-left { text-align:left; }
	html body .desktop-align-center { text-align:center; }
	html body .desktop-align-right { text-align:right; }
	html body .desktop-align-justify { text-align:justify; }
	
	/* Column Direction */
	/* Only works with inline & table groups */
	
	html body .desktop-direction-ltr { direction:ltr; }
	html body .desktop-direction-rtl { direction:rtl; }

	/* Float Columns */

	.float-left,
	body .desktop-float-left,
	.inline-group > .column.float-left,
	body .desktop-inline-group > .column.float-left,
	body .inline-group > .column.desktop-float-left,
	html body .desktop-inline-group > .column.desktop-float-left { float:left; }
	
	.float-right,
	body .desktop-float-right,
	.inline-group > .column.float-right,
	body .desktop-inline-group > .column.float-right,
	body .inline-group > .column.desktop-float-right,
	html body .desktop-inline-group > .column.desktop-float-right { float:right; }
	
	.float-none,
	body .desktop-float-none,
	.inline-group > .column.float-none,


	body .desktop-inline-group > .column.float-none,
	body .inline-group > .column.desktop-float-none,
	html body .desktop-inline-group > .column.desktop-float-none { float:none; }
	
	/* End Float Columns */

	/* Vertically Aligning Columns */
	
	body .desktop-column-align-top > .column { vertical-align: top; }
	body .desktop-column-align-middle > .column { vertical-align: middle; }
	body .desktop-column-align-bottom > .column { vertical-align: bottom; }
	
	body .column-group[class*="column-align-"] > .column.desktop-align-top { vertical-align: top; }
	body .column-group[class*="column-align-"] > .column.desktop-align-middle { vertical-align: middle; }
	body .column-group[class*="column-align-"] > .column.desktop-align-bottom { vertical-align: bottom;}
	
	/* End Vertically Aligning Columns */
	
	/* Vertical Align Groups */
	
	body .column-group > .vertical-align-limit.desktop-limit-pixel  {
		height: 250px; /* overwite in custom.css */
		padding:0;
	}
	
	body .column-group > .vertical-align-limit.desktop-limit-percent {
		padding-bottom:23.6%; /* Golden Ratio */ /* overwite in custom.css */
		height:0;
	}
	
	/* End Vertical Align Groups */

	/* Expanding Columns */
	
	.column-group .column.desktop-expand-left {
		text-align:left;
	}
	
	.column-group .column.desktop-expand-left > .column-container {
		text-align:left;
		display:inline-block;
		width:auto;
	}
	
	.column-group .column.desktop-expand-right {
		text-align:right;
	}
	
	.column-group .column.desktop-expand-right > .column-container {
		text-align:left;
		display:inline-block;
		width:auto;
	}
	
	.column-group .column.desktop-expand-center {
		text-align:center;
	}
	
	.column-group .column.desktop-expand-center > .column-container {
		text-align:left;
		width:auto;	
		margin-left:auto;
		margin-right:auto;
	}
	
	.column.pixel[class*="desktop-expand-"] {
		width:auto;	
	}
	
	/* End Expanding Columns */

	/* Dominant Expands */
	/* Only works with table groups */
	
	.column-group.table-group .expand-dominant > .column-container,
	.column-group.table-group .desktop-expand-dominant > .column-container { white-space: nowrap; width: auto; }
	
	.column-group.table-group.desktop-default-group .expand-dominant > .column-container,
	.column-group.table-group.desktop-inline-group .expand-dominant > .column-container { white-space:normal; width: 100%; }
	
	body .column-group.desktop-table-group .expand-dominant > .column-container,
	body .column-group.desktop-table-group .desktop-expand-dominant > .column-container { white-space: nowrap; width: auto;	}
	
	/* End Dominant Expands */

	/* Desktop Horizontal Spacing */
	
	body .column-group.desktop-column-gutter-0 { margin-left: 0; margin-right: 0; }
	.column-group.desktop-column-gutter-0 > .column { padding-left:0; padding-right:0; }
	body .column-group.desktop-column-gutter-20 { margin-left: -10px; margin-right: -10px; } 
	.column-group.desktop-column-gutter-20 > .column { padding-left:10px; padding-right:10px; } 
	body .column-group.desktop-column-gutter-40 { margin-left: -20px; margin-right: -20px; } 
	.column-group.desktop-column-gutter-40 > .column { padding-left:20px; padding-right:20px; } 
	body .column-group.desktop-column-gutter-60 { margin-left: -30px; margin-right: -30px; }
	.column-group.desktop-column-gutter-60 > .column { padding-left:30px; padding-right:30px; }
	body .column-group.desktop-column-gutter-80 { margin-left: -40px; margin-right: -40px; }
	.column-group.desktop-column-gutter-80 > .column { padding-left:40px; padding-right:40px; }
	body .column-group.desktop-column-gutter-100 { margin-left: -50px; margin-right: -50px; }
	.column-group.desktop-column-gutter-100 > .column { padding-left:50px; padding-right:50px;}	
	
	/* End Desktop Horizontal Spacing */

	/* Desktop Vertical Spacing */

	body .desktop-column-margin-bottom-0 > .column  { margin-bottom:0; }
	body .desktop-column-margin-bottom-20 > .column  { margin-bottom:20px; }
	body .desktop-column-margin-bottom-40 > .column  { margin-bottom:40px; }
	body .desktop-column-margin-bottom-60 > .column  { margin-bottom:60px; }
	body .desktop-column-margin-bottom-80 > .column  { margin-bottom:80px; }
	body .desktop-column-margin-bottom-100 > .column  { margin-bottom:100px; }

	/* End Desktop Vertical Spacing */
	
	/* Desktop Widths */

	/* Percentage Widths */
	
	.width-1of1,
	html .desktop-width-1of1,
	html .column-width-1of1 > .percent,
	html .column-width-1of1 > .desktop-percent,
	html .column-group.desktop-column-width-1of1 > .percent,
	html .column-group.desktop-column-width-1of1 > .desktop-percent,
	html body .column-group > .percent.width-1of1,
	html body .column-group > .desktop-percent.width-1of1,
	html body .column-group > .column.percent.desktop-width-1of1,
	html body .column-group > .column.desktop-percent.desktop-width-1of1 { box-sizing:border-box; width:100%; min-width:0; max-width:100%;	box-sizing: border-box;	}
	
	.width-1of2,
	html .desktop-width-1of2,
	html .column-width-1of2 > .percent,
	html .column-width-1of2 > .desktop-percent,
	html .column-group.desktop-column-width-1of2 > .percent,
	html .column-group.desktop-column-width-1of2 > .desktop-percent,
	html body .column-group > .percent.width-1of2,
	html body .column-group > .desktop-percent.width-1of2,
	html body .column-group > .column.percent.desktop-width-1of2,
	html body .column-group > .column.desktop-percent.desktop-width-1of2 { box-sizing:border-box; width:50%; min-width:0; max-width:50%; }
	
	.width-1of3,
	html .desktop-width-1of3,
	html .column-width-1of3 > .percent,
	html .column-width-1of3 > .desktop-percent,
	html .column-group.desktop-column-width-1of3 > .percent,
	html .column-group.desktop-column-width-1of3 > .desktop-percent,
	html body .column-group > .percent.width-1of3,
	html body .column-group > .desktop-percent.width-1of3,
	html body .column-group > .column.percent.desktop-width-1of3,
	html body .column-group > .column.desktop-percent.desktop-width-1of3 { box-sizing:border-box; width:33.3%; min-width:0; max-width:33.3%; }
	
	.width-2of3,
	html .desktop-width-2of3,
	html .column-width-2of3 > .percent,
	html .column-width-2of3 > .desktop-percent,
	html .column-group.desktop-column-width-2of3 > .percent,
	html .column-group.desktop-column-width-2of3 > .desktop-percent,
	html body .column-group > .percent.width-2of3,
	html body .column-group > .desktop-percent.width-2of3,
	html body .column-group > .column.percent.desktop-width-2of3,
	html body .column-group > .column.desktop-percent.desktop-width-2of3 { box-sizing:border-box; width:66.6%; min-width:0; max-width:66.6%; }
	
	.width-1of4,
	html .desktop-width-1of4,
	html .column-width-1of4 > .percent,
	html .column-width-1of4 > .desktop-percent,
	html .column-group.desktop-column-width-1of4 > .percent,
	html .column-group.desktop-column-width-1of4 > .desktop-percent,
	html body .column-group > .percent.width-1of4,
	html body .column-group > .desktop-percent.width-1of4,
	html body .column-group > .column.percent.desktop-width-1of4,
	html body .column-group > .column.desktop-percent.desktop-width-1of4  { box-sizing:border-box; width:25%; min-width:0; max-width:25%; }
	
	.width-3of4,
	html .desktop-width-3of4,
	html .column-width-3of4 > .percent,
	html .column-width-3of4 > .desktop-percent,
	html .column-group.desktop-column-width-3of4 > .percent,
	html .column-group.desktop-column-width-3of4 > .desktop-percent,
	html body .column-group > .percent.width-3of4,
	html body .column-group > .desktop-percent.width-3of4,
	html body .column-group > .column.percent.desktop-width-3of4,
	html body .column-group > .column.desktop-percent.desktop-width-3of4 { box-sizing:border-box; width:75%; min-width:0; max-width:75%; }
	
	.width-1of5,
	html .desktop-width-1of5,
	html .column-width-1of5 > .percent,
	html .column-width-1of5 > .desktop-percent,
	html .column-group.desktop-column-width-1of5 > .percent,
	html .column-group.desktop-column-width-1of5 > .desktop-percent,
	html body .column-group > .percent.width-1of5,
	html body .column-group > .desktop-percent.width-1of5,
	html body .column-group > .column.percent.desktop-width-1of5,
	html body .column-group > .column.desktop-percent.desktop-width-1of5  { box-sizing:border-box; width:20%; min-width:0; max-width:20%; }
	
	.width-2of5,
	html .desktop-width-2of5,
	html .column-width-2of5 > .percent,
	html .column-width-2of5 > .desktop-percent,
	html .column-group.desktop-column-width-2of5 > .percent,
	html .column-group.desktop-column-width-2of5 > .desktop-percent,
	html body .column-group > .percent.width-2of5,
	html body .column-group > .desktop-percent.width-2of5,
	html body .column-group > .column.percent.desktop-width-2of5,
	html body .column-group > .column.desktop-percent.desktop-width-2of5 { box-sizing:border-box; width:40%; min-width:0; max-width:40%; }
	
	.width-3of5,
	html .desktop-width-3of5,
	html .column-width-3of5 > .percent,
	html .column-width-3of5 > .desktop-percent,
	html .column-group.desktop-column-width-3of5 > .percent,
	html .column-group.desktop-column-width-3of5 > .desktop-percent,
	html body .column-group > .percent.width-3of5,
	html body .column-group > .desktop-percent.width-3of5,
	html body .column-group > .column.percent.desktop-width-3of5,
	html body .column-group > .column.desktop-percent.desktop-width-3of5 { box-sizing:border-box; width:60%; min-width:0; max-width:60%; }
	
	.width-4of5,
	html .desktop-width-4of5,
	html .column-width-4of5 > .percent,
	html .column-width-4of5 > .desktop-percent,
	html .column-group.desktop-column-width-4of5 > .percent,
	html .column-group.desktop-column-width-4of5 > .desktop-percent,
	html body .column-group > .percent.width-4of5,
	html body .column-group > .desktop-percent.width-4of5,
	html body .column-group > .column.percent.desktop-width-4of5,
	html body .column-group > .column.desktop-percent.desktop-width-4of5 { box-sizing:border-box; width:80%; min-width:0; max-width:80%; }
	
	.width-1of6,
	html .desktop-width-1of6,
	html .column-width-1of6 > .percent,
	html .column-width-1of6 > .desktop-percent,
	html .column-group.desktop-column-width-1of6 > .percent,
	html .column-group.desktop-column-width-1of6 > .desktop-percent,
	html body .column-group > .percent.width-1of6,
	html body .column-group > .desktop-percent.width-1of6,
	html body .column-group > .column.percent.desktop-width-1of6,
	html body .column-group > .column.desktop-percent.desktop-width-1of6 { box-sizing:border-box; width:16.6%; min-width:0; max-width:16.6%; }
	
	.width-5of6,
	html .desktop-width-5of6,
	html .column-width-5of6 > .percent,
	html .column-width-5of6 > .desktop-percent,
	html .column-group.desktop-column-width-5of6 > .percent,
	html .column-group.desktop-column-width-5of6 > .desktop-percent,
	html body .column-group > .percent.width-5of6,
	html body .column-group > .desktop-percent.width-5of6,
	html body .column-group > .column.percent.desktop-width-5of6,
	html body .column-group > .column.desktop-percent.desktop-width-5of6 { box-sizing:border-box; width:83.3%; min-width:0; max-width:83.3%; }
	
	/* Pixel Widths */
	 
	.width-50,
	html .desktop-width-50,
	html .column-width-50 > .pixel,
	html .column-width-50 > .desktop-pixel,
	html .column-group.desktop-column-width-50 > .pixel,
	html .column-group.desktop-column-width-50 > .desktop-pixel,
	html body .column-group > .pixel.width-50,
	html body .column-group > .desktop-pixel.width-50,
	html body .column-group > .column.pixel.desktop-width-50,
	html body .column-group > .column.desktop-pixel.desktop-width-50 { box-sizing: content-box; width:50px; max-width:50px; min-width:50px; }
	
	.width-100,
	html .desktop-width-100,
	html .column-width-100 > .pixel,
	html .column-width-100 > .desktop-pixel,
	html .column-group.desktop-column-width-100 > .pixel,
	html .column-group.desktop-column-width-100 > .desktop-pixel,
	html body .column-group > .pixel.width-100,
	html body .column-group > .desktop-pixel.width-100,
	html body .column-group > .column.pixel.desktop-width-100,
	html body .column-group > .column.desktop-pixel.desktop-width-100 { box-sizing: content-box; width:100px; max-width:100px; min-width:100px; }
	
	.width-150,
	html .desktop-width-150,
	html .column-width-150 > .pixel,
	html .column-width-150 > .desktop-pixel,
	html .column-group.desktop-column-width-150 > .pixel,
	html .column-group.desktop-column-width-150 > .desktop-pixel,
	html body .column-group > .pixel.width-150,
	html body .column-group > .desktop-pixel.width-150,
	html body .column-group > .column.pixel.desktop-width-150,
	html body .column-group > .column.desktop-pixel.desktop-width-150 { box-sizing: content-box; width:150px; max-width:150px; min-width:150px; }
	
	.width-200,
	html .desktop-width-200,
	html .column-width-200 > .pixel,
	html .column-width-200 > .desktop-pixel,
	html .column-group.desktop-column-width-200 > .pixel,
	html .column-group.desktop-column-width-200 > .desktop-pixel,
	html body .column-group > .pixel.width-200,
	html body .column-group > .desktop-pixel.width-200,
	html body .column-group > .column.pixel.desktop-width-200,
	html body .column-group > .column.desktop-pixel.desktop-width-200 { box-sizing: content-box; width:200px; max-width:200px; min-width:200px; }
	
	.width-250,
	html .desktop-width-250,
	html .column-width-250 > .pixel,
	html .column-width-250 > .desktop-pixel,
	html .column-group.desktop-column-width-250 > .pixel,
	html .column-group.desktop-column-width-250 > .desktop-pixel,
	html body .column-group > .pixel.width-250,
	html body .column-group > .desktop-pixel.width-250,
	html body .column-group > .column.pixel.desktop-width-250,
	html body .column-group > .column.desktop-pixel.desktop-width-250 { box-sizing: content-box; width:250px; max-width:250px; min-width:250px; }
	
	.width-300,
	html .desktop-width-300,
	html .column-width-300 > .pixel,
	html .column-width-300 > .desktop-pixel,
	html .column-group.desktop-column-width-300 > .pixel,
	html .column-group.desktop-column-width-300 > .desktop-pixel,
	html body .column-group > .pixel.width-300,
	html body .column-group > .desktop-pixel.width-300,
	html body .column-group > .column.pixel.desktop-width-300,
	html body .column-group > .column.desktop-pixel.desktop-width-300 { box-sizing: content-box; width:300px; max-width:300px; min-width:300px; }

	.width-350,
	html .desktop-width-350,
	html .column-width-350 > .pixel,
	html .column-width-350 > .desktop-pixel,
	html .column-group.desktop-column-width-350 > .pixel,
	html .column-group.desktop-column-width-350 > .desktop-pixel,
	html body .column-group > .pixel.width-350,
	html body .column-group > .desktop-pixel.width-350,
	html body .column-group > .column.pixel.desktop-width-350,
	html body .column-group > .column.desktop-pixel.desktop-width-350 { box-sizing: content-box; width:350px; max-width:350px; min-width:350px; }

	.width-400,
	html .desktop-width-400,
	html .column-width-400 > .pixel,
	html .column-width-400 > .desktop-pixel,
	html .column-group.desktop-column-width-400 > .pixel,
	html .column-group.desktop-column-width-400 > .desktop-pixel,
	html body .column-group > .pixel.width-400,
	html body .column-group > .desktop-pixel.width-400,
	html body .column-group > .column.pixel.desktop-width-400,
	html body .column-group > .column.desktop-pixel.desktop-width-400 { box-sizing: content-box; width:400px; max-width:400px; min-width:400px; }

	.width-450,
	html .desktop-width-450,
	html .column-width-450 > .pixel,
	html .column-width-450 > .desktop-pixel,
	html .column-group.desktop-column-width-450 > .pixel,
	html .column-group.desktop-column-width-450 > .desktop-pixel,
	html body .column-group > .pixel.width-450,
	html body .column-group > .desktop-pixel.width-450,
	html body .column-group > .column.pixel.desktop-width-450,
	html body .column-group > .column.desktop-pixel.desktop-width-450 { box-sizing: content-box; width:450px; max-width:450px; min-width:450px; }

	.width-500,
	html .desktop-width-500,
	html .column-width-500 > .pixel,
	html .column-width-500 > .desktop-pixel,
	html .column-group.desktop-column-width-500 > .pixel,
	html .column-group.desktop-column-width-500 > .desktop-pixel,
	html body .column-group > .pixel.width-500,
	html body .column-group > .desktop-pixel.width-500,
	html body .column-group > .column.pixel.desktop-width-500,
	html body .column-group > .column.desktop-pixel.desktop-width-500 { box-sizing: content-box; width:500px; max-width:500px; min-width:500px; }

	/* Fill Width */
	.column-width-fill > .cell,
	.column-width-fill > .desktop-cell,
	.column-group.desktop-column-width-fill > .cell,
	.column-group.desktop-column-width-fill > .desktop-cell,
	body .column-group > .cell.width-fill,
	body .column-group > .desktop-cell.width-fill,
	body .column-group > .column.cell.desktop-width-fill,
	body .column-group > .column.desktop-cell.desktop-width-fill { box-sizing:border-box; width:auto; max-width:none; min-width:0; }

	body .column.cell.empty, html body .column.cell.desktop-empty { margin: 0; padding: 0; }

	/* Backgrounds */
	body .background-relative,
	body .background-relative > .column { position:relative;	}
	
	.column-group .column.background-column {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width:100%;
	}
	
	.background-column > .column-group { height: 100%; }	
	.background-column > .column-group > .column { height: 100%;}
	.background-column > .column-group > .column > .column-container {
		background-size:cover;
		background-repeat: repeat;
		width:100%;
		height:100%;
		display:block;
	}
	
	/* Outside Backgrounds */
	
	html body .column-group .background-column.background-parallel {
		position:relative;
		padding-bottom:23.6%; /* Golden Ratio */
		height:0;
	}
	
	.background-parallel > .column-group { position:absolute; width:100%; }
	
	html body .column-group .background-column.desktop-background-default {
		position:absolute;
		padding-bottom:0;
		height:100%; 
	}

	.desktop-background-default > .column-group { position:static; width:auto; }
	
	html body .column-group .background-column.desktop-background-parallel {
		position:relative;
		padding-bottom:23.6%; /* Golden Ratio */
		height:0; 
	}
	
	.desktop-background-parallel > .column-group { position:absolute; width: 100%; }

	/* End Backgrounds */

}

/* Styles For Column Tablet go here */
@media all and (min-width: 768px) and (max-width: 1020px){

	.column,
	html body .tablet-default-group > .column {
		float:left;
		display:inherit;
	}

	.table-group > .column,
	html body .tablet-table-group > .column {
		display: table-cell;
		width:auto;
		float:none;
	}
	
	.inline-group > .column,
	html body .tablet-inline-group > .column {
		display:inline-block;
		float:none;
	}

	/* Column Position */
	
	body .column-group.tablet-column-static > .column { position:static; }
	body .column-group.tablet-column-relative > .column { position:relative; }
	body .column-group.tablet-column-absolute > .column { position:absolute; }
	
	html body .column-group > .column.static { position:static; }
	html body .column-group > .column.relative { position:relative; }
	html body .column-group > .column.absolute { position:absolute; }
	
	html body .column-group > .column.tablet-static { position:static; }
	html body .column-group > .column.tablet-relative { position:relative; }
	html body .column-group > .column.tablet-absolute { position:absolute; }
	
	/* Column Align */

	html body .tablet-align-left { text-align:left; }
	html body .tablet-align-center { text-align:center; }
	html body .tablet-align-right { text-align:right; }
	hrml body .tablet-align-justify { text-align:justify; }
	
	/* Column Direction */
	/* Only works with inline & table groups */
	
	html body .tablet-direction-ltr { direction:ltr; }
	html body .tablet-direction-rtl { direction:rtl; }

	/* Float Columns */

	.float-left,
	body .tablet-float-left,
	.inline-group > .column.float-left,
	body .tablet-inline-group > .column.float-left,
	body .inline-group > .column.tablet-float-left,
	html body .tablet-inline-group > .column.tablet-float-left { float:left; }
	
	.float-right,
	body .tablet-float-right,
	.inline-group > .column.float-right,
	body .tablet-inline-group > .column.float-right,
	body .inline-group > .column.tablet-float-right,
	html body .tablet-inline-group > .column.tablet-float-right { float:right; }
	
	.float-none,
	body .tablet-float-none,
	.inline-group > .column.float-none,
	body .tablet-inline-group > .column.float-none,
	body .inline-group > .column.tablet-float-none,
	html body .tablet-inline-group > .column.tablet-float-none { float:none; }
	
	/* End Float Columns */
	
	/* Vertically Aligning Columns */
	
	body .tablet-column-align-top > .column { vertical-align: top; }
	body .tablet-column-align-middle > .column { vertical-align: middle; }
	body .tablet-column-align-bottom > .column { vertical-align: bottom; }
	
	body .column-group[class*="column-align-"] > .column.tablet-align-top { vertical-align: top; }
	body .column-group[class*="column-align-"] > .column.tablet-align-middle { vertical-align: middle; }
	body .column-group[class*="column-align-"] > .column.tablet-align-bottom { vertical-align: bottom;}

	/* End Vertically Aligning Columns */
	
	/* Vertical Align Groups */
	
	body .column-group > .vertical-align-limit.tablet-limit-pixel  {
		height: 250px; /* overwite in custom.css */
		padding:0;
	}
	
	body .column-group > .vertical-align-limit.tablet-limit-percent {
		padding-bottom:23.6%; /* Golden Ratio */ /* overwite in custom.css */
		height:0;
	}

/* End Vertical Align Groups */

	/* Expanding Columns */
	
	.column-group .column.tablet-expand-left {
		text-align:left;
	}
	
	.column-group .column.tablet-expand-left > .column-container {
		text-align:left;
		display:inline-block;
		width:auto;
	}
	
	.column-group .column.tablet-expand-right {
		text-align:right;
	}
	
	.column-group .column.tablet-expand-right > .column-container {
		text-align:left;
		display:inline-block;
		width:auto;
	}
	
	.column-group .column.tablet-expand-center {
		text-align:center;
	}
	
	.column-group .column.tablet-expand-center > .column-container {
		text-align:left;
		width:auto;	
		margin-left:auto;
		margin-right:auto;
	}
	
	.column.pixel[class*="tablet-expand-"] {
		width:auto;	
	}

	/* End Expanding Columns */

	/* Dominant Expands */
	/* Only works with table groups */
	
	.column-group.table-group .expand-dominant > .column-container,
	.column-group.table-group .tablet-expand-dominant > .column-container { white-space: nowrap; width: auto; }

	
	.column-group.table-group.tablet-default-group .expand-dominant > .column-container,
	.column-group.table-group.tablet-inline-group .expand-dominant > .column-container { white-space:normal; width: 100%; }
	
	body .column-group.tablet-table-group .expand-dominant > .column-container,
	body .column-group.tablet-table-group .tablet-expand-dominant > .column-container { white-space: nowrap; width: auto; }
	
	/* End Dominant Expands */

	
	/* Tablet Horizontal Spacing */
	
	body .column-group.tablet-column-gutter-0 { margin-left: 0; margin-right: 0; }
	.column-group.tablet-column-gutter-0 > .column { padding-left:0; padding-right:0; }
	body .column-group.tablet-column-gutter-20, body .column-group.column-gutter-xs,	body .column-group.column-gutter-s { margin-left: -10px; margin-right: -10px; }
	.column-group.tablet-column-gutter-20 > .column, .column-group.column-gutter-xs > .column, .column-group.column-gutter-s > .column { padding-left:10px; padding-right:10px; }
	body .column-group.tablet-column-gutter-40,	body .column-group.column-gutter-m { margin-left: -20px; margin-right: -20px; }
	.column-group.tablet-column-gutter-40 > .column, .column-group.column-gutter-m > .column { padding-left:20px; padding-right:20px; }
	body .column-group.tablet-column-gutter-60,	body .column-group.column-gutter-l { margin-left: -30px; margin-right: -30px; }
	.column-group.tablet-column-gutter-60 > .column, .column-group.column-gutter-l > .column { padding-left:30px; padding-right:30px; }
	body .column-group.tablet-column-gutter-80,	body .column-group.column-gutter-xl { margin-left: -40px; margin-right: -40px; }
	.column-group.tablet-column-gutter-80 > .column, .column-group.column-gutter-xl > .column { padding-left:40px; padding-right:40px; }
	body .column-group.tablet-column-gutter-100 { margin-left: -50px; margin-right: -50px; }
	.column-group.tablet-column-gutter-100 > .column { padding-left:50px; padding-right:50px;}	
	
	/* End Tablet Horizontal Spacing */

	/* Tablet Vertical Spacing */

	body .tablet-column-margin-bottom-0 > .column  { margin-bottom:0; }
	body .tablet-column-margin-bottom-20 > .column,
	body .column-margin-bottom-xs > .column, body .column-margin-bottom-s > .column { margin-bottom:20px; }
	body .tablet-column-margin-bottom-40 > .column,
	body .column-margin-bottom-m > .column  { margin-bottom:40px; }
	body .tablet-column-margin-bottom-60 > .column,
	body .column-margin-bottom-l > .column  { margin-bottom:60px; }
	body .tablet-column-margin-bottom-80 > .column,
	body .column-margin-bottom-xl > .column  { margin-bottom:80px; }
	body .tablet-column-margin-bottom-100 > .column  { margin-bottom:100px; }

	/* End Tablet Vertical Spacing */
	
	/* Tablet Widths */

	/* Percentage Widths */
	
	.width-1of1,
	html .tablet-width-1of1,
	html .column-width-1of1 > .percent,
	html .column-width-1of1 > .tablet-percent,
	html .column-group.tablet-column-width-1of1 > .percent,
	html .column-group.tablet-column-width-1of1 > .tablet-percent,
	html body .column-group > .percent.width-1of1,
	html body .column-group > .tablet-percent.width-1of1,
	html body .column-group > .column.percent.tablet-width-1of1,
	html body .column-group > .column.tablet-percent.tablet-width-1of1 { box-sizing:border-box; width:100%; min-width:0; max-width:100%;	box-sizing: border-box;	}
	
	.width-1of2,
	html .tablet-width-1of2,
	html .column-width-1of2 > .percent,
	html .column-width-1of2 > .tablet-percent,
	html .column-group.tablet-column-width-1of2 > .percent,
	html .column-group.tablet-column-width-1of2 > .tablet-percent,
	html body .column-group > .percent.width-1of2,
	html body .column-group > .tablet-percent.width-1of2,
	html body .column-group > .column.percent.tablet-width-1of2,
	html body .column-group > .column.tablet-percent.tablet-width-1of2 { box-sizing:border-box; width:50%; min-width:0; max-width:50%; }
	
	.width-1of3,
	html .tablet-width-1of3,
	html .column-width-1of3 > .percent,
	html .column-width-1of3 > .tablet-percent,
	html .column-group.tablet-column-width-1of3 > .percent,
	html .column-group.tablet-column-width-1of3 > .tablet-percent,
	html body .column-group > .percent.width-1of3,
	html body .column-group > .tablet-percent.width-1of3,
	html body .column-group > .column.percent.tablet-width-1of3,
	html body .column-group > .column.tablet-percent.tablet-width-1of3 { box-sizing:border-box; width:33.3%; min-width:0; max-width:33.3%; }
	
	.width-2of3,
	html .tablet-width-2of3,
	html .column-width-2of3 > .percent,
	html .column-width-2of3 > .tablet-percent,
	html .column-group.tablet-column-width-2of3 > .percent,
	html .column-group.tablet-column-width-2of3 > .tablet-percent,
	html body .column-group > .percent.width-2of3,
	html body .column-group > .tablet-percent.width-2of3,
	html body .column-group > .column.percent.tablet-width-2of3,
	html body .column-group > .column.tablet-percent.tablet-width-2of3 { box-sizing:border-box; width:66.6%; min-width:0; max-width:66.6%; }
	
	.width-1of4,
	html .tablet-width-1of4,
	html .column-width-1of4 > .percent,
	html .column-width-1of4 > .tablet-percent,
	html .column-group.tablet-column-width-1of4 > .percent,
	html .column-group.tablet-column-width-1of4 > .tablet-percent,
	html body .column-group > .percent.width-1of4,
	html body .column-group > .tablet-percent.width-1of4,
	html body .column-group > .column.percent.tablet-width-1of4,
	html body .column-group > .column.tablet-percent.tablet-width-1of4  { box-sizing:border-box; width:25%; min-width:0; max-width:25%; }
	
	.width-3of4,
	html .tablet-width-3of4,
	html .column-width-3of4 > .percent,
	html .column-width-3of4 > .tablet-percent,
	html .column-group.tablet-column-width-3of4 > .percent,
	html .column-group.tablet-column-width-3of4 > .tablet-percent,
	html body .column-group > .percent.width-3of4,
	html body .column-group > .tablet-percent.width-3of4,
	html body .column-group > .column.percent.tablet-width-3of4,
	html body .column-group > .column.tablet-percent.tablet-width-3of4 { box-sizing:border-box; width:75%; min-width:0; max-width:75%; }
	
	.width-1of5,
	html .tablet-width-1of5,
	html .column-width-1of5 > .percent,
	html .column-width-1of5 > .tablet-percent,
	html .column-group.tablet-column-width-1of5 > .percent,
	html .column-group.tablet-column-width-1of5 > .tablet-percent,
	html body .column-group > .percent.width-1of5,
	html body .column-group > .tablet-percent.width-1of5,
	html body .column-group > .column.percent.tablet-width-1of5,
	html body .column-group > .column.tablet-percent.tablet-width-1of5  { box-sizing:border-box; width:20%; min-width:0; max-width:20%; }
	
	.width-2of5,
	html .tablet-width-2of5,
	html .column-width-2of5 > .percent,
	html .column-width-2of5 > .tablet-percent,
	html .column-group.tablet-column-width-2of5 > .percent,
	html .column-group.tablet-column-width-2of5 > .tablet-percent,
	html body .column-group > .percent.width-2of5,
	html body .column-group > .tablet-percent.width-2of5,
	html body .column-group > .column.percent.tablet-width-2of5,
	html body .column-group > .column.tablet-percent.tablet-width-2of5 { box-sizing:border-box; width:40%; min-width:0; max-width:40%; }
	
	.width-3of5,
	html .tablet-width-3of5,
	html .column-width-3of5 > .percent,
	html .column-width-3of5 > .tablet-percent,
	html .column-group.tablet-column-width-3of5 > .percent,
	html .column-group.tablet-column-width-3of5 > .tablet-percent,
	html body .column-group > .percent.width-3of5,
	html body .column-group > .tablet-percent.width-3of5,
	html body .column-group > .column.percent.tablet-width-3of5,
	html body .column-group > .column.tablet-percent.tablet-width-3of5 { box-sizing:border-box; width:60%; min-width:0; max-width:60%; }
	
	.width-4of5,
	html .tablet-width-4of5,
	html .column-width-4of5 > .percent,
	html .column-width-4of5 > .tablet-percent,
	html .column-group.tablet-column-width-4of5 > .percent,
	html .column-group.tablet-column-width-4of5 > .tablet-percent,
	html body .column-group > .percent.width-4of5,
	html body .column-group > .tablet-percent.width-4of5,
	html body .column-group > .column.percent.tablet-width-4of5,
	html body .column-group > .column.tablet-percent.tablet-width-4of5 { box-sizing:border-box; width:80%; min-width:0; max-width:80%; }
	
	.width-1of6,
	html .tablet-width-1of6,
	html .column-width-1of6 > .percent,
	html .column-width-1of6 > .tablet-percent,
	html .column-group.tablet-column-width-1of6 > .percent,
	html .column-group.tablet-column-width-1of6 > .tablet-percent,
	html body .column-group > .percent.width-1of6,
	html body .column-group > .tablet-percent.width-1of6,
	html body .column-group > .column.percent.tablet-width-1of6,
	html body .column-group > .column.tablet-percent.tablet-width-1of6 { box-sizing:border-box; width:16.6%; min-width:0; max-width:16.6%; }
	
	.width-5of6,
	html .tablet-width-5of6,
	html .column-width-5of6 > .percent,
	html .column-width-5of6 > .tablet-percent,
	html .column-group.tablet-column-width-5of6 > .percent,
	html .column-group.tablet-column-width-5of6 > .tablet-percent,
	html body .column-group > .percent.width-5of6,
	html body .column-group > .tablet-percent.width-5of6,
	html body .column-group > .column.percent.tablet-width-5of6,
	html body .column-group > .column.tablet-percent.tablet-width-5of6 { box-sizing:border-box; width:83.3%; min-width:0; max-width:83.3%; }
	
	/* Pixel Widths */
	 
	.width-50,
	html .tablet-width-50,
	html .column-width-50 > .pixel,
	html .column-width-50 > .tablet-pixel,
	html .column-group.tablet-column-width-50 > .pixel,
	html .column-group.tablet-column-width-50 > .tablet-pixel,
	html body .column-group > .pixel.width-50,
	html body .column-group > .tablet-pixel.width-50,
	html body .column-group > .column.pixel.tablet-width-50,
	html body .column-group > .column.tablet-pixel.tablet-width-50 { box-sizing: content-box; width:50px; max-width:50px; min-width:50px; }
	
	.width-100,
	html .tablet-width-100,
	html .column-width-100 > .pixel,
	html .column-width-100 > .tablet-pixel,
	html .column-group.tablet-column-width-100 > .pixel,
	html .column-group.tablet-column-width-100 > .tablet-pixel,
	html body .column-group > .pixel.width-100,
	html body .column-group > .tablet-pixel.width-100,
	html body .column-group > .column.pixel.tablet-width-100,
	html body .column-group > .column.tablet-pixel.tablet-width-100 { box-sizing: content-box; width:100px; max-width:100px; min-width:100px; }
	
	.width-150,
	html .tablet-width-150,
	html .column-width-150 > .pixel,
	html .column-width-150 > .tablet-pixel,
	html .column-group.tablet-column-width-150 > .pixel,
	html .column-group.tablet-column-width-150 > .tablet-pixel,
	html body .column-group > .pixel.width-150,
	html body .column-group > .tablet-pixel.width-150,
	html body .column-group > .column.pixel.tablet-width-150,
	html body .column-group > .column.tablet-pixel.tablet-width-150 { box-sizing: content-box; width:150px; max-width:150px; min-width:150px; }
	
	.width-200,
	html .tablet-width-200,
	html .column-width-200 > .pixel,
	html .column-width-200 > .tablet-pixel,
	html .column-group.tablet-column-width-200 > .pixel,
	html .column-group.tablet-column-width-200 > .tablet-pixel,
	html body .column-group > .pixel.width-200,
	html body .column-group > .tablet-pixel.width-200,
	html body .column-group > .column.pixel.tablet-width-200,
	html body .column-group > .column.tablet-pixel.tablet-width-200 { box-sizing: content-box; width:200px; max-width:200px; min-width:200px; }
	
	.width-250,
	html .tablet-width-250,
	html .column-width-250 > .pixel,
	html .column-width-250 > .tablet-pixel,
	html .column-group.tablet-column-width-250 > .pixel,
	html .column-group.tablet-column-width-250 > .tablet-pixel,
	html body .column-group > .pixel.width-250,
	html body .column-group > .tablet-pixel.width-250,
	html body .column-group > .column.pixel.tablet-width-250,
	html body .column-group > .column.tablet-pixel.tablet-width-250 { box-sizing: content-box; width:250px; max-width:250px; min-width:250px; }
	
	.width-300,
	html .tablet-width-300,
	html .column-width-300 > .pixel,
	html .column-width-300 > .tablet-pixel,
	html .column-group.tablet-column-width-300 > .pixel,
	html .column-group.tablet-column-width-300 > .tablet-pixel,
	html body .column-group > .pixel.width-300,
	html body .column-group > .tablet-pixel.width-300,
	html body .column-group > .column.pixel.tablet-width-300,
	html body .column-group > .column.tablet-pixel.tablet-width-300 { box-sizing: content-box; width:300px; max-width:300px; min-width:300px; }

	.width-350,
	html .tablet-width-350,
	html .column-width-350 > .pixel,
	html .column-width-350 > .tablet-pixel,
	html .column-group.tablet-column-width-350 > .pixel,
	html .column-group.tablet-column-width-350 > .tablet-pixel,
	html body .column-group > .pixel.width-350,
	html body .column-group > .tablet-pixel.width-350,
	html body .column-group > .column.pixel.tablet-width-350,
	html body .column-group > .column.tablet-pixel.tablet-width-350 { box-sizing: content-box; width:350px; max-width:350px; min-width:350px; }

	.width-400,
	html .tablet-width-400,
	html .column-width-400 > .pixel,
	html .column-width-400 > .tablet-pixel,
	html .column-group.tablet-column-width-400 > .pixel,
	html .column-group.tablet-column-width-400 > .tablet-pixel,
	html body .column-group > .pixel.width-400,
	html body .column-group > .tablet-pixel.width-400,
	html body .column-group > .column.pixel.tablet-width-400,
	html body .column-group > .column.tablet-pixel.tablet-width-400 { box-sizing: content-box; width:400px; max-width:400px; min-width:400px; }

	.width-450,
	html .tablet-width-450,
	html .column-width-450 > .pixel,
	html .column-width-450 > .tablet-pixel,
	html .column-group.tablet-column-width-450 > .pixel,
	html .column-group.tablet-column-width-450 > .tablet-pixel,
	html body .column-group > .pixel.width-450,
	html body .column-group > .tablet-pixel.width-450,
	html body .column-group > .column.pixel.tablet-width-450,
	html body .column-group > .column.tablet-pixel.tablet-width-450 { box-sizing: content-box; width:450px; max-width:450px; min-width:450px; }

	.width-500,
	html .tablet-width-500,
	html .column-width-500 > .pixel,
	html .column-width-500 > .tablet-pixel,
	html .column-group.tablet-column-width-500 > .pixel,
	html .column-group.tablet-column-width-500 > .tablet-pixel,
	html body .column-group > .pixel.width-500,
	html body .column-group > .tablet-pixel.width-500,
	html body .column-group > .column.pixel.tablet-width-500,
	html body .column-group > .column.tablet-pixel.tablet-width-500 { box-sizing: content-box; width:500px; max-width:500px; min-width:500px; }
		
	/* Fill Width */
	.column-width-fill > .cell,
	.column-width-fill > .tablet-cell,
	.column-group.tablet-column-width-fill > .cell,
	.column-group.tablet-column-width-fill > .tablet-cell,
	body .column-group > .cell.width-fill,
	body .column-group > .tablet-cell.width-fill,
	body .column-group > .column.cell.tablet-width-fill,
	body .column-group > .column.tablet-cell.tablet-width-fill { box-sizing:border-box; width:auto; max-width:none; min-width:0; }
	
	body .column.cell.empty, html body .column.cell.tablet-empty { margin: 0; padding: 0; }
	
	/* Backgrounds */
	body .background-relative,
	body .background-relative > .column { position:relative;	}
	
	.column-group .column.background-column {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width:100%;
	}
	
	.background-column > .column-group { height: 100%; }	
	.background-column > .column-group > .column { height: 100%;}
	.background-column > .column-group > .column > .column-container {
		background-size:cover;
		background-repeat: repeat;
		width:100%;
		height:100%;
		display:block;
	}
	
	/* Outside Backgrounds */
	
	html body .column-group .background-column.background-parallel {
		position:relative;
		padding-bottom:23.6%; /* Golden Ratio */
		height:0;
	}
	
	.background-parallel > .column-group { position:absolute; width:100%; }
	
	html body .column-group .background-column.tablet-background-default {
		position:absolute;
		padding-bottom:0;
		height:100%; 
	}

	.tablet-background-default > .column-group { position:static; width:auto; }
	
	html body .column-group .background-column.tablet-background-parallel {
		position:relative;
		padding-bottom:23.6%; /* Golden Ratio */
		height:0; 
	}
	
	.tablet-background-parallel > .column-group { position:absolute; width: 100%; }

	/* End Backgrounds */

}
/* Styles For Column Mobile go here */
@media (max-width: 767px) {
	
	.column,
	html body .mobile-default-group > .column {
		float:left;
		display:inherit;
	}

	.table-group > .column,
	html body .mobile-table-group > .column {
		display: table-cell;
		width:auto;
		float:none;
	}
	
	.inline-group > .column,
	html body .mobile-inline-group > .column {
		display:inline-block;
		float:none;
	}
	
	/* Column Position */
	
	body .column-group.mobile-column-static > .column { position:static; }
	body .column-group.mobile-column-relative > .column { position:relative; }
	body .column-group.mobile-column-absolute > .column { position:absolute; }
	
	html body .column-group > .column.static { position:static; }
	html body .column-group > .column.relative { position:relative; }
	html body .column-group > .column.absolute { position:absolute; }
	
	html body .column-group > .column.mobile-static { position:static; }
	html body .column-group > .column.mobile-relative { position:relative; }
	html body .column-group > .column.mobile-absolute { position:absolute; }

	/* Column Align */
	
	html body .mobile-align-left { text-align:left; }
	html body .mobile-align-center { text-align:center; }
	html body .mobile-align-right { text-align:right; }
	html body .mobile-align-justify { text-align:justify; }
	
	/* Column Direction */
	/* Only works with inline & table groups */
	
	html body .mobile-direction-ltr { direction:ltr; }
	html body .mobile-direction-rtl { direction:rtl; }
	
	/* Float Columns */

	.float-left,
	body .mobile-float-left,
	.inline-group > .column.float-left,
	body .mobile-inline-group > .column.float-left,
	body .inline-group > .column.mobile-float-left,
	html body .mobile-inline-group > .column.mobile-float-left { float:left; }
	
	.float-right,
	body .mobile-float-right,
	.inline-group > .column.float-right,
	body .mobile-inline-group > .column.float-right,
	body .inline-group > .column.mobile-float-right,
	html body .mobile-inline-group > .column.mobile-float-right { float:right; }
	
	.float-none,
	body .mobile-float-none,
	.inline-group > .column.float-none,
	body .mobile-inline-group > .column.float-none,
	body .inline-group > .column.mobile-float-none,
	html body .mobile-inline-group > .column.mobile-float-none { float:none; }
	
	/* End Float Columns */
	
	/* Vertically Aligning Columns */
	
	body .mobile-column-align-top > .column { vertical-align: top; }
	body .mobile-column-align-middle > .column { vertical-align: middle; }
	body .mobile-column-align-bottom > .column { vertical-align: bottom; }
	
	body .column-group[class*="column-align-"] > .column.mobile-align-top { vertical-align: top; }
	body .column-group[class*="column-align-"] > .column.mobile-align-middle { vertical-align: middle; }
	body .column-group[class*="column-align-"] > .column.mobile-align-bottom { vertical-align: bottom;}

	/* End Vertically Aligning Columns */
	
	/* Vertical Align Groups */
	
	body .column-group > .vertical-align-limit.mobile-limit-pixel  {
		height: 250px; /* overwite in custom.css */
		padding:0;
	}
	
	body .column-group > .vertical-align-limit.mobile-limit-percent {
		padding-bottom:23.6%; /* Golden Ratio */ /* overwite in custom.css */
		height:0;
	}
	
	/* End Vertical Align Groups */

	/* Expanding Columns */
	
	.column-group .column.mobile-expand-left {
		text-align:left;
	}
	
	.column-group .column.mobile-expand-left > .column-container {
		text-align:left;
		display:inline-block;
		width:auto;
	}
	
	.column-group .column.mobile-expand-right {
		text-align:right;
	}
	
	.column-group .column.mobile-expand-right > .column-container {
		text-align:left;
		display:inline-block;
		width:auto;
	}
	
	.column-group .column.mobile-expand-center {
		text-align:center;
	}
	
	.column-group .column.mobile-expand-center > .column-container {
		text-align:left;
		width:auto;	
		margin-left:auto;
		margin-right:auto;
	}
	
	.column.pixel[class*="mobile-expand-"] {
		width:auto;	
	}

	/* End Expanding Columns */

	/* Dominant Expands */
	/* Only works with table groups */
	
	.column-group.table-group .expand-dominant > .column-container,
	.column-group.table-group .mobile-expand-dominant > .column-container { white-space: nowrap; width: auto; }

	
	.column-group.table-group.mobile-default-group .expand-dominant > .column-container,
	.column-group.table-group.mobile-inline-group .expand-dominant > .column-container { white-space:normal; width: 100%; }
	
	body .column-group.mobile-table-group .expand-dominant > .column-container,
	body .column-group.mobile-table-group .mobile-expand-dominant > .column-container { white-space: nowrap; width: auto;	}
	
	/* End Dominant Expands */
	
	/* Mobile Horizontal Spacing */
	
	body .column-group.mobile-column-gutter-0 { margin-left: 0; margin-right: 0; }
	.column-group.mobile-column-gutter-0 > .column { padding-left:0; padding-right:0; }
	body .column-group.mobile-column-gutter-20,	body .column-group.column-gutter-xs,	body .column-group.column-gutter-s { margin-left: -10px; margin-right: -10px; }
	.column-group.mobile-column-gutter-20 > .column, .column-group.column-gutter-xs > .column, .column-group.column-gutter-s > .column { padding-left:10px; padding-right:10px; }
	body .column-group.mobile-column-gutter-40,	body .column-group.column-gutter-m { margin-left: -20px; margin-right: -20px; }
	.column-group.mobile-column-gutter-40 > .column, .column-group.column-gutter-m > .column { padding-left:20px; padding-right:20px; } 
	body .column-group.mobile-column-gutter-60,	body .column-group.column-gutter-l, body .column-group.column-gutter-xl { margin-left: -30px; margin-right: -30px; }
	.column-group.mobile-column-gutter-60 > .column, .column-group.column-gutter-l > .column, .column-group.column-gutter-xl > .column { padding-left:30px; padding-right:30px; }
	body .column-group.mobile-column-gutter-80 { margin-left: -40px; margin-right: -40px; } 
	.column-group.mobile-column-gutter-80 > .column { padding-left:40px; padding-right:40px; }
	body .column-group.mobile-column-gutter-100 { margin-left: -50px; margin-right: -50px; }
	.column-group.mobile-column-gutter-100 > .column { padding-left:50px; padding-right:50px;}	
	
	/* End Mobile Horizontal Spacing */
	
	/* Mobile Vertical Spacing */

	body .mobile-column-margin-bottom-0 > .column  { margin-bottom:0; }
	body .mobile-column-margin-bottom-20 > .column,
	body .column-margin-bottom-xs > .column, body .column-margin-bottom-s > .column { margin-bottom:20px; }
	body .mobile-column-margin-bottom-40 > .column,
	body .column-margin-bottom-m > .column  { margin-bottom:40px; }
	body .mobile-column-margin-bottom-60 > .column,
	body .column-margin-bottom-l > .column, body .column-margin-bottom-xl > .column  { margin-bottom:60px; }
	body .mobile-column-margin-bottom-80 > .column { margin-bottom:80px; }
	body .mobile-column-margin-bottom-100 > .column  { margin-bottom:100px; }

	/* End Mobile Vertical Spacing */

	/* Mobile Widths */

	/* Percentage Widths */
	
	.width-1of1,
	html .mobile-width-1of1,
	html .column-width-1of1 > .percent,
	html .column-width-1of1 > .mobile-percent,
	html .column-group.mobile-column-width-1of1 > .percent,
	html .column-group.mobile-column-width-1of1 > .mobile-percent,
	html body .column-group > .percent.width-1of1,
	html body .column-group > .mobile-percent.width-1of1,
	html body .column-group > .column.percent.mobile-width-1of1,
	html body .column-group > .column.mobile-percent.mobile-width-1of1 { box-sizing:border-box; width:100%; min-width:0; max-width:100%; }
	
	.width-1of2,
	html .mobile-width-1of2,
	html .column-width-1of2 > .percent,
	html .column-width-1of2 > .mobile-percent,
	html .column-group.mobile-column-width-1of2 > .percent,
	html .column-group.mobile-column-width-1of2 > .mobile-percent,
	html body .column-group > .percent.width-1of2,
	html body .column-group > .mobile-percent.width-1of2,
	html body .column-group > .column.percent.mobile-width-1of2,
	html body .column-group > .column.mobile-percent.mobile-width-1of2 { box-sizing:border-box; width:50%; min-width:0; max-width:50%; }
	
	.width-1of3,
	html .mobile-width-1of3,
	html .column-width-1of3 > .percent,
	html .column-width-1of3 > .mobile-percent,
	html .column-group.mobile-column-width-1of3 > .percent,
	html .column-group.mobile-column-width-1of3 > .mobile-percent,
	html body .column-group > .percent.width-1of3,
	html body .column-group > .mobile-percent.width-1of3,
	html body .column-group > .column.percent.mobile-width-1of3,
	html body .column-group > .column.mobile-percent.mobile-width-1of3 { box-sizing:border-box; width:33.3%; min-width:0; max-width:33.3%; }
	
	.width-2of3,
	html .mobile-width-2of3,
	html .column-width-2of3 > .percent,
	html .column-width-2of3 > .mobile-percent,
	html .column-group.mobile-column-width-2of3 > .percent,
	html .column-group.mobile-column-width-2of3 > .mobile-percent,
	html body .column-group > .percent.width-2of3,
	html body .column-group > .mobile-percent.width-2of3,
	html body .column-group > .column.percent.mobile-width-2of3,
	html body .column-group > .column.mobile-percent.mobile-width-2of3 { box-sizing:border-box; width:66.6%; min-width:0; max-width:66.6%; }
	
	.width-1of4,
	html .mobile-width-1of4,
	html .column-width-1of4 > .percent,
	html .column-width-1of4 > .mobile-percent,
	html .column-group.mobile-column-width-1of4 > .percent,
	html .column-group.mobile-column-width-1of4 > .mobile-percent,
	html body .column-group > .percent.width-1of4,
	html body .column-group > .mobile-percent.width-1of4,
	html body .column-group > .column.percent.mobile-width-1of4,
	html body .column-group > .column.mobile-percent.mobile-width-1of4  { box-sizing:border-box; width:25%; min-width:0; max-width:25%; }
	
	.width-3of4,
	html .mobile-width-3of4,
	html .column-width-3of4 > .percent,
	html .column-width-3of4 > .mobile-percent,
	html .column-group.mobile-column-width-3of4 > .percent,
	html .column-group.mobile-column-width-3of4 > .mobile-percent,
	html body .column-group > .percent.width-3of4,
	html body .column-group > .mobile-percent.width-3of4,
	html body .column-group > .column.percent.mobile-width-3of4,
	html body .column-group > .column.mobile-percent.mobile-width-3of4 { box-sizing:border-box; width:75%; min-width:0; max-width:75%; }
	
	.width-1of5,
	html .mobile-width-1of5,
	html .column-width-1of5 > .percent,
	html .column-width-1of5 > .mobile-percent,
	html .column-group.mobile-column-width-1of5 > .percent,
	html .column-group.mobile-column-width-1of5 > .mobile-percent,
	html body .column-group > .percent.width-1of5,
	html body .column-group > .mobile-percent.width-1of5,
	html body .column-group > .column.percent.mobile-width-1of5,
	html body .column-group > .column.mobile-percent.mobile-width-1of5  { box-sizing:border-box; width:20%; min-width:0; max-width:20%; }
	
	.width-2of5,
	html .mobile-width-2of5,
	html .column-width-2of5 > .percent,
	html .column-width-2of5 > .mobile-percent,
	html .column-group.mobile-column-width-2of5 > .percent,
	html .column-group.mobile-column-width-2of5 > .mobile-percent,
	html body .column-group > .percent.width-2of5,
	html body .column-group > .mobile-percent.width-2of5,
	html body .column-group > .column.percent.mobile-width-2of5,
	html body .column-group > .column.mobile-percent.mobile-width-2of5 { box-sizing:border-box; width:40%; min-width:0; max-width:40%; }
	
	.width-3of5,
	html .mobile-width-3of5,
	html .column-width-3of5 > .percent,
	html .column-width-3of5 > .mobile-percent,
	html .column-group.mobile-column-width-3of5 > .percent,
	html .column-group.mobile-column-width-3of5 > .mobile-percent,
	html body .column-group > .percent.width-3of5,
	html body .column-group > .mobile-percent.width-3of5,
	html body .column-group > .column.percent.mobile-width-3of5,
	html body .column-group > .column.mobile-percent.mobile-width-3of5 { box-sizing:border-box; width:60%; min-width:0; max-width:60%; }
	
	.width-4of5,
	html .mobile-width-4of5,
	html .column-width-4of5 > .percent,
	html .column-width-4of5 > .mobile-percent,
	html .column-group.mobile-column-width-4of5 > .percent,
	html .column-group.mobile-column-width-4of5 > .mobile-percent,
	html body .column-group > .percent.width-4of5,
	html body .column-group > .mobile-percent.width-4of5,
	html body .column-group > .column.percent.mobile-width-4of5,
	html body .column-group > .column.mobile-percent.mobile-width-4of5 { box-sizing:border-box; width:80%; min-width:0; max-width:80%; }
	
	.width-1of6,
	html .mobile-width-1of6,
	html .column-width-1of6 > .percent,
	html .column-width-1of6 > .mobile-percent,
	html .column-group.mobile-column-width-1of6 > .percent,
	html .column-group.mobile-column-width-1of6 > .mobile-percent,
	html body .column-group > .percent.width-1of6,
	html body .column-group > .mobile-percent.width-1of6,
	html body .column-group > .column.percent.mobile-width-1of6,
	html body .column-group > .column.mobile-percent.mobile-width-1of6 { box-sizing:border-box; width:16.6%; min-width:0; max-width:16.6%; }
	
	.width-5of6,
	html .mobile-width-5of6,
	html .column-width-5of6 > .percent,
	html .column-width-5of6 > .mobile-percent,
	html .column-group.mobile-column-width-5of6 > .percent,
	html .column-group.mobile-column-width-5of6 > .mobile-percent,
	html body .column-group > .percent.width-5of6,
	html body .column-group > .mobile-percent.width-5of6,
	html body .column-group > .column.percent.mobile-width-5of6,
	html body .column-group > .column.mobile-percent.mobile-width-5of6 { box-sizing:border-box; width:83.3%; min-width:0; max-width:83.3%; }
	
	/* Pixel Widths */
	 
	.width-50,
	html .mobile-width-50,
	html .column-width-50 > .pixel,
	html .column-width-50 > .mobile-pixel,
	html .column-group.mobile-column-width-50 > .pixel,
	html .column-group.mobile-column-width-50 > .mobile-pixel,
	html body .column-group > .pixel.width-50,
	html body .column-group > .mobile-pixel.width-50,
	html body .column-group > .column.pixel.mobile-width-50,
	html body .column-group > .column.mobile-pixel.mobile-width-50 { box-sizing: content-box; width:50px; max-width:50px; min-width:50px; }
	
	.width-100,
	html .mobile-width-100,
	html .column-width-100 > .pixel,
	html .column-width-100 > .mobile-pixel,
	html .column-group.mobile-column-width-100 > .pixel,
	html .column-group.mobile-column-width-100 > .mobile-pixel,
	html body .column-group > .pixel.width-100,
	html body .column-group > .mobile-pixel.width-100,
	html body .column-group > .column.pixel.mobile-width-100,
	html body .column-group > .column.mobile-pixel.mobile-width-100 { box-sizing: content-box; width:100px; max-width:100px; min-width:100px; }
	
	.width-150,
	html .mobile-width-150,
	html .column-width-150 > .pixel,
	html .column-width-150 > .mobile-pixel,
	html .column-group.mobile-column-width-150 > .pixel,
	html .column-group.mobile-column-width-150 > .mobile-pixel,
	html body .column-group > .pixel.width-150,
	html body .column-group > .mobile-pixel.width-150,
	html body .column-group > .column.pixel.mobile-width-150,
	html body .column-group > .column.mobile-pixel.mobile-width-150 { box-sizing: content-box; width:150px; max-width:150px; min-width:150px; }
	
	.width-200,
	html .mobile-width-200,
	html .column-width-200 > .pixel,
	html .column-width-200 > .mobile-pixel,
	html .column-group.mobile-column-width-200 > .pixel,
	html .column-group.mobile-column-width-200 > .mobile-pixel,
	html body .column-group > .pixel.width-200,
	html body .column-group > .mobile-pixel.width-200,
	html body .column-group > .column.pixel.mobile-width-200,
	html body .column-group > .column.mobile-pixel.mobile-width-200 { box-sizing: content-box; width:200px; max-width:200px; min-width:200px; }
	
	.width-250,
	html .mobile-width-250,
	html .column-width-250 > .pixel,
	html .column-width-250 > .mobile-pixel,
	html .column-group.mobile-column-width-250 > .pixel,
	html .column-group.mobile-column-width-250 > .mobile-pixel,
	html body .column-group > .pixel.width-250,
	html body .column-group > .mobile-pixel.width-250,
	html body .column-group > .column.pixel.mobile-width-250,
	html body .column-group > .column.mobile-pixel.mobile-width-250 { box-sizing: content-box; width:250px; max-width:250px; min-width:250px; }
	
	.width-300,
	html .mobile-width-300,
	html .column-width-300 > .pixel,
	html .column-width-300 > .mobile-pixel,
	html .column-group.mobile-column-width-300 > .pixel,
	html .column-group.mobile-column-width-300 > .mobile-pixel,
	html body .column-group > .pixel.width-300,
	html body .column-group > .mobile-pixel.width-300,
	html body .column-group > .column.pixel.mobile-width-300,
	html body .column-group > .column.mobile-pixel.mobile-width-300 { box-sizing: content-box; width:300px; max-width:300px; min-width:300px; }

	.width-350,
	html .mobile-width-350,
	html .column-width-350 > .pixel,
	html .column-width-350 > .mobile-pixel,
	html .column-group.mobile-column-width-350 > .pixel,
	html .column-group.mobile-column-width-350 > .mobile-pixel,
	html body .column-group > .pixel.width-350,
	html body .column-group > .mobile-pixel.width-350,
	html body .column-group > .column.pixel.mobile-width-350,
	html body .column-group > .column.mobile-pixel.mobile-width-350 { box-sizing: content-box; width:350px; max-width:350px; min-width:350px; }

	.width-400,
	html .mobile-width-400,
	html .column-width-400 > .pixel,
	html .column-width-400 > .mobile-pixel,
	html .column-group.mobile-column-width-400 > .pixel,
	html .column-group.mobile-column-width-400 > .mobile-pixel,
	html body .column-group > .pixel.width-400,
	html body .column-group > .mobile-pixel.width-400,
	html body .column-group > .column.pixel.mobile-width-400,
	html body .column-group > .column.mobile-pixel.mobile-width-400 { box-sizing: content-box; width:400px; max-width:400px; min-width:400px; }

	.width-450,
	html .mobile-width-450,
	html .column-width-450 > .pixel,
	html .column-width-450 > .mobile-pixel,
	html .column-group.mobile-column-width-450 > .pixel,
	html .column-group.mobile-column-width-450 > .mobile-pixel,
	html body .column-group > .pixel.width-450,
	html body .column-group > .mobile-pixel.width-450,
	html body .column-group > .column.pixel.mobile-width-450,
	html body .column-group > .column.mobile-pixel.mobile-width-450 { box-sizing: content-box; width:450px; max-width:450px; min-width:450px; }

	.width-500,
	html .mobile-width-500,
	html .column-width-500 > .pixel,
	html .column-width-500 > .mobile-pixel,
	html .column-group.mobile-column-width-500 > .pixel,
	html .column-group.mobile-column-width-500 > .mobile-pixel,
	html body .column-group > .pixel.width-500,
	html body .column-group > .mobile-pixel.width-500,
	html body .column-group > .column.pixel.mobile-width-500,
	html body .column-group > .column.mobile-pixel.mobile-width-500 { box-sizing: content-box; width:500px; max-width:500px; min-width:500px; }
		
	/* Fill Width */
	.column-width-fill > .cell,
	.column-width-fill > .mobile-cell,
	.column-group.mobile-column-width-fill > .cell,
	.column-group.mobile-column-width-fill > .mobile-cell,
	body .column-group > .cell.width-fill,
	body .column-group > .mobile-cell.width-fill,
	body .column-group > .column.cell.mobile-width-fill,
	body .column-group > .column.mobile-cell.mobile-width-fill { box-sizing:border-box; width:auto; max-width:none; min-width:0; }
	
	body .column.cell.empty, html body .column.cell.mobile-empty { margin: 0; padding: 0;}
	
	/* Backgrounds */
	body .background-relative,
	body .background-relative > .column { position:relative;	}
	
	.column-group .column.background-column {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width:100%;
	}
	
	.background-column > .column-group { height: 100%; }	
	.background-column > .column-group > .column { height: 100%; }
	.background-column > .column-group > .column > .column-container {
		background-size:cover;
		background-repeat: repeat; 
		width:100%;
		height:100%;
		display:block;
	}
	
	/* Outside Backgrounds */
	
	html body .column-group .background-column.background-parallel {
		position:relative;
		padding-bottom:23.6%; /* Golden Ratio */
		height:0;
	}
	
	.background-parallel > .column-group { position:absolute; width:100%; }
	
	html body .column-group .background-column.mobile-background-default {
		position:absolute;
		padding-bottom:0;
		height:100%; 
	}

	.mobile-background-default > .column-group { position:static; width:auto; }
	
	html body .column-group .background-column.mobile-background-parallel {
		position:relative;
		padding-bottom:23.6%; /* Golden Ratio */
		height:0; 
	}
	
	.mobile-background-parallel > .column-group { position:absolute; width: 100%; }

	/* End Backgrounds */

}