/**
 * author: Thierry Koblentz
 * Copyright 2011 - css-101.org 
 * http://www.css-101.org/articles/ken-burns_effect/css-transition.php
 */
div.KenBurns {
  position:relative;
  width:100% !important;
  height:500px;
  overflow:hidden;
  border:0px solid #fff;
  -webkit-box-shadow:1px 1px 5px #ddd;
  -moz-box-shadow:1px 1px 5px #ddd;
  -o-box-shadow:1px 1px 5px #ddd;
  box-shadow:1px 1px 5px #ddd;
}
div.KenBurns img {
  max-width: none;
  position:absolute;
  width:100vmax;
  height:auto;
  min-height:500px;

  top:0;
  left:0;

  margin:0;
  opacity:0;
  transition-property: opacity, transform;
  transition-duration: 5s;
}
div.KenBurns img  {
 /*
  transform-origin: bottom left;*/
    transform: scale(1.0) translate(0%, 0%);
}
div.KenBurns  :nth-child(1).fx {
    transform: scale(1.2) translate(8%, 8%);
}
div.KenBurns :nth-child(2).fx {
    transform: scale(1.2) translate(-8%, 8%);
}
div.KenBurns :nth-child(3).fx {
    transform: scale(1.2) translate(-8%, -8%);
}
div.KenBurns :nth-child(4).fx {
    transform: scale(1.2) translate(0%, -8%);
}

    /*
    div.KenBurns :first-child + img ~ img {
        z-index:-1;
    }*/
div.KenBurns .fx {
  /*transform: scale(1.1);*/

  opacity:1;
}


@media (max-width: 768px) {
  div.KenBurns {
    height: 50vmin;
  }
}