@import "_mixins";

@font-face {
  font-family: 'Chronicle Display Semi';
  src: url('../fonts/ChronicleDisplay-Semi.woff2') format('woff2'),
  url('../fonts/ChronicleDisplay-Semi.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

.main-banner {
  background: url('../images/gcc-wealth-2019/main-banner.jpg') no-repeat;
  background-size: cover;
  padding: 10rem 0 5rem;
  margin: 0;
  border-bottom: 2rem solid #fff;

  .col-md-6 figure {
    padding-top: 2rem;

    img {
      max-width: 100%;
    }
  }
  .col-md-5 figure {
    text-align: center;
    margin-bottom: 4rem;

    img {
      max-width: 100%;
    }
  }
  .btn-bar {
    overflow: hidden;
    margin: 0 0 2rem;
    a.btn {
      border: 1px solid #fff;
      text-transform: uppercase;
      color: #fff;
      border-radius: 0;
      padding: 1rem 2rem;
      font-size: 1rem;
      @include avenir-light;
      width: 48%;
      &:first-child {
        float: left;
      }
      &:last-child {
        float: right;
      }
    }
  }
  .blue-bar {
    background: #184586;
    padding: 1.5rem;
    overflow: hidden;

    span {
      color: #fff;
      @include font-size(12px);
      @include avenir-light;
      text-transform: uppercase;
      &:first-child {
        float: left;
        width: 40%;
        line-height: 1.1rem;
      }
      &:last-child {
        float: right;
        width: 60%;
        line-height: 3rem;
        text-align: right;

        a {
          display: inline-block;
          width: 46px;
          height: 46px;
          overflow: hidden;
          vertical-align: middle;
          margin-left: 1rem;

          img {
            display: block;
          }
        }
        br {
          display: none;
        }
      }
    }
  }
}

.section-b {
  background: url('../images/gcc-wealth-2019/bg-section-b.jpg') no-repeat;
  background-size: cover;

  .container-fluid {
    padding: 0;
  }
  .col-md-6{
    &:first-child {
      & > span {
        text-align: center;
        display: block;
        padding: 7rem 0 1rem;

        img {
          max-width: 80%;
        }
      }
      figure {
        position: relative;

        img {
          max-width: 50%;
        }
        figcaption {
          width: 60%;
          position: absolute;
          top: 7.5rem;
          right: -30px;
          background: #184586;
          color: #fff;
          padding: 1.5rem 2rem;

          span {
            &:nth-child(1) {
              display: block;
              color: #fff;
              @include font-size(24px);
              @include chronicle-semi;
              line-height: 3rem;
            }
            &:nth-child(2),
            &:nth-child(3) {
              display: block;
              border-top: 1px dashed #c6d1e1;
              @include font-size(14px);
              @include avenir-light;
              width: 50%;
              line-height: 2rem;
            }
          }
        }
      }
    }
    &:last-child {
      figure {
        margin: 0;

        img {
          max-width: 100%;
        }
      }
      article {
        padding: 8rem 6rem;
        background: rgba(24,69,134,0.5);

        p {
          color: #fff;
          @include font-size(20px);
          @include avenir-light;
          margin: 0 0 2rem;

          strong {
            @include avenir-medium;
          }
        }
        a.btn {
          border: 1px solid #fff;
          text-transform: uppercase;
          color: #fff;
          border-radius: 0;
          padding: 1rem 2rem;
          font-size: 1rem;
          @include avenir-light;
        }
      }
    }
  }
}

.key-points {
  background: url('../images/gcc-wealth-2019/bg-key-points.jpg') no-repeat;
  background-size: cover;

  .box {
    text-align: center;
    padding: 2rem;
    border-right: 1px solid #ced7e6;
    border-bottom: 1px solid #ced7e6;
    width: 100%;
    height: 100%;

    img {
      margin: 0 0 1.5rem;
    }
    h3 {
      @include font-size(36px);
      @include chronicle-semi;
      color: #184586;
      text-align: left;
      float: right;
      margin: 5rem 0 0;
    }
    h6 {
      @include font-size(20px);
      @include chronicle-semi;
      color: #184586;
    }
    p {
      color: #000;
      margin: 0;
      @include font-size(14px);
      @include avenir-light;
    }
    .btn {
      border: 1px solid #886f4f;
      text-transform: uppercase;
      color: #184586;
      border-radius: 0;
      padding: 1rem 2rem;
      font-size: 1rem;
      @include avenir-light;
    }
  }
  .col-md-3:nth-child(4) .box,
  .col-md-3:nth-child(8) .box,
  .col-md-3:nth-child(12) .box {
    border-right: 0;
  }
  .col-md-3:nth-child(9) .box,
  .col-md-3:nth-child(10) .box,
  .col-md-3:nth-child(11) .box,
  .col-md-3:nth-child(12) .box {
    border-bottom: 0;
  }
  .col-md-3:nth-child(12) .box {
    display: table;
    .table-cell {
      display: table-cell;
      vertical-align: middle;
      width: 100%;
      height: 100%;
    }
  }
}

.section-d {
  .container-fluid {
    padding: 0;
  }
  .box {
    width: 100%;
    height: 100%;
    background: #f7f7f7;
    padding: 3rem;

    h3 {
      color: #184586;
      @include chronicle-semi;
      @include font-size(48px);
      margin: 0 0 1rem;
    }
    p {
      margin: 0 0 1.5rem;
      @include avenir-roman;
      @include font-size(26px);
      color: #184586;
    }
    img {
      max-width: 100%;
      display: block;
      margin: 0 0 2rem;
      &:last-child {
        margin: 0;
      }
    }
    .btn {
      border: 1px solid #886f4f;
      text-transform: uppercase;
      color: #184586;
      border-radius: 0;
      padding: 1rem 2rem;
      font-size: 1rem;
      @include avenir-light;
    }
    &.alt {
      background: #184586;

      h3 {
        color: #fff;
        background: url('../images/gcc-wealth-2019/graph-icon.png') right center no-repeat;
      }
      p {
        color: #fff;
      }
    }
  }
}

.section-e {
  background: url('../images/gcc-wealth-2019/bg-section-e.jpg') no-repeat;
  background-size: cover;
  text-align: center;

  .box {
    background: rgba(255,255,255,0.7);
    padding: 3rem;
    border-radius: 2rem;
    margin: 7.5rem 0;

    h3 {
      color: #184586;
      @include chronicle-semi;
      @include font-size(48px);
      margin: 0 0 1rem;
    }
    p {
      margin: 0 0 1.5rem;
      @include avenir-roman;
      @include font-size(22px);
      color: #184586;
    }
    img {
      max-width: 100%;
      display: block;
      margin: 0 auto 2rem;
    }
  }
}

.section-f {
  background: url('../images/gcc-wealth-2019/bg-key-points.jpg') no-repeat;
  background-size: cover;
  text-align: center;

  .box {
    padding: 8rem 0;
    text-align: center;

    h3 {
      color: #184586;
      @include chronicle-semi;
      @include font-size(48px);
      margin: 0 0 1rem;
    }
    p {
      margin: 0 0 1.5rem;
      @include avenir-roman;
      @include font-size(22px);
      color: #184586;
    }
    img {
      max-width: 100%;
      display: block;
      margin: 0 auto 6rem;
    }
    .btn {
      border: 1px solid #886f4f;
      text-transform: uppercase;
      color: #184586;
      border-radius: 0;
      padding: 1rem 2rem;
      font-size: 1rem;
      @include avenir-light;
    }
  }
}

.section-g {
  background: url('../images/gcc-wealth-2019/bg-section-g.jpg') no-repeat;
  background-size: cover;
  padding: 5rem 0;

  h3 {
    color: #fff;
    @include chronicle-semi;
    @include font-size(48px);
    margin: 10rem 0 2rem;
  }
  h6 {
    color: #fff;
    @include font-size(24px);
    @include avenir-light;
    margin: 0 0 1rem;
    font-weight: 300;

    &:before {
      content: '';
      display: block;
      width: 50%;
      border-top: 1px dashed #c3d2e0;
      margin: 0 0 1rem;
    }
  }
  p {
    margin: 0 0 4rem;
    @include avenir-roman;
    @include font-size(20px);
    color: #fff;
    &:before {
      content: '';
      display: block;
      width: 50%;
      margin: 0 0 1rem;
      height: 5px;
      background: url('../images/gcc-wealth-2019/separator.png') no-repeat;
    }
    &:after {
      content: '';
      display: block;
      width: 50%;
      margin: 1rem 0 0;
      height: 5px;
      background: url('../images/gcc-wealth-2019/separator.png') no-repeat;
    }
  }
  .btn {
    border: 1px solid #fff;
    text-transform: uppercase;
    color: #fff;
    border-radius: 0;
    padding: 1rem 2rem;
    font-size: 1rem;
    @include avenir-light;
  }
  figure {
    img {
      max-width: 100%;
    }
  }
}

.section-h {
  background: url('../images/gcc-wealth-2019/bg-section-h.jpg') no-repeat;
  background-size: cover;
  padding: 8rem 0;

  h3 {
    color: #fff;
    @include chronicle-semi;
    @include font-size(48px);
    margin: 0 0 2rem;
  }
  blockquote {
    position: relative;
    &:before {
      content: '';
      display: block;
      width: 23px;
      height: 18px;
      background: url('../images/gcc-wealth-2019/quotes.png') left center no-repeat;
      position: absolute;
      top: 0;
      left: -28px;
    }
    p {
      margin: 0 0 1.5rem;
      @include avenir-light;
      @include font-size(18px);
      color: #fff;
    }
    &:after {
      content: '';
      display: block;
      width: 23px;
      height: 18px;
      background: url('../images/gcc-wealth-2019/quotes.png') right center no-repeat;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .btn {
    border: 1px solid #fff;
    text-transform: uppercase;
    color: #fff;
    border-radius: 0;
    padding: 1rem 2rem;
    font-size: 1rem;
    @include avenir-light;
  }
  .only-mobile {
    display: none;
  }
  figure {
    &.alt {
      padding: 1.5rem;
      background: rgba(0,69,138,0.30);
      img {
        width: auto;
        max-width: 100%;
        margin: 0 0 1rem;
      }
    }
    img {
      width: 100%;
    }
    figcaption {
      color: #fff;
      @include font-size(16px);
      span {
        @include chronicle-semi;
        display: block;
        @include font-size(22px);
      }
    }
  }
  ul {
    padding: 0;
    margin: 0;
    li {
      @include avenir-light;
      @include font-size(18px);
      color: #fff;
      list-style: none;
      padding: 0 0 0 120px;
      min-height: 98px;
      margin: 0 0 2rem;
      &:nth-child(1) {
        padding-top: .5rem;
        background: url('../images/gcc-wealth-2019/list-icon1.png') left center no-repeat;
        background-size: 98px 98px;
      }
      &:nth-child(2) {
        background: url('../images/gcc-wealth-2019/list-icon2.png') left center no-repeat;
        background-size: 98px 98px;
      }
      &:nth-child(3) {
        background: url('../images/gcc-wealth-2019/list-icon3.png') left center no-repeat;
        background-size: 98px 98px;
      }
    }
  }
  .mt-4 {
    margin-top: 4rem !important;
  }
}

@media screen and (max-width: 768px) {

  .main-banner {
    padding: 2rem 0;
    border-bottom: 2rem solid #fff;
    .col-md-5 figure {
      margin-bottom: 2rem;
    }
    .btn-bar {
      a.btn {
        padding: 1rem;
        @include font-size(12px);
      }
    }
    .blue-bar {
      padding: 1rem;

      span {
        display: block;
        text-align: center;
        &:first-child {
          float: none;
          width: 100%;
        }
        &:last-child {
          float: none;
          width: 100%;
          text-align: center;
          a {
            margin: 0 .5rem;
          }
          br {
            display: block;
          }
        }
      }
    }
  }

  .section-b {
    .col-md-6{
      &:first-child {
        & > span {
          padding: 2rem 0;
        }
        figure {
          margin: 0;
          img {
            max-width: 100%;
          }
          figcaption {
            width: 100%;
            position: static;
            padding: 1rem;
            span {
              &:nth-child(2),
              &:nth-child(3) {
                width: 100%;
              }
            }
          }
        }
      }
      &:last-child {
        article {
          padding: 2rem;
          p {
            @include font-size(16px);
          }
        }
      }
    }
  }

  .key-points {
    .box {
      border-right: 0;
      h3 {
        margin: 3rem 0 2rem;
        text-align: center;
        float: none;
        br {
          display: none;
        }
      }
    }
    .col-md-3:nth-child(10) .box,
    .col-md-3:nth-child(11) .box {
      border-bottom: 1px solid #ced7e6;
    }
    .col-md-3:nth-child(4),
    .col-md-3:nth-child(5),
    .col-md-3:nth-child(9){
      display: none;
    }
  }

  .section-d {
    .box {
      padding: 2rem 1rem;
      h3 {
        @include font-size(32px);
        background-size: contain;
      }
      p {
        @include font-size(18px);
      }
    }
  }

  .section-e {
    .box {
      padding: 2rem 1rem;
      margin: 2.5rem 0;
      h3 {
        @include font-size(32px);
      }
      p {
        @include font-size(16px);
      }
      img {
        margin: 0;
      }
    }
  }

  .section-f {
    .box {
      padding: 2.5rem 0;
      h3 {
        @include font-size(32px);
        br {
          display: none;
        }
      }
      p {
        @include font-size(16px);
        margin: 0 0 1rem;
      }
      img {
        margin: 0 auto 2rem;
      }
    }
  }

  .section-g {
    padding: 2.5rem 0;
    h3 {
      @include font-size(32px);
      margin: 0 0 2rem;
      br {
        display: none;
      }
    }
    h6 {
      @include font-size(18px);
      margin: 0 0 1rem;
    }
    .btn {
      margin: 0 0 2rem;
    }
    p {
      margin: 0 0 2rem;
      @include font-size(16px);
    }
  }

  .section-h {
    padding: 2.5rem 0;
    h3 {
      @include font-size(32px);
    }
    .only-mobile {
      display: block;
    }
    .only-desktop {
      display: none;
    }
    blockquote {
      &:before {
        top: -23px;
        left: 0;
      }
      p {
        @include font-size(16px);
      }
      &:after {
        bottom: -23px;
      }
    }
    .btn {
      margin: 0 0 2rem;
    }
    figure {
      margin: 0 0 2rem;
      &.alt {
        margin: 0 0 3rem;
        padding: 1rem;
      }
    }
    ul {
      li {
        @include font-size(16px);
        padding: 0 0 0 90px;
        min-height: 68px;
        &:nth-child(1),
        &:nth-child(2),
        &:nth-child(3) {
          background-size: 68px 68px;
        }
      }
    }
    .mt-4 {
      margin-top: 2rem !important;
    }
  }

}