.o-advice {
}

.o-advice__form {
  @include mq(900) {
    width: column(5, 10);
    margin-top: 60px;
  }
  margin-top: 0;
  background-color: palette(dark);
  padding: 0 column(1, 12) 60px column(1, 12);
  position: relative;

  &:after {
      content: '';
      display: block;
      height: 60px;
      position: absolute;
      top: -60px;
      left: 0;
      z-index: 0;
      width: calc(100% + 25px);
      background: linear-gradient(45deg, transparent 0, transparent 59px, palette(dark) 60px) 0 0;
    transform: scale(-1, -1);
      background-size: 100%;
  }

  .c-button {
    @include flex(flex-start center inline);
  }
}

.o-advice-content {
  position: relative;
  margin-top: 60px;

  &.o-block:before {
    @include mq(900) {
      content: '';
      display: block;
      height: 60px;
      position: absolute;
      top: 0;
      left: calc(-100% + 60px);
      z-index: 0;
      width: 150%;
      background: linear-gradient(-45deg, transparent 0, transparent 59px,  palette(dark) 60px) -38px 0;
      background-size: calc(100% + 60px);
    }
  }

  @include mq(null, 900) {
    padding-bottom: 0;
  }

  .o-block {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    color: palette(dark);

    @include mq(null, 900) {
      width: 100%;
    }
    &:first-of-type {
      height: 70%;
      padding-bottom: 30px;
    }
  }
}

.c-advice-content {
  align-items: stretch;
  padding: 30px 0 80px 0;
  @include mq(1200) {
    padding: 60px column(1, 12) 0 column(1, 12);
  }
}

.advice-options {
  margin-top: 30px;
  @include flex(space-between);
  flex-wrap: wrap;

  @include mq(801, 900) {
    left: calc(100% / 10 * 1);
    width: calc(100% / 10 * 8);
  }
  @include mq(null, 800) {
    left: 20px;
    width: calc(100% - 40px);
  }
  @include mq(null, 900) {
    position: absolute;
    top: 0;
    white-space: normal;
  }



  .left,
  .right {
    display: block;
    vertical-align: top;

    svg {
      margin-right: 20px;
      display: inline-block;
    }

    a {
      display: block;
      margin: 0 0 25px 0;
      @include font(base, 29);
      color: palette(text, 100);
    }
    p {
      color: palette(text, 100);
      @include font(base, 29);
      margin: 0 0 10px 0;
    }

    .company-details {
      display: inline-block;
    }
  }
  .right {

    svg {
      vertical-align: top;
    }
  }

  .c-button {
    margin-top: 20px;
    width: 200px;
    > svg {
      margin-right: 20px;
    }

    @include mq(500, 900) {
      margin-right: 200px;
    }
  }
}