.signup-form {
  opacity: 0;
  z-index: 0;
  transition: all 0.6s ease-in-out;
  transform: translateY(-100%);
}

.login-form {
  z-index: 10;
  transition: all 0.6s ease-in-out;
}

.login-text {
  opacity: 0;
  z-index: 0;
  transition: all 0.6s ease-in-out;
  transform: translateY(-50%);
}

.signup-text {
  z-index: 10;
  transition: all 0.6s ease-in-out;
}

.overlay {
  transition: all 0.6s ease-in-out;
}

.container.signup-active .login-form {
  transform: translateY(100%);
  opacity: 0;
}

.container.signup-active .overlay {
  transform: translateY(-70%);
  height: 350px;
  Z-index: 10;
}

.container.signup-active .signup-text {
  transform: translateY(50%);
  opacity: 0;
}

.container.signup-active .login-text {
  transform: translateY(230%);
  opacity: 1;
  z-index: 20;
}

.container.signup-active .signup-form {
  transform: translateY(-90%);
  opacity: 1;
  z-index: 20;
}

@media (min-width: 350px){
  .container.signup-active .login-text {
    transform: translateY(270%);
    opacity: 1;
    z-index: 20;
  }  
}

@media (min-width: 688px){

  .container.signup-active .login-text {

    transform: translateY(310%);

    opacity: 1;

    z-index: 20;

  }  

}

@media (min-width: 1300px){
  .container.signup-active .login-text {
    transform: translateY(350%);
    opacity: 1;
    z-index: 20;
  }  
}