Image Slider in Viewport (Hero Mode)

I'm currently using LayerSlider but sort of moving away from it and trying to pair my projects with RoyalSlider.
Now the LayerSlider is working in full width hero mode through the elements hook in before_main_content position and looks OK. You may see it in 3 project pages.

Also I've set up a test page with RoyalSlider (link provided). The problem is that the slider box gets to the right side of the page and goes below the viewport. The plugin's author suggests to use the following code:

.royalSlider {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
height: auto;
width: auto;
}
The slider perfectly fits the page but the site header and footer are gone.

Is there a way to make it work fine with some extra CSS editing of the GP theme or should I keep bothering the plugin's support?