* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#sliderC {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#sliderC #line {
  height: 5px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  position: absolute;
  bottom: 0;
  right: 0;
}

#sliderC #dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
}

#sliderC #dots li {
  transition: 0.3s;
  list-style-type: none;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.5);
  margin: 0 0.25em;
  cursor: pointer;
}

#sliderC #dots li:hover,
#sliderC #dots li.active {
  background: white;
}

@keyframes line {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

#sliderC #back,
#sliderC #forword {
  width: 6%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.3s;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  color: white;
  font-weight: 700;
  font-size: 2rem;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfffffff', endColorstr='#00ffffff',GradientType=1 );
}

#sliderC #forword {
  left: auto;
  right: 0;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#bfffffff',GradientType=1 );
}

#sliderC:hover #back,
#sliderC:hover #forword {
  opacity: 0.9;
}

ul#move {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  margin-right: 100%;
  height: 70vh;
}

ul#move li {
  transition: 0.6s;
  min-width: 100%;
  height: 70vh;
  color: white;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul#move li img {
  width: 100%;
  height: 70vh;
}

ul#move li {
  background: #445566;
}
.button-arrow {
  width: 3rem;
  height: 3rem;
  background: rgba(117, 112, 112, 0.425);
  font-size: 1.6rem;
  padding: 1rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: center;
  color: rgb(241, 233, 217);
}

/* responsive slider */
@media only screen and (max-width: 800px) {
  ul#move {
    height: 45vh;
  }

  ul#move li {
    height: 45vh;
  }

  ul#move li img {
    height: 45vh;
  }
}

@media only screen and (max-width: 650px) {
  #sliderC #dots {
    display: none;
  }

  ul#move {
    height: 30vh;
  }

  ul#move li {
    height: 30vh;
  }

  ul#move li img {
    height: 30vh;
  }
}