.main {
      display: flex;
      height: 100vh;
      width: 100vw;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .navigation-circle {
      display: block;
      position: relative;
      height: 500px;
      width: 500px;
      margin: auto;
    }

    .navigation-circle__inner {
      display: block;
      position: relative;
      height: 100%;
      width: 100%;
    }
	.navigation-circle__inner .navigation-circle__content {
      position: absolute;
      width: 400px;
      height: 350px;
      padding: 35px;
      margin: auto;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      display:flex;
      flex-direction: column;
      align-items: center;
    }

    .navigation-circle__list {
      display: block;
      position: absolute;
      height: 500px;
      width: 500px;
      transform: rotate(-90deg);
      animation: 2.2s cubic-bezier(0.25, -0.25, 0.35, 1) 0 1 animate-in-list forwards;
    }

    .navigation-circle-svg {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transform: rotateZ(-90deg);
    }

    .navigation-circle-svg--opaque {
      opacity: 0.5;
    }

    .navigation-circle-svg--mask circle {
      transition: all 0.5s ease;
      transition-delay: 0.5s;
      animation: 2.2s ease 0 1 animate-in-svg-circle-mask backwards;
    }

    .navigation-circle-list-item {
      display: block;
      position: absolute;
      height: 0;
      width: calc(50% + 16px);
      top: 50%;
      left: 50%;
      list-style: none;
      transform-origin: 0 0;
    }

    .navigation-circle-list-item__point {
      display: block;
      position: absolute;
      height: 32px;
      width: 32px;
      top: -16px;
      right: 2px;
      cursor: pointer;
      transform: scale(0);
    }

    .navigation-circle-list-item__point:before {
      content: "•";
      display: block;
      position: absolute;
      height: 32px;
      width: 32px;
      top: 0;
      color: #ffffff;
      background-color: #ffffff;
      font-size: 12px;
      font-weight: 400;
      line-height: 32px;
      text-align: center;
      border: 2px solid #ffffff;
      border-radius: 50%;
      box-shadow: inset 0px 0px 0px 0px #ffffff;
      transform: scale(0.75);
      transition: all 0.5s ease;
    }

    .navigation-circle-list-item__point:after {
      content: "";
      display: block;
      position: absolute;
      height: 1px;
      width: 0px;
      top: 18px;
      left: 31px;
      background-color: #ffffff;
      transition: all 0.5s ease;
    }

    .navigation-circle-list-item__meta {
      display: block;
      position: absolute;
      overflow: hidden;
      opacity: 0;
      transform-origin: center;
      margin-left: 78px;
      min-width: 128px;
      padding: 4px;
    }

    .navigation-circle-list-item__title {
      display: block;
      color: #ffffff;
      text-align: left;
      font-size: 14px;
      border-bottom: 1px solid #ffffff;
      padding-bottom: 4px;
      margin-bottom: 6px;
    }

    .navigation-circle-list-item__subtitle {
      display: block;
      color: #ffffff;
      text-align: left;
      font-weight: 200;
      font-size: 12px;
    }

    .navigation-circle-list-item:nth-of-type(1) {
      transform: rotateZ(calc((360deg / 6) * 1));
    }

    .navigation-circle-list-item:nth-of-type(1) .navigation-circle-list-item__meta {
      /* transform: rotateZ(38.5714285714deg); */
      transform: rotateZ(30deg);
    }

    .navigation-circle-list-item:nth-of-type(1) .navigation-circle-list-item__point {
      animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0s 1 animate-in-list-item-point forwards;
    }

    .navigation-circle-list-item:nth-of-type(2) {
      transform: rotateZ(calc((360deg / 6) * 2));
    }

    .navigation-circle-list-item:nth-of-type(2) .navigation-circle-list-item__meta {
      /* transform: rotateZ(-6.8571428571deg); */
      transform: rotateZ(-30deg);
    }

    .navigation-circle-list-item:nth-of-type(2) .navigation-circle-list-item__point {
      animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0.2s 1 animate-in-list-item-point forwards;
    }

    .navigation-circle-list-item:nth-of-type(3) {
      transform: rotateZ(calc((360deg / 6) * 3));
    }

    .navigation-circle-list-item:nth-of-type(3) .navigation-circle-list-item__meta {
      /* transform: rotateZ(-64.2857142857deg); */
      transform: rotateZ(-90deg);
    }

    .navigation-circle-list-item:nth-of-type(3) .navigation-circle-list-item__point {
      animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0.4s 1 animate-in-list-item-point forwards;
    }

    .navigation-circle-list-item:nth-of-type(4) {
      transform: rotateZ(calc((360deg / 6) * 4));
    }

    .navigation-circle-list-item:nth-of-type(4) .navigation-circle-list-item__meta {
      /* transform: rotateZ(-115.7142857143deg); */
      transform: rotateZ(-150deg);
    }

    .navigation-circle-list-item:nth-of-type(4) .navigation-circle-list-item__point {
      animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0.6s 1 animate-in-list-item-point forwards;
    }

    .navigation-circle-list-item:nth-of-type(5) {
      transform: rotateZ(calc((360deg / 6) * 5));
    }

    .navigation-circle-list-item:nth-of-type(5) .navigation-circle-list-item__meta {
      /* transform: rotateZ(-167.1428571429deg); */
      transform: rotateZ(-210deg);
    }

    .navigation-circle-list-item:nth-of-type(5) .navigation-circle-list-item__point {
      animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 0.8s 1 animate-in-list-item-point forwards;
    }

    .navigation-circle-list-item:nth-of-type(6) {
      transform: rotateZ(calc((360deg / 6) * 6));
    }

    .navigation-circle-list-item:nth-of-type(6) .navigation-circle-list-item__meta {
      /* transform: rotateZ(-218.5714285714deg); */
      transform: rotateZ(90deg);
    }

    .navigation-circle-list-item:nth-of-type(6) .navigation-circle-list-item__point {
      animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 1s 1 animate-in-list-item-point forwards;
    }

    .navigation-circle-list-item:nth-of-type(7) {
      transform: rotateZ(calc((360deg / 7) * 7));
    }

    .navigation-circle-list-item:nth-of-type(7) .navigation-circle-list-item__meta {
      transform: rotateZ(-270deg);
    }

    .navigation-circle-list-item:nth-of-type(7) .navigation-circle-list-item__point {
      animation: 1s cubic-bezier(0.55, -0.3, 0.6, 1.5) 1.2s 1 animate-in-list-item-point forwards;
    }

    .navigation-circle-list-item:hover .navigation-circle-list-item__point:before {
      transform: scale(1);
      font-size: 16px;
    }

    .navigation-circle-list-item:hover .navigation-circle-list-item__point:after {
      width: 32px;
      left: 34px;
    }

    .navigation-circle-list-item:hover .navigation-circle-list-item__meta {
      opacity: 1;
    }

    .navigation-circle-list-item:active .navigation-circle-list-item__point:before,
    .navigation-circle-list-item.active .navigation-circle-list-item__point:before {
      transform: scale(0.85);
      color: #4d8130;
      box-shadow: inset 0px 0px 0px 16px #4d8130;
      border-color: transparent;
    }

    .navigation-circle-list-item:active .navigation-circle-list-item__point:after,
    .navigation-circle-list-item.active .navigation-circle-list-item__point:after {
      width: 34px;
      left: 32px;
    }

    .navigation-circle-list-item:active .navigation-circle-list-item__meta,
    .navigation-circle-list-item.active .navigation-circle-list-item__meta {
      opacity: 1;
    }

    @keyframes animate-in-list {
      0% {
        transform: rotate(-540deg);
      }

      100% {
        transform: rotate(-90deg);
      }
    }

    @keyframes animate-in-svg-circle-mask {
      0% {
        stroke-dashoffset: 1005;
      }

      100% {
        stroke-dashoffset: 0;
      }
    }

    @keyframes animate-in-list-item-point {
      0% {
        transform: scale(0);
      }

      100% {
        transform: scale(1);
      }
    }