/**
 * See: http://www.css-101.org/articles/ken-burns_effect/css-transition.php
 */

/**
 * Styling the container (the wrapper)
 *
 * position is used to make this box a containing block (it becomes a reference for its absolutely positioned children). overflow will hide part of the images moving outside of the box.
 */

#slideshow {
    position:relative;
    width:100%;
    height:400px;
    overflow:hidden;
}

/**
 * Styling the images
 *
 * position:absolute is to put all images in a stack. Dimensions are set to increase the size of these images so their edges do not appear in the parent box when we move them inside the said box.
 * Because the images are now larger than their parent container, we use top, left and margin values to align them in the center of the box.
 * Finally, we set the transition (property and duration). Note that duration values are different for opacity and transform as we want the "fade-in" effect to be faster than the "panning" effect.
 */

@media only screen and (max-width: 1500px) {
    #slideshow img {
        position:absolute;
        width:100%;
        height:860px;
        top:50%;
        left:50%;
        margin-left:-50%;
        margin-top:-300px;
        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;
    }
}
@media only screen and (max-width: 800px) {
     #slideshow img {
        position: absolute;
        width: 800px;
        height: 660px;
        top: 50%;
        left: 50%;
        margin-left: -50%;
        margin-top: -300px;
        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;
    }
}

@media only screen and (max-width: 500px) {
    #slideshow img {
        position: absolute;
        width: 800px;
        height: 500px;
        top: 50%;
        left: 50%;
        margin-left: -50%;
        margin-top: -300px;
        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;
    }
}


@media only screen and (max-width: 250px) {
    #slideshow img {
        position: absolute;
        width: 800px;
        height: 500px;
        top: 50%;
        left: 50%;
        margin-left: -50%;
        margin-top: -300px;
        opacity: 0;
        cursor: pointer;
        -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);
}