@font-face {
  font-family: 'Star Jedi_Cyrillic';
  src: local('Star Jedi_Cyrillic'), url('../fonts/star_jedi.otf') format('truetype');
}

.fest-footer {
  margin: 10px 0;
}

.fest-footer .btn.photo {
  width: 100%;
}

.fest-footer .btn.photo span {
  font-weight: 800;
}

.starwars {
  height: 75vh;

  overflow: hidden;
  margin: 0 auto;

  perspective: 800;
  perspective-origin: center 100px;

  -webkit-perspective: 800;
  -webkit-perspective-origin: center 100px;
}

.screen {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}

.star-logo {
  position: absolute;
  opacity: 0;
  width: 100%;

  transform-origin: center center;
  animation: star-logo 25s linear;
  animation-iteration-count: 1;
  animation-delay: 10s;
  animation-timing-function: ease-in;

  -webkit-transform-origin: center center;
  -webkit-animation: star-logo 25s linear;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 10s;
  -webkit-animation-timing-function: ease-in;
}

.far-far-away {
  position: absolute;
  width: 100%;

  color: #87cefa;
  line-height: 1.5;
  font-size: 48px;
  opacity: 0;

  animation: fade-in-out 5s linear;
  animation-iteration-count: 1;
  animation-delay: 3s;

  -webkit-animation: fade-in-out 5s linear;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 3s;
}

.crawl {
  position: absolute;
  width: 18em;
  height: 50em;
  bottom: 0;
  left: 50%;
  margin-left: -9em;
  font-size: 350%;
  font-weight: bold;
  text-align: justify;
  overflow: hidden;
  transform-origin: 50% 100%;
  transform: perspective(300px) rotateX(25deg);

  color: #fcdf2b;

  text-align: center;
  /*font-size: 36px;*/
  /*opacity: 0;*/

/*  animation: crawl 100s linear;
  animation-iteration-count: infinite;
  animation-delay: 5s;
  transform-style: preserve-3d;

  -webkit-animation: crawl 100s linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 5s;
  -webkit-transform-style: preserve-3d;*/
}

.crawl:after {
  position: absolute;
  content: ' ';
  left: 0;
  right: 0;
  top: 0;
  bottom: 60%;
  background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
  pointer-events: none;
}

.crawl-text {
  position: absolute;
  top: 100%;
  animation: crawl 100s linear 12s infinite;
}

.crawl p.title {
  text-transform: uppercase;
  font-size: 96px;
  /*transform: scaleX(0.6);
  -webkit-transform: scaleX(0.6);*/
}

.jedi {
  font-family: 'Star Jedi_Cyrillic', sans-serif;
}

@keyframes star-logo {
  0%   { transform: translateZ(0);         opacity:0; }
  0.1% { transform: translateZ(0);         opacity:1; }
  50%  { transform: translateZ(-50000px);  opacity:1; }
  60%  { transform: translateZ(-60000px);  opacity:0; }
  100% { transform: translateZ(-100000px); opacity:0; }
}

@keyframes fade-in-out {
  0%   { opacity:0; }
  16%  { opacity:1; }
  84%  { opacity:1; }
  100% { opacity:0; }
}

@keyframes crawl {
  0% { top: 100%; }
  100% { top: -170%; }
}

/*@keyframes crawl {
  0%   { transform: rotateX(80deg) translateZ(700px) translateY(150vh);  opacity:1;  }
  40%  { transform: rotateX(80deg) translateZ(700px) translateY(-120vh);  opacity:1; }
  80%  { transform: rotateX(80deg) translateZ(700px) translateY(-240vh); opacity:1; }
  100% { transform: rotateX(80deg) translateZ(700px) translateY(-300vh); opacity:0; }
}*/

/*@keyframes crawl {
  0%   { transform: rotateX(80deg) translateZ(700px) translateY(150vh);  opacity:1;  }
  40%  { transform: rotateX(80deg) translateZ(700px) translateY(-120vh);  opacity:1; }
  80%  { transform: rotateX(80deg) translateZ(700px) translateY(-240vh); opacity:1; }
  100% { transform: rotateX(80deg) translateZ(700px) translateY(-300vh); opacity:0; }
}*/

/*@keyframes crawl {
  0%   { transform: rotateX(80deg) translateZ(200px) translateY(500px);  opacity:1;  }
  40%  { transform: rotateX(80deg) translateZ(200px) translateY(-340px);  opacity:1; }
  80%  { transform: rotateX(80deg) translateZ(200px) translateY(-1780px); opacity:1; }
  100% { transform: rotateX(80deg) translateZ(200px) translateY(-2500px); opacity:0; }
}*/