body{
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #9053c7;
    /*background: -webkit-linear-gradient(-135deg,#c850c0,#4158d0);
    background: linear-gradient(-135deg,#c850c0,#4158d0);*/
}

#login{
    width: 600px;
    max-width: 600px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 80px 80px 30px 80px;
    box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .39);
}

.login h1{
    display: -webkit-box;
    display: flex;
    flex-basis: 40%;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
    border-radius: 10px;
}

.login h1 a{
    margin: 0 !important;
    text-align: center;
    background-size: contain !important;
    background-position: center center !important;
}

.login form{
    flex-basis: 53%;
    border: 0;
    box-shadow: none;
    background: transparent;
    margin: 0 0 0 40px;
    padding: 0;
    max-width: 350px;
}

.login form .input,
.login input[type=password],
.login input[type=text]{
    font-size: 15px;
    line-height: 50px;
    color: #666;
    display: block;
    background: #f1f1f1;
    min-height: 50px;
    border-radius: 25px;
    padding: 0 30px 0 30px;
    border: 1px transparent solid;
    margin: 0 0 20px;
}

.login form .input:focus,
.login input[type=password]:focus,
.login input[type=text]:focus{
    border: 1px #57b946 solid !important;
    box-shadow: none
}

.login #backtoblog, .login #nav{
    margin-top: 60px;
    flex-basis: 20%;
    text-align: right;
    padding: 0;
}

.login #nav{
    flex-basis: 77%;
    text-align: right;
}

.login form .button.button-primary{
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    height: 50px;
    border-radius: 25px;
    background: #57b846;
    display: -webkit-box;
    display: flex;
    border: 0;
    margin: 10px 0 0;
    justify-content: center;
    align-items: center;
    padding: 0 25px;
    transition: all .4s ease;
}

.login form .button.button-primary:focus{
    box-shadow: none
}

@media ( max-width: 992px ){
    #login{
        width: 100%;
        max-width: 85%;
        padding: 30px 20px;
        display: block;
        text-align: center;
    }

    .login h1{
        margin: 0 0 30px;
        padding: 20px;
    }

    .login form{
        margin: 0 0 30px;
        flex-basis: 100%;
        max-width: none;
    }

    .login #backtoblog, .login #nav{
        flex-basis: 100%;
        text-align: center;
        margin: 10px 0 0;
    }

    .login form .forgetmenot{
        float: none;
        margin: 0 0 20px !important
    }
}