/* reset */

*{
	box-sizing:border-box;
}
html{
	scroll-behavior: smooth;
	/* note: this replaces the javascript version, which is not accessible due to the 'return false' setting. */
}
.section{
	scroll-margin-top:6rem;
}
html,body,h1,h2,h3,p,ul,li,blockquote{
	padding:0;
	margin:0;
}
img,iframe{
	max-width:100%;
}


/* colours: */

html{
	scrollbar-color:#9FADD9 #D7DDF3;
}
a{
	color:inherit;
}
body,#footer,#footer .outer{
	background:black;
	color:white;
}
.skip-link{
	border-color:black;
	color:black;
	background-color:white;
}
#nav{
	background:#252E59;
	color:white;
}
#nav a{
	color:#FFFFFF
	transition:all .2s ease-in-out 0s;
}
#nav a:hover,
#nav a:focus,
#nav a:active{
	color:#B6C0E8;
}
#nav #menu1 li a{
	position:relative;
}
#nav #menu1 li a:after{
	background:#252E59;
}
#nav #menu1 li a:focus:after,
#nav #menu1 li a:hover:after,
#nav #menu1 li a:active:after{
	background-color:#B6C0E8;
}
#nav #booknow a{
	background:#B26AA4;
	color:#FFFFFF;
}
#nav #booknow a:hover,
#nav #booknow a:focus,
#nav #booknow a:active{
	background:#D189C3;
	color:#272D61;
}
#nav #socialnav li a:focus,
#nav #socialnav li a:hover,
#nav #socialnav li a:active{
	opacity:.8;
}
#header{
	height:0;
	padding-top:50%;
	background:url(../img/poster-1920.jpg) #FFFFFF no-repeat center / cover;
}
@media(max-width:618px){
	#header{
		padding-top:139.53%;
		background-image:url(../img/poster-430.jpg);
		background-position:center bottom;
	}
}
#theshow{
	background:linear-gradient(to top,#D7DDF3 0%, #D7DDF3 75%, #FFFFFF 90%, #FFFFFF 100%);
	color:#1A1A1A;
}
hr{
	border-color:black;
}
#booktickets{
	background:#252E59;
	color:#FFFFFF;
}
.button a{
	background:#B26AA4;
	color:#FFFFFF;
	transition:all .2s ease-in-out 0s;
}
.button a:focus,
.button a:hover,
.button a:active{
	background:#E088CF;
}
#castcreatives{
	background:#A0ADD9;
	color:#000000;
}
#castcreatives h2{
	color:#252E59;
}
body.bio{
	background:#D7DDF3;
	color:#1A1A1A;
}
body.bio h1{
	color:#252E59;
}


/* fonts */

/* 
Barlow
Barlow Condensed 
*/

html{
	font-size:16px; /* basis for 'rem' sizes */
}
body{
	font-family:'Barlow',sans-serif;
	font-size:100%;
	line-height:1;
}
#nav,
h1,h2,
.button{
	font-family:'Barlow Condensed',sans-serif;
}
#nav #toggle{
	font-family:'Barlow',sans-serif;
}
a{
	text-decoration:underline;
	text-underline-offset:.2em;
}
#nav a,
.button a,
ul.castlist li a{
	text-decoration:none;
}
ul.castlist li a span.name{
/*	text-decoration:underline; */
}
a:focus,
a:hover,
a:active,
ul.castlist li a:focus span.name,
ul.castlist li a:hover span.name,
ul.castlist li a:active span.name{
	text-decoration-style:dashed;
}
#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;
}
.castlist li a:focus img,
.castlist li a:hover img,
.castlist li a:active img{
	opacity:.8;
}


h1,h2{
	font-size:4.25rem;
	font-size:clamp(3rem,9vw,4.25rem);
	font-weight:700;
	text-transform:uppercase;
	line-height:.875;
	text-align:center;
	margin-bottom:1.4em;
}
h3,h4,h2 span{
	font-size:2rem;
	font-size:clamp(1.375,4.125vw,2rem);
	font-weight:600;
	line-height:1.35;
	margin-bottom:1.35em;
}
h5,h6,
p,ul,ol,blockquote,
input,textarea,select,option{
	font-size:1.25rem;
	font-size:clamp(1rem,2.2vw,1.25rem);
	font-weight:500;
	line-height:1.42;
	margin-bottom:1.42em;
}
.bio p,
.bio ul{
	font-size:clamp(1rem,2.2vw,1.25rem);
}
#nav ul{
	font-size:1.5rem;
	font-weight:700;
	text-transform:uppercase;
	line-height:6rem;
	margin-bottom:0; 
}
#theshow .intro p{
	font-size:2.125rem;
	font-size:clamp(1.4rem,3.12vw,2.125rem);
	font-weight:500;
	line-height:1.42;
	margin-bottom:1.42em;
}
#theshow .showinfo p{
	font-size:1rem;
	font-size:clamp(.875rem,2.625vw,1rem);
}
hr{
	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;
}

#booktickets h2{
	margin-bottom:.4em;
}
#booktickets p{
	font-size:1.125rem;
	text-align:center;
}
#booktickets p.date{
	font-size:2.125rem;
	line-height:1.25;
	margin-bottom:.8em;
}
#booktickets p.date span.time{
	font-size:1.5rem;
}
#booktickets p.savoylogo{
	margin-bottom:1em;
}
#booktickets p.savoylogo img{
	height:4rem;
}
#booktickets p.location{
	font-weight:700;
}
#booktickets p.info{
	font-style:italic;
	margin-top:2.5em;
}
#booktickets p.button{
	font-size:1.5rem;
	font-weight:700;
	text-transform:uppercase;
	line-height:1.2;
	margin-top:.25em;
}

#castcreatives ul{
	font-size:clamp(1rem,4vw,1.5rem);
	line-height:1.4;
}
#castcreatives ul li{
	margin-bottom:1em;
}
#castcreatives ul li .name{
	font-weight:700;
	text-transform:uppercase;
}
#castcreatives ul li .role{
	font-size:1.25rem;
}
#castcreatives ul.castlist li img{
	margin-bottom:.3rem;
}
#castcreatives p{
	text-align:center;
}
p.caption{
	font-size:16px;
	padding-top:1em;
}

#footer h3,
#footer p,
#footer ul{
	font-size:1rem;
	font-size:clamp(.875rem,2.625vw,1rem);
	margin-bottom:0;
}

.bio h1{
	font-size:4rem;
	font-size:clamp(2rem,8vw,4rem);
	font-weight:700;
	text-transform:uppercase;
	line-height:.875;
	margin-bottom:.2em;
}
.bio h2{
	font-size:2rem;
	font-size:clamp(1.375rem,4.125vw,2rem);
	font-weight:600;
	text-transform:none;
	margin-bottom:0;
}


/* layout */

html,#nav{
	scrollbar-width: thin;
}
.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;}
#gallery{z-index:2;}
#booktickets{z-index:3;}
#theshow{z-index:4;}
#header{z-index:5;}
#nav{z-index:90000;}

#nav{
	padding:0 2rem;
}
.outer{
	padding:5.125rem 2rem 4rem 2rem;
	margin-top:-1.5625rem;
}
#header .outer{
	margin-top:0;
}
.inner{
	max-width:64rem;
	margin:0 auto;
}
#nav .inner,
#footer .inner{
	max-width:91.25rem;
}

#wrapper{
	padding-top:6rem;
}
#nav{
	height:6rem;
	position:fixed;
	left:0;
	top:0;
	width:100%;
}
#toggle{
	display:none;
}
#navcontent{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}
#nav ul{
	list-style:none;
}
#nav ul.menu li{
	display:inline-block;
	margin-right:1.125rem;
}
#nav ul.menu li a{
	display:inline-block;
	padding:0 1rem;
}
#nav ul#menu1{
	margin-left:-1rem;
	margin-right:1.125rem;
}
#nav #menu1 li a:after{
	content:"";
	display:block;
	position:absolute;
	bottom:0;
	left:1rem;
	height:5px;
	width:calc(100% - 2rem);
}
#socialnav{
	flex-grow:2;
	text-align:right;
}
#socialnav li{
	display:inline-block;
	width:2rem;
	margin-left:1.125rem;
}
#socialnav li:first-child{
	margin-left:0;
}
#nav ul li a img{
	margin-bottom:-.2em;
}
#header{
	text-align:center;
}
#header #content{
	position:absolute; 
	top:0;
	left:0;
	width:100%;
}
#theshow .content{
	text-align:center;
	margin:0 auto;
}
.button a{
	display:inline-block;
	padding:.75em 3.25em;
}
.creatives{
	margin-top:3rem;
}
#castcreatives ul{
	list-style:none;
	text-align:center;
}
ul.castlist{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin-left:-1rem;
	margin-right:-1rem;
	margin-bottom:0;
}
ul.castlist li{
	width:33.33%;
	padding:1rem;
}
ul.castlist li span{
	display:block;
}

#footer .inner .logos{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin-left:clamp(-.75rem,-2vw,-1.5625rem);
	margin-right:clamp(-.75rem,-2vw,-1.5625rem);
}
#footer a{
	display:inline-block;
	margin-left:clamp(.75rem,2vw,1.5625rem);
	margin-right:clamp(.75rem,2vw,1.5625rem);
	margin-bottom:clamp(1.5rem,4vw,3.125rem);
}
#footer .logos a{
	height:clamp(2rem,5vw,2.875rem);
}
#footer a img{	
	display:block;
	width:auto;
	height:100%;
}
@media(max-width:620px){
	#footer .inner{
		justify-content:center;
	}
	#footer .logos,
	#footer .hdk{
		width:100%;
		text-align:center;
	}
}

/* bios */

.bio{
	padding:1.875rem 1.25rem;
}
.bio #content{
	max-width:56.25rem;
	margin:0 auto;
}
.bio .withimage{
	overflow:hidden;
}
.bio .bioimg,
.bio .biotext{
	padding-top:3rem;
}
.bio .bioimg{
	float:left;
	width:20rem;
	max-width:50%;
	margin:0 1rem 1rem 0;
}
.bio .bioimg img{
	width:100%;
	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 #fff;
}


/* nav menu narrow */

@media(max-width:920px){
	#toggle{
		position:fixed;
		left:2rem;
		top:0;
		display:block;
		width:8rem;
		height:4.25rem;
		line-height:4.25rem;
		background:url(../img/menu.svg) transparent no-repeat left center / 2rem auto;
	}
	#toggle a{
		display:block;
		width:100%;
		height:100%;
		padding-left:3rem;
	}
	#toggle a span.burgertext{
		text-transform:uppercase;
	}
	#nav ul#menu2{
		position:absolute;
		top:0;
		right:0;
		line-height:4.25rem;
	}
	#nav ul#menu2 li#booknow{
		margin-right:0;
	}
	#wrapper{
		padding-top:4.25rem;
	}
	#nav{
		height:4.25rem;
		transition:height .5s ease-in-out 0s, overflow 1s ease-in-out 0s;
	}
	.toggled-on #nav,
	#nav:target{
		height:100%;
		overflow:auto;
	}
	#menu1,
	#socialnav{
		display:none;
	}
	.toggled-on #navcontent #menu1,
	.toggled-on #navcontent #socialnav,
	#nav:target #navcontent #menu1,
	#nav:target #navcontent #socialnav{
		display:block;
	}
	#nav ul#menu1{
		padding-top:4.125rem;
		margin-left:auto;
		margin-right:auto;
	}
	ul#menu1,
	ul#socialnav{
		width:100%;
		text-align:center;
		margin-left:0;
		margin-right:0;
		margin-bottom:1rem;
	}
	#nav ul#menu1 li{
		display:block;
		width:100%;
		margin-left:0;
		margin-right:0;
	}
	#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:710px){
	ul.castlist{
		margin-left:max(-1rem,-2.2vw);
		margin-right:max(-1rem,-2.2vw);
	}
	ul.castlist li{
		width:50%;
		padding:min(1rem,2.2vw);
	}
}
@media(max-width:520px){
	h1,h2{
		font-size:3rem;
		font-size:clamp(1rem,10vw,3rem);
	}
	h2 br{
		display:none; /* to make agatha go on the same line as about */
	}
	h3,h4,h2 span{
		font-size:1.375rem;
	}
	h5,h6,
	p,ul,ol,blockquote,
	input,textarea,select,option{
		font-size:1.125rem;
	}
	.bio p{
		font-size:1rem;
	}
	#theshow .intro p{
		font-size:1.4rem;
	}
	#theshow .showinfo p{
		font-size:.875rem;
	}
	#footer h3,
	#footer p,
	#footer ul{
		font-size:.875rem;
	}
}

@media(max-width:320px){
	.bio h1{
		font-size:1.5rem;
	}
	.bio h2{
		font-size:1.25rem;
	}
	.bio p{
		font-size:.9375rem;
	}

}


/* 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;}}