.menu-body.visibility{
  visibility: hidden;
}
.menubar{
   width: 100%;
   height: 48px;
   display: block;
   background: var(--skin);
   color: var(--skin-color);
   line-height: 48px;
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}
.menu-trigger{
   position: absolute;
   -webkit-appearance: none;
   border: 0;
   outline: 0;
   background: transparent;
   top: 10px;
   padding: 0 5px;
   color: var(--skin-color);
   cursor: pointer;
   -webkit-tap-highlight-color: rgba(0, 0, 0, .2);
   

}
.menu-trigger:hover{
  opacity: 0.8;
-webkit-opacity: 0.8;
}


.menu-trigger.left{
   left: 20px;

}

.menu-trigger.right{
   right: 20px;
}
.sticky{
   position: fixed;
   top: 0;
   left: 0;
}

.menu-container{
  font-family: 'Questrial', sans-serif;
   overflow: auto;
   display: block;
   top: 120px;
   
}

.menu-container::-webkit-scrollbar {
  width: 4px;
}

.menu-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.2); 
}
 
.menu-container::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.11); 
}

.menu-container::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.position-left{
   left: -270px;
}
.position-right{
   right: -270px;
}

.position-left.open{
    left: 0;
}

.position-right.open{
    right: 0;
}

.menu-container,
.menu-head,
.menu-left,
.menu-left.open
.menu-right,
.menu-right.open{
    transition: .4s;
  -webkit-transition: .4s;
  -moz-transition: .4s;
  -ms-transition: .4s;
   
}

.menu-container,
.menu-head{
    background: var(--skin);
    position: fixed;
    z-index: 1000;
    width: 270px;
    
}
.menu-head .layer{
  background: rgba(0, 0, 0, 0.2);
  display: block;
  padding: 15px;
}