/**
 * Header Block Component - Styles
 *
 * All colors derived from style.css variables
 * Sizes in rem except borders (px)
 * All margins/padding in rem for responsive scaling
 */

.ws-header-block-wrap {
	position: relative;
}

.ws-header-block-tagline {
	font-size: 1rem;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--text);
}
.ws-header-block-text {
	color: var(--text);
}
.ws-header-block-content.one_col .ws-header-block-text {
	margin-bottom: 2rem
}
.ws-header-block-content.one_col {
	max-width: 40rem
}
@media (min-width: 992px) {
	.ws-header-block-content.two_cols {
		display: flex;
		justify-content: space-between;
	}
	.ws-header-block-content.two_cols > * {
		width: calc(50% - 2.5rem);
        max-width: 35rem;
	}
	.ws-header-block-content.two_cols .ws-header-block-title {
		hyphens: auto;
	}
	.ws-header-block-content.one_col .ws-header-block-text {
		margin-top: 1.5rem
	}
}
@media (max-width: 991px) {
	.ws-header-block-text {
		margin-top: 1.5rem
	}
}
@media (max-width: 767px) {
	.ws-header-block-title {
		hyphens: auto;
	}
}
/* ====================================
   ANIMATIONS
   ==================================== */

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}