.Menu {
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1100;
    // &:after {
    //     content: '';
    //     width: e("calc(100% + 100px)");
    //     margin: 0px -50px;
    //     height: 100%;
    //     top: 0px;
    //     position: fixed;
    // }
    will-change: transform, top;
    transition: top 0.5s;
}

.appbar {
    >* {
        position: relative;
        z-index: 1200;
    }
}

.title {
    will-change: opacity;
    transition: opacity 0.5s;
    text-overflow: ellipsis;
    overflow: hidden;
    opacity: 0.95;
    font-weight: 300;
    font-size: 20px;
}

.MenuBox {
    width: 100%;
    height: 64px;
}

.transparent {
    background-color: rgba(0, 0, 0, 0) !important;
    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0), 0px 1px 4px rgba(0, 0, 0, 0) !important;
    will-change: box-shadow, background-color;
    .title {
        opacity: 0;
    }
}

.stopAt200 {
    position: absolute;
    top: -64px;
    transform: translateY(228px);
    transition: top 0s;
}

.fixedTop {
    transition: top 0s;
}

.hidden {
    top: -64px;
}

.menu {
    position: absolute;
    z-index: 1200;
    width: 48px;
    height: 48px;
    text-indent: -100px;
    cursor: pointer;
    border-radius: 3px;
    display: block;
    top: e("calc(50% - 48px / 2)");
    left: e("calc(50% - 48px / 2)");
}


/*---the middle line---*/

.menu span {
    position: absolute;
    top: e("calc(50% - 1.5px)");
    left: e("calc(50% - 18px / 2)");
    width: 18px;
    height: 2px;
    cursor: pointer;
    border-radius: 3px;
    z-index: 1200;
}

/*---the bottom &top line of the hamburger menu---*/

.menu span:after,
.menu span:before {
    width: 18px;
    height: 2px;
    position: absolute;
    content: '';
    left: 0;
    border-radius: 3px;
}

.menu span:after {
    top: -5px;
}

.menu span:before {
    bottom: -5px;
}


/*---hover state---*/

.menu.back span {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

.menu.back span:before {
    -webkit-transform: rotate(-45deg);
    width: 13px;
    left: 8px;
    bottom: -4px;
}

.menu.back span:after {
    -webkit-transform: rotate(45deg);
    width: 13px;
    left: 8px;
    top: -4px
}

.menu span,
.menu:after,
.menu span:after,
.menu span:before {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}