/*
Theme Name: GCC Theme
Theme URI: n/a
Author: WeAreHdK / Raffaele Malanga / Els van Bloois
Author URI: https://wearehdk.com/
Description: Theme for GCC
Version: 1.0
License: no license, use a theme from https://wordpress.org/themes/ instead.
License URI: n/a
Tags: n/a
Text Domain: gcctheme
*/
/*
* WebFont Package Licensed to Raf Malanga HdK
*/
/* Router Thin */
@font-face {
font-family: 'Router';
src: url('fonts/RouterWeb-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
font-display: swap;
}
/* Router Thin Italic */
@font-face {
font-family: 'Router';
src: url('fonts/RouterWeb-ThinItalic.woff2') format('woff2');
font-weight: 100;
font-style: italic;
font-display: swap;
}
/* Router Extralight */
@font-face {
font-family: 'Router';
src: url('fonts/RouterWeb-Extralight.woff2') format('woff2');
font-weight: 200;
font-style: normal;
font-display: swap;
}
/* Router Extralight Italic */
@font-face {
font-family: 'Router';
src: url('fonts/RouterWeb-ExtralightItalic.woff2') format('woff2');
font-weight: 200;
font-style: italic;
font-display: swap;
}
/* Router Light */
@font-face {
font-family: 'Router';
src: url('fonts/RouterWeb-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap;
}
/* Router Light Italic */
@font-face {
font-family: 'Router';
src: url('fonts/RouterWeb-LightItalic.woff2') format('woff2');
font-weight: 300;
font-style: italic;
font-display: swap;
}
/* Router Book */
@font-face {
font-family: 'Router';
src: url('fonts/RouterWeb-Book.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Router Book Italic */
@font-face {
font-family: 'Router';
src: url('fonts/RouterWeb-BookItalic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* Router Medium */
@font-face {
font-family: 'Router';
src: url('fonts/RouterWeb-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* Router Medium Italic */
@font-face {
font-family: 'Router';
src: url('fonts/RouterWeb-MediumItalic.woff2') format('woff2');
font-weight: 500;
font-style: italic;
font-display: swap;
}
/* Router Bold */
@font-face {
font-family: 'Router';
src: url('fonts/RouterWeb-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Router Bold Italic */
@font-face {
font-family: 'Router';
src: url('fonts/RouterWeb-BoldItalic.woff2') format('woff2');
font-weight: 700;
font-style: italic;
font-display: swap;
}
/* generic things */
html,body,h1,h2,h3,h4,h5,h6,p,ul,li,form{
padding:0;
margin:0;
}
*{
box-sizing:border-box;
}
html {
font-size:16px; /* for rem base */
scroll-behavior: smooth;
scroll-padding-top:15rem;
/* note: this replaces the javascript version, which is not accessible due to the 'return false' setting. */
}
html,#nav{
scrollbar-width: thin;
}
.screen-reader-text,
.skip-link,
.site-nav li.icon a span{
position:fixed;
top:-4000rem;
left:-4000rem;
z-index:10001;
}
.skip-link:focus,
#toggle a:focus span.skip-link{
top:2rem;
left:2rem;
background:black;
color:white;
padding:.5rem 1rem;
border:2px dotted white;
text-decoration:none;
text-transform:uppercase;
font-size:100%;
z-index:10001;
}
.admin-bar .skip-link:focus,
#toggle a:focus span.skip-link{
top:4rem;
}
iframe,
img,
svg{
max-width:100%;
}
img.attachment-thumbnail,
img.attachment-large{
height:auto !important;
}
/* colours */
html{
scrollbar-color:#0090B1 #FFD4CA;
}
body{
background:black;
color:white;
}
.page-content h2:before,
.inner.hasline:before{
background:white;
}
#masthead.noimg{
padding-top:12.75rem;
}
#masthead.hasimg{
position:relative;
padding-top:56.25%; /* unless overwritten in HTML */
}
#masthead .mhimgmob,
#masthead .mhimg{
position:fixed;
top:0;
left:0;
width:100%;
background-size:100% auto;
background-size:cover;
background-position:center top;
}
#masthead .mhimg{
padding-top:56.25%; /* unless overwritten in HTML */
}
#masthead .mhimgmob{
padding-top:223.25%;
display:none;
}
.photocredits .mhmobcred{
display:none;
}
.admin-bar #masthead .mhimg,
.admin-bar #masthead .mhimgmob{
top:32px;
}
@media(max-width:782px){
.admin-bar #masthead .mhimg,
.admin-bar #masthead .mhimgmob{
top:46px;
}
}
#nav{
background:rgba(13,13,13,.2);
backdrop-filter: blur(30px);
-webkit-backdrop-filter:blur(30px);
color:white;
}
.site-main{
position:relative;
/* padding-bottom:4rem; */
/* TEMPTEST this causes spacings where we sometimes do not want any */
padding-bottom:1px; /* to keep margins on child elements inside */
background:black;
}
.site-main:before{
/* background:radial-gradient(ellipse 80% 50% at center bottom, rgb(0,61,76,1) 0%, rgba(0,61,76,1) 20%, rgba(0,61,76,0) 60%); */
content:" ";
position:absolute;
bottom:0;
left:0;
display:block;
width:100%;
height:40vw;
max-height:100%; /* important, for when there is no height to the page content yet - it would otherwise cover the masthead! */
background:radial-gradient(ellipse 80% 50% at center bottom, #62443E 0%, #62443E 20%, #000000 60%);
}
#primary{
position:relative; /* to make sure all the content goes in front of the radial gradient on .site-main */
/* also, for positioning the shadow that is to fall over the masthead */
}
#primary:before{
content:" ";
display:block;
width:100%;
height:15.78vw;
background:linear-gradient(to top, rgb(0,0,0,.78) 0%, rgb(84,84,84,0) 100%);
/* background:linear-gradient(0deg, #000000C7 0%, #54545400 100%); */
position:absolute;
top:-15.78vw;
left:0;
}
.subnav{
color:#FFD4CA;
}
.subnav ul li.current a{
color:white;
}
.subnav ul li a.active,
.subnav ul li a:focus,
.subnav ul li a:hover,
.subnav ul li a:active{
color:white;
}
h1.page-title span,
h2.sectionheadinglarge span{
color:#FFD4CA;
}
p.year{
color:#A8A8A8;
}
.inpagenav{
background:black; /* for when it's sticky */
}
.colour0{
background:transparent;
}
.colour1{
background:#16B3D8;
color:black;
}
.colour2{
background:#FFD4CA;
color:black;
}
.mediaslidersection.colour3{
/* one exception for background colour, does not apply to media sliders in projects/productions */
/* clients requested choice of background colour, gave them this colour + pink + blue as per other background colours */
/* they also wanted *no* coloured background. That would be black. */
background:#004555;
color:white;
}
.boc h2:after,
.showmore p.showreadmore:after{
content:" ";
display:inline-block;
width:1.5rem;
height:1.5rem;
background-image:url('data:image/svg+xml,');
background-repeat:no-repeat;
background-position:center;
background-size:contain;
margin-left:1.5rem;
transform:rotate(0);
transition:transform .5s ease-in-out 0s;
}
.showmore p.showreadmore:after{
height:.75rem;
}
.boc.closed h2:after,
.showmore.closed p.showreadmore:after{
transform:rotate(180deg);
}
.showmore p.showreadmore .less{
display:inline-block;
}
.showmore p.showreadmore .more{
display:none;
}
.showmore.closed p.showreadmore .less{
display:none;
}
.showmore.closed p.showreadmore .more{
display:inline-block;
}
.people .portrait{
background:linear-gradient(132deg, #FFD4CA 0%, #FFD4CA 31%, #00596D 100%);
}
.people .portrait img{
mix-blend-mode: multiply;
border-color:#404040;
}
.problocks .pblock a img{
border-color:#404040;
}
.tourdates li{
border-color:#404040;
}
.quotebox{
color:#FFD4CA;
}
.quotescolumns .quotebox,
.quotesslider .quotebox p.quote,
.quotesslider .quotebox p.byline{
color:#fff;
}
#colophon{
padding-bottom:3.4375rem;
position:relative;
background:black;
}
.formbox div.form-input input{
background:transparent;
border-color:#fff;
color:#fff
}
.formbox div.form-submit input{
border-color:#fff;
background:#fff;
color:#000;
}
#colophon:after{
content:" ";
display:block;
width:100%;
height:3.4375rem;
position:absolute;
left:0;
bottom:0;
/* background-image:url(img/repeaterx2.png); */ /* to be replaced with *small* avg code hopefully */
background-image:url('data:image/svg+xml,');
background-repeat:repeat-x;
background-position:center top;
background-size:auto 2.75rem;
transition:background .5s ease-in-out;
}
body:hover #colophon:after{
background-position:left top;
}
.popup{
background:rgba(0,0,0,.8);
}
.popinside{
background:white;
color:black;
}
.textlink.downloadlink a{
display:block;
min-height:1.75rem;
padding-left:3rem;
background-repeat:no-repeat;
background-position:left top;
background-size:1.75rem auto;
background-image:url('data:image/svg+xml,');
}
.textlink.downloadlink a{
background-image:url('data:image/svg+xml,');
}
/* colour schemes productions */
/*
Coal: A
Wasteland: B
Detention: C
Generic: X
A gradient: #ED5A38 to #FFBAAF -> #FFD4CA
subnav: #ED5A38
quote text: #FFBAAF
credits bg: #FFBAAF
stars in slider:#FFBAAF
radial bottom page: #802F1C
radial image overlay: #DE6548
B gradient text: #DBFE51 to #E49B58
subnav: #DBFE51
quote text: #DBFE51
credits bg: #DBFE51
stars in slider: #E49B58
radial bottom page: #5C6A22
radial image overlay: #DAFE51
tourdates bg: #DBFE51;
C gradient text: #FF00FF to #4FACFC
subnav: #FF00FF
quote text: #FF00FF
credits bg: #4FACFC
stars in slider: #4FACFC
radial bottom page: #FF00FF
radial image overlay: #FF00FF
X gradient text: #FFD4CA to #0090B1
subnav: #FFD4CA
quote text: #FFD4CA
credits bg: #FFD4CA
stars in slider: #FFD4CA
radial bottom page: #62443E
radial image overlay: #FFD4CA
*/
.colour1 h2:before,
.colour2 h2:before,
.credits h2:before{
background:#000;
}
.colourschemeA h1.page-title span,
.colourschemeA .subnav,
.colourschemeA .medianav ul li a.active{
/* color:#ED5A38; */
color:#FF5F1F;
}
.colourschemeB h1.page-title span,
.colourschemeB .subnav,
.colourschemeB .medianav ul li a.active{
color:#DBFE51;
}
.colourschemeC h1.page-title span,
.colourschemeC .subnav,
.colourschemeC .medianav ul li a.active{
color:#FF00FF;
}
.colourschemeX .subnav,
.colourschemeX .medianav ul li a.active{
color:#FFD4CA;
}
.colourschemeA .subnav li a.active,
.colourschemeA .subnav li a:focus,
.colourschemeA .subnav li a:hover{
color:white;
}
.colourschemeB .subnav li a.active,
.colourschemeB .subnav li a:focus,
.colourschemeB .subnav li a:hover{
color:white;
}
.colourschemeC .subnav li a.active,
.colourschemeC .subnav li a:focus,
.colourschemeC .subnav li a:hover{
color:white;
}
.colourschemeX .subnav li a.active,
.colourschemeX .subnav li a:focus,
.colourschemeX .subnav li a:hover{
color:white;
}
.colourschemeA .button a,
.colourschemeA .credits,
.colourschemeA .popinside{
background:#FFBAAF;
color:#000;
}
.colourschemeB .button a,
.colourschemeB .credits,
.colourschemeB .popinside{
background:#DBFE51;
color:#000;
}
.colourschemeC .button a,
.colourschemeC .credits,
.colourschemeC .popinside{
background:#FF00FF;
color:#000;
}
/* exception */
.colourschemeC .credits{
background:#4FACFC;
}
.colourschemeX .button a,
.colourschemeX .credits,
.colourschemeX .popinside{
background:#FFD4CA;
color:#000;
}
.colourschemeA.site-main:before{
background:radial-gradient(ellipse 80% 50% at center bottom, #802F1C 0%, #802F1C 20%, #000000 60%);
}
.colourschemeB.site-main:before{
background:radial-gradient(ellipse 80% 50% at center bottom, #5C6A22 0%, #5C6A22 20%, #000000 60%);
}
.colourschemeC.site-main:before{
/* background:radial-gradient(ellipse 80% 50% at center bottom, #AE2682 0%, #AE2682 20%, #000000 60%); */
background:radial-gradient(ellipse 80% 50% at center bottom, #841d40 0%, #841d40 20%, #000000 60%);
}
.colourschemeX.site-main:before{
background:radial-gradient(ellipse 80% 50% at center bottom, #62443E 0%, #62443E 20%, #000000 60%);
}
.colourschemeA .button:focus a,
.colourschemeA .button:hover a,
.colourschemeA .button:active a,
.colourschemeA .quotebox{
/* color:#FFBAAF; */
color:#FF5F1F;
}
.colourschemeB .button:focus a,
.colourschemeB .button:hover a,
.colourschemeB .button:active a,
.colourschemeB .quotebox{
color:#DBFE51;
}
.colourschemeC .button:focus a,
.colourschemeC .button:hover a,
.colourschemeC .button:active a,
.colourschemeC .quotebox{
color:#FF00FF;
}
.colourschemeA .productionlogo a,
.colourschemeA .quotesslider .quotebox p.stars{
color:#FFBAAF;
}
.colourschemeB .productionlogo a,
.colourschemeB .quotesslider .quotebox p.stars{
color:#E49B58;
}
.colourschemeC .productionlogo a,
.colourschemeC .quotesslider .quotebox p.stars{
color:#4FACFC;
}
.colourschemeA .downloadlink a{
background-image:url('data:image/svg+xml,');
}
.colourschemeB .downloadlink a{
background-image:url('data:image/svg+xml,');
}
.colourschemeC .downloadlink a{
background-image:url('data:image/svg+xml,');
}
/* colourscheme on overview pages */
.pblock.colourschemeA a .overlay:before{
background:radial-gradient(ellipse 100% 100% at center bottom, #DE6548 0%, rgba(0,0,0,.8) 50%, transparent 100%);
}
.pblock.colourschemeB a .overlay:before{
background:radial-gradient(ellipse 100% 100% at center bottom, #DAFE51 0%, rgba(0,0,0,.8) 50%, transparent 100%);
}
.pblock.colourschemeC a .overlay:before{
background:radial-gradient(ellipse 100% 100% at center bottom, #FF00FF 0%, rgba(0,0,0,.8) 50%, transparent 100%);
}
.pblock.colourschemex a .overlay:before{
background:radial-gradient(ellipse 100% 100% at center bottom, #FFD4CA 0%, rgba(0,0,0,.8) 50%, transparent 100%);
}
/* links colours */
a{
color:inherit;
text-underline-offset:.2em;
}
#nav ul a:focus,
#nav ul a:hover,
#nav ul a:active{
color:#4EB4CB;
}
.colour0 a:focus,
.colour0 a:hover,
.colour0 a:active{
color:#4EB4CB;
}
.button a{
background:#FFD4CA;
color:black;
border-color:#FFD4CA;
}
.button a:focus,
.button a:hover,
.button a:active{
background-color:black !important;
color:#FFD4CA;
}
.subnav .inner,
.medianav ul,
.section.explore ul,
.section.explore ul li{
border-color:#404040;
}
.section.explore a h3,
.backlink a{
color:#FFD4CA;
}
.section.explore a h3:after{
content:" ";
display:inline;
color:inherit;
/* width:3rem; */
padding-right:1.75em;
/* height:1.75rem; */
background:url('data:image/svg+xml,') transparent no-repeat right center / 1.125em;
transition:padding .25s ease-in-out 0s;
}
/* to get the arrow to not stick out, while still sticking to last word */
/* needs a ') transparent no-repeat left bottom / 2rem;
transition:transform .25s ease-in-out 0s;
}
.section.explore a:focus h3,
.section.explore a:hover h3,
.section.explore a:active h3,
.backlink a:focus,
.backlink a:hover,
.backlink a:active{
color:white;
}
.section.explore a:focus h3:after,
.section.explore a:hover h3:after,
.section.explore a:active h3:after{
padding-right:2em;
background:url('data:image/svg+xml,') transparent no-repeat right center / 1.125em;
}
.backlink a:focus:before,
.backlink a:hover:before,
.backlink a:active:before{
transform:translateX(-.25em);
background:url('data:image/svg+xml,') transparent no-repeat left bottom / 2rem;
}
/* links styles */
#nav a,
.subnav ul li a,
#crumbs a,
.medianav ul li a,
.person a,
.problocks .pblock a,
.productionlogo a,
.explore a,
.backlink a,
#colophon a{
text-decoration:none;
}
.person a span.name{
text-decoration:underline;
}
/* fonts */
body,input,textarea{
font-family:'Router',serif;
font-size:100%;
}
strong{
font-weight:500;
}
h1.site-title,
p.site-title{
font-size:3rem;
line-height:1;
margin-bottom:0
}
h1,
h2.sectionheadinglarge{
font-size:3rem;
font-weight:400;
text-transform:uppercase;
line-height:1.2;
margin-bottom:.1em;
}
.home h1.page-title{
text-align:center;
}
/* h2s in page content look the same as section headings */
/* h3s depend on where they are */
h2{
font-size:1.75rem;
font-weight:400;
line-height:1.2;
margin-bottom:.9em;
}
.page-content h2,
h2.sectionheading,
.credits h2,
.boc h2,
#tourdates h2{
text-transform:uppercase;
}
.problocks .pblock a h2{
font-size:3rem;
text-transform:uppercase;
margin-bottom:0;
}
.page-content .outer > .inner > h2,
.page-content .outer > .inner > .intro{
margin-top:1em;
}
.page-content .outer.firstblock > .inner > h2:first-child,
.page-content .outer.firstblock > .inner > .intro:first-child{
margin-top:0;
}
h3,
.creditsnew .boc h2{
font-size:1.5rem;
font-weight:500;
text-transform:none;
line-height:1.2;
margin-bottom:1.2em;
}
.timetableblock h3{
margin-bottom:0;
}
h4,h5,h6{
font-size:1.125rem;
font-weight:500;
line-height:1.5;
margin-bottom:0;
}
.creditsnew h4{
margin-bottom:1.2em;
}
h2.page-subtitle{
font-size:1.5rem;
font-weight:400;
line-height:1.5;
margin-bottom:.75em;
}
.boc h2{
padding-top:1em;
}
.itempost h2,
.itempost h3,
.itempost h4{
font-size:1.25rem;
text-transform:none;
line-height:1.5; /* same line-height as paragraph text, for alignment */
margin-bottom:.5em;
}
.itempost h2{
font-weight:500;
}
.itempost h3,
.itempost h4{
font-weight:400;
}
.peopleblock h3{
font-size:1.25rem;
font-weight:400;
line-height:1.5;
}
.peopleblock h3 .role{
text-transform:uppercase;
}
p,ul,ol{
font-size:1.125rem;
font-weight:400;
line-height:1.5;
margin-bottom:1.5em;
}
.itempost p,
.itempost ul,
ul.tourdates,
.creditsblock p,
.creditsblock ul{
font-size:1.25rem;
}
.creditsblock p.role{
text-transform:uppercase;
margin-bottom:0;
}
.creditsblock ul.cc{
margin-bottom:0;
/* there is already a margin from the gap on flex */
}
.problocks .pblock a p{
font-size:1.125rem;
font-weight:500;
text-transform:uppercase;
line-height:1.2;
padding-top:.25em;
margin-bottom:0;
}
.problocks .pblock a .creditoverlay{
font-size:.875rem;
font-weight:400;
line-height:1.2;
}
.digitalcontentlinks a,
.digitalcontentlinks span{
font-weight:500;
}
figcaption,
.imgbox p.caption,
.slideimgbox p.caption,
.videowrapper p.caption,
.sliderwrapper p.caption,
.sliderwrapper p.slidercredits,
.smalltext p,
.smalltext ul,
.smalltext ol{
font-size:1rem;
}
#nav ul{
font-size:1.125rem;
font-size:clamp(1rem,1.2vw,1.125rem);
font-weight:500;
text-transform:uppercase;
margin-bottom:0;
}
.subnav ul{
text-transform:uppercase;
margin-bottom:0;
}
.subnav ul li.current{
font-weight:500;
}
#crumbs{
font-size:.875rem;
font-weight:400;
}
#crumbs a{
font-weight:500;
}
p.year{
font-size:1rem;
font-weight:400;
}
.intro p,
.intro ul,
.intro ol{
font-size:1.75rem;
line-height:1.2;
text-transform:uppercase;
margin-bottom:1.25em;
}
.intro.regularcase p,
.intro.regularcase ul,
.intro.regularcase ol{
text-transform:none;
}
.pullout p{
font-size:1.5rem;
}
.quotebox p.stars{
font-size:2.75rem;
font-size:1.8125rem;
line-height:1.5;
margin-bottom:0;
}
.quotescolumns .quotebox p.stars{
font-size:1.55rem;
}
.quotesslider .quotebox p.stars{
font-size:4.5rem;
font-size:3.15rem;
}
.quotebox p.quote{
font-size:1.5rem;
font-size:1.375rem;
font-size:1.25rem;
font-weight:300;
line-height:1.5;
margin-bottom:.5em;
}
.quotescolumns .quotebox p.quote{
font-size:1.125rem;
font-weight:400;
}
.quotesslider .quotebox p.quote{
font-size:2rem;
font-size:1.4rem;
font-weight:400;
}
.centerthis .quotebox *{
text-align:center;
}
.introquote{
margin-bottom:2.25rem;
/* to allow the quote text itself not to have a margin */
}
.intro p.quote{
margin-bottom:.15em;
}
.intro p.byline,
.quotebox p.byline{
font-size:1rem;
text-transform:uppercase;
padding-top:.5em;
margin-bottom:1.5em;
}
.quotebox.singlequote p.byline{
font-size:.875rem;
font-weight:300;
padding-top:0;
margin-bottom:0;
}
.quotescolumns .quotebox p.byline{
font-size:.9375rem;
}
.quotesslider .quotebox{
text-align:center;
}
.button{
font-size:1.125rem;
line-height:1.5;
margin-bottom:1.5em;
}
.textlink{
font-size:1.125rem;
line-height:1.5;
margin-bottom:1.5em;
}
.productionlogo{
font-size:1.5rem;
font-weight:500;
line-height:1.5;
margin-bottom:1.5rem;
}
p.caption{
padding-top:.5em;
}
.medianav ul{
font-size:1.5rem;
text-transform:uppercase;
}
ul{
list-style:none;
}
.page-content ul li{
padding-left:1em;
position:relative;
margin-bottom:.5em; /* was 1em */
}
.page-content ul li:before{
content:"\2022 ";
display:inline-block;
position:absolute;
left:0;
top:0;
}
.page-content .logos li,
.page-content .tourdates li,
.page-content .digitalcontentlinks li,
.page-content .mediaslider li,
.page-content .medianav ul li,
.page-content ul.cc li{
padding-left:0;
margin-bottom:0;
}
.page-content .logos li:before,
.page-content .tourdates li:before,
.page-content .digitalcontentlinks li:before,
.page-content .mediaslider li:before,
.page-content .medianav ul li:before,
.page-content ul.cc li:before{
display:none;
}
.page-content .digitalcontentlinks{
columns:3;
gap:4rem;
}
.page-content .digitalcontentlinks li{
break-inside:avoid;
margin-bottom:1em;
}
.section.explore h3,
.previousproductions .pblock h3{
font-size:1.75rem;
font-weight:400;
text-transform:uppercase;
line-height:1.2;
padding-top:.9em;
margin-bottom:.5em;
}
.backlink{
font-size:1.5rem;
text-transform:uppercase;
line-height:1;
}
#colophon .fcols{
font-size:.8125rem;
line-height:1.6;
}
#colophon .fcol1 p{
margin-bottom:.5em;
}
#colophon .fgroup2{
font-size:clamp(0.9375rem,1vw,1.125rem);
line-height:1.3;
}
#colophon .fgroup2 .fcols,
#colophon h3,
#colophon p,
#colophon ul{
font-size:inherit;
line-height:inherit;
}
#colophon h3{
text-transform:uppercase;
margin-bottom:0;
}
#colophon .fgroup4 h3{
font-weight:400;
margin-bottom:1em;
}
#nav span.gcc{
font-weight:400;
}
h3 span.gcc{
font-weight:200;
}
/* layout */
#nav,
.outer,
.widebox p.caption{
padding-left:clamp(1rem,8vw,3rem);
padding-right:clamp(1rem,8vw,3rem);
}
.page-content > .outer.colour0:last-child{
padding-bottom:4rem;
/* TEMPTEST as replacement of padding-bottom on .site-main */
}
.inner{
max-width:102.5rem;
margin:0 auto;
}
.page-content .inner{
padding:1px 0; /* to keep colours and margins inside */
}
.page-header .inner,
.inpage-header .inner{
padding-top:2rem;
}
.home .page-header .inner{
padding-top:5rem;
max-width:94rem;
}
.home .page-content .inner{
max-width:66rem;
}
.timelinewrap .inner{
max-width:64.5rem;
}
.bgcolourspacer{
height:2rem;
}
.colour1 .inner,
.colour2 .inner,
.credits .inner,
.trailer .inner,
.media .inner{
padding-top:2.5rem;
padding-bottom:2.5rem;
}
.popup{
position:fixed;
top:-100%; /* changes to 0 once javascript loads */
left:0;
width:100%;
height:100%;
padding:2vw 4vw;
z-index:10002;
display:flex;
align-items:center;
justify-content:center;
transition:all 1s ease-in-out 0s;
}
.popup.showpopup{
top:0;
}
.popinside{
position:relative;
z-index:100003; /* so that we can click in it without the popup disappearing */
padding:4rem 2rem 2rem 2rem;
max-height:calc(100% - 2vw);
width:92vw;
max-width:72rem;
overflow:auto;
}
.tourdates{
/* border-width:1px 0 0 0; */
border-width:0;
border-style:solid;
/* margin-top:2.25em; */
margin-bottom:1em;
}
.tourdates li{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:1em;
padding:1.4em 0;
/* border-width:0 0 1px 0; */
border-width:0;
border-style:solid;
}
.tourdates .pastdates li{
gap:0 1em;
padding:.8em 0 .6em 0;
border-width:1px 0 0 0;
}
.tourdates span{
display:block;
}
.tourdates li > span{
/* margin-bottom:1em; */
/* taken care of by 'gap' */
}
.tourdates span.date{
width:min(18.75rem,28vw);
}
.tourdates span.venue{
width:min(14rem,21vw);
}
.tourdates span.phone{
width:min(14rem,15vw);
}
.tourdates.pastdates span.phone,
.tourdates.pastdates span.book{
/* width:0; /* not display none, because we want the venue to not be at the right on wider screens */
/* removed the zero width (and added the book space) because the columns should stay underneath the upcoming columns */
height:0;
overflow:hidden;
}
.tourdates span.book{
width:min(7.5rem,7.5rem);
}
.tourdates span.city,
.tourdates a.ticketlink{
text-transform:uppercase;
}
.tourdates a.ticketlink{
padding-right:2rem;
background-image:url('data:image/svg+xml,');
background-repeat:no-repeat;
background-position:right center;
background-size:1.25rem auto;
}
div.tourdatessmalltext{
margin-bottom:3rem;
}
.backlink .inner{
padding:5rem 0;
}
#page{
/* padding-top:5rem; /* same as #masthead height */
}
#nav{
position:fixed;
top:0;
left:0;
width:100%;
height:0;
min-height:5rem; /* enough height for logo + nav menus */
transition:height .5s ease-in-out 0s;
z-index:10000;
}
.admin-bar #nav{
top:32px;
}
@media(max-width:782px){
.admin-bar #nav{
top:46px;
}
}
#nav .inner{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:flex-start;
height:100%;
}
.site-branding{
width:6.75rem;
order:0;
position:relative;
top:1.625rem; /* its middle line should cross the bottom of the bar */
}
.site-branding a,
.site-branding svg{
display:block;
}
#toggle{
display:none;
order:1;
}
#navcontent{
order:2;
}
.site-nav{
display:flex;
justify-content:flex-end;
height:100%;
align-items:center;
width:calc(100% - 7rem);
text-align:right;
}
.site-nav .main-navigation,
.site-nav .mina-navigation ul{
width:100%;
}
.site-nav li{
display:inline-block;
margin-left:clamp(1rem,3vw,2.75em);
margin-left:clamp(.75em,2.25vw,2.75em);
}
.subnav .inner{
padding:1.75em 0 .75em 0;
border-style:solid;
border-width:0 0 1px 0;
}
.subnav ul li{
display:inline-block;
margin-right:clamp(1.5em,4vw,2.5em);
}
#crumbs{
padding:2.25em 0 .5em 0;
}
#crumbs a{
margin-right:1em;
margin-left:1em;
}
#crumbs a:first-child{
margin-left:0;
}
#crumbs span.current{
margin-left:1em;
}
.page-header,
.inpage-header,
.prevprodintro{
margin-bottom:2.1rem;
}
.single-gcc_production .page-header{
margin-bottom:.1rem; /* 2rem comes from padding top on inpagenav */
}
.inpagenav{
margin-bottom:3rem;
}
.medianav ul li{
display:inline-block;
margin-right:1.75rem;
}
/* 96px + 740px + 64px + 740px = 1640px */
.page-content .inner{
padding-left:6rem;
position:relative;
}
.page-content .widesection .inner{
padding-left:0;
}
.page-content .inner .centerthis{
/* add right side padding to combat left side padding from .inner */
padding-right:6rem;
}
.page-content .widesection .inner .centerthis{
padding-right:0;
}
.home .page-content .inner .centerthis{
padding-right:0;
}
h2,
.inner.hasline{
position:relative;
}
.page-content h2:before,
.inner.hasline:before{
content:" ";
display:block;
position:absolute;
left:0;
top:.75rem;
width:4rem;
height:1px;
}
.page-content h2:before{
left:-6rem;
}
/* situations where an h2 in page content does not get a line: */
.inner.hasline > h2:first-child:before,
.inner.hasline > .columns > .col1 > h2:before,
.col2 h2:before,
.col3 h2:before,
.col4 h2:before,
.page-content .boc h2:before,
.page-content .itempost h2:before{
display:none;
}
.page-id-185 .inner.hasline:before{
display:none !important;
}
.page-id-185 .quotebox.singlequote{
position:relative;
}
.page-id-185 .quotebox.singlequote:before{
content:" ";
display:block;
position:absolute;
left:-6rem;
top:3rem;
width:4rem;
height:1px;
background:white;
}
.home .page-content .inner{
padding-left:0;
}
.home .inner.hasline:before{
display:none;
}
.intro,
.pullout,
.quotebox,
.columnlimited{
max-width:57.5rem;
}
.quotebox{
padding:1.5rem 0;
padding:.75rem 0;
}
.centerthis .quotebox{
margin:0 auto;
}
.outer .inner .quotebox.singlequote:first-child{
padding-top:2.5rem;
}
.outer .inner .columns .col > .quotebox.singlequote:first-child{
padding-top:0;
}
.outer .inner .quotebox.singlequote:last-child{
padding-bottom:2.75rem;
}
.quotesslider .quotebox{
padding:1.5rem max(0px,calc((100% - 66.5rem)/2));
max-width:100%;
}
.quotescolumns{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.quotescolumns .quotebox{
width:46%;
}
.columns{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.col1,
.col2{
width:48%;
max-width:46.25rem;
}
.single-gcc_bio .columns .col2{
max-width:45rem;
}
.button a{
display:inline-block;
width:fit-content;
padding:.5em 2em;
border-width:1px;
border-style:solid;
}
.bocgroup{
border-style:solid;
border-width:0 0 1px 0;
}
.boc{
border-style:solid;
border-width:1px 0 0 0;
}
.creditsnew .boc:last-child,
.boc.peopleblock:last-child{
border-bottom-width:1px;
}
.bocin,
.showmorecontent{
height:auto;
}
.boc.closed .bocin,
.showmore.closed .showmorecontent{
height:0;
overflow:hidden;
}
.people{
display:flex;
flex-wrap:wrap;
margin-left:-1.25rem;
margin-right:-1.25rem;
}
.people .person{
width:17.5rem;
max-width:50%;
padding:0 1.25rem;
margin-bottom:2.5rem;
}
.people .portrait{
margin-bottom:1.25rem;
}
.people .portrait img{
display:block;
border-width:1px;
border-style:solid;
}
.people .peopletext{
padding:0 1.25rem;
}
.problocks{
display:flex;
flex-wrap:wrap;
margin-left:-1.3125rem;
margin-right:-1.3125rem;
}
.problocks .pblock{
width:50%;
padding:0 1.3125rem;
margin-bottom:2.625rem;
}
.productionsgrid .problocks .pblock{
width:33.33%;
}
.previousproductions .problocks .pblock{
width:33.33%;
}
/*
.productions .pblock:first-child{
width:100%;
}
*/
.productions .pblock:first-child .onlyonnarrow{
display:none;
}
.problocks .pblock a,
.problocks .pblock .imgwrap{
display:block;
position:relative;
}
.problocks .pblock a img{
display:block;
border-width:1px;
border-style:solid;
}
.problocks .pblock a .overlay img{
display:inline-block;
border-width:0;
}
.productionsgrid .problocks .pblock a .overlay *{
display:none;
}
.problocks .pblock a .creditoverlay{
position:absolute;
left:0;
bottom:0;
width:100%;
padding:.5em;
}
.problocks .pblock a .overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
background:rgba(0,0,0,.35);
}
.problocks .pblock .overlay *{
z-index:1;
}
.problocks .pblock a .overlay:before{
content:" ";
display:block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
}
.problocks .pblock a:focus .overlay:before,
.problocks .pblock a:hover .overlay:before,
.problocks .pblock a:active .overlay:before{
opacity:.35;
}
.problocks .pblock a:focus .overlay,
.problocks .pblock a:hover .overlay,
.problocks .pblock a:active .overlay{
background:transparent;
}
.productionlogo a,
.productionlogo span,
.productionlogo img{
display:block;
width:fit-content;
text-align:center;
margin:0 auto;
}
.productionlogo img{
margin-bottom:1rem;
}
.creditsblock{
display:flex;
flex-wrap:wrap;
gap:2rem;
margin-bottom:2rem;
}
.creditsblock .rolegroup{
width:13.25rem;
}
.workshopblocks{
/* max 4 columns */
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
gap:1.5rem;
}
.timetableblocks{
/* max 3 columns */
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
gap:4rem;
}
.workshopblock{
width:calc(25% - 1.125rem);
}
.timetableblock{
width:calc(33.33% - 2.7rem);
}
.medianav ul{
border-style:solid;
border-width:0 0 1px 0;
}
.imgbox{
max-width:100%; /* width is in html, depends on image width */
margin:0 auto 2rem auto;
}
.videowrapper{
width:100%;
max-width:67.875rem;
margin:0 auto 5rem auto;
}
.sliderwrapper{
width:calc(100% - 12vw);
max-width:67.875rem;
margin:0 auto 5rem auto;
}
#primary > .sliderwrapper:last-child{
margin-bottom:9rem;
/* TEMPTEST: 5 + 4 */
}
.slideimgbox p.caption,
.videowrapper p.caption,
.sliderwrapper p.caption,
.sliderwrapper p.slidercredits{
text-align:center;
}
.videobox{
width:100%;
height:0;
padding-top:56.25%;
position:relative;
}
.videobox iframe{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.videos{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.videos .videowrapper{
width:48%;
margin:0 0 2rem 0;
}
.columns .videos .videowrapper{
width:100%;
}
.logos{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:2rem;
}
.explore .inner{
overflow:hidden;
/* to keep the margins left/rigth inside */
padding-top:6.25rem; /* based on where it sits below blue block */
padding-bottom:2.5rem;
}
.explore ul{
display:flex;
flex-wrap:wrap;
margin-left:max(-3%,-3.125rem);
margin-right:max(-3%,-3.125rem);
}
.explore ul li{
width:33.33%;
}
.section.explore ul{
padding-top:2rem;
border-style:solid;
border-width:1px 0 0 0;
}
.section.explore ul li{
padding:0 min(3%,3.125rem);
border-style:solid;
border-width:0 0 0 1px;
}
.section.explore ul li:first-child{
border-width:0;
}
.section.explore ul li:nth-child(n+4){
padding-top:min(3%,3.125rem);
border-top-width:1px;
}
.section.explore ul li a{
display:block;
}
ul.quotesslider,
ul.mediaslider{
height:100%;
}
ul.quotesslider,
ul.mediaslider{
display:flex;
align-content:center;
align-items:center;
}
ul.mediaslider li div.slideimgbox.slidehasimage{
position:relative;
padding-top:56.25%;
}
ul.mediaslider li div.slideimgbox.slidehasimage .imageboxinslider{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-content:center;
}
ul.mediaslider li div.slideimgbox img{
margin:auto;
max-height:100%;
max-width:100%;
}
/* news & diary */
.itempost{
border-width:0 0 1px 0;
border-style:solid;
padding-bottom:1rem;
margin-bottom:2.5rem;
}
.itempost,
.itempost .dateloc,
.itempost .descinfo{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-content:baseline;
}
.itempost .dateloc{
width:max(20%, 14.5rem);
padding-right:2rem;
}
.itempost .descinfo{
width:calc(100% - max(20%, 14.5rem));
}
.itempost .itemdate,
.itempost .itemlocation{
width:100%;
}
.itemdate .time{
white-space:nowrap;
}
.itempost .iteminfolink a{
word-break:break-all;
}
.itempost .itemdesc{
width:69%;
padding-right:3rem;
}
.itempost .iteminfolink{
width:31%;
}
@media(min-width:1300px){
.type-gcc_diary .dateloc{
width:36%;
}
.type-gcc_diary .descinfo{
width:64%;
}
.type-gcc_diary .itemdate{
width:57%;
padding-right:2rem;
}
.type-gcc_diary .itemlocation{
width:43%;
padding-right:2rem;
}
.type-gcc_diary .itemdesc{
width:62%;
max-width:48.25rem; /* 740px + 2rem */
}
.type-gcc_diary .iteminfolink{
width:38%;
}
}
@media(max-width:1024px){
.itempost .itemdesc,
.itempost .iteminfolink{
width:100%;
padding-right:0;
}
}
@media(max-width:900px){
.itempost .dateloc,
.itempost .descinfo{
width:100%;
}
}
/* pagination */
/* kriesi */
.pagination{
text-align:center;
padding:3rem 0;
}
.pagepn{
text-indent:-250rem;
background-repeat:no-repeat;
background-position:center;
background-size:auto 1rem;
}
.pagination a,
.pagination span{
display:inline-block;
width:1.75rem;
height:1.75rem;
font-size:.875rem;
font-weight:600;
line-height:1.75rem;
text-decoration:none;
border-radius:1.75rem;
box-sizing:border-box;
padding-top:.1rem;
}
.pagination a.inactive{
opacity:0.5;
cursor:default;
}
.page-numbers{
color:inherit;
margin:0 .5rem;
}
.page-numbers:focus,
.page-numbers:hover,
.page-numbers:active,
.page-numbers.current{
background:#FFD4CA;
color:#000;
}
.page-prev{
margin-left:-.5rem;
margin-right:.5rem;
}
.page-next{
margin-right:-.5rem;
margin-left:.5rem;
}
#colophon .inner{
display:flex;
flex-wrap:wrap;
padding-top:3rem;
padding-bottom:3rem;
justify-content:space-between;
gap:2rem;
}
.fcols{
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
height:fit-content;
}
.fcols.fgroup1,
.fcolrow2,
.fcols.fgroup3,
.fcols.fgroup5{
width:100%;
}
.fcolrow2{
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
gap:1rem 1rem;
}
.fcols.fgroup2{
width:50em;
gap:1em clamp(2em,3.5vw,4em);
}
.fcolrow2 .fgroup4{
min-width:min-content;
gap:1em clamp(2em,4vw,4em);
}
.fcolrow2 .fgroup4 .fcol{
width:max-content;
}
#menu-social-nav{
padding-top:.2rem;
}
.social-nav li{
display:inline-block;
margin-right:.75rem;
}
.social-nav li a{
display:block;
width:1.75rem;
height:1.75rem;
background-position:center;
background-repeat:no-repeat;
overflow:hidden;
}
.social-nav li a span{
display:inline-block;
width:100%;
height:100%;
text-indent:1.75rem;
white-space:nowrap;
color:red;
}
.social-nav li.facebook a{
background-image:url('data:image/svg+xml,');
}
.social-nav li.x-twitter a{
background-image:url('data:image/svg+xml,');
}
.social-nav li.instagram a{
background-image:url('data:image/svg+xml,');
}
.social-nav li.youtube a{
background-image:url('data:image/svg+xml,');
}
.formbox{
width:100%;
display:flex
}
.formbox div.form-input,
.formbox div.form-submit{
position:relative;
display:inline-block;
height:2.5em;
box-sizing:border-box;
padding:0;
border-width:0;
border-style:solid;
overflow:hidden
}
.formbox div.form-input{
flex-grow:2
}
.formbox div.form-input input,
.formbox div.form-submit input{
height:100%;
width:100%;
box-sizing:border-box;
padding:.2em 1em
}
.formbox div.form-input input{
border-width:1px 0 1px 1px;
border-style:solid;
}
.formbox div.form-submit input{
border-width:1px;
border-style:solid;
cursor:pointer
}
#colophon .logos img,
#colophon .logos svg{
margin-right:1rem;
}
#colophon .logos img:last-child,
#colophon .logos svg:last-child{
margin-right:0;
}
/* webkit things */
input[type=text],
input[type=search],
input[type=button],
input[type=email],
input[type=submit],
textarea{
-webkit-appearance:none;
-webkit-border-radius:0;
}
*{
-webkit-text-size-adjust:100%;
}
/* Where placeholder needs to obey the styles */
/* fix the stupid placeholder colour */
/* separate rules, because: "a group of selectors containing an invalid selector is invalid". */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
font-family:"Montserrat",Arial,sans-serif;
font-size:.875rem;
color:#fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
font-family:"Montserrat",Arial,sans-serif;
font-size:.875rem;
color:#fff;
opacity:1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
font-family:"Montserrat",Arial,sans-serif;
font-size:.875rem;
color:#fff;
opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
font-family:"Montserrat",Arial,sans-serif;
font-size:.875rem;
color:#fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
font-family:"Montserrat",Arial,sans-serif;
font-size:.875rem;
color:#fff;
}
/* bxslider styles here, because it saves another server request and it's needed on almost all pages */
/* added to avoid showing controls when there is only one slide: */
.sliderwrapper.quotesnumber1{
margin-bottom:2rem;
}
#primary > .sliderwrapper.quotesnumber1:last-child{
margin-bottom:6rem;
/* TEMPTEST: 2 + 4 */
}
.sliderwrapper.quotesnumber1 .bx-controls{
display:none;
}
/** VARIABLES
===================================*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
position: relative;
margin-bottom:2rem;
padding:0;
*zoom: 1;
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.bx-wrapper img {
max-width:100%;
display:block;
}
.bxslider{
margin: 0;
padding: 0;
}
ul.bxslider {
list-style:none;
}
.bx-viewport {
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
}
/** THEME
===================================*/
.bx-wrapper {
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -2rem;
width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 3rem;
/* background: url('../img/bx_loader.gif') center center no-repeat #ffffff; */
/* if we need a loader image, it should be an avg code, not a file */
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #000;
top:calc(100% + 1rem);
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #fff;
text-indent: -9999px;
display: block;
width: 0.5rem;
height: 0.5rem;
margin: 0 0.1875rem;
outline: 0;
-moz-border-radius: .25rem;
-webkit-border-radius: .25rem;
border-radius: .25rem;
}
.bx-wrapper .bx-pager.bx-default-pager a:focus,
.bx-wrapper .bx-pager.bx-default-pager a:hover{
background: #FFD4CA;
}
.bx-wrapper .bx-pager.bx-default-pager a.active{
width:1.5rem;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
vertical-align: bottom;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager-item {
font-size: 0;
line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev,
.bx-wrapper .bx-next{
background-repeat:no-repeat;
background-color:transparent;
background-position:center;
background-size:80% auto;
}
.bx-wrapper .bx-prev {
left:max(calc((100% - 100vw) / 2 + clamp(1rem,8vw,3rem)), -11rem);
background-image:url('data:image/svg+xml,');
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
opacity:.8;
}
.bx-wrapper .bx-next {
right:max(calc((100% - 100vw) / 2 + clamp(1rem,8vw,3rem)), -11rem);
background-image:url('data:image/svg+xml,');
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
opacity:.8;
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -3.5%;
outline: 0;
width: 7%;
height: 0;
padding-top:7%;
text-indent: -9999px;
z-index: 999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: .625rem;
height: .6875rem;
outline: 0;
/* background: url('../img/controls.png') -86px -11px no-repeat; */
/* if we need a controls image, it should be an avg code, not a file */
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url('../img/controls.png') -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: center;
left:3rem;
width:calc(100% - 6rem);
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 2.5rem;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position:absolute;
bottom:0;
left:0;
text-align:center;
background:rgba(0,0,0,.4);
width:100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
display: block;
font-size: 1rem;
padding: 10px;
}
/* layout styles for lesser widths */
@media(max-width:1600px){
#colophon .fgroup2{
font-size:clamp(0.9375rem,1.27vw,1.125rem);
}
.fcols.fgroup2{
gap:1em clamp(2em,4.5vw,4em);
}
.fcolrow2 .fgroup4{
width:min-content;
}
}
@media(max-width:1400px){
/*
#colophon .logos img{
display:block;
margin-bottom:1rem;
margin-right:0;
}
*/
}
@media(max-width:1200px){
#colophon .fgroup2{
font-size:clamp(0.9375rem,1.8vw,1.125rem);
}
.fcols.fgroup2{
gap:1em clamp(2em,7.5vw,4em);
}
.fcolrow2{
flex-wrap:wrap;
}
.fcolrow2 .fgroup4{
width:fit-content;
}
}
@media(max-width:840px){
.fcols.fgroup2{
gap:1em clamp(1em,4vw,4em);
}
}
@media(max-width:1150px){
.site-branding,
#toggle{
position:fixed;
top:0;
}
.admin-bar .site-branding,
.admin-bar #toggle{
/* top:32px; */ /* this goes wrong with a #nav bar parent that uses background blur. */
/* Known problem with combination of positioning and background blur */
}
@media(max-width:782px){
/*
.admin-bar .site-branding,
.admin-bar #toggle{
top:46px;
}
*/ /* See above */
}
.site-branding{
width:clamp(4rem,15vw,6.75rem);
top:clamp(.5rem,2.3vw,1.625rem);
left:clamp(1rem,8vw,3rem); /* same as padding on .outer */
}
.site-branding svg{
height:clamp(4rem,15vw,6.75rem);
}
#toggle{
right:clamp(1rem,8vw,3rem); /* same as padding on .outer */
}
#nav{
min-height:1rem;
height:clamp(3rem,9vw,5rem);
transition:height .5s ease-in-out 0s;
/* overflow:hidden; */ /* can't do this, because of the logo that's sticking out */
}
#nav .inner{
align-items:flex-start;
}
.site-nav{
width:100%;
}
#toggle{
display:block;
width:clamp(1.5rem,5vw,3rem);
height:clamp(3rem,9vw,5rem); /* same height as #nav when #nav is closed */
order:1;
}
#toggle a{
display:block;
width:100%;
height:100%;
}
#toggle a span.burger{
display:block;
width:100%;
height:100%;
background-image:url('data:image/svg+xml,');
background-color:transparent;
background-repeat:no-repeat;
background-position:right center;
background-size:contain;
}
#toggle a.navisopen span.burger{
background-image:url('data:image/svg+xml,');
}
#navcontent{
display:none;
}
body.toggled-on{
overflow:hidden;
}
.toggled-on #nav,
#nav:target{
height:100%;
overflow:auto;
}
.toggled-on #navcontent,
#nav:target #navcontent{
display:block;
padding-top:5rem;
padding-bottom:5rem;
/* to make sure that even with the admin bar, there will be */
/* a scrollbar for the last items in the list */
}
.site-nav .navi{
width:100%;
margin-top:0;
margin-left:auto;
}
ul.nav-menu{
width:100%;
text-align:center;
margin-bottom:1rem;
}
.site-nav ul.nav-menu li{
display:block;
float:none;
width:100%;
margin-left:revert;
margin-right:revert;
}
.site-header ul.nav-menu li a{
display:block;
padding:1rem 0;
}
#social-navigation ul{
text-align:center;
}
#social-navigation ul li{
float:none;
display:inline-block;
padding:0 .3rem;
}
#nav .navisopen,
#nav:target .navisclosed,
.toggled-on #nav .navisclosed{
display:none;
}
#nav .navisclosed,
#nav:target .navisopen,
.toggled-on #nav .navisopen{
display:block;
}
}
@media(max-width:1000px){
.explore ul li,
.productionsgrid .problocks .pblock,
.previousproductions .problocks .pblock{
width:50%;
}
.productionsgrid .problocks .pblock:first-child{
width:100%;
}
.explore ul li:nth-child(3){
display:none;
}
.explore.blocks6 ul li:nth-child(3){
display:block;
}
.page-content .digitalcontentlinks{
columns:2;
}
.explore ul li:nth-child(n+3){
padding-top:min(3%,3.125rem);
border-top-width:1px;
border-top-style:solid;
}
}
@media(max-width:890px){
.problocks .pblock{
width:100%;
}
.productions .pblock:first-child .onlyonwide{
display:none;
}
.productions .pblock:first-child .onlyonnarrow{
display:block;
}
}
@media(max-width:884px){
.tourdates li span.date,
.tourdates li span.phone{
width:calc(65% - 2rem);
}
.tourdates li span.venue,
.tourdates li span.book{
width:35%;
}
}
@media(max-width:767px){
.page-content .inner{
padding-left:0;
}
.page-content .inner .centerthis{
padding-right:0;
}
.page-content h2:before,
.inner.hasline:before,
.page-id-185 .quotebox.singlequote:before{
content:" ";
display:block;
position:static;
width:4rem;
height:1px;
margin-bottom:1rem;
}
.single-gcc_bio .inner.hasline:before{
display:none;
}
.single-gcc_bio .columns .col2{
order:-1;
margin-bottom:1.875rem;
}
.single-gcc_bio .columns .col1:before{
content:" ";
display:block;
position:static;
width:4rem;
height:1px;
background:white;
margin-bottom:1rem;
}
.col1,
.col2{
width:100% !important;
max-width:100% !important;
}
.single-gcc_bio .columns .col2 img{
margin:0 auto;
}
.videos .videowrapper{
width:100%;
}
}
@media(max-width:670px){
.fcolrow2 .fgroup4,
.fcolrow2 .fgroup4 .fcol{
width:auto;
}
.fcolrow2 .fgroup4 .fcol img{
margin-bottom:1em;
}
}
@media(max-width:568px){
.quotescolumns .quotebox{
width:100%;
}
.page-content .digitalcontentlinks{
columns:revert;
}
.explore ul li,
.productionsgrid .problocks .pblock,
.previousproductions .problocks .pblock{
width:100%;
}
.explore ul li:nth-child(3){
display:block;
}
.section.explore ul li{
padding-top:min(3%,3.125rem);
border-width:1px 0 0 0;
}
.section.explore ul li:first-child{
padding-top:0;
border-top-width:0;
}
}
@media(max-width:580px){
.tourdates.pastdates li{
gap:1rem;
}
.tourdates li span.date,
.tourdates li span.phone,
.tourdates li span.venue,
.tourdates li span.book{
width:100%;
}
.tourdates li span.hidden{
display:none;
}
}
@media(max-width:540px){
.fcolrow2{
flex-wrap:wrap;
}
}
@media(max-width:500px){
#masthead.hasimg,
body:not(.home) #masthead .mhimgmob{
/* padding-top:177.78% !important; */ /* overwriting HTML */
padding-top:125% !important; /* overwriting HTML */
}
/* temp style */
.home #masthead.hasimg{
padding-top:0 !important;
padding-left:0;
padding-right:0;
}
.home #masthead .mhimgmob{
position:relative;
}
#masthead .mhimgmob,
.photocredits .mhmobcred{
display:block;
}
#masthead .mhimg,
.photocredits .mhcred{
display:none;
}
}
@media(max-width:430px){
.people .person,
.people .peopletext{
width:100%;
max-width:100%;
}
}
/* font-sizes for lesser widths */
@media(max-width:1460px){
h1{
font-size:clamp(1.5rem,3.3vw,3rem);
}
h2{
font-size:clamp(1.5rem,1.9vw,1.75rem);
}
h2.page-subtitle{
font-size:clamp(1.25rem,1.75vw,1.5rem);
}
.problocks .pblock a h2{
font-size:2.375rem;
}
.section.explore h3,
.previousproductions .pblock h3{
font-size:clamp(1rem,1.9vw,1.75rem);
}
.peopleblock h3{
font-size:clamp(1rem,1.5vw,1.25rem);
}
.problocks .pblock a p{
font-size:1rem;
}
.intro p,
.intro ul,
.intro ol{
font-size:clamp(1.5rem,1.9vw,1.75rem);
}
.quotebox p.stars{
font-size:clamp(2.5rem,10vw,2.75rem);
font-size:clamp(1.66rem,6.66vw,1.8125rem);
}
.quotesslider .quotebox p.stars{
font-size:clamp(3rem, 12vw, 4.5rem);
}
.quotesslider .quotebox p.quote{
font-size:clamp(1.25rem, 5vw, 2rem);
}
}
@media(max-width:1000px){
ul.tourdates{
font-size:1.125rem;
}
.section.explore h3,
.previousproductions .pblock h3{
font-size:clamp(1rem,2.6vw,1.75rem);
}
}
@media(max-width:884px){
ul.tourdates{
font-size:1.25rem;
}
}
@media(max-width:650px){
ul.tourdates{
font-size:1.125rem;
}
}
@media(max-width:580px){
ul.tourdates{
font-size:1.25rem;
}
}
@media(max-width:568px){
.section.explore h3,
.previousproductions .pblock h3{
font-size:clamp(1rem,5vw,1.75rem);
}
}
@media(max-width:430px){
h1,
h2{
font-size:1.5rem;
}
h2.page-subtitle{
font-size:1.25rem;
}
.problocks .pblock a h2{
font-size:2.375rem;
}
.section.explore h3,
.previousproductions .pblock h3{
font-size:1.5rem;
}
.peopleblock h3{
font-size:1rem;
}
p,ul,ol{
font-size:1rem;
}
.intro p,
.intro ul,
.intro ol{
font-size:1.5rem;
}
.quotebox p.stars{
font-size:2.5rem;
font-size:1.66rem;
}
.quotebox p.quote{
line-height:1.25;
}
.quotesslider .quotebox p.stars{
font-size:3rem;
}
.quotesslider .quotebox p.quote{
font-size:1.25rem;
line-height:1.5;
}
}