.nav-toggle-button {
    width: 24px;
    height: 20px;
    position: relative;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
}

.span {
    background-color: black;
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
}

.span1 {
    top: 0px;
    transform-origin: left center;
}

.span2 {
    top: 8px;
    transform-origin: left center;
}

.span3 {
    top: 16px;
    transform-origin: left center;
}

.nav-toggle-button.open .span1 {
    transform: rotate(45deg);
    top: 0px;
    left: 4px;
}

.nav-toggle-button.open .span2 {
    top: 20px;
    position: relative;
    opacity: 0;
}

.nav-toggle-button.open .span3 {
    transform: rotate(-45deg);
    top: 17px;
    left: 4px;
}

.menu {
    position: absolute;
    top: 5.8em;
    z-index: 3;
    box-shadow: 3px 3px 12px #333333;
    text-transform: uppercase;
}

    .menu ul {
        padding: 0;
        margin: 0;
        background-color: #f6f6f6;
        /*border-bottom: 1px solid #34495E;*/
    }

        .menu ul li {
            list-style: none;
            border-right: none;
            border-bottom: 1px solid #555;
            font-size: 14px;
            line-height: 21px
        }

            .menu ul li a {
                display: block;
                padding: 10px 20px;
                color: #363636;
            }

                .menu ul li a:hover {
                    text-decoration: none;
                    color: #c51718;
                }

            .menu ul li ul {
                border-bottom: none;
            }

                .menu ul li ul li {
                    border-bottom: none;
                    font-size: 12px;
                    line-height: 10px
                }

    .menu li li {
        margin-left: 14px;
    }

    .menu ul {
        display: none
    }