@charset "utf-8";
html,  body { overflow: hidden; }
body { background: url(../img/bg.jpg) no-repeat; background-size: cover; text-align: center; min-height: 500px; }
.icons { position: relative;}
.icons::before { position: absolute;}
.login-container { text-align: center; width: 30%; position: fixed; left: 35%; top: 50%; background: #2b2b36; text-align: center; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -o-border-radius: 15px; margin-top: -250px; color: #bbb; z-index: 2; }
.login-container>dl>dt { padding: 5px 0 5px 50px; text-align: left; font-weight: 600; font-size: 1.5em; background: #23232e; height: 50px; line-height: 40px; border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px; -moz-border-top-left-radius: 10px; -o-border-top-left-radius: 10px; border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-top-right-radius: 10px; -o-border-top-right-radius: 10px }
.login-container>dl>dt>i:before { left: -35px; top: -12px; font-size: 30px;  }
.login-container>dl>dd { height: 100px; width: 100%; clear: both; }
.login-container>dl>dd>i { font-size: 90px; color: #b51111; display: block; margin: 0px auto; width: 90px; height: 90px; }
.login-container>dl>dd>i:before { top: 30px; left: 0px; }
.login-container>ul>li>i { font-size: 24px!important; }
.login-container>ul>li>i:before { top: -10px; left: 10px; font-size: 32px!important; }

input { color: #9199aa; }
input[type="text"] { width: 70%; padding: 1em 2em 1em 3em; font-size: 18px; outline: none; background: none; border: none; font-weight: 100; border-bottom: 1px solid #484856; margin-top: 1.5em; }
input[type="password"] { width: 70%; padding: 1em 2em 1em 3em; font-size: 18px; outline: none; background: none; border: none; font-weight: 100; border-bottom: 1px solid #484856; margin-bottom: 3em; }
input[type="submit"] { font-size: 30px; color: #bbb; outline: none; border: none; background: #c51111; width: 100%; padding: 18px 0; border-bottom-left-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-bottom-left-radius: 15px; -o-border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-bottom-right-radius: 15px; -o-border-bottom-right-radius: 15px; cursor: pointer; }
input[type="submit"]:hover {background: #f51111;border-bottom-left-radius: 15px; -webkit-border-bottom-left-radius: 15px; -moz-border-bottom-left-radius: 15px; -o-border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-bottom-right-radius: 15px; -o-border-bottom-right-radius: 15px; transition: 1s all; -webkit-transition: 1s all; -moz-transition: 1s all; -o-transition: 1s all; }
.ie { display: none; height: 200px; text-align: center; font-size: 18px; color: #d21414; padding-top: 150px; }
.login-container>ul>li>b:before { display: none; color: #FF0000 }
.login-container>ul>li>input.error { border-color: #FF0000; color: #FF0000; }
.login-container>ul>li>input.error+b:before { display: block; left: -20px; top: 5px; font-size: 24px;  }
.login-container>ul>li>input.error+i:before { color: #FF0000; }

@media (max-width:1024px) {
.login-container { width: 38%; left: 32%; margin-top: -260px; }
}

@media (max-width:768px) {
.login-container { width: 50%; left: 25%; margin-top: -230px; }
}

@media (max-width:640px) {
.login-container { width: 60%; left: 20%; margin-top: -210px; }
}

@media (max-width:480px) {
.login-container { width: 80%; left: 10%; }
}

@media (max-width:320px) {
.login-container { width: 90%; left: 5%; }
input[type="text"] { width: 62%; padding: 1.2em 2em .5em 2.5em; font-size: 17px; margin-top: .5em; }
input[type="password"] { width: 62%; padding: 1.2em 2em .5em 2.5em; font-size: 17px; margin-top: .5em; margin-bottom: 2em; }
input[type="submit"] { font-size: 28px; padding: 10px 0; }
}