.actual
  @extend .page

  .content-placeholder
    .left-icon
      bottom: 120px

  h1
    display: none
    padding: 60px column(1, 14)
    font-size: 1.6rem
    color: $darkBlue

  .page-impression
    width: column(9, 24)
    padding-top: 60px
    padding-bottom: 0

    .calender
      top: 0
      width: column(6, 9)

    .vacation-link
      margin-top: 60px
      height: 180px
      width: column(6, 9)
      background-color: $yellowOrange
      +flex(center, center)
      transition: background-color 0.3s



      a
        +flex(center, center)
        +flex-rows
        width: 100%
        height: 100%
        color: rgba(white, 0.8)
        font-size: 1.2rem
        text-align: center
        font-weight: bold()
        text-decoration: none

      p
        margin: 0
        padding: 0 10%
        width: 100%
        +align-self(flex-end)

      span
        font-size: 0.9rem
        font-weight: regular()
        margin-top: 10px
        +align-self(flex-start)
        &:after
          content: ''
          +arrowWhite
          margin-left: 10px
          transition: transform 0.3s
          +translate3dRotate(0,0,0)

      &:hover
        background-color: darken($yellowOrange, 4%)
        span
          &:after
            +translate3d(5px,0,0)

  .main
    width: column(15, 24)
    padding: 60px 0 0
    overflow: visible

    .main-placeholder
      padding: 0 column(1, 15) 0 column(2, 15)

    .header-placeholder
      +flex(space-between, center)
      width: 100%

      h3
        font-size: 1.05rem
        font-weight: bold()
        color: $darkBlue
        margin: 0 0 15px

      a
        font-size: 0.9rem
        color: $blue
        text-decoration: none
        margin-bottom: 12px

        &:after
          content: ''
          margin-left: 5px
          +arrowBlue
          +translate3d(0,0,0)
          transition: transform 0.3s

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

    .next-news-items
      padding-left: 0
      +flex(space-between, flex-start)
      +flex-rows

      .button.mobile
        display: none
        margin-left: column(1, 14)
        background-color: $yellowOrange
        &:hover
          background-color: darken($yellowOrange, 4%)

    .relevant-pages
      padding-top: 60px

  .latest-news-item
    position: relative
    width: 100%
    left: column(-1, 15)

    &.mobile
      display: none

    +respond-to-width(840)
      &.mobile
        display: block
        left: 0
        margin-bottom: 50px
      &.desktop
        display: none

    a
      +flex(space-between, flex-start)
      text-decoration: none

      figure
        width: column(10, 15)
        height: 400px
        background-image: url("/img/no-image.jpg")
        background-position: center
        background-size: cover

      .content
        width: column(5, 15)
        padding: 65px 30px
        height: 400px
        background-color: $darkGreen
        color: white
        font-size: 0.9rem
        transition: background-color 0.3s

        .highlighted
          font-weight: bold()
          opacity: 0.7

        h2
          font-size: 1.2rem
          font-weight: bold()
          color: white
          margin: 15px 0 20px

      &:hover
        .content
          background-color: darken($darkGreen, 10%)

  // College styling
  &[class^="vso"]

    h1
      color: $darkTurquoise

    .latest-news-item
      a
        .content
          background-color: $darkTurquoise

          h2
            color: white

        &:hover
          .content
            background-color: darken($darkTurquoise, 4%)

    .main
      .header-placeholder
        h3
          color: $darkTurquoise

        a
          color: $turquoise
          &:after
            +arrowTurquoise

  +respond-to-width(1280)
    .page-impression
      width: 50%
      .vacation-link, .calender
        width: 75%

    .main
      width: 50%
      .latest-news-item
        a
          .content, figure
            width: 50%
            height: 280px
          .content
            padding: 40px 30px
            h2
              margin-top: 5px

  +respond-to-width(840)
    .image-wrapper
      background: none !important

    h1
      display: block

    .page-impression
      .vacation-link, .calender
        width: 100%

      .vacation-link
        margin-top: 0

    .main
      width: 100%
      min-height: 0 !important
      padding-top: 0
      .latest-news-item
        width: column(14, 15)
        left: 0
        a
          figure
            width: column(2, 3)
          .content
            width: column(1, 3)

      .main-placeholder
        width: column(12, 14)
        margin: auto
        padding: 50px 0

        .relevant-pages
          padding-top: 50px


  +respond-to-width(650)
    .latest-news-item
      width: 100%
      a
        display: block
        figure
          width: 100%
          height: 0
          padding-bottom: 65%
        .content
          width: 100%
          height: auto
          padding: 50px 30px

  +respond-to-width(500)
    .main
      .header-placeholder
        width: column(12, 14)
        margin: auto

      .main-placeholder
        width: 100%
        margin: 0 auto

        .relevant-pages
          width: column(12, 14)
          margin: auto

  +respond-to-width(360)
    .main
      .header-placeholder
        a
          display: none

      .next-news-items
        .button.mobile
          display: block
          margin-top: 30px