@import url(https://fonts.googleapis.com/css?family=Anton);

body { margin: 0 }

.container {
  color: white;
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw
}

.container h2 {
  text-align: center;
  font-size: 4.6em;
  color: white;
  font-family: 'Anton', sans-serif
}

.container input[type="radio"] {
  position: absolute;
  z-index: 10;
  top: 90%
}

.container #s1 { left: 40% }

.container #s2 { left: 50% }

.container #s3 { left: 60% }

.container .slide {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  left: 100%;
  transition: left 0s 1s
}

.container .slide1 {
  background-image: url("https://unsplash.it/1920/1080?image=776");
  background-size: cover
}

.container .slide1 h2 {
  opacity: 0;
  transform: translateY(-100%)
}

.container .slide2 {
  background-image: url("https://unsplash.it/1920/1080?image=773");
  background-size: cover
}

.container .slide2 h2 {
  opacity: 0;
  transform: translateY(-100%)
}

.container .slide3 {
  background-image: url("https://unsplash.it/1920/1080?image=771");
  background-size: cover
}

.container .slide3 h2 {
  opacity: 0;
  transform: translateY(-100%)
}

.container [id^="s"]:checked+.slide {
  transition: all 0.65s ease-out;
  left: 0;
  z-index: 3
}

.container [id^="s"]:checked+.slide h2 {
  transition: transform 0.82s 0.5s ease, opacity 0.8s 0.7s ease;
  opacity: 1;
  transform: translateY(0)
}
/*# sourceMappingURL=style.css.map */