* {
      padding: 0;
      margin: 0;
  }
  body.login {
      background: #F4F4F4 url('../img/admin-logo-big.svg') no-repeat left bottom;
      background-attachment: fixed;
      position: relative;
      width: 100%;
      height: 100%;
  }

  #login {
    position: absolute;
    right: 0;
    width: 40vw!important;
    min-height: calc(100vh - 70px);
    padding: 0 30px 70px 30px!important;
    margin: 0!important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
  }

  #login #backtoblog a, 
  #login #nav a {
      color: #555;
  }

  #login #backtoblog a:hover, 
  #login #nav a:hover {
      color: #ff747d;
  }

  #login #backtoblog a:focus, 
  #login #nav a:focus {
      box-shadow: none;
      text-decoration: underline;
  }

  #login h1 a:focus, 
  .login h1 a:focus {
    box-shadow: none;
  }

  #login form {
    border: none!important;
    box-shadow: none!important;
  }

  #login form label {
    font-size: 11px;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
    text-transform: uppercase;
    color: #333;
  }

  #login form #user_login,
  #login form #user_pass {
      border-radius: 0!important;
      border-color: #F4F4F4;
      background-color: #F4F4F4;
      box-shadow: none;
      height: 40px;
  }


  #login form #user_login:focus,
  #login form #user_pass:focus,
  #login form #rememberme:focus {
    background-color: #F8F8F8;
  }

  #login .dashicons {
      color: #ff747d;
  }

  #login .button.button-secondary:focus {
    border-color: transparent;
    box-shadow: none
  }

  #login form #rememberme {
      position: relative;
      border-radius: 0!important;
      border-color: #F4F4F4;
      background-color: #F4F4F4;
      box-shadow: none;
  }

  #login form #rememberme:checked:before {
    content: "";
    position: absolute;
    left: 6px;
    top: 9px;
    background: #ff747d;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 #ff747d, 4px 0 0 #ff747d, 4px -2px 0 #ff747d, 4px -4px 0 #ff747d, 4px -6px 0 #ff747d, 4px -8px 0 #ff747d;
    transform: rotate(45deg);
  }

  #login form .button.button-primary.button-large {
      border-radius: 0;
      padding: 8px 20px;
      background: #ff747d;
      border-color: #ff747d;
      text-transform: uppercase;
      font-size: 10px;
      letter-spacing: 1px;
      font-weight: bold;
      transition: .2s;
  }

  #login form .button.button-primary.button-large:hover {
      background: #E6636C;
  }

  #login form .button.button-primary.button-large:focus {
      box-shadow: 0 0 0 1px #fff, 0 0 0 3px #ff747d;
  }

  #login h1 {
    margin-top: 20px;
    margin-bottom: 25px;
  }

  #login h1 a, .login h1 a {
    background: url('../img/admin-logo-small.svg') no-repeat center center;
    width: 200px;
    height: 52px;
    -ms-background-size: contain;
    -o-background-size: contain;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    background-size: contain;    
    text-decoration: none;
    text-indent: -9999px;
    outline: 0;
    overflow: hidden;
    display: block;
  }

  .login #nav {
    letter-spacing: 0.5px;
  }

  .login_author_logo {
    position: fixed;
    background: url('../img/admin-logo-small.svg') no-repeat center center;
    background-size: contain;
    bottom: 18px;
    left: 18px;
    display: block;
    width: 186px;
    height: 48px;
    text-indent: -999999px;
  }

  .login_author_logo:focus {
    box-shadow: none;
  }

  @media (max-width: 782px) {
      
      #login {
          position: relative;
          width: 100vw!important;
          max-width: 100%;
          padding: 0 0 70px 0!important;
      }

      #login form .button.button-primary.button-large {
        padding: 0 10px;
        margin-top: -0.1rem;
      }

      #login form #rememberme {
        margin-top: -0.1rem;
      }

      #login form #rememberme:checked:before {
      left: 12px;
      top: 14px;
    }

    .login_author_logo {
      display: none;
    }

  }

  .login #login_error, .login .message, .login .success {
      box-shadow: none;
      border: 2px solid red;
  }

  @media (max-width: 400px) {
    #login {
      min-width: 0;
    }
  }

  @media (max-width: 300px) {
    #login form {
      padding-left: 10px;
      padding-right: 10px;
    }
  }