html {
 background-color:#0000;
 box-sizing:border-box;
 overflow:hidden;
 font-family:montserrat,sans-serif;
 font-size:24pt;
 color:#fff;
 scroll-behavior:smooth
}
#mainBody {
 width:100%;
 height:100%;
 display:flex
}
.creditsBody {
 height:100%;
 width:100%;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 position:relative
}

.fadeOut {
  opacity: 0;
  transition: 2s;
}

#creditsScroller {
 overflow-y:hidden;
 height:100%;
 position:relative
}
.columns .subTitle {
 padding-top:1em
}
.columns[data-columns="1"] {
 display:grid;
 grid-template-columns:repeat(1,1fr)
}
.columns[data-columns="2"] {
 display:grid;
 grid-template-columns:repeat(2,1fr)
}
.columns[data-columns="3"] {
 display:grid;
 grid-template-columns:repeat(3,1fr)
}
.columns[data-columns="4"] {
 display:grid;
 grid-template-columns:repeat(4,1fr)
}
.columns[data-columns="5"] {
 display:grid;
 grid-template-columns:repeat(5,1fr)
}
.columns[data-columns="6"] {
 display:grid;
 grid-template-columns:repeat(6,1fr)
}
.background {
 background-color:#000;
 opacity:1;
 background-position:center;
 background-repeat:no-repeat;
 background-size:cover
}
body {
 overflow-anchor:none;
 margin:0;
 position:absolute;
 top:0
}
.hidden {
 transition:.3s
}
#creditsCont {
 text-align:center;
 height:100%;
}
.running {
 cursor:none
}
.creditsSection {
 display:none;
 width:60vw;
 padding:0 calc(50% - 30vw);
 max-width:100%;
 top:0;
 background-repeat: repeat-y;
}
.creditsSection.active[data-type=fade] {
 max-height:100%;
 display:grid;
 align-items:center;
 height:100%
}
.creditsSection.active {
 display:block;
 overflow-y:auto
}
.creditsSection::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: var(--background-image);
  background-size: var(--background-size);
  background-position-x: var(--background-position-x);
  background-repeat: no-repeat;
}
.casparCG .creditsSection::before {
  z-index: -1;
}
.running .creditsSection::before {
  position: fixed;
}
.creditsSection[data-backgroundalign="false"] {
  --background-size: cover !important;
}
#creditsLogos {
 opacity:0;
 width:100%;
 height:100vh;
 top:0;
 left:0;
 position:fixed;
 display:flex;
 flex-direction:column;
 justify-content:center
}
#creditsLogoSingle,
#creditsLogoGroup {
 padding:0 24%;
 height:100%;
 display:flex
}
#creditsLogoSingle {
 padding:0 31%
}
#creditsLogoSingle img,
#creditsLogoGroup img {
 padding-left:3vw;
 padding-right:3vw
}
#creditsLogoGroup img {
 box-sizing:border-box
}
#creditsLogos .text {
 text-align:center;
 max-width:49%;
 margin:auto;
 margin-top:1em
}
#creditsLogos .block {
 justify-content:center;
 align-items:center
}
#creditsLogos .subTitle {
 margin:0
}
.imageGroup {
 width:60%;
 height:100%;
 display:flex;
 justify-content:space-around;
 padding:0 20%
}
.subTitle,
.role {
 font-weight:700;
 font-style:italic
}
.image~.names {
 margin-top:3em
}
.imageGroup .image~.image {
 margin-left:3em
}
.names {
 font-size:.8em;
 margin-top:3px;
 margin-bottom:3px
}
.name,
.role {
 border-radius:5px;
 transition:.2s;
 outline:2px ridge transparent;
 position: relative;
}
.title {
 font-size:1.2em;
 font-weight:700;
 padding-bottom:2em;
 padding-top:2em
}
.block {
 display:flex;
 flex-direction:column
}
.block[data-direction=columns] {
 flex-direction:row
}
.subTitle {
 padding-bottom:1em;
 padding-top:1em;
 font-size:.8em
}
.image~.subTitle {
 padding-top:1em
}
.pair {
 display:grid;
 margin: 10px;
 grid-template-areas: "role name";
 gap: 0.8em;
 grid-template-columns: 1fr 1fr;
}
.pair>.name,
.pair>.nameGroup {
 text-align:left;
 grid-area: name;
}
.pair>.role {
 text-align:right;
 grid-area: role;
 position: relative;
}


[data-flipped="true"] .pair {
  grid-template-areas: "name role";
}

[data-flipped="true"] .pair .name {
  text-align: right;
}

[data-flipped="true"] .role {
  text-align: left;
}

[data-rolealign="true"] .role {
  text-align: left;
}

[data-flipped="true"] [data-rolealign="true"] .role,
[data-flipped="true"][data-rolealign="true"] .role {
  text-align: right;
}

[data-namealign="true"] .pair .name {
  text-align: right;
}

[data-flipped="true"] [data-namealign="true"] .pair .name,
[data-flipped="true"][data-namealign="true"] .pair .name {
  text-align: left;
}

.text {
 margin-top:1em;
 font-size:.8em;
 white-space:break-spaces
}
.image {
 margin:auto!important;
 padding:5px;
 max-width:calc(100% - 10px);
 pointer-events:none
}
figure.content {
 flex:1;
 display:grid;
 place-items:center
}
.stay {
 opacity:1!important
}
.running .creditsSection {
 opacity:0
}
.running .active[data-type=scroll] {
 opacity:1;
 overflow:visible;
 height:auto !important;
 position:absolute
}
.running .blockContainer[data-type=scroll] {
 padding-top:100vh
}
.fade {
 animation-name:fade;
 animation-timing-function:ease
}
@keyframes fade {
 0% {
  opacity:0
 }
 20% {
  opacity:1
 }
 80% {
  opacity:1
 }
 100% {
  opacity:0
 }
}