/* colours:

transparent: book buttons normal state
#980000 - darkest red
#D10F4D - dark red - big book button background on mouseover
#ED1A5D - light red - nav links, big book button background, review quotes/stars, book button outline, book button text on mouseover, title-deco when on blue
#1A87EC - blue - nav links mouseover, title-deco when on nearly white / separator line behind title-deco, tourdates separator lines
#0A76DB - other blue - for intro text
#FFFFFF - white - text on gallery background, text in footer, text on big book button, background book buttons on mousever, borders on gallery thumbs
#EFEFEF - nearly white - separator line behind title-deco, betweeen white sections
#E3E3E3 - light grey - nav bottom border
#C9C9C9 - grey -- only used as video placeholder
#939393 - dark grey - inactive pager bullets
#3A3A3A - darkest grey - text, image borders, gallery background, active pager bullet
#1A1A1A - nearly black - footer background
#000000 - black -- only on single Cast name, accidental?


*/

a{
	color:inherit;
}
body{
	background:#fff;
	color:#3a3a3a;
}
#footer{
	background:#1a1a1a;
	color:#fff;
}
.skip-link{
	border-color:#000;
	color:#000;
	background-color:#fff;
}
#nav{
	background:#fff;
	color:#ED1A5D;
	border-color:#E3E3E3;
}
#nav a{
	transition:color .2s ease-in-out 0s;
}
#nav #menu1 a:after{
	transition:width .2s ease-in-out 0s;
}
#nav a.active,
#nav a:hover,
#nav a:focus,
#nav a:active{
	color:#1A87EC;
}
#nav #booknow a{
	background:#ED1A5D;
	color:#fff;
}
#nav #booknow a:hover,
#nav #booknow a:focus,
#nav #booknow a:active{
	background:#D10F4D;
}
#nav #socialnav li a:focus,
#nav #socialnav li a:hover,
#nav #socialnav li a:active{
	opacity:.7;
}
#nav a:after{
	content:"";
	display:block;
	width:0;
	height:2px;
	background:#1A87EC;
}
#nav #menu1 a.active:after,
#nav #menu1 a:focus:after,
#nav #menu1 a:hover:after,
#nav #menu1 a:active:after{
	width:100%;
}
#header{
	background:url(../img/poster-1920-2.jpg) transparent no-repeat center top / 100% auto;
	height:0;
	padding-top:56.25%;
}

@media(max-width:860px){
	#header{
		background-image:url(../img/poster-860-2.jpg);
		padding-top:133.49%;
	}
}
#theshow{
}
#theshow .intro{
	color:#0A76DB;
}
hr{
	border-color:black;
}
p.review span.stars,
p.review span.quote{
	color:#ED1A5D;
}
p.review span.byline{
}
#booktickets{
	background:url(../img/street-bg.jpg) #fff no-repeat right top / cover;
	background-attachment:fixed;
}
@media(max-width:767px){
	#booktickets{
	}
}
.tourdates,
.tourdates li{
	border-color:#1A87EC;
}
#booktickets p{
}
.book a{
	border-color:#ED1A5D;
}
.book a:focus,
.book a:hover,
.book a:active{
	background-color:#fff;
}
.book .onsalesoon{
	background:transparent;
	color:#000;
	border-color:#000;
}
#gallery{
	background:#3A3A3A;
	color:#fff;
}
#gallery ul li a img{
	border-color:#fff;
}
ul.castlist li img{
	border-color:#3A3A3A;
}
.section:before{
	content:"";
	display:block;
	width:100%;
	height:.5rem;
	background:#1A87EC;
}
#booktickets:before{
	background:#EFEFEF;
}
#header:before,
#theshow:before{
	display:none;
}
h2 img{
	border-color:#ED1A5D;
}
#booktickets h2 img{
	border-color:#1A87EC;
}

body.bio{
	background:#fff;
	color:#3A3A3A;
}
body.bio h1{
	color:#1A87EC;
}
.caption{
	color:#3A3A3A;
}



/* reset */

*{
	box-sizing:border-box;
}
html,body,h1,h2,h3,p,ul,li,blockquote{
	padding:0;
	margin:0;
}
img,iframe{
	max-width:100%;
}


/* fonts:
Libre Franklin - everything (regular, medium and bold) + toggle
Oswald - menu (24px semi-bold) + big book button (20px bold) + review quotes (28px medium + 16px medium) + book buttons (20px bold)
*/

@font-face{
	font-family: 'Libre Franklin';
	src: url(../fonts/LibreFranklin-VariableFont_wght.ttf);
	font-style:normal;
}
@font-face{
	font-family: 'Libre Franklin';
	src: url(../fonts/LibreFranklin-Italic-VariableFont_wght.ttf);
	font-style:italic;
}
@font-face{
	font-family: 'Oswald';
	src: url(../fonts/Oswald-VariableFont_wght.ttf);
}

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

body{
	font-family:'Libre Franklin',sans-serif;
	font-size:100%;
	line-height:1;
}
#toggle{
	font-family:'Libre Franklin',sans-serif;
}
#nav,
.review,
.book,
h1,h2{
	font-family:'Oswald',sans-serif;
}

a{
	text-decoration:underline;
	text-underline-offset:.2em;
}
#nav a,
.showinfo p.button a,
#booktickets .book 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,
#footer .fname a:focus,
#footer .fname a:hover,
#footer .fname a:active{
	text-decoration:none;
}

h1,h2{
	font-size:4.875rem;
	font-size:clamp(3.1rem,6vw,5.7rem);
	/* these sizes correspond with the image sizes, for proper spacing&padding */
	font-weight:500;
	line-height:1;
	text-align:left;
	margin-bottom:.62em; /* corresponds with padding-top on image for proper spacing */
}
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.5rem;
	font-size:clamp(1.1rem,2.2vw,1.5rem);
	font-weight:400;
	line-height:1.42;
	margin-bottom:1.42em;
}
.bio p,
.bio ul{
	font-size:clamp(.9375rem,2vw,1.375rem);
}
#nav ul{
	font-size:1.5rem;
	font-size:clamp(1rem,1.8vw,1.5rem);
	font-weight:500;
	text-transform:uppercase;
	line-height:1.5em;
	margin-bottom:0;
}
#nav ul#menu2{
	font-size:1.25rem;
	font-size:clamp(1rem,1.8vw,1.25rem);
	font-weight:600;
	line-height:5rem;
}
#theshow .intro p{
	font-size:2.125rem;
	font-size:clamp(1.5rem,3.12vw,2.125rem);
	font-weight:600;
	line-height:1.22;
	text-align:center;
	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;
}
p.review{
	font-size:1.75rem;
	font-size:clamp(1.375rem,4.125vw,1.75rem);
	font-weight:500;
	text-transform:uppercase;
	line-height:1.3;
}
p.review span.quote{
	margin-bottom:.75em;
}
p.review span.byline{
	font-size:1rem;
	font-size:clamp(.875rem,2.625vw,1rem);
	font-weight:500;
	margin-bottom:1em;
}
p.review span.stars{
	font-size:5.5rem;
	font-size:clamp(3rem,9vw,5.5rem);
	line-height:1;
	margin-bottom:.3em;
}

.tourdates{
	font-size:1.25rem;
	font-size:clamp(1.125rem,3.375vw,1.25rem);
	line-height:1.4;
	margin-bottom:3.3em;
}
.tourdates span.date{
	font-weight:700;
}
.tourdates span.city{
	font-weight:700;
	text-transform:uppercase;
}
.tourdates span.theatre{
}
.tourdates .book a{
	font-weight:600;
	text-transform:uppercase;
}
.tourdates span.onsalesoon{
	font-size:1.25rem;
	font-size:clamp(1.125rem,3.375vw,1.25rem);
	font-weight:600;
	text-transform:uppercase;
}


#booktickets p,
#gallery p{
	text-align:center;
	margin-bottom:.7em;
}
#gallery p{
	font-size:1rem;
}
#castcreatives ul{
	font-size:1.125rem;
	font-weight:500;
	line-height:1.75;
	text-align:center;
}
ul.creativeslist li .name,
ul.castlist li .name{
	font-weight:700;
}
p.caption{
	font-size:clamp(.6rem,2vw,.875rem);
	padding-top:.5em;
	margin-bottom:0; /* margin comes from image container */
}

#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(1.5rem,8vw,3rem);
	font-weight:500;
	line-height:1;
	margin-bottom:.2em;
}
.bio h2{
	font-size:2rem;
	font-size:clamp(1.25rem,4.125vw,1.625rem);
	font-weight:500;
	text-transform:none;
	margin-bottom:0;
}


/* 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;
	padding-bottom:1px; /* to keep margins inside */
}
#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,.outer{
	padding:0 max(5vw, 1.5rem);
}

.inner{
	max-width:85.25rem;
	margin:0 auto;
}
#nav .inner,
#footer .inner{
	max-width:97rem;
}
#theshow .inner{
	padding-top:5.75vw;
	max-width:64rem;
}
#wrapper{
	padding-top:calc(5rem + 2px);
}
#nav{
	height:calc(5rem + 2px);
	position:fixed;
	left:0;
	top:0;
	width:100%;
	border-width:0 0 1px 0;
	border-style:solid;
}
#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;
}
#nav ul.menu li a{
	display:inline-block;
	padding:0 0.625rem;
}
#nav ul#menu1{
	flex-grow:2;
	margin-left:-0.625rem;
}
#nav ul#menu2 li a{
	padding:0 1.8em;
}
#socialnav{
	margin-right:-0.625rem;
	margin-left:1.3em;
}
#socialnav li{
}
#socialnav li a{
	padding:0 1.25rem;
}
#socialnav li a img{
	height:1.5rem;
}
#header #content{
	position:absolute; 
	top:0;
	left:0;
	width:100%;
}
h2 img{
	border-width:.5rem 0 0 0;
	border-style:solid;
	padding-top:1.5rem;
	margin-top:-.5rem;
}
#booktickets h2 img{
	width:clamp(200px,27.55%,376px);
}
#gallery h2 img{
	width:clamp(132px,19.58%,268px);
}
#castcreatives h2 img{
	width:clamp(249px,37.55%,513px);
}


.videowrapper{
	max-width:100%;
	margin:3.5rem auto 3.5rem auto;
}
.videobox{
	position:relative;
	width:100%;
	height:0;
	padding-top:56.25%;
}
.videobox iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.reviewquotes{
	max-width:56.25rem;
	margin:0 auto;
}
.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;
}


.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;
	margin:2px 0;
}
.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.venue span,
.tourdates li span.phone span{
	display:block;
}
.tourdates .hidden .boxoffice{
	display:none;
}
.book{
	text-align:right;
}
.book a,
.book .onsalesoon{
	display:inline-block;
	width:12rem;
	max-width:100%; /* of .book */
	min-height:2.75rem;
	line-height:1.2;
	text-align:center;
	padding:.75rem 2px;
}
.book a{
	border-width:1px;
	border-style:solid;
}
.book .onsalesoon{
	text-align:right;
	width:auto;
}

@media(max-width:960px){
	.tourdates li span.venue{
		width:27%;
	}
	.tourdates li span.book{
		width:21%;
	}
}
@media(max-width:920px){
	.tourdates{
		font-size:1rem;
	}
	.tourdates .book a,
	.tourdates .book .onsalesoon{
		font-size:1rem;
	}
}
@media(max-width:820px){
	.tourdates{
		font-size:.833rem;
	}
	.tourdates li span.date{
		width:29%;
	}
	.tourdates li span.venue{
		width:28%;
	}
	.tourdates li span.phone{
		width:23%;
	}
	.tourdates li span.book{
		width:20%;
	}


}
@media(max-width:710px){
	.tourdates{
		max-width:29.375rem;
		margin-left:auto;
		margin-right:auto;
	}
	.tourdates li{
		font-size:1.125rem;
	}
	.tourdates li span.date,
	.tourdates li span.venue{
		width:60%;
	}
	.tourdates li span.phone,
	.tourdates li span.book{
		width:40%;
	}
	.tourdates li span.date{order:1;}
	.tourdates li span.venue{order:3;}
	.tourdates li span.phone{order:2;}
	.tourdates li span.book{order:4;}
	.phone{
		text-align:right;
	}
	.tourdates li span.book{
		margin-top:.5em;
	}
}

@media(max-width:480px){
	.tourdates li{
		display:block;
		text-align:center;
		padding:1em 0;
	}
	.tourdates li > span{
		display:block;
		width:100% !important;
		text-align:center;
		margin-bottom:.5em;
	}
	.tourdates li span.venue span,
	.tourdates li span.phone span{
		display:inline-block;
		padding:0 .25em;
	}
	.tourdates li span.phone.hidden{
		display:none;
	}
	.tourdates li span.book{
		margin-top:1em;
		margin-bottom:0;
	}
}




ul.gallery li a,
ul.gallery li img{
	display:block;
}
ul.gallery li a img{
	width:100%;
	border-width:1px;
	border-style:solid;	
}
ul.gallery,
#castcreatives ul{
	list-style:none;
}
ul.creativeslist li .name{
	display:block;
}
ul.creativeslist li .role{
	display:block;
}
ul.gallery,
ul.castlist{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin-left:clamp(-.5rem,-1.3%,-1rem);
	margin-right:clamp(-.5rem,-1.3%,-1rem);
	margin-top:clamp(-.5rem,-1.3%,-1rem);
}
ul.gallery li,
ul.castlist li{
	width:25%;
	max-width:21.8125rem;
	padding:clamp(.5rem,1.3%,1rem);
}
@media(max-width:1240px){
	ul.gallery li,
	ul.castlist li{
		width:33.33%;
	}
}
@media(max-width:820px){
	ul.gallery li,
	ul.castlist li{
		width:50%;
	}
}
ul.castlist li img{
	width:100%;
	padding:clamp(4px,2%,6px);
	border-width:1px;
	border-style:solid;
}
ul.castlist li span{
	display:block;
}
#theshow,
#booktickets,
#gallery{
	padding-bottom:3rem;
}
#castcreatives{
	padding-bottom:2rem;
}
.cast,
.creatives{
	margin-bottom:3.5rem; /* for space between cast and creatives */
}
.creatives ul li{
	margin-bottom:1.45em;
}


#footer{
	padding-top:2rem;
}
#footer .fcols{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#footer .fcol{
	width:calc(100% - 7rem);
	max-width:46rem;
}
#footer p.logos a{
	margin-right:1.5rem;
}
#footer .fcol p{
	margin-bottom:4em;
}
#footer .fcol2{
	width:4.5625rem;
	flex-grow:2;
	text-align:right;
}


/* bios */

.bio{
	padding:1.875rem 1.25rem;
}
.bio #content{
	max-width:65.5625rem;
	margin:0 auto;
}
.bio .bioimg,
.bio .biotext{
	padding-top:clamp(1rem,5vw,3rem);
}
.bio #content.withimage h1,
.bio #content.withimage h2,
.bio #content.withimage .biotext{
	/* margin-left:min(22.75rem,33%); */
	width:clamp(calc(100% - 22.75rem),44rem,100%);
	margin-left:auto;
}
.bio .bioimg{
	float:left;
	width:min(20.125rem,50%);
	margin:0 1.5rem 1.5rem 0;
}
@media(max-width:380px){
	.bio .bioimg{
		float:none;
		width:100%;
		margin:0 auto 1rem auto;
	}
	.bio .biotext{
		padding-top:0;
	}
}
.bio .bioimg img{
	width:100%;
	position:relative;
  	top:8px;
}
.bio a{
	color:inherit;
}
.bio a:focus,
.bio a:hover,
.bio a:active{
	text-decoration:underline dashed #fff;
}


/* nav menu narrow */

@media(max-width:860px){
	#toggle{
		display:block;
		width:auto;
		height:4.25rem;
		font-size:.9375rem;
		font-weight:500;
		line-height:4.25rem;
		background:url(../img/menu.svg) transparent no-repeat left center / auto 1.5rem;
		position:fixed;
		left:max(5vw, 1.5rem);
		top:0;
	}
	#nav:target #toggle,
	.toggled-on #nav #toggle{
		background-image:url(../img/close.svg);
	}
	#toggle a{
		display:block;
		width:100%;
		height:100%;
		padding-left:3rem;
	}
	#toggle a span{
		line-height:1;
	}
	#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;
	}
	#navcontent ul#menu1,
	#navcontent ul#socialnav{
		display:none;
	}
	.toggled-on #navcontent ul#menu1,
	#nav:target #navcontent ul#menu1,
	.toggled-on #navcontent ul#socialnav,
	#nav:target #navcontent ul#socialnav{
		display:block;
		font-size:min(9vw,2.375rem);
	}
	.toggled-on #navcontent ul#menu2,
	#nav:target #navcontent ul#menu2{
		width:100%;
		font-size:min(9vw,2.375rem);
		text-align:center;
		margin-bottom:1rem;
	}
	#nav ul#menu2{
		line-height:4.125rem;
		width:100%;
		text-align:right;
	}
	#nav ul#menu1{
		padding-top:4.125rem;
		margin-left:auto;
	}
	ul#menu1,
	ul#socialnav{
		width:100%;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
		margin-bottom:1rem;
	}
	ul#menu1 li{
		display:block;
		width:100%;
		margin-bottom:.4em;
	}
	#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:590px){
	#footer .fcol1,
	#footer .fcol4{
		width:100%;
	}
}


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