/*
 * Grid System
 */

.container {
	position: relative;
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
}

.row { 
    font-size: 0; 
}

.column,
.columns {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	font-size: var(--p); 
}


/* -- Mobile First Columns : Small Breakpoint -- */

.small-0  { width: 0%; }
.small-1  { width: 8.33333%; }
.small-2  { width: 16.66667%; }
.small-3  { width: 25%; }
.small-4  { width: 33.33333%; }
.small-5  { width: 41.66667%; }
.small-6  { width: 50%; }
.small-7  { width: 58.33333%; }
.small-8  { width: 66.66667%; }
.small-9  { width: 75%; }
.small-10 { width: 83.33333%; }
.small-11 { width: 91.66667%; }
.small-12 { width: 100%; }

.small-offset-0  { margin-left: 0%; }
.small-offset-1  { margin-left: 8.33333%; }
.small-offset-2  { margin-left: 16.66667%; }
.small-offset-3  { margin-left: 25%; }
.small-offset-4  { margin-left: 33.33333%; }
.small-offset-5  { margin-left: 41.66667%; }
.small-offset-6  { margin-left: 50%; }
.small-offset-7  { margin-left: 58.33333%; }
.small-offset-8  { margin-left: 66.66667%; }
.small-offset-9  { margin-left: 75%; }
.small-offset-10 { margin-left: 83.33333%; }
.small-offset-11 { margin-left: 91.66667%; }


/* -- Medium Breakpoint -- */

@media ( min-width: 500px ) {
	.medium-0  { width: 0%; }
	.medium-1  { width: 8.33333%; }
	.medium-2  { width: 16.66667%; }
	.medium-3  { width: 25%; }
	.medium-4  { width: 33.33333%; }
	.medium-5  { width: 41.66667%; }
	.medium-6  { width: 50%; }
	.medium-7  { width: 58.33333%; }
	.medium-8  { width: 66.66667%; }
	.medium-9  { width: 75%; }
	.medium-10 { width: 83.33333%; }
	.medium-11 { width: 91.66667%; }
	.medium-12 { width: 100%; }

	.medium-offset-0  { margin-left: 0%; }
	.medium-offset-1  { margin-left: 8.33333%; }
	.medium-offset-2  { margin-left: 16.66667%; }
	.medium-offset-3  { margin-left: 25%; }
	.medium-offset-4  { margin-left: 33.33333%; }
	.medium-offset-5  { margin-left: 41.66667%; }
	.medium-offset-6  { margin-left: 50%; }
	.medium-offset-7  { margin-left: 58.33333%; }
	.medium-offset-8  { margin-left: 66.66667%; }
	.medium-offset-9  { margin-left: 75%; }
	.medium-offset-10 { margin-left: 83.33333%; }
	.medium-offset-11 { margin-left: 91.66667%; }
}


/* -- Large Breakpoint -- */

@media ( min-width: 1000px ) {
	.large-0  { width: 0%; }
	.large-1  { width: 8.33333%; }
	.large-2  { width: 16.66667%; }
	.large-3  { width: 25%; }
	.large-4  { width: 33.33333%; }
	.large-5  { width: 41.66667%; }
	.large-6  { width: 50%; }
	.large-7  { width: 58.33333%; }
	.large-8  { width: 66.66667%; }
	.large-9  { width: 75%; }
	.large-10 { width: 83.33333%; }
	.large-11 { width: 91.66667%; }
	.large-12 { width: 100%; }

	.large-offset-0  { margin-left: 0%; }
	.large-offset-1  { margin-left: 8.33333%; }
	.large-offset-2  { margin-left: 16.66667%; }
	.large-offset-3  { margin-left: 25%; }
	.large-offset-4  { margin-left: 33.33333%; }
	.large-offset-5  { margin-left: 41.66667%; }
	.large-offset-6  { margin-left: 50%; }
	.large-offset-7  { margin-left: 58.33333%; }
	.large-offset-8  { margin-left: 66.66667%; }
	.large-offset-9  { margin-left: 75%; }
	.large-offset-10 { margin-left: 83.33333%; }
	.large-offset-11 { margin-left: 91.66667%; }
}


/* -- Extra Large Breakpoint -- */

@media ( min-width: 1500px ) {
	.xlarge-0  { width: 0%; }
	.xlarge-1  { width: 8.33333%; }
	.xlarge-2  { width: 16.66667%; }
	.xlarge-3  { width: 25%; }
	.xlarge-4  { width: 33.33333%; }
	.xlarge-5  { width: 41.66667%; }
	.xlarge-6  { width: 50%; }
	.xlarge-7  { width: 58.33333%; }
	.xlarge-8  { width: 66.66667%; }
	.xlarge-9  { width: 75%; }
	.xlarge-10 { width: 83.33333%; }
	.xlarge-11 { width: 91.66667%; }
	.xlarge-12 { width: 100%; }

	.xlarge-offset-0  { margin-left: 0%; }
	.xlarge-offset-1  { margin-left: 8.33333%; }
	.xlarge-offset-2  { margin-left: 16.66667%; }
	.xlarge-offset-3  { margin-left: 25%; }
	.xlarge-offset-4  { margin-left: 33.33333%; }
	.xlarge-offset-5  { margin-left: 41.66667%; }
	.xlarge-offset-6  { margin-left: 50%; }
	.xlarge-offset-7  { margin-left: 58.33333%; }
	.xlarge-offset-8  { margin-left: 66.66667%; }
	.xlarge-offset-9  { margin-left: 75%; }
	.xlarge-offset-10 { margin-left: 83.33333%; }
	.xlarge-offset-11 { margin-left: 91.66667%; }
}



/* -- Spacing -- */

.space-0	{ padding: 0; }
.space-min	{ padding: var(--space-min); }
.space-25	{ padding: var(--space-25); }
.space-50	{ padding: var(--space-50); }
.space-75	{ padding: var(--space-75); }
.space-100	{ padding: var(--space-100); }
.space-125	{ padding: var(--space-125); }
.space-150	{ padding: var(--space-150); }
.space-175	{ padding: var(--space-175); }
.space-200	{ padding: var(--space-200); }
.space-250	{ padding: var(--space-250); }
.space-300	{ padding: var(--space-300); }
.space-400	{ padding: var(--space-400); }

.space-0-vertical	{ padding-top: 0; padding-bottom: 0; }
.space-min-vertical	{ padding-top: var(--space-min); padding-bottom: var(--space-min); }
.space-25-vertical	{ padding-top: var(--space-25); padding-bottom: var(--space-25); }
.space-50-vertical	{ padding-top: var(--space-50); padding-bottom: var(--space-50); }
.space-75-vertical	{ padding-top: var(--space-75); padding-bottom: var(--space-75); }
.space-100-vertical	{ padding-top: var(--space-100); padding-bottom: var(--space-100); }
.space-125-vertical	{ padding-top: var(--space-125); padding-bottom: var(--space-125); }
.space-150-vertical	{ padding-top: var(--space-150); padding-bottom: var(--space-150); }
.space-175-vertical	{ padding-top: var(--space-175); padding-bottom: var(--space-175); }
.space-200-vertical	{ padding-top: var(--space-200); padding-bottom: var(--space-200); }
.space-250-vertical	{ padding-top: var(--space-250); padding-bottom: var(--space-250); }
.space-300-vertical	{ padding-top: var(--space-300); padding-bottom: var(--space-300); }
.space-400-vertical	{ padding-top: var(--space-400); padding-bottom: var(--space-400); }

.space-0-horizontal		{ padding-left: 0; padding-right: 0; }
.space-min-horizontal	{ padding-left: var(--space-min); padding-right: var(--space-min); }
.space-25-horizontal	{ padding-left: var(--space-25); padding-right: var(--space-25); }
.space-50-horizontal	{ padding-left: var(--space-50); padding-right: var(--space-50); }
.space-75-horizontal	{ padding-left: var(--space-75); padding-right: var(--space-75); }
.space-100-horizontal	{ padding-left: var(--space-100); padding-right: var(--space-100); }
.space-125-horizontal	{ padding-left: var(--space-125); padding-right: var(--space-125); }
.space-150-horizontal	{ padding-left: var(--space-150); padding-right: var(--space-150); }
.space-175-horizontal	{ padding-left: var(--space-175); padding-right: var(--space-175); }
.space-200-horizontal	{ padding-left: var(--space-200); padding-right: var(--space-200); }
.space-250-horizontal	{ padding-left: var(--space-250); padding-right: var(--space-250); }
.space-300-horizontal	{ padding-left: var(--space-300); padding-right: var(--space-300); }
.space-400-horizontal	{ padding-left: var(--space-400); padding-right: var(--space-400); }

.space-0-top	{ padding-top: 0; }
.space-min-top	{ padding-top: var(--space-min); }
.space-25-top	{ padding-top: var(--space-25); }
.space-50-top	{ padding-top: var(--space-50); }
.space-75-top	{ padding-top: var(--space-75); }
.space-100-top	{ padding-top: var(--space-100); }
.space-125-top	{ padding-top: var(--space-125); }
.space-150-top	{ padding-top: var(--space-150); }
.space-175-top	{ padding-top: var(--space-175); }
.space-200-top	{ padding-top: var(--space-200); }
.space-250-top	{ padding-top: var(--space-250); }
.space-300-top	{ padding-top: var(--space-300); }
.space-400-top	{ padding-top: var(--space-400); }

.space-0-right		{ padding-right: 0; }
.space-min-right	{ padding-right: var(--space-min); }
.space-25-right		{ padding-right: var(--space-25); }
.space-50-right		{ padding-right: var(--space-50); }
.space-75-right		{ padding-right: var(--space-75); }
.space-100-right	{ padding-right: var(--space-100); }
.space-125-right	{ padding-right: var(--space-125); }
.space-150-right	{ padding-right: var(--space-150); }
.space-175-right	{ padding-right: var(--space-175); }
.space-200-right	{ padding-right: var(--space-200); }
.space-250-right	{ padding-right: var(--space-250); }
.space-300-right	{ padding-right: var(--space-300); }
.space-400-right	{ padding-right: var(--space-400); }

.space-0-bottom		{ padding-bottom: 0; }
.space-min-bottom	{ padding-bottom: var(--space-min); }
.space-25-bottom	{ padding-bottom: var(--space-25); }
.space-50-bottom	{ padding-bottom: var(--space-50); }
.space-75-bottom	{ padding-bottom: var(--space-75); }
.space-100-bottom	{ padding-bottom: var(--space-100); }
.space-125-bottom	{ padding-bottom: var(--space-125); }
.space-150-bottom	{ padding-bottom: var(--space-150); }
.space-175-bottom	{ padding-bottom: var(--space-175); }
.space-200-bottom	{ padding-bottom: var(--space-200); }
.space-250-bottom	{ padding-bottom: var(--space-250); }
.space-300-bottom	{ padding-bottom: var(--space-300); }
.space-400-bottom	{ padding-bottom: var(--space-400); }

.space-0-left	{ padding-left: 0; }
.space-min-left	{ padding-left: var(--space-min); }
.space-25-left	{ padding-left: var(--space-25); }
.space-50-left	{ padding-left: var(--space-50); }
.space-75-left	{ padding-left: var(--space-75); }
.space-100-left	{ padding-left: var(--space-100); }
.space-125-left	{ padding-left: var(--space-125); }
.space-150-left	{ padding-left: var(--space-150); }
.space-175-left	{ padding-left: var(--space-175); }
.space-200-left	{ padding-left: var(--space-200); }
.space-250-left	{ padding-left: var(--space-250); }
.space-300-left	{ padding-left: var(--space-300); }
.space-400-left	{ padding-left: var(--space-400); }




/* --- Float Layout (Legacy) --- */

.float-right { float: right; }
.float-left { float: left; }

/*
 * Clearfix: contain floats (Legacy)
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}