.owl {
  margin: auto;
  width: 211px;
  height: 190px;
  background-image: url("../img/imglogin/owl-login.png");
  position: relative;
}
.owl .hand {
	width: 39px;
    height: 36px;
    border-radius: 40px;
    /* background-color: #472d20; */
    /* transform: scaleY(0.6); */
    position: absolute;
    left: 25px;
    bottom: -14px;
    transition-delay:0.3s;
    /* transition: 2s ease-out; */
    background-size: 100%;
    background-image: url(../img/imglogin/left_1.png);
}

.owl .hand.password {
  transform: translateX(42px) translateY(-15px) scale(0.7);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 1s linear;
}

.owl .hand.hand-r.password {
  transform: translateX(-42px) translateY(-15px) scale(0.7);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

.owl .hand.hand-r {
    left: 145px;
    background-size: 100%;
    background-image: url(../img/imglogin/left_1.png);
}
.owl .arms {
  position: absolute;
  top: 108px;
  height: 70px;
  width: 100%;
  overflow: hidden;
  opacity:0;
}
.owl .arms .arm {
	width: 40px;
    height: 91px;
    background-image: url(../img/imglogin/owl-login-arm.png);
    background-size: 44px;
    position: absolute;
    left: 12px;
    top: 40px;
    transition: 0.3s ease-out;
}
.owl .arms .arm.password {
  transform: translateX(40px) translateY(-40px);
}
.owl .arms .arm.arm-r {
  left: 135px;
  transform: scaleX(-1);
}
.owl .arms .arm.arm-r.password {
  transform: translateX(-20px) translateY(-40px) scaleX(-1);
}
.form {
  /*margin: auto;*/
  margin-top: -9px;
  padding: 30px;
  background-color: #fff;
  width: 330px;
  height: 150px;
  border-radius: 2px;
  box-shadow: 0px 0px 5px 4px #53c7c0;
}
.form .control {
  margin-bottom: 10px;
  position: relative;
}
.form .control label {
  position: absolute;
  font-size: 16px;
  top: 11px;
  left: 9px;
  color: rgba(0,0,0,0.3);
}
.form .control input,button {
  padding: 9px 6px 9px 30px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
  width: 100%;
}

.errmsg {
	color:red;
	font-style: italic;
}
        </style>

        <style>
            @import url(../bower_components/login/style.css);
			body {
				-webkit-perspective: 400px;
				perspective: 400px;
				height: 150vh;
				margin: 0;
				overflow: hidden;
				font-family: 'Gudea', sans-serif;
				background: url(img/Corpid_PJB.png) bottom center no-repeat;
				position: relative;
			}
			
			body ::-webkit-input-placeholder {
				color: #4E546D;
			}
			
			body .authent {
				display: none;
				background: #35394a;
				/*   Old browsers 
			FF3.6+ 
			Chrome,Safari4+ 
			Chrome10+,Safari5.1+ 
			Opera 11.10+ 
			IE10+ */
				background: linear-gradient(45deg, #35394a 0%, #1f222e 100%);
				/*W3C*/
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35394a', endColorstr='#1f222e', GradientType=1);
				/*IE6-9 fallback on horizontal gradient*/
				position: absolute;
				left: 0;
				right: 90px;
				margin: auto;
				width: 100px;
				color: white;
				text-transform: uppercase;
				letter-spacing: 1px;
				text-align: center;
				padding: 20px 70px;
				top: 200px;
				bottom: 0;
				height: 70px;
				opacity: 0;
			}
			
			body .authent p {
				text-align: center;
				color: white;
			}
			
			body .success {
				display: none;
				color: #d5d8e2;
			}
			
			body .success p {
				font-size: 14px;
			}
			
			body p {
				color: #5B5E6F;
				font-size: 10px;
				text-align: left;
			}
			
			body .testtwo {
				left: -320px !important;
			}
			
			body .test {
				box-shadow: 0px 20px 30px 3px rgba(0, 0, 0, 0.55);
				pointer-events: none;
				top: -100px !important;
				-webkit-transform: rotateX(70deg) scale(0.8) !important;
				transform: rotateX(70deg) scale(0.8) !important;
				opacity: .6 !important;
				-webkit-filter: blur(1px);
				filter: blur(1px);
			}
			
			body .login {
				opacity: 1;
				top: 20px;
				-webkit-transition-timing-function: cubic-bezier(0.68, -0.25, 0.265, 0.85);
				transition-property: opacity, box-shadow, top, left, -webkit-transform;
				transition-property: transform, opacity, box-shadow, top, left;
				transition-property: transform, opacity, box-shadow, top, left, -webkit-transform;
				transition-duration: .5s;
				-webkit-transform-origin: 161px 100%;
				transform-origin: 161px 100%;
				-webkit-transform: rotateX(0deg);
				transform: rotateX(0deg);
				position: relative;
				width: 240px;
				border-top: 2px solid #D8312A;
				height: 300px;
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				top: 0;
				bottom: 0;
				padding: 40px 40px 0px 40px;
				background: #35394a;
				/*background: #35394a;
				/* Old browsers */
				/* FF3.6+ */
				/* Chrome,Safari4+ */
				/* Chrome10+,Safari5.1+ */
				/* Opera 11.10+ */
				/* IE10+ */
				background: transparent ;
				/*background: linear-gradient(45deg, #073946 0%, #071d23 100%);*/
				/* W3C */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35394a', endColorstr='#1f222e', GradientType=1);
				/* IE6-9 fallback on horizontal gradient */
			}
			
			body .login .validation {
				position: absolute;
				z-index: 1;
				right: 10px;
				top: 15px;
				opacity: 0;
			}
			
			body .login .disclaimer {
				padding: 10px 0px;
			}
			
			body .login_title {
				color: #afb1be;
				height: 20px;
				font-size: 16px;
				border-bottom: 3px solid;
			}
			
			body .login_fields {
				padding-top: 25px;
				/*height: 208px;*/
				/*position: absolute;*/
				/*left: 0;*/
			}
			
			body .login_fields .icon {
				position: absolute;
				z-index: 1;
				left: 36px;
				top: 8px;
				opacity: .5;
			}
			
			body .login_fields input[type='password'] {
				color: #DC6180 !important;
			}
			
			body .login_fields input[type='text'],
			body .login_fields input[type='password'] {
				color: #afb1be;
				width: 100%;
				margin-top: -2px;
				background: #171818;
				left: 0;
				padding: 10px 65px;
				border-top: 2px solid #393d52;
				border-bottom: 2px solid #393d52;
				border-right: none;
				border-left: none;
				border: none;
				outline: none;
				font-family: 'Gudea', sans-serif;
				box-shadow: none;
			}
			
			body .login_fields__user,
			body .login_fields__password {
				position: relative;
			}
			
			body .login_fields__submit {
				margin-top: 20px;
				left: 0;
				right: 0;
			}
			
			body .login_fields__submit .forgot {
				float: right;
				font-size: 12px;
				margin-top: 11px;
				text-decoration: underline;
			}
			
			body .login_fields__submit .forgot a {
				color: #b3b3b5;
			}
			
			body .login_fields__submit input {
				border-radius: 50px;
				background: transparent;
				padding: 10px 50px;
				border: 2px solid #2BB6C9;
				color: #2BB6C9;
				text-transform: uppercase;
				font-size: 11px;
				transition-property: background, color;
				transition-duration: .2s;
			}
			
			body .login_fields__submit input:focus {
				box-shadow: none;
				outline: none;
			}
			
			body .login_fields__submit input:hover {
				color: white;
				background: #2BB6C9;
				cursor: pointer;
				transition-property: background, color;
				transition-duration: .2s;
			}
			
			.bg {
				animation: slide 20s ease-in-out infinite alternate;
				background-image: linear-gradient(-60deg, #045B71 50%, #1B8E99 50%);
				bottom: 0;
				left: -50%;
				opacity: .5;
				position: fixed;
				right: -50%;
				top: 0;
				z-index: -1;
			}
			
			.bg2 {
				animation-direction: alternate-reverse;
				animation-duration: 30s;
			}
			
			.bg3 {
				animation-duration: 28s;
			}
			
			@keyframes slide {
				0% {
					transform: translateX(-25%);
				}
				100% {
					transform: translateX(25%);
				}
			}
			
			#loader {
				position: absolute;
				top: 55px;
				right: 50px;
				transform: translate(-50%, -50%);
				display: block;
			}
			
			.outerc {
				width: 40px;
				height: 40px;
				top: 60%;
				left: 15%;
				position: absolute;
				transform: translate(-50%, -50%);
				border: 4px solid #afb1be;
				border-radius: 50%;
			}
			
			.innerc {
				width: 10px;
				height: 10px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: #afb1be;
				border-radius: 50%;
			}
			
			.semi {
				background-image: linear-gradient(90deg, #072127 50%, transparent 50%), 
				linear-gradient(145deg, #afb1be 50%, #072127 50%);
				border-radius: 50%;
			}
			
			.semi1 {
				width: 100px;
				height: 100px;
				top: 60%;
				left: 15%;
				position: absolute;
				transform: translate(-50%, -50%);
			}
			
			.semi1:before {
				content: "";
				display: block;
				width: 92px;
				height: 92px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: #252936;
				border-radius: 50%;
			}
			
			.semi2 {
				width: 80px;
				height: 80px;
				top: 60%;
				left: 15%;
				position: absolute;
				transform: translate(-50%, -50%);
			}
			
			.semi2:before {
				content: "";
				display: block;
				width: 72px;
				height: 72px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: #252936;
				border-radius: 50%;
			}
			
			.semi3 {
				width: 60px;
				height: 60px;
				top: 60%;
				left: 15%;
				position: absolute;
				transform: translate(-50%, -50%);
			}
			
			.semi3:before {
				content: "";
				display: block;
				width: 52px;
				height: 52px;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: #252936;
				border-radius: 50%;
			}
			
			.semi {
				opacity: 0;
				animation: fade 2s infinite;
				animation-name: fade;
			}
			
			.animated3 {
				animation-delay: 0;
			}
			
			.animated2 {
				animation-delay: 400ms;
			}
			
			.animated1 {
				animation-delay: 800ms;
			}
			
			@keyframes fade {
				0% {
					opacity: 1;
				}
				100% {
					opactiy: 0;
				}
			}
			
			.fuller-button {
				color: white;
				background: none;
				border-radius: 0;
				padding: 1.2em 5em;
				letter-spacing: 0.35em;
				font-size: 0.7em;
				transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
				margin-top: 1em;
			}
			
			.fuller-button.blue {
				box-shadow: inset 0 0 1em rgba(0, 170, 170, 0.5), 0 0 1em rgba(0, 170, 170, 0.5);
				border: #0dd solid 2px;
			}
			
			.fuller-button.blue:hover {
				background-color: #0dd;
				box-shadow: inset 0 0 0 rgba(0, 170, 170, 0.5), 0 0 1.5em rgba(0, 170, 170, 0.7);
			}
			
			.fuller-button.red {
				box-shadow: inset 0 0 1em rgba(251, 81, 81, 0.4), 0 0 1em rgba(251, 81, 81, 0.4);
				border: #fb5454 solid 2px;
			}
			
			.fuller-button.red:hover {
				background-color: #fb5454;
				box-shadow: inset 0 0 0 rgba(251, 81, 81, 0.4), 0 0 1.5em rgba(251, 81, 81, 0.6);
			}
			
			.l-gradient-skin {
				margin-left: -40px;
				margin-top: -40px;
				bottom: 0;
				background: linear-gradient(110deg, rgba(255,203,0,1) 0%, rgba(231,0,0,1) 50%, rgba(0,30,235,1) 100%); height: 3px; width: 100%; z-index: 999; position: fixed;
			}
			.st6{fill:#92dbea;}
			.st7{fill:#f1f1f1;}