/* colours:

orange (nav bar)	#F8B234
orange (button)		#F8B234
green (grass fade)	#8CAD47
green (button mouseover	#8CAD47
black (gallery bg)	#000
black text		#000
yellow (stars)		#FDF467
dark green (if needed)	#2A5F66


*/

a{
	color:inherit;
}
body,#footer,#footer .outer{
	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:#F8B234;
	color:#000;
}
#nav a{
	transition:all .2s ease-in-out 0s;
}
#nav a:hover,
#nav a:focus,
#nav a:active{
	filter:invert(1);
}
#wrapper{
	/* instead of on #header, so #theshow can go in front of the same background */
	background:url(../img/masthead-jun26-2.jpg) #8CAD47 no-repeat center 4.375rem / 100% auto;
	color:#000;
}
#header,
#theshow{
	background:transparent;
	color:#000;
}
#theshow .intro{
}
hr{
	border-color:black;
}
p.review span.stars{
	color:#FDF467;
}
p.review span.quote{
}
p.review span.byline{
}
#booktickets{
	background:url(../img/tour-background.jpg) #2a5f66 no-repeat center bottom / 100% auto;
	background-attachment:fixed;
	color:#fff;
}
/* other booktickets colours are in the separate tourdates style section */

#gallery{
	background:#000;
	color:#fff;
}
#video,
#castcreatives{
	background:#8CAD47;
	color:#000;
}

body.biobody{
	background:#F8B234;
	color:#000;
}
p.singletourdate .book a{
	background:#F8B234;
	color:#000;
}



/* reset */

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


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

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

body{
	font-family:'Poppins',sans-serif;
	font-size:100%;
	letter-spacing:.005em;
	line-height:1;
}
a{
	text-decoration:none;
}
a:focus,
a:hover,
a:active{
	opacity:.8;
}
#theshow a,
#castcreatives .cclist a,
ul.castlinks li a span.name,
#footer .fname a{
	text-decoration:underline;
	text-underline-offset:.3em;
}
#theshow a:focus,
#theshow a:hover,
#theshow a:active,
#castcreatives .cclist a:focus,
#castcreatives .cclist a:hover,
#castcreatives .cclist a:active,
ul.castlinks li a span.name:focus,
ul.castlinks li a span.name:hover,
ul.castlinks li a span.name:active,
#footer .fname a:focus,
#footer .fname a:hover,
#footer .fname a:active{
	text-decoration:none;
}

h1,h2{
	font-size:2rem;
	font-weight:600;
	line-height:1.2;
	text-align:center;
	margin-bottom:1.4em;
}
h3,h4{
	font-size:1.5rem;
	font-weight:600;
	line-height:1.35;
	margin-bottom:1.35em;
}
h5,h6,
p,ul,ol,blockquote,
input,textarea,select,option{
	font-size:1.125rem;
	font-weight:500;
	line-height:1.6;
	margin-bottom:.8em;
}
#castcreatives h2{
	text-align:left;
}
#nav ul{
	font-size:1.25rem;
	font-weight:700;
	text-transform:uppercase;
	line-height:3.5;
}
.content .intro p{
	font-size:1.375rem;
}
.content .intro p.pretitle{
	font-size:1rem;
	text-align:center;
}
.content .intro h2{
	font-size:1.875rem;
	max-width:47rem;
	margin-left:auto;
	margin-right:auto;
}
.content .intro p.smalltext{
	font-size:1.125rem;
	text-align:center;
}
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;
}
p.review{
	font-size:1.75rem; /* Oswald */
	font-weight:600;
	line-height:1.3;
}
p.review span.quote{
	margin-bottom:1em;
}
p.review span.byline{
	font-size:1rem;
	margin-bottom:1em;
}
p.review span.stars{
	font-size:5.5rem;
	line-height:1;
	margin-bottom:.3em;
}
#booktickets p.singletourdate{
	font-size:1.5rem;
	font-weight:600;
	line-height:1.35;
	margin-bottom:1.35em;
}
#booktickets p.singletourdate .book a{
	font-weight:700;
	text-transform:uppercase;
}
.tourdates{
	font-size:1.125rem;
	line-height:1.4;
	margin-bottom:3.3em;
}
.tourdates span.city{
	font-weight:500;
	text-transform:uppercase;
}
.tourdates .book a{
	font-weight:700;
	text-transform:uppercase;
}
.tourdates span.onsalesoon{
	font-size:0.9375rem;
	font-weight:500;
	text-transform:uppercase;
}
.bx-wrapper .bx-caption{
	font-size:1.0625rem;
	text-align:center;
}
#gallery p.gallerycredit{
	font-size:1.0625rem;
	text-align:center;
	padding-top:2.5rem;
}
#booktickets p{
	font-size:.75rem;
	line-height:1.4;
	text-align:center;
	margin-bottom:.7em;
}
#booktickets p{
	font-size:.875rem;
}
#castcreatives ul{
	font-size:1rem;
	line-height:1.7;
}
#castcreatives ul li{
	margin-bottom:.85em;
}
ul.cclist li .name,
ul.castlinks li .name{
	font-weight:600;
	text-transform:uppercase;
}
#footer h3,
#footer p,
#footer ul{
	font-size:.75rem;
	margin-bottom:0;
}
#footer h3{
	font-weight:400;
	text-transform:uppercase;
}

.bio h1{
	font-size:2.75rem;
	font-weight:600;
	text-align:left;
	margin-bottom:.4em;
}
.bio h2{
	font-size:1.875rem;
	font-weight:500;
	text-align:left;
	margin-bottom:.9em;
}
.bio p{
	font-size:1.375rem;
}


/* 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{
	display:block;
	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 2.1875rem 2rem;
	margin-top:-25px;
	margin-top:-1.5625rem;
}
#header .outer{
	margin-top:0;
}
/*
#theshow .outer{
	padding-top:0;
}
*/
#theshow{
	margin-top:-5.125rem;
}
.inner{
	max-width:78.75rem;
	margin:0 auto;
}
.limited{
	max-width:64rem;
	margin:0 auto;
}
.ww{
	margin-left:-30px;
	margin-right:-30px;
}
@media(max-width:1380px){
	.ww{
		margin-left:auto;
		margin-right:auto;
	}
}

#wrapper{
	padding-top:3.125rem;
}
#nav{
	height:4.375rem;
	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;
}
#nav ul.menu li{
	display:inline-block;
}
#nav ul.menu li a{
	display:inline-block;
	padding:0 0.625rem;
}
#nav ul.menu li a img{
	vertical-align:middle;
}
#nav ul#menu1 li a img{
	margin-top:-.5em;
}
#nav ul#menu2 li a img{
	margin-top:-.2em;
}
#nav ul#menu1{
	margin-left:-0.625rem;
}
#nav ul#menu2 li a{
	padding:0 .2rem;
	/* padding:0 1.25rem; */ 
	/* only when this is used for a book now button */
}
#socialnav{
	position:fixed;
	top:20%;
	right:calc(((100% - 69.375rem) / 2) - 4rem);
	transition:right .5s ease-in-out 0s;
}
#socialnav li{
	width:2.625rem;
	margin-bottom:1rem;
}
#socialnav li a,
#socialnav li a img{
	display:block;
}
#header{
	height:0;
	padding-top:calc(55% + 4.375rem); /* needs to start below the fixed nav bar */
	text-align:center;
}
#header #content{
	position:absolute; 
	top:0;
	left:0;
	width:100%;
}
#theshow .content{
	max-width:53.75rem;
	margin:0 auto;
}

.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:middle;
}
.review span{
	display:block;
}

#booktickets p.singletourdate .book a{
	display:inline-block;
	padding:.5rem 1rem;
	margin-top:1rem;
}


#gallery{
	padding-bottom:2.5rem;
}
.videowrapper{
	max-width:82.5rem;
	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%;
	border-width:0;
}

.twocols{
	display:flex;
	justify-content:space-between;
}
.cast,
.creatives{
	width:47.14%;
	margin-bottom:5rem;
}
#castcreatives ul{
	list-style:none;
}
ul.cclist li{
	margin-bottom:1em;
}
ul.cclist li span{
	display:block;
}
ul.cclist li .name{
}
ul.cclist li .role{
}
ul.castlinks{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin-left:-1rem;
	margin-right:-1rem;
}
ul.castlinks li{
	width:25%;
	padding:1rem;
}
ul.castlinks li span{
	display:block;
}

#footer .fcols{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
}
#footer .fcol{
	width:9.6875rem;
	margin-right:45px;
	margin-right:2.8125rem;
	margin-bottom:2.8125rem;
}
#footer .fcol1,
p.fierylight{
	width:9.375rem;
}
#footer .fcol4{
	width:6.5rem;
	flex-grow:2;
	text-align:right;
	margin-right:0;
}


/* bios */

body.biobody{
	max-width:920px;
	/* to get fancybox to not show a much wider box for it */
}
.fancybox-slide--iframe .fancybox-content{
	max-width:calc(100% - 30px) !important;
	/* overriding the fancybox 100% - 100px max width */
}
.bio{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:flex-start;
	padding:6.5%;
}
.bio .bioimg{
	width:255px;
}
.bio .biotext.hasimage{
	width:calc(93.5% - 255px);
	/* 6.5% for space between image and text */
}



/* nav menu narrow */

@media(max-width:920px){
	#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;
	}
	#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#menu1{
		padding-top:4.125rem;
		margin-left:auto;
	}
	#nav ul#menu2{
		padding-bottom:2rem;
	}
	ul.menu{
		width:100%;
		text-align:center;
		margin-bottom:1rem;
	}
	ul#menu1 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:1300px){
	#socialnav{
		right:0.625rem;
	}
}
@media(max-width:1220px){
	.scrolled #socialnav{
		right:-10rem;
	}
}
@media(max-width:1100px){
	#socialnav{
		top:3.75rem;
	}
}
@media(max-width:1023px){
	#nav{
		height:3.9375rem;
	}
	#nav ul{
		font-size:1.125rem;
	}
	#wrapper{
		background-position:center 3.9375rem;
	}

}
@media(max-width:767px){
	h1,h2{
		font-size:1.8rem;
	}
	h2 img{
		max-height:min(36px,6.13vw);
	}
	#booktickets h2 img{
		height:auto;
		max-height:min(86px,14.6vw); /* because it has 2 lines */
	}
	#booktickets p.singletourdate,
	h3,h4{
		font-size:1.4rem;
	}
	.content .intro p{
		font-size:1.125rem;
	}
	.content .intro p.pretitle{
		font-size:1rem;
	}
	.content .intro h2{
		font-size:1.8rem;
	}
	.content .intro p.smalltext{
		font-size:1rem;
	}
	h5,h6,
	p,ul,ol,blockquote,
	input,textarea,select,option{
		font-size:1.1rem;
	}
	p.review{
		font-size:1.6rem;
	}
	p.review span.stars{
		font-size:4.5rem;
	}
	p.review span.byline{
		font-size:.9rem;
	}
	.bio h1{
		font-size:2.75rem;
	}
	.bio h2{
		font-size:1.7rem;
	}
	.bio p{
		font-size:1.25rem;
	}
}
@media(max-width:710px){
	ul.castlinks li{
		width:50%;
	}
}
@media(max-width:620px){
	.twocols{
		display:block;
	}
	.cast,
	.creatives{
		width:100%;
	}
}
@media(max-width:570px){
	h1,h2{
		font-size:1.6rem;
	}
	#booktickets p.singletourdate,
	h3,h4{
		font-size:1.3rem;
	}
	.content .intro p{
		font-size:1.1rem;
	}
	.content .intro p.pretitle{
		font-size:.9rem;
	}
	.content .intro h2{
		font-size:1.6rem;
	}
	.content .intro p.smalltext{
		font-size:.9rem;
	}
	h5,h6,
	p,ul,ol,blockquote,
	input,textarea,select,option{
		font-size:1rem;
	}
	p.review{
		font-size:1.4rem;
	}
	p.review span.stars{
		font-size:3.5rem;
	}
	p.review span.byline{
		font-size:.8rem;
	}
	.bio h1{
		font-size:2.25rem;
	}
	.bio h2{
		font-size:1.25rem;
	}
	.bio p{
		font-size:1rem;
	}
}
@media(max-width:460px){
	#castcreatives h2,
	ul.cclist li .name,
	ul.cclist li .role{
		width:100%;
		text-align:center;
	}
	ul.cclist li{
		margin-bottom:1em;
	}
	ul.castlinks li{
		width:100%;
	}
}
@media(max-width:440px){
	h1,h2{
		font-size:1.5rem;
	}
	#booktickets p.singletourdate,
	h3,h4{
		font-size:1.2rem;
	}
	.content .intro p{
		font-size:1rem;
	}
	.content .intro p.pretitle{
		font-size:.8rem;
	}
	.content .intro h2{
		font-size:1.5rem;
	}
	.content .intro p.smalltext{
		font-size:.8rem;
	}
	p.review{
		font-size:1.3rem;
	}
	p.review span.stars{
		font-size:3rem;
	}
	.bio h1{
		font-size:2rem;
	}
	.bio h2{
		font-size:1.5rem;
	}
	.bio p{
		font-size:.9rem;
	}
}
@media(max-width:400px){
	#footer .fcol1,
	p.fierylight{
		width:6rem;
	}
	#footer .fcol4 img{
		width:4rem;
	}
}

/* header image sizes */

@media(max-width:600px){
	#wrapper{
		background-image:url(../img/masthead-580-jun26-2.jpg);
	}
	#header{
		padding-top:calc(166% + 4.375rem); /* needs to start below the fixed nav bar */;
		padding-top:calc(132% + 4.375rem); /* new image size */
	}
}

/* height related styles */

@media(max-height:520px){
	#nav ul{
		line-height:3rem;
	}
}
@media(max-height:450px){
	#nav ul{
		line-height:2.5rem;
	}
	#nav ul#menu1{
		padding-top:2rem;
	}
	#nav ul#menu2{
		padding-bottom:.5rem;
	}
}
@media(max-height:360px){
}



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