body { padding:0; margin:0; background:#fff url(bg.jpg); font-family: 'Roboto', sans-serif; font-size:14px; }

.fl { float:left}
.fr { float:right}


/* Login Form */
#LoginWrapper { width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;  }
.FormWrapper { width: 450px;
   /* height: 500px;*/
	border-radius:10px;
	border:1px solid #F1F1F1;
	overflow:hidden !important;
    background-color: #fff;
    position:absolute;
    top:50%;
    left:45%;
    margin-left:-250px;
    margin-top:-250px;
	/* background:url(deneme.jpg) center center;*/
	box-shadow:7px 7px 20px rgba(0,0,0,0.25)}


.FormWrapper2 { width: 450px;
  /*  height: 500px; */
	border-radius:10px;
	border:1px solid #F1F1F1;
	overflow:hidden !important;
    background-color:darkblue;
    position:absolute;
    top:50%;
    left:70%;
    margin-left:-250px;
    margin-top:-250px;
	/* background:url(deneme.jpg) center center;*/
	box-shadow:7px 7px 20px rgba(0,0,0,0.25)}	
	
/* LOGIN FORM START */
	
.LoginForm { width: calc(100% - 60px); height: calc(100% - 40px);  float:left; padding:30px; color:#1d4ca1; }
.LoginForm .Logo {}
.LoginForm h2 { margin:35px 0 0 0; }
.LoginForm span { font-weight:300; font-size:15px; }

.LoginForm input[type="text"],input[type="email"] { margin-top:20px;  }
.LoginForm input[type="text"],input[type="password"],input[type="email"] { background:#f6f6f6; margin-bottom:10px; width:340px; height:40px; line-height:40px; padding:0 15px; border-radius:3px; border:1px solid #DFDFDF; outline:none; color:#1d4ca1;  }
input::-webkit-input-placeholder { color: #ccc; font-weight:500; }
input:focus::-webkit-input-placeholder { color:#1d4ca1; font-weight:900; }

.LoginForm input[type="submit"]#Login { background:#1d4ca1;  width:100px; height:30px; line-height:30px; padding:0 15px; border-radius:3px; border:1px solid #1d4ca1; outline:none; color:#FFF; font-weight:700; }

.LoginForm .Forget { line-height:30px; width:200px; }
.LoginForm .Forget p { line-height:30px; margin:0 0 0 25px; }
.LoginForm .Forget p a { color:#1d4ca1; text-decoration:none; }

.LoginForm ul { width:100%; margin-top:25px; display:inline-block; padding:0 }
.LoginForm ul li { list-style:none; float:left; width:100px; padding:10px; margin-right:10px; }
.LoginForm ul li a { color:#1d4ca1; text-decoration:none; }
.LoginForm ul li i { color:#1d4ca1; font-size:18px; margin:5px 5px 0 0; }
.LoginForm ul li span { display:block; padding-left:23px; font-size:12px;}
.LoginForm ul li:nth-child(2) span { display:block; padding-left:26px; font-size:12px;}

/* Announcement START */

.LoginAnnouns { width: calc(50% - 60px); height: calc(100% - 40px);  float:right; padding:30px; background:#1d4ca1; color:#D7E5FF; }
.LoginAnnouns h2 { font-size:18px; font-weight:700; color:#fff; width:100%; border-bottom:4px solid #fff; line-height:30px; padding-bottom:5px; text-transform:uppercase; }
.LoginAnnouns p { font-size:13px; font-weight:300; color:#fff; width:100%; line-height:18px; padding-bottom:5px; }

.LoginAnnouns ul { width:100%; margin-top:5px; display:inline-block; padding:0 }
.LoginAnnouns ul li { list-style:none; font-size:13px; font-weight:300; color:#fff; width:100%; padding:5px 0; list-style:decimal; list-style-position:inside;  }
.LoginAnnouns a { color:#1d4ca1; text-decoration:none; background:#fff; margin:10px 10px 0 0; display:inline-block; padding:5px 10px; border-radius:3px 3px 5px 5px; border-bottom:3px solid #0E3782; }
.LoginAnnouns a:hover { color:#ffffff; background-color:#58B15F; text-decoration:none; border-bottom:3px solid #49984F; }
.LoginAnnouns a:focus { color:#ffffff; background-color:#58B15F; text-decoration:none;  border-bottom:3px solid #49984F; }
.LoginAnnouns a { transition: background-color 0.5s ease-out; }
.LoginAnnouns #Close { position: relative;
    float: right;
    margin: -18px -18px;
    background: #fff;
    padding: 0px 6px 1px 6px;
    border-radius: 3px;
    color: #1d4ca1;
    font-size: 17px;
}

@media (max-width: 900px) { 

.FormWrapper { width: 600px;
    height: initial;
	border-radius:10px;
	border:1px solid #F1F1F1;
	overflow:hidden !important;
    background-color: #fff;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-300px;
    margin-top:-300px;
	margin-bottom:30px;
	/* background:url(deneme.jpg) center center;*/
	box-shadow:7px 7px 20px rgba(0,0,0,0.25)}
	
	.LoginForm { width: calc(100% - 60px); height: calc(460px - 40px);  float:left; padding:30px; color:#1d4ca1; }
	
	.LoginForm input { float:left; }
	.LoginForm .Submit { display:block; clear:left }
	.LoginForm input[type="text"] { margin-top:30px;  }
	.LoginForm input[type="text"],input[type="password"] { background:#f6f6f6; margin-bottom:10px; width:calc(100% - 30px); height:40px; line-height:40px; padding:0 15px; border-radius:3px; border:1px solid #DFDFDF; outline:none; color:#1d4ca1;  }
	
	.LoginAnnouns { width: calc(100% - 60px); height: calc(460px - 40px);  float:right; padding:30px; background:#1d4ca1; color:#D7E5FF; }

 }
 
 @media (max-width: 630px) { 

.FormWrapper { width:450px;
    height: initial;
	border-radius:10px;
	border:1px solid #F1F1F1;
	overflow:hidden !important;
    background-color: #fff;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-225px;
    margin-top:-225px;
	margin-bottom:30px;
	/* background:url(deneme.jpg) center center;*/
	box-shadow:7px 7px 20px rgba(0,0,0,0.25)}
	
	.LoginForm { width: calc(100% - 60px); height: calc(460px - 40px);  float:left; padding:30px; color:#1d4ca1; }
	.LoginAnnouns { width: calc(100% - 60px); height: calc(460px - 40px);  float:right; padding:30px; background:#1d4ca1; color:#D7E5FF; }
 }
 
 @media (max-width: 475px) { 
 
.LoginForm .Logo { width:100% }
.LoginForm .Logo img { width:100%; height:inherit; }

.LoginWrapper { height:inherit; }

.FormWrapper { width:100%;
    height:auto;
	border-radius:0;
	border:none;
	overflow:hidden !important;
    background-color: #fff;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-50%;
	margin-bottom:30px;
	box-shadow:none}
	
	.LoginForm { width: calc(100% - 60px); height: initial;  float:left; padding:30px; color:#1d4ca1; }
	.LoginAnnouns { width: calc(100% - 60px); height: calc(100% - 40px);  float:right; padding:30px; background:#1d4ca1; color:#D7E5FF; }
	
	.LoginForm ul {
    margin-top: 10px;
}
.LoginForm .Forget {
	margin-top:15px;
}
	
 }
 
 @media (max-width: 376px) { 
 	.LoginForm .Forget p { margin:0 }
 }