/* UTILITY CLASSES  */

.hidden {
	display: none;
	visibility: visible
}

.inline {
	display: inline;
}

.block {
	display: block;
}

.flex {
	display: flex;
}

.grid {
	display: grid;
}

.center-content {
	text-align: center;
}

.img-fluid {
	max-width: 100%;
	height: auto;
}

.w-100 {
	width: 100%;
}

.h-100 {
	height: 100%;
}

/* Helper */

.color-red {
	color: red;
}

.color-blue {
	color: blue;
}

.bg-red {
	background: red;
}

.bg-blue {
	background: blue;
}

.border-red {
	border: 1px solid red;
}

.border-blue {
	border: 1px solid blue;
}




/* ROWS */


.row {
	--gap-x: 40px;
	--gap-y: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-y) 0;
	margin-right: calc(var(--gap-x) * -.5);
	margin-left: calc(var(--gap-x) * -.5);
}

.gx-0 {
	--gap-x: 0;
}

.gy-0 {
	--gap-y: 0;
}


@media (max-width:600px) {
	.row {
		--gap-x: 25px;
		--gap-y: 25px;
	}
}


/* COLUMNS */


[class*=col-] {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: calc(var(--gap-x) * .5);
	padding-left: calc(var(--gap-x) * .5);

}

.col {
	flex-basis: 0;
	flex-grow: 1;
	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%;
}

.offset-0 {
	margin-left: 0;
}

.offset-1 {
	margin-left: 8.33333333%;
}

.offset-2 {
	margin-left: 16.66666667%;
}

.offset-3 {
	margin-left: 25%;
}

.offset-4 {
	margin-left: 33.33333333%;
}

.offset-5 {
	margin-left: 41.66666667%;
}

.offset-6 {
	margin-left: 50%;
}

.offset-7 {
	margin-left: 58.33333333%;
}

.offset-8 {
	margin-left: 66.66666667%;
}

.offset-9 {
	margin-left: 75%;
}

.offset-10 {
	margin-left: 83.33333333%;
}

.offset-11 {
	margin-left: 91.66666667%;
}


@media (max-width:1024px) {

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

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

	.col-lg-2 {
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-lg-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-lg-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-lg-5 {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-lg-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-lg-7 {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-lg-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-lg-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-lg-10 {
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-lg-11 {
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

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

	.offset-lg-0 {
		margin-left: 0;
	}

	.offset-lg-1 {
		margin-left: 8.33333333%;
	}

	.offset-lg-2 {
		margin-left: 16.66666667%;
	}

	.offset-lg-3 {
		margin-left: 25%;
	}

	.offset-lg-4 {
		margin-left: 33.33333333%;
	}

	.offset-lg-5 {
		margin-left: 41.66666667%;
	}

	.offset-lg-6 {
		margin-left: 50%;
	}

	.offset-lg-7 {
		margin-left: 58.33333333%;
	}

	.offset-lg-8 {
		margin-left: 66.66666667%;
	}

	.offset-lg-9 {
		margin-left: 75%;
	}

	.offset-lg-10 {
		margin-left: 83.33333333%;
	}

	.offset-lg-11 {
		margin-left: 91.66666667%;
	}

	.lg-hidden {
		display: none;
		visibility: visible
	}

	.lg-block {
		display: block;
		visibility: visible;
	}

}


@media (max-width: 840px) {

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

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

	.col-md-2 {
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-md-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-md-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-md-5 {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-md-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-md-7 {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-md-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-md-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-md-10 {
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-md-11 {
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

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

	.offset-md-0 {
		margin-left: 0;
	}

	.offset-md-1 {
		margin-left: 8.33333333%;
	}

	.offset-md-2 {
		margin-left: 16.66666667%;
	}

	.offset-md-3 {
		margin-left: 25%;
	}

	.offset-md-4 {
		margin-left: 33.33333333%;
	}

	.offset-md-5 {
		margin-left: 41.66666667%;
	}

	.offset-md-6 {
		margin-left: 50%;
	}

	.offset-md-7 {
		margin-left: 58.33333333%;
	}

	.offset-md-8 {
		margin-left: 66.66666667%;
	}

	.offset-md-9 {
		margin-left: 75%;
	}

	.offset-md-10 {
		margin-left: 83.33333333%;
	}

	.offset-md-11 {
		margin-left: 91.66666667%;
	}

	.md-hidden {
		display: none;
		visibility: visible
	}

	.md-block {
		display: block;
		visibility: visible;
	}

}

@media (max-width:600px) {

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

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

	.col-sm-2 {
		flex: 0 0 16.666667%;
		max-width: 16.666667%;
	}

	.col-sm-3 {
		flex: 0 0 25%;
		max-width: 25%;
	}

	.col-sm-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}

	.col-sm-5 {
		flex: 0 0 41.666667%;
		max-width: 41.666667%;
	}

	.col-sm-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.col-sm-7 {
		flex: 0 0 58.333333%;
		max-width: 58.333333%;
	}

	.col-sm-8 {
		flex: 0 0 66.666667%;
		max-width: 66.666667%;
	}

	.col-sm-9 {
		flex: 0 0 75%;
		max-width: 75%;
	}

	.col-sm-10 {
		flex: 0 0 83.333333%;
		max-width: 83.333333%;
	}

	.col-sm-11 {
		flex: 0 0 91.666667%;
		max-width: 91.666667%;
	}

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

	.offset-sm-0 {
		margin-left: 0;
	}

	.offset-sm-1 {
		margin-left: 8.33333333%;
	}

	.offset-sm-2 {
		margin-left: 16.66666667%;
	}

	.offset-sm-3 {
		margin-left: 25%;
	}

	.offset-sm-4 {
		margin-left: 33.33333333%;
	}

	.offset-sm-5 {
		margin-left: 41.66666667%;
	}

	.offset-sm-6 {
		margin-left: 50%;
	}

	.offset-sm-7 {
		margin-left: 58.33333333%;
	}

	.offset-sm-8 {
		margin-left: 66.66666667%;
	}

	.offset-sm-9 {
		margin-left: 75%;
	}

	.offset-sm-10 {
		margin-left: 83.33333333%;
	}

	.offset-sm-11 {
		margin-left: 91.66666667%;
	}


	.sm-hidden {
		display: none !important;
		visibility: visible
	}

	.sm-block {
		display: block;
		visibility: visible;
	}

}

/* ------------------------------------------------------------------------------------------------- */

/* Margin */

.m-0 {
	margin: 0;
}

.mt-0 {
	margin-top: 0;
}

.mb-0 {
	margin-bottom: 0;
}

.ml-0 {
	margin-left: 0;
}

.mr-0 {
	margin-right: 0;
}

.mx-0 {
	margin-inline: 0;
}

.my-0 {
	margin-block: 0;
}

/* Padding */

.p-0 {
	padding: 0;
}

.pt-0 {
	padding-top: 0;
}

.pb-0 {
	padding-bottom: 0;
}

.pl-0 {
	padding-left: 0;
}

.pr-0 {
	padding-right: 0;
}

.px-0 {
	padding-inline: 0;
}

.py-0 {
	padding-block: 0;
}