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

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

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

#event-nav li a { display: block; cursor: pointer; margin: 0; position: relative; text-align: center; padding: 1rem 1rem .75rem; line-height: 1.1; border: 0; font-size: 1.125rem; font-weight: 400; color: #000; outline: none; box-shadow: none; background-color: #ededed; text-transform: uppercase; }

@media (min-width: 768px) { #event-nav li a { padding: 1.5rem 2.25rem 1.1rem; } }

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

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

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

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

#event-control-bar .event-list-title { font-size: 21px; /* font-weight: bold; */ left: 30px; position: absolute; top: 15px; }

.event-left { float: left; }

.event-right { float: right; }

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

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

.list-controls { display: none; float: left; line-height: 30px; max-width: 221px; position: absolute; text-align: center; top: -89px; width: 30%; }

.list-month-title { /* font-weight: bold; */ line-height: 30px; margin: 0 25px 0 0; }

.list-event-prev { position: absolute; right: 20px; top: 7px; content: ""; width: 0; height: 0; border-right-width: 11px; border-right-style: solid; border-top: 7px solid transparent; border-bottom: 7px solid transparent; font-size: 0; line-height: 0; }

.list-event-next { position: absolute; right: -4px; top: 7px; content: ""; width: 0; height: 0; border-left-width: 11px; border-left-style: solid; border-top: 7px solid transparent; border-bottom: 7px solid transparent; font-size: 0; line-height: 0; }

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

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

/* calendar controls */
.calendar-month { /* background: url('/_assets/img/layouts/events_3/month-arrows.png') no-repeat right 8px; */ display: block; float: left; left: 10px; line-height: 34px; margin: 0; padding-right: 50px; position: relative; text-align: center; top: -80px; width: 221px; }

.calendar-month:before { position: absolute; right: 20px; top: 24px; content: ""; width: 0; height: 0; border-right-width: 11px; border-right-style: solid; border-top: 7px solid transparent; border-bottom: 7px solid transparent; font-size: 0; line-height: 0; }

.calendar-month:after { position: absolute; right: -4px; top: 24px; content: ""; width: 0; height: 0; border-left-width: 11px; border-left-style: solid; border-top: 7px solid transparent; border-bottom: 7px solid transparent; font-size: 0; line-height: 0; }

.calendar-prev { cursor: pointer; position: absolute; right: 20px; top: 24px; content: ""; width: 0; height: 0; border-right-width: 11px; border-right-style: solid; border-top: 7px solid transparent; border-bottom: 7px solid transparent; font-size: 0; line-height: 0; z-index: 2; }

.calendar-next { cursor: pointer; position: absolute; right: -4px; top: 24px; content: ""; width: 0; height: 0; border-left-width: 11px; border-left-style: solid; border-top: 7px solid transparent; border-bottom: 7px solid transparent; font-size: 0; line-height: 0; z-index: 2; }

/* ---------- List ---------- */
.list-time { border: none; float: left; line-height: 1.3; margin-right: -68px; text-align: center; text-transform: uppercase; width: 3.25em; }

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

p.list-time-day { border-radius: 0; font-size: 20px; line-height: 1; padding: 10px 0 6px; }

p.list-time-month { border-radius: 0 0 2px 2px; font-size: 14px; line-height: 1; padding: 8px 0 6px; }

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

.list-weekday { border-bottom-width: 1px; border-bottom-style: solid; line-height: 1.5; margin-bottom: .65em; padding: 11px 0 15px; font-weight: 700; font-size: 1.55rem; }

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

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

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

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

.calendar { table-layout: fixed; width: 100%; margin-bottom: 1em; }

.calendar th { line-height: 1; padding: 1em 1em .875em; text-align: center; }

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

.calendar td > a { border-radius: 3px; display: block; float: left; line-height: 1.1; margin-bottom: 5px; padding: 3px; text-decoration: none; font-weight: 600; }

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

.calendar td ul li { line-height: 1.1; margin: 0 0 12px; 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 { float: left; margin-right: .5rem; }

/************************************************************************** Font & Sizing */
.list-month-title { font-size: 18px; }

.calendar th { font-size: 15px; }

.calendar td { /* this is the number */ font-size: 13px; font-weight: 600; }

.calendar td ul li { font-size: 12px; }

.calendar-month { font-size: 18px; font-weight: 400; }

.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; }

.calendar td ul li a { text-decoration: none; }

.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; }
  .list-controls { width: 75%; }
  #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; padding-bottom: 10px; 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; }
  #event-stage .list-controls { text-align: left; width: 200px; margin-left: 50%; transform: translateX(-50%); top: -85px; } }

@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; }