.navbar{
    background-color: lightgrey!important;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 20%;
    left: 9%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    border-color: black;

}

.middle2 {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 20%;
    left: 23.5%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    border-color: black;

}

.text {
    background-color: red;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}

.text2,.text-login {
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}

#login-btn, #login-btn>img,#login-btn2, #login-btn2>img{

    border-radius: 50%;
    height: 200px;
    width: 200px;
    padding: 0;
}

#login-btn>img:hover {
    opacity: 0.3;
}

#login-btn:hover .middle {
    opacity: 1;
}

#img2,#login-img{
    height: 200px;
    width: 200px;
    padding: 0;
}

#login-img{
    margin:0;
    top: 10%;
    left: 42.5%;
    position: fixed;
}

.middle-login{
    transition: .5s ease;
    opacity: 1;
    position: absolute;
    top: 23%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    border-color: black;
}