.b_f {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 101; display: block; padding: 20px; box-sizing: border-box;}
.bf__top {position: absolute; left: 0; top: 0; width: 100%; height: 50%; background: black; transition: ease 0.5s; overflow: hidden;}
.bf__top::after {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateY(50%); display: block; background: url(../images/bf_bg_2.svg) center top no-repeat; background-size: contain; margin: 20px; box-sizing: border-box; width: calc(100% - 40px);}

.bf__bottom {position: absolute; left: 0; bottom: 0; width: 100%; height: 50%; background: black; transition: ease 0.5s; overflow: hidden;}
.bf__bottom::after {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: translateY(-50%); display: block; background: url(../images/bf_bg_2.svg) center top no-repeat; background-size: contain; margin: 20px; box-sizing: border-box; width: calc(100% - 40px);}

/* Animace a po */

.bf_slide .bf__top,
.bf_slide .bf__bottom {height: 0;}
.bf_off .b_f {display: none;}