@font-face{font-family:'Nexa Slab Light Italic'; src:url(../font/Fontfabric-NexaSlabLightItalic.otf);}

body{
  background: url('../img/login-background.png') no-repeat;
  background-size: cover;
  min-height: 100vh;
  position: relative;
}

.login-form{
  background: #0093c9;
  width: 100%;
  height: 80vh;
  border-radius: 5px;
  margin-top: 10vh;
}

.box{
  padding: 20px;
}

.login-text{
  text-align: center;
  font-size: 17px;
  color: white;
  font-family:'Nexa Slab Light Italic';
  margin: 40px 0;
  line-height: 1.5;
}

.vector-login{
  margin: 0 auto;
  display: block;
  width: 200px;
}

.box-form{
  background: #123e7f;
  height: 80vh;
  padding: 20px;
  padding-top: 40px;
  border-radius: 5px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-family:'Nexa Slab light';
  font-size: 12px;
  color: white;
}

.box-form form{
  margin-top: 15px;
}

.hide-form{
  display: none !important;
}

.show-form{
  display: block !important;
}

.btn-form{
  opacity: 0.6;
  transition: all 0.2s;
}

.btn-form.active, .btn-form:hover{
  opacity: 1;
  transition: all 0.2s;
}

.btn-form:hover{
  box-shadow: 1px 1px 10px #ffffff;
  transition: all 0.2s;
}

.btn-form{
  /* height: 25px;
  width: 80px; */
  background: transparent;
  border: none;
  cursor: pointer;
  font-family:'Nexa Slab Book';
  color: white;
  font-size: 11px;
  margin-bottom: 0;
  /* background-size: 100% auto; */

  width: auto;
  height: auto;
  padding: 5px 15px;
  background-size: 100% auto !important;
}

.sign-in{background: url('../img/back-button-share-v1.png');}
.sign-up{background: url('../img/back-button-share-v2.png');}

.radius-left{
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.radius-right{
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.box-form label{
  margin: 0;
  margin-top: 10px;
}

.box-form .form-control{
  background: transparent;
  border-radius: 0;
  font-family:'Nexa Slab Light Italic';
  font-size: 12px;
  color: #cccccc;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid white !important;
  padding: 5px 0 0 0;
  margin-bottom: 10px;
}

.box-form .form-control::placeholder{
  font-family:'Nexa Slab Light Italic';
  font-size: 10px;
  color: #cccccc !important;
}

.forgot-password{
  color: white;
  text-decoration: none !important;
  transition: all 0.2s;
}

.forgot-password:hover{
  color: #0093c9;
  transition: all 0.2s;
}

footer{
  position: absolute;
  bottom: 0;
  padding: 10px;
  width: 100%;
}

.footer-text{
  text-align: right;
  padding-top: 7px;
  color: #777777;
  font-family:'Nexa Slab Book';
  font-size: 12px;
}

@media(max-width:480px){
  body{
    background: url('../img/background-2.png') no-repeat;
    background-size: cover;
  }
}