body {
    background: #1e1e1e;
    /* background: #0c1928; */
  }
  
  #nav-toggle {
    display: none;
    top: 50%;
    z-index: 100;
    /* left: 50%; */
    right: 10px;
    /* right: 0; */
    width: 45px;
    height: 45px;
    border: none;
    background: none;
    border-radius: 50px;
    cursor: pointer;
    position: absolute;
    -webkit-appearence: none;
    transform: translate(-50%, -50%);
  }
  #nav-toggle:focus, #nav-toggle:active {
    outline: none;
  }
  #nav-toggle .nav-label {
    opacity: 1;
    float: left;
    display: none;
    font-size: 14px;
    text-transform: uppercase;
  }
  #nav-toggle.nav-open .nav-svg .dots {
    left: 24px;
    opacity: 0;
    background: rgba(255, 255, 255, 0);
    -webkit-animation: showDots 0.2s 0.2s forwards;
            animation: showDots 0.2s 0.2s forwards;
  }
  #nav-toggle.nav-open .nav-svg .dots:before {
    -webkit-animation: toCloseDotsTop 0.6s 0.2s forwards;
            animation: toCloseDotsTop 0.6s 0.2s forwards;
  }
  #nav-toggle.nav-open .nav-svg .dots:after {
    -webkit-animation: toCloseDotsBottom 0.6s 0.2s forwards;
            animation: toCloseDotsBottom 0.6s 0.2s forwards;
  }
  #nav-toggle.nav-open .nav-svg path.x {
    transition: all 0.2s 0.2s ease-in-out;
    transform: rotate(45deg) translate(17%, -57%) scaleX(0.75);
  }
  #nav-toggle.nav-open .nav-svg path.x:first-of-type {
    transform-origin: right center;
    transform: rotate(-45deg) translate(-17%, -28%) scaleX(0.75);
  }
  #nav-toggle.nav-open .nav-svg path.yy {
    stroke-dashoffset: -1200;
    transition: 0.25s 0s ease-in-out;
  }
  #nav-toggle .nav-svg {
    display: inline-block;
    transform: translate(-1px, 2px);
  }
  #nav-toggle .nav-svg .dots {
    top: 24px;
    left: 10px;
    width: 2px;
    height: 2px;
    border-radius: 1px;
    background: white;
    position: absolute;
    transition: background 0.25s ease-out, left 0.25s ease-out;
  }
  #nav-toggle .nav-svg .dots:before, #nav-toggle .nav-svg .dots:after {
    left: 0;
    opacity: 1;
    width: 2px;
    content: "";
    height: 2px;
    border-radius: 1px;
    background: white;
    position: absolute;
  }
  #nav-toggle .nav-svg .dots:before {
    top: -7px;
  }
  #nav-toggle .nav-svg .dots:after {
    top: 7px;
    transition-delay: 0.1s;
  }
  #nav-toggle .nav-svg path {
    stroke: white;
    stroke-width: 70;
  }
  #nav-toggle .nav-svg path.x {
    transition: all 0.25s 0s ease-in-out;
    transform-origin: left center;
    transform: rotate(0deg) translate(0, 0) scale(1);
  }
  #nav-toggle .nav-svg path.yy {
    stroke-dashoffset: 1700;
    stroke-dasharray: 2520 3000;
    transition: 0.2s 0.2s ease-in-out;
  }
  
  @-webkit-keyframes showDots {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes showDots {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @-webkit-keyframes toCloseDotsBottom {
    from, 40%, 75%, to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
              animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      transform: translate3d(0, 0, 0);
    }
    40% {
      transform: translate3d(0, 5px, 0);
    }
    75% {
      transform: translate3d(0, -3px, 0);
    }
    to {
      transform: none;
    }
  }
  @keyframes toCloseDotsBottom {
    from, 40%, 75%, to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
              animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      transform: translate3d(0, 0, 0);
    }
    40% {
      transform: translate3d(0, 5px, 0);
    }
    75% {
      transform: translate3d(0, -3px, 0);
    }
    to {
      transform: none;
    }
  }
  @-webkit-keyframes toCloseDotsTop {
    from, 40%, 75%, to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
              animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      transform: translate3d(0, 0, 0);
    }
    40% {
      transform: translate3d(0, -5px, 0);
    }
    75% {
      transform: translate3d(0, 3px, 0);
    }
    to {
      transform: none;
    }
  }
  @keyframes toCloseDotsTop {
    from, 40%, 75%, to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
              animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
      transform: translate3d(0, 0, 0);
    }
    40% {
      transform: translate3d(0, -5px, 0);
    }
    75% {
      transform: translate3d(0, 3px, 0);
    }
    to {
      transform: none;
    }
  }


  @media screen and (max-width: 565px){
    #nav-toggle {
      display: block;
    }
    #nav-toggle .nav-svg {
      width: 30px;
      height: 30px;
    }
    #nav-toggle .nav-svg .dots {
      top: 12px;
      left: 5px;
    }
    #nav-toggle .nav-svg .dots:before {
      top: -3px;
    }
    #nav-toggle .nav-svg .dots:after {
      top: 3px;
    }
    #nav-toggle .nav-svg path {
      stroke-width: 40;
    }
  }