/* "new" styles from the compiled CSS */
button {
  cursor: pointer !important;
}

.empulsify-component .pt-20 {
	padding-top: 6rem;
}

.empulsify-component .sm\:px-32 {
	padding-left: 8rem;
	padding-right: 8rem
}

/* for whatever reason, these are needed so buttons are highlighted when tabbing */

#block-wealth-management-v2-2025mainmenu .primary-nav-row button:focus-visible {
  outline: 1px solid #fff;
  border-radius: 3px;
}

.owl-nav button:focus-visible {
  outline: 1px solid #fff;
  border-radius: 3px;
}

.play-pause-button:focus-visible {
	outline: 2px solid #0061B3;
	border-radius: 3px;
}

/* CSS for overall website styles */

h1 {
	font-family: 'Open Sans';
	color: #002157;
	font-size: 64px;
	position: relative;
	text-align: center;
	font-weight: 800;
	line-height: 120%;
	margin: 0px;
}

@media only screen and (max-width: 1023px) {
	h1 {
		font-size: 44px;
		line-height: 130%;
	}
}

@media only screen and (max-width: 768px) {
	h1 {
		font-size: 40px;
		line-height: 130%;
	}
}

h2 {
	font-family: 'Open Sans';
	font-weight: 400;
	color: #002157;
	margin: 0px;
	font-size: 48px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: 0.384px;
	margin: 0px;
}

@media only screen and (max-width: 1023px) {
	h2 {
		font-size: 44px;
		line-height: 130%;
	}
}

@media only screen and (max-width: 768px) {
	h2 {
		font-size: 36px;
	}
}

h3 {
	margin: 0px;
	color: #002157;
	font-family: "Open Sans";
	font-size: 48px;
	font-style: normal;
	font-weight: 700;
	line-height: 120%;
	letter-spacing: 0.384px;
}

@media screen and (max-width: 1023px) {
	h3 {
		font-size: 40px;
	}
}

@media screen and (max-width: 768px) {
	h3 {
		font-size: 32px;
	}
}

h4 {
	font-family: "Open Sans";
	font-size: 40px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
	letter-spacing: -0.4px;
	margin: 0px !important;
	padding: 0px !important;
}

h5 {
	font-family: "Open Sans";
	font-size: 32px;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	letter-spacing: -0.16px;
	margin: 0px;
}

h6 {
	color: var(--Blue-Ocean, #002157);
	font-family: "Open Sans";
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 120%;
	letter-spacing: -0.12px;
	margin: 0px;
}

.caption {
	font-family: "Open Sans";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0.06px;
	color: #666;
}

.link {
	text-decoration: underline;
	color: var(--Primary-Blue, #006EDB);
}

.eyebrow {
	font-family: "Open Sans";
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.09px;
}

@media only screen and (max-width: 768px) {
	.eyebrow {
		font-size: 16px;
	}
}

/* button styles */

button {
	all: unset;
}

.button:focus {
	box-shadow: 0px 0px 0px 4px rgba(0, 112, 227, 0.25);
}

.button {
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--Max, 999px);
	width: auto;
	align-self: flex-start;
	font-family: 'Open Sans';
	cursor: pointer;
	white-space: nowrap;
}

.button label {
	cursor: pointer;
	all: unset;
}

.small-button {
	height: 30px;
	gap: 4px;
	padding: 0px 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;

	.button-icon {
		width: 18px;
		height: 18px;
	}
}

.small-button:hover {
	.button-icon {
		transform: translateX(4px);
	}
}

.medium-button {
	height: 40px;
	gap: 8px;
	padding: 0px 20px;
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;

	.button-icon {
		width: 22px;
		height: 22px;
	}
}

.medium-button:hover {
	.button-icon {
		transform: translateX(5px);
	}
}

.large-button {
	height: 48px;
	gap: 12px;
	padding: 0px 24px;
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;

	.button-icon {
		width: 24px;
		height: 24px;
	}
}

.large-button:hover {
	.button-icon {
		transform: translateX(6px);
	}
}

.primary-button {
	margin: 0;
	background: var(--Primary-Blue, #0070E3);
	color: #FFFFFF;
}

.primary-button:hover {
	background: var(--Blue-Harbor, #005FCC);
}
.primary-button:focus {
	color: var(--Primary-White, #FFF);
}

.secondary-button {
	margin: 0;
	box-sizing: border-box;
	color: var(--Primary-Blue, #0070E3);
	border: 2px solid var(--Primary-Blue, #0070E3);
	background: var(--Gray-gray-0, #FFF);
}

.secondary-button:hover {
	background: #E1EFFF;
}

.medium-button.tertiary-button {
	padding: 0px 8px;
}

.tertiary-button {
	color: #0070E3;
}

.tertiary-button:hover {
	background: #E1EFFF;
}

.button-icon {
	display: flex;
	transition: transform 500ms ease;
	-webkit-transition: transform 500ms ease;
}

.primary-button.dark {
	background: var(--Primary-White, #FFF);
	color: #0061B3;
}

.primary-button.dark:hover {
	background: #E1EFFF;
}

.secondary-button.dark {
	color: var(--Primary-White, #FFF);
	background: rgba(0, 0, 0, 0);
}

.secondary-button.dark.small-button {
	border: 1px solid var(--Primary-White, #FFF);
}

.secondary-button.dark.medium-button {
	border: 2px solid var(--Primary-White, #FFF);
}

.secondary-button.dark.large-button {
	border: 2px solid var(--Primary-White, #FFF);
}

.secondary-button.dark:hover {
	background: var(--Blue-Fog, rgba(0, 119, 204, 0.15));
}

/* The ripple effect on the buttons */

@keyframes ripple {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

span.ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	animation: ripple 600ms linear;
	background-color: rgba(255, 255, 255, 0.7);
}

/* start: previously custom-style.css */
.infographic-section {
	padding-bottom: 0;
}

.scroll-section {
	padding: 64px;
}

@media screen and (max-width: 1199px) {
	.scroll-section {
		padding: 16px;
	}
}

.align-center-then-start-from-tablet {
	align-items: center;
	@media screen and (min-width: 769px) {
		align-items: flex-start;
	}
}

.align-self-center-until-tablet {
	@media screen and (max-width: 768px) {
		align-self: center;
	}
}

.ul-override {
	list-style: disc !important;
	color: #002157;
}
.li-override {
	margin-left: 18px !important;
}

.u-text-bold {
	font-weight: 700;
}

@media (min-width: 768px) {
	.u-visible-until-tablet {
		display: none !important;
	}
}
@media (min-width: 1024px) {
	.u-visible-until-desktop {
		display: none !important;
	}
}

.u-visible-from-tablet {
	display: none;
}
@media (min-width: 768px) {
	.u-visible-from-tablet {
		display: block;
	}
}

.u-visible-from-desktop {
	display: none;
}
@media (min-width: 1024px) {
	.u-visible-from-desktop {
		display: block;
	}
}

.u-visible-from-desktop--contents {
	display: none;
}
@media (min-width: 1024px) {
	.u-visible-from-desktop--contents {
		display: contents;
	}
}

/* end: previously custom-style.css */