html{height: 100%; width: 100%;}
body{width: 100%; height: 100%; background: url("../images/login-bg.jpg") 50% 50%/cover no-repeat fixed;}
.error{color: #c23934; font-size: 16px;}
.login{width: 100%; height: 100%; display: flex; display: -webkit-flex; justify-content: center; align-items: center;}
.from{width: 300px;}
.from div{margin-top: 10px; text-align: center;padding: 12px; display: flex; display: -webkit-flex; justify-content: center; align-items: center;}
.from div:nth-of-type(1),.from div:nth-of-type(2){padding: 5px;}
.from div:nth-of-type(2){display: none;}
.from div:nth-of-type(3),.from div:nth-of-type(4){background-color: #ffffff; position: relative;}
.from div:nth-of-type(3) img,.from div:nth-of-type(4) img{width: 24px; display: block;}
.from div:nth-of-type(3) input,.from div:nth-of-type(4) input{width: 100%; height: 24px; text-indent: 1em;}
.from div:nth-of-type(5){display: flex; display: -webkit-flex;justify-content: center; align-items: center;}
.from div:nth-of-type(5) a{display: block; width: 80%; height: 40px; line-height: 40px; border-radius: 5px; border: 1px solid #206bd1; background-color: #92b5c8; color: #ffffff; transition: background-color 500ms,border 500ms; -webkit-transition: background-color 500ms,border 500ms; -moz-transition: background-color 500ms,border 500ms;-o-transition: background-color 500ms,border 500ms;}
.from div:nth-of-type(5) a:hover{background-color: #206bd1; border: 1px solid #92b5c8;}
.from a{color: #ffffff; font-size: 14px; }
.from div:nth-of-type(6){display: flex; display: -webkit-flex; justify-content: space-between; align-items: center;}
.from div:nth-of-type(6) a:hover,.from div:nth-of-type(7) a:hover{text-decoration: underline;}
.from div:nth-of-type(6),.from div:nth-of-type(7){padding: 8px;}

.from2{width: 300px; display: none;}
.from2 div{margin-top: 10px; text-align: center; padding: 12px; display: flex; display: -webkit-flex; justify-content: center; align-items: center;}
.from2 div:nth-of-type(1),.from2 div:nth-of-type(2),.from2 div:nth-of-type(3){padding: 5px;}
.from2 div:nth-of-type(2) p{color: #ffffff; font-size: 14px;}
.from2 div:nth-of-type(3){display: none;}
.from2 div:nth-of-type(4),.from2 div:nth-of-type(5),.from2 div:nth-of-type(6),.from2 div:nth-of-type(7),.from2 div:nth-of-type(8){background-color: #ffffff;}
.from2 div:nth-of-type(4) input,.from2 div:nth-of-type(5) input,.from2 div:nth-of-type(6) input,.from2 div:nth-of-type(7) input,.from2 div:nth-of-type(8) input{width: 100%; height: 24px; text-indent: 1em;}
.from2 div:nth-of-type(4) img,.from2 div:nth-of-type(5) img,.from2 div:nth-of-type(6) img,.from2 div:nth-of-type(7) img,.from2 div:nth-of-type(8) img{width: 24px; display: block;}
.from2 div:nth-of-type(9){display: flex; display: -webkit-flex;justify-content: center; align-items: center;}
.from2 div:nth-of-type(9) a{display: block; width: 80%; height: 40px; line-height: 40px; border-radius: 5px; border: 1px solid #206bd1; background-color: #92b5c8; color: #ffffff; transition:background-color 500ms,border 500ms; -webkit-transition: background-color 500ms,border 500ms; -moz-transition: background-color 500ms,border 500ms;-o-transition: background-color 500ms,border 500ms; }
.from2 div:nth-of-type(9) a:hover{background-color: #206bd1; border: 1px solid #92b5c8;}
.from2 div:nth-of-type(10){padding: 8px;}
.from2 a{color: #ffffff; font-size: 14px;}

.from3{width: 300px; display: none;}
.from3 div{display: flex; display: -webkit-flex; justify-content: center; align-items: center; flex-direction: column; font-size: 14px;}
.from3 div p{text-align: center; color: #ffffff; margin-top: 10px;}
.from3 div p:nth-of-type(1){font-size: 24px;}
.from3 div a{margin-top: 10px; color: #ffffff;}
.from3 div a:hover{text-decoration: underline;}

.from4{width: 300px; display: none;}
.from4 div{margin-top: 10px;; text-align: center; padding: 12px; display: flex; display: -webkit-flex; justify-content: center; align-items: center;}
.from4 div:nth-of-type(1),.from2 div:nth-of-type(2),.from2 div:nth-of-type(3){padding: 5px;}
.from4 div:nth-of-type(1) p{font-size: 24px; color: #ffffff;}
.from4 div:nth-of-type(2) p{font-size: 14px; color: #ffffff;}
.from4 div:nth-of-type(3) {display: none;}
.from4 div:nth-of-type(4){background-color: #ffffff;}
.from4 div:nth-of-type(4) img{width: 24px; display: block;}
.from4 div:nth-of-type(4) input{width: 100%; height: 24px; text-indent: 1em;}
.from4 div:nth-of-type(5) a{font-size: 16px; display: block; width: 100%; height: 40px; line-height: 40px; border-radius: 5px; border: 1px solid #206bd1; background-color: #92b5c8; color: #ffffff; transition:background-color 1s,border 1s; -webkit-transition: background-color 1s,border 1s; -moz-transition: background-color 1s,border 1s;-o-transition: background-color 1s,border 1s; }
.from4 div:nth-of-type(5) a:hover{background-color: #206bd1; border: 1px solid #92b5c8;}
.from4 div:nth-of-type(6) a{font-size: 14px; color: #ffffff;}
.from4 div:nth-of-type(6) a:hover{text-decoration: underline;}


.foot{position: fixed; bottom: 10px; width: 100%;color: #ffffff; text-align: center; font-size: 14px;}

@media screen and (max-width: 415px) {
    .foot{font-size: 14px; bottom: 10px;}
}
@media screen and (max-width: 320px) {
    .foot{font-size: 12px;}
}