.menu {
    display: block;
    margin: 0 0 -26px 0;
    color: #3d3c3f;
    float: right;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 50;
    margin-top: 10px;
}

.menu li a {
    font-weight: lighter;
    text-decoration: none;
    padding: 24px 12px 24px 12px;
    display: block;
    color: #3d3c3f;
    font-size: 18px;
}

.menu li a:hover, .menu li:hover > a {
    color: #e85145;
}


/* hide the second level menu */
.menu ul {
    display: none;
    margin: 0;
    padding: 0;
    width: 200px;
    position: absolute;
    top: 73px;
    left: 0px;
    z-index: 99999

}

/* display second level menu on hover */
.menu li:hover > ul {
    display: block;
}

.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.menu ul li a {
    font-size: 16px;
    font-weight: lighter;
    display: block;
    color: #e2e2e2;
    padding: 10px 12px 10px 12px;

    background-color: #e85145;
}

.menu ul li a:hover, .menu ul li:hover > a {
    background-color: #e85145;

    color: #e2e2e2;
}

/* change level 3 menu positions */
.menu ul ul {
    left: 200px;
    top: 0px;
}

.mobile-menu {
    display: none;
    color: #e85145;

}

.mobile-menu:hover {

    text-decoration: none;
    color: #e85145;
}

@media (max-width: 768px) {

    .menu {
        display: none;
        background: none
    }

    .mobile-menu {
        display: block;

    }

    nav {
        margin: 0;
        background: none;
    }

    .menu {
        padding-bottom: 25px !important;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
		background: #fff;
    }

    .menu li {
        display: block;
        margin: 0;
        color: black;
        padding: 10px;
        text-decoration: none;
        background: white;
        /* position: fixed; */
        top: 0;
        /* left: -10px; */
        right: 0;
        width: 100%;
        z-index: 1;
        text-align: center;
    }

    .menu li a {
        color: #3d3c3f;
        padding: 2px 0 2px 20px;
        font-size: 15px
    }

    .menu li a:hover, .menu li:hover > a {
        background: none;
        color: #e85145;
    }

    /*level 2 and 3 - make same width as all items*/
    .menu ul {
        display: block;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;

        border-bottom: none;
        border-top: none;
        border-left: none;
        border-right: none;

    }

    .menu ul ul {
        left: 0;
        border: none;
    }

    ul.menu li.current-menu-item a {
        color: #e85145;
        background: none;
    }

    .menu li li a {
        color: #3d3c3f;
        padding: 5px 0 5px 30px;
        border-top: none;
        background: none
    }

    .menu ul li a:hover, .menu ul li:hover > a {
        background: none;
        color: #e85145;

    }

}