#image-slider {

background-color: rgb(128, 128, 128);

display: inline-block;
height: auto;
max-width: 100%;
overflow: hidden;
position: relative;
}
#image-slider .ratio {
visibility: hidden;
z-index: 1;
}
#image-slider .image {
top: 0;
left: -100%;
opacity: 0;
position: absolute;
z-index: 5;
}
#image-slider .caption {
position: absolute;
background-color: rgba(255, 255, 255, 0.8);
display: none;
padding: 5px;
text-align: center;
top: -50px;
width: 100%;
z-index: 15;
}
#image-slider .navigation {
text-align: center;
background-color: rgba(255, 255, 255, 0.5);
bottom: -32px;
padding: 5px 0;
position: absolute;
width: 100%;
z-index: 15;
}
#image-slider .image,

#image-slider .caption,
#image-slider .navigation {
-webkit-transition: all linear 400ms;
-moz-transition: all linear 400ms;
-o-transition: all linear 400ms;
transition: all linear 400ms;
}
#image-slider .ratio,
#image-slider .image {
display: block;
height: auto;
max-width: 100%;
}
#image-slider input:checked + .image {
z-index: 10;
left: 0;
opacity: 1;
}
#image-slider input {
display: none;
}
#image-slider .navigation label,
#image-slider .next,
#image-slider .prev {
text-align: center;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid rgb(48, 48, 48);
color: black;
cursor: pointer;
display: inline-block;
line-height: 20px;
text-decoration: none;
width: 20px;
z-index: 20;
}
#image-slider .next,

#image-slider .prev {
display: none;
position: absolute;
text-align: center;
top: 50%;
-webkit-transition: left linear 400ms, right linear 400ms;
-moz-transition: left linear 400ms, right linear 400ms;
-o-transition: left linear 400ms, right linear 400ms;
transition: left linear 400ms, right linear 400ms;
}
#image-slider .next:hover,
#image-slider .prev:hover {
background-color: rgb(192, 192, 192);
}
#image-slider .prev {
left: -27px;
}
#image-slider .next {
right: -27px;
}
#image-slider .navigation label:hover {
background-color: rgb(192, 192, 192);
}
#image-slider:hover .navigation {
bottom: 0;
}
#image-slider:hover .prev {
left: 5px;
}
#image-slider:hover .next {
right: 5px;
}
#image-slider:hover .caption {
top: 0;
}

#image-slider input:checked + .image + .caption,

#image-slider input:checked + .image + .caption + label,
#image-slider input:checked + .image + .caption + label + label {
display: block;
}