.pora {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  font-size: 20px;
}

.section.rollin {
  height: 100vh;
}

.section.rollin .wrapper {
  height: 100vh;
  max-width: 100%;
}

.sun {
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  display: block;
  width: 140px;
  height: 140px;
  left: 60%;
  top: 100px;
  pointer-events: none;
}

.sun-mid {
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  content: "";
  display: block;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  left: 0px;
  top: 0px;
  animation: sun_pulse 2s linear infinite;
}

.sun:before {
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  content: "";
  display: block;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  left: 15px;
  top: 15px;
  animation: sun_pulse 2s linear infinite;
}

.sun:after {
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  left: 30px;
  top: 30px;
}

@keyframes sun_pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.18);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.birds {
  mix-blend-mode: multiply;
  width: 10vw;
  position: relative;
  animation: birds 20s ease infinite;
}

@keyframes birds {
  0% {
    top: 50vh;
    left: -10vw;
  }
  25% {
    top: 35vh;
  }
  50% {
    top: 20vh;
  }
  100% {
    left: 130vw;
  }
}

.city {
  background-image: url(../../assets/images/rollin/city-scape.png);
  background-repeat: repeat-x;
  background-size: auto;
  background-position: 0% bottom;
  height: 33vh;
  width: 4970px;
  position: absolute;
  animation: slide 90s linear infinite;
  bottom: 33vh;
  min-height: 360px;
  pointer-events: none;
}

.stars {
  background-image: url(../../assets/images/rollin/stars.png);
  background-repeat: repeat-x;
  background-size: cover;
  background-position: center top;
  height: 33vh;
  width: 100%;
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.palms1 {
  background-image: url(../../assets/images/rollin/palmy_jasne.png);
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0% bottom;
  height: 800px;
  width: 4970px;
  position: absolute;
  animation: slide 70s linear infinite;
  bottom: 33vh;
  pointer-events: none;
}

.palms2 {
  background-image: url(../../assets/images/rollin/palmy_ciemne.png);
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0% bottom;
  height: 800px;
  width: 4970px;
  position: absolute;
  animation: slide 60s linear infinite;
  bottom: 33vh;
  pointer-events: none;
}

@keyframes slide {
  0% {
    background-position: 0% bottom;
  }
  100% {
    background-position: 200% bottom;
  }
}

.cable {
  position: absolute;
  animation: cable_slide 30s linear infinite;
  top: 0px;
  left: 0px;
  width: 50%;
  pointer-events: none;
}

@keyframes cable_slide {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  25%,
  100% {
    -webkit-transform: translateX(200%);
    transform: translateX(200%);
  }
}

.luna {
  background-image: url(../../assets/images/rollin/luna.png);
  background-repeat: repeat-x;
  background-size: auto 35%;
  background-position: center;
  height: 100vh;
  position: absolute;
  width: 100%;
  bottom: 33vh;
  transform: translateY(50%);
  pointer-events: none;
}

.tape {
  position: absolute;
  width: auto;
  height: 3vh;
  left: 0%;
  bottom: 14vh;
  transform: translatex(-100%);
  -webkit-animation: tape 20s linear infinite;
  -moz-animation: tape 20s linear infinite;
  animation: tape 20s linear infinite;
  -webkit-user-drag: none;
}

.tape {
  display: none;
}

.noon .tape {
  display: block;
}

@keyframes tape {
  0% {
    transform: translatex(-100%);
  }
  20% {
    transform: translatex(-100%);
  }
  40% {
    transform: translatex(100vw);
  }
  100% {
    transform: translatex(100vw);
  }
}

.car_cont {
  position: absolute;
  width: auto;
  left: 50%;
  bottom: 23vh;
  transform: translate(-50%, 0%);
  -webkit-animation: enter_car 3s ease-out;
  -moz-animation: enter_car 3s ease-out;
  animation: enter_car 3s ease-out;
  pointer-events: none;
}

@keyframes enter_car {
  0% {
    left: 100%;
    transform: translate(0%, 0%);
  }
  100% {
    left: 50%;
    transform: translate(-50%, 0%);
  }
}

.car_cont.jump .car {
  transform-origin: 72% 77%;
  -webkit-animation: car_jump 1s ease-in-out infinite;
  -moz-animation: car_jump 1s ease-in-out infinite;
  animation: car_jump 1s ease-in-out infinite;
}

@keyframes car_jump {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.duck {
  position: absolute;
  top: -1.05vw;
  left: 47%;
  bottom: 0%;
  height: 1.44vw;
  width: 1.72vw;
  background-image: url(../../assets/images/rollin/car/duck.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: bottom;
  -webkit-animation: duck_jump 9s cubic-bezier(0.87, 0.12, 0.2, 0.73) infinite;
  -moz-animation: duck_jump 9s cubic-bezier(0.87, 0.12, 0.2, 0.73) infinite;
  animation: duck_jump 9s cubic-bezier(0.87, 0.12, 0.2, 0.73) infinite;
  pointer-events: all !important;
}

@keyframes duck_jump {
  0% {
    transform: scale(1, 1) translateY(0px);
  }
  10% {
    transform: scale(1.3, 0.8) translateY(0px);
  }
  15% {
    transform: scale(0.7, 1.3) translateY(-4vw);
  }
  20% {
    transform: scale(1, 1) translateY(0px);
  }
  21% {
    transform: scale(1.2, 0.9) translateY(0px);
  }
  24.3% {
    transform: scale(1, 0.9) translateY(-0.61vw);
  }
  27.3% {
    transform: scale(1, 1) translateY(0px);
  }
  100% {
    transform: scale(1, 1) translateY(0px);
  }
}

.trunk_cont {
  position: absolute;
  width: 40vh;
  left: 50%;
  transform: translatex(35vh);
  top: 12.7vh;
}

.trunk {
  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
  -moz-transition: all 0.6s;
  transition: all 0.6s;
  position: absolute;
  width: 40vh;
  transform-origin: 0%;
  transform: rotate(5deg);
}

.env {
  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
  -moz-transition: all 0.6s;
  transition: all 0.6s;
  position: absolute;
  width: 5vh;
  transform-origin: 50% 0%;
  left: 50%;
  transform: translate(6vh);
  top: 4vh;
}

.trunk_cont.open .trunk {
  transform: rotate(-22deg);
  pointer-events: all !important;
}

.trunk_cont.open .env {
  top: -10vh;
  pointer-events: all !important;
  -webkit-animation: env_swing 1s linear infinite;
  -moz-animation: env_swing 1s linear infinite;
  animation: env_swing 1s linear infinite;
}

@keyframes env_swing {
  0% {
    transform: translatex(6vh) rotate(-10deg);
  }
  50% {
    transform: translatex(6vh) rotate(10deg);
  }
  100% {
    transform: translatex(6vh) rotate(-10deg);
  }
}

.car_zawieszenie {
  width: 75vw;
  height: 17.97vw;
  position: absolute;
  bottom: 0%;
  -webkit-animation: swing 3s linear infinite;
  -moz-animation: swing 3s linear infinite;
  animation: swing 3s linear infinite;
  background-image: url(../../assets/images/rollin/car/zawieszenie.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.car_karoseria {
  width: 75vw;
  height: 17.97vw;
  position: relative;
  z-index: 100;
  -webkit-animation: swing 3s linear infinite;
  -moz-animation: swing 3s linear infinite;
  animation: swing 3s linear infinite;
  background-image: url(../../assets/images/rollin/car/karoseria.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.car_karoseria_top {
  width: 75vw;
  height: 17.97vw;
  position: absolute;
  z-index: 98;
  -webkit-animation: swing 3s linear infinite;
  -moz-animation: swing 3s linear infinite;
  animation: swing 3s linear infinite;
  background-image: url(../../assets/images/rollin/car/karoseria_top.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.car_karoseria_int {
  width: 75vw;
  height: 17.97vw;
  position: absolute;
  z-index: 1;
  -webkit-animation: swing 3s linear infinite;
  -moz-animation: swing 3s linear infinite;
  animation: swing 3s linear infinite;
  background-image: url(../../assets/images/rollin/car/wnetrze-karoserii.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.car_smoke {
  position: absolute;
  width: 61.25vw;
  bottom: 8.45vw;
  z-index: 120;
  left: 27.95vw;
  -webkit-animation: swing 3s linear infinite;
  -moz-animation: swing 3s linear infinite;
  animation: swing 3s linear infinite;
  mix-blend-mode: hard-light;
  filter: blur(4px);
}

.car_shadow {
  position: absolute;
  width: 75vw;
  bottom: -1.8vw;
  left: 0;
  height: 2.09vw;
  background-image: url(../../assets/images/rollin/car/cien.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -webkit-animation: shadow-swing 4s ease-in-out infinite;
  -moz-animation: shadow-swing 4s ease-in-out infinite;
  animation: shadow-swing 4s ease-in-out infinite;
  transform-origin: 50% 0%;
  pointer-events: none;
}

@keyframes swing {
  0% {
    -webkit-transform: translateY(-0.15vw);
    transform: translateY(-0.15vw);
  }
  50% {
    -webkit-transform: translateY(0.15vw);
    transform: translateY(0.15vw);
  }
  100% {
    -webkit-transform: translateY(-0.15vw);
    transform: translateY(-0.15vw);
  }
}

@keyframes shadow-swing {
  0% {
    -webkit-transform: scale(1) translatex(0vw);
    transform: scale(1) translatex(0vw);
  }
  25% {
    -webkit-transform: scalex(1.005) translatex(0.4vw);
    transform: scalex(1.01) translatex(0.4vw);
  }
  45% {
    -webkit-transform: scalex(1) translatex(-0.3vw);
    transform: scalex(1) translatex(-0.3vw);
  }
  60% {
    -webkit-transform: scalex(1.01) translatex(0.4vw);
    transform: scalex(1.01) translatex(0.4vw);
  }
  70% {
    -webkit-transform: scalex(1) translatex(-0.2vw);
    transform: scalex(1) translatex(-0.2vw);
  }
  85% {
    -webkit-transform: scalex(1.005) translatex(0.2vw);
    transform: scalex(1.01) translatex(0.2vw);
  }
  100% {
    -webkit-transform: scalex(1) translatex(0vw);
    transform: scalex(1) translatex(0vw);
  }
}

.wheel1 {
  position: absolute;
  bottom: 0;
  left: 7.25vw;
  -webkit-animation: wheel1 2s linear infinite;
  -moz-animation: wheel1 2s linear infinite;
  animation: wheel1 2s linear infinite;
}

.wheel2 {
  position: absolute;
  bottom: 0;
  left: 50.17vw;
  -webkit-animation: wheel1 2s linear 0.5s infinite;
  -moz-animation: wheel1 2s linear 0.5s infinite;
  animation: wheel1 2s linear 0.5s infinite;
}

@keyframes wheel1 {
  0% {
    transform: translatey(0px);
  }
  9% {
    transform: translatey(0px);
  }
  10% {
    transform: translatey(-0.08vw);
  }
  14% {
    transform: translatey(-0.08vw);
  }
  16% {
    transform: translatey(0px);
  }
  44% {
    transform: translatey(0px);
  }
  45% {
    transform: translatey(0.07vw);
  }
  50% {
    transform: translatey(0.07vw);
  }
  52% {
    transform: translatey(0px);
  }
  53% {
    transform: translatey(0px);
  }
  54% {
    transform: translatey(-0.08vw);
  }
  60% {
    transform: translatey(-0.08vw);
  }
  62% {
    transform: translatey(0px);
  }
  74% {
    transform: translatey(0px);
  }
  75% {
    transform: translatey(0.06vw);
  }
  82% {
    transform: translatey(0.06vw);
  }
  84% {
    transform: translatey(0px);
  }
  92% {
    transform: translatey(0px);
  }
  93% {
    transform: translatey(0.08vw);
  }
  96% {
    transform: translatey(0.08vw);
  }
  98% {
    transform: translatey(0px);
  }
  100% {
    transform: translatey(0px);
  }
}

.jump .wheel1 {
  position: absolute;
  bottom: 0;
  left: 7.25vw;
  -webkit-animation: wheel_jump 1s ease-in-out 0.02s infinite;
  -moz-animation: wheel_jump 1s ease-in-out 0.02s infinite;
  animation: wheel_jump 1s ease-in-out 0.02s infinite;
}

@keyframes wheel_jump {
  0% {
    transform: translatey(0px) translatex(0vw);
  }
  50% {
    transform: translatey(3.2vw) translatex(0.35vw);
  }
  100% {
    transform: translatey(0px) translatex(0vw);
  }
}

.car {
  -webkit-animation: car 4s ease-in-out infinite;
  -moz-animation: car 4s ease-in-out infinite;
  animation: car 4s ease-in-out infinite;
  transform-origin: 44% 90%;
  transform: rotate(0deg);
  pointer-events: none;
}

@keyframes car {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(0.4deg);
  }
  45% {
    transform: rotate(-0.2deg);
  }
  60% {
    transform: rotate(0.4deg);
  }
  70% {
    transform: rotate(-0.2deg);
  }
  85% {
    transform: rotate(0.2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.car_felga1 {
  background-image: url(../../assets/images/rollin/car/felga.png);
  background-repeat: repeat-x;
  background-size: cover;
  background-position: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 7.98vw;
  height: 7.98vw;
  -webkit-animation: spin_wheel 1.1s linear infinite;
  -moz-animation: spin_wheel 1.1s linear infinite;
  animation: spin_wheel 1.1s linear infinite;
  z-index: 10;
}

.car_felga2 {
  background-image: url(../../assets/images/rollin/car/felga.png);
  background-repeat: repeat-x;
  background-size: cover;
  background-position: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 7.98vw;
  height: 7.98vw;
  -webkit-animation: spin_wheel 1.1s linear infinite;
  -moz-animation: spin_wheel 1.1s linear infinite;
  animation: spin_wheel 1.1s linear infinite;
  z-index: 10;
}

@-moz-keyframes spin_wheel {
  100% {
    -moz-transform: rotate(-360deg);
  }
}

@-webkit-keyframes spin_wheel {
  100% {
    -webkit-transform: rotate(-360deg);
  }
}

@keyframes spin_wheel {
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

.car_foxy {
  background-image: url(../../assets/images/rollin/car/foxy.png);
  background-repeat: repeat-x;
  background-size: cover;
  background-position: center;
  width: 7.68vw;
  height: 7.8vw;
  position: absolute;
  bottom: 9vw;
  left: 30.2vw;
  z-index: 10;
  -webkit-animation: swing 3s linear infinite;
  -moz-animation: swing 3s linear infinite;
  animation: swing 3s linear infinite;
}

.car_foxy2 {
  background-image: url(../../assets/images/rollin/car/druga-foxy.png);
  background-repeat: repeat-x;
  background-size: cover;
  background-position: center;
  width: 5.89vw;
  height: 7.98vw;
  position: absolute;
  bottom: 9vw;
  left: 41vw;
  z-index: 10;
  -webkit-animation: swing 3s linear infinite;
  -moz-animation: swing 3s linear infinite;
  animation: swing 3s linear infinite;
}

.hawaii {
  background-image: url(../../assets/images/rollin/hawaii_noon.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 19.51vw;
  height: 33.73vw;
  position: absolute;
  -webkit-animation: move_girls 40s linear -20s infinite;
  -moz-animation: move_girls 40s linear -20s infinite;
  animation: move_girls 40s linear -20s infinite;
  bottom: 1.22vw;
  left: 0px;
  z-index: 100;
  transform: scale(1.3);
  pointer-events: none;
}

.hoodie {
  background-image: url(../../assets/images/rollin/hoodie_noon.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 32.69vw;
  height: 50.66vw;
  position: absolute;
  -webkit-animation: move_girls 40s linear 0s infinite;
  -moz-animation: move_girls 40s linear 0s infinite;
  animation: move_girls 40s linear 0s infinite;
  bottom: 1.22vw;
  left: 0px;
  z-index: 100;
  transform: scale(1.3);
  pointer-events: none;
}

.girls {
  width: 49.28vw;
  height: 33.73vw;
  position: absolute;
  z-index: 100;
  -webkit-animation: move_girls 40s linear -10s infinite;
  -moz-animation: move_girls 40s linear -10s infinite;
  animation: move_girls 40s linear -10s infinite;
  bottom: 1.22vw;
  left: 0px;
  z-index: 100;
  transform: scale(1.3);
  pointer-events: none;
}

.jersey {
  width: 17.85vw;
  height: 33.73vw;
  position: absolute;
  z-index: 100;
  -webkit-animation: move_jersey 40s linear -10s infinite;
  -moz-animation: move_jersey 40s linear -10s infinite;
  animation: move_jersey 40s linear -10s infinite;
  background-image: url(../../assets/images/rollin/jersey_noon.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 100;
  bottom: 0px;
  pointer-events: none;
}

.rower {
  width: 27.71vw;
  height: 23.35vw;
  position: absolute;
  z-index: 100;
  background-image: url(../../assets/images/rollin/rower_noon.png);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  left: 40%;
  bottom: 0px;
  pointer-events: none;
}

@keyframes move_girls {
  0%,
  50% {
    left: -100%;
  }
  75%,
  100% {
    left: 200%;
  }
}

@keyframes move_jersey {
  0%,
  50% {
    left: 0%;
  }
  85%,
  100% {
    left: 50%;
  }
}

.car_hand {
  background-image: url(../../assets/images/rollin/car/lapa1_noon.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  width: 11.06vw;
  height: 12.9vw;
  position: absolute;
  bottom: -0.5vw;
  left: 25.2vw;
  -webkit-animation: hand_swing 3s linear infinite;
  -moz-animation: hand_swing 3s linear infinite;
  animation: hand_swing 3s linear infinite;
  transform-origin: 11.7vw 0.8vw;
  -webkit-transform-origin: 11.7vw 0.8vw;
  z-index: 100;
}

@keyframes hand_swing {
  0% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
}

.car_baseball {
  background-image: url(../../assets/images/rollin/car/baseball_noon.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  width: 12.5vw;
  height: 10.6vw;
  position: absolute;
  top: -2.5vw;
  left: 39vw;
  -webkit-animation: hand2_swing 4s linear infinite;
  -moz-animation: hand2_swing 4s linear infinite;
  animation: hand2_swing 4s linear infinite;
  transform-origin: 5.53vw 9.52vw;
  -webkit-transform-origin: 5.53vw 9.52vw;
  z-index: 99;
}

@keyframes hand2_swing {
  0% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
  }
}

.radio_box {
  -webkit-transition: all 0.6s;
  -o-transition: all 0.6s;
  -moz-transition: all 0.6s;
  transition: all 0.6s;
  background-image: url(../../assets/images/rollin/radio_noon.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  width: 200px;
  height: 125px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 100;
  cursor: move;
  transform: translatey(0vh);
}

.radio_box.shoot {
  transform: translatey(-100vh);
}

.notes {
  z-index: 1000;
  position: absolute;
  height: 7vh;
  bottom: 40px;
  left: 90px;
}

.radio_box.open {
  background-image: url(../../assets/images/rollin/radio_noon_open.png);
}

.radio_eq {
  background-image: url(../../assets/images/rollin/radio_eq.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: left top;
  width: 200px;
  height: 125px;
  width: 100%;
  position: absolute;
  -webkit-animation: eq_pulse 1.5s linear infinite;
  -moz-animation: eq_pulse 1.5s linear infinite;
  animation: eq_pulse 1.5s linear infinite;
}

.radio_light {
  background-image: url(../../assets/images/rollin/radio_light.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  width: 200px;
  height: 125px;
  width: 100%;
  position: absolute;
  -webkit-animation: radio_pulse 0.4s linear infinite;
  -moz-animation: radio_pulse 0.4s linear infinite;
  animation: radio_pulse 0.4s linear infinite;
}

.open .radio_eq,
.open .radio_light {
  display: none !important;
}

.radio_cass {
  display: block;
  position: absolute;
  width: 60px;
  height: 40px;
  left: 68px;
  top: 52px;
  cursor: pointer;
}

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

@keyframes eq_pulse {
  0% {
    width: 50%;
  }
  16% {
    width: 0%;
  }
  32% {
    width: 25%;
  }
  48% {
    width: 0%;
  }
  64% {
    width: 35%;
  }
  80% {
    width: 0%;
  }
  96% {
    width: 50%;
  }
}

.watch_box {
  background-image: url(../../assets/images/rollin/watch_day.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  width: 141px;
  height: 125px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  cursor: pointer;
}

.watch_display {
  width: 80px;
  display: block;
  margin: 43px 0 0 30px;
  height: 43px;
  position: relative;
}

.watch_hour {
  color: #b71d27;
  font-size: 23px;
  font-weight: 500;
  font-family: Anton;
  display: inline-block;
  line-height: 23px;
  bottom: 2px;
  position: absolute;
  left: 4px;
}

.watch_sek {
  color: #b71d27;
  font-size: 16px;
  font-weight: 500;
  font-family: Anton;
  display: inline-block;
  line-height: 16px;
  bottom: 6px;
  position: absolute;
  right: 6px;
}

.watch_date {
  color: #b71d27;
  font-size: 7px;
  font-weight: 500;
  font-family: arial;
  display: inline-block;
  line-height: 7px;
  top: 6px;
  position: absolute;
  left: 4px;
}

.watch_day {
  color: #b71d27;
  font-size: 7px;
  font-weight: 500;
  font-family: arial;
  display: inline-block;
  line-height: 7px;
  top: 6px;
  position: absolute;
  right: 4px;
}

.car_light_front,
.car_light_back {
  display: none;
}

.plane_cont {
  width: auto;
  padding-right: 7.58vw;
  height: 3.04vw;
  position: relative;
  animation: plane 70s linear infinite;
  top: 8vh;
  position: absolute;
  display: flex;
  filter: saturate(1);
  opacity: 1;
  pointer-events: none;
}

@keyframes plane {
  0% {
    -webkit-transform: scale(-0.5, 0.5);
    transform: scale(-0.5, 0.5);
    transform: scale(-0.3, 0.3);
    filter: saturate(0.4);
    opacity: 0.7;
    top: 10vh;
    left: -100%;
  }
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    filter: saturate(1);
    opacity: 1;
    top: 10vh;
    left: -100%;
  }
  30% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    filter: saturate(1);
    opacity: 1;
    top: 10vh;
    left: 200%;
  }
  31% {
    -webkit-transform: scale(-0.5, 0.5);
    transform: scale(-0.5, 0.5);
    transform: scale(-0.3, 0.3);
    filter: saturate(0.4);
    opacity: 0.7;
    top: 10vh;
    left: 200%;
  }
  100% {
    -webkit-transform: scale(-0.5, 0.5);
    transform: scale(-0.5, 0.5);
    transform: scale(-0.3, 0.3);
    filter: saturate(0.4);
    opacity: 0.7;
    top: 10vh;
    left: -100%;
  }
}

.plane_text {
  background-image: url(../../assets/images/rollin/plane_logo.png);
  background-repeat: no-repeat;
  background-size: auto 75%;
  background-position: center right 0.6vw;
  font-size: 1vw;
  font-family: freshmannormal;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 0 2.6vw 0 0.6vw;
  line-height: 2.2vw;
  margin: 0.9vw 0 0;
  display: inline-block;
  height: 2vw;
  color: #001f82;
  box-shadow: inset 0.6vw -0.6vw 0px 0px rgba(0, 0, 0, 0.03);
  text-transform: uppercase;
  white-space: nowrap;
}

.plane {
  width: 7.58vw;
  height: 3.04vw;
  background-image: url(../../assets/images/rollin/plane_noon.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  position: absolute;
  right: 0;
  top: 0;
}

.plane_logo {
  height: 1.4vw;
  vertical-align: sub;
  margin-left: 1vw;
}

/* Sunrise */

.sunrise .section.rollin {
  background: rgb(143, 37, 150);
  background: linear-gradient(
    180deg,
    rgba(143, 37, 150, 1) 0%,
    rgba(255, 10, 111, 1) 22%,
    rgba(255, 109, 75, 1) 43%,
    rgba(255, 200, 29, 1) 65%,
    rgba(32, 0, 39, 1) 68%
  );
}

.sunrise .sun {
  top: 40%;
}

.sunrise .luna {
  filter: hue-rotate(175deg) brightness(0.7);
}

.sunrise .city {
  filter: brightness(0.2);
  opacity: 0.6;
}

.sunrise .palms1 {
  background-image: url(../../assets/images/rollin/palmy_jasne_sunrise.png);
}

.sunrise .palms2 {
  filter: hue-rotate(50deg) brightness(1.4) saturate(0.4);
}

.sunrise .stars {
  opacity: 0.4;
}

.sunrise .cable {
  position: absolute;
  top: 0px;
  width: 50%;
  filter: contrast(75%) brightness(80%);
}

.sunrise .car_karoseria {
  background-image: url(../../assets/images/rollin/car/karoseria_sunrise.png);
}

.sunrise .car_karoseria_top {
  background-image: url(../../assets/images/rollin/car/karoseria_top_sunrise.png);
}

.sunrise .car_zawieszenie {
  background-image: url(../../assets/images/rollin/car/zawieszenie_sunrise.png);
}

.sunrise .car_felga1 {
  background-image: url(../../assets/images/rollin/car/felga_sunrise.png);
}

.sunrise .car_felga2 {
  background-image: url(../../assets/images/rollin/car/felga_sunrise.png);
}

.sunrise .car_karoseria_int {
  background-image: url(../../assets/images/rollin/car/wnetrze-karoserii_sunrise.png);
}

.sunrise .car_foxy {
  background-image: url(../../assets/images/rollin/car/foxy_sunrise.png);
}

.sunrise .car_foxy2 {
  background-image: url(../../assets/images/rollin/car/druga-foxy_sunrise.png);
}

.sunrise .car_shadow {
  background-image: url(../../assets/images/rollin/car/cien_sunrise.png);
}

.sunrise .jersey {
  background-image: url(../../assets/images/rollin/jersey_sunrise.png);
}

.sunrise .rower {
  background-image: url(../../assets/images/rollin/rower_sunrise.png);
}

.sunrise .hawaii {
  background-image: url(../../assets/images/rollin/hawaii_sunrise.png);
}

.sunrise .hoodie {
  background-image: url(../../assets/images/rollin/hoodie_sunrise.png);
}

.sunrise .radio_box {
  background-image: url(../../assets/images/rollin/radio_sunrise.png);
}

.sunrise .radio_box.open {
  background-image: url(../../assets/images/rollin/radio_sunrise_open.png);
}

.sunrise .car_hand {
  background-image: url(../../assets/images/rollin/car/lapa1_sunrise.png);
}

.sunrise .car_baseball {
  background-image: url(../../assets/images/rollin/car/baseball_sunrise.png);
}

.sunrise .plane {
  background-image: url(../../assets/images/rollin/plane_sunrise.png);
}

.plane_text {
  background-color: rgba(205, 205, 205, 0.5);
  color: #511a7f;
  filter: contrast(100%) brightness(90%) saturate(50%);
}

.sunrise .land_footer img {
  filter: hue-rotate(45deg) brightness(1.5);
}

.sunrise .land_footer,
.sunrise .top_text,
.sunrise .tw_txt {
  color: #6c003f;
}

.sunrise .duck {
  background-image: url(../../assets/images/rollin/car/duck_sunrise.png);
}

/* Noon */

.noon .section.rollin {
  background: rgb(121, 153, 254);
  background: linear-gradient(
    180deg,
    rgba(121, 153, 254, 1) 4%,
    rgba(89, 217, 255, 1) 33%,
    rgba(229, 248, 255, 1) 83%,
    rgba(229, 248, 255, 1) 100%
  );
}

/* Sunset */

.sunset .section.rollin {
  background: rgb(253, 176, 24);
  background: linear-gradient(
    180deg,
    rgba(253, 176, 24, 1) 0%,
    rgba(255, 216, 149, 1) 22%,
    rgba(244, 142, 26, 1) 46%,
    rgba(244, 142, 26, 1) 50%,
    rgba(129, 41, 21, 1) 100%
  );
}

.sunset .sun {
  top: 30%;
}

.sunset .city {
  filter: brightness(0.2);
  opacity: 0.4;
}

.sunset .luna {
  filter: hue-rotate(215deg);
}

.sunset .cable {
  position: absolute;
  top: 0px;
  width: 50%;
  filter: contrast(100%) brightness(90%) saturate(50%);
}

.sunset .palms1 {
  background-image: url(../../assets/images/rollin/palmy_jasne_sunset.png);
}

.sunset .palms2 {
  background-image: url(../../assets/images/rollin/palmy_ciemne_sunset.png);
}

.sunset .car_karoseria {
  background-image: url(../../assets/images/rollin/car/karoseria_sunset.png);
}

.sunset .car_karoseria_top {
  background-image: url(../../assets/images/rollin/car/karoseria_top_sunset.png);
}

.sunset .car_zawieszenie {
  background-image: url(../../assets/images/rollin/car/zawieszenie_sunset.png);
}

.sunset .car_felga1 {
  background-image: url(../../assets/images/rollin/car/felga_sunset.png);
}

.sunset .car_felga2 {
  background-image: url(../../assets/images/rollin/car/felga_sunset.png);
}

.sunset .car_karoseria_int {
  background-image: url(../../assets/images/rollin/car/wnetrze-karoserii_sunset.png);
}

.sunset .car_foxy {
  background-image: url(../../assets/images/rollin/car/foxy_sunset.png);
}

.sunset .car_foxy2 {
  background-image: url(../../assets/images/rollin/car/druga-foxy_sunset.png);
}

.sunset .car_shadow {
  background-image: url(../../assets/images/rollin/car/cien_sunset.png);
}

.sunset .jersey {
  background-image: url(../../assets/images/rollin/jersey_sunset.png);
}

.sunset .rower {
  background-image: url(../../assets/images/rollin/rower_sunset.png);
}

.sunset .hawaii {
  background-image: url(../../assets/images/rollin/hawaii_sunset.png);
}

.sunset .hoodie {
  background-image: url(../../assets/images/rollin/hoodie_sunset.png);
}

.sunset .radio_box {
  background-image: url(../../assets/images/rollin/radio_sunset.png);
}

.sunset .radio_box.open {
  background-image: url(../../assets/images/rollin/radio_sunset_open.png);
}

.sunset .car_hand {
  background-image: url(../../assets/images/rollin/car/lapa1_sunset.png);
}

.sunset .car_baseball {
  background-image: url(../../assets/images/rollin/car/baseball_sunset.png);
}

.sunset .plane {
  background-image: url(../../assets/images/rollin/plane_sunset.png);
}

.sunset .plane_text {
  color: #5c586a;
  box-shadow: inset 0.6vw -0.6vw 0px 0px rgba(0, 0, 0, 0.03);
  filter: contrast(100%) brightness(90%) saturate(50%);
}

.sunset .land_footer img {
  filter: hue-rotate(75deg) brightness(1.5);
}

.sunset .land_footer,
.sunset .top_text,
.sunset .tw_txt {
  color: #75000c;
}

.sunset .duck {
  background-image: url(../../assets/images/rollin/car/duck_sunset.png);
}

/* Night */

.night .section.rollin {
  background: rgb(20, 0, 49);
  background: linear-gradient(
    180deg,
    rgba(20, 0, 49, 1) 17%,
    rgba(110, 1, 92, 1) 35%,
    rgba(215, 0, 4, 1) 48%,
    rgba(20, 0, 49, 1) 67%
  );
}

.night .stars {
  opacity: 0.8;
}

.night .luna {
  filter: hue-rotate(120deg) brightness(0.15);
}

.night .cable,
.night .palms1,
.night .city {
  filter: brightness(0);
}

.night .palms1 {
  background-image: url(../../assets/images/rollin/palmy_jasne_night.png);
  filter: brightness(1);
}

.night .palms2 {
  background-image: url(../../assets/images/rollin/palmy_ciemne_night.png);
  filter: brightness(1);
}

.night .car_karoseria {
  background-image: url(../../assets/images/rollin/car/karoseria_night.png);
}

.night .car_karoseria_top {
  background-image: url(../../assets/images/rollin/car/karoseria_top_night.png);
}

.night .car_zawieszenie {
  background-image: url(../../assets/images/rollin/car/zawieszenie_night.png);
}

.night .car_felga1 {
  background-image: url(../../assets/images/rollin/car/felga_night.png);
}

.night .car_felga2 {
  background-image: url(../../assets/images/rollin/car/felga_night.png);
}

.night .car_karoseria_int {
  background-image: url(../../assets/images/rollin/car/wnetrze-karoserii_night.png);
}

.night .car_foxy {
  background-image: url(../../assets/images/rollin/car/foxy_night.png);
}

.night .car_foxy2 {
  background-image: url(../../assets/images/rollin/car/druga-foxy_night.png);
}

.night .car_shadow {
  background-image: url(../../assets/images/rollin/car/cien_night.png);
}

.night .jersey {
  background-image: url(../../assets/images/rollin/jersey_night.png);
}

.night .rower {
  background-image: url(../../assets/images/rollin/rower_night.png);
}

.night .hawaii {
  background-image: url(../../assets/images/rollin/hawaii_night.png);
}

.night .hoodie {
  background-image: url(../../assets/images/rollin/hoodie_night.png);
}

.night .car_light_front {
  display: block;
  position: absolute;
  left: -20.6vw;
  height: 9.86vw;
  top: 5vw;
  width: 23.47vw;
}

.night .car_light_back {
  display: block;
  position: absolute;
  right: -9.7vw;
  height: 3.87vw;
  width: 19.87vw;
  top: 7.2vw;
}

.night .city {
  background-image: url(../../assets/images/rollin/city-scape_night.png);
  filter: brightness(1);
  opacity: 0.5;
}

.night .watch_box {
  background-image: url(../../assets/images/rollin/watch_night.png);
}

.night .watch_hour,
.night .watch_sek,
.night .watch_date,
.night .watch_day {
  color: #390f10;
}

.night .radio_box {
  background-image: url(../../assets/images/rollin/radio_night.png);
}

.night .radio_box.open {
  background-image: url(../../assets/images/rollin/radio_night_open.png);
}

.night .car_hand {
  background-image: url(../../assets/images/rollin/car/lapa1_night.png);
}

.night .car_baseball {
  background-image: url(../../assets/images/rollin/car/baseball_night.png);
}

.night .sun {
  background-image: url(../../assets/images/rollin/moon.png);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  display: block;
  width: 80px;
  height: 80px;
  left: 60%;
  top: 100px;
  background-repeat: no-repeat;
  background-size: contain;
}

.night .sun-mid,
.night .sun:before,
.night .sun:after {
  display: none;
}

.night .plane {
  background-image: url(../../assets/images/rollin/plane_night.png);
}

.night .plane_text {
  background-color: rgba(95, 95, 95, 0.4);
  color: #b7fff5;
  filter: contrast(100%) brightness(90%) saturate(30%);
  text-shadow: 0px 0px 10px #5fe175;
}

.night .land_footer img {
  filter: hue-rotate(45deg) brightness(1.5);
}

.night .land_footer,
.night .top_text,
.night .tw_txt {
  color: #6c003f;
}

.night .duck {
  background-image: url(../../assets/images/rollin/car/duck_night.png);
}