@import url("https://fonts.googleapis.com/css?family=Roboto");

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

body {background:#eaecee; height:100%; color:#000; margin:0; padding:0; font-family: 'Open Sans', sans-serif; font-weight:300; font-size: 14px;}

.owl {
  margin:5% auto 0 auto;
  width: 211px;
  height: 164px;
  background-image: url("../images/owl-login.png");
  position: relative;
}

.owl .hand {
  width: 34px;
  height: 34px;
  border-radius: 40px;
  background-color: #c0a496;
  transform: scaleY(0.6);
  position: absolute;
  left: 14px;
  bottom: -8px;
  transition: 0.3s ease-out;
}

.owl .hand.password {
  background:#fff; transform: translateX(42px) translateY(30px) scale(0); opacity:0; z-index:0 !important;
}

.owl .hand.hand-r {
  left: 170px;
}

.owl .hand.hand-r.password {
  background:#fff; transform: translateX(-42px) translateY(30px) scale(0); opacity:0; z-index:0 !important;
}

.owl .arms {
  position: absolute;
  top: 75px;
  height: 80px;
  width: 100%;
  overflow: hidden;
}

.owl .arms .arm {
  width: 67px;
  height: 80px;
  background-image: url("../images/owl-login-arm.png");
  position: absolute;
  left: 0px;
  top: 81px;
  transition: 0.3s ease-out;
}

.owl .arms .arm.password {
  transform: translateX(45px) translateY(-75px);
}

.owl .arms .arm.arm-r {
  left: 145px;
  transform: scaleX(-1);
}

.owl .arms .arm.arm-r.password {
  transform: translateX(-45px) translateY(-75px) scaleX(-1);
}

.form {
  margin: auto;
  margin-top: -9px;
  padding:30px 30px 10px 30px;
  background-color: #fff;
  width: 28%;
}

.form h1 {margin:0 0 8px 0; font-weight:400; line-height:36px; font-size:2.25em; text-align:center; color:#8e8e8e;}
.form h2 {margin:0 0 15px 0; font-weight:400; line-height:24px; font-size:1.5em; text-align:center; color:#8e8e8e;}

.form p {margin:30px 0 30px 0; font-weight:400; line-height:18px; font-size:1.125em; text-align:center; color:#7d7d7d;}

.form a {text-decoration:none; font-weight:600; color:#7d7d7d;}
.form a:hover {color:#515151;}

.logo-login {width:207px; height:auto; overflow:hidden; margin:15px auto;}
.logo-login img {width:100%; height:auto;}

.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 {
  padding: 9px 3% 9px 8%;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
  width:89%;
}

.entrar {-webkit-appearance:none; -moz-appearance:none; background:#008ac8; width:115px !important; height:43px; overflow:hidden; padding:0 !important; 
margin:10px auto 0 auto; display:list-item; list-style:none; border:0 !important; border-radius:0; font-size:0.9375em; text-align:center; cursor:pointer; font-weight:600; color:#fff;}
.entrar:hover {background:#0075aa;}

@media only screen and (max-width: 736px) {

.form {
  width: 80%;
}

}