body {
    font-family: 'proxima-nova', sans-serif;
    font-size: 1rem;
    color: #37424A;
}
body, html {         
    margin: 0px;
    padding: 0px;
}
:root {
    --clr-white: #FFFFFF;
    --clr-dark-blue: #01426A;
    --clr-dark-blue-rgb: rgba(1, 66, 106, 0.8);
    --clr-blue: #4B92DB;
    --clr-lt-grey: #E3E6E5;
    --clr-grey: #707070;
    --clr-dark-grey: #37424A;
}
a, a:visited, a:hover, a:active{
    color: var(--clr-dark-blue);
}
.d-flex {
    display: flex !important;
}
.align-items-center {
    align-items: center !important;
}
.justify-content-center {
    justify-content: center !important;
}
.preheader-image{
    display: block;
    height: 50px;
    background: var(--clr-blue) 0% 0% no-repeat padding-box;
    margin: auto;
}
.hero {
    width: 100%;
    min-width: 1440px;
    height: 387.38px;
    background: transparent url('../img/header-image.png');
    background-size: 100%;
    background-repeat: no-repeat;
    /* opacity: 0.77; */
}
.hero-header{
    background-color: var(--clr-dark-blue-rgb);
    height: 80px;
    margin: auto;
}
.logo {
    margin: 24px 0px 0px 153px;
    top: 30px;
    float: left;
}
.hero-btn {
    float: right;
    margin: 30px 153px 25px auto;
}
.hero-btn a {
    font: Bold 14px/17px proxima-nova;
    letter-spacing: 0;
    color: var(--clr-white);
    font-size: 14px;
    border: 1px solid var(--clr-blue);
    padding: 14px 20px 13px 16px;
    cursor: pointer;
    justify-content: center;
    text-align: center;
    align-items: center;
    text-decoration: none;
    clear: both;
}
.hero-btn a:hover {
    background-color: var(--clr-blue);
}
.hero-btn a:hover, .hero-btn a:visited, .hero-btn a:active {
    color: var(--clr-white);
} 
.hero-text h1{
    text-align: left;
    width: 850px;
    color: var(--clr-white);
    text-align: left;
    font-family: brandon-grotesque, sans-serif;
    letter-spacing: 0;
    font-weight: 500;
    line-height: 1;
    font-size: 93px;
    text-transform: uppercase;
    margin: 60px 444px 0px 146px;
}
#ballot {
    display: block;
    margin: auto;
    margin-top: 80px;
    margin-bottom: 40px;
    height: 50px;
}
h1 {
    color: var(--clr-blue);
}
h2 {
    color: var(--clr-dark-blue);
    font-family: brandon-grotesque, sans-serif;
    font-size: 36px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    line-height: .95;
}
h3 {
    color: var(--clr-dark-grey);
    font-family: proxima-nova Alt, sans-serif;
    font-weight: Bold;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    line-height: .22;
}
nav {
    margin: auto;
    max-width: 1440px;
}
ul {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-end;
}
li {
    display: inline-block;
}
li a {
    border: 1px solid var(--clr-dark-blue);
    margin: 10px 16px;
    padding: 15px 25px 15px 25px;
    cursor: pointer;
    display: inline-block;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-family: proxima-nova, sans-serif;
    font-style: normal;
    font-weight:500;
    font-size: 14pt;
    color: var(--clr-dark-blue);
    text-decoration: none;
}
li a:hover {
    color: #fff;
    background-color: var(--clr-dark-blue);
}
footer section {
    margin: auto;
    display: flex;
    flex-direction:row-reverse;
    justify-content: center;
}
#ftr-img-lrg {
    display: inline;
    margin: auto auto auto -465px;
}
footer h2 {
    font-family: brandon-grotesque, sans-serif;
    font-weight: lighter;
    font-size: 36px;
    width: 517px;
    margin: auto auto auto 35px;
    padding-top: 270px;
    text-align: left;
}
#career-focused {
    width: 1440px;
    margin: 0 20px;
}
#career-focused h2 {
    line-height: 1.55;
    text-transform: none;
}
h4 {
    max-width: 160px;
}
h4.modal-title {
    max-width: none;
}
#discover a{
    font-family: proxima-nova, sans-serif;
    font-weight: bold;
    display: flex;
    text-decoration: none;
    text-transform: uppercase;
    margin: auto auto auto 375px;
}

#chevron {
    margin: 10px;
}
.footer-blue {
    background-color: var(--clr-blue);
    height: 97px;
    margin: -1px auto auto auto;
}
.footer-bleft{
    margin: 0 970px 0 0;
    text-align: left;
}
.footer-bleft a img {
    width: auto;
    padding: 30px 15px;
}
.footer-logo {
    height: 175px;
    margin: auto;
    display: flex;
}
.footer-logo .wrapper {
    display: flex;
    padding: 50px 2%;
    align-items: center;
    justify-content: space-between;
}
.footer-logos {
    display: flex;
    flex-direction: row;
    text-align: center;
}
.footer-logos img {
    width: 200px;
    margin: 20px;
}
.wrapper {
    margin: 0 auto;
}
.wrapper div{
    height: auto;
    max-width: 100%;
    margin: 0 50px;
}
h5 {
    width: 305px;
    font-family: Brandon Grotesque, sans-serif;
    font-size: 24px;
    font-weight: normal;
    color: var(--clr-dark-blue);
}
.footer-blk {
    height: 10px;
    background-color: var(--clr-dark-blue);
}
.footer-btm {
    height: 72.35px;
    background-color: var(--clr-lt-grey);
}
.footer-btm .wrapper {
    display: grid;
    justify-content: space-between;
    grid-template-columns: 2fr 2.1fr;
    grid-gap: 20%;
}
.footer-btm p {
    font-family: proxima-nova, sans-serif;
    font-size: 12px;
    line-height: 18px;
    max-width: 575px;
}
p.right{
    text-align: right;
    font-size: 14px;
}
@media screen and (max-width: 1335px) {
    .hero{
        width:100%;
    }
    .hero-header{
        width: 100vw;
        margin: 0px;
    }
    #career-focused {
        margin:40px auto -20px 10%;
    }
    #career-focused h2{
        max-width: 80%;
        padding-top: 0;
    }
    li a {
        width: 300px;
    }
    #ftr-img-lrg {
        content:url("../img/student-mobile.png");
    }
    footer section {
        display: block;
    }
    .footer-blue {
        margin: -7px auto auto auto;
    }
    .footer-bleft{
        margin: 0 0 0 60px;
    }
    h5 {
        margin: auto;
    }
    .footer-logo {
        height: 200px;
        margin: auto;
    }
    .footer-logo .wrapper {
        display: inline;
        padding: 50px 2%;
    }
    .wrapper {
        margin: 0 auto;
        width: 1400px;
    }
    .wrapper div{
        text-align: center;
        height: auto;
        max-width: 100%;
        margin: auto;
    }
    .wrapper div img{
        margin: 50px auto 0 auto;
    }
    .footer-btm .wrapper {
        display: inline;
        margin: auto;
    }
    .footer-btm p {
        margin: auto;
        padding:20px;
        width: 450px;
    }
    p.right{
        text-align: center;
    }
}
@media screen and (max-width: 1000px) {
    .hero-btn {
        margin-right: 10%;
    }
    .hero-text h1{
        max-width: 70vw;
        font-size: 60px;
    }
    #career-focused h2{
        max-width: 100%;
    }
}
@media screen and (max-width: 630px) {
    .hero-text h1{
        max-width: 70vw;
        font-size: 52px;
    }
    #career-focused{
        width: 450px;
        margin: auto 0 auto 0;
    }
    #discover a {
        margin: auto auto auto 270px;
    }
}
@media screen and (max-device-width: 1024px) { /* ipad pro/ipad */
    html{
        width: 149%;
        height: 149%;
    }
    .hero {
        margin: auto;
        width: 100%;
    }
    .hero-header{
        width:100%;
    }
    .hero-text h1{
        font-size: 93px;
        max-width: 80%;
    }
    footer {
        margin-top: -50px;
    }
    footer section{
        display: flex;
    }
    #career-focused {
        margin: auto;
    }
    #career-focused h2 {
        margin: auto;
        width: 700px;
        max-width: 700px;
        font-size: 50px;
    }
    #discover a{
        margin: 0 0 0 650px;
    }
    .social {
        margin-left: -900px;
    }
    .wrapper {
        width: 80%;
        padding-top: 0px;
    }
    .footer-logo{
        height: 200px;
    }
    .footer-btm .wrapper {
        display: grid;
        justify-content: space-between;
        grid-template-columns: 1.7fr 1.8fr;
        grid-gap: 25%;
    }
    .footer-btm p {
        font-size: 12px;
        line-height: 18px;
        max-width: 575px;
    }
    p.right{
        text-align: right;
        font-size: 14px;
    }
}
@media screen and (max-device-width: 480px) { /* phone */
    html{
        width: 100%;
    }
    .preheader-image{
        height: 0px;
        display: none;
    }
    .hero {
        background: transparent url('../img/hero-mobile.png') no-repeat;
        width: 100%;
        height: 1000px;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .hero-header{
        background-color: var(--clr-dark-blue-rgb);
        height: 220px;
        margin: auto;
    }
    .logo {
        margin: 75px 0px 0px 90px;
        top: 50px;
        content:url("../img/herzing-logo-3@2x.png");
        height: 80px;
    }
    .hero-btn {
        margin: 100px;
    }
    .hero-btn a {
        font-size: 16px;
        top: 60px;
        /*border: 3px solid var(--clr-blue);*/
        /*padding: 30px 40px 30px 30px;*/
    }
    .hero-text h1{
        margin-top: 500px;
        font-size: 120px;
        width: 1010px;
    }
    #ballot {
        margin-top: 120px;
        margin-bottom: 30px;
        height: 35px;
    }
    h2 {
        font-size: 24px;
    }
    h3 {
        font-size: 18px;
    }
    nav {
        width: 1200px;
    }
    li a {
        border: 3px solid var(--clr-dark-grey);
        font-size: 36pt;
        width: 700px;
        margin: 26px 16px;
        padding: 30px 25px 30px 25px;
    }
    footer {
        margin: auto;
    }
    footer section {
        display: block;
    }
    #career-focused {
        margin:120px auto -20px auto;
        width: 1440px;
    }
    #ftr-img-lrg {
        display: block;
        margin: 0 0 auto -1430px;
        width: 2900px;
    }
    footer h2 {
        font-size: 32px;
        margin: auto;
        padding-top: 70px;
        text-transform: none;
    }
    #career-focused h2{
        font-size: 32px;
    }
    h4 {
        font-size: 20px;
    }
    #discover a{
        margin: auto auto auto 15px;

    }
    #discover a img{
        width: 18px;
    }
    #chevron {
        margin: 30px;
    }
    .footer-blue {
        background-color: var(--clr-blue);
        height: auto;
        margin: -2px auto auto auto;
    }
    .footer-blue img { 
        margin: 34px auto auto 153px;
    }
    .social {
        margin: auto;
    }
    .footer-logo {
        height: auto;
        margin: auto;
    }
    .footer-logo .wrapper {
        display: inline;
        padding: 100px 2%;
        align-items: center;
        justify-content: space-between;
    }
    .wrapper {
        margin: 0 auto;
        width: 1400px;
    }
    .wrapper div{
        text-align: center;
        height: auto;
        max-width: 100%;
    }
    .wrapper div img{
        width: 550px;
        margin: 100px auto 0 auto;
    }
    .footer-logos {
        display: flex;
        flex-direction: column;
    }
    h5 {
        font-size: 18px;
        margin:auto;
    }
    .footer-blk {
        height: 20px;
        background-color: var(--clr-dark-grey);
    }
    .footer-btm {
        height: auto;
        background-color: var(--clr-lt-grey);
    }
    .footer-btm .wrapper {
        display: inline;
        margin: auto;
    }
    .footer-btm p {
        font-size: 16px;
        margin: auto;
        padding: 20px;
        max-width: 100%;
        width:auto;
        line-height: 1.5;
    }
    p.right {
        text-align: center;
    }
    .footer-bleft a img {
        height: 36px;
        width: auto;
        margin: 25px 15px;
        padding: 5px;
    }
    .footer-bleft{
        width: 100%;
        margin: auto;
        text-align: center;
    }
}