/* Grid
--------------------------------------------------------- */
.container {
	position: relative;
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--gap-default);
	box-sizing: border-box;
}
.container.xlarge {max-width: 100%;padding-left: var(--gap-default);padding-right: var(--gap-default);}
.container.small {max-width: var(--container-width-s);}
.container.xsmall {max-width: var(--container-width-xs);}
.container.xxsmall {max-width: var(--container-width-xxs);}

.grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: var(--gap-default);
	width: 100%;
}
.flex-row { display: flex; }

/* 1 column below 768px */
.column {
	width: 100%;
	min-height: 1px;
	grid-column: span 1;
}
.v-start 			{ align-items: start; }
.v-center 			{ align-items: center; }
.v-end 				{ align-items: end; }
.h-start 			{ justify-content: start; }
.h-center 			{ justify-content: center; }
.h-end 				{ justify-content: end; }
.h-space-between 	{justify-content: space-between};

.flex-direction-column {flex-direction:column;}

/* 2 columns above 767px */
@media (min-width: 768px) {
	.grid { grid-template-columns: repeat(6, 1fr); }
	.column { grid-column: span 3; }
	.twelve.column { grid-column: span 6; }
	.container.xlarge {padding-left: 4rem;padding-right: 4rem;}
}
/* set columns above 1080px */
@media (min-width: 1081px) {
	.grid { grid-template-columns: repeat(12, 1fr); }
	.one.column 	{ grid-column: span 1; }
	.two.column 	{ grid-column: span 2; }
	.three.column 	{ grid-column: span 3; }
	.four.column 	{ grid-column: span 4; }
	.five.column 	{ grid-column: span 5; }
	.six.column 	{ grid-column: span 6; }
	.seven.column 	{ grid-column: span 7; }
	.eight.column 	{ grid-column: span 8; }
	.nine.column 	{ grid-column: span 9; }
	.ten.column 	{ grid-column: span 10; }
	.eleven.column 	{ grid-column: span 11; }
	.start-at-1.end-at-13.column,
	.twelve.column 	{ grid-column: span 12;	}
	.container.xlarge {padding-left: 8rem;padding-right: 8rem;}

	/*
	12 GRID LAYOUT

	Columns: 

	   1     2     3     4     5     6     7     8     9    10    11    12
	 ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- ----- -----
	1     2     3     4     5     6     7     8     9     10    11    12    13

	Column Start and End points

	*/

	.start-at-1.column 	{ grid-column-start: 1; }
	.start-at-2.column 	{ grid-column-start: 2; }
	.start-at-3.column 	{ grid-column-start: 3; }
	.start-at-4.column 	{ grid-column-start: 4; }
	.start-at-5.column 	{ grid-column-start: 5; }
	.start-at-6.column 	{ grid-column-start: 6; }
	.start-at-7.column 	{ grid-column-start: 7; }
	.start-at-8.column 	{ grid-column-start: 8; }
	.start-at-9.column 	{ grid-column-start: 9; }
	.start-at-10.column { grid-column-start: 10; }
	.start-at-11.column { grid-column-start: 11; }
	.start-at-12.column { grid-column-start: 12; }

	.end-at-2.column 	{ grid-column-end: 2; }
	.end-at-3.column 	{ grid-column-end: 3; }
	.end-at-4.column 	{ grid-column-end: 4; }
	.end-at-5.column 	{ grid-column-end: 5; }
	.end-at-6.column 	{ grid-column-end: 6; }
	.end-at-7.column 	{ grid-column-end: 7; }
	.end-at-8.column 	{ grid-column-end: 8; }
	.end-at-9.column 	{ grid-column-end: 9; }
	.end-at-10.column 	{ grid-column-end: 10; }
	.end-at-11.column 	{ grid-column-end: 11; }
	.end-at-12.column 	{ grid-column-end: 12; }
	.end-at-13.column 	{ grid-column-end: 13; }
}

/* Floating Grid
--------------------------------------------------------- */
.floating-row {
	width: 100%;
	text-align: center;	
}
/* 1 column below 768px */
.floating-column {
	width: 100%;
	min-height: 1px;
	display: inline-block;
	vertical-align: top;
	margin-bottom: var(--gap-default);
}
/* 2 columns above 767px */
@media (min-width: 768px) {
	.floating-row {
		margin-left: calc(var(--gap-half) * -1);
		margin-right: calc(var(--gap-half) * -1);
		width: calc(100% + var(--gap-default));
	}
	.floating-column.one,
	.floating-column.two,
	.floating-column.three,
	.floating-column.four,
	.floating-column.five,
	.floating-column.six {
		width:50%;			
		padding-left: var(--gap-half);
		padding-right: var(--gap-half);
	}
}
/* set columns above 1080px */
@media (min-width: 1081px) {
	.floating-column.one 	{ width:calc(100% / 12); }
	.floating-column.two 	{ width:calc(100% / 12 * 2); }
	.floating-column.three 	{ width:calc(100% / 12 * 3); }
	.floating-column.four 	{ width:calc(100% / 3); }
	.floating-column.five 	{ width:calc(100% / 12 * 5); }
	.floating-column.six 	{ width:50%; }
	.floating-column.seven 	{ width:calc(100% / 12 * 7); }
	.floating-column.eight 	{ width:calc(100% / 12 * 8); }
	.floating-column.nine 	{ width:calc(100% / 12 * 9); }
	.floating-column.ten 	{ width:calc(100% / 12 * 10); }
	.floating-column.eleven { width:calc(100% / 12 * 11); }
	.floating-column.twelve { width:100%; }
}