/*
Animates the image on the home page.
Hovering cursor over image causes image to move.
jQuery Image Panning - Malihu
Source: http://manos.malihu.gr/jquery-image-panning/
*/

.content{
  position: relative;
  margin: 10px 4px;
  width: 800px;
  height: 300px;
  box-shadow: 0 0 60px rgba(0,0,0,.4);
  background: #000;
}

.content img{
  opacity: 100%;
  transition: opacity .6s linear .85s;
}

.content img.loaded{ opacity: 1; }

/* panning css */

.img-pan-container, .img-pan-container img{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.img-pan-container{
  position: relative;
  overflow: hidden;
  cursor: default;
  height: 100%;
  width: 100%;
}

.img-pan-container img{
  -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0);
  position: absolute;
  top: 0;
  left: 0;
}