Zai
again
e339588
.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)
}