.one-ib-circ-icn {
	display: inline-flex;
	width: 80px;
	height: 80px;
	margin: -50px 0 0 -50px;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50em;
	font-size: 30px;
	opacity: 0;
	
	span {
		display: inherit;
		width: inherit;
		height: inherit;
		position: relative;
		align-items: center;
		justify-content: center;
		border-radius: inherit;
		background-color: #fff;
		color: #000;
		box-shadow: 0 8px 16px rgba(#000, 0.08);
		transition: color 0.3s;

		&:before {
			content: '';
			display: inline-block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: inherit;
			opacity: 0;
			background-color: var(--color-primary);
			transition: opacity 0.3s;
		}
		&:after {
			content: '';
			display: inline-block;
			width: 126%;
			height: 126%;
			position: absolute;
			top: -13%;
			left: -13%;
		}
	}
	img, svg, i {
		position: relative;
		z-index: 1;
	}
	img, svg {
		max-width: 60%;
	}
	&:hover {

		span {
			color: #fff;

			&:before {
				opacity: 1;
			}
		}
		svg {
			stroke: #fff;

			line, polyline, rect, circle, polygon, path {
				stroke: inherit;
			}
		}

		~ .one-ib-circ-cnt {

			h3,
			hr,
			p {
				opacity: 1;
				visibility: visible;
				transform: translateY(0);
			}

			hr {
				transition-delay: 0.07s;
			}
			p {
				transition-delay: 0.14s;
			}
		}
	}
}
.one-ib-circ-cnt {
	width: 60%;
	margin: 0 auto;
	font-size: 16px;
	line-height: em(26, 16);
	color: #666;

	h3,
	hr,
	p {
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition-property: transform, opacity, visibility;
		transition-duration: 0.45s;
		transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
	}
	h3 {
		color: #333;
		font-size: 21px;
		transition-delay: 0.1s;
	}
	hr {
		width: 17%;
		border-color: rgba(#000, 0.1);
		transition-delay: 0.05s;
	}
	p {
		transition-delay: 0s;
	}
}
.one-ib-circ-item {

	&:last-child {

		.one-ib-circ-cnt {

			h3,
			hr,
			p {
				opacity: 1;
				visibility: visible;
				transform: translateY(0);
			}
		}
	}

	&:hover {

		~ .one-ib-circ-item {

			.one-ib-circ-cnt {

				h3,
				hr,
				p {
					opacity: 0;
					visibility: hidden;
					transform: translateY(-10px);
				}
			}
		}
	}
}

.one-ib-circ-inner {
	@include position(absolute, 40px);
	transform: translateZ(80px) scale(0.86666);

	> .vc_ld_icon_box_circle_item,
	> .one-ib-circ-item {
		display: flex !important;
		width: calc(100% - 100px);
		height: calc(100% - 100px);
		position: absolute !important;
		top: 50%;
		left: 50%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		transform: translate(-50%, -50%);
	}
	> .vc_ld_icon_box_circle_item {

		.one-ib-circ-item {
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
}
.one-ib-circ-wrap {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border: 1px solid #efefef;
	border-radius: 50em;
	transform-style: inherit;
	perspective: inherit;
}
.one-ib-circ {
	position: relative;
	padding-bottom: 100%;
	transform-style: preserve-3d;
	perspective: 1200px;
}