body{
	font-family: 'Ropa Sans',
	sans-serif;
	color:#666;
}
li,ul,body{
	margin:0;
	padding:0;
	list-style:none
}
#login-form{
	max-width:350px;
	width: 100%;
	background:#62B564;
	margin:0 auto;
	position: fixed;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
	border-radius: 5px;
}
.form-header{
	display:table;
 	clear:both
}
.form-header{
	width: 100%;
	background:#30A963;
	color:#fff;
}
.form-header i{
	font-size: 17px;
}
.form-header li{
	display:inline-block;
	text-align: center;
	line-height:40px;
}
.form-header li:nth-child(1) , .form-header li:nth-child(3){
	width: 15%;
}
.form-header li:nth-child(2) {
	width: 70%;
	border-left: 2px solid #62B564;
	border-right: 2px solid #62B564;
}
.user-image{padding:20px 0; text-align:center}
.user{
	height: 100px;
	width: 100px;
	border-radius: 50%;
	border: solid 8px #fff;
	line-height: 100px;
	color: #fff;
	font-size: 50px;
}	
.user:before{
	position: relative;
	bottom: 5px;
    left: 0;
}
.form{
	padding:0 30px;
	padding-bottom:10px;
}

.login li{
	height:35px;
	line-height:35px;
	margin-bottom:15px
}
.input{
	border:solid 1px #e8e8e8;
	outline:none;
	background:#fff;
	margin:0 auto;
	font-family: 'Ropa Sans', sans-serif;
	font-size:15px;
	display:block;
	height:35px;
	width:100%;
	padding:0 10px;
	border-radius:3px;
	transition:all .3s
}
.input:focus:invalid{
	border-color:#FFAF12;
}
.input:focus:valid{
	border-color:green;
}
.btn-login{
	border:none; outline:none; 
	background: #30A963;
	border-bottom: solid 4px #288E53; 
	font-family: 'Ropa Sans', sans-serif; 
	white-space: nowrap;
	margin:0 auto; 
	display:block;
	height:40px; 
	width:100%; 
	padding:0 10px; 
	border-radius:3px; 
	font-size:16px; 
	color:#FFF
}
.form a i.fa{
 	line-height:35px;
}