Spaces:
Runtime error
Runtime error
| .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) | |
| } | |