.calender

  .sidebar
    padding-bottom: 60px

    +respond-to-width(650)
      background-color: $lightGrey

      &:before
        height: 350px
        width: 100%

      .fill-out
        display: none

    .sidebar-content
      padding-top: 40px
      h1
        margin: 0 0 40px column(1, 12)
        padding: 0
        font-size: 0.85rem
        line-height: 1.2
        font-weight: 300
        color: white
        text-transform: uppercase

        +respond-to-width(650)
          margin-left: 0


        +respond-to-width(450)
          margin-left: column(1, 14)

        strong
          margin-top: 3px
          display: block
          font-size: 1.7rem
          line-height: 1.2
          letter-spacing: 1.6px

  .activities-block
    width: column(7, 12)
    background-color: white
    margin-left: column(1, 12)

    +respond-to-width(1250)
      width: column(8, 12)

    +respond-to-width(850)
      width: column(10, 12)

    +respond-to-width(650)
      width: 100%
      margin-left: 0

    .activities
      padding: 0

      h4, h3
        background-color: $yellow
        padding: 15px 60px
        margin: 0
        color: white
        +dubaiBold
        font-size: 0.9rem
        letter-spacing: 2.56px
        text-transform: uppercase

        +respond-to-width(525)
          padding: 15px 30px

      h3
        background-color: $darkYellow

      article
        +flex(space-between, center)
        margin: 0 40px 0 60px

        +respond-to-width(525)
          margin: 0 0 0 30px
          padding-right: 10px

        a
          +flex(space-between, center)
          text-decoration: none
          width: 100%
          padding: 20px 0

        + article
          border-top: 1px solid rgba($darkBlue2, 0.2)

        .date
          +flex(flex-start, flex-start)
          font-size: 3rem
          line-height: 1
          +dubaiBold
          color: $darkGray

          sup
            +dubai
            color: $yellow
            font-size: 0.5em
            margin-left: 5px

          +respond-to-width(525)
            font-size: 2.4rem

        p
          margin: 0
          width: calc(100% - 100px)
          padding-left: 50px
          font-size: 0.9rem
          line-height: 1.1
          color: $darkGray

          +respond-to-width(650)
            padding-left: 20px

          +respond-to-width(525)
            width: calc(100% - 50px)

          strong
            display: block
            font-size: 1.05rem
            +dubaiBold

          span
            display: block
            margin-top: 10px
            &:after
              position: relative
              top: 1px
              content: ''
              display: inline-block
              margin-left: 10px
              +sprite(-35px -14px, 15px, 10px)
              transform: translate3d(0, 0,0)
              transition: transform 0.3s

        &:hover
          p
            span
              &:after
                transform: translate3d(5px, 0,0)

  +respond-to-width(450)
    .sidebar
      background-color: $darkBlue2
      &:before
        display: none

      .fill-out
        display: none
      .sidebar-content
        .grid-row
          width: 100%