/* @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600&family=Roboto:ital,wght@0,400;0,700;1,400&family=Roboto+Condensed:wght@400;700&display=swap'); */

/*===========================FONTS===============================*/

body {
	font-family: 'Roboto', arial, sans-serif;
	line-height:1.5em;
}

header {
	padding: 0;
	margin:0;
	height: 150px;
	border-bottom: 5px solid #b0455c;
	position: relative;
}

h1, h2, h3 {
	font-family: 'Oswald', 'Roboto Condensed', arial, sans-serif;
}

.page-header {
	font-size: 300%;
	line-height: 1em;
}

h3 {
	font-size: 150%;
	line-height: 1.2em;
}

h3.s45 {
	background-image: linear-gradient(to right, rgba(176,69,92,1), rgba(176,9,92,0), rgba(176,9,92,0));
	padding: 0.5em 0 0.5em 0.5em;
	margin-left: -1.5em;
}

.solo-h2 {
	padding-bottom: 0;
	margin-bottom: 0;
}

h2 + h3 {
	margin-top: -1em;
	color: #444;
}

h4 {
	font-family: 'Roboto', arial, sans-serif;
	font-weight: 700;
	border-bottom: 1px solid #444;
	text-transform: uppercase;
}

em, i {
	font-family: 'Roboto', arial, sans-serif;
	font-style: italic;
}

strong, b {
	font-family: 'Roboto', arial, sans-serif;
	font-weight: 700;
}

.big {
	font-size: 300%;
	margin-top: 0.5em;
	margin-bottom:0.5em;
}

content a {
	font-weight:bold;
	text-decoration: underline;
}

content a:hover {
	text-decoration: none;
}

content a:visited {
	font-style: italic;
}

.rating { /* used for audience guidance */
	background: #000;
	color: #fff;
	padding: 4px;
	font-weight: bold;
}

.price { /* used for Theatre School workshop prices */
	background: #b0455c;
	border-radius: 50%;
	padding: 6px;
	font-weight: bold;
}

p.caption {
	margin-top: 0;
	text-align: center;
	font-style: italic;
}

.condensed {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 80%;
}

.center {
	text-align: center;
}

.align-right {
	text-align: right;
}

#header-menu {
	text-transform: uppercase;
	font-weight: 700;
}

.fas, .far {
	margin-right: 2px;
}

#header-menu .fas, .fab, button .fas, h3 .icon, .fa-solid {
	margin-right: 0.5em;
}

#alert {
	text-align: center;
}

#alert .fas {
	margin: 0;
}

.nospace {
	margin: 0 1px;
}

.lede {
	font-size:125%;
	line-height: 1.4em;
}

.button a {
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
	font-size: 1.2em;
}

.with-border {
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

table, th, td {
	border: 1px solid #444;
  	border-collapse: collapse;
  	text-align:left;
}

.month-calendar  {
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 0.8em;
	text-align: center;
	border: none;
	flex-grow: 1;
	width: 45%;
}

.month-calendar th {
	text-align: center;
	border: none;
}

.month-calendar td {
	font-weight: 300;
	text-align: center;
	border: none;
}

blockquote {
	font-family: 'Oswald', 'Roboto', arial, sans-serif;
	font-size: 200%;
	line-height: 1.1em;
	text-align: center;
}

cite p {
	font-style: italic;
	margin-top: -1em;
}

p.photo-caption {
	background: #444;
	font-family: 'Roboto Condensed', 'Roboto', arial, sans-serif;
	font-size: 0.8em;
	color: #fff7eb;
	padding: 1em 0 0.5em 1em;
	margin-top: -1em;
}

footer {
	font-size: 80%;
}

ul#quick-links {
	list-style-type: none;
}

.copyright, #validate {
	text-align:center;
}

#validate a {
	font-family: 'Roboto Condensed', 'Roboto', sans-serif;
	color: #fff7eb;
	padding: 0 0.75em;
}

/*============================COLOURS====================================*/

/* COLOURS
#fff7eb - very light gold
#ffaa22 - gold
#cc6f08 - burnt orange
#b0455c - rose
#61888a - dusky turquoise
#1c2541 - navy blue
#444444 - dark grey
#cccccc - light grey
*/

/*============================UNIVERSAL COLOUR=============================*/
body {
	background: #222;
}

header {
	background: #222 url(../i/masthead_bkg2.png) no-repeat fixed left top ;
}

h1 {
	color:#fff;
}

content {
	background:#fff7eb;
}

content a {
	color:inherit;
}

content a:hover {
	color:#ffaa22;
}

content a:visited {
	color:inherit;
}

.section {
	background: #fff7eb;
	color: #000;
}

/*=====================================BUTTONS===============================*/
.button {
	color: #cc6f08;
}

.button a {
	color: #fff7eb;
}

.button:hover {
	background: #cc6f08;
}

.button a:hover {
	color: #000;
}

.button a:visited {
	color: #fff7eb;
}

/*====================================SEARCH=================================*/
/*#search-box{
	display: hidden;
	position: absolute;
	z-index: 1;
	max-width: 200px;
	right: 0px;
	top: 4px;
	border: none;
}

#search-button {
	/*position: absolute;
	z-index: 2;
	right: 0px;
	top: 122px;*
	background-color:#cc6f08 !important;
	padding: .5%;
	color:white;
	font-size: .85em;
	font-weight: 700;
}


#search-button:hover{
	cursor: pointer;
}*/

/*===================================CALENDAR================================*/
.month-name {

}

.month-calendar {
	border: 1px solid;
}

.show {
	background: #ffaa22;
}

.matinee {
	background: rgba(176, 69, 92, .5); /* BTE rose, but less intense */
}

.summermatinee {
	background: #cc6f08;
	color: #fff;
}

.pwyd {
	background: rgba(255, 170, 34, .5); /* BTE gold, but less intense */
}

.foodpreview {
	background: rgba(97, 136, 138, .5); /* BTE turquoise, but less intense */
}

.doubleshow {
	background: rgba(255, 170, 34, .5); /* BTE gold, but less intense */
}

.sensory {
	background: #b0455c;
	color: #fff;
}

/*====================================FOOTER====================================*/

footer {
	background: #444;
	color: #fff7eb;
}

footer a {
	color: #fff7eb;
	text-decoration: none;
}

footer a:hover {
	color: #ffaa22;
	text-decoration: underline;
}

footer a:visited {
	text-decoration: none;
	font-style: italic;
}

/*===========================AVAILABLE COLOURS===========================*/

.color1-txt { /* gold text */
	color:#ffaa22;
}
.color1-bkgd { /* gold background */
	background:#ffaa22;
}

.color2-txt { /* burnt orange text */
	color:#cc6f08;
}
.color2-bkgd { /* burnt orange background */
	background:#cc6f08;
}

.color3-txt { /* rose text */
	color:#b0455c;
}
.color3-bkgd { /* rose background, light gold text */
	background:#b0455c;
	color:#fff7eb;
}

.color4-txt { /* dusky turquoise text */
	color:#61888a;
}
.color4-bkgd { /* dusky turquoise background */
	background:#61888a; /* consider #288282 */
}

.color5-txt { /* dark grey text */
	color: #444;
}

.color5-bkgd { /* dark grey background */
	background: #444;
	color:#fff7eb;
}

.color6-txt { /* very light gold (10%) text ; used instead of white */
	color: #fff7eb; 
}

.color6-bkgd { /* very light gold (10%) background */
	background:#fff7eb;
}

.color7-txt { /* navy blue text */
	color: #121861; 
}

.color7-bkgd { /* navy blue background, light gold text */
	background: #121861;
	color: #fff7eb;
}

.color8-bkgd { /* light grey background */
	background: #cccccc; 
}

.color8-txt { /* light grey text */
	color: #cccccc; 
}

/*=================================OTHER VISUALS===========================*/

button {
	border:none;
}

.button {
	display: inline-block;
	padding: 0px;
	border-radius: 8px;
}

.button a {
	transition-duration: 0.4s;
	padding:10px;
}

.icon {
	color: #ffaa22;
}

.icon-background {
	background-image: url(../i/white_icon_50percent.png);
	background-position: 95%;
  	background-repeat: no-repeat;
  	background-size: auto;
}

hr {
	border-style: solid;
  	border-width: 1px;
  	border-color: #ccc;
}

ul.decade-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.grayscale {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  	filter: grayscale(100%);
}

/*=======================================FLEXBOXES====================================*/
header {
	display: flex;
	flex-flow: row nowrap;
	justify-content:  flex-start;
	align-items: flex-start;
	column-gap: 20px;
	align-content: center;
	align-items: center;
}

#logo {
	min-width: 150px;
	max-width: 150px;
}

.item-grid, .bio-grid {
	display:flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
}

.multi-month-grid {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
}

.item-grid span {
	padding: 0.5em;
	margin: 0.5em;
	text-align: center;
	flex: 1;
}

.bio-grid span {
	padding: 0.5em;
	margin: 0.5em;
	text-align: left;
	flex: 1;
	min-width: 250px;
}

.item-grid img, .bio-grid img {
	width:auto;
}

.bio-grid img {
	float: left;
	padding: 0.5em; /**/
}

@media (max-width: 480px) {

	.bio-grid img {
		float: none !important;
	}
}

.item-grid p, .bio-grid p {
	margin-top: -0.25em;
}

.sponsors {
	align-items: flex-end !important;
}

/*=====================NEW MAIN MENU====================*/
nav {
	min-width: 16.67%;
	display:block;
}

.menu-item { /* CONTROLS UNEXPANDED MENU LIST */
	color: #fff;
	background: #444;
	display: block;
	min-width: 200px;
	text-align: left;
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	padding: 1em;
	margin: 0;
}

#menu-tix { /* MAKES TICKET LINK ROSE COLOURED */
	background: #b0455c;
}

#navMenu { /* EXPANDED MENU */
	background: #444;
	color: #fff;
}

:focus { /* HELPS KEYBOARD USERS NAVIGATE */
      outline: 3px solid red;
    }

::-moz-focus-inner {
  border: 0;
}

.navMenu {
  width: var(--side-panel);
  color: var(--side-color);
  overflow: auto;
  position: fixed;
  height: auto;
  transition: width .4s linear;
  z-index: 10;
}

.closeBtn {
  position: absolute;
  top: 5px;
  right: 10px;
  color: inherit;
  padding: 0 5px;
  background: #444;
  font-weight: bold;
}

.hamburger {
  z-index: 12;
  transition: margin .4s linear;
}

.hidden {
  width: 0;
}

.vh {
  visibility: hidden;
}

nav button {
  border: none;
  cursor: pointer;
}

nav ul.main-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 1em;
}

nav ul li.menu-section {
	padding: 0.5em;
	margin: 0.5em;
	text-align: left;
}

nav li a.menu-header {
	font-weight: bold;
}

nav li ul {
	list-style: none;
	padding: 0 0 0 1.5em;
	margin: 0;
}

.navMenu a {
  text-decoration: none;
  color: inherit;
  font-family: Roboto, arial, sans-serif;
  font-size: inherit;
}

.navMenu a:hover {
  border-bottom: solid 1px;
}

.menuOpen {
  margin-left: var(--side-panel);
}

.overlay {
  position: relative;
  z-index: 8;
  top: 0;
  right: 0;
  left: var(--side-panel);
  bottom: 0;
}

@media (max-width: 800px) {

	nav ul.main-menu {
		grid-template-columns: auto auto;
	}
}

@media (max-width: 600px) {

  .navMenu {
    width: 100%;
    height: 90%;
    overflow: scroll;
  }

nav ul.main-menu {
  grid-template-columns: auto;
}

  nav ul li.menu-section {
  	width: 100%;
  }

  .menuOpen {
    margin-left: 0;
  }

}

/*=========================================FORMS=================================*/
.neon-form {
	border: none;
}

.neon-form td {
	border: none;
}

.control_textbox, #snippet_donationLevelFreeInput {
	padding: 0.5em;
	border-radius: 4px;
	border: 1px solid #444;
}

.control_button {
	background:#b0455c;
	color:#fff7eb;
	padding: 1em;
	border: none;
	font-size: 1em;
	border-radius: 8px;
	text-transform: uppercase;
	font-weight: bold;
	}