@charset "utf-8";
/* CSS Document */
body { 	font-family: 'Ropa Sans', sans-serif; 
		font-size:14px; 
		color:#333333;}
li,ul,body,input{margin:0; padding:0; list-style:none}
.login-page {
	width: 1200px;
	min-height: 500px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}
.login-logo {
	height: 193px;
	width: 249px;
	background-image: url(../image/finans-maligunluk-logo.png);
	background-repeat: no-repeat;
	margin-top: 50px;
	margin-left: 475px;
	margin-right: 477px;
}
.login-form {
	width: 400px;
	margin-top: 50px;
	margin-right: 400px;
	margin-left: 400px;
	background-color: #e8e8e8;
	border-radius: 5px;
	overflow:hidden;
}
.all-rights {
	width: 400px;
	height: 10px;
	margin: 10px 400px;
	font-size: 10px;
	line-height: 10px;
	text-align: center;
}
.login-bottom {
	width: 400px;
	height: 10px;
	margin: 0px 400px 10px 400px;
	font-size: 10px;
	line-height: 10px;
	text-align: center;
}
.login-clear {
	clear: both;
}
.login-security-img {
	width: 65px;
	height: 40px;
	vertical-align:top;
	float: left;
	border-top:solid 1px #CCCCCC; 
	border-bottom: solid 1px #CCCCCC; 
}
.login-error {
	color: #FF0000;
	text-align: center;
	height: 20px;
	line-height: 20px;
}
.form-header{display:table; clear:both}
.form-header label{
	display:block; 
	cursor:pointer; 
	z-index:999}
.form-header li{
	margin:0; 
	line-height:60px; 
	width:200px; 
	text-align:center; 
	background:#F7F7F7; 
	font-size:18px; 
	float:left; 
	transition:all 600ms ease}

/*sectiop*/
.section-out{width:800px; float:left; transition:all 600ms ease}
.section-out:after{content:''; clear:both; display:table}
.section-out section{width:400px; float:left}

.login{padding:20px}
.ul-list{clear:both; display:table; width:100%}
.ul-list:after{content:''; clear:both; display:table}
.ul-list li{ margin:0 auto; margin-bottom:12px}
.input{
	background:#ffffff; 
	transition:all 800ms; 
	width:297px; 
	border-radius:3px 0 0 3px; 
	font-family: 'Ropa Sans', sans-serif; 
	border:solid 1px #ccc; 
	border-right:none; 
	outline:none; 
	color:#999; 
	height:40px; 
	line-height:40px; 
	display:inline-block; 
	padding-left:10px; 
	font-size:16px;
}
.input,.login span.icon{vertical-align:top}
.login span.icon{
	width:50px; 
	transition:all 800ms; 
	text-align:center; 
	color:#999; 
	height:40px; 
	border-radius:0 3px 3px 0; 
	background:#e8e8e8; 
	line-height:40px; 
	display:inline-block; 
	border:solid 1px #ccc; 
	border-left:none; 
	font-size:16px
}
.input:focus:invalid{ border-color:red; }
.input:focus:invalid+.icon{ border-color:red; }
.input:focus:invalid+.login-security-img{ border-color:red; }
.input:focus:invalid+.login-security-img+.icon{ border-color:red; }
.input:focus:valid{ border-color:green; }
.input:focus:valid+.icon{ border-color:green; }
.input:focus:valid+.login-security-img{ border-color:green; }
.input:focus:valid+.login-security-img+.icon{ border-color:green; }
.input:focus { background-color: #FFFFCC; }
#check,#check1{top:1px; position:relative}
.login-button{
	border:none; 
	outline:none; 
	background-color: #232F3E; 
	border-bottom: 4px solid #35475E; 
	font-family: 'Ropa Sans', sans-serif; 
	margin:0 auto; 
	display:block; 
	height:40px; 
	width:100%; 
	padding:0 10px; 
	border-radius:3px; 
	font-size:16px; 
	color:#FFF}
.login-button:hover {
	background-color: #35475E;
	color: #FFFFFF;
	cursor: pointer;
}
.form a i.fa{line-height:35px}

.hide{display:none}

/*swich form*/
#remember:checked~.section-out{margin-left:-400px}
#login:checked~.section-out{margin-left:0px}
#login:checked~div .form-header li:nth-child(1),#remember:checked~div .form-header li:nth-child(2){background:#E8E8E8}