#mainContainer {
  width: 100%;
  box-sizing: border-box;
  height: 400px;
  margin-top: 0px;
  /* border: solid; */
  user-select: none;
  /* box-shadow: 1px rgb(128, 127, 127); */
}
#slideshowContainer {
  width: 100%;
  height: 100%;
  background-color: rgb(223, 238, 238);
  position: relative;
  overflow: hidden;
}
#leftArrow,
#rightArrow {
  position: absolute;
  z-index: 1;
  left: 10px;
  top: 45%;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  border: 0.8px gray;
  font-size: 20px;
  background-color: white;
  text-align: center;
}
i {
  margin-top: 30%;
}

#rightArrow {
  left: auto;
  right: 10px;
}
.imageContainer {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
}
.imageContainer img {
  display: inline-block;
  border-radius: 3px;
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  min-height: 250px;
}
#dotsContainer {
  width: 100%;
  height: 22px;
  margin-top: 10px;
  text-align: center;
  /* border: solid; */
}
#dotsContainer .dots {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50px;
  background-color: pink;
}
#dotsContainer > :not(:last-child) {
  margin-right: 15px;
}
#dotsContainer .dots:active {
  background-color: rgb(243, 114, 243);
}
#mainContainer .moveLeftCurrentSlide {
  animation-name: moveLeftCurrent;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
#mainContainer .moveLeftNextSlide {
  animation-name: moveLeftNext;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes moveLeftCurrent {
  from {
    margin-left: 0px;
    opacity: 1;
  }
  to {
    margin-left: -100%;
    opacity: 1;
  }
}
@keyframes moveLeftNext {
  from {
    margin-left: 100%;
    opacity: 1;
  }
  to {
    margin-left: 0;
    opacity: 1;
  }
}

#mainContainer .moveRightCurrentSlide {
  animation-name: moveRightCurrent;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes moveRightCurrent {
  from {
    margin-left: 0px;
    opacity: 1;
  }
  to {
    margin-left: 100%;
    opacity: 1;
  }
}
#mainContainer .moveRightNextSlide {
  animation-name: moveRightNext;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes moveRightNext {
  from {
    margin-left: -100%;
    opacity: 1;
  }
  to {
    margin-left: 0px;
    opacity: 1;
  }
}