.login-bg {
    background-color: #337ab7;
    background-image: url('../../images/login-bg.jpg');
    background-size: cover;
    background-position: top;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


.login-title {
    margin: -30px -30px 20px -30px;
    padding: 15px;
    background: #d6d6d6;
    color: #0e0e0e;
    font-size: 18px;
}
.login-title-logo {
    height: 120px;
    width: 120px;
    background-image: url('../../images/logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }


.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
    
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

.login-overlay {
    display:block;
    height: 100%;
    width:100%;
    position:fixed;
    top:0;
    right:0;
    text-align: center;
}
    .login-overlay:after {
        display: inline-block;
        height: 100%;
        width: 0;
        vertical-align: middle;
        content: ''
    }
.login {
    vertical-align: middle;
    display: inline-block;
    position: relative;
    width:500px;
    padding:30px;
    background:#ffffff;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
.login-header {
    display: inline-block;
    margin: 0 0 25px;
    font-size: 1.4em;
}