.image-slider {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100vh;
  margin: 0 auto 0rem auto ;
  overflow: hidden;
}

#i1, #i2, #i3 {
 display: none;
}

#i1:checked ~ #img-1,
#i2:checked ~ #img-2,
#i3:checked ~ #img-3 {
  z-index: 9;
  /* transition: left 1s ease-in; */
  opacity: 1;
  transition: opacity 1s linear;
}

#i1:checked ~ .img-slide #txt-1,
#i2:checked ~ .img-slide #txt-2,
#i3:checked ~ .img-slide #txt-3 {
  /* z-index: 9; */
  /* transition: left 1s ease-in; */
  left : 0;
  opacity: 1;
  transition: left 1.5s ease-out, opacity 1.5s ease-in;
}
#i1:checked ~ .slider-nav #dot1,
#i2:checked ~ .slider-nav #dot2,
#i3:checked ~ .slider-nav #dot3 {
  background: rgba(223, 226, 230, 0.808);
}

.pre, .next {
  height: 5%;
  width: 10%;
  position: absolute;
  top: 70%;
  margin-left: 1rem;
  margin-right: 1rem;
  cursor: pointer;
  /* bottom: 0; */
  /* background-color: #59606944; */
  opacity: .5;
}

.next:hover, .pre:hover {
  opacity: .7;
}

.pre { 
  left: 0;
  background-image: url("/assets/images/left-arrow.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.next { 
  right: 0;
  background-image: url("/assets/images/right-arrow.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
}

.slider-nav {
  position: absolute;
  bottom: .5rem;
  z-index: 99;
  height: 1rem;
  width: 100%;
  text-align: center;
}

.dots {
  display: inline-block;
  width: 3rem;
  height: 1rem;
  margin: 0 4px;
  top: -5px;
  position: relative;
  border-radius: .5rem;
  background-color: #00000049;
  cursor: pointer;
}

.img-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 1s linear;
  /* background-position: center; */
  /* background-repeat: no-repeat; */
  /* background-size: cover; */
}

.img-slide > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000070;
}