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

body {
	margin: 0;
}

/**
 * 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 {
    //margin-top: 2%;
    //margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    position:relative;
    //width:95%;
    height:100%;
    overflow:hidden;
    border: solid 2px;
    border-bottom-color: #ffe;
    border-left-color: #eed;
    border-right-color: #eed;
    border-top-color: #ccb;
    max-height: 100%;
    max-width: 100%;
}

iframe {
	width: 0;
	height: 0;
	position: absolute;
	z-index: -1000;
	border: 0;
}

/**
 * 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.
 */

#slideshow img {
    position:absolute;
    width:100%;
    //width:800px;
    //height:400px;
    top:-10%;
    //left:50%;
    margin-left:0;
    margin-top:0;
    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);
}

#slideshow .invis {
	opacity:0;
}

#slideshow .last {
	opacity:1;
	height:100%;
	width:100%;
	object-fit: contain;
	top:0;
}


/**
 * Picture frame effect
 */
.frame {
	background-color: #ddc;
	border: solid 5vmin #eee;
	border-bottom-color: #fff;
	border-left-color:#eee;
	border-radius: 2px;
	border-right-color:#eee;
	border-top-color:#ddd;
	box-shadow:0 0 5px 0 rgba(0,0,0,.25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
	box-sizing:border-box;
	position: relative;
	padding: 4vmin;
	height: 100%;
}	

.frame:before {
	border-radius: 2px;
	bottom: -2vmin;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.25) inset;
	content: "";
	position: absolute;
	left: -2vmin;
	right: -2vmin;
	top: -2vmin;
}

.frame:after {
	border-radius:2px;
	bottom:-2.5vmin;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
	content:"";
	left:-2.5vmin;
	position:absolute;
	right:-2.5vmin;
	top:-2.5vmin;
}