html {
    height: 100%;
}
h1 { color: #ffffff; font-size: 22px; }
h4 { color: #ff6a00; font-size: 16px; }
a{color:#fff;}
body {font-family: "open sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 13px;}
.signin { height: auto; background: url(/images/login-background.jpg) no-repeat center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color: rgba(255,255,255,.95);}

/*.signinpanel .logopanel { float: none; width: auto; padding: 0; background: 0 0 }
    .signinpanel .form-control { display: block; margin-top: 15px }
    .signinpanel .uname { background: #fff url(/images/user.png) no-repeat 95% center }
    .signinpanel .pword { background: #fff url(/images/locked.png) no-repeat 95% center }
    .signinpanel .btn { margin-top: 15px }*/
/*.signinpanel form { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); -moz-box-shadow: 0 3px 0 rgba(12,12,12,.03); -webkit-box-shadow: 0 3px 0 rgba(12,12,12,.03); box-shadow: 0 3px 0 rgba(12,12,12,.03); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 30px }*/
.signinpanel { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 750px; background: rgba(0, 0, 0, 0.64); border-radius: 5px; padding: 20px; transition: width 1s; /*margin-top: 50%; transform: translate(0, -50%);*/ }
    .signinpanel .info { padding: 20px; }
        .signinpanel .info .title { }
        .signinpanel .info .items { list-style: none; color: #ff6a17; }
    .signinpanel .form { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3); -moz-box-shadow: 0 3px 0 rgba(12,12,12,.03); -webkit-box-shadow: 0 3px 0 rgba(12,12,12,.03); box-shadow: 0 3px 0 rgba(12,12,12,.03); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; padding: 30px; }
        .signinpanel .form .form-group { padding:6px 0; }
        .signinpanel .form .form-control { display: block; width: 100%; height: 26px; padding: 5px 0px 5px 5px; margin-right: 5px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }
        .signinpanel .form .uname { background: #fff url(/images/user.png) no-repeat 95% center }
        .signinpanel .form .pword { background: #fff url(/images/locked.png) no-repeat 95% center }
        .signinpanel .form .btn { display: inline-block; padding: 8px 0px 8px 0px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; }
.btn-success { background-color: #1c84c6; border-color: #1c84c6; color: #FFF; }

.signup-footer { border-top: solid 1px rgba(255,255,255,.3); margin: 20px 0; padding-top: 15px }

@media screen and (max-width:768px) {
    .signinpanel, .signuppanel { margin: 0 auto; width: 420px !important; padding: 20px }
        .signinpanel form { margin-top: 20px }
        .signup-footer, .signuppanel .form-control { margin-bottom: 10px }
            .signup-footer .pull-left, .signup-footer .pull-right { float: none !important; text-align: center }
}

@media screen and (max-width:320px) {
    .signinpanel, .signuppanel { margin: 0 20px; width: auto }
}