@charset "UTF-8";



@import url("https://fonts.googleapis.com/css?family=Comfortaa:300,400,700");



@import url("https://use.fontawesome.com/releases/v5.6.3/css/all.css");



body {

  font-family: "Comfortaa", sans-serif;

}



.page-loader-wrapper {

    z-index: 99999999;

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    width: 100%;

    height: 100%;

    background: #eee;

    overflow: hidden;

    text-align: center;

}

.page-loader-wrapper p {

    font-size: 13px;

    font-weight: 700;

    color: #777;

    margin-top: 10px;

}

.page-loader-wrapper .loader {

    position: relative;

    top: calc(40% - 30px);

}

.zmdi-hc-spin {

    -webkit-animation: zmdi-spin 1.5s infinite linear;

    animation: zmdi-spin 1.5s infinite linear;

}

@-webkit-keyframes zmdi-spin {

    0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

}

100% {

    -webkit-transform: rotate(359deg);

    transform: rotate(359deg);

}

}

@keyframes zmdi-spin {

    0% {

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

}

100% {

    -webkit-transform: rotate(359deg);

    transform: rotate(359deg);

}

}

.wrapper {

  position: relative;

  top: 0;

  height: 100vh;

  /* background-image: url(slider11.jpg); */

}



.wrapper::before {

  content: '';

  position: fixed;

  width: 100%;

  height: 100%;

  background: rgba(210, 210, 210, 0.7);

  backdrop-filter: blur(10px);

  z-index: 0;

}



.height-inherit {

  height: inherit;

}



/* #formHolder {

  background: url('bgcoba.png');

  background-size: cover;

  background-position: center center;

} */



.brand {

  padding: 20px;

  color: #fff;

  min-height: 540px;

  position: relative;

  border-radius: 0.375rem;

  transition: all 0.6s cubic-bezier(1, -0.375, 0.285, 0.995);

  z-index: 9999;

  overflow: visible;

}

.brand.active {

  max-width: 100%;

  flex: 0 0 100%;

  background-size: 75%;

}

.brand::before {

  content: "";

  display: block;

  width: 500px;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background: url('../images/loginform.png');

  background-size: cover;

  background-position: center center;

  border-radius: 0.375rem;

  transition: all 0.6s cubic-bezier(1, -0.375, 0.285, 0.995);

  z-index: -1;

}



.brand.active::before {

  background-size: 70%;

  transform: unset;

}



.brand .heading {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  transition: all 0.6s;

  z-index: 1;

}

.brand .heading.active {

  top: 200px;

}

.brand .heading h2 {

  font-size: 70px;

  color: #00ff00;

  font-weight: 700;

  text-transform: uppercase;

  margin-bottom: 0;

}

.brand .heading p {

  font-size: 15px;

  font-weight: 300;

  text-transform: uppercase;

  letter-spacing: 2px;

  white-space: 4px;

  font-family: "Raleway", sans-serif;

}

.brand .success-msg {

  width: 100%;

  text-align: center;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  margin-top: 40px;

  z-index: 1;

}

.brand .success-msg p {

  font-size: 25px;

  font-weight: 400;

  font-family: "Raleway", sans-serif;

}

.brand .success-msg a {

  font-size: 12px;

  text-transform: uppercase;

  padding: 8px 30px;

  background: #f95959;

  text-decoration: none;

  color: #fff;

  border-radius: 30px;

}

.brand .success-msg p, .brand .success-msg a {

  transition: all 0.9s;

  transform: translateY(20px);

  opacity: 0;

}

.brand .success-msg p.active, .brand .success-msg a.active {

  transform: translateY(0);

  opacity: 1;

}



.form-box {

  position: relative;

}

.form-box .form-peice {

  min-height: 500px;

  margin-top: 20px;

  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);

  color: #404040;

  padding: 20px 0 60px;

  transition: all 1.2s ease-in-out;

  position: absolute;

  background: #f5f5f5;

  top: 0;

  left: -50%;

  width: 150%;

  border: 5px solid #fff;

  border-radius: 0.375rem;

  overflow: hidden;

  z-index: 1;

}



.form-box .form-peice.switched {

  transform: translateX(-100%);

  width: 60%;

  left: 20px;

  opacity: 0;

  z-index: 0;

}



.form-box .form-peice::before {

  content: '';

  position: absolute;

  display: inline-block;

  top: -100px;

  left: 0;

  width: 30px;

  height: 30px;

  background: #fff;

}



.form-box .form-peice.anim-light::before {

  animation: shiny-btn1 1s ease-in-out 1.1s;

}



.header-login {

  text-align: center;

  margin-left: 20%;

  color: #000;

}



.header-login .logo-unmas {

  width: 80px;

  height: 92px;

  margin: 0 auto;

  background: url('../images/logo.png') center/cover;

}



.header-login h3 {

  margin-bottom: 0;

  font-weight: 600;

}



.form-box form {

  padding: 0 40px;

  margin: 0;

  width: 50%;

  position: absolute;

  top: 64%;

  left: 60%;

  transform: translate(-50%, -50%);

}

.form-box form.forgot-form {

  top: 60%;

}

.form-box form .form-group {

  margin-bottom: 5px;

  position: relative;

}

.form-box form .form-group.active input {

  border-color: #019861 !important;

}

.form-box form .form-group.active label {

  color: #019861 !important;

}

.form-box form label {

  font-size: 12px;

  font-weight: 400;

  color: #888;

  text-transform: uppercase;

  font-family: "Comfortaa", sans-serif;

  letter-spacing: .5px;

  transform: translateY(40px);

  transition: all 0.4s ease;

  cursor: text;

  z-index: -1;

}



.form-box form .form-check {

  text-align: right;

  margin-top: 5px;

}

.form-box form input.form-check-input {

  width: unset;

  padding: 0;

  display: inline-block;

  cursor: pointer;

}

.form-box form label.form-check-label,

.form-box form label.form-check-label.active {

  position: relative;

  transform: unset;

  font-size: 12px;

  cursor: pointer;

}

.form-highlight {

  position: absolute;

  height: 60%;

  width: 60px;

  top: 25%;

  left: 0;

  pointer-events: none;

  opacity: 0.4;

}

.form-box form label.active {

  transform: translateY(15px);

  font-size: 11px;

}



.form-box form label.fontSwitch {

  font-family: "Raleway", sans-serif !important;

  font-weight: 600;

}



.form-box form label span {

  opacity: 1;

  transition: all .5s ease;

}



.form-box form label.active span {

  opacity: 0;

}

.form-box form input {

  background: none;

  outline: none;

  border: none;

  display: block;

  padding: 8px 0 7px;

  width: 100%;

  border-bottom: 1px solid #888;

  color: #444;

  font-size: 15px;

  font-family: "Comfortaa", sans-serif;

  letter-spacing: .5px;

  z-index: 1;

}



.form-box form input:-webkit-autofill,

.form-box form input:-webkit-autofill:hover,

.form-box form input:-webkit-autofill:focus,

.form-box form input:-webkit-autofill:active {

  box-shadow: 0 0 0 30px #f5f5f5 inset !important;

  -webkit-box-shadow: 0 0 0 30px #f5f5f5 inset !important;

}



.form-box form span.form-bar {

  position: relative;

  display: block;

  width: 100%;

}

.form-box form span.form-bar::before,

.form-box form span.form-bar::after {

  content: "";

  height: 2px;

  width: 0;

  bottom: -1px;

  background: #019861;

  position: absolute;

  transition: 0.4s ease all;

}

.form-box form span.form-bar::before {

  left: 50%;

}

.form-box form span.form-bar::after {

  right: 50%;

}

.form-box form span.form-bar.active::before,

.form-box form span.form-bar.active::after {

  width: 50%;

}

.form-box form span.toggle-password {

    float: right;

    position: absolute;

    right: 10px;

    top: 45px;

    cursor: pointer;

    z-index: 2;

}

.form-box form .CTA {

  margin-top: 15px;

}

.form-box form .CTA button {

  position: relative;

  font-size: 13px;

  letter-spacing: .5px;

  width: 50%;

  text-transform: uppercase;

  padding: 10px 5px;

  background: #0fb277;

  color: #fff;

  outline: none;

  border-radius: 30px;

  border: none;

  cursor: pointer;

  font-family: "Comfortaa", sans-serif;

  overflow: hidden;

}



.form-box form .CTA button.passf{

  width: 75%;

}



.form-box form .CTA button:hover {

  text-decoration: none;

}



.form-box form .CTA button::before {

  content: '';

  position: absolute;

  display: inline-block;

  top: -180px;

  left: 0;

  width: 30px;

  height: 100%;

  background-color: #fff;

}



.form-box form .CTA button:hover::before {

  animation: shiny-btn1 1.3s ease-in-out;

}



footer {

  position: fixed;

  bottom: 0;

}



footer p {

  text-align: center;

}



@keyframes shiny-btn1 {

  0% {

    transform: scale(0) rotate(45deg);

    -webkit-transform: scale(0) rotate(45deg);

    opacity: 0;

  }

  1% {

    transform: scale(0) rotate(45deg);

    -webkit-transform: scale(0) rotate(45deg);

    opacity: 0.5;

  }

  2% {

    transform: scale(4) rotate(45deg);

    -webkit-transform: scale(4) rotate(45deg);

    opacity: 1;

  }

  100% {

    transform: scale(65) rotate(45deg);

    -webkit-transform: scale(65) rotate(45deg);

    opacity: 0;

  }

}



@-webkit-keyframes shiny-btn1 {

  0% {

    transform: scale(0) rotate(45deg);

    -webkit-transform: scale(0) rotate(45deg);

    opacity: 0;

  }

  1% {

    transform: scale(0) rotate(45deg);

    -webkit-transform: scale(0) rotate(45deg);

    opacity: 0.5;

  }

  2% {

    transform: scale(4) rotate(45deg);

    -webkit-transform: scale(4) rotate(45deg);

    opacity: 1;

  }

  100% {

    transform: scale(65) rotate(45deg);

    -webkit-transform: scale(65) rotate(45deg);

    opacity: 0;

  }

}



.form-box form .CTA a.switch {

  font-size: 13px;

  font-weight: 400;

  font-family: "Comfortaa", sans-serif;

  color: #bbbbbb;

  transition: all 0.3s;

}

.form-box form .CTA a.switch:hover {

  color: #000;

}



@media (max-width: 768px) {

  .container {

    overflow: hidden;

  }

  #formHolder .brand {

    min-height: 100px;

  }

  #formHolder .brand::before {

    width: 100%;

    background-size: 275%;

    border-radius: unset;

  }

  .align-self-center.mobile-full {

    align-self: unset !important;

  }

  #formHolder .brand.active {

    min-height: 100vh !important;

    background-size: cover;

  }

  #formHolder .brand.active::before {

    background-size: cover;

  }

  #formHolder .brand .success-msg p {

    font-size: 16px;

  }

  #formHolder .brand .success-msg a {

    padding: 5px 30px;

    font-size: 10px;

  }

  #formHolder .header-login {

    margin-left: 0;

  }

  #formHolder .form-box {

    /* width: 80vw; */

    min-height: 500px;

    /* margin-left: 10vw; */

  }

  #formHolder .form-box .form-peice {

    margin: 0;

    top: 0;

    left: 0;

    width: 100% !important;

    transition: all 0.5s ease-in-out;

  }

  #formHolder .form-box .form-peice.switched {

    transform: translateY(-100%);

    width: 100%;

    left: 0;

  }

  .form-box .form-peice.anim-light::before {

    animation: shiny-btn1 1s ease-in-out 0.5s;

  }

  #formHolder .form-box .form-peice > form {

    width: 100% !important;

    padding: 60px;

    left: 50%;

  }

}



@media (max-width: 480px) {

  #formHolder .form-box {

    width: 100vw;

    margin-left: 0;

  }

}