.fields{
    margin: 5% 2% 0% 2%;
    font-family: Arial;
}
.input-field{
    height: 35px !important;
}

.title-popup{
    display:inline-flow;
}
.popup-logo{
    height: 50px !important;
    width: auto !important;
}

.login-popup{

    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1099;
    background-color:rgba(0,0,0,0.6);
    visibility: hidden;
    opacity: 0;
    transition: all 1s ease;
 
 }
 .login-popup.show{
    visibility:visible;
    opacity: 1;
 }
 .login-popup .box{
    background-color:#ffffff;
    width: 550px;
    position: absolute;
    left: 50%;
    top:50%;
    transform:translate(-50%,-50%);
    display: flex;
    flex-wrap: wrap;
    opacity: 0;
    transition: all 1s ease;
    /*border-radius: 20px;*/
 
 }
 .login-popup.show .box{
    opacity: 1;
    margin-left: 0;
 }
 .login-popup .box .img-area{
    flex:0 0 100%;
    max-width: 100%;
    position: relative;
    /*overflow: hidden;*/
    padding:15px;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 
 .login-popup .box .img-area img{
    /*margin-left: 50px;*/
    /*position: relative;*/
    /*left: 30px;*/
    /*top: 35px;*/
    height: 100%;
    width: 100%;
 }
 .login-popup .box .form{
    flex:0 0 100%;
    max-width: 50%;
    padding:0px  10px;
     background-image:url("../page-404.html");
 
 }
 
 
 .login-popup .box .form .close{
    position: absolute;
    right: -7px;
    top:  -7px;
    font-size: 20px;
    cursor: pointer;
    padding: 6px 15px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
 }


/*responsive*/
@media(max-width: 767px){
    .login-popup .box{
       width: calc(100% - 20px);
    }
    .login-popup .box .img-area{
       /*display: none;*/
    }
    .login-popup .box .form{
       flex: 0 0 50%;
         max-width: 100%;
    }
 
    .login-popup .box .img-area {
       /*margin-left: 85px;*/
    }
 
 .login-popup .box .img-area img{
    /*margin-left: 30px;*/
 
    width: 100%;
 }
 .login-popup .box .form{
    flex:0 0 100%;
    max-width: 50%;
    /*padding:5px;*/
 
 }
 
 }