/* colours:

blue fade: #374EC0 to #0A1645 (RGB(55, 78, 192) to RGB(10, 22, 69))
darkblue:	#070E34
green:		#86C86B
orange:		#FFAA3C
grey-ish border on tourdates:#CCCADF
purple bg on tourdates: #6E34B8 at 75% opacity = rgb(110,52,184,.75)

*/

body{
	font-family:'Roboto',Arial,sans-serif;
	font-size:110%;
	font-weight:500;
	line-height:1;
	background:#000000;
	color:black;
}
a{
	text-underline-offset:.2em;
}
strong{
	font-weight:900;
}
#nav{
	background:transparent;
}
#nav .inside{
	background:#070E34;
	background:linear-gradient(to bottom, #374ec0, #0a1645);
	color:#FFAA3C;
	border-color:white;
}
#nav a{
	color:inherit;
}
#nav a:hover,
#nav a:focus,
#nav a:active{
	color:white;
}
#header{
	height:0;
	padding-top:52%;
	padding-top:65%;
	padding-top:56.25%;
	background:url(../img/masthead-new-2.jpg) #070E34 no-repeat center top / auto 100%;
	border-bottom:4px solid white;
	color:white;
}
#strip .inside{
	color:black;
	border-color:white;
	overflow:hidden;
}
#strip .inside ul li{
	width:100%;
	line-height:1.6;
	padding:1.2em 0;
	background:#FFAA3C;
	box-sizing:border-box;
}
.bxslider{
	background:#ffaa3c;
}
.bxslider li{
	list-style:none;
	width:100%;
	min-height:100%;
}
.section h2{
	border-color:white;
}
#theshow h3{
/*	color:#86C86B; */
/* 	font-weight:900; */
	font-weight:400;
}
#theshow{
	background:url(../img/show-bg-tall.jpg) #070E34 no-repeat center center / cover;
	color:white;
}
#booktickets{
	background:#07050E;
	background-image:url(../img/booktickets-bg.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	background-attachment:fixed;
	color:white;
}
#castcreatives{
	background:#1a0723;
	color:#ffaa3c;
}
#castcreatives a{
	color:inherit;
}

#castcreatives a:hover,
#castcreatives a:focus,
#castcreatives a:active{
	color:#FFF;
}
#gallery{
	background:url(../img/gallery-bg.jpg) #000000 no-repeat center / 100% auto;
	color:white;
}
#reviews{
	background:#FFAA3C;
	color:black;
}
#footer{
	background:black;
	color:white;
}



#booktickets h2{
	background:black;
	color:#FFAA3C;
}
#booktickets span.book a,
.button a{
	background:#ffaa3c;
	color:black;
}
#booktickets span.book a:hover,
#booktickets span.book a:focus,
#booktickets span.book a:active,
.button a:focus,
.button a:hover,
.button a:active{
	background:#FFF;
}

#castcreatives h2{
	color:white;
}
#castcreatives ul li a:focus,
#castcreatives ul li a:hover,
#castcreatives ul li a:active{
}

#footer a{
	color:white;
	text-decoration:none;
}
body.bio{
	background:#1a0723;
	color:#FFF;
}
body.bio h1,
body.bio h2{
	color:#ffaa3c;
}



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

#nav ul{
	font-size:22px; /* says PSD */
	font-size:20px; /* says result */
	font-size:16px; /* after resizing */
	font-weight:900;
	letter-spacing:.06em;
	text-transform:uppercase;
	line-height:24px;
}
h2{
	font-size:44px; /* says PSD */
	font-size:28px; /* says result */
	font-size:22px; /* after resizing */
	font-weight:900;
	letter-spacing:.06em;
	text-transform:uppercase;
	text-align:center;
	line-height:1.2;
	margin-bottom:2.5em;
}
h3{
	font-size:27px;
	font-weight:900;
	line-height:1.5;
	padding-top:1.3em;
	margin-bottom:0.8em;
}
p,ul{
	font-size:20px;
	line-height:1.8;
	margin-bottom:.4em;
}
p.intro{
	font-size:22px;
	margin-bottom:2em;
}
p.small,
p small{
	font-size:11px !important;
	line-height:1.6;
	padding-top:.8em;
}
#booktickets ul{
	font-size:18px;
	line-height:1.4;
}
#booktickets span.book a,
#booktickets span.book span,
.button a{
	font-size:16px;
	font-weight:900;
	text-align:center;
}
#booktickets p{
	font-size:13px;
	text-align:center;
}
.bio h1{
	font-size:2rem;
	font-weight:700;
	text-align:center;
	text-transform:uppercase;
	margin-bottom:0;
}
.bio h2{
	font-size:1.75rem;
	text-transform:none;
	margin-bottom:0;
}

.stars{
	font-size:30px;
	line-height:27px; /* 1.5 x 18px font-size on quote */
	position:relative;
	top:5px; /* to make it look vertically centered compared to the baseline text */
	margin-top:-10px;
	margin-right:8px;
}
.review{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:baseline;
	font-size:22px;
	font-weight:900;
	line-height:1.5;
	text-align:center;
	margin-bottom:0;
}
.review span{
	text-transform:uppercase;
	font-weight:900;
	padding:0 5px;
}
.review .quote{
	font-size:18px;
	letter-spacing:.15em;
}
.review .byline{
	font-size:12px; /* PSD has it smaller, but browsers do have minimum font-sizes, so need to have space for 10px at least */
	letter-spacing:.15em;
}
ul.cc{
	/* font-size:14px; */
	line-height:1.3;
	margin-bottom:1.5em;
}
ul.cc li{
	margin-bottom:.6em;
}
.creatives ul li span.role{
	/* font-size:12px; */
}
ul.cc li .name{
	text-transform:uppercase;
}
ul.cc li .name .nocaps{
	display:inline-block;
	text-transform:none;
}
#footer{
	padding:65px 0 150px 0;
}
#footer .inner{
	overflow:hidden;
}
#footer .copyright{
	padding-top:5px;
	margin-right:20px;
	margin-bottom:20px;
}
#footer .hdk{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	justify-content:space-between;
	align-items:center;
	padding-top:23px;
}
#footer .hdk a{
	margin-bottom:20px;
}
#footer .hdk a:first-child{
	margin-right:16px;
}
#footer .hdk a:nth-child(2){
	margin-right:auto; /* causes the logo to go to the left where we want it */
}
#footer .hdk a,
#footer .hdk a img{
	display:inline-block;
	vertical-align:middle;
}
#footer p{
	font-size:11px;
}

/* bios */

.bio{
	padding:1.875rem 1.25rem;
}
.bio #content{
	max-width:56.25rem;
	margin:0 auto;
}
.bio #content.withimage{
	overflow:hidden;
}
.bio .imagebox{
	float:left;
	width:15rem;
	max-width:50%;
	margin:0 1rem 1rem 0;
	position:relative;
  	top:8px;
}
.bio .imagebox .imgcredit{
	font-size:.75rem;
	text-align:center;
	padding-top:.25em;
}
.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;
}


/* Raf's attempt at Gallery */
#gallery p,
#gallery ul{
	text-align:center;
}
#gallery ul{
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin-left:-14px;
	margin-right:-14px;
}
#gallery ul li{
	width:33.3%;
	box-sizing:border-box;
	padding:14px;
}
#gallery ul li a{
	display:block;
	background:#080650;
	background:#fff;
	border:2px solid #fff;
}
#gallery ul li a img{
	display:block;
}
#gallery ul li a:focus img,
#gallery ul li a:hover img,
#gallery ul li a:active img{
	opacity:0.5;
}
/* END Raf's attempt at Gallery */


#wrapper{
	padding-top: calc(3.6% + 24px + 3px);
}
@media(max-width:900px){
	#wrapper{
		padding-top: calc(3.6% + 18px + 3px);
	}
}
#nav{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	z-index:50;
	/* padding-top:48px; */
	background:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0));
}
#nav .inside{
	padding:1.8% 25px;
/*
	border-radius:24px;
*/
	border-width:0 0 3px 0;
	border-style:solid;
	overflow:hidden;
	position:relative;
}
#nav .inner{
	max-width:100%;
	padding:0;
}
#strip .inside{
	border-radius:24px;
	border-width:3px;
	border-style:solid;
	background:white;
	overflow:hidden;
}
#strip .inside ul.bxslider{
	border-radius:22px;
	overflow:hidden;
}
#strip .inside ul li{
	border-radius:22px;
}
#toggle{
	display:none;
}
ul#menu1{
	float:left;
	margin-bottom:0;
	margin-right:0;
}
ul#menu2{
	float:right;
	margin-bottom:0;
}
#nav ul li{
	list-style:none;
	display:inline-block;
}
#nav #menu1 li{
	margin-right:10px;
}
#nav ul li a img{
	vertical-align:top;
	width:24px;
}
#nav a{
	display:block;
	text-decoration:none;
	padding:0 7px;
}
#nav #menu2 a{
	padding:0;
}
#nav a:hover img{
	opacity:.7;
}

/* overlap system from bottom up */
.section{
	position:relative;
	border-bottom:3px solid white;
	margin-bottom:-100px;
	margin-bottom:-65px;
}
.section.last{
	border-bottom-width:0;
	margin-bottom:0;
}
#header{
	margin-bottom:-50px;
}
#strip{
	border-top-width:0;
	border-bottom-width:0;
}
#reviews{z-index:1;}
#castcreatives{z-index:2;}
#gallery{z-index:3;}
#booktickets{z-index:4;}
#theshow{z-index:5;}
#strip{z-index:8;}
#header{z-index:7;}
.outer{
	padding:180px 0 35px 0;
	padding:120px 0 35px 0;
	margin-top:0;
}
#header .outer{
	padding-top:0;
	padding-bottom:0;
}
#theshow .outer{
	margin-top:0; 
}
#strip .outer{
	display:flex;
	align-items:center;
	width:100%;
	height:136px;
	padding-top:0;
	padding-bottom:0;
	margin-top:-70px;
	margin-bottom:-70px;
}
#strip .inner{
	width:100%;
}
.inner{
	max-width:994px;
	padding:0 30px;
	margin:0 auto;
}
#header .inner{
	max-width:1108px;
	padding:0 0;
	position:relative;
}

.headerwide{
	display:none;
}
.headernarrow{
	display:none;
}
#wrapper h2{ /* to exclude bio popups */
	padding:.7em;
	border-width:3px;
	border-style:solid;
	border-radius:24px;
}
.button a{
	display:inline-block;
	width:100%;
	max-width:150px;
	text-decoration:none;
	box-sizing:border-box;
	padding:10px 5px;
	border-radius:20px;
}
.videowrapper{
	/* max-width:632px; */
	max-width:100%;
	border:3px solid white;
	margin:0 auto 40px auto;
}
.videobox{
	position:relative;
	width:100%;
	height:0;
	padding-top:56.25%;
}
.videobox iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#theshow .inner{
	overflow:hidden;
}
#theshow .content{
	max-width:1110px;
	text-align:center;
	margin:0 auto;
}
#trailer .videowrapper{
	margin-bottom:60px;
}
.bxslider{
	height:100%;
	margin-bottom:0;
}
.bxslider li{
	list-style:none;
}
ul.bxslider li p{
	width:1380px; /* needed for horizontal centering of shorter quotes */
	max-width:100%;
}
.section h2,
#booktickets h3,
#booktickets ul{
	box-sizing:border-box;
	max-width:924px;
	margin-left:auto;
	margin-right:auto;
}
#booktickets ul{
	list-style:none;
	margin-bottom:2.5em;
}
#booktickets ul li{
	display:flex;
	justify-content:space-between;
	align-items:center;
	width:100%;
	box-sizing:border-box;
	padding:12px 30px;
	background:rgb(110,52,184,.75);
	border:1px solid #CCCADF;
	border-radius:24px;
	margin-bottom:22px;
}
#booktickets ul li span{
	width:calc((100% - 120px) / 3);
	box-sizing:border-box;
	padding-right:10px;
}
#booktickets ul li span span{
	display:block;
	width:auto;
}
#booktickets span.date{
	align-self:baseline;
}
#booktickets span.venue{
}
#booktickets span.phonebox{
	padding-left:50px;
	background:url(../img/phone.png) transparent no-repeat left center / 40px auto;
}
#booktickets span.phonebox.empty{
	background:transparent;
}
#booktickets span.phonebox.empty span{
	display:none;
}
#booktickets span.book{
	width:130px;
	max-width:130px;
	text-align:right;
	vertical-align:middle;
	padding-right:0 !important;
}
#booktickets span.city{
	padding-right:10px;
}
#booktickets span.book a,
#booktickets span.book span{
	display:block;
	width:100%;
	text-decoration:none;
	box-sizing:border-box;
	padding:8px 5px;
	border-radius:8px;
}
#booktickets span.book span{
	padding:3px 4px;
}

.ccflex{
/*	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
*/
}
.cast,
.creatives{
/*	width:calc(50% - 2em); */
	text-align:center;
}
ul.cc{
	list-style:none;
}
.cast ul.cc{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin-bottom:0;
}
.cast ul.cc li{
	box-sizing:border-box;
	width:33.33%;
	padding:0 1rem;
	margin-bottom:2rem;
}
ul.cc li strong{
}
ul.cc li strong,
ul.cc li span{
	display:block;
}



#footer{
	padding-top:30px;
	padding-bottom:100px;
}
#footer h3{
	margin-bottom:90px;
}
#footer h3 a{
	padding:0 14px;
}

@media(max-width:1417px){
	#nav{
		/* padding-top:3.4%; */
	}
}
@media(max-width:1300px){
}
@media(max-width:1050px){
	.inner{
		padding:0 20px;
	}
	h2{
		font-size:22px;
	}
}
@media(max-width:1000px){
	h2{
		font-size:20px;
	}
	#nav #menu1 li{
		margin-right:0;
	}
}
@media(max-width:990px){
	.cast{
	}
	.creatives{
	}
}

@media(max-width:900px){
/* toggling */
	#toggle{
		float:left;
		display:block;
		height:18px;
		width:40px;
		background:url(../img/menu.png) transparent repeat-x left center / auto 18px;
		padding:0;
		border-width:0;
		cursor:pointer;
	}
	#toggle span{
		position:absolute;
		left:-4000px;
	}
	#menu1{
		display:none;
	}
	#nav{
		/* padding-top:2%; */
	}
	#nav.toggled-on{
		height:auto;
	}
	#nav.toggled-on #menu1{
		display:block;
	}
	#nav #menu1{
		float:none;
		clear:left;
		padding-top:10px;
		padding-bottom:10px;
		margin-left:0;
	}
	#nav #menu2{
		position:absolute;
		right:25px;
		top:0;
		height:100%;
		box-sizing:border-box;
		padding-top:1.2%;
	}
	#nav #menu1 li{
		display:block;
		border-bottom:1px solid white;
		margin:0 -20px;
	}
	#nav #menu1 li a{
		padding:5px 20px;
	}
	#nav #menu2 a{
		padding:0 1px;
	}
}
@media(max-width:860px){
	.review .stars{
		font-size:32px;
	}
	.review .quote{
		font-size:12px;
	}
}
@media(max-width:850px){
	#booktickets ul li{
		display:flex;
		flex-wrap:wrap;
	}
	#booktickets ul li span{
		padding-left:0 !important;
		padding-right:0 !important;
	}
	#booktickets span.date,
	#booktickets span.phonebox,
	#booktickets span.venue,
	#booktickets span.book{
		display:block;
		float:left;
		width:46%;
		max-width:100%;
	}
	#booktickets span.book a,
	#booktickets span.book span{
		max-width:130px;
	}
	#booktickets span.date{
		order:0;
	}
	#booktickets span.venue{
		order:2;
	}
	#booktickets span.phonebox{
		order:1;
		margin-bottom:1em;
		padding-left:50px !important;
	}
	#booktickets span.book{
		order:3;
	}
	#booktickets span.date,
	#booktickets span.venue{
		text-align:right;
	}
	#booktickets span.phonebox,
	#booktickets span.book{
		text-align:left;
	}
}
@media(max-width:750px){
	h2{
		font-size:18px;
	}
	.review .stars{
		font-size:26px;
		margin-right:5px;
		top:2px;
	}
	.review .quote{
		font-size:12px;
	}
}
@media(max-width:700px){
	#strip .inside ul li{
		padding:0;
	}
	#strip .inside ul li p.review{
		box-sizing:border-box;
		padding:.4em 5px .7em 5px;
	}
	.review span{
		display:block;
		width:100%;
		padding:2px 0;
		margin:0 auto;
	}
	.review .stars{
		top:0;
	}
	.review .quote{
		font-size:12px;
	}
}
@media(max-width:660px){
	.cast,
	.creatives{
		width:100%;
		max-width:100%;
	}
}
@media(max-width:650px){
	#booktickets h3,
	#booktickets span.date,
	#booktickets span.venue,
	#booktickets span.venue span,
	#booktickets span.phonebox,
	#booktickets span.book{
		display:block;
		float:none;
		width:100%;
		text-align:center;
		padding:2px 0;
		margin-left:auto;
		margin-right:auto;
	}
	#booktickets span.date,
	#booktickets span.venue,
	#booktickets span.phonebox{
			margin-bottom:10px;
	}
	#booktickets h3{
		margin-bottom:.5em;
	}
	#booktickets ul li{
		display:block; /* to restore the order from flex */
		padding:12px 0 20px 0;
	}
	#booktickets span.phonebox{
		padding-left:0 !important;
		padding-right:0 !important;
		padding-top:40px !important;
		background-position:center top;
	}
	#booktickets span.phonebox.empty{
		padding-top:0 !important;
		margin-bottom:0 !important;
	}
	#booktickets span.book{
		padding-top:10px;
	}
	#booktickets span.book a,
	#booktickets span.bookspan{
		margin-left:auto;
		margin-right:auto;
	}
}
@media(max-width:600px){
	#missedus .sites ul li{
		max-width:42%;
	}
}
@media(max-width:598px){
	#header{
		height:auto;
		padding-top:0;
	}
	.headernarrow{
		display:block;
	}
	.inner{
		padding:0 15px;
	}
}
@media(max-width:520px){
	#nav #menu2{
		padding-top:1%;
	}
	h2{
		font-size:16px;
	}
	.cast ul.cc li{
		width:50%;
	}
}
@media(max-width:400px){
	#nav .inside{
		padding:6px 15px;
	}
	#nav #menu2{
		right:15px;
		padding-top:3px;
	}
	#strip ul li p.review{
		height:5em;
	}
}
@media(max-width:360px){
	.cast ul.cc li{
		width:100%;
	}
}