Lightbox und Pagebuilder

Hallo zusammen

Es geht um die Seite: http://wp.weyrauch.ch/our-shoes/loafer/

Ich habe das Plugin "photo gallery" installiert und möchte nun mit Pagebuilder in einer row drei Bilder anzeigen lassen. Ich konnte mit dem Plugin eine Photogalerie erstellen mit den drei Bildern. Auch wenn ich nun auf eines der Bilder klicke wird es vergrössert und ein Overlay sollte hinter dem Bild den ganzen Screen überdecken mit einer eingestellten Transparenz. Wenn ich nun auf eines der Bilder klicke wird zwar ein Overlay über den Hintergrund gelegt, jedoch nur über die Row, in welcher ich die Photogalerie eingefügt habe. Ich weiss, dass ich das Problem umgehen kann, indem ich den Pagebuilder nicht nutze, doch das möchte ich versuchen zu vermeiden. Ich habe nun auch bereits im CSS-Code meines Child-Themes folgenden Code eingefügt:

.spider_popup_overlay_0 {
background-height:1000px !important;
background-color: #000000 !important;
opacity: 0.5 !important;
z-index: 1000 !important;
}

Ich habe das .spider_popup_overlay_0 als den vom Plugin photogallery erstellten container für den overlay identifiziert. Doch leider passiert nichts wenn ich diesen wie oben beschrieben abändere. Ich habe auch bereits in den Files des Plugins gesucht, ob ich da irgend etwas finde wo ich anstatt den Rows einfach den ganzen spider-container abdunkeln kann (bei klick auf eines der Bilder) - leider ohne Erfolg..

Hatte jemand von euch bereits dasselbe Problem?
Ich wäre über einen Lösungshinweis unglaublich dankbar.

Simon

Danke SirEctor!! Hat wunderbar funktioniert. Nun ist nur noch eine Linie (hr.style-two (=Trennstrich unter der ersten Bildereihe) http://wp.weyrauch.ch/our-shoes/boot/) immer noch im Vordergrund (wie auch das Menu und das Logo oben links).

Ich habe den Z-Index auf -11 gesetzt, dass die Linie sicher hinter dem "spider-overlay"-layer liegt:
hr.style-two {
border: 0;
height: 1px;
margin: 27px 80px 27px 0px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(219, 163, 153, 1), rgba(0, 0, 0, 0));
z-index: -11 !important;
}

Doch leider funbktioniert das nicht. Die Lightbox überdeckt die Linie wie das Menu nicht. Wie kann ich diese auch überdecken lassen?

Zudem habe ich noch ein kleines Problemchen, dass wenn ich das Bild anklicke, wird der Scrollbalken rechts aufgelöst und die gesamte Page wird leicht nach rechts verschoben. Ich habe nun versucht, einen Scrollbalken per css einzufügen. Leider wird kein "richtiger" Scrollbalken eingefügt, sondern nur eine Linie, die sich vor/über die Page legt, aber nicht als Abstand dient. Die Page wird also weiterhin nach rechts "gestretched". Wie bring ich es hin, dass da rechts eine Art Platzhalter eingefügt wird, dass es beim Anklicken des Bildes / Starten der Lightbox die page nicht nach rechts über den vorher noch angezeigten Scrollbalken ausgedehnt wird?