* {
  
  /*with these codes padding and border does not increase it's width.Gives intuitive style.*/  
  -webkit-box-sizing: border-box;   
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
   margin:0;
   padding:0;
  font-family: 'Droid Sans', sans-serif;
background:#f1f2f7 url(../images/background.png);margin:0px;padding:0px;animation: animatedBackground 10s linear infinite;
	-moz-animation: animatedBackground 10s linear infinite;
	-webkit-animation: animatedBackground 10s linear infinite;
	-ms-animation: animatedBackground 10s linear infinite;
	-o-animation: animatedBackground 10s linear infinite;
  }

* {
  
  /*with these codes padding and border does not increase it's width.Gives intuitive style.*/
  
  -webkit-box-sizing: border-box;   
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.header-login {padding:0% 1%;width:100%;background:#fff url(../images/he_bg.png) right no-repeat; height :140px;}
.form-padding {padding:0 0 0 0;margin:0 0 10px 0}
form {
 	/*background:#c29bb6; 
  width:300px;
  margin:40px auto;
  border-radius:0.4em;
  border:1px solid #b987aa;
  overflow:hidden;
  position:relative;
  box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);*/
}

form:after {
  content:"";
  display:block;
  position:absolute;
  height:1px;
  width:100px;
  left:20%;
  background:linear-gradient(left, #111, #444, #b6b6b8, #444, #111);
  top:0;
}

form:before {
 	content:"";
  display:block;
  position:absolute;
  width:8px;
  height:5px;
  border-radius:50%;
  left:34%;
  top:-7px;
  box-shadow: 0 0 6px 4px #fff;
}

.inset {
 	
  background:#fff; 
  width:350px;
  margin:80px auto;
  border-radius:0.4em;
  overflow:hidden;
  position:relative;
  box-shadow: 0 3px 3px 3px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.inset_form {
    padding: 15px 25px 15px 25px;
}
.login-title {
    padding: 15px 25px 15px 25px;
    color: #fff;
    background-color:#e91d28;
}

.form-control_1 input{
   background:url(../images/user-silhouette.png) -11px -50px no-repeat;
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	
	line-height: 1.6;
	color: #898989;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #989595;
	border-radius: 3px;
    margin-top:10px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-indent:28px;
}
.form-control_2 input{
   background:url(../images/user-silhouette.png) -11px -100px no-repeat;
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	
	line-height: 1.6;
	color: #898989;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #989595;
	border-radius: 3px;
    margin-top:10px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-indent:30px;
}
.form-group { margin-bottom:1.4rem;}


form h1 {
  font-size:24px;
  text-shadow:0 1px 0 black;
  text-align:center;
  padding:0px 0;
  border-bottom:1px solid #efefef;
  position:relative;
  margin:0px;
  margin-bottom:20px;
}

form h1:after {
 	content:"";
  display:block;
  width:250px;
  height:100px;
  position:absolute;
  top:0;
  left:50px;
  pointer-events:none;
  transform:rotate(70deg);
  -webkit-transform: rotate(70deg);
  background:linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
   background-image: -webkit-linear-gradient(50deg, rgba(255,255,255,0.05), rgba(0,0,0,0)); /* For Safari */

}
.copyright {font-size:11px;text-align:center}
label {	color:#333; display:block; padding-bottom:9px;}

input[type=text],input[type=password] {width:100%; padding:8px 5px; border:1px solid #ccc; box-shadow: 0 1px 0 rgba(255,255,255,0.1); border-radius:0.3em; margin-bottom:10px;}

label[for=remember]{color:white; display:inline-block; padding-bottom:0; padding-top:5px;}

input[type=checkbox] {display:inline-block; vertical-align:top;}

.p-container {padding:0 20px 0px 20px;}

.p-container:after {clear:both; display:table; content:"";}
.p-container span {display:block; float:left; color:#0d93ff; padding-top:8px;}

input[type=submit] {padding:5px 20px;border:1px solid rgba(0,0,0,0.4);text-shadow:0 -1px 0 rgba(0,0,0,0.4);box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 10px 10px rgba(255,255,255,0.1); border-radius:0.3em; background:#0a5954; color:white; float:right; font-weight:bold; cursor:pointer; font-size:13px;}
input[type=submit]:hover {box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -10px 10px rgba(255,255,255,0.1);}

input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {/*background:#efefef;*/}
 

/* Makes responsive fields.Sets size and field alignment.*/
input[type=text]{margin-bottom: 10px;margin-top: 10px; width:100%; padding: 8px 10px 8px 10px; border-radius:5px; border:1px solid #ccc;}
input[type=submit]{margin-bottom: 10px; width:100%;padding: 0 10px 0 10px; border-radius:5px;border:1px solid #ccc;background-color:#0a5954;}
textarea{width:100%;padding: 15px;margin-top: 10px;border:1px solid #7ac9b7;border-radius:5px; margin-bottom: 20px;resize:none;}
 
input[type=text]:focus,textarea:focus { border-color: #4697e4;}
.logodisplay {background:#fff;text-align:center;margin:5px 5px 5px 5px;border-radius:0.4em;}
@media screen and (max-width: 979px) {
.header-login {padding:1% 1%;width:100%;background:#fff}
}

@keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -300px 0; }
}
@-moz-keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -300px 0; }
}
@-webkit-keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -300px 0; }
}
@-ms-keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -300px 0; }
}
@-o-keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -300px 0; }
}

@keyframes animatedBird {
	0% { background-position: 0 25%; }
	100% { background-position: 100% 0; }
}
@-moz-keyframes animatedBird {
	0% { background-position: 0 25%; }
	100% { background-position: 100% 0; }
}
@-webkit-keyframes animatedBird {
	0% { background-position: 0 25%; }
	100% { background-position: 100% 0; }
}
@-ms-keyframes animatedBird {
	0% { background-position: 0 25%; }
	100% { background-position: 100% 0; }
}
@-o-keyframes animatedBird {
	0% { background-position: 0 25%; }
	100% { background-position: 100% 0; }
}
.bird {
	width: 100%; 
	height: 100%;	
	position: absolute;
	background-image: url(bird.gif);
	background-repeat: no-repeat;

	animation: animatedBird 10s linear infinite;
	-moz-animation: animatedBird 10s linear infinite;
	-webkit-animation: animatedBird 10s linear infinite;
	-ms-animation: animatedBird 10s linear infinite;
	-o-animation: animatedBird 10s linear infinite;
}