.loading-backdrop {
	align-items: center;
	background-color: #f6f7fc;
	bottom: 0;
	display: flex;
	font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;
	justify-content: center;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 50;
}

.loading-backdrop .content {
	align-items: center;
	animation: appear 0.3s ease-out;
	border-radius: 21px;
	box-sizing: border-box;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px;
	height: 640px;
	width: 640px;
	box-shadow: rgba(21, 23, 26, 0.06) 0px 0.7rem 1.3rem 0px,
		rgba(21, 23, 26, 0.12) 0px 1rem 2.2rem 0px,
		rgba(21, 23, 26, 0.04) 0px -1px 0px 0px;
}

.loading-backdrop .loading-logo {
	height: 128px;
	margin-bottom: 32px;
}

.loading-backdrop blockquote {
	color: rgba(0, 0, 0, 0.84);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.47;
	margin-top: 0;
	max-width: 80%;
	padding: 24px 16px 8px 40px;
	position: relative;
	quotes: '\201C''\201D''\2018''\2019';
	text-align: center;
}
.loading-backdrop blockquote:before {
	color: rgba(0, 0, 0, 0.84);
	content: open-quote;
	display: none;
	font-size: 64px;
	left: 0;
	line-height: 1;
	position: absolute;
	top: 0;
}
.loading-backdrop blockquote footer {
	line-height: 32px;
	text-align: left;
	font-size: 16px;
	font-style: italic;
	text-align: center;
}

.loading-backdrop .loading {
	box-sizing: border-box;
	height: 16px;
	margin-top: 32px;
	position: relative;
	width: 66px;
}

.loading-backdrop .loading .dot {
	animation: pulse 0.5s infinite alternate both;
	background-color: rgba(0, 0, 0, 0.84);
	border-radius: 50%;
	height: 12px;
	position: absolute;
	width: 12px;
}
.loading-backdrop .loading .dot:nth-child(0) {
	animation-delay: 0ms;
	left: 0;
}
.loading-backdrop .loading .dot:nth-child(1) {
	animation-delay: 120ms;
	left: 28px;
}
.loading-backdrop .loading .dot:nth-child(2) {
	animation-delay: 240ms;
	left: 56px;
}

@media (max-width: 576px) {
	.loading-backdrop .loading-logo {
		height: 80px;
		margin-bottom: 16px;
	}
	#quoteText {
		font-size: 20px;
	}
	#quoteFooter {
		font-size: 14px;
	}
	.loading-backdrop blockquote {
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.loading-backdrop blockquote:before {
		font-size: 32px;
		left: 0;
		position: absolute;
	}
	.loading-backdrop .content {
		padding: 0;
	}
	.loading-backdrop .loading .dot {
		width: 8px;
		height: 8px;
	}

	.loading-backdrop .loading .dot:nth-child(0) {
		left: 0;
	}
	.loading-backdrop .loading .dot:nth-child(1) {
		left: 14px;
	}
	.loading-backdrop .loading .dot:nth-child(2) {
		left: 28px;
	}
	.loading-backdrop .loading {
		width: 33px;
	}
}

@keyframes appear {
	from {
		transform: scale(0.9);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}
@keyframes pulse {
	from {
		transform: scale(1.3);
		opacity: 1;
	}
	to {
		transform: scale(1);
		opacity: 0.5;
	}
}