/*==========================================================================
  Service block | Landingspage
  ========================================================================== */

.service-block
  position: relative
  background-color: $globalBlue
  padding-bottom: 80px
  +respond-to-width(840)
    padding-bottom: 50px

  &:before
    content: ''
    position: absolute
    top: 0
    right: 0
    width: 50%
    height: 60px
    background-color: white

    +respond-to-width(840)
      display: none

  .grid-row
    position: relative

  .grid-col
    vertical-align: top

  /* Service content
   ========================================================================== */
  .content
    padding-top: 60px

    .logo
      +sprite(-200px -220px, 94px, 200px)
      display: block

    +respond-to-width(840)
      width: 100%
      margin-left: 0
      padding-top: 20px
      .logo
        display: none

    h2
      font-size: 1.2rem
      color: white
      opacity: 1
      font-weight: bold()
      margin: 30px 0 35px

      &.xxl
        font-size: 3rem

    .text
      font-size: 0.9rem
      line-height: 1.8
      p
        color: white
        margin: 0
        opacity: 0.7

      h2
        font-size: 1.3rem

    .cta
      +flex(center, center)
      border: 1px solid white
      border-radius: 25px
      width: 220px
      height: 50px
      margin-top: 60px

      color: white
      font-weight: bold()
      text-decoration: none

      &:after
        content: ''
        position: relative
        top: 2px
        +arrowWhite
        margin-left: 10px
        +translate3d(0,0,0)
        transition: transform 0.3s

      &:hover
        &:after
          +translate3d(5px,0,0) 

  /* Image
   ========================================================================== */
  .image
    width: column(11, 24)
    background-color: $globalBlue

    +respond-to-width(840)
      display: none

    img
      width: 100%

  // Internal Link
  .internalLink
    position: absolute
    top: 30px
    right: -60px
    +flex(center, center)
    width: 60px
    height: 60px
    border-radius: 100%
    background-color: $yellow
    transition: background-color 0.3s

    +respond-to-width(900)
      display: none

    &:after
      content: ''
      +arrowWhite
      display: inline-block
      pointer-events: none
      +translate3dRotate(0,0,0,-90deg)
      transition: transform 0.3s

    &:hover
      background-color: $darkYellow
      &:after
        +translate3dRotate(0, -5px,0, -90deg)