nav#navmenu {
    margin-top: 25px;
}


    nav#navmenu * {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        font-size: 15px;
        line-height: 2em;
        color: #a0a0a0;
    }

    nav#navmenu a {
        color: #a0a0a0;
        background-color: transparent;
        text-decoration: none;
        margin: 15px 0px;
        border-bottom: 0px solid red;
        padding-bottom: 5px;
    }

        nav#navmenu a:hover {
			cursor: pointer;
            color: #fff;
            background-color: transparent;
            border-bottom: 1px solid red;
        }

    nav#navmenu > ul > li {
        position: relative;
        display: inline-block;
        float: left;
        list-style-type: none;
        margin-top: 0px; /* this set spacing from the heading*/
        margin-bottom: 5px;
        margin-left: 5px;
        /*padding: 5px 30px;*/
        padding: 5px 35px;
        background: #0D2140;
        border-radius: 5px;
    }

    nav#navmenu span {
        display: inline-block;
    }

        nav#navmenu span:hover {
			cursor: pointer;
            color: #fff;
        }

    nav#navmenu .sub-menu {
        display: none;
        position: absolute;
        color: white;
        list-style-type: none;
        background-color: #000000;
        margin-top: 3px;
        margin-left: -35px;
        padding: 15px 30px 15px 30px;
        border-radius: 0 0 7px 7px;
        opacity: 0;
        z-index: 999;
        -webkit-animation: fadein .75s; /* Safari and Chrome */
        -moz-animation: fadein .75s; /* Firefox */
        -ms-animation: fadein .75s; /* Internet Explorer */
        -o-animation: fadein .75s; /* Opera */
        animation: fadein .75s;
    }

        nav#navmenu .sub-menu li {
            margin: 5px 0;
        }

    nav#navmenu ul > li:hover {
        background-color: #000000;
    }

    nav#navmenu > ul > li:hover .sub-menu {
        display: block;
        opacity: 1;
    }

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Firefox */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Safari and Chrome */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Opera */
@-o-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



@media screen and (max-width: 768px) {

    nav#navmenu {
        margin-top: 10px;
    }

        nav#navmenu > ul > li {
            position: relative;
            display: block;
            float: left;
            list-style-type: none;
            margin-top: 10px; /* this set spacing from the heading*/
            margin-bottom: 5px;
            margin-left: 5px;
            padding: 5px 5px;
            background: #1F2C43;
            border-radius: 5px;
        }

        nav#navmenu .sub-menu {
            margin-left: -10px;
            padding: 5px 10px 5px 10px;
            border-radius: 7px;
            opacity: 0;
            z-index: 999;
            -webkit-animation: fadein .75s; /* Safari and Chrome */
            -moz-animation: fadein .75s; /* Firefox */
            -ms-animation: fadein .75s; /* Internet Explorer */
            -o-animation: fadein .75s; /* Opera */
            animation: fadein .75s;
        }

        nav#navmenu > ul > li {
            position: relative;
            display: block;
            float: left;
            list-style-type: none;
            margin-top: 0px; /* this set spacing from the heading*/
            margin-bottom: 5px;
            margin-left: 5px;
            padding: 5px 10px;
            background: #1F2C43;
            border-radius: 5px;
        }
}