%splash-screen{
  @extend %absolute;
  padding-top: 0!important;
  overflow: hidden;

  &:before{
    display: none;
  }

  #wrapper{
    position: relative;
    margin-bottom: -2px;
    min-height: 100vh;
    height: 100%;

    &:before{
      content: "";
      top: -$gap;
      left: -$gap;
      bottom: -$gap;
      right: -$gap;
      z-index: 0;
      @extend %absolute;
      @extend %blur;
      @include respond-to(min-menu-collapse) {
        background: $color-login-background asset-url('ep-login-bg.jpg') no-repeat bottom right;
        @include background-size(cover);
      }
    }
    &:after{
      content: "";
      @extend %absolute;
      z-index: 0;
      @include radial-gradient(rgba($color-login-background, 0), rgba($color-login-background, .5));
    }
  }

  #wrapper2{
    $width: 420px;
    @extend %flex;
    @extend %align-items-center;
    position: relative;
    max-width: $width;
    width: 100%;
    min-height: 100vh;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
  }

  #wrapper3 {
    @extend %border-radius-large;
    @extend %material__elevation--depth_5;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    background: $color-background;
    color: $color-login-text;
    @include respond-to(max-menu-collapse) {
      @include box-shadow(none);
    }
  }

  h1{
    text-align: center;
    span{
      color: $color-main;
    }
  }

  #main{
    background: none;
    z-index: 1;
    padding: 0;
    margin: 0;
    padding-left: 0 !important;
  }

  #content{
    padding: 0 2*$box-padding;
    @include respond-to(max-medium-screen){
      padding: 0 1.5*$box-padding;
    }
  }

  .easy-content-page{
    border: none;
    background: none;
    padding: 0;
    @extend %box-shadow-none;
    overflow: visible;
  }

  #top-menu{
    @extend %box-shadow-none;
    @extend %justify-content-center;
    border: none;
    background: none;
    position: static;
    #logo{
      @extend %flex;
      @include flex-basis(100%);
      text-align: center;
      margin: 0;
      &~div, &~ul{
        display: none;
      }
      a{
        background-position: center;
        margin: $gap;
        width: 100%;
        background-image: $logo-inverted-url;
      }
    }
  }
  .flash{
    @extend %border-radius-none;
    margin: 2*$gap 0 $gap;
  }

  hr{
    margin: $box-padding 0;
    opacity: .5;
  }

  #login-form{
    p{
      margin-bottom: $gap;
    }
    #autologin_field{
      input{
        margin: 0 0.5*$gap 0.5*$gap 0;
      }
    }
    #lost_password_field{
      width: 50%;
    }
  }
  #login_form_container{
    text-align: center;
  }
}