/*
	create by nasir farhadi
	email : nasirfarhadi92@gmail.com
	Github : nasirfarhadi92
*/

.holderCircle{
    width:330px;
    height:330px;
    border-radius:100%;
    position:relative;
}

/* .holderCircle::after{
    content:'';
    width:500px;
    height:500px;
    border-radius:100%;
    border:1px solid #000;
    position:absolute;
    top:0;
} */

.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:60px;
    height:60px;
    position:absolute;
    background:#ddd;
    color:#fff;
    border-radius:100%;
    text-align: center;
    line-height: 70px;
    font-size:25px;
    z-index:3;
    cursor:pointer;		
}

/* .dotCircle  .itemDot::after {
    content:"";
    width: 42px;
    height: 42px;
    position: absolute;
    border-radius: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index:2;
    border:3px solid #fff;
} */
/* .dotCircle  .itemDot::before{
    content:"";
    width: 45px;
    height: 45px;
    position: absolute;
    border-radius: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index:2;
    border:3px solid;
    
} */


.dotCircle  .itemDot1{
    background:#a62126;
}
.dotCircle  .itemDot1::after	{
    
}
.dotCircle  .itemDot1::before{
    border-color:#a62126;
}


.dotCircle  .itemDot2{
    background:#a62126;
}
.dotCircle  .itemDot2::after	{
    
}
.dotCircle  .itemDot2::before{	
    border-color:#a62126;
}

.dotCircle  .itemDot3{
    background:#a62126;
}

.dotCircle  .itemDot3::after	{	
    
}
.dotCircle  .itemDot3::before{
    border-color:#a62126;
}

.dotCircle  .itemDot4{
    background:#a62126;
}

.dotCircle  .itemDot4::after	{

}
.dotCircle  .itemDot4::before{
border-color:#a62126;
}

.dotCircle  .itemDot5{
background:#a62126;
    
}

.dotCircle  .itemDot5::after	{

}
.dotCircle  .itemDot5::before{	
border-color:#a62126;
}


.dotCircle  .itemDot6{
    background:#a62126;
}
.dotCircle  .itemDot6::after	{

}
.dotCircle  .itemDot6::before{	
    border-color:#a62126;
}

.dotCircle  .itemDot7{
    background:#a62126;
}
.dotCircle  .itemDot7::after	{
    
}
.dotCircle  .itemDot7::before{
    border-color:#a62126;	
}

.dotCircle  .itemDot8{
background:#a62126;
    
}
.dotCircle  .itemDot8::after	{

}
.dotCircle  .itemDot8::before{	
border-color:#a62126;
}

.dotCircle  .itemDot9{
    background:#a62126;
    
}
.dotCircle  .itemDot9::after	{

}
.dotCircle  .itemDot9::before{
border-color:#a62126;	
}

.dotCircle  .itemDot10{
    background:#a62126;
}
.dotCircle  .itemDot10::after{

}
.dotCircle  .itemDot10::before{	
border-color:#a62126;
}





.dotCircle .itemDot.active{
    position: relative;
    background:#a62126;
    color:#fff;
    transition:0.5s;
    width: 60px;height:60px;
    /* transform: scale(1.4); */
}

.dotCircle .itemDot.active:after{
    position: absolute;width: 28px;height:28px;right:-35px;top:-15px;content:'';background:url(shou.png) no-repeat center;background-size: contain;
}

.dotCircle .itemDot.active i{width: 30px;height:30px;padding-top: 28px;}

.dotCircle .itemDot.active::before{
    border-color:#a62126;
}	

/* .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 #FE9290;
    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 #F48E2A;
    right: -39px;
} */


/* .dotCircle  .itemDot.active .forActive{
    display:block;
} */


.dotCircle .itemDot:hover{
    background:#a62126;
    color:#fff;
    transition:0.5s;
}
.dotCircle .itemDot:hover::before{
    border-color:#a62126;
}	



.contentCircle{
    width: 180px;
    height: 180px;
    border-radius: 100%;
    /* background: url(../img/bgcircle.png) no-repeat; */
    color: #fff;
    position: relative;
    top: 74px;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0px 0px 49px 1px #999;
    margin: auto;
}

.contentCircle .CirItem{
    border-radius: 100%;
    color: #fff;
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
    opacity: 0;
    transform: scale(0);
    transition: 0.5s;
    font-weight: bold;
    font-size: 20px;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    margin: auto;
    background: #00000054;
    line-height: 180px;
}

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


.contentCircle .CirItem1{
    background:#a62126;
}
/* .contentCircle .CirItem1::after,
.contentCircle .CirItem2::after,
.contentCircle .CirItem3::after,
.contentCircle .CirItem4::after,
.contentCircle .CirItem5::after,
.contentCircle .CirItem6::after,
.contentCircle .CirItem7::after,
.contentCircle .CirItem8::after,
.contentCircle .CirItem9::after,
.contentCircle .CirItem10::after{
    content:'';
    width:50%;
    height:100%;
    border-bottom-left-radius: 250px;
    border-top-left-radius: 250px;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    background:rgba(0, 0, 0, 0.33);
} */
.contentCircle .CirItem2{
    background:#a62126;
}
.contentCircle .CirItem3{
    background:#a62126;
}
.contentCircle .CirItem4{
    background:#a62126;
}
.contentCircle .CirItem5{
    background:#a62126;
}
.contentCircle .CirItem6{
    background:#a62126;
}
.contentCircle .CirItem7{
    background:#a62126;
}
.contentCircle .CirItem8{
    background:#a62126;
}
.contentCircle .CirItem9{
    background:#a62126;
}
.contentCircle .CirItem10{
    background:#a62126;
}

.iic1{display: inline-block;width: 30px;height: 30px;background: url(iic1.png) no-repeat center;background-size: contain;}
.iic2{display: inline-block;width: 30px;height: 30px;background: url(iic2.png) no-repeat center;background-size: contain;}
.iic3{display: inline-block;width: 30px;height: 30px;background: url(iic3.png) no-repeat center;background-size: contain;}
.iic4{display: inline-block;width: 30px;height: 30px;background: url(iic4.png) no-repeat center;background-size: contain;}
.iic5{display: inline-block;width: 30px;height: 30px;background: url(iic5.png) no-repeat center;background-size: contain;}
.iic6{display: inline-block;width: 30px;height: 30px;background: url(iic6.png) no-repeat center;background-size: contain;}
.iic7{display: inline-block;width: 30px;height: 30px;background: url(iic7.png) no-repeat center;background-size: contain;}
.iic8{display: inline-block;width: 30px;height: 30px;background: url(iic8.png) no-repeat center;background-size: contain;}
.iic9{display: inline-block;width: 30px;height: 30px;background: url(iic9.png) no-repeat center;background-size: contain;}


@media only screen and (min-width: 300px) and (max-width: 599px){

    .holderCircle {
        width: 300px;
        height: 300px;
        margin:110px auto;
    }
    .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: 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){

}

@media only screen and (min-width: 1500px) {

}