/* @include animation(animation-name 2s ease 1s 1 normal forwards paused); */
/* line 5, ../sass/main.scss */
html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

/* line 11, ../sass/main.scss */
.ad {
  width: 982px;
  height: 150px;
  overflow: hidden;
  position: absolute;
  background-color: #000;
  -moz-transform: translateZ(0px) perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -ms-transform: translateZ(0px) perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -webkit-transform: translateZ(0px) perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform: translateZ(0px) perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/* line 22, ../sass/main.scss */
.fog-container {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  -moz-transition: opacity 2s linear 0s;
  -o-transition: opacity 2s linear 0s;
  -webkit-transition: opacity 2s linear;
  -webkit-transition-delay: 0s;
  transition: opacity 2s linear 0s;
}

/* line 31, ../sass/main.scss */
.fog {
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/fog.jpg") repeat-x;
  width: 2058px;
  height: 100%;
  -moz-transform: translateX(-1029px);
  -ms-transform: translateX(-1029px);
  -webkit-transform: translateX(-1029px);
  transform: translateX(-1029px);
}

/* line 42, ../sass/main.scss */
.sprite {
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
  position: absolute;
  background: url("../img/spritesheet.png") no-repeat;
}

/* line 49, ../sass/main.scss */
.artwork {
  width: 982px;
  height: 150px;
  background-position: -0px -608px;
}

/* line 50, ../sass/main.scss */
.audio-off {
  width: 24px;
  height: 24px;
  background-position: -984px -78px;
}

/* line 51, ../sass/main.scss */
.audio-on {
  width: 24px;
  height: 24px;
  background-position: -984px -52px;
}

/* line 52, ../sass/main.scss */
.cta {
  width: 141px;
  height: 69px;
  background-position: -222px -912px;
}

/* line 53, ../sass/main.scss */
.cta-glow {
  width: 141px;
  height: 69px;
  background-position: -508px -912px;
}

/* line 54, ../sass/main.scss */
.cta-over {
  width: 141px;
  height: 69px;
  background-position: -365px -912px;
}

/* line 55, ../sass/main.scss */
.fog-mask {
  width: 982px;
  height: 150px;
  background-position: -0px -456px;
}

/* line 56, ../sass/main.scss */
.frame {
  width: 982px;
  height: 150px;
  background-position: -0px -304px;
}

/* line 57, ../sass/main.scss */
.play {
  width: 24px;
  height: 24px;
  background-position: -984px -26px;
}

/* line 58, ../sass/main.scss */
.pre {
  width: 220px;
  height: 84px;
  background-position: -0px -912px;
}

/* line 59, ../sass/main.scss */
.rowling {
  width: 320px;
  height: 150px;
  background-position: -329px -760px;
}

/* line 60, ../sass/main.scss */
.stop {
  width: 24px;
  height: 24px;
  background-position: -984px -0px;
}

/* line 61, ../sass/main.scss */
.title {
  width: 982px;
  height: 150px;
  background-position: -0px -0px;
}

/* line 62, ../sass/main.scss */
.title-flars {
  width: 982px;
  height: 150px;
  background-position: -0px -152px;
}

/* line 63, ../sass/main.scss */
.trailer {
  width: 327px;
  height: 150px;
  background-position: -0px -760px;
}

/* line 65, ../sass/main.scss */
.container {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: none;
}

/* line 74, ../sass/main.scss */
.exit {
  cursor: pointer;
}

/* Position and animate sprites */
/* line 80, ../sass/main.scss */
.pre {
  right: 0;
  opacity: 0;
  -moz-transition: opacity 0.4s linear 2s;
  -o-transition: opacity 0.4s linear 2s;
  -webkit-transition: opacity 0.4s linear;
  -webkit-transition-delay: 2s;
  transition: opacity 0.4s linear 2s;
}

/* line 87, ../sass/main.scss */
.trailer {
  right: 0;
  opacity: 0;
  -moz-transition: opacity 2s linear 0s;
  -o-transition: opacity 2s linear 0s;
  -webkit-transition: opacity 2s linear;
  -webkit-transition-delay: 0s;
  transition: opacity 2s linear 0s;
}

/* line 94, ../sass/main.scss */
.cta-container {
  position: absolute;
  top: 70px;
  left: 764px;
  width: 141px;
  height: 69px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  -moz-transition: opacity 0.4s linear 2s;
  -o-transition: opacity 0.4s linear 2s;
  -webkit-transition: opacity 0.4s linear;
  -webkit-transition-delay: 2s;
  transition: opacity 0.4s linear 2s;
}
/* line 108, ../sass/main.scss */
.cta-container:hover .cta-over {
  opacity: 1;
}

/* line 114, ../sass/main.scss */
.cta-over {
  opacity: 0;
  -moz-transition: opacity 0.25s linear;
  -o-transition: opacity 0.25s linear;
  -webkit-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}

/* line 120, ../sass/main.scss */
.cta-hit {
  position: absolute;
  background-color: rgba(255, 255, 255, 0);
  height: 50px;
  width: 100%;
  top: 10px;
  pointer-events: all;
}

/* line 129, ../sass/main.scss */
.video-container {
  position: absolute;
  top: 0px;
  left: 701px;
  opacity: 0;
  -moz-transition: opacity 2s linear 0s;
  -o-transition: opacity 2s linear 0s;
  -webkit-transition: opacity 2s linear;
  -webkit-transition-delay: 0s;
  transition: opacity 2s linear 0s;
}

/* line 138, ../sass/main.scss */
#video {
  position: absolute;
  top: 0px;
  left: 0px;
}

/* line 144, ../sass/main.scss */
.trailer-controls {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 268px;
  height: 150px;
  opacity: 0;
  -moz-transition: opacity 0.4s linear 0s;
  -o-transition: opacity 0.4s linear 0s;
  -webkit-transition: opacity 0.4s linear;
  -webkit-transition-delay: 0s;
  transition: opacity 0.4s linear 0s;
}

/* line 155, ../sass/main.scss */
.play {
  bottom: 0px;
  left: 0px;
  display: none;
}

/* line 161, ../sass/main.scss */
.stop {
  bottom: 0px;
  left: 0px;
  display: none;
}

/* line 167, ../sass/main.scss */
.audio-off {
  bottom: 0px;
  right: 0px;
  display: none;
}

/* line 173, ../sass/main.scss */
.audio-on {
  bottom: 0px;
  right: 0px;
  display: none;
}

/* line 179, ../sass/main.scss */
.cta-over {
  opacity: 0;
  -moz-transition: opacity 0.25s linear;
  -o-transition: opacity 0.25s linear;
  -webkit-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}
/* line 184, ../sass/main.scss */
.cta-over:hover {
  opacity: 1;
}

/* line 189, ../sass/main.scss */
.title-container {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  -moz-transition: all 3s cubic-bezier(0, 0.05, 0.32, 1) 0s;
  -o-transition: all 3s cubic-bezier(0, 0.05, 0.32, 1) 0s;
  -webkit-transition: all 3s cubic-bezier(0, 0.05, 0.32, 1);
  -webkit-transition-delay: 0s;
  transition: all 3s cubic-bezier(0, 0.05, 0.32, 1) 0s;
}

/* line 199, ../sass/main.scss */
.rowling {
  -moz-transform: translateY(150px);
  -ms-transform: translateY(150px);
  -webkit-transform: translateY(150px);
  transform: translateY(150px);
  -moz-transition: -moz-transform 2s cubic-bezier(0, 0.05, 0.32, 1) 1s;
  -o-transition: -o-transform 2s cubic-bezier(0, 0.05, 0.32, 1) 1s;
  -webkit-transition: -webkit-transform 2s cubic-bezier(0, 0.05, 0.32, 1);
  -webkit-transition-delay: 1s;
  transition: transform 2s cubic-bezier(0, 0.05, 0.32, 1) 1s;
}

/* line 207, ../sass/main.scss */
.sync .fog-container {
  opacity: 1;
}
/* line 210, ../sass/main.scss */
.sync .trailer-controls {
  opacity: 1;
}
/* line 213, ../sass/main.scss */
.sync .video-container {
  opacity: 1;
}
/* line 216, ../sass/main.scss */
.sync .cta-container {
  opacity: 1;
}
/* line 219, ../sass/main.scss */
.sync .pre {
  opacity: 1;
}
/* line 222, ../sass/main.scss */
.sync .trailer {
  opacity: 1;
}
/* line 225, ../sass/main.scss */
.sync .title-container {
  opacity: 1;
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
/* line 229, ../sass/main.scss */
.sync .rowling {
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}
/* line 233, ../sass/main.scss */
.sync .cta-glow {
  -moz-animation: glow-animation 5s linear 0s infinite normal forwards;
  -webkit-animation: glow-animation 5s linear 0s infinite normal forwards;
  animation: glow-animation 5s linear 0s infinite normal forwards;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
/* line 238, ../sass/main.scss */
.sync .fog {
  -moz-animation: fog-animation 10s linear 0s infinite normal forwards;
  -webkit-animation: fog-animation 10s linear 0s infinite normal forwards;
  animation: fog-animation 10s linear 0s infinite normal forwards;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
/* line 243, ../sass/main.scss */
.sync .title-flars {
  -moz-animation: title-flars-animation 4s linear 0s infinite normal forwards;
  -webkit-animation: title-flars-animation 4s linear 0s infinite normal forwards;
  animation: title-flars-animation 4s linear 0s infinite normal forwards;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

@-moz-keyframes fog-animation {
  0% {
    -moz-transform: translateX(-1029px);
    transform: translateX(-1029px);
  }
  100% {
    -moz-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@-webkit-keyframes fog-animation {
  0% {
    -webkit-transform: translateX(-1029px);
    transform: translateX(-1029px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@keyframes fog-animation {
  0% {
    -moz-transform: translateX(-1029px);
    -ms-transform: translateX(-1029px);
    -webkit-transform: translateX(-1029px);
    transform: translateX(-1029px);
  }
  100% {
    -moz-transform: translateX(0px);
    -ms-transform: translateX(0px);
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}
@-moz-keyframes glow-animation {
  0% {
    -moz-transform: translateX(-141px);
    transform: translateX(-141px);
  }
  100% {
    -moz-transform: translateX(141px);
    transform: translateX(141px);
  }
}
@-webkit-keyframes glow-animation {
  0% {
    -webkit-transform: translateX(-141px);
    transform: translateX(-141px);
  }
  100% {
    -webkit-transform: translateX(141px);
    transform: translateX(141px);
  }
}
@keyframes glow-animation {
  0% {
    -moz-transform: translateX(-141px);
    -ms-transform: translateX(-141px);
    -webkit-transform: translateX(-141px);
    transform: translateX(-141px);
  }
  100% {
    -moz-transform: translateX(141px);
    -ms-transform: translateX(141px);
    -webkit-transform: translateX(141px);
    transform: translateX(141px);
  }
}
@-moz-keyframes title-flars-animation {
  0% {
    opacity: .2;
  }
  10% {
    opacity: .8;
  }
  20% {
    opacity: .3;
  }
  30% {
    opacity: .5;
  }
  40% {
    opacity: .1;
  }
  50% {
    opacity: .6;
  }
  60% {
    opacity: .2;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: .3;
  }
  90% {
    opacity: .9;
  }
  100% {
    opacity: .4;
  }
}
@-webkit-keyframes title-flars-animation {
  0% {
    opacity: .2;
  }
  10% {
    opacity: .8;
  }
  20% {
    opacity: .3;
  }
  30% {
    opacity: .5;
  }
  40% {
    opacity: .1;
  }
  50% {
    opacity: .6;
  }
  60% {
    opacity: .2;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: .3;
  }
  90% {
    opacity: .9;
  }
  100% {
    opacity: .4;
  }
}
@keyframes title-flars-animation {
  0% {
    opacity: .2;
  }
  10% {
    opacity: .8;
  }
  20% {
    opacity: .3;
  }
  30% {
    opacity: .5;
  }
  40% {
    opacity: .1;
  }
  50% {
    opacity: .6;
  }
  60% {
    opacity: .2;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: .3;
  }
  90% {
    opacity: .9;
  }
  100% {
    opacity: .4;
  }
}