* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; -ms-transition: all 400ms ease; transition: all 400ms ease;}
a {color:#fff; text-decoration: none;}
a:hover {text-decoration: underline;}

strong {font-weight:bold;}
body { font-family: Arial; font-size: 12px; color: #fff; background: url(images/bg.jpg) no-repeat center center #cfdacf; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

input:focus, button:focus {outline:none;}
input:-webkit-autofill, input:-webkit-autofill:focus {-webkit-box-shadow: 0 0 0px 1000px white inset;}

.no-transition, .login-failed *, .login-failed, .overlay {-webkit-transition:none; -moz-transition:none; -o-transition:none; -ms-transition:none; transition:none;}

.l {float:left;}
.r {float:right;}
.fw {float:left; width:100%; position: relative;}

.set {width:960px; margin:0 auto;}

.login-wr {position: absolute; top:50%; margin:-177.5px auto 0 -480px; left:50%;}
.login-wr .l{width:55%;}
.login-wr .r{width:42%;}

.login-wr .l h1 {font-size:109px; margin:0 0 0 65px}

.login-wr .logo {margin-top:17px; width:100%; }

.row-1 {background:#305466; padding:20px 30px 30px 132px; line-height:15px;}

.row-2 { background: #b1bcbf; background: -moz-linear-gradient(top, #b1bcbf 0%, #cfd7d5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b1bcbf), color-stop(100%, #cfd7d5)); background: -webkit-linear-gradient(top, #b1bcbf 0%, #cfd7d5 100%); background: -o-linear-gradient(top, #b1bcbf 0%, #cfd7d5 100%); background: -ms-linear-gradient(top, #b1bcbf 0%, #cfd7d5 100%); background: linear-gradient(to bottom, #b1bcbf 0%, #cfd7d5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1bcbf', endColorstr='#cfd7d5', GradientType=0 );padding: 28px 35px 35px 58px; box-shadow: 0 1px 0 #798884; -webkit-box-shadow: 0 1px 0 #798884; border-bottom: solid 1px #b4bcba }
.row-2 label {color:#231f20; margin-right:12px; display: block; width:60px; text-align:right; display:inline-block; width:20%;}
.row-2 input {background:#fff; border:solid 1px #d1d3d4; padding:12px 8px; display:inline-block; width:75%;}
.row-2 li {margin:0 0 18px 0; width:100%;}
.row-2 li:last-child {margin:0; text-align:right;}

.row-2 a {color:#305566;}

.row-2 .btn { font-size: 15px; font-weight: bold; width: 95px; padding: 15px 12px; cursor: pointer; margin:0 3.5px 0 8px; color: #fff; text-align: center; border: none; border-bottom: solid 1px #546c7b; background: #305466; }
.row-2 .btn:hover,
.row-2 .btn:active { -webkit-box-shadow: inset 0 0 30px #4C6C74; -moz-box-shadow: inset 0 0 30px #4C6C74; box-shadow: inset 0 0 30px #4C6C74; }

.footer {background:#414142; padding:25px 0 140px 0; position: fixed; bottom:0;}
.footer ul li {float:left; border-right:solid 1px #fff; margin:0 10px 0 0; padding:0 10px 0 0;}
.footer ul li:last-child {border:none;}


.overlay {display: none;position: fixed; left:0; top:0; width:100%; height:100%; background:#000; background:rgba(1,1,1,0.8); z-index:998;}


/* Login failed pop */
.login-failed {display: none; width:300px; min-height:150px; background:#dbd9d8; position: fixed; top:50%; left:50%; margin:-87.5px 0 0 -150px; z-index:999;}
.login-failed .msg {padding:15px 15px 20px 15px; text-align: center; float:left; width:100%;}
.login-failed h1 {color:#305566; font-weight:bold; text-align: center; font-size:20px; margin:5px 0 0 0}
.login-failed h4 {color:#666; margin:5px 0}
.act {float:left; width:100%; height:26px; background:#dbd9d8; border-bottom:solid 1px #666}
.close {width:12px; height:12px; position: absolute; right:7px; top:7px; cursor: pointer; display: block; background:url(images/close-icon.jpg);}

@media only screen and (max-width:980px) {
    .set { width: 95%; margin: 0 2.5%; left:0;}    
    .login-wr {margin:-177.5px auto 0 -453px; left:50%;}    
    .login-wr .l {width:45%;}
    .login-wr .r { min-width:405px;}
}
@media only screen and (max-width:880px) {
   .logo { display: block; margin: 20px auto; max-width: 400px;}   
   .login-wr {margin:0; top:12%; left:2.5%}   
   .login-wr .l { width: 100%; float: none;}
   .login-wr .r { width: 400px; margin: 0 auto; float: none;}   
   .footer {padding:20px 0}
}
@media only screen and (max-width:410px) {
    .login-wr .r { min-width:100%; width:100%; margin-left:0;}
    .login-wr .logo {width:90%; }
    
    .row-1 {padding:15px}
    .row-2 {padding:20px;}    
    .row-2 li:last-child label {display: none;}    
}
@media only screen and (max-width:330px) {
   .footer ul li {width:100%; text-align: center; margin:0 0 5px 0; border:none; padding:0;}
   .footer ul li:last-child {margin-bottom:0;}
}
@media only screen and (max-width:309px) {
    .row-2 label {text-align: center; margin:0 0 10px 0}
    .row-2 label, .row-2 input {width:100%;}
    .row-2 input{}
    .row-2 .btn {width:85px; margin:0;}
}
@media only screen and (max-width:330px) and (max-height:640px){
     .login-wr {top:auto;}}

@media only screen and (min-width:880px) and (max-height:768px) {
    .login-wr {top:10%; margin-top:0;}
}
@media only screen and (min-width:880px) and (max-height:768px) and (min-height:650px){
    .login-wr {top:10%; top:18%;}
}
@media only screen and (min-width:880px) and (max-height:600px) {
    .footer {padding:20px 0}
}
@media only screen and (min-width:880px) and (max-height:460px) {
    .login-wr { float:left; position: relative; bottom:auto; margin-bottom:20px; top:auto!important; margin: 25px 2.5%; left:0;}
    .footer {position: relative; float:left;}
}
@media only screen and (max-width:880px) and (max-height:510px) {
    body, html {height:auto}
    .login-wr .logo {width:90%; }
    .login-wr { float:left; position: relative; bottom:auto; margin-bottom:20px; top:auto!important}
    .row-2 li:last-child label {display: none;}
    .footer {position: relative; float:left;}     
}
@media only screen and (max-width:880px) and (max-height:670px) {
    .login-wr {top:1%;}
}