a, li {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* Global CSS that are applied for all screen sizes */

.nav {
}

    .nav ul {
        max-width: 1240px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .nav a {
        display: block;
        text-decoration: none;
        color: #fff;
        -webkit-transition: color .5s, background .5s, height .5s;
        -moz-transition: color .5s, background .5s, height .5s;
        -o-transition: color .5s, background .5s, height .5s;
        -ms-transition: color .5s, background .5s, height .5s;
        transition: color .5s, background .5s, height .5s;
    }

    .nav li.current a {
        color: #7fce3a;
    }

/* Remove the blue Webkit background when element is tapped */

a, button {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.nav button:focus {
    outline: none;
}

/* Hover effect for the whole navigation to make the hovered item stand out */

.no-touch .nav ul:hover a {
    color: rgba(249, 249, 249, .5);
}

    .no-touch .nav ul:hover a:hover {
        color: rgba(249, 249, 249, 0.99);
    }

.no-touch .nav ul:hover li.current a {
    color: #7fce3a;
}

/* For screen bigger than 800px */
@media (min-width: 660px) {

    /* Transforms the list into a horizontal navigation */
    .nav ul {
        float: right;
    }

    .nav li {
        float: left;
        padding-left: 1.3em;
    }

    .nav a {
        display: block;
        width: auto;
    }
}

/* The "tablet" and "mobile" version */

@media (max-width: 659px) {

    /* Instead of adding a border, we transition the background color */
    .no-touch .nav ul li a:hover,
    .no-touch .nav ul li a:active,
    .no-touch .nav ul li a:focus {
        background: #524e39;
    }

    .nav ul li {
        -webkit-transition: background 0.5s;
        -moz-transition: background 0.5s;
        -o-transition: background 0.5s;
        -ms-transition: background 0.5s;
        transition: background 0.5s;
    }

    .nav li.current a {
        background: #524e39;
    }
}

/* CSS specific to the 2x3 columns version */
/*@media (min-width:32.5em) and (max-width: 49.938em) {*/

/* Creating the 2 column layout using floating elements once again */
/*.nav li {
        display: block;
        float: left;
        width: 50%;
    }*/

/* Adding some padding to make the elements look nicer*/
/*.nav a {
        padding: 0.8em;
    }*/
/*}*/

/* Styling the toggle menu link and hiding it */
.nav .navtoogle {
    display: none;
    padding: 0.5em 0.8em;
    font-size: 1em;
    font-weight: normal;
    text-align: right;
    color: #fff;
    background: none;
    border: 1px solid #524e39;
    cursor: pointer;
    float: right;
    border-radius: 4px;
}

    .nav .navtoogle:hover {
        background-color: #524e39;
    }

.nav ul {
    clear: both;
}

.icon-menu {
    position: relative;
    top: 3px;
    line-height: 0;
    font-size: 1.6em;
}

@media (max-width: 659px) {

        /* Unhiding the styled menu link */
        .nav .navtoogle {
            margin: 0.3em;
            display: block;
        }

    /* Animating the height of the navigation when the button is clicked */

    /* When JavaScript is disabled, we hide the menu */
    .no-js .nav ul {
        max-height: 30em;
        overflow: hidden;
    }

    /* When JavaScript is enabled, we hide the menu */
    .js .nav ul {
        max-height: 0em;
        overflow: hidden;
    }

    /* Displaying the menu when the user has clicked on the button*/
    .js .nav .active + ul {
        max-height: 30em;
        overflow: hidden;
        -webkit-transition: max-height .4s;
        -moz-transition: max-height .4s;
        -o-transition: max-height .4s;
        -ms-transition: max-height .4s;
        transition: max-height .4s;
    }

    /* Adapting the layout of the menu for smaller screens : icon on the left and text on the right*/

    .nav a {
        padding: 1em;
    }

    /* Adding a left border of 8 px with a different color for each menu item*/
    .nav li {
        border-bottom: 1px solid #524e39;
        text-align: center;
    }

        .nav li:first-child {
            border-top: 1px solid #524e39;
        }

    /* make the nav bigger on touch screens */
    .touch .nav a {
        padding: 0.8em;
    }
}