@charset "utf-8";
/* CSS Document */

/*GLOBAL RESETS */

* {margin: 0;padding: 0;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; list-style:none}

*:after, *:before { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section {  display: block;}

html {font-size: 100%;height: auto !important;height: 100%/*;-webkit-text-size-adjust: 100%*/;-ms-text-size-adjust: 100%;} /*rems will be based on this*/

.clear {display: block;	}
.clear::after {clear: both;content: ".";display: block;height: 1px;visibility: hidden;}

a, a:active, a:focus {
  text-decoration: none;
}

/*remove dotted outline/border in Firefox*/
button:focus,
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  outline: none !important;
}

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

/* WEB FONTS */

@font-face {
    font-family: 'MuseoSans_500';
    src: url('../webfonts/MuseoSans_500-webfont.woff2') format('woff2'),
         url('../webfonts/MuseoSans_500-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MuseoSans_100';
    src: url('../webfonts/MuseoSans_100-webfont.woff2') format('woff2'),
         url('../webfonts/MuseoSans_100-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* UNIVERSAL STYLES */

body {
  font-family: "Ubuntu", Verdana, Arial, Helvetica, sans-serif;
  margin: 0; 
  padding: 0;
  text-align: center; 
}

h1, h2, h3 {
  font-family:"MuseoSans_100", "Trebuchet MS", Helvetica, Arial, sans-serif;
}

p {
	line-height: 160%;
}

figcaption {
  font-size: 0.7rem;
}

.gap {
  margin-top: 0.5rem;
  padding-top: 10px;
}
  


/*COLOUR SCHEME */

/*The colour palette is composed of the logo colour, a 'theme' colour,
a range of 'tints' of the theme colour and one or more greys.*/

/*Current logo colour*/
/*See also the styling below for 'a.viewButton', where multiple edits
will be necessary in the event of a colour change.
Also see 'div.showTile:hover' and '.tileBanner' below, 
where RGB values are needed. */

.qstart, .qend, .concertTitle {
  color:#981a4f;  /*the quotes in the push panel, but .qend is not currently in use.*/
}

/* Current theme colour */

/*All header and nav colours and text styles*/
#headerBox > header, ul > li > a, .header-nav > ul > li a + div > ul > li > a {
  color: #ece1d1;
  text-decoration: none;
  text-shadow: 0 2px 1px rgba(0,0,0,.9);
  transition: all linear 0.1s;
}

/*Hamburger & push panel bg colour*/
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after, .ppText {
  background-color:#c8baa9;
}

/*Theme++ : general body text*/
.cPage, .gPage  {
  color: #362919;
}

/* Theme+ : muted text colour*/
.stickyNav, .stickySidebar p, .ppText > .quote .quotesource, figcaption {
  color: #7b6d5c;  /*theme + */
}

/* Theme- : general page background*/
#centralColumn {
  background-color: #acacac;
}

/*Header and nav bg colours*/
#headerBox, .header-nav > ul > li a + div, .slidernav {
  background-color:#003366; 
}


/*Link colours*/
.cPage a, .tileOverlay a {
   color:#759bad;
}

.cPage a, .tileOverlay a:hover {
   color:#981a4f;
}

article a:hover {
  text-decoration: underline;
}

/* OTHER COLOURS */

body {
  background-color: #555;
}

.stickyNav {
    background-color: #fafafa;
}

/* Other colours include the menu hover colours (#f1f1f1)
and the view button and tile banner text (white). */

/*________________________________________________________________________*/

/*CENTRAL COLUMN SETUP */

#centralColumn {
  position:relative;
	max-width:1200px;
  margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
	padding-top: 100px;
}

#eventSplash > .noticeboard {
  padding: 10px 5%;
  background-color: gold;
}

.noticeboard > p > a {
  color:red;
}

.noticeboard > p > a:hover {
  color:white;
}

.noticeboard {
  display:none;
}


/*________________________________________________________________________*/


/*HEADER BAR AND HAMBURGER 
 *
 *
 *
 *HEADER BAR AND FLEXBOX STRUCTURE */
#fixed-headerbar {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index: 15;
}

#headerBox {
	max-width:1200px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}

#headerBox > header {
	margin: 0 auto;
	display: flex;
	align-items: center;
}

.headerCell {
	height: auto;
	box-sizing:border-box;
}

.headerCell:nth-child(1) {
	width:100px;
	height:100px;
}
	
.headerCell:nth-child(2) {
	flex:8;
  /*padding-top: 0.5rem;*/
}

.headerCell:nth-child(3) {
	flex:2;
}

/*  LOGO & TITLE */
.logo {
  position: relative;
	display: block;
  text-indent: -9999px;
	width: 100%;
	height: 100%;
	background-image:url(../images/angel.png);
  /*background-image:url(../images/hcm_web_4.svg);*/
	background-repeat:no-repeat;
	background-size:100%;
	background-position: center;
}

.headerCell > h2 { /*"SITE NAME"*/
  font-family:"MuseoSans_100", "Trebuchet MS", Helvetica, Arial, sans-serif;
  /*margin-top: 0.5rem;*/
  letter-spacing: 0.3rem;
  font-size: 150%;
  color: #ece1d1;
  /*background-color: #fff;*/
}

/* VORTEX HAMBURGER BUTTON */
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent; /*changed from transparent for editing*/
  border: 0;
  margin: 0;
  overflow: visible; }

.hamburger:hover {
    opacity: 0.7; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
	outline: 0;   }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;    
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
.hamburger-inner::before {
    top: -10px; }
.hamburger-inner::after {
    bottom: -10px; }
		
/* 'VORTEX REVERSE' ANIMATION */
.hamburger-vortex-r .hamburger-inner {
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .hamburger-vortex-r .hamburger-inner::before, .hamburger-vortex-r .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: 0.1s;
    transition-timing-function: linear; }
  .hamburger-vortex-r .hamburger-inner::before {
    transition-property: top, opacity; }
  .hamburger-vortex-r .hamburger-inner::after {
    transition-property: bottom, transform; }

.hamburger-vortex-r.is-active .hamburger-inner {
  transform: rotate(-765deg);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .hamburger-vortex-r.is-active .hamburger-inner::before, .hamburger-vortex-r.is-active .hamburger-inner::after {
    transition-delay: 0s; }
  .hamburger-vortex-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0; }
  .hamburger-vortex-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg); }
		
		
/* SLIDING HAMBURGER-NAV 
	 W3S animated, closable side navigation menu*/	
.slidernav ul ul {
  display:none;
}

.slidernav {
    height: 100%;
    width: 0;
    position: fixed;
		top: 0;
		padding-top: 100px;
    z-index: 10;
    right: 0;
    overflow-x: hidden;
    transition: 0.5s;
}

.is-open {
	width: 50%;
}

.slidernav a {
    padding: 8px 8px 8px 20px;
    display: block;
		white-space:nowrap;
}

.slidernav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.slidernav ul ul a {
  padding: 8px 8px 8px 30px;
  display:block;
  font-size: 80%;
}

span.chevron {
  padding-right: 10px;
}

.slidernav li a img {
  margin-right: 10px;
}

/* There was a problem with this style. It automatically inserts chervron
characters before sub-links, but the timing was out of sync. So I used a workaround,
though it means inserting every chrevron individually. */
/*.slidernav ul ul a:before {
  content: "»";
  position: absolute;
  left: 25px;
}*/


/* RESPONSIVE ADJUSTMENTS (header & hamburger nav) */	

#rightOfHeader, #main-nav, .sidebar {
	display:none;
}

@media (max-width: 480px) {
header h2 {
	font-size: 1.2rem;
}

.is-open {
  width: 60%;
}

}


/*________________________________________________________________________*/


/*CENTRAL COLUMN STYLES
 *
 *
 *GENERAL PAGE STYLES*/

.cPage h1, .cPage h2 {
  font-family:"MuseoSans_500", "Trebuchet MS", Helvetica, Arial, sans-serif;
}

article, section {
  position: relative;
}

section p {
  margin-bottom: 0.6rem;
}

section h4 {
  margin-top: 1.2rem;
  margin-bottom: 0.6rem;
}

section > .buttonBox {
  justify-content: flex-start;
  margin: 1rem 1rem 1rem 0;
}

section .viewButton p {
  font-size: 0.7rem;
}

section blockquote {
  font-family: Georgia;
  font-style: italic;
  font-weight: bold;
  font-size: 0.8rem;
  margin-top: 0.8rem;
  line-height: 160%;
  width: 80%;
}

section cite {
  font-style: normal;
  font-size: 0.8rem;
}

section > .talk p, section > .talk h4, section .info {
  font-size: 0.8rem;
}

.cPage > figure {
  display:flex;
  margin-bottom: 1rem;
  /*border: 1px solid black;*/
}

figure > img.centred {
  margin: auto;
}

.cPage, .gPage  {
  padding: 1rem 15% 1rem 15%;
  margin-top: 2rem;
}

.cPage table {
  margin-bottom: 1rem;
}

section.cPage table td {
  vertical-align: top;
}

.picPanel figcaption {
  padding-left: 10%;
}

.cPage address {
  margin-left: 1rem;
  margin-bottom: 0.5rem;
}

#contact address {
  margin-top: 0.8rem;
  font-style: normal;
}

@media (max-width: 480px) {
  .cPage, .gPage {
    padding: 1rem 10% 1rem 10%;
    }
}



/*VIEW BUTTON */

.buttonBox {
  display:flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /*display:none;*/
} 

/*display switches for booking buttons on individual concerts*/
/*.bookc4, .bookc6 {
  display:none;
}*/
 
a.viewButton {
  display:flex;
  justify-content: center;
  align-items: center;
  padding:0.2rem 2rem;
  font-family:"MuseoSans_500", "Trebuchet MS", Helvetica, Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.1rem;
  text-shadow: 0 1px 1px rgba(0,0,0,.9);
  transition: all linear 0.1s;
  color: white;
  border:1px solid #670b32;
  border-radius: 5px;
  background:  #981a4f linear-gradient(#ae3e71, #981a4f);
  /*background: #58a linear-gradient(#77a0bb, #58a);*/
  box-shadow: 0 1px 5px gray;
}

a:hover.viewButton {
  background:  #981a4f linear-gradient(#6299be, #981a4f);
}

/* CONCERT TILES */

#tileContainer  {
  padding: 1%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.showTile {
  position: relative;
  display:flex;
  margin: 0.5rem;
  height: 302px;
  width: 320px;
  justify-content: center;
  align-content: center;
  font-family: "MuseoSans_500", "Trebuchet MS", Helvetica, Arial, sans-serif;
  text-align: center;
  cursor: pointer;
  opacity: 0.9;
}

div.showTile:hover {
  opacity: 1;
  border: 1px solid rgba(151,26,79, 0.7);
}

.tileBanner {
  position: absolute;
	left:0;
  margin-top: 60%;
  height: 25%;
  width: 318px;
  color: #fff;
  background-color: rgba(151, 26, 79, 0.8);
  z-index: 5;
}

.tileBanner > h2 {
  padding: 0.6rem;
  font-size: 1.2rem;
  text-shadow: 0 1px 1px rgba(0,0,0,.9);
  transition: all linear 0.1s;
  letter-spacing: 0.8px;
}

.longName > h2 {   /*for artist names >24 chars*/
  padding: 0.2rem;
  font-size: 1.1rem;
}

.tileBanner > p {  /*the date*/
  margin-top: 0.4rem;
  font-family: "MuseoSans_500", "Trebuchet MS", Helvetica, Arial, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 1px;
}

.tileOverlay{
  position:absolute;
	left:5%;
  margin-top: 5%;
  padding-top: 0.2rem;
  height: 90%;
  width: 90%;
  border-radius: 5px;
  background: hsla(0, 0%, 100%, .8);
  z-index: 10;
}

.tileOverlay > .buttonBox {
  position: absolute;
  top: 80%;  
  height: 20%;
}

.tileOverlay .viewButton p {
  font-size: 0.7rem;
}

.tileOverlay > h3 {
  padding-bottom: 1rem;
  padding-top: 0.3rem;
}


/* PUSH PANEL */

.pushPanel {
  display: flex;
  box-sizing: content-box;
  flex-wrap: wrap;
  max-width:  1200px;
  max-height:467px;
  padding: 0;
  margin-bottom: 1rem;
}

.ppImage {
  flex: 7;
  max-height: 467px;
}

.picPanel {
  /*max-width: 700px;*/
  padding-left:0;
  margin-bottom: 1rem;
}

.ppImage > img, .picPanel img {
  width:100%;
  height: 100%;
  max-height: 700px;
  min-width: 320px;
}

.pushPanel figcaption {
  float: right;
  padding-right: 5%;
}

.ppText {
  display:none;
}


/* FLOATING STICKY SIDEBAR */

.stickySidebar {
  display: block;
  position: absolute;
  top: 0;
  width: 190px;
  height: 540px;
  margin-left: -27%;  
}

.fixed {
  position: fixed;
  top:160px;
  left:50%;
  margin-left: -625px;
}

.stickyNav {
  display:none;
}

/* INSERT IMAGE INTO ARTICLE FLOW*/

figure.articleInsert {
  display:flex;
  padding-bottom: 1rem;
}

.articleInsert > img {
  max-width: 300px;
  min-width:150px;
  height: auto;
}

.articleInsert > figcaption {
  padding-left: 1rem;
  align-self: flex-end;
  font-size: 0.7rem;
}