.toggleMenu {
    position: fixed;
    display: none;
    left: 3vw;
    top: 2vh;
    z-index: 301; /* lies over #navbar (300)) */
}

.bar1, .bar2, .bar3 {
    width: 30px;
    height: 4px;
    margin: 6px 0;
    transition: 0.4s;
    background-color: #660033;
}

/* Rotate first bar */
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-10px, 8px);
    transform: rotate(-45deg) translate(-6px, 8px);
}

/* Fade out the second bar */
.change .bar2 {
    opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-10px, -9px);
    transform: rotate(45deg) translate(-6px, -9px);
}

.mobile-menu {
    display: none; 
    height: 100vh;
    width: 100vw;
    opacity: 1;
    background-color: #f0c46c; /* Black background color  */
    background-image: url("../../images/layout/background-menu-mobile.jpg");
    background-size: cover;
    position: fixed; /* Make it stick/fixed */
    top: 0; /* Stay on top */
    z-index: 300;
    overflow-y: scroll;
}

.mobile-menu #headitems {
    padding-bottom: 120px;
    padding-top: 60px;
}


nav a, .mobile-menu a, .mobile-menu input,
.mobile-menu .menuitem:hover > a {
    display: block;
    font-weight: bold;
    font-size: 2rem;
    color: #660033;
    text-align: center;
    padding: 0.1vh 0.1vw;
    opacity: 1;
    font-family: SairaSemiCondensed;
    -webkit-appearance: button-bevel;
    display: inline;
}

    /* Menu Dropdown */
.mobile-menu .menuitem, .mobile-menu .menuitem .sub-mobile div {
    opacity: 0.8;
}

.mobile-menu .menuitem .sub-mobile {
    display: none;
}

.mobile-menu .menuitem.mobile-hover .sub-mobile {
    display: block;
}

.mobile-menu a, .mobile-menu input {
    background-color: transparent;
    border: none;
}

.mobile-menu .sub a:hover {
    color: #660033 !important;
}

.mobile-menu .sub a {
    color: #E67127 !important;
}