.navimenu { position: relative; min-width: 50px; min-height: 50px; box-sizing: border-box; text-align: left; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; outline: transparent solid 5px; transform-style: preserve-3d } .navimenu .gooey-menu-item, .navimenu .open-button { border-radius: 100%; position: absolute; color: #fff; text-align: center; font-size: .9em; transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transition: transform ease-out 200ms; -ms-transition: transform ease-out 200ms; -o-transition: transform ease-out 200ms; -moz-transition: transform ease-out 200ms; -webkit-transition: transform ease-out 200ms; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; outline: transparent solid 5px; transform-style: preserve-3d } .navimenu .menu-open { display: none } .navimenu .burger { background: #fff; display: block; position: absolute; top: 50%; left: 50%; margin-top: -1.5px; transition: transform 200ms; -ms-transition: transform 200ms; -moz-transition: transform 200ms; -webkit-transition: transform 200ms; -o-transition: transform 200ms } .navimenu .burger-1 { transform: translate3d(0, -8px, 0); -moz-transform: translate3d(0, -8px, 0); -o-transform: translate3d(0, -8px, 0); -webkit-transform: translate3d(0, -8px, 0); -ms-transform: translate3d(0, -8px, 0) } .navimenu .burger-2 { transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0) } .navimenu .burger-3 { transform: translate3d(0, 8px, 0); -ms-transform: translate3d(0, 8px, 0); -moz-transform: translate3d(0, 8px, 0); -o-transform: translate3d(0, 8px, 0); -webkit-transform: translate3d(0, 8px, 0) } .navimenu .menu-open:checked + .open-button .burger-1 { transform: translate3d(0, 0, 0) rotate(45deg); -ms-transform: translate3d(0, 0, 0) rotate(45deg); -moz-transform: translate3d(0, 0, 0) rotate(45deg); -o-transform: translate3d(0, 0, 0) rotate(45deg); -webkit-transform: translate3d(0, 0, 0) rotate(45deg) } .navimenu .menu-open:checked + .open-button .burger-2 { transform: translate3d(0, 0, 0) scale(.1, 1); -ms-transform: translate3d(0, 0, 0) scale(.1, 1); -moz-transform: translate3d(0, 0, 0) scale(.1, 1); -o-transform: translate3d(0, 0, 0) scale(.1, 1); -webkit-transform: translate3d(0, 0, 0) scale(.1, 1) } .navimenu .menu-open:checked + .open-button .burger-3 { transform: translate3d(0, 0, 0) rotate(-45deg); -ms-transform: translate3d(0, 0, 0) rotate(-45deg); -moz-transform: translate3d(0, 0, 0) rotate(-45deg); -webkit-transform: translate3d(0, 0, 0) rotate(-45deg); -o-transform: translate3d(0, 0, 0) rotate(-45deg) } .navimenu .gooey-menu-item:hover { /*background-color: #4682b4;*/ /*color: #00bcd4*/ } .navimenu .gooey-menu-item { transition-duration: 180ms; -moz-transition-duration: 180ms; -webkit-transition-duration: 180ms; -o-transition-duration: 180ms } .navimenu .open-button { z-index: 2; transition-timing-function: cubic-bezier(.175, .885, .32, 1.275); -ms-transition-timing-function: cubic-bezier(.175, .885, .32, 1.275); -moz-transition-timing-function: cubic-bezier(.175, .885, .32, 1.275); -webkit-transition-timing-function: cubic-bezier(.175, .885, .32, 1.275); -o-transition-timing-function: cubic-bezier(.175, .885, .32, 1.275); transition-duration: 400ms; -ms-transition-duration: 400ms; -o-transition-duration: 400ms; -moz-transition-duration: 400ms; -webkit-transition-duration: 400ms; transform: scale(1.1, 1.1) translate3d(0, 0, 0); -ms-transform: scale(1.1, 1.1) translate3d(0, 0, 0); -o-transform: scale(1.1, 1.1) translate3d(0, 0, 0); -moz-transform: scale(1.1, 1.1) translate3d(0, 0, 0); -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0); cursor: pointer } .navimenu .open-button:hover { transform: scale(1.2, 1.2) translate3d(0, 0, 0); -ms-transform: scale(1.2, 1.2) translate3d(0, 0, 0); -moz-transform: scale(1.2, 1.2) translate3d(0, 0, 0); -o-transform: scale(1.2, 1.2) translate3d(0, 0, 0); -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0) } .navimenu .menu-open:checked + .open-button { transition: 200ms linear; -ms-transition: 200ms linear; -webkit-transition: 200ms linear; -moz-transition: 200ms linear; -o-transition: 200ms linear; transform: scale(.9, .9) translate3d(0, 0, 0); -ms-transform: scale(.9, .9) translate3d(0, 0, 0); -o-transform: scale(.9, .9) translate3d(0, 0, 0); -webkit-transform: scale(.9, .9) translate3d(0, 0, 0); -moz-transform: scale(.9, .9) translate3d(0, 0, 0) }