body.overlay-open {
  overflow:hidden;
}

.overlay.hidden { right:-100%; position:fixed;}
.overlay-color.hidden { right:-100%; }

.overlay {
  background:#3d3d3d;
  width:100%; max-height:100vh;
  position:fixed; z-index:100000;
  transition:0.6s;
  overflow: auto;
  /* might need to remove this*/
  min-height:100vh;
}
.overlay-color {
  background:#b42e2e;
  width:100%; height:100%;
  position:fixed; z-index:99999;
  transition:0.6s;
}

.right-ani.overlay { right:0px; top:0px;}
.right-ani.overlay-color { right:0px; top:0px;}

.right-ani.overlay.hidden { right:-100%; position:fixed;}
.right-ani.overlay-color.hidden { right:-100%; }

.left-ani.overlay {left:0px; top:0px;}
.left-ani.overlay-color {left:0px; top:0px;}

.left-ani.overlay.hidden { left:-100%; position:fixed;}
.left-ani.overlay-color.hidden { left:-100%; }

.top-ani.overlay {top:0px; left:0px;}
.top-ani.overlay-color {top:0px; left:0px;}

.top-ani.overlay.hidden { top:-100%; position:fixed;}
.top-ani.overlay-color.hidden { top:-100%; }

.bottom-ani.overlay {top:0px; left:0px;}
.bottom-ani.overlay-color {top:0px; left:0px;}

.bottom-ani.overlay.hidden { top:100%; position:fixed;}
.bottom-ani.overlay-color.hidden { top:100%; }

.overlay .close { padding:20px; cursor:pointer; font-size:2rem;}