Text isn't selectable on website, possibly masked by css

Problem

Currently I'm developing a simple website on which a experiment a lot with modern CSS techniques like animations and transition. But after implementing some carefully planned animations, suddenly my body texts aren't selectable anymore. I think some element is masking the text, but I can't find it. If anyone could point me in the right direction it would help me a lot.

You can check the dev version on the-outsiders.nl, below is a snippet of the sass I'm using.

Thx in advance!

.slider {
position: absolute;
top: 0;
left: 0;
z-index: -1;
margin: 0;

li {

    span { 
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        color: transparent;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: none;
        opacity: 1;
        z-index: -1;
        @include animation(0s, 25s, imageAnimation); 
    }

    div { 
        z-index: 1;
        position: absolute;
        bottom: 30px;
        right: 0px;
        min-width: 20em;
        text-align: left;
        opacity: 1;
        color: #fff;
        @include animation(0s, 25s, titleAnimation); 

    }

}
}

.slider,
.slider:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1; 
}


@include keyframe(imageAnimation) { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; @include transform(scale(1.025)); animation-timing-function: ease-out; }
    100% { opacity: 1; @include transform(scale(1.15)); animation-timing-function: ease-out; }
}

@include keyframe(titleAnimation) { 
    0% { opacity: 0 }
    17% { opacity: 1 }
}
Problem courtesy of: smelly586

Solution

slider has z-index: -1; in two places.

Once you take out those two z-index, you should be able to select the bottom text.

enter image description here enter image description here

Solution courtesy of: Win

Discussion

I am having a hard time determining what you are asking. But if you are concerned that one control is masking another, you can determine if another element is masking your input by setting the background color of the potential overlaying item to something like bright green. It should then be obvious when something is on top of something else.

Discussion courtesy of: JerryKur

This recipe can be found in it's original form on Stack Over Flow.