Header - GAiN Logo

Design System Navigation

Header - GAiN Logo 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 can-be--dark-dark">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3991 1357"><title>Gain</title><path d="M2848.78,149.68c0,111.08-84.59,173.24-182.33,173.24h-1.87c-84.59,0-148.48-56.49-148.48-148.73C2516.1,68.73,2600.67,1,2694.65,1,2784.86,1,2848.78,57.44,2848.78,149.68Z" fill="#d0021b"/><path d="M3990.4,74.4V1343.32H3633.31L3419,921.62c-71.44-135.59-154.13-305-214.29-459.39h-5.61c7.5,171.3,11.27,363.33,11.27,568.59v312.5H2900.26V74.4h400.37l201.09,389.72C3571.26,590.23,3644.58,759.68,3701,908.4h5.61c-18.76-167.51-26.31-344.52-26.31-534.67V74.4ZM655,853.85H824.17v218.39c-15,5.67-60.15,11.29-105.25,11.29C510.28,1083.53,358,946.09,358,708.87,358,451,531,341.76,739.59,341.76c144.71,0,229.3,22.57,300.71,52.7L1108,123.32c-65.78-32-195.48-62.1-366.51-62.1C329.85,61.22,2.82,285.27,1,725.82c0,182.63,62,346.42,180.42,459.39C296,1294.4,465.18,1356.5,715.15,1356.5c165.39,0,342.07-41.42,436-73.38V590.27H655ZM2333.86,1292l15.18,51.3h296.53L2820.36,417H2499Zm0,0-9.68,51.3H1983.83l-80.52-294.52H1577.44l-71.16,294.52H1156.06L1523.13,70.8H1972.6ZM1856.48,797.68l-58-228.44c-18.73-71.74-43.07-175.58-61.8-251.1h-3.74c-18.73,75.52-37.46,179.36-56.19,251.1l-54.32,228.44Z"/><polygon points="2324.18 1343.32 2349.04 1343.32 2333.86 1292.02 2324.18 1343.32" fill="#d0021b"/></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' %}