/* https://jsfiddle.net/a6uc8ruL/5/ */


.animated-image {
  overflow: hidden;
  position: relative;
  margin: auto;
}

.animated-image img {
  position: absolute;
  /* this is key to fitting full height into div */
  max-height:100%;
  height: 100%;
  /* enlarge image to overflow div; if image fits in div, it doesn't pan */
  width: 150%;  
}

.notaswide {    
	width: 60vw; height: 22vw;
}

.wide {    
	width: 70vw; height: 25vw;	
}

.wider {    
	width: 80vw; height: 29vw;
}

.wide img {
  top: 50%;
  -webkit-animation: animatedBackgroundWide 20s ease-in-out infinite alternate;
  animation: animatedBackgroundWide 20s ease-in-out infinite alternate;
}

.notaswide img {
  top: 50%;
  -webkit-animation: animatedBackgroundWide 20s ease-in-out infinite alternate;
  animation: animatedBackgroundWide 20s ease-in-out infinite alternate;
}

.wider img {
  top: 50%;
  -webkit-animation: animatedBackgroundWide 20s ease-in-out infinite alternate;
  animation: animatedBackgroundWide 20s ease-in-out infinite alternate;
}

@-webkit-keyframes animatedBackgroundWide {
  from { left: 0%;   -webkit-transform: translate3d(0%, -50%, 0); }
  to { left:100%; -webkit-transform: translate3d(-100%, -50%, 0); }
}

@keyframes animatedBackgroundWide {
  from { left: 0%;   transform: translate3d(0%, -50%, 0); }
  to { left:100%; transform: translate3d(-100%, -50%, 0); }
}