#logreg-forms {
    width: 85%; /*% relative to container*/
    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);
}

#logreg-forms.reset {
    width: 75%; /*% relative to container*/
}

#logreg-forms.signup {
    width: 90%; /*% relative to container*/
}

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

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

#logreg-forms button {
    margin: 0 auto;
    width: 20em;
    max-width: 100%;
}
#logreg-forms button[type="submit"]{ margin-top: .8rem; }

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

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

@media (max-width: 1200px) { /* lG */
    #logreg-forms { min-width: 55%; width: 48%; /*% relative to container*/ }
    #logreg-forms.reset {
       width: 42%; /*% relative to container*/
    }
    #logreg-forms.signup  {
       width: 60%; /*% relative to container*/
    }
}
@media (max-width: 992px) { /* MD */
    #logreg-forms { min-width: 70%; }
}
@media (max-width: 768px) { /* SM */
    #logreg-forms { min-width: 86%; }
}
@media (max-width: 580px) { /* XS */
    #logreg-forms { min-width: 90%; }
}
@media (max-width: 420px) { /* XXS? */
    #logreg-forms { min-width: 100%; }
}