/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/cssplay-animated-variable-text-menu.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== *//* common styles for both menu systems */
@font-face {
  font-family: 'Roboto Flex Variable';
  font-style: oblique 0deg 10deg;
  font-display: swap;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  src: url(/webfonts/roboto-flex_5.0.14_latin-full-normal.woff2) format('woff2-variations');
  unicode-range: U + 0000-00FF, U + 0131, U + 0152-0153, U + 02BB-02BC, U + 02C6, U + 02DA, U + 02DC, U + 0304, U + 0308, U + 0329, U + 2000-206F, U + 2074, U + 20AC, U + 2122, U + 2191, U + 2193, U + 2212, U + 2215, U + FEFF, U + FFFD;
}

@keyframes higher {
  0% {
      font-variation-settings: 'slnt' 0, 'wdth' 50, "YTUC" 600, "GRAD" -100;
  }

  100% {
      font-variation-settings: 'slnt' 0, 'wdth' 50, "YTUC" 750, "GRAD" 150;
  }
}

@keyframes lower {
  0% {
      font-variation-settings: 'slnt' 0, 'wdth' 50, "YTUC" 750, "GRAD" 150;
  }

  100% {
      font-variation-settings: 'slnt' 0, 'wdth' 50, "YTUC" 600, "GRAD" -100;
  }
}/* styles for the horizontal menu */
@media only screen and (min-width: 901px) {
  #holder {
      text-align: center;
      text-transform: uppercase;
  }

  #holder input, #holder label {
      display: none;
  }

  #holder .pad {
      display: none;
  }

  #holder ul {
      padding: 0;
      margin: 0;
      list-style: none;
  }

  #holder #hz li {
      white-space: nowrap;
      text-align: left;
      line-height: 30px;
      transition: 0.25s;
      /* background: #fff; */
      background: rgb(249, 233, 179);
  }

  #holder #hz > li {
      display: inline-flex;
  }

  #holder #hz li.pad {
      display: none;
  }

  #holder #hz li a {
      padding: 0 25px;
      font-family: "Roboto Flex Variable", arial, sans-serif;
      font-size: 18px;
      line-height: 30px;
      color: #000;
      text-decoration: none;
      display: block;
      box-sizing: border-box;
      font-variation-settings: 'slnt' 0, 'wdth' 50, 'GRAD' -100, 'YTUC' 600;
  }

  #holder #hz div li a {
      font-size: 15px;
      font-variation-settings: 'slnt' 0, 'wdth' 50, 'GRAD' -100, 'YTUC' 600;
  }

  #holder #hz div li a {
      font-size: 15px;
      font-variation-settings: 'slnt' 0, 'wdth' 50, 'GRAD' -100, 'YTUC' 600;
  }

  #holder #hz li:hover > a {
      animation: higher 0.5s forwards;
  }

  #holder #hz li:not(:has(:hover)) > a {
      animation: lower 0.5s forwards;
  }

  #holder #hz li:hover {
      /* background: #fff; */
      background: rgb(249, 233, 179);
  }

  #holder #hz li:hover > span {
      border-color: #000 #000 #0000 #0000;
  }

  #holder #hz div {
      display: grid;
      grid-template-rows: 0fr;
      overflow: hidden;
      transition: grid-template-rows 0.5s;
      /* background: #fff; */
      background: rgb(249, 233, 179);
      position: absolute;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      z-index: 100;
  }

  #holder #hz div > ul {
      min-height: 0;
      align-self: end;
      padding: 0;
      margin: 0;
  }

  #holder #hz li {
      position: relative;
  }

  #holder #hz div.down {
      top: 30px;
      left: 0;
  }

  #holder #hz div.rght {
      top: 0;
      left: 100%;
  }

  #holder #hz div.lft {
      top: 0;
      right: 100%;
  }

  #holder #hz li:hover > div {
      grid-template-rows: 1fr;
  }

  #holder #hz div:hover {
      overflow: visible;
  }

  #holder #hz li span {
      display: block;
      width: 4px;
      height: 4px;
      border: 2px solid #000;
      border-color: #000 #000 #0000 #0000;
      transform: rotate(45deg);
      position: absolute;
      right: 8px;
      top: 11px;
      transition: transform 0.5s;
      z-index: 100;
  }

  #holder #hz ul.lft li span {
      right: auto;
      left: 8px;
      transform: rotate(-135deg);
  }

  #holder #hz > li:hover > span {
      transform: rotate(135deg);
  }

/* Wolsey */
.logo1 {
    max-height: 150px;
}

.logo2 {
    display: none;
  }

}/* styles for the vertical menu */
@media only screen and (max-width: 900px) {
  #holder {
      margin-left: 10px;
      position: absolute;
      top: 0;
      left: -60px;
      width: 50px;
      text-transform: uppercase;
  }

  #holder #menu {
      width: 20px;
  }

  #holder #menu div {
      display: grid;
      grid-template-rows: 0fr;
      overflow: hidden;
      transition: grid-template-rows 0.5s;
      width: 300px;
      background: rgb(249, 233, 179);
  }

  #holder #menu > li > div {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }

  #holder #menu div > ul {
      min-height: 0;
      align-self: end;
      padding: 0;
      margin: 0;
  }

  #holder #menu div > ul ul {
      margin: 0 0 0 20px;
  }

  #holder #menu li:has(:checked) > div {
      grid-template-rows: 1fr;
      transition: grid-template-rows 0.5s;
  }

  #holder #mXX {
      position: absolute;
      left: -100vw;
  }

  #holder ul {
      list-style: none;
  }

  #holder li {
      width: 50px;
      position: relative;
      padding: 0;
      margin: 0;
  }

  #holder li li {
      width: 300px;
  }

  #holder li li li {
      width: 280px;
  }

  #holder li li li li {
      width: 260px;
  }

  #holder li li li li li {
      width: 240px;
  }

  #holder li a {
      text-decoration: none;
      color: #000;
      font-family: "Roboto Flex Variable", arial, sans-serif;
      /* font-family: 'Times New Roman', Times, serif; */
      font-size: 18px;
      line-height: 30px;
      padding: 0 25px;
      transition: 0.5s;
      font-variation-settings: 'slnt' 0, 'wdth' 50, "YTUC" 600, "GRAD" -100;
  }

  #holder .down a {
      font-size: 16px;
  }

  #holder > ul > li > span {
      display: inline-block;
      width: 50px;
      height: 40px;
      position: relative;
      left: 20px;
      /* top: 20px; */
  }

  #holder li li > a + span {
      display: inline-block;
      width: 20px;
      height: 20px;
      position: absolute;
      right: 25px;
  }

  #holder li li > span input {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
  }

  #holder li li > span label {
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      cursor: pointer;
      width: 20px;
      height: 20px;
  }

  #holder li li > span label::before {
      content: "";
      display: block;
      width: 20px;
      height: 2px;
      background: #000;
      position: absolute;
      left: 0;
      top: 9px;
  }

  #holder li li > span label::after {
      content: "";
      display: block;
      width: 2px;
      height: 20px;
      background: #000;
      position: absolute;
      left: 9px;
      top: 0;
      transition: 0.5s;
  }

  #holder #menu li:has(:checked) > a {
      animation: higher 0.5s forwards;
  }

  #holder #menu li:not(:has(:checked)) > a {
      animation: lower 0.5s forwards;
  }

  #holder #menu li a:hover {
      animation: higher 0.75s forwards;
  }

  #holder #menu li input {
      -webkit-appearance: none;
      appearance: none;
      display: block;
      width: 20px;
      height: 20px;
      border: 0;
      padding: 0;
      margin: 0;
      border-radius: 0;
      cursor: pointer;
  }

  #holder #menu li:has(:checked) > span label {
      z-index: 20;
  }

  #holder #menu li:has(:checked) > span label::after {
      height: 2px;
      top: 9px;
  }

  #holder #menu li span.topLevel {
      margin-bottom: 10px;
  }

  #holder #menu li span.topLevel input {
      width: 34px;
      height: 30px;
      position: relative;
      z-index: 10;
  }

  #holder #menu li span.topLevel label {
      width: 34px;
      height: 30px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 5;
      box-sizing: border-box;
      border: 4px solid #000;
      border-width: 4px 0;
      cursor: pointer;
      transition: border 0.5s;
  }

  #holder #menu li span.topLevel label::before, #holder #menu li span.topLevel label::after {
      content: "";
      width: 34px;
      height: 4px;
      position: absolute;
      left: 0;
      top: 9px;
      background: #000;
      transition: 0.5s;
  }

  #holder #menu li:has(:checked) span.topLevel label::before {
      transform: rotate(45deg);
  }

  #holder #menu li:has(:checked) span.topLevel label::after {
      transform: rotate(-45deg);
  }

  #holder #menu li:has(:checked) span.topLevel label {
      border-color: #0000;
  }

  #holder #menu li:has(:checked) span.topLevel input {
      display: none;
  }

  /* Wolsey */
  .logo1 {
    display: none;
  }

  .logo2 {
    /* border: solid 3px green; */
    max-height: 150px;
    min-width: 75px;
    width: 75%;
    /* padding-left: 40px; */
    padding-top: 5px;
  }

}

@media only screen and (max-width: 400px) {
    /* Wolsey */
    #holder #menu li span.topLevel label {
        width: 25px;
        height: 26px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 5;
        box-sizing: border-box;
        border: 4px solid #000;
        border-width: 4px 0;
        cursor: pointer;
        transition: border 0.5s;
    }

    #holder #menu li span.topLevel label::before, #holder #menu li span.topLevel label::after {
        content: "";
        width: 25px;
        height: 4px;
        position: absolute;
        left: 0;
        top: 7px;
        background: #000;
        transition: 0.5s;
    }

}

html {
	height: 100%;
}

body {
	height: 100%;
	/* font-family: "Source Sans Pro", sans-serif; */
  font-family: "Anaheim", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

	/* font-size: 17px; */
	line-height: 1.58823529;
	margin: 0;
	display: flex;
	flex-direction: column;
  background-color: rgb(248, 246, 241);
  color: rgb(50, 50, 50);
}

header {
  background-color: rgb(249, 233, 179);
}

.banner_image_container {
  background-color: rgb(249, 233, 179);
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner_image_container img{
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box main {
  display: flex;
  height: fit-content;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0px 25px 25px;
	flex-grow: 1;
  max-width: 1280px;
  margin: 5px 5px 5px;
}

.box .content {
  text-align: center;
}

.concert_text {
  display: flex;
  flex-direction: column;
  margin: 5px;
  align-items: center;
  justify-content:center;
}

.address {
  padding-bottom: 0.5rem;
}

.address_line {
  font-size: 0.9rem;
}

.artists {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

}

.artist {
  flex: 1 1 100px;
  text-align:center;
  line-height: 0.9rem;
}

.artist img {
  border: solid 1px black;
}

.artist p {
  font-style: italic;
}

.social_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  max-width: 500px;
  text-align: center;
}

.social {
  display: flex;
  flex-direction: row;
}

.social a {
  margin: 5px;
}

.social img {
  width: 45px;
  height: 45px;
}

.our_next_concert {
  font-size: 2rem;
  color:#006;
}

h1 {
  font-size: 2rem;
  color:#006;
  font-weight: 400;
}

.poster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-bottom: 20px;
}

.poster img {
  max-width: 100%;
  height: auto;
  flex: 1 1 auto;
  object-fit: cover;

}

.concert{
  border: 1px solid silver;
  background-color: rgb(240, 239, 239);
  /* margin-bottom: 0.5rem; */
  padding-bottom: 0.5rem;
  max-width: 3250px;
  min-width: 325px;
}

.concert ul {
  /* left: -40px; */
  font-size: 1.2rem;
  list-style: none;
  font-weight: 600;
  padding-left: 0;
}

.concert li {
  color: black;

  font-size: 1rem;
}

.concert_item{
  line-height: 1.2rem;
  text-align: center;
  align-self: center;
  padding-left: 1rem;
  padding-right: 1rem;
  /* font-weight: 600; */
}

.concert_date {
  color:rgb(38, 77, 171);
  font-size: 1.2rem;
  font-weight: 600;
  padding-top: 0.7rem;
}

.concert_venue a {
  color: rgb(0, 13, 128);
  text-decoration: underline;
}

.concert_person {
  font-style: italic;
  font-size: 0.9rem;
  color: #033;
}

.concert_info_heading {
  font-weight:900;
  padding-top: 0;
}

.concert_info {
  font-weight: 600;
}

.composer {
  color: #366;
  font-weight: bolder;
  align-self: center;
  border-width: 1px;
  text-align: center;
}

.composer.additional
{
  font-weight: 600;
}


/* TODO: rework concert_* as children of .work */
.work {
  color: #366;
  display: flex;
  flex-direction: column;
}

a .composer {
  text-decoration: underline;
}

.blurb {
  text-align: center;
  min-width: 100%;
}

.blurb p {
  /* color: red; */
  /* border: red solid 3px; */
  margin-top: 0 ;
}

.blurb h3 {
  /* border: blue 3px solid; */
  margin-bottom: 0 ;
}

.tickets a {
  color: green;
  text-decoration: underline;
}

.ticket_row {
  color: blue;
  text-align: center;
}

hr {
  width: 75%;
}

hr.short {
  width: 10%
}

footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: center;
  max-width: 1280px;
  width: 100%;
  padding: 1em;
}


.footer_row {
  display: flex;
  justify-content: center;
  max-width: 1280px;
  width: 100%;
}

.footer_item {
  max-width: 300px;
  flex: 1 1 100px;
  text-align: center;
}

.footer_item a {
  color: gray;
  text-decoration: underline;
}

.foot_text_row {
  display: flex;
  justify-content: center;
  max-width: 1280px;
  width: 100%;
}

.foot_text_right {
  display: flex;
  text-align: right;
  padding-left: 1rem;
}

.foot_text_left {
  flex: 1 1 100px;
  padding-right: 1rem;
}

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
}

h2 {
  /* margin-bottom: -10px; */
  margin-bottom: 10px;
}

.season_title {
  margin-bottom: 0;
}

li.committee {
  line-height: 1.2rem;
  list-style-type: none;
}

ul.committee {
  list-style-position: inside;
  padding-left: 0;

}

.is-active a {
  color: red;
  font-weight: bold;
}

.headshot {
  display: flex;
  flex-direction: row;
  width:100%;
  flex-wrap: wrap;
  justify-content: center;
}

.about {
  display: flex;
  flex-direction: column;
}

#info{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rehearsal-date {
  font-weight: 700;
}

.rehearsal-venue{
  font-weight: 600;
}
.rehearsal-time {
  text-align: right;
  padding-right: 1rem;
  align-self: center;
}

.rehearsal-detail {
  text-align: left;
}

.rehearsal-schedule {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.rehearsal-table {
  margin: 0 5px;
  flex: 1;
  max-width: 75%;
  min-width: 75%;
}

.rehearsal-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.rehearsal-row-even {
  background-color: rgb(224, 224, 224);
}

.rehearsal-row :first-child {

  flex: 0 1 50%;
  min-width: 50%;
}

.rehearsal-row :nth-child(2) {
  flex: 0 1 50%;
  align-self: flex-end; /* Align to bottom of cell */
}

.diary-reminder {
  color: red;
  font-weight: 500;
}

.repertoire_holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.concert_holder {
    align-items: center;
}

.work_holder {
  display: flex;
  flex-direction: row;
  max-width: 500px;
  justify-content: space-between;
  line-height: 1.2rem;
  padding-left: 1rem;
  align-items: center;

}

.work_holder_odd {
  background-color: rgb(245, 239, 239);
}

.work_holder_even {
  background-color: rgb(226, 225, 225);
}


.work_date_holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 1rem;
}

.concert_work {
  border: 3px blue solid;
}



.work_title {
  font-weight: 700;
  text-align: left;
}

.friends {
  color: rgb(28, 63, 240);
  border:1px solid #006;
  border-radius: 1rem;
  background-color: rgb(218, 233, 243);
  font-size: 1.7rem;
}


.past_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.past_container a  {
  padding: 2px 2px;
  margin: 2px 2px;
}

.past_container .concert {
  padding: 2px 2px;
  margin: 2px 5px;
}