<div class="wysiwyg-content">
  <p>This is a <a class="{{modifier_class}}" href="#">standard link</a> inside of WYSIWYG text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div style="padding:.75em"></div>
<p>.-arrow-link<br>
<a href="#" class="-arrow-link {{modifier_class}}">This is an arrow link</a>.<br>
<a href="#" class="-arrow-link {{modifier_class}}">This is an arrow link w/ a <span>span</span> inside</a>.<br>
<a href="#" class="-arrow-link -external {{modifier_class}}">This is an external arrow link</a>.<br>
<a href="#" class="-arrow-link -lock {{modifier_class}}">This is a gated arrow link</a>.</p>
<div style="padding:.75em 0;background:linear-gradient(-45deg, #253a6e, #1d5389, #146ea6, #0c85be, #059bd6)">
<p>
<a href="#" class="-arrow-link -white {{modifier_class}}">This is a white arrow link</a>.<br>
<a href="#" class="-arrow-link -white {{modifier_class}}">This is a white arrow link w/ a <span>span</span> inside</a>.<br>
<a href="#" class="-arrow-link -white -external {{modifier_class}}">This is a white external arrow link</a>.<br>
<a href="#" class="-arrow-link -white -lock {{modifier_class}}">This is a white gated arrow link</a>.
</p>
</div>

  <a href="#" class="btn {{modifier_class}}">a.btn</a>
  <button type="button" class="btn {{modifier_class}}">button.btn</button>

<!-- components/accordion/accordion.twig -->
{% import '../../macros.twig' as macros %}
{% set accordionId = uniqid() %}
{% set component = accordion %}

{% import '../../macros.twig' as macros %}

<section class="accordion">

  {% if component.eyebrow %}
    <div class="eyebrow">{{component.eyebrow}}</div>
  {% endif %}

  <h2 class="accordion-title h3">{{component.title}}</h2>

  {% if component.description %}
    <p class="accordion-description wysiwyg-content">{{component.description}}</p>
  {% endif %}

  <ul class="accordion-items">
    {% for item in component.items %}
      <li class="accordion-item" data-expanded="false">
        <h3 class="h5">
          <button
            id="accordion-{{ accordionId ~ '-' ~ loop.index }}"
            class="accordion-trigger h5"
            aria-expanded="false"
            aria-controls="accordion-item-{{ accordionId ~ '-' ~ loop.index }}"
          >{{ item.title }}</button>
        </h3>
        <div
          id="accordion-item-{{ accordionId ~ '-' ~ loop.index }}"
          class="accordion-content"
          role="region"
          aria-labelledby="accordion-{{ accordionId ~ '-' ~ loop.index }}"
          aria-hidden="true"
        >

          <div class="wysiwyg-content">

            {% if item.subtitle %}
              <p class="accordion-item-subtitle">{{item.subtitle}}</p>
            {% endif %}

            {% if item.text %}
              <div class="accordion-item-text">{{ item.text }}</div>
            {% endif %}

            {% if item.button %}
             {{
               macros.button_link({
                href: item.button.url,
                text: item.button.text,
                external: item.button.external,
                gated: item.button.gated,
                classes: ['accordion-item-button']
              })
            }}
            {% endif %}

          {% if item.table %}
            <table class="accordion-item-table">
              {% for row in item.table %}
              <tr>
                <td class="title"><a href="{{row.title.link}}">{{row.title.text}}</a></td>
                <td class="date">{{row.date}}</td>
                <td class="link">
                  {{
                    macros.arrow_link({
                      href: row.link.url,
                      text: row.link.text,
                      external: row.link.external,
                      gated: row.link.gated,
                      classes: ['accordion-item-table-link']
                    })
                  }}
                </td>
              </tr>
              {% endfor %}
            </table>
          {% endif %}
          </div>
        </div>
      </li>
    {% endfor %}
  </ul>

</section>

<!-- components/ad-space-300/ad-space-300.twig -->

{% set component = ad_space_300 %}

<aside class="ad-space-300">
  {% if component.description %}
    <div class="ad-space-300-description">{{component.description}}</div>
  {% endif %}
  <div class="ad-space-300-embed">
    <script type="text/javascript" language="JavaScript">
      aj_server = 'https://asce.nui.media/pipeline/'; aj_tagver = '1.0';
      aj_zone = 'asce'; aj_adspot = '649477'; aj_page = '0'; aj_dim = '48149'; aj_ch = ''; aj_ct = ''; aj_kw = '';
      aj_pv = true; aj_click = '';
    </script>
    <script type="text/javascript" language="JavaScript" src="https://img.nui.media/banners/ajtg.js"></script>
  </div>
</aside>

<!-- components/ad-space-728/ad-space-728.twig -->
<aside class="ad-space-728">
  <div class="ad-space-728-embed">
    <script type="text/javascript" language="JavaScript">
      aj_server = 'https://asce.nui.media/pipeline/'; aj_tagver = '1.0';
      aj_zone = 'asce'; aj_adspot = '649478'; aj_page = '0'; aj_dim = '48156'; aj_ch = ''; aj_ct = ''; aj_kw = '';
      aj_pv = true; aj_click = '';
    </script>
    <script type="text/javascript" language="JavaScript" src="https://img.nui.media/banners/ajtg.js"></script>
  </div>
</aside>

<!-- components/ad-space-970/ad-space-970.twig -->
<aside class="ad-space-970">
  <div class="ad-space-970-embed">
    <script type="text/javascript" language="JavaScript">
      aj_server = 'https://asce.nui.media/pipeline/'; aj_tagver = '1.0';
      aj_zone = 'asce'; aj_adspot = '655424'; aj_page = '0'; aj_dim ='641336'; aj_ch = ''; aj_ct = ''; aj_kw = '';
      aj_pv = true; aj_click = '';
    </script>
    <script type="text/javascript" language="JavaScript" src="https://img.nui.media/banners/ajtg.js"></script>
  </div>
</aside>

<!-- components/alert-banner/alert-banner.twig -->

{% set component = alert_banner %}

<div class="alert-banner" role="banner" aria-hidden="false" data-cookie-expiration="{{ component.expiration }}">
  <div class="alert-banner-inner">

    {% for alert in component.alerts %}
      <div class="alert-banner-alert">
        <div class="alert-banner-icon"></div>
        <div class="alert-banner-text wysiwyg-content">
          <div class="alert-banner-title">{{ alert.title }}</div>
          <p>{{ alert.text }}</p>
        </div>
        <a href="{{ alert.button.url }}" class="btn">{{ alert.button.text }}</a>
      </div>

      {% if not loop.last %}<hr>{% endif %}

    {% endfor %}

  </div>

  <button class="alert-banner-close js-alert-banner-close"><span class="sr-text">Close Alert Banner</span></button>

</div>

<!-- components/article-header/article-header.twig -->
{% set component = article_header %}

<div class="article-header">
  <div class="article-header-inner">

    {% if component.title %}
     <h2 class="h3 article-header-title">{{ component.title }}</h2>
    {% endif %}

    {% if component.metadata %}
      {% include '../hero-metadata/hero-metadata.twig' with { hero_metadata : component.metadata } %}
    {% endif %}

  </div>
</div>

<!-- components/author-block/author-block.twig -->
{% set data = author_block %}
<section class="author-block">
  <div class="author-block-inner">
    {% if data.title %}
      <div class="author-block-title eyebrow">{{ data.title }}</div>
    {% endif %}
    <div class="author-block-items">
      {% for item in data.items %}
        <a
          class="author-block-item{{ not item.img ? ' -default' }}"
          href="{{ item.href }}"
        >
          <div class="author-block-item-image">
            <img
              src="{{ item.img.src|default('/images/default-avatar.svg') }}"
              alt="{{ item.img.src ? item.img.alt : 'Default Avatar' }}"
            />
          </div>
          <div class="author-block-item-text h6">
            <div class="author-block-item-name">
              {{ item.text }}
            </div>
            {% if item.credentials %}
            <p class="author-block-item-credentials">{{ item.credentials }}</p>
            {% endif %}
          </div>
        </a>
      {% endfor %}
    </div>
  </div>
</section>

<!-- components/author-hero/author-hero.twig -->
{% set component = author_hero %}

<div class="author-hero">
  <div class="author-hero-inner">

    {% if component.eyebrow %}
     <div class="h5 author-hero-eyebrow">{{ component.eyebrow }}</div>
    {% endif %}

    <h1 class="h1 author-hero-title">{{ component.title }}</h1>

    {% if component.credentials %}
      <p class="author-hero-credentials">{{ component.credentials }}</p>
    {% endif %}

    <div class="author-hero-content">
      <div class="author-hero-image">
        <img
          src="{{ component.image.src|default('/images/default-avatar.svg') }}"
          alt="{{ component.image.src ? component.image.alt : 'Default Avatar' }}"
        />
      </div>
      <div class="author-hero-text">

        <div class="wysiwyg-content">
          {{ component.text }}
        </div>

        {% if component.social_links %}
          <nav class="author-hero-social-links" aria-label="Social Media Links">
            <span class="eyebrow author-hero-social-links-label">{{ component.social_label }}</span>
            <ul>
              {% for service in component.social_links %}
                <li>
                  <a
                    class="icon-{{ service.name | lower }}"
                    href="{{service.name | lower == 'mail' ? 'mailto:' : ''}}{{ service.url }}"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">{{ service.name }}</span>
                  </a>
                </li>
              {% endfor %}
            </ul>
          </nav>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% set component = bio_social_links %}

<!-- components/bio-social-links/bio-social-links.twig -->
<nav class="bio-social-links" aria-label="Social Media Links">
  <span class="eyebrow author-hero-social-links-label">{{ component.social_label }}</span>
  <ul>
    {% for service in component.social_links %}
      <li>
        <a
          class="icon-{{ service.name | lower }}"
          href="{{service.name | lower == 'mail' ? 'mailto:' : ''}}{{ service.url }}"
          target="_blank"
          rel="noopener"
        >
          <span class="sr-text">{{ service.name }}</span>
        </a>
      </li>
    {% endfor %}
  </ul>
</nav>

<!-- components/bluberry-embed/bluberry-embed.twig -->
<section class="bluberry-embed">
  <iframe title="ASCE Plot Points Podcast" allowtransparency="true" height="315" width="100%" style="border: none; min-width: min(100%, 430px);height:315px;" scrolling="no" data-name="pb-iframe-player" src="https://www.podbean.com/player-v2/?i=z9ji7-d9ac4d-pbblog-playlist&share=0&download=1&fonts=Arial&skin=f6f6f6&font-color=auto&rtl=0&logo_link=episode_page&btn-skin=3267a3&size=315" loading="lazy" allowfullscreen=""></iframe>
</section>

{% include "breadcrumbs.twig" with {
  data: {
    char_limit: 30,
    items: [
      {
        text: "Parent item",
        href: "#",
        children: [
          { text: "First child", href: "#" },
          { text: "Second child", href: "#" }
        ]
      },
      {
        text: "Current item",
        href: "#"
      }
    ]
  }
} %}

<!-- components/brightcove-video-playlist-embed/brightcove-video-playlist-embed.twig -->
<section class="brightcove-video-playlist-embed">

  <h1 class="h3">Single video</h1>
  <div style="position: relative; display: block; max-width: 960px;">
    <div style="padding-top: 56.25%;">
      <iframe src="https://players.brightcove.net/75114961001/default_default/index.html?videoId=6204737050001" allowfullscreen="" allow="encrypted-media" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
    </div>
  </div>

  {# <h1 class="h3">Playlist player (Standard)</h1>
  <div style="position: relative; display: block; max-width: 100%;">
    <div style="padding-top: 56.25%;">
      <iframe src="https://players.brightcove.net/75114961001/23ZlO5fZ87_default/index.html?playlistId=1683543530138375701" allowfullscreen="" allow="encrypted-media" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
    </div>
  </div> #}

  <hr>
  <h1 class="h3">Playlist player (Advanced)</h1>
  <div class="vjs-playlist-player-container" style="max-width: 100%;">
    <video-js 
      data-account="75114961001" 
      data-player="rTJ40P9v6" 
      data-embed="default" 
      controls="" 
      data-video-id="" 
      data-playlist-id="1683543530138375701" 
      data-application-id="" 
      class="vjs-fluid"></video-js>
  </div>
  <script src="https://players.brightcove.net/75114961001/rTJ40P9v6_default/index.min.js"></script>
  <hr>
  
  <h1 class="h3">Gallery experience player</h1>
  <div data-experience="5faae13e66dc1c002247ef52"></div><script src="https://players.brightcove.net/75114961001/experience_5faae13e66dc1c002247ef52/live.js"></script>
</section>

<!-- components/card-grid/card-grid.twig -->
{% import '../../macros.twig' as macros %}

{% set component = card_grid %}

<section class="card-grid">
  <div class="card-grid-inner">
    <h2 class="card-grid-title h4">{{component.title}}</h2>
    <div class="card-grid-items" data-items="{{component.items.length}}">

      {% for item in component.items %}
        <div class="card-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="eyebrow">{{item.eyebrow}}</div>
          <a href="{{item.link.url}}" class="card-grid-item-title h5 js-link-event-link {{ item.link.gated ? '-gated' : item.link.external ? '-external' : ''}}">{{item.title}}</a>
          <p class="card-grid-item-text">{{item.text}}</p>
        </div>
      {% endfor %}

    </div>
  </div>
</section>

<!-- components/card-grid-icons/card-grid-icons.twig -->
{% import '../../macros.twig' as macros %}

{% set component = card_grid_icons %}

<section class="card-grid-icons -bg-right" {% if component.intro.image %}data-img="true"{% endif %}>
  <div class="card-grid-icons-inner">

    <div class="card-grid-icons-intro">

      <div class="card-grid-icons-intro-text">

        {% if component.intro.eyebrow %}
          <div class="eyebrow">{{ component.intro.eyebrow }}</div>
        {% endif %}

        <h2 class="h4">{{ component.intro.title }}</h2>

        {% if component.intro.description %}
          <p>{{ component.intro.description }}</p>
        {% endif %}

        {% if component.intro.links %}
          <div class="card-grid-icons-intro-links">
            {% for item in component.intro.links %}

              <div class="card-grid-icons-intro-link">
                {{ macros.arrow_link(
                  {
                    href: item.url,
                    text: item.text,
                    external: item.external,
                    gated: item.gated
                  }
                )
                }}
              </div>

            {% endfor %}
          </div>
        {% endif %}

      </div>

      {% if component.intro.image %}
        <div class="card-grid-icons-intro-img" {% if component.intro.image.gradient %}data-gradient="true"{% endif %}>
          <img src="{{ component.intro.image.src }}" alt="{{ component.intro.image.alt }}">
          {% if component.intro.image.credit %}
            <div class="card-grid-icons-intro-img-credit">{{ component.intro.image.credit }}</div>
          {% endif %}
        </div>
      {% endif %}

    </div>

    <div class="card-grid-icons-items">

      {% for item in component.items %}

        <div class="card-grid-icons-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500" {% if featured %}data-featured="true"{% endif %}>

          <div class="card-grid-icons-item-content">
            <div class="card-grid-icons-item-content-top">

              {% if item.image %}
                {% if component.image_type == 'icon' %}
                  <img src="{{ item.image.src }}" alt="{{ item.image.alt }}" class="card-grid-icons-item-icon">
                {% else %}
                  <img src="{{ item.image.src }}" alt="{{ item.image.alt }}" class="card-grid-icons-item-shield">
                {% endif %}
              {% endif %}

              <a href="{{item.link.url}}" class="card-grid-icons-item-title h5 js-link-event-link">{{item.title}}</a>
              <p class="card-grid-icons-item-text">{{item.text}}</p>

            </div>
            <div class="card-grid-icons-item-link">
              {{ macros.arrow_link(
                {
                  href: item.link.url,
                  text: item.link.text,
                  external: item.link.external,
                  gated: item.link.gated
                }
              )
              }}
            </div>
          </div>

        </div>
      {% endfor %}

    </div>

  </div>
</section>

<!-- components/careers-feed/careers-feed.twig -->
{% import '../../macros.twig' as macros %}

{% set component = careers_feed %}

<section class="careers-feed -bg-left">
  <div class="careers-feed-inner">
    <div class="careers-feed-intro">
      <h2 class="h4">{{ component.title }}</h2>
      {% if component.link %}

        {{ macros.arrow_link(
          {
            href: component.link.url,
            text: component.link.text,
            external: component.link.external,
            gated: component.link.gated
          }
        )
        }}

      {% endif %}
    </div>
    <div class="careers-feed-listings">
      <ul class="careers-feed-list">
        {% for item in component.listings %}
          <li class="careers-feed-listing">
            <a href="{{ item.url }}" class="careers-feed-listing-name">{{ item.title }}</a><br>
            {{ item.name ? item.name }}
            {{ item.location ? ' / ' ~ item.location }}
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</section>

<!-- components/column-links/column-links.twig -->
{% import '../../macros.twig' as macros %}

{% set component = column_links %}

<section class="column-links" data-columns={{component.columns.length}}>
  <div class="column-links-inner">
    {% for column in component.columns %}
      <div class="column-links-columns">
        {% for section in column.sections %}
          <div class="column-links-section">
            <h4 class="column-links-header h4">{{section.header}}</h4>
            <ul>
              {% for link in section.links %}
                <li>
                  {{ macros.arrow_link(
                      {
                        href: link.url,
                        text: link.text,
                      }
                    )
                  }}
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endfor %}
      </div>
    {% endfor %}
  </div>
</section>

<!-- components/column-list/column-list.twig -->
{% import '../../macros.twig' as macros %}

{% set component = column_list %}

<section class="column-list" data-columns={{component.columns.length}}>
  <div class="column-list-inner">

   {% if component.header %}
     <h2 class="column-list-header h4">{{component.header}}</h4>
   {% endif %}

   {% if component.description %}
     <p class="column-list-description">{{component.description}}</p>
   {% endif %}

   <div class="column-list-columns wysiwyg-content">
    {% for column in component.columns %}
      <div class="column-list-column">
        <ul>
          {% for item in column.items %}
            <li>{{item.text}}</li>
          {% endfor %}
        </ul>
      </div>
    {% endfor %}
    </div>

  </div>
</section>

{# components/columns-slider/columns-slider.twig #}
{% import '../../macros.twig' as macros %}

{% set component = columns_slider %}

<section class="columns-slider {{ component.background ? '-gray-bg' : '' }}">

  <div class="columns-slider-intro">

    {% if component.eyebrow %}
      <div class="eyebrow -centered">{{ component.eyebrow }}</div>
    {% endif %}

    <h2 class="h3">{{ component.title }}</h2>

    {% if component.link %}
      <div class="columns-slider-intro-link">
        {{ macros.arrow_link({
          href: component.link.url,
          text: component.link.text,
          external: component.link.external,
          gated: component.link.gated
        }) }}
      </div>
    {% endif %}

  </div>

  <div
    class="columns-slider-slides"
    data-images="{{ component.images ? 'true' : 'false' }}"
  >

    {% for slide in component.slides %}

      <div class="columns-slider-slide js-link-event">

        {% if slide.image %}
          <div class="columns-slider-slide-img">
            <img src="{{ slide.image.src }}" alt="{{ slide.image.alt }}">
          </div>
        {% endif %}

        {% if slide.eyebrow %}
          <div class="eyebrow">{{ slide.eyebrow }}</div>
        {% endif %}

        <h3 class="h5">
          <a
            href="{{ slide.url }}"
            class="columns-slider-slide-title js-link-event-link"
          >
            {{ slide.title }}
          </a>
        </h3>

        {% if slide.description %}
          <p>{{ slide.description }}</p>
        {% endif %}

        {% if slide.sponsor %}
          <div class="columns-slider-slide-sponsor">
            {{ slide.sponsor }}
          </div>
        {% endif %}

      </div>

    {% endfor %}

  </div>

  {% if component.button %}
    <div class="columns-slider-button">
      {{ macros.button_link({
        href: component.button.url,
        text: component.button.text,
        external: component.button.external,
        gated: component.button.gated
      }) }}
    </div>
  {% endif %}

</section>

<!-- components/committee-membership-panel/committee-membership-panel.twig -->

{% set component = committee_membership_panel %}

<section class="committee-membership-panel">

  {% if component.eyebrow %}
    <p class="committee-membership-panel-eyebrow">
      {{ component.eyebrow.text }}
      {% if component.eyebrow.link_text %} <a href="{{ component.eyebrow.link_url }}">{{ component.eyebrow.link_text }}</a>{% endif %}
    </p>
  {% endif %}

  <h2 class="h4">{{ component.title }}</h2>

  {% if component.priority_members %}
    <ul class="committee-membership-panel-items -priority-members">
      {% for item in component.priority_members %}
        <li class="committee-membership-panel-item">
          <span class="committee-membership-panel-name">{{ item.name }}</span>{% if item.credentials %}, <span class="committee-membership-panel-credentials">{{ item.credentials }}</span>{% endif %}
          {% if item.position %}<br><span class="committee-membership-panel-position">{{ item.position }}</span>{% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}

  <div class="alpha-scroll">

    <nav class="alpha-scroll-nav" aria-label="Committee Membership Panel Navigation">
      <ul class="alpha-scroll-nav-letters">
        {% for letter in 'A'..'Z' %}
          <li>
            {# use the modifier "-disabled" for sections with no items - ex: class="alpha-scroll-nav-letter -disabled" #}
            <button type="button" data-letter="{{ letter }}" class="alpha-scroll-nav-letter">{{ letter|upper }}</button>
          </li>
        {% endfor %}
      </ul>
    </nav>

    <div class="alpha-scroll-content">

      {% for section in component.sections %}

        <section class="alpha-scroll-section" data-section="{{ section.section_header|lower }}">
          <div class="alpha-scroll-section-header-letter">{{ section.section_header }}</div>

          {% if section.listings %}
            <ul class="committee-membership-panel-items">
              {% for item in section.listings %}
                <li class="committee-membership-panel-item">
                  <span class="committee-membership-panel-name">{{ item.name }}</span>{% if item.credentials %}, <span class="committee-membership-panel-credentials">{{ item.credentials }}</span>{% endif %}
                  {% if item.position %}<br><span class="committee-membership-panel-position">{{ item.position }}</span>{% endif %}
                </li>
              {% endfor %}
            </ul>
          {% endif %}

        </section>

      {% endfor %}

    </div>
  </div>
</section>

{% import '../../macros.twig' as macros %}
{% set data = comparison %}

<!-- components/comparison/comparison.twig -->
<article class="comparison">

  <div class="comparison-inner">

    <div class="comparison-intro">

      {% if data.intro.title %}
        <h2 class="h3">{{ data.intro.title }}</h2>
      {% endif %}

      {% if data.intro.text %}
        <div class="comparison-intro-text wysiwyg-content">{{ data.intro.text }}</div>
      {% endif %}

      {% if data.intro.button %}
        <div class="comparison-intro-button">
          {{ macros.button_link({
              href: data.intro.button.url,
              text: data.intro.button.text,
              classes: ['-small']
            })
          }}
        </div>
      {% endif %}

      {% if data.intro.secondary_link %}
        <div class="comparison-intro-secondary-link">
          {{ macros.arrow_link(
            {
              href: data.intro.secondary_link.url,
              text: data.intro.secondary_link.text
            }
          )
          }}
        </div>
      {% endif %}

    </div>

    <div
      class="comparison-items"
      data-count="{{ data.items|length }}"
    >

      {% for item in data.items %}
        <div class="comparison-item">
          <div class="comparison-item-main">

            {% if item.eyebrow %}
              <div class="comparison-eyebrow">{{ item.eyebrow }}</div>
            {% endif %}

            {% if item.title %}
              <h3 class="h3">{{ item.title }}</h3>
            {% endif %}

            {% if item.text %}
              <div class="comparison-item-text wysiwyg-content">{{ item.text }}</div>
            {% endif %}

            {% if item.button %}
              <div class="comparison-item-button">
                {{ macros.button_link({
                    href: item.button.url,
                    text: item.button.text,
                    classes: ['-gray -small']
                  })
                }}
              </div>
            {% endif %}

          </div>

          {% if item.secondary_text %}
            <div class="comparison-item-secondary wysiwyg-content">
              {{ item.secondary_text }}
            </div>
          {% endif %}

        </div>
      {% endfor %}

    </div>

  </div>

</article>

<!-- components/contact-panel/contact-panel.twig -->

{% set data = contact_panel %}

<section class="contact-panel -bg-left">
  <div class="contact-panel-inner">
    <h4 class="contact-panel-title h4">{{data.title}}</h4>
    <div class="contact-panel-wrapper">
      {% for column in data.columns %}
        <div class="contact-panel-column">
          <h5 class="contact-panel-header h6">{{column.header}}</h5>
          {% if column.position %}
            <h6 class="contact-panel-position h5">{{column.position}}</h6>
          {% endif %}
          <ul>
            {% if column.phone_number %}
            <li>{{column.phone_number}}</li>
            {% endif %}
            {% if column.email %}
              <li><a href="mailto:{{column.email}}">{{column.email}}</a></li>
            {% endif %}
            {% for address in column.addresses %}
              <li>{{address.text}}</li>
            {% endfor %}
          </ul>
          {% if column.has_social_share %}
          <ul class="social-share-services">
            <li><a data-service="linkedin" href="#"><span class="sr-text">{{ 'Share on LinkedIn' }}</span></a></li>
            <li><a data-service="facebook" href="#"><span class="sr-text">{{ 'Share on Facebook' }}</span></a></li>
            <li><a data-service="twitter" href="#"><span class="sr-text">{{ 'Share on Twitter' }}</span></a></li>
            <li><a data-service="youtube" href="#"><span class="sr-text">{{ 'Share on Youtube' }}</span></a></li>
            <li><a data-service="instagram" href="#"><span class="sr-text">{{ 'Share on Instgram' }}</span></a></li>
          </ul>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- components/coveo-filter-controller/coveo-filter-controller.twig -->

<a href="#" class="coveo-filter-controller {{ modifier_class }}">Filters</a>

<!-- components/coveo-wrapper/coveo-wrapper.twig -->
<section class="coveo-wrapper">

</section>

<!-- components/cta-panel/cta-panel.twig -->
{% import '../../macros.twig' as macros %}

{% set component = cta_panel %}

<section class="cta-panel{{ component.detail_page ? ' -detail' }}">
  <div class="cta-panel-label">{{ component.label }}</div>
  <div class="cta-panel-content">
    <div class="cta-panel-content-inner">
      <div class="wysiwyg-content">
        {{ component.text }}
      </div>

      {% if component.link %}
        <div class="cta-panel-secondary-link">
          {{ macros.arrow_link({
              href: component.link.url,
              text: component.link.text,
              external: component.link.external,
              gated: component.link.gated
            })
          }}
        </div>
      {% endif %}
    </div>
  </div>
</section>

<!-- components/contact-panel/disqus.twig -->
<section id="disqus_thread" class="disqus_chat"></section>
<script>
    /**
    *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
    *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
    /*
    var disqus_config = function () {
    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://asce-1.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>

<!-- components/double-promo/double-promo.twig -->
{% import '../../macros.twig' as macros %}

{% set component = double_promo %}

<section class="double-promo {{component.gray_background ? '-bg-left' : ''}} {{component.images ? '' : '-no-images'}}">

  <div class="double-promo-inner">

    <img class="dots" src="../images/white-dots-2.svg" alt="ASCE dots">

    <h2 class="double-promo-title h3">{{component.title}}</h2>

    <div class="double-promo-items">

      {% for item in component.items %}
        <div class="double-promo-item js-link-event">

          {% if item.image %}
            <div class="double-promo-item-image">
              <img src="{{item.image.src}}" alt="{{item.image.alt}}">
            </div>
          {% endif %}

          <div class="double-promo-item-content">

            {% if item.eyebrow %}
              <div class="eyebrow">{{item.eyebrow}}</div>
            {% endif %}

            {% if item.link %}

              <a href="{{item.link.url}}" class="h4 double-promo-item-heading js-link-event-link">{{item.heading}}</a>

              {% else %}

              <h3 class="h4 double-promo-item-heading">{{item.heading}}</h3>

            {% endif %}

            {% if item.description %}
              <p class="double-promo-item-description">{{item.description}}</p>
            {% endif %}

            {% if item.button %}
              {{ macros.button_link({
                  href: item.link.url,
                  text: item.button.text,
                  external: item.button.external,
                  gated: item.button.gated,
                  classes: ['double-promo-item-button']
                })
              }}
            {% endif %}

          </div>

        </div>
      {% endfor %}

    </div>

  </div>
</section>

{% set component = enroll_form %}

<!-- components/enroll-form/enroll-form.twig -->
<section class="enroll-form">

  <div class="eyebrow enroll-form-eyebrow">{{ component.eyebrow }}</div>

  <form action="">
    <div class="enroll-form-select">
      <label for="event-enroll" class="h5">{{ component.label }}</label>
      <div class="enroll-form-wrapper">
        <select name="event-enroll" id="event-enroll">
          {% for date in component.dates %}
            <option value="{{ date.value }}">{{ date.text }}</option>
          {% endfor %}
        </select>
        <div class="enroll-form-button">
          <a href="{{ component.link.url }}" class="btn">{{ component.link.text }}</a>
        </div>
      </div>
    </div>
  </form>
</section>

<!-- components/error-hero/error-hero.twig -->

{#{% import '../../macros.twig' as macros %}#}

<section class="error-hero">
  <img
    src="{{ error_hero.background_image.src }}"
    alt="{{ error_hero.background_image.alt }}"
  >
  <div class="inner">

    <h1 class="h1">{{ error_hero.title }}</h1>
    <p>{{ error_hero.text }}</p>
    <div class="buttons">
      {% for button in error_hero.buttons %}
        <a class="error-hero-btn" href="{{ button.url }}">{{ button.title }}</a>
      {% endfor %}
    </div>

  </div>
</section>

<!-- components/events-slider/events-slider.twig -->
{% import '../../macros.twig' as macros %}

{% set component = events_slider %}

<section class="events-slider">

  <div class="events-slider-intro">

    {% if component.eyebrow %}
      <div class="eyebrow -centered">{{ component.eyebrow }}</div>
    {% endif %}

    <h2 class="h3">{{ component.title }}</h2>

    {% if component.link %}
      <div class="events-slider-intro-link">
        {{ macros.arrow_link({
            href: component.link.url,
            text: component.link.text,
            external: component.link.external,
            gated: component.link.gated
          })
        }}
      </div>
    {% endif %}

  </div>

  <div class="events-slider-slides" {{ component.images ? 'data-images="true"' : 'data-images="false"' }}>

    {% for slide in events_slider.slides %}

      <div class="events-slider-slide js-link-event">

        {% if slide.image %}
          <div class="events-slider-slide-img">
            <img src="{{ slide.image.src }}" alt="{{ slide.image.alt }}">
          </div>
        {% endif %}

        {% if slide.date %}
          <div class="events-slider-slide-date">{{ slide.date }}</div>
        {% endif %}

        <h3 class="h5"><a href="{{ slide.url }}" class="events-slider-slide-title js-link-event-link">{{ slide.title }}</a></h3>

        {% if slide.location %}
          <p class="events-slider-slide-location">{{ slide.location }}</p>
        {% endif %}

        {% if slide.sponsor %}
          <div class="events-slider-slide-sponsor">
            {{ slide.sponsor }}
          </div>
        {% endif %}

      </div>

    {% endfor %}

  </div>

  {% if component.button %}

    <div class="events-slider-button">

      {{ macros.button_link({
          href: component.button.url,
          text: component.button.text,
          external: component.button.external,
          gated: component.button.gated
        })
      }}

    </div>

  {% endif %}

</section>

<!-- components/events-sponsor/events-sponsor.twig -->
{% set component = events_sponsor %}

<section class="events-sponsor">
    <div class="events-sponsor-text">{{component.text}}</div>
    <a href="{{component.link.url}}" class="events-sponsor-logo">
        <img src="{{component.logo}}" alt="ASCE sponsor logo">
    </a>
</section>

<!-- components/events-sub-nav/events-sub-nav.twig -->
{% set component = events_sub_nav %}

<div class="events-sub-nav">
  <div class="events-sub-nav-inner">
    <nav class="events-sub-nav-links">
      <ul>
        {% for item in component.links %}
          <li><a href="{{item.url}}" class="events-sub-nav-link {{item.active ? '-active' : ''}}">{{item.text}}</a></li>
        {% endfor %}
      </ul>
    </nav>
  </div>
</div>

{% set component = find_a_group_search %}

<!-- components/find-a-group-search/find-a-group-search.twig -->
<section class="find-a-group-search">
    <div class="find-a-group-search-inner">
        <form class="find-a-group-search-form">
            <div class="find-a-group-search-form-left">
                <div class="find-a-group-search-text h5 -white">{{ 'Enter Your U.S. Zip Code'|t }}</div>
            </div>
            <div class="find-a-group-search-form-right">
                <label for="find-a-group-search-form-input" class="sr-text">Zip Code Search</label>
                <input id="find-a-group-search-form-input" type="text" name="" value="" placeholder="zip code"
                       class="find-a-group-search-form-input">
                <button type="submit" class="find-a-group-search-form-submit">
                    <span class="sr-text">Search</span>
                </button>
            </div>
            <div class="find-a-group-search-form-link">
                <a href="{{ component.outside_link }}"><span>{{ 'Outside the U.S.'|t }}</span></a>
            </div>
        </form>
    </div>

    <div class="find-a-group-search-results-loader loader"></div>

    <div class="find-a-group-search-results"></div>
</section>

{% set component = full_width_slider %}

{# if more than one img, make it a slider #}
{% if component.slides|length > 1 %}
  {% set slick = true %}
{% endif %}

<section class="full-width-slider">

  <div class="full-width-slider-inner">
    <div class="full-width-slider-slick" {{ slick ? 'data-slider="true"' }}>

      {% for slide in component.slides %}
        <div class="full-width-slide {{slide.link ? 'js-link-event' : ''}}">
          <div class="full-width-slide-inner">
            <div class="full-width-slide-image" style="background-image: url('{{ slide.image.src }}') ;"></div>

            {% if slide.image.credit %}
              <div class="photo-credit full-width-slide-credit">{{ slide.image.credit }}</div>
            {% endif %}

            <div class="full-width-slide-content">

              {% if slide.eyebrow %}
                <div class="eyebrow full-width-slide-eyebrow">{{ slide.eyebrow }}</div>
              {% endif %}

              {% if slide.link %}
                <a href="{{slide.link.url}}" class="h4 full-width-slide-title js-link-event-link">{{slide.title}}</a>
              {% else %}
                <div class="full-width-slide-title h4">{{slide.title}}</div>
              {% endif %}

              {% if slide.description %}
                <p class="full-width-slide-description">{{slide.description}}</p>
              {% endif %}

            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
  {% if component.sponsors %}
    {% include "../sponsors/sponsors.twig" %}
  {% endif %}
</section>

<!-- components/gated-content-modal/gated-content-modal.twig -->
{% import '../../macros.twig' as macros %}

{% set data = gated_content_modal %}

<div class="gated-content-modal">
  <div class="gated-content-modal-inner">

    <div class="gated-content-modal-content">
      <div class="gated-content-modal-title"><h6 class="h6">{{data.title}}</h6></div>
      <div class="gated-content-modal-button">
        {% for button in data.buttons %}
        {{ macros.button_link({
          href: button.url,
          text: button.text,
        })
      }}
     {% endfor %}
      </div>
   {% if data.description %}
    <h6 class="gated-content-modal-description h6">{{data.description}}</h6>
   {% endif %}
   {% if data.link %}
   {{ macros.arrow_link(
      {
        href: data.link.url,
        text: data.link.text
      }
    )
    }}
   {% endif %}
    </div>
  </div>
</div>

<!-- components/hero-metadata/hero-metadata.twig -->
{% set component = hero_metadata %}
<section class="hero-metadata">
    <div class="hero-metadata-eyebrow eyebrow">{{ component.published }}</div>
    {# guesswork #}
    {% if component.comment %}
        <div class="hero-metadata-comment-count">
            <a href="{{ component.comment.url }}">{{ component.comment.count }}</a>
        </div>
    {% endif %}
    {% if component.duration %}
        <div class="hero-metadata-duration">{{ component.duration }}</div>
    {% endif %}
    {# end guesswork #}
    <div class="hero-metadata-sponsors">
        <div class="hero-metadata-sponsors-text">sponsors</div>
        <a href="{{ component.sponsor_site }}" class="hero-metadata-sponsors-logo">
            <img src="{{ component.image.src|default('/images/logo.svg') }}"
                 alt="{{ component.image.src ? component.image.alt : 'Default Logo' }}"
            />
        </a>
    </div>
</section>

<!-- components/hero-home/hero-home.twig -->
<section class="home-hero">

  <div class="home-hero-inner">

    <div class="home-hero-grid-container">
      <div class="home-hero-feature">
        {# <img src="{{ home_hero.image.url }}" alt="{{ home_hero.image.alt }}"> #}

          <video autoplay="true" muted=true poster="{{ home_hero.image.url }}">
            <source src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" media="screen and (min-width:767px)">
          </video>
      </div>

      <div class="home-hero-content">
        <h1 class="home-hero-content-title h1">{{ home_hero.title }}</h1>
        <p class="home-hero-content-intro">{{ home_hero.text }}</p>
        <a href="{{ home_hero.link.url }}" class="btn">{{ home_hero.link.text }}</a>
      </div>

      <div class="home-hero-search">
        <div class="home-hero-search-inner">
          <input type="text" name="" value="" placeholder="Search ASCE.org" class="home-hero-search-input">
          <button class="home-hero-search-submit">
            <span class="sr-text">Search</span></button>
        </div>
      </div>
    </div>

  </div>

</section>

<hr>

<!-- components/image-grid/image_grid.twig -->
{% set component = image_grid %}
<section class="topics-grid">
  <div class="topics-grid-inner">
    {% if component.title %}
      <h2 class="topics-grid-title h4 -center">{{component.title}}</h2>
    {% endif %}
    <div class="topics-grid-items">
      {% for item in component.items %}
        <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('{{ item.image.src }}')"></div>
          </div>
          <a class="topics-grid-item-title h5 js-link-event-link{{ item.link.external ? ' -external' }}" href="{{item.link.url}}"{{ item.link.external ? ' target="_blank"' }}>
            {{item.title}}
          </a>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- components/image-slider/image-slider.twig -->
{% import '../../macros.twig' as macros %}

{% set component = image_slider %}

<section data-slider-position="{{ component.slider_position }}" class="image-slider -blue {{ component.slider_position == 'left' ? '-bg-left' : '-bg-right' }}">
  <div class="image-slider-inner">

    <div class="image-slider-text">

      <div class="image-slider-text-inner">

        {% if component.eyebrow %}
          <div class="eyebrow">{{ component.eyebrow }}</div>
        {% endif %}

        <h2 class="h4">{{ component.title }}</h2>

        {% if component.description %}
          <p>{{ component.description }}</p>
        {% endif %}

        {% if component.link %}

          {% if component.link.type == 'button' %}

            {{ macros.button_link({
                href: component.link.url,
                text: component.link.text,
                external: component.link.external,
                gated: component.link.gated,
                classes: ['-white -centered']
              })
            }}

          {% else %}

            {{ macros.arrow_link({
                href: component.link.url,
                text: component.link.text,
                external: component.link.external,
                gated: component.link.gated,
                classes: ['-white']
              })
            }}

          {% endif %}

        {% endif %}

      </div>

    </div>

    <div class="image-slider-container">

      <div class="image-slider-slides">

        {% for slide in component.slider.slides %}

          <div class="image-slider-slide">

            <figure class="image-slider-slide-photo">
              <div class="image-slider-slide-photo-inner">
                <img src="{{ slide.photo.src }}" alt="{{ slide.photo.alt }}" class="image-slider-slide-photo-img">
                <div class="image-slider-slide-photo-credit">{{ slide.photo.credit }}</div>
              </div>
              <figcaption class="image-slider-caption">

                {% if slide.title.url %}
                  <a href="{{ slide.title.url }}" class="image-slider-caption-title -underline">{{ slide.title.text }}</a>
                {% else %}
                  <div class="image-slider-caption-title">{{ slide.title.text }}</div>
                {% endif %}

                <div class="image-slider-caption-text">{{ slide.description }}</div>

              </figcaption>

            </figure>

          </div>

        {% endfor %}

      </div>

    </div>

  </div>
</section>

<!-- components/institute-link-list/institute-link-list.twig -->
{% import '../../macros.twig' as macros %}

{% set component = institute_link_list %}

<section class="institute-link-list" data-columns="{{ component.columns }}">
  <h2 class="institute-link-list-title h4">{{ component.title }}</h2>
  <div class="institute-link-list-inner">

    <div class="institute-link-list-text">

      {# {% if component.eyebrow %}
        <div class="eyebrow">{{ component.eyebrow }}</div>
      {% endif %} #}

      {% if component.text %}
        <p>{{ component.text}}</p>
      {% endif %}

      <div class="institute-link-list-text-bottom">
        {% if component.button %}
          <a href="{{ component.button.url }}" class="btn">{{ component.button.text }}</a>
        {% endif %}

        {% if component.social_links %}
          <nav class="institute-link-list-social-links" aria-label="Social Media Links">
            <span class="eyebrow institute-link-list-social-links-label">{{ component.social_label }}</span>
            <ul>
              {% for service in component.social_links %}
                <li>
                  <a
                    class="icon-{{ service.name | lower }}"
                    href="{{ service.url }}"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">{{ service.name }}</span>
                  </a>
                </li>
              {% endfor %}
            </ul>
          </nav>
        {% endif %}
      </div>

    </div>

    <div class="institute-link-list-links">

      {% if component.links %}
        <ul>
          {% for link in component.links %}
            <li>
              {{ macros.arrow_link(
                {
                  href: link.url,
                  text: link.text,
                  external: link.external,
                  gated: link.gated
                }
              )
              }}
            </li>
          {% endfor %}
        </ul>
      {% endif %}

    </div>

  </div>
</section>

<!-- components/institute-news-list/institute-news-list.twig -->
{% import '../../macros.twig' as macros %}

{% set component = institute_news_list %}

<div class="institute-news-list">
  <div class="institute-news-list-inner">
    <div class="institute-news-list-items">
      {% for item in component.section_1 %}
        <div class="institute-news-list-item js-link-event">
          {% if item.image %}
          <div class="institute-news-list-item-image">
            <div class="institute-news-list-item-image-wrapper">
              <img src="{{ item.image.src }}" alt="{{ item.image.alt }}">
            </div>
          </div>
          {% endif %}
          <div class="institute-news-list-item-content">
            <div class="eyebrow institute-news-list-item-eyebrow">{{ item.eyebrow }}</div>
            <a href="{{item.link.url}}" class="h5 institute-news-list-item-title js-link-event-link">{{ item.title }}</a>
            <p class="institute-news-list-item-text">{{ item.text }}</p>
            <p class="institute-news-list-item-date">{{ item.date }}</p>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>

  {% if component.promo %}
    {% include '../promo-full-width/promo-full-width.twig' with { promo_full_width: component.promo }%}
  {% endif %}

  {% if component.section_2 %}
    <div class="institute-news-list-inner">
      <div class="institute-news-list-items">
        {% for item in component.section_2 %}
          <div class="institute-news-list-item js-link-event">
            {% if item.image %}
            <div class="institute-news-list-item-image">
              <div class="institute-news-list-item-image-wrapper">
                <img src="{{ item.image.src }}" alt="{{ item.image.alt }}">
              </div>
            </div>
            {% endif %}
            <div class="institute-news-list-item-content">
              <div class="eyebrow institute-news-list-item-eyebrow">{{ item.eyebrow }}</div>
              <a href="{{item.link.url}}" class="h5 institute-news-list-item-title js-link-event-link">{{ item.title }}</a>
              <p class="institute-news-list-item-text">{{ item.text }}</p>
              <p class="institute-news-list-item-date">{{ item.date }}</p>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {% if component.link %}
  <div class="institute-news-list-button">
    <div class="institute-news-list-button-inner">
      {{ macros.button_link({
        href: component.link.url,
        text: component.link.text,
        external: component.link.external,
        gated: component.link.gated
        })
      }}
    </div>
  </div>
  {% endif %}
</div>

<!-- components/institutes-hero/institutes-hero.twig -->

{% set component = institutes_hero %}

<section class="institutes-hero">
  <div class="institutes-hero-inner">
    <div class="institutes-hero-shield">
      <img src="{{component.image.url}}" alt="{{component.image.alt}}">
    </div>
    <div class="institutes-hero-content">
      <h1 class="h1">{{component.title}}</h1>
      {% include '../breadcrumbs/breadcrumbs.twig' with { data: breadcrumbs } %}
    </div>
  </div>
</section>

<!-- components/intro-panel/intro-panel.twig -->
{% import '../../macros.twig' as macros %}

{% set component = intro_panel %}

{# if .intro-panel-text we need the data-text attribute to control dot decoration styling #}
<section class="intro-panel" {{ component.text ? 'data-text="true"' }}>

  <h2 class="h5">{{ component.bold_text }}</h2>

  {% if component.text %}
    <div class="intro-panel-text">
      <p>{{ component.text }}</p>
    </div>
  {% endif %}

  {% if component.button %}
    {{ macros.button_link({
        href: component.button.url,
        text: component.button.text,
        external: component.button.external,
        gated: component.button.gated
      })
    }}
  {% endif %}

  {% if component.secondary_links %}

    {% for link in intro_panel.secondary_links %}
      <div class="intro-panel-secondary-link">
        {{ macros.arrow_link({
            href: link.url,
            text: link.text,
            external: link.external,
            gated: link.gated
          })
        }}
      </div>
    {% endfor %}

  {% endif %}

</section>

<!-- components/juicer-embed/juicer-embed.twig -->
<section class="juicer-embed">

  <div class="juicer-embed-inner">
    <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
    <link href="https://assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
    <ul
      class="juicer-feed"
      data-feed-id="https-app2-cision-com-rss-feed_id-eac45995-da53-4eee-86af-3134f5070ddb"
      data-gutter="28"
      data-per="12"
    ></ul>
  </div>

</section>

<!-- components/leadership-list/leadership-list.twig -->

{% set component = leadership_list %}

<section class="leadership-list">
  <h2 class="h4">{{ component.title }}</h2>
  <ul class="leadership-list-items">
    {% for item in component.listings %}
      <li class="leadership-list-item">
        <span class="leadership-list-name">{{ item.name }}</span>{% if item.credentials %}, <span class="leadership-list-credentials">{{ item.credentials }}</span>{% endif %}
        {% if item.position %}<br><span class="leadership-list-position">{{ item.position }}</span>{% endif %}
      </li>
    {% endfor %}
  </ul>
</section>

<!-- components/link-list/link-list.twig -->
{% import '../../macros.twig' as macros %}

{% set component = link_list %}

<section class="link-list {{ component.background ? ' -bg-left' }}" data-text="{{ component.text ? 'true' : 'false' }}" data-columns="{{ component.columns }}">
  <div class="link-list-inner">

    <div class="link-list-text">

      {% if component.eyebrow %}
        <div class="eyebrow">{{ component.eyebrow }}</div>
      {% endif %}

      <h2 class="h4">{{ component.title }}</h2>

      {% if component.text %}
        <p>{{ component.text}}</p>
      {% endif %}

      {% if component.button %}
        <a href="{{ component.button.url }}" class="btn">{{ component.button.text }}</a>
      {% endif %}

    </div>

    <div class="link-list-links">

      {% if component.links %}
        <ul>
          {% for link in component.links %}
            <li>
              {{ macros.arrow_link(
                {
                  href: link.url,
                  text: link.text,
                  external: link.external,
                  gated: link.gated
                }
              )
              }}
            </li>
          {% endfor %}
        </ul>
      {% endif %}

    </div>

  </div>
</section>

<!-- components/logo-grid/logo-grid.twig -->
{% set component = logo_grid %}

<article class="logo-grid {{ detail_page == true ? '-detail' }}">
  <div class="inner">
    {% if component.title %}
      <header>
        <h2 class="{{ detail_page == true ? 'h5' : 'h3' }}">
          {{ component.title }}
        </h2>
      </header>
    {% endif %}

    <ul class="logos">
    {% for item in component.items %}
      <li class="logo {{ item.link ? '-has-link' }}">
        {% set logo = '<img src="'~ item.src ~'" alt="'~ item.alt ~'">' %}

        {% if item.link %}
          {% set content = '<a href="'~ item.link ~'">'~ logo ~'</a>' %}
        {% else %}
          {% set content = logo %}
        {% endif %}

        {{ content }}
      </li>
    {% endfor %}
    </ul>

  </div>
</article>

{% set data = magazine_issues %}

<!-- components/magazine-issues/magazine-issues.twig -->

<section class="magazine-issues">
  <div class="magazine-issues-inner">
    <article class="magazine-issues-content" id="magazineissues" data-item-id="x">
      {# No results #}
      <div class="magazine-issues-no-results h2">Your category did not return any results. Please try another category.</div>
      {# Results text #}
      <div class="magazine-issues-results-text h2"></div>
      {# Loading #}
      <div class="magazine-issues-loading loader"> <span class="sr-text">Loading...</span></div>
      {# Results #}
      <div class="magazine-issues-results">
        {% for item in data.items %}
          <article class="magazine-issues-item js-link-event">
            <div class="magazine-issues-item-image">
              <img src="{{ item.image }}" alt="{{ item.name }}">
            </div>
            <a class="magazine-issues-item-text js-link-event-link">
              <p class="magazine-issues-item-date">{{ item.date }}</p>
              <p class="magazine-issues-item-name">{{ item.name }}</p>
            </a>
          </article>
        {% endfor %}
      </div>

      {% include '../pagination/pagination.twig' %}
    </article>
  </div>
</section>

<!-- components/masonry-grid/masonry-grid.twig -->
{% import '../../macros.twig' as macros %}

{% set component = masonry_grid %}

<section class="masonry-grid">
  <div class="masonry-grid-inner">
    <h2 class="masonry-grid-title h4">{{component.title}}</h2>

    {% if component.new_text.status %}
      <div class="masonry-grid-large-text" aria-hidden="true">
        <div>{{ component.new_text.text }}</div>
      </div>
    {% endif %}

    <div class="masonry-grid-items">

      {% for item in component.items %}

        {% if item.featured.status %}
          {% set featured = true %}
        {% endif %}

        {% if item.featured.img.gradient %}
          {% set gradient = true %}
        {% endif %}

        <div class="masonry-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500" {% if featured %}data-featured="true"{% endif %}>

          {% if featured %}
            <div class="masonry-grid-item-img" {% if gradient %}data-gradient="true"{% endif %}>
              <div class="masonry-grid-item-img-inner" style="background-image: url('{{ item.featured.img.src }}')"></div>
              {% if item.featured.img.credit %}
                <div class="photo-credit">{{ item.featured.img.credit }}</div>
              {% endif %}
            </div>
          {% endif %}

          <div class="masonry-grid-item-content">

            {% if item.eyebrow %}
              <div class="eyebrow">{{item.eyebrow}}</div>
            {% endif %}
            <a href="{{item.link.url}}" class="masonry-grid-item-title h5 js-link-event-link {{ item.link.gated ? '-gated' : item.link.external ? '-external' : ''}}">{{item.title}}</a>
            <p class="masonry-grid-item-text">{{item.text}}</p>
          </div>

        </div>
      {% endfor %}

    </div>
  </div>
</section>

{% import '../../macros.twig' as macros %}
{% set data = media_cta %}

<!-- components/media-cta/media-cta.twig -->
<article class="media-cta">
    <div class="media-cta-inner">
        <div class="media-cta-track">

        {% if data.content and data.content is not empty %}

            {# Content #}
            <div class="media-cta-content">

            {# Title #}
            {% if data.content.title %}
                <h2 class="h4 media-cta-title">{{ data.content.title }}</h2>
            {% endif %}

            {# Text #}
            {% if data.content.text %}
                <div class="media-cta-text wysiwyg-content">{{ data.content.text }}</div>
            {% endif %}

            {# Button #}
            {% if data.content.button %}
                <div class="media-cta-button">
                {{ macros.button_link({
                    href: data.content.button.url,
                    text: data.content.button.text,
                    classes: ['-small']
                    })
                }}
                </div>
            {% endif %}

            {# Link #}
            {% if data.content.secondary_link %}
                <div class="media-cta-secondary-link">
                {{ macros.arrow_link(
                    {
                    href: data.content.secondary_link.url,
                    text: data.content.secondary_link.text
                    }
                )
                }}
                </div>
            {% endif %}

            </div>

        {% endif %}

        <div class="media-cta-media">

            {# Video #}
            {% if data.video %}

            {{
                macros.responsiveHtmlVideo(
                data.video.sources,
                ['media-cta-video-player', 'js-video-player'],
                {'autoplay': '', 'muted': '', 'loop': '', 'playsinline': '' }
                )
            }}

            {# Image #}
            {% else %}
            <img src="{{ data.image.src }}" class="media-cta-image" alt="{{ data.image.alt }}">
            {% endif %}

        </div>
        </div>
    </div>
</article>

{# components/news-list/news-list.twig #}
{% set component = news_list %}
{% set is_dynamic = component.items is not defined or component.items is empty %}

<section class="news-list">
  <div class="news-list-inner">

    {% if component.main_title %}
      <h2 class="h3 news-list-title -center">
        {{ component.main_title }}
      </h2>
    {% endif %}

    <article
      class="news-list-content"
      {% if is_dynamic %}
        id="newslisting"
        data-item-id="{{ component.item_id|default('') }}"
      {% endif %}
    >

      {# Loading (dynamic only) #}
      {% if is_dynamic %}
        <div class="news-list-loading loader" role="status" aria-live="polite">
          <span class="sr-text">Loading…</span>
        </div>
      {% endif %}

      {# No results #}
      <div class="news-list-no-results h2" aria-live="polite">
        Your category did not return any results. Please try another category.
      </div>

      {# Results container (shared) #}
      <div class="news-list-results">

        {# STATIC MODE #}
        {% if not is_dynamic %}
          {% for item in component.items %}
            <div class="news-list-item">

              {% if item.image %}
                <div class="news-list-item-image">
                  <div class="news-list-item-image-wrapper">
                    <img
                      src="{{ item.image.src }}"
                      alt="{{ item.image.alt|default(item.title) }}"
                    >
                  </div>
                </div>
              {% endif %}

              <div class="news-list-item-content">
                {% if item.category %}
                  <div class="eyebrow news-list-item-eyebrow">
                    {{ item.category }}
                  </div>
                {% endif %}

                {% if item.title %}
                  <a
                    href="{{ item.url }}"
                    class="h5 news-list-item-title"
                  >
                    {{ item.title }}
                  </a>
                {% endif %}

                {% if item.text %}
                  <p class="news-list-item-text">{{ item.text }}</p>
                {% endif %}

                {% if item.date %}
                  <p class="news-list-item-date">{{ item.date }}</p>
                {% endif %}
              </div>
            </div>
          {% endfor %}
        {% endif %}
      </div>

      {# Pagination (dynamic + enabled only) #}
      {% if is_dynamic and component.pagination != false %}
        {% include '../pagination/pagination.twig' %}
      {% endif %}

    </article>
  </div>
</section>

<!-- components/pagination/pagination.twig -->
<div class="pagination">
  <div class="pagination-inner">
    <span class="pagination-nav">
      <a class="pagination-prev" href="#" data-disabled="true"><span class="sr-text">Previous Page</span><span
          class="icon-arrow -left"></span></a>
    </span>
    <span class="pagination-mobile">Page <span class="pagination-mobile-current"></span> of <span
        class="pagination-mobile-total"></span></span>
    <span class="pagination-pages"></span>
    <span class="pagination-nav">
      <a class="pagination-next" href="#"><span class="sr-text">Next Page</span><span class="icon-arrow"></span></a>
    </span>
  </div>
</div>

{% set data = personalized_link_list %}

<!-- components/personalized-link-list/personalized-link-list.twig -->
<article class="personalized-link-list">
    <div class="personalized-link-list-inner">

        <div class="personalized-link-list-title">
            <h2 class="h4">
                {{ data.title}}
            </h2>
        </div>

        <div class="personalized-link-list-content">

        {% for list in data.link_lists %}
            <div class="personalized-link-list-links">

            {# Optional header #}
            {% if list.title %}
                <h3 class="h6">{{ list.title }}</h3>
            {% endif %}

            <ul>
                {% for link in list.links %}
                <li>

                    {# Link #}
                    <a href="{{ link.url }}" class="-arrow-link{{ link.external ? ' -external' : '' }}" target="{{ link.external ? '_blank' : '_self' }}" rel="{{ link.external ? 'noopener' : '' }}">

                    {# Icon #}
                    {% if link.icon %}
                        <span class="personalized-link-list-icon">
                        <img src="/images/icons/{{ link.icon }}.svg" alt="">
                        </span>
                    {% endif %}

                    {# Text, label, shield container #}
                    <div>

                        {# Text #}
                        <span>{{ link.text }}</span>

                        {# Label #}
                        {% if link.label %}
                        <span class="personalized-link-list-label">{{ link.label }}</span>
                        {% endif %}

                        {# Shield #}
                        {% if link.shield %}
                        <span class="personalized-link-list-shield">
                            <img src="/images/icons/shields/shield-{{ link.shield }}.png" alt="">
                        </span>
                        {% endif %}

                    </div>
                    </a>

                </li>
                {% endfor %}

            </ul>
            </div>
        {% endfor %}

        </div>
    </div>
</article>

{% set data = photo_grid %}
{% set photoGridImages = data.images %}

{# Split the images into two tracks #}
{% set splitPoint = (photoGridImages|length // 2) %}
{% set topTrack = photoGridImages|slice(0, splitPoint) %}
{% set bottomTrack = photoGridImages|slice(splitPoint) %}

<!-- components/photo-grid/photo-grid.twig -->

{# IMAGES:

  **************
  * IMPORTANT
  **************c
  (Soft Requirement):
  - User should upload an even number of images
    - if odd number, the 2 tracks will animate at slightly different speeds

  Must have:
    - Minimum of 8 images
    - Images MUST be 624 x 378

#}

<div class="photo-grid">

    {# Intro #}
    {% if data.intro.title %}
    <div class="photo-grid-intro">
        <div class="photo-grid-intro-text">
            <h2 class="h4">{{ data.intro.title }}</h2>
            {% if data.intro.description %}
            <div class="photo-grid-intro-description">
                <p>{{ data.intro.description }}</p>
            </div>
            {% endif %}
        </div>
        {% if data.intro.button %}
        <div class="photo-grid-intro-button">
            <a href="{{ data.intro.button.url }}" class="btn -small">{{ data.intro.button.text }}</a>
        </div>
        {% endif %}
    </div>
    {% endif %}

    <div class="photo-grid-scroller">
        <div class="photo-grid-track js-scroller js-hidden-until-load">
        {% for item in topTrack %}
            <div class="photo-grid-item">
                <img src="{{ item.src }}" alt="{{ item.alt }}" />
            </div>
        {% endfor %}
        </div>

        <div class="photo-grid-track js-scroller js-hidden-until-load">
        {% for item in bottomTrack %}
            <div class="photo-grid-item">
                <img src="{{ item.src }}" alt="{{ item.alt }}" />
            </div>
        {% endfor %}
        </div>

    </div>

    <div class="photo-grid-scroller-controls">
        <button type="button" class="video-toggle-btn js-scroller-control"><span class="sr-text">Pause</span></button>
    </div>

</div>

<!-- components/presenters-grid/presenters-grid.twig -->
{% import '../../macros.twig' as macros %}

{% set component = presenters_grid %}

<section
  class="presenters-grid"
  data-layout="{{ component.layout }}"
  data-columns="{{ component.columns }}"
>

  <div class="presenters-grid-inner">

    <div class="presenters-grid-intro">

      <div class="presenters-grid-intro-text">

        <h2 class="h3">{{ component.title }}</h2>

        <p>{{ component.description }}</p>

      </div>

      {% if component.button %}

        <div class="presenters-grid-intro-button">

          {{ macros.button_link({
              href: component.button.url,
              text: component.button.text,
              external: component.button.external,
              gated: component.button.gated
            })
          }}

        </div>

      {% endif %}

    </div>

    <div class="presenters-grid-slides" {{ component.images ? 'data-images="true"' : 'data-images="false"' }}>

      {% for slide in component.slides %}

        <div class="presenters-grid-slide{% if slide.link %} js-link-event{% endif %}">

          {% if slide.image %}
            <div class="presenters-grid-slide-img">
              <img src="{{ slide.image.src }}" alt="{{ slide.image.alt }}">
            </div>
          {% endif %}

          <div class="presenters-grid-slide-content">

            <h3 class="h5">
              {% if slide.link %}
                <a href="{{ slide.link.url }}" class="presenters-grid-slide-name{{ slide.link.external ? ' -external' }} js-link-event-link" {{ slide.link.external ? 'target="_blank"' }}><span class="text">{{ slide.name }}</span><span class="text--bl"></span></a>
              {% else %}
                {{ slide.name }}
              {% endif %}
            </h3>

            <div class="presenters-grid-slide-title">{{ slide.title }}</div>

            {% if slide.company %}
              <p class="presenters-grid-slide-company">{{ slide.company }}</p>
            {% endif %}

          </div>

        </div>

      {% endfor %}

    </div>

    {% if component.button %}

      <div class="presenters-grid-button">

        {{ macros.button_link({
            href: component.button.url,
            text: component.button.text,
            external: component.button.external,
            gated: component.button.gated
          })
        }}

      </div>

    {% endif %}

    <div class="presenters-grid-accent">
      <img class="dots" src="../images/white-dots-2.svg" alt="ASCE dots">
    </div>

  </div>

</section>

<!-- components/promo-full-width/promo-full-width.twig -->
{% import '../../macros.twig' as macros %}

{% set component = promo_full_width %}

<section class="promo-full-width">

  <img class="dots" src="../images/white-dots.svg" alt="ASCE dots">

  {% if component.images %}
  <div class="promo-full-width-images">
    {% for image in component.images %}
      <img src="{{image.src}}" alt="{{image.alt}}">
    {% endfor %}
  </div>
  {% endif %}

  <div class="promo-full-width-inner">
    <h2 class="h4 -line-above -white">{{component.title}}</h2>

    {% if component.text %}
      <p class="-white">{{component.text}}</p>
    {% endif %}

    {{ macros.button_link({
        href: component.link.url,
        text: component.link.text,
        external: component.link.external,
        gated: component.link.gated,
        classes: ['-white']
      })
    }}
  </div>
</section>

<!-- components/promo-membership/promo-membership.twig -->
{% set data = promo_membership_max %}
<section class="promo-membership" data-columns={{data.items.length}}>
  <div class="promo-membership-inner">
    {% if data.title %}
      <h2 class="promo-membership-title h4 -center">{{ data.title }}</h2>
    {% endif %}
    <div class="promo-membership-items">
      {% for item in data.items %}
        <div class="promo-membership-item">
          <div class="promo-membership-item-top">
            {% if data.show_images %}
              <div
                class="promo-membership-item-image"
                style="background-image: url('{{ item.image.src }}');"
                data-animation="fadeInUp"
                data-animation-duration="1500"
                data-animation-delay="{{ loop.index0 * 100}}"
              >
                <span class="sr-text">{{ item.image.alt }}</span>
              </div>
            {% endif %}
            <h3 class="promo-membership-item-title h5">{{ item.flex_1 }}</h3>
            {% if item.flex_2 %}
              <div class="promo-membership-item-subtitle">{{ item.flex_2 }}</div>
            {% endif %}
          </div>
          {% if item.bullets %}
            <ul class="promo-membership-item-list -standard wysiwyg-content">
              {% for bullet in item.bullets %}
                <li class="promo-membership-item-list-bullet">{{ bullet }}</li>
              {% endfor %}
            </ul>
          {% endif %}
          {% if data.show_links %}
            <a href="{{ item.link.href }}" class="promo-membership-item-link btn -small">{{ item.link.text }}</a>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- components/promo-splitter/promo-splitter.twig -->
{% import '../../macros.twig' as macros %}

{% set component = promo_splitter %}

{% if component.background %}

  {% set button_class = ' -white' %}

  {% if component.image_position == 'right' %}
    {% set bg_class = ' -blue -bg-right' %}
  {% else %}
    {% set bg_class = ' -blue -bg-left' %}
  {% endif %}

{% endif %}

<section class="promo-splitter{{ bg_class ? bg_class }}" data-image-position="{{ component.image_position }}" data-gradient="{{ component.gradient }}">
  <div class="promo-splitter-inner">
    <div class="promo-splitter-image">
      <img src="{{ component.image.src }}" alt="{{ component.image.alt }}">
      {% if component.image.credit %}
        <div class="promo-splitter-photo-credit">{{ component.image.credit }}</div>
      {% endif %}
    </div>
    <div class="promo-splitter-content">
      {% if component.content.eyebrow %}
        <div class="eyebrow">{{ component.content.eyebrow }}</div>
      {% endif %}
      <h2 class="h4">{{ component.content.title }}</h2>
      {% if component.content.wysiwyg %}
        <div class="wysiwyg-content">
          {{ component.content.wysiwyg }}
        </div>
      {% endif %}
      {% if component.content.button %}
        <a href="{{ component.content.button.url }}" class="btn{{ button_class ? button_class }}">{{ component.content.button.text }}</a>
      {% endif %}
      {% if component.content.link_list %}
        <ul class="promo-splitter-link-list">
          {% for link in component.content.link_list %}
            <li>
              {{ macros.arrow_link(
                {
                  href: link.url,
                  text: link.text,
                  external: link.external,
                  gated: link.gated
                }
              )
              }}
            </li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
  </div>

  {% if component.sponsors %}
    {% include "../sponsors/sponsors.twig" %}
  {% endif %}
</section>

<!-- components/publications-promo/publications-promo.twig -->
{% import '../../macros.twig' as macros %}

{% set component = publications_promo %}

<section class="publications-promo {{component.image_right ? '-right' : '' }}">

  <div class="publications-promo-inner">
    <div class="publications-promo-left">
      <div class="publications-promo-image">
        <img src="{{component.image.src}}" alt="{{component.image.alt}}">
      </div>
    </div>
    <div class="publications-promo-right">
      <div class="publications-promo-content">
        {% if component.eyebrow %}
          <div class="eyebrow">{{component.eyebrow}}</div>
        {% endif %}

        <h2 class="h4 publications-promo-heading">{{component.heading}}</h2>

        <p class="publications-promo-description">{{component.description}}</p>

        {% if component.button %}
          {{ macros.button_link({
            href: component.link.url,
            text: component.button.text,
            classes: ['publications-promo-button']
            })
          }}
        {% endif %}

      </div>
    </div>
  </div>
</section>

<!-- components/related-items/related-items.twig -->

{% set component = related_items %}

  <aside class="related-items">
    <div class="eyebrow -large -lowercase">{{ component.title }}</div>
    <ul class="related-items-list">
      {% for item in component.items %}
        <li class="related-items-item" role="article">
          <a href="{{ item.url }}" class="related-items-link">
            <div class="related-items-link-text">{{ item.title }}</div>
            {% if item.img.src %}
              <div class="related-items-link-img">
                <img src="{{ item.img.src }}" alt="{{ item.img.alt }}">
              </div>
            {% endif %}
          </a>
        </li>
      {% endfor %}
    </ul>
  </aside>

<!-- components/rich-text/rich-text.twig -->

{% set component = rich_text %}
<section class="rich-text wysiwyg-content">
  <div class="rich-text-inner">
    {# field data output starts here #}

    {% if component.short_text %}
      <figure class="wysiwyg-image -center -video">
        <div class="video-container">
          <iframe src="{{ rich_text.video_link }}" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>
        </div>
        <cite class="wysiwyg-image-photo-credit">Ian Hollands</cite>
        <figcaption>Optional caption</figcaption>
      </figure>

      <p>This course will provide a general background in port engineering. Various types of terminals will be presented, including: container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals. The course will give the <a href="#">specific requirements</a> of each of these various types of facilities and prepare the student for the engineering tasks required for port facilities. <a href="#">Reference materials</a> will be the most current and provide a knowledge base and toolbox for the students.</p>
      <ul>
        <li>Develop a general background in port engineering.</li>
        <li>Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.</li>
        <li>
          Understand the specific requirements of each of these types of facilities
          <ul>
            <li>Develop a general background in port engineering.</li>
            <li>Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.</li>
          </ul>
        </li>
      </ul>

    {% else %}
    {# NEEDS SNIPPET #}
    <figure class="wysiwyg-image -center">
      <img src="/images/fpo/wysiwyg-image-center.jpg" alt="IMAGE CENTER ALT">
      <cite class="wysiwyg-image-photo-credit">Ian Hollands</cite>
      <figcaption>Optional caption</figcaption>
    </figure>

    <p>This course will provide a general background in port engineering. Various types of terminals will be presented, including: container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals. The course will give the <a href="#">specific requirements</a> of each of these various types of facilities and prepare the student for the engineering tasks required for port facilities. <a href="#">Reference materials</a> will be the most current and provide a knowledge base and toolbox for the students.</p>

    {# NEEDS SNIPPET #}
    <figure class="wysiwyg-image -left -small">
      <img src="/images/fpo/rich-text-portrait.jpg" alt="IMAGE LEFT ALT">
      <cite class="wysiwyg-image-photo-credit">Ian Hollands</cite>
    </figure>

    <p>I have led two national professional organizations (USUCGER and Geo-Institute) and two international professional organizations (ISSMGE and FedIGS) and my style has been consistent. It follows these simple steps:</p>

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo soluta corrupti consequatur nostrum sed modi numquam, ipsam, voluptas tenetur alias quod debitis vitae provident repellat placeat libero ipsa. Eos nobis voluptatum similique nesciunt praesentium quis et ea cumque! Reprehenderit, corporis veniam. Necessitatibus neque harum, ab debitis deserunt quod nisi ratione!</p>

    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores cum beatae neque accusantium, libero vel nam eaque asperiores officia sapiente quae consequatur rem magni corrupti quam voluptate blanditiis exercitationem? Omnis!</p>

    <ul>
      <li>Develop a general background in port engineering.</li>
      <li>Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.</li>
      <li>
        Understand the specific requirements of each of these types of facilities
        <ul>
          <li>Develop a general background in port engineering.</li>
          <li>Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.</li>
        </ul>
      </li>
    </ul>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla velit iusto, temporibus sapiente impedit dolore, consequatur sint a maxime nihil aut eaque repellat totam magnam accusantium qui tempora quam incidunt vero. Eveniet perferendis tempore laboriosam nam suscipit animi aperiam dicta, esse vero illo, totam nihil eos molestiae rem porro reprehenderit dolorem assumenda eum minus, commodi magnam amet? Necessitatibus deleniti accusantium facilis? Repellendus quae delectus nesciunt inventore impedit quo at facere magni suscipit provident, aspernatur sapiente.</p>

    <ol>
      <li>Develop a general background in port engineering.</li>
      <li>Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.</li>
      <li>
        Understand the specific requirements of each of these types of facilities
        <ol>
          <li>Develop a general background in port engineering.</li>
          <li>Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.
            <ol>
              <li>Develop a general background in port engineering.</li>
              <li>Become familiar with distinct types of terminals including container, liquid bulk, dry bulk, cruise ships, small craft marinas, and USN/military terminals.</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
    <h1>Header 1</h1>
    <p>Start agile world performance the ball dive devops podcasting from your generation ball the.</p>
    <h2>Header 2</h2>
    <p>Start agile world performance the ball dive devops podcasting from your generation ball the.</p>
    <h3>Header 3</h3>
    <p>Start agile world performance the ball dive devops podcasting from your generation ball the.</p>
    <h4>Header 4</h4>
    <p>Start agile world performance the ball dive devops podcasting from your generation ball the.</p>
    <h5>Header 5</h5>
    <p>Start agile world performance the ball dive devops podcasting from your generation ball the.</p>
    <h6>Header 5</h6>
    <p>Start agile world performance the ball dive devops podcasting from your generation ball the.</p>

    <p>Proin dolor pellentesque portaest ipsum leo cursus vivamus vivamus varius maximus ex ut tristique quam adipiscing diam consectetur nec leo sem purus sollicitudin morbi id.</p>
    <p>Molestie scelerisque congue nunc ac vivamus molestie felis sollicitudin ipsum enim magna massa magna et scelerisque ac nulla orci quisque eros ac eget molestie enim.</p>

    {# NEEDS SNIPPET #}
    <figure class="wysiwyg-image -left">
      <img src="/images/fpo/wysiwyg-image-left.jpg" alt="IMAGE LEFT ALT">
      <cite class="wysiwyg-image-photo-credit">Ian Hollands</cite>
      <figcaption>Heading overall loop capitalize leverage change eye test disruptive start ballpark.</figcaption>
    </figure>

    <p>Ac massa ex vivamus nec placerat aliquam eu tempus mi adipiscing nisl erat amet quis ex elementum ac maecenas sollicitudin a nisl fusce accumsan sollicitudin. Tincidunt molestie quisque felis arcu nec nunc condimentum congue sed quam vel nisi lacus ac consectetur nisi nisi consectetur tempus enim urna interdum sem congue.</p>
    <p>Proin dolor pellentesque portaest ipsum leo cursus vivamus vivamus varius maximus ex ut tristique quam adipiscing diam consectetur nec leo sem purus sollicitudin morbi id.</p>

    {# NEEDS SNIPPET #}
    <figure class="wysiwyg-image -right">
      <img src="/images/fpo/wysiwyg-image-right.jpg" alt="IMAGE RIGHT ALT">
      <cite class="wysiwyg-image-photo-credit">Ian Hollands</cite>
      <figcaption>Will real has domination override content organically approaches end capitalize grow approaches convergence from. Collaborative ensure derive empowerment multiple eye line strategies digital disruptive added.</figcaption>
    </figure>

    <p>Molestie scelerisque congue nunc ac vivamus molestie felis sollicitudin ipsum enim magna massa magna et scelerisque ac nulla orci quisque eros ac eget molestie enim.</p>
    <blockquote>Morbi facilisis erat dolor bibendum elementum purus lorem eget placerat facilisis sit erat et urna adipiscing quam elit diam enim hendrerit ut vivamus molestie orci.</blockquote>
    <p>Proin dolor pellentesque portaest ipsum leo cursus vivamus vivamus varius maximus ex ut tristique quam adipiscing diam consectetur nec leo sem purus sollicitudin morbi id.</p>
    <p>Molestie scelerisque congue nunc ac vivamus molestie felis sollicitudin ipsum enim magna massa magna et scelerisque ac nulla orci quisque eros ac eget molestie enim.</p>

    {# NEEDS SNIPPET #}
    <div class="callout">
      <p>ASCE is continuing to monitor the COVID-19 situation both internationally and domestically with guidance from federal, state and local governments and health officials.</p>
    </div>

    {# NEEDS SNIPPET #}
    <figure class="wysiwyg-image -center -video">
      <div class="video-container">
        <iframe src="{{ rich_text.video_link }}" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>
      </div>
      <cite class="wysiwyg-image-photo-credit">Ian Hollands</cite>
      <figcaption>Optional caption</figcaption>
    </figure>
    {% endif %}
  </div>
</section>

<!-- components/rss-link-list/rss-link-list.twig -->

{% set component = rss_link_list %}

<section class="rss-link-list">
  <div class="rss-link-list-inner">
    <h2 class="h4">{{ component.title }}</h2>
    <ul class="rss-link-list-listings">
      {% for item in component.listings %}
        <li class="rss-link-list-item js-link-event" role="article">
          <a href="{{ item.url }}" class="js-link-event-link">{{ item.title }}</a>
          {% if item.text %}
            <p>{{ item.text }}</p>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
</section>

{% import '../../macros.twig' as macros %}
{% set data = schedule %}
{% set tabsID = uniqid() %}

<!-- components/schedule/schedule.twig -->
<article class="schedule tab-panels js-tab-panels">

    <div class="schedule-inner">

        <div class="schedule-intro">

        <div class="schedule-intro-title">
            <h2 class="h3">{{ data.intro.title }}</h2>
            <div class="schedule-intro-link">
            {{ macros.arrow_link(
                {
                href: data.intro.link.url,
                text: data.intro.link.text,
                external: data.intro.link.external
                }
            )
            }}
            </div>
        </div>

        <nav class="tab-panel-nav" aria-label="{{ 'Tabbed Navigation'|t }}">
            <div class="tab-panel-nav-inner">
            <ul class="tab-panel-nav-links">
                {% for item in data.tabs %}
                <li class="tab-panel-nav-link">
                    <button
                    type="button"
                    id="tab-item-{{ tabsID ~ '-' ~ loop.index }}"
                    class="tab-panel-nav-btn js-tab-panel-btn {{ loop.first ? '-active' }}"
                    aria-expanded="{{ loop.first ? 'true' : 'false' }}"
                    aria-controls="section-{{ tabsID ~ '-' ~ loop.index }}"
                    >{{ item.title }}</button>
                </li>
                {% endfor %}
            </ul>
            </div>
        </nav>

        </div>

        <div class="tab-panels-container">

        {% for panel in data.tabs %}

            <section
            id="section-{{ tabsID ~ '-' ~ loop.index }}"
            class="tab-panel js-tab-panel {{ loop.first ? '-active' }}"
            role="region"
            aria-labelledby="tab-item-{{ tabsID ~ '-' ~ loop.index }}"
            aria-hidden="{{ loop.first ? 'false' : 'true' }}"
            >

            <div class="tab-panel-outer">
                <div class="tab-panel-inner">
                <div class="tab-panel-content">

                    {% for section in panel.tab_content.time_frames %}

                    <div class="schedule-session-time-block">

                        <div class="schedule-session-time">{{ section.time }}</div>

                        <div class="schedule-session-list">

                        {% for session in section.sessions %}
                            <div class="schedule-session">
                            <h3 class="h5">
                                {% if session.url %}
                                {{ macros.arrow_link({
                                    href: session.url,
                                    text: session.title,
                                    external: session.external
                                    })
                                }}
                                {% else %}
                                {{ session.title }}
                                {% endif %}
                            </h3>
                            <div class="schedule-session-text"><p>{{ session.description }}</p></div>
                            <div class="schedule-session-speakers">
                                {% for speaker in session.speakers %}
                                <div class="schedule-session-speaker">
                                    <div class="schedule-speaker-img">
                                    <img src="{{ speaker.image.src }}" alt="{{ speaker.name }}">
                                    </div>
                                    <div class="schedule-speaker-name">
                                    {% if speaker.url %}
                                        {{ macros.arrow_link({
                                            href: speaker.url,
                                            text: speaker.name,
                                            external: speaker.external
                                        })
                                        }}
                                    {% else %}
                                        {{ speaker.name }}
                                    {% endif %}
                                    </div>
                                </div>

                                {% endfor %}
                            </div>
                            </div>
                        {% endfor %}

                        </div>
                    </div>

                    {% endfor %}

                </div>
                </div>
            </div>
            </section>

        {% endfor %}

        </div>

    </div>

</article>

{% set component = section_search %}

<!-- components/section-search/section-search.twig -->
<section class="section-search">
  <div class="section-search-inner">
    <form class="section-search-form">
      <div class="section-search-form-left">
        <div class="section-search-text h5 -white">{{component.text}}</div>
      </div>
      <div class="section-search-form-right">
        <label for="section-search-form-input" class="sr-text">Section Search</label>
        <input id="section-search-form-input" type="text" name="" value="" placeholder="SEARCH ASCE.ORG" class="section-search-form-input">
        <button type="submit" class="section-search-form-submit">
          <span class="sr-text">Search</span>
        </button>
      </div>
      <div class="section-search-checkbox-wrapper">
        <input id="section-search-checkbox" type="checkbox">
        <label for="section-search-checkbox">{{component.checkbox.label}}</label>
        <button class="tooltip" [data-animation='scale' ]="]" data-tippy-content="{{component.checkbox.tooltip}}">?<span class="sr-text">More Information</span></button>
      </div>
    </form>
  </div>
</section>

<aside class="social-share">
  {# <div class="inner"> #}
  <div class="social-share-title">{{ 'Share'|t }}</div>
  <ul class="social-share-services">
    <li><a data-service="facebook" href="#"><span class="sr-text">{{ 'Share on Facebook'|t }}</span></a></li>
    <li><a data-service="twitter" href="#"><span class="sr-text">{{ 'Share on Twitter'|t }}</span></a></li>
    <li><a data-service="linkedin" href="#"><span class="sr-text">{{ 'Share on LinkedIn'|t }}</span></a></li>
  </ul>
  {# </div> #}
</aside>

<!-- components/source-detail-hero/source-detail-hero.twig -->

{% set component = source_detail_hero %}

<section class="source-detail-hero">
  <div class="source-detail-hero-inner">
    <div class="h5 source-detail-hero-eyebrow">{{ component.eyebrow }}</div>
    <h1 class="h1 source-detail-hero-title">{{ component.title }}</h1>

    {% if component.metadata %}
      {% include '../hero-metadata/hero-metadata.twig' with { hero_metadata : component.metadata } %}
    {% endif %}

  </div>
</section>

<!-- components/source-hero/source-hero.twig -->
{% set component = source_hero %}

<section class="source-hero" style="background-image: url('{{component.image.src}}');">
  <div class="source-hero-inner">
    <div class="source-hero-content">

      {% if component.eyebrow %}
        <div class="eyebrow">{{component.eyebrow}}</div>
      {% endif %}

      {% if component.link %}
        <a href="{{component.link.url}}" class="h3 source-hero-title">{{component.title}}</a>
      {% else %}
        <h2 class="h3 source-hero-title">{{component.title}}</h2>
      {% endif %}

    </div>

    {% if component.image.credit %}
      <div class="photo-credit source-hero-credit">{{ component.image.credit }}</div>
    {% endif %}

  </div>
</section>

<!-- components/source-sub-nav/source-sub-nav.twig -->

{# {% set sourceSubNavId = uniqid() %} #}

<nav class="source-sub-nav">

  <div class="source-sub-nav-inner">

    <div class="source-sub-nav-logo-wrapper">
      <a href="{{ source_sub_nav.link }}" class="source-sub-nav-source-logo">
        <img src="{{ source_sub_nav.logo.url }}" alt="{{ source_sub_nav.logo.alt }}">
      </a>

    {% if source_sub_nav.secondary_logo %}
      <div class="source-sub-nav-secondary-logo">
        <img src="{{ source_sub_nav.secondary_logo.url }}" alt="{{ source_sub_nav.secondary_logo.alt }}">
      </div>
    {% endif %}


    </div>

    {% if source_sub_nav.subscribe_button %}
      <a href="{{ source_sub_nav.subscribe_button.url }}" class="btn source-sub-nav-subscribe-button-desktop">{{ source_sub_nav.subscribe_button.text }}</a>
    {% endif %}

    {% if source_sub_nav.tagline %}
      <div class="source-sub-nav-tagline">{{ source_sub_nav.tagline }}</div>
    {% endif %}

    <div class="source-sub-nav-mobile-trigger-wrapper">
      <button class="source-sub-nav-mobile-trigger">
        <span class="sr-text">Open sub-menu</span>
        <span class="line line-1" aria-hidden="true"></span>
        <span class="line line-2" aria-hidden="true"></span>
        <span class="line line-3" aria-hidden="true"></span>
      </button>
    </div>

    <ul class="source-sub-nav-items">
      {% for item in source_sub_nav.sub_nav %}
        <li class="source-sub-nav-item" data-expanded="false">
          <a href="{{ item.href }}">{{ item.text }}</a>

          {% if item.children %}
            <button
              id="source-sub-nav-{{ sourceSubNavId ~ '-' ~ loop.index }}"
              class="source-sub-nav-trigger"
              aria-expanded="false"
              aria-controls="source-sub-nav-{{ sourceSubNavId ~ '-' ~ loop.index }}"
            >
              <span class="sr-text">Expand {{ item.text }}'s children'</span>
            </button>
          {% endif %}

          {% if item.children %}
            <ul
            class="source-sub-nav-children"
            id="source-sub-nav-{{ sourceSubNavId ~ '-' ~ loop.index }}"
            role="region"
            aria-labelledby="source-sub-nav-{{ sourceSubNavId ~ '-' ~ loop.index }}"
            aria-hidden="true"
            >
              {% for child in item.children %}
                <li>
                  <a href="{{ child.href }}">{{ child.text }}</a>
                </li>
              {% endfor %}
            </ul>
          {% endif %}
        </li>
      {% endfor %}
      <li>
        {% if source_sub_nav.subscribe_button %}
          <a href="{{ source_sub_nav.subscribe_button.url }}" class="btn source-sub-nav-subscribe-button-mobile">{{ source_sub_nav.subscribe_button.text }}</a>
        {% endif %}
      </li>
    </ul>



  </div>

</nav>

<!-- components/sponsors/sponsors.twig -->

{% set component = sponsors %}

<div class="sponsors">
  <div class="sponsors-label eyebrow">{{ sponsors.label }}</div>
  <ul class="sponsors-list">
    {% for logo in component.logos %}
      <li>
        <a href="{{ logo.url }}" class="sponsors-link" target="_blank">
          <img src="{{ logo.src }}" class="sponsors-logo" alt="{{ logo.alt }}">
        </a>
      </li>
    {% endfor %}
  </ul>
</div>

<!-- components/sponsors-carousel/sponsors-carousel.twig -->

{% set data = sponsors_carousel %}

<!-- components/sponsors-carousel/sponsors-carousel.twig -->
<article class="sponsors-carousel">

  {# Intro Panel #}
  {% include '../intro-panel/intro-panel.twig' with { intro_panel: data.intro } %}

  {#
  ****************************************************
  * IMPORTANT
  ****************************************************
  - This component should have a MINIMUM of 6 sponsors (if less than 6, the component will not animate)
  -Ideal dimensions of images are under 224px width and/or 110px height
  #}

  <div
    class="sponsors-carousel-scroller"
    data-count="{{ data.sponsors|length }}"
  >
    <div class="sponsors-carousel-track js-sponsors-carousel-track js-hidden-until-load">
      {% for sponsor in data.sponsors %}
        <div class="sponsors-carousel-item js-sponsors-carousel-item">
          <div class="sponsors-carousel-img">
            {% if sponsor.url %}
              <a href="{{ sponsor.url }}" class="sponsors-carousel-link" target="_blank"><img src="{{ sponsor.src }}" alt="{{ sponsor.alt }}" loading="eager"></a>
            {% else %}
              <img src="{{ sponsor.src }}" alt="{{ sponsor.alt }}" loading="eager">
            {% endif %}
          </div>
          <div class="sponsors-carousel-level">{{ sponsor.level }}</div>
        </div>
      {% endfor %}
    </div>

    <div class="sponsors-carousel-controls">
      <button type="button" class="video-toggle-btn js-sponsors-carousel-control"><span class="sr-text">Pause</span></button>
    </div>

  </div>

</article>

<!-- components/standard-hero/standard-hero.twig -->

{% set component = standard_hero %}

<section class="standard-hero">
  <div class="standard-hero-inner">
    <h1 class="h1">{{ component.title }}</h1>
    {% include '../breadcrumbs/breadcrumbs.twig' with { data: breadcrumbs } %}
  </div>
  {% if component.image %}
    <div class="standard-hero-img" style="background-image: url('{{ component.image.src }}');">
      {% if component.image.credit %}
        <div class="photo-credit">{{ component.image.credit }}</div>
      {% endif %}
    </div>
  {% endif %}
</section>

<!-- components/stats-three-up/stats-three-up.twig -->
{% set component = stats_three_up %}

<section class="stats-three-up {{component.title is defined ? '' : '-no-title'}}" data-columns="{{component.items.length}}">
  <div class="stats-three-up-inner">

    <div class="stats-three-up-border"></div>

    {% if component.title %}

      <h2 class="stats-three-up-title h3">{{component.title}}</h2>

    {% endif %}

    <div class="stats-three-up-items">
      {% for item in component.items %}
      <div class="stats-three-up-item">

        {% if item.link %}

          <a href="{{item.link.url}}" class="stats-three-up-item-link">
            <div class="stats-three-up-item-title-wrapper">
              <div class="stats-three-up-item-title h1">{{item.title}}</div>
            </div>
            <p class="stats-three-up-item-text h6">{{item.text}}</p>
          </a>

        {% else %}

          <div class="stats-three-up-item-title">{{item.title}}</div>
          <p class="stats-three-up-item-text">{{item.text}}</p>

        {% endif %}

      </div>
    {% endfor %}
    </div>

  </div>
</section>

<!-- components/table/table.twig -->
{% set component = table %}

<section class="table">

  <h2 class="h4 table-header">{{ table.header }}</h2>

  <table class="table-wrapper wysiwyg-content" data-columns="{{ table.data_columns }}">

  {% if table.table_headers.length %}
    <thead>
      <tr>
        {% for header in table.table_headers %}
        <th>{{header.title}}</th>
        {% endfor %}
      </tr>
    </thead>
  {% endif %}

    <tbody>
      {% for row in table.table_rows %}
      <tr>
        {% for column in row %}
        <td data-title="{{ column.data_title }}">{{column.text}}</td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>

  {% if table.button %}
  <a class="btn table-button" href="{{table.button.url}}"
    {{ table.button.target == '_blank' ? ' target="_blank" rel="noopener nofollow"'}}>{{table.button.text}}</a>
  {% endif %}
</section>

<!-- components/tags/tags.twig -->

{% set data = tags %}

<section class="tags">
  <div class="tags-inner">
    <div class="tags-content">
      <ul>
        {% for tag in data.label %}
          <li><a href="{{tag.url}}">{{tag.text}}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
</section>

<!-- components/testimonial-slider/testimonial-slider.twig -->
{% import '../../macros.twig' as macros %}

{% set component = testimonial_slider %}

{# if optional text intro items, give it gray bg area at top #}
{% if component.eyebrow or component.title or component.intro_text %}
  {% set intro = true %}
{% endif %}

{# if more than one testimonial, make it a slider #}
{% if component.testimonials|length > 1 %}
  {% set slick = true %}
{% endif %}

<section class="testimonial-slider" {{ intro ? 'data-intro="true"'}}>

  {% if intro %}
    <div class="testimonial-slider-inner">
      <div class="testimonial-slider-text">

        {% if component.eyebrow %}
          <div class="eyebrow -centered">{{ component.eyebrow }}</div>
        {% endif %}

        {% if component.title %}
          <h2 class="h3">{{ component.title }}</h2>
        {% endif %}

        {% if component.intro_text %}
          <p>{{ component.intro_text }}</p>
        {% endif %}

      </div>
    </div>
  {% endif %}

  <div class="testimonial-slider-container {{ slick ? '-is-slider' }}">
    <div class="testimonial-slider-slick" {{ slick ? 'data-slider="true"' }}>

      {% for testimonial in component.testimonials %}
        <div class="testimonial-slide" {{ testimonial.image ? 'data-img="true"' }}>
          <div class="testimonial-slide-inner">
            {% if testimonial.image %}
              <div class="testimonial-slide-img">
                <img src="{{ testimonial.image.src }}" alt="{{ testimonial.image.alt }}">
              </div>
            {% endif %}
            <blockquote>
              <p>"{{ testimonial.quote }}"</p>
              <cite>{{ testimonial.attribution_name }}</cite>
              <div class="attribution-title">{{ testimonial.attribution_title }}</div>
              {% if testimonial.linkedin %}
                <div class="testimonial-link">
                  <a href="#" class="icon-linkedin"><span class="sr-text">LinkedIn</span></a>
                </div>
              {% endif %}
            </blockquote>
          </div>
        </div>
      {% endfor %}

    </div>
  </div>

  {% if component.cta_link %}
    <div class="testimonial-slider-cta">
      <a href="{{ component.cta_link.url }}" class="-arrow-link"><span>{{ component.cta_link.text }}</span></a>
    </div>
  {% endif %}

</section>

<!-- components/text-columns/text-columns.twig -->

{% set component = text_columns %}

<section class="text-columns">

  <div class="text-columns-inner">
    {% if component.has_social_share %}
      <div class="text-columns-social">
        {% include '../social-share/social-share.twig' %}
      </div>
    {% endif %}
    {% for column in component.columns %}
      <div class="text-columns-column">
        <div class="text-column-title">{{ column.title }}</div>
        <div class="text-column-text">{{ column.text }}</div>
      </div>
    {% endfor %}
  </div>


</section>

<!-- components/topics-accordion/topics-accordion.twig -->
{% import '../../macros.twig' as macros %}
{# {% set topics_accordionId = uniqid() %} #}
{% set component = topics_accordion %}

{% import '../../macros.twig' as macros %}
<section class="topics-accordion">

  <h2 class="topics-accordion-title h3">{{component.title}}</h2>

  {% if component.description %}
    <p class="topics-accordion-description">{{component.description}}</p>
  {% endif %}

  <ul class="topics-accordion-items">
    {% for item in component.items %}
      <li class="topics-accordion-item" data-expanded="false">
        <h3 class="h5">
          <button id="topics-accordion-{{ topics_accordionId ~ '-' ~ loop.index }}" class="topics-accordion-trigger h5" aria-expanded="false" aria-controls="topics-accordion-item-{{ topics_accordionId ~ '-' ~ loop.index }}">{{ item.title }}</button>
        </h3>
        <div id="topics-accordion-item-{{ topics_accordionId ~ '-' ~ loop.index }}" class="topics-accordion-content" role="region" aria-labelledby="topics-accordion-{{ topics_accordionId ~ '-' ~ loop.index }}" aria-hidden="true">

          <div class="topics-accordion-item-container">
            <div class="topics-accordion-item-section -main">
              {% if item.button %}
                {{
                  macros.button_link({
                   href: item.button.url,
                   text: item.button.text,
                   external: item.button.external,
                   gated: item.button.gated,
                   classes: ['topics-accordion-item-button']
                 })
               }}
              {% endif %}
              {% if item.link %}
                <div class="topics-accordion-item-link">
                  {{
                    macros.arrow_link({
                      href: item.link.url,
                      text: item.link.text,
                      external: item.link.external,
                      gated: item.link.gated,
                      classes: ['topics-accordion-item-link']
                    })
                  }}

                  <button class="tooltip" [data-animation='scale' ]="]" data-tippy-content="Network and interact with leading minds in your profession">?<span class="sr-text">More Information</span></button>
                </div>
              {% endif %}

            </div>
            <div class="topics-accordion-item-section">
              {% if item.table %}
                <table class="topics-accordion-item-table">
                  <tr>
                    {% for row in item.table %}
                      <td class="link">
                        {{
                    macros.arrow_link({
                      href: row.link.url,
                      text: row.link.text,
                      external: row.link.external,
                      gated: row.link.gated,
                      classes: ['topics-accordion-item-table-link']
                    })
                  }}
                      </td>
                    {% endfor %}
                  </tr>
                </table>
              {% endif %}
            </div>
          </div>
        </div>
      </li>
    {% endfor %}
  </ul>

</section>

<!-- components/topics-columns/topics-columns.twig -->

{% set component = topics_columns %}

<section class="topics-columns">
  <div class="topics-columns-featured">
    <div class="topics-columns-item">
      <div class="topics-columns-item-img-container">
        <a href="{{ component.feature.url }}" class="topics-columns-item-img -featured" style="background-image: url('{{ component.feature.image.src }}')">
          <span class="sr-text">{{ component.feature.image.alt }}</span>
        </a>
      </div>
      <div class="topics-columns-item-text">
        {% if component.feature.sponsored %}
          <div class="topics-columns-item-sponsored">
            {{ component.feature.sponsored }}
          </div>
        {% endif %}
        <div class="eyebrow">{{ component.feature.eyebrow }}</div>
        <h2 class="h4">
          <a href="{{ component.feature.url }}" class="topics-columns-item-link">{{ component.feature.title }}</a>
        </h2>
        <p>{{ component.feature.description }}</p>
      </div>
    </div>
  </div>
  <div class="topics-columns-references">
    <div class="topics-columns-references-2">
      {% for item in component.references_2 %}
        <div class="topics-columns-item">
          {% if item.sponsored %}
            <div class="topics-columns-item-sponsored">
              {{ item.sponsored }}
            </div>
          {% endif %}
          {% if item.image %}
            <div class="topics-columns-item-img-container">
              <a href="{{ item.url }}" class="topics-columns-item-img">
                <img src="{{ item.image.src }}" alt="{{ item.image.alt }}">
              </a>
            </div>
          {% endif %}
          <div class="topics-columns-item-text">
            <div class="eyebrow">{{ item.eyebrow }}</div>
            <h3 class="h5">
              <a href="{{ item.url }}" class="topics-columns-item-link">{{ item.title }}</a>
            </h3>
            <p>{{ item.description }}</p>
          </div>
        </div>
      {% endfor %}
    </div>
    <div class="topics-columns-references-3">
      {% for item in component.references_3 %}
        <div class="topics-columns-item">
          {% if item.image %}
            <div class="topics-columns-item-img-container">
              <a href="{{ item.url }}" class="topics-columns-item-img">
                <img src="{{ item.image.src }}" alt="{{ item.image.alt }}">
              </a>
            </div>
          {% endif %}
          <div class="topics-columns-item-text">
            <div class="eyebrow">{{ item.eyebrow }}</div>
            <h3 class="h5{{ item.gated ? ' -gated' }}">
              <a href="{{ item.url }}" class="topics-columns-item-link">{{ item.title }}</a>
            </h3>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- components/topics-grid/topics-grid.twig -->
{% set component = topics_grid %}
<section class="topics-grid">
  <div class="topics-grid-inner">
    {% if component.title %}
      <h2 class="topics-grid-title h4 -center">{{component.title}}</h2>
    {% endif %}
    <div class="topics-grid-items">
      {% for item in component.items %}
        <div class="topics-grid-item js-link-event" data-animation="fadeInUp" data-animation-duration="1500">
          <div class="topics-grid-item-image-wrapper">
            <div class="topics-grid-item-image" style="background-image: url('{{ item.image.src }}')"></div>
          </div>
          <a href="{{item.link.url}}" class="topics-grid-item-title h5 js-link-event-link">{{item.title}}</a>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- components/topics-news-list/topics-news-list.twig -->
{% import '../../macros.twig' as macros %}

{% set component = topics_news_list %}

<div class="topics-news-list">
    <div class="topics-news-list-inner">
        <div class="topics-news-list-items">
            {% for item in component.section_1 %}
                <div class="topics-news-list-item js-link-event">
                    {% if item.image %}
                        <div class="topics-news-list-item-image">
                            <div class="topics-news-list-item-image-wrapper">
                                <img src="{{ item.image.src }}" alt="{{ item.image.alt }}">
                            </div>
                        </div>
                    {% endif %}
                    <div class="topics-news-list-item-content">
                        <div class="eyebrow topics-news-list-item-eyebrow">{{ item.eyebrow }}</div>
                        <a href="{{ item.link.url }}"
                           class="h5 topics-news-list-item-title js-link-event-link">{{ item.title }}</a>
                        <p class="topics-news-list-item-text">{{ item.text }}</p>
                        <div class="topics-news-list-item-metadata">
                            {% if item.metadata.date %}
                                <span class="topics-news-list-item-metadata-date {{ item.metadata.date.icon ? '-date-icon' }}">{{ item.metadata.date.text }}</span>
                            {% endif %}
                            {% if item.metadata.shield %}
                                <span class="topics-news-list-item-metadata-shield">{{ item.metadata.shield }}</span>
                            {% endif %}
                            {% if item.metadata.location %}
                                <span class="topics-news-list-item-metadata-location -gray">{{ item.metadata.location }}</span>
                            {% endif %}
                            {% if item.metadata.event_type %}
                                <span class="topics-news-list-item-metadata-event-type -gray">{{ item.metadata.event_type }}</span>
                            {% endif %}
                            {% if item.metadata.credits %}
                                <span class="topics-news-list-item-metadata-credits">
                  <span class="-credits-text">{{ 'credits'|t }}</span>
                  {% for credit in item.metadata.credits %}
                      <span class="topics-news-list-item-metadata-credit">{{ credit.text }}</span>
                  {% endfor %}
                </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    {% if component.promo %}
        {% include '../promo-full-width/promo-full-width.twig' with { promo_full_width: component.promo } %}
    {% endif %}

    {% if component.section_2 %}
        <div class="topics-news-list-inner">
            <div class="topics-news-list-items">
                {% for item in component.section_2 %}
                    <div class="topics-news-list-item js-link-event">
                        {% if item.image %}
                            <div class="topics-news-list-item-image">
                                <div class="topics-news-list-item-image-wrapper">
                                    <img src="{{ item.image.src }}" alt="{{ item.image.alt }}">
                                </div>
                            </div>
                        {% endif %}
                        <div class="topics-news-list-item-content">
                            <div class="eyebrow topics-news-list-item-eyebrow">{{ item.eyebrow }}</div>
                            <a href="{{ item.link.url }}"
                               class="h5 topics-news-list-item-title js-link-event-link">{{ item.title }}</a>
                            <p class="topics-news-list-item-text">{{ item.text }}</p>
                            <div class="topics-news-list-item-metadata">
                                {% if item.metadata.date %}
                                    <span class="topics-news-list-item-metadata-date {{ item.metadata.date.icon ? '-date-icon' }}">{{ item.metadata.date.text }}</span>
                                {% endif %}
                                {% if item.metadata.shield %}
                                    <span class="topics-news-list-item-metadata-shield">{{ item.metadata.shield }}</span>
                                {% endif %}
                                {% if item.metadata.location %}
                                    <span class="topics-news-list-item-metadata-location -gray">{{ item.metadata.location }}</span>
                                {% endif %}
                                {% if item.metadata.event_type %}
                                    <span class="topics-news-list-item-metadata-event-type -gray">{{ item.metadata.event_type }}</span>
                                {% endif %}
                                {% if item.metadata.credits %}
                                    <span class="topics-news-list-item-metadata-credits">
                    <span class="-credits-text">{{ 'credits'|t }}</span>
                    {% for credit in item.metadata.credits %}
                        <span class="topics-news-list-item-metadata-credit">{{ credit.text }}</span>
                    {% endfor %}
                  </span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}

    {% if component.link %}
        <div class="topics-news-list-button">
            <div class="topics-news-list-button-inner">
                {{ macros.button_link({
                    href: component.link.url,
                    text: component.link.text,
                    external: component.link.external,
                    gated: component.link.gated
                }) }}
            </div>
        </div>
    {% endif %}
</div>

<!-- components/trending-news-topics/trending-news-topics.twig -->

{% set data = trending_news_topics %}

<section class="trending-news-topics -bg-left">
  <div class="trending-news-topics-inner">
    <h2 class="trending-news-topics-title h4">{{data.title}}</h2>
    <div class="trending-news-topics-container">
      {% for column in data.columns %}
        <div class="trending-news-topics-item js-link-event">

            <h1 class="trending-news-topics-number-{{column.number}} h1">{{column.number}}</h1>
            {% if column.image %}
            <div class="trending-news-topics-image" >
              <img src="{{column.image.src}}" alt="{{column.image.alt}}">
            </div>
            {% endif %}
            <div class="trending-news-topics-content">
              <p class="trending-news-topics-eyebrow">{{column.topic}}</p>
              <a href="{{column.link.href}}" class="trending-news-topics-summary js-link-event-link">{{column.summary}}</a>
            </div>

        </div>
      {% endfor %}
    </div>
  </div>
</section>

{% import '../../macros.twig' as macros %}
{% set data = video_component %}

<!-- components/video-component/video-component.twig -->
<article class="video-component">

    <img class="dots" src="../images/white-dots.svg" alt="ASCE dots">
    <div class="video-component-bg-color">
        {% if data.bg %}
        <img src="{{ data.bg }}" class="video-component-bg-img" alt="Background Image">
        {% endif %}
    </div>

    <div class="video-component-inner">

        <div class="video-component-intro">

        <h2 class="h3 -white">{{ data.title }}</h2>

        {% if data.text %}
            <div class="video-component-text wysiwyg-content">{{ data.text }}</div>
        {% endif %}

        {% if data.button %}
            <div class="video-component-button">
            {{ macros.button_link({
                href: data.button.url,
                text: data.button.text,
                classes: ['-small -white']
                })
            }}
            </div>
        {% endif %}

        </div>

        <div class="video-component-video">

        <div class="video-container">

            {% if data.video.type == "brightcove" %}
            {# BRIGHTCOVE PLAYER #}
            <iframe src="https://players.brightcove.net/1752604059001/VJCJXL3Ye_default/index.html?videoId={{ data.video.id }}" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" allow="encrypted-media"></iframe>
            {% elseif data.video.type == "youtube" %}
            {# YOUTUBE PLAYER #}
            <iframe src="https://www.youtube.com/embed/{{ data.video.id }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            {% endif %}

        </div>

        </div>

    </div>

</article>

<!-- components/video-with-text/video-with-text.twig -->
{% import '../../macros.twig' as macros %}

{% set component = video_with_text %}

<section class="video-with-text" data-video-position="{{ component.video_position }}">
  <div class="video-with-text-inner">
    <div class="video-with-text-video">
      <div class="video-container">

        {% if component.video.type == "brightcove" %}
          {# BRIGHTCOVE PLAYER #}
          <iframe src="https://players.brightcove.net/1752604059001/VJCJXL3Ye_default/index.html?videoId={{ component.video.id }}" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen=""></iframe>
        {% else %}
          {# YOUTUBE PLAYER #}
          <iframe src="https://www.youtube.com/embed/{{ component.video.id }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        {% endif %}

      </div>
    </div>
    <div class="video-with-text-content">
      {% if component.content.eyebrow %}
        <div class="eyebrow">{{ component.content.eyebrow }}</div>
      {% endif %}
      <h2 class="h4">{{ component.content.title }}</h2>
      {% if component.content.wysiwyg %}
        <div class="wysiwyg-content">
          {{ component.content.wysiwyg }}
        </div>
      {% endif %}
      {% if component.content.link %}
        {{ macros.arrow_link(
          {
            href: component.content.link.url,
            text: component.content.link.text,
            external: component.content.link.external,
            gated: component.content.link.gated
          }
        )
        }}
      {% endif %}
    </div>
  </div>

  {% if component.sponsors %}
    {% include "../sponsors/sponsors.twig" with { sponsors : component.sponsors } %}
  {% endif %}
</section>

<div class="wufoo-form-asce-container">
  <iframe src="//forms.asce.org/webform/asce_styleguide/share/iframe-resizer/4.2.10" title="ASCE StyleGuide | ASCE Forms" class="webform-share-iframe" frameborder="0" allow="geolocation; microphone; camera" allowtransparency="true" allowfullscreen="true" style="width:1px;min-width:100%"></iframe>
  <script src="//cdn.jsdelivr.net/gh/davidjbradshaw/[email protected]/js/iframeResizer.min.js"></script>
  <script>iFrameResize({}, '.webform-share-iframe');</script>
</div>

{% set data = zoomable_image %}

<!-- components/zoomable-image/zoomable-image.twig -->
<a href="https://placehold.co/2500x1666" class="zoomable-image mfp-with-zoom">
  <figure class="wysiwyg-image -center">
    <img src="https://placehold.co/900x600" alt="IMAGE CENTER ALT">
    <cite class="wysiwyg-image-photo-credit">Ian Hollands</cite>
    <figcaption>Optional caption</figcaption>
  </figure>
</a>

{% import '../../macros.twig' as macros %}

<!-- components/site-header/site-header.twig -->
<header class="site-header {{site_header.logged_in ? '-logged-in' : ''}}">
    <div class="site-header-inner">

        {# Main Nav #}
        <nav class="site-header-nav" aria-label="{{ 'Main Site Navigation'|t }}">
            <div class="site-header-logo">
                <a href="/">
                    <img src="{{ site_header.logo.image }}" alt="{{ site_header.logo.alt }}">
                </a>
            </div>
            <div class="site-header-nav-wrapper">
                <ul class="site-header-utility-nav" aria-role="Navigation">
                {% for item in site_header.utility_nav %}
                    <li class="site-header-utility-nav-item {{ item.login ? ' -login' }}{{ item.join ? ' -join' }}">
                    <a
                    href="{{ item.url }}"
                    target="{{ item.target }}"
                    class="site-header-utility-nav-link {{ item.login ? ' -login' }}"
                    data-children="{{ item.dropdown_columns or item.user_dropdown ? 'true' : 'false' }}"
                    >
                    <span>{{ item.text }}</span>
                    {% if site_header.logged_in and item.user_dropdown.alerts %}
                        <span class="alert-count">{{ item.user_dropdown.alerts|length }}</span>
                    {% endif %}
                    </a>

                    {% if item.user_dropdown %}

                    <ul class="site-header-utility-nav-dropdown{{ site_header.logged_in and item.login ? ' -user-dropdown' }}">
                        <li class="site-header-utility-nav-dropdown-block">
                        
                        {# Top Links #}
                        <ul class="user-dropdown-top-nav">
                            <li class="user-dropdown-welcome">Welcome, {{ item.text }}!</li>
                            {% for item in item.user_dropdown.nav %}
                            <li class="user-dropdown-nav">
                                <a href="{{ item.link }}" {{ item.text == "Logout" ? 'class="-bold-link"' }}><span>{{ item.text }}</span></a>
                            </li>
                            {% endfor %}
                        </ul>

                        {# Member ID #}
                        <div class="member-id">
                            {% if site_header.logged_in and item.member == true %}
                            <a href="{{ item.user_dropdown.member_id.url }}">Member #{{ item.user_dropdown.member_id.id }}</a>
                            {% else %}
                            <div class="member-status"><strong>Member Status:</strong> Non-member</div>
                            {% endif %}                    
                        </div>
                        
                        {# Icon Links #}
                        {% if site_header.logged_in and item.member == true %}
                            
                            <ul class="member-section">
                            {% for item in item.user_dropdown.icon_blocks %}
                                <li>  
                                {% if item.type == 'membership' %}
                                    <span class="circle-icon icon-user"></span>
                                {% elseif item.type == 'institute' %}
                                    <span class="circle-icon -shield">
                                    <img src="{{ item.image.src }}" alt="{{ item.image.alt }}">
                                    </span>
                                {% elseif item.type == 'location' %}
                                    <span class="circle-icon icon-pin"></span>
                                {% elseif item.type == 'PDH' %}
                                    <div class="remaining">
                                    <span class="circle-icon">{{ item.remaining }}</span> of <span class="total">10</span>
                                    </div>
                                {% endif %}
                                <div>
                                    <a href="{{ item.url }}"><span>{{ item.text }}</span></a>
                                </div>
                                </li>
                            {% endfor %}
                            </ul>

                        {% else %}

                            <div class="non-member-cta">
                            <div class="non-member-cta-header">Advance your career</div>
                            <div class="non-member-cta-inner">
                                <div class="left-text">                        
                                <p>ASCE membership revitalizes you with an energized community of peers and world-class resources.</p>
                                </div>
                                <div class="right-cta">
                                <a href="#" class="btn -small -gray">Join ASCE</a>
                                </div>
                            </div>
                            </div>

                        {% endif %}

                        {# Alerts #}
                        {% if item.user_dropdown.alerts  %}

                            <div class="user-alerts-header">
                            <span>Alerts</span>
                            <span class="alert-count">{{ item.user_dropdown.alerts|length }}</span>
                            </div>

                            <ul class="user-alerts">
                            {% for alert in item.user_dropdown.alerts %}
                                <li>
                                <a href="{{ alert.alert_url }}">
                                    <p><span style="text-decoration: underline;">Join ASCE</span> to advance your career, earn free PDHs, access technical resources, and get valuable discounts.</p>
                                </a>
                                </li>
                            {% endfor %}
                            </ul>

                            {% if item.user_dropdown.help_link %}                    
                            <div class="help-link">
                                <a href="{{ item.user_dropdown.help_link.url }}"><span>{{ item.user_dropdown.help_link.text }}</span></a>
                            </div>
                            {% endif %}
                            
                        {% endif %}

                        </li>
                    </ul>              

                    {% elseif item.dropdown_columns %}
                    
                    <ul class="site-header-utility-nav-dropdown">
                        
                        {% for content_block in item.dropdown_columns %}
                            <li class="site-header-utility-nav-dropdown-block">
                            
                            {% if content_block.heading %}
                                <div class="site-header-utility-nav-dropdown-block-heading">{{ content_block.heading }}</div>
                            {% endif %}

                            <ul class="site-header-utility-nav-dropdown-items">
                                {% for child in content_block.children %}
                                <li class="site-header-utility-nav-dropdown-item">
                                <a
                                href="{{ child.link.url }}"
                                target="{{ item.target }}"
                                data-active="{{ child.current ? 'true' : 'false' }}"
                                class="{{ child.link.arrow_link ? '-arrow-link' : child.link.bold ? '-bold-link' : ''}}"
                                ><span>{{ child.link.text }}</span></a>
                                </li>
                                {% endfor %}
                            </ul>
                            </li>

                            {% if content_block.button %}
                            {{ macros.button_link({
                                href: content_block.button.url,
                                text: content_block.button.text,
                                external: content_block.button.external,
                                gated: content_block.button.gated,
                                classes: ['site-header-utility-nav-dropdown-button']
                                })
                            }}
                            {% endif %}

                        {% endfor %}
                        </ul>
                    
                    {% endif %}
                    </li>
                {% endfor %}
                </ul>

                <ul class="site-header-main-nav">
                {% for item in site_header.main_nav %}
                    <li class="site-header-item">
                    <a
                        href="{{ item.url }}"
                        target="{{ item.target }}"
                        data-active="{{ item.current ? 'true' : 'false' }}"
                        data-children="{{ item.dropdown_columns ? 'true' : 'false' }}"
                    >{{ item.text }}</a>
                    {% if item.dropdown_columns %}
                        <ul class="site-header-main-nav-dropdown {{ item.publication_and_news ? '-publication-and-news' : item.communities ? '-communities' : item.careers_and_growth ? '-careers' : ''}} {{ site_header.logged_in ? '-logged-in' : ''}}">

                        <div class="site-header-main-nav-dropdown-column-1">
                            {% for content_block in item.dropdown_columns.column_1 %}
                            <div class="site-header-main-nav-dropdown-block {{ item.communities and loop.first ? '-column-1'}}">

                            {% if content_block.heading %}
                                <div class="site-header-main-nav-dropdown-block-heading">{{content_block.heading}}</div>
                            {% endif %}

                            <ul class="site-header-main-nav-dropdown-items">
                                {% for child in content_block.children %}
                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="{{ child.link.url }}"
                                    target="{{ item.target }}"
                                    data-active="{{ child.current ? 'true' : 'false' }}"
                                    class="{{ child.link.arrow_link ? '-arrow-link' : child.link.bold ? '-bold-link' : ''}}"
                                ><span>{{ child.link.text }}</span></a>

                                {% if child.description %}
                                    <p>{{ child.description }}</p>
                                {% endif %}
                                </li>
                            {% endfor %}
                            </ul>
                            </div>
                        {% endfor %}
                        </div>

                        {% if item.dropdown_columns.column_2 %}
                        <div class="site-header-main-nav-dropdown-column-2">
                            {% for content_block in item.dropdown_columns.column_2 %}
                            <div class="site-header-main-nav-dropdown-block">

                            {% if content_block.heading %}
                                <div class="site-header-main-nav-dropdown-block-heading">{{content_block.heading}}</div>
                            {% endif %}

                            <ul class="site-header-main-nav-dropdown-items">
                                {% for child in content_block.children %}
                                <li class="site-header-main-nav-dropdown-item">

                                    <a
                                    href="{{ child.link.url }}"
                                    target="{{ item.target }}"
                                    data-active="{{ child.current ? 'true' : 'false' }}"
                                    class="{{ child.link.arrow_link ? '-arrow-link' : child.link.bold ? '-bold-link' : ''}}"
                                ><span>{{ child.link.text }}</span></a>

                                {% if child.description %}
                                    <p>{{ child.description }}</p>
                                {% endif %}
                                </li>
                            {% endfor %}
                            </ul>
                            </div>
                        {% endfor %}
                        </div>
                        {% endif %}
                        
                        {% if item.dropdown_columns.column_3 %}
                        <div class="site-header-main-nav-dropdown-column-3">
                        {% for content_block in item.dropdown_columns.column_3 %}
                        <div class="site-header-main-nav-dropdown-block">

                            {% if content_block.heading %}
                            <div class="site-header-main-nav-dropdown-block-heading">{{content_block.heading}}</div>
                            {% endif %}

                            <ul class="site-header-main-nav-dropdown-items">
                            {% for child in content_block.children %}
                            <li class="site-header-main-nav-dropdown-item">

                                <a
                                href="{{ child.link.url }}"
                                target="{{ item.target }}"
                                data-active="{{ child.current ? 'true' : 'false' }}"
                                class="{{ child.link.arrow_link ? '-arrow-link' : child.link.bold ? '-bold-link' : ''}}"
                                ><span>{{ child.link.text }}</span></a>

                                {% if child.description %}
                                <p>{{ child.description }}</p>
                                {% endif %}
                            </li>
                            {% endfor %}
                            </ul>
                        </div>
                        {% endfor %}
                        </div>
                        {% endif %} 
                        </ul>
                    {% endif %}
                    </li>
                {% endfor %}

                <li role="none" class="site-header-main-nav-item">
                    <a href="#" class="site-header-main-nav-search-trigger js-search-open"><span class="sr-text">Search</span></a>
                </li>

                <li role="none" class="site-header-main-nav-item">
                    <a href="#" class="site-header-main-nav-side-nav js-side-nav-trigger"><span class="sr-text">Side Navigation</span></a>
                </li>
                </ul>
            </div>
        </nav>
    </div>

    <div class="site-header-side-nav js-side-nav" data-menu="closed" aria-hidden="true">
        <div class="site-header-side-nav-top">
            {# Close Button #}
            <button class="site-header-side-nav-close icon-close js-side-nav-close"><span class="sr-text">Close</span></button>

        </div>
        
        <div class="site-header-side-nav-inner">
        
            {# Nav #}
            <nav class="site-header-side-nav-nav" aria-label="Side Navigation">
            <div class="site-header-side-nav-links">
                {% for link in site_header.side_nav.links %}
                <div class="site-header-side-nav-link">
                    <a href="{{ link.url }}">{{ link.text }}</a>
                </div>
                {% endfor %}
            </div>

            {% if site_header.side_nav.button %}
                <div class="site-header-side-nav-button">
                    <a href="{{ site_header.side_nav.button.url }}" class="btn -white">{{ site_header.side_nav.button.text }}</a>
                </div>
            {% endif %}
            
            {% if site_header.side_nav.social_links %}
            <nav class="site-header-side-nav-social-links" aria-label="Social Media Links">
                <ul>
                {% for service in site_header.side_nav.social_links %}
                    <li>
                    <a
                        class="icon-{{ service.name | lower }}"
                        href="{{service.name | lower == 'mail' ? 'mailto:' : ''}}{{ service.url }}"
                        target="_blank"
                        rel="noopener"
                    >
                        <span class="sr-text">{{ service.name }}</span>
                    </a>
                    </li>
                {% endfor %}
                </ul>
            </nav>
            {% endif %}
            </nav>

        </div>
    </div>

    <div class="site-header-search-container -js-container">
        <div class="site-header-search">

            {# Close Button #}
            <button class="site-header-search-close icon-close js-site-header-search-close"><span class="sr-text">Close</span></button>

            <div class="site-header-search-inner">
                <label for="site-header-search-input" class="site-header-search-label">Search</label>
                <div class="site-header-search-wrapper">
                    <input id="site-header-search-input" type="text" name="" value="" placeholder="" class="site-header-search-input">
                    <button class="site-header-search-submit">
                    <span class="sr-text">Search</span></button>
                    {% if site_header.search.link %}
                        <div class="site-header-search-link">
                        {{ macros.arrow_link(
                            {
                            href: site_header.search.link.url,
                            text: site_header.search.link.text,
                            external: site_header.search.link.external,
                            gated: site_header.search.link.gated
                            }
                        )
                        }}
                        </div>
                    {% endif %}

                </div>
            </div>
        </div>
    </div>
</header>

{% include '../../components/mobile-menu/mobile-menu.twig' %}

<!-- components/mobile-header/mobile-header.twig -->
<header class="mobile-header {{ mobile_header.logged_in ? '-logged-in' : '' }}">
    <div class="mobile-header-inner">
        <a href="/">
            <img src="{{ mobile_header.logo.image }}" alt="{{ mobile_header.logo.alt }}" class="mobile-header-logo">
        </a>
        <div class="mobile-header-nav" aria-label="{{ 'Main Site Navigation'|t }}">
            <a href="#" class="btn -small">Join</a>
            <button type="button" class="mobile-menu-trigger js-mobile-menu-toggle">
                <span class="sr-text">Mobile Menu</span>
            </button>
        </div>
    </div>
</header>

<!-- components/mobile-menu/mobile-menu.twig -->
<div class="mobile-menu" data-level="1" aria-hidden="true">

  <div class="mobile-menu-top">

    {# Close Button #}
    <button class="mobile-menu-close icon-close js-mobile-menu-close"><span class="sr-text">Close</span></button>

    {# Back Button #}
    <button class="mobile-menu-back js-mobile-menu-back">Back</button>

  </div>

  <div class="mobile-menu-inner">

    {# Nav #}
    <nav class="mobile-menu-nav" aria-label="Side Navigation">

      {# Main #}
      <ul class="mobile-menu-main">

        {# Search Input #}
        <div class="mobile-menu-main-search">
          <label for="mobile-menu-main-search-input" class="sr-text">Search</label>
          <input id="mobile-menu-main-search-input" type="text" name="" value="" placeholder="Search" class="mobile-menu-main-search-input">
          <button class="mobile-menu-main-search-submit">
            <span class="sr-text">Search</span></button>
        </div>

        {% for item in site_header.main_nav %}

          <li class="mobile-menu-main-nav-link">
            {# Top-Level Link #}
            <a class="mobile-menu-main-link{{ item_current ? ' -active' }}" href="{{ item.url }}" target="{{ item.target }}">{{ item.text }}</a>

            {# Second Level #}
            {% if item.dropdown_columns %}

              {# Next Link #}
              <a class="mobile-menu-main-next icon-chevron js-mobile-menu-next" href="#">
                <span class="sr-text">View Menu</span>
              </a>

              {# "Dropdown" #}
              <div class="mobile-menu-main-panel" aria-hidden="true">

                {# Children #}
                <ul>
                  {% if item.dropdown_columns.column_1 %}
                    {% for content_block in item.dropdown_columns.column_1 %}
                      <li>
                        {% if content_block.heading %}
                          <div class="mobile-menu-column-heading">{{ content_block.heading }}</div>
                        {% endif %}

                        {% for child in content_block.children %}
                        <div class="mobile-menu-column-link">
                          <a {{ child.active ? 'class="-active" ' }} href="{{ child.link.url }}" target="{{ child.link.target }}">{{ child.link.text }}</a>
                        </div>
                        {% endfor %}
                      </li>
                    {% endfor %}
                  {% endif %}

                    {% if item.dropdown_columns.column_2 %}
                      {% for content_block in item.dropdown_columns.column_2 %}
                      <li>
                        {% if content_block.heading %}
                          <div class="mobile-menu-column-heading">{{ content_block.heading }}</div>
                        {% endif %}

                        {% for child in content_block.children %}
                        <div class="mobile-menu-column-link">
                          <a {{ child.active ? 'class="-active" ' }} href="{{ child.link.url }}" target="{{ child.link.target }}">{{ child.link.text }}</a>
                        </div>
                        {% endfor %}
                      </li>
                    {% endfor %}
                  {% endif %}

                    {% if item.dropdown_columns.column_3 %}
                      {% for content_block in item.dropdown_columns.column_3 %}
                      <li>
                        {% if content_block.heading %}
                          <div class="mobile-menu-column-heading">{{ content_block.heading }}</div>
                        {% endif %}

                        {% for child in content_block.children %}
                        <div class="mobile-menu-column-link">
                          <a {{ child.active ? 'class="-active" ' }} href="{{ child.link.url }}" target="{{ child.link.target }}">{{ child.link.text }}</a>
                        </div>
                        {% endfor %}
                      </li>
                    {% endfor %}
                  {% endif %}
                </ul>

              </div>
            {% endif %}

          </li>

        {% endfor %}

        {% for item in site_header.utility_nav %}

        <li class="mobile-menu-utility-nav-link">
          {# Top-Level Link #}
          <a class="mobile-menu-main-link{{ item.current ? ' -active' }}" href="{{ item.url }}" target="{{ item.target }}">{{ item.text }}</a>

          {# Second Level #}
          {% if item.dropdown_columns %}

            {# Next Link #}
            <a class="mobile-menu-main-next icon-chevron js-mobile-menu-next" href="#">
              <span class="sr-text">View Menu</span>
            </a>

            {# "Dropdown" #}
            <div class="mobile-menu-main-panel" aria-hidden="true">

              {# Children #}
              <ul>
                {% for column in item.dropdown_columns %}
                  <li>
                    {% if column.heading %}
                      <div class="mobile-menu-column-heading">{{ column.heading }}</div>
                    {% endif %}

                    {% for child in column.children %}
                    <div class="mobile-menu-column-link">
                      <a {{ child.active ? 'class="-active" ' }} href="{{ child.link.url }}" target="{{ child.link.target }}">{{ child.link.text }}</a>
                    </div>
                    {% endfor %}
                  </li>
                {% endfor %}
              </ul>

            </div>
          {% endif %}

        </li>
          
        {% endfor %}

        {% for item in site_header.side_nav.links %}

        <li class="mobile-menu-side-nav-link">
          <a class="mobile-menu-main-link{{ item.current ? ' -active' }}" href="{{ item.url }}" target="{{ item.target }}">{{ item.text }}</a>
        </li>
          
        {% endfor %}

        {% if site_header.side_nav.button %}
          <div class="mobile-menu-side-nav-button">
            <a href="{{ site_header.side_nav.button.url }}" class="btn -white">{{ site_header.side_nav.button.text }}</a>
          </div>
        {% endif %}
        
        {% if site_header.side_nav.social_links %}
          <nav class="mobile-menu-side-nav-social-links" aria-label="Social Media Links">
            <ul>
              {% for service in site_header.side_nav.social_links %}
                <li>
                  <a
                    class="icon-{{ service.name | lower }}"
                    href="{{service.name | lower == 'mail' ? 'mailto:' : ''}}{{ service.url }}"
                    target="_blank"
                    rel="noopener"
                  >
                    <span class="sr-text">{{ service.name }}</span>
                  </a>
                </li>
              {% endfor %}
            </ul>
          </nav>
        {% endif %}
      </ul>

    </nav>
  </div>
</div>

<footer class="site-footer">
  <div class="site-footer-inner">

    {# Top #}
    <div class="site-footer-top">

      {# Nav #}
      <nav class="site-footer-nav" aria-label="Footer Navigation">
        <ul class="site-footer-nav-left">
          {% for item in site_footer.nav.col1 %}
            <li><a href="{{ item.url }}" target="{{ item.target }}">{{ item.text }}</a></li>
          {% endfor %}
        </ul>
        <ul class="site-footer-nav-right">
          {% for item in site_footer.nav.col2.links %}
            <li><a href="{{ item.url }}" target="{{ item.target }}">{{ item.text }}</a></li>
          {% endfor %}
          {% if site_footer.nav.col2.button %}
            <li>
              <a href="{{ site_footer.nav.col2.button.url }}" class="btn -small -gray site-footer-login">{{ site_footer.nav.col2.button.text }}</a>
            </li>
          {% endif %}
        </ul>
      </nav>

    </div>

    {# Bottom #}
    <div class="site-footer-bottom">

      {# Logo #}
      <a href="{{ site_footer.logo.url }}" class="site-footer-logo"><img src="{{ site_footer.logo.src }}" alt="ASCE Logo"></a>

      {# Contact Links #}
      <nav class="site-footer-contact" aria-label="Contact Links">
        <ul>
          {% for item in site_footer.contact %}
            <li>
              <a href="{{ item.tel ? 'tel:' }}{{ item.url }}" class="site-footer-contact-link">{{ item.text }}</a>
            </li>
          {% endfor %}
        </ul>
      </nav>

      <nav class="site-footer-social" aria-label="Social Media Links">
        <ul class="social-media-links">
          {# Row 1: Main Social Links #}
          {% for service in site_footer.social %}
            <li>
              <a class="icon-{{ service.name | lower }}"
                href="{{ service.url }}"
                target="_blank"
                rel="noopener">
                <span class="sr-text">{{ service.name }}</span>
              </a>
            </li>
          {% endfor %}
        </ul>

        <ul>
          {# Chat Button #}
          {% if site_footer.chat or site_footer.social_links_group_two|length > 0 %}
            <li>
              <button class="btn -gray -small site-footer-chat" onclick="Comm100API.open_chat_window(event, 600);">
                <span class="sr-text">site footer chat</span>
                <span>{{ site_footer.chat.text }}</span>
              </button>
            </li>
          {% endif %}

          {# Row 2: WhatsApp Link #}
          {% for service in site_footer.social_links_group_two %}
            <li>
              <a class="icon-{{ service.name | lower }}"
                href="{{ service.url }}"
                target="_blank"
                rel="noopener">
                <span>{{ service.text }}</span>
              </a>
            </li>
          {% endfor %}
        </ul>
      </nav>

      {# Copyright #}
      <div class="site-footer-copyright">
        <p>&copy; {{ 'now'|date('Y') ~ ' The American Society of Civil Engineers. All Rights Reserved.'|t }}</p>
      </div>

      {# Terms #}
      <div class="site-footer-links">

        <ul>
          {% for item in site_footer.links %}
            <li>
              <a href="{{ item.url }}">{{ item.text }}</a>
            </li>
          {% endfor %}
        </ul>

      </div>
    </div>
  </div>
</footer>