Content slider arrow positions

Hello,

i worked on a custom css code for the content slider i found in another thread here and used this:

.avia-slideshow-arrows.avia-slideshow-controls {
	width: 120%!important;
	position:absolute!important;
	top: 200px!important;
	transform: translateY(-50%)!important;
	width: 100%;
	z-index:999;
        margin-left: -80px;
}

.avia-slideshow-arrows.avia-slideshow-controls .next-slide {
    right: 0!important;
}

and this is our project: http://www.kaffee-versandhaus.de/eigenmarken/

At the bottom you can find the slider and i managed to get the arrows in position but the code is not really a clean one. I had to use the 120% part to put the right arrow a bit outside of this module and the -80margin to get the left arrow (or the whole arrow module) a bit centered.

Can you help out with a better code snippet maybe?
Thank you very much in advance and best regards,

Toni