* {
  
  /*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;
  outline:none !important;
}
body {
   margin:0;
   padding:0;
  font-family: 'Droid Sans', sans-serif; background:#f1f1f1 url(../images/login-background.jpg) top center repeat; 
  background-size:100% auto;   
/*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;
}

 .row{width:100%; float:left; position:relative;}
        .row .box1{width:15%; float:left; position:relative;}
        .row .box1 img{width:100%;}
        .row .box2{width:45%; float:left; position:relative;}
        .row .box2 img{width:80%; margin-left:40%;}


.header-login {padding:0% 1%;width:100%;background:#fff url(../images/he_bg.png) right no-repeat; height:auto; float:left; position:relative;}
.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;
}

.BtnFacebook {
    /*background: #465892 none repeat scroll 0 0;*/
    border: medium none;
    color: #465892;
    display: inline-block;
    font-weight: 500;
    font-size: 15px;
    margin-top: 10px;
    padding: 7px 15px;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
    cursor: pointer;
    border: solid 1px #465892;
    border-radius:5px;
    text-decoration: none;
}

    .BtnFacebook:hover {
        background: #353b6f;
        color: #fff;
    }

.BtnGoogle {
    /*background: #f14336 none repeat scroll 0 0;*/
    border: medium none;
    color: #f14336;
    display: inline-block;
    font-weight: 500;
    font-size: 15px;
    margin-top: 10px;
    padding: 7px 15px;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
    cursor: pointer;
    border: solid 1px #f14336;
    border-radius:5px;
   text-decoration: none;
}

    .BtnGoogle:hover {
        background: #d9372b;
        color: #fff;
    }

.top-sec{width:100%; float:left; position:relative; background:#fff; padding:10px 10px 10px 10px; margin-bottom:30px;}
.top-sec .t-sec1{width:50%; float:left; position:relative;}
.top-sec .t-sec1 img{float:left; height:auto; width:200px; margin-top:0px;}
.top-sec .t-sec2{width: 50%;
    float: right;
    position: relative;
    text-align: right;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    padding-top: 25px;
    padding-right: 10px;
    color: #018be3;}
.top-sec .t-sec2 img{float:right; height:60px; width: auto; margin-top:5px;}
.inset {
  background:#fff; 
  max-width:400px;
  margin:30px auto auto auto;
  border-radius:5px;
  overflow:hidden;
  position:relative;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
  width:100%;
  /*-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) ;
  -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) ;
  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 .in1{width:100%; float:left; position:relative; padding:20px;   margin:0px 0px;}
.inset .in2{width:100%; float:left; position:relative; }
.inset .in2 .full-sec{width:100%; float:left; position:relative;}
.inset .in2 .full-sec .full-sec-in{width:50%; float:left;position:relative;}
.inset .in2 .full-sec .full-sec-in1{width:50%; float:left;position:relative;}

.login-title {
 	padding:10px 20px 10px 20px; 
  background:#246b99; color:#fff;
}
form h1 {
  font-size:24px;
  text-align:center;
  padding:0px 0;
  /*border-bottom:1px solid #018be3;*/
  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:11px;text-align:center}
label {	color:#333; display:block; padding-bottom:9px; font-size:14px; font-family:Verdana;}

input[type=text],input[type=password] {width:100%; padding:10px 15px; border:1px solid #ccc; box-shadow: 0 1px 0 rgba(255,255,255,0.1); border-radius:4px; 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] {border:1px solid #018be3;height:auto; margin-top:5px; margin-bottom:15px; border-radius:4px; background:#018be3; color:white; float:right; font-weight:bold; cursor:pointer; font-size:13px; transition:all 0.3s ease-in-out;}
input[type=submit]:hover {background:#313131; border:1px solid #313131;}
.f-btn{color:#313131; text-decoration:none; text-align:right; display:block;  font-size:14px; transition:all 0.3s ease-in-out;}
.f-btn:hover{color:#018be3;}
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-bottom:10px; width:100%; padding:10px 15px 10px 15px; border-radius:4px; border:1px solid #ccc;}

input[type=submit]{margin-bottom: 10px; width:100%;padding: 10px 10px 10px 10px; }
textarea{width:100%;padding: 15px;margin-top: 10px;border:1px solid #7ac9b7;border-radius:5px; margin-bottom: 20px;resize:none;}
 
input[type=text]:focus,input[type=password]:focus{ border-color: #018be3 !important;}
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:#313131;
    }
}

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


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #313131;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #313131;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #313131;
}
:-moz-placeholder { /* Firefox 18- */
  color: #313131;
}
@media screen and (max-width:1200px) {
  
}

@media screen and (max-width:1000px) {
    
}
@media screen and (max-width:410px) {
    .inset {
      border-radius:4px;
      margin-top:12px;
      margin-left:4%;
      margin-right:4%;
      margin-bottom:4%;
      width:92%;
      position:relative; float:left;
    }
    .top-sec{width:100%; float:left; position:relative; background:#fff; padding:10px 10px 10px 10px; margin-bottom:0px;}
.top-sec .t-sec1{width:100%; float:left; position:relative;}
.top-sec .t-sec1 img{float:none; height:auto; width:200px; display:block;margin:0 auto;}
.top-sec .t-sec2{width:50%; float:left; position:relative; display:none;}
.top-sec .t-sec2 img{float:right; height:60px; width: auto; margin-top:5px; display:none;}
}


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