/*==========================================================================
  Header block - Overview
  ========================================================================== */

.overview-header

  .grid-row
    position: relative

    +respond-to-width(1350)
      &.has-video
        .content
          display: block
          width: 85.7142857143%
          margin: 0 auto
          padding: 50px 0

  .grid-col
    vertical-align: top

  /* Image slider
   ========================================================================== */
  .image-slider
    margin-left: column(-1, 12)
    position: relative

    .youtube-video
      margin-bottom: 50px
      +respond-to-width(1350)
        display: none


    figure
      position: relative
      width: 100%
      padding-bottom: 65%

      // Image
      .image
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        opacity: 0
        z-index: 1
        transition: opacity 0.4s

        &.active
          opacity: 1
          z-index: 2

        // Separate span for different image size
        span
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          background-size: cover
          background-position: center

          &.small
            display: none

      .image-slider-nav
        position: absolute
        right: 0
        bottom: 0
        z-index: 5
        width: column(1, 6)
        +flex(space-between, center)
        background-color: rgba($darkerBlue, 0.5)

        .nav-button
          +flex(center, center)
          height: 50px
          width: 50%
          background-color: transparent
          transition: background-color 0.3s
          cursor: pointer

          &:after
            content: ''
            position: relative
            top: 2px
            +arrowWhite
            display: inline-block
            opacity: 0.7

          &.previous
            &:after
              transform: rotate(180deg)

          &:hover
            background-color: rgba($darkerBlue, 0.3)

        [class^="vso"] &
          background-color: rgba($turquoise, 0.5)
          .nav-button
            &:hover
              background-color: rgba($turquoise, 0.3)



  /* News at Zuiderbos Block
   ========================================================================== */
  .new-at-zuiderbos
    position: relative
    z-index: 5
    background-color: $pink
    padding: 45px column(1, 24)
    margin-top: -200px

    [class^="vso"] &
      background-color: $turquoise

    p
      font-size: 1.2rem
      color: white
      font-weight: bold()
      margin: 0 0 35px

    ul
      list-style: none
      padding: 0
      margin: 0 0 35px
      font-size: 0.9rem
      line-height: 1.2

      li
        position: relative
        padding-left: 15px
        margin-bottom: 10px
        a
          color: white
          text-decoration: none
          opacity: 1
          transition: opacity 0.2s

          &:before
            content: '\203A'
            position: absolute
            left: 0
            top: 0

          &:hover
            opacity: 0.7
    >a
      +flex(center, center)
      margin: auto
      border: 1px solid white
      width: 180px
      height: 40px
      border-radius: 20px

      font-size: 1rem
      color: white
      font-weight: bold()
      text-decoration: none
      opacity: 1
      transition: opacity 0.3s
      &:after
        content: ''
        position: relative
        top: 2px
        +arrowWhite
        margin-left: 12px
        +translate3d(0,0,0)
        transition: transform 0.3s

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

  /* Header content
   ========================================================================== */
  .content
    h1
      margin: 0 0 80px
      font-size: 2.5rem
      color: white
      font-weight: bold()

    .padding-block
      height: 60px

      [class^="foundation"] &
        height: 120px

    .youtube-video
      display: none
      +respond-to-width(1350)
        display: block


    .text
      color: #b8d6e6
      margin-bottom: 20px
      font-size: 1rem
      p
        color: $lightPurple

      a
        font-weight: bold
        color: $purple

      ul, ol
        padding-left: 20px
        li
          color: $lightPurple

      ul, ol
        padding-left: 20px
        list-style: none

        li
          position: relative
          padding-left: 20px
          //font-size: 0.8rem
          color: $lightPurple

          &:before
            content: '\2022'
            position: absolute
            color: $lightPurple
            font-size: 1.2rem
            line-height: 1
            left: -20px
            top: 3px

      ol
        counter-reset: ol-counter
        li
          &:before
            counter-increment: ol-counter
            content: counter(ol-counter)'.'
            font-size: 1rem
            top: 6px

    .page-links
      margin: 80px 0 40px
      p
        font-size: 0.9rem
        font-weight: bold()
        color: white
        //margin: 0 0 20px
        opacity: 0.8

      ul
        display: inline-block
        vertical-align: top
        width: 49%
        list-style: none
        padding: 0
        margin: 0
        font-size: 0.775rem
        line-height: 1.2

        li
          position: relative
          padding-left: 15px
          margin-bottom: 10px
          a
            color: $blue
            text-decoration: none
            transition: color 0.2s

            &:before
              content: '\203A'
              position: absolute
              left: 0
              top: 0

            &:hover
              color: darken($blue, 20%)

    // Color styling for college
    [class^="vso"] &
      .text
        p
          color: $textTurquoise

        a
          color: $darkTurquoise

        ul, ol
          li
            color: $textTurquoise
            &:before
              color: $textTurquoise

      .page-links
        p
          color: $turquoise
        ul
          li
            a
              color: white
              &:hover
                color: rgba(white, 0.7)

    [class^="services"] &,
    [class^="foundation"] &,
    [class^="jobs"] &,
    [class^="academy"] &
      .text
        p
          color: $servicesLighterBlue

        a
          color: white

        ul, ol
          li
            color: $servicesLighterBlue
            &:before
              color: white

      .page-links, .relevant-pages
        p
          color: $servicesLightBlue
        ul
          li
            a
              color: white
              &:hover
                color: rgba(white, 0.7)

  //Styling icon
  .icon
    position: absolute
    z-index: 40
    right: -30px
    bottom: -60px
    width: 60px
    height: 143px

    &:after
      content: ''
      display: block
      +sprite(-256px -78px, 60px, 143px)

    [class^="vso"] &
      &:after
        +sprite(-379px -78px, 60px, 143px)

  +respond-to-width(1000)
    .content
      width: column(6, 12)