/* ==========================================
   Hamburger Menu v1.0
   Part 1
   ========================================== */

:root{
    --hm-button-size:32px;
    --hm-panel-width:280px;
    --hm-bg:#222;
    --hm-overlay:rgba(0,0,0,.45);
    --hm-bar:#18379C;
    --hm-transition:.35s;
    --hm-z-button:1000;
    --hm-z-overlay:5000;
    --hm-z-panel:6000;
}

/* ---------- Hamburger Button ---------- */

.hm-button{

    position:absolute;
    /*top:22px;*/
    left:24px;
	bottom:22px;
    width:var(--hm-button-size);
    height:var(--hm-button-size);
    background:transparent;
    border:none;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
    padding:0;
    margin:0;
    z-index:var(--hm-z-button);
    transition:opacity .2s;
}

.hm-button:hover{
    opacity:.9;
}

.hm-button span{
    display:block;
    width:27px;
    height:3px;
    background:var(--hm-bar);
    border-radius:2px;
}

/* ---------- Wiggle Animation ---------- */

@keyframes hmWiggle{
    0%   { transform:rotate(0deg); }
    20%  { transform:rotate(10deg); }
    40%  { transform:rotate(-10deg); }
    60%  { transform:rotate(7deg); }
    80%  { transform:rotate(-5deg); }
    100% { transform:rotate(0deg); }
}

.hm-wiggle{

    animation:hmWiggle .45s ease;
}


/* ---------- Overlay ---------- */

.hm-overlay{

    position:fixed;
    inset:0;
    background:var(--hm-overlay);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--hm-transition);
    z-index:var(--hm-z-overlay);
}

.hm-overlay.open{

    opacity:1;
    visibility:visible;
}

/* ---------- Slide Panel ---------- */

.hm-panel{

    position:fixed;
    top:0;
    left:0;
    width:var(--hm-panel-width);
    height:100vh;
	text-align: left;
	align-items: left;
    background:var(--hm-bg);
    transform:translateX(-100%);
    transition:transform var(--hm-transition);
    z-index:var(--hm-z-panel);
    box-shadow:2px 0 14px rgba(0,0,0,.35);
    overflow:auto;
}

.hm-panel.open{

    transform:translateX(0);
}


/* =====================================================
   Menu Header
   ===================================================== */

.hm-header{

    display:flex;
    justify-content:flex-end;
    align-items:center;
    height:60px;
    padding:0 14px;
    border-bottom:1px solid rgba(255,255,255,.08);

}

/* =====================================================
   Menu Close Button
   ===================================================== */

.hm-close{

    width:40px;
    height:40px;
    border:none;
    background:none;
    color:white;
    font-size:34px;
    cursor:pointer;
    transition:.2s;

}

.hm-close:hover{

    transform:scale(1.1);

}

/* =====================================================
   Menu Navigation
   ===================================================== */

.hm-nav{

    display:flex;
    flex-direction:column;
    padding:10px 0;

}

/* =====================================================
   Menu Links
   ===================================================== */

.hm-link{

    display:block;
    color:white;
    text-decoration:none;
    padding:6px 24px;
    font-size:16px;
    transition:
        background .20s,
        padding-left .20s;

}

.hm-link:hover{

    background:#333;
    padding-left:34px;

}

.hm-link.active{

    background:#3b6cff;

}