#privacy-info,
#form-reset,
#form-signup,
#logreg.reset #form-signin,
#logreg.signup #form-signin,
#logreg.signup #signup-benefits { display: none; }
#logreg.reset #form-reset,
#logreg.signup #form-signup,
#logreg.signup #privacy-info { display: block; }

#logreg form {
    width: 100%;
    padding: 15px;
    margin: auto;
}

#logreg .social-btn {
    font-weight: 100;
    color: #FFF;
    width: 14em;
    max-width: 100%;
    font-size: 0.9rem;
}

#logreg .btn:not(.btn-def3):not(.social-btn) {
    margin: 0 auto;
    width: 20em;
    max-width: 100%;
}
#logreg .btn[type="submit"] {
    margin-top: .8rem !important; /* AK: for some reason this doesn't override margin: 0 auto; from rule above. :( Thus it's !important. */
}

#logreg .login-facebook { background-color: #3C589C; }
#logreg .login-google { background-color: #DF4B3B; }

#logreg .benefits {
    width: 100%;
    order: 1;
}

#logreg .form-wrapper {
    margin: 0 auto;
    background-color: #F3F3F3;
    box-shadow: 4px 6px 3px rgba(0, 0, 0, 0.12), 0 0 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);

    width: 100%; /*% relative to container*/

    margin-bottom: 2rem;
}

@media (min-width: 420px) { /* XS */
    #logreg .form-wrapper { width: 88%; }

    #logreg.reset .form-wrapper {
        width: 90%; /*% relative to container*/
    }
    #logreg.signup .form-wrapper {
        width: 95%; /*% relative to container*/
    }
}

@media (min-width: 580px) { /* SM */
    #logreg .form-wrapper { width: 85%; }
}

@media (min-width: 768px) { /* MD */
    #logreg .form-wrapper { width: 70%; }
    #logreg.reset .form-wrapper {
       width: 65%; /*% relative to container*/
    }
    #logreg.signup .form-wrapper {
       width: 78%; /*% relative to container*/
    }
}

@media (min-width: 992px) { /* LG+ */
    #logreg .form-wrapper {
        width: 90%; /*% relative to container*/
    }
    #logreg.reset .form-wrapper {
        width: 85%; /*% relative to container*/
    }
    #logreg.signup .form-wrapper {
        width: 93%; /*% relative to container*/
    }
    #logreg .benefits {
        width: 350px;
        padding-left: 2rem; /* don't make closer */
    }
}

@media (min-width: 1200px) { /* LG+ */
    #logreg .form-wrapper {
        width: 76%; /*% relative to container*/
    }
    #logreg.reset .form-wrapper {
        width: 66%; /*% relative to container*/
    }
    #logreg.signup .form-wrapper {
        width: 90%; /*% relative to container*/
    }
    #logreg .benefits {
        width: 400px;
    }
}


.favor-orange { /* female */
        color: #EA9B16;
}
.favor-green { /* male */
        color: #690;
}