/*=============================
=            Login            =
=============================*/
body {
  color: #666;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; }
  body.login {
    background: #fff; }
    body.login h1 a {
      background-image: none;
      font-size: 16px;
      height: auto;
      margin: 30px;
      text-indent: 0;
      width: auto; }
    body.login label {
      color: #aaa;
      font-size: 12px; }
      body.login label .login-label {
        display: inline-block;
        font-size: 14px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(28px);
        transition: all 0.25s ease; }
        body.login label .login-label.fade-in {
          opacity: 1; }
        body.login label .login-label.focus {
          font-size: 12px;
          transform: translateY(0); }
    body.login #loginform,
    body.login #lostpasswordform {
      background: transparent;
      border: 0 none;
      box-shadow: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 0;
      padding: 15px; }
      body.login #loginform p,
      body.login #lostpasswordform p {
        flex: 0 0 100%;
        height: 80px; }
        body.login #loginform p.forgetmenot, body.login #loginform p.submit,
        body.login #lostpasswordform p.forgetmenot,
        body.login #lostpasswordform p.submit {
          flex: 1;
          height: auto; }
    body.login input[type="text"],
    body.login input[type="password"] {
      background: transparent;
      border: 0 none;
      border-radius: 0;
      border-bottom: 1px #ccc solid;
      box-shadow: none;
      color: #666;
      padding: 0; }
      body.login input[type="text"]:focus,
      body.login input[type="password"]:focus {
        border-color: #0085ba; }
    body.login .button-primary {
      border-radius: 2px; }
    body.login #nav {
      font-size: 12px;
      padding: 0 15px; }
      body.login #nav a:hover {
        color: #999; }
    body.login #backtoblog {
      display: none; }
    body.login #user_login,
    body.login #user_pass,
    body.login .forgetmenot,
    body.login .submit,
    body.login #nav,
    body.login h1,
    body.login .message,
    body.login #login_error {
      opacity: 0;
      transition: all 0.25s ease; }
    body.login #user_login,
    body.login #user_pass {
      transform: translateY(100px); }
      body.login #user_login.fade-in,
      body.login #user_pass.fade-in {
        opacity: 1;
        transform: translateY(0); }
    body.login .forgetmenot {
      position: relative;
      transition: all 0.5s ease 0.25s;
      transform: translateX(-50px);
      z-index: 10; }
      body.login .forgetmenot.fade-in {
        opacity: 1;
        transform: translateX(0); }
    body.login .submit {
      position: relative;
      transition: all 0.5s ease 0.25s;
      transform: translateX(50px);
      z-index: 0; }
      body.login .submit.fade-in {
        opacity: 1;
        transform: translateX(0); }
    body.login #nav {
      transition: all 0.5s ease 0.5s;
      transform: translateY(50px); }
      body.login #nav.fade-in {
        opacity: 1;
        transform: translateY(0); }
    body.login h1 {
      transition: all 0.5s ease 0.5s;
      transform: scale(0); }
      body.login h1.fade-in {
        opacity: 1;
        transform: scale(1); }
    body.login .message,
    body.login #login_error {
      color: #333;
      border: 0 none;
      box-shadow: none;
      margin-bottom: 15px;
      padding: 15px;
      transition: all 0.5s ease 0.75s; }
      body.login .message.fade-in,
      body.login #login_error.fade-in {
        opacity: 1; }