#top-banner {
    height: 80px;
    overflow: hidden;
}

#top-banner div#logo {
    float: left;
    width: 15%;
}

#top-banner div#logo img {
    height: 80px;
    width: 130px;
}

#top-banner div#name {
    float: left;
    width: 84%;
}

#top-banner div#college-name {
    font-weight: bold;
    margin-top: 10px;
    font-size: 25px;

}

#top-banner div#college-billing {
    font-weight: bold;
    font-style: italic;
    font-size: 15px;
}

div.footer, div.footer a {
    background-color: #0e5077 !important;
    color: #fff3cd;
}

div#welcome-name {
    float: right;
    display: inline-block;
    margin-top: -20px;
    width: auto;
    color: brown;
    font-weight: bold;
}

.section-title {
    font-weight: bold;
    font-size: 24px;
    color: #0e5077;
    border-bottom: 2px solid #0a6aa1;
}

#login-box {
    margin-top: 30px;
}

#login-box .form-control {
    border: 2px solid #1a7bb9;
}

#login-box .form-vertical {
    margin: 20px;
}

#login-box .control-label {
    font-size: 16px;
    font-weight: bold;;
}

@media only screen and (max-width: 992px) {
    #top-banner div#logo {
        width: 20%;
    }

    #top-banner div#name {
        width: 80%;
    }

    #top-banner div#college-name {
        font-size: 18px;

    }

    #top-banner div#college-billing {
        font-size: 13px;
    }

    #top-banner div#logo img {
        height: 70px;
        width: 120px;
    }

    nav button#toggle {
        display: inline-block;
    }
}

@media only screen and (max-width: 788px) {
    #top-banner div#logo {
        width: 24%;
    }

    #top-banner div#name {
        width: 75%;
    }

    #top-banner div#college-name {
        font-size: 15px;

    }

    #top-banner div#college-billing {
        font-size: 13px;
    }

    div#welcome-name {
        margin-top: 0px;
    }
}

@media only screen and (max-width: 550px) {
    #top-banner div#logo {
        width: 28%;
    }

    #top-banner div#name {
        width: 70%;
    }

    #top-banner div#college-name {
        font-size: 13px;

    }

    #top-banner div#college-billing {
        font-size: 10px;
    }

    div#welcome-name {
        margin-top: 0px;
    }

    nav button#toggle {
        display: inline-block;
    }
}

@media only screen and (max-width: 504px) {
    #top-banner div#logo {
        width: 34%;
    }

    #top-banner div#name {
        width: 66%;
    }

    #top-banner div#college-name {
        font-size: 10px;

    }

    #top-banner div#college-billing {
        font-size: 8px;
    }

    div#welcome-name {
        margin-top: 0px;
    }
}

@media only screen and (max-width: 415px) {
    #top-banner div#logo {
        width: 34%;
    }

    #top-banner div#name {
        width: 66%;
    }

    #top-banner div#college-name {
        display: none;

    }

    #top-banner div#college-billing {
        font-size: 10px;
        margin-top: 15px;
    }

    div#welcome-name {
        margin-top: 0px;
    }
}

.required {
    color: red;
}

#top-bar {
    background: #0e5077;
    height: 50px;
    color: #fff3cd;
    line-height: 50px;
    text-align: right;
    font-weight: bold;
    font-size: 15px;
}

#features div{
    margin: 20px;
}

#features div h2{
    font-weight: bold;
    font-size: 16px;
}
#features div i{
    margin-right: 20px;
}