#header.fixed_height + #archive_events {
  min-height: calc(100vh - #{$header-height}px - #{$footer-height}px - #{$subfooter-height}px);
}

#header.floating + #archive_events {
  min-height: calc(100vh - #{$footer-height}px - #{$subfooter-height}px);

  .events-header {
    padding-top: calc(#{$header-height}px + 70px);
  }
}

#archive_events {
  &.row {
    padding-right: calculateRem(10);
    padding-left: calculateRem(10);
  }

  .main-content {
    header.events-header {
      padding-top: calculateRem(70);
      padding-bottom: calculateRem(70);
    }
  }
}

.events-calendar-container {
  display: flex;

  padding-bottom: calculateRem(50);

  @include breakpoint(mobile) {
    flex-direction: column;
  }
  @include breakpoint(laptop) {
    flex-direction: row;
  }
  .events-container {
    @include breakpoint(mobile) {
      width: 100%;

      padding-bottom: calculateRem(50);
    }
    @include breakpoint(laptop) {
      height: 70vh;
      width: 60%;

      padding-bottom: 0;
    }
    overflow: scroll;
    .event-group {
      .event-date {
        display: flex;
        justify-content: space-between;

        padding-top: calculateRem(15);
        padding-right: calculateRem(20);
        padding-bottom: calculateRem(15);
        padding-left: 0;

        // background-color: $dark-gray;
        color: $primary-color;

        h5 {
          margin-bottom: 0;
          text-transform: uppercase;
        }
      }
    }
    .event-container {
      & > .row {
        padding-right: 0;
        padding-left: 0;
      }
      &:not(.empty) {
        .event-opener {
          cursor: pointer;
          &:hover {
            background-color: $primary-color;
            color: setTextColor($primary-color);
          }
        }
      }
      .event-opener {
        display: flex;
        justify-content: space-between;

        padding-top: calculateRem(30);
        padding-right: calculateRem(20);
        padding-bottom: calculateRem(30);
        padding-left: calculateRem(20);

        background-color: $light-gray;

        &:not(.active) {
          margin-bottom: calculateRem(3);
        }
        &.active {
          background-color: $primary-color;
          color: setTextColor($primary-color);
        }
        h4 {
          margin-bottom: 0;
        }
        .event-title-container {
          p {
            margin-bottom: 0;
          }
        }
      }
      .event {
        padding-top: calculateRem(25);
        padding-right: calculateRem(15);
        padding-bottom: calculateRem(25);
        padding-left: calculateRem(15);

        display: none;

        .website {
          margin-top: calculateRem(15);
        }

        .additional-info {
          display: flex;
          justify-content: space-between;

          margin-top: calculateRem(15);

          padding-right: 0;
          padding-left: 0;
        }
      }
    }
  }
  .events-sidebar {
    @include breakpoint(mobile) {
      width: 100%;
    }

    @include breakpoint(laptop) {
      padding-left: calculateRem(25);
      width: 40%;
    }
    .event-calendar {
      border: 1px solid $light-gray;
      box-shadow: 0 6px 10px 0 rgba(0,0,0,0.11);

      table {
        width: 100%;
        border-collapse: collapse;
        tr {
          td {
            padding-top: calculateRem(5);
            padding-right: calculateRem(8);
            padding-bottom: calculateRem(5);
            padding-left: calculateRem(8);

            text-align: center;
            border: 1px solid $light-gray;
            border-collapse: collapse;

            overflow: hidden;
            .calendar-date-link {
              color: $dark;
              span.cal-number {
                cursor: pointer;
                &:hover {
                  background-color: $light-gray;
                }
                &.selected {
                  background-color: darken($light-gray, 10%);
                }
              }
            }
            span.cal-number {
              display: inline-block;
              height: calculateRem(30);
              width: calculateRem(30);
              padding: 2px;
              border-radius: 50%;
              border: none;
              text-align: center;
              @include breakpoint(mobileonly) {
                font-size: 16px;
                line-height: 16px;
              }
              &.today-date {
                background-color: $primary-color;
                color: setTextColor($primary-color);
              }
            }
            .number-days {
              height: 30px;
              text-align: left;

              .category-circle {
                color: $primary-color;

                font-size: 8px;
              }
            }
          }
        }
      }
      .calendar-header {
        padding-top: calculateRem(15);
        padding-right: calculateRem(20);
        padding-bottom: calculateRem(15);
        padding-left: calculateRem(20);

        display: flex;
        justify-content: space-between;

        h2 {
          display: flex;
          align-items: center;
        }
        h5 {
          margin-bottom: 0;

          text-transform: uppercase;
          color: $primary-color;
        }
      }
    }
    .categories-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      padding-top: calculateRem(20);
      padding-right: calculateRem(25);
      padding-bottom: calculateRem(20);
      padding-left: calculateRem(25);

      .category-container {
        padding-top: calculateRem(5);
        padding-right: calculateRem(12);
        padding-bottom: calculateRem(5);
        padding-left: calculateRem(12);

        input[type=checkbox] {
          & + label {
            text-transform: none;
          }
        }
      }
    }
  }
}

.group.story-group.single-event {
  .row.story-row {
    .event-container {
      .event {
        margin-top: calculateRem(30);

        h5.cost {
          padding-top: 0;
        }
        & > .row {
          padding-right: 0;
          padding-left: 0;
        }
      }
    }
  }
}
