/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */

.home-menu .pure-menu-heading, .home-menu .pure-menu-link {
    color: white;
    /*float: left;*/
    text-transform: lowercase;
    font-weight: 300;
}

.home-menu .pure-menu-heading {
    font-weight: 400;
}

.home-button {
    float: left;
    position: absolute;
    border-radius: 0px;
}

.home-menu li a:hover,
.home-menu li a:focus,
.home-button.pure-button:hover,
.home-button.pure-button:focus {
    background: #4C9CD0;
    border: none;
}

@media (min-width: 768px) {

    /* We can align the menu header to the left, but float the
    menu items to the right. */
    .home-menu {
        text-align: left;
    }

        .home-menu .pure-menu-list {
            float: right;
            display: inline-block;
        }
            .home-menu .pure-menu-list .pure-menu-item {
                display: inline-block;
            }

        .home-menu .pure-menu-heading {
            display: inline-block;
        }


    .home-button {
        display: none;
    }        
}

@media (max-width: 767px) {

    div.home-menu {
        /*display: none;*/
        height: 100%;
        position: absolute;
        left: -200px;
        z-index: 100;
    }
        .home-menu .pure-menu-list {
            float: none;
            width: 200px;
        }


    div.home-menu.left-200,
    .home-button.left-200 {
        left: 200px;
    }

    div.home-menu.left-0 {
        left: 0px;
    }

    .home-button {
        display: inherit;
        left: 0px;
   }

   .home-menu a.pure-menu-heading {
    border-bottom: 1px solid white;
   }

}