{% include "header" %}
{% include "sub_navigation" %}
<main class="np-main np-training-events np-subpage-container np-max-width">
  <div class="row">
    <div class="col-xs-12 col-sm-10">
      <div class="np-resource-title" style='font-size: 2rem;'>
        {% t .title %}
      </div>
      <div class="np-resource-subtitle">
        {% t .subtitle %}
      </div>
    </div>
    <div class="col-xs-12 col-sm-2">
      {% include "training_events_filter" %}
    </div>
  </div>
  {% include "training_events_index" %}

  {%- comment -%} <div class="row">
    <div class="col-xs-12 col-sm-12">
      <div class="np-resource-title" style='font-size: 2rem;'>
        Other Training Events
      </div>
    </div>
  </div>
  {% include "other_events_index" %} {%- endcomment -%}
</main>
{% include "footer" %}

<style>
.other-event-sessions {
  height: 65px;
  margin-bottom: 0;
}

.np-training-events {
  background: white;
}

.row .np-card {
  border: 1px solid #ccc;
  padding: 35px;
}
.event-header {
  display: flex;
  padding-bottom: 25px;
  height: 115px;
}
.event-header-left {
  margin-right: 20px;
}
.fa-users {
  font-size: 44px;
  font-weight: 300;
}
.event-header-right-type {
  color: #3b3f3d;
  font-size: 18px;
}
.event-header-right-title {
  color: #3b3f3d;
  font-size: 26px;
  font-weight: 600;
  word-wrap: break-word;
}
.event-sessions {
  height: 160px;
  margin-bottom: 30px;
}
.event-session {
  margin-bottom: 15px;
}
.event-session-number {
  color: #606060;
  font-weight: bold;
  font-size: 18px;
}
.event-session-date {
  color: #9b4b87;
  text-decoration: none;
  cursor: pointer;
  font-size: 18px;
}
.event-session-date:hover {
  color: #4b2346;
}
.event-additional-sessions {
  color: #9b4b87;
  text-decoration: none;
  cursor: pointer;
}
.event-additional-sessions:hover {
  color: #4b2346;
}
.event-button {
  background: #9b4b87;
  color: white;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  line-height: 39px;
  min-height: 30px;
  text-align: center;
  margin-bottom: -10px;
  text-decoration: none;
}
.event-button:hover {
  background: #4b2346
}
@media screen and (max-width: 768px) {
  .row .np-card {
    width: 80%;
  }
}
@media screen and (max-width: 450px) {
  .row .np-card {
    width: 90%;
    padding: 25px;
  }
}
</style>