#hbg-nav {
  font: 1em "Wendy One", "Zen Kaku Gothic New", sans-serif;
  /*margin: 1.5em auto;*/
  top: 0;
    left: 78%;
  padding-top: 10px;
  width: 5em;
  height: 4.5em;
  text-transform: uppercase;
  position: fixed;
}
#hbg-nav input {
  border-radius: 50%;
  cursor: pointer;
  display: block;
  position: absolute;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  z-index: 999;
}
#hbg-nav input:focus {
  outline: transparent;
}
#hbg-nav, #hbg-nav ul {
  position: relative;
}
#hbg-nav li, #hbg-nav span, #hbg-nav a, #hbg-nav label {
  display: block;
}
#hbg-nav li {
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
  width: 5em;
}
#hbg-nav li, #hbg-nav li span {
  position: absolute;
  transition: all 0.7s ease-out;
  transform-origin: 50% 0;
}
#hbg-nav li:first-child, #hbg-nav li:last-child {
  width: 4.4em;
}
#hbg-nav li:first-child span, #hbg-nav li:last-child span {
  line-height: 4.5;
}
#hbg-nav li:first-child {
  background: #ffd580;
  border-radius: 0 0 0.45em 0.45em / 0 0 100% 100%;
  box-shadow: 0.2em 0 0 #e69900 inset, -0.2em 0 0 #e69900 inset, 0 0 0 #e69900 inset, 0 -1.4em 0 #e69900 inset;
  top: 3.6em;
  height: 0.9em;
  z-index: 0;
}
#hbg-nav li:first-child label:before, #hbg-nav li:first-child label:after {
  background: #cc0000;
  border-radius: 0.2em;
  box-shadow: 0 -0.1em 0 maroon inset;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 0.4em;
}
#hbg-nav li:first-child label:before {
  background-image: radial-gradient(0.2em 0.3em at 0.2em 0.2em, #ff9999 49%, rgba(255, 153, 153, 0) 50%);
  transform: translate(-50%, -50%) rotate(45deg);
}
#hbg-nav li:first-child label:after {
  background-image: radial-gradient(0.2em 0.3em at 2.8em 0.2em, #ff9999 49%, rgba(255, 153, 153, 0) 50%);
  transform: translate(-50%, -50%) rotate(-45deg);
}
#hbg-nav li:nth-child(2) {
  background: #6b2e2e;
  background-image: repeating-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 4%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 20%);
  background-position: 0 -0.35em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 0.35em;
  box-shadow: 0.3em 0 0 #6b2e2e inset, -0.3em 0 0 #6b2e2e inset, 0 0 0 #6b2e2e inset, 0 -0.6em 0 #6b2e2e inset;
  top: 2.9em;
  width: 4.8em;
  height: 0.7em;
  z-index: 1;
}
#hbg-nav li:nth-child(2) span {
  line-height: 5;
}
#hbg-nav li:nth-child(2) a {
  color: white;
}
#hbg-nav li:nth-child(3) {
  background: #ffd500;
  background-image: radial-gradient(10% 10% at 15% 15%, #ffea80 49%, rgba(255, 234, 128, 0) 50%);
  border-radius: 0.1em;
  top: 2.7em;
  width: 4em;
  height: 0.2em;
  z-index: 2;
}
#hbg-nav li:nth-child(3) span {
  line-height: 4;
}
#hbg-nav li:nth-child(3):before {
  background: inherit;
  border-radius: 0 0 100% 50% / 0 0 100% 0;
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  right: 0;
  width: 0.8em;
  height: 0.8em;
  transform: rotate(-45deg);
  transform-origin: 0 0;
  transition: transform 0.7s ease-out;
}
#hbg-nav li:nth-child(4) {
  background: #40bf40;
  background-image: linear-gradient(45deg, rgba(102, 204, 102, 0) 24%, #66cc66 25%, #66cc66 27%, rgba(102, 204, 102, 0) 28%), linear-gradient(45deg, rgba(102, 204, 102, 0) 46%, #66cc66 47%, #66cc66 49%, rgba(102, 204, 102, 0) 50%), linear-gradient(45deg, rgba(102, 204, 102, 0) 74%, #66cc66 75%, #66cc66 77%, rgba(102, 204, 102, 0) 78%), linear-gradient(-45deg, rgba(102, 204, 102, 0) 46%, #66cc66 47%, #66cc66 52%, rgba(102, 204, 102, 0) 53%);
  background-position: 0 0;
  border-radius: 0.15em;
  box-shadow: 0 0.4em 0 #40bf40 inset, -0.4em 0 0 #40bf40 inset;
  top: 2.4em;
  width: 4.5em;
  height: 0.3em;
  z-index: 3;
}
#hbg-nav li:nth-child(4) span {
  line-height: 4.5;
}
#hbg-nav li:nth-child(5) {
  background: #ed765e;
  background-image: radial-gradient(20% 25% at 50% 30%, #e84f30 49%, rgba(232, 79, 48, 0) 50%), radial-gradient(20% 25% at 50% 70%, #e84f30 49%, rgba(232, 79, 48, 0) 50%), radial-gradient(25% 20% at 30% 50%, #e84f30 49%, rgba(232, 79, 48, 0) 50%), radial-gradient(25% 20% at 70% 50%, #e84f30 49%, rgba(232, 79, 48, 0) 50%);
  background-position: 0 -0.4em;
  border-radius: 0.2em;
  box-shadow: 0.4em 0 0 #e84f30 inset, -0.4em 0 0 #e84f30 inset, 0 0 0 #e84f30 inset, 0 -0.8em 0 #e84f30 inset;
  top: 2em;
  width: 5em;
  height: 0.4em;
  z-index: 4;
}
#hbg-nav li:nth-child(5) span {
  line-height: 5;
}
#hbg-nav li:last-child {
  background: #e69900;
  background-image: radial-gradient(0.5em 0.3em at 0.5em 0.2em, #ffdf80 0.15em, rgba(255, 223, 128, 0) 0.2em), radial-gradient(0.5em 0.3em at 0 0.7em, #ffdf80 0.15em, rgba(255, 223, 128, 0) 0.2em), radial-gradient(0.5em 0.3em at 1em 0.7em, #ffdf80 0.15em, rgba(255, 223, 128, 0) 0.2em);
  background-position: 0 0;
  background-size: 1em 1em;
  border-radius: 2em 2em 0 0 / 100% 100% 0 0;
  box-shadow: 0.4em 0 0 0 #e69900 inset, -0.4em 0 0 0 #e69900 inset;
  height: 2em;
  z-index: 5;
}
#hbg-nav li span, #hbg-nav li label, #hbg-nav li a {
  border-radius: inherit;
  height: 100%;
}
#hbg-nav li span {
  margin: auto;
  top: 0;
  width: 100%;
  transform: scaleY(0);
  transform-origin: 50% 0;
}
#hbg-nav li a {
  color: currentColor;
  text-decoration: none;
}
#hbg-nav li a:before {
  background: #cc0000;
  background-image: radial-gradient(0.4em 0.2em at 3.3em 0.1em, #ff9999 49%, rgba(255, 153, 153, 0) 50%);
  border-radius: 0.2em;
  box-shadow: 0 -0.1em 0 maroon inset;
  content: "";
  display: block;
  position: absolute;
  top: 62%;
  left: 50%;
  width: 3.5em;
  height: 0.4em;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.2s linear;
}
#hbg-nav li a:hover:before {
  transform: translateX(-50%) scaleX(1);
}
#hbg-nav li .sr {
  overflow: hidden;
  width: 0;
  height: 0;
}
#hbg-nav input:checked + ul li:nth-child(1) {
  border-radius: 50%;
  box-shadow: 0.1em 0 0 #e69900 inset, -0.1em 0 0 #e69900 inset, 0 0.1em 0 #e69900 inset, 0 -0.1em 0 #e69900 inset;
  height: 4.4em;
  transform: translate(-50%, -3.5em);
}
#hbg-nav input:checked + ul li:nth-child(2) {
  background-position: 0 0;
  border-radius: 50%;
  box-shadow: 0.3em 0 0 #6b2e2e inset, -0.3em 0 0 #6b2e2e inset, 0 0.3em 0 #6b2e2e inset, 0 -0.3em 0 #6b2e2e inset;
  height: 4.8em;
  transform: translate(-50%, 1.6em);
}
#hbg-nav input:checked + ul li:nth-child(3) {
  border-radius: 0.2em;
  height: 4em;
  transform: translate(-50%, 6.6em);
}
#hbg-nav input:checked + ul li:nth-child(3):before {
  transform: rotate(-90deg);
}
#hbg-nav input:checked + ul li:nth-child(4) {
  border-radius: 1.5em 1em 1.2em 0.8em;
  height: 4.5em;
  transform: translate(-50%, 10.9em);
}
#hbg-nav input:checked + ul li:nth-child(5) {
  border-radius: 50%;
  background-position: 0 0;
  box-shadow: 0.4em 0 0 #e84f30 inset, -0.4em 0 0 #e84f30 inset, 0 0.4em 0 #e84f30 inset, 0 -0.4em 0 #e84f30 inset;
  height: 5em;
  transform: translate(-50%, 15.8em);
}
#hbg-nav input:checked + ul li:nth-child(6) {
  border-radius: 50%;
  box-shadow: 0.1em 0 0 #e69900 inset, -0.1em 0 0 #e69900 inset, 0 0.1em 0 #e69900 inset, 0 -0.1em 0 #e69900 inset;
  height: 4.4em;
  background-position: 0 2.2em;
  transform: translate(-50%, 22.8em);
}
#hbg-nav input:checked + ul li span {
  transform: scaleY(1);
}