html{
    height:100%;
}

body{
    background: url('../../img/login/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
}


.login-area{
    padding:1em 0;
    background:rgba(0,0,0,0.7);
    display:block;
    position:relative;
    top:50%;
}


.logo{
    display:inline-block;
    width:12em;
    opacity:0.33;
    position:relative;
    margin-left:2em;
    top:49%;
}

.logo:hover{
    opacity:0.6;
}


.login-form{
    bottom:2em;
}

.login-area form{
    margin-left:2em;
}

form > label{
    color:#fff;
    margin-bottom:0.2em;
}

form input[type="text"]{
    margin-bottom:1rem;
}

form input[type="text"],
form input[type="email"],
form input[type="password"]{
    color:#fff;
    background-color:transparent;
    opacity:0.8;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus{
    color:#fff;
    background-color:transparent;
}

form input.error{
    margin-bottom:0;
}

form label.error{
    font-size:0.75em;
    color: #dedd65;
    margin-bottom:0.3em;
}


form button{
    color:#fff;
    border:2px solid #fff;
    margin:0.3em;
    padding:0.3em 0.6em;
    border-radius:0.25em;
    cursor:pointer;
    opacity:0.8;
}

form button:hover{
    opacity:1;
}


.forgot{
    font-size:0.8em;
    margin-left:2.8em;
}


.remind-form{
    display:none;
    -webkit-animation: fadeOut 0.5s normal forwards;
    -moz-animation:    fadeOut 0.5s normal forwards;
    -o-animation:      fadeOut 0.5s normal forwards;
}

.remind-form.active{
    display:block;
    -webkit-animation: fadeIn 0.5s normal forwards;
    -moz-animation:    fadeIn 0.5s normal forwards;
    -o-animation:      fadeIn 0.5s normal forwards;
}


@-webkit-keyframes "fadeIn" {
    0%  {  opacity: 0; }
    2%  {  opacity: 0; }
    22% {  opacity: 0.7; }
    25% {  opacity: 1; }
    100%{  opacity: 1; }
}

@-webkit-keyframes "fadeOut" {
    0%  {  opacity: 1; }
    2%  {  opacity: 1; }
    22%  {  opacity: 0.7; }
    25% {  opacity: 0; }
    100%{  opacity: 0; }
}


.remind-form .cancel{
    float:right;
    margin-right:0.3em;
    text-decoration:underline;
    color:#fff;
    opacity:0.86;
}


.reconnect-form .who{
    color: #dedd65;
    font-size:1.1em;
    letter-spacing: 1.5px;
    margin-left:0.2em;
}


.reconnect-wrapper{
    position:relative;
    top:30%;
}

.reconnect-area{
    padding:1em 0;
    background:rgba(0,0,0,0.7);
    display:block;
}


input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #fff;
}
input::-moz-placeholder { /* Firefox 19+ */
    color: #fff;
}
input:-ms-input-placeholder { /* IE 10+ */
    color: #fff;
}
input:-moz-placeholder { /* Firefox 18- */
    color: #fff;
}