/**
 * Calendar month display.
 *
 * All padding and font-sizes in the month display
 * should uses em units (not rem or px), as defined
 * in the calendar component's local variables partial.
 * The reasoning for that is so that font-sizes can be
 * defined relative to each other, and then the overall
 * font/padding sizes of the calendar can be adjusted
 * proportionally while only modifying the root font
 * size on the .calendar--month container.
 */
.calendar--month {
  font-size: 12px;
  background-color: #fff;
}
@media (min-width: 768px) {
  .calendar--month .desktop-hide {
    display: none;
  }
}
.calendar--month .mobile-hide {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
@media (min-width: 1024px) {
  .calendar--month .mobile-hide {
    position: relative !important;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}
.calendar--month .event-card {
  position: relative;
}
.calendar--month .lc-event__icon-container {
  display: flex;
  width: 100%;
}
.calendar--month .lc-event__registration-icon,
.calendar--month .lc-event__registration-payment-icon,
.calendar--month .lc-event__online-icon,
.calendar--month .lc-event__offsite-icon {
  margin: 0.5rem 1rem 0.5rem 0;
}

.calendar__week {
  position: relative;
  border-top: 2px solid #d1d1d1;
}
@media (min-width: 768px) {
  .calendar__week {
    padding-top: 25px;
  }
}
.calendar__week .event-card__title,
.calendar__week .event-card__details,
.calendar__week .event-card__room {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
@media (min-width: 768px) {
  .calendar__week .event-card__title,
  .calendar__week .event-card__details,
  .calendar__week .event-card__room {
    position: relative !important;
    width: auto;
    width: 100%;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}

.calendar__numbers .calendar__day.calendar__day--current {
  color: #fff;
  background-color: #778898;
  transition: background ease-in-out 250ms;
}

/**
 * Grid styling
 *
 * The grid styling for the single-day event
 * cells uses flexbox containers for the row
 * and 1/7 of the container for the width on
 * each item. The first item in the row is
 * always the multi-day event cell, which is 100%
 * wide, and uses it's own grid to control
 * layout for multi-day events.
 */
.calendar__wrap--grid {
  position: relative;
  border: 2px solid #d1d1d1;
}

.calendar__row--header,
.calendar__row--content,
.calendar__numbers {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}

.calendar__row--footer {
  display: none;
}
@media (min-width: 768px) {
  .calendar__row--footer {
    display: block;
  }
}

.calendar__day,
.calendar__day--number {
  position: relative;
  width: 100%;
  padding: 5px;
}
@media (min-width: 768px) {
  .calendar__day,
  .calendar__day--number {
    width: 14.28571%;
  }
}

.calendar__day {
  background-color: #fff;
}
@media (min-width: 768px) {
  .calendar__day {
    min-height: 25px;
  }
}

@media (min-width: 768px) {
  .calenar__day--number {
    min-height: 0;
  }
}

.calendar__day--header {
  min-height: 0;
  text-align: center;
}

.calendar__day--blank {
  display: none;
}
@media (min-width: 768px) {
  .calendar__day--blank {
    display: block;
  }
}

.calendar__row--content .calendar__day--blank {
  min-height: 5rem;
}

.calendar__day--outside {
  background-color: #efefef;
}

/**
 * Calendar borders
 *
 * External borders are wrapped around the
 * .calendar__week element, while internal borders
 * are absolutely positioned empty divs.
 */
.calendar__week--empty {
  display: none;
}
@media (min-width: 768px) {
  .calendar__week--empty {
    display: block;
  }
}

.calendar__bar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: none;
  width: 1px;
  height: 100%;
  color: #d1d1d1;
  box-shadow: inset 0 0 0 1px, -1px 0 0 0;
  opacity: 0.25;
}
@media (min-width: 768px) {
  .calendar__bar {
    display: block;
  }
}

.calendar__bar--1 {
  left: 14.28571%;
}

.calendar__bar--2 {
  left: 28.57143%;
}

.calendar__bar--3 {
  left: 42.85714%;
}

.calendar__bar--4 {
  left: 57.14286%;
}

.calendar__bar--5 {
  left: 71.42857%;
}

.calendar__bar--6 {
  left: 85.71429%;
}

/**
 * Link overlays
 *
 * Each day in the calendar has an associated list of days
 * that is stored below the calendar that contains more
 * information. To access this information, there are link
 * overlays positioned absolutely above the day cells.
 */
.calendar__numbers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  font-size: 11px;
  line-height: 1;
}
@media (min-width: 768px) {
  .calendar__numbers {
    height: 20px;
  }
}

.calendar__number-day--multi {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/**
 * Multi-day grids
 *
 * Unlike the regular grid cells for the calendar, which
 * use flexbox, the multi-day grids use Singularity GS's
 * float grid-spans so that they can start at arbitrary
 * points within the grid. Clearing has to be applied
 * manually via a clear class, applied when the template
 * is first generated.
 */
.calendar__day--multi {
  width: 100%;
  padding: 5px;
  background-color: #f9f9f9;
}
.calendar__day--multi::after {
  display: table;
  clear: both;
  content: "";
}
@media (min-width: 768px) {
  .calendar__day--multi {
    padding: 0;
  }
}

.calendar__day-span--1-1 {
  float: left;
  width: 14.28571%;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}

.calendar__day-span--1-7 {
  float: right;
  width: 14.28571%;
  margin-right: 0;
  margin-left: 0;
  clear: none;
}

.calendar__day-span--2-1 {
  float: left;
  width: 28.57143%;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}

.calendar__day-span--2-2 {
  float: left;
  width: 28.57143%;
  margin-right: -100%;
  margin-left: 14.28571%;
  clear: none;
}

.calendar__day-span--2-3 {
  float: left;
  width: 28.57143%;
  margin-right: -100%;
  margin-left: 28.57143%;
  clear: none;
}

.calendar__day-span--2-4 {
  float: left;
  width: 28.57143%;
  margin-right: -100%;
  margin-left: 42.85714%;
  clear: none;
}

.calendar__day-span--2-5 {
  float: left;
  width: 28.57143%;
  margin-right: -100%;
  margin-left: 57.14286%;
  clear: none;
}

.calendar__day-span--2-6 {
  float: right;
  width: 28.57143%;
  margin-right: 0;
  margin-left: 0;
  clear: none;
}

.calendar__day-span--3-1 {
  float: left;
  width: 42.85714%;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}

.calendar__day-span--3-2 {
  float: left;
  width: 42.85714%;
  margin-right: -100%;
  margin-left: 14.28571%;
  clear: none;
}

.calendar__day-span--3-3 {
  float: left;
  width: 42.85714%;
  margin-right: -100%;
  margin-left: 28.57143%;
  clear: none;
}

.calendar__day-span--3-4 {
  float: left;
  width: 42.85714%;
  margin-right: -100%;
  margin-left: 42.85714%;
  clear: none;
}

.calendar__day-span--3-5 {
  float: right;
  width: 42.85714%;
  margin-right: 0;
  margin-left: 0;
  clear: none;
}

.calendar__day-span--4-1 {
  float: left;
  width: 57.14286%;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}

.calendar__day-span--4-2 {
  float: left;
  width: 57.14286%;
  margin-right: -100%;
  margin-left: 14.28571%;
  clear: none;
}

.calendar__day-span--4-3 {
  float: left;
  width: 57.14286%;
  margin-right: -100%;
  margin-left: 28.57143%;
  clear: none;
}

.calendar__day-span--4-4 {
  float: right;
  width: 57.14286%;
  margin-right: 0;
  margin-left: 0;
  clear: none;
}

.calendar__day-span--5-1 {
  float: left;
  width: 71.42857%;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}

.calendar__day-span--5-2 {
  float: left;
  width: 71.42857%;
  margin-right: -100%;
  margin-left: 14.28571%;
  clear: none;
}

.calendar__day-span--5-3 {
  float: right;
  width: 71.42857%;
  margin-right: 0;
  margin-left: 0;
  clear: none;
}

.calendar__day-span--6-1 {
  float: left;
  width: 85.71429%;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}

.calendar__day-span--6-2 {
  float: right;
  width: 85.71429%;
  margin-right: 0;
  margin-left: 0;
  clear: none;
}

.calendar__day-span--7-1 {
  float: right;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  clear: none;
}

.calendar__day-span {
  padding: 0 0.8px;
}
@media (max-width: 767.98px) {
  .calendar__day-span {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}

.calendar__day-span--clear {
  clear: both;
}

.ui-dialog .calendar__day {
  width: 100%;
  padding: 0;
}

/**
 * Calendar List Styling
 *
 * In addition to the 30-day grid, there's a list view
 * for easier usage on mobile that appears below the
 * normal 30-day calendar. It's brought up a fixed
 * position whenever the user touches it's associated
 * day on the calendar grid.
 */
.calendar__day-header {
  margin-top: 0;
  font-size: 16px;
}
@media (min-width: 768px) {
  .calendar__day-header {
    display: none;
  }
}

.calendar__mobile-list {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  max-width: 100%;
  padding: 15px;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.95);
  transition: all 250ms ease-in-out;
  transform: scale(0);
}
.calendar__mobile-list.list {
  z-index: 50;
  transform: scale(1);
}
.calendar__mobile-list .event-card--sparse .time--end,
.calendar__mobile-list .event-card--sparse .time--separator {
  position: relative !important;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}
.calendar__mobile-list .event-card--sparse .time--start .event-card__day--inline,
.calendar__mobile-list .event-card--sparse .time--start .event-card__separator {
  position: relative !important;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
}

.calendar__list,
.calendar__list-item,
.calendar__list--day,
.calendar__list-item--day {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.calendar__list-item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 15px 0;
  border-bottom: 2px solid #d1d1d1;
}

.calendar__list-title {
  padding-right: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.calendar__list--day {
  flex-grow: 1;
}

.kids {
  color: #fff;
  background-color: #ffbd0a;
  border-color: #e19f00;
}
.kids a:hover {
  color: #4aaca2;
}
.kids h2,
.kids h3,
.kids h4 {
  color: #fff;
}

.teens {
  color: #fff;
  background-color: #3d4246;
  border-color: #1f2428;
}
.teens h2,
.teens h3,
.teens h4 {
  color: #fff;
}

.adult {
  color: #fff;
  background-color: #4aaca2;
  border-color: #2c8e84;
}
.adult h2,
.adult h3,
.adult h4 {
  color: #fff;
}
.adult a {
  color: #57b7df;
}
.adult a:focus, .adult a:hover, .adult a:active {
  color: #ffbd0a;
  text-decoration: none;
}

.calendar__day-ajax {
  margin-right: 60px;
}
@media (min-width: 768px) {
  .calendar__day-ajax {
    margin-right: 15px;
  }
}
@media (min-width: 1024px) {
  .calendar__day-ajax {
    padding: 0;
  }
}
.calendar__day-ajax .calendar__day-ajax-content {
  width: 400px;
  max-width: 100%;
  height: calc(100vh - 20px);
  padding: 20px 5px 20px 20px;
  margin: 0 auto;
  background: #fff;
  border: 2px solid #333;
  border-radius: 12px;
}
@media (min-width: 768px) {
  .calendar__day-ajax .calendar__day-ajax-content {
    height: calc(100vh - 60px);
  }
}
@media (min-width: 1024px) {
  .calendar__day-ajax .calendar__day-ajax-content {
    height: 80vh;
  }
}
.calendar__day-ajax .calendar__day-ajax-content .lc-event--upcoming {
  width: 100%;
  padding: 0;
  margin: 0 0 10px;
}
.calendar__day-ajax .calendar__day-ajax-content .calendar__day-title {
  margin: 0;
  font-weight: 700;
  line-height: 1.5;
}
.calendar__day-ajax .calendar__day-ajax-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  padding-right: 15px;
}
.calendar__day-ajax .calendar__day-wrap--additional {
  position: relative;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
}
.calendar__day-ajax .calendar__day-wrap--additional .calendar__day--ajax {
  width: 100%;
}

.calendar .calendar__day-load {
  padding: 5px;
  text-align: center;
  border-radius: 5px;
}

.lc-skip-button {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .lc-skip-button {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }
  .lc-skip-button:active, .lc-skip-button:focus {
    position: static !important;
    width: auto;
    height: auto;
    overflow: auto;
    clip: auto;
  }
}

.calendar--month--suppress-excess-events .calendar__day--outside {
  display: none;
}
@media (min-width: 768px) {
  .calendar--month--suppress-excess-events .calendar__day--outside {
    display: block;
  }
}

.ie10 .calendar--month .node--view-mode-teaser.event-card--sparse,
.ie11 .calendar--month .node--view-mode-teaser.event-card--sparse {
  flex-wrap: nowrap;
}
.ie10 .calendar__wrap--header,
.ie11 .calendar__wrap--header {
  display: block;
}
.ie10 .calendar__wrap--header::after,
.ie11 .calendar__wrap--header::after {
  display: table;
  clear: both;
  content: "";
}
.ie10 .calendar__wrap--header .tabs,
.ie11 .calendar__wrap--header .tabs {
  text-align: right;
}
@media (min-width: 768px) {
  .ie10 .calendar__wrap--header .calendar__month-pager,
  .ie11 .calendar__wrap--header .calendar__month-pager {
    float: left;
  }
}
@media (min-width: 768px) {
  .ie10 .calendar__wrap--header .calendar__menu-tasks,
  .ie11 .calendar__wrap--header .calendar__menu-tasks {
    float: right;
  }
}
@media (min-width: 768px) {
  .ie10 .calendar__wrap--tilte,
  .ie11 .calendar__wrap--tilte {
    clear: both;
  }
}

@media (min-width: 768px) {
  .ie .calendar__wrap--title {
    width: 100%;
  }
}
.ie .calendar__title {
  z-index: 1;
}
.ie .calendar__pager {
  z-index: 2;
}

span.lc-event__age-group.lc-event__age-group--child.lc-event__age-group--no-link {
  color: #333;
}

.calendar__day-ajax.white-popup .mfp-close {
  position: absolute;
  top: 0;
  right: 5px;
  z-index: 10000;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: #333;
  border-radius: 50%;
}
@media (min-width: 768px) {
  .calendar__day-ajax.white-popup .mfp-close {
    top: -10px;
    right: 5px;
  }
}
@media (min-width: 1024px) {
  .calendar__day-ajax.white-popup .mfp-close {
    top: -15px;
    right: 5px;
  }
}
.calendar__day-ajax.white-popup .mfp-close:hover, .calendar__day-ajax.white-popup .mfp-close:focus {
  top: 0;
  right: 5px;
  background-color: #333;
}
@media (min-width: 768px) {
  .calendar__day-ajax.white-popup .mfp-close:hover, .calendar__day-ajax.white-popup .mfp-close:focus {
    top: -10px;
    right: 5px;
  }
}
@media (min-width: 1024px) {
  .calendar__day-ajax.white-popup .mfp-close:hover, .calendar__day-ajax.white-popup .mfp-close:focus {
    top: -15px;
    right: 5px;
  }
}

.path-events .mfp-bg {
  background: rgba(255, 255, 255, 0.9);
}

.lc-spinner {
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
}

.lc-spinner--large {
  width: 44px;
  height: 44px;
}

.lc-spinner--relative {
  position: relative;
  width: 100%;
  padding: 20px 0;
}

.lc-spinner--absolute {
  position: absolute;
  width: 100%;
  height: 100%;
}

.lc-spinner__wrap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: auto;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.lc-spinner--large .lc-spinner__wrap {
  width: 44px;
  height: 44px;
}

.lc-spinner svg path {
  fill: #ccc;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media print {
  .calendar--month {
    font-size: 12px;
    background-color: #fff;
  }
  .calendar--month .mobile-hide {
    position: relative !important;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  .calendar--month .event-card {
    position: relative;
  }
  .calendar--month .lc-event__registration-icon,
  .calendar--month .lc-event__registration-payment-icon,
  .calendar--month .lc-event__online-icon,
  .calendar--month .lc-event__offsite-icon {
    margin-right: 0;
  }
  .calendar__week {
    position: relative;
    padding-top: 25px;
    border-top: 2px solid #d1d1d1;
  }
  .calendar__week:first-of-type .calendar__row--header,
  .calendar__week:first-of-type .calendar__row--content,
  .calendar__week:first-of-type .calendar__numbers {
    justify-content: flex-end;
  }
  .calendar__week .event-card__title,
  .calendar__week .event-card__details,
  .calendar__week .event-card__room {
    position: relative !important;
    width: auto;
    width: 100%;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  a.calendar__day--current {
    color: #fff;
    background-color: #778898;
    transition: background ease-in-out 250ms;
  }
  /**
   * Grid styling
   *
   * The grid styling for the single-day event
   * cells uses flexbox containers for the row
   * and 1/7 of the container for the width on
   * each item. The first item in the row is
   * always the multi-day event cell, which is 100%
   * wide, and uses it's own grid to control
   * layout for multi-day events.
   */
  .calendar__wrap--grid {
    position: relative;
    border: 2px solid #d1d1d1;
  }
  .calendar__row--header,
  .calendar__row--content,
  .calendar__numbers {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
  }
  .calendar__row--footer {
    display: block;
  }
  .calendar__day,
  .calendar__day--number {
    position: relative;
    width: 14.28571%;
    padding: 5px;
  }
  .calendar__day--multi {
    width: 100%;
    background-color: #f9f9f9;
  }
  .calendar__day--multi::after {
    display: table;
    clear: both;
    content: "";
  }
  .calendar__day--multi .event-card {
    border: 2px solid #000;
  }
  .calendar__day {
    min-height: 25px;
    background-color: #fff;
  }
  .calenar__day--number {
    min-height: 0;
  }
  .calendar__day--header {
    min-height: 0;
    text-align: center;
  }
  .calendar__day--blank {
    display: block;
  }
  .calendar__row--content .calendar__day--blank {
    min-height: 5rem;
  }
  .calendar__day--outside {
    background-color: #efefef;
  }
  /**
   * Calendar borders
   *
   * External borders are wrapped around the
   * .calendar__week element, while internal borders
   * are absolutely positioned empty divs.
   */
  .calendar__week--empty {
    display: block;
  }
  .calendar__bar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: 1px;
    height: 100%;
    color: #d1d1d1;
    box-shadow: inset 0 0 0 1px, -1px 0 0 0;
    opacity: 0.25;
  }
  .calendar__bar--1 {
    left: 14.28571%;
  }
  .calendar__bar--2 {
    left: 28.57143%;
  }
  .calendar__bar--3 {
    left: 42.85714%;
  }
  .calendar__bar--4 {
    left: 57.14286%;
  }
  .calendar__bar--5 {
    left: 71.42857%;
  }
  .calendar__bar--6 {
    left: 85.71429%;
  }
  /**
  * Link overlays
  *
  * Each day in the calendar has an associated list of days
  * that is stored below the calendar that contains more
  * information. To access this information, there are link
  * overlays positioned absolutely above the day cells.
  */
  .calendar__numbers {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    width: 100%;
    height: 20px;
    font-size: 11px;
    line-height: 1;
  }
  .calendar__number-day--multi {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
  }
  /**
   * Multi-day grids
   *
   * Unlike the regular grid cells for the calendar, which
   * use flexbox, the multi-day grids use Singularity GS's
   * float grid-spans so that they can start at arbitrary
   * points within the grid. Clearing has to be applied
   * manually via a clear class, applied when the template
   * is first generated.
   */
  .calendar__day-span--1-1 {
    float: left;
    width: 14.28571%;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
  .calendar__day-span--1-7 {
    float: right;
    width: 14.28571%;
    margin-right: 0;
    margin-left: 0;
    clear: none;
  }
  .calendar__day-span--2-1 {
    float: left;
    width: 28.57143%;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
  .calendar__day-span--2-2 {
    float: left;
    width: 28.57143%;
    margin-right: -100%;
    margin-left: 14.28571%;
    clear: none;
  }
  .calendar__day-span--2-3 {
    float: left;
    width: 28.57143%;
    margin-right: -100%;
    margin-left: 28.57143%;
    clear: none;
  }
  .calendar__day-span--2-4 {
    float: left;
    width: 28.57143%;
    margin-right: -100%;
    margin-left: 42.85714%;
    clear: none;
  }
  .calendar__day-span--2-5 {
    float: left;
    width: 28.57143%;
    margin-right: -100%;
    margin-left: 57.14286%;
    clear: none;
  }
  .calendar__day-span--2-6 {
    float: right;
    width: 28.57143%;
    margin-right: 0;
    margin-left: 0;
    clear: none;
  }
  .calendar__day-span--3-1 {
    float: left;
    width: 42.85714%;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
  .calendar__day-span--3-2 {
    float: left;
    width: 42.85714%;
    margin-right: -100%;
    margin-left: 14.28571%;
    clear: none;
  }
  .calendar__day-span--3-3 {
    float: left;
    width: 42.85714%;
    margin-right: -100%;
    margin-left: 28.57143%;
    clear: none;
  }
  .calendar__day-span--3-4 {
    float: left;
    width: 42.85714%;
    margin-right: -100%;
    margin-left: 42.85714%;
    clear: none;
  }
  .calendar__day-span--3-5 {
    float: right;
    width: 42.85714%;
    margin-right: 0;
    margin-left: 0;
    clear: none;
  }
  .calendar__day-span--4-1 {
    float: left;
    width: 57.14286%;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
  .calendar__day-span--4-2 {
    float: left;
    width: 57.14286%;
    margin-right: -100%;
    margin-left: 14.28571%;
    clear: none;
  }
  .calendar__day-span--4-3 {
    float: left;
    width: 57.14286%;
    margin-right: -100%;
    margin-left: 28.57143%;
    clear: none;
  }
  .calendar__day-span--4-4 {
    float: right;
    width: 57.14286%;
    margin-right: 0;
    margin-left: 0;
    clear: none;
  }
  .calendar__day-span--5-1 {
    float: left;
    width: 71.42857%;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
  .calendar__day-span--5-2 {
    float: left;
    width: 71.42857%;
    margin-right: -100%;
    margin-left: 14.28571%;
    clear: none;
  }
  .calendar__day-span--5-3 {
    float: right;
    width: 71.42857%;
    margin-right: 0;
    margin-left: 0;
    clear: none;
  }
  .calendar__day-span--6-1 {
    float: left;
    width: 85.71429%;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
  .calendar__day-span--6-2 {
    float: right;
    width: 85.71429%;
    margin-right: 0;
    margin-left: 0;
    clear: none;
  }
  .calendar__day-span--7-1 {
    float: right;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    clear: none;
  }
  .calendar__day-span {
    display: block;
  }
  .calendar__day-span--clear {
    clear: both;
  }
  /**
   * Calendar List Styling
   *
   * In addition to the 30-day grid, there's a list view
   * for easier usage on mobile that appears below the
   * normal 30-day calendar. It's brought up a fixed
   * position whenever the user touches it's associated
   * day on the calendar grid.
   */
  .calendar__day-header {
    display: none;
  }
  .calendar__mobile-list {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    max-width: 100%;
    padding: 15px;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.95);
    transition: all 250ms ease-in-out;
    transform: scale(0);
  }
  .calendar__mobile-list.list {
    z-index: 50;
    transform: scale(1);
  }
  .calendar__mobile-list .event-card--sparse .time--end,
  .calendar__mobile-list .event-card--sparse .time--separator {
    position: relative !important;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  .calendar__mobile-list .event-card--sparse .time--start .event-card__day--inline,
  .calendar__mobile-list .event-card--sparse .time--start .event-card__separator {
    position: relative !important;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  .calendar__list,
  .calendar__list-item,
  .calendar__list--day,
  .calendar__list-item--day {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  .calendar__list-item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 15px 0;
    border-bottom: 2px solid #d1d1d1;
  }
  .calendar__list-title {
    padding-right: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
  }
  .calendar__list--day {
    flex-grow: 1;
  }
  .kids {
    color: #fff;
    background-color: #ffbd0a;
    border-color: #e19f00;
  }
  .kids a:hover {
    color: #4aaca2;
  }
  .kids h2,
  .kids h3,
  .kids h4 {
    color: #fff;
  }
  .teens {
    color: #fff;
    background-color: #3d4246;
    border-color: #1f2428;
  }
  .teens h2,
  .teens h3,
  .teens h4 {
    color: #fff;
  }
  .adult {
    color: #fff;
    background-color: #4aaca2;
    border-color: #2c8e84;
  }
  .adult h2,
  .adult h3,
  .adult h4 {
    color: #fff;
  }
  .adult a {
    color: #57b7df;
  }
  .adult a:focus, .adult a:hover, .adult a:active {
    color: #ffbd0a;
    text-decoration: none;
  }
}

/*# sourceMappingURL=calendar-month.css.map */