﻿:root { 
   --text: #3C4748; 
   --ct-navigation-bg: #EEF7F6; 
   --topic-button-1: 0 0, 50% 0, 50% 25%, 0 25%; 
   --topic-button-2: 50% 0, 100% 0, 100% 25%, 50% 25%; 
   --topic-button-3: 0 25%, 50% 25%, 50% 50%, 0 50%; 
   --topic-button-4: 50% 25%, 100% 25%, 100% 50%, 50% 50%; 
   --topic-button-5: 0 50%, 50% 50%, 50% 75%, 0 75%; 
   --topic-button-6: 50% 50%, 100% 50%, 100% 75%, 50% 75%; 
   --topic-button-7: 0 75%, 50% 75%, 50% 100%, 0 100%; 
   --topic-button-8: 50% 75%, 100% 75%, 100% 100%, 50% 100%;
}

.font-r { font-family: Roobert, sans-serif !important; font-weight: 400; }
.font-m { font-family: Roobert, sans-serif !important; font-weight: 500; }

a { border-bottom-color: var(--hl-dark-green); text-decoration-color: var(--hl-dark-green); }

.dc-article-panel .tag div.is-new,
.dc-article-popup .header .is-new{ 
   display: none !important;
}

.action-links { 
   display: flex;
   flex-direction: row;
   gap: 10px;
   align-items: center;
}

section.actions .link-button {
   height: 50px;
}


section.hero-header { background-size: cover; background-position: center; background-repeat: no-repeat; height: 420px; position: relative; z-index: 2; overflow: hidden; margin-top: 0; }
section.hero-header .wrapper { display: flex; height: 100%; align-items: center; position: relative; z-index: 2; }

section.hero-header.bg-image { height: auto; padding: 30px 0; }

section.hero-header .video-container { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 0; }
section.hero-header .video-container video { width: 100vw; height: 100%; object-position: center; object-fit: cover; }

/* iOS fix? Maybe. */
section.hero-header .video-container video::-webkit-media-controls { display: none !important; }

section.additional-resources .additional-resource-panel label.title { font-family: Roobert, sans-serif; font-weight: 300; }
section.additional-resources .additional-resource-panel label.title strong { font-weight: 300; }

.hero-text-box { display: block; text-decoration: none; background-color: var(--hl-dark-green); padding: 45px 30px; width: 100%; min-width: 410px; max-width: 450px; margin: 0; }
.hero-text-box.short { padding-top: 30px; padding-bottom: 30px; }
.hero-text-box .logo-and-title { display: flex; flex-direction: row; align-items: start; gap: 20px; margin: 0 0 30px 0; }
.hero-text-box .logo-and-title img.logo { width: 100%; max-width: 334px; }
.hero-text-box .logo-and-title h1.title { color: #ffffff; display: flex; flex-direction: column; gap: 5px; line-height: 1; font-size: 35px; }

.hero-text-box p { color: #ffffff; font-size: 17px; }
.hero-text-box p:last-child { margin-bottom: 0; }

.hero-text-box .page-title { margin-bottom: 30px; }
.hero-text-box .subtitle { color: var(--hl-light-green); font-family: Roobert, sans-serif; font-size: 24px; font-weight: 500; margin: 0 0 5px 0; }
.hero-text-box .title { color: #ffffff; font-family: Roobert, sans-serif; font-size: 36px; font-weight: 500; margin: 0; }

section.actions { margin: 20px 0 30px 0; }
section.actions .wrapper .col-1 { display: flex; flex-direction: row; gap: 20px; align-items: center; justify-content: space-between; }

section.back { margin: 10px 0; }
.btn-back { background-color: var(--hl-taupe); border-color: var(--hl-taupe); color: var(--hl-dark-green); font-family: Roobert, sans-serif; font-size: 16px; padding-left: 20px; gap: 16px; height: 50px; }
.btn-back:before { content: ""; width: 12px; height: 19px; background-image: url("/_assets/btn-arrow-hl-dark-green.png"); background-size: contain; background-position: center; background-repeat: no-repeat; transform: rotate(180deg); }
.btn-back:hover { background-color: var(--hl-dark-taupe); }
.btn-back:after { display: none; }


section.intro { margin-top: 40px; color: var(--hl-dark-green); }

section.intro h2.page-title { color: var(--hl-dark-green); margin-bottom: 0.75em; font-size: 35px; font-family: Roobert, sans-serif; font-weight: bold; }

h2.section-title { color: var(--hl-dark-green); margin-bottom: 0.75em; font-size: 30px; font-family: Roobert, sans-serif; font-weight: 600; }

.btn-my-alerts:before { content: ""; display: inline-block; width: 21px; height: 24px; background-position: center; background-size: contain; background-repeat: no-repeat; background-image: url("/_assets/icon-my-alerts-filled-hl-light-green.png"); }
.btn-my-alerts:hover:before { background-image: url("/_assets/icon-my-alerts-filled-hl-dark-green.png"); }


section.intro .page-intro { color: var(--text); line-height: 1.3em; font-size: 17px; font-family: Roobert, sans-serif; font-weight: 300; }
section.intro .page-intro .standard-page-content :last-child { margin-bottom: 0; }


section.links { margin-top: 40px; }


section.content-type-navigation { margin-top: 10px; background-color: var(--ct-navigation-bg) !important; padding: 30px 0 20px 0; }


.content-type-navigation-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 -10px; background-image: url(/_uploads/HL-Gradient.png); background-size: cover; background-position: center; background-repeat: no-repeat; }

.content-type-navigation-items .spacer { display: none; background-color: var(--ct-navigation-bg); }

.content-type-navigation-items[data-count='1'] .spacer[data-idx='1'],
.content-type-navigation-items[data-count='2'] .spacer[data-idx='1'],
.content-type-navigation-items[data-count='3'] .spacer[data-idx='1'] { display: block; }

.content-type-navigation-items[data-count='1'] .spacer[data-idx='2'],
.content-type-navigation-items[data-count='2'] .spacer[data-idx='2'] { display: block; }

.content-type-navigation-items[data-count='1'] .spacer[data-idx='3'] { display: block; }

.navigate-ct-panel { border: 10px solid var(--ct-navigation-bg); padding: 0; position: relative; }
.navigate-ct-panel > a { padding: 30px; text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.2s; }
.navigate-ct-panel > a > div > :last-child { margin-bottom: 0; }
.navigate-ct-panel img.icon { margin-bottom: 20px; object-fit: contain; object-position: top left; }
.navigate-ct-panel p { color: var(--hl-dark-green); font-family: Roobert, sans-serif; font-size: 17px; font-weight: 300; }
.navigate-ct-panel p.title { font-size: 24px; font-weight: bold; }
.navigate-ct-panel .cta { margin-top: 50px; border: 1px solid var(--hl-dark-green); background-color: var(--hl-dark-green); color: #ffffff; padding: 10px 15px; display: inline-block; display: inline-flex; flex-direction: row; align-items: center; gap: 10px; transition: all 0.2s; }
.navigate-ct-panel .cta:after { content: ""; width: 10px; height: 20px; background-image: url("/_assets/btn-arrow-white.png"); background-size: contain; background-position: center; background-repeat: no-repeat; transition: all 0.2s; }

/*.navigate-ct-panel > a:hover .cta { background-color: #ffffff; color: var(--hl-dark-green); }
.navigate-ct-panel > a:hover .cta:after { background-image: url("/_assets/btn-arrow-hl-dark-green.png"); }*/

.navigate-ct-panel > a:hover { background-color: rgba(0, 0, 0, 0.1); }
.navigate-ct-panel > a:hover .cta:after { transform: translateX(5px); }


.topic-navigation { margin-top: 40px; }
.topic-navigation-wrapper { position: relative; }

.topic-navigation-topics-hover,
.topic-navigation-topics-select { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: none; }

.topic-navigation-topics-hover { z-index: 0; background: linear-gradient(to right, rgba(var(--hl-light-green-rgb), 0) 0%, rgba(var(--hl-light-green-rgb), 0.4) 50%,rgba(var(--hl-light-green-rgb), 0) 100%); }

.topic-navigation-topics-select { z-index: 1; background: linear-gradient(to right, rgba(var(--hl-light-green-rgb), 0.1) 0%, rgba(var(--hl-light-green-rgb), 1) 50%,rgba(var(--hl-light-green-rgb), 0.1) 100%); }

.topic-navigation-bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 3; background-image: url("/digital-transformation-academy/_assets/topic-navigation-bg.png"); /*_uploads/HL-Gradient.png");*/ background-size: contain; background-position: center; background-repeat: no-repeat; }

.topic-navigation-topics-hover[data-hover='1'] { display: block; clip-path: polygon(var(--topic-button-1)); }
.topic-navigation-topics-hover[data-hover='2'] { display: block; clip-path: polygon(var(--topic-button-2)); }
.topic-navigation-topics-hover[data-hover='3'] { display: block; clip-path: polygon(var(--topic-button-3)); }
.topic-navigation-topics-hover[data-hover='4'] { display: block; clip-path: polygon(var(--topic-button-4)); }
.topic-navigation-topics-hover[data-hover='5'] { display: block; clip-path: polygon(var(--topic-button-5)); }
.topic-navigation-topics-hover[data-hover='6'] { display: block; clip-path: polygon(var(--topic-button-6)); }
.topic-navigation-topics-hover[data-hover='7'] { display: block; clip-path: polygon(var(--topic-button-7)); }
.topic-navigation-topics-hover[data-hover='8'] { display: block; clip-path: polygon(var(--topic-button-8)); }

.topic-navigation-topics-select[data-select='1'] { display: block; clip-path: polygon(var(--topic-button-1)); }
.topic-navigation-topics-select[data-select='2'] { display: block; clip-path: polygon(var(--topic-button-2)); }
.topic-navigation-topics-select[data-select='3'] { display: block; clip-path: polygon(var(--topic-button-3)); }
.topic-navigation-topics-select[data-select='4'] { display: block; clip-path: polygon(var(--topic-button-4)); }
.topic-navigation-topics-select[data-select='5'] { display: block; clip-path: polygon(var(--topic-button-5)); }
.topic-navigation-topics-select[data-select='6'] { display: block; clip-path: polygon(var(--topic-button-6)); }
.topic-navigation-topics-select[data-select='7'] { display: block; clip-path: polygon(var(--topic-button-7)); }
.topic-navigation-topics-select[data-select='8'] { display: block; clip-path: polygon(var(--topic-button-8)); }


/* Clip path for the background image. Clips out the shapes, and the lines that seperate the segments. */
/*.topic-navigation-bg {
   / Phew  * /
   clip-path: polygon(30.0% 0, 34.9% calc(25% - 1px),
   44.8% calc(25% - 1px), 44.8% calc(25% + 1px), calc(34.9% + 1px) calc(25% + 1px), calc(39.9% + 1px) calc(50% - 1px), calc(39.9% - 1px) calc(50% - 1px), calc(34.9% - 1px) calc(25% + 1px),  26.2% calc(25% + 1px),
   30.4% calc(50% - 1px), 50% calc(50% - 1px), 50% calc(50% + 1px), 30.4% calc(50% + 1px),
   26.2% calc(75% - 1px), calc(34.9% - 1px) calc(75% - 1px), calc(39.9% - 1px) calc(50% + 1px), calc(39.9% + 1px) calc(50% + 1px), calc(34.9% + 1px) calc(75% - 1px),
   44.8% calc(75% - 1px), 44.8% calc(75% + 1px), calc(34.9% + 1px) 75%, 30.0% 100%, 39.9% 100%,
   50% 52%, 60.1% 100%, 70% 100%, calc(65.1% - 1px) calc(75% + 1px), 55.2% calc(75% + 1px), 55.2% calc(75% - 1px), calc(65.1% - 1px) calc(75% - 1px),
   calc(60.1% - 1px) calc(50% + 1px), calc(60.1% + 1px) calc(50% + 1px), calc(65.1% + 1px) calc(75% - 1px),
   73.8% calc(75% + 1px), 69.6% calc(50% + 1px), 50% calc(50% + 1px), 50% calc(50% - 1px), 69.6% calc(50% - 1px),
   73.8% calc(25% - 1px), calc(65.1% + 1px) calc(25% + 1px), calc(60.1% + 1px) calc(50% - 1px), calc(60.1% - 1px) calc(50% - 1px),
   calc(65.1% - 1px) calc(25% + 1px), 55.2% calc(25% + 1px), 55.2% calc(25% - 1px), calc(65.1% - 1px) calc(25% - 1px),
   70% 0, 60.1% 0, 50% 48%, 39.9% 0 );
}*/

.topic-navigation .caption { position: absolute; top: 50%; left: 50%; margin: -40px auto auto -125px; width: 250px; height: 80px; z-index: 3; display: flex; align-items: center; justify-content: center; font-family: Roobert, sans-serif; font-size: 30px; font-weight: 300; }
/*.topic-navigation .caption { background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0.85) 33%, rgba(255,255,255,0) 70%); }*/

.topic-navigation-grid { position: relative; z-index: 4; display: grid; grid-template-areas: "topic1 center topic2" "topic3 center topic4" "topic5 center topic6" "topic7 center topic8"; grid-template-columns: 37% 26% 37%; gap: 0; }

.topic-navigation-grid .topic1 { grid-area: topic1; text-align: right; padding-right: 16%; /*clip-path: polygon(0 0, 87% 0, 98% 100%, 0 100%);*/ }
.topic-navigation-grid .topic2 { grid-area: topic2; text-align: left; padding-left: 16%; /*clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%);*/ }
.topic-navigation-grid .topic3 { grid-area: topic3; text-align: right; padding-right: 28%; /*clip-path: polygon(0 0, 74% 0, 87% 100%, 0 100%);*/ }
.topic-navigation-grid .topic4 { grid-area: topic4; text-align: left; padding-left: 28%; clip-path: /*polygon(25% 0, 100% 0, 100% 100%, 12% 100%);*/ }
.topic-navigation-grid .topic5 { grid-area: topic5; text-align: right; padding-right: 28%; clip-path: /*polygon(0 0, 88% 0, 75% 100%, 0 100%);*/ }
.topic-navigation-grid .topic6 { grid-area: topic6; text-align: left; padding-left: 28%; clip-path: /*polygon(12% 0, 100% 0, 100% 100%, 25% 100%);*/ }
.topic-navigation-grid .topic7 { grid-area: topic7; text-align: right; padding-right: 16%; clip-path: /*polygon(0 0, 100% 0, 86% 100%, 0 100%);*/ }
.topic-navigation-grid .topic8 { grid-area: topic8; text-align: left; padding-left: 16%; clip-path: /*polygon(0 0, 100% 0, 100% 100%, 13% 100%);*/ }

.topic-navigation-grid .caption { grid-area: center; }

.topic-navigation-grid button[class^="topic"].right { padding-right: 20px; }
.topic-navigation-grid button[class^="topic"].left { padding-left: 20px; }

.topic-navigation-grid button[class^="topic"] { font-family: Roobert, sans-serif; font-size: 24px; font-weight: 500; min-height: 4em; padding-top: 10px; color: var(--hl-dark-green); padding-bottom: 10px; border-top: 1px solid var(--hl-light-green); background-color: transparent; transition: all 0.2s; }

/*.topic-navigation-grid button[class^="topic"]:hover { background-color: rgba(var(--hl-light-green-rgb), 0.2); }

.topic-navigation-grid button[class^="topic"].active.left { background-color: var(--hl-light-green); background: linear-gradient(to left, var(--hl-light-green) 0%, rgba(var(--hl-light-green-rgb), 0.65) 66%, transparent 100%); }

.topic-navigation-grid button[class^="topic"].active.right { background-color: var(--hl-light-green); background: linear-gradient(to right, var(--hl-light-green) 0%, rgba(var(--hl-light-green-rgb), 0.65) 66%, transparent 100%); }*/




section.article-list { margin-top: 40px; }

div.article-list { margin-top: 30px; }

.article-list-title-and-filter { display: flex; flex-direction: row; align-items: end; justify-content: space-between; }
.article-list-title-and-filter h2.section-title { margin-bottom: 19px; }
.article-list-filter { display: flex; flex-direction: row; align-items: end; gap: 20px; }
.article-list-filter .filter-item { display: flex; flex-direction: row; align-items: center; gap: 10px; border-bottom: 12px solid #ffffff; }
.article-list-filter .filter-item label { font-family: Roobert, sans-serif; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--hl-dark-green); }

.article-list-filter .filter-item.monthly-bytes { flex-direction: column; border: 12px solid var(--hl-light-green); background-color: var(--hl-light-green); }
.article-list-filter .filter-item.monthly-bytes .dk-selected { width: 170px; }



.article-panel {
   border-top: 0;
   font-family: Roobert, sans-serif;
   color: var(--hl-dark-green);
   background-color: transparent;
   font-weight: 400;
   line-height: 1.4em;
}

.article-panel .inner { }

.dc-article-panel.standard-knowhow-panel .inner {
   background-color: transparent;
}

.article-panel .inner button,
.standard-knowhow-panel.dc-article-panel .inner button {
   background-color: rgba(var(--hl-dark-green-rgb), 0.07);
   color: var(--hl-dark-green);
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}

.standard-knowhow-panel.dc-article-panel .inner:hover { 
   background-color:transparent!important;
}

.article-panel .tag {
   display: flex;
   flex-direction: row;
   align-items: center;
   font-family: Roobert, sans-serif;
   font-size: 12px;
   font-weight: 500;
   gap: 14px;
   color: var(--hl-dark-green);
}
.article-panel .tag .icon { width: 45px; height: 45px; background-color: var(--hl-light-green); background-size: 28px auto; background-position: center; background-repeat: no-repeat; }

.article-panel .content,
.dc-article-panel .content {
   padding: 18px;
   text-align: left;
   width: 100%;
}

.article-panel .content .date { font-size: 12px; margin: 0 0 1em 0; }
.article-panel .content .title { font-size: 18px; line-height: 1.3; }
.article-panel .content .image { margin-top: 20px; width: 100%; height: 120px; background-position: center; background-size: cover; background-repeat: no-repeat; }

.article-panel:hover { opacity: 1 !important; }

.article-panel .inner button:hover,
.dc-article-panel .inner:hover button { background-color: rgba(var(--hl-dark-green-rgb), 0.14); }

.article-panel.taupe .inner button { background-color: var(--hl-taupe); }
.article-panel.taupe .inner button:hover { background-color: var(--hl-dark-taupe); }

.article-panel .tag-and-jurisdictions { width: 100%; display: flex; flex-direction: row; gap: 10px; justify-content: space-between; padding: 0 10px 0 0; }
.article-panel .jurisdictions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: flex-start; padding: 10px 0 0 0; }
.article-panel .jurisdictions img { height: 24px; }

img.flag { box-shadow: 0 0 2px 1px #000000; border-radius: 50%; }


.carousel .article-panel,
.carousel .webinar-panel { padding: 0 10px; }

.carousel .article-panel .content { display: flex; flex-direction: column; justify-content: start; }
.carousel .article-panel .main-content { display: flex; flex-direction: column; flex-basis: 100%; justify-content: space-between; }

div.load-more { margin-top: 40px; }

.btn-load-more { font-family: Roobert, sans-serif; font-size: 15px; font-weight: 500; background-color: var(--hl-light-green); border-color: var(--hl-light-green); color: var(--hl-dark-green); }
.btn-load-more:hover { background-color: var(--hl-dark-green); border-color: var(--hl-dark-green); color: #ffffff; }

section.additional-resources .carousel { margin: 0; }

section.whats-new { background-color: var(--hl-light-taupe) !important; margin-top: 40px; padding: 30px 0; }
section.whats-new .col-1 { padding-left: 0; padding-right: 0; }
section.whats-new .carousel-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 30px; }
section.whats-new .carousel-header h2.section-title { margin: 0; }

.webinar-panel { }
.webinar-panel .inner { }
.webinar-panel .inner button { padding: 0; text-align: left; position: relative; overflow: hidden; width: 100%; }

.webinar-panel .inner button.default-bg { background: linear-gradient(to right bottom, #BFF355 0%, #82C8BE 55%, #B1A6FF 100%); }

.webinar-panel .content { position: relative; z-index: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 20px; }
.webinar-panel .content .title { font-family: Roobert, sans-serif; font-size: 31px; font-weight: 500; color: var(--hl-dark-green); line-height: 1.1; margin: 0; }
.webinar-panel .play-button-container { display: flex; justify-content: end; }
.webinar-panel .play-button { width: 41px; height: 41px; background-size: 19px 19px; background-position: center; background-repeat: no-repeat; }
.webinar-panel .content .play-button { background-color: var(--hl-dark-green); background-image: url("/_assets/icon-play-hl-light-green.png"); }


.webinar-panel .popover-content { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; background-color: var(--hl-dark-green); padding: 20px; position: absolute; top: 100%; width: 100%; height: auto; z-index: 1; transition: top 0.2s; }
.webinar-panel .popover-content .play-button { background-color: var(--hl-light-green); background-image: url("/_assets/icon-play-hl-dark-green.png"); }
.webinar-panel .popover-content p { font-family: Roobert, sans-serif; font-size: 15px; font-weight: 300; color: #ffffff; line-height: 1.4em; }
.webinar-panel .popover-content p.title { font-size: 19px; font-weight: 500; color: var(--hl-light-green); line-height: 1.3em; }
.webinar-panel .popover-content:after { content: ""; width: 100%; height: 50px; background-color: var(--hl-dark-green); position: absolute; left: 0; top: 100%; }

/*.webinar-panel .inner button:hover .popover-content*/

.webinar-panel.hover .inner button .popover-content,
.webinar-panel.touched .inner button .popover-content { top: 0; height: 100%; }


.carousel .webinar-panel p.title { font-size: 18px; }


/* #BFF355 #82C8BE #B1A6FF*/
.dk-select,
.dk-select * { font-family: Roobert, sans-serif; color: #000000; }

.dk-select.white .dk-selected,
.dk-select-multi.white .dk-selected { border-color: #ffffff; background-color: #ffffff; }

.dk-select.white .dk-select-options .dk-option-highlight,
.dk-select-multi.white .dk-select-options .dk-option-highlight { color: #000000; }

.dk-selected { border-color: var(--hl-taupe); background-color: var(--hl-taupe); width: 180px; }
.dk-select-options { background-color: var(--hl-taupe); }

.dk-select.white .dk-select-options,
.dk-select-multi.white .dk-select-options { background-color: #ffffff; }

.dk-select-options-highlight .dk-option-selected,
.dk-option-selected { background-color: rgba(var(--hl-dark-green-rgb), 0.3); color: var(--hl-dark-green); }


.dk-select-options .dk-option-highlight { background-color: rgba(var(--hl-dark-green-rgb), 0.2); color: #ffffff; }


.dk-select-open-down:not(.dk-always-open-up) .dk-select-options { padding: 10px; }
.dk-option { padding: 0.4em 20px; }

.dk-checkboxes li.dk-option { padding-left: 35px; }
.dk-checkboxes li.dk-option:before { left: 5px; border-color: var(--hl-dark-green); }

.carousel { margin: 0 -10px; }

.carousel-controls { display: flex; flex-direction: row; gap: 20px; margin-top: 20px; }
.slick-arrow { width: 40px; height: 40px; border-width: 1px; border-style: solid; background-color: transparent; border-color: var(--hl-dark-green) !important; background-image: url("/_assets/icon-line-arrow-hl-dark-green.png") !important; background-repeat: no-repeat; background-size: 50%; background-position: center; font-size: 0; }
.slick-arrow.slick-prev { transform: rotate(180deg); }

.slick-arrow:hover { background-color: var(--hl-dark-green); background-image: url("/_assets/icon-line-arrow-white.png") !important; }

ul.slick-dots { list-style: none; display: flex; flex-direction: row; gap: 8px; }
ul.slick-dots li { }
ul.slick-dots li button { font-size: 0; width: 13px; height: 13px; background-color: var(--hl-dark-green); opacity: 0.2; }
ul.slick-dots li.slick-active button { opacity: 1; }

section.carousel-wide-fade { overflow: hidden; }
section.carousel-wide-fade .slick-list { overflow: visible; }

xsection.carousel-wide-fade .wrapper { display: flex; flex-direction: row; max-width: 100%; }
section.carousel-wide-fade .carousel-container { position: relative; z-index: 1; width: 100%; max-width: 1200px; flex-shrink: 0; padding: 0 10px; }

.slick-slide:not(.slick-active)[data-opac="3"] { opacity: 0.5; }
.slick-slide:not(.slick-active)[data-opac="2"] { opacity: 0.25; }
.slick-slide:not(.slick-active)[data-opac="1"] { opacity: 0.125; }
.slick-slide:not(.slick-active)[data-opac="0"] { opacity: 0.1; }

.standard-page-content { font-family: Roobert, sans-serif; font-size: 16px; font-weight: 400; color: var(--hl-dark-green); }


.popup-modal .popup-form .wrapper { max-height: 85vh; }

.article-popup .popup-form { padding: 0; font-family: Roobert, sans-serif; font-weight: 400; font-size: 16px; color: var(--hl-dark-green); }
.close-article-popup { position: absolute; display: block; width: 34px; height: 34px; background-color: transparent; border-radius: 100%; top: 10px; right: -10px; z-index: 100; background-image: url("/_assets/icon-close-dark.png"); background-size: 16px; background-position: center; background-repeat: no-repeat; }
.article-popup .header .tag { display: flex; flex-direction: row; align-items: center; gap: 10px; font-size: 14px; }

.article-popup .header .tag .icon { width: 45px; height: 45px; background-color: var(--hl-light-green); background-size: 28px auto; background-position: center; background-repeat: no-repeat; }
.article-popup .date { font-size: 14px; margin-top: 20px; }
.article-popup .title { font-size: 27px; margin-top: 16px; line-height: 1.1; }
.article-popup .content .intro { margin: 16px 0 0 0; }
.article-popup .content .intro > * { font-family: inherit; font-weight: inherit; font-size: inherit; color: inherit; }
.article-popup .button-container { margin-top: 20px; }
.article-popup .btn-read-more { background-color: var(--hl-light-green); border-color: var(--hl-light-green); color: var(--hl-dark-green); font-family: Roobert, sans-serif; font-size: 15px; font-weight: 500; }
.article-popup .btn-read-more:hover { background-color: transparent; }

.article-popup .video-container,
.article-popup .image { margin-top: 20px; }

.article-popup .tag-and-jurisdictions { padding-right: 40px; }

ul.monthly-bytes { margin: 20px 0; padding: 0 0 0 10px;; list-style: none; font-family: inherit; color: inherit; font-size: inherit; color: inherit; font-weight: inherit; display: flex; flex-direction: column; gap: 10px; }
ul.monthly-bytes li { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
ul.monthly-bytes li:before { content: ""; width: 14px; height: 14px; background-color: var(--hl-light-green); margin-top: 4px; flex-shrink: 0; }


.webinar-popup .popup-form { width: 900px; max-width: 80vw; }
.webinar-popup .title { font-family: Roobert, sans-serif; font-size: 24px; color: var(--hl-dark-green); line-height: 1.2; font-weight: 400; padding: 0 40px 0 0; }
.webinar-popup .content { margin-top: 0px; }

.webinar-popup iframe { width: 100%; }

.webinar-popup iframe.video-iframe-yt { height: min(450px, 50vw); }

div.key-contacts-v3 { background-color: var(--hl-dark-green); padding: 40px 0; margin-top: 40px; }

div.key-contacts-v3 .carousel-controls .slick-arrow { border-color: var(--hl-light-green) !important; background-color: #ffffff; background-image: url("/_assets/icon-line-arrow-hl-dark-green.png") !important; background-size: 50%; }
div.key-contacts-v3 .carousel-controls .slick-arrow:hover { background-color: var(--hl-dark-green); background-image: url("/_assets/icon-line-arrow-white.png") !important; }

div.key-contacts-v3 .btn-contact-us { display: flex; flex-direction: row; gap: 12px; font-family: Roobert, sans-serif !important; font-size: 16px; font-weight: 500; background-color: var(--hl-light-green); border-color: var(--hl-light-green); }
div.key-contacts-v3 .btn-contact-us:before { content: ""; width: 24px; height: 18px; background-image: url("/_assets/icon-hl-contact-us.png"); background-size: contain; background-position: center; background-repeat: no-repeat; }

div.key-contacts-v3 .btn-contact-us:hover { background-color: #ffffff; }


.tag-and-jurisdictions { display: flex; flex-direction: row; gap: 20px; align-items: flex-start; justify-content: space-between; }

.tag-and-jurisdictions .jurisdictions { display: flex; flex-direction: row; gap: 10px; }

.tag-and-jurisdictions .flag { height: 32px; }


section.additional-resources .slick-arrow { border-color: var(--hl-light-green) !important; background-image: url("/_assets/icon-line-arrow-hl-dark-green.png") !important; }
section.additional-resources .slick-arrow:hover { background-color: var(--hl-light-green); }


section.related-materials { margin-top: 40px; }

section.monthly-byte-summary { background-color: var(--hl-dark-green) !important; padding: 30px 0; }
section.monthly-byte-summary p.date { font-family: Roobert, sans-serif; font-size: 17px; font-weight: bold; color: var(--hl-light-green); margin-bottom: 0.5em; }
section.monthly-byte-summary p.title { font-family: Roobert, sans-serif; font-size: 24px; font-weight: bold; color: #ffffff; }

section.monthly-byte-summary ul.monthly-bytes li { color: #ffffff; font-size: 22px; font-weight: 400; }
section.monthly-byte-summary ul.monthly-bytes li:before { margin-top: 8px; }

section.monthly-byte-summary .btn-back { margin-bottom: 30px; }

section.monthly-byte-items { margin-top: 40px; }
section.monthly-byte-items .items-container { }
section.monthly-byte-items .item { display: flex; flex-direction: row; gap: 40px; align-items: start; }
section.monthly-byte-items .item .title { width: min(280px, 20%); flex-shrink: 0; font-family: Roobert, sans-serif; font-size: 24px; font-weight: bold; color: var(--hl-dark-green); line-height: 1.2em; }

section.monthly-byte-items .item .copy { font-size: var(--font-16); font-family: Tiempos, serif; color: var(--hl-dark-green); line-height: 1.3em; }

section.monthly-byte-items .item .copy > *:not(h3) { font-family: inherit; font-size: inherit; color: inherit; font-weight: inherit; }
section.monthly-byte-items .item .copy h3 { font-family: inherit; color: inherit; font-size: 24px; font-weight: bold; }

section.monthly-byte-items .item .copy a { font-weight: inherit; text-decoration: none; border-bottom-color: var(--hl-dark-green); }
/*section.monthly-byte-items .item .copy a:hover { text-decoration: underline; }*/

section.monthly-byte-items .item .copy > :last-child { margin-bottom: 0; }

section.monthly-byte-items .separator { width: 100%; height: 1px; background: var(--hl-light-green); margin: 30px 0; }

section.monthly-byte-items .item .copy.author { font-style: italic; }



section.contact-us { margin-top: 40px; }

section.contact-us h2.section-title,
section.additional-resources.resources h2.section-title { font-family: Roobert; font-size: 38px; font-weight: 200; margin-bottom: 0.75em; color: var(--hl-dark-green); }



section.contact-us p { font-family: Roobert; font-size: 18px; font-weight: 400; color: var(--hl-dark-green); }
section.contact-us a { font-size: inherit; }
section.contact-us a.envelope-left:before { width: 22px; height: 22px; }

section.contact-us .col-1 > :last-child { margin-bottom: 0; }


body.resources section.additional-resources { overflow: hidden; }
body.resources section.additional-resources.resources .additional-resource-panel { height: 519px; width: 404px; border: 1px solid #000000; z-index: 1; }
body.resources section.additional-resources.resources .carousel { height: 560px !important; }

body.resources section.additional-resources.resources .carousel .inner { display: none; }

body.resources section.additional-resources.resources.wide .carousel { overflow: visible; }
body.resources section.additional-resources.resources .carousel:before { content: ""; position: absolute; right: 100%; height: 100%; width: calc(100vw - 600px); background-color: #ffffff; z-index: 1000; }

section.additional-resources .intro { font-family: Roobert, sans-serif; font-size: 16px; font-weight: 400; color: var(--hl-dark-green); line-height: 1.2em; }


/*** Podcast Series ***/

section.podcast-series { }

section.podcast-series div.podcast-series {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 30px;
}

div.podcast-series-panel {
   position: relative;
   background-size: cover;
   background-position: right center;
   background-repeat: no-repeat;
}

div.podcast-series-panel:before {
   content: "";
   position: absolute;
   z-index: 0;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, rgba(36,53,8,1) 0%, rgba(36,53,8,0) 100%);
}

div.podcast-series-panel .inner {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   gap: 60px;
   justify-content: space-between;
   height: 100%;
}

div.podcast-series-panel .inner .content {
   padding: 30px 30px 0 30px;;

   font-family: Roobert, sans-serif;
   font-weight: 400;
   color: #ffffff;
   line-height: 1.2;
}

div.podcast-series-panel p.title {
   margin-top: 10px;
   font-family: inherit;
   font-size: 24px;
   font-weight: bold;
   color: inherit;
}

div.podcast-series-panel img.icon {
   height: 56px;
   width: auto;
}

div.podcast-series-panel div.intro-copy {
   max-width: 285px;
}

div.podcast-series-panel div.link {
   padding: 0 30px 30px 30px;
}

div.podcast-series-panel .btn-2024:hover {
   background-color: #ffffff;
}

/*** ***/
@media (max-width: 1200px) {
   .topic-navigation-grid button[class^="topic"] { font-size: max(calc(100vw / 54), 14px); min-height: 4em; }
}

@media (max-width: 1110px) {
   body.insights .article-list-title-and-filter { flex-direction: column; align-items: start; width: 100%; }
   body.insights .article-list-title-and-filter h2.section-title { margin-bottom: 5px; }
   body.insights .article-list-filter { width: 100%; }

   xbody.insights .filter-item.content-type .dk-selected,
   xody.insights .filter-item.topic .dk-selected { width: 25vw; }
}

@media (max-width: 960px) {
   body.resources section.additional-resources.resources .carousel { height: 450px !important; }
   body.resources section.additional-resources.resources .additional-resource-panel { height: 400px; width: 311px; }
}

@media (max-width: 940px) {
   body.insights .article-list-filter { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "sortBy sortBy sortBy" "contentType topic monthlyBytes"; row-gap: 10px; width: 100%; margin-top: 20px; }

   body.insights .article-list-filter .filter-item { min-width: 0; }

   body.insights .article-list-filter .filter-item.sort-by { grid-area: sortBy; border-bottom: 0; }
   body.insights .article-list-filter .filter-item.content-type { grid-area: contentType; }
   body.insights .article-list-filter .filter-item.topic { grid-area: topic; }
   body.insights .article-list-filter .filter-item.monthly-bytes { grid-area: monthlyBytes; }

   body.insights .article-list-filter .filter-item:not(.sort-by) .dk-select .dk-selected,
   body.insights .article-list-filter .filter-item:not(.sort-by) .dk-select-multi .dk-selected { width: 100% !important; }

   body.insights .article-list-filter .filter-item.content-type .dk-select-multi .dk-selected { width: calc(100% - 60px) !important; }

   body.insights .article-list-filter .filter-item:not(.monthly-bytes) > label { width: 54px; }


   .content-type-navigation-items { grid-template-columns: 1fr 1fr; }

   .article-list-title-and-filter { flex-direction: column; align-items: start; }
   .article-list-title-and-filter h2.section-title { margin-bottom: 5px; }
}

@media (max-width: 780px) {
   .article-list-title-and-filter h2.section-title { margin-bottom: 0.5em; }

   body:not(.insights) .article-list-filter { flex-direction: column; gap: 10px; width: 100%; align-items: start; }
   body:not(.insights) .article-list-filter .filter-item { width: 100%; }
   body:not(.insights) .article-list-filter .filter-item:not(.monthly-bytes) label { display: none; }

   body:not(.insights) .article-list-filter .filter-item:not(.monthly-bytes) { border-bottom: 0; }

   body:not(.insights) .article-list-filter .filter-item.monthly-bytes { align-items: start; }

   body:not(.insights) .article-list-filter .dk-select .dk-selected,
   body:not(.insights) .article-list-filter .dk-select-multi .dk-selected { width: 100% !important; }
}

@media (max-width: 690px) {
   body.resources section.additional-resources.resources .carousel { height: 320px !important; }
   body.resources section.additional-resources.resources .additional-resource-panel { height: 290px; width: 226px; }
}

@media (max-width: 660px) {
   body.insights .article-list-filter { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: start; }

   body.insights .article-list-filter .filter-item { width: 100%; }
   body.insights .article-list-filter .filter-item:not(.monthly-bytes) label { display: none; }

   body.insights .article-list-filter .filter-item:not(.monthly-bytes) { border-bottom: 0; }

   body.insights .article-list-filter .filter-item.monthly-bytes { align-items: start; }

   body.insights .article-list-filter .dk-select .dk-selected,
   body.insights .article-list-filter .dk-select-multi .dk-selected { width: 100% !important; }

   body.insights .article-list-filter .filter-item.content-type .dk-select-multi .dk-selected { width: 100% !important; }
}

@media (max-width: 640px) {
   .topic-navigation .caption { width: 180px; height: 180px; font-size: 24px; margin-left: -90px; margin-top: -90px; }

   body.insights .article-list-filter { display: flex; margin-top: 10px; }

   section.monthly-byte-items .item .title { width: 30%; flex-shrink: 0; }

   section.podcast-series div.podcast-series { grid-template-columns: 1fr; gap: 20px; }
   section.podcast-series div.podcast-series .inner { gap: 20px; }
}

@media (max-width: 650px) {
   section.content-type-navigation .col-1 { width: calc(100% - 10px); }
}

@media (max-width: 600px) {
   .topic-navigation-grid button[class^="topic"] { font-weight: 400; }

   .topic-navigation-grid button[class^="topic"].right { padding: 10px; }
   .topic-navigation-grid button[class^="topic"].left { padding: 10px; }
   .topic-navigation-grid button[class^="topic"] { font-size: 13px; line-height: 1.1; }

   section.monthly-byte-items .item { flex-direction: column; gap: 20px; }
   section.monthly-byte-items .item .title { width: 100%; }
}

@media (max-width: 520px) {
   .topic-navigation .caption { font-size: 20px; }
   .content-type-navigation-items { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
   body.resources section.additional-resources.resources .carousel { height: 338px !important; }
}

@media (max-width: 410px) {
   body.resources section.additional-resources.resources .carousel { height: 300px !important; }
   body.resources section.additional-resources.resources .additional-resource-panel { height: 250px; width: 194px; }
}
