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


    .nav-mobile {
        display: block;
    }

    nav {
        width: 100%;
        //padding: 70px 0 15px;
    }

        nav ul {
            display: none;
        }

            nav ul li {
                float: none;
            }

                nav ul li a {
                    padding: 15px;
                    line-height: 20px;
                }

                nav ul li ul li a {
                    padding-left: 30px;
                }

    .nav-dropdown {
        position: static;
    }
}




#nav-toggle {
    position: absolute;
    left: 18px;
    top: 22px;
    cursor: pointer;
    padding: 10px 35px 16px 0px;
}

    #nav-toggle span,
    #nav-toggle span:before,
    #nav-toggle span:after {
        cursor: pointer;
        border-radius: 1px;
        height: 5px;
        width: 35px;
        background: #ffffff;
        position: absolute;
        display: block;
        content: '';
        transition: all 300ms ease-in-out;
    }

        #nav-toggle span:before {
            top: -10px;
        }

        #nav-toggle span:after {
            bottom: -10px;
        }

    #nav-toggle.active span {
        background-color: transparent;
    }

        #nav-toggle.active span:before, #nav-toggle.active span:after {
            top: 0;
        }

        #nav-toggle.active span:before {
            transform: rotate(45deg);
        }

        #nav-toggle.active span:after {
            transform: rotate(-45deg);
        }