/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gloock&display=swap');

@font-face { 
    font-family: "BW Gradual";
    font-style: normal;
    font-weight: 700;
    src: 
        url(/assets/redesign/BwGradual-Bold.woff2) format("woff2"),
        url(/assets/redesign/BwGradual-Bold.woff) format("woff");
}

@font-face { 
    font-family: "BW Gradual";
    font-style: italic;
    font-weight: 700;
    src: 
        url(/assets/redesign/BwGradual-BoldItalic.woff2) format("woff2"),
        url(/assets/redesign/BwGradual-BoldItalic.woff) format("woff");
}

@font-face { 
    font-family: "BW Gradual";
    font-style: normal;
    font-weight: 400;
    src: 
        url(/assets/redesign/BwGradual-Medium.woff2) format("woff2"),
        url(/assets/redesign/BwGradual-Medium.woff) format("woff");
}

@font-face { 
    font-family: "BW Gradual";
    font-style: italic;
    font-weight: 400;
    src: 
        url(/assets/redesign/BwGradual-MediumItalic.woff2) format("woff2"),
        url(/assets/redesign/BwGradual-MediumItalic.woff) format("woff");
}
/* END FONTS */

/* VARIABLES */
:root {
    --white: #fff;
    --white2: #F7F7F7;
    --grey: #707070;
    --grey2: #888888;
    --black: #000;
    --yellow: #FFDE17;
    --yellow2: #FCE59D;
    --green: #83FED1;
    --green2: #B6FCDF;
    --blue: #9AEEF7;
    --orange: #FFBEA1;
    --orange2: #FFD9A1;

    --font1: 'Inter', sans-serif;
    --font2: 'BW Gradual', sans-serif;
    --font3: 'Gloock', serif;

    --root: 16px;

    --nav-height: 5.4rem;
    --nav-item-height: 2.5rem;

    --radius: 1.25rem;

    --vs: 3rem;
    --hs: 3rem;
    --vhs: 3rem;
}
/* END VARIABLES */

/* UTILITY CLASSES */
.font1 {
    font-family:var(--font1);
}
.font2 {
    font-family:var(--font2);
}
.font3 {
    font-family:var(--font3);
    letter-spacing: .05em;
}
.yellow-text {
    color:var(--yellow);
}
.yellow-bg {
    background-color:var(--yellow);
}
.blue-text {
    color:var(--blue);
}
.blue-bg {
    background-color:var(--blue);
}
.green-text {
    color:var(--green);
}
.green-bg {
    background-color:var(--green);
}

/* GLOBALS */
* {
    box-sizing:border-box;
}

html, body {
    font-family: var(--font1);
    font-size: var(--root);
    background-color: var(--white2);
    margin:0;
    padding:0;
}

body.home::before,
body.np-about::before,
body.np-strategic-plan-2021-2024::before,
body.np-get-involved::before,
body.np-contact::before,
body.page-resources::before {
    content:'';
    width:100%;
    height:100%;
    display:block;
    position:absolute;
    top:0;
    transform: rotate(180deg);
    background-image:url('globe.svg');
    background-repeat:no-repeat;
    background-position:left bottom;
    background-size:40%;
    pointer-events: none;
}
.template-report .post-section::before  {
    content:'';
    width:100%;
    height:100%;
    display:block;
    position:fixed;
    top:6.5rem;
    right:0;
    transform: rotate(180deg);
    background-image:url('globe.svg');
    background-repeat:no-repeat;
    background-position:left bottom;
    background-size:24%;
    pointer-events: none;
    z-index:0;
}

body.post-template.template-infra-finder::before {
    background-image:none;
}

.container {
    max-width:80rem;
    margin:0 auto;
}

h1, 
h2 {
    font-family:var(--font2);
}

h1 {
    font-size:3rem;
    margin:var(--vhs);
}

h3,
h4,
h5 {
    font-weight:400;
}

h6 {
    font-size:1rem;
    font-weight:bold;
}

h2 a,
h3 a {
    color:var(--black);
 }

h2 a:hover,
h3 a:hover {
    color:var(--black);
 }

.global-meta,
.global-meta a {
    color:var(--black);
    font-size:.75rem;
    text-decoration: none;
}

p {
    line-height:1.41666;
}

a {
    color:var(--black);
    text-decoration: none;
}

a.more {
    position:absolute;
    bottom:2.5rem;
    font-weight:bold;
    font-size:.83333rem;
    text-decoration: none;
    color:var(--black);
}

.button-group {
    display:flex;
    justify-content: space-between;
    gap:1.75rem;
}

button {
    border-radius:var(--radius);
    border:none;
    background-color:transparent;
    padding:0;
    overflow:hidden;
}

.arrow::after {
    content:"→";
    float:right;
    font-weight:bold;
    font-size:1rem;
    margin-left:1rem;
}

button a {
    display: flex;
    align-items:center;
    justify-content:space-between;
    background-color:var(--yellow);
    color:var(--black);
    height:var(--nav-item-height);
    padding:0 1.75rem;
    font-weight:bold;
    text-decoration: none;;
}

button a:hover {
    background-color:var(--black);
    color:var(--white);
}

button.reverse a,
body.template-standard .kg-button-card a.kg-btn {
    display: flex;
    align-items:center;
    background-color:var(--black);
    border:1px solid var(--white);
    border-radius: var(--radius);
    color:var(--white);
    height:var(--nav-item-height);
    padding:0 1.75rem;
    font-weight:bold;
}

button.reverse a:hover {
    background-color:var(--white);
    color:var(--black);
}
body.template-standard .kg-button-card a.kg-btn:hover {
    background-color:var(--yellow);
    color:var(--black);
}
/* END GLOBALS */

/* HOMEPAGE */
.home h2 {
    margin:var(--vhs);
    margin-right:0;
    font-size:1.875rem;
    font-family:var(--font1);
}

/* HEADER */
header {
    position:relative;
    background-color: var(--white);
    padding:0 2rem;
    z-index:999;
}

header nav {
    display:flex;
    align-items: center;
    justify-content:space-between;
}
#home-link {
    margin-right: 0;
}
#home-link img {
    width: 12.5rem;
    padding-top: 1rem;
    padding-right: 1.75rem;
}

header nav ul {
    position:relative;
    list-style: none;
    padding:0;
    margin:0;
    display:flex;
}

header nav>ul>li {
    position:relative;
    display:flex;
    font-size:1rem;
}

header nav>ul>li>a,
header nav>ul>li>span.spacer {
    display:flex;
    align-items:center;
    
    color:var(--black);
    min-width:100%;
    height:var(--nav-height);
    text-align: center;
    padding:0 1.75rem;
    cursor:pointer;
}

header nav>ul>li>span.spacer {
    font-weight: bold;
    overflow: hidden;
    visibility: hidden;
    white-space: nowrap;
    pointer-events: none;
}

header nav>ul>li>span.spacer+a {
    position:absolute;
    white-space: nowrap;
}

header nav>ul>li:hover>a {   
    color:var(--white);
    font-weight: bold;
    cursor:pointer;
}
header nav>ul>li>span.spacer+a.cursor-arrow,
header nav>ul>li>span.spacer+a.cursor-arrow:hover {
    cursor:default;
}

header #nav-space-right {
    visibility:hidden;
}

header nav>ul>li:last-of-type {
    background-color:var(--black);
    border-radius:var(--radius);
    height:var(--nav-item-height);
    align-self: center;
}

header nav>ul>li:last-of-type a {
    color:var(--white);
    height:var(--nav-item-height);
    font-weight:bold;
}

header nav>ul>li:last-of-type:hover {
    background-color:var(--yellow);
}
header nav>ul>li:last-of-type:hover a {
    color:var(--black);
}

@media screen and (min-width:990px) {
    header nav ul ul {
        display:none;
        position:absolute;
        flex-wrap:wrap;
        background-color:var(--black);
        top:var(--nav-height);
        min-width:14rem;
        overflow-x:hidden;
    }

    header nav ul li:hover {
        background-color:var(--black);
    }

    header nav ul ul li .spacer {
        display:none;
    }

    header #nav-space-right {
        width:6vw;
    }

    header nav ul ul li a {
        font-weight:normal;
        font-size:.9rem;
        color:var(--white);
        width:100%;
    }

    header nav ul ul li:hover a {
        font-weight: bold;
        background-color:var(--white);
        color:var(--black);
    }

    header nav ul li:hover ul {
        display:block;
    }

    :is([href], button, input, textarea, summary, select, [tabindex], [draggable], area, object, iframe, .m-button):focus-visible {
        outline: .125rem solid var(--grey);
    }

    /* active states */
    header nav ul li.active {
        background-color:var(--yellow);
        font-weight:bold;
    }
    header nav ul li#infra-finder.active {
        background-color:var(--green);
    }
    header nav ul li.active:hover a {
        color:var(--black);
    }

    header nav ul li.active ul {
        display:none;
    }
    /* end active states */

    header nav ul li:hover ul li:hover {
        background-color:var(--black);
    }
    header nav ul li:hover ul li:hover a {
        color:var(--black);
    }

    header nav ul li:hover ul li a {
        display:flex;
        align-items:center;
        height:var(--nav-item-height);
        padding:0 1.75rem;
        text-wrap:nowrap;
    }
}
@media screen and (max-width:1300px) {
    header #nav-space-right {
        width:8vw;
    }
}
@media screen and (max-width:1279px) {
    header nav ul li {
        font-size:.95rem;
    }
    header nav>ul>li>a, 
    header nav>ul>li>span.spacer {
        padding:0 1rem;
    }
    header nav>ul>li:last-of-type {
        margin-left:1rem;
    }
    header #nav-space-right {
        width:2vw;
    }
}
@media screen and (max-width:1023px) {
    header nav ul li {
        font-size:.9rem;
    }
    header #nav-space-right {
        width:0vw;
    }
}
@media screen and (max-width:989px) {

    header nav {
        justify-content:space-between;
    }
    .header-checkbox ~ ul {
        display:none;
    }
}
/* Toogle
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
   .header-checkbox,
   .header-checkbox:checked,
   .header-toggle,
   .header-checkbox:checked ~ nav {
      display: none;
   }
   
   .header-toggle,
   .header-toggle > span,
   .header-checkbox:checked ~ nav ul {
      position: relative;
   }
   
   .header-toggle .bar,
   .header-checkbox:checked ~ nav,
   .header-checkbox:checked ~ nav::before {
      position: absolute;
   }
   
   .header-toggle {
      z-index: 99;
      overflow: visible;
      width: 48px;
      height: 40px;
      margin: 0;
      padding: 0 8px 2px;
      cursor: pointer;
      opacity: 1;
      border: none;
      outline: none;
      background-color: var(--black);
   }
   
   .header-toggle > span {
      top: 50%;
   }
   
   .header-toggle > span,
   .header-toggle .bar {
      display: block;
      width: 100%;
   }
   
   .header-toggle .bar {
      height: 3px;
      content: '';
      transition: transform .3s cubic-bezier(.645, .045, .355, 1), top .3s cubic-bezier(.645, .045, .355, 1) .2s;
      background-color: var(--white);
   }
   
   .header-toggle .bar:nth-child(1) {
      top: -10px;
   }
   
   .header-toggle .bar:nth-child(3) {
      top: 10px;
   }
   
   .header-checkbox:checked ~ label .bar {
      transition: transform .3s cubic-bezier(.645, .045, .355, 1) .3s, top .3s cubic-bezier(.645, .045, .355, 1);
   }
   
   .header-checkbox:checked ~ label .bar:nth-child(1),
   .header-checkbox:checked ~ label .bar:nth-child(3) {
      top: 0;
   }
   
   .header-checkbox:checked ~ label .bar:nth-child(1),
   .header-checkbox:checked ~ label .bar:nth-child(2) {
      transform: rotate(45deg);
   }
   
   .header-checkbox:checked ~ label .bar:nth-child(3) {
      transform: rotate(-45deg);
   }
   
   .header-checkbox:checked ~ ul {
      z-index: 98;
      box-shadow: 0 25px 95px 5px var(--box-shadow-nav);
   }
   
   .header-checkbox:checked ~ ul::before {
      z-index: -1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: '';
      background-color: var(--bg-nav);
   }
   
   .header-checkbox:checked ~ ul {
      display: inline-block;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      list-style: none;
   }
   @media screen and (max-width:989px) {
        .header-toggle {
            display:block;
        }
        header nav>ul {
            position: absolute;
            top: 58px;
            right: 2rem;
            min-width:250px;
            background-color: black;
            max-height:calc(100vh - var(--nav-height));
            overflow:auto;
        }
        .header-checkbox:checked ~ ul li {
            display:block;
            padding:0;
            margin-left:0;
        }
        .header-checkbox:checked ~ ul li a:hover {
            background-color:var(--yellow);
            color:var(--black);
        }
        .header-checkbox:checked ~ ul li .spacer {
            display:none;
        }
        .header-checkbox:checked ~ ul>li>a {
            height:auto;
            color:var(--white);
            font-weight: normal;
            position:relative;
            padding:.5rem 1rem;
        }
        .header-checkbox:checked ~ ul>li>a:hover {
            font-weight:bold;
        }
        .header-checkbox:checked ~ ul ul {
            display:block;
            background-color:#222222;
        }
        .header-checkbox:checked ~ ul ul>li>a {
            display:block;
            height:auto;
            color:var(--white);
            position:relative;
            padding:.5rem 0 .5rem 1.5rem;
        }
        .header-checkbox:checked ~ ul ul>li>a:hover {
            font-weight:bold;
        }
        .header-checkbox:checked ~ ul>li:last-of-type {
            border-radius:0;
            height:auto;
        }
        .header-checkbox:checked ~ ul>li:last-of-type a {
            background-color:var(--yellow);
            color:var(--black);
        }
    }

/* END HEADER */

/* SECONDARY NAV */
#secondary-nav {
    background-color:var(--yellow);
    overflow:auto;
}
#secondary-nav.green {
    background-color:var(--green);
}
#secondary-nav ul {
    position:relative;
    list-style: none;
    padding:0;
    margin:0;
    display:flex;
    justify-content:center;
}
#secondary-nav li {
    position:relative;
}
#secondary-nav li a,
#secondary-nav li span.spacer {
    display:flex;
    align-items:center;
    height:var(--nav-item-height);
    text-align: center;
    font-size:.8333rem;
    padding:0 1.75rem;
    cursor:pointer;
}

#secondary-nav li span.spacer {
    font-weight: bold;
    overflow: hidden;
    visibility: hidden;
    text-wrap: nowrap;
}

#secondary-nav li span.spacer+a {
    position:absolute;
    top:0;
    white-space: nowrap;
}

#secondary-nav li a:hover {
    color:var(--white);
    background-color:var(--black);
    font-weight:bold;
}
#secondary-nav li.active {
    font-weight:bold;
}

@media screen and (max-width:989px){
    #secondary-nav ul {
        justify-content: space-evenly;
        padding-left:calc(var(--hs) - .5rem);
    }
    #secondary-nav li a, 
    #secondary-nav li span.spacer {
        padding:0 .5rem;
    }
}
@media screen and (max-width:768px){
    #secondary-nav ul {
        justify-content: flex-start;
        flex-wrap:wrap;
    }
}

/* HOMEPAGE */

/* TOPPER */
#top {
    position: relative;
    min-width:100%;
    padding:0 15% 0 var(--hs);
}

#top h2.tagline {
    font-size:5rem;
    margin:0;
    margin-top:var(--vs);
    margin-bottom: calc(var(--vs)/1.5);
    font-family:var(--font2);
}

#top h2 em {
    text-decoration:underline;
    font-style: normal;
}

#top p.intro {
    font-size:1.08333rem;
    max-width:32rem;
    margin:0 0 2rem;
}

#top button {
    margin-bottom:2rem;
}

#top .divider {
    max-width:21.375rem;
    margin-bottom:2rem;
    border-bottom: 1px solid var(--grey);
}

/* END TOPPER */

/* WHAT WE DO & NEWS AND UPDATES & CTA SECTION & IMPACT SECTION */
#what-we-do .cards,
#our-approach .cards,
#news-and-updates .cards,
#choose-open-infrastructure .cards,
#our-impact .cards,
#you-might-also-like .cards,
.template-impact .cards,
.core-projects .cards {
    display:flex;
    gap:1rem;
    justify-content: space-between;
    position:relative;
    padding: 0 var(--hs);
}
#what-we-do .cards a {
    border-radius:var(--radius);
    padding:.5rem 1rem;
    margin-left:-1rem;
}
#what-we-do .cards a:hover {
    background-color: var(--white);
}
#you-might-also-like .cards {
    padding:0;
}
.core-projects .cards {
    flex-wrap:wrap;
}
.core-projects .container>button {
    display:block;
    margin:var(--vs) auto;
}
.gradient-card,
.featured-card,
.cta-card,
.bignum-card,
.partner-card,
.evidence-card,
.support-card,
.insights-card,
.tool-card,
.project-card,
.core-program-card {
    position: relative;
    border-radius: var(--radius);
    padding:var(--vs) var(--hs) calc(var(--vs)*2);
    width:100%;
}
.project-card {
    /* width:calc(33.333% - .75rem); */
    background-color:var(--white);
}
.project-card p::after {
    content:"...";
}
.project-card button {
    position:absolute;
    bottom:var(--vs);
}
.project-card button a:hover {
    background-color:var(--yellow);
}
.gradient-card h3,
.cta-card h3,
.project-card h3 {
    font-family:var(--font2);
    font-weight:400;
    font-size:2rem;
    margin:0 0 1.25rem;
}
.gradient-card h3::after {
    content:'';
    display: block;
    height:1px;
    width:10%;
    border-bottom:1px solid var(--grey);
    margin:1.5rem 0 1.25rem;
}
.gradient-card h3 span.label {
    font-family:var(--font1);
    font-size:1rem;
    font-weight:bold;
    display:block;
    margin-top:1rem;
}
.gradient-card.green {
    background: transparent conic-gradient(from 45deg at 50% 50%, var(--green2) 0.00%, var(--green) 100.00%) 0% 0% no-repeat padding-box;
}
.gradient-card.orange {
    background: transparent conic-gradient(from 45deg at 50% 50%, var(--orange2) 0.00%, var(--orange) 100.00%) 0% 0% no-repeat padding-box;
}
.gradient-card.yellow {
    background: transparent conic-gradient(from 45deg at 50% 50%, var(--yellow2) 0.00%, var(--yellow) 100.00%) 0% 0% no-repeat padding-box;
}
.featured-card.blue {
    background: var(--blue);
}
.featured-card.white {
    background: var(--white);
}
.cta-card.black {
    background: var(--black);
}
#news-and-updates h6 {
    margin:0;
}
#news-and-updates .featured-article h3 {
    font-size:var(--vhs);
    margin:1.75rem 0 1rem 0;
}
#news-and-updates .featured-categories {
    margin-bottom:var(--vs);
}
#news-and-updates .featured-categories .featured-card {
    max-width:100%;
    overflow: hidden;
}
#news-and-updates .featured-categories h3 {
    font-size:1.41666rem;
    margin:1rem 0 0 0;
}
@media screen and (max-width:768px){
    #news-and-updates .featured-categories h3 {
        font-size:1rem;
    }
}
#news-and-updates article {
    border-top:1px solid var(--grey);
    margin:1.75rem 0 1rem;
    padding-top:1.75rem;
}
@media screen and (max-width:989px){
    #news-and-updates .featured-categories {
        flex-wrap:wrap;
    }
}
.featured-categories::before {
    content:'';
    position:absolute;
    display: block;
    height:50%;
    width:calc(100% - var(--hs)*2);
    background-color:var(--blue);
    padding-top:2rem;
    margin-top:-2rem;
}
.featured-categories .featured-card {
    padding-bottom:var(--vs);
}
.cta-card {
    text-align:center;
    color:var(--white);
    margin-top:var(--vs);
    padding:var(--vhs);
    padding-top:calc(var(--vs)*1.3333);
}
.cta-card p {
    margin:0 0 var(--vs) 0;
}
.cta-card button {
    width:100%;
}
#choose-open-infrastructure .cards::before {
    content:'';
    position:absolute;
    bottom:0;
    display: block;
    height: 41%;
    width: 100vw;
    bottom: calc(var(--vs)*-1);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--yellow);
}
#choose-open-infrastructure .cards p {
    max-width:600px;
    margin:0 auto var(--vs) auto;
}
@media screen and (max-width:1280px){
    #choose-open-infrastructure .button-group {
        flex-wrap:wrap;
    }
    #choose-open-infrastructure button {
        max-width:400px;
        margin-left:auto;
        margin-right:auto;
    }
}
.impact-card {
    padding:var(--vhs) 0;
    padding-top:0;
    z-index: 2;
    width:30%;
}
.impact-card h3 {
    font-family:var(--font2);
    font-weight:bold;
    font-size:calc(1.347 * var(--vhs));
    padding: 1rem 0 1.75rem 0;
    margin:0 0 1.75rem 0;
    border-top:1px solid var(--grey);
    border-bottom:1px solid var(--grey);
}
.impact-card p {
    font-size:1.0833333rem;
}
@media screen and (max-width:768px){
    #our-impact .cards {
        flex-wrap:wrap;
        gap:0;
        margin-bottom:2rem;
    }
    .impact-card {
        width:100%;
        display:flex;
        gap:1rem;
        align-items: center;
        border-top:1px solid var(--grey);
        padding:0;
    }
    .impact-card:last-of-type {
        border-bottom:1px solid var(--grey);
    }
    .impact-card h3 {
        border-top:none;
        border-bottom:none;
        margin-bottom:0;
        padding-bottom:0;
        padding-top:0;
    }
}

/* OUR IMPACT */
#our-impact {
    background-color:var(--yellow);
    position:relative;
    margin-top: -1px;
    padding-top:var(--vs);
}

#our-impact::after,
.template-impact #top::before {
    content:'';
    width:100%;
    height:100%;
    display:block;
    position:absolute;
    bottom:-15rem;
    right:0;
    transform: scale(-1, 1);
    background-image:url('globe-white.svg');
    background-repeat:no-repeat;
    background-position:left;
    background-size:45%;
    pointer-events: none;
}

/* GET INVOLVED */
#get-involved {
    padding:var(--vhs);
    padding-top:0;
    position:relative;
    z-index:2;
}
#get-involved h3 {
    font-family:var(--font2);
    font-size:calc(var(--vhs) * 1.38888);
    margin:0;
}
#get-involved p {
    width:100%;
    max-width:32rem;;
}
#get-involved button {
    width:100%;
    max-width:32rem;
    display:block;
    margin:2rem 0 1rem;
    border:1px solid var(--black);
}
#get-involved button a {
    border:none;
}
/* END GET INVOLVED */
/* SOCIAL LINKS */
#social-links {
    padding:var(--vhs);
    padding-top:0;
    position:relative;
    z-index:2;
    position:relative;
}
#social-links h4 {
    font-family:var(--font2);
    font-size:2rem;
    margin:1rem 0;
    padding-top:var(--vs);
    border-top:1px solid black;
}
#social-links button.reverse a {
    border:transparent;
}
#back-to-top {
    position:absolute;
    bottom:var(--vs);
    right:var(--hs);
}
#back-to-top button a {
    font-size: 2rem;
    line-height: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding-right:.75rem;
    padding-bottom: .75rem;
    padding-left:.75rem;
}

/* ABOUT PAGE */
.np-about #our-approach h2 {
    font-family:var(--font2);
    margin:var(--vhs);
    text-align:center;
    font-size:1.875rem;
}
.np-about #our-approach h2::before {
    content:'';
    display:block;
    width:100%;
    max-width:21.375rem;
    margin:var(--vs) auto;
    margin-bottom:calc(var(--vs)/1.5);
    border-bottom: 1px solid var(--grey);
}

.np-about .post-content section {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}
.np-about .post-content section.two-up {
    width:100vw;
}

#about-callout {
    font-family:var(--font3);
    font-size:var(--vhs);
    text-align: center;
    padding:var(--vs) calc(var(--hs)*2);
}

.two-up {
    display:flex;
    background-color:var(--white);
}
.two-up>div {
    width:100%;
    display:flex;
    gap:calc(var(--vhs)/2);
}
.two-up>div:first-of-type {
    position: relative;
    justify-content:flex-end;
}
.two-up>div:last-of-type {
    justify-content:flex-start;
}
.two-up.color-block>div:first-of-type {
    background-color:var(--black);
}
.two-up.color-block .two-up-title p {
    color:var(--white);
    text-shadow: 0 0 5px var(--black);
}
.two-up.color-block>div:first-of-type::before {
    content: '';
    width: 22rem;
    height: 22rem;
    display: block;
    position: absolute;
    left: 0;
    transform: rotate(90deg);
    background-image: url(globe.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100%;
}
.two-up.color-block>div:last-of-type {
    background-color:var(--yellow);
}
.two-up-title {
    z-index: 2;
    position: relative;
    width:100%;
    max-width:18rem;
    align-self:flex-end;
    margin:0 var(--hs) var(--vs) 0;
    padding:calc(var(--vhs) / 2);
}
.two-up-title p {
    font-family:var(--font2);
    font-weight:bold;
    font-size:var(--vhs);
    line-height:1.1;
}
.two-up-title span {
    display:block;
    line-height:1.4;
    font-family:var(--font3);
    font-size:1.41666rem;
    margin-top:.5rem;
}
.two-up-description {
    z-index: 2;
    position: relative;
    width:100%;
    max-width:31rem;
    padding:var(--vhs);
}
.two-up.color-block .two-up-description p:first-of-type {
    font-size:1.657rem;
    font-family:var(--font2);
    line-height:1.3;
}
.two-up-description p.global-meta {
    font-size:1.08333rem;
}
.two-up-description p.global-meta span {
    display:block;
    font-weight:bold;
}

#what-is-open-infrastructure .two-up-title {
    max-width:25rem;
    align-self: flex-start;
    padding-top: 1rem;
    text-align:right;
}
#what-is-open-infrastructure .two-up-title span {
    margin-top:1.75rem;
    font-family:var(--font2);
    font-weight:400;
    font-style: italic;
    line-height:1.2;
}
#history-of-ioi .container {
    padding:var(--vhs);
    column-count:2;
    column-gap:6rem;
}
#history-of-ioi h2 {
    column-span:all;
    margin-top:0;
}
#history-of-ioi p:first-of-type {
    margin-top:0;
}
/* END ABOUT PAGE */

/* STRATEGIC SUPPORT */
.np-strategic-support #ongoing-partnerships h2,
.np-data-room #projects h2,
.core-program-embed h2,
.core-projects h2 {
    font-family:var(--font2);
    margin:var(--vhs);
    padding-left:var(--hs);
    text-align:left;
    font-size:1.875rem;
}
#client-testimonial h2 {
    font-family:var(--font2);
    font-size:1.875rem;
}
.np-strategic-support .post-content section,
.np-funding-pilots .post-content section,
.np-data-room .post-content section,
.template-core-program .post-content section,
.template-report .post-content section,
.template-infra-finder .post-content section,
.core-projects .post-content section {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    padding-bottom:calc(var(--vs)/2);
}
#client-testimonial {
    background-color:var(--white);
    padding:var(--vhs);
}
.np-strategic-support .post-content blockquote,
.np-funding-pilots .post-content blockquote,
.np-data-room .post-content blockquote,
.template-core-program .post-content blockquote,
.template-report .post-content blockquote,
.template-infra-finder .post-content blockquote,
.core-projects .post-content blockquote {
    font-style: italic;
    margin-left:0;
    margin-right:0;
    font-size:calc(var(--vhs)*.555);
}
#ongoing-partnerships .cards,
.core-program-embed .cards,
.core-projects .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    position:relative;
    padding: 0 var(--hs);
}
#past-projects.core-projects .cards {
    grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width:1080px){
    #past-projects.core-projects .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width:768px){
    #ongoing-partnerships .cards,
    .core-program-embed .cards,
    .core-projects .cards {
        grid-template-columns: repeat(1, 1fr);
    }
    #past-projects.core-projects .cards {
        grid-template-columns: repeat(1, 1fr);
    }
}
.core-program-card {
    background:var(--white);
}
.partner-card.black,
.core-program-card.black {
    background: var(--black);
    color:var(--white);
}
.partner-card h3,
.core-program-card h3 {
    font-family:var(--font2);
    font-size:calc(var(--vhs)*.6944);
}
.core-program-card.black h3 a {
    color:var(--white);
}
.partner-card p,
.core-program-card p {
    font-size:calc(var(--vhs)*.4444);
}
.partner-card button,
.core-program-card button {
    position: absolute;
    bottom: var(--vs);
}
@media screen and (max-width:768px) {
    #ongoing-partnerships .cards,
    .core-program-card .cards {
        grid-template-columns: repeat(1, 1fr);
    }
    .partner-card h3,
    .core-program-card h3 {
        font-family:var(--font2);
        font-size:calc(var(--vhs));
    }
    .partner-card p,
    .core-program-card p {
        font-size:1rem;
    }
    .partner-card button,
    .core-program-card button {
        position: relative;
        bottom:auto;
        margin-top:var(--vs);
    }
    .np-strategic-support .post-content blockquote,
    .np-funding-pilots .post-content blockquote,
    .np-data-room .post-content blockquote,
    .template-core-program .post-content blockquote,
    .template-report .post-content blockquote,
    .template-infra-finder .post-content blockquote,
    .core-projects .post-content blockquote {
        font-size:1.125rem;
    }
}

/* TEAM PAGE */
#team-grid {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    padding:var(--hs);
}
.team-card {
    background-color:var(--black);
    overflow: hidden;
}
.team-card figure {
    margin:0;
}
.team-card figure>div{
    aspect-ratio: 1 / 1;
    overflow:hidden;
}
.team-card img {
    width:100%;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
.team-card figcaption {
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: center;
    height: 6.458rem;
    width: 100%;
    padding: 1.75rem;
    line-height: 1.2;
    color: var(--grey2);
}
.team-card figcaption strong {
    display:block;
    font-family:var(--font2);
    font-size:1.41666rem;
    color:var(--white);
}
@media screen and (max-width:768px){
    #team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .team-card figcaption strong {
        font-size:1rem;
    }
}

.list-grid h2 {
    font-family:var(--font1);
    border-bottom:1px solid var(--grey);
    padding:var(--vs) var(--hs) calc(var(--vs)/2);
    margin-bottom:1.75rem;
    font-size:2.2916rem;
}
.list-grid>p,
.list-grid>h3 {
    padding-left:var(--hs);
    padding-right:var(--hs);
}
.list-grid>p+div {
    margin-top:var(--vs);
}
.list-grid>div {
    column-count:3;
    column-gap:1.75rem;
    padding:0 var(--hs);
}
.list-grid>div p {
    font-size:.75rem;
}
.list-grid>div p:first-of-type {
    margin-top:0;
}
.list-grid>div p strong {
    font-size:1.1666rem;
}
@media screen and (max-width:768px){
    .list-grid>div {
        column-count:2;
    }
}
@media screen and (max-width:500px){
    .list-grid>div {
        column-count:1;
    }
}

.two-column {
    column-count:2;
    column-gap:var(--hs);
}
.two-column>*:first-of-type {
    margin-top:0;
}
.two-column p {
    break-inside: avoid;
}

#governance-committee,
#community-councils>div,
#funding>div,
#sustaining-circle>div,
.np-funding h3 {
    margin: var(--vhs);
}
#governance-committee h3,
#inaugrural-committee h3 {
    font-weight:bold;
}
#community-councils h2,
#sustaining-circle h2 {
    font-family:var(--font1);
    border-bottom:1px solid var(--grey);
    padding:var(--vs) var(--hs) calc(var(--vs)/2);
    margin-bottom:1.75rem;
    font-size:2.2916rem;    
}
/* END TEAM PAGE */

/* NEWS & UPDATES PAGE */
#filters,
#latest-posts h2 {
    margin:calc(var(--vs)/2) var(--hs);
}
#filters h6 {
    margin-bottom:1rem;
}
#filters ul,
ul.tags {
    list-style: none;
    padding:0;
    margin:0;
    display:flex;
    flex-wrap:wrap;
}
#filters ul li,
ul.tags li {
    background-color:var(--green2);
    border-radius:var(--radius);
    margin:0 1rem 1rem 0;
    cursor:pointer;
    font-size:.75rem;
    font-weight:bold;
}
#filters ul li:hover,
ul.tags li:hover {
    background-color:var(--green);
}
#filters ul li::before,
ul.tags li::before {
    content:'#';
    padding-left:1rem;
}
#filters ul li a,
ul.tags li a {
    display: inline-block;
    padding:.5rem 1rem .5rem 0;
}
#filters .footer-nav-column {
    display:none;
}

#latest-posts {
    border-bottom: 1px dotted var(--grey);
}
#latest-posts article {
    border-top: 1px dotted var(--grey);
    padding:var(--vhs);
}
#latest-posts article h3 {
    font-family:var(--font3);
    font-weight:normal;
    font-size:calc(var(--vhs) * 1.39);
    margin:1rem 0 1.75rem 0;
}
#latest-posts article ul.tags li {
    margin:1rem 1rem 0 0;
}
#latest-posts article button:hover a {
    background-color:var(--yellow);
}

#more-articles {
    margin-bottom:var(--vs);
}
#more-articles h2 {
    margin:var(--vs) var(--hs) calc(var(--vs)/2);
}
#more-articles .cards {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    padding:0 var(--hs) var(--vs) var(--hs);
}
@media screen and (max-width:989px){
    #more-articles .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width:768px){
    #more-articles .cards {
        grid-template-columns: repeat(1, 1fr);
    }
}
#more-articles .card {
    position: relative;
    border-radius: var(--radius);
    padding:var(--vs) var(--hs) calc(var(--vs)*2);
    width:100%;
    background-color:var(--white);
}
#more-articles h3 {
    font-size:1.66666rem;
}
#more-articles ul.tags {
    position:absolute;
    bottom:1.75rem;
    display:flex;
    flex-wrap:wrap;
}
.pagination-section {
    display:flex;
    gap:1rem;
    justify-content: center;
    padding: 0 var(--hs) var(--vs);
    text-transform: uppercase;
    font-weight: bold;
}
/* END NEWS & UPDATES PAGE */

/* ARTICLE / POST */
.post-template #top {
    border-bottom:1px dotted var(--grey);
    padding-bottom:1rem;
}
.post-template.np-team #top {
    border-bottom:none;
}
.post-template #top h1.tagline {
    font-size:calc(var(--vhs) * 1.39);
    margin:var(--vs) 0 var(--vs);
    font-family:var(--font3);
    max-width:58rem;
    font-weight:normal;
}
.post-template #top .global-meta {
    border-bottom:1px dotted var(--grey);
}
.post-template #top .global-meta {
    padding:0 1.75rem 1.75rem 3rem;
    margin-left:calc(var(--hs)*-1); /*TODO: fix this */
    margin-bottom:calc(var(--vs)/2);
    font-size:1rem;
    max-width:38rem;
}
.post-template #top .global-meta a{
    font-size:1rem;
}
.post-template button:hover a {
    background-color:var(--yellow);
}
.post-template table {
    max-width:calc(100vw - var(--hs)*2);
    overflow:auto;
}
@media screen and (max-width:989px){
    .post-template #top .global-meta {
        padding:0 0 var(--vs);
        margin-left:0; /*TODO: fix this */
        margin-bottom:calc(var(--vs)/2);
    }
}


.post-section.template-team .container:first-of-type {
    display:flex;
 }
 .post-section.template-team .container .item-image {
    filter:grayscale(100%);
    width:100%;
 }
 .post-section.template-team .container .item-image img {
    width:100%;
    margin-top:var(--vs);
}
.post-section.template-team h1 {
    margin:0;
 }
 .post-section.template-team .item-excerpt {
    font-weight:bold;
 }
 .post-section.template-team h2 {
    font-family: var(--font1);
    border-bottom: 1px solid var(--grey);
    padding: var(--vs) var(--hs) calc(var(--vs)/2);
    margin-bottom: calc(var(--vs)/2);
    margin-top:0;
    font-size: 2.2916rem;
 }
 .post-section.template-team .container:last-of-type {
    margin-bottom:var(--vhs);
 }
 @media screen and (max-width:768px){
    .post-section.template-team .container:first-of-type {
        flex-wrap:wrap;
    }
    .post-section.template-team .container .item-image {
        padding:0 var(--hs)
    }
 }

.post-content {
    width:100%;
    max-width:42.583rem;
    margin:0 auto;
    padding:var(--vhs);
}
.post-content * {
    line-height:1.5;
    position:relative;
}
.post-content a {
    text-decoration:underline;
}
.post-content button a {
    text-decoration:none;
}
.post-content a:hover {
    text-decoration:none;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    font-weight:bold;
}
.post-content figure {
    position:relative;
    left:50%;
    max-width:100vw;
    width:130%;
    overflow:hidden;
    margin:0;
    transform: translateX(-50%);
}
.post-content figure img {
    max-width:110%;
    height: auto;
}
.post-content figcaption {
    color:var(--grey);
    font-size:.75rem;
    text-align:center;
}

/* TEMPLATES */
.template-wide .post-content {
    max-width:80rem;
    padding:0;
}
.template-wide #top h2.tagline {
    font-size:3rem;
}

.template-core-program section#top,
.template-report section#top,
.template-infra-finder section#top {
    width: 100vw;
    background-color: var(--black);
    color: var(--white);
    padding: var(--vhs);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

.template-core-program section#top::before,
.template-report section#top::before,
.template-infra-finder section#top::before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    transform: rotate(180deg);
    background-image: url(globe-white.svg);
    background-repeat: no-repeat;
    background-position: 0 1rem;
    background-size: 25%;
    pointer-events: none;
}

.template-core-program section#top .item-container,
.template-report section#top .item-container,
.template-infra-finder section#top .item-container {
    max-width:80rem;
    margin:0 auto;
}
.template-core-program .post-content,
.template-report section#top .post-content,
.template-infra-finder .post-content {
    padding-top:0;
    padding-bottom:0;
}
.template-core-program .post-content .intro,
.template-report section#top .post-content .intro,
.template-infra-finder .post-content .intro {
    width:100vw;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    background-color:white;
    font-size:calc(var(--vhs)*.8);
    font-family:var(--font2);
    padding:var(--vhs);
    margin-top:0;
}
.template-core-program #get-in-touch,
.template-report #get-in-touch,
.template-standard #stay-updated {
    background-color:var(--yellow);
    position:relative;
    margin-top: -1px;
    padding-top:var(--vs);
}

.template-core-program #get-in-touch::after,
.template-report #get-in-touch::after,
.template-standard #stay-updated::after {
    content:'';
    width:100%;
    height:100%;
    display:block;
    position:absolute;
    bottom:0;
    right:0;
    transform: scale(-1, 1);
    background-image:url('globe-white.svg');
    background-repeat:no-repeat;
    background-position:left;
    background-size:45%;
}

.template-standard #stay-updated {
    width:100vw;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    margin-top:var(--vs);
}

/* POST NAVIGATION */
.nextprev-section,
.nextprev-section section {
   display: flex;
   align-items: flex-start;
}

.nextprev-section {
   width: 100%;
   margin: var(--vs) auto;
   border-top: 1px solid var(--grey);
   border-bottom: 1px solid var(--grey);
   padding: 0 var(--hs);
}

.nextprev-section section {
   box-sizing: border-box;
   margin-top: 40px;
   margin-bottom: 40px;
   flex: 1 0 50%;
}

.nextprev-section section > div {
   max-width: 400px;
   align-self: center;
}

.nextprev-newer {
   padding-right: 20px;
}

.nextprev-older {
   padding-left: 20px;
   text-align: right;
   justify-content: flex-end;
}

.nextprev-section h3 {
    font-family:var(--font2);
    font-size:1.6666rem;
    font-weight:bold;
}
.nextprev-section small {
    font-weight:bold;
    text-transform:capitalize;
}
/* END POST NAV */

/* YOU MIGHT ALSO LIKE */
#you-might-also-like {
    margin-bottom:6rem;
    padding:0 var(--hs);
}
#you-might-also-like h2 {
    font-size:1.875rem;
    margin-bottom:1.75rem;
}
#you-might-also-like h3 {
    font-family:var(--font2);
    font-weight:bold;
    font-size:1.66666rem;
}
#you-might-also-like .featured-card {
    padding-top:1rem;
    padding-bottom:var(--vs);
}


/* FUNDING */

.logos {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    margin-bottom:2rem;
}
.logo {
    display:flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height:250px;
    box-sizing:border-box;
    text-align:center;
    background-color:white;
    padding:2rem;
}    
.logo img{
    max-width:100%;
}
.logo p {
    line-height: 1.25;
    margin-top: .5rem;
    font-weight: bold;
    font-size: .9rem;
}
.logo p a {
    border-bottom: none;
} 
@media screen and (max-width:768px){
    .logos {
        grid-template-columns: repeat(2, 1fr);
        padding:0 var(--hs);
    }
}

/* GET INVOLVED PAGE */
body.np-get-involved .post-content h3 {
    font-size:2rem;
    margin-top:var(--vs);
    margin-bottom: 1rem;
    padding-top:var(--vs);
    line-height: 1.25;
}
body.np-get-involved .post-content h3::before {
    content:'';
    display:block;
    width:calc(100vw - var(--hs)*2);
    border-top:1px solid var(--black);
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:calc(var(--vs)/30 * -1);
}
body.np-get-involved .post-content h3:first-of-type {
    margin-top:0;
    padding-top:0;
}
body.np-get-involved .post-content h3:first-of-type::before {
    display:none;
}
body.np-get-involved .post-content {
    padding-bottom:0;
    margin-bottom:0;
}
body.np-get-involved #top h2.item-title,
body.np-contact #top h2.item-title {
    font-size:2rem;
}
body.np-get-involved #top p.intro,
body.np-contact #top p.intro {
    font-family:var(--font2);
    font-size:var(--vhs);
    max-width:85%;
}



/* FOOTER */
footer {
    background-color:var(--black);
    color:var(--white);
    padding-top: 7vh;
    padding-bottom: 6vh;
    width:100%;
    position: relative;
    z-index:2;
 }

 footer img {
    max-width:16rem;
 }

 footer a {
    color:var(--white);
    font-size:.9rem;
 }
 footer a:hover {
    text-decoration: underline;
 }

 footer ul {
    list-style: none;
    margin:0;
    padding:0;
 }

 footer ul li {
    padding:0;
    line-height:1.75;
 }

 .footer-nav {
    min-width:40%;
 }
 .footer-nav ul {
    columns:2;
 }
 .footer-social li a {
    display: block;
    border-bottom:1px solid var(--grey);
    padding-bottom:.5rem;
    margin-bottom:.5rem;
    font-weight:bold;
    font-size:1rem;
 }
 .footer-social li a:hover {
    color:var(--yellow);
    text-decoration: none;
 }
 
 .footer-wrap {
    display: flex;
 }
 
 .footer-wrap {
    width: 100%;
    margin: 0 auto;
    align-items: flex-start;
    padding:var(--vhs);
    display: flex;
    justify-content: space-between;
 }
 .footer-wrap h3 {
    font-family:var(--font2);
    font-weight:bold;
    margin-top:1.75rem;
    margin-bottom:3rem;
 }
 
 .footer-wrap,
 .footer-data {
    box-sizing: border-box;
 }
 
 .footer-description,
 .footer-copyright {
    font-size: 13px;
    max-width:20rem;
 }
 .footer-search {
    margin: 1rem 0;
 }
 .footer-search img {
    filter: invert(1);
    width: 25px;
    margin-bottom: -.5rem;
    margin-right:.5rem;
 }
 .footer-copyright {
    margin: 1rem 0;
    color:var(--grey);
 }
 .footer-copyright a {
    color:var(--grey);
 }
 
 .footer-logo,
 .footer-description,
 .footer-icons {
    width: 21.875rem;
    max-width:88vw;
 }
 .footer-logo img {
    max-width:12.5rem;
 }
 .footer-icons {
    display:none;
 }

 @media screen and (max-width:989px){
    .footer-wrap {
        flex-wrap:wrap;
    }
    .footer-social,
    .footer-nav,
    .footer-data {
        width:100%;
    }
    .footer-wrap h3 {
        border-top:1px solid var(--grey);
        margin-bottom:1rem;
        padding-top:2rem;
    }
 }

 /* hides blog tags */
 .footer-section .global-underline {
    display:none;
 }
 .archive-details {
    margin:var(--vhs);
 }


 /* Members — Notifications
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.global-notification {
    font-family: var(--font-family-two);
    font-size: 13px;
    font-weight: var(--font-weight-two-semi-bold);
    position: fixed;
    z-index: 101;
    top: 25px;
    right: 10px;
    left: 10px;
    display: none;
    visibility: hidden;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    transform: translateY(-150%);
    text-align: center;
    color: var(--color-font-two);
    background-color: var(--color-notification);
 }
 
 .global-notification.false {
    z-index: 102;
    background-color: var(--color-notification-false);
 }
 
 .global-notification-subscribe .subscribe,
 .global-notification-signin .signin,
 .global-notification-signup .signup,
 .global-notification-false .false,
 .global-notification-success .success {
    display: block;
    -webkit-animation: slideDownNotification 5s cubic-bezier(.19, 1, .22, 1) forwards;
    animation: slideDownNotification 5s cubic-bezier(.19, 1, .22, 1) forwards;
 }
 
 @-webkit-keyframes slideDownNotification {
    from, to { visibility: visible; }
    15% { transform: translateY(0); }
    85% { transform: translateY(0); }
 }
 
 @keyframes slideDownNotification {
    from, to { visibility: visible; }
    15% { transform: translateY(0); }
    85% { transform: translateY(0); }
 }

 * --------------------------------------------------------------------------
   6.Search function
   -------------------------------------------------------------------------- */
.search-section {
   z-index: 998;
   display: none;
}

.search-section,
.search-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display:none;
}

.search-overlay {
   z-index: 997;
   background-color: var(--bg-search);
}

.search-content {
   position: relative;
   z-index: 999;
   top: 20vh;
   overflow: hidden;
   width: calc(100% - 50px);
   max-width: 900px;
   margin: 0 auto;
   background-color: var(--color-body);
}

.search-content,
.search-form input,
.search-meta,
.search-results {
   box-sizing: border-box;
}

.search-meta,
.search-results small {
   font-family: var(--font-family-four);
   font-size: 13px;
   font-weight: var(--font-weight-four-medium);
   display: block;
   width: 100%;
}

/* Close
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.search-close {
   position: absolute;
   z-index: 999;
   top: 50px;
   right: 50px;
   cursor: pointer;
}

.search-close svg {
   width: 25px;
   height: 25px;
   fill: var(--color-search-close);
}

/* Form
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.search-form input {
   font-size: 30px;
   display: block;
   width: 100%;
   padding: 25px 20px;
   color: var(--color-font-one);
}

/* Meta
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.search-meta {
   margin: 0;
   padding: 8px 0 8px 20px;
   text-align: left;
   color: var(--color-font-two);
   background-color: var(--color-details);
}

.search-meta .is-hide {
   display: none;
}

/* Results
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.search-results {
   overflow-x: hidden;
   overflow-y: auto;
   width: 100%;
   max-height: calc(60vh - 105px);
   padding: 0 15px 0 20px;
}

.search-results small {
   margin-bottom: 7px;
}

.search-results small:first-of-type {
   margin-top: 20px;
}

.search-results a {
   font-family: var(--font-family-one);
   font-size: 22px;
   font-weight: var(--font-weight-one-bold);
   line-height: 1.3;
   display: inline-block;
   margin: 0 0 15px;
}

.search-results a:last-of-type {
   margin-bottom: 25px;
}

/* If active
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.search-active {
   overflow: hidden;
   -webkit-overflow-scrolling: auto;
}

.search-active .global-wrap {
   overflow-x: hidden;
   overflow-y: scroll;
}

.search-active .search-section {
   -webkit-animation: showSearch .2s ease forwards;
   animation: showSearch .2s ease forwards;
}

@-webkit-keyframes showSearch {
   0% { opacity: 0; }
   100% { opacity: 1; }
}

@keyframes showSearch {
   0% { opacity: 0; }
   100% { opacity: 1; }
}

/* Hiding the scrollbar
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width:1025px) {
   .search-section:after {
      position: absolute;
      z-index: 996;
      top: 0;
      right: 0;
      width: 17px;
      height: 100%;
      content: '';
      background-color: var(--color-body);
   }

}

/* RWD — Search function
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:480px) {
   .search-content {
      width: calc(100% - 30px);
   }

   .search-form input {
      font-size: 18px;
      padding: 15px;
   }

   .search-meta {
      font-size: 9px;
   }

   .search-meta,
   .search-results {
      padding-left: 15px;
   }

   .search-results a {
      font-size: 16px;
   }

}

@media (max-width:1024px) {
   .search-close {
      display: none;
   }

}







@media (max-width:1280px) {
    :root {
        --vs:2.5rem;
        --hs:2.5rem;
        --vhs:2.5rem;
    }
    h1 {
        font-size:2.5rem;
    }
    #top h2.tagline {
        font-size:3.5rem;
    }
    .gradient-card h3, 
    .cta-card h3 {
        font-size:1.75rem;
    }
}
@media (max-width:1025px) {
    :root {
        --vs:2rem;
        --hs:2rem;
        --vhs:2rem;
    }
    h1 {
        font-size:2rem;
    }
    #top h2.tagline {
        font-size:3rem;
    }
    .gradient-card h3, 
    .cta-card h3 {
        font-size:1.5rem;
    }
}
@media (max-width:768px) {
    :root {
        --vs:1.5rem;
        --hs:1.5rem;
        --vhs:1.5rem;
    }
    h1 {
        font-size:1.5rem;
    }
    #top h2.tagline {
        font-size:2rem;
    }
    .two-up {
        flex-wrap:wrap;
    }
    .two-up.color-block .two-up-description p:first-of-type {
        font-size:1.25rem;
    }
    .two-up-description{
        min-width: 100%;
        padding-top: 0;
    }
    #what-is-open-infrastructure .two-up-title {
        text-align: left;
        min-width: 100vw;
        padding: 0 var(--vhs);
        margin: 0;
    }
    #history-of-ioi .container {
        column-count: 1;
    }
}

@media (max-width:768px){
    #what-we-do .cards, 
    #our-approach .cards, 
    #news-and-updates .cards, 
    #choose-open-infrastructure .cards, 
    #our-impact .cards, 
    #you-might-also-like .cards,
    .footer-wrap {
        flex-wrap:wrap;
    }
    a.more {
        position: static;
    }
}