careers.html

---
layout: page
---

<header class="careers-header">
  <div class="container">
    <div class="wrapper">
      <h5 class="text-muted">{{site.data.sitetext.careers.title}}</h5>
      <h1 class="mb-5 mt-2 careers-header__title">{{site.data.sitetext.careers.heading}}</h1>
      <p class="careers-header__subtitle">{{site.data.sitetext.careers.heading_sub}}</p>
    </div>
  </div>
</header>

<section class="page-section careers" id="careers">
  <div class="mb-5 container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading text-uppercase">Open Positions</h2>
        <h3 class="section-subheading text-muted">See one that catches your fancy? We’d love to talk to you.</h3>
      </div>
    </div>

    <div class="row career">
      {% for career in site.careers %}
      <div class="mb-4 row career-container">
        <a href="{{career.url}}" class="fs-3 col-sm-12 mb-3 career-title">{{career.title}}</a>
        <ul class="col-sm-12">
          <li class="mb-2 row">
            <span class="col-sm-4 description-title">Department:</span>
            <span class="col-sm-8">{{career.description.department}}</span>
          </li>
          <hr />
          <li class="mb-2 row">
            <span class="col-sm-4 description-title">Location:</span>
            <span class="col-sm-8">{{career.description.location}}</span>
          </li>
          <hr />
          <li class="mb-2 row">
            <span class="col-sm-4 description-title">Date created:</span>
            <span class="col-sm-8">{{career.description.created-on}}</span>
          </li>
        </ul>
      </div>
      {% endfor %}
    </div>
  </div>
</section>