/* Grid
--------------------------------------------------------- */
.container {
	position: relative;
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--gap-default);
	box-sizing: border-box;
}
.container.fullwidth 	{max-width: 100%;padding-left: 0;padding-right: 0;}
.container.xlarge 		{max-width: 100%;padding-left: var(--space-s);padding-right: var(--space-s);}
.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-s-4,
.grid-s-3,
.grid-s-2,
.grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: var(--gap-default);
	width: 100%;
}
.grid.no-gap {
	grid-gap: 0;
}
.grid-xs-4 { grid-template-columns: repeat(4, 1fr); }
.grid-xs-3 { grid-template-columns: repeat(3, 1fr); }
.grid-xs-2 { grid-template-columns: repeat(2, 1fr); }
.grid-xs-1 { grid-template-columns: repeat(1, 1fr); }

.flex-row { display: flex; }
.flex-column {
	min-height: 1px;
	width: 100%;
	position: relative;
}

	/* Breakpoints
	 * 
	 * xs 	= 0px - 428px
	 * s 	= 429px - 767px
	 * m	= 768px - 1024px
	 * l	= 1025px - 1200px
	 * xl	= 1201px+
	 */


/* 1 column below 768px */
.column {
	width: 100%;
	min-height: 1px;
	grid-column: span 1;
}
.column.empty-col {display:none;}

.col-xs-1	{ grid-column: span 1;  }
.col-xs-2	{ grid-column: span 2;  }
.col-xs-3	{ grid-column: span 3;  }
.col-xs-4	{ grid-column: span 4;  }
/*
.col-xs-5	{ grid-column: span 5;  }
.col-xs-6	{ grid-column: span 6;  }
.col-xs-7	{ grid-column: span 7;  }
.col-xs-8	{ grid-column: span 8;  }
.col-xs-9	{ grid-column: span 9;  }
.col-xs-10	{ grid-column: span 10; }
.col-xs-11	{ grid-column: span 11; }
.col-xs-12	{ grid-column: span 12; }
*/
.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; }
/* columns above 429px */
@media (min-width: 429px) {
	.grid-xs-4,
	.grid-xs-3,
	.grid-xs-2,
	.grid-xs-1 { grid-template-columns: repeat(1, 1fr); }
	
	.grid-s-4 	{ grid-template-columns: repeat(4, 1fr); }
	.grid-s-3 	{ grid-template-columns: repeat(3, 1fr); }
	.grid-s-2 	{ grid-template-columns: repeat(2, 1fr); }
	
	.col-s-1	{ grid-column: span 1; }
	.col-s-2	{ grid-column: span 2; }
	.col-s-3	{ grid-column: span 3; }
	.col-s-4	{ grid-column: span 4; }
	/*
	.col-s-5	{ grid-column: span 5;  }
	.col-s-6	{ grid-column: span 6;  }
	.col-s-7	{ grid-column: span 7;  }
	.col-s-8	{ grid-column: span 8;  }
	.col-s-9	{ grid-column: span 9;  }
	.col-s-10	{ grid-column: span 10; }
	.col-s-11	{ grid-column: span 11; }
	.col-s-12	{ grid-column: span 12; }
	*/
}
/* 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; }
	
	.col-m-1	{ grid-column: span 1;  }
	.col-m-2	{ grid-column: span 2;  }
	.col-m-3	{ grid-column: span 3;  }
	.col-m-4	{ grid-column: span 4;  }
	.col-m-5	{ grid-column: span 5;  }
	.col-m-6	{ grid-column: span 6;  }
	/*
	.col-s-7	{ grid-column: span 7;  }
	.col-s-8	{ grid-column: span 8;  }
	.col-s-9	{ grid-column: span 9;  }
	.col-s-10	{ grid-column: span 10; }
	.col-s-11	{ grid-column: span 11; }
	.col-s-12	{ grid-column: span 12; }
	
	.col-s-1,
	.col-s-2	{ grid-column: span 1;  }
	.col-s-3,
	.col-s-4	{ grid-column: span 2;  }
	.col-s-5,
	.col-s-6	{ grid-column: span 3;  }
	.col-s-7,
	.col-s-8	{ grid-column: span 4;  }
	.col-s-9,
	.col-s-10	{ grid-column: span 5; }
	.col-s-11,
	.col-s-12	{ grid-column: span 6; }
	*/
}
/* set columns above 1024px */
@media (min-width: 1025px) {
	.column.empty-col {display:block;}
	.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;}
	.col-start-1.col-end-13.column,
	.twelve.column 	{ grid-column: span 12;}
	
	.col-l-1	{ grid-column: span 1;  }
	.col-l-2	{ grid-column: span 2;  }
	.col-l-3	{ grid-column: span 3;  }
	.col-l-4	{ grid-column: span 4;  }
	.col-l-5	{ grid-column: span 5;  }
	.col-l-6	{ grid-column: span 6;  }
	.col-l-7	{ grid-column: span 7;  }
	.col-l-8	{ grid-column: span 8;  }
	.col-l-9	{ grid-column: span 9;  }
	.col-l-10	{ grid-column: span 10; }
	.col-l-11	{ grid-column: span 11; }
	.col-l-12	{ grid-column: span 12; }
	
	/*
	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
	*/
	/* col-start */
	.col-start-1.column 	{ grid-column-start: 1; }
	.col-start-2.column 	{ grid-column-start: 2; }
	.col-start-3.column 	{ grid-column-start: 3; }
	.col-start-4.column 	{ grid-column-start: 4; }
	.col-start-5.column 	{ grid-column-start: 5; }
	.col-start-6.column 	{ grid-column-start: 6; }
	.col-start-7.column 	{ grid-column-start: 7; }
	.col-start-8.column 	{ grid-column-start: 8; }
	.col-start-9.column 	{ grid-column-start: 9; }
	.col-start-10.column 	{ grid-column-start: 10;}
	.col-start-11.column 	{ grid-column-start: 11;}
	.col-start-12.column 	{ grid-column-start: 12;}
	/* col-end */
	.col-end-2.column 	{ grid-column-end: 2; }
	.col-end-3.column 	{ grid-column-end: 3; }
	.col-end-4.column 	{ grid-column-end: 4; }
	.col-end-5.column 	{ grid-column-end: 5; }
	.col-end-6.column 	{ grid-column-end: 6; }
	.col-end-7.column 	{ grid-column-end: 7; }
	.col-end-8.column 	{ grid-column-end: 8; }
	.col-end-9.column 	{ grid-column-end: 9; }
	.col-end-10.column 	{ grid-column-end: 10;}
	.col-end-11.column 	{ grid-column-end: 11;}
	.col-end-12.column 	{ grid-column-end: 12;}
	.col-end-13.column 	{ grid-column-end: 13;}
	/* col-span */
	.col-span-1.column 	{ grid-column-end: span 1; }
	.col-span-2.column 	{ grid-column-end: span 2; }
	.col-span-3.column 	{ grid-column-end: span 3; }
	.col-span-4.column 	{ grid-column-end: span 4; }
	.col-span-5.column 	{ grid-column-end: span 5; }
	.col-span-6.column 	{ grid-column-end: span 6; }
	.col-span-7.column 	{ grid-column-end: span 7; }
	.col-span-8.column 	{ grid-column-end: span 8; }
	.col-span-9.column 	{ grid-column-end: span 9; }
	.col-span-10.column { grid-column-end: span 10;}
	.col-span-11.column { grid-column-end: span 11;}
	.col-span-12.column { grid-column-end: span 12;}
}
.column.col-reverse {
	grid-column-end: -1;
}
@media (min-width: 1280px) {
	.col-xl-1	{ grid-column: span 1;  }
	.col-xl-2	{ grid-column: span 2;  }
	.col-xl-3	{ grid-column: span 3;  }
	.col-xl-4	{ grid-column: span 4;  }
	.col-xl-5	{ grid-column: span 5;  }
	.col-xl-6	{ grid-column: span 6;  }
	.col-xl-7	{ grid-column: span 7;  }
	.col-xl-8	{ grid-column: span 8;  }
	.col-xl-9	{ grid-column: span 9;  }
	.col-xl-10	{ grid-column: span 10; }
	.col-xl-11	{ grid-column: span 11; }
	.col-xl-12	{ grid-column: span 12; }
}


/* 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 1024px */
@media (min-width: 1025px) {
	.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%; }
}