.key-contacts-v3 { font-family: Roobert, sans-serif; }
.key-contacts-v3 h1 { color: #2C5E4F; border-bottom: 2px solid #C3D544; padding-bottom: 5px; width: fit-content; }

.key-contacts-v3 .header { margin-bottom: 30px; display: flex; flex-direction: row; align-items: center; gap: 30px; }
.key-contacts-v3 .header h2 { color: #ffffff; flex-basis: 100%; font-family: berlingske_sans_roundlight, sans-serif; font-size: 38px; }

.key-contacts-v3 .header .buttons { flex-shrink: 0; display: flex; flex-direction: row; gap: 20px; }

.key-contacts-v3 .header .buttons a,
.key-contacts-v3 .header .buttons button,
.key-contacts-v3 .carousel-controls a {
	font-size: 16px;
	font-family: Roobert, sans-serif;
	display: flex;
	flex-direction: row;
	gap: 14px;
	align-items: center;
}

.key-contacts-v3 .key-contacts-list { gap: 3em; justify-content: center; }
.key-contacts-v3 .key-contact { position: relative; background-repeat: no-repeat; background-size: cover; overflow-y: hidden; background-position: center top; height: 280px; font-size: 16px; }
.key-contacts-v3 .key-contact .key-contact-text { width: 100%; background-color: rgba(0,0,0,0.3); color: #fff; padding: 0.75em 1em; padding-bottom: .5em; position: absolute; bottom: 0; left: 0; transition: .25s ease; z-index: 1; }

.key-contact-v3.key-contact  a.key-contact-profile { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; }

button.key-contact-close-profile { position: absolute; top: 0; right: 0; width: 30px; height: 30px; background-color: var(--hl-light-green); display: none; z-index: 5; background-image: url("/_assets/icon-close-hl-dark-green.png"); background-size: 50%; background-position: center;  background-repeat: no-repeat;  }

.key-contact-v3.touched button.key-contact-close-profile { display: block; }

button.key-contacts-v3-defocus { width: 1px; height: 1px; flex-shrink: 0; }


.key-contact-container h3,
.key-contacts-v3 .key-contact .key-contact-text h3 { font: inherit; margin-bottom: .5em; font-size: 16px; display: block; color: #fff; }

.key-contact-container p,
.key-contacts-v3 .key-contact .key-contact-text p { font: inherit; color: #fff; font-size: 14px; display: block; }


.key-contacts-v3 .key-contact:not(.clicked):not(.touched):hover .key-contact-card { transform: translateY(0); }
.key-contacts-v3 .key-contact:not(.clicked):not(.touched):hover .key-contact-card:before { top: 0; }
.key-contacts-v3 .key-contact:not(.clicked):not(.touched):hover .key-contact-text { background-color: rgba(0,0,0,0); }

.key-contacts-v3 .key-contact:not(.clicked):not(.touched):hover .key-contact-text.text-top { opacity: 0; }

.key-contacts-v3 .key-contact.touched .key-contact-card { transform: translateY(0); }
.key-contacts-v3 .key-contact.touched .key-contact-card:before { top: 0; }
.key-contacts-v3 .key-contact.touched .key-contact-text { background-color: rgba(0, 0, 0, 0); }



.key-contacts-v3 .key-contact .key-contact-card { position: relative; z-index: 1; width: 100%; transform: translateY(100%); transition: transform 0.4s ease-in-out; color: #fff; padding: 1em; display: flex; height: 100%; flex-direction: column; justify-content: space-between; }
.key-contacts-v3 .key-contact .key-contact-card:before { content: ""; display: block; position: absolute; top: 100%; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.3); overflow: hidden; width: 100%; height: 100%; transition: all 0.4s ease-in-out; }

.key-contacts-v3 .key-contact .key-contact-card ul { font: inherit; position: relative; display: flex; list-style: none; flex-direction: column; gap: 0.5em; z-index: 4; margin-left: 0; }
.key-contacts-v3 .key-contact .key-contact-card ul li { display: flex; gap: .5em; align-items: center; }
.key-contacts-v3 .key-contact .key-contact-card ul li .image-text { font: inherit; display: flex; flex-direction: row; gap: 10px; }
.key-contacts-v3 .key-contact .key-contact-card ul li .image-text img { width: 18px; height: auto; }
.key-contacts-v3 .key-contact .key-contact-card ul li p { font: inherit; margin-bottom: 0; color: #fff; }
.key-contacts-v3 .key-contact .key-contact-card ul li a { font: inherit; text-decoration: none; color: #fff; }

.key-contacts-v3 .key-contact .key-contact-card a:not(.social-link):hover { text-decoration: underline; }

.key-contacts-v3 .key-contact .key-contact-card .key-contact-bottom { z-index: 2; position: relative; }
.key-contacts-v3 .key-contact .key-contact-card .key-contact-bottom p:last-child { margin-bottom: 3px; }

.key-contacts-v3 .key-contact .key-contact-card .key-contact-bottom .key-contact-profile { z-index: 2; }

.key-contacts-v3 .key-contact .key-contact-card .key-contact-bottom .icons { position: relative; display: inline-flex; flex-direction: row; gap: 20px; align-items: center; margin: 0 0 20px 0; z-index: 3; }
.key-contacts-v3 .key-contact .key-contact-card .key-contact-bottom .icons > * { height: 16px; }

.key-contacts-v3 .key-contact .key-contact-card .key-contact-bottom .details { position: relative; z-index: 1; }

.key-contacts-v3 .slick-slider.carousel { margin: 0 -10px; }
.key-contacts-v3 .slick-slide.panel-wrapper { padding: 0 10px; }

.key-contacts-v3 .carousel-controls {
	margin-top: 20px;
	display: flex;
	flex-direction: row;
	gap: 20px;
	justify-content: space-between;
	align-items: center;
}

.key-contacts-v3 .carousel-controls .carousel-buttons {
	display: flex;
	flex-direction: row;
	gap: 20px;
	justify-content: left;
}

.key-contacts-v3 .carousel-controls .slick-arrow {
	font-size: 0;
	border: 1px solid #333333;
	background-color: #ffffff;
	width: 40px;
	height: 40px;
	background-image: url("/_assets/btn-arrow-dark-green-1.png");
	background-size: auto 24px;
	background-position: center;
	background-repeat: no-repeat;
}

.key-contacts-v3 .carousel-controls .slick-arrow.slick-prev {
	transform: rotate(180deg);
}

/*** (seemingly) Standard style for the contacts panel and "Email us" button. ***/
/*** On the user control, set ContaintCssClass="c2025" ***/

.key-contacts-v3.c2025 {
	background-color: var(--hl-dark-green);
	padding: 40px 0;
}

.key-contacts-v3.c2025 .header h2 {
	font-family: Roobert, sans-serif;
	font-size: 35px;
	font-weight: 300;
	color: var(--hl-light-green);
	margin: 0;
}

.key-contacts-v3.c2025 .carousel-controls .slick-arrow {
	width: 36px;
	height: 36px;
	background-size: 17px;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 0;
	border: 1px solid var(--hl-light-green);
	background-color: transparent;
	/* Assumes the dark green background set above */
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
}

.key-contacts-v3.c2025.light-background .carousel-controls .slick-arrow {
	border-color: var(--hl-dark-green);
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
}

.key-contacts-v3.c2025.white-background .carousel-controls .slick-arrow {
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
}

.key-contacts-v3.c2025 .carousel-controls .slick-arrow:hover {
	background-color: var(--hl-light-green);
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
}

.key-contacts-v3 a.btn-contact-us,
.key-contacts-v3 a.btn-see-all {
	background-color: var(--hl-light-green);
	color: var(--hl-dark-green);
	border: 1px solid var(--hl-light-green);
}

.key-contacts-v3.c2025.light-background a.btn-contact-us,
.key-contacts-v3.c2025.light-background a.btn-see-all {
	background-color: var(--hl-dark-green);
	color: #ffffff;
	border: 1px solid var(--hl-dark-green);
}

.key-contacts-v3.c2025.light-background a.btn-contact-us:before {
	background-image: url("/_assets/icon-envelope-hl-light-over-mid-green.png");
}

.key-contacts-v3.c2025 a.btn-see-all:after {
	content: "";
	width: 16px;
	height: 16px;
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.key-contacts-v3.c2025.light-background a.btn-see-all:after {
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
}


.key-contacts-v3 a.btn-contact-us.mobile,
.key-contacts-v3 a.btn-see-all.mobile {
	display: none;
}

.key-contacts-v3.c2025 a.btn-contact-us:before {
	content: "";
	width: 26px;
	height: 20px;
	background-image: url("/_assets/icon-envelope-hl-dark-over-light-green.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.key-contacts-v3.c2025 a.btn-contact-us:hover,
.key-contacts-v3.c2025 a.btn-see-all:hover {
	background-color: var(--hl-dark-green);
	color: #ffffff !important;
}

.key-contacts-v3.c2025.light-background a.btn-contact-us:hover,
.key-contacts-v3.c2025.light-background a.btn-see-all:hover {
	background-color: var(--hl-light-green);
	color: var(--hl-dark-green) !important;
}

.key-contacts-v3.c2025 a.btn-contact-us:hover:before {
	background-image: url("/_assets/icon-envelope-hl-light-over-mid-green.png");
}

.key-contacts-v3.c2025.light-background a.btn-contact-us:hover:before {
	background-image: url("/_assets/icon-envelope-hl-dark-over-light-green.png");
}

.key-contacts-v3.c2025.light-background a.btn-see-all:hover:after {
		background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
}


.key-contacts-v3.c2025 .intro {
	font-family: Roobert, sans-serif;
	font-size: 18px;
	font-weight: 300;
	color: #ffffff;
	line-height: 1.3;
}

.slick-arrow,
.key-contacts-v3 .carousel-controls .slick-arrow {
	width: 36px;
	height: 36px;
	border-color: var(--hl-light-green);
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
	background-size: 17px;
}

.slick-arrow:hover,
.key-contacts-v3 .carousel-controls .slick-arrow:hover {
	background-color: var(--hl-light-green);
}

@media (max-width: 520px) {
	.key-contacts-v3 a.btn-contact-us.desktop,
	.key-contacts-v3 a.btn-see-all.desktop {
		display: none;
	}

	.key-contacts-v3 a.btn-contact-us.mobile,
	.key-contacts-v3 a.btn-see-all.mobile {
		display: flex;
	}
}

@media (max-width: 500px) {
   .key-contacts-v3 .key-contact { height: 320px; }

}