/* 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: 30px;
	--gap-y: 30px;
	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; }


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


@media (max-width:980px) {

	.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%;
	}


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

}


@media (max-width:782px) {

	.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%;
	}

	.md-hidden {
		display: none;
		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%;
	}

	.sm-hidden {
		display: none!important;
		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; }

.m-1   { margin: 		var(--space-1); }
.mt-1  { margin-top: 	var(--space-1); }
.mb-1  { margin-bottom: var(--space-1); }
.ml-1  { margin-left: 	var(--space-1); }
.mr-1  { margin-right: 	var(--space-1); }
.mx-1  { margin-inline: var(--space-1); }
.mx-1  { margin-block: 	var(--space-1); }

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


.p-1   { padding: 		 var(--space-1); }
.pt-1  { padding-top: 	 var(--space-1); }
.pb-1  { padding-bottom: var(--space-1); }
.pl-1  { padding-left: 	 var(--space-1); }
.pr-1  { padding-right:	 var(--space-1); }
.px-1  { padding-inline: var(--space-1); }
.px-1  { padding-block:  var(--space-1); }