*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family:inherit;
-webkit-font-smoothing:antialiased;
}

html, body{
min-height:100%;
padding:0;
margin:0;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

body{
background:#eef1f4;
overflow:hidden;
}

.login{
background:#fff;
width:300px;
height:396px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
text-align:center;
border-bottom:1px solid #e7eaec;
animation:login 0.5s;
animation-fill-mode:forwards;
-webkit-animation:login 0.5s;
-webkit-animation-fill-mode:forwards;
-moz-animation:login 0.5s;
-moz-animation-fill-mode:forwards;
}

form{
padding:0 30px;
}

form h1{
margin:30px 0 0 0;
}

form h1 img{
width:70px;
}

form p{
font-size:14px;
max-width:180px;
margin:15px auto 20px auto;
line-height:1.5em;
color:#a7b1c2;
font-weight:500;
}

form input{
-webkit-appearance:none;
width:100%;
height:44px;
color:#676a6c;
border:solid 1px #eee;
border-radius:4px;
outline:none;
padding:0 16px;
font-size:14px;
margin:4px 0;
background:#F9F9FA;
}

form input[type="submit"]{
background:#E85048;
color:#fff;
font-weight:500;
margin-top:16px;
border:none;
cursor:pointer;
}

p.error-detail{
font-size:14px;
margin:0;
line-height:40px;
color:#fff;
font-weight:500;
background:#E85048;
}

.login.error{
height:436px;
}

@keyframes login{
  from{transform:translateY(60px); opacity:0;}
  to{transform:translateY(0px); opacity:1;}
}

@-webkit-keyframes login{
  from{-webkit-transform:translateY(60px); opacity:0;}
  to{-webkit-transform:translateY(0px); opacity:1;}
}

@-moz-keyframes login{
  from{-moz-transform:translateY(60px); opacity:0;}
  to{-moz-transform:translateY(0px); opacity:1;}
}