.ddm-menu-container {
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

.ddm-menu-container__content {
  width: 100%;
  margin-left: 0;
  -webkit-transition: margin-left 0.3s;
  transition: margin-left 0.3s;
}

.ddm-menu-container--open-left .ddm-menu-container__content {
  margin-left: 85%;
}

.ddm-menu-container--open-right .ddm-menu-container__content {
  margin-left: -85%;
}

.ddm-menu {
  width: 85%;
  height: 100%;
  position: fixed;
  z-index: -1;
  top: 0;
  left: -85%;
  -webkit-transition: left 0.3s;
  transition: left 0.3s;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 0;
}

.ddm-menu--open {
  left: 0;
  z-index: 300;
}

.ddm-menu--right {
  left: 100%;
}

.ddm-menu--open.ddm-menu--right {
  left: 15%;
}

/* overlay to capture clicks */
.ddm-menu-container__overlay {
  height: 100%;
  width: 15%;
  position: fixed;
  top: 0;
  left: 85%;
  z-index: 200;
  /* ie8 allows clicks to pass through transparent elements. Use transparent background image to trick ie8 */
  /* inline png for rgba fallback generated from http://1x1px.me/000000-0.png and converted at http://webcodertools.com/imagetobase64converter */
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiYAAAAAkAAxkR2eQAAAAASUVORK5CYII=) repeat;
  display: none;
}

.ddm-menu-container--open-left .ddm-menu-container__overlay {
  display: block;
}

.ddm-menu-container--open-right .ddm-menu-container__overlay {
  display: block;
  left: 0;
}

/*
 * Android 4.0.4 Content Scroll Hack
 *
 * For some reason, content extends beyond scrollable area when content is
 * added dynamically to the page due to the menu having `position: fixed`.
 * We don't really understand it. But we've proven that `position: fixed` is
 * the problem by process of elimination (removing styles until the issue
 * disappears). So our hackish workaround is to toggle `position: fixed`
 * rule when the content height changes. Instead of requiring ddm-menu users
 * to call another method for this silly issue, we use an interval to
 * monitor content height.
 */
/*body*/.ddm-menu-android-content-scroll-hack .ddm-menu {
  position: static;
  display: none;
}