/* div {
  width: 50%;
  margin: 100px auto;
  text-align: center;
} */

@keyframes top-clip {
	0%{}
	70%{transform: translateY(21px);}
	100%{transform: translateY(21px);}
}

@keyframes bottom-sand-path {
	0%{}
  15%{}
	70%{transform: translateY(0);}
	100%{transform: translateY(0);}
}

@keyframes bottom-sand-g {
	0%{transform: translateY(8px);}
	20%{transform: translateY(6px);}
  80%{transform: translateY(4px);}
	100%{transform: translateY(-9px);}
}

@keyframes hourglass-rotation {
	80%{transform: rotateZ(0);}
	100%{transform: rotateZ(180deg);}
}


#top-sand #top-clip-path rect,
#bottom-sand path,
#bottom-sand g,
svg {
	animation-duration: 6s;
	animation-delay: 1s;
	animation-iteration-count: infinite;
}

#top-sand #top-clip-path rect {
	animation-name: top-clip;
  animation-timing-function: ease-in;
}

#bottom-sand path {
	transform: translateY(21px);
	animation-name: bottom-sand-path;
}

#bottom-sand g {
	animation-name: bottom-sand-g;
  transform: translateY(8px);
}

#animatedHourglass svg {
	animation-name: hourglass-rotation;
}

#animatedHourglass {
  margin-bottom: calc(var(--cell) * 0.6);
}