section.login{
    margin-top: 100px;
    margin-bottom: 150px;

    &[type="login"] .wrap[type="login"]
    ,&[type="register"] .wrap[type="register"]
    ,&[type="forget"] .wrap[type="forget"]
    {
        display: block;
    }
    
    

    .wrap{
        background-color: #FFF;
        padding: 50px;
        width: 400px;
        margin: auto;
        margin-top: 50px;
        margin-bottom: 50px;
        max-width: calc(100% - 160px);

        display: none;

        h1{
                text-align: center;
                margin-block-start: 0;
                font-size: 27px;
        }
        .btn{
            margin-top: 15px;
            margin-bottom: 15px;
        }
        
    
    }

    .main-logo{
        width: 140px;
        margin: auto;
        display: block;
        margin-bottom: 30px;
    }

    .pets_list{
        background-color: #f9f9f9;
        padding: 25px;
    }

    .step_success{
        text-align: center;
    }

    .forget_btn{
        color: #b79d77;
        cursor: pointer;
        display: inline-block;
        margin-bottom: 25px;
    }
}



/* ............................................................ */
@media screen and (max-width: 1240px) {



    section.login {
        margin-top: 100px;
        margin-bottom: 50px;

        .wrap {
            background-color: #FFF;
            padding: 30px;
            width: 400px;
            margin: auto;
            margin-top:30px;
            margin-bottom: 50px;
            max-width: calc(100% - 120px);
        }
    }

    

}