#BurgerButton {
    --icon-color: #003765;              /* icon color                 */
    --stroke-color: #003765;            /* svg-ring                   */
    --stroke-animation-color: #26547c;     /* svg-mask-path              */
    --bg-color: #fff;                   /* background color           */
    --animation-speed: 0.6s;            /* animation speed            */
    --scale: 0.8;                         /* icon scale 68/68 default   */
}

.hamburglar {
    transform: scale(var( --scale ));
    /* margin: 40px auto; */
    position: relative;
    display: block;
    width: 68px;
    height: 68px;
    background: var(--bg-color);
    -webkit-touch-callout: none;
    user-select: none;
    margin-top:0.25rem;
    margin-bottom:0.25rem;
    overflow: hidden;
}

/* burger ring container */
.burger-ring {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 68px;
    height: 68px;
}

.svg-ring {
    width: 68px;
    height: 68px;
    stroke: var(--stroke-color);
    stroke-width: 4;
}
.svg-mask-path {
    stroke: var(--stroke-animation-color);
}



/* transition mask */
.path-burger {
    position: absolute;
    top: 0;
    left: 0;
    height: 68px;
    width: 68px;
    /* two masks because... browser support. */
    mask: url(#mask);
}

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

/* create a small square rotate behind an svg
   mask, giving the apparence of the line animating */
.path-rotation {
    height: 34px;
    width: 34px;
    margin: 34px 34px 0 0;
    transform: rotate(0deg);
    transform-origin: 100% 0;
}
.path-rotation:before {
    content: '';
    display: block;
    width: 30px;
    height: 34px;
    margin: 0 4px 0 0;
    /* background: var(--icon-color); */
    background: var(--bg-color);
}

/* box rotation animation */
@keyframes rotate-out {
    0% {transform: rotate(0deg);}
    40% {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
}
@keyframes rotate-in {
    0% {transform: rotate(360deg);}
    40% {transform: rotate(180deg);}
    100% {transform: rotate(0deg);}
}


/* offset moves dasharray is the dash size
   need to be able to control dash space size.
 */
.hamburglar.is-open .path {
    animation: dash-in var(--animation-speed) linear normal;
    animation-fill-mode:forwards;
}
.hamburglar.is-open .animate-path {
    animation: rotate-in var(--animation-speed) linear normal;
    animation-fill-mode:forwards;
}

.hamburglar.is-closed .path {
    animation: dash-out var(--animation-speed) linear normal;
    animation-fill-mode:forwards;
}
.hamburglar.is-closed .animate-path {
    animation: rotate-out var(--animation-speed) linear normal;
    animation-fill-mode:forwards;
}

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

@keyframes dash-in {
    0% {stroke-dashoffset: 240;}
    40% {stroke-dashoffset: 240;}
    100% {stroke-dashoffset: 0;}
}
@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;
}
.icon-container {
    position: relative;
    z-index: 5;
    height: 28px;
    width: 36px;
}

.icon-top,
.icon-bot,
.icon-mid {
    position: absolute;
    display: block;
    height: 4px;
    width: 36px;
    border-radius: 2px;
    background: var(--icon-color);
}

.icon-top {
    top: 0;
    transform-origin: 34px 2px;
}
.icon-bot {
    bottom: 0;
    transform-origin: 34px 2px;
}
.icon-mid {
    top: 12px;
    transition: all calc( var(--animation-speed)/2.5 ) ease-in-out;
}


/* icon animations */
.hamburglar.is-open .icon-top {
    animation: bun-top-out var(--animation-speed) linear normal;
    animation-fill-mode:forwards;
}
.hamburglar.is-open .icon-bot {
    animation: bun-bot-out var(--animation-speed) linear normal;
    animation-fill-mode:forwards;
}
.hamburglar.is-closed .icon-top {
    animation: bun-top-in var(--animation-speed) linear normal;
    animation-fill-mode:forwards;
}
.hamburglar.is-closed .icon-bot {
    animation: bun-bot-in var(--animation-speed) linear normal;
    animation-fill-mode:forwards;
}

@keyframes bun-top-out {
    0% {
        left: 0;
        top: 0;
        transform: rotate(0deg);
    }
    20% {
        left: 0;
        top: 0;
        transform: rotate(15deg);
    }
    80% {
        left: -5px;
        top: 0;
        transform: rotate(-60deg);
    }
    100% {
        left: -5px;
        top: 1px;
        transform: rotate(-45deg);
    }
}
@keyframes bun-bot-out {
    0% {
        left: 0;
        transform: rotate(0deg);
    }
    20% {
        left: 0;
        transform: rotate(-15deg);
    }
    80% {
        left: -5px;
        transform: rotate(60deg);
    }
    100% {
        left: -5px;
        transform: rotate(45deg);
    }
}
@keyframes bun-top-in {
    0% {
        left: -5px;
        bottom: 0;
        transform: rotate(-45deg);
    }
    20% {
        left: -5px;
        bottom: 0;
        transform: rotate(-60deg);
    }
    80% {
        left: 0;
        bottom: 0;
        transform: rotate(15deg);
    }
    100% {
        left: 0;
        bottom: 1px;
        transform: rotate(0deg);
    }
}
@keyframes bun-bot-in {
    0% {
        left: -5px;
        transform: rotate(45deg);
    }
    20% {
        left: -5px;
        bottom: 0;
        transform: rotate(60deg);
    }
    80% {
        left: 0;
        bottom: 0;
        transform: rotate(-15deg);
    }
    100% {
        left: 0;
        transform: rotate(0deg);
    }
}


/* icon middle */
.hamburglar.is-open .icon-mid {
    animation: burger-fill-out var(--animation-speed) linear normal;
    animation-fill-mode:forwards;
}
.hamburglar.is-closed .icon-mid {
    animation: burger-fill-in var(--animation-speed) linear normal;
    animation-fill-mode:forwards;
}

@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-out {
    0% {
        width: 36px;
        left: 0px;
    }
    20% {
        width: 42px;
        left: -6px;
    }
    40% {
        width: 0;
        left: 40px;
    }
    100% {
        width: 0;
        left: 36px;
    }
}