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

* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  font-family:"Raleway";
}
body {
  height:100vh;
}
div.login {
  position:inherit;
  top:50%;
  left:50%;
  transform:translate(-50%,10%);
  width:300px;
  height:450px;
  background:#f6f6f6;
  overflow:hidden;
  box-shadow:0px 0px 50px 2px #aaa;
}
.login .banner {
  position:absolute;
  top:0px;
  height:0px;
  width:100%;
  height:210px;
  background:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.4)),url("images/logo_bg.jpg") center no-repeat;
  background-size:cover;
  transform:skew(0deg,-8deg) translateY(-25px);
  z-index:2;
}
.banner:before {
  content:url("images/login_logo.jpg");
  position:absolute;
  width:80px;
  height:80px;
  background:#000;
  color:#fff;
  bottom:-35px;
  left:50%;
  line-height:80px;
  font-size:17px;
  text-transform:uppercase;
  border-radius:50%;
  text-align:center;
  transform:skew(0deg,8deg) translateX(-50%);
}
.login .form {
  position:absolute;
  top:210px;
  background:#f6f6f6;
  width:100%;
  height:calc(100% - 180px);
}
.login .form .wrapper {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:85%;
}
.login .form .row {
  margin:20px 0px;
}
.login .form .row .label {
  font-size:12px;
  font-weight:600;
  color:rgb(100,100,100);
}
.login .form .row .txtbox {
  margin-top:2px;
  font-size:13px;
  color:rgb(70,70,70);
  border:none;
  border-bottom:1px solid rgba(100,100,100,0.6);
  outline:none;
  height:25px;
  background:transparent;
  width:100%;
}
.login .form .row .button {
  margin-top:0px;
  font-size:13px;
  color:rgb(100,100,100);
  border:none;
  outline:none;
  height:40px;
  text-transform:uppercase;
  background:#1e9cc9;
  width:100%;
  color:#fff;
  cursor:pointer;
}
.login .form .signup {
  position:absolute;
  text-align:center;
  width:100%;
  font-size:13px;
  bottom:50px;
  color:#333;
}
.login .form .signup a {
  color:#1e9cc9;
  text-decoration:none;
  font-weight:600;
}