.page-main.page-main-login {
  padding: 0;
}

.login-container {
  align-items: stretch;
  display: flex;
  min-height: 100vh;

  .left-col {
    flex: 0 0 rem(524);
    position: relative;

    @include media-breakpoint-down(lg) {
      flex: 0 0 40%
    }

    @include media-breakpoint-down(sm) {
      flex: 0 0 0%;
      position: static;
    }

    &:before {
      background: linear-gradient($clr-white 30%, rgba($clr-white, 0));
      content: '';
      height: 50%;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;

      @include media-breakpoint-down(sm) {
        content: none;
      }
    }
  }

  .right-col {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    position: relative;
  }

  .anonymous-slider {
    justify-content: center;
  }

  .opigno-demo-users {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 rem(67) rem(30);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .demo-user-button {
    + .demo-user-button {
      margin-left: rem(30);
    }
  }

  .block-sitebranding {
    margin-top: rem(100);
    max-width: rem(426);
    position: relative;
    padding: 0 rem(20);

    @include media-breakpoint-down(md) {
      margin-top: rem(50);
    }

    @include media-breakpoint-down(sm) {
      margin-top: rem(20);
      max-width: rem(300);
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%);
      width: 100%;
    }
  }

  .slider-item {
    background: url(../images/design/login-banner.jpg) center/cover no-repeat;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;

    @include media-breakpoint-down(sm) {
      display: none !important;
    }
  }

  #user-sidebar {
    max-width: rem(530);
    padding: rem(20);
    width: 100%;

    @include media-breakpoint-down(sm) {
      padding: rem(120) rem(20);
    }

    h1 {
      line-height: 1.2;

      @include media-breakpoint-down(sm) {
        font-size: rem(28);
      }
    }

    .subtitle {
      margin-bottom: rem(20);
    }
  }

  .user-password {
    h1 {
      font-size: rem(32);
    }
  }

  .user-register {
    h1 {
      font-size: rem(36);
    }
  }

  #block-mainnavigation-menu {
    display: none;
  }

  .main-menu {
    display: flex;
    justify-content: flex-start;
    margin-bottom: rem(30);
    padding: 0;

    &__item {
      margin-bottom: 0;
      margin-right: rem(20);
      padding: 0;
    }

    &__link {
      align-items: center;
      background: $clr-desktop-header-bg;
      border-radius: 50%;
      color: $clr-desktop-header-link;
      display: flex;
      justify-content: center;
      height: rem(65);
      overflow: hidden;
      width: rem(65);

      @include media-breakpoint-down(sm) {
        font-size: rem(22);
        height: rem(40);
        width: rem(40);
      }

      &:hover {
        color: $clr-desktop-header-link;
      }

      span {
        display: none;
      }
    }

    .catalogue {
      @extend .fi-rr-book-alt;
      color: $clr-desktop-header-link;
      font-size: rem(38);

      @include media-breakpoint-down(sm) {
        font-size: rem(22);
      }

      &:before {
        font-family: uicons-regular-rounded;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        display: block;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }


    .home {
      @extend .fi-rr-home;
      color: $clr-desktop-header-link;
      font-size: rem(38);

      @include media-breakpoint-down(sm) {
        font-size: rem(22);
      }

      &:before {
        font-family: uicons-regular-rounded;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        display: block;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
    }
  }

  .form-item {
    label {
      font-weight: $font-weight-semibold;
    }
  }

  .form-item-name {
    margin-bottom: rem(20) !important;
  }

  .form-item-pass {
    margin-bottom: 0 !important;
  }

  #edit-pass {
    display: flex;
    flex-direction: column;

    > a {
      margin-left: auto;
    }
  }

  .form-text,
  .form-email {
    background: $clr-gray-light;
    border: 1px solid $clr-gray-light-D5;
    border-radius: rem(10);
    color: $clr-desktop-text;
    outline: none;
    padding: rem(10) rem(20);
    width: 100%;

    &:hover,
    &:focus {
      border-color: $clr-desktop-button-color;
    }
  }

  .form-actions {
    .form-submit {
      min-width: rem(180) !important;
    }
  }

  .switch-link-bottom {
    position: absolute;
    right: rem(30);
    bottom: rem(30);

    > div + div {
      margin-top: rem(10);
    }
  }
}
