.menu { width:80px; height: 80px; box-sizing: border-box; font-size:12px; }

.menu-open { display: none; }
.menu-open-button { border:5px double #ffffff; border-radius: 50%; width: 50px; height: 50px; margin-left: 0px; position: absolute; color: #FFFFFF; text-align: center; line-height: 50px; -webkit-transform: ranslate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; }
.menu-open-button { z-index: 12; cursor: pointer; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); }
.menu-open:checked + .menu-open-button { -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-duration: 200ms; 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-item { background: #555555; border-radius: 50%; width: 49px; height: 49px; line-height: 49px; position: absolute; color: #FFFFFF; text-align: center; text-decoration:none; margin:3px; z-index: 11;}
.menu-item:hover { background: #EEEEEE; color: #3290B1; }

.menu-open:checked ~ .menu-item { -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); }
.menu-open:checked ~ .menu-item:nth-child(3) { transition-duration: 180ms; -webkit-transition-duration: 180ms; -webkit-transform: translate3d(0.08361px, -74.99997px, 0); transform: translate3d(0.08361px, -74.99997px, 0); }
.menu-open:checked ~ .menu-item:nth-child(4) { transition-duration: 280ms; -webkit-transition-duration: 280ms; -webkit-transform: translate3d(60.9466px, -32.47586px, 0); transform: translate3d(60.9466px, -32.47586px, 0); }
.menu-open:checked ~ .menu-item:nth-child(5) { transition-duration: 380ms; -webkit-transition-duration: 380ms; -webkit-transform: translate3d(60.9466px, 32.47586px, 0); transform: translate3d(60.9466px, 32.47586px, 0); }
.menu-open:checked ~ .menu-item:nth-child(6) { transition-duration: 480ms; -webkit-transition-duration: 480ms; -webkit-transform: translate3d(0.08361px, 74.99997px, 0); transform: translate3d(0.08361px, 74.99997px, 0); }
.menu-open:checked ~ .menu-item:nth-child(7) { transition-duration: 580ms; -webkit-transition-duration: 580ms; -webkit-transform: translate3d(-60.86291px, 32.62064px, 0); transform: translate3d(-60.86291px, 32.62064px, 0); }
.menu-open:checked ~ .menu-item:nth-child(8) { transition-duration: 680ms; -webkit-transition-duration: 680ms; -webkit-transform: translate3d(-60.03006px, -32.33095px, 0); transform: translate3d(-60.03006px, -32.33095px, 0); }

.bluer { background-color: #669AE1; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }
.bluer:hover { color: #669AE1; text-shadow: none; }
.greenr { background-color: #70CC72; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }
.greenr:hover { color: #70CC72; text-shadow: none; }
.redr { background-color: #FE4365; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }
.redr:hover { color: #FE4365; text-shadow: none; }
.purpler { background-color: #C49CDE; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }
.purpler:hover { color: #C49CDE; text-shadow: none; }
.oranger { background-color: #FC913A; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }
.oranger:hover { color: #FC913A; text-shadow: none; }
.lightbluer { background-color: #62C2E4; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); }
.lightbluer:hover { color: #62C2E4; text-shadow: none; }