/* MAIN WRAPPER */
.sp-wrapper {
    overflow: hidden;
    width: 50%;
    margin: auto;
}

/* Apply 'border-box' to 'box-sizing' so border and padding is included in the width and height. */
.sp-wrapper * {
    box-sizing: border-box;
}

/* We'll be using the 'transform' property to move the slideshow's items, so setting the 'transform-style' to 'preserve-3d' will make sure our nested elements are rendered properly in the 3D space. */
.sp-slideshow {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* By default we're hiding items (except the initial one) until the JS initiates. Elements are absolutely positioned with a width of 100% (as we're styling for mobile first), letting the content's height dictate the height of the slideshow. Our magic property here for all our animation needs is 'transition', taking the properties we wish to animate 'transform' and 'opacity', along with the length of time in seconds. */
.sp-slide {
    opacity: 0;
    position: absolute;
    top:0;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
    transition: transform .5s, opacity .5s, z-index .5s;
}

.sp-slide img {
    width: 100%;
    text-align: center;
}

/* OVERLAY CAPTION */
.sp-overlay {
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 10;
    background: black; color: white; padding: 15px; opacity: .5;
}

/* CAPTION */
.sp-caption { 
    position: absolute; 
    color: white; 
    bottom: 15px; 
    right: 15px; 
    z-index: 10; 
}

/* Style navigation buttons to sit in the middle, either side of the slideshow. */
.sp-button-prev,
.sp-button-next {
    position: absolute;
    top:50%;
    width: 3rem;
    height: 3rem;
    background-color: #FFF;
    transform: translateY(-50%);
    border-radius: 50%;
    cursor: pointer; 
    z-index: 10; /* Sit on top of everything */
    border:1px solid black;
/*  opacity: 0;  Hide buttons until slideshow is initialised 
    transition:opacity 1s;*/
}

.sp-button-prev {
    left:0;
}

.sp-button-next {
    right:0;
}

/* Use pseudo elements to insert arrows inside of navigation buttons */
.sp-button-prev::after,
.sp-button-next::after {
    content: " ";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    left: 54%;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    transform: translate(-50%, -50%) rotate(135deg);
}

.sp-button-next::after {
    left: 47%;
    transform: translate(-50%, -50%) rotate(-45deg);
}



/* SLIDE EFFECT */

/* Display the initial item and bring it to the front using 'z-index'. These styles also apply to the 'active' item. */
.sp-slide.initial,
.sp-slide.initial-slide,
.sp-slide.active-slide {
    opacity: 1;
    position: relative;
    z-index: 2;
}

/* Set 'z-index' to sit behind our '.active' item. */
.sp-slide.prev-slide,
.sp-slide.next-slide {
    z-index: 1;
}

/* Translate previous item to the left */
.sp-slide.prev-slide {
    transform: translateX(-100%);
}

/* Translate next item to the right */
.sp-slide.next-slide {
    transform: translateX(100%);
}

/* FADE EFFECT */

/* Display the initial item and bring it to the front using 'z-index'. These styles also apply to the 'active' item. */
.sp-slide.initial,
.sp-slide.initial-fade,
.sp-slide.active-fade {
    opacity: 1;
    position: relative;
    z-index: 2;
}

/* Set 'z-index' to sit behind our '.active' item. */
.sp-slide.prev-fade,
.sp-slide.next-fade {
    z-index: 1;
}

/* Translate previous item to the left */
.sp-slide.prev-fade {
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
}

/* Translate next item to the right */
.sp-slide.next-fade {
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
}


/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    .sp-slideshow { width: 200px;}
    .sp-overlay { padding: 4px }
    .sp-caption { bottom: 4px; right: 4px }
}