.circle-box.active{opacity: 1;}
.circle-box.noactive{opacity: 1;}
@media (max-width: 1174px){
  .close{display: none;}
  .expert{display: none;}
}
@media (min-width: 1175px){
  .circle-box.active{opacity: 1;}
  .circle-box.noactive{opacity: 0.4;}
  .circle-item {
    -webkit-transition: all 0.4s linear;
      -moz-transition: all 0.4s linear;
      -ms-transition: all 0.4s linear;
      -o-transition: all 0.4s linear;
      transition: all 0.4s linear;
  }
    .circle-type-2 .item-5 {
        top: 130px;
        left: 163px;
    }
     .circle-type-2 .item-6 {
        top: 130px;
        left: 163px;
    }
     .circle-type-2 .item-7 {
        top: 130px;
        left: 163px;
    }
    .add-item{
      opacity: 0;
      z-index: -1;
      -webkit-transition: all 0.4s linear;
      -moz-transition: all 0.4s linear;
      -ms-transition: all 0.4s linear;
      -o-transition: all 0.4s linear;
      transition: all 0.4s linear;

    }
    .circle-box.active.animate-box .add-item{
      opacity: 1;
      z-index: 1;
    }
    .close{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      box-shadow: 0 0 6px #ccc;
      text-align: center;
      position: absolute;
      z-index: 888;
      top: 35px;
      right: 50px;
      font-size: 14px;
      color: #777;
      border: 1px solid #777;
      opacity: 1;
      cursor: pointer;
      opacity: 0;
      -webkit-transition: all 0.4s linear;
      -moz-transition: all 0.4s linear;
      -ms-transition: all 0.4s linear;
      -o-transition: all 0.4s linear;
      transition: all 0.4s linear;
    }
    .close:hover{
      opacity: 0;
    }
    .circle-box.active.animate-box .close{
      opacity: 1;
    }
   .red-close{
      display: block;
      margin-top: 5px;
      color: #D45F29;
      font-size: 16px;
    }
     .circle-type-2.active .circle-items.active {
      -webkit-transition: all 0.4s linear;
      -moz-transition: all 0.4s linear;
      -ms-transition: all 0.4s linear;
      -o-transition: all 0.4s linear;
      transition: all 0.4s linear;
      width: 430px;
      height: 430px;
  }
  .circle-box.active.animate-box{
    -webkit-transition: all 0.4s linear;
      -moz-transition: all 0.4s linear;
      -ms-transition: all 0.4s linear;
      -o-transition: all 0.4s linear;
      transition: all 0.3s linear;
  }


  /*.circle-type-1*/
 .circle-type-1 .add-item{
  left: 71px;
  top: 156px;
 } 
.circle-type-1.circle-box.active.animate-box .circle-items {
  height: 415px;
  width: 415px;
}
.circle-type-1.circle-box.active.animate-box .item-1 {
    top: 137px;
    left: 319px;
}
.circle-type-1.circle-box.active.animate-box .item-2 {
  top: 15px;
  left: 136px;
}
.circle-type-1.circle-box.active.animate-box .item-4{
  left: 259px;
  top: 47px;
}
.circle-type-1.circle-box.active.animate-box .item-5{
  left: 33px;
  top: 210px;
}
.circle-type-1.circle-box.active.animate-box .item-6{
  left: 33px;
  top: 87px;
}
.circle-type-1.circle-box.active.animate-box .item-7{
  left: 300px;
  top: 250px;
}
.circle-type-1.circle-box.active.animate-box .item-8{
  left: 204px;
  top: 302px;
}
.circle-type-1.circle-box.active.animate-box .item-9{
  left: 103px;
  top: 295px;
}


  /*circle-type-2 */
.circle-type-2.circle-box.active.animate-box .item-2{
    left: 310px;
    top: 87px;
   }
.circle-type-2.circle-box.active.animate-box .item-1{
    left: 300px;
    top: 225px;
   }
.circle-type-2.circle-box.active.animate-box .item-5{
    left: 163px;
    top: 295px;
   }
.circle-type-2.circle-box.active.animate-box .item-6{
    left: 40px;
    top: 215px;
   }
.circle-type-2.circle-box.active.animate-box .item-7{
    left: 50px;
    top: 80px;
   }
.circle-box.active.animate-box .expert{opacity: 0;}

/*circle-type-3*/
.circle-type-3.circle-box.active.animate-box .close{
  top: 19px;
  right: 40px;
}
.circle-type-3.circle-box.active.animate-box  .circle-items {
    height: 420px;
    width: 420px;
}
.circle-type-3 .add-item{
    left: 180px;
    top: 190px;
}
.circle-type-3.circle-box.active.animate-box .item-1{
  display: block;
}
.circle-type-3.circle-box.active.animate-box .item-2{
    top: 45px;
    left: 256px;
}
.circle-type-3.circle-box.active.animate-box .item-3{
  left: 103px;
  top: 295px;
}
.circle-type-3.circle-box.active.animate-box .item-4{
  left: 103px;
  top: 295px;
}
.circle-type-3.circle-box.active.animate-box .item-5{
  left: 38px;
  top: 79px;
}
.circle-type-3.circle-box.active.animate-box .item-6{
  left: 26px;
  top: 200px;
}
.circle-type-3.circle-box.active.animate-box .item-7{
  left: 103px;
  top: 295px;
}
.circle-type-3.circle-box.active.animate-box .item-8{
  left: 219px;
  top: 295px;
}
.circle-type-3.circle-box.active.animate-box .item-9{
  left: 335px;
  top: 125px;
}
.circle-type-3.circle-box.active.animate-box .item-10{
  left: 301px;
  top: 238px;
}

/*circle-type-4*/
.circle-type-4.circle-box.active.animate-box .close{
  top: 20px;
  right: 70px;
}
.circle-type-4 .add-item{
  left: 195px;
  top: 133px;
}
.circle-type-4.circle-box.active.animate-box .item-1{
  display: block;
  left: 33px;
}
.circle-type-4.circle-box.active.animate-box .item-2{
  display: block;
}
.circle-type-4.circle-box.active.animate-box .item-3{
  left: 215px;
}
.circle-type-4.circle-box.active.animate-box .item-5{
  left: 40px;
  top: 90px;
}
.circle-type-4.circle-box.active.animate-box .item-6{
  left: 320px;
  top: 135px;
}
.circle-type-4.circle-box.active.animate-box .item-7{
  left: 270px;
  top: 258px;
}
.circle-type-4.circle-box.active.animate-box .item-8{
  left: 130px;
  top: 15px;
}

/*circle-type-5*/
.circle-type-5.circle-box.active.animate-box .close{
  top: 20px;
  right: -2px;
}
.circle-type-5 .add-item{
  left: 143px;
  top: 92px;
}
.circle-type-5.circle-box.active.animate-box .item-3{
  left: 130px;
  top: 15px;
}
.circle-type-5.circle-box.active.animate-box .item-4{
  left: 175px;
  top: 120px;
}
.circle-type-5.circle-box.active.animate-box .item-5{
  left: 81px;
  top: 162px
}








}