body {
  background-color: ivory;
}
#canvas,
#canvas2,
#canvas3 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#wrapper{
  
}

#prev {
  z-index: 10;
  position: absolute;
  left: 0px;
  top: 50%;
}
#next {
  z-index: 10;
  position: absolute;
  right: 0px;
  top: 50%;
}

figure.zoom {
  background-position: 50% 50%;
  position: relative;
  width: 500px;
  overflow: hidden;
  cursor: zoom-in;
}
figure.zoom img:hover {
  opacity: 0;
}
figure.zoom img {
  transition: opacity 0.5s;
  display: block;
  width: 100%;
}

.movetoright{
  animation: mymoveright 1s ;
}

.movetoleft{
  animation: mymoveleft 1s ;
}
@keyframes mymoveright {
  from {left: 0px;}
  to {left: 1400px;}
}
@keyframes mymoveleft {
  from {right: 0px;}
  to {right: 1400px;}
}
/*  @media  screen and (max-width: 640px) {
 #prev {
    position: absolute;
    left: 0px;
    top: 100%;
    margin-top: 10px;

  }
  #next {
    position: absolute;
    right: 0px;
    top: 100%;
    margin-top: 10px;
  }
 
}
  */