/* menu */
#menu {
position: relative;
float: right;
transition: margin 0.25s ease-in-out;
background-color: #fff;
}

#menu ul {
width: 100%;
float: left;
transition: transform 0.25s ease-in-out;
}

.scroll-header #menu #menu-wrapper > ul,
.small #menu #menu-wrapper > ul {
transform: translateX(100vw);
margin-bottom: -100%;
}

#menu li {
position: relative;
float: left;
margin: 0 1.7em 0 0;
}

#menu li a {
position: relative;
z-index: 10;
float: left;
margin-bottom: 1px;
}

.open-menu #menu li.top-level > a {
font-size: 2.4em;
line-height: 150%;
}

.scroll-header.open-menu #menu #menu-wrapper > ul,
.open-menu .small #menu #menu-wrapper > ul {
transform: translateX(0);
margin-bottom: 0;
}


#menu li:last-child {
margin: 0;
}

#menu .sub-wrapper {
position: absolute;
top: 0;
left: 50%;
width: auto;
min-width: 130%;
float: left;
padding: 4em 2em 2em 2em;
margin: -1em 0 0 0;
z-index: 5;
display: none;
transform: translateX(-50%);
background-color: #eeeeee;
}

.open-menu #menu .sub-wrapper {
background-color: #fff;
}

#menu .sub-wrapper ul,
#menu .sub-wrapper li {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}

#menu .sub-wrapper li {
padding: 0.5em 0;
}

#menu .sub-wrapper li a {
float: none;
white-space: nowrap;
}

#menu .root.open .sub-wrapper {
display: block;
}

#header.open-tablet-menu #menu {
overflow: visible;
}

/* responsive menu */
.open-menu #menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
float: left;
transition: border 0.25s ease-in-out;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-moz-overflow-scrolling: touch;
-ms-overflow-scrolling: touch;
-o-overflow-scrolling: touch;
overflow-scrolling: touch;
background-color: #fff;
}

.open-menu #menu-wrapper {
padding: 10em 0 0 0;
}

.open-menu #menu ul,
.open-menu #menu ul li {
position: relative;
width: 100%;
float: left;
transform: none;
transition: none;
}

.open-menu #menu ul li,
.open-menu #menu ul .sub-wrapper {
position: relative;
text-align: center;
display: block ;
}

.open-menu #menu ul li {
padding: 0 0 3em 0;
}

.open-menu #menu ul ul li {
padding: 1em 0 0.5em 0;
}

.open-menu #menu ul .sub-wrapper {
margin: 0;
padding: 0 0 0 0;
box-sizing: border-box;
}

.open-menu #menu ul li a {
float: none;
}

/* menu button */
#menu-button {
position: absolute;
top: 0;
right: 0;
width: 3.4em;
height: 3em;
float: left;
margin: 0;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
cursor: pointer;
z-index: 100;
display: none;
transition: margin 0.25s ease-in-out;
}

.scroll-header #menu-button,
.small #menu-button {
display: block;
}

.bar {
position: absolute;
left: 0;
height: 4px;
width: 100%;
display: block;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-webkit-transition: 0.4s;
transition: 0.4s;
background-color: #000;
}

.bar:nth-of-type(1) {
top: 0;
-moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease-out 0.1s;
-o-transition: top 0.3s ease 0.3s, -o-transform 0.3s ease-out 0.1s;
-webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
-webkit-transition-delay: 0.3s, 0.1s;
transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
-moz-animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
-webkit-animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
}

.bar:nth-of-type(2) {
top: 1.2em;
-moz-transition: ease 0.3s 0.3s;
-o-transition: ease 0.3s 0.3s;
-webkit-transition: ease 0.3s;
-webkit-transition-delay: 0.3s;
transition: ease 0.3s 0.3s;
-moz-animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
-webkit-animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
}

.bar:nth-of-type(3) {
top: 2.4em;
-moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease-out 0.1s;
-o-transition: top 0.3s ease 0.3s, -o-transform 0.3s ease-out 0.1s;
-webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
-webkit-transition-delay: 0.3s, 0.1s;
transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
-moz-animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
-webkit-animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
}

.open-menu #menu-button .bar:nth-of-type(1) {
top: 1.2em;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transition: top 0.3s ease 0.1s, -moz-transform 0.3s ease-out 0.5s;
-o-transition: top 0.3s ease 0.1s, -o-transform 0.3s ease-out 0.5s;
-webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
-webkit-transition-delay: 0.1s, 0.5s;
transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
}

.open-menu #menu-button .bar:nth-of-type(2) {
opacity: 0;
}

.open-menu #menu-button .bar:nth-of-type(3) {
top: 1.2em;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-transition: top 0.3s ease 0.1s, -moz-transform 0.3s ease-out 0.5s;
-o-transition: top 0.3s ease 0.1s, -o-transform 0.3s ease-out 0.5s;
-webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
-webkit-transition-delay: 0.1s, 0.5s;
transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
}

/* hover */
#menu .root:hover > a,
#menu a:hover {
border-bottom: 1px solid rgb(27,27,29);
margin-bottom: 0;
}

.open-menu #menu .root:hover > a {
border-bottom: none;
}

#menu a.active:hover {
border-bottom: 1px solid rgba(255,255,255,0);
}

#menu .root:hover .sub-wrapper {
display: block;
}

.open-menu #menu,
.scroll-header.open-menu #menu {
overflow-x: hidden;
overflow-y: auto;
}