.box.hamgrid {

}

.ham-grid {
  position: relative;
  width: 48px;
  height: 48px;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 40%;
  border-radius: 50%;

}
.ham-grid .dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #000; background: var(--nav-title-color);
  transition: opacity .3s, -webkit-transform .3s;
  transition: transform .3s, opacity .3s;
  transition: transform .3s, opacity .3s, -webkit-transform .3s;
}
.ham-grid .dot.a {
  left: 16.6666%;
  top: 16.6666%;
}
.ham-grid .dot.b {
  left: 50%;
  top: 16.6666%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.ham-grid .dot.c {
  right: 16.6666%;
  top: 16.6666%;
}
.ham-grid .dot.d {
  left: 16.6666%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.ham-grid .dot.e {
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.ham-grid .dot.f {
  right: 16.6666%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.ham-grid .dot.g {
  left: 16.6666%;
  bottom: 16.6666%;
}
.ham-grid .dot.h {
  left: 50%;
  bottom: 16.6666%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.ham-grid .dot.i {
  right: 16.6666%;
  bottom: 16.6666%;
}
.ham-grid:hover .dot {
  background: red; background: var(--accent-color);
}

.ham-grid .dot.b.dotmove {
  -webkit-transform: translateX(85%) translateY(140%);
          transform: translateX(85%) translateY(140%);
}
.ham-grid .dot.d.dotmove {
  -webkit-transform: translateY(-180%) translateX(135%);
          transform: translateY(-180%) translateX(135%);
}
.ham-grid .dot.f.dotmove {
  -webkit-transform: translateY(80%) translateX(-140%);
          transform: translateY(80%) translateX(-140%);
}
.ham-grid .dot.h.dotmove {
  -webkit-transform: translateX(-180%) translateY(-135%);
          transform: translateX(-180%) translateY(-135%);
}

.ham-grid.dotmove {
          transform: rotate(-90deg);
          transform-origin: center center;
}