/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Some device sizes to use with min-width */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 10, but if you do -- maybe just use a custom class  :)  */
#intro {
  padding: 80px 0;
  background-color: #F5F5F5; }
  #intro h5 {
    font-weight: 700;
    color: #6D6E71;
    margin: 0; }
    #intro h5:first-of-type {
      padding-bottom: 32px;
      border-bottom: 1px solid #BCBEC0;
      margin: 32px 0; }
  #intro p {
    color: #6D6E71; }
  @media screen and (min-width: 1025px) {
    #intro {
      padding: 128px 0; }
      #intro h2 {
        margin-bottom: 32px; } }

/*-------------------------------------------
## Callout
--------------------------------------------*/
#callout {
  position: relative;
  overflow: hidden;
  padding: 170px 0 128px;
  background-color: #F5F5F5;
  color: #FFFFFF; }
  #callout .member-logo {
    margin-right: 55px;
    margin-bottom: 20px;
    opacity: 0.58; }
    #callout .member-logo:last-of-type {
      margin-right: 0; }
  #callout picture.bg-cover {
    z-index: 0; }
  #callout h5 {
    margin: 65px 0; }
  #callout .grid-lines {
    position: absolute;
    bottom: 0;
    right: 0; }
    #callout .grid-lines img {
      width: 100% !important; }
  @media screen and (max-width: 1025px) {
    #callout .member-logo {
      max-width: 90px; }
    #callout .grid-lines {
      display: none; } }
  @media screen and (min-width: 1025px) {
    #callout {
      padding: 224px 0 140px; }
      #callout picture.bg-cover {
        max-height: 97% !important; } }

/*-------------------------------------------
## Callout
--------------------------------------------*/
#environment {
  background-color: #F5F5F5;
  padding: 80px 0; }
  #environment p, #environment li {
    color: #5C5C5C; }
  @media screen and (min-width: 1025px) {
    #environment {
      padding: 90px 0 128px; } }

section {
  /* heading line breaks follow the desktop design; narrower screens wrap naturally */ }
  section h2 br {
    display: none; }
  @media screen and (min-width: 1700px) {
    section h2 br {
      display: inline; } }