.directory-banner {
    background: #F2F2F2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 60px;
    position: relative;

    &:after {
        content:"";
        position: absolute;
        width: 100%;
        height: 100px;
        left: 0;
        bottom: 0;
        background-color: #fff;
    }
}

@media (max-width: 767.98px) {
    .directory-banner {
        height: auto;
        overflow: visible;
    }
}

.directory-banner-container {
    max-width: 100%;
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    z-index: 1;
}

/* manage collapse */
.directory-banner-container {
    .collapse-trigger {
        background-color: #002d97 !important;
        border-radius: 10px;
        color: #fff;
        padding: 15px 20px;

        &:before {
            left: auto;
            right: 15px;
        }
    }

    .collapse-item-trigger-container {
        flex-grow: 1;
        position: relative;
    }

    .collapse-item {
        border: none;
        width: 100%;

        @media (max-width: 991.98px) {
            color: #fff;
            display: flex;
            gap: 15px;
            align-items: center;
            background-color: #0944bd;
            /*margin: 0 -30px;*/
            padding: 8px 20px;

            .collapse-target {
                position: absolute;
                width: 100%;
            }
        }
    }

    .collapse-content {
        background: transparent;
        padding: 0;
    }

    @media (min-width: 992px) {
        .collapse-trigger {
            display: none;
        }

        .collapse-target.collapsed {
            display: block !important;
        }

        .collapse-item {
            border: none;
            width: auto;

            span {
                display: none;
            }
        }
    }
}

.directory-banner-nav-container {
    background-color: #0944BD;
    align-items: center;
    display: flex;
    flex-direction: row;
    filter: drop-shadow(0px 5px 25px rgba(0, 0, 0, 0.30));
    gap: 5px;
    overflow: hidden;
    border-radius: 10px;
    padding: 8px;

    @media (max-width: 991.98px) {
        align-items: unset;
        flex-direction: column;
    }

    .tier-banner-list {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .tier-banner-list-item {
        margin: 0;
        padding: 0;

        &:before {
            display: none;
        }
    }

    .navigation {
        align-self: unset;
        grid-template-columns: 100%;
    }
}

.directory-banner-content {
    padding-top: 75px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    place-items: center;
}

.directory-banner-heading {
    color: #002d97;
    font-size: clamp(2.5rem, 2.128vw + 1.835rem, 3.75rem);
    font-weight: normal;
    margin: 0;
}

.directory-banner-heading span {
    display: block;
}

.directory-banner-heading span {
    font-size: 18px;
}

@media (min-width: 575px) {
    .directory-banner-heading span {
        font-size: calc(18px + 2 * (100vw - 575px) / 1025);
    }
}

@media (min-width: 1600px) {
    .directory-banner-heading span {
        font-size: 20px;
    }
}

@media (max-width: 991.98px) {
    .directory-banner-heading {
        max-width: 50%;
    }

    .directory-banner-heading {
        font-size: 48px;
    }
}

@media (max-width: 767.98px) {
    .directory-banner-heading {
        max-width: 100%;
        text-align: center;
    }

    .directory-banner-heading span {
        margin-top: 15px;
    }
}

.directory-banner-image {
    position: absolute;
    right: -15px;
    top: 60px;
    width: 950px;
}

@media (max-width: 991.98px) {
    .directory-banner-image {
        width: 850px;
    }
}

@media (max-width: 767.98px) {
    .directory-banner-image {
        display: none;
    }
}

.directory-banner-nav {
    display: flex;
    gap: 5px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;

    @media (max-width: 991.98px) {
        flex-direction: column;
    }
}

.directory-banner-nav li {
    padding: 0;
}

.directory-banner-nav li:before {
    display: none;
}

.directory-banner-nav-item {
    margin: 0;
}

.directory-banner {
    .tier-banner-list-link,
    .directory-banner-nav-link {
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: 15px center;
        border-radius: 10px;
        color: #fff;
        display: flex;
        padding: 15px 15px 15px 40px;
        text-decoration: none;
        position: relative;

        &.is-active {
            background-color: #002D97;
            color: #fff;
            font-weight: bold;
            padding: 15px 15px 15px 45px;
        }

        &:hover {
            background-color: #002D97;
            color: #fff;
        }
    }

    .has-phone-icon {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADTSURBVHgB5VTRDYIwFHxlAjaQDWAE3cBNdAPZQJ0AnMARiBPgBugEdYN6L55JbeJHW770kkv7KDnuHQ9E/g7GL5xzFZYdywd4NMbcJAKhYI9lAV7AWs+BtaQCgluw474BrUSiCOor+HZUU7iUHKgrcM+1kVxApHUv5ItRsKS7pcwFvpwpO79AdADPMhfY+qiivlMdfrq3fOhH1sU3QQy0fikrliPnssJ+AE88u4MbSXDb0pH1Y+D1TlLAVnu2OzEKdX7w7zOSAI6UZqfZ9rE/kB/DE1jPseAiZqxsAAAAAElFTkSuQmCC);
    }

    .has-grid-icon {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADQSURBVHgB5VHRDcIgED2I/7oBdQJHaJ3AEayTlBF0AlnBCUpHcIM6CR7JkeAVS2j615e8wPVdj5d7AJuDiAvnXItHzXreQog76R0eFdMH1E0oJBMb+uFD9LgwHSK94gZ2MIV/UZMjP6DjOtLSfY885Abm8GS1WTwQnZ9zPRJWRsphjbvTdFexsCRlixxpkIq+BTR0/k25COiwp+RDrZE/Ia2+Q8kcGDdFDwVIOXwgj8QbFCKV8gnZ0l0l9Gu0Rx/ICDMOLcyn/IoeUtQ7wLbxBWj5VhksJkpWAAAAAElFTkSuQmCC);
    }

    .has-grid-icon.is-active {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAC1SURBVHgB7ZQNDcIwFIRfyQQgoVLAASgAB2ABBYATHGChEp6EOihHMpLS3bL/nyz7kuY1t1tubd8qsjI1JhVCCG8US7xPY8wj91xRLsSj8OxjISMmKzxgm8yZp8BGBmbwgEza8cJQovteAnCQDsXV8c5zi9CmZ5QTeeSxumNVwHfpSvRYsxi7Cg8PSL+gK+OfAfb3IP9/7Q+Xd0+3AHAXfg3cpGZrxizzqtASr0/m2uDdlQn5AGB8I3lHGKufAAAAAElFTkSuQmCC);
    }

    .has-newspaper-icon {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACsSURBVHgB7ZLRDYMwDETPEXuwQjeAEToCI3SEjNAROkJX6AZlg47QDVJbMlIaJWACf/CkE8ixzr4owOGgXDGEMPCnwzpeRPRoCoc9q5Um2JiGFw2niR4GOJHXBeCi4sC6Zpr/SGtpv4v+e9YFG2lQAV8F7WoYR03NHXZmccNcvJrIX1anz8GCvMNxztCrWtgYtT9vyIlkwxsqiA3XxhTePPxZMrzrVtaYwgcnP2brRNbaylE+AAAAAElFTkSuQmCC);
    }

    .has-newspaper-icon.is-active {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADrSURBVHgB7ZTtEYIwDIZTzwFwg7oBI+AGMoE6gY7ABq7iBuIGbCAjdAN8c9d6JQf1zOHHD567XCCEpnmvKdHMrzFjH7quO8EdSU9pjGmWiYQMZkkP/08L+jC9DiBLAdegNSfybrBKxFi+lYifYflgASxu4a6wDawWi91RtBab2cO5OI6YS3agwPpCgWzqArksSBMXuECiQ3hBNyxxESd89xQlKPzuYlgeJ+K5toCl4aF7OYwpiWrSw8e15YfRDvh8o/016a6L57AmJUJSG3aiJS4QpnDrp/pdWjntTO+6xsIV3I50sCwlzfwdD2hqRG22Q+YSAAAAAElFTkSuQmCC);
    }

    .has-leaf-icon {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEbSURBVHgB7VTtDYIwEG2ZoE6gbsAIjqATqBPoCG4gGziCI4ATgBPABrABvouv5qwIxPjHxEteaO/z9a7FmL90Sdu2O2BvviFINANqYjbkb0ckPCnfxlr7OVOya/n1TF1fTKSCXYfzAsjAqhJgXQDLoOhTXKRs4igMSjkm+xUDF+VzFR1sC+AovhKji0QBowxYMTAF1kCl7AV1Z3Pv6Za6V0G1mBX1URIydoSsUz1trHNh7Pc2SCr05+hXo3QJPlNAdDDZjbJJYiEx0TE6oTA6BDrH6Zbh0LDfCGPzTtjsuiPwoO7jgx2LLE2fkGWuk/o7GLDOwyJDSUvdbP/0eAo/HGfGCvtTEkfVx7rvRzHmLUuPYm4zoOic6M/IDaJBLizt3sFHAAAAAElFTkSuQmCC);
    }

    .has-leaf-icon.is-active {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAETSURBVHgB7VXRDYIwED2M/zoCIzgCTiAbiBPgCGygGzACcQLcgDhBdYKyQb3TS2xqWyrSxA9f8qJcr/fuXS4A8MeUUEqlyCXEAhavkS3EABYu1AsZTA0sKjSBaV1Qx+odWcjdGYRhGxgbB+xWWhzIkLtzo1CNP7SGJ+Q5SZIrr2XPcVN4iTk956yQG8rD2A4cnQqjy5p3n9hp8U6L14bDDjyjaGyjQO6pSy7c8P9S2UfXOkeEuFl0yf4BuUCuOVYiK7DjAh4HtnXUkXOe9ORk4ANZ9FyWPJ7KcS5gCAEuqHjqOCsgBMrd4cMF53SmMHyCARFycBxdXBOhN6iwCOTqubp0lsG3YKFGE6PnqB+eeMV/Dnfgw1Bs/fo3zwAAAABJRU5ErkJggg==);
    }

    .has-people-icon {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE7SURBVHgB1VTtccIwDFV6DJAN6k6QbFAzQRmBTkI2gA3oCO0EDRNAJ2g6QegEqR5+3LmKHfgJunsXrG9LD4vcuhRTxmEYav14xSNVP4r3oii6XMxDJpFTfOpPoFL8Es+KPWzwkWsEXSl6RaMoMz4NfepLyRwdl4ki3uiW9HVTCXGVxhT4NnCRfcPR5Lszui1gEmyic2mvHi9lodiZOk7xEZ1bCUs6iW77SLtPJUTwwST8krDZs7woOuPTMfYkM5kWXA9zXUS6+VTAzFSqYiMJ/MQNH/V8SORAzG6kjfhXGj2W5Yk6YctTh7RZc3srOgN7oid1tky2ytLGVOwZ5BM+6PSNiUfd/fsvc2bnoXcy3igEcwRfMZq5fSiKXKf6WUvgVyuBPpCKOiR9Tb06l54vJ4HwLuq6zWz7TuQPfhMwAevr5hUAAAAASUVORK5CYII=);
    }

    .has-people-icon.is-active {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFLSURBVHgB5VXtTcMwEL1UDJARPAIb4BEYIUxA2KBMQDcITABM4I7QDZwNwgbHPemQ3MN23Cp/EE86VXm5e/fhq0P0r8DMDkZbQcR6sVEsiC18DnDDmkZXEffyM4n1Ym9iJ7FZX4O7F7vT54eu6450QeWPWuUBXVT8MLJX9R2pBahcA/YFwT7D7zXGU0OCiMozwiGZf7SHrd3GWsdwGgrBkX/jTEwXYqmOSqucDOe5DJ/pIqTczuRAwKfhHJVhx4FNu80mSMbyZYI+qIyTeZ6RNB3xjlYg+42ET5lXz/JuXou/SYRmyQwxl0mC2aKTQalj4Y/V/2hRDnrIB7oSWBB7yNZh1FVL188pP2kBsHflnPGLXLufdJfh9KLrGXgdQcUnxFJDm56vh6cWaPuXou2yM53EBuHYXHkhEe6nYEQX5dBpT1uBt/5k/gl8AzKdTytR2knpAAAAAElFTkSuQmCC);
    }

    .has-calendar-icon {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEMSURBVHgB1VTtEYIwDA0c/2UD2UCYAJxAN5ANZANxAt1ANxA3gA10A0bACfAFo1au1XLnD3137xrSJs1HA9Hfom3bBMw0+pT3THYumRGAM40+kT0tnN7tPpYV6ItRCBYah7WwAdeO4zQmh1ssE7AiO8TgGQ4fpfF6BziyCgdysgAC4HNjVefSl+FpdEvcvCA7cEbFJ4dHcE92SPsKncMaNSwRZYj1xArpvo/vuicnNKCGGxjMRebu3zvJT+lgMvJMG4hgqsipIpdYIpOdMUJOWdLrUgYDRQ4HOwR2dJsKRk7PBiSyp8W7lCNFzhSZn0lh65BnMpYJsEE3ei+BqB9SsxwckR0ufF79Ofw+rt6vY8BmrVzIAAAAAElFTkSuQmCC);
    }

    .has-calendar-icon.is-active {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEBSURBVHgB3VXRDYIwEL0aB2AENoAR2EA20A2QCdQNdAJH0A1wA9hARugG9TVCcjRtoUQ+5CUv9O5678q1TYlWD6VUBkYWf+SKhYjH6ovMUVgj9mlsaGEI04EVpficwKijthtQGlP72KuzdbwUQrTkAwrUaj5qU8/WovmbZsldfA/+v8DW4S/BJ4UhB4upBWR/3PRNxViaY0tM2oS8LULSFZ+KuR7w8T+rYN99GlvyQxdomH2j4YW7gC2FACt6gwcKhM7RuaZ/rEUZL9aJ5MwuuG3D2DHNaHgyduCe2Vo8pRD8ukWuTU5sb8AIkkmzIHxU83E29YSjSP8WhEDyS7gefABS4QvvaYwTswAAAABJRU5ErkJggg==);
    }

    .has-play-icon {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEWSURBVHgB1VNtEcIwDE25CcABcwAOGBJwMBQwFDAHMAdDCaAAUEBxUBSMF9be9bZ+/YR3l8ste3lJ05To1yF8P7quW8BtKQ4Fa4QQMiZ4hmPSi8JYwh4QrPgji5BPIF5CBBSu4Wbme0KJQOIelsd4EythCjvAKg+3gN1YmFIEgRrGF6EC/CnzIPr0dWsLspDEzFqKQ1JCh1J3GAIX3aHoyqzJEPYt36k/kg9X2MYn5BJkYs6Xg6TRHBGrKQGZlaAgpnSXRrBALKYxJ2v5h4stqZ8j+4b6p7ekMLj40fkH3bSBPUxC5qiW07gQx7hzHsdce46th/MWg8SS+mOaG1/oxO+O6vhbe+l658LRTalFjICKrcp/4QMKhm3DULNNrwAAAABJRU5ErkJggg==);
    }

    .has-play-icon.is-active {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEVSURBVHgB7ZXBDcIwDEUd1AE6QtiAETpCN0BsAhuwASOUDSgTtExAmIBuEGxkoRCljV24IPEky0qU+Kex4wL8Oia3wHtfoitBiDHGSddS8BXa3es4hTEWGY1ac3qmQhErFfiYOQI7NCdd/CZACUWr0aqJPS0mcslCOgGkQ2vQ1rmNKLJFR0JOJMCJsaCASpK/5pgV4PodQAFfKX1xnRVgxAKUK3TXqeBEEY17yF+T5cdUgYBY4JbfAgdQEF9RD19mLAc2Gmt57UvlgKAmZ7Gy9ugH0JUvPcTxgwVdsQub1lxMQoBKzwZTLQh6D556k5ovEnNxqVaQZmBhWn+GMeF4gh9Qw0PHASjYhT2N3eQ95+Df5J8nD2NancMSPhw6AAAAAElFTkSuQmCC);
    }
}

.directory-banner.is-intranet {
    background: url("../../assets/intranet-banner-bg.svg") no-repeat #005AE8;
    background-position: center bottom;
    background-size: 100%;
    box-shadow: none;
    height: 330px;
    margin-top: 0;
    position: relative;
}

@media (max-width: 767.98px) {
    .directory-banner.is-intranet {
        background-image: none;
        height: auto;
    }
}

.directory-banner.is-intranet .directory-banner-container {
    width: 100%;
    max-width: 1920px;
    padding-right: 90px;
    padding-left: 90px;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 15px;
}

@media (max-width: 1199.98px) {
    .directory-banner.is-intranet .directory-banner-container {
        padding-right: 30px;
        padding-left: 30px;
    }
}

@media (max-width: 767.98px) {
    .directory-banner.is-intranet .directory-banner-container {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (max-width: 767.98px) {
    .directory-banner.is-intranet .directory-banner-container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 767.98px) {
    .directory-banner.is-intranet .directory-banner-heading {
        text-align: left;
    }

    .directory-banner.is-intranet .directory-banner-heading {
        font-size: 27px;
    }
}

.directory-banner.is-intranet .directory-banner-nav {
    margin: auto 0 0;
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
}

@media (max-width: 767.98px) {
    .directory-banner.is-intranet .directory-banner-nav {
        margin-top: 50px;
    }
}