.diensten-menu

  .grid-col
    vertical-align: top
    display: flex
    flex-direction: column
    flex-flow: wrap
    width: 100%

    a
      flex-basis: 100%
      flex-grow: 0

      width: 100%
      font-family: "Lato", sans-serif
      font-size: 24px
      line-height: 100px
      letter-spacing: -0.01px
      font-weight: bold
      height: 100px
      margin-bottom: 70px
      border: none
      background: none
      text-align: left
      color: $fontGray
      transition: color .25s ease-in-out 0.2s

      &.active
        color: $lightOrange

        &.arrow:after
          background-position: -84px center

      &.dakrenovatie
        > svg
          .cls-2
            stroke-width: 5.38px

      &:before
        content: ''
        margin: 0 25% 0 2.5%
        +translate3d(0,0,0)

      &.arrow:after
        right: 8%
        background-position: -40px center
        background-size: 700%

      svg
        width: 48px
        position: absolute
        top: 0
        left: 27px
        height: 100%

        .cls-1,.cls-2
          fill: none
          stroke-miterlimit: 10

        .cls-1
          stroke: #fff

        .cls-2
          stroke: $lightOrange


      &.na-isolatie
        > svg
          .cls-1
            stroke: $lightOrange

          .cls-2
            stroke: #fff

        &:hover
          > svg
            .cls-1
              stroke: $fontGray

            .cls-2
              stroke: #fff


      .bg
        background: $fontGray
        width: 100px
        height: 100px
        display: block
        position: absolute
        top: 0
        left: 0
        border-radius: inherit
        z-index: -1
        transition: background .25s ease-in-out, width .25s ease-in-out 0s

      &:hover
        color: white
        transition: color .25s ease-in-out 0s

        &.arrow:after
          background-position: 0px center
          right: 7%

        .bg
          background: $darkOrange linear-gradient(90deg, $lightOrange 0%, $darkOrange 100%)
          width: 100%
          transition: background .25s ease-in-out, width .25s ease-in-out 0s

        svg
          .cls-2
            stroke: $fontGray

+respond-to-width(426)
  .diensten-menu
    .grid-col
      a

        height: 80px

        .bg
          width: 80px
          height: 80px

        svg
          width: 42px
          top: 5%
          left: 21px