* {
    margin:0px;
    padding:0px;
    box-sizing:border-box;
    font-family:"Open Sans";
}
body {
    overflow:hidden;
}
.navbar {
    position:fixed;
    top:0px;
    left:0px;
    width:100vw;
    height:50px;
    background:rgba(0,0,0,0.95);
}
.navbar .toggle-btn {
    position:absolute;
    right:20px;
    height:50px;
    width:50px;
    transition:all 300ms ease-in-out 200ms;
}
.navbar .toggle-btn span {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:70%;
    height:4px;
    background:#eee;
    transition:all 200ms ease;
}
.navbar .toggle-btn span:nth-child(1) {
    transition:top 200ms ease-in-out;
    top:30%;
}
.navbar .toggle-btn span:nth-child(3) {
    transition:top 200ms ease-in-out;
    top:70%;
}
.navbar .toggle-btn.active {
    transition:transform 200ms ease-in-out 200ms;
    transform:rotate(135deg);
}
.navbar .toggle-btn.active span:nth-child(1) {
    top:50%;
}
.navbar .toggle-btn.active span:nth-child(2) {
    transform:translate(-50%,-50%) rotate(90deg);
}
.navbar .toggle-btn.active span:nth-child(3) {
    top:50%;
}
.sidebar {
    position:absolute;
    top:50px;
    opacity:0;
    right:-100%;
    width:100vw;
    height:calc(100vh - 45px);
    z-index:5;
    background:rgba(40,40,40,1);
    transition:all 400ms ease 50ms;
    padding:15px;
}
.sidebar .item {
    width:100%;
    padding:13px 6px;
    border-bottom:1px solid rgba(200,200,200,0.7);
    font-size:18px;
    text-transform:uppercase;
    color:rgba(250,250,250,0.95);
}
.sidebar.active {
    right:0%;
    opacity:1;
}