<div id="container-div">
  <img id="background-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/kts_demo_elimination_bg.svg">
  <div id="mask">
      <img id="plant_small_1" class="plant_small" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/kts_demo_plant_small.svg">
      <img id="plant_small_2" class="plant_small" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/kts_demo_plant_small.svg">
  </div>
  <img id="hand" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/kts_demo_hand.svg">
</div>

#container-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* background: lightgray; */
}

#background-img {
  position: absolute;
  opacity: 0.666;
  width: 100%;
  height: 100%;
}

#hand {
  position: absolute;
  width: 16.36%;
  left: 30%;
  top: 48%;
  animation-name: swipe;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 3s; 
}

#mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset( 30% 41% 40.5% 20% );
/*   background: rgba( 0, 0, 0, 0.2 ); */ 
}

.plant_small {
  position: absolute;
  width: 17.82%;
  top: 31.34%;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-duration: 3s;
}

#plant_small_1 {
  left: 22.5%;
  animation-name: fall_1;
}

#plant_small_2 {
  left: 41.5%;
  animation-name: fall_2;
}



/*** ANIMATIONS ***/


@keyframes swipe {
  0%   { left: 45%; }
  40%  { left: 13%;   }
  100% { left: 13%;   }
}

@keyframes fall_1 {
  0%   { top: 32.65%; opacity: 0.666 }
  20%  { top: 32.65%;              }
  60%  {              opacity: 0   }
  67%  { top: 47%;                 }
  100% { top: 47%;    opacity: 0   }
}

@keyframes fall_2 {
  0%   { top: 32.65%; opacity: 0.666 }
  13%  { top: 32.65%;              }
  53%  {              opacity: 0   }
  60%  { top: 47%;                 }
  100% { top: 47%;    opacity: 0   }
}

// responsive scaling

var containerDiv = document.getElementById("container-div");

function scaleToWindow() {
  if (window.innerWidth > window.innerHeight) {
    containerDiv.style.width = window.innerHeight*0.8+"px";
  } else { 
    containerDiv.style.width = window.innerWidth*0.8+"px";
  }
  containerDiv.style.height = containerDiv.style.width;
}

scaleToWindow();

window.addEventListener('resize', scaleToWindow);