/* Menu Controls */

.menu-button {
	position:absolute;
	top:10px;
	right:18px;	
}
.menu-button div {
  margin: 0.4em 0 0.4em 0;
  height: 0.2em;
  width: 1.8em;
  background-color: white;
  transition-duration: 0.5s;
}
.menu-button div:nth-child(1).active {
  transition-duration: 0.5s;
  transform: translateY(0.61em) rotate(45deg);
}
.menu-button div:nth-child(2).active {
  transition-duration: 0.3s;
  width: 0;
  opacity: 0;
}
.menu-button div:nth-child(3).active {
  transition-duration: 0.5s;
  transform: translateY(-0.61em) rotate(-45deg);
}


/*
.menu-button {
color:#8ee3ff;
cursor:pointer;
font-size:205%;
padding:0 1rem;
position:fixed;
width:100%;
text-align:right;
-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
*/

.open-menu {
color:#fff;
cursor:pointer;
font-size:1rem;
padding:1rem;
position:absolute;
right:0;
top:0;
transition:transform 250ms ease;
}

.rotate { transform:rotate(45deg); }


/* Generated Overflow Element */

.overflow {
margin-top:57px;
overflow-x:hidden;
overflow-y:auto;
}


/* Menu Styles */

#mobile-nav {
background-color:#444;
position:fixed;
width:100%;
top:0;
z-index:100;
}

#mobile-nav ul {
background-color:rgba(0,0,0,0.3);
display:none;
margin:0 1rem;
padding:0;
position:relative;
text-align:left;
}

#mobile-nav ul:first-child {
background-color:transparent;
}

#mobile-nav ul li {
border-top:1px solid rgba(255,255,255,.075);
list-style:none;
margin-bottom:0;
position:relative;
}

#mobile-nav ul li a {
color:#fff;
display:inline-block;
font-size:1.2em;
padding:1rem 0;
text-decoration:none;
width:100%;
}

#mobile-nav ul ul {
margin:0;
}

#mobile-nav ul ul li {
border-top:none;
padding-left:1rem;
}

#mobile-nav ul ul li a {
padding:1rem 0;
}


@media screen and (min-width:1000px) {
	#mobile-nav { display:none; }
}