.slidePositionWrapper {
    display: table;
    margin: 30px auto 5px auto;
}

#slidePosition {
}

    #slidePosition > div {
        display: inline-block;
        width: 15px;
        height: 15px;
        background: #000;
        opacity: 0.2;
        border-radius: 50%;
        margin: 0 5px;
        transition: opacity 1s, background 1s;
    }

        #slidePosition > div.curPos {
            background: #e30613;
            opacity: 1.0;
        }

.slideWrapper {
    position: relative;
    margin: 0 0 20px 0;
}

#slides {
    position: relative;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    transition: height 0.5s linear 0.1s;
}

.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    opacity: 0;
    z-index: 1;
    transition: opacity 1s;
}

.showing {
    opacity: 1;
    z-index: 2;
}


.controls {
    display: none;
}



.slide {
    padding: 15px 70px;
    box-sizing: border-box;
    color: #000;
}

    .slide h4 {
        margin: 0px 0 20px 0;
        font-size: 140%;
        color: #e30613;
    }

.buttons {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10;
}

.controls {
    background: #eee;
    color: #000;
    border: none;
    font-size: 120%;
    cursor: pointer;
    width: 60px;
    position: absolute;
    height: 100%;
    top: 0px;
    opacity: 0.5;
}

    .controls#previous {
        left: 0px;
    }
    .controls#next {
        right: 0px;
    }

    .controls:hover {
        background: #ddd;
        color: #333;
        opacity: 0.9;
    }


.slideText {
}

    .slideText .slideImage {
        float: left;
        padding: 0 5px 5px 0;
        width: 50%;
    }