.event-calendar {
  margin-bottom: 100px;
  padding: 40px 0 60px 0;
  background-color: #53738a;
  color: white;

  &__hl {
    text-align: center;
    color: white;
  }

  &__single-event {
    margin-top: 20px;

    @media screen and (max-width: 991px) {

      &:first-child {
        margin-top: 0;
      }

      margin-top: 50px;
    }

    @media screen and (max-width: 767px) {
      text-align: center;
    }

    &--date {
      margin-bottom: 20px;
      display: inline-block;
      font-family: Raleway, sans-serif;
      font-size: 20px;
      font-weight: bold;

      &__month {
        display: inline-block;
      }

      &__year {
        display: inline-block;
      }
    }

    &__day-name-description {

      .row {

        @media screen and (max-width: 767px) {
          justify-content: center;
        }
      }

      &--day {
        font-family: Hand_Of_Sean_Demo, sans-serif;
        font-size: 26px;
        display: inline-block;
        background-color: #8ca6b9;
        padding: 12px 20px 10px 20px;
        
        @media screen and (max-width: 767px) {
          margin-bottom: 20px;
        }
      }

      &--style {
        margin-left: 70px;
        display: inline-block;
        position: absolute;
        bottom: 0;
        
        @media screen and (max-width: 767px) {
          margin-left: 0;
          position: relative;
        }

        &__name {
          margin-left: 30px;
          font-family: Raleway, sans-serif;
          font-size: 16px;
          font-weight: bold;

          @media screen and (max-width: 767px) {
            margin-left: 0;
          }
        }

        &__description {
          margin-left: 30px;
          font-family: Raleway, sans-serif;
          font-size: 16px;
          font-weight: bold;

          @media screen and (max-width: 767px) {
            margin-left: 0;
          }
        }
      }
    }

    &--teaser {
      margin-top: 15px;
      color: #fff;
      height: 135px;

      @media screen and (max-width: 991px) {
        height: fit-content;
      }
    }

    &--read-more {
      a {
        font-weight: bold;
        color: #fff;
        text-decoration: none;
      }
    }
  }


  &__show-all {

    &--row {
      margin: 40px 0 0 0;

      @media screen and (max-width: 767px) {
        justify-content: center;
      }

      &__inner {

        &--button {
          outline: none !important;
          box-shadow: transparent !important;
          font-family: Raleway, sans-serif;
          border: none;
          background-color: #fff;
          padding: 10px 45px;
        }

      }
    }
  }
}