/* 1a. Containers */




/* 1b. Colors */

 











/* 1c. Typography */

/* Global Fonts */


/* Website Typography */











/* Blog Typography */












/* 1d. Buttons */

/* Primary Button */

 
 





/* Blog */










/* 1e. Forms */


/* 1g. Website header */


/* 1h. Website footer */


/* 1i. Search */




/* 1j. Misc. (Animations etc.) */


.hover-underline {
	background: linear-gradient(transparent calc(100% - 2px), #111A20 1px);
	background-repeat: no-repeat;
  background-size: 0 100%;
  background-position: 0 0px;
  transition: all 0.6s cubic-bezier(0.45, 0, 0.14, 1.03);
}
.group:hover .hover-underline {
  background-size: 100% 100%;
}





/* set color palette as CSS variables for global access, can be used in any modules */
:root {
	--primary-color: #4586F0;
	--brand-01-color: #111A20;
	--neutral-01-color: #000000;
	--neutral-02-color: #363636;
	--neutral-03-color: #636363;
	--neutral-04-color: #AAAAAA;
	--neutral-05-color: #E9E9E9;
	--neutral-06-color: #F5F5F5;
	--background-01-color: #F0F8FF;
	--primary-btn-text-color: #FFFFFF;
	--primary-btn-bg-color: #4586F0;
	--primary-btn-bg-hover: #1f49a1;
	--related-articles-bg-color: #F8F8F8;
	--tag-listing-bg-color: #FFFFFF;
	--blog-post-bg-color: #FFFFFF;
}










html {
  scroll-behavior: smooth;
}

body {
	font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  font-size: 16px;
	color: #111A20;
}

/* Anchors / Links */

.link {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
	font-size: 16px;
  color: #4586F0;
	transition: all 300ms ease-in-out;
}
a {
	font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
	font-size: 16px;
}

.link:active {
  color: #111A20;
}

/* Headings */

h1,
.display-1 {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
	color: #111A20;
	font-size: 36px;
	line-height: 1.3;
	letter-spacing: 0px;
}

h2,
.display-2 {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  text-decoration: none;
	color: #111A20;
  font-size: 32px;
	line-height: 1.3;
	letter-spacing: 0px;
}

h3,
.display-3 {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  text-decoration: none;
	color: #111A20;
  font-size: 28px;
	line-height: 1.2;
	letter-spacing: 0px;
}

h4,
.display-4 {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  text-decoration: none;
	color: #111A20;
  font-size: 26px;
	line-height: 1.4;
	letter-spacing: 0px;
}

h5,
.display-5 {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
	color: #111A20;
  font-size: 22px;
	line-height: 1.5;
	letter-spacing: 0px;
}

h6,
.display-6 {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  text-decoration: none;
	color: #111A20;
  font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0px;
}

.body-xs {
	font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
	color: #AAAAAA;
	font-size: 12px !important;
	line-height: 1.6;
	letter-spacing: 0px;
}

.body-s {
	font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
	color: #636363;
  font-size: 14px !important;
	line-height: 1.6;
	letter-spacing: 0px;
}

p,
.body-m {
	font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
	color: #111A20;
	font-size: 16px !important;
	line-height: 1.6;
	letter-spacing: 0px;
}

.body-l {
	font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  text-decoration: none;
	color: #111A20;
	font-size: 18px !important;
	line-height: 1.6;
	letter-spacing: 0px;
}

/* Blockquote */

blockquote {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  text-decoration: none;
  color: #4586F0;
  font-size: 16px;
	background-color: #F0F8FF;
	line-height: 1.6;
	letter-spacing: 0px;
}

a {
	font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0px;
}

/* Desktop Font Size */
@media (min-width: 1024px) {
	h1,
	.display-1 {
		font-size: 48px;
		line-height: 1.3;
	  letter-spacing: 0px;
	}

	h2,
	.display-2 {
		font-size: 36px;
		line-height: 1.3;
	  letter-spacing: 0px;
	}

	h3,
	.display-3 {
		font-size: 32px;
		line-height: 1.2;
	  letter-spacing: 0px;
	}

	h4,
	.display-4 {
		font-size: 28px;
		line-height: 1.4;
	  letter-spacing: 0px;
	}

	h5,
	.display-5 {
		font-size: 24px;
		line-height: 1.6;
	  letter-spacing: 0px;
	}

	h6,
	.display-6 {
		font-size: 18px;
		line-height: 1.5;
	  letter-spacing: 0px;
	}

	.body-xs {
		font-size: 14px !important;
		line-height: 1.2;
	  letter-spacing: 0px;
	}

	.body-s {
		font-size: 16px !important;
		line-height: 1.5;
	  letter-spacing: 0px;
	}
  
	p,
	.body-m {
		font-size: 18px !important;
		line-height: 1.5;
	  letter-spacing: 0px;
	}

	.body-l {
		font-size: 20px !important;
		line-height: 1.5;
	  letter-spacing: 0px;
	}
	
	blockquote {
		font-size: 18px;
		line-height: 1.5;
	  letter-spacing: 0px;
	}
	

	a
	.link {
		font-size: 18px;
		line-height: 1.5;
	  letter-spacing: 0px;
	}

}


/* Blog Post Richtext Typography & Styles */

.blog-richtext h1 {
	font-family: Open Sans !important;
	color: #111A20 !important;
	font-style: normal !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	font-size: 36px !important;
	line-height: 1.3;
	letter-spacing: 0px;
	padding-top: 10px;
	padding-bottom: 20px;
}

.blog-richtext h2 {
  font-family: Open Sans !important;
	color: #111A20 !important;
	font-style: normal !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	font-size: 32px !important;
	line-height: 1.3;
	letter-spacing: 0px;
	padding-top: 12px;
	padding-bottom: 8px;
}

.blog-richtext h3 {
	font-family: Open Sans !important;
	color: #111A20 !important;
	font-style: normal !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	font-size: 28px !important;
	line-height: 1.2;
	letter-spacing: 0px;
	padding-top: 24px;
	padding-bottom: 8px;
}

.blog-richtext h4 {
	font-family: Open Sans !important;
	color: #111A20 !important;
	font-style: normal !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	font-size: 26px !important;
	line-height: 1.4;
	letter-spacing: 0px;
	padding-top: 32px;
	padding-bottom: 8px;
}

.blog-richtext h5 {
	font-family: Ubuntu !important;
	color: #111a20 !important;
	font-style: normal !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	font-size: 24px !important; 
	line-height: 1.3;
	letter-spacing: 0px;
	padding-top: 28px;
	padding-bottom: 8px;
}

.blog-richtext h6 {
	font-family: Ubuntu !important;
	color: #111a20 !important;
	font-style: normal !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.blog-richtext > :is(p, ul, ol),
.blog-richtext #hs_cos_wrapper_post_body > :is(p, ul, ol) {
  font-family: Ubuntu !important;
	color: #111a20 !important;
	font-style: normal !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	font-size: 16px !important;
	line-height: 1.7;
	letter-spacing: 0px;
}
.blog-richtext > p,
.blog-richtext #hs_cos_wrapper_post_body > p {
	padding-top: 8px;
	padding-bottom: 8px;
}

.blog-richtext table * {
	font-family: Ubuntu !important;
	font-style: normal !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: 1.7;
	letter-spacing: 0px;
}

.blog-richtext blockquote {
	color: #4586F0 !important;
  {font-family=Ubuntu, font-style=normal, font-weight=400, text-decoration=none};
	font-size: 18px !important;
	line-height: 1.7;
	letter-spacing: 0px;
	padding: 24px;
	border: 0 !important;
	text-align: center;
	background: #F0F8FF;
	margin-top: 3px;
	margin-bottom: 3px;
}
.blog-richtext blockquote p {
	color: #4586F0 !important;
}
/* .blog-richtext blockquote::before {
	content: '';
	background: #F0F8FF;
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
	width: 100%;
	height: calc(100% - calc(px + px));
	z-index: -1;
} */

.blog-richtext a {
	color: #2886DE !important;
	transition: all 300ms ease-in-out;
	{color=#111A20, font-family=Ubuntu, font-style=normal, font-weight=400, text-decoration=none};
	
	font-size: inherit;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0px;
}
.blog-richtext a:hover {
	color: #111A20 !important;
	text-decoration: underline !important;
}

.blog-richtext ul {
	padding-top: 12px;
	padding-bottom: 12px;
	list-style-type: none;
}

.blog-richtext ul li {
  position: relative;
	padding-left: 24px;
	padding-bottom: 12px;
}
.blog-richtext ul li:last-child {
	padding-bottom: 0;
}

.blog-richtext ul li::before {
	content: '\2022';
	position: absolute;
	color: #4586F0;
	top: 0;
	left: 4px;
/* 	height: 6px;
	width: 6px; 
	background-color: #4586F0; 
	border-radius: 50% !important:  */
}

.blog-richtext ol {
	padding-top: 12px;
	padding-bottom: 12px;
	list-style-type: none;
  counter-reset: custom-counter;
}

.blog-richtext ol li {
	counter-increment: custom-counter;
	position: relative;
	padding-left: 28px;
	padding-bottom: 12px;
}
.blog-richtext ol li:last-child {
	padding-bottom: 0;
}

.blog-richtext ol li::before {
	content: counter(custom-counter) '.';
	position: absolute;
	top: 0px;
	left: 4px;
	font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
	color: #4586F0;
}

.blog-richtext img {
	aspect-ratio: 837 / 484;
	max-height: 484px;
	width: 100%;
	object-position: center;
	object-fit: contain;
}

.blog-richtext hr {
	position: relative;
	padding-top: 24px;
	padding-bottom: 24px;
  border: none;
}
.blog-richtext hr::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
	width: 100%;
	height: 2px;
	background-color: #F8F8F8;
}

strong,
strong p,
strong span,
.blog-richtext strong,
.blog-richtext #hs_cos_wrapper_post_body strong {
	font-weight: 700 !important;
}

@media (min-width: 1024px) {
	.blog-richtext h1 {
		font-size: 48px !important;
		line-height: 1.3;
		letter-spacing: 0px;
		padding-top: 10px;
		padding-bottom: 20px;
	}
	
	.blog-richtext h2 {
		font-size: 36px !important;
		line-height: 1.3;
		letter-spacing: 0px;
		padding-top: 24px;
		padding-bottom: 12px;
	}
	
	.blog-richtext h3 {
		font-size: 32px !important;
		line-height: 1.2;
		letter-spacing: 0px;
		padding-top: 12px;
		padding-bottom: 12px;
	}
	
	.blog-richtext h4 {
		font-size: 28px !important;
		line-height: 1.3;
		letter-spacing: 0px;
		padding-top: 48px;
		padding-bottom: 12px;
	}
	
	.blog-richtext h5 {
		font-size: 24px !important;
		line-height: 1.6;
		letter-spacing: 0px;
		padding-top: 40px;
		padding-bottom: 4px;
	}
	
	.blog-richtext h6 {
		font-size: 18px !important;
		letter-spacing: 0px;
		padding-top: 0px;
		padding-bottom: 8px;
	}
	
	.blog-richtext > :is(p, ul, ol),
	.blog-richtext #hs_cos_wrapper_post_body > :is(p, ul, ol) {
		font-size: 18px !important;
		line-height: 1.8;
		letter-spacing: 0px;
	}
	
	.blog-richtext table * {
		font-size: 18px !important;
		line-height: 1.8;
		letter-spacing: 0px;
	}
	
	.blog-richtext > p,
	.blog-richtext #hs_cos_wrapper_post_body > p {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	.blog-richtext a {
		
		font-size: inherit;
		line-height: 1.8;
		letter-spacing: 0px;
	}
	
	.blog-richtext blockquote {
		font-size: 18px !important;
		
		line-height: 1.8;
		letter-spacing: 0px;
		padding: 45px 64px;
		margin-top: 3px;
	  margin-bottom: 3px;
	}
/* 	.blog-richtext blockquote::before {
		height: calc(100% - (px + px));
	} */
	
	.blog-richtext ul {
		padding-top: 12px;
		padding-bottom: 12px;
	}
	
  .blog-richtext ul li:not(:last-child) {
		padding-bottom: 12px;
	}

	.blog-richtext ol {
		padding-top: 12px;
		padding-bottom: 12px;
	}
	
	.blog-richtext ol li:not(:last-child) {
		padding-bottom: 12px;
	}
	
	.blog-richtext hr {
		padding-top: 40px;
	  padding-bottom: 40px;
	}
}
 





/* apply primary button colors and display 6 (h6) font for default hs buttons */
button,
.button,
.hs-button, {
  {font-weight=500, text-decoration=none, font-family='Open Sans', font-style=normal};
	color: #FFFFFF;
	background: #4586F0;
	border-radius: 50px;
}

/* Primary Button */
.btn.primary-btn {
	{font-weight=500, text-decoration=none, font-family='Open Sans', font-style=normal};
	font-size: 16px !important;
	color: #FFFFFF !important;
	background: #4586F0;
	border-radius: 50px;
}

.btn.primary-btn:hover {
	background: #1f49a1;
}

@media (min-width: 1024px) {
	.btn.primary-btn {
	  border-radius: 50px;
	  font-size: 18px !important;
	}
}




.hubspot-form :is(input, textarea, select, .hs-submit):where(:active, :focus, :focus-visible, :focus-within),
.choices.is-focused .choices__inner, .choices.is-open .choices__inner,
.hubspot-form :is(input, textarea, select):not(:placeholder-shown),
.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded],
.choices__inner:has(.choices__list .choices__item.is-selected),
.choices__inner:has(select.--filled),
.choices.--filled .choices__inner {
	border: 1px solid var(--primary-color) !important;
	outline: none !important;
}

.hs-submit input[type="submit"] {
	{font-weight=500, text-decoration=none, font-family='Open Sans', font-style=normal};
	font-size: 16px;
	color: #FFFFFF ;
	background: #4586F0;
	border-radius: 50px;
	height: 46px;
	padding-inline: 48px;
	width: max-content;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.hs-submit input[type="submit"]:hover {
	background: #1f49a1;
}

@media (min-width: 1024px) {
	.hs-submit input[type="submit"] {
		border-radius: 50px;
		font-size: 18px;
		height: 51px;
	}
}
















.footer {
  background-color: ;
}

/* Footer content */






.article-img-l {
	border-radius: 10px;
}
.article-img-m {
	border-radius: 10px;
}
.article-img-s {
	border-radius: 10px;
}

@media (min-width: 1024px) {
	.article-img-l {
	border-radius: 10px;
	}
	.article-img-m {
		border-radius: 10px;
	}
	.article-img-s {
		border-radius: 10px;
	}
}

.blog-pagination__page {
	color: #000000;
}

.blog-pagination__empty {
	color: #111A20;
}

/* Tags */
.tag {
  color: #4586F0;
	transition: all 300ms ease-in-out;
}
.tag:hover {
	color: #111A20;
	text-decoration: underline;
}













.hs-search-highlight {
	color: #1FC4C8;
}
.search-banner {
	background-color: #F8F8F8;
}
.search-result {
	background-color: #FFFFFF;
}

/* Blog listing */


/* Blog pagination */