/* default settings (mobile-first) */
body {
	--glbl-max-width:100vw;
	--glbl-padding:1.5rem;
}
html {
/*	scrollbar-width:thin; */ /* prevent scrollbar left-content-shift issue */
}

/* ---------------------------------------------------------------------------
BEGIN grid definition styles
----------------------------------------------------------------------------*/
.grid-container {
	display:block;
	margin:auto;
	width:auto;
	max-width:var(--glbl-max-width);
	padding:0rem var(--glbl-padding) 0rem var(--glbl-padding);
}
.grid {
	display:inline-flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:stretch;
	flex-wrap:wrap;
	width:100%;
}
.grid > .cell {
	display:block;
/*	height:100%; */
	width:100%;
}
.grid > .cell.hidden {
	display:none;
}
.grid.grid-padding {
	margin:0rem calc(0rem - var(--glbl-padding)) calc(0rem - var(--glbl-padding)) 0rem;
	width:calc(100% + var(--glbl-padding));
}
.grid.grid-padding > .cell {
	padding:0rem var(--glbl-padding) var(--glbl-padding) 0rem;
}
.grid > .cell.small-1 {
	width:8.3333%;
}
.grid > .cell.small-2 {
	width:16.6666%;
}
.grid > .cell.small-3 {
	width:25%;
}
.grid > .cell.small-4 {
	width:33.3333%;
}
.grid > .cell.small-5 {
	width:41.6666%;
}
.grid > .cell.small-6 {
	width:50%;
}
.grid > .cell.small-7 {
	width:58.3333%;
}
.grid > .cell.small-8 {
	width:66.6666%;
}
.grid > .cell.small-9 {
	width:75%;
}
.grid > .cell.small-10 {
	width:83.3333%;
}
.grid > .cell.small-11 {
	width:91.6666%;
}
.grid > .cell.small-12 {
	width:100%;
}
/* ---------------------------------------------------------------------------
END grid definition styles
----------------------------------------------------------------------------*/


/* ---------------------------------------------------------------------------
BEGIN medium and large display adjustments (mobile is default)
----------------------------------------------------------------------------*/
@media all and (min-width:768px) { /* $screen-size-medium */
	/* desktop default settings, where different from mobile */
	body {
		--glbl-max-width:1200px;
	}
	
	.hidden-on-medium {
		display:none;
	}
	.grid > .cell.hidden-on-medium {
		display:none;
	}
	.shown-on-medium, .hidden.shown-on-medium {
		display:inline-block;
	}
	.grid > .cell.shown-on-medium,
	.grid > .cell.hidden.shown-on-medium {
		display:block;
	}
	
	/* ---------------------------------------------------------------------------
	BEGIN grid definition styles
	----------------------------------------------------------------------------*/
	.grid > .cell.medium-1 {
		width:8.3333%;
	}
	.grid > .cell.medium-2 {
		width:16.6666%;
	}
	.grid > .cell.medium-3 {
		width:25%;
	}
	.grid > .cell.medium-4 {
		width:33.3333%;
	}
	.grid > .cell.medium-5 {
		width:41.6666%;
	}
	.grid > .cell.medium-6 {
		width:50%;
	}
	.grid > .cell.medium-7 {
		width:58.3333%;
	}
	.grid > .cell.medium-8 {
		width:66.6666%;
	}
	.grid > .cell.medium-9 {
		width:75%;
	}
	.grid > .cell.medium-10 {
		width:83.3333%;
	}
	.grid > .cell.medium-11 {
		width:91.6666%;
	}
	.grid > .cell.medium-12 {
		width:100%;
	}
	.cell.halign-l {
		text-align:left;
		display:flex;
		align-items:center;
		justify-content:flex-start;
	}
	.cell.halign-l > *:not(:last-child) {
		margin-right:var(--glbl-padding);
	}

	.cell.halign-r {
		text-align:right;
		display:flex;
		align-items:center;
		justify-content:flex-end;
	}
	.cell.halign-r > *:not(:first-child) {
		margin-left:var(--glbl-padding);
	}
	/* ---------------------------------------------------------------------------
	END grid definition styles
	----------------------------------------------------------------------------*/
}
@media all and (min-width:1024px) { /* $screen-size-large */
	/* desktop default settings, where different from mobile and medium */
/*
	body {
		--glbl-max-width:1200px;
	}
*/
	
	.hidden-on-large {
		display:none;
	}
	.grid > .cell.hidden-on-large {
		display:none;
	}
	.shown-on-large, .hidden.shown-on-large {
		display:inline-block;
	}
	.grid > .cell.shown-on-large,
	.grid > .cell.hidden.shown-on-large {
		display:block;
	}
	
	/* ---------------------------------------------------------------------------
	BEGIN grid definition styles
	----------------------------------------------------------------------------*/
	.grid > .cell.large-1 {
		width:8.3333%;
	}
	.grid > .cell.large-2 {
		width:16.6666%;
	}
	.grid > .cell.large-3 {
		width:25%;
	}
	.grid > .cell.large-4 {
		width:33.3333%;
	}
	.grid > .cell.large-5 {
		width:41.6666%;
	}
	.grid > .cell.large-6 {
		width:50%;
	}
	.grid > .cell.large-7 {
		width:58.3333%;
	}
	.grid > .cell.large-8 {
		width:66.6666%;
	}
	.grid > .cell.large-9 {
		width:75%;
	}
	.grid > .cell.large-10 {
		width:83.3333%;
	}
	.grid > .cell.large-11 {
		width:91.6666%;
	}
	.grid > .cell.large-12 {
		width:100%;
	}
	/* ---------------------------------------------------------------------------
	END grid definition styles
	----------------------------------------------------------------------------*/
}
@media all and (min-width:1200px) { /* $screen-size-xlarge */
	/* desktop default settings, where different from mobile and medium */
	
	.hidden-on-xlarge {
		display:none;
	}
	.grid > .cell.hidden-on-xlarge {
		display:none;
	}
	.shown-on-xlarge, .hidden.shown-on-xlarge {
		display:inline-block;
	}
	.grid > .cell.shown-on-xlarge,
	.grid > .cell.hidden.shown-on-xlarge {
		display:block;
	}
	
	/* ---------------------------------------------------------------------------
	BEGIN grid definition styles
	----------------------------------------------------------------------------*/
	.grid > .cell.xlarge-1 {
		width:8.3333%;
	}
	.grid > .cell.xlarge-2 {
		width:16.6666%;
	}
	.grid > .cell.xlarge-3 {
		width:25%;
	}
	.grid > .cell.xlarge-4 {
		width:33.3333%;
	}
	.grid > .cell.xlarge-5 {
		width:41.6666%;
	}
	.grid > .cell.xlarge-6 {
		width:50%;
	}
	.grid > .cell.xlarge-7 {
		width:58.3333%;
	}
	.grid > .cell.xlarge-8 {
		width:66.6666%;
	}
	.grid > .cell.xlarge-9 {
		width:75%;
	}
	.grid > .cell.xlarge-10 {
		width:83.3333%;
	}
	.grid > .cell.xlarge-11 {
		width:91.6666%;
	}
	.grid > .cell.xlarge-12 {
		width:100%;
	}
	/* ---------------------------------------------------------------------------
	END grid definition styles
	----------------------------------------------------------------------------*/
}
/* ---------------------------------------------------------------------------
END medium and large display adjustments (mobile is default)
----------------------------------------------------------------------------*/