/*********************************************************************************************/
/* COST OF LIVING CSS   																	 */ 
/*********************************************************************************************/

.page-header {
	background:linear-gradient(
		rgba(0,0,0, 0.4), 
		rgba(0,0,0, 0.4)
	),url(/media/8020/supportive-hands.jpg?center=0.34274193548387094,0.43666666666666665&mode=crop&width=2000&height=500&rnd=131826263380000000);
	background-position: center center;
	background-size: cover;
}

hr {
	border-top: 1px solid rgba(0,0,0,.1);
	margin-top: 20px;
	margin-bottom: 0;
}

.contentpage-top [class^="column-"] {
	margin-bottom: 20px;
}

/*********************************************************************************************/
/* TYPOGRAPHY           																	 */ 
/*********************************************************************************************/

.rich-text h3 { 
	margin-top: 0; 
	font-weight: 700;
	font-size: 24px;
}

/*********************************************************************************************/
/* BOXES                																	 */ 
/*********************************************************************************************/
/* The four main boxes */
.feature-boxes .box {
	height: 400px;
}

.box {
	background-color: rgba(255,255,255,.5);
	position: relative;
	border: 1px solid rgba(0,0,0,.2); 
	overflow: hidden;
	border-radius: 10px;
}

.box .box-text {
	padding: 16px;
}

.feature-boxes .box:hover {
	background-color: rgba(239,214,33);
	transition: background-color 0.3s; 
}

.box-bg:hover {
	background-color: rgba(59,67,149);
	transition: background-color 0.3s; 
	color: #000;
}

.box-bg a:hover {
	color: #fff;
}

.box p {
	margin-bottom: 0;
}

.box a {
	border-bottom: none;
	display: flex;
	align-items: center;
}

.feature-boxes .box a:focus {
	color: unset;
}

.box a:focus {
	background-color: transparent;
	outline: none;
}

.box-border { 
	border: 1px solid rgba(0,0,0,.2); 
}

.box-shadow { 
	box-shadow: 2px 2px 7px rgb(0 0 0 / 20%); 
}

.box h3 {
	margin: 5px 0 5px 0; 
	font-size: 18px;
}

.box-link:after {
	bottom: 0;
	content: "";
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

/*********************************************************************************************/
/* ICONS AND IMAGES     																	 */ 
/*********************************************************************************************/

span.icon {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
}

.fa {
	border-radius: 50%;
	width: 45px;
	height: 45px;
	background-color: #50af47;
	color: #fff;
}

span.icon.fa-1x { 
	font-size: 1.3em; 
}

/*********************************************************************************************/
/* UTILITIES            																	 */ 
/*********************************************************************************************/
.p-2 { padding: 20px; }
.mr-1 { margin-right: 10px; }
.mb-2 { margin-bottom: 20px; }

/*********************************************************************************************/
/* MEDIA QUERIES        																	 */ 
/*********************************************************************************************/
@media (max-width: 990px) {
	
	h2 {
		font-size: 22px;
	}
	
	.feature-boxes .box {
		height: 100%;
		display: flex;
	}
	
	.feature-boxes .box-image {
		flex: 0 0 30%;
	}
	
	.feature-boxes .box-image img {
		height: 100%;
		object-fit: cover;
	}
	
	.feature-boxes .box-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
}

@media (max-width: 550px) {
	
	.container {
		padding-left: 0;
		padding-right: 0;
	}
	
	.box {
		flex-direction: column;
	}
	
	.box p {
		margin-bottom: 12px;
	}
	
}