display issue with vertical buttons on fullscreen slider

I have followed the instructions in other posts on how to use vertical buttons on fullscreen slider. Everything works fine, however I get strange black boxes at the top and bottom of the button list (see the website).

I also attach my Quick CSS, as there are some parts relevant for this:

#header_main_alternate, #avia-menu {
background: #7bc5e0;
}
#top .slideshow_caption .avia-button-wrap.avia-button-left {
margin: 0 10px !important;
}

#top .slideshow_caption .avia-button-wrap a{
padding: 25px 15px;
width: 250px !important;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}

#footer td {
border: none!important;
}

#footer .flex_column.first {
width: 15%;
}
#footer .flex_column:nth-child(2) {
width: 25%;
}

#footer .flex_column:nth-child(3) {
width: 20%;
}

#footer .flex_column:nth-child(4) {
width: 22%;
}