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

.home

  .sidebar

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

    .sidebar-content

      .grid-row
        position: relative
        &:before
          content: ''
          position: absolute
          z-index: 1
          left: column(2, 24)
          top: 0
          display: block
          width: column(7, 24)
          height: 100%
          background-color: $lightGrey

        &:after
          content: ''
          position: absolute
          left: column(2, 12)
          top: 0
          width: column(10, 12)
          height: 100%
          background-color: $almostWhite

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

        //&:before
        //  content: ''
        //  position: absolute
        //  z-index: -1
        //  left: column(2, 9)
        //  top: 0
        //  display: block
        //  width: column(7, 9)
        //  height: 100%
        //  background-color: $lightGrey

        .agenda
          padding-bottom: 20px

        .discover-msl
          margin-left: column(2, 8)
          width: column(7, 8)


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

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

        .agenda-block
          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-block
            background-color: $lightGrey
            padding: 40px column(1, 14) 30px
            width: 100%
            +order(2)
            +flex(space-between, flex-start)

            .agenda
              width: 55%

            .discover-msl
              width: 40%
              margin-left: 0
              padding: 60px 0 60px 20px

            +respond-to-width(600)
              display: block
              .agenda
                width: 100%

              .discover-msl
                width: 100%
                max-width: 300px
                margin-left: auto
                margin-right: auto
                padding: 40px

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

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


  .our-youth
    margin-top: -160px
    padding-top: 280px

    +respond-to-width(1300)
      padding-top: 240px

      .icon-buttons
        margin-left: 0