#mainBack {
  position: fixed;
  bottom: 0;
  height: 400px;
  background-position-x: 0px;
  width: 125%;
  z-index: 10;
  background: url(./assets/dash/icon-terfix.png);
  background-position: bottom;
  animation: var(--animation-bg) var(--bg-animation-duration);
  background-size: var(--bg-size) 400px;
  background-repeat: repeat-x;
  margin-bottom: -1px;
  font-size: 0;
  border: none;
  outline: none;
  gap: 0;
  left: 0;
}

#mainFront {
  position: fixed;
  bottom: 0;
  height: 100vh;
  width: 100%;
  z-index: -1;
  background: url(./assets/dashboard/back-asli2.png);
  background-position: bottom;
/*  background-size: var(--bg-size) 100vh;*/
  background-size: cover;
  margin-bottom: 20px;
  background-repeat: no-repeat;
}


#angkot1-kiri {
  position: fixed;
  background: url(./assets/dash/angkot1-kiri.png);
  z-index: 11;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  bottom: var(--angkot1-kiri-bottom);
  height: var(--angkot1-kiri-height);
  animation: var(--angkot1-kiri-animation);
}

#angkot2-kiri {
  position: fixed;
  background: url(./assets/dash/angkot2-kiri.png);
  z-index: 11;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  bottom: var(--angkot2-kiri-bottom);
  height: var(--angkot2-kiri-height);
  animation: var(--angkot2-kiri-animation);
}

#angkot3-kiri {
  position: fixed;
  background: url(./assets/dash/angkot3-kiri.png);
  z-index: 11;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  bottom: var(--angkot3-kiri-bottom);
  height: var(--angkot3-kiri-height);
  animation: var(--angkot3-kiri-animation);
}

#angkot4-kiri {
  position: fixed;
  background: url(./assets/dash/angkot4-kiri.png);
  z-index: 11;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  bottom: var(--angkot4-kiri-bottom);
  height: var(--angkot4-kiri-height);
  animation: var(--angkot4-kiri-animation);
}

#angkot5-kiri {
  position: fixed;
  background: url(./assets/dash/angkot5-kiri.png);
  z-index: 11;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  /*animation: var(--animation-bg-angkot5) var(--bg-animation-duration);*/
  bottom: var(--angkot5-kiri-bottom);
  height: var(--angkot5-kiri-height);
  animation: var(--angkot5-kiri-animation);
}

#transkiri {
  position: fixed;
  background: url(./assets/dash/transkiri.png);
  z-index: 11;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  bottom: var(--transkiri-bottom);
  height: var(--transkiri-height);
  animation: var(--transkiri-animation);
    left: -200px;
}

#transkanan {
  position: fixed;
  background: url(./assets/dash/transkanan.png);
  z-index: 11;
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  bottom: var(--transkanan-bottom);
  height: var(--transkanan-height);
  animation: var(--transkanan-animation);
}

#angkot4 {
  position: fixed;
  bottom: 13px;
  background: url(./assets/dashboard/angkot4.png);
  z-index: 11;
  background-size: contain;
  background-repeat: no-repeat;
  height: 53px;
  width: 100px;
  right: -200px;
  animation: angkotKanan 17s ease-in infinite;
}

#prameks {
  position: fixed;
  bottom: 110px;
  background: url(./assets/dash/prameks.png);
  z-index: 9 !important;
  background-size: auto 55px;
  background-repeat: no-repeat;
  height: 55px;
  width: 1112px;
  right: -1180px;
  animation: prameks 30s linear infinite;
  animation-delay: 5s;
}

#angkot1-kanan {
    position: fixed;
    background: url(./assets/dash/angkot1-kanan.png);
    z-index: 11;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    background-position-x: 110vw ;
    bottom: var(--angkot1-kanan-bottom);
    height: var(--angkot1-kanan-height);
    animation: var(--angkot1-kanan-animation);
    animation-delay: 3s;
}

#angkot2-kanan {
    position: fixed;
    background: url(./assets/dash/angkot2-kanan.png);
    z-index: 11;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    background-position-x: 110vw ;
    bottom: var(--angkot2-kanan-bottom);
    height: var(--angkot2-kanan-height);
    animation: var(--angkot2-kanan-animation);
    animation-delay: 3s;
}
#angkot3-kanan {
    position: fixed;
    background: url(./assets/dash/angkot3-kanan.png);
    z-index: 11;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    background-position-x: 110vw ;
    bottom: var(--angkot3-kanan-bottom);
    height: var(--angkot3-kanan-height);
    animation: var(--angkot3-kanan-animation);
    animation-delay: 16s;
}
#angkot4-kanan {
    position: fixed;
    background: url(./assets/dash/angkot4-kanan.png);
    z-index: 11;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    background-position-x: 110vw ;
    bottom: var(--angkot4-kanan-bottom);
    height: var(--angkot4-kanan-height);
    animation: var(--angkot4-kanan-animation);
    animation-delay: 3s;
}



:root {
  --bg-animation-duration: 120s linear infinite;
  --bg-size: 3445px;
  /*--bg-size: 4126px;*/
  --animation-bg: bg;
  --animation-bg-angkot5: bg-angkot5;

  --angkot1-kiri-bottom: 40px;
  --angkot1-kiri-height: 37px;
  --angkot1-kiri-animation: angkot1-kiri 30s ease-in infinite;
  --angkot1-kiri-size: 200px;
  
  --angkot2-kiri-bottom: 38px;
  --angkot2-kiri-height: 37px;
  --angkot2-kiri-animation: angkot2-kiri 50s ease-in infinite;
  --angkot2-kiri-size: 200px;

  --angkot3-kiri-bottom: 35px;
  --angkot3-kiri-height: 37px;
  --angkot3-kiri-animation: angkot3-kiri 66s ease-in infinite;
  --angkot3-kiri-size: 200px;
  
  --angkot4-kiri-bottom: 31px;
  --angkot4-kiri-height: 37px;
  --angkot4-kiri-animation: angkot4-kiri 35s ease-in infinite;
  --angkot4-kiri-size: 200px;

  --angkot5-kiri-bottom: 46px;
  --angkot5-kiri-height: 37px;
  --angkot5-kiri-animation: angkot5-kiri 40s ease-in infinite;
  --angkot5-kiri-size: 200px;

  --angkot1-kanan-bottom: 16px;
  --angkot1-kanan-height: 37px;
  --angkot1-kanan-animation: angkot1-kanan 20s linear infinite;
  --angkot1-kanan-size: 200px;
  
  --angkot2-kanan-bottom: 14px;
  --angkot2-kanan-height: 37px;
  --angkot2-kanan-animation: angkot2-kanan 30s linear infinite;
  --angkot2-kanan-size: 200px;
  
  --angkot3-kanan-bottom: 12px;
  --angkot3-kanan-height: 37px;
  --angkot3-kanan-animation: angkot3-kanan 19s linear infinite;
  --angkot3-kanan-size: 200px;
  
  --angkot4-kanan-bottom: 8px;
  --angkot4-kanan-height: 37px;
  --angkot4-kanan-animation: angkot4-kanan 25s linear infinite;
  --angkot4-kanan-size: 200px;

  --transkiri-bottom: 44px;
  --transkiri-height: 51px;
  --transkiri-animation: transkiri 50s ease-out infinite;
  --transkiri-size: 200px;
  
  --transkanan-bottom: 3px;
  --transkanan-height: 51px;
  --transkanan-animation: transkanan 20s linear infinite;
  --transkanan-size: 200px;
}

@keyframes bg {
  0% {
    background-position-x: var(--bg-size);
  }
  100% {
    background-position-x: 0px;
  }
}

@keyframes bg-angkot5 {
  0% {
    background-position-x: calc(var(--bg-size) - 440px);
  }
  100% {
    background-position-x: -440px;
  }
}

@keyframes angkot1-kiri {
    0% {background-position-x: -60vw;}
    100% {background-position-x: 110vw;}
}

@keyframes angkot2-kiri {
  0% {background-position-x: -60vw;}
  100% {background-position-x: 140vw;}
}

@keyframes angkot3-kiri {
  0% {background-position-x: -40vw;}
  100% {background-position-x: 180vw;}
}

@keyframes angkot4-kiri {
  0% {background-position-x: -20vw;}
  100% {background-position-x: 160vw;}
}

@keyframes angkot5-kiri {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(100vw + var(--angkot5-kiri-size)));
  }
}


/*@keyframes prameks {*/
/*  0% {*/
/*    transform: translateX(0px);*/
/*  }*/
/*  100% {*/
/*    transform: translateX(calc(-400vw - 800px));*/
/*  }*/
/*}*/

@keyframes prameks {
  0% {
    transform: translateX(0px);
  }
  40% {
    transform: translateX(calc(-200vw - 800px));
  }
  60% {
    transform: translateX(calc(-200vw - 800px));
  }
  100% {
    transform: translateX(0px);
  }
}

@keyframes angkot1-kanan {
  0% {
    background-position-x: 110vw;
  }
  100% {
    background-position-x: -400px;
  }
}

@keyframes angkot2-kanan {
  0% {background-position-x: 120vw;}
  100% {background-position-x: -400px;}
}

@keyframes angkot3-kanan {
  0% {background-position-x: 150vw;}
  100% {background-position-x: -400px;}
}

@keyframes angkot4-kanan {
  0% {background-position-x: 104vw;}
  100% {background-position-x: -400px;}
}

@keyframes transkiri {
    0% {transform: translateX(0px);}
    100% {transform: translateX(calc(100vw + var(--transkiri-size)));    }
  }
  
@keyframes transkanan {
  0% {background-position-x: 104vw;}
  100% {background-position-x: -400px;}
}