.user-is-tabbing :focus {
  outline: 1px dotted currentColor;
  outline-offset: 2px; }

.department-hero {
  position: relative;
  height: calc(100vh - 210px);
  margin-bottom: 100px;
  overflow: visible; }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .department-hero svg {
      height: 200vh;
      opacity: .2; } }
  .department-hero .container-fluid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    height: 100%; }
  .department-hero .container-fluid > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1; }
  .department-hero .container-fluid > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2; }
  .department-hero .hero-content {
    position: relative;
    background: #fff;
    z-index: 2;
    box-shadow: 0 0 34px 0 rgba(0, 0, 0, 0.16);
    -ms-grid-row-align: end;
        align-self: end;
    padding: 50px;
    bottom: -60px; }
    .department-hero .hero-content .hero-title {
      color: #000; }
    .department-hero .hero-content .hero-headline {
      font-size: calc(18px + (22 - 18) * ((100vw - 300px) / (1600 - 300)));
      font-family: "Lora", serif;
      color: #000; }
      .department-hero .hero-content .hero-headline span {
        position: relative;
        display: inline-block; }
        .department-hero .hero-content .hero-headline span:after {
          display: block;
          content: '';
          position: absolute;
          height: 4px;
          background-color: #fff;
          width: 100%; }
  @media (max-width: 767.98px) {
    .department-hero {
      height: 100%;
      height: calc(var(--vh, 1vh) * 100 - 180px); }
      .department-hero .container-fluid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
        -ms-grid-rows: auto;
        grid-template-rows: auto; }
      .department-hero .container-fluid > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1; }
      .department-hero .hero-content .hero-headline {
        padding: 0; } }
  @media (min-width: 768px) and (max-width: 991.98px) {
    .department-hero {
      height: 500px; }
      .department-hero .hero-content .hero-headline {
        padding: 0; } }