.content-block
  position: relative
  background: #fff
  min-height: 400px

  @extend %clearfix

  a:hover
    text-decoration: underline

  .description
    float: left
    padding: 120px

    width: 50%

    font-size: 1.222em
    line-height: 1.2727272727

    // Full screen on small
    +respond-to(small)
      width: 100%

    &:not(.right)
      // One medium we halve the outside and top/bottom padding
      +respond-to(medium)
        padding: 60px 120px 60px 60px

      +respond-to(small)
        padding: 60px 120px

      +respond-to(mobile)
        padding: 60px

    &.right
      float: right

      // One medium we halve the outside and top/bottom padding
      +respond-to(medium)
        padding: 60px 60px 60px 120px

      +respond-to(small)
        padding: 60px 120px

      +respond-to(mobile)
        padding: 60px

    h2
      text-align: center

    .waves-holder
      margin: 30px 0

      width: 100%
      text-align: center

      // Less margin top on medium
      +respond-to(medium)
        margin: 20px 0
        +transform(scale(.8))
      .waves
        display: inline-block
        +sprite(63px, 15px, -10px -120px)

  .image
    +position(absolute, 0 0 null null)
    overflow: hidden

    width: 55%
    height: 100%

    a
      display: block
      width: 100%
      height: 100%

    $floating-logo-size: 260px

    .floating-logo
      +position(absolute, null -20px -20px null)
      z-index: 10
      width: $floating-logo-size
      height: $floating-logo-size
      background: url(/images/structure/floatingLogoRight.svg)
      background-size: $floating-logo-size $floating-logo-size

    &.left
      right: auto
      left: 0

      .water-effect-background
        left: auto
        right: 0
        background: url(/images/structure/water_effect_content_image_right.png) repeat-y left top

        &.vertical
          background: url(/images/structure/water_effect_content_image_top.png) repeat-x right top

      .floating-logo
        right: auto
        left: -20px
        background: url(/images/structure/floatingLogoLeft.svg)

    // Full width beneath image on small
    +respond-to(small)
      position: relative
      width: 100%

    img
      // Full width beneath image on small
      +respond-to(small)
        position: relative

        // Are on element itself by javascript,
        // so therefor important is required
        top: 0 !important
        left: 0 !important
        margin-top: 0 !important
        margin-left: 0 !important
        width: 100% !important
        height: auto !important



.water-effect-background
  +position(absolute,0 null null 0)
  z-index: 10

  width: 230px
  height: 100%

  background: url(/images/structure/water_effect_content_image_left.png) repeat-y right top

  +respond-to(small)
    display: none

  &.vertical
    display: none
    width: 100%
    height: 115px

    background: url(/images/structure/water_effect_content_image_top.png) repeat-x right top

    +respond-to(small)
      display: block