@layer utilities {	  
	@keyframes spin {
	  from { transform: rotate(0deg); }
	  to { transform: rotate(-360deg); }
	}

	.spin-slow {
	  animation: spin 510s linear infinite;
	}
	.crimson-pro-regular {
		font-family: "Crimson Pro", serif;
		  font-optical-sizing: auto;
		  font-weight: 400;
		  font-style: normal;
	  }
	  
	  .crimson-pro-bold {
		font-family: "Crimson Pro", serif;
		  font-optical-sizing: auto;
		  font-weight: 700;
		  font-style: normal;
	  }	  
	
	@keyframes small-circle {
	  0% {
		transform: rotate(0deg) translateX(32vw) rotate(0deg);
	  }
	  100% {
		transform: rotate(360deg) translateX(32vw) rotate(-360deg);
	  }
	}
	
	@keyframes large-circle {
	  0% {
		transform: rotate(0deg) translateX(22vw) rotate(0deg);
	  }
	  100% {
		transform: rotate(360deg) translateX(22vw) rotate(-360deg);
	  }
	}
}	
	
	.xxxorbiting-circle {
	  animation: circular-motion 45s linear infinite;
	  position: absolute;
	  transform-origin: center;
	}
	
	.xxxorbiting-circle-sm {
	  animation: cm-sm 5s linear infinite;
	  position: absolute;
	  transform-origin: center;
	}