  .bg-circle {
    position:relative;
}
.bg-circle::before {
    content: "";
    height: 20rem;
    width: 20rem;
    display: block;
    background-color: var(--gfColors-slate15);
    border-radius: 50%;
    position: absolute;
    top: -2rem;
    left: -11rem;
    z-index: -1;
}
.bg-slate-tiles {
    background-image:url(/__template/t1/images/bg-slate-tiles.svg);
    background-repeat:repeat;
}

.add-gold-ribbon {
    position:relative;
}
.add-gold-ribbon::after {
    content:"";
    background-image:url(/__template/t1/images/doodle-illustrations/gold-loop-horizontal.svg);
    background-repeat:no-repeat;
    width: 300px;
    height: 113px;
    position: absolute;
    top: 3rem;
    left: -7rem;
    transform: rotate(290deg);
    display: block;
}
@media (max-width:991.98px) {
    .add-gold-ribbon::after {
        display:none;
    }
    #newsletter img {
        margin-top: -2rem;
        width: 340px;
    }
}

#nav-section {
    gap: 1.5rem 1.5rem;
    margin-top: 4rem;
    margin-bottom: 3rem;
}
#nav-section div {
    border: 3px solid var(--gfColors-slate15);
    border-radius: 3px;
    padding: 2rem;
}
.nav-icon {
    display: inline-grid;
    align-content: flex-start;
    justify-items: center;
}

.nav-icon img {
    margin-bottom:1.5rem;
    transition: all .2s ease-in-out;
}

.nav-icon:hover img {
    transform: scale(1.15);
}
a.link-on-image, a.link-on-image:hover {
    box-shadow:none;
}
#nav-section span.link-title span {
    box-shadow: inset 0px -1px 0px var(--gfColors-slate45);
    font-size: 1.4rem;
    color:var(--gfColors-linkBlue);
    margin-bottom: 1rem;
}
#nav-section span.link-title span:hover  {
    box-shadow: inset 0px -1px 0px var(--gfColors-gold);
    color:var(--gfColors-navy);
}
#nav-section span.link-text {
    color:var(--gfColors-bodyText);
    font-size:1rem;
    box-shadow:none;
    margin-top: 1rem;
}
.portrait {
    max-width:40%;
    margin-bottom:1rem;
}


@media (max-width:767.98px) {
    #intro {
        text-align:center;
    }
    #intro .u-gold-after::after {
        left: calc(50% - 1.25rem);
    }
}
@media(max-width:992px) {
#ecosystem-explorers h1.mt-5 {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
}
.sectionBanner-image--alignXCenter.sectionBanner-image--alignYCenter img {
	object-position: center 75%;
}