Header

Design System Navigation

Header Complete

  • 
    
    <header class="c-header " role="banner" id="header">
      <div class="c-header--inner">
        <div class="c-header__nav-secondary">
            <nav class="c-secondary-nav" role="navigation">
        <ul class="c-secondary-nav__list">
                  <li class="c-secondary-nav__list-item has-subnav">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__language</title><path d="M10,4V2H6V0H4V2H0V4H5.9A9.16,9.16,0,0,1,4.51,5.56a8.84,8.84,0,0,1-1-1.08L1.9,5.74a12,12,0,0,0,1,1A26.55,26.55,0,0,1,.55,8.11l.9,1.78a22.2,22.2,0,0,0,3-1.8,23.58,23.58,0,0,0,3.06,1.8l.9-1.78A22.43,22.43,0,0,1,6.11,6.78,10.49,10.49,0,0,0,8.22,4Z" fill="#777"/></svg>
    </span>            Languages
              </a>
                          <span class="c-subnav__arrow o-arrow--down"></span>
                <ul class="c-secondary-nav__subnav c-subnav">
                                  <li class="c-secondary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-secondary-nav__subnav__link c-subnav__link u-color--gray u-theme--link-hover--base " href="">English</a>
                    </li>
                                  <li class="c-secondary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-secondary-nav__subnav__link c-subnav__link u-color--gray u-theme--link-hover--base " href="">Spanish</a>
                    </li>
                                  <li class="c-secondary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-secondary-nav__subnav__link c-subnav__link u-color--gray u-theme--link-hover--base " href="">French</a>
                    </li>
                                  <li class="c-secondary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-secondary-nav__subnav__link c-subnav__link u-color--gray u-theme--link-hover--base " href="">Dutch</a>
                    </li>
                              </ul>
                <!-- /.c-subnav -->
                      </li>
                  <li class="c-secondary-nav__list-item ">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__subscribe</title><path d="M9,7V5A4,4,0,0,0,6,1.14V0H4V1.14A4,4,0,0,0,1,5V7A1,1,0,0,1,0,8v2H10V8A1,1,0,0,1,9,7ZM3,7V5A2,2,0,0,1,7,5V7a3,3,0,0,0,.18,1H2.82A3,3,0,0,0,3,7Z" fill="#9b9b9b"/></svg>
    </span>            Sitemap
              </a>
                      </li>
                  <li class="c-secondary-nav__list-item ">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__find</title><path d="M0,4,2,8l4,2L10,0ZM5,7.24,3.49,6.51,2.76,5.05,6.41,3.59Z" fill="#777"/></svg>
    </span>            Find a Church
              </a>
                      </li>
                  <li class="c-secondary-nav__list-item ">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__contact</title><path d="M0,0V8H6l4,2V0ZM8,6.76,6.47,6H2V2H8Z" fill="#777"/></svg>
    </span>            Contact
              </a>
                      </li>
                  <li class="c-secondary-nav__list-item ">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__heart</title><path d="M9,1.27A3.4,3.4,0,0,0,5,.73a3.4,3.4,0,0,0-4,.54A3.34,3.34,0,0,0,1,6l4,4L9,6A3.34,3.34,0,0,0,9,1.27ZM7.6,4.57,5,7.17,2.4,4.57a1.34,1.34,0,0,1,0-1.89,1.36,1.36,0,0,1,1.89,0L5,3.39l.71-.71a1.37,1.37,0,0,1,1.89,0A1.34,1.34,0,0,1,7.6,4.57Z" fill="#777"/></svg>
    </span>            Press
              </a>
                      </li>
                <li class="c-secondary-nav__list-item c-secondary-nav__list-item__search c-secondary-nav__list-item__toggle js-toggle-menu js-toggle-search is-priority">
            <a href="#" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__search</title><path d="M9.91,8.5,7.43,6A4,4,0,1,0,4,8a4,4,0,0,0,2-.57L8.5,9.91ZM2,4A2,2,0,1,1,4,6,2,2,0,0,1,2,4Z" fill="#777"/></svg>
    </span>Search
            </a>
          </li>
          <li class="c-secondary-nav__list-item c-secondary-nav__list-item__menu c-secondary-nav__list-item__toggle js-toggle-menu is-priority">
            <a href="#" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__menu</title><path d="M0,0H10V2H0ZM0,10H10V8H0ZM0,6H10V4H0Z" fill="#9b9b9b"/></svg>
    </span>Menu
            </a>
          </li>
        </ul>
        <!-- /.c-secondary-nav__list -->
      </nav>
      <!-- /.c-secondary-nav -->
        </div>
        <div class="c-header__logo c-logo">
          <a href="/" class="c-logo__link u-theme--path-fill--base">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 432.6 103.09"><title>Artboard 1</title><path d="M182.62,72.53h4.92v30h-4.92Zm2.52-11.24c-1.63,0-2.91,1-2.91,3.13a2.89,2.89,0,1,0,5.76,0C188,62.24,186.65,61.29,185.14,61.29ZM59.92,61.9,64.85,60v42.53h-4l-.73-4h-.23c-1.79,2.57-4.64,4.59-9.34,4.59-7.44,0-12.31-5.21-12.31-15.5h0C38.27,77.29,43.19,72,50.64,72a10.8,10.8,0,0,1,9.28,4.43h.34c-.11-1-.34-3.31-.34-4.43ZM60,87.64c0-7.44-2-11.58-8.67-11.58-5.32,0-8,4.53-8,11.64S46,99,51.36,99C57.68,99,60,95.53,60,88.54h0ZM20.14,62.41,35.7,102.53H30.49L25.68,90.16H9.85L5.09,102.53H0L15.61,62.41Zm4,23.27L19.7,73.6c-.34-.9-1.51-4.59-1.91-6-.56,2.29-1.28,4.7-1.73,6L11.53,85.68ZM146,72c-3.8,0-7.49,1.51-9.45,4.65h-.28l-.73-4.09h-4v30h4.92V87c0-7,2.13-10.86,8.79-10.86,4.58,0,6.71,2.41,6.71,7.22v19.2h4.87V83C156.83,75.28,153.14,72,146,72ZM125.05,85.52v3H104.51c.17,6.77,3.58,10.41,9.57,10.41a23.82,23.82,0,0,0,8.23-1.46l1.4,3.7a22.5,22.5,0,0,1-9.85,2c-8.56,0-14.44-5.32-14.44-15.34,0-9.84,5.32-15.78,13.26-15.78C120.35,72,125.05,77.35,125.05,85.52Zm-5.15-1c-.05-5.09-2.29-8.56-7.27-8.56-4.7,0-7.5,3.19-8,8.56Zm86.55.79c-5.76-2.19-7.72-3.19-7.72-5.71,0-2.24,2.18-3.64,6.21-3.64a21.49,21.49,0,0,1,8.4,2l1.51-4a23.37,23.37,0,0,0-9.57-2c-6.72,0-11.25,2.86-11.25,8,0,4.92,3.47,6.72,9.29,9s7.39,3.58,7.39,5.82c0,2.69-2.13,4.42-7.11,4.42a22.57,22.57,0,0,1-8.06-1.73l-1.45,3.8c2.29,1.23,5.2,1.91,9.4,1.91,7.33,0,12-3,12-8.85C215.46,89.43,212.16,87.47,206.45,85.35Zm-29.59,13a9.2,9.2,0,0,1-3.31.73c-2.74,0-4.7-1.74-4.7-5.38V76.34h8.68V72.53h-8.68V65.65l-4.92,1.85V93.8c0,7.27,4.09,9.29,8.79,9.29a11.22,11.22,0,0,0,5.48-1.24l-1.34-3.52Zm-91-8.11c-.84,2.4-2.13,6.09-2.52,7.94h-.22a63.76,63.76,0,0,0-2.41-7.94L74.3,72.53H69l11.36,30h5.65l11.42-30H92.21ZM365.52,78h-.23l-.56-5.49h-4v30h4.93v-16c0-6,4.08-10.07,8.73-10.07a15.86,15.86,0,0,1,3.24.39l.62-4.53a18.3,18.3,0,0,0-3.53-.34C370.49,72,367.42,74.72,365.52,78ZM347.39,88.15c0,7-2.18,10.85-8.84,10.85-4.53,0-6.66-2.35-6.66-7.16V72.53h-5V92.17c0,7.61,3.69,10.92,10.91,10.92,3.86,0,7.55-1.4,9.51-4.54h.23l.72,4h4v-30h-4.92ZM277.28,98.66c-9.17,0-13.76-6.21-13.76-16.11h0c0-10,5.26-16.11,13.82-16.11a21.59,21.59,0,0,1,9.06,2.18l1.68-4.42A23.67,23.67,0,0,0,277.4,62c-12.37,0-19.2,8.4-19.2,20.48,0,12.59,6.1,20.6,18.36,20.6A25.65,25.65,0,0,0,289,100.51l-1.45-3.86A26.81,26.81,0,0,1,277.28,98.66ZM308.11,72c-3.86,0-7.44,1.57-9.34,4.64h-.34a31.18,31.18,0,0,0,.28-4.19V60l-4.92,1.85v40.68h4.92V87c0-7,2.07-10.91,8.79-10.91,4.59,0,6.71,2.4,6.71,7.21v19.2h4.87V83C319.08,75.33,315.39,72,308.11,72Zm70.11.28Zm-135.4-8a3.7,3.7,0,0,1-7.39,0h0a3.57,3.57,0,0,1,3.7-3.75A3.63,3.63,0,0,1,242.82,64.31Zm-.56,0a3.11,3.11,0,0,0-3.13-3.19,3.16,3.16,0,1,0,3.13,3.19Zm-8.95,34a9.1,9.1,0,0,1-3.3.73c-2.74,0-4.7-1.74-4.7-5.38V76.34H234V72.53h-8.67V65.65l-4.93,1.85V93.8c0,7.27,4.09,9.29,8.79,9.29a11.22,11.22,0,0,0,5.48-1.24l-1.34-3.52Zm6.54-33.8,1.18,2h-.9l-1-1.73h-.62v1.73h-.78V62.07H239c1.12,0,1.63.45,1.63,1.34A1.18,1.18,0,0,1,239.85,64.53Zm0-1.12c0-.44-.28-.67-.84-.67h-.5v1.4h.5C239.52,64.14,239.85,63.86,239.85,63.41Zm154,12.87a20.71,20.71,0,0,1,6.49,1.4l1.56-4.08A19.44,19.44,0,0,0,393.94,72c-8.06,0-14.05,4.65-14.05,15.73h0c0,10.63,5.71,15.39,13.71,15.39,3.42,0,6.44-.73,8.12-1.8l-1.51-3.91a15.82,15.82,0,0,1-6.66,1.45c-5.65,0-8.56-4-8.56-11.19C385,80.14,387.84,76.28,393.83,76.28ZM421.63,72c-3.86,0-7.44,1.57-9.34,4.64H412a31.18,31.18,0,0,0,.28-4.19V60l-4.92,1.85v40.68h4.92V87c0-7,2.07-10.91,8.79-10.91,4.58,0,6.71,2.4,6.71,7.21v19.2h4.87V83C432.6,75.33,428.91,72,421.63,72ZM77,42.53l11.42-30H83.2L76.82,30.22c-.84,2.4-2.12,6.09-2.52,7.94h-.22a63.76,63.76,0,0,0-2.41-7.94L65.29,12.53H60l11.36,30Zm-28.81.56c-8.56,0-14.44-5.32-14.44-15.34C33.79,17.9,39.11,12,47.05,12c7.67,0,12.37,5.37,12.37,13.55v3H38.89c.16,6.77,3.58,10.41,9.56,10.41a23.82,23.82,0,0,0,8.23-1.46l1.4,3.7A22.5,22.5,0,0,1,48.23,43.09ZM39,24.56H54.27C54.22,19.47,52,16,47,16,42.3,16,39.5,19.19,39,24.56ZM14.6,38.72A25.67,25.67,0,0,1,5,37L3.41,41.18c2.52,1.23,6.49,1.91,11,1.91h0c8.73,0,14.27-4.15,14.27-11.25,0-6.27-3.86-8.9-10.91-11.53C11.25,17.9,9,16.28,9,12.25c0-3.47,2.57-5.81,7.55-5.81a24.84,24.84,0,0,1,9.52,2.12L27.7,4.25A26.9,26.9,0,0,0,16.67,2C9.12,2,3.92,5.88,3.92,12.2s3.47,9.4,10.29,11.86c7.22,2.63,9.4,4.31,9.4,8.23S20.53,38.72,14.6,38.72Zm75.82-11C90.42,17.9,95.73,12,103.68,12,111.34,12,116,17.34,116,25.52v3H95.51c.17,6.77,3.58,10.41,9.57,10.41a23.81,23.81,0,0,0,8.22-1.46l1.4,3.7a22.47,22.47,0,0,1-9.85,2C96.29,43.09,90.42,37.77,90.42,27.75Zm5.2-3.19h15.27c0-5.09-2.29-8.56-7.27-8.56C98.92,16,96.12,19.19,95.62,24.56ZM244.5,1.9,249.42,0V42.53h-4l-.72-4h-.23c-1.79,2.57-4.64,4.59-9.34,4.59-7.45,0-12.31-5.21-12.31-15.5h0c0-10.3,4.92-15.62,12.36-15.62a10.81,10.81,0,0,1,9.29,4.43h.34c-.11-1-.34-3.31-.34-4.43Zm.06,25.74c0-7.44-2-11.58-8.68-11.58-5.31,0-7.94,4.53-7.94,11.64s2.63,11.3,8,11.3c6.32,0,8.62-3.47,8.62-10.46ZM143,23.33v19.2h4.87V23c0-7.72-3.69-11-10.85-11-3.81,0-7.5,1.51-9.46,4.65h-.28l-.73-4.09h-4v30h4.93V27c0-7,2.12-10.86,8.78-10.86C140.83,16.11,143,18.52,143,23.33ZM299.5,46.67l12.92-34.14h-5.31l-6.1,17c-1.07,3.08-2.13,6.38-2.58,8.23h-.22a51.16,51.16,0,0,0-2.52-8.17L289.2,12.53h-5.26L296,42.64l-1.57,4c-1.23,3.24-2.18,4.31-4.48,5.37l1.52,4C295.47,54.39,297.37,52.32,299.5,46.67ZM256.19,34.19c0-6,4.59-9.29,14.38-9.57l5.09-.17V22.66c0-5-2.29-6.66-6.21-6.66A19.72,19.72,0,0,0,261,18.3l-1.51-3.7A22.57,22.57,0,0,1,269.73,12c7.28,0,10.74,3.08,10.74,10.07h0V42.53h-3.59l-.95-4.26h-.22c-2.63,3.3-5,4.82-10.07,4.82C260.22,43.09,256.19,40.29,256.19,34.19Zm5.09.05c0,3.36,2.24,4.87,5.49,4.87,5,0,8.84-2.74,8.84-8.56V27.86l-4.42.17h0C263.69,28.31,261.28,30.44,261.28,34.24Zm-93.43,4.09h0a9.1,9.1,0,0,1-3.3.73c-2.74,0-4.7-1.74-4.7-5.38V16.34h8.67V12.53h-8.67V5.65L154.92,7.5V33.8c0,7.27,4.09,9.29,8.79,9.29a11.22,11.22,0,0,0,5.48-1.24Zm35.86-13,1.68,4.36h13.54l-1.68-4.36ZM194,42.53h4.87V23c0-7.67-3.69-11-11-11-3.86,0-7.45,1.57-9.35,4.64h-.33a32.92,32.92,0,0,0,.28-4.19V0l-4.93,1.85V42.53h4.93V27c0-7,2.07-10.91,8.78-10.91,4.59,0,6.71,2.4,6.71,7.21Z" fill="#fb23c2"/></svg>
          </a>
        </div>
        <!-- /.c-header__logo -->
        <div class="c-header__nav-primary">
            <nav class="c-primary-nav c-priority-nav" role="navigation">
        <ul class="c-primary-nav__list c-priority-nav__list">
                  <li class="c-primary-nav__list-item  has-subnav">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                Leadership Certification
              </a>
                          <span class="c-subnav__arrow o-arrow--down u-path-fill--gray"></span>                      <ul class="c-primary-nav__subnav c-subnav">
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Assistant to the President for Evangelism</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Global Mission</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Mission Spotlight</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Church Mission Offerings</a>
                    </li>
                              </ul>
                <!-- /.c-primary-nav__subnav -->
                      </li>
                  <li class="c-primary-nav__list-item  has-subnav">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                Service
              </a>
                          <span class="c-subnav__arrow o-arrow--down u-path-fill--gray"></span>                      <ul class="c-primary-nav__subnav c-subnav">
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Life Hope Centers</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Global Mission</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Mission Spotlight</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Church Mission Offerings</a>
                    </li>
                              </ul>
                <!-- /.c-primary-nav__subnav -->
                      </li>
                  <li class="c-primary-nav__list-item ">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base this-is-active">
                Beliefs
              </a>
                                </li>
                  <li class="c-primary-nav__list-item ">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                World Church
              </a>
                                </li>
                  <li class="c-primary-nav__list-item ">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                Information
              </a>
                                </li>
                  <li class="c-primary-nav__list-item  has-subnav">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                News
              </a>
                          <span class="c-subnav__arrow o-arrow--down u-path-fill--gray"></span>                      <ul class="c-primary-nav__subnav c-subnav">
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 1</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 2</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 3</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 4</a>
                    </li>
                              </ul>
                <!-- /.c-primary-nav__subnav -->
                      </li>
              </ul>
        <!-- /.c-primary-nav__list -->
      </nav>
      <!-- /.c-primary-nav -->
        </div>
      </div>
      <!-- /.c-header--inner -->
    </header>
    <!-- .c-header -->
    <div class="c-drawer l-grid l-grid--7-col">
      <div class="c-drawer__toggle js-toggle-parent u-theme--background-color-trans--darker">
        <div class="u-icon o-icon__close">
          <span></span>
          <span></span>
        </div>
      </div>
      <!-- .c-drawer__toggle -->
      <div class="l-grid-wrap--6-of-7 l-grid-item--s--6-col c-drawer__container u-spacing u-theme--background-color--darker">
        <div class="c-drawer__search">
            <form action="/search" role="search" method="get" class="search-form toggled-element">
        <fieldset>
          <legend class="is-vishidden">Search</legend>
          <input type="search" name="search" placeholder="Search …" class="search-form__input u-font--secondary--s" required />
          <button class="search-form__submit is-vishidden">
            <span class="is-vishidden">Submit</span>
          </button> <!-- /.search-form__submit -->
        </fieldset>
      </form> <!-- /.search-form -->
        </div>
        <!-- .c-drawer__search -->
        <div class="c-drawer__nav">
          <div class="c-drawer__nav-primary">
              <nav class="c-primary-nav c-priority-nav" role="navigation">
        <ul class="c-primary-nav__list c-priority-nav__list">
                  <li class="c-primary-nav__list-item  has-subnav">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                Leadership Certification
              </a>
                          <span class="c-subnav__arrow o-arrow--down u-path-fill--gray"></span>                      <ul class="c-primary-nav__subnav c-subnav">
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Assistant to the President for Evangelism</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Global Mission</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Mission Spotlight</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Church Mission Offerings</a>
                    </li>
                              </ul>
                <!-- /.c-primary-nav__subnav -->
                      </li>
                  <li class="c-primary-nav__list-item  has-subnav">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                Service
              </a>
                          <span class="c-subnav__arrow o-arrow--down u-path-fill--gray"></span>                      <ul class="c-primary-nav__subnav c-subnav">
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Life Hope Centers</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Global Mission</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Mission Spotlight</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">Church Mission Offerings</a>
                    </li>
                              </ul>
                <!-- /.c-primary-nav__subnav -->
                      </li>
                  <li class="c-primary-nav__list-item ">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base this-is-active">
                Beliefs
              </a>
                                </li>
                  <li class="c-primary-nav__list-item ">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                World Church
              </a>
                                </li>
                  <li class="c-primary-nav__list-item ">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                Information
              </a>
                                </li>
                  <li class="c-primary-nav__list-item  has-subnav">
              <a href="/" class="c-primary-nav__link u-font--primary-nav u-color--gray--dark u-theme--link-hover--base u-theme--border-color--base ">
                News
              </a>
                          <span class="c-subnav__arrow o-arrow--down u-path-fill--gray"></span>                      <ul class="c-primary-nav__subnav c-subnav">
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 1</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 2</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 3</a>
                    </li>
                                  <li class="c-primary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-primary-nav__subnav__link c-subnav__link u-color--gray--dark u-theme--link-hover--base" href="">News Item 4</a>
                    </li>
                              </ul>
                <!-- /.c-primary-nav__subnav -->
                      </li>
              </ul>
        <!-- /.c-primary-nav__list -->
      </nav>
      <!-- /.c-primary-nav -->
            <ul class="c-drawer__subnav u-theme--background-color--darker"></ul>
          </div>
          <div class="c-drawer__nav-secondary">
              <nav class="c-secondary-nav" role="navigation">
        <ul class="c-secondary-nav__list">
                  <li class="c-secondary-nav__list-item has-subnav">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__language</title><path d="M10,4V2H6V0H4V2H0V4H5.9A9.16,9.16,0,0,1,4.51,5.56a8.84,8.84,0,0,1-1-1.08L1.9,5.74a12,12,0,0,0,1,1A26.55,26.55,0,0,1,.55,8.11l.9,1.78a22.2,22.2,0,0,0,3-1.8,23.58,23.58,0,0,0,3.06,1.8l.9-1.78A22.43,22.43,0,0,1,6.11,6.78,10.49,10.49,0,0,0,8.22,4Z" fill="#777"/></svg>
    </span>            Languages
              </a>
                          <span class="c-subnav__arrow o-arrow--down"></span>
                <ul class="c-secondary-nav__subnav c-subnav">
                                  <li class="c-secondary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-secondary-nav__subnav__link c-subnav__link u-color--gray u-theme--link-hover--base " href="">English</a>
                    </li>
                                  <li class="c-secondary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-secondary-nav__subnav__link c-subnav__link u-color--gray u-theme--link-hover--base " href="">Spanish</a>
                    </li>
                                  <li class="c-secondary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-secondary-nav__subnav__link c-subnav__link u-color--gray u-theme--link-hover--base " href="">French</a>
                    </li>
                                  <li class="c-secondary-nav__subnav__list-item c-subnav__list-item u-background-color--gray--light">
                      <a class="c-secondary-nav__subnav__link c-subnav__link u-color--gray u-theme--link-hover--base " href="">Dutch</a>
                    </li>
                              </ul>
                <!-- /.c-subnav -->
                      </li>
                  <li class="c-secondary-nav__list-item ">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__subscribe</title><path d="M9,7V5A4,4,0,0,0,6,1.14V0H4V1.14A4,4,0,0,0,1,5V7A1,1,0,0,1,0,8v2H10V8A1,1,0,0,1,9,7ZM3,7V5A2,2,0,0,1,7,5V7a3,3,0,0,0,.18,1H2.82A3,3,0,0,0,3,7Z" fill="#9b9b9b"/></svg>
    </span>            Sitemap
              </a>
                      </li>
                  <li class="c-secondary-nav__list-item ">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__find</title><path d="M0,4,2,8l4,2L10,0ZM5,7.24,3.49,6.51,2.76,5.05,6.41,3.59Z" fill="#777"/></svg>
    </span>            Find a Church
              </a>
                      </li>
                  <li class="c-secondary-nav__list-item ">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__contact</title><path d="M0,0V8H6l4,2V0ZM8,6.76,6.47,6H2V2H8Z" fill="#777"/></svg>
    </span>            Contact
              </a>
                      </li>
                  <li class="c-secondary-nav__list-item ">
              <a href="" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
                              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__heart</title><path d="M9,1.27A3.4,3.4,0,0,0,5,.73a3.4,3.4,0,0,0-4,.54A3.34,3.34,0,0,0,1,6l4,4L9,6A3.34,3.34,0,0,0,9,1.27ZM7.6,4.57,5,7.17,2.4,4.57a1.34,1.34,0,0,1,0-1.89,1.36,1.36,0,0,1,1.89,0L5,3.39l.71-.71a1.37,1.37,0,0,1,1.89,0A1.34,1.34,0,0,1,7.6,4.57Z" fill="#777"/></svg>
    </span>            Press
              </a>
                      </li>
                <li class="c-secondary-nav__list-item c-secondary-nav__list-item__search c-secondary-nav__list-item__toggle js-toggle-menu js-toggle-search is-priority">
            <a href="#" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__search</title><path d="M9.91,8.5,7.43,6A4,4,0,1,0,4,8a4,4,0,0,0,2-.57L8.5,9.91ZM2,4A2,2,0,1,1,4,6,2,2,0,0,1,2,4Z" fill="#777"/></svg>
    </span>Search
            </a>
          </li>
          <li class="c-secondary-nav__list-item c-secondary-nav__list-item__menu c-secondary-nav__list-item__toggle js-toggle-menu is-priority">
            <a href="#" class="c-secondary-nav__link u-font--secondary-nav u-color--gray u-theme--link-hover--base">
              <span class="u-icon u-icon--xs u-path-fill--gray"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__menu</title><path d="M0,0H10V2H0ZM0,10H10V8H0ZM0,6H10V4H0Z" fill="#9b9b9b"/></svg>
    </span>Menu
            </a>
          </li>
        </ul>
        <!-- /.c-secondary-nav__list -->
      </nav>
      <!-- /.c-secondary-nav -->
          </div>
        </div>
        <!-- .c-drawer__nav -->
        <div class="c-drawer__logo">
          <span class="u-icon u-icon--l u-path-fill--white">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 253.71 227.63"><title>icon-logo</title><path d="M67.68,120.38c-.1-9.91,2.8-18.41,20.8-36.41l39-39c10.4-10.4,19.1-19.29,19.1-29V.67c0-.89-1.1-.89-1.2,0-2.6,12.4-7.5,17.3-17.8,27.61L82.28,73.47c-17.1,17-19.5,35.1-15.8,46.91C66.78,121.38,67.68,121.47,67.68,120.38Zm64.2,38.9c0,.89,1,.89,1.2,0,2.6-12.5,7.6-17.4,17.8-27.61L166,116.78c19.8-19.9,10.7-39-.9-44.31-1-.5-1.4.31-.6,1,9.3,8,6.5,21.5-5.2,33.2L151,115c-10.4,10.31-19.1,19.2-19.1,29Zm81.8,26.6L168,178.17l-17.1,17.11c-10.4,10.39-19,19.3-19,29V227c0,.7.9.9,1.2.11,3.2-8.7,13.9-18.11,33.5-14.8,0,0,85.4,14.8,86.1,14.8a.9.9,0,0,0,1-.61.79.79,0,0,0-.2-.8c-.3-.39-39.8-39.8-39.8-39.8Zm-107.5,1h15a.66.66,0,0,0,.6-.6c0-7.9-6-13.31-30-9.2L40,186S.58,225.37.28,225.78a.79.79,0,0,0-.1,1.1.81.81,0,0,0,.8.2c.7-.11,86.1-14.8,86.1-14.8,19.6-3.31,30.3,6,33.5,14.8.3.8,1.2.7,1.2-.11v-29.5a.66.66,0,0,0-.6-.6l-15,.1a.64.64,0,0,1-.6-.6v-8.9a.65.65,0,0,1,.6-.6Zm26.8,25.9a36.3,36.3,0,0,1,6.9-15.81h-7.5a.65.65,0,0,0-.6.61v15.2c0,.89,1.1.89,1.2,0Zm13.6-158.6c0-.91-1.1-.91-1.2,0-2.6,12.39-7.5,17.29-17.8,27.6l-39.8,39.69c-19.8,19.81-10.7,39,.9,44.31,1,.5,1.4-.4.6-1-9.3-8-6.5-21.61,5.2-33.2l33-33c10.4-10.4,19.1-19.3,19.1-29Zm-19.1,17.49c10.4-10.3,19-19.2,19.1-29V27.27c0-.9-1.1-.9-1.2,0-2.6,12.4-7.5,17.4-17.8,27.7L86.68,95.78c-19.8,19.8-23.3,39-13.2,51.4.7.8,1.4.3,1-.7-6.7-15.1,9.3-31.1,16.9-38.7Zm37.6,82.5-14.3,14.2c-6.5,6.5-12.3,12.4-15.8,18.4h14.1l1.7-1.7,20.5-20.5c17.1-16.9,19.5-35,15.8-46.8-.3-1-1.2-1.1-1.2,0,.1,9.9-2.8,18.4-20.8,36.4Zm-2.8-24-11.4,11.5c-10.4,10.4-19.1,19.4-19.1,29.11v15.3c0,.89,1.1.89,1.2,0,2.6-12.4,7.5-17.4,17.8-27.7L167,142.17c19.8-19.8,23.3-39,13.2-51.4-.7-.8-1.4-.3-1,.7C185.88,106.57,169.88,122.57,162.28,130.17Zm83.5,68.2h1.1l1.7,3h1.5l-2-3.3a2,2,0,0,0,1.3-2c0-1.5-.8-2.2-2.7-2.2h-2.2v7.5h1.3v-3Zm0-3.5h.8c1,0,1.4.3,1.4,1.2,0,.7-.5,1.2-1.4,1.2h-.9v-2.4Zm1,9a6.3,6.3,0,1,0-6.3-6.3,6.08,6.08,0,0,0,5.87,6.3Zm0-11.7a5.4,5.4,0,1,1,0,10.8,5.31,5.31,0,0,1-5.4-5.23h0v-.16a5.24,5.24,0,0,1,5.11-5.39h.29Z"/></svg>
          </span>
        </div>
        <!-- .c-drawer__logo -->
        <div class="c-drawer__about">
          <div class="c-drawer__about-left u-spacing">
            <p>Tell the world is an offical media production of the Seventh-day Adventist world church.</p>
            <p>Seventh-day Adventists are devoted to helping people understand the Bible to find freedom, healing and hope.</p>
          </div>
          <div class="c-drawer__about-right u-spacing--half">
            <h3 class="u-font--secondary--s u-text-transform--upper">
              <strong>Learn More:</strong>
            </h3>
            <p class="u-spacing--half">
              <a href="" target="_blank" class="u-link--white">Adventist.org</a>
              <a href="" target="_blank" class="u-link--white">North American Division of Seventh-day Adventists</a>
              <a href="" target="_blank" class="u-link--white">ADRA International</a>
            </p>
          </div>
        </div>
        <!-- .c-drawer__about -->
      </div>
      <!-- .c-drawer__container -->
    </div>
    <!-- .c-drawer-->
    
    
    <header class="c-header {{ header_class }}" role="banner" id="header">
      <div class="c-header--inner">
        <div class="c-header__nav-secondary">
          {% include '@molecules/navigation/secondary-navigation.twig' %}
        </div>
        <div class="c-header__logo c-logo">
          <a href="/" class="c-logo__link {{ header_logo_class }}">
            {% include '@atoms/images/' ~ header_logo ~ '.twig' %}
          </a>
        </div>
        <!-- /.c-header__logo -->
        <div class="c-header__nav-primary">
          {% include '@molecules/navigation/primary-navigation.twig' %}
        </div>
      </div>
      <!-- /.c-header--inner -->
    </header>
    <!-- .c-header -->
    {% include '@molecules/navigation/drawer-navigation.twig' %}