#logo {
    display: inline-block;
    position: relative;
    top: 14px;
}
    #logo img {
        width: 260px;
        max-width: 57vw;
        height: auto;
    }
#logo-mobile-menu{
    margin:auto;
}
.mobile-nav-hidden {
    display:none;
}
#mobile-nav {
    top:70px;
    background: #F2FFFE;
    width: 100%;
    z-index: 50;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .0), 0 6px 6px rgba(0, 0, 0, 0.1);
}
#menu-drop-down-button { 
    cursor: pointer;
    display: none !important;
    margin: 23px 0 0 10px;
    height: 25px;
}
#top-nav {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 500;
    display: inline-flex;
    width: 100%;
    padding: 5px 0 0 0;
    background-color: #F2FFFE;
}
    #top-nav > div {
        margin: auto;
        padding: 0 6px;
        width: 100%;
        max-width: 1200px;
    }
    #top-nav a{
        text-decoration:none;
    }
#side-nav-list {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    justify-content: flex-start;
    float: right;
}
    #side-nav-list li {
        margin: 15px 10px 0 10px;
    }
#nav-list {
    margin: 10px 10px 0 10px;
    padding: 0;
    list-style: none;
    display: inline-flex;
    text-align: center;
    margin-right:19px;
}
#log-in-button{
    cursor:pointer;
}
.login-blocker {
    background-color: transparent !important;
    z-index: 550 !important;
}
.sign-up-prompt-blocker {
    background-color: transparent !important;
    z-index: 550 !important;
    max-width:1550px;
}
.login-blocker:before, .sign-up-prompt-blocker:before {
    vertical-align: inherit !important;
    height: 0 !important;
}
#divModalLogin {
    border-radius: 0;
    -webkit-border-radius: 0;
    left: 250px;
    top: 65px;
    max-width: 350px !important;
    padding-bottom: 25px;
}
#EmailModalLogin, #PasswordModalLogin {
    padding-left: 45px;
}
#divSignUpPrompt {
    padding: 38px 28px;
    width: 466px;
    border-radius: 4px;
    text-align: center;
    top: 75px;
    float:right;
}
#divModalLogin .left-icon-mail {
    top: 28px;
    left: 16px;
}
#divModalLogin .left-icon-lock {
    top: 28px;
    left: 16px;
}
#divModalLogin .infobutton {
    top: 26px;
    left: 255px;
}
#divModalLogin #login-submit-button {
    border-radius: 10px;
    height: 44px;
}
#divModalLogin a.inversegreenbutton_header {
    border-radius: 10px;
    height: 24px;
}

.underline-item {
    z-index: 500;
    display: flex;
    flex-direction: column;
}
    #nav-list svg.arrow-down {
        position: relative;
        top: 4px;
        cursor: pointer;
    }

    #nav-list > li {
        position: relative;
        padding: 15px;
    }

        #nav-list > li.underline-item > a {
            color: #000;
            font-weight: 500;
            display: inline-block;
            position: relative;
            white-space: nowrap;
            transition: width 0.3s ease 0s, left 0.3s ease 0s;
        }

        #nav-list a ~ .hover-element {
            visibility: hidden;
            margin: 2px;
        }

    #nav-list li:hover .hover-element {
        visibility: visible;
    }

#nav-list li:hover div.sub-nav-element {
    visibility: visible !important;
        transition: visibility linear;
        transition-delay: .2s;
}

    #mobile-nav-list .click-element {
        display:none;
        margin: auto;
    }
.sub-nav-element {
    position: absolute;
    top: 0;
    margin-top: 35px;
    text-align: left;
    z-index: 300;
    visibility: hidden;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(221, 221, 221);
    filter: drop-shadow(rgba(0, 0, 0, 0.25) 0px 1px 7px);
    transform: translateY(8%);
    padding-bottom: 10px;
    transition: visibility 0.2s linear;
}
.sub-nav-element-two-column{
    margin-top:30px;
}

.sub-nav-element-two-column {
    width: 530px;
}
    .sub-nav-element span:hover {
        color: #30CEBB;
    }
    .sub-nav-element > div, .sub-nav-mobile-element > div {
        display: flex;
        -webkit-box-pack: center;
        -webkit-box-align: stretch;
        align-items: stretch;
        box-sizing: border-box;
    }

        .sub-nav-element > div div, .sub-nav-mobile-element div{
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }

            .sub-nav-element > div div ul, .sub-nav-mobile-element ul {
                padding: 5px;
            }

            .sub-nav-element > div div li, .sub-nav-mobile-element  li {
                display: list-item !important;
                list-style: none;
                text-align: left;
                padding: 5px;
            }
                .sub-nav-element > div div li a, .sub-nav-mobile-element  li a {
                    color: #000;
                    text-decoration:none;
                }
                .sub-nav-element > div div li span, .sub-nav-mobile-element  li span {
                    white-space: nowrap;
                    padding-right: 25px;
                    font-weight: bold;
                    display: inline-block;
                    margin-bottom: 4px;
                }
                .sub-nav-element > div div li div, .sub-nav-mobile-element  li div {
                    color: #90A19B;
                    line-height: 1.5;
                }
                .sub-nav-element > div div li a > ul, .sub-nav-mobile-element li a > ul {
                    list-style: none;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                }
.menu-icon-wrapper {
    display: block;
    box-sizing: border-box;
    padding: 10px;
    width: 45px;
    height: 45px;
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
    .menu-icon-wrapper:hover {
        opacity: 60% 
       
    }
    .menu-icon-wrapper.scholarship-search-icon-wrapper {
        background-color: #E9FBF9;
        background-image: url("/img/icons/Search schl.svg");
    }
    .menu-icon-wrapper.scholarship-directory-icon-wrapper {
        background-color: #EFF6FF;
        background-image: url("/img/icons/Scholarship directory.svg");
    }
    .menu-icon-wrapper.college-matches-icon-wrapper {
        background-color: #EFF6FF;
        background-image: url("/img/icons/college-matches.svg");
    }
    .menu-icon-wrapper.college-search-icon-wrapper {
        background-color: #F3F3F3;
        background-image: url("/img/icons/Search College.svg");
    }
    .menu-icon-wrapper.student-loans-icon-wrapper {
        background-color: #F4F4F4;
        background-image: url("/img/icons/Student Loans.svg");
    }
    .menu-icon-wrapper.student-resources-icon-wrapper {
        background-color: #FFF7EB;
        background-image: url("/img/icons/Student resources.svg");
    }
    .menu-icon-wrapper.blog-icon-wrapper {
        background-color: #F9EFFA;
        background-image: url("/img/icons/News.svg");
    }
    .menu-icon-wrapper.educator-home-icon-wrapper {
        background-color: #F4F2F3;
        background-image: url("/img/icons/educator-home.svg");
    }
    .menu-icon-wrapper.educator-login-icon-wrapper {
        background-color: #EEF6FF;
        background-image: url("/img/icons/Educator Login.svg");
    }
    .menu-icon-wrapper.educator-resources-icon-wrapper {
        background-color: #FFF7E8;
        background-image: url("/img/icons/Schedule Demo.svg");
    }
    .menu-icon-wrapper.provider-home-icon-wrapper {
        background-color: #E5FCF7;
        background-image: url("/img/icons/Submit a scholarship.svg");
    }
    .menu-icon-wrapper.provider-login-icon-wrapper {
        background-color: #F1F4F3;
        background-image: url("/img/icons/Provider login.svg");
    }
    .menu-icon-wrapper.provider-guidelines-icon-wrapper {
        background-color: #F9EFFD;
        background-image: url("/img/icons/Guidelines.svg");
    }
    .menu-icon-wrapper.calculators-icon-wrapper {
        background-color: #F4F4F4;
        background-image: url("/img/icons/calculator.svg");
    }
    .animate-menu-icon-open {
        animation: createx .5s forwards;
        margin: 30px 0 0 10px !important;
    }
    .animate-menu-icon-open > img:nth-child(3) {
        display: none;
        grid-column-start: first-col;
        grid-row-start: first-row;
        transition: display .25s linear;
    }
    .animate-menu-icon-open img:nth-child(1) {
       animation:createxline1 .5s forwards;
    }
    .animate-menu-icon-open img:nth-child(2) {
        animation:createxline2 .5s forwards;
    }
    .animate-menu-icon-close {
        animation: restorehamburger .5s forwards;
    }
    .animate-menu-icon-close > img:nth-child(3) {
        display: block;
        animation: restorehamburgerlines .5s forwards;
    }
    .animate-menu-icon-close img:nth-child(1) {
        animation: restorehamburgerlines .5s forwards;
    }
    .animate-menu-icon-close img:nth-child(2) {
        animation: restorehamburgerlines .5s forwards;
    }
#mobile-nav-list {
    list-style: none;
    padding: 0 5px;
    margin:0;
}
#mobile-nav-list > li {
    padding:25px 0;
    font-weight:bold;
    font-size:1.2rem;
    width:100%;
}
    #mobile-nav-list > li > div:first-child{
        display:table;
        border-collapse:collapse;
        width:100%;
    }
    #mobile-nav-list > li > div:first-child img {
        float: right;
        margin-right: 10px;
    }
    #mobile-nav-list > li > div:first-child > div:nth-child(1){
        display:inline-block;
    }
    #mobile-nav-list > li > div:first-child > div:nth-child(2) {
        display:table-cell;
        vertical-align:top;
    }
    #mobile-nav-list > li > div:nth-child(2) > ul {
        list-style: none;
    }
    #mobile-nav-list > li > div:nth-child(2) > ul > li  ul >li {
        display: list-item !important;
        list-style: none;
        text-align: left;
        padding: 5px;
    }
    #mobile-nav > #mobile-grid-container{
        display:grid;
        height:100%;
        min-height:inherit;
    }
        #mobile-nav > #mobile-grid-container > div {
            display: inline-block;
            align-self: flex-end;
            margin: 15px auto;
        }
            #mobile-nav > #mobile-grid-container > div a {
                display: inline-block;
                margin: 0 10px;
            }
    @keyframes createx {
        100% {
            height: 0;
            display: grid;
            grid-template-columns: [first-col] 100%;
            grid-template-rows: [first-row] 3px;
        }
    }

    @keyframes createxline1 {
        100% {
            transform: rotate(45deg);
            grid-column-start: first-col;
            grid-row-start: first-row;
        }
    }

    @keyframes createxline2 {
        100% {
            transform: rotate(-45deg);
            grid-column-start: first-col;
            grid-row-start: first-row;
        }
    }

    @keyframes restorehamburger {
        1% {
            height: 0;
            display: grid;
            grid-template-columns: [first-col] 100%;
            grid-template-rows: [first-row] 3px;
        }

        100% {
            height: 23px;
            display: inline-grid;
            grid-template-columns: initial;
            grid-template-rows: initial;
        }
    }

    @keyframes restorehamburgerlines {
        1% {
            transform: rotate(0deg);
            grid-column-start: first-col;
            grid-row-start: first-row;
        }

        100% {
            grid-column-start: initial;
            grid-row-start: initial;
        }
    }

    @media(max-width:1250px) {
        #side-nav-list li:nth-child(1) {
            display: none;
        }

        #side-nav-list li {
            position: relative;
        }

        #profile-icon {
            position: relative;
            top: 6px;
        }

        #nav-list {
            margin: 0;
        }
            #nav-list > li {
                padding:10px;
            }
        #top-nav a.greenbutton_header > span {
            display: none;
        }
        .login-button span {
            display: none;
        }
        #top-nav a.greenbutton_header {
            padding: 6px 10px;
        }
        .login-button {
            padding: 4px 9px !important;
        }
    }
    /*Breadcrumb*/
    #bread-crumb {
        background-color: #F2F4F4;
    }
    #bread-crumb >div{
        max-width:1200px;
        margin:auto;
        padding:10px 6px;
    }
        #bread-crumb > div a {
            padding: 0 10px;
            text-decoration: none;
            color: #26302F;
        }
        #bread-crumb > div a:hover {
            text-decoration: none;
            color: #26302F;
        }
        #bread-crumb > div a:visited {
            text-decoration: none;
            color: #26302F;
        }
        #bread-crumb > div a:first-child {
            padding: 0 10px 0 0;
            text-decoration: none;
            color: #26302F;
        }
        #bread-crumb > div span {
            padding: 0 10px;
            color: #26302F;
        }

    @media (hover: none) {
        #bread-crumb {
            overflow-x: auto;
            background: linear-gradient(to right, #F2F4F4 50%, white);
        }

        #bread-crumb::-webkit-scrollbar {
            display: none;
        }

        #bread-crumb > div {
            display: flex;
            width: max-content;
        }

        #bread-crumb > div a, #bread-crumb > div span {
            width: max-content;
            flex-shrink: 0;
        }
    }

    @media(max-width:1000px) {
        #menu-drop-down-button {
            display: inline-grid !important;
        }

        #nav-list {
            display: none;
        }
        #top-nav > div {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 70px;
        }
        #side-nav-list {
            justify-content: flex-start;
            min-height: 76px;
        }

        #profile-icon {
            top: 0;
        }

        #logo {
            margin: auto 6px;
            top: 0;
        }

        .blocker:before {
            vertical-align: middle !important;
            height: 100% !important;
        }

        #divModalLogin {
            left: 0;
            top: 0;
            max-width: 500px !important;
        }
    }

    @media(max-width:600px) {
        html{
            overflow-x:hidden;
        }
        #top-nav a.greenbutton_header {
            font-size: .75rem;
        }
        #top-nav {
            padding: 0;
        }

            #top-nav > div {
                padding: 0;
                justify-content:unset;
            }

        .large-input-box input[type=text]::placeholder {
            font-size: 1rem;
        }
        #divSignUpPrompt {
            vertical-align:top;
            width: 325px;
            float: unset;
        }
        .login-button {
            font-size: .75rem !important;
        }
        #side-nav-list li {
            margin: 15px 3px 0px 3px;
        }
        #logo {
            margin: auto 2px;
            justify-content : center;
            flex: 2;
            display: flex;
        }
        #logo img {
            max-width: 50vw;
        }
    }