#image-slider
{
float: left;
width: 480px;
margin-left: 5px;
margin-right: 0px;
margin-top: 2px;
margin-bottom: 20px;
padding: 0px;
overflow: hidden;
position: relative;
}

#image-slider .ratio
{
visibility: hidden;
z-index: 1;
}

#image-slider a {
opacity: 0;
position: absolute;
top: 0;
left: -75%;
z-index: 5;
}

#image-slider .image
{
border: 0;
}

#image-slider .caption
{
position: absolute;
background-color: rgba(255, 255, 255, 0.6);
padding: 0px;
display: none;
text-align: right;
bottom: 0px;
right: 0px;
width: auto;
z-index: 15;
font-family: "Palatino Linotype";
font-size: 13px;
color: #001064;
}

#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 a,
#image-slider .navigation
{
-webkit-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-o-transition: all linear 500ms;
transition: all linear 500ms;
}

#image-slider .ratio,
#image-slider a
{
display: block;
height: auto;
max-width: 100%;
}

#image-slider input:checked + a
{
opacity: 1;
z-index: 10;
left: 0;
}

#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: 18px;
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 500ms;
-moz-transition: left linear 400ms, right linear 500ms;
-o-transition: left linear 400ms, right linear 500ms;
transition: left linear 400ms, right linear 500ms;
}

#image-slider .next:hover,
#image-slider .prev:hover
{
background-color: rgba(255, 255, 255, 0.6);
}

#image-slider .prev
{
left: 0px;
}

#image-slider .next
{
right: 0px;
}

#image-slider .navigation label:hover
{
background-color: rgb(192, 192, 192);
}

#image-slider:hover .navigation
{
bottom: 0;
}

#image-slider:hover .prev
{
left: 3px;
}

#image-slider:hover .next
{
right: 3px;
}

#image-slider:hover .caption
{
bottom: 0;
}

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