body {
    background: #cae3ff;
    background: -moz-radial-gradient(center, ellipse cover, #cae3ff 1%, #1c2b5a 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%, #cae3ff), color-stop(100%,#1c2b5a)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #cae3ff 1%,#1c2b5a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #cae3ff 1%,#1c2b5a 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #cae3ff 1%,#1c2b5a 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, #cae3ff 1%,#1c2b5a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#0264d6', endColorstr = '#1c2b5a', GradientType = 1); /* IE6-9 fallback on horizontal gradient */
    height: calc(100vh);
    width: 100%;
}

#logreg-forms {
    width: 412px;
    margin: 10vh auto;
    background-color: #f3f3f3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

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

    #logreg-forms.form-control {
        position: relative;
        box-sizing: border-box;
        height: auto;
        padding: 10px;
        font-size: 16px;
    }

        #logreg-forms.form-control:focus {
            z-index: 2;
        }

    #logreg-forms.form-signin input[type = "email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }



@media screen and (max-width: 500px) {
    #logreg-forms {
        width: 300px;
    }
}