@import url("https://fonts.googleapis.com/css?family=Roboto:300i"); /* for quote */ .hero {
  background: url(/img/accent-3.png) no-repeat 64px 100%;
  background-size: 355px 282px;
  padding: 104px 0;
} .hero .container {
    text-align: center;
    display: flex;
    flex-flow: row wrap;
    max-width: 890px;
    margin-left: auto;
    margin-right: auto;
  } .hero h1 {
    background: white;
    position: relative;
    padding: 8px 0;
    text-align: left;
  } .hero h1:after {
      content: "";
      position: absolute;
      width: calc(70vw - 128px);
      height: 100%;
      left: 10vw;
      top: -64px;
      padding: 64px;
      border: 8px solid #CDD3D8;
      z-index: -1;
      max-width: 750px;
    } .hero .intro {
    color: #6A6A6A;
    background: white;
    margin-left: calc(60% - 200px);
    max-width: 330px;
    padding: 0 8px;
    padding-top: 10px;
    margin-top: 50px;
    text-align: left;
    line-height: 24px;
  } @media (max-width: 480px) { .hero .intro {
      margin-left: 5px
  }
    } .hero .intro p {
      margin: 0;
    } .hero .text-link {
    display: table;
  } .hero .text-link:first-child {
      margin-top: 16px;
    } .hero .text-link.numbered {
      padding-left: 26px;
      text-indent: -26px;
    } .hero .text-link.numbered .numbering {
        color: #9B9B9B;
      } .header + div {
  counter-reset: section-counter;
} .sections .banner {
    width: 100%;
    background: #F7F7F7;
    box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.1),
      inset 0px -10px 10px -10px rgba(0, 0, 0, 0.1);
    padding: 40px 0;
    position: relative;
    overflow: hidden;
  } .sections .banner:after {
      content: "0" counter(section-counter);
      counter-increment: section-counter;
      font-weight: 700;
      font-size: 270px;
      color: #CDD3D8;
      letter-spacing: -16px;
      position: absolute;
      bottom: -57px;
      right: 40px;
      z-index: 0;
    } @media (max-width: 768px) { .sections .banner:after {
        opacity: 0.3
    }
      } .sections .banner .img {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: calc(99.9% * 2/12 - (20px - 20px * 2/12));
      max-width: calc(99.9% * 2/12 - (20px - 20px * 2/12));
      width: calc(99.9% * 2/12 - (20px - 20px * 2/12));
      height: auto;
    } .sections .banner .img:nth-child(1n) {
      margin-right: 20px;
      margin-left: 0;
    } .sections .banner .img:last-child {
      margin-right: 0;
    } .sections .banner .img:nth-child(12n) {
      margin-right: 0;
      margin-left: auto;
    } .sections .banner .copy {
      flex-grow: 0;
      flex-shrink: 0;
      flex-basis: calc(99.9% * 10/12 - (20px - 20px * 10/12));
      max-width: calc(99.9% * 10/12 - (20px - 20px * 10/12));
      width: calc(99.9% * 10/12 - (20px - 20px * 10/12));
      max-width: 600px;
      z-index: 1;
    } .sections .banner .copy:nth-child(1n) {
      margin-right: 20px;
      margin-left: 0;
    } .sections .banner .copy:last-child {
      margin-right: 0;
    } .sections .banner .copy:nth-child(12n) {
      margin-right: 0;
      margin-left: auto;
    } .sections .banner .copy p {
        color: #6A6A6A;
        margin-top: 6px;
      } .solutions .content {
    color: #6A6A6A;
    margin-top: 104px;
  } @media (max-width: 768px) { .solutions .content {
      margin-top: 40px
  }
    } .solutions .triptych {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 40px;
    width: 100%;
  } @media (max-width: 768px) { .solutions .triptych {
      flex-direction: column
  }
    } .solutions .triptych article {
      flex: 1 1 30vw;
      min-width: 200px;
      max-width: 400px;
      margin: 16px;
    } .solutions .triptych h4 {
      font-weight: 700;
      margin-bottom: 15px;
    } .solutions .triptych p {
      margin-bottom: 104px;
    } @media (max-width: 768px) { .solutions .triptych p {
        margin-bottom: 24px
    }
      } .solutions .quote {
    text-align: center;
    margin: 92px auto 92px auto;
  } .solutions .quote blockquote {
      font-weight: 300;
      font-style: italic;
      color: #6A6A6A;
      font-size: 24px;
      line-height: 40px;
      letter-spacing: -0.2px;
      max-width: 960px;
      margin: 0 auto;
      padding: 5px;
    } @media screen and (min-width: 768px) { .solutions .quote blockquote {
        font-size: 34px;
        line-height: 48px;
        letter-spacing: -0.4px
    }
      } .solutions .quote cite {
      display: block;
      width: 100%;
      margin-top: 33px;
    } .solutions .quote cite img {
        width: 120px;
      }