.hamburger{width: 100px; height: 100px; display: inline-block; cursor: pointer; background-color: transparent; border: 0}
.hamburger-box{width: 40px; height: 24px; display: inline-block; position: relative}
.hamburger-inner{display: block; top: 50%; margin-top: -2px}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{width: 35px; height: 2px; background-color: #fff; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease}

.hamburger-inner:before{width: 30px}
.is-active .hamburger-inner:before{width: 35px}
.hamburger-inner:before, .hamburger-inner:after{content: ""; display: block}
.hamburger-inner:before{top: -10px}
.hamburger-inner:after{bottom: -10px}

.hamburger--collapse .hamburger-inner{top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)}
.hamburger--collapse .hamburger-inner:after{top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear}
.hamburger--collapse .hamburger-inner:before{transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)}

.hamburger--collapse.is-active .hamburger-inner{transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)}
.hamburger--collapse.is-active .hamburger-inner:after{top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear}
.hamburger--collapse.is-active .hamburger-inner::before{top: 0; transform: rotate(-90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1)}

.hamburger--collapse-r .hamburger-inner{top: auto; bottom: 0; transition-duration: 0.13s; transition-delay: 0.13s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19)}
.hamburger--collapse-r .hamburger-inner:after{top: -20px; transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear}
.hamburger--collapse-r .hamburger-inner:before{transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19)}
.hamburger--collapse-r.is-active .hamburger-inner{transform: translate3d(0, -10px, 0) rotate(45deg);
  transition-delay: 0.22s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)}
.hamburger--collapse-r.is-active .hamburger-inner:after{top: 0; opacity: 0; transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear}
.hamburger--collapse-r.is-active .hamburger-inner:before{top: 0; transform: rotate(90deg); transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1)}