.intro
  background-color: white
  padding-bottom: 40px

  > .grid-col
    width: 100%
    height: 100%
    overflow: visible
    > .grid-row
      display: flex
      height: 100%
      overflow: visible

      .left, .right
        width: 50%
        overflow: visible
        margin-top: -120px

      .left
        position: relative
        .image
          height: 550px
          width: column(7, 6)
          margin-left: column(-1, 6)

          figure
            background-color: lightgrey
            display: block
            width: 100%
            height: 100%
            background-position: center center
            background-size: cover

            img
              display: none
              width: 100%


        .button-bar
          height: 150px
          width: column(7, 6)
          margin-left: column(-1, 6)
          background-color: $pastelBlue
          +flex(center, center)

          a.button:first-child
            margin-right: 30px

          a.button:last-child
            background-color: transparent
            border: 1px solid white
            &:hover
              background-color: lighten($pastelBlue, 10%)
              border-color: transparent


        .red_triangle
          position: absolute
          top: 0
          right: column(-1, 6)
          display: block
          width: 239px
          height: 239px
          z-index: 10
          &:before
            content: ''
            display: block
            position: absolute
            width: 0
            height: 0
            border-style: solid
            border-width: 0 0 239px 239px
            border-color: transparent transparent $red-500 transparent

          .offerte &
            width: 160px
            height: 160px
            &:before
              border-width: 0 0 160px 160px
            .mouse,
            > span
              display: none

            +respond-to-width(1150)
              right: 0

        .mouse
          position: absolute
          right: -11px
          top: 165px
          z-index: 10
          display: block

          .vertical-line
            display: block
            position: absolute
            width: 0
            height: 41px
            left: 50%
            margin-top: 5px
            opacity: 0.8
            border-left: solid 1.5px white

          .text
            text-transform: uppercase
            opacity: 0.6
            color: white
            font-size: 0.75rem
            font-weight: bold
            letter-spacing: 1px
            line-height: 1rem
            width: 60px

            position: absolute
            left: 50%
            top: 3px
            margin-left: 100%

            +respond-to-width(1250)
              left: -70px
              margin-left: 0
              text-align: right

      .right
        padding-left: column(2, 12)
        padding-bottom: 45px

        .about &
          padding-bottom: 110px

        +respond-to-width(1500)
          .offerte &
            padding-bottom: 0

        .post-indent
          margin-left: -30px
          margin-right: -30px

        h1
          color: white
          font-size: 2.875rem
          font-weight: 500 
          line-height: 3.375rem
          margin-top: 0
          margin-bottom: 185px

          .machinepark &
            margin-bottom: 235px

          .jobs &
            margin-bottom: 140px

          +respond-to-width(1500)
            margin-bottom: 120px

          .offerte &
            +respond-to-width(1500)
              margin-bottom: 60px


        h2
          color: $blue
          font-size: 2rem
          font-weight: 500
          line-height: 2.875rem
          margin-top: 0
          position: relative
          z-index: 1

          .contact &
            color: black

        .intro-content
          color: $pastelBlue
          font-size: 1.125rem
          line-height: 2rem
          margin-bottom: 30px
          position: relative

          &:before
            content: ''
            display: block
            position: absolute
            width: 300px
            height: 300px
            background-image: url('/img/circles_and_triangles.png')
            top: -125px
            left: -120px
            opacity: 0.5
            z-index: 0

          p
            position: relative
            z-index: 1

        a.button
          width: 225px
          background-color: $red-500
          &:hover
            background-color: lighten($red-500, 10%)
            &:after
              right: 22px
              transform: rotate(90deg) scale(1.2)
          &:after
            transform: rotate(90deg)

          &.pdf
            background-color: $blue-300
            margin-bottom: 15px
            margin-right: 50px
            &:hover
              background-color: lighten($blue-300, 10%)

        .diagonal-line
          opacity: 0.8
          width: 280px
          left: auto
          top: auto
          &.second
            right: -40%
            bottom: 5%
          &.third
            right: -35%
            bottom: -10%


          +respond-to-width(2000)
            &.second
              right: column(-3.5, 12)
            &.third
              right: calc(#{column(-3.5, 12)} + 5%)

          +respond-to-width(1800)
            &.second
              right: column(-2, 12)
            &.third
              right: column(-1.5, 12)
body.contact
  .intro
    > .grid-col
      > .grid-row
        .right
          .intro-content
            a
              text-decoration: none
              color: $blue-300
              font-size: 1.5rem
              font-weight: 500
              line-height: 2.5rem


+respond-to-width(960)
  .intro
    height: auto

    > .grid-col
      width: 100%
      height: 100%
      overflow: visible
      > .grid-row
        flex-direction: column-reverse

        .left, .right
          width: 100%
          margin-left: 0

        .left
          margin-top: 0
          .image, .button-bar
            margin-left: column(-1, 12)
            width: column(14, 12)

          .image
            height: auto

            figure
              img
                display: block

          .red_triangle, .mouse
            display: none

        .right
          padding-left: 0
          padding-bottom: 60px
          h1
            margin-top: 0

          .diagonal-line
            display: none


+respond-to-width(480)
  .intro
    > .grid-col
      > .grid-row
        .left
          .button-bar
            padding: 30px 0
            flex-wrap: wrap
            height: auto
            a.button
              width: 75%
              margin-bottom: 30px
              &:first-child
                margin-right: 0

+respond-to-width(425)
  .intro
    > .grid-col
      > .grid-row
        .left
          .button-bar
            a.button
              width: column(12,14)
        .right
          margin-top: -70px
          h2
            margin-top: 70px

          a.button
            width: 100%