section.navigate-by-content-type:not(.tpp-theme-white) { 
	padding: 20px 0;
}

section.navigate-by-content-type.tpp-theme-dark-green div.section-title { 
	color: #ffffff;
}


section.navigate-by-content-type a.content-type-panel {
	padding: 25px;
	transition: all 0.2s;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	cursor: pointer;

	text-decoration: none;

	transition: all 0.2s;
}

section.navigate-by-content-type a.content-type-panel div.content {
	transition: all 0.2s;
}

section.navigate-by-content-type a.content-type-panel p.title {
	font-size: 24px;
	font-weight: bold;
	color: inherit;
}

section.navigate-by-content-type a.content-type-panel p.listing-copy { 
	font-size: 17px;
	font-weight: 500;
	color: inherit;
	margin: 0;
}

section.navigate-by-content-type a.content-type-panel div.button-container { 
	margin-top: 20px;
}

section.navigate-by-content-type a.content-type-panel div.button {
	display: inline-flex;
	border-color: var(--hl-light-green);
	background-color: var(--hl-light-green);
	align-items: center;
	gap: 15px;
}


section.navigate-by-content-type a.content-type-panel div.button:after { 
	content: "";

	width: 12px;
	height: 20px;
	background-image: url("/_assets/btn-arrow-hl-dark-green.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

section.navigate-by-content-type a.content-type-panel div.icon { 
	height: 55px;
	margin-bottom: 15px;
}

section.navigate-by-content-type a.content-type-panel img.icon {
	height: 55px;
	width: 55px;
	object-fit: contain;
}

section.navigate-by-content-type a.content-type-panel img.icon.hover { 
	display: none;
}

section.navigate-by-content-type a.content-type-panel:hover { 
	background-color: var(--hl-dark-green);
	color: #ffffff;
}

section.navigate-by-content-type a.content-type-panel:hover p.title { 
	color: var(--hl-light-green);
}

section.navigate-by-content-type a.content-type-panel:hover img.icon:not(.hover) {
	display: none;
}

section.navigate-by-content-type a.content-type-panel:hover img.icon.hover { 
	display: block;
}

/*** Themes ***/

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

/*** Panel Themes ***/

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


section.navigate-by-content-type div.content-types-container.tpp-panel-theme-dark-green a.content-type-panel { 
	background-color: var(--hl-dark-green);
	color: #ffffff;
}

section.navigate-by-content-type div.content-types-container.tpp-panel-theme-dark-green a.content-type-panel p.title { 
	color: var(--hl-light-green);
}

section.navigate-by-content-type div.content-types-container.tpp-panel-theme-light-taupe a.content-type-panel { 
	background-color: var(--hl-light-taupe);
	color: var(--hl-dark-green);
}

section.navigate-by-content-type div.content-types-container.tpp-panel-theme-white a.content-type-panel {
	background-color: #ffffff;
	color: var(--hl-dark-green);
}

section.navigate-by-content-type div.content-types-container.tpp-panel-theme-purple-teal-gradient a.content-type-panel { 
	background-image: url("/template-tool/_assets/bg-purple-teal-gradient.jpg");
	background-color: var(--hl-light-taupe);
}

/* Default Hover: Dark green panel */

section.navigate-by-content-type div.content-types-container.tpp-panel-theme-white a.content-type-panel:hover,
section.navigate-by-content-type div.content-types-container.tpp-panel-theme-purple-teal-gradient a.content-type-panel:hover,
section.navigate-by-content-type div.content-types-container.tpp-panel-theme-light-taupe a.content-type-panel:hover {
	background-image: none;
	background-color: var(--hl-dark-green);
	color: #ffffff;
}

/* If dark green container, then use a different colour for the panel on hover */

section.navigate-by-content-type.tpp-theme-dark-green div.content-types-container.tpp-panel-theme-white a.content-type-panel:hover,
section.navigate-by-content-type.tpp-theme-dark-green div.content-types-container.tpp-panel-theme-purple-teal-gradient a.content-type-panel:hover,
section.navigate-by-content-type.tpp-theme-dark-green div.content-types-container.tpp-panel-theme-light-taupe a.content-type-panel:hover {
	background-image: none;
	background-color: var(--hl-taupe);
	color: var(--hl-dark-green);
}

section.navigate-by-content-type.tpp-theme-dark-green div.content-types-container.tpp-panel-theme-white a.content-type-panel:hover p.title,
section.navigate-by-content-type.tpp-theme-dark-green div.content-types-container.tpp-panel-theme-purple-teal-gradient a.content-type-panel:hover p.title,
section.navigate-by-content-type.tpp-theme-dark-green div.content-types-container.tpp-panel-theme-light-taupe a.content-type-panel:hover p.title { 
	color: var(--hl-dark-green);
}

section.navigate-by-content-type.tpp-theme-dark-green div.content-types-container.tpp-panel-theme-white a.content-type-panel:hover div.button,
section.navigate-by-content-type.tpp-theme-dark-green div.content-types-container.tpp-panel-theme-purple-teal-gradient a.content-type-panel:hover div.button,
section.navigate-by-content-type.tpp-theme-dark-green div.content-types-container.tpp-panel-theme-light-taupe a.content-type-panel:hover div.button { 
	border-color: var(--hl-dark-green);
	background-color: var(--hl-dark-green);
	color: #ffffff;
}

section.navigate-by-content-type.tpp-theme-dark-green div.content-types-container.tpp-panel-theme-white a.content-type-panel:hover div.button:after,
section.navigate-by-content-type.tpp-theme-dark-green div.content-types-container.tpp-panel-theme-purple-teal-gradient a.content-type-panel:hover div.button:after,
section.navigate-by-content-type.tpp-theme-dark-green div.content-types-container.tpp-panel-theme-light-taupe a.content-type-panel:hover div.button:after {
	background-image: url("/_assets/btn-arrow-hl-light-green.png");
}

section.navigate-by-content-type:not(.tpp-theme-white) div.content-types-container.tpp-panel-theme-dark-green a.content-type-panel:hover  {
	background-color: #ffffff;
	color: var(--hl-dark-green);
}

section.navigate-by-content-type.tpp-theme-white div.content-types-container.tpp-panel-theme-dark-green a.content-type-panel:hover {
	background-color: var(--hl-light-taupe);
	color: var(--hl-dark-green);
}

section.navigate-by-content-type div.content-types-container.tpp-panel-theme-dark-green a.content-type-panel:hover p.title { 
	color: var(--hl-dark-green);
}