body {
    width: 100%;
}

a {
    text-decoration: inherit;
    color: inherit;
}

nav {
    display: block;
    position: relative;
    white-space: nowrap;
    height: 25px;
    width: 250px;

    transition: 0.2s width ease;
}

nav ul {
    display: none;
}

nav ul.is-root,
nav.is-show ul {
    display: block;
}

nav ul {
    position: absolute;
    margin: 0;
    padding: 0;

    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

nav ul.is-transition {
    transition: 0.2s transform ease,
                0.2s opacity ease;
}

nav ul.is-middle { transform: translateY(-50%) translateX(0) }
nav ul.is-left { transform: translateY(-50%) translateX(-20px) }
nav ul.is-right { transform: translateY(-50%) translateX(20px) }

nav ul.is-left,
nav ul.is-right,
nav div.is-back {
    opacity: 0;
    pointer-events: none;
}

nav ul li {
    display: inline;
    cursor: pointer;
    margin-right: 20px;
	-webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
}

nav ul li:last-child {
    margin-right: 0;
}

/* BACK BUTTON */
nav .is-back {
    display: block;
    cursor: pointer;
    position: absolute;
    z-index: 9999;
    background: url('ui/arrow_left.svg');
    background-size: 20px 20px;
    height: 20px;
    width: 20px;

    left: -30px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    
    transition: 0.1s transform ease,
                0.1s opacity ease;
}

nav div.is-show {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: all;
}