.menu-goo { -webkit-filter: url("#shadowed-goo"); filter: url("#shadowed-goo"); } .menu-goo .menu-item,.menu-goo .menu-open-button { background: #b3d9ff; border-radius: 100%; width: 70px; height: 70px; margin-left: 25px; position: absolute; top: 20px; color: white !important; font-size:40px; text-align: center; line-height: 70px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; } .menu-goo .menu-open { display: none; } .menu-goo .hamburger { width: 25px; height: 3px; background: white; display: block; position: absolute; top: 50%; left: 50%; margin-left: -12.5px; margin-top: -1.5px; transition: -webkit-transform 200ms; transition: transform 200ms; transition: transform 200ms, -webkit-transform 200ms; } .menu-goo .hamburger-1 { -webkit-transform: translate3d(0, -8px, 0); transform: translate3d(0, -8px, 0); } .menu-goo .hamburger-2 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .menu-goo .hamburger-3 { -webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0); } .menu-goo .menu-open:checked + .menu-open-button .hamburger-1 { -webkit-transform: translate3d(0, 0, 0) rotate(45deg); transform: translate3d(0, 0, 0) rotate(45deg); } .menu-goo .menu-open:checked + .menu-open-button .hamburger-2 { -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1); transform: translate3d(0, 0, 0) scale(0.1, 1); } .menu-goo .menu-open:checked + .menu-open-button .hamburger-3 { -webkit-transform: translate3d(0, 0, 0) rotate(-45deg); transform: translate3d(0, 0, 0) rotate(-45deg); } .menu-goo .menu { position: absolute; left: 50%; margin-left: -80px; padding-top: 20px; padding-left: 80px; width: 650px; height: 150px; box-sizing: border-box; font-size: 20px; text-align: left; } .menu-goo .menu-item:hover { background: white; color: #b3d9ff !important; } .menu-goo .menu-item:nth-child(3) { transition-duration: 180ms; } .menu-goo .menu-item:nth-child(4) { transition-duration: 180ms; } .menu-goo .menu-item:nth-child(5) { transition-duration: 180ms; } .menu-goo .menu-item:nth-child(6) { transition-duration: 180ms; } .menu-goo .menu-open-button { z-index: 2; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); transition-duration: 400ms; -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0); transform: scale(1.1, 1.1) translate3d(0, 0, 0); cursor: pointer; } .menu-goo .menu-open-button:hover { -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0); transform: scale(1.2, 1.2) translate3d(0, 0, 0); } .menu-goo .menu-open:checked + .menu-open-button { transition-timing-function: linear; transition-duration: 200ms; -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0); transform: scale(0.8, 0.8) translate3d(0, 0, 0); } .menu-goo .menu-open:checked ~ .menu-item { transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); } .menu-goo .menu-open:checked ~ .menu-item:nth-child(3) { transition-duration: 170ms; -webkit-transform: translate3d(-70px, 0, 0); transform: translate3d(-70px, 0, 0); } .menu-goo .menu-open:checked ~ .menu-item:nth-child(4) { transition-duration: 250ms; -webkit-transform: translate3d(-140px, 0, 0); transform: translate3d(-140px, 0, 0); } .menu-goo .menu-open:checked ~ .menu-item:nth-child(5) { transition-duration: 330ms; -webkit-transform: translate3d(-210px, 0, 0); transform: translate3d(-210px, 0, 0); } .menu-goo .menu-open:checked ~ .menu-item:nth-child(6) { transition-duration: 410ms; -webkit-transform: translate3d(-280px, 0, 0); transform: translate3d(-280px, 0, 0); } .menu-goo .menu-open:checked ~ .menu-item:nth-child(7) { transition-duration: 410ms; -webkit-transform: translate3d(-350px, 0, 0); transform: translate3d(-350px, 0, 0); } .menu-goo .menu-open:checked ~ .menu-item:nth-child(8) { transition-duration: 410ms; -webkit-transform: translate3d(-420px, 0, 0); transform: translate3d(-420px, 0, 0); } .menu-goo .menu-open:checked ~ .menu-item:nth-child(9) { transition-duration: 410ms; -webkit-transform: translate3d(-490px, 0, 0); transform: translate3d(-490px, 0, 0); } .menu-goo .menu-open:checked ~ .menu-item:nth-child(10) { transition-duration: 410ms; -webkit-transform: translate3d(-560px, 0, 0); transform: translate3d(-560px, 0, 0); }