html {
	scroll-behavior: smooth;
}

.hero-graphic-main.heartways-graphic-main .front-page-logo.heartways-logo {
	background-image: url('../images/sub/heartways/logo.svg');
	border-bottom: 5px solid #fff;
	width: 25%;
	padding-bottom: 10%;
	margin-bottom: 15px;
	background-size: 95%;
	background-position: center top;
}

.hero-graphic-main.heartways-graphic-main p {
	font-size: 21px;
	font-size: clamp(18px, 2vw, 21px);
}


.hero-graphic-main .carousel > li .inner .copy span {
	transform: translate(0);
}

.hero-graphic-main .carousel > li .inner .copy span {	
	transform: translate(0) !important;
	opacity: 1 !important;
}

.banner {
	background-color: transparent;
}

#slide1-heartways {
	background-image: url('../images/sub/heartways/hero-banner-1.jpg');
	background-position: center left;
}

#slide2-heartways {
	background-image: url('../images/sub/heartways/hero-banner-2.jpg');
	background-position: center right;
}

#slide3-heartways {
	background-image: url('../images/sub/heartways/hero-banner-3.jpg');
	background-position: center left;
}

#slide4-heartways {
	background-image: url('../images/sub/heartways/hero-banner-4.jpg');
	background-position: center left;
}
.hero-graphic-main .carousel > li .inner .copy {
	width: 100%;
	font-weight: 700;
}




@media screen and (min-width: 550px) {
	.hero-graphic-main .carousel > li .inner {
		transform: translate(-50%, -50%);
	}

	.hero-graphic-main .carousel > li .inner .copy {
		text-align: left;
	}
	.hero-graphic-main .carousel > li .inner .inner-wrap {
		width: 50%;
		
	}
	#slide2-heartways .inner-wrap {
		float: right;
		width: 37.5%;
		text-align: right;
	}
	#slide2-heartways .inner-wrap .copy {
		text-align: right;
	}
}


@media (min-width: 1520px) {
	.hero-graphic-main .carousel > li .inner .copy {
		font-size: 2.5vw;
		line-height: 1.2;
	}
	.hero-graphic-main.heartways-graphic-main p {
		font-size: 1.5vw;
	}

}

h2 {
	font-size: 2em; 
	line-height: 1;
}

.intro h2 small {
	color: #6ebe4a;
	font-size: .65em;
	line-height: 1;
}

.product-cards {	
	background-image: url('../images/sub/heartways/product-card-back-heartways.png'), linear-gradient(#ffffff 25%, #A6DEF8);
}

.product-cards a {
	display: block;
}

.product-cards::before {
	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 85%);
}

.product-cards ul li:first-child .top-image {
	background-image: url('../images/sub/heartways/explore-hh.jpg');	
}

.product-cards ul li:nth-child(2) .top-image {
	background-image: url('../images/sub/heartways/explore-hos.jpg');	
}

.product-cards ul li:first-child .top-image .icon::before {
	background-image: url('../images/sub/heartways/icon-hh.svg');	
}

.product-cards ul li:nth-child(2) .top-image .icon::before {
	background-image: url('../images/sub/heartways/icon-hos.svg');
}

/* Service Lists */
.heartways-content {
	position: relative;
	scroll-margin-top: 130px;
	&:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		opacity: .052;
		background-repeat: no-repeat;
		background-size: 45%;
		background-position: center right;
		background-image:url('../images/sub/heartways/blue-teal-bg.svg');
		z-index: -1;
	}
}


.heartways-hospice {
	position: relative;
	scroll-margin-top: 130px;
	&:before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		opacity: .052;
		background-repeat: no-repeat;
		background-size: 45%;
		background-position: center left;
		background-image:url('../images/sub/heartways/blue-teal-bg.svg');
		z-index: -1;
	}
}

.about-heartways {
	display: flex;
	align-items: stretch;
	&:before {
		content: '';
		display: block;
		width: 45%;
		background-size: cover;
		background-image: url('../images/sub/heartways/about-heartway-services.png');
		background-repeat: no-repeat;
		background-position: right center;
	}
	.about-heartways-content {
		padding: 8em 2em;
		width: 55%;
		.inner-wrap {
			max-width: 800px;
			width: 100%;
		}
		h2 {
			font-size: 52px;
			font-size: clamp(42px, 3vw, 52px);
			small {
				display: block;
				font-size: 36px;
				font-size: clamp(24px, 2.5vw, 36px);
			}
			margin: 0 0 10px;
		}
		h3 {
			font-size: 28px;
			font-size: clamp(21px, 2vw, 28px);
			color:#6ebe4a;
			margin:0;
			font-weight: 600;
		}
		p {
			font-size: 21px;
			font-size: clamp(18px, 1.5vw, 21px);
			line-height: 1.5;
		}
	}
}

.about-heartways-services {
	padding: 4em 2em;
	text-align: center;
	h2 {
		margin-bottom: 1.5em;
	}
	.icon {
		height: 114px;
		width: 114px;
		display: block;
		margin: 0 auto 1em;
		background-size: 100%;
		&.patient-edu {
			background-image: url('../images/sub/heartways/patient-edu.svg');
		}
		&.daily-routine {
			background-image: url('../images/sub/heartways/daily-routine.png');
		}
		&.monitoring-symptoms {
			background-image: url('../images/sub/heartways/monitoring-symptoms.svg');
		}
		&.safe-activity {
			background-image: url('../images/sub/heartways/safe-activity.svg')
		}
		&.coordinating-skilled {
			background-image: url('../images/sub/heartways/coordinating-skilled.svg');
		}
		&.collaborating-with-med {
			background-image: url('../images/sub/heartways/collaborating-with-med.svg');
		}
	}
	.inner > ul {
		list-style: none;
		margin:1em auto;
		padding:0;
		display: flex;
		flex-wrap: wrap;
		gap: 50px;
		justify-content: center;
		> li {
			width: calc(25% - 50px);
			margin-bottom: 1em;
			h4 {
				font-size: 22px;
				font-size: clamp(18px, 1.25vw, 22px);
				color: #6ebe4a;
				font-weight: 600;
				margin:0 0 10px;
			}
			p {
				margin:0;
			}
			> ul {
				list-style: none;
				padding:0 0 0 15px;
				margin:0;
				> li {
					position: relative;
					padding: 0 0px 0 10px;
					margin-bottom: 5px;
					&::marker {
						content: '•';
						display: inline-block;
					}
				}
			}
		}
	}
}


.about-hospice{
	display: flex;
	align-items: stretch;
	&:after {
		content: '';
		display: block;
		width: 65%;
		background-size: cover;
		background-image: url('../images/sub/heartways/about-hospice-services.png');
		background-repeat: no-repeat;
		background-position: left center;
	}
	.about-hospice-content {
		padding: 5em 0 5em 2em;
		width: 55%;
		.inner-wrap {
			max-width: 680px;
			width: 100%;
			float: right;
		}
		h2 {
			font-size: 52px;
			font-size: clamp(42px, 3vw, 52px);
			color: #008ca6;
			small {
				display: block;
				font-size: 36px;
				font-size: clamp(24px, 2.5vw, 36px);
			}
			margin: 0 0 10px;
		}
		h3 {
			font-size: 28px;
			font-size: clamp(21px, 2vw, 28px);
			color:#6ebe4a;
			margin:0;
			font-weight: 600;
		}
		p {
			font-size: 21px;
			font-size: clamp(18px, 1.5vw, 21px);
			line-height: 1.5;
		}
	}
}

.hospice-service-list {
	padding: 4em 2em;
	text-align: center;
	h2 {
		margin-bottom: 1.5em;
		color: #008ca6;
	}
	.inner > ul {
		list-style: none;
		margin:1em auto;
		padding:0;
		display: flex;
		flex-wrap: wrap;
		gap: 50px;
		
		> li {
			width: calc(25% - 50px);
			
			margin-bottom: 1em;
			.icon {
				height: 114px;
				width: 114px;
				display: block;
				margin: 0 auto 1em;
				background-size: 100%;
				&.symptom-relief {
					background-image: url('../images/sub/heartways/symptom-relief.svg');
				}
				&.patient-edu-hos {
					background-image: url('../images/sub/heartways/patient-edu-hos.svg');
				}
				&.tools-help {
					background-image: url('../images/sub/heartways/tools-help.svg');
				}
				&.emotional-spiritual {
					background-image: url('../images/sub/heartways/emotional-spiritual.svg');
				}
			}
			h4 {
			font-size: 22px;
			font-size: clamp(18px, 1.25vw, 22px);	
				color: #6ebe4a;
				font-weight: 600;
				margin:0 0 10px;
			}
			p {
				margin:0;
			}
			> ul {
				list-style: none;
				padding:0 0 0 15px;
				margin:0;
				> li {
					position: relative;
					padding: 0 0px 0 10px;
					margin-bottom: 5px;
					&::marker {
						content: '•';
						display: inline-block;
					}
				}
			}
		}
	}
}



main {
	overflow-x: hidden;
}

.brochure {
	background: linear-gradient(#3474b6, #67aecf);	
	position: relative;
	padding: 8em 2em;
	margin: 2em 0 0;
	h2 {
		color: #fff;
		margin:0;
		font-size: 48px;
		font-size: clamp(28px, 3vw, 36px);
		line-height: 1.2;
		float: left;
		width: 65%;
	}
	p {
		color: #fff;
		font-size: 32px;
		font-size: clamp(18px, 2vw, 24px);
		line-height: 1.5;
		float: left;
		width: 65%;
	}
	img {
		float: right;
		width: 60%;
		position: absolute;
		right: -20%;
		top: 50%;
		transform: translateY(-50%);
	}
	&.brochure-2 {
		background: linear-gradient(#008ba6, #6dcbdf);
		margin-bottom: 0;
	}
}



@media screen and (max-width: 1150px) {
	

}

.final-message {
	background-image: linear-gradient(#d1eafa, #fff);
	padding: 6em 0;
	text-align: center;
	p {
		color: #0076bb;
		font-size: 36px;
		font-size: clamp(24px, 3vw, 36px);
		margin:0;
	}
}



@media screen and (max-width: 1150px) {
	.about-heartways-services {
		.inner > ul {
			display: block;
			text-align: center;
			> li {
				width: 100%;
				.icon {
					margin: 0 auto 30px;
				}
				> ul {
					list-style: none;
					> li {
						&::marker {
							content: none;
						}
					}
				}
			}
		}
	}
	.hospice-service-list {
		.inner > ul {
			display: block;
			text-align: center;
			> li {
				width: 100%;
				.icon {
					margin: 0 auto 30px;
				}
			}
		}
	}
	
	.about-hospice {
		flex-direction: column;
		&:after {
			padding-bottom: 60%;
			width: 100%;
			background-size: cover;
			background-image: url('../images/sub/heartways/about-hospice-services-mobile.png');
		}
		.about-hospice-content {
			width: 90%;
			text-align: center;
			.inner-wrap {
				max-width: 100%;
			}
		}
	}
	.about-heartways {
		flex-direction: column;
		&:before {
			padding-bottom: 60%;
			width: 100%;
			background-size: cover;
			background-image: url('../images/sub/heartways/about-heartway-services-mobile.png');
		}
		.about-heartways-content {
			width: 90%;
			text-align: center;
			.inner-wrap {
				max-width: 100%;
			}
		}
	}
	.brochure {
		padding: 4em 2em;
		h2, p {
			float: none;
			width: 100%;
		}
		img {
			position: static;
			transform: none;
			width: 100%;
			float:none;
		}
	}
	.about-heartways {
		.about-heartways-content {
			padding: 4em 2em;
			.inner-wrap {
				max-width: unset;
			}
		}
	}
}


@media screen and (max-width: 650px) {
	.product-cards {
		padding: 1.5em 0px 20%;
	}
}
@media screen and (max-width: 550px) {
	.hero-graphic-main.heartways-graphic-main .front-page-logo.heartways-logo {
		position: relative;
		z-index: 2;
		margin: 20px auto 0;
		width: 50%;
		border-bottom: none;
		padding-bottom: 19%;
	}
	.hero-graphic-main .carousel > li.current .inner .copy::after {
		transform: translate(-50%, -0.8em);
	}
	.hero-graphic-main .carousel > li#slide1-heartways.current .inner .copy::after {
		transform: translate(-50%, -2.8em);
	}
	.hero-graphic-main .carousel > li .inner .copy br {
		display: none;
	}
	#slide1-heartways {
		background-image: url('../images/sub/heartways/hero-banner-1-mobile.jpg');
		background-position: center top;
	}
	
	#slide2-heartways {
		background-image: url('../images/sub/heartways/hero-banner-2-mobile.jpg');
		background-position: center top;
	}
	
	#slide3-heartways {
		background-image: url('../images/sub/heartways/hero-banner-3-mobile.jpg');
		background-position: center top;
	}
	
	#slide4-heartways {
		background-image: url('../images/sub/heartways/hero-banner-4-mobile.jpg');
		background-position: center;
	}
	.hero-graphic-main .carousel > li .inner .copy::after{
		background-color: #6ccbdf;
	}
	
	.hero-graphic-main.heartways-graphic-main p {
		font-size: 21px;
		font-size: clamp(18px, 1vw, 21px);
		position: relative;
		z-index: 2;
		width: 100%;
		text-align: center;
	}
}

.tab-panel {
	&.is-hidden {
		display: none;
		visibility: hidden;
	}
}

footer.footer-form {
	.inner {
		display: flex;
		justify-content: space-between;
	}
	.fsBody .fsForm {
		max-width: 100% !important;
	}
	.form-intro {
		width: 30%;
		h2 {
			font-weight: normal;
		}
		p {
			
			font-size: 24px;
			font-size: clamp(18px, 2vw, 24px);
			color: #000;
		}
	}
	.form-container {
		width: 67%;
	}

}
[role="tablist"] {
  min-width: 100%;
  display: flex;
  width: 100%;
  justify-content: space-between;
  > button {
	  flex: 1;
	  text-align: center;
	  font-family: proxima-nova, sans-serif;
  }
}

[role="tab"],
[role="tab"]:focus,
[role="tab"]:hover {
  display: block;
  position: relative;
  z-index: 2;
  top: 2px;
  margin: 0;
  margin-top: 4px;
  padding: 1em;
  border: 1px solid hsl(219deg 1% 72%);
  border-bottom: 2px solid #0077bc;
  border-radius: 5px 5px 0 0;
  background: hsl(220deg 20% 94%);
  outline: none;
  font-weight: 400;
  ///max-width: 22%;
  overflow: hidden;
  cursor: pointer;
  font-size: 21px;
  font-family: proxima-nova, sans-serif;
  color: #0077bc;
}

[role="tab"][aria-selected="true"] {
  padding: 2px 2px 4px;
  margin-top: 0;
  border-width: 2px;
  border-top-width: 6px;
  border-top-color: rgb(36 116 214);
  border-bottom-color: hsl(220deg 43% 99%);
  background: hsl(220deg 43% 99%);
}

[role="tab"][aria-selected="false"] {
  border-bottom: 1px solid hsl(219deg 1% 72%);
}

[role="tab"] span.focus {
  display: inline-block;
  margin: 2px;
  padding: 4px 6px;
}

[role="tab"]:hover span.focus,
[role="tab"]:focus span.focus,
[role="tab"]:active span.focus {
  padding: 2px 4px;
  border: 2px solid rgb(36 116 214);
  border-radius: 3px;
}

[role="tabpanel"] {
  padding: 1rem;
  border: 2px solid hsl(219deg 1% 72%);
  border-radius: 0 5px 5px;
  background: hsl(220deg 43% 99%);
  min-height: 10em;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
}

[role="tabpanel"].is-hidden {
  display: none;
}

[role="tabpanel"] p {
  margin: 0;
}

@media screen and (max-width: 1024px) {
	footer.footer-form {
		.inner {
			flex-direction: column;
		}
		.form-intro {
			 width: 100%;
		}
		.form-container {
			width: 100%;
		}
	}
	[role="tab"], [role="tab"]:focus, [role="tab"]:hover {
		font-size: 18px;
	}
}