@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";


.nav {
    position: relative;
    width:100%;
    padding: 0px;
    z-index:99999;
    
}

    .nav ul {
        z-index: 100;
        margin: 0;
        padding: 0;
        position: relative;
        list-style: none;
    }

        .nav ul li {
            position: relative;
            width: 100%;
        }

            .nav ul li a {
                display: block;
                position: relative;
                color: white;
                padding: 14px 0px;
                color: #000;
                font-size:14px;
                text-decoration: none;
                border-bottom: 1px solid #ccc;
            }

            .nav ul li:last-child a {
                border-bottom: none;
            }


            .nav ul li a:link, .nav ul li a:visited {
                color: #333;
            }

            /* Top level menu items link style on hover and when active */
            .nav ul li:hover > a {
                color: #007CFB;
                background-color: #fff;
            }

            /* Sub ULs style */
            .nav ul li ul {
                position: absolute;
                left: -5000px;
                top: 0;
                opacity: 0;
                width: 230px;
                visibility: hidden;
                background-color: #fff;
                border-radius: 4px;
                padding: 5px 10px;
                -webkit-box-shadow: 0px 5px 13px -1px rgba(122,121,122,1);
                -moz-box-shadow: 0px 5px 13px -1px rgba(122,121,122,1);
                box-shadow: 0px 5px 13px -1px rgba(122,121,122,1);
                -webkit-transition: opacity .3s, visibility 0s .3s, left 0s .3s;
                transition: opacity .3s, visibility 0s .3s, left 0s .3s;
            }

            /* First Sub Levels UL style on hover */
            .nav ul li:hover > ul {
                visibility: visible;
                left: 100%;
                opacity: 1;
                -webkit-transition: opacity .5s;
                transition: opacity .5s;
            }

            /* Sub level Menu list items (alters style from Top level List Items) */
            .nav ul li ul li {
                display: list-item;
                float: none;
            }

                /* 2nd and beyond Sub Levels vertical offset after 1st level sub menu */
                .nav ul li ul li ul {
                    top: 0;
                    left: 100%;
                }

        .nav ul ul li:hover > a {
            /*background: #52616a;*/
        }

        .nav ul ul li:hover > ul {
            left: 100%;
        }

        .nav ul li ul li a {
            padding: 10px;
            margin: 0;
            color: #333;
            /*background: #4ea1d3;*/
            border-right: none;
            border-top-width: 0;
        }

        .nav ul li > a {
            padding-right: 25px;
        }

            .nav ul li > a:only-child {
                padding-right: 10px;
            }

            .nav ul li > a:after {
                font-family: 'FontAwesome';
                font-weight: 100;
                font-style: normal;
                content: "\f054";
                color: #b2b2b2;
                margin: 0px 0px 0px 10px;
                text-decoration: none;
                position: absolute;
                height: 0;
                width: 0;
                top: 35%;
                right: 20px;
            }

            .nav ul li > a:only-child:after {
                display: none;
            }

@media (max-width: 923px) {


    .nav ul li:nth-last-of-type(-n+1) ul li:hover > ul {
        left: -100%;
    }
}

@media (max-width: 500px) {

    .nav {
        width: 100%;
    }

        .nav ul li > a:after {
            /* add arrow inside LIs */
            content: "";
            position: absolute;
            height: 0;
            width: 0;
            border: 5px solid transparent;
            border-left-color: transparent;
            border-top-color: #fff;
            top: 40%;
            right: 8px;
        }

        .nav ul li {
            position: static;
        }

            .nav ul li ul {
                width: 100%;
                border-top: 2px solid rgba(0,0,0,.6);
                /* change menu reveal type from "visibility" to "display". Former seems to cause browser to jump to top of page sometimes when menu header is tapped on */
                display: none;
            }

            .nav ul li:hover > ul {
                display: block;
                left: 0 !important;
                top: auto;
                box-shadow: 0 0 12px gray;
            }