#banner{ height: 32px; }

.hamburger {display: none;}

@media only screen and (max-device-width: 767px) {

.bar {display: block; width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background-color: red;}

#toolbar {height: 37px;}

.hamburger {display: block; float: left; z-index: 50; position: relative; cursor: pointer;}

#toolbar ul li a {background: none; font-size: 5vh !important; width: auto !important; height: auto !important; padding-bottom: 10px;}

#toolbar ul {position: fixed; left: 0; top: 100%; width: 100%; height: 200%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-color: #3f3f3f; z-index: 40; transition: 0.5s;}

#toolbar ul.active {top: -50%;}

.hamburger.active .bar:nth-child(2) {opacity: 0;}

.hamburger.active .bar:nth-child(1) {transform: translateY(8px) rotate(45deg);}

.hamburger.active .bar:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}

body.lock-scroll {overflow: hidden;}

}