Header Logo with Icon

Design System Navigation

Header Logo with Icon 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 1061.9 228.6"><title>logo-sda-with-icon</title><path d="M246.6,197.3h-.9v-2.4h.9c1,0,1.4.3,1.4,1.2C248,196.8,247.5,197.3,246.6,197.3Zm-5.2.46h0v-.16a5.26,5.26,0,0,1,5.12-5.4h.28a5.4,5.4,0,0,1,0,10.8A5.32,5.32,0,0,1,241.4,197.76Zm3.1,3.64h1.3v-3h1.1l1.7,3h1.5l-2-3.3a2,2,0,0,0,1.3-2c0-1.5-.8-2.2-2.7-2.2h-2.2ZM341,159.1l26.6,68.7h-8.9l-8.2-21.3H323.4l-8.1,21.2h-8.7l26.7-68.6Zm6.8,39.7-7.5-20.7c-.6-1.5-2.6-7.9-3.3-10.2-1,3.9-2.2,8-3,10.2l-7.8,20.7ZM67.7,120.4c-.1-9.9,2.8-18.4,20.8-36.4l39-39c10.4-10.4,19.1-19.3,19.1-29V.7c0-.9-1.1-.9-1.2,0-2.6,12.4-7.5,17.3-17.8,27.6L82.3,73.5c-17.1,17-19.5,35.1-15.8,46.9C66.8,121.4,67.7,121.5,67.7,120.4Zm146,65.5L168,178.2l-17.1,17.1c-10.4,10.4-19,19.3-19,29V227c0,.7.9.9,1.2.1,3.2-8.7,13.9-18.1,33.5-14.8,0,0,85.4,14.8,86.1,14.8a.89.89,0,0,0,1-.6.79.79,0,0,0-.2-.8C253.2,225.3,213.7,185.9,213.7,185.9ZM133,212.8a36.43,36.43,0,0,1,6.9-15.8h-7.5a.65.65,0,0,0-.6.6v15.2C131.8,213.7,132.9,213.7,133,212.8ZM146.6,54.2c0-.9-1.1-.9-1.2,0-2.6,12.4-7.5,17.3-17.8,27.6L87.8,121.5c-19.8,19.8-10.7,39,.9,44.3,1,.5,1.4-.4.6-1-9.3-8-6.5-21.6,5.2-33.2l33-33c10.4-10.4,19.1-19.3,19.1-29ZM127.5,71.7c10.4-10.3,19-19.2,19.1-29V27.3c0-.9-1.1-.9-1.2,0-2.6,12.4-7.5,17.4-17.8,27.7L86.7,95.8c-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.7ZM106.2,186.9h15a.65.65,0,0,0,.6-.6c0-7.9-6-13.3-30-9.2L40,186S.6,225.4.3,225.8a.79.79,0,0,0-.1,1.1.79.79,0,0,0,.8.2c.7-.1,86.1-14.8,86.1-14.8,19.6-3.3,30.3,6,33.5,14.8.3.8,1.2.7,1.2-.1V197.5a.65.65,0,0,0-.6-.6l-15,.1a.65.65,0,0,1-.6-.6v-8.9A.65.65,0,0,1,106.2,186.9Zm334.1-62.1,19.5-51.3h-9l-10.9,30.3c-1.4,4.1-3.6,10.4-4.3,13.6h-.4a105.87,105.87,0,0,0-4.1-13.6L420.2,73.5h-9l19.4,51.3Zm24.9-25.2c0-16.9,9.1-27,22.7-27,13.1,0,21.1,9.2,21.1,23.2v5.1H473.9c.3,11.6,6.1,17.8,16.4,17.8a39.92,39.92,0,0,0,14.1-2.5l2.4,6.3a38,38,0,0,1-16.9,3.3C475.2,125.8,465.2,116.7,465.2,99.6Zm8.8-5.5h26.1c-.1-8.7-3.9-14.7-12.5-14.7C479.7,79.5,474.9,84.9,474,94.1Zm300.8,31.7Zm-444.2-7.5a45.13,45.13,0,0,1-16.5-2.9l-2.7,7.1c4.3,2.1,11.1,3.3,18.8,3.3,15,0,24.4-7,24.4-19.2,0-10.7-6.6-15.2-18.7-19.7C324.8,82.8,321,80,321,73.1c0-6,4.4-10,12.9-10a41.15,41.15,0,0,1,16.2,3.6l2.8-7.4a44.86,44.86,0,0,0-18.8-3.8c-12.9,0-21.8,6.6-21.8,17.4,0,10.6,5.9,16.1,17.6,20.3,12.4,4.5,16.1,7.3,16.1,14.1S340.7,118.3,330.6,118.3Zm428-7.7c0-10.2,7.8-15.9,24.6-16.4l8.7-.3V90.8c0-8.5-3.9-11.4-10.6-11.4-5.4,0-10.2,1.9-14.5,3.9L764.2,77a38.27,38.27,0,0,1,17.5-4.4c12.5.1,18.4,5.3,18.4,17.3v35H794l-1.6-7.3H792c-4.5,5.7-8.6,8.2-17.2,8.2C765.5,125.8,758.6,121,758.6,110.6Zm8.6.1c0,5.8,3.8,8.3,9.4,8.3,8.6,0,15.1-4.7,15.1-14.7V99.7l-7.5.4h0C771.4,100.6,767.2,104.2,767.2,110.7ZM162.3,130.2l-11.4,11.5c-10.4,10.4-19.1,19.4-19.1,29.1v15.3c0,.9,1.1.9,1.2,0,2.6-12.4,7.5-17.4,17.8-27.7L167,142.2c19.8-19.8,23.3-39,13.2-51.4-.7-.8-1.4-.3-1,.7C185.9,106.6,169.9,122.6,162.3,130.2Zm-30.4,29.1c0,.9,1,.9,1.2,0,2.6-12.5,7.6-17.4,17.8-27.6L166,116.8c19.8-19.9,10.7-39-.9-44.3-1-.5-1.4.3-.6,1,9.3,8,6.5,21.5-5.2,33.2L151,115c-10.4,10.3-19.1,19.2-19.1,29Zm33.2-5.1-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,0C186,127.7,183.1,136.2,165.1,154.2Zm75.4,43.4a6.3,6.3,0,1,1,6.3,6.3h-.43A6.09,6.09,0,0,1,240.5,197.6Zm.9.16a5.32,5.32,0,0,0,5.4,5.24,5.4,5.4,0,0,0,0-10.8h-.28a5.26,5.26,0,0,0-5.12,5.4v.16Zm4.3-.46h.9c.9,0,1.4-.5,1.4-1.2,0-.9-.4-1.2-1.4-1.2h-.9Zm411-72.4V91.5c0-13.1-6.3-18.8-18.8-18.8-6.6,0-12.7,2.7-16,8h-.6a57.81,57.81,0,0,0,.5-7.2l.1-21.5-8.4,3.2v69.6h8.4V98.3c0-12,3.5-18.7,15-18.7,7.9,0,11.5,4.2,11.5,12.4v32.9Zm184.4,50.4c-6.6,0-12.7,2.7-16,8h-.6a57.81,57.81,0,0,0,.5-7.2l.1-21.4-8.4,3.2v69.6h8.4V201c0-12,3.5-18.7,15-18.7,7.9,0,11.5,4.2,11.5,12.4v32.8h8.3V194.1C859.9,180.9,853.6,175.3,841.1,175.3ZM786.5,221h0c-15.8,0-23.6-10.6-23.6-27.6,0-17.2,9-27.6,23.6-27.5a36.09,36.09,0,0,1,15.5,3.7l2.9-7.6c-5.2-2.6-11.3-3.7-18.3-3.7-21.1,0-32.8,14.4-32.8,35.1,0,21.5,10.4,35.2,31.4,35.2,8.7,0,13.7-.9,21.4-4.4l-2.5-6.6C799.7,219.7,792.4,221,786.5,221ZM826,131.9c-2.1,5.6-3.8,7.4-7.7,9.2l2.6,6.8c6.8-2.7,10.1-6.2,13.7-15.9l22.1-58.5h-9.1l-10.4,29.1c-1.8,5.3-3.6,10.9-4.4,14.1h-.4a83.56,83.56,0,0,0-4.3-14L817,73.5h-9l20.7,51.6ZM713.7,221.7c-4.7,0-8-3-8-9.2V182.8h14.8v-6.5H705.7V164.5l-8.4,3.1v45c0,12.5,7,15.9,15,15.9a20.15,20.15,0,0,0,9.4-2.1l-2.3-6A16.49,16.49,0,0,1,713.7,221.7ZM737.6,55.3,746,52v72.8h-6.8L738,118h-.4c-3.1,4.4-8,7.8-16,7.8-12.7,0-21.1-8.9-21.1-26.5s8.4-26.7,21.2-26.7c8,0,12.7,3.3,15.9,7.6h.6c-.2-1.6-.6-5.7-.6-7.6h0Zm.1,45.6h0V99.4c0-12.7-3.5-19.8-14.8-19.8-9.1,0-13.6,7.8-13.6,19.9s4.5,19.3,13.7,19.3C733.7,118.8,737.7,112.9,737.7,100.9Zm255.8,81.8a35.58,35.58,0,0,1,11.1,2.4l2.7-7a33.5,33.5,0,0,0-13.6-2.8c-13.8,0-24,7.9-24,26.9,0,18.2,9.8,26.4,23.5,26.4,5.9,0,11-1.3,13.9-3.1l-2.6-6.7a26.57,26.57,0,0,1-11.4,2.5c-9.7,0-14.7-6.8-14.7-19.2C978.4,189.3,983.3,182.7,993.5,182.7Zm-326-87.2,2.9,7.5h23.2l-2.9-7.5ZM910.2,203c0,12-3.7,18.6-15.1,18.6-7.8,0-11.4-4.1-11.4-12.3v-33h-8.5v33.6c0,13.1,6.3,18.7,18.7,18.7,6.6,0,13-2.4,16.3-7.8h.4l1.2,6.8h6.8V176.3h-8.4Zm132.9-27.7c-6.6,0-12.7,2.7-16,8h-.6a57.81,57.81,0,0,0,.5-7.2l.1-21.4-8.4,3.2v69.6h8.4V201c0-12,3.5-18.7,15-18.7,7.9,0,11.5,4.2,11.5,12.4v32.8h8.3V194.1C1061.9,180.9,1055.5,175.3,1043.1,175.3Zm-84.1.1h0c-7.2,0-12.5,4.7-15.7,10.3h-.4l-1-9.4H935v51.3h8.4V200.2c0-10.3,6.9-17.2,14.9-17.2a34,34,0,0,1,5.6.7l1-7.8A22.94,22.94,0,0,0,959,175.4ZM524.5,198.5v5.1H489.3c.3,11.6,6.1,17.8,16.4,17.8a39.92,39.92,0,0,0,14.1-2.5l2.4,6.3a39.3,39.3,0,0,1-16.9,3.4c-14.7,0-24.7-9.1-24.7-26.2,0-16.9,9.1-27,22.7-27C516.4,175.3,524.5,184.5,524.5,198.5Zm-8.8-1.7c-.1-8.7-3.9-14.6-12.5-14.6-8,0-12.8,5.5-13.7,14.6ZM557,92h0v32.9h8.4V91.5c0-13.3-6.4-18.9-18.6-19-6.5,0-12.9,2.6-16.2,8h-.5l-1.2-7h-6.8v51.3h8.4V98.2c0-12,3.6-18.6,15-18.6C553.4,79.6,557,83.8,557,92ZM389.2,125.8c-14.7,0-24.7-9.1-24.7-26.2,0-16.9,9.1-27,22.7-27,13,0,21.1,9.2,21.1,23.2v5.1H373.2c.3,11.6,6.1,17.8,16.4,17.8a39.92,39.92,0,0,0,14.1-2.5l2.4,6.3A38,38,0,0,1,389.2,125.8ZM373.3,94.1h26.2c-.1-8.7-3.9-14.7-12.5-14.7C379,79.5,374.2,84.9,373.3,94.1Zm82.1,112.3c-1.4,4.1-3.6,10.4-4.3,13.6h-.4a105.87,105.87,0,0,0-4.1-13.6l-10.9-30.2h-9l19.4,51.2h9.7l19.5-51.3h-9ZM410.1,158l8.4-3.3v72.8h-6.8l-1.2-6.9h-.4c-3.1,4.4-8,7.9-16,7.9-12.7.1-21.1-8.9-21.1-26.5s8.4-26.7,21.2-26.7c8,0,12.7,3.4,15.9,7.6h.6c-.2-1.6-.6-5.6-.6-7.6Zm.1,44.1c0-12.7-3.5-19.8-14.9-19.8-9.1,0-13.6,7.8-13.6,19.9s4.5,19.4,13.7,19.4c10.8-.1,14.8-6,14.8-18Zm152.1-26.8c-6.5,0-12.9,2.6-16.2,8h-.5l-1.2-7h-6.8v51.3H546V201c0-12,3.6-18.6,15-18.6,7.9,0,11.5,4.2,11.5,12.4v32.8h8.3V194.2C580.8,180.9,574.5,175.3,562.3,175.3Zm109.2,22.9h0c-9.9-3.8-13.2-5.5-13.2-9.8,0-3.8,3.7-6.2,10.6-6.2a37.56,37.56,0,0,1,14.4,3.4l2.6-6.8a40.3,40.3,0,0,0-16.4-3.5c-11.4,0-19.2,4.9-19.2,13.6,0,8.4,5.9,11.4,15.9,15.3s12.6,6.2,12.6,10c0,4.6-3.7,7.6-12.2,7.6a38.54,38.54,0,0,1-13.8-3l-2.5,6.5c3.9,2.2,8.9,3.3,16.1,3.3,12.6,0,20.5-5.2,20.5-15.2C686.9,205.2,681.4,202,671.5,198.2Zm-69.9-80.5a16.25,16.25,0,0,1-5.8,1.2c-4.7,0-8-3-8-9.2V80h14.9V73.5H587.9V61.7l-8.4,3.2v45c0,12.5,7,15.9,15,15.9,3.9,0,7.6-.9,9.4-2.1Zm27.2,109.9h8.4V176.3h-8.4Zm4.3-70.6c-2.8,0-5,1.7-5,5.4s2.2,5.4,5,5.4c2.6,0,4.9-1.8,4.9-5.4C638,158.6,635.7,157,633.1,157Zm-21.9,64.6h0c-4.7,0-8-3-8-9.2V182.7h14.9v-6.5H603.3V164.4l-8.4,3.2v45c0,12.5,7,15.9,15,15.9a20.15,20.15,0,0,0,9.4-2.1l-2.3-6A14.28,14.28,0,0,1,611.2,221.6Z" fill="#fff"/></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' %}