/*

    #### Desktop CSS Layout code

*/

.fluid-nav {
    background: #1B2221;
    opacity: 0.75;
    width: 100%;
    height: 8vh;
}

.ul-wrapper {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

.ul-wrapper .nav-links {
    line-height: 8vh;
}

.nav-links {
    height: 8vh;
    width: 12%;
}

.nav-links a {
    height: 6vh;
    line-height: 8vh;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1em;
    color: #FFF;
    text-align: center;
}

.nav-links:nth-child(3) {
    height: 8vh;
    width:45%;
    display: flex;
    justify-content: center;
}

.nav-links:nth-child(3) > a {
    height: 6vh;
    width: 25%;
    text-align: center;
}

.nav-links a:active,
.nav-links a:hover {
    color: #8DE3C5;
    border-bottom: 5px solid #8DE3C5
}

.nav-links:link,
.nav-links:visited {
    color: #FFF;
}




/*  ------ layout for 750px screens  ----- */
@media (max-width: 750px) {
    .fluid-nav{
        width:100%;
        height: 250px;
        opacity: 1;
    }

    .ul-wrapper {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }
    
    .nav-links {
        height: 75px;
        width: 35%;
    }
    
    .nav-links a {
        height: inherit;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 1.2em;
        color: #FFF;
        text-align: center;
        height: 50px;
        line-height: 50px;
    }

    .nav-links:nth-child(3) {
        height: 75px;
        width: 35%;
        justify-content: center;
    }

    .nav-links:nth-child(3) > a {
        width: 35%;
    }

    .nav-links:active,
    .nav-links:hover {
        border: none;
    }

    .nav-links a:active,
    .nav-links a:hover {
        color: #fff;
        background: #8DE3C5;
    }


    .nav-links:link,
    .nav-links:visited {
        color: #FFF;
    }
}