.section.alley {
  background-color: #000;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-image: url(../../assets/images/alley/alley_bg.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.metro {
  position: absolute;
  top: 19.5vh;
  right: 50%;
  height: 19vh;
  transform: translateX(200%);
  opacity: 0;
  pointer-events: none;
}

.metro.ride {
  -webkit-animation: metro 20s linear infinite;
  -moz-animation: metro 20s linear infinite;
  animation: metro 20s linear infinite;
}

@keyframes metro {
  0% {
    top: 19vh;
    transform: translateX(200%);
    opacity: 1;
  }
  15% {
    top: 19vh;
    transform: translateX(200%);
    opacity: 1;
  }
  25% {
    top: -5.5vh;
    transform: translateX(-200%);
    opacity: 1;
  }
  100% {
    top: -5.5vh;
    transform: translateX(-200%);
    opacity: 0;
  }
}

#smoke {
  position: absolute;
  left: 45%;
  transform: translatex(-50%);
  height: 100vh;
  z-index: 0;
  top: 0;
  pointer-events: none;
  opacity: 0.7;
}

#smoke2 {
  position: absolute;
  right: 50%;
  transform: translatex(-32vh);
  height: 75vh;
  z-index: 1000;
  bottom: 5vh;
  -webkit-transition: 0s ease-in-out;
  -moz-transition: 0s ease-in-out;
  -o-transition: 0s ease-in-out;
  transition: 0s ease-in-out;
  -webkit-animation: neon_smoke 5s linear infinite;
  -moz-animation: neon_smoke 5s linear infinite;
  animation: neon_smoke 5s linear infinite;
  filter: saturate(1) brightness(100%);
  pointer-events: none;
}

@keyframes neon_smoke {
  0% {
    filter: saturate(1) brightness(100%);
  }
  1% {
    filter: saturate(0) brightness(50%);
  }
  2% {
    filter: saturate(1) brightness(100%);
  }
  3% {
    filter: saturate(0) brightness(50%);
  }
  4% {
    filter: saturate(1) brightness(100%);
  }
  5% {
    filter: saturate(0) brightness(50%);
  }
  8% {
    filter: saturate(1) brightness(100%);
  }
  100% {
    filter: saturate(1) brightness(100%);
  }
}

.dark #smoke2 {
  filter: saturate(0) brightness(50%) !important;
}

.auto {
  position: absolute;
  top: 52vh;
  width: 52vh;
  left: 50%;
  transform: translateX(-200%);
  opacity: 0;
}

.auto.ride {
  -webkit-animation: alley_auto 10s linear infinite;
  -moz-animation: alley_auto 10s linear infinite;
  animation: alley_auto 10s linear infinite;
}

@keyframes alley_auto {
  0% {
    transform: translateX(-200%);
    opacity: 0;
  }
  20% {
    transform: translateX(-200%);
    opacity: 1;
  }
  40% {
    transform: translateX(200%);
    opacity: 1;
  }
  100% {
    transform: translateX(200%);
    opacity: 0;
  }
}

.auto_light {
  position: absolute;
  top: 23.2vh;
  height: 43.5vh;
  left: 50%;
  transform: translateX(-32%);
  z-index: 101;
  opacity: 0;
  pointer-events: none;
}

.auto_light.ride {
  -webkit-animation: alley_auto_light 10s linear;
  -moz-animation: alley_auto_light 10s linear;
  animation: alley_auto_light 10s linear;
}

@keyframes alley_auto_light {
  0% {
    opacity: 0;
  }
  22% {
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  29% {
    opacity: 1;
  }
  29.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.auto_pol_cont {
  position: absolute;
  top: 52vh;
  width: 52vh;
  left: 50%;
  transform: translateX(-200%);
  opacity: 0;
  pointer-events: none;
}

.auto_pol_cont.ride {
  -webkit-animation: alley_auto2 10s linear;
  -moz-animation: alley_auto2 10s linear;
  animation: alley_auto2 10s linear;
}

@keyframes alley_auto2 {
  0% {
    transform: translateX(-200%);
    opacity: 0;
  }
  40% {
    transform: translateX(-200%);
    opacity: 1;
  }
  60% {
    transform: translateX(200%);
    opacity: 1;
  }
  100% {
    transform: translateX(200%);
    opacity: 0;
  }
}

.auto_light2 {
  position: absolute;
  top: 23.2vh;
  height: 43.5vh;
  left: 50%;
  transform: translateX(-32%);
  z-index: 101;
  opacity: 0;
  pointer-events: none;
}

.auto_light2.ride {
  -webkit-animation: alley_auto_light2 10s linear;
  -moz-animation: alley_auto_light2 10s linear;
  animation: alley_auto_light2 10s linear;
}

@keyframes alley_auto_light2 {
  0% {
    opacity: 0;
  }
  42% {
    opacity: 0;
  }
  48% {
    opacity: 1;
  }
  49% {
    opacity: 1;
  }
  49.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.auto_pol_light {
  position: absolute;
  top: 23.2vh;
  height: 43.5vh;
  left: 50%;
  transform: translateX(-32%);
  z-index: 101;
  opacity: 0;
}

.auto_pol_light.ride {
  -webkit-animation: alley_auto_pol_light 10s linear;
  -moz-animation: alley_auto_pol_light 10s linear;
  animation: alley_auto_pol_light 10s linear;
}

@keyframes alley_auto_pol_light {
  0% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  44% {
    opacity: 1;
  }
  45% {
    opacity: 0;
  }
  46% {
    opacity: 1;
  }
  47% {
    opacity: 0;
  }
  48% {
    opacity: 1;
  }
  49% {
    opacity: 0;
  }
  49.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.auto_pol {
  width: 52vh;
  position: absolute;
  pointer-events: none;
}

.pol_blue {
  position: absolute;
  top: -4.5vh;
  height: 10vh;
  left: 10vh;
  opacity: 0;
  -webkit-animation: police_light 0.3s linear infinite;
  -moz-animation: police_light 0.3s linear infinite;
  animation: police_light 0.3s linear infinite;
}

.pol_red {
  position: absolute;
  top: -4.5vh;
  height: 10vh;
  z-index: 100;
  left: 9vh;
  opacity: 0;
  -webkit-animation: police_light 0.3s linear infinite 0.15s;
  -moz-animation: police_light 0.3s linear infinite 0.15s;
  animation: police_light 0.3s linear infinite 0.15s;
}

@keyframes police_light {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.alley_street {
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-image: url(../../assets/images/alley/street_bg.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: auto 100%;
  width: 100vw;
  -webkit-animation: neon 5s linear infinite;
  -moz-animation: neon 5s linear infinite;
  animation: neon 5s linear infinite;
  z-index: 100;
}

@keyframes neon {
  0% {
    background-image: url(../../assets/images/alley/street_bg2.png);
  }
  1% {
    background-image: url(../../assets/images/alley/street_bg.png);
  }
  2% {
    background-image: url(../../assets/images/alley/street_bg2.png);
  }
  3% {
    background-image: url(../../assets/images/alley/street_bg.png);
  }
  4% {
    background-image: url(../../assets/images/alley/street_bg2.png);
  }
  5% {
    background-image: url(../../assets/images/alley/street_bg.png);
  }
  8% {
    background-image: url(../../assets/images/alley/street_bg2.png);
  }
  100% {
    background-image: url(../../assets/images/alley/street_bg2.png);
  }
}

.dark .alley_street {
  background-image: url(../../assets/images/alley/street_bg.png) !important;
}

.alley_arrow {
  height: 29vh;
  overflow: hidden;
  position: relative;
  background-image: url(../../assets/images/alley/arrow.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: auto 100%;
  top: 21vh;
  left: 50%;
  display: block;
  width: 22vh;
  -webkit-animation: neon_arrow 5s linear infinite;
  -moz-animation: neon_arrow 5s linear infinite;
  animation: neon_arrow 5s linear infinite;
  z-index: 102;
  pointer-events: none;
}

@keyframes neon_arrow {
  0% {
    background-image: url(../../assets/images/alley/arrow2.png);
  }
  1% {
    background-image: url(../../assets/images/alley/arrow.png);
  }
  2% {
    background-image: url(../../assets/images/alley/arrow2.png);
  }
  3% {
    background-image: url(../../assets/images/alley/arrow.png);
  }
  4% {
    background-image: url(../../assets/images/alley/arrow2.png);
  }
  5% {
    background-image: url(../../assets/images/alley/arrow.png);
  }
  8% {
    background-image: url(../../assets/images/alley/arrow2.png);
  }
  100% {
    background-image: url(../../assets/images/alley/arrow2.png);
  }
}

.dark .alley_arrow {
  background-image: url(../../assets/images/alley/arrow.png) !important;
  -webkit-animation: none !important;
  -moz-animation: none !important;
  animation: none !important;
}

.arrow_light_cont {
  position: relative;
  -webkit-animation: neon_lights 5s linear infinite;
  -moz-animation: neon_lights 5s linear infinite;
  animation: neon_lights 5s linear infinite;
}

@keyframes neon_lights {
  0% {
    opacity: 1;
  }
  1% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  3% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  5% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.lights1,
.lights2,
.soon {
  position: absolute;
  height: 29vh;
}

.lights1 {
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  -webkit-animation: neon_light 0.8s linear infinite;
  -moz-animation: neon_light 0.8s linear infinite;
  animation: neon_light 0.8s linear infinite;
  opacity: 1;
}

.lights2 {
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  -webkit-animation: neon_light 0.8s linear 0.4s infinite;
  -moz-animation: neon_light 0.8s linear 0.4s infinite;
  animation: neon_light 0.8s linear 0.4s infinite;
  opacity: 0;
}

.soon {
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  -webkit-animation: neon_light 2s linear infinite;
  -moz-animation: neon_light 2s linear infinite;
  animation: neon_light 2s linear infinite;
  opacity: 0;
}

@keyframes neon_light {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.foxy_cont {
  height: 16vh;
  overflow: hidden;
  position: absolute;
  top: 45.4vh;
  left: 50%;
  transform: translateX(-28.4vh);
  display: block;
  width: 10vh;
  z-index: 102;
}

.alley_foxy {
  height: 10vh;
  position: absolute;
  bottom: 0;
  left: 0;
}

.foxy_hand_cont {
  height: 3.35vh;
  position: absolute;
  top: 8.8vh;
  left: 1.3vh;
  transform-origin: 50% 10%;
  -webkit-animation: bat_throw 10s ease-out infinite;
  -moz-animation: bat_throw 10s ease-out infinite;
  animation: bat_throw 10s linear infinite;
}

.alley_foxy_hand {
  height: 3.35vh;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes bat_throw {
  0% {
    transform: rotate(0deg);
  }
  39% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(-90deg);
  }
  53% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.foxy_bat_cont {
  height: 4vh;
  position: absolute;
  top: 1.7vh;
  left: 0.5vh;
  transform-origin: 50% 30%;
  -webkit-animation: bat_jump 10s ease-out infinite;
  -moz-animation: bat_jump 10s ease-out infinite;
  animation: bat_jump 10s ease-out infinite;
}

@keyframes bat_jump {
  0% {
    transform: translatex(0vh);
  }
  40% {
    transform: translatex(0vh);
  }
  45% {
    transform: translatex(5vh);
  }
  50% {
    transform: translatex(0vh);
  }
  100% {
    transform: translatex(0vh);
  }
}

.alley_foxy_bat {
  height: 4vh;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 50% 30%;
  -webkit-animation: bat_flip 10s ease-out infinite;
  -moz-animation: bat_flip 10s ease-out infinite;
  animation: bat_flip 10s linear infinite;
}

@keyframes bat_flip {
  0% {
    transform: rotate(0deg);
    transform-origin: 50% 30%;
  }
  12% {
    transform: rotate(0deg);
    transform-origin: 50% 30%;
  }
  15% {
    transform: rotate(10deg);
  }
  17% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  23% {
    transform: rotate(0deg);
  }
  39% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
  50% {
    transform: rotate(-720deg);
  }
  60% {
    transform: rotate(-720deg);
    transform-origin: 50% 30%;
  }
  62% {
    transform: rotate(-720deg);
  }
  100% {
    transform: rotate(-720deg);
  }
}

.corner_neon {
  position: absolute;
  left: 50%;
  transform: translateX(-158%);
  height: 27.5vh;
  z-index: 101;
  top: 33.3vh;
  -webkit-animation: corner_neon 5s linear infinite;
  -moz-animation: corner_neon 5s linear infinite;
  animation: corner_neon 5s linear infinite;
  pointer-events: none;
}

@keyframes corner_neon {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  61% {
    opacity: 0;
  }
  62% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.ladder {
  position: absolute;
  top: 0;
  right: 50%;
  width: 16.5vh;
  transform: translateX(-56.5vh);
}

.drabina {
  /* WYWALIĆ */
  position: absolute;
  top: 0;
  right: 50%;
  width: 16.5vh;
  transform: translateX(-56.5vh);
}

.fura_cont {
  height: 45vh;
  position: absolute;
  bottom: -10.2vh;
  left: 49.4%;
  display: block;
  width: 130vh;
  z-index: 101;
  -webkit-transition: 3s ease-out 4s;
  -moz-transition: 3s ease-out 4s;
  -o-transition: 3s ease-out 4s;
  transition: 3s ease-out 4s;
  transform: translateX(-8%) translateY(180%) scale(1.8);
  pointer-events: none;
}

.fura_cont.enter {
  bottom: -12.2vh;
  transform: translateX(-32%) translateY(0%) scale(1);
}

.fura {
  height: 45vh;
  position: absolute;
  background-image: url(../../assets/images/alley/fura.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: auto 100%;
  bottom: 0;
  left: 0;
  display: block;
  width: 130vh;
  -webkit-animation: neon_fura 5s linear infinite;
  -moz-animation: neon_fura 5s linear infinite;
  animation: neon_fura 5s linear infinite;
  z-index: 101;
}

.dark .fura {
  background-image: url(../../assets/images/alley/fura.png) !important;
}

@keyframes neon_fura {
  0% {
    background-image: url(../../assets/images/alley/fura2.png);
  }
  1% {
    background-image: url(../../assets/images/alley/fura.png);
  }
  2% {
    background-image: url(../../assets/images/alley/fura2.png);
  }
  3% {
    background-image: url(../../assets/images/alley/fura.png);
  }
  4% {
    background-image: url(../../assets/images/alley/fura2.png);
  }
  5% {
    background-image: url(../../assets/images/alley/fura.png);
  }
  8% {
    background-image: url(../../assets/images/alley/fura2.png);
  }
  100% {
    background-image: url(../../assets/images/alley/fura2.png);
  }
}

.vendor_reflex {
  position: absolute;
  left: 50%;
  height: 101vh;
  top: 12.2vh;
  z-index: 1000;
  transform: translateX(0%);
  opacity: 0;
  pointer-events: none;
}

.vendor_reflex.enter {
  -webkit-animation: vendor_reflex 6s linear 10s infinite;
  -moz-animation: vendor_reflex 6s linear 10s infinite;
  animation: vendor_reflex 6s linear 10s infinite;
}

@keyframes vendor_reflex {
  0% {
    opacity: 0;
  }
  55% {
    opacity: 0;
  }
  56% {
    opacity: 1;
  }

  58% {
    opacity: 0;
  }
  59% {
    opacity: 1;
  }
  63% {
    opacity: 0;
  }
  64% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  71% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.alley_square {
  height: 1.4vh;
  overflow: hidden;
  position: absolute;
  top: 53.3vh;
  left: 50%;
  transform: translateX(49.3vh);
  display: block;
  z-index: 1001;
  -webkit-animation: alley_square 1s ease-out infinite;
  -moz-animation: alley_square 1s ease-out infinite;
  animation: alley_square 1s linear infinite;
}

@keyframes alley_square {
  0% {
    opacity: 0;
    box-shadow: 0 0 0px rgba(206, 3, 194, 0);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 20px rgba(206, 3, 194, 1);
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 0px rgba(206, 3, 194, 0);
  }
}

.sewer {
  position: absolute;
  left: 50%;
  width: 16vh;
  height: 6vh;
  top: 89vh;
  display: block;
  z-index: 1000;
  transform: translate(-64vh);
}

.car_duck {
  position: absolute;
  top: 5vh;
  left: 50%;
  width: 5vh;
  height: 5vh;
  z-index: 10000;
  transform: translate(-3.5vh);
  pointer-events: all !important;
}

.sit_duck {
  position: absolute;
  top: 1.5vh;
  left: 50%;
  width: 2vh;
  z-index: 10000;
  transform: translate(-3.5vh);
  pointer-events: all !important;
}

.t_lite {
  height: 81vh;
  overflow: hidden;
  position: relative;
  background-image: url(../../assets/images/alley/t_lite.png);
  background-position: left top;
  background-repeat: no-repeat;
  background-size: auto 100%;
  top: -30.5vh;
  left: 50%;
  display: block;
  width: 38vh;
  z-index: 102;
  transform: translatex(18vh);
  opacity: 0;
  mix-blend-mode: screen;
  -webkit-animation: t_lite 2s ease-out;
  -moz-animation: t_lite 2s ease-out;
  animation: t_lite 2s ease-out;
  animation-fill-mode: forwards;
}

@keyframes t_lite {
  0% {
    opacity: 0;
  }
  9% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  12% {
    opacity: 0;
  }
  14% {
    opacity: 1;
  }
  16% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.tapes {
  position: absolute;
  top: 0;
  left: 50%;
  height: 94vh;
  transform: translate(-50%);
  z-index: 100;
  pointer-events: none !important;
}

.tapes2 {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 103vh;
  transform: translate(-50%);
  z-index: 100;
  pointer-events: none !important;
}