/* ==========================================
   FLEX
========================================== */

.d-flex{display:flex;}
.flex-column{flex-direction:column;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.flex-1{flex:1;}

/* ==========================================
   WIDTH
========================================== */

.w-25{width:25%;}
.w-33{width:33.333%;}
.w-40{width:40%;}
.w-50{width:50%;}
.w-60{width:60%;}
.w-100{width:100%;}

/* ==========================================
   GAP
========================================== */

.gap-2{gap:.5rem;}
.gap-4{gap:1rem;}
.gap-6{gap:1.5rem;}
.gap-8{gap:2rem;}

/* ==========================================
   MARGIN
========================================== */

.mt-4{margin-top:1rem;}
.mt-6{margin-top:1.5rem;}
.mt-8{margin-top:2rem;}

.mb-4{margin-bottom:1rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-8{margin-bottom:2rem;}

.mx-auto{
	margin-left:auto;
	margin-right:auto;
}

/* ==========================================
   PADDING
========================================== */

.pt-6{padding-top:1.5rem;}
.pb-6{padding-bottom:1.5rem;}

.px-4{
	padding-left:1rem;
	padding-right:1rem;
}

.px-6{
	padding-left:1.5rem;
	padding-right:1.5rem;
}

.py-4{
	padding-top:1rem;
	padding-bottom:1rem;
}

.py-6{
	padding-top:1.5rem;
	padding-bottom:1.5rem;
}

.py-8{
	padding-top:2rem;
	padding-bottom:2rem;
}

/* ==========================================
   BORDER RADIUS
========================================== */

.rounded-sm{border-radius:.25rem;}
.rounded{border-radius:.5rem;}
.rounded-lg{border-radius:1rem;}
.rounded-xl{border-radius:1.5rem;}
.rounded-full{border-radius:9999px;}

/* ==========================================
   HELPERS
========================================== */

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

.overflow-hidden{overflow:hidden;}
.text-center{text-align:center;}
.d-none{display:none!important;}

/* ==========================================
   RESPONSIVE
   Blocksy Tablet: 999.98px
   Blocksy Mobile: 689.98px
========================================== */

@media (max-width:999.98px){
	.py-lg-4 {padding-top:1rem;padding-bottom:1rem;}
	.lg-column{
		flex-direction:column;
	}

	.lg-w-100{
		width:100%;
	}

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

@media (max-width:689.98px){

	.md-column{
		flex-direction:column;
	}

	.md-w-100{
		width:100%;
	}

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