/* Define colors (can be overridden by theme) */
:root {
  --me-background-color: #ffffff;
  --me-highlight-color: #6EC1E4;
  --me-highlight-lighter-color: #cdedfa;
  --me-border-color: #000000;
  --me-text-color: #000000;
}

/* Calendar layout */

.me-calendar-title { background-image: url("https://akronartmuseum.org/wp-content/uploads/2019/10/featured-event-background.png"); background-size: cover; margin-bottom: 30px; padding: 100px 10px 25px 10px; line-height: 1; font-size: 40px; text-transform: uppercase; font-weight: 700; color: #fff; }
.me-calendar-title .bgbox { background: rgba(0, 0, 0, 0.32); padding: 25px 20px; max-width: 1140px; margin: auto; }
.me-calendar-title__subtitle { font-size: 40px; margin: 0; }
.me-calendar-title__title { font-weight: 700; font-size: 20px; margin: 20px 0 0 0; }

.calendarlayout { font-size: 20px; display: grid; grid-template-columns: 300px auto; grid-column-gap: 30px; padding-bottom: 45px; }
.calendarlayout img {width: 100%; }
.calendarlayout a { color: #000; }
.calendarlayout a:hover { text-decoration: none; }

.itemgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 30px; grid-row-gap: 45px; margin-right: 30px; }
.itemgrid p { margin: 0; }
.itemgrid a { color: #000; }
.itemgrid a:hover { text-decoration: none; }

.me-event-list__note { padding: 20px 0; clear: both; }

.me-event-list__section-title { margin: 60px 0 30px 0; font-weight: 700; font-size: 20px; text-transform: uppercase; padding: 0; clear: both; }

.me-category-heading { font-size: 20px; font-weight: 700; margin: 1em 0; padding: 0 0 0 30px; }

.me-event-list-item__link { display: grid; grid-template-rows: auto; }
.me-event-list-item__text-column { order: 2; line-height: 1.2; }
.me-event-list-item__title { font-size: 30px; font-weight: 700; line-height: 1.1; margin: 15px 0 20px 0; }

.me-event-list-item__image-column { order: 1; line-height: 0; padding-top: 75%; position: relative; }
.me-event-list-item__image-column img { background: #e0e0e0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; object-fit: cover; }

.me-event-list-item ul { display: none; }

@media screen and (max-width: 1100px ) {
  .itemgrid { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 900px ) {
  .itemgrid { grid-template-columns: 1fr; }
}


@media screen and (max-width: 699px ) {
  .calendarlayout {  grid-template-columns: 1fr; }
  .itemgrid { grid-template-columns: 1fr; margin-right: 0; }
  .me-event-list { margin: 0 20px; }
}


/* Events Page */

.me-calendar-month-grid { margin: 0 0 0 30px; position: relative; }
.me-calendar-month-grid h3 { font-size: 20px; font-weight: 700; margin: 1em 0; }
.me-calendar-month-grid__prev-next { left: 0; list-style: none; margin: 0; padding: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
.me-calendar-month-grid__prev-next-item { margin: 0; padding: 0; }
.me-calendar-month-grid__nav { border: 0 none; display: block; position: absolute; text-transform: none; top: 8px; }

.me-calendar-month-grid__nav:hover,
  .me-calendar-month-grid__nav:focus { border-bottom: 2px solid #000;  }

.me-calendar-month-grid__nav--previous { left: 7px; top: 0; }
.me-calendar-month-grid__nav--next { right: 7px; top: 0; }
.me-calendar-month-grid__header { align-items: center; caption-side: top; color: #000; padding: 0 30px; margin: 0 0 1em 0; position: relative; }
.me-calendar-month-grid__title { display: block; font-size: 20px; font-weight: 700; margin: 0; padding: 0; text-align: center; }
.me-calendar-month-grid__table { border-collapse: separate; margin: 0 0 1.8rem 0; width: 100%; }
.me-calendar-month-grid__body { width: 100%; margin: 0; }
.me-calendar-month-grid__week { width: 100%; }

.me-calendar-month-grid__date { width: 14.28571429%; padding: 0.3rem 0; text-align: center; }
.me-calendar-month-grid__date--current a,
  .me-calendar-month-grid__date a:hover { text-decoration: underline; }

.me-calendar-month-grid__date--heading { padding: .1rem 0; }
.me-calendar-month-grid__date--heading abbr { text-decoration: none; font-weight: normal; }
.me-calendar-month-grid__date--heading abbr[title] { text-decoration: none; }

.me-calendar-month-grid__range-selector { list-style: none; margin: 0; padding: 0; line-height: 1.1; }
.me-calendar-month-grid__range-selector li { padding: 0; }

.me-calendar-month-grid__range-link { display: block; background-image: url("../images/circle.svg"); background-repeat: no-repeat; background-position: left 4px; background-size: 1em; padding: 0 0 .25em 1.5em; }
..me-calendar-month-grid__range-link:hover { background-image: url("../images/circle-checked.svg");}
.me-calendar-month-grid__range-selected { display: block; background-image: url("../images/circle-checked.svg"); background-repeat: no-repeat; background-position: left 4px; background-size: 1em; padding: 0 0 .25em 1.5em; }


/* Event filters */

.me-event-accordion-button { cursor: pointer; border-radius: 1em; text-transform: uppercase; background: #000; border:none; color: #fff; font-size: 20px; line-height: 1; margin: 0 30px 30px 30px; position: relative; padding: .8em 1em 1em 1em; }
.me-event-accordion-button--selected { display: none; }
.me-event-accordion { display: none; }
.me-event-accordion--visible { display: block; }
.me-event-sidebar--visible { margin-right: 20px; margin-bottom: 30px; }

@media screen and (min-width: 700px ) {

  .me-event-accordion-button { display: none; }
  .me-event-accordion { display: block; }
  .me-event-sidebar--visible { border-width: 0; }

}

@media screen and (min-width: 1200px) {

  .me-calendar-month-grid { max-width: none; }
  .me-calendar-month-grid__date { padding: .15rem 0; }

}

/* Category lists */

.me-categories { list-style: none; margin: 0; padding: 0 0 0 30px; line-height: 1.1; }
.me-categories li { padding: 0; }

.me-categories__link { display: block; background-image: url("../images/circle.svg"); background-repeat: no-repeat; background-position: left 4px; background-size: 1em; padding: 0 0 .25em 1.5em; }
.me-categories__link:hover,
  .me-categories__link--selected { background-image: url("../images/circle-checked.svg");}

/* Grid layout */

.me-half-grid { display: flex; flex-flow: column nowrap; }

@media screen and (min-width: 700px) {

  .me-half-grid { flex-flow: row wrap; }
  .me-half-grid__item { flex: 0 0 50%; width: 50%; }

}

/* Event Single */

.eventsingle {  max-width: 1140px; padding: 30px; margin: auto; }
.eventsingle .grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 45px; grid-row-gap: 30px; font-size: 20px; }

.eventsingle h1 { line-height: 1.1; margin: 0 0 45px 0; font-size: 50px; line-height: 1; }
.eventsingle h1 span { text-transform: uppercase; font-size: 20px; display: block; margin-bottom: 20px; }

.eventsingle h3 { text-transform: uppercase; font-size: 20px; font-weight: bold; margin-top: 1em; }

.eventsingle .content a { color: #000; text-decoration: underline; }

.eventsingle .dates { line-height: 1.2; font-size: 25px; font-weight: bold; margin-bottom: 30px; padding-bottom: 30px; }

.ticketsbox ul { list-style: none; padding-left: 0; }
.ticketsbox .button a { color: #fff; background: #000; border-radius: 1em; text-transform: uppercase; padding: .5em 1.5em .75em 1.5em; display: inline-block; }
.ticketsbox .button a:hover { text-decoration: none; }

.eventsingle .addto { list-style: none; margin: 1em 0 2em 0; padding: 0; }
.eventsingle .addto li { margin: 0; padding: 0; display: inline; }
.eventsingle .addto li a { margin: 0 1em 0 0; display: inline-block; }

.eventsingle .pills { list-style: none; margin: 2em 0 1em 0; padding: 0; line-height: 1; }
.eventsingle .pills li { margin: 0; padding: 0; display: inline; }
.eventsingle .pills a { text-decoration: none; margin: 0 1em .5em 0; padding: .25em 1em .6em 1em; color: #000; border: 2px solid #000; border-radius: 1em; display: inline-block; }
.eventsingle .pills a:hover,
  .eventsingle .pills a:active { color: #fff; background: #000; }

.eventcontent { margin: 30px auto 45px auto; max-width: 800px; font-size: 20px; }


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

  .eventsingle .grid { grid-template-columns: 1fr; }

}

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

  .eventsingle .grid { padding: 10px; }

}

/* Related */

.eventsrelated { margin-top: 1em; }
.eventsrelated .margin { max-width: 1100px; margin: auto; padding: 0 10px; }

.eventsrelated:before,
 .eventsrelated:after { content: ""; display: table; clear: both; }

.eventsrelated h2 { font-weight: 700; font-size: 20px; text-transform: uppercase; margin-bottom: 30px; }


/* Timespan Selector */

.me-timespan-selector { font-weight: 700; text-align: right; }
.me-timespan-selector__list { list-style: none; margin: 0 0 30px 0; padding: 0; }
.me-timespan-selector__list-item { display: inline; margin: 0 45px 0 0; }
.me-timespan-selector__link { text-decoration: underline; }

.me-timespan-selector a { font-weight: 400; }
.me-timespan-selector a:hover { text-decoration: underline; }