.credits {
	position:absolute;
	bottom:20px;
	text-align:center;
	width:100%;
	display:none;
}
@media (orientation:landscape) {
	.credits {
		display:block;
		animation:credit 15s infinite 5s ease-in-out;
	}
}
.credits-mobile {
	position:relative;
	text-align:center;
	width:100%;
	padding:1rem 0;
	opacity:.1;
	animation:show-credits-mobile 1s forwards 4s ease-in-out;
}

@keyframes show-credits-mobile {
  0% { opacity:0.1; }
  100% { opacity:1; }
}
@media (orientation:landscape) {
	.credits-mobile {
		display:none;
	}
}
.credits .credits-line {
	display:block;
	position:absolute;
	bottom:0;
	width:100%;
	transform:translateY(200%);
	opacity:0;
	font-family:"Universal Accreditation";
	font-size:3rem;
}

.credits-mobile .credits-line {
	font-family:"Universal Accreditation";
	font-size:6.8vw;
	line-height:1;
}

.credits .credits-line span,
.credits-mobile .credits-line span {
	font-family:"Universal Accreditation";
	font-style:normal;
	font-size:50%;
}

.credits .credits-line:nth-child(1) {
	animation:credit-1 30s infinite 5s ease-in-out;
}
.credits .credits-line:nth-child(2) {
	animation:credit-1 30s infinite 10s ease-in-out;
}
.credits .credits-line:nth-child(3) {
	animation:credit-1 30s infinite 15s ease-in-out;
}
.credits .credits-line:nth-child(4) {
	animation:credit-1 30s infinite 20s ease-in-out;
}
.credits .credits-line:nth-child(5) {
	animation:credit-1 30s infinite 25s ease-in-out;
}

@keyframes credit-1 {
  0% {
	  transform:translateY(200%);
	  transform:translateY(70px);
	  opacity:0;
	  }
  5% {
	  transform:translateY(0);
	  opacity:1;
	  }
  16% {
	  transform:translateY(0);
	  opacity:1;
	  }
  21% {
	  transform:translateY(-200%);
	  transform:translateY(-70px);
	  opacity:0;
	  }
  100% {
	  transform:translateY(-70px);
	  opacity:0;
	  }
}
/*
@keyframes credit-2 {
  0% {
	  transform:translateY(200%);
	  opacity:0;
	  }
  20% {
	  transform:translateY(200%);
	  opacity:0;
	  }
  25% {
	  transform:translateY(0%);
	  opacity:1;
	  }
  40% {
	  transform:translateY(0%);
	  opacity:1;
	  }
  45% {
	  transform:translateY(-200%);
	  opacity:0;
	  }
  100% {
	  transform:translateY(-200%);
	  opacity:0;
	  }
}
@keyframes credit-3 {
  0% {
	  transform:translateY(200%);
	  opacity:0;
	  }
  25% {
	  transform:translateY(200%);
	  opacity:0;
	  }
  35% {
	  transform:translateY(0%);
	  opacity:1;
	  }
  45% {
	  transform:translateY(0%);
	  opacity:1;
	  }
  50% {
	  transform:translateY(-200%);
	  opacity:0;
	  }
  100% {
	  transform:translateY(-200%);
	  opacity:0;
	  }
}
@keyframes credit-4 {
  0% {
	  transform:translateY(200%);
	  opacity:0;
	  }
  45% {
	  transform:translateY(200%);
	  opacity:0;
	  }
  50% {
	  transform:translateY(0%);
	  opacity:1;
	  }
  60% {
	  transform:translateY(0%);
	  opacity:1;
	  }
  65% {
	  transform:translateY(-200%);
	  opacity:0;
	  }
  100% {
	  transform:translateY(-200%);
	  opacity:0;
	  }
}*/