.slider {
  width: 100vw;
  height: 100vh;
  position: relative;
  opacity: 0;
  -webkit-transition: opacity 2s;
  transition: opacity 2s;
}
.slider.done {
  opacity: 1;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.slide:not(.first) {
  visibility: hidden;
  opacity: 0;
}

.slide1 {
  background: url("../img/top1.jpg") no-repeat center center/cover;
}

.slide2 {
  background: url("../img/top2.jpg") no-repeat center center/cover;
}

.slide3 {
  background: url("../img/top3.jpg") no-repeat center center/cover;
}

.slide4 {
  background: url("../img/top4.jpg") no-repeat center center/cover;
}

.slide5 {
  background: url("../img/top5.jpg") no-repeat center center/cover;
}

.slide6 {
  background: url("../img/top6.jpg") no-repeat center center/cover;
}

.slide7 {
  background: url("../img/top7.jpg") no-repeat center center/cover;
}

.slide8 {
  background: url("../img/top8.jpg") no-repeat center center/cover;
}

.slide9 {
  background: url("../img/top9.jpg") no-repeat center center/cover;
}

.slide10 {
  background: url("../img/top10.jpg") no-repeat center center/cover;
}