@font-face {
    font-family: IBMPlexSans;
    src: url(../../fonts/GoogleFonts/IBMPlexSans-Regular.ttf);
}

/* Top Navigation bar by Bootstrap */
.navbar {
    border: 1px solid transparent;
}

.navbar-nav > li > a {
    text-decoration: none;
}

.navbar-toggle {
    float: left;
    margin-left: 10px;
}

/* Middle Navigation bar custom made */
.middlenav {
    overflow: hidden;
    background-color: #fcfcfa;
    position: relative;
    top: 3.0em;
    margin-bottom: 48px;
    border-bottom: thin #e6e6e6 solid;
    z-index: 1;
}

    .middlenav.twocol {
        background-color: white;
        top:0.0em;
        margin-bottom:0px;
    }

    .middlenav.twocol li:not(:first-child) {
        margin-left:15px;
    }

    .middlenav.twocol a {
        background-color: white;
        top: 0.0em;
        margin-bottom: 0px;
        padding-left:0px;
        padding-right:0px;
    }

    .middlenav a {
        font-family: IBMPlexSans;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #121212;
        float: left;
        display: block;
        padding: 0 15px;
        text-decoration: none;
        line-height: 2em;
    }

        .middlenav a:hover {
            background-color: #eee;
            border-bottom: 3px solid #ddd;
        }

        .middlenav a.active {
            color: #000;
            font-weight: bold;
            border-bottom: 3px #4CAF50 solid;
        }

    .middlenav .icon {
        display: none;
    }

@media all and (min-width:768px) {
    .navbar-nav > li > a {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}


@media screen and (min-width: 1024px) {
    .vertical-divider {
        overflow: hidden;
        position: relative;
        padding-right: 20px;
        padding-left: 0;
        border-right: thin solid #e6e6e6;
        border-left: none;
        height: 100%;
    }
}