#pos img {
  position: absolute;
  width: 100%;
  height: 450px;

}

#slider2{
  display: flex;
  flex-direction: column;
  align-content: flex-end;
}

.img2,
.img3,
.img4,
.img5 {
  opacity: 0.0;
}

#range2,
#range3,
#range4,
#range5 {
  transform: rotate(180deg);
  appearance: initial;
  display: inline;
  outline: none;
  border-radius: 10px;
}

#range2[type=range] {
  background-image: linear-gradient(to right, #fff, #000);
}

#range3[type=range] {
  background-image: linear-gradient(to right, #00a2ff, #000);
}

#range4[type=range] {
  background-image: linear-gradient(to right, #fff, #000);
}

#range5[type=range] {
  background-image: linear-gradient(to right, #907300, #000);
}

#flex-input {
  margin: 450px 0 0 0;
  height: 180px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: #181818;
  text-align: center;
  align-items: center;
  justify-content: center;
  z-index: 7;
}

#flex-input>div {
  width: 20%;
  margin: 10px;

}

#flex-input p {
  width: 100%;
  margin: 8px;
  color: azure;
  text-align: center;

}

@media screen and (min-device-width: 200px) and (max-width: 690px) {

  #flex-input {
    margin: 200px 0 0 0;
    
  }

  #flex-input>div {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    text-align: center;
    align-items: center;
    float: left;
    width: 20%;


  }

  #pos img {
    margin-top: 20px;
    position: absolute;
    width: 100%;
    height:180px;
    margin-bottom: 0;
  }

  #range2,
  #range3,
  #range4,
  #range5 {
    width: 100%;
    transform: rotate(180deg);
    appearance: initial;
    display: inline;
    outline: none;
    border-radius: 10px;
  }

  #flex-input p {
    width: 100%;
    font-size: 8px;
    color: azure;

  }

  #flex-input > #input1 {
    width: 40%;
    display: flex;
    align-content: center;
    text-align: center;
    align-items: center;

  }


}