#nav .login-nav{
    border-radius: 4px;
    padding: 5px 15px;
    color: #fff;
    padding: 5px 15px;
    margin-left: 25px;
    box-shadow: 0px 2px 7px #8c8b8b;
    color: #3484d9;
    transition: all .2s ease-in-out;
    cursor: pointer;
}
#nav .login-nav:hover{    
    transition: all .2s ease-in-out;
    box-shadow: none;
    text-decoration: none;    
}
.login-nav:hover i{
    transition: all .2s ease-in-out;
    transform: translate(5px);
}
#nav .registe-nav{    
    padding: 5px 15px;
    border-radius: 4px;
    margin-left: 8px;    
    color: #333;
    text-decoration: none;
    transition: all .2s ease-in-out;
    cursor: pointer;
}
.registe-nav:hover i{
    transition: all .2s ease-in-out;
    transform: translate(5px);
}
#nav .registe-nav:hover{
    box-shadow: 0px 2px 7px #8c8b8b;
    color: #3484d9;
    transition: all .2s ease-in-out;
}

#nav .nav-Login{
    padding: 10px;
    background: #fafafa;
}
#nav .login-nav i,
#nav .registe-nav i{
    transition: all .2s ease-in-out;
    margin-right: 10px;
}
#nav .nav-Login ul{
    padding: 0;
    margin: 0;
}
#nav .nav-Login ul >li{
    display: inline-block;
}
#nav .nav-Login .facebook-hosting,
#nav .nav-Login .twitter-hosting,
#nav .nav-Login .vk-hosting{
    padding: 2px 0px;
    background: #4267B2;
    border-radius: 3px;
    margin-right: 3px;
    width: 28px;
    text-align: center;
}
#nav .nav-Login .facebook-hosting a,
#nav .nav-Login .twitter-hosting a,
#nav .nav-Login .vk-hosting a{
    color: #fff;
}
#nav .nav-Login .twitter-hosting{
    background: #1DA1F3;   
}
#nav .nav-Login .vk-hosting{
    background: #4a76a8;
}
#nav .nav-Login .top_menu .phon{
    color: #333;
    font-size: 14px;
    margin-right: 15px;
}
#nav .nav-Login .top_menu .mail-com{
    color: #333;
    font-size: 14px;
}
#nav .nav-Login .top_menu .mail-com a{
    color: #333;
}
#nav .nav-Login .top_menu .mail-com i,
#nav .nav-Login .top_menu .phon i{
    padding: 0 5px;
    font-size: 15px;
}

#nav .form-login{
    position: absolute;
    background: #fff;
    padding: 10px 15px;
    z-index: 37;
    box-shadow: 0px 3px 3px #fff;
    transform: translate(-35px,75px);    
    transition: all .5s ease-in-out;
    display: none;  
}
#nav .form-login.animate{
    transform: translate(-35px,12px);
    transition: all .5s ease-in-out;
}
#nav .form-login .form-group{
    text-align: left;
}
#nav .form-login .btn-yacolo{
    padding: 10px 15px;
    background: #00d2ff;
    background: -webkit-linear-gradient(to left, #3a7bd5, #00d2ff);
    background: linear-gradient(to left, #3a7bd5, #00d2ff);
    color: #fff;
    border-radius: 3px;
    letter-spacing: .8px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    width: 100%;
}
#nav .form-login .forgot-user a{
    color: #333;    
}



@media only screen and (min-width: 992px) and (max-width: 1200px) {
    
}
@media (max-width: 991px){}
@media (max-width: 767px){
    #nav{
        padding: 0;
    }
    #nav .em-phCompany{
        margin-bottom: 15px;
        text-align: center;
    }
    #nav .log-reg{
       text-align: center; 
    }
    #nav .nav-Login .top_menu .phon,
    #nav .nav-Login .top_menu .mail-com{
        font-size: 12px;        
    }
}
@media (max-width: 480px){
    #nav .nav-Login .facebook-hosting i,
    #nav .nav-Login .twitter-hosting i, 
    #nav .nav-Login .vk-hosting i{
        font-size: 12px;
    }
    #nav .nav-Login .facebook-hosting, #nav .nav-Login .twitter-hosting, #nav .nav-Login .vk-hosting {
        padding: 0px 0px;        
        border-radius: 3px;
        margin-right: 3px;
        width: 25px;
        text-align: center;
    }
     #nav .registe-nav {
        padding: 5px 0px;
    }
    #nav .login-nav{
        margin-left: 5px;
        padding: 5px 10px;
    }
    #nav .form-login.animate small{
        font-size: 71%;
        font-weight: 700;
    }
    #nav .form-login.animate {
        transform: translate(-35px,10px);
        transition: all .5s ease-in-out;
    }
}
@media (max-width: 320px){
    #nav .registe-nav {
        padding: 5px 0px;
    }
    #nav .nav-Login .top_menu .phon{
        font-size: 12px;
    }
    #nav .login-nav {
        margin-left: 0px;
        padding: 5px 8px;
    }
    #nav .nav-Login .top_menu .phon{
        margin: 0;
    }
    #nav .form-login.animate {
        transform: translate(-35px,10px);
        transition: all .5s ease-in-out;
    }
}