:root {
  --progressbar-skalierung: 1.5;
}



/* Progress Bar -----------------------------------------------------------------------------*/

.nx-image-progressbar-section {
  height: 775px;
}

.nx-image-progressbar-content-box {
  overflow-y: scroll;
}

.nx-image-progressbar-content-box .single-story-container {
  flex: 0 0 100%;
  margin: 0;
}

/*hide scrollbar*/
.disable-scrollbars::-webkit-scrollbar {
  background: transparent; /* Chrome/Safari/Webkit */
  width: 0px;
}

.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}

.progressbar-elemntor-container {
  position: absolute;
  top: unset;
  left: 119px;
  z-index: 20;
  height: 100%;
  padding-top: 56px;
  padding-bottom: 56px;
}

.progress-bar-container {
  display: flex;
  justify-content: center;
  width: 1px;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.3);
}

.progress-bar {
  position: relative;
  height: 0%;
  width: 100%;
  background-color: rgb(0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: width 0.2s ease-out;
  display: flex;
  justify-content: center;
  transform: scaleX(var(--progressbar-skalierung));
  transform-origin: center;
}
.progress-bar-circle {
  width: 16px;
  height: 16px;
  background-color: black;
  border: 2px solid #000;
  border-radius: 50%;
}
.absolute-start {
  position: absolute;
  top: 0;
  transform: translateY(-100%);
  margin:56px 0;
}

.absolute-end {
  position: absolute;
  bottom: 0;
  margin: 56px 0;
}

.movable-circle {
  position: absolute;
  bottom: 0;
  transform: scaleX(calc(1 / var(--progressbar-skalierung)));
}

/*Desktop*/
@media (max-width: 1580px) {
 
	
}

/*laptop*/
@media (max-width: 1280px) {
  .nx-image-progressbar-section {
    height: 415px;
  }

  .progressbar-elemntor-container {
    left: 56px;
  }
}

/*Tablet*/
@media (max-width: 1023px) {
  .nx-image-progressbar-section {
    height: 415px;
  }
}

/*Mobile*/
@media (max-width: 767px) {
  
}

@media (max-width: 640px) {
  .nx-image-progressbar-section {
    height: 680px;
  }

  .nx-image-progressbar-content-box .single-story-container {
    height: 680px;
  }

  .progressbar-elemntor-container {
    height: 100vw;
    position: absolute;
    top: unset;
    bottom: 20px;
    left: unset;
    right: 0px;
    transform: rotate(-90deg);
    transform-origin: bottom;
    z-index: 9999;
  }
}