#banner {
  position: absolute;
  display: block;
  color: white;
  background-color: #af2009;
  border: 1px solid #808080;
  cursor: pointer;
}
#banner .header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#banner > .sponsor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
#banner .chevron {
  z-index: 2;
}
#banner .chevron .white,
#banner .chevron .red {
  border-style: solid;
  position: absolute;
  border-color: transparent;
}
#banner .chevron .white-corner {
  content: '\00a0';
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
}
#banner .chevron .circle {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* copied from bootstrap button */
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
#banner .chevron .circle:hover {
  box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, 0.2);
}
#banner .chevron .circle svg {
  fill: white;
}
#banner .chevron.right {
  height: 100%;
}
#banner .chevron.right .white {
  border-left-color: white;
  left: 3px;
}
#banner .chevron.right .red {
  border-left-color: #af2009;
  left: 0;
}
#banner .chevron.right .white-corner {
  left: 0.25px;
  width: 2.75px;
  height: 100%;
}
#banner .chevron.down {
  width: 100%;
}
#banner .chevron.down .white {
  border-top-color: white;
  top: 3px;
}
#banner .chevron.down .red {
  border-top-color: #af2009;
  top: 0;
}
#banner .chevron.down .white-corner {
  top: 0.25px;
  height: 2.75px;
  width: 100%;
}
#banner .ads-for-good {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#banner .ads-for-good .gl-logo-svg {
  height: 100%;
}
#banner .ads-for-good .afg-text {
  text-align: center;
}
#banner .charities {
  z-index: 1;
  list-style: none;
  position: absolute;
  bottom: 0;
  right: 0;
}
#banner .charities .charity {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#banner .charities .charity {
  opacity: 0;
}
#banner .charities .charity:first-child {
  opacity: 1;
}
#banner.visible .charities .charity {
  animation-duration: 15s;
  animation-iteration-count: 2;
  animation-timing-function: ease-in-out;
  animation-fill-mode: none;
}
#banner.visible .charities .charity:nth-child(1) {
  animation-name: fade3a;
}
#banner.visible .charities .charity:nth-child(2) {
  animation-name: fade3b;
}
#banner.visible .charities .charity:nth-child(3) {
  animation-name: fade3c;
}
@keyframes fade3a {
  0% {
    opacity: 1;
  }
  23% {
    opacity: 1;
  }
  28% {
    opacity: 0;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade3b {
  0% {
    opacity: 0;
  }
  28% {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  56% {
    opacity: 1;
  }
  61% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade3c {
  0% {
    opacity: 0;
  }
  61% {
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
  89% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
}
#banner #end-card .brand > * {
  width: auto;
}
#banner #end-card .chooser .charity :not(.logo) {
  display: none;
}
#banner.mpu {
  width: 300px;
  height: 250px;
  font-size: 15px;
}
#banner.mpu .upper {
  height: 140px;
  border-bottom: 2px solid white;
  position: relative;
}
#banner.mpu .upper .bg-img {
  width: 110px;
  margin-left: 4px;
}
#banner.mpu > .sponsor,
#banner.mpu .charities {
  position: absolute;
  height: 100%;
  top: 0;
}
#banner.mpu > .sponsor {
  left: 0;
  width: 135px;
  padding: 5px 25px 5px 5px;
}
#banner.mpu .charities {
  right: 0;
  width: 170px;
}
#banner.mpu .charities .charity {
  padding: 3px;
  padding-left: 35px;
}
#banner.mpu .chevron {
  position: absolute;
  left: 125px;
  top: 0;
  width: 35px;
}
#banner.mpu .chevron .white,
#banner.mpu .chevron .red {
  top: 0;
  border-width: 69px 0 69px 35px;
}
#banner.mpu .chevron .circle {
  height: 40px;
  width: 40px;
  top: 70px;
  left: 8px;
}
#banner.mpu .lower {
  height: 108px;
  align-items: center;
  justify-content: space-around;
  padding: 10px 0;
}
#banner.mpu .lower .ads-for-good {
  height: 50px;
  width: 250px;
  font-size: 150%;
}
#banner.mpu .lower .ads-for-good .ident-svg {
  height: 44px;
}
#banner.mpu #end-card .brand,
#banner.mpu #end-card .good-loop {
  padding: 10px;
}
#banner.mpu #end-card .brand {
  height: 200px;
  padding-top: 75px;
}
#banner.mpu #end-card .brand .logo-header,
#banner.mpu #end-card .brand .thankyou {
  position: absolute;
  top: 0;
  height: 75px;
  padding: 5px;
}
#banner.mpu #end-card .brand .logo-header {
  left: 0;
  width: 120px;
}
#banner.mpu #end-card .brand .logo-header > :not(.sponsor) {
  display: none;
}
#banner.mpu #end-card .brand .thankyou {
  right: 0;
  width: 180px;
  line-height: 75px;
}
#banner.mpu #end-card .brand .chooser .chooser-list {
  padding-top: 0.5em;
}
#banner.mpu #end-card .brand .chooser .chooser-list .charity {
  height: 70px;
  width: 70px;
}
#banner.mpu #end-card .good-loop {
  height: 50px;
}
#banner.mpu #end-card .good-loop .find-out-more {
  width: 280px;
}
#banner.leaderboard {
  width: 728px;
  height: 90px;
  font-size: 14px;
}
#banner.leaderboard .header,
#banner.leaderboard .ads-for-good,
#banner.leaderboard .explain,
#banner.leaderboard .sponsor,
#banner.leaderboard .chevron,
#banner.leaderboard .charities {
  position: absolute;
}
#banner.leaderboard .header,
#banner.leaderboard .sponsor,
#banner.leaderboard .chevron,
#banner.leaderboard .charities {
  height: 100%;
}
#banner.leaderboard .header {
  left: 0;
  top: 0;
  width: 364px;
  align-items: flex-start;
}
#banner.leaderboard .header .ads-for-good {
  left: 15px;
  top: 10px;
  width: 225px;
  height: 40px;
}
#banner.leaderboard .header .explain {
  left: 15px;
  top: 60px;
}
#banner.leaderboard > .sponsor {
  width: 100px;
  left: 364px;
  padding: 5px 0;
}
#banner.leaderboard .chevron {
  right: 170px;
  width: 45px;
}
#banner.leaderboard .chevron .white,
#banner.leaderboard .chevron .red {
  border-width: 45px 0 45px 45px;
}
#banner.leaderboard .chevron .circle {
  height: 56px;
  width: 56px;
  top: 45px;
  left: -10px;
}
#banner.leaderboard .charities {
  top: 0;
  right: 0;
  width: 215px;
}
#banner.leaderboard .charities .charity {
  padding: 3px;
  padding-left: 45px;
}
#banner.leaderboard #end-card {
  flex-direction: row;
  font-size: 11px;
  padding-bottom: 0;
}
#banner.leaderboard #end-card .brand,
#banner.leaderboard #end-card .good-loop {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0;
  height: 100%;
}
#banner.leaderboard #end-card .brand {
  width: 70%;
  left: 0;
  padding-left: 170px;
  padding-right: 30px;
}
#banner.leaderboard #end-card .good-loop {
  padding: 25px;
  width: 30%;
  right: 0;
}
#banner.leaderboard #end-card .logo-header {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 160px;
  padding: 10px;
}
#banner.leaderboard #end-card .logo-header :not(:first-child) {
  display: none;
}
#banner.leaderboard #end-card .logo-header .sponsor {
  height: 70px;
  width: 140px;
}
#banner.leaderboard #end-card .chooser-list .charity {
  width: 40px;
  height: 40px;
}
#banner.leaderboard #end-card .find-out-more {
  font-size: 120%;
  right: auto;
  left: 1.25em;
}
#banner.leaderboard #end-card .tq-header {
  max-width: 75px;
  position: relative;
  top: -0.4em;
}
#banner.leaderboard #end-card .charity-details {
  padding: 0.25em 0;
}
#banner.leaderboard #end-card .charity-details .charity-name {
  display: none;
}
#banner.leaderboard #end-card .charity-details .tq-sponsor {
  display: inline-block;
}
#banner.leaderboard #end-card .charity-details .charity-logo,
#banner.leaderboard #end-card .charity-details .tq-sponsor {
  font-size: 80%;
}
#banner.leaderboard #end-card .charity-details .sponsor-text {
  font-size: 125%;
}
#banner.leaderboard #end-card .charity-details .tq-cta {
  padding: 0;
}
#banner.leaderboard #end-card .tq-sponsor {
  display: none;
}
#banner.leaderboard #end-card .donation-stats-item {
  max-width: 15em;
}
#banner.leaderboard #end-card .donation-stats-item .br {
  display: inline;
}
#banner.leaderboard #end-card .tq-left-side span {
  max-width: 40em;
}
#banner.leaderboard #end-card .ctas > :nth-child(n+2) {
  display: none;
}
#banner.billboard {
  width: 970px;
  height: 250px;
  font-size: 24px;
}
#banner.billboard .header,
#banner.billboard > .sponsor,
#banner.billboard .chevron,
#banner.billboard .charities {
  position: absolute;
  height: 100%;
  top: 0;
}
#banner.billboard .header {
  align-items: flex-start;
  left: 25px;
}
#banner.billboard .header .ads-for-good {
  width: 275px;
  height: 50px;
}
#banner.billboard .header .explain {
  margin-top: 20px;
}
#banner.billboard > .sponsor {
  left: 350px;
  width: 325px;
  padding: 10px 0px;
}
#banner.billboard .chevron {
  right: 255px;
}
#banner.billboard .chevron .white,
#banner.billboard .chevron .red {
  border-width: 125px 0 125px 45px;
}
#banner.billboard .chevron .circle {
  top: 125px;
  width: 56px;
  height: 56px;
}
#banner.billboard .charities {
  right: 0px;
  width: 255px;
}
#banner.billboard .charities .charity {
  padding: 3px;
  padding-left: 45px;
}
#banner.billboard #end-card {
  display: block;
  font-size: 20px;
  padding-bottom: 0;
}
#banner.billboard #end-card .brand,
#banner.billboard #end-card .good-loop {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0;
  height: 100%;
}
#banner.billboard #end-card .brand {
  width: 70%;
  left: 0;
  padding-left: 250px;
  padding-right: 50px;
}
#banner.billboard #end-card .good-loop {
  padding: 25px;
  width: 30%;
  right: 0;
}
#banner.billboard #end-card .logo-header {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
#banner.billboard #end-card .logo-header .sponsor:last-child {
  height: 66%;
}
#banner.billboard #end-card .logo-header .sponsor,
#banner.billboard #end-card .logo-header .charity {
  height: 40%;
  width: 100%;
}
#banner.billboard #end-card .logo-header .supporting {
  height: auto;
  margin: 10px 0;
}
#banner.billboard #end-card .chooser-list .charity {
  width: 80px;
  height: 80px;
}
#banner.billboard #end-card .ctas {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-grow: 1;
  max-width: 360px;
}
#banner.billboard #end-card .ctas > :nth-child(n+3) {
  display: none;
}
#banner.billboard #end-card .ctas .cta-appinstall .cta-lead {
  display: block;
}
#banner.billboard #end-card .ctas .appbadge {
  font-size: 175%;
}
#banner.billboard #end-card .find-out-more {
  display: block;
  position: static;
  width: 100%;
  height: auto;
}
#banner.vbnr {
  width: 120px;
  height: 240px;
  font-size: 8px;
}
#banner.vbnr .ads-for-good,
#banner.vbnr > .sponsor,
#banner.vbnr .chevron,
#banner.vbnr .charities,
#banner.vbnr .explain {
  position: absolute;
  left: 0;
  width: 100%;
}
#banner.vbnr .ads-for-good {
  height: 30px;
  padding: 5px;
}
#banner.vbnr > .sponsor {
  top: 30px;
  height: 90px;
  padding: 5px 3px 20px 3px;
}
#banner.vbnr .chevron {
  top: 118px;
}
#banner.vbnr .chevron .red,
#banner.vbnr .chevron .white {
  border-width: 20px 60px 0 60px;
}
#banner.vbnr .chevron .circle {
  width: 25px;
  height: 25px;
  left: 60px;
}
#banner.vbnr .charities {
  bottom: 0;
  height: 120px;
}
#banner.vbnr .charities .charity {
  padding: 20px 3px;
}
#banner.vbnr .explain {
  bottom: 0;
  height: 14px;
  text-align: center;
  z-index: 1;
}
#banner.vbnr #end-card {
  flex-direction: column;
  font-size: 10px;
}
#banner.vbnr #end-card .logo-header .sponsor {
  width: 100px;
  height: 50px;
}
#banner.vbnr #end-card .logo-header .sponsor:last-child {
  display: none;
}
#banner.vbnr #end-card .logo-header .supporting,
#banner.vbnr #end-card .logo-header .charity {
  display: none;
}
#banner.vbnr #end-card .brand {
  height: 200px;
}
#banner.vbnr #end-card .brand .cta > :not(:first-child) {
  display: none;
}
#banner.vbnr #end-card .good-loop {
  height: 40px;
}
#banner.vbnr #end-card .good-loop .cta {
  display: none;
}
#banner.vbnr #end-card .chooser-list {
  flex-direction: column;
}
#banner.vbnr #end-card .chooser-list .charity {
  width: 100px;
  height: 40px;
  margin-bottom: 3px;
}
#banner.vbnr #end-card .chooser-list .charity .logo {
  border-radius: 15px;
  background-size: contain !important;
  border: none;
}
#banner.stickyfooter {
  width: 100%;
  height: 100px;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
}
#banner.stickyfooter .width-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
#banner.stickyfooter .width-container > * {
  position: absolute;
  height: 100%;
}
#banner.stickyfooter .header {
  left: 0;
  width: 30%;
}
#banner.stickyfooter .header > * {
  padding: 2px;
}
#banner.stickyfooter .header .ads-for-good svg {
  width: 100%;
}
#banner.stickyfooter .sponsor {
  left: 30%;
  width: 30%;
  padding: 5px 0;
}
#banner.stickyfooter .chevron {
  left: 65%;
  width: 50px;
  height: 100%;
}
#banner.stickyfooter .chevron .white,
#banner.stickyfooter .chevron .red {
  top: 0;
  border-width: 50px 0 50px 35px;
}
#banner.stickyfooter .chevron .circle {
  height: 35px;
  width: 35px;
  top: 50px;
  left: 7px;
}
#banner.stickyfooter .charities {
  right: 0;
  width: 35%;
}
#banner.stickyfooter .charities .charity {
  padding: 3px;
  padding-left: 40px;
}
#banner.stickyfooter .charities .charity::after {
  content: ' ';
  position: relative;
  display: block;
  top: -100%;
  right: -100%;
  background-color: inherit;
  width: 50vw;
  height: 100px;
}
#banner.stickyfooter .closeunit {
  position: absolute;
  top: 2px;
  right: 2px;
  height: 25px;
  width: 25px;
  background-color: transparent;
  border: none;
  color: white;
  z-index: 1;
}
#banner.stickyfooter .closeunit svg {
  stroke: black;
  stroke-width: 3;
}
@media (max-width: 480px) {
  #banner.stickyfooter .ads-for-good .gl-logo-svg {
    display: none;
  }
  #banner.stickyfooter .ads-for-good .afg-text {
    font-size: 70%;
  }
}
.portrait {
  /* Everything which takes a shadow (player and endcard) */
}
.portrait .charity-button .logo,
.portrait .charity-button .name,
.portrait .ident-finger,
.portrait .brand-complete .brand-logo,
.portrait .cta-button .btn,
.portrait .donation-info {
  box-shadow: 0 0.5vw 0.5vw rgba(0, 0, 0, 0.5);
}
#player.portrait,
#player.square {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 4vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#player.portrait.nobg,
#player.square.nobg {
  background-color: #ddd;
}
#player.portrait .header,
#player.square .header {
  position: absolute;
  top: 0;
  height: 30vw;
  width: 100%;
  z-index: 10;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.6);
}
#player.portrait .header .sponsor-logo,
#player.square .header .sponsor-logo {
  height: 100%;
  padding: 0.5em;
}
#player.portrait .header .right,
#player.square .header .right {
  width: 66%;
}
#player.portrait .header .countdown-message,
#player.square .header .countdown-message {
  margin-bottom: 0.5em;
}
#player.portrait .header .countdown-message .locked,
#player.portrait .header .countdown-message .ready,
#player.portrait .header .countdown-message .complete,
#player.square .header .countdown-message .locked,
#player.square .header .countdown-message .ready,
#player.square .header .countdown-message .complete {
  transform: translate(0, -300%);
}
#player.portrait .header .chooser-list,
#player.square .header .chooser-list {
  font-size: 36%;
  transition: padding 0.5s 0.5s ease;
  transform: translate(120%, 0);
}
#player.portrait .header .chooser-list.locked,
#player.square .header .chooser-list.locked {
  padding-right: 10.5em;
}
#player.portrait .header .chooser-list.ready,
#player.portrait .header .chooser-list.complete,
#player.square .header .chooser-list.ready,
#player.square .header .chooser-list.complete {
  padding: 0 5.25em;
}
#player.portrait .header .countdown-clock,
#player.square .header .countdown-clock {
  position: absolute;
  right: 0;
  width: 10em;
  transition: opacity 0.5s linear;
  opacity: 1;
}
#player.portrait .header .countdown-clock.finished,
#player.square .header .countdown-clock.finished {
  opacity: 0;
}
#player.portrait .header .locked .br,
#player.square .header .locked .br {
  display: inline;
}
#player.portrait .vid-div,
#player.portrait video,
#player.square .vid-div,
#player.square video {
  height: unset;
  width: 100%;
}
#player.portrait .video-container,
#player.square .video-container {
  width: 100vw;
}
#player.portrait .video-container.vast,
#player.portrait .video-container.loading,
#player.portrait .video-container.mock,
#player.square .video-container.vast,
#player.square .video-container.loading,
#player.square .video-container.mock {
  height: 56.25vw;
}
#player.portrait .play-icon svg,
#player.square .play-icon svg {
  max-width: 50vw;
}
#player.portrait .ident,
#player.square .ident {
  position: absolute;
  bottom: 1em;
  right: 0;
  z-index: 10;
  font-size: 125%;
  animation: 10s ease 1 ident-in-out both;
}
#player.portrait .skip-now,
#player.square .skip-now {
  position: absolute;
  bottom: 0.5em;
  left: 0.5em;
  font-size: 166%;
}
#player.portrait.tall-vid .video-controls,
#player.square.tall-vid .video-controls {
  bottom: unset;
  top: 30vw;
}
#player.portrait.tall-vid .skip-now,
#player.square.tall-vid .skip-now {
  color: white;
}
#player {
  opacity: 1;
  transition: opacity 1s ease-in-out;
  position: absolute;
  width: 100%;
  height: 100%;
}
.landscape {
  /* Everything which takes a shadow (player and endcard) */
}
.landscape button,
.landscape .btn,
.landscape .brand-complete .brand-logo,
.landscape .charity-button .logo,
.landscape .charity-button .name,
.landscape .ident-finger,
.landscape .donation-info {
  box-shadow: 0 0.3vw 0.3vw rgba(0, 0, 0, 0.5);
}
#player.landscape {
  font-size: 3vw;
  /* Optimised for portrait-format videos */
}
#player.landscape .countdown-clock {
  display: inline-flex;
  margin: 0 0 0 1.5em;
  font-size: 33%;
}
#player.landscape.nobg {
  background-color: #ddd;
}
#player.landscape .upper {
  position: relative;
  width: 100%;
  height: 23%;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
#player.landscape .upper .sponsor-logo,
#player.landscape .upper .countdown-message {
  display: inline-flex;
  height: 100%;
}
#player.landscape .lower {
  position: relative;
  width: 100%;
  height: 77%;
}
#player.landscape .chooser-list {
  transform: translate(100%, 0);
}
#player.landscape .charity-button {
  font-size: 38%;
}
#player.landscape .countdown-message {
  flex-grow: 1;
  margin: 0 0.5em;
  overflow: hidden;
}
#player.landscape .countdown-message .locked .text {
  display: inline-block;
}
#player.landscape .countdown-message .locked .text,
#player.landscape .countdown-message .ready,
#player.landscape .countdown-message .complete {
  line-height: 1.25;
}
#player.landscape .countdown-message .locked,
#player.landscape .countdown-message .ready,
#player.landscape .countdown-message .complete {
  transform: translate(0, 100%);
  height: 100%;
}
#player.landscape .video-container {
  height: 100%;
  display: inline-block;
}
#player.landscape .video-container video {
  max-width: 77vw;
}
#player.landscape .video-container.vast,
#player.landscape .video-container.loading,
#player.landscape .video-container.mock {
  width: 77vw;
}
#player.landscape .video-container.vast .vid-div,
#player.landscape .video-container.loading .vid-div,
#player.landscape .video-container.mock .vid-div,
#player.landscape .video-container.vast .mock-video,
#player.landscape .video-container.loading .mock-video,
#player.landscape .video-container.mock .mock-video {
  width: 100%;
  height: 100%;
}
#player.landscape .sponsor-logo img {
  padding: 0.25em 0.25em 0.25em 0.5em;
}
#player.landscape .sponsor-logo img.tall {
  width: unset;
}
#player.landscape .ctas {
  display: flex;
  justify-content: center;
  align-items: center;
}
#player.landscape .count3 .ctas {
  display: none;
}
#player.landscape .cta .btn {
  background-color: black;
  color: white;
}
#player.landscape.mbl .countdown-message .locked .text {
  line-height: 1;
  font-size: 120%;
}
#player.landscape.mbl .countdown-message .ready,
#player.landscape.mbl .countdown-message .complete {
  font-size: 150%;
}
#player.landscape.landscape-a .upper {
  background-color: rgba(255, 255, 255, 0.6);
}
#player.landscape.landscape-a .sponsor-logo {
  max-width: 20%;
}
#player.landscape.landscape-a .sponsor-logo .not-loaded {
  width: 20vw;
}
#player.landscape.landscape-a .lower {
  text-align: center;
}
#player.landscape.landscape-a .video-container,
#player.landscape.landscape-a .vid-div {
  background-color: transparent;
}
#player.landscape.landscape-a .chooser-list {
  display: inline-flex;
}
#player.landscape.landscape-a .chooser-list > * {
  margin: 0 0.5vw;
}
#player.landscape.landscape-a .ident {
  position: absolute;
  bottom: 2em;
  right: 0;
  z-index: 1;
  animation: 10s ease 1 ident-in-out both;
}
#player.landscape.landscape-a .skip-now {
  position: absolute;
  bottom: 0.5em;
  left: 0.6em;
  font-size: 80%;
}
#player.landscape.landscape-a .ctas {
  font-size: 66%;
}
#player.landscape.landscape-b .sponsor-logo {
  max-width: 35%;
}
#player.landscape.landscape-b .sponsor-logo .not-loaded {
  width: 35vw;
}
#player.landscape.landscape-b .chooser-list {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 23%;
  height: 100%;
}
#player.landscape.landscape-b .chooser-list.count3 .charity-button {
  font-size: 45%;
}
#player.landscape.landscape-b .chooser-list.count1 .charity-button,
#player.landscape.landscape-b .chooser-list.count2 .charity-button {
  font-size: 65%;
}
#player.landscape.landscape-b .has-ctas .count2 .charity-button {
  font-size: 55%;
}
#player.landscape.landscape-b .ctas {
  font-size: 66%;
}
#player.landscape.landscape-tall {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-weight: bold;
  font-size: 4.5vh;
}
#player.landscape.landscape-tall .left,
#player.landscape.landscape-tall .right,
#player.landscape.landscape-tall .vid-div {
  width: unset;
  height: 100%;
}
#player.landscape.landscape-tall .left,
#player.landscape.landscape-tall .right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1 1;
}
#player.landscape.landscape-tall .left > * {
  margin: 1em auto;
}
#player.landscape.landscape-tall .sponsor-logo {
  display: block;
  max-height: 40%;
  text-align: center;
}
#player.landscape.landscape-tall .sponsor-logo img {
  width: 25vw;
  height: 25vw;
}
#player.landscape.landscape-tall .countdown-message {
  height: unset;
  width: 75%;
  flex-direction: column;
  text-align: center;
  flex-grow: 0;
}
#player.landscape.landscape-tall .countdown-clock {
  display: flex;
  font-size: 33%;
}
#player.landscape.landscape-tall .countdown-message .locked,
#player.landscape.landscape-tall .countdown-message .ready,
#player.landscape.landscape-tall .countdown-message .complete {
  transform: none;
  height: unset;
}
#player.landscape.landscape-tall .chooser-list {
  height: 100%;
  padding-top: 16vh;
}
#player.landscape.landscape-tall .chooser-list .charity-button {
  font-size: 55%;
}
#player.landscape.landscape-tall .chooser-list.has-ctas .charity-button {
  font-size: 60%;
}
#player.landscape.landscape-tall .ident {
  position: absolute;
  top: 1em;
  right: 0;
  z-index: 1;
}
@media (min-aspect-ratio: 16/9) {
  #player.landscape {
    max-width: 178vh;
    font-size: 5.333vh;
  }
}
@media (max-aspect-ratio: 16/9) {
  #player.landscape {
    max-height: 56.5vw;
    font-size: 3vw;
  }
}
@keyframes ident-in-out {
  0% {
    transform: translateX(110%);
  }
  18% {
    transform: translateX(110%);
  }
  25% {
    transform: translateX(0);
  }
  58% {
    transform: translateX(0);
  }
  65% {
    transform: translateX(110%);
  }
  100% {
    transform: translateX(110%);
  }
}
#player.square {
  font-size: 6vw;
}
#player.square .chooser-list .charity {
  height: 15vw;
  width: 15vw;
}
#player.square .chooser-messages {
  font-size: 0.7em;
}
#player.square .chooser-messages .time-remaining {
  display: inline-block;
  margin-left: 0.3em;
  font-weight: bold;
  font-size: 1em;
}
#player.square .header {
  text-align: left;
  flex-direction: row;
  align-items: center;
}
#player.square .header div:nth-child(1) {
  flex-basis: 60%;
  font-size: 0.8em;
  margin: 0.2em 0.1em 0.2em 0.5em;
}
#player.square .header > * {
  display: inline-block;
}
#player.square .header .sponsor-logo {
  flex-basis: 40%;
  height: 2em;
  margin: 0.2em 0.5em 0.2em 0.1em;
}
#player.square .footer > * {
  margin: 0.1em 0;
}
#player.square .footer .footer-end {
  font-size: 0.5em;
}
#player.square #thankyou {
  font-size: 4.5vw;
}
#player.square #thankyou .tq-sponsor {
  display: none;
}
#player.square #thankyou .charity-details {
  padding: 0.25em 0;
}
#player.square #thankyou .charity-details .tq-sponsor {
  display: inline-block;
}
#player.square #thankyou .cta-connect {
  padding-top: 0;
}
.fabric {
  /* Everything which takes a shadow (player and endcard) */
}
.fabric button,
.fabric .btn,
.fabric .charity-button .logo {
  box-shadow: 0 3px 3px #000000;
}
#player.fabric .chooser-list .charity .logo {
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
}
#player.fabric .countdown-message {
  text-align: center;
}
#player.fabric .vid-div,
#player.fabric video {
  width: 100%;
}
#player.fabric video {
  object-fit: cover;
}
#player.fabric.fabric-wide {
  display: flex;
  font-size: 15px;
}
#player.fabric.fabric-wide > * {
  display: block;
  top: 0;
  height: 100%;
}
#player.fabric.fabric-wide .left-side {
  width: 350px;
  left: 0;
}
#player.fabric.fabric-wide .left-side > * {
  display: flex;
  top: 0;
  right: 0;
  width: 100%;
  padding: 5px;
}
#player.fabric.fabric-wide .left-side .header {
  height: 80px;
}
#player.fabric.fabric-wide .left-side .header > * {
  height: 100%;
}
#player.fabric.fabric-wide .left-side .header .sponsor-logo {
  width: unset;
  max-width: 30%;
}
#player.fabric.fabric-wide .left-side .header .sponsor-logo img {
  height: 100%;
}
#player.fabric.fabric-wide .left-side .header .countdown-message {
  width: 100%;
}
#player.fabric.fabric-wide .left-side .header .countdown-message .unbr {
  display: block;
}
#player.fabric.fabric-wide .left-side .header .countdown-message .locked {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-grow: 1;
}
#player.fabric.fabric-wide .left-side .header .countdown-message .countdown-clock {
  height: 75px;
  width: 75px;
  display: flex;
}
#player.fabric.fabric-wide .left-side .header .countdown-message .countdown-clock .countdown-number {
  font-size: 40px;
}
#player.fabric.fabric-wide .left-side .chooser-list {
  height: 120px;
}
#player.fabric.fabric-wide .left-side .chooser-list .charity-button {
  font-size: 8.5px;
}
#player.fabric.fabric-wide .left-side .ident {
  display: block;
  width: 190px;
  height: 50px;
  padding: 10px;
  margin-left: auto;
}
#player.fabric.fabric-wide .video-container {
  flex-grow: 1;
}
#player.fabric.fabric-square {
  font-size: 15px;
}
#player.fabric.fabric-square > * {
  display: flex;
  position: absolute;
  left: 0;
}
#player.fabric.fabric-square .header {
  height: 40px;
  top: 0;
  z-index: 1;
  width: 100%;
  justify-content: center;
  background: linear-gradient(rgba(255, 255, 255, 0.75), transparent);
  color: black;
  font-weight: bold;
}
#player.fabric.fabric-square .header > * {
  display: inline-flex;
}
#player.fabric.fabric-square .header .sponsor-logo {
  height: 40px;
  max-width: 100px;
  padding: 5px;
}
#player.fabric.fabric-square .countdown-message {
  width: 225px;
}
#player.fabric.fabric-square .countdown-message .locked {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#player.fabric.fabric-square .countdown-message .ready {
  font-size: 90%;
}
#player.fabric.fabric-square .countdown-message .highlight {
  font-size: 150%;
  font-weight: bold;
}
#player.fabric.fabric-square .video-container {
  top: 0;
  height: 190px;
  width: 100%;
}
#player.fabric.fabric-square .video-container video {
  object-fit: cover;
}
#player.fabric.fabric-square .footer {
  bottom: 0;
  width: 100%;
  height: 60px;
}
#player.fabric.fabric-square .chooser-list {
  position: relative;
  height: 100%;
  width: 270px;
  padding: 5px 0;
  position: absolute;
  bottom: 0;
}
#player.fabric.fabric-square .chooser-list .charity-button {
  font-size: 5px;
}
#player.fabric.fabric-square .ident {
  position: absolute;
  height: 100%;
  right: 0px;
  bottom: 0px;
  padding: 8px;
}
#player.fabric.fabric-square .ident svg {
  object-position: center;
  width: unset;
}
@media (min-aspect-ratio: 2/1) {
  #player.fabric.fabric-square .ident {
    padding: 15px 10px;
  }
  #player.fabric.fabric-square .countdown-message {
    width: unset;
  }
  #player.fabric.fabric-square .countdown-message .locked > * {
    margin-left: 1em;
  }
  #player.fabric.fabric-square .countdown-message .locked .br {
    display: inline;
  }
}
/**
	TODO Kind of a mess. These are overrides for the portrait unit to account for moving the prompt text below the video & showing the CTA a few seconds after the user picks their charity.
*/
#player.engage.portrait {
  justify-content: space-between;
  /* TODO Probably port this back into the portrait style, logo is currently stretching to fit 4em x 100% */
  /* no click-to-play overlay! play always triggered by selecting charity */
  /* no skip button on this unit type, so let the GL ident take more space */
}
#player.engage.portrait .header {
  align-items: center;
  flex-basis: 20%;
}
#player.engage.portrait .sponsor-logo {
  width: 75%;
}
#player.engage.portrait .sponsor-logo img {
  object-fit: contain;
}
#player.engage.portrait .countdown-message {
  font-size: 4vw;
  text-transform: none;
}
#player.engage.portrait .countdown-message .engage-prompt-line1 {
  font-size: 6vw;
}
#player.engage.portrait .footer {
  flex-basis: 45%;
}
#player.engage.portrait .chooser-cta {
  position: relative;
}
#player.engage.portrait .chooser-cta .chooser {
  opacity: 1;
  transition: opacity 0.4s 2s ease;
}
#player.engage.portrait .chooser-cta .ctas {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition-delay: 2.4s;
  pointer-events: none;
  text-transform: none;
  font-size: 6vw;
}
#player.engage.portrait .chooser-cta .ctas .cta {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
#player.engage.portrait .chooser-cta .ctas .cta-lead {
  display: block;
}
#player.engage.portrait .chooser-cta .ctas .cta button {
  width: 60%;
  height: unset;
  white-space: unset;
}
#player.engage.portrait.picked .chooser-cta .chooser {
  opacity: 0;
  pointer-events: none;
}
#player.engage.portrait.picked .chooser-cta .ctas {
  opacity: 1;
  pointer-events: auto;
}
#player.engage.portrait .gl-play-video {
  display: none;
}
#player.engage.portrait.not-picked .video-container {
  pointer-events: none;
}
#player.engage.portrait .ident {
  width: unset;
}
.trees-foreground,
.clouds-foreground {
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-size: cover;
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  pointer-events: none;
}
.clouds-foreground {
  height: 30%;
}
.trees-background {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  background-size: cover;
}
#player.trees {
  font-family: 'Montserrat Extra Bold';
  /* EXPERIMENTAL PARALLAX GIMMICK */
  /* Move video controls to top-right */
}
#player.trees .video-container {
  width: 75%;
  height: 75%;
  top: 5%;
  left: 12.5%;
}
#player.trees .tapt-tagline {
  display: inline-block;
  top: 3%;
  left: 7%;
  position: absolute;
  font-size: 5.5vw;
  z-index: 3;
}
#player.trees .tapt-tagline .block-bg {
  color: #0e382a;
  background-color: white;
  line-height: 1;
  display: inline-block;
  margin-bottom: 0.075em;
  height: 0.9em;
  padding: 0 0.1em;
}
#player.trees .tapt-tagline a {
  text-decoration: none;
}
#player.trees .tapt-tagline .findoutmore {
  font-size: 30%;
  height: 1.4em;
  padding: 0.3em;
}
#player.trees .tree-counter {
  position: absolute;
  width: 100%;
  margin: auto;
  bottom: 14%;
  text-align: center;
  z-index: 3;
  color: white;
  font-size: 1.5vw;
}
#player.trees .tree-counter .digits {
  margin-bottom: 0.5em;
}
#player.trees .tree-counter .digit {
  font-size: 3.75vw;
  background-color: white;
  color: #0e382a;
  padding: 0.25em 0;
  margin: 0.075em;
  display: inline-block;
  width: 1em;
}
#player.trees .funded-by {
  display: inline-block;
  position: absolute;
  bottom: 13%;
  left: 6%;
  z-index: 3;
  text-align: center;
  color: white;
  text-transform: none;
  font-size: 2vw;
}
#player.trees .funded-by .sponsor-logo {
  width: 25vw;
  max-height: 15vw;
  margin-top: 2vw;
}
#player.trees .ident {
  z-index: 10;
  position: absolute;
  bottom: 12%;
  right: 7%;
  width: 11vw;
  height: 11vw;
  z-index: 3;
}
#player.trees .trees-foreground,
#player.trees .trees-background,
#player.trees .clouds-foreground {
  margin-left: -2.5%;
  margin-right: -2.5%;
  width: 105%;
  bottom: 0;
  transition: transform 20s linear;
  background-size: cover;
  background-position: top center;
  mask-position: top center;
  -webkit-mask-position: top center;
}
#player.trees .trees-foreground {
  transform: translateX(-2.3%);
}
#player.trees .clouds-foreground {
  margin-left: -5%;
  margin-right: -5%;
  width: 110%;
  height: 40%;
  transform: translateX(4.5%);
}
#player.trees .trees-background {
  transform: translateX(2.3%);
}
#player.trees.playing .trees-foreground,
#player.trees.video-complete .trees-foreground {
  transform: translateX(2.3%);
}
#player.trees.playing .clouds-foreground,
#player.trees.video-complete .clouds-foreground {
  transform: translateX(-4.5%);
}
#player.trees.playing .trees-background,
#player.trees.video-complete .trees-background {
  transform: translateX(-2.3%);
}
#player.trees .video-controls {
  direction: rtl;
  top: 0;
  right: 0;
  bottom: unset;
  left: unset;
}
#player.trees .video-controls .vidctl {
  transform: translateY(-100%);
  padding: 0.2em;
}
#player.trees .video-controls .vidctl:not(:last-child) {
  padding-left: 0.1em;
}
#player.trees .video-controls .vidctl.persist {
  transform: translateY(0);
}
#player.trees .mbl .video-container:not(.covered) .vidctl,
#player.trees .video-container:hover:not(.covered) .vidctl {
  transform: translateY(0);
}
#player.trees .mbl .video-container:not(.covered) .progress-bar,
#player.trees .video-container:hover:not(.covered) .progress-bar {
  height: 4px;
}
#social {
  font-size: 4.25vw;
  font-family: 'Montserrat Medium', sans-serif;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  color: #555;
  background-color: white;
  padding: 0.5em;
}
#social > * {
  width: 100%;
}
#social #brand-logo {
  height: 10em;
  object-fit: contain;
}
#social #chooser,
#social .video-container {
  width: 100vw;
}
#social .video-container {
  height: 56.25vw;
}
#social #donation-unlocked,
#social #thank-you {
  font-size: 125%;
  font-family: 'Montserrat Extra Bold', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
}
#social .chooser-messages {
  text-align: center;
  padding: 0.25em 1em;
}
#social .chooser-messages .chooser-emphasis {
  font-weight: bold;
}
#social .charity-button {
  font-size: 2.8vw;
}
#social .charity-button .logo {
  box-shadow: 0 1vw 1vw rgba(0, 0, 0, 0.5);
}
#social #charity-logo {
  height: 6em;
  width: auto;
}
#social #money-raised .donation-amount {
  font-size: 150%;
  display: block;
  font-family: 'Montserrat Extra Bold', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
}
#social #afg-footer {
  width: 60%;
}
#social.half-height #brand-logo {
  display: none;
}
#social.half-height #money-raised .donation-amount {
  display: inline;
  font-size: 125%;
  vertical-align: middle;
}
#social .video-controls {
  background: transparent;
}
#social .video-controls .vidctl {
  display: none;
  /* element drifts out of containing box when it's inline-block */
}
#social .video-controls .vidctl[title="Unmute"] {
  display: block;
}
#social .video-controls .vidctl svg {
  display: block;
}
#pagewrapper {
  background-color: white;
  color: black;
  font-size: 2.5vw;
  height: 100vh;
}
#pagewrapper .limit-width {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  z-index: 1000;
}
#pagewrapper .gl-close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  height: 1.5em;
  width: 1.5em;
  color: black;
}
#pagewrapper .chooser-messages,
#pagewrapper .chooser-list {
  height: 5em;
  display: inline-flex;
  display: -webkit-inline-flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  vertical-align: top;
  width: 50%;
  padding: 0.5em;
}
#pagewrapper .chooser-messages {
  text-align: left;
}
#pagewrapper .chooser-list .charity {
  height: 4em;
  width: 4em;
}
#pagewrapper #vertiser-iframe {
  position: absolute;
  padding-top: 5em;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  border: none;
}
@media (min-width: 900px) {
  #pagewrapper {
    font-size: 22.5px;
  }
}
@media (max-width: 540px) {
  #pagewrapper {
    font-size: 13.5px;
  }
}
@media (max-width: 945px) {
  #pagewrapper .chooser-list {
    padding-right: 2em;
  }
}
#lightbox-outer {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
}
#lightbox-outer .close {
  position: absolute;
  color: white;
  top: 0;
  right: 0;
  height: 4.5em;
  padding: 0.75em;
}
#lightbox {
  position: relative;
  overflow: hidden;
}
#lightbox #player {
  transition: none;
  animation: none;
}
#lightbox #player.landscape,
#lightbox #player.portrait,
#lightbox #player.square {
  font-size: 100%;
  width: 100%;
  height: 100%;
}
#lightbox #player.landscape #end-card {
  font-size: 83.333%;
}
#lightbox #player.portrait #end-card,
#lightbox #player.square #end-card {
  font-size: 62.5%;
}
#lightbox #thankyou {
  flex-direction: column;
  text-align: center;
}
@media (min-aspect-ratio: 16/9) {
  #lightbox {
    width: 142.222vh;
    height: 80vh;
    font-size: 4.266vh;
  }
}
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 16/9) {
  #lightbox {
    width: 80vw;
    height: 45vw;
    font-size: 2.4vw;
  }
}
@media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 1/1) {
  #lightbox {
    width: 45vh;
    height: 80vh;
    font-size: 3.6vh;
  }
}
@media (max-aspect-ratio: 9/16) {
  #lightbox {
    width: 80vw;
    height: 142.222vw;
    font-size: 6.4vw;
  }
}
.video-container {
  position: relative;
  overflow: hidden;
  /* The Good-Loop overlay in the top-right */
}
.video-container * {
  color: white;
}
.video-container .progress-bar,
.video-container .click-to-play,
.video-container .video-not-loaded {
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
}
.video-container .progress-bar {
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
}
.video-container .progress-bar .elapsed {
  height: 100%;
  background-color: silver;
}
.video-container .ident {
  position: absolute;
  width: 25%;
  top: 0.25em;
  right: 0.25em;
  opacity: 0.75;
}
.video-container .ident svg {
  vertical-align: middle;
}
.video-container .ident .gl-logo-svg {
  width: 15%;
}
.video-container .ident .gl-text-svg {
  width: 81%;
  margin-left: 4%;
}
.video-container .skip-now {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0.25em;
  color: white;
  text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.5);
}
.video-container.covered .skip-now {
  display: none;
}
.video-container .gl-play-video:hover {
  cursor: pointer;
}
.gl-play-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.15);
  z-index: 1;
}
.gl-play-video .play-icon {
  position: absolute;
  height: 50%;
  width: 100%;
}
.gl-play-video .play-icon svg {
  height: 100%;
  width: 100%;
}
.gl-play-video .play-icon.animate svg {
  overflow: visible;
}
.gl-play-video .play-icon.animate svg path {
  stroke: white;
  animation: 1s pulse-fade infinite linear;
}
@keyframes pulse-fade {
  0% {
    stroke-width: 0;
    opacity: 50%;
  }
  66% {
    stroke-width: 15;
    opacity: 0%;
  }
  100% {
    stroke-width: 15;
    opacity: 0%;
  }
}
.vid-div,
video {
  height: 100%;
}
.vid-div video {
  left: 0;
  top: 0;
}
.mock-video {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
.vid-div {
  background-color: black;
  display: inline-block;
}
.video-controls {
  position: absolute;
  bottom: 4px;
  left: 0;
}
.video-controls .vidctl {
  font-size: 2.5em;
  height: 1em;
  display: inline-block;
  position: relative;
  cursor: pointer;
  max-width: 1.333em;
  padding: 0.2em;
  transition: transform 0.1s ease-in-out;
  transform: translateY(100%);
}
.video-controls .vidctl.persist {
  transform: translateY(0);
}
.video-controls .vidctl:not(:last-child) {
  padding-right: 0.1em;
}
.video-controls .vidctl svg {
  height: 100%;
  fill: white;
  filter: drop-shadow(0 0.05em 0.05em rgba(0, 0, 0, 0.5));
}
.mbl .video-container:not(.covered) .vidctl,
.video-container:hover:not(.covered) .vidctl {
  transform: translateY(0);
}
.mbl .video-container:not(.covered) .progress-bar,
.video-container:hover:not(.covered) .progress-bar {
  height: 4px;
}
.countdown-message {
  position: relative;
}
.countdown-message .locked,
.countdown-message .ready,
.countdown-message .complete {
  opacity: 0;
  transition: opacity 0.3s linear;
  position: absolute;
}
.countdown-message .ready,
.countdown-message .complete {
  left: 0;
  width: 100%;
}
.countdown-message.locked .locked,
.countdown-message.ready .ready,
.countdown-message.complete .complete {
  opacity: 1;
  transition-delay: 0.3s;
  z-index: 1;
  position: inherit;
  animation: 0.6s translate-in 1 ease-in-out both;
}
.countdown-message.locked .locked {
  animation-delay: 1s;
}
/* 0% keyframe omitted so the initial position can be set in a context-specific rule */
@keyframes translate-in {
  100% {
    transform: translate(0, 0);
  }
}
.chooser-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  /* Animate in from the right */
  animation: 0.6s 0.6s translate-in 1 ease-in-out both;
  /* Charities lined up vertically or horizontally? */
  /* "Wait for it..." lock bounce */
  /* "Click me!" charity button pulsing */
  /* Lock animation: Use transition to show lock opening and shrinking away */
}
.chooser-list.vertical {
  flex-direction: column;
}
.chooser-list.horizontal {
  flex-direction: row;
}
.chooser-list.locked .lock {
  animation: 5s lock-bounce infinite linear;
}
.chooser-list .ch2 .lock {
  animation-delay: 0.3s;
}
.chooser-list .ch3 .lock {
  animation-delay: 0.6s;
}
.chooser-list.ready .logo {
  animation: 2.5s charity-pulse infinite ease;
}
.chooser-list .ch2 .logo {
  animation-delay: 0.2s;
}
.chooser-list .ch3 .logo {
  animation-delay: 0.4s;
}
.chooser-list .charity-button {
  position: relative;
  display: inline-block;
  width: 10em;
}
.chooser-list .charity-button > :not(.aspectifier) {
  position: absolute;
}
.chooser-list .charity-button .aspectifier {
  position: static;
  left: 100%;
  margin-top: 100%;
}
.chooser-list .charity-button .fade-group {
  width: 100%;
  height: 100%;
  transition: filter 0.3s ease-in-out;
  z-index: 0;
}
.chooser-list .charity-button .logo {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  background-color: white;
}
.chooser-list .charity-button .name {
  position: absolute;
  width: 95%;
  top: 66%;
  padding: 0.2em;
  text-align: center;
  text-transform: uppercase;
  display: block;
  background: white;
  font-size: 120%;
}
.chooser-list .lock {
  display: block;
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: 0;
  height: 3.6em;
  width: 2.4em;
}
.chooser-list .lock .lock-svg {
  transition: transform 0.3s 0.5s ease-in;
}
.chooser-list .lock .shackle {
  transition: transform 0.05s linear;
  transform-origin: right;
}
.chooser-list.ch2 .lock-svg {
  transition-delay: 0.75s;
}
.chooser-list.ch3 .lock-svg {
  transition-delay: 1s;
}
.chooser-list.ch2 .shackle {
  transition-delay: 0.25s;
}
.chooser-list.ch3 .shackle {
  transition-delay: 0.5s;
}
.chooser-list.locked .charity-button .fade-group {
  filter: opacity(50%) saturate(0.25);
}
.chooser-list:not(.ready) .charity-button {
  cursor: default;
}
.chooser-list.locked .lock-svg {
  transform: scale(1);
}
.chooser-list.locked .shackle {
  transform: rotate(0);
}
.chooser-list:not(.locked) .lock-svg {
  transform: scale(0);
}
.chooser-list:not(.locked) .shackle {
  transform: rotate(25deg);
}
.chooser-list.complete .charity-button:not(.selected) {
  display: none;
}
.chooser-list .divider {
  display: none;
}
@keyframes charity-pulse {
  0% {
    transform: scale(100%);
  }
  5% {
    transform: scale(105%);
  }
  15% {
    transform: scale(98%);
  }
  20% {
    transform: scale(100%);
  }
}
/*
	// generated by this mess:
	for (let i = 0; i <= 15; i++) {
		let t = (i <= 5) ? i : (i <= 10) ? 5 + ((i-5)/2) : 7.5 + ((i-10)/4); let x = (i/5) % 1;
		let b = (Math.ceil(i/5) || 1);
		let y = (60*(x*x) - (60*x)) / b;
		let keyframe = `${t}% { transform: translateY(${y.toPrecision(2)}%); }`
		console.log();
	}
*/
@keyframes lock-bounce {
  0% {
    transform: translateY(0%);
  }
  1% {
    transform: translateY(-9.6%);
  }
  2% {
    transform: translateY(-14%);
  }
  3% {
    transform: translateY(-14%);
  }
  4% {
    transform: translateY(-9.6%);
  }
  5% {
    transform: translateY(0%);
  }
  5.5% {
    transform: translateY(-4.8%);
  }
  6% {
    transform: translateY(-7.2%);
  }
  6.5% {
    transform: translateY(-7.2%);
  }
  7% {
    transform: translateY(-4.8%);
  }
  7.5% {
    transform: translateY(0%);
  }
  7.75% {
    transform: translateY(-3.2%);
  }
  8% {
    transform: translateY(-4.8%);
  }
  8.25% {
    transform: translateY(-4.8%);
  }
  8.5% {
    transform: translateY(-3.2%);
  }
  8.75% {
    transform: translateY(0%);
  }
}
#end-card {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: opacity 0.25s 1s linear;
  color: white;
}
#end-card.hide {
  z-index: -1;
  opacity: 0;
}
#end-card .in {
  opacity: 1;
}
#end-card .out {
  opacity: 0;
  pointer-events: none;
}
#end-card .ident-container {
  text-align: right;
}
#end-card .ident-container .ident-text {
  padding: 0.5em;
  display: block;
  font-size: 80%;
}
#end-card .endcard-curve {
  display: none;
}
#end-card .brand-complete,
#end-card .brand-choose-prompt {
  transition: opacity 0.25s 0.25s linear;
}
#end-card .brand-complete .tq-text .thankyou {
  text-transform: none;
  font-weight: bold;
  margin-bottom: 0.5em;
  font-size: 150%;
}
#end-card .brand-complete .brand {
  text-align: center;
}
#end-card .brand-complete .brand .brand-logo {
  background-color: white;
  border-radius: 50%;
  margin-bottom: 1em;
}
#end-card .brand-complete .brand .cta-button .btn {
  font-size: 75%;
}
#end-card .around-chosen {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  transition: opacity 0.5s linear;
  z-index: 1;
}
#end-card .supporting {
  font-size: 75%;
}
#end-card .donation-info {
  font-size: 50%;
  font-weight: bold;
  padding: 1em;
  height: 3em;
  border-radius: 1.5em;
  transition: opacity 0.5s linear;
}
#end-card .donation-total {
  text-transform: none;
  padding: 0;
  line-height: 2;
}
#end-card .donation-total .donation-amount {
  font-size: 180%;
}
#end-card .gl-close {
  position: absolute;
  text-decoration: none;
}
#end-card .gl-close .underline-countdown {
  width: 100%;
}
#end-card .endcard-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
#end-card .endcard-curve {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#end-card .endcard-curve svg {
  fill: white;
  width: 100%;
  height: 100%;
}
#end-card .ctas .cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#end-card .ctas .cta-lead,
#end-card .ctas .cta-help,
#end-card .ctas .consent-message {
  line-height: 1.25;
}
#end-card .ctas .cta-lead:not(:last-child) {
  margin-bottom: 0.5em;
}
#end-card .ctas input:not(:first-child) {
  margin-left: 0.5em;
}
#end-card .ctas button,
#end-card .ctas .btn {
  white-space: nowrap;
}
/* Defaults with white background for cases where bg img/colour is unset*/
#end-card.portrait.nobg {
  color: black;
}
#end-card.portrait.nobg .endcard-bg {
  background-color: white;
}
#end-card.landscape.nobg {
  color: black;
}
#end-card.landscape.nobg .endcard-bg {
  background-color: #ddd;
}
#end-card.landscape {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 2.5vw;
}
#end-card.landscape.mbl .endcard-curve.mobile {
  display: block;
}
#end-card.landscape:not(.mbl) .endcard-curve.landscape {
  display: block;
}
#end-card.landscape .endcard-curve {
  left: -2px;
}
#end-card.landscape .brand-choose-prompt {
  position: absolute;
  width: 33%;
  left: 4%;
  bottom: 34%;
  font-size: 115%;
}
#end-card.landscape .brand-choose-prompt * {
  line-height: 1.35;
}
#end-card.landscape .brand-choose-prompt .brand-logo {
  width: 75%;
  height: 30vh;
  margin-bottom: 0.5em;
}
#end-card.landscape .chooser-list {
  position: absolute;
  right: 1%;
  top: 40%;
  width: 63%;
  height: 34%;
  flex-direction: row;
}
#end-card.landscape .chooser-list.count2 {
  width: 42%;
  right: 11%;
}
#end-card.landscape .chooser-list .charity-button {
  font-size: 1.75vw;
}
#end-card.landscape .chooser-list.complete {
  right: 15%;
  top: 35%;
  width: 20%;
}
#end-card.landscape .chooser-list.complete .charity-button.selected {
  z-index: 1;
}
#end-card.landscape .ident-container {
  position: absolute;
  right: 0;
  top: 4%;
  font-size: 2.5vw;
}
#end-card.landscape .around-chosen {
  position: absolute;
  right: 15%;
  top: 31%;
  width: 20%;
  height: 48%;
}
#end-card.landscape .around-chosen .supporting {
  font-size: 85%;
}
#end-card.landscape .around-chosen .donation-info {
  font-size: 60%;
  background-color: white;
  color: black;
  text-align: center;
}
#end-card.landscape .donation-total {
  position: absolute;
  bottom: 1em;
  left: 4%;
}
#end-card.landscape .brand-complete,
#end-card.landscape .brand-choose-prompt,
#end-card.landscape .donation-total {
  color: black;
}
#end-card.landscape .brand-complete .tq-text {
  position: absolute;
  left: 5%;
  top: 31%;
  font-size: 120%;
}
#end-card.landscape .brand-complete .brand {
  position: absolute;
  right: 40%;
  top: 32%;
}
#end-card.landscape .brand-complete .brand .brand-logo {
  display: inline-block;
  width: 8em;
  height: 8em;
}
#end-card.landscape .brand-complete .brand .cta-button .btn {
  background: black;
  color: white;
}
#end-card.landscape .ctas.gl-ctas {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  font-size: 70%;
  text-align: center;
  padding-top: 0.5em;
}
#end-card.landscape .gl-close {
  bottom: 1em;
  right: 1em;
}
#end-card.portrait {
  color: white;
  font-size: 8vw;
}
#end-card.portrait .endcard-curve.portrait {
  display: block;
  height: 100vw;
}
#end-card.portrait .ident-container {
  position: absolute;
  right: 0;
  top: 5vw;
  font-size: 4.5vw;
}
#end-card.portrait .brand-choose-prompt .brand-logo {
  position: absolute;
  top: 0;
  left: 0;
  height: 36vw;
  width: 40vw;
  padding: 4vw;
}
#end-card.portrait .brand-choose-prompt .choose-prompt {
  position: absolute;
  left: 0;
  bottom: 57%;
  font-size: 7vw;
  padding: 0 12%;
  text-align: left;
  line-height: 1.25;
}
#end-card.portrait .brand-complete .brand {
  position: absolute;
  top: 49%;
  left: 8%;
}
#end-card.portrait .brand-complete .brand .brand-logo {
  width: 5em;
  height: 5em;
  margin-bottom: 0.6em;
}
#end-card.portrait .brand-complete .tq-text {
  top: 20%;
  position: absolute;
  width: 100%;
  text-align: left;
  padding: 1em;
}
#end-card.portrait .brand-complete .tq-text .br {
  display: inline;
}
#end-card.portrait .brand-complete .cta-button .btn {
  background-color: white;
  color: black;
  font-size: 50%;
  width: 100%;
}
#end-card.portrait .around-chosen {
  position: absolute;
  right: 5%;
  bottom: 20.5%;
  width: 40%;
  height: 32%;
  font-size: 80%;
}
#end-card.portrait .around-chosen .donation-info {
  background-color: black;
  color: white;
  line-height: 1.25;
  width: 100%;
}
#end-card.portrait .chooser-list {
  position: absolute;
  width: 82vw;
  right: 9vw;
  top: 45%;
  flex-wrap: wrap;
  padding: 0;
}
#end-card.portrait .chooser-list .charity-button {
  font-size: 3.5vw;
}
#end-card.portrait .chooser-list.complete {
  width: 40vw;
  right: 5vw;
  top: 52%;
}
#end-card.portrait .donation-total {
  position: absolute;
  bottom: 6vw;
  left: 12vw;
  font-size: 5vw;
}
#end-card.portrait .gl-close {
  bottom: 6vw;
  right: 6vw;
}
#end-card.mbl.landscape .brand-choose-prompt {
  position: static;
  width: unset;
  height: unset;
}
#end-card.mbl.landscape .brand-choose-prompt .brand-logo {
  position: absolute;
  top: 1em;
  left: 4%;
  width: unset;
  max-width: 25vw;
  height: 30vh;
  margin: 0;
}
#end-card.mbl.landscape .brand-choose-prompt .choose-prompt {
  position: absolute;
  left: 30%;
  top: 32%;
  width: 66%;
  font-size: 150%;
}
#end-card.mbl.landscape .brand-complete {
  top: 39%;
}
#end-card.mbl.landscape .brand-complete .tq-text {
  left: 4%;
  top: 7%;
  font-size: 130%;
}
#end-card.mbl.landscape .brand-complete .brand {
  top: 39%;
}
#end-card.mbl.landscape .brand-complete .brand-logo {
  width: 9em;
  height: 9em;
}
#end-card.mbl.landscape .chooser-list {
  right: unset;
  left: 28%;
  top: 50%;
  width: 66%;
  height: 40%;
}
#end-card.mbl.landscape .chooser-list.complete {
  left: 42%;
  top: 43%;
}
#end-card.mbl.landscape .around-chosen {
  font-size: 130%;
  top: 40%;
  height: 52%;
}
#end-card.mbl.landscape .donation-total {
  font-size: 120%;
}
#end-card.mbl.landscape .ident-container {
  font-size: 3vw;
}
/*
	Font subsetting info:
	I've been using FontSquirrel's tool.
	https://www.fontsquirrel.com/tools/webfont-generator
	Character types: Uppercase, Numbers + Lowercase for sub-header and body
	Single Characters:
	£$©®™!?"'()*+/-=_,.…:;#%&@
	ÁÉÍÓÚÂÊÎÔÛÀÈÌÒÙÄËÏÖÜÑÆẞÇ (Addendum to EN Latin for French, German, Spanish)
	áéíóúâêîôûàèìòùäëïöüñæßç
	ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣϹΤΥΦΧΨΩΆΈΉΊΌΎΏ (Greek - Latin characters may also be needed for e.g. brand names)
	αβγδεζηθικλμνξοπρσςϲτυφχψωάέήίόύώ
	And that's all!
*/
@font-face {
  font-family: "Montserrat Extra Bold";
  src: url('/fonts/montserrat-extrabold-subset.woff2') format('woff2'), url('/fonts/montserrat-extrabold-subset.woff') format('woff');
  font-weight: bolder;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat Semi Bold";
  src: url('/fonts/montserrat-semibold-subset.woff2') format('woff2'), url('/fonts/montserrat-semibold-subset.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat Medium";
  src: url('/fonts/montserrat-medium-subset.woff2') format('woff2'), url('/fonts/montserrat-medium-subset.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Tajawal Medium";
  src: url('/fonts/tajawal-medium-subset.woff2') format('woff2'), url('/fonts/tajawal-medium-subset.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* Mixin for image positioning - because IE and Edge hate object-fit */
.img-centre {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
/* We have a lot of round images */
.border-circle {
  border-radius: 50%;
  overflow: hidden;
}
input,
button,
.btn {
  font-size: 100%;
  font-family: inherit;
  line-height: 1.2;
  padding: 0.85em 0.75em 0.65em 0.75em;
  border-radius: 1.35em;
  border: none;
  height: unset;
}
input:not(.btn) {
  box-shadow: inset 0 0.2em 0.2em rgba(0, 0, 0, 0.5);
}
button,
.btn {
  text-transform: uppercase;
}
button.disabled,
.btn.disabled,
button:disabled,
.btn:disabled {
  opacity: 0.65;
}
button:not(:disabled):not(.disabled),
.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}
.spinner {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
}
.spinner .spinner-centre {
  max-width: 50%;
  height: 50%;
  animation: spin 2s linear 0s infinite;
  text-align: center;
}
.spinner svg {
  height: 100%;
  max-width: 100%;
}
svg.radial-countdown * {
  animation-name: radial-countdown;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.underline-countdown {
  animation-name: linear-countdown;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes radial-countdown {
  0% {
    stroke-dashoffset: 0;
  }
}
@keyframes linear-countdown {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes shinev {
  0% {
    top: -100%;
  }
  15% {
    top: 100%;
  }
  100% {
    top: 100%;
  }
}
@keyframes shineh {
  0% {
    left: -100%;
  }
  15% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
/* Tick down 10-9-8 etc*/
.rollover-container {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
}
.rollover-container .previous,
.rollover-container .current {
  display: inline-block;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.8, 1.4);
  animation-fill-mode: forwards;
  animation-duration: 0.25s;
}
.rollover-container .previous {
  position: absolute;
  top: 0;
  left: 0;
  animation-name: roll-out;
}
.rollover-container .current {
  position: relative;
  animation-name: roll-in;
}
@keyframes roll-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes roll-in {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
.rollover-container.fade {
  overflow: visible;
}
.rollover-container.fade .previous {
  animation-name: fade-out;
}
.rollover-container.fade .current {
  animation-name: fade-in;
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
}
.bg-img {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0;
}
img {
  object-fit: contain;
  transition: opacity 0.1s linear;
}
img.not-loaded {
  opacity: 0;
}
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
html {
  font-family: 'Montserrat Medium', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
}
html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
  font-family: 'Montserrat Extra Bold', sans-serif;
  font-weight: normal;
  text-transform: uppercase;
}
html .cta-lead,
html .consent-message {
  text-transform: none;
}
svg {
  fill: currentColor;
}
.img-container svg,
.img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.img-container svg {
  padding: 0.5px;
  overflow: visible;
}
a {
  cursor: pointer;
}
a,
a:hover {
  color: inherit;
}
.br {
  display: block;
}
.unbr {
  display: inline;
}
#unit-container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#player {
  background-color: white;
}
#splash {
  z-index: 0;
}
#player {
  z-index: 1;
}
#end-card {
  z-index: 2;
}
#player,
#social {
  animation: fade-in 0.5s 0.5s linear both 1;
}
#player,
#social,
#end-card .brand {
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
.highlight {
  color: #af2009;
}
.countdown-message,
.countdown-clock {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
}
.countdown-clock {
  width: 10em;
  opacity: 1;
  transition: opacity 300ms ease-in-out;
}
.countdown-clock .countdown-number {
  font-size: 500%;
  position: absolute;
  transform: translateY(5%);
}
.countdown-clock.finished {
  opacity: 0;
}
.ident-finger {
  display: inline-block;
  height: 2em;
  background-color: white;
  color: black;
  border-radius: 1em 0 0 1em;
  padding: 0.35em;
}
.ident-finger svg {
  width: unset;
}
.ident-finger .roundel {
  display: none;
}
.ident-svg {
  overflow: visible;
}
.underline-countdown {
  height: 0.1em;
  background-color: black;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
#player.mbl .mbl-hide {
  display: none !important;
}
#player:not(.mbl) .mbl-only {
  display: none !important;
}


/*# sourceMappingURL=unit.css.map*/