/*------------------------------------*\
  $BLOCK
\*------------------------------------*/

$highlights-background-color: #f6f6f6;

.block {
  padding: 50px 0;
  float: left;
  width: 100%;
  clear: both;

  @include mq(mq960) {
    padding: 70px 0;
  }

  /**
   * 1. If it's the last block in a sequence remove the margin-bottom completely.
   */
  &:last-child {
    margin: {
      bottom: 0; /* 1 */
    }
  }

  p {
    font: {
      size: font-size(17);
    }
    margin: {
      right: auto;
      bottom: 40px;
      left: auto;
    }

    max-width: 740px;
    text-align: center;

    &.intro {
      margin: {
        bottom: 30px;
      }
      font: {
        size: font-size(22);
      }
      color: #121214;
    }
  }

  @include headings {
    margin: {
      bottom: 30px;
    }
    text-align: center;
  }


  &__title {
    margin-bottom: 30px;
    text-align: center;
    color: #58585a;

    font: {
      family: $nav-font;
      weight: 500;
      size: font-size(26);
    }

    &--alt {
      color: $brand;
    }
  }

  &--intro {
    p {

      max-width: 900px;

      &:last-of-type {
        margin: {
          bottom: 0;
        }
      }
    }

    .more {
      font: {
        size: font-size(16);
        weight: 700;
        family: $body-font;
      }
      text-transform: uppercase;
      color: $brand;
      text: {
        align: center;
        decoration: none;
      }

      &:after {
        content: '';
        display: block;
        width: 10px;
        height: 1px;
        background: $brand;
        margin: 15px auto 20px;
        transition: all 0.3s;
      }

      @include states {
        &:after {
          width: 85px;
        }
      }
    }
  }

  &--products {
    background: #f5f5f5;

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .wrap {
      width: 2000px;

      .flex div {
        background: #fff;
        width: 100%;
        margin: {
          bottom: 10px;
        }
        padding: 30px;

        @include mq(mq960) {
          padding: 50px 30px;
        }

        article {
          margin: 0;
          padding: 0;

          picture {
            height: 210px;
          }

          @include mq(mq768) {
            width: 50%;
            float: left;
          }

          &:first-of-type {
            border-bottom: 1px solid #e4e4e4;
            padding: {
              bottom: 30px;
            }

            @include mq(mq768) {
              padding: 0;
              border: 0;
              border-right: 1px solid #e4e4e4;
            }
          }

          &:last-of-type {
            padding: {
              top: 30px;
            }

            @include mq(mq768) {
              padding: 0;
            }
          }
        }
      }
    }

    a {
      text-decoration: none;
      display: block;
      position: relative;

      @include states {

        h3 {

          &:after {
            width: 85px;
          }
        }

        .btn {
          background: {
            color: darken($brand, 5%);
          }
        }
      }

      > img {
        position: absolute;
        top: 0;
        right: 0;
        width: 30px;

        @include mq(mq960) {
          top: -20px;
          width: 45px;
        }

        @include mq(mq1200) {
          width: 59px;
        }
      }
    }

    article {
      background: #fff;
      width: 100%;
      padding: 30px;
      margin: {
        bottom: 10px;
      }
      text-align: center;

      @include mq(mq768) {
        width: calc((100% - 20px) / 3);
        margin: {
          bottom: 0;
          right: 10px;
        }

        &:last-of-type {
          margin: 0;
        }
      }

      @include mq(mq960) {
        padding: 50px 30px;
      }
    }

    h3 {
      font: {
        size: font-size(15);
        weight: 700;
        family: $body-font;
      }
      text-transform: uppercase;
      color: $brand;
      margin: 0 30px;
      text-align: center;

      &:after {
        content: '';
        display: block;
        width: 10px;
        height: 1px;
        background: $brand;
        margin: 15px auto 30px;
        transition: all 0.3s;
      }
    }

    picture {
      display: block;
      margin: {
        bottom: 30px;
      }
      position: relative;
      height: 90px;

      img {
        @include centrally-align;
        position: absolute;

        max-height: 150px;

        @include mq(mq768) {
          max-height: 125px;
        }

        @include mq(mq1200) {
          max-height: 250px;
        }
      }
    }

    .btn {
      margin: 0 auto;
    }
  }

  &--processes {
    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    article {
      @include span(3 of 6);

      &:nth-of-type(2n) {
        @include last;
      }

      @include mq(mq768) {
        &,
        &:nth-of-type(2n) {
          @include span(4 of 16);
        }

        &:last-of-type {
          @include last;
        }
      }

      a {
        text: {
          decoration: none;
          align: center;
        }
        display: block;

        @include states {

          h3 {

            &:after {
              width: 85px;
            }
          }
        }
      }

      img {
        width: 94px;
        height: 82px;
        margin: 0 auto 30px;
      }

      h3 {
        font: {
          size: font-size(15);
          weight: 700;
          family: $body-font;
        }
        text-transform: uppercase;
        color: $brand;
        margin: 0 30px;
        text-align: center;

        &:after {
          content: '';
          display: block;
          width: 10px;
          height: 1px;
          background: $brand;
          margin: 15px auto 20px;
          transition: all 0.3s;
        }
      }
    }
  }

  &--industries {
    background: #f5f5f5;
    text-align: center;

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    article {
      background: #fff;
      margin: {
        bottom: 20px;
      }
      cursor: pointer;
      transition: background 0.3s;

      flex-grow: 1;
      @include span(3 of 6);

      @include states {
        background: #bd2b2e;

        h3 {
          color: #fff;

          &:after {
            width: 85px;
            background: #fff;
          }
        }

        p {
          color: #fff;
        }
      }

      &:nth-of-type(1),
      &:nth-of-type(2),
      &:nth-of-type(5),
      &:nth-of-type(6) {
        img {
          max-width: 165%;
        }
      }

      &:nth-of-type(3),
      &:nth-of-type(4) {
        img {
          max-width: 110%;
        }
      }

      &:nth-of-type(2),
      &:nth-of-type(6) {
        @include last;
      }

      &:nth-of-type(3),
      &:nth-of-type(4) {
        flex-grow: 2;
        @include span(6 of 6);
      }

      @include mq(mq960) {
        &,
        &:nth-of-type(2) {
          @include span(4 of 16);
        }

        &:nth-of-type(3),
        &:nth-of-type(4) {
          @include span(8 of 16);
        }

        &:nth-of-type(3) {
          @include last;
        }
      }

      a {
        text-decoration: none;
        display: block;
      }

      picture {
        width: 100%;
        height: 180px;
        position: relative;
        display: block;
        overflow: hidden;
      }

      img {
        margin: 0;
        @include centrally-align;
        position: absolute;
      }

      div {
        padding: 30px 0;
      }

      h3 {
        font: {
          size: font-size(15);
          weight: 700;
          family: $body-font;
        }
        text-transform: uppercase;
        color: $brand;
        margin: 0 20px;
        transition: color 0.3s;

        &:after {
          content: '';
          display: block;
          width: 10px;
          height: 1px;
          background: $brand;
          margin: 15px auto 0;
          transition: all 0.3s;

          @include mq(mq768) {
            margin: {
              bottom: 20px;
            }
          }
        }
      }

      p {
        display: none;
        color: $base-font-color;
        margin: 0 30px;
        font: {
          size: font-size(15);
        }

        @include mq(mq768) {
          display: block;
          transition: all 0.3s;
        }
      }
    }
  }

  &--enquiry {
    background: #bd2b2e;
    overflow: hidden;
    text-align: center;

    .block__title {
      font-size: font-size(22);
      color: #fff;
    }

    div:not(.wrap) {
      margin: {
        bottom: 40px;
      }

      @include mq(mq960) {
        margin: 0;
      }
    }

    span {
      width: 42px;
      height: 42px;
      margin: 0 auto 20px;
      border: 3px solid $red;
      border-radius: 45px;
      display: block;
      overflow: hidden;
      position: relative;

      img {
        height: 36px;
        max-width: 72px;
        margin: {
          bottom: 0;
          left: -36px;
        }
        position: absolute;
        left: 50%;
      }
    }

    div:nth-of-type(2) {
      span {
        img {
          width: 36px;
          margin: {
            left: -18px;
          }
        }
      }
    }

    p {
      text-align: center;
      margin: {
        bottom: 20px;
      }

      &:not(:first-of-type) {
        color: #fff;

        @include mq(mq960) {
          margin: {
            right: 20px;
            left: 20px;
          }
        }

        strong {
          display: block;
        }

        br {
          @include mq(mq960) {
            display: none;
          }
        }
      }
    }

    .enquiry__ire {
      p {
        &:not(:first-of-type) {
          br {
            &:last-of-type {
              display: none;

              @include mq(mq600) {
                display: block;
              }
            }
          }
        }
      }
    }

    .tel {
      color: #fff;
      font: {
        family: $heading-font;
        size: font-size(18);
      }
      margin: 0 auto;
      display: inline-block;
    }

    .btn {
      margin: 0 auto;
      background: $red;

      @include states {
        background: darken($red, 5%);
      }
    }

    .enquiry {
      &--email {
        overflow: hidden;

        @include mq(mq600) {
          div {
            width: 50%;
            float: left;
          }
        }

        @include mq(mq960) {
          width: calc((100% / 3) * 2);
          float: left;
        }

        > img {
          width: 90px;
        }
      }

      &--form {
        border-top: 1px solid #ca5558;
        padding: {
          top: 40px;
        }

        @include mq(mq960) {
          border-top: 0;
          border-left: 1px solid #ca5558;
          padding: {
            top: 0;
          }
          width: calc(100% / 3);
          float: right;
        }

        > img {
          width: 80px;
          margin-bottom: 30px;
        }

        p {
          color: #fff;
          margin: {
            right: auto;
            bottom: 40px;
            left: auto;
          }
          max-width: 600px;

          @include mq(mq960) {
            margin: {
              right: 50px;
              bottom: 128px;
              left: 50px;
            }
          }
        }
      }
    }
  }

  &--enquiry-form {
    background: #f5f5f5;

    .js & {
      display: none;
    }

    .message-box {
      display: none;
    }

    .message-text {
      margin: {
        bottom: 0;
      }
    }
  }

  &--summary {
    background: #f5f5f5;
    width: 100%;
    max-width: 100%;
    padding: 0 !important;

    .precis-wrap--mixed {
      width: 2000px;
      max-width: 90%;
      margin: 0 auto;
      padding: {
        top: 40px;
        bottom: 30px;
      }

      @include mq(mq960) {
        max-width: 95%;
        padding: {
          bottom: 50px;
        }
      }
    }
  }

  &--description {
    text-align: center;
    background: #f5f5f5;
    width: 100%;
    max-width: 100%;
    padding: {
      top: 60px;
      bottom: 60px;
    }

    article {
      width: 2000px;
      max-width: 90%;
      margin: 0 auto;
      padding: 0;

      @include mq(mq960) {
        max-width: 95%;
      }
    }
  }

  &--page-intro {
    background: #fff;
    text-align: center;

    .wrap {
      padding: 0;
    }

    .post__title {
      font: {
        family: $nav-font;
        weight: 500;
        size: font-size(30);
      }
      color: $brand;
      margin: {
        bottom: 40px;
      }
    }

   ul {
    li {
      list-style: none;
      font: {
        weight: 600;
        size: 18px;
      }
      color: #323232;

      &:before {
        content: '•';
        margin: {
          right: 5px;
        }
        color: $brand;
      }
    }
   }

    p {
      &:last-of-type {
        margin: {
          bottom: 0;
        }
      }
    }
  }
}

_:-ms-fullscreen, :root .block--products article {
  @include mq(mq768) {
    width: calc((99.9% - 20px) / 3);
  }
}