@media all and (min-width: 320px) and (max-width: 479px) {
	.logo{margin-top:0px; width: 80%;}
	.login { box-sizing:border-box; width:100%;  padding: 20px 10px;}
	.logbox { width:auto; box-sizing:border-box; margin:10px; padding-top:15px;}
    .formlable { width:auto; box-sizing:border-box; margin:0px; }
	.loginbtn { height: 40px; width:100%; margin-left: 0px;}
    .username input {width:100%;}
    .login-error img {width: 6%; margin:0 7px 0 0;}
    .login-error {font-size:11px;}
    .username, .password {width:100%;}
	.password { margin-bottom:0px;}
    .username input, .password input {width:86%;}
    .footer {width:100%;}

    .footer-top {margin:0 0 10px; float:left;}
    .footer .footer-copyright {font-size: 10px;
    padding: 10px;
    text-align: left;}
    .footer .footer-copyright a {float:left;margin-top:10px;}
    .footer .footer-copyright a img {margin:0px; padding:0px;}
    .footer .footer-copyright strong {float: left; font-weight: normal; padding-right: 10px; width: 100%;}

}
@media all and (min-width: 480px) and (max-width: 638px) {
.logo{ width: 37% !important; margin-top:0px; box-sizing:border-box; height: 45px !important;}
.username input,.password input{ width:100%; box-sizing:border-box;}
.username,.loginbtn,.password  { width:100%;}
.password { margin-bottom:0px;}
.login { width:100%;  box-sizing: border-box;}
.logo img { width: 100%;}
}
@media all and (min-width: 360px) and (max-width: 639px) {
.username input{padding: 0 39px 1px 36px; box-sizing: border-box; width:100%;}
.password { margin-bottom:0px;}
.logo {width:70%}
.password input{padding: 0 39px 1px 36px; box-sizing: border-box; width:100%;}
.loginbtn { margin-left: 0px;}
}
@media all and (min-width: 640px) and (max-width: 767px) {
.logo{ margin-top:0px;}
.password { margin-bottom:0px;}
.loginbtn { margin-left:0px; width:100%;}
}
@media all and (min-width: 768px) and (max-width: 900px) {
	.logo {margin-top: 0px;}
}