.blurry-load {
	filter: blur(20px);
  }
  
  @keyframes blurOut {
	0% {
	  filter: blur(10px);
	}
  
	50% {
	  filter: blur(5px);
	}
  
	100% {
	  filter: blur(0px);
	}
  }
  /* Create the blurOut animation
   To be used for all images with the blur-image class */
  
  .blur-out {
	animation: blurOut 0.5s ease-out;
  }
  
  @keyframes shimmer {
	0% {
	  background-position: -100vw 0;
	}
  
	100% {
	  background-position: 100vw 0;
	}
  }
  /* Create the shimmer animation
   This will create left to right shimmer effect
   for the no-blur class below
   Use -100vw to 100vw for the background position property
   to ensure that this will work with different sized elements
   (using -100% to 100% was resulting in a shimmer effect that didn't move left to right) */
  
  .no-blur {
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: shimmer;
	animation-timing-function: linear;
	background: #f6f7f8;
	background: gradient(
	  linear,
	  left top,
	  right top,
	  color-stop(8%, #eeeeee),
	  color-stop(18%, #dddddd),
	  color-stop(33%, #eeeeee)
	);
	background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
  }
  /* The no-blur class will be applied when the browser does not support CSS filters
   Instead of showing a blurred image, a gray div with the shimmer animation is shown */