.o-contact {

  .s-image {
    @include mq(612, 900) {
      top: 250px;
    }
    @include mq(null, 612) {
      top: 300px;
    }
  }
  .c-image {
    @include mq(612, 900) {
      padding-bottom: 250px;
    }
    @include mq(null, 612) {
      padding-bottom: 300px;
    }
  }
}

.o-contact__map {
  position: relative;
  max-height: 577px;

  @include mq(900) {
    width: column(5, 10);
  }
  @include mq(null, 900) {
    height: 400px;
  }

  &:after {
    content: '';
    display: block;
    height: 60px;
    position: absolute;
    width: 100%;
    background-size: calc(100% + 60px);
    top: 0;
    left: 0;
    background: linear-gradient(135deg, palette(secondary, 100) 0, palette(secondary, 100) 40px, transparent 41px) 0 0;

    @include mq(900) {
      transform: scale(-1, 1);
      left: 1px;
      background: linear-gradient(135deg, #F2F8FA 0, #F2F8FA 59px, transparent 60px) -23px 0;
      background-size: calc(100% + 61px);
    }
  }

  .gm-style {
    top: 30px !important;
  }
}

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

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

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

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

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

.contact-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: 5px;
      display: inline-block;
      color: palette(action);

      @include mq(1500) {
        margin-right: 20px;
      }

    }

    a {
      text-decoration: none;
      display: block;
      margin: 0 0 15px 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 {
    margin-right: 20px;
    @include mq(1345) {
      margin-left: 20px;
      margin-right: 0;
    }

    svg {
      vertical-align: top;
    }
  }

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

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