/* 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 h2 {
    max-width: 1230px;
    margin-bottom: 35px; }
  #intro h3 {
    margin-bottom: 0; }
  #intro .card p {
    color: #6D6E71; }
  #intro .card {
    border-bottom: 1px solid #84BD00;
    padding-bottom: 32px; }
    #intro .card h3 {
      display: flex;
      align-items: center;
      color: #84BD00;
      font-weight: 600; }
      #intro .card h3::before {
        font-family: 'standard-icons';
        content: '\e90c';
        margin-right: 8px;
        font-size: 0.9em; }
    #intro .card h5 {
      font-size: 18px; }
  @media screen and (min-width: 1025px) {
    #intro {
      padding: 128px 0; }
      #intro h2 {
        margin-bottom: 64px; }
      #intro .card h5 {
        font-size: 24px; } }

/*-------------------------------------------
## Core Values
--------------------------------------------*/
#values {
  position: relative;
  overflow: hidden;
  padding: 128px 0 128px;
  background-color: #F5F5F5;
  color: #FFFFFF; }
  #values .card {
    height: 100%; }
    #values .card p {
      font-size: 24px;
      color: #84BD00;
      font-weight: 700;
      margin-bottom: 10px; }
    #values .card h3 {
      font-weight: 400; }
  #values picture.bg-cover {
    z-index: 0; }
  #values h2 + p {
    max-width: 1037px; }
  @media screen and (min-width: 1025px) {
    #values {
      padding: 128px 0 120px; }
      #values picture.bg-cover {
        max-height: 97% !important; } }

#sec-energy {
  padding: 80px 0;
  background-color: #F5F5F5; }
  #sec-energy p {
    color: #6D6E71; }
  #sec-energy .btn.btn-primary {
    color: #000000; }
  @media screen and (min-width: 1401px) {
    #sec-energy {
      padding: 98px 0 128px; }
      #sec-energy h2 {
        max-width: 1230px; }
      #sec-energy .content h3 {
        margin-bottom: 62px; } }

section {
  /* heading line breaks follow the desktop design; narrower screens wrap naturally */ }
  section .grid-lines {
    position: absolute;
    bottom: 0;
    right: 0; }
    section .grid-lines img {
      width: 100% !important; }
  section h2 br {
    display: none; }
  @media screen and (max-width: 1025px) {
    section .grid-lines {
      display: none; } }
  @media screen and (min-width: 1700px) {
    section h2 br {
      display: inline; } }