/************************************************************************** Basic Styles */
.content { position: relative; }

#event-nav ul { margin: 0; padding: 0; overflow: hidden; text-align: center; }

#event-nav li { display: inline-block; list-style: none; margin: 0; padding: 0; position: relative; }

#event-nav li a { display: block; cursor: pointer; position: relative; text-align: center; padding: .85rem 2rem; margin: 0px; line-height: 1.2; outline: none; box-shadow: none; box-sizing: border-box; text-align: left; font-size: 1rem; font-weight: 400; text-decoration: none !important; }

#event-nav li.active a:hover { cursor: default; }

#event-control-bar { padding: 1em; position: relative; }

#event-control-bar.event-list { margin-bottom: 3em; }

.view-calendar #event-control-bar { margin-bottom: 1em; }

.event-right { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }

.event-right .ui-selectmenu-button { float: none; width: 240px; max-width: 240px; margin: 0; }

.event-right #module-search { float: none; width: 240px; max-width: 240px; margin: 0; }

/** Controls - Controls are separate for cal/list views because they have very different markup **/
/* list controls */
#event-stage { position: relative; }

#event-stage .sort-heading { margin-top: 2em; }

.list-controls { display: none; width: 100%; text-align: center; margin-bottom: 1rem; }

.list-month-title { display: inline-block; vertical-align: middle; width: 260px; font-weight: 400; font-size: 2rem; }

@media (min-width: 992px) { .list-month-title { font-size: 2.25rem; } }

.list-event-prev { display: inline-block; vertical-align: middle; cursor: default; font-size: 1.125rem; opacity: .2; transition: all 0.2s ease-in-out; }

.list-event-next { display: inline-block; vertical-align: middle; cursor: default; font-size: 1.125rem; opacity: .2; transition: all 0.2s ease-in-out; }

@media (min-width: 768px) { .list-event-prev, .list-event-next { font-size: 1.5rem; } }

.list-event-prev.hasPrev { cursor: pointer; opacity: 1; }

.list-event-next.hasNext { cursor: pointer; opacity: 1; }

/* calendar controls */
.calendar-month { width: 320px !important; margin: 0 auto !important; caption-side: top; padding: 1rem 0; position: relative; text-align: center; }

.calendar-month { font-size: 1.875rem; font-weight: 400; }

.calendar-prev { position: absolute; left: 0; top: 1.25rem; font-size: 1.125rem; transition: all 0.2s ease-in-out; }

.calendar-next { position: absolute; right: 0; top: 1.25rem; cursor: default; font-size: 1.125rem; transition: all 0.2s ease-in-out; }

@media (min-width: 768px) { .calendar-prev, .calendar-next { font-size: 1.5rem; } }

/* ---------- List ---------- */
.list-day { margin-bottom: 20px; }

.list-time { border: none; float: left; line-height: 1; margin-right: -74px; text-align: center; font-size: .875rem; text-transform: uppercase; line-height: 1; width: 60px; padding: 24px 0px; }

p.list-time-day, p.list-time-month { display: block; margin: 0; padding: 0; }

p.list-time-day { line-height: 1; padding: 0; font-size: 1.75rem; font-weight: 800; }

p.list-time-month { line-height: 1; padding: 0; }

.list-day-detail { padding-left: 74px; }

.list-day-detail .eventTime { text-transform: lowercase; }

.list-weekday { border-bottom-width: 1px; border-bottom-style: solid; line-height: 1.5; margin-bottom: .65em; padding: 20px 0 15px; text-transform: uppercase; font-size: 2rem; }

@media (min-width: 992px) { .list-weekday { font-size: 2.25rem; } }

.nrf-message { text-align: center; }

.day-stage { margin-top: 20px; }

/* -------- Calendar ------- */
#cal-responsive { display: none; }

.calendar { table-layout: fixed; width: 100%; border-collapse: separate !important; border-spacing: 2px; border: none !important; }

.calendar th { padding: 1rem .5rem 1rem; background: none; text-align: center; }

.calendar td { border-width: 1px; border-style: solid; height: 120px; padding: 5px; vertical-align: top; }

.calendar td > a { display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; text-align: center; margin: 5px; text-decoration: none; }

.calendar td ul { clear: both; margin: 10px 0 0 3px; padding: 0; }

.calendar td ul li { line-height: 1.1; margin: 0 0 8px; font-weight: normal; }

.calendar td ul li a { line-height: 1.1; margin: 0 0 8px; font-weight: normal; }

/* Featured Events */
#featured-events { margin: 2em -15px -2em; }

.featured-event { margin-bottom: 2em; }

.featured-event.end { margin-right: 0; }

.featured-image { display: block; margin-bottom: 15px; overflow: hidden; position: relative; text-decoration: none; width: 100%; padding-top: 56.25%; }

.featured-image .event-photo { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; opacity: 1.0; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; backface-visibility: hidden; -webkit-backface-visibility: hidden; }

.featured-description { left: 0; padding: 6% 3.45%; position: absolute; top: 0; right: 0; bottom: 0; opacity: 1.0; background: transparent; }

.featured-image:hover > .event-photo { opacity: 0.075; }

.featured-description > p { margin: 0; top: 50%; position: relative; transform: translateY(-50%); text-align: center; font-weight: 600; }

.event-row { margin-bottom: 10px; width: 100%; }

/************************************************************************** Search field */
#category-selector, #event_categories div { margin: 0 .5rem; }

/************************************************************************** Font & Sizing */
.calendar th { font-size: 1.125rem; font-weight: 700; text-transform: uppercase; }

.calendar td { /* this is the number */ font-size: 1rem; font-weight: 400; }

.calendar td ul li { font-size: .875rem; }

.list-time-day { font-size: 24px; }

.featured-description p { font-size: 14px; }

.featured-start { margin-bottom: 0; }

.featured-event .meta { font-size: 12px; display: none; /* Seems to be unnecessary clutter maybe */ }

.featured-event h2 { line-height: 1.35; }

/************************************************************************** Colors */
#event-nav { background-color: transparent; }

/************************************************************************** Common Overrides */
.calendar td ul li { list-style: none; }

.calendar td ul li:last-child { margin-bottom: 2px; }

.event h3 { margin-bottom: 5px; }

/******************************************************* For smaller displays */
@media only screen and (max-width: 50em) { #event-nav ul { text-align: center; display: block; }
  #event-nav li { margin: .25rem 0; }
  #event-nav li a { padding-left: .75rem; padding-right: .75rem; }
  #cal-responsive { display: block; }
  #cal-wrap { display: none; }
  /* .featured-description { display: none; } */
  #event-control-bar { height: auto; }
  .content.view-calendar #event-control-bar { display: none; }
  #event-control-bar .event-right { border-bottom: none; float: none; margin-bottom: 20px; width: 100%; }
  #category-selector { float: none; margin: 0 auto 1em; }
  #category-selector #category_select-button { margin: auto; }
  #event-nav li:last-child { display: none; }
  .floatleft { float: none; margin-bottom: 10px; } }

@media (max-width: 425px) { #event-nav ul { display: flex; justify-content: space-between; } }

/************************************************************************** HTML 5 considerations */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

audio, canvas, video { display: inline-block; }