/*---------------------------------------------------------------------
Space Circle
-----------------------------------------------------------------------*/
.vizion-feature-circle { position: relative; display: inline-block; width: 550px; height: 550px; }
.vizion-feature-circle .vizion-img::before { content: ""; border: 2px dashed  rgba(255, 255, 255, 0.2); -webkit-animation: anti-clockwise 200s linear 100000; animation: anti-clockwise 200s linear 100000; width: 500px; height: 500px; border-radius: 900px; display: inline-block; }
.vizion-feature-circle .vizion-img::after { content: ""; border: 2px dashed rgba(255, 255, 255, 0.2); -webkit-animation: anti-clockwise 200s linear 100000; animation: anti-clockwise 200s linear 100000; width: 400px; height: 400px; border-radius: 900px; display: inline-block; position: absolute; top: 45px; left: 0; right: 0; margin: 0 auto; }
.vizion-feature-circle .vizion-img { width: 500px; height: 500px; position: relative; transition: all .4s ease; transform-origin: center center }
.vizion-feature-circle .circle-bg { width: 140px; text-align: center; position: relative; height: 140px; line-height: 140px; border-radius: 900px; border: 2px dashed rgba(255, 255, 255, 0.2); }
.vizion-feature-circle .dot-circle { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); }
.vizion-feature-circle .effect-circle:before { background: url('../images/circle.png'); width: 270px; height: 270px; display: inline-block; content: ""; }
.vizion-feature-circle .effect-circle { width: 270px; height: 270px; border-radius: 900px; border: 2px dashed  rgba(255, 255, 255, 0.2); -webkit-animation: rotate-center 200s linear 100000; animation: rotate-center 200s linear 100000; }
.vizion-feature-circle .main-circle { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; margin-right: -50%; }
.vizion-feature-circle .vizion-img ul li { position: absolute; margin: 0 auto; text-align: center; }
.vizion-feature-circle .vizion-img ul li  .feature-img { height: 65px; width: 65px; line-height: 65px; border-radius: 90px; background: #fff; text-align: center; margin: 0 auto 5px; box-shadow: 0 8px 38px 0 rgba(0, 0, 0, 0.1); }
.vizion-feature-circle .vizion-img ul li:nth-child(1) { top: 24%; left: 0; }
.vizion-feature-circle .vizion-img ul li:nth-child(2) { top: 4%; left: 45%; }
.vizion-feature-circle .vizion-img ul li:nth-child(3) { top: 40%; right: 6%; }
.vizion-feature-circle .vizion-img ul li:nth-child(4) { bottom: 10%; left: 18%; }
.vizion-feature-circle .vizion-img ul li:nth-child(5) { bottom: -10px; right: 15%; }
.vizion-feature-circle .vizion-img ul li:nth-child(6) { top: 73%; left: 4%; }
.vizion-feature-circle .vizion-img ul li:nth-child(7) { top: 60%; right: -3%; }
.vizion-feature-circle .vizion-img ul li:nth-child(8) { top: 0; left: 23%; }
.vizion-feature-circle .vizion-img ul li:nth-child(9) { top: 15%; right: 5%; }
.vizion-feature-circle .vizion-img ul li:nth-child(10) { bottom: 5%; right: 0; }
.vizion-feature-circle .vizion-img ul li:nth-child(11) { top: 30%; right: 25%; }
.vizion-feature-circle .vizion-img ul li:nth-child(12) { bottom: 5%; left: 23%; }
.vizion-feature-circle .vizion-img ul li .feature-info { position: relative; }
.vizion-feature-circle .vizion-img ul li .feature-info .title { color: #fff; }
.vizion-feature-circle .vizion-img ul li .feature-info .img { margin-bottom: 15px; display: block; height: 46px; width: 46px; background: rgba(255, 255, 255, 0.1); border-radius: 90px; position: relative; text-align: center; }
.vizion-feature-circle .vizion-img ul li .feature-info .img::before { content: ""; height: 15px; width: 15px; background: #fff; display: block; border-radius: 90px; line-height: 46px; left: 0; top: 15px; right: 0; margin: 0 auto; position: absolute; text-align: center; }


@keyframes circle {
	0% { transform: rotate(0deg) }
	15% { transform: rotate(2deg) }
	33% { transform: rotate(4deg) }
	66% { transform: rotate(2deg) }
	100% { transform: rotate(0deg) }
}

@media (max-width: 1199px){
	.vizion-feature-circle .dot-circle {
		display: none;
	}
	.vizion-feature-circle .vizion-img::before { height: 400px; width: 400px; }
	.vizion-feature-circle .vizion-img::after { height: 300px; width: 300px; top: 45px; left: -100px; }
	.vizion-feature-circle .dot-circle { display: none; }
	.vizion-feature-circle .main-circle { left: 40%; top: 40%; }
	.vizion-feature-circle .vizion-img ul li:nth-child(1) { top: 17%; }
	.vizion-feature-circle .vizion-img ul li:nth-child(3) { right: 15%; }
	.vizion-feature-circle .vizion-img ul li:nth-child(4) { top: 45%; left: 7%; }
	.vizion-feature-circle .vizion-img ul li:nth-child(7) { top: 60%; right: 25%; }
	.vizion-feature-circle .vizion-img ul li:nth-child(8) { bottom: 10%; left: 30%; }
	.vizion-feature-circle .vizion-img ul li:nth-child(6) { top: 60%; left: 0; }
	.vizion-feature-circle .vizion-img ul li:nth-child(5) { top: 10%; right: 24%; }
	.vizion-feature-circle .vizion-img ul li:nth-child(2) { top: -5%; left: 32%; }
	.wpb_wrapper.space-orbit{
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

@media (max-width: 767px){
	.vizion-feature-circle{
		width: 400px;
		height: 400px;
		margin: auto;
	}
}

@media (max-width: 479px){
	.vizion-feature-circle, .vizion-feature-circle .vizion-img::before, .vizion-feature-circle .vizion-img { height: 300px; width: 300px; display: inline-block; vertical-align: middle; }
	.vizion-feature-circle .vizion-img::after { height: 200px; width: 200px; top: 50px; left: 0; right: 0; margin: 0 auto; }
	.vizion-feature-circle .main-circle { top: 50%; }
	.vizion-feature-circle .vizion-img ul li:nth-child(5) { right: 5%; }
	.vizion-feature-circle .vizion-img ul li:nth-child(4) { top: 77%; }
	.vizion-feature-circle .vizion-img ul li:nth-child(3) { right: 18%; top: 65%; }
	.vizion-feature-circle .main-circle { left: 51%; }
}