
@keyframes hs-cta-loading__animation {
	to {
		transform: translateX(100%);
	}
}

.hs-cta-embed > .hs-cta-embed__skeleton {
	margin: auto;
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: -1;
	background-image: radial-gradient(circle 50px at 50px 50px, #d3d3d3 99%, transparent 0), linear-gradient(100deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .5) 50%, hsla(0, 0%, 100%, 0) 80%), linear-gradient(#d3d3d3 20px, transparent 0), linear-gradient(#d3d3d3 20px, transparent 0), linear-gradient(#d3d3d3 20px, transparent 0), linear-gradient(#d3d3d3 20px, transparent 0);
	background-repeat: repeat-y;
	background-size: 100px 200px, 50px 200px, 150px 200px, 350px 200px, 300px 200px, 250px 200px;
	background-position: 0 0, 0 0, 120px 0, 120px 40px, 120px 80px, 120px 120px;
}

.hs-cta-embed:not(.hs-cta-embed__loaded):not(.hs-cta-simple-placeholder) {
	position: relative;
	display: inline-block;
}

.hs-cta-embed:not(.hs-cta-embed__loaded):not(.hs-cta-simple-placeholder):has(img):after {
	content: " ";
	z-index: 1;
	display: block;
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 80%);
}

.hs-cta-loading-dot__container:not(.hs-cta-embed__loaded):not(.hs-cta-simple-placeholder) {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1.25em;
	width: 4.5em;
	z-index: 2;
}

.hs-cta-loading-dot {
	position: relative;
	background-color: currentColor;
	color: #00a4bd;
	border-radius: 50%;
	height: 1em;
	width: 1em;
	animation: 1s linear 0s infinite normal none running loadingAnimation, 0s normal none running loadingColorAnimation;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.hs-cta-loading-dot:not(:last-child) {
	margin-right: .75em;
}

.hs-cta-loading-dot:nth-child(2) {
	animation-delay: -.66s;
}

.hs-cta-loading-dot:nth-child(3) {
	animation-delay: -.33s;
}

@keyframes loadingColorAnimation {
	25% {
		background-color: #cbd6e2;
	}
	
	75% {
		background-color: #cbd6e2;
	}
}

@keyframes loadingAnimation {
	0%, to {
		transform: translateY(0);
	}
	
	25% {
		transform: translateY(.25em);
	}
	
	50% {
		transform: translateY(0);
	}
	
	75% {
		transform: translateY(-.25em);
	}
}
