section.contacts { 
	padding: 20px 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

section.contacts div.title-and-buttons { 
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	justify-content: space-between;
}

section.contacts.key-contacts-v3 .carousel-controls .slick-arrow {
	background-color: transparent;
}

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

section.contacts div.buttons {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
}

section.contacts div.buttons.desktop { 
	padding-top: 5px;
}

section.contacts div.buttons.mobile {
	display: none;
	margin-bottom: 30px;
}

section.contacts a.btn-email-us,
section.contacts a.btn-see-all {  
	border-color: var(--hl-dark-green);
	background-color: var(--hl-dark-green);
	color: #ffffff;
	gap: 14px;
	font-size: 14px;
}

section.contacts a.btn-email-us:before {
	content: "";
	width: 24px;
	height: 16px;
	background-image: url("/_assets/icon-envelope-hl-taupe-over-taupe-45.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

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

section.contacts a.btn-email-us:hover,
section.contacts a.btn-see-all:hover { 
	background-color: #ffffff;
	color: var(--hl-dark-green);
}

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

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

section.contacts div.introduction { 
	margin-bottom: 30px;
}


/* If inside an accordion. */

div.accordion-item > div.accordion-content > div.template-page-panel > section.contacts > div.wrapper > div.col-1 {
	padding: 5px 25px;
}

/*** Themes ***/

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

section.contacts.tpp-theme-dark-green div.introduction,
section.contacts.tpp-theme-dark-green div.section-title { 
	color: #ffffff;
}

section.contacts.tpp-theme-dark-green a.btn-email-us,
section.contacts.tpp-theme-dark-green a.btn-see-all {
	border-color: var(--hl-light-green);
	background-color: var(--hl-light-green);
	color: var(--hl-dark-green);
}

section.contacts.tpp-theme-dark-green a.btn-email-us:before {
	background-image: url("/_assets/icon-envelope-hl-dark-over-light-green.png");
}

section.contacts.tpp-theme-dark-green a.btn-see-all:after { 
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
}

section.contacts.tpp-theme-dark-green a.btn-email-us:hover,
section.contacts.tpp-theme-dark-green a.btn-see-all:hover {
	background-color: #ffffff;
}

section.contacts.tpp-theme-dark-green .slick-arrow { 
	border-color: var(--hl-light-green);
	background-color: transparent;
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
}

section.contacts.tpp-theme-dark-green .slick-arrow:hover { 
	background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
}

section.contacts.tpp-theme-light-green { 
	background-color: var(--hl-light-green);
}

section.contacts.tpp-theme-light-green .slick-arrow,
section.contacts.tpp-theme-light-green-teal-gradient .slick-arrow,
section.contacts.tpp-theme-multi-gradient .slick-arrow,
section.contacts.tpp-theme-purple-light-green-gradient .slick-arrow,
section.contacts.tpp-theme-purple-teal-gradient .slick-arrow,
section.contacts.tpp-theme-taupe .slick-arrow {
	 border-color: var(--hl-dark-green);
}

section.contacts.tpp-theme-light-green.key-contacts-v3 .slick-arrow:hover,
section.contacts.tpp-theme-light-green-teal-gradient.key-contacts-v3 .slick-arrow:hover,
section.contacts.tpp-theme-multi-gradient.key-contacts-v3 .slick-arrow:hover,
section.contacts.tpp-theme-purple-light-green-gradient.key-contacts-v3 .slick-arrow:hover,
section.contacts.tpp-theme-purple-teal-gradient.key-contacts-v3 .slick-arrow:hover,
section.contacts.tpp-theme-taupe.key-contacts-v3 .slick-arrow:hover {
	background-color: var(--hl-dark-green);
	background-image: url("/_assets/icon-line-arrow-hl-light-green.png");
}

/*** Responsive ***/

@media (max-width: 640px) {
	section.contacts div.buttons.desktop {
		display: none;
	}

	section.contacts div.buttons.mobile {
		margin-top: 20px;
	}

	section.contacts div.buttons.mobile,
	section.contacts .buttons.mobile .btn-see-all.mobile {
		display: flex;
	}
}