Removing box shadow on magnific pop-up gallery (.mfp)

I have been trying for few days to change the css to remove the box shadow around the light box of the gallery.
I changed the background colour to match website bg and there is this silly shadow around each image!
the only thing so far that can remove the shadow in inspect is when I untick the position:relative, but I don't know what to replace it for in custom CSS and the X and image number disappear too.

.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045;
}



Help!!!

 

Thanks for your quick reply.
Here it is:
You need to click on the image to enlarge to see the box shadow:

http://brokenrules.co.uk.pineapple.temporarywebsiteaddress.com/wp/project/you-all-know-the-words/

 

While we are here I hope you don't mind me asking another question:
I am trying to remove the padding around the customised portfolio in the homepage so the books are closer to each other and can't find the CSS.
http://brokenrules.co.uk.pineapple.temporarywebsiteaddress.com/wp

Many thanks in advance

 

that's great! it works. Many thanks!
Any luck with box shadow of the lightbox in gallery?
Can it be a js?

 

Another issue is the space in the homepage and reviews that appears at he top on ipad/mobile.
I have no idea how t remove this:


element.style {
height: 767px;
}