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

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

// .dotCircle  .itemDot::after {
//     content:"";
//     width: 101px;
//     height: 101px;
//     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: 104px;
//     height: 104px;
//     position: absolute;
//     border-radius: 100%;
//     top: 0;
//     left: 0;
//     right: 0;
//     margin: auto;
//     z-index:2;
//     border:3px solid;
    
// }


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


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

.dotCircle  .itemDot3{
    background:#89c445;
}

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

.dotCircle  .itemDot4{
    background:#fca72b;
}

.dotCircle  .itemDot4::after	{

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

.dotCircle  .itemDot5{
background:#3dbea0;
    
}

.dotCircle  .itemDot5::after	{

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


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

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

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

.dotCircle  .itemDot8{
background:#1362b7;
    
}
.dotCircle  .itemDot8::after	{

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

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

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

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

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





.dotCircle .itemDot.active{
    background:#34495e;
    color:#fff;
    transition:0.5s;
}
.dotCircle .itemDot.active::before{
    border-color:#34495e;
}	

.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:#34495e;
    color:#fff;
    transition:0.5s;
}
.dotCircle .itemDot:hover::before{
    border-color:#34495e;
}	






.contentCircle{
    width: 222px;
    height: 222px;
    border-radius: 100%;
    /*background: url(../images/bgcircle.png) no-repeat;*/
    color: #fff;
    position: relative;
    top: 137px;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0px 0px 69px 1px #2b152e;
    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: 26px;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    margin: auto;
    background: #00000054;
    line-height: 250px;
}

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


.contentCircle .CirItem1{
    /*background:rgba(255, 176, 72, 0.53);*/
    background:url(../images/a1_h.png) no-repeat;
}
.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:rgba(40, 169, 224, 0.53);*/
    background:url(../images/a2_h.png) no-repeat;
}
.contentCircle .CirItem3{
    /*background:rgba(137, 196, 69, 0.53);*/
    background:url(../images/a3_h.png) no-repeat;
}
.contentCircle .CirItem4{
    /*background:rgba(252, 167, 43, 0.53);*/
    background:url(../images/a4_h.png) no-repeat;
}
.contentCircle .CirItem5{
    /*background:rgba(61, 190, 160, 0.53);*/
    background:url(../images/a5_h.png) no-repeat;
}
.contentCircle .CirItem6{
    /*background:rgba(170, 34, 157, 0.53);*/
   background:url(../images/a6_h.png) no-repeat;
}
.contentCircle .CirItem7{
    /*background:rgba(224, 100, 16, 0.53);*/
    background:url(../images/a7_h.png) no-repeat;
}
.contentCircle .CirItem8{
    /*background:rgba(19, 98, 183, 0.53);*/
    background:url(../images/a8_h.png) no-repeat;
}
.contentCircle .CirItem9{
    /*background:rgba(229, 44, 71, 0.53);*/
    background:url(../images/a9_h.png) no-repeat;
}
.contentCircle .CirItem10{
    /*background:rgba(254, 68, 145, 0.53);*/
    background:url(../images/a10_h.png) no-repeat;
}


@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;

    }


}