Overlapping content problems with z-index and margins

[FrickenTrevor]

I need some help on my personal site, the goal is to have a "reveal" between two different sets of content such as this fiddle. However I cant figure out how to position elements so that the content that is supposed to be revealed is hidden until the page is scrolled down. Heres some of the problems, you can check out the site here . Please use Google Chrome 30+ to test the page, also the problems do not appear until you click the button that says "More" then refresh the page

I have also included this picture to help:


1) The link to have the content scroll back down and to go back up the page does not work
2) The button is hidden by the overlapping content
3) The overlapping content that is supposed to be hidden is visible and is above the first content

[FrickenTrevor]

Anyone willing to help?

[molendijk]

Where's the More button?

[FrickenTrevor]

It is on my website, on the bottom of the page. It should be easy to see.

[molendijk]

I don't see it here.

[FrickenTrevor]

I don't see it here.

Like I said,

It is on my website, on the bottom of the page. It should be easy to see.

My website can be found here, if you still dont see it could I have a screenshot of what you see?

[molendijk]

This is what I see:

So there's a black box (a video?) and text beneath it, but no more button.

[FrickenTrevor]

It looks like the background video isnt loading, are you on a mobile device? If you can view the site on a computer, I have not made it optimized for mobile yet.

[molendijk]

I'm on a computer. The screenshot was made when viewing your site with Firefox. With IE I get this (still no button):

[FrickenTrevor]

I used Chrome to design my site, I should point out I have not done very much testing yet as the site is still being designed. Since you can't view my site, I will just post up the code in a Zip file.

Edit: Just to make things clear I need my CSS looked at, something is strange with the code