.sidebar-toggle {
    display: none;
}

.sidebar-overlay {
    position: fixed;
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0;
    
    margin: 0;
    background-color: #000;
    opacity: 0.2;

    transition: 250ms cubic-bezier(0.1, .57, .1, 1);
}

.sidebar {
    position: absolute;
    top: 89px;
    right : 0;
    bottom: 51px;
    
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 3;

    background-color: #fbfbfb;
    border-left: 1px solid #999;
    box-shadow: 10px 0 50px #222;
    
    transition: 250ms cubic-bezier(0.1, .57, .1, 1);
}

.sidebar-body {
    width: 300px;
    padding: 20px;
}

/* Collapsed */
.sidebar {
    width: 0;
    visibility: hidden; 
}

.sidebar-overlay {
    opacity: 0;
    visibility: hidden;
}

/* Expanded */
.sidebar-toggle:checked ~ .sidebar {
    width: 300px;
    visibility: visible; 
}

.sidebar-toggle:checked ~ .sidebar-overlay {
    opacity: 0.2;
    visibility: visible;
}

@media (max-width: 680px) {
  .sidebar {
    top: 91px;
    box-shadow: none;
  }
}