/* RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

/* HAMBURGER BUTTON (NO FIXED POSITION) */
.menu-btn{
font-size:28px;
cursor:pointer;
background:#111;
color:white;
padding:8px 14px;
border-radius:6px;
display:inline-block;
}

/* SIDE PANEL */
.side-panel{
position:fixed;
top:0;
left:-260px;
width:260px;
height:100%;
background:#111;
color:white;
transition:0.3s;
padding-top:60px;
z-index:9999;
}

/* PANEL OPEN */
.side-panel.open{
left:0;
}

/* LINKS */
.side-panel a{
display:block;
padding:14px 25px;
text-decoration:none;
color:white;
font-size:18px;
border-bottom:1px solid rgba(255,255,255,0.08);
}

.side-panel a:hover{
background:#333;
}

/* OVERLAY */
.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
opacity:0;
visibility:hidden;
transition:0.3s;
z-index:9998;
}

/* OVERLAY ACTIVE */
.overlay.show{
opacity:1;
visibility:visible;
}