#site-switch
  height: 100vh
  min-height: 800px
  width: 100%
  +flex(center, center)

  .background
    position: absolute
    z-index: -1
    top: 0
    left: 0
    height: 100%
    min-height: 800px
    width: 100%
    .image-whiter
      position: absolute
      z-index: 5
      top: 0
      left: 0
      height: 50%
      min-height: 480px
      width: 100%
      background-image: url("/img/image-whiter.png")
      background-size: contain
      background-repeat: repeat-x

    .default
      position: absolute
      left: 0
      top: 0
      width: 50%
      height: 100%
      background-position: center
      background-size: cover
      background-image: url("/img/default_image.jpg")
      opacity: 1
      transition: opacity 0.6s

      &.hide
        opacity: 0


    .left, .right
      position: absolute
      bottom: 0
      z-index: 1
      height: 100%
      width: 50%

      &.show
        &:before
          opacity: 1

      &:before
        content: ''
        position: absolute
        height: calc(100% - 30px)
        top: 0
        left: 0
        width: 100%
        opacity: 0
        transition: opacity 0.6s
        background-size: cover
        background-position: center

      &:after
        content: ''
        position: absolute
        z-index: 2
        left: 0
        bottom: 0
        height: 30px
        width: 100%

    .left
      left: 0
      &:before
        background-image: url("/img/umans_home.jpg")
      &:after
        background-color: $fontRed

    .right
      right: 0
      &:before
        background-image: url("/img/isolation_home.jpg")
      &:after
        background-color: $defaultGreen


  .placeholder
    width: 100%
    max-width: 920px
    margin: auto
    .under-title-row
      margin-top: -160px

    .model
      background-color: white
      box-shadow: 0px 3px 40px -5px rgba(0,0,0,0.2)

      .header
        position: relative
        z-index: 1
        background-color: $fontColor1
        +flex(center, center)

        h2
          +font-semi-bold(18px, 21px)
          color: white
          text-align: center

      .choices
        +flex(space-between, flex-start)
        height: 45vh
        min-height: 380px

        a
          +flex(center, center)
          height: 100%
          width: 50%
          .wrapper
            width: 80%

          h3
            +font-bold(18px, 21px)
            color: $fontRed
            margin: 0 0 40px
            text-align: right

          p
            +font-light(30px, 36px)
            color: $fontColor2
            text-align: right
            margin-left: auto

          span
            position: relative
            box-sizing: border-box
            +flex(flex-start, center)
            height: 50px
            width: 260px
            margin-top: 75px
            padding: 0 25px
            color: white
            +font-semi-bold(18px, 24px)
            background-color: $fontRed
            border-radius: 25px
            transition: background-color 0.4s

          &.umans
            span
              margin-left: auto
              &:before
                content: ''
                +arrowRightWhite
                transition: transform 0.4s
                +translate3dRotate(0,0,0, 180deg)
                margin-right: 20px

              &:hover
                background-color: $defaultRedBlock
                &:before
                  +translate3dRotate(-5px,0,0, 180deg)

          &.spouwmuur
            width: calc( 50% - 2px)
            border-left: 2px solid $semiLightGrey
            h3
              color: $defaultGreen
              text-align: left

            p
              text-align: left
              margin-left: 0

            span
              background-color: $defaultGreen
              padding-left: 25px
              &:after
                content: ''
                +arrowRightWhite
                margin-left: 25px
                +translate3d(0,0,0)
                transition: transform 0.4s

              &:hover
                background-color: $selectedGreen
                &:after
                  +translate3d(5px,0,0)

+media-query(700px)
  #site-switch

    .background
      display: none

    .placeholder
      width: 100%
      background-color: $semiLightGrey

      .under-title-row
        margin-top: 0px
        padding-top: 40px
        background-color: white
        .under-title .customer-service
          margin-bottom: 0

      .model
        background-color: transparent

        .choices
          display: block
          height: auto

          a
            width: 100%
            height: 400px
            background-color: white
            margin: 40px 0
            p
              font-size: 21px

            &.umans
              border-bottom: 15px solid $fontRed
              p, h3
                text-align: left
              span
                margin-left: 0

                &:before
                  display: none

                &:after
                  content: ''
                  +arrowRightWhite
                  margin-left: 40px
                  +translate3d(0,0,0)
                  transition: transform 0.4s
                &:hover
                  &:after
                    +translate3d(5px,0,0)

            &.spouwmuur
              width: 100%
              border-left: none
              border-bottom: 15px solid $defaultGreen