/* Full page background. Dark background works best. */

body {
    background: url(../img/bg/physics1.jpg) no-repeat center center fixed;
    background-size: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'Segoe UI';
    margin:0;
}


/* The logo will be centrally aligned. If your logo width is wider than 100px, change it here. */

.logo {
    width: 150px;
    margin: 0 auto;
}

/* Image will take the size of the container. Change margin if required.*/

.logo > a > img {
    width: 100%;
    height: auto;
    margin: 30px auto;
}

.login > a > img {
    width: 100%;
    height: auto;
    margin: -20px 0 0 0;
}
/* The login container */

.login {
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(0,0,0, 0.75);
    border-radius: 0px;
    border-top: 3px solid #ff4444;

}

.login:before {
    -webkit-filter: blur(10px);     
    filter: blur(10px);      
}


/* Login header */

.login > h1 {
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 0px;
    color: #f70503;
}


/* Login fields */

.login input {
    font-size: 14px;
    font-family: 'Segoe UI';
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
    border-radius: 0px;
    box-sizing: border-box;
    outline-style: none;
    /*border: 1px solid #f70503;*/
    padding-left: 50px;
    padding-right: 20px 0;

    background: rgba(60, 25, 25, .5);
    border-left: 5px solid #ff4444;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

.login input#username {
    background: #fff url('../img/user.png') no-repeat;
    background-position: 5px 0px;
    background-size: 40px;
}

.login input#username:focus {
    background: #fff url('../img/user.png') no-repeat;
    background-position: 5px -35px;
    background-size: 40px;
}

.login input#password {
    background: #fff url('../img/psw.png') no-repeat;
    background-position: 5px 0px;
    background-size: 40px;
}

.login input#password:focus {
    background: #fff url('../img/psw.png') no-repeat;
    background-position: 5px -35px;
    background-size: 40px;
}

.login input {
    transition: all 200ms;
}

.login button {
    width: 35%;
    /* height: 40px;*/
    background: #ff4444;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid transparent;
    color: #fff;
    font-size: 14px;
    font-family: 'Segoe UI';
    outline: none;
    cursor: pointer;
    padding: 6px 12px;
}

.login button:hover,
.login button:focus {
    background: #ff4444;
    color: #fff;
    border: 1px solid transparent;
}

footer.footer {
    height: 30px;
    width: 100%;
    background-color: transparent;
    text-align:center;
}

p.copyright {
    color: #fff;
    line-height: 40px;
    font-size:1em;
    font-weight:500;
}

.modal-open .modal {
    top: 200px !important;
}

.modal-backdrop.in {
    opacity: 0.9;
    filter: alpha(opacity=50);
}

/*.modal-open #wrap{
        -webkit-filter: blur(7px);
        -moz-filter: blur(15px);
        -o-filter: blur(15px);
        -ms-filter: blur(15px);
        filter: blur(15px);
}*/

/* Responsive */

@media only screen and (min-width: 640px) {
    .login{
        width:400px;
    }
}