.mob_nav_btn {
	display:none;
}

@media (max-width:1000px) {
  #nav {
      position:fixed;
      background:#fff;
      z-index:2;
      top:0;
      left:0;
      bottom:0;
	  overflow:auto;
      -webkit-transform:translateX(-100%);
      -ms-transform:translateX(-100%);
      transform:translateX(-100%);
      -webkit-transition:transform .2s;
      transition:transform .2s;
      will-change: transform;
  }
  #nav li {
	  xfloat:none;
  }
  #nav ul {
	  display:block;
	  position:static;
  }
  body.mob_nav_open #nav {
      -webkit-transform:translateX(0);
      -ms-transform:translateX(0);
      transform:translateX(0);
  }

  /* overlay */
  #container:after {
      content:'';
      opacity:0;
      visibility:hidden;
      position:fixed;
      z-index:1;
      top:0;left:0;right:0;bottom:0;
      background:rgba(0, 0, 0, 0.4);
      pointer-events: none; /* ? */
      -webkit-transition:opacity .7s;
      transition:opacity .7s;
  }
  body.mob_nav_open #container:after {
      opacity:1;
      visibility:visible;
  }

  /* change the button */
  .mob_nav_btn {
	display:block;
  	transition: transform .2s;
  	will-change:transform;
	position: relative;
    z-index: 1;  /* performance! */
  }
  body.mob_nav_open .mob_nav_btn {
    transform:rotate(270deg);
  }
  .mob_nav_btn g {
    transition:stroke-width .1s;
    will-change:stroke-width;
  }
  .mob_nav_btn .-close {
    stroke-width:0;
  }
  body.mob_nav_open .mob_nav_btn .-close {
    stroke-width:inherit;
  }
  body.mob_nav_open .mob_nav_btn .-menu {
    stroke-width:0;
  }
}