@import url('https://fonts.googleapis.com/css?family=Roboto');

    .tibiu_login_form {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      position: relative;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      margin: .32rem .82rem;
      border-radius: 5px;
    }
    body.on-start .tibiu_login_form__cover:before {
      -webkit-transform: scale(0.15);
      transform: scale(0.15);
    }
    body.document-loaded .tibiu_login_form__loader {
      -webkit-transform: scale(0);
      transform: scale(0);
      opacity: 0;
      visibility: hidden;
    }
    body.document-loaded .tibiu_login_form__content {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
    body.document-loaded .tibiu_login_form__cover {
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    }
    body.document-loaded .tibiu_login_form__cover:after {
      -webkit-transform: scale(2);
      transform: scale(2);
    }
    body.document-loaded .tibiu_login_form__cover:before {
      -webkit-transition: opacity 0.3s ease 0.8s, -webkit-transform 2s ease;
      transition: opacity 0.3s ease 0.8s, -webkit-transform 2s ease;
      transition: transform 2s ease, opacity 0.3s ease 0.8s;
      transition: transform 2s ease, opacity 0.3s ease 0.8s, -webkit-transform 2s ease;
      -webkit-transform: scale(2);
      transform: scale(2);
      opacity: 0;
    }

    .tibiu_login_styled-button__moving-block.back .tibiu_login_styled-button__text-holder {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
    .tibiu_login_styled-button:hover .face,
    .tibiu_login_styled-button:active .face {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
    .tibiu_login_styled-button:hover .face .tibiu_login_styled-button__text-holder,
    .tibiu_login_styled-button:active .face .tibiu_login_styled-button__text-holder {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    .tibiu_login_styled-button:hover .back,
    .tibiu_login_styled-button:active .back {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    .tibiu_login_styled-button:hover .back .tibiu_login_styled-button__text-holder,
    .tibiu_login_styled-button:active .back .tibiu_login_styled-button__text-holder {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    .tibiu_login_styled-button:active {
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }
    .tibiu_login_styled-input {
      width: 100%;
      position: relative;
      margin-bottom: 0px;
	  margin-top: 25px;
      border: 1px solid #ddd;
      border-radius: 3px;
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    }
    .tibiu_login_styled-input__circle {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      overflow: hidden;
      border-radius: 3px;
    }
    .tibiu_login_styled-input__circle:after {
      content: '';
      position: absolute;
      left: 16.5px;
      top: 19px;
      height: 14px;
      width: 14px;
      z-index: -2;
      border-radius: 50%;
      background: #ddd;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0);
      -webkit-transition: opacity 1s ease, -webkit-transform 0.6s ease;
      transition: opacity 1s ease, -webkit-transform 0.6s ease;
      transition: transform 0.6s ease, opacity 1s ease;
      transition: transform 0.6s ease, opacity 1s ease, -webkit-transform 0.6s ease;
    }
    .tibiu_login_styled-input__input {
      width: 100%;
      -webkit-appearance: none;
      font-size: 20px;
      outline: none;
      background: none;
      padding: 15px 15px;
      color: #000;
      border: none;
      font-weight: 600;
      letter-spacing: 0.035em;
    }
    .tibiu_login_styled-input__placeholder {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      z-index: -1;
      padding-left: 45px;
      color: #aaa;
    }
    .tibiu_login_styled-input__placeholder-text {
      -webkit-perspective: 500px;
      perspective: 500px;
      display: inline-block;
    }
    .tibiu_login_styled-input__placeholder-text .letter {
      display: inline-block;
      vertical-align: middle;
      position: relative;
      -webkit-animation: letterAnimOut 0.25s ease forwards;
      animation: letterAnimOut 0.25s ease forwards;
      font-size: 20px;
    }
    .tibiu_login_styled-input__placeholder-text .letter.active {
      -webkit-animation: letterAnimIn 0.25s ease forwards;
      animation: letterAnimIn 0.25s ease forwards;
    }
    .tibiu_login_styled-input:hover {
      border-color: rgba(0, 0, 0, 0.2);
    }
    .tibiu_login_styled-input.filled {
      border-color: rgba(0, 0, 0, 0.6);
    }
    .tibiu_login_styled-input.filled .tibiu_login_styled-input__circle:after {
      -webkit-transform: scale(37);
      transform: scale(37);
      opacity: 0;
    }
    @-webkit-keyframes letterAnimIn {
      0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      25% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        color: red;
      }
      45% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        opacity: 0;
        color: red;
      }
      55% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        opacity: 0;
      }
      56% {
        -webkit-transform: translate(-30px, -27px);
        transform: translate(-30px, -27px);
        opacity: 0;
        color: #2196F3;
      }
      76% {
        color: #2196F3;
        opacity: 1;
        -webkit-transform: translate(-30px, -27px);
        transform: translate(-30px, -27px);
      }
      100% {
        -webkit-transform: translate(-30px, -27px);
        transform: translate(-30px, -27px);
        opacity: 1;
      }
    }
	/* 登录框提示字体进入 */
    @keyframes letterAnimIn {
      0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
      25% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        color: red;
      }
      45% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        opacity: 0;
        color: red;
      }
      55% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        opacity: 0;
      }
      56% {
        -webkit-transform: translate(-30px, -27px);
        transform: translate(-40px, -45px);
        opacity: 0;
        color: #2196F3;
      }
      76% {
        color: #2196F3;
        opacity: 1;
        -webkit-transform: translate(-30px, -27px);
        transform: translate(-40px, -45px);
      }
      100% {
        -webkit-transform: translate(-30px, -27px);
        transform: translate(-40px, -45px);
        opacity: 1;
      }
    }
    @-webkit-keyframes letterAnimOut {
      0% {
        -webkit-transform: translate(-30px, -27px);
        transform: translate(-30px, -27px);
        opacity: 1;
      }
      25% {
        -webkit-transform: translate(-30px, -40px);
        transform: translate(-30px, -40px);
        opacity: 0;
      }
      45% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        opacity: 0;
      }
      55% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        opacity: 0;
        color: red;
      }
      56% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        color: red;
      }
      100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
    }
	/* 登录框提示字体出 */
    @keyframes letterAnimOut {
      0% {
        -webkit-transform: translate(-40px, -45px);
        transform: translate(-40px, -45px);
        opacity: 1;
      }
      25% {
        -webkit-transform: translate(-40px, -45px);
        transform: translate(-30px, -40px);
        opacity: 0;
      }
      45% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        opacity: 0;
      }
      55% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        opacity: 0;
        color: red;
      }
      56% {
        -webkit-transform: translate(0, 10px);
        transform: translate(0, 10px);
        color: red;
      }
      100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
    }
    @-webkit-keyframes dash {
      0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        opacity: 0;
      }
      50% {
        stroke-dasharray: 40, 200;
        opacity: 1;
      }
      100% {
        stroke-dasharray: 125, 200;
        opacity: 1;
      }
    }
    @keyframes dash {
      0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
        opacity: 0;
      }
      50% {
        stroke-dasharray: 40, 200;
        opacity: 1;
      }
      100% {
        stroke-dasharray: 125, 200;
        opacity: 1;
      }
    }