.gooey-example body {
  background: #673ab7;
  color: white;
  text-align: center; }

.gooey-example a {
  color: inherit; }

.gooey-example h1, h2, h3, h4 {
  margin: 0;
  margin-bottom: 10px;
  margin-top: 10px; }

.gooey-example h1 {
  font-size: 3em; }

.menu, .menu[data-status='opened'] {
  filter: url("#shadowed-goo"); }

.menu-item, .menu-open-button {
  position: absolute;
  top: 0px;
  color: white;
  text-align: center;
  transform: translate3d(0, 0, 0);
  transition: all ease-out 200ms;
  right: 0px; }

.menu-open {
  display: none; }

.hamburger {
  width: 25px;
  height: 3px;
  background: white;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  transition: transform 200ms; }

.hamburger-1 {
  transform: translate3d(0, -8px, 0); }

.hamburger-2 {
  transform: translate3d(0, 0, 0); }

.hamburger-3 {
  transform: translate3d(0, 8px, 0); }

.menu-open:checked + .menu-open-button .hamburger-1 {
  transform: translate3d(0, 0, 0) rotate(45deg); }
.menu-open:checked + .menu-open-button .hamburger-2 {
  transform: translate3d(0, 0, 0) scale(0.1, 1); }
.menu-open:checked + .menu-open-button .hamburger-3 {
  transform: translate3d(0, 0, 0) rotate(-45deg); }

.menu {
  position: absolute;
  right: 0%;
  margin-left: -80px;
  width: 250px;
  height: 25px;
  box-sizing: border-box;
  text-align: left; }

.menu[data-status='closed'] {
  filter: none; }

.menu-item:hover {
  color: #00bcd4; }
.menu-item:nth-child(3) {
  transition-duration: 180ms; }
.menu-item:nth-child(4) {
  transition-duration: 180ms; }
.menu-item:nth-child(5) {
  transition-duration: 180ms; }
.menu-item:nth-child(6) {
  transition-duration: 180ms; }
.menu-item:nth-child(7) {
  transition-duration: 180ms; }
.menu-item:nth-child(8) {
  transition-duration: 180ms; }
.menu-item:nth-child(9) {
  transition-duration: 180ms; }
.menu-item:nth-child(10) {
  transition-duration: 180ms; }

.menu-open-button {
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  cursor: pointer; }

.menu-open:checked + .menu-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  transform: scale(0.8, 0.8) translate3d(0, 0, 0); }

.menu-open:checked ~ .menu-item {
  transition-timing-function: cubic-bezier(0.165, 0.83, 0.34, 1); }
  .menu-open:checked ~ .menu-item:nth-child(3) {
    transition-duration: 190ms;
    transform: translate3d(-35px, 0, 0); opacity: 1 }
  .menu-open:checked ~ .menu-item:nth-child(4) {
    transition-duration: 290ms;
    transform: translate3d(-70px, 0, 0); opacity: 1 }
  .menu-open:checked ~ .menu-item:nth-child(5) {
    transition-duration: 390ms;
    transform: translate3d(-105px, 0, 0); opacity: 1 }
  .menu-open:checked ~ .menu-item:nth-child(6) {
    transition-duration: 490ms;
    transform: translate3d(-140px, 0, 0); opacity: 1 }
  .menu-open:checked ~ .menu-item:nth-child(7) {
    transition-duration: 590ms;
    transform: translate3d(-175px, 0, 0); opacity: 1 }
  .menu-open:checked ~ .menu-item:nth-child(8) {
    transition-duration: 690ms;
    transform: translate3d(-210px, 0, 0); opacity: 1 }
  .menu-open:checked ~ .menu-item:nth-child(9) {
    transition-duration: 790ms;
    transform: translate3d(-245px, 0, 0); opacity: 1 }
  .menu-open:checked ~ .menu-item:nth-child(10) {
    transition-duration: 890ms;
    transform: translate3d(-280px, 0, 0); opacity: 1 }

/* .menu-open:not(:checked) ~ .menu-item {
  transition-timing-function: cubic-bezier(0.165, 0.83, 0.34, 1); }
  .menu-open:checked ~ .menu-item:nth-child(3) {
    transition-duration: 190ms;
    transform: translate3d(-35px, 0, 0); opacity: 0; color: red }
  .menu-open:checked ~ .menu-item:nth-child(4) {
    transition-duration: 290ms;
    transform: translate3d(-70px, 0, 0); opacity: 0 }
  .menu-open:checked ~ .menu-item:nth-child(5) {
    transition-duration: 390ms;
    transform: translate3d(-105px, 0, 0); opacity: 0 }
  .menu-open:checked ~ .menu-item:nth-child(6) {
    transition-duration: 490ms;
    transform: translate3d(-140px, 0, 0); opacity: 0 }
  .menu-open:checked ~ .menu-item:nth-child(7) {
    transition-duration: 590ms;
    transform: translate3d(-175px, 0, 0); opacity: 0 }
  .menu-open:checked ~ .menu-item:nth-child(8) {
    transition-duration: 690ms;
    transform: translate3d(-210px, 0, 0); opacity: 0 }
  .menu-open:checked ~ .menu-item:nth-child(9) {
    transition-duration: 790ms;
    transform: translate3d(-245px, 0, 0); opacity: 0 }
  .menu-open:checked ~ .menu-item:nth-child(10) {
    transition-duration: 890ms;
    transform: translate3d(-280px, 0, 0); opacity: 0 } */

.menu-open:not(:checked) ~ .menu-item:nth-child(3) {
  transition-duration: 120ms;
  opacity: 0; }
.menu-open:not(:checked) ~ .menu-item:nth-child(4) {
  transition-duration: 150ms;
  opacity: 0; }
.menu-open:not(:checked) ~ .menu-item:nth-child(5) {
  transition-duration: 180ms;
  opacity: 0; }
.menu-open:not(:checked) ~ .menu-item:nth-child(6) {
  transition-duration: 210ms;
  opacity: 0; }
.menu-open:not(:checked) ~ .menu-item:nth-child(7) {
  transition-duration: 240ms;
  opacity: 0; }
.menu-open:not(:checked) ~ .menu-item:nth-child(8) {
  transition-duration: 270ms;
  opacity: 0; }
.menu-open:not(:checked) ~ .menu-item:nth-child(9) {
  transition-duration: 300ms;
  opacity: 0; }
.menu-open:not(:checked) ~ .menu-item:nth-child(10) {
  transition-duration: 330ms;
  opacity: 0; }

@media only screen and (max-width: 750px) {
  .menu {
    position: unset;
    right: unset;
    margin-left: 0px;
    width: 100%;
    height: 30px; } }

/*# sourceMappingURL=gooey.css.map */