/*==========================================================================
  School Selection block | Landingspage
  ========================================================================== */

.school-selection
  position: relative

  .background
    position: absolute
    z-index: -1
    left: 0
    top: 0
    width: 100%
    height: calc( 50% - 30px )
    &:before, &:after
      content: ''
      position: absolute
      top: 0
      display: block
      height: 100%
      width: 50%
      background-size: cover
      background-position: right bottom

    // Background side for so
    &:before
      left: 0
      background-image: url('/img/forest_top_view.jpg')
      transform: scaleX(-1)
    // Background side for vso
    &:after
      right: 0
      background-image: url('/img/forest_top_view_green.jpg')

  /* Selection
   ========================================================================== */

  .selection-block
    position: relative
    top: -60px
    margin-bottom: -60px

    +respond-to-width(1400)
      .school-type
        width: column(11, 24)
        &.so
          margin-left: column(1, 24)

    .school-type
      h2
        height: 60px
        +flex(center, center)
        background-color: $pink
        color: white
        font-size: 1.2rem
        font-weight: bold()

      // Wrapper
      .selection
        +flex(space-between, flex-start)
        background-color: $darkBlue

        //Type logo
        .type-logo
          width: 50%
          +flex(center, flex-start)
          padding: 60px 0

          figure
            +sprite(0 0, 94px, 200px)

        /* Schools
           ========================================================================== */
        .schools
          width: 50%
          font-size: 0
          line-height: 0

          a
            +flex(flex-start, flex-end)
            position: relative
            height: 200px
            width: 100%
            margin: 0
            padding: 15px 30px
            background-color: $landingsBlue
            text-decoration: none
            transition: background-color 0.3s

            +respond-to-width(1300)
              height: 165px

            +respond-to-width(960)
              padding: 15px 18px

            &:nth-child(even)
              background-color: $bluer

            p
              margin: 0
              color: white
              font-size: 1.3rem
              line-height: 1.3
              font-weight: bold()
              sub
                display: block
                opacity: 0.7
                font-size: 1rem
                font-weight: regular()

            span
              position: absolute
              right: 30px
              bottom: 15px
              +sprite(-95px -365px, 40px, 31px)
              +translate3d(0,0,0)
              transition: transform 0.3s

              +respond-to-width(1300)
                +arrowWhite
                bottom: 25px

              +respond-to-width(1080)
                bottom: 22px

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

            &:hover
              background-color: darken($landingsBlue, 4%)
              span
                +translate3d(15px,0,0)

              &:nth-child(even)
                background-color: lighten($bluer, 5%)

      // Colors for VSO and drop shadow
      &.vso
        &:before
          content: ''
          position: absolute
          left: 0
          top: 0
          display: block
          background-image: url("/img/horizontal-gradient.png")
          background-size: contain
          background-repeat: repeat-y
          height: 100%
          width: 40px

        h2
          background-color: $yellow
        .selection
          background-color: $darkTurquoise

          .type-logo
            figure
              +sprite(0 -205px, 94px, 200px)

          .schools
            a
              background-color: $landingsTurquoise

              &:nth-child(even)
                background-color: $landingsTurquoise2

              &:hover
                background-color: darken($landingsTurquoise, 2%)
                &:nth-child(even)
                  background-color: lighten($landingsTurquoise2, 5%)

    /* Styling Icon
     ========================================================================== */
    .icon
      position: absolute
      right: -60px
      bottom: -45px
      width: 60px
      height: 76px
      &:after
        content: ''
        +sprite(-256px 0, 60px, 76px)
        display: block

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


  /* Mobile view
     ========================================================================== */

  +respond-to-width(840)
    .selection-block
      top: 0
      margin-bottom: 0
      width: 100%

      .school-type
        width: 50%
        margin: 0
        h2
          display: none

        &.so, &.vso
          padding: 0

        &.so
          margin: 0 auto

        &.vso
          &:before
            display: none

        .selection
          .type-logo
            display: none

          .schools
            width: 100%

            a
              height: 130px

    .background
      display: none
      height: 100%
      &:before, &:after
        top: auto
        width: 100%
        height: 50%

      // Background side for vso
      &:after
        top: auto
        bottom: 0

    +respond-to-width(350)
      .selection-block
        .school-type
          .selection
            .schools
              a
                height: 110px

  //+respond-to-width(450)
  //  .selection-block
  //    .school-type
  //      .selection
  //        .type-logo
  //          display: none
  //
  //        .schools
  //          width: 100%
  //
  //          a
  //            height: 130px