.bar {
    background-color: #000;
    display: block;
    width: 100%;
    height: 2px;
    border: 0;
    -webkit-transition: all .35s ease;
    transition: all .35s ease
}

.bar + .bar {
    margin-top: 4px
}

.middle {
    top: 15px
}

.bottom {
    top: 30px
}

.toggle-active .bar {
    background-color: #fff
}

.toggle-active .top {
    -webkit-transform: translateY(6px) translateX(0) rotate(45deg)
}

.toggle-active .middle {
    opacity: 0
}

.toggle-active .bottom {
    -webkit-transform: translateY(-12px) translateX(0) rotate(-45deg)
}

.overlay {
    position: absolute;
    background: #fff;
    top: 0;
    left: 0;
    width: 100%;
/*    height: 0;*/
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .35s, visibility .35s, height .35s;
    overflow: visible
}

.nav-active {
    opacity: 1;
    visibility: visible;
    height: 100%
}

.overlay ul li {
    display: block
}

.overlay ul li a {
    color: #fff;
    text-decoration: none
}

.hidden {
    opacity: 0
}

.logo-bx .over-nav ul li a:hover {
    color: #8c2131;
    transition: all .3s ease-in
}