@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
body
{
    overflow-x: hidden;
}
.slide-menu-toggle
{
    display: none;
}
@media (max-width: 850px)
{
    .slide-menu-toggle
    {
        display: block;
    }
}
.slide-menu-toggle.left
{
    float: left;
}
.slide-menu-toggle.right
{
    float: right;
}
#slide-menu
{
    position: fixed;
    top: 0;
    bottom: 0;

    overflow: auto;

    width: 225px;

    -webkit-transition: all .2s ease-in;
         -o-transition: all .2s ease-in;
            transition: all .2s ease-in;

    background-color: #222;
}
#slide-menu ul
{
    margin: 0;
    padding: 0;
}
#slide-menu ul > li
{
    list-style: none;
}
#slide-menu ul > li > a
{
    line-height: 1;

    display: block;

    padding: 2rem;

    color: #eee;
    border-top: 1px solid #333;
}
#slide-menu ul > li > a:hover
{
    text-decoration: none;

    background-color: #333;
}
#slide-menu.right
{
    right: -225px;
}
#slide-menu.right.move
{
    right: 0;
}
#slide-menu.left
{
    left: -225px;
}
#slide-menu.left.move
{
    left: 0;
}
#page-wrap
{
    position: relative;
    top: 0;
    right: 0;
    left: 0;

    -webkit-transition: all .2s ease-in;
         -o-transition: all .2s ease-in;
            transition: all .2s ease-in;
}
#page-wrap.move
{
    position: fixed;

    -webkit-transition: all .2s ease-in;
         -o-transition: all .2s ease-in;
            transition: all .2s ease-in;
}
#page-wrap.move.left
{
    right: -225px;
    left: 225px;
}
#page-wrap.move.right
{
    right: 225px;
    left: -225px;
}