.holderCircle { width: 500px; height: 500px; border-radius: 100%; margin: 60px auto; position: relative }
.CirItem.title-box .title { color: #46c894 }
.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: #eeeeee; color: #46c894; 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 #46c894; bottom: -31px; left: -14px; filter: blur(1px); position: absolute; border-radius: 100% }
.dotCircle  .itemDot .forActive::before { content: ''; width: 6px; height: 6px; filter: blur(5px); top: -15px; position: absolute; transform: rotate(-45deg); border: 6px solid #75cd6f; right: -39px }
.dotCircle  .itemDot.active .forActive { display: block }
.round { position: absolute; left: 40px; top: 45px; width: 410px; height: 410px; border: 2px dotted #75cd6f; border-radius: 100%; -webkit-animation: rotation 100s infinite linear }
.dotCircle .itemDot:hover, .dotCircle .itemDot.active { color: #ffffff; transition: 0.5s; background: #46c894; background: -moz-linear-gradient(left, #46c894 0%, #75cd6f 100%); background: -webkit-linear-gradient(left, #46c894 0%, #75cd6f 100%); background: linear-gradient(to right, #46c894 0%, #75cd6f 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#46c894', endColorstr='#75cd6f', 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) }
.dotCircle .itemDot { font-size: 40px }
.contentCircle { width: 250px; border-radius: 100%; color: #222222; position: relative; top: 150px; left: 50%; transform: translate(-50%, -50%) }
.contentCircle .CirItem { border-radius: 100%; color: #222222; position: absolute; text-align: center; bottom: 0; left: 0; opacity: 0; transform: scale(0); transition: 0.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: 0.5s }
.contentCircle .CirItem i { font-size: 180px; position: absolute; top: 0; left: 0; right: 0; color: #000000; opacity: 0.1; z-index: -1 }
.iq-breadcrumb .vc_single_image-wrapper img { box-shadow: 0px 10px 46px 0 rgba(0, 0, 0, 0.1) }
@media only screen and (min-width:300px) and (max-width:767px) {
	.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 }
}
@media only screen and (min-width: 767px) and (max-width: 992px){
    .contentCircle{
        width: 80%;
        top: 272px;
    }
}
@media (max-width:767px){
 .contentCircle{top:45px !important;}
 .holderCircle{height: 100% !important;}
 .contentCircle .CirItem i{    font-size: 100px;}
}
@media only screen and (min-width:600px) and (max-width:767px) { }
@media only screen and (min-width:768px) and (max-width:991px) { }
@media only screen and (min-width:992px) and (max-width:1199px) { }
@media only screen and (min-width:1200px) and (max-width:1499px) { }