/*––––––––––––––––––––––––––––––––––––––––––––––––*/
/* Typography                                     */
/*––––––––––––––––––––––––––––––––––––––––––––––––*/
.text-left {
    text-align: left !important;
}

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

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

.well {
    background-color: #f8f8f8;
    padding: 2rem;
    font-size: 1.25rem;
    border-radius: 8px;
	margin-bottom: 32px;
}

.well ul {
	margin: 0 !important;
}

.overflow-hidden {
    overflow: hidden;
}

@media (max-width: 767px) {
	.mobile-text-center {
        text-align: center !important;
		justify-content: center
    }
}

.hero p:empty {
    display: none;
}

.wp-block-group.is-content-justification-center {
    display: flex;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––*/
/* Display 										  */
/*––––––––––––––––––––––––––––––––––––––––––––––––*/

.d-flex {
    display: flex !important;
}

.flex-grow-1 {
	flex-grow: 1 !important;
}
.flex-grow-0 {
	flex-grow: 0 !important;
}

.flex-shrink-1 {
	flex-shrink: 1 !important
}

.flex-shrink-0 {
	flex-shrink: 0 !important
}

.flex-basis-auto {
	flex-basis: auto !important
}

.justify-content-end {
	justify-content: flex-end !important;
}

.justify-content-center, 
.justify-content-center > .uagb-loop-container {
	justify-content: center !important;
}

.items-end {
	align-items: flex-end !important;
}

.items-center {
    align-items: center !important;
}

.overflow-visible {
	overflow: visible;
}

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

@media (max-width: 767px) {
    .hidden-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .hidden-desktop-tablet {
        display: none !important;
    }
}

@media (max-width: 1025px) {
    .hidden-mobile-tablet {
        display: none !important;
    }
}

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

/*––––––––––––––––––––––––––––––––––––––––––––––––*/
/* Position 									  */
/*––––––––––––––––––––––––––––––––––––––––––––––––*/

.position-sticky {
	position: sticky;
	top: 32px;
}

.position-sticky-0 {
	position: sticky;
	top: 0;
	z-index: 500;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––*/
/* Shadows 										  */
/*––––––––––––––––––––––––––––––––––––––––––––––––*/

.text-shadow, 
.text-shadow p {
    text-shadow: 0 0 16px rgba(0, 0, 0, 1) !important;
}

.box-shadow-sm {
    box-shadow: 2px 0 16px 0px rgba(0, 0, 0, 0.5) !important;
}

.box-shadow-bot {
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2) !important;
}

.overlay-shadow-bottom {
	position: relative;
}

.overlay-shadow-bottom::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 300px;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,1) 15%, rgba(0,0,0,0) 100%);
}

.hero.overlay-shadow-bottom::after {
	height: 500px;
	background: linear-gradient(0deg, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 100%);
}

.hero.overlay-shadow-bottom-pa::after {
	height: 500px;
	background: linear-gradient(0deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

@media (max-width: 976px) {
	.hero.overlay-shadow-bottom::after {
		height: 1080px;
		background: linear-gradient(0deg, rgba(0,0,0,1) 73%, rgba(0,0,0,0) 100%);
	}
}

@media (max-width: 976px) {
	.hero.overlay-shadow-bottom-pa::after {
		height: 1080px;
		background: linear-gradient(0deg, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
	}
}



/*––––––––––––––––––––––––––––––––––––––––––––––––*/
/* Sizing 										  */
/*––––––––––––––––––––––––––––––––––––––––––––––––*/

.w-100 {
	width: 100% !important;
}

.mw-100 {
	max-width: 100% !important;
}

.w-auto {
	width: auto !important;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––*/
/* Spacing 										  */
/*––––––––––––––––––––––––––––––––––––––––––––––––*/

.gap-1 {
    gap: 1rem !important;
}

@media (max-width: 767px) {
    .p-mobile {
        padding: 32px !important;
    }

    .p-y-mobile {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
}

/*––––––––––––––––––––––––––––––––––––––––––––––––*/
/* Image Align                                    */
/*––––––––––––––––––––––––––––––––––––––––––––––––*/

/* These classes are used within blog articles by the content team to align images left or right */


figure.left,
img.left {
	float: left;
	margin-right: 24px !important;
}

figure.right,
img.right {
	float: right;
	margin-left: 24px !important;
}

figure.right, figure.left,
img.right, img.left {
	margin-bottom: 32px !important;
	margin-top: 0 !important;
}

@media (max-width: 767px) {
	figure.right, figure.left,
	figure.right img, figure.left img,
	img.left, img.right {
		float: none;
		margin-right: 0 !important;
		margin-left: 0 !important;
		width: 100%;
		max-width: 100%;
		height: auto;
	}
}