.top-bar {
    width: 100vw;
    height: 50vh;
    background: black;
    position: fixed;
    z-index: 1000;
    top: 0;
    transition: .3s height ease-in-out;
}
.top-bar.bar, .bottom-bar.bar{
    height: 10vh;
}
.top-bar.hide {
    height: 0vh;
    min-height: 0;
}
.bottom-bar {
    width: 100vw;
    height: 50vh;
    background: black;
    position: fixed;
    z-index: 1000;
    bottom: 0;
    text-align: center;
    transition: .3s height ease-in-out;
}
.bottom-bar.hide {
    height: 0vh;
    min-height: 0;
}