/* 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(--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-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; }

	/* Breakpoints
	 * 
	 * xs 	= 0px - 428px
	 * s 	= 429px - 767px
	 * m	= 768px - 1080px
	 * l	= 1081px - 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; }
	.container.xlarge {padding-left: calc(var(--gap-default) * 2);padding-right: calc(var(--gap-default) * 2);}
	
	.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 1080px */
@media (min-width: 1081px) {
	.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; }
	/* .start-at-1.end-at-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; }
	
	.container.xlarge {padding-left: calc(var(--gap-default) * 4);padding-right: calc(var(--gap-default) * 4);}

	/*
	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; }
	.start-at-13.column { grid-column-start: 13; }
	.start-at-14.column { grid-column-start: 14; }
	.start-at-15.column { grid-column-start: 15; }
	.start-at-16.column { grid-column-start: 16; }
	.start-at-17.column { grid-column-start: 17; }
	.start-at-18.column { grid-column-start: 18; }
	.start-at-19.column { grid-column-start: 19; }
	.start-at-20.column { grid-column-start: 20; }
	.start-at-21.column { grid-column-start: 21; }
	.start-at-22.column { grid-column-start: 22; }
	.start-at-23.column { grid-column-start: 23; }
	.start-at-24.column { grid-column-start: 24; }

	.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; }
	.end-at-14.column 	{ grid-column-end: 14; }
	.end-at-15.column 	{ grid-column-end: 15; }
	.end-at-16.column 	{ grid-column-end: 16; }
	.end-at-17.column 	{ grid-column-end: 17; }
	.end-at-18.column 	{ grid-column-end: 18; }
	.end-at-19.column 	{ grid-column-end: 19; }
	.end-at-20.column 	{ grid-column-end: 20; }
	.end-at-21.column 	{ grid-column-end: 21; }
	.end-at-22.column 	{ grid-column-end: 22; }
	.end-at-23.column 	{ grid-column-end: 23; }
	.end-at-24.column 	{ grid-column-end: 24; }
	.end-at-25.column 	{ grid-column-end: 25; }
}
.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 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%; }
}