/* About Page ==================================== */

/* Page background contrasts with the color-2 section so the bottom triangle is visible */
#about {
  background-color: var(--bg-color-1);
}

/* Bottom triangle — bridges color-2 section into page background (color-1) */
#about .pagecontents:after {
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border: solid transparent;
  border-color: var(--bg-color-1);
  border-top-color: var(--bg-page);
  border-width: 30px;
  left: 50%;
  margin-left: -30px;
  top: auto;
  z-index: 1;
}

#about .pageheader {
  background-image: url(../img/about.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 190px 0 35px 0;
}

#about .pageheader .title {
  color: #fff;
  border: none;
}

/* — Banner: equal-height columns on desktop so the banner has space to centre in — */
@media (min-width: 992px) {
  #about .section.color-2 .row {
    display: flex;
    align-items: stretch;
  }
}

/* Make the left column a flex column so ml12 fills remaining space */
#about .section.color-2 .col-md-6:first-child {
  display: flex;
  flex-direction: column;
}

/* Centre the banner text in the space below the last paragraph */
#about .section.color-2 h1.ml12 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}