.sss {
    height: 0;
    margin: 0 20px;
    padding: 0;
    position: relative;
    display: block;
    /*overflow: hidden;*/
    /*background-color: #000;*/
}

.ssslide {
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    overflow: hidden;
}

    .ssslide span.caption {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 15px;
        font-size: 12px;
        background-color: rgba(0, 0, 0, .5);
        font-family: Arial, sans-serif;
        color: #fff;
    }

    .ssslide img {
        max-width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        position: relative;
        display: block;
    }

.sssnext, .sssprev {
    width: 24px;
    height: 24px;
    margin: 0;
    position: absolute;
    top: 50%;
    margin-top: -12px;
    /*background: url('images/arr.png') no-repeat;*/
}

.sssprev {
    left: 3%;
    background-position: 0 50%;
}

    .sssprev:before {
        content: "\f104";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        /*--adjust as necessary--*/
        color: #1b1c20;
        font-size: 18px;
        position: absolute;
        left: -30px;
    }

.sssnext {
    right: 3%;
    background-position: -26px 50%;
}

    .sssnext:before {
        content: "\f105";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        /*--adjust as necessary--*/
        color: #1b1c20;
        font-size: 18px;
        position: absolute;
        right: -30px;
    }

    .sssprev:hover, .sssnext:hover {
        cursor: pointer;
    }