@menu-width: 270px;
@column: 5.55555%;

body {
  .position(absolute, 0, 0, 0, 0);
  background-color: #315481;
  .background-image( linear-gradient(top, #315481, #918e82 100%) );
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#container {
  .position(absolute, 0, 0, 0, 0);

  @media screen and (min-width: 60em) {
    left: @column;
    right: @column;
  }

  @media screen and (min-width: 80em) {
    left: 2*@column;
    right: 2*@column;
  }

  // Hide anything offscreen
  overflow: hidden;
}

#menu {
  .position(absolute, 0, 0, 0, 0, @menu-width);
}

#content-container {
  .position(absolute, 0, 0, 0, 0);
  .transition(all 200ms ease-out);
  .transform(translate3d(0, 0, 0));
  background: @color-tertiary;
  opacity: 1;

  @media screen and (min-width: 40em) {
    left: @menu-width;
  }

  .content-scrollable {
    .position(absolute, 0, 0, 0, 0);
    .transform(translate3d(0, 0, 0));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  // Toggle menu on mobile
  .menu-open & {
    .transform(translate3d(@menu-width, 0, 0));
    opacity: .85;
    left: 0;

    @media screen and (min-width: 40em) {
      // Show menu on desktop, negate .menu-open
      .transform(translate3d(0, 0, 0)); //reset transform and use position properties instead
      opacity: 1;
      left: @menu-width;
    }
  }
}

// Transparent screen to prevent interactions on content when menu is open
.content-overlay {
  .position(absolute, 0, 0, 0, 0);
  cursor: pointer;

  .menu-open & {
    .transform(translate3d(@menu-width, 0, 0));
    z-index: 1;
  }

  // Hide overlay on desktop
  @media screen and (min-width: 40em) { display: none; }
}