.c-circle-menu {
     position: fixed;
     bottom: 150px;
     left: 10px;
     z-index: 1000;
     width: 600px;
     height: 99px;
     border-radius: 500px;
   }
   .c-circle-menu__items {
     display: block;
     list-style: none;
     position: absolute;
     z-index: 2;
     margin: 0;
     padding: 0;
   }

   .c-circle-menu__item {
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: 65px;
     height: 65px;
     border-radius: 0;
     opacity: 0;
     transition: opacity 0.3s, transform 0.3s;
     transition-timing-function: cubic-bezier(0.35, -0.59, 0.47, 0.97);
   }

   .c-circle-menu__item:nth-child(1) { transition-delay: 0.4s; }
   .c-circle-menu__item:nth-child(2) { transition-delay: 0.3s; }
   .c-circle-menu__item:nth-child(3) { transition-delay: 0.2s; }
   .c-circle-menu__item:nth-child(4) { transition-delay: 0.1s; }
   .c-circle-menu__item:nth-child(5) { transition-delay: 0s; }

   .c-circle-menu.is-active .c-circle-menu__item {
     transition-timing-function: cubic-bezier(0.35, 0.03, 0.47, 1.59);
     opacity: 1;
   }


   .c-circle-menu.is-active .c-circle-menu__item:nth-child(1) {
     transform: translate(0, -100px); /* 12 o'clock */
   }

   .c-circle-menu.is-active .c-circle-menu__item:nth-child(2) {
     transform: translate(70px, -70px); /* 1 o'clock */
   }

   .c-circle-menu.is-active .c-circle-menu__item:nth-child(3) {
     transform: translate(100px, 0); /* 3 o'clock */
   }

   .c-circle-menu.is-active .c-circle-menu__item:nth-child(4) {
     transform: translate(70px, 70px); /* 5 o'clock */
   }

   .c-circle-menu.is-active .c-circle-menu__item:nth-child(5) {
     transform: translate(0, 100px); /* 6 o'clock */
   }



   .c-circle-menu__link {
     display: block;
     width: 100%;
     height: 100%;
     border-radius: 1000px;
     box-shadow: inset 0 0 0 2px #0066ff;
   }

   .c-circle-menu__link:hover {
     box-shadow: inset 0 0 0 2px #0019fd;
   }

   .c-circle-menu__link img {
     display: block;
     max-width: 100%;
     height: auto;
   }

   .c-circle-menu__toggle {
     display: block;
     position: absolute;
     z-index: 100;
     margin: 0;
     padding: 0;
     width: 48px;
     height: 48px;
     background-color: #0066ff;
     font: inherit;
     font-size: 0;
     text-indent: -9999px;
     border-radius: 10px;
     transition: background 0.3s;
     cursor: pointer;
     border: none;
     appearance: none;
     box-shadow: none;
   }

   .c-circle-menu__toggle.is-active,
   .c-circle-menu__toggle:focus,
   .c-circle-menu__toggle:hover {
     outline: 0;
     background-color: #0066ff;
   }

   .c-circle-menu__toggle span,
   .c-circle-menu__toggle span::after,
   .c-circle-menu__toggle span::before {
     display: block;
     position: absolute;
     height: 4px;
     background: #fff;
     border-radius: 0;
   }

   .c-circle-menu__toggle span {
     top: 22px;
     left: 10px;
     right: 10px;
     transition: background 0.3s;
   }

   .c-circle-menu__toggle span::after,
   .c-circle-menu__toggle span::before {
     left: 0;
     width: 100%;
     content: "";
     transition-duration: 0.3s, 0.3s;
     transition-delay: 0.3s, 0s;
   }

   .c-circle-menu__toggle span::before {
     top: -8px;
     transition-property: top, transform;
   }

   .c-circle-menu__toggle span::after {
     bottom: -8px;
     transition-property: bottom, transform;
   }

   .c-circle-menu__toggle.is-active span {
     background: 0 0;
   }

   .c-circle-menu__toggle.is-active span::before {
     top: 0;
     transform: rotate(45deg);
     transition-delay: 0s, 0.3s;
   }

   .c-circle-menu__toggle.is-active span::after {
     bottom: 0;
     transform: rotate(-45deg);
     transition-delay: 0s, 0.3s;
   }

   .c-circle-menu__mask {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1;
     visibility: hidden;
     opacity: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.8);
     transition: opacity 0.3s, visibility 0.3s;
   }

   .c-circle-menu__mask.is-active {
     opacity: 1;
     visibility: visible;
   }


     .c-circle-menu__toggle {
       width: 60px;
       height: 60px;
     }

     .c-circle-menu__toggle span,
     .c-circle-menu__toggle span::after,
     .c-circle-menu__toggle span::before {
       height: 8px;
     }

     .c-circle-menu__toggle span {
       top: 25px;
     }

     .c-circle-menu__toggle span::before {
       top: -16px;
     }

     .c-circle-menu__toggle span::after {
       bottom: -16px;
     }
   }