/* MENU */

nav {
float: right;
font-family: Jost, "Century Gothic", sans-serif;
}

#topmenu {
float:left;
margin-right: 10rem;
}
#topmenu li { 
text-align:center;
float:left;
border-left: solid 1px #f3eee7;
border-right: solid 1px #f3eee7;
list-style: none;
}
#topmenu li:hover {
background-color:#fbf7f0;
}
#topmenu li a {
padding:1.2rem 2rem 0.5rem 2rem;
display:block;
}

nav label { 
float: left;
margin-top: .5rem;
}
label #menu {
font-size: .65rem;
text-align: center;
line-height: .7rem;
color: #a35303;
}

input[type=checkbox]#menutoggle {
display: block;
position:absolute;
overflow: hidden;
margin: 0;
padding: 0;
/* width: 1.85rem;
height: 1.85rem; */
width: 2.5rem;
height: 2.5rem;
font-size: 0;
opacity:0;
}

#menuicon {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
/* width: 1.85rem;
height: 1.85rem; */
width: 2.5rem;
height: 2.5rem;
font-size: 0;
text-indent: -9999px;
box-shadow: none;
border: none;
cursor: pointer;
transition: background 0.2s;
background-color: #a35303;
z-index:10;
}

#menulist {
position:absolute;
right: 0rem;
top: 4.0rem;
width: 9rem;
overflow:hidden;
background-color:#fff;
max-height:0;
transition: max-height .2s ease-in;
border: solid 1px;
border-color:transparent;
list-style: none;
padding: 0;
}

#menulist li {
border-bottom:solid 1px #f3eee7;
}
#menulist li:hover { background-color:#fbf7f0; }
#menulist a {
display:block;
padding:5px;
}

#menuicon:focus { outline: none; }

#menuicon span {
display: block;
position: absolute;
/* top: 0.85rem; */
top: 1.1rem;
left: 0.35rem;
right: 0.35rem;
height: 0.15rem;
background: white;
transition: background 0s 0.2s; 
}
#menuicon span::before,
#menuicon span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 0.15rem;
background-color: #fff;
content: "";
transition-duration: 0.2s, 0.2s;
transition-delay: 0.2s, 0s;
}
#menuicon span::before { 
top: -0.5rem; 
transition-property: top, transform; 
}
#menuicon span::after { 
bottom: -0.5rem; 
transition-property: bottom, transform;
}

#menutoggle:checked + #menuicon { background-color: #693907; }
#menutoggle:checked + #menuicon span { background: none; }
#menutoggle:checked + #menuicon span::before {
top: 0;
transform: rotate(45deg);
transition-delay: 0s, 0.2s;
}
#menutoggle:checked + #menuicon span::after {
bottom: 0;
transform: rotate(-45deg);
transition-delay: 0s, 0.2s;
}

#menutoggle:checked ~ #menulist {
max-height:22rem;
transition: max-height .2s ease-out;
border:solid 2px #693907;
z-index:11;
}