﻿section.end-copy { margin-bottom: 80px; }

section.tool-contacts { margin-top: 30px; }


.tool-contacts h2.title { font-size: 39px; color: var(--primary-colour); margin: 0; }
.tool-contacts h2.title:after { display: none!important; }

.tool-contacts .contact-group-contacts { display: grid; gap: 40px; grid-template-columns: repeat(3, 1fr); }

.tool-contacts .contact-groups { display: flex; flex-direction: column; gap: 50px; }

.tool-contacts .contact-group { border-top: 1px solid var(--primary-colour);  padding-top: 20px;  }
.xtool-contacts .contact-group:first-of-type { margin-top: 10px; }

.tool-contacts .contact-group h3.group-title { font-size: 23px;  margin-bottom: 1.2em; color: var(--primary-colour); }

.header-filter { display: flex; flex-direction: row; align-items: center; gap: 20px; margin: 0 0 30px 0; justify-content: space-between; }

section.contact-list .filter { display: flex; flex-direction: row; align-items: center; gap: 30px; margin-bottom: 20px;  }
section.contact-list .filter-field { width: 300px; display: flex; flex-direction: row; align-items: center; gap: 10px; }
section.contact-list .filter .dk-select-multi { max-width: 250px; }

.contact-panel { }
.contact-panel .content { display: flex; flex-direction: column; gap: 20px;  }
.contact-panel .content .image a { display: inline-block; width: 60%; transition: all 0.2s; overflow: hidden; }
.contact-panel .content .image a[href='#'] { pointer-events: none; }

.contact-panel .content .image a:not([href='#']):hover { box-shadow: 0 0 2px 0px #3286b9; }
.contact-panel .content .image a:hover .profile-image { transform: scale(1.1); }

.contact-panel .content .profile-image { width: 100%; padding-top: 100%; transition: all 0.2s; }

.contact-panel .content .details { display: flex; flex-direction: column; gap: 2px; }

.contact-panel .content .details p { margin: 0; color: #2D3D3C; font-size: 17px; font-family: berlingsle_sans_roundregular, sans-serif; }
.contact-panel .content .details p.name { font-size: 19px;  font-family: berlingske_sans_roundmedium, sans-serif; margin-bottom: 5px; color: var(--primary-colour);  }

.contact-panel .content .details p.email { margin-top: 5px; }

.contact-panel .content .details p a { text-decoration: none; border: none; display: flex; flex-direction: row; align-items: center; gap: 10px;  }

.contact-panel .content .details p a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: #3286b9; text-underline-offset: 3px; }

.contact-panel .content .details .email,
.contact-panel .content .details .telephone { margin-top: 5px; }

.contact-panel .content .details .btn-email:before,
.contact-panel .content .details .btn-telephone:before { content: ""; display: inline-block; width: 21px; height: 21px; background-size: contain; background-position: center; background-repeat: no-repeat; }

.contact-panel .content .details .btn-email:before { background-image: url("/_assets/icon-email-filled-light-green.png"); }
.contact-panel .content .details .btn-telephone:before { background-image: url("/_assets/icon-telephone-filled-light-green.png"); }

section.contact-list .the-list { margin-top: 30px; }

.standard-page-content.end-copy { margin-top: 50px!important; border-top: 1px dotted var(--primary-colour); padding-top: 30px; }

section.back-to-top { margin-top: 30px; }

.btn-back-to-top { background-color: var(--primary-colour); color: #ffffff; border: 1px solid var(--primary-colour); font-size: 16px; }
.btn-back-to-top:hover { background-color: transparent; color: #000000; }

.btn-clear-filter { padding: 0 0 1px 0; color: var(--primary-colour); background-color: transparent; font-size: 16px; border-width: 0 0 1px 0; border-color: var(--primary-colour); line-height: 1em; }
.btn-clear-filter:hover { border-bottom-width: 2px; }

section.key-contacts { display: none !important; }

div.clear-filter { display: none; }

div.filter.has-filter div.clear-filter { display: inline-block; }

@media (max-width: 1200px) {
   .header-filter .filter { flex-basis: 240px; }
}

@media (max-width: 940px ) { .tool-contacts .contact-group-contacts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
   .tool-contacts .contact-group-contacts { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
   .header-filter { flex-direction: column; gap: 20px; align-items: start; }
   .header-filter .filter { flex-basis: auto; width: 100%; max-width: initial; }
   .header-filter .filter .dk-select-multi { max-width: initial; }
}