* {
    box-sizing: border-box;
}

html{scroll-behavior: smooth}
html, body{width:100%; height: 100%; margin: 0; padding:0; box-sizing: border-box}
body{font-family: var(--font-body); position: relative; font-size:16px; overflow-x: hidden; background-color: var(--light-grey); color: var(--text-color)}

body.no-scroll {
    overflow: hidden;
    height: 100vh; /* prevents mobile bounce issues */
}

div, ul, li{position: relative; box-sizing: border-box}

p{line-height: 1.4}
p:empty{display:none}
a{transition:all 300ms ease; color: var(--link-color)}
a:hover{; color: var(--red)}

h1, h2{font-family:var(--font-heading); padding: 0; margin: 0; font-weight: 500}
h2, h3, h4, h5{padding: 0; margin: 0; font-weight:500; color: var(--heading-color)}

hr{max-width: 300px; margin: 40px auto; border-radius: 2px; border:2px solid var(--pink)}

input{box-sizing: border-box}
input[type="text"], input[type="email"], input[type="number"], input[type="password"]{padding:11px; border:1px solid #000} 
input[type=submit]{background: var(--pink); color: #fff; font-size:1rem}
textarea{font-family: var(--font-body); box-sizing: border-box; padding: 10px}

header{background-color: var(--dark-grey); color: #fff; padding: 30px}
header > div{max-width: var(--content-width); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap:wrap}
header > div > div:first-of-type{cursor:pointer; transition:opacity 300ms ease}
header > div > div:first-of-type:hover{opacity:0.8}
header h2{color:#fff; text-transform: uppercase; padding:0; margin: 0; font-size:1.2rem; line-height: 1.2}
header h3{color:#fff; padding:0; margin: 0; font-size:1rem; line-height: 0.9rem}
header {
  position: sticky;
  top: 0px;
  z-index: 11; /* keeps it above other content */
}

.section-title{background-color: var(--mid-grey); padding: 15px 30px}
.section-title h2{max-width: var(--content-width); margin: 0 auto; font-size:1rem; font-weight:400; text-transform: uppercase}
.section-title{
	position: sticky;
  top: 112px;
  z-index: 10; /* keeps it above other content */
}

.section-title-work{padding: 15px 0 0}
.section-title-work h2{padding-bottom: 15px}
.section-sub-title{background-color: #d5d6d6; padding: 15px}
.section-sub-title > div{max-width: var(--content-width); margin: 0 auto; font-size:1rem; font-weight:400; text-align: right}
.section-sub-title a{color:var(--dark-grey); opacity: 0.6; text-decoration: none}
.section-sub-title a.active{opacity: 1}

audio{margin: 30px 0}
audio::-webkit-media-controls-panel {
  background-color: var(--pink);
}
audio::-webkit-media-controls-play-button {
  background-color: var(--pink);
  border-radius: 50%;
}

audio::-webkit-media-controls-timeline {
  background-color: var(--pink);
}

.flex{display: flex; justify-content: center; align-items: center; flex-wrap: wrap}

#splash{width:100vw; height: 100vh; background: var(--dark-grey); position: relative; color: #fff; text-shadow:2px 2px 1px rgb(0,0,0,0.8); transition: height 2s ease-in;overflow: hidden;}
#splash.narrow{width:100vw; height: 50vh; }
#splash h1{color: #fff; padding:0; margin: 0; font-size:3rem; line-height: 1; transition: all 2s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0.5s;}
#splash h1.start{opacity:0; transform:translate(-100px, 0)}
#splash h2{color: #fff; padding:0; margin: 0; font-size:2.4rem; line-height: 1; font-weight:400; transition: all 2s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 1s;}
#splash h2.start{opacity:0; transform:translate(100px, 0)}
#splash .splash-overlay{width:100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top:0; left:0; z-index: 2}
#splash .splash-overlay > div{text-align: center}
#splash .splash-carousel{position: absolute; top:0; left:0; width:100%; height: 100%; z-index: 1}
#splash .splash-carousel > div{width:100%; height: 100%; position: absolute; top:0; left:0}
#splash .splash-carousel > div > img{object-fit: cover; object-position: center; width:100%; height: 100%}

.splash-carousel {
  position: relative;
  width: 100%;
  height: 500px; /* adjust to suit your layout */
  overflow: hidden;
}

.splash-carousel > div {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.splash-carousel > div.active {
  opacity: 1;
  z-index: 2;
}

.splash-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


#splash-play{background-color: var(--red); border-radius:100px; aspect-ratio:1/1; display:flex; justify-content: center; align-items: center; width:160px; margin: 15px auto 0; cursor:pointer; transition: background-color 300ms ease; font-weight:500; font-size:1.8rem}
#splash-play:hover{background-color: var(--link-color)}

#mobnavbutton{width:30px; position: fixed; right:15px; top:20px; transition:all 300ms ease; cursor:pointer; text-align: center; z-index: 30; display: none}
#mobnavbutton > div{margin: 0 auto 5px; transition:all 300ms ease; border:1px solid #fff}

#mobnav{width:100vw; height: 100vh; position:fixed; left:0; top:0; background: var(--grey); color: var(--light-grey); z-index: 20;display: none; padding: 50px 0 0}
#mobnav ul{list-style: none; padding: 0; margin: 0}
#mobnav li{display: block}
#mobnav a{display:block; padding:15px 30px; background-color: var(--grey); color: var(--light-grey); text-decoration: none}

#header-nav .menu-main-menu-container{}
#header-nav .menu-main-menu-container {text-align: center; margin: 0 auto; padding: 15px}
#header-nav .menu-main-menu-container > ul{list-style: none; padding: 0; margin: 0; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; grid-gap: 25px}
#header-nav .menu-main-menu-container > ul > li{display: inline-block; padding: 0; margin:0; position: relative; cursor:pointer}
#header-nav .menu-main-menu-container > ul > li > a{color: var(--light-grey) !important; text-decoration: none; display: block; transition:all 400ms ease}
#header-nav .menu-main-menu-container > ul > li > a:hover{color:var(--link-color) !important}
#header-nav .menu-main-menu-container > ul > li > ul{position: absolute; top:60px; left:0; list-style: none; padding: 0; margin:0; border:1px solid #fff; background: #443b71; min-width:200px; display:none}
#header-nav .menu-main-menu-container > ul > li > ul.submenu-active{display: block}
#header-nav .menu-main-menu-container > ul > li > ul > li{padding: 0; margin: 0}
#header-nav .menu-main-menu-container > ul > li > ul > li > a {display: block; padding: 10px; text-decoration: none; text-align: left}

#header-nav .menu-item-has-children > a {position: relative}
#header-nav .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    vertical-align: middle;
}

.videowrapper{width:100%; position: relative; padding-bottom: 56%; margin: 0 auto 30px}
.videowrapper iframe{width:100%; height: 100%; position: absolute; top:0; left:0; border:0}

#scrollup{position: fixed; right:0; bottom:100px; font-size:2.4rem; background-color: var(--pink); color: #000; cursor: pointer; transition:all 600ms ease-in-out; width:50px; height: 50px; border-top-left-radius:5px; border-bottom-left-radius:5px; opacity: 1; box-shadow:-1px 1px 3px rgb(0,0,0,0.2)}
#scrollup i{position: absolute; top:7px; left:10px}
#scrollup:hover{color: var(--pink)}
#scrollup.notvisible{right:-60px; opacity: 0; transition:all 600ms ease-in-out}

#modal{position: fixed; width:100vw; height:100vh; max-height: 100vh; z-index: 1000; background: rgb(0,0,0,0.9); display: none; justify-content: center; align-items: center}
#modal > div{background:#fff; box-shadow:1px 1px 15px rgb(0,0,0,0.6); padding: 30px; width:100%; max-width: 900px; height: 90vh; position: relative; border-radius:5px}
#modal > div .fas{position: absolute; top:5px; right: 5px; font-size:1.8rem; cursor:pointer; transition:all 300ms ease; color: #000}
#modal > div .fas:hover{opacity: 0.8; transform:rotate(90deg)}
#modal h2{font-size:2rem; text-align: center}
#modalcontent{overflow: auto; height: 100%}
#modalcontent img{width:100%; max-width: 100%; margin: 30px 0}
#modalcontent h2{text-transform: uppercase; font-size:1.2rem; text-align: left}
#modalcontent h3{font-size:1rem; font-style: italic}
#modalcontent .videowrapper{margin: 30px 0}

#about{background-color: var(--dark-grey); color: var(--light-grey)}
#about .hp-section-inner{padding-bottom: 120px}

.awards-list{background: #fff; padding: 30px}
.awards-flex{display:flex; justify-content: center; align-items: stretch}
.awards-flex > div{border-bottom:1px solid var(--mid-grey); width:100%; padding: 10px}
.awards-flex > div:first-of-type{max-width: 300px}

.contact-flex{display: flex; justify-content: center; align-items: stretch; flex-wrap:wrap; grid-gap: 20px; margin: 40px 0}
.contact-flex > div{flex:1}
.contact-flex h3{border-bottom:2px solid var(--red); text-transform: uppercase; padding: 0 0 10px; margin: 0 0 30px}
.contact-details > div{padding:0 0 15px}
.contact-details a{color:var(--dark-grey)}
.contact-details a:hover{color: var(--link-color)}

.socials{font-size:1.2rem}
.socials > div{padding: 3px 0}
.socials a{text-decoration: none; color: var(--text-color)}
.socials a:hover{color:var(--link-color)}
.socials i{font-size:1.4rem; margin-right: 6px; transform:translate(0, 1px)}

footer{background-color: var(--dark-grey); color: var(--light-grey); padding: 30px}
footer > div{max-width:calc(var(--content-width) + 60px); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap:wrap}
footer > div > div{flex:1}
footer > div > div:last-of-type{text-align: right}

#news-slider{height:280px; position: relative}
#news-slider .news-item-flex{position: absolute; top:0; left:0; display: none}
#news-slider > .news-item-flex:first-of-type{display: flex}

.news-item-flex{display: flex; justify-content: space-around; align-items: stretch; font-size:0.9rem}
.news-item-flex > div{width:100%; max-width: 50%}
.news-item-flex > div:first-of-type{padding: 0 30px 0 0}
.news-item-flex > div:last-of-type{aspect-ratio:16/10}
.news-item-flex > div:last-of-type img{object-fit:cover; width:100%; height: 100%}
.news-item-flex h2{text-transform:uppercase; font-weight:400; font-size: 1.5rem; line-height: 1.2}
.news-item-flex h3{font-size:0.9rem}
.news-excerpt{padding:15px 0}
.news-content{display:none}
.news-opener{text-align: right}
.news-button{color:var(--link-color); cursor: pointer; transition:color 300ms ease}
.news-button:hover{color:var(--red)}

.news-arrow-flex{display: flex; justify-content: space-between; align-items: center; margin: 30px 0}
.news-arrow-flex > div{flex:1}
.news-arrow-flex > div:first-of-type{display:none}
.news-arrow-flex > div:last-of-type{text-align: right}
.news-arrow-flex a{color: black; text-decoration: none}

.work-flex{display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; grid-gap: 20px}
.work-flex > div{width:100%; max-width: 310px}
.work-thumb{aspect-ratio:16/10; cursor: pointer; position: relative; box-sizing: border-box; overflow: hidden}
.work-thumb img{object-fit: cover; width:100%; height: 100%; object-position: top}
.work-excerpt{padding:5px 0 30px; color: var(--dark-grey); position: relative}
.work-excerpt h2{text-transform: uppercase; font-size:1.1rem; font-weight:400}
.work-excerpt h3{font-style:italic; font-weight:400; font-size:0.9rem}
.work-thumb-circle{position:absolute; width:100%; height: 100%; top:0; left:0; background-image: url(/wp-content/themes/composer/images/circle-thumbnail.png); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; color: #ffffff; opacity: 0; transition:opacity 300ms ease; box-sizing: border-box}
.work-thumb-circle > div{text-align: center; color: #fff; font-size:1.8rem; box-sizing: border-box}
.work-thumb-circle:hover{opacity: 1}

.work-item{display: none}
.cat_tv{display: block}

.work-page{background-color: var(--grey); color:var(--light-grey); padding: 50px 30px; display: none}
.work-page > div{max-width: var(--content-width); margin: 0 auto}
.work-page h2{color: #fff; text-transform: uppercase; margin: 0}
.work-page h3{color: #fff; font-style:italic; font-size:0.9rem; margin: 0}
.back-to-work-link{color: var(--light-grey); padding: 30px 0 0; display: inline-block}

.work-item-flex{display: flex; justify-content: center; align-items: stretch; grid-gap: 30px}
.work-item-flex > div{width:100%}
.work-item-flex > div:first-of-type{font-size:0.9rem}
.work-item-flex > div:last-of-type{text-align:center; max-width: 340px}
.work-quote{color: var(--link-color); margin-bottom: 30px}
.work-quote-source{color: var(--dark-grey); font-size:0.9rem; font-style: italic}

.work-item-flex hr{border:0; border-top:1px solid var(--dark-grey); display: block; max-width: 90px; margin: 30px auto}
.work-prev-thumb{margin-bottom: 30px; max-width: 100%}
.work-credit-list{margin: 15px 0 30px}
.work-credit{display:flex; justify-content: flex-start; align-items: flex-start; margin: 4px 0}
.work-credit > div{width:100%}
.work-credit > div:first-of-type{max-width: 150px}

#about{background: var(--grey); font-size:0.9rem}
.biogButton{display: inline-block; clear: both; background-color:var(--light-grey); color:var(--dark-grey); cursor: pointer; padding: 10px 30px}
#briefBiog{}
#fullBiog{display:none; column-count: 2}
#fullBiogBack{display: none}

.border-top{border:0; border-top:1px solid var(--dark-grey); max-width: 100px; margin: 0 auto}

@media (max-width:900px) {

}
@media (max-width:800px) {
	#header-nav{display: none}
	#mobnavbutton{display: block}
	.section-title {top: 96px}
	.section-title-work h2{padding-left:30px}
	
	#news-slider{height: 550px}
	.news-item-flex{flex-direction: column-reverse; justify-content: center; margin: 0 auto}
	.news-item-flex > div{width:100%; max-width:100%; margin: 0 auto; }
	.news-item-flex > div:first-of-type{padding-top: 30px}
	#modal > div{height: 100vh; border-radius:0}
}

@media (max-width:700px) {
	#fullBiog{column-count: 1}
}

@media (max-width:600px) {
	
	.work-item-flex{flex-direction: column}
	.work-item-flex > div{max-width: 100%}
	
	.work-credit{width:100%; flex-direction: column}
	.work-credit > div{width:100%; min-width:100%; max-width: 100%}
	.work-credit > div:first-of-type{font-weight: 800}
	.work-credit > div:last-of-type{padding: 0 0 15px}
	
	
	.awards-flex{flex-direction: column}
	.awards-flex > div{max-width: 100%; border:0}
	.awards-flex > div:first-of-type{font-weight:700; padding: 0 0 5px}
	.awards-flex > div:last-of-type{padding:0 0 30px}
	.alignright{float:none; max-width:100%; margin: 0 auto 50px; display: block}
}