* {
  
  /*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;
  padding:0px; margin:0px;
}
body {
   margin:0;
   padding:0;
  font-family: 'Droid Sans', sans-serif;
  background: url(../images/bak.jpg) top center  rgba(0,0,0,0.8)  ; background-size: 100% 150%; 

/*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;*/
  }

* {
  outline:none;
  /*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/h-bg.png) right no-repeat; box-shadow: 1px 2px 3px rgba(0,0,0,0.5);}
.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 {
 	/*padding:20px 20px 20px 20px;*/ 
  background:#fff; 
  width:100%;

  max-width:350px;
  margin:4% auto;
  border-radius:4px;
  /*overflow:hidden;*/
  position:relative;
  box-shadow: 0px 0px 10px rgba(43,43,43,0.5);
  /*-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;*/
}
.login-title {
 	padding:15px 25px 15px 25px; 
  background:#41cac0; 
  color:#fff;
position:relative; z-index:999;
border-radius:0px;
margin-bottom:5px;
border-top-left-radius:4px;
border-top-right-radius:4px;
}

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;
}

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:12.5px; text-align:center;}
label {	color:#333; display:block; padding-bottom:9px;}

input[type=text],input[type=password] {width:100%; padding:8px 8px 8px 40px ; color:#007d9e !important; border:0px; display:block; background:none; font-size:15px; box-shadow: 0 1px 0 rgba(255,255,255,0.1); border-radius:0px; font-weight:100;}



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 #007d9e;text-shadow:0 -1px 0 rgba(0,0,0,0.4);height:auto; margin-top:20px; margin-bottom:15px; /*box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 10px 10px rgba(255,255,255,0.1);*/ border-radius:4px; background:#007d9e; color:white; float:right; font-weight:bold; cursor:pointer; font-size:13px;}
input[type=submit]:hover {box-shadow:0px 6px 15px rgba(142,25,28,0.5);}

input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {background:none;}
 



/* Makes responsive fields.Sets size and field alignment.*/

input[type=submit]{margin-bottom: 10px; width:100%;padding: 10px 10px 10px 10px; /*border-radius:5px;*//*border:1px solid #ccc;*/background-color:#007d9e;}
textarea{width:100%;padding: 15px;margin-top: 10px;border:1px solid #007d9e;/*border-radius:5px;*/ margin-bottom: 20px;resize:none;}



.user {
    background:url(../images/user-silhouette.png) -11px -49px no-repeat; border:none;border:1px solid #007d9e; border-radius:4px; padding:1px 2px 2px 2px; margin-top:30px;
}
.pass {
    background:url(../images/user-silhouette.png) -11px -146px no-repeat; border:none;border:1px solid #007d9e; border-radius:4px; padding:1px 2px 2px 2px; margin-top:30px;
}




.logodisplay {background:#fff;text-align:center;margin:5px 5px 5px 5px;background: rgb(255, 255, 255)}



input:-webkit-autofill {
    background: transparent;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background: transparent;
}

@-webkit-keyframes  autofill {
    to {
        /*color: #666;
       background:url(../images/user-silhouette.png) -17px -3px no-repeat;  z-index:999;*/
       
   background: transparent;
   color:#007d9e;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #007d9e;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #007d9e;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #007d9e;
}
:-moz-placeholder { /* Firefox 18- */
  color: #007d9e;
}
.logo-sec{width:30%;}


@media screen and (max-width:768px) {
.header-login {background:#fff}
.logo-sec{width:100%; text-align:center; display:block;}
}

@media screen and (max-width:350px) {
    .inset {
        background: #fff;
        width: 94%;
        max-width: 350px;
        margin: 2%;
    }
}

@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;
}