body.service_solarpanels
  .services-content

    .breadcrumb
      margin: 105px 0 70px 0

    &:after
      content: ""
      opacity: 0.5
      top: 0
      left: 0
      bottom: 0
      right: 0
      position: absolute
      z-index: -5
      background: white url('/img/clouds_bg.jpg') no-repeat

  h1
    font-style: italic
    font-size: 40px
    line-height: 38.46px
    letter-spacing: -0.2px
    color: $fontGray
    margin: 58px 0

  .services-intro
    padding: 0
    height: 1400px
    z-index: 1

    .grid-row
      .grid-col
        vertical-align: top

        h1
          margin: 0 0 35px 0

          svg
            width: 48px
            margin-right: 20px

            .cls-1
              stroke: $fontGray

            .cls-2
              stroke: $lightOrange

        .text
          font-size: 26px
          line-height: 38px
          padding-right: column(1.9)
          margin-bottom: 80px
          color: $fontLightGray

        .first-img
          width: 100%
          padding-bottom: 42%
          display: block
          background-size: cover
          margin-bottom: 90px

        .second-img, .third-img
          padding-bottom: 45%
          background-size: cover

        .third-img
          width: column(6.2)

    .diensten-menu
      height: 740px
      margin-top: 45px

      .grid-col
        vertical-align: top
        display: flex
        flex-direction: column

        .button
          width: 100%
          font-size: 27px
          height: 96px
          margin-bottom: 0px
          border: none
          background: none
          border-bottom: solid 2px rgba(0,0,0,0.08)
          text-align: left
          border-radius: unset
          padding-left: 0
          transition: all .25s ease-in-out

          svg
            width: 0
            height: 36px
            top: 30px
            left: 0
            transition: width .25s ease-in-out

            .cls-1
              stroke: $fontGray

            .cls-2
              stroke: $lightOrange


          &.arrow:after
            right: 0

          &:before
            margin: 0
            content: ''


          &:hover
            color: $lightOrange
            padding-left: 60px
            border-bottom: solid 2px $lightOrange
            transition: all .25s ease-in-out

            svg
              width: 48px

    .button
      margin-bottom: 30px

    .right
      position: relative
      .big-hexagon-holder
        position: absolute
        bottom: 10%
        left: 9%
        z-index: -1
        transform: rotate(15deg) scale(0.8)


  .diensten-blok
    //background: white url('/img/clouds_bg.jpg') no-repeat
    padding-top: 128px
    position: relative

    h1
      margin-bottom: 60px
      line-height: 60px
      text-align: center

    .icon-holder
      height: 645px
      background-color: $fontGray
      margin-left: column(0.5)
      width: column(13)
      z-index: 1
      padding-top: 5px

      .grid-row
        height: 275px

        .grid-col
          padding: 90px 0 0 65px
          text-align: center
          color: white
          width: column(4.45)
          height: 100%
          letter-spacing: 0.2px

          h4
            font-size: 28px
            line-height: 62px

          img
            width: 55px
            height: 70px
            margin: 0 auto

          p
            font-size: 18px
            line-height: 24px
            margin-top: -8px

          .button
            top: 70px

    .hexagon-frame
      height: 100%
      width: 100%
      position: absolute
      top: 0
      overflow: hidden
      z-index: 0

      .big-hexagon-holder
        left: 62.5%
        position: relative
        top: 25%

        svg
          transform: rotate(10deg) scale(1.1)

          .st0
            fill: url(#SVGID_1_)

    .dienstenLink
      width: 100%
      font-size: 19px
      line-height: 24px
      text-align: center
      padding: 67px 0 125px

      a
        color: $fontLightGray
        text-decoration: none
        border-bottom: solid 2px $fontLightGray
        padding-bottom: 1px


  .soorten-dakbedekking
    background-color: $fontGray
    position: relative
    overflow: visible
    font-size: 1em
    line-height: 1.6em
    height: 485px
    margin-bottom: 165px
    padding-top: 117px
    color: white

    .left
      margin-left: column(1.2)
      width: column(3.5)

      h2
        margin: 0 50px 75px 0
        font-style: italic
        font-size: 35px
        line-height: 38.46px
        letter-spacing: -0.35px

      .imgHolder
        width: 100%
        padding-bottom: 95%
        background-repeat: no-repeat
        background-size: cover

    .textholder
      vertical-align: top
      font-size: 18px
      line-height: 28px
      width: column(7)

      .text
        p
          margin: 4px 0

    .imgholder
      //width: column(7)
      //margin-left: column(1)
      vertical-align: bottom
      height: 100%
      background-size: cover



  .dienstenLink
    width: 100%
    font-size: 18px
    line-height: 28px
    color: $fontLightGray
    text-align: center
    margin: -50px 0 120px 0

    &:after
      content: "-"
      color: $darkOrange
      font-weight: bold
      display: block
      margin: 18px
      font-size: 32px

    a
      color: $fontLightGray
      text-decoration: none
      border-bottom: solid 2px $fontLightGray
      padding-bottom: 1px

  .call-to-action-contact
    left: column(-1)


  .uit-je-dak
    background: linear-gradient(-90deg, $lightOrange 50%, $darkOrange 100%)
    position: relative
    overflow: visible
    font-size: 1em
    line-height: 1.6em
    height: 485px

    .textholder
      vertical-align: top
      letter-spacing: 0.2px
      margin-left: column(1.95)

      h1
        margin: 140px 0 34px 0
        font-style: italic
        font-size: 30px
        line-height: 42px
        letter-spacing: -0.3px
        color: white

    .imgholder
      width: column(7)
      margin-left: column(1)
      vertical-align: bottom
      height: 100%
      background-size: cover