/* colours:
#BB0102 - red
#1A1A1A - black
#FFFFFF - white
#C9C9C9 - grey
#C6C6C6 - other grey
#707070 - dark grey
#797979 - other dark grey
*/

a{
	color:inherit;
}
body{
	background:#FFFFFF;
	color:#1A1A1A;
}
.skip-link{
	border-color:black;
	color:black;
	background-color:white;
}
#nav{
	background:rgba(255,255,255,.75);
	color:#BB0102;
	border-color:#C6C6C6;
	transition:background 2s ease-in-out 0s;
}
.scrolled #nav{
	background:#FFFFFF; /* because it looks weird when a section start shows up behind it */
}
#nav #toggle a{
	color:#1A1A1A;
}
#nav a{
	transition:all .2s ease-in-out 0s;
	position:relative;
}
#nav ul.menu a:after{
	content:" ";
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:3px;
	background:transparent;
}
#nav ul.menu a.active:after,
#nav ul.menu a:hover:after,
#nav ul.menu a:focus:after,
#nav ul.menu a:active:after{
	background:#BB0102;
}
#nav #socialnav li a{
	filter:brightness(0);
}
#nav #socialnav li a:focus,
#nav #socialnav li a:hover,
#nav #socialnav li a:active{
	filter:brightness(1);
}
#header{
	background:#FFFFFF;
	color:#1A1A1A;
}
body.competition .competitionformwrap{
	background:#FFFFFF;
	color:#1A1A1A;
}
#theshow{
	background:#BB0102;
	color:#FFFFFF;
	background-image:url(../img/smoke.png),url(../img/smoke-1.png);
	background-color:#BB0102;
	background-repeat:no-repeat;
	background-position:center top,center bottom;
	background-size:auto;
}
body.competition #theshow{
	background-image:url(../img/smoke.png);
	background-position:center top;
}
#theterms{
	background:#BB0102;
	color:#FFFFFF;
}
hr{
	border-color:black;
}
p.review span.stars,
p.review span.quote{
}
p.review span.byline{
}
#booktickets{
	background:#FFFFFF;
	color:#1A1A1A;
}
#booktickets h2{
	color:#BB0102;
}
#booktickets h2 span{
	color:#1A1A1A;
}
.book a{
	background:#BB0102;
	color:#FFFFFF;
	border-color:#BB0102;
}
.book a:focus,
.book a:hover,
.book a:active{
	background:#FFFFFF;
	color:#BB0102;
}
.book .onsalesoon{
	background:#797979;
	border-color:#797979;
	color:#FFFFFF;
}
#gallery{
	background:#1A1A1A;
	color:#FFFFFF;
}
#gallery ul li a img{
	border-color:#FFFFFF;
}
#castcreatives{
	background-image:url(../img/smoke-1.png);
	background-color:#BB0102;
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:auto;
	color:#FFFFFF;
}
ul.castlist li img{
	border-color:#707070;
}
#agathachristie{
	background:#FFFFFF;
	color:#1A1A1A;
}
#agathachristie h2{
	color:#BB0102;
}
#footer{
	background:#1A1A1A;
	color:#FFFFFF;
}
body.bio{
	background:#FFFFFF;
	color:#1A1A1A;
}
.bio h1,
.bio h2{
	color:#BB0102;
}




/* reset */

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


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

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

body{
	font-family:'Poppins',sans-serif;
	font-size:100%;
	font-weight:500;
	line-height:1;
}
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(3rem,9vw,4.875rem);
	font-weight:700;
	text-transform:uppercase;
	line-height:.875;
	text-align:center;
	margin-bottom:1.4em;
}
body.competition h2,
body.terms h2{
	font-size:3rem;
	font-size:clamp(2rem,5vw,3rem);
	text-transform:none;
	line-height:1;
}
body.terms h2{
	font-weight:400;
}
h3,h4,h2 span{
	font-size:2rem;
	font-size:clamp(1.375rem,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.125rem,2.2vw,1.5rem);
	font-weight:500;
	line-height:1.42;
	margin-bottom:1.42em;
}
.bio p,
.bio ul{
	font-size:clamp(1rem,2.2vw,1.5rem);
}
#nav ul{
	font-size:1.0625rem;
	font-weight:700;
	text-transform:uppercase;
	line-height:4.25rem;
}
#theshow .intro p{
	font-size:2.125rem;
	font-size:clamp(1.4rem,3.12vw,2.125rem);
	font-weight:500;
	line-height:1.42;
	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.375,4.125vw,1.75rem);
	font-weight:700;
	text-transform:uppercase;
	line-height:1.3;
}
p.review span.quote{
	margin-bottom:1em;
}
p.review span.byline{
	font-size:1rem;
	font-size:clamp(.875rem,2.625vw,1rem);
	font-weight:700;
	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.5rem;
	font-size:clamp(1.125rem,3.375vw,1.5rem);
	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-size:1.25rem;
	font-size:clamp(1.125rem,3.375vw,1.25rem);
	font-weight:700;
	text-transform:uppercase;
}
.tourdates span.onsalesoon{
	font-size:1.25rem;
	font-size:clamp(1.125rem,3.375vw,1.25rem);
	font-weight:700;
}
#booktickets p,
#gallery p{
	text-align:center;
	margin-bottom:.7em;
}
#gallery p{
	font-size:1rem;
}
#castcreatives ul{
	font-size:1.25rem;
	line-height:1.75;
}
ul.creativeslist li .name,
ul.castlist li .name{
	font-weight:700;
}
p.caption{
	font-size:16px;
	padding-top:1em;
}
.galleryslider .videowrapper p.caption{
	text-align:center;
}


#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(2rem,8vw,4rem);
	font-weight:700;
	text-transform:uppercase;
	line-height:.875;
	margin-bottom:.2em;
}
.bio h2{
	font-size:2rem;
	font-size:clamp(1.375rem,4.125vw,2rem);
	font-weight:600;
	text-transform:none;
	margin-bottom:0;
}


/* layout */

body.competition,
body.terms{
	padding-top:calc(4.25rem + 1px);
}
.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;}
#gallery{z-index:2;}
#booktickets{z-index:3;}
#theshow{z-index:5;} /* same as #header, so that the smoke goes in front */
#header{z-index:5;}
#nav{z-index:90000;}

#nav{
	padding:0 2rem;
}
.outer{
	padding-top:5.125rem;
	padding-bottom:2.1875rem;
	padding-left:clamp(1rem,5vw,2rem);
	padding-right:clamp(1rem,5vw,2rem);
	margin-top:-25px;
	margin-top:-1.5625rem;
}
#header .outer,
#theterms .outer{
	margin-top:0;
}
.inner{
	max-width:64rem;
	margin:0 auto;
}
#nav{
	height:calc(4.25rem + 1px);
	position:fixed;
	left:0;
	top:0;
	width:100%;
	border-width:0 0 1px 0;
	border-style:solid;
}
#nav .inner,
#footer .inner{
	max-width:91.875rem;
}
#toggle{
	display:none;
}
#navcontent{
	height:4.25rem;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	align-content:center;
}
#nav ul{
	list-style:none;
	margin-bottom:0;
}
#nav li{
	display:inline-block;
	padding:0 0.625rem; /* on the li element, to get the border bottom width correct */
	padding:0 0.58em;
}
#nav li a{
	display:inline-block;
}
#nav li a br{
	display:none;
}
#nav ul#menu1 li:first-child{
	padding-left:0;
}
#nav ul#socialnav li:last-child{
	padding-right:0;
}
#socialnav li a img{
	vertical-align:middle;
}
#header{
	height:0;
	padding-top:62%;
	text-align:center;
	background:url(../img/masthead-1920x1000_2.jpg) #ffffff no-repeat center top / auto 100%;
}
body.competition #header{
	padding-top:44.5%;
}
@media(max-width:618px){
	#header,
	body.competition #header{
		padding-top:157%;
		background:url(../img/masthead-860x1352_2.jpg) #ffffff no-repeat center top / 100% auto;
	}
}
@media(min-width:1552px){
	#header{
		padding-top:62.5rem;
	}
	body.competition #header{
		padding-top:43rem;
	}
}
#header #content{
	position:absolute; 
	top:0;
	left:0;
	width:100%;
}
#theshow .outer{
	padding-top:18rem;
	padding-bottom:18rem;
}
body.competition #theshow .outer{
	padding-bottom:6rem;
}
.content{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.content .colwide{
	width:100%;
}
.content .col1,
.content .col2{
	width:46.6%;
}
body.competition .competitionformwrap{
	padding:2rem 2.5rem;
	border-radius:.5rem;
	margin-top:2vw;
}
.competitionformwrap iframe{
	width:100%;
	min-height:480px;
}
@media(max-width:590px){
	.competitionformwrap iframe{
		min-height:530px;
	}
}
@media(max-width:420px){
	.competitionformwrap iframe{
		min-height:580px;
	}
}


.videowrapper{
	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.galleryslider li .videowrapper{
	margin:0 auto;
}
ul.galleryslider,
ul.galleryslider li,
ul.galleryslider li .imagewrapper{
	height:100%;
}
ul.galleryslider li{
	display:block;
}
ul.galleryslider li .imagewrapper{
	display:flex;
	width:100%;
	justify-content:center;
	align-items:center;
}
ul.galleryslider li .imagewrapper img{
	max-width:100%;
	max-height:100%;
}
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;
}

.showinfo{
	border-width:1px 0 0 0;
	border-style:solid;
	padding-top:1rem;
}
.showinfo p.button a:after{
	content:"";
	display:inline-block;
	width:1.125rem;
	height:.625rem;
	background:url(../img/arrow-open.svg) transparent no-repeat right bottom / contain;
	margin-left:1rem;
	transition:transform .5s ease-in-out 0s;
}
.showinfo p.button a.opened:after{
	/*transform:rotate(180deg);*/
	transform:scale(1, -1);
}


#booktickets h2 span{
	display:block;
	padding-top:.5em;
}
.tourdates{
	list-style:none;
}
.tourdates li{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding:2rem 1.875rem 2rem 2.5rem;
	box-shadow:0 0 15px rgba(0,0,0,.25);
	border-radius:.5rem;
	margin-bottom:2rem;
}
.tourdates li span.date{
	width:calc(48% - 4.5em);
}
.tourdates li span.venue{
	width:calc(48% - 4.5em);
	padding-left:1em;
}
.tourdates li span.phone{
	width:0;
}
.tourdates li span.book{
	width:9em;
}
.tourdates li span.venue span,
.tourdates li span.phone span{
	display:block;
}
.book{
	text-align:right;
	padding:.3em 0;
}
.book a,
.book .onsalesoon{
	display:inline-block;
	width:11.925rem;
	max-width:100%; /* of .book */
	min-height:2.5em;
	line-height:2.5em;
	text-align:center;
	padding:0 2px;
	border-width:1px;
	border-style:solid;
	border-radius:.5rem;
}
.gallery{
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin-left:-.9375rem;
	margin-right:-.9375rem;
}
.gallery li{
	width:33.33%;
	padding:.9375rem;
}
.gallery li a,
.gallery li img{
	display:block;
}
#gallery ul li a img{
	border-width:3px;
	border-style:solid;
}
#castcreatives{
	padding-bottom:18rem;
}
#castcreatives ul{
	list-style:none;
}
ul.castlist{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin-left:-.75rem;
	margin-right:-.75rem;
	margin-bottom:6rem;
}
ul.castlist li{
	width:25%;
	padding:.75rem;
}
ul.castlist li img{
	display:block;
	border-width:1px;
	border-style:solid;
	margin-bottom:.5rem;
}
ul.castlist li span{
	display:block;
}
ul.creativeslist li{
	text-align:center;
	margin-bottom:1.2em;
}
ul.creativeslist li span{
	display:block;
}

#footer .fcols{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
#footer .fcol,
#footer .fsubcol{
	margin-bottom:2rem;
}
#footer .fcol1{
	order:0;
	width:50%;
}
#footer .fcol2{
	order:2;
	width:50%;
}
#footer .fcol3{
	order:1;
	display:flex;
	flex-wrap:wrap;
	gap:6vw;
}
@media(max-width:960px){
	#footer .fcol3{
		display:block;
	}
	#footer .fcol3 .fsubcol{
		margin-bottom:2rem;
	}
}
#footer .fcol4{
	order:3;
	width:50%;
	text-align:right;
	align-self:center;
}
#footer p.fieryangel a,
#footer p.hdk a,
#footer p.fieryangel a img,
#footer p.hdk a img{
	display:inline-block;
}
#footer p.hdk a img{
	width:3.75rem;
}


/* bios */

.bio{
	padding:1.875rem 1.25rem;
}
.bio #content{
	max-width:56.25rem;
	margin:0 auto;
	overflow:hidden;
}
.bio .bioimg,
.bio .biotext{
	padding-top:3rem;
}
.bio .bioimg{
	float:left;
	width:15rem;
	max-width:50%;
	margin:0 1rem 1rem 0;
}
.bio .bioimg img{
	width:100%;
	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-style:dashed;
}


/* nav menu narrow */

@media(max-width:1030px){
	#nav ul{
		font-size:1rem;
	}
}
@media(max-width:980px){
	#toggle{
		display:block;
		width:auto;
		height:4.25rem;
		font-size:.9375rem;
		line-height:4.25rem;
		background:url(../img/menu.svg) transparent no-repeat left center / auto 1.5rem;
		position:fixed;
		left:clamp(1rem,5vw,2rem);
		top:0;
	}
	#nav:target #toggle{
		background-image:url(../img/close.svg);
	}
	#toggle a{
		display:block;
		width:100%;
		height:100%;
		padding-left:2.3rem;
	}
	#toggle a span{
		line-height:1;		
	}
	#nav{
		transition:height .5s ease-in-out 0s, overflow 1s ease-in-out 0s, background 2s ease-in-out 0s;
	}
	.toggled-on #nav,
	#nav:target{
		height:100%;
		overflow:auto;
		background:#FFFFFF;
		padding-top:3rem;
	}
	#nav:after{
		content:" ";
		display:block;
		position:fixed;
		top:4.25rem;
		left:0;
		width:100%;
		height:1px;
		background:#C6C6C6;
	}
	#navcontent{
		display:block; /* remove flex */
	}
	#navcontent #socialnav{
		position:fixed;
		top:0;
		right:clamp(1rem,5vw,2rem);
	}
	#navcontent #socialnav li{
		padding:0 .5rem;
	}
	#navcontent #menu1{
		display:none;
	}
	.toggled-on #navcontent #menu1,
	#nav:target #navcontent #menu1{
		display:block;
	}
	#nav ul#menu1{
		font-size:2.375rem;
		font-size:clamp(1rem,8.8vw,2.375rem);
		line-height:1;
		padding-top:4.125rem;
		margin-left:auto;
		transition:all 0s ease-in-out 0s;
	}
	ul.menu{
		width:100%;
		text-align:center;
		margin-bottom:1rem;
	}
	ul.menu li{
		display:block;
		padding:0 0 .5em 0 !important;
		width:100%;
	}
	#nav li a br{
		display:inline-block;
	}
	#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:880px){
	.tourdates li{
		font-size:1.125rem;
	}
}
@media(max-width:820px){
	ul.castlist li{
		width:33.33%;
	}
}
@media(max-width:700px){
	.tourdates li{
		font-size:1.5rem;
		padding:1em;
	}
	.tourdates li span.date,
	.tourdates li span.venue{
		width:calc(100% - 10em);
		padding-left:0;
	}
}

@media(max-width:620px){
	.tourdates li{
		font-size:1.25rem;
	}
	#footer .fcols{
		display:block;
	}
	#footer .fcol{
		width:100% !important;
		text-align:left !important;
	}
}

@media(max-width:580px){
	ul.gallery li,
	ul.castlist li{
		width:50%;
	}
}

@media(max-width:560px){
	.content .col1,
	.content .col2{
		width:100%;
	}
	.bio .bioimg{
		float:none;
		width:100%;
		max-width:100%;
	}
	.bio .withimage .biotext{
		padding-top:1rem;
	}
	.bio p a{
		word-wrap:break-word;
	}
}

@media(max-width:520px){
	.tourdates li span.date,
	.tourdates li span.venue,
	.tourdates li span.book{
		display:block;
		width:100%;
		text-align:left;
	}
	.tourdates li span.book *{
		text-align:center;
		margin-left:auto;
		margin-right:auto;
	}
}
@media(max-width:520px){
	h1,h2{
		font-size:3rem;
		font-size:clamp(1rem,10vw,3rem);
	}
	h2 br{
		display:none; /* to make agatha go on the same line as about */
	}
	h3,h4,h2 span{
		font-size:1.375rem;
	}
	h5,h6,
	p,ul,ol,blockquote,
	input,textarea,select,option{
		font-size:1.125rem;
	}
	.bio p{
		font-size:1rem;
	}
	#theshow .intro p{
		font-size:1.4rem;
	}
	#theshow .showinfo p{
		font-size:.875rem;
	}
	p.review{
		font-size:1.375rem;
	}
	p.review span.stars{
		font-size:3rem;
	}
	p.review span.byline{
		font-size:.875rem;
	}
	#footer h3,
	#footer p,
	#footer ul{
		font-size:.875rem;
	}
}

@media(max-width:320px){
	.bio h1{
		font-size:1.5rem;
	}
	.bio h2{
		font-size:1.25rem;
	}
	.bio p{
		font-size:.9375rem;
	}

}

.bts-popup {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
	-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
	transition: opacity 0.3s 0s, visibility 0s 0.3s;
  }
  .bts-popup.is-visible {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
	-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
	transition: opacity 0.3s 0s, visibility 0s 0s;
	z-index: 99999;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
  }
  
  .bts-popup-container {
	position: relative;
	width: 90%;
	max-width: 600px;
	margin: auto;
	background: #000;
	border-radius: none; 
	text-align: center;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
	-webkit-transform: translateY(-40px);
	-moz-transform: translateY(-40px);
	-ms-transform: translateY(-40px);
	-o-transform: translateY(-40px);
	transform: translateY(-40px);
	/* Force Hardware Acceleration in WebKit */
	-webkit-backface-visibility: hidden;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	transition-property: transform;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	transition-duration: 0.3s;
  }
  .bts-popup-container img {
	padding: 20px 0 0 0;
  }
  .bts-popup-container p {
	  color: white;
	padding: 10px 40px;
  }
  .bts-popup-container .bts-popup-button {
	padding: 5px 25px;
	border: 2px solid white;
	  display: inline-block;
	margin-bottom: 10px;
  }
  
  .bts-popup-container a {
	color: white;
	text-decoration: none;
	text-transform: uppercase;
  }
  
  
  
  
  
  
  .bts-popup-container .bts-popup-close {
	position: absolute;
	top: 8px;
	right: 12px;
	width: 30px;
	height: 30px;
	
  }
  .bts-popup-container .bts-popup-close::before, .bts-popup-container .bts-popup-close::after {
	content: '';
	position: absolute;
	top: 12px;
	width: 16px;
	height: 3px;
	background-color: white;
  }
  .bts-popup-container .bts-popup-close::before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	left: 8px;
  }
  .bts-popup-container .bts-popup-close::after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	right: 6px;
	top: 13px;
  }
  .is-visible .bts-popup-container {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
  }
  .is-visible a.bts-popup-close.img-replace {
	z-index: inherit;
	align-self: flex-start;
	margin-top: 2em;
	margin-right: 2em;
	margin-left: auto;
	color: #FFFFFF;
	text-decoration: none;
  }
  @media only screen and (min-width: 1170px) {
	.bts-popup-container {
	  margin: 8em auto;
	}
  }

  .iframe-container {
	position: fixed;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: black;
    height: 500px;
    padding: 2.5em;
	width: 50%;
}
@media screen and (max-width: 768px) {
	.iframe-container {
		width: -webkit-fill-available;
	}
}


.iframe-container iframe {
    position: absolute;
    top: 0;
	left:0;
    border: 0;
    height: 100%;
    width: 100%;
	padding: 1em;
}
/* 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;}}