/* Login Page
  Source: http://codepen.io/suez/full/dPqxoM/
-----------------------------------------------------------------------------*/
.backgroundImage {
  position: relative;
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: auto; }

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

html,
body {
  font-size: 62.5%;
  height: 100%;
  overflow: hidden; }
  @media (max-width: 768px) {
    html,
    body {
      font-size: 50%; } }
svg {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  overflow: visible; }

.svg-icon {
  cursor: pointer; }
  .svg-icon path {
    stroke: rgba(255, 255, 255, 0.9);
    fill: none;
    stroke-width: 1; }

input,
button {
  outline: none;
  border: none; }

.demo {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -15rem;
  margin-top: -26.5rem;
  width: 30rem;
  height: 53rem;
  overflow: hidden; }

.logoNexu {
  position: absolute;
  top: 16%;
  left: 25%;
  width: 15rem;
  height: 15rem; }

.login {
  position: relative;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 42, 84, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
  transition: opacity 0.1s, transform 0.3s cubic-bezier(0.17, -0.65, 0.665, 1.25);
  transform: scale(1); }
  .login.inactive {
    opacity: 0;
    transform: scale(1.1); }
  .login__check {
    position: absolute;
    top: 16rem;
    left: 13.5rem;
    width: 14rem;
    height: 2.8rem;
    background: #fff;
    transform-origin: 0 100%;
    transform: rotate(-45deg); }
    .login__check:before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 100%;
      width: 2.8rem;
      height: 5.2rem;
      background: #fff;
      box-shadow: inset -0.2rem -2rem 2rem rgba(0, 0, 0, 0.2); }
  .login__form {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    padding: 1.5rem 2.5rem;
    text-align: center; }
  .login__row {
    height: 5rem;
    padding-top: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  .login__icon {
    margin-bottom: -0.4rem;
    margin-right: 0.5rem; }
    .login__icon.name path {
      stroke-dasharray: 73.50196075439453;
      stroke-dashoffset: 73.50196075439453;
      animation: animatePath 2s 0.5s forwards; }
    .login__icon.pass path {
      stroke-dasharray: 92.10662841796875;
      stroke-dashoffset: 92.10662841796875;
      animation: animatePath 2s 0.5s forwards; }
  .login__input {
    display: inline-block;
    width: 22rem;
    height: 100%;
    padding-left: 1.5rem;
    font-size: 1.5rem;
    background: transparent;
    color: #fdfcfd; }
  .login__input:-webkit-autofill, .login__input:-webkit-autofill:hover, .login__input:-webkit-autofill:focus, .login__input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fdfcfd !important; }
  .login__submit {
    position: relative;
    width: 100%;
    height: 4rem;
    margin: 5rem 0 2.2rem;
    color: black;
    font-weight: bold;
    background: #ffb300 !important;
    font-size: 1.5rem;
    border-radius: 3rem;
    cursor: pointer;
    overflow: hidden;
    transition: width 0.3s 0.15s, font-size 0.1s 0.15s; }
    .login__submit:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1.5rem;
      margin-top: -1.5rem;
      width: 3rem;
      height: 3rem;
      border: 2px dotted #fff;
      border-radius: 50%;
      border-left: none;
      border-bottom: none;
      transition: opacity 0.1s 0.4s;
      opacity: 0; }
    .login__submit.processing {
      width: 4rem;
      font-size: 0; }
      .login__submit.processing:after {
        opacity: 1;
        animation: rotate 0.5s 0.4s infinite linear; }
    .login__submit.success {
      transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s;
      transform: scale(30);
      opacity: 0.9; }
      .login__submit.success:after {
        transition: opacity 0.1s 0s;
        opacity: 0;
        animation: none; }
  .login__signup {
    font-size: 1.2rem;
    color: #aba8ae; }
    .login__signup a {
      color: #fff;
      cursor: pointer; }

.ripple {
  position: absolute;
  width: 15rem;
  height: 15rem;
  margin-left: -7.5rem;
  margin-top: -7.5rem;
  background: rgba(0, 0, 0, 0.4);
  transform: scale(0);
  animation: animRipple 0.4s;
  border-radius: 50%; }

@keyframes animRipple {
  to {
    transform: scale(3.5);
    opacity: 0; } }

@keyframes rotate {
  to {
    transform: rotate(360deg); } }

@keyframes animatePath {
  to {
    stroke-dashoffset: 0; } }

/*# sourceMappingURL=login.css-3b9eb3ec9ccb9e82e24f5b8dddda61d97979ed957b7923c4e48d821438b9b4f1.map */