#layout,
#menu,
.menu-link {
    -webkit-transition: all 0.35s ease-out;
    -moz-transition: all 0.35s ease-out;
    -ms-transition: all 0.35s ease-out;
    -o-transition: all 0.35s ease-out;
    transition: all 0.35s ease-out;
}

#layout {
    position: relative;

}

#layout.active #menu {
    right: 180px;
    width: 180px;
}

#layout.active .menu-link {
    position: fixed;
}

#menu {
    margin-right: -180px;
    width: 180px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: #763200;
    overflow-y: auto;
}
    
#menu a {
    display: inline-block;
    color: #FFF;
    margin: 0.5em 1em;
    border-bottom: 1px solid #FFF;
    padding: 0;
}

#menu .pure-menu,
#menu .pure-menu ul {
    border: none;
    background: transparent;
}

#menu .pure-menu ul,
#menu .pure-menu .menu-item-divided {
    /* border-top: 1px solid #333; */
}
        
#menu .pure-menu li a:hover,
#menu .pure-menu li a:focus {
    background: none;
    color: #2e992e;
    border-bottom: 1px solid #2e992e;
}

#menu .pure-menu-selected a {
    color: #fff;
}

.menu-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
}

.menu-link:hover,
.menu-link:focus,
.menu-link:active {
    background: none;
    outline: 0;
}

.menu-link .bar {
    background-color: #333;
    margin: 5px 0;
    width: 38px;
    height: 2px;
    pointer-events: none;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    -ms-transition: all .35s;
    transition: all .35s;
}

.menu-link.active .bar {
   display: flex;
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
   position: relative;
   opacity: 1;
}

.menu-link.active span:nth-child(1),
.menu-link.active span:nth-child(3) {
   -webkit-transition: transform .35s ease-in-out;
   -moz-transition: transform .35s ease-in-out;
   -o-transition: transform .35s ease-in-out;
   transition: transform .35s ease-in-out;
}

.menu-link.active span:nth-child(1) {
    position: absolute;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    opacity: 0.9;
}

.menu-link.active span:nth-child(2) {
    display: none;
}

.menu-link.active span:nth-child(3) {
    position: absolute;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    opacity: 0.9;
}


/* Media queries */

@media (min-width: 48em) {

    #layout {
        /*padding-right: 180px;  left col width "#menu" */
        /* left: 0; */
    }
    #menu {
        /* right: 180px; */
        background: none;
        position: relative;
        width: 100%;
        margin-right: 0;
        overflow: visible;
    }

    #menu a {
        color: #000;
        font-weight: bold;
        margin: .5em 1em;
        padding: 0;
    }

    #menu a {
        border-bottom: 1px solid #000;
    }

    .menu-link {
        /* position: fixed; */
        /* right: 180px; */
        display: none;
    }

    #layout.active .menu-link {
        right: 180px;
    }
}

@media (max-width: 48em) {
    #layout.active {
        position: relative;
        right: 180px;
        -webkit-transition: all .35s ease-out;
        -moz-transition: all .35s ease-out;
        -ms-transition: all .35s ease-out;
        -o-transition: all .35s ease-out;
        transition: all .35s ease-out;
    }
}