body{
	
	background-attachment: fixed;
    z-index: 5;
    color: #fff;
    background: url('bg1.jpg') no-repeat center center fixed;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
 	font-family: 'Open Sans', sans-serif;

}
.login-form {
	border:solid 1px #fff;
	width:25%;
	margin:4% 3% 4% auto;
 	position: relative;
 	border-radius:10px;
}
.head {
	position: absolute;
	top:-15%;
	left: 35%;
}
.head img {
	border-radius:50%;
	-webkit-border-radius:50%;
	-o-border-radius:50%;
	-moz-border-radius:50%;
	border:6px solid rgba(221, 218, 215, 0.23);
}
ul {
	padding:18% 2.5em;
}
ul li{
	border:1px solid #fff;
	list-style:none;
	margin-bottom:15px;
	width:100%;
	background:none;
	border-radius: 0.3em;
	-webkit-border-radius: 0.3em;
	-o-	border-radius: 0.3em;
	-moz-border-radius: 0.3em;

}

input[type="text"], input[type="password"] {
	font-family: 'Open Sans', sans-serif;
	width:65%;
	padding:0.7em 2em 0.7em 1.7em;
	color:#fff;
	font-size:18px;
	outline: none;
	background: none;
	border:none;
	font-weight:600;
	}

.txtfocus{
	border:1px solid #40A9DF;
	 box-shadow: 0 0 1em #40A9DF;
	 -webkit-box-shadow: 0 0 1em #40A9DF;
	 -o-box-shadow: 0 0 1em #40A9DF;
	 -moz-box-shadow: 0 0 1em #40A9DF;
	}
	
ul li:hover{
	border:1px solid #40A9DF;
	 box-shadow: 0 0 1em #40A9DF;
	 -webkit-box-shadow: 0 0 1em #40A9DF;
	 -o-box-shadow: 0 0 1em #40A9DF;
	 -moz-box-shadow: 0 0 1em #40A9DF;
}
input[type="submit"]{
	float:right;
	font-size:18px;
	display: inline-block;
	font-weight:600;
	color: #000;
	transition: 0.1s all;
	-webkit-transition: 0.1s all;
	-moz-transition: 0.1s all;
	-o-transition: 0.1s all;
	cursor: pointer;
	outline: none;
	padding:15px 10px;
	margin-top:3px;
	font-family: 'Open Sans', sans-serif;
	width:40%;
	border:none;
	border-radius: 0.3em;
	-webkit-border-radius: 0.3em;
	-o-	border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	background: #fff; /* Old browsers */
	background: -moz-linear-gradient(top,  #fff 0%, #fff 3%, #74F9F8 35%, #74F9F8 97%, #74F9F8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(3%,#fff), color-stop(35%,#74F9F8), color-stop(97%,#74F9F8), color-stop(100%,#74F9F8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fff 0%,#fff 3%,#74F9F8 35%,#74F9F8 97%,#74F9F8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fff 0%,#fff 3%,#74F9F8 35%,#74F9F8 97%,#74F9F8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fff 0%,#fff 3%,#74F9F8 35%,#74F9F8 97%,#74F9F8 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fff 0%,#fff 3%,#74F9F8 35%,#74F9F8 97%,#74F9F8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#74F9F8',GradientType=0 ); /* IE6-9 */
}
input[type="submit"]:hover{
	background: #74F9F8; /* Old browsers */
	background: -moz-linear-gradient(top,  #74F9F8 0%, #74F9F8 3%, #74F9F8 65%, #fff 97%, #fff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#74F9F8), color-stop(3%,#74F9F8), color-stop(65%,#74F9F8), color-stop(97%,#fff), color-stop(100%,#fff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #74F9F8 0%,#74F9F8 3%,#74F9F8 65%,#fff 97%,#fff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #74F9F8 0%,#74F9F8 3%,#74F9F8 65%,#fff 97%,#fff 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #74F9F8 0%,#74F9F8 3%,#74F9F8 65%,#fff 97%,#fff 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #74F9F8 0%,#74F9F8 3%,#74F9F8 65%,#fff 97%,#fff 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#74F9F8', endColorstr='#fff',GradientType=0 ); /* IE6-9 */
	
}

/*-----start-responsive-design------*/
@media (max-width:1024px){
.login-form  {
		margin:8% auto 0;
		width:45%;
	}
	
}
@media (max-width:768px){
	.login-form  {
		margin:12% auto 0;
		width:57%;
	}
	
}
@media (max-width:640px){                                  
	.login-form  {
		margin:13% auto 0;
		width:70%;
	}
	
}
@media (max-width:480px){                                  
	.login-form  {
		margin:20% auto 0;
		width:90%;
	}
	
}
@media (max-width:320px){                                  
	.login-form  {
		margin:20% auto 0;
		width:95%;
	}
	ul{
		padding:19% 1.5em; 
	}
	ul li{
		margin-top:10px;
	}
	
	input[type="text"], input[type="password"]{
		font-size:15px;
		padding: 0.5em 1em 0.5em 1em;
	}
	input[type="submit"]{
		float:none;
		font-size: 15px;
		padding: 10px 10px;
		width: 40%;
		margin-left: 28%;
	}
	.head{
		top:-12%;
		left:35.5%;
	}
	.head img {
	width:69%;
	}
}