Z-index issue

Hey Brandon,

So I've spent quite a bit of time fooling around in the dev tools in your site. While i haven't found the answer to your problem, I believe I've pinpointed the general cause.

First and foremost, the logo isn't the only thing stacked on top of your overlay; if you scroll down the page, it seems to be that every image and graphic is doing this. In my opinion, this is a result of multiple "stacking contexts" existing on your page. z-index and opacity are far more complicated concepts than they appear to be on the surface, and they work in concert with each other and position to produce different "stacking contexts" along the z-axis.

I'm far from an expert on the nuances of the subject, but you can get a gist for them via this blog post from Phillip Walton.

I came to this conclusion by first fooling around with the positioning, opacity and z-indices of the elements and their parents. No change. Then, I physically took the entire overlay div and moved it to the top of your main-wrapper, essentially making it the first real element on your page. Why did I do this? Because the default stacking order is (more or less) the same as the order of appearance in the HTML. So i knew that if I put your overlay at the top, and it stacked itself on top of the graphics, the issue would indeed be one of stacking context "pollution", that is a bit too pervasive throughout your page for a simple z-index modification to resolve.

Mind you, I very well could have missed something, but I definitely gave it a fair shake. My advice would be to start from a baseline; set the position, z-index, and opacity properties of most, if not all elements on the page, to defaults, then build up from there a bit at a time. It will be much easier than unscientifically hacking at it like I did.

Also, try to scale back on the use of the !important keyword, because it's pretty notorious for overriding specificity in ways you may not have anticipated.

Good luck!

Chris