:root {
	--container-padding-x: 15px;
	--container-padding-x-md: 1.5rem;
	--container-max-sm: 640px;
	--container-max-md: 768px;
	--container-max-lg: 1200px;
	--container-max-xl: 1200px;
	--container-max-2xl: 1200px;
	--container-narrow-max-width: 48rem;
	--grid-gutter-x: 15px;
	--grid-gutter-x-tight: 0.5rem;
	--stack-gap-4: 1rem;
	--stack-gap-6: 1.5rem;
	--fixed-width-100px: 100px;
}

.container {
	box-sizing: border-box;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding-x);
	padding-right: var(--container-padding-x);
}

.container-fluid {
	box-sizing: border-box;
	width: 100%;
	padding-left: var(--container-padding-x);
	padding-right: var(--container-padding-x);
}

.container-narrow {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-narrow-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding-x);
	padding-right: var(--container-padding-x);
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--grid-gutter-x) * -1);
	margin-right: calc(var(--grid-gutter-x) * -1);
	box-sizing: border-box;
}

.row-tight {
	margin-left: calc(var(--grid-gutter-x-tight) * -1);
	margin-right: calc(var(--grid-gutter-x-tight) * -1);
}

.row-tight > .col,
.row-tight > [class*=" col-"],
.row-tight > [class^="col-"],
.row-tight > [class*=" xs-col-"],
.row-tight > [class^="xs-col-"],
.row-tight > [class*=" sm-col-"],
.row-tight > [class^="sm-col-"],
.row-tight > [class*=" md-col-"],
.row-tight > [class^="md-col-"],
.row-tight > [class*=" lg-col-"],
.row-tight > [class^="lg-col-"] {
	padding-left: var(--grid-gutter-x-tight);
	padding-right: var(--grid-gutter-x-tight);
}

.col,
[class^="col-"],
[class*=" col-"],
[class^="xs-col-"],
[class*=" xs-col-"],
[class^="sm-col-"],
[class*=" sm-col-"],
[class^="md-col-"],
[class*=" md-col-"],
[class^="lg-col-"],
[class*=" lg-col-"] {
	box-sizing: border-box;
	padding-left: var(--grid-gutter-x);
	padding-right: var(--grid-gutter-x);
	min-width: 0;
	width: 100%;
	flex: 0 0 100%;
	max-width: 100%;
}

.col {
	flex: 1 1 0%;
	max-width: 100%;
}

.col-auto {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}

.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

.xs-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.xs-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.xs-col-3 { flex: 0 0 25%; max-width: 25%; }
.xs-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.xs-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.xs-col-6 { flex: 0 0 50%; max-width: 50%; }
.xs-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.xs-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.xs-col-9 { flex: 0 0 75%; max-width: 75%; }
.xs-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.xs-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.xs-col-12 { flex: 0 0 100%; max-width: 100%; }

.xs-col-auto {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}

.visible-xs-block {
	display: none !important;
}

@media (max-width: 767.98px) {
	.visible-xs-block {
		display: block !important;
	}

	.hidden-xs {
		display: none !important;
	}
}

.w-100px {
	width: var(--fixed-width-100px);
	max-width: var(--fixed-width-100px);
	flex: 0 0 var(--fixed-width-100px);
}

.stack-gap-4 > * + * {
	margin-top: var(--stack-gap-4);
}

.stack-gap-6 > * + * {
	margin-top: var(--stack-gap-6);
}

@media (min-width: 640px) {
	.sm-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.sm-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.sm-col-3 { flex: 0 0 25%; max-width: 25%; }
	.sm-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.sm-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.sm-col-6 { flex: 0 0 50%; max-width: 50%; }
	.sm-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.sm-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.sm-col-9 { flex: 0 0 75%; max-width: 75%; }
	.sm-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.sm-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.sm-col-12 { flex: 0 0 100%; max-width: 100%; }

	.sm-col-auto {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
}

@media (min-width: 640px) and (max-width: 767.98px) {
	.hidden-sm {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.md-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.md-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.md-col-3 { flex: 0 0 25%; max-width: 25%; }
	.md-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.md-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.md-col-6 { flex: 0 0 50%; max-width: 50%; }
	.md-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.md-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.md-col-9 { flex: 0 0 75%; max-width: 75%; }
	.md-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.md-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.md-col-12 { flex: 0 0 100%; max-width: 100%; }

	.md-col-auto {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
}

@media (min-width: 1024px) {
	.hidden-lg {
		display: none !important;
	}

	.lg-col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.lg-col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.lg-col-3 { flex: 0 0 25%; max-width: 25%; }
	.lg-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.lg-col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.lg-col-6 { flex: 0 0 50%; max-width: 50%; }
	.lg-col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.lg-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.lg-col-9 { flex: 0 0 75%; max-width: 75%; }
	.lg-col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.lg-col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.lg-col-12 { flex: 0 0 100%; max-width: 100%; }

	.lg-col-auto {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
}

@media (min-width: 640px) {
	.container {
		max-width: var(--container-max-sm);
	}
}

@media (min-width: 768px) {
	.container {
		max-width: var(--container-max-md);
		padding-left: var(--container-padding-x-md);
		padding-right: var(--container-padding-x-md);
	}

	.container-fluid,
	.container-narrow {
		padding-left: var(--container-padding-x-md);
		padding-right: var(--container-padding-x-md);
	}
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.hidden-md {
		display: none !important;
	}
}

@media (min-width: 1024px) {
	.container {
		max-width: var(--container-max-lg);
	}
}

@media (min-width: 1280px) {
	.container {
		max-width: var(--container-max-xl);
	}
}

@media (min-width: 1536px) {
	.container {
		max-width: var(--container-max-2xl);
	}
}