@font-face {
    font-family: "Akkurat Pro Light";
    src: url("https://common.northwestern.edu/v8/css/fonts/AkkuratProLight.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Akkurat Pro Regular";
    src: url("https://common.northwestern.edu/v8/css/fonts/AkkuratProRegular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Akkurat Pro Light Italic";
    src: url("https://common.northwestern.edu/v8/css/fonts/AkkuratProLightItalic.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Akkurat Pro Italic";
    src: url("https://common.northwestern.edu/v8/css/fonts/AkkuratProItalic.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Akkurat Pro Bold";
    src: url("https://common.northwestern.edu/v8/css/fonts/AkkuratProBold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Akkurat Pro Bold Italic";
    src: url("https://common.northwestern.edu/v8/css/fonts/AkkuratProBoldItalic.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

body {
    font-size: 14px;
    line-height: 1.42857143;
    color: #342f2e;
    background-color: #f7f7f7;
    padding-bottom: 15%;
}

.container {
    margin-bottom: -40px;

}

.row {
    margin-top: 12%;

}

.main-logo-holder {
    background-color: #4e2a84;
    margin: 0px 0px 0px 0px !important;
    text-align: center;
    padding-top: 2%;
    padding-bottom: 1.5%;
}

.form-group {
    border-radius: inherit;
}

.input-lg {
    border-radius: inherit !important;
}

li {
    list-style-type: none;
}

#help {
    font-weight: bold;
}

#footer {
    font: 14px/1.3em "Akkurat Pro Regular";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70px;
    text-align: center;
    border-top: 1px solid #4e2a84;
    background-color: #4e2a84;
    padding: 10px;
    color: #fff;
}

#loginHelp {
    bottom: 0;
    padding-bottom: 60px;
    text-align: center;
    position: absolute;
    left: 30%;
}

#loginButton_0 {
    color: #fff;
    background-color: #4e2a84;
    border-color: #4e2a84;
    border-radius: inherit;
}

#loginButton_0:hover {
    background-color: rgb(131, 110, 170);
    color: white;
}

a {
    color: #4e2a84 !important;

}

a:hover {
    color: rgb(131, 110, 170) !important;

}

@media only screen and (min-width: 250px) {
    .main-logo {
        width: 80%;
        height: 65%;
    }

    #login-base {
        margin: 0px;
    }

    #loginHelp {
        left: 0%
    }

}

@media only screen and (min-width: 320px) {
    .main-logo {
        width: 80%;
        height: 65%;
    }

    .container {
        padding-bottom: 14%;
    }

    #login-base {
        padding-bottom: 20px;
    }

    #loginHelp {
        left: 3.5%
    }

}

@media only screen and (max-width: 350px) {
    .main-logo {
        width: 80%;
        height: 65%;
    }

    .container {
        padding-bottom: 14%;
    }

    #login-base {
        padding-bottom: 20px;
    }

    #loginHelp {
        left: 5%
    }

}

@media only screen and (min-width: 351px) {
    .main-logo {
        width: 80%;
        height: 65%;
    }

    .container {
        padding-bottom: 14%;
    }

    #loginHelp {
        left: 7%
    }
}

@media only screen and (min-width: 376px) {
    .main-logo {
        width: 75%;
        height: 65%;
    }

    .container {
        padding-bottom: 16%;
    }

    #loginHelp {
        left: 13%
    }
}

@media only screen and (min-width: 400px) {
    .main-logo {
        width: 70%;
        height: 65%;
    }

    .container {
        padding-bottom: 0% !important;
    }

    #loginHelp {
        left: 16%
    }
}

@media only screen and (min-width: 450px) {
    .main-logo {
        width: 70%;
        height: 65%;
    }

    #loginHelp {
        left: 21%
    }
}

@media only screen and (min-width: 520px) {
    .main-logo {
        width: 60%;
        height: 65%;
    }

    #loginHelp {
        left: 24%
    }
}

@media only screen and (min-width: 600px) {
    .main-logo {
        width: 60%;
        height: 65%;
    }

    #loginHelp {
        left: 26%
    }
}

@media only screen and (min-width: 640px) {
    .main-logo {
        width: 60%;
        height: 65%;
    }

    #loginHelp {
        left: 28%
    }
}

@media only screen and (min-width: 740px) {
    .main-logo {
        width: 50%;
        height: 65%;
    }

    #loginHelp {
        left: 32%
    }
}

@media only screen and (min-width: 860px) {
    .main-logo {
        width: 45%;
        height: 60%;
    }

    #loginHelp {
        left: 33.5%
    }
}

@media only screen and (min-width: 920px) {
    .main-logo {
        width: 45%;
        height: 60%;
    }

    #loginHelp {
        left: 34%;
    }
}

@media only screen and (min-width: 992px) {
    .main-logo {
        width: 45%;
        height: 60%;
    }

    #loginHelp {
        left: 35%
    }
}

@media only screen and (min-width: 1090px) {
    .main-logo {
        width: 45%;
        height: 55%;
    }

    #loginHelp {
        left: 38%
    }
}

@media only screen and (min-width: 1200px) {
    .main-logo {
        width: 45%;
        height: 55%;
    }

    #loginHelp {
        left: 40%
    }
}

@media only screen and (min-width: 1400px) {
    .main-logo {
        width: 45%;
        height: 55%;
    }

    #loginHelp {
        left: 42.5%
    }
}

@media only screen and (min-width: 2360px) {
    .main-logo {
        width: 45%;
        height: 55%;
    }

    #loginHelp {
        left: 44.5%
    }
}