/* ==========================================================================
   Home page
   ========================================================================== */

.actual

  .sidebar

    .sidebar-content
      &:after
        content: ''
        position: absolute
        right: 0
        top: 0
        width: 50%
        height: calc( 100% - 145px )
        background-color: $almostWhite

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

      .grid-row
        position: relative

        +respond-to-width(840)
          width: 100%

        &:before
          content: ''
          position: absolute
          z-index: 1
          left: column(1, 12)
          top: 0
          display: block
          width: column(6, 12)
          height: 100%
          background-color: white

          +respond-to-width(840)
            left: column(2, 12)



        .photo-albums-block
          vertical-align: top
          width: column(7, 12)
          padding: 60px column(1, 24) 30px 0

        .akkoords-block
          vertical-align: top
          width: column(5, 12)
          padding: 60px 0 175px column(1, 24)

        +respond-to-width(840)
          .photo-albums-block
            width: 100%
            padding: 40px column(1, 14) 30px

          .akkoords-block
            width: 100%
            padding: 40px column(1, 14) 40px
            background-color: $almostWhite



  .news-calender
    position: relative
    background-color: $almostWhite

    &:after
      content: ''
      position: absolute
      right: 0
      top: 0
      width: 50%
      height: 100%
      background-color: $yellow

    .grid-row
      position: relative

      &:after
        content: ''
        position: absolute
        z-index: 1
        right: column(1, 12)
        top: 0
        width: column(7, 24)
        height: 100%
        background-color: $lightGrey


    .agenda
      position: relative
      z-index: 2
      vertical-align: top
      width: column(9, 24)
      min-height: 200px
      padding: 60px 0 60px column(1, 24)
      overflow: visible

      h3, .read-more
        margin-left: 0
        text-align: left
        padding-left: 30px

      ul
        li
          +flex(flex-start, center)
          a
            +flex(flex-start, center)

          .content
            +flex(flex-start, center)
            p
              text-align: left

          .date
            left: auto
            right: 0

    .news-block
      position: relative
      z-index: 2
      vertical-align: top
      width: column(15, 24)
      min-height: 200px
      padding: 60px column(1, 24) 20px 0
      background-color: $almostWhite

    +respond-to-width(1100)
      .grid-row
        &:after
          width: column(13, 24)

      .agenda
        padding-top: 40px
        width: column(13, 24)

      .news-block
        padding-top: 40px
        width: column(11, 24)

    +respond-to-width(840)
      .grid-row
        width: 100%
        +flex(flex-start, flex-start)
        +flex-rows

        &:before, &:after
          display: none

        .agenda
          background-color: $lightGrey
          padding: 40px column(2, 14) 40px
          width: 100%
          +order(2)
          //+flex(space-between, flex-start)

          +respond-to-width(550)
            padding: 40px column(1, 14) 40px


          +respond-to-width(420)
            padding-left: 0
            padding-right: 0

        .news-block
          width: 100%
          padding: 50px column(1, 14) 30px
          +order(1)