.sl-slider-wrapper {
    width: 100%;
    height: 300px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.sl-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.sl-slide,
.sl-slides-wrapper,
.sl-slide-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.sl-slide {
    z-index: 1;
}

.sl-content-slice {
    overflow: hidden;
    position: absolute;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    background: #fff;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 1;
}

.sl-slide-horizontal .sl-content-slice {
    width: 100%;
    height: 50%;
    left: -100px;
    -webkit-transform: translateY(0%) scale(1);
    -moz-transform: translateY(0%) scale(1);
    -o-transform: translateY(0%) scale(1);
    -ms-transform: translateY(0%) scale(1);
    transform: translateY(0%) scale(1);
}

.sl-slide-horizontal .sl-content-slice:first-child {
    top: -100px;
    padding: 100px;
}

.sl-slide-horizontal .sl-content-slice:nth-child(2) {
    top: 50%;
    padding: 0px 100px 100px 100px;
}

.sl-slide-vertical .sl-content-slice {
    width: 50%;
    height: 100%;
    top: -100px;
    -webkit-transform: translateX(0%) scale(1);
    -moz-transform: translateX(0%) scale(1);
    -o-transform: translateX(0%) scale(1);
    -ms-transform: translateX(0%) scale(1);
    transform: translateX(0%) scale(1);
}

.sl-slide-vertical .sl-content-slice:first-child {
    left: -100px;
    padding: 100px 0px 100px 100px;
}

.sl-slide-vertical .sl-content-slice:nth-child(2) {
    left: 50%;
    padding: 100px;
}

.sl-content-wrapper {
    position: absolute;
}

.sl-content {
    width: 100%;
    height: 100%;
    background: #fff;
}

.sl-slide-horizontal .sl-slide-inner {
    background: #ddd;
}

.sl-slide-vertical .sl-slide-inner {
    background: #ccc;
}

/* Tablet and Desktop */
@media screen and (min-width: 768px) {
    .sl-slider-wrapper {
        height: 400px;
    }

    .sl-slide-horizontal .sl-content-slice {
        left: -150px;
    }

    .sl-slide-horizontal .sl-content-slice:first-child {
        top: -150px;
        padding: 150px;
    }

    .sl-slide-horizontal .sl-content-slice:nth-child(2) {
        padding: 0px 150px 150px 150px;
    }

    .sl-slide-vertical .sl-content-slice {
        top: -150px;
    }

    .sl-slide-vertical .sl-content-slice:first-child {
        left: -150px;
        padding: 150px 0px 150px 150px;
    }

    .sl-slide-vertical .sl-content-slice:nth-child(2) {
        padding: 150px;
    }
}

@media screen and (min-width: 1024px) {
    .sl-slider-wrapper {
        height: 400px;
    }

    .sl-slide-horizontal .sl-content-slice {
        left: -200px;
    }

    .sl-slide-horizontal .sl-content-slice:first-child {
        top: -200px;
        padding: 200px 200px 0px 200px;
    }

    .sl-slide-horizontal .sl-content-slice:nth-child(2) {
        padding: 0px 200px 200px 200px;
    }

    .sl-slide-vertical .sl-content-slice {
        top: -200px;
    }

    .sl-slide-vertical .sl-content-slice:first-child {
        left: -200px;
        padding: 200px 0px 200px 200px;
    }

    .sl-slide-vertical .sl-content-slice:nth-child(2) {
        padding: 200px 200px 200px 0px;
    }
}