#togglePassword,#togglePassword2,#togglePassword1 ,#togglePassword3, #togglePassword4 {
    margin-top: -26px;
    cursor: pointer;
    margin-right: 20px;
      }

 .float-right{
    float:right !important;
  }
 .float-left{ 
    float:left !important;
  } 

  #togglePassword3 {
    margin-top: -26px;
    cursor: pointer;
    margin-right: 20px;
  }

  .float-right {
    float: right !important;

  }

  .float-left {
    float: left !important;
  }

  .hero {
    width: 100%;
    height: 100%;
    background: url(../img/hero-bg.png) top center no-repeat;
    background-size: cover;
  }


  @media (min-width: 1024px) {
    .hero {
      background-attachment: fixed;
    }
  }

  @media (max-width: 991px) {
    .hero {
      height: auto;
      padding: 80px 0 60px 0;
    }

    .hero .hero-img {
      text-align: center;
      margin-top: 80px;
    }

    .hero .hero-img img {
      width: 80%;
    }
  }

  @media (max-width: 768px) {
    .hero {
      text-align: center;
    }

    .hero h1 {
      font-size: 20px;
    }

    .hero h2 {
      font-size: 24px;
    }

    .hero .hero-img img {
      width: 100%;
    }
  }

  .popup{
    top: 200px;
    /* left: 50px; */
  }