/*
	create by nasir farhadi
	email : nasirfarhadi92@gmail.com
	Github : nasirfarhadi92
*/
/* 
    Thank his contribution to open source community
    And it`s our honor to use it in our project
*/
.Circle-box{
    position: relative;

    height: 70vw;
    width: 70vw;

    left: 50%;
    transform: translateX(-50%);

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

.dotCircle  .itemDot::after {
    content:"";
    width: 10.1vw;
    height: 10.1vw;
    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: 10.2vw;
    height: 10.2vw;
    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:8vw;
    height:8vw;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:none;
}

.dotCircle  .itemDot .forActive::after{
    content: '';
    width: 0.5vw;
    height: 0.5vw;
    border: 0.2vw solid #FE9290;
    bottom: -31px;
    left: -14px;
    filter: blur(1px);
    position: absolute;
    border-radius: 100%;
}

.dotCircle  .itemDot .forActive::before{
    content: '';
    width: 0.3vw;
    height: 0.3vw;
    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: 35vw;
    height: 35vw;
    border-radius: 100%;
    background: url(../img/bgcircle.png) no-repeat;
    color: #fff;
    position: relative;
    top: 17.5vw;
    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: 13px;
    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.83);
}
.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: 500px;
    border-top-left-radius: 500px;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    background:rgba(0, 0, 0, 0.33);
}
.contentCircle .CirItem2{
    background:rgba(40, 169, 224, 0.83);
}
.contentCircle .CirItem3{
    background:rgba(137, 196, 69, 0.83);
}
.contentCircle .CirItem4{
    background:rgba(252, 167, 43, 0.83);
}
.contentCircle .CirItem5{
    background:rgba(61, 190, 160, 0.83);
}
.contentCircle .CirItem6{
    background:rgba(170, 34, 157, 0.83);
}
.contentCircle .CirItem7{
    background:rgba(224, 100, 16, 0.83);
}
.contentCircle .CirItem8{
    background:rgba(19, 98, 183, 0.83);
}
.contentCircle .CirItem9{
    background:rgba(229, 44, 71, 0.83);
}
.contentCircle .CirItem10{
    background:rgba(254, 68, 145, 0.83);
}
i.fa {
    top: 0;
    font-size: 2vw; 
    line-height: 2vw;
}
.itemDot p{
    font-size: 1.5vw !important;
    line-height: 1.2vw;
}
.contentCircle{
    z-index: 990;
}
.contentCircle a{
    font-size: 2.5vw;
    text-decoration: none;
    color: antiquewhite;
}
.page-intro{
    font-size: 1.5vw;
    line-height: 2.1vw;
}
.CirItem a{
    line-height: 4.5vw !important;
}
@media  (max-width: 767px){
    .CirItem p{
        display: none;
    }
}

@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) {

}





article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}