#loginsignup {
    display: flex;
    flex-direction: row;
}

#loginsignup > div {
    flex: 1 1 50%;
}

#loginsignup > div:first-child {
    margin: 0 2em 0 0;
}

#loginsignup h2 {
    margin-top: 0;
    margin-bottom: 1em;
}

#loginsignup input {
    max-width: 17.5em;
    margin-bottom: 0.2em;
}

@media screen and (max-width: 500px) /* Breakpoint: MOBILE */ {
    #loginsignup {
        flex-direction: column;
    }

    #loginsignup > div:first-child {
        margin: 0 0 1em 0;
    }
}

/*
    The design breaks on IE11, we target a IE10+ fix here...
    https://paper-leaf.com/blog/2014/09/targeting-ie-10-11-browsers-css/
*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    #loginsignup {
        flex-direction: column;
    }

    #loginsignup > div {
        flex-basis: auto;
    }
}