.holderCircle {
	width: 600px;
	height: 600px;
	border-radius: 100%;
	margin: 60px auto;
	position: relative
} 

.CirItem.title-box .title {
	color: var(--color-theme-primary);
}

.dotCircle {
	width: 100%;
	height: 100%;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 100%;
	z-index: 20
}

.dotCircle .itemDot { 
	display: block;
	width: 80px;
	height: 80px;
	position: absolute;
	background: #eee;
	color: var(--color-theme-primary);
	border-radius: 20px;
	text-align: center;
	line-height: 80px;
	font-size: 30px;
	z-index: 3;
	cursor: pointer
}

.dotCircle .itemDot .forActive {
	width: 56px;
	height: 56px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none
}

.dotCircle .itemDot .forActive::after {
	content: '';
	width: 5px;
	height: 5px;
	border: 3px solid var(--color-theme-primary);
	bottom: -31px;
	left: -14px;
	filter: blur(1px);
	position: absolute;
	border-radius: 100%
}
.dotCircle .itemDot:hover svg path,
.dotCircle .itemDot.active svg path 
{
	stroke: var(--color-theme-white); 
} 
.dotCircle .itemDot .forActive::before {
	content: '';
	width: 6px;
	height: 6px;
	filter: blur(5px);
	top: -15px;
	position: absolute;
	transform: rotate(-45deg);
	border: 6px solid var(--color-theme-primary);
	right: -39px
}

.dotCircle .itemDot.active .forActive {
	display: block
}

.round {
	position: absolute;
	left: 40px;
	top: 45px;
	width: 500px;
	height: 500px; 
	border: 2px dotted var(--color-theme-primary);
	border-radius: 100%;
	-webkit-animation: rotation 100s infinite linear
}

.dotCircle .itemDot:hover,
.dotCircle .itemDot.active {
	color: var(--color-theme-white);
	background: var(--color-theme-primary);
	background: -moz-linear-gradient(left, #7d4ac7 0%, #a733bb 100%);
	background: -webkit-linear-gradient(left, #7d4ac7 0%, #a733bb 100%);
	background: linear-gradient(to right, #7d4ac7 0%, #a733bb 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d4ac7', endColorstr='#a733bb', GradientType=1);
	-webkit-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13);
	-moz-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13);
	box-shadow: 0 30px 30px 0 rgba(0, 0, 0, .13);
	-webkit-transition: background .5s linear;
	-moz-transition: background .5s linear;
	-o-transition: background .5s linear; 
	transition: background .5s linear; 
}

.dotCircle .itemDot {
	font-size: 40px;

}   

.contentCircle {
	width: 250px;
	border-radius: 100%; 
	color: #222;
	position: relative;
	top: 200px;
	left: 50%; 
	transform: translate(-50%, -50%)
}

.contentCircle .CirItem {
	border-radius: 100%;
	color: #222;
	position: absolute;
	text-align: center;
	bottom: 0;
	left: 0;
	opacity: 0;
	transform: scale(0);
	transition: .5s;
	font-size: 15px;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	margin: auto;
	line-height: inherit
}

.CirItem.active {
	z-index: 1;
	opacity: 1;
	transform: scale(1);
	transition: .5s
}

.contentCircle .CirItem svg {
    position: absolute;
    width: 180px;
    height: 180px;
    top: 0;
    left: 32px;
    right: 0; 
    opacity: .1; 
    z-index: -1;
}
.contentCircle .CirItem svg path{stroke: var(--global-font-color);}

.contentCircle .CirItem i {
    position: absolute;
    font-size: 180px;
    top: 0;
    left: 50%;
    right: auto; 
    opacity: .1; 
    z-index: -1;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.iq-breadcrumb .vc_single_image-wrapper img {
	box-shadow: 0 10px 46px 0 rgba(0, 0, 0, 0.1)
}


@media only screen and (min-width:300px) and (max-width:599px) {
	.holderCircle {
		width: 100%;
		height: 300px;
		margin: 110px auto
	}
	.dotCircle,
	.dotCircle .itemDot {
		transform: none!important;
		transition: none!important;
		position: initial;
		margin: 0 10px 10px;
		display: inline-block;
		text-align: center
	}
	.holderCircle::after {
		width: 100%;
		height: 100%
	}
	.dotCircle {
		width: 100%;
		height: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto
	}
}