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

.hamburger {
    font: inherit;
    position: absolute;
    right: 13px;
    top: 40px;
    overflow: visible;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition-timing-function: linear;
    transition-duration: .15s;
    transition-property: opacity,-webkit-filter;
    transition-property: opacity,filter;
    transition-property: opacity,filter,-webkit-filter;
    text-transform: none;
    color: inherit;
    border: 0;
    background-color: transparent;
}

    .hamburger:hover {
        opacity: .7;
    }

.hamburger-box {
    position: relative;
    display: inline-block;
    width: 33px;
    height: 24px;
}

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

    .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before {
        position: absolute;
        width: 33px;
        height: 4px;
        transition-timing-function: ease;
        transition-duration: .15s;
        transition-property: -webkit-transform;
        transition-property: transform;
        transition-property: transform,-webkit-transform;
        border-radius: 4px;
        background-color: #ffffff;
    }

    .transparent .hamburger-inner, .transparent .hamburger-inner:after, .transparent .hamburger-inner:before {
        background-color: white;
    }

    .scrolled .hamburger-inner, .scrolled .hamburger-inner:after, .scrolled .hamburger-inner:before {
        background-color: #ffffff;
    }

        .hamburger-inner:after, .hamburger-inner:before {
            display: block;
            content: '';
        }

        .hamburger-inner:before {
            top: -10px;
        }

        .hamburger-inner:after {
            bottom: -10px;
        }

.hamburger--spin .hamburger-inner {
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .3s;
}

    .hamburger--spin .hamburger-inner:before {
        transition: top .1s .34s ease-in,opacity .1s ease-in;
    }

    .hamburger--spin .hamburger-inner:after {
        transition: bottom .1s .34s ease-in,-webkit-transform .3s cubic-bezier(.55,.055,.675,.19);
        transition: bottom .1s .34s ease-in,transform .3s cubic-bezier(.55,.055,.675,.19);
        transition: bottom .1s .34s ease-in,transform .3s cubic-bezier(.55,.055,.675,.19),-webkit-transform .3s cubic-bezier(.55,.055,.675,.19);
    }

.hamburger--spin.is-active .hamburger-inner {
    transition-delay: .14s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}

    .hamburger--spin.is-active .hamburger-inner:before {
        top: 0;
        transition: top .1s ease-out,opacity .1s .14s ease-out;
        opacity: 0;
    }

    .hamburger--spin.is-active .hamburger-inner:after {
        bottom: 0;
        transition: bottom .1s ease-out,-webkit-transform .3s .14s cubic-bezier(.215,.61,.355,1);
        transition: bottom .1s ease-out,transform .3s .14s cubic-bezier(.215,.61,.355,1);
        transition: bottom .1s ease-out,transform .3s .14s cubic-bezier(.215,.61,.355,1),-webkit-transform .3s .14s cubic-bezier(.215,.61,.355,1);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }


.hamburger {transition: top 1.4s ease}
.fixed .hamburger{top:2px;}