.toggle {
    right: 20px;
    top: 12px !important;
}

.btn-container {
    display: inline-block;
    cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
}

.hc-offcanvas-nav .nav-close-button span::before {
    margin-left: -7px !important;
}

/* Rotate first bar */
.change .bar1 {
    transform: translate(0, 11px) rotate(-45deg);
}

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

/* Rotate last bar */
.change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
}

.hc-offcanvas-nav .nav-item-link {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px !important;
}