$base: rgba(255,255,255,0.4);
$red: #FF2B4B;
$green: #26C97D;
$padding:10px 16px;
body{
  font-size:62.5%;
  width:100%;
  height:100%;
  position:absolute;
  font-family:Raleway;
 background:url(https://newevolutiondesigns.com/images/freebies/city-wallpaper-18.jpg) no-repeat fixed;
  background-size:cover;
  background-position:50%;
  -webkit-font-smoothing:antialiased;
  font-smoothing:antialiased;
  .menu{
    position:absolute;
    width:100%;
    background:inherit;
    .mainmenu{
      background:url(https://newevolutiondesigns.com/images/freebies/city-wallpaper-18.jpg) no-repeat fixed;
  background-size:cover;
  background-position:50%;
      &:before{
        position:absolute;
        content:"";
        display:block;
        width:100%;
        height:100%;
        background:inherit;
        @include filter(blur(3px));
      }
      &:after{
        clear: both;
        content: "";
        display: block;
      }
      .menuitem{
        float:left;
        width:10%;
        padding-top:10px;
        padding-bottom:10px;
        text-align:center;
        cursor:pointer;
        color:white;
        font-size: 1.5rem;
      }
    }
  }
  #findpass{
    top:50%;
    left:5%;
    padding: 10px 20px;
    width:auto;
    background: white;
    color:rgba(0,0,0,0.7);
    position:fixed;
    background: rgba(255,255,255,0.5);
    border:none;
    font-size: 1.2rem;
    @include border-radius(10px);
    cursor:pointer;
    @include transform(translate3d(0,-50%,0));
    &:focus{
      outline:none;
    }
  }
  .article{
    width:960px;
    font-size: 1.4rem;
    margin:20px auto;
    color:white;
    opacity:0;
    visibility:hidden;
    @include transition(opacity 400ms linear);
    @include transition-delay(800ms);
    top:0;
    position:relative;
    &.active{
      opacity:1;
      visibility:visible;
    }
    h1{
      font-size:3rem;
      text-align:center;
      margin-bottom:20px;
    }
  }
}
*{
  @include box-sizing(border-box);
}
.form{
  margin:0 auto;
  position:fixed;
  top:35%;
  left:50%;
  @include transform(translate3d(-50%,0,0));
  width:350px;
  padding: 20px;
  overflow:hidden;
  background-color:rgba(0,0,0,1);
  border: 1px solid rgba(255,255,255,0.5);
  background:inherit;
  @include border-radius(12px);
  .forceColor{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background-color:rgba(0,0,0,0.4);
  }
  
  &:before{
    content:"";
    width:110%;
    height:110%;
    position:absolute;
    background:inherit;
    left:-5%;
    right:0;
    bottom:0;
    top:-5%;
    @include filter(blur(3px));
  }
  &.goAway{
    opacity:0;
    @include transform(scale(0.6) translate3d(-50%,0,0));
    @include transition(transform 200ms ease-in-out,opacity 100ms linear);
    @include transition-delay(600ms);
  }
  .topbar{
    .spanColor{
      position:absolute;
      width:0px;
      right:20px;
      height:43px;
      opacity:0.2;
      background-color:white;
      border-top-left-radius:0px;
      border-bottom-left-radius:0px;
      border-top-right-radius:6px;
      border-bottom-right-radius:6px;
      @include transition(width 150ms ease-in-out, background-color 150ms 250ms ease-in-out, border 150ms 250ms ease-in-out);
    }
    .input{
      display:block;
      width:100%;
      position:relative;
      border-top-left-radius:6px;
      border-bottom-left-radius:6px;
      border-top-right-radius:6px;
      border-bottom-right-radius:6px;
      font-size:1rem;
      background: transparent;
      border-top: 1px solid $base;
      border-left: 1px solid $base;
      border-bottom: 1px solid $base;
      border-right: 1px solid $base;
      margin-bottom: 25px;
      color:$base;
      padding: 10px 20px;
      &::-webkit-input-placeholder{
        color:white;
        font-size: 1.2rem;
        font-family:Raleway;
        line-height:1.3rem;
        font-weight:200;
      }
      &:focus{
        outline:none;
        color:white;
        border: 1px solid white;
      }
      &.disabled:hover{
        border: 1px solid $base;
      }
      &:hover{
        border:1px solid white;
      }
    }
  }
  .submit{
      padding: 10px 20px;
      width:100%;
      font-size: 1.2rem;
      font-family: Raleway;
      font-weight:200;
      display:block;
      color: white;
      position:relative;
      border:1px solid $base;
      background: rgba(255,255,255,0.5);
      @include border-radius(6px);
      cursor:pointer;
      &:focus{
        outline:none;
      }
      &:hover{
        color:white;
        border: 1px solid white;
      }
      &.recover{
        background:$red;
        color:white !important;
        border: 1px solid white !important;
        transition: all 400ms linear;
      }
   }
}
.topbar.error{
  .spanColor{
    width:calc(100% - 39px);
    border-top-left-radius: 6px;
    border: 1px solid $base;
    border-bottom-left-radius: 6px;
    background-color:$red;
  }
  &+.submit{
    color:white;
  }
  .input{
    color: $base;
    border: 1px solid $base;
    &::-webkit-input-placeholder{
      color:white;
    }
  }
}
.topbar.success{
  .spanColor{
    width:calc(100% - 39px);
    border-top-left-radius: 6px;
    border: 1px solid $green;
    border-bottom-left-radius: 6px;
    background-color:$green;
  }
  &+.submit{
    color:white;
    border: 1px solid white;
  }
  .input{
    color: white;
    border: 1px solid $green;
    &::-webkit-input-placeholder{
      color:white;
    }
  }
}