section.slider 
{
  height           : 100%;
  display          : flex;
  align-items      : center;
  justify-content  : center;
  position         : absolute;
  top              : 120%;
  right            : 0;
  left             : 0;
  transition-delay : 0.5s;
}
img.slider 
{
    border-radius : 0.7em; 
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.7),0 6px 20px 0 rgba(0,0,0,0.19);
}

input[type='radio']#section1:checked ~ nav > label[for='section1'] 
{
    background-color: white;
}
input[type='radio']#section1:checked ~ section:nth-of-type(1) 
{
    z-index          : 1; 
    top              : 0;
    transition       : top 0.5s ease-in-out;
    transition-delay : 0s;
}
input[type='radio']#section1:checked ~ .cover 
{
    background-color : #eb9385;
}
input[type='radio']#section2:checked ~ nav > label[for='section2'] 
{
    background-color: white;
}
input[type='radio']#section2:checked ~ section:nth-of-type(2) 
{
    z-index          : 1;
    top              : 0;
    transition       : top 0.5s ease-in-out;
    transition-delay : 0s;
}
input[type='radio']#section2:checked ~ .cover 
{
    background-color: #99c0bc;
}

input[type='radio']#section3:checked ~ nav > label[for='section3'] 
{
    background-color: white;
}
input[type='radio']#section3:checked ~ section:nth-of-type(3) 
{
  z-index          : 1;
  top              : 0;
  transition       : top 0.5s ease-in-out;
  transition-delay : 0s;
}
input[type='radio']#section3:checked ~ .cover 
{
    background-color: #937782;
}
input[type='radio']#section4:checked ~ nav > label[for='section4'] 
{
  background-color: white;
}
input[type='radio']#section4:checked ~ section:nth-of-type(4) 
{
  z-index          : 1;
  top              : 0;
  transition       : top 0.5s ease-in-out;
  transition-delay : 0s;
}
input[type='radio']#section4:checked ~ .cover 
{
  background-color: #2d4249;
}

.nav 
{
  position          : fixed;
  z-index           : 2;
  right             : 30px;
  top               : 50%;
  -webkit-transform : translateY(-50%);
          transform : translateY(-50%);
}
.nav__item 
{
  width         : 2em;
  height        : 2em;
  display       : block;
  margin        : 0.5em auto;
  border        : solid 2px white;
  border-radius : 50%;
  cursor        : pointer;
}
.nav__item:hover 
{
  background-color: white;
}

.cover {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
/*
html,
body {
  height: 100%;
}

body {
  overflow: hidden;
  color: white;
  font: 100% 'Carter One', cursive;
}

h1 {
  font-size: 6em;
}
*/