.scrolled-pages {

  &__container {
    @include breakpoint-max($tablet-breakpoint) {
      padding-top: 50px;
    }

    @include breakpoint-min($tablet-breakpoint) {
      height: 80%;
    }
  }

  &__page {
    padding: 40px 0;
    transition: 0.6s padding;

    @include breakpoint-min($tablet-breakpoint) {
      padding: 100px 0;
      min-height: 100vh;
    }

    @media screen and (max-height: 700px) {
      padding: 40px 0;
    }

    &-2 {
      @include breakpoint-max($tablet-breakpoint) {
        padding-top: 0;
      }

      &.active {
        // display: flex;
        // align-items: center;

        @media screen and (min-width: 1200px) and (min-height: 800px) {
          padding-top: 150px;
        }
      }

    }
  }

  &__logo {

    @include breakpoint-min($tablet-breakpoint) {
      transition: .6s all;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      max-width: 320px;
    }

    @include breakpoint-min($desktop-breakpoint) {
      top: 70px;
    }

    @include breakpoint-min($lg-desktop-breakpoint) {
      top: 140px;
    }

    @media screen and (max-height: 700px) {
      top: 100px;
    }
  }
}

.viewing-page-1 {
  .scrolled-pages {

    &__container {
      @include breakpoint-min($tablet-breakpoint) {
        height: 75%;
      }
    }
  }
}

.viewing-page-2:not(.disabled-onepage-scroll) {

  @include breakpoint-min($desktop-breakpoint) {
    .scrolled-pages__logo {
      top: 50px;
    }
  }

  @include breakpoint-min($lg-desktop-breakpoint) {
    .scrolled-pages__logo {
      top: 180px;
      transform: translate(-50%, -110px);
    }
  }

  @include breakpoint-min(1400) {
    .scrolled-pages__logo {
      transform: translate(-50%, -70px);
    }
  }

  @media screen and (max-height: 700px) {
    .scrolled-pages__logo {
      transform: translate(-50%, -100px);
    }
  }
}