/* colours */

a{
	color:inherit;
}
body,#footer,#footer .outer{
	background:#020609;
	color:#ffffff;
}
.skip-link{
	border-color:black;
	color:black;
	background-color:#ffffff;
	text-decoration:none;
}
#nav{
	background:rgba(2,6,9,.7);
	color:#ffffff;
	border-color:#A8DAFF;
}
#nav li.homelink a:before{
	content:"";
	display:inline-block;
	width:1.5rem;
	height:1em;
	background:url(../img/home.svg) transparent no-repeat left bottom;
	filter:brightness(10);
}
#nav li.homelink a:focus:before,
#nav li.homelink a:hover:before,
#nav li.homelink a:active:before{
	filter:none;
}
#nav a,
#nav a:before,
#nav a img,
.tourdates a,
.backtotop a{
	transition:all .2s ease-in-out 0s;
}
#nav a:focus,
#nav a:hover,
#nav a:active{
	color:#A8DAFF;
}
#nav ul.menu li a:focus:after,
#nav ul.menu li a:hover:after,
#nav ul.menu li a:active:after{
	background:#A8DAFF;
}
#nav #socialnav li a img{
	filter:brightness(10);
}
#nav #socialnav li a:focus img,
#nav #socialnav li a:hover img,
#nav #socialnav li a:active img{
	filter:none;
}
#theshow .outer{
	background:linear-gradient(rgba(2,6,9,.35),rgba(2,6,0,1));
}
body#form-page #theshow .outer{
	background:transparent;
}
#theshow h1{
	text-shadow:0 0 20px #A0C4FF,0 0 20px #A0C4FF;
}
hr{
	border-color:black;
}
div.review p.stars{
	color:#ffc7f3;
	color:#ffffff;
	text-shadow:0 0 2px #FA58D8,0 0 10px #FFC7F3;
}
div.review p.quote{
	color:#81B0FF;
	color:#ffffff;
}
div.review p.byline{
}
div.reviewquotes div.review p.quote{
	color:#ffc7f3;
	color:#ffffff;
}
#booktickets{
	background:#24498D;
	color:#ffffff;
}
.tourdates,
.tourdates li{
}
#booktickets p{
}
.book a{
	color:inherit;
	border-color:#ffffff;
	background:transparent;
}
.book a:focus,
.book a:hover,
.book a:active{
	font-weight:700;
	color:#1a1a1a;
	border-color:#A8DAFF;
	background:#A8DAFF;
}
#gallery{
	background:#151F21;
}
#gallery h2{
	color:#81B0FF;
}
#castcreatives{
	background:#020609;
	color:#ffffff;
}
#castcreatives h2{
	color:#FFC7F3;
}
#education{
	background:#151F21;
}
#education h2{
	color:#81B0FF;
}
#education .small{
	font-size:1rem;
	font-size:clamp(.875rem,3.25vw,1rem);
}
body.bio h1{
	color:#FFC7F3;
}

.button a{
/*
	background:#24498D;
	color:#fff;
	border-color:#fff;
*/
	color:inherit;
	border-color:#ffffff;
	background:transparent;
}
.button a:focus,
.button a:hover,
.button a:active{
/*
	background:#81B0FF;
	color:#fff;
*/
	color:#1a1a1a;
	border-color:#A8DAFF;
	background:#A8DAFF;
}

.backtotop a{
	color:#1a1a1a;
	background:url(../img/up.svg) #FFC7F3 no-repeat .55em center;
}
.backtotop a:focus,
.backtotop a:hover,
.backtotop a:active{
	background-color:#ffffff;
}



/* reset */

*{
	box-sizing:border-box;
}
html,body,h1,h2,h3,p,ul,li,blockquote{
	padding:0;
	margin:0;
}
/* scroll-behaviour removed, because it should scroll slower, and done that via jQuery */
/*
html{
	scroll-behavior: smooth;
}
.section{
	scroll-margin-top:2em;
}
*/

img,iframe{
	max-width:100%;
}


/* fonts:
Poppins - everyting (medium and bold)
*/

html{
	font-size:16px; /* basis for 'rem' sizes */
}

body{
	font-family:'Poppins',Arial,sans-serif;
	font-size:100%;
	font-weight:500;
	line-height:1;
}
#nav a,
#booktickets ul.tourdates a,
ul.castlist li a,
.button a,
.backtotop a{
	text-decoration:none;
}
#theshow a,
#castcreatives .creativeslist a,
/* ul.castlist li a span.name, */
#footer .fname a{
	text-decoration:underline;
}
#theshow a:focus,
#theshow a:hover,
#theshow a:active,
#castcreatives .creativeslist a:focus,
#castcreatives .creativeslist a:hover,
#castcreatives .creativeslist a:active,
ul.castlist li a span.name:focus,
ul.castlist li a span.name:hover,
ul.castlist li a span.name:active{
	text-decoration:none;
}

h1{
	font-size:4.875rem;
	font-size:clamp(1.5rem,11vw,4.875rem);
	font-weight:700;
	line-height:1.2;
	text-align:center;
	margin-bottom:.1em;
}
h2{
	font-size:3rem;
	font-size:clamp(2rem,7.45vw,3rem);
	font-weight:700;
	line-height:1.2;
	text-align:center;
	margin-bottom:1.4em;
}
.videowrapper h2{
	margin-bottom:1em;
}
.videossliderwrapper h2{
	margin-bottom:0;
}

h3,h4{
	font-size:1.5rem;
	line-height:1.35;
	margin-bottom:1.35em;
}
h5,h6,
p,ul,ol,blockquote,
input,textarea,select,option{
	font-size:1.5rem;
	font-size:clamp(1.125rem,4.2vw,1.5rem);
	line-height:1.4;
	margin-bottom:1.4em;
}
#castcreatives ul{
	font-size:clamp(1em,4.2vw,1.125rem);
}

/* styles added by Greig (?) on 2024007 */
/* font-sizes and button style edited by Els 20240508 */
.d-flex {
	display: flex; 
}
.flex-wrap {
	flex-wrap: wrap;
}

.text-center {
	text-align: center !important;
}

#form-page .intro {
	text-align: center;
}

.form-wrapper {
	text-align: left;
}

.form-wrapper label {
	display: block;
	/* font-size: 16px; */
	font-size:1rem;
	/* margin-bottom: 12px; */
	margin-bottom:.75em;
}

.form-wrapper__message {
	/* font-size: 14px; */
	font-size:1rem;
}

.form-wrapper input[type="text"], .form-wrapper input[type="email"] {
	border-radius: 10px;
	/* margin-bottom: 27px; */
	margin-bottom:1.6875rem;
	width: 100%;
}

.form-wrapper input[type="email"] {
	/* margin-bottom: 47px; */
	margin-bottm:2.9375rem;
}
.form-wrapper input[type="checkbox"] {
	/* margin-right: 10px; */
	margin-right:.625rem;
}

.form-wrapper input[type="submit"] {
/*
	background-color: #4EDDFF;
	padding: 9px 33px;
	color: #000;
	font-weight: bold;
	font-size: 20px;
	cursor: pointer;
	border: none;
*/
	color:inherit;
	border-color:#ffffff;
	background:transparent;
	font-size:1.25rem;
	font-weight:700;
	text-align:center;
	padding:1rem 2rem;
	border-width:1px;
	border-style:solid;
	cursor:pointer;
}

.form-wrapper input[type="submit"]:hover {
	color:#1a1a1a;
	border-color:#A8DAFF;
	background:#A8DAFF;
}
/* end styles added by Greig (?) */
/* end font-sizes and button style edited by Els 20240508 */




small{
	font-size:1rem;
	font-size:clamp(.875rem,3.25vw,1rem);
}
#nav ul{
	font-size:1.125rem;
	font-weight:700;
	line-height:3.78;
}
.showdetails p{
	font-size:clamp(1.125rem,4.0625vw,1.25rem);
	text-align:center;
	margin-bottom:.35em;
}
.showdetails p.production{
	font-size:1rem;
	font-size:clamp(.875rem,3.25vw,1rem);
	font-style:italic;
	margin-bottom:.5em;
}
.showinfo p{
	margin-bottom:.5em;
}
hr{
	max-width:22rem;
	font-size:1.125rem;
	/* font-size to get margin-bottom to be relative to paragraphs */
	height:1px;
	border-width:0.125rem 0 0 0;
	border-style:solid;
	margin:2.35em auto 2.35em auto;
}
div.review p{
	text-align:center;
}
div.review p.stars{
	font-size:4rem;
	font-size:clamp(3rem,11vw,4rem);
	line-height:1;
	padding-top:0;
	margin-bottom:.1em;
}
div.review p.quote{
	font-size:1.75rem;
	font-size:clamp(1.375rem,5vw,1.75rem);
	font-weight:700;
	line-height:1.35;
	padding-top:0;
	/* note: if stars are added later, this space needs to on the stars probably */
	margin-bottom:.5em;
}
div.review p.byline{
	font-size:1rem;
	font-size:clamp(.875rem,3.25vw,1rem);
	font-weight:700;
	line-height:1.3;
	margin-bottom:2.5em;
}
.tourdates{
	font-size:1.125rem;
	line-height:1.4;
	margin-bottom:3.3em;
}
.tourdates span.date,
.tourdates span.city,
.tourdates span.phonenumber{
	font-weight:700;
}
.tourdates .book{
	font-size:1.25rem;
}
#gallery .bx-wrapper{
	margin-bottom:1rem; /* if there is no pager */
}
#gallery .bx-wrapper .bx-caption{
	background:rgba(0,0,0,.7);
}
#gallery p{
	text-align:center;
}
.videossliderwrapper{
	margin-bottom:5rem;
}
.videowrapper p.caption{
	/* font-size inherit from body copy size */
	text-align:center;
	padding-top:1rem;
	min-height:3.5rem; /* so we can set the same height for top padding above the video when in the slider */
	margin-bottom:0;
}
#booktickets p{
	font-size:1rem;
	line-height:1.4;
	text-align:center;
	margin-bottom:.7em;
}
#castcreatives ul{
	line-height:1.5;
}
ul.creativeslist li .name,
ul.castlist li .name{
	font-weight:700;
}

.backtotop{
	font-size:1.125rem;
	font-weight:700;
	line-height:2.89em;
}
#footer h3,
#footer p,
#footer ul{
	font-size:1rem;
	margin-bottom:.2em;
}
#footer h3{
	font-weight:700;
}


.bio h1{
	font-size:2rem;
	font-size:clamp(1.25rem,6vw,2rem);
	font-weight:700;
	text-align:center;
	margin-bottom:0;
}
.bio h2{
	font-size:1.75rem;
	font-size:clamp(1.125rem,4vw,1.75rem);
	text-transform:none;
}


/* layout */


.screen-reader-text{
	position:fixed;
	top:-40000px;
	left:-40000px;
}
.skip-link{
	display:block; /* in case it's a span inside a link */
	border-width:4px;
	border-style:solid;
	border-radius:10px;
	padding:1rem;
}
.skip-link:focus,
a:focus .skip-link{
	top:1rem;
	left:1rem;
	z-index:90001;
}

/* overlap system from bottom up */
.section{
	position:relative;
}
#castcreatives{z-index:1;}
#education{z-index:2;}
#booktickets{z-index:3;}
#gallery{z-index:4;}
#header{z-index:5;}
#theshow{z-index:6;} /* switched header and show for this one */
#footer{
	z-index:10; /* needs to go in front of whatever section ends up directly above it */
}
#nav{z-index:90000;}

#nav{
	padding:0 clamp(1.25rem,5vw,14.0625rem);
	border-width:0 0 1px 0;
	border-style:solid;
}
.outer{
	padding-top:5.5rem;
	padding-bottom:2.1875rem;
	padding-left:2rem;
	padding-right:2rem;
	padding-left:clamp(1.25rem,5vw,14.0625rem);
	padding-right:clamp(1.25rem,5vw,14.0625rem);
	margin-top:-1.5625rem;
}
#booktickets .outer{
	padding-bottom:5rem;
}
#footer .outer{
	margin-top:0;
}
.inner{
	max-width:64rem;
	margin:0 auto;
}
#nav .inner,
#footer .inner{
	max-width:100%;
}

#wrapper{
	/* padding-top:4.25rem; */
}
#nav{
	height:4.25rem;
	position:fixed;
	left:0;
	top:0;
	width:100%;
}
#toggle{
	display:none;
}
#navcontent{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#nav ul{
	list-style:none;
	margin-left:-0.8em;
}
#nav ul.menu li{
	display:inline-block;
}
#nav ul.menu li a{
	display:inline-block;
	padding:0 .5em;
	position:relative;
}
#nav ul.menu li a:after{
	content:" ";
	display:block;
	width:calc(100% - 1.6em);
	height:.16em;
	position:absolute;
	left:.8em;
	bottom:0;
}
#socialnav{
	position:absolute;
	top:0;
	right:2rem;
	right:clamp(1.25rem,5vw,14.0625rem);
}
#socialnav li{
	display:inline-block;
	width:2rem;
	vertical-align:middle;
	margin-left:.5rem;
	margin-bottom:.5rem;
}
#socialnav li a,
#socialnav li a img{
	display:block;
}
#top{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100vh;
}
#header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:0;
	padding-top:calc(91.75rem + 4.25rem);
	text-align:center;
	background:url(../img/wonderboy-poster-full.jpg) #020609 no-repeat center bottom / 120rem auto;
}
body#form-page #header{
	position:static;
	padding-top:0;
}
#theshow{
	margin-top:calc(100vh);
	margin-top:clamp(5rem, calc(110% + 4.25rem), 100vh);
	border-top:1px solid #A8DAFF;
}
body#form-page #theshow{
	margin-top:4.25rem; /* to clear the top bar */
	background:#151F21;
}
@media(max-width:1300px){
	#header{
		padding-top:calc(125% - (.36 * (100vw - 860px)) + 4.25rem);
		background-size:147% auto;
	}
}
@media(max-width:860px){
	#header{
		padding-top:calc(125% + 4.25rem);
	}
	#theshow{
		margin-top:clamp(5rem, calc(126% + 4.25rem), 100vh);
	}
}
#theshow .outer{
	padding-top:3rem;
	margin-top:0;
}
#theshow #content{
	position:absolute;
	margin-top:-5rem;
	height:1em;
}
#theshow .content{
	padding-top:4.25rem;
}
#theshow .showinfo{
	padding-top:1.2rem;
	margin-bottom:4.5rem;
}

.videowrapper{
	margin:3.5rem auto 3.5rem auto;
	padding-bottom:6.25%;
}
.videosslider .videowrapper{
	margin:0 auto;
	padding-bottom:0;
	padding-top:3.5rem; /* balancing the caption height for centering arrows */
}
.videobox{
	position:relative;
	width:100%;
	height:0;
	padding-top:56.25%;
}
.videobox iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.review,
.reviewquotes{
	max-width:41.625rem;
	margin:0 auto;
}
.review p.quote{
	max-width:40em;
}
.bxslider{
	height:100%;
}
.bxslider li{
	list-style:none;
}
ul.bxslider li p.review{
	display:table-cell;
	width:56.25rem; /* needed for horizontal centering of shorter quotes */
	max-width:100%;
	height:11em; /* this will automatically get higher where needed, but it will vertically center the quotes for most screens */
	text-align:center;
	vertical-align:top;
}
.review span{
	display:block;
}


.videosslider




.tourdates{
	list-style:none;
	border-width:1px 0 0 0;
	border-style:solid;
}
.tourdates li{
	display:flex;
	flex-wrap:wrap;
	padding:1.75rem 0;
	border-width:0 0 1px 0;
	border-style:solid;
}
.tourdates li span.date{
	width:29%;
}
.tourdates li span.venue{
	width:31%;
}
.tourdates li span.phone{
	width:23%;
}
.tourdates li span.book{
	width:17%;
}
.tourdates li span.date,
.tourdates li span.venue,
.tourdates li span.phone{
	padding-right:1em;
}
.tourdates li span.venue span,
.tourdates li span.phone span{
	display:block;
}
.book{
	text-align:right;
}
.book a{
	display:inline-block;
	width:9.375rem;
	max-width:100%; /* of .book */
	min-height:2.75rem;
	line-height:1.5em;
	text-align:center;
}
.book a{
	padding:0.35em;
	border-width:1px;
	border-style:solid;
}
#education .inner{
	padding-bottom:2rem;
}
#education p.eduimg{
	text-align:center;
}
.button{
	text-align:center;
}
.button a{
	display:inline-block;
	padding:1rem 2rem;
/*
	border-width:3px;
	border-style:solid;
	border-radius:6px;
*/
	border-width:1px;
	border-style:solid;
	margin:0 auto 2rem auto;
}
.cast{
	margin-bottom:4rem;
}
#castcreatives ul{
	list-style:none;
	text-align:center;
	margin-bottom:4rem;
}
ul.creativeslist li{
	margin-bottom:1em;
}
ul.creativeslist li span{
	display:block;
}
ul.castlist{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin-left:-1rem;
	margin-right:-1rem;
}
ul.castlist li{
	width:25%;
	padding:1rem;
}
ul.castlist li span{
	display:block;
}

#footer{
	position:relative;
}
.backtotop{
	position:absolute;
	top:-1.5em;
	left:0;
	width:100%;
	text-align:center;
}
.backtotop a{
	display:inline-block;
	padding:0 1.17em 0 2.94em;
	border-radius:1.5em;
}
#footer .fcols{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;;
}
#footer .fcol{
	width:fit-content;
	margin-right:2.5rem;
	margin-right:clamp(2rem,4.6vw,4.6rem);
	margin-bottom:2.5rem;
}
#footer .fcol3{
	order:-1;
	width:100%;
}
@media(max-width:650px){
}
#footer .fcol4{
	width:3.125rem;
	flex-grow:2;
	text-align:right;
	margin-right:0;
}
#footer .hdk a{
	display:inline-block;
	width:3.125rem;
}


/* bios */

.bio{
	padding:1.875rem 1.25rem;
}
.bio #content{
	max-width:56.25rem;
	margin:0 auto;
}
.bio img{
	float:left;
	width:15rem;
	max-width:50%;
	margin:0 1rem 1rem 0;
	position:relative;
  	top:8px;
}
.bio .biotext{
	max-width:43.75rem;
	margin:0 auto;
}
.bio a{
	color:inherit;
}
.bio a:focus,
.bio a:hover,
.bio a:active{
	text-decoration:underline dashed #ffffff;
}


/* nav menu narrow */

@media(max-width:3000px){
/* always on, or at least at regular screen sizes */
	#toggle{
		display:block;
		width:10rem;
		height:4.25rem;
		background:url(../img/burger.svg) transparent no-repeat left center;
		position:fixed;
		left:2rem;
		left:clamp(1.25rem,5vw,14.0625rem);
		top:0;
	}
	.toggled-on #toggle,
	#nav:target #toggle{
		background-image:url(../img/close.svg);
	}
	#toggle a{
		display:block;
		width:100%;
		height:100%;
		font-size:.9375rem;
		line-height:4.25rem;
		padding-left:2.5rem;
	}
	#toggle a span.screen-reader-text{
		line-height:1;
	}
	#nav{
		transition:height .5s ease-in-out 0s, overflow 1s ease-in-out 0s, background .5s ease-in-out 0s;
	}
	#wrapper:after{
		content:"";
		display:block;
		width:100%;
		height:1px;
		background:#A8DAFF;
		position:fixed;
		top:calc(4.25rem - 1px);
		left:0;
		z-index:90000; /* same as #nav, to be visible when #nav is open */
	}
	.toggled-on #nav,
	#nav:target{
		height:100%;
		overflow:auto;
		background:rgba(2,6,9,1);
	}
	#navcontent{
		display:none;
	}
	.toggled-on #navcontent,
	#nav:target #navcontent{
		display:block;
	}
	#nav ul#menu1{
		font-size:2.375rem;
		font-size:clamp(1rem,5vw,2.375rem);
		line-height:2;
		padding-top:6.125rem;
		margin-left:auto;
	}
	ul.menu{
		width:100%;
		text-align:center;
		margin-bottom:1rem;
	}
	ul.menu li{
		display:block;
		width:100%;
	}
	#nav li.homelink a:before{
		width:3rem;
		height:2em;
		background-size:1.75rem auto;
	}
	#socialnav li{
		width:1.5rem;
	}
	
	#nav .navisopen,
	#nav:target .navisclosed,
	.toggled-on #nav .navisclosed{
		display:none;
	}
	#nav .navisclosed,
	#nav:target .navisopen,
	.toggled-on #nav .navisopen{
		display:block;
	}
}


/* other width based styles */

@media(max-width:1130px){
	#nav ul{
		font-size:1rem;
	}
}
@media(max-width:980px){
	.tourdates li span.date{
		width:32%;
	}
	.tourdates li span.venue{
		width:25%;
	}
	.tourdates li span.phone{
		width:23%;
	}
	.tourdates li span.book{
		width:20%;
	}
}
@media(max-width:860px){
	.tourdates li span.date{
		width:60%;
	}
	.tourdates li span.venue{
		width:40%;
	}
	.tourdates li span.phone{
		width:60%;
	}
	.tourdates li span.book{
		width:40%;
		text-align:left;
		padding-top:1em;
	}
}
@media(max-width:710px){
	ul.castlist li{
		width:50%;
	}
}
@media(max-width:590px){
	#footer .fcol1{
		width:100%;
	}
}

@media(max-width:460px){
	.tourdates li span.date,
	.tourdates li span.venue,
	.tourdates li span.phone,
	.tourdates li span.book{
		display:block;
		width:100%;
		padding-bottom:.625rem;
	}
	.tourdates li span.phone.empty{
		padding-bottom:0;
	}
	.tourdates li span.book{
		padding-bottom:0;
	}
	ul.creativeslist li .name,
	ul.creativeslist li .role{
		width:100%;
		text-align:center;
	}
	ul.creativeslist li .role{
		order:-1;
	}
	ul.creativeslist li .role:after{
		content:":";
	}
	ul.creativeslist li{
		margin-bottom:1em;
	}
	ul.castlist li{
		width:100%;
	}
}
@media(max-width:380px){
	.bio img{
		float:none;
		width:auto;
		max-width:100%;
		margin:0 auto 1.5rem auto;
	}
}

/* header image sizes */

/*
@media(max-width:618px){
	#header{
		padding-top:116.67%;
	}
}
@media(min-width:1440px){
	#header{
		padding-top:48.61%;
	}
}
*/




/* increase sizes via html font-size */


@media(min-width:1921px){html{font-size:18px;}}
@media(min-width:1960px){html{font-size:20px;}}
@media(min-width:2055px){html{font-size:21px;}}
@media(min-width:2150px){html{font-size:22px;}}
@media(min-width:2245px){html{font-size:23px;}}
@media(min-width:2340px){html{font-size:24px;}}
@media(min-width:2435px){html{font-size:25px;}}
@media(min-width:2530px){html{font-size:26px;}}
@media(min-width:2625px){html{font-size:27px;}}
@media(min-width:2720px){html{font-size:28px;}}
@media(min-width:2815px){html{font-size:29px;}}
@media(min-width:2910px){html{font-size:30px;}}
@media(min-width:3005px){html{font-size:31px;}}
@media(min-width:3100px){html{font-size:32px;}}
@media(min-width:3100px){html{font-size:33px;}}
@media(min-width:3195px){html{font-size:34px;}}
@media(min-width:3290px){html{font-size:36px;}}
@media(min-width:3385px){html{font-size:37px;}}
@media(min-width:3480px){html{font-size:38px;}}
@media(min-width:3575px){html{font-size:39px;}}
@media(min-width:3670px){html{font-size:40px;}}
@media(min-width:3765px){html{font-size:41px;}}
@media(min-width:3860px){html{font-size:42px;}}
@media(min-width:3955px){html{font-size:43px;}}
@media(min-width:4050px){html{font-size:44px;}}