#slider, #slides {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#slides {
    white-space: nowrap;
}

#slides > img {
    width: 100%;
    margin: 0;
    padding: 0;
    transition: margin-left ease-in-out .5s;
}

#slider-handles {
    position: absolute;
    width: 100%;
    left: 0;
    padding: 0 2pt;
    top: 50%;
    box-sizing: border-box;
    transform: translateY(-50%);
}

.slider-button {
    cursor: pointer;
    font-size: 1.3em;
}

.slider-button > img {
    width: 1em;
}

.slider-button.right {
    float: right;
}

.slider-button.left > img {
    transform: rotate(-180deg);
}

#slider-pos-repr {
    position: absolute;
    bottom: 3.5em;
    left: 50%;
    transform: translateX(-50%);
}

.slide-point {
    display: inline-block;
    background-color: #2197ce;
    border-radius: 50%;
    width: .75em;
    height: .75em;
    margin: 0 .25em;
    cursor: pointer;

    transition: background-color ease-out .2s;
}

.slide-point.active {
    background-color: #6ac7f3;
}