<form class=" sign">
        <div class="container first">
            <ul class="Header-social list-inline right">
              <li>
                    <li><icon class="icon-contact email-icon icon-color" ></icon></li>
                    <li id="sign-title"><strong>SIGN UP</strong></li>
                </li>
            </ul>
        </div>
        <div class="container second">
            <input type="email" class=" email-input" id="email" placeholder="Email address">
            <button type="submit" class=" email-btn" id="signUp-btn">JOIN</button>
            <div id="warning">
            Invalid email address
            </div>
        </div>
</form>

.icon-color{
    color:@pink;
    font-size: 0.8em;
    font-weight: bold;
}

#warning{
    display:none;
    color:@black;
    font-size: 8pt;
    padding-left:6px;
}

.email-error{
    background:@gray-menu;
    color:@red;
    border-top:solid red 1px;
    border-bottom:solid red 1px;
    border-left:solid red 1px;
    text-align: center;
    width:140px;
    height:25px;
    font-size:7pt;
}

.email-btn{
    background:@pink;
    color:white;
    border:none;
    width:40px;
    height:25px;
    font-size:8pt;
    text-align: center;
    position:fixed;
}

.email-input{
    background:@gray-menu;
    color:@black;
    text-align:left;
    width:140px;
    height:25px;
    font-size:7pt;
    padding:8px;
    border:1px solid @gray-menu-border !important;
    position:relative;
}

.sign{
    height:50px;
    width:200px;
    cursor:pointer;
    margin:50px 600px;
    cursor: pointer;
    color:@pink;
}

.first{
    height: 25pt ;
    font-size: 1em;
    color:@pink;
    padding:10px;
    margin:0px;
}


.second{
    height: 25pt ;
    display:none;
    font-size: 1em;
    margin:0px;
    z-index:999999;
}

.sign:hover  .second{
    display:block;
}