html,
body,
#container {
  height: 100%;
}

body {
  &.drawer-transition {
    overflow-x: hidden;
  }
}

#container {
  position: relative;
  transition: transform cubic-bezier(.2, .3, .25, .9) .2s, opacity .3s;
  backface-visibility: hidden;
  opacity: 1;

  .pace-running & {
    transition-delay: .1s;
    //opacity: 0;
  }

  .pace-done & {
    //opacity: 1;
  }

  .drawer-transition & {
    //z-index: 100;
  }

  .drawer-open & {
    transform: translate3d(280px, 0, 0);
  }
}

.surface {
  position: relative;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.surface-container {
  position: relative;
  height: 100%;
}

.content {
  position: relative;
  height: 100%;
}

.wrapper {
  position: absolute;
  left: 30%;
  right: 0;
  top: 0;
  bottom: 0;
  outline: 0;
  background-color: $background-color;
  overflow: auto;

  @include breakpoint(medium) {
    position: relative;
    left: 0;
  }

  &.wrapper-post {
    left: 0;
    position: relative;
  }
}

.wrapper-container {
  position: relative;
  padding: 40px 10% 40px 185px;
  max-width: 910px;

  @include breakpoint(medium) {
    padding: 40px 10%;
    max-width: 100%;
  }

  .wrapper-post & {
    @extend .center-block;
    max-width: 700px;
    padding-left: 0;
    padding-right: 0;

    @include breakpoint(medium) {
      width: 75%;
    }

    @include breakpoint(small) {
      width: 100%;
    }
  }

  @include breakpoint(small) {
    &,
    .wrapper-post & {
      padding: 25px 15px;
    }
  }
}