/* Smartphones (portrait and landscape) ----------- */

@media only screen and (max-device-width: 480px) {
    div#auth-background {
        width: 100%;
    }
    div#auth-background .form-bottom {
        background: #fff !important;
        padding: 8px 15px 15px 15px;
    }
    div#auth-background .form-top {
        background: #fff !important;
        padding: 15px 15px 8px 15px;
    }
    #Plost {
        text-align: center;
    }
    .social-login-button {
        display: block !important;
        margin: 5px 0px;
        padding: 0;
    }
    .social-login-buttons a {
        width: 100%;
    }
    .social-login-buttons a,
    .social-login-buttons .social-login-button>div {
        width: 100% !important;
    }
    .form-top-left h4 {
        font-size: 25px;
    }
}

@media only screen and (min-device-width: 480px) {
    div#auth-background {
        width: auto;
    }
    div#auth-background .form-bottom {
        background: #fff !important;
        padding: 8px 15px 15px 15px;
    }
    div#auth-background .form-top {
        background: #fff !important;
        padding: 15px 15px 8px 15px;
    }
    #Plost {
        text-align: center;
    }
    .social-login-button {
        display: block !important;
        margin: 5px 0px;
        padding: 0;
    }
    .social-login-buttons a,
    .social-login-buttons .social-login-button>div {
        width: 100% !important;
    }
}


/* large smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) {
    div#auth-background {
        width: auto;
        max-width: 530px;
    }
}