#slideshow {
    position: relative;
    width: 100%;
    height: 50%!important;
    overflow: hidden;
}


    #slideshow img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin-left: 0px;
        margin-top: 0px;
        opacity: 0;
        -webkit-transition-property: opacity, -webkit-transform;
        -webkit-transition-duration: 3s, 10s;
        -moz-transition-property: opacity, -moz-transform;
        -moz-transition-duration: 3s, 10s;
        -ms-transition-property: opacity, -ms-transform;
        -ms-transition-duration: 3s, 10s;
        -o-transition-property: opacity, -o-transform;
        -o-transition-duration: 3s, 10s;
        transition-property: opacity, transform;
        transition-duration: 3s, 10s;
    }

 /**
 * We change the point of origin using four corners so images do not move in the same direction. 
 * This technique allows us to create various paths while applying the same translate() values to all images (see the 'fx' class further below).
 */

    #slideshow img {
        -webkit-transform-origin: bottom left;
        -moz-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
        -o-transform-origin: bottom left;
        transform-origin: bottom left;
    }

    #slideshow :nth-child(2n + 1) {
        -webkit-transform-origin: top right;
        -moz-transform-origin: top right;
        -ms-transform-origin: top right;
        -o-transform-origin: top right;
        transform-origin: top right;
    }

    #slideshow :nth-child(3n + 1) {
        -webkit-transform-origin: top left;
        -moz-transform-origin: top left;
        -ms-transform-origin: top left;
        -o-transform-origin: top left;
        transform-origin: top left;
    }

    #slideshow :nth-child(4n + 1) {
        -webkit-transform-origin: bottom right;
        -moz-transform-origin: bottom right;
        -ms-transform-origin: bottom right;
        -o-transform-origin: bottom right;
        transform-origin: bottom right;
    }

    /**
 * Because of the stacking context, we need to make sure that the first image (in source) is not hidden by the last one. 
 * The rule below moves all images past the second one down the stack. 
 * This is because the second image needs to show on top of the first one when it transitions in.
 */

    #slideshow .fx:first-child + img ~ img {
        z-index: -1;
    }

 /**
 * Because images are styled with a different point of origin, the following rule will create different panning effects.
 */

    #slideshow .fx {
        opacity: 1;
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }