<div class="header" data-header>
<div class="header__container">
<div class="header__logo">
<a href="/">
<span class="header__logo-text">
National Network of Public Health Institutes
</span>
<svg role="none" aria-hidden="true" width="292" height="32" viewBox=" 0 0 292 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>National Network of Public Health Institutes (NNPHI)</title>
<g>
<path d="M22.38.55v9.993c0 3.423.055 6.847.176 10.31L12.594.617H0V31.55h8.288v-7.803c0-5.017-.094-10.006-.27-15.036l11.366 22.826h11.285V.617L22.38.55z" fill="#520B4E" />
<path d="M117.707.616v11.36h-13.404V.616h-8.639V31.55h8.639V19.155h13.404V31.55h8.639V.616h-8.639zM138.508.616h-8.639V31.55h8.639V.616z" fill="#4ABDED" />
<path d="M64.86 14.112V.616h-8.288v9.913c0 1.3 0 2.27.027 3.583h8.261z" fill="#520B4E" />
<path d="M68.383 31.55h8.64l-.041-7.724h-8.64l.041 7.724zM50.444 22.367h32.41c6.681 0 11.446-3.08 12.823-7.883.27-.929.405-1.938.405-2.986 0-1.048-.135-2.097-.405-3.039C94.341 3.67 89.765.63 83.3.63H68.397v13.497h8.639V7.384h5.062c3.617 0 5.156 1.433 5.156 4.114 0 2.68-1.539 4.114-5.156 4.114H47.204" fill="#4ABDED" />
<path d="M58.273 23.813l-1.58-3.105L46.8.616H34.191V31.55h8.288v-7.803c0-5.03-.094-10.006-.256-15.036l11.366 22.825h11.285V23.8" fill="#520B4E" />
<path d="M142.139 1.12h-1.093V.616h2.808v.504h-1.094v2.933h-.607V1.12h-.014zM145.703 4.04l-.891-2.774V4.04h-.594V.616h.945l.85 2.734.837-2.734h.945V4.04h-.594V1.266l-.891 2.774h-.621.014z" fill="#4ABDED" />
<path d="M154.693 17.722h-1.323V8.008h1.714l5.251 8.042c-.027-1.221-.04-2.455-.04-3.676V8.008h1.323v9.714h-1.715l-5.251-8.042c.027 1.354.041 2.694.041 4.02v4.022zM167.935 17.722c-.121-.412-.175-.836-.189-1.473-.391.929-1.296 1.632-2.551 1.632-1.255 0-2.011-.544-2.011-1.871s.715-1.898 2.591-2.19l1.944-.318v-.359c0-1.194-.634-1.672-1.633-1.672s-1.593.319-1.661 1.62h-1.093c.054-1.805 1.363-2.615 2.835-2.615 1.471 0 2.74.969 2.74 2.548v2.668c0 .902.081 1.539.216 2.03h-1.188zm-2.281-.796c1.134 0 2.092-.61 2.092-1.752v-.836l-1.525.239c-1.283.199-1.809.637-1.809 1.327s.391 1.008 1.242 1.008v.014zM172.808 17.788c-1.268 0-1.903-.597-1.903-1.91V11.63h-.999v-.996h.999v-1.5h1.215v1.5h1.647v.996h-1.647v4.087c0 .783.297 1.048 1.093 1.048h.554v.956c-.257.04-.54.066-.959.066zM176.115 8.008v1.22H174.9v-1.22h1.215zm0 2.64v7.074H174.9v-7.073h1.215zM181.015 10.49c1.971 0 3.51 1.446 3.51 3.702 0 2.256-1.552 3.702-3.51 3.702-1.957 0-3.509-1.446-3.509-3.702 0-2.256 1.552-3.703 3.509-3.703zm0 6.41c1.215 0 2.241-1.05 2.241-2.708 0-1.659-1.026-2.707-2.241-2.707-1.214 0-2.24 1.048-2.24 2.707 0 1.659 1.026 2.707 2.24 2.707zM187.103 10.649v1.42c.364-.943 1.161-1.58 2.403-1.58s2.389 1.075 2.389 2.72v4.513h-1.215v-4.26c0-1.194-.621-1.964-1.755-1.964s-1.795.756-1.795 1.964v4.26h-1.215v-7.073h1.188zM198.037 17.722c-.122-.412-.176-.836-.189-1.473-.392.929-1.296 1.632-2.552 1.632-1.255 0-2.011-.544-2.011-1.871s.716-1.898 2.592-2.19l1.944-.318v-.359c0-1.194-.635-1.672-1.634-1.672-.999 0-1.592.319-1.66 1.62h-1.093c.054-1.805 1.363-2.615 2.834-2.615 1.472 0 2.741.969 2.741 2.548v2.668c0 .902.081 1.539.216 2.03h-1.188zm-2.282-.796c1.134 0 2.093-.61 2.093-1.752v-.836l-1.526.239c-1.282.199-1.808.637-1.808 1.327s.391 1.008 1.241 1.008v.014zM202.1 7.849v9.873h-1.215V7.849h1.215zM208.836 17.722h-1.323V8.008h1.714l5.251 8.042c-.027-1.221-.041-2.455-.041-3.676V8.008h1.323v9.714h-1.714l-5.251-8.042c.027 1.354.041 2.694.041 4.02v4.022zM218.501 14.271c.04 1.646.999 2.628 2.254 2.628s1.687-.716 1.863-1.54h1.107c-.23 1.514-1.404 2.535-2.997 2.535s-3.456-1.446-3.456-3.702c0-2.256 1.391-3.703 3.402-3.703s3.078 1.54 3.051 3.782h-5.224zm.094-.955h3.901c-.162-1.38-.945-1.858-1.808-1.858-.864 0-1.85.69-2.093 1.858zM227.139 17.788c-1.268 0-1.903-.597-1.903-1.91V11.63h-.999v-.996h.999v-1.5h1.215v1.5h1.647v.996h-1.647v4.087c0 .783.297 1.048 1.093 1.048h.554v.956c-.257.04-.54.066-.959.066zM230.474 17.722l-2.133-7.073h1.282l1.728 6.277h.04l1.688-6.277h1.633l1.62 6.277h.054l1.701-6.277h1.215l-2.201 7.073h-1.66l-1.606-5.866-1.715 5.866h-1.66.014zM243.27 10.49c1.971 0 3.51 1.446 3.51 3.702 0 2.256-1.552 3.702-3.51 3.702-1.957 0-3.509-1.446-3.509-3.702 0-2.256 1.552-3.703 3.509-3.703zm0 6.41c1.215 0 2.241-1.05 2.241-2.708 0-1.659-1.026-2.707-2.241-2.707s-2.24 1.048-2.24 2.707c0 1.659 1.025 2.707 2.24 2.707zM249.358 10.649V12.4c.31-1.088 1.012-1.818 1.984-1.818s.459.013.621.067v1.035h-.702c-1.161 0-1.863.557-1.863 2.057v3.98h-1.214V10.65h1.187-.013zM255.959 13.688l3.307 4.034h-1.471l-1.296-1.632c-.432-.544-.877-1.089-1.296-1.633l-.972 1.009v2.256h-1.214V7.849h1.214v6.29l3.213-3.477h1.444l-2.915 3.039-.014-.013zM265.692 17.855c-.284 0-.54-.053-.797-.16a1.86 1.86 0 01-.648-.477c-.189-.213-.324-.478-.432-.783a3.09 3.09 0 01-.162-1.035c0-.385.108-1.049.311-1.566.202-.518.472-.97.81-1.367a4.543 4.543 0 011.134-.969c.432-.239.863-.372 1.322-.372.459 0 .581.054.824.16.256.106.472.265.648.477.175.213.324.452.418.744.108.292.162.61.162.955 0 .518-.108 1.035-.31 1.553a5.594 5.594 0 01-.81 1.406 4.389 4.389 0 01-1.148 1.022c-.431.266-.877.398-1.322.398v.014zm.067-.624c.284 0 .567-.146.837-.425a4.22 4.22 0 00.742-1.088c.216-.438.405-.916.54-1.433a5.843 5.843 0 00.203-1.473c0-.465-.081-.73-.23-.89-.148-.159-.364-.238-.634-.238s-.365.066-.554.186a2.431 2.431 0 00-.526.517 6.627 6.627 0 00-.472.756 6.648 6.648 0 00-.621 1.872 5.95 5.95 0 00-.081.955c0 .451.081.783.229.969a.696.696 0 00.567.279v.013zM271.645 16.833c-.216.836-.432 1.513-.648 2.043-.216.531-.446.943-.702 1.248a1.963 1.963 0 01-.81.624 2.49 2.49 0 01-.972.172c-.365 0-.635-.093-.864-.265-.229-.186-.337-.398-.337-.664 0-.265.054-.371.161-.478.108-.119.257-.172.446-.172s.297.04.364.133c.068.093.122.185.162.292.041.106.095.199.162.292.054.092.176.132.338.132.162 0 .364-.093.526-.292.162-.199.284-.45.365-.77l1.809-6.9h-1.202l.162-.557h1.188c.189-.73.378-1.354.594-1.872.216-.517.445-.942.702-1.274.256-.331.513-.57.796-.716.284-.146.581-.226.905-.226.486 0 .891.106 1.215.305.31.2.472.452.472.757s-.054.345-.162.478a.542.542 0 01-.445.199c-.189 0-.284-.027-.365-.08a.663.663 0 01-.202-.226 1.135 1.135 0 01-.095-.278l-.081-.279a.514.514 0 00-.148-.226c-.068-.053-.162-.08-.297-.08-.135 0-.324.094-.486.266a3.026 3.026 0 00-.473.73 7.54 7.54 0 00-.418 1.115c-.135.438-.257.902-.365 1.42h1.256l-.176.557h-1.215l-1.174 4.618.014-.026zM153.356 21.677h4.266c2.146 0 3.537 1.14 3.537 3.012 0 1.871-1.404 3.012-3.537 3.012h-2.929v3.703h-1.323V21.69l-.014-.014zm4.252 4.896c1.418 0 2.187-.703 2.187-1.897 0-1.195-.769-1.898-2.187-1.898h-2.929v3.782h2.929v.013zM167.179 31.39v-1.433c-.365.943-1.175 1.593-2.416 1.593-1.242 0-2.295-1.049-2.295-2.668v-4.565h1.215v4.26c0 1.327.607 1.964 1.741 1.964 1.134 0 1.728-.756 1.728-1.964v-4.26h1.215v7.074h-1.188zM171.525 21.517v4.46c.351-1.05 1.283-1.819 2.457-1.819 1.714 0 3.132 1.447 3.132 3.703s-1.499 3.702-3.092 3.702c-1.592 0-2.159-.756-2.537-1.805v1.646h-1.188V21.53h1.215l.013-.014zm4.32 6.33c0-1.685-.986-2.707-2.214-2.707s-2.133.743-2.133 2.548v.332c0 1.791 1.067 2.548 2.133 2.548s2.214-1.022 2.214-2.707v-.014zM179.719 21.517v9.874h-1.215v-9.874h1.215zM182.878 21.677v1.22h-1.215v-1.22h1.215zm0 2.64v7.074h-1.215v-7.074h1.215zM189.546 26.76c-.229-1.01-.769-1.62-1.835-1.62-1.067 0-2.174 1.022-2.174 2.707 0 1.686 1.026 2.707 2.174 2.707 1.147 0 1.66-.61 1.876-1.618h1.134c-.203 1.552-1.256 2.614-3.024 2.614s-3.442-1.447-3.442-3.703 1.62-3.702 3.442-3.702 2.821 1.022 2.97 2.614h-1.134.013zM196.889 21.677v4.113h5.589v-4.113h1.323v9.714h-1.323v-4.486h-5.589v4.486h-1.323v-9.714h1.323zM206.567 27.927c.041 1.646.999 2.628 2.254 2.628 1.256 0 1.688-.717 1.863-1.54h1.107c-.229 1.513-1.404 2.535-2.996 2.535-1.593 0-3.456-1.447-3.456-3.703s1.39-3.702 3.402-3.702c2.011 0 3.077 1.54 3.05 3.782h-5.224zm.081-.942h3.901c-.162-1.38-.945-1.858-1.808-1.858-.864 0-1.85.69-2.093 1.858zM217.434 31.39c-.121-.41-.175-.835-.189-1.473-.391.93-1.296 1.633-2.551 1.633-1.255 0-2.011-.544-2.011-1.871s.715-1.898 2.591-2.19l1.944-.319v-.358c0-1.194-.634-1.672-1.633-1.672s-1.593.319-1.661 1.62h-1.093c.054-1.806 1.363-2.615 2.835-2.615 1.471 0 2.74.969 2.74 2.548v2.667c0 .903.081 1.54.216 2.03h-1.188zm-2.295-.809c1.134 0 2.093-.61 2.093-1.752v-.836l-1.526.24c-1.282.198-1.809.636-1.809 1.326 0 .69.392 1.009 1.242 1.009v.013zM221.497 21.517v9.874h-1.215v-9.874h1.215zM225.452 31.457c-1.269 0-1.903-.597-1.903-1.911v-4.247h-.999v-.995h.999v-1.5h1.215v1.5h1.646v.995h-1.646v4.088c0 .783.297 1.048 1.093 1.048h.553v.956c-.256.04-.54.066-.958.066zM228.759 21.517v4.154c.378-.902 1.161-1.513 2.376-1.513 1.214 0 2.389 1.075 2.389 2.72v4.513h-1.215v-4.26c0-1.195-.621-1.964-1.755-1.964s-1.795.756-1.795 1.964v4.26h-1.215v-9.874h1.215zM240.206 21.677v9.714h-1.323v-9.714h1.323zM243.473 24.317v1.42c.364-.942 1.161-1.579 2.403-1.579s2.389 1.075 2.389 2.72v4.512h-1.215v-4.26c0-1.194-.621-1.963-1.755-1.963s-1.795.756-1.795 1.964v4.26h-1.215v-7.074h1.188zM250.614 29.387c.081.716.607 1.194 1.768 1.194s1.512-.372 1.512-1.048c0-.677-.621-.943-1.688-1.195-1.592-.398-2.51-.862-2.51-2.163 0-1.3 1.08-2.03 2.672-2.03 1.593 0 2.579.836 2.579 2.083h-1.121c-.054-.73-.594-1.114-1.471-1.114-.878 0-1.418.238-1.418.982 0 .743.581.915 1.58 1.154 1.647.398 2.632.876 2.632 2.203s-1.107 2.097-2.781 2.097c-1.673 0-2.875-.876-2.875-2.163h1.121zM258.456 31.457c-1.269 0-1.903-.597-1.903-1.911v-4.247h-.999v-.995h.999v-1.5h1.214v1.5h1.647v.995h-1.647v4.088c0 .783.297 1.048 1.094 1.048h.553v.956c-.256.04-.54.066-.958.066zM261.763 21.677v1.22h-1.215v-1.22h1.215zm0 2.64v7.074h-1.215v-7.074h1.215zM265.719 31.457c-1.269 0-1.904-.597-1.904-1.911v-4.247h-.999v-.995h.999v-1.5h1.215v1.5h1.647v.995h-1.647v4.088c0 .783.297 1.048 1.094 1.048h.553v.956c-.256.04-.54.066-.958.066zM272.468 31.39v-1.433c-.365.943-1.175 1.593-2.416 1.593-1.242 0-2.295-1.049-2.295-2.668v-4.565h1.215v4.26c0 1.327.607 1.964 1.741 1.964 1.134 0 1.728-.756 1.728-1.964v-4.26h1.215v7.074h-1.188zM277.624 31.457c-1.269 0-1.903-.597-1.903-1.911v-4.247h-.999v-.995h.999v-1.5h1.214v1.5h1.647v.995h-1.647v4.088c0 .783.297 1.048 1.094 1.048h.553v.956c-.256.04-.54.066-.958.066zM280.391 27.927c.041 1.646.999 2.628 2.255 2.628 1.255 0 1.687-.717 1.862-1.54h1.107c-.229 1.513-1.403 2.535-2.996 2.535s-3.456-1.447-3.456-3.703 1.39-3.702 3.402-3.702c2.011 0 3.077 1.54 3.05 3.782h-5.224zm.081-.942h3.901c-.161-1.38-.944-1.858-1.808-1.858-.864 0-1.85.69-2.093 1.858zM287.45 29.387c.081.716.608 1.194 1.769 1.194s1.512-.372 1.512-1.048c0-.677-.621-.943-1.688-1.195-1.593-.398-2.51-.862-2.51-2.163 0-1.3 1.079-2.03 2.672-2.03 1.593 0 2.579.836 2.579 2.083h-1.121c-.054-.73-.594-1.114-1.471-1.114-.878 0-1.418.238-1.418.982 0 .743.581.915 1.58 1.154 1.647.398 2.632.876 2.632 2.203s-1.107 2.097-2.781 2.097c-1.674 0-2.875-.876-2.875-2.163h1.12z" fill="#21415B" />
</g>
</svg>
</a>
</div>
<div class="header__primary-navigation">
<div role="navigation" aria-label="Main Navigation" class="primary-navigation">
<ul class="primary-navigation__list">
<li class="primary-navigation__item" data-item-has-children data-large-primary-navigation-item="hidden">
<a class="
primary-navigation__item-link
" href="#" data-main-has-submenu>
<span class="primary-navigation__item-link-text">
Workforce resources
</span>
</a>
<button class="primary-navigation__submenu-toggle" data-submenu-large-toggle aria-expanded="false" aria-label="Workforce resources submenu" aria-haspopup="menu">
<span class="primary-navigation__item-link-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
<ul class="primary-navigation-children">
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Resource Directory
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Trainings
</a>
</li>
</ul>
</li>
<li class="primary-navigation__item" data-item-has-children data-large-primary-navigation-item="hidden">
<a class="
primary-navigation__item-link
primary-navigation__item-link--active-trail
" href="#" data-main-has-submenu>
<span class="primary-navigation__item-link-text">
Programs & Projects
</span>
</a>
<button class="primary-navigation__submenu-toggle" data-submenu-large-toggle aria-expanded="false" aria-label="Programs & Projects submenu" aria-haspopup="menu">
<span class="primary-navigation__item-link-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
<ul class="primary-navigation-children">
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Data Modernization
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Environmental Health and Emergency Preparedness
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
primary-navigation-children__item-link--active-trail
" href="#">Evaluation and Impact
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Multisector Strategies and Population Health
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Public Health Events and Convenings Management
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Public Health Infrastructure Grant
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Public health training
</a>
</li>
</ul>
</li>
<li class="primary-navigation__item" data-item-has-children data-large-primary-navigation-item="hidden">
<a class="
primary-navigation__item-link
" href="#" data-main-has-submenu>
<span class="primary-navigation__item-link-text">
Explore the Network
</span>
</a>
<button class="primary-navigation__submenu-toggle" data-submenu-large-toggle aria-expanded="false" aria-label="Explore the Network submenu" aria-haspopup="menu">
<span class="primary-navigation__item-link-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
<ul class="primary-navigation-children">
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Member Directory
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Membership paths
</a>
</li>
</ul>
</li>
<li class="primary-navigation__item">
<a class="
primary-navigation__item-link
" href="#">
<span class="primary-navigation__item-link-text">
Partner with us
</span>
</a>
</li>
<li class="primary-navigation__item" data-item-has-children data-large-primary-navigation-item="hidden">
<a class="
primary-navigation__item-link
" href="#" data-main-has-submenu>
<span class="primary-navigation__item-link-text">
About
</span>
</a>
<button class="primary-navigation__submenu-toggle" data-submenu-large-toggle aria-expanded="false" aria-label="About submenu" aria-haspopup="menu">
<span class="primary-navigation__item-link-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
<ul class="primary-navigation-children">
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Blog
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Events
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Newsletters
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Signature programs
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Contact us
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Meet the team
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="header__utility-navigation">
<ul class="utility-navigation ">
<li class="utility-navigation__item">
<a href="#" class="
utility-navigation__item-link
">
Member directory
</a>
</li>
<li class="utility-navigation__item">
<a href="#" class="
utility-navigation__item-link
utility-navigation__item-link--is-active
">
Events
</a>
</li>
<li class="utility-navigation__item">
<a href="#" class="
utility-navigation__item-link
">
Blog
</a>
</li>
</ul>
<div class="header__search">
<div class="quick-search quick-search--on-dark">
<form role="search" method="get" id="quick-search-form" class="quick-search__form" action="">
<input id="quick-search-input" name="s" type="text" placeholder="Search" class="quick-search__input ">
<label for="quick-search-input" class="quick-search__input-label">
Search the website
</label>
<button type="submit" class="quick-search__button" id="quick-search-submit">
<svg role="none" aria-hidden="true" class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>search</title>
<path class="_mark" fill="inherit" d="M6 12A6 6 0 116 0a6 6 0 010 12zm0-2a4 4 0 100-8 4 4 0 000 8zm5.293 2.707a1 1 0 011.414-1.414l3 3a1 1 0 01-1.414 1.414l-3-3z" />
</svg>
</button>
</form>
</div>
</div>
</div>
<div class="header__mobile-navigation-toggle" data-mobile-navigation-toggle>
<button aria-label="Toggle main navigation" aria-expanded="false" aria-controls="small-primary-navigation" data-primary-navigation-toggle class="primary-navigation-toggle">
<span class="primary-navigation-toggle__open">
<span class="primary-navigation-toggle__text">
Menu
</span>
<span class="primary-navigation-toggle__icon">
<svg role="none" aria-hidden="true" class="menu" fill="none" height="12" viewBox="0 0 16 12" width="16" xmlns="http://www.w3.org/2000/svg">
<title>menu</title>
<path class="menu__shape" clip-rule="evenodd" d="m15 10c.5523 0 1 .4477 1 1s-.4477 1-1 1h-14c-.552285 0-1-.4477-1-1s.447715-1 1-1zm0-5c.5523 0 1 .44772 1 1s-.4477 1-1 1h-14c-.552285 0-1-.44772-1-1s.447715-1 1-1zm0-5c.5523 0 1 .447715 1 1 0 .55228-.4477 1-1 1h-14c-.552285 0-1-.44772-1-1 0-.552285.447715-1 1-1z" fill="#be75f5" fill-rule="evenodd" />
</svg>
</span>
</span>
<span class="primary-navigation-toggle__close">
<span class="primary-navigation-toggle__text">
Close
</span>
<span class="primary-navigation-toggle__icon">
<svg role="none" aria-hidden="true" class="x" fill="none" height="14" viewBox="0 0 15 14" width="15" xmlns="http://www.w3.org/2000/svg">
<title>close</title>
<g class="x__shape" stroke="#be75f5" stroke-linecap="round" stroke-width="2">
<path d="m1.70703 1 11.99997 12" />
<path d="m13.707 1-11.99997 12" />
</g>
</svg>
</span>
</span>
</button>
</div>
</div>
<div hidden class="header__mobile-navigation" id="small-primary-navigation" data-small-primary-navigation>
<div role="navigation" aria-label="Main Navigation" class="small-primary-navigation">
<ul class="small-primary-navigation__list">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="
small-primary-navigation__item-link
" href="#">Workforce resources
<span class="small-primary-navigation__item-link-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span>
</a>
<button aria-expanded="false" data-submenu-small-toggle class="small-primary-navigation__item-toggle" aria-label="toggle Workforce resources menu">
<span class="small-primary-navigation__item-toggle-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
</div>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="1" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Resource Directory
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Trainings
</a>
<button aria-expanded="false" data-submenu-small-toggle data-submenu-depth="1" class="small-primary-navigation__item-toggle" aria-label="toggle Trainings menu">
<span class="small-primary-navigation__item-toggle-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
</div>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="2" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Training Level 3 example
</a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="
small-primary-navigation__item-link
small-primary-navigation__item-link--active-trail" href="#">Programs & Projects
<span class="small-primary-navigation__item-link-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span>
</a>
<button aria-expanded="false" data-submenu-small-toggle class="small-primary-navigation__item-toggle" aria-label="toggle Programs & Projects menu">
<span class="small-primary-navigation__item-toggle-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
</div>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="1" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Data Modernization
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Environmental Health and Emergency Preparedness
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
small-primary-navigation__item-link--active-trail
" href="#">Evaluation and Impact
</a>
<button aria-expanded="false" data-submenu-small-toggle data-submenu-depth="1" class="small-primary-navigation__item-toggle" aria-label="toggle Evaluation and Impact menu">
<span class="small-primary-navigation__item-toggle-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
</div>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="2" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
small-primary-navigation__item-link--active
" href="#">Third level example
</a>
<button aria-expanded="false" data-submenu-small-toggle data-submenu-depth="2" class="small-primary-navigation__item-toggle" aria-label="toggle Third level example menu">
<span class="small-primary-navigation__item-toggle-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
</div>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="3" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
small-primary-navigation__item-link--active
" href="#">Fourth level example
</a>
<button aria-expanded="false" data-submenu-small-toggle data-submenu-depth="3" class="small-primary-navigation__item-toggle" aria-label="toggle Fourth level example menu">
<span class="small-primary-navigation__item-toggle-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
</div>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="4" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
small-primary-navigation__item-link--active
" href="#">Fifth level example
</a>
</div>
</li>
</ul>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Fourth level example 2
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Fourth level example 3
</a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Multisector Strategies and Population Health
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Public Health Events and Convenings Management
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Public Health Infrastructure Grant
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Public health training
</a>
</div>
</li>
</ul>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="
small-primary-navigation__item-link
" href="#">Explore the Network
<span class="small-primary-navigation__item-link-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span>
</a>
<button aria-expanded="false" data-submenu-small-toggle class="small-primary-navigation__item-toggle" aria-label="toggle Explore the Network menu">
<span class="small-primary-navigation__item-toggle-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
</div>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="1" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Member Directory
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Membership paths
</a>
</div>
</li>
</ul>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="
small-primary-navigation__item-link
" href="#">Partner with us
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="
small-primary-navigation__item-link
" href="#">About
<span class="small-primary-navigation__item-link-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span>
</a>
<button aria-expanded="false" data-submenu-small-toggle class="small-primary-navigation__item-toggle" aria-label="toggle About menu">
<span class="small-primary-navigation__item-toggle-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
</div>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="1" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Blog
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Events
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Newsletters
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Signature programs
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Contact us
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Meet the team
</a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<ul class="utility-navigation utility-navigation--mobile ">
<li class="utility-navigation__item">
<a href="#" class="
utility-navigation__item-link
">
Member directory
</a>
</li>
<li class="utility-navigation__item">
<a href="#" class="
utility-navigation__item-link
utility-navigation__item-link--is-active
">
Events
</a>
</li>
<li class="utility-navigation__item">
<a href="#" class="
utility-navigation__item-link
">
Blog
</a>
</li>
</ul>
<div class="quick-search ">
<form role="search" method="get" id="quick-search-small-form" class="quick-search__form" action="">
<input id="quick-search-small-input" name="s" type="text" placeholder="Search" class="quick-search__input ">
<label for="quick-search-small-input" class="quick-search__input-label">
Search the website
</label>
<button type="submit" class="quick-search__button" id="quick-search-small-submit">
<svg role="none" aria-hidden="true" class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<title>search</title>
<path class="_mark" fill="inherit" d="M6 12A6 6 0 116 0a6 6 0 010 12zm0-2a4 4 0 100-8 4 4 0 000 8zm5.293 2.707a1 1 0 011.414-1.414l3 3a1 1 0 01-1.414 1.414l-3-3z" />
</svg>
</button>
</form>
</div>
</div>
</div>
<div class="header" data-header>
<div class="header__container">
<div class="header__logo">
<a href="/">
<span class="header__logo-text">
{{ site.title }}
</span>
{% include 'bits/logos/nnphi-logo-horizontal.twig' %}
</a>
</div>
<div class="header__primary-navigation">
{% include 'partials/navigation/primary-navigation/primary-navigation.twig' %}
</div>
<div class="header__utility-navigation">
{% include 'partials/navigation/utility/utility.twig' %}
<div class="header__search">
{% include 'bits/quick-search/quick-search.twig' with { onDark: true } %}
</div>
</div>
<div class="header__mobile-navigation-toggle" data-mobile-navigation-toggle>
{% include 'partials/navigation/primary-navigation-toggle/primary-navigation-toggle.twig' %}
</div>
</div>
<div
hidden
class="header__mobile-navigation"
id="small-primary-navigation"
data-small-primary-navigation >
{% include 'partials/navigation/small-primary-navigation/small-primary-navigation.twig' %}
{% include 'partials/navigation/utility/utility.twig' with { isMobile: true } %}
{% include 'bits/quick-search/quick-search.twig' with { id: 'quick-search-small' } %}
</div>
</div>
{
"site": {
"title": "National Network of Public Health Institutes"
},
"background": "white",
"breadcrumbs": [
{
"title": "Home",
"url": "#"
},
{
"title": "Primary Page One",
"url": "#"
},
{
"title": "Interior Page One",
"url": "#"
}
],
"footerLinks": {
"items": [
{
"title": "Subscribe to our newsletter",
"url": "#"
},
{
"title": "Explore membership benefits",
"url": "#"
},
{
"title": "See career opportunities",
"url": "#"
}
]
},
"contactInfo": {
"copyright": "© National Network of Public Health Institutes. All Rights Reserved",
"facebookLink": "https://facebook.com",
"linkedInLink": "https://linkedin.com",
"youtubeLink": "https://youtube.com",
"flickrLink": "https://flickr.com",
"twitterLink": "https://twitter.com",
"instagramLink": "https://instagram.com",
"youTubeLink": "https://youtube.com"
},
"utilityNavigation": {
"items": [
{
"title": "Member directory",
"url": "#"
},
{
"title": "Events",
"url": "#",
"isActive": true
},
{
"title": "Blog",
"url": "#"
}
]
},
"primaryNavigation": {
"items": [
{
"title": "Workforce resources",
"url": "#",
"children": [
{
"title": "Resource Directory",
"url": "#",
"children": []
},
{
"title": "Trainings",
"url": "#",
"children": [
{
"title": "Training Level 3 example",
"url": "#"
}
]
}
]
},
{
"title": "Programs & Projects",
"url": "#",
"isDescendantActive": true,
"children": [
{
"title": "Data Modernization",
"url": "#",
"children": []
},
{
"title": "Environmental Health and Emergency Preparedness",
"url": "#",
"children": []
},
{
"title": "Evaluation and Impact",
"url": "#",
"isDescendantActive": true,
"children": [
{
"title": "Third level example",
"url": "#",
"isActive": true,
"children": [
{
"title": "Fourth level example",
"url": "#",
"isActive": true,
"children": [
{
"title": "Fifth level example",
"url": "#",
"isActive": true
}
]
},
{
"title": "Fourth level example 2",
"url": "#"
},
{
"title": "Fourth level example 3",
"url": "#"
}
]
}
]
},
{
"title": "Multisector Strategies and Population Health",
"url": "#",
"children": []
},
{
"title": "Public Health Events and Convenings Management",
"url": "#",
"children": []
},
{
"title": "Public Health Infrastructure Grant",
"url": "#",
"children": []
},
{
"title": "Public health training",
"url": "#",
"children": []
}
]
},
{
"title": "Explore the Network",
"url": "#",
"children": [
{
"title": "Member Directory",
"url": "#",
"children": []
},
{
"title": "Membership paths",
"url": "#",
"children": []
}
]
},
{
"title": "Partner with us",
"url": "#"
},
{
"title": "About",
"url": "#",
"children": [
{
"title": "Blog",
"url": "#",
"children": []
},
{
"title": "Events",
"url": "#",
"children": []
},
{
"title": "Newsletters",
"url": "#",
"children": []
},
{
"title": "Signature programs",
"url": "#",
"children": []
},
{
"title": "Contact us",
"url": "#",
"children": []
},
{
"title": "Meet the team",
"url": "#",
"children": []
}
]
}
]
}
}
$breakpoint-large: 85rem;
$breakpoint-small: 40rem;
.header {
display: flex;
justify-content: center;
overflow-x: clip;
overflow-y: visible;
position: relative;
&__container {
display: flex;
flex-direction: row;
gap: 2rem;
justify-content: space-between;
max-width: 103rem;
margin-left: 2.5rem;
margin-right: 2.5rem;
position: relative;
width: 100%;
@media screen and (max-width: $breakpoint-small) {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
}
&__logo {
padding: 2.3rem 0;
flex: 0 0 auto;
@media screen and (max-width: $breakpoint-small) {
padding: 0.94rem 0 0.94rem 0;
flex: 1 0 10.43rem;
}
}
&__logo-text {
@include invisible
}
&__primary-navigation {
display: none;
@media screen and (min-width: $breakpoint-large) {
display: flex;
width: 100%;
}
}
@mixin utilityNav {
align-items: center;
background-color: var(--purple);
display: flex;
justify-content: space-between;
padding-left: 1rem;
position: relative;
& > * {
position: relative;
z-index: 1;
}
&:before {
content: '';
display: block;
height: 100%;
width: 1000px;
background-color: var(--purple);
position: absolute;
top: 0;
left: 0;
}
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--purple);
transform: skewX(15deg);
transform-origin: bottom left;
}
}
&__utility-navigation {
@include utilityNav;
display: none;
gap: 1.12rem;
@media screen and (min-width: $breakpoint-large) {
display: flex;
}
}
&__search {
align-items: center;
display: flex;
width: 7.6rem;
}
&__mobile-navigation-toggle {
@include utilityNav;
@media screen and (min-width: $breakpoint-large) {
display: none;
padding: 0.94rem 0 0.94rem 0;
}
}
&__mobile-navigation {
@include animate(all);
background-color: var(--white);
display: flex;
flex-direction: column;
gap: 2rem;
position: absolute;
top: 100%;
right: 0;
max-width: 25rem;
padding: 1.25rem;
width: 100%;
z-index: 2;
height: calc(100svh - var(--header-height-mobile));
overflow-y: auto;
&[hidden] {
display: flex;
visibility: hidden;
transform: translateX(100%);
}
}
}
No notes defined.