.section-title { font-size: 36px; font-family: berlingske_sans_roundlight, sans-serif; margin-bottom: 0.5em; }

/*** Header ***/

section.header { position: relative; background-color: #f2f3f3!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: #6FA739; padding: 40px 40px 60px 40px; color: #ffffff; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
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: 17px; font-family: berlingske_sans_roundmedium, sans-serif; color: #ffffff; 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 #C3D544; background-color: transparent; }
.green-border:hover { background-color: #c3d544; color: #000000!important; }

.dark-green { border: 1px solid #2C5E4F; background-color: #2C5E4F; color: #ffffff; font-size: 16px; }
.dark-green:hover { background-color: transparent; }

.green { border: 1px solid #6fa739; background-color: #6fa739; color: #ffffff; }
.green:hover { background-color: transparent; }

.green2 { border: 1px solid #C3D544; background-color: #C3D544; color: #3C4748; }#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.download:after { background-image: url("/_assets/icon-download-hl-green.png"); }
.buttons a.download:hover:after { background-image: url("/_assets/icon-download-dark-grey.png"); }

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

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

/*** Search bar ***/

section.search-bar { background-color: #f2f3f3!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 { border: 1px solid #31574e; 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%; }
section.search-bar .search-button { display: inline-block; width: 25px; height: 25px; background-color: transparent; background-image: url("/consumer-duty/_assets/icon-search.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: #f2f3f3; }

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

section.whats-new { background-color: #f2f3f3!important; padding-bottom: 30px; }

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 #2C5E4F; width: 36px; height: 36px; font-size: 0; background-image: url("/consumer-duty/_assets/icon-carousel-arrow-green.png"); background-size: 17px auto; background-position: center; background-repeat: no-repeat; }
.slick-arrow:hover { background-color: #2c5e4f; }

.slick-arrow.slick-next { 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 #cccccc; 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: 21px; }
.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: #4D5357; }
.know-how-panel .inner .title { font-size: 21px; margin-bottom: 0; color: #3C4748; }
.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 #c0c0c0; }

.knowhow-popup .tag { display: flex; flex-direction: row; align-items: center; margin-bottom: 10px; }
.knowhow-popup .tag .know-how-type-icon { height: 20px; margin-right: 10px; }
.knowhow-popup .tag label { font-size: 14px; }
.knowhow-popup .tag label.type { flex-basis: 100%; }
.knowhow-popup .tag label.date { text-align: right; color: #4d5357; white-space: nowrap; }
.knowhow-popup .title { font-size: 25px; color: #2C5E4F; 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: #6FA739; background-color: #6FA739; color: #ffffff; font-size: 16px; }
.knowhow-popup .btn-read-more:hover { background-color: transparent; color: #3C4748; }

.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: #6FA739; 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; color: #333333; }

.popup-modal.my-alerts-popup .switch label .lever { border: 1px solid #31574E; 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: #6FA739; 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: #f0f1f1; padding: 20px; }
.topic-panel .content .intro { }
.topic-panel .content .intro p { font-size: 13px; color: #4D5357; }
.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: #d0d0d0;}

.topic-panel .buttons label.coming-soon { font-size: 13px; color: #6FA739; }
/*** Key Contacts ***/
.key-contacts-list-wide { padding-bottom: 100px; background-color: #2c5e4f !important; clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%); }
.key-contacts-list-wide .title h2 { color: #ffffff!important; }
.key-contacts-list-wide .contacts a.btn-contact-us { background-color: #ffffff; color: #2c5e4f; background-image: url("/consumer-duty/_assets/icon-envelope.png"); border: 1px solid #ffffff; }
.key-contacts-list-wide .contacts a.btn-contact-us:hover { background-color: transparent !important; color: #ffffff !important; background-image: url("/consumer-duty/_assets/icon-envelope-white.png"); }

.key-contacts-list-wide .key-contact-panel-content { display: flex; flex-direction: row; }
.key-contacts-list-wide .key-contact-panel-content .key-contact-image { flex-basis: 40%; }
.key-contacts-list-wide .key-contact-panel-content .key-contact-image img { margin-bottom: 0; }
.key-contacts-list-wide .key-contact-panel-content .key-contact-details { display: flex; flex-direction: column; justify-content: end; padding: 0 20px 0 16px; }
.key-contacts-list-wide .key-contact-panel-content .key-contact-details p { color: #ffffff; }

.key-contacts-list-wide .slick-arrow { border: 1px solid #C3D544; background-color: transparent; width: 36px; height: 36px; font-size: 0; background-image: url("/consumer-duty/_assets/icon-carousel-arrow-white.png"); background-size: 17px auto; background-position: center; background-repeat: no-repeat; }
.key-contacts-list-wide .slick-arrow:hover { background-color: #c3d544; }
.key-contacts-list-wide .slick-arrows-and-dots { font-size: 0; }

.key-contacts-list-wide .slick-arrow:first-child { margin-right: 10px; }
.key-contacts-list-wide .slick-arrow.slick-next { transform: rotate(180deg); }

/*** 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 a.download:after { background-image: url("/consumer-duty/_assets/icon-download-dark-green.png"); }

section.topic a.download:hover { background-color: transparent; }

/*** Know-hows page ***/
section.know-hows-filter { background-color: #f2f3f3 !important; padding-top: 10px; 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; color: #707070; }
section.know-hows-filter .dk-select { min-width: 200px; }

section.know-hows { background-color: #f2f3f3 !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-white.png"); }
section.know-hows .more-button .btn-load-more:hover { color: #333333; }
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: #f3f3f3!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: #f1f1f1; padding: 20px; margin-bottom: 20px; position: relative; }

section.search-results .know-how-panel { background-color:  #f0f1f1; }
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: #3c4748; }

section.search-results .search-result-panel .context { font-size: 16px; color: #3c4748; 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: #333333; margin-bottom: 10px; }

.search-results-list { margin: 0 -10px; }
.search-highlight { font-weight: bold; color: #6fa739; }
.topic-panel .title .search-highlight { color: #bed600; }

.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; }
}