/* reset */

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


/* colours:

*/

a{
	color:inherit;
}
body,#footer,#footer{
	background:black;
	color:white;
}
/* remove the above colour once the colours per section are set */
.skip-link{
	border-color:black;
	color:black;
	background-color:white;
}
#nav{
	background:#E53F29;
	color:#fff;
}
#nav #menu1 li a img{
	width:1.03125rem;
	width:1.125rem; /* larger than in the design... */
}
#nav a{
	transition:all .2s ease-in-out 0s;
}
#nav ul.menu li a{
	display:inline-block;
	height:2.925rem;
	padding:0 0.625rem;
	border-bottom-width:.25rem;
	border-bottom-style:solid;
}
.menu a{
	border-color:transparent;
}
#menu1 a.active,
#menu1 a:hover,
#menu1 a:focus,
#menu1 a:active{
	border-color:#fff;
}
#nav .socialnav li a:focus,
#nav .socialnav li a:hover,
#nav .socialnav li a:active{
	filter:brightness(0);
}
#header{
	background:url(../img/poster-1920-4.jpg) black no-repeat center / cover;
	padding-top:41rem;
}
@media(max-width:820px){
	#header{
		padding-top:80%;
	}
}
@media(max-width:620px){
	#header{
		background:url(../img/poster-860-4.jpg) red no-repeat center / cover;
		padding-top:166%;
	}
}
@media(min-width:1180px){
	#header{
		padding-top:56.25%;
	}
}
#header:after{
	content:"";
	display:block;
	position:absolute;
	top:calc(100% + 3px);
	left:0;
	width:100%;
	height:3rem;
	/* background:linear-gradient(#A52514 0%,#EB4F3B 100%); */
}
.section{
	border-bottom:3px solid #fff;
}
#castcreatives{
	border-bottom-width:0;
}
#theshow{
	background:white;
	color:#1A1A1A;
}
#theshow .intro{
}
hr{
	background:url(../img/divider.svg) transparent no-repeat center / contain;
}
h2{
	padding-bottom:.8em;
	background:url(../img/divider.svg) transparent no-repeat center bottom / auto .75rem;
}
p.review span.stars,
p.review span.quote{
}
p.review span.byline{
}
#booktickets,
#education{
	background:url(../img/tour-background.jpg) #039893 no-repeat center / cover;
	background-attachment:fixed;
	color:#1A1A1A;
}
.book:after{
	content:" ";
	display:inline-block;
	width:1.5rem;
	width:1.2em;
	height:1.25rem;
	height:1em;
	vertical-align:middle;
	background:url(../img/arrow.svg) transparent no-repeat center right / contain;
	margin-left:.75em;
	transition:transform .2s ease-in-out 0s;
}
a:hover .book:after{
	transform:translateX(.5em);
}
.tourdates li a{
	border-color:#fff;
}
.tourdates li a:focus,
.tourdates li a:hover,
.tourdates li a:active{
	background:#fff;
	border-color:#EB4F3B;
}
#photogallery{
	background:#302E3F;
	color:#fff;
}
#photogallery h2{
	background-image:url(../img/divider-1.svg);
	color:#58EDE7;
}
ul.gallerythumbs li a{
	border-color:#fff;
}
.button a{
	background:#fff;
	color:#1A1A1A;
	border-color:#EB4F3B;
}
.button a:focus,
.button a:hover,
.button a:active{
	background:#EB4F3B;
	color:#fff;
}

#castcreatives{
	background:#ffffff;
	color:#1A1A1A;
}
#castcreatives h2{
	color:#EB4F3B;
	background:url(../img/divider-red.svg) transparent no-repeat center bottom / auto .75rem;
}
body.bio{
	background:#302E3F;
}
body.bio h2{
	background-image:url(../img/divider-1.svg);
}




/* fonts:
Poppins - everyting (medium and bold)
Antonio - some things (regular and bold)
*/

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

strong{
	font-weight:700;
}
body{
	font-family:'Poppins',sans-serif;
	font-size:100%;
	line-height:1;
}
#navcontent,
h1,h2,
.winner{
	font-family:'Antonio',sans-serif;
}
a{
	text-underline-offset:.2em;
}
a:focus,
a:hover,
a:active{
	text-decoration:none;
}
#nav a,
.button a{
	text-decoration:none;
}
.tourdates a{
	text-decoration:none;
}
.tourdates a .book{
	text-decoration:underline;
	text-decoration-thickness:3px;
}

h1,h2{
	font-size:3.625rem;
	font-weight:700;
	text-transform:uppercase;
	line-height:1.2;
	text-align:center;
	margin-bottom:.9em;
}
h3{
	font-size:3.625rem;
	font-weight:700;
	line-height:1.2;
	text-align:center;
	margin-bottom:.9em;
}
#castcreatives h2{
	font-size:3rem;
}
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.25rem;
/*
	line-height:1.35;
	margin-bottom:1.35em;
*/
	line-height:1.7;
	margin-bottom:1.7em;
}
#nav ul{
	font-size:1.125rem;
	font-weight:700;
	text-transform:uppercase;
	line-height:1.78;
}
p.pretitle{
	font-size:1rem;
	font-style:italic;
	margin-bottom:0;
}
#theshow h1{
	font-size:3rem;
	margin-bottom:.2em;
}
.intro p{
	font-size:1.5rem;
	font-weight:500;
	line-height:1.42;
	margin-bottom:1.5em;
}
p.small{
	font-size:1rem;
}
.content p.small{
	margin-top:-.4em;
}
.winner p{
	font-size:1.5rem;
	line-height:1.5;
	margin-bottom:.2em;
}
hr{
	font-size:1.25rem;
	/* font-size to get margin-bottom to be relative to paragraphs */
	height:.75rem;
	border-width:0;
	margin-bottom:1.25em;
}
p.review{
	font-size:2.375rem;
	font-weight:700;
	line-height:1.25;
}
p.review span.quote{
	margin-bottom:.75em;
}
p.review span.byline{
	font-size:1rem;
	margin-bottom:1em;
}
p.review span.stars{
	font-size:5rem;
	line-height:1;
	margin-bottom:.25em;
}
.tourdates{
	font-size:1.125rem;
	font-weight:700;
	line-height:1.4;
	margin-bottom:3.3em;
}
.tourdates span.city{
	text-transform:uppercase;
}
.tourdates span.boxoffice{
	font-weight:500;
}
.tourdates .book,
.tourdates .onsalesoon{
	font-size:1.25rem;
	font-weight:700;
	text-transform:uppercase;
}
#photogallery p{
	text-align:center;
}
#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:500;
}
#footer h3,
#footer p,
#footer ul{
	font-size:.75rem;
	margin-bottom:0;
}
#footer h3{
	font-weight:400;
	text-transform:uppercase;
}

.bio h1{
	text-transform:uppercase;
	margin-bottom:0;
}
.bio h2{
	font-size:2rem;
	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;}
#photogallery{z-index:3;}
#booktickets{z-index:4;}
#theshow{z-index:5;}
#header{z-index:6;}
#nav{z-index:90000;}

#nav{
	padding:0 2rem;
}
.outer{
	padding:5.125rem 2rem 2.1875rem 2rem;
	margin-top:-25px;
	margin-top:-1.5625rem;
}
#header .outer{
	margin-top:0;
}
.inner{
	max-width:64rem;
	margin:0 auto;
}
#nav .inner{
	max-width:80rem;
}

#wrapper{
	padding-top:3.625rem;
}
#nav{
	height:3.625rem;
	position:fixed;
	left:0;
	top:0;
	width:100%;
}
#toggle{
	display:none;
}
#navcontent{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding-top:.7rem;
}
#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{
	margin-left:-0.625rem;
}
#nav ul#menu2 li a img{
	width:2rem;
	vertical-align:middle;
}
#header{
	height:0;
	/* padding-top is in the colour section */
	text-align:center;
}
#header #content{
	position:absolute; 
	top:0;
	left:0;
	width:100%;
}
#theshow .content{
	max-width:63rem;
	text-align:center;
	padding-bottom:2rem;
	margin:0 auto;
}
.winner{
	width:fit-content;
	text-align:center;
	border-width:1px;
	border-style:solid;
	padding:1.5rem 4.9rem;
	margin:2.5rem auto 2.5rem auto;
}
.videowrapper{
	max-width:56.25rem;
	margin:0 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%;
	border-width:0;
}
.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:7em; /* this will automatically get higher where needed, but it will vertically center the quotes for most screens */
	text-align:center;
	vertical-align:middle;
}
.review span{
	display:block;
}

.tourdates{
	list-style:none;
}
.tourdates li a{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding:1.125rem;
	border-width:3px;
	border-style:solid;
	margin-bottom:2rem;
	gap:1em;
}
.tourdates li span.date{
	width:22.5%;
	min-width:12em;
}
.tourdates li span.venue{
	width:calc(27% - 1rem);
	max-width:calc(65% - 11em);
}
.tourdates li span.phone{
	width:17.5%;
	min-width:8em;
}
.tourdates li span.book,
.tourdates li span.onsalesoon{
	width:18.5%;
	min-width:8em;
}
.tourdates li span.venue span,
.tourdates li span.phone span{
	display:block;
}
.tourdates li span.book,
.tourdates li span.onsalesoon{
	display:inline-block;
	width:10em;
	max-width:100%; /* of .book */
	min-height:2.75rem;
	line-height:2.75rem;
	text-align:left;
	padding:0 2px;
}
ul.gallerythumbs{
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin-left:-1rem;
	margin-right:-1rem;
}
ul.gallerythumbs li{
	padding:0 1rem 2rem 1rem;
}
ul.gallerythumbs li a{
	display:block;
	border-width:.25rem;
	border-style:solid;
}
ul.gallerythumbs li a img{
	display:block;
	max-height:8.5625rem;
}
#education{
	text-align:center;
}
.button a{
	display:inline-block;
	padding:1rem 2rem;
	border-width:3px;
	border-style:solid;
	border-radius:6px;	
	margin:0 auto 2rem auto;
}
#castcreatives .inner{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.cast,
.creatives{
	width:calc(50% - 1rem);
}
#castcreatives ul{
	list-style:none;
	text-align:center;
}
#castcreatives ul li{
	margin-bottom:1rem;
}
#castcreatives ul li span{
	display:block;
}
#castcreatives ul li a{
	font-weight:700;
}

#footer .fcols{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:1rem;
}
#footer .logos ul li{
	list-style:none;
	display:inline-block;
	margin-right:2rem;
}
#footer img{
	vertical-align:middle;
}

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


/* nav menu narrow */

@media(max-width:767px){
	#toggle{
		display:block;
		width:3rem;
		height:2.125rem;
		background:url(../img/menu.png) transparent no-repeat left center / 2rem auto;
		position:fixed;
		left:2rem;
		top:.5rem;
	}
	.toggled-on #nav #toggle,
	#nav:target #toggle{
		background-image:url(../img/close.png);
	}
	#toggle a{
		display:block;
		width:100%;
		height:100%;
	}
	#nav{
		transition:height .5s ease-in-out 0s, overflow 1s ease-in-out 0s;
	}
	.toggled-on #nav,
	#nav:target{
		height:100%;
		overflow:auto;
	}
	#navcontent{
		display:none;
	}
	.toggled-on #navcontent,
	#nav:target #navcontent{
		display:block;
	}
	#nav ul{
		font-size:1.75rem;
	}
	#nav ul#menu1 li a img{
		width:2rem;
	}
	#nav ul#menu2 li a img{
		width:3rem;
	}
	#nav ul#menu1{
		padding-top:4.125rem;
		margin-left:auto;
	}
	#nav ul#menu2{
		padding-bottom:2rem;
	}
	#nav ul#menu2 li{
		width:auto;
		display:inline-block;
	}
	ul.menu{
		width:100%;
		text-align:center;
		margin-bottom:1rem;
	}
	ul.menu li{
		display:block;
		width:100%;
	}
	#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:767px){
	h1,h2{
		font-size:clamp(2rem, 8vw, 3.625rem);
	}
	#theshow h1{
		font-size:clamp(2rem,7vw,3rem);
	}
	h3,h4{
		font-size:;
	}
	.intro p{
		font-size:clamp(1.2rem,3vw,1.5rem);
	}
	h5,h6,
	p,ul,ol,blockquote,
	input,textarea,select,option{
		font-size:clamp(1rem,2.5vw,1.25rem);
	}
	p.review{
		font-size:clamp(1.25rem,5vw,2.375rem);
	}
	p.review span.stars{
		font-size:clamp(2.36rem,9.4vw,4.5rem);
	}
	p.review span.byline{
		font-size:1rem;
	}
	p.pretitle{
		font-size:clamp(.8rem,4vw,1rem);
	}
	.winner p{
		font-size:clamp(1.125rem,3.7vw,1.5rem);
	}
	.winner{
		padding:2vw 4vw;
	}
}
@media(max-width:590px){
	#footer .fcol1,
	#footer .fcol4{
		width:100%;
	}
}
@media(max-width:460px){
	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%;
	}
}


/* the tour dates styles */

@media(max-width:960px){
	.tourdates li span.date,
	.tourdates li span.venue{
		width:calc(60% - 1em);
		min-width:0;
		max-width:calc(100% - 13rem);
	}
	.tourdates li span.date{
		order:-2;
	}
	.tourdates li span.phone{
		order:-1;
		padding-left:.125em;
		margin-bottom:-1.2em;
	}
	.tourdates li span.book,
	.tourdates li span.onsalesoon{
		margin-top:1.2em;
	}
	.tourdates li span.phone,
	.tourdates li span.book,
	.tourdates li span.onsalesoon{
		width:calc(40% - 1rem) !important;
		min-width:12rem;
		max-width:13rem;
		text-align:left;
	}
	.tourdates li span.phone span,
	.tourdates li span.book,
	.tourdates li span.onsalesoon{
		line-height:revert;
		min-height:0;
	}
}
@media(max-width:520px){
	.tourdates li span.date,
	.tourdates li span.venue,
	.tourdates li span.phone,
	.tourdates li span.book,
	.tourdates li span.onsalesoon{
		width:100%;
		min-width:100%;
		max-width:100%;
		text-align:center;
		order:0;
	}
	.tourdates li span.book,
	.tourdates li span.onsalesoon{
		text-align:center;	
	}

}



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