.section-title {
   font-size: 36px;
   font-family: var(--hlc-gt-ultra);
   margin-bottom: 0.5em;
   color: var(--hlc-midnight-blue);
}

/*** Header ***/

section.header {
   position: relative; /*background-color: var(--hl-taupe)!important;*/
}

body.white-bg section.header { background-color: #ffffff!important; }

.header-bg { left: 0; width: 100%; background-position: center; background-size: cover; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%); }

section.header .col-1 { font-size: 0; padding-top: 30px; padding-bottom: 40px; display: flex; gap: 40px;  }

section.header .left { flex-basis: 100%; max-width: 480px; }
section.header .right { flex-basis: 480px;  }


section.header .intro { background-color: var(--hlc-midnight-blue); padding: 40px 40px 40px 40px; color: #ffffff; }
section.header .intro h1 { font-size: 38px; margin-bottom: 0.50em; }
section.header .intro p { font-size: 17px; color: #ffffff; }

section.header .subintro { margin-top: 30px; display: flex; flex-direction: row; }
section.header .subintro .image { flex-basis: 40%; }
section.header .subintro .image img { width: 100%; }
section.header .subintro .buttons { flex-basis: 100%; padding-left: 30px; }

section.header .subintro .buttons a {
   display: inline-block;
   width: 100%;
   padding: 10px 40px 10px 10px;
   font-size: 16px;
   font-family: 'GT Ultra Regular', sans-serif;
   text-decoration: none;
   margin-bottom: 10px;
   transition: all 0.2s;
}

section.header .subintro .buttons a:last-child { margin-bottom: 0; }

.green-border {
   border: 1px solid var(--hl-light-green);
   background-color: transparent;
   color: #ffffff;
}

.green-border:hover {
   background-color: var(--hl-light-green);
   color: #000000 !important;
}

.dark-blue { 
   border: 1px solid var(--hlc-midnight-blue);
   background-color: var(--hlc-midnight-blue);
   color: #ffffff;
   font-size: 16px;
}

.dark-blue:hover { 
   background-color: #ffffff;
   color: var(--hlc-midnight-blue);
}

.light-green {
   border: 1px solid var(--hl-light-green);
   background-color: var(--hl-light-green);
   color: var(--hlc-midnight-blue);
   font-size: 16px;

}

.light-green:hover { 
   background-color: var(--hlc-midnight-blue);
   color: #ffffff;
}

/*.dark-green {
   border: 1px solid var(--hl-light-green);
   background-color: var(--hl-light-green);
   color: var(--hlc-midnight-blue);
   font-size: 16px;
}

.dark-green:hover {
   background-color: transparent;
   color: #ffffff;
}
.dark-green:hover:after { 
   background-image: url("/_assets/icon-plus-hl-light-green");
}*/


.green {
   border: 1px solid var(--hl-light-green);
   background-color: var(--hl-light-green);
   color: var(--hlc-midnight-blue);
}

.green:hover { background-color: transparent; }

.green2 { border: 1px solid #C3D544; background-color: #C3D544; color: var(--hlc-midnight-blue); }#C3D544
.green2:hover { background-color: transparent; }

.buttons a.download,
.buttons .link { padding-right: 50px; position: relative; }

.buttons a.download:after,
.buttons .link::after {
   content: "";
   position: absolute;
   right: 10px;
   top: 50%;
   margin-top: -10px;
   display: block;
   width: 18px;
   height: 18px;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.buttons a.light-green.download:hover:after {
   background-image: url("/_assets/icon-download-hl-light-green.png");
}

.buttons a.light-green.download:after { 
   background-image: url("/_assets/icon-download-hl-dark-green.png");
}

.buttons a.download:hover:after {
   background-image: url("/_assets/icon-download-dark-grey.png");
}

.buttons .link:after,
.btn-load-more:after {
   background-image: url("/_assets/icon-plus-hl-dark-green.png");
}

.buttons .link:hover:after {
   background-image: url("/_assets/icon-plus-hl-light-green.png");
}


.buttons .link.green2:after {
   background-image: url("/consumer-duty/_assets/icon-plus-dark.png");
}

/*** Search bar ***/

section.search-bar {
   /*background-color: var(--hl-taupe) !important;*/
   margin-top: -40px;
   padding-bottom: 10px;
}

body.white-bg section.search-bar { background-color: #ffffff!important; }

section.search-bar .search-bar-container { display: flex; justify-content: end; }

section.search-bar .search-bar-container .inner { flex-basis: 55%; display: flex; }

section.search-bar .actions { flex-basis: 100%; display: flex; flex-direction: row; }


section.search-bar .search-box {
   background-color: #ffffff;
   border: 1px solid var(--hlc-midnight-blue);
   padding: 5px 13px 5px 5px;
   display: flex;
   align-items: center;
   flex-basis: 100%;
}

section.search-bar .search-box input[type=text] {
   font-size: 16px;
   padding: 8px;
   background-color: transparent;
   width: 100%;
   color: var(--hlc-midnight-blue);
}

section.search-bar .search-button {
   display: inline-block;
   width: 25px;
   height: 25px;
   background-color: transparent;
   background-image: url("/_assets/icon-search-hl-dark-green.png");
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   cursor: pointer;
}

section.search-bar .buttons { display: flex; flex-direction: row; padding: 0 20px; }

section.search-bar .buttons a { display: flex; align-items: center;}


input {-webkit-appearance: none;}

section.search-bar .buttons input,
section.search-bar .buttons a { margin-right: 10px; white-space: nowrap; font-size: 16px; border-radius: 0px !important;}

section.search-bar .buttons input:last-child,
section.search-bar .buttons a:last-child { margin-right: 0; }

section.search-bar .buttons .dark-green:hover,
section.search-bar .buttons .green:hover { color: #000000; }

section.search-bar .social { display: flex; flex-direction: row; align-items: center; }

.breadcrumbs.grey-bg { margin: 0; padding: 20px 0; background-color: #ffffff; }

/*** Know-how Section ***/

section.whats-new {
   background-color: var(--hl-taupe) !important;
   padding: 30px 0;
}

section.whats-new .carousel { margin: 0 -10px; }

.carousel-controls { display: flex; flex-direction: row; gap: 20px; align-items: center; margin-top: 20px; }
.carousel-controls .see-all { width: 100%; text-align: right; }

section.whats-new .see-all a.link { font-size: 16px; }

.carousel-buttons {
   display: flex;
   flex-direction: row;
   gap: 10px;
}

.slick-arrow {
   border: 1px solid var(--hlc-midnight-blue);
   width: 36px;
   height: 36px;
   font-size: 0;
   background-image: url("/_assets/icon-line-arrow-hl-dark-green.png");
   background-size: 17px auto;
   background-position: center;
   background-repeat: no-repeat;
   background-color: #ffffff;
}

.slick-arrow:hover {
   background-color: var(--hl-light-green);
}

.slick-arrow.slick-prev { transform: rotate(180deg); }

/*** Know-how Panel ***/

.know-how-panel,
.know-how-panel .inner { transition: all 0.2s; }

section.whats-new .carousel .know-how-panel { padding: 0 10px; position: relative; }

.know-how-panel .inner { border-top: 10px solid var(--hlc-midnight-blue); border-left: 0; border-right: 0; border-bottom: 0; padding: 15px 20px 20px 20px; background-color: #ffffff; }
.know-how-panel .inner .tag { margin-bottom: 10px; display: flex; flex-direction: row; align-items: center; min-height: 24px; }
.know-how-panel .inner .tag .know-how-icon-container { margin-right: 10px; font-size: 0; }
.know-how-panel .inner .tag .know-how-type-icon { width: 40px; background-color: var(--hlc-midnight-blue) }
.know-how-panel .inner .tag label { font-size: 12px; }
.know-how-panel .inner .tag label { flex-basis: 100%; }
.know-how-panel .inner .tag label.date { white-space: nowrap; text-align: right; color: var(--hlc-midnight-blue); }
.know-how-panel .inner .title { font-size: 21px; margin-bottom: 0; color: var(--hlc-midnight-blue); }
.know-how-panel .inner .image { margin-top: 20px; height: 100px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; }

.know-how-panel .inner .search-context { margin-top: 20px; font-size: 13px; color: #4D5357; line-height: 1.3em; }

.know-how-panel .inner .image .video-button { position: absolute; left:0; right:0; top:0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0.95; }

.know-how-panel:hover .inner { background-color: #d8d8d8 !important; }

/*section.whats-new .know-how-panel:hover { background-color: transparent!important; }

section.whats-new .know-how-panel:hover .inner { background-color: #f8f8f8!important; }*/

.knowhow-popup { background-color: rgba(0, 0, 0, 0.25); }

.knowhow-popup .popup-form {
   border-top: 10px solid var(--hlc-midnight-blue);
}

.knowhow-popup .tag { display: flex; flex-direction: row; align-items: center; margin-bottom: 10px; }
.knowhow-popup .tag .know-how-type-icon { height: auto; margin-right: 10px;  width: 40px; background-color: var(--hlc-midnight-blue) }
.knowhow-popup .tag label { font-size: 14px; }
.knowhow-popup .tag label.type { flex-basis: 100%; }
.knowhow-popup .tag label.date { text-align: right; color: var(--hlc-midnight-blue); white-space: nowrap; }
.knowhow-popup .title { font-size: 25px; color: var(--hlc-midnight-blue); margin: 0; }

.knowhow-popup .content { }
.knowhow-popup .content .intro { margin: 0; }

.knowhow-popup .button-container { margin-top: 20px; }

/*.knowhow-popup .btn-read-more {
   border-color: var(--hl-light-green);
   background-color: var(--hl-light-green);
   color: #ffffff;
   font-size: 16px;
}*/

.knowhow-popup .btn-read-more:hover { background-color: transparent; color: var(--hlc-midnight-blue); }

.knowhow-popup .video-container,
.knowhow-popup .image { margin-top: 20px; }

.knowhow-popup .close-knowhow-popup {
   position: absolute;
   display: block;
   width: 34px;
   height: 34px;
   background-color: var(--hlc-midnight-blue);
   border-radius: 100%;
   top: -27px;
   right: -17px;
   z-index: 100;
   background-image: url("/_assets/icon-close-white.png");
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;
}

.popup-modal.my-alerts-popup .popup-form { max-width: 400px; }
.popup-modal.my-alerts-popup .popup-form .wrapper { padding: 0 30px 30px 30px; }
.popup-modal.my-alerts-popup .header { padding-top: 30px; }

.popup-modal.my-alerts-popup .header h2 { margin-bottom: 0.75em; }
.popup-modal.my-alerts-popup .intro p { font-size: 14px; }

.popup-modal.my-alerts-popup .switch label .lever { border: 1px solid var(--hlc-midnight-blue); background-color: transparent; height: 26px;       }
.popup-modal.my-alerts-popup .switch label .lever:after,
.popup-modal.my-alerts-popup .switch label .lever:before { background-color: var(--hl-light-green); height: 18px; width: 18px; top: 3px; left: 3px; }

.popup-modal.my-alerts-popup .switch label input[type=checkbox]:checked + .lever:after,
.popup-modal.my-alerts-popup .switch label input[type=checkbox]:checked + .lever:before { left: 21px; }
/*** Topics ***/
section.topics { padding-top: 20px; }

section.topics .topics-list { font-size: 0; margin: 0 -10px; }

.topic-panel { }
.topic-panel .header { min-height: 140px; padding: 20px; display: flex; flex-direction: column; justify-content: end; position: relative; }
.topic-panel .header:before { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.3) 35%, rgba(0,0,0,0.75) 100%); z-index: 0 }
.topic-panel .header p.title { color: #ffffff; font-size: 23px; margin: 0; line-height: 1.3em; z-index: 1; }
.topic-panel .content { background-color: var(--hl-taupe); padding: 20px; }
.topic-panel .content .intro { }
.topic-panel .content .intro p { font-size: 13px; color: var(--hlc-midnight-blue); }
.topic-panel .content .intro p:last-child { margin-bottom: 0; }

.topic-panel .buttons { margin-top: 20px; min-height: 37px; display: flex; align-items: end; }
.topic-panel .buttons a.download { padding-right: 0; display: inline-block; width: 35px; height: 35px; background-image: url("/consumer-duty/_assets/icon-plus-dark.png"); background-size: 25px; background-repeat: no-repeat; background-position: center; transition: all 0.2s;  }

.topic-panel .buttons a.download:after { display: none;  }

.topic-panel .buttons a.download:hover {
   background-color: var(--hl-light-green);
}

.topic-panel .buttons label.coming-soon {
   font-size: 13px;
   font-style: italic;
   font-weight: 300;
   color: var(--hlc-midnight-blue);
}

/*** Key Contacts ***/
.key-contacts-v3 {
   margin-top: 50px;
}

/*** Topic Page ***/


section.topic { }

section.topic .header { min-height: 240px; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 30px; display: flex; flex-direction: column; justify-content: end; position: relative; }
section.topic .header:before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0;  z-index: 1; background-color: rgba(0, 0, 0, 0.25); }
section.topic .header h2 { color: #ffffff; position: relative; z-index: 2; font-size: 36px; }

section.topic a.download {
   font-size: 16px;
}

section.topic .buttons a.light-green.download:after,
section.topic .buttons a.light-green.download:hover:after {
   background-image: url("/consumer-duty/_assets/icon-download-dark-green.png");
}

section.topic a.download:hover {
   background-color: #ffffff;
   color: var(--hlc-midnight-blue);
}

/*** Know-hows page ***/
section.know-hows-filter {
   background-color: var(--hl-taupe) !important;
   padding-top: 20px;
   z-index: 100;
}

section.know-hows-filter .filter-container { display: flex; flex-direction: row; align-items: center; }
section.know-hows-filter h2.section-title { flex-basis: 100%; margin-bottom: 0; }
section.know-hows-filter .filter { display: flex; flex-direction: row; column-gap: 20px; row-gap: 10px; }
section.know-hows-filter .filter-field { display: flex; flex-direction: row; align-items: center; }

section.know-hows-filter .filter-field label {
   white-space: nowrap;
   margin-right: 10px;
   font-size: 14px;
}

section.know-hows-filter .dk-select { min-width: 200px; }

section.know-hows {
   background-color: var(--hl-taupe) !important;
   padding-bottom: 30px;
}


section.know-hows .more-button { margin-top: 20px; text-align: center; font-size: 16px; }

section.know-hows .more-button .btn-load-more:after {
   background-image: url("/_assets/icon-plus-hl-light-green.png");
}

section.know-hows .more-button .btn-load-more:hover:after { 
   background-image: url("/_assets/icon-plus-hl-dark-green.png");
}

/*section.know-hows .more-button .btn-load-more:hover { color: var(--hlc-midnight-blue); }
section.know-hows .more-button .btn-load-more:hover:after { background-image: url("/consumer-duty/_assets/icon-plus-dark.png"); }*/
section.related-knowhows {
   background-color: var(--hl-taupe) !important;
   margin-top: 30px;
   padding: 20px 0;
}

section.related-knowhows .carousel { margin: 0 -10px; }
section.related-knowhows .know-how-panel { padding: 0 10px; position: relative; }

/*** Search Results ***/
section.search-results { padding-top: 20px; }
section.search-results .page-intro { margin-bottom: 20px; }

section.search-results .search-result-panel { background-color: var(--hl-taupe); padding: 20px; margin-bottom: 20px; position: relative; }

section.search-results .know-how-panel { background-color:  var(--hl-taupe); }
section.search-results .know-how-panel .inner { background-color: transparent; }

section.search-results .know-how-panel:hover { background-color: #d8d8d8; }

section.search-results .search-result-panel .content { padding: 0; background-color: transparent; }
section.search-results .search-result-panel p.title { font-size: 21px; color: var(--hlc-midnight-blue); }

section.search-results .search-result-panel .context { font-size: 16px; color: var(--hlc-midnight-blue); line-height: 1.3em; }
section.search-results .search-result-panel .context p:last-child{margin-bottom: 0; }

section.search-results .topic-panel { background-color: #f0f1f1; }
section.search-results .topic-panel .tag { font-size: 14px; color: var(--hlc-midnight-blue); margin-bottom: 10px; }

.search-results-list { margin: 0 -10px; }
.search-highlight { font-weight: bold; color: inherit; }
.topic-panel .title .search-highlight { color: var(--hl-light-green); }

.search-results-list .topic-panel .content { display: flex; flex-direction: column; }
.search-results-list .topic-panel .content .intro { flex-basis: 100%; }

@media (max-width: 960px) {
   section.search-bar .inner { flex-direction: column-reverse; }
   section.search-bar .social { margin-bottom: 10px; justify-content: end; }
   section.search-bar .buttons { padding-right: 0; }
}

@media (max-width: 860px) {
   section.header .right { display: none; }
}

@media (max-width: 830px) {
   section.know-hows-filter .filter-container { flex-direction: column; width: 100%; align-items: start; margin-bottom: 20px; }
   section.know-hows-filter .filter-container .filter { margin-top: 20px; width: 100%; }
}

@media (max-width: 800px) {

   section.search-bar { margin-top: 0px; padding-left: 5px; }
   section.search-bar .search-bar-container .inner { flex-basis: 100%; }

   section.topic .information { flex-basis: 180px; }

   section.topic .key-contacts-list-side .key-contact-panel-image { width: 100%; max-width: 140px; padding-top: 140px; }

   .key-contacts-list-side .links-view-1 { flex-direction: column; }
}

@media (max-width: 650px) {
   section.know-hows-filter .filter { flex-direction: column; }

   section.know-hows-filter .filter .filter-field > label { flex-basis: 140px; flex-shrink: 0; text-align: left; }
   section.know-hows-filter .filter .filter-field .dk-select { flex-basis: 100%; min-width: auto; }
}

@media (max-width: 470px) {
   section.search-bar .actions { flex-direction: column; }

   section.search-bar .actions .buttons { margin-top: 20px; padding: 0; justify-content: end; }
}

@media (max-width: 400px) {
   section.header .subintro { flex-direction: column; }

   section.header .subintro .buttons { margin-top: 20px; padding: 0; }

   section.header .subintro img { max-width: 200px; margin: 0 auto; display: block; }
}

@media (max-width: 340px) {
   section.know-hows-filter .filter .filter-field { flex-direction: column; row-gap: 5px; align-items: start; }
   section.know-hows-filter .filter .filter-field > label { flex-basis: 0; text-align: left; }

   section.whats-new .carousel-controls { flex-direction: column; align-items: start; }
   section.whats-new .carousel-controls .see-all { text-align: left; }
}