html, body {
height: 100%; width; 100%;
margin: 0;
padding; 0;
}

.wrap {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
background: #120103;
color: #fff;
text-align: center;
}

header {
background: #3e474f;
box-shadow: 0 0.5em 1em #111;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}

header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: 1em;
font-weight: bold;
padding: 0 1em;
}

header label:hover {
background: #2e353b;
}

.slide {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
transition: left 0s 0.75s;
}

.slide-one {

background-image: url();
}

.slide-two {
background-image: url(https://sbuiltorg.files.wordpress.com/2016/10/pixels-3500-resolution-300ppi-long-edge-19-e1491448055899.jpg);
}

.slide-three {
background-image: url(https://sbuiltorg.files.wordpress.com/2017/03/the-design-files-e1496624214414.jpg);
}

[id^=”slide”]:checked + .slide {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}

.slide h1 {
opacity: 0;
transform: translateY(100%);
transition: transform 0.5s 0.5s, opacity 0.5s;
}

[id^=”slide”]:checked + .slide h1 {
opacity: 1;
transform: translateY(0);
transition: all 0.5s 0.5s;
}