/*gradients - 62% is golden rat - based on JTB style guide form ben */
:root {/*  VC --- VOX CANVAS  */
--wp--preset--color--base: #111;
--grey-gradient: linear-gradient(90deg, #323232 0%, #787878 62%, #B7B7B7 100%);
--grey-flat-gradient-dark: linear-gradient(90deg, #323232 0%, #606060 62%, #6D6D6D 100%);
--grey-flat-gradient: linear-gradient(90deg, #787878 0%, #8D8D8D 62%, #B7B7B7 100%);
--grey-gradient-transp: linear-gradient(90deg, #323232aa 0%, #787878aa 62%, #B7B7B7aa 100%);
--silver-gradient: linear-gradient(90deg, #A9A9A9 0%, #CBCBCB 62%, #D2D2D2 100%);
--light-silver-gradient: linear-gradient(90deg, #CBCBCB 0%, #E5E5E5 62%, #EFEFEF 100%);
--light-silver-flat-gradient: linear-gradient(90deg, #E5E5E5 0%, #E8E8E8 62%, #EFEFEF 100%);
--light-silver-flat-gradient-lighter: linear-gradient(90deg, #E5E5E5 0%, #E8E8E8 62%, #EFEFEF33 100%);
--brown-gradient: linear-gradient(90deg, #6e2814 0%, #a04614 62%, #dc8200 100%);
/*--current-show-gradient:  linear-gradient(90deg, #0e0072 0%, #000083 62%, #0105c7 100%); */


--current-show-gradient: linear-gradient(90deg, #FFD0F5 0%, #FFB9F8 62%, #BC98FF 100%); 
--current-show-gradient-hover: linear-gradient(90deg, #FF9DFF 0%, #E88AFF 62%, #BE70FF 100%); 

--url-hover-gradient: linear-gradient(90deg, #CEE5FF 0%, #D7B7FF 62%, #F6A8FF 100%);

/*
 --ghd-bg-gradient: linear-gradient(90deg, #1A1A1A 0%, #362112 65%, #472207 100%);
  old - black to brown
  new - green to brown bg
  */
  
  --ghd-bg-gradient:   linear-gradient(90deg, #12190F 0%, #212e0b 65%, #4d2e17 100%)  ;
  
	
} /*custom styles - mobile stuff under this*/
/* V3 -   dark mode, switch to human tix ticketing, minimal home page */
/* - 2026 AUG  - PARRA PIPE NEW */




#gradient-canvas {
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

#gradient-canvas.isLoaded {
  opacity: 1;
}


html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #1A062C; /* Base fallback background */
}

/* Desktop & Tablet: Show WebGL Canvas */
#gradient-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  display: block;
  --gradient-color-1: #3E003A;
  --gradient-color-2: #0B0222;
  --gradient-color-3: #360228;
  --gradient-color-4: #0E0F3E;
}

/* Mobile Fallback Element */
.mobile-gradient-fallback {
  display: none;
}

/* Mobile Optimization: Hide WebGL, Show CSS Blur */
@media (max-width: 768px) {
  #gradient-canvas {
    display: none !important;
  }
  
  .mobile-gradient-fallback {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(135deg, #3E003A 0%, #0B0222 35%, #360228 70%, #0E0F3E 100%);
    filter: blur(50px);
    transform: scale(1.2); /* Prevents blur edge artifacts 
	 --gradient-color-1: #3E003A;
  --gradient-color-2: #0B0222;
  --gradient-color-3: #360228;
  --gradient-color-4: #0E0F3E;
  */
  }
}




/* - top banner dif for each page */
body.page-id-7 header::before { background-image: url('/u/vox-banner-26.jpg'); /* banner main */ }
body.page-id-97 header::before { background-image: url('/u/vox-banner-hire-us.jpg') !important ;
 /*  HIRE US vc - sunrise TV*/ }
body.page-id-149 header::before { background-image: url('/u/vox-banner-join.jpg') !important ;
 /*  Join us 2026 - blackheath choir fest */ }


body header::before { background-image: url('/u/vox-banner-26.jpg'); /* default misc - charity current show   */ }


header .wp-container-core-group-is-layout-fbffc046 { 
position: absolute;
  top: 30px;
  right: 50px;
}


/* 1. Base state: Dark background, hidden image */
body header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1c1410; /* Solid dark fallback to prevent white flash */
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* 2. When the image is preloaded by JS, allow it to be visible IF scrolled to top */
body.scrolled-to-top header.image-loaded::before {
    background-image: url('/u/vox-banner-26.jpg');
    opacity: 1;
}

/* 3. When you scroll down (removing .scrolled-to-top), fade the image out */
body header.image-loaded::before {
    background-image: url('/u/vox-banner-26.jpg');
    opacity: 0; 
}



/* Force the post content container into a boxed frosted glass card */
.entry-content.wp-block-post-content {
background: rgba(0, 0, 0, 0.27) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 20px;
  padding: 2rem 0.3rem !important;
  margin: 1.2rem auto !important;
  max-width: 900px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.11);
}





/* 1. Ensure body stays clean */
html body {
  background: #11061d !important;
  min-height: 100vh;
  margin: 0;
}

/* 2. Background layer with sharp noise and active animation */
html xxx body::before {
   
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -999;
  pointer-events: none;
  --grain-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-image: var(--grain-noise), radial-gradient(circle at 85% 30%, rgba(120, 20, 90, 0.45) 0%, transparent 50%), radial-gradient(circle at 75% 70%, rgba(40, 20, 110, 0.5) 0%, transparent 60%), radial-gradient(circle at 90% 90%, rgba(15, 30, 80, 0.6) 0%, transparent 50%), linear-gradient(90deg, #250b3b 0%, #250a3b 50%, #7a0e69 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 110px 110px, 140% 140%, 150% 150%, 140% 140%, 100% 100%;
  filter: contrast(150%) brightness(120%);
  background-blend-mode: overlay;
  animation: driftGradients 9s ease infinite alternate;
  
  
}

/* 3. Noticeable drifting animation for the gradient pools */
@keyframes driftGradients {
  0% {
    background-position: 0 0, 10% 20%, 70% 30%, 40% 80%, 0 0;
  }
  50% {
    background-position: 0 0, 60% 70%, 20% 80%, 90% 20%, 0 0;
  }
  100% {
    background-position: 0 0, 30% 10%, 80% 50%, 10% 40%, 0 0;
  }
}




html body {
  background: transparent  !important ; 
}








#wpadminbar{
	background:var(--brown-gradient);
}



html body.scrolled-to-top nav.wp-block-navigation,header {
  position: relative; 
}

nav.wp-container-core-navigation-is-layout-6e943505{
position: relative;
  top: 8px;
  }
 html body.scrolled-to-top  nav.wp-container-core-navigation-is-layout-6e943505{
position: relative;
  top: 0px;
  }

.wp-block-search__inside-wrapper { 
  zoom: 80%;
}.wp-block-search__inside-wrapper button {color: white;
background: #525252;}
.wp-block-search__inside-wrapper button:hover {background: #343434;}



/* Fix mobile menu overflow clipping */
html.has-modal-open .wp-site-blocks {
  overflow: visible !important;
}

html.has-modal-open header {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}

/* Ensure WordPress Block Navigation Overlay covers the screen and scrolls */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  z-index: 999999 !important;
}




/* Reset alignment & position for opened mobile menu */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  text-align: left !important;
}

/* Fix submenu alignment on mobile */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  padding-left: 1rem !important;
  position: static !important;
  left: 0 !important;
}


/* Lock page background scrolling when mobile menu is open */
html.has-modal-open,
html.has-modal-open body {
  overflow: hidden !important;
  height: 100vh !important;
  position: fixed !important;
  width: 100% !important;
}

/* Force close button (X) inside viewport boundaries */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: fixed !important;
  top: 15px !important;
  right: 15px !important;
  z-index: 10000999900 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Style the close button SVG so it stands out on dark background */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  width: 32px !important;
  height: 32px !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* Ensure modal dialog area leaves top space for close button */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  padding-top: 60px !important;
  box-sizing: border-box !important;
}


/* 1. Fix Android Firefox "position: fixed" stacking context breakdown */
html.has-modal-open header,
html.has-modal-open .wp-site-blocks,
html.has-modal-open .wp-block-navigation__responsive-container {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
  perspective: none !important;
}

/* 2. Lock view and prevent page scroll on mobile engines */
html.has-modal-open,
html.has-modal-open body {
  overflow: hidden !important;
  height: 100vh !important;
  position: fixed !important;
  width: 100% !important;
}

/* 3. Ensure close button remains visible on Android Firefox */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: fixed !important;
  top: 15px !important;
  right: 15px !important;
  z-index: 2147483647 !important; /* Max CSS z-index */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important; /* Minimum touch target size */
  height: 44px !important;
  background-color: rgba(0, 0, 0, 0.6) !important; /* Solid backdrop for contrast */
  border-radius: 50% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 4. Force SVG visibility and color in Firefox Android */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  width: 24px !important;
  height: 24px !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
  filter: none !important;
}

/* 5. Fallback spacing so top menu items do not obscure the button */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  padding-top: 70px !important;
  box-sizing: border-box !important;
}




html .wp-block-site-title{overflow:hidden;}






 
html body.scrolled-to-top.error404 main {
  padding-top: 120px !important;
}

/* home top scrll menu dark error, invert and background ligh t */

html body.scrolled-to-top header ul ul {
	background-color: #black !important;
	color:white  !important ;
	filter:invert(0) hue-rotate(180deg)  !important ;
	}
html body.scrolled-to-top header ul ul li a span {color:white  !important ;}



html body header a{
	color: white  !important ;
	text-decoration:none !important ;
}

html body header ul ul {background-color:#333 !important ;}
html body header ul ul.has-base-background-color {background-color:#333 !important ;}


html .wp-block-site-title a:hover { 
  background-image: none !important; 
}

html .wp-site-blocks{width:100%;overflow:hidden;}


html header a:hover{
	text-decoration:underline;
}

html body {
	color:#FFF  !important ;
}

html body a { color:#a0e9ff !important ;text-decoration:underline !important ; }
html body a:hover { text-decoration:none !important ;color:#F3C8FF !important ; 
background: initial;    background-clip: initial;  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;}


.wp-block-site-title a:hover {
  display: block !important ;
  width: 77px !important ;
  height: 60px !important ;
  background-image: url('/u/vc-logo-small.png') !important ;
  background-size: contain !important ;
  background-repeat: no-repeat !important ;
  text-indent: -9999px !important ; 
   filter: invert(1) hue-rotate(280deg) saturate(1.2) brightness(0.95);
   
}
main h1.wp-block-post-title{display:none !important ;}
body  .wp-block-site-title a::after 
, .wp-block-site-title a ,  html body .wp-block-site-title a
{   filter: invert(1) hue-rotate(180deg) saturate(1.2) brightness(0.95);}
 html body.scrolled-to-top .wp-block-site-title a
{   filter:  initial; }


h1,h2,h3,h4,h5,h6,h7{
	font-weight: 700 !important ;
text-transform:initial;
  font-weight: bold !important ;
  display: table !important ;
  justify-content: center !important ;
  align-items: center !important ;
  gap: 1rem !important ;
  background: var(--current-show-gradient) !important ;
  -webkit-background-clip: text !important ;
  -webkit-text-fill-color: transparent !important ;
  line-height: 1.3em !important ;
  clear:both;
  margin:0.5em auto 0 auto;
  margin-bottom:0 !important ;padding-bottom:0 !important ;
}

html footer {
background: #1c14104f;
  color: #dadada;
  backdrop-filter: blur(4px);
   
}

html .wp-block-button a{
	background-color:white !important ;
	color:black !important ;
	background:white !important ; 
  -webkit-background-clip: initial !important ;
  -webkit-text-fill-color: initial !important ;
  text-decoration:none !important ;
  display:block;position:relative;float:left !important ;
}
html .wp-block-button a:hover{
	background-color:black !important ;
	color:white !important ;
	/*background:black  !important ;*/
	background: #2d8421 !important;
}
html .wp-block-button{
	display:block;position:relative;float:left !important ;
}


.wpcf7-quiz{max-width: 470px;}
html #wp-admin-bar-wp-logo{display:none !important ;}


html strong, html b{font-weight: 600;}



.error404 main div div figure img{
  display:none;
}

.error404 main div div figure {
  width:98%;
  height:208px;
  background-image:url(https://voxcanvas.com/u/404-vox-canvas-dvpink.jpg);
  background-repeat:no-repeat;
  background-size:100%;
  border-radius: 18px;
}


.page-id-79 .wp-image-133  , .page-id-79 .wp-image-1196
{filter: invert(1) hue-rotate(180deg) brightness(0.855) saturate(1.3);}


.page-id-126 input, .page-id-126 textarea,
.page-id-126 iframe,
.page-id-97 input, .page-id-97 textarea,
.page-id-97 iframe,
.page-id-149 input, .page-id-149 textarea,
.page-id-149 iframe
{
filter:invert(1) hue-rotate(180deg);
}

.page-id-126 input {border: 2px solid #bcbcbc;
padding: 5px 12px;}
main a {line-height: 1.3em  !important ;}




  
  

/*MOBILE*/

@media only screen and (max-width: 600px) {


html nav.wp-container-core-navigation-is-layout-6e943505 {
  position: relative;
  top: 0px;
}

html body{font-size: 110%;}

html body h1 {
  font-size: 28px;
}
html body h2 {
  font-size: 22px;
}
h2.wp-block-heading, html h2, html h1, .main-content h2.wp-block-heading, .main-content h2, .main-content h1 { 
  font-size: 22px  !important ; 
}

html body  
{
  /* Layer 1: Tartan Vector | Layer 2: Linear Gradient */
  background-image: var(--ghd-aus-tartan), var(--ghd-bg-gradient) !important;
  
  /* Infinite seamless tiling */
  background-repeat: repeat, no-repeat !important ; 
  
      /* CHANGE THIS NUMBER TO RESIZE THE TARTAN */
  background-size: 266px 266px, cover  !important ; 
    
  /* Softly weaves the stripes into the underlying brown colors */
  background-blend-mode: overlay !important ;
  
  min-height: 100vh;
  margin: 0;
    
    background-color: transparent !important;
}




html body.scrolled-to-top nav.wp-block-navigation {
  position: relative;
  top: 0px;
}



body.scrolled-to-top  header .is-content-justification-right.wp-container-core-group-is-layout-fbffc046 svg , 
body.scrolled-to-top .is-content-justification-right.wp-container-core-group-is-layout-fbffc046, 
.is-content-justification-right.wp-container-core-group-is-layout-fbffc046 {
	background-color:white; color: black;
}
body.scrolled-to-top  header .is-content-justification-right.wp-container-core-group-is-layout-fbffc046  button{filter:initial;color:black;}
body  header .is-content-justification-right.wp-container-core-group-is-layout-fbffc046  button{filter:initial;color:white;background-color:black;}

html body main {    padding-top: 70px !important ;}

 html body .wp-block-buttons{max-width: 90% !important;}

 html body .mc_container
 {width: 100% !important ;
 float: initial !important ;}
 
html body footer{height:202px !important ;}
html body footer .left{display:block !important ;}
html body  footer .left .copyright{display:none !important ;}
html body  .copyright2{    position: relative !important ;
    display: block !important ;
float: left !important ;}


html body footer{height:333px !important ;position:relative}
html   footer{height:222px;}
  footer   .left{    position: absolute  !important ;
bottom: 0.2em;}

html .copyright2{    position: relative;
    display: block;
float: left;}

html #hmsfooter .left,
html #hmsfooter .right{width:100%;padding-top:2em;
display: inline-block;float:initial;
  clear: both;max-width: 100%;
}html .mc_container div {
  display: inline-block;
  width: 100%;float:initial;
}
html #hmsfooter a {
  float: left;
}
html .mc_merge_var label, html .mc_merge_var input, html .mc_signup_submit{font-size: 16px;
	max-width:22%;margin-right: 1%; min-width: 20px !important ;
}html .mc_merge_var, html .mc_signup_submit input{display:inline;}
.mc_container,.mc_custom_border_hdr,#mc_signup{display:block;width:100%;}
html .mc_merge_var{display:inline !important ;}
html #mc_signup_submit{max-width:97% !important ;min-width: 20px;}

html .copyright2 {   text-align: left;  float: left;}
 html #hmsfooter .right {     padding-top: 4em;   }
html #mc_signup div{  height: 33px !important ;}
#mc_message{font-size:11px !important ;}
html .mc_custom_border_hdr	{font-size: 21px !important ;}


html  body .mc_merge_var, html  body .mc_signup_submit input{font-size: 15px !important ;}
html .mc_form_inside div label,html .mc_form_inside div input {
  margin-right: 3px !important ;
}html .mc_merge_var input,html .mc_merge_var label, html body input#mc_signup_submit{font-size: 9px !important ;}
.mc_merge_var{width: 53%;}
html body div.mc_merge_var label.mc_header_email{font-size:13px !important ;}

html footer{ 
  font-size: 66%; 
  height:188px;
}
html #hmsfooter img{max-width:55px;}

html body.scrolled-to-top main {    padding-top: 7em !important ;}
/*mobile home page position logo around photo*/
body.scrolled-to-top .wp-block-site-title{position:relative;top:-6px;}

html .wp-block-site-title a,
html .wp-block-site-title a ,
html body.scrolled-to-top .wp-block-site-title a{  
	        width: 90px !important;
        height: 119px !important; 
		
}
html .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100%  !important ;
}
html body.scrolled-to-top header
{height:130px !important ;min-height:130px  !important ;position:fixed;}
html body header
{height:80px  ;min-height:80px    ;position:fixed;}

html body.scrolled-to-top .wp-block-site-title a::after {
     
	
	        width: 90px !important;
        height: 119px !important;
         background-size: 80px auto !important;
		
		
}


html body .wp-block-site-title a::before { 
          width: 90px !important;
        height: 119px !important;
        background-image: url(/u/vox-canvas-white-mono.png);
        background-size: 80px auto !important;
}

html body.scrolled-to-top header  .menu-item  a span,
html body.scrolled-to-top header .wp-block-navigation-item__content
{color:white;text-decoration-color:white  ; outline-color: white; /* Set only the outline color */
font-size: 18px;
  text-shadow: initial;}

html body.scrolled-to-top header  .menu-item ul  a span{color:#black;text-decoration-color:black  !important ; outline-color: black  !important ; text-shadow:initial;}

body.scrolled-to-top header  #modal-1 svg {
  filter: initial;
}

html body.scrolled-to-top main .wp-block-group{top: 0px;}
html body h1.wp-block-post-title {margin-top:80px;}
html body .wp-block-site-title a{ 
    
	 background-size: 38px auto  !important ;
	 
	   width: 77px !important ;
  height: 60px !important ;
  
  
}

body .wp-block-site-title a::after { 
  background-size: 38px auto  !important ;
	 
	   width: 77px !important ;
  height: 60px !important ;
}



}/*END-mobile*/






/*MOBILE-tiny*/
@media only screen and (max-width: 480px) {


}/*END-mobile*/







/*SMALL - computer screen*/
@media only screen and (max-width: 600px) {
	
	html .has-global-padding {
  padding-right: 1em;
  padding-left: 1em;
}

	.entry-content.wp-block-post-content { 
  padding: 0.5rem 0.7rem !important;
  margin: 1.2rem auto !important; 
}
	
html body  

{
  /* Layer 1: Tartan Vector | Layer 2: Linear Gradient */
  background-image: var(--ghd-aus-tartan), var(--ghd-bg-gradient) !important;
  
  /* Infinite seamless tiling */
  background-repeat: repeat, no-repeat !important ; 
  
      /* CHANGE THIS NUMBER TO RESIZE THE TARTAN */
  background-size: 266px 266px, cover  !important ; 
    
  /* Softly weaves the stripes into the underlying brown colors */
  background-blend-mode: overlay !important ;
  
  min-height: 100vh;
  margin: 0;
    
    background-color: transparent !important;
}



	html body.scrolled-to-top nav.wp-block-navigation {
  position: relative;
  top: 0px;
}


body.scrolled-to-top  header .is-content-justification-right.wp-container-core-group-is-layout-fbffc046 svg , 
body.scrolled-to-top .is-content-justification-right.wp-container-core-group-is-layout-fbffc046, 
.is-content-justification-right.wp-container-core-group-is-layout-fbffc046 {
	background-color:white; color: black;
}
body.scrolled-to-top  header .is-content-justification-right.wp-container-core-group-is-layout-fbffc046  button{filter:initial;color:black;}
body  header .is-content-justification-right.wp-container-core-group-is-layout-fbffc046  button{filter:initial;color:white;background-color:black;}

html body main {    padding-top: 70px !important ;}

 
 html body .wp-block-buttons{max-width: 90% !important;}

 
 html body .mc_container
 {width: 100% !important ;
 float: initial !important ;}

html body footer{height:202px !important ;}


html body  footer .left .copyright{display:none !important ;}

html body  .copyright2{    position: relative !important ;
    display: block !important ;
float: left !important ;}

html body footer .left{display:block !important ;}



html body footer{height:333px !important ;position:relative}
html   footer{height:222px;}
  footer   .left{    position: absolute  !important ;
bottom: 0.2em;     max-width: 80% !important ;}

html .copyright2{    position: relative;
    display: block;
float: left;}

html #hmsfooter .left,
html #hmsfooter .right{width:100%;padding-top:2em;
display: inline-block;float:initial;
  clear: both;max-width: 100%;
}html .mc_container div {
  display: inline-block;
  width: 100%;float:initial;
}
html #hmsfooter a {
  float: left;
}
html .mc_merge_var label, html .mc_merge_var input, html .mc_signup_submit{font-size: 16px;
	max-width:22%;margin-right: 1%; min-width: 20px !important ;
}html .mc_merge_var, html .mc_signup_submit input{display:inline;}
.mc_container,.mc_custom_border_hdr,#mc_signup{display:block;width:100%;}
html .mc_merge_var{display:inline !important ;}
html #mc_signup_submit{max-width:97% !important ;min-width: 20px;}
html footer{height:388px;}
html .copyright2 {   text-align: left;  float: left;}
 html #hmsfooter .right {     padding-top: 4em;   }
html #mc_signup div{  height: 33px !important ;}
#mc_message{font-size:11px !important ;}
html .mc_custom_border_hdr	{font-size: 19px !important ;}


.mc_form_inside{display:block !important ;width:100% !important ;}
#mc_message{width: 100% !important ;
  position: absolute !important ;
  bottom: -2.8em !important ;
  left: 0px !important ;}



html .mc_merge_var input,html .mc_merge_var label, html body input#mc_signup_submit{font-size: 10px !important ;}
html body div.mc_merge_var label.mc_header_email{font-size:13px !important ;}

html body.scrolled-to-top main  {    padding-top: 7em !important ;}
/*mobile home page position logo around photo*/
body.scrolled-to-top .wp-block-site-title{position:relative;top:-6px;}

html .wp-block-site-title {width:100px;}
html .wp-block-site-title a,
html .wp-block-site-title a ,
html body.scrolled-to-top .wp-block-site-title a{ 
          width: 90px !important;
        height: 119px !important; 
}
html .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100%  !important ;
}
html body.scrolled-to-top header
{height:130px !important ;min-height:130px  !important ;position:fixed;}
html body header
{height:80px  ;min-height:80px    ;position:fixed;}

html body.scrolled-to-top .wp-block-site-title a::after {
            width: 90px !important;
        height: 119px !important;
       
        background-size: 80px auto !important;
}

html body .wp-block-site-title a::before { 
          width: 90px !important;
        height: 119px !important;
        background-image: url(/u/vox-canvas-white-mono.png);
        background-size: 80px auto !important;
}

html body.scrolled-to-top header  .menu-item  a span,
html body.scrolled-to-top header .wp-block-navigation-item__content
{color: white ;text-decoration-color:white  ; outline-color: white; /* Set only the outline color */
font-size: 18px;
  text-shadow: initial;}

html body.scrolled-to-top header .menu-item ul a span {
  color: white;
  text-decoration-color: white !important;
  outline-color: white !important;
  text-shadow: initial;
}

html body.scrolled-to-top header  .menu-item ul  a span{color:black;text-decoration-color:black  !important ; outline-color: black  !important ; text-shadow:initial;}

body.scrolled-to-top header svg {
  filter: initial;
}

body.scrolled-to-top header  #modal-1 svg {
  filter: initial;
}

html body.scrolled-to-top main .wp-block-group{top: 0px;}
html body h1.wp-block-post-title {margin-top:80px;}
html body .wp-block-site-title a{ 
    background-size: 38px auto  !important ;
	 
	   width: 77px !important ;
  height: 60px !important ;
}

body .wp-block-site-title a::after { 
    background-size: 38px auto  !important ;
	 
	   width: 77px !important ;
  height: 60px !important ;
}






}
/*END-small-comp-screen*/









/*MED - computer screen*/
@media only screen and (max-width: 1120px) {

html .copyright2 { 
           font-size: 12px;
}
html .left  {
    max-width: 66%;
}

}
/*END-med-comp-screen*/





/*MED - computer screen*/
@media only screen and (max-width: 888px) {

html .copyright2 { 
           font-size: 12px;
}
html .right  {
    width: 100%;display:block;clear:both;
}html body .left  {
    max-width: 96% !important ;
}

html footer{height:288px !important ;}
html .copyright2 	{    float: left;}
html #hmsfooter .right {
float: left;}

 html body .mc_container
 {width: 100% !important ;
 float: initial !important ;}
  html body .wp-block-buttons{max-width: 90% !important;}

 
 
}
/*END-med-comp-screen*/

 
 
 /*
 
 floating email box
  
 html body.scrolled-to-top .mc_container {
   position: relative  !important ;
    top: inherit;
    right: inherit;
    background: inherit;
    padding: 10px 20px;
    border-radius: 5px;
}
 
 
 html body  .mc_container {
 position: fixed;
  top: 120px;
  right: 10px;
  background: rgba(209, 195, 187, 0.84);
  padding: 10px 20px;
  border-radius: 5px;
  color: #000;
}

*/





html .wp-block-button,html  .wp-block-button a { 
  font-size: 20px;
}
 
 
 
 html body .mc_container
 {width: 34%;
 float: right;}


html body.scrolled-to-top header ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content { 
  text-decoration-color: #262626;
  outline-color: #393939; 
}


/*email subscribe mail chimp 2025*/
.mc_success_msg{color: #059e00;}
.mc_container div{display:inline;}
.mc_custom_border_hdr{font-weight:bold;}
#mc_signup div{font-size: 16px;
  height: 73px;}
#mc_signup input{font-size: 13px;
  height: 22px;}

#mc_signup input#mc_signup_submit  {font-size: 18px;
  height: 27px;
   background: linear-gradient(90deg, #8EEDDC 0%, #ECFFE5 62%, #B4D8FFFC  100%);
  border: none;box-shadow: 2px 2px 4px #00000017;
  border-radius: 6px;}
  #mc_signup input#mc_signup_submit:hover  { 
  background: linear-gradient(90deg, #C3FB9F  0%, #E8E8E8 62%, #D4E3F3FC 100%);
   }
   .mc_form_inside div label ,.mc_form_inside div input{margin-right:1em;}

.mc_container {margin-bottom: 60px;}


footer .mc_container	{margin-bottom: 0;
	float: left; display:inline-block;width:100%;}
footer .copyright{float: left; display:inline-block;width:100%;}
.clear{clear:both;}
.left , .right{max-width:50%;}


h1.wp-block-post-title{display:none;}

.copyright2{
	display: flex;
  clear: right;
  margin-top: 1em; 
  text-align: right;
float: right;}

 .copyright2{
	display: none;}
html  .copyright{
	display: block  !important ;}
 html .copyright{
	display: none;}
.mc_error_msg{color:#D50000;}

/*FOOT*/
#hmsfooter .left{position:relative;float:left;display:flex;}
#hmsfooter .right{position:relative;float:right;display:flex;}
#hmsfooter img{max-width:55px;}
#hmsfooter a	{display: block;
	margin-right: 1.8em;}

footer{
	display: block;
  height: 250px;
  background: #1c1410;
  
  font-size: 88%;
  color: #6c483a;
}



header {
    position: fixed;
    top: 0;
    width: 100%; /* Optional: To make sure the header spans the entire width */
    z-index: 1000; /* Optional: To ensure the header stays above other content */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Adds a shadow to the header */
background-color: #0b0029e0;
  backdrop-filter: blur(4px);
 
}


.wp-block-woocommerce-customer-account ,
.wc-block-mini-cart ,
html body .wp-container-core-group-is-layout-9
{display:none;}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 80%  !important ;
}

.wp-block-site-title a {
    display: block;
    width: 77px; /* Set the width of the image */
    height: 60px; /* Set the height of the image */
    background-image: url('/u/vc-logo-small.png'); /* Replace with your image path */
    background-size: contain; /* Ensures the entire image fits */
    background-repeat: no-repeat; 
    text-indent: -9999px; /* Hides any text within the <a> tag (like "Hornsby Musical Society") */
}

body.scrolled-to-top .wp-block-site-title a { 
    background-image: url('/u/vox-canvas-white-mono.png'); /* Replace with your image path */ 
	  
	
	width: 214px;
  height: 220px; 
  
  
}


body main {    padding-top: 234px !important ;}
 body.scrolled-to-top main{    padding-top: 0.5em !important ;}
 
html   main .wp-block-group { padding-top: 0.2em  !important ;}
html  main .wp-block-group { padding-top:  2em  !important ;}

    main .wp-block-group { padding-top:  3.4em  !important ;}
 .scrolled-to-top   main .wp-block-group { padding-top:  0.1em  !important ;}

html  .wp-block-buttons{max-width: 40% !important;}



/*

 main {    padding-top: 2em !important ;}
  body.scrolled-to-top main{    padding-top:0  !important ;}
  
  
main wp-block-group {}
wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained
*/



.mc_form_inside{position:relative;}

html .mc_form_inside{display:block !important ;}

.wp-block-site-title a {
    display: block;
    width: 77px; /* Set the width of the image */
    height: 60px; /* Set the height of the image */
    background-image: url('/u/vc-logo-small.png'); /* Replace with your image path */
    background-size: contain; /* Ensures the entire image fits */
    background-repeat: no-repeat; 
    text-indent: -9999px; /* Hides any text within the <a> tag (like "Hornsby Musical Society") */
}

body.scrolled-to-top .wp-block-site-title a { 
    background-image: url('/u/vox-canvas-white-mono.png'); /* Replace with your image path */ 
	
	
}



html #mc_message{display:inline !important ;}

body.scrolled-to-top .wp-block-site-title a {
    position: relative;
    background-color: initial  !important ; /* Background color */
    Background:initial  !important ;
	background-image:initial  !important ;
	   
	width: 214px !important ;
  height: 220px !important ;
  background-size: 177px auto;
  
}

body .wp-block-site-title a {
    position: relative;
    background-color: initial  !important ; /* Background color */
    Background:initial  !important ;
	background-image:initial  !important ;
	width: 77px;
    height: 60px;
}

body .wp-block-site-title a::before {
    content: '';
    position: absolute;
    top: 0;  left: 0;
   
	width: 214px;
  height: 220px;
  background-size:177px auto;
	
	
background-image: url('/u/vox-canvas-white-mono.png'); /* Replace with your image path */ 
 
    background-position: center;
    opacity: 0; /* Initially set opacity to 0 */
    transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

body.scrolled-to-top .wp-block-site-title a::before {
    opacity: 1; /* On hover, set opacity to 1 */
}


body.scrolled-to-top .wp-block-site-title a::after {
    content: '';
    position: absolute;
    top: 0;  left: 0;
  	width: 77px;
    height: 60px;
background-image: url('/u/vc-logo-small.png'); /* Replace with your image path */ 
    background-size: 48px auto ;
    background-position: top; 
    opacity: 0; /* Initially set opacity to 0 */
    transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

body .wp-block-site-title a::after {
    opacity: 1; /* On hover, set opacity to 1 */
	
	    content: '';
    position: absolute;
    top: 0;  left: 0;
  	width: 77px;
    height: 60px;
background-image: url('/u/vc-logo-small.png'); /* Replace with your image path */ 
    background-size: 48px auto ;
    background-position: top;
    opacity: 1; /* Initially set opacity to 0 */
    transition: opacity 0.5s ease; /* Smooth transition for opacity */
	
	
	
}




body.scrolled-to-top main .wp-block-group{top: -90px;}


body .wp-block-site-title a::after,
body .wp-block-site-title a::before {
    width: 77px ; /* Set the width of the image */
    height: 60px ; /* Set the height of the image */ 
    background-size: 48px auto   ;
	background-repeat:no-repeat;
	}


html body.scrolled-to-top .wp-block-site-title a::after,
html body.scrolled-to-top .wp-block-site-title a::before {
     
	width: 214px;
  height: 220px;
  background-size: 177px auto;
}

 

.alignright{
	Position:relative;float:right;
	margin: 0 0 2em 2em ;
	max-width:50%;height:auto;
}



.scrolled-to-top header {
background: #1c1410;
transition: background-color 0.3s ease;
Position:relative;
}


body.scrolled-to-top header  .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100% !important;
}

body.scrolled-to-top header  .menu-item  a span,
body.scrolled-to-top header .wp-block-navigation-item__content
{color:#fff;text-decoration-color:#fff  ; outline-color: #fff; /* Set only the outline color */
font-size: 23px;
  text-shadow: 5px 5px 5px #000;}

body.scrolled-to-top header  .menu-item ul  a span{color:#000;text-decoration-color:#000  !important ; outline-color: #000  !important ; text-shadow:initial;}

body.scrolled-to-top header svg{filter: invert(1)brightness(1.8);}

html body .mc_merge_var  {display:inline !important ;}


body.scrolled-to-top header {
	/*height: 480px; */
    background-color: #1c1410; /* Background color */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}



body  header{
    min-height: 100px; /* Set the initial height */
    /* overflow: hidden;  Prevent content overflow during transition */
    transition: min-height 0.5s ease; /* Animate max-height */
}

body.scrolled-to-top header {
    min-height: 420px; /* Set smaller height when scrolled to top */
}

body999.scrolled-to-top header  .wp-block-site-title::after{min-height:300px;}

.entry-content img{max-width:100%;height:auto;}
form input, form textarea{
	    max-width: 98%; 
}

body header::before {
    content: '';
    position: absolute;
    top: 0;  left: 0;
    width: 100%;
    height: 100%;
background-image: url('/u/vox-banner-26.jpg'); /* Path to your image */
    background-size: cover;
    background-position: center;
    opacity: 0; /* Initially set opacity to 0 */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
}

body.scrolled-to-top header::before {
    opacity: 1; /* On hover, set opacity to 1 */
}





.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
  font-weight: bold;
}
html .wp-block-navigation .wp-block-navigation-item { 
  padding-right: 1.2em;
}


















headerzzz:hover {
    background-color: #ff5733; /* Change background color on hover */
}
bodyzzzzz header::before{
	position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('/u/hms-banner.jpg'); /* Path to your image */
background-size: cover; /* Stretch the image to cover the entire header */
background-position: center; /* Position the image in the center */
background-repeat: no-repeat; /* Prevent the image from repeating */
width: 100%; /* Ensure the header spans the full width of the container */
opacity: 1; /* Initially set opacity to 0 */
transition: opacity 0.66s ease; /* Smooth transition for opacity */
}


/*END - 2025 update - WP 2025*/

/*END - 2025 update - WP 2025*/






/* a link url */
  /*#post-area*/  a, .main-content  a{color:#1a0dab;}
  /*#post-area*/ main  a:hover, .main-content a:hover{background: var(--url-hover-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	line-height: 1.3em;}






 /*#post-area*/  h2.wp-block-heading, html   /*#post-area*/  h2, html  /*#post-area*/   h1,
 .main-content  h2.wp-block-heading ,  .main-content  h2 , .main-content  h1
 {
	font-weight: 700;
  font-size: 35px;
  display: table;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background: var(--current-show-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height:1.3em;
  text-transform:initial;
}




/*current show colour above*/

#top .container h1,#top .container h2,#top .container h3,
#top  h1,#top  h2,#top  h3, #page-header-wrap h1
{
	color:#fff  !important ;
}

html h2.jandh24{background: var(--24jandh-gradient)  !important ;  -webkit-background-clip: text  !important ;
  -webkit-text-fill-color: transparent  !important ;
  line-height:1.3em  !important ;}


html h2.urine24,
.page-id-1242 h2{background: var(--urinetown-gradient)  !important ;  -webkit-background-clip: text  !important ;
  -webkit-text-fill-color: transparent  !important ;
  line-height:1.3em  !important ;}




h2{margin-bottom:0.7em;padding-bottom:0.7em;}






/*other*/



#sidebar #text-2 h4
{
background: var(--grey-gradient) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  line-height: 1.3em !important;
}

input.wpcf7-submit, input.wpcf7-submit:hover
{line-height: 1.3em  !important ;}

.wpcf7-form input, html .ascend .container-wrap input[type="submit"] , .wpcf7-form textarea{ }

.wp-block-button, .wp-block-button a{font-weight: bold;}


.button,
body .wpcf7-form-control ,
body input[type="submit"], body button[type="submit"],body  input[type="button"]
{font-size: 24px;
  min-width: 80px;}
  
  
body .wp-block-separator{margin:2em 0;}
body .wp-element-button {margin: 0.55em 0;}

html body .nectar-button.medium { 
    font-size: 18px;
	font-weight:bold;
}
 html body .nectar-button.medium 
{    margin-top: 1em;}




/*HIDE SHOPPING CART FOR NOW*/
#mobile-cart-link i {display:none;}
 

/*header and menus */
html body #header-outer.transparent header#top nav > ul > li > a { 
  font-size: 23px; 
}
html header#top nav > ul
{right: -2em;top:1em;
  position: relative;}
html #slide-out-widget-area ul li{
margin-bottom: 1.5em;
}
html #logo img.starting-logo
{-webkit-filter: drop-shadow(5px 5px 5px #000);
  filter: drop-shadow(5px 5px 5px #000);position:relative;}
html header#top #logo .starting-logo{
	position:relative  !important ;
}html  .small-nav #logo {height: 65px;}
html  body div#header-outer.transparent, body #page-header-bg h1 {
  text-shadow: 5px 4px 6px #000;
}
html #boxed div#header-outer.small-nav{box-shadow: rgba(0, 0, 0, 0.4) 3px 0px 4px !important;}

#sidebar h4{margin-top: 0.3em;}
.small-nav ul, small-nav li{top: -0.3em  !important  ; }



/*FONTS*/
 
h1,h2,h3,h4,h5,body #sidebar h4,#page-header-bg h1, .nectar-box-roll .overlaid-content h1,#mobile-cart-link, #mobile-cart-link li, mobile-cart-link li a,h1 strong,h2 strong,h3 strong,h4 strong,h5 strong,
.wp-block-button, .wp-block-button a
{font-family: 'Archivo Black', sans-serif  !important ;
font-weight:600;}


p,div,body,span,code,sub,sup,b,strong,i{
  font-family: "Clarity City", sans-serif; 
}




body h2{font-size:35px;}
body h1{font-size:35px;}
body h3{font-size:31px;letter-spacing:0.05em;}
body h4,body h4.wp-block-heading,
.row .col h4, body h4
{font-size:25px;letter-spacing:0.05em;}
.wp-block-button, .wp-block-button a{letter-spacing:0.05em;}
html  body #copyright p{font-size: 18px;}
html  body #footer-outer i, body  #header-secondary-outer #social i {
  font-size: 31px;
}html body #footer-outer #copyright li {
  margin-left: 40px;
}html  body #footer-outer #copyright { 
  color: #444;
}

/*email sign up green success*/
html #mce-success-response{color:#077e0e;}

/*audition-page*/
 html .page-id-99 .img-with-aniamtion-wrap   img {  max-width: 700px;}

/*home-banner */
html .homebanner{
	max-width:750px  !important ;
	    width: 100%;
}

/*home-button
 * button color
SBOB - #2885cb

red button
e00000

a.has-vivid-red-background-color:hover {
background-color: #b5bece !important;
  color: #242424;
}

html  body[data-form-submit="regular"] input[type="submit"]:hover, html body[data-form-submit="regular"] button[type="submit"]:hover 
{
background-color: #ce0f2a !important;}
*/

/*button book
.regular-button{text-align:center;margin-left:auto;margin-right:auto;display:table;}

*/



/*HR*/
html body .wp-block-separator {
  border: none;
  height: 8px;
  background: #323232; 
}


/*Sub-menu-top-menu*/
html ul.sf-menu .sub-menu{top: 111px    !important ;
filter: invert(1)hue-rotate(180deg);
}

html .small-nav ul.sf-menu .sub-menu {top: 45px  !important ;}

html ul.sf-menu .sub-menu .menu-item:hover , 
html ul.sf-menu .sub-menu .menu-item a:hover {color: #ff7e7e !important;}

html ul.sf-menu .sub-menu .current_page_item a{color:#ff9f9f   !important ; }

/*Past Shows - list of shows */
.page-id-261  .main-content .row {line-height: 1.8em;
font-size: 120%;}
.page-id-261  h2{padding-bottom: 1em;}


html header#top nav > ul > li > a { 
  font-size: 15px;}


/*FOOTER*/

html #footer-outer  {
  color: #363636;
  position: relative;
  z-index: 10;
  background-color: #111;
  height: 100px;
	padding-top: 1em;}


/*header width font size */



@media   screen and (max-width: 1257px) {
html body #header-outer.transparent header#top nav > ul > li > a {
  font-size: 16px !important;
}html .page-header-bg-image h1,
html  #page-header-bg	.inner-wrap
	{
visibility: hidden !important;}
}

.sf-menu li { 
  top: 8px;
}