.expertise {
	display: flex;
}

.expertise_wrapper {
	position: relative;
	width: 100%;
	height: auto;
}

.expertise_circle {
	display: none;
}

.expertise_center {
	position: relative;
}

.expertise_panel {
	display: flex;
}

.expertise_panel i {
	display: flex;
	background-color: #fff;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	flex: 1 0 auto;
	margin-right: 1em;
	color: #000;
	justify-content: center;
	align-items: center;
}

.expertise_panel_content {
	background-color: #fff;
	color: #000;
	padding: 5px 10px;
	border-radius: 10px;
	margin-bottom: 15px;
}

.expertise_panel i, .expertise_circle i {
	font-size: 1.6em;
}

@media screen and (min-width: 36em) {
	.expertise {
		display: flex;
		justify-content: center;
		padding: 6rem 0;
	}

	.expertise_wrapper {
		width: 420px;
		height: 420px;
	}

	.expertise_circle {
		display: block;
		position: absolute;
		inset: 0;
		border: 2px solid #ddd;
		border-radius: 50%;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.expertise_item {
		position: absolute;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: #fff;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: transform .3s, background .3s;
	}

	.expertise_center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 300px;
		height: 240px;
		border-radius: 50%;
		background: #0f0f0f;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.expertise_item.active {
		background: #f57b60;
		color: #fff;
		transform: scale(1.1);
	}

	.expertise_item:nth-child(1) {
		top: -22px;
		left: 50%;
		transform: translateX(-50%);
	}
	.expertise_item:nth-child(2) {
		right: -22px;
		top: 50%;
		transform: translateY(-50%);
	}
	.expertise_item:nth-child(3) {
		bottom: -22px;
		left: 50%;
		transform: translateX(-50%);
	}
	.expertise_item:nth-child(4) {
		left: -22px;
		top: 50%;
		transform: translateY(-50%);
	}

	.expertise_panel {
		display: none;
		opacity: 0;
		transition: opacity .3s ease;
	}

	.expertise_panel i{
		display: none;
	}

	.expertise_panel.active {
		display: block;
		opacity: 1;
	}

	.expertise_panel_content {
		background-color: #0b0f14;
		color: #e5e7eb;
		padding: 0;
		border-radius: 0;
		margin-bottom: 0;
	}
}