/* For the Header Page Panel */

header {
	position: relative;
	padding: 20px 0;
	background-color: transparent;
}

header.has-media div.wrapper div.col-1 { 
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: 20px 40px;
}

header div.wrapper div.col-1 div.media { 
	background-position: right top;
	background-size: contain;
	background-repeat: no-repeat;

	text-align: right;
}

header div.wrapper div.col-1 div.media img { 
	height: 100%;
	width: 100%;
	object-fit: contain;
	object-position: right top;
}

header div.wrapper div.col-1 div.media div.video-container {
	height: 100%;
}

header div.wrapper div.col-1 div.media div.video-container video { 
	width: 100%;
	height: 100%;
	object-position: right top;
}

header .header-intro {
	width: 100%;
}

header a.home-page-link {
	text-decoration: none;
	color: inherit;
}

header div.header-intro {
	position: relative;
	z-index: 2;
	padding: 0;
	background-color: #ffffff;
	color: var(--hl-dark-green);
	max-width: 450px;
}

header div.header-intro a.title-copy-link,
header div.header-intro a.full-header-link { 
	display: block;
	padding: 30px;
	text-decoration: none;
}

header div.header-intro a.full-header-link div.copy,
header div.header-intro a.title-copy-link div.copy {
	padding-top: 20px;
}

header div.header-intro a.title-link {
	display: block;
	padding: 30px 30px 10px 30px;
	text-decoration: none;
}

header div.header-intro a.title-link + div.copy { 
	padding: 10px 30px 30px 30px;
}

header div.header-intro div.copy a { 
	border-bottom-color: var(--hl-light-green);
}

header div.header-title {
	font-size: 38px;
}

header div.header-title > :last-child { 
	margin-bottom: 0;
}

header div.header-intro p, a, h1, h2, h3, h4, h5, h6 {
	color: inherit;
}

header div.header-intro p { 
	line-height: var(--text-line-height);
}

header div.title.has-logo {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
}

header div.title .logo-container {
	margin: 0;
	flex-shrink: 0;
}

header div.title .logo-container img {
	margin: 0;
}

header div.copy > :last-child { 
	margin-bottom: 0; 
}

header div.background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

header div.background > div.video-container { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

header div.background > div.video-container > video { 
	height: 100%;
	width: 100vw;
	object-fit: cover;
}

/*** Buttons ***/
header div.header-buttons {
	margin-top: 0;
	padding: 0 30px 30px 30px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 15px;
	flex-wrap: wrap;
	align-items: center;
}

header a.header-button.download,
header a.header-button.contact-us { 
	border: 1px solid var(--hl-dark-green);
	background-color: var(--hl-dark-green);
	color: #ffffff;
	padding: 7px 12px;
	text-decoration: none;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
	justify-content: space-between;
	flex-basis: calc(50% - 10px);
	font-weight: 400;
	font-size: 15px;
	transition: all 0.2s;
}

header a.header-button.download:after,
header a.header-button.contact-us:after,
header a.header-button.link:after {
	content: "";
	display: inline-block;
	width: 18px;
	height: 16px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

header a.header-button.download:after {
	background-image: url("/_assets/icon-download-2-hl-light-green.png")
}

header a.header-button.contact-us:after { 
	background-image: url("/_assets/icon-envelope-hl-light-over-mid-green.png");
}

header a.header-button.download:hover,
header a.header-button.contact-us:hover {
	background-color: #ffffff;
	color: var(--hl-dark-green);
}

header a.header-button.download:hover:after {
	background-image: url("/_assets/icon-download-2-hl-dark-green.png")
}

header a.header-button.contact-us:hover:after {
	background-image: url("/_assets/icon-envelope-hl-dark-over-light-green.png");
}

header a.header-button.link { 
	color: var(--hl-dark-green);
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	text-decoration: none;
	transition: all 0.2s;

	grid-column-start: 1;
	grid-column-end: 3;
}

header a.header-button.link:after { 
	background-size: 14px;
	transition: all 0.2s;
}

header a.header-button.link:after {
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
	transform: rotate(-45deg);
}

header a.header-button.link:hover { 
	text-decoration: underline;
}

header a.header-button.link:hover:after { 
	transform: rotate(0);
}

/*** Themes ***/

/*
	white
	light-taupe
	dark-green
	light-green
	multi-gradient
	light-green-teal-gradient
	purple-teal-gradient
	light-green-purple-gradient
*/

header.tpp-theme-dark-green div.header-intro  { 
	background-color: var(--hl-dark-green);
	color: #ffffff;

}

header.tpp-theme-dark-green a.header-button.download,
header.tpp-theme-dark-green a.header-button.contact-us { 
	border-color: var(--hl-light-green);
	background-color: var(--hl-light-green);
	color: var(--hl-dark-green);
	height: 100%;
}

header.tpp-theme-dark-green a.header-button.download:after { 
	background-image: url("/_assets/icon-download-2-hl-dark-green.png");
}

header.tpp-theme-dark-green a.header-button.contact-us:after {
	background-image: url("/_assets/icon-envelope-hl-dark-over-light-green.png");
}

header.tpp-theme-dark-green a.header-button.download:hover,
header.tpp-theme-dark-green a.header-button.contact-us:hover { 
	background-color: #ffffff;
}

header.tpp-theme-dark-green a.header-button.link { 
	color: var(--hl-light-green);
}

header.tpp-theme-dark-green a.header-button.link:after { 
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
}



/*****/

header.tpp-theme-light-taupe div.header-intro { 
	background-color: var(--hl-light-taupe);
}

header.tpp-theme-light-green div.header-intro {
	background-color: var(--hl-light-green);
}

header.tpp-theme-multi-gradient div.header-intro {
	background: url("/template-tool/_assets/bg-multi-gradient.jpg") no-repeat center;
	background-size: cover;
}

header.tpp-theme-light-green-teal-gradient div.header-intro {
	background: url("/template-tool/_assets/bg-light-green-teal-gradient.jpg") no-repeat center;
	background-size: cover;
}

header.tpp-theme-purple-teal-gradient div.header-intro {
	background: url("/template-tool/_assets/bg-purple-teal-gradient.jpg") no-repeat center var(--hl-light-green);
	background-size: cover;
}

header.tpp-theme-light-green-purple-gradient div.header-intro {
	background: url("/template-tool/_assets/bg-light-green-purple-gradient.jpg") no-repeat center;
	background-size: cover;
}

@media (max-width: 600px) {
	header.has-media div.wrapper div.col-1 { 
		grid-template-columns: 1fr;
	}

	header div.header-intro { 
		max-width: 100%!important;
	}

	header.has-media div.wrapper div.col-1 div.media img,
	header.has-media div.wrapper div.col-1 div.media div.video-container video {
		object-position: center top;
	}
}