@mixin transform-n-animation($type, $dur, $delta) {
  transform: $delta;
  animation: $type $dur ease-in-out;
}

#burger.open {
  display: block !important;
  @include transform-n-animation(slidein, 0.4s, translate(0, 0));
}

#burger.close {
  display: none;
}

// content sliding open
#container.open {
  @include transform-n-animation(open, 0.4s, translate(210px, 0));
}

@keyframes open {
  0.00% { transform: translate(0, 0); }
  100% { transform: translate(210px, 0); }
}

// content closing
#container.close {
  animation: close 0.3s ease-in-out;
}

@keyframes close {
  0.00% { transform: translate(210px, 0); }
  100%  { transform: translate(0, 0); }
}

@keyframes slidein {
  0.00% { transform: translate(-200px, 0); }
  100%  { transform: translate(0, 0); }
}