/******/
/*** LAYOUT ***/
/******/

/* DESKTOP */

.grid-container, .grid-container-full {
	width: 100%;
	padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.grid-5 {
	flex: 1 1 2%;
	max-width: 5%;
	min-width: 2%;
}

.grid-10 {
	flex: 1 1 7.5%;
	max-width: 10%;
	min-width: 7.5%;
}

.grid-15 {
	flex: 1 1 14.3%;
	max-width: 15%;
	min-width: 14.3%;
}

.grid-16 {
	flex: 1 1 14.3%;
	max-width: 16.6666%;
	min-width: 14.3%;
}

.grid-20 {
	flex: 1 1 17%;
	max-width: 20%;
	min-width: 17%;
}

.grid-25 {
	flex: 1 1 22%;
	max-width: 25%;
	min-width: 22%;
}

.grid-30 {
	flex: 1 1 25.5%;
	max-width: 30%;
	min-width: 25.5%;
}

.grid-33 {
	flex: 1 1 30%;
	max-width: 33.3333%;
	min-width: 30%;
}

.grid-35 {
	flex: 1 1 33.5%;
	max-width: 35%;
	min-width: 33.5%;
}

.grid-40 {
	flex: 1 1 35%;
	max-width: 40%;
	min-width: 35%;
}

.grid-45 {
	flex: 1 1 42%;
	max-width: 45%;
	min-width: 42%;
}

.grid-50 {
	flex: 1 1 45%;
	max-width: 50%;
	min-width: 45%;
}

.grid-55 {
	flex: 1 1 51%;
	max-width: 55%;
	min-width: 51%;
}

.grid-60 {
	flex: 1 1 52%;
	max-width: 60%;
	min-width: 52%;
}

.grid-65 {
	flex: 1 1 62%;
	max-width: 65%;
	min-width: 62%;
}

.grid-66 {
	flex: 1 1 64%;
	max-width: 66.6666%;
	min-width: 64%;
}

.grid-70 {
	flex: 1 1 67%;
	max-width: 70%;
	min-width: 67%;
}

.grid-75 {
	flex: 1 1 71%;
	max-width: 75%;
	min-width: 71%;
}

.grid-80 {
	flex: 1 1 76%;
	max-width: 80%;
	min-width: 76%;
}

.grid-85 {
	flex: 1 1 81%;
	max-width: 85%;
	min-width: 81%;
}

.grid-90 {
	flex: 1 1 85.5%;
	max-width: 90%;
	min-width: 85.5%;
}

.grid-95 {
	flex: 1 1 92%;
	max-width: 95%;
	min-width: 92%;
}

.grid-100 {
	flex: 1 1 100%;
	max-width: 100%;
	min-width: 100%;
}

/* ALIGNMENT */

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

.text-align-left {
  text-align: left;
}

.text-align-right {
  text-align: right;
}

/* POSITION */

.position-relative {
	position: relative!important;
}

.position-absolute {
	position: absolute!important;
}

.position-fixed {
	position: fixed!important;
}

.top-0 {
	top: 0;
}

.right-0 {
	right: 0;
}

.bottom-0 {
	bottom: 0;
}

.left-0 {
	left: 0;
}

/* DISPLAY NONE */

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

/* Z-INDEX */

.z-index--1 {
	z-index: -1;
}

.z-index-0 {
	z-index: 0;
}

.z-index-1 {
	z-index: 1;
}

.z-index-2 {
	z-index: 2;
}

.z-index-3 {
	z-index: 3;
}

.z-index-4 {
	z-index: 4;
}

.z-index-5 {
	z-index: 5;
}

.z-index-6 {
	z-index: 6;
}

.z-index-7 {
	z-index: 7;
}

.z-index-8 {
	z-index: 8;
}

.z-index-9 {
	z-index: 9;
}

.z-index-10 {
	z-index: 10;
}

@media screen and (min-width: 64.001rem) {

	.hide-on-desktop {
		display: none !important;
	}
	
	.grid-container {
		max-width: 85rem;
	}
	
	/* PREFIX/SUFFIX */
	
	.prefix-5 {
		margin-left: 5%;
	}
	
	.prefix-10 {
		margin-left: 10%;
	}
	
	.prefix-15 {
		margin-left: 15%;
	}
	
	.prefix-20 {
		margin-left: 20%;
	}
	
	.prefix-25 {
		margin-left: 25%;
	}
	
	.prefix-33 {
		margin-left: 33.3333%;
	}
	
	.suffix-5 {
		margin-right: 5%;
	}
	
	.suffix-10 {
		margin-right: 10%;
	}
	
	.suffix-15 {
		margin-right: 15%;
	}
	
	.suffix-20 {
		margin-right: 20%;
	}
	
	.suffix-25 {
		margin-right: 25%;
	}
	
	.suffix-33 {
		margin-right: 33.3333%;
	}
	
}

@media screen and (min-width: 48rem) and (max-width: 64rem) {

	.hide-on-tablet {
		display: none !important;
	}
	
	.tablet-grid-5 {
		flex: 1 1 2%;
		max-width: 5%;
		min-width: 2%;
	}

	.tablet-grid-10 {
		flex: 1 1 7.5%;
		max-width: 10%;
		min-width: 7.5%;
	}

	.tablet-grid-15 {
		flex: 1 1 14.3%;
		max-width: 15%;
		min-width: 14.3%;
	}

	.tablet-grid-16 {
		flex: 1 1 14.3%;
		max-width: 16.6666%;
		min-width: 14.3%;
	}

	.tablet-grid-20 {
		flex: 1 1 17%;
		max-width: 20%;
		min-width: 17%;
	}

	.tablet-grid-25 {
		flex: 1 1 22%;
		max-width: 25%;
		min-width: 22%;
	}

	.tablet-grid-30 {
		flex: 1 1 25.5%;
		max-width: 30%;
		min-width: 25.5%;
	}

	.tablet-grid-33 {
	flex: 1 1 30%;
		max-width: 33.3333%;
		min-width: 30%;
	}

	.tablet-grid-35 {
		flex: 1 1 33.5%;
		max-width: 35%;
		min-width: 33.5%;
	}

	.tablet-grid-40 {
		flex: 1 1 35%;
		max-width: 40%;
		min-width: 35%;
	}

	.tablet-grid-45 {
		flex: 1 1 42%;
		max-width: 45%;
		min-width: 42%;
	}

	.tablet-grid-50 {
		flex: 1 1 45%;
		max-width: 50%;
		min-width: 45%;
	}

	.tablet-grid-55 {
		flex: 1 1 51%;
		max-width: 55%;
		min-width: 51%;
	}

	.tablet-grid-60 {
		flex: 1 1 52%;
		max-width: 60%;
		min-width: 52%;
	}

	.tablet-grid-65 {
		flex: 1 1 62%;
		max-width: 65%;
		min-width: 62%;
	}

	.tablet-grid-66 {
		flex: 1 1 64%;
		max-width: 66.6666%;
		min-width: 64%;
	}

	.tablet-grid-70 {
		flex: 1 1 67%;
		max-width: 70%;
		min-width: 67%;
	}

	.tablet-grid-75 {
		flex: 1 1 71%;
		max-width: 75%;
		min-width: 71%;
	}

	.tablet-grid-80 {
		flex: 1 1 76%;
		max-width: 80%;
		min-width: 76%;
	}

	.tablet-grid-85 {
		flex: 1 1 81%;
		max-width: 85%;
		min-width: 81%;
	}

	.tablet-grid-90 {
		flex: 1 1 85.5%;
		max-width: 90%;
		min-width: 85.5%;
	}

	.tablet-grid-95 {
		flex: 1 1 92%;
		max-width: 95%;
		min-width: 92%;
	}

	.tablet-grid-100 {
		flex: 1 1 100%;
		max-width: 100%;
		min-width: 100%;
	}
	
	/* PREFIX/SUFFIX */
	
	.tablet-prefix-5 {
		margin-left: 5%;
	}
	
	.tablet-prefix-10 {
		margin-left: 10%;
	}
	
	.tablet-prefix-15 {
		margin-left: 15%;
	}
	
	.tablet-prefix-20 {
		margin-left: 20%;
	}
	
	.tablet-prefix-25 {
		margin-left: 25%;
	}
	
	.tablet-prefix-33 {
		margin-left: 33.3333%;
	}
	
	.tablet-prefix-40 {
		margin-left: 40%;
	}
	
	.tablet-prefix-45 {
		margin-left: 45%;
	}
	
	.tablet-suffix-5 {
		margin-right: 5%;
	}
	
	.tablet-suffix-10 {
		margin-right: 10%;
	}
	
	.tablet-suffix-15 {
		margin-right: 15%;
	}
	
	.tablet-suffix-20 {
		margin-right: 20%;
	}
	
	.tablet-suffix-25 {
		margin-right: 25%;
	}
	
	.tablet-suffix-33 {
		margin-right: 33.3333%;
	}
	
	.tablet-suffix-40 {
		margin-right: 40%;
	}
	
	.tablet-suffix-45 {
		margin-right: 45%;
	}
	
}

@media screen and (max-width: 47.999rem) {
	
	.hide-on-mobile {
		display: none !important;
	}
	
	.grid-5, .grid-10, .grid-15, .grid-16, .grid-20, .grid-25, .grid-30, .grid-33, .grid-35, .grid-40, .grid-45, .grid-50, .grid-55, .grid-60, .grid-65, .grid-66, .grid-70, .grid-75, .grid-80, .grid-85, .grid-90, .grid-95, .grid-100 {
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
	}
	
	.mobile-grid-5 {
		flex: 1 1 2%;
		max-width: 5%;
		min-width: 2%;
	}

	.mobile-grid-10 {
		flex: 1 1 7.5%;
		max-width: 10%;
		min-width: 7.5%;
	}

	.mobile-grid-15 {
		flex: 1 1 14.3%;
		max-width: 15%;
		min-width: 14.3%;
	}

	.mobile-grid-16 {
		flex: 1 1 14.3%;
		max-width: 16.6666%;
		min-width: 14.3%;
	}

	.mobile-grid-20 {
		flex: 1 1 17%;
		max-width: 20%;
		min-width: 17%;
	}

	.mobile-grid-25 {
		flex: 1 1 22%;
		max-width: 25%;
		min-width: 22%;
	}

	.mobile-grid-30 {
		flex: 1 1 25.5%;
		max-width: 30%;
		min-width: 25.5%;
	}

	.mobile-grid-33 {
		flex: 1 1 30%;
		max-width: 33.3333%;
		min-width: 30%;
	}

	.mobile-grid-35 {
		flex: 1 1 33.5%;
		max-width: 35%;
		min-width: 33.5%;
	}

	.mobile-grid-40 {
		flex: 1 1 35%;
		max-width: 40%;
		min-width: 35%;
	}

	.mobile-grid-45 {
		flex: 1 1 42%;
		max-width: 45%;
		min-width: 42%;
	}

	.mobile-grid-50 {
		flex: 1 1 45%;
		max-width: 50%;
		min-width: 45%;
	}

	.mobile-grid-55 {
		flex: 1 1 51%;
		max-width: 55%;
		min-width: 51%;
	}

	.mobile-grid-60 {
		flex: 1 1 52%;
		max-width: 60%;
		min-width: 52%;
	}

	.mobile-grid-65 {
		flex: 1 1 62%;
		max-width: 65%;
		min-width: 62%;
	}

	.mobile-grid-66 {
		flex: 1 1 64%;
		max-width: 66.6666%;
		min-width: 64%;
	}

	.mobile-grid-70 {
		flex: 1 1 67%;
		max-width: 70%;
		min-width: 67%;
	}

	.mobile-grid-75 {
		flex: 1 1 71%;
		max-width: 75%;
		min-width: 71%;
	}

	.mobile-grid-80 {
		flex: 1 1 76%;
		max-width: 80%;
		min-width: 76%;
	}

	.mobile-grid-85 {
		flex: 1 1 81%;
		max-width: 85%;
		min-width: 81%;
	}

	.mobile-grid-90 {
		flex: 1 1 85.5%;
		max-width: 90%;
		min-width: 85.5%;
	}

	.mobile-grid-95 {
		flex: 1 1 92%;
		max-width: 95%;
		min-width: 92%;
	}

	.mobile-grid-100 {
		flex: 1 1 100%;
		max-width: 100%;
		min-width: 100%;
	}
	
	/* PREFIX/SUFFIX */
	
	.mobile-prefix-5 {
		margin-left: 5%;
	}
	
	.mobile-prefix-10 {
		margin-left: 10%;
	}
	
	.mobile-prefix-15 {
		margin-left: 15%;
	}
	
	.mobile-prefix-20 {
		margin-left: 20%;
	}
	
	.mobile-prefix-25 {
		margin-left: 25%;
	}
	
	.mobile-prefix-30 {
		margin-left: 30%;
	}
	
	.mobile-prefix-33 {
		margin-left: 33.3333%;
	}
	
	.mobile-prefix-35 {
		margin-left: 35%;
	}
	
	.mobile-prefix-40 {
		margin-left: 40%;
	}
	
	.mobile-prefix-45 {
		margin-left: 45%;
	}
	
	.mobile-suffix-5 {
		margin-right: 5%;
	}
	
	.mobile-suffix-10 {
		margin-right: 10%;
	}
	
	.mobile-suffix-15 {
		margin-right: 15%;
	}
	
	.mobile-suffix-20 {
		margin-right: 20%;
	}
	
	.mobile-suffix-25 {
		margin-right: 25%;
	}
	
	.mobile-suffix-30 {
		margin-right: 30%;
	}
	
	.mobile-suffix-33 {
		margin-right: 33.3333%;
	}
	
	.mobile-suffix-35 {
		margin-right: 35%;
	}
	
	.mobile-suffix-40 {
		margin-right: 40%;
	}
	
	.mobile-suffix-45 {
		margin-right: 45%;
	}
	
}