/* Base code compiled from https://codepen.io/mranenko/pen/wevamj */

.nav-toggle {
	box-sizing: border-box;
	text-align: left;
	margin: 0;
	padding: 0;
	cursor: pointer;
	height: 2rem;
	left: 2rem;
	position: fixed;
	top: 1.5rem;
    width: 8vw;
    max-width: 48px;
	z-index: 1100;
}

.nav-toggle:hover {
    opacity: 0.8;
    left: 2rem;
}
.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::after,
.nav-toggle .nav-toggle-bar::before {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background: #ffffff;
    content: '';
    height: 0.4rem;
    transition: all .5s;
    width: 100%;
}
.nav-toggle .nav-toggle-bar {
    margin-top: 0;
}
.nav-toggle .nav-toggle-bar::after {
    margin-top: 0.8rem;
}
.nav-toggle .nav-toggle-bar::before {
    margin-top: -0.8rem;
}
.nav-toggle.expanded {
    position: fixed;
}
.nav-toggle.expanded .nav-toggle-bar {
    background: transparent;
}
.nav-toggle.expanded .nav-toggle-bar::after, .nav-toggle.expanded .nav-toggle-bar::before {
    margin-top: 0;
}
.nav-toggle.expanded .nav-toggle-bar::after {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    background-color: #1A1A1A;
    transform: rotate(45deg);
}
.nav-toggle.expanded .nav-toggle-bar::before {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    background-color: #1A1A1A;
    transform: rotate(-45deg);
}

/* nav */
.nav {
    background: #ffffff;
    color: #1A1A1A;
    /* display: flex; */
    text-align: left;
    font-size: 1rem;
    height: 100vh;
    left: -28rem;
    padding: 6rem 2rem 2rem 2rem;
    position: fixed;
    top: 0;
    transition: left .5s;
    width: 12rem;
    z-index: 1000;
    box-shadow: 5px 0 #dedede;
}
.nav.expanded {
    left: 0;
}
.nav ul {
    list-style: none;
    margin: auto 0;
    padding: 0;
}

.nav button {
    background: inherit;
    box-shadow: none;
    border: 0px;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 0 0 0 0;
    font-size: inherit;
    font: inherit;
    width: 100%;
    text-align: inherit;
}

.nav hr {
    color: #dedede;
}