.hamburglar {
    z-index: 100;
    -webkit-transform: scale(1);
    transform: scale(1);
    display: block;
    width: 68px;
    height: 68px;
    background: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.path-burger {
    position: absolute;
    top: 0;
    left: 0;
    height: 68px;
    width: 68px;
    -webkit-mask: url(#mask);
    mask: url(#mask);
    -webkit-mask-box-image: url(/Content/img/mask.svg);
}

.animate-path {
    position: absolute;
    top: 0;
    left: 0;
    width: 68px;
    height: 68px;
}

.path-rotation {
    height: 34px;
    width: 34px;
    margin: 34px 34px 0 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

    .path-rotation:before {
        content: '';
        display: block;
        width: 30px;
        height: 34px;
        margin: 0 4px 0 0;
        background: #1b2b5b;
    }

@-webkit-keyframes rotate-out {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    40% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-out {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    40% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate-in {
    0% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    40% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes rotate-in {
    0% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }

    40% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.hamburglar.is-open .path {
    -webkit-animation: dash-in 0.6s linear normal;
    animation: dash-in 0.6s linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.hamburglar.is-open .animate-path {
    -webkit-animation: rotate-in 0.6s linear normal;
    animation: rotate-in 0.6s linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.hamburglar.is-closed .path {
    -webkit-animation: dash-out 0.6s linear normal;
    animation: dash-out 0.6s linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.hamburglar.is-closed .animate-path {
    -webkit-animation: rotate-out 0.6s linear normal;
    animation: rotate-out 0.6s linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.path {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    stroke-linejoin: round;
}

@-webkit-keyframes dash-in {
    0% {
        stroke-dashoffset: 240;
    }

    40% {
        stroke-dashoffset: 240;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes dash-in {
    0% {
        stroke-dashoffset: 240;
    }

    40% {
        stroke-dashoffset: 240;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes dash-out {
    0% {
        stroke-dashoffset: 0;
    }

    40% {
        stroke-dashoffset: 240;
    }

    100% {
        stroke-dashoffset: 240;
    }
}

@keyframes dash-out {
    0% {
        stroke-dashoffset: 0;
    }

    40% {
        stroke-dashoffset: 240;
    }

    100% {
        stroke-dashoffset: 240;
    }
}

.burger-icon {
    position: absolute;
    padding: 20px 16px;
    height: 68px;
    width: 68px;
}

.burger-container {
    position: relative;
    height: 28px;
    width: 36px;
}

.burger-bun-top,
.burger-bun-bot,
.burger-filling {
    position: absolute;
    display: block;
    height: 4px;
    width: 36px;
    border-radius: 2px;
    background: #cb9765;
}

.burger-bun-top {
    top: 0;
    -webkit-transform-origin: 34px 2px;
    transform-origin: 34px 2px;
}

.burger-bun-bot {
    bottom: 0;
    -webkit-transform-origin: 34px 2px;
    transform-origin: 34px 2px;
}

.burger-filling {
    top: 12px;
}

.burger-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 68px;
    height: 68px;
}

.svg-ring {
    width: 68px;
    height: 68px;
}

.hamburglar.is-open .burger-bun-top {
    -webkit-animation: bun-top-out 0.6s linear normal;
    animation: bun-top-out 0.6s linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.hamburglar.is-open .burger-bun-bot {
    -webkit-animation: bun-bot-out 0.6s linear normal;
    animation: bun-bot-out 0.6s linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.hamburglar.is-closed .burger-bun-top {
    -webkit-animation: bun-top-in 0.6s linear normal;
    animation: bun-top-in 0.6s linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.hamburglar.is-closed .burger-bun-bot {
    -webkit-animation: bun-bot-in 0.6s linear normal;
    animation: bun-bot-in 0.6s linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes bun-top-out {
    0% {
        left: 0;
        top: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    20% {
        left: 0;
        top: 0;
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    80% {
        left: -5px;
        top: 0;
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
    }

    100% {
        left: -5px;
        top: 1px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}

@keyframes bun-top-out {
    0% {
        left: 0;
        top: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    20% {
        left: 0;
        top: 0;
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    80% {
        left: -5px;
        top: 0;
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
    }

    100% {
        left: -5px;
        top: 1px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}

@-webkit-keyframes bun-bot-out {
    0% {
        left: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    20% {
        left: 0;
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }

    80% {
        left: -5px;
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    100% {
        left: -5px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}

@keyframes bun-bot-out {
    0% {
        left: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    20% {
        left: 0;
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }

    80% {
        left: -5px;
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    100% {
        left: -5px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
}

@-webkit-keyframes bun-top-in {
    0% {
        left: -5px;
        bottom: 0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    20% {
        left: -5px;
        bottom: 0;
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
    }

    80% {
        left: 0;
        bottom: 0;
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    100% {
        left: 0;
        bottom: 1px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes bun-top-in {
    0% {
        left: -5px;
        bottom: 0;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    20% {
        left: -5px;
        bottom: 0;
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
    }

    80% {
        left: 0;
        bottom: 0;
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    100% {
        left: 0;
        bottom: 1px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@-webkit-keyframes bun-bot-in {
    0% {
        left: -5px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    20% {
        left: -5px;
        bottom: 0;
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    80% {
        left: 0;
        bottom: 0;
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }

    100% {
        left: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes bun-bot-in {
    0% {
        left: -5px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    20% {
        left: -5px;
        bottom: 0;
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    80% {
        left: 0;
        bottom: 0;
        -webkit-transform: rotate(-15deg);
        transform: rotate(-15deg);
    }

    100% {
        left: 0;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.hamburglar.is-open .burger-filling {
    -webkit-animation: burger-fill-out 0.6s linear normal;
    animation: burger-fill-out 0.6s linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.hamburglar.is-closed .burger-filling {
    -webkit-animation: burger-fill-in 0.6s linear normal;
    animation: burger-fill-in 0.6s linear normal;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@-webkit-keyframes burger-fill-in {
    0% {
        width: 0;
        left: 36px;
    }

    40% {
        width: 0;
        left: 40px;
    }

    80% {
        width: 36px;
        left: -6px;
    }

    100% {
        width: 36px;
        left: 0px;
    }
}

@keyframes burger-fill-in {
    0% {
        width: 0;
        left: 36px;
    }

    40% {
        width: 0;
        left: 40px;
    }

    80% {
        width: 36px;
        left: -6px;
    }

    100% {
        width: 36px;
        left: 0px;
    }
}

@-webkit-keyframes burger-fill-out {
    0% {
        width: 36px;
        left: 0px;
    }

    20% {
        width: 42px;
        left: -6px;
    }

    40% {
        width: 0;
        left: 40px;
    }

    100% {
        width: 0;
        left: 36px;
    }
}

@keyframes burger-fill-out {
    0% {
        width: 36px;
        left: 0px;
    }

    20% {
        width: 42px;
        left: -6px;
    }

    40% {
        width: 0;
        left: 40px;
    }

    100% {
        width: 0;
        left: 36px;
    }
}