.person_type_filter {

	.container_header {
		font-size: 20px;
	}

	.person_type_container {
		display: flex;
		flex-direction: row;
		gap: 10px;

		a {
			position: relative;
			display: flex;
			flex: 1 1 50%;
			flex-direction: column;
			gap: 15px;
			text-decoration: none;
			padding: 30px;
			border: 2px solid #00B3BA;
			border-radius: 5px;
			background-color: #fff;
			font-size: 16px;
			line-height: 130%;
			font-weight: 400;
			text-align: left;
			transition: .3s;

			.title {
				font-weight: 700;
				line-height: 20px;
				letter-spacing: 1px;
				text-transform: uppercase;
				color: var(--teal);
				transition: .3s;
			}

			* {
				margin: 0;
			}

			&:after {
				content: '';
				position: absolute;
				bottom: -22px;
				left: 50%;
				transform: translateX(-50%);
				width: 47px;
				height: 20px;
				opacity: 0;
				background: center / contain no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="47" height="20" fill="none" viewBox="0 0 47 20"><path fill="%2300b3ba" d="M23.5 20 0 0h47z"/></svg>');
				transition: .3s;
			}

			&:hover, &.current {
				background-color: #00B3BA;
				color: #fff;
				cursor: pointer;

				.title {
					color: #fff;
				}
			}

			&.current {
				&:after {
					opacity: 1;
				}
			}
		}
	}
}
.archive_filter {
	display: flex;
	gap: 20px;
	margin-top: 40px;
	padding: clamp(15px, 2.5vw, 30px);
	background: rgba(223, 225, 223, 0.30);
	border: 2px solid #DFE1DF;
	border-radius: 5px;
}
.archive_filter > div:not(.buttons_container) {
	flex: 1;
}
.archive_filter > div label {
	display: block;
	margin-bottom: 20px;
}
.archive_filter > div select {
	padding: 20px 70px 20px 20px;
	box-sizing: border-box;
	border: none;
	width: 100%;
	color: #9B9B9B;
	appearance: none;
	-webkit-appearance: none;
	background: #fff calc(100% - 20px) center no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9' fill='none'%3E%3Cpath fill='%2300B3BA' fill-rule='evenodd' d='M.898 2.025 7.262 8.39a1 1 0 0 0 1.414 0l6.364-6.364A1 1 0 0 0 13.626.611L7.969 6.268 2.312.61A1 1 0 1 0 .898 2.025Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.archive_filter .buttons_container {
	grid-column: 1 / span 3;
	display: flex;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.single_post_list.training-courses {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.single_post_list.training-courses > a {
	border-radius: 5px;
	font-size: 16px;
	font-family: "Josefin Sans", sans-serif;
	font-weight: 400;
	line-height: 20px;
	background: var(--teal);
	box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.10);
	padding: var(--padding-m) var(--padding-s);
	box-sizing: border-box;
	text-decoration: none;
	color: var(--white);
	position: relative;
	transform-style: preserve-3d;
	transition: all .3s ease-in-out;
	isolation: isolate;
}
.single_post_list .single_bg_image {
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0;
	right: 0;
	z-index: -1;
	opacity: 0;
	transition: .3s;
	background: center / cover no-repeat;
}
.single_post_list .single_bg_image div {
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, #00B3BA, rgba(0, 179, 186, 0.00) );
}
.single_post_list a:nth-child(4n - 2) .single_bg_image div,
.single_post_list a:nth-child(4n - 1) .single_bg_image div {
	background: linear-gradient(to right, #006472, rgba(0, 179, 186, 0.00) );
}
.single_post_list a:hover .single_bg_image {
	opacity: 1;
}


.single_post_list.training-courses > a:nth-child(4n - 2), .single_post_list.training-courses > a:nth-child(4n - 1) {
	background: var(--dark-teal);
}
.single_post_list.training-courses > a::after {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41' height='41' fill='none'%3E%3Cpath fill='%23fff' d='M1.232 36.347a2.5 2.5 0 1 0 3.536 3.535l-3.536-3.535ZM40.855 2.759a2.5 2.5 0 0 0-2.5-2.5h-22.5a2.5 2.5 0 0 0 0 5h20v20a2.5 2.5 0 0 0 5 0V2.76ZM4.768 39.882 40.123 4.527 36.588.992 1.232 36.347l3.536 3.535Z'/%3E%3C/svg%3E");
	max-width: 41px;
	width: 2.5vw;
	aspect-ratio: 1 / 1;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	opacity: 0;
	transition: all .3s ease-in-out;
}
.single_post_list.training-courses > a:hover::after {
	opacity: 1;
	transition: all .3s ease-in-out;
}
.single_post_list.training-courses > a .post_data h4 {
	font-weight: 700;
	margin: 0 0 10px 0;
	color: var(--white);
}
.single_post_list.training-courses > a .post_data .sector {
	font-size: 12px;
	text-transform: uppercase;
	margin: 0 0 10px 0;
	font-weight: 500;
	line-height: 16px;
	letter-spacing: 2.4px;
}
.single_post_list.training-courses > a .post_data .course_badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.single_post_list.training-courses > a .post_data .course_badges .duration, .single_post_list.training-courses > a .post_data .course_badges .preferred_delivery_method {
	border-radius: 5px;
	background: #FFF;
	padding: 10px;
	box-sizing: border-box;
	color: var(--teal);
	font-family: "Josefin Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	margin: 0;
}
.single_post_list.training-courses > a .post_data .course_badges .preferred_delivery_method {
	color: var(--white);
}
.single_post_list.training-courses > a .post_data {
	max-width: 410px;
	width: 100%;
}
.single_post_list.training-courses > a .post_data .check_ul {
	column-count: 2;
}
.single_post_list.training-courses > a .post_data .buttons_container {
	margin-top: 40px;
}

.buttons_container .button {
	margin-bottom: 0;
}



@media (max-width: 1024px) {
	.archive_filter {
		flex-direction: column;
	}
	.archive_filter .buttons_container {
		grid-column: unset;
	}
	.single_post_list.training-courses {
		grid-template-columns: repeat(1, 1fr);
	}

	.person_type_filter .person_type_container {
		flex-direction: column;
		gap: 20px;

		a {
			order: 1;

			&.current {
				order: 2;
			}
		}
	}
	.person_type_filter .person_type_container .person_type {
		&:hover, &.active {
			&:after {
				opacity: 0;
			}
		}
	}
}
@media (max-width: 640px) {
	.single_post_list.training-courses > a .post_data .check_ul {
		column-count: 1;
	}
	#search-form-training {
		min-width: 100%;
	}
	.single_post_list .single_bg_image {
		display: none;
	}
}
