html,body,h1,h2,h3,h4,p,ul,li{
	padding:0;
	margin:0;
}

/* colors

orange - #e84e0e
book top button bg - #444070
pink text on #E72487 bg - #FFBBDB

*/

body{
	font-family:'Nunito Sans',Arial,sans-serif;
	font-size:100%;
	line-height:1;
}
img,
iframe{
	max-width:100%;
}
a:active{
	outline:none;
}
strong{
	font-weight:700;
}
.outer{
	padding:120px 0 125px 0;
	margin-top:-50px;
}
#theshow .outer{
	padding-top:35px;
	margin-top:-35px; 
	padding-bottom:35px;
}
.inner{
	max-width:1100px;
	padding:0 20px;
	margin:0 auto;
}
#nav .inner{
	position:relative;
}
#theshow .inner,
#footer .inner{
	max-width:897px;
}

/* stacking order */

.section{
	position:relative;
}
#nav{z-index:100;}
#header{z-index:10;}
#theshow{z-index:9;}
#booktickets{z-index:8;}
#castcreatives{z-index:7;}

#wrapper{
	padding-top:50px; /* same height as nav bar */
}

#nav{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:50px;
	background:#e84e0e;
	color:#fff;
	overflow:hidden;
	border-bottom:1px solid #fff; /* to see separation from main content */
	transition:all .5s ease-in-out 0s;
}
#header{
	background:#fec500;
	background:url(../img/masthead-bg.jpg) #fec500 no-repeat bottom;
	background-color:#fec500; 
}
#header .masthead{
	height:0;
	padding-top:663px;
	
}
@media(max-width:1158px){
	#header .masthead{
		padding-top:60.3%;
	}
}
#theshow{
	background:#fec500;
	color:#000;
}
#booktickets{
	background-color:#fff;
	background-image:url(../img/bg-tourdates.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
	color:#000;
	background-position:25% top;
}
#castcreatives{
	background:#fec500;
	color:#000;
}
#castcreatives a{
	color:#444070;
}
#footer{
	background:#000;
	color:#fff;
}
#footer a{
	color:inherit;
}

.twocols{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.twocols .col{
	width:47.1%;
}
.onecol{
	text-align:center;
}
.videowrapper{
	padding-top:50px;
}
.videobox{
	height:0;
	padding-top:56.25%;
	position:relative;
}
.videobox iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
h1,
h2{
	font-size:28px;
	font-weight:800;
	font-weight:900; /* nunito */
	text-align:center;
	text-transform:uppercase;
	line-height:1.15;
	color:#000;
	margin-bottom:1.5em;
}
h3{
	font-size:17px;
	font-weight:400;
	line-height:1.45;
}
p,
ul{
	font-size:17px;
	font-weight:400;
	line-height:1.45;
	margin-bottom:1.45em;
}

#toggle{
	display:none;
}
#menu1{
	float:left;
}
#menu2{
	position:absolute;
	right:20px;
}
.menu{
	font-size:16px;
	font-weight:900;
	text-transform:uppercase;
	line-height:50px;
}
.menu li{
	list-style:none;
	display:inline-block;
}
.menu li a{
	text-decoration:none;
	color:inherit;
}
.menu li.current a,
.menu li a:focus,
.menu li a:hover,
.menu li a:active{
	color:#000;
}
#menu2 li a:focus,
#menu2 li a:hover,
#menu2 li a:active{
	color:#fff;
	background:#000;
}
#menu1 li a{
	display:block;
	padding:0 15px;
}
#menu1 li:first-child a{
	padding-left:0;
}
#menu2 li a{
	display:block;
	font-size:19px;
	background:#444070;
	padding:0 20px;
}
#menu2 .h-button:before{
	font-size:19px;
}

#header{
	overflow:hidden;
}
#header .outer{
	padding:0;
	margin:0;
	border-bottom:35px solid #fec500;
}

/* start masthead movement */

#header .masthead.fallback{
	background:url(../img/masthead-bg-fallback.jpg) white no-repeat center / auto 100%;
	opacity:0;
	transition:opacity 2s ease-in-out 1s;
}
#header .masthead{
	position:relative;
	opacity:1;
}
#header .alexandra,
#header .alexcake,
#header .alexcakeleaves{
	transition:transform 1.5s ease-in-out 0s, opacity 2.5s ease-in-out 0s;
}
#header .cake,
#header .leaves{
	transition:transform 1s ease-in-out 1s, opacity 1s ease-in-out 0s;
}
#header .billing{
	transition:transform 1s ease-in-out .5s, opacity 2s ease-in-out .5s;
}
#header .alexcake,
#header .alexcakeleaves,
#header .cake,
#header .alexandra,
#header .billing,
#header .leaves{
	position:absolute;
	opacity:0;
}
#header .alexcake,
#header .cake,
#header .alexandra{
	bottom:0;
	left:0;
	height:100%;
}
#header .billing{
	top:0;
	right:0;
}
#header .leaves,
#header .alexcakeleaves{
	top:100%;
	left:0;
}
#header .alexcake,
#header .alexcakeleaves,
#header .alexandra,
#header .cake,
#header .leaves{
	transform:translate(-70%, 0);
}
#header .billing{
	transform:translate(70%, 0);
}
#header .masthead.sliding .alexcake,
#header .masthead.sliding .alexcakeleaves,
#header .masthead.sliding .alexandra,
#header .masthead.sliding .cake,
#header .masthead.sliding .leaves,
#header .masthead.sliding .billing{
	transform:translate(0, 0);
	opacity:1;
}

/* end masthead movement */

#theshow h2{
	text-transform:none;
	color:#444070;
	max-width:830px;
	padding-top:0.7em;
	margin-left:auto;
	margin-right:auto;
	font-weight:700;
}
#theshow h2 strong{
	color:#444070;
	font-weight:800;
}

.tourdates{
	list-style:none;
	font-size:20px;
	color:#444070;
}
.tourdates li{
	display:flex;
	flex-wrap:wrap;
	padding:20px 0;
	border-top:1px solid #444070;
}
.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 span.city,
.tourdates span.phonenumber{
	font-weight:700;
	font-weight:800; /* nunito */
}
.tourdates span.city{
	text-transform:uppercase;
}
.tourdates span.date,
.tourdates span.theatre{
	font-weight:600;
}
#booktickets p{
	font-size:10px;
	line-height:1.4;
	text-align:center;
	margin-bottom:.7em;
}
#booktickets p strong{
	font-size:13px;
	font-weight:600;
}

.book{
	text-align:right;
}
.book a{
	display:inline-block;
	width:150px;
	background:#e84e0e;
	color:#fff;
	font-size:17px;
	font-weight:900;
	box-sizing:border-box;
	padding:12px 2px;
}
.book a:focus,
.book a:hover,
.book a:active{
	background:#000;
}
.book .onsalesoon{
	display:inline-block;
	width:150px;
	background:#fff;
	color:#000;
	font-size:15px;
	font-weight:900;
	box-sizing:border-box;
	padding:10px 2px;
	border:2px solid #444070;
	text-align:center;
}


.h-button{
	position:relative;
	text-align:center;
}
.h-button span {
	display:inline-block;
	text-transform:uppercase;
	transition:0.25s cubic-bezier(0.5, -1, 0.5, 2);
	opacity:0;
	transform:translate(0, -20px);
}
.h-button:before {
	content:attr(data-text);
	position:absolute;
	width:100%;
	left:0;
	transition:0.25s cubic-bezier(0.5, -1, 0.5, 2);
	opacity:1;
	transform:translate(0, 0px);
}
.h-button:hover:before,
.h-button:focus:before{
	opacity:0;
	transform:translate(0, 20px);
}
.h-button:hover span,
.h-button:focus span{
	opacity:1;
	transform:translate(0, 0);
}
.h-button:hover span:nth-child(1),
.h-button:focus span:nth-child(1){
	transition-delay:0.025s;
}
.h-button:hover span:nth-child(2),
.h-button:focus span:nth-child(2){
	transition-delay:0.05s;
}
.h-button:hover span:nth-child(3),
.h-button:focus span:nth-child(3){
	transition-delay:0.075s;
}
.h-button:hover span:nth-child(4),
.h-button:focus span:nth-child(4){
	transition-delay:0.1s;
}
.h-button:hover span:nth-child(5),
.h-button:focus span:nth-child(5){
	transition-delay:0.125s;
}
.h-button:hover span:nth-child(6),
.h-button:focus span:nth-child(6){
	transition-delay:0.15s;
}
.h-button:hover span:nth-child(7),
.h-button:focus span:nth-child(7){
	transition-delay:0.175s;
}
.h-button:hover span:nth-child(8),
.h-button:focus span:nth-child(8){
	transition-delay:0.2s;
}

#castcreatives .col{
	text-align:center;
}
#castcreatives ul,
#castcreatives p{
	font-size:18px;
}
ul.cc{
	list-style:none;
}
ul.cc li{
	margin-bottom:.5em;
}
ul.cc img,
ul.cc span,
ul.cc a{
	display:block;
	margin-left:auto;
	margin-right:auto;
}
ul.cc a{
	text-decoration:none;
}
ul.cc img{
	width:233px;
	border-radius:50%;
	margin-bottom:5px;
}
ul.cc span.name{
	color:#444070;
	font-weight:800;
	font-weight:900; /* nunito */
	text-transform:uppercase;
}
#castcreatives ul.cc li a:focus span,
#castcreatives ul.cc li a:hover span,
#castcreatives ul.cc li a:active span{
	color:#000;
}
#footer{
	padding:45px 0 100px 0;
}
#footer .inner{
	overflow:hidden;
}	
#footer .fcol1,
#footer .fcol2{
	float:left;
}
#footer .fcol1{
	width:175px;
}
#footer .fcol3{
	float:right;
	padding-top:4px;
}
#footer h3{
	font-size:12px;
	text-transform:uppercase;
}
#footer p{
	font-size:10px;
}

#socialnav2{
	display:none;
}
#socialnav1{
	position:fixed;
	right:30px;
	top:115px;
	z-index:120;
}
.socialnav{
	list-style:none;
	transition:all .5s ease-in-out 0s;
}
.socialnav li{
	margin-bottom:8px;
}
.socialnav li a{
	display:block;
	background:#fff;
	border:1px solid white;
	border-radius:50%;
}
.socialnav li a img{
	display:block;
	width:46px;
	transition:all .5s ease-in-out 0s;
}
.socialnav li a:hover img{
	filter:grayscale(1) brightness(0);
}

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


/* bios */

.bio{
	background:#fec500;
	color:#000;
	padding:30px 20px;
}
.bio h1{
	color:#444070;
	font-size:32px;
	font-weight:800;
	text-align:center;
	text-transform:uppercase;
	margin-bottom:0;
}
.bio h2{
	font-weight:28px;
	text-transform:none;
}
.bio #content{
	max-width:900px;
	margin:0 auto;
}
.bio img{
	float:left;
	width:233px;
	max-width:50%;
	border-radius:50%;
	margin:0 15px 15px 0;
	shape-outside: circle(50%);
	position:relative;
  	top:8px;
}
.bio .biotext{
	max-width:700px;
	margin:0 auto;
}
.bio a{
	color:inherit;
}
.bio a:focus,
.bio a:hover,
.bio a:active{
	text-decoration:underline dashed #fff;
}

@media (max-width:1300px){
	#socialnav1{
		right:10px;
	}
}
@media (max-width:1220px){
	body.scrolled #socialnav1{
		right:-100px;
	}
}
@media(max-width:1100px){
	#socialnav1{
		top:60px;
	}
}
@media(max-width:960px){
	.tourdates li span.venue{
		width:28%;
	}
	.tourdates li span.book{
		width:20%;
	}
}
@media(max-width:920px){
	#menu1 li a{
		padding:0 10px;
	}
	h1,h2{
		font-size:28px;
	}
	p,
	ul{
		font-size:16px;
	}
	.tourdates{
		font-size:18px;
	}
	.book a{
		width:140px;
		font-size:16px;
	}
	.book .onsalesoon{
		width:140px;
		font-size:14px;
	}
}
@media (max-width:860px){
	#toggle{
		display:block;
		position:absolute;
		left:20px;
		top:0;
		height:50px;
		width:50px;
		background:url(../img/menu.png) transparent no-repeat left center / auto 30px;
		text-indent:-200px;
		cursor:pointer;
	}
	#menu1{
		display:none;
		font-size:32px;
	}
	#nav.toggled-on #menu1{
		display:block;
		padding-top:90px;
		width:100%;
	}
	#nav.toggled-on #menu1 li{
		display:block;
		text-align:center;
	}
	#nav.toggled-on #menu1 li a{
		line-height:1.2;
		padding:.5em 0;
	}
	#nav.toggled-on{
		height:100%;
		background:#e84e0e;
	}
	#socialnav1{
		display:none;
	}
	#nav.toggled-on #socialnav2{
		display:block;
		clear:both;
		text-align:center;
	}
	#nav.toggled-on #socialnav2 li{
		display:inline-block;
		margin:0 5px; 
	}
	#nav.toggled-on #socialnav2 li a img{
		width:46px;
		height:46px;
	}
}
@media(max-width:820px){
	.socialnav1 li a img{
		width:31px;
	}
	.tourdates{
		font-size:16px;
	}
	.book a{
		width:120px;
		font-size:14px;
	}
	.book .onsalesoon{
		width:130px;
		font-size:13px;
	}
	.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){
	.socialnav1{
		top:60px;
	}
	.socialnav1 li{
		margin-bottom:6px;
	}
	.socialnav1 li a img{
		width:28px;
	}
	.tourdates{
		max-width:470px;
		margin-left:auto;
		margin-right:auto;
	}
	.tourdates li{
		font-size:20px;
		padding-bottom:0;
	}
	.tourdates .book a{
		width:150px;
		font-size:17px;
	}
	.tourdates .book .onsalesoon{
		width:150px;
		font-size:15px;
	}
	.tourdates li span.date,
	.tourdates li span.venue{
		width:60%;
	}
	.tourdates li span.phone,
	.tourdates li span.book{
		width:40%;
		padding-bottom:20px;
	}
	.tourdates li span.date{order:1;}
	.tourdates li span.venue{order:3; position:relative;top:-2em;}
	.tourdates li span.phone{order:2;}
	.tourdates li span.book{order:4;}
	.phone{
		text-align:right;
	}
	.book a{
		width:120px;
		font-size:14px;
	}
}
@media(max-width:650px){
	.twocols .col{
		width:100%;
	}
}
@media(max-width:580px){

	#header .inner{
		padding:0 20px;
	}
	#header{
		background:url(../img/masthead-580.jpg) #fec500 no-repeat center / cover;
	}
	#header .inner{
		height:0;
		padding-top:141.38%;
		padding-top:130%;
	}
	#header .masthead{
		display:none;
	}
	.socialnav1{
		top:55px;
		right:4px;
	}
	.socialnav1 li{
		margin-bottom:3px;
	}
}
@media(max-width:520px){
	.tourdates li{
		font-size:18px;
		padding-bottom:0;
	}
	.tourdates .book a{
		width:150px;
		font-size:17px;
	}
	.tourdates .book .onsalesoon{
		width:150px;
		font-size:15px;
	}
	#gallery ul li{
		width:50%;
	}
}
@media(max-width:460px){
	h1,
	.bio h1{
		font-size:26px;
	}
	h2,
	.bio h2{
		font-size:24px;
	}
	.bio img{
		float:none;
		display:block;
		max-width:100%;
		margin:0 auto 20px auto;
		top:0;
	}
}
@media(max-width:480px){
	#footer .fcol1{
		width:50%;
		min-width:140px;
	}
	#footer .fcol2{
		
	}
	#footer .fcol3{
		clear:left;
		float:left;
		padding-top:50px;
	}
}
@media(max-width:400px){
	.socialnav1 li a img{
		width:22px;
	}
}
@media(max-width:360px){
	h1,
	.bio h1{
		font-size:24px;
	}
	h2,
	.bio h2{
		font-size:22px;
	}
}
@media(max-width:460px){
	.tourdates li span.date,
	.tourdates li span.venue,
	.tourdates li span.phone,
	.tourdates li span.book{
		display:block;
		width:100%;
		text-align:center;
		order:0; /* remove alternate order */
		padding-bottom:10px;
	}
	.tourdates li span.book{
		padding:10px 0 25px 0;
	}
	.tourdates li span.venue{top:0;}
	.tourdates li span.book *{
		text-align:center;
		margin-left:auto;
		margin-right:auto;
	}
}
@media(max-width:420px){
	#nav.toggled-on #menu1{
		font-size:28px;
	}
}
@media(max-width:380px){
	#nav.toggled-on #menu1{
		font-size:26px;
	}
}
@media(max-width:360px){
	#nav.toggled-on #menu1{
		font-size:24px;
	}
}



/* height dependent */

@media(max-height:490px){
	#nav.toggled-on #menu1{
		padding-top:70px;
		font-size:24px; /* no change */
	}
	#nav.toggled-on #menu1 li a{
		padding:.4em 0;
	}
}
@media(max-height:400px){
	#nav.toggled-on #menu1{
		font-size:22px;
	}
	#nav.toggled-on #menu1 li a{
		padding:.2em 0;
	}
}
@media(max-height:360px){
	#nav.toggled-on #menu1{
		font-size:20px;
	}
}