.sidebar {

position: fixed;
top: 0;
bottom: 0;
width: var(--sidebar-width);
left: calc(0px - var(--sidebar-width));
visibility: hidden;
overflow-y: auto;
font-family: "PT Sans", Helvetica, Arial, sans-serif;
color: var(--sidebar-color);
background-color: var(--sidebar-bg);
-webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;

} @media (max-width: $md-screen) {

.sidebar {
  font-size: .8em;
}

}

.sidebar a {

color: var(--oc-white);

}

.sidebar p {

margin: 0;

}

.sidebar-item {

padding: var(--spacer-2);

}

.sidebar-nav {

border-bottom: 1px solid var(--border-color);

} .sidebar-nav-list {

list-style: none;
margin: 0;
padding: 0;

} .sidebar-nav-item {

display: block;
padding: var(--spacer) var(--spacer-2);
border-top: 1px solid var(--border-color);

} .sidebar-nav-item.active, a.sidebar-nav-item:hover, a.sidebar-nav-item:focus {

text-decoration: none;
background-color: rgba(255,255,255,.1);
border-color: transparent;

}

a.social-icon {

margin-right: .5em;
text-decoration: none;

}

.sidebar-checkbox {

position: absolute;
opacity: 0;
-webkit-user-select: none;
   -moz-user-select: none;
        user-select: none;

}

.sidebar-toggle {

position: absolute;
top: var(--spacer);
left: var(--spacer);
display: flex;

}

.sidebar-toggle::before {

display: inline-block;
width: 32px;
height: 32px;
content: "";
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23888' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M2.5 11.5A.5.5 0 013 11h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 7h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 3h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat;

}

@media (min-width: $md-screen) {

.sidebar-toggle {
  position: fixed;
}

}

.wrap, .sidebar, .sidebar-toggle {

-webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
        backface-visibility: hidden;

}

.wrap, .sidebar-toggle {

-webkit-transition: -webkit-transform .3s ease-in-out;
        transition: transform .3s ease-in-out;

}

sidebar-checkbox:checked + .sidebar {

z-index: 10;
visibility: visible;

} sidebar-checkbox:checked ~ .sidebar, sidebar-checkbox:checked ~ .wrap, sidebar-checkbox:checked ~ .sidebar-toggle {

-webkit-transform: translateX(var(--sidebar-width));
    -ms-transform: translateX(var(--sidebar-width));
        transform: translateX(var(--sidebar-width));

}