{% if dynamic_page_hubdb_row %}  
<div class="event-banner-area" style="background-image: url('{{ dynamic_page_hubdb_row.image.url }}'); background-size: cover;">
  <div class="event-header-container">
    <div class="event-header-content">
      <div class="event-header-text">
        <h1>
          {{ dynamic_page_hubdb_row.name }}
        </h1> 
        <p>
          {{ dynamic_page_hubdb_row.date|datetimeformat('%A, %B %e, %Y') }} | {{ dynamic_page_hubdb_row.region }}
        </p>       
      </div>
    </div>
  </div>
  <div class="event-banner-edge">
    <svg viewBox="0 0 500 50" preserveAspectRatio="xMinYMin meet">
      <path d="M0,50 L0,4 C95,-23 285,115 500,2 L500,50 L0,50 Z" style="stroke: none; fill: #fff;"></path>
    </svg>
  
  </div>
</div>
<div class="events-listing container">
  <div class="event-details-container">
    <div class="event-section">
      <hr>
      <h2 class="event-section-header">
        What to Expect
      </h2>
      <p>
        {{ dynamic_page_hubdb_row.description }}
      </p>
    </div>
    <div class="event-section">
      <hr>
      <h2 class="event-section-header">
        Agenda
      </h2>
      <p>
         {{ dynamic_page_hubdb_row.agenda }}
      </p>
     
    </div>
    <div class="event-section">
      <hr>
      <h2 class="event-section-header">
        Featured Speaker
      </h2>
      <img src="{{ dynamic_page_hubdb_row.speaker_image.url }}" class="speaker-image" />
      {{ dynamic_page_hubdb_row.speakers }}
    </div>
  </div>
</div>
{% elif module.hubdb_table %}
{% set table = hubdb_table_rows(module.hubdb_table, queryparam) %}
<div class="events container">
  <div class="events-results">
    {% for row in table %}
    <div class="event-item">
      <div class="event-item-content">
        <div class="event-image-container">
          <a href="{{ request.path }}/{{ row.hs_path }}">
            <img src="{{ row.image.url }}" />
          </a>
        </div>
        <div class="event-text-container" >
          <h4>
            {{ row.name }}
          </h4>
          <p>
            {{ row.date|datetimeformat('%e of %B %Y') }}, {{ row.region }}
          </p>
          <a href="{{ request.path }}/{{ row.hs_path }}" class="event-cta">Learn more »</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}
          
        

          
            body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #33475b;
    background-color: rgb(245, 248, 250);
    font-family: "AvenirNext","Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 1.625;
    margin: 0;
    padding: 0;
}

body .container {
    max-width: 1141px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.event-banner-area {
  color: #fff;
  position: relative;
  padding-bottom: 10%;
  background-color: #425b76;
}

.event-banner-edge {
    position: absolute;
    left: 0;
    width: 100%;
}

.event-header-container {
    padding: 7.5rem 0;
  position: relative;
}

.event-header-content {
    box-sizing: content-box;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
}

.event-header-text {
    text-align: center;
    max-width: 710px;
    margin: 0 auto;
}

.event-header-text h1 {
  font-weight: 700;
  font-size: 3.4375rem;
  line-height: 1.1818;
}

.event-header-text p {
    font-size: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}


.event-details-container {
  text-align: center;
}

.event-section {
  margin: 2.5rem 0;
}

.event-section .speaker-image {
  border-radius: 50%;
}

.events-results {
display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    margin-bottom: 2.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.event-item {
    -webkit-box-flex: 1;
    flex: 1 1 33.33%;
    max-width: calc(33.33% - 2rem);
    margin: 1rem;
}

.event-item .event-item-container {
  position: relative;
}

.event-text-container h4 {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3636;
    margin: 0.5em 0!important;
}

.event-text-container p {
    font-size: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.event-text-container a {
    color: #0091ae;
    font-weight: 500;
    text-decoration: none;
}

.event-text-container a:hover {
    color: #007a8c;
    text-decoration: underline;
}

          
        

          
            // js