/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */

.hamburger {
	display:inline-block;
	transition-property:opacity, filter;
	transition-duration:0.15s;
	transition-timing-function:linear;
	font:inherit;
	color:inherit;
	text-transform:none;
	background-color:transparent;
	border:0;
	margin:0;
    padding:0;
	overflow:visible;
}

.hamburger-box {position:relative; display:inline-block; vertical-align:middle;	width:35px;	height:35px;}

.hamburger-inner {
	display:block;
	top:50%;
	margin-top:-2px;
    opacity:0.7;
 }


.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    background-color:#fff;
	width:100%;
	height:5px;
	border-radius:2px;
	position:absolute;
	transition-property:transform;
	transition-duration:0.15s;
	transition-timing-function:ease;
}
.hamburger-inner::before, .hamburger-inner::after {content:""; display:block;}
.hamburger-inner::before {top:-11px;}
.hamburger-inner::after {bottom:-11px;}




/*
   * 3DX
   */
.hamburger--3dx .hamburger-box {
  perspective:80px; }

.hamburger--3dx .hamburger-inner {
  transition:transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
    transition:transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dx.is-active .hamburger-inner {
  background-color:transparent;
  transform:rotateY(180deg); }
  .hamburger--3dx.is-active .hamburger-inner::before {
    transform:translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--3dx.is-active .hamburger-inner::after {
    transform:translate3d(0, -10px, 0) rotate(-45deg); }



/*
   * 3DY
   */
.hamburger--3dy .hamburger-box {
  perspective:80px; }

.hamburger--3dy .hamburger-inner {
  transition:transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
    transition:transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dy.is-active .hamburger-inner {
  background-color:transparent;
  transform:rotateX(-180deg); }
  .hamburger--3dy.is-active .hamburger-inner::before {
    transform:translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--3dy.is-active .hamburger-inner::after {
    transform:translate3d(0, -10px, 0) rotate(-45deg); }


/*
   * 3DXY
   */
.hamburger--3dxy .hamburger-box {
  perspective:80px; }

.hamburger--3dxy .hamburger-inner {
  transition:transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after {
    transition:transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dxy.is-active .hamburger-inner {
  background-color:transparent;
  transform:rotateX(180deg) rotateY(180deg); }
  .hamburger--3dxy.is-active .hamburger-inner::before {
    transform:translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--3dxy.is-active .hamburger-inner::after {
    transform:translate3d(0, -10px, 0) rotate(-45deg); }





/*
   * Spin
   */
.hamburger--spin .hamburger-inner {
  transition-duration:0.22s;
  transition-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin .hamburger-inner::before {
    transition:top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin .hamburger-inner::after {
    transition:bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.is-active .hamburger-inner {
  transform:rotate(225deg);
  transition-delay:0.12s;
  transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spin.is-active .hamburger-inner::before {
    top:0;
    opacity:0;
    transition:top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .hamburger--spin.is-active .hamburger-inner::after {
    bottom:0;
    transform:rotate(-90deg);
    transition:bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }



/*
   * Squeeze
   */
.hamburger--squeeze .hamburger-inner {
  transition-duration:0.075s;
  transition-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    transition:top 0.075s 0.12s ease, opacity 0.075s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    transition:bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
  transform:rotate(45deg);
  transition-delay:0.12s;
  transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--squeeze.is-active .hamburger-inner::before {
    top:0;
    opacity:0;
    transition:top 0.075s ease, opacity 0.075s 0.12s ease; }
  .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom:0;
    transform:rotate(-90deg);
    transition:bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Vortex
   */
.hamburger--vortex .hamburger-inner {
  transition-duration:0.2s;
  transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1); }
  .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after {
    transition-duration:0s;
    transition-delay:0.1s;
    transition-timing-function:linear; }
  .hamburger--vortex .hamburger-inner::before {
    transition-property:top, opacity; }
  .hamburger--vortex .hamburger-inner::after {
    transition-property:bottom, transform; }

.hamburger--vortex.is-active .hamburger-inner {
  transform:rotate(765deg);
  transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1); }
  .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after {
    transition-delay:0s; }
  .hamburger--vortex.is-active .hamburger-inner::before {
    top:0;
    opacity:0; }
  .hamburger--vortex.is-active .hamburger-inner::after {
    bottom:0;
    transform:rotate(90deg); }